@font-face{font-family:'ChenYuluoyan-Thin';font-style:normal;font-weight:normal;src:url(/fonts/chenyuluoyan/ChenYuluoyan-Thin.ttf) format('truetype');}
#banner{position:relative;margin-top:100px}
#banner .slick-slide { min-width: 100%; }
#banner .item{position:relative}
#banner .item a.bnmore{position:absolute;width:100%;height:100%;top:0;left:0}
#banner .info{max-width:100%;padding:130px 0 0;z-index:2;width:800px;height:100%;position:absolute;top:0;left:15vw;right:0;bottom:0;text-align:center;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
#banner .info h3{display:block;line-height:130%;letter-spacing:1px;font-size: 55px;font-weight:500;word-break:keep-all;word-spacing:100vw;max-width:100%;text-align:left;font-family: 'ChenYuluoyan-Thin', serif;}
#banner .info .subtitle{text-align:center;font-size: 25px;margin-top: 12px;letter-spacing:1px;text-transform: uppercase;font-family: 'ChenYuluoyan-Thin', serif;}
#banner .flyman{position:absolute;z-index:3;bottom:0;right:14vw}
#banner .flyman img{width:30vw}
#banner .info p{letter-spacing:1px;line-height:190%;width: 80%;position:relative;padding-top:30px;margin: 40px 0 0;font-size: 18px;font-weight: 500;text-align: justify;}
#banner .info p::before{content:"";position:absolute;width:60px;height:1px;background-color:#878787;top:0;left:0%}
#banner .info .bannerBtn{padding: 6% 0 0;}
#banner .info .bannerBtn a{text-transform:uppercase;display:inline-block;padding:0;text-align:center;-webkit-transition:all 0.5s;transition:all 0.5s;color:#fff;position:relative;letter-spacing:1px;width:238px;height:57px;line-height:57px;background-color: var(--complement);overflow:hidden;border-radius: 50px;}
#banner .info .bannerBtn a span{z-index:10;position:relative}
#banner .info .bannerBtn a:before{content:'';width:7px;height:7px;display:block;border-top:1px solid #fff;border-right:1px solid #fff;position:absolute;top:calc(50% - 4px);left:auto;bottom:auto;right:32px;-webkit-transform:rotate(45deg);transform:rotate(45deg);z-index:10}
#banner .info .bannerBtn a:hover{-webkit-box-shadow:0 3px 10px rgba(0,0,0,0.15);box-shadow:0 3px 10px rgba(0,0,0,0.15)}
#banner .info .btn1::after{content:'';position:absolute;right:-10%;top:0;z-index:0;width:0;height:100%;-webkit-transform:skew(-30deg);transform:skew(-30deg);background-color: var(--secondary);-webkit-transition:all .5s;transition:all .5s}
#banner .info .btn1:hover:after{width:120%;left:-10%;right:auto;-webkit-transition:all .5s;transition:all .5s}
#banner .img{position:relative;width:100vw;height:calc(95vh - 100px);background:no-repeat 50% / cover}
#banner .img video,#banner .img iframe{position:absolute;width:100%;height:100%;left:0;top:0}
#banner .img:before{content:'';position:absolute;left:0;top:0;z-index:1;width:100%;height:100%;background-color:rgb(0 0 0 / 0%);pointer-events:none}
#banner .img:after{content:'';position:absolute;left:0;top:0;z-index:1;width:100%;height:100%;background-image:url(/images/18/BN-logo.png);background-repeat:no-repeat;background-position:right;pointer-events:none;opacity:0.15}
#banner .item iframe{position:absolute;width:100%;height:100%;top:0;left:0}
#banner .item video{overflow:hidden;position:absolute;width:100%;height:100%;object-fit:cover;object-position:50% 10%;top:50%;left:50%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%)}
#banner .baScro{position:absolute;bottom:10px;right:calc(50% - 55px);z-index:10}
#banner .baScro a{width:110px;height:60px;cursor:pointer;display:flex;align-items:center;justify-content:center}
#banner .baScro a span{width:1px;height:60px;background:rgb(255 255 255 / 40%);display:flex;justify-content:center;position:absolute}
#banner .baScro a span:after{content:'';width:7px;height:7px;display:block;background:#fff;position:absolute;animation-name:fish;animation-direction:alternate;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:2s}
#banner .slick-slider{margin-bottom:0}


@keyframes fish{0%{top:0}100%{top:100%}}

@media screen and (max-width:1440px) {
	#banner .info h3{font-size: 34px;}
    #banner .info{left: 10vw;padding: 80px 0 0;}
}
@media screen and (max-width:1280px) {
	#banner .img {width: 100vw;height: 80vh;}
	#banner{margin-top:60px}
    #banner .flyman{right: 6vw;}
}
@media screen and (max-width:1024px) {
    #banner .item video{height: 100%; width: auto;}
	#banner .info{left: 6vw;width: 65vw;}
	#banner .flyman{right: -4vw;width: 45%;}
	#banner .flyman img{width: 55vw;}
}
@media screen and (max-width:768px) {
	#banner .info p {font-size: 16px;}
    #banner .info .bannerBtn a{width:200px;height:47px;line-height:47px;font-size:14px}
	#banner .img{background-position: 25% 50%;}
}
@media screen and (max-width:640px){
    #banner .flyman img{width: 90vw;}
    #banner .info .bannerBtn{display:none;}
	#banner{margin-top:80px}
	#banner .info{width:100vw;padding:0 0 57px}
}
@media screen and (max-width:500px) {
    #banner .flyman{bottom: -16vw;right: 5vw;width: 71%;}
    #banner .info h3{font-size: 30px;}
	#banner .img {width: 100vw;}
	#banner .info{width: 90%;bottom: unset;top: 14vw;height: auto;left: 5%;}
	#banner .baScro{display:none;}
	#banner .info p{font-size: 15px;width: 100%;font-weight: 400;margin-top: 20px;padding-top: 20px;}
    #banner .info img{width:80%;}
	#banner .img {width: 100vw;height: 85vh;}
}