/* 1.chuban */
input::placeholder {
    color: #7e7878 !important;
    font-size: 14px;
}

.chuban .txt {
    box-sizing: border-box;
    padding: 30px 80px 60px;
    font-size: 18px;
    line-height: 38px;
}

    .chuban .txt a:hover {
        color: var(--skell-color5a);
        text-decoration: underline;
    }

@media (max-width: 1400px) {
    .chuban .txt {
        padding: 30px 40px 50px;
        font-size: 16px;
        line-height: 32px;
    }
}

/* 2.exp */
.exp {
    box-sizing: border-box;
    padding: 0 0px;
}

    .exp li {
        text-align: center;
        position: relative;
        box-sizing: border-box;
        padding: 0 5px;
    }

    .exp span {
        font-family: "Times New Roman";
        font-size: 40px;
        line-height: 50px;
        font-weight: bold;
        color: var(--skell-color);
    }

    .exp p {
        font-size: 20px;
        margin-top: 10px;
        color: var(--skell-color5a);
    }

    .exp img {
        height: 90px;
    }

@media (max-width: 1400px) {
    .exp {
        padding: 0 30px;
    }

        .exp span {
            font-size: 46px;
            line-height: 46px;
        }

        .exp p {
            font-size: 18px;
        }
}

/* 4.album */
.album .img {
    width: 45%;
}

.album .txt {
    width: 50%;
    box-sizing: border-box;
    padding: 0 70px;
}

    .album .txt h2 {
        font-size: 38px;
    }

.album .det span {
    display: block;
    font-size: 26px;
    position: relative;
    box-sizing: border-box;
    padding-left: 35px;
}

    .album .det span:nth-child(n + 2) {
        margin-top: 10px;
    }

    .album .det span::after {
        content: "";
        display: block;
        width: 18px;
        height: 14px;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        background: url(./../img/icon-tick.png) no-repeat center/cover;
    }

.album .dot {
    box-sizing: border-box;
    padding-left: 12px;
    justify-content: space-between;
}

    .album .dot em {
        display: block;
        position: relative;
        font-size: 24px;
        color: var(--skell-color5a);
        padding-left: 35px;
    }

        /* .album .dot em:not(:last-child) {
  margin-right: 70px;
} */

        .album .dot em::after {
            content: "";
            display: block;
            width: 18px;
            height: 18px;
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            background: url(./../img/icon-ling-h.png) no-repeat center/cover;
        }

.album-desc a {
    text-decoration: underline;
}

    .album-desc a:hover {
        color: var(--skell-color5a);
    }

@media (max-width: 1400px) {
    .album .img {
        width: 40%;
    }

    .album .txt {
        width: 55%;
        padding: 0 30px;
    }

        .album .txt h2 {
            font-size: 28px;
        }

    .album .det span {
        font-size: 20px;
        padding-left: 28px;
    }

        .album .det span::after {
            width: 14px;
            height: 10px;
        }

        .album .det span:nth-child(n + 2) {
            margin-top: 10px;
        }

    .album .dot em {
        font-size: 20px;
        padding-left: 25px;
    }

        .album .dot em:not(:last-child) {
            margin-right: 60px;
        }

        .album .dot em::after {
            width: 13px;
            height: 13px;
        }
}

/* 5.tape */
.tape li {
    width: calc((100% / 3) - 4px);
    min-height: 180px;
    cursor: pointer;
    overflow: hidden;
    position: relative;
}

    .tape li:not(:nth-child(3n)) {
        margin-right: 6px;
    }

    .tape li:nth-child(n + 4) {
        margin-top: 6px;
    }

    .tape li .img {
        width: 100%;
        height: 100%;
    }

        .tape li .img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    .tape li:hover .img img {
        transform: scale(1.04);
    }

    .tape li .tape-sight {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        padding: 15px;
        overflow: hidden;
    }

    .tape li .tape-play {
        width: 45px;
        height: 45px;
    }

        .tape li .tape-play img {
            width: 100%;
            height: 100%;
        }

    .tape li h2 {
        font-size: 18px;
    }

    .tape li:hover h2 {
        color: var(--skell-colorff);
    }

    .tape li p {
        font-size: 14px;
        line-height: 28px;
    }

@media (max-width: 1400px) {
    .tape li p {
        font-size: 16px;
    }

    .tape li .tape-play {
        width: 40px;
        height: 40px;
    }

    .tape li h2 {
        font-size: 16px;
    }

    .tape li p {
        font-size: 13px;
        line-height: 24px;
    }
}

/* 6.video-vessel */
.video-vessel {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    width: 65%;
    height: auto;
    z-index: 300;
    overflow: hidden;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 1);
    cursor: pointer;
    border-radius: 10px;
    border: 3px solid #000000;
}

    .video-vessel .video-close {
        width: 37px;
        height: 37px;
        position: absolute;
        right: 16px;
        top: 16px;
        cursor: pointer;
        z-index: 300;
    }

    .video-vessel video {
        width: 100%;
        height: 65vh;
        object-fit: cover;
        border-radius: 10px;
    }

@media (max-width: 1400px) {
    .video-vessel {
        width: 85%;
        border: 2px solid #000000;
    }

        .video-vessel .video-close {
            width: 32px;
            height: 32px;
        }
}

/* 7.draw */
.draw {
    box-sizing: border-box;
    padding: 20px;
}

    .draw li {
        width: calc((100% / 3) - 20px);
        cursor: pointer;
        overflow: hidden;
    }

        .draw li a {
            display: block;
            width: 100%;
            height: auto;
        }

        .draw li:not(:nth-child(3n)) {
            margin-right: 30px;
        }

        .draw li:nth-child(n + 4) {
            margin-top: 30px;
        }

        .draw li .img {
            width: 100%;
            height: auto;
        }

            .draw li .img img {
                width: 100%;
                object-fit: cover;
            }

        .draw li:hover .img img {
            transform: scale(1.04);
        }

        .draw li p {
            font-size: 20px;
            font-weight: bold;
            line-height: 30px;
            box-sizing: border-box;
            padding: 12px 10px;
            color: #ffffff;
            background-color: var(--skell-color4d);
        }

        .draw li:hover p {
            background-color: var(--skell-color);
        }

