#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% - 0px);background: rgba(28, 28, 28, 0.71);padding: 0px 70px;}
#banner .slick-slide h2{font-size: 60px;line-height:110%;text-align: center;margin-top: 15%;width: 100%;/* 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: 40px;line-height: 130%;text-align: center;width: 100%;text-shadow: 0 0 2px rgba(0, 0, 0, 0.72);}
#banner .slick-slide b{display: block;display: none;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;display: none;}
}
@media (max-width: 1440px) {
#banner .slick-slide h2 {
    margin-top: 15%;
    width: 100%;
}
#banner .slick-slide p {
    width: 100%;
}
}
@media (max-width: 1280px) {
	#banner .slick-slide h2{    margin-top: 20%;    font-size: 40px;}
}
@media (max-width: 1024px) {
	#banner{    margin-top: 88px;}
	#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%;}
	#banner .slick-slide p {
    font-size: 20px;
}
}
@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: 67px;}
	#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: 0 40px;top: 114px;}
	#banner .slick-slide h2{font-size: 22px;text-shadow: 0 0 2px rgb(0, 0, 0), 0 0 2px rgb(0, 0, 0);}
	#banner .slick-slide p{
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.72), 0 0 1px rgba(0, 0, 0, 0.72);
    display: none;
}
	#banner .slick-slide a img{padding: 30px 0;}
	#banner .slick-dots li{margin:0;}
	#banner .slick-slide >a {
    background-position: 0% 50%;
}
}