#banner .slick-slide{position:relative;overflow:hidden}
#banner .webframe{width: 100%;}
#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;top: 10px;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{width:100%;}
	#banner .slick-slide b{width:100%;}
}
@media (max-width: 768px) {
#banner video,#banner iframe{display:none}
#banner .slick-slide h2{font-size: 30px;}
#banner .slick-slide p{    margin-top: 30px;}
#banner .slick-slide .art{    width: calc(50% - 100px);
    padding: 50px 50px;}
#banner .slick-slide b{ display:none;}
}
@media (max-width: 640px) {
	#banner{margin-top: 55px;}
	#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 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: 100px 0;}
	#banner .slick-dots li{margin:0;}
}