@charset "UTF-8";



/*header*/
header {
    z-index:99;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    transition: all .55s cubic-bezier(0.55, 0.75, 0.6, 1) 0s;
    -webkit-transition: all .55s cubic-bezier(0.55, 0.75, 0.6, 1) 0s;
    -moz-transition: all .55s cubic-bezier(0.55, 0.75, 0.6, 1) 0s;
}
header.active {
    transform: translateY(-130%);
    -webkit-transform: translateY(-130%);
    -moz-transform: translateY(-130%);
}

.header-inner { width:85%; margin: 0 auto;
   
}
header .logo {
    float:left; width:24%;
    padding-top:35px;
}
header .logo img{ max-width:100%;}
header .right-side {
    float:right; width:75%;
}
header nav,
.header-phone-number {float:left;}
header nav li {
    position:relative;
    float:left;
    margin-left:42px;
}
header nav li a {
    font-size:16px;
    color:#fff;
    line-height:128px;
}
header nav li a:after {
    content:'';
    bottom:40px;
    position:absolute;
    display:block;
    width:0;
    height:1px;
    background:#fff;
    transition:all .4s;
}
header nav li.on a:after,
header nav li a:hover:after {width:100%;}
.header-phone-number {
    margin-left:70px;
    font:normal 14px/128px 'gotham-medium';
    color:#fff;
}


















.index-banner {
    position:static;
    width:100%;
    height:100vh;
    overflow:hidden;
}
.index-banner .en {
    font-family:'gotham-medium';
}
.index-banner .swiper-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.index-banner .carousel-inner{
    position: absolute;
    top: -60px;
    right: 0;
    bottom: 0;
    left: 0;
    padding-top: 60px;
    overflow: hidden;
    /*cursor: -webkit-grab!important;*/
    /*cursor: grab!important;*/
}
.page-header-fullscreen-trame {
    position:absolute;
    left:-10%;
    top:-10%;
    width:120%;
    height:120%;

}

.index-banner .carousel-item {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 10;
    opacity:0;
    transition: .6s opacity cubic-bezier(.19,1,.22,1);
    cursor: move;
    touch-action: pan-y;
    user-select: none;
}
.index-banner .carousel-item.carousel-item-prev {
    transform-origin:center right;
    transform: translateX(-100%);
}
.index-banner .carousel-item.carousel-item-next {
    transform-origin:center right;
    transform: translateX(100%);
}
.index-banner .carousel-item:active {
    cursor: -webkit-grab!important;
    cursor: grab!important;
}
.index-banner .carousel-item.active {
    z-index: 15;
    opacity:1;
    transform-origin:center right;
}
.static .carousel-item {
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
    cursor: default !important
}

.static.is-mobile .carousel-item {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
    opacity: 0
}
.index-banner .carousel-item-inner {
    position: absolute;
    width: 100%;
    height: 100%;
}
.carousel-item-image-wrapper {
    position:relative;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.carousel-item-image-wrapper:before {
    z-index: 20
}

.carousel-item-image-wrapper:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: .2;
    background-color: #000;
    z-index: 8
}


.carousel-item-image {
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden
}

.carousel-item-image:before {
    opacity: .2;
    z-index: 20
}
.banner-background {
    position:absolute;
    left:0;
    top:0;
    width:100%;}
.carousel-item-image img {
    width: 100%;
    height:100%;
    max-width: none;
    z-index: 10
}
.index-banner .swiper-inner-text-wrap {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    text-align:center;
}
.carousel-item1 .page-header-fullscreen-text {
    background:rgba(0,0,0,.1);
}
.carousel-item .page-header-fullscreen-text{
    background: -moz-linear-gradient(left, rgba(23,9,49,.6) 0%, rgba(30,95,116,.6) 100%);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%,from(rgba(23,9,49,.6)), to(rgba(30,95,116,.6))));
    background: -webkit-linear-gradient(left, rgba(23,9,49,.6) 0%,rgba(30,95,116,.6) 100%);
    background: -o-linear-gradient(left, rgba(23,9,49,.6) 0%,rgba(30,95,116,.6) 100%);
    background: -ms-linear-gradient(left, rgba(23,9,49,.6) 0%,rgba(30,95,116,.6) 100%);
    background: linear-gradient(to right, rgba(23,9,49,.6) 0%,rgba(30,95,116,.6) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(23,9,49,.6)', endColorstr='rgba(30,95,116,.6)',GradientType=1 );
}
.poyuttt{
	 position:absolute;
    top:50%;
    left:25%; font-size:50px; margin: 0 auto;
   
    width:50%;
    color:#fff;
    line-height:1.3;
    transform:translateY(-50%);
    -moz-transform:translateY(-50%);
    -webkit-transform:translateY(-50%);
	
	}
