#banner { position: fixed; margin-bottom: 0; width: 100%; top: 0; left: 0; z-index: 990; }
#banner .slick-slider { margin-bottom: 0; }
#banner .slick-slider  .class-to-style{
    position: absolute;
    right: 0px;
    z-index: 99999;
    bottom: 20px;
    line-height: 180%;
}
#banner .slick-slider .class-to-style b:hover{
    color:#e9b570;
}
#banner .scrollBox:hover p{
    color:#eacba2;
}
#banner .slick-slider .class-to-style b{
    padding: 0 10px;
    font-weight: 100;
    font-size: 20px;
    line-height: 180%;
    vertical-align: middle;
    color: white;
}
#banner .slick-slider  .class-to-style .fa-angle-right{width: 90px;font-size: 22px;color: white;line-height: 180%;}
#banner .slick-slider  .class-to-style .fa-angle-left{width: 290px;font-size: 22px;color: white;vertical-align: middle;line-height: 180%;}
#banner .slick-slider  .class-to-style .fa-angle-left:before{
    vertical-align: middle;
}
#banner .slick-slider .class-to-style .fa-angle-right:before{
    vertical-align: middle;
}
#banner .main-slider .item a {position: relative;width: 100%;height: 100vh;background: rgb(0 0 0 / 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; }
.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;color: white;}
#banner .scrollBox .line {margin: 20px auto 0;width: 13px;height: 1px;background: #fff;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;background: white;}
#banner .scrollBox .arrow-line:before {width: 1px;height: 40px;background: #ffffff;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 5px 1px 5px;border-color: #fff 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: calc(100vh);}

@media screen and (max-width:980px) {
    #banner .main-slider .item a{
    height: calc(100vh - 75px);
}
}
@media screen and (max-width: 640px) {
    #banner .slick-slider .class-to-style b{font-size:16px;}
    #banner .scrollBox p{font-size:16px;}
    #banner .scrollBox{width:60px;left: calc((100% - 55px) / 2);bottom: 80px;}
    #banner .slick-slider  .class-to-style .fa-angle-right{width: 90px;font-size: 22px;color: white;line-height: 180%;}
#banner .slick-slider  .class-to-style .fa-angle-left{width: 370px;font-size: 22px;color: white;vertical-align: middle;line-height: 180%;}
#banner .slick-slider .class-to-style{display: none!important;}
#banner .scrollBox{}
}
@media screen and (max-width:480px) {
     #banner .slick-slider  .class-to-style .fa-angle-right{width: 75px;font-size: 22px;color: white;line-height: 180%;}
    #banner .slick-slider  .class-to-style .fa-angle-left{width: 293px;font-size: 22px;color: white;vertical-align: middle;line-height: 180%;}
    #banner .main-slider .item a{height: calc(75vh - 173px);}
    #bannerBox {width: 100%;height: calc(75vh - 173px);}
    #banner .scrollBox{
    bottom: 10px;
    }
    #banner .scrollBox .line{
    margin-top: 0;
    }
    #banner .scrollBox .arrow-line{
        height:30px;
    }
}