#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: rgba(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 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; }