@charset "UTF-8";
html,
body {
  font-family: SUIT;
  line-height: normal;
  font-weight: 500;
  color: var(--black);
  word-break: keep-all;
}
section {
  position: relative;
}
.width-wrap {
  position: relative;
  max-width: 1160px;
  width: 100%;
  padding: var(--padding160);
  margin: 0 auto;
}
.width-wrap.big {
  max-width: 1360px;
}
.width-wrap.small {
  max-width: 880px;
}

/* responsive class */
.top1020,
.top850,
.top700,
.top500 {
  display: block;
}
.under1300,
.under1020,
.under850,
.under700,
.under500 {
  display: none;
}

/* btn */
.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.btn.round10 {
  border-radius: 10px;
}
.btn.round1000 {
 border-radius: 1000px; 
}
.btn.p1232 {
  padding: 12px 32px;
}
.btn.p1420 {
  padding: 14.5px 20px;
}
.btn.black {
  background: var(--black);
  color: var(--white);
}
.btn.blue {
  background: #46ADF0;
  color: var(--white);
}
.btn.po {
  background: linear-gradient(270deg, #52B5AF 0%, #0A4BC3 100%);
  color: var(--whtie);
}

/* label */
.label {
  padding: 3.5px 12px;
  border-radius: 4px;
  background: var(--black);
  width: fit-content;
  color: var(--white);
  font-size: var(--font-18);
  font-weight: 600;
  line-height: 150%; 
  letter-spacing: var(--font-18-ls);
}
.label.po {
  background: var(--po);
}

/* icon-text */
.icon-text {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* liguid-glass 효과 */
.glass {
  position: relative;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: url('#glass-blur') blur(0px);
  -webkit-backdrop-filter: url('#glass-blur') blur(0px);
}
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 30px;
  pointer-events: none;
  border: 1px solid transparent;
  background: linear-gradient(160deg,
      rgba(0, 255, 255, 0.4),
      rgba(255, 255, 255, 0.6),
      rgba(0, 255, 255, 0.2));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: 2;
}

/* font */
.white {
  color: var(--white);
}
.black {
  color: var(--black);
}
.black-op-1 {
  color: var(--black-op-1);
}
.gray-100 {
  color: var(--gray-100);
}
.gray-200 {
  color: var(--gray-200);
}
.gray-300 {
  color: var(--gray-300);
}
.po-color {
  color: var(--po);
}
.po-op1-color {
  color: var(--po-op-1);
}
.secondary {
  color: var(--secondary);
}
.secondary-op1 {
  color: var(--secondary-op-1);
}
.secondary-op5 {
  color: var(--secondary-op-5);
}
.ex-bold {
  font-weight: 800;
}
.bold {
  font-weight: 700;
}
.semi-bold {
  font-weight: 600;
}
.medium {
  font-weight: 500;
}
.regular {
  font-weight: 400;
}
.light {
  font-weight: 300;
}
.lh170 {
  line-height: 170%; 
}
.lh160 {
  line-height: 160%; 
}
.lh150 {
  line-height: 150%; 
}
.lh140 {
  line-height: 140%;
}
.lh135 {
  line-height: 135%;
}
.font72 {
  font-size: var(--font-72);
  letter-spacing: var(--font-72-ls);
}
.font55 {
  font-size: var(--font-55);
  letter-spacing: var(--font-55-ls);
}
.font54 {
  font-size: var(--font-54);
  letter-spacing: var(--font-54-ls);
}
.font50 {
  font-size: var(--font-50);
  letter-spacing: var(--font-50-ls);
}
.font44 {
  font-size: var(--font-44);
  letter-spacing: var(--font-44-ls);
}
.font40 {
  font-size: var(--font-40);
  letter-spacing: var(--font-40-ls);
}
.font36 {
  font-size: var(--font-36);
  letter-spacing: var(--font-36-ls);
}
.font32 {
  font-size: var(--font-32);
  letter-spacing: var(--font-32-ls);
}
.font30 {
  font-size: var(--font-30);
  letter-spacing: var(--font-30-ls);
}
.font29 {
  font-size: var(--font-29);
  letter-spacing: var(--font-29-ls);
}
.font28 {
  font-size: var(--font-28);
  letter-spacing: var(--font-28-ls);
}
.font26 {
  font-size: var(--font-26);
  letter-spacing: var(--font-26-ls);
}
.font24 {
  font-size: var(--font-24);
  letter-spacing: var(--font-24-ls);
}
.font22 {
  font-size: var(--font-22);
  letter-spacing: var(--font-22-ls);
}
.font21 {
  font-size: var(--font-21);
  letter-spacing: var(--font-21-ls);
}
.font20 {
  font-size: var(--font-20);
  letter-spacing: var(--font-20-ls);
}
.font18 {
  font-size: var(--font-18);
  letter-spacing: var(--font-18-ls);
}
.font16 {
  font-size: var(--font-16);
  letter-spacing: var(--font-16-ls);
}
.font15 {
  font-size: var(--font-15);
  letter-spacing: var(--font-15-ls);
}
.font14 {
  font-size: var(--font-14);
  letter-spacing: var(--font-14-ls);
}
h1 {
  font-size: var(--font-60);
  font-weight: 800;
  line-height: 180%;
  letter-spacing: var(--font-60-ls);
}
h2 {
  font-size: var(--font-54);
  font-weight: 700;
  line-height: 150%;
  letter-spacing: var(--font-54-ls);
}
h3 {
  font-size: var(--font-44);
  font-weight: 700;
  line-height: 150%; 
  letter-spacing: var(--font-44-ls);
}
h4 {
  font-size: var(--font-36);
  font-weight: 600;
  line-height: 150%;
  letter-spacing: var(--font-36-ls);
}

/* animation */
@keyframes upDown {
  0% {
    transform: translateY(-2px);
  }
  50% {
      transform: translateY(2px);
  }
  100% {
      transform: translateY(-2px);
  }
}
@keyframes scroll-x {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - 8px));
  }
}
@keyframes progress{
  0% {
    height: 0%;
  }
  100% {
    height: 100%;
  }
}
@keyframes revealText {
  0% {
    width: 0;
  }
  100% {
      width: 100%;
  }
}

