* {  margin: 0;  padding: 0;  font-family: 'Microsoft YaHei';  outline: none !important;}
i{ font-style: normal}
ul, ol, li {  list-style: none;}
li {  cursor: pointer;}
img {  vertical-align: top;}
a {  text-decoration: none;  cursor: pointer;  color: #000;}
html,body {  width: 100%;  overflow-x: hidden;}
.wraps{  position: relative;  width: 2560px;  left: 50%;  margin-left: -1280px;}

#nav{
    width: 100%;
    background-color: #fff;
    height: 69px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
}
.nav-logo{
    float: left;
    margin-left: 482px;
}
#nav ul{
    float: left;
    margin-left: 148px;
}
#nav ul li{
    float: left;
    font-size: 25px;
    color: #6E5959;
    line-height: 69px;
    cursor: pointer;
    margin-right: 45px;
    font-family: '宋体';
    font-weight: bold;
}
#nav ul li a{
    text-decoration: none;
    color: #6E5959;
    font-family: '宋体';
}
#nav ul li a:hover{
    color: #AA9A8B;
}
#banner{
  width: 2560px;
  height: 943px;
  position: relative;
  background: url(../images/banner_bg1.jpg) 0 69px no-repeat,
              url(../images/banner_bg2.jpg) 0 283px no-repeat,
              url(../images/banner_bg3.jpg) 0 496px no-repeat,
              url(../images/banner_bg4.jpg) 0 730px no-repeat;
}
#banner .btns{
    position: absolute;
    bottom: 93px;
    cursor: pointer;
    z-index: 999;
    width: 375px;
    height: 144px;
}
#banner .btns.btn1{
    left: 907px;
}
#banner .btns.btn2{
    right: 892px;
}
#banner .btns>a{display: inline-block;width: 100%;height: 100%;}
/* #banner .btns>img,#banner .btns>a img{transition: all .2s;}
#banner .btns:hover>img,#banner .btns:hover>a img{
    filter: brightness(120%);
} */
.bb{
    position: absolute;
    right: 0;
    bottom: -24px;
    z-index: 99;
}

.sl{
    position: fixed;
    left: 40px;
    bottom: 24px;
    z-index: 99;
    animation: sl 1S;
}
@keyframes sl{
0%{
    left: -60px;
}
100%{
    left: 40px;
}
}


#main{
    width: 100%;
    height: 5387px;
    background: url(../images/main1.jpg) 0 0 no-repeat,
                url(../images/main2.jpg) 0 1819px no-repeat;
    position: relative;
}
#box1{
    height: 766px;
    overflow: hidden;
}
#box1 ul{
    margin: 214px auto 0;
    text-align: center;
}
#box1 ul li{
    display: inline-block;
    text-align: center;
    margin: 0 -8px;
    cursor: pointer;
    width: 255px;
    height: 397px;
    position: relative;
}
#box1 ul li .wf-1{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}
#box1 ul li .wf-2{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    transform: rotateY(180deg);
    opacity: 0;
}
#box1 ul li div{
    transition: 1s;
}
#box1 ul li:hover .wf-1{
    animation: wf .8s forwards;
    opacity: 0;
    /* transform: rotateY(360deg); */
}
#box1 ul li:hover .wf-2{
    /* animation-delay: .8s; */
    animation: wf2 .8s forwards .4s;
}
@keyframes wf{
    0%{
        transform: rotateY(0deg);
        opacity: 1;
    }
    100%{
        transform: rotateY(180deg);
        opacity: 0;
    }
}
@keyframes wf2{
    0%{
        transform: rotateY(180deg);
        opacity: 0;
    }
    100%{
        transform: rotateY(360deg);
        opacity: 1;
    }
}



#box2{
    height: 1039px;
}
.zb-box1,.zb-box3{
    float: left;
    margin: 381px 5px 0 550px;
    width: 216px;
}
.zb-box3{
    margin: 378px 65px 0 36px;
}
.zb-box1 .zb-li,.zb-box3 .zb-li{
    float: left;
    width: 72px;
    height: 72px;
    text-align: center;
    margin: -6px 0px 0px 0;
    background: url(../images/zb_bg1.png) no-repeat;
}
.zb-box1 .zb-li:nth-child(3n),.zb-box3 .zb-li:nth-child(3n){margin-right: 0;}
.zb-box1 .zb-li img,.zb-box3 .zb-li img{
    /* width: 48px;
    height: 48px; */
    /* height: 100%; */
    /* float: left; */
    margin-top: 13px;
}

