a {
    text-decoration: none
}

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

.ai-footer {
    position: relative;
    padding: 28px 90px;
    text-align: center;
    color: hsla(0, 0%, 100%, .8);
    background: url(https://www.logo123.com/oss/static/img/footer-bg.jpg) #d8d8d8 no-repeat 50%/cover
}

.ai-footer a:hover {
    color: #fff
}

@media screen and (max-width:767px) {
    .ai-footer {
        padding: 28px 15px;
        font-size: 14px
    }
}

.ai-footer__qrcode {
    margin-top: -77px
}

.ai-footer__qrcode>div:first-child {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto
}

.ai-footer__qrcode>div:first-child img:first-child {
    width: 100%;
    height: 100%
}

.ai-footer__qrcode>div:first-child img:nth-child(2),
.ai-footer__qrcode>div:first-child img:nth-child(3) {
    position: absolute
}

.ai-footer__qrcode>div:first-child img:nth-child(2) {
    top: 27px;
    left: 113px
}

.ai-footer__qrcode>div:first-child img:nth-child(3) {
    top: 51px;
    left: 144px;
    width: 22px
}

.ai-footer__divider {
    display: flex;
    clear: both;
    width: 100%;
    min-width: 100%;
    margin: 28px 0;
    background-color: hsla(0, 0%, 100%, .1);
    border-top: 1px solid rgba(0, 0, 0, .06)
}

.ai-footer__links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap
}

.ai-footer__links .linkspan {
    margin: 2px 10px;
    font-size: 14px
}

.ai-footer__links a {
    color: #969696
}

.ai-footer__links a:hover {
    color: #fff
}

.preview-logo-dialog {
    background: transparent !important
}

.preview-logo-dialog .el-dialog__close {
    font-size: 32px;
    color: #fff
}

.bd_weixin_popup {
    box-sizing: content-box
}

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

.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 .zan {
    font-size: 22px
}

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

.ShareAndGetFreeLogo a.learn-more {
    color: #1484ff
}

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

.ShareAndGetFreeLogo2 a.learn-more {
    color: #1484ff
}

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

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

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

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

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

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

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

html {
    scroll-behavior: smooth
}

body {
    font-family: Helvetica Neue, PingFang SC, Microsoft YaHei !important;
    color: #333;
    background: #f7f7f7;
    -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 {
    padding-top: 50px
}

header.AILOGO,
header.INSTANTLOGODESIGN {
    position: absolute;
    width: 100%;
    background: transparent
}

header.AILOGO #side-menu-btn-wrapper .el-button--text,
header.INSTANTLOGODESIGN #side-menu-btn-wrapper .el-button--text {
    color: #fc3868
}

ol,
ul {
    list-style: none
}

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 {
    position: inherit;
    width: 100%;
    height: 0;
    padding: 0
}

.fixed-dialog .el-dialog .el-dialog__header .el-dialog__headerbtn {
    position: absolute
}

.fixed-dialog .el-dialog .el-dialog__header .el-dialog__headerbtn .el-dialog__close {
    font-weight: 700;
    color: #fff
}

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

.left-dialog .el-dialog .el-dialog__header .el-dialog__headerbtn {
    top: 5px;
    left: 100%;
    padding-left: 5px
}

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

.right-dialog .el-dialog .el-dialog__header .el-dialog__headerbtn {
    top: 5px;
    right: 100%;
    padding-right: 5px
}

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

.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 {
    margin: 0;
    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
}

.langgo {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 100px 0;
    color: #fff;
    text-align: center;
    background: rgba(63, 138, 239, .9)
}

.langgo .langgo-content {
    width: 100%;
    max-width: 565.31px
}

.langgo .langgo-content h1 {
    margin-bottom: 20px
}

.langgo .langgo-content a {
    height: 60px;
    padding: 10px 30px;
    font-size: 18px;
    line-height: 40px;
    text-decoration: none
}

.langgo .langgo-content a:hover {
    transition: all .3s linear
}

.golangParent {
    background: url(/img/newindex/1440.jpg) no-repeat top;
    background-size: cover
}

.golang {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 100px 0;
    color: #fff;
    text-align: center;
    background: rgba(63, 138, 239, .9)
}

.golang.LOGOAI {
    position: relative
}

.golang.LOGOAI:before {
    background: url(/img/logoai/1440.jpg) top no-repeat;
    background-size: cover
}

.golang.LOGOAI:after,
.golang.LOGOAI:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: ""
}

.golang.LOGOAI:after {
    background: rgba(63, 138, 239, .9)
}

.golang.INSTANTLOGODESIGN {
    background: #fef9f9
}

.golang.INSTANTLOGODESIGN .golang-content h2 {
    color: #323232
}

.golang.INSTANTLOGODESIGN .langgolin {
    height: 72px;
    border: 2px solid #fc3868;
    border-radius: 10px 0 0 10px;
    box-shadow: none
}

.golang.INSTANTLOGODESIGN .langgolin::-webkit-input-placeholder {
    color: #9dadc3
}

.golang.INSTANTLOGODESIGN .company-input {
    justify-content: flex-start
}

.golang.INSTANTLOGODESIGN .company-input .el-button--primary {
    height: 72px;
    background: linear-gradient(90deg, #fc3868, #ff7c68);
    border: 0;
    border-radius: 0 10px 10px 0;
    transform: translateX(-7px)
}

.golang .golang-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 550px
}

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

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

.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) {
    .golang {
        box-sizing: border-box;
        padding: 100px 15px;
        color: #fff;
        background: rgba(63, 138, 239, .9)
    }

    .golang.INSTANTLOGODESIGN {
        background: #fef9f9
    }

    .golang.INSTANTLOGODESIGN .golang-content h2 {
        color: #323232
    }

    .golang.INSTANTLOGODESIGN .langgolin {
        width: calc(100% - 122px);
        height: 55px;
        font-size: 14px;
        border: 2px solid #fc3868;
        border-radius: 10px 0 0 10px;
        box-shadow: none
    }

    .golang.INSTANTLOGODESIGN .langgolin::-webkit-input-placeholder {
        color: #9dadc3
    }

    .golang.INSTANTLOGODESIGN .company-input {
        justify-content: flex-start
    }

    .golang.INSTANTLOGODESIGN .company-input .el-button--primary {
        width: 122px;
        height: 55px;
        padding: 0 !important;
        margin: 0 !important;
        font-size: 12px !important;
        background: linear-gradient(90deg, #fc3868, #ff7c68);
        border: 0;
        border-radius: 0 10px 10px 0;
        transform: translateX(0)
    }

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

.langgolin {
    box-sizing: border-box;
    width: 420px;
    height: 50px;
    font-size: 16px;
    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: 50px;
    padding: 15px 30px !important;
    margin-left: 7px !important;
    font-size: 16px !important
}

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

    .langgo-content .makelogoll {
        font-size: 22px
    }

    .langgo-content .company-input .go-button {
        width: 97px;
        height: 60px;
        margin-left: 4px;
        font-size: 12px
    }
}

@media screen and (min-width:768px) {
    .go-button {
        font-size: 18px !important
    }

    footer p.slogn {
        color: #b0b0b0
    }

    footer .copyright {
        margin-top: 2em
    }

    .langgolin {
        font-size: 18px;
        border: 4px
    }

    .go-button,
    .langgolin {
        height: 60px
    }
}

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

.friendlinks {
    display: none
}

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

#entryInput {
    position: relative;
    display: inline-flex;
    width: 100%;
    height: 50px;
    font-size: 16px
}

