.h1-title {
    font-size: 24px;
    font-weight: 600
}

.h2-title {
    font-size: 20px
}

@media screen and (min-width: 768px) {
    .h1-title {
        font-size:38px
    }

    .h2-title {
        font-size: 24px
    }
}

.snotifyToast {
    animation-fill-mode: both
}

.snotify-leftBottom .fadeIn,.snotify-leftCenter .fadeIn,.snotify-leftTop .fadeIn {
    animation-name: fadeInLeft
}

.snotify-leftBottom .fadeOut,.snotify-leftCenter .fadeOut,.snotify-leftTop .fadeOut {
    animation-name: fadeOutLeft
}

.snotify-rightBottom .fadeIn,.snotify-rightCenter .fadeIn,.snotify-rightTop .fadeIn {
    animation-name: fadeInRight
}

.snotify-rightBottom .fadeOut,.snotify-rightCenter .fadeOut,.snotify-rightTop .fadeOut {
    animation-name: fadeOutRight
}

.snotify-centerTop .fadeIn {
    animation-name: fadeInDown
}

.snotify-centerTop .fadeOut {
    animation-name: fadeOutUp
}

.snotify-centerCenter .fadeIn {
    animation-name: fadeIn
}

.snotify-centerCenter .fadeOut {
    animation-name: fadeOut
}

.snotify-centerBottom .fadeIn {
    animation-name: fadeInUp
}

.snotify-centerBottom .fadeOut {
    animation-name: fadeOutDown
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translate3d(-100%,0,0) scaleX(1.2)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translate3d(100%,0,0) scaleX(1.2)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translate3d(0,100%,0) scaleY(1.2)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translate3d(0,-100%,0) scaleY(1.2)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@keyframes fadeOutDown {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(0,100%,0)
    }
}

@keyframes fadeOutLeft {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(-100%,0,0)
    }
}

@keyframes fadeOutRight {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(100%,0,0)
    }
}

@keyframes fadeOutUp {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(0,-100%,0)
    }
}

@keyframes appear {
    0% {
        max-height: 0
    }

    to {
        max-height: 50vh
    }
}

@keyframes disappear {
    0% {
        max-height: 50vh;
        opacity: 0
    }

    to {
        max-height: 0;
        opacity: 0
    }
}

@keyframes async {
    0% {
        transform: translateY(-50%) rotate(0deg)
    }

    to {
        transform: translateY(-50%) rotate(1turn)
    }
}

.snotify {
    position: fixed;
    z-index: 1999;
    box-sizing: border-box;
    display: block;
    width: 360px;
    pointer-events: none
}

@media screen and (min-width: 568px) {
    .snotify {
        width:390px
    }
}

.snotify * {
    box-sizing: border-box
}

.snotify-leftBottom,.snotify-leftCenter,.snotify-leftTop {
    left: 10px
}

.snotify-rightBottom,.snotify-rightCenter,.snotify-rightTop {
    right: 10px
}

.snotify-centerBottom,.snotify-centerCenter,.snotify-centerTop {
    left: calc(50% - 150px)
}

.snotify-centerTop,.snotify-leftTop,.snotify-rightTop {
    top: 10px
}

.snotify-centerCenter,.snotify-leftCenter,.snotify-rightCenter {
    top: 50%;
    transform: translateY(-50%)
}

.snotify-centerBottom,.snotify-leftBottom,.snotify-rightBottom {
    bottom: 10px
}

.snotify-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9998;
    background-color: #000;
    opacity: 0;
    transition: opacity .3s
}

.snotifyToast {
    display: block;
    height: 100%;
    max-height: 300px;
    margin: 5px;
    overflow: hidden;
    pointer-events: auto;
    opacity: 0
}

.snotifyToast--in {
    animation-name: appear
}

.snotifyToast--out {
    animation-name: disappear
}

.snotifyToast__inner {
    position: relative;
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-start;
    justify-content: center;
    min-height: 74px;
    padding: 8px 6px;
    font-size: 16px;
    color: #000;
    -webkit-box-align: start;
    -ms-flex-align: start;
    -webkit-box-pack: center;
    -ms-flex-pack: center
}

.snotifyToast__progressBar {
    position: relative;
    width: 100%;
    height: 5px;
    background-color: #c7c7c7
}

.snotifyToast__progressBar__percentage {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 100%;
    height: 5px;
    background-color: #4c4c4c
}

.snotifyToast__title {
    margin-bottom: 5px;
    font-size: 1.8em;
    line-height: 1.2em;
    color: #000
}

.snotifyToast__body {
    font-size: 1em;
    color: #000
}

.snotifyToast-show {
    opacity: 1;
    transform: translate(0)
}

.snotifyToast-remove {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(50%)
}

.snotify-success {
    border-left: 4px solid #4caf50
}

.snotify-info {
    border-left: 4px solid #1e88e5
}

.snotify-warning {
    border-left: 4px solid #ff9800
}

.snotify-error {
    border-left: 4px solid #f44336
}

.snotify-async {
    border-left: 4px solid #1e88e5
}

.snotify-confirm,.snotify-prompt {
    border-left: 4px solid #009688
}

.snotify-confirm .snotifyToast__inner,.snotify-prompt .snotifyToast__inner {
    padding: 10px 15px
}

.snotifyToast__input {
    position: relative;
    z-index: 1;
    display: inline-block;
    width: 100%;
    margin: 0;
    vertical-align: top;
    transition: all .5s;
    transition-delay: .3s;
    transition-timing-function: cubic-bezier(.2,1,.3,1)
}

.snotifyToast__input__field {
    position: relative;
    display: block;
    float: right;
    width: 100%;
    padding: .85em .5em;
    font-weight: 700;
    color: #333;
    background: transparent;
    border: none;
    border-radius: 0;
    opacity: 0;
    transition: opacity .3s;
    -webkit-appearance: none
}

.snotifyToast__input__field:focus {
    outline: none
}

.snotifyToast__input__label {
    position: absolute;
    left: 0;
    display: inline-block;
    float: right;
    width: 100%;
    height: 100%;
    padding: 0 .85em;
    font-size: 70.25%;
    font-weight: 700;
    color: #999;
    text-align: left;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-touch-callout: none
}

.snotifyToast__input__label:after,.snotifyToast__input__label:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    transition: transform .3s
}

.snotifyToast__input__label:before {
    border-top: 2px solid #009688;
    transition-delay: .3s;
    transform: translate3d(0,100%,0) translate3d(0,-2px,0)
}

.snotifyToast__input__label:after {
    z-index: -1;
    background: #eee;
    transform: scaleY(0);
    transform-origin: 50% 0
}

.snotifyToast__input__labelContent {
    position: relative;
    display: block;
    width: 100%;
    padding: 1em 0;
    transition: transform .3s .3s
}

.snotifyToast__input--filled {
    margin-top: 2.5em
}

.snotifyToast__input--filled .snotifyToast__input__field,.snotifyToast__input--filled:focus {
    opacity: 1;
    transition-delay: .3s
}

.snotifyToast__input--filled .snotifyToast__input__labelContent,.snotifyToast__input__field:focus+.snotifyToast__input__label .snotifyToast__input__labelContent {
    transition-timing-function: cubic-bezier(.2,1,.3,1);
    transform: translateY(-80%)
}

.snotifyToast__input--filled .snotifyToast__input__label:before,.snotifyToast__input__field:focus+.snotifyToast__input__label:before {
    transition-delay: 0s;
    transform: translate(0)
}

.snotifyToast__input--filled .snotifyToast__input__label:after,.snotifyToast__input__field:focus+.snotifyToast__input__label:after {
    transition-delay: .3s;
    transition-timing-function: cubic-bezier(.2,1,.3,1);
    transform: scale(1)
}

.snotifyToast--invalid .snotifyToast__input__label:before {
    border-color: #f44336
}

.snotifyToast--valid .snotifyToast__input__label:before {
    border-color: #4caf50
}

.snotifyToast__buttons {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    border-top: 1px solid rgba(0,0,0,.1)
}

.snotifyToast__buttons button {
    position: relative;
    width: 100%;
    padding: 8px;
    color: #000;
    text-transform: capitalize;
    background: transparent;
    border: 1px solid rgba(0,0,0,.1);
    border-top: none;
    border-bottom: none
}

.snotifyToast__buttons button:focus,.snotifyToast__buttons button:hover {
    background: rgba(0,0,0,.1);
    outline: none
}

.snotifyToast__buttons button:active {
    background: rgba(0,0,0,.15)
}

.snotifyToast__buttons button:last-child {
    border-right: none
}

.snotifyToast__buttons button:first-child {
    border-left: none
}

.snotifyToast__buttons--bold {
    font-weight: 700
}

.snotify-icon {
    position: absolute;
    top: 50%;
    right: 10px;
    width: 100%;
    max-width: 48px;
    height: 100%;
    max-height: 48px;
    line-height: 0;
    transform: translateY(-50%)
}

.snotify-icon--error {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23f44336'%3E%3Cpath d='M437 75A256 256 0 1075 437 256 256 0 10437 75zm-20.57 341.43a226.82 226.82 0 01-320.86 0C7.11 328 7.11 184 95.57 95.57a226.82 226.82 0 01320.86 0c88.46 88.43 88.46 232.43 0 320.86z'/%3E%3Cpath d='M368.81 143.19a14.5 14.5 0 00-20.58 0L256 235.42l-92.23-92.23a14.55 14.55 0 00-20.58 20.58L235.42 256l-92.23 92.23a14.6 14.6 0 0010.24 24.89 14.19 14.19 0 0010.24-4.31l92.23-92.23 92.23 92.23a14.64 14.64 0 0010.24 4.31 14 14 0 0010.24-4.31 14.5 14.5 0 000-20.58l-92-92.23 92.23-92.23a14.5 14.5 0 00-.03-20.58z'/%3E%3C/svg%3E")
}

.snotify-icon--warning {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23ff9800'%3E%3Cpath d='M256 512c141.15 0 256-114.84 256-256S397.15 0 256 0 0 114.84 0 256s114.85 256 256 256zm0-480.49c123.79 0 224.49 100.71 224.49 224.49S379.79 480.49 256 480.49 31.51 379.79 31.51 256 132.21 31.51 256 31.51z'/%3E%3Ccircle cx='260.08' cy='343.87' r='26.35'/%3E%3Cpath d='M254.68 278.39a15.76 15.76 0 0015.75-15.75V128.72a15.75 15.75 0 10-31.51 0v133.91a15.76 15.76 0 0015.76 15.76z'/%3E%3C/svg%3E")
}

.snotify-icon--info {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%231e88e5'%3E%3Cpath d='M256 0C114.84 0 0 114.84 0 256s114.84 256 256 256 256-114.84 256-256S397.15 0 256 0zm0 478.43c-122.65 0-222.43-99.79-222.43-222.43S133.35 33.58 256 33.58 478.42 133.36 478.42 256 378.64 478.43 256 478.43z'/%3E%3Cpath d='M251.26 161.24a22.39 22.39 0 10-22.38-22.39 22.39 22.39 0 0022.38 22.39zM286.84 357.87h-14v-160A16.79 16.79 0 00256 181.05h-30.83a16.79 16.79 0 000 33.58h14.05v143.24h-14.05a16.79 16.79 0 000 33.57h61.67a16.79 16.79 0 100-33.57z'/%3E%3C/svg%3E")
}

.snotify-icon--success {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%234caf50'%3E%3Cpath d='M256 0C114.85 0 0 114.84 0 256s114.85 256 256 256 256-114.84 256-256S397.15 0 256 0zm0 492.31c-130.29 0-236.31-106-236.31-236.31S125.71 19.69 256 19.69 492.31 125.71 492.31 256 386.29 492.31 256 492.31z'/%3E%3Cpath class='cls-1' d='M376.64 151L225.31 321.24l-91.17-72.93a9.85 9.85 0 00-12.3 15.38l98.46 78.77a9.86 9.86 0 0013.52-1.15l157.54-177.23A9.85 9.85 0 00376.64 151z'/%3E%3C/svg%3E")
}

.snotify-icon--async {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%231e88e5'%3E%3Cpath d='M256 0a32 32 0 00-32 32v64a32 32 0 0064 0V32a32 32 0 00-32-32zm0 384a32 32 0 00-32 32v64a32 32 0 0064 0v-64a32 32 0 00-32-32zm135.74-218.5L437 120.22A32 32 0 00391.74 75l-45.24 45.22a32 32 0 0045.25 45.28zm-271.52 181L75 391.74A32 32 0 00120.22 437l45.25-45.25a32 32 0 00-45.25-45.25zm0-271.52A32 32 0 1075 120.22l45.25 45.28a32 32 0 1045.25-45.28zM391.74 346.5a32 32 0 00-45.25 45.25L391.74 437A32 32 0 00437 391.74zM480 224h-64a32 32 0 000 64h64a32 32 0 000-64zm-352 32a32 32 0 00-32-32H32a32 32 0 000 64h64a32 32 0 0032-32z'/%3E%3C/svg%3E");
    transform-origin: 50% 50%;
    animation: async 3s linear infinite
}

.notification-container {
    position: relative;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    width: 336px;
    overflow: hidden;
    border-radius: 6px;
    box-shadow: 2px 2px 10px 2px hsla(0,0%,60%,.2)
}

.notification-container .icon-guanbi {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 22px;
    color: grey;
    cursor: pointer
}

.notification-container .icon-guanbi:hover {
    color: #737373
}

.notification-container.icon .img-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    color: #fff;
    background: rgba(63,138,239,.9)
}

.notification-container.icon .img-wrapper .iconfont {
    font-size: 45px
}

.notification-container.icon .content-wrapper {
    width: calc(100% - 120px)
}

.notification-container.editpanel .img-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff
}

.notification-container.editpanel .img-wrapper img {
    width: 14px;
    vertical-align: -2px
}

.notification-container a {
    display: block;
    color: #666
}

.notification-container a.flex {
    display: flex
}

.notification-container a:hover {
    color: #666
}

.notification-container .img-wrapper {
    width: 140px
}

.notification-container .img-wrapper .img {
    width: 100%
}

.notification-container .content-wrapper {
    width: calc(100% - 140px);
    padding: 12px 8px 12px 11px;
    font-size: 12px;
    color: grey;
    text-align: left;
    background: #fff;
    border-left: 1px solid #efefef
}

.notification-container .content-wrapper .title {
    padding-right: 20px;
    margin-bottom: 3px;
    overflow: hidden;
    font-weight: 700;
    color: #333;
    text-overflow: ellipsis;
    white-space: nowrap
}

.notification-container .content-wrapper p {
    margin: 0;
    color: #666
}

.notification-container .content-wrapper time {
    display: inline-block;
    margin-top: 4px;
    color: #c7c7c7
}

.notification-container .content-wrapper .zan {
    font-size: 22px
}

@media screen and (min-width: 768px) {
    .notification-container {
        width:365px
    }

    .notification-container .icon-guanbi {
        font-size: 16px
    }
}

.tp-components-checkbox {
    cursor: pointer
}

.tp-components-checkbox:hover:before {
    color: #20a0ff
}

.tp-components-checkbox:before {
    margin-right: 2px;
    font-family: iconfont;
    font-size: 23px;
    line-height: 0;
    color: #bfcbd9;
    vertical-align: -4px;
    content: "\E68D"
}

.tp-components-checkbox.checked:before {
    margin-right: 1px;
    font-family: iconfont;
    font-size: 24px;
    color: #20a0ff;
    content: "\E68A"
}

.tp-components-checkbox span {
    font-size: 14px;
    color: #48576a
}

.bd_weixin_popup {
    box-sizing: content-box
}

.maxwidth {
    width: 1120px;
    margin: 0 auto
}

.checkbuy_text {
    display: inline;
    font-size: 13px;
    color: #aaa
}

.checkbuy_text2 {
    display: inline;
    font-size: 13px;
    color: #eee
}

._globalh1 {
    font-size: 38px
}

._globalh2 {
    font-size: 24px
}

.button-wrapper,.jiathis_style_32x32 {
    position: relative
}

.ShareAndGetFreeLogo {
    position: absolute;
    right: 0;
    bottom: -122px;
    left: 0;
    z-index: 2003;
    width: 240px;
    padding: 10px;
    margin: auto;
    font-family: Helvetica Neue,PingFang SC,Microsoft YaHei!important;
    font-size: 14px;
    color: #333;
    background: #fff;
    border: 1px solid #d1d9e5;
    border-radius: 2px;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,.12),0 0 6px 0 rgba(0,0,0,.04);
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased
}

.ShareAndGetFreeLogo.t {
    bottom: 10px
}

.ShareAndGetFreeLogo .zan {
    font-size: 22px
}

.ShareAndGetFreeLogo .queen {
    float: left;
    width: 18px;
    height: auto;
    margin: 0 0 0 4px
}

.ShareAndGetFreeLogo .boldTitle {
    margin-left: -36px
}

.ShareAndGetFreeLogo .ShareAndGetFreeLogo-icon {
    position: absolute;
    top: -6px;
    right: 0;
    left: 0;
    width: 11px;
    height: 6px;
    margin: auto;
    transform: rotate(180deg)
}

.ShareAndGetFreeLogo2 {
    position: absolute;
    right: 0;
    bottom: 40px;
    left: 0;
    z-index: 2003;
    box-sizing: content-box;
    width: 290px;
    padding: 10px;
    margin: auto;
    font-family: Helvetica Neue,PingFang SC,Microsoft YaHei!important;
    font-size: 14px;
    color: #333;
    background: #fff;
    border: 1px solid #d1d9e5;
    border-radius: 2px;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,.12),0 0 6px 0 rgba(0,0,0,.04);
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased
}

.ShareAndGetFreeLogo2 .zan {
    font-size: 22px
}

.ShareAndGetFreeLogo2 .ShareAndGetFreeLogo-icon2 {
    position: absolute;
    right: 0;
    bottom: -6px;
    left: 0;
    width: 11px;
    height: 6px;
    margin: auto
}

@media screen and (max-width: 700px) {
    .ShareAndGetFreeLogo .zan {
        font-size:12px
    }

    .ShareAndGetFreeLogo2 {
        bottom: 36px;
        font-size: 12px
    }

    .ShareAndGetFreeLogo2 .zan {
        font-size: 12px
    }
}

.golang {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 480px;
    padding: 100px 0;
    margin-top: 100px;
    color: #323232;
    text-align: center;
    background: url(../img/golangbg.png) no-repeat top
}

.golang .golang-content {
    width: 100%;
    max-width: 550px
}

.golang .golang-content h2 {
    position: relative;
    margin-bottom: 20px;
    font-size: 32px
}

.golang .golang-content .golangman {
    position: absolute;
    top: -150px;
    left: -230px;
    z-index: 1000;
    width: 300px;
    transition: all 2s
}

.golang .golang-content .moveTop {
    top: -50px;
    transition: all 2s
}

.golang .golang-content .company-input {
    display: flex;
    justify-content: center;
    max-width: 550px
}

.golang .arrowsIcon {
    position: absolute;
    right: 0;
    bottom: -40px;
    left: 0;
    width: 26px;
    height: 44px;
    margin: auto;
    background: url(../img/headimg.png) no-repeat -240px -152px
}

@media screen and (max-width: 767px) {
    .golangParent {
        background:#f0f3fa
    }

    .golang {
        position: relative;
        top: -50px;
        box-sizing: border-box;
        width: 100%;
        height: 200px;
        padding: 60px 15px;
        margin-top: 150px;
        background-size: 100%
    }

    .golang .golang-content h2 {
        font-size: 18px
    }

    .golang .golang-content .golangman {
        position: absolute;
        top: -150px;
        left: 0;
        z-index: 1000;
        width: 150px;
        transition: all 2s
    }

    .golang .golang-content .moveTop {
        top: -140px;
        transition: all 2s
    }
}

.langgolin {
    box-sizing: border-box;
    width: 420px;
    height: 60px;
    font-size: 18px;
    color: #000;
    text-align: center;
    border: 1px;
    border-radius: 4px;
    outline: 0;
    outline-color: #1484ff;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.16),0 0 0 1px rgba(0,0,0,.08);
    transition: box-shadow .2s cubic-bezier(.4,0,.2,1)
}

.langgolin .el-input__inner {
    display: flex;
    width: 100%;
    height: 60px;
    padding: 0 12px;
    color: #666;
    text-align: center;
    border: 1px;
    outline: 0
}

.langgolin .el-input__inner:hover {
    border-color: #eee
}

.langgolin .el-input__inner:focus {
    outline: 0;
    box-shadow: 0 4px 4px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
}

.emptytip {
    border: 4px solid #1484ff
}

.go-button {
    position: relative;
    height: 60px;
    padding: 15px 30px!important;
    margin-left: 7px!important;
    font-size: 18px!important
}

@media screen and (max-width: 767px) {
    .langgolin {
        height:50px;
        font-size: 16px
    }

    .emptytip {
        border: 4px solid #1484ff
    }

    .go-button {
        height: 50px;
        padding: 15px 30px;
        font-size: 16px!important
    }
}

.el-message-box {
    max-width: calc(100vw - 20px)
}

.el-button.block {
    width: 100%
}

[v-cloak] {
    display: none
}

html {
    scroll-behavior: smooth
}

body {
    font-family: Helvetica Neue,PingFang SC,Microsoft YaHei!important;
    color: #333;
    background: #fff;
    -webkit-overflow-scrolling: touch;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased
}

body:lang(en) {
    font-family: Helvetica Neue,Arial,sans-serif!important
}

header.fixedlayout+.body-container {
    position: relative;
    top: 50px;
    height: calc(100vh - 50px)
}

.main-btn {
    padding: 10px 15px;
    font-size: 14px;
    color: #fff;
    background-color: #1485ff;
    border-color: #1485ff;
    border-radius: 4px;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.16),0 0 0 1px rgba(0,0,0,.08);
    transition: box-shadow .2s cubic-bezier(.4,0,.2,1)
}

