#banner { position: fixed; margin-bottom: 0; width: 100%; top: 0; left: 0; z-index: 990; }
#banner .slick-slider { margin-bottom: 0; }
#banner .main-slider .item a {position: relative;width: 100%;height: 600px;background: rgba(253, 253, 253, .15);display: block;z-index: 2;}
#banner .main-slider .item .banner-txt { position: absolute; width: 90%; top: 25vh; left: 5%; z-index: 1; }

.banner-txt {position: absolute;width: 100%;top: 15%;left: 0;z-index: 11;display: none;}
.banner-txt h2 { font-size: 50px; transform: translateX(-30px); opacity: 0; }
.banner-txt p { font-size: 18px; transform: translateX(30px); transition-delay: .5s; opacity: 0; }
.slick-current.slick-active .banner-txt h2 ,
.slick-current.slick-active .banner-txt p { transform: translateX(0); opacity: 1; }

#banner .scrollBox {position: absolute;width: 45px;left: calc((100% - 45px) / 2);bottom: 20px;display: none;}
#banner .scrollBox a { position: absolute; width: 100%; height: 100%; display: block; }
#banner .scrollBox p { margin-right: -1px; text-align: center; font-size: 10px; letter-spacing: .135em; }
#banner .scrollBox .line { margin: 20px auto 0; width: 13px; height: 1px; background: #000; display: block; animation: scrollline 2.8s cubic-bezier(.86,0,.07,1) infinite; -webkit-animation: scrollline 2.8s cubic-bezier(.86,0,.07,1) infinite; }
#banner .scrollBox .arrow-line { position: relative; overflow: hidden; margin: auto; width: 1px; height: 40px; display: block; }
#banner .scrollBox .arrow-line:before { width: 1px; height: 40px; background: #000; display: block; animation: scrollarrow1 2.8s cubic-bezier(.86,0,.07,1) infinite; -webkit-animation: scrollarrow1 2.8s cubic-bezier(.86,0,.07,1) infinite; content: ""; }
#banner .scrollBox .arrow-top { margin: auto; display: block; width: 0; height: 0; border-style: solid; border-width: 5px 3px 0 3px; border-color: #000 transparent transparent transparent; animation: scrollarrow2 2.8s cubic-bezier(.86,0,.07,1) infinite; -webkit-animation: scrollarrow2 2.8s cubic-bezier(.86,0,.07,1) infinite; }

@keyframes scrollline{ 0%, 80%, to { transform:scale(0); } 50% { transform:scale(1); } }
@-webkit-keyframes scrollline{ 0%, 80%, to { -webkit-transform:scale(0); } 50% { -webkit-transform:scale(1); } }
@keyframes scrollarrow1 { 0% { transform: translateY(-100%); } 50% { transform: translateY(0%); } to { transform: translateY(100%); } }
@-webkit-keyframes scrollarrow1 { 0% { -webkit-transform: translateY(-100%); } 50% { -webkit-transform: translateY(0%); } to { -webkit-transform: translateY(100%); } }
@keyframes scrollarrow2 { 0%, 20% { transform: rotateY(-270deg); } 50% { transform: rotateY(0deg); } to{ transform: rotateY(270deg); } }
@-webkit-keyframes scrollarrow2 { 0%, 20% { -webkit-transform: rotateY(-270deg); } 50% { -webkit-transform: rotateY(0deg); } to{ -webkit-transform: rotateY(270deg); } }

/* bannerBox */
#bannerBox {width: 100%;height: 600px;}

@media screen and (max-width:980px) {
    #banner .main-slider .item a{ height: 440px;}
    #bannerBox {height: 440px;}
}
@media screen and (max-width:640px) {
}
@media screen and (max-width:480px) {
    #banner .main-slider .item a{ height: 220px;}
    #bannerBox {height: 220px;display: none;}
    #banner{
    position: relative;
    margin-top: 70px;
}
}