/* @font-face {
    font-family:fzltxh;
    src: url(../font/fzltxh.ttf);
} */
body{
   
}
body{
    font-size: 16px;
    background: #f0f0f0;
    /* font-family:fzltxh; */
}

.header{
    /* height: 100px; */
    border-top: 10px solid #990000;
    border-bottom: 2px solid #d1d1d1;
    background: #fff;
}
.logo,.nav,.nav-tab{
    float: left;
}
.logo{
    margin-left: -186px;
}
.logo img{
    display: block;
    margin-left: 15px;
}
.nav{
    float: right;
    padding-right: 30px;
}
.nav-tab{
    position: relative;
    z-index: 1;
    height: 100px;
    line-height: 100px;
    margin-right: 46px;
}
.nav-tab:after{
    content:"";
    position: absolute;
    display: block;
    width: 100%;
    left: -100%;
    border-color: #990000;
    -webkit-transition: all ease 1s;
    transition: all ease 1s;
}
.nav-tab:hover:after{
    bottom: -2px;
    left: 0%;
    border-bottom: 2px solid #990000;
    z-index: 50;
    
}
.nav-text{
    position: relative;
    display: block;
    width: 100%;
    color: #262626;
    text-align: center;
}

.banner{
    position: relative;
    overflow: hidden;
    height: 760px;
    background: #fff;    
} 
.banner .container{
    position: relative;
    z-index: 2;
   
}
.ban-tit{
    text-align: center;
    color: #9b9b9b;
}



.item-tit{
    width: 252px;
    margin: 0px auto;
    margin-top: 70px;
    font-size: 24px;
    color: #c9c9c9;
    line-height: 1.8em;
    text-align: center;
    letter-spacing: 4px;
    background: transparent;
    border-radius: 1em;
    border: 1px solid #a0141a;
    color: #565656;
}



.item-3-main .show_v{
    margin-top: 75px;
   
}
.item-3-main .show_v .control{
    display: none;
}
.item-3-main .show_cell{
    width: 1200px;
    min-height: 380px;
    float: left;
    background: ;
}
.item-3 .show_tab_group{
    
    height: 580px;
    margin: 0px auto;
    padding-top: 35px;
    background-image: url(../img/lb-bg.jpg);
    background-repeat: no-repeat;
    
}
.item-3 .show_tab_group .container{
    width: 1200px;
    min-width: 1200px;
}
.item-3 .show_tab{
    width: 171.4px;
    height: 171.4px;
    
    float: left;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
    transition: all ease 1s;
}
.item-3 .show_tab img{
    width: 100%;
    height: 100%;
}
.item-3 .show_tab.active{
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    filter: grayscale(0%);
    filter: none;
    border: 2px solid #e70012;
}
.head-imgs{
    position: relative;
    width: 444px;
   
    border-right: 2px solid #b3b3b3;
}
.head-imgs .r-head{
    float: right;
    margin-right: 15px;
    width: 266px;
}
.head-imgs .r-logo{
    position: absolute;
    left: 0px;
    bottom: -33px;
}
.item-3-main .inf{
    width: 708px;
    color: #3e3e3e;
    line-height: 1em;
    padding-top: 15px;
}
.item-3-main .inf-style{
    position: relative;
    margin-bottom: 30px;
}
.item-3-main .inf-style:after{
    position: absolute;
    content: "◆";
    display: block;
    top: 0px;
    left: -30px;
    font-size: 36px;
    color: #ea4f53;
}
.item-3-main .inf-style h4{
    margin-bottom: 16px;
}
.item-3-main .inf-style h4 span{
    font-size: 12px;

}
.item-3-main .inf-style p{
    line-height: 24px;
    color: #6b6b6b;
}