@media (max-width: 1400px) {
    .draw {
        padding: 10px;
    }

        .draw li {
            width: calc((100% / 3) - 10px);
        }

            .draw li:not(:nth-child(3n)) {
                margin-right: 15px;
            }

            .draw li:nth-child(n + 4) {
                margin-top: 15px;
            }

            .draw li p {
                font-size: 18px;
                padding: 7px 10px;
            }
}

/* 8.about */
.about .txt {
    width: 48%;
}

.about .kg{
    width:2%;
}

.about .abt {
    width: 50%;
}

.about-desc {
    font-size: 20px;
    line-height: 39px;
}

.abt-sub {
    box-sizing: border-box;
    padding: 10px 20px;
    font-size: 18px;
}

.abt-way {
    box-sizing: border-box;
    padding: 0 20px;
}

    .abt-way li img {
        width: 20px;
        height: 20px;
        margin-right: 5px;
    }

    .abt-way li i {
        font-size: 18px;
        color: #294c75;
    }

    .abt-way li:first-child {
        margin-right: 60px;
    }

@media (max-width: 1400px) {
    .about-desc {
        font-size: 17px;
        line-height: 34px;
    }
}

/* 9.abt-abt-msg */
.abt-msg {
    box-sizing: border-box;
    padding: 0 20px;
}

    .abt-msg li {
        width: 100%;
        margin-top: 10px;
    }

        .abt-msg li:first-child {
            margin-top: 0;
        }

        .abt-msg li span {
            display: block;
            font-size: 15px;
            margin-bottom: 5px;
        }

        .abt-msg li input,
        .abt-msg li textarea {
            width: 100%;
            height: 40px;
            padding: 0 15px;
            font-size: 14px;
            border: 1px solid #bbc5cc;
            background-color: #ffffff;
            color: #666666;
            box-sizing: border-box;
            border-radius: 5px;
        }

        .abt-msg li textarea {
            height: 110px;
            padding: 10px 15px;
        }

.abt-mit {
    width: 280px;
}

.abt-msg input::-webkit-input-placeholder,
.abt-msg textarea::-webkit-input-placeholder {
    color: #666666;
}

.abt-msg input::-moz-placeholder,
.abt-msg textarea::-moz-placeholder {
    color: #666666;
}

.abt-msg input::-moz-placeholder,
.abt-msg textarea::-moz-placeholder {
    color: #666666;
}

.abt-msg input::-ms-input-placeholder,
.abt-msg textarea::-ms-input-placeholder {
    color: #666666;
}

@media (max-width: 1400px) {
    .abt-way li img {
        width: 15px;
        height: 15px;
        margin-right: 3px;
    }

    .abt-way li i {
        font-size: 14px;
    }

    .abt-way li:first-child {
        margin-right: 20px;
    }
}

/* 10.case-swiper */
.case-box {
    box-sizing: border-box;
    padding: 20px 40px;
}

.case-swiper {
    width: 100%;
    height: auto;
    position: relative;
}

    .case-swiper .swiper-container {
        width: calc(100% - 160px);
        height: 325px;
        overflow: hidden;
        margin: 0 auto;
        position: relative;
    }

    .case-swiper .swiper-slide {
        display: block;
        width: 100%;
        height: auto;
    }

    .case-swiper .img {
        width: 100%;
        height: 100%;
        overflow: hidden;
        border-bottom: 0;
    }

        .case-swiper .img img {
            max-width: 100%;
            width: auto;
            margin: 0 auto;
            display: block;
            height: 100%;
            object-fit: cover;
        }

    .case-swiper .swiper-slide:hover .img img,
    .case-swiper .swiper-slide-active .img img {
        transform: scale(1.04);
    }

    .case-swiper .swiper-button-next,
    .case-swiper .swiper-button-prev {
        width: 32px;
        height: 50px;
    }

    .case-swiper .swiper-button-prev,
    .case-swiper .swiper-container-rtl .swiper-button-next {
        background-image: url(./../img/swiper-lf.png);
        background-size: 100% 100%;
        left: 0;
        cursor: pointer;
    }

    .case-swiper .swiper-button-next,
    .case-swiper .swiper-container-rtl .swiper-button-prev {
        background-image: url(./../img/swiper-rg.png);
        background-size: 100% 100%;
        right: 0;
        cursor: pointer;
    }

@media (max-width: 1600px) {
    .case-swiper .swiper-container {
        height: 285px;
    }
}

@media (max-width: 1400px) {
    .case-box {
        padding: 30px 20px;
    }



    .case-swiper .swiper-container {
        width: calc(100% - 110px);
    }

    .case-swiper .swiper-button-next,
    .case-swiper .swiper-button-prev {
        width: 24px;
        height: 40px;
    }
}

/* 11.fodder */
.fodder li {
    width: calc((100% / 4) - 15px);
    cursor: pointer;
    overflow: hidden;
    position: relative;
}

    .fodder li:not(:nth-child(4n)) {
        margin-right: 20px;
    }

    .fodder li:nth-child(n + 5) {
        margin-top: 20px;
    }

    .fodder li a {
        display: block;
        width: 100%;
        height: 100%;
    }

    .fodder li .img {
        width: 100%;
        height: 100%;
    }

        .fodder li .img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    .fodder li:hover .img img {
        transform: scale(1.04);
    }

    .fodder li .fod-sight {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        padding: 20px;
        font-size: 30px;
        font-weight: bold;
        color: #ffffff;
    }

    .fodder li:hover .fod-sight {
        color: var(--skell-color4d);
    }

@media (max-width: 1400px) {
    .fodder li {
        width: calc((100% / 4) - 9px);
    }

        .fodder li:not(:nth-child(4n)) {
            margin-right: 12px;
        }

        .fodder li:nth-child(n + 5) {
            margin-top: 12px;
        }

        .fodder li .fod-sight {
            font-size: 20px;
        }
}

