@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; padding: 30px 0 0;}
.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 { 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: 8px; box-sizing: border-box; transition: .3s; }
.userid: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;}

.selectBox { padding: 5px 0 5px 0; }
select { width: 200px; padding: .8em .5em; border: 1px solid #999; font-family: inherit; background: url('arrow.jpeg') no-repeat 95% 50%; border-radius: 0px; -webkit-appearance: none; -moz-appearance: none; appearance: none; }