@font-face {
  font-family: 'ziti';
  src: url("../font/BKANT.TTF"); }
/*去掉苹果自带样式*/
p{
    -webkit-appearance: none;
}
.swiper-wrapper{
   transition-delay:.3s;
}
.swiper-container {
    width: 500px;
    height: 300px;
    margin:0 auto;
}
.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff; 
    /* 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;
}
.swiper-slide:nth-child(2){

    color:#fff;
}
.swiper-slide p{
    transform:translateX(-200px);
    opacity:0;
    transition:all .4s;
}
.ani-slide p{
    transform:translateX(0);
    opacity:1;
}


/*menu*/
.head{
    width: 100%;
    top: 0;
    position: absolute;
}
.left-logo{
    width: 215px;
    height: 100%;
    border-right: 1px solid #7c7257;
    position: absolute;
    left: 0;
    z-index: 100;  
    height:50.8vw;
}
.left-logo .logo{
    position: absolute;
    left: 21%;
    top: 40px;
}
.logo1{
    position: absolute;
    left: 255px;
    top: 70px;
    z-index: 100;
}
.tubiao{
    position: absolute;
    bottom:2%;
    left: 0;
    width: 100%;
}
.tubiao a{
    display: block;
    width: 100%;
    margin: 0 auto;
    padding-bottom:20%;
    text-align: center;
}
.t-tel{
    width: 300px;
    position: absolute;
    right: 10%;
    z-index: 100;
    color: #ffe2b0;
    font-size: 14px;
    height: 50px;
    background: url(../images/top-tel.png) no-repeat center left;
    top: 55px;
    line-height: 50px;
    text-indent: 45px;
}
.t-tel span{
    font-family: ziti;
    font-size: 20px;
}
.menu{
    width: 160px;
    position: fixed;
    top: 55px;
    right:5%;
    z-index:10000; 
}

.caidan1{
    width: 91px;
    height: 40px;
    background: #377e3e;
    border-radius: 30px;
    margin-top: 5px;
    position: absolute;
    color: #fff;
    font-size: 14px;
    line-height: 40px;
    text-indent: 13px;
    -webkit-transition: 300ms 0s all linear;
    -moz-transition: 300ms 0s all linear;
    -ms-transition: 300ms 0s all linear;
    -o-transition: 300ms 0s all linear;
    transition: 300ms 0s all linear;
    right: 0;
    opacity: 0;
}
.menu:hover .caidan1{
    width: 120px;
    -webkit-transition: 300ms 0s all linear;
    -moz-transition: 300ms 0s all linear;
    -ms-transition: 300ms 0s all linear;
    -o-transition: 300ms 0s all linear;
    transition: 300ms 0s all linear;
}
.caidan{
    width: 91px;
    height: 40px;
    background: #377e3e;
    border-radius: 30px;
    margin-top: 5px;
    position: absolute;
    color: #fff;
    font-size: 14px;
    line-height: 40px;
    text-indent: 13px;
    -webkit-transition: 300ms 0s all linear;
    -moz-transition: 300ms 0s all linear;
    -ms-transition: 300ms 0s all linear;
    -o-transition: 300ms 0s all linear;
    transition: 300ms 0s all linear;
    right: 0;
}
.menu:hover .caidan{
    width: 120px;
    -webkit-transition: 300ms 0s all linear;
    -moz-transition: 300ms 0s all linear;
    -ms-transition: 300ms 0s all linear;
    -o-transition: 300ms 0s all linear;
    transition: 300ms 0s all linear;
}
.menu_click{
    /*margin-top:30%;*/
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #fff;
    float: right;

}
.menu_click:hover{
    cursor: pointer;
}
.menu_click p{
    width: 100%;
    text-align: center;
    font-size: 12px;
    color: #888888;
    margin-top: 7px;
    -webkit-transition: 500ms 0s all linear;
    -moz-transition: 500ms 0s all linear;
    -ms-transition: 500ms 0s all linear;
    -o-transition: 500ms 0s all linear;
    transition: 500ms 0s all linear;
}
.yuan{
    position: absolute;
    left: 50%;
    top: 55%;
    transform:translate(-50%,-50%);
    width: 50%;
}
.menu_click b{
    display: block;
    margin: 0 auto;
    width: 100%;
    height: 1px;
    background: #2a4535;
    margin-bottom: 5px;
    -webkit-transition: 500ms 0s all linear;
    -moz-transition: 500ms 0s all linear;
    -ms-transition: 500ms 0s all linear;
    -o-transition: 500ms 0s all linear;
    transition: 500ms 0s all linear;
}

.menu_click b:last-child{
    width: 80%;
    float: right;

}
.menu_click b:first-child{
    transform-origin:11px 2px;

}
.rotate45{
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    margin-bottom: 0px!important;
    width: 100%!important;
}
.protate45{
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    margin-bottom: 0px!important;
    width: 100%!important;
}
.menu_click b:nth-child(3){
    transform-origin: 6px -2px;
}

.mycontainer{
    
    overflow:hidden;
}
.container{
    width: 83%;
    margin:0 auto;
}
/*导航选项菜单index1*/
.clear:after{
    display: block;
    content: '';
    clear: both;
}