.item-4-tit{
    border-color: #a0141a;
    color: #565656;
}
.item-4-main{
    margin-top: 80px;
}
.item-4-main .video{
    position: relative;
    width: 296px;
    height: 397px;
    background: url(../img/tea-1.jpg);
}
.item-4-main .video a{
    display: block;
    position: absolute;
    text-align: center;
    width: 100%;  
    color:#fff;
    top:50%; 
    margin-top: -40px;
}
.item-4-main .video a span{
    display: none;
}
.item-4-main .video:hover a span{
    display: block;
}
.item-4-main .video:hover{
    filter: grayscale(.6);
    -webkit-filter:grayscale(.6);
}
.item-4-main .video:hover a{   
    
   /*  -webkit-animation-duration: 1s;
   animation-duration: 1s;
   -webkit-animation-fill-mode: both;
   animation-fill-mode: both;
   -webkit-animation-name: bounceInLeft;
   animation-name: bounceInLeft; */
}
.item-4-main .video:hover a:hover{
    color: #eee;
} 

.item-4-main .video a:before{
 
    text-decoration: none !important;
    display: block;
    margin: 0px auto;
    content: '';
    font-size: 64px;
    width: 81px;
    height: 80px;
    background: url(../img/video-start.png);
    background-size: cover;
}

.item-4-main .caption{
    font-size: 16px;
    color: #565656; 
    position: relative;
}
.item-4-main .caption:after{
    content: '';
    display:block;
    position: absolute;
    width: 0; 
    height: 0; 
}
.item-4-main .caption h5{
    padding-top: 36px;
    padding-bottom: 24px;
    font-size: 22px;
    color: #292929;
    padding-left: 40px;
}
.item-4-main .caption h5:before{
    content: "| ";
    color: #cb1515;
}
.item-4-main .caption p{
    line-height: 36px;
    margin-bottom: 20px;
    padding: 0px 2.5em;
    text-align: justify;
}

.item-4-main .fl .top{
     background: #ffe9e9;
}
.item-4-main .fl .top .caption{
    width: 500px;
}
.item-4-main .fl .top .caption:after{
    left: -25px;
    top: 180px;
    border-top: 25px solid transparent; 
    border-right: 25px solid #ffe9e9; 
    border-bottom: 25px solid transparent;
}

.item-4-main .fl .bottom{
     background: #f0f9f6;
}
.item-4-main .fl .bottom .caption{
    width: 480px;
}
.item-4-main .fl .bottom .caption:after{
    right: -25px;
    top: 180px;
    border-top: 25px solid transparent; 
    border-left: 25px solid #f0f9f6; 
    border-bottom: 25px solid transparent;
}

.item-4-main .fr{
    background: #f3f6ff;
}
.item-4-main .fr .caption{
    width: 400px;
}
.item-4-main .fr .caption:after{
    left: 180px;
    top: -25px;
    border-right: 25px solid transparent; 
    border-left: 25px solid transparent; 
    border-bottom: 25px solid #f3f6ff;
}



.item-5-main{
    margin-top: 90px;
    height: 880px;
    background: url(../img/bg.jpg) no-repeat center;
}

.item-5 .container{
    background: rgba(0,0,0,0.3);
    overflow: hidden;
}
.item-5 .container .active-group,.item-5 .container .active-group li{
    width: 1200px;
    height: 100%;
    float: left;
}

.item-5 .container .active-group li .img,.item-5 .container .active-group li .text{
    width: 50%;
    height: 100%;
    padding: 0px 1em;
}
.item-5 .active-group li .text h4{
    margin-top: 60px;
    font-size: 30px;
    color: #fff;
}
.item-5 .active-group li .text h4 a{
    color: #fff;
}
.item-5 .active-group li .text p{
    color: rgba(255,255,255,0.7);
    height: 550px;
    display: -webkit-box;
    -webkit-line-clamp: 16;
    -webkit-box-orient: vertical;
    overflow: hidden;
    letter-spacing: 2px;
    margin-top: 20px;
    line-height: 35px;
}

