html {
    font-size: 1rem; /* 基础字体大小 */
}

@media (max-width: 1200px) {
    html {
        font-size: 0.875rem; /* 较小屏幕时减小字体大小 */
    }
}

@media (max-width: 768px) {
    html {
        font-size: 0.875rem; /* 更小屏幕时进一步减小字体大小 */
    }
}

.popupBox {
    width: 47.125rem; /* 754px */
    background: #FFFFFF;
    box-shadow: -0.188rem 0.438rem 2.063rem 0px rgba(50, 71, 108, 0.58);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    border-radius: 0.625rem;
    padding-bottom: 1.25rem;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.25rem; /* 20px */
    color: #1C3355;
    line-height: 1.75rem; /* 28px */
    text-align: left;
    font-style: normal;
    text-transform: none;
    border-bottom: 0.063rem solid #C1D0EB;
    padding: 1.25rem 2.5rem;
}

.close {
    cursor: pointer;
    width: 1.75rem; /* 28px */
    height: 1.75rem; /* 28px */
    
}

.close img {
    width: 100%;
    height: 100%;
}
.tryHeader .close{
    opacity: 1;
}
.formBox {
    padding: 1.75rem 2.5rem;
}
.tryPopupBox .formBox {
    padding: 0 1.875rem;
    margin-top: -0.625rem;
}

.formRow {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}
.procedureItem:nth-child(2){
    opacity: 0.8;
    text-align: center;
}
.inputStyle {
    width: 19.75rem; /* 316px */
    height: 3rem; /* 48px */
    background: #F7FAFF;
    border: none;
    border-radius: 0.625rem;
    padding: 0.875rem 1.25rem;
    font-size: 0.875rem; /* 14px */
    color: #A7AFBC;
    line-height: 1.25rem; /* 20px */
    text-align: left;
    font-style: normal;
    text-transform: none;
}

.formLabel {
    color: #1C3355;
    font-size: 1rem; /* 16px */
    margin-bottom: 0.63rem;
}

.formLabel span {
    color: #FF3333;
}

.textareaStyle {
    width: 42.125rem; /* 674px */
    height: 8.625rem; /* 138px */
    background: #F7FAFF;
    border: none;
    border-radius: 0.625rem;
    padding: 0.875rem 1.25rem;
    font-size: 0.875rem; /* 14px */
    color: #A7AFBC;
    line-height: 1.25rem; /* 20px */
    text-align: left;
    font-style: normal;
    text-transform: none;
}

.submitBtn {
    width: 16.75rem; /* 268px */
    height: 2.75rem; /* 44px */
    background: #377CF7;
    border-radius: 0.625rem;
    font-size: 0.875rem; /* 14px */
    color: #FFFFFF;
    line-height: 1.25rem; /* 20px */
    font-style: normal;
    text-transform: none;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
}

.formTypeList {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.625rem;
}

.formTypeList .formTypeItem {
    padding: 0.875rem 1.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F5F9FF;
    font-size: 0.875rem; /* 14px */
    color: #1C3355;
    line-height: 1.25rem; /* 20px */
    text-align: left;
    font-style: normal;
    text-transform: none;
    border-radius: 0.625rem;
    cursor: pointer;
}

.bugPopup {
    display: none;
}

.tryPopupBox {
    width: 34.375rem; /* 550px */
    border-radius: 0.625rem;
    background: #E3EFFB;
    box-shadow: -0.188rem 0.438rem 2.063rem 0px rgba(50, 71, 108, 0.58);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    border-radius: 0.625rem;
    padding-bottom: 1.25rem;
    z-index: 99;
    display: none;
}

