@charset "utf-8";

* {
	font-family: "HanjinGroupSans";
	color: #222;
	box-sizing: border-box;
}

html, body {
	height: 100%;
}
/* input box color */
input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 30px #fff inset !important;
	-webkit-text-fill-color: #222;
}

	input:-webkit-autofill, input:-webkit-autofill:hover,
	input:-webkit-autofill:focus, input:-webkit-autofill:active {
		transition: background-color 5000s ease-in-out 0s;
	}

.wrap {
	width: 100%;
	height: 100%;
	background: url("../images/bg-1920.png") no-repeat center;
	/* bg-1920.png / bg-1920-b.png / bg-1920-c.png / bg-1920-d.png */
	background-size: cover;
	overflow: auto;
}

	.wrap.type-b {
		background: url("../images/bg-1920-b.png") no-repeat center;
		background-size: cover;
	}

	.wrap.type-c {
		background: url("../images/bg-1920-c.png") no-repeat center;
		background-size: cover;
	}

	.wrap.type-d {
		background: url("../images/bg-1920-d.png") no-repeat center;
		background-size: cover;
	}

	.wrap.type-e {
		background: no-repeat center;
		background-size: cover;
	}

.container {
	width: 74.8%;
	/*max-width: 1420px;*/
	height: 100%;
	margin: 0 auto;
	padding-top: 9%;
}

.sso-text, .login-wrapper {
	float: left;
	min-height: 602px;
}

.sso-text {
	padding-top: 29px;
	width: calc(100% - 500px);
	height: 100%;
	max-height: 602px;
	padding-right: 20px;
}

	.sso-text p {
		font-weight: 400;
		font-size: 32px;
		color: #fff;
		opacity: 0.75;
	}

	.sso-text h1 {
		font-weight: 700;
		font-size: 60px;
		margin-top: 10px;
	}

		.sso-text h1 span {
			color: #fff;
		}

.login-wrapper {
	width: 500px;
	border-radius: 16px;
	background-color: #fff;
	padding: 60px 80px 70px;
}

.login-contents {
	opacity: 0.9
}

	.login-contents .logo {
		margin-bottom: 50px;
	}

	.login-contents .lang {
		text-align: right;
		margin-bottom: 20px;
	}

		.login-contents .lang .ko, .login-contents .lang .en {
			font-size: 15px;
			font-weight: 700;
			color: #b8b8b8;
			text-transform: uppercase;
		}

			.login-contents .lang .ko .active, .login-contents .lang .en .active {
				color: #0068e8;
				text-decoration: underline;
			}

		.login-contents .lang .en {
			margin-left: 20px;
		}

.id-wrap {
	margin-bottom: 30px;
}

	.id-wrap label, .pw-wrap label, .auth-wrap label, .email-wrap label, .name-wrap label, .emp-wrap label, .ext-email-wrap label, .phone-wrap label {
		font-weight: 700;
		display: block;
		color: #b8b8b8;
	}

	.id-wrap input, .pw-wrap input, .auth-wrap input, .email-wrap input, .name-wrap input, .emp-wrap input, .ext-email-wrap input, .phone-wrap input {
		font-size: 18px;
		padding: 16px 10px 15px;
		border: 0;
		border-bottom: 1px solid #d8d8d8;
		width: 100%;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		outline: 0;
	}

		.id-wrap input:focus, .pw-wrap input:focus, .auth-wrap input:focus, .email-wrap input:focus, .name-wrap input:focus, .emp-wrap input:focus, .ext-email-wrap input:focus, .phone-wrap input:focus {
			border-bottom: 1px solid #222;
		}

	.id-wrap.error input, .pw-wrap.error input, .auth-wrap.error input, .email-wrap.error input, .name-wrap.error input, .emp-wrap.error input, .ext-email-wrap.error input, .phone-wrap.error input {
		border-bottom: 1px solid #de001b;
	}

input:-webkit-autofill {
	-webkit-box-shadow: none !important;
	-webkit-text-fill-color: #222;
	font-size: 18px;
}

	input:-webkit-autofill, input:-webkit-autofill:hover,
	input:-webkit-autofill:focus, input:-webkit-autofill:active {
		-webkit-box-shadow: none !important;
		transition: background-color 5000s ease-in-out 0s;
		-webkit-text-fill-color: #222;
		font-size: 18px;
	}

