/*daotu*/
.daotu{margin-top:100px;*margin-top:20px;}
.daotu img{margin:0 auto;width:100%;height:auto;}
/*ourserve*/
.ourserve {background: #fff; padding: 60px 0px 80px 0px; overflow: hidden; }
.warp {margin: 0px auto; clear: both; }
.servetitle {text-align: center; margin-bottom: 30px; }
.ourserve .servetitle{margin-bottom: 0; padding-bottom: 50px; }
.servetitle p {font-size: 30px; color: #333; font-weight: bold; line-height: 30px; margin-bottom:16px; }
.ourserve .servetitle .line {width: 500px; margin: 20px auto; height: 1px; background: #999; text-align: center; }
.servetitle span {font-size: 30px; color: #666; line-height: 30px; }
.servetitle span{font-size: 14px; line-height: 24px; }
.ourserve a { display:block; float:left; width:25%; overflow:hidden;  text-align:center; cursor:pointer; }
.ourserve a .ons_div { width:130px; height:130px; border-radius:65px; background:#00a1ff url(../../img/j_ourserve.png) no-repeat 30px 30px; margin:0 auto;-webkit-transition:all .8s ease-in-out;-moz-transition:all .8s ease-in-out;transition:all .8s ease-in-out}
.ourserve a h1 { font-size:18px; font-weight:normal; color:#000; margin:20px 0 6px;}
.ourserve a p { font-size:14px; color:#999;}
.ourserve a:hover { text-decoration:none;}
.ourserve a .ons_div2 { background-color:#f90; background-position: 33px -110px}
.ourserve a .ons_div3 { background-color:#fb7e71; background-position: 30px -274px}
.ourserve a .ons_div4 { background-color:#73b400; background-position: 28px -410px}
.ourserve a:hover .ons_div{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}
/*ourgood*/
.ourgood {padding-top: 70px;  overflow: hidden;  background-color: #f4f4f4; }
.ourgood_t {font-size: 30px; text-align: center; margin-bottom: 15px; color: #000; }
.ourgood_n {font-size: 14px; color: #646464; text-align: center; }
.ourgood ul {overflow: hidden; margin: 70px 0px; width:100%;  }
.ourgood ul li {float: left; width: 25%; overflow: hidden; position: relative; padding-top: 160px; transition: all .5s ease;}
.ourgood ul li.on {padding-top: 140px; transition: all .5s ease; }
i {font-style: normal; }
.ourgood ul li .i {margin:0 auto;width:120px; }
.ourgood ul li i {position: absolute; width:120px;height: 120px; background: url(../../img/j_ourgood.png) no-repeat; background-repeat: no-repeat; top: 0px;}
.ourgood ul li.on i {background-image: url(../../img/j_ourgood_now.png); transition: all .5s ease; transform: rotateY(180deg); }
.ourgood ul li dd {font-size: 20px; text-align: center; height:40px;}
.ourgood ul li ol {font-size: 14px; color: #8b8b8b;}
.ourgood ul li.ys2 i {background-position: -121px 0px; }
.ourgood ul li.ys3 i {background-position: -242px 0px; }
.ourgood ul li.ys4 i {background-position: -363px 0px; }
/*ourpro*/
.ourpro { margin: 0 auto; overflow: hidden; background: #fff; padding: 40px 0px; }
.ourpro_con {width:100%; margin: 0 auto; text-align: center; }
.general_title {font-size: 34px; font-family: "微软雅黑"; text-align: center; margin: 0 auto; line-height: 40px; margin-top:70px;}
.ourpro li {list-style: none; float: left; width:12%; height: 100px; overflow: hidden; }
.ourpro li p {font-size: 14px; margin-top: 5px; }
.ourpro li.biaoqian {background: url(../../img/j_cooperation_shape.png) no-repeat 0 16px; width:9%; }
/* pc端案例展示 */
.pccontainer-fluid{ width: 100%; padding-top: 50px; color: #444; background-color: #eee; padding-bottom: 50px; text-align: center;}
.pccontainer{ width: 1200px; margin: 0 auto; text-align: center;display: flex; justify-content: center; align-items: center;}
.boxcontainer{ margin: 30px; color: #444444; overflow: hidden;}
.pcbox{ position: relative; width: 320px; height: 180px; overflow: hidden;}
.pc1{ background: url('../../img/index-example/pc1.jpg') no-repeat center top;}
.pc2{ background: url('../../img/index-example/pc2.jpg') no-repeat center top;}
.pc3{ background: url('../../img/index-example/pc3.jpg') no-repeat center top;}
.pc4{ background: url('../../img/index-example/pc4.jpg') no-repeat center top;}
.pc5{ background: url('../../img/index-example/pc5.jpg') no-repeat center top;}
.pc6{ background: url('../../img/index-example/pc6.jpg') no-repeat center top;}
.pcbox:hover{ transition: 10s; background-position: -40px -900px;}
/* 遮罩层 */
.pcbox>.mask{ overflow: hidden; position: absolute; top: 0; left: 0; width: 320px; height: 180px; line-height: 180px; transition: all 1.5s linear;}
.pcbox:hover  .mask{ background: rgba(0, 0, 0, 0.5); animation:pcbox 1s; -moz-animation:pcbox 1s; /* Firefox */ -webkit-animation:pcbox 1s; /* Safari and Chrome */ -o-animation:pcbox 1s; /* Opera */}
@keyframes pcbox
    {0%   {top: -250px;}
    100% {top: 0;}}
/* 遮罩层预览按钮 */
.pcbox>.mask  input{ display: none;}
.pcbox:hover .mask  input{ cursor: pointer; display: inline; width: 80px; height: 40px; background-color: #499ffe; border-style: none; outline: none; border-radius: 50px; color: #fff; font-size: 20px;}
.boxcontainer p{ text-align: left; cursor: default; position: relative; border-bottom: 2px #444 solid ; padding-bottom: 20px; margin: 15px 0;}
.boxcontainer p:after{ position : absolute; bottom : -2px; left : 0; width : 0px; border-bottom: 2px #444 solid; transition : all 1s; content : "";}
.boxcontainer p:hover{ border: none;}
.boxcontainer p:hover:after{ width: 320px;}
.boxcontainer p>span{ display: inherit; padding-top: 10px; font-size: 12px;}
/* 查看更多按钮 */
.pcmore{ cursor: pointer; display: inline; width: 180px; height: 40px;  border-style: none; outline: none;  font-size: 20px; background-color: #4c8bff;color:#fff; font-size: 15px;}
@media screen and (max-width: 770px) {
.warp,.main{width:100%;}.ourserve a {width:50%;margin-top: 50px;}.ourserve .servetitle {padding-bottom:0px}.ourgood ul li {width:50%}
.ourgood ul li ol {display:none;}
.ourgood ul li.on {padding-top:160px;}
.ourpro li.biaoqian {display:none;}
.ourpro li {width:20%;height:auto;}
}