.tryHeader {
    height: 10.75rem; /* 172px */
    background: linear-gradient(180deg, #344FF7 0%, #B8D8FE 100%);
    padding: 1.875rem;
    border-radius: 0.625rem 0.625rem 0px 0px;
    position: relative;
    z-index: -111;
}

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

.tryTitle {
    font-size: 1.25rem; /* 20px */
    color: #FFFFFF;
    line-height: 1.75rem; /* 28px */
    text-align: left;
    font-style: normal;
    text-transform: none;
}

.procedureBox {
    padding: 0 7.5rem;
    display: flex;
    justify-content: space-between;
    margin-top: 1.375rem;
}

.procedureNumber {
    width: 2.125rem; /* 34px */
    height: 2.125rem; /* 34px */
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    text-align: center;
    margin: auto;
    color: #377CF7;
}

.procedureText {
    color: #FFFFFF;
    margin-top: 0.5rem;
}

.tryHeader .line {
    width: 4rem; /* 64% */
    position: absolute;
    top: 6rem; /* 96px */
    border: 0.063rem #FFFEFE dashed;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
}

.tryPopupBox .short {
    width: 14.625rem; /* 234px */
}

.formBlock {
    display: flex;
    align-items: center;
    background: #FFFFFF;
    border-radius: 0.625rem;
    padding: 0 1.5rem;
    width: 14.625rem; /* 234px */
}



.formBlock .inputStyle {
    background: #ffffff;
    width: 7.875rem; /* 126px */
}

.longInput {
    width: 100%;
}

.longInput .inputStyle {
    width: 70%; /* 70% */
}

.getVerificationBtn {
    font-size: 0.875rem; /* 14px */
    color: #377CF7;
    line-height: 1.25rem; /* 20px */
    text-align: left;
    font-style: normal;
    text-transform: none;
    cursor: pointer;
    margin-left: 1.8rem;
}

.longTextarea {
    padding: 0;
    width: 100%;
}

.tryPopupBox .submitBtn {
    width: 30.625rem; /* 490px */
    cursor: pointer;
}

.successfulBox {
    width: 30.625rem; /* 490px */
    padding: 9rem 7.875rem;
    margin: auto;
    background: #ffffff;
    margin-top: -0.625rem;
    border-radius: 0.625rem;
    display: none;
}

.successInfo {
    width: 15rem; /* 240px */
    margin: auto;
}

.successIcon {
    width: 7.375rem; /* 118px */
    height: 7.375rem; /* 118px */
    margin: auto;
    display: block;
}

.successTitle {
    font-size: 1.25rem; /* 20px */
    color: #212121;
    line-height: 1.75rem; /* 28px */
    text-align: center;
    font-style: normal;
    text-transform: none;
}

.successText {
    font-size: 0.875rem; /* 14px */
    color: #717273;
    line-height: 1.25rem; /* 20px */
    text-align: left;
    font-style: normal;
    text-transform: none;
}

.requirementPopup {
    display: none;
}

input {
    outline: none;
}

.formTypeList .active {
    border: 0.063rem solid #377CF7;
    color: #377CF7;
}

.submitBtn {
    cursor: pointer;
}
.tryPopupBox .formLabel{
    margin-bottom: 0;
}
.tryPopupBox .line {
    width: 25%;
    margin-left: 10px;
}
.tryPopupBox .lineLeft {
    position: absolute;
    top: 6rem;
    border: 0.063rem #FFFEFE dashed;
    left: 22%;
    transform: translateX(-50%);
    z-index: -1;
    width: 10%;
}
.tryPopupBox .lineRight {
    position: absolute;
    top: 6rem;
    border: 0.063rem #FFFEFE dashed;
    left: 80%;
    transform: translateX(-50%);
    z-index: -1;
    width: 10%;
}
.verificationInput {
    width: 64% !important;
}
@media (max-width: 768px) {
    .popupBox{
        width: 90%;
    }
    .formRow {
        flex-direction: column;
        margin-bottom: 0;
    }
    .formItem{
        margin-bottom: 0.86rem;
    }
    .formLabel {
        margin-bottom: 0.57rem;
    }
    .textareaStyle{
        width: 100%;
    }
    .inputStyle {
        width: 100%;
    }
    .header{
        display: flex;
        align-items: center;
    }
    .close{
        width: 1.14rem;
        height: 1.14rem;
        display: flex;
        opacity: 1;
    }
    .formBox{
    padding: 1.14rem 1.71rem;

    }
    .header{
        padding: 0.93rem 1.71rem;
    }
    .formTypeList{
        flex-direction: row;
        gap: 0.75rem 1.38rem;
        margin-bottom: 0.75rem;
    }
    .formTypeList .formTypeItem {
        padding: 0.38rem 0.75rem;
    }

    .tryPopupBox{
        width: 90%;
        /* padding: 0.81rem 1.5rem; */
    }
    .tryHeader{
        padding: 0.81rem 1.5rem;
    }
    .procedureBox{
        padding: 0 4.5rem;
    }
    .tryHeader .line{
        /* width: 88%; */
        top: 5rem;
    }
    .tryHeader .lineLeft{
        top: 5rem;
        left: 19%;
    }
    .tryHeader .lineRight{
        top: 5rem;
        left: 83%;
    }
    .formBlock{
        margin-bottom: 0.75rem;
        width: 100%;
    }
    .formBlock .inputStyle {
        width: 98%;
    }
    .tryPopupBox .formLabel{
        width: 5rem;
        margin-bottom: 0;
    }
    .trySubmitBtn{
        width: 100% !important;
    }
    .verificationInput{
        width: 48% !important;
    }
    .getVerificationBtn{
        margin-left: 0.1rem;
    }
    /* .longInput{
        width: 55% !important;
    } */
}