/* 公共样式 */
html,body,div,p,a,dl,dt,dd,span,dl,dd,dt,header,em,nav,img,ol,ul,li,h1,h2,h3,h4,h5,h6{
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    background: none;
}

ul,ol,li{
    list-style: none;
}
a{
    text-decoration: none;
}
.clear:after{

    content: '';
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}
/* 导航栏 */
#nav{width: 100%;height: 74px;background-color: #111;opacity: 0.6; position: fixed;top: 0;z-index: 999;}
#menu>img{margin-top: 20px;}
.nav_right{width: 230px;float: right;background-color: none;margin-top:30px;}
.nav_right>a{    color: #00dfb9;font-family: Arial;font-weight: bold;font-size: 26px;letter-spacing: 1px;}
.nav_right>span{display: block;margin-right: 10px; width: 30px;height: 30px;z-index: 10;font-size: 30px;float: left;color:#00dfb9;}
#menu { margin: 0; padding: 0;width: 95%; top: 0; list-style-type: none; z-index: 70;display: flex;justify-content: space-between;margin: 0 auto;}
#menu ul li { float: left; position: relative;margin: 0 12px;font-size: 20px;}
#menu>ul>li>a { float: left; padding: 36px 7px 10px 7px; color: #ccc;; text-decoration: none;}
#menu .active a { color:#00dfb9; }
.section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;}
#menu li:after{ content: ''; width:0; height: 2px; border-top:3px solid #00dfb9; position: absolute; top:0; left: 0; transition: all 1s ease;  opacity: 0;}
#menu li.active:after{width:100%; opacity: 1;}


/* banner图 */
#dowebok .section1 .banner .slide>img{width: 100%;height: 100%;}
.fp-slidesNav ul li{width: 40px;}
.fp-slidesNav ul li a span{width: 40px;height: 3px;border-radius: 0px;background-color:#fff;}
.fp-slidesNav ul li a.active span{background-color: #00dfb9;}
#dowebok .section1 .sli1{background: url(../img/banner.jpg)no-repeat; background-size: 100% 100%;}
#dowebok .section1 .sli2{background: url(../img/banner1.jpg)no-repeat;background-size: 100% 100%;}
#dowebok .section1 .sli3{background: url(../img/banner2.jpg)no-repeat;background-size: 100% 100%;}
#dowebok .section1 .sli4{background: url(../img/banner3.jpg)no-repeat;background-size: 100% 100%;}
#bottom{width: 47px;height: 47px;background-color:rgba(255,255,255, 0.3);z-index: 111;border-radius: 50%;cursor: pointer; line-height: 47px; position: absolute;bottom: 2%;left: 50%; transform: translateX(-50%);}
#bottom:hover{background-color: #00dfb9;}
.fp-slidesNav ul{margin-bottom: 43%;}

/* banner图动画部分 */
.section1>.sli1>img{position: absolute;bottom: -100%;right: -100%;}
.section1>.sli1{overflow: hidden;width: 100%;height: 100%;}
/* 右侧客服 */
.kefu{position: fixed;right: 0;top: 30%;width: 50px;height: 296px;z-index: 10;}
.kefu ul{border: 1px solid #333; border-radius: 12px 0px 0px 12px;height: 250px;opacity: 0.7;background-color: #111;}
.kefu ul li{width: 50px;height: 50px;line-height: 50px;text-align: center;z-index: 10;position: relative;}
.kefu ul li a{font-size: 26px;color:#cdcecf;overflow: hidden;}
.kefu ul li:hover a{color:#414546;}
.kefu ul li:nth-child(3) a{font-size: 42px;}
#kf{font-size: 26px;display: block;width: 44px;height: 44px;line-height: 44px;text-align: center;color: #6a6d6e;cursor: pointer;position: absolute;bottom: 0;}
#kef{position: absolute;right: 0;transition: all 0.4s;position: relative; z-index: 100;}
.icon-cha:before {color: #b5c0c4;font-size: 26px;}
.icon-jia:before {color: #b5c0c4;font-size: 29px;}
.hd{width: 136px;height: 132px;border: 1px solid #333;position:absolute;top: 0; right: -206px;padding: 10px; background-color: rgba(0, 0,0, 0.4);border-radius: 12px 0px 0px 12px;transition: all 0.3s;}
#kef li:hover .hd{right: 50px;transition: all 0.5s;z-index: 1;position: absolute;opacity: 1;background-color: #111;}
#kef li .hd span{display: inline-block;color: #fff;font-size: 14px;text-align: left;line-height: 24px;margin-top: 10px;}
#kef li .hd a{display: block;margin-left: 10px; margin-top: 12px;width: 100px;height: 35px;line-height: 32px;color: #00dfb9;font-size: 16px;text-align: center;text-decoration: none;border: 1px solid #00dfb9;}
#kef li .hd a:hover{color: #fff;background-color:#00dfb9; }
.hd1{width: 221px;height: 132px;position:absolute;top:-50px; right: -291px;border: 1px solid #333;background-color: rgba(0, 0,0, 0.4);border-radius: 12px 0px 0px 12px;}
#kef li .hd1 span{display: inline-block;color: #fff;font-size: 14px;text-align: left; padding: 10px; line-height: 24px;margin-top: 10px;}
#kef li .hd1 i{font-style: normal;color:#00dfb9;border-radius: 0px 5px 5px 0px;border: 1px solid #00dfb9;font-size: 16px;padding: 3px 9px 7px 10px;border-left: none;cursor: pointer;}
#kef li .hd1 input{width: 112px;height: 30px;padding-left: 35px;border-radius: 5px;border-radius: 5px 0px 0px 5px; border: 1px solid #00dfb9;}
#kef li .hd1 em{font-size: 30px;position: absolute;left: 12px;bottom: 2px;;color:#00dfb9;}
#kef li :hover.hd1 .hd1_1{display: inline-block;}
#kef li:hover .hd1{right: 50px;transition: all 0.5s;z-index: 2;position: absolute;opacity: 1;background-color: #111;}
.hd2{width: 159px;height: 152px;position:absolute;top:-100px; right: -260px;border: 1px solid #333; background-color: rgba(0, 0,0, 0.4);border-radius: 12px 0px 0px 12px;display: flex;align-items: center;}
#kef li:hover .hd2{right: 50px;transition: all 0.5s;z-index: 3;position: absolute;opacity: 1;background-color: #111;}
.hd2>img{line-height: 152px;margin: 0 auto;}

/*首页 滚动字幕 */
.subtitle{width: 400px;height: 20px;position: absolute;bottom: 17%;left: 50%;transform: translateX(-50%);z-index: 2;}
.subtitle>span{color: #00dfb9;font-weight: bold;float: left;font-size: 14px;margin-right: 15px;}
.subtitle>.ov>ul{height: 20px;width: 266px;float: left;position: relative;}
.subtitle>.ov>ul>li{height: 20px;float: top;}
.subtitle>.ov>ul>li:nth-child(1){position: relative;top: 0;}
.subtitle>.ov>ul>li>a{display: block;font-size: 14px;color: #ddd; text-overflow: ellipsis;overflow: hidden;white-space: nowrap;width: 266px;height: 20px;text-decoration: none;}
.subtitle>.ov>ul>li>a:hover{text-decoration: underline;}
.subtitle>a{width: 35px;float: right;height: 20px;font-size: 14px;color: #00dfb9;margin-top: -3px;text-decoration: none;border-bottom: 1px dotted #00dfb9;}
.subtitle>.ov{overflow: hidden;float: left;}

/* 业务部分*/
.section2{background: url(../img/wp2.jpg)no-repeat;background-size: 100% 100%;}
.section2 .sect2_center h2{width: 100%; height: 34px;text-align: center;font-size: 24px;letter-spacing: 3px;color: #333;margin-bottom: 60px;font-weight: 500;}
.sect2_center>ul{width: 1148px;height: 305px;margin: 0 auto;display: flex;justify-content: space-between;position: relative;overflow: hidden;}
.sect2_center>p{display: block;margin: 0 auto;margin-bottom: 20px;width: 320px;height: 31px;background: url(../img/words.png) no-repeat 0px -294px;}
.sect2_center>ul>li{margin: 0 8px;width: 296px;position: relative;}
.sect2_center>ul>li:hover .cl{clip: rect(0px,156px,-10px,78px);border-radius: 50%;}
.sect2_center>ul>li:hover .cr{clip: rect(156px,78px,156px,0px);border-radius: 50%;}
.sect2_center>ul>li>.cl{
    display: block;
    position: absolute;
    width: 144px;
    height: 144px;border-radius: 50%;
    margin-left: 22px;
    clip: rect(0px,156px,156px,78px);
    border: 6px solid  #00dfb9;
    -webkit-transition: all .5s ease-in-out 0s;
    -moz-transition: all .5s ease-in-out 0s;
    -ms-transition: all .5s ease-in-out 0s;
    -o-transition: all .5s ease-in-out 0s;
    transition: all .5s ease-in-out 0s;
}
.sect2_center>ul>li>.cr{    
    display: block;
    position: absolute;
    width: 144px;
    height: 144px;
    border-radius: 50%;
    margin-left: 22px;
    border: 6px solid  #00dfb9;
    clip: rect(0px,78px,156px,0px);
    -webkit-transition: all .5s ease-in-out 0s;
    -moz-transition: all .5s ease-in-out 0s;
    -ms-transition: all .5s ease-in-out 0s;
    -o-transition: all .5s ease-in-out 0s;
    transition: all .5s ease-in-out 0s;
}
.sect2_center>ul>li>p{font-size: 16px;height: 305px;position: absolute;top: 305px;background-color:#00dfb9; z-index: 2;overflow: hidden;}
.sect2_center>ul>li>p>span{position: absolute;left: 50%; bottom: 40px;display: inline-block;text-align: center;width: 100%;transform: translateX(-50%);font-size: 12px;}
.sect2_center>ul>li:hover p{top: 0;width: 213px;transition: all .3s ease-in-out 0.5s;}

.sect2_center>ul>li:hover .img{position: relative;z-index: 100;background: url(../img/words.png) no-repeat -168px -357px;transition: all .3s ease-in-out 0.6s;}
.sect2_center>ul>li:hover .img1{position: relative;z-index: 100;background: url(../img/words.png) no-repeat -336px -291px;transition: all .3s ease-in-out 0.6s;}
.sect2_center>ul>li:hover .img2{position: relative;z-index: 100;background: url(../img/words.png) no-repeat -328px -362px;transition: all .3s ease-in-out 0.6s;}
.sect2_center>ul>li:hover .img3{position: relative;z-index: 100;background: url(../img/words.png) no-repeat -166px -439px;transition: all .3s ease-in-out 0.6s;}
.sect2_center>ul>li:hover .img4{position: relative;z-index: 100;background: url(../img/words.png) no-repeat -336px -439px;transition: all .3s ease-in-out 0.6s;}

.sect2_center>ul>li>.img{width: 69px;height: 69px;display: block;margin: 43px auto 0 auto;background: url(../img/words.png) no-repeat -245px -357px;}
.sect2_center>ul>li>.img1{width: 69px;height: 69px;display: block;margin: 43px auto 0 auto;background: url(../img/words.png) no-repeat -416px -291px;}
.sect2_center>ul>li>.img2{width: 76px;height: 69px;display: block;margin: 43px auto 0 auto;background: url(../img/words.png) no-repeat -415px -362px;}
.sect2_center>ul>li>.img3{width: 74px;height: 69px;display: block;margin: 43px auto 0 auto;background: url(../img/words.png) no-repeat -244px -439px;}
.sect2_center>ul>li>.img4{width: 79px;height: 69px;display: block;margin: 43px auto 0 auto;background: url(../img/words.png) no-repeat -420px -439px;}

.sect2_center>ul>li:hover strong{color: #fff;transition: all .1s ease-in-out 0.6s;}
.sect2_center>ul>li>strong{font-size: 16px;display: block;margin-top: 78px;color:#333;z-index: 100;position: absolute;left: 50%;transform: translateX(-50%);font-weight:500;}
.sect2_center>ul>span{ display: block;position: absolute;left: 50%; bottom: 0;transform: translateX(-50%);width: 297px;height: 21px; background: url(../img/words.png) no-repeat 0px -333px;}

/* 案例部分 */
.section3{background: url(../img/wp3.jpg)no-repeat;background-size: 100% 100%;}
.section3 .sect3_center{width: 100%;height: 555px;}
.section3 .sect3_center>h2{width: 100%; height: 34px;text-align: center;font-size: 24px;letter-spacing: 3px;color: #333;margin-bottom: 60px;font-weight: 500;}
.sect3_center>p{display: block;margin: 0 auto;margin-bottom: 20px;width: 129px;height: 37px;background: url(../img/words.png) no-repeat 0px -528px;}
.section3 .sect3_center>ul{width: 1080px;height: 300px;margin: 0 auto;display: flex;justify-content: space-between;}
.section3 .sect3_center>ul>li{width: 340px;height: 300px;margin: 0 10px;border-bottom: 2px solid #00dfb9;position: relative;overflow: hidden;}
.section3 .sect3_center>ul>li .sect3_top{ position: absolute;width: 340px;height: 200px;background-color: black; top: -200px;transition: all .3s ease-in-out 0.2s;}
.section3 .sect3_center>ul>li>.sect3_bottom{position: absolute;top: 300px;background-color:#00dfb9; transition: all .3s ease-in-out 0.2s;width: 340px;height: 100px;opacity: 1;}
.section3 .sect3_center>ul>li>.sect3_bottom>i{color: #fff;}
.section3 .sect3_center>ul>li:hover .sect3_bottom{top: 200px;background-color:#00dfb9; ;left: 0;}
.section3 .sect3_center>ul>li:hover .sect3_top{top: 0px;    background: Black;opacity: 0.7;display: flex;align-items: center;margin: 0 auto;}
.section3 .sect3_center>ul>li:hover .sect3_top a{margin: 0 auto;}
.section3 .sect3_center>ul>li .sect3_top a{margin: 0 auto;}
.section3 .sect3_center>ul>li .sect3_top{display: flex;align-items: center;margin: 0 auto;}
.section3 .sect3_center>ul>li .sect3_top .icon-jia:before{font-size: 44px;margin: 0 auto;width: 44px;height: 44px;}
.section3 .sect3_center>ul>li>.text{width: 300px; height: 100px;background-color: #fff;opacity: 0.5;margin-top: -13px;line-height: 14px;padding: 0 20px;text-align: left;}
.section3 .sect3_center>ul>li>p>i{font-size: 12px;color: black;font-style: normal;}
.section3 .sect3_center>ul>li>p>strong{font-size: 16px;color:black;font-weight: 900;}
.section3 .sect3_center>ul>li>.sect3_bottom>i{font-size: 12px;color: #fff;font-style: normal;}
.section3 .sect3_center>ul>li>.sect3_bottom>strong{font-size: 16px;color:#fff;font-weight: 900;}
.section3 .sect3_center>ul>li>.sect3_bottom{width: 300px; height: 100px;background-color: #fff;line-height: 14px;padding: 0 20px;text-align: left;}
/* 动画部分 */
.section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;}
.section1>a { position: absolute;top: 9%;z-index: 1000;left:2.8%;font-size: 16px;color: #fff000;}
.section1>a:hover{text-decoration:underline; }