/* CSS Document */
html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	margin: 0;
	padding: 0
}
html {
	height: 100%;
}
body {
	font-size: 100%;
	color: #333;
	font-family: "Microsoft YaHei";
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	margin: 0 auto;
	min-height: 100%;
	position: relative;
	background:#fff;
	overflow-x: hidden;
	padding-bottom: 35px;
}
form {
	display: inline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block
}
audio, canvas, video {
	display: inline-block;
*display:inline;
*zoom:1
}
button, input, select, textarea {
	font-size: 100%;
	vertical-align: middle;
	outline: none;
	font-family: "Microsoft YaHei";
}
table {
	border-collapse: collapse;
	border-spacing: 0
}
th {
	text-align: inherit
}
img {
	border: 0;
	-ms-interpolation-mode: bicubic;
}
input, img {
	vertical-align: middle
}
ol, ul {
	list-style: none
}
em, i {
	font-style: normal
}
a {
	text-decoration: none;
	color: inherit;
}
a:hover {
	text-decoration: underline;
}
textarea {
	resize: none
}
* {
	-webkit-tap-highlight-color: rgba(0,0,0,0)
}
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box
}
:after, :before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box
}
.left{
	float: left;
}
.right{
	float: right;
}
.clearfix:after {
	clear: both;
	content: " ";
	display: block;
	font-size: 0;
	height: 0;
	visibility: hidden;
}
/* ---- header Style ---- */
.header_coat {
	background: url(http://www.jiaodong.net/sys/images/topnav.png) repeat-x center top;
	height: 30px;
	overflow: hidden;
	width: 100%;
}
.header {
	max-width: 1220px;
	padding: 0 10px;
	margin: 0 auto;
	height: 30px;
}
.header .link {
	float: right;
	height: 30px;
	line-height: 30px;
	font-size: 12px;
}
.header .link a {
	color: #333;
	margin: 0 5px;
}
@media (max-width:768px) {
	.header_coat {
		height: 24px;
		background-size: auto 100%;
		display: none;
	}
	.header {
		height: 24px;
	}
	.header .fl {
		height: 80%;
		width: auto;
	}
	.header .link {
		height: 24px;
		line-height: 24px;
	}
	.header .link a {
		color: #333;
		margin: 0 5px;
	}
}
@media (max-width:414px) {
	.header .link {
		display: none;
	}
}
/* ---- banner Style ---- */
.banner_coat{
	max-width: 100%;
	margin: 0;
	position: relative;
	overflow: hidden;
	background: url(../img/banner_bg.jpg) center bottom repeat-x;
}
.banner{
	max-width: 1000px;
	margin: 0 auto;
	height: auto;
}
.banner img{
	width: 100%;
	height: auto;
}
/* ---- Í·Ìõ Style ---- */
.bodyBox{
	background: url(../img/body_bg.jpg) center top repeat-x;
}
.newsBox{
	position: relative;
	margin-bottom: 145px;
}
.newsBox img.slogan{
	position: absolute;
	top: 0px;
	left: -18.5%;
	width: 46.2%;
	height: 100%;
}
.newsBox ul li{
	padding-top: 10px;
	margin-bottom: 30px;
	position: relative;
}

.newsBox ul li img.h{
	position: absolute;
	bottom:0px;
	left: -9%;
	width: 25.46%;
	height: 105%;
}
.newsBox ul li:last-child{
	margin-bottom: 0;
}
.newsBox ul li .news{
	position: relative;
	float: right;
	width: 64%;
	background: #b8e5f7;
	padding: 6px 6.2% 10px 10.8%;
}
.newsBox ul li:nth-child(2) .news{
	margin-right: 7.5%;
}
.newsBox ul li:nth-child(3) .news{
	margin-right: 15%;
}
.newsBox ul li:nth-child(4) .news{
	margin-right: 22.5%;
}
.newsBox ul li .news h2{
	height: 36px;
	font-size: 24px;
	color: #333;
	text-indent: 1em;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
}
.newsBox ul li .news p{
	height: 50px;
	line-height: 25px;
	color: #333;
	font-size: 14px;
	overflow: hidden;
}
.newsBox ul li .news .detail{
	position: absolute;
	bottom: -9px;
	left: 90.625%;
	width: 78.125%;
	height: 58px;
	line-height: 58px;
	padding-left: 3.125%;
	background: url(../img/news_more.png) no-repeat;
	background-size: 100% 100%;
	font-size: 18px;
	color: #b8e5f7;
	font-weight: bold;
	font-style: italic;
}
.newsBox .more{
	position: absolute;
	top:104%;
	left: 0px;
	width: 100%;
	text-align: center;
	font-size: 15px;
	color: #24459b;
}
@media (max-width:1000px) {
	.newsBox{
		margin-bottom: 14.5%;
	}
	.newsBox ul li{
		padding-top: 8px;
		margin-bottom: 24px;
	}
	.newsBox ul li .news{
		padding: 5px 6.2% 8px 10.8%;
	}
	.newsBox ul li .news h2{
		height: 30px;
		font-size: 20px;
	}
	.newsBox ul li .news p{
		height: 44px;
		line-height: 22px;
		font-size: 13px;
	}
	.newsBox ul li .news .detail{
		bottom: -7px;
		height: 48px;
		line-height: 48px;
		font-size: 16px;
	}
	.newsBox .more{
		font-size: 14px;
	}
}
@media (max-width:768px) {
	.newsBox img.slogan{
		display: none;
	}
	.newsBox ul li{
		padding-top: 8px;
		margin-bottom: 2.5%;
	}
	.newsBox ul li .news{
		padding: 5px 5% 8px 80px;
		width: 96%;
	}
	.newsBox ul li:nth-child(2) .news{
		margin-right: 0%;
	}
	.newsBox ul li:nth-child(3) .news{
		margin-right: 0%;
	}
	.newsBox ul li:nth-child(4) .news{
		margin-right: 0%;
	}
	.newsBox ul li img.h{
		left: -5%;
		width: 100px;
	}
	.newsBox ul li .news h2{
		height: 24px;
		font-size: 16px;
		text-indent: 0px;
	}
	.newsBox ul li .news p{
		height: 36px;
		line-height: 18px;
		font-size: 12px;
	}
	.newsBox ul li .news .detail{
		bottom: -7px;
		height: 30px;
		line-height: 30px;
		font-size: 12px;
	}
	.newsBox .more{
		font-size: 14px;
	}
}
@media (max-width:520px) {
	.newsBox ul li{
		padding-top: 8px;
		margin-bottom: 2.5%;
		margin-left: 20px;
	}
	.newsBox ul li .news{
		padding: 4px 2% 5px 50px;
		width: 100%;
	}
	.newsBox ul li img.h{
		left: -5%;
		width: 60px;
	}
	.newsBox ul li .news h2{
		height: 20px;
		font-size: 14px;
		text-indent: 0px;
	}
	.newsBox ul li .news p{
		height: 34px;
		line-height: 17px;
		font-size: 11px;
	}
	.newsBox ul li .news .detail{
		display: none;
	}
	.newsBox .more{
		font-size: 12px;
	}
}
/* ---- videoBox Style ---- */
.videoBox{
	position: relative;
	width: 100%;
	padding: 4.8% 0 2.8%;
	background: #d7e9f4;
}
.videoBox img.h{
	position: absolute;
	left: -16px;
	top: -55px;
	width: 277px;
	height: auto;
	z-index: 1;
}
.videoBox .bgl{
	position: absolute;
	right: 95.4%;
	top: 0px;
	width: auto;
	height: 100%;
}
.videoBox .bgr{
	position: absolute;
	left: 100%;
	top: 0px;
	height: 100%;
	width: 10000px;
	background: #d8e8f3;
	padding-left: 20px;
}
.videoBox .bgr img{
	width:auto;
	height:100%;
}
.videoBox ul{
	font-size: 0px;
	line-height: 0px;
	position: relative;
	z-index: 1;
}
.videoBox ul li{
	display: inline-block;
	vertical-align: top;
	width: 30%;
	margin-right: 5%;
}
.videoBox ul li:nth-child(3n){
	margin-right: 0;
}
.videoBox ul li .videoCon {
	width: 100%;
	position: relative;
	margin-bottom: 12px;
}
.videoBox ul li video{
	width: 100%;
	height: 100%;
	object-fit: fill;
}
.videoBox ul li .video_play{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	background: url(../img/icon_play.png) center center no-repeat;
	background-size: 19% auto;
}
.videoBox ul li p{
	height: 30px;
	line-height: 30px;
	font-size: 20px;
	color: #333;
	text-align: center;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
}
@media (max-width:1000px) {
	.videoBox img.h{
		left: -10px;
		top: -35px;
		width: 200px;
	}
	.videoBox ul li p{
		height: 24px;
		line-height: 24px;
		font-size: 16px;
	}
}
@media (max-width:768px) {
	.videoBox img.h{
		left: -10px;
		top: -25px;
		width: 150px;
	}
	.videoBox ul li p{
		height: 20px;
		line-height: 20px;
		font-size: 12px;
	}
}
@media (max-width:768px) {
	.videoBox img.h{
		left: -6px;
		top: -20px;
		width: 100px;
	}
	.videoBox ul li{
		width: 100%;
		margin-bottom: 4%;
		margin-right: 0px;
	}
	.videoBox ul li .videoCon {
		margin-bottom: 5px;
	}
	.videoBox ul li p{
		height: 20px;
		line-height: 20px;
		font-size: 14px;
	}
}
/* ---- container Style ---- */
.bookBox{
	max-width: 1140px;
	background: url(../img/book_bg.png) no-repeat;
	background-size: 100% 100%;
	margin: 0 auto;
	position: relative;
	padding: 0 140px 0 151px;
	/* padding: 11.58% 12.28% 0 13.16%; */
}
.bookBox .bg{
	position: absolute;
	top: 9.275%;
	left: -11.24%;
	height: 80.58%;
	width: auto;
}
.bookSwiper{
	height: 73.17%;
	position: relative;
	top: 12.75%;
}
.bookSwiper .swiper-container {
	width: 100%;
	height: 100%;
}
.bookSwiper .swiper-wrapper{
	height: 100%;
}
.bookSwiper .swiper-slide {
	height: 100%;;
}
.bookSwiper .swiper-slide img{
	width: 100%;
	height: 100%;
}
.bookSwiper .swiper_next,
.bookSwiper .swiper_prev{
	position: absolute;
	top: 50%;
	margin-top: -35px;
	width: 37px;
	height: 70px;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	z-index: 1;
}
.bookSwiper .swiper_next{
	left: 102%;
	background-image: url(../img/arrow_next.png);
}
.bookSwiper .swiper_prev{
	right: 102%;
	background-image: url(../img/arrow_prev.png);
}
@media (max-width:1140px) {
	.bookBox{
		padding: 0 12.28% 0 13.16%; 
	}
	.bookBox .bg{
		display: none;
	}
	.bookSwiper .swiper_next,
	.bookSwiper .swiper_prev{
		width: 24px;
		height: 50px;
		margin-top: -25px;
	}
	.bookSwiper .swiper_next{
		left: 101%;
	}
	.bookSwiper .swiper_prev{
		right: 101%;
	}
}
@media (max-width:768px) {
	.bookSwiper .swiper_next,
	.bookSwiper .swiper_prev{
		width: 16px;
		height: 32px;
		margin-top: -16px;
	}
}
/* ---- contact Style ---- */
.contact{
	background: #6c9fd6;
	padding: 32px 0 25px;
}
.contact .con{
	width: 58%;
	padding-left: 15%;
	line-height: 30px;
	font-size: 18px;
	color: #fff;
	float: left;
}
.contact .con img.logo{
	margin-bottom: 8px;
}
.qrcode{
	width: 39%;
	float: right;
	overflow: hidden;
}
.qrcode li{
	width: 41.5%;
	float: left;
}
.qrcode li:nth-child(2n){
	float: right;
}
.qrcode li img{
	width: 100%;
	height: auto;
	margin-bottom: 8px;
}
.qrcode li p{
	line-height: 24px;
	font-size: 18px;
	color: #fff;
	text-align: center;
}
@media (max-width:768px) {
	.contact{
		padding: 3.2% 0 2.5%;
	}
	.contact .con{
		width: 58%;
		padding-left: 4%;
		line-height: 28px;
		font-size: 14px;
	}
	.contact .con img.logo{
		margin-bottom: 5px;
	}
	.qrcode{
		width: 39%;
	}
	.qrcode li{
		width: 41.5%;
		float: left;
	}
	.qrcode li img{
		margin-bottom: 4px;
	}
	.qrcode li p{
		line-height: 20px;
		font-size: 14px;
	}
}
@media (max-width:520px) {

	.contact .con{
		float: none;
		width: 100%;
		padding-left: 0%;
		line-height: 28px;
		font-size: 14px;
		text-align: center;
	}
	.qrcode{
		float: none;
		width: 100%;
		max-width: 300px;
		margin:5% auto 0;
	}
	.qrcode li{
		width: 41.5%;
		float: left;
	}
	.qrcode li img{
		margin-bottom: 4px;
	}
	.qrcode li p{
		line-height: 20px;
		font-size: 14px;
	}
}
/* ---- container Style ---- */
.container {
	max-width: 1020px;
	padding: 0 10px;
	margin: 0 auto;
}
.mb0{
	margin-bottom: 0%;
}
.mb3_5{
	margin-bottom: 3.5%;
}

/* ---- footer Style ---- */
.footer_coat {
	position: absolute;
	bottom: 0px;
	left: 0px;
	background: #5c5c5c none repeat scroll 0 0;
	color: #fff;
	font: 12px/35px;
	height: 35px;
	width: 100%;
}
.footer {
	margin: 0 auto;
	position: relative;
	max-width: 1220px;
	padding: 0 10px;
	line-height: 35px;
}
.footer p {
	position: absolute;
	right: 0px;
	top: 0;
}
.footer p a {
	color: #e4e4e4;
	display: inline-block;
	padding: 0 12px;
}
@media (max-width:1020px) {
	.footer_coat{
		height: 35px;
	}
	.footer{
		line-height: 28px;
		font-size: 12px;
	}
	.footer p a {
		color: #e4e4e4;
		display: inline-block;
		padding: 0 8px;
		font-size: 12px;
	}
}
@media (max-width:768px) {
.footer {
	text-align: center;
}
.footer p {
	display: none;
}
}