.form - label,
.label {
    font - weight: 400
}

[id *=xunlei_com_thunder],
body > a > img {
    display: none
}

.readable,
.readable - font,
body {
    text - rendering: optimizeLegibility;
    - moz - osx - font - smoothing: grayscale
}

.page - info - team.members - list.member.simple - info.more: after,
body[class *=page - support].detail - wrapper.question - detail.question - content.summary: after,
body[class *=page - best - practices].detail - wrapper.question - detail.question - content.summary: after {
    clear: both
}

.hack - webkit - render {
    -webkit - transform: translateZ(0);
    - webkit - backface - visibility: hidden
}

.shadow - z1 {
    -webkit - box - shadow: 0 2 px 5 px 0 rgba(0, 0, 0, .16), 0 2 px 10 px 0 rgba(0, 0, 0, .12);
    - moz - box - shadow: 0 2 px 5 px 0 rgba(0, 0, 0, .16), 0 2 px 10 px 0 rgba(0, 0, 0, .12);
    box - shadow: 0 2 px 5 px 0 rgba(0, 0, 0, .16), 0 2 px 10 px 0 rgba(0, 0, 0, .12)
}

.shadow - z1h {
    -webkit - box - shadow: 0 5 px 11 px 0 rgba(0, 0, 0, .18), 0 4 px 15 px 0 rgba(0, 0, 0, .15);
    - moz - box - shadow: 0 5 px 11 px 0 rgba(0, 0, 0, .18), 0 4 px 15 px 0 rgba(0, 0, 0, .15);
    box - shadow: 0 5 px 11 px 0 rgba(0, 0, 0, .18), 0 4 px 15 px 0 rgba(0, 0, 0, .15)
}

.shadow - z2 {
    -webkit - box - shadow: 0 8 px 17 px 0 rgba(0, 0, 0, .2), 0 6 px 20 px 0 rgba(0, 0, 0, .19);
    - moz - box - shadow: 0 8 px 17 px 0 rgba(0, 0, 0, .2), 0 6 px 20 px 0 rgba(0, 0, 0, .19);
    box - shadow: 0 8 px 17 px 0 rgba(0, 0, 0, .2), 0 6 px 20 px 0 rgba(0, 0, 0, .19)
}

.shadow - z3 {
    -webkit - box - shadow: 0 12 px 15 px 0 rgba(0, 0, 0, .24), 0 17 px 50 px 0 rgba(0, 0, 0, .19);
    - moz - box - shadow: 0 12 px 15 px 0 rgba(0, 0, 0, .24), 0 17 px 50 px 0 rgba(0, 0, 0, .19);
    box - shadow: 0 12 px 15 px 0 rgba(0, 0, 0, .24), 0 17 px 50 px 0 rgba(0, 0, 0, .19)
}

.shadow - z4 {
    -webkit - box - shadow: 0 16 px 28 px 0 rgba(0, 0, 0, .22), 0 25 px 55 px 0 rgba(0, 0, 0, .21);
    - moz - box - shadow: 0 16 px 28 px 0 rgba(0, 0, 0, .22), 0 25 px 55 px 0 rgba(0, 0, 0, .21);
    box - shadow: 0 16 px 28 px 0 rgba(0, 0, 0, .22), 0 25 px 55 px 0 rgba(0, 0, 0, .21)
}

.shadow - z5 {
    -webkit - box - shadow: 0 27 px 24 px 0 rgba(0, 0, 0, .2), 0 40 px 77 px 0 rgba(0, 0, 0, .22);
    - moz - box - shadow: 0 27 px 24 px 0 rgba(0, 0, 0, .2), 0 40 px 77 px 0 rgba(0, 0, 0, .22);
    box - shadow: 0 27 px 24 px 0 rgba(0, 0, 0, .2), 0 40 px 77 px 0 rgba(0, 0, 0, .22)
}

.shadow - tb {
    -webkit - box - shadow: 0 7 px 21 px rgba(0, 0, 0, .1);
    - moz - box - shadow: 0 7 px 21 px rgba(0, 0, 0, .1);
    box - shadow: 0 7 px 21 px rgba(0, 0, 0, .1)
}

body,
html {
    height: 100 %
}

html {
    font - size: 36 px
}

@ media(max - width: 480 px) {
    html {
        font - size: 24 px
    }
}

body {
    padding - top: 50 px;
    overflow - y: scroll;
    overflow - x: hidden;
    - webkit - font - smoothing: antialiased;
    - moz - font - feature - settings: "liga", "kern"
}

.is - bfc,
a.underline {
    overflow: hidden
}

.site - main {
    min - height: 50 %
}

.btn {
    position: relative;
    padding: 8 px 24 px;
    - webkit - transition: all 280 ms cubic - bezier(.4, 0, .2, 1);
    - o - transition: all 280 ms cubic - bezier(.4, 0, .2, 1);
    transition: all 280 ms cubic - bezier(.4, 0, .2, 1)
}

.btn.btn - link: focus,
.btn.btn - link: hover,
.btn: focus {
    text - decoration: none;
    outline: 0!important
}

.btn.btn - raised {
    -webkit - box - shadow: 0 5 px 11 px 0 rgba(0, 0, 0, .18), 0 4 px 15 px 0 rgba(0, 0, 0, .15);
    - moz - box - shadow: 0 5 px 11 px 0 rgba(0, 0, 0, .18), 0 4 px 15 px 0 rgba(0, 0, 0, .15);
    box - shadow: 0 5 px 11 px 0 rgba(0, 0, 0, .18), 0 4 px 15 px 0 rgba(0, 0, 0, .15)
}

.btn.btn - raised: hover {
    -webkit - box - shadow: 0 8 px 17 px 0 rgba(0, 0, 0, .2), 0 6 px 20 px 0 rgba(0, 0, 0, .19);
    - moz - box - shadow: 0 8 px 17 px 0 rgba(0, 0, 0, .2), 0 6 px 20 px 0 rgba(0, 0, 0, .19);
    box - shadow: 0 8 px 17 px 0 rgba(0, 0, 0, .2), 0 6 px 20 px 0 rgba(0, 0, 0, .19)
}

.btn.btn - default {
    color: #4d4d4d;
    border-color: # c2c2c2
}

.btn.btn - default: hover {
    background - color: #ededed
}

.btn.btn - sm {
    line - height: 20 px;
    padding: 4 px 12 px;
    font - size: 14 px
}

.btn.btn - lg {
    padding: 14 px 26 px;
    font - size: 18 px
}

.btn.without - shadow,
.dropdown - menu.btn: hover {
    -webkit - box - shadow: none!important;
    - moz - box - shadow: none!important;
    box - shadow: none!important
}

.handler - wrap.btn,
.modal - footer.btn {
    min - width: 100 px
}

.btn - group.btn + .btn,
.btn - group.btn + .btn - group,
.btn - group.btn - group + .btn,
.btn - group.btn - group + .btn - group {
    margin - left: 0
}

.btn - group.open > .btn - primary: first - child: not(.dropdown - toggle) {
    border - right - color: transparent
}

.btn - group.open.dropdown - toggle {
    -webkit - box - shadow: inset 3 px 3 px 5 px rgba(0, 0, 0, .125);
    - moz - box - shadow: inset 3 px 3 px 5 px rgba(0, 0, 0, .125);
    box - shadow: inset 3 px 3 px 5 px rgba(0, 0, 0, .125)
}

.btn - group > .btn - primary: first - child: not(.dropdown - toggle) {
    border - right: 1 px solid #039fe5
}

.form-group {
    line-height: 30px;
    margin-bottom: 30px
}

.form-group.pair-form {
    padding: 0
}

.validate-error {
    border-color: # e51c23!important
}

.form - control,
.form - control: focus {
    -webkit - box - shadow: none;
    - moz - box - shadow: none;
    box - shadow: none
}

.form - label {
    padding: 10 px 0;
    font - size: 18 px;
    text - align: left;
    color: grey
}

.form - label.second - label {
    padding - left: 70 px
}

.form - input {
    color: #999
}

.full-input {
    width: 100%;
    height: 48px;
    padding: 8px;
    border: 1px solid # eee;
    border - radius: 3 px;
    - webkit - transition: border 218 ms;
    - o - transition: border 218 ms;
    transition: border 218 ms
}

.full - input: focus {
    border: 1 px solid# a6a6a6
}

.form - input textarea {
    resize: none;
    height: 180 px
}

.form - input input,
.form - input textarea {
    padding: 8 px;
    border: 1 px solid# eee;
    border - radius: 4 px;
    outline: 0
}

select {
    width: 100 %;
    height: 48 px;
    padding: 10 px;
    outline: 0;
    background - color: #fff;
    border: 1 px solid# eee;
    border - radius: 4 px
}

[contenteditable]: focus {
    outline: transparent solid 0
}

ul {
    padding - left: 0;
    list - style: none
}

.list - group - item {
    padding: 16 px 4 px;
    border - width: 1 px 0
}

@ media(min - width: 768 px) {
    .jumbotron h1 {
        font - size: 48 px
    }
    .modal - dialog: not(.default-margin) {
        margin: 100 px auto
    }
    .modal - content {
        -webkit - box - shadow: 0 5 px 11 px 0 rgba(0, 0, 0, .18), 0 4 px 15 px 0 rgba(0, 0, 0, .15);
        - moz - box - shadow: 0 5 px 11 px 0 rgba(0, 0, 0, .18), 0 4 px 15 px 0 rgba(0, 0, 0, .15);
        box - shadow: 0 5 px 11 px 0 rgba(0, 0, 0, .18), 0 4 px 15 px 0 rgba(0, 0, 0, .15)
    }
}

.modal - content,
.page - index.hover - dark: hover {
    -webkit - box - shadow: 0 2 px 5 px 0 rgba(0, 0, 0, .16), 0 2 px 10 px 0 rgba(0, 0, 0, .12);
    - moz - box - shadow: 0 2 px 5 px 0 rgba(0, 0, 0, .16), 0 2 px 10 px 0 rgba(0, 0, 0, .12)
}

.modal - backdrop {
    position: fixed;
    bottom: 0
}

.modal - close {
    font - size: 18 px
}

.modal - content {
    border: none;
    box - shadow: 0 2 px 5 px 0 rgba(0, 0, 0, .16), 0 2 px 10 px 0 rgba(0, 0, 0, .12)
}

.modal - content > [class *=modal -] {
    padding: 24 px
}

.modal - content.modal - header {
    padding - bottom: 0;
    border - bottom: none
}

.modal - content.modal - header.modal - title.icon {
    margin - right: 12 px;
    color: #03a9f4
}

.modal-content .modal-body {
    padding-bottom: 20px
}

.modal-content .modal-footer {
    padding-top: 0;
    border-top: none
}


.tooltip-inner {
    min-width: 40px
}

.light-blue {
    color: # 03 a9f4
}

.black {
    color: #000
}

.darker-grey,
.grey22 {
    color: # 383838
}

.dark - grey,
.grey50 {
    color: grey
}

.grey,
.grey65,
.muted {
    color: #a6a6a6
}

.grey85,
.light - grey {
    color: #d9d9d9
}

.grey93,
.lighter - grey {
    color: #ededed
}

.white {
    color: #fff
}

a.icon {
    color: #a6a6a6;
    - webkit - transition: color 218 ms ease;
    - o - transition: color 218 ms ease;
    transition: color 218 ms ease
}

a.icon: hover {
    color: #03a9f4
}

a.icon.white {
    -webkit-transition: text-shadow 218ms ease;
    -o-transition: text-shadow 218ms ease;
    transition: text-shadow 218ms ease
}

a.icon.white:hover {
    color: # fff;
    text - shadow: 0 0 3 px rgba(255, 255, 255, .7)
}

.icon.float {
    float: left
}

.icon - wrap {
    line - height: 20 px
}

.icon - wrap.icon {
    float: left;
    font - size: 14 px
}

@ media(min - width: 1310 px) {
    .col - xl - 1,
    .col - xl - 10,
    .col - xl - 11,
    .col - xl - 12,
    .col - xl - 2,
    .col - xl - 3,
    .col - xl - 4,
    .col - xl - 5,
    .col - xl - 6,
    .col - xl - 7,
    .col - xl - 8,
    .col - xl - 9 {
        float: left
    }
    .col - xl - 12 {
        width: 100 %
    }
    .col - xl - 11 {
        width: 91.66666667 %
    }
    .col - xl - 10 {
        width: 83.33333333 %
    }
    .col - xl - 9 {
        width: 75 %
    }
    .col - xl - 8 {
        width: 66.66666667 %
    }
    .col - xl - 7 {
        width: 58.33333333 %
    }
    .col - xl - 6 {
        width: 50 %
    }
    .col - xl - 5 {
        width: 41.66666667 %
    }
    .col - xl - 4 {
        width: 33.33333333 %
    }
    .col - xl - 3 {
        width: 25 %
    }
    .col - xl - 2 {
        width: 16.66666667 %
    }
    .col - xl - 1 {
        width: 8.33333333 %
    }
    .col - xl - pull - 12 {
        right: 100 %
    }
    .col - xl - pull - 11 {
        right: 91.66666667 %
    }
    .col - xl - pull - 10 {
        right: 83.33333333 %
    }
    .col - xl - pull - 9 {
        right: 75 %
    }
    .col - xl - pull - 8 {
        right: 66.66666667 %
    }
    .col - xl - pull - 7 {
        right: 58.33333333 %
    }
    .col - xl - pull - 6 {
        right: 50 %
    }
    .col - xl - pull - 5 {
        right: 41.66666667 %
    }
    .col - xl - pull - 4 {
        right: 33.33333333 %
    }
    .col - xl - pull - 3 {
        right: 25 %
    }
    .col - xl - pull - 2 {
        right: 16.66666667 %
    }
    .col - xl - pull - 1 {
        right: 8.33333333 %
    }
    .col - xl - pull - 0 {
        right: auto
    }
    .col - xl - push - 12 {
        left: 100 %
    }
    .col - xl - push - 11 {
        left: 91.66666667 %
    }
    .col - xl - push - 10 {
        left: 83.33333333 %
    }
    .col - xl - push - 9 {
        left: 75 %
    }
    .col - xl - push - 8 {
        left: 66.66666667 %
    }
    .col - xl - push - 7 {
        left: 58.33333333 %
    }
    .col - xl - push - 6 {
        left: 50 %
    }
    .col - xl - push - 5 {
        left: 41.66666667 %
    }
    .col - xl - push - 4 {
        left: 33.33333333 %
    }
    .col - xl - push - 3 {
        left: 25 %
    }
    .col - xl - push - 2 {
        left: 16.66666667 %
    }
    .col - xl - push - 1 {
        left: 8.33333333 %
    }
    .col - xl - push - 0 {
        left: auto
    }
    .col - xl - offset - 12 {
        margin - left: 100 %
    }
    .col - xl - offset - 11 {
        margin - left: 91.66666667 %
    }
    .col - xl - offset - 10 {
        margin - left: 83.33333333 %
    }
    .col - xl - offset - 9 {
        margin - left: 75 %
    }
    .col - xl - offset - 8 {
        margin - left: 66.66666667 %
    }
    .col - xl - offset - 7 {
        margin - left: 58.33333333 %
    }
    .col - xl - offset - 6 {
        margin - left: 50 %
    }
    .col - xl - offset - 5 {
        margin - left: 41.66666667 %
    }
    .col - xl - offset - 4 {
        margin - left: 33.33333333 %
    }
    .col - xl - offset - 3 {
        margin - left: 25 %
    }
    .col - xl - offset - 2 {
        margin - left: 16.66666667 %
    }
    .col - xl - offset - 1 {
        margin - left: 8.33333333 %
    }
    .col - xl - offset - 0 {
        margin - left: 0
    }
}

.max1040 {
    max - width: 1040 px
}

.max1010 {
    max - width: 1010 px
}

@ media(min - width: 768 px) and(max - width: 991 px) {
    .container {
        width: 100 %
    }
}

a {
    color: #03a9f4;
    cursor: pointer;
    -webkit-transition: color 218ms cubic-bezier(.42, 0, .58, 1);
    -o-transition: color 218ms cubic-bezier(.42, 0, .58, 1);
    transition: color 218ms cubic-bezier(.42, 0, .58, 1)
}

a:focus,
a:hover {
    text-decoration: none;
    color: # 1e b7fc
}

a.block {
    display: block
}

a.white {
    color: #fff;
    - webkit - transition: text - shadow 218 ms;
    - o - transition: text - shadow 218 ms;
    transition: text - shadow 218 ms
}

a.white: hover {
    -webkit - text - shadow: 0 1 px 1 px rgba(0, 0, 0, .5), 0 0 3 px rgba(255, 255, 255, .7);
    text - shadow: 0 1 px 1 px rgba(0, 0, 0, .5), 0 0 3 px rgba(255, 255, 255, .7)
}

a.underline {
    position: relative;
    z - index: 1;
    display: inline - block;
    vertical - align: bottom;
    padding: 0 7 px
}

a.underline: before {
    content: '';
    position: absolute;
    z - index: -1;
    top: 0;
    left: 0;
    width: 100 %;
    height: 100 %;
    background - color: rgba(52, 73, 94, .4);
    - webkit - transform: translateY(95 %);
    - moz - transform: translateY(95 %);
    - o - transform: translateY(95 %);
    - ms - transform: translateY(95 %);
    transform: translateY(95 %);
    - webkit - transition: all 200 ms;
    - o - transition: all 200 ms;
    transition: all 200 ms
}

a.underline.hover: before,
a.underline: hover: before {
    border - radius: 2 px;
    - webkit - transform: translateY(0);
    - moz - transform: translateY(0);
    - o - transform: translateY(0);
    - ms - transform: translateY(0);
    transform: translateY(0)
}

a.blue - reverse {
    color: #47c4fd
}

a.blue-reverse:hover {
    color: # 03 a9f4
}

a.red {
    color: #e51c23;
    - webkit - transition: none;
    - o - transition: none;
    transition: none
}

a.red: hover {
    color: #d0181e
}

a.gray {
    color: #a6a6a6
}

a.gray - dark {
    color: grey
}

a.gray - dark: hover,
a.gray: hover {
    color: #0286c2!important
}

a:focus {
    outline: dotted thin;
    outline: -webkit-focus-ring-color auto 5px;
    outline-offset: -2px
}

[class*=hover -] {
    -webkit - transition: all 218 ms cubic - bezier(.42, 0, .58, 1) !important;
    - o - transition: all 218 ms cubic - bezier(.42, 0, .58, 1) !important;
    transition: all 218 ms cubic - bezier(.42, 0, .58, 1) !important
}

.hover - blue: hover {
    color: #03a9f4!important
}

.hover-opacity:hover {
    opacity: .85;
    filter: alpha(opacity=85)
}

.hover - opacity: hover.ripple {
    background: #fff!important
}

.hover - shadow: hover {
    -webkit - box - shadow: 0 5 px 11 px 0 rgba(0, 0, 0, .18), 0 4 px 15 px 0 rgba(0, 0, 0, .15);
    - moz - box - shadow: 0 5 px 11 px 0 rgba(0, 0, 0, .18), 0 4 px 15 px 0 rgba(0, 0, 0, .15);
    box - shadow: 0 5 px 11 px 0 rgba(0, 0, 0, .18), 0 4 px 15 px 0 rgba(0, 0, 0, .15)
}

.dropdown - menu,
.site - header.navbar - button > li.dropdown - menu {
    -webkit - box - shadow: 0 7 px 21 px rgba(0, 0, 0, .1);
    - moz - box - shadow: 0 7 px 21 px rgba(0, 0, 0, .1)
}

@ media(min - width: 768 px) {
    .hover - brackets {
        position: relative;
        display: inline - block
    }
    .hover - brackets: after,
    .hover - brackets: before {
        position: absolute;
        top: -.1e m;
        opacity: 0;
        - webkit - transition: opacity 218 ms, -webkit - transform 300 ms;
        transition: opacity 218 ms, transform 300 ms
    }
    .hover - brackets: before {
        content: '[';
        left: -.8e m;
        - webkit - transform: translate(1e m, 0);
        - ms - transform: translate(1e m, 0);
        - o - transform: translate(1e m, 0);
        transform: translate(1e m, 0)
    }
    .hover - brackets: after {
        content: ']';
        right: -.8e m;
        - webkit - transform: translate(-1e m, 0);
        - ms - transform: translate(-1e m, 0);
        - o - transform: translate(-1e m, 0);
        transform: translate(-1e m, 0)
    }
    .hover - brackets: hover: after,
    .hover - brackets: hover: before {
        opacity: 1;
        filter: alpha(opacity=100);
        - webkit - transform: translate(0, 0);
        - ms - transform: translate(0, 0);
        - o - transform: translate(0, 0);
        transform: translate(0, 0)
    }
}

.readable,
.readable - font {
    font: 18 px / 1.5 "Helvetica Neue", Helvetica, "Lucida Grande", "Luxi Sans", Arial, "Hiragino Sans GB", STHeiti, "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Micro Hei Mono", "WenQuanYi Zen Hei", "WenQuanYi Zen Hei Mono", LiGothicMed;
    font - weight: 200;
    color: rgba(0, 0, 0, .8);
    - webkit - font - smoothing: antialiased;
    - webkit - hyphens: auto;
    - moz - hyphens: auto;
    - ms - hyphens: auto;
    hyphens: auto
}

.readable blockquote,
.readable li,
.readable ol,
.readable p,
.readable pre,
.readable table,
.readable ul {
    margin - bottom: 1e m
}

.readable p {
    line - height: 2
}

.readable em,
.readable i {
    font - style: normal;
    margin: 0.23e m
}

.readable h1,
.readable h2,
.readable h3,
.readable h4,
.readable h5,
.readable h6 {
    margin - bottom: .23e m;
    margin - top: 1.23e m;
    line - height: 2;
    font - family: "Lucida Grande", "Luxi Sans", Arial, "Helvetica Neue", Helvetica, "Hiragino Sans GB", STHeiti, "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Micro Hei Mono", "WenQuanYi Zen Hei", "WenQuanYi Zen Hei Mono", LiGothicMed;
    font - weight: 500
}

.readable h1,
.readable h2 {
    margin - top: 1e m;
    font - size: 30 px
}

.readable h3,
.readable h4,
.readable h5,
.readable h6 {
    font - size: 24 px
}

.readable ul {
    list - style: circle
}

.readable ol {
    list - style: decimal
}

.readable ol,
.readable ul {
    list - style - position: outside;
    margin - left: 2e m
}

.readable img {
    max - width: 700 px;
    display: block;
    margin: 0 auto
}

.readable img + span {
    display: block;
    margin - top: 10 px;
    font - size: 16 px;
    text - align: center
}

.readable.table th {
    white - space: nowrap
}

.readable a.reg {
    display: block;
    margin: 0 auto;
    width: 290 px
}

@ media(max - width: 480 px) {
    .readable a.reg {
        width: 270 px
    }
}

.readable blockquote {
    padding: 0 0 0.75e m;
    margin: 0 0 1e m;
    border - left: 3 px solid# d9d9d9
}

.readable pre {
    padding: .8e m 1.2e m!important;
    border: none;
    background: #f5f5f5;
    font - size: 16 px;
    color: rgba(0, 0, 0, .7)
}

.no - gutter,
.no - gutter - left {
    padding - left: 0
}

.readable pre + h1,
.readable pre + h2,
.readable pre + h3,
.readable pre + h4,
.readable pre + h5,
.readable pre + h6 {
    margin - top: 0
}

.readable code {
    margin: 0.23e m;
    font - family: Consolas, "Liberation Mono", "BitStream Vera Sans Mono", Courier, monospace
}

.readable hr {
    height: 1 px;
    margin: 30 px auto;
    background - image: -webkit - linear - gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, .1), rgba(0, 0, 0, 0));
    background - image: -moz - linear - gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, .1), rgba(0, 0, 0, 0));
    background - image: -ms - linear - gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, .1), rgba(0, 0, 0, 0));
    background - image: -o - linear - gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, .1), rgba(0, 0, 0, 0))
}

@ media(max - width: 768 px) {
    .readable img,
    .readable p > img {
        width: 100 %
    }
}

.no - gutter {
    padding - right: 0
}

.no - gutter - right {
    padding - right: 0
}

.group: not(: last - child) {
    margin - bottom: 16 px
}

.is - hidden {
    display: none!important;
    visibility: hidden!important
}

.is - show {
    display: block!important;
    visibility: visible!important
}

.is - opacity {
    opacity: 0;
    filter: alpha(opacity=0)
}

.animated {
    -webkit - animation - duration: .5 s;
    - moz - animation - duration: .5 s;
    - o - animation - duration: .5 s;
    animation - duration: .5 s;
    - webkit - animation - fill - mode: both;
    - moz - animation - fill - mode: both;
    - o - animation - fill - mode: both;
    animation - fill - mode: both
}

@ - webkit - keyframes slideDown {
    0 % {
        -webkit - transform: translateY(-100 %)
    }
    100 % {
        -webkit - transform: translateY(0)
    }
}

@ keyframes slideDown {
    0 % {
        transform: translateY(-100 %)
    }
    100 % {
        transform: translateY(0)
    }
}

.animated.slideDown {
    -webkit - animation - name: slideDown;
    - moz - animation - name: slideDown;
    - o - animation - name: slideDown;
    animation - name: slideDown
}

@ - webkit - keyframes slideUp {
    0 % {
        -webkit - transform: translateY(0)
    }
    100 % {
        -webkit - transform: translateY(-100 %)
    }
}

@ keyframes slideUp {
    0 % {
        transform: translateY(0)
    }
    100 % {
        transform: translateY(-100 %)
    }
}

.animated.slideUp {
    -webkit - animation - name: slideUp;
    - moz - animation - name: slideUp;
    - o - animation - name: slideUp;
    animation - name: slideUp
}

@ - webkit - keyframes bouncedelay {
    0 %,
    100 %,
    80 % {
        -webkit - transform: scale(0)
    }
    40 % {
        -webkit - transform: scale(1)
    }
}

@ keyframes bouncedelay {
    0 %,
    100 %,
    80 % {
        transform: scale(0)
    }
    40 % {
        transform: scale(1)
    }
}

@ - webkit - keyframes fades {
    0 %,
    100 % {
        opacity: 1;
        filter: alpha(opacity=100)
    }
    50 % {
        opacity: 0;
        filter: alpha(opacity=0)
    }
}

@ keyframes fades {
    0 %,
    100 % {
        opacity: 1;
        filter: alpha(opacity=100)
    }
    50 % {
        opacity: 0;
        filter: alpha(opacity=0)
    }
}

@ - webkit - keyframes tinyScale {
    to {
        -webkit - transform: scale(1.07, 1.07) translate3d(-28 px, -28 px, 0)
    }
}

@ keyframes tinyScale {
    to {
        transform: scale(1.07, 1.07) translate3d(-28 px, -28 px, 0)
    }
}

.site - header {
    position: fixed;
    top: 0;
    z - index: 103;
    width: 100 %;
    min - height: 50 px;
    border - bottom: 1 px solid# ededed;
    background: #fff;
    opacity: .97
}

@ media(min - width: 1310 px) {
    .site - header.container {
        width: 1310 px
    }
}

.site - header.navbar {
    border: 0;
    margin - bottom: 0
}

.site - header.navbar.navbar - toggle {
    margin - right: 0;
    padding - right: 0
}

.site - header.navbar.navbar - toggle.icon - bar {
    background - color: #6e6e6e
}

.site-header .navbar-collapse {
    padding-right: 0;
    overflow-x: hidden
}

.site-header .navbar-brand {
    width: 150px;
    padding: 0;
    text-indent: -9999px;
    background-image: url(../images/global/logo@2x.png);
    background-size: auto 20px;
    background-repeat: no-repeat;
    background-position: left 14px
}

.site-header .navbar-brand.mid-autumn {
    width: 160px;
    background-image: url(../images/global/logo-mid-autumn@2x.png);
    background-size: auto 34px;
    background-position: left 9px
}

.site-header .navbar-brand.mayday {
    background-image: url(../images/global/logo-mayday@2x.png);
    background-size: auto 28px;
    background-position: left 10px
}

.site-header .navbar-brand.nationday {
    width: 160px;
    background-image: url(../images/global/logo-nationday@2x.png);
    background-size: auto 33px;
    background-position: left 9px
}

.site-header .navbar-brand.halloween {
    width: 139px;
    background-image: url(../images/global/logo-halloween@2x.png);
    background-size: auto 38px;
    background-position: left 5px
}

.site-header .navbar-nav>li>a {
    color: # 383838;
    font - size: 16 px;
    margin - left: 25 px
}

.site - header.navbar - nav > li > a: focus,
.site - header.navbar - nav > li > a: hover {
    color: #03a9f4;
    background-color: transparent
}

.site-header .navbar-nav>li.active>a {
    color: # 03 a9f4
}

.site - header.navbar - button {
    margin: 0;
    text - align: right
}

.site - header.navbar - button > li {
    margin: 0;
    padding: 0;
    vertical - align: top
}

.site - header.navbar - button > li a.user {
    padding: 15 px;
    line - height: 20 px;
    border: none;
    color: #383838;
    font-size: 16px;
    cursor: pointer;
    text-decoration: none
}

.site-header .navbar-button>li a.user:hover {
    color: # 03 a9f4
}

.site - header.navbar - button > li a.btn {
    margin: 10 px 0 10 px 10 px
}

.site - header.navbar - button > li.dropdown - menu {
    left: -20 px;
    min - width: 200 px;
    max - height: 400 px;
    padding: 0;
    overflow - y: auto;
    text - align: left;
    border: none;
    box - shadow: 0 7 px 21 px rgba(0, 0, 0, .1)
}

.site - header.navbar - button > li.dropdown - menu a {
    padding: 15 px;
    line - height: 20 px;
    color: #383838
}

.site-header .navbar-button>li>a.user {
    display: block;
    position: relative
}

.site-header .navbar-button>li>a.user .avatar {
    position: absolute;
    top: 12px;
    left: -20px;
    width: 24px;
    height: 24px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center
}

.site-header .navbar-button>li>a.user .user-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.site-header .navbar-button>li>a.login,
.site-header .navbar-button>li>a.signup {
    min-width: 70px
}

.site-header .info-wrap {
    margin-left: 35px!important
}

.site-header .switch-locale {
    display: inline-block;
    position: relative;
    padding: 15px 2px 15px 15px;
    line-height: 20px;
    height: 50px
}

.site-header .switch-locale .dropdown-toggle {
    font-size: 16px;
    color: grey
}

.site-header .switch-locale .dropdown-toggle:after {
    content: "\b003";
    display: inline-block;
    font-family: Teambition-UI-Icons;
    vertical-align: middle;
    margin-left: 6px;
    font-size: 12px
}

.site-header .switch-locale .dropdown-toggle:hover {
    color: # 383838
}

.site - header.switch-locale > ul {
    min - width: 90 px;
    font - size: 16 px;
    padding: 0 0 40 px;
    overflow - x: hidden;
    border - radius: 2 px;
    - webkit - box - shadow: 0 5 px 11 px 0 rgba(0, 0, 0, .18), 0 4 px 15 px 0 rgba(0, 0, 0, .15);
    - moz - box - shadow: 0 5 px 11 px 0 rgba(0, 0, 0, .18), 0 4 px 15 px 0 rgba(0, 0, 0, .15);
    box - shadow: 0 5 px 11 px 0 rgba(0, 0, 0, .18), 0 4 px 15 px 0 rgba(0, 0, 0, .15)
}

.site - header.switch-locale > ul > li > a {
    padding: 8 px 15 px;
    top: 2 px
}

.site - header.switch-locale.open.dropdown - toggle {
    color: #03a9f4
}

.site-header .logout {
    display: none
}

@media (max-width:1199px) {
    .site-header .navbar-nav>li>a {
        margin-left: 10px
    }
}

@media (max-width:840px) {
    .site-header .navbar-nav>li>a {
        margin-left: 3px
    }
}

