@charset "utf-8";
/* ===================================
	Login
 =================================== */
.wrap-login { min-height: 890px; height:100vh; width:100%; min-width:320px; padding:0 0 2.6% 0; background:url('../images/login/bg_login.jpg') 50% 50% no-repeat; position:relative; background-size: cover;}
.login {width:100%; padding:4% 6.25% 0 6.25%;}
.login-wrap {width:100%; max-width:520px; margin:0 auto; position:relative; padding-top:70px; text-align:center;}

.login__header { text-align:center; position:absolute; top:0; left:50%; transform:translateX(-50%);}
.login__header-logo {border-radius: 50%; border:6px solid #3c3c3c; width:140px; display:inline-block;}
.login__header-text {margin-top:15px;  margin:0 auto;}

.login__contents {box-shadow:0px 0px 20px 0px rgba(0, 0, 0, 0.4);background-color: rgba(34, 34, 34, 0.5); border-radius:30px; overflow:hidden;}
.login-inner {background-color:#fff; padding:0 7.69% 7.69%; position:relative; text-align:left;}
.login-info {background-color:#fff; border-radius:20px 20px 0 0; position:absolute; width:calc(100% - 15.38%); left:50%; top:-40px; transform:translateX(-50%);}
.login-info h2 {font-size:48px; text-align:center; color:#222; text-transform: uppercase; padding:4.8% 0 0 0;}
.login-info h2 strong {font-weight:500; vertical-align:baseline;}
.login-info .text {font-size:13px; line-height:1.6; margin-top:4.8%; text-align:justify;}


.login__form-item {padding:0 0 0 13.6%; margin-top:4.5%; border:1px solid #d9d9d9; position:relative; background-repeat:no-repeat; background-size:24px; background-position:5% 50%; background-color:#f1f1f1; border-radius:30px;}
.login__form-item:nth-of-type(1) {background-image:url('../images/login/ico_name.png');}
.login__form-item:nth-of-type(2) {background-image:url('../images/login/ico_calendar.png');}
.login__form-item:nth-of-type(3) {background-image:url('../images/login/ico_pass.png');}
.login__form-label {display:none;}
.login__form-input {width:100%; height:50px; line-height:50px; font-size:16px; color:#222; background-color:transparent; font-weight:400;} 


/*checkbox*/
.checkbox-label {position:relative; display:inline-block; cursor:pointer; vertical-align:middle; margin:0; padding:0;  width:auto; height:16px; line-height:16px;}
.checkbox-obj {position:absolute; top:0; left:0; z-index:1; width:16px; height:16px; opacity: 0; filter: alpha(opacity=0);}
.checkbox-label:before {content:''; display:inline-block; background: url('../images/login/ico_check.png') 0 0 no-repeat; position:absolute; background-size:16px; width:16px; height:16px; z-index:2; top:0; left:0;}
.checkbox-label.checkbox-on:before {background-image:url('../images/login/ico_check_on.png'); }

.login__form-check {margin-top:3.4%; font-size:0; padding:0 0 0 4.5%;}
.login__form-check_item {display:inline-block;}
.login__form-check_item + .login__form-check_item {margin-left:6.8%;}


.checkbox-text {margin:0 0 0 22px; display:inline-block;vertical-align:middle; color:#666; font-size:14px; font-style:normal;}


.login__form-btn_wrap {margin-top:5.6%;}
.login__form-btn {outline:none; border:0; width:100%; line-height:60px; font-size:24px; color:#fff; display:block; text-align:center; font-weight:400;text-transform:uppercase;background:#034ea2; border-radius: 30px;}
.login__form-btn span {display:inline-block; background:url('../images/login/ico_go.png') 100% 50% no-repeat; padding:0 30px 0 0;}


.App__form-btn {outline:none; border:0; width:50%; line-height:40px; font-size:12px; color:#fff; display:block; text-align:center; font-weight:400;text-transform:uppercase;background:#034ea2; border-radius: 30px;}
.APP__form-btn span {display:inline-block; background:url('../images/login/ico_go.png') 100% 50% no-repeat; padding:0 30px 0 0;}


.login__footer {margin-top:3%; text-align:center; color:#fff; font-size:13px; font-weight:300;}
.login__footer-copy {margin-top:10px;}
.login__footer-copy strong {vertical-align: baseline; font-weight:400;}


@media only screen and (max-width: 768px) {
	.wrap-login {background-image:url('../images/login/bg_login_m.jpg'); min-height:820px;}

	.login-wrap {padding-top:50px;}
	.login__header-logo { border:4px solid #3c3c3c; width:100px;}
	.login__header-text {margin-top:10px; width:100px;}

	.login__contents {box-shadow:0px 0px 15px 0px rgba(0, 0, 0, 0.4);border-radius:20px;}
	.login-info {border-radius:15px 15px 0 0;}
	.login-info h2 {font-size:32px; padding:4.8% 0 0 0;}
	.login-info .text {font-size:13px; line-height:1.5;}
}

@media only screen and (max-width: 480px) {
	.wrap-login { min-height:630px;}
	.login-wrap {padding-top:40px;}
	.login__header-logo { border:4px solid #3c3c3c; width:80px;}
	.login__header-text {margin-top:5px; width:80px;}

	.login__contents {box-shadow:0px 0px 15px 0px rgba(0, 0, 0, 0.4);border-radius:15px;}
	.login-info {border-radius:10px 10px 0 0; top:-30px}
	.login-info h2 {font-size:24px;}
	.login-info .text {font-size:12px; line-height:1.3;}

	.login__form-item {padding:0 0 0 15%; margin-top:4.5%; background-size:16px; background-position:7% 50%;}
	.login__form-input {height:36px; line-height:36px; font-size:14px;} 


	.login__form-check {margin-top:4%; font-size:0; padding:0 0 0 4%;}
	.login__form-check_item + .login__form-check_item {margin-left:5.2%;}


	.checkbox-text {font-size:13px;}

	.login__form-btn_wrap {margin-top:7.2%;}
	.login__form-btn {line-height:40px; font-size:18px;}
	.login__form-btn span {padding:0 25px 0 0; background-size:16px; margin-top:-5px;}

	.login__footer { font-size:12px;}
	.login__footer-copy {margin-top:5px;}
}