.pw-wrap input {
	position: relative;
	z-index: 0;
	font-weight: 400;
	font-size: 18px;
}

.pw-wrap {
	position: relative;
	margin-bottom: 24px;
}

	.pw-wrap i {
		position: absolute;
		right: 6px;
		bottom: 16px;
		z-index: 10;
		color: #b2b2b2;
		width: 22px;
		height: 22px;
		cursor: pointer;
	}

		.pw-wrap i.pw-eye {
			background: url("../images/visibility-on.png") no-repeat center;
		}

		.pw-wrap i.pw-eye-slash {
			background: url("../images/visibility-off.png") no-repeat 0 0;
		}

.btn-area .btn-login {
	display: block;
	width: 100%;
	background-color: #051469;
	color: #fff;
	border-radius: 8px;
	text-align: center;
	font-size: 20px;
	font-weight: 700;
	padding: 18px 0 17px;
	margin-bottom: 10px;
}

.btn-passwordles {
	display: block;
	width: 100%;
	background-color: #BB2649;
	color: #fff;
	border-radius: 8px;
	text-align: center;
	font-size: 20px;
	font-weight: 700;
	padding: 18px 0 17px;
	margin-bottom: 10px;
}

	.btn-area .btn-login.ftsize-ko {
		font-size: 18px;
	}

.error-container {
	margin-bottom: 32px;
}

	.error-container .error {
		color: #de001b;
		background: url("../images/error-outline.png") no-repeat;
		padding-left: 24px;
		padding-top: 1px;
		font-size: 14px;
	}

		.error-container .error ul {
			color: #de001b;
		}

			.error-container .error ul li {
				color: #de001b;
			}

.login-wrapper .bottom {
	text-align: right;
}

	.login-wrapper .bottom .find-pw {
		font-family: "HanjinGroupSans";
		color: #777;
		font-size: 14px;
	}

/* login auth code */
.login.auth {
	margin-top: 22px;
}

.auth .code {
	padding-top: 40px;
}

	.auth .code .txt {
		margin-bottom: 40px;
		font-size: 18px;
	}

.auth-wrap {
	margin-bottom: 10px;
}

.chk-save {
	/*margin-bottom: 44px;*/
	position: relative;
}

	.chk-save input[type=checkbox] + .checkbox {
		display: inline-block;
		width: 20px;
		height: 20px;
		background: none;
		border: 1px solid #666;
		border-radius: 4px;
	}

	.chk-save input[type=checkbox]:checked + .checkbox {
		display: inline-block;
		width: 20px;
		height: 20px;
		background: url("../images/chk-on.png") no-repeat center;
		border: 1px solid #0068e8;
	}

	.chk-save input {
		position: absolute;
		top: 0;
		left: 0;
		outline: 0;
		opacity: 0;
		width: 20px;
		height: 20px;
	}

	.chk-save label {
		position: absolute;
		top: 1px;
		left: 22px;
		display: inline-block;
		color: #666;
		margin-left: 5px;
	}

.bottom.app-auth {
	margin-top: 66px;
}

/* login lock */
.login.lock {
	padding-top: 107px;
}

.lock-area .icon {
	text-align: center;
	margin-bottom: 18px;
	width: 100%;
	height: 48px;
	background: url("../images/lock.png") no-repeat center;
}

.lock-area .txt, .email-send-area .txt {
	color: #222;
	font-size: 22px;
	font-weight: 700;
	text-align: center;
	margin-bottom: 11px;
}

.lock-area .stxt, .email-send-area .stxt {
	color: #222;
	font-size: 18px;
	text-align: center;
	word-break: keep-all;
	word-wrap: break-word;
}

.login.lock .btn-area {
	margin-top: 80px;
}

.login.email-send {
	padding-top: 95px;
}

.email-send .icon {
	text-align: center;
	margin-bottom: 18px;
	width: 100%;
	height: 48px;
	background: url("../images/email.png") no-repeat center;
}

.email-send-area .stxt {
	font-size: 16px;
}

.login.email-send .btn-area {
	margin-top: 40px;
}

/* password reset */
.login .tit-txt {
	font-size: 16px;
	margin-bottom: 14px;
}

.login.pw-reset .txt {
	font-size: 14px;
}

.login.pw-reset .email-wrap {
	margin-top: 30px;
	margin-bottom: 20px;
}