.nav_container{
    position: fixed;
    height: 100%;
    z-index: 1000;
    top: 0;
    /*left: 0;*/
    right: 0;
    bottom: 0;
    -webkit-transition: 500ms 0s all linear;
    -moz-transition: 500ms 0s all linear;
    -ms-transition: 500ms 0s all linear;
    -o-transition: 500ms 0s all linear;
    transition: 500ms 0s all linear;
    overflow: hidden;
    background: #000;
}
.nav{
    width: 100%;
    position: absolute;
    height: 100%;
    left:0;
    top:0;
}
.nav>div{
    width:33%;
    height:100%;
    box-sizing: border-box;
    position: absolute;
    top:0;
    left:100%;
    -webkit-transition: 500ms 0s all ease;
    -moz-transition: 500ms 0s all ease;
    -ms-transition: 500ms 0s all ease;
    -o-transition: 500ms 0s all ease;
    transition: 500ms 0s all ease;
}
.nav>div:first-child>div{
    margin-top: 0;
}
.nav>div>div{
    width: 50%;
    margin: 0 auto;
    margin-top: 70%;
    opacity: 1;
    transition-delay:0ms;
    transition-duration:0ms;
    -webkit-transition: 1000ms 0ms all linear;
    -moz-transition: 1000ms 0ms all linear;
    -ms-transition: 1000ms 0ms all linear;
    -o-transition: 1000ms 0ms all linear;
    transition: 1000ms 0ms all linear;

}
.nav>div{
    width: 20%;
}
.nav>div:first-child{
   /* background:url("../images/nav01.jpg") no-repeat center;*/
   background: #fff;
    background-size: 100% 100%;
    transition: 300ms ease; 
    -webkit-transition: 300ms ease; 
    transition-delay: 0.1s;
}
.nav-logo{
    position: relative;
}
.n-logo{
    position: absolute;
    top: 5%;
    width: 100%;
    left: 0;
}
.n-logo img{
    display: block;
    margin: 0 auto;
    max-width: 100%;
}
.n-title{
    position: absolute;
    top: 40%;
    left: 0;
    width: 100%;
}
.n-title img{
    display: block;
    margin: 0 auto;
    max-width: 100%;
}
.n-ewm{
    position: absolute;
    bottom: 10%;
    left: 10%;
    width: 80%;
}
.n-ewm img{
    display: block;
    margin: 0 auto;
    max-width: 100%;
}
.n-ewm ol {
    margin-top:15%;
}
.n-ewm ol li{
    float: left;
    width: 33%;
}
.nav>div>div img{
    max-width: 100%;
}
.nav>div:nth-child(2){
    background:url("../images/nav01.jpg") no-repeat center;
    background-size: cover;
    transition: 300ms ease; 
    -webkit-transition: 300ms ease; 
    transition-delay: 0.1s;
  
}
.nav>div:nth-child(3){
    background:url("../images/nav02.jpg") no-repeat center;
    background-size: cover;
    transition: 300ms ease; 
    -webkit-transition: 300ms ease; 
    transition-delay: 0.1s;   
}
.nav>div:nth-child(4){
    background:url("../images/nav03.jpg") no-repeat center;
    background-size: cover;
    transition: 300ms ease; 
    -webkit-transition: 300ms ease; 
    transition-delay: 0.1s;   
}
.nav>div:nth-child(5){
    background:url("../images/nav04.jpg") no-repeat center;
    background-size: cover;
    transition: 300ms ease; 
    -webkit-transition: 300ms ease; 
    transition-delay: 0.1s;   
}
.nav>div>div ul{
    position: absolute;
    padding-bottom:5%;
    padding-left: 25px;
    bottom: 0;
    height: 300px;
    background: url(../images/n-line.png) no-repeat left bottom;
}

.nav h4 a{
    font-size: 30px;
    color: #fff;
    margin-bottom:10%;
    /*opacity: 0;*/
    -webkit-transition: 500ms 0s all linear;
    -moz-transition: 500ms 0s all linear;
    -ms-transition: 500ms 0s all linear;
    -o-transition: 500ms 0s all linear;
    transition: 500ms 0s all linear;
}
.nav a{
    display: block;
    color: #fff;
    font-size: 18px;
    line-height: 50px;
    /*opacity: 0;*/
    -webkit-transition: 500ms 0s all linear;
    -moz-transition: 500ms 0s all linear;
    -ms-transition: 500ms 0s all linear;
    -o-transition: 500ms 0s all linear;
    transition: 500ms 0s all linear;
}
.nav_product ul li div{
    margin: 2% 0;
}

.nav_xs>div{
    height: 78.125vw;
}

