@charset "utf-8";
/*####################
Layout Customization
######################*/
#container{flex-direction:column; padding:0; max-width:none;}
#container .section{align-items:center;}
.hero-module{align-self:center;}
.hero-module,
#container .section-header,
#container .section-items{padding:0 32px !important; max-width:1280px; width:100%;}
.contents-page{margin-top:0;}
.detail-page-component{gap:80px;}


/*####################
Hero Module
######################*/
.hero-module{display:flex; flex-direction:column; overflow:hidden;}
.swiper{width:100%; height:100%; border-radius:16px;}
.swiper-slide{display:flex; justify-content:center; align-items:center; width:720px; border-radius:16px; overflow:hidden;}
.swiper-slide>a{display:flex;}
.swiper-slide>a>img{width:100%;}
.swiper-pagination-bullet-active{background-color:var(--brand-color-1);}
.swiper-button-next, .swiper-button-prev{width:24px; height:40px; background-color:var(--dark-lavender); opacity:0; transition:all 0.2s ease;}
.swiper-button-prev{left:0; padding-right:4px; border-radius:0 20px 20px 0;}
.swiper-button-next{right:0; padding-left:4px; border-radius:20px 0 0 20px;}
.swiper:hover :is(.swiper-button-next, .swiper-button-prev){opacity:0.6;}
.swiper:hover :is(.swiper-button-next:hover, .swiper-button-prev:hover){opacity:1;}
.swiper-button-next:after, .swiper-button-prev:after{color:#fff; font-size:14px;}



/*####################
Screen size
######################*/

@media (max-width: 960px) {

   .hero-module,
   #container .section-header,
   #container .section-items{padding:0 24px !important;}
   
}

@media (max-width: 768px) {

   .swiper-slide{width:100%;}
   .hero-module,
   #container .section-header,
   #container .section-items{padding:0 16px !important;}
   
}

@media (max-width: 480px) {

   .hero-module{padding:0 !important;}

   /* hero module */
   .hero-module, :is(.swiper, .swiper-slide){border-radius:0;}

   /* container */
   .contents-page{gap:40px;}
   .section{gap:16px !important;}
   .section-header>em{font-size:14px;}
   .section-header>h4{font-size:18px;}


}