@CHARSET "UTF-8"; .button {
    background-image: url("../img/button.png");
}

.gradient-text .masked,.gradient-button .masked {
    -webkit-mask-image: url("../images/global/mask/rtl.png?v=15");
}

.app-page.masked {
    -webkit-mask-image: url('data:image/png;base64,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');
}

::-webkit-scrollbar {
    width: 3px;
    height: 0;
    border-radius: 10px;
}

::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #e0e0e0;
}

::-webkit-scrollbar-thumb,::-webkit-scrollbar-button {
    border-radius: 10px;
    background-color: #2391c3;
}

::-webkit-scrollbar-button {
    display: none;
}

body {
    overflow-y: scroll;
    overscroll-behavior: auto;
}

body.dark-style {
    background-color: #131722;
}

body::-webkit-scrollbar {
    width: 10px;
    display: block;
}

body.dark-style::-webkit-scrollbar {
    display: none;
}

body,input,textarea {
    font-family: FZLTHJW, Helvetica, Arial, SimHei, STHeiti, sans-serif;
}

h1 {
    font-weight: normal;
}

.app-page.is-current {
    padding-top: 80px;
}

.app-layer .btn-close.mini {
    width: 50px;
    height: 50px;
}

.ff-din {
    font-family: DINCB, FZLTHJW, Helvetica, Arial, SimHei, STHeiti, sans-serif;
}

.ff-ch {
    font-family: FZLTCHJW, Helvetica, Arial, SimHei, STHeiti, sans-serif;
}

.layout-fw {
    width: 1440px;
}

.button {
    background-size: 500px auto;
}

.clr-gray {
    color: #555;
}

.clr-blue {
    color: #0096d7;
}

.clr-blue-sky {
    color: #14b2f2;
}

.clr-blue-deep {
    color: #0173b2;
}

.clr-cyan {
    color: #01dbfd;
}

.clr-dodger {
    color: #2681ff;
}

.clr-steel {
    color: #02a2db;
}

.clr-purple {
    color: #cc88f3;
}

.clr-teal {
    color: #07d3d1;
}

.clr-orange {
    color: #ff8a00;
}

.clr-orange-red {
    color: #ff5600;
}

.font-h1, .font-h2, .font-h3, .font-h4 {
    line-height: 1.5em;
}

.font-p1, .font-p2, .font-p3 {
    line-height: 2em;
}

.txt-center {
    text-align: center;
}

.lst-none li {
    list-style-type: none;
}

.lst-dash li {
    position: relative;
    list-style-type: none;
}

.lst-dash li:before {
    position: absolute;
    right: 100%;
    content: "- ";
    white-space: pre;
}

.hover-zoom {
    -webkit-transition: all .3s ease-out 0s;
    -moz-transition: all .3s ease-out 0s;
    -ms-transition: all .3s ease-out 0s;
    -o-transition: all .3s ease-out 0s;
    transition: all .3s ease-out 0s;
}

@media all and (min-width: 751px) {
    .hover-zoom:hover {
        -webkit-transform: scale(1.05);
        -moz-transform: scale(1.05);
        -ms-transform: scale(1.05);
        -o-transform: scale(1.05);
        transform: scale(1.05);
    }
}

@media all and (max-width: 750px) {
}

@-webkit-keyframes kf-floating {
    0% {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    20% {
        -webkit-transform: translate(3px, -2px);
        -moz-transform: translate(3px, -2px);
        -ms-transform: translate(3px, -2px);
        -o-transform: translate(3px, -2px);
        transform: translate(3px, -2px);
    }

    40% {
        -webkit-transform: translate(0px, 2px);
        -moz-transform: translate(0px, 2px);
        -ms-transform: translate(0px, 2px);
        -o-transform: translate(0px, 2px);
        transform: translate(0px, 2px);
    }

    60% {
        -webkit-transform: translate(-2px, -3px);
        -moz-transform: translate(-2px, -3px);
        -ms-transform: translate(-2px, -3px);
        -o-transform: translate(-2px, -3px);
        transform: translate(-2px, -3px);
    }

    80% {
        -webkit-transform: translate(2px, 1px);
        -moz-transform: translate(2px, 1px);
        -ms-transform: translate(2px, 1px);
        -o-transform: translate(2px, 1px);
        transform: translate(2px, 1px);
    }

    100% {
        -webkit-transform: translate(-3px, 2px);
        -moz-transform: translate(-3px, 2px);
        -ms-transform: translate(-3px, 2px);
        -o-transform: translate(-3px, 2px);
        transform: translate(-3px, 2px);
    }
}

@-moz-keyframes kf-floating {
    0% {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    20% {
        -webkit-transform: translate(3px, -2px);
        -moz-transform: translate(3px, -2px);
        -ms-transform: translate(3px, -2px);
        -o-transform: translate(3px, -2px);
        transform: translate(3px, -2px);
    }

    40% {
        -webkit-transform: translate(0px, 2px);
        -moz-transform: translate(0px, 2px);
        -ms-transform: translate(0px, 2px);
        -o-transform: translate(0px, 2px);
        transform: translate(0px, 2px);
    }

    60% {
        -webkit-transform: translate(-2px, -3px);
        -moz-transform: translate(-2px, -3px);
        -ms-transform: translate(-2px, -3px);
        -o-transform: translate(-2px, -3px);
        transform: translate(-2px, -3px);
    }

    80% {
        -webkit-transform: translate(2px, 1px);
        -moz-transform: translate(2px, 1px);
        -ms-transform: translate(2px, 1px);
        -o-transform: translate(2px, 1px);
        transform: translate(2px, 1px);
    }

    100% {
        -webkit-transform: translate(-3px, 2px);
        -moz-transform: translate(-3px, 2px);
        -ms-transform: translate(-3px, 2px);
        -o-transform: translate(-3px, 2px);
        transform: translate(-3px, 2px);
    }
}

@-ms-keyframes kf-floating {
    0% {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    20% {
        -webkit-transform: translate(3px, -2px);
        -moz-transform: translate(3px, -2px);
        -ms-transform: translate(3px, -2px);
        -o-transform: translate(3px, -2px);
        transform: translate(3px, -2px);
    }

    40% {
        -webkit-transform: translate(0px, 2px);
        -moz-transform: translate(0px, 2px);
        -ms-transform: translate(0px, 2px);
        -o-transform: translate(0px, 2px);
        transform: translate(0px, 2px);
    }

    60% {
        -webkit-transform: translate(-2px, -3px);
        -moz-transform: translate(-2px, -3px);
        -ms-transform: translate(-2px, -3px);
        -o-transform: translate(-2px, -3px);
        transform: translate(-2px, -3px);
    }

    80% {
        -webkit-transform: translate(2px, 1px);
        -moz-transform: translate(2px, 1px);
        -ms-transform: translate(2px, 1px);
        -o-transform: translate(2px, 1px);
        transform: translate(2px, 1px);
    }

    100% {
        -webkit-transform: translate(-3px, 2px);
        -moz-transform: translate(-3px, 2px);
        -ms-transform: translate(-3px, 2px);
        -o-transform: translate(-3px, 2px);
        transform: translate(-3px, 2px);
    }
}

@-o-keyframes kf-floating {
    0% {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    20% {
        -webkit-transform: translate(3px, -2px);
        -moz-transform: translate(3px, -2px);
        -ms-transform: translate(3px, -2px);
        -o-transform: translate(3px, -2px);
        transform: translate(3px, -2px);
    }

    40% {
        -webkit-transform: translate(0px, 2px);
        -moz-transform: translate(0px, 2px);
        -ms-transform: translate(0px, 2px);
        -o-transform: translate(0px, 2px);
        transform: translate(0px, 2px);
    }

    60% {
        -webkit-transform: translate(-2px, -3px);
        -moz-transform: translate(-2px, -3px);
        -ms-transform: translate(-2px, -3px);
        -o-transform: translate(-2px, -3px);
        transform: translate(-2px, -3px);
    }

    80% {
        -webkit-transform: translate(2px, 1px);
        -moz-transform: translate(2px, 1px);
        -ms-transform: translate(2px, 1px);
        -o-transform: translate(2px, 1px);
        transform: translate(2px, 1px);
    }

    100% {
        -webkit-transform: translate(-3px, 2px);
        -moz-transform: translate(-3px, 2px);
        -ms-transform: translate(-3px, 2px);
        -o-transform: translate(-3px, 2px);
        transform: translate(-3px, 2px);
    }
}

@keyframes kf-floating {
    0% {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    20% {
        -webkit-transform: translate(3px, -2px);
        -moz-transform: translate(3px, -2px);
        -ms-transform: translate(3px, -2px);
        -o-transform: translate(3px, -2px);
        transform: translate(3px, -2px);
    }

    40% {
        -webkit-transform: translate(0px, 2px);
        -moz-transform: translate(0px, 2px);
        -ms-transform: translate(0px, 2px);
        -o-transform: translate(0px, 2px);
        transform: translate(0px, 2px);
    }

    60% {
        -webkit-transform: translate(-2px, -3px);
        -moz-transform: translate(-2px, -3px);
        -ms-transform: translate(-2px, -3px);
        -o-transform: translate(-2px, -3px);
        transform: translate(-2px, -3px);
    }

    80% {
        -webkit-transform: translate(2px, 1px);
        -moz-transform: translate(2px, 1px);
        -ms-transform: translate(2px, 1px);
        -o-transform: translate(2px, 1px);
        transform: translate(2px, 1px);
    }

    100% {
        -webkit-transform: translate(-3px, 2px);
        -moz-transform: translate(-3px, 2px);
        -ms-transform: translate(-3px, 2px);
        -o-transform: translate(-3px, 2px);
        transform: translate(-3px, 2px);
    }
}

.kv-ani-el {
    opacity: 0;
    -webkit-transform-origin: 70% 50%;
    -moz-transform-origin: 70% 50%;
    -ms-transform-origin: 70% 50%;
    -o-transform-origin: 70% 50%;
    transform-origin: 70% 50%;
    -webkit-transition: opacity 1s ease-out 0s;
    -moz-transition: opacity 1s ease-out 0s;
    -ms-transition: opacity 1s ease-out 0s;
    -o-transition: opacity 1s ease-out 0s;
    transition: opacity 1s ease-out 0s;
}

.kv-ani-el.play {
    opacity: 1;
    -webkit-animation: kf-floating- 10s ease-in-out 0s infinite alternate;
    -moz-animation: kf-floating- 10s ease-in-out 0s infinite alternate;
    -ms-animation: kf-floating- 10s ease-in-out 0s infinite alternate;
    -o-animation: kf-floating- 10s ease-in-out 0s infinite alternate;
    animation: kf-floating- 10s ease-in-out 0s infinite alternate;
}

.round-button {
    border-radius: 200px;
}

.round-button .arrow {
    top: 50%;
    pointer-events: none;
    -webkit-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    transform: translate(0, -50%);
    -webkit-transition: opacity .3s ease-out 0s;
    -moz-transition: opacity .3s ease-out 0s;
    -ms-transition: opacity .3s ease-out 0s;
    -o-transition: opacity .3s ease-out 0s;
    transition: opacity .3s ease-out 0s;
}

.round-button .arrow.dark {
    background-position: -200px 0;
}

.round-button .arrow.white {
    background-position: -200px -100px;
}

.round-button .arrow.cyan {
    background-position: -200px -200px;
}

.round-button .arrow.blue {
    background-position: -200px -300px;
}

.btn-play-video {
    position: relative;
    border: none;
    color: #0096d7;
    background-color: white;
    font-size: 18px !important;
    padding: 9px 25px 9px 60px;
    box-shadow: 0 0 5px rgba(0, 0, 0, .2);
    -webkit-transition: transform .3s ease-out 0s;
    -moz-transition: transform .3s ease-out 0s;
    -ms-transition: transform .3s ease-out 0s;
    -o-transition: transform .3s ease-out 0s;
    transition: transform .3s ease-out 0s;
}

.btn-play-video:hover {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);
}

.btn-play-video .arrow {
    left: -20px;
    -webkit-transition: left .3s ease-out 0s;
    -moz-transition: left .3s ease-out 0s;
    -ms-transition: left .3s ease-out 0s;
    -o-transition: left .3s ease-out 0s;
    transition: left .3s ease-out 0s;
    -webkit-transform: translate(0, -50%) scale(.8);
    -moz-transform: translate(0, -50%) scale(.8);
    -ms-transform: translate(0, -50%) scale(.8);
    -o-transform: translate(0, -50%) scale(.8);
    transform: translate(0, -50%) scale(.8);
}

.btn-play-video .arrow.cyan {
    background-position: -300px -200px;
}

.btn-play-video .arrow.blue {
    background-position: -300px -300px;
}

.btn-play-video .arrow.orange {
    background-position: -300px -400px;
}

.btn-play-video .arrow.blue-slate {
    background-position: -300px -500px;
}

.btn-play-video .arrow.purple {
    background-position: -400px 0;
}

.btn-play-video .arrow.blue-purple {
    background-position: -400px -100px;
}

.btn-play-video .arrow.teal {
    background-position: -400px -200px;
}

.btn-play-video .arrow.steel {
    background-position: -400px -300px;
}

.btn-play-video .arrow.blue-deep {
    background-position: -400px -400px;
}

.btn-play-video .arrow.navy {
    background-position: -400px -500px;
}

.btn-get-more {
    padding: 5px 80px 4px 30px;
}

.btn-get-more:hover {
    color: #0096d7;
    border-color: #0096d7;
}

.btn-get-more .arrow {
    right: -10px;
    -webkit-transition: right .3s ease-out 0s;
    -moz-transition: right .3s ease-out 0s;
    -ms-transition: right .3s ease-out 0s;
    -o-transition: right .3s ease-out 0s;
    transition: right .3s ease-out 0s;
}

.btn-get-more:hover .arrow {
    right: -20px;
}

.btn-want-now {
    position: relative;
    border: none;
    color: #02a7d6;
    background-color: white;
    font-size: 18px !important;
    padding: 9px 25px 9px 60px;
    box-shadow: 0 0 5px rgba(0, 0, 0, .2);
    -webkit-transition: transform .3s ease-out 0s;
    -moz-transition: transform .3s ease-out 0s;
    -ms-transition: transform .3s ease-out 0s;
    -o-transition: transform .3s ease-out 0s;
    transition: transform .3s ease-out 0s;
}

.btn-want-now:hover {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);
}

.btn-want-now .arrow {
    left: -20px;
    -webkit-transition: left .3s ease-out 0s;
    -moz-transition: left .3s ease-out 0s;
    -ms-transition: left .3s ease-out 0s;
    -o-transition: left .3s ease-out 0s;
    transition: left .3s ease-out 0s;
    -webkit-transform: translate(0, -50%) scale(.8);
    -moz-transform: translate(0, -50%) scale(.8);
    -ms-transform: translate(0, -50%) scale(.8);
    -o-transform: translate(0, -50%) scale(.8);
    transform: translate(0, -50%) scale(.8);
}

.btn-want-now .arrow.blue {
    background-position: -100px -600px;
}

.btn-want-now .arrow.blue-purple {
    background-position: -100px -500px;
}

.btn-want-now .arrow.purple {
    background-position: -100px -400px;
}

.btn-know-product {
    position: relative;
    color: white;
    border: none;
    margin: 5px 0 0;
    padding: 5px 80px 5px 30px;
    background-color: #04cbfe;
}

.gradient-button {
    position: relative;
    border: none;
    overflow: hidden;
    display: inline-block;
}

.gradient-button span {
    display: inline-block;
}

.gradient-button .label {
    position: relative;
    z-index: 1000;
}

.gradient-text {
    position: relative;
    display: inline-block;
}

.gradient-text span {
    display: inline-block;
}

.gradient-text .masked {
    width: 100%;
    pointer-events: none;
}

.squared-text {
    position: relative;
}

.squared-text .square {
    position: absolute;
    opacity: 1;
    height: 50%;
    display: block;
    padding: 2px;
    pointer-events: none;
    background-color: white;
    box-sizing: content-box;
    -webkit-transition: opacity .3s ease-out 0s;
    -moz-transition: opacity .3s ease-out 0s;
    -ms-transition: opacity .3s ease-out 0s;
    -o-transition: opacity .3s ease-out 0s;
    transition: opacity .3s ease-out 0s;
}

.inner-hyper-link {
    margin: 0 2px;
    border-bottom: dotted #009fda;
}

.inner-hyper-link:hover {
    color: #009fda;
    border-bottom: solid;
}

.trial-link {
    color: #0096d7;
    margin: 20px 0 0;
    display: inline-block;
    -webkit-transition: all .3s ease-out 0s;
    -moz-transition: all .3s ease-out 0s;
    -ms-transition: all .3s ease-out 0s;
    -o-transition: all .3s ease-out 0s;
    transition: all .3s ease-out 0s;
    border-bottom: 1px solid transparent;
}

.trial-link.clear {
    float: left;
}

.trial-link:hover {
    border-bottom: 1px solid #0096d7;
}

.not-found-page {
    position: absolute;
    font-size: 24px;
    line-height: 40px;
    text-align: center;
    white-space: nowrap;
}

.not-found-page .tip {
    color: #333;
    font-size: 14px;
}

.lazy-show {
    opacity: 0;
    -webkit-transform: translate(0, 100%);
    -moz-transform: translate(0, 100%);
    -ms-transform: translate(0, 100%);
    -o-transform: translate(0, 100%);
    transform: translate(0, 100%);
}

.lazy-show.play {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
    -webkit-transition: all 1s ease-out 0s;
    -moz-transition: all 1s ease-out 0s;
    -ms-transition: all 1s ease-out 0s;
    -o-transition: all 1s ease-out 0s;
    transition: all 1s ease-out 0s;
}

.lazy-show.zoom-in {
    opacity: 1;
    -webkit-transform: scale(0, 0);
    -moz-transform: scale(0, 0);
    -ms-transform: scale(0, 0);
    -o-transform: scale(0, 0);
    transform: scale(0, 0);
}

.lazy-show.zoom-in.play {
    -webkit-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1);
}

.maxw-img {
    position: relative;
    width: 100%;
    margin: 0 auto;
    display: block;
    max-width: 1440px;
}

.maxw-layout {
    margin: 0 auto;
    max-width: 1440px;
}

.maxw-fs-wrap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: visible;
}

.notice-bar {
    position: relative;
    top: 0;
    width: 100%;
    height: 40px;
    z-index: 6050;
    display: none;
}

.has-notice .notice-bar {
    display: block;
}

.swiper-pagination {
    position: relative;
    margin: 2% auto 4%;
}

.swiper-pagination-bullet {
    width: 14px;
    height: 14px;
    opacity: .6;
    margin: 0 10px;
    background-color: gray;
}

.swiper-pagination-bullet-active {
    opacity: 1;
    background-color: #0096d7;
}

.win-frame .win-shadow {
    top: 4%;
    border-radius: 5%;
    box-shadow: 15px 15px 30px rgba(0, 0, 0, .15);
}

.win-frame .win-inner {
    position: absolute;
    top: 11%;
    left: .4%;
    right: .8%;
    bottom: 1%;
    overflow: hidden;
    border-radius: 0 0 3% 3%;
}

.rect-bubble {
    position: absolute;
    z-index: 5500;
    overflow: visible;
    pointer-events: none;
}

.rect-bubble .inner {
    border-radius: 20px;
    background-color: white;
    border: 0 solid #ededed;
    border-width: 0 3px 3px 0;
    padding: 20px 30px 20px 120px;
    -webkit-transform: scale(0, 0);
    -moz-transform: scale(0, 0);
    -ms-transform: scale(0, 0);
    -o-transform: scale(0, 0);
    transform: scale(0, 0);
    -webkit-transition: transform .6s ease-out 0s;
    -moz-transition: transform .6s ease-out 0s;
    -ms-transition: transform .6s ease-out 0s;
    -o-transition: transform .6s ease-out 0s;
    transition: transform .6s ease-out 0s;
    box-shadow: 15px 15px 30px rgba(0, 0, 0, .15);
}

.rect-bubble.play .inner {
    -webkit-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1);
}

.rect-bubble .icon {
    position: absolute;
    top: 0;
    left: 10px;
    width: 100px;
    height: auto;
}

.rect-bubble ul {
    color: #555;
    white-space: nowrap;
}

.card-box {
    position: relative;
    overflow: visible;
}

.card-box .inner {
    padding: 30px;
    border-radius: 20px;
    background-color: white;
    border: 0 solid #ededed;
    border-width: 0 3px 3px 0;
    box-shadow: 15px 15px 30px rgba(0, 0, 0, .15);
}

.card-box .icon {
    float: left;
    width: 25%;
}

.card-box .txt-wrap {
    float: left;
    width: 65%;
    text-align: left;
    margin-left: 10%;
}

.card-box .txt-wrap ul {
    margin: 5% 0 0;
    line-height: 1.8em;
}

.round-box {
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 15px 15px 30px rgba(0, 0, 0, .15);
}

.tab-bar {
    position: relative;
    padding: 0 0 2px;
}

.tab-bar .item {
    float: left;
    width: 20%;
    text-align: center;
    background-color: #f5f5f5;
    border-right: 1px solid #999;
}

.tab-bar .item:last-of-type {
    border-right: none;
}

.tab-bar .item.current {
    color: white;
    cursor: default;
    pointer-events: none;
    background-color: transparent;
}

