@charset "utf-8";
/* CSS Document */
*{padding:0;margin:0;} 
div,dl,dt,dd,form,h1,h2,h3,h4,h5,h6,img,ol,ul,li,table,th,td,p,span,a{border:0;} 
img,input{border:none;vertical-align:middle;} 
body{font-family:'微软雅黑',Tahoma,Arial,Helvetica,"宋体";font-size:14px;color:#333; 
line-height:30px; background:white;} 
html{overflow-y:scroll;} 
ul,ol{list-style-type:none;} 
th,td,input{font-size:14px;} 
h3{font-size:14px;} 
button{border:none;cursor:pointer;background-color:transparent;} 
select{border-width:1px;_zoom:1;border-style:solid;padding-top:2px;} 
.clear{clear:both;font-size:1px;height:0;visibility:hidden;line-height:0;} 
.clearfix:after{content:"";display:block;clear:both;} 
.clearfix{zoom:1;} 
a:link,a:visited{text-decoration:none;color:#333;} 
a:hover,a:active{text-decoration:none;color:black;} 
.swiper{width:100%;height:100%; position: relative;}
.swiper-slide{text-align:center;font-size:18px;background:#fff; display: block;}
.swiper-slide img{object-fit:cover}
.swiper-pagination{bottom: 30px!important;}
.swiper-pagination span{width:12px; height:12px;}
:root{--swiper-theme-color:#0e2827}
/* CSS MAIN */
.yc{width: 100%; height: 100%; min-width: 1200px; margin: 0 auto;}
.yc_main{ width: 1200px; margin: 0 auto; overflow: hidden;}
.top{ height:100px;background-color: #0e2827; position: relative; }
.top ,.top .yc_main{overflow:visible;z-index: 99;}
.top .logo{display: block; width: 300px; height: 100px;position: absolute; left: 50%; margin-left: -150px;}
.top ul{display: block; width: 450px; margin-right: 300px; float: left; height: 100px;}
.top ul li{float: left;}
.top ul li a{font-size:18px;color: white; line-height: 40px; display:inline-block; margin:30px 25px 0 0; position: relative; text-align: center;}
.top ul li a:after{content: ''; display: inline-block; width: 0; height: 1px; transition: all 0.5s;background: white; }
.top ul li.active a:after{ width: 100%;}
.top ul li:hover a:after{ width: 100%;}
.top .tel{width:180px; height: 37px; float: left; font-size: 20px; color: white; line-height: 37px; margin: 30px 30px 33px 60px;}
.top .icon_box{ float: left; margin:30px 0 0 20px; position: relative;}
.top .icon_box>span{display:none; position: absolute; left: 50%; margin-left: -70px; padding: 10px; background: white; border-radius: 5px;top: 60px; zoom: 1;}
.top .icon_box>span::after{border-left:14px solid transparent;border-right:14px solid transparent;border-bottom:14px solid white; content: ''; position: absolute; top: -10px; left: 50%; margin-left: -14px;}
.top .icon_box:hover>span{display:block;}
.top .icon_box>span:hover{display:block;}
.banner{height: auto; overflow: hidden;}
.banner .swiper-slide{ overflow: hidden;}
.banner .swiper-slide img{display: block; width: 100%; height: auto;}
.index_about{height:615px; background:#e7e7e7; box-sizing: border-box; padding: 100px 0; text-align: center;}
.index_about p{font-size:18px; line-height: 40px; color: #797979; padding: 40px 0;}
.index_product{height: auto; background:url(../images/bg_product.jpg) no-repeat center white; text-align: center;box-sizing: border-box; padding-top: 70px;}
.index_product .swiper-slide{text-align:center;background:none;display: block;transform:scale(.8);padding: 40px 0;transition: transform 0.5s;}
.index_product .swiper-slide-active,.swiper-slide-duplicate-active{transform:scale(1)}
.index_product .swiper-slide img{display:block;width:100%;height:auto;object-fit:cover}
.index_product .swiper-slide p{font-size: 20px; line-height: 40px; }
.index_product .swiper-slide{background: url(../images/pro_bg2.png) no-repeat center bottom 90px;}
.index_product .swiper-slide.swiper-slide-active{background: url(../images/pro_bg.png) no-repeat center bottom 100px;}
.index_product .swiper-slide.swiper-slide-active p::before{content: '///';font-size: 16px; padding-right: 20px;}
.index_product .swiper-slide.swiper-slide-active p::after{content: '///';font-size: 16px; padding-left:20px ;}
.index_product .swiper-pagination{bottom:0!important;}
.index_product a.more{display: block; width: 320px; height: 50px; line-height: 50px; font-size: 18px; text-align: center; margin:40px auto; border: 1px solid #777;}
.index_product a.more:hover{background-color:#777; color: white;}



.stores{height:1150px; background: #e7e7e7;box-sizing: border-box; padding: 100px 0; text-align: center; position: relative; overflow: hidden;}
.store_box{height: 780px;min-width:1920px; position: absolute; left: 50%; margin-left: -960px; margin-top: 60px; }
.store_box .swiper-slide{background:none}
.store_box img{object-fit:none; width: 1200px; height: 680px;box-shadow:0px 10px 10px #ccc;}

.advantage{ height:720px; background: url(../images/bg_advantage.jpg) no-repeat right; text-align: center; box-sizing: border-box; padding:100px 0;}
.advantage ul{ display: block; box-sizing: border-box; padding:90px 0 0 120px ;}
.advantage li{ display:block; width: 200px; height: 180px; float: left; text-align: left; margin-left: 90px;}
.advantage li p{ font-size: 24px; color: #999; line-height: 60px;border-top: 2px saddlebrown solid; margin-top: 20px;}

.join{height: 900px; background-color:#e7e7e7;text-align: center; padding:100px 0; box-sizing: border-box;}
.join .swiper-slide{ height: 380px; text-align: left; box-sizing: border-box; padding: 40px; margin: 60px 0 120px; border-radius:10px;}
.join .swiper-slide img{ margin: 0 auto; display: block;}
.join .swiper-slide p{font-size: 28px; color: #666; font-weight: bold; padding-top:20px;}
.join .swiper-slide span{ font-size:10px; color: #666; padding-bottom: 20px;}
.join .swiper-slide li{ color: #777;}
.join .swiper-slide li::before{content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%;background-color: #777; margin-right:10px;}
.join .swiper-slide{transform:scale(0.9);transition: transform 0.5s;box-shadow:0px 10px 10px #ccc;}
.join .swiper-slide-active,.swiper-slide-duplicate-active{transform:scale(1)}
.join a.more{ display: inline-block; width: 180px; height: 60px; border: 1px solid #777;line-height: 60px;font-size: 24px;border-radius: 10px; margin-top: 20px;}
.join a.more:hover{background-color:#777; color: white;}


.news{ height:800px; background: white; box-sizing: border-box; padding: 85px 0 60px;}
.news .yc_main{ position: relative; height: 100%; box-sizing: border-box; padding: 80px 0;}
.news .swiper-container{ padding-top:60px;}
.news .yc_main::before{content: url(../images/logo_icon.jpg);height: 20px; border-bottom: 1px solid #ccc; width: 100%; display: block; position: absolute; top: 0;}
.news .yc_main::after{content: url(../images/logo_icon2.jpg);height: 20px; border-bottom: 1px solid #ccc; width: 100%; display: block; position: absolute; bottom: 0; text-align:right; margin-bottom: 20px;}
.news .yc_main .swiper-slide{text-align: left; overflow: hidden;}
.news .yc_main .swiper-slide ul{ display: block; width:630px; float: right;}
.news .yc_main .swiper-slide ul p{font-size:24px; line-height: 40px; color: #5a5a5a; font-weight: bold;height: 40px; width: calc( 100% - 140px); overflow: hidden;}
.news .yc_main .swiper-slide ul em{float: right;font-size:18px; line-height: 40px; font-style: normal;height: 40px; overflow: hidden;}
.news .yc_main .swiper-slide ul span{font-size:18px; line-height: 40px; color:#999;height: 40px; overflow: hidden;}
.news .yc_main .swiper-slide ul li{display: block; border-bottom: 1px solid #ccc; padding:20px 0;}
.news .yc_main a.more{ display:block; width: 110px; height: 40px; border: 1px solid #c5c5c5;line-height: 40px;font-size: 16px;border-radius: 10px; text-align: center; color: #333; float: right; margin-top: 20px;}
.news .swiper-pagination{bottom: auto; top: 0; text-align: left; height: 50px;}
.news .swiper-pagination span{ width: auto; background: none; border-radius: 0; font-size: 30px; margin-right: 20px!important; height: auto;opacity: 1;padding-bottom: 15px;}
.news .swiper-pagination-bullet-active{color:#714a37; border-bottom: 2px solid #714a37; font-weight: bold;}
.news .yc_main .swiper-slide img{ margin: 20px 20px 0 0;box-shadow:0px 10px 10px #ccc;}


.contact{height:820px; background:#e7e7e7; box-sizing: border-box; padding: 80px 0; text-align: center;}
.contact .yc_main{ padding: 0 250px; box-sizing: border-box;}
.contact .yc_main p{ font-size:18px; line-height: 60px; margin: 20px 0;}
.contact .yc_main form img{ padding:0 15px; float: left; display: block; width: 50px; margin-bottom: 40px;}
.contact .yc_main form input{ display: block; width:620px; float: left; height: 50px; box-sizing: border-box; padding: 0 20px; margin-bottom: 40px;}
.contact .yc_main form button{ display: block; width: 120px; margin: 0 auto; font-size:24px; border:1px solid #666; height: 50px; border-radius:5px;}

.foot{background: #0e2626; box-sizing: border-box; padding: 65px 0;}
.foot ul{display: block; width:350px;  float: left; color: white;}
.foot ul li span{font-size: 16px;}
.foot ul li b{font-size:26px;/* font-weight: normal; */padding-right: 10px;}
.foot ul li:nth-child(2) b{font-size: 46px;line-height: 70px;}
/* .foot ul li:nth-child(3){ padding-bottom:20px;}
.foot ul li:nth-child(3)::after{content: ''; display: block; width: 30px; height: 3px; background-color: white;} */
/* .foot .yc_main div{ width: 190px; float: right; text-align:center; color: white; font-size:20px;line-height:80px;} */
.foot .yc_main{display: flex;justify-content: space-between;}
.foot ul li a{ color:white;}

/* about */
.about{ height:1400px; background: url(../images/bg_product.jpg) no-repeat center white; box-sizing: border-box; padding: 100px 0; text-align: center;}
.about>p{ font-size: 26px; color: #6d4632; line-height:50px;display: block; width: 240px; margin: 0 auto; position: relative;}
.about>p b{ display: block; position: relative;}
.about>p b::before{content: ''; display: block; width: 8px; height: 8px;background: #979797; border-radius: 50%; position: absolute; left: 0; top:26px ;} 
.about>p b::after{content: ''; display: block; width: 8px; height: 8px;background: #979797; border-radius: 50%; position: absolute; right: 0; top:26px ;} 
.about>p::before{content: ''; display: block; width:470px; height:2px;background: #979797; border-radius: 50%; position: absolute; left:-470px; top:29px ;} 
.about>p::after{content: ''; display: block; width:470px; height:2px;background: #979797; border-radius: 50%; position: absolute; right:-470px; top:29px ;} 

.about ul{ display: block; padding:50px 100px; box-sizing: border-box; overflow: hidden; }
.about li{display: block;width:640px; height: 200px; float: left;  box-sizing: border-box; padding:25px 0 ; position: relative;}
.about ul li:nth-child(2n){float: right;}
.about .yc_main{text-align:left;}
.about .yc_main p{font-size: 18px; line-height: 26px; padding-bottom: 10px;display: block; width: 340px;}
.about .yc_main span{font-size: 12px; line-height: 16px;display: block; width: 340px;}
.about ul li:nth-child(2n) p{float: right;}
.about ul li:nth-child(2n) span{float: right;}
.about ul li em{ display: block; width: 100px;height: 100px; border-radius: 50%; border: 2px solid #714a37; line-height: 100px; text-align: center; font-size: 24px; font-style:normal; color: #714a37; font-weight: bold; position: absolute; top: 0; right:90px;} 
.about ul li:nth-child(2n) em{ right: auto; left:85px;} 
.about ul li::before{content: url(../images/line.jpg); position: absolute; right:220px; top:40px;}
.about ul li:nth-child(2n)::before{ right:auto; top:40px; left: 210px;}
.about ul li::after{content:''; position: absolute; right:140px; top: 120px; width: 2px; height: 60px; background:#838383}
.about ul li:nth-child(2n)::after{ right:auto; top: 120px; left: 139px; }
.about ul li em::after{content:url(../images/yuan1.png); position: absolute; display: block; width: 106px; height: 106px; top: -3px;  left: -3px;}
.about ul li:nth-child(2) em::after{content:url(../images/yuan2.png)}
.about ul li:nth-child(3) em::after{content:url(../images/yuan3.png)}
.about ul li:nth-child(4) em::after{content:url(../images/yuan4.png)}
.about ul li:nth-child(5) em::after{content:url(../images/yuan5.png)}


.join2{ height:auto; background:url(../images/bg_product.jpg) repeat-y center white; box-sizing: border-box; padding: 100px 0; text-align: center;}
.join2>p{ font-size: 26px; color: #6d4632; line-height:50px;display: block; width: 240px; margin: 0 auto; position: relative;}
.join2>p b{display: block; position: relative;}
.join2>p b::before{content: ''; display: block; width: 8px; height: 8px;background: #979797; border-radius: 50%; position: absolute; left: 0; top:26px ;} 
.join2>p b::after{content: ''; display: block; width: 8px; height: 8px;background: #979797; border-radius: 50%; position: absolute; right: 0; top:26px ;} 
.join2>p::before{content: ''; display: block; width:470px; height:2px;background: #979797; border-radius: 50%; position: absolute; left:-470px; top:29px ;} 
.join2>p::after{content: ''; display: block; width:470px; height:2px;background: #979797; border-radius: 50%; position: absolute; right:-470px; top:29px ;} 


.money li p{display: block; width: 300px; height: 100px; margin: 0 auto; border: 2px solid #a8a8a8; border-radius: 10px; font-size: 24px; line-height: 100px; margin-top: 80px; position: relative;}
.money li p:after{content: ''; width: 36px; height: 36px; border-left: 1px solid #714a37; display: block;transform:rotate(45deg); position: absolute; bottom: -70px; left: 50%; margin-left: -5px; }
.money li p b{color: #714a37;font-size: 28px;}
.money li:nth-last-child(2) p{border: 0;}
.money li:nth-last-child(2) p::after{content: ''; display: none;}
.money li:nth-last-child(3) p::after{transform:rotate(0deg);  }


.title{text-align:center;}
.title p{ font-size: 50px!important; color: #714a37; font-weight: bold; line-height:70px!important; padding: 0;}
.title span{ font-size: 16px; color: #714a37; text-transform:uppercase;font-weight: bold; letter-spacing:2px;}
.title span::before{ content: '-'; padding-right: 10px;}
.title span::after{ content: '-'; padding-left: 10px;}

.cooperation{display: block; width: 1030px; margin: 0 auto; overflow: hidden; padding:100px 0; background: url(../images/iconl.jpg) repeat-x top; margin-top: 100px;}
.cooperation dt{display: block; text-align: center; font-size: 28px; color: #714a37; font-weight: bold; padding-bottom: 50px;}
.cooperation dt::before{content: url(../images/icon.jpg);display: inline-block; padding: 0 20px; position: relative; top: 10px;}
.cooperation dt::after{content: url(../images/icon.jpg);transform:rotate(180deg); display: inline-block; padding: 0 20px; position: relative; top: 10px;}
.cooperation dd{display:block; width: 235px; height: 165px; float:left; border: 1px solid #000; margin:53px; border-radius: 20px; box-sizing: border-box; padding:25px 35px; text-align: left; position: relative;}
.cooperation dd p{font-size:28px; color:black; line-height: 40px; font-weight: bold;}
.cooperation dd span{font-size: 20px; line-height: 30px;}

.cooperation dd::after{content: url(../images/iconr.jpg); position: absolute; right: -70px; top:70px; display: block;}
.cooperation dd:last-child:after{display: none;}
.cooperation dd:nth-child(4)::after{bottom: -60px; top:auto; right:100px;transform:rotate(90deg);}
.cooperation dd:nth-last-child(2)::after{transform:rotate(180deg);}
.cooperation dd:nth-last-child(3)::after{transform:rotate(180deg);}


.address{ padding: 30px 0;}
.address p{ float: left;}
.address p::before{content: url(../images/address.png); position:relative; top: 5px; padding-right: 5px;}
.address ul{float: left;}
.address li{ float: left;}
.address li a{ padding-right:20px; position: relative; margin-right: 20px;}
.address li a:after{content:'>'; position: absolute; right: 0;}

.newlist{ height:auto; background:white; box-sizing: border-box;}
.newlist .title{ text-align: left; max-width: 1200px; margin:40px auto; overflow: hidden;}
.newlist .title a{ float: right; line-height:50px; font-size:16px; display: block; margin-top:50px;}
.newlist .title a::after{content:url(../images/right_icon.png); padding-left: 10px; position: relative; top: 3px;}

.newlist .boxone{ padding-bottom:100px;}
.newlist .boxone li{ display: block; float: left; width:380px; overflow: hidden; background: #f6f6f6; height: 430px; border-radius: 20px; transition: all 0.5s; margin-bottom: 30px;}
.newlist .boxone li:nth-child(2){ margin: 0 30px;}
.newlist .boxone li:nth-child(5){ margin: 0 30px;}
.newlist .boxone li:nth-child(8){ margin: 0 30px;}
.newlist .boxone li .boxone_1,.newlist .boxone li img{ display: block; width: 380px; height: 290px;object-fit:cover; overflow: hidden; transition: all 0.5s;}
.newlist .boxone li .boxone_2{ padding: 20px 20px 0 100px; position: relative;}
.newlist .boxone li .boxone_2 p{ font-size: 18px; line-height:24px; margin-bottom:10px; color: black;}
.newlist .boxone li .boxone_2 span{ font-size: 14px; line-height:20px; color: #999; height: 40px; display: block; height: 40px; overflow: hidden;}
.newlist .boxone li .boxone_2 .time{ position: absolute; left:10px; width: 70px; height:70px; top:20px; text-align: center; line-height:10px;}
.newlist .boxone li .boxone_2 .time p{font-size: 30px;}
.newlist .boxone li:hover{background-color:#0e2626; color: white;}
.newlist .boxone li:hover *{ color: white;}
.newlist .boxone li:hover p{ color: white;}
.newlist .boxone li:hover img{ transform: scale(1.1);}

.newlist .boxtwo.color{background: #e9efef;}
.newlist .boxtwo{ padding:40px 0 100px;  }
.newlist .boxtwo ul li:first-child{ display: block;float: left; width:570px; margin-right:30px; border-radius: 20px; overflow: hidden; height: 500px; background-color: #f6f6f6;}
.newlist .boxtwo.color li:first-child{ background:white;}
.newlist .boxtwo.color li:first-child:hover{background-color:#0e2626; color: white;}
.newlist .boxtwo li:first-child .boxone_1,.newlist .boxtwo li:first-child img{ display: block; width: 570px; height: 370px;object-fit:cover; overflow: hidden; transition: all 0.5s;}
.newlist .boxtwo li:first-child .boxone_2{ padding: 20px 20px 0 100px; position: relative;}
.newlist .boxtwo li:first-child .boxone_2 p{ font-size: 18px; line-height:24px; margin-bottom:10px; color: black;}
.newlist .boxtwo li:first-child .boxone_2 span{ font-size: 14px; line-height:20px; color: #999; height: 40px; display: block; height: 40px; overflow: hidden;}
.newlist .boxtwo li:first-child .boxone_2 .time{ position: absolute; left:10px; width: 70px; height:70px; top:20px; text-align: center; line-height:10px;}
.newlist .boxtwo li:first-child .boxone_2 .time p{font-size: 30px;}
.newlist .boxtwo li:first-child:hover{background-color:#0e2626; color: white;}
.newlist .boxtwo li:first-child:hover *{ color: white;}
.newlist .boxtwo li:first-child:hover p{ color: white;}
.newlist .boxtwo li:first-child:hover img{ transform: scale(1.1);}

.newlist .boxtwo li:not(:first-child){ display: block; height: 125px; width: 600px; float: left; border-bottom: 1px solid #ccc; box-sizing: border-box; padding: 20px 0; position: relative;}
.newlist .boxtwo li:not(:first-child) p{ font-size: 18px; line-height:40px; color: black; display: block; max-width:480px; overflow: hidden; transition: all 0.5s;}
.newlist .boxtwo li:not(:first-child) span{ font-size: 14px; line-height:20px; color: #999; height: 40px; display: block; height: 40px; overflow: hidden;}
.newlist .boxtwo li:not(:first-child) .time{ position: absolute; right: 0; top: 20px;font-size: 14px; line-height: 40px;}
.newlist .boxtwo li:last-child{border-bottom: 0;}
.newlist .boxtwo li:not(:first-child):hover p{ color:#714a37; font-weight: bold;}


.page{text-align: center; margin:0 auto; padding-bottom: 100px;}
.page>*{ display: inline-block;  height: 40px; margin: 0 5px;padding: 0 15px; font-size: 16px; color: #000; line-height:40px}
.page>span{ background:#0e2626; border-radius: 5px; color: white;}

.detail{ padding: 40px 0; border-top: 1px solid #eee; margin-bottom: 30px;border-bottom: 1px solid #eee;}
.detail .detail_title{ padding-bottom: 40px ; margin-bottom: 40px;border-bottom: 1px solid #eee;}
.detail .detail_title h1{ font-size: 22px; font-weight: bold; color: #000; text-align: center; line-height: 60px;}
.detail .detail_title center{ display: block; text-align: center; font-size: 15px; line-height:30px; color: #666;}
.detail .detail_content{ padding: 0 200px;box-sizing: border-box;font-size: 18px;line-height: 40px;}
.detail .detail_content p{ text-indent: 2em; font-size: 15px;}
.detail .detail_content img{ margin: 20px auto; display: block; max-width: 640px;}
.sxpage{padding: 40px 0 60px;font-size: 18px;line-height: 60px; text-indent: 2em;}



/*  */
.box_statement .box{ width: 700px; height: 500px; position: fixed; top: 50%; left: 50%;  margin: -250px 0 0 -350px; z-index: 999; background: white; border-radius: 20px; box-sizing: border-box; padding: 40px;}
.box_statement h3{ text-align: center; font-size: 18px; line-height: 50px;}
.box_statement p{ font-size: 16px; line-height: 32px;}
.box_statement p:last-child{text-align: right;}
.box_statement::before{display: block; content: ''; width: 100%; height: 100%; background:rgba(0, 0, 0, .7); position: fixed; left: 0; top: 0; z-index: 998;}
.box_statement button{ border:0; padding: 10px 20px; position: relative;top: 15px; cursor: pointer;background-color: #eee; float: left;}
.box_statement button:hover,.box_statement .close:hover{background-color: #0e2827; color: white;}
.box_statement .close:hover span,.box_statement .close:hover span:last-child{background: white;}
.box_statement .close{ width: 40px; height: 40px; cursor: pointer; position: absolute; right: 0; top:0; background-color: #eee; border-radius: 20px; overflow: hidden;}
.box_statement .close span{display: block; width: 20px; height: 1px; background: #333; border-radius: 1.5px;transform:rotate(45deg); position:absolute; top: 20px; left: 10px;}
.box_statement .close span:last-child{display: block; width: 20px; height: 1px; background: #333; border-radius: 1.5px;transform:rotate(-45deg);}



/*  */
.contact{height:auto;}
.contact .yc_main form input[name="tel"]{ width: 480px;}
.contact .yc_main form a.code{display: block;width: 140px; float: left; height: 50px; margin-bottom: 40px; line-height: 50px; background: #714a37; font-size: 18px; color: white; cursor: pointer;}

.pro{background:url(../images/bg_product.jpg) no-repeat center bottom white ; display: block; overflow: hidden;}
.pro .title{ padding: 100px 0;}
.pro li{display: block; width: 360px; float: left;}
.pro li:nth-child(2){ padding: 0 60px;}
.pro li:nth-child(4){ padding: 0 60px;}

.pro li p{ font-size: 30px; padding: 0 30px;}
.pro li span{ font-size:15px; font-weight: bold; line-height:50px;display:block; border-bottom: 1px solid #ccc;padding: 0 30px;}
.pro li div{ padding: 10px; height: 90px; overflow: hidden;padding: 0 30px;}
.pro li img{display: block; width: 100%;height: auto;}

.cd{ padding: 100px 0; text-align: center;}
.cd img{box-shadow: 0px 10px 10px 5px #ccc}

#pages{text-align:center;padding-bottom:20px}
#pages a{font-size:16px;padding:12px 22px;color:#0c0c0c;margin:0 2px;text-align:center;background:#e6e6e6;color:#333;display:inline-block;}
#pages span{font-size:16px;display:inline-block;padding:12px 12px}
#pages a.active{text-align:center;background:#0e2827;color:#fff;display:inline-block}
#pages a:hover{background:#0e2827; color: white;}
#pages a:hover a{color:#fff}