@charset "utf-8";

.cmpnt-wideBanner__media{position:relative; overflow:hidden; max-width:1120px; margin:0 auto;}
.cmpnt-wideBanner__media .swiper-wrapper{line-height:0;}
.cmpnt-wideBanner__media .swiper-slide{overflow:hidden; aspect-ratio:16/9;}
.cmpnt-wideBanner__desc{position:absolute; left:15px; bottom:20px; font-family:'HyundaiSansTextRegular'; font-size:14px; line-height:1.2;}
.cmpnt-wideBanner__desc.text-align-r{left:auto; right:15px;}

.cmpnt-youtube__wrap{aspect-ratio:16/9;}
.cmpnt-youtube__wrap iframe{width:100%; height:auto; aspect-ratio:16/9; background-repeat:no-repeat; background-size:cover; background-position:center;}
.cmpnt-youtube__wrap lite-youtube{max-width:100%; width:100%; height:auto; aspect-ratio:16/9;}
.cmpnt-youtube__wrap lite-youtube > .lty-playbtn{background:url('/content/dam/hyundai/ww/en/images/find-a-car/pip/component/common/icon-play.svg') no-repeat center / 60px 60px;}
.cmpnt-youtube__box{position:absolute; top:0; left:0; width:100%; height:100%; z-index:5; cursor:pointer;}
.cmpnt-youtube__thumbnail{-o-object-fit:cover; object-fit:cover; width:100%; height:100%; aspect-ratio:16/9}

.cmpnt-wideBanner__button--play{position:absolute; top:50%; left:50%; width:60px; height:60px; transform:translate(-50%, -50%); background:url('/content/dam/hyundai/ww/en/images/find-a-car/pip/component/common/icon-play.svg') no-repeat 0 0; background-size:cover; text-indent:-9999px;}

.cmpnt-youtube__box.hide,
.autoplay .cmpnt-youtube__box{display:none;}

@media print, screen and (min-width: 741px) and (max-width: 20000px) {
    .cmpnt-wideBanner__swiper{--swiper-navigation-color:#fff; --swiper-navigation-size: 44px;}
    .cmpnt-wideBanner__swiper .swiper-button-next{right:40px;}
    .cmpnt-wideBanner__swiper .swiper-button-prev{left:40px;}

    .cmpnt-youtube__wrap{position:relative; max-width:1120px; min-height:630px;}
    .cmpnt-youtube__wrap::after{content:''; position:absolute; left:0; right:0; bottom:0; border-bottom:2px solid #fff; z-index:1;}
    .bg-lightSand .cmpnt-youtube__wrap::after{border-color:#f6f3f2;}
}

@media screen and (min-width:0) and (max-width:740px){
    .cmpnt-wideBanner{padding:0 15px;}

    .cmpnt-wideBanner__media .swiper-slide img,
    .cmpnt-wideBanner__media .swiper-slide video{width:100%; height:auto;}
    .cmpnt-wideBanner__desc{left:6px; bottom:6px; font-size:11px;}
    .cmpnt-wideBanner__desc.text-align-r{right:6px;}
    

    .cmpnt-wideBanner__swiper{--swiper-navigation-color:#fff; --swiper-navigation-size: 22px;}
    .cmpnt-wideBanner__swiper .swiper-button-next{right:15px;}
    .cmpnt-wideBanner__swiper .swiper-button-prev{left:15px;}
    .cmpnt-wideBanner__swiper .swiper-button-next:hover,
    .cmpnt-wideBanner__swiper .swiper-button-prev:hover{-webkit-tap-highlight-color:transparent;}

    .cmpnt-youtube__wrap lite-youtube > .lty-playbtn{background-size:30px 30px;}
    .cmpnt-wideBanner__button--play{width:30px; height:30px;}

    /* in section */
    .cmpnt-section__inner.layout-contents .cmpnt-wideBanner{padding:0;}
}