/* *{ box-sizing:border-box; -webkit-appearance: none; }
*:focus { outline: none; }
html, body{ height: 100%;}
body { margin: 0;line-height:1.5; font-size:14px;font-family:"微软雅黑",microsoft yahei; color:#333; background:#fff; } 
ul,li{list-style: none; padding: 0; margin: 0;}
.clearfix:after{ content:""; display:block; clear:both; height:0; visibility:hidden;}
.clearfix{ zoom:1;}
img{max-width:100%; vertical-align: middle;}*/

.main{ max-width: 1200px; margin: 0 auto; padding:40px 0;}
.title{text-align: center; color:#333; font-size:20px; margin: 25px 0;}

.w-accor{ overflow:hidden; position:relative;}
.w-accor ul,.w-accor li{ padding:0; margin:0; list-style:none;}
.w-accor ul{ width:101%;}
.w-accor li{ position:relative; overflow:hidden;float:left;}
.accorClick li{ cursor:pointer;}
.w-accor li .item{ position:relative;}
.w-accor li > a{ display:block; position:absolute; left:0; right:0; top:0; bottom:0;}
.w-accor h3{ font-size:125%; margin:0; padding:0; font-weight:normal;}
.w-accor .acr_p{ margin-top:0.5em; }

.w-accor4 li img{ 
	max-width:100%;
	-webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}
.w-accor4 li .cont_ar{ color:#fff;position:absolute; left:0; top:0; bottom:0; right:0;}
.w-accor4 li .cont_ar:before{ content:'';position:absolute; left:0; top:0; bottom:0; right:0; background:#000; opacity:0.35; *filter:alpha(opacity=35); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=35);transition:all 0.5s; -webkit-transition:all 0.5s;}
.w-accor4 li h3{
	text-align:center; line-height:1.5; 
	position:absolute; z-index:1; left:5%; margin-left:-0.6em;top:50%; 
	top:10%\9; *top:10%; transform:translateY(-50%); -webkit-transform:translateY(-50%);transition:opacity 0.5s; -webkit-transition:opacity 0.5s;
	font-size: 24px;
	font-family: 'roboto-medium';
	text-transform: uppercase;
	transform:rotate(-90deg);
-ms-transform:rotate(-90deg); 	/* IE 9 */
-moz-transform:rotate(-90deg); 	/* Firefox */
-webkit-transform:rotate(-90deg); /* Safari 和 Chrome */
-o-transform:rotate(-90deg); 
width: 100%;
}
:root .w-accor4 li h3{ top:50%;}
.w-accor4 li .dec_ar{ line-height:1.7; max-height:100%; position:absolute; z-index:1; left:40px; 
	right:40px;top:50%; top:10%\9; *top:10%; transform:translateY(-50%) scale(0);
	 -webkit-transform:translateY(-50%) scale(0); padding:30px 10%;
	 color:#fff; opacity:0; *filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
	 transition:all 0.5s; -webkit-transition:all 0.5s;
	 text-align: center; 
	}
	.w-accor4 li .dec_ar h4{
		font-size:36px;
		text-transform: uppercase;
		font-family: Roboto-Bold;
	}
	.w-accor4 li .dec_ar .acr_p{
		line-height: 32px;
	}
:root .w-accor4 li .dec_ar{ top:50%;}
.w-accor4 li .i_img{ text-align:center; margin-bottom:1em;}
.w-accor4 li .i_img img{ max-width:80%; max-height:80px;}
.w-accor4 li.cur .cont_ar:before{opacity:0; *filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);}
.w-accor4 li.cur h3{ opacity:0; *filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);}
.w-accor4 li.cur .dec_ar{opacity:1; *filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);transform:translateY(-50%) scale(1); -webkit-transform:translateY(-50%) scale(1);transition-delay:0.3s; -webkit-transition-delay:0.3s;}
.w-accor4 li.cur .more{
	display: block; width: 156px; height: 48px; margin: 0 auto; margin-top: 20px; line-height: 48px;  background: #ee0b05; text-align: center; font-size: 16px; 
text-transform: uppercase; color: #ffffff;

}
.w-accor4 li.cur img{
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}
:root .w-accor4 li h3{ top:50%;}
.w-accor6 li .dec_ar{ line-height:1.7; max-height:100%; max-height:calc(100% - 7em); overflow:hidden; position:absolute; z-index:1; left:40px; right:40px;top:50%; top:10%\9; *top:10%; transform:translateY(-50%) scale(0); -webkit-transform:translateY(-50%) scale(0); opacity:0; *filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);transition:all 0.5s; -webkit-transition:all 0.5s; }
:root .w-accor6 li .dec_ar{ top:50%;}

@media (max-width:1230px){
	.w-accor4 li .dec_ar h4 {
		font-size: 20px;
	}
}

@media (max-width:960px){
	.w-accor h3{ font-size:110%;}
	.w-accor .acr_p{ font-size:90%;}
	.w-accor4 li .img_ar{ height:350px !important;}
	.w-accor4 li .img_ar img{ height:100%; max-width:inherit;}
}
@media screen and (max-width:768px){
	.w-accor4 li h3{
		font-size: 16px;
	}
	.w-accor4 li .dec_ar .acr_p {
		display: none;
	}
	.w-accor4 li .dec_ar h4 {
		font-size: 14px;
	}
	.w-accor4 li.cur .more {
		width: 137px;
		height: 38px;
		margin-top: 20px;
		line-height: 38px;
		font-size: 14px;
	}
}
@media (max-width:767px){
	.w-accor4 li .dec_ar{ left:20px; right:20px; padding:15px;}	
}

@media (max-width:480px){
	.w-accor4 li .dec_ar{ left:1em; right:1em; padding:1em;}
	.w-accor4 li .img_ar{ height:20em !important;}
	.w-accor4 li .i_img img{ max-height:3em;}
}