#banner{width: 100%;z-index: 2;position:relative;overflow:hidden;-webkit-animation:clipPathAni 0.8s ease-in-out 0.4s both;animation:clipPathAni 0.8s ease-in-out 0.4s both}
@keyframes clipPathAni{0%{opacity:0;-webkit-clip-path:inset(0 100% 0 0);clip-path:inset(0 100% 0 0)}
100%{opacity:1;-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0)}
}
#banner .slick-dotted.slick-slider{margin:0}
#banner .info .txt{opacity:0;transform:translateX(-30px) scale(0.95);animation:swayIn 1.5s ease forwards;animation-delay:0.9s}

@keyframes swayIn {
	0%{opacity:0;transform:translateX(-30px) scale(0.95)}
	30%{opacity:1;transform:translateX(10px) scale(1.02)}
	60%{transform:translateX(-5px) scale(0.98)}
	80%{transform:translateX(3px) scale(1.01)}
	100%{opacity:1;transform:translateX(0) scale(1)}
}

#banner .img{overflow:hidden;display:inline-block}
#banner img{position:relative;width:100vw;height: 90vh;min-width:100%}
#banner .img video,#banner .img iframe{position:absolute;width:100%;height:100%;left:0;top:0}
#banner .item video{overflow:hidden;position:absolute;z-index:0;top:0;width:120%;height:auto}
#banner .pos_abs{width:100%;height:100%;top:0;left:0;z-index:10}
#banner .info{min-width:100%;height:100%;display:flex;align-items:center;z-index:20}
#banner .info #imgText{position:relative;width:100%;}
#banner .info #imgText{opacity:0;transform:translateY(40px) scale(0.95);animation:floatUp 1.5s ease-out forwards;animation-delay:0.9s}

@keyframes floatUp {
	0%{opacity:0;transform:translateY(40px) scale(0.95)}
	100%{opacity:1;transform:translateY(0) scale(1)}
}

#banner .info #imgText:before{width: 155px;left: 1%;background: url(/images/39/img-bn-left.png) no-repeat 50% 0;}
#banner .info #imgText:after{width: 82px;right: 1%;background: url(/images/39/img-bn-right.png) no-repeat 50% 0;z-index: 32;}
#banner .info #imgText:before,#banner .info #imgText:after{
    content: '';
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    height: 83vh;
    background-size: contain;
}
#banner .info .txt *{color:var(--white);-webkit-transform:translateY(15px);transform:translateY(25px);transition: all 0.3s ease-in-out;-webkit-transition: all 0.3s ease-in-out;}
#banner .info .txt{display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-pack:center;justify-content: center;padding:0;z-index:2;width: 76%;height: 50%;margin:auto;position:absolute;top: 0;left:0;right:0;bottom:0;align-items: flex-start;}
#banner .info .txt h2{font-size: 3rem;font-weight: 500;position: relative;letter-spacing: 2px;}
#banner .info .txt p{font-weight: 400;font-size: 1.8rem;letter-spacing:1px;line-height: 170%;}
#banner .slick-current .info .txt p{transition-delay:.6s;-webkit-transition-delay:.6s;animation-name:fadeInUp;-webkit-animation-name:fadeInUp;animation:fadeIn 1s both;-webkit-animation:fadeIn 1s both}
#banner .slick-current .info .txt *{-webkit-transform:translateY(20px);transform:translateY(20px);transition-delay:.3s;-webkit-transition-delay:.3s;-webkit-transform:translateX(0) scale(1);transform:translateX(0) scale(1)}
#banner a:focus,
#banner button:focus {outline: 3px solid #000000;outline-offset: 4px;}
#banner .item:before{content:'';position:absolute;height: 100%;width: 100%;bottom: 0;left: 0;background: url(/images/39/img-bn-bg.png) no-repeat 50% 0;background-size:cover;z-index: 12;}
#banner .item:after{position:absolute;width:100%;height:100vh;background:linear-gradient(to top,rgb(0 0 0 / 0%) 50%,#000 100%);top:0;left:0;z-index: 11;content:"";opacity:.7}
#banner .slick-dots{bottom: 0;width: auto;display: flex !important;flex-direction: column;align-items: center;left: 2%;justify-content: center;height: 100%;position: absolute;}
#banner .slick-dots li{margin: 5px 0;width: 32px;height: 32px;display: inline-flex;flex-direction: row;justify-content: center;align-items: center;}
#banner .slick-dots li button{border: 1px solid rgb(255 255 255 / 0);border-radius: 50px;width: 32px;height: 32px;display: flex;flex-direction: column;align-items: center;justify-content: center;color: #ffffff;}
#banner .slick-dots li.slick-active button{border: 1px solid #ffffff;}
#banner .slick-dots li button:before{color: #fff;top: 50%;left: 50%;transform: translate(-50%, -50%);opacity: 1;}
#banner .slick-dots li:before{display: none;}

@media screen and (max-width: 1640px) {
    #banner:before{left: 5vw;}
    #banner .info .txt{width: 65%;}
}
@media screen and (max-width: 1470px) {
	#banner:before{left: 5.5vw;}
}
@media screen and (max-width: 1280px) {
    #banner img{height: 75vh;}
	#banner .info .txt{display: flex;justify-content: center;width: 90%;align-items: center;}
	#banner .item video{width: auto;height: 100%;}
    #banner .info #imgText{display: none;}
}
@media screen and (max-width: 960px) {
	#banner .info .txt p{font-size: 1.2rem;}
	#banner .info .txt h2{font-size: 2.4rem;text-align: center;}
}
@media screen and (max-width: 560px) {
	#banner .item video{left: -50%;}
	#banner .info .txt h2{font-size: 1.6rem;}
	#banner .info .txt p{font-size: 1rem;}
}