/*================ default ==================*/
:root {
    --color-light: #FFFFFF !important;
    --color-black: #111111 !important;
    --color-dark: #333333 !important;
    --color-gray: #666666 !important;
    --color-green: #00A94F !important;
    --color-green2: #007938;
    --transition: .3s ease-in-out;
    --radius: 8px;
}

.icw .nowrap{white-space: nowrap;}
.icw .text-light{color: var(--color-light) !important;}
.icw .text-black{color: var(--color-black) !important;}
.icw .text-dark{color: var(--color-dark) !important;}
.icw .text-gray{color: var(--color-gray) !important;}
.icw .text-green{color: var(--color-green) !important;}
.icw .text-green2{color: var(--color-green2) !important;}

.DBThaiTextX {font-family: "DBThaiTextX";}
.DBThaiTextXBd {font-family: "DBThaiTextXBd";}
.Kanit {font-family: "Kanit";}

h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6 {font-family: 'kurious-looped';font-weight: 500;line-height: 1.5em; margin: 0;}

h1 strong,h2 strong,h3 strong,h4 strong,h5 strong,h6 strong,
.h1 strong,.h2 strong,.h3 strong,.h4 strong,.h5 strong,.h6 strong {font-weight: 600;}

p{font-family: 'kurious-looped';font-size: 16px;line-height: 1.5em;font-weight: 500;}
p strong {font-weight: 600;}

.container {margin-right: auto;margin-left: auto;padding-left: 16px;padding-right: 16px;width: 100%;max-width: 1172px;}
.container:before,
.container:after {content: '';display: table;clear: both;}
.container.-sm {max-width: 800px;}


