.content { width:1400px;}

/* banner */
.banner{ clear:both;position: relative; overflow: hidden;width: 100%;}
.banner .bd { width: 100%;}
.banner .bd ul li a { display: block; height: 600px; font-size: 0;}
.banner .hd { position: absolute; left: 0; bottom: 20px; display: block; width: 100%; text-align: center;}
.banner .hd ul { display: inline-block;}
.banner .hd ul li { float: left; text-indent: -999px; overflow: hidden;  margin: 0 10px; width: 15px; height: 15px; background: #e3e3e3; border-radius: 50%;}
.banner .hd ul li.cur { background: #0063b3;}
.banner .prev, .banner .next {  display:block; cursor:pointer;position: absolute; top: 50%; margin-top: -35px; width: 70px; height: 70px; border-radius: 50%; opacity: 0; transition: all 1s;}
.banner .prev { left: 5%; background: url("../images/Index/banner_prev.png")no-repeat center;}
.banner .next { right: 5%; background: url("../images/Index/banner_next.png")no-repeat center;}
.banner:hover .prev, .banner:hover .next { opacity: 0.5; background-color:#0063b3; }
.banner .prev:hover , .banner .next:hover  { opacity: 1;}
/* banner end */


/* trait */
.trait { position: relative;padding: 52px 0 40px;background: #fff; z-index: 3; width: 1400px; margin: -9px auto 0; overflow: hidden;box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.11);}
.trait:after { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 9px; background: #0063b3;}
.trait .item { float: left; width: 25%;   text-align: center; border-right: 1px dashed #666; box-sizing: border-box;}
.trait .item:last-of-type { border-right: none;}
.trait .item h2 {font-size: 60px; color: #333;}
.trait .item .num-unit { display:inline-block;overflow:hidden;font-size: 14px; color: #fff; text-align: center; background: url("../images/Index/trait-icon01.png") no-repeat center; width: 34px; height: 21px; line-height: 21px; background-size: 100%;}
.trait .item p { font-size: 16px; color: #666; margin-top: 5px;}
/* trait end */


/* adv */
.adv { position: relative; overflow: hidden; padding-top: 110px; padding-bottom: 100px;}
.adv-con { margin-top: 95px; overflow: hidden;}
.adv-con .adv-le { float: left; width: 365px; text-align: right;}
.adv-con .item { position: relative;}
.adv-con .box1:after {position:absolute;right: -121px;top: 45px;content: '';display: block;background: url("../images/Index/adv-icon01.png") no-repeat center;width: 213px;height: 47px;}
.adv-con .box2:after {position:absolute;right: -123px;top: 4px;content: '';display: block;background: url("../images/Index/adv-icon02.png") no-repeat center;width: 262px;height: 46px;}
.adv-con .item  h2 { font-size: 24px;  margin-bottom: 35px;}
.adv-con .item p {line-height: 1.75;font-size: 18px;color: #1a1a1a;}
.adv-con .box2 {margin-top: 155px;margin-right: 110px;}
.adv-con .box1 h2 { color: #282a89;}
.adv-con .box2 h2 { color: #ed1b23;}
.adv-con .adv-cn   {margin-top: 37px;float: left;width:629px;position: relative;}
.adv-con .adv-cn:after { content: ''; display: block; position: absolute; bottom: -21px; left: 50%; background: url("../images/Index/adv-shaow.png") no-repeat center; width: 156px; height: 21px; transform: translateX(-50%);}
.adv-con .adv-cn > span { display:block;width: 100%; font-size: 0; }
.adv-con .adv-cn > span img { width: 100%;}
.adv-con .adv-cn > img {width: 371px;position: absolute;left: 143px;top: -9px;animation:light2 7s linear infinite;}
.adv-con .adv-ri { float: right; width: 365px;}
.adv-con .box3 {margin-top: 80px;width: 88%;margin-left: 12%;}
.adv-con .box4 {margin-top: 51px;width: 88%;margin-left: 12%;}
.adv-con .box3 h2 { color: #ed1b23;}
.adv-con .box4 h2 { color: #282a89;}
.adv-con .box3:after {position:absolute;left: -87px;top: 42px;content: '';display: block;background: url("../images/Index/adv-icon03.png") no-repeat center;width: 180px;height: 52px;}
.adv-con .box4:after {position:absolute;left: -144px;top: 42px;content: '';display: block;background: url("../images/Index/adv-icon04.png") no-repeat center;width: 232px;height: 43px;}
.adv-con .adv-le .item { animation: fadeinL 1s ease-out backwards;}
.adv-con .adv-ri .item { animation: fadeinR 1s ease-out backwards;}
@keyframes light2 { 0% {transform: rotateZ(0deg) rotateY(0deg);}50% {transform: rotateZ(180deg) rotateY(0deg);} 100% {transform: rotateZ(360deg) rotateY(0deg);} }
/* adv end */



/* plan */
.plan { padding-top: 94px; padding-bottom: 60px; overflow: hidden; background: #f6f6f6;}
.plan-con { overflow: hidden; margin-top: 40px;}
.project-menu { float: left; width: 320px; margin-right: 30px;animation: fadeinL 1s ease-out backwards; }
.project-menu  .menu-top  { overflow: hidden; padding: 40px 0 30px 90px; background: #0063b3; position: relative;}
.project-menu  .menu-top:after { content: ''; display: block; position: absolute; left: 30px; top: 47px; background: url("../images/Index/project01.png") no-repeat center; width: 48px; height: 48px;}
.project-menu  .menu-top h2 { font-size: 24px; color: #fff;}
.project-menu  .menu-top h2 a { color: #fff;}
.project-menu  .menu-top p { font-size: 14px; margin-top: 9px; color: rgba(255,255,255,0.2)}
.menu-list { overflow: hidden; background: #fff;}
.menu-list dl { padding: 35px 0 35px 84px; border-bottom: 1px solid #dedede; box-sizing: border-box;}
.menu-list dl:last-of-type { border-bottom: 0;}
.menu-list dl dt { margin-bottom: 14px; position: relative;}
.menu-list dl dt:hover a { color: #0063b3;}
.menu-list dl:nth-of-type(1) dt:after {  content:''; display:block; position:absolute; left:-40px; top:0;background: url("../images/Index/project-icon02.png") no-repeat center; width: 25px; height: 25px;}
.menu-list dl:nth-of-type(2) dt:after {  content:''; display:block; position:absolute; left:-40px; top:0;background: url("../images/Index/project-icon03.png") no-repeat center; width: 25px; height: 25px;}
.menu-list dl:nth-of-type(3) dt:after {  content:''; display:block; position:absolute; left:-40px; top:0;background: url("../images/Index/project-icon04.png") no-repeat center; width: 25px; height: 25px;}
.menu-list dl:nth-of-type(4) dt:after {  content:''; display:block; position:absolute; left:-40px; top:0;background: url("../images/Index/project-icon05.png") no-repeat center; width: 25px; height: 25px;}
.menu-list dl dt a { color: #333; font-size: 22px; font-weight: bold;}
.menu-list dl dd {display: block;padding: 8px 0;position: relative;}
.menu-list dl dd a { color: #333; font-size: 16px;}
.menu-list dl dd:after {content: '';display: block;position: absolute;left: -12px;top: 16px;width: 5px;height: 5px;border-radius: 50%;background: #333;}
.menu-list dl dd:hover a{ color: #0063b3;}
.menu-list dl dd:hover:after { background: #0063b3;}
.menu-list dl:nth-of-type(1) dt:hover:after {background: url("../images/Index/project-icon02_02.png") no-repeat center;}
.menu-list dl:nth-of-type(2) dt:hover:after {background: url("../images/Index/project-icon03_02.png") no-repeat center;}
.menu-list dl:nth-of-type(3) dt:hover:after {background: url("../images/Index/project-icon04_02.png") no-repeat center;}
.menu-list dl:nth-of-type(4) dt:hover:after {background: url("../images/Index/project-icon05_02.png") no-repeat center;}

/* project */
.project { float: left; width: 1050px; background: #fff; overflow: hidden;}
.project .hd { border-bottom: 1px solid #ececec; display: block; overflow: hidden;}
.project .hd li { position:relative;float: left; width: 175px; height: 60px; line-height: 60px; text-align: center;}
.project .hd li:after { content: ''; display: block; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 13px; border-right: 1px dashed #666; box-sizing: border-box;}
.project .hd li:last-of-type:after { display: none;}
.project .hd li a {font-size: 18px; color: #333;}
.project .hd li.cur { background: #0063b3;}
.project .hd li.cur a { color: #fff;}
.project .hd li.cur:after { display: none;}
.project .project-list { margin-top: 30px;}
.project .project-list .item { float: left; width: 305px; margin:0 0 28px 33px;}
.project .project-list .item .pic { width: 100%; overflow: hidden; font-size: 0}
.project .project-list .item .pic img { width: 100%; transition: all 1s;height: 193px;}
.project .project-list .item .pic:hover img { transform: scale(1.05);}
.project .project-list .item p {font-size: 16px;color: #222;margin-top: 12px;text-align: center;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
.project .project-list .item:hover p { color: #0063b3;}
.project .hd > span { float: right;  font-size: 18px; color: #333; line-height: 60px; margin-right: 20px;}
/* project end */

/* case */
.case {margin-top: 47px;float: left;width: 1050px;background: #fff;overflow: hidden;}
.case .hd { border-bottom: 1px solid #ececec; display: block; overflow: hidden;}
.case .hd ul { float: left;}
.case .hd li { position:relative;float: left; width: 175px; height: 60px; line-height: 60px; text-align: center;}
.case .hd li:after { content: ''; display: block; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 13px; border-right: 1px dashed #666; box-sizing: border-box;}
.case .hd li:last-of-type:after { display: none;}
.case .hd li a {font-size: 18px; color: #333;}
.case .hd li.cur { background: #0063b3;}
.case .hd li.cur a { color: #fff;}
.case .hd li.cur:after { display: none;}
.case .hd > span { float: right;  font-size: 18px; color: #333; line-height: 60px; margin-right: 20px;}
.case .case-list { margin-top: 30px;}
.case .case-list .item { float: left; width: 305px; margin:0 0 28px 33px;}
.case .case-list .item .pic { width: 100%; overflow: hidden; font-size: 0}
.case .case-list .item .pic img { width: 100%; transition: all 1s;height:193px;}
.case .case-list .item .pic:hover img { transform: scale(1.05);}
.case .case-list .item p {font-size: 16px;color: #222;margin-top: 12px;text-align: center;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
.case .case-list .item:hover p { color: #0063b3;}
/* case */

/* plan end */



/* server */
.server { overflow: hidden; padding: 74px 0 106px; background: url("../images/Index/server-bg.jpg") no-repeat center; width: 100%; background-size: cover;}
.server .wrap-tit h2  span { color: #fff;}
.server .wrap-tit p {  color: #fff;}
.server-con { margin-top: 55px;}
.server-con .item {  position:relative;float: left; transition: all 1s; padding-left: 17px; width:423px; height:545px;margin-right: 40px; background: #fff;}
.server-con .item:hover { transform: translateY(-30px);}
.server-con .item:last-of-type { margin-right: 0;}
.server-con .item  img { width: 405px; margin-top:17px;}
.server-con .item h2 { margin-top:30px;font-size: 26px; color: #333;}
.server-con .item span { margin-top:5px;display: block;  font-size: 26px; color: #333;}
.server-con .item p { margin-top: 25px; font-size: 14px; color: #333; line-height: 1.5; width: 90%;}
.server-con .item i { position: absolute; left: 17px; bottom: 22px; display: block; width: 20px; height: 4px; background: #ed1b23;}
/* server end*/


/* spot */
.spot { position: relative; padding: 74px 0 65px;}
.spot .wrap-tit span em { font-weight: bold; color: #ed1b23;}
.spot-con { margin-top: 35px; overflow: hidden;}
.spot-con .item { float: left; width: 200px; height:370px; margin-right:40px;border-radius: 100px; background: #f6f6f6;}
.spot-con .item:nth-of-type(odd) { animation: fadeinT 1s ease-out backwards;}
.spot-con .item:nth-of-type(even) { animation: fadeinB 1s ease-out backwards;}
.spot-con .item:last-of-type { margin-right: 0;}
.spot-con .item span {display: block; margin: 20px auto 0; width: 172px; font-size: 0; border-radius: 50%; overflow: hidden;}
.spot-con .item span img { width: 100%;}
.spot-con .item h2  { font-size: 26px; color: #222; margin-top: 39px; text-align: center;}
.spot-con .item p {margin: 20px auto 0;width: 77%;font-size: 16px;color: #222;line-height: 1.5;text-align: center;}
.spot-con .item:hover { background: #ed1b23;}
.spot-con .item:hover h2,.spot-con .item:hover p  { color: #fff;}
/* spot end */

/* process */
.process { overflow: hidden; padding:80px 0 90px; background: #f6f6f6;}
.process-con { margin-top: 60px; overflow: hidden; position: relative;}
.process-con:after { content: ''; display: block; margin-top:61px; width: 95%; height: 1px; border-bottom: 1px dashed #666; box-sizing: border-box;}
.process-con .item { margin-right:60px; text-align:center;float: left; background: url("../images/Index/process-bg.png") no-repeat center; width: 122px; height: 132px;}
.process-con .item:nth-of-type(odd) {animation: fadeinL 1s ease-out backwards; }
.process-con .item:nth-of-type(even) {animation: fadeinL 2s ease-out backwards; }
.process-con .item:last-of-type { margin-right: 0;}
.process-con .item img { width: 40px; margin-top: 28px;}
.process-con .item p { font-size: 17px; color: #fff; margin-top: 5px;}
/* process end */


/* photos */
.photos { position: relative; padding-top: 90px; padding-bottom: 60px; overflow: hidden;}
.photos-top .photos-tit { float: left; width: 630px;}
.photos-top .photos-tit h2 a { font-size: 40px; color: #222; font-weight: normal;}
.photos-top .photos-tit h2 a:hover { color: #0063b3;}
.photos-top .photos-tit span { margin-top:15px;display: block; font-size: 20px; color: #222;}
.photos-top .photos-tit p { font-size: 15px; color: #333; line-height: 1.75; margin-top: 55px; width: 85%;text-align: justify;}
.photos-top .photos-tit > a { margin-top: 70px; display: block; width: 134px; height: 47px; line-height: 47px; text-align: center; font-size: 14px; color: #fff; background: #0063b3;}
.photos-top .photos-tit > a:hover { background: #ed1b23;}
.photos-top .pic { width: 770px; font-size: 0; overflow: hidden;}
.photos-top .pic img { width: 100%; transition: all 1s;}
.photos-top .pic:hover img { transform: scale(1.05);}
.photos-slide { margin-top: 30px;  position: relative;}
.photos-slide .item { float: left; width: 338px; margin:0  6px; font-size: 0;}
.photos-slide .item a { display: block; font-size: 0;}
.photos-slide .item img { width: 100%;}
.photos-slide .item p { font-size: 16px; color: #333; margin-top: 18px; text-align: center;}
.photos-slide .item:hover p { color: #0063b3;}
.photos-slide span { display:block;position: absolute; top: 50%; margin-top: -19px; width: 39px; height: 39px; border-radius: 50%;}
.photos-slide .prev { left: -40px; background: url("../images/Index/prev.png") no-repeat center; background-color: #e4e4e4;}
.photos-slide .next { right: -40px; background: url("../images/Index/next.png") no-repeat center; background-color: #e4e4e4;}
.photos-slide .prev:hover { background: url("../images/Index/prev_02.png") no-repeat center; background-color: #0063b3;}
.photos-slide .next:hover { background: url("../images/Index/next_02.png") no-repeat center; background-color: #0063b3;}

@media screen and (max-width: 1440px) {
    .photos-slide .prev { left: -20px;}
    .photos-slide .next { right: -20px;}
}
/* photos end */


/* system */
.system { padding-top: 30px;  padding-bottom: 96px; overflow: hidden;}
.system-con { margin-top: 37px; overflow: hidden;}
.system .bd  li { width: 100%; font-size: 0;}
.system .bd  li img { width: 100%;}
.system .hd {  position:relative; z-index:2;margin:-92px auto 0;width: 1100px; height: 172px; overflow: hidden;}
.system .hd .item { float: left;}
.system .hd .item-show { position:relative;float: left;  width: 174px; height:172px;background: #0063b3;  text-align: center;}
.system .hd .item-show img {width: 60px; margin-top: 26px;}
.system .hd .item-show  p { font-size: 24px; color: #fff;}
.system .hd .item-hide {float: left;position: relative;opacity: 0;width: 0;height: 172px;background: #fff;transition: all 1s;}
.system .hd .item-hide p { font-size: 16px; color: #333; line-height: 1.75; width: 80%; margin: 50px auto 0;}
.system .hd .item.cur .item-hide{ opacity: 1; width: 404px;}
.system .hd .item.cur .item-show { background: #ed1b23;}
.system .hd .item .item-hide:after {content: '';display: none;position: absolute;left: 0;top: 50%;background: url("../images/Index/system-next.png") no-repeat center;width: 6px;height: 12px;}
.system .hd .item.cur .item-hide:after { display: block;}
/* system  end */




/* news */
.news{ position: relative; overflow: hidden; background: #f5f5f5; padding-bottom: 80px; padding-top:77px;}
.news .news-con { margin-top: 60px; overflow: hidden;}
.news-con .news-menu {display: block; text-align: center;}
.news-con .news-menu ul { display:inline-block;}
.news-con .news-menu ul li { position: relative; float: left; margin: 0 10px;  width: 190px; height: 60px; line-height: 60px; text-align: center;}
.news-con .news-menu ul li a { display: block; background: #fff; color: #333; font-size: 18px;}
.news-con .news-menu li.cur a { color:#fff; background: #0063b3;}
.news-con .news-main { overflow: hidden; margin-top: 40px;}
.news-con .news-le { float: left; width: 700px;}
.news-con .news-le .pic { width: 100%; font-size: 0; overflow: hidden;}
.news-con .news-le .pic img { width: 100%;transition: all 1s;}
.news-con .news-le .pic-tit {margin: -70px auto 0;padding: 33px 0;overflow: hidden;background: #fff;position: relative;width: 660px;}
.news-con .news-le .pic-tit > span { float: left; display: block;  width: 120px; text-align: center; border-right: 1px solid #ebebeb; box-sizing: border-box;}
.news-con .news-le .pic-tit > span h2 { font-size: 52px; color: #666;}
.news-con .news-le .pic-tit > span em { display: block; font-size:14px; color: #666;}
.news-con .news-le .tit1 {  float:left;margin-left: 30px; width: 70%;}
.news-con .news-le .tit1 h2 { font-size: 18px; color: #222; font-weight: normal;text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.news-con .news-le .tit1 p {  margin-top:20px;font-size: 14px; color: #666; line-height: 1.5;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp:2; overflow: hidden;}
.news-con .news-le .pic:hover img { transform: scale(1.1);}
.news-con .news-le .pic-tit:hover h2 { color: #0063b3;}
.news-con .news-le .pic-tit:hover em { color: #0063b3;}
.news-con .news-ri { float: left; margin-left:50px; width: 650px;}
.news-con .news-ri .item {overflow: hidden;width: 100%;margin-bottom: 33px;}
.news-con .news-ri .item:last-of-type { margin-bottom: 0;}
.news-con .news-ri .item .number { float: left; text-align: center; width: 105px; height: 105px;  background: #fff;}
.news-con .news-ri .item .number h2 {font-size: 52px;color: #666;margin-top: 10px;}
.news-con .news-ri .item .number em { display: block; font-size: 14px; color: #666;}
.news-con .news-ri .pic-tit { float: left;margin-left: 30px; width: 515px;position: relative;}
.news-con .news-ri .pic-tit h2 { font-size: 18px;color: #222; font-weight: normal;}
.news-con .news-ri .pic-tit p { margin-top: 20px; font-size: 14px; color: #666; line-height: 1.5;}
.news-con .news-ri .item:hover h2 { color: #0063b3;}
.news .news-more {display: block;width: 130px;text-align: center;margin: 40px auto 0;font-size: 16px;color: #666;}
.news .news-more i {display: inline-block;background: url("../images/Index/news-next.png") no-repeat center;width: 15px;height: 15px;margin-left: 2px;vertical-align: middle;}
.news-con .news-ri .item:hover .number { background: #0063b3;}
.news-con .news-ri .item:hover .number h2,.news-con .news-ri .item:hover .number em { color: #fff;}
.news .news-more:hover { color: #0063b3;}
.news .news-more:hover i { background: url("../images/Index/news-next_02.png") no-repeat center;}
/* news end */

@media screen  and (max-width: 1500px){
    .content { width:1200px;}
    .trait { width: 1200px;}
    .adv-con .adv-le { width: 305px;}
    .adv-con .adv-cn { width: 550px;}
    .adv-con .adv-cn > img { width: 324px; left: 126px; top: -12px;}
    .adv-con .adv-ri { width: 305px;}
    .adv-con .box2 { margin-top: 110px;}
    .adv-con .box3 { margin-top: 57px;}
    .project-menu { width: 230px; margin-right: 20px;}
    .project-menu .menu-top { padding:40px 0 30px 47px;}
    .project-menu .menu-top h2 { font-size: 20px;}
    .project-menu .menu-top p { font-size: 13px;}
    .project-menu .menu-top:after { width: 38px; height: 38px; left: 4px; top: 48px;}
    .menu-list dl { padding: 16px 0 35px 60px;}
    .project { width: 950px;}
    .project .hd li { width: 155px;}
    .project .hd li a { font-size: 16px;}
    .project .project-list .item { width: 273px;}
    .case { width: 950px;}
    .case .hd li { width: 155px;}
    .case .hd li a { font-size: 16px;}
    .case .case-list .item { width: 273px;}
    .server-con .item { width: 356px;}
    .server-con .item img { width: 340px;}
    .spot-con .item { width: 185px; margin-right: 18px;}
    .spot-con .item span { width: 157px;}
    .process-con .item { margin-right:32px;}
    .photos-top .photos-tit { width: 530px;}
    .photos-top .pic { width: 670px;}
    .photos-top .photos-tit > a { margin-top:50px;}
    .photos-slide .item { width:288px;}
    .photos-slide span { margin-top: -38px;}
    .news-con .news-le { width: 600px;}
    .news-con .news-le .pic-tit { width: 560px;padding:23px 0;}
    .news-con .news-le .pic-tit > span h2 { font-size: 40px;}
    .news-con .news-le .tit1 p { margin-top: 10px;}
    .news-con .news-ri { width: 580px; margin-left: 20px;}
    .news-con .news-ri .item .number { width: 85px; height: 85px;}
    .news-con .news-ri .item .number h2 { font-size: 40px;}
    .news-con .news-ri .pic-tit { margin-left: 20px; width: 475px;}
    .news-con .news-ri .item { margin-bottom: 29px;}
    .news-con .news-ri .pic-tit p {max-height:40px; overflow:hidden;}
}
@media screen  and (min-width: 1500px){
    .content { width:1400px;}
}

@media screen  and ( max-width: 1200px) {
    .content { width: 1150px}
}


@media (max-width: 1200px) {
    .project-menu .menu-top h2 { font-size: 18px;}
    .menu-list dl dt a { font-size: 17px;}
    .menu-list dl { padding: 16px 0 35px 50px;}
    .project-menu { width: 205px;}
    .menu-list dl {}
    .project { width: 925px;}
    .case { width: 925px;}
    .server-con .item { width: 338px;}
    .server-con .item img { width: 325px;}
    .spot-con .item { width: 176px; margin-right: 14px;}
    .process-con .item { width: 114px; margin-right: 29px;}
    .photos-tit { width: 505px;}
    .photos-top .pic { width: 545px;}
    .photos-top .photos-tit > a { margin-left: 5px;}
    .photos-slide .item {  width: 273px;}
    .photos-slide span { margin-top: 3px;}
    .news-con .news-le { width: 575px;}
    .news-con .news-ri { width: 555px;}
    .news-con .news-ri .item .number { width: 80px; height: 80px;}
    .news-con .news-ri .pic-tit { width: 455px;}
}