@charset "utf-8";

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

/* ==================================================
	웹 폰트
================================================== */
@font-face {
  font-family: nsq;
  font-weight: 300;
  font-style: normal;
  src: url(../font/NanumSquareL.eot);
  src: local(※), url(../font/NanumSquareL.woff) format('woff');
  font-display: swap;
}
@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-display: swap;
}
@font-face {
  font-family: nsq;
  font-weight: 700;
  font-style: normal;
  src: url(../font/NanumSquareEB.eot);
  src: local(※), url(../font/NanumSquareEB.woff) format('woff');
  font-display: swap;
}

/* ==================================================
	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; font-size:1.5rem; }
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; color: #676767;}
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: #F5F6FA;color: #676767;font-family: 'Montserrat', '나눔고딕', 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; min-height: 100vh; }

/* ==================================================
	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;}

.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%); }

/* ==================================================
	display
================================================== */
.d-block { display: block !important; }
.d-iblock { display: inline-block;}
.hide { display: none !important; }

/* ==================================================
	hide & float & clear
================================================== */
.fl-l {float: left;}
.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;}

/* ==================================================
	position
================================================== */
.p-relative { 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: 0 !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; }
.mt-100 { margin-top: 100px !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; }
.mb-100 { margin-bottom: 100px !important; }

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

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

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

.fw-l { font-weight: 300 !important; }
.fw-r { font-weight: 400 !important; }
.fw-b { font-weight: 700 !important; }

.fc-blue { color: #3ABFEF !important; }
.fc-white { color: #fff !important; }
.fc-red { color: #F579A4 !important; }
.fc-gray { color: #919191 !important; }

/* ==================================================
	width
================================================== */
.w5-per { width: 5%; }
.w10-per { width: 10%; }
.w15-per { width: 15%; }
.w20-per { width: 20%; }
.w25-per { width: 25%; }
.w30-per { width: 30%; }
.w33-per { width: 33.33%; }
.w35-per { width: 35%; }
.w40-per { width: 40%; }
.w45-per { width: 45%; }
.w50-per { width: 50%; }
.w55-per { width: 55%; }
.w60-per { width: 60%; }
.w65-per { width: 65%; }
.w66-per { width: 66.66%; }
.w70-per { width: 70%; }
.w75-per { width: 75%; }
.w80-per { width: 80%; }
.w85-per { width: 85%; }
.w90-per { width: 90%; }
.w95-per { width: 95%; }
.w100-per { width: 100% !important; }

/* ==================================================
	etc
================================================== */
.word-cut { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.word-keepall { word-break: keep-all; }

/* ==================================================
	commons
================================================== */
.login-page { display: table; height: 100vh; margin: 0 auto; }
.login-page .inner { display: table-cell; vertical-align: middle; position: relative; }
.login-page .form { display: inline-block;}
.login-page .form h2 { font-size: 2.4rem; margin-bottom: 30px; font-weight: 700; }
.login-page .form .btns { margin-top: 30px; position: relative; }
.login-page .form .btns .option-box { vertical-align: middle; margin-top: 16px; }
.login-page .form .btns button { width: 144px; margin-left: 30px; }
.login-page .form .btns a.find-pw { font-size: 1.3rem; color: #919191; }
.login-page .form .btns .btn-signup { width: auto; position: absolute; bottom: -70px; left: 50%; transform: translate(-50%, 0); margin: 0; font-weight: 700; color: #3ABFEF; border-bottom: 1px solid #3ABFEF; font-size: 1.3rem; }

.login-page .logo { position: absolute; bottom: 60px; left: 50%;text-align: center; transform: translate(-50%, 0); }
.login-page .logo img { width: 104px; margin-bottom: 10px; }

header { text-align: center; background-color: #fff; position: fixed; top: 0; left: 0; width: 100%; z-index: 10; height: 65px; }
header .logo-wrap { position: absolute; top: 22px; left: 30px; }
header .btn-hb-menu { margin-right: 38px; display: none; }
header .btn-hb-menu img { width: 24px; }
header .btn-menu-close { display: none; margin-right: 38px;}
header .btn-menu-close img { width: 24px; }

header .logo-wrap .logo { width: 185px; vertical-align: top; }
header .date { font-size: 1.8rem; color: #676767; line-height: 65px; }
header .profile { position: absolute; top: 12px; right: 30px; }
header .profile .user-img { display: inline-block; width: 40px; height: 40px; background: url(../img/common/user_profile.jpg) no-repeat center; background-size: cover; border-radius: 50%; vertical-align: middle; }
header .profile .ment { display: inline-block; vertical-align: middle; margin-left: 10px; color: #919191; }
header .profile .select { vertical-align: middle; margin-left: 30px; margin-bottom: -9px; }
header .btn-link {position: absolute; top: 24px; right: 30px;}

.side-menu { background-color: #fff; box-sizing: border-box; padding: 24px 16px; }
.side-menu.drawer { height: 100vh; box-shadow: 3px 0 6px rgba(0, 0, 0, 0.1); position: fixed; top: 65px; left: 0; margin-left: -100px; transition: margin .2s ease; z-index: 100; }
.side-menu.drawer.active { margin-left: 0; transition: all .2s ease; }
.side-menu.fixed { position: absolute; top: 62px; left: 0; width: 100px; border-radius: 20px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);}
.side-menu li { text-align: center; margin-top: 36px; cursor: pointer; position: relative; }
.side-menu li:first-child { margin-top: 0; }
.side-menu li a { display: inline-block; }
.side-menu li i { margin-bottom: 2px; }
.side-menu li p { font-size: 1rem; font-weight: 700; word-break: keep-all; }
.side-menu li.active p { color: #3ABFEF; }
.side-menu li.new:after { content: ""; display: inline-block; width: 10px; height: 10px; background: url(../img/icon/icon_new.png) no-repeat center; background-size: cover; position: absolute; top: 4px; right: 21px; }

.side-menu.fixed .btn-go-pos { position: absolute; bottom: -80px; left: 0; width: 100%; text-align: center; background-color: #fff; font-size: 1rem; color: #3ABFEF; padding: 16px 0; font-weight: 700; border-radius: 20px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); }
.side-menu.fixed .btn-go-pos strong { font-size: 1.5rem; }

.loading { position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%; background-color: rgba(255, 255, 255, 0.7); z-index: 10000;}
.loading img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50px; }

article > .inner-wrap { padding: 110px 30px 0; box-sizing: border-box; }
article .container { padding-left: 130px; position: relative; box-sizing: border-box; }
article .pg-top { margin-bottom: 24px; }
article .pg-top .tit { float: left; font-size: 2.4rem; font-weight: 700; margin-top: 8px; }
article .pg-top .tab-menu { float: right; }

.position-set-wrap { padding: 30px 0 10px; border-top: 1px dashed #E2E2E2; border-bottom: 1px dashed #E2E2E2; margin-bottom: 30px; }
.position-set-wrap label { font-size: 1.2rem; font-weight: 700; margin-bottom: 15px;}

.position-tag li { float: left; padding: 8px 14px; background-color: #c7c7c7; color: #fff; border-radius: 25px; margin-right: 10px; cursor: pointer; margin-top: 5px;}
.position-tag li.active { background-color: #3ABFEF; }
.position-tag li .btn-delete-tag { margin-left: 10px; }

@media (max-width: 1280px) {
  header .btn-hb-menu { display: inline-block }
  .side-menu.fixed { display: none; }
  article .container { padding-left: 0; }
}