.index-banner .swiper-inner-text {
    position:absolute;
    top:50%;
    left:12%;
    right:12%;
    width:auto;
    color:#fff;
    line-height:1.3;
    transform:translateY(-50%);
    -moz-transform:translateY(-50%);
    -webkit-transform:translateY(-50%);
}
.index-banner .carousel-item2 .swiper-inner-text {
   text-align:left;
}
.index-banner .carousel-item2 .cansual-title {
    font-size:48px;
    color:#fff;
}
.index-banner .cansual-line {
    width:0;
    height:3px;
    margin:25px 0 20px;
    background:#fff;
}
.index-banner .cansual-des {
    font-size:18px;
    color:#fff;
    line-height:1.8;
}
.index-banner .carousel-item3 .cansual-des {width:50%;margin-bottom:25px;}
.index-banner .carousel-item2 .cansual-des {
    text-align:left;
    font-size:38px;
}
.index-banner .carousel-item .cansual-title {
    margin-bottom:10px;
    font-size:48px;
    color:#fff;
    text-align:left;
}
.index-banner .carousel-item3 .cansual-item-title .en-word {
    display:block;
    padding-bottom:15px;
    font-family:'AkzidenzGrotesk-BoldCondAlt';
    font-size:84px;
    color:#fff;
    line-height:.9;
}
.index-banner .carousel-item4 .swiper-inner-text {
    padding-left:50%;
    text-align:left;
}
.index-banner .carousel-item4 .cansual-item-title {
    font-size:48px;
    color:#fff;
}
.index-banner .carousel-item3 .cansual-des {
    margin-bottom:35px;
}
.index-banner .cansual-item-title {
    position:relative;
    margin-bottom:15px;
}
.index-banner .cansual-item-title .small-title {
    display:block;
    margin-bottom:-10px;
    font-size:20px;
}
.index-banner .cansual-item-title .number {
    font:normal 180px/1 'AkzidenzGrotesk-BoldCondAlt';
    color:#fff;
}
.index-banner .carousel-item3 .cansual-item-title .number {
    padding-bottom:15px;
    font:normal 84px/1 'AkzidenzGrotesk-BoldCondAlt';
}
.index-banner .cansual-item-title .number .add-icon {
    font-size:60px;
    line-height:180px;
    vertical-align:40px;
}
.carousel-item-subtitle-line {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 32px;
    height: 1px;
    margin-left: -16px;
    background-color: rgba(255, 255, 255, .55);
    content: ''
}
.index-banner .cansual-item-title .small-title,
.index-banner .cansual-item-title .number,
.index-banner .cansual-sub-title,
.index-banner .carousel-item .cansual-des,
.index-banner .carousel-item .cansual-line,
.index-banner .carousel-item3 .cansual-title,
.index-banner .carousel-item3 .radiu-button {
    display:block;
    opacity: 0;
    transform: translate3d(0, 150%, 0);
    transition:all 1s;
    transition-delay:.2s;
    overflow:hidden;
}
.index-banner .carousel-item2 .cansual-des {
    transform: translate3d(150%, 0, 0);
}
.index-banner .carousel-item3 .cansual-des,
.index-banner .carousel-item3 .cansual-line,
.index-banner .carousel-item3 .cansual-title,
.index-banner .carousel-item3 .radiu-button {
    text-align:left;
    transform: translate3d(0, -150%, 0);
}
.index-banner .carousel-item .cansual-line {transition-delay:.2s;}
.index-banner .carousel-item3 .cansual-des {transition-delay:.4s;}
.index-banner .active .cansual-item-title .small-title,
.index-banner .active .cansual-item-title .number,
.index-banner .active .cansual-sub-title,
.index-banner .carousel-item.active .cansual-des,
.index-banner .carousel-item3.active .cansual-title,
.index-banner .carousel-item.active .cansual-line,
.index-banner .carousel-item3.active .radiu-button{
    opacity: 1;
    transform: none;
}
.index-banner .carousel-item2 .cansual-title{
    opacity:0;
    transform: matrix(1, 0, 0, 1, 0, -80);
    -webkit-transform: matrix(1, 0, 0, 1, 0, -80);
    -moz-transform: matrix(1, 0, 0, 1, 0, -80);
    transition: all 1000ms cubic-bezier(0.35, 0.85, 0.55, 1) 0.6s;
    -webkit-transition: all 1000ms cubic-bezier(0.35, 0.85, 0.55, 1) 0.6s;
    -moz-transition: all 1000ms cubic-bezier(0.35, 0.85, 0.55, 1) 0.6s;}