#entryInput .el-input__inner,
#entryInput .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)
}

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

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

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

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

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

#entryInput .go-button {
    padding: 15px 30px;
    margin-left: 10px;
    font-size: inherit;
    color: #fff
}

#entryInput .go-button:hover {
    transition: all .3s linear
}

#entryInput .icon-enter {
    position: absolute;
    top: 28%;
    right: 10px;
    font-size: 25px;
    color: #ccc
}

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

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

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

    #entryInput {
        height: 60px;
        font-size: 18px
    }
}

@media screen and (max-width:767px) {
    .golang {
        box-sizing: border-box;
        padding: 100px 15px;
        color: #fff;
        background: rgba(63, 138, 239, .9)
    }

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

    .golang .golang-content .putTitle {
        font-size: 22px
    }

    #entryInput .icon-enter {
        position: absolute;
        top: 27%;
        right: 10px;
        font-size: 20px;
        color: #ccc
    }

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

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

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

    .langgolin {
        width: 200px;
        height: 50px;
        font-size: 16px;
        border: 4px
    }

    .langgo-content .makelogoll {
        font-size: 22px
    }

    .langgo-content .company-input .go-button {
        width: 97px;
        height: 60px;
        margin-left: 4px;
        font-size: 12px
    }
}

.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: transparent
}

.footer-menu.wxmini:before {
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 20px;
    content: "";
    background: #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
    }
}

.ins-footer {
    background: #fe7d7f
}

.ins-footer .footer-container,
.ins-footer footer {
    color: #fbfbfb;
    background: none
}

.ins-footer .footer-container a,
.ins-footer footer a {
    color: #fbfbfb
}

.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 {
    margin-right: 50px;
    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: 50px
}

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: 60px;
    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-container {
    padding: 10px;
    font-weight: 600;
    color: #333;
    text-align: center;
    background: #f2f2f2
}

.footer-container:after {
    display: block;
    clear: both;
    content: ""
}

.footer-container p,
.footer-container ul {
    margin: 0
}

.footer-container ul {
    float: left;
    padding: 0;
    margin-top: 6px
}

.footer-container ul li {
    display: inline-block;
    padding: 0 10px;
    font-size: 12px
}

.footer-container p {
    float: right;
    font-size: 12px;
    font-weight: 400
}

.footer-container a {
    color: inherit
}

.footer-container p.social {
    display: flex;
    align-items: center;
    justify-content: flex-start
}

.footer-container p.social span {
    font-size: 14px
}

.footer-container p.social a {
    margin-left: 10px
}

.footer-container p.social .iconfont {
    font-size: 22px;
    color: #979ca0
}

.footer-container p.social .iconfont:hover {
    color: #3f4865
}

.footer-container p.social .icon-twitter {
    font-size: 25.5px
}

.footer-container p.social .icon-instagram-copy {
    font-size: 25px
}

@media(max-width:767px) {

    .footer-container p,
    .footer-container ul {
        float: none
    }

    .footer-container p.social {
        justify-content: center;
        margin: 10px 0
    }
}

.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;
    color: #fff
}

.create-number a {
    margin: 0 5px
}

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

.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%;
    opacity: 1;
}

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

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

.search-wrapper {
    display: none;
    align-items: center;
    justify-content: space-between;
    width: calc(100% - 80px);
    padding: 0 10px 0 16px
}

.search-wrapper.wechat-mini {
    max-width: 100%
}

.search-wrapper .category-input {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 48%;
    margin-right: 5px
}

.search-wrapper .categories-in-header {
    width: 50%;
    margin-right: 8px
}

.search-wrapper .categories-in-header .el-input__icon {
    right: 0;
    color: #fff
}

.search-wrapper .categories-in-header .el-input__inner {
    height: 44px;
    padding: 0 25px 0 0;
    font-size: 16px;
    color: #fff;
    text-align: center;
    background: #20a0ff;
    border: 0;
    border-radius: 4px;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 0 1px rgba(0, 0, 0, .08);
    transition: all .2s cubic-bezier(.4, 0, .2, 1)
}

.search-wrapper .categories-in-header .el-input__inner:hover {
    background: #008af1
}

.search-wrapper .keywords-input .el-input__inner {
    height: 44px;
    padding: 0 35px 0 15px;
    font-size: 16px;
    line-height: 44px;
    color: #1f2d3d;
    border: 0;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 0 1px rgba(0, 0, 0, .08);
    transition: all .2s cubic-bezier(.4, 0, .2, 1)
}

@media screen and (max-width:767px) {
    .search-wrapper .keywords-input .el-input__inner {
        font-size: 14px
    }
}

.search-wrapper .keywords-input .el-input__inner::-moz-placeholder {
    color: #757575
}

.search-wrapper .keywords-input .el-input__inner::placeholder {
    color: #757575
}

.search-wrapper__input {
    position: relative;
    width: 100%
}

.search-wrapper__input .iconfont {
    position: absolute;
    top: 10px;
    right: 8px;
    font-size: 20px;
    color: #bfcbd9
}

.search-wrapper__input .iconfont.actived,
.search-wrapper__input .iconfont:hover {
    color: #1f2d3d;
    cursor: pointer
}

.search-wrapper .smart-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
    height: 44px;
    padding: 0 30px;
    margin-left: 5px;
    font-size: 14px
}

.search-wrapper .smart-btn .fa {
    margin-left: 4px
}

.search-wrapper-on-page {
    position: sticky;
    top: 25px;
    z-index: 1;
    margin: 40px 0
}

.search-wrapper-on-page .search-wrapper {
    display: flex;
    width: 100%;
    padding: 0 10px;
    margin: 0 auto
}

@media screen and (min-width:768px) {
    .search-wrapper {
        width: 100%;
        max-width: 530px;
        padding: 0 10px
    }

    .search-wrapper .category-input {
        margin-right: 0
    }

    .search-wrapper .categories-in-header {
        width: 160px
    }

    .search-wrapper .categories-in-header .el-input__icon {
        right: 10px
    }

    .search-wrapper .categories-in-header .el-input__inner {
        width: 160px;
        height: 60px;
        padding: 0 50px 0 0;
        font-size: 16px
    }

    .search-wrapper .keywords-input .el-input__inner {
        height: 58px;
        padding: 0 35px 0 20px;
        font-size: 16px;
        line-height: 58px
    }

    .search-wrapper__input {
        display: block
    }

    .search-wrapper__input .iconfont {
        top: 14px;
        right: 10px;
        font-size: 24px
    }

    .search-wrapper .smart-btn {
        width: 48%;
        height: 58px;
        padding: 0 30px;
        margin-left: 0;
        font-size: 16px
    }
}

.isomorphic-category {
    position: relative;
    width: 100%;
    height: 44px;
    margin: 0
}

