@charset "utf-8";
@import url('/resource/gw/css/kor/font-awesome.css');

/* common */
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-size:100%; vertical-align:baseline; background:transparent;}
article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section {display:block;}
nav ul {list-style:none;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after, q:before, q:after {content:''; content:none;}
ins {background-color:#ff9; color:#000; text-decoration:none;}
mark {background-color:#ff9; color:#000; font-style:italic; font-weight:bold;}
del {text-decoration: line-through;}
i {font-style:normal;}
abbr[title], dfn[title] {border-bottom:1px dotted; cursor:help;}
hr {display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0;}
table {border-collapse:collapse; border-spacing:0;}
li{list-style:none;}
img {border:0 none;}
.hidden {position:absolute; left:-9999px; top:-9999px; width:0; height:0; font-size:0; line-height:0;}
  /* form reset */
input, select, textarea, button {border-radius:0; box-shadow:none;}
button, input[type="submit"] {cursor: pointer; border:0 none; margin:0; padding:0;}
input:focus, button:focus, select:focus, textarea:focus {outline:0;}
button::-moz-focus-inner {border:0 none; padding:0;}

html, body {width:100%; height:100%; }
body,th,td,input,select,textarea,button,
a {
	font-weight:normal; font-size:100%; font-family:'Malgun Gothic','맑은 고딕','Dotum','돋움','Gulim','굴림',sans-serif; 
	font-size:12px; line-height:1.3; color:#555; letter-spacing:-0.5px; text-decoration:none;
}


@media screen and (min-width: 1200px) {
  html {overflow-x:hidden !important;}
}

html,body {background:/*#ebf0f3*/#fff !important;}

body {
	position:relative;
	display:table; 
	padding:100px 0 150px;
	width:100%; height:100%;
	box-sizing:border-box;
}
/*
body:before {
	content:'';
	position:absolute; bottom:0; left:0;
	width:100%; height:150px;
  background:url('/resource/gw/images/kor/g2works/login/login_bg.png') no-repeat 0 0;
  background-size:100% 100%;
}
body:after {
	content:'';
  position:absolute; bottom:22px; left:50%;
  margin-left:-121px;
  width:242px; height:30px;
  background:url('/resource/gw/images/kor/g2works/login/g2works_logo_w.png') no-repeat center center;
  background-size:auto 100%;
}
*/
#loginWrap {
	display:table-cell; vertical-align:middle;
}

#contents {
	margin:0 auto 30px; padding:20px 85px; 
	width:1000px; 
	/*border-radius:0 0 3px 3px; border-top:5px solid #0871b9; */
	box-sizing:border-box;  
	background:#fff; 
	/*box-shadow:0 0 5px rgba(0,0,0,.1); */
	text-align:center;
}

/* logo */
.logo {margin:0 auto 80px; /* max-height:50px; */}
.logo img {width:178px; height:30px;}

#contents fieldset {
  font-size:0; 
}

.login-box ,
.quick-board {
	display:inline-block; 
	width:50%; 
  box-sizing:border-box;
	vertical-align:top;
}

/* type select */
.login-type-select {
	margin-bottom:10px;
	width:100%;
	border-top:1px solid #dfe8f3;
	background:#f6f8f9;
	font-size:0;
}
.login-type-select li {
	display:inline-block;
	margin:0 10px;
	width:60px;
	vertical-align:top;
}
.login-type-select input[type="radio"] {
	display:none;
}
.login-type-select label {
	position:relative;
	display:block;
	font-weight:bold;
	font-size:12px; line-height:39px;
	color:#666;
	cursor:pointer;
}
.login-type-select input[type="radio"]:checked + label {
	color:#0871b9;
  cursor:pointer;
}
.login-type-select input[type="radio"]:checked + label:before {
	content:'';
	position:absolute; bottom:0; left:0;
	width:100%; height:3px;
	background:#0871b9;
}

/* form */
.login-box {
	position:relative;
	padding-right:45px;
	/*height:260px;*/
}
.login-box .form-wrap {
	width:100%;
}
.login-box .form-wrap li {
	position:relative;
	margin-bottom:15px;
}
.login-box .form-wrap li label {display:block; text-align:left; font-size:14px; margin-bottom:10px;}
.login-box .form-wrap li input {
	position: relative;
	z-index:55;
	padding-left:46px;
	width:100%; height:50px;
	border-radius:4px;
	border:1px solid #d3d9db;
  box-sizing:border-box;
  background: transparent;
  font-size:12px; color:#555;
}
.login-box .form-wrap li input:focus {
	border-color:#146af0;
}
.login-box .form-wrap li:nth-child(1):before,
.login-box .form-wrap li:nth-child(2):before {
  content:'';
  position:absolute; top:18px; left:20px;
  width:14px; height:14px;
  background:url('/resource/icon_id.png') no-repeat 0 0;
}
.login-box .form-wrap li:nth-child(2):before {
	height:15px;
  background:url('/resource/icon_pw.png') no-repeat 0 0;
}

.form-wrap .login_text {
	display:none;
	position:absolute; top:13px; left:100px;
  font-size:12px; line-height:24px;
  color:#fb315c;
  text-align:center;
}
.login-box .form-wrap + p {
	margin-bottom:5px;
	text-align:left;
}
.login-box .form-wrap + p input {
	display:none;
}
.login-box .form-wrap + p input + label {
	position:relative;
	display:block;
	padding-left:20px;
	font-size:12px; line-height:14px; color:#888;
	cursor:pointer;
}
.login-box .form-wrap + p input + label:before {
	content:'\f00c';
	position:absolute; top:1px; left:0;
	display:inline-block;
	width:14px; height:14px;
	border:1px solid #ccc;
	box-sizing:border-box;
	border-radius:50%;
	font-size:10px; line-height:12px;
	font-family: 'FontAwesome';
	color:#ccc;
  text-align:center;
}
.login-box .form-wrap + p input:checked + label:before {
  border-color:#f6921d;
  background:#f6921d;
  color:#fff;	
}
.login-box .btn-wrap {
  position:absolute; bottom:0; left:0;
  padding-right:45px;
  width:100%;
  box-sizing:border-box;
}
.login-box .btn-wrap li {
	margin-top:10px;
}
.login-box .btn-wrap li a {
	display:block; 
	width:100%; height:56px;
	border-radius:4px;
	background:#146af0;
	font-weight:bold; font-size:16px; line-height:56px;
	color:#fff;
	transition:.3s;
}
.login-box .btn-wrap li a:hover {box-shadow: 1px 2px 3px rgb(0 0 0 / 20%);}
.login-box .btn-wrap li:nth-child(2) a {
	background:#4bc5c3;
}

/* board */
.quick-board {
	padding-left:45px;
  border-left:1px dashed #d3d9db;
}
.notice-wrap,
.system-wrap {
	position:relative; 
	width:100%; height:150px; 
	border:1px solid #dfe8f3; border-radius:3px; 
	text-align:left;
}
.notice-wrap {
	margin-bottom:10px; 
}
.notice-wrap h2,
.system-wrap h2 {
	padding:0 20px; 
	background:#f6f8f9; 
	font-weight:bold; font-size:13px; line-height:39px; 
	color:#111;
}
.notice-wrap h2 {
	color:#0871b9;}
.notice-wrap > ul,
.system-wrap > ul {
	padding-top:15px;}
.notice-wrap > ul li a,
.system-wrap > ul li a {
	overflow:hidden; position:relative; 
	display:block;
	padding-left:30px; 
	max-width:95%; 
	box-sizing:border-box; 
	font-size:12px; line-height:27px; color:#444; 
	white-space:nowrap; 
	text-overflow:ellipsis;
}
.notice-wrap > ul li a:before,
.system-wrap > ul li a:before {
	content:''; 
	position:absolute; top:50%; left:20px;
	margin-top:-1.5px; 
	width:3px; height:3px; 
	border-radius:50%; background:#0871b9;
}
.notice-wrap > ul li a:hover,
.system-wrap > ul li a:hover {
  color:#0871b9;
  text-decoration:underline;
}
.notice-wrap > a,
.system-wrap > a {
  position:absolute; top:10px; right:10px;
  z-index:55;
  width:20px; height:20px;
  border-radius:50%;
  background:#e7e8ed;
  font-size:0;
}
.notice-wrap > a:before,
.notice-wrap > a:after,
.system-wrap > a:before,
.system-wrap > a:after {
  content:'';
  position:absolute; top:50%; left:50%;
  background:#8e94a4;
}
.notice-wrap > a:before,
.system-wrap > a:before {
  margin:-5px 0 0 -1px;
  width:2px; height:10px;
}
.notice-wrap > a:after,
.system-wrap > a:after {
  margin:-1px 0 0 -5px;
  width:10px; height:2px;
}

#footer {
	text-align:center;
	font-size:0;
}
#footer > img,
#footer .copyright {
	display:inline-block; vertical-align:middle;
}
#footer > img {
	margin-right:10px;
}
#footer .copyright {
	font-style:normal;
	font-size:12px; color:#333;
}
#footer .copyright img {
	margin:0 3px 0 10px;
}
#footer .copyright span {
	font-weight:bold;
	color:#0871b9;
}

#loading_message_txt {
	display:none;
	padding:20px 10px;
}
#loading_message_txt img {
	display:inline-block;
	margin-right:10px;
	vertical-align:middle;
}