/* RESET */
body {
  overflow: hidden;
  background-color: #fff;
}
a:hover,
a:active {
  text-decoration: none;
}
.contentWrap h1 {
  margin: 0;
}
.contentWrap a {
  display: inline-block;
  box-sizing: border-box;
}
a, button {
  color: inherit;
}
.contentWrap .contTop.topVisNone {
  display: none !important;
}
@media screen and (max-width: 740px) {
  .contentWrap {
    padding-top: 67px;
  }
}


/* CSS VARIABLES */
:root {
  /* FONT */
  --head-regular: "HyundaiRegular";
  --head-medium: "HyundaiMedium";
  --head-bold: "HyundaiBold";
  --text-regular: "HyundaiTextRegular";
  --text-medium: "HyundaiTextMedium";

  /* COLOR */
  --hyundai-blue: #022C5F;
  --hyundai-active-blue: #0EB0D3;
  --sand: #E4DCD3;
  --light-sand: #F6F4F3;
  --text-color-weak: #787878;
  --bg-inactive: #D6D6D6;
}

@media screen and (min-width: 741px) {
  :root {
    /* common */
    --screen-w: 1920;
    --layout-width: 1120px;
    --layout-total-width: 1240; /* 1120 + (60 * 2) */
    
    /* spaces */
    --space-20: clamp(
      calc((20 - (20 * 0.19)) * 1px),
      calc(20 / var(--layout-total-width) * 100 * 1vw),
      20px
    );
    --space-30: clamp(
      calc((30 - (30 * 0.19)) * 1px),
      calc(30 / var(--layout-total-width) * 100 * 1vw),
      30px
    );
    --space-40: clamp(
      calc((40 - (40 * 0.19)) * 1px),
      calc(40 / var(--layout-total-width) * 100 * 1vw),
      40px
    );
    --space-50: clamp(
      calc((50 - (50 * 0.19)) * 1px),
      calc(50 / var(--layout-total-width) * 100 * 1vw),
      50px
    );
    --space-80: clamp(
      calc((80 - (80 * 0.19)) * 1px),
      calc(80 / var(--layout-total-width) * 100 * 1vw),
      80px
    );

    /* Layout */
    --layout-padding-x: clamp(
      calc((60 - (60 * 0.19)) * 1px),
      calc(60 / var(--layout-total-width) * 100 * 1vw),
      60px
    );
    --layout-content-gap: clamp(
      calc((150 - (150 * 0.19)) * 1px),
      calc(150 / var(--layout-total-width) * 100 * 1vw),
      150px
    );

    /* TITLE */
    /* size */
    --title-xxxs: clamp(
      calc((20 - (20 * 0.19)) * 1px),
      calc(20 / var(--layout-total-width) * 100 * 1vw),
      20px
    );
    --title-xxs: clamp(
      calc((29 - (29 * 0.19)) * 1px),
      calc(29 / var(--layout-total-width) * 100 * 1vw),
      29px);
    --title-xs: clamp(
      calc((38 - (38 * 0.19)) * 1px),
      calc(38 / var(--layout-total-width) * 100 * 1vw),
      38px);
    --title-sm: clamp(
      calc((50 - (50 * 0.19)) * 1px),
      calc(50 / var(--layout-total-width) * 100 * 1vw),
      50px);
    --title-md: clamp(
      calc((70 - (70 * 0.19)) * 1px),
      calc(70 / var(--layout-total-width) * 100 * 1vw),
      70px);
    --title-lg: clamp(
      calc((126 - (126 * 0.19)) * 1px),
      calc(126 / var(--screen-w) * 100 * 1vw),
      126px);
    --title-xl: clamp(
      calc((150 - (150 * 0.19)) * 1px),
      calc(150 / var(--screen-w) * 100 * 1vw),
      150px);
    /* line height */
    --title-line-height-xxs: 1.263em;
    --title-line-height-xs: 1.263em;
    --title-line-height-sm: 1.04em;
    --title-line-height-md: 1.186em;
    --title-line-height-lg: 0.952em;
    --title-line-height-xl: 0.868em;

    /* DESCRIPTION */
    /* size */
    --desc-xs: clamp(11px, calc(12 / var(--layout-total-width) * 100 * 1vw), 12px);
    --desc-sm: clamp(15px, calc(16 / var(--layout-total-width) * 100 * 1vw), 16px);
    --desc-md: clamp(16px, calc(17 / var(--layout-total-width) * 100 * 1vw), 17px);
    --desc-lg: clamp(17.6px, calc(20 / var(--layout-total-width) * 100 * 1vw), 20px);
    /* line height */
    --desc-line-height: 1.7em;
  }
}
@media screen and (max-width: 740px) {
  :root {    
    /* common */    
    --screen-w: 360;
    --layout-total-width: var(--screen-w);

    /* spaces */
    --space-10: clamp(10px, calc(10 / var(--screen-w) * 100 * 1vw), 1000vw);
    --space-15: clamp(15px, calc(15 / var(--screen-w) * 100 * 1vw), 1000vw);
    --space-20: clamp(20px, calc(20 / var(--screen-w) * 100 * 1vw), 1000vw);
    --space-30: clamp(30px, calc(30 / var(--screen-w) * 100 * 1vw), 1000vw);
    --space-40: clamp(40px, calc(40 / var(--screen-w) * 100 * 1vw), 1000vw);
    --space-50: clamp(50px, calc(50 / var(--screen-w) * 100 * 1vw), 1000vw);
    /* Layout */
    --layout-padding-x: var(--space-15);
    --layout-content-gap: clamp(50px, calc(50 / var(--screen-w) * 100 * 1vw), 1000vw);

    /* TITLE  */
    /* size */
    --title-xxxs: clamp(17px, calc(17 / var(--screen-w) * 100 * 1vw), 1000vw);
    --title-xxs: clamp(17px, calc(17 / var(--screen-w) * 100 * 1vw), 1000vw);
    --title-xs: clamp(22px, calc(22 / var(--screen-w) * 100 * 1vw), 1000vw);
    --title-sm: clamp(24px, calc(24 / var(--screen-w) * 100 * 1vw), 1000vw);
    --title-md: clamp(27px, calc(27 / var(--screen-w) * 100 * 1vw), 1000vw);
    --title-lg: clamp(36px, calc(36 / var(--screen-w) * 100 * 1vw), 1000vw);
    --title-xl: clamp(36px, calc(36 / var(--screen-w) * 100 * 1vw), 1000vw);
    /* line height */
    --title-line-height-xxs: 1.2em;
    --title-line-height-xs: 1.31em;
    --title-line-height-sm: 1.31em;
    --title-line-height-md: 1.15em;
    --title-line-height-lg: 1.19em;
    --title-line-height-xl: 1em;

    /* DESCRIPTION */
    /* size */
    --desc-xs: clamp(12px, calc(12 / var(--screen-w) * 100 * 1vw), 1000vw);
    --desc-sm: clamp(13px, calc(13 / var(--screen-w) * 100 * 1vw), 1000vw);
    --desc-md: var(--desc-sm);
    --desc-lg: clamp(14px, calc(14 / var(--screen-w) * 100 * 1vw), 1000vw);
    /* line height */
    --desc-line-height: 1.53em;
  }
}
/* UTILS */
.bg-sand {
  background-color: var(--sand) !important;
}
.text-head-regular {
  font-family: var(--head-regular) !important;
}
@media screen and (min-width: 741px) {
  .mobile-only-inline {
    display: none;
  }
  .mobile-only {
    display: none !important;
  }
}
@media screen and (max-width: 740px) {
  .mobile-only-inline {
    display: inline;
  }
  .desktop-only {
    display: none !important;
  }
}