.main-btn:hover {
    color: #fff;
    background: #439dff;
    border-color: #439dff
}

.main-btn.big-btn {
    padding: 13px 36px;
    font-size: 18px
}

.main-btn.radius-btn {
    border-radius: 50px
}

.body-container .top-container {
    position: relative
}

h1,h2,h3,h4,h5,h6,ol,p,ul {
    margin: 0
}

ol,ul {
    list-style: none
}

a {
    color: #333
}

a.nostyle {
    text-decoration: none
}

.login .el-dialog {
    top: 50%!important;
    width: 420px;
    max-width: calc(100vw - 20px);
    max-height: 100vh;
    margin: 20px 0 35px;
    transform: translate(-50%,-50%)
}

.login .el-dialog .el-dialog__header {
    padding: 20px
}

.login .el-dialog .el-dialog__header:after {
    display: block;
    clear: both;
    content: ""
}

.login .el-dialog .el-dialog__body {
    padding: 0
}

.el-tabs--custom .el-tabs__header {
    border-bottom-color: transparent
}

.el-tabs--custom .el-tabs__header .el-tabs__nav {
    width: 100%
}

.el-tabs--custom .el-tabs__header .el-tabs__nav .el-tabs__item {
    width: 50%;
    margin: 0;
    text-align: center;
    border: 0
}

.fixed-dialog {
    overflow: auto
}

.fixed-dialog .el-dialog {
    top: 0!important;
    right: 0;
    bottom: 0;
    left: 0;
    margin-bottom: 0;
    transform: none
}

.fixed-dialog .el-dialog .el-dialog__header {
    display: none
}

.fixed-dialog .el-dialog .el-dialog__body {
    height: 100vh;
    padding: 0;
    background: #f7f7f7
}

.fixed-dialog .el-dialog .el-menu {
    overflow: auto
}

.left-dialog .el-dialog {
    right: auto
}

.right-dialog .el-dialog {
    left: auto
}

.favorites-dialog,.side-nav-dialog {
    overflow: auto
}

.favorites-dialog .el-dialog,.side-nav-dialog .el-dialog {
    top: 0!important;
    right: 0;
    bottom: 0;
    left: auto;
    width: 70%;
    max-width: 350px;
    margin-bottom: 0;
    transform: none
}

.favorites-dialog .el-dialog .el-dialog__header,.side-nav-dialog .el-dialog .el-dialog__header {
    display: none
}

.favorites-dialog .el-dialog .el-dialog__body,.side-nav-dialog .el-dialog .el-dialog__body {
    height: 100vh;
    padding: 0;
    background: #f7f7f7
}

.favorites-dialog .el-dialog .el-menu,.side-nav-dialog .el-dialog .el-menu {
    overflow: auto
}

.side-nav-dialog .el-dialog {
    width: 70%;
    max-width: 350px
}

.favorites-dialog .el-dialog {
    right: auto;
    left: 0;
    max-width: 240px
}

.custom.el-message {
    z-index: 3000!important
}

footer {
    padding: 2em 10px;
    background-color: #fff
}

footer .middle-wrapper {
    max-width: 1120px;
    margin: 0 auto
}

footer div.logo,footer h1.logo {
    font-size: 25px;
    font-weight: 700;
    line-height: 1.5;
    color: #616161;
    text-align: left
}

footer div.logo .slogn_icon,footer h1.logo .slogn_icon {
    display: inline-block;
    width: 30px;
    margin-right: 5px
}

footer div.logo .slogn_icon img,footer h1.logo .slogn_icon img {
    width: 100%
}

footer p.slogn {
    margin-bottom: 0;
    font-size: 14px;
    color: #b0b0b0
}

footer .slogn_new {
    margin-bottom: 1.5em;
    font-size: 20px;
    color: #b0b0b0
}

footer .scancode {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 25px
}

footer .scancode .scancode_wrap {
    width: 100px
}

footer .scancode .scancode_wrap img {
    width: 100%
}

footer .copyright {
    margin-top: 0;
    font-size: 12px;
    font-weight: 400;
    color: #616161;
    text-align: center
}

footer .copyright a {
    color: #616161
}

@media screen and (min-width: 768px) {
    footer p.slogn {
        color:#b0b0b0
    }

    footer .copyright {
        margin-top: 2em
    }

    footer .scancode {
        padding: 0 0 25px
    }
}

.friendlinks {
    display: none;
    text-align: left
}

.friendlinks span {
    font-size: 12px;
    color: #616161
}

.friendlinks .linkspan {
    position: relative;
    display: inline-block
}

.friendlinks .linkspan i.fa-times {
    position: absolute;
    top: -1px;
    right: 0;
    display: none;
    cursor: pointer
}

.friendlinks .linkspan:hover i.fa-times {
    display: block
}

.friendlinks a {
    position: relative;
    display: inline-block;
    margin: 0 8px;
    font-size: 12px;
    font-weight: 400;
    color: #616161
}

.friendlinks a:hover {
    color: #c7c7c7
}

@media screen and (min-width: 768px) {
    .friendlinks {
        display:block
    }
}

.showmore {
    display: block;
    height: 50px;
    margin-top: 20px;
    font-size: 16px;
    line-height: 50px;
    color: #8c8c8c;
    text-align: center;
    cursor: pointer;
    background: #c4d0e2;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
    box-shadow: none
}

.showmore:hover {
    background: #afc0d8
}

.showmore:before {
    display: inline;
    vertical-align: 3px;
    content: "\52A0\8F7D\66F4\591A"
}

.showmore.ajaxing {
    background-color: #fff
}

.showmore.ajaxing:after {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin: 11px 0 0 10px;
    content: "";
    background: url(../img/ajax-loader-transparent.gif) no-repeat;
    background-size: cover
}

.search-position {
    width: 100%;
    height: 100px;
    padding: 20px 15px;
    text-align: center
}

.search-position.icons {
    margin-top: 0
}

.search-position.fixed-search {
    position: fixed;
    top: 0;
    z-index: 999;
    margin-top: 0
}

@media screen and (min-width: 768px) {
    .search-position.icons {
        margin-top:60px
    }

    .search-position.fixed-search {
        margin-top: 0
    }
}

.makelogo_wrap {
    max-width: 600px;
    padding: 0;
    margin: 0 auto
}

.makelogo_wrap,.makelogo_wrap form {
    position: relative
}

.company-input {
    max-width: 550px;
    margin-top: 44px
}

.company-input.el-input {
    display: inline-flex;
    width: 100%;
    font-size: 16px
}

.company-input.el-input .el-input__inner,.company-input.el-input .go-button {
    border-radius: 4px;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.16),0 0 0 1px rgba(0,0,0,.08);
    transition: box-shadow .2s cubic-bezier(.4,0,.2,1)
}

.company-input.el-input .el-input__inner:hover,.company-input.el-input .go-button:hover {
    box-shadow: 0 3px 8px 0 rgba(0,0,0,.2),0 0 0 1px rgba(0,0,0,.08)
}

.company-input.el-input .el-input__inner {
    display: flex;
    width: 100%;
    height: 50px;
    padding: 0 12px;
    color: #666;
    text-align: center;
    border: 1px;
    outline: 0
}

.company-input.el-input .el-input__inner:hover {
    border-color: #eee
}

.company-input.el-input .el-input__inner:focus {
    outline: 0;
    box-shadow: 0 4px 4px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
}

.company-input.el-input .emptytip {
    border: 4px solid #1484ff
}

@media screen and (min-width: 768px) {
    .company-input.el-input {
        margin-top:50px;
        font-size: 18px
    }

    .company-input.el-input.no-margin-top {
        margin-top: 0
    }

    .company-input.el-input .el-input__inner {
        height: 60px
    }
}

.logolist {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-between;
    max-width: 1120px;
    margin: 0 auto
}

.logolist .item {
    position: relative;
    width: 48%;
    margin-bottom: 15px;
    overflow: hidden;
    cursor: pointer;
    background-color: #fff;
    border-radius: 6px
}

.logolist .item:hover .sync-span,.logolist .item:hover a.fa-detail,.logolist .item:hover i.addheart,.logolist .item:hover i.fa-trash {
    display: block
}

.logolist .item .sync-span {
    position: absolute;
    right: 80px;
    bottom: 80px;
    z-index: 9999;
    display: block;
    display: none;
    width: 26px;
    height: 24px;
    line-height: 24px;
    color: #fff;
    text-align: center;
    background: rgba(0,0,0,.4)
}

.logolist .item .sync-span.upload-page {
    right: 115px
}

.logolist .item .sync-span .fa-cloud-upload {
    margin-top: 4px;
    font-size: 17px;
    color: #fff
}

.logolist .item i.fa-trash {
    right: 10px;
    bottom: 80px;
    padding: 2px 5px;
    font-size: 20px
}

.logolist .item a.fa-detail,.logolist .item i.fa-trash {
    position: absolute;
    z-index: 99;
    display: none;
    color: #fff;
    cursor: pointer;
    background: rgba(0,0,0,.4)
}

.logolist .item a.fa-detail {
    right: 45px;
    bottom: 10px;
    height: auto;
    font-size: 15px
}

.logolist .item a.fa-detail i {
    padding: 4.7px 5px
}

.logolist .item i.addheart {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 99;
    display: none;
    padding: 2px 3px;
    font-size: 20px;
    color: #fff;
    cursor: pointer;
    background: rgba(0,0,0,.4)
}

.logolist .item i.fa-upload-svg-check {
    bottom: 80px
}

.logolist .item i.fa-upload-trash {
    right: 45px
}

.logolist .item i.edit-upload {
    right: 80px;
    bottom: 80px
}

.logolist .item i.user-myself {
    right: 10px
}

.logolist .item i.alllogo-upload {
    right: 45px
}

.logolist .item .fuser-avatar-upload {
    position: absolute;
    bottom: 80px;
    left: 16px;
    width: 30px;
    height: 30px
}

.logolist .item .fuser-avatar-upload img {
    width: 100%;
    border-radius: 50%
}

.logolist .item .down-svg {
    position: absolute;
    right: 10px;
    bottom: 66px;
    z-index: 99;
    display: none;
    cursor: pointer
}

.logolist .item .down-svg .fa-down-svg {
    color: rgba(0,0,0,.5)
}

.logolist .item .down-svg .down-svg-menu {
    min-width: 60px!important;
    padding: 0!important
}

.logolist .item .down-svg .down-svg-menu li {
    display: block!important;
    text-align: center
}

.logolist .item .down-svg .down-svg-menu span {
    display: block;
    padding: 5px
}

.logolist .item .down-svg .down-svg-menu span:hover {
    background: #e7e7e7
}

.logolist .item .down-svg .down-svg-menu .divider-svg {
    margin: 0!important
}

.logolist .item:hover .down-svg {
    display: block!important
}

.logolist .item .svgstyle {
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    -moz-align-items: center;
    -ms-align-items: center;
    align-items: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 20% 25%;
    background: url(../img/background-transparent.png)
}

.logolist .item .mylogolist-name {
    height: 42px;
    padding: 10px;
    overflow: hidden;
    font-size: 15px;
    color: #333;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-top: 1px solid #e9e9e9
}

.logolist .item .svginfolist {
    padding: 20% 15%
}

.logolist .item .svginfolist_check:before {
    position: absolute;
    top: -3px;
    right: 2px;
    z-index: 1;
    font-family: FontAwesome;
    font-size: 20px;
    color: #fff;
    content: "\F00C";
    background-size: 100%
}

.logolist .item .svginfolist_check:after {
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    content: "";
    background-size: 100%;
    border-top: 40px solid #20a0ff;
    border-left: 40px solid transparent
}

.logolist .item a {
    position: relative;
    display: block;
    height: 128px;
    overflow: hidden
}

.logolist .item a.vertical {
    height: 205px
}

.logolist .item a .desc {
    position: absolute;
    top: 0;
    box-sizing: border-box;
    display: none;
    width: 100%;
    height: 100%;
    padding: 16px;
    background-color: hsla(0,0%,100%,.85)
}

.logolist .item a .desc.hasPrice {
    padding-top: 55px
}

.logolist .item a .desc.show {
    display: block
}

.logolist .item a .desc p {
    width: 100%;
    height: 100%;
    overflow: hidden;
    color: #595959
}

.logolist .item a .desc time {
    position: absolute;
    bottom: 5px;
    font-size: 12px;
    font-weight: 700;
    color: #333
}

.logolist .item span.price {
    position: absolute;
    top: 20px;
    left: 0;
    z-index: 1;
    height: 25px;
    padding: 0 9px;
    font-size: 14px;
    line-height: 27px;
    color: #fff;
    background: rgba(32,160,255,.7)
}

.logolist .item .logo {
    width: 100%
}

.logolist .item .svg-logo {
    max-width: 100%;
    max-height: 100%
}

.logolist .item a.title,.logolist .item p.title {
    position: relative;
    height: 3.5em;
    padding: 10px 10px 0;
    margin: 0 0 10px;
    font-size: 15px;
    border-top: 1px solid #e9e9e9
}

.logolist .item:hover p.title i.fa-trash {
    display: block
}

.logolist #svg-item {
    overflow: inherit
}

.logolist .logo-tags-warp {
    padding: 6px 10px;
    overflow: hidden
}

.logolist .logo-tags-warp a.logo-title {
    height: auto;
    padding: 0;
    margin: 0;
    overflow: hidden;
    font-size: 15px;
    color: #333;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-top: 0
}

.logolist .logo-tags-warp a.logo-title:hover {
    color: #3da9f7
}

.logolist .logo-tags-warp .logo-tags {
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    flex-wrap: wrap;
    -moz-align-items: flex-start;
    -ms-align-items: flex-start;
    align-items: flex-start;
    -moz-justify-content: flex-start;
    -ms-justify-content: flex-start;
    justify-content: flex-start
}

.logolist .logo-tags-warp .logo-tags .tags-item {
    display: inline-block;
    padding: 2px 5px;
    margin: 0 5px 5px 0;
    font-size: 12px;
    font-weight: 400;
    background: #f0f2fa;
    border: 1px solid #ddd;
    border-top: none;
    border-left: none;
    border-radius: 9px;
    opacity: 1
}

.logolist .logo-tags-warp .logo-tags .tags-item:hover {
    text-decoration: none;
    opacity: 1
}

.logolist .logo-tags-warp .logo-tags .tags-item .tags-a {
    height: auto;
    font-size: 12px;
    color: #333
}

.logolist .good-start {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 20px;
    color: red
}

@media screen and (min-width: 768px) {
    .logolist .item {
        width:32%;
        transition: all .3s
    }

    .logolist .item:hover {
        transition: all .3s;
        -webkit-transform: scale(1.05);
        -moz-transform: scale(1.05);
        -ms-transform: scale(1.05)
    }

    .logolist .item a {
        height: 154px
    }

    .logolist .item a.vertical {
        height: 245px
    }
}

@media screen and (min-width: 768px) {
    .logolist .item {
        width:23%;
        margin-bottom: 26px
    }

    .logolist .item a {
        height: 129px
    }

    .logolist .item a.vertical {
        height: 205px
    }

    .index_logoicon_wrap {
        height: 270px;
        overflow: hidden
    }

    .index_logoicon .item .item-div {
        width: 345px;
        height: 260px
    }
}

@media screen and (min-width: 920px) {
    .logolist .item a {
        height:201px
    }

    .logolist .item a.vertical {
        height: 324px
    }
}

.hero__banner {
    position: relative;
    top: -1px;
    padding: 0 15px 152px;
    margin-bottom: 110px;
    text-align: center
}

.hero__banner.short {
    padding: 0 15px 80px;
    margin-bottom: 0
}

