@charset "utf-8";
/* @import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css); */
@import url(xeicon.min.css);
/* Noto Sans KR (korean) http://www.google.com/fonts/earlyaccess */
@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 100;
	src: url(../fonts/NotoSansKr/NotoSansKR-Thin.woff2) format('woff2'),
		url(../fonts/NotoSansKr/NotoSansKR-Thin.woff) format('woff'),
		url(../fonts/NotoSansKr/NotoSansKR-Thin.otf) format('opentype');
}
@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 300;
	src: url(../fonts/NotoSansKr/NotoSansKR-Light.woff2) format('woff2'),
		url(../fonts/NotoSansKr/NotoSansKR-Light.woff) format('woff'),
		url(../fonts/NotoSansKr/NotoSansKR-Light.otf) format('opentype');
}
@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 400;
	src: url(../fonts/NotoSansKr/NotoSansKR-Regular.woff2) format('woff2'),
      url(../fonts/NotoSansKr/NotoSansKR-Regular.woff) format('woff'),
      url(../fonts/NotoSansKr/NotoSansKR-Regular.otf) format('opentype');
}
@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 500;
	src: url(../fonts/NotoSansKr/NotoSansKR-Medium.woff2) format('woff2'),
      url(../fonts/NotoSansKr/NotoSansKR-Medium.woff) format('woff'),
      url(../fonts/NotoSansKr/NotoSansKR-Medium.otf) format('opentype');
}
@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 700;
	src: url(../fonts/NotoSansKr/NotoSansKR-Bold.woff2) format('woff2'),
      url(../fonts/NotoSansKr/NotoSansKR-Bold.woff) format('woff'),
      url(../fonts/NotoSansKr/NotoSansKR-Bold.otf) format('opentype');
}
@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 900;
	src: url(../fonts/NotoSansKr/NotoSansKR-Black.woff2) format('woff2'),
      url(../fonts/NotoSansKr/NotoSansKR-Black.woff) format('woff'),
      url(../fonts/NotoSansKr/NotoSansKR-Black.otf) format('opentype');
} 


