@charset "utf-8";
/* CSS Document */
*{box-sizing:border-box;}
*:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.container::before{display: table;content: " ";}
.banner{width:100%; height: 300px; background-color: #ccc;}
.p_about{background:#000 url(../images/about_bg.jpg) no-repeat center top;}
.p_new{background:#000 url(../images/new_bg.jpg) no-repeat center top;}
.p_case{background:#000 url(../images/case_bg.jpg) no-repeat center top;}
.p_add{background:#000 url(../images/add_bg.jpg) no-repeat center top;}
.p_ser{background:#000 url(../images/ser_bg.jpg) no-repeat center top;}
.p_ser_t{background:#4390ee url(../images/ser_bg_t.jpg) no-repeat center top;}


.banner2{width:100%; height: 600px; background-color: #000; line-height: 24px;}
.p_hx{background:#000 url(../images/js_1_bg.jpg) no-repeat center top;}
.p_hx_2{background:#000 url(../images/js_2_bg.jpg) no-repeat center top;}
.p_hx_3{background:#000 url(../images/js_3_bg.jpg) no-repeat center top;}
.p_hx_4{background:#000 url(../images/js_4_bg.jpg) no-repeat center top;}
.p_hx_1{background:#eaefb1 url(../images/js_5_bg.jpg) no-repeat center top;}

.p_hx h3{color:#fff;font-size: 36px; text-align: center; padding-top: 430px;}
.p_hx p{color:#eee;width:800px;text-align: center; margin: 0 auto; margin-top:20px; font-size: 16px;}

.p_hx_2 h3{color:#604902;font-size: 36px; text-align: center; padding-top: 440px;}
.p_hx_2 p{color:#604902;width:1000px;text-align: center; margin: 0 auto; margin-top:20px; font-size: 16px;}

.p_hx_3 h3{color:#fff;font-size: 36px; text-align: center; padding-top: 410px;}
.p_hx_3 p{color:#eee;width:1000px;text-align: center; margin: 0 auto; margin-top:20px; font-size: 16px;}

.p_hx_4 h3{color:#023c5a;font-size: 36px; text-align: center; padding-top: 410px;}
.p_hx_4 p{color:#023c5a;width:800px;text-align: center; margin: 0 auto; margin-top:20px; font-size: 16px;}

.p_hx_1 h3{color:#1a6e82;font-size: 36px; text-align: center; padding-top:256px;}
.p_hx_1 p{color:#888;width:800px;text-align: center; margin: 0 auto; margin-top:20px; font-size: 14px;}

.infoBox {
    padding-top: 66px;
    background-color: #fafafa;
}

.infoBox .menuList {
  z-index: 100;
  float: left;
  width: 200px;
  box-shadow: 0 3px 3px #ededed;
  background-color: #FFFFFF;
  top: 73px;
}

@media (max-width: 520px) {
.infoBox .menuList {
    display: none;
  }
}

@media (max-width: 520px) {
.infoBox .infoList {
    padding: 0;
    width: 100%;
  }
}
.infoBox .menuList a{color: #666;display: block; width: 80%; height: 80%;}
.infoBox .menuList .bigTitle {
  padding-left: 32px;
  width: 100%;
  height: 58px;
  line-height: 58px;
  color: #666;
  font-size:16px;
font-weight: bold;
}
.infoBox .menuList .commonMenuItem {
  padding-left: 32px;
  width: 100%;
	*width:84%;
  height: 50px;
  line-height: 50px;
  font-size: 12px;
  color: #5c5c5c;
  border-top: 1px dashed #bfbfbf;
  cursor: pointer;
  -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.infoBox .menuList .commonMenuItem:hover {
    color: #FFFFFF;
    background-color: #02a8fe;
    border-top: 1px dashed #34c8e6 !important;
}
.infoBox .menuList .commonMenuItem:hover a{ color: #FFFFFF;}
.infoBox .menuList .activeMenu {

  background-color: #02a8fe;
  border-top: 1px dashed #34c8e6;
}
.infoBox .menuList .activeMenu a{  color: #FFFFFF;}

.infoBox .infoList {
  padding-left: 27px;
  padding-bottom: 66px;
  float: left;
  width:970px;
}
.infoBox .infoList:after {
  clear: both;
	
}

.infoBox .infoList .introBox {
  float: left;
  padding: 60px 55px;
  box-shadow: 0 3px 3px #ededed;
  background-color: #FFFFFF;
	width: 943px;
}
.infoBox .infoList .introBox .local, .infoBox .infoList .introBox .local a
{color: #666;}
.infoBox .infoList .introBox .local a:hover
{color: #02a8fe;}

.infoBox .infoList .introBox .line {
  margin-bottom: 30px;
  width: 100%;
  height: 0px;
  border: 1px #bfbfbf dotted;
}
.infoBox .infoList .introBox h1 {
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 28px;
    color: #202020;
    line-height: 28px;
}
.infoBox .infoList .introBox .en {
    margin-bottom: 30px;
    font-size: 12px;
    line-height: 12px;
    color: #a9a9a9;
	text-transform: uppercase;
 
}

.infoBox .infoList .introBox .first {
	margin: 0 auto;
    margin-bottom: 30px;
    display: block;
    line-height: 24px;
    color: #707070;
    word-break: break-all;
	width: 99%;

	
}
.infoBox .infoList .introBox .first a{color:#707070;}
.infoBox .infoList .introBox .first a:hover{color:#02a8fe;}
.infoBox .infoList .introBox .first .n_title{text-align: center;font-size: 24px;}

.infoBox .infoList .introBox .second {
	display: block;
	line-height: 24px;
    font-size: 12px;
    color: #707070;
    word-break: break-all;
    margin-bottom: 30px;
}
.infoBox .infoList .introBox .second h4{margin-bottom:16px;}
.infoBox .infoList .introBox .second ul li {
    list-style-type: circle;
    color: #707070;
	    margin-left: 30px;
    margin-bottom: 30px;
	font-size: 14px;
font-weight: bold;
}
.infoBox .infoList .introBox .second ul li p
{font-size:12px; font-weight: normal;}


/*关于我们*/
.job-con{line-height:26px;color: #495d64;font-size: 12px; }
.join-cont { padding-bottom: 40px }
.join-cont .cont { display: none; font-size: 14px }
.join-cont .selectedDiv { display: block }
.join-cont .cont h3 { font-size: 18px;color: #495d64; font-weight: bold;}
.join-cont .cont p { margin-top: 20px;color: #495d64; margin-bottom: 0; }
.join-cont .cont span { display: block; font-weight: bold; font-size: 14px; line-height: 30px;}
.join-us-link { position: relative }
.join-us-link a { bottom: 6px; display: block; height: 35px; position: absolute; right: 8px; width: 347px }
.tabtit { margin-bottom: 40px }
.tabtit li { background: none repeat scroll 0 0 #a5b8bf; border-radius: 2px; color: #fff; cursor: pointer; float: left; font-size: 15px; height: 35px; line-height: 35px; margin-right: 5px; padding: 0 19px }
.tabtit li.selectedLi { background: none repeat scroll 0 0 #0c72c8 }
.cur  a { color: #00b3eb; font-size: 18px; text-shadow: 0 0 5px #fff }
.me_r  ul label { left: 0; position: absolute; top: 0 }
.me_r  ul p { margin-left: 100px; }
.me_r_r  ul li { margin-bottom: 30px; position: relative }
.tabtit li {  overflow: hidden !important;  margin-bottom: 20px;  padding: 0px 15px; }
.about-us h3 { font-size: 24px; text-shadow: 0 0 5px #fff }
.about-us p { font-size: 16px; line-height: 24px; margin: 20px 0 30px }

.link_ico{width:100%;}
.link_ico li{width:25%;*width:24%;float: left; text-align: center; padding-top:30px; }
.link_ico p{width:100%;margin-top:30px;}
.cirle{ background:url(../images/crile.png) no-repeat top center;background-size:90%; height:120px; padding-top:30px;}
.cirle img{-webkit-transition:-webkit-transform 0.8s ease-out; transition: transform 0.8s ease-out;-moz-transition:-moz-transform 0.8s ease-out;}
.cirle:hover img{ transform: rotate(360deg);-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);}


/*新闻*/
.news-list {
    width:100%;*width:94%;
}
.news-piece {
    position: relative;
    height: 126px;
    border-bottom: 1px solid #e6e6e6;
}
.news-list-items-box {
    position: relative;
    height: 134px;
}
.news-time-box {
    position: absolute;
    top: 30px;
    left: 20px;
    width: 60px;
    height: 60px;
    background-color: #f5f5f5;
    transition: background-color 0.5s ease;
    -o-transition: background-color 0.5s ease;
    -moz-transition: background-color 0.5s ease;
    -webkit-transition: background-color 0.5s ease;
	text-align: center;
}

.news-piece:hover .news-list-items-box {
    background: #fff;
    top: -2px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.12);
}
span.news-item-date {
    display: block;
    height: 24px;
    line-height: 24px;
    font-size: 12px;
    color: #fff;
    background-color: #02a8fe;
}
h4.news-item-day {
    height: 36px;

    border-top: none;
    line-height: 36px;
    font-size: 24px;
    color: #333333;
}

.news-info {
    position: absolute;
    top: 28px;
    left: 98px;
    width: 86%;
    height: 86px;
    overflow: hidden;
    white-space: normal;
    word-break: break-all;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}
.news-piece a.news-hot {
    color: #666;
}
.news-piece a.tit {
    font-size: 16px;
    font-weight: bolder;
    color: #333;
}
.news-piece a.tit {
    text-overflow: ellipsis;
}
.news-piece a {
    font-size: 14px;
    color: #666;
    text-decoration: none;
}
a.news-info-introduce {
    margin-top: 4px;
    display: block;
    line-height: 19px;
    height:40px;
    font-size: 12px;
	overflow: hidden;
}
a.news-info-more {
    position: absolute;
    right: 0;
    bottom: 0;
    display: block;
    height: 20px;
    font-size: 12px;
    color: #ed565c;
}

/*案例*/
.case_info {
  margin-bottom: 66px;
  float: left;
  width:100%;
  padding: 60px 55px;
  box-shadow: 0 3px 3px #ededed;
  background-color: #FFFFFF;
}
.case_info h1 {
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 28px;
    color: #202020;
    line-height: 28px;
}
.case_info .line {
  margin-bottom: 30px;
  width: 100%;
  height: 0px;
  border: 1px #bfbfbf dotted;
}
.case_info .en {
    margin-bottom: 30px;
    font-size: 20px;
    line-height: 12px;
    color: #666;
}

.case_info .first {
	margin: 0 auto;
    margin-bottom: 30px;
    display: block;
    line-height: 19px;
    color: #707070;
    word-break: break-all;
	width:98%;	
}

.case_box {overflow: hidden;}
.case_box li{float: left; width:30%; margin: 10px 1%; list-style: none; height: 120px;}
.text-desc{position: absolute; left: 10px; top:10px; background-color: #eee; height:100%; opacity: 0;width:90%; text-align: left; box-shadow: 0 3px 3px #ededed;font-size: 12px;}

.port-1{float: left; width: 100%; position: relative; overflow: hidden; text-align: center; border: 4px solid rgba(255, 255, 255, 0.9);height: 150px;}
.port-1 .text-desc{opacity: 0.9; top: -100%; transition: 0.5s; color: #000; padding: 15px 20px 20px;}
.port-1 img{transition: 0.5s;width:200px; padding-top:40px; padding-bottom: 40px;}
.port-1:hover img{transform: scale(1.2);}

.port-1.effect-3 .text-desc{top: 50%; left: 50%; width: 0; height: 0; overflow: hidden; padding: 0;z-index: 99; display: flex;align-items: center;
    
    text-align: justify;}
.port-1.effect-3:hover .text-desc{width: 100%; top: 0; left: 0; height: 100%; padding:16px 15px 20px; }


/*加盟*/
.content_info{width:75%;*width:73%;}
.box-fir{width:25%;}
.superiority-box{border: 1px solid rgba(0,0,0,.08);
border-radius: 5px;
min-height: 130px;
padding: 24px 18px 24px;
	width: 290px;
}
.superiority{padding-right: 10px;
margin-bottom: 20px;flex: 0 0 50%;
max-width: 50%;
}

.superiority-title {
 margin-bottom:10px
}
.superiority-title .color-box {
 display:inline-block;
 position:relative;
 top:2px;
 margin-right:15px;
 line-height:0;
 height:16px;
 width:5px
}
.color-box i {
 width:5px;
 height:8px;
 display:inline-block
}
.color-box i:first-child {
 background-color:#44d89e;
 border-radius:5px 5px 0 0
}
.superiority-title .color-box i:last-child {
 background-color:#35c8e6;
 border-radius:0 0 5px 5px
}
.superiority-title span {
    font-size: 18px;
    font-weight: 600;
}
.superiority-desc {
    margin-top: 10px;
    opacity: .7;
    font-size: 14px;
    line-height: 21px;
}
.after-sales-box {
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 5px;
    padding: 32px 24px 90px;
    height: 100%;
}
.after-sales-box .fir-item {
    border-bottom: 1px solid rgba(0,0,0,.08);
}
.fir-item .flag-title {
    margin: 32px auto;
    text-align: center;
    font-size: 62px;
    line-height: 96px;
    font-weight: 300;
    background-image: -webkit-gradient(linear,0 0,90% 0,from(#44d89e),to(#35c8e6));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.after-sales-box .fir-item .strong {
    text-align: center;
    font-size: 18px;
    margin-bottom: 32px;
    font-weight: 700;
}
.after-sales-box .sec-item {
    width: 100%;
    text-align: center;
    display: table;
}
.after-sales-box .sec-item span {
    font-size: 14px;
    display: table-cell;
    vertical-align: middle;
}

.lc_list{width:75%; margin: 0 auto; padding-top: 10px;}
.lc_list li{width:100%; height: 110px; overflow: hidden;}
.lc_list li .ico_all{width: 60px; height: 70px; background: url(../images/lc_ico.png) no-repeat; margin-top: 15px;}
.lc_list li .ico_1{background-position:0 -10px;}
.lc_list li .ico_2{background-position:0 -127px;}
.lc_list li .ico_3{background-position:0 -230px;}
.lc_list li .ico_4{background-position:0 -336px;}
.lc_list li .ico_5{background-position:0 -448px;}
.lc_list li .ico_6{background-position:0 -572px;}
.lc_list li .ico_7{background-position:0 bottom;}
.lc_info{width:550px;min-height: 110px; background: url(../images/lc_05.png) no-repeat top left; padding-left:52px;}
.lc_info h3{font-size:16px;font-weight: bold; color: #486675; line-height:20px; padding-top:30px; }
.lc_info span{ font-size: 12px; color: #666;}

.hide {
  display: none;
}
.hide p{margin-bottom: 15px;}
dt {
  font-size: 18px;
  color: #486675;
font-weight: bold;
  margin-bottom: 20px;
  margin-left: 26px;
  cursor: pointer;

}

/* Triangle list item */
dt:before {
  content: "";
  border-color: transparent #02a8fe;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  display: block;
  height: 0;
  width: 0;
  left: -16px;
  top: 17px;
  position: relative;
}

dd {
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  border: 1px solid #F2EEE6;
  margin: 20px 0 30px;
  position: relative;box-shadow: #eee 6px 6px 5px;
}
dd p{margin-bottom: 15px;}

/* Triangle in definition container */
dd:after, dd:before {
  bottom: 100%;
  left: 6%;
  border: solid transparent;
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

dd:after {
  border-color: rgba(136, 183, 213, 0);
  border-color: transparent;
  border-bottom-color: #fff;
  border-width: 15px;
  margin-left: -15px;
}

dd:before {
  border-color: rgba(194, 225, 245, 0);
  border-color: transparent;
  border-bottom-color: #F2EEE6;
  border-width: 17px;
  margin-left: -17px;
}

.sale{width: 330px;}

.sale_img{width: 410px;}
.sale_img ul li{width:44%;margin:0 3% 0 3%; float: left; text-align: center;}
.sale_img ul li img{width:36%;}
.sale_img ul li p{font-size:16px; font-weight: bold; line-height: 30px;}
.sale_img ul li span{font-size:12px;line-height:18px;}
.xnc{border-top:#ccc 1px dotted; width:96%; margin: 0 auto; margin-top: 10px;margin-bottom: 10px;}
.xnc h3{font-size:16px; font-weight: bold; padding-top: 10px;}

.zysx{border-bottom:#ccc 1px dotted;border-top:#ccc 1px dotted; width:98%; margin: 0 auto; margin-top: 10px;padding-bottom: 16px;}
.zysx h3{font-size:18px;font-weight: bold;padding-top: 10px;}

.zyc h3{font-size:20px; font-weight: bold;padding-top: 10px;color: #486675;}
.zyc ul{width:100%;margin-top: 20px;}
.zyc ul li{width:23%;*width:19%;float: left; margin-left: 1%; margin-right: 1%; background-color: #fff;border: #eee 1px solid; border-bottom: #02a8fe 3px solid; height: 200px; padding: 10px; text-align: center; line-height: 18px;}
.zyc ul li:hover{box-shadow: #ccc 3px 3px 3px;}
.zyc ul li img{margin:15px 0 15px 0}
.zyc .lm{width:95%; *width:82%; margin: 0 auto; padding-left:20px;border: #ccc 1px solid; border-radius: 5px; padding-top: 10px; padding-bottom: 10px; margin-top: 15px;}
.zyc .color-box {
 display:inline-block;
 position:relative;
 top:2px;
 margin-right:15px;
 line-height:0;
 height:16px;
 width:5px
}
.zyc .color-box i {
 width:5px;
 height:8px;
 display:inline-block
}
.zyc .color-box i:first-child {
 background-color:#44d89e;
 border-radius:5px 5px 0 0
}
.zyc .color-box i:last-child {
 background-color:#35c8e6;
 border-radius:0 0 5px 5px
}

.file_list{width:86%; margin: 0 auto; padding-top: 10px;}
.file_list li{background:url(../images/down.png) no-repeat 5px 5px; padding-left:26px; margin-top:20px; border-bottom: #ccc 1px dotted; width:46%; margin-left: 2%; margin-right: 2%; float: left;}
.file_list li a{font-size:16px;}

/*服务*/
.cl:after{ content:".";display:block;height:0;clear:both;visibility:hidden;}
.cl{ zoom:1;}
.title{ text-align:center; padding:50px 0 15px 0;/* border-bottom:1px dashed #e0e0e0;*/}
.title h1{ font-size:40px;}
.title h1 span{ color:#02a8fe;}
.title p{ font:20px/46px "Microsoft YaHei"; color:#2c3e50;}
.title p b{color:#02a8fe;}
.important{ padding:20px 0 0px 0;width: 450px;margin: 0 auto}
.important li{ float:left; margin-right:20px; margin-left: 20px;}

.important li a{ display:block;width:100%; height:100%; display:block; padding:21px;border-radius:10px;border:1px dotted #02a8fe; }
.important li:hover a{ border:1px dotted #696969; background:#fff;}
.important li span{ width:60px; height:60px; display:block;}
.important .rcsp_1 span{ background:url("../images/icon1.png") no-repeat bottom center;}
.important .rcsp_2 span{ background:url("../images/icon2.png") no-repeat bottom center;}
.important .rcsp_3 span{ background:url("../images/icon3.png") no-repeat bottom center;}
.bgbg { background:url("../images/bgbg.png") center bottom no-repeat; width:100%; padding-bottom: 20px;}
.important .rcsp_1:hover span, .important .rcsp_2:hover span,.important .rcsp_3:hover span,.important .rcsp_4:hover span,.important .rcsp_5:hover span,.important .rcsp_6:hover span, .important .rcsp_7:hover span,.important .rcsp_8:hover span, .important .rcsp_9:hover span{transition: background 0.3s;
-moz-transition: background 0.3s;
-ms-transition: background 0.3s;
-webkit-transition: background 0.3s;
-o-transition: background 0.3s;}
.important .rcsp_1:hover span{ background:url("../images/icon1.png") no-repeat top center;}
.important .rcsp_2:hover span{ background:url("../images/icon2.png") no-repeat top center;}
.important .rcsp_3:hover span{ background:url("../images/icon3.png") no-repeat top center;}
.important .rcsp_9{ margin-right:0px;}
.important li p{ line-height:18px; margin-top:20px; text-align:center; display:block; color:#02a8fe;}
.important li:hover p{ color:#333;}
.important li strong{ border-bottom:1px solid #02a8fe; position:relative; display:block;margin-top:15px;z-index:4;}
.important li strong i{display:none;  position:absolute; width:0px; height:0px; border:10px solid transparent;display:block;left: 50%;margin-left: -9px;border-top-color: #02a8fe;}

.important_r{ padding:30px 0px 0px 0px;width:86%;margin: 0 auto; overflow: hidden; border-top: #ccc 1px solid;}
.title_1{ text-align:center;}
.title_1 h3{ font:14px/16px;text-transform: uppercase; color:#535353; display: block; }
.title_1 h3 span ,.title_1 h2 span{ color:#ef571a;}
.title_1 h2{ font: bold 30px/40px "Microsoft YaHei"; color:#535353;padding-bottom: 5px;line-height:80px;}

.ser_list{width:100%; margin-top: 10px;}
.ser_list li{width:46%; margin-left: 2%; margin-right: 2%; float: left; margin-bottom: 15px;}

.fwbz{text-align:center;position: relative;}
.fwbz h3{font-size: 20px;font-weight: bold;padding-top: 10px;color: #486675;}
.fwbz span{display: block;}
.adleft{width:205px;height: 260px;background: #fff;padding-top: 45px;padding-left:20px;padding-right: 20px;float:left;}
.ico{margin: 0 auto; padding-top:30px;}
.ico{border-radius: 100px;display: block;border: 1px solid #eeeeee;width:140px;height:140px;background: #fff;}
.adleft:last-child{border-right:0;}
.adleft .title_2{margin-top:30px;}

.more_info{width:100%; margin-top: 15px; overflow: hidden;border-top: #ccc 1px dotted; border-bottom: #ccc 1px dotted;padding-top:40px;}
.more_info li{width:25%;float: left;height: 190px;}
.more_info .title_3{font-weight: bold;line-height: 24px;line-height:30px;}
.more_info span{font-size: 12px;width: 66%;margin: 0 auto;line-height: 22px;color: #aaa;}

/*技术*/
#hx{width:100%; background-color: #fff; padding-top: 50px; padding-bottom: 50px; }
#hx2{width:100%; background-color: #eee; padding-top:70px; }

.title_4{font-size:26px; color: #666; font-weight: bold; line-height: 30px; text-align: center;}



.xxly li {
  -webkit-perspective:560px;
          perspective: 560px;
}

.xxly  .info {
  -webkit-transform: rotate3d(1, 0, 0, 90deg);
          transform: rotate3d(1, 0, 0, 90deg);
  width: 100%;
  height: 100%;
  padding: 20px;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 4px;
  pointer-events: none;
  background-color: rgba(0, 95, 193, 0.9);
}

.in-top .info {
  -webkit-transform-origin: 50% 0%;
          transform-origin: 50% 0%;
  -webkit-animation: in-top 300ms ease 0ms 1 forwards;
          animation: in-top 300ms ease 0ms 1 forwards;
}

.in-right .info {
  -webkit-transform-origin: 100% 0%;
          transform-origin: 100% 0%;
  -webkit-animation: in-right 300ms ease 0ms 1 forwards;
          animation: in-right 300ms ease 0ms 1 forwards;
}

.in-bottom .info {
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
  -webkit-animation: in-bottom 300ms ease 0ms 1 forwards;
          animation: in-bottom 300ms ease 0ms 1 forwards;
}

.in-left .info {
  -webkit-transform-origin: 0% 0%;
          transform-origin: 0% 0%;
  -webkit-animation: in-left 300ms ease 0ms 1 forwards;
          animation: in-left 300ms ease 0ms 1 forwards;
}

.out-top .info {
  -webkit-transform-origin: 50% 0%;
          transform-origin: 50% 0%;
  -webkit-animation: out-top 300ms ease 0ms 1 forwards;
          animation: out-top 300ms ease 0ms 1 forwards;
}

.out-right .info {
  -webkit-transform-origin: 100% 50%;
          transform-origin: 100% 50%;
  -webkit-animation: out-right 300ms ease 0ms 1 forwards;
          animation: out-right 300ms ease 0ms 1 forwards;
}

.out-bottom .info {
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
  -webkit-animation: out-bottom 300ms ease 0ms 1 forwards;
          animation: out-bottom 300ms ease 0ms 1 forwards;
}

.out-left .info {
  -webkit-transform-origin: 0% 0%;
          transform-origin: 0% 0%;
  -webkit-animation: out-left 300ms ease 0ms 1 forwards;
          animation: out-left 300ms ease 0ms 1 forwards;
}

@-webkit-keyframes in-top {
  from {
    -webkit-transform: rotate3d(-1, 0, 0, 90deg);
            transform: rotate3d(-1, 0, 0, 90deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
}

@keyframes in-top {
  from {
    -webkit-transform: rotate3d(-1, 0, 0, 90deg);
            transform: rotate3d(-1, 0, 0, 90deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
}
@-webkit-keyframes in-right {
  from {
    -webkit-transform: rotate3d(0, -1, 0, 90deg);
            transform: rotate3d(0, -1, 0, 90deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
}
@keyframes in-right {
  from {
    -webkit-transform: rotate3d(0, -1, 0, 90deg);
            transform: rotate3d(0, -1, 0, 90deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
}
@-webkit-keyframes in-bottom {
  from {
    -webkit-transform: rotate3d(1, 0, 0, 90deg);
            transform: rotate3d(1, 0, 0, 90deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
}
@keyframes in-bottom {
  from {
    -webkit-transform: rotate3d(1, 0, 0, 90deg);
            transform: rotate3d(1, 0, 0, 90deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
}
@-webkit-keyframes in-left {
  from {
    -webkit-transform: rotate3d(0, 1, 0, 90deg);
            transform: rotate3d(0, 1, 0, 90deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
}
@keyframes in-left {
  from {
    -webkit-transform: rotate3d(0, 1, 0, 90deg);
            transform: rotate3d(0, 1, 0, 90deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
}
@-webkit-keyframes out-top {
  from {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    -webkit-transform: rotate3d(-1, 0, 0, 104deg);
            transform: rotate3d(-1, 0, 0, 104deg);
  }
}
@keyframes out-top {
  from {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    -webkit-transform: rotate3d(-1, 0, 0, 104deg);
            transform: rotate3d(-1, 0, 0, 104deg);
  }
}
@-webkit-keyframes out-right {
  from {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    -webkit-transform: rotate3d(0, -1, 0, 104deg);
            transform: rotate3d(0, -1, 0, 104deg);
  }
}
@keyframes out-right {
  from {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    -webkit-transform: rotate3d(0, -1, 0, 104deg);
            transform: rotate3d(0, -1, 0, 104deg);
  }
}
@-webkit-keyframes out-bottom {
  from {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    -webkit-transform: rotate3d(1, 0, 0, 104deg);
            transform: rotate3d(1, 0, 0, 104deg);
  }
}
@keyframes out-bottom {
  from {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    -webkit-transform: rotate3d(1, 0, 0, 104deg);
            transform: rotate3d(1, 0, 0, 104deg);
  }
}
@-webkit-keyframes out-left {
  from {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    -webkit-transform: rotate3d(0, 1, 0, 104deg);
            transform: rotate3d(0, 1, 0, 104deg);
  }
}
@keyframes out-left {
  from {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    -webkit-transform: rotate3d(0, 1, 0, 104deg);
            transform: rotate3d(0, 1, 0, 104deg);
  }
}
/* you can ignore this ones */
.xxly {
  padding: 0;
  margin:50px 0 50px;

}
.yzy{width:75%; margin:10px auto;}

.xxly:after {
  content: "";
  display: table;
  clear: both;
}

.xxly li {
  position: relative;
  float: left;
  width: 280px;
  height: 280px;
  margin: 10px;
  padding: 0;
  list-style: none;
}
.xxly li a {
  display: inline-block;
  vertical-align: top;
  text-decoration: none;
  border-radius: 4px;
}
.xxly li h3 {
  margin: 0;
  font-size: 20px;
  color: rgba(255, 255, 255, 0.9);
	text-align: center;
padding-top: 10px

}
.xxly li p {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8);
	margin-top: 10px;
line-height: 30px;
}
.xxly li .normal {
  width: 100%;
  height: 100%;
  background-color: #ECF0F1;
  color: rgba(71, 100, 134, 0.6);
  box-shadow: inset 0 2px 20px #e6ebed;
  text-align: center;
  font-size:20px;
	font-weight: bold;
  line-height:50px;
}

.jspt{width:60%;margin: 0 auto; margin-top: 20px;}
.jspt li{border: #ccc 1px solid; border-radius: 5px; padding:10px 20px; float:left; margin: 10px;}
.jspt li:hover{background:#0483db;}
.jspt li:hover a{color: #fff; font-weight: bold;}
.jspt li a{color:#aaa;font-size: 16px;}

.five_model{overflow: hidden;padding-top:60px; padding-bottom:60px; width: 100%;}
.five_model li{width:18%; margin-left: 1%; margin-right: 1%; float:left; text-align: center;}
.five_model li h3{font-size:16px; font-weight: bold; color: #3d4d66;}

.five_model li p{font-size:12px;width: 170px; margin: 0 auto; color: #666;}

.five_model  .f_ico{background: url(../images/icon.png) no-repeat; width:130px; height:160px;margin: 0 auto;  }
.five_model  .ico_1{ background-position: -9px top; }
.five_model  .ico_2{ background-position: -222px top; }
.five_model  .ico_3{ background-position: -435px top; }
.five_model  .ico_4{ background-position: -650px top; }
.five_model  .ico_5{ background-position: -860px top; }

.five_model li:hover .f_ico{background-position-y:bottom;-moz-transition: .3s .3s;
            -o-transition: .3s .3s;
            -webkit-transition: .3s .3s;
            transition: .3s .3s;}
.g_img{width:420px; margin-top: 60px; position: relative; z-index: 4;}
.g_img img{width:100%;}

.g_img .large {
	width: 175px; height: 175px;
	position: absolute;
	border-radius: 100%;
	z-index: 6;
	/*处理放大镜的玻璃效果和阴影效果*/
	box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 
	0 0 7px 7px rgba(0, 0, 0, 0.25), 
	inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
	
	/*在这里载入对应的一张大图*/
	background: url('../images/yunweu_pic.png') no-repeat;
	
	/*默认情况下，不显示放大镜*/
	display: none;
	
}

/*避免边缘重叠错误，使用样式display: block;进行处理*/
.g_img .small { display: block; }

.g_info{width:690px; margin-top: 60px;}
.g_i{margin-bottom:30px;margin-top: 20px; color: #666; line-height: 26px; background: url(../images/star.png) no-repeat left 5px; padding-left:20px;}


/*云联盟*/
.title_5{font-size:26px; color: #444; font-weight: bold; line-height: 30px; text-align: left;}
.title_5 span{font-size: 18px; color: #999; font-style: italic;font-weight: normal;}
.clour_qy{width:590px;margin-top: 50px; margin-bottom: 30px;}
.clour_qy li{width:548px; background: url(../images/cloud_lm_04.jpg) no-repeat left top; padding-left: 40px; height: 78px; overflow: hidden;font-size: 16px; color: #444;font-weight: bold; padding-top: 6px;}
.clour_qy li:first-child{padding-top: 0;}
.clour_qy li p{font-weight:normal;color:#bbb; font-size: 12px; padding-top: 5px;}
.clour_qy .one{background-position:left -2px;}
.clour_qy .two{background-position:left -87px;}
.clour_qy .three{background-position:left -170px;}
.clour_qy .four{background-position:left -257px;}
.clour_qy .five{background-position:left -344px;}
.clour_qy .six{background-position:left -430px;}

.hx3{width:100%; background-color: #f5f9fa; padding-top:70px; margin-top: 70px;}
.title_6{font-size:26px; color: #444; font-weight: bold; line-height: 30px; text-align: center;}

.hx4{width:100%; padding-top:70px; padding-bottom:70px; }
.title_7{font-size:26px; color: #666; font-weight: bold; line-height: 30px; text-align: center;margin-bottom:70px;}
.s_title {color: #444; font-size: 18px;font-weight: bold; line-height: 60px;}
.qd{width:100%;}
.qd li{background:url(../images/dx.jpg) no-repeat left; padding-left:30px; color: #888; line-height:36px;}
.nj{width:550px;}


.hx5{width:100%; background:#eaefb1 url(../images/cloud_lm_15.jpg) no-repeat center; height: 538px; padding-top:70px; padding-bottom:70px; }
.corl7{color:#4f5322;}
.corl7 p{font-size:12px; color: #787d3f; width: 666px;margin: 0 auto; text-align: center;line-height: 20px; margin-top: 12px; font-weight: 100;font-family: "宋体";}
.ys{padding-top: 0;}
.ys .f_ico{ background: url(../images/icon_2.png) no-repeat;}
.ys  .ico_1{ background-position: -9px top; }
.ys  .ico_2{ background-position: -222px top; }
.ys  .ico_3{ background-position: -435px top; }
.ys  .ico_4{ background-position: -650px top; }
.ys  .ico_5{ background-position: -860px top; }

.line_c{width:100%; border-bottom: #ddd 2px dotted; margin-bottom:40px; margin-top: 40px;}
.jl_btm{margin-bottom:40px;}
.ts_1_img{margin-right: 50px;}
.ts_2_img{margin-left: 50px;}
.ts_1{width:550px; background:url(../images/cloud_lm_18.jpg) no-repeat left top; padding-left:120px;font-size: 20px; color: #30a9de; font-weight: bold; padding-top:40px; margin-left: 10px;}
.hx4 p{font-size:14px; color: #9c9b9b;line-height: 24px; margin-top:20px; }

.ts_2{width:550px; background:url(../images/cloud_lm_28.jpg) no-repeat left top; padding-left:120px;font-size: 20px; color: #30a9de; font-weight: bold; padding-top:40px; margin-right: 10px;}

/*2019.10.16 节点分布*/
.clearfix {*zoom:1}
.clearfix:after {content: ""; display: block; height:0; clear:both; visibility: hidden;}
.node-search{position: relative;}
.node-form{margin: 40px 0 20px 0;}
.node-form .node-input{width:95%;height:38px;padding: 0 10px; line-height:38px;border: 1px solid #02a8fe;outline: none}
.node-search .node-btn{position: absolute;top:0;right:0;width:115px;height:38px;background-color: #02a8fe;color: #fff;border: 1px solid #02a8fe;font-size: 16px;border-top-right-radius:6px;border-bottom-right-radius:6px;}
.key{margin-bottom: 30px;}
.key .color-box {display:inline-block;position:relative;top:2px;margin-right:15px;line-height:0;height:16px;width:5px}
.key .color-box i {width:5px;height:8px;display:inline-block}
.key .color-box i:first-child {background-color:#44d89e;border-radius:5px 5px 0 0}
.key .color-box i:last-child {background-color: #35c8e6;border-radius: 0 0 5px 5px;}
.key .keyword{display: inline;color: #999;font-size: 14px;}
.key .keyword span{margin: 0 10px;}
.item-check {margin: 15px 0;color: #666;font-size: 14px;}
.item-check .n-name{color: #333;}
.item-check span{margin-right: 10px;;display: -webkit-inline-box;cursor: pointer;}
input.cbox {-webkit-appearance: none;width: 14px!important;height: 14px!important;display: inline-block;margin: -3px 5px 0 0!important;cursor: pointer;vertical-align: middle;background: url(../images/checkbox-checked.png) no-repeat;outline: none}
input.cbox:checked {background: url(../images/checkbox.png) no-repeat;}
.node-list {margin-top: 40px; padding-top: 40px; border-top:1px solid #d1d1d1}
.node-list ul li{float: left; width:242px;margin-right: 40px;margin-bottom:30px; height:293px; border: 1px solid #eee;box-shadow: 3px 6px 3px rgba(0, 0, 0, 0.06); -moz-box-shadow:3px 6px 3px rgba(0, 0, 0, 0.06); -webkit-box-shadow: 3px 6px 3px rgba(0, 0, 0, 0.06)}
.node-list ul li:nth-child(4n){margin-right: 0;}
.node-list ul li .imgbox{width:240px;height:150px;overflow: hidden;}
.node-list ul li .imgbox img{width:100%;}
.node-list ul li .desc{padding: 10px;}
.node-list ul li .desc .n-title{padding: 7px 0; color: #322432;font-size: 14px;}
.node-list ul li .desc .n-text{color: #999;font-size: 12px; text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;line-clamp: 2;-webkit-box-orient: vertical;line-height:22px;}
.node-list ul li .desc .tag{margin-top: 12px;padding-top: 12px;border-top:1px solid #eee}
.node-list ul li .desc .tag span{padding: 4px 6px; background-color: #02a8fe;color: #fff;margin-right: 6px;font-size: 12px;}
.node-list h3{ margin-bottom: 20px;padding-left: 20px; font-size: 22px;color: #333;background: url(../images/node-s.png) no-repeat left center;}
.red{color: #f00;}
.result span{margin-right: 5px;padding: 4px 25px 4px 8px;border: 1px solid #eee;position: relative;cursor: pointer;}
.result span:hover{border: 1px solid #e5393c;}
.result .n-name{border: none;padding: 2px 0;}
.result i{display: block;position: absolute;width: 25px;height: 22px;right: 0;top: 0;background: url(../images/search.ele.png) no-repeat 7px -140px;}