/* RESET CSS */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; font-weight: normal; vertical-align: baseline; font-family: 'Roboto', 'sans-serif'; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; font-size: 24px; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
a { text-decoration: none; }
img { vertical-align: top; max-width: 100%; }
.clearfix:before, .clearfix:after { content: " "; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
input, textarea, button { outline: none; border: 0; -webkit-appearance: none; }
input[type="submit"] { cursor: pointer }

body.hidden { overflow: hidden; }

.wrap { max-width: 960px; margin: 0 auto; }

/* header */
.header { position: fixed; height: 60px; z-index: 100; background: rgba(255,255,255,0.85); top: 0; left: 0; right: 0; }
.header .logo { float: left; width: 136px; }
.header .logo img { padding-top: 11px; }
.header .nav { float: right; }
.header .nav .item, .header .nav .lang { float: left; display: block; }
.header .nav a.item, .header .nav .lang { margin: 0 15px; height: 60px; line-height: 56px; font-size: 16px; color: #626262; letter-spacing: -0.16px; }
.header .nav .item.active { border-bottom: 4px solid #f82400; color: #f82400; }
.header .nav .item:hover, .header .nav .lang:hover { color: #f82400; }
.header .nav .lang:hover:before { border-top-color: #f82400; }
.header .nav .lang:before { display: inline-block; content: ''; height: 0; width: 0; margin-right: 5px; border-style: solid; border-width: 5px 5px 0 5px; border-color: #9b9b9b transparent transparent transparent; vertical-align: middle; }
.nav-burger { display: none; }
.header .nav span.item { position: relative; }
.lang-list { visibility: hidden; opacity: 0; -webkit-transition: 0.2s; transition: 0.2s; position: absolute; width: 100%; right: 0; top: 100%; background:rgba(255,255,255,0.85); box-shadow: 1px 1px 10px rgba(0,0,0,0.4); border-radius: 4px; text-align: center; line-height: 40px; }
.lang-list .l-item { display: block; cursor: pointer; color: #626262; font-size: 16px; }
.lang-list .l-item.active, .lang-list .l-item:hover { color: #f82400; }
.lang-list.show { visibility: visible; opacity: 1; }

.body { padding-bottom: 8%; }
/* banner swiper */
.banner-container .swiper-slide { min-height: 500px; background-repeat: no-repeat; background-size: cover; background-position: center; }
.banner-container .swiper-slide:before { content: ''; display: block; padding-top: 48.6%; }
.banner-container .swiper-slide .wrap { position: absolute; top: 60px; right: 0; left: 0; bottom: 0; z-index: 1; display: -webkit-flex; display: -ms-flexbox; display: -moz-box; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center;  }
.banner-container .swiper-slide .caption { max-width: 960px; color: #ffffff; text-align: center; }
.banner-container .swiper-slide .title { margin-bottom: 17px; font-weight: 700; font-size: 48px; letter-spacing: -0.39px; line-height: 1.14; }
.banner-container .swiper-slide .desc { max-width: 730px; margin: 0 auto; font-size: 32px; letter-spacing: -0.26px; line-height: 1.5; font-weight: 300; }
.banner-container .military-wrap .desc { max-width: 690px; }
.banner-container .swiper-pagination-bullets { bottom: 14%; }
.banner-container .swiper-pagination-bullets .swiper-pagination-bullet { border: 2px solid #ffffff; border-radius: 100%; width: 18px; height: 18px; opacity: 0.7; background: transparent; margin: 0 8px; }
.banner-container .swiper-pagination-bullets .swiper-pagination-bullet-active { background: #ffffff; opacity: 0.7; }

h3.title { color: #626262; font-size: 32px; line-height: 1.56; font-weight: 700; letter-spacing: -0.26px; text-align: center; margin-bottom: 14px; }
h3.title + .desc { margin-bottom: 10%; color: #626262; font-size: 24px; letter-spacing: -0.19px; line-height: 1.33; text-align: center; }
h3.title.border { position: relative; padding-top: 6.5%; }
h3.title.border:before { content: ''; display: block; position: absolute; top: 0; left: 50%; border-top: 10px solid #626262; width: 104px; margin-left: -52px; }

/* Our expertise */
.expertise { padding-top: 10%; background: url('../images/background.png') no-repeat top center/100% auto; }
.exp-list { display: -webkit-flex; display: -ms-flexbox; display: -moz-box; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
.exp-list .item-empty { visibility: hidden; }
.exp-list .item { position: relative; opacity: 0; width: 31.25%; margin-bottom: 3.125%; background: #ffffff; border-radius: 10px; box-shadow: 0 1px 30px 10px rgba(0, 0, 0, 0.1); text-align: center; }
.exp-list .item:before { display: block; content: ''; padding-top: 100%; }
.exp-list .item .context { position: absolute; z-index: 1; top: 0; bottom: 0; right: 0; left: 0; display: -webkit-flex; display: -ms-flexbox; display: -moz-box; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-flex-flow: column; flex-flow: column; }
.exp-list .item .img { height: 56%; }
.exp-list .item .txt { color: #626262; font-size: 24px; line-height: 1.2; letter-spacing: -0.36px; padding-top: 14%;}

.exp-list.animation .item { -webkit-animation: up 1s backwards; animation: up 1s backwards; opacity: 1; }
.exp-list.animation .item:nth-child(3) { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; }
.exp-list.animation .item:nth-child(4) { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; }
.exp-list.animation .item:nth-child(5) { -webkit-animation-delay: 0.7s; animation-delay: 0.7s; }
.exp-list.animation .item:nth-child(6) { -webkit-animation-delay: 1.1s; animation-delay: 1.1s; }
.exp-list.animation .item:nth-child(7) { -webkit-animation-delay: 1.3s; animation-delay: 1.3s; }
.exp-list.animation .item:nth-child(8) { -webkit-animation-delay: 1.7s; animation-delay: 1.7s; }

@-webkit-keyframes up {
    0% { -webkit-transform: translateY(50%) translateZ(0); transform: translateY(50%) translateZ(0); opacity: 0; }
    100% { -webkit-transform: none; transform: none; opacity: 1; }
}
@keyframes up {
    0% { -webkit-transform: translateY(50%) translateZ(0); transform: translateY(50%) translateZ(0); opacity: 0; }
    100% { -webkit-transform: none; transform: none; opacity: 1; }
}

/* Our Services */
.services { padding-top: 8%; }
.services .wrap > .desc { max-width: 810px; margin: 0 auto 9%; }
.evolution { display: -webkit-flex; display: -ms-flexbox; display: -moz-box; display: flex; -webkit-justify-content: space-around; justify-content: space-around; text-align: center; }
.evolution .item { width: 22%; opacity: 0; }
.evolution .arrow { width: 17%; background: url('../images/arrow@2x.png') no-repeat center 24%/29px auto; }
.evolution .arrow-1 { background-position-x: 25%; }
.evolution .arrow-2 { background-position-x: 68%; }
.evolution .item .txt { padding-top: 28%; color: #626262; font-size: 32px; letter-spacing: -0.26px; line-height: 1.56; }
.service-list { padding-top: 5%; }
.service-list .item { padding-top: 4%; color: #626262; font-size: 20px; letter-spacing: -0.16px; line-height: 1.5;}
.service-list .title { font-weight: 900; }

.evolution.animation .item { -webkit-animation: right 1s backwards; animation: right 1s backwards; opacity: 1; }
.evolution.animation .item:nth-child(1) { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; }
.evolution.animation .item:nth-child(2) { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; }
.evolution.animation .item:nth-child(3) { -webkit-animation-delay: 0.5s; animation-delay: 0.5s; }
.evolution.animation .item:nth-child(4) { -webkit-animation-delay: 0.7s; animation-delay: 0.7s; }
.evolution.animation .item:nth-child(5) { -webkit-animation-delay: 0.9s; animation-delay: 0.9s; }

@-webkit-keyframes right {
    0% { -webkit-transform: translateX(-30%) translateZ(0); transform: translateX(-30%) translateZ(0); opacity: 0; }
    100% { -webkit-transform: none; transform: none; opacity: 1; }
}
@keyframes right {
    0% { -webkit-transform: translateX(-30%) translateZ(0); transform: translateX(-30%) translateZ(0); opacity: 0; }
    100% { -webkit-transform: none; transform: none; opacity: 1; }
}


/* IT Partners */
.partners { padding-top: 7%; }
.partners .wrap > .desc { max-width: 523px; margin: 0 auto; }
.partner-list { display: -webkit-flex; display: -ms-flexbox; display: -moz-box; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; justify-content: center; }
.partner-list .item { width: 32%; padding: 0 1%; margin-top: 8%; }
.partner-list.animation .item { -webkit-animation: up 1s backwards; animation: up 1s backwards; }
.partner-list .item:nth-child(2) { -webkit-animation-delay: 0.1s; animation-delay: 0.1s;}
.partner-list .item:nth-child(3) { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; }
.partner-list .item:nth-child(4) { -webkit-animation-delay: 0.5s; animation-delay: 0.5s; }
.partner-list .item:nth-child(5) { -webkit-animation-delay: 0.9s; animation-delay: 0.9s; }
.partner-list .item:nth-child(6) { -webkit-animation-delay: 1.1s; animation-delay: 1.1s; }
.partner-list .item:nth-child(7) { -webkit-animation-delay: 1.3s; animation-delay: 1.3s; }
.partners .text { font-size: 16px; color: #626262; font-weight: normal; text-align: center; padding-top: 8px; }
.layout-company { display: -webkit-flex; display: -ms-flexbox; display: -moz-box; display: flex; -webkit-justify-content: center; justify-content: center; flex-direction: column; }


/* Case Study */
.case { padding-top: 9%; }
.case .tab { box-shadow: 0 3px 4px -3px rgba(0, 0, 0, 0.5); }
.case .tab-head { max-width: 492px; margin: 0 auto ; display: -webkit-flex; display: -ms-flexbox; display: -moz-box; display: flex; -webkit-justify-content: space-around; justify-content: space-around; text-align: center; }
.case .tab-head .item { display: inline-block; padding: 0 20px; border-bottom: 3px solid #ffffff; color: #9B9B9B; font-size: 16px; letter-spacing: -0.13px; line-height: 2.5; }
.case .tab-head .item.active { border-color: #fd464b; color: #fd464b; }
.case h3.title { margin-bottom: 64px; }
.case .con { padding-top: 7%; display: none; }
.case .con.active { display: block; }
.case .con .item { display: -webkit-flex; display: -ms-flexbox; display: -moz-box; display: flex; -webkit-align-items: center; align-items: center; margin-bottom: 10%; }
.case .con .item2, .case .con .item3 { display: none; }
.case .con.show .item2, .case .con.show .item3 { display: -webkit-flex; display: -ms-flexbox; display: -moz-box; display: flex; }
.case .tab-body .img { width: 50%; }
.case .tab-body .caption { width: 50%; color: #626262; font-size: 20px; letter-spacing: -0.19px; line-height: 1.25;}
.case .tab-body .caption .title { font-weight: 700; font-size: 24px; }
.case .tab-body .caption .desc { line-height: 1.5; }
.case .con-treker .item1 img { padding: 0 13% 0 9%; }
.case .con-treker .item1 .desc { max-width: 330px; }
.case .con-treker .item1 .caption { padding-top: 7%; }
.case .con-treker .item2 img { padding-right: 22%; }
.case .con-treker .item2 h2.title { font-size: 146px; line-height: 1; margin-left: -10px; letter-spacing: -16px; }
.case .con-treker .item2 h4.title { font-weight: 700; letter-spacing: -0.28px; line-height: 2; }
.case .con-treker .item2 h5.title { font-size: 14px; }
.case .con-treker .item2 .desc { font-size: 14px; max-width: 178px; }
.case .con-treker .item3 .desc { max-width: 430px; font-size: 20px; line-height: 1.5; }
.case .con-treker .item3 .desc a { color: inherit; font-size: inherit; }
.case .con-treker .item3 img {  padding: 0 13% 0 20%; }
.case .con-veterati .item1 .desc { max-width: 408px; }
.case .con-veterati .item1 img { padding: 8% 6% 0; }
.case .con-veterati .item2 .desc { max-width: 430px; }
.case .con-veterati .item2 img { padding: 8% 6% 0; }
.case .con-veterati .item3 .desc { max-width: 330px; }
.case .con-veterati .item3 img { padding-right: 7%; }
.case .con-quint .item1 .desc { max-width: 408px; }
.case .con-quint .item1 img { padding: 8% 10% 0 4%; }
.case .con-quint .item2 .desc { max-width: 438px; }
.case .con-quint .item2 img { padding: 8% 4% 0 10%; }
.case .con-quint .item3 .desc { max-width: 430px; }
.case .con-quint .item3 img { padding: 8% 10% 0 4%; }
.btn-more { display: block; margin: 0 auto; text-align: center; color: #ff1f5a; border: 2px solid #ff1f5a; max-width: 300px; font-size: 16px; line-height: 60px; border-radius: 10px; }

/* Experience Team */
.team { padding-top: 8%; }
.team .wrap > .desc { max-width: 762px; margin: 0 auto 70px; }
.form { max-width: 600px; margin: 0 auto; }
.form .col { padding-bottom: 20px; }
.form .col-6 { width: 50%; float: left; }
.form .col-6:nth-child(2n) { padding-left: 10px; }
.form .col-6:nth-child(2n+1) { padding-right: 10px; }
.form .form-control { width: 100%; padding: 15px 26px; box-sizing: border-box; background-color: #ffffff; font-size: 16px; border-radius: 10px; box-shadow: 0 1px 30px 10px rgba(0, 0, 0, 0.1); height: 60px;}
.form textarea.form-control { height: 150px; }
.form .btn { width: 100%; height: 60px; margin-top: 12px; color: #ffffff; font-size: 16px; background-image: linear-gradient(0deg, #ff0467 0%, #ff4348 100%); border-radius: 10px; box-shadow: 0 1px 30px 10px rgba(0, 0, 0, 0.1); }
::-webkit-input-placeholder { color: #9b9b9b; }
:-moz-placeholder { color: #9b9b9b; }
::-moz-placeholder { color: #9b9b9b; }
:-ms-input-placeholder { color: #9b9b9b; }

/* footer */
.footer { background: #f0f0f0; padding-bottom: 36px; }
.footer .wrap { padding-top: 53px; }
.footer .top { position: relative; }
.summary-list { float: left; display: -webkit-flex; display: -ms-flexbox; display: -moz-box; display: flex; width: 600px; max-width: 100%; -webkit-justify-content: space-between; justify-content: space-between; }
.summary-list .title {color: #9b9b9b; font-size: 16px; letter-spacing: -0.13px; line-height: 1.875;}
.summary-list .cate {color: #9b9b9b; font-size: 12px; letter-spacing: -0.1px; line-height: 2.5;}
.summary-list .cate:before { display: inline-block; content: ''; margin-right: 7px; height: 0; width: 0; border-style: solid; border-width: 5px 0px 5px 5px; border-color: transparent transparent transparent #9b9b9b; }
.social-way { float: right; width: 54px; margin-top: -10px; }
.social-way .item { display: block; }
.social-way .item:before { content: ''; padding-bottom: 100%; display: block; background-repeat: no-repeat; background-position: center; background-size: 70% auto; }
.social-way .item-weibo:before { background-image: url('../images/ic-social-01@1x.png'); }
.social-way .item-in:before { background-image: url('../images/ic-social-02@1x.png'); }
.social-way .item-wechat:before { background-image: url('../images/ic-social-03@1x.png'); }
.social-way .item-tt:before { background-image: url('../images/ic-social-04@1x.png'); }
.social-way .item-zhihu:before { background-image: url('../images/ic-social-05@1x.png'); }
.copyright { padding-top: 44px; vertical-align: middle; font-size: 12px; color: #9b9b9b; letter-spacing: -0.1px; line-height: 20px; }
.copyright .txt { padding: 8px 0 8px 46px; background: url('../images/Logo-footer-JiFang@2x.png') no-repeat left center/36px; }
.record-num { color: inherit; }

.contact { text-align: left; padding-top: 40px; }

@media screen and (max-width: 960px) {
    .wrap { padding-left: 20px; padding-right: 20px; }
    .header .nav { visibility: hidden; opacity: 0; -webkit-transform: translateX(-100%) translateZ(0); transform: translateX(-100%) translateZ(0); -webkit-transition: 0.3s; transition: 0.3s; overflow: auto; }
    .header .nav.show { visibility: visible; opacity: 1; -webkit-transform: none; transform: none; }
    .header .nav { position: fixed; z-index: 101; padding-top: 20px; top: 0; left: 0; bottom: 0; width: 250px; background: #333333; float: none; }
    .header .nav .item, .header .nav .lang { float: none; }
    .header .nav a.item, .header .nav .lang { line-height: 50px; height: 50px; }
    .nav-burger { display: block; float: right; width: 25px; padding-top: 20px; }
    .header .logo { width: 90px; }
    .header .logo img { padding-top: 18px; }
    .header .nav .item.active { border-bottom: 0; }
    .lang-list { position: static; background: transparent; box-shadow: none; text-align: left; padding-left: 30px; line-height: 30px; }
}

@media screen and (max-width: 640px) {
    .body > div:not(:first-child) { padding-top: 70px; }
    .banner-container .swiper-slide .title { font-size: 38px; }
    .banner-container .swiper-slide .desc { font-size: 24px; }

    h3.title { font-size: 24px; }
    h3.title + .desc { font-size: 20px; }
    h3.title.border { padding-top: 50px; }

    .exp-list { flex-direction: column; -webkit-align-items: center; align-items: center; }
    .exp-list .item-empty { display: none; }
    .exp-list .item { width: 300px; max-width: 100%; margin-bottom: 30px; }

    .evolution { flex-direction: column; -webkit-align-items: center; align-items: center; }
    .evolution .item { width: 200px; }
    .evolution .item .txt { padding-top: 20px; }
    .evolution .arrow:before { display: block; content: ''; padding-top: 50%;  }
    .evolution .arrow { background-position: center; -webkit-transform: rotate(90deg); transform: rotate(90deg); }
    .evolution.animation .item:not(.arrow) { -webkit-animation: down 1s backwards; animation: down 1s backwards; }
    .evolution.animation .arrow { -webkit-animation: arrow_down 1s backwards; animation: arrow_down 1s backwards; }

    @-webkit-keyframes down {
        0% { -webkit-transform: translateY(-20%) translateZ(0); transform: translateY(-20%) translateZ(0); opacity: 0; }
        100% { -webkit-transform: none; transform: none; opacity: 1; }
    }
    @keyframes down {
        0% { transform: translateY(-20%) translateZ(0); opacity: 0; }
        100% { -webkit-transform: none; transform: none; opacity: 1; }
    }

    @-webkit-keyframes arrow_down {
        0% { -webkit-transform: translateY(-20%) translateZ(0) rotate(90deg); transform: translateY(-20%) translateZ(0) rotate(90deg); opacity: 0; }
        100% { -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 1; }
    }
    @keyframes arrow_down {
        0% { -webkit-transform: translateY(-20%) translateZ(0) rotate(90deg); transform: translateY(-20%) translateZ(0) rotate(90deg); opacity: 0; }
        100% { -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 1; }
    }

    .case .tab-head { width: 280px; }
    .copyright { padding-top: 20px; }
}

@media screen and (max-width: 740px) {
    .social-way { clear: both; float: none; width: auto; padding-top: 50px; margin-left: -16px; }
    .social-way .item { float: left; height: 54px; width: 54px; }
}

@media screen and (max-width: 480px) {
    .banner-container .swiper-pagination-bullets { bottom: 10%; }

    .partner-list .item { width: 50%; }
    .partner-list .item.empty2 { display: none }
    .partners .text { font-size: 14px; }

    .case .con .item { flex-direction: column; }
    .case .tab-body .item .caption { width: 100%; text-align: center; padding-top: 50px; }
    .case .tab-body .img { width: 100%; }
    .case .tab-body .caption .title { font-size: 20px; }
    .case .tab-body .caption .desc { font-size: 18px; }
    .case .reverse .caption { order: 2; }
    .case .con .item img { padding: 0; }
    .case .con .item .desc { max-width: 100%; }
    .case .con-treker .item2 h2.title { font-size: 117px; }
    .case .con-treker .item2 .desc { font-size: 14px; }
    .case .con-veterati .img { padding-top: 60px; }
    .case .con-quint .img { padding-top: 60px; }

    .form .col-6 { width: 100%; padding-right: 0!important; padding-left: 0!important; }
}

@media screen and (max-width: 479px) {
    .summary-list { -webkit-flex-wrap: wrap; flex-wrap: wrap; }
    .summary-list .item { width: 50%; }
    .summary-list .item:nth-child(n+3) { width: 50%; padding-top: 42px; }
}