@media (max-width:767px) {
    .site-header .switch-locale {
        padding-left: 0
    }
    .site-header .info-wrap {
        float: left;
        margin-left: 0!important
    }
    .site-header .navbar-collapse.in {
        overflow: visible
    }
    .site-header .navbar-nav {
        margin: 0 0 0 -16px;
        padding-bottom: 5px;
        border-bottom: 1px dashed # ededed
    }
    .site - header.navbar - button {
        position: relative;
        text - align: left;
        padding: 5 px 0
    }
    .site - header.user {
        margin - left: 19 px
    }
    .site - header.login {
        margin - left: 0!important
    }
    .site - header.logout {
        display: block;
        position: absolute;
        right: 0;
        top: 6 px;
        font - size: 14 px;
        color: #383838
    }
    .site-header .signup {
        margin-left: 15px!important
    }
    .site-header .navbar-nav>li>a {
        margin-left: 0
    }
    .site-header .navbar-nav>li.active>a {
        background-color: # f8f8f8;
        border - radius: 4 px
    }
}

@ media(max - width: 900 px) and(min - width: 768 px) {
    .en.site - header.navbar - button > li a.signup {
        display: none
    }
    .en.site - header.navbar - button > li a.user,
    .en.site - header.navbar - nav > li > a {
        font - size: 14 px
    }
}

@ media(min - width: 768 px) {
    .site - header.navbar - nav > li > a {
        padding - top: 16 px;
        padding - bottom: 14 px
    }
    .site - header.navbar - button.user.user - name {
        max - width: 125 px
    }
    .en.site - header.navbar - nav > li > a {
        padding - top: 16 px;
        padding - bottom: 14 px
    }
    .en.site - header.navbar - button.user.user - name {
        max - width: 100 px
    }
}

.site - footer {
    background - color: #333;
    color: # fff
}

.site - footer.footer - nav {
    padding: 30 px 0 10 px
}

.site - footer.footer - nav.nav - group {
    float: left;
    color: #777;
    width: 20%
}

.site-footer .footer-nav .nav-group h4 {
    color: # a6a6a6;
    margin - bottom: 20 px
}

.site - footer.footer - nav.nav - group > li {
    margin - bottom: 20 px
}

.site - footer.footer - nav.nav - group > li > a {
    -webkit - transition: all.35 s ease - in -out;
    - o - transition: all.35 s ease - in -out;
    transition: all.35 s ease - in -out;
    text - decoration: none;
    color: #777
}

.site-footer .footer-nav .nav-group>li>a:hover {
    color: # ededed
}

.site - footer.footer - nav.nav - group > li.small {
    display: block
}

.site - footer.footer - nav.other - products {
    width: 16 %
}

.site - footer.footer - nav.other - products li {
    min - height: 36 px;
    margin - bottom: 30 px
}

.site - footer.footer - nav.other - products.product - logo {
    float: left;
    background - image: url(.. / images / global / icons@ 2 x.png);
    background - size: 120 px 40 px;
    - webkit - transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    width: 40 px;
    height: 40 px;
    - webkit - transition: all.25 s ease - in -out;
    - o - transition: all.25 s ease - in -out;
    transition: all.25 s ease - in -out;
    - webkit - transform: translateZ(0);
    - webkit - backface - visibility: hidden
}

.site - footer.footer - nav.other - products.product - logo.project {
    background - position: 0 0
}

.site - footer.footer - nav.other - products.product - logo.today {
    background - position: -40 px 0
}

.site - footer.footer - nav.other - products.product - logo.talk {
    background - position: -80 px 0
}

.site - footer.footer - nav.other - products.text {
    padding - left: 50 px;
    text - align: left
}

.site - footer.footer - nav.other - products.product - name {
    font - size: 16 px;
    margin: 0 0 5 px;
    - webkit - transition: all.35 s ease - in -out;
    - o - transition: all.35 s ease - in -out;
    transition: all.35 s ease - in -out
}

.site - footer.footer - nav.other - products.product - desc {
    color: #777;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.site-footer .footer-nav .other-products .desc-more {
    min-width: 162px
}

.site-footer .footer-nav .other-products .desc-more p {
    margin-bottom: 7px
}

.site-footer .footer-nav .other-products .desc-more a {
    color: # a6a6a6
}

.site - footer.footer - nav.other - products.desc - more a: hover,
.site - footer.footer - nav.other - products a: hover.product - name {
    color: #fff
}

.site - footer.footer - nav.other - products.desc - more.icon {
    margin - left: 5 px;
    font - size: 12 px
}

.site - footer.footer - nav.other - products a: hover.product - logo {
    -webkit - transform: translate3d(0, -3 px, 0);
    transform: translate3d(0, -3 px, 0)
}

.site - footer.footer - nav.other - products a: hover.product - desc {
    color: #777
}

.site-footer .copyright {
    background-color: # 000;
    height: 190 px;
    padding - top: 45 px
}

.site - footer.copyright > a > img {
    position: absolute;
    visibility: hidden;
    width: auto
}

.site - footer.copyright.footer - logo {
    display: inline - block;
    width: 165 px;
    height: 27 px;
    text - indent: -9999 px;
    background - image: url(.. / images / global / footer - logo@ 2 x.png);
    background - size: 165 px 27 px;
    margin - bottom: 10 px
}

.site - footer.copyright.text {
    font - size: 18 px;
    display: inline - block;
    margin - bottom: 0
}

.site - footer.copyright.text,
.site - footer.copyright.text a {
    color: #a6a6a6
}

.site - footer.copyright.sns - info {
    margin - top: 10 px
}

.site - footer.copyright.sns - info > a {
    display: inline - block;
    width: 26 px;
    height: 26 px;
    background - image: url(.. / images / global / social@ 2 x.png);
    border - radius: 26 px;
    margin - right: 15 px;
    background - size: 130 px 26 px;
    cursor: pointer;
    - webkit - transform: translateZ(0);
    - webkit - backface - visibility: hidden
}

.site - footer.copyright.sns - info > a: hover {
    background - image: -webkit - linear - gradient(top, rgba(0, 0, 0, .2) 0, rgba(0, 0, 0, .2) 100 %), url(.. / images / global / social@ 2 x.png);
    background - image: -o - linear - gradient(top, rgba(0, 0, 0, .2) 0, rgba(0, 0, 0, .2) 100 %), url(.. / images / global / social@ 2 x.png);
    background - image: linear - gradient(to bottom, rgba(0, 0, 0, .2) 0, rgba(0, 0, 0, .2) 100 %), url(.. / images / global / social@ 2 x.png)
}

.site - footer.copyright.sns - info > a: hover.pop {
    display: block!important
}

.site - footer.copyright.sns - info > a: last - child {
    margin - right: 0
}

.site - footer.copyright.sns - info > a.sina - info {
    background - position: 0 0
}

.site - footer.copyright.sns - info > a.qq - info {
    position: relative;
    background - position: -26 px 0
}

.site - footer.copyright.sns - info > a.qq - info: before {
    position: absolute;
    left: 0;
    top: -20 px;
    width: 38 px;
    height: 38 px;
    content: ""
}

.site - footer.copyright.sns - info > a.qq - info.pop {
    display: none;
    position: absolute;
    top: -225 px;
    left: -83 px;
    width: 197 px;
    height: 213 px;
    background - color: #fff;
    padding: 20 px 5 px 20 px 20 px;
    border: 1 px solid# d5d8dd;
    text - align: center;
    box - shadow: 0 1 px 6 px rgba(0, 0, 0, .15)
}

.site - footer.copyright.sns - info > a.qq - info.pop: after {
    position: absolute;
    left: 88 px;
    bottom: -13 px;
    border: 7 px solid transparent;
    border - top: 7 px solid# fff;
    content: ""
}

.site - footer.copyright.sns - info > a.qq - info.pop label {
    color: grey;
    margin - bottom: 10 px
}

.site - footer.copyright.sns - info > a.qq - info.pop p {
    color: #a6a6a6;
    margin - top: 5 px;
    margin - bottom: 10 px;
    text - align: left;
    overflow: hidden;
    text - overflow: clip;
    white - space: nowrap
}

.box - content.content.category,
.box - content.content.desc,
.dropdown - menu li > a,
.essage,
.page - index.actions.update.new - title,
.page - index.features.feature h4,
.tbsite - list.category.nav - tabs > li > a {
    text - overflow: ellipsis;
    white - space: nowrap
}

.site - footer.copyright.sns - info > a.qq - info.pop p: not(: last - child) {
    text - decoration: line - through
}

.site - footer.copyright.sns - info > a.weixin - info {
    position: relative;
    background - position: -52 px 0
}

.site - footer.copyright.sns - info > a.weixin - info: before {
    position: absolute;
    left: 0;
    top: -20 px;
    width: 38 px;
    height: 38 px;
    content: ""
}

.site - footer.copyright.sns - info > a.weixin - info.pop {
    display: none;
    position: absolute;
    top: -215 px;
    left: -63 px;
    width: 150 px;
    height: 205 px;
    padding: 20 px 10 px;
    border: 1 px solid# d5d8dd;
    background - color: #fff;
    text - align: center;
    box - shadow: 0 1 px 6 px rgba(0, 0, 0, .15)
}

.site - footer.copyright.sns - info > a.weixin - info.pop: after {
    position: absolute;
    left: 68 px;
    bottom: -13 px;
    border: 7 px solid transparent;
    border - top: 7 px solid# fff;
    content: ""
}

.site - footer.copyright.sns - info > a.weixin - info.pop label {
    color: grey;
    margin - bottom: 0
}

.site - footer.copyright.sns - info > a.weixin - info.pop p {
    color: #a6a6a6;
    margin - bottom: 10 px
}

.site - footer.copyright.sns - info > a.weixin - info.pop.qr - wrapper {
    width: 120 px;
    height: 120 px;
    margin: 0 auto;
    background - image: url(.. / images / global / weixin - qr.jpg);
    background - size: 120 px 120 px
}

.site - footer.copyright.sns - info > a.douban - info {
    background - position: -78 px 0
}

.site - footer.copyright.sns - info > a.rss - info {
    background - position: -104 px 0
}

.en.site - footer.nav - group,
.en.site - footer.other - products {
    width: 20 %
}

.en.site - footer.desc - more.icon {
    position: relative;
    top: 1 px
}

.en.site - footer.sns - info > a.qq - info.pop {
    padding: 20 px 10 px 20 px 15 px!important
}

@ media(max - width: 1199 px) and(min - width: 1025 px) {
    .site - footer.footer - nav.nav - group {
        padding - left: 1.5 %;
        width: 20 %
    }
}

@ media(max - width: 1024 px) {
    .site - footer.footer - nav {
        padding: 15 px 0 27 px
    }
    .site - footer.footer - nav.nav - group {
        min - width: 50 %;
        text - align: center;
        padding - top: 10 px;
        border - bottom: 1 px solid #3D3D3D;
        margin-bottom: 0;
        height: 244px
    }
    .site-footer .footer-nav .nav-group h4,
    .site-footer .footer-nav .nav-group>li {
        margin-bottom: 10px
    }
    .site-footer .footer-nav .nav-group:first-child {
        min-width: 50%
    }
    .site-footer .footer-nav .nav-group:nth-child(3),
    .site-footer .footer-nav .nav-group:nth-child(4) {
        height: 150px
    }
    .site-footer .footer-nav .nav-group:nth-child(odd) {
        border-right: 1px solid # 3 D3D3D
    }
    .site - footer.footer - nav.nav - group: last - child {
        width: 100 %;
        height: 130 px;
        border: none;
        text - align: center
    }
    .site - footer.copyright.text {
        font - size: 16 px
    }
    .site - footer.copyright.small {
        display: none
    }
}

@ media(max - width: 360 px) {
    .site - footer.copyright {
        padding - top: 33 px
    }
    .site - footer.copyright.text {
        display: block;
        margin - bottom: 5 px
    }
    .site - footer.copyright.text a,
    .site - footer.copyright.text span {
        display: none
    }
}

.dropdown - menu {
    min - width: 170 px;
    border: 0;
    overflow - y: auto;
    - webkit - overflow - scrolling: touch;
    box - shadow: 0 7 px 21 px rgba(0, 0, 0, .1)
}

.dropdown - menu li > a {
    display: block;
    padding: 5 px 35 px 5 px 15 px;
    clear: both;
    line - height: 24 px;
    color: grey;
    outline: 0;
    cursor: pointer;
    overflow: hidden
}

.dropdown - menu li > a.avatar,
.dropdown - menu li > a.icon {
    width: 24 px;
    height: 24 px;
    float: left;
    margin - left: -2 px;
    margin - right: 10 px;
    text - align: center;
    background - size: 24 px 24 px;
    font - size: 18 px;
    line - height: 24 px
}

.dropdown - menu li > a i {
    margin - left: 2 px;
    margin - right: 8 px
}

.dropdown - menu li.selected {
    position: relative
}

.dropdown - menu li.selected: after {
    position: absolute;
    top: 8 px;
    right: 15 px;
    content: '\a037';
    display: block;
    width: 14 px;
    height: 14 px;
    font - family: Teambition - UI - Icons;
    color: #a6a6a6
}

.dropdown - menu li.divider {
    margin: 5 px 15 px;
    background - color: rgba(0, 0, 0, .07)
}

.dropdown - menu a.ui - state - focus {
    background - color: #f1f1f1
}

.open > .dropdown - menu {
    display: block;
    overflow: auto;
    opacity: .99;
    filter: alpha(opacity=99)
}

.essage,
body.open - modal {
    overflow: hidden
}

.list - underscore.underscore {
    position: relative
}

.list - underscore.underscore: before {
    display: inline - block;
    position: absolute;
    top: -1 px;
    left: 0;
    right: 0;
    margin: 0 15 px;
    border - top: 1 px solid rgba(0, 0, 0, .07);
    content: ''
}

.list - underscore.underscore: hover: before,
.list - underscore > li: hover + li: before {
    border - color: transparent
}

.essage {
    position: fixed;
    z - index: 10010;
    top: -200 px;
    left: 50 %;
    max - width: 600 px;
    line - height: 22 px;
    padding: 23 px 20 px 20 px 53 px;
    margin - left: -150 px;
    background: #fff;
    border: 1 px solid# f7f7f7;
    border - radius: 2 px;
    font - size: 15 px;
    - webkit - box - shadow: 0 7 px 21 px rgba(0, 0, 0, .1);
    - moz - box - shadow: 0 7 px 21 px rgba(0, 0, 0, .1);
    box - shadow: 0 7 px 21 px rgba(0, 0, 0, .1);
    - webkit - transition: top 600 ms cubic - bezier(.25, .1, .25, 1);
    - o - transition: top 600 ms cubic - bezier(.25, .1, .25, 1);
    transition: top 600 ms cubic - bezier(.25, .1, .25, 1)
}

.essage.is - active {
    top: 52 px;
    - webkit - transition: top 700 ms cubic - bezier(.42, 0, .58, 1);
    - o - transition: top 700 ms cubic - bezier(.42, 0, .58, 1);
    transition: top 700 ms cubic - bezier(.42, 0, .58, 1)
}

.essage.essage - tips {
    color: #000
}

.essage .essage-url {
    color: # 03 a9f4;
    - webkit - transition: color 218 ms ease;
    - o - transition: color 218 ms ease;
    transition: color 218 ms ease
}

.essage.essage - url: hover {
    color: #0286c2
}

.essage .icon {
    position: absolute;
    top: 22px;
    left: 20px;
    font-size: 24px
}

.essage.essage-success .icon {
    color: # 8 bc34a
}

.essage.essage - error.icon {
    color: #dc584b
}

.essage.essage - info.icon {
    color: #03a9f4
}

.essage.essage-warning .icon {
    color: # c09853
}

.essage.close {
    line - height: 18 px;
    margin - left: 10 px
}

body.open - modal.modal - window {
    display: block
}

.modal - window {
    display: none;
    position: fixed;
    z - index: 10;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow - x: hidden;
    overflow - y: auto
}

.modal - window.modal - back {
    display: none;
    width: 100 %;
    height: 100 %;
    background - color: rgba(0, 0, 0, .7)
}

.modal - window.modal - card {
    display: none;
    position: absolute;
    left: 50 %;
    top: 50 %;
    width: 500 px;
    height: auto;
    margin - top: -200 px;
    margin - left: -250 px;
    padding: 0 20 px;
    background - color: #FFF;
    border - radius: 3 px;
    - webkit - box - shadow: 0 5 px 11 px 0 rgba(0, 0, 0, .18), 0 4 px 15 px 0 rgba(0, 0, 0, .15);
    - moz - box - shadow: 0 5 px 11 px 0 rgba(0, 0, 0, .18), 0 4 px 15 px 0 rgba(0, 0, 0, .15);
    box - shadow: 0 5 px 11 px 0 rgba(0, 0, 0, .18), 0 4 px 15 px 0 rgba(0, 0, 0, .15)
}

.modal - window.modal - card h3 {
    font - size: 18 px;
    padding - bottom: 20 px;
    border - bottom: 1 px solid# DDD
}

.modal - window.modal - card.close - handler {
    position: absolute;
    top: 8 px;
    right: 20 px;
    font - size: 28 px;
    color: grey;
    cursor: pointer
}

.modal - window.modal - card.close - handler: hover {
    color: grey
}

.modal - window.modal - card.modal - desc {
    margin - top: 15 px;
    font - size: 16 px
}

.modal - window.modal - card.modal - footer - hint {
    text - align: center;
    font - size: 14 px;
    color: grey;
    margin - bottom: 20 px
}

.modal - window.modal - card.modal - form {
    padding: 10 px 0 20 px
}

.modal - window.modal - card.modal - form.form - group {
    margin - bottom: 20 px
}

.modal - window.modal - card.modal - form.form - input {
    padding - right: 0
}

.modal - window.modal - card.modal - form.form - label {
    padding: 0;
    margin - top: 3 px;
    margin - bottom: 0;
    font - size: 16 px;
    color: grey
}

.modal - window.modal - card.modal - form.full - input {
    height: 40 px;
    border: 1 px solid# DDD
}

.modal - window.modal - card.modal - form.button - wrapper.btn {
    height: 40 px;
    padding - left: 30 px;
    padding - right: 30 px;
    font - size: 16 px;
    line - height: 25 px
}

.modal - window.modal - card.modal - form.button - wrapper.btn.btn - link {
    text - decoration: none;
    color: grey
}

@ media(max - width: 480 px) {
    .modal - window.modal - back {
        min - height: 450 px
    }
    .modal - window.modal - card {
        top: 0;
        width: 300 px;
        margin: 50 px 0 50 px - 150 px
    }
}

.loading - indicator {
    width: 100 px;
    margin: 10 px auto;
    text - align: center
}

.loader - dot {
    display: inline - block;
    width: 16 px;
    height: 16 px;
    margin: 15 px 3 px;
    background: #a6a6a6;
    border - radius: 10 px;
    - webkit - animation: bouncedelay 1400 ms infinite cubic - bezier(.42, 0, .58, 1) both;
    - moz - animation: bouncedelay 1400 ms infinite cubic - bezier(.42, 0, .58, 1) both;
    - o - animation: bouncedelay 1400 ms infinite cubic - bezier(.42, 0, .58, 1) both;
    animation: bouncedelay 1400 ms infinite cubic - bezier(.42, 0, .58, 1) both
}

.loader - dot: nth - child(1) {
    -webkit - animation - delay: -320 ms;
    animation - delay: -320 ms
}

.loader - dot: nth - child(2) {
    -webkit - animation - delay: -160 ms;
    animation - delay: -160 ms
}

@ media(max - width: 768 px) {
    .modal - video {
        padding: 50 px 0
    }
}

.modal - video.fade: not(.in).modal - dialog {
    -webkit - transition: -webkit - transform 280 ms cubic - bezier(0, 0, .58, 1);
    - moz - transition: -moz - transform 280 ms cubic - bezier(0, 0, .58, 1);
    - o - transition: -o - transform 280 ms cubic - bezier(0, 0, .58, 1);
    transition: transform 280 ms cubic - bezier(0, 0, .58, 1)
}

.modal - video.in.modal - dialog {
    -webkit - transition: -webkit - transform 0 ms!important;
    - moz - transition: -moz - transform 0 ms!important;
    - o - transition: -o - transform 0 ms!important;
    transition: transform 0 ms!important
}

.modal - video.embed - responsive {
    -webkit - transition: all 218 ms cubic - bezier(.25, .1, .25, 1);
    - o - transition: all 218 ms cubic - bezier(.25, .1, .25, 1);
    transition: all 218 ms cubic - bezier(.25, .1, .25, 1)
}

@ media(min - width: 1200 px) {
    .modal - video.modal - lg {
        width: 1000px
    }
}

.modal - video.modal - content {
    position: relative;
    background - color: #000;
    -webkit-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .19);
    -moz-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .19);
    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .19)
}

.modal-video .modal-body,
.modal-video .modal-header {
    padding: 0
}

.modal-video .modal-body {
    overflow: hidden
}

.modal-video .modal-header {
    position: absolute;
    z-index: -1;
    top: 0;
    width: 100%;
    min-height: 60px;
    border: 0px;
}

.modal-video .modal-close {
    position: absolute;
    z-index: 0;
    top: 0;
    right: -34px;
    min-width: 54px;
    padding: 10px 14px 12px 16px;
    background: #03a9f4;
    color: #fff;
    font-size: 24px;
    line-height: 1;
    border-radius: 0;
    opacity: .85;
        border: 0px;

    filter: alpha(opacity=85);
    -webkit-box-shadow: 0 5px 11px 0 rgba(0, 0, 0, .18), 0 4px 15px 0 rgba(0, 0, 0, .15);
    -moz-box-shadow: 0 5px 11px 0 rgba(0, 0, 0, .18), 0 4px 15px 0 rgba(0, 0, 0, .15);
    box-shadow: 0 5px 11px 0 rgba(0, 0, 0, .18), 0 4px 15px 0 rgba(0, 0, 0, .15);
    -webkit-transition: all 300ms cubic-bezier(.25, .1, .25, 1);
    -o-transition: all 300ms cubic - bezier(.25, .1, .25, 1);
    transition: all 300 ms cubic - bezier(.25, .1, .25, 1)
}

@ media(max - width: 840 px) {
    .modal - video.modal - close {
        right: 0;
        top: -48 px
    }
}

.modal - video.modal - close: hover {
    opacity: 1;
    filter: alpha(opacity=100);
    color: #fff
}

.modal - video.video - album {
    position: absolute;
    height: 100 %;
    width: 100 %;
    z - index: 3;
    right: 0;
    top: 0;
    - webkit - transition: all 280 ms cubic - bezier(.25, .1, .25, 1);
    - o - transition: all 280 ms cubic - bezier(.25, .1, .25, 1);
    transition: all 280 ms cubic - bezier(.25, .1, .25, 1)
}

.modal - video.video - album.toggle - play {
    position: absolute;
    top: 50 %;
    left: -40 px;
    margin - top: -20 px;
    width: 40 px;
    height: 40 px;
    line - height: 20 px;
    padding: 10 px;
    background: rgba(26, 26, 26, .87);
    color: rgba(255, 255, 255, .8);
    cursor: pointer;
    border - bottom - left - radius: 3 px;
    border - top - left - radius: 3 px;
    - webkit - transition: all 218 ms;
    - o - transition: all 218 ms;
    transition: all 218 ms
}

.modal - video.video - album.toggle - play.icon {
    font - size: 20 px
}

.modal - video.video - album.toggle - play: hover {
    color: #fff
}

.modal - video.video - album.album - list {
    height: 100 %;
    padding: 5 px 0 0 5 px;
    margin - bottom: 0;
    background: #000;
    font-size: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden;
    -webkit-transition: background 218ms;
    -o-transition: background 218ms;
    transition: background 218ms
}

@media (max-width:1200px) {
    .modal-video .video-album .album-list {
        text-align: center
    }
}

.modal-video .video-album .album-list.thin-scroll::-webkit-scrollbar {
    width: 5px
}

.modal-video .video-album .album-list.thin-scroll::-webkit-scrollbar-thumb {
    background-color: # 6e6 e6e
}

.modal - video.video - album.album - list.thin - scroll::-webkit - scrollbar - track {
    background - color: rgba(31, 31, 31, .87)
}

.modal - video.video - album.album - item {
    position: relative;
    display: inline - block;
    max - width: 199 px;
    min - height: 60 px;
    margin - bottom: 5 px;
    padding - right: 5 px;
    font - size: 14 px;
    cursor: pointer;
    - webkit - transition: width 218 ms cubic - bezier(.25, .1, .25, 1);
    - o - transition: width 218 ms cubic - bezier(.25, .1, .25, 1);
    transition: width 218 ms cubic - bezier(.25, .1, .25, 1)
}

.modal - video.video - album.album - item.has - watched,
.modal - video.video - album.album - item.is - current: before,
.modal - video.video - album.album - item: hover: before {
    opacity: .3;
    filter: alpha(opacity=30)
}

.modal - video.video - album.album - item: before {
    content: ' ';
    position: absolute;
    z - index: 1;
    left: 0;
    width: 100 %;
    height: 100 %;
    background: rgba(0, 0, 0, .4)
}

.modal - video.video - album.album - item: after {
    content: '';
    display: none;
    position: absolute;
    z - index: 2;
    top: 50 %;
    left: 50 %;
    margin - top: -10 px;
    margin - left: -8 px;
    width: 0;
    height: 0;
    border - width: 10 px 0 10 px 16 px;
    border - style: solid;
    border - color: rgba(255, 255, 255, .87);
    border - top - color: transparent;
    border - bottom - color: transparent;
    - webkit - transform: scale(1.4);
    - ms - transform: scale(1.4);
    - o - transform: scale(1.4);
    transform: scale(1.4)
}

.modal - video.video - album.album - item.is - current: after {
    display: block
}

.modal - video.video - album.album - item.img - wrap {
    position: relative;
    display: block;
    margin - left: auto;
    margin - right: auto
}

.modal - video.video - album.album - item.video - name {
    position: absolute;
    bottom: 10 px;
    left: 10 px;
    z - index: 3;
    color: #fff;
    text - shadow: 1 px 1 px 0 rgba(0, 0, 0, .3)
}

.modal - video.video - album.album - item img {
    width: 194 px;
    height: 107 px;
    max - height: 107 px;
    border - radius: 3 px
}

.modal - video.video - loading {
    position: absolute;
    z - index: 2;
    width: 100 %;
    height: 100 %;
    - webkit - transition: all 500 ms cubic - bezier(.25, .1, .25, 1);
    - o - transition: all 500 ms cubic - bezier(.25, .1, .25, 1);
    transition: all 500 ms cubic - bezier(.25, .1, .25, 1)
}

.modal - video.video - loading img {
    height: 100 %
}

.modal - video video {
    opacity: 0;
    filter: alpha(opacity=0);
    - webkit - transition: all 1000 ms cubic - bezier(.25, .25, .75, .75);
    - o - transition: all 1000 ms cubic - bezier(.25, .25, .75, .75);
    transition: all 1000 ms cubic - bezier(.25, .25, .75, .75)
}

.modal - video.is - list - init.video - album {
    width: 200 px
}

.modal - video.is - list - init.album - list {
    background: rgba(26, 26, 26, .87)
}

.modal - video.is - list - init.album - item {
    width: 100 %
}

.modal - video.is - init.video - loading {
    -webkit - transform: scale(1.8);
    - ms - transform: scale(1.8);
    - o - transform: scale(1.8);
    transform: scale(1.8);
    opacity: 0;
    filter: alpha(opacity=0)
}

.modal - video.is - init video {
    opacity: 1;
    filter: alpha(opacity=100)
}

.modal - video.is - playing.embed - responsive {
    margin - right: 0
}

.modal - video.is - playing.video - album {
    right: -200 px;
    - webkit - transition: all 280 ms cubic - bezier(.25, .1, .25, 1) 218 ms;
    - o - transition: all 280 ms cubic - bezier(.25, .1, .25, 1) 218 ms;
    transition: all 280 ms cubic - bezier(.25, .1, .25, 1) 218 ms
}

.modal - video.is - playing.video - album.album - list,
.modal - video.is - playing.video - album.toggle - play {
    background: rgba(255, 255, 255, .1)
}

.modal - video.is - playing.video - album.toggle - play {
    color: rgba(255, 255, 255, .3)
}

.modal - video.is - playing.video - album.toggle - play.icon: before {
    content: "\b00b"
}

.modal - video.is - playing.modal - close {
    right: 10 px;
    opacity: .2;
    filter: alpha(opacity=20)
}

@ media(max - width: 840 px) {
    .modal - video.is - playing.modal - close {
        right: 0;
        top: 10 px
    }
}

.modal - video.is - playing.modal - header: hover.modal - close {
    right: -54 px;
    opacity: 1;
    filter: alpha(opacity=100)
}

.modal - backdrop {
    z - index: 1039
}

.modal - backdrop.in {
    opacity: .7;
    filter: alpha(opacity=70)
}

.no - content {
    padding: 100 px 30 px;
    background: #f5f5f5;
    border: 1 px dashed# d1d1d1;
    text - align: center;
    font - size: 22 px;
    letter - spacing: 1 px;
    color: #9c9c9c
}

@media (max-width:480px) {
    .no-content {
        padding: 70px 10px;
        font-size: 16px
    }
}

.no-content .emoji,
.no-content .tip-text {
    margin-bottom: .6em
}

.no-content .emoji {
    font-size: 1.4em
}

.no-content .btn-default.ghost {
    color: # 949494
}

.no - content.btn - default.ghost: hover {
    color: #fff;
    border - color: #949494;
    background: # 9 c9c9c
}

@ media(max - width: 480 px) {
    .no - content.btn - default.ghost {
        padding: 8 px 12 px;
        font - size: 14 px
    }
}

.vertical - scroll::-webkit - scrollbar {
    width: 12 px
}

.vertical - scroll::-webkit - scrollbar - track {
    border - left: 1 px solid# a6a6a6;
    background: #d9d9d9
}

.vertical - scroll::-webkit - scrollbar - thumb {
    background: #a6a6a6
}

.horizontal - scroll::-webkit - scrollbar {
    height: 12 px
}

.horizontal - scroll::-webkit - scrollbar - track {
    background: #d9d9d9
}

.horizontal - scroll::-webkit - scrollbar - thumb {
    background: #a6a6a6
}

.thin - scroll::-webkit - scrollbar {
    width: 7 px
}

.thin - scroll::-webkit - scrollbar - track {
    background - color: #d9d9d9;
    border - left: 2 px solid transparent
}

.thin - scroll::-webkit - scrollbar - thumb {
    background - color: #a6a6a6;
    border - left: 2 px solid transparent
}

.thin - scroll::-webkit - scrollbar - thumb: window - inactive {
    background: rgba(0, 0, 0, .12)
}

.thin - horizontal - scroll::-webkit - scrollbar - track {
    background: #d9d9d9
}

.thin - horizontal - scroll::-webkit - scrollbar - thumb {
    background: #a6a6a6
}

.thin - horizontal - scroll::-webkit - scrollbar {
    height: 7 px
}

.transparent - scroll::-webkit - scrollbar {
    width: 8 px
}

.transparent - scroll::-webkit - scrollbar - track {
    background: 0 0
}

.transparent - scroll::-webkit - scrollbar - thumb {
    background: rgba(0, 0, 0, .26)
}

.enjoy - tb {
    padding - top: 105 px!important;
    background - size: cover;
    color: #fff;
    background - image: url(.. / images / enjoy - sea.jpg)
}

@ media only screen and(-webkit - min - device - pixel - ratio: 2),
only screen and(min--moz - device - pixel - ratio: 2),
only screen and(-o - min - device - pixel - ratio: 2 / 1),
only screen and(min - device - pixel - ratio: 2),
only screen and(min - resolution: 192 dpi),
only screen and(min - resolution: 2 dppx) {
    .enjoy - tb {
        background - image: url(.. / images / enjoy - sea@ 2 x.jpg)
    }
}

.enjoy - tb.title {
    margin - bottom: 0!important
}

.enjoy - tb.desc {
    padding - bottom: 2 px;
    color: #fff!important
}

.enjoy - tb.ghost {
    color: #fff;
    border: 2 px solid rgba(255, 255, 255, .6)
}

.enjoy - tb.ghost: hover {
    color: #fff;
    background: rgba(255, 255, 255, .2);
    - webkit - box - shadow: none;
    - moz - box - shadow: none;
    box - shadow: none
}

.support - contact {
    min - height: 320 px;
    padding - top: 102 px!important
}

.support - contact.support - icon {
    width: 50 px;
    height: 50 px;
    border: 2 px solid grey;
    border - radius: 50 %;
    margin: 0 auto 15 px;
    background - image: url(.. / images / support - icon@ 2 x.png);
    background - size: 184 px 46 px
}

.support - contact.community.support - icon {
    background - position: 0 0
}

