#visul { position: relative; background: #fff; clear: both; z-index: 3; }
.hero-slide .b-de { position: relative; color: #fff; background: no-repeat 50% / cover; }
.hero-slide .b-de a.proa {display: block;background: rgb(0 0 0 / 40%);}
.banner-txt {position: absolute;width: 100%;top: calc(50% - 100px);left: 0;z-index: 11;}
.banner-txt .workframe{text-align:center;}
.banner-txt h2 {font-size: 70px;transform: translateY(-30px);opacity: 0;text-align: center;}
.banner-txt p {transform: translateY(30px);transition-delay: .5s;opacity: 0;text-align: center;font-size: 22px;margin-top: 20px;letter-spacing: 3px;}
.banner-txt p.more{ margin-top: 30px;}
.banner-txt p a:hover{ background: #333; color: #fff;}
.banner-txt article{ font-size: 15px; text-align: center; transform: translateY(30px); transition-delay: .5s; opacity: 0;}
.slick-current.slick-active .banner-txt article{ transform: translateY(0); opacity: 1;}
.banner-txt p a {font-size: 14px;color: #333;display: inline-block;background: #fff;padding: 10px 40px;font-weight: bold;letter-spacing: 1px;}
.slick-current.slick-active .banner-txt h2 ,
.slick-current.slick-active .banner-txt p { transform: translateY(0); opacity: 1; }

#banner .item { position: relative; overflow: hidden; text-align: right; }
#banner .item video , #banner .item iframe { position: absolute; width: 100%; height: 100%; left: 0; top: 0; }

#visul .slick-dots { bottom: 10px; }
#visul .slick-dots li button:before { color: #808080; opacity: 1; }
#visul .slick-dots li.slick-active button:before { color: #fff; }

#visul .slick-slider { margin-bottom: 0; }

@media screen and (max-width:1280px) {
	.banner-txt h2{font-size: 45px;}
}
@media screen and (max-width:980px) {
	.hero-slide .b-de a.proa img{    padding: 100px 0;}
	#banner .item video { width: auto; height:100%; }
	#banner .item iframe { height:100%; }
	.banner-txt article {    width: 80%;    margin: 0 auto;}
}
@media screen and (max-width:640px) {
	.banner-txt h2{font-size:30px;}
	.banner-txt p{ font-size: 18px;}
	.banner-txt article{width:100%;font-size:12px;}
	.banner-txt { top: 25%; left: 10%; width: 80%; }
	.hero-slide .b-de >img { padding: 30px 0; }
	.hero-slide .b-de a.proa img{padding:150px 0;}
}
@media screen and (max-width:480px) {
	.banner-txt {top: 35%;}
	.banner-txt p a { font-size: 4vw; }
}