/* reset st*/
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,
dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 18px; font: inherit;  font-family: 'Noto Sans KR', sans-serif; text-decoration: none;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section { display: block;}
/* body {line-height: 1;} */
ol, ul {list-style: none;}
blockquote, q { quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content: ''; content: none;}
table { border-collapse: collapse; border-spacing: 0;}
/* input, select{-webkit-appearance: none;-moz-appearance:none;appearance:none; border:none; vertical-align: middle; outline: none;} */
input[type='checkbox']{-webkit-appearance: none;-moz-appearance:none;appearance:none; border:none; vertical-align: middle; outline: none;}
/* select::-ms-expand { display: none;} */
i{vertical-align: middle}
button{cursor: pointer;}
/* reset end */
.checkboxArea{}
.checkboxArea > input[type='checkbox']{display: none;}
.checkboxArea > input[type='checkbox'] + label { position: relative; cursor: pointer; padding: 0;}
.checkboxArea > input[type='checkbox']+ label:before { content: "";display: inline-block; width: 20px; height: 20px; margin-top:-4px; margin-right: 14px; border-radius: 4px; border:1px solid #dadce0; background:#fff; vertical-align: middle; box-sizing: border-box;}
.checkboxArea > input[type='checkbox']:focus + label:before { box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);}
.checkboxArea > input[type='checkbox']:checked + label:before { background: #1fb5a9; border-color: #1fb5a9;}
.checkboxArea > input[type='checkbox']:disabled + label {color: #b8b8b8; cursor: auto;}
.checkboxArea > input[type='checkbox']:disabled + label:before { box-shadow: none; background: #ddd;}
.checkboxArea > input[type='checkbox']:checked + label:after { content: ""; position: absolute; left: 5px; top: 11px; background: #fff; width: 2px; height: 2px; box-shadow: 2px 0 0 #fff, 4px 0 0 #fff, 4px -2px 0 #fff, 4px -4px 0 #fff, 4px -6px 0 #fff, 4px -8px 0 #fff;  transform: rotate(45deg);}

.wp100 {width:100% !important}
input.pl-c::placeholder{color: #999; text-align: center;}

/* Common Layout */
body{ background-color: #f5f6fa;}
#wrap {width:100%; min-width:1400px; max-width: 1920px; margin: 0 auto;}
#header {width:100%; min-width:1400px;}
#container {width:100%; min-width:1400px;}
#footer { min-width:1400px; padding:30px 60px; text-align:right; font-size:14px; line-height:18px; color:#c5c5c5; }
#footer > address > span{color:#1fb5a9; }


/* Header */
#header .main-header {width:100%; min-width:1400px; margin:0 auto; padding:40px 79px; text-align: left;}
#header .main-header h1.logo {line-height: 0;}


/* Container */
#mainContent {margin:43px auto 0;}
#mainContent:after {display:block; clear:both; content:''}

.login {width:385px; margin:0 auto;}
.login .login-info {width:100%;}
.login .login-info li{margin-bottom: 12px; text-align: center;}
.login .login-info li.log-title {margin:64px 0 37px; font-size: 26px; line-height: 37px; color:#202124; font-weight: 700; text-align: center;}

.login .login-form {width:100%; margin-top:26px}
.login .login-form li {margin-bottom: 12px;}
.login .login-form li label {display:none}
.login .login-form li > input.input {width:100%; padding:19px 0; text-indent: 34px; border:1px solid #dadce0; border-radius:10px; box-sizing: border-box; font-size: 16px; line-height:16px; letter-spacing:-.4px; color: #202124;}
.login .login-form li > input.input::placeholder{color:#76787d}
.login .login-form li .id-save {display:inline-block; cursor:pointer; color: #76787d;}
.login .login-form li.checkboxArea {margin-top:2px;}
.login .login-form li .reset {float:right}
.login .login-form li .reset:after {display:block; clear:both; content:''}
.login .login-form li .reset a:hover{text-decoration:underline}
.login .log-btn {width:100%; margin-top: 24px;}
.login .log-btn > .btn{padding: 0;}
.login .log-btn a {display:block; width:100%; height:68px; line-height: 68px; border-radius:10px; background:#1fb5a9; color:#fff; font-size: 20px; letter-spacing: -.5px; text-align: center;}
.login .log-btn a:hover{background:#18917E;}
.login .log-btn a:active,
.login .log-btn a:focus {background:#0f6355;}

/* 클라이언트 다운로드 추가 2016-12-05 */
.main-down-area {clear:both;width:385px; margin:48px auto 67px; padding-top:48px; border-top:1px solid #dadce0}
.main-down-area h2{margin-bottom:12px; font-weight: 700; font-size: 18px; line-height: 26px; color:#202124;}
.main-down-area p {font-size:16px; line-height:24px; color:#76787d}
.main-down-area a {display:inline-block; margin-top:24px; font-size: 16px; line-height: 24px; color: #202124; }
.main-down-area a::after{content: ''; display: block; width: calc(100% - 27px); height:1px; background-color: #202124;}
.main-down-area a >img{vertical-align: text-top;}



/* Layer Pop 추가 2015-09-30 */
.modal-bg {display:none; position:absolute; top:0; left:0; width:100%; height:100%; text-indent:-9999px; background:#333; opacity:0.5; z-index:101; overflow-x:hidden}
.modal-area {display:none; position:fixed; top:32%; left:50% !important; width:545px; background:#fff; z-index:110; border-radius:2px; border:2px solid #202124;  transform: translateX(-50%);;}
.modal-area2 {display:none; position:fixed; top:5%; left:10px; width:400px; background:#fff; z-index:110; border-radius:6px; border:3px solid #1fb5a9}
.modal-area3 {display:none; position:fixed; top:5%; left:420px; width:400px; background:#fff; z-index:110; border-radius:6px; border:3px solid #1fb5a9}
.modal-area4 {display:none; position:fixed; top:5%; left:830px; width:400px; background:#fff; z-index:110; border-radius:6px; border:3px solid #1fb5a9}
.modal-header {padding:15px 20px; border-bottom:none; text-align: center; }
.modal-header h2 {font-weight: 700; font-size: 20px;}
.modal-header h2 em {margin-left:6px}
.modal-close,
.modal-close2,
.modal-close3,
.modal-close4 {position:absolute; top:18px; right:22px; font-size:14px; font-weight:bold; color:#444; cursor:pointer;}
.modal-close{display: none;}
.modal-body {padding:15px 20px 30px}
.modal-body h3 {padding-top:6px; font-size:14px; font-weight:bold; line-height:20px}
.modal-body h3.con-tit {font-size:13px}
.modal-body .body-con {padding:20px; margin-top:10px; border:1px solid #ddd; border-radius:6px; background:#f4f4f4}
.modal-body .body-con p {font-size:13px; line-height:20px}
.modal-body form {}
.modal-body form legend {display:none}
.modal-body form label {display:inline-block; width:100px; font-weight:bold}
.modal-body form input[type="text"] {width:73%; padding:8px 7px; border:1px solid #ccc}
.modal-body form input[type="text"]:focus {border:1px solid #437981}
.modal-body ul.pw-reset {}
.modal-body ul.pw-reset li {margin:10px 0}
.modal-footer {width:100%; padding:15px 0; border-top:none;}
.modal-footer div.foot-btn {width:76%; margin:0 auto; text-align:center}
.modal-footer div.foot-btn a {display:inline-block; width:40%; font-weight:bold; text-align:center; padding:9px 0; margin-right:3%; border-radius:4px; background:#1fb5a9; color:#fff}
.modal-footer div.foot-btn a:hover,.modal-area .modal-footer div.foot-btn a:active,.modal-area .modal-footer div.foot-btn a:focus {background:#437981}
.modal-footer div.foot-btn a.btn-cancel {background:#666; color:#fff}
.modal-footer div.foot-btn a.btn-cancel:hover,.modal-area .modal-footer div.foot-btn a.btn-cancel:active,.modal-area .modal-footer div.foot-btn a.btn-cancel:focus {background:#555}
.modal-footer div.foot-btn a.last {margin-right:0}
.modal-footer ul.modal-day {position:relative}
.modal-footer ul.modal-day li {}
.modal-footer ul.modal-day li a {width:30%}
.modal-footer ul.modal-day li span {position:absolute; top:12px; right:-25px; font-size:12px}
.modal-footer ul.modal-day li span input[type="checkbox"] {vertical-align:top; margin-top:1px}

.sec-page {margin:50px 0}

.modal-body .snap-conts-area {height:207px; border:1px solid #ddd; border-radius:4px; background:#f8f8f8; overflow-y:scroll}
.modal-body .snap-conts {padding:10px 20px}
.modal-body .snap-conts li {margin:10px 0; padding:8px; font-size:13px; text-indent:25px; border:1px solid #eee; background:#fff url('../img/icon_snapshot.png') 0 -2px no-repeat}
.modal-body .snap-conts li input[type="radio"] {position:relative; top:3px; margin-right:5px; outline:none}
.modal-body .snap-conts li input[type="radio"]:active,.modal-body .snap-conts li input[type="radio"]:focus {border:0}
.modal-body .snap-conts label {display:inline-block; width:94%; font-weight:normal}

.btn-snap {text-align:center}
.btn-snap button {display:inline-block; width:15%; text-align:center; padding:6px 0; border:1px solid #1fb5a9; margin:0 10px; border-radius:2px; background:#1fb5a9; color:#fff; cursor:pointer}
.btn-snap button:hover,.btn-snap a:active {background:#437981; border-color: #437981;}
.btn-snap button.btn-restore{background-color: #1d8dd4; color: #fff; border-color: #1d8dd4;}
.btn-snap button.btn-default{background-color: #fff; color: #999; border-color: #999;}

/* loading-area */
.loading-area {position:absolute; width:250px; height:120px; top:51%; left:43%; z-index:9999}
.loading-area img {text-align:center}