/* header */
header {
  position: fixed;
  width: 100%;
  z-index: 999;
  background: transparent;
  transition: all 0.75s ease-in-out;
}
header.hide {
  transform: translateY(-100%);
}
header.white {
  background: var(--white);
  box-shadow: 6px 6px 20px 0 rgba(0, 0, 0, 0.10);
}
header .width-wrap {
  padding: var(--paddingHeader);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
header .width-wrap .logo{
  width: 200px;
  position: relative;
  aspect-ratio: 16 / 3;
}
header .width-wrap .logo img{
  width: 100%;
  position: absolute;
}
header .width-wrap .logo img.hidden {
  opacity: 0;
  visibility: hidden;
}
header .width-wrap .gnb{
  display: flex;
  align-items: center;
  gap: 30px;
}
header .width-wrap .gnb li{
  padding: 0 10px;
}
header.white .width-wrap .gnb li a {
  color: var(--black);
}
header .width-wrap > .btn {
  width: 161px;
  position: relative;
}
header .width-wrap > .btn img{
  width: 100%;
  position: absolute;
  pointer-events: all;
}
header .width-wrap > .btn img.hidden {
  opacity: 0;
  visibility: hidden;
}

/* fixed-wrap */
#fixed-wrap {
  position: fixed;
  z-index: 999;
  right: 30px;
  bottom: 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  opacity: 1;
  transition: all 0.75s linear;
}
#fixed-wrap.hide {
  opacity: 0;
  pointer-events: none;
}
#fixed-wrap .btn {
  gap: 6px;
  width: 163px;
}
#fixed-wrap .btn img{
  width: 24px;
}