/* LAYOUT */
.content-inner {
  position: relative;
  max-width: 100%;
  padding: 0 var(--layout-padding-x);
  margin: 0 auto;
}
.content-inner.vtc-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}
.content-inner.hrz-center {
  display: flex;
  justify-content: center;
}

/* TITLE */
.title {
  font-family: var(--head-medium);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.title-xxxs {
  font-size: var(--title-xxxs);
  line-height: var(--title-line-height-xxs);
}
.title-xxs {
  font-size: var(--title-xxs);
  line-height: var(--title-line-height-xxs);
}
.title-xs {
  font-size: var(--title-xs);
  line-height: var(--title-line-height-xs);
}
.title-sm {
  font-size: var(--title-sm);
  line-height: var(--title-line-height-sm);
}
.title-md {
  font-size: var(--title-md);
  line-height: var(--title-line-height-md);
}
.title-lg {
  font-size: var(--title-lg);
  line-height: var(--title-line-height-lg);
}
.title-xl {
  font-size: var(--title-xl);
  line-height: var(--title-line-height-xl);
}
@media screen and (min-width: 741px) {
  .title-md-lg {
    font-size: var(--title-md);
    line-height: var(--title-line-height-md);
  }
  .title-lg-xl {
    font-size: var(--title-lg);
    line-height: var(--title-line-height-lg);
  }
}

@media screen and (max-width: 740px) {
  .title-sm:not(:last-child),
  .title-md-lg:not(:last-child) {
    margin-bottom: var(--space-15);
  }
  .title-md-lg {
    font-size: var(--title-lg);
    line-height: var(--title-line-height-lg);
  }
  .title-lg-xl {
    font-size: var(--title-xl);
    line-height: var(--title-line-height-xl);
  }
}


/* DESCRIPTION */
.desc {
  font-family: var(--text-regular);
  line-height: var(--desc-line-height);
  letter-spacing: -0.02em;
  word-break: keep-all;
}
.desc-xs {
  font-size: var(--desc-xs);
}
.desc-sm {
  font-size: var(--desc-sm);
}
.desc-md {
  font-size: var(--desc-md);
}
.desc-lg {
  font-size: var(--desc-lg);
}
@media screen and (min-width: 741px) {
  .desc:nth-child(n + 2) {
    margin-top: 20px;
  }
  .desc-sm-xs {
    font-size: var(--desc-sm);
  }
}
@media screen and (max-width: 740px) {
  .desc:nth-child(n + 2) {
    margin-top: 8px;
  }
  .desc + .desc {
    margin-top: 15px;
  }
  .desc-sm-xs {
    font-size: var(--desc-xs);
  }
}

/* TEXT BOX */
.box-text.align-center {
  text-align: center;
}
@media screen and (min-width: 741px) {
  .box-text.align-center-pc {
    text-align: center;
  }
  .box-text.align-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
}

/* NOTICE BOX */
.box-notice {
  text-align: right;
  color: var(--text-color-weak);
}
@media screen and (min-width: 741px) {
  .box-notice.pos-bottom {
    margin-top: clamp(
      calc((30 - (30 * 0.19)) * 1px),
      calc(30 / var(--layout-total-width) * 100 * 1vw),
      30px
    );
  }
}
@media screen and (max-width: 740px) {
  .box-notice.pos-bottom {
    margin-top: var(--space-15);
  }
}

/* BUTTON */
.wrap-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
}
/* basic */
.button.basic {
  display: inline-block;
  min-width: 220px;
  padding: 23px 20px 21px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  font-family: var(--text-regular);
  font-size: var(--desc-lg);
  line-height: 1;
  text-align: center;
  transition: backgroundColor 0.3s ease-out, color 0.3s ease-out;
}
.button.basic.color-white {
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #fff;
}
.button.basic.bg-black {
  background-color: #000;
  color: #fff;
}
.button.basic.bg-blue {
  border: none;
  background-color: var(--hyundai-blue);
  color: #fff;
}
/* round */
.button.round {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border-radius: 100%;
}
/* round icon buttons */
.button.round > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* text */
.button.text.weak {
  opacity: 0.6;
  text-decoration: underline;
  text-decoration-skip-ink: none;
  font-family: var(--text-regular);
}
@media screen and (min-width: 741px) {
  .wrap-buttons {
    margin-top: var(--space-30);
  }
  .wrap-buttons:has(.button.basic) {
    margin-top: var(--space-40);
    gap: var(--space-40);
  }
  .wrap-buttons:has(.button.round) {
    gap: var(--space-50);
  }
  .wrap-buttons:has(.button.text) {
    gap: var(--space-30);
  }
  /* basic */
  .desc + .button.basic {
    margin-top: var(--space-50);
  }
  /* round */
  .button.round {
    width: var(--space-80);
    height: var(--space-80);
  }
  /* text */
  .button.text.weak {
    font-size: var(--desc-sm);
  }
}
@media screen and (max-width: 740px) {
  .wrap-buttons {
    margin-top: var(--space-15);
  }
  .wrap-buttons:has(.button.basic) {
    gap: var(--space-15);
  }
  .wrap-buttons:has(.button.round) {
    gap: var(--space-30);
  }
  .wrap-buttons:has(.button.text) {
    gap: var(--space-20);
  }
  /* basic */
  .button.basic {
    min-width: clamp(140px, calc(140 / var(--screen-w) * 100 * 1vw), 1000vw);
    padding:
      clamp(13px, calc(13 / var(--screen-w) * 100 * 1vw), 1000vw)
      clamp(10px, calc(10 / var(--screen-w) * 100 * 1vw), 1000vw)
      clamp(12px, calc(12 / var(--screen-w) * 100 * 1vw), 1000vw);
    font-size: --desc-sm;
  }
  .desc + .button.basic {
    margin-top: 15.625vw;
  }
  /* round */
  .button.round {
    width: clamp(48px, calc(48 / var(--screen-w) * 100 * 1vw), 1000vw);
    height: clamp(48px, calc(48 / var(--screen-w) * 100 * 1vw), 1000vw);
  }
  /* text */
  .button.text.weak {
    font-size: var(--desc-md);
  }
  .button-has-icon {
    display: flex;
    align-items: center;
    gap: 0.6em;
    font-size: var(--desc-xs);
  }
  .button-has-icon [class*=icon_arr_] {
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    margin-bottom: -0.2em;
  }
  .button-has-icon [class*=icon_arr_]:after {
    right: 0;
    width: 100%;
    height: 100%;
    border-width: 2px;
  }
}

