/* =============================================================================
   HTML5 CSS Reset Minified - Eric Meyer
   ========================================================================== */

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
body{line-height:1}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
nav ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;text-decoration:none}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
del{text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
input,select{vertical-align:middle}
li{list-style:none}


/* =============================================================================
   My CSS
   ========================================================================== */

/* ---- base ---- */

html,body{ width: 100%; height: 100%; }

html{
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body{
  font:normal 75% Arial, Helvetica, sans-serif;
}

canvas{
  display:block;
  vertical-align:bottom;
}

#top{position:absolute;background-color: #0c1939;z-index: 1000; top:0px; left:0px; width:100%;height:50px; line-height: 50px; font-size: 14px; color:#CCCCCC; border-bottom:1px #183272 solid}
.topcontent{width: 1000px; margin: 0 auto}
.toplogo{float: left}
.toplogo img{ margin-top: 5px;}

.topselected{ color:#3baafb; border-bottom:#3baafb 4px solid;}
.topselected a{ color:#3baafb;}
.toplist li:hover{color:#3baafb; }
.toplist li:hover a{color:#3baafb;  display: inline-block;}



.toplist{float:right; font-size: 16px; color:#cccccc;}
.toplist li{ display: inline-block; margin: 0 45px;}
.toplist li a{ color:#cccccc; display: inline-block;}
.toplist li a:hover{ display: inline-block; color:#1065F8;}
.toplist .tryout a{ width: 80px; height:30px; line-height: 30px; display:inline-block; vertical-align: middle; text-align: center; color:#1065F8; border:1px #1065F8 solid; border-radius: 2px;}
.toplist .tryout a:hover{  color:#ffffff; background-color:#1065F8;}
.toplist .listsed a{ color:#1065F8;}


/*--------head-----------*/
#headbg{ width: 100%; height:50px; color:#333333; line-height: 50px;border-bottom: 1px rgba(0,0,0,0.3) solid;position: fixed; z-index: 1000;}
#headbg:hover{ background-color: #0c1939; color:#ffffff; }
#headbg:hover .headlist a{color:#CCCCCC;}
#headbg:hover .listsed a{ color:#1065F8;}
#headbg:hover .tryout a{ color:#1065F8;}
#headbg:hover .tryoutse a{ color:#ffffff;}
#headbg:hover a:hover{ color:#1065F8;}
#headbg:hover .headlist .tryout a:hover{color:#FFFFFF; background:#1065F8; display: inline-block;}


.headnav{min-width: 1000px;  max-width: 1200px; margin: 0 auto}
.headlogo{float: left}
.headlogo img{ margin-top: 5px;}
.headlist{float:right; font-size: 16px; color:#333;}
.headlist li{ display: inline-block; margin: 0 45px;}
.headlist li a{ color:#333; display: inline-block;}
.headlist li a:hover{ display: inline-block; color:#1065F8;}
.headlist .tryout a{ width: 80px; height:30px; line-height: 30px; display:inline-block; vertical-align: middle; text-align: center; color:#1065F8; border:1px #1065F8 solid; border-radius: 2px;}
.headlist .tryoutse a{color:#FFFFFF; background:#1065F8; width: 80px; height:30px; line-height: 30px; display:inline-block; vertical-align: middle; text-align: center;  border:1px #1065F8 solid; border-radius: 2px;}
.headlist .tryoutse a:hover{color:#FFFFFF;}


.headlist .listsed a{ color:#1065F8;}
section{ height:100%; width: 100%;}
/*  index  */
#intro {
background:url("../img/indexbg.jpg") right bottom no-repeat fixed;
  width: 100%;
  height:100%;
  background-size: cover;
  overflow: hidden;
}

#second {
  color: white;
  height:100%;
  margin: 0 auto;
  padding: 0;
}

#third{
  background:url("../img/thirdbg.jpg") 0 50px  no-repeat fixed;
  width: 100%;
  height:100%;
  background-size: cover;
  overflow: hidden;
}

.frist_screen{ width: 100%;   height:100%; position: relative;  }
.frist_screen ul{margin-top: 260px;  float: right;margin-right:280px; padding: 0px; display: inline-block}

.frist_screen ul li{ font-size: 32px; color:#284283;}
.frist_screen ul li h3{  font-size: 60px;  margin-bottom: 10px;}
.frist_screen ul li span{ margin-top: 22px; width: 150px; height:45px;background-color:#1065F8; color:#fff; border:1px #1065F8  solid; color:#1065F8;  border-radius: 50px; font-size: 18px; display: block; text-align: center; line-height: 45px;}
.frist_screen ul li a span{color:#FFFFFF;}
.frist_screen ul li a span:hover{ background-color:#0c1939; color:#cccccc;}

.second_screen{width: 100%; height:100%;}
.second_screen h3{ font-size: 55px; padding: 8% 0 0 0; margin: 4% 0px 6% 0px; color:#151515; text-align: center; width: 100%;}
.second_screen ul{ margin: 30px auto; max-width:1200px;position: relative;}
.second_screen ul li{  float:left; color:#FFFFFF;}
.second_screen .se_left{background: url("../img/index_se_left.jpg") no-repeat; width: 600px; height:375px; font-size: 22px; text-align: right;}
.second_screen .se_right{background: url("../img/index_se_right.jpg") no-repeat; width: 600px; height:375px;font-size: 22px; text-align: left}
.second_screen .se_left span{ padding-right:80px; display: inline-block; margin-top: 250px;}
.second_screen .se_right span{ padding-left: 80px; display: inline-block;margin-top: 250px;}
.hexagon{ position: absolute; z-index: 90; top:200px; width: 133px; height: 153px;  text-align: center;color: #284283; font-size: 60px; line-height: 163px; left:50%;margin-left: -66px; background: url("../img/hexagon.png") no-repeat}

.third_screen{  width: 100%; height:100%; }
.third_screen ul{  padding:0px;  margin: 0px;width: 100%; height:100%;}
.third_screen ul li{    float: left; height:100%; margin: 0px;padding:0px; vertical-align: middle; position: relative }
.tit{ width: 22.3%;  border-right:1px rgba(255,255,255,0.3) solid; border-top:none; border-bottom:none;}
.on{
  -moz-box-shadow:0 0 30px rgba(0,0,0,0.5);
  -webkit-box-shadow:0 0 30px rgba(0,0,0,0.5);

  background: -ms-linear-gradient(top, rgba(255,255,255,0.05),  rgba(255,255,255,0.95));        /* IE 10 */
  background:-moz-linear-gradient(top,rgba(255,255,255,0.05),  rgba(255,255,255,0.95));/*���������9*/
  background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(rgba(255,255,255,0.05)), to(rgba(255,255,255,0.95)));/*���������*/
  width:33.1%;
  height:100%;
}

.tit span{
  background:url("../img/third_row.png") no-repeat;
  font-size: 35px;
  display: block;
  text-align: center;
  line-height: 127px;
  width: 109px;
  height:127px;
  margin:100% auto 0px auto;
  vertical-align: middle;
  color:#FFFFFF;

}
.tit div{display: none;font-size:16px; }
.on div{ margin:40% auto 0px auto; display: block;  width:82%;text-indent: 2em; font-size: 120%; line-height: 180%;color:#151515; }
.on span{
  background:url("../img/third_row_se.png") no-repeat;
  font-size: 70px;
  display: block;
  text-align: center;
  line-height: 203px;
  width: 175px;
  height:203px;
  margin:30% auto 0 auto;

  color:#FFFFFF;
}

.four_screen{width: 100%; height:100%; position: relative; overflow: hidden}
.four_screen h3{ font-size: 50px; padding: 5% 0 0 0; margin: 4% 0px 2% 0px; color:#151515; text-align: center; width: 100%;}
.four_screen .cpnav{ width: 1200px; margin: 0px auto;}
.four_screen .cpnav ul li{ width: auto; padding: 0px 8px; text-align: center; display: inline-block;}
.four_screen .cpnav ul li p{ text-align: center; font-size: 18px; line-height: 35px;}
.four_screen .bottom{position: absolute; bottom:0px; height:120px; background: #000000; width: 100%; }
.four_screen .bottom ul{width: 80%; margin: 0px auto; color:#cccccc; line-height: 70px; }
.four_screen .bottom ul li{  float: left}
.copydiv{font-size: 14px;width: 60%; text-align: center}
.phonediv{ font-size: 38px; background: url("../img/phone.png") center left no-repeat; padding-left: 50px;}
/* ---- stats.js ---- */
.particles{position: absolute;  bottom:120px; width: 100%}
#particles-js{ height:160px;}
.count-particles{
  position: absolute;
  top: 22%;
  left: 0;
  width: 100%;
  color: #FFFFFF;
  font-size:24px;
  text-align: center; line-height: 20px;
  font-family: Helvetica, Arial, sans-serif;

}


.js-count-particles{
  font-weight: normal;
 font-size:16px;  display: block;
  margin: 0px auto;
  width: 140px; height:36px; text-align: center; line-height: 36px;
  border:1px #ffffff solid;
  border-radius: 4px;
}/* ---- particles.js container ---- */

#particles-js{ width: 100%; max-height: 160px; min-height:120px; background-color: #0F2048; background-image: url(''); background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; }


#bottom{ position: absolute; bottom: 0px; height:50px;  display:block;line-height: 50px; font-size: 12px; color:#79797B; width: 100%; text-align: center; margin: 0px auto}
#main{
   background: url("../img/bg.png") no-repeat center right;
   background-size: cover;
   width: 100%;
   height:100%;
   overflow: hidden;
  display:block;
  text-align: center;
}
.block{
  width: 1190px;
  height:709px;
  margin-left:18%;
  /*margin: 0px auto;*/
  display: block;
  /*background: url("../img/bg_tu.png") no-repeat;*/
  /*background-size: cover;*/
  position: relative;


}

.meibg{
  width: 491px;
  height:562px;
  margin: 0px auto;
  left:14px;
  top:114px;
  display: block;
  position: absolute;
  z-index: 2;
  background: url("../img/meibg.png") no-repeat;
  background-size: cover;
  font-size: 24px;

}
.lvbg{
  width: 453px;
  height:422px;
  margin: 0px auto;
  left:188px;
  top:0px;
  display: block;
  position: absolute;
  z-index: 2;
  background: url("../img/lvbg.png") no-repeat;
  background-size: cover;
  font-size: 24px;

}
.huangbg{
  width: 493px;
  height:398px;
  margin: 0px auto;
  left:555px;
  top:6px;
  display: block;
  position: absolute;
  z-index: 2;
  background: url("../img/huangbg.png") no-repeat;
  background-size: cover;
  font-size: 24px;

}
.lanbg{
  width: 690px;
  height:454px;
  margin: 0px auto;
  left:518px;
  top:250px;
  display: block;
  position: absolute;
  z-index: 2;
  background: url("../img/lanbg.png") no-repeat;
  background-size: cover;
  font-size: 24px;
}
.lanbg:hover{   background: url("../img/lanbg_1.png") no-repeat;zoom:1.01; }
.lanbg:hover .zihuiyyline{   display: none;  }
.lvbg:hover{ background: url("../img/lvbg_1.png") no-repeat;zoom:1.01;}
.lvbg:hover .shejiline{ display: none}
.huangbg:hover{ background: url("../img/huangbg_1.png") no-repeat;zoom:1.01; }
.huangbg:hover .zhiliangline{ display: none;  }
.meibg:hover{ background: url("../img/meibg_1.png") no-repeat;zoom:1.01; }
.meibg:hover .zhuanyeline{ display: none; }

.meibg a, .lanbg a,.huangbg a, .lvbg a{ color:#cccccc; display: block}
.mei_qq{
  width: 158px;
  height:176px;
  margin: 0px auto;
  left:14px;
  top:5px;
  display: block;
  position: absolute;
  z-index: 3;
  color:#CCCCCC;
  line-height: 175px;
  /*background: url("../img/mei_qq.png") no-repeat;*/
  /*background-size: cover;*/
}
.mei_qq:hover{
  width: 135px;
  height:157px;
  background: url("../img/mei_1.png") no-repeat;
  background-size: cover;
  margin: 10px 0 0 10px;
  display: block;
  line-height: 157px;
}
.mei_fx{
  width: 168px;
  height:190px;
  margin: 0px auto;
  left:76px;
  top:160px;
  display: block;
  position: absolute;
  z-index: 3;
  /*background: url("../img/mei_fx.png") no-repeat;*/
  /*background-size: cover;*/
  color:#CCCCCC;
  line-height: 190px;
}
.mei_fx:hover{
  width: 145px;
  height:168px;
  background: url("../img/mei_1.png") no-repeat;
  background-size: cover;
  margin: 12px 0 0 11px;
  display: block;
  line-height: 168px;
}
.mei_dq{
  width: 177px;
  height:204px;
  margin: 0px auto;
  left:104px;
  top:348px;
  display: block;
  position: absolute;
  z-index: 3;
  /*background: url("../img/mei_dq.png") no-repeat;*/
  /*background-size: cover;*/
  color:#CCCCCC;
  line-height: 204px;
}
.mei_dq:hover{
  width: 156px;
  height:181px;
  background: url("../img/mei_1.png") no-repeat;
  background-size: cover;
  margin: 11px 0 0 10px;
  display: block;
  line-height: 181px;
}
.mei_zy{
  width: 200px;
  height:225px;
  margin: 0px auto;
  left:290px;
  top:268px;
  display: block;
  position: absolute;
  z-index: 2;
  /*background: url("../img/mei_zy.png") no-repeat;*/
  /*background-size: cover;*/
  color:#CCCCCC;
  line-height: 225px;
}
.mei_zy:hover{
  width: 179px;
  height:207px;
  background: url("../img/mei_1.png") no-repeat;
  background-size: cover;
  margin: 7px 0 0 9px;
  display: block;
  line-height: 205px;
}
.mei_zy a{ position: absolute; z-index: 4; left:55px;}

.huang_jh{
  width: 170px;
  height:192px;
  margin: 0px auto;
  left:10px;
  top:5px;
  display: block;
  position: absolute;
  z-index: 3;
  /*background: url("../img/huang_jh.png") no-repeat;*/
  /*background-size: cover;*/
  color:#CCCCCC;
  line-height: 192px;
}
.huang_jh:hover{
  width: 151px;
  height:172px;
  background: url("../img/h_1.png") no-repeat;
  background-size: cover;
  margin: 12px 0 0 15px;
  display: block;
  line-height: 172px;
}
.huang_jd{
  width: 159px;
  height:174px;
  margin: 0px auto;
  left:186px;
  top:22px;
  display: block;
  position: absolute;
  z-index: 3;
  /*background: url("../img/huang_jd.png") no-repeat;*/
  /*background-size: cover;*/
  color:#CCCCCC;
  line-height: 174px;
}
.huang_jd:hover{
  width: 136px;
  height:159px;
  background: url("../img/h_1.png") no-repeat;
  background-size: cover;
  margin: 12px 0 0 10px;
  display: block;
  color:#FFFFFF;
  line-height: 155px;

}

.huang_zl{
  width: 172px;
  height:186px;
  margin: 0px auto;
  left:100px;
  top:198px;
  display: block;
  position: absolute;
  z-index: 3;
  /*background: url("../img/huang_zl.png") no-repeat;*/
  /*background-size: cover;*/
  color:#CCCCCC;
  line-height: 172px;
}

.huang_zl:hover{
  width: 145px;
  height:168px;
  background: url("../img/h_1.png") no-repeat;
  background-size: cover;
  margin: 4px 0 0 16px;
  display: block;
  line-height: 168px;
}

.huang_zlfk{
  width: 224px;
  height:260px;
  margin: 0px auto;
  left:268px;
  top:126px;
  display: block;
  position: absolute;
  z-index: 3;
  /*background: url("../img/huang_zlfk.png") no-repeat;*/
  /*background-size: cover;*/
  color:#CCCCCC;
  line-height: 260px;
}
.huang_zlfk:hover{
  width: 202px;
  height:232px;
  background: url("../img/h_1.png") no-repeat;
  background-size: cover;
  margin: 16px 0 0 13px;
  display: block;
  line-height: 232px;
}
.huang_zlfk a{ position: absolute; z-index: 4; left: 65px;}
.lv_sj{
  width: 164px;
  height:187px;
  margin: 0px auto;
  left:15px;
  top:65px;
  display: block;
  position: absolute;
  z-index: 3;
  /*background: url("../img/lv_sj.png") no-repeat;*/
  /*background-size: cover;*/
  color:#CCCCCC;
  line-height: 187px;
}

.lv_sj a{z-index: 4; position: absolute; left:35px;}




.lv_sj:hover{
  width: 143px;
  height:168px;
  background: url("../img/lv_1.png") no-repeat;
  background-size: cover;
  margin: 9px 0 0 11px;
  display: block;
  line-height: 167px;
}
.lv_sjbg{
  width: 173px;
  height:196px;
  margin: 0px auto;
  left:185px;
  top:8px;
  display: block;
  position: absolute;
  z-index: 3;
  /*background: url("../img/lv_sjbg.png") no-repeat;*/
  /*background-size: cover;*/
  color:#CCCCCC;
  line-height: 196px;
}
.lv_sjbg:hover{
  width: 152px;
  height:177px;
  background: url("../img/lv_1.png") no-repeat;
  background-size: cover;
  margin: 7px 0 0 9px;
  display: block;
  line-height: 176px;
}
.lv_zl{
  width: 142px;
  height:160px;
  margin: 0px auto;
  left:89px;
  top:226px;
  display: block;
  position: absolute;
  z-index: 3;
  /*background: url("../img/lv_zl.png") no-repeat;*/
  /*background-size: cover;*/
  color:#CCCCCC;
  line-height: 160px;
}
.lv_zl:hover{
  width: 123px;
  height:142px;
  background: url("../img/lv_1.png") no-repeat;
  background-size: cover;
  margin: 6px 0 0 9px;
  display: block;
  line-height: 140px;
}
.lv_5d{
  width: 191px;
  height:217px;
  margin: 0px auto;
  left:238px;
  top:180px;
  display: block;
  position: absolute;
  z-index: 3;
  /*background: url("../img/lv_5D.png") no-repeat;*/
  /*background-size: cover;*/
  color:#CCCCCC;
  line-height: 217px;
}
.lv_5d:hover{
  width: 170px;
  height:198px;
  background: url("../img/lv_1.png") no-repeat;
  background-size: cover;
  margin: 2px 0 0 15px;
  display: block;
  line-height: 197px;
}
.lan_gx{
  width: 176px;
  height:204px;
  margin: 0px auto;
  left:32px;
  top:130px;
  display: block;
  position: absolute;
  z-index: 3;
  /*background: url("../img/lan_gaoxiao.png") no-repeat;*/
  /*background-size: cover;*/
  color:#CCCCCC;
  line-height: 204px;

}
.lan_gx:hover{
  width: 177px;
  height:204px;
  background: url("../img/lan_1.png") no-repeat;
  background-size: cover;
  margin: -1px 0 0 0;
  display: block;
  line-height: 204px;
}
.lan_zh{
  width: 189px;
  height:218px;
  margin: 0px auto;
  left:228px;
  top:134px;
  display: block;
  position: absolute;
  z-index: 3;
  /*background: url("../img/lan_zh.png") no-repeat;*/
  /*background-size: cover;*/
  color:#CCCCCC;
  line-height: 218px;

}
.lan_zh:hover{
  width: 190px;
  height:218px;
  background: url("../img/lan_1.png") no-repeat;
  background-size: cover;
  margin: 1px 0 0 -2px;
  display: block;
  line-height: 218px;
}
.lan_zh a{ position: absolute;  z-index: 4; left: 48px;}
.lan_zj{
  width: 113px;
  height:130px;
  margin: 0px auto;
  left:388px;
  top:301px;
  display: block;
  position: absolute;
  z-index: 3;
  /*background: url("../img/lan_zj.png") no-repeat;*/
  /*background-size: cover;*/
  color:#CCCCCC;
  line-height: 130px;
}
.lan_zj:hover{
  width: 113px;
  height:134px;
  background: url("../img/lan_1.png") no-repeat;
  background-size: cover;
  margin: 0px;
  display: block;
  line-height: 130px;
}
.lan_aq{
  width: 154px;
  height:178px;
  margin: 0px auto;
  left:436px;
  top:134px;
  display: block;
  position: absolute;
  z-index: 3;
  /*background: url("../img/lan_aq.png") no-repeat;*/
  /*background-size: cover;*/
  color:#CCCCCC;
  line-height: 178px;
}
.lan_aq:hover{
  width: 155px;
  height:179px;
  background: url("../img/lan_1.png") no-repeat;
  background-size: cover;
  margin: 1px 0 0 -2px;
  display: block;
  line-height: 178px;
}
.lan_jn{
  width: 129px;
  height:149px;
  margin: 0px auto;
  left:546px;
  top:14px;
  display: block;
  position: absolute;
  z-index: 3;
  /*background: url("../img/lan_jn.png") no-repeat;*/
  /*background-size: cover;*/
  color:#CCCCCC;
  line-height: 149px;
}
.lan_jn:hover{
  width: 129px;
  height:154px;
  background: url("../img/lan_1.png") no-repeat;
  background-size: cover;
  margin: 0px;
  display: block;
  line-height: 149px;
}




.shejiline{ position: absolute; z-index: 3; top:22.5px; left:13.3px; background: url("../img/2.png") no-repeat;
  width:140px; height:140px;
  animation: myfirst 8s infinite linear ;
  /* Firefox: */
  -moz-animation: myfirst 8s infinite linear;
  /* Safari ������Chrome: */
  -webkit-animation: myfirst 8s infinite linear;
  /* Opera: */
  -o-animation: myfirst 8s infinite linear;
}
.zhuanyeline{ position: absolute; z-index: 3; top:24px; left:12.3px; background: url("../img/3.png") no-repeat;
  width:174px; height:174px;
  animation: myfirst 12s infinite linear ;
  /* Firefox: */
  -moz-animation: myfirst 9s infinite linear;
  /* Safari ������Chrome: */
  -webkit-animation: myfirst 9s infinite linear;
  /* Opera: */
  -o-animation: myfirst 9s infinite linear;
}
.zhiliangline{ position: absolute; z-index: 3; top:37.4px; left:17.3px; background: url("../img/4.png") no-repeat;
  width:192px; height:192px;
  animation: myfirst 8s infinite linear ;
  /* Firefox: */
  -moz-animation: myfirst 8s infinite linear;
  /* Safari ������Chrome: */
  -webkit-animation: myfirst 8s infinite linear;
  /* Opera: */
  -o-animation: myfirst 8s infinite linear;
}
.zihuiyyline{ position: absolute; z-index: 3; top:18.5px; left:0px; background: url("../img/5.png") no-repeat;
  width:186px; height:186px;
  animation: myfirst 9s infinite linear ;
  /* Firefox: */
  -moz-animation: myfirst 9s infinite linear;
  /* Safari ������Chrome: */
  -webkit-animation: myfirst 9s infinite linear;
  /* Opera: */
  -o-animation: myfirst 9s infinite linear;
}
@keyframes myfirst
{
  0%{ transform:rotate(-360deg); }
  100%{ transform:rotate(0deg); }
}

@-moz-keyframes myfirst /* Firefox */
{
  0%{ transform:rotate(-360deg); }
  100%{ transform:rotate(0deg); }
}

@-webkit-keyframes myfirst /* Safari ������Chrome */
{
  0%{ transform:rotate(-360deg); }
  100%{ transform:rotate(0deg); }
}

@-o-keyframes myfirst /* Opera */
{
  0%{ transform:rotate(-360deg); }
  100%{ transform:rotate(0deg); }
}




/***login****/
.loginbg{

  display: block;

  
  	 position: absolute;
	 width: 100%;
	 height: 100vh;
	 overflow: hidden;
	 background: url("../images/logobg.jpg")no-repeat;
	 background-size: 100% 100%;

}

.loginindexbg{
  width: 100%;
  height: 100vh;
  padding:0px 0 0px 0;
  color:#FFFFFF;
  
  

  text-align: center;


}
.logoback{
  width: 100%;
  height:100%;
  background:#FFFFFF;

}
.loginindexbg h3{font-size: 24px; text-align: center;}
.loginindexbg h3 span{ font-size: 16px; margin-top: 15px; }
.logintitle{

  margin-left:20%;  margin-top: 18%; float: left;
  font-size: 40px;
  text-align: center;

}

.login_logo{  margin:10% auto 0 auto; text-align: center;  display: block;}
.loginbox{

  width:478px;
  height:296px;
  overflow:hidden;
  background:rgba(255,255,255,0.1);
  border-radius:4px;
  border:1px solid rgba(255,255,255,0.2);
  margin:35px auto 0 auto;
  color:#333333;
  font-family: "������������������";
}
.login_prompt{ width: 220px; height: 28px; text-align: center; line-height: 28px; background: rgba(0,0,0,0.7); border-radius: 50px; font-size: 14px; margin: 20px auto; display: block}
.loginbox h3{
  text-align:center;font-size:24px; margin-top: 20px;
}
.loginbox ul{
  padding:20px 30px;
  text-align: center;
}
.loginbox li{
  margin:20px 0px;
  font-size: 23px;
}



.loginbox li input.text{
  width:186px;height:49px;
  line-height:34px;border:1px solid #cccccc;text-indent: 10px;
color:#666;  font-family: "������������������";border-radius: 2px;
  font-size: 18px;
}

.loginbox li input.text2{
  width:170px;height:49px;
  line-height:34px;border:1px solid #cccccc;text-indent: 10px;
  color:#666;  font-family: "������������������";border-radius: 2px;
  font-size: 18px;
}
.loginbox li input.passwords{
  width:400px;height:49px;line-height:34px;border:1px solid #cccccc;text-indent: 10px;
  color:#666;  font-family: "������������������"; border-radius: 2px;
  font-size: 18px;
}


.loginbox a.loginbtn{
  background:#058CEF;
  height:54px;line-height:54px;display:block;
  width:400px;
  border:1px solid #3BAAFb;text-align:center;color:#fff;
 font-size:18px;border-radius:2px; margin: 0px auto;
}
.loginbox p{
  text-align:center;margin-top:30px;width:100%;
  color:#ffffff;
  height:30px;
  line-height: 30px;
  background-color: rgba(59,170,251,0.2); border:1px #3BAAFb solid; border-radius: 6px; font-weight: bold;
}
.loginbox p a{
  color:#ffff00;margin:0px 10px;
}
.loginbox p img{vertical-align: middle}
.loginbox p a:hover{
  color:#D0572E;
}


/***���������**/
.service_con{

  padding:20px 30px 0 30px;width:650px;overflow:hidden;vertical-align: text-top;
  background: rgba(255,255,255,0.1);
  margin:20px auto 0px auto;
}
.service_con h2{
  font-size:24px;text-align:center;color:#151515; line-height: 25px;margin-bottom:20px;
}
.service_con h2 span{
  font-size:14px;text-align:center;color:#7f7f7f;
}
.service_con p{
  text-align:center;margin-top:20px;
}
.applybtn{
  padding:0px;background:#1065f8;display:inline-block;color:#fff;font-size:18px;
  width:320px; height:48px; line-height: 48px; text-align: center;
}

.ser_hd{
  border-bottom:1px solid #eee;padding-bottom:20px;margin-bottom:30px;
}
.ser_hd h3{
  border-left:3px solid #D0572E;padding-left:15px;font-size:16px;color:#D0572E;
}
.f_list{

  overflow:hidden;margin-bottom:20px;font-size:14px;vertical-align: text-top; background: #FFFFFF; 
}
.f_list ul{ width: 450px; margin: 0 auto; padding: 0px;}
.f_list li{
  width:100%;margin:15px auto; text-align: left; vertical-align: text-top;
}
.f_list li span{
  width:100px;text-align:right;display:inline-block;line-height:42px; vertical-align: top;color:#7f7f7f;
}
.upfilebox img{ display: inline-block; margin-top: 30px; margin-left: -35px;}
.f_list li div{ display: inline-block}
.f_list li div  label{
  display:block;
  font-size: 12px; margin-top:5px; font-weight: normal;
}

.validateCode{ width:100%}
.validateCode img{ width: 80px; height:36px; vertical-align:middle;display: inline-block}
.validateCode label{ display: inline-block; width: auto;}

.f_list li .input_text{
  height:40px;border:1px solid #ddd; border-radius: 2px; width:300px;padding-left:15px; background: rgba(255.255.255.0.1);color:#666;
}
.f_list li select{width:148px;height:40px;border:1px solid #ddd; border-radius: 2px;color:#666;}
.f_list li option{ color:#000000}
.f_list li.w100{
  width:100%;
}
.whalf{
  display: inline-block;
  vertical-align: top;
}
.whalf label{font-size:12px;}
.f_list li .input_text_2{
  border:1px solid #ddd;width:300px;padding-left:15px;border-radius: 4px;
}

.upfilebox {
  position: relative;
height:50px;
}

.upfilebox{ display:inline-block;width: 50%;padding-right: 15px;}
.upfilebox input {

  display: inline-block;
  position: relative;
  z-index: 9;
  opacity: 0;
  height:35px;border:1px solid #ddd; border-radius: 4px; width:100%; background: rgba(255.255.255.0.3);
}

.f_list li .upfilebox label {
  position: absolute;
  display: inline-block;
  color: #ffffff;
  width: 125px;
  height: 42px;
  line-height: 41px;
  text-align: center;
  top: 0px;
  left: 0px;
  background: #cccccc;
  border:2px #cccccc dashed;
  cursor: pointer;
  margin-left: 170px;
  margin-top: 0px;

}
.f_list li .upfilebox span {

   display: inline-block;
   width: 160px; text-align: center;
 }

.rowbg{ position: fixed; bottom:10px; right:0px;  width: 573px; height:212px;


}

.upfilebox span img{

  background: #DDDDDD; margin-top: 5px;
  width: 120px; height:90px;


}

.rowbg{ position: fixed; bottom:10px; right:0px;  width: 573px; height:212px;


}

.rowbg_1{
  width: 100%;
  position: absolute;
   z-index: 1;
   background: url("../img/lighting_bg.png") bottom;
   display: block;
   bottom:0px;
  -webkit-animation:fadeTop 8s infinite linear;
  animation:fadeTop 8s infinite linear;
}

.rowbg_2{
  width: 100%;
  position: absolute;
  z-index: 0;
  background: url("../img/lightingbefor_bg.png");
  display: block;
  height:212px;
}
@-webkit-keyframes fadeTop{

  0%{ height:0px;}
  20%{ height:53px;}
  30%{ height:106px;}
  40%{height:159px;}
  60%{ height:212px; }
  70%{height:159px;}
  80%{height:106px;}
  90%{height:53px;}
  100%{ height:0px;}


}
@keyframes fadeTop{

  0%{ height:0px;}
  10%{ height:53px;}
  20%{ height:106px;}
  30%{height:159px;}
  40%{ height:212px; }
  50%{height:159px;}
  70%{height:106px;}
  90%{height:53px;}
  100%{ height:0px;}
}



.re_success{ margin: 11% auto 0 auto; width: 316px; height:316px; background: url("../img/finish_befor.gif");}
.submit_prompt{ margin: 3% auto ; text-align: center; width: 100%; font-size: 24px; color:#151515;}
.backindex{width: 100px; height:40px; font-size: 18px; text-align: center;  line-height: 40px; border:1px #1065f8 solid; color:#1065f8; border-radius: 2px; display: block; margin: 5% auto}
.backindex a{ display: block; color:#1065f8}


.pz{width: 252px; height:250px; position: absolute;  bottom: 130px; right: 0px; }
.gh{background: url("../img/gd.png") no-repeat; width: 113px; height:133px;background-size: 100% auto;}
.ghs{background: url("../img/gds.png") no-repeat; width: 64px; height:68px;}

.sybtn{background-color:#1065F8; width: 210px; height:50px; text-align: center; line-height: 50px; font-size: 20px; border: none; color:#ffffff; margin-top: 20px; cursor: pointer;margin-right: 20px;}
.sybtn_login{border:#1065F8 2px solid; width: 210px; height:50px; background: none; text-align: center; line-height: 48px; font-size: 20px; color:#1065F8; margin-top: 20px;cursor: pointer; margin-right: 20px;}

/***********���������������������������***************/

#slider {
  margin: 0px auto;
  width: 320px;
  height: 40px;
  position: relative;
  border-radius: 2px;
  background-color: #dae2d0;
  overflow: hidden;
  text-align: center;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}

#slider_bg {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background-color: #7AC23C;
  z-index: 1;
}

#label {
  width: 46px;
  position: absolute;
  left: 0;
  top: 0;
  height: 38px;
  line-height: 38px;
  border: 1px solid #cccccc;
  background: #fff;
  z-index: 3;
  cursor: pointer;
  color: #ff9e77;
  font-size: 16px;
  font-weight: 900;
  text-align:center;
}

#labelTip {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 13px;
  font-family: 'Microsoft Yahei', serif;
  color: #787878;
  line-height: 38px;
  text-align: center;
   border: 1px solid #cccccc;
  z-index: 2;
}