/**
 * Innovation > electrification.css
 * version : 202310
*/

/* section */
.inno-detail__contents .inno-detail__section:last-child{margin-bottom:0; padding-bottom:0;}

/* inno-detail */
.inno-detail__inner + .inno-detail--bg{margin-top:100px;}
.inno-detail__inner > .inno-detail__elem{margin-top:100px;}

/* detail-hashtag */
.detail-hashtag__img{position:relative; display:flex; justify-content:space-between;}

/* video */
.inno-detail__video{overflow:hidden; position:relative; height:450px; margin-top:100px;}
.inno-detail__video::after{content:''; position:absolute; left:0; right:0; bottom:0; height:2px; background:#fff;}
.inno-detail__video + .inno-detail__elem{margin-top:60px;}
.inno-detail__video + .inno-detail__elem + .inno-detail__elem{margin-top:60px;}
.inno-detail__video video{position:absolute; left:0; top:50%; transform:translateY(-50%);}

/* youtube */
.inno-detail__media{line-height:0;}
.inno-detail__media .movieContent{padding:0;}
.inno-detail__media .movieContent .videoBox:after{display:none;}

/* inno-article */
.inno-article__elem .inno-detail__tit + .inno-article__row{margin-top:100px;}

/* img-item */
.img-item--type1{position:relative; margin-top:325px;}
.img-item--type1 .inno-detail__img{position:absolute; left:50%; top:-225px; margin-left:-560px;}
.img-item--type1 .inno-detail__elem{padding-top:85px;}

/* swiper */
.swiper-button-prev:after, .swiper-button-next:after{display:none;}

/* inno-article */
.inno-article__row:nth-of-type(3){justify-content:end;}
.inno-article__row:nth-of-type(3) .inno-detail__img{position:absolute; left:0; top:0; margin-left:-205px;}
.inno-article__row:nth-of-type(3) .inno-detail__elem{max-width:627px;}

@media print, screen and (min-width: 741px) and (max-width: 20000px) {
    /* motion */
    .detail-hashtag__txt[data-type="onActive"],
    .detail-hashtag .inno-detail__elem[data-type="onActive"],
    .inno-article__elem[data-type="onActive"] .inno-detail__inner > .inno-detail__tit,
    .inno-article__row[data-type="onActive"]{transform:translateY(20px); opacity:0; transition:all 0.4s ease-in-out;}
    .detail-hashtag__txt[data-type="onActive"].active,
    .detail-hashtag .inno-detail__elem[data-type="onActive"].active,
    .inno-article__elem[data-type="onActive"].active .inno-detail__inner > .inno-detail__tit,
    .inno-article__row[data-type="onActive"].active{transform: translateY(0); opacity: 1;}

    /* section */
    .inno-detail__section:nth-child(1){min-height:5205px;}
    .inno-detail__section:nth-child(2){min-height:3887px;}
    
    /* inno-detail */
    .inno-detail--bg .inno-detail__list{margin:60px 0 100px;}
    .inno-detail__list + .inno-detail__desc{margin:100px 0;}

    /* detail-hashtag */
    .detail-hashtag{margin:100px 0;}
    .detail-hashtag .inno-detail__elem{margin-bottom:100px;}
    .detail-hashtag__img + .inno-detail__elem{margin:60px 0 0; padding-left:373px;}
    .detail-hashtag__txt{position:absolute; left:0; bottom:0; z-index:1;}

    /* swiper */
    .swiper-button-next, .swiper-button-prev{display:none !important;}
}

/* mobile */
@media screen and (min-width:0) and (max-width:740px){
    /* inno-detail */
    .inno-detail__inner + .inno-detail--bg{margin-top:50px;}
    .inno-detail__inner > .inno-detail__elem{margin-top:50px;}
    .inno-detail__list + .inno-detail__desc{margin-top:50px;}

    /* detail-hashtag */
    .detail-hashtag > .inno-detail__elem{margin-top:30px;}
    .detail-hashtag__img{padding-top:50px; flex-direction:column;}
    .detail-hashtag__txt{margin:30px 0;}

    /* video */
    .inno-detail__media .movieContent{aspect-ratio:55/29;}
    .inno-detail__video{height:auto; margin-top:50px; aspect-ratio:55/29;}
    .inno-detail__video video{position:static; width:100%; height:auto; transform:translateY(0);}
    .inno-detail__video + .inno-detail__elem{margin-top:30px;}
    .inno-detail__video + .inno-detail__elem + .inno-detail__elem{margin-top:30px;}

    /* youtube */
    .cmpnt-media .imgArea{aspect-ratio:66/37;}
    .cmpnt-media .imgArea img, .cmpnt-media .imgArea iframe{width:100%; margin:0;}

    /* inno-article */
    .inno-article__elem{margin-top:40px;}
    .inno-article__elem .inno-detail__tit + .inno-article__row{margin-top:50px;}
    .inno-article__row .inno-detail__img,
    .inno-article__row .inno-detail__img img{aspect-ratio:55/26;}
    .inno-article__row:nth-of-type(3) .inno-detail__img,
    .inno-article__row:nth-of-type(3) .inno-detail__img img{aspect-ratio:165/92;}

    /* img-item */
    .img-item--type1{margin-top:142px;}
    .img-item--type1 .inno-detail__img{left:15px; right:15px; top:-92px; margin:0; aspect-ratio:165/92;}
    .img-item--type1 .inno-detail__elem{padding-top:30px;}

    /* swiper */
    .swiper .swiper-slide::after{bottom:22px; height:22px;}
    .swiper-button-next, .swiper-button-prev{width:15px; height:30px; top:15%; margin-top:0; background-image:url('/content/dam/hyundai/ww/en/images/company/innovation/future-mobility/btn-arrow-m.svg'); background-size:6px 23px;}
    .swiper-button-prev{transform:rotate(180deg);}
    .inno-detail--bg .swiper-button-next, .inno-detail--bg .swiper-button-prev{top:50%; margin-top:-35px;}
    .inno-detail--bg .inno-detail__list .swiper-wrapper .swiper-slide{aspect-ratio: auto;}

    /* inno-article */
    .inno-article__row:nth-of-type(3) .inno-detail__img{position:static; margin:0;}
}