/* 12.xibao */
.xibao {
    box-sizing: border-box;
}

    .xibao li {
        width: calc((100% / 3) - 40px);
        cursor: pointer;
        overflow: hidden;
        position: relative;
    }

        .xibao li:not(:nth-child(3n)) {
            margin-right: 60px;
        }

        .xibao li:nth-child(n + 4) {
            margin-top: 50px;
        }

        .xibao li a {
            display: block;
            width: 100%;
            height: 100%;
        }

        .xibao li .img {
            width: 100%;
            height: 100%;
        }

            .xibao li .img img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

        .xibao li:hover .img img {
            transform: scale(1.04);
        }

        .xibao li .xibao-sight {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            box-sizing: border-box;
            padding: 20px;
            font-size: 24px;
            font-weight: bold;
            color: #ffffff;
        }

        .xibao li:hover .xibao-sight {
            color: var(--skell-color4d);
        }

@media (max-width: 1400px) {
    .xibao {
        box-sizing: border-box;
    }

        .xibao li {
            width: calc((100% / 3) - 20px);
        }

            .xibao li:not(:nth-child(3n)) {
                margin-right: 30px;
            }

            .xibao li:nth-child(n + 4) {
                margin-top: 20px;
            }

            .xibao li .xibao-sight {
                font-size: 20px;
            }
}

/* 13.bio */
.bio {
    box-sizing: border-box;
}

    .bio li {
        width: calc((100% / 4) - 15px);
        cursor: pointer;
        overflow: hidden;
        position: relative;
    }

        .bio li:not(:nth-child(4n)) {
            margin-right: 20px;
        }

        .bio li:nth-child(n + 5) {
            margin-top: 20px;
        }

        .bio li a {
            display: block;
            width: 100%;
            height: auto;
        }

        .bio li .img {
            width: 280px;
            height: 210px;
        }

            .bio li .img img {
                width: 100%;
                height: 100%;
                object-fit: contain;
            }

        .bio li:hover .img img {
            transform: scale(1.04);
        }

        .bio li .bio-txt {
            font-size: 20px;
        }

        .bio li:hover .bio-txt {
            color: var(--skell-color4d);
        }

@media (max-width: 1400px) {
    .bio {
        box-sizing: border-box;
    }

        .bio li {
            width: calc((100% / 4) - 9px);
        }

            .bio li:not(:nth-child(4n)) {
                margin-right: 12px;
            }

            .bio li:nth-child(n + 5) {
                margin-top: 12px;
            }

            .bio li .bio-txt {
                font-size: 18px;
            }
}

/* 14.bary */
.bary {
    box-sizing: border-box;
}

    .bary li {
        width: calc((100% / 6) - 15px);
        cursor: pointer;
        overflow: hidden;
        position: relative;
        box-sizing: border-box;
    }

        .bary li:not(:nth-child(6n)) {
            margin-right: 18px;
        }

        .bary li:nth-child(n + 7) {
            margin-top: 18px;
        }

        .bary li a {
            display: block;
            width: 100%;
            height: auto;
        }

        .bary li .bary-sight {
            position: relative;
            width: 100%;
            height: 100%;
            border: 2px solid #e9e9e9;
        }

            .bary li .bary-sight:hover {
                border: 2px solid var(--skell-color4d);
            }

        .bary li .bary-row {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            box-sizing: border-box;
            padding: 20px;
            background: rgb(187, 209, 227, 0.5);
            opacity: 0;
        }

            .bary li .bary-row img {
                width: 30px;
                height: 30px;
            }

        .bary li:hover .bary-row {
            opacity: 1;
        }

        .bary li .img {
            width: 100%;
            height: auto;
        }

            .bary li .img img {
                width: 178px;
                height: 178px;
                object-fit: contain;
            }

        .bary li:hover .img img {
            transform: scale(1.04);
        }

        .bary li .bary-txt {
            font-size: 20px;
        }

        .bary li:hover .bary-txt {
            color: var(--skell-color4d);
        }

@media (max-width: 1400px) {
    .bary {
        box-sizing: border-box;
    }

        .bary li .bary-txt {
            font-size: 18px;
        }
}

/* 15.album-det */
.album-det .lf,
.album-det .rg {
    width: 49%;
}

    .album-det .rg .img {
        position: relative;
        width: 100%;
        height: 350px;
    }

        .album-det .rg .img .color-palette p {
            width: 35px !important;
            height: 35px !important;
        }

        .album-det .rg .img .flexbox-fix input {
            height: 35px !important;
        }

/* .album-det .rg .img .colorpicker-pancel{
  height: 350px;
} */

.album-down {
    background-color: #f5f7f9;
    box-sizing: border-box;
    padding: 20px;
}

    .album-down .img {
        width: 49%;
    }

    .album-down .txt {
        width: 49%;
        box-sizing: border-box;
        padding: 23px 20px;
    }

        .album-down .txt h2 {
            font-size: 20px;
        }

    .album-down .det {
        font-size: 16px;
        line-height: 34px;
    }

.album-dw-mit {
    width: 175px;
    height: 42px;
    line-height: 40px;
}

@media (max-width: 1400px) {
    .album-down {
        padding: 11px;
    }

        .album-down .img {
            width: 35%;
        }

        .album-down .txt {
            width: 60%;
            padding: 0;
        }

        .album-down .det {
            font-size: 14px;
            line-height: 30px;
        }

    .album-dw-mit {
        width: 125px;
        height: 34px;
        line-height: 32px;
        font-size: 12px;
    }

    .album-det .rg .img {
        position: relative;
        width: 100%;
    }

        .album-det .rg .img .color-palette p {
            width: 25px !important;
            height: 25px !important;
        }

        .album-det .rg .img .flexbox-fix input {
            height: 25px !important;
        }
}

/* 16.album-det */
.alshare .code img {
    width: 200px;
    height: 200px;
}

.alshare .code p {
    font-size: 16px;
}

.alshare-mit {
    width: 165px;
    height: 47px;
    line-height: 45px;
}

.alshare-inp {
    margin: 0 auto;
    width: 380px;
    height: 48px;
    border-radius: 5px;
    overflow: hidden;
    box-sizing: border-box;
    border: 2px solid #b7b7b7;
}

    .alshare-inp input {
        width: 100%;
        height: 100%;
        padding: 0 15px;
        font-size: 14px;
        background-color: #ffffff;
    }

        .alshare-inp input::-webkit-input-placeholder,
        .alshare-inp textarea::-webkit-input-placeholder {
            color: #cccccc;
        }

        .alshare-inp input::-moz-placeholder,
        .alshare-inp textarea::-moz-placeholder {
            color: #cccccc;
        }

        .alshare-inp input::-moz-placeholder,
        .alshare-inp textarea::-moz-placeholder {
            color: #cccccc;
        }

        .alshare-inp input::-ms-input-placeholder,
        .alshare-inp textarea::-ms-input-placeholder {
            color: #cccccc;
        }

