/**
 * Innovation > 공통 css > en
 * version : 20260209
*/

body {background-color: #fff;}
.topArea{height:auto; padding-top:82px;}
.topArea .breadCrumb{position:static; margin-top:16px;}
.topArea .sharing{display:none;}

img:not([src]):not([srcset]){visibility:hidden;}

:root {
  --cont-max-width:1120px;
}

/* swiper */
:root {
  --swiper-pagination-bullet-size: 12px;
  --swiper-pagination-bullet-horizontal-gap: 6px;
  --swiper-theme-color: #02B0D3;
  --swiper-pagination-bullet-inactive-color:#D6D6D6;
  --swiper-pagination-bullet-inactive-opacity:1;
  --swiper-navigation-color:#fff;
  --swiper-navigation-size: 57px;
  --swiper-pagination-bottom:44px;
}
.swiper-pagination{line-height:1;}
.swiper-button span{opacity:0;font-size:0}
.swiper-pagination-fraction, .swiper-pagination-custom, 
.swiper-horizontal > .swiper-pagination-bullets, 
.swiper-pagination-bullets.swiper-pagination-horizontal{bottom:0;font-size:0;}

/* title */
.inno-detail__title{max-width:1120px; width:100%; margin:0 auto; padding:46px 0 20px;}
.inno-detail__title h1{font-family:'HyundaiMedium'; font-size:58px; line-height:78px; letter-spacing:-1.16px;}
.inno-detail__title h1 span{display:block; font-size:16px; color:#999; line-height:32px; letter-spacing:-0.48px;}

/* tab */
.inno-detail__tab{border-bottom:1px solid #ccc; background:#fff;}
.inno-detail__tab ul{max-width:1120px; width:100%; margin:0 auto; padding-top:35px; display:flex; gap:60px;}
.inno-detail__tab li{position:relative;}
.inno-detail__tab li a{display:block; padding-bottom:26px; font-family:'HyundaiMedium'; font-size:20px; line-height:20px; letter-spacing:-0.4px; color:#999;}
.inno-detail__tab li a:hover, .inno-detail__tab li a:focus{text-decoration:none;}
.inno-detail__tab li.on a{color:#0E3168;}
.inno-detail__tab li.on::after{content:''; position:absolute; left:0; right:0; bottom:-1px; height:3px; background:#0E3168;}
.inno-detail__tab.fixed{position:fixed; top:0; width:100%; z-index:101;}

/* detail visual */
.detail-visual__elem{position:sticky; top:30px; max-width:1120px; width:100%; margin:0 auto; padding:100px 0; display:flex; justify-content:space-between;}
.detail-visual__tit{font-family:'HyundaiMedium'; font-size:44px; line-height:52px; letter-spacing:-0.88px; }
.detail-visual__desc{max-width:750px; font-family:'HyundaiMedium'; font-size:20px; line-height:34px; letter-spacing:-0.4px;}
.detail-visual__desc p + p{margin-top:26px;}
.detail-visual__img{overflow:hidden; width:100%;}
.detail-visual__img img{object-fit:cover; width:100%; height:auto;}
.detail-visual__img + .inno-detail__elem{margin-top:100px;}

/* inno-detail */
.inno-detail__section{padding-bottom:100px;}
.inno-detail__inner{max-width:var(--cont-max-width); width:100%; margin:0 auto;}
.inno-detail__tit{font-family:'HyundaiMedium'; font-size:30px; line-height:40px; letter-spacing:-0.6px;}
.inno-detail__tit a:hover, .inno-detail__tit a:focus{text-decoration:none;}
.inno-detail__desc{font-family:'HyundaiTextRegular'; font-size:17px; line-height:30px; letter-spacing:-0.34px;}
.inno-detail__desc > p + p{margin-top:26px;}
.inno-detail__desc .desc{margin-top:26px; font-size:14px; line-height:26px;}
.inno-detail__tit + .inno-detail__desc{margin-top:26px;}
.inno-detail--bg{padding:100px 0; background:#F5F3F1;}
.inno-detail--img + .inno-detail__elem{margin-top:60px;}
.inno-detail__media{margin-bottom:60px;}
.inno-detail__media iframe{aspect-ratio:16/9;}

/* swiper-gallery__wrap */
.swiper-gallery__wrap{margin:100px 0;}
.swiper-gallery__wrap .swiper{margin-bottom:60px; padding-bottom:72px;}
.swiper-gallery__wrap .swiper-slide{max-width:1120px; margin:0 auto;}

/* text */
.txt-type--link{display:inline-block; font-family:'HyundaiTextRegular'; color:#19569F; text-decoration:underline;}
.txt-type--link:hover{color:#19569F;}

/* detail-hashtag */
.detail-hashtag__txt li{font-family:'HyundaiMedium';}
.detail-hashtag__txt a{color:#E4DCD3;}
.detail-hashtag__txt a:hover, .detail-hashtag__txt a:focus{text-decoration:none;}

/* inno-article */
.inno-article__elem{overflow:hidden; margin-top:100px;}
.inno-article__row{position:relative; display:flex; gap:60px; min-height:450px;}
.inno-article__row + .inno-article__row{margin-top:100px;}
.inno-article__row .inno-detail__tit{padding-bottom:40px; border-bottom:1px solid rgba(0, 0, 0, 0.2);}
.inno-article__row:nth-of-type(2) .inno-detail__img{position:absolute; left:50%; top:0; margin-left:180px;}
.inno-article__row:nth-of-type(2) .inno-detail__elem{max-width:680px;}

@media print, screen and (min-width: 741px) and (max-width: 20000px) {
  /* gnb */
  .gnb{background: #fff; border-bottom:1px solid #ccc;}
  .gnb a{color:#999;} 
  .gnb .logo-default{display: block;}
  .gnb::after, .gnb .logo-wh{display:none;}
  .gnb .btnGlobal{background-image:url('/content/dam/hyundai/ww/en/images/main/new/common/btn_topmenu_language-gy.png');}
  .gnb .btnGlobal:hover{background-image:url('/content/dam/hyundai/ww/en/images/main/new/common/btn_topmenu_language-bl.png');}
  .gnb .btnChannel{background-image:url('/content/dam/hyundai/ww/en/images/main/new/common/btn_topmenu_Channelh-gy.png');}
  .gnb .btnChannel:hover{background-image:url('/content/dam/hyundai/ww/en/images/main/new/common/btn_topmenu_Channelh-bl.png');}
  .gnb .btnOpenSearch{background-image:url('/content/dam/hyundai/ww/en/images/main/new/common/btn_topmenu_search-gy.png');}
  .gnb .btnOpenSearch:hover{background-image:url('/content/dam/hyundai/ww/en/images/main/new/common/btn_topmenu_search-bl.png');}
  .gnb .gnbLang a:before{background:#999;}

  /* motion */
  .detail-visual__elem[data-type="onActive"],
  .inno-detail--motion[data-type="onActive"],
  .inno-detail__media[data-type="onActive"]{transform:translateY(20px); opacity:0; transition:all 0.5s ease-in-out;}
  .detail-visual__elem[data-type="onActive"].active,
  .inno-detail--motion[data-type="onActive"].active,
  .inno-detail__media[data-type="onActive"].active{transform: translateY(0); opacity: 1;}

  .detail-visual__img .figure{position:relative; z-index:1; aspect-ratio:32/9;}
  .detail-visual__img.active .figure img{transition:opacity 0.2s ease-in-out;}

  /* title */
  .inno-detail__title h1{margin-left:-3px;}
  .inno-detail__title h1 span{padding-left:3px;}

  /* swiper-gallery__wrap */
  .swiper-gallery__wrap .swiper-slide img{transform:scale(80%); transition: all 0.3s;}
  .swiper-gallery__wrap .swiper-slide.swiper-slide-active img{transform:scale(100%);}
  .swiper-gallery__wrap .swiper-slide.swiper-slide-prev img{transform-origin:top right;}
  .swiper-gallery__wrap .swiper-slide.swiper-slide-next img{transform-origin:top left;}
  
  /* inno-detail */
  .inno-detail--img[data-scroll] {
    transform: translateY(calc(var(--viewport-y) * -30px));
    transition: all 0.5s ease-in-out;
    will-change: transform;
  }
  .inno-detail--img[data-scroll="in"] {opacity:1;}
  .inno-detail--img[data-scroll="out"] {opacity:0;}

  /* inno-detail list */
  .inno-detail__list{margin-top:100px;}
  .inno-detail__list > div{display:flex; justify-content:space-between;}
  .inno-detail__list .list-type--col2 .list-type--item{max-width:550px;}
  .inno-detail__list .list-type--col3 .list-type--item{max-width:353px;}
  .inno-detail__list .list-type--item .inno-detail__elem{margin-top:30px; transform:translateY(20px); opacity:0; transition:all 0.4s ease-in-out 0.5s;}
  .inno-detail__list .list-type--item.active .inno-detail__elem{transform: translateY(0); opacity: 1;}
  .inno-detail__list .list-type--item.active:nth-child(2) .inno-detail__elem{transition-delay:0.6s;}
  .inno-detail__list .list-type--item.active:nth-child(3) .inno-detail__elem{transition-delay:0.7s;}

  /* detail-hashtag */
  .detail-hashtag__txt li{font-size:30px; line-height:42px; letter-spacing:-0.6px;}
  .detail-hashtag__txt a:hover{color:#002C5F; text-decoration:underline;}

  /* inno-item img */
  .inno-item--img{overflow:hidden;}
  .inno-item--img figure{transform:translateY(100%);}
  .active .inno-item--img figure{animation:imgUp 1s cubic-bezier(0.075, 0.82, 0.55, 1) forwards 0.2s;}
  .inno-item--img figure img{transform:scale(1); transition:transform 1s cubic-bezier(0.075, 0.82, 0.55, 1); transform-origin:center;}
  .inno-item--img figure img:hover{transform:scale(1.1);}
  .list-type--item:nth-child(2) .inno-item--img figure{animation-delay:0.4s;}
  .list-type--item:nth-child(3) .inno-item--img figure{animation-delay:0.6s;}
  @keyframes imgUp {
    0% {
      transform:translateY(100%);
      opacity:0;
    }
    100% {
      transform:translateY(0);
      opacity:1 !important;
    }
  }
}

/* mobile */
@media screen and (min-width:0) and (max-width:740px){
  [class*="tit"]:not(.br-m) > br{display:block;}

  .gnb{min-height:67px;}
  .gnb.fixed{position:static}
  .gnb.fixed.active{position:fixed}
  .contentWrap{padding-top:67px;}
  .topArea{display:none;}

  /* swiper */
  :root {
    --swiper-pagination-bullet-size: 8px;
    --swiper-pagination-bullet-horizontal-gap: 3px;
    --swiper-navigation-size: 5px !important;
    --swiper-pagination-bottom:15px;
  }
  .swiper-slide{aspect-ratio:165/92;}
  .swiper-slide img{aspect-ratio:165/92; height:auto}

  /* title */
  .inno-detail__title{padding:50px 15px 30px;}
  .inno-detail__title h1{font-size:38px; line-height:38px; letter-spacing:-0.76px;}
  .inno-detail__title h1 span{margin-bottom:5px; font-size:14px; line-height:21px; letter-spacing:-0.32px;}

  /* tab */
  .inno-detail__tab{border:none;}
  .inno-detail__tab::after{content:''; display:block; margin-top:-9px; border-bottom:1px solid #ccc;}
  .inno-detail__tab ul{display:block; position:relative; overflow-x:scroll; white-space:nowrap; padding:10px 0 8px;}
  .inno-detail__tab li{display:inline-block; margin:0 15px;}
  .inno-detail__tab li a{padding-bottom:10px; font-size:13px; line-height:26px; letter-spacing:-0.26px;}
  .inno-detail__tab li.on::after{bottom:0; height:2px; z-index:1;}
  .inno-detail__tab.fixed{position:fixed;}
  .inno-detail__tab.fixed + .inno-detail__contents{padding-top:46px;}

  /* detail visual */
  .detail-visual__elem{position:static; padding:50px 15px; flex-direction:column; gap:30px;}
  .detail-visual__tit{width:100%; font-family:'HyundaiBold'; font-size:28px; line-height:32px; letter-spacing:-0.56px; }
  .detail-visual__desc{font-size:14px; line-height:19px; letter-spacing:-0.28px;}
  .detail-visual__desc p + p{margin-top:15px;}
  .detail-visual__img, .detail-visual__img > div, 
  .detail-visual__img .figure, .detail-visual__img img{aspect-ratio:45/38;}

  /* inno-detail */
  .inno-detail__contents .inno-detail__section:first-child{padding-bottom:50px;}
  .inno-detail__contents .inno-detail__section:last-child{margin-bottom:100px;}
  .inno-detail__section {padding-bottom:0;}
  .inno-detail__section + .inno-detail__section{margin-bottom:50px;}
  .inno-detail__inner{padding:0 15px;}
  .inno-detail__tit{font-size:16px; line-height:21px;}
  .inno-detail__desc{font-size:14px; line-height:19px; letter-spacing:-0.28px;}
  .inno-detail__desc > p + p{margin-top:15px;}
  .inno-detail__desc .desc{margin-top:30px; font-size:12px; line-height:17px;}
  .inno-detail__tit + .inno-detail__desc{margin-top:15px;}
  .inno-detail--bg{padding:50px 0;}
  .inno-detail--img + .inno-detail__elem{margin-top:30px;}
  .inno-detail__media{margin-bottom:30px;}
  .inno-detail__media iframe{width:100%; height:auto;}

  /* swiper-gallery__wrap */
  .swiper-gallery__wrap{margin:50px 0;}
  .swiper-gallery__wrap .swiper{margin-bottom:30px; padding:0 15px 38px;}

  /* inno-detail list */
  .inno-detail__list{position:relative; margin-top:50px; padding-bottom:38px;}
  .inno-detail__list .inno-item--img, .inno-detail__list .inno-item--img figure{aspect-ratio:165/92;}
  .inno-detail__list .inno-detail__tit{margin-top:30px; letter-spacing:-0.32px;}
  .inno-detail__list .list-type--col2 .inno-detail__tit{margin-top:15px; text-align:center;}

  /* detail-hashtag */
  .detail-hashtag__txt li{margin-bottom:0; font-size:16px; line-height:21px; letter-spacing:-0.32px;}
  .detail-hashtag .detail-hashtag__img .item{aspect-ratio:165/92;}

  /* inno-article */
  .inno-article__elem{margin-top:50px;}
  .inno-article__row{display:block; min-height:auto;}
  .inno-article__row + .inno-article__row{margin-top:50px;}
  .inno-article__row .inno-detail__tit{padding:30px 0;}
  .inno-article__row:nth-of-type(2) .inno-detail__img{position:static; margin:0;}
}