/* banner */
#banner {z-index: 3;margin-top: 125px;}
#banner .item {height: 75vh;}
#banner .item .clip >* {min-width: 100%;width: 100%;}
#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 8%; */width: calc(100% - 0px);z-index: 20;}
#banner .item .info >div .txt {-webkit-transition-delay: .2s;transition-delay: .2s;transform: scaleY(0);-webkit-transform: scaleY(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 >* {padding: 10px 15px;max-width: calc(100% - 30px);font-size: 22px;letter-spacing: 2px;font-weight: 300;color: #fff;}
#banner .item .info >div .txt img{animation: scale_banner 2s linear infinite;transform: scale(.85);-webkit-transform: scale(.85);}
@keyframes scale_banner { 0% { transform: scale(1); }50% { transform: scale(.85); } 100% { transform: scale(1); }}
#banner .item .info >div .txt h3 {line-height: 140%;font-size: 40px;font-weight: 300;letter-spacing: 3px;}

#banner .info {position: absolute;width: 56%;top: 58vh;left: 16%;z-index: 3;display: none;}
#banner .info h3 {display: block;line-height: 140%;color: #fff;font-size: max(3.5*(1vw + 1vh) / 2, 20px);margin-top: 15px;font-weight: 400;letter-spacing: 3px;}
#banner .info em {margin-top: 10px;text-align: center;font-weight: 400;color: #fff;font-family: "Oswald", sans-serif;font-style: unset;font-size: max(6 * (1vw + 1vh) / 2, 35px);text-transform: uppercase;line-height: 1.3;}

p.baScro{position:absolute;bottom: 60px;left: 40px;overflow: hidden;z-index: 10;}
p.baScro a{position: relative;cursor: pointer;display: flex;align-items: center;justify-content: center;flex-direction: row;writing-mode: vertical-lr;}
p.baScro a svg{width: 17px;height: 17px;fill: var(--white);margin-top: 10px;}
p.baScro a b{font-size: 14px;font-weight: 400;color: var(--white);margin-bottom: 10px;letter-spacing: 1px;-webkit-animation-name: mouse;-webkit-animation-iteration-count: infinite;-webkit-animation-timing-function: linear;-webkit-animation-duration: 1s;}
p.baScro a span{width: 26px;height: 40px;background-color: rgb(255 255 255 / 18%);border-radius: 50px;display: flex;align-items: center;justify-content: center;position: relative;}
p.baScro a span:after{content:'';width: 6px;height: 6px;background: #fff;border-radius: 50px;top: 10px;position: absolute;}
p.baScro a:hover b:after{transition: transform 0.2s cubic-bezier(0.25,1,0.5,1);top: 72px;width: 100px;}
p.baScro a:hover span:after{width: 10px;height: 10px;top: 20px;}
@keyframes mouse{0%{margin-bottom:40px}50%{margin-bottom:50px;}100%{margin-bottom:40px;}}

#banner .item.slick-current .info >div .txt { transform: scaleY(1); -webkit-transform: scaleY(1); }
#banner .allwrap{position:absolute;right: 0;bottom: 0;letter-spacing: 12px;width: 100%;}
#banner .allwrap #canvas-container{position:absolute;bottom:610px}

.bottombtn{
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    z-index: 100;
    width: 97%;
}
.bannerbtn { display: flex; justify-content: space-between; align-items: center; }
#banner .fixTxt{position:absolute;right: -12%;bottom: -31px;letter-spacing: .5vw;color: #fff;font-size: 5.6vw;font-family: "Tenor Sans", serif;width: 100%;}
#banner_prev { -webkit-transform: scaleX(-1); transform: scaleX(-1); position: relative; }
#banner_prev svg, #banner_next svg {width: 20px;height: 20px;fill: var(--white);display: flex;flex-direction: column;align-items: center;justify-content: center;background-color: hsl(0deg 0% 100% / 20%);border-radius: 150px;padding: 14px;}


@media screen and (max-width: 1440px){
	p.baScro{bottom:40px;left:40px}
	#banner .info{width:100%;left:6%;top:33vh}
    #banner .item {height: 62vh;}
}
@media screen and (max-width: 1280px){
    #banner .item {height: 68vh;}
	p.baScro{bottom:40px;left: 40px;}
    #banner .info{width:100%;left:6%;top:16vh}
    #banner .item {height: 55vh;}
    #banner {margin-top: 79px;}
    
	p.baScro,.allwrap,bottombtn{display:none}
}
@media screen and (max-width: 1024px){
    p.baScro{display:none}
	#banner .item .info >div{}
	#banner .item .info >div .txt h3{font-size:28px}
	#banner .item .info >div .txt >*{font-size:19px}
	#banner .item .info >div .txt img{width: 70%;margin: 0 auto;}
    #banner {margin-top: 80px;}
    #banner .fixTxt{bottom: 0;}
   #banner .item {height: 44vh;}
 }
@media screen and (max-width: 960px){
       #banner .item {height: 34vh;}
    .bottombtn{
    display: none;
}


}
@media screen and (max-width: 640px){
       #banner .item {height: 24vh;}


}
@media screen and (max-width: 480px){
       #banner .item {height: 18vh;}


}