锘縝ody,html {
max-width:100%;
min-height:100%;
overflow-x:hidden;
}
*,.none-padding {
padding:0
}
.clearfix:after,.icon:before {
content:''
}
.iframeWrap,img {
border:none
}
* {
margin:0
}
html {
height:100%
}
body {
font-size:12px;
font-family:'寰蒋闆呴粦','Microsoft Yahei',arial,sans-serif
}
.clearfix {
zoom:1
}
.clearfix:after {
display:block;
visibility:hidden;
height:0;
font-size:0;
clear:both
}
em,i {
font-style:normal
}
a,a:hover {
text-decoration:none
}
h1,h2,h3,h4,h5,h6 {
font-weight:500
}
.drag-handle {
cursor:move
}
.fl {
float:left
}
.fr {
float:right
}
.ml10 {
margin-left:10px
}
.mr20 {
margin-right:20px
}
.dfr {
display:flex;
flex-wrap:wrap
}
input,textarea {
outline:0
}
.fa {
color:#d4d4d4
}
.redFont {
color:red
}
li,ul {
list-style:none
}
.hide {
display:none
}
.browsehappy,.show {
display:block
}
.substr {
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap
}
.text-right {
text-align:right
}
.loading-spinner,.text-center {
text-align:center
}
.h440 {
height:440px
}
.titile-tip {
font-size:14px;
color:#959595;
margin-top:10px
}
.browsehappy {
height:100%;
width:100%;
position:fixed;
left:0;
top:0;
z-index:99;
background:#fff
}
.browsehappy center {
margin-top:20%
}
.loading-wrap {
display:none;
transition:all .5s ease 0s;
height:50px;
margin-top:20px;
position:relative
}
.loading-spinner {
top:50%;
left:0;
margin:-25px 0 0;
width:100%;
height:50px;
position:absolute
}
.loading-spinner .circular {
width:42px;
height:42px;
animation:loading-rotate 2s linear infinite
}
.loading-spinner .path {
animation:loading-dash 1.5s ease-in-out infinite;
stroke-dasharray:90,150;
stroke-dashoffset:0;
stroke-width:2;
stroke:#095098;
stroke-linecap:round
}
@keyframes loading-rotate {
100% {
transform:rotate(360deg)
}
}@keyframes loading-dash {
0% {
stroke-dasharray:1,200;
stroke-dashoffset:0
}
50% {
stroke-dasharray:90,150;
stroke-dashoffset:-40px
}
100% {
stroke-dasharray:90,150;
stroke-dashoffset:-120px
}
}.iframeBox {
width:796px;
height:560px;
margin:0 auto
}
.iframeWrap {
width:100%;
height:100%;
overflow:hidden;
display:none
}
.icon {
width:25px;
height:25px;
display:inline-block
}
.icon.m2x {
width:50px;
height:50px
}
.icon.m3x {
width:100px;
height:100px
}
.icon:before {
background:url(../images/icon.png) left top no-repeat;
background-size:250px 250px;
display:block;
width:100%;
height:100%
}
.icon.m2x:before {
background-size:500px 500px
}
.icon.m3x:before {
background-size:1000px 1000px
}
.icon.icon-email:before {
background-position:0 0
}
.icon.icon-map:before {
background-position:-25px 0
}
.icon.icon-map2:before {
background-position:-25px -48px
}
.icon.icon-contact:before {
background-position:-100px 0
}
.icon.icon-star:before {
background-position:-50px 0
}
.icon.icon-declare:before {
background-position:-125px 0
}
.icon.icon-close:before {
background-position:-75px 2px
}
.icon.icon-tel:before {
background-position:-125px -75px
}
.icon.icon-sina:before {
background-position:-75px -48px
}
.icon.icon-wechat:before {
background-position:-100px -48px
}
.icon.icon-download:before {
background-position:-200px -48px
}
.icon.icon-local:before {
background-position:-100px -75px
}
.icon.icon-build:before {
background-position:-50px -50px
}
.icon.icon-arrow-down:before {
background-position:-25px -75px
}
.icon.m2x.icon-close:before,.icon.m2x.icon-mobile-close:before {
background-position:-150px -50px
}
.icon.m2x.icon-video:before {
background-position:-250px -100px
}
.icon.m2x.icon-pdf:before {
background-position:-300px -100px
}
.icon.m2x.icon-ppt:before {
background-position:-300px -150px
}
.icon.m2x.icon-img:before {
background-position:-350px -100px
}
.icon.m2x.icon-logo:before {
background-position:-110px -151px
}
.icon.m3x.icon-feature1:before {
background-position:-900px -100px
}
.icon.m3x.icon-feature2:before {
background-position:-600px 0
}
.icon.m3x.icon-feature3:before {
background-position:-700px 0
}
.icon.m3x.icon-feature4:before {
background-position:-800px 0
}
.icon.m3x.icon-feature5:before {
background-position:-900px 0
}
.icon.m3x.icon-feature6:before {
background-position:0 -200px
}
.icon.m3x.icon-feature7:before {
background-position:0 -300px
}
.icon.m2x.icon-logo:hover:before {
background-position:-160px -151px
}
.tool-warp {
background:#f4f9f9;
position:relative;
display:none;
margin-top:75px;
}
.tool-warp .close {
position:absolute;
right:20px;
top:50px;
z-index:2
}
.tool-warp .tool-box {
margin:0;
background:url(../images/1.jpg) center center no-repeat;
background-size:cover
}
.tool-warp .tool-box li {
width:786px;
margin:0 auto;
color:#535353;
display:none;
padding:20px 0;
position:relative
}
.tool-warp .tool-box li a {
color:#535353;
}
.tool-warp .tool-box li:nth-child(1) {
overflow:hidden
}
.tool-warp .tool-box li:nth-child(3) {
width:500px
}
.tool-warp .tool-box h3.title {
font-size:24px;
margin-bottom:20px
}
.backup-domain {
display:block;
margin-left:82px
}
.tool-warp .tool-box li iframe {
background:0 0;
position:relative;
z-index:2
}
.tool-warp .tool-box li .loading-wrap {
display:block;
position:absolute;
top:50%;
left:0;
z-index:1;
width:100%;
transform:translateY(-50%)
}
.tool-warp .tool-box li .declareBox {
line-height:32px;
font-size:16px;
text-align:justify
}
.tool-warp .tool-box li .declareBox p {
margin-top:10px
}
.tool-warp .tool-box li .declareBox p.text-right {
text-align:right
}
.tool-warp .tool-box .notice {
font-size:12px;
margin-bottom:20px;
color:#757575
}
.tool-warp .tool-box .inp-wrap {
width:250px;
display:inline-block;
margin-left:80px;
position:relative
}
.tool-warp .tool-box .inp-wrap:first-child {
margin-left:0
}
.tool-warp .tool-box .inp-wrap b {
width:0;
height:2px;
position:absolute;
bottom:0;
left:0;
background:#038d8d;
display:block;
transition:all .7s ease 0s
}
.tool-warp .tool-box .inp:focus+b {
width:100%;
transition:all .7s ease 0s
}
.tool-warp .tool-box .inp {
border:none;
border-bottom:1px solid #999;
background:0 0;
width:100%;
height:36px;
line-height:36px;
padding:0 5px;
color:#fff;
box-sizing:border-box
}
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder {
color:#757575
}
input:-moz-placeholder,textarea:-moz-placeholder {
color:#757575
}
input::-moz-placeholder,textarea::-moz-placeholder {
color:#757575
}
input:-ms-input-placeholder,textarea:-ms-input-placeholder {
color:#757575
}
.tool-warp .tool-box .textarea-wrap {
position:relative;
overflow:hidden;
margin-top:20px;
width:580px;
height:100%
}
.tool-warp .tool-box textarea {
width:100%;
resize:none;
border:1px solid #999;
background:#fff;
padding:5px;
height:100%;
color:#fff;
float:left;
box-sizing:border-box
}
.tool-warp .tool-box .textarea-wrap b,.tool-warp .tool-box .textarea-wrap i,.tool-warp .tool-box .textarea-wrap s,.tool-warp .tool-box .textarea-wrap span {
position:absolute;
background:#038d8d;
z-index:1;
transition:all .7s ease 0s
}
.tool-warp .tool-box .textarea-wrap b {
left:0;
top:0;
width:0;
height:2px
}
.tool-warp .tool-box .textarea-wrap.active b {
width:100%
}
.tool-warp .tool-box .textarea-wrap i {
right:0;
top:0;
height:0;
width:2px
}
.tool-warp .tool-box .textarea-wrap.active i {
height:100%
}
.tool-warp .tool-box .textarea-wrap s {
right:0;
bottom:0;
width:0%;
height:2px
}
.tool-warp .tool-box .textarea-wrap.active s {
width:100%
}
.tool-warp .tool-box .textarea-wrap span {
left:0;
bottom:0;
height:0;
width:2px
}
.tool-warp .tool-box .textarea-wrap.active span {
height:100%
}
.tool-warp .tool-box .sub-wrap {
margin-top:20px
}
.tool-warp .tool-box .tip {
margin-top:10px;
height:20px;
line-height:20px;
color:#e00;
display:none
}
.tool-warp .tool-box .tip.success {
color:#01aa4d
}
.tool-warp .tool-box .sub {
height:34px;
line-height:34px;
background:#095098;
border:none;
color:#fff;
width:100px;
text-align:center;
margin-right:20px
}
.tool-warp .tool-box .sub.reset {
background:#aaa;
color:#fff
}
.tool-warp .tool-box .company-info .column {
width:44%;
float:left;
margin-right:6%
}
.tool-warp .tool-box .company-info .column h4 {
font-size:14px;
margin-bottom:15px;
padding-bottom:20px;
border-bottom:1px solid #999
}
.tool-warp .tool-box .company-info .column .item {
line-height:30px;
display:flex
}
.tool-warp .tool-box .company-info .column .item i {
align-items:center;
margin-right:10px
}
.tool-warp .tool-box .company-info .column .item .c-info {
flex:1
}
.wechat img {
float:left;
margin-right:20px
}
.wechat div {
margin-top:5px;
float:left;
font-size:14px
}
.wechat div p {
margin-bottom:10px
}
.main {
position:relative;
min-height:100vh
}
.header {
position:fixed;
top:0;
left:0;
width:100%;
z-index:5;
background:#fff;
box-shadow:2px 0 8px #aaa;
box-sizing:border-box;
display:flex;
justify-content:center
}
.header .menu-wrap {
margin-top:0px;
height:70px;
line-height:70px;
display:flex;
flex-wrap:wrap;
align-items:center;
width:1300px;
justify-content:space-between
}
.header .logo,.header .logo i {
height:100%;
width:200px
}
.header .logo {
display:flex;
align-items:center
}
.header .menu-icon {
width:20px;
height:18px;
position:relative;
cursor:pointer;
display:none
}
.header .companyName {
font-size:18px;
color:#fff;
display:none;
line-height:100%
}
.menu-wrap .menu-icon i,.menu-wrap .menu-icon::after,.menu-wrap .menu-icon::before {
position:absolute;
left:0;
width:100%;
height:2px;
background:#095098;
content:"";
border-radius:1px
}
.menu-wrap .menu-icon::before {
top:0
}
.menu-wrap .menu-icon i {
top:50%;
margin-top:-1px
}
.menu-wrap .menu-icon::after {
bottom:0
}
.header .menu {
display:flex;
flex-wrap:wrap;
justify-content:space-between
}
.header .menu li a,.header .menu li a::after {
display:block;
transition:all .3s ease 0s;
height:100%
}
.header .menu li {
margin-right:1px;
position:relative
}
.header .menu li a {
color:#333;
font-size:16px;
font-weight:500;
padding:0 25px;
position:relative;
overflow:hidden
}
.header .menu li.active a,.header .menu li:hover a {
color:#fff;
transition:all .3s ease 0s
}
.header .menu li a::after {
content:"";
width:100%;
position:absolute;
top:-100%;
left:0;
background:#095098;
z-index:-1
}
.header .menu li.active a::after,.header .menu li:hover a::after {
top:0;
transition:all .3s ease 0s
}
.tool-nav-icon {
display:flex;
flex-wrap:wrap;
transition:all .7s ease 0s;
margin-left:0px
}
.tool-nav-icon li {
padding:0 15px;
cursor:pointer;
height:100%;
display:flex;
align-items:center
}
.submenu li,.submenu li .first-child,.submenuBox,.submenuBox .footer-nav,.submenuBox .tool-nav-icon {
display:none
}
.tool-nav-icon li:last-child {
padding-right:0
}
.tool-nav-icon li.active .icon.icon-email:before,.tool-nav-icon li:hover .icon.icon-email:before {
background-position:0 -25px;
transition:all .3s ease 0s
}
.tool-nav-icon li.active .icon.icon-map:before,.tool-nav-icon li:hover .icon.icon-map:before {
background-position:-25px -25px;
transition:all .3s ease 0s
}
.tool-nav-icon li.active .icon.icon-star:before,.tool-nav-icon li:hover .icon.icon-star:before {
background-position:-50px -25px;
transition:all .3s ease 0s
}
.tool-nav-icon li.active .icon.icon-declare:before,.tool-nav-icon li:hover .icon.icon-declare:before {
background-position:-125px -25px;
transition:all .3s ease 0s
}
.tool-nav-icon li.active .icon.icon-contact:before,.tool-nav-icon li:hover .icon.icon-contact:before {
background-position:-100px -25px;
transition:all .3s ease 0s
}
.header .mobile-close {
display:none;
position:fixed;
right:10px;
top:10px;
z-index:10
}
.submenuBox {
position:absolute;
left:0;
top:50px;
z-index:6;
width:100%;
background:rgba(0,0,0,.7)
}
.submenu-box {
padding:0px 0;
display:flex;
flex-wrap:wrap;
justify-content:center;
height:60px;
line-height:60px;
}
.submenu-box a {
display:block;
margin:0 25px;
position:relative
}
.submenu li a img {
width:250px
}
.submenu li a.active img,.submenu li a:hover img {
opacity:1
}
.submenu-box a span {
display:block;
color:#fff;
font-size:14px;
text-align:center
}
body.onePage {
height:100vh;
overflow:hidden;
background:#fff
}
body.onePage .header {
background:0 0;
box-shadow:none;
border-bottom:1px solid rgba(255,255,255,.1)
}
body.onePage .header.fix {
box-shadow:0 0 8px #aaa;
border-bottom:none
}
body.onePage .header.fix .menu li a {
color:#333
}
body.onePage .header .menu li a {
color:#fff
}
body.onePage .footer {
position:absolute;
left:0;
z-index:1;
bottom:0;
width:100%;
box-sizing:border-box;
background:rgba(0,0,0,.1);
color:#fff
}
body.onePage .footer a {
color:#fff
}
body.onePage .index-bg {
width:100vw;
height:100vh;
position:absolute;
left:0;
top:0;
z-index:-1
}
body.onePage .index-bg img,body.onePage .index-bg video {
width:100vw;
height:100vh;
object-fit:cover
}
.entranceBox {
width:100vw;
height:100vh;
position:absolute;
left:0;
top:0;
z-index:1;
background:rgba(0,0,0,.2)
}
.entranceBox .entrance {
width:100%;
position:absolute;
top:50%;
z-index:1;
text-align:center;
transform:translateY(-50%);
color:#fff
}
.entranceBox .entrance h2 {
font-size:40px;
letter-spacing:20px;
color:#fff
}
.entranceBox .entrance .line {
height:2px;
background:#13E2E5;
width:200px;
display:block;
margin:4vh auto;
border:none
}
.entranceBox .entrance h4 {
font-size:18px;
letter-spacing:15px;
color:#eee
}
.entrance-module {
display:flex;
flex-wrap:wrap;
justify-content:space-around;
margin:15vh auto 0;
max-width:1200px
}
.entrance-module li {
width:33.33%
}
.entrance-module li .iconWrap {
width:80px;
height:80px;
border:1px solid rgba(255,255,255,.6);
border-radius:100%;
display:flex;
justify-content:center;
align-items:center;
margin:auto
}
.entrance-module li .iconWrap:hover {
border-color:#09aeb0;
background:#09aeb0;
transition:all .3s ease 0s
}
.entrance-module li .iconWrap svg {
width:35px;
height:35px
}
.entrance-module li .iconWrap path {
transition:all .3s ease 0s;
opacity:.6
}
.entrance-module li .iconWrap:hover path {
fill:#fff;
opacity:1;
transition:all .3s ease 0s
}
.entrance-module li .title {
font-size:18px;
line-height:24px;
margin:25px 0;
color:#fff;
letter-spacing:10px
}
.entrance-module li .description {
font-size:14px;
line-height:24px;
color:#eee;
padding:0 30px;
letter-spacing:3px;
text-align:left
}
.slide-module {
width:100%;
position:relative
}
.slide-module .slide-bg {
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
z-index:1
}
.slide-module .title-box {
width:600px;
position:absolute;
bottom:15%;
left:50%;
z-index:2;
margin:0 0 0 -300px;
color:#fff;
display:none
}
.slide-module .nav {
position:absolute;
top:50%;
left:20px;
z-index:3;
transform:translateY(-50%)
}
.slide-module .nav span {
padding:5px;
display:block;
border:2px solid #fff;
margin-bottom:20px;
border-radius:100%
}
.slide-module .nav span.active {
background:#fff
}
.slide-module .title-box .logo {
position:absolute;
left:50%;
top:0;
margin-left:-25px
}
.slide-module .title-box .slogan {
width:40%;
font-size:14px;
letter-spacing:20px;
border-bottom:2px solid #fff;
padding-bottom:5px;
padding-left:20px
}
.slide-module .title-box .wish {
font-size:16px;
padding-left:20px;
letter-spacing:20px;
padding-top:30px;
display:block
}
.slide-module .slide-box {
width:100%
}
.submenu-box2 {
position:relative;
width:1300px;
margin:0 auto;
text-align:center;
height:60px;
line-height:60px;
}
.submenu-box2 a {
display:inline-block;
margin:0;
margin:0 40px 0 40px;
color:#333;
font-size:16px;
}
.submenu-box2 a:first-child {
border-left:none
}
.submenu-box2 a span {
font-size:16px
}
.submenu-box2 a.active{
border-bottom:2px solid #095098;
color:#095098!important;
}
.submenu-box a.active span {
color:#095098;
}
.arrow-icon {
font-size:12px;
display:block;
color:#fff;
text-align:center;
cursor:pointer;
width:50px;
height:50px;
border-radius:100%;
position:absolute;
bottom:50px;
left:50%;
z-index:3;
transform:translateX(-50%);
border:1px solid #fff
}
.arrow-icon i {
animation:sdb 1.5s infinite
}
.arrow-icon:hover {
border-color:#09aeb0;
background:#09aeb0
}
@keyframes sdb {
0% {
transform:translate(0,0);
opacity:0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"
}
50% {
opacity:1;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"
}
100% {
transform:translate(0,20px);
opacity:0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"
}
}.slide-module .slide-box ul {
width:100%;
transition:all .7s ease 0s
}
.slide-module ul li {
float:left;
display:none;
width:100%;
position:relative
}
.slide-module ul li.active {
display:block
}
.slide-project .slide-box {
width:100%;
height:100%;
overflow:hidden
}
.slide-project ul {
display:flex;
flex-wrap:wrap;
height:100%
}
.slide-project ul li {
width:100%;
height:100%;
display:block;
background-size:cover;
background-position:center;
background-repeat:no-repeat
}
.loading-icon {
position:absolute;
left:50%;
top:50%;
z-index:-2;
width:40px;
height:40px;
margin:-20px 0 0 -20px;
animation:loading 2s linear infinite
}
@keyframes loading {
0% {
transform:rotate(0)
}
100% {
transform:rotate(360deg)
}
}.slide-module ul li video,.slide-module ul li>img {
width:100%;
object-fit:cover;
float:left
}
.slide-module ul li .text {
position:absolute;
top:50%;
left:0;
z-index:3;
font-size:18px;
width:100%;
color:#eaeaea;
line-height:30px;
text-align:center;
transform:translateY(-50%);
padding:0 30px;
box-sizing:border-box
}
.slide-module ul li .text h4 {
font-size:50px;
line-height:70px;
margin-bottom:20px;
color:#fff;
letter-spacing:20px;
height:auto
}
.slide-module ul li .text span {
margin-top:50px;
display:block
}
.slide-module .navigation {
position:absolute;
bottom:0;
left:50%;
z-index:5;
transform:translate(-50%);
display:flex;
flex-wrap:wrap;
width:100%;
justify-content:center
}
.slide-module .navigation .arrowBox {
background:#fff
}
.slide-module .navigation .arrow {
height:60px;
width:100px;
margin-top:20px;
display:inline-block;
position:relative
}
.slide-module .navigation .arrow.right {
border-left:1px solid #ccc
}
.slide-module .navigation .arrow::after,.slide-module .navigation .arrow::before {
content:"";
width:20px;
height:20px;
border-top:2px solid #ccc;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%) rotate(-135deg)
}
.slide-module .navigation .arrow.right::after,.slide-module .navigation .arrow.right::before {
transform:translate(-50%,-50%) rotate(45deg)
}
.slide-module .navigation .arrow::after {
border-right:2px solid #ccc;
border-top:none
}
.slide-module .navigation .arrow:hover::after,.slide-module .navigation .arrow:hover::before {
border-color:#01a9aa
}
.container1 {
width:1300px;
margin:0 auto;
}
.introduce {
display:flex;
flex-wrap:wrap;
padding-top:50px
}
.introduce li {
width:31%;
margin-left:3.5%;
background:#f5f5f5
}
.introduce li:first-child {
margin-left:0
}
.introduce li a {
display:block
}
.introduce li a img {
width:100%;
height:auto;
transition:all .5s ease 0s
}
.introduce li a:hover img {
transform:scale(1.1);
transition:all .5s ease 0s
}
.introduce li .img-box {
width:100%;
overflow:hidden;
position:relative
}
.introduce li .title {
font-size:20px;
color:#444;
display:block;
text-align:center;
letter-spacing:10px;
padding:15px 0 10px
}
.introduce li p {
padding:5px 20px 20px;
font-size:16px;
text-align:justify;
color:#959595
}
.module {
padding-top:80px;
padding-bottom:40px
}
.module .title {
font-size:32px;
color:#095098;
text-align:center;
margin-bottom:30px
}
.module .info {
font-size:14px;
width:700px;
margin:0 auto;
color:#666;
line-height:28px
}
.six-feature .feature {
display:flex;
flex-wrap:wrap
}
.six-feature .feature li {
width:33.33%;
padding:0 25px;
box-sizing:border-box;
display:flex;
margin-top:100px
}
.six-feature .feature li .circle-icon {
width:120px;
height:120px;
border-radius:100%;
background:linear-gradient(#31cecf 0,#02aaab 100%);
display:flex;
align-items:center
}
.unfold::after,.unfold::before {
content:'';
background:#999
}
.six-feature .feature li .circle-icon i {
margin:0 auto
}
.six-feature .feature li .info {
padding-left:20px;
flex:1;
color:#666;
font-size:14px;
box-sizing:border-box;
text-align:justify
}
.six-feature .feature li .info .icon-title {
color:#444;
display:block;
font-size:24px;
margin:10px 0
}
.advantage-list {
padding:0 170px
}
.advantage-list li {
margin-top:100px
}
.advantage-list li .text {
padding-right:50px;
box-sizing:border-box;
width:50%;
float:left
}
.advantage-list li .advantage-img {
width:50%;
float:right
}
.advantage-list li .advantage-img img {
width:100%
}
.advantage-list li .text h3 {
color:#095098;
font-size:24px;
margin:20px 0
}
.advantage-list li .text p {
margin-left:40px;
font-size:16px;
line-height:32px;
color:#666;
margin-bottom:50px
}
.advantage-list li:nth-child(2n) .text {
float:right;
padding:0 0 0 50px
}
.advantage-list li:nth-child(2n) .advantage-img {
float:left
}
.module .line {
border:none;
border-top:1px solid #eee
}
.products-explain li {
padding:30px 20px;
position:relative;
border-bottom:1px solid #ddd
}
.products-explain li .unfold {
right:20px;
top:30px
}
.unfold {
position:absolute;
width:24px;
height:24px;
display:block;
cursor:pointer
}
.unfold::before {
width:14px;
height:1px;
position:absolute;
top:50%;
left:5px
}
.unfold::after {
width:1px;
height:14px;
position:absolute;
left:50%;
top:5px
}
.products-explain li .unfold.active::after {
display:none
}
.products-explain li h3 {
font-size:16px;
color:#444
}
.products-explain li .explain-text {
display:none;
column-gap:40px;
column-count:2;
margin-top:20px
}
.products-explain li .explain-text.no-columns {
column-count:1
}
.products-explain li p {
color:#959595;
margin-bottom:30px;
font-size:14px;
line-height:28px
}
.products-explain li .explain-text td {
height:24px;
line-height:24px;
padding-left:10px
}
.province {
display:flex;
width:100%;
font-size:18px;
line-height:32px;
padding:20px 0;
border-bottom:1px solid #eee;
position:relative
}
.province_fix {
position:fixed;
left:0;
top:50px;
z-index:5;
background:#fff;
width:100%
}
.project-list li,.project-list li .wrap {
position:relative;
box-sizing:border-box
}
.province .unfold {
right:0;
bottom:24px;
display:none
}
.province .area {
width:60px
}
.province .province-list {
display:flex;
flex-wrap:wrap;
flex:1;
padding-right:20px;
height:26px;
overflow:hidden
}
.province .province-list.active {
height:auto;
overflow:visible
}
.province .province-list li {
margin-right:24px;
font-size:18px
}
.province .province-list li a {
color:#959595
}
.province .province-list li a.active,.province .province-list li a:hover {
color:#095098
}
.project-list {
display:flex;
flex-wrap:wrap;
padding:20px 0
}
.project-list li {
width:31%;
border-radius:5px;
margin:20px 1%;
font-size:16px;
height:300px;
color:#fff;
overflow:hidden;
background:#FFF;
box-shadow:2px 2px 14px rgba(0,0,0,.4)
}
.project-list li.project1 {
background:#F54337
}
.project-list li.project2 {
background:#E82617
}
.project-list li.project3 {
background:#FF7C7D
}
.project-list li.project4 {
background:#ffc900
}
.project-list li.project5 {
background:#0079DD
}
.project-list li.project6 {
background:#5dc800
}
.project-list li.project7 {
background:#4ce8de
}
.project-list li.project8 {
background:#fff;
}
.project-list li.project9 {
background:#9E373B
}
.project-list li.project10 {
background:#FF7C4F
}
.project-list li.project11 {
background:#EDEBE7
}
.project-list li .wrap {
display:block;
justify-content:center;
align-items:center;
height:100%;
width:100%;
z-index:2;
padding:20px;
padding-top:260px;
}
.project-list li h4 {
text-align:center;
font-size:20px;
margin-bottom:10px;
color:#333;
}
.project-list li .imgwrap {
position:absolute;
width:100%;
height:100%;
z-index:0;
left:0;
top:0
}
.project-list li .imgwrap::after {
content:"";
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
transition:all .5s ease 0s
}
.project-list li .imgwrap img {
object-fit:cover;
width:100%;
height:250px;
}
.project-list li .info {
padding:0 25px;
width:100%;
position:absolute;
left:0;
top:60px;
z-index:2;
box-sizing:border-box;
display:block;
transition:all .5s ease 0s;
text-align:left;
padding-left:30px;
line-height:30px;
display:none;
color:#fff;
}
.project-list li:hover .info {
top:60px;
transition:all .5s ease 0s;
display:block;
}
.project-list li:hover .imgwrap::after {
background:rgba(0,0,0,.6);
}
.project-list li .info>span {
margin:0 5px
}
.project-list li .info>span:first-child {
display:none
}
.page {
margin:40px 0;
display:flex;
justify-content:center
}
.page a,.page span {
display:inline-block;
height:40px;
line-height:40px;
width:40px;
text-align:center;
margin:0 10px;
border:1px solid #959595;
color:#959595;
font-size:14px
}
.page a.active {
background:#0cc;
border-color:#0cc;
cursor:default;
color:#fff
}
.container2 {
width:1200px;
margin:60px auto 20px
}
.group-title {
text-align:center;
font-size:24px;
color:#444
}
.group-module>.title {
padding-left:20px;
height:24px;
line-height:24px;
font-size:18px;
color:#555;
position:relative;
margin:80px 0 20px
}
.eng {
font-size:14px;
color:#777
}
.group-module>.title::before {
content:"";
height:24px;
width:12px;
background:#01a9aa;
position:absolute;
top:0;
left:0
}
.group-module .group-intro {
display:flex;
flex-wrap:wrap
}
.group-module .group-intro .left {
color:#777;
font-size:14px;
text-align:justify;
width:65%;
padding-right:10%;
box-sizing:border-box
}
.group-module .group-intro .left p {
margin-bottom:20px
}
.group-module .group-intro .right {
width:35%
}
.group-module .group-intro .right img {
width:100%;
height:auto
}
.group-cultur {
display:flex;
flex-wrap:wrap
}
.group-cultur li {
width:280px;
margin-left:26px;
position:relative
}
.group-cultur li:first-child {
margin-left:0
}
.group-cultur li img {
width:100%;
height:auto;
float:left
}
.group-cultur li .cultur-title {
text-align:justify;
width:100%;
position:absolute;
bottom:0;
left:0;
line-height:24px;
padding:8px 20px;
font-size:14px;
color:#fff;
box-sizing:border-box
}
.group-cultur li:nth-child(1) .cultur-title {
background:rgba(92,208,210,.6)
}
.group-cultur li:nth-child(2) .cultur-title {
background:rgba(209,73,52,.6)
}
.group-cultur li:nth-child(3) .cultur-title {
background:rgba(89,127,211,.6)
}
.group-cultur li:nth-child(4) .cultur-title {
background:rgba(47,184,223,.6)
}
.contact-our {
padding:20px 15px;
color:#959595;
font-size:14px
}
.line {
border:none;
border-top:1px solid #eee
}
.contact-our .company-name {
padding-top:30px;
height:30px;
line-height:30px
}
.contact-our .company-name .share-link {
margin-left:10px;
position:relative;
top:3px
}
.contact-our .company-info {
display:flex;
flex-wrap:wrap;
margin-top:10px
}
.contact-our .company-info li {
width:33.33%;
line-height:36px
}
#company-map {
height:400px;
width:100%;
margin-top:30px
}
.headline {
text-align:center;
font-size:24px;
color:#555;
padding:45px 0 0
}
.headline .eng {
margin-bottom:30px
}
.database-list {
display:flex;
flex-wrap:wrap;
padding:20px 0
}
.database-list li {
width:23%;
box-sizing:border-box;
border:1px solid #ddd;
padding:20px;
margin:40px 1% 0;
display:flex;
flex-wrap:wrap
}
.database-list li .iconWrap {
width:80px;
height:70px;
background-color:#bbb;
border-radius:10px;
display:flex;
align-items:center;
justify-content:center
}
.database-list li .info {
margin-left:14px;
flex:1
}
.database-list li .name {
font-size:16px;
line-height:20px;
height:40px;
overflow:hidden;
display:block
}
.database-list li .info .other {
font-size:12px;
color:#959595;
display:block;
height:30px;
line-height:30px
}
.database-list li:hover {
border-color:#095098
}
.database-list li:hover .iconWrap {
background:#095098
}
.database-list li:hover .info .other,.database-list li:hover .name {
color:#095098
}
.database-list li:hover .icon.icon-download:before {
background-position:-225px -48px
}
.courseWrap {
position:relative
}
.courseWrap .arrow {
position:absolute;
top:0;
height:100px;
width:20px
}
.courseWrap .arrow:hover {
background:rgba(0,0,0,.2)
}
.courseWrap .arrow::after {
position:absolute;
top:30px;
border:10px solid transparent;
height:0;
width:0;
content:'';
transform:translateX(-50%)
}
.client-list li span img,.popup .content {
transform:translate(-50%,-50%);
left:50%;
top:50%
}
.courseWrap .arrow.left {
left:100px
}
.courseWrap .arrow.right {
right:100px
}
.courseWrap .arrow.left::after {
border-right-color:#46d0d3;
left:5px
}
.courseWrap .arrow.right::after {
border-left-color:#46d0d3;
right:-15px
}
.courseWrap .timeline {
height:2px;
width:100%;
background:#46d0d3;
position:absolute;
top:38px;
left:0
}
.courseWrap .course-list {
margin:0 180px;
overflow:hidden;
position:relative
}
.courseWrap .course-list .scroller {
position:relative;
height:257px
}
.courseWrap .course-list ul {
width:8000px;
position:absolute;
left:0;
top:0
}
.courseWrap .course-list ul li {
height:auto;
color:#555;
font-size:14px;
padding-right:120px;
float:left;
position:relative;
text-align:center
}
.courseWrap .course-list ul li time {
height:20px;
line-height:20px
}
.courseWrap .course-list ul li .point {
width:20px;
height:20px;
background:rgba(43,217,208,.3);
display:flex;
justify-content:center;
align-items:center;
border-radius:100%;
margin:9px auto 0
}
.courseWrap .course-list ul li .point::after {
content:"";
height:12px;
width:12px;
background:#46d0d3;
display:block;
border-radius:100%
}
.courseWrap .course-list ul li .vertical-line {
width:1px;
height:10px;
margin:6px auto;
background:#777;
display:block
}
.courseWrap .course-list ul li .info {
max-height:174px;
writing-mode:vertical-lr;
display:inline-block;
text-align:left
}
.catalogue,.catalogue div,.popup .content {
text-align:center
}
.patent-list li {
display:block;
padding:0;
border:none
}
.patent-list img {
width:100%;
height:auto;
border:1px solid #ddd
}
.patent-list li:hover img {
border-color:#095098
}
.patent-list li .patent-name {
font-size:16px;
margin-top:5px;
display:block
}
.popup {
position:fixed;
display:none;
left:0;
top:0;
z-index:10;
width:100%;
height:100%;
background:rgba(0,0,0,.8)
}
.popup .close {
position:absolute;
right:0;
top:-50px
}
.popup .content {
position:absolute;
width:100%;
max-width:960px
}
.popup .content video {
width:100%;
height:100%;
display:none
}
.popup .content img {
max-height:100%;
max-width:100%;
display:none
}
.catalogue h4 {
width:200px;
margin:0 auto 20px;
padding-bottom:20px;
border-bottom:1px solid #ddd
}
.catalogue div {
font-size:16px
}
.catalogue div a {
margin:0 10px;
color:#777
}
.privacy-content {
color:#777;
max-width:700px;
margin:0 auto;
font-size:16px;
text-align:justify
}
.privacy-content .title {
padding:20px 0;
font-size:18px;
color:#444
}
.privacy-content .text {
margin-bottom:40px
}
.privacy-content .text .column {
padding-bottom:40px
}
.privacy-content .text .column h4 {
padding-bottom:10px
}
.privacy-content .text .column .item {
display:flex;
flex-wrap:wrap;
align-items:center
}
.client-title {
font-size:24px;
line-height:36px;
color:#5cd0d2;
text-align:center;
margin-top:20px
}
.client-title.bold {
color:#444
}
.client-description {
color:#959595;
font-size:16px;
width:800px;
margin:20px auto 0;
text-align:left
}
.ideal {
padding:0 100px;
display:flex;
flex-wrap:wrap
}
.ideal li {
width:33.33%;
align-items:center;
justify-content:center;
padding:40px;
box-sizing:border-box
}
.ideal li span {
font-size:28px;
color:#5cd0d2;
display:block;
text-align:center;
letter-spacing:20px;
margin:20px 0
}
.ideal li .intro {
font-size:16px;
color:#959595;
text-align:justify
}
.client-list-wrap {
position:relative;
margin-bottom:50px
}
.client-list {
margin:0 100px
}
.client-list li {
display:none;
flex-wrap:wrap
}
.client-list li.active {
display:flex
}
.client-list li div {
width:16.66%;
padding:20px 0
}
.client-list li span {
width:130px;
height:130px;
border:1px solid #eee;
overflow:hidden;
border-radius:100%;
position:relative;
margin:0 auto;
display:block;
box-shadow:0 0 10px #eee
}
.client-list li span:hover {
border-color:#0cc;
box-shadow:0 0 6px #0cc
}
.client-list li span img {
position:absolute;
width:100%
}
.client-list-wrap .arrow {
height:60px;
width:60px;
position:absolute;
top:50%;
left:20px;
transform:translateY(-50%);
cursor:pointer;
display:none
}
.client-list-wrap .arrow::after,.client-list-wrap .arrow::before {
width:60px;
height:2px;
background:#959595;
content:"";
display:block
}
.client-list-wrap .arrow.right {
right:20px;
left:auto;
transform:translateY(-50%) rotate(180deg)
}
.client-list-wrap .arrow::before {
transform:rotate(-45deg)
}
.client-list-wrap .arrow::after {
transform:rotate(45deg);
margin-top:39px
}
.client-list-wrap .arrow:hover::after,.client-list-wrap .arrow:hover::before {
background:#0cc
}
.zizhi-list {
display:flex;
flex-wrap:wrap;
justify-content:space-between
}
.zizhi-list .item {
padding:20px 0;
box-sizing:border-box
}
.zizhi-list .item:first-child {
margin-left:0
}
.zizhi-list img {
border:6px solid #80D2D1;
height:350px;
box-sizing:border-box;
width:auto
}
.zizhi-list span {
display:block;
font-size:16px;
padding:5px 0;
line-height:26px
}
.zizhi-list.zhizhi2 img {
height:230px;
border:none
}
.blogframe {
width:100%;
height:800px;
padding-top:50px;
background:#2a2a2a
}