.hero__banner.hero__banner--homepage-v1 .hero__banner-cover-layer1 {
    position: absolute;
    top: -177px;
    right: 0;
    bottom: 33px;
    left: -10%;
    width: 114%;
    background-image: linear-gradient(-177deg,#fff,#cfe9ff);
    opacity: .58;
    transform: rotate(-2deg)
}

.hero__banner.hero__banner--homepage-v1 .hero__banner-cover-layer2 {
    position: absolute;
    top: -183px;
    right: 34px;
    bottom: 34px;
    left: -5%;
    width: 112%;
    background-image: linear-gradient(3deg,rgba(79,244,188,.2) 31%,rgba(239,253,248,0) 97%);
    opacity: .78;
    transform: rotate(5deg)
}

.hero__banner.hero__banner--homepage-v1 .hero__banner-cover-layer3 {
    position: absolute;
    top: auto;
    right: 0;
    bottom: 30px;
    left: -28%;
    width: 128%;
    height: 1000px;
    background-image: linear-gradient(1deg,#e5f4ff,#fff);
    opacity: .78;
    transform: rotate(-10deg)
}

@media screen and (min-width: 768px) {
    .hero__banner {
        padding:35px 15px 108px
    }

    .hero__banner.short {
        margin-bottom: 110px
    }

    .hero__banner.mg0 {
        margin-bottom: 0
    }

    .hero__banner.hero__banner--homepage-v1 .hero__banner-cover-layer1 {
        top: -177px;
        right: 0;
        bottom: -3px;
        left: -10%;
        width: 114%
    }

    .hero__banner.hero__banner--homepage-v1 .hero__banner-cover-layer2 {
        top: -170px;
        right: 0;
        bottom: 0;
        left: -10%;
        width: 112%
    }

    .hero__banner.hero__banner--homepage-v1 .hero__banner-cover-layer3 {
        top: auto;
        right: 0;
        bottom: 30px;
        left: -5%;
        width: 120%
    }
}

.wechat-payment-layer {
    z-index: 9999999;
    display: flex;
    align-items: center;
    padding: 0;
    background: rgba(55,55,55,.6)
}

.wechat-payment-layer .el-dialog {
    top: unset!important;
    width: 300px;
    margin-bottom: 0;
    overflow: hidden;
    border-radius: 4px
}

.wechat-payment-layer .el-dialog .el-dialog__header {
    padding: 26px 0;
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    text-align: center;
    background: #08c160
}

.wechat-payment-layer .el-dialog .el-dialog__header .icon-wechat {
    margin: 0 5px 0 0;
    font-size: 20px;
    vertical-align: -1px
}

.wechat-payment-layer .el-dialog .el-dialog__header .el-dialog__close {
    position: absolute;
    top: 8px;
    right: 8px;
    display: block;
    color: #fff;
    transition: all .3s ease
}

.wechat-payment-layer .el-dialog .el-dialog__header .el-dialog__close:hover {
    transform: rotate(180deg)
}

.wechat-payment-layer .el-dialog .el-dialog__body {
    padding: 0
}

.wechat-payment-layer .el-dialog .el-dialog__body .pkg-name {
    margin: 18px 0 0;
    font-size: 16px
}

.wechat-payment-layer .el-dialog .el-dialog__body .pkg-name span {
    font-size: 22px;
    font-weight: 700
}

.wechat-payment-layer .el-dialog .el-dialog__body .save-qrcode {
    max-width: 200px;
    margin: 10px auto 19px;
    text-align: center
}

@media screen and (min-width: 768px) {
    .wechat-payment-layer .el-dialog .el-dialog__body .save-qrcode {
        display:none
    }
}

.browser-not-support {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2147483647;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    padding: 36px 15px!important;
    text-align: center;
    background: #e8f3fd;
    border-radius: 0!important
}

.browser-not-support .inner {
    max-width: 835px;
    margin: 0 auto;
    font-size: 18px;
    color: #333
}

.browser-not-support .inner .el-icon-warning {
    margin-right: 2px;
    font-size: 24px;
    color: #598ab7;
    vertical-align: -2px
}

.browser-not-support .inner p {
    max-width: 625px;
    margin: 1em auto
}

.browser-not-support .inner img {
    display: block;
    width: 120px;
    margin: 0 auto
}

.logos-preview {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: flex-start
}

.logos-preview .item {
    width: 23.5%;
    margin: 0 2% 17px 0;
    overflow: hidden;
    border-radius: 6px;
    transition: all .3s
}

.logos-preview .item a {
    text-decoration: none
}

.logos-preview .item:nth-of-type(4n) {
    margin-right: 0
}

.logos-preview .item .img {
    display: block;
    width: 100%
}

.logos-preview .item:hover {
    transition: all .3s;
    transform: scale(1.05)
}

.logos-preview .item p {
    box-sizing: border-box;
    height: 42px;
    padding: 10px;
    margin: 0;
    font-size: 15px;
    color: #333;
    text-align: left;
    background: #fff;
    border-top: 1px solid #e9e9e9
}

.bottom-nav a {
    display: inline-block;
    margin: 0 5px 0 0;
    font-size: 13px;
    font-weight: 400;
    color: #535971;
    text-decoration: none
}

.bottom-nav a:hover {
    color: #1485ff
}

.mini-program-footer {
    display: none
}

.footer-menu,.mini-program-footer {
    position: fixed;
    bottom: 0;
    z-index: 999
}

.footer-menu {
    right: 0;
    left: 0;
    display: flex;
    align-items: stretch;
    justify-content: center;
    width: 100%;
    background: #fff;
    border-top: 1px solid #e4e7ed
}

.footer-menu.wxmini {
    background: linear-gradient(transparent,#fff)
}

.footer-menu .item {
    width: 33.33%;
    text-align: center
}

.footer-menu .item a,.footer-menu .item span.my {
    display: block;
    padding: 14px 0;
    font-size: 12px;
    color: #333
}

.footer-menu .item a i,.footer-menu .item span.my i {
    color: #949494
}

.footer-menu .item:nth-child(2) {
    border-right: 1px solid #e4e7ed;
    border-left: 1px solid #e4e7ed
}

.footer-menu .item .icon-deng-kai {
    font-size: 18px;
    line-height: 0;
    vertical-align: -1px
}

.footer-menu .item .icon-liebiao {
    font-size: 14px;
    line-height: 0;
    vertical-align: -1px
}

.footer-menu .item .icon-touxiang {
    font-size: 15px;
    line-height: 0;
    vertical-align: -1px
}

@media screen and (min-width: 920px) {
    .footer-menu {
        display:none
    }
}

.share-poster-layer {
    position: fixed;
    bottom: 0;
    z-index: 99999;
    width: 100%;
    height: 510px;
    padding: 40px 10px;
    visibility: hidden;
    background: transparent;
    opacity: 0;
    transition: all .5s ease-in-out;
    transform: translate3d(0,650px,0)
}

.share-poster-layer.show {
    visibility: visible;
    opacity: 1;
    transform: translateZ(0)
}

.share-poster-layer i.icon-guanbi {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 9999999;
    font-size: 22px;
    color: #fff;
    cursor: pointer;
    transition: all .3s ease
}

.share-poster-layer i.icon-guanbi:hover {
    transform: rotate(180deg) rotate(0)
}

.share-poster-layer .main-poster-area {
    max-width: 260px;
    margin: 0 auto;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,.3)
}

.share-poster-layer .main-poster-area .head {
    position: relative;
    padding: 35px 20px;
    color: #fff;
    text-align: center
}

.share-poster-layer .main-poster-area .head.ailogo:after {
    background: rgba(239,98,120,.92)
}

.share-poster-layer .main-poster-area .head .img-bg {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%
}

.share-poster-layer .main-poster-area .head .blue-overlayer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(63,138,239,.9)
}

.share-poster-layer .main-poster-area .head h1 {
    position: relative;
    z-index: 1;
    margin-bottom: 10px;
    font-size: 18px
}

.share-poster-layer .main-poster-area .head p.desc {
    position: relative;
    z-index: 1;
    font-size: 12px
}

.share-poster-layer .main-poster-area .hand-bg {
    position: relative;
    min-height: 192px;
    background: #fff;
    background-position: -27px -41px;
    background-size: 156%
}

.share-poster-layer .main-poster-area .hand-bg:after {
    position: absolute;
    top: 55px;
    left: 63px;
    width: 140px;
    height: 75px;
    content: "";
    background-size: cover
}

.share-poster-layer .main-poster-area .hand-bg .svg-card {
    height: 84px;
    transform: translateY(51px)
}

.share-poster-layer .main-poster-area .qrcode {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 10px;
    color: #333;
    background: #fff
}

.share-poster-layer .main-poster-area .qrcode.ailogo {
    padding: 20px 10px
}

.share-poster-layer .main-poster-area .qrcode img {
    width: 60px;
    height: 60px;
    margin-right: 6px
}

.share-poster-layer .main-poster-area .qrcode .tip {
    font-size: 14px;
    font-weight: 400;
    text-align: center
}

.share-poster-layer .save-img-text {
    margin-top: 25px;
    font-size: 14px;
    color: #fff;
    text-align: center
}

@media screen and (min-width: 768px) {
    .share-poster-layer {
        width:370px;
        transform: translate3d(-370px,0,0)
    }

    .share-poster-layer.show {
        visibility: visible;
        background: transparent;
        box-shadow: none;
        opacity: 1;
        transform: translateZ(0)
    }
}

.share-btn-mini-program {
    position: fixed;
    bottom: 30px;
    left: 5%;
    z-index: 9;
    display: inline-block;
    display: none;
    width: 90%;
    padding: 14px 0;
    margin: 0 auto;
    font-size: 16px;
    color: #333;
    background: #ffd000;
    border-radius: 30px
}

.share-btn-mini-program.hide {
    display: none
}

.share-btn-mini-program.mini {
    bottom: 65px
}

.share-btn-mini-program.save {
    bottom: 18px;
    left: 25%;
    z-index: 9999999;
    display: inline-block;
    max-width: 50%;
    margin: 0 auto
}

.sxl-tips {
    z-index: 9;
    box-sizing: border-box;
    width: 274px;
    height: 91px;
    padding: 12px 17px;
    margin: 10px auto;
    text-align: left;
    visibility: hidden;
    background: url(../img/sxl-bg.jpg) #8159bb no-repeat 50%/cover;
    box-shadow: 0 2px 15px 0 rgba(0,0,0,.1);
    opacity: 0;
    transition: all .3s ease .2s
}

.sxl-tips,.sxl-tips:before {
    position: absolute;
    border-radius: 4px
}

.sxl-tips:before {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    content: "";
    background-color: rgba(98,65,141,.93)
}

.sxl-tips:after {
    position: absolute;
    top: -16px;
    left: 10%;
    content: "";
    border: 8px solid transparent;
    border-bottom-color: rgba(98,65,141,.93);
    transform: translateX(-50%)
}

.sxl-tips--placement--top {
    margin: 10px auto;
    transform: translateY(-10px)
}

.sxl-tips--placement--top.sxl-tips--show {
    transform: translateY(0)
}

.sxl-tips--placement--top:after {
    top: -16px;
    left: 50%;
    border-color: transparent transparent rgba(98,65,141,.93);
    transform: translateX(-50%)
}

.sxl-tips--placement--left {
    margin: auto 10px;
    transform: translateX(-10px)
}

.sxl-tips--placement--left.sxl-tips--show {
    transform: translateX(0)
}

.sxl-tips--placement--left:after {
    top: 50%;
    left: -16px;
    border-color: transparent rgba(98,65,141,.93) transparent transparent;
    transform: translateY(-50%)
}

.sxl-tips--show {
    visibility: visible;
    opacity: 1
}

.sxl-tips__mark {
    position: absolute;
    top: 0;
    right: 0;
    width: 64px;
    height: 23px;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 23px;
    color: #333;
    text-align: center;
    background-color: #ffd034;
    border-radius: 0 4px 0 2px
}

.sxl-tips__desc {
    margin-bottom: 10px;
    color: #fff
}

.sxl-tips__coupon,.sxl-tips__desc {
    display: block;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.43
}

.sxl-tips__coupon {
    font-style: normal;
    color: #ffd034
}

.sxl-tips--tshe {
    background-image: url(../img/tshe-bg.jpg)
}

.sxl-tips--tshe,.sxl-tips--tshe:before {
    background-color: rgba(52,52,52,.93)
}

.sxl-tips--tshe.sxl-tips--placement--top:after {
    border-bottom-color: rgba(52,52,52,.93)
}

.sxl-tips--tshe.sxl-tips--placement--left:after {
    border-right-color: rgba(52,52,52,.93)
}

.sxl-tips--nocoupon .sxl-tips__desc {
    margin: 13.5px auto
}

.sxl-tips--nocoupon .sxl-tips__coupon {
    display: none
}

@media screen and (max-width: 767px) {
    .hide-in-mobile,.login-btn {
        display:none!important
    }

    .hide-in-pc.flex {
        display: flex
    }
}

@media screen and (min-width: 768px) {
    .hide-in-pc {
        display:none!important
    }

    .hide-in-mobile.flex {
        display: flex
    }
}

.nav {
    top: 0;
    z-index: 10;
    display: flex;
    width: 100%;
    height: 70px;
    margin-top: 10px
}

.nav,.nav .logo {
    position: absolute
}

.nav .logo {
    top: 10px;
    left: 30px;
    flex: 3 3 auto;
    font-size: 0;
    text-align: left
}

.nav .logo img {
    display: inline-block;
    height: 50px
}

.nav .logo-wrap {
    position: relative;
    display: inline-block
}

.nav .logo .nav-pro {
    right: -30px
}

@media screen and (max-width: 767px) {
    .nav .logo {
        top:8px;
        left: 15px;
        z-index: 2
    }

    .nav .logo img {
        height: 44px
    }
}

.nav .menu {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 305px;
    margin: 0 0 0 77px;
    font-size: 16px;
    color: #535971;
    letter-spacing: .3px
}

@media screen and (max-width: 767px) {
    .nav .menu {
        position:absolute;
        right: 15px;
        display: none;
        width: 20px;
        height: 20px;
        padding: 0;
        font-size: 12px;
        font-weight: 600
    }
}

.nav .menu .header-menu__line {
    position: absolute;
    width: 100%;
    height: 3px;
    background-color: #333;
    transition: all .3s ease
}

.nav .menu .header-menu__line:first-child {
    top: 0
}

.nav .menu .header-menu__line:nth-child(2) {
    top: 8px
}

.nav .menu .header-menu__line:last-child {
    top: 17px
}

.nav .menu .item {
    padding: 0;
    cursor: pointer;
    transition: all .3s ease
}

.nav .menu .item:hover {
    color: #4db3ff
}

.nav .menu .index-black-list {
    color: #535971
}

.nav .open-menu .header-menu__line:first-child {
    top: 8px;
    transform: rotate(45deg) rotate(0)
}

.nav .open-menu .header-menu__line:nth-child(2) {
    opacity: 0
}

.nav .open-menu .header-menu__line:last-child {
    top: 8px;
    transform: rotate(-45deg) rotate(0)
}

.nav a.link {
    position: relative;
    top: 0;
    left: 0;
    display: inline-block;
    margin: 0 50px 0 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 50px;
    color: #535971;
    transition: all .3s ease
}

.nav a.link .sxl-tips--placement--top {
    left: 50%;
    transform: translate(-50%,-10px)
}

.nav a.link .sxl-tips--placement--top.sxl-tips--show {
    transform: translate(-50%)
}

.nav a.link:hover {
    color: #4db3ff
}

.nav a.link:hover .sxl-tips--placement--top {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%)
}

.nav a.link.mg-left {
    margin-left: 35px
}

.nav a.link.root-home:before {
    margin: 0 5px 0 0;
    font-family: iconfont;
    vertical-align: -1px;
    content: "\E64C"
}

.nav a.link img.logo-icon {
    width: 50px;
    height: 50px;
    vertical-align: -19px;
    border-radius: 50%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center
}

.nav-product {
    position: relative
}

.nav-product:hover a.link {
    color: #4db3ff
}

.nav-product:hover .nav-product__menu {
    visibility: visible;
    opacity: 1;
    transform: translateY(0)
}

.nav-product__menu {
    position: absolute;
    z-index: 9;
    width: -moz-max-content;
    width: max-content;
    visibility: hidden;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 10px 0 rgba(0,0,0,.05);
    opacity: 0;
    transition: all .2s ease;
    transform: translateY(-10px)
}

.nav-product__menu a.link {
    display: flex;
    align-items: center;
    padding: 13px 40px 13px 13px;
    margin: 0!important;
    font-weight: 400;
    line-height: 1.15;
    text-align: left;
    border-radius: 0
}

.nav-product__menu a.link .sxl-tips--placement--left {
    left: 100%;
    margin: auto 20px
}

.nav-product__menu a.link:hover {
    background-color: #f4f5f5
}

.nav-product__menu a.link:hover .sxl-tips--placement--left {
    visibility: visible;
    opacity: 1;
    transform: translateX(0)
}

.nav-product__menu a.link img {
    width: 45px;
    height: 45px;
    margin-right: 15px;
    border-radius: 50%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center
}

.nav-product__menu a.link .detail p {
    padding: 0;
    margin: 0
}

.nav-product__menu a.link .detail .title {
    font-size: 16px;
    font-weight: 700;
    color: #545352
}

.nav-product__menu a.link .detail .desc {
    display: none;
    font-size: 14px;
    color: #ccc
}

.nav-product__menu.no-icon a.link {
    padding: 20px 40px 20px 20px
}

.nav-product__menu.no-icon a.link img {
    display: none
}

@media screen and (max-width: 767px) {
    .nav-button {
        top:15px;
        right: 15px;
        height: 24px
    }

    .nav {
        z-index: 1000;
        align-items: center;
        height: 60px;
        margin-top: 0
    }

    .nav .logo:after {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        font-family: iconfont;
        font-size: 18px;
        font-weight: 700;
        line-height: 44px;
        color: #fff;
        text-align: center;
        text-indent: 0;
        content: "\E62E";
        background-color: rgba(0,0,0,.5);
        border-radius: 50%;
        opacity: 0;
        transition: all .3s ease
    }

    .nav-shadow_formb .mb-menu-list__active {
        max-height: calc(100vh - 60px);
        overflow: auto;
        overscroll-behavior: contain;
        transition: all .3s ease!important
    }

    .nav-shadow_formb .mb-menu_mask {
        width: 100vw;
        height: calc(100vh - 60px);
        visibility: visible;
        opacity: 1
    }

    .nav-shadow_formb .logo:after {
        opacity: 1;
        transform: rotate(180deg)
    }

    .nav-shadow_formb:before {
        z-index: 2;
        pointer-events: none;
        box-shadow: 0 2px 10px 0 rgba(0,0,0,.05)
    }

    .nav-shadow_formb:after,.nav-shadow_formb:before {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        width: 100%;
        height: 100%;
        content: ""
    }

    .nav-shadow_formb:after {
        z-index: -1;
        background-color: #fff
    }

    .header-menu_relative,header.header .mobile-logo {
        position: relative
    }

    header.header .mobile-logo:after {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        font-family: iconfont;
        font-size: 18px;
        font-weight: 700;
        line-height: 44px;
        color: #fff;
        text-align: center;
        text-indent: 0;
        content: "\E62E";
        background-color: rgba(0,0,0,.5);
        border-radius: 50%;
        opacity: 0;
        transition: all .3s ease
    }

    header.header.mobile-menu-shown .mobile-logo:after {
        opacity: 1;
        transform: rotate(180deg)
    }

    .so-header__logo {
        position: relative
    }

    .so-header__logo:after {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        font-family: iconfont;
        font-size: 18px;
        font-weight: 700;
        line-height: 44px;
        color: #fff;
        text-align: center;
        text-indent: 0;
        content: "\E62E";
        background-color: rgba(0,0,0,.5);
        border-radius: 50%;
        opacity: 0;
        transition: all .3s ease
    }

    .so-header.mobile-menu-actived .so-header__logo:after {
        opacity: 1;
        transform: rotate(180deg)
    }
}

@media screen and (max-width: 767px) {
    .mobile-nav-menu .mb-menu-list__item {
        position:relative;
        display: block;
        height: 60px;
        margin-right: 0;
        font-size: 15px;
        font-weight: 600;
        line-height: 60px;
        color: #222!important;
        border-bottom: 1px solid hsla(0,0%,58.8%,.2)
    }

    .mobile-nav-menu .mb-menu-list__item.root-home:before {
        margin: 0 5px 0 0;
        font-family: iconfont;
        font-size: 14px;
        vertical-align: 1px;
        content: "\E64C"
    }

    .mobile-nav-menu .mb-menu-list__item img.logo-icon {
        display: inline-block;
        width: 20px;
        height: 20px;
        margin: 0;
        vertical-align: -4px;
        border-radius: 50%;
        -o-object-fit: cover;
        object-fit: cover;
        -o-object-position: center;
        object-position: center
    }

    .mb-menu-list {
        position: absolute;
        top: 60px;
        left: 0;
        width: 100%;
        max-height: 0;
        margin: 0;
        overflow: hidden;
        text-align: center;
        background-color: #fff;
        border: 0;
        transition: all .3s ease!important
    }

    .mb-menu-list img {
        height: 20px;
        margin-right: 5px;
        margin-left: -5px;
        vertical-align: -5px
    }

    .mb-menu-list .mb-menu-list__item {
        position: relative;
        display: block;
        height: 60px;
        margin-right: 0;
        font-size: 15px;
        font-weight: 600;
        line-height: 60px;
        color: #222!important;
        border-bottom: 1px solid hsla(0,0%,58.8%,.2)
    }

    .mb-menu-list .mb-menu-list__item.root-home:before {
        margin: 0 5px 0 0;
        font-family: iconfont;
        font-size: 14px;
        vertical-align: 1px;
        content: "\E64C"
    }

    .mb-menu-list .mb-menu-list__item img.logo-icon {
        display: inline-block;
        width: 20px;
        height: 20px;
        margin: 0;
        vertical-align: -4px;
        border-radius: 50%;
        -o-object-fit: cover;
        object-fit: cover;
        -o-object-position: center;
        object-position: center
    }

    .mb-menu_mask {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -1;
        margin-top: 60px;
        visibility: hidden;
        background-color: rgba(0,0,0,.5);
        opacity: 0;
        transition: all .3s ease
    }
}

@media screen and (min-width: 768px) {
    .bs-mobile {
        display:none
    }
}

header {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    padding: 0 15px;
    line-height: 1.15
}

header .mobile-logo {
    display: block;
    width: 44px;
    height: 44px
}

header .mobile-logo img.logoicon {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center
}

header .nav-list-dialog .el-dialog {
    width: 50%;
    max-width: 350px
}

header .nav-list-dialog .el-dialog ul {
    padding: 0;
    margin: 0
}

header .nav-list-dialog .el-dialog ul li a {
    display: inline-block;
    width: 100%;
    height: 50px;
    line-height: 50px;
    color: #535971;
    text-align: center
}

header .logo>img {
    height: 50px;
    vertical-align: middle
}

header .logo>img.new-logo {
    display: block;
    height: 50px;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: center;
    object-position: center
}

header .logo>img.new-logo.en {
    display: block;
    height: 40px;
    transform: translate3d(0,-4px,0)
}

header a.root-home:before {
    margin: 0 5px 0 0;
    font-family: iconfont;
    vertical-align: -1px;
    content: "\E64C"
}

header a.link {
    position: relative;
    font-size: 16px;
    font-weight: 700;
    line-height: 40px;
    color: #535971;
    text-decoration: none;
    transition: all .3s ease
}

header a.link .sxl-tips--placement--top {
    left: 50%;
    transform: translate(-50%,-10px)
}

header a.link .sxl-tips--placement--top.sxl-tips--show {
    transform: translate(-50%)
}

header a.link:hover .sxl-tips--placement--top {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%)
}

header a.link img.logo-icon {
    width: 50px;
    height: 50px;
    vertical-align: -20px;
    border-radius: 50%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center
}

header.INSTANTLOGODESIGN a.link:hover {
    color: #fc3868
}

header.LOGOSC .left-wrapper .logo,header.LOGOSC .left-wrapper a.link {
    font-weight: 700
}

header.LOGOSC .nav-pro {
    right: -30px
}

header.LOGOSC .nav-pro__popper {
    color: inherit!important
}

header .left-wrapper {
    display: flex;
    align-items: center
}

header .left-wrapper .logo,header .left-wrapper a.link {
    margin-right: 48px
}

header .left-wrapper .logo,header .left-wrapper a.link2 {
    margin-right: 0px
}

header .left-wrapper .logo span,header .left-wrapper a.link span {
    color: #535971;
    vertical-align: middle;
    transition: all .3s ease
}

header .left-wrapper .logo:hover span,header .left-wrapper a.link:hover span {
    color: #439dff
}

header .left-wrapper .el-button+.el-button {
    margin-left: 0
}

header .login-button {
    border-radius: 18px
}

header .login-button .cover {
    width: 30px;
    height: 30px
}

header .nav-button {
    display: none
}

header.mobile-menu-shown {
    position: relative;
    left: 0;
    z-index: 2;
    width: 100%;
    background: #fff
}

@media screen and (min-width: 768px) {
    header {
        height:70px;
        padding: 0 30px
    }

    header .mobile-logo {
        display: none
    }
}

@media(max-width: 767px) {
    header .logo>img {
        height:25px
    }

    header .left-wrapper {
        display: none;
        padding: 10px 10px 0
    }

    header .left-wrapper .login-button {
        font-size: 12px
    }

    header .nav-button {
        display: block
    }
}

.sc-header .mobile-nav-menu-mask {
    position: fixed;
    top: 70px;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    visibility: hidden;
    background: rgba(0,0,0,.5);
    opacity: 0;
    transition: all .3s ease
}

.sc-header .mobile-nav-menu-mask.show {
    visibility: visible;
    opacity: 1
}

.sc-header .mobile-nav-menu {
    position: fixed;
    top: 70px;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    max-height: 0;
    overflow: hidden;
    background: #fff;
    transition: all .3s ease
}

.sc-header .mobile-nav-menu__active {
    max-height: calc(100vh - 60px);
    overflow: auto;
    overscroll-behavior: contain
}

.sc-header .mobile-nav-menu a {
    position: relative;
    display: block;
    height: 60px;
    padding: 0;
    margin-right: 0;
    margin-left: 0!important;
    font-size: 15px;
    font-weight: 600;
    line-height: 60px;
    color: #222!important;
    text-align: center;
    border-bottom: 1px solid hsla(0,0%,58.8%,.2);
    border-radius: 0
}

.sc-header .mobile-nav-menu a:first-child {
    border-top: 1px solid hsla(0,0%,58.8%,.2)
}

.sc-header .mobile-nav-menu a::focus,.sc-header .mobile-nav-menu a::hover {
    border-color: hsla(0,0%,58.8%,.2)
}

.sc-header .mobile-nav-menu a.root-home:before {
    margin: 0 5px 0 0;
    font-family: iconfont;
    vertical-align: -1px;
    content: "\E64C"
}

.sc-header .mobile-nav-menu a .logo-icon,.sc-header .mobile-nav-menu a .logoicon {
    width: 20px;
    height: 20px;
    vertical-align: -5px
}

@media screen and (min-width: 768px) {
    .sc-header {
        height:auto;
        padding-top: 10px
    }
}

.AILOGO header a.link {
    color: #333
}

