/*
* jQueryTab v2.0
* Copyright Dharma Poudel (@rogercomred)
* Free to use under the GPLv3 license.
* http://www.gnu.org/licenses/gpl-3.0.html
*/

/* == quick_reset */
@font-face{
	font-family:pingfang;
	src:url(../font/PingFang%20Bold.ttf);
	font-family:pingfang1;
	src:url(../font/PingFang%20Light.ttf);
	font-family:pingfang2;
	src:url(../font/PingFang%20Medium.ttf);
	font-family:pingfang3;
	src:url(../font/PingFang%20Regular.ttf);
	
	
	
	}
*{ border:none; margin:0; padding:0; outline:none;}

/*  == common styles */
body {background:#f2f6f9; min-height:100%; font: normal 13px/1.5 "微软雅黑"; margin-bottom:30px;font-family:"微软雅黑";}
ul,ol{ list-style:none outside none;}
pre{ border: 3px solid #ddd; box-shadow: 1px 1px 0 #fff, 2px 2px 0 #ddd; margin:0px 0; background: #fcfcfc; }

#container{ width:1200px; height:468px; padding:0px 0px; margin:0 auto;}

a:link, a:visited{ color: #000; text-decoration:none;}
a:hover{ color: #666;}

/*  == tab heading */
.tabs {overflow:hidden; background-color:#fff; width:1200px; height:90px; margin:0 auto;
	-webkit-box-shadow:0px 5px 1px #e0e4e7;        /* 兼容webkit内核 */  
    -moz-box-shadow:0px 5px 1px #e0e4e7;           /* 兼容gecko内核 */  
    box-shadow:0px 5px 1px #e0e4e7;}
.tabs li{ float:left; }
.tabs li a{color:#2284d5; display:block; font-weight:bold; width:176px; height:68px; text-align:center; margin-left:95px; font-size:24px; line-height:26px; padding-top:18px; font-family:"微软雅黑";}
.tabs li a span{color:#3882c0; font-size:16px; line-height:17px; font-family:Arial;text-transform: uppercase;}
.tabs li a span:hover, .tabs li a span:focus{ color:#3882c0;}
.tabs li:first-child a{ border-left: none; }
.tabs li a:hover, .tabs li a:focus{ color:#155285; border-bottom: 6px solid #1c6db1;}
.tabs .active a{ color: #2284d5; border-bottom: 6px solid #1c6db1; }

/* == accordion */
.accordion_tabs { display:none; border-top: 1px solid #ccc; padding: 10px; font-weight: bold; background: #eee; }
.tab_content_wrapper > .accordion_tabs:first-child{ border-top:none; }
a.accordion_tabs:link, a.accordion_tabs:visited{ color: #21759B;  }
a.accordion_tabs:hover, a.accordion_tabs:focus{ color:#D54E21; }
a.accordion_tabs.active{ color: #000;}

/*  == tab content  */
.tab_content_wrapper{ overflow:hidden;  position:relative; transition: all .3s ease-in-out .3s; margin-top:68px;}
.tab_content{ transition: all .6s ease-in-out; background:#f6f6f6;}
.tab_content ul{width:1200px; height:468px; }
.tab_content ul li{float:left; width:278px; margin-right:29px; height:465px; background-image:url(../../%E6%99%BA%E6%98%8E%E5%8A%9B%E5%BC%BA%E5%85%89%E7%94%B5%E4%BC%81%E4%B8%9A%E7%AB%99/images/di_03.png); background-repeat:no-repeat;}
.tab_content ul li img{ padding-top:56px; padding-left:40px; transition:all .5s ease-in-out; opacity:0.8;}
.tab_content ul li img:hover{	transform:scale(1.05); opacity:1;}
.tab_content ul li p{color:#2180cf; font-family:"微软雅黑"; font-size:20px; font-weight:bold; padding-top:50px; text-align:center; width:278px; height:64px;transition:all .3s ease-in-out;opacity:0.6;}
.tab_content ul li p:hover{color:#155285;
	opacity:1;}
.cp{float:left; width:278px; height:465px; background-image:url(../../%E6%99%BA%E6%98%8E%E5%8A%9B%E5%BC%BA%E5%85%89%E7%94%B5%E4%BC%81%E4%B8%9A%E7%AB%99/images/di_03.png); background-repeat:no-repeat;}
.cp img{ padding-top:56px; padding-left:40px; transition:all .5s ease-in-out; opacity:0.8;}
.cp img:hover{	transform:scale(1.05); opacity:1;}
.cp p{color:#2180cf; font-family:"微软雅黑"; font-size:20px; font-weight:bold; padding-top:50px; text-align:center; width:278px; height:64px;transition:all .3s ease-in-out;opacity:0.6;}
.cp p:hover{color:#155285;opacity:1;}
.toggle_display{display:block;}
.toggle_position{ position:absolute; }
.toggle_border{ border-width: 0 1px 1px 1px; }
.invert_border{ border-width: 1px 1px 0 1px;}

/* Media Queries
***********************/
@media screen and (max-width: 600px) {
  #container{ width:90%; padding:40px 20px; }
  .accordion_tabs{ display:block; }
  .tab_content_wrapper{ height:auto !important;}
  .tab_content{ transition:none; padding:10px;}
  .toggle_display{display:none;}
  .toggle_position{ position:relative; }
  .toggle_border{ border-width: 1px; }
}