:root {
  --fs-15: 0.95rem;     /* 16px */
  --fs-16: 1rem;        /* 16px */
  --fs-17: 1.0625rem;   /* 17px */
  --fs-18: 1.125rem;    /* 18px */
  --fs-20: 1.25rem;     /* 20px */
  --fs-22: 1.375rem;    /* 22px */
  --fs-24: 1.5rem;      /* 24px */
  --fs-26: 1.625rem;    /* 26px */
  --fs-28: 1.75rem;     /* 28px */
  --fs-30: 1.875rem;    /* 30px */
  --fs-32: 2rem;        /* 32px */
  --fs-36: 2.25rem;     /* 36px */
  --fs-42: 2.625rem;    /* 42px */
  --fs-46: 2.875rem;    /* 46px */
  --fs-50: 3.125rem;    /* 50px */
  --fs-62: 3.875rem;    /* 62px */
  --fs-70: 4.375rem;    /* 70px */
  --fs-72: 4.5rem;      /* 72px */

	--root-color-sub: #666666;
	--root-color-brand: #191E3E;
	--root-color-primary: #1D2247; 
	--root-color-secondary: #E66C5C;

  --root-font-sans: 'Pretendard', -apple-system, sans-serif;
  --root-font-mont: 'Montserrat', -apple-system, sans-serif;

	--swiper-pagination-top: 0;
	--swiper-pagination-bottom: auto;
	--swiper-pagination-bullet-size: 8px;
	--swiper-pagination-bullet-width: 8px;
	--swiper-pagination-bullet-height: 8px;
	--swiper-pagination-bullet-border-radius: 50%;
	--swiper-pagination-bullet-inactive-color: #D9D9D9;
	--swiper-pagination-bullet-inactive-opacity: 0.5;
	--swiper-pagination-color: #1D2247;
	--swiper-pagination-bullet-opacity: 1;
	--swiper-pagination-bullet-horizontal-gap: 1.5px;
	--swiper-pagination-bullet-vertical-gap: 1.5px;

	--button-arw-right:36px;
	--button-lg-arw-right:21px;
}

@media (max-width: 1399px) {
  :root {
    --fs-15: 0.875rem;    /* 14px */
    --fs-16: 0.9rem;      /* 14.4px */
    --fs-17: 0.95rem;     /* 15.2px */
    --fs-18: 1rem;        /* 16px */
    --fs-20: 1.125rem;    /* 18px */
    --fs-22: 1.25rem;     /* 20px */
    --fs-24: 1.35rem;     /* 21.6px */
    --fs-26: 1.4rem;      /* 22.4px */
    --fs-28: 1.5rem;      /* 24px */
    --fs-32: 1.875rem;    /* 32px */
    --fs-36: 2rem;        /* 32px */
    --fs-42: 2.5rem;      /* 40px */
    --fs-46: 2.625rem;    /* 42px */
    --fs-50: 2.8125rem;   /* 45px */
    --fs-62: 3.25rem;     /* 52px */
    --fs-70: 3.75rem;     /* 60px */
    --fs-72: 3.875rem;    /* 60px */
  }
}

@media (max-width: 1023px) {
  :root {
    --fs-16: 0.875rem;    /* 14px */
    --fs-17: 0.9375rem;   /* 15px */
    --fs-18: 0.9375rem;   /* 15px */
    --fs-20: 1.0625rem;   /* 17px */
    --fs-22: 1.1875rem;   /* 19px */
    --fs-24: 1.25rem;     /* 20px */
    --fs-26: 1.3rem;      /* 24px */
    --fs-28: 1.35rem;     /* 24px */
    --fs-30: 1.5rem;      /* 24px */
    --fs-32: 1.675rem;    /* 30px */
    --fs-36: 1.75rem;     /* 28px */
    --fs-42: 1.875rem;    /* 30px */
    --fs-46: 1.9rem;      /* 30px */
    --fs-50: 2rem;        /* 32px */
    --fs-62: 2.5rem;      /* 40px */
    --fs-70: 2.8125rem;   /* 45px */
    --fs-72: 2.85rem;     /* 45px */
  }
}

@media (max-width: 767px) {
  :root {
    --fs-16: 0.875rem;    /* 14px */
    --fs-17: 0.875rem;    /* 14px */
    --fs-18: 0.875rem;    /* 14px */
    --fs-20: 0.9375rem;   /* 15px */
    --fs-22: 1rem;        /* 16px */
    --fs-24: 1.125rem;    /* 18px */
    --fs-26: 1.15rem;     /* 20px */
    --fs-28: 1.2rem;      /* 20px */
    --fs-30: 1.25rem;     /* 20px */
    --fs-32: 1.375rem;    /* 30px */
    --fs-36: 1.5rem;      /* 24px */
    --fs-42: 1.75rem;     /* 28px */
    --fs-46: 1.8rem;      /* 28px */
    --fs-50: 1.875rem;    /* 30px */
    --fs-62: 2rem;        /* 32px */
    --fs-70: 2.25rem;     /* 36px */
    --fs-72: 2.25rem;     /* 36px */

    --button-arw-right:24px;
    --button-lg-arw-right:12px;
  }
}

textarea { line-height: 1.5; }
input[type='radio'].radio { display: none; }
input[type='radio'].radio + label { position: relative; display: flex; align-items: center; min-height:30px; padding-left: 40px; cursor: pointer; }
input[type='radio'].radio + label::before { content: ''; width: 30px; height: 30px; background: url('/images/common/radio_off.svg') no-repeat center/contain; position: absolute; left:0; top:50%; transform: translateY(-50%); }
input[type='radio']:checked.radio + label::before { background-image: url('/images/common/radio_on.svg'); }

