/* CSS Document */

.ys{ width: 100%;  background: url(../image/ys.jpg) no-repeat;padding:40px 0px;}
.tit2{widht:100%;height:auto;clear:both;position:relative;}
.tit2 h1{width:100%;height:auto;margin:0 auto;text-align:center;}
.tit2 a{color:#fff;font-size:3.6rem;text-align:center;margin:0 auto;line-height:2;}

.tit2 p{width:100%;height:auto;margin:0 auto;text-align:center;color:#fff;font-size:1.6rem;}

@media (max-width:468px){

.tit2 a{font-size:2.4rem}

}

@media (min-width:469px) and (max-width:768px){
.tit2 a{font-size:2.4rem}

}
@media (min-width:769px) and (max-width:990px){
.tit2 a{font-size:2.4rem}

}

.main_box{
	width: 100%;
	position: relative;
	margin-top:5rem;
}
.box{
	width: 100%;
	height:auto;
}
.box ul li{
	width: 20%;
	height: 27rem;
	box-shadow: 3px 2px 30px rgba(0,0,0,.1);
	float: left;
	text-align: center;
	position: relative;
	transition: all .6s ease-out;
	overflow:hidden;
}
.box ul li h3{
	padding-top: 80px;
	color: #fff;
	font-size: 3rem;
		z-index:30;
		position:relative;
		display:block;
		width:90%;
		margin:0 auto;
		text-shadow:1px 1px 1px #333;
}


.box ul li h2{
	padding-top: 20px;
	color: #fff;
	font-size: 1.6rem;
		z-index:30;
		position:relative;
		display:block;
		width:90%;
		margin:0 auto;
		font-weight:normal;
}
.box ul li p{
	margin-top: 70px;
	color: #666;
	font-size: 14px;
		z-index:20;
			position:relative;
			display:none;
			width:90%;
		margin:0 auto;
}

.box ul .on{
	width: 40%;
	height: 27rem;
	background-color: #3288e6;
	text-align: left;
}
.box ul .on h3{
	padding-left: 20px;
	color: #FFF;
    text-align:left;
	padding-top: 40px;
}
.box ul .on h2{
	padding-left: 20px;
	color: #FFF;
	 text-align:left;
}
.box ul .on p{
	padding-left: 20px;
	margin-top: 50px;
	color: #fff;
	font-size: 14px;
		z-index:20;
			position:relative;
			display:block;
}
.box ul .on img{
	width: 100%;
height: 100%;
	position: absolute;
	right: 0px;
	bottom: 0px;
	z-index:10;
}

@media (max-width:768px) {
.box ul li h3{padding-top: 40px;font-size: 2rem !important;padding-left: 10px;}
.box ul li h2{padding-top: 20px;font-size: 1.4rem !important;padding-left: 10px;}
.box ul .on{width: 70%;}
.box ul li{width: 10%;}
.box ul li h2 {display:none}
.box ul .on h2 {display:block}
.box ul .on p {padding-left: 10px; margin-top: 10px;}
}

@media (max-width:990px) {
.ys {padding: 20px 0px;}
.box ul li h3{padding-top: 40px;font-size: 2rem !important;padding-left: 10px;}
.box ul li h2{padding-top: 20px;font-size: 1.4rem !important;padding-left: 10px;}
.box ul .on{width: 70%;}
.box ul li{width: 10%;}
.box ul li h2 {display:none}
.box ul .on h2 {display:block}
.box ul .on{height: 24rem;}
.box ul li{height: 24rem;}
.box ul li h3 {padding-top: 40px; font-size: 2rem !important;  font-weight: normal;}
.box ul .on h3 {padding-top: 40px; font-size: 2rem !important;  font-weight:bold;padding-left: 10px;}
.box ul .on p {padding-left: 10px;    margin-top: 10px;}
.main_box { margin-top: 2rem;}
}
@media (max-width:1080px) {
.box ul li h3{padding-top: 40px;font-size: 2.4rem;}
.box ul li h2{padding-top: 20px;font-size: 1.6rem;}
.box ul li h2{padding-top: 20px;font-size: 1.4rem;}

}
@media (max-width:1200px) {
.box ul li h3{padding-top: 40px;font-size: 2.8rem;}
.box ul li h2{padding-top: 20px;font-size: 1.8rem;}
.box ul li h2{padding-top: 20px;font-size: 1.4rem;}

}
@media (max-width:1320px) {
.box ul li h3{padding-top: 40px;font-size: 3rem;}
.box ul li h2{padding-top: 20px;font-size: 2rem;}
.box ul li h2{padding-top: 20px;font-size: 1.4rem;}

}