.tab-bar .item .label {
    padding: .4em;
    cursor: pointer;
    -webkit-transition: transform .3s ease-out 0s;
    -moz-transition: transform .3s ease-out 0s;
    -ms-transition: transform .3s ease-out 0s;
    -o-transition: transform .3s ease-out 0s;
    transition: transform .3s ease-out 0s;
}

.tab-bar .item .label:hover {
    -webkit-transform: scale(1.03);
    -moz-transform: scale(1.03);
    -ms-transform: scale(1.03);
    -o-transform: scale(1.03);
    transform: scale(1.03);
}

.tab-bar.underline {
    padding: 0 20%;
    background-color: #f7f8f8;
    background-image: none !important;
}

.tab-bar.underline .item {
    color: #a1a1a1;
    border: none;
    background-color: transparent;
}

.tab-bar.underline .item.current {
    color: #000;
}

.tab-bar.underline .item .label {
    margin: 0 auto;
    display: inline-block;
    border-bottom: 4px solid #f7f8f8;
}

.tab-bar.underline .item .label:hover {
    border-bottom-color: #6bdfff;
}

.tab-bar.underline .item.current .label {
    border-bottom-color: #00bdf2;
}

.work-flow .item {
    position: relative;
    float: left;
    width: 20%;
    z-index: 500;
    margin: 0 .5%;
    -webkit-transform: translate(-10%, 0);
    -moz-transform: translate(-10%, 0);
    -ms-transform: translate(-10%, 0);
    -o-transform: translate(-10%, 0);
    transform: translate(-10%, 0);
}

.work-flow .item.play {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
}

.work-flow .item.arrow {
    width: 5%;
    z-index: 100;
    -webkit-transform: translate(-100%, 0);
    -moz-transform: translate(-100%, 0);
    -ms-transform: translate(-100%, 0);
    -o-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
}

.work-flow .item.arrow.play {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
}

.page-kv {
    height: 480px;
}

.page-kv .sec-txt-wrap {
    top: 18%;
    left: 10%;
    width: 60%;
    color: white;
    z-index: 9000;
}

.page-kv .desc {
    margin: 2% 0 0;
}

.page-kv .btn-want-now {
    margin: 4% 0 0;
}

.page-kv .screenshot {
    height: auto;
    z-index: 8000;
}

.empty-result-tip {
    color: #555;
    padding: 5% 0;
    font-size: 20px;
    text-align: center;
}

@media all and (max-width: 750px) {
    .empty-result-tip {
        padding: 10% 0;
        font-size: 26px;
    }
}

@media all and (max-width: 750px) {
    .notice-bar {
        height: 60px;
    }
}

.header {
    position: absolute;
    top: 0;
    width: 100%;
    height: 80px;
    z-index: 7000;
    font-size: 14px;
    -webkit-transition: opacity .3s ease-out 0s;
    -moz-transition: opacity .3s ease-out 0s;
    -ms-transition: opacity .3s ease-out 0s;
    -o-transition: opacity .3s ease-out 0s;
    transition: opacity .3s ease-out 0s;
}

.has-notice .header {
    top: 40px;
}

.header-dark {
    opacity: 0;
    pointer-events: none;
}

.header-white {
    background-color: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
}

.dark-style .header-dark {
    opacity: 1;
    pointer-events: auto;
}

.dark-style .header-white {
    opacity: 0;
    pointer-events: none;
}

.header.transparent {
    opacity: 0 !important;
}

.header.topest {
    z-index: 100000;
}

.header .logo {
    left: 8%;
    width: 200px;
}

.header .phone {
    position: absolute;
    top: 12px;
    right: 8%;
    white-space: pre;
}

.header .phone:hover {
    color: #0096d7;
}

.header-dark .phone {
    opacity: .5;
    color: white;
}

.header-dark .phone:hover {
    opacity: 1;
    color: #01dbfd;
}

.header .menu-toggle {
    position: absolute;
    top: 15px;
    left: 0;
    width: 44px;
    height: 50px;
    cursor: pointer;
    background-color: #323b55;
}

.header .menu-toggle .hamburger {
    top: -25px;
    left: -28px;
    -webkit-transform: scale(.62);
    -moz-transform: scale(.62);
    -ms-transform: scale(.62);
    -o-transform: scale(.62);
    transform: scale(.62);
    background-position: 0 -100px;
}

.header .menu-toggle:hover .hamburger {
    background-position: 0 -200px;
}

.header .menu-toggle .label {
    position: absolute;
    top: 120%;
    left: -8%;
    opacity: .7;
    color: white;
    font-size: 14px;
    line-height: 50px;
}

.header .menu-toggle:hover .label {
    color: #01dbfd;
}

.header-dark.fixed .menu-toggle {
    position: fixed;
}

.header-white.fixed {
    position: fixed;
    top: 0;
}

.header-white .menu-toggle {
    display: none;
    background-color: transparent;
}

.header-white .menu-toggle .hamburger {
    background-position: 0 0;
}

.header-white .menu-toggle:hover .hamburger {
    background-position: 0 0;
}

.header .menu {
    position: relative;
    left: 28%;
    top: 9px;
    width: auto;
    text-align: left;
    overflow: visible;
    white-space: nowrap;
}

.header .menu .item {
    position: relative;
    color: #666;
    font-size: 15px;
    line-height: 20px;
    margin-right: 1%;
    cursor: pointer;
    overflow: visible;
    display: inline-block;
    border-radius: 10px 10px 0 0;
    -webkit-transition: all .3s ease-out 0s;
    -moz-transition: all .3s ease-out 0s;
    -ms-transition: all .3s ease-out 0s;
    -o-transition: all .3s ease-out 0s;
    transition: all .3s ease-out 0s;
}

.header .menu .item:hover {
    color: #04b0e0;
}

.header .menu .item.opened {
    color: white;
    background-color: #04b0e0;
}

.header .menu .label {
    padding: 15px 20px;
}

.header .menu .under {
    width: 0;
    height: 5px;
    bottom: -5px;
    background-color: #04b0e0;
    -webkit-transition: all .5s ease-out .1s;
    -moz-transition: all .5s ease-out .1s;
    -ms-transition: all .5s ease-out .1s;
    -o-transition: all .5s ease-out .1s;
    transition: all .5s ease-out .1s;
}

.header .menu .item:hover .under {
    width: 100%;
}

.header .menu .opened .under {
    width: 3000px !important;
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -ms-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}

@media all and (max-width: 1350px) {
    .header .menu .item {
        margin-right: 0;
    }
}

@media all and (max-width: 1250px) {
    .header .menu .label {
        padding: 15px;
    }
}

@media all and (max-width: 1150px) {
    .header .menu .label {
        padding: 15px 10px;
    }
}

.header .btn-register {
    top: 42px;
    right: 8%;
    color: #0096d7;
    border-color: #b5b5b6;
    padding: 3px 15px 3px 35px;
}

.header .btn-register .arrow {
    left: -35px;
    -webkit-transition: left .3s ease-out 0s;
    -moz-transition: left .3s ease-out 0s;
    -ms-transition: left .3s ease-out 0s;
    -o-transition: left .3s ease-out 0s;
    transition: left .3s ease-out 0s;
    -webkit-transform: translate(0, -50%) scale(.8);
    -moz-transform: translate(0, -50%) scale(.8);
    -ms-transform: translate(0, -50%) scale(.8);
    -o-transform: translate(0, -50%) scale(.8);
    transform: translate(0, -50%) scale(.8);
}

.header .btn-register .cyan {
    opacity: 0;
}

.header .btn-register:hover {
    border-color: #0096d7;
}

.header .btn-register:hover .arrow {
    left: -30px;
}

.header-dark .btn-register {
    color: white;
    border-color: white;
    background-color: #131722;
}

.header-dark .btn-register:hover {
    color: #01dbfd;
    border-color: #01dbfd;
    background-color: #131722;
}

.header-dark .btn-register:hover .cyan {
    opacity: 1;
}

.header .btn-trial {
    top: 42px;
    right: 8%;
    color: white;
    border-color: #0096d7;
    background-color: #0096d7;
    padding: 3px 15px 3px 35px;
    -webkit-transform: translate(-155px, 0);
    -moz-transform: translate(-155px, 0);
    -ms-transform: translate(-155px, 0);
    -o-transform: translate(-155px, 0);
    transform: translate(-155px, 0);
}

.header .btn-trial .arrow {
    left: -35px;
    -webkit-transition: left .3s ease-out 0s;
    -moz-transition: left .3s ease-out 0s;
    -ms-transition: left .3s ease-out 0s;
    -o-transition: left .3s ease-out 0s;
    transition: left .3s ease-out 0s;
    -webkit-transform: translate(0, -50%) scale(.8);
    -moz-transform: translate(0, -50%) scale(.8);
    -ms-transform: translate(0, -50%) scale(.8);
    -o-transform: translate(0, -50%) scale(.8);
    transform: translate(0, -50%) scale(.8);
}

.header .btn-trial .cyan {
    opacity: 0;
}

.header .btn-trial:hover {
    border-color: #ff9c00;
    background-color: #ff9c00;
}

.header .btn-trial:hover .arrow {
    left: -30px;
}

.header-dark .btn-trial {
    border-color: #ff9c00;
    background-color: #131722;
}

.header-dark .btn-trial:hover {
    color: #fff;
    border-color: #ff9c00;
    background-color: #ff9c00;
}

.header-dark .btn-trial:hover .cyan {
    opacity: 0;
}

@media all and (max-width: 750px) {
    .header-dark {
        top: 60px;
    }

    .has-notice .header {
        top: 60px;
    }

    .has-notice .header-dark {
        top: 120px;
    }

    .header-white.fixed {
        top: 0;
    }

    .header .logo {
        width: 220px;
    }

    .header .menu,.header .phone,.header .btn-trial,.header .btn-register {
        display: none;
    }

    .header .menu-toggle {
        left: auto;
        right: 40px;
    }

    .header-white .menu-toggle {
        display: block;
    }
}

.footer {
    position: relative;
    color: white;
    font-size: 13px;
    padding: 4% 12%;
    z-index: 5000;
    background-color: #131722;
}

.footer .knx-logo {
    width: 170px;
}

.footer a {
    color: white;
    white-space: nowrap;
    display: inline-block;
    word-wrap: break-word; /* 允许长单词或URL换行 */
    white-space: normal;  
    vertical-align: top;
}

.footer a:hover {
    color: #01dbfd;
}

.footer .cols-wrap {
    margin: 40px 0;
}

.footer .col {
    float: left;
    margin-right: 2%;
}

.footer .col a {
    /* width: 48%; */
    margin: 5px 0;
    display: block;
}

.footer .col .title {
    min-height: 60px;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.3em;
    white-space: nowrap;
}

.footer .col-a {
    width: 25%;
}

.footer .col-b {
    width: 11%;
}

.footer .col-b a {
    width: 90%;
}

.footer .resource {
    margin-left: 2%;
}

.footer .service {
    width: 18%;
    margin-right: 0;
    text-align: center;
}

.footer .service a {
    width: 100%;
    font-size: 13px;
}

.footer .service .qrcode {
    width: 100%;
    max-width: 100px;
    margin: 10px 0 0;
}

.footer .service .scan {
    margin: 10px 0 0;
    white-space: nowrap;
}

.footer .certs {
    margin: 30px 0;
}

.footer .certs a {
    float: left;
    font-size: 14px;
    white-space: nowrap;
    margin: 5px 4% 5px 0;
    display: flex;
    align-items: center;
}

.footer .certs a:before {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 50%;
    margin-right: 8px;
    background-color: #0b99da;
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -ms-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(2);
    display: inline-block;
}

.footer .logos a {
    position: relative;
    float: left;
    width: 8.5%;
    margin: 0 .28%;
    -webkit-transition: all .3s ease-out 0s;
    -moz-transition: all .3s ease-out 0s;
    -ms-transition: all .3s ease-out 0s;
    -o-transition: all .3s ease-out 0s;
    transition: all .3s ease-out 0s;
}

.footer .logos .colored {
    opacity: 0;
}

.footer .logos a:hover {
    -webkit-transform: scale(1.15);
    -moz-transform: scale(1.15);
    -ms-transform: scale(1.15);
    -o-transform: scale(1.15);
    transform: scale(1.15);
}

.footer .logos a:hover .white {
    opacity: 0;
}

.footer .logos a:hover .colored {
    opacity: 1;
}

.footer .links {
    position: relative;
    margin: 40px 2% 0 0;
    padding: 0 80px 0 0;
}

.footer .links a {
    margin: 0px 4% 0 0;
    white-space: nowrap;
    display: inline-block;
}

.footer .links .cr {
    margin: 10px 4% 0 0;
}

.footer .links .privacy {
    position: absolute;
    right: 0;
    margin-right: 0;
}

@media all and (max-width: 750px) {
    .footer {
        padding: 10% 7% 20%;
    }

    .dark-style .footer {
        padding-bottom: 10%;
    }

    .footer .knx-logo {
        width: 200px;
    }

    .footer .cols-wrap {
        margin: 40px 0 20px;
    }

    .footer .col .title {
        font-size: 18px;
        min-height: 40px;
    }

    .footer .col-a,.footer .know-us,.footer .service {
        display: none;
    }

    .footer .resource {
        margin-left: 0;
    }

    .footer .col-b {
        width: 100%;
    }

    .footer .col-b a {
        width: 20%;
        padding: 10px 0;
        font-size: 16px;
    }

    .footer .certs {
        margin: 20px 0 30px;
    }

    .footer .certs a {
        font-size: 16px;
        padding: 10px 0;
    }

    .footer .logos a {
        width: 16.4%;
        margin: 5px 0;
    }

    .footer .links {
        margin: 6% 0 0;
        font-size: 14px;
        white-space: normal;
    }

    .footer .links .cr,.footer .links a {
        margin: 10px 5% 20px 0;
    }
}

.main-menu {
    position: fixed;
    z-index: 6100;
    padding-top: 80px;
    background-color: white;
    -webkit-transform: translate(0, -100%);
    -moz-transform: translate(0, -100%);
    -ms-transform: translate(0, -100%);
    -o-transform: translate(0, -100%);
    transform: translate(0, -100%);
    -webkit-transition: all .2s ease-out 0s;
    -moz-transition: all .2s ease-out 0s;
    -ms-transition: all .2s ease-out 0s;
    -o-transition: all .2s ease-out 0s;
    transition: all .2s ease-out 0s;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
}

.main-menu.opened {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
    -webkit-transition: all .5s ease-out 0s;
    -moz-transition: all .5s ease-out 0s;
    -ms-transition: all .5s ease-out 0s;
    -o-transition: all .5s ease-out 0s;
    transition: all .5s ease-out 0s;
}

.main-menu .lv-root {
    position: absolute;
    top: 80px;
    bottom: 0;
    left: 25%;
    width: 68%;
    display: none;
    overflow: visible;
    max-width: 1100px;
}

.main-menu .lv-root.current {
    display: block;
}

.main-menu .lv-root .bg2 {
    width: 26%;
    background-color: #f6f6f6;
}

.main-menu .lv-root .bg3 {
    left: 26%;
    width: 45%;
    /* background-color: #fbfbfb; */
}

.main-menu .solution .bg3 {
    left: 71%;
    /* background-color: #f6f6f6; */
}

.main-menu .lv-1 {
    position: absolute;
    left: 0;
    width: 160px;
    padding: 50px 0;
    -webkit-transform: translate(-100%, 0);
    -moz-transform: translate(-100%, 0);
    -ms-transform: translate(-100%, 0);
    -o-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
}

