@charset "utf-8";
body { padding: 50px; box-sizing: border-box;}

.p1 {position: absolute; text-align: center; width: 100%; height: 100%; top: 0; left: 0}
.p2 {display: inline-block; vertical-align: middle}
.popup { display: none; position: fixed; left: 50%; top: 50%; z-index: 100; padding:52px 60px 60px; width: 450px; height: 350px; transform: translate(-50%, -50%); box-sizing: border-box; background: #fff;}
.popup h2 { padding: 0 0 25px; border-bottom: 3px solid #444; font-weight: normal; font-size:30px; color:#222; text-align: center; line-height: 100%;}
.popup .close { position: absolute; right:20px; top: 20px; width: 41px; height: 41px; background: url(btn-close.png) no-repeat; color:transparent;}

.popupConfirm { display: none; position: fixed; left: 50%; top: 50%; z-index: 100; padding:52px 60px 60px; width: 450px; height: 350px; transform: translate(-50%, -50%); box-sizing: border-box; background: #fff;}
.popupConfirm h2 { padding: 0 0 25px; border-bottom: 3px solid #444; font-weight: normal; font-size:30px; color:#222; text-align: center; line-height: 100%;}
.popupConfirm .close { position: absolute; right:20px; top: 20px; width: 41px; height: 41px; background: url(btn-close.png) no-repeat; color:transparent;}

.agree { position: relative; margin: 28px 0 0; padding: 0 30px; height: 60px; border:1px solid #e8e8e8; line-height: 60px;}
.agree label span { color:#de4f41;}
.agree a.view { position: absolute; right:30px; top:15px; width: 93px; height: 30px; border:1px solid #ddd; text-align: center; line-height: 30px; border-radius: 3px;}

.dim { display: none;position: fixed; left: 0; top: 0; z-index: 99; width: 100%; height: 100%; background: rgba(0,0,0,0.5);}

.txt_center { text-align: center; }
.btn_type1 { display: inline-block;width: 150px; height: 100px; background: #8541de; line-height: 100px; color:#fff; text-align: center; border-radius: 3px; font-size:23px;}
.btn_type2 { display: inline-block;width: 150px; height: 50px; background: red; line-height: 50px; color:#fff; text-align: center; border-radius: 3px; font-size:18px;}
.btn_type3 { display: inline-block;width: 150px; height: 50px; background: rgb(47, 173, 68); line-height: 50px; color:#fff; text-align: center; border-radius: 3px; font-size:18px;}
.btn_type4 { color: blueviolet; }
.confirm_btn { display: inline-block;width: 150px; height: 100px; background: red; line-height: 100px; color:#fff; text-align: center; border-radius: 3px; font-size:23px;}

.part1 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
.Userid { width: 300px; border: 2px solid #aaa; border-radius: 4px; margin: 8px 0; outline: none; padding: 10px;  box-sizing: border-box; transition: .3s; }
.Userid:focus { border-color:dodgerblue; box-shadow: 0 0 7px 0 dodgerblue; }
.usertemp { width: 300px; border: 2px solid #aaa; border-radius: 4px; margin: 8px 0; outline: none; padding: 10px;  box-sizing: border-box; transition: .3s; }
.usertemp:focus { border-color:dodgerblue; box-shadow: 0 0 7px 0 dodgerblue; }
.userNum{ width: 300px; border: 2px solid #aaa; border-radius: 4px; margin: 8px 0; outline: none; padding: 10px;  box-sizing: border-box; transition: .3s; }
.userNum:focus { border-color:dodgerblue; box-shadow: 0 0 7px 0 dodgerblue; }
.click {display: inline-block; width: 150px; height: 50px; background: dodgerblue; line-height: 50px; color:#fff; text-align: center; border-radius: 3px; font-size:20px;}