.main{ line-height: 30px; padding: 5% 0;}

@media screen and (max-width:768px){
    .row{ margin: 0;}
}
.img-cover-4by3{ width: 100%; height: 0; padding-bottom: 50%; position: relative; overflow: hidden;}
.abs-center{ width: 100%; height: 100%; object-fit: cover; left: 0; position: absolute; text-align: center;}
/*.shuiyin{ position: absolute; left: 0; top: 0; z-index: 1; background: url("../images/shuiyin.png") repeat center top; width: 100%; height: 100%; background-size: 100%;}*/



#dituContent label {
  max-width: unset!important;
  text-align: center;
}

@media screen and (max-width:991px){
    .layui-layer{ width: 94% !important; left: 3% !important;}
}


/*头部*/
.header { z-index: 10; background-color: #fff; box-shadow: 0px 0px 20px 0px rgba(4, 0, 0, 0.1); -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; }
.header.scroll_bottom { top: -150px; }

#top_index{ height: auto; margin: 0 auto;}
#logo{ padding-top: 1%; padding-bottom: 1%; text-align: center;}
#logo a{ display: block;}
#logo a img{ max-width: 100%; transition:0.5s; position: relative; z-index: 1; }
#top_tel{ color: #0063d0; transition:0.5s; padding: 0;}
.top_tel_con{ position: relative; z-index: 1; padding: 7% 0 0 0; transition: 0.3s;}
.top_tel_con .pic{ float: left; width: 20%; transition: 0.3s;}
.top_tel_con .pic img{ max-width: 100%;}
.top_tel_con .float-left{ width: 80%; padding-left: 3%; font-size: 14px; color: #686868; line-height: 25px; transition: 0.3s;}
.top_tel_con span{ display: block; font-size: 24px; color: #282828;}
@media screen and (max-width:1440px){
    #logo .font{ display: none !important;}
    .top_tel_con span{ font-size: 22px !important;}
}

@media screen and (max-width:991px){
    #top_index{ padding: 0; width: 100%;}
    #logo{ padding: 2%; text-align: left;}
    #logo a img{ max-width: 35%;}
}

#nav{ height: auto; transition:0.3s; padding-top: 1.5%; text-align: center;}
#nav li{ display: inline-block; width: 13%; height: 50px; line-height: 50px; font-size: 18px; font-weight: normal; color: #282828; text-align: center; transition:0.5s;}
#nav li a{ display: inline-block; position: relative; z-index: 1; color: #282828;}
#nav li:hover a{ color: #c3002f;}
#nav li a:after { content: '';  width: 100%; height: 3px; position: absolute; left: 0; bottom: 0; background-color: #c3002f; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; -webkit-transform: scaleX(0); -moz-transform: scaleX(0); -ms-transform: scaleX(0); -o-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: left; -moz-transform-origin: left; -ms-transform-origin: left; -o-transform-origin: left; transform-origin: left; left: 0; }
#nav li:hover a::after { -webkit-transform: scaleX(1); -moz-transform: scaleX(1); -ms-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1); -webkit-transform-origin: right; -moz-transform-origin: right; -ms-transform-origin: right; -o-transform-origin: right; transform-origin: right; right: 0; }

@media (min-width: 1200px) and (max-width: 1440px){
  #nav li{ font-size: 15px;}
}
@media (min-width: 768px) and (max-width: 1200px){
  #nav{ margin-top: 0;}
  #nav li{ font-size: 15px;}
}

#banner img{ width: 100%;}
#banner .swiper-pagination{ bottom: 3%;}
#banner .swiper-pagination-bullet{ width: 20px; height: 5px; border-radius: 1px; transition:0.3s; opacity: 0.3;}
#banner .swiper-pagination-bullet-active{ width: 60px; background: #c3002f; opacity: 1;}
#banner .swiper-button-next:after,#banner .swiper-button-prev:after{ display: none;}
#banner .swiper-button-next i,#banner .swiper-button-prev i{ color: #fff; font-size: 40px;}
#banner .swiper-button-next,#banner .swiper-button-prev{ background: rgba(0,0,0,0.2); width: 50px; height: 80px; line-height: 80px;}
#banner .swiper-button-next{ right: 5%;}
#banner .swiper-button-prev{ left:5%; }

#mobile_banner img{ width: 100%;}
#mobile_banner .swiper-pagination-bullet-active{ background: #d33f23;}

@media screen and (max-width:1440px){
}
@media screen and (max-width:1200px){
    #banner .gallery-thumbs .swiper-slide span{ font-size: 12px;}
}


/*底部*/
#end_nr_bj{ background: #fff; width: 100%; height: auto; overflow: hidden; color: #999999; position: relative;}
#end_nr_bj a{ color: #999999; transition: 0.3s; position: relative;}
#end_nr_bj a:hover{ color: #c3002f;}
#end_nr_bj a:after{z-index:1;content: ''; position: absolute; left: 0; bottom: 0; display: block; height:5px; background-color: rgba(51, 51, 51, .1);width:100%; -webkit-transition: transform .5s; -moz-transition: transform .5s; -ms-transition: transform .5s; -o-transition: transform .5s; transition: transform .5s; -webkit-transform: scaleX(0); transform: scaleX(0);-webkit-transform-origin: right center;transform-origin: right center;}
#end_nr_bj a:hover::after{ -webkit-transform-origin: left center;transform-origin: left center;  -webkit-transform: scaleX(1); -moz-transform: scaleX(1); -ms-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1);}

#end_nr_bj .main{ padding: 2% 0; border-top: 1px solid #ececec;}
#end_nr_bj .main .float-left ul{ float: left; width: 18%;}
#end_nr_bj .main .float-left ul:last-of-type{ width: 28%;}
#end_nr_bj .main .float-left ul .tit{ font-size: 16px; color: #333333; position: relative; height: 40px; margin-bottom: 10px;}
#end_nr_bj .main .float-left ul .tit:before{ position: absolute; left: 0; bottom: 0; content: ''; height: 2px; background: #d1d1d1; width: 30px; transition:0.3s;}
#end_nr_bj .main .float-left ul li{ line-height: 30px; transition:0.3s;}
#end_nr_bj .main .float-left ul:hover .tit:before{ width: 60px;}
#end_nr_bj .main .float-right{ text-align: center;}
#end_nr_bj .main .float-right img{ max-width: 60%;}
#end_nr_bj .main .float-right span{ display: block; padding-top: 3%;}
@media screen and (max-width:1400px){
    #end_nr_bj .main .float-left ul{ padding: 0 3%;}
}
@media screen and (max-width:1200px){
    #end_nr_bj .main .float-left ul{ font-size: 12px;}
}

@media screen and (max-width:1000px){
    #end_nr_bj .main .float-left ul:last-of-type{ width: 100%;}
}
@media screen and (max-width:768px){
    #end_nr_bj .main .float-right{ padding-top: 10%;}
}

#end_line{ height: auto; padding: 10px 0; line-height: 30px; color: #999999; border-top: 1px solid #ececec;}
#end_line a{ color: #999999;}
#end_line a:hover{ color: #000;}

.footer_zx{ height:60px; overflow: hidden; right:0; bottom:0; z-index: 20; width:100%; line-height: 25px; position: fixed; background-color:#1e2830;}
.footer_zx a{ color:#fff !important; display: block; width: 50%; height: 100%; float: left; text-align: center; background-color:#1e2830;}
.footer_zx a:last-of-type{ background: #c3002f;}
.footer_zx i{ font-size: 28px; padding: 2% 0 1%; font-weight: normal;}
.footer_zx p{font-size: 13px;}
.kb50{ height: 60px;}
@media screen and (max-width:768px){
    .footer_zx i{ padding: 4% 0 1%;}
}


#end_yqlj{ background: #f5f5f5; width: 100%; line-height: 30px; padding: 10px 0; color: #999; position: relative;}
#end_yqlj .float-left{ line-height: 65px;}
#end_yqlj .float-left p{ float: left; color: #c3002f; font-size: 20px;}
#end_yqlj .float-left a{ color: #999; font-size: 16px; padding: 0 2%;}
#end_yqlj .float-right p{ color: #666666;}
#end_yqlj .float-right span{ color: #c20023; font-size: 30px; font-family: Bahnschrift;}


#end_logo{ padding: 2% 0; background: #fff; position: relative;}
#end_logo .float-left img{ max-width: 100%;}
#end_logo ul li{ height: 48px; line-height: 48px; color: #666666;}
#end_logo ul li p{ float: left; width: 25px; height: 25px; margin: 10px 10px 0 0 !important; background: #c3002f; border-radius: 100%; text-align: center; line-height: 25px; color: #fff;}
@media screen and (max-width:1440px){
}




/*首页*/
#gsjj .jj_tit{ position: relative;}
#gsjj .jj_tit:before{ position: absolute; content: 'about us'; font-family: Impact; font-size: 150px; top: 30%; color: rgba(40,40,40,0.02); text-transform: uppercase; font-weight: bold;}
#gsjj .jj_tit h2{ color: #282828; font-size: 36px;}
#gsjj .jj_tit h2 span{ color: #c3002f; font-size: 48px; font-weight: bold;}
#gsjj .jj_tit p{ color: #282828; font-size: 24px; font-weight: 100;}
#gsjj .content{ color: #666666; padding: 7% 0 5%; line-height: 38px; font-size: 16px;}

#gsjj .more{ color: #c3002f; padding: 0;}
#gsjj .more .icon-more{float: right;}
#gsjj .more .circle {width: 2rem; height: 2rem; border: 1px solid rgba(0, 0, 0, 0.5); border-radius: 50%; position: relative;z-index: 3; display: block; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; }
#gsjj .more .circle::before { width: 4px; height: 0; border-bottom: 1px solid rgba(0, 0, 0, 0.5); content: ''; position: absolute; margin: auto; top: 0; bottom: 0; left: 7px; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; -webkit-transform: scaleX(12); -moz-transform: scaleX(12); -ms-transform: scaleX(12); -o-transform: scaleX(12); transform: scaleX(12); -webkit-transform-origin: right; -moz-transform-origin: right; -ms-transform-origin: right; -o-transform-origin: right; transform-origin: right; }
#gsjj .more .circle::after { content: ''; display: block; width: 5px; height: 5px; position: absolute; margin: auto; top: 0; bottom: 0; left: 0; right: 0; background-color: #666666; border-radius: 50%; }
#gsjj .more:hover .icon-more .circle { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); }
#gsjj .more:hover .icon-more .circle::before { -webkit-transform: scaleX(12) translateX(100%); -moz-transform: scaleX(12) translateX(100%); -ms-transform: scaleX(12) translateX(100%); -o-transform: scaleX(12) translateX(100%); transform: scaleX(12) translateX(100%); }

.gsjj_lb{ padding-top: 5%;}
.gsjj_lb li{ text-align: center;}
.gsjj_lb li p{ color: #c3002f; font-size: 60px; min-height: 44px; font-family: Bahnschrift; letter-spacing: -3px; position: relative; display: inline-block; background: url("../image/yuan.png") no-repeat top right; transition: 0.3s;}
.gsjj_lb li p sup{ color: #333333; font-size: 16px; position: absolute; right: -60%; top: 0; letter-spacing: 0;}
.gsjj_lb li span{ display: block; font-size: 16px; padding-top: 5px;}
/*#gsjj ul li:hover p{ background: url("../image/yuan.png") no-repeat top left;}*/

#gsjj_pic{ text-align: center;}
#gsjj_pic img{ max-width: 100%;}

@media screen and (max-width:1440px){
    .gsjj_lb li p{ font-size: 50px;}
    .gsjj_lb li p sup{ font-size: 14px;}
    .gsjj_lb li span{ font-size: 14px;}
    #gsjj .content{ font-size: 15px;}
}
@media screen and (max-width:1200px){
    #gsjj .jj_tit h2{ font-size: 26px;}
    #gsjj .jj_tit h2 span{ font-size: 36px;}
    #gsjj .jj_tit p{ font-size: 20px;}
    #gsjj .jj_tit:before{ font-size: 100px;}
    #gsjj .content{ font-size: 14px; line-height: 30px; padding: 5% 0;}
    .gsjj_lb li{ line-height: 30px;}
    .gsjj_lb li p{ font-size: 42px; background: none; min-height: auto;}
    .gsjj_lb li p sup{ right: -80%;}
}
@media screen and (max-width:991px){
    #gsjj_pic{ margin-bottom: 3%;}
}

@media screen and (max-width:768px){
    #gsjj .jj_tit h2{ font-size: 22px;}
    #gsjj .jj_tit h2 span{ font-size: 36px;}
    #gsjj .jj_tit p{ font-size: 16px;}
    #gsjj .jj_tit:before{ font-size: 88px;}
    .gsjj_lb li{ margin-bottom: 5%; line-height: 25px;}
    .gsjj_lb li p{ font-size: 40px;}
}


.hui{ background: #f5f5f5;}
.tit_in{ position: relative; text-align: center;}
.tit_in p{ float: left; width: 45px; height: 45px; background: #c3002f; border-radius: 100%; text-align: center; line-height: 45px;}
.tit_in span{ position: relative; float: left; padding: 0 20px; color: #373737; font-size: 30px; line-height: 45px;}
.tit_in span:before{ position: absolute; content: ''; background: #aeaeae; width: 1px; height: 50%; right: 0; top: 25%; }

.tit_cp li{ float: left; padding: 0 1%; line-height: 45px;}
.tit_cp li a{ display: inline-block; position: relative; color: #666666;}
.tit_cp li a:after{z-index:1;content: ''; position: absolute; left: 0; bottom: 15px; display: block; height:5px; background-color: rgba(195, 0, 47, .2);width:100%; -webkit-transition: transform .5s; -moz-transition: transform .5s; -ms-transition: transform .5s; -o-transition: transform .5s; transition: transform .5s; -webkit-transform: scaleX(0); transform: scaleX(0);-webkit-transform-origin: right center;transform-origin: right center;}
.tit_cp li a:hover{ color: #c3002f;}
.tit_cp li a:hover::after{ -webkit-transform-origin: left center;transform-origin: left center;  -webkit-transform: scaleX(1); -moz-transform: scaleX(1); -ms-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1);}
.tit_font{ float: left; padding-left: 3%; height: 45px; line-height: 45px; color: #666666; font-size: 15px;}
@media screen and (max-width:1200px){
    .tit_cp li{ font-size: 12px; padding: 0 0.5%;}
}

@media screen and (max-width:991px){
    .tit_in span:before{ display: none;}
    .tit_in p{ width: 35px; height: 35px; line-height: 35px;}
    .tit_in p img{ max-width: 80%;}
    .tit_in span{ font-size: 20px; line-height: 35px;}
    .tit_cp li{ line-height: 35px;}
}



#kjcx{position: relative; margin-top: 3%;}
#kjcx .swiper-container {
    width: 100%;
    height: 100%;
}
#kjcx .swiper-slide {
    transition:0.3s;
    position: relative;
    padding-bottom: 40px;
    /* Center slide text vertically */
    flex-direction: column;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
#kjcx .swiper-slide .pic{ display: block; width: 100%; height: 0; padding-bottom: 75%; position: relative; overflow: hidden;}
#kjcx .swiper-slide .pic img{ width: 100%; height: 100%; object-fit: cover; left: 0; position: absolute; transition:0.3s;}
#kjcx .swiper-slide .tit{ position: absolute; bottom: 0; left: 5%; height: auto; line-height: 30px; padding: 3% 0; background: #fff; width: 90%; text-align: center; transition: 0.3s;}
#kjcx .swiper-slide .tit p{ display: inline-block; font-size: 18px; color: #1e2830;}
#kjcx .swiper-slide .tit span{ display: block; position: relative; text-transform: uppercase; font-size: 14px; color: #dfdfdf;}
#kjcx .swiper-slide .tit span:before{ position: absolute; width: 20%; height: 1px; bottom: 20%; left: 40%; content: ''; background: #dfdfdf;}
#kjcx .swiper-slide:hover img{ transform: scale(1.1);}
#kjcx .swiper-slide:hover .tit{ background-color: #c3002f;}
#kjcx .swiper-slide:hover .tit p{ color: #fff;}

#kjcx .swiper-button-next:after,#kjcx .swiper-button-prev:after{ display: none;}
#kjcx .control-bar .prev_next{ right: 0; opacity: 1; z-index: 8;}
#kjcx .control-bar .prev_next.prev{ left: 0; opacity: 1; z-index: 8;}
#kjcx .control-bar .w-btn { border-radius: 0; width: 35px; height: 35px; margin: 2px; text-align: center; line-height: 35px; background-color: #8a8a8a; position: relative; color: #eeeeee; cursor: pointer; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; }
#kjcx .control-bar .w-btn:hover { background-color: #c3002f; color: #ffffff; }
#kjcx .control-bar .prev_next i { display: block; width: 0; position: relative; height: 1px; background-color: CurrentColor; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; }
#kjcx .control-bar .prev_next i::before, #kjcx .control-bar .prev_next i::after { content: ''; display: block; width: 10px; height: 1px; background-color: CurrentColor; position: absolute; margin: auto; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; }
#kjcx .control-bar .prev_next i::before { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }
#kjcx .control-bar .prev_next i::after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }
#kjcx .control-bar .prev_next.next i { margin-left: 10px; }
#kjcx .control-bar .prev_next.next i::before, #kjcx .control-bar .prev_next.next i::after { right: 0; transform-origin: right; }
#kjcx .control-bar .prev_next.prev i { margin-right: 10px; }
#kjcx .control-bar .prev_next.prev i::before, #kjcx .control-bar .prev_next.prev i::after { left: 0; transform-origin: left; }
#kjcx .control-bar .prev_next:hover i { width: 20px; margin: 0; }
#kjcx .control-bar .prev_next:hover i::before, #kjcx .control-bar .prev_next:hover i::after { width: 8px; }
#kjcx .control-bar .more i { width: 15px; height: 1px; background-color: CurrentColor; position: relative; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; }
#kjcx .control-bar .more i::before, #kjcx .control-bar .more i::after { content: ''; display: block; width: 100%; height: 100%; background-color: CurrentColor; position: absolute; margin: auto; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; }
#kjcx .control-bar .more i::before { top: -6px; }
#kjcx .control-bar .more i::after { bottom: -6px; }
#kjcx .control-bar .more:hover i { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); width: 2px; height: 2px; }

@media screen and (max-width:768px){
}



#hxys{ background: url("../image/ysbj.jpg") no-repeat center fixed;}
#hxys .main{ padding-top: 0;}
#huanjing .swiper-container { width: 100%; height: auto; margin-left: auto; margin-right: auto;}
#huanjing .swiper-slide { background-size: cover; background-position: center; position: relative;}

#huanjing .gallery-top { height: auto; width: 100%; margin: 0 0 4%; position: relative;}
#huanjing .gallery-top .ystit{ position: absolute; left: 0; top: 0; color: #fff; line-height: 40px; padding-top: 10%; z-index: 5;}
#huanjing .gallery-top .ystit h2{ color: #d70022; font-size: 30px;}
#huanjing .gallery-top .ystit span{ color: rgba(255,255,255,0.2); font-family: Arial; font-weight: 100; font-size: 32px; text-transform: uppercase;}
#huanjing .gallery-top .ystit p{ color: rgba(255,255,255,0.8); text-transform: uppercase; font-size: 20px;}
#huanjing .gallery-top .row{ margin: 0;}
#huanjing .gallery-top .swiper-slide .pic{ padding: 0; text-align: center;}
#huanjing .gallery-top .swiper-slide .pic img{ max-width: 100%;}
#huanjing .gallery-top .swiper-slide .font{ padding: 20% 0 0; position: relative; color: #fff;}
#huanjing .gallery-top .swiper-slide .font ul li{ color: rgba(255,255,255,0.6); font-size: 16px; line-height: 50px;}
#huanjing .gallery-thumbs { height: auto; box-sizing: border-box; background: #fff;}
#huanjing .gallery-thumbs .swiper-slide { cursor: pointer; transition:0.3s; padding: 2% 2% 2% 7%; border-right: 1px solid #ededed;}
#huanjing .gallery-thumbs .swiper-slide:after{ position: absolute; left: -100%; top: -100%; background: url("../image/ys_bj1.png") no-repeat left top; width: 56px; height: 35px; content: ''; transition: 0.5s;}
#huanjing .gallery-thumbs .swiper-slide:before{ position: absolute; right: -100%; bottom: -100%; content: ''; background: url("../image/ys_bj2.png") no-repeat left top; width: 39px; height: 36px; transition: 0.5s;}
#huanjing .gallery-thumbs .swiper-slide:last-of-type{ border: none;}
#huanjing .gallery-thumbs .swiper-slide p{ float: left; width: 55px; height: 55px; text-align: center; line-height: 55px; border-radius: 100%; background: #c3002f; color: #fff;}
#huanjing .gallery-thumbs .swiper-slide p i{ font-size: 30px;}
#huanjing .gallery-thumbs .swiper-slide span{ display: block; float: left; width: 50%; padding-left: 5%; color: #333333; font-size: 16px; transition: 0.3s; position: relative; line-height: 30px;}
#huanjing .gallery-thumbs .swiper-slide-thumb-active{ background: #c3002f; border: none;}
#huanjing .gallery-thumbs .swiper-slide-thumb-active:after{ left: 0; top: 0;}
#huanjing .gallery-thumbs .swiper-slide-thumb-active:before{ right: 0; bottom: 0;}
#huanjing .gallery-thumbs .swiper-slide-thumb-active p{ background: #fff; color: #c3002f; }
#huanjing .gallery-thumbs .swiper-slide-thumb-active span{ color: #fff;}
@media screen and (max-width:1440px){
    #huanjing .gallery-thumbs .swiper-slide{ padding: 2% 3%;}
    #huanjing .gallery-thumbs .swiper-slide span{ width: 70%;}
}
@media screen and (max-width:1200px){
}
@media screen and (max-width:991px){
    #huanjing .gallery-top .swiper-slide .font{ padding-top: 25%;}
    #huanjing .gallery-top .swiper-slide .font ul li{ line-height: 40px; font-size: 15px;}
    #huanjing .gallery-thumbs .swiper-slide span{ width: 75%;}
}

@media screen and (max-width:768px){
    #huanjing .gallery-top .ystit h2{ font-size: 22px;}
    #huanjing .gallery-top .ystit span{ font-size: 20px;}
    #huanjing .gallery-top .swiper-slide .font{ padding-top: 32%;}
    #huanjing .gallery-top .swiper-slide .font ul li{ line-height: 30px; font-size: 14px;}
}



#xinwen{ margin-top: 3%;}
#xinwen .swiper-container {
    width: 100%;
    height: 100%;
    position: relative;
}
#xinwen .swiper-slide {
    text-align: left;
    transition: 0.3s;
    position: relative;
    cursor: pointer;
    background: #f5f5f5;
    padding-bottom: 17%;

    /* Center slide text vertically */
    flex-direction: column;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
#xinwen .swiper-slide .pic{ display: block; width: 100%; height: 0; padding-bottom: 60%; position: relative; overflow: hidden; transition:0.3s;}
#xinwen .swiper-slide .pic img{ width: 100%; height: 100%; object-fit: cover; left: 0; position: absolute; transition:0.3s;}
#xinwen .swiper-slide .xw_con{ transition: 0.3s; background: #f5f5f5; width: 100%; padding: 5%; position: absolute; height: 45%; left: 0; bottom: 0; z-index: 1;}
#xinwen .swiper-slide .xw_con p{ text-align: left; width: 100%; color: #333333; font-size: 24px; height: 50px; line-height: 50px; transition:0.3s; white-space: nowrap; text-overflow:ellipsis; overflow: hidden;}
#xinwen .swiper-slide .xw_con span{ display: block; text-align: left; width: 100%; color: #999999; font-size: 14px;}
#xinwen .swiper-slide .xw_con .content{ color: #666666; font-size: 16px; padding: 3% 0;}
#xinwen .swiper-slide .xw_con .more{ float: left; color: #fff; background: #c3002f; padding: 0 7%; margin-top: 2%; height: 40px; line-height: 40px; transition: 0.3s; opacity: 0;}
#xinwen .swiper-slide:hover img{ transform: scale(1.1);}
#xinwen .swiper-slide:hover .xw_con{ height: 100%; padding: 15% 8%;}
#xinwen .swiper-slide:hover .xw_con .content{ line-height: 35px;}
#xinwen .swiper-slide:hover .xw_con .more{ opacity: 1; margin-top: 5%;}
@media screen and (max-width:1440px){
    #xinwen .swiper-slide .xw_con p{ font-size: 18px; height: 40px; line-height: 40px;}
    #xinwen .swiper-slide .xw_con .content{ font-size: 14px; padding: 1% 0;}
}
@media screen and (max-width:991px){
    #xinwen .swiper-slide .xw_con p{ font-size: 16px; height: 30px; line-height: 30px;}
}
@media screen and (max-width:768px){
    #xinwen .swiper-slide .xw_con .content{ font-size: 12px; padding: 0; line-height: 25px;}

}





/*公司简介*/
#gsjj_con .tit{ position: relative; background: url("../image/jj_logo.png") no-repeat right center;}
#gsjj_con .tit:before{ position: absolute; content: 'about us'; font-family: Impact; font-size: 72px; top: 15%; color: rgba(40,40,40,0.1); text-transform: uppercase; font-weight: bold;}
#gsjj_con .tit h2{ color: #282828; font-size: 36px;}
#gsjj_con .tit h2 span{ color: #c3002f; font-size: 48px; font-weight: bold;}
#gsjj_con .tit p{ color: #282828; font-size: 16px; text-transform: uppercase; opacity: 0.5; line-height: 20px; padding-top: 1.5%;}
#gsjj_con .con{ padding: 0 2% 2% 0; color: #666666; height: 385px; overflow-y: scroll; margin-top: 3%;}
#gsjj_con .con::-webkit-scrollbar{
    width:3px;
    height:6px ;
}
#gsjj_con .con::-webkit-scrollbar-track{
    box-shadow: inset 0 0 6px transparent;
    background: #e8e8e8;
}
#gsjj_con .con::-webkit-scrollbar-thumb{
    background: #c3002f;
}
@media screen and (max-width:1440px){
    #gsjj_con .tit h2 span{ font-size: 38px;}
    #gsjj_con .tit h2{ font-size: 26px;}
    #gsjj_con .tit p{ font-size: 12px; padding: 0;}
}
@media screen and (max-width:1200px){
    #gsjj_con .tit{ background: none;}
    #gsjj_con .con{ height: 278px;}
}



#whbj{ background: url("../image/wh_bj.jpg") no-repeat center;}
#whbj .tit_in span,#whbj .tit_font{ color: #fff;}
.whnr .col-12{ padding: 0 0.8%;}
.whnr .col-6{ padding: 0 0.5%;}

.wh_font{ background: #fff; padding: 10.2% 15%; text-align: center; transition: 0.3s; cursor: pointer;}
.wh_font.p1{ padding: 50% 15%;}
.wh_font p{ color: #c3002f; font-size: 26px;}
.wh_font i{ color: #c40331; font-size: 30px;}
.wh_font span{ display: block; padding-top: 1%; color: #666666; font-size: 16px;}
.wh_font.p1 span{ padding-top: 5%;}
.wh_font.p2{ padding: 17% 15%;}
.wh_font:hover{ background: rgba(195,0,47,0.7);}
.wh_font:hover p,.wh_font:hover i,.wh_font:hover span{ color: #fff;}
@media screen and (max-width:1440px){
    .wh_font.p1{ padding: 40% 15%; margin-bottom: 2%;}
    .wh_font.p2{ padding: 16% 15%;}
}
@media screen and (max-width:1200px){
    .wh_font.p2{ padding: 15% 15%;}
}
@media screen and (max-width:991px){
    .whnr,.whnr .row{ margin: 0;}
    .wh_font.p1{ padding: 5% 15%; margin-bottom: 2%;}
    .wh_font.p2{ padding: 10% 15%;}
}
@media screen and (max-width:768px){
    .wh_font p{ font-size: 22px;}
    .wh_font span{ font-size: 12px;}
}


#zzry_bj{ background: url("../image/zzry_bj.jpg") no-repeat center;}
#zzry_bj .tit_in span,#zzry_bj .tit_font{ color: #fff;}


#rybj{ position: relative; padding: 0; margin-top: 3%;}
#rybj .swiper-container {
    width: 100%;
    height: 100%;
}

#rybj .swiper-slide {
    text-align: center;
    background: url("../image/rybj.png") no-repeat center top;
    background-size: 100% 100%;
    padding: 13px;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
#rybj .swiper-slide .pic{ width: 100%; height: 0; padding-bottom: 140%; position: relative; overflow: hidden;}
#rybj .swiper-slide .pic img{ width: 100%; height: 100%; object-fit: cover; left: 0; position: absolute; text-align: center; transition:0.3s;}
#rybj .swiper-slide:hover .pic img{ transform: scale(1.1);}
#rybj .swiper-button-next:after,#rybj .swiper-button-prev:after{ display: none;}
#rybj .swiper-button-next,#rybj .swiper-button-prev{ position: absolute; background: none; width: 60px; height: 60px; top: 50%;}
#rybj .swiper-button-next{ right: -8%;}
#rybj .swiper-button-prev{ left: -8%;}
#rybj .swiper-button-next i,#rybj .swiper-button-prev i{ font-size: 60px; color: #bbbbbb; transition:0.3s;}
#rybj .swiper-button-next:hover i,#rybj .swiper-button-prev:hover i{ color: #c3002f;}
@media screen and (max-width:1440px){
    #rybj .swiper-button-next,#rybj .swiper-button-prev{ display: none;}
}

@media screen and (max-width:765px){
    #rybj{ background-size: 100%;}
}

.rymore{ background: #c3002f; height: 40px; line-height: 40px; color: #fff; border-radius: 5px; margin: 3% auto 0; text-align: center; width: 15%;}

#qyfz .swiper-container { width: 100%; height: auto; margin-left: auto; margin-right: auto;}
#qyfz .swiper-slide { background-size: cover; background-position: center; position: relative;}
#qyfz .gallery-top { height: auto; width: 100%; padding: 3% 0 2%;}
#qyfz .gallery-top .swiper-slide{ padding: 0;}
#qyfz .gallery-top .swiper-slide .tit{ width: 100%; height: auto; transition: 0.3s; border-right: 1px dashed #e2e2e2;}
#qyfz .gallery-top .swiper-slide .tit .bt p{ color: #c3002f; font-size: 30px; font-weight: bold;}
#qyfz .gallery-top .swiper-slide .tit .bt span{ color: #999999; font-size: 18px; line-height: 40px; text-transform: uppercase; position: relative; display: block;}
#qyfz .gallery-top .swiper-slide .tit .bt span:before{ position: absolute; left: 0; bottom: 0; background: #e2e2e2; content: ''; width: 5%; height: 2px;}
#qyfz .gallery-top .swiper-slide .tit .con{ padding-top: 10%;}
#qyfz .gallery-top .swiper-slide .tit .con p{ color: #c3002f; font-size: 24px; font-weight: bold;}
#qyfz .gallery-top .swiper-slide .tit .con span{ color: #333333; font-size: 15px;}
#qyfz .gallery-top .swiper-slide .font{ padding-left: 5%; color: #666666; font-size: 16px; line-height: 40px;}

#qyfz .gallery-thumbs { height: auto; text-align: center; padding: 0 5%; box-sizing: border-box; position: relative;}
#qyfz .gallery-thumbs:before{ position: absolute; content: ''; left: 30px; bottom: 50px; height: 1px; width: 95.5%; border-bottom: 1px dashed #e2e2e2;}
#qyfz .gallery-thumbs .swiper-slide { height: auto; font-size: 14px; cursor: pointer; transition: 0.3s; text-align: center;}
#qyfz .gallery-thumbs .swiper-slide .bz{ display: inline-block; position: relative; width: 30px; height: 30px; margin-bottom: 2%;}
#qyfz .gallery-thumbs .swiper-slide .bz::before{ position: absolute; content: ''; left: 0; top: 0; width: 100%; height: 100%; border-radius: 100%; background: rgba(226,226,226,0.2); transition: 0.3s;}
#qyfz .gallery-thumbs .swiper-slide .bz::after{ position: absolute; content: ''; left: 15%; top: 15%; width: 70%; height: 70%; border-radius: 100%; background: rgba(226,226,226,1); transition: 0.3s;}
#qyfz .gallery-thumbs .swiper-slide .bz i{ position: relative; z-index: 1; color: #fff; font-size: 8px; transition: 0.3s;}
#qyfz .gallery-thumbs .swiper-slide h4{ color: #666666; font-size: 18px; line-height: 50px; transition: 0.3s;}
#qyfz .gallery-thumbs .swiper-slide span{ display: block; color: #666666; font-size: 16px;}
#qyfz .gallery-thumbs .swiper-slide-thumb-active .bz::before{ background: rgba(195,0,47,0.2);}
#qyfz .gallery-thumbs .swiper-slide-thumb-active .bz::after{ background: rgba(195,0,47,1);}
#qyfz .gallery-thumbs .swiper-slide-thumb-active i{ color: #2446a3; font-size: 50px;}
#qyfz .gallery-thumbs .swiper-slide-thumb-active h4{ color: #c3002f; font-size: 18px; font-weight: bold;}
#qyfz .gallery-thumbs .swiper-slide-thumb-active span{ color: #c3002f;}

#qyfz .swiper-button-next,#qyfz .swiper-button-prev{ top: 58%;}
#qyfz .swiper-button-next:after,#qyfz .swiper-button-prev:after{ display: none;}
#qyfz .swiper-button-next i,#qyfz .swiper-button-prev i{ font-size: 25px; color: #999999; transition: 0.3s;}
#qyfz .swiper-button-next{ right: 0;}
#qyfz .swiper-button-prev{ left: 0;}
#qyfz .swiper-button-next:hover i,#qyfz .swiper-button-prev:hover i{ color: #c3002f;}

@media screen and (max-width:768px){
    #qyfz .gallery-top .swiper-slide .pic{ padding-bottom: 65%;}
    #qyfz .gallery-top .swiper-slide{ padding: 0;}
    #qyfz .swiper-button-next,#qyfz .swiper-button-prev{ display: none;}
    #qyfz .gallery-top .swiper-slide .font{ padding: 3% !important;}
}





/*公共*/
#zi_banner{ width: 100%; height: auto; position: relative;}
#zi_banner .pic{ text-align: center; overflow: hidden;}
#zi_banner .pic img{ width: 100%;}
#zi_banner .main{ position: absolute; left: 0; top: 0; z-index: 1; color: #fff; width: 100%; padding-top: 12%;}
#zi_banner .main .container{ position: relative;}
#zi_banner .main .container h2{ font-size: 40px; position: absolute; top: -8%; z-index: 1;}
#zi_banner .main .container i{ font-size: 70px; font-family: Impact; opacity: 0.05; text-transform: uppercase;}
#zi_banner .main .container p{ font-size: 14px; line-height: 50px; padding-top: 1%;}
#zi_banner .main .container p a{ color: #fff; padding: 0 5px;}
@media screen and (max-width:1200px){
    #zi_banner .pic img{ width: 150%;}
    #zi_banner .main{ padding-top: 16%;}
}
@media screen and (max-width:991px){
    #zi_banner .pic img{ width: 200%;}
    #zi_banner .main{ padding-top: 22%;}
}
@media screen and (max-width:768px){
    #zi_banner .pic img{ width: 300%; margin-left: -50%;}
    #zi_banner .main{ padding-top: 35%;}
    #zi_banner .main .container h2{ font-size: 30px;}
    #zi_banner .main .container i{ font-size: 50px;}
}

#home{ height: auto; background: #f5f5f5;}
#home ul li{ float: left; height: auto; padding: 15px 2%; text-align: center; color: #cccccc; font-size: 14px; position: relative;}
#home ul li a{ display: inline-block; border-radius: 5px; padding: 0 10px; height: 40px; line-height: 40px; color: #666; transition: 0.3s;}
#home ul li:before{ position: absolute; right: 0; top: 40%; content: ''; width: 1px; height: 20%; background: #ccc;}
#home ul li:last-of-type:before{ display: none;}
#home ul li:hover a{ background: #c30e24; color: #fff;}

#lxwm_in li{ background: #f5f7fa; text-align: center; padding: 10% 3%;}
#lxwm_in li .tit{ font-size: 22px; color: #666;}
#lxwm_in li .pic{ padding: 8% 0;}
#lxwm_in li .con{ color: #7d8084;}
@media screen and (max-width:991px){
    #lxwm_in li{ margin-bottom: 2%;}
    #home ul li{ width: 25%; font-size: 14px;}
}
@media screen and (max-width:768px){
    #home ul li{ width: 25%; font-size: 14px; line-height: 40px; padding: 0;}
    #home ul li a{ height: 40px; line-height: 40px;}
}
.in_title{ line-height: 40px; color: #747474; font-size: 16px;}
.in_title p{ font-size: 30px; color: #3e3e3e;}



.pro-sider { float: none; background: #f5f5f5; padding: 15px 25px;}
.pro-sider .in-title { padding: 5% 0; overflow: hidden; border-bottom: 1px solid #e2e2e2; color: #333333; font-size: 26px;}
.pro-sider-ul { height: auto; text-align: left; padding: 15px 0;}
.pro-sider-ul li{ height: 60px; line-height: 60px; font-size: 18px; transition: 0.3s; background: url("../image/cp_fk.png") no-repeat 5px center; padding-left: 35px;}
.pro-sider-ul li a{ color: #282828;}
.pro-sider-ul li:hover{ background: url("../image/cp_fk1.png") no-repeat 5px center;}
.pro-sider-ul li#li-on{ background: url("../image/cp_fk1.png") no-repeat 5px center;}
.pro-sider-ul li#li-on a{ color: #c30e24;}
.pro-sider .zxbj{ height: 50px; background: #c30e24; transition: 0.3s; border-radius: 5px; line-height: 50px; text-align: center; color: #fff; font-size: 18px;}
.pro-sider .zxbj:hover{ background: #333;}
@media screen and (max-width:1440px){
    .pro-sider .in-title{ font-size: 20px;}
    .pro-sider-ul li,.pro-sider .zxbj{ font-size: 16px;}
}
@media screen and (max-width:1200px){
    .pro-sider .in-title{ font-size: 24px;}
}
@media screen and (max-width:1000px){
}



.grid {

    position: relative;

    /* fluffy */
    margin: 0 auto;
    width: 100%;
    /* end fluffy */
}

.grid-item {
    position: absolute;
    background: #f5f5f5;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #efefef;

    /* fluffy */
    opacity: 0;
    width: 32%;
    height: auto;
    /* end fluffy */

}
.grid-item .pic{ background: #fff; text-align: center;}
.grid-item img{ max-width: 100%; height: 300px;}
.grid-item .tit{ text-align: center; height: 50px; line-height: 50px;}
/* mq */

@media (max-width: 991px) {
    .grid-item {
        width: 45%;
    }
}
@media (max-width: 600px) {
    .grid-item {
        width: 100%;
    }
}
@media screen and (max-width:1200px){
    .grid-item img{ height: 225px;}
}


.news01 {padding: 0;}
.news01 li{ margin-bottom: 7%;}
.news01 .imgbox {width: 100%; height: 0; padding-bottom: 70%; position: relative; overflow: hidden;}
.news01 .imgbox img { object-fit: cover; left: 0; position: absolute; text-align: center; height:100%; width:100%; transition: 0.3s;}
/*.news01 .shuiyin{position: absolute; background: url("../images/shuiyin.png") no-repeat center; z-index: 1; left: 0; top: 0; width: 100%; height: 100%;}*/
.news01 .imgbox1 {width: 100%; height: 0; padding-bottom: 80%; position: relative; overflow: hidden;}
.news01 .imgbox1 p { text-align: center; left: 0; position: absolute; height:100%; width:100%; transition: 0.3s;}
.news01 .imgbox1 p img{ max-width: 100%; max-height: 100%; transition:0.3s;}
.news01 .slide:hover .imgbox img {transform: scale(1.1);}

.news01 .txtbox { height: 50px; line-height: 50px; text-align: center; font-size: 16px; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; position: relative; background: #fff; border-bottom: 1px solid #e2e2e2;}
.news01 .txtbox span{ display: block; z-index: 1; position: relative; transition:0.3s;}
.news01 .txtbox:after {  position: absolute;content: ""; background: #c3002f; height: 100%; width:100%;  left: 0;bottom: 0;
    transition: all 0.5s;
    -webkit-transition: transform .5s;
    -moz-transition: transform .5s;
    -ms-transition: transform .5s;
    -o-transition: transform .5s;
    transition: transform .5s;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: right center;
    transform-origin: right center;
}
.news01 .slide:hover .txtbox::after { -webkit-transform-origin: left center;
    transform-origin: left center;
    -webkit-transform: scaleX(1); -moz-transform: scaleX(1); -ms-transform: scaleX(1);
    -o-transform: scaleX(1); transform: scaleX(1);
}
.news01 .slide:hover .txtbox span{ color: #fff;}


#xgcp{ padding: 7% 0 2%;}
#xgcp li{ margin-bottom: 10%;}
#xgcp li .pic{ width: 100%; height: 0; padding-bottom: 75%; position: relative; overflow: hidden;}
#xgcp li .pic img{ width: 100%; height: 100%; object-fit: cover; left: 0; position: absolute; transition: 0.3s;}
#xgcp li p{ height: 40px; line-height: 40px; background: #f4f4f4; text-align: center; transition: 0.3s; white-space: nowrap; overflow:hidden; text-overflow: ellipsis;}
#xgcp li:hover p{ background: #c3002f; color: #fff;}
#xgcp li:hover .pic img{ transform: scale(1.1);}


#xgcp{ padding: 7% 15px 2%;}
#xgcp li{ margin-bottom: 10%;}
#xgcp li .pic{ width: 100%; height: 0; padding-bottom: 75%; position: relative; overflow: hidden;}
#xgcp li .pic img{ width: 100%; height: 100%; object-fit: cover; left: 0; position: absolute; transition: 0.3s;}
#xgcp li p{ height: 40px; line-height: 40px; background: #f4f4f4; text-align: center; transition: 0.3s; white-space: nowrap; overflow:hidden; text-overflow: ellipsis;}
#xgcp li:hover p{ background: #bd1e25; color: #fff;}
#xgcp li:hover .pic img{ transform: scale(1.1);}




/*产品中心*/
.cp_hui{ background: #f5f5f5;}
.cp_hui:nth-of-type(2n){ background: #fff;}
.cp_hui .tit_font{ text-transform: uppercase; float: left; padding-left: 3%;}
.cp_hui .more{ text-align: right; transition: 0.3s; height: 40px; line-height: 40px; position: relative;}
.cp_hui .more:before{ position: absolute; right: 0; top: 0; content: ''; width: 0; height: 100%; background: #c3002f; transition: 0.3s;}
.cp_hui .more a{ display: block; position: relative; z-index: 1; color: #666666; transition: 0.3s;}
.cp_hui .more:hover:before{ width: 27%;}
.cp_hui .more:hover a{ color: #fff; letter-spacing: 2px;}
.cp_hui #kjcx .swiper-slide .tit{ background: #fff;}
.cp_hui:nth-of-type(2n) #kjcx .swiper-slide .tit{ background: #f5f5f5;}
.cp_hui #kjcx .swiper-slide:hover .tit{ background: #c3002f;}

@media screen and (max-width:991px){
    }


#cplb .swiper-container {
    width: 100%;
    height: 100%;
}
#cplb .swiper-slide {
    text-align: center;
    transition:0.3s;
    padding: 15px 0;

    /* Center slide text vertically */
    flex-direction: column;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
#cplb .swiper-slide:before{position: absolute;
    right: 0;
    top: 40%;
    content: '';
    width: 1px;
    height: 20%;
    background: #ccc;}
#cplb .swiper-slide:last-of-type:before{ display: none;}
#cplb .swiper-slide a{ display: inline-block; height: 40px; line-height: 40px; padding: 0 10px; color: #666; transition: 0.3s;}
#cplb .swiper-slide:hover a{ background: #c30e24; border-radius: 5px; }
#cplb .swiper-slide:hover a{ color: #fff;}
@media screen and (max-width:765px){
    #cplb .swiper-slide p{ font-size: 14px;}
}


.cpclass{ padding-bottom: 3%;}
.cpclass .row{ margin: 0;}
.cpclass .pic{ display: block; width: 100%; height: 0; padding-bottom: 30%; position: relative; overflow: hidden;}
.cpclass .pic img{ width: 100%; height: 100%; object-fit: cover; left: 0; position: absolute; text-align: center;}
.cpclass .font{ padding: 0 5%;}
.cpclass .font .tit{ color: #333333; font-size: 30px;}
.cpclass .font .con{ border-top: 1px dashed #cccccc; border-bottom: 1px dashed #cccccc; padding: 3% 0; color: #999999; font-size: 16px; margin-top: 4%;}
.cpclass .font .con span{ float: left; color: #282828; font-weight: bold;}
.cpclass .font dl{ width: 100%; padding-top: 3%;}
.cpclass .font dl dt{ float: left; color: #282828; font-weight: bold;}
.cpclass .font dl dd{ float: left; height: 25px; background: #ffefef; line-height: 25px; padding: 0 2%; color: #c30e24; border-radius: 5px; margin-right: 10px;}
.cpclass .font .tel{ color: #999999; line-height: 25px; padding: 0;}
.cpclass .font .tel i{ float: left; color: #c30e24; font-size: 36px; margin: 15px 10px 0 0;}
.cpclass .font .tel p{ font-size: 14px;}
.cpclass .font .tel span{ color: #bd1e25; font-weight: bold; font-size: 24px;}

.cp-tools { height: auto; line-height: 50px; text-align: center; width: 60%; overflow: hidden; padding: 0; margin-top: 5%;}
.cp-tools a { display: block; float: left; flex: 1; width: 45%; height: 50px; border-radius: 5px; background-color: #c30e24; color: #ffffff; }
.cp-tools a:nth-of-type(2){ float: right;}
.cp-tools a.btn-free { background:#222d35; color: #fff;}
.cp-tools a:hover { background-color: #c30e24; color: #ffffff; }
.cp-tools a:hover ~ .btn-ask { background:#222d35; color: #fff;}

@media screen and (max-width:1200px){
    .cp-tools a{ width: 48%; font-size: 12px;}
}
@media screen and (max-width:991px){
    .cpclass .pic{ padding-bottom: 60%; margin-bottom: 3%;}
}
@media screen and (max-width:768px){
    .cpclass .font .tit{ font-size: 22px;}
    .cpclass .font .con{ font-size: 14px;}
    .cpclass .font dl dd{ font-size: 12px; margin-right: 1%;}
    .cp-tools{ width: 100%; margin-top: 5%;}
}

.cp_class_con li{ padding-bottom: 40px; margin-top: 3%;}
.cp_class_con .pic{ display: block; width: 100%; height: 0; padding-bottom: 75%; position: relative; overflow: hidden;}
.cp_class_con .pic img{ width: 100%; height: 100%; object-fit: cover; left: 0; position: absolute; transition:0.3s;}
.cp_class_con .tit{ position: absolute; bottom: 0; left: 10%; height: auto; line-height: 30px; padding: 3% 0; background: #f5f5f5; width: 80%; text-align: center; transition: 0.3s;}
.cp_class_con .tit p{ display: inline-block; font-size: 18px; color: #1e2830;}
.cp_class_con .tit span{ display: block; position: relative; text-transform: uppercase; font-size: 14px; color: #dfdfdf;}
.cp_class_con .tit span:before{ position: absolute; width: 20%; height: 1px; bottom: 20%; left: 40%; content: ''; background: #dfdfdf;}
.cp_class_con li:hover img{ transform: scale(1.1);}
.cp_class_con li:hover .tit{ background-color: #c3002f;}
.cp_class_con li:hover .tit p{ color: #fff;}
@media screen and (max-width:768px){
    .cp_class_con .tit p{ font-size: 14px;}
}


.pro-nav {
    width: 100%;
    margin: 0 auto;
    background: #f5f5f5;
    line-height: 70px;
}
.pro-sub-nav {
    margin: 0 auto !important;
}
.pro-sub-nav li {
    height: 70px;
    line-height: 70px;
    display: block;
    float: left;
    width: 15%;
    position: relative;
}
.pro-sub-nav li:after {
    position: absolute;
    content: "";
    width: 1px;
    height: 15px;
    top: 0;
    bottom:0;
    right: 0;
    margin: auto;
    background: #999
}
.pro-sub-nav li:nth-last-of-type(1):after {
    position: absolute;
    content: "";
    width: 0px;
    height: 20px;
    top: 10px;
    right: 0;
}
.pro-sub-nav li.current a{ color: #c40e25}

.pro-sub-nav li.current a:after{ width: 100%; left:0;  color: #c40e25}
.pro-sub-nav li a {
    display: block;
    width: 100%;
    font-size: 16px;
    text-align: center;
    color: #333;
    transition: all 0.5s;
    position: relative;

}
.pro-sub-nav li a:after {
    position: absolute;
    content: "";
    bottom: 0px;
    width: 0;
    height: 2px;
    background: #c40e25;
    left: 45%;
    transition: all 0.5s
}
.pro-sub-nav li a:hover:after {
    width: 100%;
    left: 0;
}
.pro-sub-nav li a:hover {
    color: #c40e25
}
.nav_fix li a:hover {
    color: #c40e25
}
.nav_fix {
    transition: all 0.5s;
    background:#f5f5f5;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 8;
}
.nav_fix li a {
    color: #333; font-weight: 100
}
@media screen and (max-width:991px){
    .pro-sub-nav li{ width: 20%;}
}
@media screen and (max-width:768px){
    .pro-sub-nav li a{ font-size: 14px;}
}


.tit_in_cp{ position: relative; text-align: center;}
.tit_in_cp p{ float: left; width: 45px; height: 45px; background: #c3002f; border-radius: 100%; text-align: center; line-height: 45px;}
.tit_in_cp span{ position: relative; float: left; padding: 0 20px; color: #373737; font-size: 26px; line-height: 45px;}
@media screen and (max-width:768px){
    .tit_in_cp p{ width: 35px; height: 35px; line-height: 35px;}
    .tit_in_cp span{ font-size: 22px;}
}

.cp_nr{ padding: 3% 0 5%; line-height: 30px; color: #666666; font-size: 15px;}
#cpys{ border: 1px solid #ededed;}
#cpys .swiper-container { width: 100%; height: auto; margin-left: auto; margin-right: auto;}
#cpys .swiper-slide { background-size: cover; background-position: center; position: relative;}
#cpys .gallery-top { height: auto; width: 100%; margin: 0 0 4%; position: relative;}
#cpys .gallery-top .row{ margin: 0;}
#cpys .gallery-top .swiper-slide .pic{ width: 100%; height: 0; padding-bottom: 30%; position: relative; overflow: hidden; transition: 0.3s;}
#cpys .gallery-top .swiper-slide .pic img{ max-width: 70%; height: 100%; object-fit: cover; left: 20%; position: absolute; transition: 0.3s;}
#cpys .gallery-top .swiper-slide .font{ padding: 5% 0 0 3%;}
#cpys .gallery-top .swiper-slide .font ul li{ color: #282828; font-size: 14px; line-height: 40px;}
#cpys .gallery-thumbs { height: auto; box-sizing: border-box; background: #fff; border-top: 1px solid #ededed;}
#cpys .gallery-thumbs .swiper-slide { cursor: pointer; transition:0.3s; padding: 2%; border-right: 1px solid #ededed;}
#cpys .gallery-thumbs .swiper-slide:after{ position: absolute; left: -100%; top: -100%; background: url("../image/ys_bj1.png") no-repeat left top; width: 56px; height: 35px; content: ''; transition: 0.5s;}
#cpys .gallery-thumbs .swiper-slide:before{ position: absolute; right: -100%; bottom: -100%; content: ''; background: url("../image/ys_bj2.png") no-repeat left top; width: 39px; height: 36px; transition: 0.5s;}
#cpys .gallery-thumbs .swiper-slide:last-of-type{ border: none;}
#cpys .gallery-thumbs .swiper-slide p{ float: left; width: 55px; height: 55px; text-align: center; line-height: 55px; border-radius: 100%; background: #c3002f; color: #fff;}
#cpys .gallery-thumbs .swiper-slide p i{ font-size: 30px;}
#cpys .gallery-thumbs .swiper-slide span{ display: block; float: left; width: 75%; padding-left: 5%; color: #333333; font-size: 16px; transition: 0.3s; position: relative; line-height: 30px;}
#cpys .gallery-thumbs .swiper-slide-thumb-active{ background: #c3002f; border: none;}
#cpys .gallery-thumbs .swiper-slide-thumb-active:after{ left: 0; top: 0;}
#cpys .gallery-thumbs .swiper-slide-thumb-active:before{ right: 0; bottom: 0;}
#cpys .gallery-thumbs .swiper-slide-thumb-active p{ background: #fff; color: #c3002f; }
#cpys .gallery-thumbs .swiper-slide-thumb-active span{ color: #fff;}
@media screen and (max-width:991px){
    #cpys .gallery-top .swiper-slide .pic{ padding-bottom: 66%;}
    #cpys .gallery-top .swiper-slide .pic img{ max-width: 50%; left: 25%;}
}



.cqfm li{ position: relative; margin-bottom: 8%;}
.cqfm li .pic{ width: 100%; height: 0; padding-bottom: 70%; position: relative; overflow: hidden;}
.cqfm li .pic img{ width: 100%; height: 100%; object-fit: cover; left: 0; position: absolute; text-align: center; transition:0.3s; }
.cqfm li .newsTitBg{position: absolute;bottom: 0;left: 0;width: 100%;height: 20%; text-align: center; color: #fff; z-index: 1;transition:.4s; background: linear-gradient(bottom,rgba(0,0,0,.7),rgba(0,0,0 ,0) 100%);background: -o-linear-gradient(bottom,rgba(0,0,0,.7),rgba(0,0 0,0) 100%);background: -ms-linear-gradient(bottom,rgba(0,0,0,.7),rgba(0,0,0,0) 100%);background: -moz-linear-gradient(bottom,rgba(0,0,0,.7),rgba(0,0,0,0) 100%);background: -webkit-linear-gradient(bottom,rgba(0,0,0,.7),rgba(0,0,0,0) 100%);}
.cqfm li p{ position: absolute;bottom: 0;left: 0; z-index: 3; width: 100%; height: 40px; line-height: 40px; text-align: center; color: #fff;}
.cqfm li:hover .newsTitBg{ height: 80%;}
.cqfm li:hover .pic img{ transform: scale(1.1);}
@media screen and (max-width:768px){
    .cqfm .col-12{ padding: 0;}
}

.cpin_more{ line-height: 45px;}
.cpin_more a{ color: #999999; transition: 0.3s;}
.cpin_more a:hover{ color: #c3002f;}

.cp_nr #kjcx{ margin-top: 0;}
.cp_nr #kjcx .swiper-slide .tit{ background: #f5f5f5;}
.cp_nr #kjcx .swiper-slide:hover .tit{ background: #c3002f;}




/*新闻中心*/

#indexNews li{width: 100%;height: auto; margin:0 auto; padding: 2% 0; transition: 0.3s;}
#indexNews li .row{ margin: 0;}
#indexNews li .right{ float: right; padding: 0 0 0 4% !important; line-height: 25px;}
#indexNews li .news_title{ text-align: left; color: #626364; font-size: 16px; white-space: nowrap; text-overflow:ellipsis; overflow: hidden; line-height: 30px;}
#indexNews li .news_info{ color: #999999; font-size: 12px;}
#indexNews li .news_time{ line-height: 30px; text-align: center; font-weight: normal !important; background: #e8e8e9; color: #666666; font-size: 13px; padding: 0 !important; margin: 0 !important; transition: 0.3s;}
#indexNews li .news_time span{display: block; margin:0 auto; line-height: 30px; width: 100%; text-align: center; color: #666666; font-size: 36px; font-family: Bahnschrift; padding-top: 18%;}
#indexNews li:hover .news_time{ background: #c3002f;}
#indexNews li:hover .news_time,#indexNews li:hover .news_time span{ color: #fff;}
@media screen and (max-width:768px){
    #indexNews li .news_time span{ font-size: 34px;}
    #indexNews li .news_time{ font-size: 12px;}
}

#xwpicnr .swiper-container {
    width: 100%;
    height: 100%;
}
#xwpicnr .swiper-slide {
    text-align: center;
    transition:0.3s;
    position: relative;
    padding-bottom: 5%;
    /* Center slide text vertically */
    flex-direction: column;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
#xwpicnr .swiper-slide .pic{ display: block; width: 100%; height: 0; padding-bottom: 60%; position: relative; overflow: hidden;}
#xwpicnr .swiper-slide .pic img{ width: 100%; height: 100%; object-fit: cover; left: 0; position: absolute;}
#xwpicnr .swiper-slide .font{ position: absolute; background: #f6f7fc; bottom: 0; width: 96%; left: 2%; padding: 2% 0;}
#xwpicnr .swiper-slide .font .row{ margin: 0;}
#xwpicnr .swiper-slide .right{ text-align: left; padding: 0 2% !important; line-height: 25px;}
#xwpicnr .swiper-slide .news_title{ text-align: left; color: #626364; font-size: 18px; white-space: nowrap;text-overflow:ellipsis;overflow: hidden; line-height: 30px; font-weight: bold; }
#xwpicnr .swiper-slide .news_info{ color: #999999; font-size: 0.8em;}
#xwpicnr .swiper-slide .news_time{ line-height: 30px; text-align: center; font-weight: normal !important; border-right:solid 1px #ccc; color: #666666;font-size: 1
.5rem; padding: 0 !important; margin: 0 !important;}
#xwpicnr .swiper-slide .news_time span{display: block; margin:0 auto; line-height: 45px; width: 100%; text-align: center; color: #626364; font-size: 4rem; font-weight: bold;}
#xwpicnr .swiper-pagination{ right: 20px; bottom: 20px; left: auto; height: 30px; text-align: right;}
#xwpicnr .swiper-pagination .swiper-pagination-bullet{ background: #bd1e25; width: 10px; height: 10px;}
@media screen and (max-width:1200px){
    #xwpicnr .swiper-slide .font{ position: relative; width: 100%; left: 0;}
    #xwpicnr .swiper-slide .news_time span{ font-size: 3rem;}
}


.xwmore{ margin: 3% auto 0; height: 50px; transition: 0.3s; background: #bd1e25; width: 15%; text-align: center; line-height: 50px; color: #fff; border-radius: 5px;}
.xwmore:hover{ letter-spacing: 3px; background: #333; }
@media screen and (max-width:768px){
    .xwmore{ width: 30%;}
}



#hydt .swiper-container {
    margin: 0;
    width: 100%;
    height: 100%;
}
#hydt .swiper-slide {
    transition: 0.3s;
    position: relative;
    cursor: pointer;

    /* Center slide text vertically */
    flex-direction: column;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
#hydt .swiper-slide .pic{ width: 100%; height: 0; padding-bottom: 68%; position: relative; overflow: hidden;}
#hydt .swiper-slide .pic img{ width: 100%; height: 100%; object-fit: cover; left: 0; position: absolute; transition:0.3s;}
#hydt .swiper-slide .content{ width: 95%; color: #999; position: relative; margin-top: -10%; z-index: 1; background: #fff; padding: 5% !important; transition: 0.3s;}
#hydt .swiper-slide .news_title{ color: #333333; font-size: 20px; text-align: left; height: 40px; overflow: hidden;text-overflow: ellipsis; white-space: pre;}
#hydt .swiper-slide .new_con{ color: #666666; font-size: 16px; padding-bottom: 2%;}
#hydt .swiper-slide .float-left{ color: #999999; font-family: Arial; font-size: 14px;}
#hydt .swiper-slide .float-right{ color: #bd1e25;}
#hydt .swiper-slide:hover .content{ background: #bd1e25;}
#hydt .swiper-slide:hover .content .news_title{ color: #fff;}
#hydt .swiper-slide:hover .new_con,#hydt .swiper-slide:hover .float-left,#hydt .swiper-slide:hover .float-right{ color: rgba(255,255,255,0.5);}
#hydt .swiper-slide:hover .pic img{transform: scale(1.1);}


#cnzz li{ padding: 3%; margin: 0; border: 1px solid #ececec; transition: 0.3s;}
#cnzz .col-12:nth-of-type(1) li{ border-right: none; border-bottom: none;}
#cnzz .col-12:nth-of-type(2) li{ border-bottom: none;}
#cnzz .col-12:nth-of-type(3) li{ border-right: none;}
#cnzz .pic{ height: 0; padding-bottom: 23%; position: relative; overflow: hidden;}
#cnzz .pic img{ width: 100%; height: 100%; object-fit: cover; left: 0; position: absolute; transition:0.3s;}
#cnzz .news_title{ color: #333333; font-size: 18px; white-space: nowrap; overflow:hidden; text-overflow: ellipsis;}
#cnzz .news_info,#cnzz .news_time{ color: #999999; font-size: 14px;}
#cnzz .news_time{ font-family: Arial;}
#cnzz li:hover{ background: #bd1e25;}
#cnzz li:hover .pic img{transform: scale(1.1);}
#cnzz li:hover .news_title{ color: #fff;}
#cnzz li:hover .news_info,#cnzz li:hover .news_time{ color: rgba(255,255,255,0.5);}
@media screen and (max-width:991px){
    #cnzz .pic{ padding-bottom: 45%;}
    #cnzz .news_title{ font-size: 16px;}
}


#cjwt_right{ background: #fff; padding: 0;}
#cjwt_right .row{ margin: 0;}
#cjwt_right li{ padding: 6% 6%; transition: 0.3s;}
#cjwt_right .news_title{ color: #333333; font-size: 18px; white-space: nowrap; overflow:hidden; text-overflow: ellipsis;}
#cjwt_right .news_info{ color: #999999; font-size: 14px;}
#cjwt_right .news_time i{ float: left; font-size: 30px; color: #999999;}
#cjwt_right .news_time p{ float: right; color: #999999;}
#cjwt_right li:hover{ background: #bd1e25;}
#cjwt_right li:hover .news_title{ color: #fff;}
#cjwt_right li:hover .news_info,#cjwt_right li:hover .news_time i,#cjwt_right li:hover .news_time p{ color: rgba(255,255,255,0.5);}

#cjwt_left{ background: #fff;}
#cjwt_left .pic{ height: 0; padding-bottom: 47%; position: relative; overflow: hidden;}
#cjwt_left .pic img{ width: 100%; height: 100%; object-fit: cover; left: 0; position: absolute; transition:0.3s;}
#cjwt_left .content{ padding: 3%;}
#cjwt_left .news_title{ color: #333333; font-size: 18px; white-space: nowrap; overflow:hidden; text-overflow: ellipsis;}
#cjwt_left .news_info{ color: #999999; font-size: 14px;}
#cjwt_left .news_time i{ float: left; font-size: 30px; color: #999999;}
#cjwt_left .news_time p{ float: right; color: #999999;}
#cjwt_left:hover .pic img{transform: scale(1.1);}
#cjwt_left:hover{ background: #bd1e25;}
#cjwt_left:hover .news_title{ color: #fff;}
#cjwt_left:hover .news_info,#cjwt_left:hover .news_time i,#cjwt_left:hover .news_time p{ color: rgba(255,255,255,0.5);}
@media screen and (max-width:1440px){
    #cjwt_right li{ padding: 3% 6%;}
}


.news-sider {
    float: none;
    border: 1px solid #e6e6e6;
    background: #fff;
    margin-bottom: 5%;
}
.news-sider .in-title {
    padding: 5% 15%;
    overflow: hidden;
    border-bottom: 1px solid #f4f4f4;
}
.news-sider .in-title h3 {
    border-bottom: 1px solid #e6e6e6;
    height: 40px;
    line-height: 40px;
    font-size: 20px;
    color: #333333;
}
.news-sider .in-title h3 i{ display: block; float: left; color: #eb0115; font-size: 30px; margin-right: 10px;}
.news-sider .in-title em {
    font-size: 12px;
    color: #999999;
    font-family: arial;
    text-transform: uppercase;
}



/*招聘*/
#qywh{ margin: 3% 0 5%;}
#qywh .swiper-container {
    width: 100%;
    height: 100%;
    padding: 60px 0 0;
}
#qywh .swiper-slide {
    transition: 0.3s;
    position: relative;
    background: #f5f5f5;
    padding: 4% 0;
    cursor: pointer;

    /* Center slide text vertically */
    flex-direction: column;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
#qywh .swiper-slide .pic{ position: absolute; left: 34%; top: -52px; text-align: center; width: 105px; height: 105px; background: #c3002f; line-height: 105px; border-radius: 100%;}
#qywh .swiper-slide .pic i{ color: #fff; font-size: 50px;}
#qywh .swiper-slide p{ color: #333333; font-size: 26px; padding: 5% 0 2%; position: relative;}
#qywh .swiper-slide i{ font-size: 26px; color: #636569;}
#qywh .swiper-slide span{ display: block; padding: 0 10%; text-align: center; color: #666666; font-size: 16px;}
#qywh .swiper-slide:hover{ box-shadow: 0 0 10px rgba(0,0,0,0.1);}
@media screen and (max-width:1200px){
    #qywh .swiper-slide p{ padding-top: 12%;}
}
@media screen and (max-width:768px){
    #qywh{ padding: 0 3%;}
    #qywh .swiper-slide .pic{ left: 40%;}
    #qywh .swiper-slide p{ padding-top: 15%;}
}


#zpjy{ background: url("../image/zpjy.jpg") no-repeat center fixed; border-radius: 10px; text-align: center; color: #fff;}
#zpjy .tit{ font-size: 30px;}
#zpjy i{ font-size: 26px;}
#zpjy .con{ padding: 1% 20% 0; font-size: 16px;}
@media screen and (max-width:768px){
    #zpjy .con{ font-size: 14px; padding: 2%;}
}


.inner_contact_02{ margin: 3% 0 0;}
.inner_contact_02 .td1{ line-height: 40px; border-right: 1px solid #dbdbdb;}
.inner_contact_02 .td1 p{ color: #333333; font-size: 22px;}
.inner_contact_02 .td1 span{ color: #666666; font-size: 16px;}
.inner_contact_02 .td2{ line-height: 40px; padding-left: 5%;}
.inner_contact_02 .td2 p{ color: #666666; font-size: 16px;}
.inner_contact_02 .td2 p span{ color: #c3002f; font-size: 24px;}
.inner_contact_02 .td5{ text-align: center; padding-top: 2%;}
.inner_contact_02 .td5 a{ display: block; height: 45px; line-height: 45px; float: right; padding: 0 10%; background: #c3002f; border-radius: 5px; color: #fff;font-size: 14px;}
@media screen and (max-width:768px){
    .inner_contact_02 .td4{ width: 30%;}
    .inner_contact_02 .td2 p{ font-size: 14px;}
    .inner_contact_02 .td2 p span{ font-size: 16px;}
    .inner_contact_02 .td1 span{ font-size: 14px;}
    .inner_contact_02 .td1 p{ font-size: 18px;}
}

#jobs_ul{padding:0;width: 100%;}
#jobs_ul li{width: 100%; margin-bottom: 1% !important;}
#jobs_ul li .jobs_title{font-size: 14px; width: 100%; line-height: 30px; background: #f4f4f4; color: #666666; padding: 2%; margin: 0;}
#jobs_ul li .jobs_box{ padding:20px 3.5% 36px; background: #fff; position: relative;display: none;}
#jobs_ul li .jobs_box .info1 {
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 22px;
}
#jobs_ul li .jobs_box .info1 p {
    font-size: 14px;
    color: #333333;
    line-height: 25px;
    margin: 5px 0px !important;
}
#jobs_ul li .jobs_box .info2 {
    border-bottom: 1px solid #e5e5e5;
    padding: 14px 0 22px;
}
#jobs_ul li .jobs_box .info2 h3 {
    font-size: 18px;
    color: #333333;
    line-height: 3;
    font-weight: normal;
}
#jobs_ul li .jobs_box .info2 p {
    font-size: 14px;
    color: #777777;
    line-height: 2.5;
}
#jobs_ul li .jobs_box .info2 .float-left {
    width: 50%;float: left;
}
#jobs_ul li .jobs_box .info2 .float-right {
    width: 43.5%;float: right;
}
#jobs_ul li .jobs_box .info2 .float-left .info-box {
    border-right: 1px solid #e5e5e5;padding-right: 10%;
}
#jobs_ul li .jobs_box .info3 {
    margin-top: 31px;
}
#jobs_ul li .jobs_box .info3 .apply_btn {
    width: 151px;
    height: 41px;
    line-height: 41px;
    background: #1976a0;
    font-size: 16px;
    color: #ffffff;
    float: right;
    transition: 0.3s;
    text-align: center;
}
#jobs_ul li .jobs_box .info3 .apply_btn:hover {
    background: #333;
}
#jobs_ul li .jobs_box .info3 .all {
    float: right;
    font-size: 14px;
    color: #777777;
    height: 41px;
    line-height: 41px;
    padding-left: 30px;
}
#jobs_ul li .jobs_box i {
    position: absolute;
    left: 18px;
    top: -12px;
    width: 0;
    height: 0;
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent #f5f5f5;
}


/*翻页*/
.page {
 font-size: 0;
 text-align: center;
}
.page .center {
 display: inline-block;
 overflow: hidden;
}
.page .center .page-span {
 float: left;
 font-size: 14px;
 color: #c3c3c3;
 line-height: 32px;
 margin-right: 30px;
}
.page .center .page-list {
 float: left;
 overflow: hidden;
}
.page .center .page-list ul li {
 float: left;
 width: auto;
 min-width: 30px;
 height: 32px;
 text-align: center;
 line-height: 30px;
 font-size: 14px;
 margin: 0 4px;
 padding: 0;
 border: none;
 background: transparent;
}
.page .center .page-list ul li a {
 min-width: 20px;
 padding: 0 5px;
 border: 1px solid #eee;
 display: block;
 color: #333;
 border-radius: 4px;
 -webkit-border-radius: 4px;
 overflow: hidden;
 background: #fff;
}
.page .center .page-list ul li:hover a {
 color: #f3c04b;
}
.page .center .page-list ul li.active a {
 background: #f3c04b;
 color: #fff;
}