body{ margin:0; background:#fafafa}
td,div,li,select,input,textarea{ font:14px/24px songti; color:#333;}
input{ line-height:1.3; color:#333}
a{ color:#333; text-decoration:none}
a:hover{ color:#217c43; text-decoration:underline}
ul{ list-style-type:none; padding:0; margin:0}
img{ border:0;}
.clear{ clear:both; font-size:0; line-height:0; height:0}

@font-face{
  font-family:myfont;
  src:url('SourceHanSerifCN-Bold-2.otf');
}
.header{ margin: 0 0 80px; width: 100%; position: relative}
#banner{ width: 100% }
#banner div{ width: 100%; line-height: 0; position: relative}
#banner img{ width: 100%; height: auto}
#banner p{ width: 600px; padding: 0 550px 0 20px; margin: 0; position: absolute; z-index: 1000; left: 50%; top: 34%; margin-left: -550px;  font: 40px/50px myfont;}
#banner p a{ color: #fff}
#banner span{ display: block; width: 600px; padding: 0 550px 0 20px; margin: 150px 0 0 -548px; position: absolute; z-index: 1000; left: 50%; top: 30%; font: 16px/24px microsoft yahei; color: #fff}
#banner p a:hover{ text-decoration: none}
#bnav{ position: absolute; bottom: 75px; width: 100%; text-align: center; z-index: 1000}
#bnav a{ display: inline-block; margin: 0 3px; width: 9px; height: 9px; border: 2px solid #fff; -moz-border-radius:9px; -webkit-border-radius:9px; border-radius:9px; }
#bnav a.cycle-pager-active{ background:#fff}

.n_l{ /*position: absolute; top: 0; left: 0;*/ width: 100%; height: 75px; /*background: url(../images/navbg.png) repeat-x bottom;*/ background: #217c43; z-index: 300}
.nav{ margin: auto; width: 1100px; overflow: hidden}
.nav ul li{ float: left; width: 13%; text-align: center; font: 18px/75px microsoft yahei }
.nav ul li.n3{ margin: 0 11% 0 0}
.nav ul li.n4{ margin: 0 0 0 11%}
.nav ul li a{ color: #fff}
.logo{ position: absolute; top: 15px; left: 50%; width: 96px; margin-left:-48px; line-height: 0 }


.wrap{ width: 1100px; margin: auto}
.title{ text-align: center; margin: 0 0 70px; line-height: 0}
#news{ margin: 0 0 100px}
.newsl,.newsr{ width: 535px; float: left; border-bottom: 8px solid #217c43; background: #fff}
.newsr{ float: right;}
.npic{ line-height: 0; }
.npic p{ font: 32px/40px myfont; margin: 40px 55px 20px}
.npic img{ width: 100%; height: 300px}
.npic span{ display: block; margin: 0 30px; padding: 0 45px 35px; font: 14px/24px microsoft yahei; color: #777; border-bottom: 1px solid #e9efee; }
.nlist{ margin: 0 68px}
.nlist ul li{ font: 18px/24px microsoft yahei; padding: 30px 0; border-top: 1px solid #f5f7f6 }
.nlist ul li:first-child{ border: 0}
#product{ margin: 0 0 100px; background: url(../images/probg.jpg) repeat-x 0 145px; height: 932px; padding: 0;}
#procon{ background: #fff; border-top: 8px solid #217c43; line-height: 0; margin: 180px 0 0; overflow: hidden }
#procon img{ float: left; }
#procon p{ font: 32px/40px myfont; margin: 80px 60px 30px; float: left; width: 288px}
#procon span{ display: block; float: left; width: 288px; margin: 0 60px; font: 14px/24px microsoft yahei; color: #777; }
a.bmore{ display:block; color:#217c43; background:url(../images/arw.png) no-repeat right 50%; padding:0 28px 0 0; margin:40px 60px 0 0; float:right; height:30px; font:14px/30px microsoft yahei}
a.bmore:hover{ text-decoration:none}

#intro{ margin: 0 0 100px}
.inl{ float: left; width: 730px; min-height: 660px; background: #fff; border-bottom: 2px solid #f0f0f0;}
.inr{ float: right; width: 350px; min-height: 652px; background: #fff; border-top: 8px solid #217c43; border-bottom: 2px solid #f0f0f0;}
.video{ margin: 0 0 40px; line-height: 0}
.video img{ width: 730px; height: 345px}
.video video{ width:100%; height:auto}
.intro{ margin: 0 130px 0 70px }
.intro img{ display: none}
.intro p{ font: 32px/40px myfont; margin: 0 0 22px}
.intro span{ font: 14px/24px microsoft yahei; color: #777;  }
.inrc div.picjs{ height: 256px; padding: 70px 0 0; margin: 0 30px; border-top: 1px solid #e4eceb; }
.inrc div.picjs:first-child{ border: 0}
.inrc div.picjs img{ display: none;}
.inrc div.picjs p{font: 28px/36px myfont; margin: 0 0 22px}
.inrc div.picjs span{ font: 14px/24px microsoft yahei; color: #777;  }

#coop{ position: relative; height: 650px; margin: 0 0 130px}
.coopbg{ position: absolute; bottom: 0; left: 0; width: 100%; height: 350px; background: #217c43; z-index: 10}
.coopbox{ position: absolute; z-index: 15; top: 150px; width: 1200px; left: 50%; margin-left: -550px; overflow: hidden}
.coopbox div.picjs{ float: left; width: 300px; line-height: 0; text-align: center; margin: 0 100px 0 0; }

.coopbox div.picjs img{ width: 300px; height: 280px;}
.coopbox div.picjs p{ font: 26px/32px myfont; margin: 40px 0 25px; color: #fff}
.coopbox div.picjs a{ color: #fff}
.coopbox div.picjs span{ font: 14px/24px microsoft yahei; color: #fff; }
#footer{ background: #444; border-top: 6px solid #217c43; padding: 50px 0}
.qrcode{ float: right; overflow: hidden}
.flogo{ float: left; font-size: 14px}
.finfo{ float: left; margin: 44px 0 0 140px; font-size: 14px}
.qrimg{ float: left; margin: 0 0 0 36px; width: 96px; line-height: 0; text-align: center}
.qrimg img{ width: 100%;}
.qrimg p{ margin: 6px 0 0; font-size: 14px; line-height: 24px}

#procon p a,.intro p a,.npic p a,.inrc div.picjs p a{ color: #333}
.fw,.fw a{ color: #fff}


#cheader{ height: 120px; background: url(../images/cheader.jpg) repeat-x 50% 0; margin: 0 0 60px}
.cmain{ background: #fff; margin: 0 0 60px; padding: 0 0 20px}
.ptitle,.ctitle{ font: 32px/40px myfont; border-top: 8px solid #217c43; padding: 40px 160px 20px;}
.ctitle{ padding: 40px 160px 13px;}
.stitle{ font: 18px/24px myfont; padding: 0 160px 20px; color: #666}
.cinfo{ color: #999; padding: 0 160px 20px}
.cnlist{ padding: 0 160px}
.cnlist ul li{ background:url(../images/dot.gif) no-repeat 5px 22px; font:16px/22px microsoft yahei; border-bottom:1px dashed #ccc; padding:12px 0 12px 15px; overflow: hidden}
.cnlist ul li span{ display:block; float:right; font-size:12px; color: #999}
.cnlist div{ margin:25px 0 15px; font-size:14px;}
.bcontent{ font: 18px/180% microsoft yahei; min-height: 400px; padding: 0 160px }
.bcontent p{ margin:0 0 28px;}
.bcontent table {border-collapse:collapse;}

@media only screen and (max-width: 736px){
  .wrap{ width: 90%; margin: auto}
  .newsl,.newsr{ float: none; width: 100%; margin: 0 0 6%}
  .npic p{ font: 22px/32px myfont; margin: 5% 6% 10px }
  .npic img{ width: 100%; height: auto}
  .npic span{ margin: 0 6%; padding: 0 0 6%}
  .n_l{ position: static; height: auto; background: #217c43; padding: 0;}
  .logo{ position: static; text-align: center; margin: auto; padding: 20px 0}
  .nav{ width: 100%; border-bottom: 1px solid #3c8c5a;}
  .nav ul li{ float: left; box-sizing: border-box; border-right: 1px solid #3c8c5a; border-top: 1px solid #3c8c5a; width: 33.3333%; line-height: 40px; text-align: center; font-size: 16px }
  .nav ul li a{ display: block; width: 100%; height: 40px}
  .nav ul li a:hover{ text-decoration: none}
  .nav ul li.n3,.nav ul li.n4{ margin: 0}
  #bnav{ position: absolute; bottom: -40px; width: 100%; text-align: center; z-index: 1000}
  #bnav a{ display: inline-block; margin: 0 3px; width: 9px; height: 9px; border: 2px solid #217c43; -moz-border-radius:9px; -webkit-border-radius:9px; border-radius:9px; }
  #bnav a.cycle-pager-active{ background:#217c43}
  .title img{ max-width: 90%}
  .inl,.inr,.video img{ width: 100%; height: auto; min-height: auto}
  .inl{ margin: 0 0 6%; padding: 0 0 6%}
  #coop{ height: auto; background: #217c43}
  .coopbg{ display: none}
  .coopbox{ position: static}
  .coopbox div.picjs,.coopbox div.picjs:first-child{ float: none; width: 100%; margin: 0 auto 30px}
  .coopbox div.picjs img{ width: 100%; height: auto}
  .coopbox div.picjs p{ margin: 5% 0 3%}
  .title{ margin: 0 0 6%; background: #fafafa}
  .title2{ padding: 0 0 6%}
  
  .flogo,.finfo{ float: none; margin: 0 0 20px}
  .qrcode{ float: none; margin: auto; width: 80%}
  .qrimg{ width: 40%; margin:0 5%}
  .nlist{ margin: 0 6%}
  #product{ height: auto; background-repeat: repeat-y; background-position: 50% 0; padding-bottom: 6%}
  #procon{ margin: 0; padding: 0 0 6%}
  #procon img{ width: 100%; height: auto; float: none;}
  #procon p{ width: 88%; margin: 6%; float: none;}
  #procon span{ width: 88%; float: none; margin: 0 6%}
  .intro{ margin: 0 6%}
  .video video{ width:100%; height:auto}
  .inrc div.picjs{ height: auto; padding: 6% 0}
  #news,#product,#intro,#coop{ margin: 0 0 50px}
  a.bmore{ margin-right: 6%;}
  #banner span{ display: none}
  #banner p{ width: 88%; padding: 0 6%; left: 0%; top: 30%; margin-left: 0;  font: 18px/24px myfont;}
  
  #cheader,.cmain{ margin: 0 0 6%}
  .ptitle{ font: 32px/40px myfont; border-top: 8px solid #217c43; padding: 20px 6%}
  .cnlist,.bcontent{ padding: 0 6% 20px}
  .bcontent img{ max-width: 100%; height: auto}
  .stitle{ padding-left:0; padding-right:0}
}