.banner{
    /*height: 100%;*/
    /*position: relative;*/
    height:50.8vw;
}
.banner .pulse{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

.banner-dian{
    right: 5%!important;
}
.banner-dian span{
    margin: 10px 0!important;
}
.banner-dian .swiper-pagination-bullet{
    width: 10px!important;
    height: 10px!important;
    border: 1px solid #fff!important;
    background: none!important;
    opacity: 1!important;
}
.banner-dian .swiper-pagination-bullet-active{
    width: 10px!important;
    height: 40px!important;
    background: #fff!important;
    border-radius: 20px!important;
}
/*品牌故事*/
.index-com{
    width: 100%;
    position: relative;
    padding: 5% 0 0 0;
    height:43vw;
}
.index-com .container{
    height: 100%;
}
.comleft{
    width: 50%;
    float: left;
    position: relative;
    height: 100%;
}
.com-pic1 img{
    max-width: 100%;
}
.comleft p{
    width: 50%;
    color: #4f4f4f;
    font-size: 16px;
    line-height: 30px;
    padding: 5% 0;
}
.com-more{
    display: block;
    width: 105px;
    height: 30px;
    background: url(../images/cmore.png) no-repeat center right;
    color: #1c1c1c;
    font-size: 16px;
    text-align: left;
    line-height: 30px;
}
.com-pic2{
    width: 100%;
    position: absolute;
    bottom:0;
    z-index: -1;
}
.com-pic2 img{
    display: block;
    max-width: 100%;
}
.comright{
    width: 50%;
    float: right;
    height: 100%;
    position: relative;
}
.cr-top{
    width: 100%;
    position: relative;
}
.crleft{
    width: 27%;
    float: left;
}
.crpic1{
    width: 100%;
}
.crpic1 img{
    display: block;
    float: right;
    max-width: 100%;
}
.crleft p{
    color: #4f4f4f;
    font-size: 16px;
    line-height: 30px;
    text-align: right;
    padding-top: 37px;
}
.crright{
    width: 62%;
    float: right;
}
.crpic2{
    width: 100%;
}
.crpic2 img{
    display: block;
    float: right;
    max-width: 100%;
}
.crright p{
    color: #4f4f4f;
    font-size: 16px;
    line-height: 30px;
    text-align: right;
    padding-top: 37px;
}
.cr-bottom{
    position: absolute;
    bottom: 0;
}
.cr-bottom img{
    max-width: 100%;
    display: block;
}
/*招牌肚包鸡*/
.in-zhaopai{
    position: relative;
    z-index: 50;
    padding: 4% 0;
    background-image: url(../images/zhaopai.jpg);
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}
.zp-title{
    text-align: center;
}
.zp-title img{
    display: block;
    max-width: 100%;
    margin: 0 auto;
}
.zp-title p{
    color: #fff;
    font-size: 16px;
}
.zp-list{
    padding-top: 3%;
}
.zp-list img{
    max-width: 100%;
}
.zp{
    width: 100%;
    border-radius: 10px;
    background: none!important;
}
/*菜品展示*/
.in-caipin{
    position: relative;
    width: 100%;
    padding: 3% 0;
}
.cp-title{
    text-align: center;
}
.cp-title img{
    display: block;
    max-width: 100%;
    margin: 0 auto;
}
.cp-title p{
    color: #3a3a3a;
    font-size: 16px;
}
.cp-list{
    margin-top: 3%;
    position: relative;
}
.cp{
    width: 100%;
    border-radius: 10px;
    background: none!important;
}
.cp-list img{
    max-width: 100%;
}
.cp-next{
    right: -80px!important;
    background: url(../images/cp-right.png) no-repeat center center !important;
    width: 37px!important;
    outline: none;
}
.cp-next:hover{
    background: url(../images/cp-right-ho.png) no-repeat center center !important;
}
.cp-next:after{
    display: none!important;
}
.cp-prev{
    left: -80px!important;
    display: none;
    background: url(../images/cp-left.png) no-repeat center center !important;
    width: 37px!important;
    outline: none;
}
.cp-prev:hover{
    background: url(../images/cp-left-ho.png) no-repeat center center !important;
}
.cp-prev:after{
    display: none!important;
}
/*视频*/
.in-video{
    width: 100%;
    position: relative;
    
}
.in-video .container{
    border-top: 1px solid #b5b5b5;
    padding: 4% 0;
}
.video-left{
    float: left;
    width: 45%;
    height: 580px;
    position: relative;
}
.video-left .video{
    width: 100%;
    height: 400px;
}
.video-left .video img{
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    object-fit:cover;
}
.video-left ul{
    margin-top: 8%;
    position: absolute;
    bottom: 0;
    width: 100%;
}
.video-left ul li{
    width: 20%;
    float: left;
    text-align: center;
}
.video-left ul li img{
    display: block;
    max-width: 100%;
    margin: 0 auto;
}
.video-left ul li p{
    color: #000000;
    font-size: 16px;
    padding-top: 15px;
}
.video-right{
    width: 53%;
    float: right;
    background: url(../images/d9.png) no-repeat top right;
    height: 580px;
}
.v-title{
    width: 65%;
}
.v-title img{
    display: block;
    max-width: 100%;

}
.video-right p{
    color: #373737;
    font-size: 16px;
    line-height: 30px;
    padding: 5% 0;
    width: 65%;
}
.video-right a{
    display: block;
    width: 135px;
    height: 30px;
    background: url(../images/cmore.png) no-repeat center right;
    color: #1c1c1c;
    font-size: 16px;
    text-align: left;
    line-height: 30px;
}
/*ban*/
.in-ban{
    position: relative;
    z-index: 50;
    padding: 4% 0;
    background-image: url(../images/ban.jpg);
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}
.in-ban img{
    display: block;
    margin: 0 auto;
    max-width: 100%;
}
.in-ban p{
    color: #fff;
    font-size: 16px;
    line-height: 40px;
    text-align: center;
    padding-top: 2%;
    max-width: 60%;
    margin: 0 auto;
}
/*新闻*/
.in-news{
    width: 100%;
    position: relative;
    padding: 5% 0;
}
.n-left{
    width: 48%;
    float: left;
    background: url(../images/f1_01.png) no-repeat top left;
}
.n-left ul{
    width: 68%;
    float: right;
}
.n-left ul li{
    width: 100%;
    margin-bottom: 70px;
}
.n-left ul li:last-child{
    margin-bottom: 0;
}
.n-left ul li .n-time{
    width: 20%;
    float: left;
}
.n-left ul li .n-time span{
    font-family: ziti;
    font-size: 80px;
    color: #162a1e;
}
.n-left ul li .n-time p{
    font-family: ziti;
    font-size:24px;
    color: #162a1e;
}
.n-left ul li .n-text{
    width: 75%;
    float: right;
}
.n-left ul li .n-text h3{
    color:#212121;
    font-size: 24px; 
    padding: 20px 0;
}
.n-left ul li .n-text p{
    color: #212121;
    font-size: 16px;
    font-weight: 100;
    line-height: 30px;
}
.n-right{
    width: 40%;
    float: right;

}
.n-right img{
    max-width: 100%;
}
/*底部*/
.foot{
    width: 100%;
    background: #162a1e;
    padding: 3% 0;
}
.foot1{
    float: left;
    width: 15%;
}
.f-tel{
    background: url(../images/ftel.png) no-repeat center left;
    color: #fff;
    font-family: ziti;
    font-size: 26px;
    text-indent: 30px;
}
.foot2 p{
    color:#fff;
    font-size: 14px;
}
.foot2{
    float: left;
    width: 23%;
    height: 154px;
    position: relative;
}
.foot2 p:before{
    display: block;
    content: '';
    width: 208px;
    height: 2px;
    background: #5c6a62;
    margin: 30px 0;
}
.foot2 p{
    color:#fff;
    font-size: 14px;
    line-height: 28px;
}
.fline{
    right:25%;
    position: absolute;
    top: 0;
}
.foot3{
    float: left;
    width: 32%;
    height: 154px;
    position: relative;
}
.f-add{
    background: url(../images/fadd.png) no-repeat center left;
    color: #fff;
    font-family: ziti;
    font-size: 26px;
    text-indent: 30px;
}
.foot3 p{
    color:#fff;
    font-size: 14px;
    
}
.foot3 p:before{
    display: block;
    content: '';
    width: 208px;
    height: 2px;
    background: #5c6a62;
    margin: 30px 0;
}
.foot3 p{
    color:#fff;
    font-size: 14px;
    line-height: 28px;
}
.foot4{
    float: left;
    width: 20%;
    position: relative;
}
.foot4 .fline{
    right:15%;
}
.foot4 ul{
    width: 80%;
}
.foot4 ul li{
    width: 50%;
    float: left;
    line-height: 40px; 
}
.foot4 ul li a{
    color:#7b827d;
    font-size: 16px;
}
.foot4 ul li:hover a{
    color: #fff;
}
.foot5{
    width: 10%;
    float: right;
}
.foot5 img{
    
}
/*子页面样式*/
.banner_s{
    width: 100%;
    position: relative;
    overflow: hidden;
}
.banner_small{
    position: relative;
    height: 460px;
}
.ban-img{
    width: 100%;
    height: 100%;
}
.ban-img img{
    display: block;
    height: 100%;
    object-fit:cover;
    width:100%;

}
/*品牌介绍页面*/
.info-about{
    width: 100%;
    position: relative;
    padding: 5% 0;
    background: #f1f1f1;
    height: 575px;
}
.about-left{
    float: left;
    width: 50%;
    position: relative;
    z-index: 100;
}
.ab-title span{
    padding-left: 10px;
}
.about-con{
    padding: 8% 5%;
    background: #fff;
    width: 90%;
    border-radius: 30px;
    margin-top: 5%;
}

.ab-biao{
    width: 45%;
    float: left;
}
.ab-biao img{
    display: block;
    max-width: 100%;
}
.ab-tit{
    width: 46%;
    float: right;  
}
.ab-tit p{
    color: #4f4f4f;
    font-size: 16px;
    line-height: 30px;
}
.ab-tit p:nth-child(2){
    padding-top: 20px;
}
.about-w{
    color: #202020;
    font-size: 18px;
    font-weight: bold;
    padding-top: 8%;
}
.about-right{
    position: absolute;
    right: 0;
    width: 55%;
    height: 575px;
}
.about-right img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit:cover;
}
.about2{
    width: 100%;
    position: relative;
    padding: 4% 0;
}
.about2 .container{
    position: relative;
}
.about2-title{
    position: absolute;
    right: 0;
    top: 0;
    z-index: 100;
}
.about2-title img{
    display: block;
    float: right;
    max-width: 100%;
}
.about2-title p{
    font-size: 18px;
    color: #202020;
    text-align: right;

}
.about2-list{
    position: relative;
}
.gushi .swiper-slide:nth-child(1){
    background: url(../images/ab7.png) no-repeat center right;
    background-size:auto 50%;
}
.gushi .swiper-slide:nth-child(2){
    background: url(../images/ab10.png) no-repeat center right;
    background-size:auto 50%;
}
.gushi .swiper-slide:nth-child(3){
    background: url(../images/ab13.png) no-repeat center right;
    background-size:auto 50%;
}
.gushi .swiper-slide:nth-child(4){
    background: url(../images/ab16.png) no-repeat center right;
    background-size:auto 50%;
}
.gs-img{
    width: 40%;
    float: left;
}
.gs-img img{
    display: block;
    max-width: 100%;
}
.about2-li{
    position: relative;
    width: 100%;
}
.gushi .swiper-slide:nth-child(3) .gs-tit{
    top: 60%;
}
.gs-tit{
    width: 65%;
    position: absolute;
    right: 0;
    text-align: left;
    top: 50%;
    transform:translateY(-50%);
}
.gs-tit small{
    color: #bababa;
    font-size: 18px;
    display: block;
    padding-left: 10%;
}
.gs-title:before{
    display: block;
    content: '';
    width: 200px;
    height: 1px;
    background: url(../images/ab-line.png) no-repeat center center; 
    position: absolute;
    left: -15%;
    top: 50%;
    transform:translateY(-50%);
}
.gs-title{
    width: 100%;
    position: relative;
    padding: 3% 0;
}
.gs-title img{
    display: block;
    padding-left:10%;
}
.gs-tit span{
    color: #242424;
    font-size: 16px;
    line-height:30px;
    display: block;
    padding-left: 10%;
    width: 65%;
}
.gushi-dian .swiper-pagination-bullet-active{
    background: #26572d;
}
.about3{
    width: 100%;
    position: relative;
    padding: 0 0 5% 0; 
}
.about3 .container{
    border-top: 1px solid #cdcdcd;
    padding-top: 4%;
}
.about3 ul li:nth-child(1){
    width: 28%;
    float: left;
    color: #242424;
    font-size: 16px;
    line-height: 35px;
}
.about3 ul li:nth-child(2){
    width: 44%;
    float: left;
}
.about3 ul li:nth-child(3){
    width: 28%;
    float: right;
    color: #242424;
    font-size: 16px;
    line-height: 35px;
}
.about3 ul li img{
    display: block;
    margin: 0 auto;
    max-width: 100%;
}
.about4{
    position: relative;
    z-index: 50;
    padding: 5% 0;
    background-image: url(../images/about-bg.jpg);
    background-position: center;
    background-size: cover;
    background-attachment: fixed; 
}
.about4-con{
    width: 100%;
    position: relative;
    height: 170px;
}
.about4-left{
    position: absolute;
    left: 0;
    top: 50%;
    transform:translateY(-50%);
}
.about4-left img{
    display: block;
    max-width: 100%;
}
.about4-right{
    position: absolute;
    right: 0;
    top: 50%;
    text-align: right;
    transform:translateY(-50%);
}
.about4-right h3{
    color: #fff;
    font-size: 60px;
    font-weight: 400;
}
.about4-right p{
    color: #fff;
    font-size: 16px;
    line-height: 30px;
}
.about5{
    width: 100%;
    position: relative;
    padding: 5% 0;
}
.about5-left{
    width: 49%;
    float: left;
}
.about5-left p{
    color: #242424;
    font-size: 16px;
    line-height: 30px;
    padding: 5% 0 6% 0;
}
.about5-left img{
    max-width: 100%;
}
.about5-right{
    width: 40%;
    float: right;
}
.about5-right p{
    color: #242424;
    font-size: 16px;
    line-height: 30px;
}
.about5-right img{
    max-width: 100%;
    display: block;
    padding: 10% 0 6% 0;
}
.about6{
    width: 100%;
    position: relative;
    padding: 0 0 5% 0; 
}
.about6 .container{
    border-top: 1px solid #cdcdcd;
    padding-top: 4%;
}
.about6-title{
    width: 100%;
    text-align: center;
    margin: 0 auto;
}
.about6-title img{
    display: block;
    max-width: 100%;
    margin: 0 auto;
}
.about6-title p{
    color: #898989;
    font-size: 16px;
    padding-top: 1%;
}
.about6-list{
    position: relative;
}
.huanjin{
    margin-top: 30px;
}
.env-pic{
    width: 100%;
    height: 300px;
    border-radius: 20px;
}
.env-pic img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit:cover;
    border-radius: 20px;
}
.hj-dian{
    position: absolute;
    bottom:50px;
    left: 50%;
    transform:translateX(-50%)!important;
}
.hj-dian span{

    margin-right: 8px;
}
.hj-dian .swiper-pagination-bullet-active{
    background: #377e3e!important;
}
/*新闻内页*/
.info-news{
    width: 100%;
    position: relative;
    padding: 5% 0;
}
.xinwen-title{
    width: 100%;
}
.xw-w{
    width: 345px;
    float: right;
}
.xw-w p{
    color: #959595;
    font-size: 16px;
    line-height: 30px;
}
.xinwen-one{
    width: 100%;
    padding: 6% 0;
    position:relative;
}
.xinwen-one ul li{
    width: 32%;
    margin-right: 2%;
    float: left;
}
.xinwen-one ul li:nth-child(3){
    margin-right: 0;
}
.xw-img{
    width: 100%;
    height: 340px;
    background: #eee;
}
.xw-img img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit:cover;
}
.xw-tit{
    width: 100%;
    padding:6% 0; 
}
.xw-tit h3{
    color: #212121;
    font-size: 24px;
    font-weight: normal;
}
.xw-tit p{
    color: #9b9b9b;
    font-size: 16px;
    padding-top: 10px;
    font-weight: 100;
}
.xinwen-other{
    width: 100%;
    padding: 5% 0 0 0;
    border-top: 1px solid #dbdbdb;
}
.xinwen-other ul li{
    width: 28%;
    float: left;
    margin-right: 8%;
    margin-bottom: 5%;
}
.xinwen-other ul li:nth-child(3n){
    margin-right: 0;
}
.xw-time{
    width: 30%;
    float: left;
    text-align:center;
}
.xw-time span{
    color: #377e3e;
    font-size: 80px;
    font-family: ziti;
}
.xw-time p{
    color: #377e3e;
    font-family: ziti;
    font-size: 24px;
}
.xw-text{
    width: 68%;
    float: right;
}
.xw-text h3{
    color: #212121;
    font-size: 24px;
    font-weight: normal;
    padding-top: 15px;
    width: 100%;
    overflow: hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}
