@charset "utf-8";

/*
css name : component
use : align,display,layout,header,footer,lnb,aside
*/

/* ==================================================
	웹 폰트
================================================== */
@font-face {font-family:nsq;font-weight:100;font-style:normal;src:url(../font/NanumSquareL.eot);src:local(※),url(../font/NanumSquareL.woff) format('woff')}
@font-face {font-family:nsq;font-weight:400;font-style:normal;src:url(../font/NanumSquareR.eot);src:local(※),url(../font/NanumSquareR.woff) format('woff')}
@font-face {font-family:nsq;font-weight:700;font-style:normal;src:url(../font/NanumSquareB.eot);src:local(※),url(../font/NanumSquareB.woff) format('woff')}
@font-face {font-family:nsq;font-weight:900;font-style:normal;src:url(../font/NanumSquareEB.eot);src:local(※),url(../font/NanumSquareEB.woff) format('woff')}


/* ==================================================
	RESET
================================================== */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, xmp,
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:100%;font:inherit;vertical-align:baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block;}
ol, ul {list-style:none;}
table {border-collapse:collapse;border-spacing:0;}
th,td {vertical-align:middle;box-sizing:border-box;}
a:link, a:visited, a:hover, a:active {color:inherit;text-decoration:none;outline:none;}
b,strong {font-weight:700;}
input, textarea, select, button {margin:0;padding:0;font:inherit;}
button {border:0;background:none;outline:none;vertical-align:baseline;cursor:pointer;}
button > span {position:relative;vertical-align:baseline;}
button::-moz-focus-inner, input::-moz-focus-inner {padding:0;border:0;}
button[disabled], input[disabled] {cursor:default;}
textarea {overflow:auto;}
textarea, input {resize:none;}
legend {visibility:hidden; font-size:0;}
audio:not([controls]) {display:none;height:0;}
svg:not(:root){overflow:hidden;}
input[type="text"]::-ms-clear,
input[type="password"]::-ms-clear{display:none;}
input[type="button"],
input[type="reset"],
input[type="submit"]{border-radius:0;-webkit-appearance:button;appearance:button;cursor:pointer;}
button,
textarea,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="search"],
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {border-radius:0;-webkit-border-radius:0;appearance:none;-webkit-appearance:none;}
select {border-radius:0;-webkit-border-radius:0;}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button{margin:0;-webkit-appearance:none;}
img {max-width:100%; max-height:100%;}

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