.support - contact.email.support - icon {
    background - position: -46 px 0
}

.support - contact.phone.support - icon {
    background - position: -92 px 0
}

.support - contact.session.support - icon {
    background - position: -138 px 0
}

.support - contact.muted,
.support - contact.name {
    color: grey
}

.support - contact.name {
    margin - bottom: 5 px
}

@ media(max - width: 991 px) {
    .support - contact {
        padding - top: 50 px!important
    }
    .support - contact.col - md - 3: nth - child(n + 3) {
        margin - top: 70 px
    }
}

@ media(max - width: 480 px) {
    .support - contact.support - item a {
        display: block;
        overflow: hidden;
        text - overflow: ellipsis;
        white - space: nowrap
    }
    .support - contact.email a {
        line - height: 21 px;
        font - size: 12 px
    }
}

.tbsite - article {
    padding - top: 0
}

.tbsite - article.max730 {
    max - width: 730 px
}

.tbsite - article.article - content.container {
    height: inherit;
    position: relative
}

.tbsite - article.article - content.topbanner {
    width: 100 %;
    height: 500 px;
    background - size: cover;
    background - position: center;
    margin: 50 px auto 20 px;
    position: relative
}

.tbsite - article.article - content.topbanner.bg - mask {
    position: relative;
    background: rgba(0, 0, 0, .3);
    width: 100 %;
    height: 500 px
}

.tbsite - article.article - content.topbanner.not - image,
.tbsite - article.article - content.topbanner.not - image.bg - mask {
    height: 400 px
}

.tbsite - article.article - content.topbanner.loadingbar {
    position: absolute;
    z - index: 2;
    width: 100 %;
    height: 100 %;
    background - color: #383838
}

.tbsite-article .article-content .topbanner .loading-indicator {
    text-align: center;
    margin-top: 280px
}

.tbsite-article .article-content .topbanner .return {
    position: absolute;
    top: 120px
}

.tbsite-article .article-content .topbanner .return a {
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid transparent;
    border-radius: 15px;
    font-size: 16px;
    -webkit-text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .2);
    color: # fff;
    - webkit - transition: all.35 s;
    - o - transition: all.35 s;
    transition: all.35 s
}

.tbsite - article.article - content.topbanner.return a: hover {
    margin - left: -5 px;
    border: 1 px solid# fff;
    color: #fff!important;
    text - shadow: 0 1 px 3 px rgba(0, 0, 0, .2), 0 0 5 px rgba(255, 255, 255, .5)
}

.tbsite - article.article - content.topbanner.title,
.tbsite - article.article - content.topbanner.topbanner - info {
    font - family: "Lucida Grande", "Luxi Sans", Arial, "Helvetica Neue", Helvetica, "Hiragino Sans GB", STHeiti, "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Micro Hei Mono", "WenQuanYi Zen Hei", "WenQuanYi Zen Hei Mono", LiGothicMed;
    color: #fff
}

.tbsite - article.article - content.topbanner.title {
    position: absolute;
    bottom: 40 px;
    font - size: 42 px;
    line - height: 1.3;
    - webkit - text - shadow: 0 1 px 1 px rgba(0, 0, 0, .2);
    text - shadow: 0 1 px 1 px rgba(0, 0, 0, .2)
}

.tbsite - article.article - content.topbanner.topbanner - info {
    text - align: center;
    margin - top: 200 px
}

.tbsite - article.article - content.topbanner.topbanner - info.title {
    font - size: 32 px
}

.tbsite - article.article - content.topbanner.topbanner - info.title.small {
    top: 160 px;
    font - size: 20 px;
    margin: 0 0 20 px
}

.tbsite - article.article - content.topbanner.topbanner - info.case-title {
    font - size: 32 px
}

.tbsite - article.article - content.topbanner.topbanner - info.case-title.small {
    top: 160 px;
    font - size: 20 px;
    margin: 0 0 20 px
}

.tbsite - article.article - content.topbanner.topbanner - info.case-desc {
    top: 160 px;
    font - size: 20 px;
    text - align: center;
    margin: 0 0 20 px
}

.tbsite - article.article - content.topbanner.topbanner - info.author {
    margin - top: 100 px
}

.tbsite - article.article - content.topbanner.topbanner - info.author.username {
    font - size: 16 px;
    margin: 0 0 15 px
}

.tbsite - article.article - content.topbanner.topbanner - info.author.time {
    font - size: 14 px;
    margin: 0
}

.tbsite - article.article - content.article - toolbar {
    padding - top: 20 px
}

@ media(max - width: 480 px) {
    .tbsite - article.article - content.article - toolbar {
        padding - bottom: 20 px
    }
}

@ font - face {
    font - family: icomoon;
    src: url(.. / fonts / icomoon.d3707fc7.eot ? gaxkqw);
    src: url(.. / fonts / icomoon.d3707fc7.eot ? #iefixgaxkqw) format('embedded-opentype'), url(.. / fonts / icomoon.ecf7f03e.woff ? gaxkqw) format('woff'), url(.. / fonts / icomoon.600 b67d7.ttf ? gaxkqw) format('truetype'), url(.. / fonts / icomoon.a27d7b91.svg ? gaxkqw# icomoon) format('svg');
    font - weight: 400;
    font - style: normal
}

.tbsite - article.article - content.article - toolbar[class *=" social-icon-"],
.tbsite - article.article - content.article - toolbar[class ^=social - icon -] {
    font - family: icomoon;
    speak: none;
    font - style: normal;
    font - weight: 400;
    font - variant: normal;
    text - transform: none;
    line - height: 1;
    - webkit - font - smoothing: antialiased;
    - moz - osx - font - smoothing: grayscale
}

.tbsite - article.article - content.article - toolbar.social - icon - wechat: before {
    content: "\e600"
}

.tbsite - article.article - content.article - toolbar.social - icon - facebook: before {
    content: "\e601"
}

.tbsite - article.article - content.article - toolbar.social - icon - twitter: before {
    content: "\e602"
}

.tbsite - article.article - content.article - toolbar.social - icon - dribbble: before {
    content: "\e605"
}

.tbsite - article.article - content.article - toolbar.social - icon - facebook2: before {
    content: "\e604"
}

.tbsite - article.article - content.article - toolbar.social - icon - googleplus: before {
    content: "\e606"
}

.tbsite - article.article - content.article - toolbar.social - icon - pinterest: before {
    content: "\e607"
}

.tbsite - article.article - content.article - toolbar.social - icon - evernote: before {
    content: "\e609"
}

.tbsite - article.article - content.article - toolbar.social - icon - sina - weibo: before {
    content: "\e603"
}

.tbsite - article.article - content.article - toolbar.social - icon - behance: before {
    content: "\e60a"
}

.tbsite - article.article - content.article - toolbar.share - button - group.btn {
    font - size: 22 px;
    width: 50 px;
    height: 50 px;
    padding: 8 px 12 px;
    margin: 0 10 px;
    line - height: 1.7;
    color: #a6a6a6;
    border: 1 px solid# a6a6a6;
    border - radius: 50 %;
    - webkit - transition: all 218 ms;
    - o - transition: all 218 ms;
    transition: all 218 ms
}

.tbsite - article.article - content.article - toolbar.share - button - group.btn.weibo: hover {
    color: #c5282f;
    border - color: #c5282f
}

.tbsite - article.article - content.article - toolbar.share - button - group.btn.wechat: hover {
    color: #44b549;
    border-color: # 44 b549
}

.tbsite - article.article - content.article - toolbar.share - button - group.btn.twitter: hover {
    color: #7fdbff;
    border-color: # 7 fdbff
}

.tbsite - article.article - content.article - toolbar.share - button - group.btn.facebook: hover {
    color: #3b5998;
    border-color: # 3 b5998
}

.tbsite - article.article - content.infobar {
    margin - top: 40 px;
    padding - bottom: 20 px;
    border - bottom: solid 1 px# ededed;
    margin - bottom: 20 px
}

.tbsite - article.article - content.switch-nav {
    margin - bottom: 70 px;
    font - size: 16 px
}

.tbsite - article.article - content.switch-nav.prev {
    float: left
}

.tbsite - article.article - content.switch-nav.next {
    float: right
}

.tbsite - article.article - content.icon - chevron - left {
    margin - right: 5 px;
    font - size: 14 px
}

.tbsite - article.article - content.icon - chevron - right {
    margin - left: 5 px
}

.tbsite - article.modal - wechat {
    display: none
}

.tbsite - article.modal - wechat.modal - dialog {
    margin: 100 px auto;
    width: 280 px
}

.tbsite - article.modal - wechat.modal - header {
    padding: 15 px;
    min - height: 16.43 px;
    text - align: center
}

.tbsite - article.modal - wechat.modal - body {
    padding: 0 15 px 15 px
}

.tbsite - article.modal - wechat.modal - body.qrcode {
    width: 250 px;
    height: 250 px
}

@ media(max - width: 768 px) {
    .tbsite - article.article - content.infobar {
        margin - bottom: 0
    }
    .tbsite - article.article - content.switch-nav {
        padding: 0;
        margin - bottom: 0
    }
    .tbsite - article.article - content.switch-nav.next,
    .tbsite - article.article - content.switch-nav.prev {
        width: 50 %;
        padding: 30 px 0;
        text - align: center
    }
    .tbsite - article.article - content.switch-nav.next: hover,
    .tbsite - article.article - content.switch-nav.prev: hover {
        background: #ededed
    }
    .tbsite - article.article - content.switch-nav.next: first - child,
    .tbsite - article.article - content.switch-nav.prev: first - child {
        border - right: solid 1 px# ededed
    }
}

@ media(max - width: 480 px) {
    .tbsite - article.loading - indicator {
        display: none
    }
    .tbsite - article.article - content.topbanner {
        margin - bottom: 20 px
    }
    .tbsite - article.article - content.topbanner,
    .tbsite - article.article - content.topbanner.bg - mask,
    .tbsite - article.article - content.topbanner.not - image,
    .tbsite - article.article - content.topbanner.not - image.bg - mask {
        height: 350 px
    }
    .tbsite - article.article - content.topbanner.title {
        font - size: 24 px
    }
    .tbsite - article.article - content.topbanner.loadingbar.loading - indicator {
        margin - top: 180 px
    }
    .tbsite - article.article - content.infobar {
        margin - top: 10 px;
        padding - bottom: 30 px
    }
    .tbsite - article.article - content.switch-nav {
        font - size: 14 px
    }
}

.tbsite - jumbotron {
    height: 526 px;
    padding: 120 px 0 0;
    margin - bottom: 60 px;
    background - position: center bottom;
    background - repeat: no - repeat;
    background - color: #666;
    font-size: 58px;
    color: # fff;
    position: relative
}

.tbsite - jumbotron.container {
    max - width: 920 px
}

.tbsite - jumbotron.case-desc,
.tbsite - jumbotron.case-title {
    color: #FFF;
    - webkit - text - shadow: 0 1 px 1 px rgba(0, 0, 0, .5);
    - moz - text - shadow: 0 1 px 1 px rgba(0, 0, 0, .5);
    text - shadow: 0 1 px 1 px rgba(0, 0, 0, .5)
}

.tbsite - jumbotron.case-title {
    margin - bottom: 20 px;
    font - size: 20 px;
    line - height: 1.3
}

.tbsite - jumbotron.case-desc {
    font - size: 20 px;
    line - height: 1.58
}

.tbsite - jumbotron.topbanner - info {
    font - family: "Lucida Grande", "Luxi Sans", Arial, "Helvetica Neue", Helvetica, "Hiragino Sans GB", STHeiti, "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Micro Hei Mono", "WenQuanYi Zen Hei", "WenQuanYi Zen Hei Mono", LiGothicMed;
    text - align: center;
    color: #fff;
    margin - top: 150 px
}

.tbsite - jumbotron.topbanner - info.case-title {
    font - size: 32 px
}

.tbsite - jumbotron.topbanner - info.case-desc {
    top: 160 px;
    font - size: 20 px;
    text - align: center;
    margin: 0 0 20 px
}

.tbsite - jumbotron.topbanner - info.btn - read {
    z - index: 2;
    font - size: 18 px;
    margin - top: 53 px;
    padding: 0 32 px;
    height: 40 px;
    line - height: 40 px;
    background - color: rgba(255, 255, 255, 0);
    border - color: #fff;
    color: #fff;
    - webkit - transition: all 218 ms;
    - o - transition: all 218 ms;
    transition: all 218 ms
}

.tbsite - jumbotron.case-banner - btn li,
.tbsite - jumbotron.topbanner - info.btn - read: hover {
    background - color: rgba(255, 255, 255, .2)
}

.tbsite - jumbotron.case-banner {
    height: 100 %
}

.tbsite - jumbotron.case-banner li {
    width: 100 %;
    height: 100 %;
    max - width: 100 % !important;
    position: absolute;
    top: 0;
    left: 0;
    background - size: cover;
    opacity: 0;
    - webkit - transition: all 660 ms;
    - o - transition: all 660 ms;
    transition: all 660 ms
}

.tbsite - jumbotron.case-banner li.active {
    opacity: 1
}

.tbsite - jumbotron.case-banner - btn {
    height: 10 px;
    position: absolute;
    left: 50 %;
    bottom: 30 px;
    padding - left: 0;
    overflow: hidden;
    margin - left: -60 px;
    - webkit - transform: translate3d(0, 0, 0)
}

.tbsite - jumbotron.case-banner - btn li {
    display: inline - block;
    width: 10 px;
    height: 10 px;
    float: left;
    margin: 0 10 px;
    cursor: pointer;
    border - radius: 50 %
}

.tbsite - jumbotron.case-banner - btn li.active,
.tbsite - jumbotron.case-banner - btn li: hover {
    background - color: #fff
}

.tbsite - jumbotron.subcol - nav {
    position: absolute;
    bottom: 0;
    overflow: hidden;
    width: 100 %;
    height: 70 px;
    text - align: center;
    - webkit - transform: translate3d(0, 0, 0)
}

.tbsite - jumbotron.subcol - nav ul {
    margin: 0 auto;
    max - width: 980 px;
    min - width: 320 px
}

.tbsite - jumbotron.subcol - nav li {
    width: 33.33 %;
    margin - left: 0
}

.tbsite - jumbotron.subcol - nav li a {
    text - align: center;
    border - radius: 0;
    color: #FFF;
    font - size: 20 px;
    height: 70 px;
    line - height: 55 px
}

.tbsite - jumbotron.subcol - nav li.active a,
.tbsite - jumbotron.subcol - nav li.active a: hover {
    background - color: rgba(0, 0, 0, .5)
}

.tbsite - jumbotron.subcol - nav li a: focus,
.tbsite - jumbotron.subcol - nav li a: hover {
    background: -moz - linear - gradient(top, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .4) 100 %);
    background: -webkit - linear - gradient(top, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .4) 100 %);
    background: linear - gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .4) 100 %)
}

.tbsite - jumbotron.subcol - nav.subcol - nav - bg {
    position: absolute;
    top: 0;
    width: 100 %;
    height: 100 %;
    - webkit - filter: blur(10 px);
    background: rgba(0, 0, 0, .1)
}

.tbsite - jumbotron.subcol - nav.subcol - nav - bg: after {
    content: '';
    background: rgba(0, 0, 0, .1);
    display: block;
    height: 100 %;
    width: 100 %
}

.box - content,
.tbsite - post - info.author.avatar {
    background - size: cover;
    background - repeat: no - repeat;
    background - position: center
}

.tbsite - case {
    height: 500 px;
    margin - bottom: 0;
    padding - top: 0
}

@ media(min - width: 1440 px) {
    .subcol - nav - bg,
    .tbsite - jumbotron {
        background - size: cover
    }
}

@ media(max - width: 992 px) {
    .tbsite - jumbotron {
        margin - bottom: 32 px
    }
}

@ media(max - width: 768 px) {
    .tbsite - jumbotron {
        margin - bottom: 16 px;
        font - size: 32 px
    }
    .tbsite - jumbotron.desc {
        font - size: .6e m
    }
    .tbsite - jumbotron.topbanner - info {
        margin - top: 130 px
    }
    .tbsite - jumbotron.topbanner - info.case-title,
    .tbsite - jumbotron.topbanner - info.title {
        font - size: 24 px
    }
    .tbsite - jumbotron.case-banner - btn {
        bottom: 10 px
    }
    .tbsite - jumbotron.subcol - nav {
        height: 50 px
    }
    .tbsite - jumbotron.subcol - nav ul li a {
        white - space: nowrap;
        overflow: hidden;
        text - overflow: ellipsis;
        height: 50 px;
        line - height: 35 px;
        font - size: 14 px
    }
    .box - title h2 {
        font - size: 20 px
    }
}

@ media(max - width: 480 px) {
    .tbsite - jumbotron {
        height: 400 px;
        padding - top: 60 px;
        font - size: 24 px
    }
    .tbsite - jumbotron.desc {
        text - align: left;
        font - size: 16 px
    }
    .tbsite - jumbotron.topbanner - info {
        margin - top: 80 px
    }
}

@ media(max - width: 320 px) {
    .tbsite - jumbotron {
        font - size: 26 px
    }
    .tbsite - jumbotron.title span {
        display: block;
        margin - top: 10 px
    }
    .tbsite - jumbotron.desc {
        text - align: left;
        font - size: 14 px
    }
}

.en.tbsite - jumbotron {
    font - size: 40 px
}

@ media(max - width: 992 px) {
    .en.tbsite - jumbotron {
        font - size: 30 px
    }
}

@ media(max - width: 480 px) {
    .en.tbsite - jumbotron {
        height: 460 px;
        font - size: 20 px
    }
    .en.tbsite - jumbotron.desc {
        text - align: center
    }
}

.box - list.box - title {
    height: 80 px
}

.box - list.box - title h2 {
    margin: 0;
    float: left;
    font - size: 24 px;
    line - height: 80 px;
    color: #383838
}

.box-list .box-title a {
    float: right;
    color: # 383838;
    margin: 28 px 0;
    font - size: 16 px;
    - webkit - transition: all 218 ms;
    - o - transition: all 218 ms;
    transition: all 218 ms
}

.box - list.box - title a span {
    font - size: 14 px;
    margin - left: 10 px
}

.box - list.more - research {
    position: relative;
    margin - top: 30 px;
    margin - bottom: 20 px;
    padding - top: 36 px;
    border - top: 1 px solid# EEE
}

.box - list.more - research.title - more - case {
    position: absolute;
    top: -37 px;
    left: 50 %;
    font - size: 16 px;
    padding: 0 15 px;
    background - color: #fff;
    - webkit - transform: translate(-50 %, -50 %);
    - moz - transform: translate(-50 %, -50 %);
    - o - transform: translate(-50 %, -50 %);
    - ms - transform: translate(-50 %, -50 %);
    transform: translate(-50 %, -50 %)
}

.box - content,
.box - item {
    height: 200 px;
    position: relative
}

.box - list.more - research.title - more - case:hover {
    color: #383838
}

.box-list.more-research:hover {
    color: # 03 A9F4
}

.box - list.more - research: hover.title - more - case {
    color: #383838
}

.box-item {
    margin-bottom: 30px
}

.left-item {
    margin-right: 16px
}

.right-item {
    margin-left: 16px
}

.box-content {
    display: block;
    color: # fff;
    text - align: center;
    border - radius: 5 px;
    - webkit - backface - visibility: hidden;
    - webkit - transform: translateZ(0);
    - webkit - transition: all 250 ms ease - in -out;
    - o - transition: all 250 ms ease - in -out;
    transition: all 250 ms ease - in -out
}

.box - content.content {
    width: 100 %;
    height: 55 px;
    z - index: 2;
    text - align: left;
    padding: 10 px 10 px 0;
    border - radius: 0 0 5 px 5 px;
    background - color: rgba(0, 0, 0, .5);
    position: absolute!important;
    bottom: 0
}

.cases - practices.row - practices.box - item,
.cases - practices.row - practices.box - item.box - content: after {
    height: 100 px
}

.box - content.content.category {
    font - size: 16 px;
    margin: 0;
    font - weight: 700;
    overflow: hidden
}

.box - content.content.desc {
    font - size: 14 px;
    margin: 3 px 0 0;
    overflow: hidden
}

.box - content: hover {
    color: #fff;
    text - decoration: none;
    box - shadow: 0 2 px 4 px 0 rgba(0, 0, 0, .5);
    - webkit - box - shadow: 0 2 px 4 px 0 rgba(0, 0, 0, .5)
}

.cases - practices {
    font - size: 20 px;
    line - height: 200 px
}

.cases - practices.box - content span {
    position: relative;
    z - index: 2
}

.cases - practices.row - practices.box - item.box - content {
    height: 100 px;
    line - height: 100 px
}

.tbsite - post - info {
    font - size: 16 px;
    color: #a6a6a6
}

.tbsite - post - info.author,
.tbsite - post - info.avatar,
.tbsite - post - info.time {
    display: inline - block;
    height: 20 px;
    line - height: 20 px
}

.tbsite - post - info.author {
    padding - left: 34 px;
    position: relative
}

.tbsite - post - info.author.avatar {
    width: 24 px;
    height: 24 px;
    position: absolute;
    left: 0;
    top: -2 px
}

.tbsite - post - info.time {
    border - left: 1 px solid# d9d9d9;
    margin - left: 10 px;
    padding - left: 10 px
}

.tbsite - list.category {
    position: relative
}

.tbsite - list.category: after {
    background: #e0e0e0!important
}

.tbsite - list.category.nav {
    padding - left: 16 px
}

.tbsite - list.category.nav > li {
    width: 11.5 %
}

.tbsite - list.category.nav > li: nth - child(n + 8) {
    display: none
}

@ media(max - width: 991 px) {
    .tbsite - list.category.nav > li {
        width: 13 %
    }
    .tbsite - list.category.nav > li: nth - child(n + 7) {
        display: none
    }
}

@ media(max - width: 767 px) {
    .tbsite - list.category.nav > li: nth - child(n + 6) {
        display: none
    }
}

.tbsite - list.category.more - actions a,
.tbsite - list.category.nav - tabs > li > a {
    padding: 12 px;
    border - left: 1 px solid# e0e0e0;
    border - top: 1 px solid# e0e0e0;
    border - right: 1 px solid# e0e0e0;
    font - size: 16 px;
    font - weight: 500;
    text - align: center;
    text - transform: uppercase;
    letter - spacing: 1 px
}

.tbsite - list.category.nav - tabs {
    border - bottom: none
}

.tbsite - list.category.nav - tabs > li > a {
    margin - left: -1 px;
    margin - right: 0;
    border - radius: 0;
    color: #9c9c9c;
    overflow: hidden;
    -webkit-transition: all 100ms cubic-bezier(.42, 0, .58, 1);
    -o-transition: all 100ms cubic-bezier(.42, 0, .58, 1);
    transition: all 100ms cubic-bezier(.42, 0, .58, 1)
}

.tbsite-list .category .nav-tabs>li>a:hover {
    background: # f2f2f2
}

.tbsite - list.category.nav - tabs > li: first - child,
.tbsite - list.category.nav - tabs > li: first - child a {
    border - radius: 3 px 0 0 3 px
}

.tbsite - list.category.nav - tabs > li: last - child a {
    border - radius: 0 3 px 0 0
}

.tbsite - list.category.nav - tabs > li.active a {
    background: #03a9f4;
    color: # fff;
    border - color: #03a9f4;
    margin-left: 0
}

.tbsite-list .category .more-actions {
    position: absolute;
    top: 0;
    right: 16px;
    z-index: 99
}

.tbsite-list .category .more-actions>a {
    display: inline-block;
    height: 47px;
    line-height: 23px;
    border-radius: 3px 3px 0 0;
    background: # fcfcfc;
    color: #6e6e6e;
    -webkit-transition: all 218ms cubic-bezier(.42, 0, .58, 1);
    -o-transition: all 218ms cubic-bezier(.42, 0, .58, 1);
    transition: all 218ms cubic-bezier(.42, 0, .58, 1)
}

.tbsite-list .category .more-actions>a span:first-child {
    margin-left: 6px
}

.tbsite-list .category .more-actions>a:hover {
    background: # f2f2f2
}

.tbsite - list.category.more - actions.icon {
    float: right;
    margin - left: 4 px
}

.tbsite - list.list - item.main - content,
.tbsite - list.pagination.prev {
    float: left
}

@ media(max - width: 991 px) {
    .tbsite - list.category.more - actions a,
    .tbsite - list.category.nav - tabs > li > a {
        padding: 9 px 16 px 8 px;
        font - size: 14 px
    }
    .tbsite - list.category.more - actions a {
        height: 38 px
    }
}

@ media(max - width: 767 px) {
    .tbsite - list.category.nav.col - 1 > li {
        width: 100 %
    }
    .tbsite - list.category.nav.col - 2 > li {
        width: 50 %
    }
    .tbsite - list.category.nav.col - 3 > li {
        width: 33.33333333 %
    }
    .tbsite - list.category.nav.col - 4 > li {
        width: 25 %
    }
    .tbsite - list.category.nav.col - 5 > li {
        width: 20 %
    }
}

@ media(max - width: 500 px) {
    .tbsite - list.category.nav - tabs > li > a {
        padding: 5 px;
        font - size: 12 px
    }
}

@ media(max - width: 350 px) {
    .tbsite - list.category.nav - tabs > li > a {
        font - size: 10 px
    }
}

.tbsite - list.no - content {
    background: #fcfcfc;
    font - size: 24 px;
    color: #6e6e6e
}

.tbsite-list .no-content .emoji-sad {
    line-height: 68px;
    padding-bottom: 20px;
    font-size: 48px
}

.tbsite-list .list-item,
.tbsite-list .list-item .main-content,
.tbsite-list .list-item .thumb {
    margin-bottom: 40px
}

.tbsite-list .list-item:after {
    content: '';
    width: calc(100% - 32px);
    height: 1px;
    margin: 0 16px;
    background: # e8e8e8
}

.tbsite - list.list - item: last - child: after {
    height: 0
}

.tbsite - list.list - item.thumb {
    float: right
}

.tbsite - list.list - item.thumb a {
    display: block;
    position: relative
}

.tbsite - list.list - item.thumb a > * {
    width: 100 %
}

.tbsite - list.list - item.thumb a.activebg {
    position: absolute;
    - webkit - transition: background 500 ms ease 150 ms;
    - o - transition: background 500 ms ease 150 ms;
    transition: background 500 ms ease 150 ms
}

.tbsite - list.list - item.thumb a.activebg.readmore {
    position: absolute;
    left: 50 %;
    top: 50 %;
    margin - left: -65 px;
    margin - top: -15 px;
    width: 130 px;
    height: 34 px;
    line - height: 34 px;
    padding: 0 10 px;
    background: rgba(255, 255, 255, .2);
    box - shadow: inset 0 0 0 1 px rgba(255, 255, 255, .25);
    border - radius: 3 px;
    text - align: center;
    font - size: 16 px;
    color: #fff;
    opacity: 0;
    filter: alpha(opacity=0);
    - webkit - transition: all 100 ms ease - in -out 80 ms;
    - o - transition: all 100 ms ease - in -out 80 ms;
    transition: all 100 ms ease - in -out 80 ms
}

.tbsite - list.list - item.thumb a.activebg.readmore: hover {
    background: rgba(255, 255, 255, .3);
    box - shadow: inset 0 0 0 1 px rgba(255, 255, 255, .35)
}

.tbsite - list.list - item.thumb a.activebg.text {
    -webkit - transition: padding - right 150 ms;
    - o - transition: padding - right 150 ms;
    transition: padding - right 150 ms
}

.tbsite - list.list - item.thumb a.activebg.icon {
    position: absolute;
    margin - left: 5 px;
    font - size: 20 px;
    opacity: 0;
    filter: alpha(opacity=0);
    - webkit - transform: rotate(90 deg);
    - ms - transform: rotate(90 deg);
    - o - transform: rotate(90 deg);
    transform: rotate(90 deg);
    - webkit - transition: opacity 150 ms;
    - o - transition: opacity 150 ms;
    transition: opacity 150 ms
}

.tbsite - list.list - item.thumb a: hover.activebg {
    background: rgba(0, 0, 0, .4);
    - webkit - transition: background 500 ms;
    - o - transition: background 500 ms;
    transition: background 500 ms
}

.tbsite - list.list - item.thumb a: hover.activebg.readmore {
    opacity: 1;
    filter: alpha(opacity=100);
    - webkit - transition: all 100 ms ease - in -out;
    - o - transition: all 100 ms ease - in -out;
    transition: all 100 ms ease - in -out
}

.tbsite - list.list - item.thumb a: hover.activebg.text {
    padding - right: 24 px;
    - webkit - transition: all 150 ms ease 80 ms;
    - o - transition: all 150 ms ease 80 ms;
    transition: all 150 ms ease 80 ms
}

.tbsite - list.list - item.thumb a: hover.activebg.icon {
    opacity: 1;
    filter: alpha(opacity=100);
    - webkit - transition: all 150 ms ease 80 ms;
    - o - transition: all 150 ms ease 80 ms;
    transition: all 150 ms ease 80 ms
}

.tbsite - list.list - item.title {
    color: grey
}

.tbsite - list.list - item.title: hover {
    color: #03a9f4!important
}

.tbsite-list .list-item .title h2 {
    line-height: 1.1;
    margin: 0 0 13px;
    font-size: 24px
}

.tbsite-list .list-item .summary {
    position: relative;
    width: 100%;
    line-height: 1.5;
    margin-bottom: 10px;
    font-size: 18px;
    color: # a6a6a6
}

.tbsite - list.ias - trigger {
    padding: 10 px;
    width: 100 %;
    border: 1 px solid# d9d9d9;
    border - radius: 3 px;
    - webkit - transition: all 218 ms;
    - o - transition: all 218 ms;
    transition: all 218 ms
}

@ media(max - width: 767 px) {
    .tbsite - list.ias - trigger {
        padding: 7 px
    }
}

.tbsite - list.ias - trigger > a {
    color: #ababab
}

.tbsite - list.ias - trigger: hover {
    border - color: #03a9f4
}

.tbsite-list .ias-trigger:hover>a {
    color: # 03 a9f4
}

.tbsite - list.ias - trigger,
.tbsite - list.loading - indicator {
    margin - bottom: 48 px
}

.tbsite - list.pagination {
    display: none;
    width: 100 %;
    margin: 0 0 48 px
}

.tbsite - list.pagination.next,
.tbsite - list.pagination.prev {
    width: 80 px;
    - webkit - transition: all 350 ms;
    - o - transition: all 350 ms;
    transition: all 350 ms
}

.tbsite - list.pagination.next {
    float: right
}

@ media(max - width: 992 px) {
    .box - list.left - item,
    .box - list.right - item {
        margin: 0 0 16 px
    }
    .box - list.left - item.box - content,
    .box - list.left - item.box - content: hover,
    .box - list.right - item.box - content,
    .box - list.right - item.box - content: hover {
        background - size: cover
    }
    .tbsite - list.list - item {
        margin - bottom: 32 px
    }
    .tbsite - list.list - item: last - child {
        margin - bottom: 0
    }
    .tbsite - list.list - item.thumb a > * {
        height: 134 px!important
    }
    .tbsite - list.ias - trigger,
    .tbsite - list.list - item.main - content,
    .tbsite - list.list - item.thumb,
    .tbsite - list.loading - indicator {
        margin - bottom: 32 px
    }
}

@ media(min - width: 767 px) {
    .tbsite - list.list - item.thumb a > * {
        height: 154 px
    }
    .tbsite - list.list - item.summary {
        max - height: 81 px;
        overflow: hidden
    }
}

@ media(min - width: 767 px) and(max - width: 992 px) {
    .tbsite - list.list - item.thumb {
        padding - left: 0
    }
}

@ media(max - width: 767 px) {
    .row - practices.box - item,
    .row - practices.box - item.box - content: after {
        height: 140 px!important
    }
    .box - list.box - item.box - content: hover {
        -webkit - transform: none;
        transform: none
    }
    .box - list.box - title h2 {
        font - size: 20 px
    }
    .row - practices {
        width: 50 % !important
    }
    .row - practices.box - item.box - content {
        height: 140 px!important;
        line - height: 140 px!important
    }
    .tbsite - list.list - item {
        margin - bottom: 16 px
    }
    .tbsite - list.list - item.thumb {
        margin - bottom: 0
    }
    .tbsite - list.list - item.thumb.activebg {
        display: none
    }
    .tbsite - list.list - item.thumb a > * {
        min - height: 174 px;
        max - height: 400 px
    }
    .tbsite - list.list - item.main - content {
        padding - left: 16 px;
        margin - bottom: 16 px
    }
    .tbsite - list.list - item.main - content.summary {
        font - size: 16 px
    }
    .tbsite - list.list - item.main - content h2 {
        margin: 12 px 0 8 px;
        font - size: 20 px
    }
    .tbsite - list.ias - trigger,
    .tbsite - list.loading - indicator {
        margin - bottom: 16 px
    }
}