.isomorphic-category .current-category {
    position: relative;
    width: 100%;
    height: 44px;
    padding: 0 20px 0 0;
    font-size: 14px;
    line-height: 44px;
    color: #1f2d3d;
    text-align: center;
    cursor: pointer;
    background: #f7f7f7;
    border: 0;
    border-radius: 4px;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 0 1px rgba(0, 0, 0, .08);
    transition: all .2s cubic-bezier(.4, 0, .2, 1)
}

.isomorphic-category .current-category:hover {
    background: #f3f3f3
}

.isomorphic-category .current-category:after {
    position: absolute;
    right: 10px;
    font-family: iconfont;
    font-size: 12px;
    color: #1f2d3d;
    content: "\E643";
    transition: all .3s ease
}

.isomorphic-category ul {
    z-index: 999;
    height: 0;
    max-height: 510px;
    padding: 0;
    margin: 10px 0 0;
    overflow: hidden;
    overflow-y: scroll;
    overflow-y: overlay;
    visibility: hidden;
    background-color: #fff;
    border: 1px solid #d1dbe5;
    border-radius: 2px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    opacity: 0;
    transition: all .3s ease
}

@media screen and (max-width:767px) {
    .isomorphic-category ul {
        max-height: 300px
    }
}

.isomorphic-category ul li {
    height: 50px
}

.isomorphic-category ul li a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
    padding: 0 0 0 15px;
    font-size: 14px;
    color: #48576a;
    white-space: nowrap
}

.isomorphic-category ul li a .iconfont {
    margin: 0 6px 0 0
}

.isomorphic-category ul li:hover {
    background-color: #e4e8f1
}

.isomorphic-category.show .current-category:after {
    transform: rotate(-180deg)
}

.isomorphic-category.show ul {
    position: relative;
    z-index: 1;
    height: auto;
    visibility: visible;
    opacity: 1
}

.isomorphic-category:focus {
    outline: none
}

@media screen and (min-width:768px) {
    .isomorphic-category {
        position: relative;
        height: 58px
    }

    .isomorphic-category .current-category {
        height: 58px;
        padding: 0 24px 0 0;
        font-size: 16px;
        line-height: 58px;
        border-radius: 4px
    }

    .isomorphic-category .current-category:after {
        right: 20px
    }
}

html:lang(en) .isomorphic-category {
    width: 100%
}

html:lang(en) .isomorphic-category .current-category {
    padding: 0 20px 0 0;
    border-radius: 4px
}

html:lang(en) .search-wrapper {
    justify-content: space-between
}

html:lang(en) .search-wrapper .category-input {
    width: 48%;
    margin: 0 5px 0 0
}

html:lang(en) .search-wrapper .categories-in-header {
    width: 215px;
    margin-right: 0
}

html:lang(en) .search-wrapper .categories-in-header .el-input__inner {
    width: 100%;
    padding: 0 20px 0 0
}

html:lang(en) .search-wrapper-on-page .search-wrapper .category-input {
    width: 48%;
    margin: 0 5px 0 0
}

@media screen and (min-width:768px) {
    html:lang(en) .isomorphic-category {
        max-width: 300px
    }

    html:lang(en) .search-wrapper-on-page .search-wrapper .category-input,
    html:lang(en) .search-wrapper .category-input {
        margin: 0
    }
}

.el-badge.cover,
.login-btn {
    display: none !important
}

#blackTopNav {
    position: relative
}

#blackTopNav+.body-container {
    padding-top: 0
}

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

.body-container {
    background-color: #ecf0f3
}

.so-header {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 92px;
    padding: 0 30px;
    background: #fff;
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .05)
}

.so-header .lo-left {
    font-size: 18px;
    color: #000
}

.so-header__logo {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 52px;
    height: 52px;
    overflow: hidden;
    text-indent: 101%;
    white-space: nowrap;
    background-size: 100%;
    transform: translate(-50%, -50%)
}

@media screen and (max-width:767px) {
    .so-header__logo {
        width: 44px;
        height: 44px
    }
}

.so-header__logo.LOGOSC {
    background: url(/img/home/logosc-new.svg) no-repeat;
    background-size: contain;
    background-position: 50%
}

@media screen and (max-width:767px) {
    .so-header__logo.LOGOSC {
        width: 110px;
        height: 35px
    }
}

.so-header__logo.AILOGO {
    background: url(/img/home/ailogo-new.svg) no-repeat 50%/cover
}

@media screen and (max-width:767px) {
    .so-header__logo.AILOGO {
        width: 113px;
        height: 23px
    }
}

.so-header__logo.LOGOAI {
    background: url(/img/home/logoai-new.svg) no-repeat 50%/cover
}

@media screen and (max-width:767px) {
    .so-header__logo.LOGOAI {
        width: 86px;
        height: 26px
    }
}

.so-header__avatar {
    width: 30px !important;
    height: 30px !important;
    text-align: center
}

.search-wrapper {
    display: flex
}

.search-wrapper .online-logo-maker-btn {
    margin: 0 auto;
    font-size: 18px;
    font-weight: 400
}

@media screen and (min-width:768px) {
    .search-wrapper {
        width: 520px;
        padding: 0
    }

    .search-wrapper .online-logo-maker-btn {
        height: 66px;
        line-height: 62px;
        border: 2px solid #ecf0f3;
        border-radius: 6px
    }

    .search-wrapper .btn {
        width: 170px;
        height: 66px;
        margin: 0 auto;
        font-size: 18px;
        border: 2px solid #ecf0f3;
        border-radius: 6px
    }
}

@media screen and (max-width:767px) {
    .search-wrapper {
        flex-direction: column;
        width: 100%;
        padding: 0
    }

    .search-wrapper .online-logo-maker-btn {
        margin-top: 15px;
        font-size: 14px;
        font-weight: 600
    }
}

.search-wrapper .category-input {
    width: calc(100% - 190px);
    margin: 0
}

.search-wrapper .category-input .isomorphic-category {
    width: 100%
}

@media screen and (min-width:768px) {
    .search-wrapper .category-input .isomorphic-category {
        width: 100%
    }
}

.search-wrapper .category-input .isomorphic-category .current-category {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background: #fff;
    border: 2px solid #e3e3e3;
    box-shadow: none
}

@media screen and (max-width:767px) {
    .search-wrapper .category-input .isomorphic-category .current-category {
        height: 66px;
        font-size: 18px;
        line-height: 62px
    }
}

.search-wrapper .category-input .isomorphic-category ul {
    max-height: 180px
}

.search-wrapper .category-input .isomorphic-category ul li a {
    padding-left: 50px
}

@media screen and (max-width:767px) {
    .search-wrapper .category-input {
        width: 100%
    }

    .search-wrapper .category-input .isomorphic-category {
        height: 66px
    }
}

@media screen and (min-width:768px) {
    .search-wrapper .category-input .isomorphic-category {
        height: 66px;
        font-size: 18px
    }

    .search-wrapper .category-input .isomorphic-category .current-category {
        height: 66px;
        font-size: 18px;
        line-height: 62px;
        border-radius: 4px
    }

    .search-wrapper .category-input .isomorphic-category ul {
        max-height: 280px
    }
}

html:lang(en) .search-wrapper .category-input {
    width: 100%;
    margin: 0
}

