li{list-style:none;}
.about-left{width:60%;float:left; overflow:hidden; margin-right:5%;}
.about-left h3{margin:0;}
.about-left h3 font,.contact-sub .b{display:block;font-size:28px;color:rgba(255,255,255,.9);font-family:Times;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;line-height:1.2;}
.about-left h3 font{opacity:0;transition:0s .5s;-moz-transition:0s .5s;-ms-transition:0s .5s;-o-transition:0s .5s;-webkit-transition:0s .5s;transform:translateX(-30px);-moz-transform:translateX(-30px);-ms-transform:translateX(-30px);-o-transform:translateX(-30px);-webkit-transform:translateX(-30px);}
.window-bin.swiper-slide-active .about-left h3 font{opacity:1;transition:.5s .6s ease-out;-moz-transition:.5s .6s ease-out;-ms-transition:.5s .6s ease-out;-o-transition:.5s .6s ease-out;-webkit-transition:.5s .6s ease-out;transition-property:transform,opacity;-moz-transition-property:transform,opacity;-ms-transition-property:transform,opacity;-o-transition-property:transform,opacity;-webkit-transition-property:transform,opacity;transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);-webkit-transform:translateX(0);}
.about-left h3 span,.contact-sub .p{display:block;font-size:4rem;font-weight: bold;color:#262626;line-height:1.2;}
.about-left h3 span{opacity:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;transition:0s .5s;-moz-transition:0s .5s;-ms-transition:0s .5s;-o-transition:0s .5s;-webkit-transition:0s .5s;transform:translateX(-30px);-moz-transform:translateX(-30px);-ms-transform:translateX(-30px);-o-transform:translateX(-30px);-webkit-transform:translateX(-30px);}
.window-bin.swiper-slide-active .about-left h3 span{opacity:1;transition:.5s .5s;-moz-transition:.5s .5s;-ms-transition:.5s .5s;-o-transition:.5s .5s;-webkit-transition:.5s .5s;transition-property:transform,opacity;-moz-transition-property:transform,opacity;-ms-transition-property:transform,opacity;-o-transition-property:transform,opacity;-webkit-transition-property:transform,opacity;transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);-webkit-transform:translateX(0);}
.about-left h3 span u,.contact-sub .p em{font-size:54px;color:#FFF;padding-right:4px;font-style:normal;}

.window-bin.swiper-slide-active .about-left dl{opacity:1;transition:.5s .5s;-moz-transition:.5s .5s;-ms-transition:.5s .5s;-o-transition:.5s .5s;-webkit-transition:.5s .5s;transition-property:transform,opacity;-moz-transition-property:transform,opacity;-ms-transition-property:transform,opacity;-o-transition-property:transform,opacity;-webkit-transition-property:transform,opacity;transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);-webkit-transform:translateX(0);}

.window-bin.swiper-slide-active .about-left dt{opacity:1;transition:.5s .5s;-moz-transition:.5s .5s;-ms-transition:.3s .3s;-o-transition:.3s .3s;-webkit-transition:.3s .3s;transition-property:transform,opacity;-moz-transition-property:transform,opacity;-ms-transition-property:transform,opacity;-o-transition-property:transform,opacity;-webkit-transition-property:transform,opacity;transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);-webkit-transform:translateX(0);}