.page - not - found.not - found - jumbotron {
    padding - top: 150 px;
    background - image: url(.. / images / 404 - jumbotron - bg.jpg);
    background - size: cover
}

.page - not - found.sitemap {
    margin - bottom: 70 px
}

.page - not - found.sitemap.nav - group {
    float: left;
    width: 25 %;
    margin - right: 5 %;
    text - align: center;
    color: #a6a6a6
}

.page - not - found.sitemap.nav - group: first - child,
.page - not - found.sitemap.nav - group: last - child {
    width: 17 %
}

.page - not - found.sitemap.nav - group: first - child {
    text - align: left
}

.page - not - found.sitemap.nav - group: last - child {
    margin - right: 0;
    text - align: right
}

.page - not - found.sitemap.nav - group h3 {
    padding - bottom: 30 px;
    border - bottom: solid 1 px# ededed;
    margin - bottom: 30 px;
    font - size: 22 px;
    color: grey
}

.page - not - found.sitemap.nav - group li {
    margin - bottom: 30 px
}

.page - not - found.sitemap.nav - group li > a {
    text - decoration: none;
    font - size: 16 px;
    color: #a6a6a6
}

.page - not - found.sitemap.nav - group li > a: hover {
    color: #03a9f4
}

@media (max-width:480px) {
    .page-not-found .not-found-jumbotron {
        padding-top: 90px
    }
    .page-not-found .sitemap .nav-group {
        height: 320px;
        margin: 0
    }
    .page-not-found .sitemap .nav-group,
    .page-not-found .sitemap .nav-group:first-child,
    .page-not-found .sitemap .nav-group:last-child {
        width: 50%;
        text-align: center
    }
    .page-not-found .sitemap .nav-group:nth-child(3),
    .page-not-found .sitemap .nav-group:nth-child(4) {
        height: 180px
    }
    .page-not-found .sitemap .nav-group li {
        margin-bottom: 20px
    }
}

@media (max-width:320px) {
    .page-not-found .not-found-jumbotron .title {
        font-size: 18px
    }
}

.page-apps .site-main {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto
}

.page-apps .download-words {
    height: 67px;
    padding: 0 30px;
    margin: 70px auto 30px;
    text-align: center
}

.page-apps .download-words img {
    width: 100%;
    max-width: 556px
}

.page-apps .download-slogan {
    margin-bottom: .7rem;
    font-size: 48px;
    margin-top: 70px
}

.page-apps .download-desc {
    padding: 0 30px;
    text-align: center;
    font-size: 16px;
    color: # a6a6a6
}

.page - apps.download - list {
    margin: 80 px 0 100 px
}

.page - apps.download - list > li {
    float: left;
    width: 25 %;
    height: 360 px;
    text - align: center
}

@ media(min - width: 480 px) and(max - width: 992 px) {
    .page - apps.download - list > li {
        width: 50 %
    }
}

.page - apps.download - list > li label {
    font - size: 18 px
}

.page - apps.download - list > li.download - for -qr label {
    visibility: hidden
}

.page - apps.download - list.download - type - image {
    height: 120 px;
    width: 100 %;
    margin: 60 px 0 80 px;
    background - repeat: no - repeat;
    background - position: center
}

.page - apps.download - list.download - type - image.pc {
    background - image: url(.. / images / download - web@ 2 x.png);
    background - size: 158 px 91 px
}

.page - apps.download - list.download - type - image.ios {
    background - image: url(.. / images / download - ios@ 2 x.png);
    background - size: 67 px 77 px
}

.page - apps.download - list.download - type - image.android {
    background - image: url(.. / images / download - android@ 2 x.png);
    background - size: 71 px 83 px
}

.page - apps.download - list.download - type - image.qr {
    position: relative;
    background - image: url(.. / images / download - qr.png);
    background - size: 120 px 120 px
}

.page - apps.download - list.handler - wrapper.btn {
    width: 210 px;
    height: 60 px;
    line - height: 45 px;
    border - radius: 4 px
}

.page - apps.download - list.handler - wrapper.pair.btn {
    width: 100 px;
    padding: 8 px;
    margin: 0 10 px
}

.page - apps.download - list.handler - wrapper.btn - group.open.dropdown - toggle {
    -webkit - box - shadow: inset 0 3 px 5 px rgba(0, 0, 0, .125);
    - moz - box - shadow: inset 0 3 px 5 px rgba(0, 0, 0, .125);
    box - shadow: inset 0 3 px 5 px rgba(0, 0, 0, .125);
    background - color: #ededed;
    border - color: #c2c2c2
}

.page - apps.download - list.qr - instructure {
    padding - top: 6 px
}

.page - apps.download - list.circle - indicator {
    position: absolute;
    top: 40 px;
    width: 32 px;
    height: 32 px;
    line - height: 32 px;
    border: 1 px solid# d9d9d9;
    border - radius: 16 px;
    color: #a6a6a6
}

@ media(max - width: 480 px) {
    .page - apps.download - words {
        margin: 40 px auto 10 px
    }
    .page - apps.download - desc {
        text - align: left
    }
    .page - apps.download - list {
        margin: 40 px 0 50 px
    }
    .page - apps.download - list > li {
        width: 100 %;
        margin - top: 20 px;
        padding - top: 50 px;
        border - top: 1 px dashed# ccc
    }
    .page - apps.download - list > li: first - child {
        margin - top: 0
    }
    .page - apps.download - list > li: last - child {
        border - top: none
    }
    .page - apps.download - list > li.circle - indicator {
        top: -100 px;
        left: 50 %;
        margin - left: -16 px
    }
    .page - apps.download - list > li label {
        font - size: 18 px
    }
    .page - apps.download - list.download - type - image {
        margin: 30 px 0 40 px
    }
}

.page - apps: not(.zh).download - words img {
    max - width: 840 px
}

.page - business.site - main > * {
    padding: 94 px 0 100 px;
    background - repeat: no - repeat
}

.page - business.site - main > * h1 {
    line - height: 1.2;
    margin - top: 0;
    font - size: 1 rem;
    margin - bottom: 26 px
}

@ media(max - width: 767 px) {
    .page - business.site - main > * h1 {
        line - height: 1.4;
        font - size: 1.1 rem
    }
}

.page - business.site - main > * p: not(.normal) {
    line - height: 1.7;
    font - size: 18 px
}

.page - business.site - main > * .desc {
    max - width: 672 px;
    margin: 20 px auto 24 px;
    color: grey
}

.page - business.site - main > .slide {
    padding - bottom: 0!important
}

.page - business.site - main > .slide.desc {
    margin - bottom: 35 px
}

.page - business.site - main > .slide.img - wrap {
    max - width: 1020 px;
    min - height: 130 px;
    margin: 0 auto
}

@ media(min - width: 1310 px) {
    .page - business.container {
        width: 1310 px
    }
    .page - business.site - main > .slide.img - wrap {
        min - height: 400 px
    }
}

@ media(max - width: 991 px) {
    .page - business.site - main >: not(.enjoy - tb) {
        padding: 50 px 0
    }
}

.page - business.btn.go - to {
    min - width: 200 px
}

.page - business.visible - xxs {
    display: none
}

@ media(max - width: 480 px) {
    .page - business.visible - xxs {
        display: block
    }
}

.page - business.business - jumbotron {
    position: relative;
    min - height: 692 px;
    padding: 70 px 0 0;
    margin - bottom: 0;
    background - position: center bottom;
    background - size: cover;
    background - image: url(.. / images / business / jumbotron - bg.jpg)
}

.page - business.business - jumbotron.jumbotron - content {
    position: relative;
    z - index: 2
}

.page - business.business - jumbotron.jumbotron - content.en - call - us {
    font - size: 14 px
}

.page - business.business - jumbotron.btn,
.page - business.business - jumbotron.title {
    margin - bottom: .7 rem
}

.page - business.business - jumbotron.btn - default {
    background: 0 0;
    color: grey;
    border - width: 2 px
}

.page - business.business - jumbotron.btn - default: hover {
    background: #fff
}

.page - business.business - jumbotron.slogan {
    max - width: 790 px;
    margin: 0 auto 1 rem;
    font - size: 18 px;
    color: grey
}

.page - business.business - jumbotron.btn {
    min - width: 156 px
}

@ media(min - width: 650 px) {
    .page - business.business - jumbotron.btn + .btn {
        margin - left: 20 px
    }
}

.page - business.business - jumbotron.jumbotron - figures {
    position: absolute;
    z - index: 1;
    left: 0;
    top: 0;
    width: 100 %;
    height: 100 %
}

.page - business.business - jumbotron.jumbotron - figures.figures - wrap {
    position: relative;
    width: 1520 px;
    height: 100 %;
    left: 50 %;
    margin - left: -760 px
}

.page - business.business - jumbotron.jumbotron - figures.figure - coffee {
    position: absolute;
    left: 0;
    bottom: 110 px;
    width: 320 px;
    height: 328 px;
    background - size: 320 px 328 px;
    background - image: url(.. / images / business / jumbotron - coffee.png)
}

@ media only screen and(-webkit - min - device - pixel - ratio: 2),
only screen and(min--moz - device - pixel - ratio: 2),
only screen and(-o - min - device - pixel - ratio: 2 / 1),
only screen and(min - device - pixel - ratio: 2),
only screen and(min - resolution: 192 dpi),
only screen and(min - resolution: 2 dppx) {
    .page - business.business - jumbotron.jumbotron - figures.figure - coffee {
        background - image: url(.. / images / business / jumbotron - coffee@ 2 x.png)
    }
}

.page - business.business - jumbotron.jumbotron - figures.figure - plant {
    position: absolute;
    right: 40 px;
    bottom: 230 px;
    width: 290 px;
    height: 308 px;
    background - size: 290 px 308 px;
    background - image: url(.. / images / business / jumbotron - plant.png)
}

@ media only screen and(-webkit - min - device - pixel - ratio: 2),
only screen and(min--moz - device - pixel - ratio: 2),
only screen and(-o - min - device - pixel - ratio: 2 / 1),
only screen and(min - device - pixel - ratio: 2),
only screen and(min - resolution: 192 dpi),
only screen and(min - resolution: 2 dppx) {
    .page - business.business - jumbotron.jumbotron - figures.figure - plant {
        background - image: url(.. / images / business / jumbotron - plant@ 2 x.png)
    }
}

.page - business.business - jumbotron.jumbotron - figures.figure - bottom {
    position: absolute;
    width: 100 %;
    bottom: 0;
    text - align: center
}

.page - business.business - jumbotron.jumbotron - figures.figure - bottom img {
    width: 100 %;
    max - width: 1374 px
}

@ media(max - width: 649 px) {
    .page - business.business - jumbotron {
        min - height: 0;
        padding - top: 40 px;
        padding - bottom: 48 %
    }
    .page - business.business - jumbotron.title {
        font - size: 1 rem;
        line - height: 1.5
    }
    .page - business.business - jumbotron.btn {
        width: 80 %;
        margin - bottom: 0
    }
    .page - business.business - jumbotron.btn + .btn {
        margin - top: 20 px
    }
    .page - business.business - jumbotron.jumbotron - figures.figures - wrap {
        width: 180 %;
        left: 0;
        margin - left: 0
    }
    .page - business.business - jumbotron.jumbotron - figures.figures - wrap.figure - coffee,
    .page - business.business - jumbotron.jumbotron - figures.figures - wrap.figure - plant {
        display: none
    }
    .page - business.business - jumbotron.jumbotron - figures.figures - wrap.figure - bottom {
        left: -22 %
    }
}

@ media(max - width: 480 px) {
    .page - business.business - jumbotron {
        padding - top: 30 px
    }
}

@ media(max - width: 400 px) {
    .page - business.business - jumbotron {
        padding - top: 20 px;
        padding - bottom: 50 %
    }
}

.page - business.prices {
    border - bottom: 1 px solid# DDD
}

.page - business.prices.table - responsive {
    max - width: 780 px;
    margin: 35 px auto 0;
    - webkit - box - shadow: 0 4 px 8 px rgba(0, 0, 0, .06);
    - moz - box - shadow: 0 4 px 8 px rgba(0, 0, 0, .06);
    box - shadow: 0 4 px 8 px rgba(0, 0, 0, .06)
}

.page - business.prices.table - responsive::-webkit - scrollbar {
    height: 12 px
}

.page - business.prices.table - responsive::-webkit - scrollbar - track {
    background: #d9d9d9
}

.page - business.prices.table - responsive::-webkit - scrollbar - thumb {
    background: #a6a6a6
}

@ media(min - width: 992 px) {
    .page - business.prices.table - responsive {
        margin - top: 60 px
    }
}

.page - business.prices.prices - table {
    font - size: 15 px;
    color: #a6a6a6;
    - webkit - font - smoothing: subpixel - antialiased
}

.page - business.prices.prices - table td,
.page - business.prices.prices - table th {
    text - align: center;
    vertical - align: middle
}

.page - business.prices.prices - table th {
    padding: 14 px;
    border - bottom: 1 px solid# EAEAEA;
    font - size: 18 px;
    color: #383838;
    background-image: -webkit-linear-gradient(top, # fff 0, #fbfbfb 100 %);
    background - image: -o - linear - gradient(top, #fff 0, #fbfbfb 100 %);
    background - image: linear - gradient(to bottom, #fff 0, #fbfbfb 100 %);
    background - repeat: repeat - x;
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fffbfbfb', GradientType=0);
    - webkit - font - smoothing: antialiased
}

.page - business.prices.prices - table td {
    padding: 15 px;
    border - top - width: 0;
    border - bottom - width: 0;
    width: 240 px
}

.page - business.prices.prices - table td: first - child {
    width: 260 px;
    padding: 15 px 60 px;
    text - align: right;
    font - size: 16 px;
    color: grey
}

.en.page - business.prices.prices - table td: first - child {
    padding: 15 px 50 px
}

.page - business.prices.prices - table tr.group td,
.page - business.prices.prices - table tr: first - child td {
    padding - top: 40 px
}

@ media(max - width: 767 px) {
    .page - business.prices.prices - table tr.group td,
    .page - business.prices.prices - table tr: first - child td {
        padding - top: 30 px
    }
}

.page - business.prices.prices - table tr.group td: first - child,
.page - business.prices.prices - table tr: first - child td: first - child {
    font - weight: 600;
    color: #383838
}

.page-business .prices .prices-table tr:last-child td {
    padding-top: 20px;
    padding-bottom: 30px
}

.page-business .prices .prices-table .icon {
    font-size: 18px
}

.page-business .prices .prices-table .btn {
    min-width: 100px;
    padding: 11px 24px
}

.page-business .prices .prices-table .btn.btn-success {
    background-color: # 8 cc13e;
    border - color: #8cc13e
}

.page-business .prices .prices-table .btn.btn-success:hover {
    background-color: # 97 c751;
    border - color: #97c751
}

.page-business .prices .prices-table .picon-dash {
    display: inline-block;
    width: 18px;
    height: 2px;
    background-color: # b0b0b0
}

.page - business.slide.permissions,
.page - business.slide.statistics {
    background - color: #f7f7f7
}

.page - business.prices.prices - table.blue {
    color: #03a9f4
}

@media (max-width:767px) {
    .page-business .prices .prices-table tr td:first-child {
        text-align: left;
        padding-left: 30px;
        padding-right: 30px
    }
}

.page-business .slide.permissions .img-wrap {
    max-width: 920px
}

.page-deployment .deployment-jumbotron {
    margin-bottom: 0;
    background-color: # f5f6f7;
    background - image: url(.. / images / deployment - jumbotron - bg.png)
}

.page - deployment.deployment - jumbotron.container {
    text - align: center
}

.page - deployment.deployment - jumbotron img.jumbotron - figure {
    width: 100 %;
    max - width: 474 px
}

.page - deployment.deployment - jumbotron h1 {
    height: 30 px;
    text - indent: -9999 px
}

.page - deployment.deployment - jumbotron img.jumbotron - title {
    width: 100 %;
    max - width: 168 px;
    margin - bottom: 30 px
}

.page - deployment.deployment - jumbotron.btn {
    width: 240 px;
    height: 65 px;
    margin - bottom: 16 px;
    font - size: 20 px;
    line - height: 50 px
}

.page - deployment.deployment - jumbotron p {
    margin - bottom: 10 px;
    font - size: 20 px;
    color: #a6a6a6
}

.page - deployment.deployment - jumbotron p.contact - info {
    font - size: 16 px;
    color: #03a9f4
}

.page-deployment .deployment-features {
    padding: 130px 0
}

.page-deployment .deployment-feature {
    margin-bottom: 50px;
    text-align: center
}

.page-deployment .deployment-feature .feature-icon {
    width: 90px;
    height: 90px;
    margin: 0 auto;
    background-image: url(../images/deployment-feature-icons.png);
    background-size: 360px 90px
}

@media (-webkit-min-device-pixel-ratio:2),
(min-resolution:192dpi) {
    .page-deployment .deployment-feature .feature-icon {
        background-image: url(../images/deployment-feature-icons@2x.png)
    }
}

.page-deployment .deployment-feature .feature-icon.cloud {
    background-position: 0 0
}

.page-deployment .deployment-feature .feature-icon.authority {
    background-position: -90px 0
}

.page-deployment .deployment-feature .feature-icon.upgrade {
    background-position: -180px 0
}

.page-deployment .deployment-feature .feature-icon.brand {
    background-position: -270px 0
}

.page-deployment .deployment-feature .feature-title {
    font-size: 20px
}

.page-deployment .deployment-feature .feature-description {
    margin: 0 30px;
    font-size: 16px;
    color: # a6a6a6
}

.page - deployment.deployment - price {
    padding: 0 0 50 px
}

.page - deployment.deployment - price.price - card {
    width: 100 %;
    max - width: 380 px;
    padding: 30 px 0 40 px;
    margin: 0 auto 50 px;
    text - align: center;
    border: 1 px solid# DDD;
    border - radius: 6 px
}

.page - deployment.deployment - price h4 {
    font - size: 24 px
}

.page - deployment.deployment - price h3 {
    font - size: 40 px;
    font - weight: 400
}

.page - deployment.deployment - price.price - icon {
    width: 200 px;
    height: 120 px;
    margin: 50 px auto;
    background - image: url(.. / images / deployment - price - icons.png);
    background - size: 400 px 120 px
}

@ media(-webkit - min - device - pixel - ratio: 2),
(min - resolution: 192 dpi) {
    .page - deployment.deployment - price.price - icon {
        background - image: url(.. / images / deployment - price - icons@ 2 x.png)
    }
}

.page - deployment.deployment - price.price - icon.private - version {
    background - position: 0 0
}

.page - deployment.deployment - price.price - icon.exclusive - version {
    background - position: -200 px 0
}

.page - deployment.deployment - price p {
    font - size: 16 px;
    color: #a6a6a6
}

.page - deployment.contact - button - wrapper {
    padding - bottom: 100 px;
    text - align: center
}

.page - deployment.contact - button - wrapper.btn {
    width: 240 px;
    height: 65 px;
    font - size: 20 px;
    line - height: 50 px
}

.page - deployment.en.deployment - jumbotron img.jumbotron - title {
    max - width: 300 px
}

.developer - jumbotron,
.developer - jumbotron.subcol - nav - bg {
    background - image: url(.. / images / developer - jumbotron - bg.jpg)
}

.developer - jumbotron.zh.container {
    max - width: 780 px
}

.page - developer - open - source.open - source - list {
    margin - bottom: 20 px
}

.page - developer - open - source.open - source - list ul li {
    position: relative;
    padding - bottom: 20 px;
    border - bottom: 1 px solid# ededed;
    margin - bottom: 40 px
}

.page - developer - open - source.open - source - list ul li: last - child {
    border - bottom: none
}

.page - developer - open - source.open - source - list ul li.title {
    display: inline - block
}

.page - developer - open - source.open - source - list ul li.title.icon {
    display: none
}

.page - developer - open - source.open - source - list ul li.title h2 {
    display: inline - block;
    margin: 0 0 15 px
}

.page - developer - open - source.open - source - list ul li.title: hover.icon {
    display: inline - block;
    padding - left: 5 px;
    font - size: 20 px;
    color: #aaa
}

.page - developer - open - source.open - source - list ul li.desc {
    margin - bottom: 15 px;
    font - size: 16 px
}

.page - developer - open - source.open - source - list ul li.language {
    position: absolute;
    top: 7 px;
    right: 0;
    color: #888;
    font-size: 12px;
    font-weight: 700
}

.page-developer-open-source .open-source-list ul li .author {
    float: left;
    display: block;
    margin-right: 15px
}

.page-developer-open-source .open-source-list ul li .author img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    -webkit-transition: all .35s;
    -o-transition: all .35s;
    transition: all .35s
}

.page-developer-open-source .open-source-list ul li .author img:hover {
    opacity: .8
}

.page-developer-open-platform .platform-jumbotron {
    background-color: # fff;
    padding: 100 px 0
}

@ media(min - width: 992 px) {
    .page - developer - open - platform.platform - intro {
        max - width: 540 px
    }
}

@ media(max - width: 991 px) {
    .page - developer - open - platform.platform - jumbotron {
        padding: 50 px 0
    }
    .page - developer - open - platform.platform - intro {
        margin: 0 auto 40 px
    }
    .page - developer - open - platform.platform - intro h1 {
        text - align: center
    }
    .page - developer - open - platform.platform - intro p {
        max - width: 620 px;
        margin: 0 auto 25 px!important
    }
}

.en.page - developer - open - platform.platform - intro {
    max - width: 560 px
}

.page - developer - open - platform.platform - intro h1 {
    margin - top: 0;
    margin - bottom: 25 px;
    font - size: 1.2 rem
}

.en.page - developer - open - platform.platform - intro h1 {
    font - size: 1 rem
}

.page - developer - open - platform.platform - intro p {
    line - height: 28 px;
    margin - bottom: 25 px;
    margin - right: 32 px;
    font - size: 18 px;
    color: #a6a6a6
}

.page - developer - open - platform.platform - intro.buttons - wrap.btn {
    min - width: 195 px
}

.page - developer - open - platform.platform - intro.buttons - wrap.btn + .btn {
    margin - left: 20 px
}

@ media(max - width: 480 px) {
    .page - developer - open - platform.platform - intro.buttons - wrap.btn {
        display: block
    }
    .page - developer - open - platform.platform - intro.buttons - wrap.btn + .btn {
        margin - top: 20 px;
        margin - left: 0
    }
}

.page - developer - open - platform.platform - hreo {
    max - width: 352 px
}

@ media(max - width: 991 px) {
    .page - developer - open - platform.platform - intro.buttons - wrap {
        text - align: center
    }
    .page - developer - open - platform.platform - hreo {
        margin: 0 auto
    }
}

.page - developer - open - platform.platform - cases {
    padding - bottom: 100 px
}

.page - developer - open - platform.platform - cases h2 {
    margin - top: 0;
    text - align: center
}

@ media(min - width: 992 px) {
    .page - developer - open - platform.platform - hreo {
        float: right
    }
    .page - developer - open - platform.platform - cases h2 {
        margin - bottom: 45 px
    }
}

@ media(min - width: 768 px) {
    .page - developer - open - platform.platform - cases[class *=col -] {
        padding - left: 10 px;
        padding - right: 10 px
    }
}

.page - developer - open - platform.platform - cases.card {
    display: block;
    padding: 15 px;
    border: 1 px solid# d9d9d9;
    border - radius: 3 px;
    text - align: center;
    color: grey;
    - webkit - transition: border - color 218 ms;
    - o - transition: border - color 218 ms;
    transition: border - color 218 ms
}

.page - developer - open - platform.platform - cases.card: hover {
    border - color: #03a9f4
}

.page-developer-open-platform .platform-cases .card.contact {
    padding: 24px 10px
}

.page-developer-open-platform .platform-cases .card .nav-icon {
    display: inline-block;
    background-repeat: no-repeat;
    margin-right: 10px
}

@media (max-width:930px) {
    .page-developer-open-platform .platform-cases .card .nav-icon {
        margin-right: 16px
    }
}

.en.page-developer-open-platform .platform-cases .card.with-icon {
    height: 135px!important
}

.en.page-developer-open-platform .platform-cases .card .nav-name {
    margin-top: 10px;
    display: block;
    line-height: 20px
}

.page-developer-open-platform .platform-cases .card .desc {
    margin-bottom: 0;
    font-size: 18px
}

.page-developer-open-platform .platform-cases .card.with-icon {
    height: 105px;
    background-repeat: no-repeat
}

.page-developer-open-platform .platform-cases .card.with-icon.o2o .nav-icon {
    width: 58px;
    height: 58px;
    background-image: url(../images/developer/case-o2o@2x.png);
    background-size: 58px 58px
}

.page-developer-open-platform .platform-cases .card.with-icon.analytics .nav-icon {
    width: 61px;
    height: 57px;
    background-image: url(../images/developer/case-analytics@2x.png);
    background-size: 61px 57px
}

.page-developer-open-platform .platform-cases .card.with-icon.project .nav-icon {
    width: 49px;
    height: 60px;
    background-image: url(../images/developer/case-project@2x.png);
    background-size: 49px 60px
}

.page-developer-open-platform .platform-cases .card.with-icon.smm .nav-icon {
    width: 59px;
    height: 50px;
    background-image: url(../images/developer/case-smm@2x.png);
    background-size: 59px 50px
}

.page-developer-open-platform .platform-cases .card.with-icon .desc {
    position: relative;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    transform: translate(0, -50%)
}

.page-developer-open-platform .platform-cases .card.with-icon .desc>* {
    vertical-align: middle
}

@media (max-width:991px) {
    .page-developer-open-platform .platform-cases {
        padding-top: 0;
        padding-bottom: 16px
    }
    .page-developer-open-platform .platform-cases .card {
        margin-top: 16px
    }
}

.page-developer-open-platform .more-links {
    margin-top: 16px;
    font-size: 18px
}

.page-developer-open-platform .more-links a:not(:last-child) {
    margin-bottom: 16px
}

@media (min-width:768px) {
    .page-developer-open-platform .more-links {
        margin-top: 20px;
        margin-left: -6px;
        margin-right: -6px
    }
    .page-developer-open-platform .more-links a:not(:last-child) {
        margin-bottom: 20px
    }
}

.page-developer-blog .tbsite-list .list-wrap .list-item .main-content {
    padding-left: 15px
}

@media (max-width:768px) {
    .page-developer-open-source .open-source-list {
        padding-top: 5px;
        margin-bottom: 0
    }
    .page-developer-open-source .open-source-list ul li {
        padding-bottom: 15px;
        margin-bottom: 15px
    }
    .page-developer-open-source .open-source-list ul li:last-child {
        padding-bottom: 5px;
        margin-bottom: none
    }
}

@media (min-width:767px) {
    .en .developer-jumbotron {
        font-size: 38px
    }
}

.page-incubator .incubator-jumbotron {
    background-color: transparent
}

.page-incubator .incubator-jumbotron h1 {
    margin-bottom: 50px;
    font-size: 36px;
    line-height: 50px;
    color: # 03 a9f4
}

.page - incubator.incubator - jumbotron.incubator - description {
    margin: auto 150 px 50 px;
    text - align: left;
    font - size: 16 px;
    color: #a6a6a6;
    line - height: 32 px;
    letter - spacing: 1 px
}

.page - incubator.incubator - jumbotron.incubator - highlight {
    height: 176 px;
    margin - left: 150 px;
    margin - right: 150 px;
    background - position: center center;
    background - size: cover;
    background - repeat: no - repeat
}

.page - incubator.incubator - jumbotron.incubator - highlight.zh {
    background - image: url(.. / images / incubator - highlight - image - zh@ 2 x.jpg)
}

.page - incubator.incubator - jumbotron.incubator - highlight.en {
    background - image: url(.. / images / incubator - highlight - image - en@ 2 x.jpg)
}

.page - incubator.incubator - jumbotron.incubator - highlight.ja {
    background - image: url(.. / images / incubator - highlight - image - ja@ 2 x.jpg)
}

.page - incubator.incubator - form {
    margin - left: 150 px;
    margin - right: 150 px
}

.page - incubator.incubator - form.incubator - name select: not(#incubator - name) {
    display: none
}

.page - incubator.incubator - form.btn {
    width: 100 %;
    height: 70 px;
    line - height: 58 px;
    font - size: 24 px
}

.page - incubator.incubator - logos {
    margin: 80 px 70 px 120 px
}

.page - incubator.incubator - logos.incubator - logo {
    background - image: url(.. / images / incubator - logos.jpg)
}

@ media(-webkit - min - device - pixel - ratio: 2),
(min - resolution: 192 dpi) {
    .page - incubator.incubator - logos.incubator - logo {
        background - image: url(.. / images / incubator - logos@ 2 x.jpg)
    }
}

.page - incubator.incubator - logos > li {
    float: left;
    display: block;
    width: 20 %;
    height: 150 px;
    min - width: 200 px
}

.page - incubator.incubator - logos > li a {
    display: inline - block
}

.page - incubator.incubator - logos > li a.incubator - logo {
    -webkit - filter: grayscale(100 %);
    - moz - filter: grayscale(100 %);
    - ms - filter: grayscale(100 %);
    - o - filter: grayscale(100 %);
    opacity: .7;
    filter: alpha(opacity=70);
    - webkit - transition: all 350 ms;
    - o - transition: all 350 ms;
    transition: all 350 ms
}

.page - incubator.incubator - logos > li a: hover.incubator - logo {
    opacity: 1;
    - webkit - filter: grayscale(0);
    - moz - filter: grayscale(0);
    - ms - filter: grayscale(0);
    - o - filter: grayscale(0);
    filter: grayscale(0)
}

.page - incubator.incubator - logos > li.incubator - logo {
    width: 200 px;
    height: 100 px;
    margin: 0 auto;
    background - size: 2200 px 100 px
}

.page - incubator.incubator - logos > li.incubator - logo.tech - temple {
    background - position: 0 0
}

.page - incubator.incubator - logos > li.incubator - logo.innovation - work {
    background - position: -200 px 0
}

.page - incubator.incubator - logos > li.incubator - logo.houDe {
    background - position: -400 px 0
}

.page - incubator.incubator - logos > li.incubator - logo.the - node {
    background - position: -600 px 0
}

.page - incubator.incubator - logos > li.incubator - logo.kr {
    background - position: -800 px 0
}

.page - incubator.incubator - logos > li.incubator - logo.garage - coffee {
    background - position: -1000 px 0
}

.page - incubator.incubator - logos > li.incubator - logo.innovation - community {
    background - position: -1200 px 0
}

.page - incubator.incubator - logos > li.incubator - logo.feiMa {
    background - position: -1400 px 0
}

.page - incubator.incubator - logos > li.incubator - logo.qiDian {
    background - position: -1600 px 0
}

.page - incubator.incubator - logos > li.incubator - logo.more {
    opacity: 1;
    filter: alpha(opacity=100);
    background - position: -1800 px 0
}

.page - incubator.incubator - logos > li.incubator - logo.threew {
    background - position: -2000 px 0
}

.page - incubator.incubator - logos > li.incubator - logo.pkusp {
    opacity: .6;
    filter: alpha(opacity=60);
    background - size: 200 px 100 px;
    background - position: 10 px 0;
    background - image: url(.. / images / incubator - pku.png)
}

.page - incubator.incubator - logos > li.incubator - logo.firebird {
    background - size: 200 px 100 px;
    background - position: 10 px 0;
    background - image: url(.. / images / incubator - firebird.png)
}

.page - incubator.incubator - logos > li.incubator - logo.lvgou {
    background - size: 200 px 100 px;
    background - position: 10 px 0;
    background - image: url(.. / images / incubator - lvgou.png)
}

@ media(max - width: 1199 px) {
    .page - incubator.incubator - form,
    .page - incubator.incubator - jumbotron.incubator - description,
    .page - incubator.incubator - jumbotron.incubator - highlight {
        margin - left: 50 px;
        margin - right: 50 px
    }
}

@ media(max - width: 991 px) {
    .page - incubator.incubator - form,
    .page - incubator.incubator - jumbotron.incubator - description,
    .page - incubator.incubator - jumbotron.incubator - highlight {
        margin - left: 0;
        margin - right: 0
    }
    .page - incubator.incubator - jumbotron.incubator - highlight {
        display: none
    }
    .page - incubator.incubator - logos {
        margin: 120 px 40 px
    }
}

.page - index {
    padding - top: 0
}

.page - index.container - fluid {
    overflow - x: hidden;
    padding - bottom: 16 px
}

@ media(min - width: 1310 px) {
    .page - index.container {
        width: 1310 px
    }
}

.page - index.site - main > * {
    padding: 95 px 0 100 px;
    background - repeat: no - repeat
}

.page - index.site - main > * h1 {
    line - height: 1.2;
    margin - top: 0;
    font - size: 1 rem
}

@ media(max - width: 768 px) {
    .page - index.site - main > * h1 {
        line - height: 1.4;
        font - size: 1.1 rem
    }
}

.page - index.site - main > * p {
    line - height: 1.555;
    font - size: 18 px
}

.page - index.site - main > * .desc {
    margin - top: 20 px;
    margin - bottom: 24 px
}

.page - index.btn.go - to {
    min - width: 200 px
}

.page - index.btn + .btn {
    margin - left: 12 px
}

.page - index.play - white {
    display: inline - block;
    width: 24 px;
    height: 24 px;
    background - image: url(.. / images / index / play - white@ 2 x.png);
    background - size: cover;
    cursor: pointer;
    opacity: .75;
    filter: alpha(opacity=75)
}

.page - index.play - white: hover {
    opacity: 1;
    filter: alpha(opacity=100)
}

.page - index.hover - dark {
    position: relative;
    background: #03a9f4;
    color: # fff;
    overflow: hidden;
    - webkit - transform: translateZ(0);
    - webkit - backface - visibility: hidden;
    - webkit - transition: all 218 ms;
    - o - transition: all 218 ms;
    transition: all 218 ms
}

.page - index.hover - dark: after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100 %;
    height: 100 %;
    background - image: -webkit - linear - gradient(top, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .5) 100 %);
    background - image: -o - linear - gradient(top, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .5) 100 %);
    background - image: linear - gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .5) 100 %);
    background - repeat: repeat - x;
    - webkit - transform: translate3d(0, 50 %, 0);
    transform: translate3d(0, 50 %, 0);
    opacity: 0;
    filter: alpha(opacity=0);
    - webkit - transform: translateZ(0);
    - webkit - backface - visibility: hidden;
    - webkit - transition: all 400 ms;
    - o - transition: all 400 ms;
    transition: all 400 ms
}

