@charset "utf-8";
/* CSS Document */

* { margin:0; padding:0;}
a { font-size:14px;text-decoration:none; font-family:Arial, Verdana  ; color:#333;}
a:hover {text-decoration:none; color:#163a84;}
ul,p { margin:0; padding:0;}
ul li { list-style:none;}
img { border:none;}
.clear { clear:both;}
body {font-family:Arial, Verdana ;color:#333; line-height:23px; font-size:14px; }
.clearfix::before, .clearfix::after {content: " ";display: block;height: 0;overflow: hidden;}
.clearfix::after {clear: both;}

.pt10{ padding-top:10px;}
.mt20{ margin-top:20px;}
.ml10{ margin-left:10px;}
.fl{ float:left;}
.fr{ float:right;}
.hide{display: none;}
/*首页布局*/
.head{width:1200px;height: 135px;margin:auto;overflow: hidden;}
.logo{ padding-top: 28px;}
.head_1{padding-left: 80px;padding-top: 30px;overflow: hidden;}
.head_1 dl{ padding: 0 35px;float: left;border-right: 1px solid #e4e4e4;overflow: hidden;}
.head_1 dl dt{ height: 20px;padding-left: 30px;color: #999999;font-size: 12px;font-weight: bold;overflow: hidden;}
.head_1 dl.dl1 dt{background:url(../images/icon2.jpg) left center no-repeat;}
.head_1 dl.dl2 dt{background:url(../images/icon3.jpg) left center no-repeat;}
.head_1 dl.dl3{ border-right: 0;}
.head_1 dl.dl3 dt{background:url(../images/icon4.jpg) left center no-repeat;}
.head_1 dl dd{padding-top: 15px;color: #6e6e6e;font-size: 16px;overflow: hidden;}
.head_2{height: 120px;line-height: 120px;padding-left: 25px;background:url(../images/icon5.jpg) left center no-repeat;}
.head_2 span{ color: #6a6969;}

.search{padding: 15px 25px 0 0; overflow:hidden;}
.search .input1{ width:150px; height:25px;border: 0;color: #fff; padding-left:5px;background-color: #f39800;}
.search .input2{ width:25px; height:25px; border:0; cursor:pointer;background:url(../images/icon7.jpg) center no-repeat;}


.dao{width:1200px;height: 55px;position: absolute;left: 50%;margin-left: -600px;top: 105px;background:#2e375f url(../images/icon6.jpg) right center no-repeat;z-index: 10000;}
#navul{ float: left;}
#navul li{ float:left; height:55px;margin-left: 5px; text-align:center; position:relative;z-index:10000;}
#navul li a{ color:#fff;padding: 0 28px; height:55px;line-height: 55px; display:block;font-size: 18px; text-align:center;position:relative; }
#navul li.current,#navul li:hover{ border-bottom: 2px solid #f39800;}
#navul li.current a{color:#fff; display:block;}
#navul li:hover a{color:#fff; display:block;}

#navul li ul{ width:100%;background:#fff none repeat scroll 0 0;position:absolute;z-index:10000;top:55px; left:0px;padding-bottom: 3px;border-top: 2px solid #f39800; border-bottom:none;display: none;}
#navul li.proli ul{ width:150%;background:#fff none repeat scroll 0 0;position:absolute;z-index:10000;top:55px; left:-20%;padding-bottom: 3px;border-top: 2px solid #f39800; border-bottom:none;display: none;}
#navul li ul li{display:block;width:100%; padding:0px; float:none;margin-right:0px;background-image:none; margin-left:0px; height:40px;position:relative;line-height:40px;border-bottom: 1px dashed #ccc; overflow:hidden;}
#navul li ul li a{color:#1071b5;width:100%;  overflow:hidden; font-size:14px; background-image:none; text-align:center; text-decoration:none; display:block;height:40px;line-height:40px; padding:0px;}
#navul li ul li a:hover{color:#c00; font-size:14px; text-align:center; display:block;height:40px;line-height:40px;background:#ddd none repeat scroll 0 0;}
#navul li ul li:hover{ height:40px;}
#navul li.current ul li a{background-color: #fff;color:#1071b5;}
#navul li:hover ul li{background-image:none;background-color: #fff;}
#navul li:hover ul li a{background-color: #fff;color:#1071b5; border:0px;text-decoration:none; }
#navul li:hover ul li a:hover{color:#1071b5; }

.bna{ width:100%; margin:auto;position:relative; z-index:1;}
/* flexslider */
.flexslider{position:relative;height:615px; overflow:hidden;background:url(../images/loading.gif) 50% no-repeat;}
.slides{position:relative;z-index:1;}
.slides li{height:615px;}
.slides li a{ display:block; width:100%; height:615px;}
.flex-control-nav{position:absolute;bottom:10px;z-index:2;width:100%;text-align:center;}
.flex-control-nav li{display:inline-block;width:12px;height:13px;margin:0 5px;*display:inline;zoom:1;}
.flex-control-nav a{display:inline-block;width:12px;height:13px;line-height:40px;overflow:hidden;background:url(../images/dot.png) right 0 no-repeat;cursor:pointer;}
.flex-control-nav .flex-active{background-position:0 0;}

.flex-direction-nav{position:absolute;z-index:3;width:100%;top:45%;}
.flex-direction-nav li a{display:block;width:50px;height:50px;overflow:hidden;cursor:pointer;position:absolute;}
.flex-direction-nav li a.flex-prev{left:5%;background:url(../images/prev.png) center center no-repeat;}
.flex-direction-nav li a.flex-next{right:5%;background:url(../images/next.png) center center no-repeat;}

/* 网站底部 */
.rtop{ width: 100%;height: 114px;position: relative;overflow: hidden;}
.rtop_1{ width: 100%;height: 2px;position: absolute;top: 56px;left: 0;background-color: #cacaca;z-index: 1; }
.rtop_2{ width: 100%;height: 114px;position: absolute;top: 0;left: 0;text-align: center;z-index: 2;}

.foot{ width: 1200px;margin: auto;padding: 30px 0 50px; position:relative;overflow: hidden;}
.foot_1{ width: 193px;overflow: hidden;}
.foot_2{width: 425px;padding-left: 85px; overflow: hidden;}
.foot_3{width: 280px;overflow: hidden;}
.foot_4{ width: 250px;height: 30px;line-height: 30px;padding-left: 30px;background:url(../images/icon22.jpg) left center no-repeat;}
.foot_5{ width: 250px;padding-left: 30px;font-size: 21px;color: #f39800;padding-top: 10px;overflow: hidden;}
.foot_6{ text-align: center;overflow: hidden;}
.foot_6 img{ display: block;margin:0 auto 10px;}

.foot_8{width: 100%;color: #747474;margin: auto;background-color: #e3e3e3;}
.foot_8 a{ color: #747474;}
.foot_8 a:hover{ text-decoration:underline;}
.foot_9{ width: 1200px;padding: 15px 0;margin: auto;overflow: hidden;}

.home{ width:100%; margin:auto;padding: 50px 0 0; position:relative;}
.home:after{visibility: hidden;display: block;font-size: 0;content: ".";clear: both;height: 0;} 
* html .home{zoom: 1;}
*:first-child + html .home{zoom: 1;}


/*首页 四个图标 */
.home_1{ width: 100%;height: 40px;text-align: center;font-size: 28px;color: #000000;font-weight: bold;position: relative;}
.home_1 span{ display: block;width: 66px;height: 3px;position: absolute;left: 50%;margin-left: -33px;bottom: 0px;border-bottom: 3px solid #f39800;}
.home_2{ width: 1200px;margin: auto;padding: 50px 0;overflow: hidden;}
.home_2 dl{ width: 25%;text-align: center;float: left;overflow: hidden;}
.home_2 dl dt{ width: 100%;height: 159px;position: relative;overflow: hidden;}
.home_2 dl dt.left_to_right .img {-webkit-transition: all 0.4s ease-in-out;-moz-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out;}
.home_2 dl dt.left_to_right .info {position: absolute;top: 0;bottom: 0;left: 0;right: 0;opacity: 0;visibility: hidden;pointer-events: none;-webkit-transition: all 0.35s ease;-moz-transition: all 0.35s ease;transition: all 0.35s ease;}
.home_2 dl dt.left_to_right:hover .img {opacity: 0;pointer-events: none;}
.home_2 dl dt.left_to_right:hover .info {visibility: visible;opacity: 1;}
.home_2 dl dt.left_to_right .info {-webkit-transform: translateX(-100%);-moz-transform: translateX(-100%);-ms-transform: translateX(-100%);-o-transform: translateX(-100%);transform: translateX(-100%);}
.home_2 dl dt.left_to_right:hover .img {-webkit-transform: translateX(100%);-moz-transform: translateX(100%);-ms-transform: translateX(100%);-o-transform: translateX(100%);transform: translateX(100%);}
.home_2 dl dt.left_to_right:hover .info {-webkit-transform: translateX(0);-moz-transform: translateX(0);-ms-transform: translateX(0);-o-transform: translateX(0);transform: translateX(0);}
.home_2 dl dd{ width: 100%;color: #000000;font-weight: bold;padding: 10px 0 20px;}

/*首页 产品展示*/
.home_14{ width: 100%;padding-bottom: 70px;background-color: #f5f5f5;overflow: hidden;}
.home_15{ width: 100%;padding: 70px 0 20px;font-size:28px;color: #000;text-align: center;font-weight: bold; font-family:Verdana,Arial;position: relative;overflow: hidden;}
.home_15 span{ display: block;width: 66px;height: 3px;position: absolute;left: 50%;margin-left: -33px;bottom: 0px;border-bottom: 3px solid #f39800;}
.home_16{ width: 1200px;padding-top: 30px;margin: auto;}
.home_17{ width: 1250px;overflow: hidden;}
.home_17 a{ display: block;position: relative;width: 295px;height: 45px;text-align: center;line-height: 45px;font-size: 16px;color: #fff;float: left;margin-right: 5px;margin-bottom: 5px;background-color: #2e375f;}
.home_17 a:hover{ background-color: #f39800;color: #fff;}
.home_17 a.cur{ background-color: #f39800;color: #fff;}
.home_18{ width: 1200px;margin: auto;padding: 30px 0 0; overflow: hidden;display: none;}
.picScroll-left1{ overflow:hidden; position:relative;}
.picScroll-left1 .bd{ padding:0px;}
.picScroll-left1 .bd ul{ overflow:hidden; zoom:1;}
.picScroll-left1 .bd ul li{ margin:0 10px;width:290px;  float:left; _display:inline; overflow:hidden; text-align:center;}
.home_18 dl{ width: 290px;float: left;margin-left: 20px;overflow: hidden;cursor: pointer;}
.home_18 dl dt{ width: 290px;height: 275px;overflow: hidden;}
.home_18 dl dt img{width:290px; height:275px; display:block;}
.home_18 dl dt img:not(.noscale){transition: all 2s ease 0s;}
.home_18 dl dt img:hover:not(.noscale){transform: scale(1.2);}
.home_18 dl dd{ width: 290px;height: 50px;text-align: center;line-height: 50px;overflow: hidden;}
.home_18 dl dd a{ font-size: 16px;color: #282828;}
.home_18 dl dd a:hover{ text-decoration: underline;}
.home_19{ width: 1200px;text-align: center;padding-top: 20px;}

/*首页 企业简介*/
.home_52{ width: 1200px;padding: 50px 0;margin: auto;overflow: hidden;}
.home_53{ width: 600px;height: 340px;padding-top: 10px;overflow: hidden;}
.home_54{ width: 520px;height: 55px;line-height: 55px;font-size: 18px;color: #363535;text-transform: uppercase;font-weight: bold;overflow: hidden;}
.home_55{ width: 520px;height: 150px;padding-top: 15px;line-height: 25px;color: #787878;overflow: hidden;}
.home_56{ width: 520px;padding-top: 50px;}
.home_56 a{display: block; width: 130px;height: 30px;color: #fff;text-align: center;line-height: 30px;background-color: #f39800;}
.home_57{ width: 565px;height: 350px;overflow: hidden;}
.home_57 img{width: 565px;height: 350px;}
.home_57 img:not(.noscale){transition: all 2s ease 0s;}
.home_57 img:hover:not(.noscale){transform: scale(1.2);}

/*首页 生产车间*/
.home_59{ width: 1200px;margin: auto;overflow: hidden;}
.picScroll-left9{ overflow:hidden; position:relative;}
.picScroll-left9 .bd{ padding:0px;}
.picScroll-left9 .bd ul{ overflow:hidden; zoom:1;}
.picScroll-left9 .bd ul li{ margin:0 10px;width:290px;  float:left; _display:inline; overflow:hidden; text-align:center;}
.picScroll-left9 .bd ul li img{width:290px; height:215px; display:block;}
.picScroll-left9 .bd ul li img:not(.noscale){transition: all 2s ease 0s;}
.picScroll-left9 .bd ul li img:hover:not(.noscale){transform: scale(1.2);}

/*首页 公司新闻 */
.home_20{ width: 1200px;margin: auto;padding: 50px 0;overflow: hidden;}
.home_21{ width: 745px;overflow: hidden;}
.home_22{ width: 100%;height: 40px;font-size: 28px;color: #000000;font-weight: bold;position: relative;overflow: hidden;}
.home_22 span{ display: block;width: 66px;height: 3px;position: absolute;left: 0;bottom: 0px;border-bottom: 3px solid #f39800;}
.home_23{ width: 745px;padding: 25px 0 0;overflow: hidden;}
.home_24{ width: 360px;height: 150px;overflow: hidden;}
.home_24 img{width: 360px;height: 150px;}
.home_24 img:not(.noscale){transition: all 2s ease 0s;}
.home_24 img:hover:not(.noscale){transform: scale(1.2);}
.home_25{ width: 350px;height: 150px;overflow: hidden;}
.home_26{ width: 350px;height: 30px;line-height: 30px;color: #2f2f2f;text-transform: uppercase;font-weight: bold;overflow: hidden;}
.home_27{ width: 350px;height: 50px;padding-top: 10px;line-height: 25px;color: #787878;overflow: hidden;}
.home_28{ width: 350px;padding-top: 15px;}
.home_28 a{display: block; width: 130px;height: 30px;color: #fff;text-align: center;line-height: 30px;background-color: #f39800;}
.home_29{ width: 800px;padding-top: 15px;overflow: hidden;}
.home_29 dl{ width: 325px;height: 80px;margin: 30px 60px 0 0;float: left;overflow: hidden;}
.home_29 dl dt{ width: 80px;height: 65px;padding-top: 15px;float: left; background:url(../images/icon15.jpg) center no-repeat;}
.home_29 dl dt .home_30{ width: 80px;height: 25px;line-height: 25px;text-align: center;font-size: 16px;overflow: hidden;}
.home_29 dl dt .home_31{ width: 80px;height: 25px;line-height: 25px;text-align: center;font-size: 18px;overflow: hidden;}
.home_29 dl dd.dd1{ width: 225px;height: 30px;line-height: 30px;margin-top: 5px;overflow: hidden;}
.home_29 dl dd.dd1 a{ color: #2f2f2f;font-size: 12px;font-weight: bold;text-transform: uppercase;}
.home_29 dl dd.dd2{ width: 225px;height: 40px;padding-top: 5px;font-size: 12px;line-height: 18px;overflow: hidden;}
.home_300{ width: 400px;overflow: hidden;}
.home_311{ width: 100%;padding-top: 25px; color: #000000;font-weight: bold;overflow: hidden;}
.home_32{ width: 100%;padding-top: 10px;overflow: hidden;}
.home_32 dl.dl1{ width: 398px;height: 38px;border: 1px solid #eeeeee;margin-top: 18px;overflow: hidden;}
.home_32 dl.dl1 dt{ width: 38px;height: 38px;float: left;border-right: 1px solid #eeeeee;overflow: hidden;}
.home_32 dl.dl1 dt.dt1{ background:url(../images/icon16.jpg) center no-repeat;}
.home_32 dl.dl1 dt.dt2{ background:url(../images/icon17.jpg) center no-repeat;}
.home_32 dl.dl1 dt.dty{ width: 24px;height: 24px;padding: 10px;}
.home_32 dl.dl1 dd{ width: 358px;height: 38px;float: left;overflow: hidden;}
.home_32 dl.dl1 dd .input1{ width: 353px;height: 38px;border: 0;padding-left: 5px;overflow: hidden;}
.home_32 dl.dl2{ width: 398px;height: 160px;border: 1px solid #eeeeee;margin-top: 18px;overflow: hidden;}
.home_32 dl.dl2 dt{ width: 38px;height: 38px;float: left;border-right: 1px solid #eeeeee;border-bottom: 1px solid #eeeeee; background:url(../images/icon18.jpg) center no-repeat;overflow: hidden;}
.home_32 dl.dl2 dd{ width: 358px;height: 160px;float: left;overflow: hidden;}
.home_32 dl.dl2 dd .textarea{ width: 353px;height: 155px;border: 0;padding:5px 0 0 5px;font-size: 12px; font-family:Arial, Verdana;overflow: hidden;}
.home_33{ width: 400px;padding-top: 15px;overflow: hidden;}
.home_33 a{display: block; width: 130px;height: 30px;margin: auto;color: #fff;text-align: center;line-height: 30px;background-color: #f39800;}

/*内页公用样式*/
.content{ width:1170px; margin:auto;padding: 20px 0; position:relative;}
.content:after{visibility: hidden;display: block;font-size: 0;content: ".";clear: both;height: 0;} 
* html .content{zoom: 1;}
*:first-child + html .content{zoom: 1;}
.nav_left{ width:220px; float:left;}
.nav_left_top{ width:220px;height: 112px;text-align: center;line-height: 112px;font-size: 26px;color: #fff;font-weight: bold;background:url(../images/navleft.jpg) no-repeat center;}

.nav_left .list{ width:220px;padding-top: 15px;overflow: hidden;}
.nav_left .list li{ width:220px; height:50px; position:relative;line-height:50px;border-bottom: 1px dashed #d7d7d7;overflow:hidden;}
.nav_left .list li a{display: block;color:#666;padding-left:30px;font-size: 18px; background:url("../images/navleft_2.png") no-repeat 15px center;height: 50px;}
.nav_left .list li a.cur_bg{color:#fff;background:#2e375f url("../images/navleft_1.png") no-repeat 15px center;}
.nav_left .list li a:hover{color:#fff; background:#2e375f url("../images/navleft_1.png") no-repeat 15px center;}

.nav_left .pro_list{ width:220px;padding-top: 15px;overflow: hidden;}
.nav_left .pro_list li{ width:220px; position:relative;border-bottom: 1px dashed #d7d7d7;overflow:hidden;}
.nav_left .pro_list li a{display: block;width: 190px;padding: 15px 0 15px 30px;line-height: 20px;color:#666;background:url("../images/navleft_2.png") no-repeat 15px center;}
.nav_left .pro_list li a.cur_bg{color:#fff;background:#0075c2 url("../images/navleft_1.png") no-repeat 15px center;}
.nav_left .pro_list li a:hover{color:#fff; background:#0075c2 url("../images/navleft_1.png") no-repeat 15px center;}

.nav_right{width:920px; float:right;}
.nav_right_top{ width:920px; height: 111px; line-height:112px; border-bottom:1px solid #ccc;font-size:30px;font-weight: bold;}
.nav_right_cen{ width:920px; padding:10px 0px 0px 0px;height:auto; padding-bottom:20px; overflow:hidden;}
.maximg img{ max-width: 100%;}


/*荣誉资质*/
.case_in dl{ width:280px;float:left; margin:8px 0px 2px 20px; text-align:center; overflow:hidden;}
.case_in dl dt{width:278px;height:200px; border:1px solid #ccc; overflow:hidden;}
.case_in dl dt img{width:278px;height:200px;}
.case_in dl dt img:not(.noscale){transition: all 2s ease 0s;}
.case_in dl dt img:hover:not(.noscale){transform: scale(1.2);}
.case_in dl dd{ width:280px; height:40px; line-height:40px; overflow:hidden;}

.case_in1 dl{ width:211px; float:left; margin:8px 0px 2px 25px; text-align:center; overflow:hidden;}
.case_in1 dl dt{width:207px;height:207px; border:1px solid #ccc; overflow:hidden;}
.case_in1 dl dt img{width:207px;height:207px;}
.case_in1 dl dt img:not(.noscale){transition: all 2s ease 0s;}
.case_in1 dl dt img:hover:not(.noscale){transform: scale(1.2);}
.case_in1 dl dd{ width:211px; height:40px; line-height:40px; overflow:hidden;}

/*分页*/
.page{ width:100%; height:50px; margin:16px 0px 8px 0px; padding-top:5px; text-align:left; background-color:#f1f1f1}

/*新闻动态*/
.new_list .nlist_1{width:920px; padding: 15px 0; border-bottom:1px dashed #dddddd;}
.new_list .nlist_2{ height:125px;float: left;}
.new_list .nlist_2 img{ width:220px; height:125px; border:0px;}
.new_list .nlist_3{ width: 680px;margin-left: 15px;overflow: hidden;}
.new_list dl{ width:100%;overflow: hidden;}
.new_list dl dd.arc_tit{ width: 100%;padding: 0 0 10px;float: left;}
.new_list dl dd.arc_tit a{ font-size:18px;}
.new_list dl dd.arc_into{ width:100%;float: left; color:#999;}
.new_list dl dd.arc_desp{ width:100%;float: left; color:#999; line-height:21px; height:60px; overflow:hidden;}

.nn_tit{ width:920px;padding: 10px 0; line-height:30px; color:#333; font-size:20px; text-align:center;overflow:hidden;}
.nn_info{ width:920px; text-align:center; border-bottom:1px dashed #dddddd; font-size:12px; color:#999; padding:3px 0;overflow:hidden;}
.nn_con{ width:900px; text-align:left; border-bottom:1px dashed #dddddd; padding:10px;overflow:hidden;}
.prev_next{ margin-top:10px; width:920px;overflow:hidden;}

/*下载中心*/
.down_in dl{ width: 920px;height: 45px;line-height: 45px;border-bottom: 1px dashed #d7d7d7;overflow: hidden;}
.down_in dl dt{ width: 740px;height: 45px;float: left;padding-left: 40px;background:url("../../images/icon24.jpg") no-repeat 10px center;overflow: hidden;}
.down_in dl dd{ width: 100px;height: 45px;text-align: right;float: right;overflow: hidden;}

/*产品展示*/
.cp_list{ width: 920px;}
.cp_list dl{ width:282px; float:left; margin:20px 10px 0px 12px;}
.cp_list dl dt{ width:280px; height:280px;padding: 1px;border: 1px solid #ccc; overflow:hidden;}
.cp_list dl dt img{ width:280px; height:280px;}
.cp_list dl dt img:not(.noscale){transition: all 2s ease 0s;}
.cp_list dl dt img:hover:not(.noscale){transform: scale(1.2);}
.cp_list dl dt a:hover img{filter:alpha(opacity=86);-moz-opacity:0.86;opacity:0.86;}
.cp_list dl dd{ width:280px; height:30px; overflow:hidden;margin-top: 10px; line-height:30px; text-align:center;}
.pro_2{ width:100%;height:36px; border-bottom:solid #ddd 1px; margin:8px 0px 2px 0px;overflow:hidden;}
.pro_1{ padding-top:15px;overflow:hidden;}
.txt_1{ color:#182B3C; font-size:18px;padding: 10px 0; font-family:"Microsoft YaHei"; font-weight:bold; text-align:center;}
.txt_6{ color:#006fbf; font-size:14px; font-family:"Microsoft YaHei"; font-weight:bold; }
.p1{ text-align:center; margin-top:10px;overflow:hidden;}
.p2{ width:920px; height: auto ; margin-top:20px}

/*留言反馈*/
.mes_tit{ width:500px; border:1px solid #cccccc; height:30px; padding-left:10px; margin-left:10px;}
.mes_textarea{ width:490px;border:1px solid #cccccc; height:130px; padding:10px; margin-left:10px;}
.mes_code{ width:60px; border:1px solid #cccccc; height:30px; padding-left:10px; margin-left:10px;}
.mes_tijiao{ width:73px; height:25px; background:url(../images/res_btn.jpg) no-repeat; border:0px; cursor:pointer; margin-left:10px;}
.message_3 table{border-left:1px solid #dfdfdf;border-top:1px solid #dfdfdf; margin-top:10px;}
.message_3 table td{border-right:1px solid #dfdfdf;border-bottom:1px solid #dfdfdf; padding-left:10px; padding-right:10px;}
.message_3 table td span{ color:#000; font-weight:bold;}

/*百度地图*/
.iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}
.iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}

/*分页样式*/
.page {
 overflow: auto;
 clear: both;
}
.page a,
.page span {
 float: left;
 display: flex;
 border: 1px solid #d3d1d1;
 padding: 2px 5px;
 margin-left: 4px;
 line-height: 22px;
}

.page .active span {
 background: #0075C2;
 color: #fff;
 border: 1px solid #0075C2;
}
.page a:link,
.page a:visited {
 text-decoration: none;
}
.page a:hover {
 background: #0075C2;
 color: #fff;
}
.page .current {
 background: #0075C2;
 color: #fff;
}
.page #total {
 color: red;
}