/*! tailwindcss v4.1.10 | MIT License | https://tailwindcss.com */
@charset "UTF-8";
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --color-red-500: oklch(63.7% 0.237 25.331);
    --color-gray-50: oklch(98.5% 0.002 247.839);
    --color-gray-200: oklch(92.8% 0.006 264.531);
    --color-gray-300: oklch(87.2% 0.01 258.338);
    --color-gray-600: oklch(44.6% 0.03 256.802);
    --color-white: #fff;
    --spacing: 0.25rem;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    --font-weight-black: 900;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --color-myblack: #3B3A3A;
    --color-myblack2: #666666;
    --color-mygray200: #F9F8F5;
    --color-mygray300: #EAE6E1;
    --color-mygray400: #B1B1B1;
    --color-work1: #1B6BAC;
    --color-work2: #2B87AA;
    --color-brand: #2D90D3;
    --color-brand1: #2375A1;
    --color-brand2: #11C3B7;
    --color-brand4: #FFB42A;
    --color-brand6: #E7E6ED;
    --color-brand7: #1EB6CA;
    --color-brand8: #008294;
    --font-SerifTcExtraBold: 'NotoSerifTC-ExtraBold', 'sans-serif';
    --max_width: 120rem;
    --set_h: 5rem;
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .\@container {
    container-type: inline-size;
  }
  .collapse {
    visibility: collapse;
  }
  .visible {
    visibility: visible;
  }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .static {
    position: static;
  }
  .sticky {
    position: sticky;
  }
  .inset-0 {
    inset: calc(var(--spacing) * 0);
  }
  .top-0 {
    top: calc(var(--spacing) * 0);
  }
  .right-0 {
    right: calc(var(--spacing) * 0);
  }
  .-left-\[2rem\] {
    left: calc(2rem * -1);
  }
  .z-40 {
    z-index: 40;
  }
  .z-\[20\] {
    z-index: 20;
  }
  .z-\[50\] {
    z-index: 50;
  }
  .z-\[200\] {
    z-index: 200;
  }
  .\!container {
    width: 100% !important;
    @media (width >= 360px) {
      max-width: 360px !important;
    }
    @media (width >= 576px) {
      max-width: 576px !important;
    }
    @media (width >= 640px) {
      max-width: 640px !important;
    }
    @media (width >= 768px) {
      max-width: 768px !important;
    }
    @media (width >= 769px) {
      max-width: 769px !important;
    }
    @media (width >= 991px) {
      max-width: 991px !important;
    }
    @media (width >= 1024px) {
      max-width: 1024px !important;
    }
    @media (width >= 1180px) {
      max-width: 1180px !important;
    }
    @media (width >= 1280px) {
      max-width: 1280px !important;
    }
    @media (width >= 1367px) {
      max-width: 1367px !important;
    }
    @media (width >= 1400px) {
      max-width: 1400px !important;
    }
    @media (width >= 1500px) {
      max-width: 1500px !important;
    }
    @media (width >= 2000px) {
      max-width: 2000px !important;
    }
  }
  .container {
    width: 100%;
    @media (width >= 360px) {
      max-width: 360px;
    }
    @media (width >= 576px) {
      max-width: 576px;
    }
    @media (width >= 640px) {
      max-width: 640px;
    }
    @media (width >= 768px) {
      max-width: 768px;
    }
    @media (width >= 769px) {
      max-width: 769px;
    }
    @media (width >= 991px) {
      max-width: 991px;
    }
    @media (width >= 1024px) {
      max-width: 1024px;
    }
    @media (width >= 1180px) {
      max-width: 1180px;
    }
    @media (width >= 1280px) {
      max-width: 1280px;
    }
    @media (width >= 1367px) {
      max-width: 1367px;
    }
    @media (width >= 1400px) {
      max-width: 1400px;
    }
    @media (width >= 1500px) {
      max-width: 1500px;
    }
    @media (width >= 2000px) {
      max-width: 2000px;
    }
  }
  .\!m-0 {
    margin: calc(var(--spacing) * 0) !important;
  }
  .m-auto {
    margin: auto;
  }
  .mx-auto {
    margin-inline: auto;
  }
  .\!my-\[1\.5rem\] {
    margin-block: 1.5rem !important;
  }
  .\!my-\[2rem\] {
    margin-block: 2rem !important;
  }
  .my-6 {
    margin-block: calc(var(--spacing) * 6);
  }
  .my-\[\.5rem\] {
    margin-block: .5rem;
  }
  .my-\[1\.25rem\] {
    margin-block: 1.25rem;
  }
  .my-\[1rem\] {
    margin-block: 1rem;
  }
  .\!-mt-0 {
    margin-top: calc(var(--spacing) * -0) !important;
  }
  .\!-mt-\[4rem\] {
    margin-top: calc(4rem * -1) !important;
  }
  .\!mt-\[1rem\] {
    margin-top: 1rem !important;
  }
  .-mt-\[1rem\] {
    margin-top: calc(1rem * -1);
  }
  .-mt-\[2\.5rem\] {
    margin-top: calc(2.5rem * -1);
  }
  .mt-\[\.625rem\] {
    margin-top: .625rem;
  }
  .mt-\[1\.5rem\] {
    margin-top: 1.5rem;
  }
  .mt-\[1rem\] {
    margin-top: 1rem;
  }
  .mt-\[2rem\] {
    margin-top: 2rem;
  }
  .\!-mr-\[var\(--px_w\)\] {
    margin-right: calc(var(--px_w) * -1) !important;
  }
  .mr-auto {
    margin-right: auto;
  }
  .-mb-\[\.5rem\] {
    margin-bottom: calc(.5rem * -1);
  }
  .-mb-\[1rem\] {
    margin-bottom: calc(1rem * -1);
  }
  .mb-\[\.5rem\] {
    margin-bottom: .5rem;
  }
  .mb-\[1rem\] {
    margin-bottom: 1rem;
  }
  .mb-\[2rem\] {
    margin-bottom: 2rem;
  }
  .\!ml-0 {
    margin-left: calc(var(--spacing) * 0) !important;
  }
  .-ml-\[calc\(var\(--rightBox_w\)\*\.5\)\] {
    margin-left: calc(calc(var(--rightBox_w) * .5) * -1);
  }
  .ml-0 {
    margin-left: calc(var(--spacing) * 0);
  }
  .ml-2 {
    margin-left: calc(var(--spacing) * 2);
  }
  .ml-\[\.625rem\] {
    margin-left: .625rem;
  }
  .ml-\[1rem\] {
    margin-left: 1rem;
  }
  .ml-\[2rem\] {
    margin-left: 2rem;
  }
  .ml-\[25\%\] {
    margin-left: 25%;
  }
  .ml-auto {
    margin-left: auto;
  }
  .\!flex {
    display: flex !important;
  }
  .\!grid {
    display: grid !important;
  }
  .\!hidden {
    display: none !important;
  }
  .block {
    display: block;
  }
  .contents {
    display: contents;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
  .inline-block {
    display: inline-block;
  }
  .table {
    display: table;
  }
  .table-caption {
    display: table-caption;
  }
  .table-cell {
    display: table-cell;
  }
  .aspect-\[16\/9\] {
    aspect-ratio: 16/9;
  }
  .\!h-\[1\.6rem\] {
    height: 1.6rem !important;
  }
  .\!h-\[2\.6rem\] {
    height: 2.6rem !important;
  }
  .\!h-\[3\.5rem\] {
    height: 3.5rem !important;
  }
  .\!h-\[3rem\] {
    height: 3rem !important;
  }
  .\!h-auto {
    height: auto !important;
  }
  .h-\[2\.2rem\] {
    height: 2.2rem;
  }
  .h-\[2\.4rem\] {
    height: 2.4rem;
  }
  .h-\[2\.5rem\] {
    height: 2.5rem;
  }
  .h-full {
    height: 100%;
  }
  .\!w-\[1\.5rem\] {
    width: 1.5rem !important;
  }
  .\!w-\[1\.6rem\] {
    width: 1.6rem !important;
  }
  .\!w-\[2rem\] {
    width: 2rem !important;
  }
  .\!w-\[8rem\] {
    width: 8rem !important;
  }
  .\!w-\[12rem\] {
    width: 12rem !important;
  }
  .\!w-\[24rem\] {
    width: 24rem !important;
  }
  .\!w-\[40rem\] {
    width: 40rem !important;
  }
  .\!w-fit {
    width: fit-content !important;
  }
  .\!w-full {
    width: 100% !important;
  }
  .w-\[1px\] {
    width: 1px;
  }
  .w-\[2\.425rem\] {
    width: 2.425rem;
  }
  .w-\[2rem\] {
    width: 2rem;
  }
  .w-\[3\.5rem\] {
    width: 3.5rem;
  }
  .w-\[3rem\] {
    width: 3rem;
  }
  .w-\[5rem\] {
    width: 5rem;
  }
  .w-\[10rem\] {
    width: 10rem;
  }
  .w-\[12rem\] {
    width: 12rem;
  }
  .w-\[20rem\] {
    width: 20rem;
  }
  .w-auto {
    width: auto;
  }
  .w-fit {
    width: fit-content;
  }
  .w-full {
    width: 100%;
  }
  .\!max-w-\[5rem\] {
    max-width: 5rem !important;
  }
  .\!max-w-\[120rem\] {
    max-width: 120rem !important;
  }
  .max-w-\[20rem\] {
    max-width: 20rem;
  }
  .max-w-\[25rem\] {
    max-width: 25rem;
  }
  .max-w-\[var\(--max_width\)\] {
    max-width: var(--max_width);
  }
  .\!min-w-\[6rem\] {
    min-width: 6rem !important;
  }
  .\!min-w-\[8rem\] {
    min-width: 8rem !important;
  }
  .\!min-w-\[20rem\] {
    min-width: 20rem !important;
  }
  .\!min-w-fit {
    min-width: fit-content !important;
  }
  .\!min-w-full {
    min-width: 100% !important;
  }
  .min-w-\[var\(--rightBox_w\)\] {
    min-width: var(--rightBox_w);
  }
  .min-w-full {
    min-width: 100%;
  }
  .grow {
    flex-grow: 1;
  }
  .table-auto {
    table-layout: auto;
  }
  .border-collapse {
    border-collapse: collapse;
  }
  .rotate-180 {
    rotate: 180deg;
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .resize {
    resize: both;
  }
  .list-decimal {
    list-style-type: decimal;
  }
  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .\!flex-row-reverse {
    flex-direction: row-reverse !important;
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-col-reverse {
    flex-direction: column-reverse;
  }
  .flex-row-reverse {
    flex-direction: row-reverse;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .items-center {
    align-items: center;
  }
  .items-start {
    align-items: flex-start;
  }
  .justify-center {
    justify-content: center;
  }
  .justify-end {
    justify-content: flex-end;
  }
  .justify-start {
    justify-content: flex-start;
  }
  .justify-items-center {
    justify-items: center;
  }
  .\!gap-0 {
    gap: calc(var(--spacing) * 0) !important;
  }
  .\!gap-\[\.5rem\] {
    gap: .5rem !important;
  }
  .\!gap-\[\.25rem\] {
    gap: .25rem !important;
  }
  .\!gap-\[1\.5rem\] {
    gap: 1.5rem !important;
  }
  .\!gap-\[1rem\] {
    gap: 1rem !important;
  }
  .\!gap-\[2\.5rem\] {
    gap: 2.5rem !important;
  }
  .\!gap-\[2rem\] {
    gap: 2rem !important;
  }
  .gap-\[\.5rem\] {
    gap: .5rem;
  }
  .gap-\[\.75rem\] {
    gap: .75rem;
  }
  .gap-\[\.625rem\] {
    gap: .625rem;
  }
  .gap-\[1\.25rem\] {
    gap: 1.25rem;
  }
  .gap-\[1\.125rem\] {
    gap: 1.125rem;
  }
  .gap-\[1rem\] {
    gap: 1rem;
  }
  .gap-\[2\.5rem\] {
    gap: 2.5rem;
  }
  .gap-\[2rem\] {
    gap: 2rem;
  }
  .gap-\[4rem\] {
    gap: 4rem;
  }
  .gap-x-\[\.5rem\] {
    column-gap: .5rem;
  }
  .\!gap-y-\[1\.5rem\] {
    row-gap: 1.5rem !important;
  }
  .\!gap-y-\[2rem\] {
    row-gap: 2rem !important;
  }
  .gap-y-\[\.625rem\] {
    row-gap: .625rem;
  }
  .gap-y-\[1\.5rem\] {
    row-gap: 1.5rem;
  }
  .gap-y-\[1rem\] {
    row-gap: 1rem;
  }
  .gap-y-\[2rem\] {
    row-gap: 2rem;
  }
  .divide-y {
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
  }
  .divide-gray-200 {
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
  }
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .\!overflow-x-auto {
    overflow-x: auto !important;
  }
  .overflow-x-auto {
    overflow-x: auto;
  }
  .\!overflow-y-auto {
    overflow-y: auto !important;
  }
  .\!rounded-\[\.4rem\] {
    border-radius: .4rem !important;
  }
  .\!rounded-\[0\] {
    border-radius: 0 !important;
  }
  .\!rounded-\[100rem\] {
    border-radius: 100rem !important;
  }
  .rounded {
    border-radius: 0.25rem;
  }
  .rounded-bl-\[6rem\] {
    border-bottom-left-radius: 6rem;
  }
  .\!border-0 {
    border-style: var(--tw-border-style) !important;
    border-width: 0px !important;
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-b-1 {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
  .\!border-myblack\/50 {
    border-color: color-mix(in srgb, #3B3A3A 50%, transparent) !important;
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-myblack) 50%, transparent) !important;
    }
  }
  .border-gray-300 {
    border-color: var(--color-gray-300);
  }
  .border-mygray300 {
    border-color: var(--color-mygray300);
  }
  .\!bg-\[\#8cc8f4\] {
    background-color: #8cc8f4 !important;
  }
  .\!bg-\[\#a0e2ce\] {
    background-color: #a0e2ce !important;
  }
  .\!bg-\[\#fabcd0\] {
    background-color: #fabcd0 !important;
  }
  .\!bg-brand6 {
    background-color: var(--color-brand6) !important;
  }
  .bg-\[\#F9F8F5\]\/60 {
    background-color: color-mix(in oklab, #F9F8F5 60%, transparent);
  }
  .bg-\[\#ffffff\] {
    background-color: #ffffff;
  }
  .bg-\[rgba\(0\,0\,0\,\.2\)\] {
    background-color: rgba(0,0,0,.2);
  }
  .bg-\[rgba\(0\,0\,0\,\.7\)\] {
    background-color: rgba(0,0,0,.7);
  }
  .bg-\[rgba\(255\,255\,255\,1\)\] {
    background-color: rgba(255,255,255,1);
  }
  .bg-brand4 {
    background-color: var(--color-brand4);
  }
  .bg-brand7 {
    background-color: var(--color-brand7);
  }
  .bg-gray-300 {
    background-color: var(--color-gray-300);
  }
  .bg-myblack\/75 {
    background-color: color-mix(in srgb, #3B3A3A 75%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-myblack) 75%, transparent);
    }
  }
  .bg-mygray200 {
    background-color: var(--color-mygray200);
  }
  .bg-mygray300 {
    background-color: var(--color-mygray300);
  }
  .\!object-cover {
    object-fit: cover !important;
  }
  .\!p-0 {
    padding: calc(var(--spacing) * 0) !important;
  }
  .\!p-\[\.625rem\] {
    padding: .625rem !important;
  }
  .\!p-\[1rem\] {
    padding: 1rem !important;
  }
  .p-4 {
    padding: calc(var(--spacing) * 4);
  }
  .p-\[\.5rem\] {
    padding: .5rem;
  }
  .p-\[0_\.625rem_\.625rem_\.625rem\] {
    padding: 0 .625rem .625rem .625rem;
  }
  .p-\[1\.25rem\] {
    padding: 1.25rem;
  }
  .p-\[1rem\] {
    padding: 1rem;
  }
  .p-\[2rem\] {
    padding: 2rem;
  }
  .\!px-\[1\.5rem\] {
    padding-inline: 1.5rem !important;
  }
  .\!px-\[1rem\] {
    padding-inline: 1rem !important;
  }
  .\!px-\[2rem\] {
    padding-inline: 2rem !important;
  }
  .px-0 {
    padding-inline: calc(var(--spacing) * 0);
  }
  .px-\[\.5rem\] {
    padding-inline: .5rem;
  }
  .px-\[\.625rem\] {
    padding-inline: .625rem;
  }
  .px-\[1\.5rem\] {
    padding-inline: 1.5rem;
  }
  .px-\[1rem\] {
    padding-inline: 1rem;
  }
  .px-\[2\.5rem\] {
    padding-inline: 2.5rem;
  }
  .px-\[2rem\] {
    padding-inline: 2rem;
  }
  .\!py-\[\.15rem\] {
    padding-block: .15rem !important;
  }
  .\!py-\[1\.25rem\] {
    padding-block: 1.25rem !important;
  }
  .\!py-\[1rem\] {
    padding-block: 1rem !important;
  }
  .\!py-\[2\.5rem\] {
    padding-block: 2.5rem !important;
  }
  .py-\[1rem\] {
    padding-block: 1rem;
  }
  .py-\[2rem\] {
    padding-block: 2rem;
  }
  .\!pt-\[1\.5rem\] {
    padding-top: 1.5rem !important;
  }
  .\!pt-\[1rem\] {
    padding-top: 1rem !important;
  }
  .\!pt-\[3\.625rem\] {
    padding-top: 3.625rem !important;
  }
  .pt-\[1\.5rem\] {
    padding-top: 1.5rem;
  }
  .pt-\[1rem\] {
    padding-top: 1rem;
  }
  .pr-\[4rem\] {
    padding-right: 4rem;
  }
  .\!pb-0 {
    padding-bottom: calc(var(--spacing) * 0) !important;
  }
  .\!pb-\[2\.5rem\] {
    padding-bottom: 2.5rem !important;
  }
  .pb-\[\.5rem\] {
    padding-bottom: .5rem;
  }
  .pb-\[1\.5rem\] {
    padding-bottom: 1.5rem;
  }
  .pb-\[2rem\] {
    padding-bottom: 2rem;
  }
  .\!text-left {
    text-align: left !important;
  }
  .text-center {
    text-align: center;
  }
  .text-end {
    text-align: end;
  }
  .text-left {
    text-align: left;
  }
  .font-SerifTcExtraBold {
    font-family: var(--font-SerifTcExtraBold);
  }
  .text-\[1\.2rem\] {
    font-size: 1.2rem;
  }
  .text-\[1\.3rem\] {
    font-size: 1.3rem;
  }
  .text-\[1\.4rem\] {
    font-size: 1.4rem;
  }
  .text-\[1\.25rem\] {
    font-size: 1.25rem;
  }
  .text-\[1\.225rem\] {
    font-size: 1.225rem;
  }
  .text-\[1\.425rem\] {
    font-size: 1.425rem;
  }
  .text-\[1rem\] {
    font-size: 1rem;
  }
  .text-\[2\.25rem\] {
    font-size: 2.25rem;
  }
  .text-\[2rem\] {
    font-size: 2rem;
  }
  .font-black {
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
  }
  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .text-nowrap {
    text-wrap: nowrap;
  }
  .whitespace-nowrap {
    white-space: nowrap;
  }
  .\!text-\[var\(--color_brand1\)\] {
    color: var(--color_brand1) !important;
  }
  .\!text-brand1 {
    color: var(--color-brand1) !important;
  }
  .text-\[\#b62432\] {
    color: #b62432;
  }
  .text-\[\#ffffff\]\/75 {
    color: color-mix(in oklab, #ffffff 75%, transparent);
  }
  .text-\[var\(--color_brand1\)\] {
    color: var(--color_brand1);
  }
  .text-brand\/20 {
    color: color-mix(in srgb, #2D90D3 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-brand) 20%, transparent);
    }
  }
  .text-brand1 {
    color: var(--color-brand1);
  }
  .text-brand4 {
    color: var(--color-brand4);
  }
  .text-brand7 {
    color: var(--color-brand7);
  }
  .text-brand8 {
    color: var(--color-brand8);
  }
  .text-gray-600 {
    color: var(--color-gray-600);
  }
  .text-myblack2 {
    color: var(--color-myblack2);
  }
  .text-mygray400 {
    color: var(--color-mygray400);
  }
  .text-red-500 {
    color: var(--color-red-500);
  }
  .text-work1 {
    color: var(--color-work1);
  }
  .lowercase {
    text-transform: lowercase;
  }
  .uppercase {
    text-transform: uppercase;
  }
  .\!opacity-50 {
    opacity: 50% !important;
  }
  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .invert {
    --tw-invert: invert(100%);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .\!filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,) !important;
  }
  .filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .hover\:bg-gray-50 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .xs\:mx-auto {
    @media (width >= 360px) {
      margin-inline: auto;
    }
  }
  .xs\:ml-\[\.5rem\] {
    @media (width >= 360px) {
      margin-left: .5rem;
    }
  }
  .xs\:\!flex {
    @media (width >= 360px) {
      display: flex !important;
    }
  }
  .xs\:block {
    @media (width >= 360px) {
      display: block;
    }
  }
  .xs\:\!w-fit {
    @media (width >= 360px) {
      width: fit-content !important;
    }
  }
  .xs\:grid-cols-2 {
    @media (width >= 360px) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .sm\:absolute {
    @media (width >= 576px) {
      position: absolute;
    }
  }
  .sm\:top-2 {
    @media (width >= 576px) {
      top: calc(var(--spacing) * 2);
    }
  }
  .sm\:\!m-\[0_auto_1rem_0\] {
    @media (width >= 576px) {
      margin: 0 auto 1rem 0 !important;
    }
  }
  .sm\:\!-mt-\[0rem\] {
    @media (width >= 576px) {
      margin-top: calc(0rem * -1) !important;
    }
  }
  .sm\:mr-\[auto\] {
    @media (width >= 576px) {
      margin-right: auto;
    }
  }
  .sm\:ml-0 {
    @media (width >= 576px) {
      margin-left: calc(var(--spacing) * 0);
    }
  }
  .sm\:block {
    @media (width >= 576px) {
      display: block;
    }
  }
  .sm\:\!w-\[10rem\] {
    @media (width >= 576px) {
      width: 10rem !important;
    }
  }
  .sm\:\!w-\[24rem\] {
    @media (width >= 576px) {
      width: 24rem !important;
    }
  }
  .sm\:\!w-fit {
    @media (width >= 576px) {
      width: fit-content !important;
    }
  }
  .sm\:w-\[18rem\] {
    @media (width >= 576px) {
      width: 18rem;
    }
  }
  .sm\:w-\[86\%\] {
    @media (width >= 576px) {
      width: 86%;
    }
  }
  .sm\:\!max-w-\[14rem\] {
    @media (width >= 576px) {
      max-width: 14rem !important;
    }
  }
  .sm\:\!flex-0 {
    @media (width >= 576px) {
      flex: 0 !important;
    }
  }
  .sm\:grid-cols-2 {
    @media (width >= 576px) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .sm\:gap-\[2rem\] {
    @media (width >= 576px) {
      gap: 2rem;
    }
  }
  .sm\:p-\[2\.5rem\] {
    @media (width >= 576px) {
      padding: 2.5rem;
    }
  }
  .sm\:\!px-\[1rem\] {
    @media (width >= 576px) {
      padding-inline: 1rem !important;
    }
  }
  .sm\:px-\[\.5rem\] {
    @media (width >= 576px) {
      padding-inline: .5rem;
    }
  }
  .sm\:px-\[1\.25rem\] {
    @media (width >= 576px) {
      padding-inline: 1.25rem;
    }
  }
  .sm\:pt-\[5rem\] {
    @media (width >= 576px) {
      padding-top: 5rem;
    }
  }
  .msm\:\!mr-\[0\] {
    @media (width >= 640px) {
      margin-right: 0 !important;
    }
  }
  .msm\:\!flex {
    @media (width >= 640px) {
      display: flex !important;
    }
  }
  .msm\:block {
    @media (width >= 640px) {
      display: block;
    }
  }
  .msm\:flex {
    @media (width >= 640px) {
      display: flex;
    }
  }
  .msm\:grid {
    @media (width >= 640px) {
      display: grid;
    }
  }
  .msm\:hidden {
    @media (width >= 640px) {
      display: none;
    }
  }
  .msm\:w-\[49\%\] {
    @media (width >= 640px) {
      width: 49%;
    }
  }
  .msm\:grid-cols-2 {
    @media (width >= 640px) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .msm\:grid-cols-3 {
    @media (width >= 640px) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .md\:\!w-\[20rem\] {
    @media (width >= 768px) {
      width: 20rem !important;
    }
  }
  .md\:\!w-\[40rem\] {
    @media (width >= 768px) {
      width: 40rem !important;
    }
  }
  .md\:\!w-fit {
    @media (width >= 768px) {
      width: fit-content !important;
    }
  }
  .md\:grid-cols-2 {
    @media (width >= 768px) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .md\:grid-cols-4 {
    @media (width >= 768px) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .desktop\:\!-mt-\[\.5rem\] {
    @media (width >= 991px) {
      margin-top: calc(.5rem * -1) !important;
    }
  }
  .desktop\:\!grid {
    @media (width >= 991px) {
      display: grid !important;
    }
  }
  .desktop\:flex {
    @media (width >= 991px) {
      display: flex;
    }
  }
  .desktop\:\!w-\[calc\(50\%-\.25rem\)\] {
    @media (width >= 991px) {
      width: calc(50% - .25rem) !important;
    }
  }
  .desktop\:grid-flow-col {
    @media (width >= 991px) {
      grid-auto-flow: column;
    }
  }
  .desktop\:text-center {
    @media (width >= 991px) {
      text-align: center;
    }
  }
  .pc\:relative {
    @media (width >= 1024px) {
      position: relative;
    }
  }
  .pc\:block {
    @media (width >= 1024px) {
      display: block;
    }
  }
  .pc\:flex {
    @media (width >= 1024px) {
      display: flex;
    }
  }
  .pc\:hidden {
    @media (width >= 1024px) {
      display: none;
    }
  }
  .pc\:w-\[25dvw\] {
    @media (width >= 1024px) {
      width: 25dvw;
    }
  }
  .pc\:w-\[40\%\] {
    @media (width >= 1024px) {
      width: 40%;
    }
  }
  .pc\:w-\[60\%\] {
    @media (width >= 1024px) {
      width: 60%;
    }
  }
  .pc\:grid-cols-3 {
    @media (width >= 1024px) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .pc\:flex-row-reverse {
    @media (width >= 1024px) {
      flex-direction: row-reverse;
    }
  }
  .pc\:flex-nowrap {
    @media (width >= 1024px) {
      flex-wrap: nowrap;
    }
  }
  .pc\:px-\[2\.5rem\] {
    @media (width >= 1024px) {
      padding-inline: 2.5rem;
    }
  }
  .pc\:pt-0 {
    @media (width >= 1024px) {
      padding-top: calc(var(--spacing) * 0);
    }
  }
  .air\:w-\[60\%\] {
    @media (width >= 1180px) {
      width: 60%;
    }
  }
  .air\:grid-cols-3 {
    @media (width >= 1180px) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .air\:grid-cols-5 {
    @media (width >= 1180px) {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }
  .lg\:m-auto {
    @media (width >= 1280px) {
      margin: auto;
    }
  }
  .lg\:-ml-\[calc\(var\(--rightBox_w\)\*\.6\)\] {
    @media (width >= 1280px) {
      margin-left: calc(calc(var(--rightBox_w) * .6) * -1);
    }
  }
  .lg\:block {
    @media (width >= 1280px) {
      display: block;
    }
  }
  .lg\:hidden {
    @media (width >= 1280px) {
      display: none;
    }
  }
  .lg\:\!max-w-\[70rem\] {
    @media (width >= 1280px) {
      max-width: 70rem !important;
    }
  }
  .pro\:\!px-\[\.75rem\] {
    @media (width >= 1367px) {
      padding-inline: .75rem !important;
    }
  }
  .xl\:block {
    @media (width >= 1400px) {
      display: block;
    }
  }
  .xl\:flex {
    @media (width >= 1400px) {
      display: flex;
    }
  }
  .xl\:grid-cols-3 {
    @media (width >= 1400px) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .xl\:grid-cols-5 {
    @media (width >= 1400px) {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }
  .xl\:grid-cols-6 {
    @media (width >= 1400px) {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
  }
  .xl\:justify-center {
    @media (width >= 1400px) {
      justify-content: center;
    }
  }
  .\32 xl\:flex {
    @media (width >= 1500px) {
      display: flex;
    }
  }
  .\32 xl\:w-\[40\%\] {
    @media (width >= 1500px) {
      width: 40%;
    }
  }
  .\32 xl\:w-\[60\%\] {
    @media (width >= 1500px) {
      width: 60%;
    }
  }
  .\32 xl\:md\:grid-cols-4 {
    @media (width >= 1500px) {
      @media (width >= 768px) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }
    }
  }
}
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
}
main {
  display: block;
}
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}
pre {
  font-family: monospace, monospace;
  font-size: 1em;
}
a {
  background-color: transparent;
}
abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}
b, strong {
  font-weight: bolder;
}
code, kbd, samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
small {
  font-size: 80%;
}
sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
img {
  border-style: none;
}
button, input, optgroup, select, textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}
button, input {
  overflow: visible;
}
button, select {
  text-transform: none;
}
button, [type="button"], [type="reset"], [type="submit"] {
  -webkit-appearance: button;
}
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}
fieldset {
  padding: 0.35em 0.75em 0.625em;
}
legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}
progress {
  vertical-align: baseline;
}
textarea {
  overflow: auto;
}
[type="checkbox"], [type="radio"] {
  box-sizing: border-box;
  padding: 0;
}
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
  height: auto;
}
[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}
details {
  display: block;
}
summary {
  display: list-item;
}
template {
  display: none;
}
[hidden] {
  display: none;
}
@charset "UTF-8";
.visualImg {
  animation: 3s linear infinite;
  -webkit-animation-name: visualImg;
  -ms-animation-name: visualImg;
  animation-name: visualImg;
}
@keyframes visualImg {
  0% {
    -webkit-transform: rotate( -5deg ) translateY(1rem);
    -ms-transform: rotate( -5deg ) translateY(1rem);
    transform: rotate( -5deg ) translateY(1rem);
  }
  50% {
    -webkit-transform: rotate( 0deg ) translateY(0rem);
    -ms-transform: rotate( 0deg ) translateY(0rem);
    transform: rotate( 0deg ) translateY(0rem);
  }
  100% {
    -webkit-transform: rotate( -5deg ) translateY(1rem);
    -ms-transform: rotate( -5deg ) translateY(1rem);
    transform: rotate( -5deg ) translateY(1rem);
  }
}
@media only screen and ( max-width:1399px ) {
  @keyframes visualImg {
    0% {
      -webkit-transform: translateY(1rem);
      -ms-transform: translateY(1rem);
      transform: translateY(1rem);
    }
    50% {
      -webkit-transform: translateY(0rem);
      -ms-transform: translateY(0rem);
      transform: translateY(0rem);
    }
    100% {
      -webkit-transform: translateY(1rem);
      -ms-transform: translateY(1rem);
      transform: translateY(1rem);
    }
  }
}
.imgJump {
  animation: 3s linear infinite;
  -webkit-animation-name: imgJump;
  -ms-animation-name: imgJump;
  animation-name: imgJump;
}
@keyframes imgJump {
  0% {
    -webkit-transform: translateY( 0 );
    -ms-transform: translateY( 0 );
    transform: translateY( 0 );
  }
  50% {
    -webkit-transform: translateY( 10px );
    -ms-transform: translateY( 10px );
    transform: translateY( 10px );
  }
  100% {
    -webkit-transform: translateY( 0 );
    -ms-transform: translateY( 0 );
    transform: translateY( 0 );
  }
}
.point {
  animation: point 1.5s ease-in-out calc( var( --i ) * 0.3s ) infinite;
  -webkit-animation-name: point;
  -ms-animation-name: point;
  animation-name: point;
}
@keyframes point {
  0% {
    transform: scale(.7);
  }
  30% {
    transform: scale(1);
  }
  70% {
    transform: scale(1);
  }
  100% {
    transform: scale(.7);
  }
}
.loader {
  --load_wh: 1.85rem;
  display: flex;
  font-size: 3rem;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #FFF;
  position: relative;
}
.loader > div::before {
  content: '';
  position: absolute;
  width: var( --load_wh );
  height: var( --load_wh );
  bottom: -3px;
  border-radius: 50%;
  border: 6px solid #FFF;
  border-bottom-color: var( --color-brand2 );
  box-sizing: border-box;
  animation: rotation 0.6s linear infinite;
}
@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@charset "UTF-8";
:root {
  --color_white: #ffffff;
  --color_white2: rgba( 255, 255, 255, .8 );
  --color_myblack: #3B3A3A;
  --color_myblack2: #666666;
  --color_mygray200: #F9F8F5;
  --color_mygray300: #EAE6E1;
  --color_mygray400: #B1B1B1;
  --color_work1: #1B6BAC;
  --color_work2: #2B87AA;
  --color_brand: #2D90D3;
  --color_brand1: #2375A1;
  --color_brand2: #11C3B7;
  --color_brand3: #FA8B23;
  --color_brand4: #FFB42A;
  --color_brand5: #FF6C6F;
  --color_brand6: #E7E6ED;
  --color_brand7: #1EB6CA;
  --color_brand8: #008294;
  --input_h: 2.5rem;
  --select_w: .5rem;
}
* {
  box-sizing: border-box;
}
body, div {
  word-wrap: break-word;
  word-break: break-word;
}
html, body {
  height: 100%;
}
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: .05rem;
  font-size: 1rem;
}
body {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  font-family: "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", "Heiti TC", "Arial", "Helvetica", "sans-serif";
  line-height: 2rem;
  color: var(--color_myblack);
  text-align: justify;
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  line-break: anywhere;
  scroll-behavior: smooth;
}
@font-face {
  font-family: NotoSansTC-Black;
  src: url("../assets/fonts/NotoSansTC-Black.ttf");
}
@font-face {
  font-family: NotoSansTC-Bold;
  src: url("../assets/fonts/NotoSansTC-Bold.ttf");
}
@font-face {
  font-family: NotoSansTC-Medium;
  src: url("../assets/fonts/NotoSansTC-Medium.ttf");
}
@font-face {
  font-family: NotoSansTC-Regular;
  src: url("../assets/fonts/NotoSansTC-Regular.ttf");
}
@font-face {
  font-family: NotoSerifTC-ExtraBold;
  src: url("../assets/fonts/NotoSerifTC-ExtraBold.ttf");
}
img {
  max-width: 100%;
  max-height: 100%;
  object-position: center;
  object-fit: contain;
}
header, footer {
  width: 100%;
  margin: 0 auto !important;
}
main {
  flex: 1;
}
a, button, input[role=button], [role=button] {
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  line-height: normal;
}
a {
  text-decoration: none;
  color: var( --color_myblack );
}
ul.list-unstyled {
  margin-bottom: 0rem !important;
}
ul li {
  margin: 0.25rem 0;
}
.btn {
  background-position: center;
  background-repeat: no-repeat;
  border: 0;
  background-size: 1rem;
  transition: all 0.5s;
  cursor: pointer;
  border-radius: 50rem;
}
noscript {
  position: relative;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var( --color_brand1 );
  background-color: var( --color_mygray300 );
  padding: .5rem 1rem;
  margin: 0 0 calc( var( --set_h ) * -1 ) 0;
  line-height: 2rem;
}
.accesskey {
  width: 40px;
  position: absolute;
  color: var( --color_mygray300 );
  align-self: flex-start;
  left: .5rem;
  z-index: 80;
}
*:focus,*:focus-visible, button:focus, button:focus-visible {
  outline-color: var( --color_brand1 );
  outline-width: 3px;
  outline-style: dashed;
}
a:focus .sr-only {
  position: relative;
  width: auto;
  height: auto;
  display: inline;
  overflow: auto;
  opacity: 1;
  cursor: initial;
  color: var( --color_mygray400 );
  background-color: var( --color_mygray200 );
}
input, select, textarea, label {
  --border_radius: .3rem;
}
input, select, textarea {
  position: relative;
  width: auto;
  padding: 0 .5rem;
  background-color: var( --color_white );
  border: 1px solid var( --color_mygray400 );
}
.selectIcon {
  width: var( --select_w );
  height: var( --input_h );
  position: absolute;
  background: url( "../images/wlbPicture/closeIcon.svg" ) center / contain no-repeat;
  transform: scaleY(-1);
  right: .5rem;
  display: none;
}
@supports (-webkit-appearance: none) and (stroke-color: transparent) {
  input {
    padding-right: 1rem;
  }
  select {
    appearance: none;
  }
  .selectIcon {
    display: block;
  }
}
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active {
  -webkit-background-clip: text;
  -webkit-text-fill-color: var(--color_myblack) !important;
  transition: background-color 5000s ease-in-out 0s;
  box-shadow: 0 0 2px 1000px rgb(235, 244, 245) inset !important;
}
input.wasValidated:invalid, select.wasValidated:invalid, textarea.wasValidated:invalid {
  border: 1px solid rgba( 182, 36, 50, 1 );
  background-color: rgba( 182, 36, 50, .05 ) !important;
}
input::placeholder {
  font-size: .9rem;
  color: rgba( 0, 0, 0, .2 );
}
input.wasValidated::placeholder {
  color: rgba( 182, 36, 50, .45 );
}
input:valid, select:valid, textarea:valid {
  font-size: 1rem;
  color: var( --color_brand1 ) !important;
  border: 1px solid var( --color_brand1 );
}
.inputGroup input:focus ~ button, .inputGroup input:not(:placeholder-shown) ~ button {
  display: block;
}
input:focus-visible, input:focus {
  border: 1px solid var( --color_brand7 );
}
.inputBox, .checkBox {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 1rem;
  align-items: center;
}
.contentInfo input[type="checkbox"], .contentInfo input[type="radio"] {
  width: 1.25rem;
  height: 1.25rem;
  position: relative;
  z-index: 1;
  opacity: 1;
  top: 1px;
  left: 0;
  accent-color: var( --color_brand2 );
}
.inputGroup, .checkGroup, .radioGroup {
  --p: .125rem;
  --border_radius: .3rem;
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 13rem;
  gap: .25rem;
}
.inputBox > .inputGroup, .checkBox > .checkGroup, .radioBox > .radioGroup {
  margin-bottom: 0rem;
}
.inputGroup label, .inputGroup div[data-label] {
  --beforeTop: .7rem;
  white-space: nowrap;
  padding: 0 calc( var( --p ) );
  color: var( --color_myblack2 );
  position: absolute;
  top: calc( ( var( --beforeTop ) + .4rem ) * -1 );
  left: .5rem;
  font-size: 1rem;
  z-index: 1;
}
.checkGroup label {
  display: flex;
}
.inputGroup label::before, .inputGroup div[data-label]::before {
  width: 100%;
  height: .5rem;
  position: absolute;
  background-color: #ffffff;
  content: "";
  top: var( --beforeTop );
  left: 0;
  z-index: -1;
}
.inputGroup input, .inputGroup select {
  height: var( --input_h );
  width: 100%;
  margin-left: -1px;
  border-radius: var( --border_radius );
  line-height: var( --input_h );
}
.inputGroup .clear {
  --unit: 1.2rem;
  width: var( --unit );
  height: var( --unit );
  content: "";
  position: relative;
  background: no-repeat url( "../images/wlbPicture/concelBtn.svg" ) center;
  background-size: contain;
  display: none;
}
.message {
  display: none;
  font-size: .9rem;
  color: #b62432;
  position: absolute;
  bottom: -1.8rem;
  right: 0px;
}
.inputGroup > span.directions {
  color: var( --color_myblack2 );
  font-size: .9rem;
}
input[type="radio"], input[type="checkbox"] {
  position: absolute;
  z-index: -9999;
  top: 2rem;
  left: 2rem;
  opacity: 0;
}
#tab1:checked:focus ~ .tabLabels [for="tab1"], #tab2:checked:focus ~ .tabLabels [for="tab2"], #tab3:checked:focus ~ .tabLabels [for="tab3"], #tab4:checked:focus ~ .tabLabels [for="tab4"] {
  outline: 3px dashed #ff9800;
}
.contentGroup [role="tabpanel"] {
  display: none;
  justify-content: flex-start;
  flex-wrap: wrap;
}
#tab1:checked ~ .contentGroup #content1, #tab2:checked ~ .contentGroup #content2, #tab3:checked ~ .contentGroup #content3, #tab4:checked ~ .contentGroup #content4 {
  display: flex;
}
.tabLabels label, .radioBox input, .closeBtn {
  cursor: pointer;
  font-weight: 500;
}
.slick-list {
  position: relative;
  overflow: hidden;
  display: flex;
}
.slick-track {
  display: flex;
  align-items: center;
}
.slick-dots {
  width: auto;
  display: flex;
  align-items: center;
  list-style: none;
  justify-content: center;
  padding: 1rem 0;
  bottom: 1rem;
  margin: 2rem auto 0 auto;
  position: relative;
}
.slick-dots li {
  display: flex;
  align-items: center;
  width: 2rem;
  height: 1px;
  background-color: var( --color-brand7 );
  margin: .425rem 0;
}
.slick-dots li::before, .slick-dots li:last-child::after {
  position: absolute;
  content: var( --n );
  color: var( --color-brand7 );
  display: none;
}
.slick-dots li::before {
  left: 0;
}
.slick-dots li.slick-active::before {
  display: block;
  margin-left: -1rem;
}
.slick-dots li:last-child::after {
  margin-left: 2.25rem;
  display: block;
}
.slick-dots li.slick-active {
  width: 2rem;
  height: 4px;
  background-color: var( --color-brand7 );
}
.slick-slider button {
  text-indent: -9999px;
  overflow: hidden;
}
.slick-slider button:not(.slick-arrow) {
  text-indent: -9999px;
  overflow: hidden;
  display: none;
}
.slick-prev, .slick-next {
  --unit: 2.5rem;
  width: var( --unit );
  height: var( --unit );
  position: absolute;
  background: url( "../images/wlbPicture/square.svg" ) center / cover no-repeat;
}
.slick-arrow {
  position: absolute;
  z-index: 30;
  top: 50%;
  margin-top: calc( var( --unit ) * -.5 );
  cursor: pointer;
  border-radius: 20rem;
}
.slick-next {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}
.slick-prev:hover, .slick-next:hover {
  background: url(../images/wlbPicture/squareHover.svg) center no-repeat;
  background-size: cover;
}
.slick-prev {
  left: -1.5rem;
}
.slick-next {
  right: -1.5rem;
}
@charset "UTF-8";
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  border: 1px solid #ddd;
  padding: .625rem;
  text-align: center;
}
th {
  font-weight: bold;
  white-space: nowrap;
}
tr:nth-child(even) {
  background-color: rgba(242, 242, 242, .5);
}
tbody tr:hover {
  background-color: #efefef;
}
table[border="0"]:not([summary]):not([summary]), table[border="0"]:not([summary]) tr, table[border="0"]:not([summary]) td {
  border: none !important;
}
table[border="0"]:not([summary]) tbody tr:hover, table[border="0"]:not([summary]) tr:nth-child(even) {
  background-color: transparent !important;
}
table .btn {
  width: 6rem;
  padding: .35rem .1rem;
  border-radius: 20rem;
  background-color: var( --color_brand1 );
  color: #ffffff;
  margin: 0;
}
.pagination .btn2 a {
  --unit: 2rem;
  width: fit-content;
  min-width: var( --unit );
  height: var( --unit );
  padding: .2rem;
  margin: .2rem;
  background-color: var( --color_white );
  border-radius: .1rem;
  border: 1px solid var( --color_white );
  display: flex;
  align-items: center;
  justify-content: center;
  color: var( --color_brand1 );
}
.pagination .btn2 .page-link {
  border: 1px solid var( --color_brand1 );
}
.pagination .btn2 .page-link {
  color: var( --color_brand1 );
}
.pagination .btn2:hover .page-link {
  background-color: var( --color_brand1 );
  border-radius: .1rem;
  color: var( --color_white );
}
.pagination .btn2.active .page-link {
  background-color: var( --color_brand1 );
  border-radius: .1rem;
  color: var( --color_white );
}
.pagination .btn2.disabled .page-link {
  background-color: var( --color_mygray200 );
  border-radius: .1rem;
  border: 1px solid var( --color_mygray400 );
  color: var( --color_mygray300 );
  opacity: .5;
}
.pagination .btn2:hover img, .pagination .btn2.active img {
  filter: brightness(10);
}
.pagination .btn2.disabled .page-link img {
  filter: grayscale(1);
}
z .table .btn, .edit, .modify, .stop, .success, .cencel {
  margin: auto;
  color: rgba( 0, 0, 0, .75 ) !important;
  padding: .5rem 1.5rem;
  font-weight: 600;
  text-align: center;
}
.edit {
  background-color: rgb( 98, 181, 208 ) !important;
  border: 1px solid rgb( 98, 181, 208 );
}
.modify {
  background-color: rgb( 255, 182, 65 ) !important;
  border: 1px solid rgb( 231, 162, 51 );
}
.stop {
  background-color: var( --danger ) !important;
  color: #ffffff !important;
  border: 1px solid var( --danger );
}
.success {
  background-color: rgba( 59, 196, 187, 1 ) !important;
  border: 1px solid rgb( 59, 196, 187 );
}
.cencel {
  background-color: rgb( 157, 157, 157, .35 ) !important;
  border: 1px solid rgb( 157, 157, 157, 1 );
}
.delete {
  background-color: rgba( 182, 36, 50, 1 ) !important;
  border: 1px solid rgba( 182, 36, 50, 1 );
  color: #ffffff !important;
}
.edit:hover, .modify:hover, .stop:hover, .success:hover, .cencel:hover, .delete:hover {
  box-shadow: inset 0px 0px 12rem rgba( 255, 255, 255, .25 );
}
caption {
  font-size: 1.2rem;
  padding: .5rem;
  background-color: var( --color-brand6 );
}
body {
  font-weight: 400;
  font-size: 1.125rem;
}
.visuallyHidden {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
a::before, a::after, label::before, label::after, button::before, button::after {
  content: "";
  position: absolute;
  transition: all .5s;
}
.linkSub {
  width: 100%;
  font-size: 1.25rem;
  text-align: center;
  font-weight: 600;
}
.link {
  position: relative;
  padding: .2rem .5rem;
  margin: 0 .5rem;
  display: inline-flex;
  align-items: center;
  z-index: 10;
  font-weight: 500;
}
.link::before, .link::after {
  background-color: var( --color_myblack );
}
.link::before {
  --unit: .35rem;
  width: var( --unit );
  height: var( --unit );
  left: -.5rem;
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
  opacity: 0;
}
.link:hover::before, .link:focus::before, .link.active::before {
  left: 0;
  opacity: 1;
}
.link::after {
  width: 0%;
  height: 1px;
  left: 0;
  bottom: 0;
}
.link:hover::after, .link:focus::after, .link.active::after {
  width: 100%;
}
.link.active {
  color: var( --color_brand1 );
  font-weight: bold;
}
header {
  position: fixed;
  top: 0;
  z-index: 100;
  background-color: var( --color-white );
  transition: all .5s;
  border-bottom: 1px solid var( --color_mygray300 );
  z-index: 1000;
}
header > div.headrBox {
  display: flex;
  align-items: center;
  max-width: var( --max_width );
  height: var( --set_h );
  margin: auto;
  padding: .1rem 0rem .1rem .5rem;
  gap: 1rem;
  justify-content: space-between;
  position: relative;
}
.logoBox {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0rem 0 1rem;
  gap: .5rem;
}
.logoBox img {
  height: 3.75rem;
  aspect-ratio: 1/1;
}
.webSiteSub {
  --gap_p: .5rem;
  display: grid;
  font-size: 1.125rem;
  letter-spacing: .1rem;
  transition: all .5s;
  text-align: start;
  white-space: nowrap;
}
.webSiteSub span:first-child {
  font-size: 1.375rem;
  letter-spacing: .225rem;
  font-weight: 700;
}
header .menuBtn {
  white-space: nowrap;
  padding: 0rem .225rem;
  position: relative;
  font-weight: 500;
  display: grid;
  text-align: center;
  font-size: 1.1875rem;
}
header .menuBtn::after {
  width: .5rem;
  aspect-ratio: 1/1;
  background-color: var(--color-myblack );
  border-radius: 1rem;
  bottom: 0;
  z-index: 2;
  left: 50%;
  margin-left: -.25rem;
  opacity: 0;
}
header .menuBtn:hover::after, header .menuBtn:focus::after, header .menuBtn.active::after {
  bottom: .5rem;
  opacity: 1;
}
header .menuBtn span {
  color: var( --color_myblack2 );
  font-size: .95rem;
  font-weight: 400;
  opacity: 1;
  transform: translateY(0%);
  transition: all .25s;
}
header .menuBtn:hover span, header .menuBtn:focus span, header .menuBtn.active span {
  opacity: 0;
  transform: translateY(50%);
}
.fcMenuBtn {
  --fcGap: .625rem;
  display: flex;
  align-items: center;
  gap: var( --fcGap );
  position: relative;
  border-radius: 10rem 0 0 10rem;
  background-color: var( --color_brand7 );
  padding: .5rem var( --fcGap ) .5rem 1.875rem;
}
.fcMenuBtn .menuBtn, .fcMenuBtn .menuBtn span {
  color: var(--color_white );
  text-shadow: 0px 0px 5px rgba( 0, 0, 0, .3 );
  font-weight: 700;
}
.fcMenuBtn .menuBtn::after {
  background-color: var( --color_white );
}
.memberBox {
  display: flex;
  gap: var( --fcGap );
}
.memberBox img {
  width: 2rem;
}
.bodyover {
  overflow: hidden;
}
.Minemenu {
  --unit: 2.5rem;
  width: var( --unit );
  height: var( --unit );
  z-index: 100;
  display: flex;
  align-items: center;
  background: url( "../images/wlbPicture/menuBtn.svg" ) center no-repeat;
  background-size: 2.2rem;
  z-index: 1002;
}
.Minemenu.disabled {
  pointer-events: none;
  opacity: .5;
}
.Minemenu .DSbtn::before, .Minemenu .DSbtn::after {
  --DSbtn_p: .125rem;
  position: absolute;
  width: calc( var( --unit ) / 6 );
  aspect-ratio: 1/1;
  content: "";
  transition: all .3s;
  background-color: var( --color_white );
}
.Minemenu .DSbtn::before {
  top: var( --DSbtn_p );
  right: var( --DSbtn_p );
}
.Minemenu .DSbtn::after {
  bottom: var( --DSbtn_p );
  left: var( --DSbtn_p );
}
.Minemenu:hover .DSbtn::before, .Minemenu:hover .DSbtn::after, .Minemenu:focus .DSbtn::before, .Minemenu:focus .DSbtn::after {
  --DSbtn_p: .325rem;
}
.Minemenu > span::before {
  position: relative;
  width: var( --unit );
  height: var( --unit );
  content: "";
  color: var( --color_myblack );
  display: none;
  align-items: center;
  justify-content: center;
  background: url( "../images/wlbPicture/closeBtn.svg" ) center / 3rem no-repeat;
  transition: all .5s;
}
.Minemenu > span:hover::before {
  transform: rotate( 180deg);
}
.Minemenu.active > span::before {
  display: flex;
}
.Minemenu.active .DSbtn::before, .Minemenu.active .DSbtn::after {
  display: none;
}
.open_box {
  width: 100%;
  height: 0;
  position: fixed;
  top: -100%;
  right: 0%;
  z-index: -999;
  opacity: 0;
  transition: all .5s;
  gap: 1rem;
  background-color: var( --color_white );
  overflow: hidden;
}
.open_box .left , .open_box .right {
  display: none;
}
.open_box.open {
  z-index: 1001;
  opacity: 1;
  top: 0px;
  height: 100%;
  display: flex;
  align-items: center;
}
.open_box.open .left, .open_box.open .right {
  display: grid;
}
.open_box.openLoginBox {
  height: auto;
  top: var( --set_h );
  right: -1px;
  background: rgba( 255, 255, 255, 0 );
  transition: all 0s;
}
.open_box.openLoginBox > div > div.left {
  padding: 0px !important;
}
.open_box.openLoginBox > div > div:not(.left), .open_box.openLoginBox > div > div.left > *, .open_box.openLoginBox > div > div.left > div:nth-child(2) > div:not(.loginBox) {
  display: none;
}
.open_box.openLoginBox > div > div.left > div:nth-child(2) {
  display: flex;
}
.open_box.openLoginBox .loginBox, .open_box.openLoginBox > div > div.left {
  margin: 0 0 0 auto !important;
  width: 21rem;
}
.open_box:not(.open) a, .open_box:not(.open) input {
  display: none;
}
.open_box .menuBox {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin: 0 auto;
  flex-wrap: wrap;
}
.openMenu {
  display: flex;
  align-items: center;
  margin: auto;
}
.openMenu > img {
  width: 4.5rem;
  height: 4.5rem;
  margin-right: -.5rem;
  filter: brightness(0) saturate(100%) invert(23%) sepia(28%) saturate(4%) hue-rotate(322deg) brightness(86%) contrast(93%);
}
.loginBox {
  display: grid;
  border: 1px solid var( --color_mygray300 );
  padding: 1rem;
  margin: auto;
  gap: 1rem;
  background: rgba( 255, 255, 255, 1 );
}
.open .loginBox {
  border: none;
}
.openLoginBox .loginBox {
  border: 1px solid var( --color_mygray300 );
}
.pageFormBox, .mapBox {
  --form_pw: .625rem;
  display: grid;
  gap: 2rem .625rem;
  flex-wrap: wrap;
  padding: 0 var( --form_pw );
  width: 100%;
  margin: auto;
  align-items: start;
}
.open .pageFormBox {
  grid-template-columns: 1fr;
}
.login.linkBtn, .send.linkBtn, .login input[type="submit"], .infoListBox:not(.tags) .linkBtn:not(.tags), .send input[type="submit"] {
  width: 100% !important;
  max-width: 100% !important;
  height: 3.125rem;
  border-radius: 10rem !important;
  border: 1px solid var( --color_brand1 );
  margin: 0 auto !important;
}
.btn input[type="submit"] {
  border: none;
  background-color: transparent !important;
  font-size: 1.2rem;
  cursor: pointer;
  width: 100% !important;
}
.btn:hover input[type="submit"] {
  color: #ffffff !important;
}
.login.linkBtn:hover, .send.linkBtn:hover, .pages .right .linkBtn:not(.tags):hover {
  box-shadow: 0px 0px 6px var( --color_brand7 ) !important;
}
#loginForm span {
  display: none !important;
}
#leftMenu {
  width: var( --menuGroup_w );
  z-index: 10;
  padding-bottom: 16rem;
}
.menuGroup {
  width: var( --menuGroup_w );
  padding: 1rem;
  display: grid;
  gap: 1.25rem;
  transition: all .5s;
  position: sticky;
  top: calc( var( --set_h ) * 1 + 1rem );
}
.menuGroup > div {
  display: flex;
  align-items: center;
}
.menuGroup .link {
  width: 100%;
  height: fit-content;
}
.menuGroup img {
  width: 3.75rem;
  border-radius: 50rem;
  background-color: var( --color_brand7 );
}
.indexMain, .pages {
  --rightBox_w: 15rem;
  --menuGroup_w: 23.125rem;
  --banner_aspectRatio: 1320/520;
  --bgTxtImg_w: 45%;
  --visualImg_h: 4rem;
  --titleSub: 3.75rem;
  --titleSub_f: 1.875rem;
  margin: var( --set_h ) auto 0 auto;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.section {
  --px_w: .5rem;
  margin: -2px auto;
  position: relative;
}
.content {
  position: relative;
  display: grid;
  gap: 1.825rem;
  width: 100%;
  margin: auto;
  padding: 3.5rem 0;
  border-left: 1px solid var( --color_mygray300 );
}
.footerLink .content, .visual.content {
  max-width: calc( var( --max_width ) - 20rem );
  width: 100%;
  border: none;
  padding: 0rem 1rem;
}
.playBtn {
  width: 2rem;
  position: absolute;
  left: 1rem;
  top: 75%;
  z-index: 20;
  opacity: .3;
  z-index: 20;
  border-radius: 10rem;
  background-color: var( --color_mygray300 );
  padding: .425rem;
}
.playBtn:focus {
  opacity: 1;
}
.topSubBox {
  width: 100%;
}
.bgTxtImg {
  width: var( --bgTxtImg_w );
}
.indexMain .right {
  width: calc( 100% - var( --menuGroup_w ) );
  margin: 0 0 0 auto;
}
.banner {
  --banner_pb: 2rem;
  --dots_w: calc( ( 2rem * var( --l ) ) + 130px );
  display: grid;
  align-items: end;
  position: relative;
  padding-bottom: var( --banner_pb );
}
.banner .slick-list {
  width: calc( 100dvw - ( ( var( --rightBox_w ) * .75 ) + var( --menuGroup_w ) ) );
  border-radius: 100rem;
  z-index: 10;
}
.banner img {
  object-fit: cover !important;
  aspect-ratio: var( --banner_aspectRatio );
}
.banner .slick-arrow {
  top: calc( 100% - ( var( --banner_pb ) + 2.5rem ) );
}
.banner .slick-prev {
  left: calc( 50% );
  margin-left: calc( var( --dots_w ) * -.5 );
}
.banner .slick-next {
  right: calc( 50% );
  margin-right: calc( var( --dots_w ) * -.5 );
}
.visualImg {
  width: var( --rightBox_w );
  margin-left: auto;
  position: relative;
  align-self: flex-end;
  padding: 0 .5rem var( --visualImg_h ) 0;
  object-position: 1rem;
}
.bannerBottomImg {
  max-width: 99.5dvw;
  margin: -8.5rem 0 0 calc( var( --menuGroup_w ) * -1 );
  border-bottom: 1px solid var( --color_mygray300 );
}
.point {
  --point_h: .5rem;
  width: var( --point_h );
  height: var( --point_h );
  background-color: var( --color_mygray400 );
  border-radius: 2rem;
}
.titleSub, .pageSub {
  position: relative;
  width: auto;
  margin: 0 auto 0 0;
  display: flex;
  flex-flow: wrap;
  justify-content: center;
  align-items: center;
  font-size: calc( var( --titleSub_f ) );
  font-weight: bold;
  color: var(--color-work2 );
  gap: .5rem;
}
.titleSub > span:nth-of-type(1) {
  min-width: 11rem;
  border-bottom: 1px solid var( --color_mygray400 );
  padding: clalc( var( --px_w ) /2 );
  color: var( --color_myblack2 );
  font-family: serif;
  text-align: right;
}
.titleSub .chtxt span:nth-of-type(1) {
  font-size: var( --titleSub );
  padding-left: .5rem;
}
.cardBox, .cardBox span {
  display: flex;
  align-items: center;
  position: relative;
  transition: all .5s;
  justify-content: center;
}
.cardBox {
  width: 100%;
  border: 1px solid var( --color_mygray300 );
  background-color: rgba( 249, 248, 245, 1 );
  aspect-ratio: 750/460;
}
.cardBox > img {
  width: 100%;
}
.cardBox span {
  --span_h: 4.5rem;
  max-width: 90%;
  height: var( --span_h );
  position: absolute;
  z-index: 2;
  color: var( --color_white );
  font-size: 1.375rem;
  line-height: 1.5rem;
  padding: 0 1.2rem;
  border-radius: 20rem;
  font-weight: 700;
  border: 1px solid rgba( 81, 120, 120, 0 );
  bottom: calc( 50% - ( var( --span_h ) * .5 ) );
  display: flex;
  align-items: center;
}
.cardBox:nth-of-type(1) span img, .cardBox:nth-of-type(1) span {
  text-shadow: 0px 0px 10px rgba( 7, 102, 115, 1 );
  filter: drop-shadow( 1px 1px 8px rgba( 7, 102, 115, 1 ) );
}
.cardBox:nth-of-type(2) span img, .cardBox:nth-of-type(2) span {
  text-shadow: 0px 0px 10px rgba( 129, 37, 37, 1 );
  filter: drop-shadow( 1px 1px 8px rgba( 129, 37, 37, 1 ) );
}
.cardBox:nth-of-type(3) span img, .cardBox:nth-of-type(3) span {
  text-shadow: 0px 0px 10px rgba( 16, 79, 108, 1 );
  filter: drop-shadow( 1px 1px 8px rgba( 16, 79, 108, 1 ) );
}
.cardBox:nth-of-type(4) span img, .cardBox:nth-of-type(4) span {
  text-shadow: 0px 0px 10px rgba( 4, 126, 142, 1 );
  filter: drop-shadow( 1px 1px 8px rgba( 4, 126, 142, 1 ) );
}
.cardBox:nth-of-type(5) span img, .cardBox:nth-of-type(5) span {
  text-shadow: 0px 0px 10px rgba( 22, 96, 142, 1 );
  filter: drop-shadow( 1px 1px 8px rgba( 22, 96, 142, 1 ) );
}
.cardBox:nth-of-type(6) span img, .cardBox:nth-of-type(6) span {
  text-shadow: 0px 0px 10px rgba( 150, 90, 27, 1 );
  filter: drop-shadow( 1px 1px 8px rgba( 150, 90, 27, 1 ) );
}
.cardBox:hover span {
  border: 1px solid rgba( 81, 120, 120, .6 );
  bottom: 1rem;
}
.cardBox:hover span img, .cardBox:hover span {
  text-shadow: none;
  filter: drop-shadow( 1px 1px 8px rgba( 7, 102, 115, 0 ) );
}
.cardBox span img {
  width: 5rem;
  object-fit: cover;
}
.cardBox::after {
  width: 100%;
  height: 100%;
  position: absolute;
  content: "";
  opacity: .75;
  z-index: 1;
}
.cardBox:hover::after {
  opacity: 0;
}
.cardBox:nth-of-type(1):after, .cardBox:nth-of-type(1):hover span {
  background-color: var( --color_brand7 );
}
.cardBox:nth-of-type(2):after, .cardBox:nth-of-type(2):hover span {
  background-color: var( --color_brand5 );
}
.cardBox:nth-of-type(3):after, .cardBox:nth-of-type(3):hover span {
  background-color: var( --color_brand1 );
}
.cardBox:nth-of-type(4):after, .cardBox:nth-of-type(4):hover span {
  background-color: var( --color_brand2 );
}
.cardBox:nth-of-type(5):after, .cardBox:nth-of-type(5):hover span {
  background-color: var( --color_brand );
}
.cardBox:nth-of-type(6):after, .cardBox:nth-of-type(6):hover span {
  background-color: var( --color_brand3 );
}
.section.news {
  margin-left: calc( var( --menuGroup_w ) * -1 );
}
.section.news::before {
  position: absolute;
  content: "";
  width: calc( var( --menuGroup_w ) * .7 );
  aspect-ratio: 1/1;
  left: calc( var( --menuGroup_w ) - 3rem );
  bottom: 0;
  background: url( "../images/wlbPicture/newsImg.svg" ) left bottom / contain no-repeat;
  z-index: 1;
}
.section.news .content, .section.otherLink .content {
  --pb_h: 5rem;
  width: calc( 100% - var( --menuGroup_w ) );
  margin: 0 0 0 auto;
  padding-bottom: var( --pb_h );
  background: url( "../images/wlbPicture/bgCircle.svg" ) right -50% bottom -30% / 70% no-repeat;
}
.section.otherLink .content {
  background: none;
}
.newsListBox {
  --newsList_p: 10%;
  display: grid;
  width: 100%;
  padding: calc( var( --pb_h ) / 4 ) var( --newsList_p ) calc( var( --pb_h ) / 2 ) var( --newsList_p );
  border-radius: .5rem;
  margin: auto;
}
.newsListBox li {
  margin: 0;
}
.newsList {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: start;
  padding: 1.125rem 1.3rem;
  border-bottom: 1px dashed var( --color_myblack2 );
  gap: .5rem;
  height: 5rem;
}
.newsList:hover {
  background-color: rgba( 255, 255, 255, .6 );
}
.newsList::before {
  --unit: .35rem;
  width: var( --unit );
  height: var( --unit );
  position: absolute;
  content: "";
  left: .5rem;
  background-color: var( --color_mygray400 );
}
.mark {
  min-width: 11.5rem;
  text-align: right;
  padding: .025rem .425rem;
  color: var( --color_myblack2 );
  font-size: .9rem;
  white-space: nowrap;
  transition: all .2s;
  font-weight: 500;
  margin-left: auto;
  border-left: 1px solid var( --color_mygray400 );
}
.newsList:hover::before {
  background-color: var( --color_brand7 );
  transform: scale(1.5);
}
.newsList span:not( .mark ) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  padding: 0 .5rem;
}
.newsList:hover, .newsList:focus {
  border-bottom: 1px solid var( --color_brand7 );
}
.newsList:hover .mark, .newsList:focus .mark {
  color: var( --color_myblack );
}
.newsList .view {
  transition: all .25s;
  transform: rotate(90deg) translateY(10%);
  margin-left: auto;
  opacity: .5;
  filter: brightness(0) saturate(100%) invert(45%) sepia(0%) saturate(1864%) hue-rotate(144deg) brightness(94%) contrast(79%);
}
.newsList:hover .view {
  transform: rotate(90deg) translateY(-10%);
  opacity: 1;
}
.section.otherLink {
  display: flex;
  margin-left: calc( var( --menuGroup_w ) * -1 );
  align-items: end;
}
.otherLinkBox {
  position: relative;
  margin: auto;
}
.otherLinkBox > .otherLinkBtn {
  display: flex;
  border: 1px solid var( --color-mygray300 );
  border-radius: .25rem;
  background-color: var( --color-mygray200 );
  aspect-ratio: 700/300 !important;
  overflow: hidden;
}
.pages .topSubBox {
  height: 9.375rem;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var( --color_mygray300 );
  background: url( "../images/wlbPicture/txtImgBox.svg" ) left center / 70% no-repeat;
}
.pages #leftMenu {
  padding-bottom: 4rem;
}
.pages #leftMenu .menuGroup {
  padding-top: 2.5rem;
}
.pages .topImg {
  position: absolute;
  width: 35dvw;
  max-width: 22rem;
  top: -4rem;
  right: .5rem;
  z-index: 2;
}
.pages .navigation {
  display: flex;
  color: var( --color_myblack );
  flex-wrap: wrap;
}
.pages .navigation img {
  width: 1rem;
  transform: rotate(90deg);
  padding: .125rem;
}
.pages .navigation img:first-child {
  transform: rotate(0deg);
}
.navigation .navLink {
  position: relative;
  display: flex;
  align-items: center;
  margin-left: 1rem;
  white-space: wrap;
}
.navigation .navLink::before {
  width: 1rem;
  height: 1rem;
  content: "";
  position: absolute;
  left: -1rem;
  background: url( "../images/wlbPicture/closeIcon.svg" ) center no-repeat;
  transform: rotate(90deg);
  background-size: .8rem;
}
.navigation .navLink:nth-of-type(1) {
  margin-left: 0rem;
}
.navigation .navLink:nth-of-type(1)::before {
  background: none;
}
.navigation .navLink:hover::after {
  width: 100%;
  content: "";
  position: absolute;
  height: 1px;
  background-color: var( --color_myblack );
  left: 0;
  bottom: 0;
  transition: all .5s;
}
.pageSub {
  margin: auto;
  font-size: calc( var( --titleSub_f ) - .225rem );
  padding: 2.25rem 0 .425rem 0;
}
.pageSub::before, .pageSub::after {
  width: 3.125rem;
  height: 1px;
  position: relative;
  content: "";
  background-color: var( --color_brand1 );
  margin: 0 -.5rem;
}
.pageSub span {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.pageSub span::before, .pageSub span::after {
  width: .5rem;
  height: .5rem;
  position: relative;
  content: "";
  border-radius: 10rem;
  background-color: var( --color_brand1 );
}
.pages .contentInfo {
  --info_pw: 10%;
  width: 100%;
  padding: 1rem var( --info_pw );
}
.contentInfo > .cardBox, .contentInfo > .cardBox > input {
  width: 100%;
  height: 9.375rem;
  position: relative;
  display: flex;
  justify-content: start;
  background-color: rgba( 255, 234, 202, 1 ) !important;
  border: 1px solid var( --color_brand3 );
  border-radius: .425rem;
  font-weight: 500;
  padding: 1rem 1.5rem;
  gap: .425rem;
}
.contentInfo > .cardBox > input {
  position: absolute;
  cursor: pointer;
  left: 0;
  background-color: transparent !important;
  color: var( --color_myblack ) !important;
  font-size: 1.125rem;
  border: none;
  text-align: left;
  text-indent: 5.5rem;
}
.contentInfo > .cardBox:hover {
  background-color: rgba( 255, 234, 202, .4 ) !important;
}
.contentInfo > .cardBox::after {
  display: none;
}
.contentInfo > .cardBox img {
  width: 5rem;
}
.pages .right .linkBtn:not(.tags) {
  min-width: 10rem;
  padding: .5rem 1rem;
}
.pages .newsList:hover {
  background-color: rgba( 255, 255, 255, 1 );
}
.infoListBox {
  display: grid;
}
.right .infoSub, .right .formSub, .right .pageTitle {
  --shadow: 1px;
  background-color: var( --color_brand4 );
  padding: .5rem 1.5rem;
  border-radius: 10rem;
  font-size: 1.225rem;
  font-weight: 600;
}
.right a:nth-of-type(odd) > .infoSub {
  background-color: #ffd78d;
}
.right a > .infoSub:hover {
  background-color: #feefd4;
}
.right .formSub, .right .pageTitle {
  width: 100%;
  background-color: var( --color_brand6 );
  border-radius: 0;
}
.right .inputGroup label::before {
  background-color: #f9f8f5;
}
.right .infoSub.news {
  background-color: #e7e6ed;
  box-shadow: 0 0 var( --shadow ) #e7e6ed;
}
.right .infoSub.work {
  background-color: #f6ebc7;
  box-shadow: 0 0 var( --shadow ) #f6ebc7;
}
.right .infoSub.home {
  background-color: #cde5ee;
  box-shadow: 0 0 var( --shadow ) #cde5ee;
}
.right .infoSub.health {
  background-color: #c0e3d6;
  box-shadow: 0 0 var( --shadow ) #c0e3d6;
}
.right .infoSub.tags {
  background-color: var( --color_brand1 );
  box-shadow: 0 0 var( --shadow ) var( --color_brand1 );
  color: var( --color_white );
}
.infoListBox .infoSub::before {
  width: 1rem;
  content: "▎";
}
.infoListBox .info {
  --info_h: .625rem;
  display: grid;
  padding: 0 var(--info_h );
  gap: var( --info_h );
  margin: .5rem 0 1.5rem 0;
}
.infoListBox .info > li {
  margin-left: 2rem;
}
.infoListBox .info link {
  margin: 0;
}
.infoListBox > .flex > div:nth-child(1) {
  display: none;
}
.mapLink > li > a.link, .mapLink > li::marker {
  font-weight: 700;
}
.myListStyle {
  list-style: none;
  padding-left: .5rem;
}
.myListStyle li {
  margin: .5rem 0;
}
.myListStyle li::before {
  content: var( --list );
  display: inline-block;
}
.pages .shareLink {
  position: fixed;
  right: 0;
  padding: .125rem;
  background-color: var( --color-brand1 );
  overflow: hidden;
  z-index: 50;
  display: flex;
  flex-direction: column-reverse;
  gap: .25rem;
  bottom: 50%;
  margin-bottom: -5rem;
}
.pages .shareLinkGroup {
  display: grid;
  justify-content: center;
  gap: 1rem;
  height: auto;
  transition: all .5s;
  background-color: var( --color_brand7 );
  position: fixed;
  right: 0;
  top: 50%;
  z-index: 60;
  transform: translateY(-50%);
  padding: .625rem .125rem;
  border-radius: 1rem 0 0 1rem;
}
.pages .shareLinkGroup img {
  width: 2rem;
}
.footerLink .closeBtn span::after {
  --closeBtn: 1rem;
  background: url( "../images/wlbPicture/closeIcon.svg" ) center no-repeat;
  display: block;
  content: "";
  width: var( --closeBtn );
  height: var( --closeBtn );
  transform: rotateX( 0deg );
  margin: auto;
}
.tableList .info {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.info .mark {
  background-color: var( --color-brand6 );
  border: none;
  color: var( --color_work2 );
  height: 1.6rem;
  font-size: .9rem;
  text-align: start;
}
.linkBtn {
  --linkBtn_pw: 1.225rem;
  position: relative;
  width: auto;
  padding: .325rem var( --linkBtn_pw );
  margin: 0 auto;
  background-color: var( --color_brand1 );
  color: var( --color_white );
  border-radius: 10rem;
  overflow: hidden;
  z-index: 10;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}
.linkBtn::before {
  width: 130%;
  height: 0rem;
  content: "";
  position: absolute;
  left: -60%;
  bottom: -1rem;
  border-radius: 200% 200% 0 0;
  z-index: -1;
  transform: translateX(40%);
}
.linkBtn:hover::before {
  height: 6rem;
  background-color: var( --color_brand );
  border: 1px solid rgba( 255, 255, 255, .1 );
}
.btn.linkBtn {
  border-radius: 0px;
  background-color: transparent;
  border-block: 1px solid var( --color-brand1 );
  color: var( --color-brand1 );
  margin: auto;
  min-width: 13rem;
  max-width: 20rem;
  padding: .75rem 2rem;
  font-size: 1.25rem;
  font-weight: 600;
  overflow: hidden;
}
.btn.linkBtn:hover {
  color: var( --color_white );
  transition: all .25s;
}
.btn.linkBtn:hover img {
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(129deg) brightness(108%) contrast(108%);
}
.pageFormBox .btn.linkBtn {
  margin: 0;
  background-color: transparent;
}
.contentInfo .dateBox {
  border-left: .25rem solid var( --color-brand4 );
}
.checkEAP {
  width: 100%;
  display: none;
  flex-wrap: wrap;
  border: 1px solid var( --color_mygray300 );
  padding: .5rem;
  margin-top: -2rem;
  background-color: #ffffff;
  border-radius: .25rem;
}
.checkEAP .checkBox {
  gap: .5rem 1rem;
  width: 100%;
}
.checkEAP .checkGroup {
  width: 100%;
  min-width: calc( 50% - 1rem );
  max-width: 25rem;
  flex-direction: row-reverse;
  justify-content: start;
}
.checkEAP .checkGroup label {
  width: 100%;
}
.fileSub {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 800;
  font-size: 1.2rem;
  height: 1.6rem;
  margin: 0 auto;
}
.fileAlert, .fileAlert a {
  color: #cf4351;
  font-weight: 600;
}
.fileBox {
  display: flex;
}
.pageImgBox {
  border-left: 1px solid var( --color_mygray300 );
  border-radius: 0 0 0 6rem;
  overflow: hidden;
}
.courseBox td:nth-of-type(1), .courseBox td:nth-of-type(1) {
  min-width: 6rem;
}
.courseBox td:nth-of-type(2), .courseBox td:nth-of-type(2) {
  min-width: 15rem;
}
.courseBox td:nth-of-type(3), .courseBox td:nth-of-type(3), .courseBox td:nth-of-type(4), .courseBox td:nth-of-type(4), .resourceBox th:nth-of-type(1), .resourceBox td:nth-of-type(1), .communityBox th:nth-of-type(1), .communityBox td:nth-of-type(1) {
  min-width: 10rem;
}
.resourceBox th:nth-of-type(2), .resourceBox td:nth-of-type(2) {
  min-width: 20rem;
}
.aspNetHidden {
  display: none;
}
.communityBox th, .communityBox td {
  min-width: 12rem;
}
.communityBox th:nth-of-type(1), .communityBox td:nth-of-type(1), .communityBox th:nth-of-type(3), .communityBox td:nth-of-type(3), .communityBox th:nth-of-type(8), .communityBox td:nth-of-type(8) {
  min-width: 8rem;
}
.communityBox td:nth-of-type(6), .communityBox td:nth-of-type(7) {
  min-width: 22rem;
}
.resourceBox th:nth-of-type(1), .resourceBox td:nth-of-type(1), .resourceBox th:nth-of-type(2), .resourceBox td:nth-of-type(2), .communityBox td:nth-of-type(2), .communityBox td:nth-of-type(4), .communityBox td:nth-of-type(5), .communityBox td:nth-of-type(6), .communityBox td:nth-of-type(7) {
  text-align: left !important;
}
.gotopBox {
  --goTop: 3rem;
  --rightBottom: .5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  right: var( --rightBottom );
  bottom: var( --rightBottom );
  z-index: 50;
  width: var( --goTop );
  height: var( --goTop );
  background-color: rgba( 255, 255, 255, .5 );
  padding-top: .5rem;
  border: 1px solid var( --color-mygray300 );
}
.gotopBox .arrowTop {
  width: calc( var( --goTop ) / 2.2 - .5rem );
  filter: brightness(0) saturate(100%) invert(71%) sepia(0%) saturate(0%) hue-rotate(148deg) brightness(90%) contrast(87%);
}
.gotopBox:hover .arrowTop {
  opacity: 1 !important;
}
.gotopBox:hover {
  padding-bottom: .5rem;
  border: 1px solid var( --color-mygray400 );
  opacity: 1 !important;
}
.accesslink {
  display: flex;
  align-items: center;
}
.accesslink img {
  width: 2rem;
  height: 2rem;
}
.swal2-confirm.swal2-styled {
  background-color: var( --color_brand1 ) !important;
}
.footerLink .closeBtn {
  --circleBtn: 5rem;
  width: var( --circleBtn );
  height: var( --circleBtn );
  border-radius: 50rem;
  margin: -6.25rem auto;
  background-color: var( --color-brand4 );
  border: 1px solid var( --color_white );
  display: flex;
  align-items: center;
  justify-content: center;
}
.footerLink .closeBtn span::after {
  --closeBtn: 1.5rem;
  background: url( "../images/wlbPicture/closeIcon.svg" ) center no-repeat;
  display: block;
  content: "";
  width: var( --closeBtn );
  height: var( --closeBtn );
  transform: rotateX( 0deg );
  margin: auto;
}
#closeBtn:not(:checked) ~ .closeBtn span::after {
  top: .645rem;
  transform: rotateX( 180deg );
}
.linkBox {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: auto;
  padding: .125rem 1.25rem;
  align-items: start;
  border-left: 1px solid var( --color_myblack );
  border-right: 1px solid var( --color_myblack );
  margin: 0 -1px 0rem 0;
  overflow: hidden;
  transition: all .5s;
}
.linkBox:nth-child(1) {
  border-left: 0px solid var( --color_myblack );
}
.linkBox:nth-child(5) {
  border-right: 0px solid var( --color_myblack );
}
.linkBox:last-child {
  border-right: none;
}
.footerLink .linkSub, .footerLink .linkBox .link {
  opacity: 1;
  transition: all 0.5s;
  color: var( --color_myblack );
}
.footerLink .linkBox .link::before, .footerLink .linkBox .link::after {
  background-color: var( --color_myblack );
}
#closeBtn:checked ~ div .linkBox {
  height: 100%;
  padding: .625rem 1.25rem;
}
.linkBox > div {
  display: grid;
  gap: .5rem;
  align-items: flex-start;
  margin: 0 auto;
}
#closeBtn:not(:checked) ~ div .linkBox {
  gap: 0rem;
}
#closeBtn:not(:checked) ~ div .linkBox > ul {
  transform: translateX(-100%);
  z-index: -1;
  height: 0rem;
  opacity: 0;
  display: none;
}
.footerLink .linkBtn {
  margin: 0;
}
.footerList {
  display: flex;
  align-items: center;
  text-align: left;
}
.footerList img {
  width: 1rem;
  margin-right: .5rem;
}
.footerList a {
  text-decoration: underline;
}
.copyright {
  font-weight: 500;
}
.picItem {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  justify-content: flex-start;
  align-items: center;
  z-index: 3;
}
.picItem p {
  padding: 0 .5rem;
}
.txtSub {
  text-align: center;
  font-weight: 700;
  color: rgba( 0, 0, 0, .75 );
}
.infoBox {
  --color: rgba( 255, 180, 42, .3 );
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;
}
@media only screen and ( max-width:640px ) {
  .infoBox {
    display: grid;
  }
}
.infoBox .txtSub {
  min-width: 10rem;
  background-color: var( --color );
  height: 100%;
  display: grid;
  align-items: center;
  padding: .5rem;
}
.infoBox > ul.info {
  border: 2px solid var( --color );
  width: 100%;
  height: 100%;
  margin: 0;
  padding: .5rem;
  gap: .25rem;
}
.infoBox img {
  position: absolute;
  right: -1rem;
  bottom: -1rem;
}
.txtSub.infoSub {
  max-width: 20rem;
  width: -webkit-fill-available;
  background-color: #b8e2e7;
}
.txtSub.infoSub::before {
  content: "";
}
.circleBox {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 2;
}
.info .circle {
  --circle: 4.625rem;
  width: var( --circle );
  height: var( --circle );
  border: 2px solid var( --color_brand4 );
  border-radius: 100%;
  background-color: #f9e4d4;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  font-weight: 800;
  color: var( --color_brand1 );
}
.info .circleBox::before, .info .circleBox::after {
  position: absolute;
  content: "";
  z-index: 1;
}
.info .circleBox::before {
  width: 100%;
  height: 1px;
  border: 1px dashed #d1996e;
}
.info .circleBox::after {
  width: 1px;
  height: 90%;
  border: 1px dashed #d1996e;
}
.stepBox .stepCont {
  --wh: 2rem;
  width: 100%;
  display: grid;
  justify-content: center;
  position: relative;
}
.stepBox .stepContHistoryText {
  background-color: #fbfbf9;
  padding: .25rem;
  z-index: 10;
  position: relative;
}
.stepBox .stepCont::before, .stepBox .stepCont::after {
  width: 100%;
  height: 1px;
  position: absolute;
  content: "";
  background-color: var( --color_mygray300 );
  margin-top: calc( var( --wh ) / 2 );
  z-index: 1;
}
.stepBox .stepCont::after {
  width: 1rem;
  height: 1rem;
  margin-top: calc( var( --wh ) / 4 );
  clip-path: polygon(0 0, 0 100%, 100% 51%);
  right: 0;
}
.step-start.step-done .stepContNumber, .step-start.step-done .stepCont::before, .step-start.step-done .stepCont::after {
  background-color: #a6cff5;
}
.step-start.step-done .stepContHistoryText {
  color: #1C4973;
}
.step-start.step-active .stepContNumber, .step-start.step-active .stepCont::before, .step-start.step-active .stepCont::after {
  background-color: #ff9797;
}
.step-start.step-active .stepContHistoryText {
  color: #731C1C;
}
.stepBox .stepContNumber {
  width: var( --wh );
  height: var( --wh );
  display: grid;
  justify-content: center;
  background-color: var( --color_mygray300 );
  margin: auto;
  border-radius: 100rem;
  font-weight: 700;
  z-index: 10;
}
.infoListBox .historyTable td span {
  white-space: nowrap;
}
@media only screen and ( max-width:360px ) {
  .stepBox .stepCont {
    padding: 1rem 0;
  }
  .stepBox .stepCont::before {
    width: 1px;
    height: 100%;
    left: 50%;
  }
  .stepBox .stepCont::after {
    right: 50%;
    top: 100%;
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    transform: translateX( .5rem );
  }
}
.changeBtn {
  display: flex;
  margin: auto;
}
.changeBtn input {
  border: none;
  background-color: transparent;
}
.awards .awardsBtn {
  border-radius: .2rem;
  color: var( --color_myblack );
  text-align: center;
  padding: .5rem;
  transition: all .25s;
  margin: .25rem 0;
}
.awards .awardsBtn:hover {
  margin: 0 0 .5rem 0;
}
.awards .awardsBtn.blue {
  background-color: #8cc8f4;
  border: 1px solid #51a8f1 !important;
}
.awards .awardsBtn.red {
  background-color: #fabcd0;
  border: 1px solid #ff70b7 !important;
}
.awards .awardsBtn.green {
  background-color: #a0e2ce;
  border: 1px solid #19ba8b !important;
}
.downLine {
  border-bottom: 1px dashed var( --color_brand2 );
  padding-bottom: .5rem;
  display: grid;
  gap: .5rem;
}
.downLine img {
  transition: all .5s;
  width: 100%;
}
.downLine:hover img {
  transform: scale(1.1);
}
.downLine span {
  margin-left: 0rem;
  transition: all .5s;
}
.downLine:hover span {
  margin-left: 1rem;
}
.no-js noscript {
  padding: .5rem 1rem;
  margin: 0;
}
.no-js header {
  position: relative;
  top: 0;
}
.no-js .open_box {
  position: relative;
  top: 0;
  opacity: 1;
  padding: 0;
}
.no-js .open_box .right {
  display: none;
}
.no-js .open_box .pageFormBox a, .no-js .open_box:not(.open) input {
  display: block;
}
.no-js .otherLinkBtn {
  width: 10rem;
  max-width: 20rem;
}
@media only screen and ( max-width:1800px ) {
  .indexMain, .pages {
    --rightBox_w: 12.5rem;
    --menuGroup_w: 22rem;
    --banner_aspectRatio: 1320/500;
  }
}
@media only screen and ( max-width:1600px ) {
  .pages .contentInfo {
    --info_pw: 2rem;
  }
}
@media only screen and ( max-width:1399px ) {
  .indexMain, .pages {
    --visualImg_h: 2rem;
    --menuGroup_w: 20rem;
  }
  .visualImg {
    width: var( --rightBox_w );
    margin-left: auto;
    padding-bottom: var( --visualImg_h );
  }
  .bannerBottomImg {
    padding-bottom: 3rem;
    margin-top: -4.5rem;
  }
  .pages .contentInfo {
    --info_pw: 5%;
  }
  .newsListBox {
    --newsList_p: 5dvw;
  }
  .linkBox:nth-child(3), .linkBox:nth-child(4) {
    border: 0px solid var( --color_myblack );
  }
  .linkBox:nth-child(5) {
    border-right: 1px solid var( --color_myblack );
  }
}
@media only screen and ( max-width:1279px ) {
  .indexMain, .pages {
    --menuGroup_w: 18rem;
    --bgTxtImg_w: 50%;
  }
  .bannerBottomImg {
    margin-top: -4rem;
  }
}
@media only screen and ( max-width:1180px ) {
  .indexMain, .pages {
    --visualImg_h: 1rem;
    --bgTxtImg_w: 60%;
  }
  .visual.content {
    width: calc( 100dvw - var( --rightBox_w ) -2rem );
    margin-left: calc( var(--menuGroup_w) * -1 );
  }
  .banner .slick-list {
    width: calc( 100dvw - var( --rightBox_w ) -2rem );
  }
  main:not(.pages) #leftMenu .menuGroup {
    padding-top: 4rem;
  }
  .pages .topImg {
    max-width: 16.5rem;
  }
  .bannerBottomImg {
    margin-top: -3rem;
  }
}
@media only screen and ( max-width:1023px ) {
  .indexMain, .pages {
    --menuGroup_w: 0rem;
    --rightBox_w: 11rem;
    --visualImg_h: 2rem;
  }
  .content {
    border-left: 0px;
  }
  #leftMenu, .menuGroup {
    display: none;
  }
  a.cardBox {
    aspect-ratio: 750/400;
  }
  .cardBox span {
    font-size: 1.2rem;
  }
  .section.news .content, .section.otherLink .content {
    --pb_h: 4rem;
    padding-top: calc( var( --pb_h ) * 1.5 );
  }
  .section.otherLink {
    display: grid;
    position: relative;
  }
  .linkBox:nth-child(2), .linkBox:nth-child(4) {
    border: 0px solid var( --color_myblack );
  }
  .linkBox:nth-child(3), .linkBox:nth-child(5) {
    border-left: 0px solid var( --color_myblack );
    border-right: 1px solid var( --color_myblack );
  }
}
@media only screen and ( max-width:990px ) {
  .headrBox > .navMenu {
    display: none;
  }
  .openMenu {
    margin: 0 auto 0 0;
  }
  .rightBox {
    margin-top: -6rem;
    margin-bottom: -5rem;
  }
  .bannerBottomImg img {
    width: calc( 99.5dvw - var( --rightBox_w ) );
  }
  .pages .topSubBox {
    background: url(../images/wlbPicture/txtImgBox.svg) left center / 100% no-repeat;
  }
  .pageImgBox {
    border-left: 0px solid var( --color_mygray300 );
    border-radius: 0rem;
    overflow: hidden;
  }
}
@media only screen and ( max-width:768px ) {
  .indexMain, .pages {
    --rightBox_w: 10rem;
    --bgTxtImg_w: 75%;
  }
  .visual.content {
    padding: 0rem;
  }
  .banner .slick-list {
    width: calc( 100dvw - var( --menuGroup_w ) );
    border-radius: 0;
  }
  .visualImg {
    margin-right: .5rem;
    margin-top: 1rem;
  }
  .pages .topImg {
    top: -2rem;
    max-width: 20rem;
  }
  .checkEAP .checkGroup {
    min-width: 100%;
  }
}
@media only screen and ( max-width:728px ) {
  .pageFormBox {
    width: 100%;
  }
  .pages .topImg {
    position: relative;
    width: 90%;
    margin: auto;
    top: 0rem;
  }
  .linkBtn {
    --linkBtn_pw: .95rem;
  }
}
@media only screen and ( max-width:660px ) {
  .section {
    --px_w: .425rem;
  }
  header > div.headrBox {
    padding: .1rem 0 .1rem .3rem;
  }
  .webSiteSub span:first-child {
    font-size: 1.225rem;
  }
  .fcMenuBtn .menuBtn {
    display: none;
  }
}
@media only screen and ( max-width:639px ) {
  .indexMain, .pages {
    --bgTxtImg_w: 80%;
  }
  .logoImg img {
    height: 40px !important;
  }
  .newsList {
    height: 8rem;
    flex-wrap: wrap;
    padding-right: .25rem;
  }
  .newsList span:not( .mark ) {
    width: 100%;
  }
  .linkBox, .linkBox:nth-child(3), .linkBox:nth-child(5) {
    border: 0px solid var( ---color_myblack );
  }
  .linkBox:not(:last-child) {
    border-bottom: 1px solid var( --color_myblack ) !important;
    padding-bottom: 2rem !important;
  }
  .footerLink .linkBtn {
    margin: 0 auto 0 0;
  }
}
@media only screen and ( max-width:579px ) {
  .indexMain, .pages {
    --rightBox_w: 9rem;
    --banner_aspectRatio: 900/520;
    --titleSub: 3rem;
    --titleSub_f: 1.4rem;
  }
  .logoBox {
    gap: .2rem;
  }
  .open_box .logoBox {
    display: grid;
    grid-template-areas: "img b"	"img c";
  }
  .open_box .logoBox img {
    grid-area: img;
  }
  .webSiteSub {
    padding: 0;
    margin: 0;
    border: none;
  }
  .fcMenuBtn {
    padding-left: 1rem;
  }
  .memberBox {
    --fcGap: .125rem;
    position: fixed;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    right: .5rem;
    top: calc( var( --set_h ) + .75rem );
    background-color: var( --color_brand1 );
    padding: var( --fcGap );
    border-radius: 10rem;
  }
  .memberBox a.menuBtn, .memberBox span {
    display: flex;
    font-size: 1.125rem;
  }
  .titleSub, .pageSub {
    justify-content: flex-start;
    gap: 1rem;
    font-size: calc( var( --titleSub_f ) );
  }
  .section.news .content, .section.otherLink .content {
    padding-top: 3.5rem;
  }
  .pages .content {
    padding-top: 0;
  }
  .pages .navigation {
    width: 80%;
    margin: auto;
    position: relative;
  }
  .pages .navigation::before, .pages .navigation::after {
    width: 100vw;
    height: 5rem;
    position: absolute;
    content: "";
    top: 50%;
    left: -12.5%;
    border-top: 1px solid var( --color_mygray400 );
    border-radius: 60rem;
    z-index: -1;
  }
  .pages .navigation::before {
    width: 80vw;
    background-color: #ffffff;
    top: 0;
    z-index: 0;
    left: 50%;
    transform: translateX(-50%);
    border: none;
  }
  .pages .topSubBox {
    border-bottom: 0px solid var( --color_mygray300 );
  }
  .right .pageSub {
    gap: 0;
  }
  .pages .contentInfo {
    --info_pw: 1rem;
  }
  #closeBtn:checked ~ div .linkBox {
    padding: .625rem .25rem;
  }
}
@media only screen and ( max-width:375px ) {
  .indexMain, .pages {
    --rightBox_w: 7rem;
    --banner_aspectRatio: 375/292;
    --titleSub: 2.75rem;
    --titleSub_f: 1.3rem;
  }
  .Minemenu span.menuTxt {
    display: none;
  }
  .section {
    --px_w: .225rem;
  }
  .footerLink .section {
    --px_w: .425rem;
  }
  main .landingPageContent {
    --min_p: .525rem;
    padding: 1rem .425rem;
  }
  .pageSub::before, .pageSub::after {
    width: 2rem;
  }
  .pages .contentInfo {
    --info_pw: .625rem;
  }
  .pageFormBox {
    --form_pw: .425rem;
  }
}
@media only screen and ( min-width:640px ) {
  .contentInfo .info .infoImg {
    max-width: fit-content !important;
    padding: .25rem;
  }
}
@media only screen and ( min-width:991px ) and ( max-width:1279px ) and ( orientation: landscape ) {
  header .menuBtn > div.signIn {
    width: fit-content;
    max-width: 11rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
@media only screen and ( max-width:996px ) and ( orientation: landscape ) {
  .webSiteSub span:first-child {
    padding-left: 0;
  }
}
@media only screen and ( min-width:1921px ) {
  .fcMenuBtn {
    border-radius: 10rem;
    padding: .5rem 1.875rem;
  }
  .indexMain {
    max-width: var( --max_width );
    border-left: 1px solid var( --color_mygray300 );
    border-right: 1px solid var( --color_mygray300 );
  }
  .banner .slick-list {
    max-width: calc( var( --max_width ) - ( ( var( --rightBox_w ) * .85 ) + var( --menuGroup_w ) ) );
  }
}
@media only screen and ( min-width:2560px ) {
  html {
    font-size: 1.2rem;
  }
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-divide-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-divide-y-reverse: 0;
      --tw-border-style: solid;
      --tw-font-weight: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
    }
  }
}