@media screen and (min-width:768px) {
    html:lang(en) .search-wrapper .category-input {
        width: calc(100% - 190px);
        margin: 0
    }

    html:lang(en) .isomorphic-category {
        max-width: 100%
    }
}

.online-logo-maker {
    box-sizing: border-box;
    line-height: 1.2;
    background-color: #fff
}

.online-logo-maker *,
.online-logo-maker:after,
.online-logo-maker:before {
    box-sizing: inherit;
    outline: 0
}


.online-logo-maker__logo {
    display: block;
    width: 58px;
    height: 58px;
    margin: auto
}

.online-logo-maker__title {
    position: relative;
    margin: 0 auto 30px;
    font-size: 36px;
    font-weight: 600;
    line-height: 1;
    color: #333;
    letter-spacing: .2px
}

.online-logo-maker__title .arrow-img {
    position: absolute;
    top: 15px;
    left: -43px;
    width: 43px;
    height: 45px;
    -o-object-fit: contain;
    object-fit: contain
}

@media screen and (max-width:767px) {
    .online-logo-maker__title .arrow-img {
        left: -33px;
        width: 33px;
        height: 35px
    }
}

@media screen and (max-width:767px) {
    .online-logo-maker__title {
        font-size: 26px
    }
}

.online-logo-maker__arrow {
    position: relative
}

.online-logo-maker__refs {
    display: block;
    width: 100%;
    margin-top: 5px;
    font-size: 16px;
    font-weight: 400;
    color: #fff;
    text-align: left;
    letter-spacing: .1px;
    white-space: normal
}