/* ==================================================
	공통레이아웃
================================================== */
html,
body {min-width:320px;width:100%;height:100%;background-color:#fff;color:#2D2D2D;font-family:nsq,sans-serif;font-weight:400;-webkit-text-size-adjust:none;}
html {font-size:62.5%;}
body {position:relative;font-size:1.2rem;line-height:1.4;}
#page {display:flex; display:-webkit-flex; flex-direction:column; -webkit-flex-direction:column; width:100%;min-height:100%; height:100vh;padding-top:56px;box-sizing:border-box;}
#content {flex:1 0 auto; -webkit-flex:1 0 auto; margin-bottom:80px;}

body.lyrOpen #page {position:fixed;right:0;bottom:0;left:0;overflow:hidden;}
#dim_bg {position:fixed;top:0;left:0;z-index:100;width:100%;height:100%;background:rgba(45,45,45,.9);}

body.main-page #header {display:none;}
body.main-page #page {padding-top:0;}
body.login-page #header .hd-wrp .btn-sch,
body.login-page #header .hd-wrp .btn-menu {display:none;}
body.my-page #header .hd-wrp .hd-logo {display:block;}
body.my-page #header .hd-wrp .page-title,
body.my-page #header .hd-wrp .btn-back {display:none;}


/* ==================================================
	Header
================================================== */
#header .hd-wrp {position:fixed;top:0;left:0;z-index:100;width:100%;height:55px;border-bottom:1px solid #2D2D2D;background:#fff;text-align:center;}
#header .hd-wrp .hd-logo {display:none;padding:19px 0;}
#header .hd-wrp .hd-logo img {height:17px;vertical-align:top;}
#header .hd-wrp .page-title {font-size:17px;font-weight:900;line-height:55px;}
#header .hd-wrp [class^='btn'] {position:absolute;top:0;}
#header .hd-wrp .btn-back {left:0;padding:17px 15px;}
#header .hd-wrp .btn-sch {right:40px;padding:19px 9px 19px 15px;}
#header .hd-wrp .btn-alarm {right:40px;padding:19px 9px 19px 15px;}
#header .hd-wrp .btn-alarm.new i {position:relative;}
#header .hd-wrp .btn-alarm.new i:after {position:absolute;top:0;right:0;width:6px;height:6px;border-radius:3px;background:#FF4B4B;content:"";}
#header .hd-wrp .btn-menu {right:0;padding:19px 15px 19px 9px;}


/* ==================================================
	LNB
================================================== */
#lnb_wrp {position:fixed;top:0;left:-100%;z-index:110;width:100%;height:100%;will-change:left;-webkit-transition:all .3s;transition:all .3s;}
#lnb_wrp .lnb_container {position:relative;width:73.4%;height:100%;background:#4FCDE0;}
#lnb_wrp .lnb {overflow-y:auto;width:100%;height:100%;padding:19px 15px 30px 20px;-webkit-overflow-scrolling:touch;box-sizing:border-box;}
#lnb_wrp .lnb .btn_lnb_cls {float:right;width:20px;height:20px;background:url(../img/icon/icon_menu_close.png) no-repeat 50%;background-size:16px;font-size:0;}
#lnb_wrp .lnb .quick_area {position:relative;min-height:70px;margin-top:16px;padding-top:25px;padding-left:85px;box-sizing:border-box;}
#lnb_wrp .lnb .quick_area .profile_img {position:absolute;top:0;left:0;width:70px;height:70px;}
#lnb_wrp .lnb .quick_area .quick_menu {margin-right:-10px;}
#lnb_wrp .lnb .quick_area .quick_menu li {float:left;width:25%;text-align:center;}
#lnb_wrp .lnb .ment_area {margin-top:22px;}
#lnb_wrp .lnb .ment_area .ment {font-size:20px;font-weight:100; word-break: keep-all;}
#lnb_wrp .lnb .ment_area .ment strong {font-weight:900;}
#lnb_wrp .lnb .ment_area .state {font-weight:100;}
#lnb_wrp .lnb .gnb_area {margin-top:20px;margin-bottom:30px;}
#lnb_wrp .lnb .gnb_area .gnb .has_sub > a:after {display:inline-block;width:10px;height:10px;margin-left:18px;background:url(../img/icon/icon_arrow_down_1.png) no-repeat;background-size:100%;content:"";}
#lnb_wrp .lnb .gnb_area .gnb > li {color:#fff;font-size:14px;}
#lnb_wrp .lnb .gnb_area .gnb > li + li {margin-top:20px;}
#lnb_wrp .lnb .gnb_area .gnb .sub {display:none;}
#lnb_wrp .lnb .gnb_area .gnb li.on .sub {display:block;}
#lnb_wrp .lnb .btm_area {text-align:center;}
#lnb_wrp .lnb .btm_area img {height:50px;}
#lnb_wrp .lnb .btm_area .copyright {margin-top:15px;font-size:10px;font-weight:900;}


/* ==================================================
	Toolbar
================================================== */
#toolbar {position:fixed;bottom:0;left:0;z-index:100;width:100%;height:60px;background:#fff;color:#2D2D2D;
  -webkit-transform:translateZ(0);
  transform:translateZ(0);
  -webkit-transform:translateY(100%);
  transform:translateY(100%);
  will-change:transform;
  -webkit-transition:-webkit-transform .2s;
  transition:transform .2s;
}
body.scrUp #toolbar {box-shadow:0 -3px 6px rgba(0,0,0,.04);
  -webkit-transform:translateY(0);
  transform:translateY(0);
}

.toolbar_menu {display:-webkit-flex;display:flex;width:100%;height:100%;}
.toolbar_menu > li {-webkit-flex:1;flex:1;text-align:center;}
.toolbar_menu > li a {display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;width:100%;height:100%;}
.toolbar_menu > li a:not(.btn_back):not(.btn_top) [class^="icon-"] {height:22px;background-position:50%;}
.toolbar_menu > li .tit {display:block;margin-top:5px;font-size:1rem;}


/* ==================================================
	align
================================================== */
.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;}
.va-b {vertical-align:bottom !important;}
.va-bl {vertical-align:baseline !important;}

.block-vm {height:100%;}
.block-vm:before {content:""; display:inline-block; width:0.01%; height:100%; vertical-align:middle;}
.block-vm-inner {display:inline-block; vertical-align:middle}

.trans-xy {top:50%; left:50%; transform:translate(-50%,-50%); -webkit-transform:translateX(-50%,-50%);}
.trans-x {left:50%; transform:translateX(-50%); -webkit-transform:translateX(-50%); }
.trans-y {top:50%; transform:translateY(-50%); -webkit-transform:translateY(-50%); }


/* ==================================================
	hide & float & clear
================================================== */
.hide {display:none !important;}
.pull-left, .fl-l {float:left;}
.pull-right, .fl-r {float:right;}
.clear:after {display:block; clear:both; content:"";}
.ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.v-hidden {visibility:hidden; overflow:hidden;position:absolute;left:-1000%;top:auto;width:1px;height:1px;}
caption.v-hidden {position:relative;}


