﻿@charset "utf-8";blockquote,body,button,caption,dd,div,dl,dt,fieldset,figure,form,h1,h2,h3,h4,h5,h6,hr,html,input,legend,li,menu,ol,p,pre,table,td,textarea,th,ul{margin:0;padding:0}
address,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
table{border-collapse:collapse;border-spacing:0}
caption,th{text-align:left;font-weight:400}
abbr,body,fieldset,html,iframe,img{border:0}
address,cite,dfn,em,i,var{font-style:normal}
[hidefocus],summary{outline:0}
li{list-style:none}
h1,h2,h3,h4,h5,h6,small{font-size:100%;font-weight:lighter}
sub,sup{font-size:83%}
code,kbd,pre,samp{font-family:inherit}
q:after,q:before{content:none}
textarea{overflow:auto;resize:none}
label,summary{cursor:default}
a,button{cursor:pointer}
b,em,h1,h2,h3,h4,h5,h6,strong{font-weight:700}
a,a:hover,del,ins,s,u{text-decoration:none}
body,button,input,keygen,legend,select,textarea{font:12px/1.14 'Microsoft YaHei',\5b8b\4f53;color:#333;outline:0}
body{font-family:-apple-system,BlinkMacSystemFont,'Microsoft YaHei',sans-serif;line-height:1.75;font-size:1.6rem;color:#333;line-height:1.75}
a,a:active,a:focus,a:hover,a:visited{color:#333;text-decoration:none}
body,html{width:100%;height:100%;position:relative}
/*公共样式*/
.container{width:100%;max-width:1680px;margin:auto;}
.imgcut{ position: relative; padding-bottom: 75%;}
.imgcut img{ position: absolute; display: block; width: 100%; height: 100%; object-fit: cover;}
.flex{display: flex; display: -webkit-flex;  -webkit-justify-content: space-between; justify-content: space-between;  -webkit-align-items: center;align-items: center;}
.flwrap{  -webkit-flex-wrap: wrap; flex-wrap: wrap;}
.fixed{ position: fixed;}
.hids{ display: none;}
.shos{ display: block;}
/*头部样式*/
.header{ width: 100%; padding:3rem; box-sizing:border-box; z-index: 1; transition:all 0.5s;}
.header::after{ content: ""; width: 100%; height: 0; overflow: hidden; position: absolute; left: 0; top: 0; z-index: -1; transition: all 0.5s; background: rgba(0,0,0,.8);}
.header.hbg::after{ height: 100%;}
.header.hbg{ padding:1rem 3rem;}
.logo{ padding:0;}
.logo a img{ display: block; width: 0; height: 0; overflow: hidden;}
.logo a.on img{ width: auto; height: auto; transition: all 0.5s;}
.logo img{ max-height: 18rem;}
.topbtn{}
.topbtn a.nlink{position: relative; display: block; font-size: 1.6rem; padding:2px 1rem; color: #fff;}
.topbtn a.nlink::after{content: ""; width: 0; height: 1px; position: absolute; bottom: 0; left: 0; background: #fff; transition: all 0.5s;}
.topbtn a.nlink:hover::after{ width: 100%;}
.topbtn a{ display: inline-block; padding-left: 1rem;}
.header.hbg .logo img{ max-height: 6rem;}
.topbtn .code{ position: relative; padding-left: 3rem; }
.topbtn .code a{ display:block;}
.topbtn .code .code-img{ position: absolute; z-index: 999; bottom: 0; left: 0; width: 0; height: 0; opacity: 0; overflow: hidden; transition: all 0.5s;}
.topbtn .code .code-img img{ width: 100%; height: 100%;}
.topbtn .code:hover .code-img{opacity: 1; width: 12rem; height: 12rem; bottom: -12.5rem; left: -3rem;}
@media (max-width:1199px){
	.header::after{ border: 0;}
    .header .logo img,.logo a.on img{ max-height: 6rem;}
}
@media (max-width:767px){
    .header.hbg{ padding:1rem;}
	.header .container{ padding: 0;}
	.header{ padding:1rem;}
    .topbtn a img{ max-width: 4rem;}
    .topbtn .code{ position: relative; padding-left: 0; }
}
/*移动端导航样式*/
.menu-handler{position: relative;z-index:1012;left:0;top:0;width:auto; width: 5rem; height:5rem; padding: 0.5rem; overflow:hidden;cursor:pointer;}
.menu-handler .icon-menu{ position: relative; width: 4rem; height: 4rem; }
.menu-handler .burger{position:absolute;z-index:5;top:1rem;left:0.5rem;display:block;width:3rem;height:2px;margin:0;background:#888;transform-origin:center;-webkit-transform-origin:center;-moz-transform-origin:center;-o-transform-origin:center;-ms-transform-origin:center}
.menu-handler .burger-2{top:2rem}
.menu-handler .burger-3{top:3rem}
.menu-handler.active .burger-1{top:2rem;-webkit-transform:rotate(225deg);transform:rotate(225deg);}
.menu-handler.active .burger-2{opacity:0;-moz-opacity:0;-khtml-opacity:0;-webkit-opacity:0;left:-100%}
.menu-handler.active .burger-3{top:2rem;-webkit-transform:rotate(-225deg);transform:rotate(-225deg);}
.menuBlack{position:fixed;z-index:999;top:0;bottom:0;right:0;left:0;background:#fff;display:none}
.menuBox{position:fixed;width:100%;top:0;left:-100%;height:100%; z-index:1000;overflow:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;display:none}
.navMobile{margin-top:8rem;padding:3rem 0;border-top:1px solid rgba(0,0,0,.1)}
.navMobile dd a{display:block;line-height:8rem;color:#333;font-weight:400;font-size:2.4rem;text-align:center}
.navMobile dd p a.act{color:#178dc6}
.navMobile dd a:hover{color: #178dc6;}
.mtnav a{padding:13px 48px;font-size:16px}
.mtnav{background:#333;display:none}
/*幻灯大图*/
#hmpage{ position: fixed; z-index: 0; width: 100%; height: 100%; overflow: hidden; opacity:1;}
.banner{position:relative;width:100%;height:100%; overflow:hidden;cursor:pointer;}
.banner .swiper-container{width:100%;height:100%;margin:0 auto;}
.banner .swiper-slide{ width: 100%; position:relative}
.banner .img-fix{width:100%;height:100%; overflow:hidden}
.banner .img-inner{ position: relative; height: 100%; overflow:hidden;}
.banner .img-inner img{ position: absolute; display: block; width: 100%; height: 100%; object-fit: cover;transform:scale(1.05,1.05);transition: all 0.5s;}
.banner .swiper-slide-active img,.banner .swiper-slide-duplicate-active img{transition:5s ease;transform:scale(1,1);}
.banner .bottom-nav{position:absolute; padding: 1rem; bottom:0; z-index:10;width:100%;}
.banner .swiper-pagination{position:relative;display:inline-block;height:29px;vertical-align:middle;text-align:right}
.banner .swiper-pagination-bullet{width:1.2rem;height:1.2rem;border:1px solid #fff;border-radius:50%;background:0 0;box-sizing:border-box;margin:0 0.5rem;vertical-align:middle;transition:all .5s;-webkit-transition:all .5s;-moz-transition:all .5s;-ms-transition:all .5s;-o-transition:all .5s;opacity:1}
.banner .swiper-pagination-bullet-active{background:#fff}
.banner_box{ position: relative; z-index: 0; background: none; width: 100%; height: 100%; overflow: hidden; opacity:0;pointer-events: none;}
@media (max-width:1199px){
	#hmpage{ height: auto;}
	.banner .img-inner img{ position: relative;}
	.banner_box{ height: auto;}
}
@media (max-width:767px){
    #hmpage{ height: 100%;}
    .banner .img-inner img{ position: absolute;}
    .banner_box{ height: 100%;}
}
/*导航*/
.menubar{width:100%;height:100%;position:absolute;top:0;left:0;z-index:999}
.menubar ul.bwlist{height:100%}
.bw-item:hover:before{width:100%}
.bw-item:hover .bibtn,.bw-item:hover .bidesc{opacity:1;visibility:visible}
.bw-item:hover .bibtn,.bw-item:hover .bich,.bw-item:hover .bidesc,.bw-item:hover .bieng,.bw-item:hover .biicon{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
.bw-item{position:relative;width:25%;z-index:997;float:left;height:100%;color:#fff;padding:0 3rem}
.bw-item:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;width:0;background:rgba(0,0,0,.2);transition:.65s}
.bibox{position:relative;cursor:pointer;top:40%;text-align:center;transform:translateY(-30%)}
.bich,.bieng,.biicon{-webkit-transition:opacity .65s,-webkit-transform .65s;transition:opacity .65s,transform .65s;-webkit-transform:translate3d(0,10rem,0);transform:translate3d(0,10rem,0)}
.biicon{display:block;font-size:5rem;line-height:1;text-align:center}
.biicon img{max-width:6rem;display:inline-block}
.bieng{display:block;font-size:1.3rem;line-height:1.5;margin-top:1rem;text-transform: uppercase;}
.bich{display:block;font-weight:bold;font-size:1.8rem;line-height:1.5}
.bidesc{opacity:0;visibility:hidden;position:relative;font-size:1.6rem;line-height:1.5;margin-top:4rem;border-top:1px solid #fff;padding-top:4rem;-webkit-transition:opacity .65s,-webkit-transform .65s;transition:opacity .65s,transform .65s;-webkit-transform:translate3d(0,10rem,0);transform:translate3d(0,10rem,0)}
.bidesc:before{content:"";position:absolute;top:0;left:50%;transform:translate(-50%,-50%);width:7px;height:7px;background:#fff;border-radius:50%}
.bibtn{opacity:0;visibility:hidden;display:block;width:12rem;height:4rem;margin:5rem auto 0;border:1px solid #fff;text-align:center;line-height:4rem;font-size:1.2rem;color:#fff;text-transform:uppercase;-webkit-transition:opacity .65s,-webkit-transform .65s;transition:opacity .65s,transform .65s;-webkit-transform:translate3d(0,10rem,0);transform:translate3d(0,10rem,0);transition-delay:.15s; font-weight: normal;}
.linkA { position: absolute;left: 0;top: 0; width: 100%; height: 100%;}
@media (max-width:1199px){
    .biicon img{ max-width: 4rem;}
	.bw-item{ padding: 0;}
    .bieng{ font-size: 1rem;}
    .bich{ font-size: 1.4rem;}
}
@media (max-width:767px){
    .menubar ul.bwlist{ height: auto; flex-wrap: wrap; padding-top: 10rem;}
    .menubar{ height: auto;}
    .bw-item{ width: 50%; padding: 3rem 0;}
    .bibox{transform: translateY(0%);}
    .bibtn{ margin-top: 0;}
}
/*主体内容*/
.wrapper{position: relative; width: 100%; height: auto; overflow: hidden; background: #fff;}
.wrapper .module{ width: 100%; height: auto; overflow: hidden; padding: 3rem;}

.module .title{position: relative; padding:0 1rem;}
.module .title .box{ position: relative; padding-bottom: 1rem; border-bottom: 1px solid #ddd; }
.module .title::after{ content: ""; position: absolute; left: 1rem; bottom: -2px; width: 3rem; height: 5px; background: #222;}
.module h3{ font-size: 2.5rem; color: #222;}
.module h3 span{ font-size: 1.8rem; padding-left: 1rem; font-weight: lighter; text-transform: uppercase;}
.module .search form{ max-width: 60rem; margin:0 auto; overflow: hidden;}
.module .search form input{ width: 25rem; height: 4rem; border: 0; padding:0 1.5rem; font-size: 1.4rem; float: left; border: 1px solid #222;}
.module .search form input.button{ width: 6rem; background: url(../images/search.png) no-repeat center #222; background-size: auto;}

.imglist ul.grid li a{ display: block; position: relative; width: 100%; height: 100%; overflow: hidden; background: #000;}
.imglist ul.grid li .img{ position: relative;}
.imglist ul.grid li .img img{ opacity: 0.5; transition: all 0.5s;}
.imglist ul.grid li .txt{ position: absolute; z-index: 999; left: 0; bottom: -8rem; width: 100%; height: 8rem; transition: all 0.5s; background: rgba(0,0,0,.5); color: #fff;}
.imglist ul.grid li .txt h3{ font-size: 1.6rem; color: #fff;line-height: 3rem;}
.imglist ul.grid li .txt p{ font-size: 1.4rem; color: #fff;line-height: 3rem;}
.imglist ul.grid li:hover .txt{ bottom: 0;}
.imglist ul.grid li:hover .img img{ opacity: 1;}

.imglist ul.grid li.on .txtbox{ padding: 3rem;}
.imglist ul.grid li .txtbox{ padding: 1rem;}

.imglist ul.grid li.on a{ background: #eee;}
.imglist ul.grid li.on .img{ display: none; height: 0; overflow: hidden;}
.imglist ul.grid li.on .txt{ position: relative; top: 0; left: 0; height: 100%; background: none;}
.imglist ul.grid li.on .txtbox p{ line-height: 2; font-size: 1.4rem; color: #666; text-transform: uppercase;}
.imglist ul.grid li.on .txtbox p strong{ font-size: 1.6rem; line-height: 1.5; color: #000;}
.imglist ul.grid li.on .txtbox p b{ font-size: 1.6rem; color: #000;}
.imglist ul.grid li.on .txtbox p span{ color: #333;}
.imglist ul.grid li.on .txtbox p.en{ font-size: 1.2rem; margin-top: 2rem;}
.imglist ul.grid li.on a:hover{ background: #f5f5f5;}

@media (max-width:1199px){
	.wrapper .module{ padding:3rem 0;}
    .imglist ul.grid li .img img{ opacity: 1;}
}
@media (max-width:767px){
    .module h3{ margin-bottom: 2rem;}
	.module .title .box{ padding: 3rem 0; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: flex-start; align-items: flex-start;}

}

/*底部*/
.footer{position: relative; width: 100%; height: auto; overflow: hidden; padding: 0 3rem; background: #222;}
.footer .foottop{ padding: 6rem 0; border-bottom: 1px solid rgba(255,255,255,0.2); -webkit-align-items: flex-start; align-items: flex-start;}
.footer .foottop img.flogo,.footer .foottop img.wechat{ max-height: 12rem; }
.footer .foottop .contact p{ font-size: 1.4rem; color: #aaa; height: 4rem; line-height: 4rem; padding-left: 4rem;}
.footer .foottop .contact p a{ color: #aaa;}
.footer .foottop .contact p.p1{ background: url(../images/f02.png) no-repeat left center; background-size: 2.2rem; }
.footer .foottop .contact p.p2{ background: url(../images/f03.png) no-repeat left center; background-size: 2.2rem; }
.footer .foottop .contact p.p3{ background: url(../images/f01.png) no-repeat left center; background-size: 2.2rem; }
.footer .foottop .fnav p{ line-height: 1; font-size: 1.4rem;}
.footer .foottop .fnav p a{ color: #aaa; display: inline-block; padding:0 1.5rem;}
.footer .foottop .fnav p a:hover{ color: #ccc;}
.footer .foottop .fnav p.wechat{ margin-top: 3rem; color: #aaa; -webkit-align-items: flex-start; align-items: flex-start; -webkit-justify-content: flex-end; justify-content: flex-end;}
.footer .footbot{ padding: 3rem 0;}
.footer .footbot p{ line-height: 2; color: #aaa; font-size: 1.4rem;}
.footer .footbot p a{ color: #aaa; display: inline-block; padding: 0 0.5rem;}
.footer .footbot p a:hover{ color: #eee;}
@media (max-width:1199px){
	.footer{ padding: 1rem;}
    .footer .foottop img.flogo{ margin-bottom: 3rem;}
    .footer .foottop{ -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; padding-bottom: 1rem;}
    .footer .foottop .fnav{ margin: 3rem 0;}
    .footer .foottop .fnav p.wechat{ -webkit-flex-direction: column; -webkit-align-items: center; flex-direction: column; align-items: center; line-height: 3;}
    .footer .footbot p{ text-align: center;}
}

/*侧边客服*/
.floating_ck{position:fixed;right:2rem;top:65%;z-index:9999;display:block}
.floating_ck dl dd{position:relative;width:5rem;height:5rem; background-size: 2rem; margin-bottom:1px;background-color:#111;text-align:center;background-repeat:no-repeat;background-position:center;cursor:pointer;color:#666;border-radius: 50%;}
.floating_ck dl dd:hover{background-color:#2d3961}
.floating_ck dl dd:hover .floating_left{display:block}
.consult{background-image:url(../images/qq1.png)}
.words{background-image:url(../images/kficon.png)}
.quote{background-image:url(../images/kficon.png)}
.qrcord{background-image:url(../images/erweima.png)}
.return{background-image:url(../images/fanhui.png)}
.floating_ck dd span{display:block;padding-top:4rem;color:#fff;font-size:10px}
.floating_left{position:absolute;left:-150px;top:0;width:150px;height:5rem; border-radius: 5rem; background-color:#2d3961;border:solid 1px #2d3961;display:none}
.floating_left a{color:#fff;line-height:4.8rem}
.floating_left b{ color: #fff; line-height: 4.8rem;}
.qrcord .floating_left{ border-radius: 1rem;}
.floating_ewm{height:auto;top:-8rem; padding-bottom: 1rem;}
.floating_ewm i{display:block;width:100px;height:100px;margin:auto;margin-top:2rem;background-size:100%}
.floating_ewm p{margin-top:5px;color:#fff}
.floating_ewm .qrcord_p01{font-size:1rem;line-height:2rem}
.floating_ewm .qrcord_p02{font-size:1.8rem}
@media screen and (max-width:767px){
    .floating_ck{ top: auto; bottom: 10rem; right: 1rem;}
    .floating_left{ width: 120px; left:-120px}
}


.mouse_icon{
    cursor:pointer;
    width: 150px;
    height: auto;
    position: absolute;
    left: 50%;
    margin-left: -75px;
    bottom: 5%;
    color: rgba(255, 255, 255, .75);
    text-align: center;
    z-index: 1005;
}
.mouse_icon p{
    font-size: 14px;
    display: block;
    margin-bottom: 10px;
}
.mouse_icon .mouse{
    width: 25px;
    height: auto;
    margin: 0px auto;
    position: relative;
}

.mouse_icon .mouse img{
    -webkit-animation: upAnimate 2s ease infinite;
    width: 100%;
}

@-webkit-keyframes upAnimate{
    0%,100%{
        -webkit-transform: translateY(-4px);
    }
    50%{
        -webkit-transform: translateY(4px);
    }
}

.mouse_icon .icon{
    width: 12px;
    margin: 0px auto;
}

.mouse_icon .icon img{
    -webkit-animation: upAnimate2 2s ease infinite;
} 

@-webkit-keyframes upAnimate2{
    0%,100%{
        -webkit-transform: translateY(-1px);
    }
    50%{
        -webkit-transform: translateY(3px);
    }
}