/* notice */
.bottom.notice-area {
	margin-top: 64px;
}

	.bottom.notice-area .tit-notice {
		width: 100%;
		text-align: left;
		font-size: 15px;
		font-weight: 400;
		padding-left: 22px;
		padding-top: 1px;
		background: url("../images/notice-important.png") no-repeat 0 0;
		margin-bottom: 13px;
	}

/* list style */
.list-wrap {
	padding-left: 7px;
}

.list-style li {
	font-size: 14px;
	text-align: left;
	margin-bottom: 10px;
	padding-left: 9px;
	background: url("../images/icon-list.png") no-repeat;
	background-position: 0 4px
}

	.list-style li:last-child {
		margin-bottom: 0;
	}

/* Sub Full Box */
.sub-container {
	width: 1200px;
	margin: 0 auto;
	padding-top: 5%;
}

.sub-box {
	background-color: #fff;
	padding: 60px 128px;
	border-radius: 16px;
	-webkit-border-radius: 16px;
	-moz-border-radius: 16px;
	-ms-border-radius: 16px;
	-o-border-radius: 16px;
}

	.sub-box .title-area {
		margin-bottom: 28px;
	}

		.sub-box .title-area .title {
			font-size: 30px;
			color: #222;
			margin-bottom: 11px;
		}

		.sub-box .title-area .sub-title {
			font-size: 15px;
			color: #666;
		}

.info-area {
	background-color: #ecf4ff;
	padding: 11px 0 13px;
	text-align: center;
	margin-bottom: 40px;
}

	.info-area .icon {
		position: relative;
		top: 4px;
		display: inline-block;
		width: 20px;
		height: 20px;
		background: url("../images/notice-important.png") no-repeat 0 0;
	}

.account-form {
	padding: 0 82px;
}

	.account-form ul {
		overflow: hidden;
		margin-bottom: 28px;
	}

	.account-form li {
		width: 360px;
		float: left;
		margin-top: 33px;
	}

		.account-form li:first-child, .account-form li:nth-child(2) {
			margin-top: 0;
		}

		.account-form li:nth-child(2n-1) {
			margin-right: 60px;
		}

		.account-form li label {
			font-weight: 400;
			color: #666;
		}

	.account-form .id-wrap {
		margin-bottom: 0;
	}

	.account-form .error-container {
		min-height: 18px;
		margin-bottom: 0;
		margin-top: 5px;
	}

		.account-form .error-container .error,
		.account-form .error-container .info-txt {
			font-size: 13px;
			padding-top: 2px;
			padding-bottom: 1px;
		}

		.account-form .error-container .info-txt {
			color: #666;
		}

.account-get .btn-area .btn-login {
	width: 340px;
	margin: 0 auto;
}

.version {
	color: #ffffff;
}