.online-logo-maker__refs a {
    color: var(--theme, #20a0ff);
    text-decoration: none
}

.online-logo-maker__refs--tran {
    color: var(--theme, #20a0ff)
}

@media screen and (max-width:767px) {
    .online-logo-maker__refs--tran {
        font-size: 15px
    }
}

.online-logo-maker-steps {
    position: relative;
    height: calc(100vh);
    min-height: 875px;
    overflow: hidden;
    transition: all .3s ease;
    background-color: #f2f2f2
}

.online-logo-maker-steps__scrollview {
    height: 100%;
    font-size: 0;
    white-space: nowrap;
    transition: all .4s ease 50ms;
    transform: translateZ(0)
}

.online-logo-maker-step {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;
    text-align: center;
    visibility: hidden;
    opacity: 0;
    transition: all .25s ease
}

.online-logo-maker-step input::-webkit-input-placeholder {
    color: rgba(51, 51, 51, .5) !important
}

.online-logo-maker-step__content {
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 0 15px;
    margin-top: -40px;
    transform: translate(-50%, -50%)
}

.online-logo-maker-step__content__list {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch
}

.online-logo-maker-step__content__list .lo-go-wrapper {
    position: relative;
    padding-top: 30px
}

.online-logo-maker-step__content__list .lo-go-wrapper .lo-go-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    max-width: 1020px;
    margin: auto
}

.online-logo-maker-step__content__list .lo-go-wrapper .lo-go-list .card {
    position: relative;
    display: inline-block;
    width: calc(33.333% - 20px);
    padding-top: 23.5510307%;
    margin: 10px;
    overflow: hidden;
    cursor: pointer;
    background: transparent;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover;
    border-radius: 6px;
    transition: all .3s
}

.online-logo-maker-step__content__list .lo-go-wrapper .lo-go-list .card.animated {
    animation-fill-mode: none
}

.online-logo-maker-step__content__list .lo-go-wrapper .lo-go-list .card .icon {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 30px;
    height: 30px
}

.online-logo-maker-step__content__list .lo-go-wrapper .lo-go-list .card:hover {
    transform: scale(1.05)
}

.online-logo-maker-step__content__list .lo-go-wrapper .lo-go-list .item {
    position: relative;
    display: inline-block;
    width: calc(25% - 20px);
    height: 60px;
    padding-left: 20px;
    margin: 10px;
    overflow: hidden;
    font-size: 16px;
    line-height: 60px;
    color: #666;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    background: #fff;
    border-radius: 6px;
    transition: all .3s
}

.online-logo-maker-step__content__list .lo-go-wrapper .lo-go-list .item.skip {
    padding-left: 0;
    font-weight: 600;
    color: var(--theme, #20a0ff);
    text-align: center
}

.online-logo-maker-step__content__list .lo-go-wrapper .lo-go-list .item .iconfont {
    padding-right: 10px
}

.online-logo-maker-step__content__list .lo-go-wrapper .lo-go-list .item .icon {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 18px;
    height: 18px
}

.online-logo-maker-step__content__list .lo-go-wrapper .lo-go-list .item:hover {
    transform: scale(1.05)
}

.online-logo-maker-step__content__list .lo-go-wrapper .lo-go-loading {
    display: block;
    width: 100%;
    height: 120px;
    visibility: hidden
}

@media screen and (max-width:767px) {
    .online-logo-maker-step__content__list .lo-go-wrapper .lo-go-loading {
        height: 60px
    }
}

.online-logo-maker-step__content__list .lo-go-wrapper .lo-go-loading.doing {
    visibility: visible
}

.online-logo-maker-step__content__list .lo-go-wrapper .lo-go-loading .el-loading-mask {
    background-color: transparent
}

.online-logo-maker-step__content__list .lo-go-wrapper .lo-go-loading .el-loading-mask .el-loading-spinner {
    margin-top: -54px
}

@media screen and (max-width:767px) {
    .online-logo-maker-step__content__list .lo-go-wrapper .lo-go-loading .el-loading-mask .el-loading-spinner {
        margin-top: -64px
    }
}

@media screen and (max-width:767px) {
    .online-logo-maker-step__content__list .lo-go-wrapper {
        padding: 15px
    }

    .online-logo-maker-step__content__list .lo-go-wrapper .lo-go-list .card {
        width: calc(50% - 20px);
        padding-top: 33.2485422%
    }

    .online-logo-maker-step__content__list .lo-go-wrapper .lo-go-list .item {
        width: calc(50% - 20px)
    }

    .online-logo-maker-step__content__list .lo-go-wrapper .online-logo-maker__title {
        font-size: 22px
    }
}

@media screen and (max-width:767px) {
    .online-logo-maker-step__content {
        width: 100%
    }
}

.online-logo-maker-step__footer {
    position: absolute;
    right: 0;
    bottom: 40px;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 61.71875%;
    max-width: 790px;
    padding: 0 15px;
    margin: auto
}

.online-logo-maker-step__footer.lo-go__footer {
    bottom: 0;
    width: 100%;
    height: 90px;
    padding: 0;
    background-color: transparent;
    box-shadow: none
}

.online-logo-maker-step__footer.lo-go__footer .online-logo-maker-btn {
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .1)
}

.online-logo-maker-step__footer.lo-go__footer .lo-go__skip {
    position: absolute;
    left: 50%;
    margin-left: 114px;
    font-size: 14px;
    font-weight: 600;
    color: var(--theme, #20a0ff)
}

.online-logo-maker-step .my-input-group {
    flex-wrap: wrap
}

.online-logo-maker-step .my-input-group .el-input__inner {
    padding: 20px
}

@media screen and (max-width:767px) {
    .online-logo-maker-step .my-input-group .el-input__inner {
        padding: 20px 15px
    }
}

.online-logo-maker-step .my-input-group div.btn,
.online-logo-maker-step .my-input-group label.btn {
    margin: 0 auto;
    transition: all .2s ease
}

@media screen and (max-width:767px) {

    .online-logo-maker-step .my-input-group div.btn,
    .online-logo-maker-step .my-input-group label.btn {
        position: relative;
        display: inline-block;
        width: 168px;
        height: 48px;
        margin-top: 15px;
        font-size: 14px;
        font-weight: 600;
        line-height: 48px;
        color: #fff;
        text-align: center;
        letter-spacing: 1px;
        vertical-align: middle;
        cursor: pointer;
        background-color: var(--theme, #20a0ff);
        border: none;
        border-radius: 4px
    }

    .online-logo-maker-step .my-input-group div.btn .iconfont,
    .online-logo-maker-step .my-input-group label.btn .iconfont {
        position: absolute;
        right: 19.5px;
        display: inline-block;
        font-size: inherit;
        opacity: .7;
        transition: all .3s ease;
        transform: scale(.75);
        transform-origin: right
    }
}

@media screen and (min-width:768px) {
    .online-logo-maker-step .my-input-group {
        width: 520px
    }
}

@media screen and (max-width:767px) {
    .online-logo-maker-step .my-input-group {
        flex-direction: column;
        align-content: center
    }

    .online-logo-maker-step .my-input-group .el-input {
        width: 100%
    }
}

.online-logo-maker-btn {
    position: relative;
    display: inline-block;
    width: 168px;
    height: 48px;
    font-size: 14px;
    font-weight: 600;
    line-height: 48px;
    color: #fff;
    text-align: center;
    letter-spacing: 1px;
    vertical-align: middle;
    cursor: pointer;
    background-color: var(--theme, #20a0ff);
    border-radius: 4px;
    transition: all .2s ease
}

.online-logo-maker-btn:hover .iconfont {
    opacity: 1
}

.online-logo-maker-btn+.online-logo-maker-btn {
    margin-left: 20px
}

.online-logo-maker-btn:disabled,
.online-logo-maker-btn[disabled] {
    pointer-events: none;
    opacity: .7
}

.online-logo-maker-btn--ghost {
    line-height: 44px;
    color: #333;
    background-color: #fff;
    border: 2px solid #fff;
    border-radius: 4px
}

.online-logo-maker-btn .iconfont {
    position: absolute;
    right: 19.5px;
    display: inline-block;
    font-size: inherit;
    opacity: .7;
    transition: all .3s ease;
    transform: scale(.75);
    transform-origin: right
}

.online-logo-maker-btn .iconfont.reverse {
    right: auto;
    left: 19.5px;
    transform-origin: left
}

.online-logo-maker-btn .iconfont.reverse:before {
    display: inline-block;
    transform: rotate(180deg)
}

.online-logo-maker-form-item {
    display: flex
}

@media screen and (min-width:768px) {
    .online-logo-maker-form-item {
        position: relative;
        width: 402px
    }

    .online-logo-maker-form-item__label.lab {
        position: absolute;
        top: 0;
        left: -182px;
        z-index: 10;
        min-width: 137px;
        padding-top: 20px;
        padding-right: 0;
        margin-left: 0;
        font-size: 18px;
        color: #333;
        text-align: right
    }

    .online-logo-maker-form-item__emoji.emo {
        position: absolute;
        top: -1px;
        right: -33px;
        line-height: 1
    }

    .online-logo-maker-form-item .online-logo-maker__refs.refs {
        letter-spacing: 0
    }
}

.online-logo-maker-form-item+.online-logo-maker-form-item {
    margin-top: 30px
}

.online-logo-maker-form-item__label {
    position: relative;
    min-width: 137px;
    padding-right: 48px;
    margin-left: -109px;
    font-size: 18px;
    color: #333;
    text-align: right
}

.online-logo-maker-form-item__label>span {
    opacity: .5
}

@media screen and (min-width:768px) {
    .online-logo-maker-form-item__label[for=name] {
        align-self: center
    }
}

.online-logo-maker-form-item__emoji {
    font-size: 30px;
    font-style: normal;
    vertical-align: middle
}

@media screen and (min-width:768px) {
    .online-logo-maker-form-item__emoji {
        position: absolute;
        top: -1px;
        right: 12px;
        line-height: 1
    }
}

.online-logo-maker-form-item__emoji--down {
    display: none
}

@media screen and (max-width:767px) {
    .online-logo-maker-form-item {
        flex-direction: column
    }

    .online-logo-maker-form-item__label {
        margin: 0 0 5px;
        font-size: 16px;
        text-align: left
    }

    .online-logo-maker-form-item__emoji {
        display: none;
        font-size: 18px
    }

    .online-logo-maker-form-item__emoji--down {
        display: inline
    }
}

@media screen and (max-width:767px) {

    .online-logo-maker #name,
    .online-logo-maker #slogan {
        text-align: left
    }
}

.online-logo-maker #name {
    font-size: 26px;
    font-weight: 500
}

.online-logo-maker #slogan {
    font-size: 18px;
    line-height: 18px
}

.online-logo-maker-input {
    position: relative;
    display: block;
    width: 100%;
    min-width: 339px;
    height: 66px;
    min-height: 30px;
    padding: 5px 0;
    font-size: 22px;
    line-height: 30px;
    color: #333;
    text-align: center;
    letter-spacing: .14px;
    background-color: transparent;
    border: 0;
    border-bottom: 2px solid #e3e3e3;
    border-radius: 0;
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.online-logo-maker-input.read {
    color: rgba(51, 51, 51, .5)
}

.online-logo-maker-input.one {
    font-size: 18px;
    text-align: left
}

@media screen and (max-width:767px) {
    .online-logo-maker-input.one {
        font-size: 17px
    }
}

.online-logo-maker-input::-webkit-input-placeholder {
    color: rgba(51, 51, 51, .5)
}

.online-logo-maker-input+.online-logo-maker-input {
    margin-top: 30px
}

@media screen and (max-width:767px) {
    .online-logo-maker-input {
        font-size: 18px
    }
}

.online-logo-maker-stages {
    padding: 0 15px 90px;
    overflow: hidden
}

.online-logo-maker-stages__title {
    margin: 0 auto 16px;
    font-size: 32px;
    font-weight: 600;
    line-height: 1.44;
    color: #222
}

.online-logo-maker-stages__title em {
    position: relative;
    z-index: 1;
    display: inline-block;
    font-style: normal;
    line-height: 1
}

.online-logo-maker-stages__title em i {
    position: absolute;
    right: 0;
    bottom: -3px;
    z-index: -1;
    width: 100%;
    height: 12px;
    background-color: rgba(67, 132, 245, .7)
}

@media screen and (max-width:767px) {
    .online-logo-maker-stages__title {
        font-size: 24px
    }
}

.online-logo-maker-stages__desc {
    display: block;
    font-size: 16px;
    line-height: 1.56;
    color: #666;
    letter-spacing: .1px
}

@media screen and (max-width:767px) {
    .online-logo-maker-stages__desc {
        font-size: 14px
    }
}

.online-logo-maker-stages>.online-logo-maker-stages__desc,
.online-logo-maker-stages>.online-logo-maker-stages__title {
    text-align: center
}

.online-logo-maker-stages>.online-logo-maker-stages__title {
    margin: 100px auto 20px
}

@media screen and (max-width:767px) {
    .online-logo-maker-stages>.online-logo-maker-stages__title {
        margin-top: 50px
    }
}

.online-logo-maker-stage {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1020px;
    margin: 100px auto auto
}

.online-logo-maker-stage:nth-child(2n) .online-logo-maker-stage__intro {
    order: -1
}

.online-logo-maker-stage__intro {
    max-width: 467px
}

.online-logo-maker-stage__hover {
    transition: all .3s ease
}

.online-logo-maker-stage__hover:hover {
    transform: scale(1.05)
}

.online-logo-maker-stage--ai .online-logo-maker-stage__preview {
    width: 474px
}

.online-logo-maker-stage--edit .online-logo-maker-stage__preview {
    width: 499px
}

.online-logo-maker-stage--profession .online-logo-maker-stage__preview {
    width: 452px
}

.online-logo-maker-stage--vi .online-logo-maker-stage__preview {
    width: 639px;
    margin-right: -130px
}

@media screen and (max-width:767px) {
    .online-logo-maker-stage {
        flex-direction: column;
        margin-top: 50px
    }

    .online-logo-maker-stage .online-logo-maker-stage__intro {
        order: -1;
        width: 100%;
        max-width: 100%;
        margin-bottom: 16px
    }

    .online-logo-maker-stage .online-logo-maker-stage__preview {
        width: 100%;
        margin-right: 0
    }
}

.online-logo-maker .create-number {
    position: absolute;
    right: 0;
    bottom: 20px;
    left: 0;
    padding-top: 0;
    margin-top: 0;
    font-size: 16px;
    white-space: normal;
    border-top: 0;
    opacity: .8
}

.online-logo-maker .create-number.aos-animate {
    opacity: .8
}

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

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

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

@media screen and (max-width:767px) {
    .online-logo-maker .create-number {
        padding-right: 15px;
        padding-left: 15px;
        font-size: 14px
    }

    .online-logo-maker .create-number .tm {
        font-size: 14px
    }

    .online-logo-maker .create-number span {
        font-size: 20px
    }

    .online-logo-maker .create-number b {
        width: 16px;
        height: 22px;
        font-size: 20px;
        line-height: 22px
    }
}

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

@media screen and (max-width:767px) {

    html:lang(en) .online-logo-maker .create-number,
    html:lang(en) .online-logo-maker .create-number .tm {
        font-size: 18px
    }
}

#step1:checked~.online-logo-maker-steps .online-logo-maker-steps__scrollview {
    transform: translateZ(0)
}

#step1:checked~.online-logo-maker-steps .online-logo-maker-step:first-child {
    visibility: visible;
    opacity: 1
}

