@font-face {
  font-family: 'Alibaba PuHuiTi';
  src: url('../alibabaFont/AlibabaPuHuiTi-3-55-Regular.woff2') format('woff2'),
       url('../alibabaFont/AlibabaPuHuiTi-3-55-Regular.woff') format('woff'),
       url('../alibabaFont/AlibabaPuHuiTi-3-55-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

html, body {position:relative; width:100%; height:100%;}
body {padding:0; margin:0; overflow:hidden; -webkit-font-smoothing:antialiased; font-family: 'Alibaba PuHuiTi', sans-serif;}
dl,dd {margin:0; padding:0;}
ul, li {margin:0; padding:0; list-style:none;}
.hide {display:none!important;}

.loading {width:100%; height:100%; position:fixed; top:0; left:0; background:#fff; z-index:101;}
.home-loading {position:absolute; top:50%; left:50%; margin:-150px 0 0 -175px; z-index:1; -webkit-transform:scale(.6);}
.loading-num {position:absolute; width:100%; top:50%; left:0; margin-top:-10px; z-index:2; text-align:center; color:#f18b00;}
.loading-txt {font-size:12px; line-height:20px;}
.loading-progress {font-size:32px;}
.loading.out {-webkit-animation:fade-out 1s forwards;}

.head {width:100%; height:48px; background:#fff; position:fixed; top:0; left:0; z-index:9; border-bottom:.5px solid #e5e5e5; opacity:0;}
.head.in {-webkit-animation:head-in .4s forwards;}
@-webkit-keyframes head-in {
    from {opacity:0; -webkit-transform:translate(0, -48px);}
    to {opacity:1; -webkit-transform:translate(0, 0);}
}
@keyframes head-in {
    from {opacity:0; -webkit-transform:translate(0, -48px);}
    to {opacity:1; -webkit-transform:translate(0, 0);}
}
.topcolor {width:100%; height:2px; position:absolute; top:0; left:0; z-index:105; overflow:hidden;}
.topcolor dd {float:left; width:20%; height:2px; overflow:hidden;}
.topcolor dd:nth-child(1){background:#209bda;}
.topcolor dd:nth-child(2){background:#e20005;}
.topcolor dd:nth-child(3){background:#87bf17;}
.topcolor dd:nth-child(4){background:#f29000;}
.topcolor dd:nth-child(5){background:#e10068;}
.logo {width:58px; position:absolute; top:50%; left:18px; -webkit-transform:translate(0, calc(-50% + 1px));}
.nav-icon {width:37px; position:absolute; top:50%; right:6px; -webkit-transform:translate(0, calc(-50% + 2px));}
.lang {width:37px; position:absolute; top:50%; right:58px; -webkit-transform:translate(0, calc(-50% + 2px));}
.nav-icon img, .lang img, .logo img {width:100%; display:block;}
.page-title {width:80px; height:20px; line-height:20px; text-align:center; color:#333; overflow:hidden; font-size:14px; position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%, calc(-50% + 1px));}
.page-title-text {width:100%; height:120px; position:absolute; top:0; left:0; -webkit-transition:all .5s ease;}
.page-title-text.title0 {top:0;}
.page-title-text.title1 {top:-20px;}
.page-title-text.title2 {top:-40px;}
.page-title-text.title3 {top:-60px;}
.page-title-text.title4 {top:-80px;}
.page-title-text.title5 {top:-100px;}

.nav-pop {width:100%; height:100%; position:fixed; top:0; left:0; z-index:20; display:none;}
.nav-bg {width:100%; height:100%; position:absolute; top:0; left:0; z-index:1; background:url(../images/nav/img_bg.jpg) center center no-repeat; background-size:cover; opacity:0;}
.nav-snowline {width:100%; height:100%; position:absolute; top:0; left:0; z-index:2; background:url(../images/nav/snowline.png) center center no-repeat; background-size:cover; opacity:0;}
.nav-logo {width:76px; position:relative; z-index:3; margin:30px auto 0; opacity:0;}
.nav-close {width:17px; position:absolute; top:32px; right:27px; z-index:3; opacity:0;}
.nav-logo img, .nav-close img, .nav-list li img, .nav-social li img {width:100%; display:block;}
.nav-list {width:100%; margin-top:42px; position:relative; z-index:8; text-align:center;}
.nav-list li {width:68px; margin:0 auto 28px; opacity:0;}
.nav-list li:last-child {width:88px;}
.nav-social {width:100%; text-align:center; position:relative; z-index:3; padding-top:20px; opacity:0;}
.nav-social li {display:inline-block; width:36px; margin:0 20px; position:relative;}
.nav-social .weixin-pop {bottom:50px!important;}
.nav-pop.in {display:block;}
.nav-pop.in .nav-bg, .nav-pop.in .nav-snowline {-webkit-animation:fade-in .5s forwards;}
.nav-pop.in .nav-logo {-webkit-animation:fade-down-in .5s forwards;}
.nav-pop.in .nav-close {-webkit-animation:fade-down-in .5s forwards;}
.nav-pop.in .nav-list li:nth-child(1) {-webkit-animation:fade-down-in .5s .1s forwards;}
.nav-pop.in .nav-list li:nth-child(2) {-webkit-animation:fade-down-in .5s .2s forwards;}
.nav-pop.in .nav-list li:nth-child(3) {-webkit-animation:fade-down-in .5s .3s forwards;}
.nav-pop.in .nav-list li:nth-child(4) {-webkit-animation:fade-up-in .5s .3s forwards;}
.nav-pop.in .nav-social {-webkit-animation:fade-up-in .5s .2s forwards;}
.nav-pop.out {}
.nav-pop.out .nav-bg, .nav-pop.out .nav-snowline {opacity:1; -webkit-animation:fade-out .5s .5s forwards;}
.nav-pop.out .nav-logo {-webkit-animation:fade-up-out .5s forwards;}
.nav-pop.out .nav-close {-webkit-animation:fade-up-out .5s forwards;}
.nav-pop.out .nav-list li:nth-child(1) {opacity:1; -webkit-transform:translate(0,0); -webkit-animation:fade-up-out .5s .1s forwards;}
.nav-pop.out .nav-list li:nth-child(2) {opacity:1; -webkit-transform:translate(0,0); -webkit-animation:fade-up-out .5s .2s forwards;}
.nav-pop.out .nav-list li:nth-child(3) {opacity:1; -webkit-transform:translate(0,0); -webkit-animation:fade-up-out .5s .3s forwards;}
.nav-pop.out .nav-list li:nth-child(4) {opacity:1; -webkit-transform:translate(0,0); -webkit-animation:fade-down-out .5s .3s forwards;}
.nav-pop.out .nav-social {opacity:1; -webkit-transform:translate(0,0); -webkit-animation:fade-down-out .5s .2s forwards;}
@-webkit-keyframes fade-in {
    from {opacity:0;}
    to {opacity:1;}
}
@keyframes fade-in {
    from {opacity:0;}
    to {opacity:1;}
}
@-webkit-keyframes fade-out {
    from {opacity:1;}
    to {opacity:0;}
}
@keyframes fade-out {
    from {opacity:1;}
    to {opacity:0;}
}
@-webkit-keyframes fade-down-in {
    from {opacity:0; -webkit-transform:translate(0,-30px);}
    to {opacity:1; -webkit-transform:translate(0,0);}
}
@keyframes fade-down-in {
    from {opacity:0; -webkit-transform:translate(0,-30px);}
    to {opacity:1; -webkit-transform:translate(0,0);}
}
@-webkit-keyframes fade-up-in {
    from {opacity:0; -webkit-transform:translate(0,30px);}
    to {opacity:1; -webkit-transform:translate(0,0);}
}
@keyframes fade-up-in {
    from {opacity:0; -webkit-transform:translate(0,30px);}
    to {opacity:1; -webkit-transform:translate(0,0);}
}
@-webkit-keyframes fade-down-out {
    from {opacity:1; -webkit-transform:translate(0,0);}
    to {opacity:0; -webkit-transform:translate(0,30px);}
}
@keyframes fade-down-out {
    from {opacity:1; -webkit-transform:translate(0,0);}
    to {opacity:0; -webkit-transform:translate(0,30px);}
}
@-webkit-keyframes fade-up-out {
    from {opacity:1; -webkit-transform:translate(0,0);}
    to {opacity:0; -webkit-transform:translate(0,-30px);}
}
@keyframes fade-up-out {
    from {opacity:1; -webkit-transform:translate(0,0);}
    to {opacity:0; -webkit-transform:translate(0,-30px);}
}

.container, .news, .photos, .cases {width:100%; height:100%; position:relative; z-index:2;}
.container {opacity:0;}
.container.in {-webkit-animation:container-in .4s forwards;}
@-webkit-keyframes container-in {
    from {opacity:0; -webkit-transform:translate(0, 50px);}
    to {opacity:1; -webkit-transform:translate(0,0);}
}
@keyframes container-in {
    from {opacity:0; -webkit-transform:translate(0, 50px);}
    to {opacity:1; -webkit-transform:translate(0,0);}
}
.slide-bg {background:#313639;}

.news-pagination, .photos-pagination, .cases-pagination {position:absolute;}
.last {height:180px; background:#fff;}

.news-item {width:100%; height:100%; position:relative;}
.news-bg {width:100%; height:100%; position:absolute; top:0; left:0; z-index:1; background-size:cover; background-repeat:no-repeat; background-position:center center;}
.news-txt {width:90%; top:80px; position:absolute; left:5%; z-index:2; opacity:0; -webkit-transition:all .8s ease;}
.news-txt img {display:block; width:100%;}
.news-txt.in-left {-webkit-animation:news-in-left .8s ease forwards;}
.news-txt.in-right {-webkit-animation:news-in-right .8s ease forwards;}
@-webkit-keyframes news-in-left {
    from {opacity:0; -webkit-transform:translate(-30px,0px);}
    to {opacity:1; -webkit-transform:translate(0px,0px);}
}
@keyframes news-in-left {
    from {opacity:0; -webkit-transform:translate(-30px,0px);}
    to {opacity:1; -webkit-transform:translate(0px,0px);}
}
@-webkit-keyframes news-in-right {
    from {opacity:0; -webkit-transform:translate(30px,0px);}
    to {opacity:1; -webkit-transform:translate(0px,0px);}
}
@keyframes news-in-right {
    from {opacity:0; -webkit-transform:translate(30px,0px);}
    to {opacity:1; -webkit-transform:translate(0px,0px);}
}
.news-pagination, .cases-pagination {width:100%; text-align:center; z-index:2; line-height:20px; bottom:15px!important;}
.news-pagination .swiper-pagination-bullet, .cases-pagination .swiper-pagination-bullet {width:1px; height:9px; background:#fff; opacity:1; border-radius:0; -webkit-transition:all 1s ease; vertical-align:middle; margin:0 5px;}
.news-pagination .swiper-pagination-bullet-active, .cases-pagination .swiper-pagination-bullet-active {height:14px; background:#f3706f;}

.photos-bg {width:100%; height:100%; position:absolute; z-index:1; top:0; left:0; -webkit-transition:all .5s ease; opacity:0; overflow:hidden;}
.photos-bg.in {-webkit-animation:fade-in 1s 1s forwards;}
.photos-bg-item {width:100%; height:100%; position:absolute; top:0; left:0; background-repeat:no-repeat; background-position:center center; background-size:cover; opacity:0; z-index:1; -webkit-transition:all 1s ease;}
.photos-bg-item.in {z-index:2; opacity:1;}

.teams {padding:75px 30px 0;}
.about {padding-bottom:30px; border-bottom:.5px solid rgba(255,255,255,.3);}
.about-logo {width:110px; margin:auto;}
.about-logo img {width:100%; display:block;}
.marquee {width:100%; height:120px; color:#fff; margin:10px 0; overflow:hidden; -webkit-mask-image: -webkit-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 20%, rgba(0,0,0,1) 80%,rgba(0,0,0,0) 100%);}
.marquee-text {font-size:12px; line-height:18px; -webkit-animation:36s mqe linear infinite;}
@-webkit-keyframes mqe {
    from {-webkit-transform:translate(0, 0);}
    to {-webkit-transform:translate(0, -306px);}
}
@keyframes mqe {
    from {-webkit-transform:translate(0, 0);}
    to {-webkit-transform:translate(0, -306px);}
}
.about-btn {width:48px; height:24px; border-radius:5px; border:.5px solid #fff; background:url(../images/allQB/arrow_white.png) center center no-repeat; background-size:12px 8px; margin:auto;}
.about-btn a {display:block; width:100%; height:100%; text-indent:-999px; overflow:hidden;}

.galr-list {overflow:hidden; position:relative; width:100%; height:116px; margin-top:30px;}
.galr-item {position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; -webkit-transition:all .5s ease; z-index:1;}
.galr-item img {display:block; height:100%; margin:auto;}
.galr-item.in {opacity:1; z-index:2;}
.galr-tab {text-align:center; position:absolute; width:100%; bottom:20px; left:0;}
.galr-tab-item {display:inline-block; margin:0 6px; position:relative; padding-bottom:18px;}
.galr-tab-name {width:36px; height:36px; border:.5px solid #fff; border-radius:50%; text-align:center; line-height:36px; color:#fff; font-size:11px; position:relative; z-index:3; -webkit-transition:all .5s ease;}
.galr-tab-item.active .galr-tab-name {background:#d0615f; border:.5px solid transparent;}
.galr-tab-item.active .galr-tab-line, .galr-tab-item.active .galr-tab-ball {opacity:1;}
.galr-tab-line {width:.5px; background:#d0615f; height:19px; overflow:hidden; position:absolute; bottom:0; left:50%; -webkit-transform:translate(-50%, 0); z-index:1; opacity:0; -webkit-transition:all .5s ease;}
.galr-tab-ball {width:4.5px; height:4.5px; background:#d0615f; overflow:hidden; position:absolute; bottom:0; left:50%; -webkit-transform:translate(-50%, 0); z-index:2; border-radius:50%; opacity:0; -webkit-transition:all .5s ease;}

.cases-wrapper {width:88%; height:72%; position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%, -50%);}
.cases-line1, .cases-line2, .cases-line3, .cases-line4, .cases-line5, .cases-line6 {background:#fff; overflow:hidden; position:absolute; z-index:3;}
.cases-line1 {width:5px; height:100%; top:0; left:0;}
.cases-line2 {width:5px; height:100%; top:0; right:0;}
.cases-line3 {width:17%; height:5px; top:0; left:0;}
.cases-line4 {width:17%; height:5px; top:0; right:0;}
.cases-line5 {width:17%; height:5px; bottom:0; left:0;}
.cases-line6 {width:17%; height:5px; bottom:0; right:0;}
.case-bg {width:100%; height:100%; position:absolute; top:0; left:0; z-index:1;}
.cases-bg-item {width:100%; height:100%; position:absolute; top:0; left:0; opacity:0; background-repeat:no-repeat; background-position:center center; background-size:cover; -webkit-transition:all .5s ease;}
.cases-bg-item.active {opacity:1;}
.case-item {width:100%; height:100%; position:relative;}
.case-pic, .case-txt {width:100%; height:100%; position:absolute; top:0; left:0; z-index:1; background-repeat:no-repeat; background-position:center center; background-size:cover;}
.case-txt {z-index:2; opacity:0; -webkit-transition:all .8s ease; background-size:100%;}
.case-txt.in-left {-webkit-animation:news-in-left .8s ease forwards;}
.case-txt.in-right {-webkit-animation:news-in-right .8s ease forwards;}

.news-list {width:100%; height:100%; overflow:hidden; background:#313639;}
.news-list li {width:100%; height:30%; background-position:center; background-repeat:no-repeat; background-size:cover; -webkit-transform:scale(.4);}
.news-list li:nth-child(1) {height:40%;}
.news-list.in li:nth-child(1) {-webkit-animation:scale-in 1s forwards;}
.news-list.in li:nth-child(2) {-webkit-animation:scale-in 1s .1s forwards;}
.news-list.in li:nth-child(3) {-webkit-animation:scale-in 1s .2s forwards;}
.news-title {width:calc(100% - 20px); padding:0 10px; height:36px; line-height:36px; position:absolute; bottom:0; left:0; background:rgba(0,0,0,.65); color:#fff; font-size:12px; text-align:center; z-index:2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
@-webkit-keyframes scale-in {
    from {-webkit-transform:scale(.4);}
    to {-webkit-transform:scale(1);}
}
@keyframes scale-in {
    from {-webkit-transform:scale(.4);}
    to {-webkit-transform:scale(1);}
}

.joinus {width:100%; height:100%; position:relative; z-index:3; background-repeat:no-repeat; background-position:center center; background-size:cover;}
.joinus a {display:block; width:100%; height:100%; overflow:hidden; text-indent:-999em;}
.joinus-bg {width:100%; height:100%; position:absolute; z-index:1; top:0; left:0;}
.joinus-bg-pic {height:100%; display:block; position:absolute; top:0; left:0; -webkit-animation:join-bg 240s linear infinite;}
@-webkit-keyframes join-bg {
    0% {-webkit-transform:translate(0,0);}
    50% {-webkit-transform:translate(calc(-100% + 100vw),0);}
    100% {-webkit-transform:translate(0,0);}
}
@keyframes join-bg {
    0% {-webkit-transform:translate(0,0);}
    50% {-webkit-transform:translate(calc(-100% + 100vw),0);}
    100% {-webkit-transform:translate(0,0);}
}

.contact {background:#000; width:100%; height:100%;}
.socail {text-align:center; padding:45px 0 30px;}
.socail div {display:inline-block; margin:0 15px; width:52px; position:relative;}
.socail div img {width:100%; display:block;}
.weixin-pop {opacity:0; position:absolute; bottom:80px; left:50%; width:200px!important; margin-left:-100px; z-index:5; display:none;}
.weixin-pop.in {-webkit-animation:fade-in .6s forwards;}
.weixin-pop.out {-webkit-animation:fade-out .6s forwards;}
.copyright {font-size:12px; color:#fff; opacity:.7; text-align:center; line-height:18px;}
.copyright img {width:15px; display:inline-block; vertical-align:middle; margin-right:5px;}
.copyright a {color:#fff;}

/* Fix 屏幕高度不够的手机 */
@media all and (max-height:540px) {
    .fixScreen .news-txt {top:70px;}
    .fixScreen .teams {padding:65px 30px 0;}
    .fixScreen .about {padding-bottom:20px;}
    .fixScreen .galr-list {margin-top:10px;}
    .fixScreen .cases-wrapper {width:80%; height:76%;}
}
@media all and (min-height:720px) {
    .fixScreen .galr-list {margin-top:100px;}
}

/* 切换国家 by Ethan 2019-09-04 */
.lang-global {position:absolute; top:7px; right:60px; width:66px;}
.langs-select {width:100%; position:absolute; top:0; left:0; z-index:1000; font-size:16px; text-align:center; background:#fff; -webkit-transform:translate(0,-100%);}
.langs-select.in {-webkit-animation:lang-in .8s forwards;animation:lang-in .8s forwards;}
.langs-select.out {-webkit-animation:lang-out .8s forwards;animation:lang-out .8s forwards;}
@-webkit-keyframes lang-in {
    from {-webkit-transform:translate(0,-100%);}
    to {-webkit-transform:translate(0,0);}
}
@keyframes lang-in {
    from {-webkit-transform:translate(0,-100%);}
    to {-webkit-transform:translate(0,0);}
}
@-webkit-keyframes lang-out {
    from {-webkit-transform:translate(0,0);}
    to {-webkit-transform:translate(0,-100%);}
}
@keyframes lang-out {
    from {-webkit-transform:translate(0,0);}
    to {-webkit-transform:translate(0,-100%);}
}
.langs-close {position:absolute; top:20px; right:20px;}
.langs-close img {width:22px;}
.langs-head {line-height:70px; font-weight:bold; font-size:18px;}
.langs-list {padding-bottom:20px;}
.langs-list a {line-height:60px; display:block; text-decoration:none; color:#878a8b;}
.langs-list a:hover, .langs-list a:active {background:#f7f7f7;}