@charset "utf-8";
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, hr, pre, code, form, fieldset, legend, button, input, textarea, p, blockquote, table, th, td{margin:0; padding:0;}
body{min-width:1350px; font:normal 100% 微软雅黑, "Microsoft YaHei", 宋体, Arial, Tahoma, Helvetica, sans-serif;}
h1, h2, h3, h4, h5, h6{font-size:100%; font-weight:normal}
button, input, textarea, select{font-family:inherit; font-size:inherit; *font-size:100%; font-weight:inherit; border:0; outline:0; resize:none}
address, caption, cite, code, dfn, em, var, b{font-style:normal; font-weight:normal;}
input, textarea{outline-style:none}
input::-webkit-input-placeholder{color:#A9A9A9; font-size:14px}
input::-moz-placeholder{color:#A9A9A9; font-size:14px   /* Mozilla Firefox 19+ */}
input:-moz-placeholder{color:#A9A9A9; font-size:14px    /* Mozilla Firefox 4 to 18 */}
input:-ms-input-placeholder{color:#A9A9A9; font-size:14px  /* Internet Explorer 10-11 */}
::selection{background:#655234; color:#fff;}
::-moz-selection{background:#655234; color:#fff;}
::-webkit-selection{background:#655234; color:#fff;}
em, i, b{font-style:normal;}
ul, ol, li{list-style:none;}
fieldset, img{border:0;}
.fl{float:left}
.fr{float:right}
a{text-decoration:none; color:#333}
.clear{clear:both}
.w1200{width:1200px; margin:0 auto; overflow:hidden}
.w1300{width:1300px; margin:0 auto; overflow:hidden}
.h100{height:100%}
.pd15{padding:0 15px}
.center{display:flex; justify-content:center; align-items:center;}      /* 水平垂直居中 */
.cz_center{display:flex; align-items:center;}      /* 垂直居中 */
.sp_center{display:flex; justify-content:center;}      /* 水平居中 */


/* header */
#header{}

/* nav */
.top_2{}
.logo, .colltit, .nav{height:105px}
.colltit{margin-left:25px;}
.colltit p{font-size:30px; color:#777; border-left:1px solid #CCC; line-height:50px; padding-left:25px}
.nav li{float:left; position:relative;}
.nav li.last{background:none;}
.nav li a{float:left;display:block; text-align:center;}
.nav li a span{text-align:center; font-size:15px; font-weight:bold; color:#555; padding-bottom:8px}
.nav li a.selected span{color:#8c734b; border-bottom:2px solid #8c734b}
.nav li a.selected2 span{color:#8c734b; border-bottom:2px solid #8c734b}
.nav li.selected .submenu{display:block;}
.nav li .submenu{display:none;position:absolute;top:30px;left:50%; transform:translate(-50%,0); background:#FFF; box-shadow:2px 1px 6px rgba(0,0,0,0.4)}
.nav li .submenu{ z-index:9999;}
.nav li .submenu li{float:none;padding:0; margin:0; border-bottom:1px dotted #CCC}
.nav li .submenu li a{float:none;   border:none; text-align:center; white-space:nowrap; background:none; font-size:13px; color:#666; padding:12px 20px}
.nav li .submenu li a:hover{background:rgba(0,0,0,.3);font-weight:normal; color:#fff; text-decoration:none;}
.nav span{font-size:13px; color:#888; margin:0 10px}

/* banner */
#banner{position:relative; height:450px; overflow:hidden; margin:0 auto}
#banner .bd{position:relative; }
#banner .bd a{display:block; width:100%; height:450px; }
#banner .hd{margin:0 auto; position:absolute; width:100%; bottom:25px; }
#banner .hd a{display:block; }
#banner .hd ul{margin:0 auto; width:100%; display:inherit; text-align:center; position:relative;}
#banner .hd ul li{display:inline-block; width:15px; height:15px; -webkit-border-radius:50%; -moz-border-radius:50%; -o-border-radius:50%; border-radius:50%; margin:0 3px; background:#FFF; cursor:pointer}
#banner .hd ul .on{ background:#ea353a;}

#banner .bnt{position:absolute; top:50%; z-index:3; margin-top:-20px; }
#banner .bnt:hover{}
#banner .prev{position:absolute; left:-54px; }
#banner .prev em{display:block; line-height:50px; padding:0 8px; font-size:30px; background:rgba(0,0,0,.4); color:#FFF; font-family:"宋体"; }
#banner .next{position:absolute; right:-54px; }
#banner .next em{display:block; line-height:50px; padding:0 8px; font-size:30px; background:rgba(0,0,0,.4); color:#FFF; font-family:"宋体"; }
#banner:hover .prev{left:40px; opacity:1; filter:alpha(opacity=100); }
#banner:hover .next{right:40px; opacity:1; filter:alpha(opacity=100); }
#banner .prev em:hover, #banner .next em:hover{color:#D83648}
#banner .prev, #banner .next{-moz-transition:all .5s ease-in-out; -webkit-transition:all .5s ease-in-out; -o-transition:all .5s ease-in-out; -ms-transition:all .5s ease-in-out; transition:all .5s ease-in-out; cursor:pointer}

/* banner里的专业滚动区 */
.collgd{position:absolute; bottom:0; width:100%; height:95px; background:rgba(0,0,0,.6)}
.swiper-container{width:1200px; height: 100%; margin:0 auto; overflow:hidden; position:relative}
.swiper-wrapper{position:relative; width:1200px; height:100%; margin:0 auto; z-index:1; display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-transition-property:-webkit-transform; transition-property:-webkit-transform; -o-transition-property:transform; transition-property:transform; transition-property:transform,-webkit-transform; -webkit-box-sizing:content-box; box-sizing:content-box}
.swiper-slide{-webkit-flex-shrink:0; -ms-flex-negative:0; flex-shrink:0; position:relative}
.swiper-slide{box-sizing:border-box; border-left:1px solid #FFF}
/*箭头*/
.jt_width{position:absolute; top:0; left:50%; transform:translate(-50%,0); width:1300px; height:95px; }
.swiper-button-next, .swiper-button-prev{position:absolute; top:50%; width:50px; height:100%; font-family:"宋体"; font-size:30px; text-align:center; line-height:95px; color:#FFF; transform:translate(0%,-50%); z-index:10; cursor:pointer; outline:none}
.swiper-button-prev{left:0}
.swiper-button-next{right:0; box-sizing:border-box; border-left:1px solid #FFF}
.swiper-button-disabled{color:rgba(255,255,255,.3)}
.swiper-wrapper{position:relative;}
.swiper-slide a{width:100%; height:100%; display:flex; justify-content:center; align-items:center;}
.coll_icon{width:58px; height:58px; position:relative; border:1px solid #AAA; -webkit-border-radius:50%; -moz-border-radius:50%; -o-border-radius:50%; border-radius:50%; transition:all .6s ease; -webkit-transition:all .6s ease; -moz-transition:all .6s ease; -ms-transition:all .6s ease; -o-transition:all .6s ease;}
.coll_icon em{display:block; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:34px; height:34px;}
.coll_text{margin-left:15px; max-width:220px; overflow:hidden}
.coll_text p{font-family:"宋体"; font-size:18px; color:#FFF; line-height:38px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
.coll_text h6{font-size:12px; color:#FFF;}
.swiper-wrapper .swiper-slide:nth-child(1) .coll_icon em{background:url(../images/coll_icon.png) 0 0; background-size:280px 35px}
.swiper-wrapper .swiper-slide:nth-child(2) .coll_icon em{background:url(../images/coll_icon.png) -35px 0; background-size:280px 35px}
.swiper-wrapper .swiper-slide:nth-child(3) .coll_icon em{background:url(../images/coll_icon.png) -70px 0; background-size:280px 35px}
.swiper-wrapper .swiper-slide:nth-child(4) .coll_icon em{background:url(../images/coll_icon.png) -105px 0; background-size:280px 35px}
.swiper-wrapper .swiper-slide:nth-child(5) .coll_icon em{background:url(../images/coll_icon.png) -140px 0; background-size:280px 35px}
.swiper-wrapper .swiper-slide:nth-child(6) .coll_icon em{background:url(../images/coll_icon.png) -175px 0; background-size:280px 35px}
.swiper-wrapper .swiper-slide:nth-child(7) .coll_icon em{background:url(../images/coll_icon.png) -210px 0; background-size:280px 35px}
.swiper-wrapper .swiper-slide:nth-child(8) .coll_icon em{background:url(../images/coll_icon.png) -245px 0; background-size:280px 35px}
.swiper-slide:hover .coll_icon{-webkit-border-radius:0; -moz-border-radius:0; -o-border-radius:0; border-radius:0; transition:all .6s ease; -webkit-transition:all .6s ease; -moz-transition:all .6s ease; -ms-transition:all .6s ease; -o-transition:all .6s ease;}



/* content */
#content{overflow:hidden; margin:40px auto 0 auto}

/* 正文 */
.area{overflow:hidden; display:flex; display:-webkit-flex; /* Safari */ justify-content:space-between; flex-wrap:wrap;}

/* 图片新闻轮播 */
.imglb{width:28%!important; overflow:hidden}
.imgnews{width:100%; height:265px; background:#CCC; position:relative; overflow:hidden}
.yx-rotaion, .rotaion_list, .rotaion_list li, .rotaion_list li img{width:100%!important; height:100%}
.rotaion_list{overflow:hidden;}
.rotaion_list li img{width:100%; image-rendering:pixelated; image-rendering:-webkit-optimize-contrast;}
.yx-rotaion-btn{display:none}
.yx-rotaion-title,.yx-rotation-focus,.yx-rotation-t{position:absolute}
.yx-rotation-title{position:absolute; width:100%; height:35px; line-height:35px; background:rgba(0,0,0,.75); left:0; bottom:0; _bottom:-1px; z-index:1}
.yx-rotation-t{width:66%; font-size:12px; color:#FFF; z-index:2; bottom:0; left:12px; line-height:35px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.yx-rotation-focus{right:5px; bottom:9px; z-index:2;}
.yx-rotation-focus span{display:block; width:16px; height:16px; line-height:16px; text-align:center; margin:0 2px; font-size:12px; color:#000; float:left; background:#FFF; cursor:pointer}
.yx-rotation-focus span.hover{background:#f60; color:#FFF}

/* 标题 */
.biaoti{width:100%; padding-bottom:10px; border-bottom:1px solid #d8d9da; position:relative}
.biaoti b{font-size:18px; color:#444}
.biaoti en{font-size:12px; margin-left:15px; color:#888; text-transform:uppercase}
.biaoti a{float:right; font-size:12px; color:#692327}
.biaoti b, .biaoti a{line-height:20px}
.triangle{display:block; position:absolute; left:25px; bottom:-8px; width:0; height:0; border-left:8px solid transparent; border-right:8px solid transparent; border-top:7px solid #692327;}
.red_line{padding-bottom:7px; border-bottom:2px solid #f4070b}

/* 部门动态 */
.bmdt{width:44%; overflow:hidden}
.newstit{width:100%; margin:23px 0 21px 0; overflow:hidden}
.newstit a{display:block; float:left; width:83%; font-size:15px; font-weight:bold; color:#555; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
.newstit b{float:right; font-size:13px; color:#888}
.newstit a, .newstit b{line-height:20px}
.newstit a:hover{color:#8c734b}
.newstit h5{font-size:12px; color:#777; line-height:20px; margin-top:8px}
.newlist_box{background:#eeecec; padding:14px; border:1px solid #d8dadd; overflow:hidden; display:flex; display:-webkit-flex; /* Safari */ justify-content:space-between; flex-wrap:wrap;}
.newlist_box dt{width:48%; overflow:hidden; position:relative}
.newlist_box dt a{display:block; font-size:13px; color:#666; line-height:30px; padding-left:10px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
.newlist_box dt:before{content:""; display:block; position:absolute; left:0; top:50%; transform:translate(0,-50%); width:4px; height:4px; background:#953936}
.newlist_box dt a:hover{color:#953936}

/* 系部概况 */
.xbgk{width:24%; overflow:hidden}
.xbgk img{width:100%; margin:11px auto}
.xbgk p{font-size:13px; color:#777; line-height:19px;}

/* 专栏+艺术长廊 */
.picScroll-left{width:100%; overflow:hidden; position:relative;}

.zl{height:100px; margin:35px auto}
.ys_listbox{width:100%; margin:35px auto 10px auto; overflow:initial!important}
/* 专栏左右箭头 */
.zl .hd{width:100%; height:100%; position:absolute; overflow:hidden; display:none}
.zl:hover .hd{display:block}
.picScroll-left .hd .prev{left:0}
.picScroll-left .hd .next{right:0}
.zl .hd .prev, .zl .hd .next{display:block; position:absolute; top:50%; transform:translate(0,-50%); cursor:pointer; font-family:"宋体"; font-size:30px; line-height:38px; color:#FFF; background:rgba(0,0,0,.3); padding:0 6px; z-index:999}
.zl .hd .prev:hover, .zl .hd .next:hover{background:rgba(0,0,0,.7)}
/* 艺术长廊左右箭头 */
.ys_listbox .hd{width:85px; height:22px; position:absolute; right:9px; top:-43px; overflow:hidden; display:block}
.picScroll-left .hd .prev{left:0}
.picScroll-left .hd .next{right:0}
.ys_listbox .hd .prev, .ys_listbox .hd .next{display:block; position:absolute; top:50%; transform:translate(0,-50%); cursor:pointer; width:40px; height:100%; font-family:"宋体"; font-size:15px; text-align:center; line-height:22px; color:#FFF; background:rgba(0,0,0,.3); z-index:999}
.ys_listbox .hd .prev:hover, .ys_listbox .hd .next:hover{background:rgba(212,44,48,.9)}

.picScroll-left .bd{width:100%; margin:0 auto}
/* 专栏列表 */
.zl_list{overflow:hidden}
.zl_list li{width:100%; height:100px; float:left; overflow:hidden; text-align:center;}
.zl_list li img{text-align:center; width:100%; height:100px; image-rendering:pixelated; image-rendering:-webkit-optimize-contrast;}
/* 艺术长廊列表 */
.ys_list li{width:195px; height:170px; float:left; overflow:hidden; text-align:center; margin-right:14px; position:relative}
.ys_list li img{text-align:center; height:130px; image-rendering:pixelated; image-rendering:-webkit-optimize-contrast;}
.ys_list li p{height:40px; line-height:40px; color:#555; font-size:14px;}

.cont2{overflow:hidden}
/* 艺术长廊 */
.yscl{width:80%; position:relative}
.yscltit{position:relative;}
.yscltit:before{content:""; display:block; position:absolute; width:2px; height:100%; background:#d02d31; border-right:2px solid #f8b064}
.yscltit p{margin-left:15px; font-size:17px; font-weight:bold; color:#474747}
.yscltit en{font-size:12px; margin-left:15px; color:#616161; font-weight:normal; text-transform:Capitalize}

/* 图片链接 */
.piclink{width:18%; height:200px;}
.piclink dt{width:100%; height:90px; margin-bottom:16px; box-sizing:border-box; border:1px solid #e9e9e9;}
.piclink dt a{width:100%; height:100%; display:flex; justify-content:center; align-items:center;}
.piclink dt b{height:35px; line-height:35px; font-size:18px; font-weight:bold; padding-left:45px}

.piclink dt:nth-child(1){background:url(../images/piclink_bj.jpg) 0 0}
.piclink dt:nth-child(2){background:url(../images/piclink_bj.jpg) 0 -90px}
.piclink dt:nth-child(1) b{color:#eb5e56; background:url(../images/piclink_icon.png) no-repeat 0 0}
.piclink dt:nth-child(2) b{color:#9c6f4d; background:url(../images/piclink_icon.png) no-repeat 0 -35px}

/* 专业设置 */
.zysz{width:100%; background:#e7ecf2; margin-top:25px}
.zysz_list{width:100%; height:138px; margin:40px auto; background:rgba(0,0,0,.4) url(../images/zysz_bj.png) no-repeat; overflow:hidden; display:flex; display:-webkit-flex; /* Safari */ justify-content:space-between; flex-wrap:wrap;}
.zysz_list dt{width:138px; height:138px; background:rgba(0,0,0,.5); position:relative}
.zysz_list dt:before{content:""; display:block; position:absolute; right:-28px; width:28px; height:100%; background:#e7ecf2}
.zysz_list dt span{width:100%; height:100%}
.zysz_list dt b{font-size:22px; font-weight:bold; color:#FFF}
.zysz_list dt i{font-family:"宋体"; font-size:22px; color:#FFF; margin-left:10px}
.zysz_list dt a{display:block; width:100%; height:100%;}
.zysz_list dt em{display:block; position:absolute; top:20px; left:50%; transform:translate(-50%,0); width:52px; height:52px;}
.zysz_list dt p{position:absolute; top:82px; left:50%; width:90px; transform:translate(-50%,0); text-align:center; font-size:14px; color:#FFF;}

.zysz_list dt:nth-child(2) em{background:url(../images/coll_icon.png) no-repeat 0 0}
.zysz_list dt:nth-child(3) em{background:url(../images/coll_icon.png) no-repeat -52px 0}
.zysz_list dt:nth-child(4) em{background:url(../images/coll_icon.png) no-repeat -104px 0}
.zysz_list dt:nth-child(5) em{background:url(../images/coll_icon.png) no-repeat -156px 0}
.zysz_list dt:nth-child(6) em{background:url(../images/coll_icon.png) no-repeat -208px 0}
.zysz_list dt:nth-child(7) em{background:url(../images/coll_icon.png) no-repeat -260px 0}
.zysz_list dt:nth-child(8) em{background:url(../images/coll_icon.png) no-repeat -312px 0}
.zysz_list dt:nth-child(9) em{background:url(../images/coll_icon.png) no-repeat -364px 0}
.zysz_list dt:nth-child(9) p{width:60%}

/* footer */
#footer{background:#8c734b; padding:55px 0;}
.f_logo{width:211px; height:125px; background:url(../images/f_logo.png) no-repeat; margin-right:85px}
.f_info{padding-left:85px; border-left:1px solid #ad946b}
.f_info b{display:block; font-size:16px; color:#FFF; margin-bottom:17px}
.f_info en{font-size:12px; color:#FFF; margin-left:22px}
.f_info p{color:#dcd5ca; font-size:12px; line-height:25px}
.f_qr{text-align:center}
.f_qr img{width:100px; height:100px}
.f_qr p{font-size:13px; color:#FFF; line-height:38px}
.f_nav{width:255px; padding:20px 0; margin-right:100px; border-top:1px solid #ad946b; border-bottom:1px solid #ad946b}
.f_nav dt{float:left; width:85px;}
.f_nav dt a{display:block; font-size:13px; color:#dcd5ca; text-align:center; margin:14px 0}
.f_nav dt:hover a{color:#ff9954}
.f_bq{width:100%; background:#614e2f}
.f_bq p{font-size:12px; line-height:50px; color:#FFF; text-align:center}









/* 内页start */
.ny_banner{width:100%; height:260px; background:url(../images/ny_banner.jpg) no-repeat}

#ny_content{}

/* 内页左侧 */
#ny_left{width:195px; position:relative; margin-top:-80px; float:left; transition:all 01s ease; -webkit-transition:all 01s ease; -moz-transition:all 01s ease; -ms-transition:all 01s ease; -o-transition:all 01s ease;}
#ny_left.fix{position:fixed; top:0; margin-top:0;}

.lm_name{width:100%; height:80px; background:#8c734b; position:relative; z-index:99}
.lm_name:before{content:""; display:block; position:absolute; right:0; width:155px; height:80px; background:linear-gradient(55deg, transparent 85px, rgba(255,255,255,.07) 0) top left; background-repeat:no-repeat; -webkit-transform:translateZ(0)}
.lm_name div{margin-left:30px; position:relative}
.lm_name p{font-size:16px; color:#FFF; line-height:28px}
.lm_name en{font-size:12px; color:#FFF; text-transform:Uppercase;}

/* 内页左侧导航 */
#sub_nav{margin-bottom:15px; padding-top:15px; padding-bottom:5px; border-bottom:2px solid #8c734b; display:block; background: #fff; }
#sub_nav dt {display:block; background:url(../images/icon_n_nav_li.png) 145px center no-repeat #fff;}
#sub_nav dt .a{font-size:14px; margin:0 15px; padding:0 10px; height:44px; line-height:44px; border-bottom:1px solid #e7e4e4; display:block; color:#333;}
#sub_nav dt .a.on_border {border:none !important;}
#sub_nav dt:hover, #sub_nav dt.on{color:#fff; background:url(../images/icon_n_nav_li.png) 155px center no-repeat #8c734b;}
#sub_nav dt:hover .a{color:#fff; border-bottom:1px solid #8c734b;}
#sub_nav dt.on .a{color:#fff; border-bottom:1px solid #8c734b;}
#sub_nav dt, #sub_nav dt:hover, #sub_nav dt .a, #sub_nav dt:hover .a, #sub_nav dt.on, #sub_nav dt.on .a{transition:all 0.6s ease; -webkit-transition:all 0.6s ease; -moz-transition:all 0.6s ease; -ms-transition:all 0.6s ease; -o-transition:all 0.6s ease;}

/* 内页左侧图片链接 */
.left_img_link{width:100%}
.left_img_link li{height:75px; margin-bottom:10px; border:1px solid #b6b6b6; -webkit-border-radius:5px; -moz-border-radius:5px; -o-border-radius:5px; border-radius:5px; position:relative}
.left_img_link li a{display:block; width:100%; height:100%;}

.left_img_link li:nth-child(1){background:url(../images/img_linkbj.jpg) no-repeat 0 0}
.left_img_link li:nth-child(2){background:url(../images/img_linkbj.jpg) no-repeat 0 -75px}
.left_img_link li:nth-child(3){background:url(../images/img_linkbj.jpg) no-repeat 0 -150px}

/* 内页右侧 */
#ny_right{width:80%; min-height:245px; margin-bottom:45px; float:right;}

.n_title{position:relative; height:40px; padding-top:10px; margin-bottom:25px; border-bottom:1px solid #d4d6d8;}
.n_title p{line-height:40px; color:#353536; font-size:15px;}
.n_add{position:absolute; right:0; bottom:0; line-height:40px; color:#9b9c9d; background:url(../images/icon_home.png) left center no-repeat; padding-left:18px;}
.n_add b, .n_add a, .n_add i{font-size:12px; color:#9b9c9d;}
.n_add em{font-size:12px; color:#534227; font-style:normal;}
.n_add a:hover{color:#534227; text-decoration:underline;}

.ny_right_cont{padding-bottom:80px; position:relative; min-height:600px;}
.ar_article{font-size:14px; color:#4f5052; line-height:34px; text-indent:2em; text-align:justify}
/*.ar_article p, .ar_article b, .ar_article span{display:block; font-size:14px; color:#4f5052; line-height:34px; text-indent:2em; text-align:justify; margin-bottom:15px}*/
hr{display:block; height:1px; border:0; background:#dcdfe0; margin:2em auto}
.ar_article img{max-width:100%; text-align:center; margin-bottom:15px}

/* 内页右侧新闻 */
.ny_news{overflow:hidden}
.nyimg_box{overflow:hidden; display:flex; display:-webkit-flex; /* Safari */ justify-content:space-between; flex-wrap:wrap;}
.nyimg_box dt{width:30%; background:#F4F4F4}
.nyimgnews{border:1px solid #EEE; height:180px; overflow:hidden; position:relative}
.nyimgnews img{max-width:100%; max-height:100%}
.text_box{width:100%; margin-top:15px; padding-bottom:15px}
.text_box a{font-size:14px; font-weight:bold; color:#333; display:block}
.text_box a:hover{color:#946821}
.text_box i{display:block; font-size:12px; color:#777; line-height:30px}
.text_box b{font-size:12px; color:#555; line-height:22px}

.nynew_list{overflow:hidden; margin:25px auto}
.nynew_list li{overflow:hidden; border-bottom:1px dotted #CCC}
.nynew_list li a:before{content:""; display:block; position:absolute; left:0; top:50%; transform:translate(0,-50%); width:6px; height:2px; background:#946821}
.nynew_list li a{display:block; width:85%; position:relative; float:left; padding-left:20px; font-size:14px; color:#666; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
.nynew_list li a:hover{color:#946821}
.nynew_list li i{float:right; font-size:13px; color:#777;}
.nynew_list li a, .nynew_list li i{line-height:55px}

.page-box{position:absolute; left:50%; transform:translate(-50%,0); bottom:0}
.pages{overflow:hidden; display:inline-block}
.pages a{float:left; color:#555; font-size:13px; padding:5px 15px; margin:0 6px; border:1px solid #CCC; }
.pages a:nth-child(1){margin-left:0!important}
.pages .on{background:#8c734b; border:1px solid #8c734b; color:#FFF}
.pages a:hover{background:#8c734b; border:1px solid #8c734b; color:#FFF}