.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

:root {
  --white: #fff;

  --black01: #000;
  --black02: #1f1f1f;

  --pink01: #f5ebee;
  --pink02: #bb2649;

  --size16: 1rem;
  --size18: 1.125rem;
  --size20: 1.25rem;
  --size24: 1.5rem;
  --size28: 1.75rem;
  --size32: 2rem;
  --size36: 2.25rem;
  --size40: 2.5rem;
  --size48: 3rem;
}
html,
body {
  /*overflow-x: hidden;*/
}
.wrap {
  width: 100%;
  position: relative;
}
.inner {
  width: 90%;
  max-width: 1640px;
  margin: auto;
}
.inner-small {
  max-width: 1210px;
  margin: 0 auto;
}
.swiper-button-prev,
.swiper-button-next {
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  width: auto;
  height: auto;
  margin-top: 0;
}
.swiper-button-next:after,
.swiper-button-prev:after {
  display: none;
}
.btn-wrap {
  display: flex;
  justify-content: center;
  margin: 130px 0 150px;
}
.btn-wrap .link-btn {
  padding: 8px 24px;
  background: rgba(255, 255, 255, 0.25);
  color: var(--white);
  font-size: var(--size24);
  font-weight: 500;
}
.pc {
  display: block;
}
.mob {
  display: none;
}
.sub {
  padding-top: 104px;
}
[data-aos="fade-up"] {
  transform: translate3d(0, 25px, 0) !important;
}
[data-aos^="fade"][data-aos^="fade"].aos-animate {
  transform: translateZ(0) !important;
}
.popup {
  width: 100%;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.5);
  display: none;
}
.popup > div {
  width: 90%;
  max-width: 1280px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--white);
}

.fx { max-width:100%; }

.pull-left { float:left; }
.pull-right { float:right; }
.row{*zoom:1;}
.row:after{clear:both; display:block; content:"";}

.boxSize { box-sizing:border-box; }

.headline1 { font-size:64px; line-height:72px; font-weight:700; }
.headline2 { font-size:48px; line-height:56px; font-weight:700; }
.headlinePm2 { font-size:clamp(24px, 6vw, 48px); line-height:clamp(32px, 6vw, 56px); font-weight:400; }
.headlinePm2Bold { font-size:clamp(24px, 6vw, 48px); line-height:56px; font-weight:700; }
.headline3 { font-size:32px; line-height:48px; font-weight:700; }
.headlinePm3 { font-size:clamp(18px, 6vw, 32px); line-height:clamp(26px, 6vw, 48px); font-weight:400; }
.headlinePm3Bold { font-size:clamp(18px, 6vw, 32px); line-height:clamp(26px, 6vw, 48px); font-weight:700; }
.headline4 { font-size:24px !important; line-height:36px; font-weight:600; }
.headlinePm4 { font-size:clamp(12px, 3vw, 26px); line-height:clamp(20px, 3vw, 36px); font-weight:400; }
.headline5 { font-size:20px; line-height:30px; font-weight:400; }
.headline6 { font-size:18px !important; line-height:28px; font-weight:400; }
.body1Bold { font-size:16px !important; line-height:24px; font-weight:700; }
.body1Reg { font-size:16px; line-height:24px; font-weight:400; }
.body2Bold { font-size:14px; line-height:21px; font-weight:700; }
.body2Reg { font-size:14px; line-height:21px; font-weight:400; }
.captionBold { font-size:12px; line-height:18px; font-weight:700; }
.captionReg { font-size:12px; line-height:18px; font-weight:400; }
.captionSmail { font-size:10px; line-height:12px; font-weight:400; }

.fnt12 { font-size:12px; line-height:18px; }
.fnt14 { font-size:14px; line-height:16px; }
.fnt14x { font-size:14px; }
.fnt16 { font-size:16px; line-height:20px; }
.fnt18 { font-size:18px; line-height:20px; }
.fnt18x { font-size:18px;  }
.fnt20 { font-size:20px; line-height:24px; }
.fnt24 { font-size:24px; line-height:36px; font-weight:600;  }
.fnt32 { font-size:32px; line-height:48px; }
.fnt64 { font-size:64px; }

.fntWei700 { font-weight:700; }

.positionAb { position:absolute; }
.positionRe { position:relative; }