.index-banner .carousel-item2.active .cansual-title {
    opacity: 1;
    transform: matrix(1, 0, 0, 1, 0, 0);
    -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
    -moz-transform: matrix(1, 0, 0, 1, 0, 0);
}
.index-banner .carousel-item .cansual-line {
   width:45px;
}
.index-banner .carousel-item3 .radiu-button {color:#fff;text-align:center;border:1px solid #fff;background:transparent;}
.index-banner .carousel-item3 .radiu-button:hover {color:#333;background:#fff;}


.join-list .each-item .image-wrap:after,
.ourwork-list .each-item .image-wrap:after,
.solution-list .each-item .image-wrap:after{
    content:'';
    position:absolute;
    left:0;
    top:0;
    display:block;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.4);
    opacity:0;
    transition:all .6s ease-in-out;
}
.ourwork-list .each-item .image-wrap:after,
.solution-list .each-item .image-wrap:after {background:rgba(0,0,0,0);}
.about-wrap-second .each-item:hover .image-wrap:after ,
.about-wrap-four .each-item:hover .image-wrap:after ,
.about-page .each-item .image-wrap:hover:after,
.join-list .each-item:hover .image-wrap:after,
.ourwork-list .each-item:hover .image-wrap:after,
.solution-list .each-item:hover .image-wrap:after{opacity:1;}
.about-page .each-item img,
.join-list .each-item .image-wrap img{transition:all .4s ease-in-out;}
.about-wrap-second .each-item:hover .image-wrap img,
.about-page .each-item .image-wrap:hover img,
.join-list .each-item:hover .image-wrap img{
    transform:scale(1.05);
}

.join-list {padding:50px 0 65px;}
.join-list .each-item {
    position:relative;
    margin-bottom:15px;
    background:#fff;
    transition:all .5s;
}
.join-list .each-item:hover {box-shadow:0 0 25px rgba(0,0,0,.2);}
.join-list .each-item .text-wrap {
    float:left;
    width:42.5%;
}
.join-list .each-item .text-inner {
    padding:12%;
    line-height:1;
}
.join-list .each-item .text-inner .title {
    font:30px/1 'Gotham-Book','Microsoft Yahei';
    font-weight:bold;
    color:#333;
}
.join-list .each-item .text-inner .line {
    display:block;
    width:30px;
    height:3px;
    margin:25px 0;
    background:#d1d1d1;
}
.join-list .each-item .text-inner .descrition {
    font-size:16px;
    color:#333;
    line-height:30px;
}
.join-list .each-item .normal-more-wrap2 {
    position:absolute;
    bottom:12%;
}
.join-list .each-item .normal-more-wrap2:before {background:url(../images/more-icon.png) no-repeat center center;}
.join-list .each-item .normal-more-wrap2:hover:before {background:url(../images/more-icon1.png) no-repeat center center;}
.join-list .each-item .image-wrap {
    position:relative;
    float:left;
    width:57.5%;
    overflow:hidden;
}
.join-list .each-item:nth-child(2n+1) .image-wrap {float:right;}

.join-us-info-inner {position:relative;width:100%;height:100%;padding:4.75%;}
.join-us-info-inner .title-wrap {
    float:left;
    width:30%;
    color:#333;
}
.join-us-info-inner .title-wrap .title1 {
    font:36px/1 'gotham-medium';
    text-transform:uppercase;
}
.join-us-info-inner .title-wrap .line {
    display:block;
    width:40px;
    height:4px;
    margin:25px 0;
    background:#d1d1d1;
}
.join-us-info-inner .title-wrap .title2 {
    font-size:28px;
    font-weight:bold;
}
.join-us-info-inner .detail-wrap {
    margin-left:30%;
    width:420px;
    color:#333;
    line-height:1.8;
}
.join-us-info-inner .detail-wrap .infomation {
    margin-bottom:80px;
    font-size:20px;
}
.join-us-info-inner .detail-wrap .descrition {
    font-size:16px;
}
.join-us-info-inner .detail-wrap .descrition .title {
    font-size:20px;
    font-weight:bold;
}
.join-us-info-article-inner .back-wrap {
    z-index:2;
    position:absolute;
    left:4.75%;
    bottom:4.75%;
}
.join-us-info-article-inner .back-btn {display:block;}
.join-us-info-article-inner .back-wrap strong {
    display:block;
    margin-bottom:20px;
    font-size:14px;
    color:#666;
    writing-mode: tb-rl;
    line-height:50px;
}
.join-us-info-article-inner .back-wrap .icon {
    display:block;
    width:50px;
    height:50px;
    background:#0273b7 url(../images/more-icon1.png) no-repeat center center;
    border-radius:100%;
}
.join-us-info-article-inner .work-buttons-wrap .count {
    z-index:2;
    position:absolute;
    right:4.75%;
    bottom:4.75%;
}
.join-us-info-article-inner .work-buttons-wrap .count span,
.join-us-info-article-inner .work-buttons-wrap .count i{
    display:inline-block;
    font:24px/50px 'Gotham-Book';
    color:#333;
}
.join-us-info-article-inner .work-buttons-wrap .count span.current { font:36px/50px 'gotham-medium';}
.join-us-info-article-inner .work-buttons-wrap .count span.total,
.join-us-info-article-inner .work-buttons-wrap .count i {  color:#999;  }
.join-us-info-article-inner .work-buttons-wrap .prograss-bar {
    z-index:2;
    position:absolute;
    right:4.75%;
    top:4.75%;
}
.join-us-info-article-inner .work-buttons-wrap .iconfont {
    display:inline-block;
    width:50px;
    height:50px;
    margin-left:15px;
    border-radius:100%;
    -moz-border-radius:100%;
    -webkit-border-radius:100%;
}
.join-us-info-article-inner .work-buttons-wrap .prev {background:#333 url(../images/left-icon3a.png) no-repeat center center;}
.join-us-info-article-inner .work-buttons-wrap .next {background:#333 url(../images/right-icon3a.png) no-repeat center center;}


.solution-list .item-list {padding:70px 0 55px;margin-left:-1.25%;}
.solution-list .each-item {
    position:relative;
    float:left;
    width:23.7%;
    margin:0 0 1.75% 1.25%;
    background:#fff;
    /*overflow:hidden;*/
    transition: all .6s;
    -webkit-transition: all .6s;
}

.solution-list .each-item img{
	 transition: all .6s;
	 -webkit-transition: all .6s;
}

.solution-list .item-inner {z-index:1;position:relative;display:block;}
.solution-list .each-item .text-inner {
    padding:5%;
}
.solution-list .each-item .text-inner .title {
    font-size:18px;
    font-weight:bold;
    color: #333;
    white-space: nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
}
.solution-list .each-item .text-inner .descrition {
    height:44px;
    font-size:16px;
    color:#666;
    line-height:22px;
    overflow:hidden;
}


.solution-list .each-item .image-wrap {
    position:relative;
    overflow:hidden;
}
.ourwork-list .each-item:hover .image-wrap img,
.solution-list .each-item:hover .image-wrap img {
    transform:scale(1.025);
}
.solution-list .each-item .image-wrap:after{
    content:'';
    position:absolute;
    left:0;
    top:0;
    display:block;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.4);
    opacity:0;
    transition:all .6s ease-in-out;
}
.ourwork-list .each-item .image-wrap:after,
.solution-list .each-item .image-wrap:after {background:rgba(0,0,0,0);}
.about-wrap-second .each-item:hover .image-wrap:after ,
.about-wrap-four .each-item:hover .image-wrap:after ,
.about-page .each-item .image-wrap:hover:after,
.join-list .each-item:hover .image-wrap:after,
.ourwork-list .each-item:hover .image-wrap:after,
.solution-list .each-item:hover .image-wrap:after{opacity:1;}
.about-page .each-item img,
.join-list .each-item .image-wrap img{transition:all .4s ease-in-out;}
.about-wrap-second .each-item:hover .image-wrap img,
.about-page .each-item .image-wrap:hover img,
.join-list .each-item:hover .image-wrap img{
    transform:scale(1.05);
}

.solution-list .each-item:after,
.pay-list .each-item:after {
    position:absolute;
    left:0;
    top:0;
    content:'';
    display:block;
    width:100%;
    height:100%;
    background:#fff;
    transition:all .6s;
}
.solution-list .each-item:hover:after,
.pay-list .each-item:hover:after{
    box-shadow:0 15px 15px rgba(0,0,0,.1);
}
.solution-list .each-item .image-wrap:after {background:rgba(0,0,0,0);}