@charset "utf-8";
/* CSS Document */
*{ margin: 0; padding: 0; list-style: none; font-family: "Microsoft YaHei","STHeiti Light",Arial,"SimSun";}
body{color: #444; line-height: 2em; font-size: 15px; background: #fff;}
a{ color: #333; text-decoration: none;}
img{ border: none; -ms-interpolation-mode: bicubic;}
input,select,textarea,button{ outline: none;}
.left{ float: left;}
.right{ float: right;}
.layout{ width: 1400px; margin: 0 auto; overflow: hidden;}
#head{ height: 100px; width: 100%;}
.head{ position: relative;}
.head .logo{ height: 60px; width: 400px; padding: 20px 0; background: url("../img/logo.png") left center no-repeat; background-size:260px;}

.head .language{ height: 30px; position: absolute; right: 0; top: 35px; border: #0158cb 1px solid; border-radius: 4px;}
.head .language ul li{ float:left;}
.head .language ul li a{ display:block; line-height:30px; padding:0 20px; color: #0158cb;}
.head .language ul li.on{ background: #0158cb;}
.head .language ul li.on a{ color: #fff;}

.menu{ height: 100px; width: 900px;}
.menu ul li{ float: left; width: 80px; margin-right:20px;}
.menu ul li a{ display: block; padding-top:10px; line-height: 86px; font-size: 16px; font-weight: bold; text-align: center;}
.menu ul li:hover,.menu ul li.on{ border-bottom: #0158cb 4px solid;}
.menu ul li:hover a,.menu ul li.on a{ color: #0158cb;}

#banner{ height: 660px; width: 100%; background: #666; border-top: #eee 1px solid; border-bottom: #eee 1px solid;}
.banner{ width:100%; height:660px; overflow:hidden; position:relative; z-index:998;}
.banner .hd{ height:15px; overflow:hidden; position:absolute; left:50%; margin-left:-20px; bottom:30px; z-index:1;}
.banner .hd ul{ overflow:hidden; zoom:1;}
.banner .hd ul li{ float:left; margin-right:5px; width:15px; height:15px; border-radius:10px; background:rgba(0,0,0,.5); cursor:pointer;}
.banner .hd ul li.on{ background:#0158cb;}
.banner .bd{ position:absolute; left:50%; top:0; margin-left:-960px; height:660px; z-index:0;}
.banner .bd li{ width:1920px; height:660px; zoom:1; vertical-align:middle; }
.banner .bd li a{ display:block; width:100%; height:660px;}

.init_title{ font-size: 36px; line-height: 2em; font-weight: bold; color: #0158cb; text-align: center;}
.init_more{ display: block; width: 150px; margin: 30px auto 0; height: 46px; line-height: 46px; border: #ddd 1px solid; border-radius: 23px; text-align: center; font-weight: bold;}
.init_more:hover{ border: #0158cb 1px solid; color: #0158cb;}

.product,
.case,
.news{ padding: 30px 0 50px; overflow: hidden;}
.product_cate{ width: 385px; margin: 30px auto; overflow: hidden;}
.product_cate ul{ width: 405px;}
.product_cate ul li,
.case_cate ul li{ float: left; margin-right: 20px; height: 36px;}
.product_cate ul li a,
.case_cate ul li a{ display: inline-block; line-height: 36px; background: #eee; width: 75px; padding: 0 20px; text-align: center; border-radius: 18px;}
.product_cate ul li a:hover,
.product_cate ul li.on a,
.case_cate ul li a:hover,
.case_cate ul li.on a{ background: #0158cb; color: #fff;}
.product_list,
.news_list{ overflow: hidden;}
.product_list ul{ width: 1420px;}
.product_list ul li{ width: 335px; float: left; margin-right: 20px; margin-bottom: 20px; }
.product_list ul li a{ display: block; height: 210px; padding: 9px; border: #ddd 1px solid;}
.product_list ul li a:hover{ background: #ddd;}
.product_list ul li .pl_img{ display: table-cell; width: 315px; height: 210px; overflow: hidden; vertical-align: middle; text-align: center; }
.product_list ul li .pl_img img{ max-width: 315px; max-height: 210px;}
.product_list ul li p{ margin-top: 10px; font-size: 16px; font-weight: bold; text-align: center;}

#about{ height: 500px; width: 100%; background: url("../img/about-bg.jpg") top center no-repeat; position: relative;}
.about{ position: absolute; left: 50%; top: 0; width: 600px; padding: 50px;}
.about .init_title{ text-align: left; margin-bottom: 20px;}
.about .about_cate{ margin-top: 50px;}
.about .about_cate ul li{ float: left; width: 80px; margin-right: 50px;}
.about .about_cate ul li a{ display: block; background: #fff; width: 50px; height: 50px; padding: 14px; border: #ddd 1px solid; border-radius: 4px;}
.about .about_cate ul li a:hover{ border: #0158cb 1px solid;}
.about .about_cate ul li p{ margin-top: 20px; text-align: center;}

.case_cate{ width: 655px; margin: 30px auto; overflow: hidden;}
.case_cate ul{ width: 675px;}

.case_list{ margin-top: 50px; overflow: hidden;}
.case_list ul{ width: 1420px;}
.case_list ul li{ width: 264px; height:400px; float: left; margin-right: 20px; margin-bottom: 20px; position: relative; border-bottom-right-radius: 80px; border-top-left-radius: 80px; overflow: hidden; }
.case_list ul li a{ display: block; height: 400px;}
.case_list ul li .info{ position: absolute; left: 0; bottom: 0; width: 100%; background: rgba(1,88,203,.5); text-align:center;  color: #fff; height: 300px; padding-top:100px;}
.case_list ul li .info p{ line-height:200px; font-size: 22px; font-weight: bold; transition: all 1s;}
.case_list ul li .info i{ display:none; font-style:normal; transition: all 1s;}
.case_list ul li:hover .info p{ line-height: 60px; transition: all 1s;}
.case_list ul li:hover .info i{ display:block; transition: all 1s;}
.case_list ul li .info_on{ height: 80px; padding-top: 0;}
.case_list ul li .info_on p{ line-height: 80px;}

#client{ height: 592px; width: 100%; background: url("../img/client-bg.jpg") top center no-repeat;}
.client{ padding: 50px 0;}
.client .init_title{ color: #fff; margin-bottom: 50px;}
.client ul{ width: 1405px;}
.client ul li{ width: 276px; height: 180px; float: left; margin-right: 5px; margin-bottom: 5px;}

.news_list ul{ width:1440px; margin-top: 20px;}
.news_list ul li{ width:420px; float: left; padding-left: 260px; position: relative; min-height: 162px; margin: 20px 40px 20px 0;}
.news_list ul li .news_img{ width: 240px; height:160px; position: absolute; left: 0; top: 0; border: #ddd 1px solid;}
.news_list ul li .news_main a{ font-size: 18px; line-height: 2em; font-weight: bold; max-height: 72px;}
.news_list ul li .news_main a:hover{ color: #0158cb;}

#foot{ width: 100%; height: auto; padding: 30px 0; background: #333;}
.foot ul li{ float: left;}
.foot ul li .foot_title{ font-size: 18px; font-weight: bold; color: #eee; margin-bottom: 20px;}
.foot ul li p{ color: #666;}
.foot ul li p i{ color: #eee; font-style: normal;}
.foot ul li p a{ color: #eee;}
#copy{ width:100%; padding: 20px 0; background: #222;}
.copy p{ text-align: center; color: #666;}
.copy p a{ color: #eee;}
.copy p span{ padding: 0 10px;}

#keywords{ width:100%; padding: 20px 0; background: #333; border-top:#222 1px solid;}

#sub{ width: 100%; height: 300px;}
.sub-about{ background: url("../img/sub-about.jpg") top center no-repeat;}
.sub-contact{ background: url("../img/sub-contact.jpg") top center no-repeat;}
.sub-news{ background: url("../img/sub-news.jpg") top center no-repeat;}
.sub-product{ background: url("../img/sub-product.jpg") top center no-repeat;}
.sub-case{ background: url("../img/sub-case.jpg") top center no-repeat;}

.sub h1{ margin-top: 100px; height: 80px; line-height: 80px; font-size: 40px; color: #fff; text-align: center;}

.crumbs{ height: 60px;}
.crumbs p{ line-height: 60px; color: #666;}
.crumbs p span{ padding: 0 10px; color: #999;}
.crumbs p a:hover{ color: #0158cb;}

.sub-menu{ width: 400px;}
.subabout,.subcontact{ border: #ddd 1px solid; margin-bottom: 30px;}
.sub-title{ height: 60px; line-height: 60px; background: #0158cb; color: #fff; font-size: 20px; font-weight: bold; padding-left: 20px;}
.subabout ul li,
.subcontact ul li{ border-top: #ddd 1px solid;}
.subabout ul li a{ display: block; padding: 15px 20px;}
.subabout ul li a:hover{ color: #0158cb;}
.subcontact ul li{ padding: 15px 20px;}
.subcontact ul li i{ font-style: normal;}

.sub-main{ width: 870px; padding: 0 49px; border: #ddd 1px solid; margin-bottom: 30px;}
.sub-content{ min-height: 690px; padding:49px 0 39px;}
.sub-content p{ font-size: 17px; padding: 10px 0;}

/* pages */
.pagination{display:inline-block;padding-left:0;margin:20px 0;border-radius:4px}
.pagination>li{display:inline}
.pagination>li>a,.pagination>li>span{position:relative;float:left;padding:6px 12px;margin-left:-1px;line-height:1.42857143;color:#0158cb;text-decoration:none;background-color:#fff;border:1px solid #ddd}
.pagination>li:first-child>a,.pagination>li:first-child>span{margin-left:0;border-top-left-radius:4px;border-bottom-left-radius:4px}
.pagination>li:last-child>a,.pagination>li:last-child>span{border-top-right-radius:4px;border-bottom-right-radius:4px}
.pagination>li>a:focus,.pagination>li>a:hover,.pagination>li>span:focus,.pagination>li>span:hover{z-index:2;color:#23527c;background-color:#eee;border-color:#ddd}
.pagination>.active>a,.pagination>.active>a:focus,.pagination>.active>a:hover,.pagination>.active>span,.pagination>.active>span:focus,.pagination>.active>span:hover{z-index:3;color:#fff;cursor:default;background-color:#0158cb;border-color:#0158cb}
.pagination>.disabled>a,.pagination>.disabled>a:focus,.pagination>.disabled>a:hover,.pagination>.disabled>span,.pagination>.disabled>span:focus,.pagination>.disabled>span:hover{color:#777;cursor:not-allowed;background-color:#fff;border-color:#ddd}