.divFlex { display:flex; }
.flexWrap { flex-wrap:wrap; }
.divBlock { display:block; }
.divInBlock { display:inline-block; }
.disNone { display:none; }
.flexColumn { flex-direction: column; }
.aICenter { align-items: center; }



.jcSpaceBetween { justify-content:space-between; }
.jcCenter { justify-content: center; }
.jcAlignItems { align-items:center; }
.jcDirectColumn { flex-direction: column; }
.flex-wrap{ flex-wrap:wrap; }


.textCenter { text-align:center; }
.textLeft { text-align:left; }
.textRight { text-align:right; }

.wid100p { width:100%; }
.wid1400 { max-width:1400px !important; }
.hei1px { height:1px; }

.colorBlack { color:#000; }
.colorWhite { color:#fff; }

.cursor { cursor:pointer; }

.colorTonesPrimary { color:#bb2649; }

.hiddenH1 {opacity:0;}






.bgBlock { background-color:#000; }
.bgWhite { background-color:#fff; }
.bgNeutral50 { background-color:#F9FAFB !important; }
.bgNeutral100 { background-color:#F3F4F6 !important; }
.bgNeutral200 { background-color:#E5E7EB; }
.bgNeutral300 { background-color:#CACFD7; }
.bgNeutral400 { background-color:#9CA3AF; }
.bgNeutral500 { background-color:#6B7280; }
.bgNeutral600 { background-color:#4B5563; }
.bgNeutral700 { background-color:#374151; }
.bgNeutral800 { background-color:#1F2937; }
.bgNeutral900 { background-color:#111827; }

.bgTonsePrimary { background-color:#bb2649; }

.colorPrimary500 { color:#327BFF !important; }
.colorPrimary600 { color:#3366FF !important; }

.bizButton { cursor:pointer; }
.bizButton.standard { height:48px;  border-radius:8px; padding:12px 8px; border:1px solid transparent; box-sizing:border-box; }
.bizButton.standard.secondary.border { border:1px solid #CACFD7; }
.bizButton.standard.secondary.solid { background-color:#E5E7EB; }
.bizButton.standard.secondary.outline { background-color:#fff; }
.bizButton.standard.secondary.solid:hover { background-color:#CACFD7; }
.bizButton.standard.secondary.outline:hover { background-color:#F3F4F6; }
.bizButton.standard.secondary.solid:disabled { background-color:#CACFD7 !important;  }
.bizButton.standard.secondary.solid.border:disabled { border:1px solid #E5E7EB !important; }
.bizButton.standard.secondary.outline:disabled { background-color:#fff !important; color:#E5E7EB;}
.bizButton.standard.secondary.outline.border:disabled { border:1px solid #E5E7EB !important; }

.bizButton.standard2 { height:48px;  border-radius:8px; color:#fff; padding:12px 8px; border:1px solid transparent; box-sizing:border-box; }
.bizButton.standard2.secondary.border { border:1px solid #8c1531; }
.bizButton.standard2.secondary.solid { background-color:#bb2649; }
.bizButton.standard2.secondary.outline { background-color:#fff; }
.bizButton.standard2.secondary.solid:hover { background-color:#8c1531; }
.bizButton.standard2.secondary.outline:hover { background-color:#F3F4F6; }
.bizButton.standard2.secondary.solid:disabled { background-color:#CACFD7 !important;  }
.bizButton.standard2.secondary.solid.border:disabled { border:1px solid #E5E7EB !important; }
.bizButton.standard2.secondary.outline:disabled { background-color:#fff !important; color:#E5E7EB;}
.bizButton.standard2.secondary.outline.border:disabled { border:1px solid #E5E7EB !important; }

.shadowDp1 { box-shadow: 0px 0px 8px rgba(20, 19, 22, 0.08); }
.shadowDp2 { box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.16); }
.shadowDp3 { box-shadow: 0px 24px 48px rgba(20, 19, 22, 0.16); }

.jquery-modal { z-index:9999 !important; }
.bfModal { padding:0px !important; overflow:hidden;  }
.bfModal .header { padding:10px 24px !important; border-bottom:1px solid #E5E7EB; color:#374151; font-size:18px !important; font-family:Pretendard; line-height: 28px; }
.bfModal .header .fnModalClose { color:#000; }
.bfModal .contents  { padding:28px 24px; }

.inputGroup {}
.inputGroup .label { display:inline-block; margin-bottom:8px; position:relative; }
.inputGroup .label .reqIcon { position:absolute; right:-8px; top:-2px; color:#D1221D; }
.inputGroup .inputArea { margin-bottom:8px; }
.inputGroup .inputArea input.inputForm { outline:none !important; color:#374151; border: 1px solid #CACFD7; border-radius:4px; height:48px; padding:12px 16px; }
.inputGroup .inputArea input.inputForm::placeholder { color:#9CA3AF; }
.inputGroup .inputArea input.inputForm:focus { outline:none !important; border:1px solid #3366FF; }
.inputGroup .inputArea textarea.inputForm { outline:none !important; color:#374151; border: 1px solid #CACFD7; border-radius:4px; height:48px; padding:12px 16px; }
.inputGroup .inputArea textarea.inputForm::placeholder { color:#9CA3AF; }
.inputGroup .inputArea textarea.inputForm:focus { outline:none !important; border:1px solid #3366FF; }
.inputGroup .helperText { color:#6B7280; }
/*.inputGroup input.inputForm:not(:placeholder-shown) { border:1px solid #374151; }*/
.inputGroup input.inputForm:read-only { background-color:#F3F4F6; color:#374151; border: 1px solid #CACFD7; }
.inputGroup input.inputForm:disabled { color:#9CA3AF; border:1px solid #CACFD7; }
.inputGroup textarea.inputForm:not(:placeholder-shown) { border:1px solid #374151; }
.inputGroup textarea.inputForm:read-only { background-color:#F3F4F6; color:#374151; border: 1px solid #CACFD7; }
.inputGroup textarea.inputForm:disabled { color:#9CA3AF; border:1px solid #CACFD7; }
.inputGroup.error input.inputForm { border:1px solid #EF4444; }
.inputGroup.error textarea.inputForm { border:1px solid #EF4444; }
.inputGroup.error div.inputForm { border:1px solid #EF4444; }
.inputGroup.error .niceSelect  { border:1px solid #EF4444 !important; }
.inputGroup .nice-select.disabled { background-color:#F3F4F6; }
.inputGroup .nice-select { border:1px solid #CACFD7 !important; }
.inputGroup.error .helperText { color:#EF4444; }
.inputGroup.success input.inputForm { border:1px solid #3366FF; }
.inputGroup.success textarea.inputForm { border:1px solid #3366FF; }
.inputGroup.success div.inputForm { border:1px solid #3366FF; }
.inputGroup.success .niceSelect { border:1px solid #3366FF; }
.inputGroup.success .helperText { color:#3366FF; }
.inputGroup.validationCheck .helperText { display:none; }
.inputGroup.error .helperText { display:block; }
.inputGroup.validationCheck.success .helperText { display:none; }
.inputGroup.success .helperText {  }


.inputGroup input[type="checkbox"] { display:none; }
.inputGroup input[type="checkbox"] + label { height:24px; display:inline-block; }
.inputGroup input[type="checkbox"] + label span { padding:4px; color:#fff; display:inline-block; margin-right:8px; margin-bottom:-6px; width:24px; height:24px; border-radius:4px; border:1px solid #CACFD7; background-color:#fff; }
.inputGroup input[type="checkbox"] + label span i { display:none; font-size:14px; }
.inputGroup input[type="checkbox"]:checked + label span { background-color:#327BFF; }
.inputGroup input[type="checkbox"]:checked + label span i { display:block; }
.inputGroup input[type="checkbox"]:disabled + label { color:#CACFD7; }
.inputGroup input[type="checkbox"]:disabled + label span { background-color:#E5E7EB; }

.inputGroup input[type="radio"] { display:none; }
.inputGroup input[type="radio"] + label {  }
.inputGroup input[type="radio"] + label div.icon { display:inline-block; margin-right:8px;  width:24px; height:24px; border-radius:12px; border:1px solid #CACFD7; background-color:#fff; box-sizing:border-box; }
.inputGroup input[type="radio"] + label div.icon i { display:none; }
.inputGroup input[type="radio"]:checked + label div.icon { border:2px solid #327BFF;  }
.inputGroup input[type="radio"]:checked + label div.icon i { display:inline-block; margin:4px; width:12px; height:12px; border-radius:6px; background-color:#327BFF;  }
.inputGroup input[type="radio"]:disabled + label { color:#CACFD7; }
.inputGroup input[type="radio"]:disabled + label div.icon { background-color:#E5E7EB; }
.inputGroup input[type="radio"]:disabled:checked + label div.icon { background-color:#E5E7EB; border:2px solid #CACFD7;  }
.inputGroup input[type="radio"]:disabled:checked + label div.icon i { display:inline-block; margin:4px; width:12px; height:12px; border-radius:6px; background-color:#CACFD7;  }

.toggleGroup .toggleSwitch { width: 52px; height: 28px; display: block; position: relative; border-radius: 16px; background-color: #E5E7EB;  cursor: pointer;  }
.toggleGroup .toggleSwitch .toggleButton { width: 24px; height: 24px; position: absolute; top: 50%; left: 2px; transform: translateY(-50%);  border-radius: 50%;  background: #fff; }

.toggleGroup input[type="checkbox"]:checked ~ .toggleSwitch { background: #f03d3d; }
.toggleGroup input[type="checkbox"]:checked ~ .toggleSwitch .toggleButton { left: calc(100% - 26px); background: #fff; }
.toggleGroup .toggleSwitch, .toggleButton { transition: all 0.2s ease-in; }

.inputGroup .relativeArea { position:relative; }
.inputGroup .relativeArea .ph-eye { position:absolute; right:10px; top:12px; }
.inputGroup .relativeArea .position { position:absolute; right:10px; top:12px; }
.inputGroup .relativeArea .passwordInfo { position:absolute; right:10px; top:-20px; }
.inputGroup .relativeArea .passwordInfo .divFlex { margin-top:7px;}
.inputGroup .relativeArea .passwordInfo .divFlex .box { width:8px; margin-left:4px; height:4px; background-color:#F3F4F6; }
.inputGroup .relativeArea .passwordInfo.level1 { color:#DC2626; }
.inputGroup .relativeArea .passwordInfo.level3 { color:#10B981; }
.inputGroup .relativeArea .passwordInfo.level1 .divFlex .box1 { background-color:#DC2626; }
.inputGroup .relativeArea .passwordInfo.level1 .divFlex .box2 { background-color:#F3F4F6; }
.inputGroup .relativeArea .passwordInfo.level1 .divFlex .box3 { background-color:#F3F4F6; }
.inputGroup .relativeArea .passwordInfo.level2 .divFlex .box1 { background-color:#DC2626; }
.inputGroup .relativeArea .passwordInfo.level2 .divFlex .box2 { background-color:#DC2626; }
.inputGroup .relativeArea .passwordInfo.level2 .divFlex .box3 { background-color:#F3F4F6; }
.inputGroup .relativeArea .passwordInfo.level3 .divFlex .box1 { background-color:#10B981; }
.inputGroup .relativeArea .passwordInfo.level3 .divFlex .box2 { background-color:#10B981; }
.inputGroup .relativeArea .passwordInfo.level3 .divFlex .box3 { background-color:#10B981; }


.ani[class*="fade"] { --opacity: 0; }
.ani[class*="show"] { --opacity: 1; }
/* s : spped / d : delay / t : translate */
/* spped */
.ani[class*="-s0"] { --s-level: 0; }
.ani[class*="-s05"] { --s-level: 0.5; }
.ani[class*="-s1"] { --s-level: 1; }
.ani[class*="-s2"] { --s-level: 2; }
.ani[class*="-s3"] { --s-level: 3; }
.ani[class*="-s4"] { --s-level: 4; }
.ani[class*="-s5"] { --s-level: 5; }
/* delay */
.ani[class*="-d0"] { --d-level: 0; }
.ani[class*="-d05"] { --d-level: 0.5; }
.ani[class*="-d1"] { --d-level: 1; }
.ani[class*="-d2"] { --d-level: 1.25; }
.ani[class*="-d3"] { --d-level: 1.5; }
.ani[class*="-d4"] { --d-level: 1.75; }
.ani[class*="-d5"] { --d-level: 2; }
.ani[class*="-d6"] { --d-level: 2.25; }
.ani[class*="-d7"] { --d-level: 2.5; }
.ani[class*="-d8"] { --d-level: 2.75; }
.ani[class*="-d9"] { --d-level: 3; /* translate */}
.ani[class*="-d12"] { --d-level: 3.75; }
.ani[class*="-d24"] { --d-level: 4.75; }
.ani[class*="-d34"] { --d-level: 5.75; }
.ani[class*="-d44"] { --d-level: 6.75; }
.ani[class*="-t0"] { --t-level: 0; }
.ani[class*="-t05"] { --t-level: 0.5; }
.ani[class*="-t1"] { --t-level: 1; }
.ani[class*="-t2"] { --t-level: 2; }
.ani[class*="-t3"] { --t-level: 3; }
.ani[class*="-t4"] { --t-level: 4; }
.ani[class*="-t5"] { --t-level: 5; }
.ani[class*="-tx2"] { --t-level: 20; }
.ani[class*="-tx3"] { --t-level: 30; }
/* timing-function */
.ani[class*="-ease"] { --timing-function: ease; }
.ani[class*="-ease-in"] { --timing-function: ease-in; }
.ani[class*="-ease-out"] { --timing-function: ease-out; }
.ani[class*="-ease-in-out"] { --timing-function: ease-in-out; }
.ani[class*="-linear"] { --timing-function: linear; }
/* extension */
/* 아래 -> 위 */
.ani[class*="-upper"] { --translateX: 0; --translateY: var(--translate); }
/* 위 -> 아래 */
.ani[class*="-under"] { --translateX: 0; --translateY: calc(var(--translate) * -1); }
/* 좌측 -> 우측 */
.ani[class*="-left"] { --translateX: calc(var(--translate) * -1); --translateY: 0; }
/* 우측 -> 좌측 */
.ani[class*="-right"] { --translateX: var(--translate); --translateY: 0; }
/* 크기 */
/* 증가 */
.ani[class*="-scale"][class*="-up"] { --scale: 0.5; }
/* 감소 */
.ani[class*="-scale"][class*="-down"] { --scale: 1.5; }
/* animation */
.ani.custom { --opacity-0: 0; --opacity-100: 1; --transform-0: translate(0, 0); --transform-100: translate(0, 0); --opacity: 0; animation: ani-custom var(--duration) var(--timing-function) var(--delay) forwards; /* active */}
.ani.active { opacity: 1; }
.ani.active[class*="fade"] { --translate: 0; --scale: 1; --opacity: 1; filter: blur(0px); }
.ani.active[class*="show"] { --translate: 0; --scale: 1; }

/* 애니메이션 */
.ani { --opacity: 0; /* 등급 (해당 숫자만큼 곱함) */
  --s-level: 4; --d-level: 0; --t-level: 4; /* 위치값 */
  --value: 25px; /* 트랜지션 기본 속도 */
  --duration-second: 0.25s; --delay-second: 0.25s; /* 트랜지션 계산 */
  --duration: calc(var(--duration-second) * var(--s-level)); --delay: 0; /* 트랜지션 프로퍼티 */
  --property: opacity, transform, scale, translate, filter; /* 트랜지션 효과 */
  --timing-function: ease; /* transform */
  --translate: calc(var(--value) * var(--t-level)); --scale: 1; /* default */
  opacity: var(--opacity); transition-duration: var(--duration); transition-delay: var(--delay); transition-property: var(--property); transition-timing-function: var(--timing-function); translate: var(--translateX) var(--translateY); scale: var(--scale); }
.ani.active { --delay: calc(var(--delay-second) * var(--d-level)); }

@media (max-width: 1000px) {
  /* footer {
    margin-bottom: 160px;
  } */
}
@media screen and (max-width: 1500px) {
  html,
  body {
    font-size: 14px;
  }
}
@media screen and (max-width: 1200px) {
  .sub {
    padding-top: 66px;
  }
}
@media screen and (max-width: 1200px) {
  .pc {
    display: none;
  }
  .mob {
    display: block;
  }

  .main-popup .inner.pc {
    display: block;
  }
  .main-popup .inner.mob {
    display: none;
  }

  .inner-small {
    padding: 0 15px;
    max-width: 600px;
  }
}
@media screen and (max-width: 700px) {
  .pc {
    display: none;
  }
  .mob {
    display: block;
  }
  .sub {
    padding-top: 100px;
  }
  .main-popup .inner.pc {
    display: none;
  }
  .main-popup .inner.mob {
    display: block;
  }

}