.main-menu .lv-1 .item {
    padding: 10px;
    margin: 0 0 30px;
    font-size: 18px;
    line-height: 30px;
    cursor: pointer;
    text-align: center;
    border-radius: 10px 0 0 10px;
    -webkit-transition: all .3s ease-out 0s;
    -moz-transition: all .3s ease-out 0s;
    -ms-transition: all .3s ease-out 0s;
    -o-transition: all .3s ease-out 0s;
    transition: all .3s ease-out 0s;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.main-menu .lv-1 .item:hover {
    background-color: #f6f6f6;
    /* overflow: visible;
    white-space: normal;
    position: absolute;
    background: white;
    z-index: 10;
    padding: 5px;
    border: 1px solid #eee;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); */
}

.main-menu .lv-1 .item.current {
    color: #38b9e3;
    font-size: 20px;
    background-color: #f6f6f6;
}

.main-menu .lv-2,.main-menu .lv-3,.main-menu .lv-4 {
    position: absolute;
    top: 0;
    bottom: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    -webkit-transform: translate(0, 100px);
    -moz-transform: translate(0, 100px);
    -ms-transform: translate(0, 100px);
    -o-transform: translate(0, 100px);
    transform: translate(0, 100px);
    -webkit-transition: all .3s ease-out 0s;
    -moz-transition: all .3s ease-out 0s;
    -ms-transition: all .3s ease-out 0s;
    -o-transition: all .3s ease-out 0s;
    transition: all .3s ease-out 0s;
}

.main-menu .lv-2.current,.main-menu .lv-3.current,.main-menu .lv-4.current {
    opacity: 1;
    pointer-events: auto;
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
}

.main-menu .lv-2 {
    width: 26%;
    padding: 60px 0 0 4%;
}

.main-menu .lv-2 .item {
    font-size: 16px;
    cursor: pointer;
    margin: 0 0 20px;
    line-height: 30px;
    -webkit-transition: all .3s ease-out 0s;
    -moz-transition: all .3s ease-out 0s;
    -ms-transition: all .3s ease-out 0s;
    -o-transition: all .3s ease-out 0s;
    transition: all .3s ease-out 0s;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.main-menu .lv-2 .item:hover {
    color: #38b9e3;
}

.main-menu .lv-2 .item.current {
    color: #38b9e3;
}

.main-menu .lv-3 {
    left: 26%;
    width: 45%;
    padding: 60px 4%;
}

.main-menu .lv-4 {
    left: 71%;
    width: 29%;
    padding: 60px 3%;
    display:  none;
}

.main-menu .lv-3 .title {
    font-size: 17px;
    line-height: 30px;
}

.main-menu .lv-3 .intro {
    color: #757575;
    font-size: 14px;
    margin: 15px 0 25px;
    line-height: 1.8em;
}

.main-menu .lv-3 .intro br {
    margin: 5px 0 0;
}

.main-menu .btn-go {
    position: relative;
    color: #02a7d6;
    border-color: #02a7d6;
    padding: 9px 25px 9px 50px;
    background-color: #ffffff;
    -webkit-transition: all .3s ease-out 0s;
    -moz-transition: all .3s ease-out 0s;
    -ms-transition: all .3s ease-out 0s;
    -o-transition: all .3s ease-out 0s;
    transition: all .3s ease-out 0s;
}

.main-menu .btn-go:hover {
    color: white;
    border-color: #ff9c00;
    background-color: #ff9c00;
}

.main-menu .btn-go .arrow {
    left: -28px;
    -webkit-transition: all .3s ease-out 0s;
    -moz-transition: all .3s ease-out 0s;
    -ms-transition: all .3s ease-out 0s;
    -o-transition: all .3s ease-out 0s;
    transition: all .3s ease-out 0s;
    -webkit-transform: translate(0, -50%) scale(.6);
    -moz-transform: translate(0, -50%) scale(.6);
    -ms-transform: translate(0, -50%) scale(.6);
    -o-transform: translate(0, -50%) scale(.6);
    transform: translate(0, -50%) scale(.6);
}

.main-menu .btn-go:hover .arrow {
    left: -20px;
}

.main-menu .btn-go .arrow.blue {
    opacity: 1;
    background-position: -100px -600px;
}

.main-menu .btn-go:hover .arrow.blue {
    opacity: 0;
}

.main-menu .btn-go .arrow.white {
    opacity: 0;
    background-position: -100px -700px;
}

.main-menu .btn-go:hover .arrow.white {
    opacity: 1;
}

.main-menu .video {
    position: relative;
    width: 100%;
    cursor: pointer;
    overflow: hidden;
    border-radius: 5px;
}

.main-menu .video .btn-play {
    width: auto;
    height: 55%;
}

.main-menu .video:hover .btn-play {
    -webkit-transform: translate(-50%, -50%) scale(1.1);
    -moz-transform: translate(-50%, -50%) scale(1.1);
    -ms-transform: translate(-50%, -50%) scale(1.1);
    -o-transform: translate(-50%, -50%) scale(1.1);
    transform: translate(-50%, -50%) scale(1.1);
}

.main-menu .video.no-video {
    pointer-events: none;
}

.main-menu .video.no-video .btn-play {
    display: none;
}

.main-menu .advantage {
    font-size: 14px;
    margin: 30px 0 0;
}

.main-menu .advantage .title {
    font-size: 16px;
}

.main-menu .advantage ul {
    color: #727272;
    line-height: 2em;
    margin: 10px 0 0;
}

.main-menu .advantage li {
    list-style-position: inside;
}

.main-menu .preview {
    position: relative;
    width: 100%;
    border-radius: 5px;
}

.main-menu .lv-4 .desc {
    color: #727272;
    line-height: 2em;
    margin: 30px 0 0;
}

.main-menu .lv-4 .desc br {
    display: none;
}

.menu-layer {
    color: white;
    background-color: #131722;
}

.menu-layer .glass {
    width: auto;
    height: 1000px;
}

.menu-layer .cross {
    opacity: .5;
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -ms-filter: blur(5px);
    -o-filter: blur(5px);
    filter: blur(5px);
}

.menu-layer .core-wrap {
    width: 1150px;
    height: 600px;
}

.menu-layer .btn-close {
    top: -20px;
    right: -20px;
    -webkit-transform: scale(.6);
    -moz-transform: scale(.6);
    -ms-transform: scale(.6);
    -o-transform: scale(.6);
    transform: scale(.6);
    background-position: -100px -100px;
}

.menu-layer .btn-close:hover {
    background-position: -100px -200px;
}

.menu-layer .hcm {
    position: absolute;
    left: 35px;
    top: 150px;
    width: 160px;
    height: auto;
}

.menu-layer .menu-col {
    position: absolute;
    top: 50px;
    bottom: 50px;
    left: 260px;
    width: 130px;
    overflow: visible;
    border-left: 1px solid #525252;
}

.menu-layer .col-root {
    border-left: none;
}

.menu-layer .level-2 {
    left: 400px;
    width: 175px;
}

.menu-layer .menu-col .title {
    font-size: 18px;
    margin: 0 0 20px;
    line-height: 30px;
    text-align: center;
}

.menu-layer .item {
    position: relative;
    float: left;
    width: 100%;
    color: white;
    padding: 10px;
    margin: 0 0 10px;
    cursor: pointer;
    font-size: 16px;
    min-height: 50px;
    line-height: 20px;
    display: block;
    text-align: center;
    overflow: visible;
}

.menu-layer .item .desc {
    opacity: .5;
    font-size: 12px;
    margin: 10px 0 0;
    line-height: 18px;
}

.menu-layer .item .line {
    width: 0;
    height: 1px;
    opacity: .8;
    background: white;
    -webkit-transition: all .3s ease-out 0s;
    -moz-transition: all .3s ease-out 0s;
    -ms-transition: all .3s ease-out 0s;
    -o-transition: all .3s ease-out 0s;
    transition: all .3s ease-out 0s;
}

.menu-layer .item .label {
    font-size: 16px;
    -webkit-transition: all .3s ease-out 0s;
    -moz-transition: all .3s ease-out 0s;
    -ms-transition: all .3s ease-out 0s;
    -o-transition: all .3s ease-out 0s;
    transition: all .3s ease-out 0s;
}

.menu-layer .item.cur .label,.menu-layer .item:hover .label {
    color: #00f6ff;
}

.menu-layer .col-root .item {
    text-align: left;
    line-height: 32px;
}

.menu-layer .col-root .item .label {
    font-size: 21px;
}

.menu-layer .col-root .item .line {
    left: 0;
    height: 2px;
    background-color: #00f6ff;
}

.menu-layer .col-root .item:hover .line {
    width: 20px;
}

.menu-layer .col-root .item:hover .label {
    -webkit-transform: translate(15px, 0);
    -moz-transform: translate(15px, 0);
    -ms-transform: translate(15px, 0);
    -o-transform: translate(15px, 0);
    transform: translate(15px, 0);
}

.menu-layer .col-root .mi-event {
    display: none;
}

.menu-layer .col-solus .item {
    width: 25%;
    margin: 0 0 20px;
    padding: 65px 0 15px;
}

.menu-layer .col-solus .item .icon {
    top: -20px;
    width: 100px;
    height: 100px;
    background-size: 400px auto;
    -webkit-transition: all .3s ease-out 0s;
    -moz-transition: all .3s ease-out 0s;
    -ms-transition: all .3s ease-out 0s;
    -o-transition: all .3s ease-out 0s;
    transition: all .3s ease-out 0s;
}

.menu-layer .col-solus .item .icon2 {
    opacity: 0;
}

.menu-layer .col-solus .item .line {
    bottom: 0;
}

.menu-layer .col-solus .item:hover .line {
    width: 70%;
}

.menu-layer .col-solus .item:hover .icon2 {
    opacity: 1;
}

.menu-layer .col-about {
    padding: 0 200px 0 20px;
}

.menu-layer .col-about .title {
    text-align: left;
    padding: 0 150px 50px 35px;
}

.menu-layer .col-about .title .sub {
    font-size: 14px;
    margin: 15px 0 0;
}

.menu-layer .col-about .item {
    width: 18%;
}

.menu2-layer {
    background-color: rgba(255, 255, 255, .95);
}

.menu2-layer .glass {
    width: auto;
    height: 1000px;
    display: none;
}

.menu2-layer .cross {
    opacity: .5;
    display: none;
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -ms-filter: blur(5px);
    -o-filter: blur(5px);
    filter: blur(5px);
}

.menu2-layer .top-bar {
    position: relative;
    height: 80px;
    z-index: 1000;
    background-color: white;
}

.menu2-layer .core-wrap {
    position: absolute;
    top: 80px;
    bottom: 0;
    width: 100%;
    padding: 50px;
    z-index: 1000;
    overflow: auto;
}

.menu2-layer .btn-close {
    top: -10px;
    background-position: -100px 0;
}

.menu2-layer .logo {
    left: 8%;
    width: 220px;
}

.menu2-layer .hcm {
    width: 140px;
    margin: 30px 0 50px;
}

.menu2-layer .hcm.white,.menu2-layer .logo.white {
    display: none;
}

.menu2-layer .menu-item {
    position: relative;
    color: #333;
    display: block;
    font-size: 28px;
    line-height: 90px;
    border: 0 solid #ccc;
    border-width: 0 0 3px;
}

.menu2-layer .menu-item.no-border {
    border: none;
}

.menu2-layer .title {
    position: relative;
}

.menu2-layer .label {
    padding-left: 50px;
}

.menu2-layer .sub-list {
    position: relative;
    display: none;
}

.menu2-layer .btn-expand {
    right: 30px;
    width: 50px;
    height: 50px;
    background-position: 0 -350px;
}

.menu2-layer .expanded .btn-expand {
    background-position: -50px -350px;
}

.menu2-layer .mi-lv2 {
    font-size: 26px;
    border-width: 2px 0 0;
}

.menu2-layer .mi-lv2 .label {
    padding-left: 75px;
}

.menu2-layer .mi-lv2 .sub-list {
    padding-bottom: 20px;
}

.menu2-layer .solution .sub-list {
    padding-bottom: 20px;
}

.menu2-layer .mi-lv3 {
    color: #666;
    border: none;
    font-size: 24px;
    line-height: 60px;
}

.menu2-layer .mi-lv3 .label {
    padding-left: 100px;
}

.dark-style .menu2-layer {
    background-color: #131722;
}

.dark-style .menu2-layer .glass,.dark-style .menu2-layer .cross {
    display: block;
}

.dark-style .menu2-layer .top-bar {
    height: 200px;
    background-color: transparent;
}

.dark-style .menu2-layer .core-wrap {
    top: 200px;
}

.dark-style .menu2-layer .btn-close {
    top: 50px;
    background-position: -100px -100px;
}

.dark-style .menu2-layer .hcm.white,.dark-style .menu2-layer .logo.white {
    display: block;
}

.dark-style .menu2-layer .hcm.dark,.dark-style .menu2-layer .logo.dark {
    display: none;
}

.dark-style .menu2-layer .menu-item {
    color: white;
    border-color: rgba(255, 255, 255, .4);
}

.dark-style .menu2-layer .mi-lv3 {
    color: #b9b9b9;
}

.dark-style .menu2-layer .btn-expand {
    background-position: 0 -300px;
}

.dark-style .menu2-layer .expanded .btn-expand {
    background-position: -50px -300px;
}

.apply-layer .content {
    color: #999;
    width: 400px;
    font-size: 20px;
    text-align: center;
    line-height: 1.6em;
    border-radius: 10px;
    padding: 10px 20px 30px;
    background-color: white;
}

.apply-layer .qrcode {
    width: 60%;
    margin: 5%;
}

.apply-layer .btn-close {
    top: -15px;
    right: -15px;
    -webkit-transform: scale(.6);
    -moz-transform: scale(.6);
    -ms-transform: scale(.6);
    -o-transform: scale(.6);
    transform: scale(.6);
    background-position: -100px 0;
}

.expok-layer .content {
    color: #999;
    width: 400px;
    padding: 40px;
    font-size: 16px;
    text-align: center;
    line-height: 1.5em;
    border-radius: 10px;
    background-color: white;
}

.expok-layer .title {
    color: #00cbff;
    font-size: 22px;
    line-height: 1.5em;
    font-weight: bold;
}

.expok-layer .msg {
    color: #555;
    font-size: 18px;
    margin: .5em 0 0;
}

.expok-layer .qrcode {
    width: 60%;
    margin: 6%;
}

.expok-layer .btn-close {
    top: auto;
    right: auto;
    bottom: -100px;
    background-position: -100px -300px;
}

.loading-layer {
    z-index: 8500;
    background-color: rgba(0, 0, 0, 0);
}

.video-layer .video-player {
    width: 80%;
}

.video-layer .btn-close {
    background-position: -100px -100px;
}

.video-layer .btn-play {
    width: 10%;
    height: auto;
}

.survey-layer .content {
    width: 50%;
    max-width: 800px;
}

.survey-layer .content img {
    width: 100%;
}

.survey-layer .content .btn-close {
    top: -50px;
    right: -50px;
    background-position: 0 -450px;
}

@media all and (max-width: 750px) {
    .video-layer .video-player {
        width: 100%;
    }

    .survey-layer .content {
        width: 90%;
    }

    .survey-layer .content .btn-close {
        top: -110px;
        right: -40px;
        width: 100px;
        height: 100px;
        background-position: -100px -100px;
    }
}

@-webkit-keyframes kf-client-wall-1 {
    0% {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    100% {
        -webkit-transform: translate(-33.333%, 0);
        -moz-transform: translate(-33.333%, 0);
        -ms-transform: translate(-33.333%, 0);
        -o-transform: translate(-33.333%, 0);
        transform: translate(-33.333%, 0);
    }
}

@-moz-keyframes kf-client-wall-1 {
    0% {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    100% {
        -webkit-transform: translate(-33.333%, 0);
        -moz-transform: translate(-33.333%, 0);
        -ms-transform: translate(-33.333%, 0);
        -o-transform: translate(-33.333%, 0);
        transform: translate(-33.333%, 0);
    }
}

@-ms-keyframes kf-client-wall-1 {
    0% {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    100% {
        -webkit-transform: translate(-33.333%, 0);
        -moz-transform: translate(-33.333%, 0);
        -ms-transform: translate(-33.333%, 0);
        -o-transform: translate(-33.333%, 0);
        transform: translate(-33.333%, 0);
    }
}

@-o-keyframes kf-client-wall-1 {
    0% {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    100% {
        -webkit-transform: translate(-33.333%, 0);
        -moz-transform: translate(-33.333%, 0);
        -ms-transform: translate(-33.333%, 0);
        -o-transform: translate(-33.333%, 0);
        transform: translate(-33.333%, 0);
    }
}

@keyframes kf-client-wall-1 {
    0% {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    100% {
        -webkit-transform: translate(-33.333%, 0);
        -moz-transform: translate(-33.333%, 0);
        -ms-transform: translate(-33.333%, 0);
        -o-transform: translate(-33.333%, 0);
        transform: translate(-33.333%, 0);
    }
}

@-webkit-keyframes kf-client-wall-2 {
    0% {
        -webkit-transform: translate(-33.333%, 0);
        -moz-transform: translate(-33.333%, 0);
        -ms-transform: translate(-33.333%, 0);
        -o-transform: translate(-33.333%, 0);
        transform: translate(-33.333%, 0);
    }

    100% {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}

@-moz-keyframes kf-client-wall-2 {
    0% {
        -webkit-transform: translate(-33.333%, 0);
        -moz-transform: translate(-33.333%, 0);
        -ms-transform: translate(-33.333%, 0);
        -o-transform: translate(-33.333%, 0);
        transform: translate(-33.333%, 0);
    }

    100% {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}

@-ms-keyframes kf-client-wall-2 {
    0% {
        -webkit-transform: translate(-33.333%, 0);
        -moz-transform: translate(-33.333%, 0);
        -ms-transform: translate(-33.333%, 0);
        -o-transform: translate(-33.333%, 0);
        transform: translate(-33.333%, 0);
    }

    100% {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}

@-o-keyframes kf-client-wall-2 {
    0% {
        -webkit-transform: translate(-33.333%, 0);
        -moz-transform: translate(-33.333%, 0);
        -ms-transform: translate(-33.333%, 0);
        -o-transform: translate(-33.333%, 0);
        transform: translate(-33.333%, 0);
    }

    100% {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}

@keyframes kf-client-wall-2 {
    0% {
        -webkit-transform: translate(-33.333%, 0);
        -moz-transform: translate(-33.333%, 0);
        -ms-transform: translate(-33.333%, 0);
        -o-transform: translate(-33.333%, 0);
        transform: translate(-33.333%, 0);
    }

    100% {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}

.client-wall {
    position: relative;
}

.client-wall .holder {
    width: 10%;
    max-width: 140px;
}

.client-wall .p-holder {
    width: auto;
    height: 100%;
}

.client-wall .tier {
    position: relative;
    margin: 0 0 1.5%;
    overflow: visible;
    pointer-events: none;
}

.client-wall .tier:last-of-type {
    margin-bottom: 0;
}

.client-wall .logos {
    right: auto;
    overflow: visible;
    white-space: nowrap;
}

.client-wall .tier2 .logos {
    -webkit-transform: translate(-33.333%, 0);
    -moz-transform: translate(-33.333%, 0);
    -ms-transform: translate(-33.333%, 0);
    -o-transform: translate(-33.333%, 0);
    transform: translate(-33.333%, 0);
}

.client-wall.play .logos {
    -webkit-animation: kf-client-wall-1 50s linear 0s infinite forwards;
    -moz-animation: kf-client-wall-1 50s linear 0s infinite forwards;
    -ms-animation: kf-client-wall-1 50s linear 0s infinite forwards;
    -o-animation: kf-client-wall-1 50s linear 0s infinite forwards;
    animation: kf-client-wall-1 50s linear 0s infinite forwards;
}

.client-wall.play .tier2 .logos {
    -webkit-animation: kf-client-wall-2 50s linear 0s infinite forwards;
    -moz-animation: kf-client-wall-2 50s linear 0s infinite forwards;
    -ms-animation: kf-client-wall-2 50s linear 0s infinite forwards;
    -o-animation: kf-client-wall-2 50s linear 0s infinite forwards;
    animation: kf-client-wall-2 50s linear 0s infinite forwards;
}

.client-wall .tier .pic {
    position: relative;
    height: 100%;
    margin: 0 5px;
    overflow: hidden;
    border-radius: 10px;
    display: inline-block;
}

@media all and (max-width: 750px) {
    .client-wall .holder {
        width: 25%;
        max-width: 160px;
    }

    .client-wall .tier {
        margin: 0 0 3.5%;
    }
}

.hcm-exp-wrap {
    position: relative;
    padding: 4% 0;
    z-index: 9000;
    overflow: visible;
    background-size: 100% 100%;
}

.hcm-exp-wrap .headline {
    color: white;
    margin: 0 0 2%;
    text-align: center;
}

.hcm-exp {
    position: relative;
    color: white;
    z-index: 9000;
    padding: 3% 12% 0;
    overflow: visible;
}

.hcm-exp .title {
    margin: 0 0 2%;
    font-size: 25px;
    line-height: 1.5em;
}

.hcm-exp .fr-field {
    position: relative;
    width: 18.5%;
    float: left;
    color: black;
    font-size: 16px;
    line-height: 40px;
    margin: 0 1.5% 0 0;
    border-radius: 10px;
    background-color: white;
    box-shadow: 0 0 5px rgba(0, 0, 0, .2);
}

.hcm-exp input {
    width: 100%;
    padding: 0 10%;
    font-size: 16px;
}

.hcm-exp ::-webkit-input-placeholder {
    font-size: 16px;
}

.hcm-exp .product .label {
    padding: 0 10%;
}

.hcm-exp .product.expanded .label {
    box-shadow: 0 5px 5px rgba(0, 0, 0, .1);
}

.hcm-exp .product .arrow {
    right: 0;
    width: 50px;
    height: 50px;
    z-index: 2000;
    background-position: -50px -400px;
}

.hcm-exp .product.expanded .arrow {
    -webkit-transform: translate(0, -50%) rotate(180deg);
    -moz-transform: translate(0, -50%) rotate(180deg);
    -ms-transform: translate(0, -50%) rotate(180deg);
    -o-transform: translate(0, -50%) rotate(180deg);
    transform: translate(0, -50%) rotate(180deg);
}

.hcm-exp .product .expand {
    top: 0;
    padding: 55px 0 15px;
    border-radius: 10px;
}

.hcm-exp .product .expand li {
    padding: 0 10%;
    font-size: 14px;
    line-height: 30px;
    border-bottom: none;
}

.hcm-exp .btn-submit {
    top: -1px;
    padding: 0 2%;
    cursor: pointer;
    display: block;
    margin-right: 0;
    line-height: 38px;
    border: 2px solid #ff9c00;
}

.hcm-exp .btn-submit:hover {
    color: white;
    background-color: #ff9c00;
}

.hcm-exp .btn-submit .arrow {
    right: -20px;
    -webkit-transition: right .3s ease-out 0s;
    -moz-transition: right .3s ease-out 0s;
    -ms-transition: right .3s ease-out 0s;
    -o-transition: right .3s ease-out 0s;
    transition: right .3s ease-out 0s;
    background-position: -200px -300px;
}

.hcm-exp .btn-submit:hover .arrow {
    right: -25px;
    background-position: -200px -100px;
}

@media all and (max-width: 750px) {
    .hcm-exp-wrap {
        padding: 8% 0;
    }

    .hcm-exp-wrap .headline {
        margin-bottom: 5%;
    }

    .hcm-exp {
        font-size: 20px;
        padding: 50px 20% 2%;
    }

    .hcm-exp .title {
        margin: 0;
        font-size: 32px;
    }

    .hcm-exp .fr-field {
        width: 100%;
        color: white;
        font-size: 22px;
        margin: 30px 0 0;
        box-shadow: none;
        border-radius: 0;
        border-bottom: 1px solid white;
        background-color: transparent;
    }

    .hcm-exp input {
        color: white;
        padding: 6px 0;
        font-size: 22px;
        background-color: transparent;
    }

    .hcm-exp ::-webkit-input-placeholder {
        color: #fff;
        opacity: .5;
        font-size: 22px;
    }

    .hcm-exp .product .label {
        padding: 6px 0;
    }

    .hcm-exp .product.expanded .label {
        box-shadow: none;
    }

    .hcm-exp .product .label.placeholder {
        opacity: .5;
    }

    .hcm-exp .product .arrow {
        background-position: 0 -400px;
        -webkit-transform: translate(0, -50%) scale(1.4);
        -moz-transform: translate(0, -50%) scale(1.4);
        -ms-transform: translate(0, -50%) scale(1.4);
        -o-transform: translate(0, -50%) scale(1.4);
        transform: translate(0, -50%) scale(1.4);
    }

    .hcm-exp .product.expanded .arrow {
        -webkit-transform: translate(0, -50%) scale(1.4) rotate(180deg);
        -moz-transform: translate(0, -50%) scale(1.4) rotate(180deg);
        -ms-transform: translate(0, -50%) scale(1.4) rotate(180deg);
        -o-transform: translate(0, -50%) scale(1.4) rotate(180deg);
        transform: translate(0, -50%) scale(1.4) rotate(180deg);
    }

    .hcm-exp .product .expand {
        top: 100%;
        color: black;
        padding: 15px 0;
    }

    .hcm-exp .product .expand li {
        padding: 0 5%;
        font-size: 20px;
        line-height: 45px;
    }

    .hcm-exp .btn-submit {
        border: none;
        padding: 15px 50px;
        margin: 50px 0 0;
        border-radius: 50px;
        background-color: #ff9c00;
    }

    .hcm-exp .btn-submit .arrow {
        right: 0 !important;
        background-position: -200px -100px;
        -webkit-transform: translate(0, -50%) scale(1.8);
        -moz-transform: translate(0, -50%) scale(1.8);
        -ms-transform: translate(0, -50%) scale(1.8);
        -o-transform: translate(0, -50%) scale(1.8);
        transform: translate(0, -50%) scale(1.8);
    }
}

.roll-num {
    color: white;
    font-size: 16px;
    padding: 3% 12% 0;
}

.roll-num .num-item {
    width: 25%;
    float: left;
}

.roll-num .num-item .number {
    color: white;
    font-size: 50px;
    font-weight: bold;
    line-height: 100px;
}

.roll-num .num-item span {
    position: relative;
    float: left;
    display: inline-block;
}

.roll-num .num-item .digit {
    top: -12px;
    font-size: 90px;
    overflow: hidden;
    font-family: DINCB;
}

.roll-num .num-item .digit .dsa {
    position: absolute;
    top: 12px;
    left: 0;
    width: 100%;
    -webkit-transition: all 1.5s ease-out 0s;
    -moz-transition: all 1.5s ease-out 0s;
    -ms-transition: all 1.5s ease-out 0s;
    -o-transition: all 1.5s ease-out 0s;
    transition: all 1.5s ease-out 0s;
}

.roll-num .num-item.play .digit .dsa {
    top: 112px;
    -webkit-transform: translate(0, -100%);
    -moz-transform: translate(0, -100%);
    -ms-transform: translate(0, -100%);
    -o-transform: translate(0, -100%);
    transform: translate(0, -100%);
}

.roll-num .num-item .plus {
    font-size: 70px;
}

.roll-num .num-item .desc {
    line-height: 2em;
}

.roll-num .sep-line {
    padding: 3% 0 0;
    border-bottom: 1px solid white;
}

@media all and (max-width: 750px) {
    .roll-num {
        font-size: 24px;
        padding-left: 7%;
        padding-right: 7%;
    }

    .roll-num .num-item {
        width: 50%;
        text-align: center;
        margin-bottom: 6%;
    }

    .roll-num .num-item .number {
        display: inline-block;
    }

    .roll-num .num-item .desc {
        line-height: 1.5em;
        -webkit-transform: translate(0, -10px);
        -moz-transform: translate(0, -10px);
        -ms-transform: translate(0, -10px);
        -o-transform: translate(0, -10px);
        transform: translate(0, -10px);
    }
}

.tool-bar {
    position: fixed;
    right: 0;
    width: 70px;
    z-index: 10000;
    font-size: 12px;
    text-align: center;
    background-color: white;
    border-radius: 10px 0 0 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, .15);
}

.dark-style .tool-bar {
    -webkit-transform: translate(150%, -50%);
    -moz-transform: translate(150%, -50%);
    -ms-transform: translate(150%, -50%);
    -o-transform: translate(150%, -50%);
    transform: translate(150%, -50%);
}

.tool-bar .item {
    position: relative;
    display: block;
    color: #009fda;
    overflow: visible;
    cursor: pointer;
    padding: 5px 0 10px;
    border-bottom: 1px dashed;
}

.tool-bar .item:last-child {
    border-bottom: none;
}

.tool-bar .item .icon {
    width: 80%;
    -webkit-transition: all .3s ease-out 0s;
    -moz-transition: all .3s ease-out 0s;
    -ms-transition: all .3s ease-out 0s;
    -o-transition: all .3s ease-out 0s;
    transition: all .3s ease-out 0s;
}

.tool-bar .item:hover .icon {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}

.tool-bar .item:hover .label {
    font-weight: bold;
}

.tool-bar .wx-box {
    position: absolute;
    top: 50%;
    left: 0;
    opacity: 0;
    width: 180px;
    padding: 10px;
    overflow: visible;
    border-radius: 10px;
    pointer-events: none;
    -webkit-transform: translate(-120%, -50%);
    -moz-transform: translate(-120%, -50%);
    -ms-transform: translate(-120%, -50%);
    -o-transform: translate(-120%, -50%);
    transform: translate(-120%, -50%);
    box-shadow: 0 0 20px rgba(0, 0, 0, .15);
}

.tool-bar .item:hover .wx-box {
    opacity: 1;
    pointer-events: auto;
}

.tool-bar .wx-box .arrow {
    position: absolute;
    top: 50%;
    right: 0;
    width: 30px;
    height: 30px;
    background-color: white;
    box-shadow: 0 0 20px rgba(0, 0, 0, .15);
    -webkit-transform: translate(50%, -50%) rotate(45deg);
    -moz-transform: translate(50%, -50%) rotate(45deg);
    -ms-transform: translate(50%, -50%) rotate(45deg);
    -o-transform: translate(50%, -50%) rotate(45deg);
    transform: translate(50%, -50%) rotate(45deg);
}

.tool-bar .wx-box .mask {
    border-radius: 10px;
    background-color: white;
}

.tool-bar .wx-box .qrcode {
    position: relative;
}

@media all and (max-width: 750px) {
    .tool-bar {
        display: none;
    }
}

.tool-bar-mo {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    display: none;
    z-index: 10000;
    font-size: 26px;
    text-align: center;
    background-color: #efefef;
    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
}

.dark-style .tool-bar-mo {
    -webkit-transform: translate(0, 100%);
    -moz-transform: translate(0, 100%);
    -ms-transform: translate(0, 100%);
    -o-transform: translate(0, 100%);
    transform: translate(0, 100%);
}

.tool-bar-mo .item {
    position: relative;
    float: left;
    display: block;
    width: 50%;
    height: 80px;
    line-height: 80px;
}

.tool-bar-mo .tel {
    color: white;
    background-color: #05cbfc;
}

@media all and (max-width: 750px) {
    .tool-bar-mo {
        display: block;
    }
}

.txt-pics {
    padding: 5% 10%;
    background-size: 100% 100%;
}

.txt-pics .tp-pic-wrap,.txt-pics .tp-txt-wrap {
    position: relative;
    float: left;
    width: 45%;
    opacity: 0;
    -webkit-transform: translate(0, 100%);
    -moz-transform: translate(0, 100%);
    -ms-transform: translate(0, 100%);
    -o-transform: translate(0, 100%);
    transform: translate(0, 100%);
}

.txt-pics .tp-txt-wrap {
    margin-top: 2%;
}

.txt-pics.no-top-gap .tp-txt-wrap {
    margin-top: 0;
}

.txt-pics .tp-pic-wrap {
    margin-left: 10%;
}

.txt-pics .tp-pic-wrap.play,.txt-pics .tp-txt-wrap.play {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
    -webkit-transition: all 1s ease-out 0s;
    -moz-transition: all 1s ease-out 0s;
    -ms-transition: all 1s ease-out 0s;
    -o-transition: all 1s ease-out 0s;
    transition: all 1s ease-out 0s;
}

.txt-pics .tp-pic-wrap.play {
    -webkit-transition-delay: .5s;
    -moz-transition-delay: .5s;
    -ms-transition-delay: .5s;
    -o-transition-delay: .5s;
    transition-delay: .5s;
}

.txt-pics.pic-at-left .tp-txt-wrap {
    float: right;
}

.txt-pics.pic-at-left .tp-pic-wrap {
    margin-left: 0;
}

.txt-pics .swiper-pagination {
    margin: 6% auto 0;
}

.txt-pics .tp-txt-wrap .desc {
    color: #555;
    margin-top: 5%;
    line-height: 1.8em;
}

@media all and (max-width: 750px) {
    .txt-pics {
        padding: 10% 5% !important;
    }

    .txt-pics .tp-pic-wrap,.txt-pics .tp-txt-wrap {
        float: none !important;
        margin: 0;
        width: 100%;
    }

    .txt-pics .tp-pic-wrap {
        margin-top: 4%;
    }

    .txt-pics .tp-txt-wrap ul {
        margin-left: 1em;
    }
}

.cases-jump {
    margin: 0 auto;
    padding: 5% 8%;
    max-width: 1440px;
    overflow: visible;
}

.cases-jump.no-top-gap {
    padding-top: 0;
}

.cases-jump .item {
    position: relative;
    float: left;
    clear: none;
    width: 30.3%;
    margin: 0 1.5%;
    overflow: hidden;
    background-color: white;
    border-radius: 20px 0 20px 0;
    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
}

.cases-jump .pic-wrap {
    position: relative;
    width: 50%;
    overflow: hidden;
}

.cases-jump .item .pic {
    -webkit-transition: all .3s ease-out 0s;
    -moz-transition: all .3s ease-out 0s;
    -ms-transition: all .3s ease-out 0s;
    -o-transition: all .3s ease-out 0s;
    transition: all .3s ease-out 0s;
}

.cases-jump .item:hover .pic {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}

.cases-jump .info {
    position: absolute;
    top: 0;
    left: 50%;
    width: 40%;
    bottom: 0;
    margin: 5%;
    overflow: hidden;
    -webkit-transition: all .3s ease-out 0s;
    -moz-transition: all .3s ease-out 0s;
    -ms-transition: all .3s ease-out 0s;
    -o-transition: all .3s ease-out 0s;
    transition: all .3s ease-out 0s;
}

.cases-jump .item:hover .info {
    -webkit-transform: translate(0, 10px);
    -moz-transform: translate(0, 10px);
    -ms-transform: translate(0, 10px);
    -o-transform: translate(0, 10px);
    transform: translate(0, 10px);
}

.cases-jump .info .title {
    color: #333;
    margin: .5em 0 0;
    line-height: 1.5em;
}

@media all and (max-width: 750px) {
    .cases-jump {
        padding: 5% 0;
    }

    .cases-jump .item {
        width: 90%;
        margin: 5%;
    }
}

.resources-jump {
    display: none;
    margin: 0 auto;
    padding: 0 8% 5%;
    overflow: visible;
    max-width: 1440px;
}

.resources-jump .item {
    position: relative;
    float: left;
    clear: none;
    width: 30.3%;
    margin: 0 1.5%;
    overflow: hidden;
    background-color: white;
    border-radius: 20px 0 20px 0;
    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
}

.resources-jump .pic-wrap {
    position: relative;
    width: 50%;
    overflow: hidden;
}

.resources-jump .item .pic {
    -webkit-transition: all .3s ease-out 0s;
    -moz-transition: all .3s ease-out 0s;
    -ms-transition: all .3s ease-out 0s;
    -o-transition: all .3s ease-out 0s;
    transition: all .3s ease-out 0s;
}

.resources-jump .item:hover .pic {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}

.resources-jump .info {
    position: absolute;
    top: 0;
    left: 50%;
    width: 40%;
    bottom: 0;
    margin: 5%;
    overflow: hidden;
    -webkit-transition: all .3s ease-out 0s;
    -moz-transition: all .3s ease-out 0s;
    -ms-transition: all .3s ease-out 0s;
    -o-transition: all .3s ease-out 0s;
    transition: all .3s ease-out 0s;
}

.resources-jump .item:hover .info {
    -webkit-transform: translate(0, 10px);
    -moz-transform: translate(0, 10px);
    -ms-transform: translate(0, 10px);
    -o-transform: translate(0, 10px);
    transform: translate(0, 10px);
}

.resources-jump .info .title {
    color: #333;
    margin: .5em 0 0;
    line-height: 1.5em;
}

@media all and (max-width: 750px) {
    .resources-jump {
        padding: 0 0 5%;
    }

    .resources-jump .item {
        width: 90%;
        margin: 5%;
    }
}

.solutions-jump {
    padding: 4% 12% 5%;
    background-color: #f0f0f0;
}

.solutions-jump .headline {
    margin: 0 0 4%;
}

.solutions-jump .item {
    position: relative;
    float: left;
    width: 31.6%;
    margin: 0 2.5% 0 0;
    background-color: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
}

.solutions-jump .item:last-of-type {
    margin-right: 0;
}

.solutions-jump .item .pic {
    position: relative;
    background-color: black;
}

.solutions-jump .item .title {
    left: 9%;
    color: white;
}

.solutions-jump .item .info {
    position: relative;
    padding: 9% 10% 10%;
}

.solutions-jump .item .desc {
    color: #666;
    margin: 5px 0 0;
    line-height: 1.5em;
}

.solutions-jump .item .btn-get-more {
    left: 10%;
    bottom: 10%;
    border: 1px solid #ff9c00;
}

.solutions-jump .item .btn-get-more:hover {
    color: white;
    background-color: #ff9c00;
}

.solutions-jump .item .btn-get-more:hover .arrow {
    background-position: -200px -100px;
}

.solutions-jump .swiper-slide {
    padding: 10px 8%;
}

.solutions-jump .swiper-pagination {
    margin-top: 5%;
}

@media all and (max-width: 750px) {
    .solutions-jump {
        padding: 8% 0 6% !important;
    }

    .solutions-jump .headline {
        margin: 0 8% 4%;
        font-size: 30px !important;
    }

    .solutions-jump .item {
        margin: 0;
        width: 100%;
    }

    .solutions-jump .item .title {
        font-size: 30px !important;
    }

    .solutions-jump .item .desc {
        font-size: 24px !important;
    }

    .solutions-jump .item .btn-get-more {
        color: white;
        -webkit-transform: scale(1.3);
        -moz-transform: scale(1.3);
        -ms-transform: scale(1.3);
        -o-transform: scale(1.3);
        transform: scale(1.3);
        -webkit-transform-origin: 0 100%;
        -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
        -o-transform-origin: 0 100%;
        transform-origin: 0 100%;
        background-color: #ff9c00;
    }

    .solutions-jump .item .btn-get-more .arrow {
        background-position: -200px -100px;
    }
}

.solutions-other {
    margin: 0 auto;
    padding: 5% 8%;
    max-width: 1440px;
}

.solutions-other .headline {
    margin: 0 0 4%;
}

.solutions-other .item {
    position: relative;
    float: left;
    width: 24%;
    margin: 0 .5%;
    display: block;
    overflow: hidden;
    border-radius: 10px;
    background-color: #f7f8f8;
    -webkit-transition: all .3s ease-out 0s;
    -moz-transition: all .3s ease-out 0s;
    -ms-transition: all .3s ease-out 0s;
    -o-transition: all .3s ease-out 0s;
    transition: all .3s ease-out 0s;
}

.solutions-other .item:hover {
    background-color: #eaeaea;
}

.solutions-other .item .line {
    height: 10px;
    z-index: 1000;
    -webkit-transition: all .3s ease-out 0s;
    -moz-transition: all .3s ease-out 0s;
    -ms-transition: all .3s ease-out 0s;
    -o-transition: all .3s ease-out 0s;
    transition: all .3s ease-out 0s;
}

.solutions-other .item:hover .line {
    height: 15px;
}

.solutions-other .item.green .line {
    background-color: #00ffd8;
}

.solutions-other .item.blue .line {
    background-color: #00cbff;
}

.solutions-other .item.navy .line {
    background-color: #0054ff;
}

.solutions-other .item.purple .line {
    background-color: #a626ff;
}

.solutions-other .item .info {
    height: auto;
}

.solutions-other .item .icon {
    position: relative;
    width: 43%;
    display: block;
    margin: 10% auto 6%;
}

.solutions-other .item .intro {
    margin: 5px 0 0;
    line-height: 1.5em;
}

.solutions-other .item .title {
    text-align: center;
}

.solutions-other .item ul {
    padding: 2% 15% 0 25%;
}

@media all and (max-width: 750px) {
    .solutions-other {
        padding: 8% 5%;
    }

    .solutions-other .item {
        width: 46%;
        margin: 3% 2%;
    }
}

.home-page {
    color: white;
    background-color: transparent;
}

.home-page.is-current {
    padding-top: 0;
}

@-webkit-keyframes kf-home-bg {
    0% {
        -webkit-transform: rotateY(-1deg) rotateX(1deg) scale(1);
        -moz-transform: rotateY(-1deg) rotateX(1deg) scale(1);
        -ms-transform: rotateY(-1deg) rotateX(1deg) scale(1);
        -o-transform: rotateY(-1deg) rotateX(1deg) scale(1);
        transform: rotateY(-1deg) rotateX(1deg) scale(1);
    }

    100% {
        -webkit-transform: rotateY(1deg) rotateX(-1deg) scale(1.5);
        -moz-transform: rotateY(1deg) rotateX(-1deg) scale(1.5);
        -ms-transform: rotateY(1deg) rotateX(-1deg) scale(1.5);
        -o-transform: rotateY(1deg) rotateX(-1deg) scale(1.5);
        transform: rotateY(1deg) rotateX(-1deg) scale(1.5);
    }
}

@-moz-keyframes kf-home-bg {
    0% {
        -webkit-transform: rotateY(-1deg) rotateX(1deg) scale(1);
        -moz-transform: rotateY(-1deg) rotateX(1deg) scale(1);
        -ms-transform: rotateY(-1deg) rotateX(1deg) scale(1);
        -o-transform: rotateY(-1deg) rotateX(1deg) scale(1);
        transform: rotateY(-1deg) rotateX(1deg) scale(1);
    }

    100% {
        -webkit-transform: rotateY(1deg) rotateX(-1deg) scale(1.5);
        -moz-transform: rotateY(1deg) rotateX(-1deg) scale(1.5);
        -ms-transform: rotateY(1deg) rotateX(-1deg) scale(1.5);
        -o-transform: rotateY(1deg) rotateX(-1deg) scale(1.5);
        transform: rotateY(1deg) rotateX(-1deg) scale(1.5);
    }
}

@-ms-keyframes kf-home-bg {
    0% {
        -webkit-transform: rotateY(-1deg) rotateX(1deg) scale(1);
        -moz-transform: rotateY(-1deg) rotateX(1deg) scale(1);
        -ms-transform: rotateY(-1deg) rotateX(1deg) scale(1);
        -o-transform: rotateY(-1deg) rotateX(1deg) scale(1);
        transform: rotateY(-1deg) rotateX(1deg) scale(1);
    }

    100% {
        -webkit-transform: rotateY(1deg) rotateX(-1deg) scale(1.5);
        -moz-transform: rotateY(1deg) rotateX(-1deg) scale(1.5);
        -ms-transform: rotateY(1deg) rotateX(-1deg) scale(1.5);
        -o-transform: rotateY(1deg) rotateX(-1deg) scale(1.5);
        transform: rotateY(1deg) rotateX(-1deg) scale(1.5);
    }
}

@-o-keyframes kf-home-bg {
    0% {
        -webkit-transform: rotateY(-1deg) rotateX(1deg) scale(1);
        -moz-transform: rotateY(-1deg) rotateX(1deg) scale(1);
        -ms-transform: rotateY(-1deg) rotateX(1deg) scale(1);
        -o-transform: rotateY(-1deg) rotateX(1deg) scale(1);
        transform: rotateY(-1deg) rotateX(1deg) scale(1);
    }

    100% {
        -webkit-transform: rotateY(1deg) rotateX(-1deg) scale(1.5);
        -moz-transform: rotateY(1deg) rotateX(-1deg) scale(1.5);
        -ms-transform: rotateY(1deg) rotateX(-1deg) scale(1.5);
        -o-transform: rotateY(1deg) rotateX(-1deg) scale(1.5);
        transform: rotateY(1deg) rotateX(-1deg) scale(1.5);
    }
}

@keyframes kf-home-bg {
    0% {
        -webkit-transform: rotateY(-1deg) rotateX(1deg) scale(1);
        -moz-transform: rotateY(-1deg) rotateX(1deg) scale(1);
        -ms-transform: rotateY(-1deg) rotateX(1deg) scale(1);
        -o-transform: rotateY(-1deg) rotateX(1deg) scale(1);
        transform: rotateY(-1deg) rotateX(1deg) scale(1);
    }

    100% {
        -webkit-transform: rotateY(1deg) rotateX(-1deg) scale(1.5);
        -moz-transform: rotateY(1deg) rotateX(-1deg) scale(1.5);
        -ms-transform: rotateY(1deg) rotateX(-1deg) scale(1.5);
        -o-transform: rotateY(1deg) rotateX(-1deg) scale(1.5);
        transform: rotateY(1deg) rotateX(-1deg) scale(1.5);
    }
}

.home-bg {
    position: fixed;
    top: 0;
    height: 0;
    width: 100%;
    opacity: 0;
    z-index: 0;
    overflow: visible;
    pointer-events: none;
}

.dark-style .home-bg {
    opacity: .5;
}

.home-bg .wrapper {
    -webkit-perspective: 100px;
    -moz-perspective: 100px;
    -ms-perspective: 100px;
    -o-perspective: 100px;
    perspective: 100px;
}

.home-bg .floating {
    -webkit-animation: kf-home-bg 12s ease-in-out 0s infinite alternate;
    -moz-animation: kf-home-bg 12s ease-in-out 0s infinite alternate;
    -ms-animation: kf-home-bg 12s ease-in-out 0s infinite alternate;
    -o-animation: kf-home-bg 12s ease-in-out 0s infinite alternate;
    animation: kf-home-bg 12s ease-in-out 0s infinite alternate;
}

.home-page .client-wall {
    margin-top: 2%;
}

.home-page .client-wall .holder {
    width: 12.5%;
    max-width: 170px;
}

.home-page .client-wall .tier {
    margin: 0 0 2.5%;
}

.home-page .client-wall .tier .pic {
    margin: 0 6px;
}

.home-page .roll-num {
    padding-top: 4%;
    background-color: #131722;
}

.home-page .roll-num .num-item .number {
    color: #00ddff;
}

.home-page .hcm-exp {
    padding-bottom: 2%;
    background-color: #131722;
}

.home-page .hcm-exp .btn-submit {
    top: 0;
    color: white;
    border: none;
    line-height: 40px;
    background-color: #0096d7;
}

.home-page .hcm-exp:hover .btn-submit {
    background-color: #007bb1;
}

.home-page .hcm-exp .btn-submit .arrow {
    background-position: -200px -100px;
}

@media all and (max-width: 750px) {
    .home-page .client-wall {
        margin-top: 0;
    }

    .home-page .client-wall .holder {
        width: 25%;
    }

    .home-page .client-wall .tier {
        margin: 0 0 5%;
    }

    .home-page .roll-num {
        padding-top: 10%;
    }

    .home-page .roll-num .sep-line {
        padding: 0;
    }
}

.home-landing {
    background-color: #131722;
}

.home-landing .animatex {
    position: relative;
}

.home-landing .title {
    top: 25%;
    left: 8%;
    -webkit-transform: scale(1.25);
    -moz-transform: scale(1.25);
    -ms-transform: scale(1.25);
    -o-transform: scale(1.25);
    transform: scale(1.25);
    -webkit-transform-origin: 0 50%;
    -moz-transform-origin: 0 50%;
    -ms-transform-origin: 0 50%;
    -o-transform-origin: 0 50%;
    transform-origin: 0 50%;
}

.home-landing .squared-text .square {
    background-color: #131722;
}

.home-landing .xhl {
    opacity: .65;
    -webkit-mask-size: auto 70%;
}

.home-landing .xhl.disapear {
    opacity: 0;
    -webkit-mask-size: auto 50%;
}

.home-landing .cross {
    width: auto;
    height: 100%;
    opacity: .8;
}

.home-landing .cross.disapear {
    opacity: 0;
}

.home-landing .menu {
    top: 60%;
    height: 60px;
    font-size: 26px;
}

.home-landing .menu-i {
    position: relative;
    float: left;
    width: 130px;
    height: 100%;
    cursor: pointer;
    display: block;
    margin-left: 80px;
}

.home-landing .menu-i.product {
    width: 70px;
    margin-left: 115px;
}

.home-landing .menu-i.client {
    margin-left: 320px;
}

.home-landing .menu-i .label {
    width: 200px;
    color: white;
    line-height: 60px;
    text-align: center;
    letter-spacing: 5px;
    -webkit-transition: all .5s cubic-bezier(.53,0,.26,1.72) 0s;
    -moz-transition: all .5s cubic-bezier(.53,0,.26,1.72) 0s;
    -ms-transition: all .5s cubic-bezier(.53,0,.26,1.72) 0s;
    -o-transition: all .5s cubic-bezier(.53,0,.26,1.72) 0s;
    transition: all .5s cubic-bezier(.53,0,.26,1.72) 0s;
}

.home-landing .menu-i:hover .label {
    color: #01dbfd;
    letter-spacing: 8px;
    -webkit-transform: translate(-50%, -50%) scale(1.1);
    -moz-transform: translate(-50%, -50%) scale(1.1);
    -ms-transform: translate(-50%, -50%) scale(1.1);
    -o-transform: translate(-50%, -50%) scale(1.1);
    transform: translate(-50%, -50%) scale(1.1);
}

@media all and (max-width: 750px) {
    .home-landing .animatex {
        -webkit-transform: translate(0, 20%);
        -moz-transform: translate(0, 20%);
        -ms-transform: translate(0, 20%);
        -o-transform: translate(0, 20%);
        transform: translate(0, 20%);
    }

    .home-landing .menu {
        display: none;
    }

    .home-landing .title {
        top: 20%;
        -webkit-transform: scale(1.5);
        -moz-transform: scale(1.5);
        -ms-transform: scale(1.5);
        -o-transform: scale(1.5);
        transform: scale(1.5);
    }

    .home-landing .cross {
        -webkit-transform: translate(-50%, -50%) scale(1.2);
        -moz-transform: translate(-50%, -50%) scale(1.2);
        -ms-transform: translate(-50%, -50%) scale(1.2);
        -o-transform: translate(-50%, -50%) scale(1.2);
        transform: translate(-50%, -50%) scale(1.2);
    }

    .home-landing .xhl {
        -webkit-mask-size: auto 80%;
    }
}

.home-product .title {
    margin: 2% auto 0;
    text-align: center;
}

.home-product .title .sub {
    margin: 1% auto 0;
}

.home-product .prod-ring {
    position: relative;
    width: 52%;
    margin: 1% auto;
}

.home-product .ring-wrap {
    width: 750px;
    height: 660px;
}

.home-product .prod-name {
    position: absolute;
    cursor: pointer;
    display: block;
    overflow: visible;
    background-size: 750px auto;
    background-color: rgba(200, 0, 0, 0);
}

.home-product .prod-name .dot {
    width: 100px;
    height: 100px;
    border-radius: 100px;
}

.home-product .tower {
    top: 40%;
    width: 400px;
}

.home-product .tower.disapear {
    -webkit-transform: translate(-50%, -50%) scale(.2);
    -moz-transform: translate(-50%, -50%) scale(.2);
    -ms-transform: translate(-50%, -50%) scale(.2);
    -o-transform: translate(-50%, -50%) scale(.2);
    transform: translate(-50%, -50%) scale(.2);
}

.home-product .intro {
    top: 72%;
    font-size: 24px;
    line-height: 30px;
    font-weight: bold;
    text-align: center;
}

.home-product .intro sup {
    font-size: 16px;
}

.home-product .preview {
    top: 28%;
    width: 310px;
    overflow: hidden;
    -webkit-transform: translate(-50%, 0);
    -moz-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}

.home-product .preview .animate {
    position: relative;
    overflow: hidden;
}

.home-product .preview .desc {
    margin: 10px 0 0;
    font-size: 18px;
    line-height: 28px;
    text-align: center;
}

.home-product .pp-mlearning {
    top: 18%;
    width: 390px;
}

@media all and (max-width: 750px) {
    .home-product .prod-ring {
        margin: 8% auto 15%;
    }
}

.home-product .pp-ocai .pic1 {
    -webkit-transform: translate(-100%, 0);
    -moz-transform: translate(-100%, 0);
    -ms-transform: translate(-100%, 0);
    -o-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
}

.home-product .pp-ocai.play .pic1 {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
    -webkit-transition: all .5s ease-out 0s;
    -moz-transition: all .5s ease-out 0s;
    -ms-transition: all .5s ease-out 0s;
    -o-transition: all .5s ease-out 0s;
    transition: all .5s ease-out 0s;
}

.home-product .pp-ocai .pic2 {
    opacity: 0;
}

.home-product .pp-ocai.play .pic2 {
    opacity: 1;
    -webkit-transition: all .5s ease-out 1s;
    -moz-transition: all .5s ease-out 1s;
    -ms-transition: all .5s ease-out 1s;
    -o-transition: all .5s ease-out 1s;
    transition: all .5s ease-out 1s;
}

.home-power {
    margin: 1% 0;
}

.home-power .title {
    margin: 4% auto;
    text-align: center;
}

.home-power .title .sub {
    margin: 1% auto 0;
}

.home-power .swiper-container {
    width: 60%;
    overflow: visible;
}

.home-power .intro {
    overflow: hidden;
    text-align: center;
}

.home-power .intro .pic {
    position: relative;
    width: 100%;
}

.home-power .intro .desc {
    bottom: 8%;
    white-space: nowrap;
}

.home-power .intro-2 .desc {
    top: 8%;
    left: 25%;
    bottom: auto;
}

.home-power .swiper-pagination-bullet {
    background-color: white;
}

.home-power .swiper-pagination-bullet-active {
    background-color: #0096d7;
}

@media all and (max-width: 750px) {
    .home-power {
        margin: 7% 0 17%;
    }

    .home-power .swiper-container {
        width: 85%;
        margin: 10% auto 8%;
    }

    .home-power .intro .pic {
        left: -25%;
        width: 150%;
    }

    .home-power .intro .desc {
        opacity: .7;
        -webkit-transform: translate(-50%, 0) scale(.8);
        -moz-transform: translate(-50%, 0) scale(.8);
        -ms-transform: translate(-50%, 0) scale(.8);
        -o-transform: translate(-50%, 0) scale(.8);
        transform: translate(-50%, 0) scale(.8);
    }
}

.home-choose .fixed-wrap {
    top: 0;
    width: 100%;
    overflow: hidden;
}

.home-choose .cross {
    position: absolute;
    bottom: 0;
}

.home-choose .cross.center {
    bottom: auto;
}

.home-choose .text-over {
    position: absolute;
    top: 15%;
    left: 6%;
    width: 30%;
    line-height: 2em;
    text-shadow: 0 0 30px black;
}

.home-choose .text-over .from {
    margin: 15px 0 0;
    text-align: right;
}

.home-choose .intro {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
}

.home-choose .title {
    position: relative;
    text-align: center;
    display: inline-block;
}

.home-choose .title .knx {
    right: -12%;
    width: 25%;
    height: auto;
    display: inline-block;
}

.home-choose .desc {
    padding: 1% 20%;
    text-align: center;
}

@media all and (max-width: 750px) {
    .home-choose .cross img {
        position: relative;
        width: 350%;
        left: -130%;
    }

    .home-choose .text-over {
        top: 20%;
        left: 8%;
        width: 55%;
    }

    .home-choose .intro {
        bottom: 2%;
    }

    .home-choose .desc {
        padding: 1% 10%;
    }
}

.product-kv .sec-txt-wrap {
    top: 18%;
    left: 10%;
    width: 40%;
    color: white;
}

.product-kv .desc {
    margin: 2% 0 0;
}

.product-kv .btn-want-now,.product-kv .btn-play-video {
    margin: 4% 0 0;
}

@media all and (max-width: 750px) {
    .product-kv {
        height: 610px;
    }

    .product-kv .maxw-img {
        position: absolute;
        left: -38%;
        bottom: 0;
        width: 1000px;
    }

    .product-kv .sec-txt-wrap {
        top: 8%;
        width: 80%;
    }

    .product-kv .btn-want-now,.product-kv .btn-play-video {
        display: none;
    }
}

.core-hr-org-mgr .desc li {
    float: left;
    width: 45%;
    margin: 0 5% 5% 0;
}

.core-hr-checkin-mgr {
    padding-bottom: 18%;
}

.core-hr-checkin-mgr .rb-mo {
    top: 30%;
    left: 28%;
}

.core-hr-checkin-mgr .rb-mgr {
    top: 47%;
    left: 76%;
}

.core-hr-checkin-mgr .rb-ana {
    top: 60%;
    left: 25%;
}

.core-hr-checkin-mgr .rb-leave {
    top: 75%;
    left: 55%;
}

.core-hr-payment .desc .item {
    position: relative;
    float: left;
    width: 33%;
    margin-bottom: 5%;
}

.core-hr-tracking {
    padding-bottom: 18%;
}

.core-hr-tracking .rect-bubble .inner {
    padding-left: 130px;
}

.core-hr-tracking .rb-report {
    top: 30%;
    left: 20%;
}

.core-hr-tracking .rb-report .inner {
    padding-right: 80px;
}

.core-hr-tracking .rb-board {
    top: 60%;
    left: 19%;
}

.core-hr-tracking .rb-auto {
    top: 65%;
    left: 60%;
}

@media all and (max-width: 750px) {
    .core-hr-checkin-mgr .rb-mgr {
        top: 44%;
        left: 54%;
    }

    .core-hr-checkin-mgr .rb-mo {
        top: 26%;
        left: 38%;
    }

    .core-hr-checkin-mgr .rb-leave {
        left: 45%;
    }

    .core-hr-tracking .rb-auto {
        top: 74%;
        left: 0%;
    }

    .core-hr-tracking .rb-report {
        top: 20%;
        left: 40%;
    }

    .core-hr-tracking .rb-board {
        top: 50%;
    }
}

.aitx-page .txt-pics .desc ul {
    margin: 0 0 10px;
}

.aitx-overview {
    background-image: none !important;
}

.aitx-bi-dec .more {
    color: #999;
    padding: 10% 0 0;
    line-height: 2em;
}

.aitx-bi-dec .more.play {
    -webkit-transition-delay: 1s;
    -moz-transition-delay: 1s;
    -ms-transition-delay: 1s;
    -o-transition-delay: 1s;
    transition-delay: 1s;
}

.aitx-ai-mgr .desc p {
    margin: 0 0 10px;
}

.aitx-slogan {
    padding: 5% 10%;
}

.aitx-slogan .wrap {
    border: 0 solid rgba(0, 0, 0, .1);
    border-width: 1px 0 0 1px;
}

.aitx-slogan .item {
    position: relative;
    float: left;
    clear: none;
    width: 30%;
    color: #666;
    line-height: 1.5em;
    padding: 1em 0 1em 1em;
    border: 0 solid rgba(0, 0, 0, .1);
    border-width: 0 1px 1px 0;
}

.aitx-slogan .item .icon {
    float: left;
    width: auto;
    height: 4em;
}

.aitx-slogan .item p {
    float: left;
    padding: .5em;
}

.aitx-slogan .item-1 {
    width: 40%;
    padding: 4em 0 4em 2em;
}

@media all and (max-width: 750px) {
    .aitx-page .txt-pics .desc ul {
        margin: 0 0 15px 1em;
    }

    .aitx-slogan {
        padding: 10% 5%;
    }

    .aitx-slogan .item {
        width: 50%;
        font-size: 18px !important;
    }

    .aitx-slogan .item-1 {
        width: 100%;
        padding: 1.5em 0 1.5em 11em;
    }
}

.hro-page .product-kv li {
    float: left;
    margin: 0 .5em 0 0;
    list-style-type: none;
}

.hro-page .txt-pics .desc .item {
    float: left;
    width: 45%;
    margin: 0 5% 3% 0;
}

.hro-level-solve {
    padding: 5% 10%;
}

.hro-level-solve .headline .sub {
    color: #555;
    margin: 1% 0 0;
}

.hro-lsi-box {
    position: relative;
    width: 80%;
    margin: 4% 0 0 20%;
    padding: 1% 0 4% 0;
    border-radius: 20px;
    border: 1px solid #ccc;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, .2);
}

.hro-lsi-box .tabs {
    padding: .5% 2% 0;
}

.hro-lsi-box .tab {
    float: left;
    width: 35%;
    margin: 0 7%;
    padding: 1.3%;
    text-align: center;
    border-radius: 13px;
}

.hro-lsi-box .tab1 {
    background-color: #fcd605;
}

.hro-lsi-box .tab2 {
    color: white;
    background-color: #00b1f2;
}

.hro-lsi-box .h-line {
    position: relative;
    height: 3px;
    width: 94%;
    margin: 2.5% auto;
    background-color: #e9e8e8;
}

.hro-lsi-box .h-line .dot {
    left: 0;
    width: 13px;
    height: 13px;
    border-radius: 10px;
    background-color: #fff660;
}

.hro-lsi-box .h-line .seg1 {
    left: 23%;
    width: 30px;
    height: 3px;
    background-color: #fff660;
}

.hro-lsi-box .h-line .seg2 {
    left: 75%;
    width: 30px;
    height: 3px;
    background-color: #0ba0db;
}

.hro-lsi-box .v-line {
    position: absolute;
    top: 0;
    bottom: 0;
    right: -5%;
    width: 3px;
    background-color: #e9e8e8;
}

.hro-lsi-pain {
    position: relative;
    float: left;
    width: 49%;
}

.hro-lsi-pain .item {
    position: relative;
    color: #555;
    margin: 0 0 5%;
}

.hro-lsi-pain .item3 {
    margin-bottom: 0;
}

.hro-lsi-pain .item img {
    position: absolute;
    width: 50%;
    right: 103%;
    max-width: 225px;
    -webkit-transform: translate(-20%, -50%);
    -moz-transform: translate(-20%, -50%);
    -ms-transform: translate(-20%, -50%);
    -o-transform: translate(-20%, -50%);
    transform: translate(-20%, -50%);
}

.hro-lsi-pain .item img.play {
    -webkit-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    transform: translate(0, -50%);
}

.hro-lsi-pain .item p {
    margin: 1.5% 0;
}

.hro-lsi-pain .i-desc {
    width: 85%;
    padding: 2% 4%;
    margin-left: 15%;
    line-height: 1.8em;
    border-radius: 10px;
    background-color: #f3fafd;
    -webkit-transform: translate(0, 20%);
    -moz-transform: translate(0, 20%);
    -ms-transform: translate(0, 20%);
    -o-transform: translate(0, 20%);
    transform: translate(0, 20%);
}

.hro-lsi-pain .i-desc.play {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
}

.hro-lsi-pain .item2 .i-desc {
    background-color: #fff9fa;
}

.hro-lsi-pain .item3 .i-desc {
    background-color: #faf9ff;
}

.hro-lsi-hua {
    float: left;
    width: 40%;
    margin-left: 7%;
    -webkit-transform: translate(0, 20%);
    -moz-transform: translate(0, 20%);
    -ms-transform: translate(0, 20%);
    -o-transform: translate(0, 20%);
    transform: translate(0, 20%);
}

.hro-lsi-hua.play {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
}

.hro-lsi-hua .item {
    color: #555;
    margin: 0 0 5%;
}

.hro-lsi-hua .item p {
    line-height: 1.8em;
}

.hro-lsi-hua.play {
    -webkit-transition-delay: .5s;
    -moz-transition-delay: .5s;
    -ms-transition-delay: .5s;
    -o-transition-delay: .5s;
    transition-delay: .5s;
}

.hro-lsi-pain .item1 img.play {
    -webkit-transition-delay: 1s;
    -moz-transition-delay: 1s;
    -ms-transition-delay: 1s;
    -o-transition-delay: 1s;
    transition-delay: 1s;
}

.hro-lsi-pain .item1 .i-desc.play {
    -webkit-transition-delay: 1.1s;
    -moz-transition-delay: 1.1s;
    -ms-transition-delay: 1.1s;
    -o-transition-delay: 1.1s;
    transition-delay: 1.1s;
}

.hro-lsi-pain .item2 img.play {
    -webkit-transition-delay: 2s;
    -moz-transition-delay: 2s;
    -ms-transition-delay: 2s;
    -o-transition-delay: 2s;
    transition-delay: 2s;
}

.hro-lsi-pain .item2 .i-desc.play {
    -webkit-transition-delay: 2.1s;
    -moz-transition-delay: 2.1s;
    -ms-transition-delay: 2.1s;
    -o-transition-delay: 2.1s;
    transition-delay: 2.1s;
}

.hro-lsi-pain .item3 img.play {
    -webkit-transition-delay: 3s;
    -moz-transition-delay: 3s;
    -ms-transition-delay: 3s;
    -o-transition-delay: 3s;
    transition-delay: 3s;
}

.hro-lsi-pain .item3 .i-desc.play {
    -webkit-transition-delay: 3.1s;
    -moz-transition-delay: 3.1s;
    -ms-transition-delay: 3.1s;
    -o-transition-delay: 3.1s;
    transition-delay: 3.1s;
}

@media all and (max-width: 750px) {
    .hro-level-solve {
        padding: 10% 5%;
    }
}

.fu-yao-page .product-kv .desc {
    line-height: 1.5em;
}

.fu-yao-page .product-kv .btn-want-now {
    color: #5772ff;
}

.fu-yao-overview .desc .item {
    float: left;
    width: 45%;
    margin: 0 5% 5% 0;
}

.fu-yao-choose .tp-txt-wrap .desc {
    margin-top: 1%;
}

.fu-yao-choose .tp-txt-wrap .desc p {
    margin: 0 0 2%;
}

.fu-yao-choose ul {
    margin: 5% 0 0;
}

.fu-yao-choose li {
    float: left;
    margin: 0 30px 0 0;
    list-style-type: none;
}

.fu-yao-choose li:before {
    content: "";
    width: 10px;
    height: 10px;
    margin: 0 15px 2px 0;
    display: inline-block;
    background-color: #ED759C;
}

.fu-yao-reporting .desc-wrap {
    position: relative;
}

.fu-yao-reporting .desc {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    width: 100%;
    pointer-events: none;
    -webkit-transform: translate(0, 20%);
    -moz-transform: translate(0, 20%);
    -ms-transform: translate(0, 20%);
    -o-transform: translate(0, 20%);
    transform: translate(0, 20%);
    margin-top: 2% !important;
}

.fu-yao-reporting .desc.holder {
    position: relative;
}

.fu-yao-reporting .desc.play {
    opacity: 1;
    pointer-events: auto;
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
}

.fu-yao-reporting .desc .item {
    width: 90%;
    margin: 3% 0;
}

.fu-yao-reporting .rect-bubble .inner {
    -webkit-transition-duration: .3s;
    -moz-transition-duration: .3s;
    -ms-transition-duration: .3s;
    -o-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-delay: 0s !important;
    -moz-transition-delay: 0s !important;
    -ms-transition-delay: 0s !important;
    -o-transition-delay: 0s !important;
    transition-delay: 0s !important;
}

.fu-yao-reporting .rect-bubble .title {
    line-height: 60px;
}

.fu-yao-reporting .rb-com {
    top: 45%;
    left: 45%;
}

.fu-yao-reporting .rb-person {
    top: 40%;
    left: 38%;
}

.fu-yao-reporting .rb-both {
    top: 30%;
    left: 38%;
}

@media all and (max-width: 750px) {
    .fu-yao-reporting .rect-bubble {
        left: 58%;
    }

    .fu-yao-reporting .desc {
        margin-top: 2% !important;
    }
}

.prisma-page .product-kv .btn-want-now {
    color: #bb8af1;
}

.prisma-overview .slogan {
    margin: 0 0 7%;
}

.prisma-overview .desc .item {
    float: left;
    width: 45%;
    margin: 0 5% 3% 0;
}

.prisma-type12 {
    padding: 5% 10%;
    text-align: center;
}

.prisma-type12 .desc {
    margin: 1% 0 3%;
}

.prisma-type12 .item {
    float: left;
    margin: 1% 0;
    width: 16.66%;
    -webkit-transition-duration: .5s;
    -moz-transition-duration: .5s;
    -ms-transition-duration: .5s;
    -o-transition-duration: .5s;
    transition-duration: .5s;
}

.prisma-type12 .item .icon {
    width: 57%;
    margin: 0 0 8%;
}

.prisma-survey {
    padding: 5% 8%;
    text-align: center;
}

.prisma-survey .desc {
    margin: 1% 0 5%;
}

.prisma-survey .desc li {
    color: #555;
}

.prisma-survey .item {
    float: left;
    width: 31%;
    margin: 0 3.5% 0 0;
}

.prisma-survey .item:last-of-type {
    margin-right: 0;
}

.prisma-transfer .desc li {
    float: left;
    width: 45%;
    margin: 0 5% 5% 0;
}

@media all and (max-width: 750px) {
    .prisma-type12 {
        padding: 8% 5%;
    }

    .prisma-type12 .item {
        width: 33.3%;
        margin: 2% 0;
    }

    .prisma-survey .card-box .icon {
        width: 55%;
        margin-left: 23%;
    }

    .prisma-survey .card-box .txt-wrap {
        width: 100%;
        margin-left: 0;
        margin-top: 25px;
    }

    .prisma-survey .card-box .txt-wrap br {
        display: none;
    }

    .prisma-survey .card-box .inner {
        height: 400px;
    }
}

.tian-ping-page .product-kv .btn-play-video {
    color: #01b9cd;
}

.tian-ping-biz-flow {
    padding: 5% 8%;
}

.tian-ping-biz-flow .title {
    margin: 0 0 5%;
}

.tian-ping-biz-flow .mob {
    display: none;
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
}

.tian-ping-biz-flow .item {
    position: relative;
    float: left;
    width: 19%;
    margin: 0 .5%;
    z-index: 500;
    -webkit-transform: translate(-10%, 0);
    -moz-transform: translate(-10%, 0);
    -ms-transform: translate(-10%, 0);
    -o-transform: translate(-10%, 0);
    transform: translate(-10%, 0);
}

.tian-ping-biz-flow .item.play {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
}

.tian-ping-biz-flow .item-a {
    width: 5%;
    z-index: 100;
    -webkit-transform: translate(-100%, 0);
    -moz-transform: translate(-100%, 0);
    -ms-transform: translate(-100%, 0);
    -o-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
}

.tian-ping-biz-flow .item-a.play {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
}

.tian-ping-biz-flow .item-a img {
    -webkit-transform: translate(0, 15%);
    -moz-transform: translate(0, 15%);
    -ms-transform: translate(0, 15%);
    -o-transform: translate(0, 15%);
    transform: translate(0, 15%);
}

.tian-ping-overview {
    padding-top: 2%;
}

.tian-ping-overview .headline {
    padding: 0 0 6%;
}

.tian-ping-highlight {
    padding-top: 5%;
    background-image: none !important;
}

.tian-ping-highlight .headline {
    padding: 0 0 6%;
}

.tian-ping-highlight .profession .title {
    padding: 0 0 2%;
}

.tian-ping-highlight .descs {
    margin: 3% 0 0;
}

.tian-ping-highlight .descs li {
    float: left;
    width: 45%;
    margin: 3% 5% 0 0;
}

.tian-ping-worth {
    padding: 0 10% 6%;
}

.tian-ping-worth .headline {
    padding: 0 0 5%;
}

.tian-ping-worth .item {
    float: left;
    width: 24%;
    padding: 3% 1%;
    margin: 0 1% 0 0;
    text-align: center;
    background-color: #f8f8f8;
    border-bottom: 5px solid #0195cc;
}

.tian-ping-worth .item .line {
    width: 1px;
    height: 20px;
    margin: 5% auto 3%;
    background-color: #666;
}

.tian-ping-worth .item .icon {
    width: 40%;
}

.tian-ping-worth .item .title2 {
    margin: 5% 0 3%;
}

.tian-ping-worth .item .desc {
    line-height: 1.8em;
}

@media all and (max-width: 750px) {
    .tian-ping-biz-flow {
        padding: 5% 0;
    }

    .tian-ping-biz-flow .mob {
        display: block;
    }

    .tian-ping-biz-flow .item {
        width: 35%;
        display: none;
        margin: 10px 1% 40px;
    }

    .tian-ping-biz-flow .item-a {
        width: 9%;
    }

    .tian-ping-worth .item {
        width: 48%;
        margin: 0 1% 4%;
    }
}

.sagittarius-page .product-kv .desc {
    line-height: 1.5em;
}

.sagittarius-page .product-kv .btn-play-video {
    color: #01b9cd;
}

.sagittarius-page .tab-bar {
    margin: 0 8%;
}

.sagittarius-page .tab-content .swiper-slide {
    padding: 0 8%;
}

.sagittarius-advantage {
    padding: 3% 0 0;
}

.sagittarius-advantage .sub-title {
    padding: 1% 15% 3%;
}

.sagittarius-advantage .desc {
    position: absolute;
    top: 20%;
    left: 28%;
}

.sagittarius-advantage .desc li {
    margin: 1em 0;
}

.sagittarius-advantage .pic {
    margin: 0 auto;
    display: block;
    max-width: 1200px;
}

.sagittarius-product {
    padding: 3% 0 0;
}

.sagittarius-product .sub-title {
    padding: 1% 15% 3%;
}

.sagittarius-product .tab-content {
    text-align: center;
}

.sagittarius-product .ice-wrap {
    display: inline-block;
}

.sagittarius-product .tc-pic {
    margin: 0 auto;
    display: block;
    max-width: 1200px;
}

.sagittarius-product .links {
    width: 1200px;
    height: 620px;
    text-align: center;
}

.sagittarius-product .link-wrap {
    padding: 157px 70px 0 0;
}

.sagittarius-product .link {
    color: white;
    margin: 5px;
    cursor: pointer;
    padding: 5px 10px;
    font-size: 14px;
    min-width: 100px;
    line-height: 18px;
    border-radius: 12px;
    display: inline-block;
    background-color: gray;
}

.sagittarius-product .link:hover {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);
}

.sagittarius-product .link .name {
    font-size: 16px;
}

.sagittarius-product .link sup {
    font-size: 12px;
}

.sagittarius-product .mca {
    margin-left: 20px;
}

.sagittarius-product .red {
    background-color: #ff5a5a;
}

.sagittarius-product .green {
    background-color: #1cd281;
}

.sagittarius-product .pink {
    background-color: #ff83a0;
}

.sagittarius-product .blue {
    background-color: #00dcee;
}

.sagittarius-product .yellow {
    background-color: #fdc910;
}

.sagittarius-zhaoping {
    padding: 0 0 3%;
}

.sagittarius-zhaoping .pic {
    display: block;
    max-width: 1200px;
    margin: 20px auto 0;
}

.btn-goto-sagi-platform {
    color: white;
    line-height: 60px;
    margin: 1% auto 3%;
    padding: 0 2em 0 80px;
}

.btn-goto-sagi-platform:hover {
    -webkit-transform: scale(1.02);
    -moz-transform: scale(1.02);
    -ms-transform: scale(1.02);
    -o-transform: scale(1.02);
    transform: scale(1.02);
}

.btn-goto-sagi-platform .bg1 {
    background-color: #00b6c6;
}

.btn-goto-sagi-platform:hover .bg1 {
    background-color: #0adfcd;
}

.btn-goto-sagi-platform .bg2 {
    background-color: #0adfcd;
}

.btn-goto-sagi-platform:hover .bg2 {
    background-color: #00b6c6;
}

.btn-goto-sagi-platform .arrow {
    left: -10px;
    background-position: -200px -400px;
}

@media all and (max-width: 750px) {
    .sagittarius-page .tab-bar {
        margin: 0;
    }

    .sagittarius-advantage {
        padding: 8% 0;
    }

    .sagittarius-advantage .pic {
        position: relative;
        left: -25%;
        width: 150%;
    }

    .sagittarius-advantage .desc {
        left: 18%;
    }

    .sagittarius-product .tc-pic {
        position: relative;
        left: -30%;
        width: 160%;
    }

    .sagittarius-product .links {
        -webkit-transform: translate(-50%, -50%) scale(.8) !important;
        -moz-transform: translate(-50%, -50%) scale(.8) !important;
        -ms-transform: translate(-50%, -50%) scale(.8) !important;
        -o-transform: translate(-50%, -50%) scale(.8) !important;
        transform: translate(-50%, -50%) scale(.8) !important;
    }

    .sagittarius-zhaoping .pic {
        position: relative;
        left: -25%;
        width: 150%;
    }
}

.mlearning-page .product-kv .btn-play-video {
    color: #ff5b00;
}

.mlearning-page .hcm-exp .btn-submit:hover {
    background-color: #0096d7;
}

@media all and (max-width: 750px) {
    .mlearning-page .hcm-exp .btn-submit {
        background-color: #0096d7;
    }
}

.mlearning-overview {
    background-image: none !important;
}

.mlearning-overview .desc {
    line-height: 1.8em;
}

.mlearning-overview .circle {
    left: 61%;
    width: 25%;
}

.mlearning-overview .circle .play {
    -webkit-transition-delay: 1s;
    -moz-transition-delay: 1s;
    -ms-transition-delay: 1s;
    -o-transition-delay: 1s;
    transition-delay: 1s;
}

.mlearning-overview .shot {
    top: 44%;
    left: 93%;
    width: 18%;
}

.mlearning-overview .shot .play {
    -webkit-transition-delay: 1.5s;
    -moz-transition-delay: 1.5s;
    -ms-transition-delay: 1.5s;
    -o-transition-delay: 1.5s;
    transition-delay: 1.5s;
}

.mlearning-cores {
    padding-top: 0;
}

.mlearning-cores .headline {
    padding: 0 0 5%;
}

.mlearning-cores .desc .item {
    margin-bottom: 3%;
}

.mlearning-cores .desc span {
    color: #ff5600;
}

.mlearning-cores .desc .title {
    margin: 0 0 1%;
}

.mlearning-cores .desc ul {
    line-height: 1.5em;
}

.mlearning-benefit {
    padding: 4% 10%;
}

.mlearning-benefit .desc {
    color: #555;
    padding: 3% 10% 4%;
    line-height: 1.8em;
}

.mlearning-benefit .buy-now {
    color: #898989;
}

.mlearning-benefit .btn-goto-know {
    position: relative;
    color: #ff6900;
    line-height: 60px;
    margin: 2% auto 5%;
    padding: 0 2em 0 80px;
    border-color: #ff6900;
}

.mlearning-benefit .btn-goto-know:hover {
    -webkit-transform: scale(1.02);
    -moz-transform: scale(1.02);
    -ms-transform: scale(1.02);
    -o-transform: scale(1.02);
    transform: scale(1.02);
}

.mlearning-benefit .btn-goto-know .arrow {
    left: -10px;
    background-position: -200px -500px;
}

.mlearning-benefit .item {
    float: left;
    width: 24%;
    margin: 0 1% 0 0;
    padding: 4% 1% 5%;
    text-align: center;
    background-color: #f8f8f8;
    border-bottom: 5px solid #ff5600;
}

.mlearning-benefit .item .icon {
    width: 25%;
}

.mlearning-benefit .item .title {
    margin: 15% 0 3%;
}

.mlearning-benefit .item .desc {
    color: #818181;
    line-height: 1.8em;
}

.mlearning-master .subline {
    margin: 1% auto 2%;
}

.mlearning-master .intro {
    position: absolute;
    top: 30%;
    left: 14%;
    white-space: nowrap;
}

.mlearning-master .intro-2 {
    top: 1%;
    left: 57%;
}

.mlearning-master .intro-3 {
    top: 44%;
    left: 71%;
}

.mlearning-master .intro .desc {
    line-height: 1.5em;
}

.mlearning-courses {
    padding: 5% 13% 4%;
}

.mlearning-courses .item {
    float: left;
    width: 31.6%;
    margin: 2.5% 2.5% 2.5% 0;
}

.mlearning-courses .item.at-right {
    margin-right: 0;
}

.mlearning-courses .title {
    margin: 6% 0 0;
}

.mlearning-courses .desc {
    line-height: 1.6em;
}

.mlearning-feishang {
    margin: 0 10%;
    padding: 0 5% 5%;
    background-color: white;
    border: 0 solid #ededed;
    border-radius: 0 0 15px 15px;
    border-width: 0 3px 3px 0;
}

.mlearning-feishang .txt-wrap {
    float: left;
    width: 70%;
    padding: 3% 0 0;
}

.mlearning-feishang .pic {
    float: left;
    width: 20%;
    margin: 7% 0 0 10%;
}

.mlearning-feishang .title {
    color: #ff6900;
    margin: 3% 0 1%;
}

.mlearning-page .hcm-exp-wrap {
    padding-top: 0;
    margin-top: 2%;
}

@media all and (max-width: 750px) {
    .mlearning-overview .circle {
        left: 21%;
        width: 45%;
    }

    .mlearning-overview .shot {
        top: 53%;
        left: 83%;
        width: 32%;
    }

    .mlearning-benefit {
        padding: 8% 3%;
    }

    .mlearning-benefit .desc {
        padding: 3% 8% 4%;
    }

    .mlearning-benefit .desc br {
        display: none;
    }

    .mlearning-benefit .btn-goto-know {
        margin: 5% auto 10%;
    }

    .mlearning-benefit .item {
        width: 46%;
        margin: 0 2% 5%;
    }

    .mlearning-master .subline {
        margin-top: 4%;
    }

    .mlearning-master .masters {
        padding-top: 300px;
    }

    .mlearning-master .masters img {
        position: relative;
        left: -50%;
        width: 200%;
    }

    .mlearning-master .intro {
        top: 35%;
        left: 7%;
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -o-transform: scale(1.1);
        transform: scale(1.1);
    }

    .mlearning-master .intro-2 {
        top: 5%;
        left: 37%;
    }

    .mlearning-master .intro-3 {
        top: 34%;
        left: 56%;
    }

    .mlearning-courses {
        padding: 8% 5% 5%;
    }

    .mlearning-courses .item {
        width: 44%;
        clear: none;
        margin: 2.5% 3%;
    }

    .mlearning-courses .item.at-right {
        margin-right: 3%;
    }

    .mlearning-feishang .txt-wrap {
        width: 100%;
        padding-top: 5%;
    }

    .mlearning-feishang .pic {
        width: 40%;
        margin-left: 30%;
    }

    .mlearning-feishang .title {
        margin: 5% 0;
        font-size: 26px !important;
    }
}

.crystal-page .product-kv .desc {
    line-height: 1.6em;
}

.crystal-page .product-kv .btn-play-video {
    color: #8f7ffb;
}

.crystal-page .hcm-exp .btn-submit:hover {
    background-color: #0096d7;
}

.crystal-overview ul {
    margin: 3% 0 0;
}

.crystal-charting {
    padding: 4% 0;
}

.crystal-charting .pic {
    width: 56%;
    margin: 2% auto;
    display: block;
    max-width: 800px;
}

.crystal-modules {
    padding: 4% 0;
}

.crystal-modules .title {
    margin: 0 0 4%;
}

.crystal-modules .sub-title {
    padding: 0 0 4%;
}

.crystal-modules .tab-bar {
    margin: 0 8%;
}

.crystal-modules .txt-pics .tp-pic-wrap,.crystal-modules .txt-pics .tp-txt-wrap {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
}

.crystal-modules .txt-pics .tp-txt-wrap {
    width: 48%;
}

.crystal-modules .txt-pics .tp-pic-wrap {
    margin-left: 5%;
}

.crystal-modules .tabc-section {
    padding: 3% 8%;
    background-image: none !important;
}

.crystal-modules .desc {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    width: 100%;
    pointer-events: none;
    -webkit-transform: translate(0, 20%);
    -moz-transform: translate(0, 20%);
    -ms-transform: translate(0, 20%);
    -o-transform: translate(0, 20%);
    transform: translate(0, 20%);
}

.crystal-modules .desc.holder {
    position: relative;
}

.crystal-modules .desc.play {
    opacity: 1;
    pointer-events: auto;
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
}

.crystal-modules .desc .item {
    width: 90%;
    margin: 3% 0;
}

.crystal-modules .desc .item ul {
    margin: 1% 0 0;
    line-height: 1.6em;
}

.crystal-modules .tabc-2-1 .item {
    float: left;
    width: 45%;
    margin: 0 5% 5% 0;
}

@media all and (max-width: 750px) {
    .crystal-charting {
        padding: 8% 0;
    }

    .crystal-charting .pic {
        width: 90%;
        margin: 5% auto;
    }

    .crystal-modules {
        padding: 8% 0 0;
    }

    .crystal-modules .tab-bar {
        margin: 6% 0 2%;
    }

    .crystal-modules .desc {
        margin-top: 2% !important;
    }

    .crystal-modules .sub-title {
        padding: 0;
    }

    .crystal-modules .txt-pics .tp-txt-wrap {
        width: 100%;
    }

    .crystal-modules .txt-pics .tp-pic-wrap {
        margin-left: 0;
    }

    .crystal-modules .tabc-section {
        padding: 3% 5% !important;
    }
}

.ocai-page .product-kv {
    background-color: #141c6e;
}

.ocai-page .product-kv .desc {
    line-height: 1.6em;
}

.ocai-page .product-kv .btn-play-video {
    color: #141c6e;
}

.ocai-page .tp-txt-wrap .desc {
    margin-top: 3%;
    line-height: 2em;
}

.ocai-recommend .headline {
    padding: 4% 0;
}

.ocai-recommend .swiper-slide {
    padding: 0 8%;
}

.ocai-recommend .item {
    position: relative;
    float: left;
    width: 33%;
    padding: 0 3% 0 7%;
}

.ocai-recommend .item .icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 16%;
}

.ocai-recommend .item .desc {
    color: #555;
    margin: 4% 0 0;
    line-height: 1.8em;
}

.ocai-overview .desc {
    padding-top: 8%;
}

.ocai-overview .win-inner {
    background-color: black;
}

.ocai-overview .btn-play {
    width: 28%;
    cursor: pointer;
}

.ocai-numbers {
    padding: 4% 5% 3%;
}

.ocai-numbers .item {
    float: left;
    width: 33%;
    color: white;
    text-align: center;
}

.ocai-join-now {
    padding: 5% 10% 0;
}

.ocai-join-now .pic {
    float: left;
    width: 20%;
    max-width: 220px;
}

.ocai-join-now .desc {
    float: left;
    width: 43%;
    margin: 0 0 0 4%;
    padding: 0 0 0 4%;
    border-left: 1px solid black;
}

.ocai-join-now .desc ul {
    margin: 2% 0 0;
}

.ocai-join-now .btn-join {
    position: relative;
    color: #247be3;
    line-height: 50px;
    margin: 2% auto 0;
    padding: 0 2em 0 60px;
    border-color: #247be3;
}

.ocai-join-now .btn-join:hover {
    -webkit-transform: scale(1.02);
    -moz-transform: scale(1.02);
    -ms-transform: scale(1.02);
    -o-transform: scale(1.02);
    transform: scale(1.02);
}

.ocai-join-now .btn-join .arrow {
    left: -20px;
    background-position: -200px -600px;
    -webkit-transform: translate(0, -50%) scale(.8);
    -moz-transform: translate(0, -50%) scale(.8);
    -ms-transform: translate(0, -50%) scale(.8);
    -o-transform: translate(0, -50%) scale(.8);
    transform: translate(0, -50%) scale(.8);
}

@media all and (max-width: 750px) {
    .ocai-recommend {
        padding: 0 5% !important;
    }

    .ocai-recommend .headline {
        padding: 10% 0;
    }

    .ocai-recommend .swiper-slide {
        padding: 0;
    }

    .ocai-recommend .item {
        width: 100%;
        padding: 0 0 5% 16%;
    }

    .ocai-recommend .item .icon {
        width: 10%;
    }

    .ocai-recommend .item .desc {
        margin-top: 1%;
    }

    .ocai-numbers {
        padding: 9% 5% 6%;
    }

    .ocai-join-now .pic {
        width: 40%;
    }

    .ocai-join-now .desc {
        clear: both;
        width: 100%;
        margin: 5% 0 0 0;
        padding: 5% 0 0 4%;
        border-left: none;
        border-top: 1px solid black;
    }

    .ocai-join-now .desc .title {
        font-size: 32px !important;
    }

    .ocai-join-now .btn-join {
        clear: both;
        float: left;
        margin: 7% 0 4%;
        -webkit-transform: scale(1.2);
        -moz-transform: scale(1.2);
        -ms-transform: scale(1.2);
        -o-transform: scale(1.2);
        transform: scale(1.2);
        -webkit-transform-origin: 0 50%;
        -moz-transform-origin: 0 50%;
        -ms-transform-origin: 0 50%;
        -o-transform-origin: 0 50%;
        transform-origin: 0 50%;
    }
}

.solution-page .hcm-exp {
    padding-top: 0;
}

.solution-page .txt-pics {
    padding: 6% 8%;
}

.solution-page .txt-pics .tp-txt-wrap {
    margin-top: 0;
}

.solution-page .txt-pics .tp-txt-wrap .desc {
    margin-top: 0;
}

.solution-page .txt-pics .desc .item {
    margin-bottom: 5%;
}

.solution-page .txt-pics .desc .title {
    margin-bottom: 1%;
}

.solution-page .blue-title .title {
    color: #00bdf2;
}

.solution-kv {
    height: 600px;
    overflow: visible;
    background-color: #00cbff;
}

.solution-kv .sec-txt-wrap {
    top: 18%;
    left: 10%;
    width: 40%;
    color: white;
    z-index: 9000;
}

.solution-kv .desc {
    margin: 2% 0 0;
}

.solution-kv .btn-want-now {
    margin: 4% 0 0;
}

.solution-kv .screenshot {
    height: auto;
    z-index: 8000;
}

@media all and (max-width: 750px) {
    .solution-kv {
        height: 760px;
    }

    .solution-kv .maxw-img {
        position: absolute;
        left: -58%;
        bottom: 0;
        width: 1250px;
    }

    .solution-kv .sec-txt-wrap {
        top: 8%;
        width: 80%;
    }

    .solution-kv .sec-txt-wrap .font-h1 {
        font-size: 40px !important;
    }

    .solution-kv .btn-want-now {
        display: none;
    }

    .solution-page .mob-box-wrap {
        padding: 6%;
        border-radius: 20px;
        box-shadow: 0 0 15px rgba(0, 0, 0, .1);
    }

    .solution-page .mob-box-wrap .item:last-of-type {
        margin-bottom: 0;
    }

    .solution-page .btn-know-product {
        margin: 20px 0;
        -webkit-transform: scale(1.3);
        -moz-transform: scale(1.3);
        -ms-transform: scale(1.3);
        -o-transform: scale(1.3);
        transform: scale(1.3);
        -webkit-transform-origin: 0 100%;
        -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
        -o-transform-origin: 0 100%;
        transform-origin: 0 100%;
    }

    .solution-page .tab-bar.underline {
        padding: 0 5%;
    }

    .solution-page .tab-bar.underline .item {
        padding: 0 5%;
        line-height: 1.5em;
    }
}

.hr-planning-overview {
    padding-top: 2% !important;
    background-image: none !important;
}

.hr-planning-overview .desc2 .title {
    margin-bottom: 3% !important;
}

@media all and (max-width: 750px) {
    .hr-planning-overview .tp-pic-wrap .mob-box-wrap {
        margin: 10% 0;
    }
}

.talent-development-overview {
    padding: 0 0 5%;
    overflow: visible;
}

.talent-development-overview .subline {
    margin: 1% 15% 3%;
}

.talent-development-overview .work-flow {
    padding: 0 5%;
    line-height: 1.5em;
}

.talent-development-overview .work-flow ul {
    margin: 15% 0 0 6%;
}

.talent-development-overview .work-flow li {
    margin: 0 0 8%;
}

.talent-development-overview .flow1 .item {
    clear: none;
    width: 15%;
    margin: 0 .4%;
}

.talent-development-overview .flow1 .item.arrow {
    width: 4.2%;
}

.talent-development-overview .flow1 .item.arrow img {
    -webkit-transform: translate(0, 18%);
    -moz-transform: translate(0, 18%);
    -ms-transform: translate(0, 18%);
    -o-transform: translate(0, 18%);
    transform: translate(0, 18%);
}

@media all and (max-width: 750px) {
    .talent-development-page .solution-kv .maxw-img {
        left: -83%;
        bottom: 30px;
        width: 1440px;
    }

    .talent-development-overview {
        padding: 0 0 8%;
    }

    .talent-development-overview .subline {
        margin: 5% 5% 0;
    }

    .talent-development-overview .mob-box-wrap {
        position: relative;
        top: -70px;
        margin: 0 5%;
    }

    .talent-development-overview .work-flow {
        padding: 0 8%;
    }

    .talent-development-overview .flow1 .item {
        width: 100%;
        margin: 1% 0;
        -webkit-transform: translate(0, -50%);
        -moz-transform: translate(0, -50%);
        -ms-transform: translate(0, -50%);
        -o-transform: translate(0, -50%);
        transform: translate(0, -50%);
    }

    .talent-development-overview .flow1 .item.play {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    .talent-development-overview .flow1 .item.arrow {
        width: 20%;
        margin: 2% 11%;
    }

    .talent-development-overview .flow1 .item.arrow img {
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transform: rotate(90deg);
    }

    .talent-development-overview .flow1 .item .pic {
        width: 30%;
    }

    .talent-development-overview .work-flow ul {
        position: absolute;
        top: 50%;
        left: 40%;
        width: 60%;
        margin: 0;
        -webkit-transform: translate(0, -50%);
        -moz-transform: translate(0, -50%);
        -ms-transform: translate(0, -50%);
        -o-transform: translate(0, -50%);
        transform: translate(0, -50%);
    }

    .talent-development-overview .work-flow li {
        margin: 1.5% 0;
    }

    .talent-development-overview .work-flow li br {
        display: none;
    }
}

.employee-survey-overview {
    padding: 0 0 5%;
}

.employee-survey-overview .headline {
    color: #898989;
    padding: 0 0 5%;
}

.employee-survey-overview .work-flow {
    padding: 0 8%;
    line-height: 1.5em;
}

.employee-survey-overview .work-flow .item {
    width: 19%;
}

.employee-survey-overview .work-flow .item.arrow {
    width: 15%;
    margin: 0 2%;
}

.employee-survey-overview .work-flow .item.arrow img {
    -webkit-transform: translate(0, 10%);
    -moz-transform: translate(0, 10%);
    -ms-transform: translate(0, 10%);
    -o-transform: translate(0, 10%);
    transform: translate(0, 10%);
}

@media all and (max-width: 750px) {
    .employee-survey-overview {
        padding: 5% !important;
    }

    .employee-survey-overview .headline {
        padding: 6%;
        line-height: 1.8em;
        white-space: nowrap;
    }

    .employee-survey-overview .work-flow {
        padding: 0;
        margin: 10% 0 4%;
    }

    .employee-survey-overview .work-flow .item {
        width: 25%;
    }

    .employee-survey-overview .work-flow .item.arrow {
        width: 10%;
        margin: 2% 0 0;
    }
}

.campus-recruiting-overview {
    overflow: visible;
}

.campus-recruiting-overview .tabc-section {
    background-image: none !important;
}

@media all and (max-width: 750px) {
    .campus-recruiting-page .solution-kv .maxw-img {
        left: -83%;
        bottom: 32px;
        width: 1440px;
    }

    .campus-recruiting-overview .tab-bar {
        top: -50px;
    }

    .campus-recruiting-overview .mob-box-wrap {
        -webkit-transform: translate(0, -50px);
        -moz-transform: translate(0, -50px);
        -ms-transform: translate(0, -50px);
        -o-transform: translate(0, -50px);
        transform: translate(0, -50px);
    }
}

.salary-benefits-overview {
    padding: 0 0 5%;
    overflow: visible;
}

.salary-benefits-overview .headline {
    color: #898989;
    padding: 0 0 3%;
    line-height: 1.8em;
}

.salary-benefits-overview .subline {
    line-height: 1.8em;
}

.salary-benefits-intro2 {
    padding-bottom: 0 !important;
}

.salary-benefits-intro2 .phone {
    width: 60%;
    margin: 0 auto;
    display: block;
}

.salary-benefits-intro3 {
    padding-bottom: 2% !important;
}

.salary-benefits-intro3 ul {
    line-height: 1.8em;
}

.salary-benefits-flow {
    padding: 4% 0 2%;
}

.salary-benefits-flow .work-flow {
    padding: 3% 4% 0;
}

.salary-benefits-flow .work-flow .item {
    width: 12%;
}

.salary-benefits-flow .work-flow .item.arrow {
    width: 4%;
    margin: 0;
}

.salary-benefits-flow .work-flow .item.arrow img {
    -webkit-transform: translate(0, 100%);
    -moz-transform: translate(0, 100%);
    -ms-transform: translate(0, 100%);
    -o-transform: translate(0, 100%);
    transform: translate(0, 100%);
}

@media all and (max-width: 750px) {
    .salary-benefits-page .solution-kv .maxw-img {
        left: -68%;
        bottom: 47px;
    }

    .salary-benefits-overview .headline {
        position: relative;
        top: -60px;
        padding: 6%;
        margin: 0 5%;
    }

    .salary-benefits-intro2 .phone {
        width: 50%;
    }

    .salary-benefits-flow .headline {
        margin: 5% 0 1%;
    }

    .salary-benefits-flow .work-flow .item {
        width: 24%;
        margin: 3% 0;
    }

    .salary-benefits-flow .work-flow .item:nth-child(6) {
        display: none;
    }

    .salary-benefits-flow .work-flow .item.arrow {
        width: 8%;
        margin: 5% 3%;
    }
}

.social-recruiting-overview {
    overflow: visible;
    padding-top: 0 !important;
}

.social-recruiting-flow {
    padding: 4% 0 2%;
}

.social-recruiting-flow .work-flow {
    padding: 3% 8% 0;
}

.social-recruiting-flow .work-flow .item {
    width: 19%;
}

.social-recruiting-flow .work-flow .item.arrow {
    width: 5%;
}

.social-recruiting-flow .work-flow .item.arrow img {
    -webkit-transform: translate(0, 10%);
    -moz-transform: translate(0, 10%);
    -ms-transform: translate(0, 10%);
    -o-transform: translate(0, 10%);
    transform: translate(0, 10%);
}

@media all and (max-width: 750px) {
    .social-recruiting-page .solution-kv .maxw-img {
        left: -83%;
        bottom: 32px;
        width: 1440px;
    }

    .social-recruiting-overview .desc {
        -webkit-transform: translate(0, -80px);
        -moz-transform: translate(0, -80px);
        -ms-transform: translate(0, -80px);
        -o-transform: translate(0, -80px);
        transform: translate(0, -80px);
    }

    .social-recruiting-overview .desc2 {
        -webkit-transform: translate(0, -50px);
        -moz-transform: translate(0, -50px);
        -ms-transform: translate(0, -50px);
        -o-transform: translate(0, -50px);
        transform: translate(0, -50px);
    }

    .social-recruiting-overview .tp-txt-wrap .item {
        float: left;
        width: 45%;
        margin: 0 2.5%;
    }

    .social-recruiting-flow {
        padding: 8% 0 0;
    }

    .social-recruiting-flow .work-flow {
        padding: 5% 5% 0;
    }

    .social-recruiting-flow .work-flow .item {
        width: 39%;
        margin-bottom: 7%;
    }

    .social-recruiting-flow .work-flow .item.arrow {
        margin-top: 3%;
    }
}

.leader-recruiting-overview {
    padding-top: 2% !important;
    padding-bottom: 3% !important;
}

.leader-recruiting-flow {
    padding: 5% 0;
}

.leader-recruiting-flow .work-flow {
    padding: 0 8%;
}

.leader-recruiting-flow .work-flow .item {
    width: 13.5%;
    margin: 0 .5%;
}

.leader-recruiting-flow .work-flow .item.big {
    width: 14.5%;
}

.leader-recruiting-flow .work-flow .item.small {
    width: 12.5%;
}

.leader-recruiting-flow .work-flow .item.arrow {
    width: 2.5%;
    margin: 0;
}

.leader-recruiting-flow .work-flow .item.arrow img {
    -webkit-transform: translate(0, 30%);
    -moz-transform: translate(0, 30%);
    -ms-transform: translate(0, 30%);
    -o-transform: translate(0, 30%);
    transform: translate(0, 30%);
}

@media all and (max-width: 750px) {
    .leader-recruiting-page .solution-kv {
        margin-bottom: 50px;
    }

    .leader-recruiting-page .solution-kv .maxw-img {
        left: -87%;
        bottom: -50px;
        width: 1440px;
    }

    .leader-recruiting-overview .tp-pic-wrap {
        margin-top: 10%;
        margin-bottom: 6%;
    }

    .leader-recruiting-flow .work-flow {
        padding: 1% 5%;
    }

    .leader-recruiting-flow .work-flow .item {
        width: 27.5%;
        margin: 4% 1%;
    }

    .leader-recruiting-flow .work-flow .item:nth-child(6) {
        display: none;
    }

    .leader-recruiting-flow .work-flow .item:nth-child(7) {
        clear: both;
    }

    .leader-recruiting-flow .work-flow .item.big {
        width: 30%;
    }

    .leader-recruiting-flow .work-flow .item.small {
        width: 25%;
    }

    .leader-recruiting-flow .work-flow .item.arrow {
        width: 5%;
        margin-top: 4%;
    }
}

.performance-overview .tabc-section {
    background-image: none !important;
}

.performance-intro6 .desc {
    padding: 5% 0 0;
}

@media all and (max-width: 750px) {
    .performance-overview .tp-pic-wrap {
        margin-top: 8%;
    }
}

.training-overview {
    overflow: visible;
}

.training-overview .tabc-section {
    background-image: none !important;
}

.training-overview .headline {
    position: relative;
    padding: 0 0 4%;
}

.training-overview .tabc-section .tp-txt-wrap {
    margin-top: 5%;
}

.training-intro5 {
    padding-bottom: 0 !important;
}

.training-intro5 .tp-pic-wrap img {
    width: 60%;
    margin: 0 auto;
    display: block;
}

.training-intro9 {
    padding-bottom: 0 !important;
}

.training-intro9 .tp-pic-wrap img {
    width: 60%;
    margin: 0 auto;
    display: block;
}

.training-values {
    padding: 4% 8% 1%;
}

.training-values .headline {
    padding: 1% 10% 4%;
}

.training-values .item {
    float: left;
    width: 24%;
    margin: 0 .5%;
    padding: 5% 1%;
    text-align: center;
    background-color: #f8f8f8;
    border-bottom: 5px solid #00cbff;
}

.training-values .item .icon {
    width: 25%;
}

.training-values .item .title {
    margin: 15% 0 3%;
}

@media all and (max-width: 750px) {
    .staff-training-page .solution-kv .maxw-img {
        left: -70%;
        bottom: 46px;
    }

    .staff-training-page .tab-bar.underline {
        padding: 0 1%;
    }

    .staff-training-page .tab-bar.underline .item {
        padding: 0 2%;
        width: 28% !important;
    }

    .staff-training-page .tab-bar.underline .item:last-of-type {
        width: 44% !important;
    }

    .training-overview .headline {
        top: -30px;
    }

    .training-overview .tabc-section {
        padding: 5% 5% 10% !important;
    }

    .training-overview .tabc-section .tp-pic-wrap {
        margin-top: 8% !important;
    }

    .training-values {
        padding: 8% 5% 1%;
    }

    .training-values .item {
        width: 46%;
        margin: 3% 2%;
    }
}

.client-page .hcm-exp .title {
    white-space: nowrap;
}

@media all and (max-width: 750px) {
    .client-page .page-kv .kv-bg {
        background-position: 80% 0;
    }

    .client-page .page-kv .btn-want-now {
        display: none;
    }

    .client-page .page-kv .sec-txt-wrap .desc {
        width: 70%;
    }

    .client-page .page-kv .sec-txt-wrap .desc br {
        display: none;
    }

    .client-page .roll-num {
        padding-top: 8%;
    }
}

.client-circle .headline {
    padding: 5% 0 0;
}

.client-circle .ensure {
    color: #1ba9f4;
}

.client-circle .item {
    position: absolute;
    top: 20%;
    left: 20%;
}

.client-circle .item ul {
    color: #555;
    line-height: 1.8em;
}

.client-circle .left1 {
    top: 20%;
    left: 20%;
}

.client-circle .left2 {
    top: 45%;
    left: 13%;
}

.client-circle .left3 {
    top: 69%;
    left: 20%;
}

.client-circle .right1 {
    top: 20%;
    left: 68%;
}

.client-circle .right2 {
    top: 45%;
    left: 75%;
}

.client-circle .right3 {
    top: 69%;
    left: 68%;
}

.client-circle .left1 .title {
    color: #ff7221;
}

.client-circle .left2 .title {
    color: #ff9f00;
}

.client-circle .left3 .title {
    color: #11c3ee;
}

.client-circle .right1 .title {
    color: #ffa500;
}

.client-circle .right2 .title {
    color: #00a1f3;
}

.client-circle .right3 .title {
    color: #4863f3;
}

@media all and (max-width: 750px) {
    .client-circle {
        padding: 3% 0;
    }

    .client-circle .circle-wrap .pic-bg {
        position: relative;
        left: -80%;
        width: 260%;
    }

    .client-circle .ensure {
        top: 30%;
    }

    .client-circle .item {
        position: relative;
        float: left;
        top: 0;
        left: 0;
        width: 37%;
        margin: 3% 2% 3% 9%;
    }
}

.client-modules {
    padding: 5% 8% 6%;
}

.client-modules .headline {
    margin: 0 0 4%;
}

.client-modules .item {
    position: relative;
    float: left;
    width: 15.8%;
    margin: 0 1% 0 0;
    display: block;
    overflow: hidden;
    border-radius: 10px;
    background-color: #f7f8f8;
    -webkit-transition: all 1s ease-out 0s;
    -moz-transition: all 1s ease-out 0s;
    -ms-transition: all 1s ease-out 0s;
    -o-transition: all 1s ease-out 0s;
    transition: all 1s ease-out 0s;
}

.client-modules .item:last-of-type {
    margin-right: 0;
}

.client-modules .item .line {
    height: 10px;
    z-index: 1000;
    -webkit-transition: all .3s ease-out 0s;
    -moz-transition: all .3s ease-out 0s;
    -ms-transition: all .3s ease-out 0s;
    -o-transition: all .3s ease-out 0s;
    transition: all .3s ease-out 0s;
}

.client-modules .item.green .line {
    background-color: #00ffd8;
}

.client-modules .item.blue .line {
    background-color: #00cbff;
}

.client-modules .item.navy .line {
    background-color: #0054ff;
}

.client-modules .item.purple .line {
    background-color: #a626ff;
}

.client-modules .item.pink .line {
    background-color: #ff6085;
}

.client-modules .item.yellow .line {
    background-color: #f7d808;
}

.client-modules .item .info {
    height: auto;
}

.client-modules .item .icon {
    position: relative;
    width: 43%;
    display: block;
    margin: 25% auto 8%;
}

.client-modules .item .intro {
    margin: 5px 0 0;
    line-height: 1.5em;
}

.client-modules .item .title {
    text-align: center;
}

.client-modules .item ul {
    padding: 2% 9% 0 23%;
}

@media all and (max-width: 750px) {
    .client-modules {
        padding: 5% 0;
    }

    .client-modules .swiper-slide {
        padding: 3%;
    }

    .client-modules .item {
        width: 45%;
        height: 480px;
        margin: 0 2.5%;
    }

    .client-modules .item ul {
        padding: 5% 8% 0 20%;
    }
}

.client-service-flow {
    padding: 0 7% 5%;
}

.client-service-flow .headline {
    margin: 0 0 5%;
}

.client-service-flow .flow-pic {
    float: left;
    width: 55%;
}

.client-service-flow .sec-txt-wrap {
    float: left;
    width: 35%;
    margin: 0 0 0 6%;
}

.client-service-flow .sec-txt-wrap .item {
    margin: 0 0 5%;
}

.client-service-flow .sec-txt-wrap ul {
    color: #555;
}

@media all and (max-width: 750px) {
    .client-service-flow .flow-pic {
        width: 100%;
    }

    .client-service-flow .sec-txt-wrap {
        width: 100%;
        margin: 8% 0 0;
    }
}

.cases-page .hcm-exp-wrap {
    margin-top: 3%;
}

@media all and (max-width: 750px) {
    .cases-page .page-kv .btn-want-now {
        display: none;
    }
}

.cases-page .cases-filter {
    top: -50px;
    width: 84%;
    color: #555;
    margin: 0 auto;
    font-size: 14px;
    max-width: 1200px;
    padding: 1.5em .5em;
    border-radius: 10px;
    background-color: white;
    border: 1px solid rgba(0, 0, 0, .05);
    box-shadow: 0 10px 15px rgb(0, 0, 0, .05);
}

.cases-page .filter-group .label {
    float: left;
    width: 10%;
    margin: .45em 0;
    text-align: center;
    line-height: 1.5em;
}

.cases-page .filter-group .items {
    float: left;
    width: 90%;
    clear: none;
}

.cases-page .filter-group .item {
    float: left;
    cursor: pointer;
    line-height: 1.5em;
    padding: .2em 1.5em;
    margin: .25em .6em .25em 0;
    border-radius: 10px;
    list-style-type: none;
}

.cases-page .filter-group .item:hover {
    background-color: rgba(0, 203, 255, .2);
}

.cases-page .filter-group .item.selected {
    color: white;
    background-color: rgba(0, 203, 255, .8);
}

.cases-page .filter-group.product {
    margin-top: 2%;
}

@media all and (max-width: 750px) {
    .cases-page .cases-filter {
        width: 87%;
        font-size: 20px;
    }

    .cases-page .filter-group {
        padding: 4% 0 3%;
    }

    .cases-page .filter-group .label {
        width: 100%;
        margin: 0 0 3%;
        color: #009fda;
        font-size: 26px;
    }

    .cases-page .filter-group .items {
        clear: both;
        width: 100%;
        padding: 0 5%;
        overflow: auto;
        white-space: nowrap;
    }

    .cases-page .filter-group .item {
        float: none;
        padding: .2em 1em;
        display: inline-block;
    }

    .cases-page .filter-group.product {
        margin-top: 0;
    }
}

.case-card-list {
    padding: 1% 8% 2%;
}

.case-card-list .headline {
    margin: 0 1% 1%;
}

.case-card-item {
    position: relative;
    float: left;
    width: 23%;
    margin: 1.5% 1%;
    display: block;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
}

.case-card-item .pic {
    margin: 5%;
    width: 90%;
    height: auto;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 0 5px rgba(0, 0, 0, .1);
}

.case-card-item .info {
    top: 50%;
    bottom: 5%;
    height: auto;
    padding: 0 8%;
    overflow: hidden;
}

.case-card-item .title {
    line-height: 1.5em;
}

.case-card-item .desc {
    color: #858585;
    margin-top: 5%;
    max-height: 6em;
    overflow: hidden;
    line-height: 1.5em;
}

@media all and (max-width: 750px) {
    .case-card-list {
        padding: 3% 5% 5%;
    }

    .case-card-list .headline {
        margin: 0 2% 2%;
    }

    .case-card-item {
        width: 46%;
        margin: 2.5% 2%;
    }

    .case-card-item .info {
        bottom: 9%;
    }
}

.case-detail-page .res-mcc-wrap {
    padding-top: 4%;
}

.case-detail-page .hcm-exp {
    padding-top: 0;
}

.case-detail-page .content-wrap .headline {
    margin: 0 0 2%;
    padding: 0 0 2%;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.case-detail-page .content-wrap .sub-info {
    color: #666;
    margin: 0 0 4%;
}

.case-detail-page .content-wrap .sub-info a {
    color: #009fda;
}

.case-detail-page .content-wrap .sub-info a:hover {
    text-decoration: underline;
}

.case-detail-page .detail-wrap {
    font-size: 14px;
    line-height: 2em;
}

.case-detail-page .detail-wrap p {
    margin: 1em 0;
}

.case-detail-page .detail-wrap img {
    display: block;
    max-width: 100%;
    margin: 1.5em auto;
}

@media all and (max-width: 750px) {
    .case-detail-page .content-wrap {
        padding: 2% 5%;
    }

    .case-detail-page .detail-wrap {
        font-size: 18px;
    }
}

.res-mcc-wrap {
    padding: 6% 8%;
}

.res-mcc-left {
    position: relative;
    float: left;
    clear: none;
    width: 67%;
}

.res-mcc-right {
    position: relative;
    float: right;
    clear: none;
    width: 25%;
}

.resources-kv {
    height: auto;
    box-shadow: 0 0 5px rgba(0, 0, 0, .2);
}

.resources-kv .swiper-pagination {
    position: absolute;
    bottom: 0;
    width: 100%;
    margin: 2% 0;
}

.resources-kv .sec-txt-wrap {
    width: 40%;
    text-shadow: 0 0 10px rgba(0, 0, 0, .5);
}

.resources-page .hcm-exp {
    padding-top: 0;
}

@media all and (max-width: 750px) {
    .res-mcc-wrap {
        padding: 8% 3%;
    }

    .res-mcc-left {
        width: 100%;
    }

    .res-mcc-right {
        width: 100%;
    }

    .resources-kv .kv-bg {
        width: 140%;
    }
}

.resources-types .item {
    float: left;
    width: 20%;
    color: #333;
    font-weight: bold;
    text-align: center;
    white-space: nowrap;
}

.resources-types .item.all {
    width: 15%;
}

.resources-types .item span {
    padding: 5px 0;
    cursor: pointer;
}

.resources-types .item span:hover {
    color: #00bdf2;
}

.resources-types .selected {
    pointer-events: none;
}

.resources-types .selected span {
    color: #00bdf2;
    cursor: default;
    border-bottom: 3px solid #00bdf2;
}

.res-card-list {
    margin: 3% 0 0;
}

.res-card-list .headline {
    margin: 0 1% 1%;
}

.res-card-item {
    position: relative;
    float: left;
    width: 30.3%;
    margin: 2% 1.5%;
    display: block;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
}

.res-card-item .pic {
    margin: 5%;
    width: 90%;
    height: auto;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 0 5px rgba(0, 0, 0, .1);
}

.res-card-item .title,.res-card-item .tags {
    position: absolute;
    padding: 0 8%;
    overflow: hidden;
    line-height: 1.5em;
}

.res-card-item .title {
    top: 58%;
    height: 3em;
}

.res-card-item .tags {
    bottom: 5%;
    height: 1.5em;
    color: #858585;
}

@media all and (max-width: 750px) {
    .res-card-list {
        margin: 4% 0 0;
    }

    .res-card-list .headline {
        margin: 0 2% 2%;
    }

    .res-card-item {
        width: 44%;
        margin: 2.5% 3%;
    }
}

.res-detail-page .page-kv {
    height: auto;
    box-shadow: none;
}

.res-detail-page .res-mcc-wrap {
    padding-top: 4%;
}

.res-detail-page .hcm-exp {
    padding-top: 0;
}

.res-detail-page .content-wrap .headline {
    margin: 0 0 2%;
    padding: 0 0 2%;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.res-detail-page .content-wrap .sub-info {
    color: #666;
    margin: 0 0 4%;
}

.res-detail-page .content-wrap .sub-info a {
    color: #009fda;
}

.res-detail-page .content-wrap .sub-info a:hover {
    text-decoration: underline;
}

.res-detail-page .detail-wrap {
    font-size: 14px;
    line-height: 2em;
}

.res-detail-page .detail-wrap p {
    margin: 1em 0;
}

.res-detail-page .detail-wrap img {
    display: block;
    max-width: 100%;
    margin: 1.5em auto;
}

.res-detail-page .download-link {
    color: #0173b2;
    margin: 1em 0 0;
    display: inline-block;
    border-bottom: 1px dashed;
}

.res-detail-page .download-link:hover {
    color: #14b2f2;
    border-bottom: 1px solid;
}

@media all and (max-width: 750px) {
    .res-detail-page .page-kv .kv-bg {
        position: relative;
        left: -30%;
        width: 140%;
    }

    .res-detail-page .content-wrap {
        padding: 2% 5%;
    }

    .res-detail-page .detail-wrap {
        font-size: 18px;
    }
}

.res-side-col .headline {
    color: #333;
    margin: 2% 0;
    font-size: 16px;
    line-height: 1.2em;
    font-weight: bold;
    padding: 0 0 0 10px;
    border-left: 4px solid #2eb7e2;
}

.res-side-col .link-item {
    padding: 5% 0;
    display: block;
    font-size: 14px;
    line-height: 1.5em;
    border-bottom: 1px solid rgba(0, 0, 0, .2);
}

.res-side-col .link-item:hover {
    color: #2eb7e2;
}

.res-side-col .link-item:last-of-type {
}

.res-side-col .banner {
    margin: 0 0 6%;
    display: block;
}

.res-side-col .links-wrap {
    margin: 15% 0 0;
}

.res-side-col .contact {
    position: relative;
    margin: 15% 0 0;
}

.res-side-col .contact .headline {
    margin: 2% 0 5%;
}

.res-side-col .contact .qrcode {
    width: 45%;
}

.res-side-col .contact .info {
    left: 50%;
    width: 50%;
    line-height: 2em;
    white-space: nowrap;
}

.res-side-col .contact .info a {
    color: #2eb7e2;
}

@media all and (max-width: 750px) {
    .res-side-col {
        padding: 10% 5% 5%;
    }

    .res-side-col .links-wrap {
        margin: 8% 0 0;
    }

    .res-side-col .contact {
        margin: 8% 0 0;
    }

    .res-side-col .headline {
        font-size: 24px;
        padding: 0 0 0 20px;
    }

    .res-side-col .link-item {
        padding: 3% 0;
        font-size: 20px;
    }

    .res-side-col .contact .qrcode {
        width: 20%;
    }

    .res-side-col .contact .info {
        left: 25%;
        font-size: 26px;
    }
}

.tag-page .hcm-exp-wrap {
    margin-top: 3%;
}

.tag-page .tag-info {
    padding: 4% 8% 0;
}

.tag-page .tag-info .headline {
    color: #555;
    margin: 0 0 2%;
    padding: 0 0 2%;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}

@media all and (max-width: 750px) {
    .tag-page .tag-info {
        padding: 8% 5% 0;
    }
}

.tag-page .res-card-list {
    margin: 0 auto;
    padding: 2% 8%;
}

.tag-page .res-card-item {
    width: 23%;
    margin: 1.5% 1%;
}

.tag-page .case-card-list {
    padding: 2% 8%;
}

@media all and (max-width: 750px) {
    .tag-page .res-card-list {
        margin: 0 auto;
        padding: 5%;
    }

    .tag-page .res-card-item {
        width: 46%;
        margin: 2.5% 2%;
    }

    .tag-page .case-card-list {
        padding: 5%;
    }
}

.trial-apply {
    overflow: visible;
    background-color: #02a2db;
}

.trial-apply .maxw-layout {
    background-position: right center;
}

.trial-apply .intro {
    float: left;
    width: 42%;
    color: white;
    margin: 9% 0 0 6%;
    text-align: center;
}

.trial-apply .intro .headline {
    margin: 0 0 3%;
}

.trial-apply .intro .logo {
    width: 70%;
    overflow: hidden;
    border-radius: 20px;
    margin: 10% auto 15%;
}

@media all and (max-width: 750px) {
    .trial-apply .maxw-layout {
        background-size: auto 70%;
        background-position: 90% 75%;
    }

    .trial-apply .intro {
        width: 84%;
        text-align: left;
        margin: 15% 8% 10%;
    }

    .trial-apply .intro .logo {
        display: none;
    }
}

.trial-apply .form {
    float: left;
    width: 31%;
    margin: 8% 6%;
    border-radius: 10px;
    background-color: #dcf5ff;
    box-shadow: 0 5px 5px rgba(0, 0, 0, .1);
}

.trial-apply .form .wrapper {
    width: 100%;
    padding: 25px;
    border-radius: 10px;
    background-color: white;
}

.trial-apply .form .title {
    color: #333;
    font-size: 26px;
    line-height: 40px;
    text-align: center;
}

.trial-apply .form .sub-title {
    color: #9b9b9b;
    padding: 10px 0;
}

.trial-apply .form .tip {
    color: #333;
    padding: 20px;
    display: none;
    text-align: center;
}

.trial-apply .fr-field {
    position: relative;
    width: 100%;
    margin: 20px 0 0;
    line-height: 40px;
    border-radius: 5px;
    background-color: white;
    border: 1px solid #9b9b9b;
}

.trial-apply input {
    width: 100%;
    padding: 0 15px;
}

.trial-apply .product .label {
    padding: 0 15px;
}

.trial-apply .product .arrow {
    right: 0;
    width: 50px;
    height: 50px;
    z-index: 2000;
    background-position: 0 -500px;
}

.trial-apply .product.expanded .arrow {
    -webkit-transform: translate(0, -50%) rotate(180deg);
    -moz-transform: translate(0, -50%) rotate(180deg);
    -ms-transform: translate(0, -50%) rotate(180deg);
    -o-transform: translate(0, -50%) rotate(180deg);
    transform: translate(0, -50%) rotate(180deg);
}

.trial-apply .product .expand {
    top: 0;
    padding: 50px 0 0;
    border-radius: 5px;
    background-color: transparent;
    box-shadow: 0 10px 10px rgba(0, 0, 0, .2);
}

.trial-apply .product .expand li {
    padding: 0 15px;
    font-size: 14px;
    line-height: 30px;
    border-bottom: none;
    background-color: white;
}

.trial-apply .product .expand li:hover {
    background-color: #efefef;
}

.trial-apply .privacy {
    border: none;
    color: #9b9b9b;
    padding: 0 0 0 40px;
}

.trial-apply .privacy .checker {
    left: -5px;
    width: 50px;
    height: 50px;
    background-position: 0 -550px;
}

.trial-apply .privacy .checker.checked {
    background-position: -50px -550px;
}

.trial-apply .privacy a {
    color: #555;
}

.trial-apply .privacy a:hover {
    color: #02a2db;
}

.trial-apply .btn-submit {
    width: auto;
    color: white;
    border: none;
    display: block;
    font-size: 24px;
    line-height: 50px;
    cursor: pointer;
    margin: 20px 5px;
    text-align: center;
    background: #02a2db;
    border-radius: 10px;
}

.trial-apply .btn-submit:hover {
    background-color: #ff9c00;
}

@media all and (max-width: 750px) {
    .trial-apply .form {
        width: 84%;
        margin: 4% 8% 20%;
    }

    .trial-apply .form .wrapper {
        padding: 30px 60px;
    }

    .trial-apply .form .title {
        font-size: 36px;
        line-height: 60px;
    }

    .trial-apply .form .sub-title {
        padding: 20px 0;
        font-size: 20px;
    }

    .trial-apply .fr-field {
        font-size: 20px;
        line-height: 50px;
    }

    .trial-apply ::-webkit-input-placeholder {
        font-size: 20px;
    }

    .trial-apply input {
        padding: 0 25px;
        font-size: 20px;
        line-height: 50px;
    }

    .trial-apply .product .label {
        padding: 0 25px;
    }

    .trial-apply .product .expand {
        padding: 70px 0 0;
    }

    .trial-apply .product .expand li {
        padding: 0 25px;
        font-size: 20px;
        line-height: 50px;
    }

    .trial-apply .privacy {
        padding: 0 0 0 50px;
    }

    .trial-apply .privacy .checker {
        -webkit-transform: translate(0, -50%) scale(1.5);
        -moz-transform: translate(0, -50%) scale(1.5);
        -ms-transform: translate(0, -50%) scale(1.5);
        -o-transform: translate(0, -50%) scale(1.5);
        transform: translate(0, -50%) scale(1.5);
    }

    .trial-apply .btn-submit {
        font-size: 28px;
        line-height: 75px;
        margin: 40px 5px 20px;
    }
}

.about-kv {
    height: 560px;
    background-color: #131722;
}

.about-kv .title {
    top: 55%;
    width: 100%;
    height: 60px;
    color: white;
    font-size: 36px;
    line-height: 60px;
}

.about-kv .title .left {
    position: absolute;
    right: 65%;
    text-align: right;
}

.about-kv .title .right {
    position: absolute;
    left: 65%;
    text-align: left;
}

.about-whoami {
    padding: 5% 8% 2%;
    background-image: none !important;
}

.about-whoami .headline {
    color: #0396d8;
    margin: 0 0 5%;
}

.about-whoami p {
    margin: 0 0 1em;
}

.about-whoami .tp-txt-wrap {
    width: 48% !important;
    margin-top: 0% !important;
}

.about-whoami .tp-txt-wrap .desc {
    margin-top: 0% !important;
}

@media all and (max-width: 750px) {
    .about-whoami .tp-txt-wrap {
        padding: 0 5%;
        width: 100% !important;
    }
}

.about-values {
    padding: 4% 8%;
}

.about-values .headline {
    color: #0396d8;
    padding: 0 10% 5%;
}

.about-values .item {
    float: left;
    width: 24%;
    margin: 0 .5%;
    padding: 1% 1em 5%;
    text-align: center;
    background-color: #f8f8f8;
    border-bottom: 5px solid #ffa800;
}

.about-values .item .icon {
    width: 40%;
}

.about-values .item .title {
    color: #ffa800;
    margin: 5% 0 3%;
}

.about-values .item .desc {
    color: #818181;
    line-height: 1.8em;
    white-space: pre-line;
}

.about-values .item.blue {
    border-color: #00c0fa;
}

.about-values .item.blue .title {
    color: #00c0fa;
}

.about-values .item.green {
    border-color: #2ef4ba;
}

.about-values .item.green .title {
    color: #2ef4ba;
}

.about-values .item.navy {
    border-color: #0084ff;
}

.about-values .item.navy .title {
    color: #0084ff;
}

@media all and (max-width: 750px) {
    .about-values {
        padding: 4%;
    }

    .about-values .item {
        width: 46%;
        margin: 2%;
    }
}

.about-honor {
    padding: 4% 8% 0;
}

.about-honor .headline {
    color: #0396d8;
    padding: 0 10% 5%;
}

.about-honor .tabc-section {
    margin: 5% 0;
    padding: 0;
}

.about-honor .swiper-slide {
    padding: 0 10px;
}

.about-honor .tp-txt-wrap {
    position: absolute;
    top: 0;
    right: 2px;
    bottom: 0;
    width: 48%;
    margin-top: 0;
    overflow-y: auto;
    overflow-x: hidden;
    white-space: pre-line;
}

@media all and (max-width: 750px) {
    .about-honor {
        padding: 4% 0 0;
    }

    .about-honor .tabc-section {
        padding: 0 !important;
    }

    .about-honor .swiper-slide {
        padding: 0 30px;
    }

    .about-honor .tp-txt-wrap {
        position: relative;
        width: 100%;
        height: 300px;
        padding: 0 30px;
    }
}

.about-contact {
    padding: 4% 8% 1%;
}

.about-contact .headline {
    padding: 1% 0;
    margin: 0 0 1%;
    border-bottom: 1px solid rgba(0, 0, 0, .2);
}

.about-contact .contact-us .item {
    float: left;
    width: 25%;
}

.about-contact .office-address {
    margin: 3% 0 0;
}

.about-contact .office-address .column {
    width: 50%;
    float: left;
    clear: none;
}

.about-contact .office-address .item {
    margin: 0 0 2%;
}

.about-contact .office-address .addr {
    color: #595757;
}

@media all and (max-width: 750px) {
    .about-contact .contact-us .item {
        width: 50%;
        margin: 2% 0;
    }

    .about-contact .contact-us .item:nth-child(4) {
        clear: both;
    }

    .about-contact .office-address .item {
        margin: 0 15% 5% 0;
    }
}

.about-join-us {
    color: #555;
    padding: 4% 0 5%;
}

.about-join-us .headline {
    color: #000;
    margin: 0 0 1.5%;
}

.about-join-us .side-pad {
    padding: 0 8%;
}

.about-join-us .row {
    position: relative;
    padding: 10px 0;
    font-size: 14px;
    line-height: 1.5em;
    text-align: center;
    border-bottom: 1px solid rgba(0, 0, 0, .3);
}

.about-join-us .col {
    float: left;
    width: 25%;
    padding: 0 1em;
}

.about-join-us .expanded .col {
    font-weight: bold;
}

.about-join-us .row-head {
    color: white;
    margin: 0 0 10px;
    background-color: #0396d8;
}

.about-join-us .row-head .row {
    padding: 8px 0;
    font-size: 18px;
    border-bottom: none;
}

.about-join-us .more-info {
    position: relative;
    clear: both;
    float: left;
    width: 100%;
    display: none;
    padding: 1.5em 0;
    margin: 10px 0 0;
    border-top: 1px solid rgba(0, 0, 0, .1);
}

.about-join-us .col2 {
    float: left;
    width: 45%;
    text-align: left;
}

.about-join-us .qualify {
    margin-left: 8%;
}

.about-join-us .col2 .label {
    color: #333;
    margin: 0 0 1em;
    font-size: 16px;
    font-weight: bold;
}

.about-join-us .btn-apply {
    position: relative;
    clear: both;
    float: left;
    color: white;
    border: none;
    font-size: 16px;
    margin: 25px 0 0;
    background-color: #03cbfe;
    padding: 12px 80px 12px 30px;
}

.about-join-us .btn-toggle {
    top: -5px;
    right: -10px;
    width: 50px;
    height: 50px;
    -webkit-transform: scale(.6);
    -moz-transform: scale(.6);
    -ms-transform: scale(.6);
    -o-transform: scale(.6);
    transform: scale(.6);
    background-position: 0 -350px;
}

.about-join-us .expanded .btn-toggle {
    background-position: -50px -350px;
}

@media all and (max-width: 750px) {
    .about-join-us .side-pad {
        padding: 0 5%;
    }

    .about-join-us .row {
        font-size: 16px;
        padding: 15px 0;
    }

    .about-join-us .row-head .row {
        padding: 20px 0;
        font-size: 22px;
    }

    .about-join-us .btn-toggle {
        top: 0;
        right: -18px;
        -webkit-transform: scale(.7);
        -moz-transform: scale(.7);
        -ms-transform: scale(.7);
        -o-transform: scale(.7);
        transform: scale(.7);
    }

    .about-join-us .btn-apply {
        margin: 50px 30px 20px;
        -webkit-transform: scale(1.4);
        -moz-transform: scale(1.4);
        -ms-transform: scale(1.4);
        -o-transform: scale(1.4);
        transform: scale(1.4);
    }
}

.privacy-content {
    position: relative;
    color: #333;
    padding: 5% 12%;
    font-size: 16px;
    line-height: 1.8em;
}

.privacy-content p {
    margin: 1em 0;
    text-indent: 2em;
}

.privacy-content h1 {
    font-size: 40px;
    margin: 0 0 1em;
    text-indent: 0;
    line-height: 1.5em;
    text-align: center;
}

.privacy-content .h2 {
    font-size: 18px;
    text-indent: 0;
    margin: 2em 0 .5em;
    font-weight: bold;
}

.privacy-content .bold {
    font-weight: bold;
}

@media all and (max-width: 750px) {
    .privacy-content {
        padding: 10% 5%;
    }
}

.language-selector {
    position: absolute;
    right: 10%;
    top: 36px;
}

.language-current {
    padding: 8px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    color: #333;
    width: 150px;
    height: 40px;
    box-sizing: border-box;
}

.language-icon {
    margin-right: 8px;
    width: 15px;
    height: 15px;
}

.language-dropdown {
    display: none;
    position: absolute;
    background-color: #fff;
    min-width: 100px;
    box-shadow: 0px 4px 8px rgba(0,0,0,0.1);
    z-index: 1;
    border-radius: 4px;
    top: 100%;
    left: 20px;
}

.language-selector:hover .language-dropdown {
    display: block;
}

.language-dropdown a {
    color: #333;
    padding: 8px 16px;
    text-decoration: none;
    display: block;
}

.language-dropdown a:hover {
    background-color: #f5f5f5;
}

.language-dropdown a.selected {
    color: #0066cc;
    font-weight: bold;
}
.hidden { display: none!important; }
.contact-information{
    margin-top: 20px;
}
.position-icon,.maill-icon,.tel-icon{
    width: 14px;
    height: 14px;
    margin-right: 6px;
    margin-top: 3px;
}
.mt-20{
    margin-top: 20px;
}
.main-menu .lv-4 .title {
    font-size: 15px;
    line-height: 30px;
}
.main-menu .lv-4 .intro {
    color: #757575;
    font-size: 14px;
    margin: 5px 0 10px;
    line-height: 1.8em;
}