#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;background: no-repeat 50% 10% / cover;}
#banner .main-slider .item a {position: relative;width: 100%;height: 100vh;background: rgb(255 255 255 / 0%);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;display: none;}

.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: 60px;bottom: 10px;left: 50%;transform: translateX(-50%);}
#banner .scrollBox a { position: absolute; width: 100%; height: 100%; display: block; }
#banner .scrollBox p {margin-right: -1px;text-align: center;font-size: 12px;letter-spacing: .135em;color: #c6b58c;text-transform: uppercase;}
#banner .scrollBox .line {margin: 10px auto 0;width: 13px;height: 1px;background: #c6b58c;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: #c6b58c;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: #c6b58c 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: 100vh; }

@media screen and (max-width:980px) {
  #bannerBox {height: 70vh;}
  
#banner .slick-slider {
    margin-top: 90px;
}
#banner .main-slider .item a {
    height: 60vh;
}
#banner .scrollBox{
    display: none;
}
}
@media screen and (max-width:640px) {
  #banner .slick-slider {
    margin-top: 70px;
}
}
@media screen and (max-width:480px) {
  #bannerBox {height: 44vh;}
#banner .main-slider .item a {height: 40vh;}
}