@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 { display: block; position: relative; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; width: calc(100% - 550px); overflow: hidden; float: right; }
#banner .slick-slide a img { width: 100%; }

.video a, .youtube a { text-shadow: 0 0 7px #fff; }

#banner .slick-slide .art { overflow: hidden; width: 600px; position: absolute; left: 0; top: 0; height: 100%; z-index: 2; margin: 50px 100px; padding: 0 40px; }
#banner .slick-slide .art a.link { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
#banner .slick-slide h2 { font-size: 40px; line-height: 100%; font-weight: 400; margin-top: 300px; }
#banner .slick-slide p { margin-top: 50px; line-height: 180%; font-size: 18px; }
#banner .slick-slide b { margin-top: 150px; display: block; }
#banner .slick-slide b a { font-size: 15px; color: #595959; border-bottom: 3px solid #878787; font-family: 'Raleway', sans-serif; transition: all linear .3s; }
#banner video, #banner iframe { position: absolute; top: 0; left: 550px; z-index: 1; width: calc(100% - 550px); height: 100%; transform: scale(1.5); transform-origin: left center 0; }
#banner .slick-dots { bottom: 60%; text-align: left; margin-left: 20px; width: 28px; }
#banner .slick-dots li button:before, #banner .slick-dots li.slick-active button:before { color: #cbaecb; }
#banner .slick-dots li button:before { text-shadow: 0 0 5px #fff, 0 0 5px #fff; }

#views { width: 100%; }

@media (min-width: 1025px) {
	#banner .slick-slide b a:hover { opacity: .7; }
}
@media (max-width: 1680px) {
	#banner .slick-slide h2 { margin-top: 200px; }
}
@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: 94px; }
	#banner .slick-slide h2 { margin-top: 150px; font-size: 30px; }
	#banner .slick-slide b { margin-top: 100px; }
	#banner .slick-slide p { margin-top: 40px; }
	#banner .slick-slide>a { width: calc(100% - 450px); }
	#banner .slick-slide .art { width: 500px; }
	#banner video, #banner iframe { left: 450px; width: calc(100% - 450px); }
}
@media (max-width: 1280px) {
	#banner .slick-slide>a { width: calc(100% - 400px); }
	#banner .slick-slide .art { width: 450px; }
	#banner video, #banner iframe { left: 400px; width: calc(100% - 400px); }
}
@media (max-width: 1024px) {
	#banner { margin-top: 56px; }
	#banner .slick-slide>a { width: 100%; }
	#banner .slick-slide .art { height: calc(100% - 100px); width: calc(100% - 280px); background: rgba(255, 255, 255, 0.27); }
	#banner .slick-slide h2 { margin-top: 15%; }
	#banner video, #banner iframe { left: 0; width: 100%; }
}
@media (max-width: 768px) {
	.video a, .youtube a { text-shadow: 0 0 3px #fff, 0 0 3px #fff; }
	#banner .slick-slide .art { margin: 50px 20px 50px 100px; height: calc(100% - 100px); width: calc(100% - 200px); }
	#banner .slick-slide h2 { margin-top: 10%; }
	#banner .slick-dots { margin-left: 0; bottom: 10px; }
	#banner .slick-slide b { margin-top: 60px; }
}
@media (max-width: 480px) {
	#banner .slick-slide .art { padding: 50px 20px 50px 70px; width: calc(100% - 90px); }
	#banner .slick-slide h2 { margin-top: 0; font-size: 24px; }
	#banner .slick-slide p { margin-top: 20px; }
}