.check-box { position: relative; display: flex; align-items: center; min-height:30px; padding-left: 40px; cursor: pointer; }
.check-box input[type='checkbox']{ display: none; }
.check-box::before { content: ''; width: 30px; height: 30px; background: url('/images/common/checkbox_off.svg') no-repeat center/contain; position: absolute; left:0; top:50%; transform: translateY(-50%); }
.check-box:has(input[type='checkbox']:checked)::before { background-image: url('/images/common/checkbox_on.svg'); }
.check-box:has(input[type='checkbox']:disabled) { cursor: default; color:var(--root-color-sub); }
.check-box:has(input[type='checkbox']:disabled)::before { background-image: url('/images/common/checkbox_disabled.svg'); }

input[type='radio'].radio-box { display: none; }
input[type='radio'].radio-box + label { position: relative; display: flex; align-items: center; padding:0 20px; min-height:50px; cursor: pointer; border-radius: 4px; border:1px solid #CCCCCC; color:#666666 }
input[type='radio']:checked.radio-box + label { background: var(--color-secondary); color:white; font-weight: bold; }

.swiper-button-disabled { opacity: 0.3; pointer-events: none; }
.disc-list li { position: relative; padding-left: 17px; line-height: 1.5; }
.disc-list li::before { content: ''; position: absolute; left: 0; top: 9px; width: 3px; height: 3px; background: #000; border-radius: 50%; }

.disc-list-w li { position: relative; padding-left: 17px; line-height: 1.5; }
.disc-list-w li::before { content: ''; position: absolute; left: 0; top: 9px; width: 3px; height: 3px; background: white; border-radius: 50%; }

@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
@keyframes blink { 0%, 100% { opacity: 0; } 50% { opacity:1; } }
@keyframes wiggle { 
  0% { transform: rotate(0deg) scale(1) skew(0deg, 0deg); }
  25% { transform: rotate(2.5deg) scale(1.025) skew(2deg, -2deg); }
  50% { transform: rotate(-2.5deg) scale(1) skew(-2deg, 2deg); }
  75% { transform: rotate(2.5deg) scale(1.025) skew(2deg, -2deg);  }
  100% { transform: rotate(0deg) scale(1) skew(0deg, 0deg); }
}
@keyframes float {
	0% { transform: translateY(0px); }
	50% { transform: translateY(-8px); }
	100% { transform: translateY(0px); }
}
@keyframes float-x {
	0% { transform: translateX(0px); }
	50% { transform: translateX(-6px); }
	100% { transform: translateX(0px); }
}
@keyframes slide {
	0% { width: 0; }
	50% { width: 100%; }
	100% { width: 100%; }
}
@keyframes draw-path {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes steam1 {
  0%, 100% { d: path("M523 134.5C521.833 135.333 519.5 138 519.5 141.5C519.5 145 522 147.5 523 148.5C524 149.5 526 152 526 155C526 157.8 524 161.167 523 162.5"); }
  50% { d: path("M523 134.5C524.167 135.333 526.5 138 526.5 141.5C526.5 145 524 147.5 523 148.5C522 149.5 520 152 520 155C520 157.8 522 161.167 523 162.5"); }
}

@keyframes steam2 {
  0%, 100% { d: path("M538.5 134.5C537.333 135.333 535 138 535 141.5C535 145 537.5 147.5 538.5 148.5C539.5 149.5 541.5 152 541.5 155C541.5 157.8 539.5 161.167 538.5 162.5"); }
  50% { d: path("M538.5 134.5C539.667 135.333 542 138 542 141.5C542 145 539.5 147.5 538.5 148.5C537.5 149.5 535.5 152 535.5 155C535.5 157.8 537.5 161.167 538.5 162.5"); }
}

@keyframes steam3 {
  0%, 100% { d: path("M554.5 134.5C553.333 135.333 551 138 551 141.5C551 145 553.5 147.5 554.5 148.5C555.5 149.5 557.5 152 557.5 155C557.5 157.8 555.5 161.167 554.5 162.5"); }
  50% { d: path("M554.5 134.5C555.667 135.333 558 138 558 141.5C558 145 555.5 147.5 554.5 148.5C553.5 149.5 551.5 152 551.5 155C551.5 157.8 553.5 161.167 554.5 162.5"); }
}


.move-bounce { animation: bounce 2s ease-in-out infinite; }
.move-blink { animation: blink 2s ease-in-out infinite; opacity: 0; }
.move-wiggle { animation: wiggle 3s infinite; }
.move-float { animation: float 3s ease-in-out infinite; }
.move-float-x { animation: float-x 3s ease-in-out infinite; }
.move-slide { animation: slide 3s ease-out 2s infinite; overflow: hidden; }
.move-slide img { height: 100%; object-fit: cover; object-position: left; }
.draw-path { stroke-dasharray: 2000; stroke-dashoffset: 2000; animation: draw-path 2.5s ease-out forwards; }
.move-steam-1 { animation: steam1 3s infinite alternate ease-in-out; }
.move-steam-2 { animation: steam2 3s infinite alternate ease-in-out; }
.move-steam-3 { animation: steam3 3s infinite alternate ease-in-out; }


@media (max-width: 768px) {
  .check-box::before { width: 24px; height: 24px; padding-left: 32px; }
}