.page - index.hover - dark: hover {
    box - shadow: 0 2 px 5 px 0 rgba(0, 0, 0, .16), 0 2 px 10 px 0 rgba(0, 0, 0, .12)
}

.page - index.hover - dark: hover: after {
    -webkit - transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
    filter: alpha(opacity=100)
}

.page - index.visible - xxs {
    display: none
}

@ media(max - width: 480 px) {
    .page - index.visible - xxs {
        display: block
    }
}

.page - index.jumbotron {
    min - height: 700 px;
    padding - top: 350 px;
    margin - bottom: 0;
    background - image: url(.. / images / index / hero.jpg);
    background - position: center top;
    background - size: cover
}

@ media only screen and(-webkit - min - device - pixel - ratio: 2),
only screen and(min--moz - device - pixel - ratio: 2),
only screen and(-o - min - device - pixel - ratio: 2 / 1),
only screen and(min - device - pixel - ratio: 2),
only screen and(min - resolution: 192 dpi),
only screen and(min - resolution: 2 dppx) {
    .page - index.jumbotron {
        background - image: url(.. / images / index / hero@ 2 x.jpg)
    }
}

.page - index.jumbotron h1 {
    font - size: 1.333 rem
}

.page - index.jumbotron.play - blue,
.page - index.jumbotron.play - blue: before {
    display: inline - block;
    position: relative;
    top: 2 px;
    width: 18 px;
    height: 18 px;
    margin - right: 8 px;
    background - image: url(.. / images / index / play - blue@ 2 x.png);
    background - size: 36 px 18 px;
    - webkit - transition: opacity 218 ms;
    - o - transition: opacity 218 ms;
    transition: opacity 218 ms
}

.page - index.jumbotron.play - blue: before {
    content: '';
    top: 0;
    background - position: -18 px 0;
    opacity: 0;
    filter: alpha(opacity=0)
}

.page - index.jumbotron.watch - handler: hover.play - blue: before {
    opacity: 1;
    filter: alpha(opacity=100)
}

.page - index.actions {
    padding: 0!important
}

.page - index.actions.row {
    margin - left: -18 px;
    margin - right: -18 px
}

.page - index.actions[class *=col -] {
    padding - left: 2 px;
    padding - right: 2 px;
    margin - top: 4 px!important
}

.page - index.actions.action {
    display: block;
    min - height: 200 px;
    padding - top: 130 px;
    background: no - repeat# f2f2f2;
    color: #383838;
    cursor: pointer;
    -webkit-transition: box-shadow 218ms;
    -o-transition: box-shadow 218ms;
    transition: box-shadow 218ms
}

.page-index .actions .action:hover {
    background-color: # ebebeb;
    - webkit - box - shadow: 0 2 px 5 px 0 rgba(0, 0, 0, .16), 0 2 px 10 px 0 rgba(0, 0, 0, .12);
    - moz - box - shadow: 0 2 px 5 px 0 rgba(0, 0, 0, .16), 0 2 px 10 px 0 rgba(0, 0, 0, .12);
    box - shadow: 0 2 px 5 px 0 rgba(0, 0, 0, .16), 0 2 px 10 px 0 rgba(0, 0, 0, .12)
}

.page - index.actions.action p {
    margin - bottom: 0
}

.page - index.actions.apps {
    background - image: url(.. / images / index / action - apps@ 2 x.png);
    background - size: 198 px 106 px;
    background - position: center 20 px
}

.page - index.actions.update {
    background - image: url(.. / images / index / action - update@ 2 x.png);
    background - size: 154 px 61 px;
    background - position: center 50 px;
    padding - left: 20 px;
    padding - right: 20 px
}

.page - index.actions.update.new - title {
    display: block;
    overflow: hidden
}

.page - index.actions.case {
    background - image: url(.. / images / index / action -
 case .jpg);
    background - size: cover;
    background - position: top center;
    color: #fff
}

.page - index.actions.case: hover {
    background - image: -webkit - linear - gradient(top, rgba(0, 0, 0, .05) 0, rgba(0, 0, 0, .05) 100 %), url(.. / images / index / action -
 case .jpg);
    background - image: -o - linear - gradient(top, rgba(0, 0, 0, .05) 0, rgba(0, 0, 0, .05) 100 %), url(.. / images / index / action -
 case .jpg);
    background - image: linear - gradient(to bottom, rgba(0, 0, 0, .05) 0, rgba(0, 0, 0, .05) 100 %), url(.. / images / index / action -
 case .jpg)
}

.page - index.actions.case.play - white {
    position: absolute;
    z - index: 3;
    top: 40 px;
    left: 50 %;
    width: 60 px;
    height: 60 px;
    margin - left: -30 px
}

.page - index.actions.research {
    background - image: url(.. / images / index / action - research@ 2 x.png);
    background - size: 77 px 80 px;
    background - position: center 30 px
}

.page - index.features {
    min - height: 640 px;
    padding - top: 85 px;
    background - image: -webkit - linear - gradient(top, rgba(242, 242, 242, 0) 0, #f2f2f2 100 %);
    background - image: -o - linear - gradient(top, rgba(242, 242, 242, 0) 0, #f2f2f2 100 %);
    background - image: linear - gradient(to bottom, rgba(242, 242, 242, 0) 0, #f2f2f2 100 %);
    background - repeat: repeat - x;
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#00f2f2f2', endColorstr='#fff2f2f2', GradientType=0)
}

.page - index.features.container {
    max - width: 1000 px
}

.page - index.features.feature,
.page - index.features h1 {
    margin - bottom: 60 px
}

.page - index.features.feature.feature - icon {
    width: 44 px;
    height: 44 px;
    margin: 0 auto 20 px;
    background - image: url(.. / images / index / feature - icon@ 2 x.png);
    background - size: 352 px 44 px
}

.page - index.features.feature.project.feature - icon {
    background - position: 0 0
}

.page - index.features.feature.task.feature - icon {
    background - position: -44 px 0
}

.page - index.features.feature.wall.feature - icon {
    background - position: -88 px 0
}

.page - index.features.feature.file.feature - icon {
    background - position: -132 px 0
}

.page - index.features.feature.event.feature - icon {
    background - position: -176 px 0
}

.page - index.features.feature.bookkeeping.feature - icon {
    background - position: -220 px 0
}

.page - index.features.feature.news.feature - icon {
    background - position: -264 px 0
}

.page - index.features.feature.review.feature - icon {
    background - position: -308 px 0
}

.page - index.features.feature h4 {
    margin - top: 0;
    margin - bottom: 14 px;
    line - height: 1.2;
    overflow: hidden
}

.page - index.features.feature span {
    display: inline - block;
    max - width: 160 px;
    height: 40 px;
    overflow: hidden;
    color: grey
}

@ media(max - width: 480 px) {
    .page - index.features.feature span {
        height: 60 px;
        overflow: auto
    }
}

.page - index.cases.container {
    max - width: 1208 px
}

.page - index.cases.row {
    margin - left: -4 px;
    margin - right: -4 px
}

.page - index.cases.container,
.page - index.cases[class *=col -] {
    padding - left: 4 px;
    padding - right: 4 px
}

.page - index.cases.cases - list {
    margin - top: 50 px;
    margin - bottom: 50 px
}

@ media(min - width: 768 px) {
    .page - index.cases.cases - list > .col - sm - 5 {
        width: 40 %
    }
    .page - index.cases.cases - list > .col - sm - 7 {
        width: 60 %
    }
}

.page - index.cases.case {
    display: block;
    margin: 4 px 0
}

.page - index.cases.case > img {
    opacity: .95;
    filter: alpha(opacity=95)
}

.page - index.cases.case.cate - name {
    position: absolute;
    z - index: 2;
    bottom: 16 px;
    left: 0;
    line - height: 1;
    padding: 0 20 px;
    margin - bottom: 0;
    font - size: 22 px;
    text - align: left;
    text - shadow: 0 2 px 3 px rgba(0, 0, 0, .5)
}

.page - index.cases.case.teambition.cate - name {
    bottom: 32 px
}

.page - index.cases.case.play - white {
    position: relative;
    top: 3 px;
    margin - right: 12 px
}

.page - index.business {
    min - height: 659 px;
    background - color: #f2f2f2;
    background - image: url(.. / images / index / business - bg.jpg);
    background - size: 1278 px 559 px;
    background - position: center bottom
}

@ media only screen and(-webkit - min - device - pixel - ratio: 2),
only screen and(min--moz - device - pixel - ratio: 2),
only screen and(-o - min - device - pixel - ratio: 2 / 1),
only screen and(min - device - pixel - ratio: 2),
only screen and(min - resolution: 192 dpi),
only screen and(min - resolution: 2 dppx) {
    .page - index.business {
        background - image: url(.. / images / index / business - bg@ 2 x.jpg)
    }
}

.page - index.business.container {
    max - width: 1100 px
}

.page - index.business.desc {
    padding: 10 px 0;
    color: grey
}

.page - index.business.monitor {
    margin - top: 10 px
}

.page - index.media {
    margin - top: 0
}

.page - index.media.container {
    max - width: 1070 px
}

.page - index.media h1 {
    margin - bottom: 30 px
}

.page - index.media.press.quote - wrap {
    max - width: 650 px;
    display: block;
    - webkit - transition: all 400 ms ease 150 ms;
    - o - transition: all 400 ms ease 150 ms;
    transition: all 400 ms ease 150 ms;
    margin: 30 px auto
}

.page - index.media.press.quote - item {
    width: 100 %;
    - webkit - backface - visibility: hidden;
    - moz - backface - visibility: hidden;
    backface - visibility: hidden;
    - webkit - transition: all 280 ms;
    - o - transition: all 280 ms;
    transition: all 280 ms
}

.page - index.media.press.quote - item p {
    font - size: .78 rem;
    margin - bottom: 0
}

.page - index.media.press.quote - item a {
    color: grey
}

.page - index.media.press.quote - item a: hover {
    color: #383838
}

.page-index .media .press .quote-handlerset {
    max-width: 860px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    padding: 30px 0;
    margin-bottom: 20px
}

.page-index .media .press .quote-handlerset:before {
    content: ' ';
    display: block;
    position: absolute;
    top: 0;
    width: 100%;
    height: 1px;
    background: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .06) 7%, rgba(0, 0, 0, .06) 93%, rgba(0, 0, 0, 0) 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0, rgba(0, 0, 0, 0)), color-stop(7%, rgba(0, 0, 0, .06)), color-stop(93%, rgba(0, 0, 0, .06)), color-stop(100%, rgba(0, 0, 0, 0)));
    background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .06) 7%, rgba(0, 0, 0, .06) 93%, rgba(0, 0, 0, 0) 100%);
    background: -ms-linear-gradient(left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .06) 7%, rgba(0, 0, 0, .06) 93%, rgba(0, 0, 0, 0) 100%);
    background: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .06) 7%, rgba(0, 0, 0, .06) 93%, rgba(0, 0, 0, 0) 100%)
}

.page-index .media .press .quote-handlerset .cursor {
    position: absolute;
    width: 16px;
    height: 16px;
    border: 1px solid;
    background: # fff;
    border - color: transparent transparent rgba(0, 0, 0, .06) rgba(0, 0, 0, .06);
    - webkit - transform: rotate(315 deg);
    - ms - transform: rotate(315 deg);
    - o - transform: rotate(315 deg);
    transform: rotate(315 deg);
    - webkit - transition: all 280 ms;
    - o - transition: all 280 ms;
    transition: all 280 ms;
    left: 56 px;
    top: -8 px
}

@ media(min - width: 900 px) {
    .page - index.media.press.quote - handlerset {
        text - align: left
    }
    .page - index.media.press.quote - handlerset.sm - breaker {
        display: none
    }
    .page - index.media.press.quote - handlerset.inner - handlerset {
        padding: 0 40 px
    }
}

.page - index.media.press.quote - handler {
    display: inline - block;
    height: 35 px;
    line - height: 35 px;
    margin - bottom: 20 px;
    cursor: pointer;
    background - repeat: no - repeat;
    background - position: left center;
    opacity: .3;
    filter: alpha(opacity=30);
    - webkit - transition: all 218 ms;
    - o - transition: all 218 ms;
    transition: all 218 ms;
    margin - left: 49 px
}

.page - index.media.press.quote - handler: first - child {
    margin - left: 0
}

.page - index.media.press.quote - handler.is - current,
.page - index.media.press.quote - handler: hover {
    opacity: 1;
    filter: alpha(opacity=100)
}

.page - index.media.press.quote - handler.tskr {
    width: 49 px;
    background - size: 49 px 27 px;
    background - image: url(.. / images / index / quote - 36 kr.png)
}

.page - index.media.press.quote - handler.pingwest {
    width: 125 px;
    background - size: 125 px 23 px;
    background - image: url(.. / images / index / quote - pingwest.png)
}

.page - index.media.press.quote - handler.cyzone {
    width: 76 px;
    background - size: 76 px 35 px;
    background - image: url(.. / images / index / quote - cyzone.png)
}

.page - index.media.press.quote - handler.cbnweek {
    width: 85 px;
    background - size: 85 px 25 px;
    background - image: url(.. / images / index / quote - cbnweek.png)
}

.page - index.media.press.quote - handler.forbes {
    width: 88 px;
    background - size: 88 px 24 px;
    background - image: url(.. / images / index / quote - forbes.png)
}

.page - index.media.press.quote - handler.zuimei {
    width: 89 px;
    background - size: 89 px 24 px;
    background - image: url(.. / images / index / quote - zuimei.png)
}

@ media(max - width: 899 px) {
    .page - index.media.press.quote - handler: nth - child(5) {
        margin - left: 0
    }
}

@ media(max - width: 480 px) {
    .page - index.media.press.quote - handler {
        margin - left: 19 px
    }
}

@ media(max - width: 340 px) {
    .page - index.media.press.quote - handler {
        -webkit - transform: scale(.8);
        - ms - transform: scale(.8);
        - o - transform: scale(.8);
        transform: scale(.8);
        margin - left: 0
    }
}

.page - index.goto - work {
    min - height: 570 px
}

.page - index.goto - work,
.page - index.goto - work.container - fluid {
    position: relative;
    padding: 0!important;
    overflow: hidden
}

.page - index.goto - work.full - video - wrap {
    position: absolute;
    left: 0;
    top: 0;
    z - index: 12;
    width: 100 %;
    - webkit - transition: all 2000 ms;
    - o - transition: all 2000 ms;
    transition: all 2000 ms
}

.page - index.goto - work.full - video - wrap.video - close {
    position: absolute;
    z - index: 13;
    right: 18 px;
    top: 20 px;
    width: 50 px;
    height: 50 px;
    border - radius: 50 %;
    color: rgba(255, 255, 255, .5);
    line - height: 50 px;
    text - align: center;
    cursor: pointer;
    font - size: 16 px;
    - webkit - transition: all 218 ms;
    - o - transition: all 218 ms;
    transition: all 218 ms
}

.page - index.goto - work.full - video - wrap.video - close: hover {
    color: #fff;
    background - color: rgba(255, 255, 255, .2)
}

.page - index.goto - work.full - video - wrap.is - stop {
    opacity: 0;
    z - index: -1
}

.page - index.goto - work.full - video - wrap.is - pause,
.page - index.goto - work.full - video - wrap.is - start {
    opacity: 1
}

.page - index.goto - work.demo - video - banner {
    position: relative
}

.page - index.goto - work.demo - video - banner.is - stop.slogan,
.page - index.goto - work.demo - video - banner.is - stop.title {
    opacity: 0;
    - webkit - transform: translate(0, 40 %);
    - ms - transform: translate(0, 40 %);
    - o - transform: translate(0, 40 %);
    transform: translate(0, 40 %);
    - webkit - transition - delay: 300 ms;
    transition - delay: 300 ms
}

.page - index.goto - work.demo - video - banner.is - stop.slogan {
    -webkit - transition - delay: 600 ms;
    transition - delay: 600 ms
}

.page - index.goto - work.demo - video - banner.is - stop.link - reg,
.page - index.goto - work.demo - video - banner.is - stop.start - handler {
    opacity: 0
}

.page - index.goto - work.demo - video - banner.is - stop.embed - responsive: after {
    bottom: 1 px
}

.page - index.goto - work.demo - video - banner.is - start.title {
    -webkit - transition - delay: 1000 ms;
    transition - delay: 1000 ms
}

.page - index.goto - work.demo - video - banner.is - start.link - reg,
.page - index.goto - work.demo - video - banner.is - start.start - handler {
    -webkit - transition - delay: 2600 ms;
    transition - delay: 2600 ms
}

.page - index.goto - work.demo - video - banner.is - start.link - reg: hover,
.page - index.goto - work.demo - video - banner.is - start.start - handler: hover {
    -webkit - transition - delay: 500 ms;
    transition - delay: 500 ms
}

.page - index.goto - work.demo - video - banner.is - started.animate - obj {
    -webkit - transition: all 218 ms;
    - o - transition: all 218 ms;
    transition: all 218 ms
}

.page - index.goto - work.banner - content {
    position: absolute;
    z - index: 11;
    top: 50 %;
    width: 100 %;
    height: 570 px;
    - webkit - transform: translate(0, -50 %);
    - ms - transform: translate(0, -50 %);
    - o - transform: translate(0, -50 %);
    transform: translate(0, -50 %)
}

.page - index.goto - work.animate - obj {
    color: #fff;
    - webkit - transition: all 1300 ms;
    - o - transition: all 1300 ms;
    transition: all 1300 ms
}

.page - index.goto - work.slogan {
    font - size: 20 px;
    padding - top: 70 px;
    margin - bottom: 20 px;
    letter - spacing: 1 px
}

.page - index.goto - work.title {
    font - size: 40 px;
    margin - bottom: 90 px;
    letter - spacing: 3 px
}

.fontsz,
.page - info - team.members - list.member.simple - info.name {
    letter - spacing: 1 px
}

.page - index.goto - work.img - icon - video {
    width: 70 px;
    height: 70 px;
    background - image: url(.. / images / index / img - icon - video@ 2 x.png);
    background - size: 70 px 70 px;
    margin: 0 auto 100 px;
    opacity: .7;
    cursor: pointer
}

.page - index.goto - work.img - icon - video: hover {
    opacity: .9
}

.page - index.goto - work.link - reg {
    padding: 12 px 25 px;
    opacity: .9
}

.page - index.goto - work.img - icon - video,
.page - index.goto - work.link - reg {
    -webkit - transition - duration: 900 ms;
    transition - duration: 900 ms
}

.page - index.goto - work.video - mask {
    position: relative
}

.page - index.goto - work.video - mask.embed - responsive: after {
    content: '';
    display: block;
    position: absolute;
    width: 100 %;
    height: 100 %;
    background - color: rgba(0, 0, 0, .4)
}

@ media(max - width: 1080 px) {
    .page - index.goto - work.embed - responsive.embed - responsive - 16 by9 {
        padding - bottom: 0;
        width: 1084 px;
        height: 610 px
    }
}

.page - index: not(.en).enjoy - tb {
    display: none
}

@ media(min - width: 768 px) {
    .page - index.cases h1 {
        line - height: 50 px
    }
}

@ media(min - width: 768 px) and(max - width: 1199 px) {
    .page - index.business h1 {
        font - size: .9 rem
    }
}

@ media(min - width: 992 px) {
    .page - index.business.intro {
        max - width: 540 px
    }
}

@ media(min - width: 1441 px) {
    .page - index.jumbotron {
        padding - top: 470 px;
        min - height: 900 px;
        background - image: url(.. / images / index / hero - lg.jpg)
    }
    .page - index.jumbotron h1 {
        font - size: 1.6 rem
    }
    .page - index.jumbotron.desc {
        font - size: 20 px
    }
}

@ media(min - width: 1441 px) and(max - width: 1920 px) {
    .page - index.jumbotron {
        background - size: 1920 px 900 px;
        background - position: center top
    }
}

@ media(max - width: 991 px) {
    .page - index.goto - work {
        display: none
    }
    .page - index: not(.en).enjoy - tb {
        display: block
    }
    .page - index.site - main >: not(.jumbotron): not(.enjoy - tb) {
        padding: 50 px 0
    }
    .page - index.col - md - 6 + .col - md - 6 > * {
        padding - top: 50 px;
        margin - top: 50 px;
        border - top: 2 px dashed# c2c2c2
    }
    .page - index.business.scale - xs {
        display: block;
        margin - left: auto;
        margin - right: auto;
        text - align: center;
        max - width: 800 px
    }
    .page - index.media.press h1 {
        margin - bottom: 15 px
    }
    .page - index.media.press.quote - wrap {
        margin - top: 15 px;
        margin - bottom: 25 px
    }
    .page - index.media.press.quote - handlerset {
        padding - bottom: 0;
        margin - bottom: 0
    }
}

@ media(max - width: 991 px) and(min - width: 481 px) {
    .page - index.business.scale - xs {
        width: 91 %
    }
}

@ media(max - width: 991 px) and(max - width: 480 px) {
    .page - index.media.press.quote - wrap {
        margin - bottom: 20 px
    }
}

@ media(max - width: 768 px) {
    .page - index.jumbotron {
        padding - top: 340 px;
        background - position: center 50 px
    }
    .page - index.btn.go - to {
        width: 80 %;
        max - width: 400 px
    }
}

@ media(max - width: 480 px) {
    .page - index.site - main > * .desc {
        font - size: 16 px;
        margin - top: 10 px;
        margin - bottom: 15 px
    }
    .page - index.jumbotron {
        min - height: 680 px;
        padding - top: 350 px;
        padding - bottom: 80 px
    }
    .page - index.jumbotron.btn {
        margin - left: 0!important;
        width: 80 %
    }
    .page - index.jumbotron.btn + .btn {
        margin - top: 20 px
    }
    .page - index.actions.col - xs - 6 {
        width: 100 %
    }
    .page - index.features.feature {
        margin - bottom: 30 px
    }
    .page - index.business {
        min - height: 689 px
    }
    .page - index.business.en - business {
        min - height: 740 px
    }
    .page - index.features.col - xs - 4 {
        width: 50 %
    }
}

@ media(max - width: 480 px) and(min - width: 375 px) {
    .page - index.jumbotron h1 {
        line - height: 1.2;
        font - size: 1.4 rem
    }
}

@ media(max - width: 375 px) {
    .page - index.jumbotron h1 {
        font - size: 1.15 rem
    }
    .page - index.cases h1 {
        font - size: .8 rem
    }
}

@ media(max - width: 340 px) {
    .page - index.jumbotron.desc {
        font - size: 15 px
    }
}

@ media(max - width: 320 px) {
    .page - index.business h1 {
        font - size: 1.05 rem
    }
    .page - index.cases.case.cate - name {
        font - size: 18 px
    }
}

.info - jumbotron.subcol - nav li {
    width: 16.66 % !important
}

@ media(min - width: 768 px) {
    .en.info - jumbotron.subcol - nav li: first - child a {
        font - size: 17 px
    }
}

.info - news - jumbotron,
.info - news - jumbotron.subcol - nav - bg {
    background - image: url(.. / images / info - news - jumbotron - bg.jpg)
}

.info - member - jumbotron,
.info - member - jumbotron.subcol - nav - bg,
.info - team - jumbotron,
.info - team - jumbotron.subcol - nav - bg {
    background - image: url(.. / images / info - team - jumbotron - bg.jpg)
}

.info - jobs - jumbotron,
.info - jobs - jumbotron.subcol - nav - bg {
    background - image: url(.. / images / info - jobs - jumbotron - bg.jpg)
}

.info - contactus - jumbotron,
.info - contactus - jumbotron.subcol - nav - bg {
    background - image: url(.. / images / info - contactus - jumbotron - bg.jpg)
}

.info - press - jumbotron,
.info - press - jumbotron.subcol - nav - bg {
    background - image: url(.. / images / info - press - jumbotron - bg.jpg)
}

.info - partners - jumbotron,
.info - partners - jumbotron.subcol - nav - bg {
    background - image: url(.. / images / info - partners - jumbotron - bg.jpg)
}

.fontsz {
    font - size: 1.1e m
}

.page - info - team.site - main {
    overflow: hidden
}

.page - info - team.members - list {
    font: 400 17 px / 1.7e m "Open Sans", open - sans, sans - serif;
    - webkit - transform - origin: left top;
    - moz - transform - origin: left top;
    - ms - transform - origin: left top;
    transform - origin: left top
}

.page - info - team.members - list.member {
    float: left;
    width: 188 px;
    height: 188 px;
    margin: 0 9 px 9 px 0;
    cursor: pointer
}

.page - info - team.members - list.member# junyuan {
    background: url(.. / images / team - members / junyuan - oclock.jpg) - 1 px - 2281 px
}

.page - info - team.members - list.member# qianglee {
    background: url(.. / images / team - members / qianglee - oclock.jpg) - 1 px - 2281 px
}

.page - info - team.members - list.member# shirejiang {
    background: url(.. / images / team - members / shirejiang - oclock.jpg) - 1 px - 2281 px
}

.page - info - team.members - list.member# shaojing {
    background: url(.. / images / team - members / shaojing - oclock.jpg) - 1 px - 2281 px
}

.page - info - team.members - list.member# yaqian {
    background: url(.. / images / team - members / yaqian - oclock.jpg) - 1 px - 2281 px
}

.page - info - team.members - list.member# zhuoqun {
    background: url(.. / images / team - members / zhuoqun - oclock.jpg) - 1 px - 2281 px
}

.page - info - team.members - list.member# zhaojie {
    background: url(.. / images / team - members / zhaojie - oclock.jpg) - 1 px - 2281 px
}

.page - info - team.members - list.member# tongbin {
    background: url(.. / images / team - members / tongbin - oclock.jpg) - 1 px - 2281 px
}

.page - info - team.members - list.member# zensh {
    background: url(.. / images / team - members / zensh - oclock.jpg) - 1 px - 2281 px
}

.page - info - team.members - list.member# jingxin {
    background: url(.. / images / team - members / jingxin - oclock.jpg) - 1 px - 2281 px
}

.page - info - team.members - list.member# yuhan {
    background: url(.. / images / team - members / yuhan - oclock.jpg) - 1 px - 2281 px
}

.page - info - team.members - list.member# xuanying {
    background: url(.. / images / team - members / xuanying - oclock.jpg) - 1 px - 2281 px
}

.page - info - team.members - list.member# yiwen {
    background: url(.. / images / team - members / yiwen - oclock.jpg) - 1 px - 2281 px
}

.page - info - team.members - list.member# ziqiu {
    background: url(.. / images / team - members / ziqiu - oclock.jpg) - 1 px - 2281 px
}

.page - info - team.members - list.member# xiaolian {
    background: url(.. / images / team - members / xiaolian - oclock.jpg) - 1 px - 2281 px
}

.page - info - team.members - list.member# zhanglu {
    background: url(.. / images / team - members / zhanglu - oclock.jpg) - 1 px - 2281 px
}

.page - info - team.members - list.member# junguan {
    background: url(.. / images / team - members / junguan - oclock.jpg) - 1 px - 2281 px
}

.page - info - team.members - list.member# linghao {
    background: url(.. / images / team - members / linghao - oclock.jpg) - 1 px - 2281 px
}

.page - info - team.members - list.member# huaqiao {
    background: url(.. / images / team - members / huaqiao - oclock.jpg) - 1 px - 2281 px
}

.page - info - team.members - list.member# qinglian {
    background: url(.. / images / team - members / qinglian - oclock.jpg) - 1 px - 2281 px
}

.page - info - team.members - list.member# haiqin {
    background: url(.. / images / team - members / haiqin - oclock.jpg) - 1 px - 2281 px
}

.page - info - team.members - list.member# zitian {
    background: url(.. / images / team - members / zitian - oclock.jpg) - 1 px - 2281 px
}

.page - info - team.members - list.member# fanwei {
    background: url(.. / images / team - members / fanwei - oclock.jpg) - 1 px - 2281 px
}

.page - info - team.members - list.member# zhixu {
    background: url(.. / images / team - members / zhixu - oclock.jpg) - 1 px - 2281 px
}

.page - info - team.members - list.member# yanping {
    background: url(.. / images / team - members / yanping - oclock.jpg) - 1 px - 2281 px
}

.page - info - team.members - list.member# dongxiao {
    background: url(.. / images / team - members / dongxiao - oclock.jpg) - 1 px - 2281 px
}

.page - info - team.members - list.member# xieyao {
    background: url(.. / images / team - members / xieyao - oclock.jpg) - 1 px - 2281 px
}

.page - info - team.members - list.member# chenli {
    background: url(.. / images / team - members / chenli - oclock.jpg) - 1 px - 2281 px
}

.page - info - team.members - list.member# liangming {
    background: url(.. / images / team - members / liangming - oclock.jpg) - 1 px - 2281 px
}

.page - info - team.members - list.member# zhenwei {
    background: url(.. / images / team - members / zhenwei - oclock.jpg) - 1 px - 2281 px
}

.page - info - team.members - list.member# yangjun {
    background: url(.. / images / team - members / yangjun - oclock.jpg) - 1 px - 2281 px
}

.page - info - team.members - list.member# chensong {
    background: url(.. / images / team - members / chensong - oclock.jpg) - 1 px - 2281 px
}

.page - info - team.members - list.member# sunebear {
    background: url(.. / images / team - members / sunebear - oclock.jpg) - 1 px - 2281 px
}

.page - info - team.members - list.member# chenyong {
    background: url(.. / images / team - members / chenyong - oclock.jpg) - 1 px - 2281 px
}

.page - info - team.members - list.member# yinan {
    background: url(.. / images / team - members / yinan - oclock.jpg) - 1 px - 2281 px
}

.page - info - team.members - list.member# taian {
    background: url(.. / images / team - members / taian - oclock.jpg) - 1 px - 2281 px
}