.xw-text p{
    color: #9b9b9b;
    font-size: 16px;
    padding-top: 10px;
    font-weight: 100;
    padding-top: 20px;
    line-height: 30px;
}
/*联系我们*/
.info-contact{
    width: 100%;
    position: relative;
    padding: 5% 0 2% 0;
}
.mes-left{
    width: 55%;
    float: left;
    background: url(../images/co-line.png) no-repeat center right;    
}
.mes-left img{
    max-width: 100%;
}
.mes-left p{
    color: #949494;
    font-size: 14px;
    padding: 3% 0;
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { /* WebKit*/
    color:    #000000;
}
input:-moz-placeholder, textarea:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #000000;
}
input::-moz-placeholder, textarea::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #000000;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder { /* IE 10+ */
    color:    #000000;
}
.mes-left form{
    width: 80%;
}
.mes-left form input{
    width: 48%;
    float: left;
    border: 2px solid #e6e6e6;
    height: 50px;
    line-height: 50px;
    margin-right: 2%;
    margin-bottom: 2%;
    font-size: 16px;
    text-indent: 20px;
}
.mes-left form textarea{
    width: 99%;
    float: left;
    border: 2px solid #e6e6e6;
    height: 100px;
    line-height: 50px;
    margin-right: 2%;
    margin-bottom: 2%;
    font-size: 16px;
    text-indent: 20px;
    margin-bottom: 20px;
}
.mes-left form #submit{
    width: 155px;
    height: 45px;
    line-height: 41px;
    text-align: center;
    background: #377e3e;
    color: #fff;
    font-size: 16px;
    border: 2px solid #377e3e;
    text-indent: 0;
}
.mes-left form input:nth-child(2n){
    margin-right: 0;
}
.lianxi-right{
    width: 38%;
    float: right;
}
.lianxi-right h3{
    color: #000;
    font-size: 28px;
}
.lianxi-right ul{
    width: 60%;
    float: left;
}
.lianxi-right ul li{
    width: 100%;
    padding-left: 30px;
    margin:18% 0;
}
.lianxi-right ul li strong{
    font-size: 18px;
    color: #000;
}
.lianxi-right ul li p{
    font-size: 16px;
    color: #000;
    padding-top: 20px;
}
.lianxi-right ul li:nth-child(1){
    background: url(../images/co3.png) no-repeat top 2px left;

}
.lianxi-right ul li:nth-child(2){
    background: url(../images/co4.png) no-repeat top 2px left;
}
.lianxi-right ul li:nth-child(3){
    background: url(../images/co5.png) no-repeat top 2px left;
}
.ewm{
    width: 31%;
    float: right;
}
.ewm img{
    display: block;
    max-width: 100%;
}
.ditu{
    padding-bottom: 5%;
}
#allmap{
    height: 440px;
}
/*产品中心*/
.pro1{
    width: 100%;
    padding: 5% 0;
    position: relative;
}
.pro1-title{
    text-align: center;
    margin:0 auto;
}
.pro1-title img{
    display: block;
    margin: 0 auto;
    max-width: 100%;
}
.pro1-title p{
    width: 38%;
    margin: 0 auto;
    text-align: center;
    color: #959595;
    font-size: 16px;
    padding-top: 20px;
    line-height: 28px;
}
.pro1-list ul {
    padding-top: 4%;
}
.pro1-list ul li{
    width: 48%;
    float: left;
    margin-right: 2%;
    margin-bottom: 2%;
}
.pro1-list ul li:nth-child(2n){
    margin-right: 0;
}
.pro1-text{
    padding-top: 20px;
}
.pro1-text h3{
    color: #1e1e1e;
    font-size: 34px;
    text-align: left;
    line-height: 40px;
    font-weight: 100;
}
.pro1-text span{
    color: #9e9e9e;
    font-size: 16px;
    float: right;
}
.pro1-img{
    width: 100%;
    height: 430px;
}
.pro1-img img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit:cover;
}
.pro2{
    position: relative;
    z-index: 50;
    padding: 5% 0;
    background-image: url(../images/pro2.jpg);
    background-position: center;
    background-size: cover;
    background-attachment: fixed; 
    width: 100%;
}
.pro2 h3{
    color: #fff;
    font-size: 58px;
    text-align: center;
    font-weight: 100;
    padding-bottom: 2%;
}
.pro2 p{
    color: #fff;
    font-size: 15px;
    text-align: center;
    line-height: 30px;
}
.pro3{
    width: 100%;
    position: relative;
    padding: 5% 0;
}
.pro3-list{
    padding-top: 5%;
    position: relative;
}
.gallery-top {
    height: 80%;
    width: 79%!important;
    float: left;
    height: 750px!important;
}
.gallery-thumbs {
    height: 20%;
    box-sizing: border-box;
    padding: 10px 0;
    width: 20%!important;
    float: right;
    height: 745px!important;
}
.gallery-thumbs .swiper-slide {
    height: 100%;
    opacity: 0.8;
}
.gallery-thumbs .swiper-slide-thumb-active {
    opacity: 1;
}
.pro3-img{
    width: 100%;
    height: 745px;
}
.pro3-img img{
    display:block;
    width: 100%;
    height:100%;
    object-fit:cover; 
}
.pro3 .container{
    position: relative;
}
.p-line{
    position: absolute;
    left: 6%;
    top: 2%;
    z-index: 10;
}
.pro3-tit{
    position: absolute;
    z-index: 10;
    top: 10%;
    left: 5%;
    color: #fff;
    writing-mode: vertical-lr;/*从左向右 从右向左是 writing-mode: vertical-rl;*/  
    writing-mode: tb-lr;/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/  
    font-size: 50px;
    font-weight: 100;

}
.pro4-img{
    width: 100%;
    height: 180px;
}
.pro4-img img{
    display:block;
    width: 100%;
    height:100%;
    object-fit:cover; 
}
.gallery-thumbs .swiper-slide{
    width: 100%!important;
    margin-bottom: 2%;
}
.pro3-dian .swiper-pagination-bullet{
    background: #fff!important;
}
.pro3-dian .swiper-pagination-bullet-active{
    height: 30px!important;
    border-radius: 20px;
}
/*产品详情*/
.proinfo{
    width: 100%;
    position: relative;
}
.proinfo-img{
    width:55%;
    float: left;
}
.proinfo-img img{
    display: block;
    max-width: 100%;
}
.pro-article{
    width: 43%;
    float: right;
}
.pro-article p{
    line-height: 35px;
    font-size: 16px;
}
/*页码*/
.pagebg{
    text-align: right;
}
.page a{
    padding:2px 8px;
    color: #fff;
    background: #eee;
}
.page a:hover{
    background: #377e3e;
    color: #fff;
}
.page .current{
    background: #377e3e;
    padding:2px 8px;
    color: #fff;
}
#prev_next li{
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #dbdbdb;
}
#prev_next li a{
    background: none;
}
#prev_next li a:hover {
    color: #377e3e;
    font-weight: bold;
    background: none;
}
.Condense_text{
    text-align: center;
    margin: 4% 0 2% 0;
}
.news-article p{
    font-size: 16px;
    line-height: 28px;
}
.news-article p img{
    display: block;
    max-width: 100%;
    margin: 0 auto;
}
.Condense_text p{
    width:80%;
    margin: 0 auto;
    font-size: 14px;
    color: #777777;
    line-height: 2vw;
    overflow: hidden;
}
.mask{
    width:100%;
    height:3vw;
    position: relative;
    overflow: hidden;
}
.mask h3{
    font-size: 30px;
    color: #333;
    font-weight: normal;
    position: absolute;
    left:50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 100%;
}
.mask b{
    width: 50%;
    height: 100%;
    position: absolute;
    top:0;
    left:0%;
    background: #fff;
    -webkit-transition: 100ms 0s all linear;
    -moz-transition: 100ms 0s all linear;
    -ms-transition: 100ms 0s all linear;
    -o-transition: 100ms 0s all linear;
    transition: 100ms 0s all linear;
}
.mask b:nth-of-type(2){
    left:50%;
}
.mask small{
    font-size: 8px;
    color: #777777;
    height: 1.5vw;
    text-transform: uppercase;
    position: absolute;
    left:50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    border-bottom:1px solid #848484;
}
.com_img{
    position: relative;
    height: 36vw;
    overflow: hidden;
}
.com_img img{
    width: 100%;
    position: absolute;
    top:50%;
    left:50%;
    -webkit-transition: 500ms 0s all linear;
    -moz-transition: 500ms 0s all linear;
    -ms-transition: 500ms 0s all linear;
    -o-transition: 500ms 0s all linear;
    transition: 500ms 0s all linear;
    -webkit-transform:translate(-50%,-50%);
    -moz-transform:translate(-50%,-50%);
    -ms-transform:translate(-50%,-50%);
    -o-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%);
}
.com_img:hover img{
    -webkit-transform:translate(-50%,-50%) scale(1.05);
    -moz-transform:translate(-50%,-50%) scale(1.05);
    -ms-transform:translate(-50%,-50%) scale(1.05);
    -o-transform:translate(-50%,-50%) scale(1.05);
    transform:translate(-50%,-50%) scale(1.05);
}
.com_img p{
    font-size: 26px;
    color: #6a6a6a;
    position: absolute;
    top:14%;
    right:6%;
    -webkit-transition: 500ms 0s all linear;
    -moz-transition: 500ms 0s all linear;
    -ms-transition: 500ms 0s all linear;
    -o-transition: 500ms 0s all linear;
    transition: 500ms 0s all linear;
}
.com_img:hover p{
    right:8%;
}
.com_img b{
    display: block;
    width: 0;
    height: 0;
    opacity: 0;
    border:1px solid #fff;
    position: absolute;
    top:50%;
    left:50%;
    -webkit-transition: 500ms 0s all linear;
    -moz-transition: 500ms 0s all linear;
    -ms-transition: 500ms 0s all linear;
    -o-transition: 500ms 0s all linear;
    transition: 500ms 0s all linear;
    -webkit-transform:translate(-50%,-50%);
    -moz-transform:translate(-50%,-50%);
    -ms-transform:translate(-50%,-50%);
    -o-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%);
}
.com_img:hover b{
    width: 92%;
    height: 83%;
    opacity:1;
}