.AILOGO header a.link:hover {
    color: var(--theme,#20a0ff)
}

footer {
    padding: 30px 10px 10px;
    font-weight: 600;
    color: #333;
    text-align: right;
    background: #fff
}

footer p {
    display: inline-block;
    font-size: 12px;
    font-weight: 400
}

footer p a {
    color: inherit
}

@media(max-width: 767px) {
    footer {
        text-align:left
    }
}

* {
    box-sizing: border-box
}

.shadow {
    margin: 0 auto;
    border-bottom: 3px solid #98cdff;
    box-shadow: inset 0 -8px 0 #98cdff
}

a {
    text-decoration: none
}

ol,ul {
    padding: 0;
    margin: 0
}

.button:hover {
    cursor: pointer
}

.my-input-group {
    margin: 30px auto 0
}

.my-input-group.tip div.btn {
    border: 2px solid #f7c10d!important;
    border-left: 0!important
}

.my-input-group.split .el-input .el-input__inner {
    border-radius: 6px
}

.my-input-group.split div.btn {
    width: 120px;
    color: #fff;
    text-shadow: rgba(0,0,0,.2) 0 1px;
    background: #f7c10d;
    border: 2px solid #f7c10d;
    border-radius: 6px
}

.my-input-group.split div.btn:hover {
    text-shadow: rgba(0,0,0,.2) 0 1px;
    background: #eab503;
    border: 2px solid #eab503;
    box-shadow: none
}

.my-input-group .el-input .el-input__inner {
    height: 55px;
    font-size: 16px;
    color: #fff;
    background: transparent;
    border: 2px solid #fff;
    border-right: 0;
    border-radius: 6px 0 0 6px
}

.my-input-group .el-input .el-input__inner::-moz-placeholder {
    color: hsla(0,0%,100%,.8)
}

.my-input-group .el-input .el-input__inner::placeholder {
    color: hsla(0,0%,100%,.8)
}

.my-input-group div.btn {
    width: 130px;
    height: 55px;
    font-size: 16px;
    line-height: 55px;
    color: #3f8aef;
    cursor: pointer;
    background: #fff;
    border: 2px solid #fff;
    border-left: 0;
    border-radius: 0 6px 6px 0
}

.my-input-group div.btn:hover {
    color: #fff;
    text-shadow: rgba(0,0,0,.2) 0 1px;
    background: #eab503;
    border: 2px solid #fff;
    border-left: 0
}

@media screen and (min-width: 768px) {
    .my-input-group {
        margin:30px auto 0
    }

    .my-input-group.split div.btn {
        width: 183px
    }

    .my-input-group .el-input {
        display: inline-block;
        width: calc(100% - 190px)
    }

    .my-input-group .el-input .el-input__inner {
        height: 72px;
        font-size: 22px
    }

    .my-input-group div.btn {
        width: 190px;
        height: 72px;
        font-size: 18px;
        line-height: 72px
    }
}

.body-container {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0 auto;
    overflow: hidden;
    background: #f7f7f7
}

.body-container,.entry {
    position: relative;
    text-align: center
}

.entry {
    color: #333
}

.entry .entry-wrapper {
    padding: 50px 30px 100px
}

.entry .logo {
    display: inline-block;
    margin-bottom: 50px
}

.entry .logo img {
    height: 45px
}

.entry h1,.entry p {
    color: #333
}

.entry h1 {
    font-size: 36px;
    font-weight: 600
}

.entry p {
    margin-top: 14px;
    font-size: 18px
}

.show {
    max-width: 1440px;
    margin: auto
}

.tags-wrapper {
    width: 100%;
    padding: 5px 0;
    overflow: hidden
}

.tags-wrapper .swiper-container {
    width: 100vw
}

.tags-wrapper .swiper-container .swiper-wrapper {
    display: flex;
    justify-content: center;
    overflow-x: auto;
    overflow-y: hidden
}

.tags-wrapper .swiper-slide {
    width: auto!important;
    padding: 0 5px
}

.tags-wrapper .swiper-slide a {
    display: inline-block;
    padding: 2px 5px;
    font-size: 12px;
    font-weight: 400;
    color: #333;
    text-decoration: none;
    background: #f0f2fa;
    border: 1px solid #ddd;
    border-top: none;
    border-left: none;
    border-radius: 9px;
    opacity: 1
}

.tags-wrapper .swiper-slide a:hover {
    color: #1a1a1a;
    background: #cad1ed
}

h2.title {
    margin: 0 0 15px;
    font-size: 20px
}

svg:not(:root) {
    overflow: hidden
}

.top-banner {
    height: 650px;
    text-align: center;
    background: #fff;
    background: url(../img/newindex/1440.jpg) top no-repeat;
    background-size: cover;
    -webkit-clip-path: polygon(0 0,100% 0,100% 92%,50% 100%,0 92%);
    clip-path: polygon(0 0,100% 0,100% 92%,50% 100%,0 92%)
}

.top-banner .index-icon {
    position: relative;
    height: 55px;
    margin: 35px auto 30px
}

.top-banner .index-icon img {
    height: 100%
}

.top-banner h1.index-title {
    position: relative;
    margin: 0 0 30px;
    font-size: 26px;
    line-height: 1.4;
    color: #fff
}

.top-banner .arrow-img {
    position: relative;
    top: 20px;
    width: 30px;
    height: 35px
}

.top-banner p.desc {
    position: relative;
    margin: 0;
    font-size: 17px;
    color: #fff
}

.company-input.el-input.tip .el-input__inner {
    border: 2px solid #f7c10d
}

.create-number {
    font-size: 18px;
    color: #f0f0f0;
    border-top: 1px solid hsla(0,0%,100%,.25)
}

.create-number span {
    font-size: 24px;
    color: #fff
}

.create-number .tm {
    font-size: 18px
}

.create-number b {
    color: #2c85ff;
    background: #fff
}

html:lang(en) .create-number .tm {
    font-size: 20px
}

.btn-bottom {
    position: absolute;
    right: 0;
    bottom: -25px;
    left: 0;
    width: 24px;
    height: 38px;
    margin: auto;
    border-radius: 12px
}

.btn-bottom img {
    width: 24px
}

@media screen and (min-width: 768px) {
    .top-banner {
        -webkit-clip-path:polygon(0 0,100% 0,100% 82%,50% 100%,0 82%);
        clip-path: polygon(0 0,100% 0,100% 82%,50% 100%,0 82%)
    }

    .top-banner p.desc {
        font-size: 22px
    }
}

.preview-title {
    padding: 76px 0 66px
}

.preview-title h2 {
    margin-bottom: 66px;
    font-size: 36px;
    color: #3f8aef
}

.preview-title h2 img {
    width: 60px;
    margin-right: 10px;
    vertical-align: middle
}

.preview-title p span {
    display: inline-block;
    padding: 0 60px;
    font-size: 20px;
    color: #323232
}

.preview-title p span img {
    width: 24px;
    margin-right: 16px;
    vertical-align: middle
}

.preview-title p span i.iconfont {
    margin-right: 5px;
    font-size: 20px;
    vertical-align: middle
}

.preview-title p span i.iconfont.color1 {
    color: var(--banner-bg1-color)
}

.index_logoicon_wrap {
    height: 175px;
    margin-top: 40px;
    overflow: hidden
}

.index_logoicon_wrap .bd {
    height: 100%
}

.index_logoicon_wrap .bd .index_logoicon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 10px 0;
    padding: 3px 0!important
}

.index_logoicon_wrap .bd .index_logoicon .item {
    float: left;
    margin-right: 20px;
    cursor: pointer
}

.index_logoicon_wrap .bd .index_logoicon .item .item-div {
    position: relative;
    display: block;
    width: 220px;
    height: 165px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 3px rgba(34,25,25,.4)
}

.index_logoicon_wrap .bd .index_logoicon .item .item-div .svgstyle {
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    -moz-align-items: center;
    -ms-align-items: center;
    align-items: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 20% 15%
}

.index_logoicon_wrap .bd .index_logoicon .item .item-div .svgstyle img {
    width: 100%
}

.index_logoicon_wrap .bd .index_logoicon .item .item-div .svgstyle.nopaddinglogo {
    padding: 0
}

.money-tools {
    height: 990px;
    background: #fff
}

.money-tools .design-bg {
    height: 472px;
    background: linear-gradient(1deg,#e5f4ff,#fff)
}

.money-tools h2 {
    padding-top: 80px;
    margin-bottom: 40px;
    font-size: 36px;
    color: #3f8aef
}

.money-tools h2 img {
    width: 60px;
    margin-right: 10px;
    vertical-align: middle
}

.money-tools p {
    margin-bottom: 60px;
    font-size: 20px;
    color: #323232
}

.money-tools .tools {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: space-around;
    max-width: 1120px;
    padding-top: 10px;
    margin: 0 auto
}

.money-tools .tools .item {
    position: relative;
    width: 330px;
    height: 660px;
    margin: 0 10px;
    background: #fff;
    border: 1px solid #efefef;
    border-radius: 4px;
    transition: all .25s;
    transform: scale(1)
}

.money-tools .tools .item .corner {
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
    overflow: hidden;
    border-radius: 0 4px 0 0
}

.money-tools .tools .item .corner:before {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    width: 0;
    height: 0;
    content: "";
    border-top: 80px solid red;
    border-left: 80px solid transparent
}

.money-tools .tools .item .corner:after {
    position: absolute;
    left: 0;
    z-index: 2;
    width: 80px;
    font-size: 14px;
    color: #fff;
    text-align: center;
    content: attr(data-text);
    transform: rotate(45deg) translate3d(23px,9px,0)
}

.money-tools .tools .item .corner--grey:before {
    border-top-color: #878787
}

.money-tools .tools .item .corner--blue:before {
    border-top-color: #5d95f0
}

.money-tools .tools .item .corner--yellow:before {
    border-top-color: #fdc625
}

.money-tools .tools .item .corner--green:before {
    border-top-color: #39c9ac
}

.money-tools .tools .item .label {
    position: absolute;
    top: 0;
    right: 0;
    width: 80px
}

.money-tools .tools .item .pay-money {
    margin: 20px auto 10px;
    font-size: 40px
}

.money-tools .tools .item .pay-money .symbol {
    position: absolute;
    position: relative;
    top: -15px;
    padding-right: 2px;
    font-size: 16px
}

.money-tools .tools .item .pay-money .currency {
    padding-left: 2px;
    font-size: 11px;
    color: #666
}

.money-tools .tools .item .price1 {
    color: #666
}

.money-tools .tools .item .price2 {
    color: #3f8aef
}

.money-tools .tools .item .price3 {
    color: #06c29f
}

.money-tools .tools .item .price4 {
    color: #fdc611
}

.money-tools .tools .item img.icon {
    width: 124px;
    margin-bottom: 20px
}

.money-tools .tools .item ul {
    padding: 20px 0;
    border-top: 1px solid #efefef
}

.money-tools .tools .item ul li {
    font-size: 18px;
    line-height: 36px;
    color: #323232
}

.money-tools .tools .item ul li del {
    color: #b5b5b5
}

.money-tools .tools .item dl {
    padding: 22px 10px;
    margin: 0;
    text-align: left
}

.money-tools .tools .item dl dt {
    font-size: 14px;
    color: #969696
}

.money-tools .tools .item dl dd {
    padding: 0;
    margin: 16px 0 0;
    font-size: 18px;
    color: #323232
}

.money-tools .tools .item dl dd i.iconfont {
    font-size: 22px;
    color: #323232
}

.money-tools .tools .item dl dd span {
    color: #2c85ff
}

.money-tools .tools .item dl dd span .num {
    font-size: 24px
}

.money-tools .tools .item dl dd .text {
    color: #323232
}

.money-tools .tools .item dl dd .tip {
    font-size: 15px;
    font-style: italic
}

.money-tools .tools .item .btn-pay {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50px;
    background: #f7f7f7;
    border-top: 1px solid #efefef
}

.money-tools .tools .item .btn-pay a {
    font-size: 18px;
    line-height: 50px;
    color: #3f8aef
}

.money-tools .tools .item .btn-pay .more {
    color: #666
}

.money-tools .tools .item p.name {
    font-size: 14px;
    font-weight: 700;
    color: #32363e
}

.money-tools .tools .item p.desc {
    padding: 20px 22px;
    margin-bottom: 0;
    font-size: 18px;
    line-height: 36px;
    color: #323232;
    text-align: left;
    border-top: 1px solid #efefef;
    border-bottom: 1px solid #efefef
}

.money-tools .tools .item:hover {
    transition: all .25s;
    transform: scale(1.03)
}

.design-tools {
    min-height: 950px;
    background: #fff
}

.design-tools .design-bg {
    height: 100%;
    background: url(../img/newindex/desbg.png) #fff no-repeat top
}

.design-tools .design-bg h1 {
    position: relative;
    width: 540px;
    padding-top: 210px;
    margin: 0 0 160px 20%;
    font-size: 40px;
    color: #fff;
    text-align: left;
    opacity: .9
}

.design-tools .design-bg h1 span {
    position: absolute;
    font-size: 182px;
    color: hsla(0,0%,100%,.15)
}

.design-tools .design-bg h1 .left-sign {
    top: 130px;
    left: -40px
}

.design-tools .design-bg h1 .right-sign {
    top: 230px;
    left: 450px
}

.design-tools h2 {
    padding-top: 60px;
    margin: 0 auto 20px;
    font-size: 36px;
    color: #3f8aef
}

.design-tools h2 img {
    position: relative;
    top: -10px;
    width: 60px;
    margin-right: 10px;
    vertical-align: middle
}

.design-tools p {
    margin-bottom: 70px;
    font-size: 20px;
    color: #323232
}

.design-tools .tools {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: space-between;
    max-width: 1120px;
    margin: 0 auto
}

.design-tools .tools .item {
    width: 22%;
    height: 288px;
    margin-bottom: 80px;
    background: hsla(0,0%,100%,.97);
    border-radius: 4px;
    box-shadow: 0 0 30px rgba(0,0,0,.15)
}

.design-tools .tools .item img.icon {
    width: 78px;
    margin-top: 42px;
    margin-bottom: 28px
}

.design-tools .tools .item p.name {
    margin-bottom: 20px;
    font-size: 22px;
    font-weight: 700;
    color: #323232
}

.design-tools .tools .item p.desc {
    padding: 0 30px;
    font-size: 14px;
    color: #525252;
    text-align: left
}

.index-footer {
    color: #fff;
    background: url(../img/newindex/1440.jpg) top no-repeat;
    background-size: cover
}

.index-footer .footer-inner {
    position: relative;
    height: 100%;
    padding-bottom: 10px;
    background: rgba(63,138,239,.9)
}

.index-footer .footer-inner .QRimg {
    width: 100px;
    margin: 0 auto;
    transform: translate3d(0,-50px,0)
}

.index-footer .footer-inner .Mobileimg {
    position: absolute;
    width: 100px;
    margin: 70px 12px
}

.index-footer .footer-inner .scan-us {
    position: absolute;
    top: -20px;
    width: 100px;
    margin: 0 12px
}

.index-footer .footer-inner .arrow {
    position: absolute;
    width: 21px;
    transform: translate3d(40px,0,0)
}

.index-footer .footer-inner h2 {
    font-size: 28px
}

.index-footer .footer-inner .other {
    margin: 12px auto 74px;
    font-size: 18px;
    opacity: .9
}

.index-footer .footer-inner .other span {
    font-size: 24px;
    color: #fff;
    cursor: default
}

.index-footer .footer-inner .other a {
    color: #ffe9ae;
    cursor: pointer
}

.index-footer .footer-inner .other a .iconfont {
    font-size: inherit
}

.index-footer .footer-inner .footer-nav {
    padding: 26px;
    margin: 0 auto;
    font-size: 16px;
    color: #fff;
    border-top: 1px solid hsla(0,0%,100%,.25);
    border-bottom: 1px solid hsla(0,0%,100%,.25)
}

.index-footer .footer-inner .footer-nav a {
    margin-left: 16px;
    line-height: 1.56;
    color: #fff
}

.index-footer .footer-inner .link {
    padding: 22px;
    margin: 0 auto 30px;
    font-size: 14px;
    border-bottom: 1px solid hsla(0,0%,100%,.25)
}

.index-footer .footer-inner .link .linkspan a {
    margin-left: 16px;
    font-size: 14px;
    line-height: 1.56;
    color: #fff
}

.index-footer .footer-inner .footer-copyright {
    margin: 30px auto 20px;
    line-height: 1.56;
    font-size: 14px;
    color: #f0f0f0
}

.index-footer .footer-inner .footer-copyright a {
    font-size: 14px;
    color: #f0f0f0
}

@media screen and (max-width: 1700px) {
    .design-tools .design-bg h1 {
        margin:0 0 160px 15%
    }
}

@media screen and (max-width: 1550px) {
    .design-tools .design-bg h1 {
        margin:0 0 160px 12%
    }
}

@media screen and (max-width: 1400px) {
    .design-tools .design-bg h1 {
        margin:0 0 160px 8%
    }
}

@media screen and (max-width: 767px) {
    .top-banner {
        height:630px
    }

    .top-banner .arrow-img {
        top: 20px;
        width: 26px;
        height: 30px
    }

    .top-banner .index-icon {
        height: 45px
    }

    .company-input,.el-input {
        height: 60px
    }

    .company-input .go-button,.el-input .go-button {
        padding: 15px 20px!important
    }

    .create-number {
        width: 100%;
        margin-top: 55px;
        font-size: 16px
    }

    .create-number span {
        font-size: 22px
    }

    .create-number .tm {
        font-size: 16px
    }

    .create-number b {
        width: 18px;
        height: 24px;
        font-size: 22px;
        line-height: 24px
    }

    .create-number a {
        font-size: 22px
    }

    .bounceInRight {
        animation: bounceInRight 1s ease
    }

    .moveRight {
        transform: translate3d(500px,0,0)
    }

    .preview-title {
        padding: 70px 0 20px
    }

    .preview-title h2 {
        margin-bottom: 30px;
        font-size: 24px
    }

    .preview-title h2 img {
        width: 36px
    }

    .preview-title p span {
        padding: 0 10px;
        font-size: 14px
    }

    .preview-title p span img {
        width: 14px;
        margin-right: 10px
    }

    .money-tools {
        height: 840px
    }

    .money-tools .design-bg {
        height: 439px
    }

    .money-tools h2 {
        font-size: 24px
    }

    .money-tools h2 img {
        position: relative;
        top: -3px;
        width: 36px
    }

    .money-tools p {
        margin-bottom: 40px;
        font-size: 16px
    }

    .money-tools .tools-parent {
        width: 100%;
        height: 580px;
        overflow-x: scroll;
        overflow-y: hidden
    }

    .money-tools .tools-move {
        height: 580px;
        overflow: hidden
    }

    .money-tools .tools {
        justify-content: space-around;
        width: 1120px;
        max-width: unset;
        padding: 0 10px
    }

    .money-tools .tools .item {
        width: 280px;
        height: 560px;
        margin: 0 12px
    }

    .money-tools .tools .item .label {
        width: 60px
    }

    .money-tools .tools .item .pay-money {
        margin: 30px auto 20px;
        font-size: 36px
    }

    .money-tools .tools .item .pay-money .symbol {
        position: absolute;
        position: relative;
        top: -15px;
        padding-right: 2px;
        font-size: 16px
    }

    .money-tools .tools .item .pay-money .currency {
        padding-left: 2px;
        font-size: 11px;
        color: #666
    }

    .money-tools .tools .item img.icon {
        width: 100px;
        margin-bottom: 16px
    }

    .money-tools .tools .item ul li {
        font-size: 14px;
        line-height: 30px
    }

    .money-tools .tools .item dl {
        padding: 26px 0 26px 20px
    }

    .money-tools .tools .item dl dt {
        font-size: 14px
    }

    .money-tools .tools .item dl dd {
        margin-top: 14px;
        font-size: 14px
    }

    .money-tools .tools .item dl dd i.iconfont {
        font-size: 18px
    }

    .money-tools .tools .item dl dd span .num {
        font-size: 20px
    }

    .money-tools .tools .item dl dd .tip {
        font-size: 14px;
        font-style: italic
    }

    .money-tools .tools .item .btn-pay {
        height: 40px
    }

    .money-tools .tools .item .btn-pay a {
        font-size: 14px;
        line-height: 40px
    }

    .money-tools .tools .item p.desc {
        padding: 17px 18px;
        font-size: 14px;
        line-height: 30px
    }

    .design-tools .design-bg {
        background: url(../img/newindex/mdesbg.png) #fff no-repeat top;
        background-size: 100%
    }

    .design-tools .design-bg h1 {
        width: 175px;
        padding-top: 30px;
        margin: 0 0 50px 5.8%;
        font-size: 20px
    }

    .design-tools .design-bg h1 span {
        font-size: 50px
    }

    .design-tools .design-bg h1 .left-sign {
        top: 10px;
        left: -12px
    }

    .design-tools .design-bg h1 .right-sign {
        top: 80px;
        left: 140px
    }

    .design-tools h2 {
        margin: 0 auto 20px;
        font-size: 24px
    }

    .design-tools h2 img {
        top: -6px;
        width: 36px
    }

    .design-tools p {
        margin-bottom: 15px
    }

    .design-tools .tools {
        flex-wrap: wrap;
        justify-content: space-around;
        width: 100%
    }

    .design-tools .tools .item {
        width: 80%;
        height: auto;
        margin-bottom: 30px;
        box-shadow: 0 0 20px rgba(0,0,0,.15)
    }

    .design-tools .tools .item img.icon {
        width: 40px;
        margin-top: 15px;
        margin-bottom: 15px
    }

    .design-tools .tools .item p.name {
        margin-bottom: 10px;
        font-size: 16px
    }

    .design-tools .tools .item p.desc {
        font-size: 12px;
        text-align: center
    }

    .index-footer .footer-inner {
        padding: 0 20px 10px
    }

    .index-footer .footer-inner .QRimg {
        width: 80px;
        margin: 50px auto 0;
        transform: translate3d(0,-90px,0)
    }

    .index-footer .footer-inner .Mobileimg {
        width: 60px;
        margin: 60px 8px
    }

    .index-footer .footer-inner h2 {
        font-size: 22px
    }

    .index-footer .footer-inner .other {
        margin: 12px auto 50px;
        font-size: 14px
    }

    .index-footer .footer-inner .other span {
        font-size: 16px
    }

    .index-footer .footer-inner .footer-nav {
        width: 100%;
        padding: 20px 0;
        font-size: 12px
    }

    .index-footer .footer-inner .footer-nav a {
        margin-left: 8px
    }

    .index-footer .footer-inner .link {
        display: none;
        width: 100%;
        padding: 20px 0;
        margin: 0 auto 20px;
        font-size: 12px
    }

    .index-footer .footer-inner .link a {
        color: #fff
    }

    .index-footer .footer-inner .link .linkspan a {
        margin-left: 8px;
        font-size: 12px
    }

    .index-footer .footer-inner .footer-copyright {
        font-size: 12px;
        margin: 20px auto 10px
    }

    .index-footer .footer-inner .footer-copyright a {
        font-size: 12px
    }
}

.main-container .loading {
    width: 100%
}

.main-container .loading .best-container .bestwork {
    border-radius: 4px
}

.main-container .loading .best-container .bestwork>a,.main-container .loading .best-container .bestwork>a img {
    border-radius: inherit
}

.main-container .loading .big.best-container .bestwork {
    padding: 0;
    margin: 10px
}

.main-container .loading .big.best-container .bestwork>a {
    position: relative;
    display: block;
    width: 100%
}

.industry-main-container .single-work {
    position: relative;
    width: 50%;
    padding: 10px;
    transition: all .2s ease-in
}

.industry-main-container .single-work:hover {
    cursor: pointer;
    transform: scale(1.03)
}

.industry-main-container .main {
    width: 100%;
    padding: 1em 10px 2.5em;
    background-color: #f7f7f7
}

.industry-main-container .main .main-container {
    display: flex;
    flex-flow: wrap;
    width: 100%;
    max-width: 1120px;
    margin: 0 auto
}

.industry-main-container .main .main-container .bimg {
    display: block;
    width: 100%
}

.industry-main-container .main .main-container .loading {
    display: flex;
    flex-wrap: wrap
}

.industry-main-container .main .main-container .loading .horizontal {
    display: flex;
    flex-flow: wrap;
    width: 100%
}

.industry-main-container .main .main-container .loading .horizontal .bestwork {
    width: 25%
}

.industry-main-container .main .main-container .loading .big {
    display: flex;
    flex-flow: wrap;
    width: 50%
}

.industry-main-container .main .main-container .loading .big .bestwork {
    display: block;
    width: 100%
}

.industry-main-container .main .main-container .loading .vertical {
    display: flex;
    flex-wrap: wrap;
    width: 50%
}

.industry-main-container .main .main-container .loading .vertical .bestwork img {
    width: 100%
}

.industry-main-container .main .main-container .loading .vertical .fourbest {
    padding-top: 5px
}

.industry-main-container .main .main-container .loading_more {
    width: 100%;
    padding: 20px 0
}

.industry-main-container .main .main-container .loading_more .load-button {
    padding: 20px 25px;
    margin-left: 4px;
    color: #fff;
    border-radius: 4px
}

.industry-main-container .main .morelink {
    display: inline-block;
    margin-top: 24px;
    font-size: 18px
}

.populars {
    padding: 1em 15px 2em;
    background: #fff
}

.populars .populars-wrapper {
    max-width: 1120px;
    margin: 0 auto
}

.populars .populars-wrapper .items {
    display: flex;
    align-items: stretch;
    justify-content: space-around
}

.populars .populars-wrapper .items .item {
    width: 30%;
    font-size: 11px
}

.populars .populars-wrapper .items .item .svg-wrapper {
    padding: 0
}

.populars .populars-wrapper .items .item span.num {
    font-size: 26px;
    font-weight: 700
}

.pricing__footer {
    position: relative;
    flex-wrap: wrap;
    padding: 10px 0
}

.pricing__footer .inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 1120px;
    margin: 0 auto
}