@media all and (max-width:1279px) {

	body {
		background-color: #051469;
	}

		body.bg-white {
			background-color: #fff;
		}

	/* input box color */
	.wrap {
		background: none;
		height: auto;
		overflow: hidden;
	}

		.wrap.type-b {
			background: none;
		}

		.wrap.type-c {
			background: none;
		}

		.wrap.type-d {
			background: none;
		}

		.wrap.type-e {
			background: none;
		}

	.container {
		width: 100%;
		max-width: 375px;
		margin: 0 auto;
		overflow: hidden;
		padding-left: 30px;
		padding-right: 30px;
		padding-top: 14%;
		padding-bottom: 10%;
	}

	.sso-text, .login-wrapper {
		float: none;
		display: block;
		min-height: auto;
	}

	.sso-text {
		width: 100%;
		float: none;
		min-height: auto;
		height: auto;
		max-height: auto;
		padding-right: 0;
	}

		.sso-text p {
			font-size: 18px;
			text-align: center;
			opacity: 0.75;
		}

		.sso-text h1 {
			min-width: auto;
			font-size: 44px;
			text-align: center;
			margin-top: 2px;
		}

	.login-wrapper {
		width: 100%;
		max-width: 375px;
		background-color: transparent;
		padding: 54px 0 36px;
	}

	.logo {
		display: none;
	}

	.login-contents .lang {
		width: 100%;
		text-align: center;
		padding: 0 9%;
	}

	.lang .ko, .lang .en {
		text-align: center !important;
	}

		.lang .ko a, .lang .en a {
			display: inline-block;
			width: 100px;
			height: 40px;
			padding: 13px 0;
			background-color: #003baf;
			color: #4f9eff;
			border-radius: 20px;
			font-size: 14px;
		}

			.lang .ko a.active, .lang .en a.active {
				background-color: #fff;
				text-decoration: none !important;
				box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.15);
			}

	.login-contents .lang .en {
		margin-left: 4px;
	}

	.login .error-container .error {
		color: #fffa00;
		background: url("../images/error-outline-white@2x.png") no-repeat 0 0;
		background-size: 20px 20px;
		line-height: 1.4;
		padding-left: 26px;
	}

	.login-wrapper .bottom {
		/*margin-top: 20px;*/
		text-align: center;
	}

	.login .id-wrap {
		margin-bottom: 10px;
	}

	.login .pw-wrap {
		margin-bottom: 16px;
	}

		.login .id-wrap.outline, .login .pw-wrap.outline, .login.auth .auth-wrap.outline, .login.pw-reset .email-wrap.outline {
			border: 1px solid #fff;
		}

		.login .id-wrap.error, .login .pw-wrap.error, .login.auth .auth-wrap.error, .login.pw-reset .email-wrap.error {
			border: 2px solid #fffa00;
		}

	.login .id-wrap, .login .pw-wrap, .login .auth-wrap, .login .email-wrap {
		border-radius: 8px;
		/*background-color: #0051c3;*/
		padding: 13px 20px;
		/*border: 1px solid #0051c3;*/
		border: 1px solid white;
	}

		.login .id-wrap label, .login .pw-wrap label, .login .auth-wrap label, .login .email-wrap label {
			/*color: #62c9ff;*/
			color: white;
		}

		.login .id-wrap input, .login .pw-wrap input, .login .auth-wrap input, .login .email-wrap input {
			margin-top: 15px;
			background: transparent !important;
			border-bottom: 0;
			padding: 0;
			color: #fff;
			font-size: 18px;
		}

		.login .pw-wrap input {
			margin-top: 13px;
			padding-right: 15px;
		}

			.login .id-wrap input:focus, .login .pw-wrap input:focus, .login .auth-wrap input:focus, .login .email-wrap input:focus {
				border-bottom: 0;
			}

		.login .id-wrap.error input, .login .pw-wrap.error input, .auth-wrap.error input, .email-wrap.error input {
			border-bottom: 0;
		}

		.login .pw-wrap i {
			right: 12px;
			bottom: 17px;
		}

	.login input:-webkit-autofill {
		-webkit-box-shadow: none !important;
		-webkit-text-fill-color: #fff;
		font-size: 18px;
	}

		.login input:-webkit-autofill, input:-webkit-autofill:hover,
		.login input:-webkit-autofill:focus, input:-webkit-autofill:active {
			-webkit-box-shadow: none !important;
			transition: background-color 5000s ease-in-out 0s;
			-webkit-text-fill-color: #fff;
			font-size: 18px;
		}

	.btn-area {
		color: #ffffff;
	}

	.btn-area .tio-help-outlined {
		color: #ffffff;
	}

	.btn-area .btn-login {
		padding: 16px 0 15px;
		box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.15);
		background-color: #ffffff;
		color: #051469;
		margin-bottom: 15px;
	}

	.btn-area .passwordless {
		padding: 16px 0 15px;
		box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.15);
		background-color: #ffffff;
		color: #0068e8;
		margin-bottom: 15px;
	}

		.btn-area .btn-login.ftsize-ko {
			font-size: 16px;
			font-weight: 700;
		}

	.login .pw-wrap i.pw-eye-slash {
		background: url("../images/visibility-off-white@2x.png") no-repeat center;
		background-size: 22px;
	}

	.login .pw-wrap i.pw-eye {
		background: url("../images/visibility-on-white@2x.png") no-repeat center;
		background-size: 22px;
	}

	.login-wrapper .bottom .find-pw {
		color: #fff;
		padding-bottom: 10px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.5);
	}

	/* login auth code */
	.login.auth {
		margin-top: 34px;
	}

	.auth .code {
		padding-top: 0;
	}

		.auth .code .txt {
			color: #fff;
			text-align: center;
			font-size: 14px;
			margin-bottom: 20px;
		}

	.chk-save input[type=checkbox] + .checkbox {
		border: 1px solid #fff;
	}

	.chk-save input[type=checkbox]:checked + .checkbox {
		background: url("../images/m-chk-on@2x.png") no-repeat center #fff;
		background-size: 20px;
		border: 1px solid #fff;
	}

	.chk-save label {
		color: #fff;
		font-size: 15px;
	}

	.bottom.app-auth {
		margin-top: 50px;
	}

	/* login lock */
	.login.lock {
		padding-top: 56px;
	}

	.lock-area .icon {
		text-align: center;
		margin-bottom: 16px;
		width: 100%;
		height: 48px;
		background: url("../images/m-lock@2x.png") no-repeat center;
		background-size: 32px 42px;
	}

	.lock-area .txt, .email-send-area .txt {
		color: #fff;
		font-weight: normal;
		font-size: 20px;
		margin-bottom: 20px;
	}

	.lock-area .stxt, .email-send-area .stxt {
		color: #fff;
		font-size: 14px;
	}

	.login.lock .btn-area {
		margin-top: 77px;
	}

	/* reset email send */
	.login.email-send {
		padding-top: 45px;
	}

	.email-send .icon {
		background: url("../images/email-m.png") no-repeat center;
	}

	/* password reset */
	.login .tit-txt {
		color: #fff;
		font-size: 18px;
		text-align: center;
	}

	.login.pw-reset .txt {
		color: #fff;
		text-align: center;
		font-size: 14px;
	}

	/* notice */
	.bottom.notice-area {
		margin-top: 37px;
		margin-bottom: 30px;
	}

		.bottom.notice-area .tit-notice {
			color: #fff;
			background: url("../images/notice-white@2x.png") no-repeat 0 0;
			background-size: 20px 20px;
		}

	/* list style */
	.list-style li {
		color: #fff;
		font-size: 13px;
		padding-left: 11px;
		background: url("../images/icon-list-white.png") no-repeat;
		background-position: 0 4px;
	}

	/* Sub Full Box */
	.sub-container.account-get {
		width: 100%;
		height: 100%;
		padding-top: 0;
	}

	.sub-box {
		width: 1024px;
		margin: 0 auto;
		border-radius: 0;
		padding: 60px 40px;
	}

	.account-get .btn-area .btn-login {
		background-color: #0068e8;
		color: #fff;
	}

		.account-get .btn-area .btn-login.ftsize-ko {
			font-size: 18px;
		}
}

