@charset "utf-8";

/* ------------------------------------------------------------------
  Innovation > innovation.css > en
  version : 20250210
* ------------------------------------------------------------------ */

.contTop{display:none;}
.subTitWrap{display:none;}
.inno-main-wrap .subTitWrap{display:block;}

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

/* article */
.cmpnt-main-article-wrap .txt-wrap h2{opacity:1;}
.cmpnt-main-article-wrap .main-article-item .txt-wrap.black .category,
.cmpnt-main-article-wrap .main-article-item .txt-wrap.black h2 p{color:#000;}
.cmpnt-main-article-wrap .main-article-item .txt-wrap span.category{line-height:1; margin-bottom:14px;}

/* swiper */
.swiper-pagination{position:absolute; left:0; bottom:50px; width:100%; font-size:0; text-align:center; z-index:10;}
.swiper-pagination-bullet{display:inline-block; width:8px; height:8px; margin:0 5px; background:#D6D6D6; border-radius:100%;}
.swiper-pagination-bullet-active{background:#02B0D3;}

@media print, screen and (min-width: 741px) and (max-width: 20000px) {
    /* gnb */
    .gnb{background:none; border:none;}
    .gnb a{color:#fff;} 
    .gnb .logo-default{display: none;}
    .gnb::after, .gnb .logo-wh{display:block;}
    .gnb::after{content:"";display:block;position:absolute;left:0;top:0;z-index:-1;width:100%;height:85px;background: linear-gradient(180deg, rgba(102,102,102,0.5) 0%, rgba(102,102,102,0) 100%)}
    .gnb .btnGlobal {background-image:url('/content/dam/hyundai/ww/en/images/main/new/common/btn_topmenu_language-wh.png');}
    .gnb .btnChannel {background-image:url('/content/dam/hyundai/ww/en/images/main/new/common/btn_topmenu_Channelh-wh.png');}
    .gnb .btnOpenSearch {background-image:url('/content/dam/hyundai/ww/en/images/main/new/common/btn_topmenu_search-wh.png');}
    .gnb .gnbLang a:before{background:#fff;}

    /* keyvisual */
    .cmpnt-keyvisual-wrap .obj-wrap{max-height:630px;}
    .cmpnt-keyvisual-wrap .obj-wrap img{aspect-ratio:64/21; transition:transform 2s cubic-bezier(0.21, 0.88, 0.38, 1.01);}
    .cmpnt-keyvisual-wrap .swiper-container .swiper-slide a{bottom:107px; z-index:1;}
    .cmpnt-keyvisual-wrap .txt-wrap{top:0; max-width:1120px;}
    .cmpnt-keyvisual-wrap .txt-wrap .title{font-size:68px; line-height:1; letter-spacing:-1.36px;}
    .cmpnt-keyvisual-wrap .txt-wrap .desc{position:absolute; left:0; bottom:-15px; font-size:18px; line-height:21.6px; transition:all 0.3s ease; opacity:0;}
    .cmpnt-keyvisual-wrap .swiper-container .swiper-slide a:hover{text-decoration:none;}
    .cmpnt-keyvisual-wrap .swiper-container .swiper-slide a:hover .desc{bottom:0; opacity:0.8;}
    .cmpnt-keyvisual-wrap .swiper-container .swiper-slide a:hover + .obj-wrap img{transform:scale(1.2);}
    .cmpnt-keyvisual-wrap .swiper-container .swiper-slide a:focus{text-decoration:none;}
    .cmpnt-keyvisual-wrap .swiper-button-next,
    .cmpnt-keyvisual-wrap .swiper-button-prev{width:60px; height:60px;}
    .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal{width:72px; left:50%; bottom:50px; margin-left:-36px; font-size:0;}

    /* swiper */
    .swiper-pagination-bullet{width:12px; height:12px;}

    /* title */
    .subTitWrap{max-width:1120px; margin:0 auto; padding:100px 0 60px;}
    .subTitle{font-size:52px; line-height:52px; letter-spacing:-1.04px; margin:0;}

    /* tab */
    .sub-main .tabWrap{margin-bottom:50px;}
    .sub-main .tabWrap .tabArea{height:28px;}
    .sub-main .tabWrap .tabArea .tab{height:auto;}
    .sub-main .tabArea > .tab a{padding:0 25px;}

    /* article */
    .cmpnt-main-article-wrap .main-article-item a{overflow:hidden;}
    .cmpnt-main-article-wrap .main-article-item a .obj-wrap img{transform:scale(1.01);transition:transform 2s cubic-bezier(0.21, 0.88, 0.38, 1.01);}
    .cmpnt-main-article-wrap .main-article-item a:hover .obj-wrap img{transform:scale(1.2);}
    .cmpnt-main-article-wrap .main-article.img-obj-single{aspect-ratio:3/1}
    .cmpnt-main-article-wrap .main-article.img-obj-single .main-article-item{height:100%;}
    .cmpnt-main-article-wrap .main-article-item.img-obj--col2{flex-basis:unset; aspect-ratio:2/1;}
    .cmpnt-main-article-wrap .img-obj.img-obj--col2 img{aspect-ratio:2/1;}

    .cmpnt-main-article-wrap .main-article .m-article-align{display: flex;flex-direction: row;flex-wrap: wrap;justify-content:start;width:100%}
    .cmpnt-main-article-wrap .main-article .m-article-align{aspect-ratio: 3/1;} 
    .cmpnt-main-article-wrap .m-article-align .main-article-item{height:100%;}

    .cmpnt-main-article-wrap .main-article-item .txt-wrap{padding:0 40px 50px;}
    .cmpnt-main-article-wrap .main-article-item .txt-wrap h2 p{font-size:30px; line-height:1; letter-spacing:-0.6px;}
    .cmpnt-main-article-wrap .main-article-item .txt-wrap .txt-desc span{line-height:25.2px; letter-spacing:-0.36px;}
    .cmpnt-main-article-wrap .main-article-item.type-horizontal .txt-wrap .txt-desc{position:static; width:100%; padding:0; margin-top:20px;}
    .cmpnt-main-article-wrap .main-article-item.hashtag-obj .hash-txt span{font-size:52px; line-height:1; letter-spacing:-1.04px;}
    .cmpnt-main-article-wrap .main-article-item.hashtag-obj .hash-desc{position:absolute; left:40px; bottom:50px; right:40px; opacity:0; -webkit-transition:all .3s 0s; -o-transition:all .3s 0s; transition:all .3s 0s;}
    .cmpnt-main-article-wrap .main-article-item.hashtag-obj .hash-desc span{font-size:18px; color:#fff; line-height:25.2px; letter-spacing:-0.36px;}
    .cmpnt-main-article-wrap .main-article-item.hashtag-obj a:hover .hash-desc{opacity:1;}
    .cmpnt-main-article-wrap .main-article-item a:hover .txt-wrap.black .category,
    .cmpnt-main-article-wrap .main-article-item a:hover .txt-wrap.black h2 p{color:#fff;}
}

/* Mobile */
@media screen and (min-width:0) and (max-width:740px){
    .gnb.fixed{position:fixed}

    .contentWrap.subMain{padding-top:67px !important;}

    /* swiper */
    .swiper-pagination{bottom:30px;}
    
    /* keyvisual */
    .cmpnt-keyvisual-wrap .swiper-container .swiper-slide a{position:absolute; left:15px; right:15px; top:70px; bottom:58px; width:auto; height:auto;}
    .cmpnt-keyvisual-wrap .swiper-container .swiper-slide a:hover{text-decoration:none;}
    .cmpnt-keyvisual-wrap .txt-wrap{position:static; height:100%; padding:0;}
    .cmpnt-keyvisual-wrap .txt-wrap .title{font-size:27px; line-height:1; letter-spacing:-0.675px;}
    .cmpnt-keyvisual-wrap .txt-wrap .desc{position:absolute; left:0; right:50px; bottom:0; font-size:14px; line-height:19.6px; letter-spacing:-0.28px;}
    .cmpnt-keyvisual-wrap .txt-wrap .txt-more{display:none;}
    .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal{font-size:0; bottom:30px;}
    .cmpnt-keyvisual-wrap .swiper-button-prev, .cmpnt-keyvisual-wrap .swiper-button-next{width:24px; height:24px; margin:0;}
    .cmpnt-keyvisual-wrap .swiper-button-prev{background-image:url('/content/dam/hyundai/ww/en/images/company/innovation/icon_arrow_prev.svg'); left:8px;}
    .cmpnt-keyvisual-wrap .swiper-button-next{background-image:url('/content/dam/hyundai/ww/en/images/company/innovation/icon_arrow_next.svg'); right:8px;}

    .subMain .cmpnt-keyvisual-wrap,
    .subMain .cmpnt-keyvisual-wrap .swiper-container .swiper-slide img,
    .subMain .cmpnt-keyvisual-wrap .obj-wrap,
    .cmpnt-keyvisual-wrap .swiper-container .swiper-slide{aspect-ratio:9/10;}

    /* title */
    .subTitWrap{padding:43px 15px 30px;}
    .subTitle{font-size:27px; line-height:27px; letter-spacing:-0.675px; margin:0;}
    
    /* tab */
    .sub-main .tabWrap{height:33px; margin:0 0 10px 15px; padding-bottom:10px;}
    .sub-main .tabWrap .tabArea{padding:0; line-height:1;}
    .sub-main .tabArea > .tab{height:23px;}
    .sub-main .tabArea > .tab a{height:auto; padding:0 10px; font-size:15px; line-height:15px; letter-spacing:-0.375px;}
    .sub-main .tabArea li:nth-child(1) a{min-width:49px;}
    .sub-main .tabArea li:nth-child(2) a{min-width:141px;}
    .sub-main .tabArea li:nth-child(3) a{min-width:133px;}
    .sub-main .tabArea li:nth-child(4) a{min-width:77px;}

    /* article */
    .cmpnt-main-article-wrap .main-article-item h2{padding:0 15px 30px;}
    .cmpnt-main-article-wrap .main-article-item .txt-wrap span.category{margin-bottom:10px; font-size:12px;}
    .cmpnt-main-article-wrap .main-article-item .txt-wrap h2 p{font-size:19px; line-height:1;}
    .cmpnt-main-article-wrap .main-article-item.hashtag-obj .hash-txt span{font-size:27px; line-height:1; letter-spacing:-0.675px;}
    .cmpnt-main-article-wrap .main-article-item.hashtag-obj .hash-desc{display:none;}
    .cmpnt-main-article-wrap .main-article-item.type-horizontal .txt-wrap{padding:0;}
    .cmpnt-main-article-wrap .main-article-item.type-horizontal .txt-wrap h2{padding:0 15px 30px;}
    .cmpnt-main-article-wrap .main-article.img-obj-single{flex-direction:column;}
    .cmpnt-main-article-wrap .main-article .m-article-align{display:flex; flex-direction:column;}
    .cmpnt-main-article-wrap .main-article .m-article-align + .m-article-align{flex-direction:column-reverse;}
    .cmpnt-main-article-wrap .main-article.vertical-left .m-article-align + .m-article-align{flex-direction:column; aspect-ratio:1/1;}
}