.pricing__footer:before {
    position: absolute;
    top: -30px;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    content: "";
    background-color: #e8f3fd;
    -webkit-clip-path: polygon(0 30px,100% 0,100% 100%,0 100%);
    clip-path: polygon(0 30px,100% 0,100% 100%,0 100%)
}

.pricing__footer .img-container,.pricing__footer .text-container {
    position: relative;
    display: inline-block;
    width: 100%;
    padding: 0 15px
}

.pricing__footer .text-container {
    display: inherit;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px
}

.pricing__footer .text-container .wrapper {
    max-width: 550px
}

.pricing__footer .text-container h2 {
    margin-bottom: 17px;
    font-size: 18px;
    font-weight: 400
}

.pricing__footer .img-container {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-between;
    text-align: center
}

.pricing__footer .img-container a {
    width: 32%;
    margin-bottom: 10px
}

.pricing__footer .img-container a img {
    width: 112px;
    padding: 0;
    border-radius: 4px;
    transition: all .2s ease-in
}

.pricing__footer .img-container a img:hover {
    transform: scale(1.03)
}

.recommend-logo-area {
    position: relative;
    margin-top: -278px;
    overflow: hidden;
    font-size: 0
}

.recommend-logo-area .recommend-logo-list {
    white-space: nowrap
}

.recommend-logo-area .recommend-logo-list .recommend-logo-list-inner {
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate
}

.recommend-logo-area .recommend-logo-list:last-child .recommend-logo-list-inner {
    animation-direction: alternate-reverse
}

.recommend-logo-area .recommend-logo-list .card {
    display: inline-block;
    margin: .6vw;
    overflow: hidden;
    cursor: pointer;
    border-radius: 4px;
    box-shadow: none
}

.recommend-logo-area .recommend-logo-list .card img {
    width: 15vw;
    min-width: 120px
}

.recommend-logo-area .star-rating {
    margin-bottom: 70px
}

.recommend-logo-area .star-rating .el-rate {
    height: auto
}

.recommend-logo-area .star-rating .el-rate .el-rate__item {
    padding: 0 7.5px
}

.recommend-logo-area .star-rating .el-rate .el-rate__item .el-rate__icon {
    font-size: 30px
}

.recommend-logo-area .star-rating h3 {
    margin: 15px 15px 0;
    font-size: 44px;
    font-weight: 600;
    color: #515151
}

.recommend-logo-area .star-rating .parting-line {
    width: 150px;
    margin: 15px auto 0;
    border: 2px solid #4ca4ff
}

.recommend-logo-area .star-rating p {
    margin-top: 15px;
    font-size: 24px;
    color: #6c6c6c
}

.recommend-logo-area .start-button {
    width: 286px;
    height: 67px;
    margin-top: 70px;
    font-size: 22px;
    border-radius: 33.5px
}

.lots-of-icons {
    padding: 2em 15px;
    background: #f7f7f7
}

.lots-of-icons3 {
    padding: 2em 15px;
    overflow: hidden;
    white-space: nowrap;
    background: #fff
}

.lots-of-icons3 .lots-of-icons2 {
    display: inline-block
}

.lots-of-icons3 .lots-of-icons2 img {
    height: 50px;
    margin: 0 10px
}

.lots-of-icons3 .lots-of-icons2 .gray {
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray
}

.appraise {
    padding-top: 46px;
    padding-bottom: 60px;
    background: #fff;
    border-bottom: 1px solid #eee
}

.appraise .maxwidth1 {
    margin: 0 auto
}

.appraise .swiper-container1 {
    position: relative;
    overflow: hidden
}

.appraise .left {
    background: url(../img/headimg.png) no-repeat 0 -152px
}

.appraise .left,.appraise .right {
    display: block;
    width: 56px;
    height: 56px
}

.appraise .right {
    background: url(../img/headimg.png) no-repeat -120px -152px
}

.appraise ul li {
    list-style: none
}

.appraise ul li .companyname1,.appraise ul li .companyname2 {
    width: 74px;
    height: 54px;
    margin-bottom: 50px
}

.appraise ul li .companyname3 {
    width: 120px;
    height: 26px;
    margin-bottom: 50px
}

.appraise ul li .headimg {
    width: 76px;
    height: 76px;
    margin: 0 auto;
    background: url(../img/headimg.png) no-repeat 0 0
}

.appraise ul li .flower {
    background: url(../img/headimg.png) no-repeat -240px -228px
}

.appraise ul li .flower,.appraise ul li .flower1 {
    padding-left: 14px;
    font-style: normal;
    text-decoration: none
}

.appraise ul li .flower1 {
    background: url(../img/headimg.png) no-repeat -120px -228px
}

.appraise ul li .flower2 {
    padding-left: 14px;
    font-style: normal;
    text-decoration: none;
    background: url(../img/headimg.png) no-repeat 0 -228px
}

.appraise ul li h4 {
    margin-top: 16px;
    font-size: 16px;
    line-height: 20px
}

.appraise ul li h5 {
    margin-top: 3px;
    font-size: 14px;
    line-height: 20px
}

.appraise ul li p {
    width: 602px;
    margin: 50px auto;
    font-size: 16px;
    line-height: 24px
}

.appraise .swiper-button-next,.appraise .swiper-button-prev {
    width: 27px;
    height: 44px
}

.pricing__footer1 {
    position: relative;
    flex-wrap: wrap;
    padding: 10px 0
}

.pricing__footer1 .inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 1120px;
    margin: 0 auto
}

.pricing__footer1 .img-container,.pricing__footer1 .text-container {
    position: relative;
    display: inline-block;
    width: 100%;
    padding: 0 15px
}

.pricing__footer1 .text-container {
    display: inherit;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px
}

.pricing__footer1 .text-container .wrapper {
    max-width: 550px
}

.pricing__footer1 .text-container h2 {
    margin-bottom: 17px;
    font-size: 18px;
    font-weight: 400
}

.pricing__footer1 .img-container {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-between;
    text-align: center
}

.pricing__footer1 .img-container a {
    width: 32%;
    margin-bottom: 10px
}

.pricing__footer1 .img-container a img {
    width: 112px;
    padding: 0;
    border-radius: 4px;
    transition: all .2s ease-in
}

.pricing__footer1 .img-container a img:hover {
    transform: scale(1.03)
}

.populars-simple .populars-wrapper {
    display: flex;
    flex-direction: column;
    padding: 0 15px 5em
}

.populars-simple .populars-wrapper .itemsandimg {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    width: 1120px;
    margin: 0 auto
}

.populars-simple .populars-wrapper .itemsandimg .imagediv {
    width: 698px;
    height: 412px;
    margin-bottom: 0;
    background: url(../img/pc-bg.png) no-repeat 50%;
    background-size: cover
}

.populars-simple .populars-wrapper .itemsandimg .imagediv .preview-logo {
    max-width: 250px
}

.populars-simple .populars-wrapper .itemsandimg .imagediv .bigimg {
    width: 100%;
    height: 100%
}

.populars-simple .populars-wrapper .itemsandimg .imagediv .finger {
    display: none
}

.populars-simple .populars-wrapper .itemsandimg .items {
    display: flex;
    flex-direction: column
}

.populars-simple .populars-wrapper .itemsandimg .items .item {
    margin-top: 50px;
    border-bottom: 1px solid #999
}

.populars-simple .populars-wrapper .itemsandimg .items .item p {
    width: 200px;
    text-align: right
}

.populars-simple .populars-wrapper .itemsandimg .items .item .num {
    font-size: 48px;
    font-weight: 700;
    color: #565656
}

.populars-simple .populars-wrapper .itemsandimg .items .item .txt {
    font-size: 18px;
    line-height: 24px
}

.populars-simple .populars-wrapper .itemsandimg .items .item .txt2 {
    margin-bottom: 6px;
    font-size: 16px;
    color: #999
}

@keyframes shift {
    0% {
        transform: translateX(0)
    }

    to {
        transform: translateX(calc(-100% + 100vw))
    }
}

@media screen and (min-width: 1600px) {
    .recommend-logo-area {
        margin-top:-425px
    }
}

@media(max-width: 767px) {
    .lots-of-icons3 {
        padding:20px 0;
        overflow: hidden;
        white-space: nowrap
    }

    .lots-of-icons3 .lots-of-icons2 img {
        height: 30px;
        margin: 0 5px
    }

    .appraise .maxwidth1 {
        width: 100%;
        margin: 0 auto
    }

    .appraise .swiper-button-next,.appraise .swiper-button-prev {
        width: 27px;
        height: 22px
    }

    .appraise ul li p {
        width: 100%;
        padding: 0 68px;
        margin: 36px auto;
        font-size: 14px
    }

    .populars-simple .populars-wrapper {
        padding: 1em 15px 2em
    }

    .populars-simple .populars-wrapper .itemsandimg {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        margin-top: 20px
    }

    .populars-simple .populars-wrapper .itemsandimg .imagediv {
        position: relative;
        width: 375px;
        height: 308px;
        margin-bottom: 16px;
        background: url(../img/mobile-bg.png) no-repeat top;
        background-size: 90%
    }

    .populars-simple .populars-wrapper .itemsandimg .imagediv .finger {
        position: absolute;
        bottom: 0;
        left: 38px;
        z-index: 1;
        display: block;
        width: 102px;
        transition: all .1s
    }

    .populars-simple .populars-wrapper .itemsandimg .imagediv .finger.slide-finger {
        transition: all .3s;
        transform: translateX(-72px)
    }

    .populars-simple .populars-wrapper .itemsandimg .items {
        display: flex;
        flex-direction: row;
        justify-content: center
    }

    .populars-simple .populars-wrapper .itemsandimg .items .item {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin: 0 5px
    }

    .populars-simple .populars-wrapper .itemsandimg .items .item p {
        width: 108px;
        text-align: center
    }

    .populars-simple .populars-wrapper .itemsandimg .items .item .num {
        font-size: 24px
    }

    .populars-simple .populars-wrapper .itemsandimg .items .item .txt {
        font-size: 12px;
        line-height: 18px
    }

    .populars-simple .populars-wrapper .itemsandimg .items .item .txt2 {
        font-size: 12px;
        color: #999
    }

    .populars-simple .populars-wrapper .itemsandimg .items .item .txt3 {
        font-size: 14px
    }

    .entry .entry-wrapper {
        padding: 50px 15px 30px
    }

    .entry .logo {
        margin-bottom: 30px
    }

    .entry .logo img {
        height: 35px
    }

    .entry h1 {
        font-size: 22px
    }

    .entry p {
        margin-top: 10px;
        font-size: 13px
    }

    .recommend-logo-area .recommend-logo-list .card {
        margin: 1vw
    }
}

@media screen and (min-width: 768px) {
    .recommend-logo-area {
        margin-top:-330px
    }

    h2.title {
        margin: 0 0 30px;
        font-size: 24px
    }

    .top-banner {
        padding: 0
    }

    .top-banner h1.index-title {
        font-size: 36px
    }

    .index_logoicon_wrap {
        height: 270px
    }

    .index_logoicon_wrap .bd .index_logoicon .item .item-div {
        width: 345px;
        height: 260px
    }

    .populars {
        padding: 5em 15px
    }

    .populars .populars-wrapper .items .item {
        font-size: 14px
    }

    .populars .populars-wrapper .items .item .svg-wrapper {
        padding: 0 30px
    }

    .populars .populars-wrapper .items .item span.num {
        font-size: 38px
    }

    .lots-of-icons {
        padding: 5em 15px
    }

    .golang {
        padding: 100px 0
    }

    .golang .golang-content h1 {
        font-size: 32px
    }

    .pricing__footer {
        justify-content: space-between;
        padding: 60px 0
    }

    .pricing__footer:before {
        -webkit-clip-path: polygon(0 50px,100% 0,100% 100%,0 100%);
        clip-path: polygon(0 50px,100% 0,100% 100%,0 100%);
        top: -50px
    }

    .pricing__footer .inner {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between
    }

    .pricing__footer .text-container {
        width: 50%;
        padding: 0 5%;
        margin-bottom: 0
    }

    .pricing__footer .text-container .wrapper {
        width: 100%
    }

    .pricing__footer .text-container h2 {
        margin-bottom: 17px;
        font-size: 24px
    }

    .pricing__footer .img-container {
        width: 50%;
        padding: 0 4%
    }

    .pricing__footer .img-container a {
        width: 32%
    }

    .pricing__footer .img-container a img {
        width: 100%
    }

    .design-tools .tools .item {
        width: 22%;
        margin-top: 60px
    }

    .design-tools .tools .item:first-child,.design-tools .tools .item:nth-child(2),.design-tools .tools .item:nth-child(3),.design-tools .tools .item:nth-child(4) {
        margin-top: 0
    }

    .design-tools .tools .item img.icon {
        width: 78px
    }

    .design-tools .tools .item p.name {
        font-size: 18px
    }

    .design-tools .tools .item p.desc {
        font-size: 14px
    }
}

@media screen and (max-width: 767px) {
    .industry-main-container .single-work {
        position:relative;
        width: 50%;
        padding: 10px;
        transition: all .2s ease-in
    }

    .industry-main-container .single-work:hover {
        cursor: pointer;
        transform: scale(1.05)
    }

    .industry-main-container .main {
        width: 100%;
        padding: 2em 15px;
        background-color: #f7f7f7
    }

    .industry-main-container .main .main-container {
        display: flex;
        flex-flow: wrap;
        width: 100%;
        max-width: 1120px;
        margin: 0 auto
    }

    .industry-main-container .main .main-container .bimg {
        display: block;
        width: 100%
    }

    .industry-main-container .main .main-container .loading {
        display: flex;
        flex-wrap: wrap
    }

    .industry-main-container .main .main-container .loading .horizontal {
        display: flex;
        flex-flow: wrap;
        width: 100%
    }

    .industry-main-container .main .main-container .loading .horizontal .bestwork {
        width: 50%
    }

    .industry-main-container .main .main-container .loading .big {
        display: flex;
        flex-flow: wrap;
        width: 100%
    }

    .industry-main-container .main .main-container .loading .big .bestwork {
        display: block;
        width: 100%
    }

    .industry-main-container .main .main-container .loading .vertical {
        display: flex;
        flex-wrap: wrap;
        width: 100%
    }

    .industry-main-container .main .main-container .loading .vertical .bestwork img {
        width: 100%
    }

    .industry-main-container .main .main-container .loading .vertical .fourbest {
        padding-top: 5px
    }

    .industry-main-container .main .main-container .loading_more {
        width: 100%;
        padding: 20px 0
    }

    .industry-main-container .main .main-container .loading_more .load-button {
        padding: 20px 25px;
        margin-left: 4px;
        color: #fff;
        border-radius: 4px
    }

    .industry-main-container .main .morelink {
        margin-top: 16px;
        font-size: 14px
    }
}

.featured-img-swiper {
    left: -29.6%;
    width: 600px;
    padding: 8px 0!important;
    margin-top: 140px!important
}

.featured-img {
    width: 220px;
    height: 162px;
    overflow: hidden;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(34,25,25,.4)
}

.featured-img img {
    display: block;
    width: 100%
}

@media screen and (min-width: 768px) {
    .featured-img-swiper {
        left:0;
        width: 750px;
        padding: 8px 0!important;
        margin-top: 146px!important;
        margin-left: -26px!important
    }
}

.swiper-channels {
    max-width: 1120px;
    padding: 0 5px;
    margin: 0 auto
}

.swiper-channels .img {
    width: 100%;
    max-width: 370px;
    max-height: 126.91px
}

.my-input-group {
    display: flex;
    align-items: stretch;
    justify-content: center;
    max-width: 550px;
    margin: 0 auto
}

.my-input-group.mt50 {
    margin-top: 50px
}

.my-input-group.tip .el-input .el-input__inner {
    border-color: #f7c10d
}

.my-input-group.tip.split .el-input .el-input__inner {
    border: 2px solid #f7c10d
}

.my-input-group.split {
    justify-content: space-between
}

.my-input-group.split .el-input .el-input__inner {
    border-right: 2px solid #fff;
    border-radius: 4px
}

.my-input-group.split div.btn,.my-input-group.split label.btn {
    width: 120px;
    color: #fff;
    text-shadow: rgba(0,0,0,.2) 0 1px;
    background: #f7c10d;
    border: 2px solid #f7c10d;
    border-radius: 4px
}

.my-input-group.split div.btn:hover,.my-input-group.split label.btn:hover {
    text-shadow: rgba(0,0,0,.2) 0 1px;
    background: #eab503;
    border: 2px solid #eab503;
    box-shadow: none
}

.my-input-group .el-input {
    display: inline-block;
    width: calc(100% - 130px)
}

.my-input-group .el-input .el-input__inner {
    height: 66px;
    font-size: 18px;
    line-height: 26px!important;
    color: #333;
    text-align: center;
    background: #fff;
    border: 2px solid #e3e3e3;
    border-radius: 4px
}

.my-input-group .el-input .el-input__inner::-moz-placeholder {
    color: rgba(51,51,51,.5)
}

.my-input-group .el-input .el-input__inner::placeholder {
    color: rgba(51,51,51,.5)
}

