#banner {
    position: fixed;
    margin-bottom: 0;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 990;
    height: 50%
}

#banner .slick-slider {
    margin-bottom: 0;
    height: 100%
}

#banner .main-slider .item {
    position: relative
}

#banner .main-slider .item a {
    position: relative;
    width: 100%;
    height: 100%;
    background: rgb(253 253 253 / .15);
    display: block;
    z-index: 2
}

.slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
    height: 100%
}

.slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block;
    height: 100%
}

#banner .main-slider .item video,#banner .main-slider .item iframe {
    position: absolute;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0
}

#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
}

.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
}

#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 #fff0 #fff0 #fff0;
    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 {
    width: 100%;
    height: 50vh
}

@media (max-width: 768px) {
    #bannerBox {
        height: 25vh;
    }

    #banner {
        margin-top: 50px;
        height: 20vh;
    }
}

/*#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{position:relative}#banner .main-slider .item a{position:relative;width:100%;height:100vh;background:rgb(253 253 253 / .15);display:block;z-index:2}#banner .main-slider .item video,#banner .main-slider .item iframe{position:absolute;width:100%;height:100vh;top:0;left:0}#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}.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}#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 #fff0 #fff0 #fff0;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{width:100%;height:100vh}