/* 17.serve-tabs */
.serve-tabs {
    box-sizing: border-box;
    /*padding: 0 20px;*/
}

    .serve-tabs li {
        width: calc((100% / 5) - 20px);
        text-align: center;
        box-sizing: border-box;
        background-color: var(--skell-color4d);
        border: 2px solid var(--skell-color4d);
        color: #ffffff;
        font-size: 20px;
        padding: 9px 5px;
        border-radius: 5px;
        overflow: hidden;
        cursor: pointer;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        -o-transition: all 0.5s;
        -ms-transition: all 0.5s;
        transition: all 0.5s;
    }

        .serve-tabs li:not(:nth-child(5n)) {
            margin-right: 25px;
        }

        .serve-tabs li:nth-child(n + 6) {
            margin-top: 20px;
        }

        .serve-tabs li:hover {
            color: var(--skell-color4d);
            background-color: #ffffff;
        }

.serve-box .serve-cell {
    display: none;
}

    .serve-box .serve-cell .serve-swiper {
        height: 325px;
    }

        .serve-box .serve-cell .serve-swiper .swiper-slide {
            display: flex;
            align-items: center;
        }

    .serve-box .serve-cell.active {
        display: block;
    }

@media (max-width: 1600px) {
    .serve-box .serve-cell .serve-swiper {
        height: 285px;
    }
}

@media (max-width: 1400px) {
    .serve-tabs {
        padding: 0 10px;
    }

        .serve-tabs li {
            width: calc((100% / 5) - 12px);
        }

            .serve-tabs li:not(:nth-child(5n)) {
                margin-right: 15px;
            }

            .serve-tabs li:nth-child(n + 6) {
                margin-top: 15px;
            }

        .serve-tabs li {
            font-size: 14px;
            padding: 7px 5px;
        }

    .serve-box .serve-cell .serve-swiper {
        height: 250px;
    }
}

/* 18.serve-swiper */
.serve-box {
    box-sizing: border-box;
    padding: 20px 40px;
}

.serve-swiper {
    width: 100%;
    height: auto;
    position: relative;
}

    .serve-swiper .swiper-container {
        width: calc(100% - 160px);
        height: 100%;
        overflow: hidden;
        margin: 0 auto;
        position: relative;
    }

    .serve-swiper .swiper-slide {
        display: block;
        width: 100%;
        height: 100%;
    }

    .serve-swiper .img {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        border-bottom: 0;
        /* border: 2px solid transparent; */
        box-sizing: border-box;
        margin: 0 auto;
    }

.serve2-swiper .img {
    max-width: 920px;
}

.serve-swiper .img img {
    width: auto;
    max-width: auto;
    height: 100%;
    object-fit: cover;
    box-shadow: 3px 5px 13px 0px rgba(0, 0, 0, 0.08);
}

.serve-swiper .swiper-slide-active .img img {
    box-shadow: 3px 5px 13px 0px rgba(0, 0, 0, 0.08);
}

.serve2-swiper .swiper-slide-active .img {
    box-shadow: 0 0 0 0;
}

.serve-swiper .swiper-slide:hover .img img,
.serve-swiper .swiper-slide-active .img img {
    transform: scale(1.04);
}

.serve2-swiper .swiper-slide:hover .img img,
.serve2-swiper .swiper-slide-active .img img {
    transform: scale(1);
}

.serve-swiper .swiper-button-next,
.serve-swiper .swiper-button-prev {
    width: 32px;
    height: 50px;
}

.serve-swiper .swiper-button-prev,
.serve-swiper .swiper-container-rtl .swiper-button-next {
    background-image: url(./../img/swiper-lf.png);
    background-size: 100% 100%;
    left: 0;
    cursor: pointer;
}

.serve-swiper .swiper-button-next,
.serve-swiper .swiper-container-rtl .swiper-button-prev {
    background-image: url(./../img/swiper-rg.png);
    background-size: 100% 100%;
    right: 0;
    cursor: pointer;
}

@media (max-width: 1400px) {
    .serve-box {
        padding: 30px 20px;
    }

    .serve-swiper .swiper-container {
        width: calc(100% - 110px);
    }

    .serve-swiper .swiper-button-next,
    .serve-swiper .swiper-button-prev {
        width: 24px;
        height: 40px;
    }
}

/* 19.login-box */
.login-box {
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: scroll;
    box-sizing: border-box;
    padding-top: 120px;
}

    .login-box .inside {
        height: 100%;
    }

.login-main {
    width: 100%;
    height: 100%;
}

    .login-main .img {
        width: 45%;
    }

    .login-main .login-popu {
        width: 50%;
        max-width: 620px;
    }

.login {
    width: 100%;
    height: 590px;
    border-radius: 15px;
    background-color: #ffffff;
    box-sizing: border-box;
    padding: 80px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

    .login .login-ico-box {
        width: calc(100% + 160px);
        height: 84px;
        margin-top: -80px;
        margin-left: -80px;
        box-sizing: border-box;
        padding: 10px;
        position: relative;
    }

    .login .login-ico {
        width: 100px;
        height: 100px;
        position: relative;
        cursor: pointer;
        overflow: hidden;
    }

        .login .login-ico::after {
            content: "";
            width: 0;
            height: 0;
            border-bottom: 32px solid #ffffff;
            border-left: 32px solid transparent;
            position: absolute;
            bottom: 0;
            right: 0;
        }

        .login .login-ico img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: absolute;
            left: 0;
            top: 0;
        }

            .login .login-ico img:first-child {
                display: block;
            }

            .login .login-ico img:last-child {
                display: none;
            }

.login-tags {
    width: 200px;
    height: auto;
    position: absolute;
    left: 135px;
    top: 20px;
}

    .login-tags img {
        width: 100%;
        height: 100%;
    }