#step2:checked~.online-logo-maker-steps .online-logo-maker-steps__scrollview {
    transform: translate3d(-100%, 0, 0)
}

#step2:checked~.online-logo-maker-steps .online-logo-maker-step:nth-child(2) {
    visibility: visible;
    opacity: 1
}

#step3:checked~.online-logo-maker-steps .online-logo-maker-steps__scrollview {
    transform: translate3d(-200%, 0, 0)
}

#step3:checked~.online-logo-maker-steps .online-logo-maker-step:nth-child(3) {
    visibility: visible;
    opacity: 1
}

#step4:checked~.online-logo-maker-steps .online-logo-maker-steps__scrollview {
    transform: translate3d(-300%, 0, 0)
}

#step4:checked~.online-logo-maker-steps .online-logo-maker-step:nth-child(4) {
    visibility: visible;
    opacity: 1
}

@media screen and (max-width:767px) {
    .so-header {
        height: 80px;
        padding: 0 15px
    }

    .online-logo-maker-steps {
        position: relative;
        height: calc(100vh - 80px);
        height: calc(var(--vh, 1vh)*100);
        padding-top: 80px
    }
}

@media screen and (min-width:768px) {
    .online-logo-maker-input.one {
        min-width: 470px
    }

    .online-logo-maker-form-item__label.slogan_label {
        padding-top: 20px
    }

    .online-logo-maker-form-item__label.slogan_label .online-logo-maker-form-item__emoji {
        top: 19px
    }
}

.AILOGO #golangSC,
.AILOGO .create-number,
.AILOGO .online-logo-maker-stages {
    display: none
}

.fade-in-down {
    animation: fade-in-down .3s
}

.fade-in-up {
    animation: fade-in-up .3s
}

@keyframes fade-in-down {
    0% {
        transform: translate(-50%, -60%);
        opacity: 0
    }

    to {
        transform: translate(-50%, -50%);
        opacity: 1
    }
}

@keyframes fade-in-up {
    0% {
        transform: translate(-50%, -40%);
        opacity: 0
    }

    to {
        transform: translate(-50%, -50%);
        opacity: 1
    }
}



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

button.sc-hero__start { max-height: 46px;  line-height: 46px; padding: 0 40px; }




.bg-gradient-start {
    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%)
}

.bg-gradient-to-b {
    background-image: linear-gradient(180deg,var(--tw-gradient-stops))
}

.bg-gradient-to-bl {
    background-image: linear-gradient(to bottom left,var(--tw-gradient-stops));
}

.bg-gradient-to-br {
    background-image: linear-gradient(to bottom right,var(--tw-gradient-stops))
}

.bg-gradient-to-l {
    background-image: linear-gradient(270deg,var(--tw-gradient-stops))
}

.bg-gradient-to-r {
    background-image: linear-gradient(90deg,var(--tw-gradient-stops))
}

.bg-gradient-to-t {
    background-image: linear-gradient(0deg,var(--tw-gradient-stops))
}






.shadow-border-y {
    --tw-shadow: 0 1px 0 rgba(0,0,0,0.1);
    --tw-shadow-colored: 0 1px 0 var(--tw-shadow-color)
}

.shadow-border-y,.shadow-form {
    box-shadow: var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow)
}

.shadow-form {
    --tw-shadow: 0 0 20px 0 rgba(103,103,105,0.25);
    --tw-shadow-colored: 0 0 20px 0 var(--tw-shadow-color)
}

.shadow-header {
    --tw-shadow: 0 2px 10px 0 rgba(0,0,0,0.05);
    --tw-shadow-colored: 0 2px 10px 0 var(--tw-shadow-color)
}

.shadow-header,.shadow-inner {
    box-shadow: var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow)
}

.shadow-inner {
    --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0/0.05);
    --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color)
}

.shadow-lg {
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0/0.1),0 4px 6px -4px rgb(0 0 0/0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)
}

.shadow-lg,.shadow-logo {
    box-shadow: var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow)
}

.shadow-logo {
    --tw-shadow: 0 4px 15px 0 rgba(0,0,0,0.1);
    --tw-shadow-colored: 0 4px 15px 0 var(--tw-shadow-color)
}

.shadow-make {
    --tw-shadow: 0 3px 10px 0 rgba(0,0,0,0.2);
    --tw-shadow-colored: 0 3px 10px 0 var(--tw-shadow-color)
}

.shadow-make,.shadow-md {
    box-shadow: var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow)
}

