/* 
 * santa-fe-2023 > convenience.css
 * version : 202309
*/

@charset "utf-8";

/* Key-Visual Area */
.keyVisual {background-image:url('/content/dam/hyundai/ww/en/images/find-a-car/pip/suv/santa-fe-mx5-2023/convenience/mx5-santafe-convenience-kv-pc.jpg');}

/* Gallery */
.gallery-tab-cont{position:relative; display:none}
.gallery-tab-cont.on{display:block}
.gallery-swiper .swiper-button-next{right:0}
.gallery-swiper .swiper-button-prev{left:0}
.gallery-swiper .swiper-button-next,
.gallery-swiper .swiper-button-prev{width:44px;height:44px;background-color:rgba(0,0,0,0.3);top:calc(50% + 6px)}
.gallery-swiper .swiper-button-next::after,
.gallery-swiper .swiper-button-prev::after{font-size:14px}

/* Seat Gallery */
.seat-gallery .pip-title{margin-bottom:26px;font-family: "HyundaiSansHeadMedium";}
.seat-gallery .pip-subTitle{font-family: HyundaiSansHeadRegular; font-size:24px; line-height:28px;}
.seat-gallery .section-media__description{margin-bottom:60px;}
.seat-gallery .section__tab li{height:75px; font-size:16px; line-height:75px;list-style: none;}
.seat-gallery .swiper.galleryThumb-swiper{position:absolute; right:30px; bottom:35px; width:150px;}
.seat-gallery .swiper.galleryThumb-swiper .swiper-slide{cursor:pointer;}
.seat-gallery .swiper.galleryThumb-swiper .swiper-slide.swiper-slide-thumb-active::after{content:''; position:absolute; left:0; right:0; top:0; height: 48px; bottom:0; border:4px solid #00AAD2;}
.seat-gallery .li-asterisk{margin-top:40px;    list-style: none;
    padding-left: 0;}
.seat-gallery .li-asterisk li{padding:0; font-size:14px; line-height:20px; color:#666; text-align:center; text-indent:0;}
.seat-gallery .li-asterisk li::before{content:'※ ';}

/* tray-tab */
.tray-tab__elem{position:relative;}
.tray-tab{position:absolute; left:31px; bottom:31px; font-size:0; z-index:1;}
.tray-tab li{display:inline-block; width:116px; height:42px; margin-right:10px; font-family:"HyundaiSansHeadMedium"; font-size:16px; line-height:42px; background:#E4DCD3; text-align:center; cursor:pointer;}
.tray-tab li.on{background:#191919; color:#fff; border:1px solid #fff; outline:4px solid #00AAD2; border-radius:2px;}
.tray-tab-cont{position:relative; display:none}
.tray-tab-cont.on{display:block}
.tray-tab-desc{margin-top:50px; font-family:'HyundaiSansTextRegular'; font-size:14px; line-height:20px; text-align:center;}
.tray-tab-desc span{text-decoration:underline; color:#00AAD2;}

/* items-gallery */
.items-gallery{margin:0;}
.items-gallery .swiper-slide .desc{position:absolute; left:30px; bottom:30px; font-family:'HyundaiSansTextRegular'; color:#fff;}
.items-gallery .galleryThumb-swiper .swiper-slide{filter:brightness(0.3);cursor:pointer}
.items-gallery .galleryThumb-swiper .swiper-slide.swiper-slide-thumb-active {filter:brightness(1)}

@media print, screen and (min-width: 741px) and (max-width: 20000px) {
  /* section */
  .section-media__description{margin-bottom:60px;}

  /* comment-gallery */
  .comment-gallery{position:relative;}
  .comment-gallery .swiper-wrapper{display:block; font-size:0; text-align:left;}
  .comment-gallery .swiper-wrapper .swiper-slide{display:inline-block; width:auto;}
  .comment-gallery .swiper-wrapper .swiper-slide:first-child{margin-bottom:32px;}
  .comment-gallery .swiper-wrapper .swiper-slide:last-child{margin-left:32px;}
  .comment-gallery .swiper-pagination, .comment-gallery .swiper-button{display:none;}
}

/* Mobile */
@media screen and (min-width:0) and (max-width:740px){
  /* Key-Visual Area */
  .keyVisual {background-image:url('/content/dam/hyundai/ww/en/images/find-a-car/pip/suv/santa-fe-mx5-2023/convenience/mx5-santafe-convenience-kv-m.jpg');}

  /* section */
  .section-media__description{text-align:left;}

  /* Gallery */
  .gallery .pip-title {margin-bottom:10px}
  .swiper.galleryThumb-swiper{display:none;}
  .gallery-swiper .swiper-button-next, .gallery-swiper .swiper-button-prev {width:26px;height:26px;background-color:rgba(0, 0, 0, 0.57);top:calc(50% + -11px);}
  .galleryThumb-swiper .swiper-button-next, .galleryThumb-swiper .swiper-button-prev {display:none}
  .gallery-swiper .swiper-button-next::after, .gallery-swiper .swiper-button-prev::after, 
  .galleryThumb-swiper .swiper-button-next::after, .galleryThumb-swiper .swiper-button-prev::after {font-size:9px}
  
  /* Seat Gallery */
  .seat-gallery{padding:0;}
  .seat-gallery .section-media__description{margin-bottom:30px; padding:0 15px;}
  .seat-gallery .pip-title{margin-bottom:18px;}
  .seat-gallery .pip-subTitle{font-size:14px; line-height:19px;}
  .seat-gallery .gallery-swiper .swiper-slide img{width:100%;height:auto;}
  .seat-gallery .section__tab li{height:40px; font-size:13px; line-height:40px;}
  .seat-gallery .li-asterisk{margin-top:15px; padding:0 15px;}
  .seat-gallery .li-asterisk li{padding-left:15px; font-size:12px; line-height:15px; text-align:left; text-indent:-15px;}

  /* tray-tab */
  .tray-tab__elem{padding-bottom:70px;}
  .tray-tab{display:flex; gap:10px; left:0; right:0; bottom:0;}
  .tray-tab li{position:relative; display:block; width:100%; height:40px; margin:0; font-family:'HyundaiSansTextRegular'; font-size:12px; line-height:40px;}
  .tray-tab li.on{border:0 none; outline-width:2px;}
  .tray-tab li.on::after{content:''; position:absolute; right:-6px; top:-6px; width:14px; height:14px; background:url('/content/dam/hyundai/ww/en/images/find-a-car/pip/suv/santa-fe-mx5-2023/convenience/icon_check.png') no-repeat 0 0; background-size:100% 100%;}
  .tray-tab-cont img{width:100%; height:auto; aspect-ratio:66/37;}
  .tray-tab-desc{margin-top:15px;}

  /* comment-gallery */
  .comment-gallery{position:relative; overflow:hidden; margin-bottom:10px;}
  .comment-gallery .img-comment__txt{position:static; display:block; margin-top:30px; font-size:14px; color:#000;}
  .comment-gallery .swiper-button-next, .comment-gallery .swiper-button-prev{top:calc(50% + -25px)}
  .comment-gallery .swiper-pagination-bullets.swiper-pagination-horizontal{bottom:56px;}

  /* items-gallery */
  .items-gallery .swiper-slide .desc{position:static; display:block; margin-top:30px;}
  .items-gallery .swiper-horizontal>.swiper-pagination-bullets{bottom:56px;}
}