/* IMG */
.box-media > img,
.box-media > video,
.video-wrap .thumbnail {
  display: block;
  height: auto;
  max-width: 100%;
  min-height: 100%;
}
@media screen and (max-width: 740px) {
  .box-media.qr {
    width: 75px;
    height: 75px;
  }
}

/* motion */
  /* fade zoom */
[data-motion="fadeZoom"] {
  transition: opacity 0.55s ease-out, transform 0.55s ease-out;
}
[data-motion="fadeZoom"]:not(.motion-on) {
  opacity: 0;
  transform: scale(0.9);
}

/* key-visual */
.keyvisual {
  overflow: hidden;
  position: relative;
}
.keyvisual .box-media {
  height: 100%;
}
.keyvisual .box-media > img,
.keyvisual .box-media > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.keyvisual .content-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  color: #fff;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
/* full */
.keyvisual.full {
  height: 100vh; /* for naver app */
  height: 100svh;
}
.keyvisual.full .box-media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
@media screen and (min-width: 741px) {
  /* basic */
  .keyvisual.basic {
    height: clamp(
      calc((700 - (700 * 0.19)) * 1px),
      calc(700 / var(--layout-total-width) * 100 * 1vw),
      700px
    );
  }
}
@media screen and (max-width: 740px) {
  .keyvisual.basic .box-media{aspect-ratio:45/38;}
  /* full */
  .keyvisual.full  {
    max-height: 200vw;
  }
  /* only mobile full */
  .keyvisual.basic.mobile-full  {
    height: clamp(660px, calc(660 / var(--screen-w) * 100 * 1vw), 100svh);
  }
  .keyvisual.basic.mobile-full .box-media{aspect-ratio:unset;}
}