.page - info - team.members - list.member# zhaoxing {
    background: url(.. / images / team - members / zhaoxing - oclock.jpg) - 1 px - 2281 px
}

.page - info - team.members - list.member# ruoxin {
    background: url(.. / images / team - members / ruoxin - oclock.jpg) - 1 px - 2281 px
}

.page - info - team.members - list.member# zhaoyong {
    background: url(.. / images / team - members / zhaoyong - oclock.jpg) - 1 px - 2281 px
}

.page - info - team.members - list.member# kangjun {
    background: url(.. / images / team - members / kangjun - oclock.jpg) - 1 px - 2281 px
}

.page - info - team.members - list.member# junfeng {
    background: url(.. / images / team - members / junfeng - oclock.jpg) - 1 px - 2281 px
}

.page - info - team.members - list.member# caoyang {
    background: url(.. / images / team - members / caoyang - oclock.jpg) - 1 px - 2281 px
}

.page - info - team.members - list.member# chenyouxi {
    background: url(.. / images / team - members / chenyouxi - oclock.jpg) - 1 px - 2281 px
}

.page - info - team.members - list.member# jixiaoshun {
    background: url(.. / images / team - members / jixiaoshun - oclock.jpg) - 1 px - 2281 px
}

.page - info - team.members - list.member# lilei {
    background: url(.. / images / team - members / lilei - oclock.jpg) - 1 px - 2281 px
}

.page - info - team.members - list.member# liucheng {
    background: url(.. / images / team - members / liucheng - oclock.jpg) - 1 px - 2281 px
}

.page - info - team.members - list.member# shidanqing {
    background: url(.. / images / team - members / shidanqing - oclock.jpg) - 1 px - 2281 px
}

.page - info - team.members - list.member# shitao {
    background: url(.. / images / team - members / shitao - oclock.jpg) - 1 px - 2281 px
}

.page - info - team.members - list.member# wangwei {
    background: url(.. / images / team - members / wangwei - oclock.jpg) - 1 px - 2281 px
}

.page - info - team.members - list.member# wangzhixian {
    background: url(.. / images / team - members / wangzhixian - oclock.jpg) - 1 px - 2281 px
}

.page - info - team.members - list.member# zhanglin {
    background: url(.. / images / team - members / zhanglin - oclock.jpg) - 1 px - 2281 px
}

.page - info - team.members - list.member# zhangminghua {
    background: url(.. / images / team - members / zhangminghua - oclock.jpg) - 1 px - 2281 px
}

.page - info - team.members - list.member.back {
    position: relative;
    height: 188 px;
    color: #fff
}

.page - info - team.members - list.member.back.simple - info {
    display: block
}

.page - info - team.members - list.member.back: after {
    content: '';
    position: absolute;
    z - index: 1;
    width: 100 %;
    height: 100 %;
    background - color: rgba(34, 42, 51, .9) !important
}

.page - info - team.members - list.member.simple - info {
    display: none;
    position: absolute;
    z - index: 2;
    bottom: 0;
    width: 100 %;
    padding: 20 px
}

.page - info - team.members - list.member.simple - info.post {
    font - style: italic;
    - webkit - font - smoothing: antialiased
}

.page - info - team.members - list.member.simple - info.more {
    padding - top: 7 px;
    margin - top: 8 px;
    border - top: 1 px solid rgba(255, 255, 255, .1);
    - webkit - font - smoothing: antialiased
}

.page - info - team.members - list.member.simple - info.more: after,
.page - info - team.members - list.member.simple - info.more: before {
    content: " ";
    display: table
}

.page - info - team.members - list.member.simple - info p {
    margin - bottom: 0
}

.page - info - team.members - list.member.simple - info a {
    float: left;
    width: 100 %;
    color: #fff;
    opacity: .7;
    cursor: pointer
}

.page - info - team.members - list.member.simple - info a: hover {
    opacity: 1
}

.page - info - team.members - list.member.simple - info a.icon {
    font - size: 14 px;
    float: right;
    margin - right: -3 px
}

@ media(min - width: 992 px) {
    .page - info - team.site - main {
        margin - bottom: 50 px
    }
}

@ media(max - width: 991 px) {
    .page - info - team.site - main {
        margin - bottom: 10 px
    }
}

@ media(min - width: 1100 px) {
    .page - info - team.site - main.container {
        width: 1100 px
    }
    .page - info - team.member: nth - child(5 n) {
        margin - right: 0
    }
}

@ media(max - width: 1099 px) and(min - width: 816 px) {
    .page - info - team.site - main.container {
        width: 811 px
    }
    .page - info - team.member: nth - child(4 n) {
        margin - right: 0
    }
}

@ media(max - width: 815 px) {
    .page - info - team.site - main.container {
        width: 614 px
    }
    .page - info - team.member: nth - child(3 n) {
        margin - right: 0
    }
}

@ media(max - width: 607 px) {
    .page - info - team.site - main {
        height: 3703.95 px
    }
    .page - info - team.members - list {
        -webkit - transform: scale(.991686);
        - ms - transform: scale(.991686);
        - o - transform: scale(.991686);
        transform: scale(.991686)
    }
}

@ media(max - width: 602 px) {
    .page - info - team.site - main {
        height: 3672.89 px
    }
    .page - info - team.members - list {
        -webkit - transform: scale(.983372);
        - ms - transform: scale(.983372);
        - o - transform: scale(.983372);
        transform: scale(.983372)
    }
}

@ media(max - width: 597 px) {
    .page - info - team.site - main {
        height: 3641.84 px
    }
    .page - info - team.members - list {
        -webkit - transform: scale(.975058);
        - ms - transform: scale(.975058);
        - o - transform: scale(.975058);
        transform: scale(.975058)
    }
}

@ media(max - width: 592 px) {
    .page - info - team.site - main {
        height: 3610.79 px
    }
    .page - info - team.members - list {
        -webkit - transform: scale(.966744);
        - ms - transform: scale(.966744);
        - o - transform: scale(.966744);
        transform: scale(.966744)
    }
}

@ media(max - width: 587 px) {
    .page - info - team.site - main {
        height: 3579.74 px
    }
    .page - info - team.members - list {
        -webkit - transform: scale(.95843);
        - ms - transform: scale(.95843);
        - o - transform: scale(.95843);
        transform: scale(.95843)
    }
}

@ media(max - width: 582 px) {
    .page - info - team.site - main {
        height: 3548.68 px
    }
    .page - info - team.members - list {
        -webkit - transform: scale(.950116);
        - ms - transform: scale(.950116);
        - o - transform: scale(.950116);
        transform: scale(.950116)
    }
}

@ media(max - width: 577 px) {
    .page - info - team.site - main {
        height: 3517.63 px
    }
    .page - info - team.members - list {
        -webkit - transform: scale(.941802);
        - ms - transform: scale(.941802);
        - o - transform: scale(.941802);
        transform: scale(.941802)
    }
}

@ media(max - width: 572 px) {
    .page - info - team.site - main {
        height: 3486.58 px
    }
    .page - info - team.members - list {
        -webkit - transform: scale(.933488);
        - ms - transform: scale(.933488);
        - o - transform: scale(.933488);
        transform: scale(.933488)
    }
}

@ media(max - width: 567 px) {
    .page - info - team.site - main {
        height: 3455.52 px
    }
    .page - info - team.members - list {
        -webkit - transform: scale(.925174);
        - ms - transform: scale(.925174);
        - o - transform: scale(.925174);
        transform: scale(.925174)
    }
}

@ media(max - width: 562 px) {
    .page - info - team.site - main {
        height: 3424.47 px
    }
    .page - info - team.members - list {
        -webkit - transform: scale(.91686);
        - ms - transform: scale(.91686);
        - o - transform: scale(.91686);
        transform: scale(.91686)
    }
}

@ media(max - width: 557 px) {
    .page - info - team.site - main {
        height: 3393.42 px
    }
    .page - info - team.members - list {
        -webkit - transform: scale(.908546);
        - ms - transform: scale(.908546);
        - o - transform: scale(.908546);
        transform: scale(.908546)
    }
}

@ media(max - width: 552 px) {
    .page - info - team.site - main {
        height: 3362.37 px
    }
    .page - info - team.members - list {
        -webkit - transform: scale(.900232);
        - ms - transform: scale(.900232);
        - o - transform: scale(.900232);
        transform: scale(.900232)
    }
}

@ media(max - width: 547 px) {
    .page - info - team.site - main {
        height: 3331.31 px
    }
    .page - info - team.members - list {
        -webkit - transform: scale(.891918);
        - ms - transform: scale(.891918);
        - o - transform: scale(.891918);
        transform: scale(.891918)
    }
}

@ media(max - width: 542 px) {
    .page - info - team.site - main {
        height: 3300.26 px
    }
    .page - info - team.members - list {
        -webkit - transform: scale(.883604);
        - ms - transform: scale(.883604);
        - o - transform: scale(.883604);
        transform: scale(.883604)
    }
}

@ media(max - width: 537 px) {
    .page - info - team.site - main {
        height: 3269.21 px
    }
    .page - info - team.members - list {
        -webkit - transform: scale(.87529);
        - ms - transform: scale(.87529);
        - o - transform: scale(.87529);
        transform: scale(.87529)
    }
}

@ media(max - width: 532 px) {
    .page - info - team.site - main {
        height: 3238.16 px
    }
    .page - info - team.members - list {
        -webkit - transform: scale(.866976);
        - ms - transform: scale(.866976);
        - o - transform: scale(.866976);
        transform: scale(.866976)
    }
}

@ media(max - width: 527 px) {
    .page - info - team.site - main {
        height: 3207.1 px
    }
    .page - info - team.members - list {
        -webkit - transform: scale(.858662);
        - ms - transform: scale(.858662);
        - o - transform: scale(.858662);
        transform: scale(.858662)
    }
}

@ media(max - width: 522 px) {
    .page - info - team.site - main {
        height: 3176.05 px
    }
    .page - info - team.members - list {
        -webkit - transform: scale(.850348);
        - ms - transform: scale(.850348);
        - o - transform: scale(.850348);
        transform: scale(.850348)
    }
}

@ media(max - width: 517 px) {
    .page - info - team.site - main {
        height: 3145 px
    }
    .page - info - team.members - list {
        -webkit - transform: scale(.842034);
        - ms - transform: scale(.842034);
        - o - transform: scale(.842034);
        transform: scale(.842034)
    }
}

@ media(max - width: 512 px) {
    .page - info - team.site - main {
        height: 3113.94 px
    }
    .page - info - team.members - list {
        -webkit - transform: scale(.83372);
        - ms - transform: scale(.83372);
        - o - transform: scale(.83372);
        transform: scale(.83372)
    }
}

@ media(max - width: 507 px) {
    .page - info - team.site - main {
        height: 3082.89 px
    }
    .page - info - team.members - list {
        -webkit - transform: scale(.825406);
        - ms - transform: scale(.825406);
        - o - transform: scale(.825406);
        transform: scale(.825406)
    }
}

@ media(max - width: 502 px) {
    .page - info - team.site - main {
        height: 3051.84 px
    }
    .page - info - team.members - list {
        -webkit - transform: scale(.817092);
        - ms - transform: scale(.817092);
        - o - transform: scale(.817092);
        transform: scale(.817092)
    }
}

@ media(max - width: 497 px) {
    .page - info - team.site - main {
        height: 3020.79 px
    }
    .page - info - team.members - list {
        -webkit - transform: scale(.808778);
        - ms - transform: scale(.808778);
        - o - transform: scale(.808778);
        transform: scale(.808778)
    }
}

@ media(max - width: 492 px) {
    .page - info - team.site - main {
        height: 2989.73 px
    }
    .page - info - team.members - list {
        -webkit - transform: scale(.800464);
        - ms - transform: scale(.800464);
        - o - transform: scale(.800464);
        transform: scale(.800464)
    }
}

@ media(max - width: 487 px) {
    .page - info - team.site - main {
        height: 2958.68 px
    }
    .page - info - team.members - list {
        -webkit - transform: scale(.79215);
        - ms - transform: scale(.79215);
        - o - transform: scale(.79215);
        transform: scale(.79215)
    }
}

@ media(max - width: 482 px) {
    .page - info - team.site - main {
        height: 2927.63 px
    }
    .page - info - team.members - list {
        -webkit - transform: scale(.783836);
        - ms - transform: scale(.783836);
        - o - transform: scale(.783836);
        transform: scale(.783836)
    }
}

@ media(max - width: 480 px) {
    .page - info - team.site - main {
        height: 2894.63 px
    }
    .page - info - team.members - list {
        -webkit - transform: scale(.775);
        - ms - transform: scale(.775);
        - o - transform: scale(.775);
        transform: scale(.775)
    }
}

@ media(max - width: 475 px) {
    .page - info - team.site - main {
        height: 2862.5 px
    }
    .page - info - team.members - list {
        -webkit - transform: scale(.7664);
        - ms - transform: scale(.7664);
        - o - transform: scale(.7664);
        transform: scale(.7664)
    }
}

@ media(max - width: 470 px) {
    .page - info - team.site - main {
        height: 2830.38 px
    }
    .page - info - team.members - list {
        -webkit - transform: scale(.7578);
        - ms - transform: scale(.7578);
        - o - transform: scale(.7578);
        transform: scale(.7578)
    }
}

@ media(max - width: 465 px) {
    .page - info - team.site - main {
        height: 2798.26 px
    }
    .page - info - team.members - list {
        -webkit - transform: scale(.7492);
        - ms - transform: scale(.7492);
        - o - transform: scale(.7492);
        transform: scale(.7492)
    }
}

@ media(max - width: 460 px) {
    .page - info - team.site - main {
        height: 2766.14 px
    }
    .page - info - team.members - list {
        -webkit - transform: scale(.7406);
        - ms - transform: scale(.7406);
        - o - transform: scale(.7406);
        transform: scale(.7406)
    }
}

@ media(max - width: 455 px) {
    .page - info - team.site - main {
        height: 2734.02 px
    }
    .page - info - team.members - list {
        -webkit - transform: scale(.732);
        - ms - transform: scale(.732);
        - o - transform: scale(.732);
        transform: scale(.732)
    }
}

@ media(max - width: 450 px) {
    .page - info - team.site - main {
        height: 2701.9 px
    }
    .page - info - team.members - list {
        -webkit - transform: scale(.7234);
        - ms - transform: scale(.7234);
        - o - transform: scale(.7234);
        transform: scale(.7234)
    }
}

@ media(max - width: 445 px) {
    .page - info - team.site - main {
        height: 2669.78 px
    }
    .page - info - team.members - list {
        -webkit - transform: scale(.7148);
        - ms - transform: scale(.7148);
        - o - transform: scale(.7148);
        transform: scale(.7148)
    }
}

@ media(max - width: 440 px) {
    .page - info - team.site - main {
        height: 2637.66 px
    }
    .page - info - team.members - list {
        -webkit - transform: scale(.7062);
        - ms - transform: scale(.7062);
        - o - transform: scale(.7062);
        transform: scale(.7062)
    }
}

@ media(max - width: 435 px) {
    .page - info - team.site - main {
        height: 2605.54 px
    }
    .page - info - team.members - list {
        -webkit - transform: scale(.6976);
        - ms - transform: scale(.6976);
        - o - transform: scale(.6976);
        transform: scale(.6976)
    }
}

@ media(max - width: 430 px) {
    .page - info - team.site - main {
        height: 2573.42 px
    }
    .page - info - team.members - list {
        -webkit - transform: scale(.689);
        - ms - transform: scale(.689);
        - o - transform: scale(.689);
        transform: scale(.689)
    }
}

@ media(max - width: 425 px) {
    .page - info - team.site - main {
        height: 2541.29 px
    }
    .page - info - team.members - list {
        -webkit - transform: scale(.6804);
        - ms - transform: scale(.6804);
        - o - transform: scale(.6804);
        transform: scale(.6804)
    }
}

@ media(max - width: 420 px) {
    .page - info - team.site - main {
        height: 2509.17 px
    }
    .page - info - team.members - list {
        -webkit - transform: scale(.6718);
        - ms - transform: scale(.6718);
        - o - transform: scale(.6718);
        transform: scale(.6718)
    }
}

@ media(max - width: 415 px) {
    .page - info - team.site - main {
        height: 2477.05 px
    }
    .page - info - team.members - list {
        -webkit - transform: scale(.6632);
        - ms - transform: scale(.6632);
        - o - transform: scale(.6632);
        transform: scale(.6632)
    }
}

@ media(max - width: 410 px) {
    .page - info - team.site - main {
        height: 2444.93 px
    }
    .page - info - team.members - list {
        -webkit - transform: scale(.6546);
        - ms - transform: scale(.6546);
        - o - transform: scale(.6546);
        transform: scale(.6546)
    }
}

@ media(max - width: 405 px) {
    .page - info - team.site - main {
        height: 2412.81 px
    }
    .page - info - team.members - list {
        -webkit - transform: scale(.646);
        - ms - transform: scale(.646);
        - o - transform: scale(.646);
        transform: scale(.646)
    }
}

@ media(max - width: 400 px) {
    .page - info - team.site - main {
        height: 2380.69 px
    }
    .page - info - team.members - list {
        -webkit - transform: scale(.6374);
        - ms - transform: scale(.6374);
        - o - transform: scale(.6374);
        transform: scale(.6374)
    }
}

@ media(max - width: 395 px) {
    .page - info - team.site - main {
        height: 2348.57 px
    }
    .page - info - team.members - list {
        -webkit - transform: scale(.6288);
        - ms - transform: scale(.6288);
        - o - transform: scale(.6288);
        transform: scale(.6288)
    }
}

@ media(max - width: 390 px) {
    .page - info - team.site - main {
        height: 2316.45 px
    }
    .page - info - team.members - list {
        -webkit - transform: scale(.6202);
        - ms - transform: scale(.6202);
        - o - transform: scale(.6202);
        transform: scale(.6202)
    }
}

@ media(max - width: 385 px) {
    .page - info - team.site - main {
        height: 2284.33 px
    }
    .page - info - team.members - list {
        -webkit - transform: scale(.6116);
        - ms - transform: scale(.6116);
        - o - transform: scale(.6116);
        transform: scale(.6116)
    }
}

@ media(max - width: 380 px) {
    .page - info - team.site - main {
        height: 2252.21 px
    }
    .page - info - team.members - list {
        -webkit - transform: scale(.603);
        - ms - transform: scale(.603);
        - o - transform: scale(.603);
        transform: scale(.603)
    }
}

@ media(max - width: 375 px) {
    .page - info - team.site - main {
        height: 2220.08 px
    }
    .page - info - team.members - list {
        -webkit - transform: scale(.5944);
        - ms - transform: scale(.5944);
        - o - transform: scale(.5944);
        transform: scale(.5944)
    }
}

@ media(max - width: 370 px) {
    .page - info - team.site - main {
        height: 2187.96 px
    }
    .page - info - team.members - list {
        -webkit - transform: scale(.5858);
        - ms - transform: scale(.5858);
        - o - transform: scale(.5858);
        transform: scale(.5858)
    }
}

@ media(max - width: 365 px) {
    .page - info - team.site - main {
        height: 2155.84 px
    }
    .page - info - team.members - list {
        -webkit - transform: scale(.5772);
        - ms - transform: scale(.5772);
        - o - transform: scale(.5772);
        transform: scale(.5772)
    }
}

@ media(max - width: 360 px) {
    .page - info - team.site - main {
        height: 2123.72 px
    }
    .page - info - team.members - list {
        -webkit - transform: scale(.5686);
        - ms - transform: scale(.5686);
        - o - transform: scale(.5686);
        transform: scale(.5686)
    }
}

@ media(max - width: 355 px) {
    .page - info - team.site - main {
        height: 2091.6 px
    }
    .page - info - team.members - list {
        -webkit - transform: scale(.56);
        - ms - transform: scale(.56);
        - o - transform: scale(.56);
        transform: scale(.56)
    }
}

@ media(max - width: 350 px) {
    .page - info - team.site - main {
        height: 2059.48 px
    }
    .page - info - team.members - list {
        -webkit - transform: scale(.5514);
        - ms - transform: scale(.5514);
        - o - transform: scale(.5514);
        transform: scale(.5514)
    }
}

@ media(max - width: 345 px) {
    .page - info - team.site - main {
        height: 2027.36 px
    }
    .page - info - team.members - list {
        -webkit - transform: scale(.5428);
        - ms - transform: scale(.5428);
        - o - transform: scale(.5428);
        transform: scale(.5428)
    }
}

@ media(max - width: 340 px) {
    .page - info - team.site - main {
        height: 1995.24 px
    }
    .page - info - team.members - list {
        -webkit - transform: scale(.5342);
        - ms - transform: scale(.5342);
        - o - transform: scale(.5342);
        transform: scale(.5342)
    }
}

@ media(max - width: 335 px) {
    .page - info - team.site - main {
        height: 1963.12 px
    }
    .page - info - team.members - list {
        -webkit - transform: scale(.5256);
        - ms - transform: scale(.5256);
        - o - transform: scale(.5256);
        transform: scale(.5256)
    }
}

@ media(max - width: 330 px) {
    .page - info - team.site - main {
        height: 1931 px
    }
    .page - info - team.members - list {
        -webkit - transform: scale(.517);
        - ms - transform: scale(.517);
        - o - transform: scale(.517);
        transform: scale(.517)
    }
}

@ media(max - width: 325 px) {
    .page - info - team.site - main {
        height: 1898.87 px
    }
    .page - info - team.members - list {
        -webkit - transform: scale(.5084);
        - ms - transform: scale(.5084);
        - o - transform: scale(.5084);
        transform: scale(.5084)
    }
}

@ media(max - width: 320 px) {
    .page - info - team.site - main {
        height: 1866.75 px
    }
    .page - info - team.members - list {
        -webkit - transform: scale(.4998);
        - ms - transform: scale(.4998);
        - o - transform: scale(.4998);
        transform: scale(.4998)
    }
}

.page - info - member.info - member - jumbotron {
    margin - bottom: 0
}

.page - info - member.site - main {
    position: relative
}

.page - info - member.workerlist {
    overflow: hidden;
    width: 100 %;
    min - height: 400 px;
    margin - bottom: 0;
    border - top: 1 px solid# eee;
    background: #fff
}

.page - info - member.workerlist li {
    display: none;
    width: 100 %
}

.page - info - member.workerlist li img {
    width: 50 %;
    float: left;
    display: inline
}

@ media(max - width: 880 px) {
    .page - info - member.workerlist li img {
        float: none;
        display: block;
        width: 100 %
    }
}

.page - info - member.workerlist li.info - text {
    width: 50 %;
    height: 100 %;
    overflow: hidden;
    padding - left: 80 px;
    padding - top: 8 %;
    float: right;
    display: inline;
    color: #3e3a39
}

@media (min-width:880px) and (max-width:1200px) {
    .page-info-member .workerlist li .info-text {
        padding-top: 4%;
        padding-left: 40px
    }
}

@media (max-width:880px) {
    .page-info-member .workerlist li .info-text {
        float: none;
        width: 100%;
        display: block;
        padding: 4em 15px
    }
}

.page-info-member .workerlist li .info-text .name {
    font-weight: 400;
    font-size: 2.5em;
    color: inherit
}

@media (min-width:480px) and (max-width:1200px) {
    .page-info-member .workerlist li .info-text .name {
        font-size: 1.6em
    }
}

@media (max-width:480px) {
    .page-info-member .workerlist li .info-text .name {
        font-size: 1.8em
    }
}

.page-info-member .workerlist li .info-text .job-title {
    font-weight: 400;
    font-size: 1.3em;
    letter-spacing: 2px;
    color: inherit
}

@media (max-width:1200px) {
    .page-info-member .workerlist li .info-text .job-title {
        font-size: 1em
    }
}

.page-info-member .workerlist li .info-text .motto {
    margin-right: 80px;
    padding-top: .6em;
    font-size: 2em;
    font-weight: 600;
    line-height: 1.3em
}

@media (max-width:1200px) {
    .page-info-member .workerlist li .info-text .motto {
        font-size: 1.5em
    }
}

.page-info-member .workerlist li .info-text .article {
    margin-top: 20px;
    margin-right: 80px;
    font-size: 16px;
    letter-spacing: 1px;
    line-height: 22px
}

@media (min-width:980px) and (max-width:1200px) {
    .page-info-member .workerlist li .info-text .article {
        font-size: 1em
    }
}

@media (min-width:880px) and (max-width:980px) {
    .page-info-member .workerlist li .info-text .article {
        font-size: .8em;
        line-height: 18px
    }
}

@media (max-width:880px) {
    .page-info-member .workerlist li .info-text .article {
        font-size: .8em;
        line-height: 18px;
        margin-right: 0
    }
}

.page-info-member .workerlist .act {
    display: block
}

.page-info-member .buttons {
    width: 100%;
    position: absolute;
    top: 45%
}

.page-info-member .buttons span {
    display: inline-block;
    background-color: # 2079 b1;
    color: #fff;
    padding: 10 px;
    width: 30 px;
    text - align: center;
    text - indent: -9999 px;
    cursor: pointer;
    - webkit - transition: all 200 ms ease - out 300 ms;
    - o - transition: all 200 ms ease - out 300 ms;
    transition: all 200 ms ease - out 300 ms
}

.page - info - member.buttons span: hover {
    text - indent: 0;
    width: 80 px
}

.page - info - member.buttons.next {
    float: right
}

.page - info - jobs.box - list.box - item {
    margin - bottom: 35 px
}

.page - info - jobs.box - list.create {
    background - image: url(.. / images / info - jobs - create.jpg)
}

.page - info - jobs.box - list.enjoywork {
    background - image: url(.. / images / info - jobs - enjoywork.jpg)
}

.page - info - jobs.job - list {
    margin - bottom: 30 px
}

.page - info - jobs.table {
    color: #a6a6a6;
    font - size: 16 px
}

.page - info - jobs.table > tbody > tr: last - child td {
    border - bottom: none
}

.page - info - jobs.table > tbody > tr > td {
    width: 230 px;
    padding: 25 px 0;
    border - top: none;
    border - bottom: 1 px solid# ddd;
    text - align: center
}

.page - info - jobs.table > tbody > tr > td: first - child {
    text - align: left
}

.page - info - jobs.table > tbody > tr > td: last - child {
    text - align: right
}

.page - info - jobs.table > tbody > tr > td a {
    color: grey
}

.page - info - jobs.table > tbody > tr > td a: hover {
    color: #03a9f4
}

.page-info-jobs .table>tbody>tr>td a .icon-chevron-right {
    position: relative;
    top: 1px;
    margin-left: 5px
}

.page-info-contactus .contact-info {
    margin-bottom: 60px
}

.page-info-contactus .contact-info section+section {
    border-top: 1px solid # E8E8E8;
    padding - top: 42 px;
    margin - top: 42 px
}

.page - info - contactus.contact - info h3 {
    margin - top: 0;
    line - height: 1.5;
    color: grey
}

.page - info - contactus.contact - info p {
    margin - bottom: 0
}

.page - info - contactus.contact - info.info - list {
    color: #9c9c9c;
    font-size: 18px;
    line-height: 30px
}

@media (max-width:768px) {
    .page-info-contactus .contact-info {
        margin-bottom: 20px
    }
    .page-info-contactus .contact-info section+section {
        padding-top: 20px;
        margin-top: 20px
    }
    .page-info-contactus .contact-info h3 {
        font-size: 20px
    }
    .page-info-contactus .contact-info .info-list {
        font-size: 16px
    }
}

.page-info-press .press-list {
    margin-bottom: 30px
}

.page-info-press .news-report-item hr {
    float: left;
    margin: 20px;
    width: 100%;
    border-top: 0
}

@media (max-width:992px) {
    .page-info-press .news-report-item hr {
        margin: 0 0 16px
    }
}

.page-info-press .news-report-item:first-child {
    margin-top: 0
}

.page-info-press .news-report-item:last-child {
    margin-bottom: 30px
}

.page-info-press .news-report-item:last-child hr {
    display: none
}

.page-info-press .news-report-item blockquote {
    margin-bottom: 0;
    border-left: 0 none
}

.page-info-press .news-report-item footer {
    font-size: 16px
}

.page-info-press .news-source-logo {
    display: block;
    width: 100%;
    height: 100px;
    background-repeat: no-repeat;
    background-position: center center
}

.page-info-press .news-source-logo.limit-height {
    background-size: auto 50%
}

.page-info-press .news-source-logo.limit-width {
    background-size: 100% auto
}

.page-info-press .contact-box,
.page-info-press .material-box {
    background-size: cover;
    font-size: 16px
}

.page-info-press .box-content.contact-box {
    padding-top: 10px;
    background-image: url(../images/info-press-contact-bg.jpg)
}

.page-info-press .box-content.material-box {
    position: relative;
    overflow: hidden;
    padding-top: 0;
    background-image: url(../images/info-press-material-bg.jpg)
}

.page-info-press .box-content.material-box .content {
    color: # fff;
    padding - top: 40 px;
    - webkit - transition: all 250 ms ease - in -out 150 ms;
    - o - transition: all 250 ms ease - in -out 150 ms;
    transition: all 250 ms ease - in -out 150 ms
}

.page - info - press.box - content.material - box.content.presskit - box {
    width: 100 %;
    height: 100 %;
    z - index: 2;
    padding: 24 px 0 0;
    text - align: center;
    position: relative;
    border - radius: 0 0 5 px 5 px;
    background - color: transparent
}

.page - info - press.box - content.material - box.content - active {
    position: absolute;
    width: 100 %;
    height: 100 %;
    text - align: center
}

.page - info - press.box - content.material - box.content - active.icon {
    position: absolute;
    top: 50 %;
    left: 50 %;
    margin: -80 px 0 0 - 25 px;
    font - size: 50 px;
    color: #fff;
    opacity: 0;
    filter: alpha(opacity=0);
    - webkit - transition: all 350 ms;
    - o - transition: all 350 ms;
    transition: all 350 ms
}

.page - info - press.box - content.material - box: hover.content - active.icon {
    margin - top: -30 px;
    opacity: 1;
    filter: alpha(opacity=100);
    - webkit - transition: all 250 ms ease - in -out 250 ms;
    - o - transition: all 250 ms ease - in -out 250 ms;
    transition: all 250 ms ease - in -out 250 ms
}

.page - info - press.box - content.material - box: hover.content {
    padding - top: 200 px;
    opacity: 0;
    filter: alpha(opacity=0)
}

.page - info - partners.container {
    position: relative
}

.page - info - partners.partner - tab {
    margin - bottom: 32 px;
    text - align: center
}

.page - info - partners.partner - tab li {
    display: inline - block;
    padding - right: 32 px;
    text - align: center
}

.page - info - partners.partner - tab li: last - child {
    padding - right: 0
}

.page - info - partners.partner - tab li a {
    display: block;
    width: 100 px;
    height: 42 px;
    line - height: 38 px;
    padding: 0 10 px;
    border: 2 px solid# ededed;
    color: #a6a6a6
}

@ media(min - width: 768 px) {
    .page - info - partners.partner - tab li a {
        -webkit - transition: all 300 ms;
        - o - transition: all 300 ms;
        transition: all 300 ms
    }
}

.page - info - partners.partner - tab li a: hover,
.page - info - partners.partner - tab li.active a {
    border - color: #03a9f4;
    color: # 03 a9f4
}

@ media(max - width: 767 px) {
    .page - info - partners.partner - tab: after,
    .page - info - partners.partner - tab: before {
        content: " ";
        display: table
    }
    .page - info - partners.partner - tab: after {
        clear: both
    }
    .page - info - partners.partner - tab li {
        float: left;
        width: 50 %;
        padding - right: 0
    }
    .page - info - partners.partner - tab li: first - child.active + li a {
        border - left: none
    }
    .page - info - partners.partner - tab li: not(: first - child).active {
        margin - left: -1 px
    }
    .page - info - partners.partner - tab li a {
        width: 100 %;
        border - width: 1 px
    }
}

.page - info - partners.partners - list {
    margin - bottom: 30 px
}

.page - info - partners.partners - list.list - item {
    margin - bottom: 30 px;
    text - align: center
}

.page - info - partners.partners - list a {
    display: block;
    min - height: 114 px;
    padding: 10 px 0;
    border: 1 px solid# ededed;
    - webkit - transition: all 218 ms;
    - o - transition: all 218 ms;
    transition: all 218 ms
}

.page - info - partners.partners - list a: hover {
    border: 1 px solid# bababa
}