.login-cons {
    width: 100%;
    height: 100%;
}

    .login-cons .login-cod-box,
    .login-cons .login-put-box {
        width: 100%;
        height: 100%;
    }

    .login-cons .login-cod-box {
        display: block;
    }

    .login-cons .login-put-box {
        display: none;
    }

    .login-cons .login-cod,
    .login-cons .login-put {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

        .login-cons .login-put{
            margin-top:12%;
        }

        .login-sub {
            width: 100%;
            font-size: 26px;
            display: flex;
            justify-content: space-around;
        }

    .login-sub .active {
        border-bottom: 3px solid;
    }

    .login-sub span {
        display: block;
        cursor: pointer;
    }

.login-code-img img {
    width: 240px;
    height: 240px;
    border:1px solid #ccc;
}

.login-code-img p {
    font-size: 16px;
    line-height: 32px;
}

.login-cod-mit {
    width: 100%;
    max-width: 360px;
}

.login-msg {
    width: 100%;
}

    .login-msg li {
        width: 100%;
        height: 48px;
        margin-top: 15px;
        display: flex;
        justify-content: space-between;
        font-size: 16px;
        border: 2px solid #f3f3f3;
        background-color: #ffffff;
        border-radius: 5px;
    }

        .login-msg li:first-child {
            margin-top: 0;
        }

        .login-msg li input {
            flex: 1;
            height: 100%;
            padding: 0 15px;
            color: #666666;
            box-sizing: border-box;
        }

.login-msg-phone span {
    width: 65px;
    height: 100%;
    line-height: 44px;
    text-align: center;
    position: relative;
}

    .login-msg-phone span::after {
        content: "";
        display: block;
        width: 2px;
        height: 65%;
        background-color: #f3f3f3;
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
    }

.login-msg-verf span {
    color: var(--skell-color);
    padding-right: 10px;
    line-height: 44px;
    cursor: pointer;
    display: block;
    width: 105px;
}

.login-msg input::-webkit-input-placeholder,
.login-msg textarea::-webkit-input-placeholder {
    color: #bebebe;
}

.login-msg input::-moz-placeholder,
.login-msg textarea::-moz-placeholder {
    color: #bebebe;
}

.login-msg input::-moz-placeholder,
.login-msg textarea::-moz-placeholder {
    color: #bebebe;
}

.login-msg input::-ms-input-placeholder,
.login-msg textarea::-ms-input-placeholder {
    color: #bebebe;
}

.login-put-mit {
    width: 100%;
}

.login-agree {
    width: 100%;
    height: auto;
    text-align: left;
}

    .login-agree input[type="radio"] {
        width: 15px;
        height: 15px;
        line-height: 10px;
        display: inline-block;
        text-align: center;
        vertical-align: middle;
        position: relative;
        overflow: hidden;
        margin-bottom: 7px;
        cursor: pointer;
    }

        .login-agree input[type="radio"]::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            background: var(--skell-colorff);
            width: 100%;
            height: 100%;
            border: 1px solid #bebebe;
            border-radius: 3px;
        }

        .login-agree input[type="radio"]:checked::after {
            content: "\2713";
            background-color: var(--skell-color);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 1px solid #bebebe;
            border-radius: 3px;
            color: var(--skell-colorff);
            font-size: 7px;
            font-weight: bold;
        }

    .login-agree span {
        font-size: 16px;
        margin-left: 7px;
        color: #6f6f6f;
    }

        .login-agree span a {
            text-decoration: underline;
        }

            .login-agree span a:hover {
                color: var(--skell-colorfd);
            }

.login-tips span {
    display: block;
    font-size: 16px;
    margin-left: 7px;
    color: #6f6f6f;
}

    .login-tips span a {
        text-decoration: underline;
    }

        .login-tips span a:hover {
            color: var(--skell-colorfd);
        }

@media (max-width: 1400px) {
    .login-box {
        padding-left: 0;
        padding-right: 0;
    }

    .login {
        padding: 40px;
        height: 510px;
    }

        .login .login-ico-box {
            width: calc(100% + 80px);
            margin-top: -40px;
            margin-left: -40px;
        }
}

/* 20.grama */
.grama {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
}

    .grama .grabar {
        width: 280px;
        background-color:#fff;
        box-shadow: 0 0 10px 0 rgba(231, 242, 252, 1)
    }

    .grama .gracons {
        width: calc(100% - 290px);
        /*padding-left: 40px;*/
        /*height: calc(100vh - 150px);*/
        overflow: auto;
        box-shadow: 0 0 10px 0 rgba(231, 242, 252, 1);
    }

    .grama .grasub {
        font-size: 26px;
        font-weight: bold;
        margin-bottom: 10px;
    }

.inside > .grasub {
    font-size: 26px;
    font-weight: bold;
}

@media (max-width: 1400px) {
    .grama .gracons {
        padding-left: 30px;
    }

    .grama .grabar {
        width: 210px;
    }

    .grama .gracons {
        width: calc(100% - 210px);
        padding-left: 20px;
    }

    .grama .grasub {
        font-size: 20px;
    }

    .inside > .grasub {
        font-size: 26px;
        font-weight: bold;
    }
}

/* 21.gracate */
.gracate {
    width: 100%;
    height: auto;
    box-sizing: border-box;
    padding: 30px 0;
}

    .gracate li {
        width: 100%;
    }

        .gracate li a {
            width: 100%;
            height: 54px;
            color: #005fa3;
            font-size: 16px;
            box-sizing: border-box;
            padding: 0 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            /*border-left: 5px solid var(--skell-color);*/
        }

        .gracate li > ul > li {
            padding-left: 33px
        }

.second-active {
    background-color: #fff;
}

    .second-active a {
        color: var(--skell-color) !important;
        background-color: #fff !important;
        border-left: 5px solid #fff !important;
    }

.gracate .gra-txt {
    width: calc(100% - 20px);
    display: flex;
    align-items: center;
}

    .gracate .gra-txt img {
        width: 18px;
        height: 16px;
        margin-right: 15px;
        vertical-align: middle;
        margin-bottom: 2px;
        filter: invert(1);
    }