.my-input-group div.btn,.my-input-group label.btn {
    box-sizing: border-box;
    width: 120px;
    height: 66px;
    margin-left: 20px;
    font-size: 18px;
    line-height: 62px;
    color: #fff;
    cursor: pointer;
    background: var(--theme,#20a0ff);
    border: 2px solid #ecf0f3;
    border-radius: 6px
}

.my-input-group div.btn:focus,.my-input-group div.btn:hover,.my-input-group label.btn:focus,.my-input-group label.btn:hover {
    opacity: .9
}

@media screen and (max-width: 767px) {
    .my-input-group div.btn,.my-input-group label.btn {
        margin-left:10px
    }
}

.my-input-group--no-radius .el-input .el-input__inner,.my-input-group--no-radius div.btn,.my-input-group--no-radius label.btn {
    border-radius: 0
}

.my-input-group .btn-link {
    display: block;
    margin: 26px auto auto
}

.my-input-group .btn-link .btn {
    min-width: 285px!important;
    height: auto!important;
    padding: 25px 60px!important;
    margin: auto!important;
    font-size: 16px!important;
    font-weight: 600!important;
    line-height: 1!important;
    color: #333!important;
    text-shadow: none!important;
    background-color: #fdc839!important;
    border-color: #fdc839!important;
    border-radius: 6px!important;
    transition: all .2s ease!important
}

.my-input-group .btn-link .btn:hover {
    background-color: #4db3ff!important;
    border-color: #4db3ff!important
}

.my-input-group .btn-link .btn:lang(en) {
    width: 300px;
    height: 72px!important;
    padding: 0!important;
    font-size: 20px!important;
    font-weight: 400!important;
    line-height: 72px!important;
    color: #3f8aef!important;
    background: #fff!important;
    border: none!important;
    border-radius: 6px!important
}

.my-input-group .btn-link .btn:lang(en):hover {
    background: hsla(0,0%,100%,.94)!important
}

@media screen and (max-width: 767px) {
    .my-input-group .btn-link .btn {
        padding-top:20px!important;
        padding-bottom: 20px!important;
        font-size: 14px!important
    }

    .my-input-group .btn-link .btn:lang(en) {
        width: 240px;
        min-width: 240px!important;
        height: 55px!important;
        font-size: 18px!important;
        font-weight: 400!important;
        line-height: 55px!important;
        color: #3f8aef!important;
        background: #fff!important;
        border: none!important;
        border-radius: 6px!important
    }

    .my-input-group .btn-link .btn:lang(en):hover {
        background: hsla(0,0%,100%,.94)!important
    }
}

@media screen and (min-width: 768px) {
    .my-input-group {
        margin:10px auto 0
    }

    .my-input-group.split div.btn,.my-input-group.split label.btn {
        width: 183px
    }

    .my-input-group .el-input {
        display: inline-block;
        width: calc(100% - 190px)
    }

    .my-input-group .el-input .el-input__inner {
        height: 66px;
        font-size: 18px
    }

    .my-input-group div.btn,.my-input-group label.btn {
        width: 170px;
        height: 66px;
        font-size: 18px;
        line-height: 62px
    }
}

.create-number {
    width: 770px;
    padding-top: 30px;
    margin: 60px auto 0;
    font-size: 16px;
    color: rgba(51,51,51,.7);
    text-align: center
}

.create-number span {
    font-size: 22px
}

.create-number b {
    width: 20px;
    height: 26px;
    margin-right: 3px;
    line-height: 26px;
    background: rgba(51,51,51,.7)
}

.create-number a,.create-number b {
    display: inline-block;
    font-size: 24px
}

.create-number a {
    margin: 0 5px;
    color: #fff
}

.create-number:lang(en) {
    font-size: 20px
}

@media screen and (max-width: 767px) {
    .create-number {
        width:100%;
        margin-top: 55px;
        font-size: 16px
    }

    .create-number:lang(en) {
        font-size: 18px
    }

    .create-number span {
        font-size: 22px
    }

    .create-number .tm {
        font-size: 16px
    }

    .create-number b {
        width: 18px;
        height: 24px;
        font-size: 22px;
        line-height: 24px
    }

    .create-number a {
        font-size: 22px
    }
}

img {
    max-width: 100%
}

header {
    position: relative;
    z-index: 9
}

.main-btn {
    line-height: 1.15;
    background-color: #4384f5;
    box-shadow: none;
    transition: all .3s ease
}

.main-btn.color1 {
    background-color: var(--banner-bg1-color)
}

.main-btn.color2 {
    background-color: var(--banner-bg2-color)
}

.main-btn.color3 {
    background-color: var(--banner-bg3-color)
}

.main-btn.color4 {
    background-color: var(--banner-bg4-color)
}

.design-tools {
    min-height: 830px
}

.home-logos-grid-columns {
    grid-area: 7/1/9/3
}

@media screen and (min-width: 768px) {
    .home-logos-grid-columns {
        grid-area:4/3/6/5
    }
}

.iconnavigation {
    width: 100%;
    padding: 70px 15px;
    margin: 0;
    background: #f7f7f7
}

.iconnavigation .textCen {
    margin: 0;
    font-size: 32px;
    text-align: center
}

.iconnavigation p.desc {
    max-width: 1120px;
    margin: 18px auto 30px;
    font-size: 18px;
    text-align: center
}

.iconnavigation ul {
    display: flex;
    flex-direction: column;
    max-width: 1120px;
    padding: 0;
    margin: 0 auto
}

.iconnavigation ul li {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-around;
    margin-bottom: 100px;
    overflow: hidden
}

.iconnavigation ul li img {
    display: block;
    float: right
}

.iconnavigation ul li .firstimg {
    width: 584px;
    height: 422px;
    margin-right: 10px
}

.iconnavigation ul li .secondimg {
    width: 622px;
    height: 310px;
    margin-left: 10px
}

.iconnavigation ul li .lastimg {
    width: 474px;
    height: 422px;
    margin-right: 10px
}

.iconnavigation ul li h3 {
    margin: 70px 0;
    font-size: 20px;
    text-align: center
}

.iconnavigation ul li h3.smallTitle {
    margin: 40px 0
}

.iconnavigation ul li p {
    width: 337px;
    font-size: 18px;
    line-height: 26px;
    text-align: center
}

.iconnavigation ul li button {
    width: 140px;
    height: 42px;
    font-size: 20px;
    color: #fff
}

.iconnavigation ul li .left {
    margin: 0 120px 0 10px;
    text-align: center
}

.iconnavigation ul li .left1 {
    margin: 0 228px 0 10px;
    text-align: center
}

.iconnavigation ul li .right {
    margin: 0 10px 0 82px;
    text-align: center
}

.iconnavigation ul li.margin-zero {
    margin-bottom: 0
}

.iconnavigation .threeicon p {
    font: 16px/28px ;
    color: #000;
    text-indent: 2em
}

.iconnavigation a {
    color: #eee;
    text-decoration: none;
    list-style: none
}

@media screen and (max-width: 768px) {
    .iconnavigation {
        width:100%;
        padding: 30px 15px
    }

    .iconnavigation .textCen {
        margin: 0;
        font-size: 22px;
        text-align: center
    }

    .iconnavigation p.desc {
        font-size: 14px
    }

    .iconnavigation ul {
        display: flex;
        flex-direction: column;
        padding: 0;
        margin-bottom: 0
    }

    .iconnavigation ul li {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        margin-bottom: 50px;
        overflow: hidden
    }

    .iconnavigation ul li img {
        display: block;
        float: right
    }

    .iconnavigation ul li .firstimg {
        width: 322px;
        height: 233px;
        margin-right: 0
    }

    .iconnavigation ul li .secondimg {
        width: 322px;
        height: 161px;
        margin-left: 0
    }

    .iconnavigation ul li .lastimg {
        width: 300px;
        height: 280px;
        margin-right: 0
    }

    .iconnavigation ul li h3 {
        margin: 30px 0 20px;
        font-size: 16px;
        text-align: center
    }

    .iconnavigation ul li h3.smallTitle {
        margin: 30px 0 20px
    }

    .iconnavigation ul li p {
        margin-bottom: 20px;
        font-size: 14px;
        line-height: 26px;
        text-align: center
    }

    .iconnavigation ul li button {
        width: 140px;
        height: 42px;
        font-size: 16px;
        color: #fff
    }

    .iconnavigation ul li .left,.iconnavigation ul li .left1,.iconnavigation ul li .right {
        margin: 0;
        text-align: center
    }

    .iconnavigation ul li.te {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        justify-content: space-around;
        overflow: hidden
    }

    .iconnavigation .threeicon p {
        font: 16px/28px ;
        color: #000;
        text-indent: 2em
    }

    .iconnavigation a {
        color: #eee;
        text-decoration: none;
        list-style: none
    }
}

.sc-designer {
    padding: 70px 15px 160px;
    background-color: #fff
}

@media screen and (max-width: 767px) {
    .sc-designer {
        padding:32px 15px
    }
}

.sc-designer__title {
    font-size: 30px;
    color: #222;
    text-align: center
}

@media screen and (max-width: 767px) {
    .sc-designer__title {
        font-size:26px
    }
}

.sc-designer__desc {
    display: block;
    max-width: 687px;
    margin: 15px auto 70px;
    font-size: 16px;
    line-height: 1.5;
    color: #666;
    text-align: center
}

@media screen and (max-width: 767px) {
    .sc-designer__desc {
        font-size:14px
    }
}

.sc-designer__icon {
    display: block;
    width: 70px;
    height: 70px
}

@media screen and (max-width: 767px) {
    .sc-designer__icon {
        width:50px;
        height: 50px
    }
}

.sc-designer__features {
    max-width: 1100px;
    margin: -60px auto 0;
    font-size: 0
}

.sc-designer__feature {
    display: inline-block;
    text-align: left;
    vertical-align: top
}

@media screen and (min-width: 768px) {
    .sc-designer__feature {
        width:28.9090909091%;
        margin-top: 60px;
        margin-left: 6.6363636364%
    }

    .sc-designer__feature:nth-child(3n+1) {
        margin-left: 0
    }
}

@media screen and (max-width: 767px) {
    .sc-designer__feature {
        width:47%;
        margin-top: 30px
    }

    .sc-designer__feature:nth-child(2n) {
        margin-left: 3%
    }
}

.sc-designer-feature {
    margin: 30px 0 0
}

@media screen and (max-width: 767px) {
    .sc-designer-feature {
        margin-top:20px
    }
}

.sc-designer-feature__title {
    font-size: 18px;
    font-weight: 500;
    color: #222
}

@media screen and (max-width: 767px) {
    .sc-designer-feature__title {
        font-size:16px
    }
}

.sc-designer-feature__desc {
    margin: 15px 0 0;
    font-size: 16px;
    line-height: 1.5;
    color: #666
}

@media screen and (max-width: 767px) {
    .sc-designer-feature__desc {
        margin-top:10px;
        font-size: 12px
    }
}

.sc-features {
    position: absolute;
    right: 0;
    bottom: -70px;
    left: 0;
    z-index: 1;
    padding: 30px 40px;
    margin: -30px auto;
    overflow: auto;
    font-size: 0;
    white-space: nowrap
}

.sc-features::-webkit-scrollbar {
    display: none
}

@media screen and (max-width: 767px) {
    .sc-features {
        bottom:-57px;
        padding-right: 15px;
        padding-left: 15px
    }
}

.sc-feature {
    position: relative;
    display: inline-block;
    width: 380px;
    height: 140px;
    padding: 30px 20px;
    margin: 0;
    overflow: hidden;
    text-align: left;
    background-color: #fff;
    border-radius: 6px;
    box-shadow: 0 2px 30px 0 rgba(0,0,0,.1)
}

.sc-feature:lang(en) {
    padding: 25px 20px
}

@media screen and (max-width: 767px) {
    .sc-feature {
        width:319px;
        height: 114px;
        padding: 20px
    }

    .sc-feature:lang(en) {
        padding: 13px 20px
    }
}

.sc-feature:after {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 97px;
    height: 108px;
    content: "";
    background-repeat: no-repeat;
    background-size: contain
}

@media screen and (max-width: 767px) {
    .sc-feature:after {
        width:84px;
        height: 93px
    }
}

.sc-feature+.sc-feature {
    margin-left: 30px
}

@media screen and (max-width: 767px) {
    .sc-feature+.sc-feature {
        margin-left:20px
    }
}

.sc-feature__title {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.34;
    color: #222
}

@media screen and (max-width: 767px) {
    .sc-feature__title {
        font-size:16px;
        line-height: 1.5
    }
}

.sc-feature__desc {
    max-width: 256px;
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.72;
    color: #666;
    white-space: normal
}

@media screen and (min-width: 768px) {
    .sc-feature__desc:lang(en) {
        line-height:1.43
    }
}

@media screen and (max-width: 767px) {
    .sc-feature__desc {
        max-width:204px;
        margin-top: 10px;
        font-size: 12px;
        line-height: 1.67
    }

    .sc-feature__desc:lang(en) {
        max-width: 212px;
        margin-top: 5px
    }
}

.sc-feature--ai:after {
    background-image: url(../img/index/header/1.svg)
}

.sc-feature--pro:after {
    background-image: url(../img/index/header/2.svg)
}

.sc-feature--copy:after {
    background-image: url(../img/index/header/3.svg)
}

.sc-feature--bot:after {
    background-image: url(../img/index/header/4.svg)
}

.get-start-for-free {
    padding: 30px 15px;
    color: #fff;
    background: #3a85e6
}

.get-start-for-free .inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    max-width: 1120px;
    margin: 0 auto
}

.get-start-for-free .inner .left {
    width: 100%
}

.get-start-for-free .inner .left p.title {
    margin: 0;
    font-size: 22px;
    font-weight: 700
}

.get-start-for-free .inner .right {
    width: 100%;
    text-align: center
}

.get-start-for-free .inner .right .el-button {
    padding: 20px 40px;
    font-size: 16px
}

@media screen and (min-width: 768px) {
    .get-start-for-free {
        margin-bottom:0
    }

    .get-start-for-free .inner .left {
        width: 70%
    }

    .get-start-for-free .inner .left p.title {
        font-size: 32px
    }

    .get-start-for-free .inner .left p.desc {
        font-size: 18px
    }

    .get-start-for-free .inner .right {
        width: 30%
    }
}

@keyframes changeBackgroundColor {
    0% {
        background-color: var(--banner-bg2-color)
    }

    16.6666666667% {
        background-color: var(--banner-bg3-color)
    }

    33.3333333333% {
        background-color: var(--banner-bg3-color)
    }

    50% {
        background-color: var(--banner-bg4-color)
    }

    66.6666666667% {
        background-color: var(--banner-bg4-color)
    }

    to {
        background-color: var(--banner-bg2-color)
    }
}

@keyframes changeBoxshadowColor {
    0% {
        box-shadow: inset 0 -.5em 0 rgba(var(--banner-bg2-rgb),.5)
    }

    16.6666666667% {
        box-shadow: inset 0 -.5em 0 rgba(var(--banner-bg3-rgb),.5)
    }

    33.3333333333% {
        box-shadow: inset 0 -.5em 0 rgba(var(--banner-bg3-rgb),.5)
    }

    50% {
        box-shadow: inset 0 -.5em 0 rgba(var(--banner-bg4-rgb),.5)
    }

    66.6666666667% {
        box-shadow: inset 0 -.5em 0 rgba(var(--banner-bg4-rgb),.5)
    }

    to {
        box-shadow: inset 0 -.5em 0 rgba(var(--banner-bg2-rgb),.5)
    }
}

