@charset "utf-8";
/* CSS Document */

body{ font:14px BlinkMacSystemFont,Roboto,Helvetica Neue,Helvetica,PingFangSC-Regular,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;}
*{ margin:0; padding:0; list-style:none;}
a{ text-decoration:none;}


.cotent-banner{ width:100%; height:450px; background:url(../images/website/banner.jpg) center no-repeat; background-size: cover;}
.banner-container{ width:1180px; height:100%; margin:0 auto; color:#fff; padding-top:100px;}

.banner-title{ font-size:48px;}
.banner-info{ width:630px; margin-top:30px; line-height:27px; font-size:16px;}
.button{ display:block; width:125px; line-height:35px; background:#006fef; text-align: center; margin-top:30px; color:#fff;}



.nav-container-bg{ width:100%; height:60px;    background: #fff; -webkit-box-shadow: 0 2px 10px 0 rgba(0,0,0,.1); -moz-box-shadow: 0 2px 10px 0 rgba(0,0,0,.1); box-shadow: 0 2px 10px 0 rgba(0,0,0,.1);}

.nav-container{ width:960px; margin:0 auto;}
.nav-container li{ float:left; width:122px; margin:0 58px;font-size: 20px;line-height: 60px; text-align:center;}
.nav-container li a{ color:#333}
.nav-container li a:hover{ color:#006fef;}


.module-section{ width:1180px; margin:0 auto;}
.module-container{ padding-top:100px;}
h2{ font-size:32px; text-align:center; color:#333; font-family:"PingFangSC-Regular"; font-weight:normal;}

.dp{ display:block}
.tc{ text-align:center}  .fl{ float:left} .fr{ float:right}
.clear{clear:both;}   .clearfix:after{content:"."; display:block; visibility:hidden; height:0; clear:both}
.main-page{margin:50px auto;width:1180px; border:1px solid #eaeaea}
.main-page .left{ width:15%; border-right: 1px #eaeaea solid;}
.main-page .left, .main-page .right{float:left;}
.main-page .nav-back{height:300px;}
.main-page .nav{position:relative;margin-top:-300px;width:100%;text-align:center;font-size:18px;color:#333;}
.main-page .nav div{height:80px;line-height:80px; margin-bottom: 8px; border-radius: 2px; cursor: pointer; font-size:16px; font-weight:bold;}
.main-page .nav div.on{background:#006fef; color:#fff;}
.main-page .right{width:900px;height:350px;margin-left:55px;}
.main-page .content{position:relative; width:900px; height:350px; overflow:hidden;}
.main-page .content .con-ggh{ width:900px; height:350px;}

.con-ggh ul{ padding-top:20px; display:block} 
.con-ggh ul li{ padding-top:20px; margin-right:20px; float:left}

.con-ggh .item-name{ padding:20px 0; height: 20px;  font-size: 16px; color: #333; line-height: 20px; text-overflow: ellipsis; white-space: nowrap;}
.b-intro{ margin-top:20px}
.b-intro span{ font-size:24px; margin-bottom:12px; color:#333}
.b-intro p{ width:545px; height:100px; line-height:24px; overflow:hidden; color:#333; font-size:14px}
.ck-m{ width:123px; height:36px; line-height:36px; border:1px #fff solid; margin-top:25px; background:#006fef; color:#fff;}
.zcinfo{ width:550px; margin-top:10px;} 
.ptpic-dl,.ptpic-dl img{ margin-top:20px;}
.togglebox{ display:none;}



.flow-container{ width:1180px; margin:0 auto; padding-top:50px; height:450px;}
.flow-list{ margin-top:50px;}
.flow-title{ background:#006fef; height:120px;text-align:center;}
.flow-title img{ margin:0 auto; display:block;}
.flow-title span{ font-size:18px; color:#fff; line-height:40px;}
.flow-list li{ width:220px; height:300px; border:1px solid #eaeaea; float:left;margin-right:17px;}
.flow-list li:last-child{ margin-right:0;}
.flow-list li p{ text-align:center; line-height:36px; margin-top:20px; color:#6E6E6E}


.dvantage-container{ width:1180px; height:600px; margin:0 auto; padding-top:50px;}
.dvantage-list{ margin-top:50px;}
.dvantage-list li{ float:left; width:280px; height:195px;-webkit-box-shadow: 0 2px 6px 0 rgba(0,0,0,.1); -moz-box-shadow: 0 2px 6px 0 rgba(0,0,0,.1); box-shadow: 0 2px 6px 0 rgba(0,0,0,.1); margin:10px 15px 15px 0;}
.dvantage-list li:hover .img{ background:url(../images/website/yunicon14.png) center no-repeat;}
.dvantage-list li:hover .img2{ background:url(../images/website/yunicon15.png) center no-repeat;}
.dvantage-list li:hover .img3{ background:url(../images/website/yunicon16.png) center no-repeat;}
.dvantage-list li:hover .img4{ background:url(../images/website/yunicon17.png) center no-repeat;}
.dvantage-list li:hover .img5{ background:url(../images/website/yunicon18.png) center no-repeat;}
.dvantage-list li:hover .img6{ background:url(../images/website/yunicon19.png) center no-repeat;}
.dvantage-list li:hover .img7{ background:url(../images/website/yunicon20.png) center no-repeat;}
.dvantage-list li:hover .img8{ background:url(../images/website/yunicon21.png) center no-repeat;}

.dvantage-list li:hover p{ color:#006fef;}
.dvantage-list li .img{ width:100px; height:100px; margin:10px auto; display:block; background:url(../images/website/yunicon06.png) center no-repeat;}
.dvantage-list li .img2{background:url(../images/website/yunicon07.png) center no-repeat;}
.dvantage-list li .img3{background:url(../images/website/yunicon08.png) center no-repeat;}
.dvantage-list li .img4{background:url(../images/website/yunicon09.png) center no-repeat;}
.dvantage-list li .img5{background:url(../images/website/yunicon10.png) center no-repeat;}
.dvantage-list li .img6{background:url(../images/website/yunicon11.png) center no-repeat;}
.dvantage-list li .img7{background:url(../images/website/yunicon12.png) center no-repeat;}
.dvantage-list li .img8{background:url(../images/website/yunicon13.png) center no-repeat;}
.dvantage-list li p{ text-align:center; line-height:40px; font-size:16px; color:#666;}


.correlation-container{ width:1180px; height:100%; margin:0 auto 80px; padding-top:50px;}
.correlation-list{ margin-top:50px; height:300px;}
.correlation-list li{ float:left; width:280px; margin:10px 100px 50px 0;}
.correlation-list li p{ color:#6E6E6E}
.correlation-list li:nth-child(3),.correlation-list li:last-child{ margin-right:0;}
.correlation-title{ font-size:18px; line-height:30px; margin-bottom:15px; color:#333;}
.correlation-container .button{ width:180px; height:50px; line-height:50px; clear:both; margin:80px auto; color:#fff;}
.correlation-container a:hover .correlation-title{ color:#006fef;}


@media (max-width:780px){
h2{ font-size:24px;}
.cotent-banner{ width:100%; height:320px; background:url(../images/website/banner.jpg) center no-repeat; background-size: cover;}
.banner-container{width:100%; padding-top:80px; text-align:center;}
.banner-title{ font-size:24px;}	
.banner-info{ width:90%; margin:20px auto; line-height:24px; font-size:14px;}
.button{ margin:30px auto}

.nav-container-bg,.module-section{ display:none;}

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.2.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

.togglebox { display:block;
  width:92%;
  margin:20px auto;
  background: #fff;
  transform: translateZ(0);
}

.togglebox h2{ line-height:80px;}
input[type="radio"] {
  position: absolute;
  opacity: 0;
}

label {
  position: relative;
  display: block;
  height: 60px;
  line-height: 60px;
  padding: 0 20px;
  font-size:0.96rem;
  font-weight: 700;
  border-top: 1px solid #ddd;
  background:#f6f6f6;
  cursor: pointer;
  color:#333;
 font-family:"微软雅黑";
 font-weight:normal;
}

label[for*='1'] {
  border: 0;
}

label:after {
  content: '\f078';
  position: absolute;
  top: 0px;
  right: 20px;
  font-family: fontawesome;
  transform: rotate(90deg);
  transition: .3s transform;
}

section {
  height: 0;
  transition: .3s all;
  overflow: hidden;
}

#toggle1:checked ~ label[for*='1']:after,
#toggle2:checked ~ label[for*='2']:after,
#toggle3:checked ~ label[for*='3']:after,
#toggle4:checked ~ label[for*='4']:after {
  transform: rotate(0deg);
}

#toggle1:checked ~ #content1,
#toggle2:checked ~ #content2,
#toggle3:checked ~ #content3,
#toggle4:checked ~ #content4 {
  height: 150px;
}

.togglebox p {
  margin: 15px 0;
  padding: 0 20px;
  font-size: 12px;
  line-height: 2;
  color:#666;
  font-family:"微软雅黑";
}


.flow-container{ width:92%;  padding-top:30px; height:500px;}
.flow-list{ margin-top:10px;}
.flow-title{ height:90px;}
.flow-title img{ margin:0 auto; display:block; width:50%}
.flow-title span{line-height:20px; font-size:16px;}
.flow-list li{ width:31%; height:205px;  float:left;margin:2.6% 2.6% 0 0;}
.flow-list li:last-child,.flow-list li:nth-child(3){ margin-right:0;}
.flow-list li p{ line-height:25px; margin-top:10px; font-family:"微软雅黑"; font-size:12px;}

.dvantage-container{ width:92%; height:350px;  padding-top:30px;}
.dvantage-list{ margin-top:20px;}
.dvantage-list li{ float:left; width:23%; height:140px;margin:2.5% 2.5% 0px 0;}
.dvantage-list li:nth-child(4),.dvantage-list li:nth-child(8){ margin-right:0;}

.dvantage-list li p{ line-height:20px; font-size:14px;font-family:"微软雅黑";padding:0 5px;}
.dvantage-list li .img,.dvantage-list li:hover .img{ width:85px; height:60px; background-size:75%;}	

.correlation-container{ width:92%; height:100%; margin:0 auto 20px; padding-top:50px;}
.correlation-list{ margin-top:20px; height:640px;}
.correlation-list li{ float: none; width:96%; padding:10px; margin:10px 0; background:#F6F6F6}
.correlation-title{ font-size:16px; line-height:28px; margin-bottom:5px; }
.correlation-list li p{ font-family:"微软雅黑"; font-size:12px; line-height:22px;}
.correlation-container .button{ width:150px; height:40px; line-height:40px; margin:20px auto; }
	}