body {
    font-family: Roboto, Roboto;
}

p {
    margin: 0;
    padding: 0;
}

.account {
    background-image: url(../images/price/price_bg.png);
    background-size: 100%;
    background-repeat: no-repeat;
    padding-top: 136px;
    padding-bottom: 105px;
    background-color: #F8FAFF;
    background-size: cover;
    background-position: top center;
}

.tab {
    width: 1200px;
    height: 64px;
    background: rgba(230, 234, 243, 0.9);
    border-radius: 33px;
    border: 1px solid #EBEDF2;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 8px;
    box-sizing: border-box;
}

.tabItem {
    width: 288px;
    height: 48px;
    border-radius: 27px;
    line-height: 48px;
    text-align: center;
    font-family: ArialMT;
    font-size: 16px;
    color: #212121;
    cursor: pointer;
}

.tabItem:hover {
    background: #F2F4FC;
}

.tabItem.active {
    background: #416FF4;
    color: #FFFFFF;
}

.accountModel {
    width: 1200px;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    margin-top: 40px;
}

.accountModel_left {
    width: 690px;
    float: left;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0px 9px 20px 0px rgba(153, 175, 224, 0.3);
    border-radius: 12px;
    padding: 20px;
    box-sizing: border-box;
}

.modelLeft_head {
    border-bottom: 1px solid rgba(230, 234, 243, 1);
    padding-bottom: 15px;
}

.modelLeft_headTitle {
    font-weight: bold;
    font-size: 20px;
    color: #222325;
}

.accountModel_right {
    float: right;
    width: 486px;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0px 9px 20px 0px rgba(153, 175, 224, 0.3);
    border-radius: 12px;
    border: 0px solid #979797;
    padding: 20px;
    box-sizing: border-box;
}

.modelRight_headTitle {
    padding: 3px 0 15px;
    font-weight: bold;
    font-size: 20px;
    color: #222325;
    border-bottom: 1px solid rgba(230, 234, 243, 1);
}

.modelLeft_form {
    margin-top: 24px;
    display: flex;
    justify-content: space-between;
}

.formItem {
    width: 309px;
}

.formItemTitle {
    height: 14px;
    font-weight: 400;
    font-size: 12px;
    color: #97A0C3;
    line-height: 14px;
    margin-bottom: 12px;
}

.formItemselect {
    position: relative;
}

.selectBox {
    width: 309px;
    height: 42px;
    background: #FAFCFE;
    border-radius: 10px;
    border: 1px solid #D2D5E1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px 0 12px;
    box-sizing: border-box;
    cursor: pointer;
    font-weight: 400;
    font-size: 16px;
    color: #3E4A71;
    position: relative;
}

.selectBox .select2-container--default .select2-selection--single {
    border: 0;
    width: 100%;
}

.selectBox .select2-container--default .select2-selection--single .select2-selection__arrow {
    display: none;
}

.selectBox input {
    width: 100%;
    height: 100%;
    border: 0;
}

.selectBox select {
    width: 100%;
    height: 100%;
    border: 0;
    outline: none;
}

.selectBox:hover {
    border: 1px solid #97A0C3;
}

.selectBox:hover .numActive {
    border-top: 1px solid #97A0C3;
    border-bottom: 1px solid #97A0C3;
}

.selectBox img {
    width: 18px;
    height: 18px;
}

.options {
    position: absolute;
    top: 54px;
    width: 309px;
    background: #FFFFFF;
    box-shadow: 0px 4px 6px 0px rgba(13, 24, 61, 0.16);
    border-radius: 10px;
    display: none;
    z-index: 2;
}

.optionItem {
    height: 42px;
    width: 100%;
    padding: 13px 17px;
    box-sizing: border-box;
}

.optionItem:first-child {
    border-radius: 10px 10px 0 0;
}

.optionItem:last-child {
    border-radius: 0 0 10px 10px;
}

