@charset "utf-8";

@font-face { font-family: 'Novum-book'; src: url('../fonts/Novum-book.ttf') format('truetype'), url('../fonts/Novum-book.woff') format('woff'); }
@font-face { font-family: 'Novum-light'; src: url('../fonts/Novum-light.woff') format('woff'); }
@font-face { font-family: 'PingFangSC-Regular'; src: url('../fonts/PingFangSC-Regular.woff') format('woff'); }
@font-face { font-family: 'HelveticaNeue'; src: url('../fonts/HelveticaNeue.woff') format('woff'); }

*,:after,:before{box-sizing:border-box;}
html{-webkit-text-size-adjust:none;}
html{zoom:1;}
html *{outline:0;zoom:1;}
body,blockquote,code,dd,div,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0;}
body,button,input,select,textarea{font-size:14px;line-height:30px;font-family:SimHei,Novum-light,arial,microsoft yahei,Microsoft YaHei;}
body{color:#333;max-width:720px;min-width:320px;margin:0 auto;background:#fff;
-webkit-text-size-adjust:none;
-webkit-tap-highlight-color:rgba(0,0,0,0);
-webkit-tap-highlight:rgba(0,0,0,0);
-webkit-font-smoothing: antialiased;}
address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:400;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400;}
em,i{font-style:normal;}
li{list-style:none;}
img{-webkit-box-sizing:border-box;box-sizing:border-box;max-width:100%;height:auto;vertical-align:middle;border:0;}
table{border-collapse:collapse;border-spacing:0;}
a{color:#333;text-decoration:none;-webkit-transition:.3s;-moz-transition:.3s;-o-transition:.3s;transition:.3s;-ms-transition:.3s;}
a:hover{color:#f2ac3f;text-decoration:none;}
a,a:focus{outline:0;}
.clearfix:after{clear:both;display:block;visibility:hidden;height:0;content:"";}
.clearfix{display:block;}
.fl{float:left;display:inline;}
.fr{float:right;display:inline;}
.wrap{clear:both;display:block;margin:0 auto;width:1200px;}
.animate img{position:relative;opacity:1;-webkit-transition:.5s all;-moz-transition:.5s all;-o-transition:.5s all;transition:.5s all;-webkit-transform:scale(1,1) rotate(0);-ms-transition:.5s all;}
a:hover .animate img{-webkit-transform:scale(1.06,1.06);-moz-transform:scale(1.06,1.06);-o-transform:scale(1.06,1.06);transform:scale(1.06,1.06);-ms-transform:scale(1.06,1.06);}
.animate img:hover{-webkit-transform:scale(1.06,1.06);-moz-transform:scale(1.06,1.06);-o-transform:scale(1.06,1.06);transform:scale(1.06,1.06);-ms-transform:scale(1.06,1.06);}
.tran,.tran a,a.tran,.tran img{-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s;-ms-transition:all .3s;}
.hide,.none,ins{display:none;}
.bor_box::after,.bor_box::before{pointer-events:none;}
.bor_box::after,.bor_box::before{position:absolute;top:15px;right:15px;bottom:15px;left:15px;content:'';opacity:0;-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s;}
.bor_box::before{border-top:1px solid #fff;border-bottom:1px solid #fff;-webkit-transform:scale(0,1);transform:scale(0,1);}
.bor_box::after{border-right:1px solid #fff;border-left:1px solid #fff;-webkit-transform:scale(1,0);transform:scale(1,0);}
a:hover .bor_box::after,a:hover .bor_box::before{opacity:.7;-webkit-transform:scale(1);transform:scale(1);}

#header{position:fixed;z-index:100;top:0;max-width:720px;min-width:320px;}
#header{background:#0c0c0c;padding:0 .2rem .1rem;}
#header .logo_nav{height:.7rem; overflow:hidden; }
#header .logo_nav .h_logo{padding:.1rem 0; position: absolute; left:.2rem; top:0; z-index:20}
#header .logo_nav .h_logo img{width:auto;height:.93rem}
#header .h_nav{border:0;width:.4rem;height:.5rem;z-index:9}
#header .h_nav .icon-menu{position:relative;display:block;height:100%;z-index:15}
#header .h_nav .icon-menu span,
#header .h_nav .icon-menu span:after,
#header .h_nav .icon-menu span:before{content:'';position:absolute;display:block;cursor:pointer;border-radius:1px;height:1px;width:.4rem;background:#fff;left:0;top:65%;transition:all 250ms ease-out;-webkit-transition:all 250ms ease-out}
#header .h_nav .icon-menu span:before{top:-6px}
#header .h_nav .icon-menu span:after{top:6px}
#header .h_nav .icon-menu p{color:#fff;position:absolute;bottom:-2px}
#header .h_nav .icon-menu.isOpen span{width:0;margin-left:12px;background-color:transparent}
#header .h_nav .icon-menu.isOpen span:after,
#header .h_nav .icon-menu.isOpen span:before{top:0;margin-left:-12px}
#header .h_nav .icon-menu.isOpen span:before{transform:rotate(135deg);-webkit-transform:rotate(135deg)}
#header .h_nav .icon-menu.isOpen span:after{transform:rotate(-135deg);-webkit-transform:rotate(-135deg)}
#header .side-nav{position:fixed;background:#000;height:100vh;width:80%;top:0;z-index:105;padding:.2rem .8rem 0;transform:translateX(-100%);transition:transform .3s linear;left:0}
#header .side-nav .nav-title{font-size:.24rem;color:#fff}
#header .side-nav ul{margin-top:6vh}
#header .side-nav ul li{padding:.18rem 0;border-bottom:1px solid #444;display:flex;justify-content:space-between;align-items:center}
#header .side-nav ul li a{color:#fff;font-size:.24rem;flex:1 1 0%}
#header .side-nav .nav-copy{line-height:.26rem;margin-top:.3rem;font-size:.18rem}
#header .side-nav.isOpen{transform:translateX(0)}
#header .text{ font-size:.12rem; color:#fff; opacity:.5; line-height:.18rem; height:.35rem; overflow:hidden; padding-left:.8rem}

#banner{width:100%;margin-top:1.1rem}
.focus{ position:relative; overflow:hidden}
.focus .swiper-slide .img{ width:100%; overflow: hidden}

#video{width:100%;position:relative}
#video .show img{width:100%}
#video .playbtn{position:absolute;left:50%;top:50%;margin-left:-.5rem;margin-top:-.5rem}
#video .playbtn img{width:1rem;height:1rem}
#video .video-container .close-btn{position:absolute;right:.3rem;top:.8rem}
#video .video-container .close-btn img{width:.8rem}
#video .video-container{width:100%;height:100%;position:fixed;top:0;z-index:109;background:#000;display:none}
#video .video-container video{width:90%;margin:5%;height:auto;margin-top:50%}

#about{width:100%;background:#000;padding:1rem 0}
#about .title{text-align:center;padding-bottom:.2rem}
#about .title big{display:block;color:#fff;font-size:.46rem;line-height:.46rem}
#about .title small{display:block;color:#fff;font-size:.24rem;line-height:.24rem;margin-top:.1rem}
#about .line_jpg{margin:.3rem 0}
#about .line_jpg img{width:100%}
#about .text{text-align:center;color:#fff;font-size:.24rem;line-height:.4rem;padding:.1rem 0}
#about .small{font-size:.16rem;opacity:.4;color:#fff;padding:0 .3rem;line-height:.3rem}

#repic{width:100%;display:flex;justify-content:space-between}
#repic div{overflow:hidden}

#product{width:100%;padding:1rem 0;background:#000;}
#product .title{text-align:center}
#product .title big{display:block;background:url(products.png) no-repeat center center;background-size:contain;font-size:.46rem;padding:.3rem 0;font-weight:700;color:#ffffff;}
#product .title small{display:block;font-size:.16rem;color:#ffffff;}
#product .list{background:#000;margin-top:.3rem}
#product .list ul li .img img{width:100%}
#product .list ul li .t{padding:.5rem 0;text-align:center}
#product .list ul li .t h2{font-size:.36rem;color:#fff;line-height:.6rem}
#product .list ul li .t a{font-size:.24rem;border-bottom:1px solid #fff;display:inline-block;color:#fff}
#product .more{text-align:center;padding:.8rem 0 .5rem}
#product .more a{border:1px solid #000;line-height:.46rem;padding:0 .6rem;display:inline-block;font-size:.24rem}

#morelink{width:100%; background:#fff}
#morelink ul li{border-bottom:1px solid #666;padding:0 .3rem;line-height:.7rem}
#morelink ul li a{font-size:.24rem;display:block;background:url(../images/arrow.png) no-repeat right center;background-size:.1rem auto}

#footer{width:100%;background:#000}
#footer .f_logo{text-align:center;padding:.5rem 0}
#footer .f_logo img{width:1.2rem}
#footer .f_nav{display:flex;justify-content:space-around;border-top:.01rem solid #666;border-bottom:.01rem solid #666;line-height:.3rem;padding:.1rem 0}
#footer .f_nav a{font-size:.2rem;color:#666}
#footer .copyright{text-align:center;font-size:.16rem;color:#666;padding:.3rem 0;line-height:.3rem}
#footer .copyright a{color:#666}

#pro_list{ width:100%; margin-top:1.1rem; padding-bottom:1rem}
#pro_list .banner{ position:relative}
#pro_list .banner .img img{ width:100%}
#pro_list .banner .playbtn{ position:absolute; top:80%; left:auto; width:100%; text-align:center}
#pro_list .banner .playbtn span{ background:#000; color:#fff; font-size:.24rem; padding:.1rem .5rem;}
#pro_list .banner .video-container .close-btn{position:absolute;right:.3rem;top:.8rem}
#pro_list .banner .video-container .close-btn img{width:.8rem}
#pro_list .banner .video-container{width:100%;height:100%;position:fixed;top:0;z-index:109;background:#000;display:none}
#pro_list .banner .video-container video{width:90%;margin:5%;height:auto;margin-top:50%}
#pro_list .list .title{ border-bottom:1px solid #eee; padding:.2rem .3rem .1rem; font-size:.3rem; font-weight:700}
#pro_list .list ul li{ padding:.5rem .3rem;text-align:center;}
#pro_list .list ul li .small{  font-size:.22rem}
#pro_list .list ul li .entitle{ font-size:.26rem; line-height:.3rem}
#pro_list .list ul li em{ display:block}
#pro_list .list ul li .title{  font-size:.3rem}
#pro_list .list ul li img{ margin-top:.3rem; padding:0 0rem; text-align:center}
#pro_list .list ul li img img{ max-width:100%}

#pro_wh .cu-image{ position:relative}
#pro_wh .cu-image img{width:100%}
#pro_wh .swiper-slide{overflow:hidden; text-align:center; color:#fff; padding:.5rem 0}
#pro_wh .swiper-slide .item-title{font-size:.34rem;font-weight:700}
#pro_wh .swiper-slide .item-desc .item-s-title{font-size:.26rem}
#pro_wh .swiper-slide .item-desc .item-data{line-height:.34rem}
#pro_wh .swiper-slide .item-desc-s{margin-top:.2rem;}
#pro_wh .swiper-slide .item-desc-s .item-data{font-size:.2rem;text-align:center;;color:#616161; line-height:.34rem}
#pro_wh .swiper-slide .item-desc-s .border-text{font-size:.2rem;padding:0rem .5rem;display:inline-block;letter-spacing:5px;border-radius:5px;border:1px solid #fff;margin-bottom:.2rem}
#pro_wh .swiper-pagination-bullets{ bottom:50px}
#pro_wh .other_text{ color:#fff; text-align:center; padding:.5rem 0; line-height:.44rem}

#pro_view{ width:100%; margin-top:1.1rem; padding-bottom:1rem}
#pro_view .big_pic img{ width:100%}
#pro_view .slide_pic{ background:#000; padding:.8rem .2rem}
#pro_view .slide_pic .text{ text-align:center; color:#666; font-size:.2rem;text-transform: uppercase;}
#pro_view .slide_pic .slide{ padding:.8rem .3rem}
#pro_view .slide_pic .btn_buy{ text-align:center} 
#pro_view .slide_pic .btn_buy a{ display:inline-block; color:#fff; font-size:.24rem; border:1px solid #fff; padding:0 .5rem; line-height:.5rem}

#contact{width:100%;margin-top:1.1rem; padding-bottom:1rem}
#contact .banner{position:relative}
#contact .banner .big_img img{width:100%}
#contact .banner .text{text-align:center;color:#fff;position:absolute;top:50%;left:auto;z-index:10;width:100%; opacity:0}
#contact .banner .text .title{font-size:.26rem;letter-spacing:.01rem;display:inline-block;background:#ae9577;padding:0 .2rem}
#contact .banner .text .engTitle{font-size:.2rem;text-transform:uppercase;line-height:.2rem;margin:.1rem;letter-spacing:.01rem}
#contact .content{padding:.8rem .5rem; font-size:.24rem; line-height:.42rem; background:url(../images/decoate-img.png) no-repeat right bottom #f5f5f5; background-size:.3rem auto}

#view{ width:100%; margin-top:1.1rem}
#view .content{ padding:.5rem .6rem}
#view .content .title{ border-bottom:1px solid #000; padding-bottom:.2rem}
#view .content .title h1{ font-size:.26rem}
#view .content .title .date{ font-size:.18rem; color:#999;}
#view .content .mycontent{ padding:.5rem 0; font-size:.24rem; line-height:150%}
#view .content .mycontent img{ max-width:100%}
#view .content .mycontent video{ max-width:100%}
#view .banner{ position:relative}
#view .banner .img img{ width:100%}
#view .banner .playbtn{ position:absolute; top:80%; left:auto; width:100%; text-align:center}
#view .banner .playbtn span{ background:#000; color:#fff; font-size:.24rem; padding:.1rem .5rem;}
#view .banner .video-container .close-btn{position:absolute;right:.3rem;top:.8rem}
#view .banner .video-container .close-btn img{width:.8rem}
#view .banner .video-container{width:100%;height:100%;position:fixed;top:0;z-index:109;background:#000;display:none}
#view .banner .video-container video{width:90%;margin:5%;height:auto;margin-top:50%}

#news{margin-top:1.1rem;padding:.2rem .2rem 1rem;width:100%}
#news .title{border-bottom:1px solid #000}
#news .title .t{font-size:.26rem;font-family:Novum-book}
#news .title span{float:right;font-size:.2rem}
#news .title span .down-icon{display:inline-block;width:0;height:0;border-left:.06rem solid transparent;border-right:.06rem solid transparent;border-top:.1rem solid #000;margin-left:.1rem}
#news .title span a.currclass{ color:#f2ac3f}
#news .list ul li{padding:.5rem 0 .8rem;border-bottom:1px solid #999}
#news .list ul li .date{font-size:.18rem}
#news .list ul li .img img{width:100%}
#news .list ul li .t{margin-top:.3rem;font-size:.26rem;}
#news .list ul li .info{margin-top:.2rem;font-size:.22rem;line-height:.3rem}
#news .list ul li  .more{margin-top:.5rem}
#news .list ul li .more a{position:relative;display:inline-block;width:1.8rem;color:#000;text-align:center;text-decoration:none;font-size:.2rem;line-height:.6rem}
#news .list ul li .more a:after,
#news .list ul li .more a:before{position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;border:1px solid #000;content:""}
#news .list ul li .more a:before{top:-2px;left:-2px}
#news .list ul li .more a:after{top:2px;left:2px}


#fenye{text-align:center;clear:both;}
#fenye table{text-align:center;margin:0 auto}
#fenye a{color:#5a5a5a;text-decoration:none;;border:1px solid #eee; background:#FFF}
#fenye .prev,#fenye .next{width:52px;text-align:center}
#fenye a.curr{font-weight:700;color:#fff;background:#f2ac3f;border:1px solid #f2ac3f}
#fenye a:hover{background:#f2ac3f;color:#fff;border:1px solid #f2ac3f}
#fenye span{color:#5a5a5a;text-decoration:none;border:1px solid #eee;background:#FFF}

#fenye{padding:.5rem 0 0px;}
#fenye a{margin:0 .02rem;padding:.1rem .15rem}
#fenye .prev,#fenye .next{width:.55rem;}
#fenye span{margin:0 .02rem;padding:.1rem .15rem}
#fenye .num,#fenye .prev{ display:none}


#about_list{ width:100%; margin-top:1.1rem; padding-bottom:0rem}
#about_list .banner{ position:relative}
#about_list .banner .img img{ width:100%}
#about_list .banner .playbtn{ position:absolute; top:80%; left:auto; width:100%; text-align:center}
#about_list .banner .playbtn span{ background:#000; color:#fff; font-size:.24rem; padding:.1rem .5rem;}
#about_list .banner .video-container .close-btn{position:absolute;right:.3rem;top:.8rem}
#about_list .banner .video-container .close-btn img{width:.8rem}
#about_list .banner .video-container{width:100%;height:100%;position:fixed;top:0;z-index:109;background:#000;display:none}
#about_list .banner .video-container video{width:90%;margin:5%;height:auto;margin-top:50%}

#nabout{ width:100%; padding:.8rem .3rem;font-size:.26rem; line-height:.4rem;}
#nabout .title{ border-bottom:1px solid #eee; padding:.2rem 0 .1rem; font-size:.3rem; font-weight:700}
#nabout .content{ margin-top:.2rem}
#nabout .content img{ max-width:100%; padding-bottom:.3rem}

#nzuzhi{ width:100%; padding:.8rem .3rem; background:url(../images/bg_about_zzjg.jpg); background-size:cover}
#nzuzhi{ font-size:.26rem; line-height:.34rem;}
#nzuzhi .title{ text-align:center}
#nzuzhi .title img{ height:.8rem}
#nzuzhi .content{ margin-top:.5rem}
#nzuzhi .content img{ max-width:100%}

#wenhua{ width:100%; padding:.8rem .3rem;}
#wenhua{ font-size:.26rem; line-height:.34rem;}
#wenhua .title{ text-align:center}
#wenhua .title img{ height:.3rem}
#wenhua .content{ margin-top:.5rem; line-height:.4rem}
#wenhua .content img{ max-width:100%}

#ry{ width:100%; padding-bottom:1rem}
#ry .swiper-slide{ text-align:center;}
#ry .swiper-slide img{ width: auto; height:3rem;}
#ry .swiper-slide p{ text-align:center; margin-top:.1rem}

#ncontact{ padding:.8rem .3rem}
#ncontact h2{ font-size:.3rem}
#ncontact .info{ margin-top:.2rem; line-height:.34rem; font-size:.24rem}
#ncontact .ewm{ margin-top:.5rem; padding-top:.5rem; border-top:1px solid #eee}
#ncontact .ewm img{ width:2rem}
#ncontact .ewm .text{ width:calc(100% - 2.2rem); line-height:.3rem; font-size:.24rem; padding-top:.3rem}
#ncontact .map{margin-top:.5rem; padding-top:.5rem; border-top:1px solid #eee}