@charset "utf-8";
/*dwj*/

/*全局控制*/
body{margin:0px;padding:0px;font-family:"微软雅黑";color:#000;font-size:12px;line-height:22px;-webkit-text-size-adjust: none;overflow: hidden;}
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,p{margin:0;padding:0;}
input,select{font-size:12px;line-height:16px;font-family:"微软雅黑";}
img{border:0;vertical-align:top;}
ul,li{list-style:none;}
a{color:#000;text-decoration:none;}
a:hover{text-decoration:none;}
.tc{text-align:center;}.tl{text-align:left;}.tr{text-align:right;}
.cl{clear:both;}.fb{font-weight:bold;}
.dis{display:block;}.undis{display:none;}
.fl{float:left;}.fr{float:right;}


/*导航*/
.navbar { z-index: 3; position: fixed; top: 0; left: 0%;width: 80px;background: #fff;height: 100%;padding-top: 4%;}
#navBar{width: 100%;}
#navBar .active{}
#navBar li {text-align: center; line-height: 48px; color: #fff; font-size: 18px; position: relative;}

.nav-icon{text-align: center;margin-top: 36px}
.nav-item {
	float: left;
	width: 100%;
	text-align: center;
	padding-bottom: 12px;
	background: url('../images/border.jpg') no-repeat center bottom;
	margin-bottom: 7px;
}

.nav-item .nav-button {
  display: block;
  position: relative;
}

.nav-button .icon{position: relative;
  width: 80px;
  height: 48px;
  z-index: 1;
  display: block;
  -webkit-transition: .2s 0s all ease-in-out;
  -moz-transition: .2s 0s all ease-in-out;
  -ms-transition: .2s 0s all ease-in-out;
  -o-transition: .2s 0s all ease-in-out;
  transition: .2s 0s all ease-in-out;
}

.page-label{
  webkit-transition: .4s 0s all ease-in-out;
  -moz-transition: .4s 0s all ease-in-out;
  -ms-transition: .4s 0s all ease-in-out;
  -o-transition: .4s 0s all ease-in-out;
  transition: .4s 0s all ease-in-out;
  -webkit-transition: .4s all all ease-in-out;
  -moz-transition: .4s all all ease-in-out;
  -ms-transition: .4s all all ease-in-out;
  -o-transition: .4s all all ease-in-out;
  transition: .4s all all ease-in-out;
  -webkit-transition: .4s all all cubic-bezier(.1,.1,.25,.9);
  -moz-transition: .4s all all cubic-bezier(.1,.1,.25,.9);
  -ms-transition: .4s all all cubic-bezier(.1,.1,.25,.9);
  -o-transition: .4s all all cubic-bezier(.1,.1,.25,.9);
  transition: .4s all all cubic-bezier(.1,.1,.25,.9);
  position: absolute;
  top: 0;
  left: -100px;
  opacity: 0;
  visibility: hidden;
  background-color: #0d64c5;
  height: 100%;
  padding: 0 60px 0 70px;
  color: #fff;
  text-transform: uppercase;
}
.nav-item.active .page-label {
  opacity: 1;
  visibility: visible;
  left: 0;
}
.span1{/*display: table;*/
  display:block;
  height: 100%;
  overflow: hidden;
}
.nav-item.active .page-label .center {
  left: 0;
}
.nav-item .page-label .center {
  /*  display: table-cell;*/
  display:block;
  min-width: 75px;
  vertical-align: middle;
  position: relative;
  left: 100%;
  -webkit-transition: .4s 0s all ease-in-out;
  -moz-transition: .4s 0s all ease-in-out;
  -ms-transition: .4s 0s all ease-in-out;
  -o-transition: .4s 0s all ease-in-out;
  transition: .4s 0s all ease-in-out;
  -webkit-transition: all .4s cubic-bezier(.215,.61,.355,1);
  -moz-transition: all .4s cubic-bezier(.215,.61,.355,1);
  -o-transition: all .4s cubic-bezier(.215,.61,.355,1);
  transition: all .4s cubic-bezier(.215,.61,.355,1);
  -webkit-transition-timing-function: cubic-bezier(.215,.61,.355,1);
  -moz-transition-timing-function: cubic-bezier(.215,.61,.355,1);
  -o-transition-timing-function: cubic-bezier(.215,.61,.355,1);
  transition-timing-function: cubic-bezier(.215,.61,.355,1);
}
.center {
  text-align: center;
}
 
.nav-item:hover .page-label{opacity:1;visibility:visible;left:0}
.nav-item:hover .page-label .center{left:0}

.nav-button .icon1{  background: url('../images/nav_01.png') no-repeat center center;}
.nav-item:hover .icon1{background: url('../images/nav_01s.png') no-repeat center center;}
.nav-item.active  .icon1{background: url('../images/nav_01s.png') no-repeat center center;}

.nav-button .icon2{  background: url('../images/nav_02.png') no-repeat center center;}
.nav-item:hover .icon2{background: url('../images/nav_02s.png') no-repeat center center;}
.nav-item.active  .icon2{background: url('../images/nav_02s.png') no-repeat center center;}

.nav-button .icon3{  background: url('../images/nav_03.png') no-repeat center center;}
.nav-item:hover .icon3{background: url('../images/nav_03s.png') no-repeat center center;}
.nav-item.active  .icon3{background: url('../images/nav_03s.png') no-repeat center center;}

.nav-button .icon4{  background: url('../images/nav_04.png') no-repeat center center;}
.nav-item:hover .icon4{background: url('../images/nav_04s.png') no-repeat center center;}
.nav-item.active  .icon4{background: url('../images/nav_04s.png') no-repeat center center;}

.nav-button .icon5{  background: url('../images/nav_05.png') no-repeat center center;}
.nav-item:hover .icon5{background: url('../images/nav_05s.png') no-repeat center center;}
.nav-item.active  .icon5{background: url('../images/nav_05s.png') no-repeat center center;}

.nav-button .icon6{  background: url('../images/nav_06.png') no-repeat center center;}
.nav-item:hover .icon6{background: url('../images/nav_06s.png') no-repeat center center;}
.nav-item.active  .icon6{background: url('../images/nav_06s.png') no-repeat center center;}

.nav-button .icon7{  background: url('../images/nav_07.png') no-repeat center center;}
.nav-item:hover .icon7{background: url('../images/nav_07s.png') no-repeat center center;}
.nav-item.active  .icon7{background: url('../images/nav_07s.png') no-repeat center center;}

.nav-button .icon8{  background: url('../images/nav_08.png') no-repeat center center;}
.nav-item:hover .icon8{background: url('../images/nav_08s.png') no-repeat center center;}
.nav-item.active  .icon8{background: url('../images/nav_08s.png') no-repeat center center;}

.nav-button .icon9{  background: url('../images/nav_09.png') no-repeat center center;}
.nav-item:hover .icon9{background: url('../images/nav_09s.png') no-repeat center center;}
.nav-item.active  .icon9{background: url('../images/nav_09s.png') no-repeat center center;}

/*第一屏*/
#pageContain {overflow: hidden; padding-left: 80px;}
.page { display: none; width: 100%; height: 100%; overflow: hidden; position: absolute; top: 0; left: 0;}
.contain {width: 1100px; padding-left: 80px; height: 100%; position: relative; z-index: 0; margin: 0 auto;}
.current .contain, .slide .contain { display: block;}
.current { display: block; z-index: 1;}
.slide { display: block; z-index: 2;}
.swipe { display: block; z-index: 3; transition-duration: 0ms !important; -webkit-transition-duration: 0ms !important;}

.page1 {width: 100%; background: url(../images/bg_01.jpg) no-repeat; background-size: cover;}
.logo{width: 156px; position: absolute; top: 41px; left: 0;}

.balloon_01{width: 219px; position: absolute; top: 163px; right: -11px; transition:all 0.4s linear;-ms-transition:all 0.4s linear;-moz-transition:all 0.4s linear;-webkit-transition:all 0.4s linear;-o-transition:all 0.4s linear; cursor: pointer;}
.balloon_01:hover{top: 130px;}
.balloon_02{width: 120px; position: absolute; bottom: 20%; left: -50px; transition:all 0.4s linear;-ms-transition:all 0.4s linear;-moz-transition:all 0.4s linear;-webkit-transition:all 0.4s linear;-o-transition:all 0.4s linear; cursor: pointer;}
.balloon_02:hover{bottom: 28%;}


.font_01{width: 292px; height: 76px; position: absolute; top: 60%; left: 74px;}
.font_02{width: 168px; position: absolute; top: -207px; left: -44px; transition:all 0.4s linear;-ms-transition:all 0.4s linear;-moz-transition:all 0.4s linear;-webkit-transition:all 0.4s linear;-o-transition:all 0.4s linear; cursor: pointer;}
.font_02:hover{top: -230px;}
.font_03{width: 158px; position: absolute; top: -207px; left: 125px; transition:all 0.4s linear;-ms-transition:all 0.4s linear;-moz-transition:all 0.4s linear;-webkit-transition:all 0.4s linear;-o-transition:all 0.4s linear; cursor: pointer;}
.font_03:hover{top: -230px;}
.font_04{width: 130px; position: absolute; top: -70px; left: 248px; transition:all 0.4s linear;-ms-transition:all 0.4s linear;-moz-transition:all 0.4s linear;-webkit-transition:all 0.4s linear;-o-transition:all 0.4s linear; cursor: pointer;}
.font_04:hover{top: -100px;}
.font_05{width: 248px; position: absolute; top: -134px; left: 372px; transition:all 0.4s linear;-ms-transition:all 0.4s linear;-moz-transition:all 0.4s linear;-webkit-transition:all 0.4s linear;-o-transition:all 0.4s linear; cursor: pointer;}
.font_05:hover{top: -160px;}


.bird{width: 170px; position: absolute; bottom: 0; right: -30%; opacity: 0;}
.bird {
  -webkit-animation:bird 3s ease .5s infinite;
  animation:bird 4s ease .5s infinite;
}
@-webkit-keyframes bird {
    0% {
    bottom: 0; right: -30%;
    opacity:1;
  }
  100% {
    bottom: 100%; right: 40%;
    opacity:1;
  }
  }
  @keyframes bird {
    0% {
    bottom: 0; right: -30%;
    opacity:1;
  }
  100% {
    bottom: 100%; right: 40%;
    opacity:1;
  }
}



/*第二屏*/
.page2 {width: 100%; background: url(../images/bg_02.jpg) no-repeat; background-size: cover;}
.about_title{width: 100%; text-align: center; color: #fff; font-size: 24px; line-height: 32px; background: url(../images/about_top.png) no-repeat center bottom; padding-bottom: 20px; text-transform: uppercase; margin-top: 12.5%;}
.about_title h4{font-size: 45px; line-height: 44px;}
.about_title h4 span{font-family: "宋体"; font-weight: normal; padding-left: 10px;}
.about{width: 815px; text-align: center; line-height: 30px; color: #666; font-size: 16px; margin: 5.5% auto 4% auto;}
.about_list{width: 1100px; padding-bottom: 10%; overflow: hidden;}
.about_list ul{width: 1143px;}
.about_list li{float: left; width: 147px; height: 147px; text-align: center; font-size: 14px; line-height: 16px; text-transform: uppercase; background: url(../images/about_01.png) no-repeat; margin: 15px 43px 0 0; transition:all 0.3s;}
.about_list li:hover{background: url(../images/about_02.png) no-repeat; margin: 0 43px 0 0;}
.about_list a{display: block; padding-top: 54px; color: #fff;}
.about_list h4{font-size: 18px; font-weight: normal; line-height: 22px;}


/*第三屏*/
.page3 {width: 100%; background: url(../images/bg_03.jpg) no-repeat; background-size: cover;}
.news_top{width: 100%; padding: 12.5% 0 6% 0; color: #fff; text-transform: uppercase;}
.news_tit_l{float: left; width: 53%; text-align: right; font-size: 65px; font-weight: bold; line-height: 62px;}
.news_tit_r{float: right; width: 46.5%; font-size: 30px; line-height: 34px;}
.news_tit_r h4{font-size: 18px; font-weight: normal; line-height: 28px;}
.news{width: 100%;}
.news li{height: 151px; padding-top: 7px; margin-bottom: -1px;}
.news_bg01{background: url(../images/news_bg01.png) no-repeat 75px top;}
.news_bg02{background: url(../images/news_bg02.png) no-repeat 151px top;}
.news_bg03{background: url(../images/news_bg03.png) no-repeat 75px top;}
.news_pic{width: 148px; height: 148px; position: relative;}
.news_pic img{width: 148px; height: 148px; border-radius: 50%;}
.news_pic_bg{width: 148px; height: 148px; text-align: center; line-height: 148px; color: #fff; font-size: 60px; background: url(../images/news_pic_bg.png) no-repeat; position: absolute; top: 0; left: 0;}
.news li:hover .news_pic_bg{display: none;}
.news_fon01{float: left; width: 620px; color: #fff; font-size: 14px; line-height: 24px; margin: 10px 0 0 30px;}
.news_fon02{float: left; width: 620px; color: #fff; font-size: 14px; line-height: 24px; margin: 10px 0 0 300px;}
.news_f{height: 48px; overflow: hidden;}
.news_t{height: 60px; line-height: 60px;}
.news_tf{width: 460px; height: 60px; display: block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size: 18px;}

/*第四屏*/
.page4 {width: 100%; background: url(../images/bg_04.jpg) no-repeat; background-size: cover;}
.product_top{width: 100%; padding: 12.5% 0 4% 0; color: #fff; text-transform: uppercase;}
.product_tit_l{float: left; width: 59%; text-align: right; font-size: 65px; font-weight: bold; line-height: 62px;}
.product_tit_r{float: right; width: 40.5%; font-size: 30px; line-height: 34px;}
.product_tit_r h4{font-size: 18px; font-weight: normal; line-height: 28px;}
.product_list{width: 100%; text-align: center; margin-bottom: 5%;}
.product_list li{display: inline-block; height: 39px; line-height: 39px; text-align: center; font-size: 16px; margin: 0 8px 10px 8px;}
.product_list a{display: inline-block; width: 170px; background: #0d64c5; color: #fff; border-radius: 30px;}
.product_list a:hover{color: #0d64c5; background: #fff;}
.product{width: 1100px; overflow: hidden;}
.product ul{width: 1138px;}
.product li{float: left; width: 341px; height: 341px; position: relative; margin-right: 38px;}
.product img{width: 341px; height: 341px; border-top-right-radius: 40px; border-bottom-left-radius: 40px;}
.product_bot{width: 263px; padding: 0 40px 0 38px; height: 58px; line-height: 58px; color: #fff; font-size: 18px; background: url(../images/product_icon.png) no-repeat 300px center #0d64c5; border-bottom-left-radius: 40px; position: absolute; left: 0; bottom: 0;}
.product li:hover .product_bot{display: none;}
.product_tm{width: 341px; height: 301px; padding-top: 40px; background: rgba(45,203,255,0.9); border-top-right-radius: 40px; border-bottom-left-radius: 40px; position: absolute; top: 0; left: 0; opacity:0; transform:scale(0);transition:all 0.8s ease-in-out;backface-visibility:hidden;}
.product li:hover .product_tm{opacity:0.8;transform:scale(1);}
.product_tm h4{width: 262px; height: 56px; line-height: 56px; color: #fff; font-size: 18px; font-weight: normal; border-bottom: dashed 1px #fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin: 0 auto 32px;}
.product_fon{width: 262px; color: #fff; line-height: 25px; height: 150px; overflow: hidden; margin: 0 auto;}

/*第五屏*/
.page5 {width: 100%; background: url(../images/bg_05.jpg) no-repeat; background-size: cover; position: relative;}
.tm_01{float: left; width: 143px; height: 170px; background: url(../images/tm_01.png) no-repeat; position: absolute; top: 60%; left: 0;}
.tm_02{float: left; width: 448px; height: 532px; background: url(../images/tm_02.png) no-repeat; position: absolute; top: 19.5%; left: 318px;}
.tm_03{float: left; width: 253px; text-align: center; height: 301px; background: url(../images/tm_03.png) no-repeat; position: absolute; top: 45.5%; right: 56px;}
.tm_03 h4{color: #fff; font-size: 18px; line-height: 44px; font-weight: normal; padding-top: 38px;}
.tm_03 img{width: 134px; height: 134px;}
.tm_04{float: right; width: 58px; height: 69px; background: url(../images/tm_04.png) no-repeat; position: absolute; top: 71.5%; right: 0;}
.contact_tit{width: 100%; text-align: center; line-height: 58px; color: #fff; padding: 94px 0 38px 0; text-transform: uppercase;}
.contact_tit h4{font-size: 45px; line-height: 44px;}
.contact_tit h4 span{font-weight: normal; padding-left: 10px; font-family: arial;}
.contact{width: 300px; color: #fff; font-size: 14px; line-height: 38px; margin: 0 auto;}
.contact img{float: left; width: 21px; height: 26px; margin-top: 7px;}
.contact_fon{float: right; width: 260px;}

.copyright{width: 100%; text-align: center; color: #fff; font-size: 14px; padding: 1% 0; position: absolute; left: 0; bottom: 0;}


/*product*/
.product_bg{width: 100%; height: 100%; background: url(../images/product_bg.jpg) no-repeat; background-size: cover; position: fixed; top: 0; left: 40px;}
.mainbody{width: 1100px; margin: 0 auto;}
.pro_top{padding: 8.5% 0 2% 0;}
.pro_tit{float: left; color: #fff; text-transform: uppercase; font-size: 24px; line-height: 42px;}
.pro_tit span{font-size: 48px; float: left; font-weight: bold; padding-right: 16px;}
.pro_list{float: right;}
.pro_list li{display: inline; padding: 0 30px; line-height: 42px; color: #fff; font-size: 18px;}
.pro_list .pro_on{background: #0d64c5; border-radius: 5px; display: inline-block;}
.main_bg{background: rgba(13,100,197,0.5); border-radius: 8px; padding: 38px 0; height: 570px;}
#sucai{width:100%;height:570px;overflow:hidden;}
.pro{width: 1021px; margin: 0 auto; overflow: hidden;}
.pro ul{width: 1048px;}
.pro li{float: left; width: 235px; height: 235px; margin: 0 27px 30px 0; position: relative; overflow: hidden;}
.pro img{width: 235px; height: 235px;}
.pro_fon{width: 100%; height: 45px; line-height: 45px; text-align: center; background: rgba(13,100,197,0.7); color: #fff; font-size: 16px; position: absolute; left: 0; bottom: 0; opacity: 1; transition:all 0.6s ease; -moz-transition:all 0.6s ease; -ms-transition:all 0.6s ease; -o-transition:all 0.6s ease; -webkit-transition:all 0.6s ease;}
.pro li:hover .pro_fon{width: 0; opacity: 0;}
.pro_ss{width: 68px; position: absolute; top: -100px; left: 84px; transition:all 1s ease; -moz-transition:all 1s ease; -ms-transition:all 1s ease; -o-transition:all 1s ease; -webkit-transition:all 1s ease;}
.pro_ss img{width: 68px; height: 68px;}
.pro li:hover .pro_ss{top: 84px;}
.fy{width: 100%; text-align: center; padding-top: 10px; font-size: 14px;}
.fy a{color: #fff; border: solid 1px #fff; padding: 5px 10px; margin: 0 2px;}
.fy .select{background: #fff; color: #0d64c5;}


/*product*/
.news_list{width: 1020px; margin: 0 auto 10px;}
.news_list li{border-bottom: dashed 1px #fff; padding-bottom: 25px; margin-bottom: 25px;}
.news_list img{float: left; width: 122px; height: 122px; border-radius: 50%;}
.news_r{float: right; width: 875px; color: #bbdbff; font-size: 14px; line-height: 25px;}
.news_list li:hover .news_r{color: #fff;}
.news_rt{height: 54px; line-height: 54px; margin-bottom: 5px; color: #bbdbff;}
.news_rtl{float: left; width: 710px; height: 54px; color: #fff; font-size: 18px; display: block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.news_rf{height: 50px; overflow: hidden;}

#news_con { width: auto;  min-height: 360px;  padding: 15px;  color:#fff; text-align:justify; font-size: 14px;}
#news_con .h1 { text-align: center; font-size: 16px;  height: 35px; line-height: 35px;}
#news_con .h2 { text-align: center; font-weight: normal;  width: auto;  height: 25px; line-height: 25px;  border-top: solid 1px #fff; border-bottom: solid 1px #fff;  color: #fff;  margin: 20px 0px; font-size:14px}
#news_con #pic { position:relative;text-align: center;  margin-bottom: 5px;}
#news_con #pic #prev{ position:absolute; top:50%; left:0px; font-size:50px;font-weight:bold; }
#news_con #pic #next{ position:absolute; top:50%; right:0px; font-size:50px;font-weight:bold;}
#news_con #pic #prev_none{ position:absolute; top:50%; left:0px; color:#B0B0B0; font-size:50px;font-weight:bold}
#news_con #pic #next_none{ position:absolute; top:50%; right:0px; color:#B0B0B0; font-size:50px;font-weight:bold}
#news_cons_title{border-bottom:solid 1px #fff; font-weight:bold ; font-size:15px; margin-bottom:10px;}
#news_cons{ margin-bottom:15px;}
#gbook {
  padding: 25px;
  color:#fff;
}
#gbook li {
  padding: 5px;
}
#gbook input {
  border: 1px solid #999;
  width: 200px;
  padding-left: 2px;
  height: 26px;
  line-height: 26px;
}
#gbook #tijiao {
  width: 80px;
  height: 30px;
  line-height: 30px;
  background: #000;
  color: #FFF;
  margin-left: 50px;
}
#gbook textarea {
  width: 400px;
  height: 120px;
  border: 1px solid #999;
  overflow: hidden;
  line-height: 20px;
  padding-left: 2px;
}
#gbook #chongzhi {
  width: 80px;
  height: 30px;
  line-height: 30px;
  background: #000;
  color: #FFF;
}
#gbook span {
  color: #CCC;
  font-size: 12px;
}
#gbook_list {
  width: 630px;
  padding: 20px 0 0 50px;
  height: 200px;
}
#gbook_list li {
  width: 600px;
  height: 25px;
  line-height: 25px;
  border-bottom: 1px dashed #000;
}
#gbook_list li span {
  float: left;
  padding-left: 10px;
}
#gbook_list li strong {
  float: right;
  font-weight: normal;
  padding-right: 10px;
}


@media only screen and (max-width: 1440px) {
	.pro_top{padding: 2% 0 2% 0;}
	.main_bg{height: 440px;}
	#sucai{height:420px;}
}


/*main*/