/* 登录弹窗 */
.login-dialog {
    width: 22%;
    padding: 20px 20px;
    height: 280px;
    background: url(../images/login-dialog-bg.png);
    background-size: 100% 100%;
}

.myform {
    width: 100%;
    height: 100%;
    padding-top: 5%;
    padding-left: 35%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.input_group {
    display: flex;
    align-items: center;
    height: 35px;
    box-sizing: border-box;
    flex-shrink: 0;
    font-size: 12px;
    gap: 10px;
}

.myform input {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 1px solid #8d8d8d;
    border-radius: 3px;
    padding-left: 4%;

}

.phone_left {
    width: 20%;
    height: 80%;
    padding: 1%;
    border-right: 1px solid #8d8d8d;
    display: flex;
    align-items: center;
}

.phone_group {
    background: #fff;
    border: 1px solid #8d8d8d;
    padding: 2%;
    border-radius: 3px;
}

.phone_group>input {
    border: unset !important;
}

.code_group {
    width: 100%;
    display: flex;
}

#y_code {
    width: 60%;
    flex: .55;
}

#code {
    flex: .45;
    background: #fda100;
    color: #fff;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    border: unset;
}

.ok_btn {
    width: 100%;
    height: 35px;
    background: #fda100;
    border: unset;
    color: #fff;
    border-radius: 3px;
    margin-top: 15px;
}

.more,
.login-dialog-bottom {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.more>img {
    width: 80%;
}

.login-dialog-bottom-item {
    flex: 1;
    display: flex;
    align-items: center;
    flex-direction: column;
    font-size: 10px;
}

.login-dialog-bottom-item>img {
    width: 20px;
}

.register-top {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 角色区服弹窗 */
.binding-dialog {
    width: 22%;
    height: 270px;
    gap: 0 !important;
    justify-content: center;
}

.binding-dialog .binding-item {
    display: flex;
}

.binding-item .item-name {
    font-size: 18px;
    font-weight: 600;
}

.binding-dialog-bottom {
    width: 100%;
    text-align: right;
    font-size: 11px;
    margin-bottom: 3%;
    color: #5FAEC6;
    text-decoration: underline;
    text-decoration-color: #5FAEC6;
}

.binding-dialog .layui-form-select .layui-edge {
    display: none;
}

.binding-dialog .layui-form input {
    background: url(../images/formBorderBg.png);
    background-size: 100% 100%;
    border: none;
    font-weight: 600;
    font-size: 16px;
    text-align: center;
    color: #080202;
}

.binding-dialog .layui-input:hover,
.layui-textarea:hover {
    border: none !important;
}

.binding-dialog .layui-input::placeholder {
    color: #000;
    /* 设置占位符文字颜色 */
}

.binding-dialog .layui-form-select dl dd.layui-this {
    color: #3b4fdc;
}

.binding-dialog .layui-anim-upbit {
    border-radius: 5px;
}

/* 领取记录弹窗 */
.record-dialog {
    width: 90%;
    max-width: 450px;
    gap: 0 !important;
    justify-content: center;
}

.record-dialog-title {
    width: 94%;
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    padding: 5px 5%;
    box-sizing: border-box;
    color: #fff;
    /* 给我背景图透明色 */
    background-color: rgba(119, 192, 200, 0.8);
    border-radius: 20px;
    margin-top: 4%;
}

.record-dialog-content {
    width: 94%;
    height: 50vw;
    max-height: 250px;
    max-width: 94%;
    margin-bottom: 10px;
    overflow-y: auto;
}

.record-dialog-content .item {
    margin-top: 3%;
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    padding: 0 2%;
    padding-bottom: 3%;
    color: #07485c;
    /* 虚线 */
    border-bottom: 1px dashed rgba(7, 72, 92);
}

.record-dialog-content .item span:first-child{
    width: 110px;
    display: -webkit-box; 
    -webkit-line-clamp: 1; 
    -webkit-box-orient: vertical; 
    overflow: hidden;
    padding-right: 5px;
    box-sizing: border-box;
}
.record-dialog-content .item span:nth-child(2){
    flex:1;
    /* text-align: center; */
}

/* 恭喜获得弹窗 */
.congratulation-dialog {
    width: 22%;
    gap: 0 !important;
    background: url(../images/gxhdPop.png);
    background-size: 100% 100%;
    justify-content: left;
    padding: 0.5%;
}

.congratulation-dialog-content {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.congratulation-dialog-item {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 2%;
}

.congratulation-dialog-item-div {
    width: 90px;
    height: 90px;
    background: url(../images/inviteBg.png);
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.congratulation-dialog-item-img {
    width: 70px;
    height: 70px;
}

.congratulation-dialog-item-content {
    width: 100%;
    text-align: center;
    margin-bottom: 7%;
    color: #07485C;
}

/* 活动规则弹窗 */
.rule-dialog {
    width: 90%;
    max-width: 450px;
    max-height: 400px;
    gap: 0 !important;
    background: url(../images/gxhdPop.png);
    background-size: 100% 100%;
    justify-content: left;
    padding: 0.5%;
}

.rule-dialog-content {
    width: 87%;
    margin-left: 3%;
    height: 50vw;
    margin-bottom: 15%;
    overflow-y: auto;
}

/* 退出登录弹窗 */
.login-out-dialog {
    width: 20%;
    height: 9vw;
}

.login-out-dialog img {
    width: 5vw;
}

/* 提示弹窗 */
.tip-dialog {
    width: auto;
    gap: 0 !important;
    color: #fff;
    background: url(../images/tsPop.png);
    background-size: 100% 100%;
    justify-content: left;
    font-family: Source Han Sans SC;
    font-weight: 500;
    font-size: 14px;
    padding: 1% 3%;
}

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

    /* 登录弹窗 */
    .login-dialog {
        width: 90%;
        height: 260px;
        background: url(../images/login-dialog-bg.png);
        background-size: 100% 100%;
        padding: 5vw 6vw;
        padding-top: 6vw;
    }

    /* 角色区服弹窗 */
    .binding-dialog {
        width: 90%;
        height: 270px;
    }

    /* 领取记录弹窗 */
    .record-dialog {
        width: 90%;
    }

    .record-dialog-content {
        height: 50vw;
    }

    /* 恭喜获得弹窗 */
    .congratulation-dialog {
        width: 90%;
        gap: 0 !important;
        padding-bottom: 5%;
    }

    /* 活动规则弹窗 */
    .rule-dialog {
        width: 90%;
        gap: 0 !important;
        padding-bottom: 5%;
    }

    /* .rule-dialog-content {
        height: 50vw;
    } */

    /* 退出登录 */
    .login-out-dialog {
        width: 75%;
        height: 30vw;
        padding: 4%;
    }

    .login-out-dialog img {
        width: 25vw;
    }

    /* 提示弹窗 */
    .tip-dialog {
        padding: 5% 7%;
        gap: 0 !important;
    }

}