@charset "utf-8";

.section-media__elem video {width: 100%;height: auto;}
.section-media__elem + .section-media__description{margin-top: 55px;}
.section-bg:last-child{margin-bottom: 0;}

.txt-col--2 {margin: 32px 0;}
.txt-col__elem--2 {width: 31.333% !important;}
.txt-col__elem--2 .image__block{margin-bottom: 24px;}
.txt-col__elem--2 .image__block img{width: 100%;}
.txt-col__elem--2 .pip-subTitle{font-size: 20px;line-height: 30px;margin-bottom: 12px;}
.txt-col__elem--2 .pip-desc{font-size: 14px;line-height: 24px;}

.section-row {display: flex; justify-content: space-between;align-items: center;gap: 70px;}
.section-row:nth-child(even) {flex-direction: row-reverse;}
.section-item {width: 50%;}
.section-item img {width: 100%;}
.section-item--txt {width: calc(50% - 70px);}


/* 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;z-index: 1;}
.youtube-box .youtube__background .io-btn-play {width: 60px;height: 60px;z-index: 10;}
.youtube-box .youtube__background.io-hide{display: none;}
.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);}
.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;}

/* Tab swiper */
.tab-swiper {width:var(--cont-max-width); margin:0 auto;}
.tab-swiper__thumbnail {display:flex;}
.tab-swiper__thumbnail li{flex: 1;height:110px;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:30px;text-align:center;color:#B2B2B2;text-decoration:none;width: 100%;height: inherit;}
.tab-swiper__thumbnail button .add-desc {font-size: 18px;line-height: 30px;}
.tab-swiper__thumbnail .on button{color:#00AAD2;}
.tab-gallery-swiper{position: relative;}
.tab-gallery-swiper .txt-desc {width: 100%;font-size: 16px;font-family: 'HyundaiTextRegular';color: #000;line-height: 28px;}
.swiper-slide-img + .txt-desc {padding-top: 24px;}


/* 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/features/digital-innovation-fingertip/gn7-ota-software-update-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/features/digital-innovation-fingertip/gn7-digitalkey-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/features/digital-innovation-fingertip/gn7-fingerprint-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-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 .curtain-txtWrap .curtain-tit .br-pc{display: none !important;}
.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;}
  .section-media__description{text-align: left;}
  .section-media.full-media.section-bg {padding: 60px 0 0;}
  .section-media.full-media .section-media__description {margin: 0 15px 35px;}

  .txt-col--2 {margin-top: 15px;}
  .txt-col__elem--2 {width: 100% !important;}
  .txt-col__elem--2 + .txt-col__elem--2 {margin-top: 55px;}
  .txt-col__elem--2 .image__block{margin-bottom: 20px;}

  .section-col .section-media__inner{display:block;}
  .section-col .section-media__elem{width:100%;}
  .section-col .section-media__description{width:100%}

  .section-row {flex-direction: column;gap: 20px;}
  .section-row + .section-row {margin-top: 55px;}
  .section-item {width: 100%;}
  .section-row:nth-child(even) {flex-direction: column;}

  /* 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;}

  .tab-swiper {width:100%;}
  .tab-swiper__thumbnail li{height:80px;border-width:2px}
  .tab-swiper__thumbnail li.on {border-width: 3px;}
  .tab-swiper__thumbnail button {font-size:14px;line-height:21px;}
  .tab-swiper__thumbnail button .add-desc{font-size:12px;line-height:18px;}
  .tab-swiper .swiper-slide video{width:100%;height:auto}
  .tab-gallery-swiper .txt-desc {font-size: 14px;line-height: 21px;}
  .swiper-slide-img + .txt-desc {padding: 20px 15px 60px;}


  /* 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/features/digital-innovation-fingertip/gn7-ota-software-update-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/features/digital-innovation-fingertip/gn7-digitalkey-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/features/digital-innovation-fingertip/gn7-fingerprint-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/features/digital-innovation-fingertip/gn7-ota-software-update-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/features/digital-innovation-fingertip/gn7-digitalkey-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/features/digital-innovation-fingertip/gn7-fingerprint-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;}
  
}