.gracate .gra-row {
    width: 13px;
    height: 13px;
    vertical-align: middle;
    cursor: pointer;
    transition: transform 0.5s;
    -moz-transition: -moz-transform 0.5s;
    -moz-transition: -moz-transform 0.5s;
    -o-transition: -o-transform 0.5s;
    -ms-transition: -ms-transform 0.5s;
    margin-top:-15px;
}


    .gracate .gra-row img {
        width: auto;
        height: auto;
        filter: invert(1);
    }

.gracate .one .gra-row.active img {
    filter:none;
    transform-origin: center center;
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transition: transform 0.5s;
    -moz-transition: -moz-transform 0.5s;
    -moz-transition: -moz-transform 0.5s;
    -o-transition: -o-transform 0.5s;
    -ms-transition: -ms-transform 0.5s;
}

.gracate .two li a span {
    padding-left: 32px;
}

.gracate .one.active,
.gracate .two li.active a {
    /*border-left: 5px solid #ffa835;*/
    color: #fff;
    background-color: #005fa3;
    /*background: linear-gradient( 270deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 150.05% );*/
}

    .gracate .one.active img{
        filter:none;
    }

    @media (max-width: 1400px) {
        .gracate li a {
        padding: 0 20px;
    }
}

/* 22.down-tables */
.down-table {
    width: 100%;
    height: auto;
    overflow: hidden;
}

.down-tabs,
.down-list {
    width: 100%;
}