/* 标小智 LOGOSC 自定义颜色（从官网 tailwind.css 提取） */
:root {
  --theme-color: #20a0ff;
  --primary-500: #20a0ff;
  --primary-400: #4cb8ff;
  --whitesmoke: #f5f5f5;
  --dimgray: #666;
  --dimgray-200: #999;
}

/* 背景色 */
.bg-whitesmoke { background-color: var(--whitesmoke); }

/* 文字色 */
.text-dimgray { color: var(--dimgray); }
.text-dimgray-200 { color: var(--dimgray-200); }
.text-primary-500 { color: var(--primary-500); }
.text-primary-400 { color: var(--primary-400); }

/* 悬停 */
.hover\:text-primary-500:hover { color: var(--primary-500); }
.hover\:text-primary-400:hover { color: var(--primary-400); }

/* 渐变按钮 */
.bg-gradient-start {
  background-image: linear-gradient(90deg, #3085ff 0%, #20a0ff 100%);
}
.bg-gradient-shine {
  background-image: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%);
}
.bg-size-400\% { background-size: 400%; }
.bg-pos-80\% { background-position: 80%; }

/* 阴影 */
.shadow-form { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); }
.shadow-panel { box-shadow: 0 8px 30px rgba(0, 32, 64, 0.1); }

/* 流光动画 */
@keyframes shine {
  100% {
    transform: translateX(150px) skewX(-20deg);
    opacity: 1;
  }
}




.page{ margin: 0 auto; padding: 60px 90px; max-width: 1536px; position: absolute; left: 0; right: 0; top: 92px; }

.pageLast { opacity: 0; transition: all 0.3s ease-in-out; transform: translateX(-100px); visibility: hidden; z-index: -1; }
.pageNext { opacity: 0; transition: all 0.3s ease-in-out; transform: translateX(100px); visibility: hidden; z-index: -1; }
.pageShow { opacity: 1; transition: all 0.3s ease-in-out 0.3s; transform: translateX(0); visibility: visible; z-index: 1; }