.page - info - partners.partners - list a img {
    width: 100 %;
    max - width: 260 px;
    max - height: 92 px
}

@ media(max - width: 992 px) {
    .page - info - press.news - report - item.col - md - 2 {
        display: none
    }
}

@ media(max - width: 768 px) {
    .page - info - jobs.box - list.box - item,
    .page - info - team.site - main {
        margin - bottom: 15 px
    }
    .page - info - jobs.job - list,
    .page - info - press.press - list {
        margin - bottom: 0
    }
    .page - info - jobs.job - list.table > tbody > tr td {
        width: auto;
        text - align: left
    }
    .page - info - jobs.job - list.table > tbody > tr: first - child td {
        padding - top: 15 px
    }
    .page - info - press.press - list.box - item {
        margin - bottom: 15 px
    }
    .page - info - press.press - list.news - report - item {
        overflow: hidden;
        margin - top: 0
    }
    .page - info - press.press - list.news - report - item blockquote {
        font - size: 16 px;
        margin: 0;
        padding: 0
    }
    .page - info - partners.partner - tab {
        margin - bottom: 15 px
    }
    .page - info - partners.partners - list {
        margin - bottom: 0
    }
    .page - info - partners.partners - list.list - item {
        margin - bottom: 15 px
    }
}

@ media(max - width: 768 px) and(max - width: 480 px) {
    .page - info - jobs.job - list.table > tbody > tr: first - child td {
        padding - top: 0
    }
}

@ media(max - width: 480 px) {
    .info - jumbotron {
        padding - top: 80 px;
        font - size: 28 px
    }
    .info - jumbotron.subcol - nav ul li a {
        padding: 10 px;
        font - size: 12 px
    }
    .page - info - jobs.table {
        margin - bottom: 0;
        font - size: 14 px
    }
    .page - info - jobs.table > tbody > tr > td {
        padding: 15 px 0
    }
    .page - info - jobs.table > tbody > tr > td: last - child {
        text - align: right
    }
}

@ media(max - width: 320 px) {
    .info - jumbotron.title span {
        display: inline
    }
}

.page - new {
    background - color: #e8e9eb
}

.page - new.feature {
    border - top: 1 px solid #333
}

.page-new .feature .feature-content {
    max-height: 0;
    visibility: hidden;
    overflow: hidden;
    background-color: # f5f6f7;
    - webkit - transition: all.3 s cubic - bezier(.7, 0, .3, 1) 0;
    transition: all.3 s cubic - bezier(.7, 0, .3, 1) 0;
    - moz - transition: all.3 s ease - in -out
}

.page - new.feature.feature - content.feature - content - wrapper {
    width: 100 %;
    max - width: 740 px;
    padding: 50 px 20 px;
    margin: 0 auto
}

.page - new.feature.feature - title {
    position: relative;
    height: 100 px;
    padding: 25 px 0;
    background - color: #383838;
    cursor: pointer
}

.page-new .feature .feature-title h2 {
    margin: 0;
    letter-spacing: 2px;
    color: # fff
}

.page - new.feature.feature - title p {
    margin - top: 5 px;
    font - size: 14 px;
    color: #a6a6a6
}

.page - new.feature.feature - title.content - wrapper {
    position: relative;
    width: 100 %;
    max - width: 1040 px;
    padding: 0 40 px;
    margin: 0 auto
}

.page - new.feature.feature - title.arrow {
    position: absolute;
    right: 10 px;
    top: 15 px;
    height: 20 px;
    width: 12 px;
    background - image: url(.. / images / new / arrow.png);
    background - size: 12 px 20 px;
    transition: all.25 s;
    - webkit - transition: all.25 s
}

.page - new.feature.feature - title: after {
    display: none;
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100 %;
    height: 100 %;
    background - color: rgba(255, 255, 255, .02)
}

.page - new.feature.feature - title: hover: after {
    display: block
}

.page - new.feature.feature - content - wrapper h3 {
    padding: 20 px 0 0;
    font - size: 24 px;
    color: #383838
}

.page-new .feature .feature-content-wrapper p {
    margin-bottom: 20px;
    color: grey;
    font-size: 15px;
    margin-top: 10px;
    margin-left: 40px;
    line-height: 26px
}

.page-new .feature .feature-content-wrapper p>img {
    width: 100%;
    max-width: 660px;
    margin-bottom: 30px
}

.page-new .feature.open .feature-content {
    height: auto;
    max-height: 10000px;
    visibility: visible
}

.page-new .feature.open .feature-title .arrow {
    transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg)
}

.page-new .ias-trigger,
.page-new .loading-indicator {
    padding-top: 40px
}

.page-new .new-slogan {
    height: 250px;
    padding: 70px 0 60px;
    background-color: # e8e9eb
}

.page - new.new - slogan.content - wrapper {
    max - width: 1200 px;
    margin: 0 auto
}

.page - new.new - slogan h2 {
    font - size: 32 px;
    text - align: center
}

.page - new.new - slogan.signature {
    float: right;
    height: 50 px;
    width: 162 px;
    margin - right: 200 px;
    margin - top: 20 px;
    background - image: url(.. / images / new / signature.png);
    background - size: 162 px 50 px
}

@ media(max - width: 768 px) {
    .page - new.feature.feature - item.feature - images {
        padding - right: 40 px
    }
    .page - new.feature.feature - title.arrow {
        right: 15 px
    }
    .page - new.new - slogan.signature {
        float: none;
        margin: 20 px auto
    }
}

@ media(max - width: 480 px) {
    .page - new.feature.feature - title h2,
    .page - new.new - slogan h2 {
        font - size: 22 px
    }
    .page - new.feature.feature - item.feature - images img {
        max - width: 290 px
    }
    .page - new.feature.feature - title.content - wrapper {
        padding: 0 30 px 0 15 px
    }
}

.page - privacy.site - main.container {
    max - width: 960 px;
    padding: 20 px 50 px;
    margin: 50 px auto;
    border: 1 px solid# DDD;
    background - color: #FFF;
    - webkit - box - shadow: 0 1 px 5 px rgba(0, 0, 0, .1);
    - moz - box - shadow: 0 1 px 5 px rgba(0, 0, 0, .1);
    box - shadow: 0 1 px 5 px rgba(0, 0, 0, .1)
}

.page - privacy.privacy - header - title {
    margin: 30 px 0;
    font - size: 26 px
}

.page - privacy section {
    margin - bottom: 20 px
}

.page - privacy.privacy - list {
    list - style: disc;
    padding - left: 30 px
}

.page - privacy.privacy - list.lower - roman {
    list - style: lower - roman
}

.page - privacy.privacy - list li {
    line - height: 1.5
}

.page - privacy.privacy - content {
    font - size: 14 px
}

.page - privacy.privacy - title {
    display: block;
    font - size: 16 px;
    font - weight: 700
}

@ media(max - width: 480 px) {
    .page - privacy {
        padding: 0
    }
    .page - privacy.site - header {
        display: none
    }
    .page - privacy.site - main.container {
        margin: 0 auto;
        padding: 0 30 px 30 px;
        border: none;
        box - shadow: none
    }
}

.page - research - cases.education {
    background - image: url(.. / images / research -
 case -education.jpg)
}

.page - research - cases.internet {
    background - image: url(.. / images / research -
 case -internet.jpg)
}

.page - research - cases.advertisement {
    background - image: url(.. / images / research -
 case -advertisement.jpg)
}

.page - research - cases.join {
    background - image: url(.. / images / research -
 case -join.jpg)
}

.page - research - cases.box - content.content {
    position: relative;
    z - index: 2
}

.page - research - cases.box - content: after {
    content: '';
    display: block;
    position: absolute;
    z - index: 1;
    top: 0;
    height: 200 px;
    width: 100 %;
    border - radius: 5 px;
    background - color: transparent
}

.page - research - join {
    background - image: url(.. / images / research - top - bg.jpg);
    background - position: center - 70 px;
    background - repeat: no - repeat
}

.page - research - join.site - main {
    background - image: url(.. / images / research - bottom - bg.jpg);
    background - position: center bottom;
    background - repeat: no - repeat
}

.page - research - join.site - main.container {
    margin - top: 50 px;
    padding - bottom: 150 px
}

.page - research - join.research - join - jumbotron {
    background - color: transparent;
    padding - bottom: 0;
    margin - bottom: 0
}

.page - research - join.research - join - jumbotron h2 {
    text - indent: -9999 px;
    margin: 0
}

.page - research - join.research - join - jumbotron img {
    width: 100 %;
    max - width: 513 px;
    margin - bottom: 40 px
}

.page - research - join.research - join - jumbotron.research - description {
    margin - left: 150 px;
    margin - right: 150 px;
    margin - bottom: 50 px;
    text - align: center;
    font - size: 16 px;
    color: #a6a6a6;
    line - height: 32 px;
    letter - spacing: 1 px
}

.page - research - join.research - join - jumbotron.research - learn - more {
    margin - top: 42 px;
    font - size: 14 px;
    letter - spacing: 1 px;
    color: #a6a6a6
}

.page - research - join.research - join - jumbotron.arrow - down {
    height: 40 px;
    background - image: url(.. / images / research - arrow - down.jpg);
    background - repeat: no - repeat;
    background - position: center
}

@ media(-webkit - min - device - pixel - ratio: 2),
(min - resolution: 192 dpi) {
    .page - research - join.research - join - jumbotron.arrow - down {
        background - image: url(.. / images / research - arrow - down@ 2 x.jpg);
        background - size: 118 px 30 px
    }
}

.page - research - join.research - process {
    padding: 50 px 0 70 px
}

.page - research - join.research - process.col - md - 7 {
    padding - top: 40 px
}

.page - research - join.research - process.col - md - 5 {
    text - align: center
}

.page - research - join.research - process - title {
    margin: 4 px 4 px 4 px 60 px;
    text - align: left;
    font - size: 30 px
}

.page - research - join.research - process - desc {
    margin - top: 20 px;
    padding: 0 60 px;
    font - size: 15 px;
    color: #a6a6a6;
    line - height: 34 px;
    letter - spacing: 1 px;
    text - align: left
}

.page - research - join.research - process - figure {
    width: 100 %
}

.page - research - join.research - process - figure.figure - one {
    margin - top: 30 px;
    max - width: 341 px
}

.page - research - join.research - process - figure.figure - two {
    max - width: 451 px
}

.page - research - join.research - process - figure.figure - three {
    max - width: 400 px
}

.page - research - join.research - process - figure.figure - four {
    max - width: 330 px
}

.page - research - join.research - process - figure.figure - five {
    max - width: 325 px
}

.page - research - join.research - process - icon {
    float: left;
    display: inline - block;
    height: 40 px;
    width: 40 px;
    line - height: 56 px;
    text - indent: 10 px;
    border - radius: 48 px;
    font - size: 36 px;
    font - weight: lighter;
    background - color: #03a9f4;
    color: # fff;
    - webkit - font - smoothing: subpixel - antialiased
}

.page - research - join.research - footer {
    margin: 70 px 0;
    text - align: center
}

.page - research - join.research - footer > img {
    width: 100 %;
    max - width: 778 px;
    margin - bottom: 50 px
}

.page - research - join.research - footer - title {
    text - indent: -9999 px
}

.page - research - join.modal - window.modal - back {
    min - height: 1000 px
}

@ media(max - width: 768 px) {
    .page - research - join.modal - window.modal - back {
        min - height: 1350 px
    }
}

.page - research - join.modal - window.modal - card {
    top: 0;
    width: 600 px;
    padding: 0;
    margin - left: -300 px;
    margin - top: 70 px
}

.page - research - join.modal - window.modal - card.modal - header {
    position: relative;
    height: 200 px;
    padding: 15 px 25 px;
    border - top - right - radius: 2 px;
    border - top - left - radius: 2 px;
    background: url(.. / images / research - join - header.jpg) #56b7e3;
    background-size: cover;
    line-height: 30px;
    font-size: 20px;
    color: # fff
}

@ media(max - width: 480 px) {
    .page - research - join.modal - window.modal - back {
        min - height: 1220 px
    }
    .page - research - join.modal - window.modal - card {
        left: 50 %;
        width: 300 px;
        margin: 50 px auto 50 px - 150 px
    }
    .page - research - join.modal - window.modal - card.modal - header {
        height: 60 px
    }
}

.page - research - join.modal - window.modal - card.modal - header.title {
    float: left
}

.page - research - join.modal - window.modal - card.modal - header.avatar {
    position: absolute;
    left: 50 %;
    top: 50 %;
    width: 140 px;
    height: 140 px;
    margin - left: -70 px;
    margin - top: -70 px;
    border: 4 px solid# fff;
    border - radius: 140 px;
    background - image: url(.. / images / research - join - avatar.jpg)
}

@ media(max - width: 480 px) {
    .page - research - join.modal - window.modal - card.modal - header.avatar {
        display: none
    }
}

.page - research - join.modal - window.modal - card.modal - header.close - handler {
    position: static;
    float: right;
    font - size: 18 px;
    color: #fff;
    - webkit - transition: text - shadow 218 ms;
    - o - transition: text - shadow 218 ms;
    transition: text - shadow 218 ms
}

.page - research - join.modal - window.modal - card.modal - header.close - handler: hover {
    text - shadow: 0 0 3 px rgba(255, 255, 255, .7)
}

.page - research - join.modal - window.modal - card.form - group {
    margin - bottom: 20 px
}

.page - research - join.modal - window.modal - card.form - label {
    font - size: 18 px;
    color: #888
}

.page-research-join .modal-card .research-form {
    padding: 20px
}

.page-research-join .modal-card .research-form::-webkit-input-placeholder {
    color: # bababa;
    letter - spacing: 1 px
}

.page - research - join.modal - card.research - form::-moz - placeholder {
    color: #bababa;
    letter - spacing: 1 px
}

.page - research - join.modal - card.research - form.row {
    margin - left: -10 px;
    margin - right: -10 px
}

.page - research - join.modal - card.research - form[class *=col -] {
    padding - left: 10 px;
    padding - right: 10 px
}

.page - research - join.modal - card.research - form.subtype {
    width: 100 %;
    height: 100 px;
    margin - bottom: 20 px;
    line - height: 90 px;
    border: 2 px solid# bababa;
    border - radius: 4 px;
    text - align: center;
    font - size: 22 px;
    color: #bababa;
    cursor: pointer;
    - webkit - transition: all 350 ms;
    - o - transition: all 350 ms;
    transition: all 350 ms
}

.page - research - join.modal - card.research - form.subtype: hover {
    border - color: #a6a6a6;
    color: #a6a6a6
}

.page - research - join.modal - card.research - form.subtype.active {
    border - color: #56b7e3;
    color: # 56 b7e3
}

.page - research - join.modal - card.research - form.subtype.icon {
    position: relative;
    top: 3 px;
    font - size: 30 px
}

.page - research - join.modal - card.research - form.form - group.has - value.form - control,
.page - research - join.modal - card.research - form.form - group.has - value.input - group - addon,
.page - research - join.modal - card.research - form.input - group.has - value.form - control,
.page - research - join.modal - card.research - form.input - group.has - value.input - group - addon {
    border - color: #a6a6a6
}

.page - research - join.modal - card.research - form.input - group - addon {
    background - color: #FFF;
    color: #666
}

.page-research-join .modal-card .research-form .confirm-handler {
    width: 100%;
    padding: 10px
}

@media (max-width:1200px) {
    .page-research-join .research-description,
    .page-research-join .research-join-jumbotron .research-description,
    .page-research-join .research-process-desc {
        margin-left: 0;
        margin-right: 0
    }
}

@media (max-width:992px) {
    .page-research-join .col-md-5.pull-left,
    .page-research-join .col-md-7.pull-right {
        float: none!important
    }
}

.article-toolbar {
    padding-bottom: 50px
}

.article-toolbar .btn {
    height: 50px;
    line-height: 20px
}

.article-toolbar .article-share-group {
    margin-top: 40px
}

.article-toolbar .article-share-group a {
    display: inline-block;
    width: 50px;
    height: 50px;
    margin: 0 10px;
    border: 1px solid # a6a6a6;
    color: #a6a6a6;
    border - radius: 50 %;
    padding: 0;
    - webkit - transition: all 218 ms;
    - o - transition: all 218 ms;
    transition: all 218 ms
}

.article - toolbar.article - share - group a.icon {
    font - size: 28 px;
    line - height: 50 px
}

.article - toolbar.article - share - group a.weibo: hover {
    border - color: #c5282f;
    color: #c5282f
}

.article - toolbar.article - share - group a.wechat: hover {
    border - color: #44b549;
    color: # 44 b549
}

.article - toolbar.article - share - group a.twitter: hover {
    border - color: #7fdbff;
    color: # 7 fdbff
}

.article - toolbar.article - share - group a.facebook: hover {
    border - color: #3b5998;
    color: # 3 b5998
}

.article - toolbar.enter - join - box {
    width: 100 %;
    border - radius: 3 px;
    margin: 50 px auto 0;
    background - size: cover;
    background - image: url(https: //dn-site.oss.aliyuncs.com/2015-08/f226ea69b4dd899a67629d2bb75955a9417506dd?response-content-type=image/png);
    -webkit-transition: all 250ms ease-in-out;
    -o-transition: all 250ms ease-in-out;
    transition: all 250ms ease-in-out
}

.article-toolbar .enter-join-box .enter-join {
    width: 100%;
    height: 100%;
    padding: 15px;
    display: block;
    border-radius: 3px;
    letter-spacing: 3px;
    background-color: rgba(0, 0, 0, .28)
}

.article-toolbar .enter-join-box .enter-join span {
    width: 100%;
    height: 100%;
    color: #fff;
    display: block;
    font-size: 28px;
    border-radius: 2px;
    line-height: 150px;
    border: 1px solid #fff
}

.article-toolbar .enter-join-box:hover {
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .5);
    -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .5)
}

@media (min-width:480px) {
    .en .research-jumbotron {
        padding-top: 100px
    }
}

body[class*=page-support],
body[class*=page-best-practices] {
    color: grey
}

body[class*=page-support].tbsite-article,
body[class*=page-best-practices].tbsite-article {
    padding-top: 50px
}

body[class*=page-support] .site-header,
body[class*=page-best-practices] .site-header {
    border-color: #e6e6e6
}

body[class*=page-support] [class*=col-],
body[class*=page-best-practices] [class*=col-] {
    padding-left: 10px;
    padding-right: 10px
}

@media (max-width:991px) {
    body[class*=page-support] .row,
    body[class*=page-best-practices] .row {
        margin-left: -11px;
        margin-right: -11px
    }
    body[class*=page-support] [class*=col-],
    body[class*=page-best-practices] [class*=col-] {
        padding-left: 5px;
        padding-right: 5px
    }
}

body[class*=page-support] .search-wrapper,
body[class*=page-best-practices] .search-wrapper {
    height: 170px;
    padding: 60px 0;
    border-bottom: 1px solid #e6e6e6;
    background-color: #ededed
}

body[class*=page-support] .search-wrapper .search-form,
body[class*=page-best-practices] .search-wrapper .search-form {
    position: relative;
    max-width: 900px;
    height: 50px;
    margin: 0 auto;
    border-radius: 3px;
    -webkit-box-shadow: 0 2px 1px rgba(0, 0, 0, .12);
    -moz-box-shadow: 0 2px 1px rgba(0, 0, 0, .12);
    box-shadow: 0 2px 1px rgba(0, 0, 0, .12)
}

body[class*=page-support] .search-wrapper .search-input,
body[class*=page-best-practices] .search-wrapper .search-input {
    float: left;
    height: 50px;
    width: 100%;
    max-width: 800px;
    padding-left: 47px;
    border-radius: 3px;
    background-color: #fff;
    border: none;
    color: #383838;
    font-size: 15px
}

body[class*=page-support] .search-wrapper .search-input:focus,
body[class*=page-best-practices] .search-wrapper .search-input:focus {
    outline: 0
}

body[class*=page-support] .search-wrapper .search-icon,
body[class*=page-best-practices] .search-wrapper .search-icon {
    position: absolute;
    top: 15px;
    left: 15px;
    width: 20px;
    height: 20px;
    background-image: url(../images/support/search-icon.png);
    background-size: 20px 20px;
    opacity: .5;
    filter: alpha(opacity=50);
    -webkit-transition: opacity 218ms;
    -o-transition: opacity 218ms;
    transition: opacity 218ms
}

body[class*=page-support] .search-wrapper .search-icon.active,
body[class*=page-best-practices] .search-wrapper .search-icon.active {
    opacity: .75;
    filter: alpha(opacity=75)
}

body[class*=page-support] .search-wrapper .btn,
body[class*=page-best-practices] .search-wrapper .btn {
    position: absolute;
    right: 0;
    display: inline-block;
    height: 50px;
    line-height: 38px;
    width: 100px;
    background-color: #6e6e6e;
    font-size: 18px;
    color: rgba(255, 255, 255, .6);
    border: none;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    -webkit-box-shadow: 0 2px 1px rgba(0, 0, 0, .13999999999999999)!important;
    -moz-box-shadow: 0 2px 1px rgba(0, 0, 0, .13999999999999999)!important;
    box-shadow: 0 2px 1px rgba(0, 0, 0, .13999999999999999)!important;
    -webkit-transition: all 218ms;
    -o-transition: all 218ms;
    transition: all 218ms
}

body[class*=page-support] .search-wrapper .btn.active,
body[class*=page-best-practices] .search-wrapper .btn.active {
    background-color: #03a9f4;
    color: #fff
}

body[class*=page-support] .search-wrapper .btn.active:hover,
body[class*=page-best-practices] .search-wrapper .btn.active:hover {
    background-color: #0ab1fc
}

body[class*=page-support] .support-list .list-group-item,
body[class*=page-best-practices] .support-list .list-group-item {
    border-color: #ededed
}

body[class*=page-support] .support-list .item-icon,
body[class*=page-best-practices] .support-list .item-icon {
    float: left;
    display: inline-block;
    width: 20px;
    height: 21px;
    margin-right: 16px;
    background-size: 20px 21px
}

body[class*=page-support] .support-list .item-icon.icon-q,
body[class*=page-best-practices] .support-list .item-icon.icon-q {
    background-image: url(../images/support/list-icon-q@2x.png)
}

body[class*=page-support] .support-list .item-icon.icon-a,
body[class*=page-best-practices] .support-list .item-icon.icon-a {
    margin-top: 2px;
    background-image: url(../images/support/list-icon-a@2x.png)
}

body[class*=page-support] .support-list .item-title,
body[class*=page-best-practices] .support-list .item-title {
    line-height: 21px;
    font-size: 20px
}

body[class*=page-support] .support-list .item-content,
body[class*=page-best-practices] .support-list .item-content {
    padding-top: 14px;
    display: none
}

body[class*=page-support] .support-list .item-content.is-open,
body[class*=page-best-practices] .support-list .item-content.is-open {
    display: block
}

body[class*=page-support] .support-list .item-content .content-body,
body[class*=page-best-practices] .support-list .item-content .content-body {
    overflow: hidden
}

body[class*=page-support] .support-list .item-content .content-body.readable,
body[class*=page-best-practices] .support-list .item-content .content-body.readable {
    font-size: 14px;
    color: grey
}

body[class*=page-support] .support-list .item-content .content-body.readable>:last-child,
body[class*=page-best-practices] .support-list .item-content .content-body.readable>:last-child {
    margin-bottom: 0
}

body[class*=page-support] .support-list a,
body[class*=page-best-practices] .support-list a {
    color: #6e6e6e;
    text-decoration: none
}

body[class*=page-support] .support-list a:hover,
body[class*=page-best-practices] .support-list a:hover {
    color: #03a9f4
}

body[class*=page-support] .quick-nav,
body[class*=page-best-practices] .quick-nav {
    padding: 4px 0 50px
}

body[class*=page-support] .quick-nav .card,
body[class*=page-best-practices] .quick-nav .card {
    display: block;
    min-height: 105px;
    margin-top: 16px;
    border: 1px solid #d9d9d9;
    border-radius: 3px;
    text-align: center;
    color: grey;
    -webkit-transition: border-color 218ms;
    -o-transition: border-color 218ms;
    transition: border-color 218ms
}

body[class*=page-support] .quick-nav .card:hover,
body[class*=page-best-practices] .quick-nav .card:hover {
    border-color: #03a9f4
}

body[class*=page-support] .quick-nav .card.contact,
body[class*=page-best-practices] .quick-nav .card.contact {
    padding: 24px 10px
}

body[class*=page-support] .quick-nav .card .nav-icon,
body[class*=page-best-practices] .quick-nav .card .nav-icon {
    display: inline-block;
    background-repeat: no-repeat;
    margin-right: 20px
}

@media (max-width:930px) {
    body[class*=page-support] .quick-nav .card .nav-icon,
    body[class*=page-best-practices] .quick-nav .card .nav-icon {
        margin-right: 10px
    }
}

body[class*=page-support] .quick-nav .card .desc,
body[class*=page-best-practices] .quick-nav .card .desc {
    font-size: 18px
}

body[class*=page-support] .quick-nav .card.with-icon,
body[class*=page-best-practices] .quick-nav .card.with-icon {
    height: 105px;
    background-repeat: no-repeat
}

body[class*=page-support] .quick-nav .card.with-icon.case .nav-icon,
body[class*=page-best-practices] .quick-nav .card.with-icon.case .nav-icon {
    width: 61px;
    height: 60px;
    background-image: url(../images/support/quick-nav-case@2x.png);
    background-size: 61px 60px
}

body[class*=page-support] .quick-nav .card.with-icon.community .nav-icon,
body[class*=page-best-practices] .quick-nav .card.with-icon.community .nav-icon {
    width: 63px;
    height: 47px;
    background-image: url(../images/support/quick-nav-community@2x.png);
    background-size: 63px 47px
}

body[class*=page-support] .quick-nav .card.with-icon .desc,
body[class*=page-best-practices] .quick-nav .card.with-icon .desc {
    position: relative;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    transform: translate(0, -50%)
}

body[class*=page-support] .quick-nav .card.with-icon .desc>*,
body[class*=page-best-practices] .quick-nav .card.with-icon .desc>* {
    vertical-align: middle
}

@media (max-width:991px) {
    body[class*=page-support] .support-list,
    body[class*=page-best-practices] .support-list {
        margin-bottom: 0
    }
    body[class*=page-support] .quick-nav,
    body[class*=page-best-practices] .quick-nav {
        padding-top: 0;
        padding-bottom: 10px
    }
    body[class*=page-support] .quick-nav .card,
    body[class*=page-best-practices] .quick-nav .card {
        margin-top: 10px
    }
}

body[class*=page-support] .typography section:after,
body[class*=page-best-practices] .typography section:after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: #ededed;
    margin: 40px 0
}

@media (max-width:767px) {
    body[class*=page-support] .typography section:after,
    body[class*=page-best-practices] .typography section:after {
        margin: 25px 0
    }
}

body[class*=page-support] .typography section.no-divline:after,
body[class*=page-support] .typography section:last-child:after,
body[class*=page-best-practices] .typography section.no-divline:after,
body[class*=page-best-practices] .typography section:last-child:after {
    display: none
}

body[class*=page-support] .typography section:last-child>:last-child,
body[class*=page-best-practices] .typography section:last-child>:last-child {
    margin-bottom: 0
}

body[class*=page-support] .typography h3,
body[class*=page-support] .typography h4,
body[class*=page-support] .typography h5,
body[class*=page-best-practices] .typography h3,
body[class*=page-best-practices] .typography h4,
body[class*=page-best-practices] .typography h5 {
    color: #383838
}

body[class*=page-support] .typography h3,
body[class*=page-best-practices] .typography h3 {
    font-size: 20px;
    margin-bottom: 26px
}

body[class*=page-support] .typography h4,
body[class*=page-best-practices] .typography h4 {
    margin-bottom: 16px
}

body[class*=page-support] .typography h5,
body[class*=page-best-practices] .typography h5 {
    margin-top: 30px
}

body[class*=page-support] .typography a,
body[class*=page-best-practices] .typography a {
    color: #9c9c9c
}

body[class*=page-support] .typography a:hover,
body[class*=page-best-practices] .typography a:hover {
    color: #03a9f4
}

body[class*=page-support] .typography a .icon-chevron-right,
body[class*=page-best-practices] .typography a .icon-chevron-right {
    font-size: .8em;
    margin-left: 5px
}

body[class*=page-support] .typography .number,
body[class*=page-best-practices] .typography .number {
    float: left;
    width: 16px;
    height: 16px;
    line-height: 16px;
    margin-right: 8px;
    margin-top: 1px;
    border-radius: 50%;
    color: #fff;
    background-color: grey;
    text-align: center;
    font-size: 11px
}

body[class*=page-support] .typography figure,
body[class*=page-best-practices] .typography figure {
    background: #ededed;
    margin-bottom: 20px
}

body[class*=page-support] .typography figure img,
body[class*=page-best-practices] .typography figure img {
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 100%\9;
    max-width: 100%;
    height: auto
}

body[class*=page-support] .typography .table-responsive::-webkit-scrollbar-track,
body[class*=page-best-practices] .typography .table-responsive::-webkit-scrollbar-track {
    background: #d9d9d9
}

body[class*=page-support] .typography .table-responsive::-webkit-scrollbar-thumb,
body[class*=page-best-practices] .typography .table-responsive::-webkit-scrollbar-thumb {
    background: #a6a6a6
}

body[class*=page-support] .typography .table-responsive::-webkit-scrollbar,
body[class*=page-best-practices] .typography .table-responsive::-webkit-scrollbar {
    height: 7px
}

body[class*=page-support] .typography .table,
body[class*=page-best-practices] .typography .table {
    margin-bottom: 10px
}

body[class*=page-support] .typography .table.c-1 td,
body[class*=page-support] .typography .table.c-1 th,
body[class*=page-best-practices] .typography .table.c-1 td,
body[class*=page-best-practices] .typography .table.c-1 th {
    width: 100%
}

body[class*=page-support] .typography .table.c-2 td,
body[class*=page-support] .typography .table.c-2 th,
body[class*=page-best-practices] .typography .table.c-2 td,
body[class*=page-best-practices] .typography .table.c-2 th {
    width: 50%
}

body[class*=page-support] .typography .table.c-3 td,
body[class*=page-support] .typography .table.c-3 th,
body[class*=page-best-practices] .typography .table.c-3 td,
body[class*=page-best-practices] .typography .table.c-3 th {
    width: 33.33333333%
}

body[class*=page-support] .typography .table.c-4 td,
body[class*=page-support] .typography .table.c-4 th,
body[class*=page-best-practices] .typography .table.c-4 td,
body[class*=page-best-practices] .typography .table.c-4 th {
    width: 25%
}

body[class*=page-support] .typography .table.c-5 td,
body[class*=page-support] .typography .table.c-5 th,
body[class*=page-best-practices] .typography .table.c-5 td,
body[class*=page-best-practices] .typography .table.c-5 th {
    width: 20%
}

body[class*=page-support] .typography .table tbody td,
body[class*=page-support] .typography .table thead th,
body[class*=page-best-practices] .typography .table tbody td,
body[class*=page-best-practices] .typography .table thead th {
    padding: 10px 15px;
    position: relative
}

body[class*=page-support] .typography .table thead tr,
body[class*=page-best-practices] .typography .table thead tr {
    background: #ededed
}

body[class*=page-support] .typography .table thead th,
body[class*=page-best-practices] .typography .table thead th {
    border-bottom-width: 1px!important
}

@media (min-width:768px) {
    body[class*=page-support] .typography .table,
    body[class*=page-best-practices] .typography .table {
        margin-top: 30px
    }
    body[class*=page-support] .typography .table thead:after,
    body[class*=page-best-practices] .typography .table thead:after {
        content: '_';
        display: block;
        position: relative;
        left: -1px;
        line-height: 10px;
        background: #fff;
        text-indent: -10000%
    }
}

body[class*=page-support] .typography .table tbody,
body[class*=page-best-practices] .typography .table tbody {
    color: #9c9c9c
}

body[class*=page-support] .typography .table tbody tr>td:first-child,
body[class*=page-best-practices] .typography .table tbody tr>td:first-child {
    color: #6e6e6e
}

body[class*=page-support] .typography .table tbody .text-mini,
body[class*=page-best-practices] .typography .table tbody .text-mini {
    font-size: 12px
}