/*琥珀文化图片展示*/
.showcom{
    margin-bottom:12%;
}
.showcom li{
    float:left;
    width:32%;
    margin-right:2%;
}
.showcom li:last-child{
    margin-right:0;
}
.showcom li b{
    display: block;
    position: relative;
    width: 100%;
    height:16vw;
    overflow: hidden;
    margin-bottom:7%;
}
.showcom li b img{
    max-width: 100%;
    height:100%;
    position: absolute;
    top:50%;
    left:50%;
    -webkit-transition: 500ms 0s all linear;
    -moz-transition: 500ms 0s all linear;
    -ms-transition: 500ms 0s all linear;
    -o-transition: 500ms 0s all linear;
    transition: 500ms 0s all linear;
    -webkit-transform:translate(-50%,-50%);
    -moz-transform:translate(-50%,-50%);
    -ms-transform:translate(-50%,-50%);
    -o-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%);

}
.show_compic h5{
    font-size: 22px;
    color: #787777;
    margin-bottom:2%;
}
.show_compic p{
    font-size: 14px;
    color: #787777;
    line-height: 1.8vw;
}
.showcom li:hover b img{
    -webkit-transform:translate(-50%,-50%) scale(1.06);
    -moz-transform:translate(-50%,-50%) scale(1.06);
    -ms-transform:translate(-50%,-50%) scale(1.06);
    -o-transform:translate(-50%,-50%) scale(1.06);
    transform:translate(-50%,-50%) scale(1.06);
}
.showcom li:hover .lines_w{
    -webkit-animation: line 2s linear 0s infinite normal;
    animation: line 2s linear 0ms infinite normal;
}
.showcom li:hover .lines_h{
    -webkit-animation: h_line 2s linear 0ms infinite alternate;
    animation: h_line 2s linear 0ms infinite alternate;
}

