.vidbacking-active-body-back,.vidbacking-active-block-back{z-index:-100;top:50%;left:50%;min-width:100%;min-height:100%;transform:translateX(-50%) translateY(-50%);}
.vidbacking-active-body-back{position:fixed;background-size:cover;overflow:hidden;opacity:1;transition:2s opacity;}
.vidbacking-active-block-back{position:absolute;height:auto;width:auto;}
.vidbacking{display:none;}
.vidmask-body-back,.vidmask-block-back{background:url(../images/videooverlay1.png) repeat;min-height:100%;min-width:100%;display:block;z-index:-50;}
.vidmask-body-back{opacity: 0.4;position:fixed;top:0;left:0;}
.vidmask-block-back{opacity: 1;position:absolute;top:0;left:0;height:auto;width:auto;}


.project ul {overflow:hidden;}
.project ul li {text-align:center;}
.project ul li a{text-decoration:none;display:table;color:#fff;width:100%;padding:10px;background:#fff;margin-bottom:25px;border-radius:20px;}
.project ul li .project-box{width:100%;height:300px;overflow:hidden;display:table-cell;vertical-align:middle;border-radius: 10px;margin-bottom:25px;background:url(../images/nopic.png) no-repeat center center;background-size:300px 300px;}
.project ul li h4 {font-size:30px;font-weight: bold;text-align:center;}
.project ul li div{display:none;font-size:16px;line-height:180%;margin: 10px 0 20px 0;text-align: center;}
.project ul li img {width: 150px;margin-bottom:15px;border:2px solid #fff;border-radius:100%;}
.project ul li:nth-child(1) .project-box{background-color:rgba(245,85,20,0.8);}
.project ul li:nth-child(2) .project-box{background-color:rgba(40,200,250,0.8);}
.project ul li:nth-child(3) .project-box{background-color:rgba(120,125,10,0.8);}
.project ul li:nth-child(4) .project-box{background-color:rgba(15,175,90,0.8);}
.project ul li:nth-child(5) .project-box{background-color:rgba(250,60,100,0.8);}
.project ul li:nth-child(6) .project-box{background-color:rgba(130,10,240,0.8);}
.project ul li:nth-child(7) .project-box{background-color:rgba(10,120,215,0.8);}
.project ul li:nth-child(8) .project-box{background-color:rgba(155,0,155,0.8);}
.project ul li:nth-child(9) .project-box{background-color:rgba(200,100,0,0.8);}
.project ul li .project-box:hover h4 {font-size:20px;}
.project ul li .project-box:hover div{display:block;}
.project ul li .project-box:hover img{width: 100px;;margin-bottom:5px;transform:scale(0.8);transition:transform .5s;}
.project ul li:nth-child(1) .project-box:hover{background-color:rgba(245,85,20,1);}
.project ul li:nth-child(2) .project-box:hover{background-color:rgba(40,200,250,1);}
.project ul li:nth-child(3) .project-box:hover{background-color:rgba(120,125,10,1);}
.project ul li:nth-child(4) .project-box:hover{background-color:rgba(15,175,90,1);}
.project ul li:nth-child(5) .project-box:hover{background-color:rgba(250,60,100,1);}
.project ul li:nth-child(6) .project-box:hover{background-color:rgba(130,10,240,1);}
.project ul li:nth-child(7) .project-box:hover{background-color:rgba(10,120,215,1);}
.project ul li:nth-child(8) .project-box:hover{background-color:rgba(155,0,155,1);}
.project ul li:nth-child(9) .project-box:hover{background-color:rgba(200,100,0,1);}


.service{height:330px;}
.service ul{list-style:none;}
.service ul li{color:#FFF;}
.service ul li:nth-child(1) .box{background:#f65314}
.service ul li:nth-child(2) .box{background:#26c7fc}
.service ul li:nth-child(3) .box{background:#44b573}
.service ul li:nth-child(4) .box{background:#5a3c82}

.service .box{width:100%;height:265px;border:#FFF solid 9px;position:relative;-moz-border-radius:20px;-webkit-border-radius:20px;border-radius:20px;-moz-box-shadow:0 0 5px rgba(0,0,0,.15);-webkit-box-shadow:0 0 5px rgba(0,0,0,.15);box-shadow:0 0 5px rgba(0,0,0,.15)}
.service .img{position:absolute;left:0;top:40px;width:100%;text-align:center}
.service a{color:#FFF}
.service .name{position:absolute;left:0;top:130px;width:100%;white-space:nowrap;line-height:26px;text-transform:uppercase;font-size:20px;text-align:center;}
.service .name div{font-size:30px}
.service .list{position:absolute;left:0;top:120px;width:100%;opacity:0;filter:alpha(opacity=0)}
.service .list .content{padding:0 20px;line-height:160%;font-size:16px;}
.service .box:hover .list{opacity:1;filter:alpha(opacity=1);top:100px;}
.service .box:hover .img{left:0;top:0;width:30px !important;transform:scale(0.8);transition:transform .5s;}
.service .box:hover .name{left:0;top:18px;border-bottom:1px solid #fff;padding:5px 5px 5px 60px;}


.advantage ul {overflow:hidden;margin-bottom:25px;}
.advantage ul li dl{position:relative;height:110px;border: 1px solid #ccc;margin:10px 0px;padding:5px;background:#fff;}
.advantage ul li dl:after,.advantage ul li dl:before{clear:both;content:'';display:block;width:100px;height:15px;position:absolute;}
.advantage ul li dl:after{background:url(../images/shadow-left.png) bottom left no-repeat;bottom:-11px;left:-3px}
.advantage ul li dl:before{background:url(../images/shadow-right.png) bottom center no-repeat;bottom:-9px;right:-6px}
.advantage ul li dl dt{height:80px;width:80px;display:inline-block;vertical-align:middle;background:url(../images/icons_advantage.png) no-repeat center center;box-sizing:border-box;}
.advantage ul li dl:hover dt{-webkit-animation:spin 0.5s ease-in 0s 1 normal;-moz-animation:spin 0.5s ease-in 0s 1 normal;-o-animation:spin 0.5s ease-in 0s 1 normal;animation: spin 0.5s ease-in 0s 1 normal;}
.advantage ul li:nth-of-type(1) dl dt{background-position:0px 0px;}
.advantage ul li:nth-of-type(2) dl dt{background-position:0px -88px;}
.advantage ul li:nth-of-type(3) dl dt{background-position:0px -180px;}
.advantage ul li:nth-of-type(4) dl dt{background-position:0px -270px;}
.advantage ul li:nth-of-type(5) dl dt{background-position:0px -360px;}
.advantage ul li:nth-of-type(6) dl dt{background-position:0px -450px;}
.advantage ul li dl dd{width:calc(100% - 85px);display:inline-block;vertical-align:middle;}
.advantage ul li dl dd h4{font-size: 16px;font-weight: bold;line-height:200%;}


.cases {transition: .6s;}
.cases .tab{width:100%;overflow: hidden;margin-bottom: 5px;padding:15px 0;}
.cases .tab ul{width:calc(100% - 110px);height:50px;float:left;border-bottom: 1px solid #ccc;}
.cases .tab ul li {padding:0 35px;float: left;text-align: center;font-size: 20px;line-height:250%;}
.cases .tab ul li a{position: relative;color: #645757;line-height: 22px;padding-bottom: 9px;}
.cases .tab ul li.cur{border-bottom: 2px solid #333;font-weight:bold;}
.cases .tab ul li.cur a{color:#333;}
.cases .tab .more{width:100px;height:50px;float:right;display:inline-block;line-height:250%;font-size: 20px;border-bottom: 1px solid #ccc;}
.cases .list ul li .content{position:relative;padding:15px;display: block;margin-bottom: 30px;height: 215px;border:1px solid #ccc;background:#fff;}
.cases .list ul li .content:after,.cases .list ul li .content:before{clear:both;content:'';display:block;width:100px;height:15px;position:absolute;}
.cases .list ul li .content:after{background:url(../images/shadow-left.png) bottom left no-repeat;bottom:-11px;left:-3px}
.cases .list ul li .content:before{background:url(../images/shadow-right.png) bottom center no-repeat;bottom:-9px;right:-6px}
.cases .list ul li .thumb{width:100%;height:150px;overflow:hidden;text-align:center;border:1px solid #ccc;padding:2px;border-radius: 5%;}
.cases .list ul li .thumb img{height:100%;}
.cases .list ul li .info {line-height:200%;height:50px;padding:10px 0;text-align:center;}
.cases .list ul li .info a {display: block;color:#333;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;font-weight:bold;font-size: 16px;transition: .6s;}
.cases .list ul li:hover .thumb img{transform:scale(1.2);transition:transform .5s;}
.cases .list ul li:hover .info a {text-decoration: underline;color:#0066cc}


.article {transition: .6s;}
.article .tab{width:100%;overflow: hidden;margin-bottom: 5px;padding:15px 0;}
.article .tab ul{width:calc(100% - 110px);height:50px;float:left;border-bottom: 1px solid #ccc;}
.article .tab ul li {padding:0 35px;float: left;text-align: center;font-size: 20px;line-height:250%;}
.article .tab ul li a{position: relative;color: #645757;line-height: 22px;padding-bottom: 9px;}
.article .tab ul li.cur{border-bottom: 2px solid #333;font-weight:bold;}
.article .tab ul li.cur a{color:#333;}
.article .tab .more{width:100px;height:50px;float:right;display:inline-block;line-height:250%;font-size: 20px;border-bottom: 1px solid #ccc;}
.article .list ul li .content{position:relative;padding:15px;display: block;margin-bottom: 25px;height: 115px;border:1px solid #ccc;background:#fff;}
.article .list ul li .content:after,.article .list ul li .content:before{clear:both;content:'';display:block;width:100px;height:15px;position:absolute;}
.article .list ul li .content:after{background:url(../images/shadow-left.png) bottom left no-repeat;bottom:-11px;left:-3px}
.article .list ul li .content:before{background:url(../images/shadow-right.png) bottom center no-repeat;bottom:-9px;right:-6px}

.article .list ul li span {display: block;width:85px;height: 85px;text-align: center;border-radius: 50%;float: left;padding-top: 7px;transition: .6s;background: transparent;border: 1px solid #333;}
.article .list ul li span h5 {line-height: 1.2;transition: .6s;font-size: 38px;margin:0;}
.article .list ul li span p {font-size: 14px;transition: .6s;}

.article .list ul li .box {display: inline-block;float: right;width:calc(100% - 90px);height:90px;padding:0 10px;overflow: hidden;text-overflow: ellipsis;}
.article .list ul li .box .thumb{width:95px;height:90px;overflow:hidden;text-align:center;float:left;border:1px solid #ccc;padding:2px;border-radius: 5%;}
.article .list ul li .box .thumb img{height:100%;}

.article .list ul li .box .info {overflow: hidden;width:calc(100% - 105px);float:right;}
.article .list ul li .box .info h5 {display: block;margin-bottom: 10px;}
.article .list ul li .box .info h5 a {display: block;color:#333;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;font-weight:bold;font-size: 16px;transition: .6s;}
.article .list ul li .box .info h5 a:hover {text-decoration: underline;}
.article .list ul li .box .info p{font-size: 12px;color: #666666;line-height:180%;}

.article .list ul li:hover span {transform: rotateY(360deg);border: 1px solid #0066cc;background: #0066cc;}
.article .list ul li:hover span h5,.article ul li:hover span p {color: #fff;}
.article .list ul li:hover .info h5 a{color:#0066cc;transition:color .8s linear;}
.article .list ul li:hover .info p{color:#0066cc;transition:color .8s linear;}
.article .list ul li:hover .thumb img{transform:scale(1.2);transition:transform .5s;}

.flow{padding:25px 0;}
.flow ul{list-style:none;}
.flow ul li dl{width:200px;height:180px;float:left;text-align:center;cursor:pointer;}
.flow ul li dl dd{ background:#0aa2cc url(../images/f_ico.png) no-repeat center center; width:95px;height:95px;border-radius:100%;margin:auto;transition:all 0.1s;-webkit-transition:all 0.1s;-ms-transition:all 0.1s;-moz-transition:all 0.1s; display:inline-block;}
.flow ul li:nth-child(1) dl dd{background-position:0px 0px;}
.flow ul li:nth-child(2) dl dd{background-position:0px -200px}
.flow ul li:nth-child(3) dl dd{background-position:0px -400px}
.flow ul li:nth-child(4) dl dd{background-position:0px -600px}
.flow ul li:nth-child(5) dl dd{background-position:0px -800px}
.flow ul li:nth-child(6) dl dd{background-position:0px -1000px}
.flow ul li dl:hover dd{transition:all 0.3s;-webkit-transition:all 0.3s;-ms-transition:all 0.3s;-moz-transition:all 0.3s;background:#fff url(../images/f_ico.png) no-repeat center center;border:1px solid #0aa2cc;}
.flow ul li:nth-child(1) dl:hover dd{background-position:0px -100px}
.flow ul li:nth-child(2) dl:hover dd{background-position:0px -300px}
.flow ul li:nth-child(3) dl:hover dd{background-position:0px -500px}
.flow ul li:nth-child(4) dl:hover dd{background-position:0px -700px}
.flow ul li:nth-child(5) dl:hover dd{background-position:0px -900px} 
.flow ul li dl:hover dt h4{color:#3BB5D6;font-weight:bold;} 
.flow ul li dl dt{position:relative;text-align:center;}
.flow ul li dl dt h4{font-size:18px;padding:15px 0 10px 0;color:#333; margin:0px;}
.flow ul li dl dt .txt-box{position:absolute;background:#fff;width:170px;padding:15px;border-radius:3px;border:1px solid #e8e8e8;color:#3BB5D6;font-size:12px;top:68px;box-shadow:0px -4px 6px #d8d6d6;-webkit-box-shadow:0px -4px 6px #d8d6d6;-ms-box-shadow:0px -4px 6px #d8d6d6;-moz-box-shadow:0px -4px 5px #d8d6d6;-o-box-shadow:0px -4px 6px #d8d6d6;text-align:left;opacity:0; z-index:-1;}
.flow ul li dl dt .txt-box .txticon{width:16px;height:15px;position:absolute;left:50%;margin-left:-8px;top:-15px;}
.flow ul li dl:hover .txt-box{opacity:1;top:40px;z-index:9;}
.flow .transition500{transition:500ms ease-out;-webkit-transition:500ms ease-out;-ms-transition:500ms ease-out;-moz-transition:500ms ease-out;-o-transition:500ms ease-out;}