@media all and (max-width:1023px) {
	/* Sub Full Box */
	.sub-box {
		width: 100%;
	}

	.account-form {
		padding: 0;
	}

		.account-form li {
			width: 47%;
		}

			.account-form li:nth-child(2n-1) {
				margin-right: 5.8%;
			}

	.info-area {
		text-align: left;
		padding: 15px 12px 15px 36px;
		background: url("../images/notice-important.png") no-repeat 12px 14px #ecf4ff;
	}

		.info-area .icon {
			display: none;
		}
}

@media all and (max-width:700px) {
	.sub-box {
		padding: 40px 0;
	}

		.sub-box .title-area {
			padding: 0 30px;
		}

			.sub-box .title-area .title {
				font-size: 24px;
			}

			.sub-box .title-area .sub-title {
				font-size: 14px;
			}

	.account-form {
		padding: 0 30px;
	}

		.account-form ul {
			margin-bottom: 12px;
		}

		.account-form li {
			float: none;
			width: 100%;
			margin-bottom: 18px;
			margin-top: 0;
		}

			.account-form li label {
				font-weight: 700;
				color: #b8b8b8;
			}

			.account-form li:last-child {
				margin-bottom: 0;
			}

			.account-form li:nth-child(2n-1) {
				margin-right: 0;
			}

	.info-area {
		width: 100%;
		padding: 15px 30px 15px 54px;
		background-position: 30px 15px;
	}

	.account-get .btn-area {
		padding: 0 30px;
	}

		.account-get .btn-area .btn-login {
			width: 100%;
		}
}

@media all and (max-width:375px) {
	.container {
		padding-top: 9%;
		padding-bottom: 5%;
	}

	.login-wrapper {
		padding: 54px 0 36px;
	}

	.login-contents .lang {
		padding: 0 2%;
	}
}

/* 태블릿, 아이패드 + 아이패드 미니(가로) */
@media (max-width:1279px) and (min-width:768px) and (orientation: landscape) {
	.container {
		padding-top: 5%;
	}
}