/*品牌实力页面*/
.pow_img{
    position: relative;
    height: 31vw;
    overflow: hidden;
}
.pow_img img{
    width:49%;
    position: absolute;
    -webkit-transition: 500ms 0s all linear;
    -moz-transition: 500ms 0s all linear;
    -ms-transition: 500ms 0s all linear;
    -o-transition: 500ms 0s all linear;
    transition: 500ms 0s all linear;

}
.pow_img img:nth-child(1){
    top:0%;
    left:0%;
}
.pow_img img:nth-child(2){
    top:0;
    right:0;
}
.pow_img img:nth-child(3){
    left:0;
    bottom:0;
}
.pow_img img:nth-child(4){
    right:0;
    bottom:0;
}


.showpow{
    margin-bottom:5%;
}
.showpow li{
    float:left;
    width: 31%;
    margin-bottom: 3%;
    height: 17vw;
    position: relative;
    margin-right:2%;
}
.showpow li:last-child{
    margin-right:0;
}

.showpow li b{
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 15vw;
    overflow: hidden;
}
.showpow li b img{
    max-width: 100%;
    height:100%;
    position: absolute;
    top:50%;
    left:50%;
    -webkit-transition: 500ms 0s all linear;
    -moz-transition: 500ms 0s all linear;
    -ms-transition: 500ms 0s all linear;
    -o-transition: 500ms 0s all linear;
    transition: 500ms 0s all linear;
    -webkit-transform:translate(-50%,-50%) scale(1.08);
    -moz-transform:translate(-50%,-50%) scale(1.08);
    -ms-transform:translate(-50%,-50%) scale(1.08);
    -o-transform:translate(-50%,-50%) scale(1.08);
    transform:translate(-50%,-50%) scale(1.08);

}
.showpow li:hover b img{
    -webkit-transform:translate(-47%,-50%) scale(1.08);
    -moz-transform:translate(-47%,-50%) scale(1.08);
    -ms-transform:translate(-47%,-50%) scale(1.08);
    -o-transform:translate(-47%,-50%) scale(1.08);
    transform:translate(-47%,-50%) scale(1.08);
}
.showpow .pow_n{
    position: absolute;
    right: -26px;
    top: -28px;
    z-index: 100;
}
.showpow li p{
    position: absolute;
    bottom:0;
    width: 100%;
    left:0;
    font-size: 20px;
    color: #3a3a3a;
    text-align: center;
}

