/* common */
body,th,td,input,select,textarea,button {font-size:24px;}

.wrap {
	display:flex;
	justify-content:center;
	align-items:center;
	background:url(../img/common/bg_login.jpg) no-repeat center;
	background-size:cover;
}

.login_box {
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items:stretch;
	margin:0 auto;
	width:calc(100% - 40px);
	max-width:1180px;
	height:540px;
	overflow-y:auto;
	background-color:#fff;
}

.login_box .lb_left {
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	width:500px;
	background:url(../img/common/bg_loginBox.jpg) no-repeat center;
	background-size:cover;
}
.login_box .lb_left > span {
	display:block;
	margin-bottom:0.5em;
	width:100%;
	text-align:center;
}
.login_box .lb_left > span img {
	margin:0 auto;
}
.login_box .lb_left > p {
	color:#fff;
	font-size:0.75em;
}

.login_box .lb_right {
	position:relative;
	display:block;
	padding:40px;
	width:calc(100% - 500px);
}
.login_box .lb_right span.lb_title {
	display:block;
	width:100%;
}
.login_box .lb_right span.lb_title span {
	display:block;
	font-size:1.25em;
	font-weight:600;
}

.login_box .lb_right span.lb_title small {
	display:block;
	font-size:0.8em;
}
.login_box .lb_right span.lb_title small a {
	font-weight:400;
	color:#2298fd;
}

.login_box .lb_right .input_area {
	margin:1em 0 0.25em;
	width:100%;
}
.login_box .lb_right .input_area input {
	display:block;
	margin-bottom:10px;
	padding:10px 0;
	width:100%;
	font-size:0.75em;
	border:none;
	border-bottom:1px solid #969696;
}
.login_box .lb_right .input_area input:last-child {
	margin-bottom:0;
}
.login_box .lb_right .keepLogin {
	float:left;
	width:50%;
}
.login_box .lb_right .keepLogin label {
	font-size:0.75em;
}
.login_box .lb_right .findAccount {
	float:right;
	display:flex;
	justify-content:flex-end;
	align-items:center;
	width:50%;
	line-height:1.5em;
}
.login_box .lb_right .findAccount a {
	position:relative;
	display:block;
	padding:0 0.75em;
	font-size:0.75em;
}
.login_box .lb_right .findAccount a:before {
	position:absolute;
	content:'';
	left:0;
	top:50%;
	width:1px;
	height:0.8em;
	background-color:#969696;
	transform:translateY(-40%);
}

