#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; }
.slick-slide a img { width:100%; }
.slick-slide video,.slick-slide iframe,.slick-slide canvas { position:absolute; left:0; top:0; width:100%; height:100%; transform:scale(1.4); z-index:2; }
.slick-slide video,.slick-slide canvas { width:auto; transform:scale(1.4); }
#banner .slick-slide .art {position:absolute;z-index:3;width:calc(50% - 140px);top:0;right:0;color:#fff;height:calc(100% - 100px);background:rgba(28,28,28,0.71);padding:50px 70px;display: none;}
#banner .slick-slide h2 { font-size:50px; line-height:110%; text-align:left; margin-top:30%; width:70%; font-family:'Noto Serif TC',serif; text-shadow:0 0 5px rgba(0,0,0,0.72); }
#banner .slick-slide p { margin-top:40px; font-size:16px; line-height:130%; text-align:left; width:70%; text-shadow:0 0 2px rgba(0,0,0,0.72); }
#banner .slick-slide b { display:block; font-size:16px; line-height:110%; color:#ffffff; margin-top:65px; transition:all linear .2s; cursor:pointer; text-align:right; width:80%; position:relative; font-weight:normal; transition-delay:.4s; }
#banner .slick-slide b:after { content:''; width:40px; height:1px; background:#9e7242; display:block; position:absolute; right:60px; top:13px; transition:all linear .2s; transition-delay:.2s; }
#banner .slick-slide b:before { content:''; width:13px; height:1px; background:#9e7242; display:block; position:absolute; right:58px; top:5px; transform:rotate(35deg); transform-origin:0 0; transition:all linear .2s; }
#banner .slick-dots {text-align:right;bottom: 15px;right:10px;width:auto;height:30px;}
#banner .slick-dots li button:before,#banner .slick-dots li.slick-active button:before { color:#fff; font-size:12px; }
#views { width:calc(100% - 90px); margin-left:90px; }

@media (min-width:1025px) {
	#banner .slick-slide a:hover b:after { width:0; }
	#banner .slick-slide a:hover b:before { transform:rotate(0deg); top:13px; width:0; right:60px; }
	#banner .slick-slide a:hover b { color:#9e7242; }
}
@media (max-width:1280px) {
	#banner .slick-slide h2 { margin-top:20%; font-size:40px; }
}
@media (max-width:1024px) {
	#banner {margin-top: 65px;}
	#banner .webframe { width:100%; }
	#banner .slick-slide h2 { width:100%; margin-top:10%; font-size:35px; }
	#banner .slick-slide p , #banner .slick-slide b { width:100%; }
}
@media (max-width:768px) {
	#banner .slick-slide h2 { font-size:30px; }
	#banner .slick-slide p { margin-top:30px; }
	#banner .slick-slide .art { width:calc(50% - 100px); padding:50px; }
	#banner .slick-slide img{
    padding: 60px 0;
}
	#banner .slick-slide b { display:none; }
}
@media (max-width:640px) {
	#banner {margin-top: 75px;}
	#banner .slick-slide h2 { font-size:24px; }
	#banner .slick-slide p { margin-top:20px; font-size:15px; }
}
@media (max-width:480px) {
	#banner .slick-slide .art { width:calc(80% - 80px); background:none; padding:40px; }
	#banner .slick-slide h2 { font-size:22px; text-shadow:0 0 2px rgba(0,0,0,0.72),0 0 2px rgba(0,0,0,0.72); }
	#banner .slick-slide p { text-shadow:0 0 1px rgba(0,0,0,0.72),0 0 1px rgba(0,0,0,0.72); }
	#banner .slick-slide a img { padding:30px 0; }
	#banner .slick-dots li { margin:0; }
}