.pow_text{
    position: absolute;
    top: 0%;
    left:0%;
    opacity:0;
    width: 100%;
    height:100%;
    background: rgba(0, 0, 0, 0.68);
    -webkit-transition: 400ms 0s all linear;
    -moz-transition: 400ms 0s all linear;
    -ms-transition: 400ms 0s all linear;
    -o-transition: 400ms 0s all linear;
    transition: 400ms 0s all linear;
}
.showpow li:hover .pow_text{
    opacity: 1;
}
.showpow li .pow_text i{
    position: absolute;
    display: block;
    width:30%;
    top: 20%;
    font-weight: lighter;
    left:5%;
    border-right:1px solid #fff;
    padding-right:2%;
    color: #ffffff;
    font-size: 16px;
    text-transform: uppercase;
    -webkit-transition: 400ms 0s all linear;
    -moz-transition: 400ms 0s all linear;
    -ms-transition: 400ms 0s all linear;
    -o-transition: 400ms 0s all linear;
    transition: 400ms 0s all linear;

}
.showpow li:hover .pow_text i{
    left:6%;
}


.pow_gy{
    height:26vw;
    overflow: visible;
}
.powtext_show{
    position: absolute;
    top: 28%;
    left: 45%;
    width: 20%;
    height: 17vw;
    text-align: center;
    -webkit-transition: 400ms 0s all linear;
    -moz-transition: 400ms 0s all linear;
    -ms-transition: 400ms 0s all linear;
    -o-transition: 400ms 0s all linear;
    transition: 400ms 0s all linear;

}
.pow_gy:hover .powtext_show{
    top:27%;
}
.powtext_show img:first-child{
   float:left;
    height: 13vw;
}
.powtext_show img:last-child{
   float:right;
    height:15vw;
    position: relative;
    -webkit-transition: 300ms 0s all linear;
    -moz-transition: 300ms 0s all linear;
    -ms-transition: 300ms 0s all linear;
    -o-transition: 300ms 0s all linear;
    transition: 300ms 0s all linear;
}

.pow_gy i{
    display: block;
    position: absolute;
    left: 50%;
    top: 85%;
    opacity:1;
    /*height: 10vw;*/
    width: 1vw;
    background: #cacaca;
}
.xxshow{
    float: right;
    width: 35%;
    padding-right: 11%;
    margin-top: 5%;
    height: 8vw;
}

.xxshow h4{
    font-size: 20px;
    color: #656565;
    margin-bottom: 4%;
}
.xxshow p{
    font-size: 16px;
    color: #656565;
    line-height:30px;
}


/*仓库生产车间*/
.ck{
    width: 50%;
    position: relative;
    height:10vw;
    margin-bottom: 3%;
    left:33%;
}
.sc{
    left:18%;
}
.ck b{
    position: absolute;
    display: block;
    width: 45%;
    height: 100%;
    overflow: hidden;
}
.ck b img{
    position: absolute;
    top:0;
    left:0;
    width:103%;
    height:103%;
    -webkit-transition: 400ms 0s all linear;
    -moz-transition: 400ms 0s all linear;
    -ms-transition: 400ms 0s all linear;
    -o-transition: 400ms 0s all linear;
    transition: 400ms 0s all linear;
}
.ck b:hover img{
    left:-10px;
}
.ck i{
    opacity: 0;
    position: absolute;
    top: 56%;
    left: 40%;
    z-index:1000;
    background: #cacaca;
    display: block;
    width: 0vw;
    height: 0.4vw;
    -webkit-transition: 400ms 0s all linear;
    -moz-transition: 400ms 0s all linear;
    -ms-transition: 400ms 0s all linear;
    -o-transition: 400ms 0s all linear;
    transition: 400ms 0s all linear;
}
.ckshow{
    position: absolute;
    bottom:0;
    right: 0;
    width: 42%;
    height: 7vw;
}

.ckshow h4{
    font-size: 1.2vw;
    color: #656565;
    margin-bottom: 4%;
}
.ckshow p{
    font-size: 0.75vw;
    color: #656565;
    line-height:1.75vw;
}

/*联系我们子页面*/
.contact_zy h3{
    font-size: 1.7vw;
    color: #686868;
    font-weight: normal;
    margin-bottom: 2%;
    margin-top: 3%;
}
.contact_zy h3 span{
    font-size: 0.5vw;
    color: #686868;
    text-transform: uppercase;
    font-weight: lighter;

}
.contact_zy>p{
    font-size: 1vw;
    color: #6e6e6e;
}

.contact_z{
    background: #343437;
    margin-top:5%;
    position: relative;
    margin-bottom: 10%;
}
.contact_mes{
    float:left;
    padding-left: 11%;
    padding-top: 6%;
    width: 50%;
    box-sizing: border-box;
}
.contact_mes div{
    background: url(../images/address.png) no-repeat left bottom;
    padding-left: 76px;
    margin-bottom: 12%;
    height: 65px;
}
.contact_mes div h5{
    font-weight: normal;
    color: #fff;
    font-size: 20px;
    padding-top: 0.7vw;
    margin-bottom: 0.5vw;
}
.contact_mes div small{
    font-size: 12px;
    text-transform: uppercase;
    color: #fff;
}
.contact_mes>p{
    font-size: 14px;
    color: #fff;
    line-height: 42px;
}
.contact_form{
    float:right;
    padding-right: 11%;
    margin-top: 6%;
    width: 50%;
    box-sizing: border-box;
}




.contact_z>b{
    display: block;
    border-left:15px solid transparent;
    border-right:15px solid transparent;
    border-top:15px solid #343437;
    position: absolute;
    top:28vw;
    left: 50%;
    -webkit-transform: translatex(-50%);
    -moz-transform: translatex(-50%);
    -ms-transform: translatex(-50%);
    -o-transform: translatex(-50%);
    transform: translatex(-50%);
    z-index:1000;
}
.contact_z>.clear{
    height:28vw;
}


/*商务合作子页*/
.show_cooppic h5{
    text-align: left;
}

.show_cooppic p{
    text-align: left;
    width: 100%;
}
.show_cooppic li{
    margin-bottom:5%;
    width:49%;
    margin-right:2%;
}
.show_cooppic  li:last-child{
    margin-right:0;
}
.show_cooppic li b{
    height:26vw;
}

.show_cooppic{
    margin-bottom:0;
}