/* footer */
footer {
  background: var(--bg);
}
footer .width-wrap{
  padding: var(--paddingFooter);
}
footer .width-wrap .logo{
  width: 201px;
  margin-bottom: 24px;
}
footer .width-wrap .mid-area > p {
  color: var(--secondary);
}
footer .width-wrap .mid-area .info-zone{
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
}
footer .width-wrap .mid-area .info-zone:nth-of-type(1) {
  margin: 8px 0 4px;
}
footer .width-wrap .mid-area .info-zone:nth-of-type(2) {
  padding-bottom: 32px;
  margin-bottom: 32px;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.10);
}
footer .width-wrap .bottom-area {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
footer .width-wrap .bottom-area .partner-zone{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
}
footer .width-wrap .bottom-area .partner-zone > p {
  width: 100%;
}
footer .width-wrap .bottom-area .partner-zone img:nth-of-type(1){
  width: 128px;
}
footer .width-wrap .bottom-area .partner-zone img:nth-of-type(2){
  width: 84.733px;
}
footer .width-wrap .bottom-area .partner-zone img:nth-of-type(3){
  width: 43px;
}
footer .width-wrap .bottom-area .partner-zone img:nth-of-type(4){
  width: 77.237px;
}
footer .width-wrap .bottom-area > p {
  white-space: nowrap;
}

/* responsive */
@media all and (max-width: 1460px) {
  .width-wrap.big {
    width: 89.335%;
  }
}
@media all and (max-width: 1300px) {
  .under1300{
    display: block;
  }
}
@media all and (max-width: 1260px) {
  .width-wrap {
    width: 89.335%;
  }
  .top1260 {
    display: none;
  }
  .under1260 {
    display: block;
  }

  h1 {
    font-size: 50px;
  }
}
@media all and (max-width: 1020px) {
  .top1020 {
    display: none !important;
  }
  .under1020 {
    display: block;
  }

  /* header */
  header .width-wrap .logo {
    width: 146px;
  }
  header .width-wrap > .btn {
    width: 137px;
  }

  /* fixed-wrap */
  #fixed-wrap {
    right: 20px;
    bottom: 20px;
    gap: 8px;
  }
  #fixed-wrap .btn {
    width: 150px;
    font-size: 18px;
    padding: 12px 20px;
  }
  #fixed-wrap .btn img {
    width: 20px;
  }
}
@media all and (max-width: 980px) {
  .width-wrap.small {
    width: 89.335%;
  }  

  h1 {
    font-size: 39px;
  }
}
@media all and (max-width: 850px) {
  .top850 {
    display: none;
  }
  .under850{
    display: block;
  }

  /* footer */
  footer .width-wrap .bottom-area {
    flex-direction: column;
    align-items: normal;
    gap: 24px;
  }
}
@media all and (max-width: 700px) {
  .top700 {
    display: none;
  }
  .under700 {
    display: block;
  }

}
@media all and (max-width: 500px) {
  .top500 {
    display: none;
  }
  .under500 {
    display: block;
  }

  h1 {
    font-size: 28px;
    letter-spacing: -0.84px;
  }

  /* label */
  .label {
    font-size: 15px;
    letter-spacing: -0.45px;
  }

  /* fixed-wrap */
  #fixed-wrap {
    flex-direction: row;
    justify-content: space-between;
    width: 89.335%;
    right: 50%;
    transform: translateX(50%);
    padding: 12px 28px;
    border-radius: 1000px;
    backdrop-filter: blur(2px);
    background: linear-gradient(270deg, rgba(71, 182, 255, 0.80) 0%, rgba(10, 75, 195, 0.80) 100%);
    box-shadow: 6px 6px 20px 0 rgba(0, 0, 0, 0.10);
  }
  #fixed-wrap .btn {
    width: initial;
    padding: 0;
    background: transparent;
  }
  #fixed-wrap .btn:nth-child(1) {
    letter-spacing: -0.54px;
    pointer-events: none;
    user-select: none;
  }
  #fixed-wrap .btn:nth-child(2) {
    font-size: 14px;
    letter-spacing: -0.42px;
    padding: 5px 12px;
    border-radius: 1000px;
    background: var(--po);
  }
  #fixed-wrap .btn img {
    display: none;
  }

  /* footer */
  footer .width-wrap .logo {
    width: 161px;
  }
  footer .width-wrap .mid-area .info-zone {
    flex-direction: column;
  }
  footer .width-wrap .mid-area .info-zone li {
    font-weight: 300;
  }
  footer .width-wrap .mid-area .info-zone:nth-of-type(2) {
    padding-bottom: 24px;
    margin-bottom: 24px;
  }
  footer .width-wrap .bottom-area > p {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: -0.39px;
  }
  footer .width-wrap .bottom-area .partner-zone {
    gap: 8px 19.5px;
  }
  footer .width-wrap .bottom-area .partner-zone img:nth-of-type(1) {
    width: 99.273px;
  }
  footer .width-wrap .bottom-area .partner-zone img:nth-of-type(2) {
    width: 71px;
  }
  footer .width-wrap .bottom-area .partner-zone img:nth-of-type(3) {
    width: 38.7px;
  }
  footer .width-wrap .bottom-area .partner-zone img:nth-of-type(4) {
    width: 67.273px;
  }
}