body { background: white; }

.banner { height: 400px; background-position: center center; background-repeat: no-repeat; -webkit-background-size: auto 100%; background-size: auto 100%; position: relative; background-color: #11151e; }
.banner ul { position: absolute; bottom: 0; left: 50%; width: 1104px; margin-left: -552px; background: rgba(23, 29, 42, 0.8); }
.banner ul li { width: 140px; float: left; position: relative; padding: 30px 0 30px 80px; line-height: 1; color: white; cursor: context-menu; overflow: hidden; height: 46px; }
.banner ul li:after { position: absolute; width: 100%; height: 100%; top: 100%; left: 0; background: #3ccec5; z-index: 1; content: ""; -webkit-transition: all ease 0.3s; transition: all ease 0.3s; }
.banner ul li:hover:after { top: 0; }
.banner ul li + li { border-left: 1px solid #41444e; }
.banner ul li img { position: absolute; left: 35px; top: 50%; margin-top: -18px; z-index: 2; }
.banner ul li .num { height: 24px; line-height: 24px; font-size: 24px; font-weight: bold; z-index: 2; position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.banner ul li h5 { font-size: 14px; line-height: 14px; font-size: 14px; font-weight: normal; margin-top: 8px; z-index: 2; position: relative; }

.title { display: inline-block; line-height: 1; padding: 13px 11px; font-size: 24px; color: #1d262b; border-bottom: 2px solid #1cc9b5; position: relative; }
.title:after { border: 8px solid transparent; position: absolute; content: ""; left: 50%; margin-left: -8px; bottom: -16px; border-top-color: #1cc9b5; }

.notice-list { padding: 57px 0 68px; text-align: center; }
.notice-list .title { margin-bottom: 68px; }
.notice-list ul { width: 1140px; }
.notice-list ul li { float: left; width: 530px; margin: 0 20px; border-bottom: 1px solid #d2dede; position: relative; line-height: 1; }
.notice-list ul li a { display: block; position: relative; padding: 23px 10px 12px 70px; overflow: hidden; }
.notice-list ul li a:after { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: -100%; z-index: 1; background: #566f77; -webkit-transition: all ease 0.8s; transition: all ease 0.8s; }
.notice-list ul li a:hover:after { left: 0; }
.notice-list ul li a:hover .time, .notice-list ul li a:hover h2, .notice-list ul li a:hover .des { color: white; }
.notice-list ul li .time { position: absolute; padding-top: 36px; left: 10px; font-size: 12px; color: #87989d; height: 12px; line-height: 12px; top: 50%; margin-top: -24px; z-index: 2; -webkit-transition: all ease 0.8s; transition: all ease 0.8s; }
.notice-list ul li .time em { font-size: 30px; font-weight: bold; font-style: normal; position: absolute; width: 100%; top: 0; left: 0; text-align: center; height: 30px; line-height: 30px; }
.notice-list ul li h2 { line-height: 1; font-weight: bold; text-align: left; color: #566f77; margin-bottom: 5px; z-index: 2; position: relative; font-size: 16px; -webkit-transition: all ease 0.8s; transition: all ease 0.8s; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notice-list ul li .des { text-align: left; line-height: 16px; color: #8099a1; overflow: hidden; z-index: 2; position: relative; -webkit-transition: all ease 0.8s; transition: all ease 0.8s; text-overflow: ellipsis; white-space: nowrap; margin-top: 10px; }

.news-list { background: whitesmoke; padding: 60px 0 40px; text-align: center; }
.news-list .title { margin-bottom: 55px; }
.news-list ul { width: 1140px; }
.news-list ul li { width: 340px; margin: 0 20px; float: left; margin-bottom: 30px; height: 222px; }
.news-list ul li a { display: block; }
.news-list ul li a:hover img { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); }
.news-list ul li a:hover h2 { font-weight: bold; }
.news-list ul li .img { height: 200px; font-size: 0; overflow: hidden; background: url(../images/logo_load.png) no-repeat center center; -webkit-background-size: auto 100px; background-size: auto 100px; }
.news-list ul li .img img { width: 100%; height: 100%; -webkit-transition: all ease 0.3s; transition: all ease 0.3s; display: none; }
.news-list ul li h2 { line-height: 1; font-size: 14px; color: #566f77; font-weight: normal; margin-top: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.repair-list { padding: 65px 0 70px; text-align: center; }
.repair-list .title { margin-bottom: 80px; }
.repair-list ul { width: 1120px; font-size: 0; letter-spacing: 0; }
.repair-list ul li { width: 260px; margin: 0 10px 20px; display: inline-block; font-size: 14px; vertical-align: top; }
.repair-list ul li a { display: block; background: white; text-align: left; -webkit-box-shadow: 0 2px 5px #e1e9ff; box-shadow: 0 2px 5px #e1e9ff; position: relative; }
.repair-list ul li a:hover { -webkit-box-shadow: 0 2px 5px #87a7ff; box-shadow: 0 2px 5px #87a7ff; }
.repair-list ul li a:hover .img img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); }
.repair-list ul li .type { position: absolute; height: 30px; line-height: 30px; padding: 0 10px; text-align: center; min-width: 58px; top: 9px; left: -7px; z-index: 5; font-size: 12px; color: white; }
.repair-list ul li .type:before, .repair-list ul li .type:after { content: ""; position: absolute; }
.repair-list ul li .type:before { width: 7px; height: 4px; left: 0; bottom: -4px; }
.repair-list ul li .type:after { width: 12px; height: 30px; right: -12px; top: 0; }
.repair-list ul li .type.blue { background: #2bc8be; }
.repair-list ul li .type.blue:before { background: url(../images/tit_1_1.png) no-repeat center center; }
.repair-list ul li .type.blue:after { background: url(../images/tit_1.png) no-repeat center center; }
.repair-list ul li .type.orange { background: #ffa20d; }
.repair-list ul li .type.orange:before { background: url(../images/tit_2_1.png) no-repeat center center; }
.repair-list ul li .type.orange:after { background: url(../images/tit_2.png) no-repeat center center; }
.repair-list ul li .img { height: 195px; font-size: 0; position: relative; overflow: hidden; background: url(../images/logo_load.png) no-repeat center center #fafafa; -webkit-background-size: auto 80px; background-size: auto 80px; }
.repair-list ul li .img img { width: 100%; height: 100%; -webkit-transition: all ease 0.3s; transition: all ease 0.3s; display: none; }
.repair-list ul li h2 { line-height: 1; margin: 16px 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: #1d262b; }
.repair-list ul li p { line-height: 1; margin: 0 10px 12px; font-size: 12px; }
.repair-list ul li p.address { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 16px; background: url(../images/home/icon_local2.png) no-repeat 0 center; }
.repair-list ul li p.tel { padding-left: 16px; background: url(../images/home/icon_tel.png) no-repeat 0 center; }
.repair-list ul li .star { padding: 10px 0; margin: 0 10px; border-top: 1px solid #ececec; line-height: 1; font-size: 12px; color: #1d262b; }
.repair-list ul li .star em { font-size: 18px; color: #ff6c00; font-style: normal; margin-right: 2px; }
.repair-list ul li .star span { float: right; margin-top: -3px; }
.repair-list ul li .star i { display: inline-block; vertical-align: middle; height: 14px; width: 92px; background: url(../images/home/star.png) no-repeat center 0; position: relative; top: -2px; }
.repair-list ul li .star.star_0 i { background-position: center bottom; }
.repair-list ul li .star.star_1 i { background-position: center -56px; }
.repair-list ul li .star.star_2 i { background-position: center -42px; }
.repair-list ul li .star.star_3 i { background-position: center -28px; }
.repair-list ul li .star.star_4 i { background-position: center -14px; }
.repair-list .more { display: block; margin: 20px auto; width: 98px; height: 36px; line-height: 36px; text-align: center; cursor: pointer; border: 1px solid #d2dede; font-size: 14px; color: #455a64; }
.repair-list .more:hover { color: white; background: #1cc9b5; border-color: #1cc9b5; }

.system-detail { background: #f4f3f3; text-align: center; padding-top: 60px; }
.system-detail ul { background: #3d4246; margin-top: 80px; height: 400px; overflow: hidden; }
.system-detail ul li { width: 275px; height: 400px; overflow: hidden; }
.system-detail ul li a { display: block; position: relative; width: 100%; height: 100%; overflow: hidden; }
.system-detail ul li a:before { background: rgba(28, 48, 76, 0.3); content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; -webkit-transition: all ease 0.3s; transition: all ease 0.3s; }
.system-detail ul li a:after { height: 100%; display: inline-block; content: ""; vertical-align: middle; }
.system-detail ul li a:hover:before { background: rgba(69, 227, 218, 0.9); }
.system-detail ul li a:hover .box .des, .system-detail ul li a:hover .box .more { display: block; }
.system-detail ul li img { width: 100%; height: 100%; position: absolute; z-index: 1; top: 0; left: 0; }
.system-detail ul li .box { position: relative; z-index: 3; text-align: center; vertical-align: middle; display: inline-block; color: white; }
.system-detail ul li .box h3 { font-size: 24px; line-height: 1; }
.system-detail ul li .box .des { display: none; margin: 15px 30px 20px; line-height: 20px; }
.system-detail ul li .box .more { display: none; width: 120px; height: 36px; line-height: 36px; margin: 0 auto; position: relative; background: white; color: #3ccec5; font-size: 14px; }

@-webkit-keyframes ripple { 0% { opacity: 0; -webkit-transform: scale(0.1); transform: scale(0.1); }
  5% { opacity: 1; }
  to { opacity: 0; -webkit-transform: scale(1); transform: scale(1); } }

@keyframes ripple { 0% { opacity: 0; -webkit-transform: scale(0.1); transform: scale(0.1); }
  5% { opacity: 1; }
  to { opacity: 0; -webkit-transform: scale(1); transform: scale(1); } }
.build-line { padding: 70px 0 60px; background: white; text-align: center; }
.build-line .title { line-height: 1; border: none; padding: 0; color: #1d262b; }
.build-line .title:after { display: none; }
.build-line .des { margin-top: 13px; color: #566f77; line-height: 1; }
.build-line .map { display: inline-block; margin-top: 55px; font-size: 0; position: relative; }
.build-line .map ul li { position: absolute; font-size: 12px; color: #38535b; height: 12px; line-height: 1; padding-left: 6px; z-index: 2; }
.build-line .map ul li.hangzhou { top: 391px; right: 93px; }
.build-line .map ul li.zhengzhou { top: 317px; left: 526px; }
.build-line .map ul li.guiyang { bottom: 138px; right: 288px; }
.build-line .map ul li:before { width: 8px; height: 8px; background: #1cc9b5; content: ""; position: absolute; left: 1px; top: 6px; border-radius: 50%; z-index: 1; }
.build-line .map ul li:after, .build-line .map ul li span:before, .build-line .map ul li span:after { content: ""; position: absolute; -webkit-animation-fill-mode: both; animation-fill-mode: both; position: absolute; top: -55px; left: -60px; width: 130px; height: 130px; border-radius: 100%; border: 2px solid #1cc9b5; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; opacity: 0; }
.build-line .map ul li:after { -webkit-animation: ripple 4.5s ease-out 225ms infinite; animation: ripple 4.5s ease-out 225ms infinite; }
.build-line .map ul li span { z-index: 2; }
.build-line .map ul li span:after { -webkit-animation: ripple 4.5s ease-out 0.9s infinite; animation: ripple 4.5s ease-out 0.9s infinite; }
.build-line .map ul li span:before { -webkit-animation: ripple 4.5s ease-out 1.8s infinite; animation: ripple 4.5s ease-out 1.8s infinite; }