.show_cooppic li a{
     display: block;
}
.show_cooppic li a:hover p{
    color: #cdac79;
}

/*新闻资讯*/
.shownews li{
    -webkit-transition: 300ms 0s all ease;
    -moz-transition: 300ms 0s all ease;
    -ms-transition: 300ms 0s all ease;
    -o-transition: 300ms 0s all ease;
    transition: 300ms 0s all ease;
    width: 100%;
    box-sizing: border-box;
    padding: 2%;
    height: 23vw;
    position: relative;
    top:0;
    margin-bottom:3%;
    border:1px solid #ddd;
}
.shownews li:after{
    display: block;
    content: '';
    clear: both;
}
.shownews li b{
    float:left;
    display: block;
    width:40%;
    height:100%;
    margin-right: 3%;
    position: relative;
    overflow: hidden;
}
.shownews li b img{
    max-width: 100%;
    height:100%;
    position: absolute;
    top:50%;
    left:50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

.shownews li .show_newtext{
    float:left;
    width: 55%;
}
.show_newtext h5{
    font-weight: normal;
    font-size: 18px;
    color: #6e6e6e;
}
.show_newtext small{
    font-size: 12px;
    color: #cdac79;
    margin-top: 1vw;
    display: inline-block;
    margin-bottom: 2vw;
    border-bottom: 1px solid #cdac79;
}
.show_newtext p{
    font-size: 12px;
    color: #6e6e6e;
    line-height: 30px;
    height: 11vw;
    overflow: hidden;
}
.show_newtext a{
    font-size:14px;
    color: #6e6e6e;
    border-bottom:1px solid #6e6e6e;
    -webkit-transition: 300ms 0s all ease;
    -moz-transition: 300ms 0s all ease;
    -ms-transition: 300ms 0s all ease;
    -o-transition: 300ms 0s all ease;
    transition: 300ms 0s all ease;
}
.show_newtext a:hover{
    border-bottom:1px solid #ffffff;
}
.shownews li:hover{
    box-shadow: 0 0 10px #ddd;
    top: -5px;
}
.page{
    margin-top: 3%;
    margin-bottom:3%;
}
.page a{
    color: #000;
}

/*产品中心*/
.productbanner{
    margin-bottom:0;
}
.i-product-type{background: #faf5eb; overflow: hidden;  padding: 6% 0;}
.i-product-type .i-product-type-list{width: 31%; margin-left: 2.7%; float: left;}
.i-product-type .i-product-type-list:nth-of-type(1){margin-left: 0;}
.i-product-type .i-product-type-list p{position: relative;}
.i-product-type .i-product-type-list p img{width: 100%;}
.i-product-type .i-product-type-list p span{position: absolute; width: 100%; left: 0; top: 50%; font-size: 28px; color: #fff; text-align: center; transform: translateY(-50%); -webkit-transform: translateY(-50%);}
.i-product-type .i-product-type-list div{background: #fff; padding: 20px 0; height: 148px;
    /*overflow-y: auto;*/
}
.i-product-type .i-product-type-list ul{overflow: hidden; width: 80%; margin: 0 auto;}
.i-product-type .i-product-type-list ul li{width: 50%; float: left; position: relative; margin-bottom: 3%; padding-left: 10%;}
.i-product-type .i-product-type-list ul li b{width: 15px; height: 15px; display: block; border: 1px solid #b6b6b6; position: absolute; left: 5%; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%);}
.i-product-type .i-product-type-list ul li b:after{width: 15px; height: 11px; background: url("../images/dagou.png") no-repeat center; position: absolute; left: 0; top: 0; display: none; content: '';}
.i-product-type .i-product-type-list ul li span{font-size: 18px; color: #747474; float: left;}
.i-product-type .i-product-type-list ul li a.active b:after{display: block;}

.i-pro-list .cd-items{width: 103%;}
.i-pro-list .cd-items li{width: 30.4%; margin-right: 2.2%; float: left; margin-bottom: 3%; text-align: center;}
.i-pro-list .cd-items li p{border: 1px solid #eee; position: relative; perspective: 400px; border-bottom: 0;}
.i-pro-list .cd-items li p img{max-width: 100%;}
.i-pro-list .cd-items li p:after{display: block; content: ''; width: 100%; height: 100%; background: rgba(209, 164, 58, 0.65); left: 0; top: 0; position: absolute; transform-origin: left center; transform: rotateY(90deg); transition: 600ms ease; -webkit-transition: 600ms ease; opacity: 0;}
.i-pro-list .cd-items li div{    height: 8vw;background: #f5f5f5; text-align: center; padding: 5% 0; position: relative; perspective: 400px;}
.i-pro-list .cd-items li div:after{display: block; content: ''; width: 100%; height: 100%; background: rgba(138, 4, 3, 0.67); left: 0; top: 0; position: absolute; transform-origin: center top; transform: rotateX(-90deg); transition: 600ms ease; -webkit-transition: 600ms ease; transition-delay: 0.1s; opacity: 0;}
.i-pro-list .cd-items li div span{display: block; font-size: 21px; color: #202020; position: relative; z-index: 2; transition: 300ms ease; -webkit-transition: 300ms ease; transition-delay: 0.1s;}
.i-pro-list .cd-items li div b{    padding: 1% 5%;display: block; font-size: 14px; color: #818181; font-weight: 500; position: relative; z-index: 2; transition: 300ms ease; -webkit-transition: 300ms ease; transition-delay: 0.1s;}
.i-pro-list .cd-items li:hover div:after{transform: rotateX(0deg); opacity: 1;}
.i-pro-list .cd-items li:hover p:after{transform: rotateY(0deg); opacity: 1;}
.i-pro-list .cd-items li:hover span{color: #fff;}
.i-pro-list .cd-items li:hover b{color: #fff;}



/*js需要的样式*/
.jsleft{
    left:100%;
 
}
.jslefts{
    left:0;
    /*transition-delay:500ms !important;
    transition-duration:500ms !important;
    transition: 300ms ease; 
    -webkit-transition: 500ms ease; 
    transition-delay: 0.5s;*/
}
.jstransitionin{
    opacity: 1!important;
    transition-delay:200ms !important;
    transition-duration:200ms !important;
    transition: 300ms ease; 
    -webkit-transition: 300ms ease; 
    transition-delay: 0.1s;
}
.jstransitionout{
    opacity: 0!important;
    transition-delay:0ms !important;
    transition-duration:0ms !important;
}


/*人气商品*/
.popular li b {
    height: 26vw;
}
.popular:last-child li:first-child {
    margin-left: 0;
}
.popular li:nth-child(3n){
    margin-right: 0;
}
.popular li{
    width:32%;
}


/*微信展示*/
.wxshow{
    display: none;
    position: fixed;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.77);
    z-index:1000;
}
.wxshow img{
    position: absolute;
    width: 200px;
    top:50%;
    left:50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}