/* banner */
#banner {  width: 100%; z-index: 3; }
#banner *{color:white}
#banner:before{content:'';width: 1px;height: 100%;position: absolute;left: calc(5% + 170px);top: 0;background: #c1c1c1;opacity: .2;z-index: 2;}
#banner:after{content:'';width: 100%;height: 1px;position: absolute;left: 0;bottom: 238px;background: #c1c1c1;opacity: .2;}
#banner .item { height: 98vh; }
#banner .main-slider { }
#banner .item:before{content:'';width: 1px;height: 100%;position: absolute;right: calc(10% + 310px);top: 0;background: #c1c1c1;opacity: .2;z-index: 2;}
#banner .item:after{content:'';width: 1px;height: 100%;position: absolute;right: 10%;top: 0;background: #c1c1c1;opacity: .2;}
#banner .item .clip >* { min-width: 100%; width: 100%; }
#banner .item .clip .bgBox { transform: scale(1.2); -webkit-transform: scale(1.2); }
#banner .item .clip iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
#banner .item .clip video { overflow: hidden; position: absolute; width: 100%; height: auto; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); }
#banner .item .info >div {margin: auto auto 135px auto;width: calc(70% - 100px);}
#banner .item .info >div .txt { -webkit-transition-delay: .2s; transition-delay: .2s; transform: scaleX(0); -webkit-transform: scaleX(0); transform-origin: 0 0; -webkit-transform-origin: 0 0; }
#banner .item .info >div .txt:nth-child(2) { -webkit-transition-delay: .4s; transition-delay: .4s; }
#banner .item .info >div .txt >* {font-size: 27px;font-family: "Anybody", sans-serif;letter-spacing: .5px;}
#banner .item .info span{display:block;width: 155px;height: 3px;background: white;margin: 20px 0 58px;}
#banner .item .info >div .txt .h3 {margin-bottom: 15px;line-height: 120%;font-size: 77px;text-transform: uppercase;word-spacing: 100vw;}
#banner .item .info >div .txt .text {margin-bottom: 25px;line-height: 120%;font-size: 19px;text-transform: uppercase;letter-spacing: 2px;}

#banner .item.slick-current .clip .bgBox {-webkit-animation: scale_banner 6s linear infinite;animation: scale_banner 15s linear infinite;}
#banner .item.slick-current .info >div .txt { transform: scaleX(1); -webkit-transform: scaleX(1); }

#banner .product-cta-box{position:absolute;bottom: 0;background-color: var(--primary);text-align:center;padding: 40px 0;right: 10%;width: 310px;}
#banner .product-cta-box:hover{background:var(--complement)}
#banner .product-cta-link{position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 2;}
#banner .circle-button{width: 75px;aspect-ratio: 1/1;border: 1px solid rgb(255 255 255 / 50%);border-radius:50%;margin:0 auto 20px;display:flex;align-items:center;justify-content:center}
#banner .arrow{display:inline-block;width: 8px;height: 8px;border-right: 1px solid white;border-bottom: 1px solid white;transform:rotate(-45deg);margin-left: -2px;}
#banner .cta-text span{font-size: 18px;font-weight: 400;display:block;letter-spacing: .1px;text-align: center;font-family: "Anybody", sans-serif;}

#banner .slick-dots{bottom:0;width: calc(5% + 135px);height: 100%;display: flex !important;align-items: center;justify-content: center;flex-direction: column;}
#banner .slick-dots li button:before{content:'';background: white;width: 45px;height: 2px;opacity: 1;}
#banner .slick-dots li.slick-active button:before{width:65px}

@-webkit-keyframes scale_banner { to { -webkit-transform: scale(1); } }
@keyframes scale_banner { to { transform: scale(1); } }

@media screen and (max-width: 1440px){
    #banner .item .info >div .txt .h3{font-size: 50px;}
    #banner:before{left: calc(5% + 145px);}
    #banner .item .info >div .txt >*{font-size:22px;}
}
@media screen and (max-width: 1400px){
    #banner:after{bottom: 193px;}
    #banner .cta-text span{font-size:14px;}
    #banner .product-cta-box{width:200px;padding: 25px 0;}
    #banner .item:before{right: calc(10% + 200px);}
    #banner .item .info >div{margin-bottom: 99px;}
}
@media screen and (max-width: 1024px){
	#banner .item { height: 85vh; }
    #banner:before{display:none;}
	#banner .item .info >div {width: calc(90% - 50px);}
}
@media screen and (max-width: 980px){
    #banner .item .info >div{margin-bottom: 25%;}
    #banner .mobile-hide-br, #banner:after{display:none}
    #banner .product-cta-box{width:100%;display: flex;align-items: center;justify-content: center;right: 0;gap: 30px;}
    #banner .circle-button{margin:0;width: 45px;}
    #banner .item:before, #banner .item:after{display:none;}
}
@media screen and (max-width: 700px){
    #banner .item .info >div{margin-bottom: 45%;}
    #banner .item .info span{margin: 20px 0 30px;}
    #banner .item .info >div .txt .text{font-size:14px;}
    #banner .item .info >div .txt .h3{font-size: 30px;word-spacing: unset;}
    #banner .item .info >div .txt >*{font-size:16px;}
}