body[class*=page-support] .typography .table tbody .icon-help,
body[class*=page-best-practices] .typography .table tbody .icon-help {
    margin-left: 5px;
    cursor: help;
    color: #03a9f4
}

body[class*=page-support] .typography .table tbody .tooltip-arrow,
body[class*=page-best-practices] .typography .table tbody .tooltip-arrow {
    top: auto!important
}

body[class*=page-support] .typography .table tbody .icon-tick,
body[class*=page-best-practices] .typography .table tbody .icon-tick {
    color: #8bc34a
}

.page-support .support-category .category-grid {
    height: 280px;
    margin-top: 20px
}

@media (max-width:991px) {
    .page-support .support-category .category-grid {
        margin-top: 10px
    }
}

.page-support .support-category .category-grid a {
    display: block;
    width: 100%;
    height: 100%;
    background-color: #ededed;
    border: 1px solid #ededed;
    border-radius: 3px;
    -webkit-transition: border-color 218ms;
    -o-transition: border-color 218ms;
    transition: border-color 218ms
}

.page-support .support-category .category-grid a:hover {
    border-color: #03a9f4
}

.page-support .support-category .category-grid .category-icon {
    width: 100%;
    height: 220px;
    border-bottom: 1px solid #e0e0e0;
    background-position: center center;
    background-repeat: no-repeat
}

.page-support .support-category .category-grid .category-icon.beginner,
.page-support .support-category .category-grid .category-icon.icon-1 {
    background-size: 169px 92px;
    background-image: url(../images/support/category-beginner@2x.png)
}

.page-support .support-category .category-grid .category-icon.basic,
.page-support .support-category .category-grid .category-icon.icon-2 {
    background-size: 187px 104px;
    background-image: url(../images/support/category-basic@2x.png)
}

.page-support .support-category .category-grid .category-icon.advanced,
.page-support .support-category .category-grid .category-icon.icon-3 {
    background-size: 149px 135px;
    background-image: url(../images/support/category-advanced@2x.png)
}

.page-support .support-category .category-grid .category-icon.video {
    background-size: 174px 93px;
    background-image: url(../images/support/category-video@2x.png)
}

.page-support .support-category .category-grid .category-title {
    font-size: 16px;
    font-weight: 400;
    color: grey
}

.page-support .frequent-question {
    padding-top: 10px
}

.page-support .frequent-question .title {
    font-size: 18px
}

.page-support .frequent-question .question-wrapper {
    margin-top: 16px
}

@media (max-width:991px) {
    .page-support .frequent-question .title {
        margin-top: 0
    }
}

body[class*=page-support] .detail-wrapper,
body[class*=page-best-practices] .detail-wrapper {
    margin-top: 20px
}

body[class*=page-support] .detail-wrapper .question-detail,
body[class*=page-best-practices] .detail-wrapper .question-detail {
    position: relative;
    width: 100%;
    margin-bottom: 80px
}

body[class*=page-support] .detail-wrapper .question-detail .question-nav,
body[class*=page-best-practices] .detail-wrapper .question-detail .question-nav {
    position: absolute;
    left: 0;
    top: 0;
    width: 220px;
    padding: 20px 20px 0;
    background: rgba(255, 255, 255, .97);
    border: 1px solid #e8e8e8;
    border-radius: 3px
}

body[class*=page-support] .detail-wrapper .question-detail .question-nav.practices-articles,
body[class*=page-best-practices] .detail-wrapper .question-detail .question-nav.practices-articles {
    position: fixed;
    top: 110px;
    z-index: 100
}

body[class*=page-support] .detail-wrapper .question-detail .question-nav .toggle-switch,
body[class*=page-best-practices] .detail-wrapper .question-detail .question-nav .toggle-switch {
    display: none;
    position: absolute;
    right: -40px;
    top: -1px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    background: #f5f5f5;
    text-align: center;
    border: 1px solid #e8e8e8;
    border-left-color: #f5f5f5;
    border-radius: 0 3px 3px 0;
    cursor: pointer;
    opacity: .8;
    filter: alpha(opacity=80);
    -webkit-transition: all 218ms;
    -o-transition: all 218ms;
    transition: all 218ms
}

body[class*=page-support] .detail-wrapper .question-detail .question-nav .list-wrap,
body[class*=page-best-practices] .detail-wrapper .question-detail .question-nav .list-wrap {
    height: 100%;
    overflow-y: auto;
    -ms-overflow-style: none
}

body[class*=page-support] .detail-wrapper .question-detail .question-nav .list-wrap::-webkit-scrollbar,
body[class*=page-best-practices] .detail-wrapper .question-detail .question-nav .list-wrap::-webkit-scrollbar {
    display: none!important
}

body[class*=page-support] .detail-wrapper .question-detail .question-nav .nav-title,
body[class*=page-best-practices] .detail-wrapper .question-detail .question-nav .nav-title {
    display: block;
    margin-top: 0;
    margin-bottom: 16px;
    font-size: 14px;
    color: #383838
}

body[class*=page-support] .detail-wrapper .question-detail .question-nav .nav-title:hover,
body[class*=page-best-practices] .detail-wrapper .question-detail .question-nav .nav-title:hover {
    color: #03a9f4
}

body[class*=page-support] .detail-wrapper .question-detail .question-nav .title-nav,
body[class*=page-best-practices] .detail-wrapper .question-detail .question-nav .title-nav {
    margin-bottom: 5px
}

body[class*=page-support] .detail-wrapper .question-detail .question-nav .title-nav a,
body[class*=page-best-practices] .detail-wrapper .question-detail .question-nav .title-nav a {
    color: #6e6e6e;
    padding-left: 16px!important
}

body[class*=page-support] .detail-wrapper .question-detail .question-nav .title-nav a:before,
body[class*=page-best-practices] .detail-wrapper .question-detail .question-nav .title-nav a:before {
    content: '銉� ';
    font-weight: 700
}

body[class*=page-support] .detail-wrapper .question-detail .question-nav .question-list,
body[class*=page-best-practices] .detail-wrapper .question-detail .question-nav .question-list {
    margin-bottom: 30px
}

body[class*=page-support] .detail-wrapper .question-detail .question-nav .question-list.practices-articles,
body[class*=page-best-practices] .detail-wrapper .question-detail .question-nav .question-list.practices-articles {
    margin-bottom: 0
}

body[class*=page-support] .detail-wrapper .question-detail .question-nav .question-list:last-child,
body[class*=page-best-practices] .detail-wrapper .question-detail .question-nav .question-list:last-child {
    margin-bottom: 20px
}

body[class*=page-support] .detail-wrapper .question-detail .question-nav .question-list li,
body[class*=page-best-practices] .detail-wrapper .question-detail .question-nav .question-list li {
    border-radius: 3px
}

body[class*=page-support] .detail-wrapper .question-detail .question-nav .question-list li a,
body[class*=page-best-practices] .detail-wrapper .question-detail .question-nav .question-list li a {
    display: block;
    line-height: 21px;
    padding: 5px 0 5px 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

body[class*=page-support] .detail-wrapper .question-detail .question-nav .question-list li .question-title.practices-articles,
body[class*=page-support] .detail-wrapper .question-detail .question-nav .question-list li a.practices-articles,
body[class*=page-best-practices] .detail-wrapper .question-detail .question-nav .question-list li .question-title.practices-articles,
body[class*=page-best-practices] .detail-wrapper .question-detail .question-nav .question-list li a.practices-articles {
    padding-left: 10px
}

body[class*=page-support] .detail-wrapper .question-detail .question-nav .question-list li a:hover,
body[class*=page-best-practices] .detail-wrapper .question-detail .question-nav .question-list li a:hover {
    background: #f5f5f5
}

body[class*=page-support] .detail-wrapper .question-detail .question-nav .question-list li .question-title,
body[class*=page-best-practices] .detail-wrapper .question-detail .question-nav .question-list li .question-title {
    color: #6e6e6e
}

body[class*=page-support] .detail-wrapper .question-detail .question-nav .question-list li.is-current .question-title,
body[class*=page-best-practices] .detail-wrapper .question-detail .question-nav .question-list li.is-current .question-title {
    color: #03a9f4;
    background: #f5f5f5;
    border-left: 3px solid #03a9f4
}

body[class*=page-support] .detail-wrapper .question-detail .question-content,
body[class*=page-best-practices] .detail-wrapper .question-detail .question-content {
    margin-left: 260px
}

body[class*=page-support] .detail-wrapper .question-detail .question-content .summary:after,
body[class*=page-support] .detail-wrapper .question-detail .question-content .summary:before,
body[class*=page-best-practices] .detail-wrapper .question-detail .question-content .summary:after,
body[class*=page-best-practices] .detail-wrapper .question-detail .question-content .summary:before {
    content: " ";
    display: table
}

body[class*=page-support] .detail-wrapper .question-detail .question-content .summary .desc p:last-child,
body[class*=page-best-practices] .detail-wrapper .question-detail .question-content .summary .desc p:last-child {
    margin-bottom: 0!important
}

body[class*=page-support] .detail-wrapper .question-detail .question-content .summary .desc.no-video,
body[class*=page-best-practices] .detail-wrapper .question-detail .question-content .summary .desc.no-video {
    margin-bottom: 0
}

body[class*=page-support] .detail-wrapper .question-detail .question-content .summary .desc:not(.no-video),
body[class*=page-best-practices] .detail-wrapper .question-detail .question-content .summary .desc:not(.no-video) {
    float: left;
    max-width: 600px
}

body[class*=page-support] .detail-wrapper .question-detail .question-content .summary .desc:not(.no-video) p,
body[class*=page-best-practices] .detail-wrapper .question-detail .question-content .summary .desc:not(.no-video) p {
    margin-bottom: 30px
}

body[class*=page-support] .detail-wrapper .question-detail .question-content .summary .side,
body[class*=page-best-practices] .detail-wrapper .question-detail .question-content .summary .side {
    float: right
}

body[class*=page-support] .detail-wrapper .question-detail .question-content .summary .side .video,
body[class*=page-best-practices] .detail-wrapper .question-detail .question-content .summary .side .video {
    position: relative;
    width: 250px;
    height: 140px;
    margin-bottom: 10px;
    overflow: hidden
}

body[class*=page-support] .detail-wrapper .question-detail .question-content .summary .side .video img,
body[class*=page-best-practices] .detail-wrapper .question-detail .question-content .summary .side .video img {
    display: block;
    width: 100%\9;
    max-width: 100%;
    height: auto
}

body[class*=page-support] .detail-wrapper .question-detail .question-content .summary .side .video .video-layer,
body[class*=page-best-practices] .detail-wrapper .question-detail .question-content .summary .side .video .video-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    font-size: 18px;
    color: #fff;
    cursor: pointer;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

body[class*=page-support] .detail-wrapper .question-detail .question-content .summary .side .video .video-layer:hover,
body[class*=page-best-practices] .detail-wrapper .question-detail .question-content .summary .side .video .video-layer:hover {
    background: rgba(0, 0, 0, .55)
}

body[class*=page-support] .detail-wrapper .question-detail .question-content .summary .side .video .video-play,
body[class*=page-best-practices] .detail-wrapper .question-detail .question-content .summary .side .video .video-play {
    width: 0;
    height: 0;
    border-width: 8px 0 8px 14px;
    border-style: solid;
    border-top-color: transparent;
    border-bottom-color: transparent;
    margin-left: 12px
}

@media (max-width:1200px) {
    body[class*=page-support] .detail-wrapper .question-detail .question-content .summary .desc,
    body[class*=page-support] .detail-wrapper .question-detail .question-content .summary .side,
    body[class*=page-best-practices] .detail-wrapper .question-detail .question-content .summary .desc,
    body[class*=page-best-practices] .detail-wrapper .question-detail .question-content .summary .side {
        float: none;
        width: 100%
    }
    body[class*=page-support] .detail-wrapper .question-detail .question-content .summary .desc,
    body[class*=page-best-practices] .detail-wrapper .question-detail .question-content .summary .desc {
        margin-bottom: 10px
    }
    body[class*=page-support] .detail-wrapper .question-detail .question-content .summary .desc br:not(.visible-always),
    body[class*=page-best-practices] .detail-wrapper .question-detail .question-content .summary .desc br:not(.visible-always) {
        display: none
    }
    body[class*=page-support] .detail-wrapper .question-detail .question-content .summary .desc p,
    body[class*=page-best-practices] .detail-wrapper .question-detail .question-content .summary .desc p {
        margin-bottom: 10px!important
    }
}

@media (max-width:991px) {
    body[class*=page-support] .detail-wrapper .question-detail .question-nav,
    body[class*=page-best-practices] .detail-wrapper .question-detail .question-nav {
        width: 180px
    }
    body[class*=page-support] .detail-wrapper .question-detail .question-content,
    body[class*=page-best-practices] .detail-wrapper .question-detail .question-content {
        margin-left: 220px
    }
}

@media (max-width:767px) {
    body[class*=page-support] .detail-wrapper,
    body[class*=page-best-practices] .detail-wrapper {
        margin-top: 0
    }
    body[class*=page-support] .detail-wrapper .question-detail,
    body[class*=page-best-practices] .detail-wrapper .question-detail {
        margin-bottom: 30px
    }
    body[class*=page-support] .detail-wrapper .question-detail .question-nav,
    body[class*=page-best-practices] .detail-wrapper .question-detail .question-nav {
        position: fixed;
        z-index: 1041!important;
        left: -60%;
        top: 70px;
        width: 60%;
        padding-left: 0;
        padding-right: 0;
        height: 100%;
        -webkit-transition: all 218ms;
        -o-transition: all 218ms;
        transition: all 218ms
    }
    body[class*=page-support] .detail-wrapper .question-detail .question-nav .toggle-switch,
    body[class*=page-best-practices] .detail-wrapper .question-detail .question-nav .toggle-switch {
        display: block
    }
    body[class*=page-support] .detail-wrapper .question-detail .question-nav .nav-title,
    body[class*=page-best-practices] .detail-wrapper .question-detail .question-nav .nav-title {
        margin: 0 20px 6px
    }
    body[class*=page-support] .detail-wrapper .question-detail .question-nav.is-open,
    body[class*=page-best-practices] .detail-wrapper .question-detail .question-nav.is-open {
        left: -1px;
        top: 0
    }
    body[class*=page-support] .detail-wrapper .question-detail .question-nav.is-open .toggle-switch,
    body[class*=page-best-practices] .detail-wrapper .question-detail .question-nav.is-open .toggle-switch {
        right: -1px;
        line-height: 39px;
        padding-left: 2px;
        border-left-color: #e8e8e8;
        background: rgba(255, 255, 255, .97);
        opacity: 1;
        filter: alpha(opacity=100)
    }
    body[class*=page-support] .detail-wrapper .question-detail .question-nav.is-open .toggle-switch .icon:before,
    body[class*=page-best-practices] .detail-wrapper .question-detail .question-nav.is-open .toggle-switch .icon:before {
        content: "\b008"!important
    }
    body[class*=page-support] .detail-wrapper .question-detail .question-nav .question-list:not(:last-child),
    body[class*=page-best-practices] .detail-wrapper .question-detail .question-nav .question-list:not(:last-child) {
        padding-bottom: 15px;
        margin-bottom: 15px;
        border-bottom: 1px solid #e8e8e8
    }
    body[class*=page-support] .detail-wrapper .question-detail .question-nav .question-list .is-current+li,
    body[class*=page-best-practices] .detail-wrapper .question-detail .question-nav .question-list .is-current+li {
        border-top: 1px dashed #e8e8e8
    }
    body[class*=page-support] .detail-wrapper .question-detail .question-nav .question-list a,
    body[class*=page-best-practices] .detail-wrapper .question-detail .question-nav .question-list a {
        padding: 10px 20px 10px 40px!important
    }
    body[class*=page-support] .detail-wrapper .question-detail .question-content,
    body[class*=page-best-practices] .detail-wrapper .question-detail .question-content {
        margin-left: 0
    }
}

@media (min-width:768px) {
    body[class*=page-support] .detail-wrapper .question-detail .question-content,
    body[class*=page-best-practices] .detail-wrapper .question-detail .question-content {
        min-height: 780px
    }
    body[class*=page-support] .nav-backdrop,
    body[class*=page-best-practices] .nav-backdrop {
        display: none
    }
}

body[class*=page-support] .article-toolbar,
body[class*=page-best-practices] .article-toolbar {
    padding-bottom: 0
}

body[class*=page-support] .article-toolbar .btn,
body[class*=page-support] .article-toolbar .btn:hover,
body[class*=page-best-practices] .article-toolbar .btn,
body[class*=page-best-practices] .article-toolbar .btn:hover {
    color: #fff
}

body[class*=page-support] .article-toolbar .article-share-group,
body[class*=page-best-practices] .article-toolbar .article-share-group {
    margin-top: 40px
}

body[class*=page-support] .article-toolbar .article-share-group a,
body[class*=page-best-practices] .article-toolbar .article-share-group a {
    display: inline-block;
    width: 50px;
    height: 50px;
    margin: 0 10px;
    border: 1px solid #a6a6a6;
    color: #a6a6a6;
    border-radius: 50%;
    padding: 0;
    -webkit-transition: all 218ms;
    -o-transition: all 218ms;
    transition: all 218ms
}

body[class*=page-support] .article-toolbar .article-share-group a .icon,
body[class*=page-best-practices] .article-toolbar .article-share-group a .icon {
    font-size: 28px;
    line-height: 50px
}

body[class*=page-support] .article-toolbar .article-share-group a.weibo:hover,
body[class*=page-best-practices] .article-toolbar .article-share-group a.weibo:hover {
    border-color: #c5282f;
    color: #c5282f
}

body[class*=page-support] .article-toolbar .article-share-group a.wechat:hover,
body[class*=page-best-practices] .article-toolbar .article-share-group a.wechat:hover {
    border-color: #44b549;
    color: #44b549
}

body[class*=page-support] .article-toolbar .article-share-group a.twitter:hover,
body[class*=page-best-practices] .article-toolbar .article-share-group a.twitter:hover {
    border-color: #7fdbff;
    color: #7fdbff
}

body[class*=page-support] .article-toolbar .article-share-group a.facebook:hover,
body[class*=page-best-practices] .article-toolbar .article-share-group a.facebook:hover {
    border-color: #3b5998;
    color: #3b5998
}

body[class*=page-best-practices] .typography h4 {
    font-size: 18px
}

body[class*=page-best-practices] .typography h5,
body[class*=page-best-practices] .typography p,
body[class*=page-best-practices] .typography ul {
    font-size: 16px
}

body[class*=page-best-practices] .typography ul {
    margin-left: 30px;
    list-style: inherit
}

body[class*=page-best-practices] .typography ul li ul li {
    list-style: circle
}

body[class*=page-best-practices] .typography section:first-child:after {
    height: 0;
    margin-top: 0
}

body[class*=page-best-practices] .typography figure {
    background-color: #fff
}

.page-tour .slide-c,
.page-tour .slide-e,
.page-tour .slide-h {
    background-color: #F7F7F7
}

.page-tour {
    padding-top: 0
}

.page-tour .slide {
    position: relative;
    overflow: hidden;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
    font-size: 18px;
    line-height: 1.66
}

.page-tour .slide p {
    color: grey;
    margin-bottom: 5px
}

.page-tour .slide p.white {
    color: #FFF
}

.page-tour .slide .slide-header {
    padding-top: 60px;
    margin-bottom: 36px
}

.page-tour .slide .slide-header h1 {
    margin-top: 0;
    margin-bottom: 30px;
    font-size: 36px
}

.page-tour .slide .slide-header p {
    max-width: 690px;
    margin: 0 auto
}

.page-tour .slide .slide-content img,
.page-tour .slide .slide-footer img {
    width: 100%;
    max-width: 980px
}

.page-tour .slide .slide-content {
    padding-bottom: 50px
}

.page-tour .slide-row {
    min-height: 570px;
    padding-top: 55px
}

.page-tour .slide-row .slide-left p {
    color: #383838;
    max-width: 360px;
    padding: 50px 0
}

.page-tour .slide-row .slide-right {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 55%;
    max-width: 1020px;
    height: 500px
}

.page-tour .slide-row .slide-right img {
    position: absolute;
    left: 0;
    height: 100%;
    width: auto
}

.page-tour .slide-b,
.page-tour .slide-c,
.page-tour .slide-d,
.page-tour .slide-e,
.page-tour .slide-f,
.page-tour .slide-l {
    min-height: 340px
}

.page-tour .slide-a {
    max-height: 1100px;
    padding-top: 80px;
    background-image: -webkit-linear-gradient(top, #fff 0, #eaeaea 100%);
    background-image: -o-linear-gradient(top, #fff 0, #eaeaea 100%);
    background-image: linear-gradient(to bottom, #fff 0, #eaeaea 100%);
    background-repeat: repeat-x;
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffeaeaea', GradientType=0)
}

.page-tour .slide-a .slide-header {
    padding-top: 30px;
    margin-bottom: 40px
}

.page-tour .slide-a .slide-header h1 {
    margin-bottom: 44px;
    font-size: 58px
}

.page-tour .slide-a .slide-header p {
    color: #383838;
    max-width: 855px
}

.page-tour .slide-a .slide-content {
    padding-bottom: 60px
}

.page-tour .slide-a .slide-content img {
    max-width: 1044px;
    margin-bottom: 50px
}

.page-tour .slide-a .slide-content .tip {
    margin-bottom: 15px;
    color: #000
}

.page-tour .slide-a .slide-content .btn {
    padding: 20px 16px;
    min-width: 240px
}

.page-tour .slide-h .slide-row .slide-left p,
.page-tour .slide-i .slide-row .slide-left p {
    padding-top: 40px;
    margin-left: -10px
}

.page-tour .slide-g .slide-left {
    margin-top: 100px
}

.page-tour .slide-h .slide-row .slide-right .notification {
    position: absolute;
    top: 134px;
    left: -312px;
    width: 431px;
    height: 97px
}

.page-tour .slide-j {
    max-height: 680px;
    background-image: url(../images/tour/j-bg.png)
}

.page-tour .slide-j .slide-header {
    padding-top: 60px;
    margin-bottom: 20px
}

.page-tour .slide-j .slide-header p {
    max-width: 800px
}

.page-tour .slide-j .slide-footer img {
    max-width: 985px
}

.page-tour .slide-j a {
    display: inline-block;
    margin-top: 20px;
    margin-bottom: 10px;
    color: #FFF;
    -webkit-transition: all .35s ease-in-out;
    -o-transition: all .35s ease-in-out;
    transition: all .35s ease-in-out
}

.page-tour .slide-j a span {
    position: relative;
    top: 1px;
    font-size: 16px
}

.page-tour .slide-j a:hover {
    text-shadow: 0 0 5px rgba(255, 255, 255, .5)
}

.page-tour .slide-k .slide-row .slide-left p {
    max-width: 360px
}

.page-tour .slide-k .slide-row .slide-right img {
    padding-bottom: 45px
}

.page-tour .slide-l {
    background-image: url(../images/tour/l-bg.png)
}

.page-tour .slide-l .slide-row .slide-left p {
    max-width: 360px;
    padding-top: 60px;
    margin-left: -10px
}

.page-tour .slide-m .slide-header {
    margin-bottom: 110px
}

.page-tour .slide-m .slide-header .title {
    margin-top: 50px
}

.page-tour .slide-m .slide-header .title img {
    width: 90%;
    max-width: 248px
}

.page-tour .slide-m .slide-header p {
    color: #383838;
    margin: 40px auto 38px
}

.page-tour .slide-m .slide-header .btn {
    padding: 16px 24px;
    line-height: 20px;
    min-width: 140px
}

@media (max-width:992px) {
    .page-tour .slides .slide .slide-row {
        padding-top: 20px;
        text-align: center
    }
    .page-tour .slides .slide .slide-row .slide-left p {
        max-width: 620px;
        margin: 0 auto
    }
    .page-tour .slides .slide .slide-row .slide-right {
        position: relative;
        width: auto;
        height: 100%
    }
    .page-tour .slides .slide .slide-row .slide-right img {
        width: 100%;
        height: auto
    }
    .page-tour .slide-g .slide-left {
        margin-top: 0
    }
    .page-tour .slide-h .notification {
        display: none!important
    }
    .page-tour .slide-k .slide-row .slide-right {
        max-width: 100%
    }
}

@media (max-width:768px) {
    .page-tour .slides .slide {
        font-size: 16px
    }
    .page-tour .slides .slide.slide-a .slide-header h1 {
        font-size: 38px
    }
    .page-tour .slides .slide .slide-header h1 {
        font-size: 24px
    }
    .page-tour .slides .slide .slide-row {
        min-height: auto
    }
    .page-tour .slides .slide .slide-row .slide-right {
        min-height: 200px;
        height: auto
    }
    .page-tour .slides .slide-a .slide-header {
        padding-top: 0
    }
    .page-tour .slides .slide-m .slide-header {
        padding-top: 0;
        margin-bottom: 60px
    }
}

@media (max-width:480px) {
    .page-tour .slides .slide .slide-header h1 {
        font-size: 22px
    }
}

@media (max-width:320px) {
    .page-tour .slides .slide {
        font-size: 14px
    }
    .page-tour .slides .slide .slide-header h1 {
        font-size: 18px
    }
}

.page-unsupported {
    padding-top: 0
}

.page-unsupported .explain {
    margin: 130px 0
}

.page-unsupported .explain .title {
    margin-bottom: 20px
}

.page-unsupported .explain .title img {
    width: 90%;
    max-width: 480px
}

.page-unsupported .explain .why {
    font-size: 20px;
    color: #A6A6A6
}

.page-unsupported .browser:nth-child(2) {
    text-align: center
}

.page-unsupported .browser:last-child {
    text-align: right
}

.page-unsupported .browser .ie11 img {
    width: 125px;
    height: 178px
}

.page-unsupported .browser .chrome img {
    width: 170px;
    height: 181px
}

.page-unsupported .browser .firefox img {
    width: 148px;
    height: 185px
}

.page-unsupported .browser a:hover {
    opacity: .8;
    filter: alpha(opacity=80)
}

.page-unsupported .return {
    margin: 130px -10px 130px 0;
    text-align: right
}

.page-unsupported .return a {
    font-size: 20px
}

.page-unsupported .return a .icon {
    position: relative;
    top: 2px;
    right: 2px
}

@media (min-width:768px) and (max-width:992px) {
    .page-unsupported .browser {
        float: left;
        width: 33.33%
    }
}

@media (max-width:768px) {
    .page-unsupported .explain {
        margin: 60px 0
    }
    .page-unsupported .browser {
        margin-bottom: 60px
    }
    .page-unsupported .return {
        margin: 0 0 60px
    }
    .page-unsupported .browser,
    .page-unsupported .browser:last-child,
    .page-unsupported .return {
        text-align: center
    }
}

.page-csr .csr-jumbotron {
    background-color: transparent;
    background-image: url(../images/walfare-top-bg.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    padding: 20px 0 25px
}

@media (max-width:767px) {
    .page-csr .csr-jumbotron {
        margin-bottom: 0
    }
}

.page-csr .csr-jumbotron h1 {
    font-size: 36px;
    color: #8ec448
}

@media (min-width:768px) {
    .page-csr .csr-jumbotron h1 {
        margin: 50px 0
    }
}

@media (max-width:767px) {
    .page-csr .csr-jumbotron h1 {
        font-size: 22px
    }
}

@media (max-width:480px) {
    .page-csr .csr-jumbotron h1 {
        font-size: 18px
    }
    .page-csr .csr-jumbotron h1 .header-icon {
        display: block;
        margin: 0 auto
    }
}

.page-csr .csr-jumbotron .header-icon {
    display: inline-block;
    width: 60px;
    height: 60px;
    margin-top: -5px;
    vertical-align: middle;
    background-image: url(../images/welfare-icons.png);
    background-position: 0 -60px;
    background-size: 180px 120px
}

@media (-webkit-min-device-pixel-ratio:2),
(min-resolution:192dpi) {
    .page-csr .csr-jumbotron .header-icon {
        background-image: url(../images/welfare-icons@2x.png)
    }
}

.page-csr .csr-description {
    text-align: left;
    font-size: 16px;
    letter-spacing: 1px;
    line-height: 32px;
    color: #a6a6a6
}

@media (min-width:768px) {
    .page-csr .csr-description {
        margin: 0 150px 50px
    }
}

.page-csr .csr-highlight {
    margin: auto 150px;
    padding: 10px;
    color: #fff;
    text-align: center;
    background-color: #8ec448
}

.page-csr .csr-highlight h4 {
    font-size: 16px;
    line-height: 20px
}

@media (min-width:480px) {
    .page-csr .csr-highlight {
        padding: 26px
    }
    .page-csr .csr-highlight>h4 {
        font-size: 18px;
        line-height: 32px
    }
}

.page-csr .site-main {
    background-image: url(../images/walfare-bottom-bg.png);
    background-repeat: no-repeat;
    background-position: center bottom
}

.page-csr .site-main .container {
    position: relative;
    padding-bottom: 260px
}

.page-csr .site-main .container .tree {
    position: absolute;
    left: -200px;
    bottom: 0;
    width: 264px;
    height: 395px;
    background-image: url(../images/welfare-tree.png)
}

@media (-webkit-min-device-pixel-ratio:2),
(min-resolution:192dpi) {
    .page-csr .site-main .container .tree {
        background-image: url(../images/welfare-tree@2x.png);
        background-size: 264px 395px
    }
}

.page-csr .csr-form {
    margin-left: 150px;
    margin-right: 150px
}

.page-csr .form-input .form-button-icon {
    display: inline-block;
    vertical-align: middle;
    width: 60px;
    height: 60px;
    background-image: url(../images/welfare-icons.png);
    background-size: 180px 120px
}

@media (-webkit-min-device-pixel-ratio:2),
(min-resolution:192dpi) {
    .page-csr .form-input .form-button-icon {
        background-image: url(../images/welfare-icons@2x.png)
    }
}

.page-csr .form-input .welgroup .form-button-icon {
    background-position: 0 0
}

.page-csr .form-input .welgroup.active .form-button-icon {
    background-position: 0 -60px
}

.page-csr .form-input .student .form-button-icon {
    background-position: -60px 0
}

.page-csr .form-input .student.active .form-button-icon {
    background-position: -60px -60px
}

.page-csr .form-input .opensorce .form-button-icon {
    background-position: -120px 0
}

.page-csr .form-input .opensorce.active .form-button-icon {
    background-position: -120px -60px
}

.page-csr .lbl_contant {
    font-size: 18px;
    color: grey;
    font-weight: 400;
    padding: 10px 0;
    margin: 0 11px
}

.page-csr .type {
    float: left;
    border: 1px solid #eee;
    height: 100px;
    border-radius: 4px;
    width: 182px;
    margin-right: 25px;
    position: relative;
    line-height: 100px;
    text-align: center;
    font-size: 18px;
    cursor: pointer
}

.page-csr .type:last-child {
    width: 183px;
    margin-right: 0
}

.page-csr .type img {
    width: 26px;
    height: 26px;
    position: absolute;
    right: -9px;
    top: -9px;
    display: none
}

.page-csr .type.active {
    border: 2px solid #8ec448;
    color: #8ec448
}

.page-csr .type.active img {
    display: inline
}

.page-csr #submit {
    display: block;
    color: #fff;
    background: #8ec448;
    width: 100%;
    text-align: center;
    height: 70px;
    font-size: 23px;
    line-height: 72px;
    border-radius: 2px;
    text-decoration: none;
    cursor: pointer;
    -webkit-transition: all 218ms;
    -o-transition: all 218ms;
    transition: all 218ms
}

.page-csr #submit:hover {
    background: #9aca5b
}

.page-csr #submit img {
    position: relative;
    top: -2px;
    left: 20px;
    width: 36px;
    height: 31px
}

.page-csr #submit.disabled,
.page-csr #submit.disabled:hover {
    background: #8ec448;
    opacity: .7;
    filter: alpha(opacity=70)
}

@media (max-width:1199px) {
    .page-csr .csr-description,
    .page-csr .csr-form,
    .page-csr .csr-highlight {
        margin-left: 50px;
        margin-right: 50px
    }
}

@media (max-width:991px) {
    .page-csr .csr-description,
    .page-csr .csr-form,
    .page-csr .csr-highlight {
        margin-left: 0;
        margin-right: 0
    }
}

.page-csr .jinshuju-form {
    max-width: 700px;
    margin: 0 auto
}

.modal-video .modal-content{
    background: #000;
}