@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');

html{width:100%; height:100%;}
body {width:100%; height:100%; overflow-x: hidden;overflow-y: auto; font-family: '���� ����', sans-serif; }

/*reset*/
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/


html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font: normal 12px/1em;
	letter-spacing:-0.03rem;
}


body {
    line-height:1;
}

button{border:none; outline: none; cursor: pointer;border-radius: 2px;}
input{height: 36px;border-radius: 2px; border:1px solid #ddd; background-color:#fff;}
select {height:36px;}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}

nav ul, ul, ol, li{
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {text-decoration: none;
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
	outline:none;
}
.container .content .input-group input:focus{
	border-bottom:2px solid #4482e3;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #999;
  font-weight:300;
  padding:0;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #999;
  font-weight:300;
  padding:0;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #999;
  font-weight:300;
  padding:0;
}
:-moz-placeholder { /* Firefox 18- */
  color: #999;
  font-weight:300;
  padding:0;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	appearance: none;
}
/*���*/
.container {
	width:100%; 
	height:100%;
	box-sizing:border-box;
	margin:0;
	padding:0;
	position:relative; 
}
.container .bg_box {
	width:100%; 
	height:100%;
	background:#f4f6f9;
	position:absolute;
	right:0;
	min-height:700px;
}


.container .bg_box .half-box{
	width:100%;
	height:50%;
	position:absolute;
	right:0;
	bottom:0;
	background:#dd1a21;
}
.container .bg_box .half-box.block{
	background:#333;
}
.container .bg_box .half-box.blue{
	background:#1a71dd;
}
.container .content {
	width:460px;
	background:#fff;
	position:absolute;
	left:0;
	left:50%;
	top:50%;  
	margin-top:-250px;
	transform:translateX(-50%);
	-ms-transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-o-transform: translateX(-50%); 
	box-shadow:1px 5px 60px rgba(0,0,0,0.1);
	border-radius:3%;
}
.logo{
	position:absolute;
	top:-100px;
	left:50%;
	margin-left:-100px; /* 20250108 로그인 이미지 수정(-140px -> -100px) */
}
.login-title{
	text-align:center;
	margin-bottom:35px;
}

.container .content .loginForm { 
	padding:50px 80px;
	margin:0 auto;
	text-align:center;
	width:100%;
	box-sizing:border-box;
}
.container .content .loginForm .loginLogo { margin:20px 0 60px;display:block;text-align:left;}
.container .content .input-group {
	width:100%;
	margin-bottom:20px;
	position:relative;
	text-align:left;
}
.container .content .input-group label {
	font-size:14px;
	font-weight:500;
	color:#222;
	display:inline-block;
	margin-bottom:5px;
}
.container .content .input-group input {
	width:100%;
	height:40px;
	border:none;
	text-indent:5px;
	font-size:14px;
	box-shadow:none;
	border-bottom:2px solid #2c333a; 
	color:#888; 
	border-radius:0; 
	padding:0;
}
.container .content .input-group input:placeholder{
	padding:0;
}
.container .content .input-group .input-wrap{
	position:relative;
}
.container .content .input-group button{
	position:absolute;
	letter-spacing:-0.1rem;
	right:0;
	bottom:10px;
	padding:3px 8px;
	border-radius:15px;
	color:#8b8b8b;
	background:#f6fbff;
	border:1px solid #ced4dd;
	width:86px;
}
.container .content .input-group button:hover{
	background-color:#eceff1;
	transition: transform ease background-color 0.5s;
}
.login_btn:hover {
	background:#4bb6fa;
	transition: transform ease 1s;
}
.check_box{
	text-align:left;
}
.check_box input[type=checkbox] {
	display:none;
}
.check_box input[type=checkbox] + label {
	font-size:14px;
	text-align:left;
	display: inline-block;
    cursor: pointer;
    line-height: 20px;
    padding-left: 30px;
    position: relative;
}
.check_box input[type=checkbox] + label::before{
	content: '';
    width: 20px;
    height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 30px;
    border: 1px solid #bbb;
}

.check_box input[type=checkbox]:checked + label::before{
	border: 1px solid #dd1a21;
    background-color: #dd1a21;
}
.check_box input[type=checkbox]:checked + label::after{
	content: "";
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 7px;
    border: 2px solid #fff;
    border-left: none;
    border-top: none;
    transform: translate(7.75px,4.5px) rotate(45deg);
    -ms-transform: translate(7.75px,4.5px) rotate(45deg);
}
.td_box {width:80%;margin:0 auto; }
.td_box tr td {width:50%; text-align:center; height:16px; font-size:14px; color:#666;letter-spacing:-1px; }
.td_box tr td:hover {color:#999;}

.LoginButton{width:100%; }
.LoginButton .twinButton{
	display:flex;
	justify-content: space-between;
}
.LoginButton .twinButton button{
	width:49%;
	justify-items: flex-end;
}
.LoginButton .twinButton .login_btn.cancel{
	color:#666;
	background:#eee;
	border:1px solid #ddd;
}
.LoginButton button{
	width:100%; 
	opacity:1;
	background:#4b78a8;
	border:none;
	font-size:15px;
	color:#fff;
	letter-spacing:-1px;
	margin:20px 0 20px 0 ;
	height:50px;
	font-weight:bold; 
	border-radius:5px;
}
.find-box ul{
	width:100%;
}
.find-box ul:after{
	display:block;
	content:'';
	clear:both;
}
.find-box ul li{
	float:left;
	width:49%;
}
.find-box ul li a{
	color:#555;
	font-size:14px;
}
.find-box ul li:first-child{
	border-right:1px solid #ddd;
}


.login-footer{
	position:absolute;
	bottom:-80px;
	left:50%;
	margin-left:-140px;
}
.login-footer p{
	font-size:12px;
	text-align:center;
	color:rgba(255,255,255,0.7);
}
.login-footer p span{
	color:rgba(255,255,255,1);
	font-weight:500;
	font-size:14px;
	line-height:3;
}

.black{
	background:#0e1d2d !important;
}

.blue{
	background:#4b78a8 !important;
}

.confirm-text{
	line-height:1.5;
	padding-bottom:15px;
}
.confirm img{
	margin-top:20px;
	margin-bottom:30px;
}
.confirm span{
	font-size:12px;
	line-height:1.5;
}

.cs-info{
	margin-top:30px;
	font-size:14px;
	color:#666;
}


.confirm-text{
	line-height:1.5;
	padding-bottom:15px;
}
.confirm img{
	margin-top:20px;
	margin-bottom:30px;
}
.confirm span{
	font-size:12px;
	line-height:1.5;
}

.id-find{
	width:100%;
	padding-bottom:50px;
	margin-bottom:20px;
}

.id-find p.guide{
	font-size:12px;
	padding-bottom:30px;
	line-height:1.5;
}
.id-find .result-box{
	border-radius:5px;
	background:#f3f3f3;
	border:1px solid #e8e8e8;
	padding:15px;
}
.id-find p.result{
	font-weight:bold;
	line-height:1.5;
}
.id-find p.result span{
	color:#4bb6fa;
	padding-left:5px;
	padding-right:5px;
}

.container .content .id-find .guide{
	color:#222222;
	font-size:14px;
	text-align:center;
	margin-top:8px;
}

.guide{
	color:#e93636;
	font-size:12px;
	text-align:left;
	margin-top:8px;
}

.input-box span{
	text-align:right;
	position:absolute;
	right:95px;
	bottom:17px;
	font-size:13px;
}