/* 컴포넌트 공통 레이아웃 */
[class^="cmpnt-"].has-vtc-pd {
  padding-top: var(--layout-content-gap);
  padding-bottom: var(--layout-content-gap);
}
[class^="cmpnt-"] + [class^="cmpnt-"]:not([class*=has-vtc-pd]):not([class*=has-bottom-pd]) {
  margin-top: var(--layout-content-gap);
}
[class*=has-bottom-pd] {
  padding-bottom: var(--layout-content-gap);
}

/* cmpnt-shuffle-images */
@media screen and (min-width: 741px) {
  .cmpnt-shuffle-imgs .area-shuffle-img {
    position: relative;
  }
  .cmpnt-shuffle-imgs .shuffle-img {
    position: absolute;
  }
  .cmpnt-shuffle-imgs .shuffle-img .box-media {
    overflow: hidden;
  }
  .cmpnt-shuffle-imgs .shuffle-img img {
    transition: transform 0.55s ease-out;
  }
  .cmpnt-shuffle-imgs .shuffle-img:hover {
    z-index: 1;
  }
  .cmpnt-shuffle-imgs .shuffle-img:hover img {
    transform: scale(1.05);
  }
  .cmpnt-shuffle-imgs .shuffle-img .box-media.fill {
    height: 100%;
  }
  .cmpnt-shuffle-imgs .shuffle-img .box-media.fill video {
    min-height: 100%;
    object-fit: cover;
  }
}
@media screen and (max-width: 740px) {
  .cmpnt-shuffle-imgs .shuffle-img:nth-child(n + 2) {
    margin-top: var(--layout-content-gap);
  }
}

