@charset "UTF-8";

@font-face { font-family:'AkzidenzGrotesk-BoldCondAlt'; src:url('../fonts/akzidenzgrotesk-boldcondalt.woff') format('woff'); font-weight: normal; font-style: normal;}

@font-face { font-family:'Gotham-Bold';src:url('../fonts/gotham-bold.woff') format('woff');font-weight: normal; font-style: normal;}

@font-face { font-family:'Gotham-Book'; src:url('../fonts/gotham-book.woff') format('woff');font-weight: normal; font-style: normal;}

@font-face { font-family:'gotham-medium'; src:url('../fonts/gotham-medium.woff') format('woff');font-weight: normal; font-style: normal;}



input,textarea,button{padding: 0;font-family: Verdana, Arial;}

h1,h2,h3,h4,h5,h6{font-weight: normal;}

img {border:0;}

input[type=submit],input[type=text],button {

    appearance:none;

    -moz-appearance:none;

    -webkit-appearance:none;

    border-radius:0;

    cursor:pointer;

}

input:focus,textarea:focus,button:focus,input:active {outline-color:transparent;border:0;}

input,select,textarea {

    vertical-align:middle;

    outline:none;

    -webkit-tap-highlight-color: transparent;

}

a {

    color:#333;

    -webkit-tap-highlight-color: transparent;

    -webkit-touch-callout: none;

    -webkit-user-select: none;

}

a:link{text-decoration:none;}

a:visited{text-decoration:none;}

a:hover{text-decoration:none;cursor:pointer;}

a:active{text-decoration:none;}

.hidden{display:none;visibility:hidden;}

.wrap{border: 0;padding:0;margin:0 auto;*zoom:1;}

.wrap:after{clear: both;content:"";display: table;}

.clear{clear:both;font-size:0;line-height:0;height:0;visibility:hidden;}

.clearfix:before, .clearfix:after {

    content:"";

    display:table;

}

.clearfix:after {

    clear:both;

}

.clearfix {

    zoom:1;

}

.wrap {

    padding:0 100px;

    margin:0 auto;

    position:relative;

}

@media (max-width:991px){

    .wrap {padding:0 4.5%;}

    .mc-hidden {display:none}

}

@media (min-width:990px){

    .lg-hidden1 {display:none}

}

@media (max-width:767px){

    .sm-hidden {display:none;}

}

@media (min-width:768px){

    .lg-hidden {display:none;}

}

.wrap:after,

.wrap:before,

.container:after,

.container:before{

    content:"";

    display:table;

}

.wrap:after,

.container:after {clear:both;}

.container {width:80%;margin:0 auto;}

@media (min-width:1300px){

    .container {width:1300px;}

}

@media (min-width:1450px){

    .container {width:1330px;}

}

@media (min-width:1530px){

    .container {width:1530px;}

}

@media (min-width:1450px) {

    .ourwork-page .container {width:88%;}

}

@media (max-width:991px){

    .container {width:91%;}

}

.clear {clear:both;}

.fl{float: left;}

.fr{float: right;}

.absolute { position: absolute;}

.pors{position: relative;}

.tl{text-align: left;}

.tc{text-align: center;}

.tr{text-align: right;}

.hide {opacity:0;}

.en {font-family:'gotham-medium';}

nav li,.index-banner li,.item-list li,.inner-tab li {list-style-type:none;}