.ic-garage {font-family: 'icongarage' !important; speak: none;line-height: 1;text-transform: none;
    font-style: normal; font-weight: normal; font-variant: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.ic-garage-map-marker:before {content: "\e908";}
.ic-garage-phone:before {content: "\e909";}


.section {position: relative;}
.section .sc-heading {text-align: center; margin-bottom: 24px;}
.section .sc-heading .h1 {color: var(--color-dark);margin: 0;}

/*.section .tab-content {position: relative;opacity: 0;height: 0;overflow: hidden;visibility: hidden; display: block; transition: .3s ease-in-out;}
.section .tab-content.active {opacity: 1;height: auto;overflow: visible;visibility: visible;}*/

/*=============== responsive ================*/
@media screen and (min-width: 200px) {
    .hidden-w991 {display: none !important; }
    .hidden-w767 {display: none !important; }
    .hidden-w360 {display: none !important; }

    .visible-w360 {display: block !important; }
    .visible-w365 {display: block !important; }
    .visible-w414 {display: block !important; }
    .visible-w767 {display: block !important; }
    .visible-w991 {display: block !important; }

    h1,.h1 {font-size: 28px;}
    h2,.h2 {font-size: 24px;}
    h3,.h3 {font-size: 20px;}
    h4,.h4 {font-size: 18px;}
    h5,.h5 {font-size: 16px;}
    h6,.h6 {font-size: 16px;}
}

@media screen and (min-width: 414px) {
    .visible-w414 {display: none;}
}



@media screen and (min-width: 768px) {
    .visible-w767{display: none !important;}
    .hidden-w767{display: block !important;}

    h1,.h1 {font-size: 42px;}
    h2,.h2 {font-size: 33px;}
    h3,.h3 {font-size: 26px;}
    h4,.h4 {font-size: 20px;}
    h5,.h5 {font-size: 18px;}
    h6,.h6 {font-size: 16px;}

   

}

@media screen and (min-width: 992px) {
    .hidden-w1199 {display: none !important;}
    .hidden-w991{display: block !important;}
    .visible-w991 {display: none !important;}
    .visible-w1199 {display: block !important;}
}

@media screen and (min-width: 1200px) {
    .hidden-w1200 {display: none;}
    .visible-w1200 {display: block;}
}

/* banner */

/* page backgorund */
@media screen and (min-width: 200px) {
    .content-page {background-image: url(/SiteCollectionDocuments/personal/progressive1/img/content-bg-mb.jpg); background-size: cover; background-repeat: no-repeat; overflow: hidden;}
}

@media screen and (min-width: 768px) {
    .content-page {background-image: url(/SiteCollectionDocuments/personal/progressive1/img/content-bg-pc.jpg);}
}

/* video */
@media screen and (min-width: 200px) {
    .sc-video .container {max-width: 100%;padding: 0;}
    .sc-video .sc-inner{padding: 48px 0;}

    .video-highlight-container {position: relative; overflow: hidden; padding-top: 56.6%; background-color: black; width: 100%; border-radius: 8px;}
    .video-highlight-container .video-highlight-thumb {position: absolute; top: 0; left: 0;}

    .sc-video .swiper-pagination {position: static; margin-top: 24px; height: 24px;}
    .sc-video .swiper-pagination .swiper-pagination-bullet { width: 8px; height: 8px; margin: 0 12px;}
    .sc-video .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {width: 24px; background: #00A94F; border-radius: 50px; margin: 0 4px;}
    .video-highlight {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
    .video-highlight > iframe {width: 100%; height: 100%;}
    .video-highlight-thumb.show {display: block;}
    .video-highlight-thumb{display: none;}
    .digital-card-container3 {height: 24px;margin-top: 24px;display: flex;align-items: center;justify-content: center;}
    .digital-card-container3.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
    .digital-card-container3.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {height: 8px;  height: 8px; margin: 0 12px;}
    .digital-card-container3.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active,
    .digital-card-container3.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {background-color: #00A94F; border-radius: 50px; width: 24px; margin: 0 4px; height: 8px;}
}
@media screen and (min-width: 768px) {
    .video-highlight-container::before {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #FFFFFF99; z-index: 1; opacity: 1; transition: all 0.2s ease-in-out;}
    .swiper-slide-active .video-highlight-container::before{opacity: 0; height: 0;}
    .video-highlight-container {border-radius: 32px;}
    .sc-video .sc-inner{padding: 64px 0;}
    .sc-video .swiper-pagination {display: none;}
    
}

/* gallery */
@media screen and (min-width:200px) {
    .sc-gallery .sc-inner {padding: 48px 0;}
    .gallery-container{display: grid; grid-template-columns: 1fr;  gap: 16px;  position: relative;}
    .gallery {padding-top: 121.955%; width: 100%; border-radius: 8px; overflow: hidden; position: relative; transition: all 0.2s ease-in-out; height: auto;}
    .gallery>img {position: absolute; top: 0; left: 0; height: 100%; transition: all 0.2s ease-in-out;}
    .gallery .content {position: absolute; top: 0; left: 0; color: #ffffff; position: absolute; top: 0; left: 0; padding: 16px;}
    .gallery .content .title {margin: 0; font-size: 18px;}
    .gallery .content .title>img.go-on {max-width: 73px; display: block; margin-top: 4px;}
    .gallery .content .link {font-family: 'kurious-looped'; font-size: 16px; text-decoration: underline; font-weight: 600;}
    .gallery.gallery-layout-logo {padding: 0 14px; }
}

@media screen and (min-width:768px) {
    .sc-gallery .sc-inner {padding: 64px 0;}
    .gallery-container {grid-template-columns: repeat(3 , 1fr); gap: 24px;}
    .gallery.gallery-layout-1 {padding-top: 134.067%;}
    .gallery.gallery-layout-2 {padding-top: 112.79%;}
    .gallery.gallery-layout-3 {padding-top: 63.737%;}
    .gallery.gallery-layout-logo {padding-top: 35.96%;}
    .gallery-wrapper {display:flex; flex-direction: column; gap: 24px;}
}
@media screen and (min-width: 991px) {
    .gallery:not(.gallery-layout-logo):hover {scale: 1.05; box-shadow: 0px 10.69px 10.69px 0px #00000040;}
    .gallery:not(.gallery-layout-logo):hover>img {scale: 1.1;}
}

@media screen and (max-width: 767px) {
    .gallery.gallery-layout-logo img {position: static;}
    .gallery.gallery-layout-logo {margin-bottom: 8px; width: 300; height: 108px; display: flex; display: flex; justify-content: center;}
    .gallery .content {display: flex; flex-direction: column; height: 100%; justify-content: space-between;}
}


.sc-go-beyond .sc-inner {max-width: 1440px; margin: 0 auto;}
.sc-go-beyond .sc-content {position: relative;       padding-top: 57.535%;  }
.sc-go-beyond .sc-content .content {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%;width: 73.195%; }
.sc-go-beyond .sc-content .floating-item {position: absolute; }
.floating-item.floating-item-1 {width: 24.094%; top: 0;left: -2.113%;}
.floating-item.floating-item-2 {    width: 18.681%; transform: translateX(-50%); left: 42%;top: -3.8%;}
.floating-item.floating-item-3 {width: 35.834%; right: 0.68%;top: -3.68%;}
.floating-item.floating-item-4 {width: 28.473%;left: 3.47%;bottom: -10.65%;}
.floating-item.floating-item-5 {width: 19.742%;left: 42%;bottom: -4.06%;}
.floating-item.floating-item-6 {width: 19.742%; right: 10%;  bottom: 0.94%;}

.floating-item.floating-item-1 {
      animation: floatDiagonal1 2s ease-in-out infinite;
      will-change: transform;
    }

/* เพิ่ม keyframes สำหรับการลอย */
@keyframes floatDiagonal1 {
  0% {
    transform: translate(0, 0) ;
  }
  50% {
    transform: translate(-15px, -15px) ;
  }
  100% {
    transform: translate(0, 0);
  }
}

.floating-item.floating-item-2 {
      animation: floatDiagonal2 2s ease-in-out infinite;
      will-change: transform;
    }

/* เพิ่ม keyframes สำหรับการลอย */
@keyframes floatDiagonal2 {
  0% {
    transform: translate(0, 0) ;
  }
  50% {
    transform: translate(0, -15px) ;
  }
  100% {
    transform: translate(0, 0);
  }
}

.floating-item.floating-item-3 {
      animation: floatDiagonal3 2s ease-in-out infinite;
      will-change: transform;
    }

/* เพิ่ม keyframes สำหรับการลอย */
@keyframes floatDiagonal3 {
    0% {
        transform: translate(0, 0) ;
    
  }
  50% {
    transform: translate(15px, -15px) ;
  }
  100% {
    transform: translate(0, 0) ;
  }
}

.floating-item.floating-item-4 {
      animation: floatDiagonal4 2s ease-in-out infinite;
      will-change: transform;
    }

/* เพิ่ม keyframes สำหรับการลอย */
@keyframes floatDiagonal4 {
  0% {
    transform: translate(0, 0) ;
  }
  50% {
    transform: translate(-15px, 15px) ;
  }
  100% {
    transform: translate(0, 0);
  }
}

.floating-item.floating-item-5 {
      animation: floatDiagonal5 2s ease-in-out infinite;
      will-change: transform;
    }

/* เพิ่ม keyframes สำหรับการลอย */
@keyframes floatDiagonal5 {
  0% {
    transform: translate(0, -15px) ;
  }
  50% {
    transform: translate(0, 0) ;
  }
  100% {
    transform: translate(0, -15px) ;
  }
}

.floating-item.floating-item-6 {
  animation: floatDiagonal6 2s ease-in-out infinite;
  will-change: transform;
}

/* เพิ่ม keyframes สำหรับการลอย */
@keyframes floatDiagonal6 {
0% {
transform: translate(-15px, -15px) ;
}
50% {
transform: translate(0, 0) ;
}
100% {
transform: translate(-15px, -15px) ;
}
}

@media screen and (max-width: 767px) {
  .sc-go-beyond {height: 100vh;}
  .sc-go-beyond .sc-inner {height: 100%;}
  .sc-go-beyond .sc-content {height: 100%;}
  .sc-go-beyond .sc-content .content {width: 100%; padding: 0 16px;}

  .floating-item.floating-item-1 {        width: 36.896%;
    top: 141px;
    left: 1.887%;}
  .floating-item.floating-item-2 {width: 38.681%;
    left: 32%;
    top: 12.2%;}
    .floating-item.floating-item-2 > img {transform: rotate(-11deg);}

    .floating-item.floating-item-3 {
      width: 59.834%;
      right: -9.32%;
      top: 19.32%;
  }
  .floating-item.floating-item-4 {
    width: 42.473%;
    left: -2.53%;
    bottom: 17.35%;
  }
  .floating-item.floating-item-4 > img {transform: rotate(17deg);}
  .floating-item.floating-item-5 {
    width: 38.742%;
    left: 30%;
    bottom: 14.94%;
  }
  .floating-item.floating-item-6 {
    width: 30.742%;
    right: 0%;
    bottom: 21.94%;
}
}

@media screen and (min-width: 768px) {
  .sc-go-beyond .sc-inner {padding: 64px 0;}
}

/* banner */

.digital-card-container {height: 100%;}
.tsr-video {height: 100%;}

.digital-card-container {
 
}
.tsr-video {
  display: none;
  position: absolute;
  top: 56%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.tsr-video.active {
  display: block;
  /* background-color: black; */
}
.woman-floating,
.man-floating  {
  transition: top .3s, left .3s, right .3s, bottom .3s;
}
.man-floating {
  position: absolute;
  width: 51.28%;
  right: -13.2%;
  top: 31.44%;
}
.woman-floating {
  position: absolute;
  left: -28.499%;
  top: 30.43%;
  width: 47.355%;
}
.step2 .woman-floating {
  left: -45.499%;
}
.step2 .man-floating {
  right: -13.501%;
  top: 31%;
}
.step1.revers .man-floating,
.step1.revers .woman-floating {
  transition: top 1.5s, left 1.5s, right 1.5s, bottom 1.5s;
}


.step3 .woman-floating {
  left: 71%;
}
.step3 .man-floating {
  right: -100%;
}

.woman-floating img,
.man-floating img {
  width: 100%;
}

.sc-hero-banner {padding-top: 40%;}
  .digital-card-container {position: absolute;top: 0; left: 50%; transform: translateX(-50%); width: 100%; overflow: hidden;}
  .tsr-video{transform: translate(-50%, 0); top: 0;}
@media screen and (max-width: 767px) {
  .sc-hero-banner {padding-top: 133.2%;}
}