/* banner */
#banner {width: 100%;z-index: 3;}
#banner:before{content:'';width: 100%;height: 300px;position: absolute;left: 0;top: 0;background: linear-gradient(to top, rgb(0 0 0 / 0%), rgb(255 255 255 / 100%));z-index: 1;}
#banner .item {height: 100vh;}
#banner .item .clip:before{position:absolute;bottom: 0;left:0;z-index:1;content:"";width:100%;height: 550px;display:block;background: linear-gradient(to bottom, rgb(0 0 0 / 0%), rgb(18 32 46 / 49%));pointer-events:none;opacity: 0;}
#banner .item:after { content: ''; width: 1px; height: 100%; position: absolute; right: calc(8% + 10px); top: -20px; background: #70747a; opacity: .2; z-index: 2; }
#banner .item .clip { border-bottom-left-radius: 260px; border-bottom-right-radius: 260px; }
#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 { z-index: 2 }
#banner .item .info {display: grid;grid-template-columns: 33% 31%;margin: auto;align-items: end;gap: 40px;justify-content: center;}
#banner .item .info .Txt {margin-bottom: 24%;}
#banner .item .info .imgBox {margin-top: 19%;}
#banner .item .info .imgBox img { aspect-ratio: 3/4; object-fit: contain; }
#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: 20px; letter-spacing: 1px; font-weight: 400; }
#banner .item .info span.line { display: block; width: 130px; height: 2px; background: var(--secondary); margin: 30px 0 30px; }
#banner .item .info .subtitle { font-size: 20px; font-weight: 700; letter-spacing: 0.005em; line-height: 1.5; color: var(--secondary); text-transform: uppercase; margin-top: 1rem; }
#banner .item .info >div .txt .h3 { display: flex; flex-direction: column; }
#banner .item .info >div .txt .h3,#banner .item .info >div .txt .h3 span { word-spacing: 100vw; font-size: 54px; font-weight: 600; letter-spacing: 0.04em; line-height: 1.2; color: #0d0d0d; }
#banner .item .info >div .txt .h3 span { vertical-align: bottom; color: var(--primary); }
#banner .item .info >div .txt .text { margin-bottom: 25px; line-height: 120%; font-size: 18px; letter-spacing: 1px; font-weight: 400; color: #ffffff; background-color: var(--secondary); padding: 8px 24px; border-radius: 50px; }
#banner .item .info .bannerbtn { margin: 60px 0 0; display: flex; gap: 20px; }
#banner .item .info .bannerbtn a {background-color: var(--primary);text-align: center;padding: 15px 20px;border-top-left-radius: 30px;border-bottom-right-radius: 30px;display: inline-block;color: var(--white);font-weight: 500;letter-spacing: 1px;position: relative;overflow: hidden;z-index: 1;font-size: 15px;}
#banner .item .info .bannerbtn a:hover,#banner .item .info .bannerbtn a.btn2:hover { color: var(--white); height: 50%; opacity: 1; }
#banner .item .info .bannerbtn a.btn2:hover { border: 1px solid var(--secondary); }
#banner .item .info .bannerbtn a::before { position: absolute; content: ""; position: absolute; top: 0; left: 0; bottom: auto; right: auto; width: 100%; height: 0; opacity: 0; z-index: -1; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; }
#banner .item .info .bannerbtn a::after { position: absolute; content: ""; position: absolute; top: auto; left: auto; bottom: 0; right: 0; width: 100%; height: 0; opacity: 0; z-index: -1; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; }
#banner .item .info .bannerbtn a:hover::before,#banner .item .info .bannerbtn a:hover::after { background-color: #6ec5cf; height: 50%; opacity: 1; }
#banner .item .info .bannerbtn a svg { color: #fff; margin-left: 10px; }
#banner .item .info .bannerbtn a.btn2 { border: 1px solid var(--primary); background-color: #ffffff00; color: var(--primary); }
#banner .item .info .bannerbtn a.btn2 svg { color: var(--primary); }
#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 .info .txt p { max-width: 550px; }
#banner .clip { opacity: 0; transform: translateY(20px); transition: all .3s ease; transition-delay: .1s; }
#banner .Txt { opacity: 0; transform: translateY(40px); transition: all 2s ease; }
#banner .imgBox { opacity: 0; transform: translateY(60px); transition: all 1.2s ease; transition-delay: .3s; }
#banner .product-cta-box { opacity: 0; transform: translateY(60px); transition: all 1.2s ease; transition-delay: .4s; }
#banner.loaded .clip,#banner.loaded .Txt,#banner.loaded .imgBox,#banner .product-cta-box { opacity: 1; transform: translateY(0); }
#banner .product-cta-box{position:absolute;bottom: 0;background-color: var(--primary);text-align:center;padding: 30px 0;right: calc(8% + 11px);width: 210px;border-top-left-radius: 90px;border-bottom-right-radius: 90px;}
#banner .product-cta-box:hover{background: var(--secondary);}
#banner .product-cta-link{position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 2;}
#banner .circle-button{width: 52px;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;color: #e4f5ff;}
#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: 1460px){
	#banner .item .info >div .txt >* { font-size: 18px; }
	#banner .item:after { right: calc(10% + 10px); }
	#banner:after { bottom: 193px; }
	#banner .cta-text span {font-size: 20px;}
	#banner .product-cta-box { width: 200px; padding: 25px 0; }
	#banner .item:before { right: calc(10% + 200px); }
	#banner .item .info { grid-template-columns: 46% 45%; gap: 0px; }
	#banner .item .clip video { width: auto; height: 100%; }
}
@media screen and (max-width: 1280px){
	#banner .item .info >div .txt .h3,#banner .item .info >div .txt .h3 span { font-size: 37px; }
	#banner .item .info .subtitle { font-size: 17px; }
	#banner .item .info >div .txt >* { font-size: 16px; }
	#banner .item .info .bannerbtn { margin: 40px 0 0; }
	#banner .item:after { display: none; }
	#banner .item { height: 90vh; }
	#banner .item .info .Txt { margin-bottom: 50%; }
	#banner .item .info .imgBox { margin-top: 0; }
}
@media screen and (max-width:1024px) {
	#banner .item .clip video { width: auto; height: 100%; }
	#banner .item { height: 85vh; }
	#banner:before { display: none; }
	#banner .item .info >div .txt .h3,#banner .item .info >div .txt .h3 span { font-size: 27px; word-spacing: unset; }
	#banner .item .info .subtitle { font-size: 14px; }
	#banner .item .info >div .txt >* { font-size: 13px; }
}
@media screen and (max-width: 980px){
	#banner .mobile-hide-br,#banner:after { display: none }
	#banner .product-cta-box { width: 90%; display: flex; align-items: center; justify-content: center; right: 5%; gap: 30px; padding: 20px 0; border-top-left-radius: 60px; border-bottom-right-radius: 60px; margin: auto; }
	#banner .circle-button { margin: 0; width: 45px; }
	#banner .item:before,#banner .item:after { display: none; }
	#banner .item .clip { border-bottom-left-radius: 100px; border-bottom-right-radius: 100px; }
}
@media screen and (max-width: 640px){
	#banner .item .info span.line { margin: 20px 0 20px; width: 80px; }
	#banner .info .txt p { width: 240px; }
	#banner .info .txt p.text { width: auto; }
	#banner .item .info >div .txt .text { font-size: 14px; margin-bottom: 10px; }
	#banner .item .info { display: flex; flex-direction: row; padding: 0 20px; width: calc(100% - 40px); align-items: center; justify-content: flex-start; }
	#banner .item .info .imgBox { width: 60%; position: absolute; right: -30px; bottom: 20px; }
	#banner .item .info .bannerbtn { display: flex; flex-direction: column; gap: 10px; width: 170px; }
	#banner .item .info .bannerbtn a { font-size: 14px; padding: 15px 20px; }
	#banner .item .info .bannerbtn a.btn2 { display: none; }
	#banner .item .info .Txt { margin-bottom: 0; width: 80%; }
}
@media screen and (max-width: 640px){
    #banner .item .info >div .txt .h3{font-size: 22px;word-spacing: 100vw;gap: 5px;}
	#banner .item {height: 76vh;}
}