input:-ms-input-placeholder,textarea:-ms-input-placeholder{color: #6f6f6f; }

input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color: #6f6f6f;}

/*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%);

}

@media (max-width:991px){

    header {display:none;}

}

.header-inner {

    padding:0 4.5%;

}

header .logo {

    float:left;

    padding-top:40px;

}

header .right-side {

    float:right;

}

header nav,

.header-phone-number {float:left;}

header nav li {

    position:relative;

    float:left;

    margin-left:31px;

}

header nav li a {

    font-size:14px;

    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:65px;

    font:normal 14px/128px 'gotham-medium';

    color:#fff;

}

@media (max-width:1175px) {

    .header-phone-number {display:none;}

}

/*total-nav*/

.navBar{

    z-index: 999;

    position: fixed;

    left: 0;

    top: 50%;

    width: 95px;

    height: 200px;

    margin-top: -100px;

    background-color: #222;

    cursor: pointer;

    overflow: hidden;

    transition: all .5s ease 0s;

    -webkit-transition: all .5s ease 0s;

    -moz-transition: all .5s ease 0s;

}

.navBar.visble {

    transform: translateX(-95px);

    -webkit-transform: translateX(-95px);

    -moz-transform: translateX(-95px);

}

.navBar.show { background-color: #339ec1;  }

.navBar.show.black {    transform: translateX(-95px);

    -webkit-transform: translateX(-95px);

    -moz-transform: translateX(-95px);}

.navBar.Bom{ top: 70%; background-color: #fff;}


.navBar .bar-logo{ position: absolute; right:25px; top: 28px; width: 44px;height:44px}

.navBar .bar-logo img:last-child {display:none}


.navBar .bar-menu{

    position: absolute;

    bottom:0;

    right:0;

    width:95px;

    height:95px;

    cursor:pointer;

}

.navBar .bar-menu i,

.fixed-menu .close-bar i{

    position: absolute;

    left: 37px;

    display: block;

    width: 22px;

    height: 2px;

    overflow:hidden;

}

.fixed-menu .close-bar i {width:35px;}

.navBar .bar-menu i.bar-left,

.navBar .bar-menu i.bar-right {background:transparent;}

.navBar .bar-menu i.bar-top{ bottom:56px;}

.navBar .bar-menu i.bar-cen{ bottom:49px;}

.navBar .bar-menu i.bar-bom{ bottom:42px;width:12px;}

.navBar .bar-menu i.bar-left,

.fixed-menu .close-bar i.bar-left{

    bottom:49px;

    -webkit-transform: rotateZ(45deg);

    transform: rotateZ(45deg);

}

.navBar .bar-menu i.bar-right,

.fixed-menu .close-bar i.bar-right{

    bottom:49px;

    -webkit-transform: rotateZ(-45deg);

    transform: rotateZ(-45deg);

}

.navBar .bar-menu i span,

.fixed-menu .close-bar i span{

    display: block;

    width: 100%;

    height: 100%;

    background: #FFF;

    transition: all .5s ease 0s;

    -webkit-transition: all .5s ease 0s;

    -moz-transition: all .5s ease 0s;

    transform-origin: center right;

    transform:scaleX(0);

}

.navBar .bar-menu i.bar-left span,

.navBar .bar-menu i.bar-right span,

.fixed-menu.active .close-bar span{

    transform:scaleX(1);

}

.navBar.show .bar-menu i.bar-top span,

.navBar.show .bar-menu i.bar-cen span,

.navBar.show .bar-menu i.bar-bom span{

    transform:scaleX(1);

}

.navBar.show .bar-menu i.bar-left span,

.navBar.show .bar-menu i.bar-right span{

    transform:scaleX(0);

}

.body-bg{ position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: -2; visibility: hidden; opacity: 0;

    background-color: rgba(0,0,0,0.4);

    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4c000000,endColorstr=#4c000000);

    transition: all 0.4s cubic-bezier(0.63, 0.1, 0.08, 1.01) 0s;

    -webkit-transition: all 0.4s cubic-bezier(0.63, 0.1, 0.08, 1.01) 0s;

    -moz-transition: all 0.4s cubic-bezier(0.63, 0.1, 0.08, 1.01) 0s;

}

.body-bg.active{ visibility: visible; opacity: 1; z-index: 997;}

.fixed-menu{ position: fixed; left: 0; top: 0; height:100%; z-index: 998;

    transform: translateX(-560px);

    -webkit-transform: translateX(-560px);

    -moz-transform: translateX(-560px);

    transition: all .3s cubic-bezier(0.66, 0.53, 0.65, 1) 0s;

    -webkit-transition: all .3s cubic-bezier(0.66, 0.53, 0.65, 1) 0s;

    -moz-transition: all .3s cubic-bezier(0.66, 0.53, 0.65, 1) 0s;

}

.fixed-menu.active{

    transform:matrix(1,0,0,1,0,0);

    transform: translateX(0px);

    -webkit-transform: translateX(0px);

    -moz-transform: translateX(0px);

    transition: all .8s cubic-bezier(0.3, 0.8, 0.3, 1) 0.3s;

    -webkit-transition: all .8s cubic-bezier(0.3, 0.8, 0.3, 1) 0.3s;

    -moz-transition: all .8s cubic-bezier(0.3, 0.8, 0.3, 1) 0.3s;

}

.fixed-menu.on {

    transform: translateX(-550px);

    -webkit-transform: translateX(-550px);

    -moz-transform: translateX(-550px);

}

.fixed-menu .close-bar {display:none;}


.fixed-menu .sub-menu-phone{ position: absolute; left: 0; top: 0; width: 560px; height: 100%; background-color: #222; padding:120px 30px 0 30px;

    box-sizing: border-box;

    -moz-box-sizing: border-box;

    transition: all .5s cubic-bezier(0.66, 0.53, 0.65, 1) .1s;

    -webkit-transition: all .5s cubic-bezier(0.66, 0.53, 0.65, 1) .1s;

    -moz-transition: all .5s cubic-bezier(0.66, 0.53, 0.65, 1) .1s;

}

.fixed-menu .sub-menu-phone ul{ position:absolute;top:50%;width:100%;transform:translateY(-50%);}

.fixed-menu .sub-menu-phone ul li{ display: table; width: 100%; position: relative;}

.fixed-menu .sub-menu-phone ul li a{

    float:right;overflow:hidden;display:block;width:330px;height:56px;line-height:55px;position:relative;

    opacity: 0;

    transform: translateY(50px);

    -webkit-transform: translateY(50px);

    -moz-transform: translateY(50px);

    transition: all 0s ease-in-out 0.3s;

    -webkit-transition: all 0s ease-in-out 0.3s;

    -moz-transition: all 0s ease-in-out 0.3s

}

.fixed-menu .sub-menu-phone ul li:nth-of-type(1) a{

    transition: all 0.3s ease-in-out 0.8s;

    -webkit-transition: all 0.3s ease-in-out 0.8s;

    -moz-transition: all 0.3s ease-in-out 0.8s;

}

.fixed-menu .sub-menu-phone ul li:nth-of-type(2) a{

    transition: all 0.3s ease-in-out 0.9s;

    -webkit-transition: all 0.3s ease-in-out 0.9s;

    -moz-transition: all 0.3s ease-in-out 0.9s;

}

.fixed-menu .sub-menu-phone ul li:nth-of-type(3) a{

    transition: all 0.3s ease-in-out 1s;

    -webkit-transition: all 0.3s ease-in-out 1s;

    -moz-transition: all 0.3s ease-in-out 1s;

}

.fixed-menu .sub-menu-phone ul li:nth-of-type(4) a{

    transition: all 0.3s ease-in-out 1.1s;

    -webkit-transition: all 0.3s ease-in-out 1.1s;

    -moz-transition: all 0.3s ease-in-out 1.1s;

}

.fixed-menu .sub-menu-phone ul li:nth-of-type(5) a{

    transition: all 0.3s ease-in-out 1.2s;

    -webkit-transition: all 0.3s ease-in-out 1.2s;

    -moz-transition: all 0.3s ease-in-out 1.2s;

}

.fixed-menu .sub-menu-phone ul li:nth-of-type(6) a{

    transition: all 0.3s ease-in-out 1.3s;

    -webkit-transition: all 0.3s ease-in-out 1.3s;

    -moz-transition: all 0.3s ease-in-out 1.3s;

}

.fixed-menu .sub-menu-phone ul li:nth-of-type(7) a{

    transition: all 0.3s ease-in-out 1.4s;

    -webkit-transition: all 0.3s ease-in-out 1.4s;

    -moz-transition: all 0.3s ease-in-out 1.4s;

}

.fixed-menu .sub-menu-phone.active ul li a{

    transform: translateY(0px);

    -webkit-transform: translateY(0px);

    -moz-transform: translateY(0px);

    opacity: 1;

}

.fixed-menu .sub-menu-phone ul li a:after{display:none;width:0px;height:1px;background-color:#575857;position:absolute;content:'';left:0px;top:28px;}

.fixed-menu .sub-menu-phone ul li a font{display:block;font-size:28px;color:#fff;position:absolute;left:0;overflow:hidden;text-transform:capitalize;line-height:58px;}

.fixed-menu .sub-menu-phone ul li a small{font-family:'gotham-medium';font-size:32px;color:#999;text-transform:capitalize;position:absolute;left:0;line-height:64px;}

.fixed-menu .sub-menu-phone ul li a:after,.fixed-menu .sub-menu-phone ul li a font,.fixed-menu .sub-menu-phone ul li a small{transition:all .5s ease 0s;-webkit-transition:all .5s ease 0s;-moz-transition:all .5s ease 0s;}

.fixed-menu .sub-menu-phone .phone-wrap {position:absolute;left:200px;bottom:60px;padding-left:30px;}

.fixed-menu .sub-menu-phone .phone-wrap .label {

    display:block;

    font-size:14px;

    color:#fff;

    text-transform:uppercase;

    opacity:.5;

}

.fixed-menu .sub-menu-phone .phone-wrap .phone a{

    font-size:18px;

    font:18px/1.5 'Gotham-Book';

    color:#fff;

}

.js-container {

    position: relative;

    overflow-x: hidden;

    overflow-y: auto;

    -webkit-overflow-scrolling: touch;

    overflow-scrolling: touch;

    transition: all .3s cubic-bezier(0.66, 0.53, 0.65, 1) 0s;

    -webkit-transition: all .3s cubic-bezier(0.66, 0.53, 0.65, 1) 0s;

    -moz-transition: all .3s cubic-bezier(0.66, 0.53, 0.65, 1) 0s;

}

.js-container.active {

    transform:translateX(560px);

    -webkit-transform: translateX(560px);

    -moz-transform: translateX(560px);

    transition: all .8s cubic-bezier(0.3, 0.8, 0.3, 1) 0.3s;

    -webkit-transition: all .8s cubic-bezier(0.3, 0.8, 0.3, 1) 0.3s;

    -moz-transition: all .8s cubic-bezier(0.3, 0.8, 0.3, 1) 0.3s;

}

/*.js-container.on {*/

    /*transform: translateX(10px);*/

    /*-webkit-transform: translateX(10px);*/

    /*-moz-transform: translateX(10px);*/

/*}*/

@media (max-width:1400px){

    .navBar {width:60px;height:170px;}

    .navBar .bar-logo {right:14px;width:35px;height:35px;}

    .navBar .bar-logo img:first-child {max-width:100%;}

    .navBar .bar-menu {width:60px;height:70px;}

    .navBar .bar-menu i {left:18px;}

    .navBar .bar-menu i.bar-top{ bottom:44px;}

    .navBar .bar-menu i.bar-cen{ bottom:37px;}

    .navBar .bar-menu i.bar-bom{ bottom:30px;}

    .navBar .bar-menu i.bar-left,

    .fixed-menu .close-bar i.bar-left,

    .navBar .bar-menu i.bar-right,

    .fixed-menu .close-bar i.bar-right{  bottom:37px;  }

    .fixed-menu .sub-menu-phone {padding:0 30px;}

    .fixed-menu .sub-menu-phone ul li a font {font-size:26px;}

    .fixed-menu .sub-menu-phone ul li a small {font-size:28px;}

}

@media (max-width:991px){

    .navBar {transform: translateX(0px);

        -webkit-transform: translateX(0px);

        -moz-transform: translateX(0px);

        top: 0;

        margin-top: auto;

        width: 100%;

        height: 60px;

        background-color: #fff;}

    .navBar.show {background:#fff;}

    .navBar.visble {transform: translateX(0px);

        -webkit-transform: translateX(0px);

        -moz-transform: translateX(0px);}

    .serviceNavBarWrap .navBar.show,.serviceNavBarWrap .navBar {background:#0e0e0e;}

    .serviceNavBarWrap .navBar .bar-menu i span {background: #fff;}

}

@media (max-width:991px){

    .navBar .bar-logo {top:13px;left:4.5%; width:auto;height:34px;}

    .navBar .bar-logo img:first-child {display:none}

    .navBar .bar-logo img:last-child {display:block;width:auto;height:100%;}

    .navBar .bar-menu {z-index:1001;position:fixed;right:4.5%;width:60px;height:60px;}

    .navBar .bar-menu i span {background:#333;}

    .navBar .bar-menu.active i span {background:#fff;}

    .navBar .bar-menu i.bar-top {bottom:35px;}

    .navBar .bar-menu i.bar-cen,

    .navBar .bar-menu i.bar-left,

    .navBar .bar-menu i.bar-right{  bottom: 30px;  }

    .navBar .bar-menu i.bar-bom {  bottom: 25px;  width: 22px;  }

    .fixed-menu {z-index:999;left:auto;right:0;width:80%;transform: translateX(100%);

        -webkit-transform: translateX(100%);

        -moz-transform: translateX(100%);}

    .fixed-menu .close-bar {    z-index: 1001;  position: fixed;top:10px;  right: 10px; display:block; width: 60px;  height: 60px;cursor:pointer;}

    .fixed-menu .close-bar i.bar-right,

    .fixed-menu .close-bar i.bar-left {left:15px;bottom:30px;}

    .fixed-menu .sub-menu-phone {left:auto;right:0;width:100%;}

    .fixed-menu .sub-menu-phone ul {top:45%;width:100%;padding:0 30px;}

    .fixed-menu .sub-menu-phone .phone-wrap {left:auto;}

    .fixed-menu .sub-menu-phone .phone-wrap .phone a{font-size:18px;}

    .js-container.active {transform: translateX(-80%);

        -webkit-transform: translateX(-80%);

        -moz-transform: translateX(-80%);}

}

/*footer*/



footer .wrap {width:1345px;padding:0;}

.top-footer {

    padding:60px 0 160px;

}

.top-footer .logo {

    float:left;

    /*width:25%;*/

}

.top-footer .bottom-item-wrap {

    float:left;

    /*width:75%;*/

}

.top-footer .each-item {

    float:left;

    /*width:33.33%;*/

}

@media(min-width:1366px){

    .top-footer .logo {width:315px;}

    .top-footer .bottom-item-wrap {width:100%;}

    .top-footer .each-item {width:350px}

    .top-footer .each-item.code-item {width:250px;}

}

.top-footer .each-item dl {

    width:250px;

}

.top-footer .each-item dt {

    padding-bottom:25px;

    margin-bottom:15px;

    font:normal 14px/1 '微软雅黑';

    color:#fff;

    border-bottom:1px solid #282828;

}

.top-footer .each-item .word {

    font-size:14px;

    color:rgba(255,255,255,.5);

    transition:all .5s ease-in-out;

}

.top-footer .each-item .word  a{

    font-size:14px;

    color:rgba(255,255,255,.5);

}

.top-footer .each-item a.word:hover {color:rgba(255,255,255,.7);}

.top-footer .contact-item .word {

    display:block;

    padding:5px 0;

}

.top-footer .address-item dd {

    margin:0 0 20px 10px;

    padding-left:40px;

}

.top-footer .address-item .address {

    line-height:20px;

    background:url(../images/footer-icon1-1.png) no-repeat left center;

}

.top-footer .address-item .phone-number {

    line-height:24px;

    background:url(../images/footer-icon1-2.png) no-repeat left center;

}

.top-footer .code-wrap {

    padding:5px 0;

}

footer .copyright {

    padding:35px 0;

    font-size:12px;

    color:rgba(255,255,255,.2);

    text-align:center;

}

footer .friend-links {


}

footer .friend-links .item-list {

    padding:35px 0;

    border-top:1px solid rgba(255,255,255,.1);

}

footer .friend-link-button-wrap strong {

    display:inline-block;

    width:88px;

    height:24px;

    margin-bottom:15px;

    font-weight:normal;

    color: rgba(255,255,255,.2);

    line-height:24px;

    text-align:center;

    border:1px solid rgba(255,255,255,.2);

    border-radius:2px;

}

footer .friend-links.active {transform:translateY(0);}

footer .friend-links li {

    display:inline-block;

    margin:0 25px 10px 0;

}

footer .friend-links li a {

    font-size:12px;

    color:rgba(255,255,255,.2);

    transition:all .5s ease-in-out;

}

footer .friend-links li a:hover {color:rgba(255,255,255,.5);}

@media(max-width:1400px){

    footer .wrap {width:91%;}

    .top-footer {padding:60px 0;}

    .top-footer .logo {width:23%;}

    .top-footer .bottom-item-wrap {width:100%;}

    .top-footer .each-item {width:25%}

    .top-footer .each-item.code-item {width:25%;}

    footer .copyright {padding:0 0 30px;}

}

.fixed-contact-wrap {

    z-index:999;

    position:fixed;

    right:30px;

    top:75%;

    width:60px;

    margin-top:-90px;

    overflow:hidden;

    border-radius:30px;

    opacity:0;

    transition:all .4s;

    transform: translateX(95px);

    -webkit-transform: translateX(95px);

    -moz-transform: translateX(95px);


}

.fixed-contact-wrap.show{  transform:none; opacity:1; }

.fixed-contact-wrap.active {width:215px;}

.fixed-contact-wrap li {

    position:relative;

    height:60px;

    background:#222;

    overflow:hidden;

}

.fixed-contact-wrap.active li {overflow:inherit;}

.fixed-contact-wrap li a {position:relative;z-index:1000;display:block;}

.fixed-contact-wrap li i {

    z-index:1000;

    position:absolute;

    right:0;

    display:block;

    width:60px;

    height:60px;

    transition:all .4s;

}

.fixed-contact-wrap.active li:after {

    z-index:1001;

    content:'';

    position:absolute;

    bottom:0;

    left:50%;

    display:block;

    width:80%;

    height:1px;

    margin-left:-40%;

    background:rgba(255,255,255,.1);

}

.fixed-contact-wrap.active li:last-child:after {display:none;}

.fixed-contact-wrap li:hover i,.fixed-contact-wrap li:hover strong{opacity:.5;}

.fixed-contact-wrap .phone i {

    background:#222 url(../images/fix-icon1.png) no-repeat center center;

    border-top-left-radius:30px;

    -moz-border-top-left-radius:30px;

    -webkit-border-top-left-radius:30px;

    border-top-right-radius:30px;

    -moz-border-top-right-radius:30px;

    -webkit-border-top-right-radius:30px;

}

.fixed-contact-wrap .qq i {background:#222 url(../images/fix-icon2.png) no-repeat center center;}

.fixed-contact-wrap .back-top i {  background:#222 url(../images/fix-icon3.png) no-repeat center center;  }

.fixed-contact-wrap.active .back-top i {

    border-bottom-left-radius:0;

    -moz-border-bottom-left-radius:0;

    -webkit-border-bottom-left-radius:0;

}

.fixed-contact-wrap li strong {

    position:absolute;

    top:0;

    right:-135px;

    display:block;

    width:115px;

    padding:0 15px 0 30px;

    font:normal 16px/60px 'gotham-medium';

    color:#fff;

    background:#222;

    white-space:nowrap;

    transition:all .4s;

}

.fixed-contact-wrap.active li strong {

    right:60px;

}

.fixed-contact-wrap.black li {background:#111;}

.fixed-contact-wrap.black li strong {background:#111;}

.fixed-contact-wrap.black .phone i {background:#111 url(../images/fix-icon1.png) no-repeat center center;}

.fixed-contact-wrap.black .qq i {background:#111 url(../images/fix-icon2.png) no-repeat center center;}

.fixed-contact-wrap.black .back-top i {  background:#111 url(../images/fix-icon3.png) no-repeat center center;  }

@media(max-width:1400px){

    .fixed-contact-wrap {right:15px;width:50px;border-radius:25px;}

    .fixed-contact-wrap.active {width:200px;}

    .fixed-contact-wrap li {height:50px;}

    .fixed-contact-wrap li i {width:50px;height:50px;}

    .fixed-contact-wrap li strong {right:-120px;width:100px;padding:0 15px 0 20px;font:normal 14px/50px 'gotham-medium';}

    .fixed-contact-wrap.active li strong {right:50px;}

}

@media(max-width:1300px){

    .top-footer .logo {width:15%;}

    .top-footer .logo img {width:80px;}

    .top-footer .bottom-item-wrap {width:100%;}

    .top-footer .each-item dl {width:95%;padding-right:5%;}

}

.mb15 {margin-bottom:1%;}

.normal-more-wrap2 {

    position:relative;

    display:inline-block;

    width:50px;

    height:50px;

    overflow:hidden;

    border-radius:100%;

}

.normal-more-wrap2:before {

    z-index:1;

    content:'';

    position:absolute;

    left:0;

    top:0;

    display:block;

    width:100%;

    height:100%;

    border:2px solid #333;

    background:url(../images/more-icon1.png) no-repeat center center;

    border-radius:100%;

    box-sizing:border-box;

}

.normal-more-wrap2:hover:before {background:url(../images/more-icon2.png) no-repeat center center;}

.normal-more-wrap2:after {

    z-index:0;

    content:'';

    position:absolute;

    left:0;

    top:0;

    display:block;

    width:100%;

    height:100%;

    background:#333;

    transition:all .4s;

    border-radius:100%;

    transform-origin:center center;

    transform:scale(0);

}

.normal-more-wrap2:hover:after {

    transform:scale(1);

}

.normal-more-wrap3 {

    position:relative;

    display:block;

    width:150px;

    height:50px;

    font-size:14px;

    text-align:center;

    overflow:hidden;

    border-radius:50px;

    border:2px solid #fff;

    transition:all .4s ease-in-out;

}

.normal-more-wrap3:hover {

    background:#fff;

}

.normal-more-wrap3 .more {

    display:block;

    z-index:1;

    position:relative;

    color:#fff;

    line-height:50px;

}

.normal-more-wrap3:hover .more {color:#333;}

.page-wrap .page {

    float:left;

    padding:15px 30px;

    background:#fff;

    border-radius:30px;

}

.page-wrap .page a {

    display:inline-block;

    width:30px;

    height:30px;

    margin:0 5px;

    font:14px/30px 'Gotham-Book';

    color:#666;

    text-align:center;

    border-radius:15px;

    transition:all .4s ease-in-out;

}

.page-wrap .page a.on,.page-wrap .page a:hover {color:#fff;background:#339ec1;}

.page-wrap .prev-next {float:right;}

.page-wrap .prev-next a {

    position:relative;

    display:inline-block;

    width:50px;

    height:50px;

    margin-left:20px;

    background:#fff;

    border-radius:25px;

}

.page-wrap .prev-next a:before,

.page-wrap .prev-next a:after,

.ourwork-prev-next-inner a i:before,

.ourwork-prev-next-inner a i:after{

    content:'';

    position:absolute;

    left:0;

    top:0;

    display:block;

    width:100%;

    height:100%;

    border-radius:100%;

    transition:all .4s ease-in-out;

}

.page-wrap .prev-next a:before,

.ourwork-prev-next-inner a i:before{z-index:1;}

.page-wrap .prev-next a.prev:before {background:#fff url(../images/more-icon3a.png) no-repeat center center;}

.page-wrap .prev-next a.next:before {background:#fff url(../images/more-icon.png) no-repeat center center;}

.page-wrap .prev-next a.prev:hover:before {background:transparent url(../images/more-icon3.png) no-repeat center center;}

.page-wrap .prev-next a.next:hover:before {background:transparent url(../images/more-icon1.png) no-repeat center center;}

.ourwork-prev-next-inner a i:after,

.page-wrap .prev-next a:after {transform:scale(0);}

.page-wrap .prev-next a:after {  background:#333;  }

.page-wrap .prev-next a:hover:after,

.ourwork-prev-next-inner a i:hover:after{

    transform:scale(1);

}

.dialog {

    z-index:1000;

    position:fixed;

    left:0;

    top:0;

    width:100%;

    height:100%;

}

.dialog-bg {

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:100%;

    background:rgba(0,0,0,.6);

}

.dialog-content {

    z-index:1111;

    position:absolute;

    top:50%;

    left:50%;

    margin-left:-292.5px;

    margin-top:-230px;

}

.dialog-content .close {

    position:absolute;

    right:35px;

    top:25px;

    display:block;

    width:18px;

    height:18px;

    background:url(../images/close.png) no-repeat center center;

    cursor:pointer;

}

.price-page-wrap {

    width:585px;

    background:rgba(34,34,34,.95);

}

.price-page-inner {

    padding:65px 70px 50px;

}

.price-page-inner .title {

    margin-bottom:40px;

    font-size:24px;

    color:#fff;

    text-align:center;

}

.price-page-inner .each-input {

    height:50px;

    margin-bottom:10px;

    border-bottom:1px solid #333;

}

.price-page-inner .label-wrap {

    float:left;

    width:50px;

    font-size:14px;

    color:#666;

    line-height:50px;

}

.price-page-inner .input-wrap {

    margin-left:50px;

}

.price-page-inner .input-wrap .input-text {

    width:100%;

    height:50px;

    font-size:14px;

    line-height:50px;

    color:#666;

    background:transparent;

}

.price-page-inner .submit-wrap {

    margin-top:50px;

    text-align:center;

}

.price-page-inner .input-submit {

    width:160px;

    height:58px;

    font-size:16px;

    color:#fff;

    text-align:center;

    line-height:54px;

    background:transparent;

    border:2px solid #fff;

    border-radius:58px;

    transition:all .4s ease-in-out;

}

.price-page-inner .input-submit:hover {

    color:rgba(34,34,34,.95);

    background:#fff;

}

footer .wrap .gotop {

        display:none;

    }

@media (max-width:991px){

    .top-footer {padding:3rem 0;}

    .top-footer .bottom-item-wrap {float:none;width:100%;}

    .top-footer .logo {float:none;width:auto;}

    .top-footer .each-item {float:none;width:100%;margin-top:3rem;padding-bottom:1rem;}

    .top-footer .each-item dl {width:100%;}

    .top-footer .address-item dd {padding-left:25px;margin:0 0 20px 0;}

    .top-footer .each-item.code-item {display:none;}

    footer .friend-link-button-wrap {display:none;}

    footer .wrap {

        position:relative;

    }

    footer .copyright {

        text-align:left;

    }

    footer .wrap .gotop {

        position:absolute;

        width:35px;

        height:35px;

        right:6%;

        top:-8px;

        display:block;

    }

        footer .wrap .gotop img {

            width:100%;

        }

    .fixed-contact-wrap li.qq,.fixed-contact-wrap li.phone {display:none;}

    .fixed-contact-wrap li:hover {overflow:hidden;}

    .fixed-contact-wrap li:last-child {position:fixed;bottom:4.5%;right:4.5%;border-radius:100%;}

    .fixed-contact-wrap li i {width:35px;height:35px;}

    .fixed-contact-wrap .back-top i {background-size:12px 12px;}

}

@media (max-width:768px){

    .fixed-menu .sub-menu-phone ul li a font,

    .fixed-menu .sub-menu-phone ul li a small {font-size:24px;}

    .normal-more-wrap2 {width:35px;height:35px;border:1px solid #fff;}

    .normal-more-wrap2:before,.normal-more-wrap2:after {width:33px;height:33px;}

    .normal-more-wrap3 {width:100px;height:35px;font-size:12px;line-height:35px;}

    .normal-more-wrap3:before {border:1px solid #fff;}

    .normal-more-wrap3 .more {line-height:38px;}

    .dialog-content {width:100%;margin-left:-45.5%;}

    .price-page-wrap {width:91%;}

    .price-page-inner {width:100%;padding:7% 5%;}

    .price-page-inner .title {font-size:18px;margin-bottom:10px;}

    .price-page-inner .input-submit {width:130px;height:40px;font-size:14px;line-height:40px;border:1px solid #fff;}

}

.index-banner { margin-top:0px;

    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%;


}

@media (min-width: 768px) {

    .index-banner .carousel-inner{

        position: absolute;

        top: 0;

        padding-top: 0;}


}

.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 .video-inner {

    height: 100%;

    overflow: hidden;

    position: absolute;

    top: 0;

    right: 0;

    bottom: 0;

    left: 50%;

    z-index: 8;

    width: 2560px;

    margin-left: -1280px;

    background-color: #fff;

    text-align: center;

}

.index-banner .carousel-item .video video {

    position:relative;

    display: inline-block;

    vertical-align: baseline;

}

.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

}


@media (min-width: 768px) {

    .carousel-item-image-wrapper:after {

        content: none

    }

}


.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 {

    position:relative;

    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(0,43,91,.6) 0%, rgba(0,43,92,.6) 100%);

    background: -webkit-gradient(linear, 0% 0%, 0% 100%,from(rgba(0,43,91,.6)), to(rgba(0,43,92,.6))));

    background: -webkit-linear-gradient(left, rgba(0,43,91,.6) 0%,rgba(0,43,92,.6) 100%);

    background: -o-linear-gradient(left, rgba(0,43,91,.6) 0%,rgba(0,43,92,.6) 100%);

    background: -ms-linear-gradient(left, rgba(0,43,91,.6) 0%,rgba(0,43,92,.6) 100%);

    background: linear-gradient(to right, rgba(0,0,0,.3) 0%,rgba(0,0,0,.3) 100%);

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(0,0,0,.6)', endColorstr='rgba(0,0,0,.6)',GradientType=1 );

}

.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:26px;

}

.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 { font-family: AkzidenzGrotesk-BoldCondAlt;

 

    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;}


@media (min-width: 768px) {

    .carousel-item-subtitle-line {

        width: 599px;

        margin-left: -300px

    }

}


@media (min-width: 1300px) {

    .carousel-item-subtitle-line {

        width: 799px;

        margin-left: -400px

    }

}


.carousel-item-subtitle-line-timer {

    position: absolute;

    top: 0;

    left: 0;

    background-color: #fff;

    display: block;

    height: 100%;

    -webkit-transform-origin: left;

    -ms-transform-origin: left;

    transform-origin: left;

}

.active .carousel-item-subtitle-line-timer {

    animation:linewidth 19s;

    -moz-animation:linewidth 19s;

    -webkit-animation:linewidth 19s;

    -o-animation:linewidth 19s;

    animation-delay:1s;

    -webkit-animation-delay:1s;

}

@keyframes linewidth

{

    from {width:0;}

    to {width:100%;}

}


@-moz-keyframes linewidth

{

    from {width:0;}

    to {width:100%;}

}


@-webkit-keyframes linewidth

{

    from {width:0;}

    to {width:100%;}

}


@-o-keyframes linewidth

{

    from {width:0;}

    to {width:100%;}

}

.page-header-fullscreen-text{

    position: absolute;

    top: 50%;

    right: 0;

    left: 0;

    text-align: center;

    z-index: 25

}


.collapsing .page-header-fullscreen-text {

    transition: .8s -webkit-transform cubic-bezier(.19, 1, .22, 1);

    transition: .8s transform cubic-bezier(.19, 1, .22, 1)

}


@media (min-width: 768px) {

    .page-header-fullscreen-text {

        padding-top: 100px;

        -webkit-transform: none;

        -ms-transform: none;

        transform: none

    }


    .page-header-fullscreen-text:before {

        position: absolute;

        display: block;

        content: "";

        width: 0;

        height: 0;

        background-color: transparent;

        border-radius: 100px;

        box-shadow: 0 0 157px 142px rgba(0, 0, 0, .17);

        left: 50%;

        top: 50%

    }

}


@media (min-width: 768px) and (max-height: 750px) {

    /*.page-header-fullscreen-text {*/

    /*bottom: 150px*/

    /*}*/

}


@media (min-width: 768px) and (min-height: 900px) {

    /*.page-header-fullscreen-text {*/

    /*bottom: 250px*/

    /*}*/

}


.index-banner .cansual-sub-title span {

    display:block;

    font-size:20px;

    line-height:32px;

}

.page-header-bar {

    position: absolute;

    right: 0;

    left:0;

    bottom: 0;

    height: 80px;

    line-height: 80px;

    z-index: 55;

    transform-origin: bottom;

    -webkit-transform-origin: bottom;

    -moz-transform-origin: bottom;

    transform: rotateX(0deg) translate3d(0,0,0);

    -webkit-transform: rotateX(0deg) translate3d(0,0,0);

    -moz-transform: rotateX(0deg) translate3d(0,0,0);

    transition: all .65s cubic-bezier(0.55,0.65,0.55,1) 0s;

    -webkit-transition: all .65s cubic-bezier(0.55,0.65,0.55,1) 0s;

    -moz-transition: all .65s cubic-bezier(0.55,0.65,0.55,1) 0s;

}

.page-header-bar.active {

    transform: rotateX(90deg) translate3d(0,0,0);

    -webkit-transform: rotateX(90deg) translate3d(0,0,0);

    -moz-transform: rotateX(90deg) translate3d(0,0,0);

}

@media (min-width: 768px) {

    .page-header-collapsed .page-header-bar {

        visibility: hidden;

        transition: none

    }


    .page-header-bar:after {

        content: "";

        position: absolute;

        left: 0;

        bottom: -70px;

        height: 70px;

        width: 100%;

        background-color: #fff

    }


    .page-header-bar-hidden .page-header-bar:after, .static.home .page-header-bar:after {

        transition: visibility .4s steps(1, end);

        visibility: hidden

    }


    .no-transition .page-header-bar:after {

        transition: none

    }


    .page-header-collapsed .page-header-bar:after {

        visibility: hidden;

        transition: none

    }

}


@media (min-width: 1300px) {

    .page-header-bar {

        height: 80px;

        line-height: 100px;

        margin-top: -80px;

    }

}


.page-header-bar-inner {

    transition: -webkit-transform .4s;

    transition: transform .4s;

    -webkit-transform-origin: center bottom;

    -ms-transform-origin: center bottom;

    transform-origin: center bottom

}


.page-header-bar-hidden .page-header-bar-inner, .static.home .page-header-bar-inner {

    transition: visibility .4s steps(1, end), -webkit-transform .4s;

    transition: visibility .4s steps(1, end), transform .4s;

    visibility: hidden;

    -webkit-transform: rotateX(94deg) rotateZ(0);

    transform: rotateX(94deg) rotateZ(0)

}


.no-transition .page-header-bar-inner {

    transition: none

}


.page-header-collapsed .page-header-bar-inner {

    visibility: hidden;

    transition: none

}


@media (min-width: 768px) {

    .page-header-bar-inner {

        position: absolute;

        width: auto;

        height: 100%;

        right:4.5%;

        left:4.5%;

    }

}


.carousel-bar-inner {

    width: 100%;

    height: 100%

}


@media (min-width: 768px) {

    .carousel-bar-inner {

        width: auto

    }

}

.carousel-bar-title-word {

    padding-left:75px;

    font-size:12px;

    color:#666;

}

@media (max-width:991px) {

    .carousel-bar-title {position:relative;height:100%;}

    .carousel-bar-title-word{position:absolute;top:50%; width:40%; padding-left:4.5%;line-height:1.5;transform:translateY(-50%);}

}

.carousel-scroll-btn {

    z-index:56;

    position:absolute;

    left:50%;

    width:44px;

    height:44px;

    margin-left:-22px;

    border:1px solid #fff;

    border-radius:100%;

    overflow:hidden;

    cursor:pointer;

}

.carousel-scroll-btn .carousel-scroll-btn-icon {

    position:absolute;

    display:block;

    width:44px;

    height:44px;

    margin:0 auto;

    background:url(../images/down-icon2.png) no-repeat center center;

    cursor:pointer;

    animation: downico 1.5s ease-out infinite;

}

@keyframes downico {

    0% {

        top: 0;

        opacity: 1;

    }

    35% {

        top: 50%;

        opacity: 0;

    }

    65% {

        top: -50%;

        opacity: 0;

    }

    100% {

        top: 0;

        opacity: 1;

    }

}

.carousel-controls {

    position:absolute;

    right:0;

    top:0;

    width:330px;

    height:83px;

    background: none;

}

.carousel-controls .count {

    position:absolute;

    left:0;

    width:135px;

    padding-left:35px;

    font:bold 16px/80px 'Gotham-Book';

    color:#999;

}

.carousel-controls .count span {

    display:inline-block;

    padding:0 3px;

}

.carousel-controls .count .current {color:#333;}

.carousel-controls .controls {

    position:absolute;right:0;}

.carousel-controls .carousel-line {

    z-index:1;

    position:absolute;

    left:50%;

    top:20px;

    display:block;

    width:1px;

    height:30px;

    background:#e5e5e5;

}

.carousel-controls .carousel-control {

    float:left;

    width:60px;

    height:60px;

    cursor:pointer;

}

@media (min-width:1300px){

    .carousel-controls .carousel-line {height:40px;}

    /*.carousel-item2 .carousel-scroll-btn {left:0;margin-left:0;}*/

    .carousel-scroll-btn {bottom:36px;}

    .carousel-controls .carousel-control {width:80px;  height:83px;}

}

.carousel-controls .swiper-button-next,

.carousel-controls .swiper-button-prev {

    position:relative;

    width:100%;

    height:100%;

    overflow:hidden;

}

.carousel-controls .swiper-button-line {

    z-index:1;

    position:absolute;

    top:31px;

    left:35px;

    display:block;

    width:10px;

    height:18px;

    transition: all .45s ease-out 0s;

    -webkit-transition: all .45s ease-out 0s;

    -moz-transition: all .45s ease-out 0s;

}

.carousel-controls .swiper-button-prev .swiper-button-line {background:url(../images/left-icon3.png) no-repeat center center;}

.carousel-controls .swiper-button-next .swiper-button-line {margin-left:1px;background:url(../images/right-icon3.png) no-repeat center center;}

.carousel-controls .swiper-button-prev:hover .swiper-button-line{ left: 25px;}

.carousel-controls .swiper-button-next:hover .swiper-button-line{ left: 44px;}

.carousel-controls .swiper-button:after{

    content:'';

    position:absolute;

    top:39px;

    display:block;

    width: 14px;

    height: 2px;

    background-color: #333;

    -webkit-transition: -webkit-transform .45s cubic-bezier(.25,.46,.45,.94) 0s;

    transition: transform .45s cubic-bezier(.25,.46,.45,.94) 0s;

    -webkit-transform: scale(0,1);

    transform: scale(0,1);

}

.carousel-controls .swiper-button-prev:after {left:28px;}

.carousel-controls .swiper-button-next:after {right:28px;}

@media(min-width:1300px){

    .carousel-controls .swiper-button:hover:after{

        transform: scaleX(1);

        -webkit-transform: scaleX(1);

        -moz-transform: scaleX(1);

    }

}


.index-page-block {

    /*z-index:99;*/

    /*position:relative;*/

    background:#fff;

}

.index-service {

    position:relative;

    padding:90px 0 100px;

    overflow:hidden;

}

@media (max-width:1449px){

    .index-service .container {width:91%;}

}

.index-title {

    z-index:2;

    position:relative;

    padding-bottom:40px;

    text-align:center;

}

.index-title .big-title {

    position:relative;

    height:40px;

    line-height:40px;

}

.index-title .big-title .big {

    z-index:1;

    position:relative;

    display:inline-block;

    padding:0 18px;

    font-size:28px;

    color:#333;

}

.index-customer .index-title .big-title .big {background:#fff;}

.index-title .big-title .line {

    position:absolute;

    top:22px;

    left:50%;

    display:block;

    width:65px;

    height:1px;

    background-color:#c1c1c1;

}

.index-title .big-title .l-line {margin-left:-147.5px;}

.index-title .big-title .r-line {margin-left:80.5px;}

.index-title .small {

    display:block;

    font:normal 16px/1.5 'gotham-medium';

    color:#999;

}

.swiper-slide-text-scroll {position:relative;}

.index-service-scroll-wrap .swiper-container {

    position:static;

}

.index-service-scroll-wrap {

    position:relative;

    padding:10% 7.5%;

}

@media (min-width:1300px){

    .index-service-scroll-wrap { height:575px;}

}

@media (min-width:1400px){

    .index-service-scroll-wrap { height:638px;}

}

@media (min-width:1530px){

    .index-service-scroll-wrap { height:750px;}

}

.index-service-scroll-wrap .swiper-slide-text-wrap {

    float:left;

    width:350px;

}

.index-service .swiper-slide-text-each {top:15px;}

.index-service .swiper-slide-text-each,

.index-service .swiper-slide-image {

    position:absolute;

    opacity: 0;

    transition: all 1s ease 0s;

    -webkit-transition: all 1s ease 0s;

    -moz-transition: all 1s ease 0s;

}

.index-service .swiper-slide-image {

    width:100%;

    height:100%;

}

.index-service .swiper-slide-text-each.active,

.index-service .swiper-slide-image.active {position:relative;z-index:2;opacity:1;}

.index-service-scroll-wrap .swiper-slide-text-wrap .slide-title {

    margin-bottom:20px;

    font-weight:bold;

    font-size:36px;

    color:#333;

}

.index-service-scroll-wrap .swiper-slide-text-wrap .slide-descrition {margin-bottom:40px;}

.index-service-scroll-wrap .swiper-slide-text-wrap .slide-descrition span {

    display:block;

    padding:8px 0;

    font-size:16px;

    color:#333;

}

.index-service-scroll-wrap .swiper-slide-text-each:last-child .swiper-slide-text-wrap .slide-title,

.index-service-scroll-wrap .swiper-slide-text-each:last-child .swiper-slide-text-wrap .slide-descrition span {color:#333;}

.radiu-button {

    z-index:2;

    position:relative;

    display:block;

    width:215px;

    height:60px;

    font:normal 16px/60px 'gotham-medium';

    text-align:center;

    background:#fff;

    border:1px solid #fff;

    border-radius:30px;

    transition: all .4s ease-in-out;

    overflow:hidden;

}

.radiu-button:hover {

    color: #fff;

    background:#000;

    border-color:#000;

}


.radiu-button:hover:after {

    transform-origin: center bottom;

    transform: scaleY(1)

}

.index-service-scroll-wrap .swiper-slide-image-wrap {

    position:absolute;

    left:0;

    top:0;

    display:block;

    width:100%;

    height:100%;

}

.index-service-scroll-wrap .swiper-slide-image-wrap img {

    max-width:100%;

}

.index-service .work-buttons {

    z-index:3;

    position:absolute;

    right:40px;

    bottom:45px;

}

.index-service .work-buttons .count-tab {

    margin-right:25px;

    margin-bottom:50px;

    border-right:1px solid rgba(186,186,186,.3);

}


.index-service .work-buttons .count-tab .tab {

    position:relative;

    width:110px;

    margin-right:-10px;

    line-height:40px;

    cursor:pointer;

}

.index-service .work-buttons .count-tab .tab-key {

    font-weight:normal;

    font-size:12px;

    color:#666;

}

.index-service .work-buttons .count-tab .each-tab.active .tab-key {color:#666;font-weight:bold;}

.index-service .work-buttons .count-tab .dot {

    position:absolute;

    right:3px;

    top:15px;

    display:block;

    width:13px;

    height:13px;

}

.index-service .work-buttons .count-tab .dot:before {

    content:'';

    position:absolute;

    top:50%;

    left:50%;

    display:block;

    width:5px;

    height:5px;

    margin:-2.5px 0 0 -2.5px;

    background:#bababa;

    border-radius:100%;

    transition:all .5s ease-in-out;

}

.index-service .work-buttons .count-tab .each-tab.active .dot:before {background:#666;}

.index-service .work-buttons .count-tab .dot:after {

    content:'';

    position:absolute;

    display:block;

    width:9px;

    height:9px;

    border:2px solid #666;

    border-radius:100%;

    transform:scale(0);

    transition:all .5s ease-in-out;

}

.index-service .work-buttons .count-tab .each-tab.active .dot:after {transform:scale(1);}

.index-service .work-buttons .count-tab .each-tab.active .tab-key {font-weight:bold;}

.index-service .work-buttons .prograss-bar {float:right;}

.index-service .work-buttons .iconfont,

.ourwork-mobile-images-scroll .work-buttons .iconfont {

    position:relative;

    display:block;

    width:50px;

    height:50px;

    margin-top:15px;

    background:#fff;

    border-radius:100%;

    -moz-border-radius:100%;

    -webkit-border-radius:100%;

    transition:all .5s ease-in-out;

}

.ourwork-mobile-images-scroll .work-buttons .iconfont {background:transparent;}

.index-service .work-buttons .iconfont:before,

.ourwork-mobile-images-scroll .work-buttons .iconfont:before,

.index-service .work-buttons .iconfont:after,

.ourwork-mobile-images-scroll .work-buttons .iconfont:after{

    position:absolute;

    left:0;

    top:0;

    content:'';

    display:block;

    width:100%;

    height:100%;

    border-radius:100%;

    -moz-border-radius:100%;

    -webkit-border-radius:100%;

    transition:all .5s ease-in-out;

    box-sizing:border-box;

}

.index-service .work-buttons .iconfont:before,

.ourwork-mobile-images-scroll .work-buttons .iconfont:before { z-index:1;}

.index-service .work-buttons .prev:before {background:url(../images/left-icon5.png) no-repeat center center;}

.index-service .work-buttons .next:before {background:url(../images/right-icon5.png) no-repeat center center;}

.index-service .work-buttons .iconfont:after,

.ourwork-mobile-images-scroll .work-buttons .iconfont:after {

    transform:scale(0);

}

.index-service .work-buttons .iconfont:after {background:#339ec1;}

.ourwork-mobile-images-scroll .work-buttons .iconfont:after {background:#fff;}

@media(max-width:1300px){

    .index-title {padding-bottom:25px;}

    .index-service {padding:70px 0 80px;}

    .index-service-scroll-wrap {min-height:25rem;padding:5% 7.5%;}

    .index-service-scroll-wrap .swiper-slide-text-wrap .slide-title {margin-bottom:10px;font-size:30px;}

    .index-service-scroll-wrap .swiper-slide-text-wrap .slide-descrition span {padding:3px 0;font-size:14px;}

    .index-service .work-buttons {bottom:15px;}

    .index-service .work-buttons .count-tab .tab {line-height:30px;}

    .index-service .work-buttons .count-tab .dot {top:8px;}

    .radiu-button {width:180px;height:50px;    font: normal 14px/50px 'gotham-medium';line-height:50px;}

    .index-service .work-buttons .iconfont, .ourwork-mobile-images-scroll .work-buttons .iconfont {width:45px;height:45px;  }

}

@media (max-width:1330px){

    .index-service-scroll-wrap {padding:5% 7.5%;}

    .index-service .work-buttons {top:45px;bottom:auto;}

    .index-service .work-buttons .count-tab {margin-bottom:50px;}

}

@media (min-width:1530px){

    .index-service .work-buttons .count-tab { margin-bottom:110px;}

}

@media (max-width:991px){

    .index-service {padding:50px 0;}

    .index-service-scroll-wrap {min-height:20rem;padding:0;}

    .index-service-scroll-wrap .swiper-slide-image-wrap { position:relative;height:20rem; margin-left: 0;  }

    .index-service-scroll-wrap .swiper-slide-image-wrap img {width:100%;}

    .index-service .swiper-slide-image {right:0;width:100%;height:100%;}

    .swiper-slide-text-scroll {position:static;}

    .index-service .swiper-slide-text-each.active {position:absolute;}

    .index-service .swiper-slide-text-each {top:25px;left:25px;}

    .index-service-scroll-wrap .swiper-slide-text-wrap .slide-descrition {margin-bottom:2rem;}

    .index-service-scroll-wrap .swiper-slide-text-wrap .slide-title {font-size:28px;margin-bottom:10px;}

    .index-service-scroll-wrap .swiper-slide-text-wrap .slide-descrition span {padding:5px 0;font-size:14px;}

    .index-service-scroll-wrap .swiper-slide-text-wrap .radiu-button {display:none;}

    .index-service .work-buttons {  top: 25px;right:25px;  bottom: auto;  }

    .index-service .work-buttons .count-tab {margin-bottom:25px;}

}

@media (max-width:900px){

    .index-service-scroll-wrap {min-height:18rem;}

    .index-service-scroll-wrap .swiper-slide-image-wrap {height:18rem;}

    .index-service .work-buttons {  top:auto;right:25px;  bottom:45px;  }

    .index-service .work-buttons .count-tab {display:none;}

}