/**
 * Innovation > design.css > ko
 * version : 20260209
*/

/* detail-hashtag */
.detail-hashtag{position:relative; max-width:1120px; margin:0 auto; padding:100px 0;}
.detail-hashtag__img{display:flex; justify-content:space-between; flex-direction:row-reverse;}
.detail-hashtag__img .inno-detail__elem + .inno-detail__elem{margin-top:219px;}
.detail-hashtag__img .inno-detail__desc strong{display:block;}

/* design */
.detail-design{min-height:2196px;}

/* inno-detail */
.inno-detail--bg{min-height:942px;}

/* detail-concept */
.detail-concept{position:relative; overflow:hidden;}
.detail-concept .inno-detail__inner{position:absolute; left:50%; top:0; bottom:0; margin-left:-560px; padding:100px 0; z-index:1;}
.detail-concept .inno-detail__tit{font-family:'HyundaiKRTextRegular'; color:#fff; font-size:32px; line-height:51px; letter-spacing:-0.64px;}
.detail-concept .inno-detail__tit span{font-family:'HyundaiKRMedium'; text-decoration:underline;}
.detail-concept .inno-detail__desc{color:#fff;}
.detail-concept__text{position:absolute; left:0; right:0; bottom:100px; color:#fff;}
.detail-concept__text ul{display:flex; gap:64px;}
.detail-concept__text ul li{position:relative; font-family:'HyundaiKRMedium'; font-size:21px; letter-spacing:-0.42px; line-height:60px;}
.detail-concept__text ul li::before{content:''; position:absolute; left:-32px; top:0; width:1px; height:60px; background:#575757;}
.detail-concept__text .inno-detail__desc{margin-top:24px;}

/* concept car */
.inno-detail__section:nth-child(2) .detail-visual__elem{padding-bottom:60px;}

.detail-conceptCar{position:relative; overflow:hidden;}
.detail-conceptCar .tab-content{display:none;}
.detail-conceptCar .tab-content.on{display:block;}
.detail-conceptCar__recently{position:relative; padding-top:96px;}
.detail-conceptCar__recently::before{content:''; position:absolute; left:0; right:0; top:56px; height:1px; background:#C5C5C5;}
.detail-conceptCar__recently .tab{position:absolute; left:50%; top:0; margin-left:-560px;}
.detail-conceptCar__recently .tab li{display:inline-block; padding:0 50px; font-size:20px; line-height:56px;}
.detail-conceptCar__recently .tab li:first-child{padding-left:0;}
.detail-conceptCar__recently .tab li:hover{color:#00AAD2; cursor:pointer; text-decoration:none;}
.detail-conceptCar__recently .tab li.on{font-family:'HyundaiKRMedium'; color:#00AAD2;}

.conceptCar__swiper{position:relative; overflow:hidden; max-width:1120px; margin:0 auto; padding-bottom:100px;}
.conceptCar__swiper a{position:relative; display:block;}
.conceptCar__swiper .txt{position:absolute; left:50px; bottom:60px; font-family:'HyundaiKRMedium'; color:#fff;}
.conceptCar__swiper .txt p{margin-bottom:20px; font-size:30px; line-height:1; letter-spacing:-0.6px;}
.conceptCar__swiper .txt span{position:relative; display:inline-block; font-size:18px; line-height:1; letter-spacing:-0.36px;}
.conceptCar__swiper .txt span::after{content:''; position:absolute; right:-29px; top:-3px; width:24px; height:24px; background:url('/content/dam/hyundai/ww/en/images/company/innovation/design/btn-arrow-more.svg') no-repeat 0 0; background-size:100%;}

.conceptCar__swiper .swiper-pagination-lock{display:block;}
.conceptCar__swiper .swiper-pagination-bullets.swiper-pagination-horizontal{bottom:50px;}
.conceptCar__swiper .swiper-pagination-bullet:only-child{display:inline-block !important;}
.conceptCar__swiper .swiper-button-next, .conceptCar__swiper .swiper-button-prev{width:60px; height:60px; z-index:1;}
.conceptCar__swiper .swiper-button-prev{background-image:url('/content/dam/hyundai/ww/en/images/main/new/common/arrow_left.png');-webkit-background-size:21px 42px;background-size:21px 42px;left:50px;width:21px;height:42px;margin-top:-71px;}
.conceptCar__swiper .swiper-button-next{background-image:url('/content/dam/hyundai/ww/en/images/main/new/common/arrow_right.png');-webkit-background-size:21px 42px;background-size:21px 42px;right:50px;width:21px;height:42px;margin-top:-71px;}
.conceptCar__swiper .swiper-button-next:after, .conceptCar__swiper .swiper-button-prev:after,
.conceptCar__swiper .swiper-button-disabled{display:none;}

.detail-conceptCar__before button{position:absolute; left:50%; top:18px; width:130px; margin-left:430px; padding-right:26px; font-size:20px; line-height:1; letter-spacing:-0.4px;}
.detail-conceptCar__before button:hover, 
.detail-conceptCar__before button:focus{text-decoration:none;}
.detail-conceptCar__before button::after{content:''; position:absolute; right:0; top:6px; width:11px; height:8px; background:url('/content/dam/hyundai/ww/en/images/company/innovation/design/icon-arrow-select.svg') no-repeat 0 0; background-size:100%;}
.detail-conceptCar__before button.active{font-family:'HyundaiKRMedium'; color:#00AAD2;}
.detail-conceptCar__before .tab{overflow-y:scroll; position:absolute; left:50%; top:0; max-width:130px; max-height:500px; margin-left:430px; background:#fff; border: 1px solid #E4DCD3; z-index:10; display:none;}
.detail-conceptCar__before .tab::-webkit-scrollbar{width:5px;}
.detail-conceptCar__before .tab::-webkit-scrollbar-thumb{background:#5f5f5f;}
.detail-conceptCar__before .tab::-webkit-scrollbar-track{background:none;}
.detail-conceptCar__before .tab li{display:block; width:123px; padding:0 18px; font-size:18px; line-height:58px; letter-spacing:-0.36px; box-sizing:border-box; cursor:pointer;}
.detail-conceptCar__before .tab li.on{background:#0E3168; font-family:'HyundaiKRMedium'; color:#fff;}
.detail-conceptCar__before .tab.active{display:block;}

@media print, screen and (min-width: 741px) and (max-width: 20000px) {
    /* motion */
    .detail-hashtag__txt[data-type="onActive"],
    .detail-design__img[data-type="onActive"],
    .img-item--type3[data-type="onActive"],
    .detail-concept[data-type="onActive"] .inno-detail__tit,
    .detail-concept[data-type="onActive"] .inno-detail__desc,
    .detail-concept[data-type="onActive"] .detail-concept__text li,
    .detail-conceptCar[data-type="onActive"]{transform:translateY(20px); opacity:0; transition:all 0.4s ease-in-out;}
    .detail-hashtag__txt[data-type="onActive"].active,
    .detail-design__img[data-type="onActive"].active,
    .img-item--type3[data-type="onActive"].active,
    .detail-concept[data-type="onActive"].active .inno-detail__tit,
    .detail-concept[data-type="onActive"].active .inno-detail__desc,
    .detail-concept[data-type="onActive"].active .detail-concept__text li,
    .detail-conceptCar[data-type="onActive"].active{transform: translateY(0); opacity: 1;}

    /* detail-hashtag */
    .detail-hashtag__img .item-col{width:747px;}
    .detail-hashtag__img .item-col + .item-col{width:323px;}
    .detail-hashtag__img .swiper-wrapper{display:block;}
    .detail-hashtag__img .swiper-slide{height:auto;}
    .detail-hashtag__img .swiper-slide + .swiper-slide{margin-top:20px;}
    .detail-hashtag__txt{position:absolute; left:50%; bottom:100px; margin-left:207px; z-index:1;}

    /* design */
    .detail-design{overflow:hidden;}
    .detail-row{position:relative; max-width:1120px; margin:0 auto 100px;}
    .detail-row .inno-detail__elem{padding-top:60px;}
    .detail-row:last-child .inno-detail__elem{position:absolute; left:0; top:0; width:406px;}
    .detail-design__img .swiper-wrapper{display:block; position:static;}
    .detail-design__img .img-item--type1 .swiper-slide{text-align:right;}
    .detail-design__img .img-item--type1 .swiper-slide:nth-child(1){position:absolute; right:50%; top:0; max-width:1147px; margin-right:-160px;}
    .detail-design__img .img-item--type1 .swiper-slide:nth-child(3){margin-top:20px;}
    .detail-design__img .img-item--type2 .swiper-wrapper{padding-top:590px;}
    .detail-design__img .img-item--type2 .swiper-slide:first-child{position:absolute; left:50%; top:0; height:auto;}

    /* inno-detail */
    .detail-visual__tit{width:373px;}
    .detail-visual__elem{gap:unset; justify-content:start;}
    .inno-detail--bg .inno-detail__elem + .inno-detail__elem{margin-top:50px;}

    /* detail-column */
    .detail-column{max-width:1120px; margin:0 auto; padding:100px 0;}
    .detail-column .inno-detail__elem{display:flex; justify-content:space-between; margin-bottom:50px;}
    .detail-column .inno-detail__elem .inno-detail__desc{width:560px; margin:0;}
    .detail-column .img-item--type3 .swiper-wrapper{justify-content:space-between;}
    .detail-column .img-item--type3 .swiper-slide{width:auto;}
    .detail-column .img-item--type3 .item[data-scroll] {opacity:0; transition: all 0.5s ease-in-out;}
    .detail-column .img-item--type3 .swiper-slide + .swiper-slide .item{height:540px; transition: all 0.8s ease-in-out;}
    .detail-column .img-item--type3 .item.active{opacity: 1;}

    /* detail-concept */
    .detail-concept{position:relative; min-height:800px;}
    .detail-concept > img{position:absolute; left:50%; top:0; margin-left:-960px;}
    .detail-concept__text ul li:first-child::before{display:none;}

    .detail-concept[data-type="onActive"] .inno-detail__tit,
    .detail-concept[data-type="onActive"] .inno-detail__desc,
    .detail-concept[data-type="onActive"] .detail-concept__text li{transition-duration:0.8s;}
    .detail-concept[data-type="onActive"] .detail-concept__text li:nth-child(1){transition-delay:0.9s;}
    .detail-concept[data-type="onActive"] .detail-concept__text li:nth-child(2){transition-delay:1s;}
    .detail-concept[data-type="onActive"] .detail-concept__text li:nth-child(3){transition-delay:1.1s;}
    .detail-concept[data-type="onActive"] .detail-concept__text li:nth-child(4){transition-delay:1.2s;}
    .detail-concept[data-type="onActive"] .detail-concept__text .inno-detail__desc{transition-delay:2s;}
    .detail-concept[data-type="onActive"] > img{transform:scale(1.1); transition: transform 2.5s cubic-bezier(0.21, 0.88, 0.38, 1.01);}
    .detail-concept[data-type="onActive"].active > img{transform:scale(1);}    

    /* concept car */
    .detail-conceptCar{min-height:646px;}
}

/* mobile */
@media screen and (min-width:0) and (max-width:740px){
    .inno-detail__section:nth-child(1){overflow:hidden;}
    
    /* detail-hashtag */
    .detail-hashtag{padding:30px 15px 50px;}
    .detail-hashtag__img{flex-direction:column;}
    .detail-hashtag__img .inno-detail__elem + .inno-detail__elem{margin-top:30px;}
    .detail-hashtag__txt{margin-top:30px;}
    .detail-hashtag__swiper{position:relative; width:100%; margin-bottom:30px; padding-bottom:38px;}

    /* design */
    .detail-design{padding:0 15px; min-height:1028px;}
    .detail-row .inno-detail__elem{margin:30px 0 50px;}
    .detail-row .detail-design__img > div{position:relative; padding-bottom:38px;}

    /* inno-detail */
    .inno-detail--bg{min-height:567px;}
    .inno-detail--bg .inno-detail__inner{display:flex; flex-direction:column-reverse;}
    .inno-detail--bg .inno-detail__elem + .inno-detail__elem{margin-bottom:30px; aspect-ratio:165/92;}

    /* detail-column */
    .detail-column{display:flex; flex-direction:column-reverse; padding:50px 15px; min-height:626px;}
    .detail-column .img-item--type3{position:relative; margin-bottom:30px; padding-bottom:38px;}

    /* detail-concept */
    .detail-concept{min-height:auto; aspect-ratio:360/479;}
    .detail-concept .inno-detail__inner{left:0; padding:50px 15px; margin:0;}
    .detail-concept .inno-detail__tit{font-family:'HyundaiKRMedium'; font-size:16px; line-height:19px; letter-spacing:-0.32px;}
    .detail-concept__text{bottom:50px; padding:0 15px;}
    .detail-concept__text ul{flex-wrap:wrap; gap:unset;}
    .detail-concept__text ul li{width:50%; margin-top:20px; padding-left:15px; font-size:14px; line-height:19px; letter-spacing:-0.28px;}
    .detail-concept__text ul li::before{left:0; top: 4px; height:30px;}
    .detail-concept__text .inno-detail__desc{margin-top:15px;}

    /* concept car */
    .inno-detail__section:nth-child(2) .detail-visual__elem{padding-bottom:30px;}

    .conceptCar__swiper .txt{left:15px; bottom:30px;}
    .conceptCar__swiper .txt p{margin-bottom:15px; font-size:21px; line-height:19px; letter-spacing:-0.42px;}
    .conceptCar__swiper .txt span{font-size:14px; letter-spacing:-0.28px;}
    .conceptCar__swiper .txt span::after{top:0; right:-16px; width:14px; height:14px;}

    .detail-conceptCar__recently{padding-top:112px;}
    .detail-conceptCar__recently::before{top:82px;}
    .detail-conceptCar__recently .tab{left:0; right:0; top:0; margin:0; display:flex; justify-content:space-around; z-index:1;}
    .detail-conceptCar__recently .tab li{padding:0; font-size:16px; line-height:42px;}

    .detail-conceptCar__before button{top:50px; left:auto; right:15px; width:90px; margin:0; padding-right:20px; font-size:14px; line-height:20px; letter-spacing:-0.28px;}
    .detail-conceptCar__before button::after{width:10px; height:7px; top:5px;}
    .detail-conceptCar__before .tab{max-height:240px; top:50px; left:auto; right:15px; margin:0;}
    .detail-conceptCar__before .tab::-webkit-scrollbar{width:3px;}
    .detail-conceptCar__before .tab li{width:85px; padding:15px; font-size:12px; line-height:1px; letter-spacing:-0.24px;}

    .conceptCar__swiper{padding-bottom:30px;}
    .conceptCar__swiper .swiper-pagination-bullets.swiper-pagination-horizontal{bottom:0;}

    .conceptCar__swiper .swiper-button-next, .conceptCar__swiper .swiper-button-prev{width:24px; height:24px; background-size:100% 100%; margin-top:-30px;}
    .conceptCar__swiper .swiper-button-prev{background-image:url('/content/dam/hyundai/ww/en/images/company/innovation/icon_arrow_prev.svg'); left:8px;}
    .conceptCar__swiper .swiper-button-next{background-image:url('/content/dam/hyundai/ww/en/images/company/innovation/icon_arrow_next.svg'); right:8px;}
}