.page h1 { color: #333; text-align: left; margin: 0px; font-weight: 600; font-size: 2.25rem; line-height: 2.5rem; }
.page small { text-align: left; font-size: 1.25rem; line-height: 1.75rem; margin-top: 12px; display: block; color: #666; }
.page a.btn { width: 168px; height: 60px; font-size: 16px; font-weight: 600; }
.page .rtBtn { position: absolute; right: 90px; top: 60px; }
.page .el-input--large .el-input__wrapper { padding: 16px 30px; font-size: 18px; }
.page .el-icon { width: 2em; }
.page .el-icon svg { width: 2em; height: 2em; }
.page .pageForm { margin-top: 45px;}
.el-select-group .el-select-dropdown__item { font-size: 16px; height: 48px; line-height: 48px; }
.el-select-group .el-select-dropdown__item .fas { width: 24px; }
.el-select-group .el-select-dropdown__item.hover, .el-select-group .el-select-dropdown__item:hover { color: #008af1; padding-left: 26px; transition: padding 0.3s ease; background-color: rgb(236, 245, 255); }
.el-select-group .el-select-dropdown__item, .el-select-group .el-select-dropdown__item { transition: padding 0.3s ease; }


.page1 { text-align: center; line-height: 150px; padding-top: 14%; opacity: 0; transform: translateY(20px); }
.page1 h1 { text-align: center; line-height: 56px; }

.pageShow .page1 { opacity: 1; transform: translateY(0px); transition: opacity 0.5s ease-in-out 0.6s, transform 0.5s ease-in-out 0.6s; }

.el-select-group__wrap:not(:last-of-type)::after { visibility: hidden; }
ul.el-select-group__wrap:not(:last-of-type) { padding-bottom: 0; }
.el-select-group__title { background-color: #f8f8f8; }




    :root {

      /* --theme: #20a0ff; */
      --watermark: url('/img/watermark/LOGOSC-watermark.png');
      --logoicon: url('/img/logo-icons/logosc-new.svg');
    }

    [v-cloak] {
      display: none !important;
    }

    #div_company_mini #mini-btn {
      display: none !important;
    }

    .online-logo-maker .el-progress { top: 92px; position: fixed; left: 0; z-index: 99; right: 0; }

    .css-yi6myj kbd {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-size: 1em;
      margin-left: 0.125rem;
      margin-right: 0.125rem;
      display: inline-block;
      border-radius: 0.125rem;
      background-color: rgba(32, 160, 255, 0.1);
      padding: 0.125rem;
      line-height: 1;
    }


    .city-item { padding: 8px 12px; cursor: pointer; border-radius: 4px; font-size: 16px; }
    .city-item:hover { background: #e8f3ff; }
    .province-title { padding: 6px 10px; font-size: 12px; color: #666; background: #f3f4f6; border-radius: 4px; margin: 5px 0; }
    .list-container { max-height: 400px; overflow-y: auto; border: 1px solid #eee; border-radius: 8px; padding: 10px; background: #fff; }
    .list-container .el-tag__content { font-size: 16px; }


    .page-container { max-width: 1400px; margin: 0 auto; }
    .hospital-item { padding: 0 12px 0 20px; height: 40px; line-height: 40px; border-radius: 6px; cursor: pointer; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
    .hospital-item:hover { background: #e8f3ff; }
    .hospital-item .el-checkbox { width: 100%; }
    .hospital-item .el-checkbox span {  font-size: 16px; }
    .hospital-item .el-checkbox__label { width: 100%; display: flex; justify-content: space-between; }
    .district { font-weight: 600; color: #165DFF; margin: 0px; padding-left: 12px; height: 30px; line-height: 30px; font-size: 16px; }
    .type-badge { padding: 2px 6px; border-radius: 4px; font-size: 12px; font-weight: bold; margin-left: 10px; }
    .hospital-item .el-checkbox span.type-v1 { background: #edf7fc; color: #5699b8; padding: 2px 6px; font-size: 14px; }
    .hospital-item .el-checkbox span.type-v2 { background: #f9fff9; color: #699969; padding: 2px 6px; font-size: 14px; }
    .hospital-item .el-checkbox span.type-v3 { background: #f2f7fc; color: #7a9cb0; padding: 2px 6px; font-size: 14px; }
    .hospital-item .el-checkbox span.type-v4 { background: #fef0f0; color: #b05e6b; padding: 2px 6px; font-size: 14px; }
    .city-header { background: #f7f8fa; padding: 0px 12px; height: 40px; line-height: 40px; border-radius: 8px; margin-bottom: 10px; font-weight: 600; }
    .count-h1 { color: #333; font-size: 16px; margin-left: 10px; }
    .count-text { color: #666; font-size: 13px; margin-left: 10px; }
    .over-limit { color: #ff4d4f; font-weight: bold; }
    .scroll-area { max-height: 400px; overflow-y: auto; border: 1px solid #eee; border-radius: 8px; padding: 10px; background: #fff; }
    .scroll-area .el-tag .el-tag__content { display: inline-block; max-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    .el-input-group.p5Input { width: 250px; margin-right: 20px; }
    .el-input-group.p5Input .el-input-group__append { background-color: #fafafa; }

    .el-input.p5Input { width: 250px; margin-right: 20px; }









    /* 医院标签栏 */
    .tab-wrap {
      max-width: 1200px;
      margin: 0 auto 30px;
      overflow-x: auto;
      padding: 12px 15px;
      background: rgba(255,255,255,0.65);
      border-radius: 50px;
      box-shadow: 0 4px 20px rgba(45, 140, 240, 0.12);
      backdrop-filter: blur(10px);
      scroll-behavior: smooth;
    }
    .tab-list {
      display: flex;
      gap: 12px;
      white-space: nowrap;
    }
    /* 无套餐医院标签警告图标 */
    .warning-icon {
      position: absolute;
      top: -6px;
      right: -6px;
      color: #faad14;
      font-size: 16px;
    }

    /* ———— 核心修复：阴影完整显示 + 边缘无漏影 ———— */
    .carousel-wrapper {
      position: relative;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 60px;
    }
    .carousel-container {
      width: 100%;
      padding: 0 30px 30px 30px;
      overflow: hidden;
      border-radius: 20px;
    }
    .carousel-track {
      display: flex;
      transition: transform 0.5s ease;
    }
    /* 轮播幻灯片 - 淡入淡出效果 */
    .carousel-slide {
      min-width: 100%;
      padding: 10px 0;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.5s ease, visibility 0.5s ease;
    }
    .carousel-slide.active {
      visibility: visible;
      opacity: 1;
    }
    /* 套餐布局 */
    .package-layout {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      justify-content: center;
      align-items: stretch;
    }
    /* 套餐卡片：缩减高度，刚好显示10项 */
    .package-card {
      flex: 1;
      min-width: 280px;
      max-width: 350px;
      background: #fff;
      border-radius: 20px;
      padding: 10px 20px 20px 15px;
      box-shadow: 0 8px 30px rgba(0,0,0,0.12);
      transition: all 0.3s ease;
      border: 1px solid rgba(45, 140, 240, 0.08);
      height: 460px;
      display: flex;
      flex-direction: column;
    }
    .package-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 12px 35px rgba(0,0,0,0.15);
    }
    /* 标题 + 图标 */
    .package-title {
      font-size: 18px;
      font-weight: 600;
      text-align: center;
      padding-bottom: 6px;
      margin-bottom: 10px;
      border-bottom: 1px dashed #eee;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }
    .package-icon{
      font-size: 20px;
    }
    /* 项目数量 */
    .package-count {
      font-size: 16px;
      color: #2d8cf0;
      font-weight: 600;
      text-align: center;
      margin: 12px 0;
    }
    /* 项目列表：有序号 + 滚动 + 右侧对勾 */
    .package-list {
      flex: 1;
      overflow-y: auto;
      padding-right: 5px;
    }
    .package-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 28px;
      line-height: 28px;
      color: #4b5563;
      font-size: 16px;
      padding: 2px 0;
    }
    .package-item .num {
      color: #2d8cf0;
      font-weight: 600;
      min-width: 22px;
      margin-right: 8px;
      text-align: right;
    }
    .package-item .text {
      flex: 1;
    }
    .check-icon {
      color: #10b981;
      font-size: 16px;
      flex-shrink: 0;
    }
    /* 无套餐提示同步高度 */
    .empty-box {
      background: #fff;
      border-radius: 20px;
      padding: 80px 20px;
      text-align: center;
      color: #9ca3af;
      box-shadow: 0 8px 30px rgba(0,0,0,0.06);
      height: 460px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }
    /* 滚动条美化 */
    .package-list::-webkit-scrollbar {
      width: 4px;
    }
    .package-list::-webkit-scrollbar-thumb {
      background: #c1e0ff;
      border-radius: 10px;
    }
    /* 左右按钮 */
    .carousel-btn.el-button {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 10;
      width: 40px;
      height: 40px;
      font-size: 22px;
    }








    /* 服务网格布局 */
    .service-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 25px;
    }
    /* 服务项卡片 */
    .service-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 25px 15px;
      border-radius: 12px;
      background: #ffffff;
      border: 2px solid transparent;
      cursor: pointer;
      transition: all 0.3s ease;
      /* 初始状态：透明+缩小 */
      opacity: 0;
      transform: scale(0.5);
    }
    /* 选中状态样式 */
    .service-item.active {
      border-color: #409eff;
      background: #ffffff;
      box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
    }
    /*  hover效果 */
    .service-item:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    }
    .service-item.active:hover {
      box-shadow: 0 8px 16px rgba(64, 158, 255, 0.3);
    }
    /* 服务图标 */
    .service-icon {
      font-size: 36px;
      color: #969696;
      margin-bottom: 15px;
    }
    .service-item.active .service-icon {
      color: #409eff;
    }
    /* 服务名称 */
    .service-name {
      font-size: 15px;
      color: #666;
      text-align: center;
      line-height: 1.4;
      font-weight: 500;
    }
    .service-item.active .service-name {
      color: #409eff;
      font-weight: 600;
    }
    /* 动画：渐显+缩放 */
    .service-item.fade-in {
      opacity: 1;
      transform: scale(1);
    }




/* 去掉数字输入框上下箭头 */
:deep(.no-number-arrow input::-webkit-outer-spin-button),
:deep(.no-number-arrow input::-webkit-inner-spin-button) {
  -webkit-appearance: none !important;
  margin: 0;
}
:deep(.no-number-arrow input[type="number"]) {
  -moz-appearance: textfield !important;
}










    .loading-mask {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(255,255,255,0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 9999;
      opacity: 0;
      visibility: hidden;
      transition: 0.4s;
    }
    .loading-mask.show {
      opacity: 1;
      visibility: visible;
    }
    .loading-box {
      position: relative;
      width: 120px;
      height: 120px;
    }
    .loading-circle {
      width: 100%;
      height: 100%;
      border: 3px solid transparent;
      border-top: 3px solid #1677ff;
      border-radius: 50%;
      animation: rotate 1s linear infinite;
      box-sizing: border-box;
    }
    .loading-logo {
      position: absolute;
      top: 15px;
      left: 15px;
      width: 90px;
      height: 90px;
      border-radius: 50%;
      overflow: hidden;
      box-shadow: 0 4px 15px rgba(0,0,0,0.2);
      background: #fff;
    }
    .loading-logo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    @keyframes rotate {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }


.lockCombo { text-align: center; margin-top: 100px; }
.lockCombo i { font-size: 60px; color: #cccccc; }
.lockCombo div { margin-top: 20px; color: #999; }
.addWeChat { font-size: 22px; cursor: pointer; }
.addWeChat:hover i { color: #10b981; }
.user_cover .phone { font-size: 18px; font-weight: bold; }
.user_cover .phone i { font-size: 18px; }
.el-overlay-dialog .el-dialog__header { display: block; margin-right: 0; padding-bottom: 0; height: 64px; font-weight: bold; }
.el-overlay-dialog .el-dialog--center .el-dialog__body { padding-top: 0; }

.el-overlay .el-overlay-dialog .el-dialog { border-radius: 20px; }
.el-overlay-dialog .el-dialog__headerbtn .el-dialog__close { font-size: 20px; }

.main-container .w-full .title {
    height: 40px;
    line-height: 38px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    background: #ffffff;
    border-radius: 0 0 10px 10px;
}