@charset "utf-8";

#banner {
	width: 100%;
	overflow: hidden;
}

.banner {
	position: relative;
	width: 100%;
}

.banner .banner_box li {
	width: 1000px;
	padding: 0 27px;
}

.banner .banner_box li img {
	display: block;
	width: 100%;
}

.banner .control {
	position: absolute;
	z-index: 2;
	left: 50%;
	bottom: 23px;
	height: 12px;
	padding: 14px 43px;
	border-radius: 20px;
	transform: translateX(-50%);
}

.banner .control .playState {
	position: relative;
	display: inline-block;
	width: 12px;
	height: 12px;
	margin: 0 17px;
}

.banner .control .playState img {
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	max-width: 100%;
	max-height: 100%;
}

.banner .control .playState img:first-child {
	display: none;
}

.banner .control .pauseState img {
	display: none;
}

.banner .control .pauseState img:first-child {
	display: block;
}

.banner .control .tit_thumb {
	position: relative;
	display: inline-block;
	height: 100%;
}

.banner .control .tit_thumb .tits {
}

.banner .control ul li {
	position: relative;
	float: left;
	display: inline-block;
	width: 12px;
	height: 12px;
	margin: 0 17px;
	cursor: pointer;
}

.banner .control .tits li a {
	position: relative;
	display: block;
	width: 6px;
	height: 6px;
	border-width: 3px;
	border-style: solid;
	border-radius: 50%;
}

.banner .control .tits .on a {
	background: none;
}

.banner .control .tit_thumb .thumbs {
	position: absolute;
	left: 0;
	top: 0;
}

.banner .control .thumbs li a {
	position: absolute;
	display: none;
	left: 50%;
	bottom: 100%;
	width: 160px;
	height: 122px;
	text-decoration: none;
	transform: translateX(-50%);
}

.banner .control .thumbs li:hover a {
	display: block;
}

.banner .control .thumbs li a img {
	display: block;
	width: 154px;
	height: 80px;
	border-width: 3px;
	border-style: solid;
}

.banner .control .thumbs li a b {
	display: block;
	text-align: center;
	border-width: 3px;
	border-style: solid;
	border-top: 0 none;
}

.banner .control .thumbs li a i {
	display: block;
	width: 0;
	height: 0;
	margin: 0 auto;
	border-top-width: 11px;
	border-top-style: solid;
	border-left: 11px solid transparent;
	border-right: 11px solid transparent;
}

.banner .prev, .banner .next {
	position: absolute;
	z-index: 2;
	top: 0;
	width: 0;
	height: 100%;
	cursor: pointer;
}

.banner .prev {
	left: 0;
}

.banner .next {
	right: 0;
}

.banner_sp {
	display: none;
}

@media (max-width: 999px) {

#banner {
	width: auto;
	padding: 10px 0;
}

.banner {
	display: none;
}

.banner_sp {
	position: relative;
	display: block;
}

.banner_sp_box li {
	box-sizing: border-box;
	padding: 0 10px;
}

.banner_sp_box li img {
	display: block;
	width: 100%;
}

.banner_sp .control {
	position: absolute;
	z-index: 2;
	left: 50%;
	bottom: 10px;
	height: 32px;
	padding: 10px 0;
	border-radius: 20px;
	transform: translateX(-50%);
	box-sizing: border-box;
}

.banner_sp .control .spPlayState {
	position: relative;
	display: inline-block;
	width: 12px;
	height: 12px;
	margin: 0 10px 0 20px;
}

.banner_sp .control .spPlayState img {
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	max-width: 100%;
	max-height: 100%;
}

.banner_sp .control .spPlayState img:first-child {
	display: none;
}

.banner_sp .control .tit_thumb {
	position: relative;
	display: inline-block;
	height: 100%;
	margin: 0 10px 0 0;
}

.banner_sp .control .tits li {
	position: relative;
	float: left;
	display: inline-block;
	width: 6px;
	height: 6px;
	margin: 0 10px;
	border-width: 3px;
	border-style: solid;
	border-radius: 50%;
	cursor: pointer;
	opacity: 1;
}

.banner_sp .control ul .swiper-pagination-bullet-active {
	background: transparent;
}

.banner_sp .control .tit_thumb .thumbs {
	position: absolute;
	left: 0;
	top: 0;
}

.banner_sp .control .thumbs li {
	position: relative;
	float: left;
	display: inline-block;
	width: 12px;
	height: 12px;
	margin: 0 10px;
	cursor: pointer;
}

.banner_sp .control .thumbs li a {
	position: absolute;
	display: none;
	left: 50%;
	bottom: 100%;
	width: 160px;
	height: 122px;
	text-decoration: none;
	transform: translateX(-50%);
}

.banner_sp .control .thumbs li:hover a {
	display: block;
}

.banner_sp .control .thumbs li a img {
	display: block;
	width: 154px;
	height: 80px;
	border-width: 3px;
	border-style: solid;
}

.banner_sp .control .thumbs li a b {
	display: block;
	text-align: center;
	border-width: 3px;
	border-style: solid;
	border-top: 0 none;
}

.banner_sp .control .thumbs li a i {
	display: block;
	width: 0;
	height: 0;
	margin: 0 auto;
	border-top-width: 11px;
	border-top-style: solid;
	border-left: 11px solid transparent;
	border-right: 11px solid transparent;
}

}