@charset "utf-8";

@font-face{
   font-family:'ap'; 
   src: url('../fonts/Accidental Presidency.ttf');
}

.chats{width: 60px; position: fixed; z-index: 99; right: -100%; top: 50%; transform: translateY(-50%); transition:1s cubic-bezier(1, 0, 0.2, 1) 0s;}
.chats.active{right: 10px;}
.chats .btn{width: 60px;height: 60px;border-radius: 50%;  background: #ef3e4a; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #fff;  font-size: 28px; margin-top: 8px; transition: 0.3s; position: relative;}
.chats .btn:first-child{margin-top: 0;}
.chats .btn a{display: block; width: 100%;height: 100%; position: absolute; left: 0; top: 0;}
.chats .btn.tel::before{content: "\e966";}
.chats .btn.tel.active{background: #fff; color: #ef3e4a; box-shadow: 0 0 10px rgba(0,0,0,.2);}
.chats .btn.online::before{content: "\e976";}
.chats .btn.online.active{background: #fff; color: #ef3e4a; box-shadow: 0 0 10px rgba(0,0,0,.2);}
.chats .btn.wechat::before{content: "\e679";}
.chats .btn.wechat.active{background: #fff; color: #ef3e4a; box-shadow: 0 0 10px rgba(0,0,0,.2);}
.chats .btn.gotop{background: #342e2e;}
.chats .btn.gotop::before{content: "\e6e0";}
.chats .btn.gotop:hover{background: #fff; color: #ef3e4a; box-shadow: 0 0 10px rgba(0,0,0,.2);}
.chats .chat-info{width: 200px; position: absolute; right: 60px; display: none; min-height: 60px;}
.chats .chat-info.active{display: block;}
.chats .chat-info .content{width: 190px; min-height: 60px; border-radius: 10px;box-shadow: 0 0 20px rgba(0,0,0,.2); background: #fff; position: absolute; left: 0; bottom: 0; z-index: 1; }
.chats .chat-info .arrow{width: 0;height: 0;border: 6px solid;border-left: 6px solid #fff;  border-top: 6px solid transparent;border-right: 6px solid transparent;border-bottom: 6px solid transparent; position: absolute; left: 190px; bottom: 24px; z-index: 2;box-shadow: -20px 0 20px rgba(0,0,0,.2); }
.chats .chat-info.tel-info{top: 0;}
.chats .chat-info.tel-info span{display: flex; align-content: center; flex-wrap: wrap; width: 100%;height:60px; box-sizing: border-box; padding: 0 20px;}
.chats .chat-info.tel-info span h1{font-size: 12px; color: #aaa;}
.chats .chat-info.tel-info span h2{font-family: 'PingFang SC'; font-weight: bold; font-size: 18px; line-height: 1; margin-top: 4px;}
.chats .chat-info.online-info{top: 68px;}
.chats .chat-info.online-info a{display: block; line-height: 60px;text-align: center; width: 100%;height: 60px; color: #333; font-size: 16px;}
.chats .chat-info.wechat-info{bottom: 68px;}
.chats .chat-info.wechat-info span{display: block; box-sizing: border-box; padding: 16px;}
.chats .chat-info.wechat-info span img{display: block; width: 100%;}
.chats .chat-info.wechat-info span p{font-size: 14px; color: #999; margin-top: 6px; text-align: center;}

.chatbg{width: 100%;height: 100vh; position: fixed; left: 0; top: 0; z-index: 97; background: rgba(0,0,0,.8); display: none;}

.m-wechat{width: 260px; height: auto; position: fixed; z-index: 98; left: 50%; top: 50%; transform: translate(-50% , -50%);  background: #fff; border-radius: 10px; display: none;box-sizing: border-box; padding: 16px;}
.m-wechat em{display: block; }
.m-wechat em img{display: block; width: 100%;}
.m-wechat p{font-size: 14px; color: #999; margin-top: 6px; text-align: center;}
.m-wechat i{width: 32px;height: 32px; border-radius: 50%; background: #000; position: absolute; right: -16px; top: -16px; border: 1px #fff solid; color: #fff; display: block;text-align: center; line-height: 32px; font-size: 14px;}
.m-wechat i::before{content: "\e610";}


header{position: fixed; z-index: 99; width:100%; height:80px; background: none;  left: 0; top: 0;   transition: 0.3s; }

header.active{transform: translateY(-100%);}
header.on{ background: #fff;}

header .logo{width: 220px; height: 38px; position: absolute; left: 40px; top: 50%; transform: translateY(-50%);}
header .logo a{display: block; width: 100%;height: 100%;background: url(../img/logo_white.png) no-repeat; background-size: 100% 100%; transition: 0.3s;}
header.on .logo a{background: url(../img/logo.png);background-size: 100% 100%;}
header.mon .logo a{background: url(../img/logo.png);background-size: 100% 100%;}

header .rt{display: flex; height: 80px; line-height: 80px;position: absolute; right:0; top:0; }

header .rt .nav-service{display: flex;align-items: center; cursor:pointer; color: #fff; height: 100%; cursor: pointer;  overflow: hidden;}
header .rt .nav-service i{display: block; font-size: 24px; transition: 0.3s;}
header .rt .nav-service i::before{content: "\e9ee";}
header .rt .nav-service p{font-size: 16px;  margin-left: 8px;transition: 0.3s;}
header .rt .nav-service em{display: block; margin-left: 6px;transition: 0.3s;}
header .rt .nav-service em::before{content: "\e600";}
header .rt .nav-service.active i{ color: #ef3e4a;}
header .rt .nav-service.active p{ color: #ef3e4a;}
header .rt .nav-service.active em{ color: #ef3e4a; transform: rotate(180deg);}
header .rt .nav-service.focus i{ color: #ef3e4a;}
header .rt .nav-service.focus p{ color: #ef3e4a;}
header .rt .nav-service.focus em{ color: #ef3e4a;}
header.on .nav-service i{ color: #666;}
header.on .nav-service p{ color: #666;}
header.on .nav-service em{ color: #666;}

header .rt nav{height: 100%; display: flex;  margin-left: 30px;}
header .rt nav a{padding: 0 30px; font-size: 16px; color: #fff; transition: 0.3s;}
header .rt nav a:hover{color: #ef3e4a;}
header .rt nav a.focus{color: #ef3e4a;}
header.on nav a{color: #666;}

header .rt .tel{ color: #fff; font-size:28px;  border-left: 1px rgba(255,255,255,.2) solid;  border-right: 1px rgba(255,255,255,.2) solid; padding: 0 30px; transition: 0.3s; font-weight: bold;}
header .rt .tel a{display: none;}
header.on .rt .tel{color: #ef3e4a;border-left: 1px #eee solid;  border-right: 1px #eee solid;}
header.mon .rt .tel{color: #ef3e4a;border-left: 1px #eee solid;  border-right: 1px #eee solid;}


header .rt .ma{display: flex; align-items: center;  height: 100%;padding: 0 40px; color: #fff; font-size: 24px;border-right: 1px rgba(255,255,255,.2) solid;cursor:pointer; transition: 0.3s; position: relative;}
header.on .rt .ma{color: #666;border-right: 1px #eee solid;}
header .rt .ma .ma-container{position: absolute; left: 50%; transform: translateX(-50%); top: 80px;  width: 120px; display: none;}
header .rt .ma .ma-container i{display: block; width: 0;height: 0;border: 6px solid;border-left:6px solid transparent;  border-top: 6px solid transparent;border-right: 6px solid transparent;border-bottom:  6px solid #fff; position: absolute; left: 50%; transform: translateX(-50%); top: 0px; }
header .rt .ma .ma-container span{display: block; width: 100%; background: #fff; margin-top:12px; padding: 10px; border-radius: 10px; box-sizing: border-box;box-shadow: 0px 0 20px rgba(0,0,0,.2);}
header .rt .ma .ma-container span img{display: block; width: 100%;}
header .rt .ma .ma-container span p{color: #999; font-size: 14px; line-height: 1; text-align: center; margin-top: 10px; padding-bottom: 4px;}
header .rt .ma::before{content: "\e642";}
header .rt .ma.active{color: #ef3e4a;}

header .rt .nav-home{ height: 100%;}
header .rt .nav-home a{display: flex; align-items: center; height: 100%; padding: 0 40px; color: #fff; font-size: 24px;}
header.on .rt .nav-home a{color: #666;}
header.mon .rt .nav-home a{color: #666;}
header .rt .nav-home a::before{content: "\e691";}
header .rt .nav-home a:hover{color: #ef3e4a;}

header .rt .nav-mobile{display: none;}




header .line{width: 100%;height: 1px; background: rgba(255,255,255,.2); position: absolute; left: 0; bottom: 0; pointer-events: none;}
header.on .line{background: #eee;}
header.mon .line{background: #eee;}


.service-container{width: 100%; position: fixed; z-index: 98; padding: 60px; top: -100%; left: 0;background: #fff; box-shadow: 0 10px 20px rgba(0,0,0,.1); display: flex; justify-content: space-between; text-align: center; box-sizing: border-box; transition:0.33s cubic-bezier(0.33, 0, 0.2, 1) 0s;}
.service-container.active{top: 70px;}
.service-container a{display: block;}
.service-container i{display: block; font-size: 60px;font-weight: bold; color: rgba(0,0,0,.1); font-family: 'shuzi';transition: 0.3s;}
.service-container i::after{content: ""; display: block; width: 0;height: 3px; background: #000; margin: 0 auto;transition: 0.3s;}
.service-container a:hover i{color: #000;}
.service-container a:hover i::after{width: 50px;}
.service-container i img{display: block; width: 100%;}
.service-container h1{font-weight: bold; font-size: 24px; margin-top: 10px;transition: 0.3s;}
.service-container a:hover h1{color: #ef3e4a;}
.service-container span{display: block; margin-top: 20px;}
.service-container span p{font-size: 16px; color: #666; line-height: 2; transition: 0.3s;}
.service-container span p:hover{color: #ef3e4a;}
.service-container em{display: flex; align-items: center; justify-content: center; margin-top: 20px;}
.service-container em b{display: block; width: 6px;height: 6px;background: #999; border-radius: 50%; margin: 0 2px; transition: 0.3s;}
.service-container em:hover b{background: #ef3e4a;}


.m-lf{width: 50%; height: 100vh; background: url('../img/navbg.jpg') no-repeat center; background-size: cover; display: flex; align-items: center; justify-content: center; position: fixed; z-index: 999; left: -100%; top: 0; transition: 0.33s cubic-bezier(0.33, 0, 0.2, 1) 0s;}
.m-lf.active{left: 0;}
.m-lf img{display: block; width: calc(100% - 260px); }

.m-rt{background: #000;width: 50%; height: 100vh; display: flex; flex-wrap: wrap; align-content: space-between; box-sizing: border-box; padding: 60px;position: fixed; z-index: 999; right: -100%; top: 0;transition: 0.33s cubic-bezier(0.33, 0, 0.2, 1) 0s; overflow-y: auto;}
.m-rt.active{right: 0;}

.m-rt .up{width: 100%;}

.m-rt .close{width: 100%; display: flex; justify-content: flex-end;}
.m-rt .close span{display: block; color: #fff; font-size: 24px; transition: 0.3s;}
.m-rt .close span::before{content: "\e610";}

.m-rt .nav-box{  width: 100%; margin-top: 30px;}
.m-rt .nav-box .main-nav{width: 100%; display: flex; align-items: center; justify-content: space-between;padding: 20px 0;}
.m-rt .nav-box .main-nav a{width: 100%; display: flex; align-items: center; justify-content: space-between; }
.m-rt .nav-box .main-nav span{display: flex; align-items: center; line-height: 1;}
.m-rt .nav-box .main-nav span i{color: #666;}
.m-rt .nav-box .main-nav span h1{color: #888; font-size: 18px; margin-left:40px;transition: 0.3s;}
.m-rt .nav-box .main-nav em{display: block; width: 20px;height: 2px;background: #666; transition: 0.3s;}
.m-rt .nav-box .main-nav.active span h1{color: #fff;}
.m-rt .nav-box .main-nav.active em{width: 50px; background: #fff;}
.m-rt .nav-box .sub-nav{width: calc(100% - 110px); margin: 0 auto; display: flex; flex-wrap: wrap; display: none;}
.m-rt .nav-box .sub-nav a{color: #888; margin-right: 30px; line-height:2.4; white-space: nowrap;}
.m-rt .nav-box .sub-nav a.active{color: #fff; border-bottom: 1px #888 solid;}

.m-rt .contact{color: #666;margin-top: 30px;}
.m-rt .contact span{width: 100%; display: flex; align-items: center; margin-top: 20px;}
.m-rt .contact span a{display: block; width: 90px;height: 34px; line-height: 34px;background: #ef3e4a; color: #fff; border-radius: 34px; text-align: center;}
.m-rt .contact span dl{display: flex;align-items: center; margin-left: 20px;}
.m-rt .contact span dl dd{color: #fff; font-weight: bold;}


.index_banner{width: 100%; height:100vh; overflow: hidden; position: relative; background: #000;}
.index_banner video{width: 100%; position: absolute; left: 0; top: 0;  z-index: 1; height:100%; object-fit: cover; }
.index_banner .bg{position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 1; display: none;}
.index_banner .bg canvas{position: absolute;top: 0;left: 0;width: 100%;height: 100%;}

.index_banner .txt{width: 100%; position: absolute; z-index: 2; left: 0; top: 50%; transform: translateY(-50%); color: #fff; box-sizing: border-box; padding: 0 120px; margin-top: -40px;}
.index_banner .txt h1{font-size: 160px;   text-transform: uppercase;  color: rgba(255,255,255,.4); font-family: 'ap';}
.index_banner .txt h2{font-size: 66px; font-weight: bold; margin-top: 10px;}
.index_banner .txt h3{font-size: 18px; margin-top: 10px; text-align: justify;}
.index_banner .txt h2 i{color: #ef3e4a;}
.index_banner .go-service{width: 80px;height: 80px; ; display: flex; align-items: center; justify-content: center; color: #fff; cursor: pointer; position: absolute; left:120px;  bottom: 80px; z-index: 2;}
.index_banner .go-service span{display: block; width: 100%;height: 100%; position: absolute; z-index: 1; left: 0; top: 0;animation: down 6s infinite linear;}
.index_banner .go-service span img{display: block;width: 100%;height: 100%;}
.index_banner .go-service em{display: block;position: absolute; z-index:2; left: 50%; top: 50%; transform: translate(-50%,-50%); line-height: 1.1; font-size: 16px; font-weight: bold;}
@keyframes down
{
  from {transform: rotate(0);}
  to {transform:rotate(360deg);}
}



.index-service{width: 100%; overflow: hidden; padding: 80px 0;}
.index-service .title-box{width: calc(100% - 240px); margin: 0 auto; display: flex;align-items: center; flex-wrap: wrap; justify-content: space-between; box-sizing: border-box;}
.index-service .title-box .title{display: flex; align-items: center;  color: #000; font-size: 52px; font-weight: bold; line-height: 1;}
.index-service .title-box .title img{display: block; width: 30px;height: 27px; margin-right: 30px;}
.index-service .title-box .txt{font-size: 18px; color: #aaa;}
.index-service .title-box .txt h1{font-size: 36px; font-weight: bold; color: #eee;}
.index-service .title-box .txt h2{position: relative; z-index: 2; margin-top: -10px;}

.index-service .services{width:calc(100% - 240px); margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 50px;}
.index-service .services .service-item{width:calc(33.3333% - 20px);  margin-top: 30px;  box-sizing: border-box;  text-align: center; border: 1px #ddd solid;  transition: 0.3s;}
.index-service .services .service-item:hover{border: 1px #fff solid;  box-shadow: 0 0 20px rgba(0,0,0,.2);}
.index-service .services .service-item a{box-sizing: border-box; padding:60px; display: block; width: 100%;height: 100%;display: flex; align-content: center; justify-content: center; flex-wrap: wrap;}
.index-service .services .service-item i{width:90px;height: 90px; display: block; transition: 0.3s;}
.index-service .services .service-item a:hover i{transform: rotate(45deg);}
.index-service .services .service-item i img{display: block; width: 100%;height: 100%;}
.index-service .services .service-item h1{width: 100%; font-size: 30px; margin-top: 20px; transition: 0.3s; font-weight: bold;}
.index-service .services .service-item a:hover h1{color: #ef3e4a;}
.index-service .services .service-item h2{color: #aaa; margin-top: 6px; text-transform: uppercase;}
.index-service .services .service-item h2::after{content: ""; display: block; width: 40px;height: 2px;background: #ef3e4a; margin: 0 auto; margin-top: 20px; transition: 0.3s;}
.index-service .services .service-item a:hover h2::after{width: 60px;}
.index-service .services .service-item span{display: block; width: 100%; color: #999; margin-top: 20px; font-size: 16px; }

.nums{width: calc(100% - 240px); margin: 0 auto; display: flex; justify-content: space-around; flex-wrap: wrap;  box-sizing: border-box; padding-bottom: 80px; color: #000;}
.nums span{display: block;}
.nums dl{display: flex;}
.nums dl dt{font-size: 92px; font-weight: bold; font-family: 'ap'; line-height: 0.8;}
.nums dl dd{font-size: 18px;line-height: 0.8;}
.nums p{font-size: 16px; margin-top: 10px; color: #aaa;}
.nums i{width: 100px; height: 1px; background: #eee;}


.index-case{width: 100%;background: #000; position: relative;   padding: 80px 0;}
.index-case .title-box{width: calc(100% - 240px); margin: 0 auto; display: flex; align-items: center;  flex-wrap: wrap;justify-content: space-between;}
.index-case .title-box .title{display: flex; align-items: center;  color: #fff; font-size: 52px; font-weight: bold; line-height: 1;}
.index-case .title-box .title img{display: block; width: 30px;height: 27px; margin-right: 30px;}
.index-case .title-box .case-nav{display: flex; flex-wrap: wrap;}
.index-case .title-box .case-nav a{display: block; color: #fff; transition: 0.3s; margin-left: 20px; font-size: 16px;}
.index-case .title-box .case-nav a:hover{text-decoration: line-through; color: #ef3e4a;}



.index-case .more{ margin: 0 auto; display: flex; justify-content: center;  margin-top: 80px;}
.index-case .more a{display: flex; align-items: center; color: #fff;  border: 1px #fff solid; box-sizing: border-box; padding:20px 40px;}
.index-case .more p{line-height: 1; font-weight: bold; font-size: 18px;}
.index-case .more i{width: 0px; height: 1px;background: #fff; display: block; margin-left: 10px;transition: 0.3s;}
.index-case .more a:hover i{ width: 30px;}
.index-case .more em{display: block;  margin-left: -6px; }
.index-case .more em::before{content: "\e694";}




.index-news{overflow: hidden; padding: 80px 0;}
.index-news .title-box{width: calc(100% - 240px); margin: 0 auto;  display: flex;align-items: center; justify-content: space-between;flex-wrap: wrap;}
.index-news .title-box .title{display: flex; align-items: center;  color: #000; font-size: 52px; font-weight: bold; line-height: 1;}
.index-news .title-box .title img{display: block; width: 30px;height: 27px; margin-right: 30px;}
.index-news .title-box .title-news-nav{display: flex;flex-wrap: wrap; }
.index-news .title-box .title-news-nav a{display: block; color: #000; transition: 0.3s; margin-left: 20px; font-size: 16px;}
.index-news .title-box .title-news-nav a:hover{text-decoration: line-through; color: #ef3e4a;}
.index-news .news{ width: calc(100% - 240px); margin: 0 auto; display: flex; flex-wrap: wrap; margin-top: 50px; }
.index-news .news a{ width:calc(33.3333% - 20px); margin-top: 30px; margin-right: 30px; background: #f5f5f5; box-sizing: border-box; padding:30px; border-radius: 10px; transition: 0.3s;}
.index-news .news a:nth-child(3n){margin-right: 0;}
.index-news .news a h1{width: 100%; font-size: 28px; white-space:nowrap; overflow:hidden; text-overflow: ellipsis; transition: 0.3s;}
.index-news .news a:hover{background: #fff; box-shadow: 0 0 20px rgba(0,0,0,.1);}
.index-news .news a:hover h1{color: #ef3e4a;}
.index-news .news a h2{width: 100%; margin-top: 50px; color: #aaa; font-size: 16px;text-align: justify; line-height: 1.6;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2; }
.index-news .news a h3{margin-top: 50px; font-size: 16px;}


.index-news .more{ margin: 0 auto; display: flex; justify-content: center;  margin-top: 80px;}
.index-news .more a{display: flex; align-items: center; color: #000;  border: 1px #000 solid; box-sizing: border-box; padding:20px 40px;}
.index-news .more p{line-height: 1; font-weight: bold; font-size: 18px;}
.index-news .more i{width: 0px; height: 1px;background: #000; display: block; margin-left: 10px;transition: 0.3s;}
.index-news .more a:hover i{ width: 30px;}
.index-news .more em{display: block;  margin-left: -6px; }
.index-news .more em::before{content: "\e694";}

.index-advantage{ box-sizing: border-box; padding: 80px 0; background-image: url('../img/ad1.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover;  background-attachment: fixed; transition: 0.3s;}


.index-advantage .title{width: calc(100% - 240px); margin: 0 auto;  display: flex; align-items: center; color: #fff; font-size: 52px; font-weight: bold; line-height: 1; }
.index-advantage .title img{display: block; width: 30px;height: 27px; margin-right: 30px;}
.index-advantage .txt{width: calc(100% - 240px); margin: 0 auto;  color: #fff; font-size: 16px; margin-top: 30px;}
.index-advantage .advantages{width: calc(100% - 240px); margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; color: #fff; margin-top: 40px;}
.index-advantage .advantages .item{ position: relative; width: calc(25% - 20px); margin-top: 40px; box-sizing: border-box; border: 1px rgba(255,255,255,.4) solid; padding: 0 40px; height: 500px; transition: 0.3s; display: flex; align-content: center; flex-wrap: wrap;  cursor: pointer;}
.index-advantage .advantages .item em{font-size: 90px;font-family: 'ap'; line-height: 0.8; color: rgba(255,255,255,.3); position: relative; z-index: 1; width: 100%;}
.index-advantage .advantages .item span{display: block; position: relative; z-index: 2; transition: 0.3s; width: 100%;}
.index-advantage .advantages .item span h1{font-size: 28px; font-weight: bold; margin-top: 10px;}
.index-advantage .advantages .item span h2{font-size: 16px; margin-top: 40px; text-align: justify;}
.index-advantage .advantages .item.active{background: #ef3e4a; border: 1px #ef3e4a solid; }
.index-advantage .advantages .item.active em{color: rgba(0,0,0,.1);}
.index-advantage .advantages .item.active span{margin-top: -40px;}
.index-advantage .advantages .item.active span h1{color: #fff;}
.index-advantage .advantages .item.active span h2{color: #fff;}



footer{box-sizing: border-box;overflow: hidden;}
footer .up{ width: calc(100% - 240px); margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; border-bottom: 1px #ddd solid; padding: 80px 0;}
footer .up .title{font-size: 28px; line-height: 1;}
footer .up .about{width: 300px;}
footer .up .about .info{text-align: justify;  line-height: 1.8; margin-top: 30px;color: #666; font-size: 16px;}
footer .up .about .more{margin-top: 30px;}
footer .up .about .more a{width: 40px;height: 40px; border: 1px #ef3e4a solid; display: block; line-height: 40px;text-align: center; color: #ef3e4a; transition: 0.3s;}
footer .up .about .more a::before{content: "\fd72";}
footer .up .about .more a:hover{background: #ef3e4a; color: #fff;}

footer .up .contact{width: 300px;}
footer .up .contact .info h1{ font-size: 18px;font-weight: bold; margin-top: 30px;}
footer .up .contact .info span{display: block; margin-top: 10px; color: #666;}
footer .up .contact .info span p{font-size: 16px; text-align: justify;}
footer .up .contact .info span p:nth-child(2){margin-top: 10px;}

footer .up .menu .info{margin-top: 30px;}
footer .up .menu .info a{display: block; line-height: 1.8; transition: 0.3s;color: #666;font-size: 16px;}
footer .up .menu .info a:hover{color: #ef3e4a;}

footer .links{width: calc(100% - 240px); margin: 0 auto; box-sizing: border-box; padding: 40px 0; border-bottom: 1px #ddd solid; }
footer .links p{font-size: 18px;}
footer .links span{display: flex; flex-wrap: wrap; margin-top: 20px;}
footer .links span a{display: block; color: #666; transition: 0.3s; margin-right: 20px; margin-top: 10px;font-size: 16px;}
footer .links span a:hover{color: #ef3e4a;}

footer .bt{width: calc(100% - 240px); margin: 0 auto; padding: 40px 0; display: flex; justify-content: space-between; flex-wrap: wrap; font-size: 16px;}
footer .bt .lf{color: #666;}
footer .bt .lf a{color: #666; transition: 0.3s;}
footer .bt .lf a:hover{color: #000;}
footer .bt .rt{font-style: italic; }


.case-banner{background:url('../img/case_banner.jpg') no-repeat center #111; background-size:cover; height: 400px; position: relative; overflow: hidden; color: #fff;}
.case-banner span{width: calc(100% - 240px); position: absolute; left: 50%; top:50%; transform: translate(-50%,-50%);  text-align: center; display: flex; justify-content: center; align-items: center; margin-top: 40px; }
.case-banner span h1{display: flex; align-items: center; justify-content: center; font-size: 72px;font-weight: bold;}
.case-banner span h1 i{width: 20px;height: 20px; border-radius: 50%;background: #ef3e4a; opacity: .6; margin: 0 20px; }

.case-content{background: #f2f2f2; overflow: hidden;padding: 80px 0;}

.case-content .case-nav{display: flex; flex-wrap: wrap; justify-content: center;}
.case-content .case-nav a{display: block; position: relative; margin:0 50px; font-size: 24px; color: #999; transition: 0.3s;}
.case-content .case-nav a i{display: block; width: 0;height: 1px; background: #ef3e4a;transition: 0.3s; position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
.case-content .case-nav a:hover{color: #ef3e4a;}
.case-content .case-nav a:hover i{width: 100%;}
.case-content .case-nav a.on{color: #ef3e4a;}
.case-content .case-nav a.on i{width: 100%;}

.case-box{width: calc(100% - 240px); margin: 0 auto; display: flex; flex-wrap: wrap;  margin-top:50px;}
.case-box a{width: calc(33.3333% - 20px);  display: block; overflow: hidden; margin-top: 30px; margin-right: 30px; background: #fff;transition: 0.3s;}
.case-box a:nth-child(3n){margin-right: 0;}
.case-box a em{display: block; width: 100%; overflow: hidden;}
.case-box a em img{display: block; width: 100%; transition: 0.3s; }
.case-box a dl{box-sizing: border-box; padding: 30px;}
.case-box a dl dt{width: 100%; font-size: 32px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.case-box a dl dd{width: 100%; font-size: 18px; margin-top: 10px; color: #999; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.case-box a:hover{background: #ef3e4a; box-shadow: 0 0 20px rgba(0,0,0,.3);  border-radius: 10px;}
.case-box a:hover dl dt,.case-box a:hover dl dd{color: #fff;}
.case-box a:hover em img{transform: scale(1.08);}



.case-content .pages{  padding:0; display: flex; justify-content: center; margin-top: 80px;}
.case-content .pages a{display: block; font-size: 32px;color: #aaa; font-family: 'PingFang SC';  margin: 0 20px; transition: 0.3s; position: relative; height: 50px; line-height: 50px;}
.case-content .pages a i{position: absolute; left: 0; top:50%; transform: translateY(-50%); transition: 0.3s; display: block; height: 2px; width: 0; background: #000;}
.case-content .pages a:hover{color: #000;}
.case-content .pages a:hover i{width: 100%;}
.case-content .pages a.focus{color: #000;}
.case-content .pages a.focus i{width: 100%;}
.case-content .pages a.first::before{content: "\e9f0";}
.case-content .pages a.last::before{content: "\e76f";}
.case-content .pages a.prev::before{content: "\e684";}
.case-content .pages a.next::before{content: "\fd72";}
.case-content .pages a.omit:hover i{display: none;}




.case-show-banner{width: 100%;height: 80vh; position: relative;}
.case-show-banner .case-info{width: calc(100% - 240px); color: #fff; position: absolute; left: 50%; transform: translateX(-50%); bottom:260px; }
.case-show-banner .case-info h1{font-size: 52px; font-weight: bold; line-height: 1.2; padding-right: 50px;}
.case-show-banner .case-info h2{font-size: 16px; margin-top: 8px;}
.case-show-banner .down-more{width: 1px; height: 70px;background: rgba(255,255,255,.3);position: absolute; right: 120px; bottom: 260px; overflow: hidden; }
.case-show-banner .down-more i{width: 100%;height: 60px;background: #fff;animation: downMore 1s infinite linear; display: block;}
@keyframes downMore
{
  from {transform:translateY(-100%);}
  to {transform:translateY(100%);}
}
.case-show-container{background: #f2f2f2; padding-bottom: 80px;}
.case-show-container .info-box{position: relative;  width: calc(100% - 240px); margin: 0 auto;margin-top: -200px;  background: #fff; overflow: hidden;box-sizing: border-box; padding: 60px;}
.case-show-container .info-box .title-s{display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;}
.case-show-container .info-box .title-s h1{font-size: 42px;font-weight: bold;}
.case-show-container .info-box .title-s a{display: block; width: 200px;height: 46px; line-height: 46px; border: 2px #000 solid; text-align: center; font-size: 18px;font-weight: bold; transition: 0.3s;}
.case-show-container .info-box .title-s a:hover{background: #000; color: #fff;}
.case-show-container .info-box .about-case{text-align: justify; margin-top: 50px; font-size: 18px; color: #999; line-height: 1.6;}
.case-show-container .info-box .pics{width: 100%; overflow: hidden; margin-top: 50px;}
.case-show-container .info-box .pics img{display: block; width: 100%;}


.case-show-container .info-box .tools{display: flex; align-items: center; justify-content: center;  padding-top: 60px;}
.case-show-container .info-box .tools a{display: block; width: 80px;height: 80px; text-align: center; line-height: 80px; border-radius: 50%; background: #fff; margin: 0 20px; font-size: 28px; transition: 0.3s;}
.case-show-container .info-box .tools a.prev::before{content: "\fd71";}
.case-show-container .info-box .tools a.all::before{content: "\e617";}
.case-show-container .info-box .tools a.next::before{content: "\e665";}
.case-show-container .info-box .tools a.no{opacity: .5;}
.case-show-container .info-box .tools a:hover{background: #000; color: #fff;}





.news-banner{width: 100%;height: 600px;background: url(../img/news_banner.jpg) no-repeat center; background-size: cover; position: relative;}
.news-banner .txt{width: calc(100% - 240px); position: absolute; left: 50%; transform: translateX(-50%); bottom: 80px; color: #fff;}
.news-banner .txt h1{font-size: 18px;}
.news-banner .txt h2{font-size: 52px;font-weight: bold;}

.news-container{width:100%;overflow:hidden;}

.news-nav{width: calc(100% - 240px); margin: 0 auto; display: flex; flex-wrap: wrap; margin-top: 60px; }
.news-nav a{display: block; position: relative; margin-right: 30px; font-size: 18px; color: #999; transition: 0.3s;}
.news-nav a i{display: block; width: 0;height: 1px; background: #ef3e4a;transition: 0.3s; position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
.news-nav a:hover{color: #ef3e4a;}
.news-nav a:hover i{width: 100%;}
.news-nav a.on{color: #ef3e4a;}
.news-nav a.on i{width: 100%;}

.news-content{width: calc(100% - 240px); margin: 0 auto; display: flex; flex-wrap: wrap;  }
.news-content a{width: calc(33.3333% - 30px); margin-top: 45px; margin-right: 45px; padding-bottom: 60px;}
.news-content a:nth-child(3n){margin-right: 0;}
.news-content a span{display: block; width: 100%; height: 1px ;background: #eee;}
.news-content a span i{width: 0; height: 100%;background: #ef3e4a; transition: 0.5s; display: block;}
.news-content a h1{color: #aaa; margin-top: 60px;}
.news-content a h1::after{content: ""; display: block; width: 20px; height: 1px;background: #aaa; margin-top: 20px;}
.news-content a h2{margin-top: 20px; font-size: 24px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: 0.3s;}
.news-content a h3{word-break: break-all;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2; overflow: hidden; color: #aaa; font-size: 16px; margin-top: 30px; line-height: 1.6;}
.news-content a:hover span i{width: 100%;}
.news-content a:hover h2{color: #ef3e4a;}

.news-container .pages{ width:calc(100% - 240px); margin: 0 auto;  border-top: 1px #eee solid;border-bottom: 1px #eee solid; padding: 50px 0; display: flex; justify-content: center; margin-top: 30px;}
.news-container .pages a{display: block; font-size: 32px;color: #aaa; font-family: 'PingFang SC';  margin: 0 20px; transition: 0.3s; position: relative; height: 50px; line-height: 50px;}
.news-container .pages a i{position: absolute; left: 0; top:50%; transform: translateY(-50%); transition: 0.3s; display: block; height: 2px; width: 0; background: #000;}
.news-container .pages a:hover{color: #000;}
.news-container .pages a:hover i{width: 100%;}
.news-container .pages a.focus{color: #000;}
.news-container .pages a.focus i{width: 100%;}
.news-container .pages a.first::before{content: "\e9f0";}
.news-container .pages a.last::before{content: "\e76f";}
.news-container .pages a.prev::before{content: "\e684";}
.news-container .pages a.next::before{content: "\fd72";}
.news-container .pages a.omit:hover i{display: none;}

.news-show-banner{width: 100%;height: 500px;background: url('../img/news_show_banner.jpg') no-repeat center #2772c7; background-size: cover; position: relative; z-index: 1; }
.news-show-banner .page-add{width: calc(100% - 240px); position: absolute; left: 50%; transform: translateX(-50%); bottom: 160px; color: #fff; font-size: 16px; display: flex; align-items: center;}
.news-show-banner .page-add a{display: block; color: #fff; transition: 0.3s;}
.news-show-banner .page-add a:hover{color: #ef3e4a;}
.news-show-banner .page-add a:first-child::before{ content: "\e691";}
.news-show-banner .page-add i{display: block;}
.news-show-banner .page-add i::before{content: "\e665"; margin: 0 10px;}
.news-show-banner .page-add span{color: #fff;}

.news-show{width: 100%; background: #f2f2f2; box-sizing: border-box; padding-bottom: 80px; }
.news-show .box{width: calc(100% - 240px); margin: 0 auto; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap;  position: relative; z-index: 2; margin-top: -100px;}
.news-show .box .lf{background: #fff; width: calc(100% - 500px); box-sizing: border-box;  padding: 40px;}
.news-show .box .lf .news-title{ border-bottom: 1px #ddd solid; width:100%; padding-bottom: 60px;}
.news-show .box .lf .news-title h1{font-size: 36px; font-weight: bold; }
.news-show .box .lf .news-title h2{font-size: 16px; color: #999; display: flex;  margin-top: 20px;}
.news-show .box .lf .news-title h2 i{display: block;  margin-right: 30px;}
.news-show .box .lf .news-title h2 i a{color: #999;text-decoration: underline; transition: 0.3s;}
.news-show .box .lf .news-title h2 i a:hover{color: #000;}
.news-show .box .lf .info-box{width: 100%; overflow: hidden; font-size: 16px; color: #666; line-height: 1.8; text-align: justify; margin-top: 60px; margin-bottom: 60px;}
.news-show .box .lf .info-box img{display: block; max-width: 100%!important; height: auto!important;}
.news-show .box .rt{width: 460px;background:#ef3e4a; overflow: hidden; box-sizing: border-box; padding: 40px;}
.news-show .box .rt .title{font-size:24px; color: #fff;}
.news-show .box .rt .lists a{ display: block; margin-top: 30px;}
.news-show .box .rt .lists a h1{color: rgba(255,255,255,.6);}
.news-show .box .rt .lists a h2{color: rgba(255,255,255,.6); transition: 0.3s; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.news-show .box .rt .lists a:hover h2{color: #fff;}
.news-show .box .rt .chat{margin-top: 40px;}
.news-show .box .rt .chat a{display: block; width: 100%;height: 60px;text-align: center; line-height: 52px; box-sizing: border-box; border: 4px #fff solid; font-size: 18px; color: #fff; transition: 0.3s;}
.news-show .box .rt .chat a:hover{background: #fff; color: #ef3e4a;}
.news-show .tools{display: flex; align-items: center; justify-content: center; border-top: 1px #ddd solid; padding-top: 60px;}
.news-show .tools a{display: block; width: 80px;height: 80px; text-align: center; line-height: 80px; border-radius: 50%; background: #fff; margin: 0 20px; font-size: 28px; transition: 0.3s;}
.news-show .tools a.prev::before{content: "\fd71";}
.news-show .tools a.all::before{content: "\e617";}
.news-show .tools a.next::before{content: "\e665";}
.news-show .tools a.no{opacity: .5;}
.news-show .tools a:hover{background: #000; color: #fff;}

.about-banner {width: 100%;height: 100vh; position: relative; overflow: hidden; background: #000;}
.about-banner video{object-fit: cover; position: absolute; z-index: 1; width: 100%;height: 100%; left: 0; top: 0;  }
.about-banner .bg{position: absolute; z-index: 1; width: 100%;height: 100%; background: url('../img/m_about_banner.jpg') no-repeat center; background-size: cover; display: none;}
.about-banner .txt{width: calc(100% - 240px); text-align: center; position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%,-50%); color: #fff;}
.about-banner .txt span{display: flex; align-items: center; justify-content: center; font-size: 92px; font-weight: bold;}
.about-banner .txt span i{display: block; font-weight: normal; font-size: 32px; margin: 0 20px;}
.about-banner .txt span i::before{content: "\e610";}
.about-banner .txt h1{text-align: center; width: 100%; margin: 0 auto; font-size: 24px; line-height: 1.6; margin-top: 20px;}
.about-banner .down-more{width: 1px; height: 60px;background: rgba(255,255,255,.3);position: absolute; z-index: 2; left: 50%; transform: translateX(-50%); bottom: 80px; overflow: hidden; }
.about-banner .down-more i{width: 100%;height: 80px;background: #fff;animation: downMore 1s infinite linear; display: block;}

.about-info{box-sizing: border-box; width: calc(100% - 240px);  margin: 0 auto; padding: 80px 0; display: flex;  justify-content: space-between; flex-wrap: wrap;}
.about-info .title{font-size: 36px; color: #333; line-height: 1.2;}
.about-info .content{width: calc(100% - 400px);}
.about-info .content .txt{font-size: 18px; line-height: 1.8; color: #666;text-align: justify;}
.about-info .content .txt p{margin-top: 20px;}
.about-info .content .txt p:first-child{margin-top: 0; }
.about-info .content .hf{position: relative; margin-top: 60px;}
.about-info .content .hf img{ display: block; width: 100%;}
.about-info .content .hf .en-txt{position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); display: flex; align-items: center;}
.about-info .content .hf .en-txt p{font-size: 92px;  font-family: 'ap'; }
.about-info .content .hf .en-txt i{width: 14px;height: 14px;border-radius: 50%;background: #000; display: block; margin: 0 30px;}

.about-office{box-sizing: border-box;   margin: 0 auto; padding: 80px 0; background: #4f3f92 ;}
.about-office .up{width: calc(100% - 240px);  margin: 0 auto; display: flex;  justify-content: space-between; flex-wrap: wrap; }
.about-office .up .title{font-size: 36px; color: #fff; line-height: 1.2;}
.about-office .up .txt{width: calc(100% - 400px); font-size: 18px; line-height: 1.8; color: #fff; text-align: justify;}
.about-office .pics{width: calc(100% - 240px);  margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 80px;}
.about-office .pics .lf{width: 40%; height:720px; background: url(../img/office01.jpg) no-repeat center #000; background-size: cover;  overflow: hidden; position: relative; }
.about-office .pics .lf img{display: block; width: 100%;}
.about-office .pics .rt{width: 60%; display: flex; flex-wrap: wrap;}
.about-office .pics .rt span{display: block; width: 50%; overflow: hidden; height: 360px; background: #fff;}
.about-office .pics .rt span:nth-child(1){ background: #fff; box-sizing: border-box; padding: 40px; display: flex; align-content: space-between; flex-wrap: wrap;}
.about-office .pics .rt span:nth-child(1) h1{font-size: 20px; font-weight: bold;text-align: justify; line-height: 1.6;}
.about-office .pics .rt span:nth-child(1) h2{font-size: 16px; }
.about-office .pics .rt span:nth-child(2){ background: url(../img/office02.jpg) no-repeat center #fff; background-size: cover; }
.about-office .pics .rt span:nth-child(3){ background: url(../img/office03.jpg) no-repeat center #fff; background-size: cover; }
.about-office .pics .rt span:nth-child(4){ background: #0a022f; color: #fff; box-sizing: border-box; padding: 40px; display: flex; align-items: center; justify-content: center; font-size: 36px;}
.about-office .pics .rt span:nth-child(4) i{display: block; width: 10px;height: 10px; border-radius: 50%; margin: 0 20px; background: #fff;}
.about-office .pics .rt span img{display: block; width: 100%;}

.about-client{box-sizing: border-box;   margin: 0 auto; padding: 80px 0;}
.about-client .up{ width: calc(100% - 240px);  margin: 0 auto;overflow: hidden; }
.about-client .up .title{font-size: 36px; color: #333; line-height: 1.2;}
.about-client .up .txt{text-align: justify; line-height: 1.6; color: #999; margin-top: 20px; font-size: 16px;}
.about-client .down{width: calc(100% - 240px);  margin: 0 auto; display: flex; justify-content:space-between; flex-wrap: wrap; margin-top: 50px;}
.about-client .down .item{display: block; width: calc(16.6666% - 20px);  padding: 30px 0; position: relative;}
.about-client .down .item span{width: 100%;height: 1px;background: #ddd; display: block; position: absolute; left: 0; top: 0;}
.about-client .down .item span i{display: block; width: 0; background: #ef3e4a; transition: 0.3s; height: 100%;}
.about-client .down .item p{color: #999; font-size: 18px; transition: 0.3s;}
.about-client .down .item img{display: block; width: 100%; margin-top: 10px;filter: grayscale(100%); opacity: .4; transition: 0.3s;}
.about-client .down .item:hover span i{width: 100%;}
.about-client .down .item:hover p{color: #ef3e4a;}
.about-client .down .item:hover img{filter: grayscale(0%); opacity: 1; }

.about-msg{ margin: 0 auto; background: #ef3e4a; box-sizing: border-box; padding: 80px 120px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;}
.about-msg .lf{display: flex; align-content: space-between;  flex-wrap: wrap; color: #fff; width: 500px;}
.about-msg .lf .up h1{font-size: 32px; font-weight: bold;}
.about-msg .lf .md{margin-top: 30px; font-size: 18px; line-height: 1.4;}
.about-msg .lf .md p{margin-top: 16px;}
.about-msg .lf .bt{width: 140px;background: #fff;margin-top: 50px; box-sizing: border-box; padding: 6px;}
.about-msg .lf .bt img{display: block; width: 100%;}
.about-msg .lf .bt p{color: #999; text-align: center; margin-top: 6px; margin-bottom: 4px;}
.about-msg .rt{width: calc(100% - 700px);background: #fff; box-sizing: border-box; padding: 60px; display: flex; justify-content: space-between; flex-wrap: wrap;}
.about-msg .rt span{display: block; width: calc(50% - 30px);}
.about-msg .rt span:nth-child(3){width: 100%; margin-top: 60px;}
.about-msg .rt span:nth-child(4){width: 100%; margin-top: 60px;}
.about-msg .rt span input{
	outline:none;
	appearance:none;
	-moz-appearance:none;
	-webkit-appearance:none;
	-ms-appearance:none;
	padding: 0;
	margin: 0;
	background: none;
	border: none;
	display: block;
	height:60px;
	border-bottom: 1px #ddd solid;
	width: 100%;
	box-sizing: border-box;
	font-size: 18px;
	color: #999;
}
.about-msg .rt span input:focus{border-bottom: 1px #ef3e4a solid;}
.about-msg .rt span textarea{
	outline:none;
	appearance:none;
	-moz-appearance:none;
	-webkit-appearance:none;
	-ms-appearance:none;
	padding: 0;
	margin: 0;
	background: none;
	border: none;
	display: block;
	border-bottom: 1px #ddd solid;
	width: 100%;
	box-sizing: border-box;
	height: 100px;
	font-size: 18px;
	line-height: 1.6;
	color: #999;
}
.about-msg .rt span textarea:focus{border-bottom: 1px #ef3e4a solid;}
.about-msg .rt span:nth-child(4) em{display: block; width: 200px;height: 60px;background: #eee;  font-size: 16px;text-align: center; line-height: 60px; transition: 0.3s; cursor: pointer;}
.about-msg .rt span:nth-child(4) em:hover{background: #ef3e4a; color: #fff;}

.tip-box{width: 200px; background: #fff; box-shadow: 0 0 20px rgba(0,0,0,.2); border-radius: 10px; position: fixed; z-index: 99; left: 50%; top: 50%; transform: translate(-50%,-50%);  box-sizing: border-box; padding: 20px; text-align: center; display: none; animation: tip 0.1s infinite linear; animation-direction:alternate; animation-iteration-count:5;}
.tip-box i{display: block; text-align: center;}
.tip-box i.error{color: #ef3e4a; font-size: 36px;}
.tip-box i.error::before{content: "\e604";}
.tip-box i.success{color: #03711a; font-size: 36px;}
.tip-box i.success::before{content: "\e658";}
.tip-box span{display: block; width: 100%; margin-top: 10px;}


@keyframes tip
{
  from {margin-left: -4px;}
  to {margin-right: -4px;}
}



.contact-banner{width: 100%;height:100vh; position: relative; background: #000;}
.contact-banner .bgbox{width: 100%;height: 100%; position: absolute;  z-index: 1; left: 0; top: 0; overflow: hidden;}
.contact-banner .bgbox .bg{width: 100%;height:100%; position: absolute; left: 0; top: 0; animation: contact_bg 6s infinite linear; animation-direction:alternate;}
.contact-banner .bgbox .bg.bg-haerbin{background: url(../img/shenzhen.jpg) no-repeat center; background-size: cover; display: none;}
.contact-banner .bgbox .bg.bg-shenzhen{background: url(../img/haerbin.jpg) no-repeat center; background-size: cover; display: block;}
@keyframes contact_bg
{
  from {transform:scale(1);}
  to {transform:scale(1.2);}
}
.contact-banner .adds{width: 100%; height: 100%; text-align: center; position:  absolute; z-index: 2; left: 0; top: 0; color: #fff;}
.contact-banner .adds .txt{width: calc(100% - 240px); position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); margin-top: -30px;}
.contact-banner .adds .txt:nth-child(1){ display: block;}
.contact-banner .adds .txt:nth-child(2){ display: none;}
.contact-banner .adds .txt h1{font-size: 46px;font-weight: bold;}
.contact-banner .adds .txt h1::after{content: ""; display: block; width: 50px;height: 4px;background: #ef3e4a; margin: 0 auto; margin-top: 20px;}
.contact-banner .adds .txt h2{font-size: 82px;}
.contact-banner .adds .txt h3{margin-top: 10px; font-size: 16px;}
.contact-banner .adds .txt a{  display: block; width: 40px;height: 40px; border: 1px #fff solid; border-radius: 50%; overflow: hidden; line-height: 40px; text-align: center; font-size: 20px; color: #fff; margin: 0 auto; margin-top: 20px; transition: 0.3s;}
.contact-banner .adds .txt a::before{content: "\e7b1";}
.contact-banner .adds .txt a:hover{background: #ef3e4a; border: 1px #ef3e4a solid;}
.contact-banner .nav{position: absolute; width: 100%; z-index: 2; left: 0;bottom: 60px; display: flex; justify-content: center; }
.contact-banner .nav span{display: flex; align-items: center; justify-content: center; width: 200px;height: 60px; border: 3px #fff solid; line-height: 60px; box-sizing: border-box; margin: 0 10px; color: #fff; font-size: 18px; font-weight: bold;  transition: 0.3s; cursor: pointer;}
.contact-banner .nav span:hover{background: #ef3e4a;border: 3px #ef3e4a solid;}
.contact-banner .nav span.active{background: #ef3e4a;border: 3px #ef3e4a solid;}

.contact-box{width: 100%;background: #eee; overflow: hidden;box-sizing: border-box; padding: 80px 0;}
.contact-box .info{width: calc(100% - 240px); margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap;}
.contact-box .info .list{background: #fff;box-sizing: border-box; padding: 60px; width: calc(50% - 30px); display: flex; align-items: center; }
.contact-box .info .list .lf{width: 120px;}
.contact-box .info .list .lf img{display: block; width: 100%;}
.contact-box .info .list .rt{margin-left: 60px;}
.contact-box .info .list .rt h1{ font-size: 24px; font-weight: bold; color: #333;}
.contact-box .info .list .rt h2{ font-size: 18px;  color: #333; }
.contact-box .info .list .rt h3{color: #999; margin-top: 30px;}
.contact-box .info .list .rt h4{color: #999; margin-top: 6px;}
.contact-box .info .list .rt h5{color: #999; margin-top: 6px;}
.contact-box .info .list .rt span{display: block; width: 140px; border: 1px #ddd solid; box-sizing: border-box; padding: 8px; text-align: center; margin-top: 30px;}
.contact-box .info .list .rt span img{display: block; width: 100%;}
.contact-box .info .list .rt span  p{color: #999; margin-top: 6px;}
.contact-box .online{width: calc(100% - 240px); margin: 0 auto; margin-top: 60px; background: #ef3e4a; box-sizing: border-box; padding: 60px;}
.contact-box .online a{display: block; width: 100%;height: 100%; text-align: center; color: #fff;}
.contact-box .online h1{font-size: 32px;}
.contact-box .online h2{width: 700px; margin: 0 auto; margin-top: 50px;}
.contact-box .online h2 img{display: block; width: 100%;}

/* app */
.services-banner{width: 100%;height: 100vh; position: relative; overflow: hidden;  background-attachment: fixed;}
.services-banner.app{background: url('../img/app.jpg') no-repeat center #000; background-size: cover; }
.services-banner.direct-sales{background: url('../img/direct_sales.jpg') no-repeat center #000; background-size: cover; }
.services-banner.web{background: url('../img/web_design.jpg') no-repeat center #000; background-size: cover; }
.services-banner.wechat{background: url('../img/wechat.jpg') no-repeat center #000; background-size: cover; }
.services-banner.software{background: url('../img/software.jpg') no-repeat center #000; background-size: cover; }
.services-banner .txt{width: calc(100% - 240px); position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%,-50%); color: #fff;  }
.services-banner .txt h1{margin: 0 auto;}
.services-banner .txt h1 img{display: block;  margin: 0 auto;}
.services-banner.direct-sales h1 img{width: 60%;}
.services-banner.software h1 img{width:70%;}
.services-banner.web h1 img{width:60%;}
.services-banner.app h1 img{width:80%;}
.services-banner.wechat h1 img{width:60%;}
.services-banner .txt h2{ text-align: justify; line-height: 1.6; margin-top: 30px; text-align: center; font-size: 36px; font-weight: bold;}
.services-banner .down-more{width: 26px; height: 40px;border: 1px #fff solid; border-radius: 40px; overflow: hidden;  position: absolute; z-index: 2; left: 50%; transform: translateX(-50%); bottom: 80px;  display: flex; align-items: center; justify-content: center;}
.services-banner .down-more i{width:6px;height: 6px; border-radius: 50%; background: #fff;animation: downMore_app 1s infinite linear;  display: block;}
@keyframes downMore_app
{
  from {transform:translateY(-100%);}
  to {transform:translateY(100%); opacity: 0;}
}

.service-nav{width: 100%;height: 80px; line-height: 80px; background: #fff; border-bottom: 1px #ddd solid; border-top: 1px #ddd solid; display: flex;}
.service-nav.active{position: fixed; z-index: 9999999; left: 0; top: 0;}
.service-nav a{display: flex; align-items: center; justify-content: center; width: 20%; border-right: 1px #ddd solid; transition: 0.3s;color: #666;}
.service-nav a span{display: block; font-size: 18px; margin-left: 14px; }
.service-nav a i{font-size: 28px; display: block; transition: 0.3s; }
.service-nav a:nth-child(1) i::before{content: "\e61c";}
.service-nav a:nth-child(2) i::before{content: "\e60b";}
.service-nav a:nth-child(3) i::before{content: "\e636";}
.service-nav a:nth-child(4) i::before{content: "\ec2e";}
.service-nav a:nth-child(5) i::before{content: "\e613";}
.service-nav a:last-child{margin-right: 0;}
.service-nav a:hover{color: #ef3e4a; background: #f8f8f8;}
.service-nav a:hover i{transform: rotate(90deg);}
.service-nav a.on{color: #ef3e4a; background: #f8f8f8;}

.services-body{background: #f2f2f2; overflow: hidden;}
.app-title{width: calc(100% - 240px); margin: 0 auto; text-align: center;}
.app-title h1{font-size: 52px;color: #333; line-height: 1.4;}
.app-title h2{font-size: 18px;color: #999; margin-top: 20px;}
.app-title.light h1{color: #fff;}
.app-title.light h2{color: rgba(255,255,255,.6);}
.app-one{padding: 80px 0; overflow: hidden;}
.app-one .troubles{width: calc(100% - 240px); margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 50px;}
.app-one .troubles .item{width: calc(50% - 15px);background: #fff; margin-top: 30px; box-sizing: border-box; padding: 40px; border-radius: 10px; display: flex; flex-wrap: wrap; justify-content: space-between;}
.app-one .troubles .item i{display: flex; align-content: center; justify-content: center; flex-wrap: wrap; text-align: center; width: 70px;height: 70px; color: #fff; font-size: 24px; border-radius: 8px; background: #9193f1;}
.app-one .troubles .item i p::after{content: ""; display: block; width: 24px;height: 2px;background: #ffd800; margin: 0 auto;}
.app-one .troubles .item span{display: block; width: calc(100% - 100px);}
.app-one .troubles .item span h1{font-size: 24px; font-weight: bold;}
.app-one .troubles .item span h2{font-size: 18px; color: #999; margin-top: 10px; line-height: 1.6;}

.app-two{padding: 80px 0; overflow: hidden; background: #fff;}
.app-two .advs{width: calc(100% - 240px); margin: 0 auto; margin-top: 50px; display: flex; justify-content: space-between; flex-wrap: wrap;}
.app-two .advs span{display: block; position: relative; width: calc(33.3333% - 20px);  margin-top: 30px; overflow: hidden; border-radius: 30px 0 30px 0;}
.app-two .advs span b{display: block;width: 100%; height: 50%; position: absolute; left: 0; bottom: 0; background: linear-gradient(to top,rgba(0,0,0,.6),rgba(0,0,0,0)); transition: 0.3s;}
.app-two .advs span img{display: block; width: 100%; transition: 0.3s;}
.app-two .advs span em{display: block;position: absolute; left: 0; bottom: 0; width: 100%;  box-sizing: border-box; padding: 30px; color: #fff; transition: 0.3s;}
.app-two .advs span em h1{font-size: 24px; font-weight: bold;transition: 0.3s;}
.app-two .advs span em h2{font-size: 16px; margin-top: 20px; text-align: justify; transition: 0.3s; line-height: 1.6; color: rgba(255,255,255,.7);}
.app-two .advs span:hover b{height: 100%; background: rgba(0,0,0,.8);}
.app-two .advs span:hover img{transform: scale(1.2);}
.app-two .advs span:hover em{top: 50%; transform: translateY(-50%); bottom: auto; }

.app-three{padding: 80px 0; overflow: hidden;}
.app-three .areas{ width: calc(100% - 240px); margin: 0 auto; margin-top: 60px; display: flex; justify-content: space-between; flex-wrap: wrap;}
.app-three .areas span{display: flex; align-content: center; justify-content: center; text-align: center; flex-wrap: wrap;  width: calc(16.6666% - 10px);  padding: 80px 0;  margin-top:12px; overflow: hidden;  background: #fff; color: #666; transition: 0.3s; border-radius: 10px;}
.app-three .areas span i{display: block; width: 100%; font-size: 42px;}
.app-three .areas span p{font-size: 16px; margin-top: 10px;}
.app-three .areas span:hover{ background: #ef3e4a; color: #fff;}
.app-three .areas span:nth-child(1) i:before{content: "\e91d";}
.app-three .areas span:nth-child(2) i:before{content: "\e615";}
.app-three .areas span:nth-child(3) i:before{content: "\e619";}
.app-three .areas span:nth-child(4) i:before{content: "\e625";}
.app-three .areas span:nth-child(5) i:before{content: "\e687";}
.app-three .areas span:nth-child(6) i:before{content: "\e624";}
.app-three .areas span:nth-child(7) i:before{content: "\e601";}
.app-three .areas span:nth-child(8) i:before{content: "\e60f";}
.app-three .areas span:nth-child(9) i:before{content: "\e626";}
.app-three .areas span:nth-child(10) i:before{content: "\e603";}
.app-three .areas span:nth-child(11) i:before{content: "\e661";}
.app-three .areas span:nth-child(12) i:before{content: "\e606";}
.app-three .areas span:nth-child(13) i:before{content: "\e6ee";}
.app-three .areas span:nth-child(14) i:before{content: "\ee31";}
.app-three .areas span:nth-child(15) i:before{content: "\e67d";}
.app-three .areas span:nth-child(16) i:before{content: "\fd6f";}
.app-three .areas span:nth-child(17) i:before{content: "\e652";}
.app-three .areas span:nth-child(18) i:before{content: "\e643";}

.app-four{background: url('../img/app_flow.jpg') no-repeat center #000; background-size: cover;  width: 100%;  overflow: hidden; padding: 80px 0;}
.app-four .flows{width: calc(100% - 240px); margin: 0 auto; margin-top: 40px; display: flex; justify-content: space-between; flex-wrap: wrap;}
.app-four .flows span{display: block;  color: #fff; width: calc(25% - 30px); margin-top: 40px; border: 1px rgba(255,255,255,.4) solid; border-radius: 10px;  box-sizing: border-box; padding: 30px; position: relative; transition: 0.3s;}
.app-four .flows span h1::after{ content: ""; display: block; width: 18px;height: 2px; background: #ef3e4a; font-size: 16px; font-family: 'en';}
.app-four .flows span h2{font-size: 28px; font-weight: bold; margin-top: 20px; transition: 0.3s;}
.app-four .flows span h3{position: absolute; right: 30px; bottom: 40px;  font-size: 24px; animation: flow 1s infinite linear;}
.app-four .flows span h3::before{content: "\e65f";}
@keyframes flow
{
  from {transform:translateX(-10px);}
  to {transform:translateX(10px); opacity: 0;}
}
.app-four .flows span:hover{background:#fff; border: 1px #fff solid;}
.app-four .flows span:hover h1{color: #000;}
.app-four .flows span:hover h2{color: #ef3e4a;}
.app-four .flows span:hover h3{color: #ef3e4a;}

.relevant-container{width: 100%; box-sizing: border-box; padding: 80px 0;}
.relevant-container.m-relevant{display: none; }
.relevant-container .relevant-title{text-align: center;font-size: 52px;}
.relevant-container .cases{width: calc(100% - 240px); margin: 0 auto; display: flex;flex-wrap: wrap;  margin-top: 50px; align-items: flex-start;}
.relevant-container .cases a{display: block; width: calc(33.3333% - 20px); margin-top: 30px; margin-right: 30px; background: #fff; border-radius: 10px; overflow: hidden; transition: 0.3s;}
.relevant-container .cases a:nth-child(3n){margin-right: 0;}
.relevant-container .cases a em{display: block; width: 100%; overflow: hidden;}
.relevant-container .cases a img{display: block; width: 100%;transition: 0.3s;}
.relevant-container .cases a span{display: block; box-sizing: border-box; padding: 30px;}
.relevant-container .cases a span h1{font-size: 28px; color: #333; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;transition: 0.3s;}
.relevant-container .cases a span h2{color: #999; font-size: 16px;overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-top:6px;}
.relevant-container .cases a:hover{box-shadow: 0 0 20px rgba(0,0,0,.2);  margin-top: 20px;}
.relevant-container .cases a:hover em img{transform: scale(1.1);}
.relevant-container .cases a:hover span h1{color: #ef3e4a;}
.relevant-container .more{width: 180px; height: 60px; background: #fff; margin: 0 auto; margin-top: 80px; border-radius: 60px; line-height: 60px; text-align: center; font-size: 18px;  transition: 0.3s;}
.relevant-container .more a{display: flex;align-items: center; justify-content: center; width: 100%; height: 100%; }
.relevant-container .more:hover{background: #ef3e4a; }
.relevant-container .more:hover a{color: #fff;}
.relevant-container .more a i{width: 0px; height: 1px;background: #fff; display: block; margin-left: 10px;transition: 0.3s;}
.relevant-container .more:hover a i {background: #fff; width: 30px;}
.relevant-container .more a em{display: block;  margin-left: -6px; }
.relevant-container .more a em::before{content: "\e694";}

.relevant-container .news{width: calc(100% - 240px); margin: 0 auto; display: flex; flex-wrap: wrap;  box-sizing: border-box;  margin-top:50px; }
.relevant-container .news a{display: flex; align-content: center; flex-wrap: wrap; width:calc(33.3333% - 20px); box-sizing: border-box; margin-top: 30px; margin-right: 30px; background: #fff; box-sizing: border-box; padding: 50px; border-radius: 10px; transition: 0.3s;}
.relevant-container .news a:nth-child(3n){margin-right: 0;}
.relevant-container .news a h1{width: 100%; font-size: 22px; white-space:nowrap; overflow:hidden; text-overflow: ellipsis; transition: 0.3s;}
.relevant-container .news a:hover{box-shadow: 0 0 20px rgba(0,0,0,.2); transform: translateY(-10px)!important;}
.relevant-container .news a:hover h1{color: #ef3e4a;}
.relevant-container .news a h2{width: 100%; margin-top: 30px; color: #aaa; font-size: 16px;text-align: justify; line-height: 1.6;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2; }
.relevant-container .news a h3{margin-top: 30px;}

.service-contact{background: url('../img/contact_bg.jpg') no-repeat center; background-size: cover; box-sizing: border-box; padding: 100px 0; background-attachment: fixed;}
.service-contact .box{width: calc(100% - 240px); margin: 0 auto; background: #fff;box-sizing: border-box; padding: 60px; border-radius: 10px; display: flex;  justify-content: space-between; flex-wrap: wrap;}
.service-contact .box .lf{width: 500px;}
.service-contact .box .lf h1{font-size: 36px;font-weight: bold;}
.service-contact .box .lf span{display: block; text-align: justify; font-size: 18px; color: #999; margin-top: 40px; line-height: 1.6;}
.service-contact .box .lf h2{margin-top: 40px; font-size: 42px;font-weight: bold; line-height: 1;}
.service-contact .box .lf h2::before{content: ""; display: block; width: 1px;height: 80px;background: linear-gradient(to bottom,#000 50%,#ef3e4a 50%); margin-bottom: 60px;}
.service-contact .box .lf h2 em{display: block;}
.service-contact .box .lf h2 em i:nth-child(1){font-size: 24px;}
.service-contact .box .rt{width: calc(100% - 600px);}
.service-contact .box .rt .title{font-size: 24px;font-weight: bold;}

.service-contact .box .rt .msg{display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 50px;}
.service-contact .box .rt .msg span{display: block; width: calc(50% - 20px);}
.service-contact .box .rt .msg span:nth-child(3){width: 100%; margin-top: 40px;}
.service-contact .box .rt .msg span:nth-child(4){width: 100%; margin-top: 40px;}
.service-contact .box .rt .msg span h1{font-size: 16px; color: #999;}
.service-contact .box .rt .msg span input{
	outline:none;
	appearance:none;
	-moz-appearance:none;
	-webkit-appearance:none;
	-ms-appearance:none;
	padding: 0;
	margin: 0;
	background: none;
	border: none;
	display: block;
	height:50px;
	background: #f5f5f5;
	border: 1px #eee solid;
	padding: 0 20px;
	width: 100%;
	box-sizing: border-box;
	margin-top: 20px;
}
.service-contact .box .rt .msg span input:focus{border: 1px #000 solid;}
.service-contact .box .rt .msg span textarea{
	outline:none;
	appearance:none;
	-moz-appearance:none;
	-webkit-appearance:none;
	-ms-appearance:none;
	padding: 0;
	margin: 0;
	background: none;
	border: none;
	display: block;
	height:60px;
	background: #f5f5f5;
	border: 1px #eee solid;
	width: 100%;
	box-sizing: border-box;
	margin-top: 20px;
	height: 80px;
	padding: 20px;
}
.service-contact .box .rt .msg span textarea:focus{border: 1px #000 solid;}
.service-contact .box .rt .msg span:nth-child(4) a{display: block; width: 200px;height: 50px;background: #000;  font-size: 16px;text-align: center; line-height: 50px; transition: 0.3s; color: #fff;}
.service-contact .box .rt .msg span:nth-child(4) a:hover{background: #ef3e4a; }

.sale-one{background: #fff; overflow: hidden; padding: 80px 0;}
.sale-title{width: calc(100% - 240px); margin: 0 auto;  text-align: center; }
.sale-title h1{font-size: 56px; line-height: 1;}
.sale-title h2{font-size: 18px;color: #999; margin-top: 20px; text-transform: uppercase;}
.sale-title h2::after{content: ""; display: block; margin: 0 auto; margin-top: 20px; width: 50px;height: 3px;background: linear-gradient(to right,#001786,#3f57ca);}

.sale-one .sale-item{width: calc(100% - 240px); margin: 0 auto; margin-top: 50px; display: flex; justify-content: space-between; flex-wrap: wrap;}
.sale-one .sale-item span{display: block; width: calc(20% - 20px); margin-top: 30px;   box-sizing: border-box; padding: 30px 20px; border-radius: 30px 0 30px 0; text-align: center; transition: 0.3s; font-size: 22px; font-weight: bold;background:#001786;color: #fff;}
.sale-one .sale-item span:hover{background:#f5f5f5;color: #000; box-shadow: 0 0 20px rgba(0,0,0,.2);}


.sale-two{overflow: hidden; padding: 80px 0;}
.sale-two .adjs{width: calc(100% - 240px); margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 40px;}
.sale-two .adjs span{display: block;width: calc(25% - 30px);  margin-top: 40px; background: #fff; transition: 0.3s; overflow: hidden; border-radius: 10px; overflow: hidden;}
.sale-two .adjs span em{display: block; width: 100%; overflow: hidden; transition: 0.3s;}
.sale-two .adjs span em img{display: block; width: 100%;}
.sale-two .adjs span h1{box-sizing: border-box;padding:0 30px;font-size: 24px;font-weight: bold; color: #666; height: 100px; line-height: 100px; transition: 0.3s; text-align: center;}
.sale-two .adjs span:hover{box-shadow: 0 0 20px rgba(0,0,0,.2); }
.sale-two .adjs span:hover em{ margin-top: -40px;}
.sale-two .adjs span:hover h1{height: 140px; line-height: 140px; color: #001786;}

.sale-three{overflow: hidden;width: calc(100% - 240px); margin: 0 auto; padding-bottom: 0; display: flex;flex-wrap: wrap;}
.sale-three .lf{width: 50%; background: #001786; box-sizing: border-box; padding: 60px; color: #fff; display: flex; align-content: center; flex-wrap: wrap;}
.sale-three .lf em{display: block;width: 140px;}
.sale-three .lf em img{display: block; width: 100%;}
.sale-three .lf h1{font-size: 42px; font-weight: bold;margin-top:30px; width: 100%;}
.sale-three .lf span{display: block; font-size: 18px; margin-top:50px;width: 100%;}
.sale-three .lf span p{line-height: 1.8;}
.sale-three .rt{width: 50%; background: #c88f14; box-sizing: border-box; padding: 60px; color: #fff; position: relative; display: flex; align-content: center; flex-wrap: wrap;}
.sale-three .rt h1{font-size: 42px; font-weight: bold; width: 100%; }
.sale-three .rt span{font-size: 18px; margin-top: 50px; display: block; line-height: 1.6; width: 100%;}
.sale-three .rt span p:nth-child(2){ margin-top:30px;}
.sale-three .rt a{display: block; width: 160px;height: 60px; line-height: 60px; border: 2px #fff solid; text-align: center; line-height: 60px; font-size: 24px; font-weight: bold; color: #fff; margin-top: 50px; transition: 0.3s;}
.sale-three .rt a:hover{background: #001786;border: 2px #001786 solid;}
/* .sale-three .rt em{display: block;width: calc(100% - 60px); position: absolute; left: 50%; transform: translateX(-50%); bottom: -4px; opacity: .5; }
.sale-three .rt em img{display: block;width: 100%;} */

.sale-four{overflow: hidden; padding: 80px 0; padding-bottom: 0;}
.sale-four .advs{display: flex; justify-content: space-between; flex-wrap: wrap; width: calc(100% - 240px); margin: 0 auto; margin-top: 50px;}
.sale-four .advs span{width: calc(33.3333% - 20px); margin-top: 30px; background: #fff; display: block; box-sizing: border-box; padding: 40px; border-radius: 20px; transition: 0.3s;}
.sale-four .advs span i{width: 50px;height: 8px;background: linear-gradient(to right,#001786,#3f57ca); display: block; border-radius: 8px;transition: 0.3s;}
.sale-four .advs span h1{font-size: 24px; margin-top: 20px;transition: 0.3s;}
.sale-four .advs span h2{font-size: 16px; line-height: 1.6; margin-top: 20px; color: #999;transition: 0.3s; text-align: justify;}
.sale-four .advs span:hover{background: #001786;}
.sale-four .advs span:hover h1{color: #fff;}
.sale-four .advs span:hover h2{color: #fff;}
.sale-four .advs span:hover i{filter: saturate(200%);}



.we-title{text-align: center; }
.we-title h1{font-size: 32px;font-weight: bold; line-height: 1; text-transform: uppercase; background-image: linear-gradient(to right, #220084, #ff3abe);background-clip: text; color: transparent; -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; margin: 0 auto;}
.we-title h2{font-size: 52px; font-weight: bold;  margin-top: 15px;}
.we-title.light h2{color: #fff;}


.we-one{background: #fff; overflow: hidden; padding: 80px 0;}
.we-one .business{width: calc(100% - 240px); margin: 0 auto; margin-top: 80px; display: flex; justify-content: space-between; flex-wrap: wrap;}
.we-one .business span{display: block; width: calc(33.3333% - 30px); transition: 0.3s; overflow: hidden;text-align: center;}
.we-one .business span em{display: block; width: 100%;border-radius: 10px; overflow: hidden; }
.we-one .business span em img{display: block; width: 100%;transition: 0.3s;}
.we-one .business span h1{font-size: 24px; margin-top: 20px; transition: 0.3s;}
.we-one .business span h2{font-size: 16px;text-align: center; line-height: 1.6; color: #999; margin-top: 15px;}
.we-one .business span:hover em img{transform:scale(1.1);}
.we-one .business span:hover h1{ color: #320087;}

.we-two{overflow: hidden; padding: 80px 0;}
.we-two .advantages{width: calc(100% - 240px); margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 80px;}
.we-two .advantages span{display: block;width: calc(25% - 30px); background: #fff; transition: 0.3s; overflow: hidden; border-radius: 10px; box-sizing: border-box; padding: 60px; text-align: center;}
.we-two .advantages span i{display: block; width: 120px; height: 120px; border-radius: 50%; border: 1px #999 dashed; margin: 0 auto; overflow: hidden; transition: 0.3s; text-align: center; line-height: 120px; color: #aaa; font-size: 48px;}
.we-two .advantages span h1{font-size: 24px; font-weight: bold; margin-top: 20px;}
.we-two .advantages span h2{font-size: 16px; color: #999; margin-top: 20px;}
.we-two .advantages span:nth-child(1) i::before{content: "\e690";}
.we-two .advantages span:nth-child(2) i::before{content: "\e6a7";}
.we-two .advantages span:nth-child(3) i::before{content: "\e655";}
.we-two .advantages span:nth-child(4) i::before{content: "\e60c";}
.we-two .advantages span:hover{background: #320087; }
.we-two .advantages span:hover h1{color: #fff;}
.we-two .advantages span:hover h2{color: #fff;}
.we-two .advantages span:hover i{background: #fff;color: #320087; border: 1px #fff dashed;}

.we-three{overflow: hidden; padding: 80px 0; background: #000;}
.we-three .functions{width: calc(100% - 240px); margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 50px;}
.we-three .functions span{display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; width: calc(33.3333% - 20px);  margin-top: 30px; background: #333; border-radius: 10px; overflow: hidden; box-sizing: border-box; padding: 50px; transition: 0.3s;}
.we-three .functions span i{display: block; font-size: 90px; color: rgba(255, 255, 255, .6); transition: 0.3s;}
.we-three .functions span:nth-child(1) i:before{content: "\e622";}
.we-three .functions span:nth-child(2) i:before{content: "\e8a2";}
.we-three .functions span:nth-child(3) i:before{content: "\e60d";}
.we-three .functions span:nth-child(4) i:before{content: "\e78e";}
.we-three .functions span:nth-child(5) i:before{content: "\e61b";}
.we-three .functions span:nth-child(6) i:before{content: "\e628";}
.we-three .functions span dl{width: calc(100% - 120px);}
.we-three .functions span dl dt{ font-size: 24px;font-weight: bold; color: #fff;}
.we-three .functions span dl dd{ font-size: 16px;color: rgba(255, 255, 255, .6); margin-top: 10px;transition: 0.3s;}
.we-three .functions span:hover{background: #320087;}
.we-three .functions span:hover i{color: #fff;}
.we-three .functions span:hover dl dd{color: #fff;}

.we-four{overflow: hidden; padding: 80px 0; background: #fff;}
.we-four .things{width: calc(100% - 240px); margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 80px;}
.we-four .things span{display: block;text-align: center; background: #f2f2f2; box-sizing: border-box; padding: 60px; width: calc(33.3333% - 30px); border-radius: 10px; overflow:  hidden; transition: 0.3s;}
.we-four .things span h1{font-size: 42px; background-image: linear-gradient(to right, #220084, #ff3abe);background-clip: text; text; color: transparent; -webkit-background-clip: text; -webkit-text-fill-color: }
.we-four .things span i{display: block; width: 10px;height: 10px; border-radius: 50%;background-image: linear-gradient(to right, #220084, #ff3abe); margin: 0 auto; margin-top: 20px;}
.we-four .things span h2{font-size: 32px;font-weight: bold; margin-top: 20px;}
.we-four .things span em{display: block; color: #999; font-size: 18px; margin-top: 20px;}
.we-four .things span em p{margin-top: 6px;}
.we-four .things span:hover{background: #320087;}
.we-four .things span:hover h1{color: #fff;}
.we-four .things span:hover h2{color: #fff;}
.we-four .things span:hover em{color: #fff;}


.website-title{text-align: center; }
.website-title h1{font-size: 32px;font-weight: bold; line-height: 1; text-transform: uppercase; background-image: linear-gradient(to right, #ecac3d, #ec7c40);background-clip: text; text; color: transparent; -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; margin: 0 auto;}
.website-title h2{font-size: 52px; font-weight: bold;  margin-top: 15px;}
.website-title h2::after{content: ""; display: block; width: 10px;height: 10px; background-image: linear-gradient(to right, #ecac3d, #ec7c40); margin: 0 auto; margin-top: 20px;}
.website-title.light h2{color: #fff;}

.website-one{ overflow: hidden; padding: 80px 0;}
.website-one .business{width: calc(100% - 240px); margin: 0 auto; margin-top: 40px; display: flex; justify-content: space-between; flex-wrap: wrap;}
.website-one .business .item{display: block; width: calc(33.3333% - 30px); margin-top: 40px;  transition: 0.3s; overflow: hidden;text-align: center; position: relative;border-radius: 10px; overflow: hidden;}
.website-one .business .item em{display: block; width: 100%; }
.website-one .business .item em img{display: block; width: 100%;transition: 0.3s;}
.website-one .business .item span{display: flex; flex-wrap: wrap; align-content: center; width: 100%; position: absolute; left: 0; bottom: 0; background-image: linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,0)); box-sizing: border-box; padding:30px; color: #fff;  transition: 0.3s;}
.website-one .business .item span h1{font-size:28px;transition: 0.3s; font-weight: bold; width: 100%;}
.website-one .business .item span h2{ext-align: center; line-height: 1.6; margin-top: 15px;width: 100%; font-size: 16px;}
.website-one .business .item:hover em img{transform:scale(1.1);}



.wesite-two{overflow: hidden; padding: 80px 0; background: #fff;}
.wesite-two .advantages{width: calc(100% - 240px); margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 80px;}
.wesite-two .advantages span{  width: calc(33.3333% - 30px);    overflow: hidden; border-radius: 10px; box-sizing: border-box;  background: #f2f2f2; height: 600px; position: relative; transition: 0.5s; }
.wesite-two .advantages span i{display: block; width: 44px; height:4px;background: url('../img/web_line.png') no-repeat; background-size: 100% 100%; transition: 0.3s; position: absolute; left: 40px; top: 40px; }
.wesite-two .advantages span h1{ width: calc(100% - 80px); font-size: 34px; color: #444; text-align: justify; transition: 0.3s; position: absolute; left: 50%; transform: translateX(-50%); top: 120px; transition: 0.5s;}
.wesite-two .advantages span h1 b{font-weight: bold; color: #ec8f3f;}
.wesite-two .advantages span h2{width: calc(100% - 80px); font-size: 24px; color: #000;  transition: 0.3s;position: absolute; left: 50%; transform: translateX(-50%); top: 300px; transition: 0.5s;}
.wesite-two .advantages span h3{width: calc(100% - 80px); position: absolute; left: 50%; transform: translateX(-50%); font-size: 16px; color: #fff; top:400px;  display: block;  opacity: 0; transition: 0.5s;  text-align: justify;  }
.wesite-two .advantages span a{width: calc(100% - 80px); position: absolute; left: 50%; transform: translateX(-50%); bottom: 0px; display: flex; align-items: center; justify-content: space-between; background-image: linear-gradient(to right, #ecac3d, #ec7c40); line-height: 68px; height: 68px; box-sizing: border-box; padding: 0 30px; border-radius: 6px;  font-size: 24px; color: #fff; transition: 0.5s; opacity: 0;}
.wesite-two .advantages span:hover{background: url('../img/web_abg.jpg') no-repeat center; background-size: cover; }
.wesite-two .advantages span:hover h1{color: #fff; top: 80px;}
.wesite-two .advantages span:hover h2{color: #fff; top: 260px;}
.wesite-two .advantages span:hover h3{top: 360px; opacity: 1;}
.wesite-two .advantages span:hover i{background: url('../img/web_line_h.png') no-repeat; background-size: 100% 100%;}
.wesite-two .advantages span:hover a{bottom: 40px; opacity: 1;}


.wesite-three{overflow: hidden; padding: 80px 0; background: url('../img/web_three_bg.jpg') no-repeat center; background-size: cover; }
.wesite-three .functions{width: calc(100% - 240px); margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 80px;}
.wesite-three .functions span{display: block;  text-align: center; width: calc(25% - 30px);  border: 1px #fff solid; border-radius: 50px 0 50px 0; overflow: hidden; box-sizing: border-box; padding:60px 30px; transition: 0.3s;}
.wesite-three .functions span i{display: block; font-size: 70px; color: rgba(255, 255, 255, .6); transition: 0.3s;}
.wesite-three .functions span:nth-child(1) i:before{content: "\e651";}
.wesite-three .functions span:nth-child(2) i:before{content: "\e64b";}
.wesite-three .functions span:nth-child(3) i:before{content: "\e6e7";}
.wesite-three .functions span:nth-child(4) i:before{content: "\e67e";}
.wesite-three .functions span dl{width:100%; margin-top: 30px;}
.wesite-three .functions span dl dt{ font-size: 24px;font-weight: bold; color: #fff;}
.wesite-three .functions span dl dd{ font-size: 16px;color: rgba(255, 255, 255, .6); margin-top: 10px;transition: 0.3s; text-transform: uppercase;}
.wesite-three .functions span:hover{background: #ec8f3f; border: 1px #ec8f3f solid;}
.wesite-three .functions span:hover i{color: #fff;}
.wesite-three .functions span:hover dl dd{color: #fff;}

.soft-title{text-align: center; }
.soft-title h1{font-size: 42px;font-weight: bold; line-height: 1; text-transform: uppercase;   margin: 0 auto; color: #999;}
.soft-title h2{font-size: 72px; font-weight: bold;  margin-top: 15px;}
.soft-title.light h1{color: #fff;}
.soft-title.light h2{color: #fff;}


.soft-one{ overflow: hidden; padding: 80px 0;}
.soft-one .business{width: calc(100% - 240px); margin: 0 auto; margin-top: 40px; display: flex; flex-wrap: wrap; justify-content: space-between;}
.soft-one .business .item{display: block; width: calc(33.3333% - 30px); margin-top: 40px;  transition: 0.3s; overflow: hidden;text-align: center; position: relative;border-radius: 10px; overflow: hidden; background: #fff;  box-sizing: border-box; padding:40px;}
.soft-one .business .item em{display: block; width: 100%; font-size: 72px; color: #006aee;}
.soft-one .business .item:nth-child(1) em::before{content: "\e616";}
.soft-one .business .item:nth-child(2) em::before{content: "\e641";}
.soft-one .business .item:nth-child(3) em::before{content: "\e697";}
.soft-one .business .item:nth-child(4) em::before{content: "\e61a";}
.soft-one .business .item:nth-child(5) em::before{content: "\e64e";}
.soft-one .business .item:nth-child(6) em::before{content: "\e765";}
.soft-one .business .item:nth-child(7) em::before{content: "\e639";}
.soft-one .business .item:nth-child(8) em::before{content: "\e63f";}
.soft-one .business .item:nth-child(9) em::before{content: "\e607";}
.soft-one .business .item span{display: block;  width: 100%;   transition: 0.3s;}
.soft-one .business .item span h1{font-size:36px;transition: 0.3s; font-weight: bold; width: 100%; margin-top: 30px;}
.soft-one .business .item span h2{ext-align: center; line-height: 1.6; margin-top:20px;width: 100%; font-size: 18px; color: #999; word-wrap:break-word;}

.soft-one .business .item:hover{ background: #006aee;}
.soft-one .business .item:hover em{color: #fff;}
.soft-one .business .item:hover h1{color: #fff;}
.soft-one .business .item:hover h2{color: #fff;}

.soft-two{overflow: hidden; padding: 80px 0; background: #fff;}
.soft-two .advantages{width: calc(100% - 240px); margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 80px;}
.soft-two .advantages span{display: flex;flex-wrap: wrap; align-content: flex-start;  width: calc(25% - 30px);  background: #fff;  overflow: hidden; border-radius: 10px; box-sizing: border-box; padding: 40px;  background: #f2f2f2;  }
.soft-two .advantages span i{display: block; font-size: 32px; color: #006aee;}
.soft-two .advantages span i::after{content: ""; display: block; width: 40px;height: 3px;background: #006aee;}
.soft-two .advantages span h1{font-size: 32px; color: #444;  margin-top: 40px; width: 100%;transition: 0.3s;}
.soft-two .advantages span h2{font-size: 18px; color: #999; margin-top: 60px;width: 100%; transition: 0.3s; text-align: justify; line-height: 1.6;}

.soft-two .advantages span:hover{background: #006aee;}
.soft-two .advantages span:hover i{color: #fff;}
.soft-two .advantages span:hover i::after{ background: #fff;}
.soft-two .advantages span:hover h1{color: #fff;}
.soft-two .advantages span:hover h2{color: #fff;}


.soft-three{overflow: hidden; padding: 80px 0; background:linear-gradient(to left top,#0173ef,#16ade8); }
.soft-three .flows{width: calc(100% - 240px); margin: 0 auto; display: flex; flex-wrap: wrap; margin-top: 80px;}
.soft-three .flows span{display: block;  text-align: center; width: 16.6666%;   overflow: hidden;  transition: 0.3s;}
.soft-three .flows span i{display: block; font-size: 42px; color: rgba(255, 255, 255, .6); transition: 0.3s;}
.soft-three .flows span em{display: block; width: 100%;height: 20px;   position: relative; margin-top:30px;}
.soft-three .flows span em b{display: block; width: 20px;height: 20px; border-radius: 50%; background:linear-gradient(to left top,#ffaa25,#ffde25); position: absolute; z-index: 2; left: 50%; transform: translateX(-50%); top: 0; box-sizing: border-box; border: 2px rgba(255,255,255, .6) solid;}
.soft-three .flows span em::before{content: ""; display: block; width: 100%; height: 2px; background: rgba(255,255,255, .6); position: absolute; left: 0; z-index: 1; top: 50%; transform: translateY(-50%);}
.soft-three .flows span h1{color: #fff; font-size: 36px; font-weight: bold;}
.soft-three .flows span dl{width:100%; margin-top: 30px;}
.soft-three .flows span dl dd{ color: rgba(255, 255, 255, .6); margin-top: 10px;transition: 0.3s; text-transform: uppercase;}
.soft-three .flows span:hover i{color: #fff;}
.soft-three .flows span:hover dl dd{color: #fff;}