/* ==================================================
	transition
================================================== */
.transition-normal {transition:all .3s;-webkit-transition:all .3s;}
.transition-slow {transition:all 1s;-webkit-transition:all 1s;}


/* ==================================================
	skip
================================================== */
a.skip{display:block;position:absolute;top:-1px;z-index:999;width:0;height:0;overflow:hidden;text-align:center}
a.skip:active,a.skip:focus{z-index:999;width:100%;height:auto;padding:5px;background:#FFF}


/* ==================================================
	margin, padding
================================================== */
.no-margin {margin:0 !important;}
.no-padding {padding:0px !important;}

.mt-5 { margin-top:5px !important; }
.mt-10 { margin-top:10px !important; }
.mt-20 { margin-top:20px !important; }
.mt-30 { margin-top:30px !important; }
.mt-40 { margin-top:40px !important; }
.mt-50 { margin-top:50px !important; }
.mt-60 { margin-top:60px !important; }
.mt-70 { margin-top:70px !important; }
.mt-80 { margin-top:80px !important; }
.mt-90 { margin-top:90px !important; }

.mb-5 { margin-bottom:5px !important; }
.mb-10 { margin-bottom:10px !important; }
.mb-20 { margin-bottom:20px !important; }
.mb-30 { margin-bottom:30px !important; }
.mb-40 { margin-bottom:40px !important; }
.mb-50 { margin-bottom:50px !important; }
.mb-60 { margin-bottom:60px !important; }
.mb-70 { margin-bottom:70px !important; }
.mb-80 { margin-bottom:80px !important; }
.mb-90 { margin-bottom:90px !important; }


/* ==================================================
	Font
================================================== */
.fz-10 {font-size:1.0rem;}
.fz-11 {font-size:1.1rem;}
.fz-12 {font-size:1.2rem;}
.fz-13 {font-size:1.3rem;}
.fz-14 {font-size:1.4rem;}
.fz-15 {font-size:1.5rem;}
.fz-16 {font-size:1.6rem;}
.fz-17 {font-size:1.7rem;}
.fz-18 {font-size:1.8rem;}
.fz-20 {font-size:2.0rem;}
.fz-22 {font-size:2.2rem;}
.fz-24 {font-size:2.4rem;}

.fw-100 { font-weight:100}
.fw-700 { font-weight:700}
.fw-900 { font-weight:900}

/* ==================================================
	width
================================================== */
.w20-per {width:20%;}
.w25-per {width:25%;}
.w33-per {width:33.33%;}
.w50-per {width:50%;}
.w66-per {width:66.66%;}
.w75-per {width:75%;}
.w100-per {width:100% !important;}


/* ==================================================
	ETC
================================================== */

.tabmenu.type02 li a { font-size:15px; }
.tabmenu.type02 li a { color:#F0F0F0; }
.tabmenu.type02 li.on a { color:#4FCDE0; }

.option-box.type-checkbox {display:inline-block;}
.option-box.type-checkbox label {display:inline-block;height:16px;margin-right:12px;color:#555;line-height:20px;cursor:pointer;background-repeat:no-repeat;}
.option-box.type-checkbox.type2 label { margin-right: 15px; }
.option-box.type-checkbox.chk-alone label {display:inline-block;height:20px; width: 20px; margin-right:0; cursor:pointer;background-repeat:no-repeat;}
.option-box.type-checkbox label:last-child {margin:0;}
.option-box.type-checkbox [type="checkbox"] {width:1px; height:1px; overflow:hidden; position:absolute; left:-10000%;}
.option-box.type-checkbox [type="checkbox"] + label {background-image:url(../img/btn/btn_checkboxes.png);}
.option-box.type-checkbox.dir-flow label {padding-left:22px;}
.option-box.type-checkbox.dir-flow.chk-alone label {padding-left:0;}
.option-box.type-checkbox.dir-flow.radio-label-bold label { font-weight: 800; color: #222; }
.option-box.type-checkbox.dir-flow [type="checkbox"] + label {background-position:0 0;}
.option-box.type-checkbox.dir-flow [type="checkbox"]:checked + label {background-position:0 -16px;color: #4FCDE0}
.option-box.type-checkbox.dir-flow [type="checkbox"]:disabled + label {background-position:0 -32px;}
.option-box.type-checkbox.dir-reverse label {padding-right:30px;}
.option-box.type-checkbox.dir-reverse [type="checkbox"] + label {background-position:100% 0;}
.option-box.type-checkbox.dir-reverse [type="checkbox"]:checked + label {background-position:100% -16px;}
.option-box.type-checkbox.dir-reverse [type="checkbox"]:disabled + label {background-position:100% -32px;}