.down-tabs {
    color: var(--skell-color);
    background-color: #e5eff6;
}

    .down-tabs li span {
        font-size: 18px !important;
    }

    .down-tabs li,
    .down-list li {
        width: 100%;
        height: 60px;
        line-height: 60px;
        display: flex;
        justify-content: space-between;
    }

        .down-tabs li span,
        .down-list li span {
            display: block;
            width: 25%;
            height: 100%;
            box-sizing: border-box;
            padding: 0 5px;
            text-align: center;
            font-size: 16px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .down-list li:nth-child(odd) {
            background-color: #ffffff;
        }

        .down-list li:nth-child(even) {
            background-color: #e5eff6;
        }

        .down-list li span:last-child img {
            width: 20px;
            height: 20px;
            cursor: pointer;
        }

/* 23.bill */
.bill li {
    width: calc(50% - 5px);
    height: auto;
    border-radius: 10px;
    overflow: hidden;
    font-size: 14px;
}

    .bill li:not(:nth-child(2n)) {
        margin-right: 10px;
    }

    .bill li:nth-child(n + 3) {
        margin-top: 20px;
    }

    .bill li .bill-tp {
        /*color: #ffffff;
        background-color: var(--skell-color);*/
        color: var(--skell-color);
        background-color: #e5eff6;
        box-sizing: border-box;
        padding: 12px 12px;
        font-size: 13px;
    }

        .bill li .bill-tp span {
            display: block;
            width: 50%;
            box-sizing: border-box;
            padding: 0 5px;
        }

    .bill li .bill-bm {
        background-color: #ffffff;
        box-sizing: border-box;
        padding: 20px 17px;
    }

        .bill li .bill-bm span {
            display: block;
            width: 32%;
            box-sizing: border-box;
            padding: 0 5px;
            font-size: 14px;
        }

            .bill li .bill-bm span:not(:nth-child(3n)) {
                margin-right: 1%;
            }

            .bill li .bill-bm span:nth-child(n + 4) {
                margin-top: 10px;
            }

            .bill li .bill-bm span:last-child {
                width: 100%;
            }

            .bill li .bill-bm span:nth-last-child(2) {
                width: 50%;
            }

            .bill li .bill-bm span:last-child i {
                color: #e41515;
                font-weight: bold;
            }

@media (max-width: 1400px) {
    .bill li {
        width: 100%;
    }

        .bill li:not(:nth-child(2n)) {
            margin-right: 0;
        }

        .bill li:nth-child(n + 2) {
            margin-top: 10px;
        }
}

/* 24.my-exp */
.my-exp li {
    width: calc((100% / 3));
    text-align: left;
    position: relative;
    box-sizing: border-box;
    padding: 7px 40px;
    /*background-color: #fbfdfe;*/
    background-color: #e5eff6;
    color: #005fa3;
    height: 70px;
    text-align: center;
}

.my-exp span {
    font-size: 24px;
    line-height: 24px;
    font-weight: bold;
}

    .my-exp span i {
        font-size: 18px;
        vertical-align: middle;
        margin-left: 5px;
    }

.my-exp p {
    font-size: 16px;
    margin-bottom: 4px;
}

@media (max-width: 1400px) {
    /* .my-exp li {
        padding: 30px 30px;
    }*/

    .my-exp li {
        width: calc((100% / 3) - 12px);
    }
}

/* 25.my-data */
.my-data .lf,
.my-data .rg {
    width: 60%;
}

.my-tx {
    width: 90px;
    height: 90px;
    box-sizing: border-box;
    border: 2px solid var(--skell-color);
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto;
}

    .my-tx img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

@media (max-width: 1400px) {
    .my-data.lex-db {
        flex-direction: column;
    }

    .my-data .lf,
    .my-data .rg {
        width: 60%;
    }

    .my-data .rg {
        margin-top: 50px;
    }
}

/* 26.pwd */
.pwd li {
    width: 100%;
    height: auto;
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

    .pwd li:first-child {
        margin-top: 0;
    }

    .pwd li.pwd-mit {
        margin-top: 20px;
    }

    .pwd li span {
        width: 100px;
        text-align: right;
    }

    .pwd li .item {
        width: calc(100% - 140px);
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        overflow: hidden;
    }

    .pwd li .btn_update {
        position: absolute;
        display: block;
        width: 80px;
        text-align: center;
        /* height: 42px; */
        background: #005fa3;
        font-size: 14px;
        line-height: 42px;
        color: #fff;
        border: 1px solid #e5eff6;
        border-radius: 5px;
        /* margin-left: 10px; */
        top: 0;
        right: -90px;
    }

        .pwd li .btn_update:hover {
            background: #fff;
            color: #005fa3;
        }

        .pwd li input {
            width: 100%;
            height: 42px;
            border: 2px solid #f2f2f2;
            padding: 0 15px;
            border-radius: 5px;
            font: 1
        }

.pwd .pwd-mit em {
    display: block;
    width: 55%;
    height: 45px;
    line-height: 43px;
    text-align: center;
    color: #ffffff;
    background-color: #005fa3;
    border: 1px solid #005fa3;
    cursor: pointer;
    border-radius: 10px;
    margin-left:60px;
}

    .pwd .pwd-mit em:hover {
        color: #005fa3;
        background-color: #ffffff;
    }

.pwd li input[type="radio"] {
    width: 13px;
    height: 13px;
    margin-bottom: 5px;
    margin-right: 5px;
    padding: 0;
}

.pwd li .item-sex {
    box-sizing: border-box;
    justify-content: space-evenly;
}

.pwd .item-sex em {
    display: inline-block;
}

    .pwd .item-sex em:first-child {
        margin-right: 30px;
    }

.pwd li .item-sex em label {
    font-size: 16px;
    font-weight: normal;
    color: #666666;
}

.pwd input::-webkit-input-placeholder,
.pwd textarea::-webkit-input-placeholder {
    color: #666666;
}

.pwd input:-moz-placeholder,
.pwd textarea:-moz-placeholder {
    color: #666666;
}

.pwd input::-moz-placeholder,
.pwd textarea::-moz-placeholder {
    color: #666666;
}

.pwd input:-ms-input-placeholder,
.pwd textarea:-ms-input-placeholder {
    color: #666666;
}

/* 27.step */
.step-tabs {
    box-sizing: border-box;
}

    .step-tabs li {
        width: calc((100% / 3) - 14px);
        text-align: center;
        box-sizing: border-box;
        background-color: var(--skell-color1f);
        border: 2px solid var(--skell-color1f);
        color: #ffffff;
        font-size: 20px;
        padding: 5px 5px;
        overflow: hidden;
        cursor: pointer;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        -o-transition: all 0.5s;
        -ms-transition: all 0.5s;
        transition: all 0.5s;
    }

        .step-tabs li:not(:nth-child(3n)) {
            margin-right: 21px;
        }

        .step-tabs li:nth-child(n + 4) {
            margin-top: 21px;
        }

        .step-tabs li:hover {
            color: var(--skell-color1f);
            background-color: #ffffff;
        }

.step li{
    width: calc((100% / 3) - 14px);
    overflow: hidden;
    cursor: pointer;
}

    .step li:not(:nth-child(3n)) {
        margin-right: 21px;
    }

    .step li:nth-child(n + 4) {
        margin-top: 21px;
    }

    .step li img {
        width: 100%;
        height: auto;
    }

    .step li:hover img {
        transform: scale(1.04);
    }

@media (max-width: 1400px) {
    .step-tabs li {
        width: calc((100% / 3) - 10px);
    }

        .step-tabs li:not(:nth-child(3n)) {
            margin-right: 15px;
        }

        .step-tabs li:nth-child(n + 4) {
            margin-top: 15px;
        }

    .step-tabs li {
        font-size: 14px;
    }

    .step li {
        width: calc((100% / 3) - 10px);
    }

        .step li:not(:nth-child(3n)) {
            margin-right: 15px;
        }

        .step li:nth-child(n + 4) {
            margin-top: 15px;
        }
}


/* 28.tend */

.xz-thul {
    display:flex;
    justify-content:space-between;
 }
.tend li {
    width: calc((100% / 3) - 60px);
    border-radius: 60px;
    overflow: hidden;
    box-sizing: border-box;
    padding: 40px 40px 40px 40px;
    background-color: #deebf7;
    text-align: center;
}

    .tend li:first-child {
        background-color: #fbe5d6;
        text-align: left
    }
    .tend li:nth-child(2) {
        background-color: #E2F0D9;
      
    }
/*    .tend li:nth-child(2)
    .tend li:not(:nth-child(3n)) {
        margin-right: 90px;
    }

    .tend li:nth-child(n + 4) {
        margin-top: 90px;
    }*/
.htq-titae {
    font-size: 20px;
    color: #1F4E79;
    padding-top:20px
}


.tend li h2 {
    font-size: 46px;
    color: #2E75B6;
    padding-bottom: 20px;
    text-align: center
}
    .tend li:first-child h2 {
        color: #ED7D31
    }

    .tend li:nth-child(2) h2 {
        color: #548235
    }

    .tend li p {
        font-size: 18px;
        line-height: 34px;
    }

    .tend li:first-child p{
        display:flex;
    }
      .tend li:first-child p .sz{
          display:inline-block;
          width:20px
      }
        .tend li:first-child p .wz {
            display: inline-block;
            width:calc(100% - 20px)
        }

    .tend li p a {
        text-decoration: underline;
    }

            .tend li p a:hover {
                color: var(--skell-color5a);
            }

.tend-det {
    width: 320px;
    height: auto;
    overflow: hidden;
    margin: 0 auto;
    text-align: center;
    background-color: var(--skell-color4d);
    border-radius: 15px;
}

    .tend-det a {
        color: #ffffff;
        display: block;
        width: 100%;
        font-size: 20px;
        box-sizing: border-box;
        padding: 15px 10px;
    }

        .tend-det a:hover {
            text-decoration: underline;
        }
.cth-det {
    margin-top: 40px
}

    .cth-det a {
        font-size: 24px
    }
        .cth-det a:hover {
            text-decoration: none;
        }

       
        .cth-ul {
            margin-top: 40px;
            margin-bottom: 40px
        }
    .cth-ul li{
        padding:10px
    }
    .cth-ul li .pic {
        overflow: hidden;
        box-shadow: 0 2px 8px 2px rgba(198, 201, 208, 0.5);
        height:320px
    }
    .cth-ul li img {
     
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
        .cth-ul li a {
            display: block;
            width: 320px;
            height: auto;
            overflow: hidden;
            margin: 20px auto 0;
            text-align: center;
            background-color: #5B9BD5;
            border-radius: 15px;
            padding: 15px 0;
            font-size: 20px;
            color: #fff
        }


       

        @media (max-width: 1400px) {
            .tend li {
        width: calc((100% / 3) - 80px);
        padding: 30px 30px;
    }

        .tend li h2 {
            font-size: 36px;
        }

        .tend li p {
            font-size: 16px;
            line-height: 32px;
        }

    .tend-det {
        width: 280px;
    }

        .tend-det a {
            padding: 17px 20px;
        }
}

/* 29.need */
.need-box {
    box-sizing: border-box;
    padding: 50px 30px;
}

.need.lex {
    justify-content: space-between;
}

.need li {
    width: 100%;
    height: auto;
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

    .need li.nd48 {
        width: 48%;
    }

    .need li.nd10 {
        width: 100%;
    }

    .need li:nth-child(1),
    .need li:nth-child(2) {
        margin-top: 0;
    }

    .need li .nd-tips {
        width: 110px;
        text-align: right;
        font-size: 16px;
    }

    .need li.ndem .nd-tips {
        width: 318px;
    }

    .need li .item {
        width: calc(100% - 130px);
        height: 42px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        overflow: hidden;
        border: 2px solid #929293;
        padding: 0 15px;
        border-radius: 5px;
        background-color: #ffffff;
    }

    .need li.ndem .item-wh {
        width: calc(100% - 350px);
    }

    .need li .item10 {
        width: 100%;
    }

    .need li .item i {
        display: block;
        font-size: 14px;
    }

    .need li input,
    .need li select {
        flex: 1;
        box-sizing: border-box;
        font-size: 14px;
    }

.need .inprg input {
    text-align: right;
}

.need li select,
.need li select option[disabled] {
    color: #cccccc;
}

    .need li select option {
        color: #000000;
    }

.need li input[type="radio"] {
    width: 13px;
    height: 13px;
    margin-bottom: 5px;
    margin-right: 5px;
    padding: 0;
}

.need li .item-wh span label {
    font-size: 16px;
    font-weight: normal;
    color: #000000;
}

    .need li .item-wh span label s {
        color: #cccccc;
    }

/*.need li .item-wh span:first-child {
    margin-right: 15px;
}*/

.need li .item-file {
    width: calc(100% - 130px);
    display: flex;
    justify-content: space-between;
}

    .need li .item-file span {
        display: block;
        width: 45%;
    }

.need li .fl-desc {
    font-size: 14px;
    line-height: 24px;
    color: #4b4b4b;
}

.need li .fl-dw a {
    display: block;
    /*text-decoration: underline;*/
    color: var(--skell-color4d);
    font-size: 16px;
    width: 180px;
    height: 48px;
    border-radius: 5px;
    text-align: center;
    border: 2px solid #919293;
    background-color: #ffffff;
    line-height: 48px;
}

.need li .fl-icon {
    width: 180px;
    height: 48px;
    /*overflow: hidden;*/
    position: relative;
    border-radius: 5px;
    text-align: center;
    border: 2px solid #919293;
    background-color: #ffffff;
}

    .need li .fl-icon input {
        width: 100%;
        height: 100%;
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
    }

.need li .fl-icon-txt {
    width: 100%;
    height: 100%;
    line-height: 44px;
}

    .need li .fl-icon-txt img {
        width: 18px;
        height: 18px;
        margin-right: 5px;
        margin-bottom: 2px;
    }

    .need li .fl-icon-txt s {
        font-size: 16px;
        color: var(--skell-color4d);
    }

.need input::-webkit-input-placeholder,
.need textarea::-webkit-input-placeholder {
    color: #cccccc;
}

.need input:-moz-placeholder,
.need textarea:-moz-placeholder {
    color: #cccccc;
}

.need input::-moz-placeholder,
.need textarea::-moz-placeholder {
    color: #cccccc;
}

.need input:-ms-input-placeholder,
.need textarea:-ms-input-placeholder {
    color: #cccccc;
}

@media (max-width: 1400px) {
    .need-box {
        padding: 40px 20px;
    }
}

.me-sub {
    width: 100%;
    box-sizing: border-box;
    padding: 20px 40px;
    /* padding-left: 40px;
    padding-bottom: 20px;*/
    border-bottom: 1px solid #f3f3f3;
    font-size: 18px;
    color: var(--skell-color);
    background-color: #e5eff6;
    /*   color: #fff;
    background-color: #005fa3;*/
}


.me-bill {
    width: 100%;
    height: auto;
    overflow: hidden;
    padding: 23px 0;
}

    .me-bill ul {
        width: 75%;
        height: auto;
        margin: 0 auto;
    }

    .me-bill .btns {
        width: 100%;
        height: auto;
        color: #fff;
        text-align: center;
        margin: 32px 0;
        cursor: pointer;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
        -webkit-user-select: none;
        -moz-user-focus: none;
        -moz-user-select: none;
        user-select: none;
    }

        .me-bill .btns a:nth-child(1) {
            margin-right: 32px;
        }

        .me-bill .btns .active {
            background-color: var(--skell-color);
            color: #fff;
        }

        .me-bill .btns a {
            display: inline-block;
            width: 72px;
            height: 34px;
            color: #fff;
            line-height: 34px;
            text-align: center;
            background-color: #888888;
            cursor: pointer;
            font-size: 16px;
            border-radius: 7px;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
            -webkit-user-select: none;
            -moz-user-focus: none;
            -moz-user-select: none;
            user-select: none;
        }

    .me-bill ul li {
        width: 100%;
        height: auto;
        box-sizing: border-box;
        background-color: #fff;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
    }

        .me-bill ul li label {
            display: inline-block;
            font-size: 18px;
            color: #333;
            font-weight: normal;
            width: 145px;
            height: 100%;
            line-height: 44px;
            text-align: right;
        }

            .me-bill ul li label span:nth-child(1) {
                color: #ff0000;
                font-size: 20px;
                margin-right: 5px px;
            }

        .me-bill ul li > input {
            width: calc(100% - 150px);
            height: 44px;
            color: #666666;
            font-size: 18px;
            box-sizing: border-box;
            padding: 0 15px;
            border: 1px solid #e6e6e6;
            border-radius: 7px;
        }

        .me-bill ul li textarea {
            padding: 7px 15px;
            height: 143px;
            width: calc(100% - 150px);
            color: #666666;
            font-size: 18px;
            box-sizing: border-box;
            border: 1px solid #e6e6e6;
            border-radius: 7px;
        }

        .me-bill ul li:not(:first-child) {
            margin-top: 20px;
        }

/*.search-keys-item{
    width:calc(100% - 90px);
}*/