/* COMMON */

*{margin:0;padding:0;  box-sizing: border-box;}
html,body{width:100%; margin: 0 auto; overflow-x:hidden;}
html{overflow-y:scroll}
html body{
    font-size:14px;
    font-family: "NanumSquareRound", sans-serif;
	color: #fff;
	line-height: 1;
	background-color:#fff;
	*word-break:break-all;
	-ms-word-break:break-all;
}
body,h1,h2,h3,h4,h5,h6,th,td,input,textarea,select,option,a,b{
	font-size:14px;
	font-family: "NanumSquareRound", sans-serif;
	color: #666666;
	line-height: 1;
}
body p{margin:0;padding:0}
img,fieldset,iframe{border:0 none}
ul,ol,li{list-style:none;margin:0;padding:0;}
em,address{font-style:normal}
img,input,select,textarea{vertical-align:middle}
a{text-decoration:none;cursor:pointer}
a:hover{color:#404040;text-decoration:none}
button,label{cursor:pointer;_cursor /**/:hand}
button *{position:relative}
textarea{overflow:auto}
option{padding-right:6px}
.input_text, textarea{*margin:-1px 0;padding-right:1px}
.input_check, .input_radio{width:13px;height:13px}
.blind, legend, caption{text-indent:-9999px;font-size:0;height:0;line-height:0;overflow:hidden}
hr{display:none}
legend{*width:0}
:root legend{font-size:0;line-height:0}
caption{*line-height:0}
.cls::after {content: ''; clear: both; display: block; }
.fl-l {float: left !important; }
.fl-r {float: right !important; }
.ta-l {text-align: left !important;}
.ta-c {text-align: center !important;}
.ta-r {text-align: right !important;}
.va-t {vertical-align: top !important;}
.va-m {vertical-align: middle !important;}
.d-none {display: none !important; }
.pb-20 {padding-bottom: 20px;}
.pb-30 {padding-bottom: 30px;}
.mt-15 {margin-top:15px;}
.mt-30 {margin-top:30px;}
.mt-24 {margin-top: 24px;}
.mb-10 {margin-bottom: 10px;}
.mb-20 {margin-bottom: 20px;}
.mb-34 {margin-bottom:34px;}
.bt_line {border-bottom:solid 1px #dfdfdf;}
textarea:focus{outline:none !important;}
button:focus{outline:none !important;}
.t_line {border-right:solid 1px #dfdfdf;}
.bt_line_lt{border-bottom: 1px solid #e0e0e0;}
.bdt_line_lt{border-top: 1px solid #e0e0e0;}
.lt_line {border-left:solid 1px #dfdfdf;}
.inline-block{display:inline-block;}
.cursor {cursor: pointer;}
/* */


/* TABLE */
table {width: 100%; white-space: nowrap; border: solid 1px #dfdfdf;}
tbody {background: #fff;}
thead {background: #fff;}
tr:hover {background: #EDF0FF;}
th, td {color: #404040; padding: 10px; text-align: center;}
td{position: relative;}
.w15 {width: 15%;}
.w25 {width: 25%;}
.w30 {width: 30%;}
/*  */



@media (max-width: 767px){

	.dark .login_wrap {
		background: none;
	}

	.login_wrap{
		width: 100%;
		min-width: auto;
		display: block;
		position: relative;
		min-width:auto;
		margin: 0 auto;
		background: 0;
		min-height: auto;
		padding: 25% 8% 8% 8%; /* 2020-11-27 */
		background:#000 url('../img/login/login_main_bg_m.png') no-repeat top;
	}
	.login_wrap::before {
		content: "";
		opacity: 0.2;
		position: absolute;
		top: 0px;
		left: 0px;
		right: 0px;
		bottom: 0px;
		background-color: #000000;
	}
	.id-check-form {
		width: 100%;
		min-height: 360px;
		height: 100%;
    	padding: 10% 8% 10% 8%;
	}

	.id-check-form h2 {
		font-size: 24px;
		padding: 0;
		margin-bottom: 10px;
	}

	.id-check-form p {
		font-size: 14px;
	}

	.id-name {
		font-size: 16px;
	}

	.id-name + div {
		font-size: 16px;
	}

	.id-box {
		width: 100%;
		height: 144px;
		padding: 55px 15px 45px 15px;
		margin: 15px 0px 0px 0;
	}

	.id-box img {
		padding: 4px 15px 0 0;
	}


	.login-btn-lg {
		padding: 0 !important;
	}

	.login-btn-lg button {
		width: 100%;
		height: 60px;
		border-radius: 5px;
		background-color: #f17700;
		border: 0;
		color: #fff;
		font-size: 18px;
		font-weight: 700;
	}

	.login-btn-lg + div {
		letter-spacing: -1.7px !important;
	}

	.login-form {
		width: 100%;
		min-width: auto;
		display: inline-block;
		height: 100% !important;
		margin: 0 auto;
		padding: 10% 8% 10% 8% !important;
		color: #999999;
		position: relative;
		border-radius: 5px;
	}

	.login-form h2 {
		font-size: 24px;
		margin-bottom: 10px;
	}

	.login-form p {
		font-size: 14px;
		letter-spacing: -1.2px;
	}

	.mt-24 {
		margin-top: 10px;
	}

	.login-form input {
		width: 100%;
		font-size: 16px;
	}

	.login-middle span {
		font-size: 14px;
	}

	.login-bottom {
		width: 100%;
		padding: 20px 42px;
		border-radius: 5px;
		background-color: #e2e2e2;
		margin: 0;
		position: relative;
		top: -6px;
		text-align: center;
	}

	.login-bottom p {
		font-size: 14px;
		text-align: center;
		float: none !important;
	}

	.login-bottom button {
		float: right;
	}

	.main-right .login-middle {
		padding-top: 16px;
		text-align: center;
	}

	.login-middle span:first-child::after {
		content: "";
		display: inline-block;
		margin: 0px 9px -1px 13px;
		width: 1px;
		height: 13px;
		background-color: #666;
	}

	a.code, a.code:hover {
		font-size: 14px;
	}

	.fixed-area {
		width: 100%;
		font-size: 16px;
		font-weight: 700;
	}

	.pw-check .login-form p {
    	line-height: 16px;
	}
}

@media (max-width: 360px) {
	a.code, a.code:hover {
		font-size: 13px;
		position: absolute;
		top: 23px;
		right: 15px;
		text-decoration: underline;
		letter-spacing: -0.45px;
	}

	.login-form input {
		font-size: 14px;
	}

	.pw-check .login-form p {
		padding-top: 0;
	    padding-bottom: 14px;
    	line-height: 16px;
	}

	.login-btn-lg + div {
		line-height: 16px;
	}

	.fixed-area {
		font-size: 14px;
		padding: 20px 15px 20px 15px;
	}

	.login-bottom {
		padding: 20px 25px;
	}

	.login-bottom button {
		position: relative;
		right: 29%;
		margin-top: 10px;

	}
}

@media (min-width: 370px) and (max-width:767px) {
	.login-bottom p {
		font-size: 14px;
		text-align: center;
		float: none !important;
	}
	.login-bottom button {
		float: none !important;
		margin-top: 10px;
		width: 150px;
	}
}