#banner{    margin-top: 85px;}
#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: 580px;top: calc(35% - 25px);left: calc(15% - 0px);color: #000000;}
#banner .slick-slide .text-box{
    position: relative;
    display: flex;
}
#banner .slick-slide h2 {font-size: 70px;line-height:110%;text-align:left;}
#banner .slick-slide h2:nth-child(2) {
    position: absolute;
    color: #1b2b70;
    -webkit-clip-path: inset(0 0 0 9vw);
    clip-path: inset(70px 0 0 0);
}
#banner .slick-slide p {margin-top:40px;font-size: 30px;line-height:130%;text-align:left;}
#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: 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 .art {
    left: calc(20% - 140px);
    width: 350px;
}
}
@media (max-width:1024px) {
	#banner {margin-top: 78px;}
	#banner .webframe { width:100%; }
	#banner .slick-slide h2 {width:100%;font-size: 40px;}
	#banner .slick-slide h2:nth-child(2){
    clip-path: inset(40px 0 0 0);
}
	#banner .slick-slide p , #banner .slick-slide b {width:100%;font-size: 22px;margin-top: 30px;}
}
@media (max-width:768px) {
	#banner .slick-slide h2 {font-size: 40px;}
	#banner .slick-slide h2:nth-child(2){
    clip-path: inset(45px 0 0 0);
}
	#banner .slick-slide p {margin-top:30px;font-size: 16px;line-height: 180%;}
	#banner .slick-slide .art {width:calc(50% - 100px);padding: 0 50px;}
	#banner .slick-slide b { display:none; }
	#banner .slick-slide >a{
    background-position: 40% 50%;
}
	#banner .slick-slide >a img{
    padding: 60px 0;
}
}
@media (max-width:640px) {
	#banner {margin-top: 80px;}
	#banner .slick-slide h2 {font-size:24px;width: 70%;}
	#banner .slick-slide p {margin-top: 10px;font-size: 14px;}
}
@media (max-width:480px) {
	#banner .slick-slide h2{
    width: 80%;
}
	#banner .slick-slide .art {width: calc(100% - 160px);background:none;padding: 0 25px;left: 0;top: inherit;bottom: 20px;}
	#banner .slick-slide h2:nth-child(2) {
    clip-path: inset(23px 0 0 0);
}
	#banner .slick-slide p {
    font-size: 13px;
}
	#banner .slick-slide a img {padding: 60px 0;}
	#banner .slick-dots li { margin:0; }
}
@media (max-width:400px) {
	#banner .slick-slide h2{
    width: 100%;
}
	#banner .slick-slide .art {width: calc(100% - 160px);background:none;padding: 0 25px;left: 0;top: inherit;bottom: 20px;}
	#banner .slick-slide h2:nth-child(2) {
    clip-path: inset(23px 0 0 0);
}
}