@media screen and (max-width: 640px) {
    html { font-size: 62.5%; }
    img{width:100%;}

}
/* Write your styles */ 

/**淘宝初始化**/
body, h1, h2, h3, h4, h5, h6, hr, p, span, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, '微软雅黑',arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none;color: #000000; }
a:hover { text-decoration:none; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }
.clear{width:100%;overflow:hidden;font-size:1px;clear:both;}

body{overflow-x:hidden;position: relative;}


.index-header {margin:0 auto;display:flex;padding:1.625rem 0;}
.index-header .container{display: flex;}
.index-header .logo{display:flex;align-items:center;}
.index-header .right{margin-left:auto;display:flex;align-items:center;justify-content:center;}
.index-header .right .call{display:flex;justify-content:center;align-items:center;font-size: 1rem;margin-right:0.5rem;}
.index-header .right .call .icon-dianhua{font-size:1.5rem;padding:0 0.8rem;}
.index-header .right .call .phone{color:#e94f00;font-size:1.125rem;}
.index-header .right .contact{display:flex;justify-content:center;align-items: center;color:#a5a5a5;font-size:0.875rem;}
.index-header .right .contact a,
.index-header .right .contact span{padding:0 0.3rem;color:#a5a5a5;}
.index-header .right .contact a .icon-diqiu{padding:0 !important;margin:0;}

.header-nav {margin:0 auto;display:flex;justify-content:center;flex-wrap: wrap;justify-content: space-between;}
.header-nav .container{display: flex;justify-content: center;align-items: center;}
.header-nav .item{display:flex;justify-content: center;flex-direction: column;font-size: 1rem;flex: 1;justify-content: center;align-items: center;border-bottom: 3px solid #fff;;}
.header-nav .item p{display:block;padding:12% 0;}
.header-nav .item span.line{width:50%;height:3px;background-color: #fff;}
.header-nav .item:hover,
.header-nav .item.active{color:#073fec;}
.header-nav .item:hover .line,
.header-nav .item.active .line{background-color:#073fec;}
.header-nav .menu{display: flex;justify-content: flex-start;width:32px;color:#fff;margin-left: auto;}

/** index banner **/
.index-banner .swiper-wrapper .swiper-slide{display: flex;}
.index-banner .swiper-wrapper .swiper-slide img{width:100%;}
.index-banner .swiper-pagination-bullet{width:3rem;height:0.1875rem;border-radius: 0;}
.index-banner .swiper-pagination-bullet-active{background-color:#0020e6;}

/** banner **/
.banner{width:100%;}
.banner img{width:100%;}
.mobile_banner{
    display: none;
    width:100%;
}
.mobile_banner img{width:100%;}


.footer{background-color:#0319c8;}
.footer .wrap{padding:3rem 0 1.5rem;position:relative;border-bottom: 1px solid #3547d3;}
.footer .wrap .footer-nav{color:#fff;display: flex;align-items: center;}
.footer .wrap .footer-nav a{color:#fff;font-size: 1rem;}
.footer .wrap .footer-nav span{display: block;width:1px;height:0.8rem;background-color: #9aa3e9;margin:0 1rem;}
.footer .footer-contact{color:#fff;padding:2rem 0;position: relative;}
.footer .footer-contact .title{font-size:1rem;font-weight:bold;margin-bottom:1.2rem;}
.footer .footer-contact .title .iconfont{color:#818ce4;margin-right:0.5rem;}
.footer .footer-contact .box{padding-left:1.6rem;display: flex;flex-wrap: wrap;}
.footer .footer-contact .item{font-size:0.875rem;padding:0.8% 0;padding-right: 1.5rem;}
.footer .footer-contact .item .iconfont{color:#818ce4;margin-right:0.5rem;font-size:0.875rem;}
.footer .footer-contact .item .line{width:40%;height:1px;background-color: #fff;margin:1rem 0;}
.footer .footer-contact .item .address{padding:2% 0;}
.footer .footer-contact .item.bot{padding-left: 1.6rem;}
.footer .footer-contact .right .right-box{color:#fff;display: flex;flex-direction: column;padding-left:1.5rem;}
.footer .footer-contact .right .right-box a{color:#fff;display: flex;padding:1% 0;}
.footer .footer-contact .qrcode{position:absolute;right:0;top:-1.875rem;}
.footer .footer-contact .qrcode .top{line-height:1.875rem;background:#e94f00;color:#fff;font-size:0.875rem;text-align:center;position:relative;}
.footer .footer-contact .qrcode .triangle{width:0;height:0;border-top:10px solid transparent;border-right:10px solid transparent;border-left:10px solid transparent;border-bottom:10px solid #e94f00;position:absolute;top:-20px;left:50%;transform:translateX(-50%);}
.footer .footer-contact .qrcode .container{height:100px;background:#fff;padding:0 5px;}
.footer .footer-contact .qrcode .container img{width:90px;height:90px;margin-top:5px;}
.copyright{font-size: 0.75rem;color: #7c7c7c;padding:0.5% 0;background-color: #fff;}

.mobile-nav{display:none;position:fixed;left:0;top:0;z-index:999;width:65%;height:100%;background:rgba(255,255,255,0.98);overflow:hidden;transform-origin: left center;transition-property: transform;transition-duration: 0.3s;transition-timing-function: initial;transition-delay: initial;transform: translateX(-100%);padding:2rem 0;}
.mobile-nav.active{transform: translateX(0);}
.mobile-nav .logo{width:80%;margin: 0 auto;}
.mobile-nav .menu_panel{margin:0 20px;margin-top:3rem;}
.mobile-nav .menu_panel .menu-item{width:100%;display:flex;align-items:center;padding:1rem 0;border-bottom: 1px solid #f1f1f1;}
.mobile-nav .menu_panel .menu-item .title{color:#000;padding-left:3%;font-size:1rem;}
.mobile-nav .menu_panel .menu-item .icon-jiantou{color:#000;justify-content:flex-end;margin-left:auto;font-size:14px;}
#mask{display:none;width:100%;height:100%;position:fixed;top:0;left:0;background-color: rgba(0, 0, 0, 0.5);z-index:999;}
#menu {display: none;margin-left:auto;width:10%;}


.page-nav-wrp{background-color: #eee;}
.page-nav-wrp .nav{font-size: 1rem;display: flex;}
.page-nav-wrp .nav a{display: block;padding:1rem 2rem;color:#555;}
.page-nav-wrp .nav a.active,
.page-nav-wrp .nav a:hover{color: #fff;background-color: #0020e6;}
.page-nav-wrp .position{display:flex;align-items: center;justify-content: flex-end;font-size: 0.875rem;margin-left: auto;color:#555;}
.page-nav-wrp .position a{color:#555;}
.page-nav-wrp .position span{margin:0 0.1rem;color:#555;}

.pagination{display: flex;justify-content: center;align-items: center;height: 6rem;}
.pagination a{font-size:0.875rem;display: block;color:#fff;border:1px solid #e3e3e3;padding:0.2rem 0.7rem;border-radius:4px;color:#1e1e1e;margin:0 0.2rem;color:#333;}
.pagination a.active{background-color:#ff9a02;color:#fff;}

.bottom-nav{display: none;position: fixed;bottom:0;background-color:#fff;width:100%;z-index: 99;;}
.bottom-nav .item{display:flex;flex: 1;flex-direction:column;justify-content: center;align-items: center;padding:0.8rem 0;font-size:1.5rem;border-top:1px solid #eee;z-index: 99;color:#333;font-size: 1rem;}
.bottom-nav .item img{width:25%;margin-bottom:0.5rem;}
.bottom-nav .item.active{color:#007bff;}

.fixed-bar{ position: fixed;right: 1%;top:30%;z-index: 99;display: flex;flex-direction: column;}
.fixed-bar ul li{cursor: pointer; width:60px; height:60px;margin-bottom:2px;background-color:rgba(0,0,0,.5);}

.fixed-bar ul li .icon{width:60px;height:36px;display: flex;justify-content:center;align-items:center;}
.fixed-bar ul li p{color:#fff; font-size:1rem;text-align:center;padding:.05rem 0;}
.fixed-bar ul .bar-phone{position: relative;}
.fixed-bar ul .bar-phone .item{position: absolute;right:63px;top:0;z-index: 11;background-color:rgba(0,0,0,.5);display: none;color:#fff;font-size:14px;width:10rem;text-align:center;height:60px;line-height:60px;}
.fixed-bar ul .bar-phone:hover .item{display: block}

.fixed-bar ul .bar-qq{position: relative;}
.fixed-bar ul .bar-qq .item{position: absolute;right:63px;top:0;z-index: 11;background-color:rgba(0,0,0,.5);display: none; color:#fff;font-size:14px;width:10rem;text-align:center;height:60px;line-height:60px;}
.fixed-bar ul .bar-qq:hover .item{display: block}

.fixed-bar ul .bar-wx{position: relative;}
.fixed-bar ul .bar-wx .code{position: absolute;right:60px;top:0;z-index: 11;width:10rem;height:10rem;display: none;}
.fixed-bar ul .bar-wx .code img{width:100%;}
.fixed-bar ul .bar-wx:hover .code{display: block;}


.fixed-bar #close{font-size:0.875rem;display: none;justify-content: flex-end;padding-right:8%;cursor: pointer;}
#show_bar{display:none;position: fixed;right: 1%;top:20%;background-color: #eee;z-index: 99;border-radius: 1rem 0 0 1rem;padding:0.5rem 0.5rem;cursor: pointer;}
#show_bar .iconfont{display:inline-block;transform:rotate(180deg) !important;}