.window-bin.swiper-slide-active .about-left dd{opacity:1;transition:.7s .7s;-moz-transition:.7s .7s;-ms-transition:.7s .7s;-o-transition:.7s .7s;-webkit-transition:.7s .7s;transition-property:transform,opacity;-moz-transition-property:transform,opacity;-ms-transition-property:transform,opacity;-o-transition-property:transform,opacity;-webkit-transition-property:transform,opacity;transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);-webkit-transform:translateX(0);}
.about-left dl{width:100%;color:#262626;}
.about-left dt{ margin-bottom:1.5rem;float:left; width:8%; font-size:1.3rem;color:#939393;opacity:0;transition:0s .3s;-moz-transition:0s .3s;-ms-transition:0s .3s;-o-transition:0s .3s;-webkit-transition:0s .5s;transform:translateX(-30px);-moz-transform:translateX(-30px);-ms-transform:translateX(-30px);-o-transform:translateX(-30px);-webkit-transform:translateX(-30px);}
.about-left dd{margin-bottom:1.5rem; float:left; width:90%; font-size:1rem; line-height:1.8rem; color:#262626;opacity:0;transition:0s .5s;-moz-transition:0s .5s;-ms-transition:0s .5s;-o-transition:0s .5s;-webkit-transition:0s .5s;transform:translateX(-30px);-moz-transform:translateX(-30px);-ms-transform:translateX(-30px);-o-transform:translateX(-30px);-webkit-transform:translateX(-30px);}

.window-bin.swiper-slide-active .gyml{opacity:1;transition:.5s .5s;-moz-transition:.5s .5s;-ms-transition:.5s .5s;-o-transition:.5s .5s;-webkit-transition:.5s .5s;transition-property:transform,opacity;-moz-transition-property:transform,opacity;-ms-transition-property:transform,opacity;-o-transition-property:transform,opacity;-webkit-transition-property:transform,opacity;transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);-webkit-transform:translateX(0);}
.gyml{color:#841c87; font-size:2rem; line-height:4.2rem;opacity:0;transition:0s .5s;-moz-transition:0s .5s;-ms-transition:0s .5s;-o-transition:0s .5s;-webkit-transition:0s .5s;transform:translateX(-30px);-moz-transform:translateX(-30px);-ms-transform:translateX(-30px);-o-transform:translateX(-30px);-webkit-transform:translateX(-30px);}
.clear{clear:both;}
.mlpp_an{background-image: linear-gradient(to right , #801986, #c44c96); margin-bottom:2rem; width:10rem; height:3rem; text-align:center; line-height:3rem; font-size:1rem;animation: heart 0.8s ease-in-out 0.8s infinite alternate;}

/*----------------------*/
.case-box { width:68rem;}
.case-list{width:68rem;display:block;z-index:2;overflow:hidden; position:relative;padding-bottom: 2rem;}
.case-list ul{list-style:none;margin:0;padding:0;width:10000%;}
.case-list ul li span img{ width:10rem; height:10rem; margin-top:0.5rem;}
.case-list ul li{width:16.1rem;box-shadow: 0 0 10px #d8d8d8; height:24rem; color:#5c5c5c; border-radius:5px; float:left; background:#FFF; text-align:center;line-height:1.6rem; font-size:1rem; position:relative;  margin-right:1rem; padding:0px 0.2rem;}
.case-list li p{text-align:center; font-size:1.5rem;line-height:2rem; color:#000;}
.scxm{margin-top:20px;}
.scxm span{background:#e8edf8; height:2rem; width:5rem; line-height:24px; margin:0px 10px; padding:10px; color:#000;}
.zj_an{ width: 20%; margin:0.1rem auto; padding-top:1rem;animation: heart 0.8s ease-in-out 0.8s infinite alternate;}
.zj_an a{ width:46px;height: 46px;display: block;background: url("../image/zj_an01.png");background-size: 100%;}
.zj_an a:hover{ background: url("../image/zj_an02.png");}
.yytd_an{width:25%; margin:0 auto; padding-top:3rem;animation: heart 0.8s ease-in-out 0.8s infinite alternate;}




.zxxm_body{width:100%; margin:0 auto; background:#FFF;}
.zxxm_left{width:30%; float:left; color:#FFF; margin-right:5%; margin-top:5rem; margin-left:10%}
.zxxm_left h1{font-size:3rem; font-weight:500;opacity:0;transition:0s .5s;-moz-transition:0s .5s;-ms-transition:0s .5s;-o-transition:0s .5s;-webkit-transition:0s .5s;transform:translateX(-30px);-moz-transform:translateX(-30px);-ms-transform:translateX(-30px);-o-transform:translateX(-30px);-webkit-transform:translateX(-30px);}
.zxxm_left p{margin-top:1rem; font-size:1.1rem; line-height:1.8rem;opacity:0;transition:0s .5s;-moz-transition:0s .5s;-ms-transition:0s .5s;-o-transition:0s .5s;-webkit-transition:0s .5s;transform:translateX(-30px);-moz-transform:translateX(-30px);-ms-transform:translateX(-30px);-o-transform:translateX(-30px);-webkit-transform:translateX(-30px);}
.zxxm_an{background:#4f252f; width:10rem; height:3rem; margin-top:2rem; text-align:center; line-height:3rem; font-size:1.2rem;animation: heart 0.8s ease-in-out 0.8s infinite alternate;}
.zxxm_an a{color:#FFF;}
.zxxm_an a:hover{color:#dd0000;}

.zxxm_right{width:50%; float:left;}

.window-bin.swiper-slide-active .zxxm_left p{opacity:1;transition:.5s .5s;-moz-transition:.5s .5s;-ms-transition:.5s .5s;-o-transition:.5s .5s;-webkit-transition:.5s .5s;transition-property:transform,opacity;-moz-transition-property:transform,opacity;-ms-transition-property:transform,opacity;-o-transition-property:transform,opacity;-webkit-transition-property:transform,opacity;transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);-webkit-transform:translateX(0);}

.window-bin.swiper-slide-active .zxxm_left h1{opacity:1;transition:.5s .5s;-moz-transition:.5s .5s;-ms-transition:.5s .5s;-o-transition:.5s .5s;-webkit-transition:.5s .5s;transition-property:transform,opacity;-moz-transition-property:transform,opacity;-ms-transition-property:transform,opacity;-o-transition-property:transform,opacity;-webkit-transition-property:transform,opacity;transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);-webkit-transform:translateX(0);}
/**/
.section_icon_nav_box2 ul li {width:25%;position: relative; float: left; height:10rem; background:#FFF; margin-left:1rem; margin-bottom:1rem;}
.section_icon_nav_box2 ul li a{ color:#999}

.section_icon_nav_box2 ul li i{position:absolute;width:100%;height:100%;background-color:#9b63d0;opacity:0;-webkit-animation:orangeOut 0.4s ease;animation:orangeOut 0.4s ease;}
.section_icon_nav_box2 ul li:hover i{opacity:1;
    -webkit-animation:orangeIn 0.2s ease;
    animation:orangeIn 0.2s ease;
    background-image: linear-gradient(to right , #7d1786, #c35c9b);}




.section_icon_nav_box2 ul li a {width:100%;  position:absolute}
.section_icon_nav_box2 ul li a em{display: block; margin:-1px auto auto; width:50%; height:10rem;}
.section_icon_nav_box2 ul li a:hover{ color:#FFF}
.icon_nav1 a em{ background:url(../image/zxxm_img1s.png) no-repeat center; background-size:100%;}
.icon_nav1 a:hover em{background:url(../image/zxxm_img1.png) no-repeat center;background-size:100%;}
.icon_nav2 a em{ background:url(../image/zxxm_img2s.png) no-repeat center;background-size:100%;}
.icon_nav2 a:hover em{background:url(../image/zxxm_img2.png) no-repeat center;background-size:100%;}
.icon_nav3 a em{ background:url(../image/zxxm_img3s.png) no-repeat center;background-size:100%;}
.icon_nav3 a:hover em{background:url(../image/zxxm_img3.png) no-repeat center;background-size:100%;}
.icon_nav4 a em{ background:url(../image/zxxm_img4s.png) no-repeat center;background-size:100%;}
.icon_nav4 a:hover em{background:url(../image/zxxm_img4.png) no-repeat center; background-size:100%;}
.icon_nav5 a em{ background:url(../image/zxxm_img5s.png) no-repeat center; background-size:100%;}
.icon_nav5 a:hover em{background:url(../image/zxxm_img5.png) no-repeat center; background-size:100%;}
.icon_nav6 a em{ background:url(../image/zxxm_img6s.png) no-repeat center; background-size:100%;}
.icon_nav6 a:hover em{background:url(../image/zxxm_img6.png) no-repeat center; background-size:100%;}
.icon_nav7 a em{ background:url(../image/zxxm_img7s.png) no-repeat center; background-size:100%;}
.icon_nav7 a:hover em{background:url(../image/zxxm_img7.png) no-repeat center; background-size:100%;}
.icon_nav8 a em{ background:url(../image/zxxm_img8s.png) no-repeat center; background-size:100%;}
.icon_nav8 a:hover em{background:url(../image/zxxm_img8.png) no-repeat center; background-size:100%;}
.icon_nav9 a em{ background:url(../image/zxxm_img9s.png) no-repeat center; background-size:100%;}
.icon_nav9 a:hover em{background:url(../image/zxxm_img9.png) no-repeat center; background-size:100%;}

.contact-box{ background:rgba(0,0,0,0.45); padding:2rem;}
.foot-left{border-right:1px solid #4d4d4d; line-height:1.5rem;}

/*.foot-right{padding-top:0.5rem;}*/
.foot-right li{float:left; width:13rem; line-height:2rem; margin-left:0.8rem;}

@-webkit-keyframes orangeIn {
    0% {
        -webkit-transform:scale(0.8);
        -ms-transform:scale(0.8);
        transform:scale(0.8);
        opacity:0
    }
    100% {
        -webkit-transform:scale(1);
        -ms-transform:scale(1);
        transform:scale(1);
        opacity:1
    }
}
@-moz-keyframes orangeIn {
    0% {
        -webkit-transform:scale(0.8);
        -ms-transform:scale(0.8);
        transform:scale(0.8);
        opacity:0
    }
    100% {
        -webkit-transform:scale(1);
        -ms-transform:scale(1);
        transform:scale(1);
        opacity:1
    }
}
@-ms-keyframes orangeIn {
    0% {
        -webkit-transform:scale(0.8);
        -ms-transform:scale(0.8);
        transform:scale(0.8);
        opacity:0
    }
    100% {
        -webkit-transform:scale(1);
        -ms-transform:scale(1);
        transform:scale(1);
        opacity:1
    }
}
@keyframes orangeIn {
    0% {
        -webkit-transform:scale(0.8);
        -ms-transform:scale(0.8);
        transform:scale(0.8);
        opacity:0
    }
    100% {
        -webkit-transform:scale(1);
        -ms-transform:scale(1);
        transform:scale(1);
        opacity:1
    }
}

@-webkit-keyframes orangeOut {
    0% {
        -webkit-transform:scale(1);
        -ms-transform:scale(1);
        transform:scale(1);
        opacity:1
    }
    100% {
        -webkit-transform:scale(0.8);
        -ms-transform:scale(0.8);
        transform:scale(0.8);
        opacity:0
    }
}
@-moz-keyframes orangeOut {
    0% {
        -webkit-transform:scale(1);
        -ms-transform:scale(1);
        transform:scale(1);
        opacity:1
    }
    100% {
        -webkit-transform:scale(0.8);
        -ms-transform:scale(0.8);
        transform:scale(0.8);
        opacity:0
    }
}
@-ms-keyframes orangeOut {
    0% {
        -webkit-transform:scale(1);
        -ms-transform:scale(1);
        transform:scale(1);
        opacity:1
    }
    100% {
        -webkit-transform:scale(0.8);
        -ms-transform:scale(0.8);
        transform:scale(0.8);
        opacity:0
    }
}
@keyframes orangeOut {
    0% {
        -webkit-transform:scale(1);
        -ms-transform:scale(1);
        transform:scale(1);
        opacity:1
    }
    100% {
        -webkit-transform:scale(0.8);
        -ms-transform:scale(0.8);
        transform:scale(0.8);
        opacity:0
    }}



@keyframes heart{

    from{margin-top:0px;}

    to{margin-top:-6px;}

}



@keyframes heart{

    from{transform:translate(0,0)}

    to{transform:translate(0,6px)}

}