/*遮罩*/
#mask{
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    /* 去掉遮罩颜色 */
    background:transparent;
    display:none;
    justify-content:center;
    align-items:center;
    z-index:999;
    font-size:16px;
    line-height:normal;
    font-family:"Microsoft YaHei",sans-serif;
}

/*弹窗*/
#mask .page{

    width:410px;
    height:auto;
    min-height:700px;
    background:#f5ded4;
    border-radius:15px;
    position:relative;
    padding-top:25px;
    overflow:hidden;

}

/*关闭*/
#mask .close{

    position:absolute;
    right:15px;
    top:5px;
    font-size:22px;
    font-weight:bold;
    color:#666;

}


/*logo*/
#mask .logo{

    width:50px;
    height:50px;
    display:block;
    margin:0 auto 20px;
    object-fit:contain;

}

/*标题*/
#mask h1{

    text-align:center;
    font-size:38px;
    font-weight:bold;
    color:#2e2e2e;

}

#mask h1 span{
    color:#f4600f;
}


/*副标题*/
#mask .subtitle{

    margin-top:11px;
    font-size:17px;
    color:#7c7c7c;
    font-family:"Microsoft YaHei",sans-serif;
    font-weight:600;
    letter-spacing:0px;
    text-align:center;

}

/*表单*/
#mask .form{

    margin-top:35px;
    padding:0 30px;

}

/*表单输入框*/
#mask .form input{

    width:100%;
    height:50px;
    border:none;
    border-radius:8px;
    background:white;
    font-family:"Microsoft YaHei",sans-serif;
    margin-bottom:30px;
    padding-left:18px;
    font-size:18px;
    color:#141313;

}

/*输入框提示文字*/
#mask .form input::placeholder{
    font-weight:bold;
    color:#dcd3d3;
}

/*留言内容框*/
#mask .form textarea{
    width:100%;
    height:100px;
    border:none;
    border-radius:8px;
    background:white;
    font-family:"Microsoft YaHei",sans-serif;
    margin-bottom:30px;
    padding:15px 18px;
    font-size:18px;
    color:#141313;
    resize:none;
}


/*留言框提示文字*/
#mask .form textarea::placeholder{
    font-weight:bold;
    color:#dcd3d3;
}

/*按钮“马上联系我”*/
#mask button{

    width:100%;
    height:55px;
    padding:0;
    background:#f4600f;
    border:none;
    color:white;
    font-family:"Microsoft YaHei",sans-serif;
    font-size:24px;
    font-weight:bold;

    display:flex;
    justify-content:center;
    align-items:center;

    margin-top:15px;
    cursor:pointer;
}

#mask .form-item{
    position:relative;
}


/*必填项红点*/
#mask .form-item.required::before{

    content:"";
    width:7px;
    height:7px;
    background:rgb(243, 88, 88);
    border-radius:50%;
    position:absolute;
    left:5px;
    top: 10px;
    transform: none;

}
/*错误提示*/
#mask .error-tip{

    display:none;
    position:absolute;
    left:18px;
    top:55px;
    color:#ff4d4f;
    font-size:14px;
    z-index:999;

}

/*留言框*/
#mask .textarea-item{
    position:relative;
}


/*字数统计*/
#mask #count{

    position:absolute;
    right:15px;
    bottom:10px;
    font-size:14px;
    color:#999;

}


/*确认提交弹窗*/
#mask .confirm-tip{

    display:none;
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.3);
    justify-content:center;
    align-items:center;
    z-index:1000;

}


#mask .confirm-box{

    width:320px;
    background:white;
    border-radius:12px;
    padding:25px;
    text-align:center;
    /* 自动换行 */
    word-break:break-all;
    /* 超长内容换行 */
    overflow-wrap:break-word;
    max-height:300px;
    overflow-y:auto;

}

#mask .confirm-box h3{

    font-size:20px;
    margin-bottom:20px;
}


#mask .confirm-box #confirmText{

    font-size:15px;
    color:#666;
    line-height:28px;
    text-align:left;
    font-family:"Microsoft YaHei",sans-serif;
    word-break:break-word;

}


#mask .confirm-btn{

    display:flex;
    gap:15px;
    margin-top:20px;

}

#mask .confirm-btn button{

    flex:1;
    height:40px;
    font-size:16px;
    border-radius:8px;
    width:auto;
    margin-top:0;

}

#mask #cancelBtn{

    background:#ddd;
    color:#555;

}

#mask #confirmBtn{

    background:#f4600f;
    color:white;

}



/*发送成功提示*/
#mask .success-tip{

    display:none;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    background:white;
    width:200px;
    padding:30px;
    text-align:center;
    border-radius:10px;
    z-index:1100;

}


#mask .success-tip div{

    font-size:40px;
    color:#f4600f;

}


#mask .success-tip p{

    font-size:18px;
    margin-top:10px;

}