@keyframes change-color {
    0% {
        color: var(--vi-color1,#3960a0)
    }

    29.7619047619% {
        color: var(--vi-color1,#3960a0)
    }

    33.3333333333% {
        color: var(--vi-color2,#57aabc)
    }

    63.0952380952% {
        color: var(--vi-color2,#57aabc)
    }

    66.6666666667% {
        color: var(--vi-color3,#f3574c)
    }

    96.4285714286% {
        color: var(--vi-color3,#f3574c)
    }

    to {
        color: var(--vi-color1,#3960a0)
    }
}

@keyframes change-background-color {
    0% {
        background-color: var(--vi-color1,#3960a0)
    }

    29.7619047619% {
        background-color: var(--vi-color1,#3960a0)
    }

    33.3333333333% {
        background-color: var(--vi-color2,#57aabc)
    }

    63.0952380952% {
        background-color: var(--vi-color2,#57aabc)
    }

    66.6666666667% {
        background-color: var(--vi-color3,#f3574c)
    }

    96.4285714286% {
        background-color: var(--vi-color3,#f3574c)
    }

    to {
        background-color: var(--vi-color1,#3960a0)
    }
}

.sc-header {
    position: relative;
    min-height: 650px;
    margin-bottom: 152px;
    background-image: linear-gradient(0deg,#d5eaff,#fff)
}

@media screen and (min-width: 768px) {
    .sc-header {
        animation:change-background-color 16.8s infinite
    }

    .sc-header--bgcolor {
        background-image: none
    }

    .sc-header--bgcolor .logo {
        filter: brightness(0) invert(1)
    }

    .sc-header--bgcolor .sc-hero__desc,.sc-header--bgcolor .sc-title,.sc-header--bgcolor header a.link,.sc-header--bgcolor header a.link span {
        color: #fff!important
    }

    .sc-header--bgcolor .sc-hero__start:before {
        background-color: #fff
    }
}

@media screen and (max-width: 767px) {
    .sc-header {
        min-height:540px;
        margin-bottom: 89px
    }
}

.sc-header__bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 299px;
    width: 23.4%;
    background-color: var(--banner-bg2-color);
    animation: changeBackgroundColor 12s 2s infinite
}

@media screen and (max-width: 767px) {
    .sc-header__bg {
        display:none
    }
}

.sc-header-swiper {
    animation: changeSwiperBackgroundColor 12s 2s infinite
}

@keyframes changeSwiperBackgroundColor {
    0% {
        background-color: #e6d5d0
    }

    16.6666666667% {
        background-color: #ece5d1
    }

    33.3333333333% {
        background-color: #ece5d1
    }

    50% {
        background-color: #ece5d1
    }

    66.6666666667% {
        background-color: #ece5d1
    }

    to {
        background-color: #e6d5d0
    }
}

@keyframes fade1 {
    0% {
        opacity: 1
    }

    8.3333333333% {
        opacity: 0
    }

    66.6666666667% {
        opacity: 0
    }

    75% {
        opacity: 1
    }

    to {
        opacity: 1
    }
}

@keyframes fade2 {
    0% {
        opacity: 0
    }

    8.3333333333% {
        opacity: 1
    }

    33.3333333333% {
        opacity: 1
    }

    41.6666666667% {
        opacity: 0
    }

    to {
        opacity: 0
    }
}

@keyframes fade3 {
    0% {
        opacity: 0
    }

    33.3333333333% {
        opacity: 0
    }

    41.6666666667% {
        opacity: 1
    }

    66.6666666667% {
        opacity: 1
    }

    75% {
        opacity: 0
    }

    to {
        opacity: 0
    }
}

.sc-header-swiper-item {
    position: relative;
    width: 100%;
    height: 100%
}

.sc-header-swiper-item:first-child {
    animation: fade1 12s 3s infinite
}

.sc-header-swiper-item:nth-child(2) {
    animation: fade2 12s 3s infinite
}

.sc-header-swiper-item:nth-child(3) {
    animation: fade3 12s 3s infinite
}

.sc-header-swiper-item:not(:first-child) {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0
}

.sc-header-swiper-item img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

@media screen and (min-width: 768px) {
    .sc-header-swiper {
        position:absolute;
        top: 92px;
        bottom: 0;
        left: 53%;
        z-index: 0;
        max-width: 686px
    }
}

@media screen and (max-width: 767px) {
    .sc-header-swiper {
        position:relative;
        margin-top: 30px
    }

    .sc-header-swiper-item {
        height: 0;
        padding-bottom: 98.167539267%
    }

    .sc-header-swiper-item img {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0
    }
}

.sc-title {
    font-size: 30px!important;
    font-weight: 600;
    line-height: 1.35;
    color: #222!important
}

.sc-title:lang(en) {
    white-space: nowrap
}

.sc-title em {
    position: relative;
    z-index: 1;
    font-style: inherit
}

.sc-title em.underline {
    display: inline-block;
    box-shadow: inset 0 -.5em 0 rgba(var(--banner-bg1-rgb),.5);
    animation: changeBoxshadowColor 12s 2s infinite
}

.sc-title i {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -1;
    width: 100%;
    height: 12px;
    background-color: #4384f5;
    opacity: .7
}

.sc-title i.color1 {
    background-color: var(--banner-bg1-color)
}

.sc-title i.color2 {
    background-color: var(--banner-bg2-color)
}

.sc-title i.color3 {
    background-color: var(--banner-bg3-color)
}

.sc-title i.color4 {
    background-color: var(--banner-bg4-color)
}

.sc-title i.aos-animate {
    opacity: .7!important
}

@media screen and (max-width: 767px) {
    .sc-title {
        font-size:24px!important
    }
}

.sc-hero {
    position: relative
}

.sc-hero .sc-title {
    font-size: 42px!important;
    font-weight: 900;
    line-height: 1.25
}

.sc-hero .sc-title i {
    height: 24px;
    background-color: var(--banner-bg2-color);
    opacity: .5
}

.sc-hero .sc-title i.aos-animate {
    opacity: .5!important
}

.sc-hero .sc-title i.aos-done {
    animation: changeBackgroundColor 12s 2s infinite
}

@media screen and (max-width: 767px) {
    .sc-hero .sc-title {
        font-size:26px!important;
        font-size: 32px!important;
        font-weight: 900;
        line-height: 45px
    }

    .sc-hero .sc-title i {
        height: 20px
    }
}

@media screen and (max-width: 767px) {
    .sc-hero .sc-title.en {
        font-size:28px!important
    }
}

@media screen and (min-width: 768px) {
    .sc-hero__inner {
        text-align:left
    }
}

@media screen and (max-width: 767px) {
    .sc-hero__inner {
        width:100%;
        text-align: center
    }
}

.sc-hero__desc {
    display: block;
    margin-top: 55px;
    margin-bottom: 69px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.8;
    color: #666;
    letter-spacing: .12px
}

.sc-hero__desc:lang(en) {
    max-width: 550px
}

.sc-hero__desc .underline {
    box-shadow: 0 4px 0 0;
    padding-bottom: 2px;
    text-decoration: none
}

.sc-hero__desc .underline.color1 {
    box-shadow: 0 4px 0 0 var(--banner-bg1-color)
}

.sc-hero__desc .underline.color2 {
    box-shadow: 0 4px 0 0 var(--banner-bg2-color)
}

.sc-hero__desc .underline.color3 {
    box-shadow: 0 4px 0 0 var(--banner-bg3-color)
}

.sc-hero__desc .underline.color4 {
    box-shadow: 0 4px 0 0 var(--banner-bg4-color)
}

@media screen and (max-width: 767px) {
    .sc-hero__desc {
        padding:0 10px;
        margin-top: 28px;
        margin-bottom: 56px;
        font-size: 16px;
        line-height: 1.87;
        letter-spacing: .09px
    }
}

@media screen and (min-width: 768px) {
    .sc-hero {
        position:absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1;
        display: flex;
        align-items: center;
        max-width: 1100px;
        padding: 0 30px;
        margin: auto;
        text-align: left
    }
}

@media screen and (max-width: 767px) {
    .sc-hero {
        align-items:baseline;
        padding: 70px 10px 20px;
        text-align: center
    }
}

.sc-create-number {
    position: absolute;
    right: 0;
    bottom: -64px;
    left: 0;
    width: 100%;
    max-width: 1100px;
    height: 128px;
    margin: auto;
    background-color: #fff;
    border-radius: 6px;
    box-shadow: 0 2px 30px 0 rgba(0,0,0,.1)
}

.sc-create-number__table {
    display: table;
    width: 100%;
    height: 100%
}

.sc-create-number .create-number {
    display: table-cell;
    vertical-align: middle;
    border-top: 0
}

@media screen and (max-width: 767px) {
    .sc-create-number {
        position:static;
        height: 95px;
        padding: 0 18px;
        border-radius: 0;
        box-shadow: none
    }
}

.sc-example {
    position: absolute;
    animation: floating ease-in-out infinite alternate
}

.sc-example-carousel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    max-width: 1280px;
    margin: auto
}

@media screen and (max-width: 767px) {
    .sc-example-carousel {
        display:none
    }
}

@keyframes fade-in-out1 {
    0% {
        opacity: 1
    }

    29.7619047619% {
        opacity: 1
    }

    31.5476190476% {
        opacity: 0
    }

    98.2142857143% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes fade-in-out2 {
    0% {
        opacity: 0
    }

    31.5476190476% {
        opacity: 0
    }

    33.3333333333% {
        opacity: 1
    }

    63.0952380952% {
        opacity: 1
    }

    64.880952381% {
        opacity: 0
    }

    to {
        opacity: 0
    }
}

@keyframes fade-in-out3 {
    0% {
        opacity: 0
    }

    64.880952381% {
        opacity: 0
    }

    66.6666666667% {
        opacity: 1
    }

    96.4285714286% {
        opacity: 1
    }

    98.2142857143% {
        opacity: 0
    }

    to {
        opacity: 0
    }
}

.sc-example-carousel-item:not(:first-child) {
    opacity: 0
}

.sc-example-carousel-item:first-child {
    animation: fade-in-out1 16.8s infinite
}

.sc-example-carousel-item:nth-child(2) {
    animation: fade-in-out2 16.8s infinite
}

.sc-example-carousel-item:nth-child(3) {
    animation: fade-in-out3 16.8s infinite
}

.sc-example1 .sc-example:first-child {
    top: 16.2%;
    left: 56.5%;
    width: 274px;
    height: 343px;
    animation-duration: 1.97s
}

.sc-example1 .sc-example:nth-child(2) {
    top: 50.8%;
    left: 76.6%;
    width: 182px;
    height: 219px;
    animation-duration: 2.39s
}

.sc-example1 .sc-example:nth-child(3) {
    top: 27.2%;
    left: 77.7%;
    width: 100px;
    height: 119px;
    animation-duration: 1.89s
}

.sc-example2 .sc-example:first-child {
    top: 15.5%;
    left: 57.7%;
    width: 255px;
    height: 318px;
    animation-duration: 2.7s
}

.sc-example2 .sc-example:nth-child(2) {
    top: 37.4%;
    left: 79.1%;
    width: 153px;
    height: 303px;
    animation-duration: 1.8s
}

.sc-example2 .sc-example:nth-child(3) {
    top: 68.3%;
    left: 66.7%;
    width: 94px;
    height: 82px;
    animation-duration: 2.32s
}

.sc-example3 .sc-example:first-child {
    top: 14.8%;
    left: 56.3%;
    width: 267px;
    height: 341px;
    animation-duration: 1.86s
}

.sc-example3 .sc-example:nth-child(2) {
    top: 42.8%;
    left: 77.6%;
    width: 181px;
    height: 224px;
    animation-duration: 2.2s
}

.sc-example3 .sc-example:nth-child(3) {
    top: 69.1%;
    left: 59.5%;
    width: 226px;
    height: 97px;
    animation-duration: 1.7s
}

.sc-example4 .sc-example:first-child {
    top: 43.5%;
    left: 77.3%;
    width: 182px;
    height: 261px;
    animation-duration: 2.16s
}

.sc-example4 .sc-example:nth-child(2) {
    top: 16.6%;
    left: 57.6%;
    width: 279px;
    height: 259px;
    animation-duration: 2.03s
}

.sc-example4 .sc-example:nth-child(3) {
    top: 64.9%;
    left: 62.8%;
    width: 130px;
    height: 61px;
    animation-duration: 1.81s
}

@keyframes floating {
    0% {
        transform: translateY(0)
    }

    to {
        transform: translateY(5%)
    }
}

.create-number {
    padding: 0;
    margin: auto;
    color: #505050
}

.create-number span {
    color: #505050
}

.create-number b {
    color: #fff;
    background: #505050
}

.how-it-works {
    padding: 30px 15px;
    text-align: center;
    background: #fff
}

.how-it-works h2.title {
    margin: 0;
    font-size: 22px
}

.how-it-works p.desc {
    font-size: 14px
}

.how-it-works .details {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-between;
    max-width: 1080px;
    padding: 0;
    margin: 0 auto;
    text-align: left
}

.how-it-works .details .item {
    width: 100%
}

.how-it-works .details .item:not(:first-child) {
    margin-top: 20px
}

.how-it-works .details .item p.title {
    margin: 10px 0 6px;
    font-size: 16px;
    font-weight: 700
}

.how-it-works .details .item p.desc {
    margin: 0;
    font-size: 14px
}

@media screen and (min-width: 768px) {
    .how-it-works {
        padding:30px 15px 70px
    }

    .how-it-works.wf {
        padding: 70px 15px
    }

    .how-it-works h2.title {
        font-size: 32px
    }

    .how-it-works p.desc {
        margin: 18px 0 30px;
        font-size: 18px
    }

    .how-it-works .details .item {
        width: 30%
    }

    .how-it-works .details .item:not(:first-child) {
        margin-top: 0
    }

    .how-it-works .details .item p.title {
        font-size: 20px
    }

    .how-it-works .details .item p.desc {
        font-size: 18px
    }
}

.packages {
    padding: 30px 15px 300px;
    background: url(../img/logoai/jianbianbeijing.png) #fff bottom repeat-x
}

.packages h2.sectitle {
    margin: 0;
    font-size: 22px;
    text-align: center
}

.packages p.desc {
    margin: 14px 0;
    font-size: 14px;
    color: #333;
    text-align: center
}

@media screen and (min-width: 768px) {
    .packages h2.sectitle {
        font-size:32px
    }
}

.packages-wrapper {
    height: 290px;
    padding: 0 0 70px;
    background: #fff
}

.packages-wrapper .packages-list {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    width: 840px;
    padding: 14px 15px
}

.packages-wrapper .packages-list .item {
    position: relative;
    width: 32%;
    overflow: hidden;
    text-align: center;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    transition: all .25s linear
}

.packages-wrapper .packages-list .item .btn-pay {
    width: 100%;
    height: 50px;
    background: #f7f7f7;
    border-top: 1px solid #efefef
}

.packages-wrapper .packages-list .item .btn-pay a {
    font-size: 18px;
    line-height: 50px;
    color: #3f8aef
}

.packages-wrapper .packages-list .item:hover {
    box-shadow: 0 0 30px #eee;
    transform: scale(1.03)
}

.packages-wrapper .packages-list .item:last-child .btm {
    color: #969696
}

.packages-wrapper .packages-list .item .top {
    padding: 30px 0;
    border-bottom: 1px solid rgba(50,50,50,.1)
}

.packages-wrapper .packages-list .item .top .p-type {
    margin: 0 0 10px;
    font-size: 20px;
    color: #323232
}

.packages-wrapper .packages-list .item .top .price {
    margin: 16px 0 20px;
    color: #20a0ff
}

.packages-wrapper .packages-list .item .top .price sup {
    font-size: 16px;
    vertical-align: 6px
}

.packages-wrapper .packages-list .item .top .price .num {
    font-size: 42px;
    font-weight: 700
}

.packages-wrapper .packages-list .item .top .price .usd {
    font-size: 12px;
    color: #666
}

.packages-wrapper .packages-list .item .top img.icon {
    width: 126px;
    height: 92px
}

.packages-wrapper .packages-list .item .bottom {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 285px;
    padding: 0 15px;
    text-align: center
}

.packages-wrapper .packages-list .item .bottom p {
    margin: 0 0 10px;
    line-height: 1.3
}

.packages-wrapper .packages-list .item .btm {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50px;
    font-size: 18px;
    line-height: 50px;
    color: #20a0ff;
    text-align: center;
    background: #f7f7f7
}

.packages-wrapper .packages-list .item .btm a {
    color: #20a0ff
}

.packages-wrapper .packages-list .item .btm a:hover {
    color: #008df6
}

@media screen and (min-width: 768px) {
    .packages {
        padding:30px 15px 300px
    }

    .packages p.desc {
        margin: 18px 0 30px;
        font-size: 18px
    }

    .packages-wrapper {
        height: 350px
    }

    .packages-wrapper .packages-list {
        width: 1120px
    }

    .packages-wrapper .packages-list .item {
        width: 30%
    }
}

.setmeal {
    padding: 0;
    color: #333;
    transform: translateY(-301px)
}

.setmeal h2 {
    padding: 20px 0 10px;
    font-size: 20px;
    text-align: center
}

.setmeal .setmealcontainer {
    max-width: 1124px;
    margin: 0 auto;
    text-align: center
}

.setmeal .setmealcontainer .setmealcontent {
    padding: 0;
    overflow-x: auto
}

.setmeal .setmealcontainer .setmealcontent ul.taocan-wrapper {
    display: flex;
    padding: 0
}

.setmeal .setmealcontainer .setmealcontent ul.taocan-wrapper.nojj li.item:first-child {
    display: none;
    transition: all .3s ease
}

.setmeal .setmealcontainer .setmealcontent ul.taocan-wrapper li.item {
    position: relative;
    max-width: 258.52px;
    font-size: 14px;
    cursor: pointer;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    transition: all .25s linear
}

.setmeal .setmealcontainer .setmealcontent ul.taocan-wrapper li.item p.pkg-name {
    height: 55px;
    font-size: 16px;
    line-height: 55px;
    color: #666;
    text-align: center;
    border-bottom: 1px solid #e5e5e5
}

.setmeal .setmealcontainer .setmealcontent ul.taocan-wrapper li.item .pkg-detail {
    padding: 0 18px
}

.setmeal .setmealcontainer .setmealcontent ul.taocan-wrapper li.item .pkg-price {
    position: relative;
    padding: 12px 0 10px;
    margin: 0 auto 18px;
    border-bottom: 1px solid #e5e5e5
}

.setmeal .setmealcontainer .setmealcontent ul.taocan-wrapper li.item .pkg-opts-tip {
    position: absolute;
    bottom: -11px;
    padding: 0 4px 0 0;
    font-size: 14px;
    color: #969696;
    text-align: left;
    background: #fff
}

.setmeal .setmealcontainer .setmealcontent ul.taocan-wrapper li.item .pkg-detail-list {
    display: block;
    padding: 0 0 18px;
    margin: 0
}

.setmeal .setmealcontainer .setmealcontent ul.taocan-wrapper li.item .pkg-detail-list li {
    font-size: 15px;
    text-align: left
}

.setmeal .setmealcontainer .setmealcontent ul.taocan-wrapper li.item .pkg-detail-list li:not(:first-child) {
    padding: 12px 0 0
}

.setmeal .setmealcontainer .setmealcontent ul.taocan-wrapper li.item .pkg-detail-list li .iconfont {
    font-size: 22px;
    color: #323232
}

.setmeal .setmealcontainer .setmealcontent ul.taocan-wrapper li.item .pkg-detail-list li span.x {
    display: inline-block;
    margin: 0 2px
}

.setmeal .setmealcontainer .setmealcontent ul.taocan-wrapper li.item .pkg-detail-list li span.num {
    font-size: 26px;
    vertical-align: -3px
}

.setmeal .setmealcontainer .setmealcontent ul.taocan-wrapper li.item .pkg-detail-list li span.text {
    color: #666
}

.setmeal .setmealcontainer .setmealcontent ul.taocan-wrapper li.item .pkg-detail-list li span.text.pl {
    padding-left: 12px
}

.setmeal .setmealcontainer .setmealcontent ul.taocan-wrapper li.item .pkg-detail-list li img.icon {
    height: 22px
}

.setmeal .setmealcontainer .setmealcontent ul.taocan-wrapper li.item .pkg-detail-list li img.icon.post5 {
    height: 18px
}

.setmeal .setmealcontainer .setmealcontent ul.taocan-wrapper li.item .set-buy .selected-btn .fa-check {
    display: none
}

.setmeal .setmealcontainer .setmealcontent ul.taocan-wrapper li.item:first-child {
    color: #06c29f
}

.setmeal .setmealcontainer .setmealcontent ul.taocan-wrapper li.item:first-child a.tc {
    display: block;
    height: 100%;
    color: #06c29f
}

.setmeal .setmealcontainer .setmealcontent ul.taocan-wrapper li.item:first-child .set-buy a,.setmeal .setmealcontainer .setmealcontent ul.taocan-wrapper li.item:first-child .set-buy span.btn {
    color: #06c29f;
    border: 1px solid #06c29f
}

.setmeal .setmealcontainer .setmealcontent ul.taocan-wrapper li.item:first-child.selected {
    border: 1px solid #06c29f
}

.setmeal .setmealcontainer .setmealcontent ul.taocan-wrapper li.item:first-child.selected a {
    color: #fff;
    background: #06c29f
}

.setmeal .setmealcontainer .setmealcontent ul.taocan-wrapper li.item:first-child.selected a .fa-check {
    display: inline-block
}

.setmeal .setmealcontainer .setmealcontent ul.taocan-wrapper li.item:nth-child(2) {
    color: #1363d2
}

.setmeal .setmealcontainer .setmealcontent ul.taocan-wrapper li.item:nth-child(2) a.tc {
    display: block;
    height: 100%;
    color: #1363d2
}

.setmeal .setmealcontainer .setmealcontent ul.taocan-wrapper li.item:nth-child(2) .set-buy a,.setmeal .setmealcontainer .setmealcontent ul.taocan-wrapper li.item:nth-child(2) .set-buy span.btn {
    color: #1363d2;
    border: 1px solid #1363d2
}

.setmeal .setmealcontainer .setmealcontent ul.taocan-wrapper li.item:nth-child(2).selected {
    border: 1px solid #1363d2
}

.setmeal .setmealcontainer .setmealcontent ul.taocan-wrapper li.item:nth-child(2).selected a {
    color: #fff;
    background: #1363d2
}

.setmeal .setmealcontainer .setmealcontent ul.taocan-wrapper li.item:nth-child(2).selected a .fa-check {
    display: inline-block
}

.setmeal .setmealcontainer .setmealcontent ul.taocan-wrapper li.item:nth-child(3) {
    color: #b247f5
}

.setmeal .setmealcontainer .setmealcontent ul.taocan-wrapper li.item:nth-child(3) a.tc {
    display: block;
    height: 100%;
    color: #b247f5
}

.setmeal .setmealcontainer .setmealcontent ul.taocan-wrapper li.item:nth-child(3) .set-buy a,.setmeal .setmealcontainer .setmealcontent ul.taocan-wrapper li.item:nth-child(3) .set-buy span.btn {
    color: #b247f5;
    border: 1px solid #b247f5
}

.setmeal .setmealcontainer .setmealcontent ul.taocan-wrapper li.item:nth-child(3).selected {
    border: 1px solid #b247f5
}

.setmeal .setmealcontainer .setmealcontent ul.taocan-wrapper li.item:nth-child(3).selected a {
    color: #fff;
    background: #b247f5
}

.setmeal .setmealcontainer .setmealcontent ul.taocan-wrapper li.item:nth-child(3).selected a .fa-check {
    display: inline-block
}

.setmeal .setmealcontainer .setmealcontent ul.taocan-wrapper li.item:nth-child(4) {
    color: #fdc611
}

.setmeal .setmealcontainer .setmealcontent ul.taocan-wrapper li.item:nth-child(4) a.tc {
    display: block;
    height: 100%;
    color: #fdc611
}

.setmeal .setmealcontainer .setmealcontent ul.taocan-wrapper li.item:nth-child(4) .set-buy a,.setmeal .setmealcontainer .setmealcontent ul.taocan-wrapper li.item:nth-child(4) .set-buy span.btn {
    color: #fdc611;
    border: 1px solid #fdc611
}

.setmeal .setmealcontainer .setmealcontent ul.taocan-wrapper li.item:nth-child(4).selected {
    border: 1px solid #fdc611
}

.setmeal .setmealcontainer .setmealcontent ul.taocan-wrapper li.item:nth-child(4).selected a {
    color: #fff;
    background: #fdc611
}

.setmeal .setmealcontainer .setmealcontent ul.taocan-wrapper li.item:nth-child(4).selected a .fa-check {
    display: inline-block
}

.setmeal .setmealcontainer .setmealcontent ul.taocan-wrapper .set-buy {
    font-size: 14px
}

.setmeal .setmealcontainer .setmealcontent ul.taocan-wrapper .set-buy p {
    margin-bottom: 20px
}

.setmeal .setmealcontainer .setmealcontent ul.taocan-wrapper .set-buy a,.setmeal .setmealcontainer .setmealcontent ul.taocan-wrapper .set-buy span.btn {
    display: block;
    width: 100px;
    height: 32px;
    padding: 0;
    margin: 10px auto;
    line-height: 32px;
    text-align: center;
    text-decoration: none;
    border-radius: 32px
}

.setmeal .setmealcontainer .setmealcontent ul.taocan-wrapper .paym {
    padding-top: 10px;
    font-size: 30px;
    font-weight: 700;
    line-height: 1
}

.setmeal .setmealcontainer .setmealcontent ul.taocan-wrapper .paym span {
    margin-left: 3px;
    font-size: 14px;
    color: #333
}

@media screen and (max-width: 767px) {
    @keyframes bounceInRight {
        0%,60%,75%,90%,to {
            transition-timing-function:cubic-bezier(.215,.61,.355,1)
        }

        0% {
            opacity: 0;
            transform: translate3d(3000px,0,0)
        }

        60% {
            opacity: 1;
            transform: translate3d(-25px,0,0)
        }

        75% {
            transform: translate3d(10px,0,0)
        }

        90% {
            transform: translate3d(-5px,0,0)
        }

        to {
            transform: none
        }
    }

    .bounceInRight {
        animation: bounceInRight 1s ease
    }

    .moveRight {
        transform: translate3d(500px,0,0)
    }

    .setmeal .setmealcontainer {
        position: relative;
        width: 100%;
        overflow: hidden
    }

    .setmeal .setmealcontainer .setmealcontent {
        width: 100%;
        overflow-x: scroll
    }

    .setmeal .setmealcontainer .setmealcontent .taocan-wrapper {
        flex-wrap: nowrap
    }

    .setmeal .setmealcontainer .setmealcontent ul.taocan-wrapper {
        width: 1200px;
        -webkit-overflow-scrolling: touch
    }

    .setmeal .setmealcontainer .setmealcontent ul.taocan-wrapper.nojj {
        width: 896px
    }

    .setmeal .setmealcontainer .setmealcontent ul.taocan-wrapper li.item {
        width: 80%;
        margin: 0 20px;
        box-shadow: 0 0 30px #eee
    }

    .setmeal .setmealcontainer .setmealcontent::-webkit-scrollbar {
        display: none
    }
}

@media screen and (min-width: 768px) {
    .setmeal h2 {
        font-size:24px
    }

    .setmeal .setmealcontainer .setmealcontent ul.taocan-wrapper {
        justify-content: space-around
    }

    .setmeal .setmealcontainer .setmealcontent ul.taocan-wrapper li.item {
        width: 23%
    }

    .setmeal .setmealcontainer .setmealcontent ul.taocan-wrapper li.item.selected,.setmeal .setmealcontainer .setmealcontent ul.taocan-wrapper li.item:hover {
        box-shadow: 0 0 30px #eee;
        transform: scale(1.03)
    }
}

.logo-inspiration-by-industry {
    padding: 30px 15px;
    background: #fff
}

.logo-inspiration-by-industry h2.title {
    margin: 0;
    font-size: 22px;
    text-align: center
}

.logo-inspiration-by-industry p.desc {
    font-size: 14px;
    text-align: center
}

.logo-inspiration-by-industry .industries {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    max-width: 1080px;
    margin: 0 auto
}

.logo-inspiration-by-industry .industries a {
    display: inline-block;
    width: 50%;
    margin: 10px 0;
    overflow: hidden;
    font-size: 16px;
    color: #20a0ff;
    text-overflow: ellipsis;
    white-space: nowrap
}

.logo-inspiration-by-industry .industries a:hover {
    color: #0795ff
}

@media screen and (min-width: 768px) {
    .logo-inspiration-by-industry {
        padding:70px 15px
    }

    .logo-inspiration-by-industry h2.title {
        font-size: 32px
    }

    .logo-inspiration-by-industry p.desc {
        margin: 18px 0 30px;
        font-size: 18px
    }

    .logo-inspiration-by-industry .industries a {
        width: 25%;
        font-size: 20px
    }
}

.logo-maker-examples {
    padding: 70px 15px;
    background: #f7f7f7
}

.logo-maker-examples .single-work {
    position: relative;
    width: 50%;
    padding: 10px;
    transition: all .2s ease-in
}

.logo-maker-examples .single-work:hover {
    cursor: pointer;
    transform: scale(1.03)
}

.logo-maker-examples h2.title {
    margin: 0;
    font-size: 32px;
    text-align: center
}

.logo-maker-examples p.desc {
    margin: 18px 0 30px;
    font-size: 18px;
    text-align: center
}

.logo-maker-examples .main-container {
    display: flex;
    flex-flow: wrap;
    width: 100%;
    max-width: 1120px;
    margin: 0 auto
}

.logo-maker-examples .main-container .bimg {
    display: block;
    width: 100%;
    border-radius: 4px;
    opacity: .3;
    transform: scale(.9)
}

.logo-maker-examples .main-container .loading {
    display: flex;
    flex-wrap: wrap
}

.logo-maker-examples .main-container .loading .horizontal {
    display: flex;
    flex-flow: wrap;
    width: 100%
}

.logo-maker-examples .main-container .loading .horizontal .bestwork {
    width: 25%
}

.logo-maker-examples .main-container .loading .big {
    display: flex;
    flex-flow: wrap;
    width: 50%
}

.logo-maker-examples .main-container .loading .big .bestwork {
    display: block;
    width: 100%
}

.logo-maker-examples .main-container .loading .vertical {
    display: flex;
    flex-wrap: wrap;
    width: 50%
}

.logo-maker-examples .main-container .loading .vertical .bestwork img {
    width: 100%
}

.logo-maker-examples .main-container .loading .vertical .fourbest {
    padding-top: 5px
}

.logo-maker-examples .main-container .loading_more {
    width: 100%;
    padding: 20px 0
}

.logo-maker-examples .main-container .loading_more .load-button {
    padding: 20px 25px;
    margin-left: 4px;
    color: #fff;
    border-radius: 4px
}

.logo-maker-examples .morelink {
    display: inline-block;
    margin-top: 24px;
    font-size: 18px;
    color: #535971
}

.logo-maker-examples .morelink:hover {
    color: #439dff
}

.logo-maker-examples .logoaiMore {
    display: inline-block;
    height: 52px;
    padding: 0 25px;
    margin: 24px auto 0;
    font-size: 18px;
    line-height: 52px;
    color: #fff;
    text-align: center;
    text-decoration: none;
    background: #20a0ff;
    border-radius: 50px
}

.logo-maker-examples .logoaiMore:hover {
    background: #008df6
}

@media screen and (max-width: 767px) {
    .logo-maker-examples {
        padding:30px 15px
    }

    .logo-maker-examples .golangParent {
        background: #f0f3fa
    }

    .logo-maker-examples .top {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 30px 15px;
        margin: 0 auto
    }

    .logo-maker-examples .top .top-container .instant-h1-top-logo {
        display: block;
        text-align: center
    }

    .logo-maker-examples .top .top-container .instant-h1-top-logo img {
        height: 50px
    }

    .logo-maker-examples .top .top-container .t-content,.logo-maker-examples .top .top-container .t-title {
        color: #333
    }

    .logo-maker-examples .top .top-container .t-title {
        font-size: 22px
    }

    .logo-maker-examples .top .top-container .instant-t-title {
        margin: 5px 0;
        font-size: 28px
    }

    .logo-maker-examples .top .top-container p.desc {
        font-size: 15px
    }

    .logo-maker-examples .top .top-container p.instantdesc {
        margin: 10px 0 20px;
        font-size: 15px
    }

    .logo-maker-examples .top .top-container .t-content {
        margin-top: 20px;
        margin-bottom: 24px;
        font-size: 15px;
        font-weight: 300;
        line-height: 1.6;
        letter-spacing: .1px
    }

    .logo-maker-examples .top .top-container .input-container.fixed {
        padding: 0 15px
    }

    .logo-maker-examples .instant-top {
        padding: 0 15px 20px
    }

    .logo-maker-examples .single-work {
        position: relative;
        width: 50%;
        padding: 10px;
        transition: all .2s ease-in
    }

    .logo-maker-examples .single-work:hover {
        cursor: pointer;
        transform: scale(1.05)
    }

    .logo-maker-examples h2.title {
        font-size: 22px
    }

    .logo-maker-examples p.desc {
        font-size: 14px
    }

    .logo-maker-examples .main-container {
        display: flex;
        flex-flow: wrap;
        width: 100%;
        max-width: 1120px;
        margin: 0 auto
    }

    .logo-maker-examples .main-container .bimg {
        display: block;
        width: 100%
    }

    .logo-maker-examples .main-container .loading {
        display: flex;
        flex-wrap: wrap
    }

    .logo-maker-examples .main-container .loading .horizontal {
        display: flex;
        flex-flow: wrap;
        width: 100%
    }

    .logo-maker-examples .main-container .loading .horizontal .bestwork {
        width: 50%
    }

    .logo-maker-examples .main-container .loading .big {
        display: flex;
        flex-flow: wrap;
        width: 100%
    }

    .logo-maker-examples .main-container .loading .big .bestwork {
        display: block;
        width: 100%
    }

    .logo-maker-examples .main-container .loading .vertical {
        display: flex;
        flex-wrap: wrap;
        width: 100%
    }

    .logo-maker-examples .main-container .loading .vertical .bestwork img {
        width: 100%
    }

    .logo-maker-examples .main-container .loading .vertical .fourbest {
        padding-top: 5px
    }

    .logo-maker-examples .main-container .loading_more {
        width: 100%;
        padding: 20px 0
    }

    .logo-maker-examples .main-container .loading_more .load-button {
        padding: 15px 25px;
        margin-left: 4px;
        color: #fff;
        border-radius: 35px
    }

    .logo-maker-examples .industry {
        display: flex;
        justify-content: center;
        width: 100%;
        padding: 50px 0;
        background-color: #fff
    }

    .logo-maker-examples .industry .industry-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 1120px;
        padding: 0 25px
    }

    .logo-maker-examples .industry .industry-content h2 {
        font-size: 20px;
        color: #666
    }

    .logo-maker-examples .industry .industry-content .title {
        font-size: 20px;
        color: #333
    }

    .logo-maker-examples .industry .industry-content .industry-container {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        padding-left: 0
    }

    .logo-maker-examples .industry .industry-content .industry-container li {
        display: flex;
        flex-direction: row;
        width: 100%;
        background-color: #fff
    }

    .logo-maker-examples .industry .industry-content .industry-container li a {
        display: block;
        padding: 5px;
        color: #000;
        text-align: left;
        text-decoration: none;
        cursor: pointer
    }
}

.sc-logomaker {
    padding: 100px 15px 125px;
    text-align: center;
    background: #fff;
    border-bottom: 1px solid #eee
}

.sc-logomaker__title {
    margin: 0;
    font-size: 30px
}

@media screen and (max-width: 767px) {
    .sc-logomaker__title {
        font-size:26px
    }
}

.sc-logomaker .sc-hero__start {
    margin: 46px auto 0
}

@media screen and (max-width: 767px) {
    .sc-logomaker .sc-hero__start {
        padding:12px 30px
    }
}

.create-number-container {
    padding: 0 15px;
    line-height: 1.5
}

.create-number-container .create-number {
    width: 100%
}

@media screen and (min-width: 768px) {
    .industry-main-container {
        margin-top:52px
    }
}

.smart-logo-maker {
    padding: 0 0 60px;
    background: #fff
}

.smart-logo-maker h2.sectitle {
    max-width: 1020px;
    padding: 0 0 0 20px;
    margin: 10px auto 0;
    font-size: 22px;
    color: #fff;
    text-align: left
}

.smart-logo-maker .smart-logo-maker-wrapper {
    padding: 0;
    background: url(../img/logoai/smart-bg-mobile.png) top no-repeat;
    background-size: contain
}

.smart-logo-maker .smart-logo-maker-wrapper .main-middle {
    max-width: 1120px;
    padding: 20px 15px;
    margin: 0 auto
}

.smart-logo-maker .smart-logo-maker-wrapper p.maintitle {
    position: relative;
    display: inline-block;
    max-width: 180px;
    margin: 0;
    font-family: Times New Roman;
    font-size: 18px;
    font-style: italic;
    font-weight: 700;
    color: #fff;
    opacity: .9;
    transform: translate(15px)
}

.smart-logo-maker .smart-logo-maker-wrapper p.maintitle:before {
    position: absolute;
    top: -10px;
    left: -14px;
    font-family: Helvetica;
    font-size: 28px;
    color: hsla(0,0%,100%,.15);
    content: "\201C"
}

.smart-logo-maker .smart-logo-maker-wrapper p.maintitle:after {
    position: absolute;
    right: 13px;
    font-family: Helvetica;
    font-size: 28px;
    color: hsla(0,0%,100%,.15);
    content: "\201D"
}

.smart-logo-maker .smart-logo-maker-wrapper .smart-items {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-around;
    transform: translateY(26px)
}

.smart-logo-maker .smart-logo-maker-wrapper .smart-items .item {
    width: 80%;
    padding: 20px;
    text-align: center;
    background: hsla(0,0%,100%,.95);
    border-radius: 4px;
    box-shadow: 0 0 20px rgba(0,0,0,.25)
}

.smart-logo-maker .smart-logo-maker-wrapper .smart-items .item:not(:last-child) {
    margin-bottom: 30px
}

.smart-logo-maker .smart-logo-maker-wrapper .smart-items .item img.icon {
    display: block;
    width: 40px;
    margin: 0 auto
}

.smart-logo-maker .smart-logo-maker-wrapper .smart-items .item p.title {
    margin: 20px 0 8px;
    font-size: 16px;
    font-weight: 700;
    color: #323232
}

.smart-logo-maker .smart-logo-maker-wrapper .smart-items .item p.desc {
    font-size: 16px;
    color: #525252
}

@media screen and (min-width: 768px) {
    .smart-logo-maker {
        padding:0 0 10px
    }

    .smart-logo-maker h2.sectitle {
        padding: 0;
        margin: 0 0 0 88px;
        font-size: 32px
    }

    .smart-logo-maker .smart-logo-maker-wrapper {
        min-height: 756px;
        padding: 60px 15px;
        background: url(../img/logoai/smart-bg.png) top no-repeat;
        background-size: cover
    }

    .smart-logo-maker .smart-logo-maker-wrapper .main-middle {
        padding: 10px
    }

    .smart-logo-maker .smart-logo-maker-wrapper p.maintitle {
        max-width: 500px;
        font-size: 30px;
        transform: translate(80px,20px)
    }

    .smart-logo-maker .smart-logo-maker-wrapper p.maintitle:before {
        top: -62px;
        left: -78px;
        font-size: 140px
    }

    .smart-logo-maker .smart-logo-maker-wrapper p.maintitle:after {
        right: 22px;
        font-size: 140px
    }

    .smart-logo-maker .smart-logo-maker-wrapper .smart-items {
        display: flex;
        align-items: stretch;
        justify-content: space-around;
        transform: translateY(200px)
    }

    .smart-logo-maker .smart-logo-maker-wrapper .smart-items .item {
        width: 28%;
        padding: 40px 20px;
        text-align: center;
        background: hsla(0,0%,100%,.95);
        border-radius: 4px;
        box-shadow: 0 0 20px rgba(0,0,0,.25)
    }

    .smart-logo-maker .smart-logo-maker-wrapper .smart-items .item:not(:last-child) {
        margin-bottom: 0
    }

    .smart-logo-maker .smart-logo-maker-wrapper .smart-items .item img.icon {
        display: block;
        width: 80px;
        margin: 0 auto
    }

    .smart-logo-maker .smart-logo-maker-wrapper .smart-items .item p.title {
        margin: 20px 0 8px;
        font-size: 18px;
        font-weight: 700;
        color: #323232
    }

    .smart-logo-maker .smart-logo-maker-wrapper .smart-items .item p.desc {
        font-size: 16px;
        color: #525252
    }
}

.sc-stages {
    overflow: hidden
}

.sc-stages-item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 674px;
    padding: 0 15px;
    margin: 0;
    overflow: hidden
}

.sc-stages-item:nth-child(odd) {
    background-color: #fff
}

@media screen and (min-width: 768px) {
    .sc-stages-item:nth-child(odd) .sc-stages-item__caption {
        order:-1
    }
}

.sc-stages-item__preview {
    width: 100%;
    transition: all .3s ease
}

.sc-stages-item__preview:hover {
    transform: scale(1.05)
}

.sc-stages-item__caption {
    max-width: 394px;
    text-align: left
}

@media screen and (max-width: 767px) {
    .sc-stages-item__caption {
        margin-bottom:46px;
        text-align: center
    }
}

.sc-stages-item__desc {
    display: block;
    margin-top: 16px;
    margin-bottom: 38px;
    font-size: 16px;
    line-height: 1.56;
    color: #666;
    letter-spacing: .1px
}

@media screen and (max-width: 767px) {
    .sc-stages-item__desc {
        margin-top:20px;
        margin-bottom: 30px;
        font-size: 14px;
        line-height: 1.79;
        text-align: left
    }
}

.sc-stages-item .main-btn {
    display: inline-block;
    width: 188px;
    padding-right: 0;
    padding-left: 0;
    line-height: 1.64;
    text-align: center;
    border-radius: 24px
}

.sc-stages-item .main-btn:hover .iconfont {
    opacity: 1
}

.sc-stages-item .main-btn .iconfont {
    margin-left: 8px;
    font-size: inherit;
    opacity: .7;
    transition: inherit
}

@media screen and (min-width: 768px) {
    .sc-stages-item--bizcard .sc-stages-item__preview {
        width:604px;
        height: 492px;
        margin-left: 96px
    }

    .sc-stages-item--vi .sc-stages-item__preview {
        width: 637px;
        height: 488px;
        margin-right: 60px
    }
}

@media screen and (max-width: 767px) {
    .sc-stages-item {
        flex-direction:column-reverse;
        min-height: auto;
        padding: 50px 15px
    }
}

html:lang(en) .sc-stages-item__desc {
    font-size: 18px
}

.sc-hero__start {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    display: block;
    width: 100%;
    max-width: 240px;
    max-height: 66px;
    padding: 22px 40px;
    overflow: hidden;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.38;
    color: #fff!important;
    text-align: center;
    white-space: nowrap;
    border-radius: 33px
}

.sc-hero__start:before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    content: "";
    background-color: var(--theme,#20a0ff);
    background-image: radial-gradient(circle farthest-corner at 100% 0,#f09c33 0,#f59234 4%,#f98736 7%,#fd7b38 10%,#ff6e3c 14%,#ff5f41 18%,#ff4e46 21%,#ff384b 25%,#fd1851 29%,#f90059 32%,#f50062 36%,#f0006c 39%,#e90077 43%,#e10083 46%,#d70090 50%,var(--theme,#20a0ff) 75%,var(--theme,#20a0ff) 100%);
    background-position: 0 0;
    background-size: 400% 100%;
    border-radius: inherit;
    transition: background-position 1s cubic-bezier(.35,.35,0,1)
}

.sc-hero__start:after {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    width: 4rem;
    height: 100%;
    content: "";
    background: linear-gradient(90deg,rgba(255,243,225,0),#fff3e1);
    opacity: 0
}

.sc-hero__start:hover:before {
    background-position: 85%
}

.sc-hero__start:hover:after {
    animation: shine .85s cubic-bezier(.65,0,.35,1) .15s
}

@media screen and (max-width: 767px) {
    .sc-hero__start {
        margin:auto
    }
}

.sc-hero__start_white {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    display: block;
    width: 100%;
    max-width: 240px;
    max-height: 66px;
    padding: 22px 40px;
    overflow: hidden;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.38;
    color: #20a0ff!important;
    text-align: center;
    white-space: nowrap;
    border-radius: 33px
}

.sc-hero__start_white:before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    content: "";
    background-color: #fff;
    background-image: radial-gradient(circle farthest-corner at 100% 0,#f09c33 0,#f59234 4%,#f98736 7%,#fd7b38 10%,#ff6e3c 14%,#ff5f41 18%,#ff4e46 21%,#ff384b 25%,#fd1851 29%,#f90059 32%,#f50062 36%,#f0006c 39%,#e90077 43%,#e10083 46%,#d70090 50%,#fff 75%,#fff 100%);
    background-position: 0 0;
    background-size: 400% 100%;
    border-radius: inherit;
    transition: background-position 1s cubic-bezier(.35,.35,0,1)
}

.sc-hero__start_white:after {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    width: 4rem;
    height: 100%;
    content: "";
    background: linear-gradient(90deg,rgba(255,243,225,0),#fff3e1);
    opacity: 0
}

.sc-hero__start_white:hover {
    color: #fff!important
}

.sc-hero__start_white:hover:before {
    background-position: 85%
}

.sc-hero__start_white:hover:after {
    animation: shine .85s cubic-bezier(.65,0,.35,1) .15s
}

@keyframes shine {
    0% {
        opacity: 0;
        transform: translate3d(-4rem,0,0) skewX(45deg)
    }

    50% {
        opacity: .15
    }

    to {
        opacity: 0;
        transform: translate3d(4rem,0,0) skewX(45deg)
    }
}

@media screen and (max-width: 767px) {
    .sc-hero__start_white {
        margin:auto
    }
}

.team-intro {
    background: #4384f5
}

.team-intro-inner {
    display: flex;
    flex-direction: column-reverse;
    align-items: stretch;
    justify-content: space-between;
    max-width: 1120px;
    padding: 30px 0 0;
    margin: 0 auto
}

.team-intro .team-pic {
    width: 100%
}

.team-intro .team-pic .team-swiper-container {
    overflow: hidden
}

.team-intro .team-pic img {
    display: block
}

.team-intro .intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 20px;
    color: #fff;
    text-align: left
}

.team-intro .intro p.slogan {
    position: relative;
    max-width: 540px;
    margin: 0 0 40px;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.35
}

.team-intro .intro p.slogan:before {
    top: -88px;
    left: -20px;
    content: "\201C"
}

.team-intro .intro p.slogan:after,.team-intro .intro p.slogan:before {
    position: absolute;
    font-size: 180px;
    color: hsla(0,0%,100%,.99);
    opacity: .1
}

.team-intro .intro p.slogan:after {
    top: 5px;
    right: 0;
    content: "\201D"
}

.team-intro .intro p.desc {
    max-width: 520px;
    font-size: 14px;
    line-height: 1.56
}

@media screen and (min-width: 768px) {
    .team-intro-inner {
        flex-direction:row;
        padding: 0
    }

    .team-intro .team-pic {
        width: 55%;
        transform: translate3d(0,-60px,0)
    }

    .team-intro .intro {
        width: 45%;
        padding: 20px 20px 20px 50px
    }

    .team-intro .intro p.slogan {
        font-size: 34px
    }

    .team-intro .intro p.slogan:before {
        left: -40px
    }

    .team-intro .intro p.desc {
        font-size: 16px
    }
}

.article-swiper {
    height: 30px;
    padding: 0 15px;
    margin-bottom: 2em;
    overflow: hidden
}

.article-swiper a {
    color: #666
}

.article-swiper a:hover {
    color: #4384f5
}

@media screen and (min-width: 768px) {
    .article-swiper a {
        font-size:16px
    }
}





        /* 模态框动画 */
        #loginModal {
            z-index: 60;
            /* 外层 只控制显示/隐藏，不参与动画 */
            visibility: hidden;
            /* 永远 opacity: 1，不叠加透明度！ */
            opacity: 1;
            /* 只有 visibility 做延迟，保证动画跑完再隐藏 */
            transition: visibility 0s 0.4s;
        }

        #loginModal.active {
            visibility: visible;
            transition: visibility 0s 0s; /* 显示时无延迟 */
        }

        #loginModal .modal-backdrop { 
            background: rgba(0, 0, 0, 0.5); 
            backdrop-filter: blur(4px);
            opacity: 0;
            /* 只动画这一层 */
            transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        #loginModal .modal-container {
            opacity: 0;
            transform: scale(0.9) translateY(20px);
            /* 只动画这一层 */
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* 激活状态 ==================== */
        #loginModal.active .modal-backdrop {
            opacity: 1;
        }
        #loginModal.active .modal-container {
            opacity: 1;
            transform: scale(1) translateY(0);
        }



        
        /* 输入框/下拉框统一样式（核心新增） */
        .form-control {
            width: 100%;
            padding: 12px 16px; /* 与input保持一致的内边距 */
            border: 1px solid #e5e7eb;
            border-radius: 1rem; /* 统一圆角 */
            font-size: 16px; /* 统一字号 */
            line-height: 1.5; /* 统一行高 */
            color: #1f2937;
            background-color: white;
            transition: all 0.2s ease;
            box-sizing: border-box; /* 确保内边距不影响总高度 */
            -webkit-appearance: none; /* 清除浏览器默认样式 */
            -moz-appearance: none; /* 清除浏览器默认样式 */
            appearance: none; /* 清除浏览器默认样式 */
        }

        .form-select {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 16px center;
            background-size: 16px;
        }
        
        .form-control:focus { 
            outline: none; 
            border-color: #2563eb; 
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); 
        }
        
        .form-control::placeholder {
            color: #9ca3af;
        }
        
        /* 下拉框默认文字样式 */
        .form-control option[disabled] {
            color: #9ca3af;
        }
        
        /* 滚动动画元素基础样式 */
        .animate-on-scroll {
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .animate-on-scroll.animate-in {
            opacity: 1;
            transform: translateY(0);
        }
        
        /* 导航栏滚动效果 */
        .nav-scrolled {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            background-color: white;
        }

        /* 开通试用成功提示框动画（复用登录框动画逻辑） */
        #trialSuccessModal.active .modal-backdrop {
            opacity: 1;
        }
        #trialSuccessModal.active .modal-container {
            opacity: 1;
            transform: scale(1) translateY(0);
        }


        .section {
            margin-bottom: 22px;
        }
        .section h3 {
            font-size: 16px;
            font-weight: bold;
            color: #1a73e8;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
        }
        .section p, .section li {
            font-size: 15px;
            margin-bottom: 6px;
        }