:root {
    --them-color: #1e9fff;
}

/* @media screen  */
@media screen and (min-width: 600px) and (max-width: 899px) {
    body {
        margin: 0;
    }

    .trainingCourseOrder {
        /* display: flex;
        align-items: center;
        justify-content: center; */
        /* width: 100vw; */
        /* height: 100vh; */
        /* border: solid 1px red; */
    }

    .trainingCourseOrder .title {
        text-align: center;
        background: #FFF;
        height: 56px;
        line-height: 56px;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 800;
        font-size: 17px;
        color: #1F2024;
    }

    .trainingCourseOrder .infoContent {
        padding: 24px;
        background: #F2F2F2;
        /* border: solid 1px red; */
    }

    .trainingCourseOrder .infoContent .detailInfo ul {
        padding: 0px;
    }

    .trainingCourseOrder .infoContent .detailInfo ul li {
        line-height: 36px;
        list-style: none;
    }

    .trainingCourseOrder .infoContent .detailInfo ul li span {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.65);
    }

    .trainingCourseOrder .infoContent .detailInfo ul li span:nth-child(2) {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.9);
    }

    .trainingCourseOrder .infoContent .ListDiv {
        overflow-y: scroll;
        height: 82vh;
    }

    .trainingCourseOrder .footContent .item {
        padding-left: 24px;
        padding-right: 24px;
        height: 56px;
        display: flex;
        background: #FFFFFF;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        /* width: 100%; */
        line-height: 48px;
        margin: 0 auto;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        border-bottom: solid 1px #DDDDDD;
    }

    .trainingCourseOrder .returnIndex .retuButton {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 16px;
        color: #006FFD;
        vertical-align: top;
    }

    .infoContent .contentnav .rightcontent .infotitle {
        margin-bottom: 8px;
        background: #FFFFFF;
        padding: 16px;
        /* border: solid 1px red; */
    }

    .infoContent .contentnav .rightcontent .infotitle .nav-contorl {
        text-align: center;
    }

    .infoContent .contentnav .rightcontent .infoillustrate {

        background: #FFFFFF;
        height: 62px;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
        line-height: 20px;
        letter-spacing: 2px;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 550;
        font-size: 17px;
        color: #000000;
        /* border: solid 1px red; */
    }

    .infoContent .contentnav .rightcontent .trainingLevel {
        padding: 20px;
        background: #FFFFFF;
        /* border: solid 1px red; */
    }

    .infoContent .contentnav .rightcontent .trainingLevel .levelInfo ul {
        display: flex;
        padding-left: 0px;
    }

    .infoContent .contentnav .rightcontent .trainingLevel .levelInfo ul li {
        list-style: none;
        line-height: 26px;
    }

    .infoContent .contentnav .rightcontent .trainingLevel .levelInfo .boldinfo {
        width: 80px;
    }

    .infoContent .contentnav .rightcontent .trainingLevel .levelInfo .boldinfo span {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.65);
    }

    .infoContent .contentnav .rightcontent .trainingLevel .levelInfo .boldinfoList {
        /* display: flex; */
        width: calc(100vw - 136px);
        /* border: solid 1px red; */
    }

    .infoContent .contentnav .rightcontent .trainingLevel .levelInfo .boldinfoList span {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.9);
    }

    .infoContent .contentnav .rightcontent .trainingLevel .levelInfo .boldinfoList p {
        margin: 0px;
    }

    .hide-nav {
        animation-name: hidenav;
        animation-duration: 0.2s;
        height: auto !important;
        padding: 0px;
        overflow: inherit !important;
        min-height: 0px;
        display: block !important;
    }

    .trainingCourseOrder .infoContent .contentnav .leftimg img {
        width: 100%;
        height: 210px;
    }

    .footerListButton {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 14px;
        color: #0052D9;
        height: 48px;
        line-height: 48px;
        background: #FFFFFF;
        text-align: center;
    }

    .trainingCourseOrder .infoContent .detailInfo ul .listItem {
        padding: 12px 24px 12px 24px;
        background: #FFFFFF;
        margin-bottom: 10px;
        line-height: 30px;
    }


}

