@charset "utf-8";

.keyVisual__title {color:#000}
.sub-keyVisual__title h2 {color: #000;}
.sub-keyVisual__title.white h2 {color: #fff;}

/* section */
.section-media.full-media {margin-bottom: 0;padding-bottom: 0;}
.section-media.full-media + .section-media.section-bg {margin-top: 0;}
.full-media .section-media__inner {max-width: 100%;}
.pip-title + .pip-desc {margin-top: 20px;}
.txt-col__elem + .txt-col__elem {width: calc(50% - 10px);}

/* Youtube Area */
#youtube__iframe {width:100%;height:630px;}
.youtube-box {position: relative;overflow: hidden;}
.youtube-box .youtube__background {position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 5;cursor: pointer;}
.youtube-box .youtube__background img {-o-object-fit: cover;object-fit: cover;width: 100%;height: 100%;aspect-ratio:16/9}
.youtube-box .youtube__background .youtube__thumb{position: relative;filter: brightness(0.7);}
.youtube-box .youtube__background .youtube__thumb::after{display: block;content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0, 0.6);}
.youtube-box .youtube__background .io-btn-play {width: 60px;height: 60px;}
.youtube-box .youtube__background.io-hide{display: none;}
.io-btn-play {width: 60px;height: 60px;position: absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);cursor: pointer;}
.io-btn-play.io-hide {display: none;}

/* gallery area */
.gallery{display:flex;flex-direction:column;gap:20px;width: 100%;}
.gallery img{width: 100%;}
.gallery__col{display: flex; flex-direction: column; gap: 20px;width: calc(50% - 10px);}
.gallery__imgWrap{position: relative;width: 100%;}
.gallery__desc{position: absolute;bottom:15px;left: 20px;color:#fff;font-size: 16px;line-height: 28px;font-family: 'HyundaiTextMedium';}

.gallery--2col-2row{flex-wrap: wrap;flex-direction: initial;}
.gallery--2col-2row img{width:100%;}

/* Tab swiper */
.tab-swiper {width:var(--cont-max-width); margin:0 auto;}
.tab-swiper .swiper-button-next {right:0}
.tab-swiper .swiper-button-prev {left:0}
.tab-swiper .swiper-button-next,
.tab-swiper .swiper-button-prev {width:44px;height:44px;background-color:rgba(0,0,0,0.5);}
.tab-swiper .swiper-button-next::after,
.tab-swiper .swiper-button-prev::after {font-size:7px}
.tab-gallery-swiper{position: relative;}
.tab-gallery-swiper .tab-swiper-desc{position: absolute;bottom: 18px;left: 20px;z-index: 10;}
.tab-gallery-swiper .tab-swiper-desc .pip-desc{  font-size: 14px;line-height: 24px;color: #fff;}
.tab-swiper__thumbnail {display:flex;padding-bottom: 58px;}
.tab-swiper__thumbnail li{flex: 1;height:75px;text-align:center;border-bottom:2px solid #e5e5e5}
.tab-swiper__thumbnail li.on{border-color:#00AAD2;border-width: 5px;}
.tab-swiper__thumbnail button{font-family:'HyundaiMedium';font-size:20px;line-height:75px;text-align:center;color:#B2B2B2;text-decoration:none;height: inherit;width: 100%;}
.tab-swiper__thumbnail .txt-desc {display: none;position: absolute;left: 0;width: 100%;padding-top: 30px;font-size: 16px;font-family: 'HyundaiRegular';color: #000;line-height: 28px;text-align: center;}
.tab-swiper__thumbnail .on button{color:#00AAD2;}
.tab-swiper__thumbnail .on .txt-desc{display: block;}


/* curtain slider */
.curtain {position: relative;background: #ccc;width: 16.666665%;cursor: pointer;overflow: hidden;transition: all 0.6s ease;}
.curtain-container {margin: 0 auto;width: 100%;display: flex;}
.curtain__img {height: 760px;background-size: cover;}
.curtain-img01{background: url('/content/dam/hyundai/ww/en/images/find-a-car/pip/cars/azera-gn7-2023/design/ditigal-unwind-in-style/gn7-bezel-less-mirror-pc.jpg') no-repeat;background-position: 50%;}
.curtain-img02{background: url('/content/dam/hyundai/ww/en/images/find-a-car/pip/cars/azera-gn7-2023/design/ditigal-unwind-in-style/gn7-door-trim-space-pc.jpg') no-repeat;background-position: 50%;}
.curtain-img03{background: url('/content/dam/hyundai/ww/en/images/find-a-car/pip/cars/azera-gn7-2023/design/ditigal-unwind-in-style/gn7-rear-reclining-seat-pc.jpg') no-repeat; background-position: 50%;}
.curtain__cont{position: absolute;bottom: 0;left: 0;z-index: 10;color: #fff; padding: 80px 42px 88px;width: 100%;display: flex;flex-direction: column;}
.curtain-txtWrap{display: flex;flex-direction: column;justify-content: flex-start;gap: 26px;width: 100%;}
.curtain-txtWrap .curtain-tit {color: #fff;font-size: 30px;line-height: 40px;text-align: center;z-index: 1;}
.curtain-txtWrap .curtain-tit .br-pc{display: none !important;}
.curtain-txtWrap .curtain-desc {display: none;animation: fade-out 2s ease-in;}
.curtain-txtWrap .curtain-desc + .plus-icon{margin-top: 66px;}
.plus-icon {display: block;position: relative;bottom: 0;left: 50%;width: 24px;height: 24px;transform: translate(-50%, 0);margin-top: 26px;animation: fade-in 1s;}
.plus-icon:before, .plus-icon:after {content: '';width: 24px;height: 2px;background: #fff;position: absolute;left: 50%;top: 50%;transition: all 0.6s ease;transform: translate(-50%, -50%);}
.plus-icon:after {transform: translate(-50%, -50%) rotate(90deg);z-index: -1;}

.curtain.active{width: 66.66667%;}
.curtain.active .curtain__cont{padding:80px 80px 96px;}
.curtain.active .curtain-tit {text-align: left;}
.curtain.active .curtain-desc{display: block;animation: fade-in 2s ease-out;} 
.curtain.active .plus-icon{display: none; animation: fade-out 1s;}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}


/* Mobile */
@media screen and (min-width:0) and (max-width:740px){
  /* KV Area */
  .keyVisual {height:334px;}
  .sub-keyVisual__media video {aspect-ratio: 1/1;}

  /* section */
  .section-media__description{text-align: left;}
  .section-media.full-media .pip-title {margin-bottom: 12px;}
  .txt-col__elem + .txt-col__elem {width: 100%;}

  .section-media.section-bg {margin-top: 0;}
  .section-media.full-media {margin-bottom: 0;}
  .section-media.full-media.section-bg{padding: 60px 0 0;}
  .section-media.full-media .section-media__elem video {aspect-ratio: 1/1;}

  /* Youtube Area */
  #youtube__iframe {width:100%;height:202px;}
  .youtube-box .youtube__background .io-btn-play {width: 30px;height: 30px;}
  .io-btn-play {width: 30px;height: 30px;}

  /* gallery area */
  .gallery{gap:6px;}
  .gallery__col{gap: 6px; width: calc(50% - 3px);}
  .gallery__box{display: block;}
  .gallery__imgWrap img{height: auto;}
  .gallery__desc{font-size: 11px;line-height:15px;bottom: 4px; left: 4px;width: 100%;}

  .tab-swiper {width:100%;}
  .tab-swiper__thumbnail li{height:64px;border-width:2px}
  .tab-swiper__thumbnail li.on {border-width: 3px;}
  .tab-swiper__thumbnail button {font-size:14px;line-height:21px;}
  .tab-swiper__thumbnail .txt-desc {padding: 20px 15px 60px;font-size: 14px;line-height: 21px;text-align: left;}
  .tab-swiper .swiper-slide video{width:100%;height:auto}
  .tab-swiper .swiper-button-next,
  .tab-swiper .swiper-button-prev {width:26px;height:26px;}
  .tab-swiper .swiper-button-next::after,
  .tab-swiper .swiper-button-prev::after {font-size:5px}
  .tab-gallery-swiper .tab-swiper-desc{left: 8px;bottom: 7px;}
  .tab-gallery-swiper .tab-swiper-desc .pip-desc{font-size: 11px;line-height: 15px;}
  .tab-swiper + .txt-desc {margin-top: 20px; font-size: 14px;line-height: 21px;text-align: left;}


  /* curtain slider */
  .curtain-container {width: 100%;flex-direction: column;}
  .curtain, .curtain.active {width: 100%;}
  .curtain__img{height: 100px;}
  .curtain-img01{background: url('/content/dam/hyundai/ww/en/images/find-a-car/pip/cars/azera-gn7-2023/design/ditigal-unwind-in-style/gn7-bezel-less-mirror-thumb-m.jpg') no-repeat;background-size: cover;}
  .curtain-img02{background: url('/content/dam/hyundai/ww/en/images/find-a-car/pip/cars/azera-gn7-2023/design/ditigal-unwind-in-style/gn7-door-trim-space-thumb-m.jpg') no-repeat;background-size: cover;}
  .curtain-img03{background: url('/content/dam/hyundai/ww/en/images/find-a-car/pip/cars/azera-gn7-2023/design/ditigal-unwind-in-style/gn7-rear-reclining-seat-thumb-m.jpg') no-repeat;background-size: cover;}
  
  .curtain.active .curtain__img{height: 500px;}
  .curtain.active .curtain-img01{background: url('/content/dam/hyundai/ww/en/images/find-a-car/pip/cars/azera-gn7-2023/design/ditigal-unwind-in-style/gn7-bezel-less-mirror-m.jpg') no-repeat; background-size: cover;}
  .curtain.active .curtain-img02{background: url('/content/dam/hyundai/ww/en/images/find-a-car/pip/cars/azera-gn7-2023/design/ditigal-unwind-in-style/gn7-door-trim-space-m.jpg') no-repeat; background-size: cover;}
  .curtain.active .curtain-img03{background: url('/content/dam/hyundai/ww/en/images/find-a-car/pip/cars/azera-gn7-2023/design/ditigal-unwind-in-style/gn7-rear-reclining-seat-m.jpg') no-repeat; background-size: cover;}
  .curtain__cont{padding: 38px 15px;flex-direction: row;}
  .curtain-txtWrap {gap: 10px;align-items: flex-start;}
  .curtain-txtWrap .curtain-tit {font-size: 19px;line-height: 24px;}
  .curtain-txtWrap .curtain-desc {font-size: 14px; line-height: 21px;}
  .curtain.active .curtain__cont {padding: 100px 15px 35px;}
  .plus-icon{margin-top: 0;position: revert;transform: translateX(0);}
  .plus-icon:before, .plus-icon:after {width: 16px;height: 2px;}

}