* {
   font-family: "微软雅黑";
}
html {
   overflow-y: auto;
   width: 100%;
   height: 100%;
}
body {
   max-width: 750px;
   margin: 0 auto;
   height: 100%;
   background: url('../image/bg.png') no-repeat;
   background-size: cover;
}
img {
   width: 100%;
   display: block;
}

.form {
   padding: 20px .9rem;
}
.form_col {
   height: 42px;
   margin-bottom: 20px;
   display: flex;
}
.form_col_label {
   width: 42px;
   height: 42px;
}
.form_col_label img {
   width: 100%;
   height: 100%;
   display: block;
}

.form_col_input {
   width: 1px;
   flex: 1;
   height: 100%;
   box-sizing: border-box;
   overflow: hidden;
}
.form_col_input input {
   display: block;
   width: 100%;
   height: 100%;
   font-size: 15px;
   border: none;
   outline: none;
   box-sizing: border-box;
   padding: 0 15px;
}
#canvas {
   background: #fff;
}

.form_btn {
   width: 2.5rem;
   margin: 25px auto 0;
   cursor: pointer;
}


.msg {
   margin-top: 35px;
}
.msg > p {
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: bold;
   line-height: 2;
   color: #fff;
   font-size: .28rem;
   letter-spacing: 1px;
}
.msg > p > img {
   width: .35rem;
   height: .35rem;
   display: block;
   margin-right: .1rem;
}

.img {
   position: relative;
   margin: .58rem .26rem 0;
}
.name {
   position: absolute;
   color: rgb(137, 93, 70);
   top: 2.25rem;
   left: 2.25rem;
   width: 1.5rem;
   text-align: center;
   font-size: .35rem;
   font-weight: bold;
}