.zb-box2{
    float: left;
    width: 358px;
    margin: 378px 0 0 32px;
}
.zb-box2 .zb-li{
    float: left;
    width: 76px;
    height: 75px;
    text-align: center;
    margin: 6px 17px 10px 0px;
    background: url(../images/zb_bg2.png) no-repeat;
}
.zb-box2 .zb-li:nth-child(4n){margin-right: 0;}
.zb-box2 .zb-li img{
    /* width: 48px;
    height: 48px; */
    /* height: 100%; */
    /* float: left; */
    margin-top: 16px;
}
#box3{
    height: 1030px;
}
.zb-box4,.zb-box5{
    float: left;
    margin: 384px 252px 0 1265px;
    width: 234px;
}
.zb-box4 .zb-li,.zb-box5 .zb-li{
    float: left;
    width: 92px;
    height: 91px;
    text-align: center;
    margin-right: 25px;
    background: url(../images/zb_bg3.png) no-repeat;
}
.zb-box4 .zb-li img,.zb-box5 .zb-li img{
    width: 62px;
    height: 62px;
    /* height: 100%; */
    /* float: left; */
    margin-top: 13px;
}

.zb-box5{
    margin-left: 0;
}
.zb-box6{
    float: left;
    margin: 66px 0 0 1226px;
    width: 800px;
}
.zb-box6 .zb-li{
    float: left;
    width: 76px;
    height: 75px;
    text-align: center;
    margin: 0 10px 10px 0;
    background: url(../images/zb_bg2.png) no-repeat;
}
.zb-box6 .zb-li img{
    width: 56px;
    height: 55px;
    /* height: 100%; */
    /* float: left; */
    margin-top: 9px;
}
#box4{
    height:888px;
    position: relative;
    overflow: hidden;
}
.sw-btn{
    position: absolute;
    cursor: pointer;
    outline: none;
    z-index: 99;
}
.box4-l,.box4-r{top: 466px;}
.box4-l,.box5-l,.box6-l{left: 482px;}
.box4-r,.box5-r,.box6-r{right: 482px;}
#box4 .swiper-slide{
    width: 343px;
    height: 607px;
    background: url(../images/zb_b.png) no-repeat;
    background-position: -189px 504px;
}
/* #box4 .swiper-slide:hover{
    animation: sld2 1s;
} */
@keyframes sld{
    0%{
        transform: rotateY(180deg);
    }
    100%{
        transform: rotateY(360deg);
    }
}
@keyframes sld2{
    /* 0%{
        transform: rotateY(0deg);
    }
    100%{
        transform: rotateY(-360deg);
    } */
    0%{
        transform: rotateY(180deg);
    }
    100%{
        transform: rotateY(0deg);
    }
}

.sw-logo{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.sw-logo img,.sw-img img{width: 100%;}
#box4 .swiper{
    margin: 180px auto 0;
    width: 1485px;
    overflow: hidden;
}
.sw-img{
    width: 295px;
    margin: 91px auto 0;
}

#box5{
    height: 828px;
    position: relative;
    overflow: hidden;
}
#box5 .swiper,#box6 .swiper{
    width: 1366px;
    margin: 223px auto 0;
    overflow: hidden;
}
.box5-l,.box5-r{top: 433px;}
#box5 .swiper-slide{
    width: 672px;
    /* height: 452px; */
}
#box5 .swiper-slide img{
    width: 672px;
    /* height: 452px; */
}
#box6{
    height: 820px;
    overflow: hidden;
    position: relative;
}
.box6-l,.box6-r{top: 413px;}
#box6 .swiper-slide{
    width: 672px;
    height: 452px;
}
#box6 .swiper-slide img{
    width: 672px;
    height: 452px;
}

#footer{
    height: 264px;
    width: 100%;
    background-color: #000;
}
.f-logo{
    float: left;
    width: 364px;
    height: 220px;
    margin: 15px 0 0 615px;
}
.f-logo img{width: 100%;}
.f-text{
    float: left;
    text-align: center;
    color: #fff;
    font-size: 21px;
    margin: 92px 0 0 20px;
    line-height: 40px;
}
.f-text a{
    color: #fff;
    text-decoration: none;
    margin: 0 5px;
}
.f-text a:hover{text-decoration: underline;}

.newDiv{
    position: absolute;
    z-index: 999;
}

.float-r{
    position: fixed;
    z-index: 999;
    top: 200px;
    right: 10px;
    background: url(../images/float_bg.png) no-repeat;
    width: 241px;
    height: 702px;
    animation: fl 1s;
}
.float-r a{
    display: block;
    text-align: center;
    margin-bottom: 17px;
    transition: .1S;
}
.float-r a:hover{
    filter: contrast(170%);
}
.float-r a:first-child{
    margin-top: 99px;
}
@keyframes fl{
    0%{
        right: -260px;
    }
    100%{
        right: 10px;
    }
}