#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; }
#banner .slick-slide a:before { position: absolute; background: url(/images/14/banner-dot.png); opacity: .5; width: 100%; height: 100vh; top: 0; left: 0; z-index: 2; content: ""; }
#banner .slick-slide a { display: block; position: relative; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; width: 100%; height: 100%; overflow: hidden; }
#banner .slick-slide a img { width: 100%; height: 100vh; }
.video a, .youtube a { text-shadow: 0 0 7px #fff; }
#banner .slick-slide a .art { position: absolute; width: 800px; height: 145px; left: calc(50% - 400px); top: calc(50% - 72px); z-index: 2; text-shadow: 0 0 8px #484848; overflow: hidden; }
#banner .slick-slide a h2 { font-size: 50px; line-height: 100%; text-align: center; color: #fff; font-weight: 400; }
#banner .slick-slide a p { margin-top: 30px; line-height: 110%; font-size: 30px; color: #fff; text-align: center; }
#banner video, #banner iframe { position: absolute; width: 100%; height: 100vh; transform: scale(1.4); top: 0; right: 0; z-index: 1; }
#banner .slick-dots { bottom: 60%; text-align: left; margin-left: 20px; width: 28px; }
.slick-dots li button:before { text-shadow: 0 0 5px #fff, 0 0 5px #fff; }

#banner .slick-slide::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; }

#views { position: fixed; top: 0; left: 0; bottom: 0; width: 100%; height: 100vh; }
#content { position: relative; margin-top: 100vh; background: #fff; }
#content:after { content: ''; width: 0; height: 0; border-style: solid; border-width: 0 0 150px 100vw; border-color: transparent transparent #319ad4; position: absolute; top: -150px; }
.page #content:after { border-color: transparent transparent #f6f6f6; }

@media (max-width:1440px) {
	#banner .slick-slide a h2 { font-size: 40px; }
	#banner .slick-slide a p { font-size: 22px; }
	#banner .slick-slide a .art { top: calc(50% - 27px); height: auto; }
	#content:after { border-width: 0 0 100px 100vw; top: -100px; }
}
@media (max-width:1024px) {
	#banner .slick-slide a img { height: 700px; }
	#content { margin-top: 700px; }
	#banner .slick-slide a .art { width: 80%; left: 10%; }
}
@media (max-width:768px) {
	#banner video, #banner iframe { width: auto; }
	.video a, .youtube a { text-shadow: 0 0 3px #fff, 0 0 3px #fff; }
	#banner .slick-slide a .art { top: 40%; }
}
@media (max-width:480px) {
	#banner .slick-slide a img { height: 550px; }
	#content { margin-top: 550px; }
	#content:after { border-width: 0 0 70px 100vw; top: -70px; }
	#banner .slick-slide a h2 { font-size: 32px; }
	#banner .slick-dots { bottom: 10%; }
}