@charset "gb2312";
html, body {background: #fff; font-family:Microsoft YaHei,Arial, Helvetica, sans-serif}
*{margin: 0;padding: 0;}
.clear {clear: both;}
a{ text-decoration:none; color:#555;}
a:hover{ color:#F30;}
li{ list-style-type:none;}
.nav_bg {background: rgba(0,0,0,0.2);position: relative;z-index: 999; position:absolute;}
.active .nav_bg {width: 100%; height: 165px;top: 0;animation: slideInDown 3s forwards 0s;-webkit-animation: slideInDown 3s forwards 0s;}
.logo{ position:absolute; left:50px; top:0px;}
.cname{ position:absolute; left:220px; top:50px;}
.tel{ right:120px; top:30px; color:#be0000; font-size:24px; font-weight:800;  display:inline-block; position:absolute; font-family:SimSun;}
.tel1{ float:right; letter-spacing: 1px;}
.mytable{border-collapse: collapse; margin-bottom:10px;}
.mytable td {border: 1px solid #ccc; padding:8px;}
.mytable .hd{ background:#eaf6fc;}
.tempContainer {position:fixed; width:100%; margin-right:0px; margin-left:0px; text-align:center; z-index:9999; height:100%; background:#000; display:none;}
.bigimg{ width:100%; position:absolute; left:0; display:block;}

nav{width: 100%; position:absolute; left:50px; top:80px;}
nav li {width:9%; float: left;list-style: none;text-align: center;margin-top: 25px;}
nav li a {font-size: 18px;color: #fff;line-height: 55px;display: block;}
nav li a:hover {color: #ed9f41;}
#bg2 {background: url(images/page2_bg.jpg) no-repeat center;background-size: cover;}
#bg3 {background: url(images/page3_bg.jpg) no-repeat center; background-size: cover;}
#bg4 {background: url(images/page4_bg.jpg) no-repeat center;background-size: cover;}
#bg5 {background: url(images/page5_bg.jpg) no-repeat center;background-size: cover;}
.more{ color:#fff; border:1px solid #fff; padding:8px 20px;}
.more:hover{ background:rgba(51,51,51,.5)}
.pos_re { position: relative;}
.container {width: 1200px;margin: 0 auto;height: 660px;z-index: 5;}
.container .layout{ position:relative;}

.layout{ width:1200px; margin:0 auto;}
/*header*/
.section .bg { position: absolute;left: 0;top: 0;width: 100%;height: 100%;z-index: 1;}

/***************第一页********************/
.page1_1{background: url(images/page1_bg1.jpg) no-repeat center;background-size: cover;}
.page1_2{background: url(images/page1_bg2.jpg) no-repeat center;background-size: cover;}
.page1_3{background: url(images/page1_bg3.jpg) no-repeat center;background-size: cover;}

.slide{ position:relative;}
/******active********/
/***************第二页********************/
.page2_left{ width:580px; float:left;}
.page2_text{ color:#FFF; line-height:40px; padding:20px; text-indent:2em;}
.page2_pic{ width:500px; position:absolute; right:0; top:60px;}
.page2_more{ padding:10px; margin-left:20px;}
.page2_cat{ width:100%;padding:20px; text-align:center;}
.page2_cat li{ display:inline-block; width:145px; padding:10px;}
.page2_cat a{ color:#e69500; border:1px solid #fff; padding:10px 5px; display:block; text-align:center;}
.page2_cat a:hover{ background:rgba(0,0,0,.7)}

/********active*************/
.active .page2_t1 {animation: fadeInLeft 3s forwards 0.1s; -webkit-animation: fadeInLeft 1s forwards 0.1s;}
.active .page2_text {animation: fadeInLeft 3s forwards 0.1s; -webkit-animation: fadeInLeft 2s forwards 0.1s;}
.active .page2_more {animation: fadeInLeft 3s forwards 0.1s; -webkit-animation: fadeInLeft 3s forwards 0.1s;}
.active .page2_pic {animation: fadeInRight 3s forwards 0.1s; -webkit-animation: fadeInRight 2s forwards 0.1s;}
.active .page2_cat {animation: fadeInUp 3s forwards 0.1s; -webkit-animation: fadeInUp 2s forwards 0.1s;}

/***************第三页********************/
.page3_t1{ text-align:center; margin-top:-50px;}	
.page3_nav{ text-align:center;}
.page3_nav a{ display:inline-block; background:#fff; padding:7px 15px; margin:10px; border-radius:5px;}
.page3_product{ padding:20px 0;}
.page3_product li{ float:left;width:24%; margin-right:1%; margin-bottom:1%; text-align:center;}
.page3_product a{ display:block; background:rgba(255,255,255,.5); border-radius:5px; padding:10px; color:#000;}
.page3_product  img{ width:100%; height:180px;border-radius:5px;}
.page3_product a:hover{ background:rgba(0,0,0,.7); color:#fff;}
.page3_more{ text-align:center; padding-top:10px;}
/********动画*************/
.active .page3_t1 {animation: fadeInUp 1s forwards 0.1s; -webkit-animation: fadeInUp 1s forwards 0.1s;}
.active .page3_nav {animation: fadeInDown 1s forwards 0.1s; -webkit-animation: fadeInDown 1.5s forwards 0.1s;}
.active .page3_c1 {animation: fadeInUp 1s forwards 0.1s; -webkit-animation: fadeInUp 1s forwards 0.1s;}
.active .page3_c2 {animation: fadeInUp 1s forwards 0.1s; -webkit-animation: fadeInUp 1.3s forwards 0.1s;}
.active .page3_c3 {animation: fadeInUp 1s forwards 0.1s; -webkit-animation: fadeInUp 1.5s forwards 0.1s;}
.active .page3_c4 {animation: fadeInUp 1s forwards 0.1s; -webkit-animation: fadeInUp 1.7s forwards 0.1s;}
.active .page3_c5 {animation: fadeInUp 1s forwards 0.1s; -webkit-animation: fadeInUp 2.1s forwards 0.1s;}
.active .page3_c6 {animation: fadeInUp 1s forwards 0.1s; -webkit-animation: fadeInUp 2.4s forwards 0.1s;}
.active .page3_c7 {animation: fadeInUp 1s forwards 0.1s; -webkit-animation: fadeInUp 2.7s forwards 0.1s;}
.active .page3_c8 {animation: fadeInUp 1s forwards 0.1s; -webkit-animation: fadeInUp 3.1s forwards 0.1s;}
.active .page3_more {animation: fadeInDown 2s forwards 0.1s; -webkit-animation: fadeInDown 2s forwards 0.1s;}
/***************第四页********************/
.page4_t1{text-align:center;}
.page4_case{ padding-top:5px;}
.page4_case li{ width:30%; float:left; margin-right:3%;}
.page4_case li a{ display:block; padding:10px; line-height:40px; text-align:center;}
.page4_case img{ width:100%; height:250px; border-radius:5px;}

/********动画*************/
.active .page4_t1 {animation: fadeInDown 1s forwards 0.1s; -webkit-animation: fadeInDown 1s forwards 0.1s;}
.active .page4_li1 {animation: fadeInUp 1s forwards 0.1s; -webkit-animation: fadeInUp 1.3s forwards 0.1s;}
.active .page4_li2 {animation: fadeInUp 1s forwards 0.1s; -webkit-animation: fadeInUp 1.5s forwards 0.1s;}
.active .page4_li3 {animation: fadeInUp 1s forwards 0.1s; -webkit-animation: fadeInUp 1.7s forwards 0.1s;}
.active .page4_li4 {animation: fadeInUp 1s forwards 0.1s; -webkit-animation: fadeInUp 2.1s forwards 0.1s;}
.active .page4_li5 {animation: fadeInUp 1s forwards 0.1s; -webkit-animation: fadeInUp 2.4s forwards 0.1s;}
.active .page4_li6 {animation: fadeInUp 1s forwards 0.1s; -webkit-animation: fadeInUp 2.7s forwards 0.1s;}
/***************第五页********************/
.page5_box{ background:rgba(2,19,134,.5); width:1340px; height:540px; margin-left:-80px; margin-top:100px;}
.page5_logo,.page5_t1{ text-align:center;}
.page5_qr,.page5_text,.page5_map{ margin-top:50px;}
.page5_qr{ width:130px; float:left; margin-left:150px;}
.page5_text{ width:420px; margin-left:20px; float:left; color:#fff; line-height:35px;}
.page5_map{ width:500px; height:200px; float:left;}
/********动画*************/
.active .page5_logo {animation: fadeInDown 1s forwards 0.1s; -webkit-animation: fadeInDown 1s forwards 0.1s;}
.active .page5_t1 {animation: fadeInUp 1s forwards 0.1s; -webkit-animation: fadeInDown 1.3s forwards 0.1s;}
.active .page5_qr {animation: fadeInUp 1s forwards 0.1s; -webkit-animation: fadeInUp 1.7s forwards 0.1s;}
.active .page5_text {animation: fadeInUp 1s forwards 0.1s; -webkit-animation: fadeInUp 2.1s forwards 0.1s;}
.active .page5_map {animation: fadeInUp 1s forwards 0.1s; -webkit-animation: fadeInUp 2.4s forwards 0.1s;}


.head {position: relative;z-index: 9; width:100%;}
.head .container{ height:160px;background: rgba(0,0,0,0.2); position:absolute; width:100%;}

.topbar{ text-align:center; }
.topbar li{ display:inline-block; padding:10px;}
.topbar a{ background:#024fa1; color:#fff; padding:5px 25px;}
.topbar a:hover,.topbar .sel{ background:#c52600;}
ul.small_class {
    width: 80%;
    margin: 0 auto;
    display: none;
}
ul.small_class li a {
    background: #16a3e4;
}
ul.small_class1 {
    width: 80%;
    margin: 0 auto;
    display: none;
}
ul.small_class1 li a {
    background: #16a3e4;
}
.detail{line-height:35px; padding-bottom:30px;}
.detail p{ text-indent:2em;}
.pic_list li{ width:33.3%; float:left; text-align:center; line-height:35px;}
.pic_list img{ display:block; width:100%; height:270px;}
.pic_list li a{ display:block; padding:20px;}
.news_list,.pic_list{ min-height:480px;}
.news_list li{ height:40px; line-height:40px; border-bottom:1px solid #eee; padding-left:35px; background:url(images/dot010.gif) 17px center no-repeat;}
.news_list li span{ color:#999; float:right; margin-right:20px;}
.layout h1{ text-align:center; padding:20px;}
.gojob{ color:#fff; padding:5px 10px; background:#F60;}

.page{ text-align:center; margin: 20px 0;}
.page a,.page span.gray{ display:inline-block;padding:5px 25px; margin:10px;}
.page a{ background:#024fa1; color:#fff; }
.page a:hover{ background:#C00;}
.page span.gray{ background:#bbb;}
.footer{ background:#024fa1;color:#fff; padding:20px 0;}
.footer a{ color:#fff;}
.tit1{ display:none;}
@media (min-width: 320px) and (max-width: 1000px) {
.mtel {
    position: absolute;
    top: 57px;
    left: 24px;
}
.mtel img {
    width: 28%;
}
.layout{ width:100%;}
.notouch,a.notouch,.page span.gray,.page4_li5,.page4_li6,.page3_c5,.page3_c6,.page3_c7,.page3_c8,.fp-controlArrow{ display:none;}
.block{ display:block;}
.footer{ text-align:center;}
.detail .wrapbox{ padding:10px;}
.detail .wrapbox img{ width:100%; height:auto;}
.layout h1{ font-size:1.3em;}
.more{ padding:5px 10px;}
.container{ height:550px;}
.head .container{ position:relative; height:auto;}
nav{ background:rgba(0,65,172,1); width:50%; right:0; left:auto; top:auto;padding:15px 0; display:none;}
#s1 nav{top:50px; z-index:999;}
nav li{ width:100%; margin-top:0;}
nav li a{ line-height:35px;}
nav.on{ display:block;}
.navbox{ width:30px; height:30px; border-radius:30px; background:#fff; position:absolute; top:48px; right:5px; z-index:999;}
.navbt{border-top:12px double #2cb2fd;width: 20px;padding-top:3px;border-bottom: 4px solid #2cb2fd; margin-top:5px; margin-left:5px;}
.m_pic1{ z-index:999;}
.topbar{ text-align:center;}
.topbar a{ padding:3px 5px;font-size:12px;}
.topbar{ height:90px;overflow: hidden;width: 100%;line-height: 36px;margin-bottom: 1%;position: relative}
ul.small_class {
    width: 100%;
    margin: 0 auto;
    position: absolute;
}
.line {position: absolute;height: 90px;left: 0;line-height: 40px;text-align: center;background: #024fa1;cursor: pointer; width:2600px;}
.line li{float: left; padding:0;height: 40px; margin-left:10px;}
.pic_list ul{ margin-left:1%;}
.pic_list li,.page4_case li{ width:49%; margin-right:1%; overflow:hidden;}
.pic_list li a{ padding:0;}
.pic_list li .tit{ display:block; height:30px; line-height:30px; overflow:hidden;}
.pic_list li img,.page4_case img{ height:140px;}
.news_list li{ overflow:hidden;}
#fp-nav.right{ right:3px;}
.container,.page5_t1 img{ width:100%;}
.page1_1{background: url(images/mpage1_bg1.jpg) no-repeat center;background-size: cover;}
.page1_2{background: url(images/mpage1_bg2.jpg) no-repeat center;background-size: cover;}
.page1_3{background: url(images/mpage1_bg3.jpg) no-repeat center;background-size: cover;}
#bg1 {background: url(images/mpage1_bg.jpg) no-repeat center;background-size: cover;}
#bg2 {background: url(images/mpage2_bg.jpg) no-repeat center;background-size: cover;}
#bg3 {background: url(images/mpage3_bg.jpg) no-repeat center; background-size: cover;}
#bg4 {background: url(images/mpage4_bg.jpg) no-repeat center;background-size: cover;}
#bg5 {background: url(images/mpage5_bg.jpg) no-repeat center;background-size: cover;}
.nav_bg{ background:none;}
.tit1{ position:absolute; top:42%; left:15px; width:100%; display:block;}

.tit1 img{ width:80%;}
.page2_t1{ padding-top:10px; text-align:center;}
.page2_text{ padding-top:0px; line-height:27px; text-indent:2em;}
.page2_left{ width:100%; float:none;}
.page3_t1{ top:-5px;}
.page3_product{ padding-top:20px; padding-left:10px;}
.page3_product li{ float:left; width:48%; margin-right:2%;}
.page3_product li a{color:#000;display:block;text-align:center;}
.page3_product img{ height:120px;}
.page3_nav a{ display:inline-block; background:#fff; padding:3px 5px; margin:5px; border-radius:5px;}
.page4_t1,.page3_t1{position:relative; top:5px;  left:0; text-align:center;}
.page4_case{ padding-top:10px;}
.page4_t1 img{ width:90%;}
.page5_text{ padding:10px; width:auto;}
.page5_box{ width:95%; margin:60px auto;}
}