.login_box .lb_right .findAccount a:first-child:before {
	display:none;
}
.login_box a.btn_login {
	display:block;
	margin:2.5em auto 0;
	padding:0.5em 0;
	width:250px;
	color:#fff;
	text-align:center;
	border-radius:50px;
	background: rgb(68,75,173); /* Old browsers */
	background: -moz-linear-gradient(left,  rgba(68,75,173,1) 0%, rgba(39,44,114,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  rgba(68,75,173,1) 0%,rgba(39,44,114,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  rgba(68,75,173,1) 0%,rgba(39,44,114,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444bad', endColorstr='#272c72',GradientType=1 ); /* IE6-9 */
}

.login_box .lb_right .snsLogin {
	position:absolute;
	bottom:40px;
	left:40px;
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;
	padding:0.5em;
	width:calc(100% - 80px);
	border:1px solid #dcdcdc;
}
.login_box .lb_right .snsLogin span {
	font-weight:600;
}
.login_box .lb_right .snsLogin a {
	margin-left:1em;
}

/* join */
.login_box.join {
	flex-wrap:wrap;
	margin:50px 0;
	padding:40px;
}
.login_box.join > h2 {
	display:block;
	margin-bottom:1em;
	width:100%;
}
.login_box.join ul {
	width:100%;
}
.login_box.join > ul > li h3.sectionTitle {
	position:relative;
	margin-bottom:0.25em;
	padding-left:0.3em;
}
.login_box.join > ul > li h3.sectionTitle:before {
	position:absolute;
	content:'';
	top:50%;
	left:0;
	width:3px;
	height:0.75em;
	background-color:#2c3282;
	border-radius:2px;
	transform:translateY(-40%);
}
.login_box.join .terms_list {
	padding:20px;
	width:100%;
	background-color:#f5f5f5;
	border:1px solid #969696;
}
.login_box.join .terms_list ul li {
	margin-bottom:0.25em;
}
.login_box.join .terms_list ul li.chk_list {
	padding-left:1em;
}
.login_box.join .terms_list ul li .input_area {
	position:relative;
	display:flex;
	justify-content:flex-start;
	align-items:center;
	font-size:0.8em;
}
.login_box.join .terms_list ul li .input_area input[type="checkbox"] {
	margin-right:0.5em;
	width:1em;
	height:1em;
}
.login_box.join .terms_list ul li .input_area a.btn_terms {
	position:absolute;
	top:50%;
	right:0;
	transform:translateY(-50%);
}

.login_box.join > ul > li:last-child {
	margin-top:1.5em;
}

.login_box.join .input_list {
	padding:20px;
	width:100%;
	background-color:#f5f5f5;
	border:1px solid #969696;
}
.login_box.join .input_list > ul > li {
	display:flex;
	flex-wrap:wrap;
	justify-content:flex-start;
	align-items:center;
	margin-bottom:0.5em;
}
.login_box.join .input_list > ul > li > label {
	width:10em;
	font-size:0.8em;
}
.login_box.join .input_list > ul > li > label span.essential {
	color:red;
}
.login_box.join .input_list > ul > li > .input_area {
	width:calc(100% - 10em);
}
.login_box.join .input_list > ul > li > .input_area input {
	display:block;
	padding:0.25em 0;
	width:100%;
	font-size:0.75em;
	border:none;
	border-bottom:1px solid #969696;
	background:none;
}

.login_box .btn_area {
	display:flex;
	justify-content:center;
	align-items:center;
	margin-top:30px;
	width:100%;
}
.login_box.findAccount .btn_area {
	position:absolute;
	bottom:40px;
	left:40px;
	width:calc(100% - 80px);
}
.login_box .btn_area a {
	display:block;
	padding:0.5em 0;
	width:250px;
	color:#3941a8;
	text-align:center;
	border-radius:50px;
	background-color:#fff;
	border:1px solid #3941a8;
}
.login_box .btn_area a.btn_login {
	margin:0 20px 0 0;
	color:#fff;
}

.login_box.findAccount .tabs {
	display:flex;
	justify-content:flex-start;
	align-items:center;
	margin-top:1em;
	width:100%;
}
.login_box.findAccount .tabs a {
	display:block;
	padding:0.5em;
	width:50%;
	font-size:0.75em;
	text-align:center;
	border-bottom:1px solid #dcdcdc;
}
.login_box.findAccount .tabs a.active {
	color:#3941a8;
	border:1px solid #dcdcdc;
	border-bottom:1px solid transparent;
}

@media screen and (max-width:1024px) {
	body,th,td,input,select,textarea,button {
		font-size:22px;
	}

	.login_box {
		height:auto;
	}
	.login_box .lb_left,
	.login_box .lb_right {
		width:100%;
	}
	.login_box .lb_left {
		padding:40px 0;
	}
	.login_box .lb_right .snsLogin,
	.login_box.findAccount .btn_area {
		position:relative;
		left:auto;
		bottom:auto;
		margin-top:20px;
		width:100%;
	}

}

@media screen and (max-width:768px) {
	body,th,td,input,select,textarea,button {
		font-size:18px;
	}
	.login_box.join {
		padding:20px;
	}
	.login_box .lb_right .snsLogin span {
		margin-bottom:1em;
		width:100%;
		text-align:center;
	}
	.login_box.join .input_list > ul > li > label,
	.login_box.join .input_list > ul > li > .input_area {
		width:100%;
	}
	.login_box.join .input_list > ul > li > label {
		margin-bottom:0.5em;
	}

	.login_box.join .terms_list ul li .input_area > label {
		display:block;
		width:calc(100% - 7.5em);
	}
	.login_box.join .terms_list ul li .input_area a.btn_terms {
		position:relative;
		top:auto;
		right:auto;
		transform:none;
		width:6em;
		text-align:right;
	}
}

@media screen and (max-width:425px) {

}