.header{width: 100%;z-index: 1000;background:url(../image/index_bg.jpg);background-size:cover;}
.header>div{display:flex;height:1.5rem;line-height:1.5rem;justify-content: center;}
.header ul{display:flex;padding:.3rem 0  0}
.header ul li{position:relative}
.header ul li dl{position:absolute;left:0;top:105%;z-index:999;line-height:normal;display:flex;width:2.6rem;justify-content: space-between;padding:.08rem .18rem;background:#cccccc;border-radius:5px;;transform:rotate3d(1,0,0,-90deg);transition:.3s;opacity:0}
.header ul li dl.xss2{width:1.5rem;}
.header ul li dl.xss4{width:2.1rem;}
.header ul li dl:after{content:"";position:absolute;background:url(../image/sjx.png) 0 0 no-repeat;width:.25rem;height:.15rem;top:-.1rem;left:auto;background-size:100%}
.header ul li dl a{font-size:.12rem;color:#4d4d4d;}
.header ul li:hover dl{transform:rotate3d(1,0,0,0deg);transition:.5s;opacity:1}
.header ul li dl a:hover{color:#673415}
.header ul li dl a.actives{color:#673415}
.header  .logo{padding:0 .9rem}
.header  .logo a img{max-width:.92rem}
.header ul:first-child li{margin-left:.7rem}
.header ul:last-child li{margin-right:.7rem}
.header ul li>a{font-size:.18rem;color:#000000;font-weight:bold}
.header ul li.active>a{color:#673415}
.header ul li>a:hover{color:#673415}
.index_img{padding:.3rem 0 0}
.footer>div{padding:.37rem 0 .28rem;display:flex;flex-direction: column;align-items: center;}
.footer p{margin:0 0 .15rem;font-size:.16rem;color:#808080}
.footer a{font-size:.16rem;color:#808080}
.story{padding:0 0 .27rem}
.story>div>h2{padding:.25rem 0 .75rem;text-align:right;font-size:.24rem;color:#999999;font-weight:bold}
.story .infos{display:flex;padding:0 1.6rem;justify-content: space-between;}
.story .infos .img{width:47.3%}
.story .infos .left{width:47%}
.story .infos .left h2{font-size:.24rem;color:#000000;display:flex;align-items: center;margin:0 0 .85rem;}
.story .infos .left h2 em{font-size:.3rem;color:#000000;font-weight:bold}
.story .infos .left .box p{font-size:.24rem;color:#333333;line-height:.55rem;text-indent: 2ch;}
.adv>div{padding:.52rem  2.2rem .15rem}
.adv h2{text-align:center;padding:.2rem 0 .13rem;font-size:.22rem;color:#999999;font-weight:bold}
.service{padding:.55rem 0 .1rem}
.service>div{position:relative}
.service>div .text{position:absolute;width:5rem;height:5rem;left:1.1rem;top:1rem;background:rgba(255,255,255,.8);border-radius:60px;padding-left:.4rem;display:flex;flex-direction: column;justify-content: center;}
.service>div .text p{font-size:.25rem;color:#333333;margin:.17rem 0}
.newproduct>div{padding:.3rem 0 .1rem}
.newproduct>div h2{text-align:right;font-size:.24rem;color:#999999;font-weight:bold}
.newproduct>div h3{text-align:left;font-size:.24rem;color:#999999;font-weight:bold;margin:0 0 .25rem}
.newproduct>div .img{padding:0 1.5rem}
.shearepro>div{padding:.25rem 0 .1rem}
.shearepro>div h2{text-align:right;font-size:.24rem;color:#999999;font-weight:bold}
.shearepro>div h3{text-align:left;font-size:.24rem;color:#999999;font-weight:bold;margin:0 0 .28rem}
.shearepro>div .box{padding:0 .5rem;display:flex;flex-wrap: wrap;justify-content: space-between;}
.shearepro>div .box .img1{width:23%;margin:0 0 .34rem}
.shearepro>div .box .img2{width:23.2%;margin:0 0 .34rem}
.shearepro>div .box .img3{width:41%;margin:0 0 .34rem}
.shearepro>div .box .img4{width:41%}
.shearepro>div .box .img5{width:23%}
.shearepro>div .box .img6{width:23.2%}
.shearepro>div .box .img:hover img{transform:scale(1.1)}
.contact>div{padding:.45rem 0 .75rem}
.contact>div h2{text-align:right;font-size:.24rem;color:#999999;font-weight:bold;margin:0 0 .8rem}
.contact>div .infos{display:flex;padding:0 1.6rem;justify-content: space-between;align-items: flex-end;}
.contact>div .right{width:35.7%}
.contact>div .left{width:64%; text-align:center}
.contact>div .left .img {text-align:center;margin:0 0 .5rem}
.contact>div .left .img img{width:23.5%}
.contact>div .left .text p{font-size:.25rem;color:#333333;margin:0 0 .35rem}
.contact>div .left .text p:last-child{margin:0}
.latestacti>div{padding:.45rem 0 .25rem}
.latestacti>div .tit{display:flex;margin:0 0 .45rem;justify-content: space-between;}
.latestacti>div .tit h2{font-size:.24rem;color:#999999;font-weight:bold}
.latestacti>div .tit h3{font-size:.24rem;color:#999999;font-weight:bold;}
.latestacti>div .infos{padding:0 .8rem;display:flex;justify-content: space-between;}
.latestacti>div .infos .left{width:60%;position:relative}
.latestacti>div .infos .left .slide-pagination{position:absolute;left:27%;bottom:7%;z-index:2}
.latestacti>div .infos .left .slide-pagination span{width:.07rem;height:.07rem;margin:0 .02rem;background:rgba(255,255,255,.6);opacity:1}
.latestacti>div .infos .left .slide-pagination .swiper-pagination-bullet-active{background:white}
.latestacti>div .infos .left a:hover img{transform:scale(.98)}
.latestacti>div .infos .right{width:36.3%;position:relative}
.latestacti>div .infos .right .slide-pagination{position:absolute;left:50%;transform:translateX(-50%);bottom:2%;z-index:2}
.latestacti>div .infos .right .slide-pagination span{width:.07rem;height:.07rem;margin:0 .02rem;background:rgba(255,255,255,.6);opacity:1}
.latestacti>div .infos .right .slide-pagination .swiper-pagination-bullet-active{background:white}
/********<=767 mobile nav style css********/
.fl-page{position:relative;top:-1.5rem;}

#menu {display:none;}
#menu.mm-menu.mm-current{display:block;}
.m-header {background:#FFF;box-shadow:0 0 12px rgba(0,0,0,0.2)}
.m-header >.col-xs-6>div {color:#333;line-height:normal;}
.m-header >.col-xs-6 .langs>*{display:inline-block;font-size:14px;color:#333;line-height:normal;}
.m-header >.col-xs-6 .langs em {padding:0 5px;}
.m-header >.col-xs-6 .langs a{width:30px;height:30px;background:#333;color:#FFF;line-height:30px;text-align:center;border-radius:100%;margin:0 0 0 5px;}
.m-header >.col-xs-6 .menu{margin-left:.15rem;}
.m-header >.col-xs-6 .menu a{font-size:16px;color:#333}
.m-header >.col-xs-6 .menu a>* {display:inline-block;vertical-align:middle;}
.m-header >.col-xs-6 .menu a i {font-size:20px;}
.m-header >.col-xs-6 img {max-height:45px;}
.st-container .st-menu {background:#0e6eb8;
	-webkit-transition: all .6s cubic-bezier(.77,0,.175,1) 0s;
    -o-transition: all .6s cubic-bezier(.77,0,.175,1) 0s;
     transition: all .6s cubic-bezier(.77,0,.175,1) 0s;
}
.st-container .st-menu ul li a {color:#FFF;position:relative;font-size:.25rem}
.st-container .st-menu ul li>a:hover,.st-container .st-menu ul li.active>a {background:#f39800;box-shadow:0 4px 8px rgba(0,0,0,0.2);border-radius:5px;color:#FFF}
.st-container .st-menu ul li>a>i {position:absolute;right:1em;top:50%;transform:translateY(-50%);color:#FFF}
.st-container .st-menu ul li.active>a>i,.st-container .st-menu ul li>a:hover>i {color:#FFF}
.st-container .st-menu ul li>dl {transition:none;margin:0}
.st-container .st-menu ul li>dl dd a {background:none;box-shadow:none;color:#FFF;padding-left:0}
.st-container .st-menu ul li>dl dd a i {padding-right:10px;}
.st-container .st-menu ul li>dl dd.on2 a,.st-container .st-menu ul li>dl dd a:hover {color:#f39800}
.st-container .st-menu ul li>dl dd.on2 a i,.st-container .st-menu ul li>dl dd a:hover i {padding-right:16px}
.st-effect-1.st-menu {display:block;}
/********<=767 mobile nav style css 2********/

/**************************/

/******ipad****/
@media(max-width:1300px){
	.header ul li dl{width:2.2rem;}
.header ul li dl.xss2{width:1.6rem;}
.header ul li dl.xss4{width:1rem;}
}

@media(max-width:990px){
	body{overflow-x:hidden;}
	.st-menu {display:block;}	
	.header {display:none;}
	.m-header  {top:0;opacity:1;}
	
	.tem_banner{padding:60px 0 0}
	.m-header,.m_header2 {top:0;opacity:1;}
	
}
/********mobile*********/
@media(max-width:768px){
	.story .infos{display:inherit;padding:0}
	.story .infos>div{width:100% !important}
	.adv{padding:2rem 0 0 }
	.service{padding:3rem 0 0 }
	.service>div .text{width:3rem;height:3rem;left:.5rem;top:.2rem;border-radius:20px}
	.newproduct>div{padding:2rem 0 0}
	.newproduct>div .img{padding:0}
	.shearepro>div{padding:2rem 0 0 }
	.shearepro>div .box{padding:0}
	.latestacti>div{padding:2rem 0 0 }
	.latestacti>div .infos{padding:0;display:inherit}
	.latestacti>div .infos>div{width:100% !important}
	.contact>div .infos{padding:0}
	.contact>div{padding:2rem 0 0 }
	.contact>div .infos{padding:0;display:inherit}
	.contact>div .infos>div{width:100% !important}
	.contact>div .left .img img{width:50%}
	.index_img{padding:3rem 0 0}

}