.item-5 .container .control{
    position: absolute;
    bottom: 60px;
    left: 50%;
    margin-left: -266px;
}
.item-5 .container .control li{
    float: left;
    width: 75px;
    height: 4px;
    background: #fff;
    opacity: 0.5;
    margin-right: 16px;
}
.item-5 .container .control li.current{
    opacity: 1;
}
.item-5 .container .control li a{
    display: none;
}
.item-5-show-img-1,.item-5-show-img-2{
    width: 408px;
    height: 408px;
    
    clip-path: polygon( 25px 25%, 50% 0%, 376px 25%, 376px 75%, 50% 100%, 25px 75%);
    -webkit-clip-path: polygon( 25px 25%, 50% 0%, 376px 25%, 376px 75%, 50% 100%, 25px 75%);
}
.item-5-show-img-1{
    margin-top: 68px;
    margin-left: -30px; 
    background: url(../img/i5-01.jpg) no-repeat center;
}
.item-5-show-img-2{
    margin-top: -106px;
    margin-left: 180px;
    background: url(../img/i5-02.jpg) no-repeat center;

}

.item-6 .container{
    margin-top: 90px;
}
.item-6 .container .top{
    height: 400px;
    overflow: hidden;
}
.item-6 .container .img-show{
    position: relative;
    width: 50%

}
.item-6 .container .img-show .control{
    position: absolute;
    bottom: 15px;
    left: 50%;
    margin-left: -54px;
}
.item-6 .container .img-show .control li{
    float: left;
    height: 16px;
    width: 16px;
    background: #fff;
    margin: 0px 10px;
    border-radius: 50%;
}
.item-6 .container .img-show .control li.current{
    background: #982626;
}
.item-6 .container .img-show .control li a{
    display: none;
}
.item-6 .container .img-show-i{
    float: left;
    width: 600px;
}
.item-6 .container .img-show-i img{
    width: 100%;
    height: 400px;
}
.item-6 .container .text{
    width: 550px;
}
.item-6 .container .text h3{
    padding-top:45px;
    color: #982626;
    letter-spacing: 2px;
    line-height: 1em;
}
.item-6 .container .text h3 a{
    color: #982626;
}
.item-6 .container .text h3 a:hover{
    color: #696969;
}
.item-6 .container .text p{
    margin-top: 40px;
    text-align: justify;
    color: #565656;
    line-height: 32px;
}




.footer{
    min-height: 508px;
    background: #a0141a;
    color: #fff;
    border-bottom: 10px solid #2c2c2c;
}


.footer h3{
    font-size: 24px;
    margin-top: 100px;
    font-weight: bold;
    line-height: 1em;
    letter-spacing: 8px;
    margin-bottom: 42px;
}
.footer .fl.text p{
    font-size: 16px;
    text-indent: 2em;
    width: 600px;
    text-align: justify;
    line-height: 29px;
    margin-bottom: 32px;
}
.footer h4{
    font-size: 20px;
    margin-top: 100px;
    line-height: 1em;
    margin-bottom: 10px;
    font-weight: bold;
}
.footer .fr.text2 p{
    font-size: 17px;
    line-height: 32px;
    margin-top: 32px;
    margin-bottom:32px;
}

.footer .code{
    margin-top: 30px;
  
    
}







   .item-8>.container {
      margin-top: 158px;
  }
  #zf .swiper-wrapper{
     /* width: 100000px;*/
 }
 #zf .swiper-slide{
    float: left;
    width: 536px;
     background: #fff; 
    position: relative;
    filter: brightness(.4);
    -webkit-filter: brightness(.4);
}
.swiper-slide-prev,.swiper-slide-next{

}
#zf .swiper-slide-active{
   filter: brightness(100%);
   -webkit-filter: brightness(100%);

}
.i8-name{
    color: #990000;
    font-size: 34px;
    text-align: center;
    line-height: 2em;
}
.i8-inf{
    text-align: center;
    font-size: 24px;
    color: #3c3c3c;
    line-height: 2em;
}
.video-img{
    display: block;
    position: relative;
    width: 536px;
    height: 369px;
}
.video-img img{
    position: relative;
    width: 100%;
    z-index: -1;
}
.video-img:after{
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    margin-top: -36.5px;
    left: 50%;
    margin-left: -36.5px;
    width: 73px;
    height: 73px;
    background: url(../img/video-start.png);
    z-index: 999;
    opacity: 0.8;
    transition: all 1s ease; 
}
.video-img:hover:after{
    opacity: 1;
}