@import url('https://fonts.googleapis.com/css?family=Raleway');
#banner .bannerTran{display:-ms-flexbox;display:-webkit-flex;display:-webkit-box;display:flex;margin:0 auto;position:relative;overflow:hidden;height:auto;min-height:200px;z-index:1;min-height:34.4271vw}
.swiper-wrapper .slick-slider,.swiper-wrapper .slick-slider .slick-list,.swiper-wrapper .slick-slider .slick-track,.swiper-wrapper .slick-slider li{width:100%;height:100%;display:block}
#banner .slick-slide{position:relative;overflow:hidden}

#banner .slick-slide >a:before , #banner .slick-slide >a:after {position: absolute;width: 100%;height: 100%;opacity: 1;top: 0;left: 0;z-index: 1;content: "";}
#banner .slick-slide{position:relative;overflow:hidden}
#banner .slick-slide >a{display:block;position:relative;background-repeat:no-repeat;background-position:50% 50%;background-size:cover;overflow:hidden}
#banner .slick-slide a img{width:100%;height:100vh}
#banner .slick-slide .art{z-index:2;overflow:hidden;width:500px;position:absolute;left:calc(40% - 250px);bottom:35%}
#banner .slick-slide h2{font-size:60px;line-height:100%;color:#191919}
#banner .slick-slide p{margin-top:20px;font-size:17px}
#banner video,#banner iframe{width:100%;transform:scale(1.5);transform-origin:center;position:absolute;top:0;left:0;z-index:1}
#banner .slick-dots{bottom: 10%;text-align:left;margin-left: 10px;width:28px}
#banner .slick-dots li button:before,#banner .slick-dots li.slick-active button:before{color: #000000;}
#banner .slick-dots li button:before{text-shadow:0 0 5px #fff,0 0 5px #fff}
#views{width:100%}

@media (max-width: 1366px) {
        #banner .slick-slide a img{height: 710px;}
}


@media (max-width: 1024px) {
    #banner .slick-slide .art{bottom:30%}
    #banner .slick-slide h2{font-size:50px}
    #banner .slick-slide a img{height: 650px;}
    #banner video,#banner iframe{transform:scale(2)}
}
@media (max-width: 768px) {
    #banner {
    margin-top: 30px;
}
        #banner .slick-slide a img{height: 470px;}

    #banner video,#banner iframe{width: auto;height: 100%;transform: inherit;}
    #banner .slick-slide h2{font-size:40px}
    #banner .slick-slide .art{bottom:20%;width:80%;left:10%}
    #banner .slick-slide p{font-size:16px}
}
@media (max-width: 640px) {
    #banner .slick-slide a img{height: 240px;}
}
@media (max-width: 480px) {
    #banner .slick-slide h2{font-size:30px}
    #banner .slick-slide .art{bottom:15%}
}