.tabs-list { list-style:none; }
.tabs-list li { display:inline-block; *display:inline; *zoom:1; margin-right:10px; margin-bottom:2px; }
.tabs-list li a { display:block; height:38px; line-height:38px; padding:0 30px; /*background-color:#ebebeb;*/ color:#808080; text-decoration:none; font-size:14px; transition:all 0.4s ease 0s; }
/*.tabs-list li a:hover { background-color:#d9d9d9; }
.tabs-list li.active a { background-color:#abcea7; color:#fff; }*/
.tab-content { margin:10px 0 15px; }
.tabs .accordion-handle, .tabs-2 .accordion-handle { display:none; }

.tabs-vertical-left, .tabs-vertical-right { *zoom:1; margin-bottom:30px;}
.tabs-vertical-left:before, .tabs-vertical-left:after, .tabs-vertical-right:before, .tabs-vertical-right:after { visibility:hidden; display:block; font-size:0;content:" "; clear:both; height:0; }
.tabs-vertical-left .tabs-list, .tabs-vertical-right .tabs-list { width:25%; }
/*.tabs-vertical-left .tabs-list li,*/ .tabs-vertical-right .tabs-list li { display:block; width:100%; }
.tabs-vertical-left .tabs-list li a, .tabs-vertical-right .tabs-list li a { height:auto; line-height:1.5; font-size:16px}
.tabs-vertical-left .tabs-list { float:left; }
.tabs-vertical-left .tabs-container { float:right; }
.tabs-vertical-left .tabs-container .tab-content { margin:0 0 0 15px; }
.tabs-vertical-right .tabs-list { float:right; }
.tabs-vertical-right .tabs-container { float:left; }
.tabs-vertical-right .tabs-container .tab-content { margin:0 15px 0 0; }
/*.tabs-vertical-left .tabs-container, .tabs-vertical-right .tabs-container { width:75%; }*/
.accordion-handle { position:relative; margin-bottom:10px; background-color:#ebebeb; text-decoration:none; color:#808080; cursor:pointer; transition:all 0.4s ease 0s; }
.accordion-handle:hover { background-color:#0986F0; }
.accordion-handle.active { background-color:#0986F0; color:#fff; }
.accordion-handle h4 { height:2em; line-height:2em; padding:0 15px; font-size:1.2em; font-weight:normal; }
.accordion-handle i { display:block; width:38px; height:38px; overflow:hidden; position:absolute; right:0; top:0; background:url(../images/icon-accordion.gif) no-repeat top center; }
.accordion-handle.active i { background-position:bottom center; }
.accordion-content { margin-bottom:15px; display:none; }


/* tabs-1 样式 */

@media only screen and ( max-width:768px ){
	.responsive-tabs .tabs-list { display:none; }
	.responsive-tabs .accordion-handle { display:block; }	
	.responsive-tabs.tabs-vertical-left .tabs-container, .responsive-tabs.tabs-vertical-right .tabs-container { width:100%; float:none; }
	.responsive-tabs.tabs-vertical-left .tabs-container .tab-content, .responsive-tabs.tabs-vertical-right .tabs-container .tab-content { margin:10px 0 15px; }	
}

@media only screen and ( min-width:768px ){
	.responsive-tabs .tabs-list { display:block; }
	.responsive-tabs .accordion-handle { display:none; }
	.tabs-vertical-left .tabs-list li {  width: calc(100% / 2 - 5px); margin-right: 5px; margin-bottom: 5px; position: relative; left: 0px; bottom: 0px; float: left;}
	.tabs-vertical-left .tabs-list li:nth-child(even) {	margin-right: 0px;} 
	.tabs-list li a {padding: 0px;}
	.tabs-vertical-left .tabs-list li .pic{ float: left; width: 100%; position: relative;}
	.tabs-vertical-left .tabs-list li .pic img{width:100%; height: 100%; border-radius: 10px;}
	.tabs-vertical-left .tabs-list li .pic p{ width:100%; color:transparent; line-height:26px; position:absolute; left:0px; bottom:0px;/* background:url(../img/tab_bg.png);*/}
	.tabs-vertical-left .tabs-list li .pic p a{color:transparent;}
	.tabs-vertical-left .tabs-list { width:30%; }
	.tabs-vertical-left .tabs-container { width:70%; }
	.tabs-vertical-left .tabs-container .tab-content{ overflow: hidden; margin-right: 10px;}
	.tabs-vertical-left .tabs-list li{ opacity:0.6; filter:alpha(opacity=60);	transition: .5s;} 
	.tabs-vertical-left .tabs-list li.active/*  , .tabs-vertical-left .tabs-list li:hover*/{ opacity:1; filter:alpha(opacity=100);	transition: .5s;} 
}
	
/* tabs-2 样式 */

@media only screen and ( max-width:768px ){
	.demo{ margin: 0 10px;}
	.tabs-2 .tabs-container .tab-content .pic img{ width: 100%; /*height: 100%;*/ height: auto;}
}

@media only screen and ( min-width:768px ){	
	/*先假定并列10个*/
	.demo{ width: 1100px;}
	.tabs-2 .tabs-list{ overflow: hidden;}
	.tabs-2 .tabs-list li {  width: calc(100% / 8 - 5px); margin-right: 5px; margin-bottom: 5px; position: relative; left: 0px; bottom: 0px; float: left; opacity:0.6; filter:alpha(opacity=60);	transition: .5s;}
	.tabs-2 .tabs-list li:nth-last-child{margin-right: 0px;}
	.tabs-2 .tabs-list li a { display:block; height:73px; /*background-color:transparent;*/ color:transparent; transition: .5s;}
    .tabs-2 .tabs-list li .pic img{ width: 100%; height: 100%;}
	.tabs-2 .tabs-list li .pic p{ width:100%; color:transparent; line-height:26px; position:absolute; left:0px; bottom:0px;/* background:url(../img/tab_bg.png);*/}
	.tabs-2 .tabs-list li.active/*  , .tabs-vertical-left .tabs-list li:hover*/{ opacity:1; filter:alpha(opacity=100);	transition: .5s; background-color:#0986F0;} 
	/*.tabs-2 .tabs-list li a:hover { background-color:transparent;  }*/
	.tabs-2 .tab-content{ overflow: hidden;}
}


/* tabs-3 样式 */
@media only screen and ( max-width:768px ){
	.demo{ margin: 0 10px;}
	.tabs-3 .tabs-container .tab-content .pic img{ width: 100%; height: 100%;}
}

@media only screen and ( min-width:768px ){	
	/*并列8个*/
	.demo{ width: 1100px;}
	.tabs-3 .tabs-list{ overflow: hidden;}
	.tabs-3 .tabs-list li {  width: calc(100% / 3 - 5px); margin-right: 5px; margin-bottom: 5px; position: relative; left: 0px; bottom: 0px; float: left; opacity:0.6; filter:alpha(opacity=60);	transition: .5s;}
	.tabs-3 .tabs-list li:nth-last-child{margin-right: 0px;}
	.tabs-3 .tabs-list li a { display:block; /*height:73px;*/ height: auto; /*background-color:transparent;*/ color:transparent; transition: .5s;}
    .tabs-3 .tabs-list li .pic img{ width: 100%; height: 100%;}
	.tabs-3 .tabs-list li .pic p{ width:100%; color:transparent; line-height:26px; position:absolute; left:0px; bottom:0px;/* background:url(../img/tab_bg.png);*/}
	.tabs-3 .tabs-list li.active/*  , .tabs-vertical-left .tabs-list li:hover*/{ opacity:1; filter:alpha(opacity=100);	transition: .5s; /*background-color:#0986F0;*/} 
	/*.tabs-2 .tabs-list li a:hover { background-color:transparent;  }*/
	.tabs-2 .tab-content{ overflow: hidden;}
	

}