.optionItem:hover {
    background: #F1F5FB;
    cursor: pointer;
}

.formText {
    height: 42px;
    font-weight: 400;
    font-size: 16px;
    color: #416FF4;
    cursor: pointer;
}

.numActive {
    width: 40px;
    height: 42px;
    background: #F1F5FB;
    border-radius: 0 10px 10px 0;
    border: 1px solid #D2D5E1;
    border-right: 0;
    box-sizing: border-box;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 0;
}

.numActive .jiantou {
    width: 13px;

}

.selectCont {
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
}

.selectCont+img {
    margin-right: 8px;
}

.selectCont input {
    width: 100%;
    height: 100%;
    border: 0;
    outline: none;
    font-weight: 400;
    font-size: 16px;
    color: #3E4A71;
}

.disabled {
    color: #BFC7E0;
}

.formItemBottom {
    font-weight: 400;
    font-size: 14px;
    color: #BFC7E0;
    margin-top: 8px;
}

.formItemBottom span {
    color: #416FF4;
    padding-left: 4px;
    text-decoration: underline;
}

.lang {
    width: 100%;
}

.lang .formItem,
.selectBox {
    width: 100%;
}

.moreForm {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.moreForm .formItemselect:nth-child(1) .selectBox,
.moreForm .formItemselect:nth-child(1) .options {
    width: 120px;
}

.moreForm .formItemselect:nth-child(2) .selectBox {
    width: 310px;
}

.moreForm .btn {
    width: 107px;
    height: 42px;
    background: #416FF4;
    border-radius: 8px;
    font-weight: 400;
    font-size: 16px;
    color: #FFFFFF;
    text-align: center;
    line-height: 42px;
    cursor: pointer;
}

.moreForm .btn:hover {
    background: #2756DE;
}

.textarea {
    height: 85px;
    background: #FAFCFE;
    border-radius: 10px;
    border: 1px solid #D2D5E1;
    margin-top: 24px;
    padding-left: 12px;
    box-sizing: border-box;
}

.error {
    margin-top: 32px;
}

.table {
    width: 100%;
    margin-top: 24px;
}

.tableDesc {
    font-weight: 400;
    font-size: 12px;
    color: #97A0C3;
    display: flex;
    margin-bottom: 12px;
}

.tableTitle:nth-child(1) {
    width: 150px;
    padding-left: 32px;
}

.tableItem {
    width: 100%;
    display: flex;
    padding: 18px 0;
    background: #FAFCFE;
    font-weight: 400;
    font-size: 16px;
    color: #3E4A71;
}

.tableItem:nth-child(2n-1) {
    background: #F1F5FB;
}

.tableItem div:nth-child(1) {
    width: 150px;
    padding-left: 32px;
}

.rightTable .tableTitle:nth-child(1) {
    width: 80px;
    padding-left: 0;
    text-align: center;
}

.rightTable .tableTitle:nth-child(2) {
    width: 218px;
}

.rightTable .tableTitle:nth-child(3) {
    text-align: center;
    width: 80px;
}

.rightTable .tableItem .one {
    width: 80px;
    text-align: center;
    padding: 0;
}

.rightTable .tableItem .two {
    width: 218px;
}

.rightTable .tableItem .three {
    width: 80px;
    text-align: center;
}

.rightTable .tableDesc {
    justify-content: space-between;
}

.rightTable .tableItem {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.usageCard {
    margin-top: 24px;
}

.cardItemTitle {
    width: 273px;
    height: 42px;
    background: linear-gradient(90deg, #D4E5FF 0%, #FFFFFF 100%);
    line-height: 42px;
    padding-left: 12px;
    border-left: 4px solid rgba(65, 111, 244, 1);
}

.cardItemBox {
    width: 100%;
    border: 2px dashed #D2D5E1;
    padding: 12px;
    box-sizing: border-box;
    margin-top: 12px;
}

.cardItemBoxCont {
    width: 100%;
    height: 100%;
    padding: 12px;
    box-sizing: border-box;
    background: #F1F5FB;
    font-weight: 400;
    font-size: 16px;
    color: #3E4A71;
    font-family: 'Roboto Regular' !important;
}

.cardItem+.cardItem {
    margin-top: 24px;
}

/* 第二部分 */
.passwordModel,
.apiDemoModel {
    width: 1200px;
    margin: 0 auto;
    margin-top: 40px;
    display: flex;
    justify-content: space-between;
    display: none;
}

.passwordModel_left {
    width: 402px;
    background: #FFFFFF;
    box-shadow: 0px 9px 20px 0px rgba(153, 175, 224, 0.3), 0px 2px 4px 0px rgba(28, 41, 90, 0.04);
    border-radius: 12px;
    height: 419px;
}

.passwordModel_left .modelLeft_head {
    padding-left: 24px;
    padding-top: 32px;
}

.languageItem {
    height: 56px;
    line-height: 56px;
    padding-left: 24px;
    font-weight: 400;
    font-size: 16px;
    color: #3E4A71;
    border-bottom: 1px solid #EAEDF7;
    cursor: pointer;
    border-left: 2px solid #EAEDF7;
}

.languageItem:hover {
    background: #F4FAFF;
}

.languageItem.active {
    border-left: 2px solid rgba(54, 154, 254, 1);
    background: #F4FAFF;
}

.passwordModel_right {
    width: 772px;
    background: #FFFFFF;
    box-shadow: 0px 9px 20px 0px rgba(153, 175, 224, 0.3);
    border-radius: 12px;
    margin-left: 25px;
    padding: 32px 24px 24px;
    box-sizing: border-box;
    border-bottom: 0;
}

.passwordModel_right .modelLeft_head {
    width: 161px;
    height: 42px;
    background: linear-gradient(90deg, #D4E5FF 0%, #FFFFFF 100%);
    border-left: 4px solid rgba(65, 111, 244, 1);
    padding-bottom: 0;
    line-height: 42px;
    padding-left: 12px;
}

.modelRight_cont {
    width: 724px;
    border: 2px dashed #D2D5E1;
    margin-top: 12px;
    padding: 12px;
    box-sizing: border-box;
}

.modelRight_body {
    width: 100%;
    height: 566px;
    padding: 24px;
    box-sizing: border-box;
    background: #F1F5FB;
    overflow-y: auto;
    font-family: 'Roboto Regular';
}

.modelRight_body .body_title {
    font-weight: 400;
    font-size: 16px;
    color: #3E4A71;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(206, 221, 230, 1);
}

.modelRight_cont .body_cont {
    font-weight: 400;
    font-size: 14px;
    color: #3E4A71;
    line-height: 24px;
    margin-top: 8px;
}

.modelRight_cont .body_cont span {
    font-family: "Roboto";
    font-weight: 400;
    font-size: 16px;
    color: #3E4A71;
    line-height: 24px;
    display: inline-block;
    width: 38px;
    margin-right: 12px;
    font-family: 'Roboto Regular';
}

/* 第三部分 */
.apiModel {
    width: 1200px;
    margin: 0 auto;
    margin-top: 40px;
    display: none;
    justify-content: space-between;
}

.apiModel_left {
    width: 690px;
    background: #FFFFFF;
    box-shadow: 0px 9px 20px 0px rgba(153, 175, 224, 0.3);
    border-radius: 12px;
    padding: 32px 24px 24px;
    box-sizing: border-box;
    height: 1019px;
}

.apiModel_right {
    width: 486px;
    background: #FFFFFF;
    box-shadow: 0px 9px 20px 0px rgba(153, 175, 224, 0.3);
    border-radius: 12px;
    padding: 32px 24px 24px;
    box-sizing: border-box;
}

.formItemTitle span {
    font-weight: 400;
    font-size: 12px;
    color: #FA6400;
    line-height: 14px;
    vertical-align: middle;
    margin-left: 1px;
}

.modelLeft_form.range .formItem {
    width: 100%;
}

.form-range {
    width: 100%;
}

input[type=range] {
    -webkit-appearance: none;
    background: transparent;
    width: 642px;
    height: 4px;
    background: transparent;
    outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
    height: 4px;
    background: linear-gradient(to right, #416FF4 0%, #416FF4 var(--fill-percent), #E2E5F0 var(--fill-percent), #E2E5F0 100%);
    border-radius: 8px;
}

input[type=range]:focus {
    outline: none;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: #FFFFFF;
    box-shadow: 0px 4px 6px 0px rgba(28, 41, 90, 0.04);
    border-radius: 6px;
    border: 1px solid #EBECF2;
    margin-top: -8px;
    cursor: pointer;
}

.disabledBtn {
    width: 146px;
    height: 42px;
    border-radius: 8px;
    border: 1px solid #DCE9F7;
    font-weight: 400;
    font-size: 16px;
    color: #C7DAEF;
    line-height: 42px;
    text-align: center;
}

.disabledBtn span {
    margin-left: 32px;
}

.disabledBtn:hover {
    border: 1px solid #416FF4;
    color: #416FF4;
    cursor: pointer;
}

.apiModelTable.tableItem div:nth-child(1) {
    width: 382px;
}

.tableDesc .apiModel_tableTitle:nth-child(1) {
    width: 382px;
}

.tableDesc .apiModel_tableTitle:nth-child(2),
.apiModelTable.tableItem div:nth-child(2) {
    margin-left: 30px;
}

.apiModel_rightTable.rightTable .tableTitle:nth-child(2),
.apiModel_rightTable.rightTable .tableItem .two {
    width: 139px;
}

.tableItem .four,
.apiModel_rightTable.rightTable .tableTitle:nth-child(4) {
    width: 80px;
    text-align: center;
}

.apiModel_type {
    width: 80px !important;
    text-align: center;
}

@media (max-width: 500px) {
    .account_content {
        padding: 0 10px;
    }

    .tab {
        width: 288px;
        flex-wrap: wrap;
        margin: 0 auto;
        height: auto;
    }

    .accountModel_left,
    .accountModel {
        width: 100%;
    }

    .modelLeft_form {
        flex-direction: column;
    }

    .formItem+.formItem {
        margin-top: 24px;
    }

    .selectBox,
    .formItemselect,
    .formItem,
    .lang .formItem .moreForm .selectBox {
        width: 100%;
    }

    .moreForm .formItemselect {
        margin-bottom: 24px;
    }

    .accountModel_left .modelLeft_form:nth-child(2) .formItem:nth-child(2) {
        margin-top: 0;
    }

    .accountModel {
        flex-wrap: wrap;
    }

    .accountModel_right {
        margin-top: 40px;
    }

    .tableTitle:nth-child(1) {
        width: 80px;
        padding-left: 10px;
    }

    .tableItem div:nth-child(1) {
        width: 80px;
        padding-left: 10px;
    }

    .tableItem div:nth-child(2) {
        word-break: break-word;
    }

    .passwordModel,
    .apiDemoModel,
    .apiModel,
    .apiDemoModel {
        width: 100%;
        flex-wrap: wrap;
    }

    .passwordModel_left,
    .apiModel_left {
        width: 100%;
        height: auto;
    }

    input[type=range] {
        width: 100%;
    }

    .passwordModel_right,
    .apiModel_right {
        width: 100%;
        margin-left: 0;
        margin-top: 25px;
    }

    .moreForm .btn {
        margin-bottom: 24px;
    }

    .modelRight_cont {
        width: 100%;
    }

    .tableDesc .apiModel_tableTitle:nth-child(1) {
        width: 280px;
    }
}