@charset "utf-8";

.conts_wrap {
	max-width:381px;
	margin:30px auto;
}

.tx16 {
	font-size:16px;
}
.tx20 {
	font-size:20px;
}

.form {
	max-width:381px;
	min-height:360px;
	margin:0 auto;
	padding:30px 20px;
	box-sizing:border-box;
	background:url(../images/bg01.jpg) center top no-repeat;
	color:#000;
}

.password {
    border: 1px solid #7acb43;
    padding: 10px 15px;
	width:100%;
    float: left;
    vertical-align: middle;
    box-sizing: border-box;
    font-size: 18px;
	border-radius: 8px;
	margin:0 0 20px;
}

.btn_area {
	max-width:300px;
	margin:0 auto;
}
.login_btn {
	text-align:center;
	font-size: 18px;
	position:relative;
	background: linear-gradient(to right, #00ab44, 70%, #69d695);
	border:1px solid #e8e8e8;
	width:100%;
	padding:8px 10px;
	color:#fff;
	border-radius: 22px;
	cursor:pointer;
}
.login_btn span {
	position:relative;
	z-index:2;
}
.login_btn:after {
	content:"";
	position:absolute;
	top:1px;
	left:1px;
	width:calc(100% - 2px);
	height:calc(100% - 2px);
	border:2px solid #fff;
	border-radius: 22px;
}
.login_btn:before {
	content:"";
	position:absolute;
	top:3px;
	left:3px;
	width:calc(0% - 3px);
	height:calc(100% - 3px);
	border-radius: 22px;
	transition: all 0.5s ease-in-out 0s;
	z-index:1;
	background-color:rgba(255,255,255,0.2);
}
.login_btn:hover:before {
	width:calc(100% - 3px);
}
.red {
	color:#ff0000;
}


.up_btn {
	text-align:center;
	font-size: 18px;
	position:relative;
	background: linear-gradient(to bottom, #00bcef, #009ee6);
	border:1px solid #e8e8e8;
	width:100%;
	padding:8px 10px;
	color:#fff;
	border-radius: 22px;
	cursor:pointer;
}
.up_btn span {
	position:relative;
	z-index:2;
}
.up_btn:after {
	content:"";
	position:absolute;
	top:1px;
	left:1px;
	width:calc(100% - 2px);
	height:calc(100% - 2px);
	border:2px solid #fff;
	border-radius: 22px;
}
.up_btn:before {
	content:"";
	position:absolute;
	top:3px;
	left:3px;
	width:calc(0% - 3px);
	height:calc(100% - 3px);
	border-radius: 22px;
	transition: all 0.5s ease-in-out 0s;
	z-index:1;
	background-color:rgba(255,255,255,0.2);
}
.up_btn:hover:before {
	width:calc(100% - 3px);
}


.close_btn {
	text-align:center;
	font-size: 18px;
	position:relative;
	background: linear-gradient(to bottom, #c2c2c2, #a6a6a6);
	border:1px solid #e8e8e8;
	width:100%;
	padding:8px 10px;
	color:#fff;
	border-radius: 22px;
	cursor:pointer;
}
.close_btn span {
	position:relative;
	z-index:2;
}
.close_btn:after {
	content:"";
	position:absolute;
	top:1px;
	left:1px;
	width:calc(100% - 2px);
	height:calc(100% - 2px);
	border:2px solid #fff;
	border-radius: 22px;
}
.close_btn:before {
	content:"";
	position:absolute;
	top:3px;
	left:3px;
	width:calc(0% - 3px);
	height:calc(100% - 3px);
	border-radius: 22px;
	transition: all 0.5s ease-in-out 0s;
	z-index:1;
	background-color:rgba(255,255,255,0.2);
}
.close_btn:hover:before {
	width:calc(100% - 3px);
}

input[type="text"] {
	border:1px solid #ccc;
	padding:5px;
	width:100%;
	box-sizing:border-box;
}
.form_col {
	display:flex;
	justify-content: space-between;
	font-size:14px;
	max-width:320px;
	margin:0 auto;
}
.form_col li:nth-child(1) {
	width:80px;
}
.form_col li:nth-child(2) {
	width:calc(100% - 80px);
}

.t_cap {
	max-width:296px;
	margin:0 auto;
	font-size:12px;
	line-height:1.6;
}

.caution_sec {
	max-width:320px;
	margin:0 auto;
}
.caution_t {
	font-size:16px;
	color:#ff2424;
	position:relative;
	margin:0 0 10px;
	font-weight:bold;
}
.caution_t:after {
	content:"";
	position:absolute;
	top:50%;
	right:0;
	width:42%;
	height:1px;
	border-bottom:1px solid #ff2424;
}
.caution_col {
	display:flex;
	justify-content: space-between;
}
.caution_col li:nth-child(1) {
	width:92px;
}
.caution_col li:nth-child(2) {
	width:calc(100% - 102px);
	font-size:13px;
	line-height:1.6;
}
.caution_col .cap_t {
	padding-left:10px;
	font-size:12px;
}