/* cmpnt-banner-slim */
.cmpnt-banner-slim {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  color: #fff;
}
.cmpnt-banner-slim.text-black {
  color: #000;
}
.cmpnt-banner-slim.center {
  text-align: center;
}
.cmpnt-banner-slim .box-media.bg img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cmpnt-banner-slim.theme-purple {
  color: #fff;
  background: linear-gradient(92deg, #A469EF 0%, #3D6BE3 71.98%);
}
.cmpnt-banner-slim.theme-purple-light {
  background: linear-gradient(92deg, #B67FFB 0%, #749BFF 79.7%);
}
.cmpnt-banner-slim.theme-deep-blue {
  background: linear-gradient(94deg, #392DC2 2.67%, #171589 47.51%, #000235 96.14%);
}
.cmpnt-banner-slim.theme-red-blue {
  background: linear-gradient(to right, rgba(214, 30, 41, 1) 0%, rgba(252, 77, 87, 1) 30%, rgba(78, 58, 156, 1) 80%);
}
@media screen and (min-width: 741px) {
  .cmpnt-banner-slim:not(.auto-height) {
    height: clamp(
      calc((400 - (400 * 0.19)) * 1px),
      calc(400 / var(--layout-total-width) * 100 * 1vw),
      400px
    );
  }
}
@media screen and (max-width: 740px) {
  .cmpnt-banner-slim:not(.auto-height) {
    min-height: clamp(150px, calc(150 / var(--layout-total-width) * 100 * 1vw), 1000vw);
    padding: var(--space-30) 0;
  }
}

/* iframe video 관련 */
.video-wrap .video {
  position: relative;
}
.video-wrap .video iframe,
.video-wrap .video video {
  position: absolute;
}
.video-wrap .video video {
  object-fit: cover;
}
.video-wrap .video .icon-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  cursor: pointer;
}
.video-wrap .video .icon-play > img {
 width: 60px;
 height: 60px;
}
@media screen and (min-width: 741px) {
  .video-wrap .video:has(iframe) {
    padding-bottom:56.25%;
  }
  .video-wrap .video:has(video) {
    padding-bottom:75%;
  }
}
@media screen and (max-width: 740px) {
  .video-wrap .video:has(iframe) {
    padding-bottom:60.605%;
  }
  .video-wrap .video:has(video) {
    padding-bottom:75%;
  }
  .video-wrap .video .icon-play > img {
    width: 50px;
    height: 50px;
  }
}