/* @media screen and (min-width: 414px)  and (max-width: 1024px) */
/* @media screen and (max-width: 1024px) */
@media screen and (max-width: 1024px) {
    body {
        margin: 0;
    }

    .trainingCourseOrder .title {
        text-align: center;
        background: #FFF;
        height: 56px;
        line-height: 56px;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 800;
        font-size: 17px;
        color: #1F2024;
    }

    .trainingCourseOrder .infoContent {
        background: #F2F2F2;
        /* border: solid 1px red; */
    }

    .trainingCourseOrder .infoContent .detailInfo ul {
        padding: 0px;
    }

    .trainingCourseOrder .infoContent .detailInfo ul li {
        line-height: 36px;
        list-style: none;
    }

    .trainingCourseOrder .infoContent .detailInfo ul li span {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.65);
    }

    .trainingCourseOrder .infoContent .detailInfo ul li span:nth-child(2) {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.9);
    }

    .trainingCourseOrder .infoContent .ListDiv {
        overflow-y: scroll;
        height: 82vh;
    }

    .trainingCourseOrder .footContent .item {
        padding-left: 24px;
        padding-right: 24px;
        height: 56px;
        display: flex;
        background: #FFFFFF;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        /* width: 100%; */
        line-height: 48px;
        margin: 0 auto;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        border-bottom: solid 1px #DDDDDD;
    }

    .trainingCourseOrder .returnIndex .retuButton {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 16px;
        color: #006FFD;
        vertical-align: top;
        line-height: 40px;
    }

    .infoContent .contentnav .rightcontent .infotitle {
        margin-bottom: 8px;
        background: #FFFFFF;
        padding: 16px;
        /* border: solid 1px red; */
    }

    .infoContent .contentnav .rightcontent .infotitle .nav-contorl {
        text-align: center;
    }

    .infoContent .contentnav .rightcontent .infoillustrate {

        background: #FFFFFF;
        height: 62px;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
        line-height: 20px;
        letter-spacing: 2px;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 550;
        font-size: 17px;
        color: #000000;
        /* border: solid 1px red; */
    }

    .infoContent .contentnav .rightcontent .trainingLevel {
        padding: 20px;
        background: #FFFFFF;
        /* border: solid 1px red; */
    }

    .infoContent .contentnav .rightcontent .trainingLevel .levelInfo ul {
        display: flex;
        padding-left: 0px;
    }

    .infoContent .contentnav .rightcontent .trainingLevel .levelInfo ul li {
        list-style: none;
        line-height: 26px;
    }

    .infoContent .contentnav .rightcontent .trainingLevel .levelInfo .boldinfo {
        width: 80px;
    }

    .infoContent .contentnav .rightcontent .trainingLevel .levelInfo .boldinfo span {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.65);
    }

    .infoContent .contentnav .rightcontent .trainingLevel .levelInfo .boldinfoList {
        /* display: flex; */
        width: calc(100vw - 136px);
        /* border: solid 1px red; */
    }

    .infoContent .contentnav .rightcontent .trainingLevel .levelInfo .boldinfoList span {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.9);
    }

    .infoContent .contentnav .rightcontent .trainingLevel .levelInfo .boldinfoList p {
        margin: 0px;
    }

    .hide-nav {
        animation-name: hidenav;
        animation-duration: 0.2s;
        height: auto !important;
        padding: 0px;
        overflow: inherit !important;
        min-height: 0px;
        display: block !important;
    }

    .trainingCourseOrder .infoContent .contentnav .leftimg img {
        width: 100%;
        height: 210px;
    }

    .footerListButton {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 14px;
        color: #0052D9;
        height: 48px;
        line-height: 48px;
        background: #FFFFFF;
        text-align: center;
    }

    .trainingCourseOrder .infoContent .detailInfo ul .listItem {
        padding: 12px 24px;
        background: #FFFFFF;
        line-height: 30px;
        border-bottom: solid 1px #DDDDDD;
        position: relative;
    }

    .trainingCourseOrder .infoContent .detailInfo ul .listItem a {
        display: inline-block;
        width: 100%;
    }

    .trainingCourseOrder .infoContent .detailInfo ul .listItem a,
    .trainingCourseOrder .infoContent .detailInfo ul .listItem a span {
        color: #007FEC;
    }

    .trainingCourseOrder .infoContent .detailInfo ul .listItem i {
        position: absolute;
        right: 10px;
        top: calc(50% - 15px);
    }

    /* 邀请函开始 */
    .footerListclassification {
        padding-top: 0;
        width: 100%;
        /* height: 48px; */
        position: fixed;
        z-index: 2;
        bottom: 2px;
    }

    .footerListclassification>footer {
        border-top: 1px solid #E7E7E7;
        font-size: 18px;
        padding-top: 4px;
        width: 100%;
        height: 48px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: justify;
        -moz-box-pack: justify;
        -ms-flex-pack: justify;
        -webkit-box-align: center;
        -moz-box-align: justify;
        -ms-flex-align: center;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        -webkit-align-content: center;
        -ms-flex-line-pack: center;
        align-content: center;
        -webkit-align-items: center;
        align-items: center;
        background-color: #F7F7FA;
    }

    .footerListclassification>footer .home_hover {
        text-align: center;
        width: 33%;
        background: url(http://resource.caidao8.com/style/cmacedu/images/phony.png) no-repeat center 0px;
        background-size: 22px;
        /* color: #007AFF; */
    }

    .footerListclassification>footer .home {
        text-align: center;
        width: 33%;
        background: url(http://resource.caidao8.com/style/cmacedu/images/homeicon1.png) no-repeat center 0px;
        background-size: 22px;
        color: rgba(0, 0, 0, 0.45);
    }

    .footerListclassification>footer p {
        display: block;
        text-align: center;
        margin: 0;
        padding: 0;
        font-size: 13px;
        line-height: 22px;
    }

    .footerListclassification>footer .signUp {
        text-align: center;
        width: 33%;
        background: url(http://resource.caidao8.com/style/cmacedu/images/phonsignup.png) no-repeat center 0px;
        background-size: 22px;
        color: rgba(0, 0, 0, 0.45);
    }

    .footerListclassification>footer .signUp_hover {
        text-align: center;
        width: 33%;
        background: url(http://resource.caidao8.com/style/cmacedu/images/phonsignupico1.png) no-repeat center 0px;
        background-size: 22px;
        /* color: rgba(0,0,0,0.45); */
    }

    .footerListclassification>footer .dataDownload {
        text-align: center;
        width: 33%;
        background: url(http://resource.caidao8.com/style/cmacedu/images/phonedow.png) no-repeat center 0px;
        background-size: 22px;
        color: rgba(0, 0, 0, 0.45);
    }

    .dataDownload_hover {
        text-align: center;
        width: 33%;
        background: url(http://resource.caidao8.com/style/cmacedu/images/downico1.png) no-repeat center 0px;
        background-size: 22px;
    }

    #pdf-viewer .pdf-page-canvas {
        width: 100%;
    }

    .pdf-viewer {
        height: calc(100vh - 114px);
        overflow-y: scroll;
    }

    .infoContent .contentnav {
        height: calc(100vh - 88px);
        overflow-y: scroll;
    }

    .dataDownloadTable tr {
        line-height: 48px;
        border-bottom: solid 1px #EEEEEE;
    }

    .dataDownloadTable tr td {
        text-align: center;
    }

    .dataDownloadTable tr td .downlBtn {
        color: #0052D9;
    }

    .availableInfoList {
        margin: 0 auto;
        width: 84%;
        padding: 20px;
        background: #FFFFFF;
        border-radius: 8px 8px 8px 8px;
        position: relative;
        overflow: hidden;
        /* border: solid 1px red; */
    }

    .availableInfoList ul li {
        line-height: 30px;
    }

    .availableInfoList ul li .field {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.65);
    }

    .applicationform {
        margin: 10px auto 50px auto;
        width: 100%;
        /* background: #FFFFFF;
        border: solid 1px red; */
    }

    .applicationform .blockboot {
        width: 86%;
        margin: auto;

    }

    .applicationform .layui-form .blockboot {
        border-bottom: solid 1px #DDDDDD;
    }

    .applicationform .layui-form .blockboot .xm-select-demo>xm-select {
        border-color: #ffffff00;
        margin-right: 10px;
    }

    .applicationform .layui-form .blockboot .xm-select-demo>xm-select .xm-label-block {
        /* background-color: #006FFD !important; */
    }

    .applicationform .layui-form .blockboot .xm-select-demo>xm-select .xm-body .scroll-body .xm-option i {
        border-color: #006FFD !important;

    }

    .show-icon .xm-iconfont {
        color: #1e80ff;
    }

    .applicationform .layui-form .blockboot .layui-input {
        border-color: #ffffff00;
        padding-left: 0px;
    }

    .applicationform .layui-form .blockboot .layui-form-label {
        padding: 9px 9px;
        text-align: left;
        float: none;
        width: 100%;
        overflow: hidden;
        box-sizing: border-box;
    }

    .applicationform .layui-form .blockboot .layui-input-block {
        margin-right: 10px;
        margin-left: 10px;
    }

    .applicationform .layui-form .blockboot .xm-select-demo>xm-select {
        margin-right: 0;
    }

    .applicationform xm-select>.xm-label.single-row {
        position: static;
    }

    .applicationform xm-select>.xm-label .scroll .label-content {
        display: block;
    }

    .applicationform .blockboot #search_input_output {
        display: block !important;
        width: 100%;
        background: #0052D9;
        margin-bottom: 10px;
    }

    .applicationform .blockboot #registerAndPayDirectly {
        width: 100%;
        display: block;
        height: 38px;
        line-height: 38px;
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #0052D9;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 16px;
        color: #0052D9;
    }

    .applicationform .layui-form .requiredTag {
        color: #E34D59;
    }

    #registrationAndPaymentPop {
        padding: 10px;
    }

    #registrationAndPaymentPop ul li {
        line-height: 30px;
    }

    #phoneReset {
        display: none;
    }

    #search_input_output {
        width: 100%;
    }

    .szpxmain {
        width: 100%;
        /* border: solid 1px red; */
    }

    .szpxcenter {
        width: 100%;
        background-color: #eee;
        padding-top: 48px;
        box-sizing: border-box;
        user-select: none;
    }

    .searchform {
        width: 100%;
        box-sizing: border-box;
        margin-bottom: 0;
        /* margin: auto 13px; */
        /* border: solid 1px red; */
    }

    .searchform .layui-form-item {
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
        margin-bottom: 15px;
    }

    .searchform .layui-form-item:last-child {
        background-color: #eee;
        padding-top: 10px;
    }

    .searchform .layui-input:focus, .searchform .layui-textarea:focus {
        border-color: var(--them-color) !important;
    }

    .layui-form-select dl dd.layui-this {
        color: var(--them-color);
    }

    .phoneNone {
        display: none;
    }

    .statusPhonePosition {
        position: absolute;
        top: 70px;
    }

    .searchform .header-form {
        position: relative;
    }

    .phoneSearchBtn {
        margin-top: 46px;
    }

    .szpxitem {
        width: calc(100% - 40px);
        margin: 20px;
        border-radius: 8px 8px 0 0;
        background-color: #ffffff;
    }

    .szpxitem .szpxitem-activityThemeArea img {
        width: 100%;
        height: 50.7vw;
        border-radius: 8px 8px 0 0;
    }

    .phoneTitle {
        position: fixed;
        top: 0px;
        left: 0px;
        font-weight: 500;
        font-size: 17px;
        color: #1F2024;
        font-weight: bold;
        height: 56px;
        line-height: 56px;
        text-align: center;
        background-color: white;
        display: block !important;
        width: 100%;
        z-index: 100;
    }

    /* 报名成功通知单开始 */
    .InTheTeacherLibrary .contentM {
        width: 97% !important;
        padding-top: 0;
    }

    .backlevel {
        display: none;
        position: fixed;
        top: 0;
        z-index: 100;
    }

    .noticeInfo ul {
        display: unset;
    }

    .noticeInfo ul li {
        width: 100% !important;
        line-height: 24px;
        padding: 10px 0;
        /* border: solid 1px red; */
    }

    .successfulNotification {
        position: relative;
        overflow: hidden;
    }

    .successfulNotification img {
        width: 100%;
    }

    .watermark {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        opacity: 0.1;
        background-image: url(../img/vector.png);
        background-position: -63px -37px;
    }

    .successfulNotification .qcode {
        padding-left: unset;
        margin: 0 auto;
        width: 200px;
        text-align: center;
    }

    .InTheTeacherLibrary {
        padding-bottom: 0;
    }

    .qcode .textquner {
        margin: 0;
        line-height: 40px;
    }

    .bottomContent .saveimgBtn {
        width: 100%;
        text-align: center;
        left: 0px;
        bottom: 0px;
        position: fixed;
        height: 44px;
        margin: 0px;
    }

    .phoneSuccessful {
        width: 40px;
        margin-bottom: 10px;
    }

    .szpxmain .szpxcenter .searchform .layui-form-item .blockboot .layui-input-block {
        margin-right: 10px;
    }

    .infobody {
        width: 100%;
        /* border: solid 1px red; */
    }

    /* pc端兼容移动端详情页开始 */
    nav {
        display: none !important;
    }

    .student_end .student_top_nav {
        display: none;
    }

    .szpxDetailsContent .contentnav {
        display: block;
        /* border: solid 1px red; */
    }

    .returntit {
        padding: 20px;
        margin-top: 0;
        margin-bottom: 0;
    }

    .returntit a {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 16px;
        color: #006FFD;
    }

    .student_end {
        min-width: 100% !important;
    }

    .szpxDetailsContent .contentnav .leftimg {
        margin-right: 0px;
    }

    .szpxDetailsContent .contentnav .leftimg img {
        width: 100%;
        height: auto;
    }

    .contentnav .rightcontent .infotitle {
        margin-bottom: 8px;
        background: #FFFFFF;
        padding: 6px;
        /* border: solid 1px red; */
    }

    .contentnav .rightcontent .infotitle h2 {
        margin-top: 2px;
        font-size: 17px;
        color: #000000;
        font-weight: 550;
    }

    .trainingTheme .boldinfo {
        height: 20px;
        padding-left: 10px;
        padding-right: 10px;
        margin-right: 10px;
        line-height: 20px;
        display: inline-block;
        background: rgba(0, 127, 236, 0.1);
        border-radius: 1px 1px 1px 1px;
        font-weight: 400;
        font-size: 12px;
        color: #007FEC;
    }

    .szpxDetailsContent .contentnav .rightcontent .cultivate {
        display: block;
    }

    .contentnav .rightcontent .infoillustrate {
        background: #FFFFFF;
        height: 62px;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
        line-height: 20px;
        letter-spacing: 2px;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 550;
        font-size: 17px;
        color: #000000;
        /* border: solid 1px red; */
    }

    .szpxDetailsContent .contentnav .rightcontent .infotitle .infoillustrate {
        background: #FFFFFF;
        height: 62px;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
        line-height: 20px;
        letter-spacing: 2px;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 500;
        font-size: 16px;
        color: #000000;
    }

    .nav-contorl {
        margin-top: 0px;
        text-align: center;
    }

    .szpxDetailsContent .contentMain {
        display: block;
    }

    .szpxDetailsContent .contentMain .trainLeft {
        width: 100%;
        min-width: 100%;
        height: auto;
        padding-top: 4px
    }

    .szpxDetailsContent .contentMain .trainLeft .layui-tab {
        height: auto;
    }

    .szpxDetailsContent .contentMain .trainRight {
        width: 100%;
    }

    .applicationform .layui-form .blockboot {
        width: auto;
    }

    .header-form {
        display: block;
    }

    body.student_end {
        min-width: 100% !important;
    }

    .flow-demo {
        width: 100%;
    }

    .flow-data {
        height: calc(100vh - 48px);
        overflow-y: auto;
    }

    .flow-demo .layui-flow-more {
        margin: 0;
        padding: 10px 0;
    }

    .szpxitem-activityThemeArea {
        border-radius: 8px 8px 0 0;
    }

    .szpxitem-activityThemeArea .img-box {
        position: relative;
    }

    .szpxitem-activityThemeArea .img-box .isNocharge {
        top: 0px;
        right: 0px;
        position: absolute;
    }

    .theme-box {
        padding: 5px 10px;
    }

    .theme-box .tag {
        position: static;
        color: #FF3B30;
        border: 1px solid #FF3B30;
        background-color: #fff;
        display: inline-block;
        padding: 0 5px;
        font-size: 12px;
        border-radius: 2px;
    }

    .theme-box .theme-type {
        font-weight: 600;
        font-size: 16px;
        color: #333333;
        font-style: normal;
        text-transform: none;
        line-height: 24px;
    }

    .TrainingLevel, .discountType {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .TrainingLevel, .discountType, .footerset {
        padding: 0 10px;
    }

    .TrainingLevel .levelInfo {
        line-height: 30px;
        display: flex;
        align-items: center;
    }

    .TrainingLevel .levelInfo .item-title,
    .discountType .item-title {
        text-align: right;
        display: inline-block;
        width: 90px;
    }

    .TrainingLevel .levelInfo span {
        height: 20px;
        padding-left: 4px;
        padding-right: 4px;
        /* margin-right: 10px; */
        line-height: 20px;
        display: inline-block;
        background: rgba(0, 127, 236, 0.1);
        border-radius: 1px 1px 1px 1px;
        font-weight: 400;
        font-size: 0.855em;
        color: #007FEC;
        margin: 0 5px;
    }

    .footerset {
        display: flex;
        align-items: center;
        height: 60px;
        justify-content: space-between;
    }

    .footerset .proceed {
        margin-left: 10px;
        font-size: 1em;
        padding: 2px 5px;
        border-radius: 3px;
    }

    .footerset .proceed.ready {
        color: #FF3B30;
        border: 1px solid #FF3B30;
    }

    .footerset .proceed.ing {
        color: #34C759;
        border: 1px solid #34C759;
    }

    .footerset .proceed.end {
        color: #999999;
        border: 1px solid #999999;
    }

    .item-button {
        background: #FF3B30;
        border-radius: 4px;
        border: 0;
        box-shadow: none;
        padding: 8px 16px;
        color: #ffffff;
    }

    .search-bar {
        height: 48px;
        line-height: 48px;
        background-color: #FFFFFF;
        text-align: right;
        padding: 0 2em;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 100;
        box-sizing: border-box;
    }

    .search-item {
        line-height: 40px;
        box-sizing: border-box;
        border-bottom: 1px solid #E7E7E7;
        display: flex;
        font-size: 16px;
        color: #333333;
        width: 100%;
    }

    .search-item:active,
    .bottom-list-box>ul>li:active {
        background-color: #E7E7E7;
    }

    .search-item-title {
        display: inline-block;
        width: 140px;
        text-align: right;
    }

    .search-item-content {
        display: inline-block;
        width: calc(100% - 176px);
        margin: 0 10px;
        color: #535353;
        text-align: right;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        border: 0;
        /* border-bottom: 1px solid #E7E7E7; */
    }

    .bottom-list-box {
        max-height: 40vh;
        overflow: auto;
        margin-bottom: 2em;
    }

    .bottom-list-box>ul>li {
        padding: 0 2em;
        line-height: 32px;
        min-height: 48px;
        text-align: center;
        border-bottom: 1px solid #E7E7E7;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .bottom-list-box>ul>li.active {
        background-color: #007FEC;
        color: #FFFFFF;
    }

    #bottom_list_search [name=bottomListSearch] {
        border: 1px solid #E7E7E7;
    }

    #bottom_list_search [name=bottomListSearch]:focus {
        border-color: #007FEC !important;
    }

    .active-static {
        text-align: center;
        position: absolute;
        top: 10px;
        right: -22px;
        transform: rotate(45deg);
        padding: 0 20px;
        font-size: 12;
    }

    .active-static-1 {
        background-color: #ff0000;
        color: #FFFFFF;
    }

    .active-static-2 {
        background-color: #818181;
        color: #FFFFFF;
    }

    .nameandphone {
        color: #000000;
        font-size: 16px;
    }

    .noticeInfo ul li .widthName {
        color: #666666;
    }

    .phone-success {
        font-size: 40px;
        color: #07c160;
    }

    .list-title {
        line-height: 40px;
        padding: 0 20px;
        font-size: 16px;
        font-weight: 600;
    }

    .ChoosePaymentPlatform {
        padding: 0;
        border: 0;
    }

    .PayableAmount {
        font-weight: 600;
        text-align: left;
    }

    .OnlineRecharge ul li {
        line-height: 40px;
    }

    .Platformcheck ul {
        justify-content: space-around;
    }

    .Platformcheck ul li {
        display: flex;
        align-items: center;
        justify-content: space-around;
        height: 40px;
        width: 40%;
        max-width: 200px;
        border-radius: 3px;
        border: 0;
        box-shadow: 0 0 2px #00000083;
    }

    .Platformcheck ul .activeblock {
        border: 0;
        box-shadow: 0 0 0px 2px #004dff;
    }

    .is-pay {
        text-align: center;
        color: #4b4b4b;
    }

    .pay-success {
        text-align: center;
        margin-top: 40px;
    }

    .pay-success a {
        display: inline-block;
        width: 160px;
        max-width: 100%;
        height: 40px;
        color: rgb(255, 255, 255);
        line-height: 40px;
        text-align: center;
        background-color: #007FEC;
    }

    .pat-tips {
        color: #007FEC;
        padding: 10px 0;
    }

    .notice-tips {
        position: relative;
    }

    .notice-tips-content {
        color: red;
        padding: 5px 10px;
        user-select: none;
        position: absolute;
        right: 0;
        line-height: 31px;
    }

    .mobile_back_button {
        position: sticky;
        top: 0;
        line-height: 40px;
        background-color: #fff;
        z-index: 999;
        border-bottom: 1px solid rgba(0, 0, 0, .1);
        padding: 0 10px;
    }

    .undefinedMsg {
        padding: 0 20px;
    }

}