@charset "utf-8";

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

/* ==================================================
	웹 폰트
================================================== */
@font-face {
  font-family: "Pretendard";
  font-weight: 900;
  font-display: swap;
  src: local("Pretendard Black"), url("../font/Pretendard-Black.woff2") format("woff2");
}

@font-face {
  font-family: "Pretendard";
  font-weight: 800;
  font-display: swap;
  src: local("Pretendard ExtraBold"), url("../font/Pretendard-ExtraBold.woff2") format("woff2");
}

@font-face {
  font-family: "Pretendard";
  font-weight: 700;
  font-display: swap;
  src: local("Pretendard Bold"), url("../font/Pretendard-Bold.woff2") format("woff2");
}

@font-face {
  font-family: "Pretendard";
  font-weight: 600;
  font-display: swap;
  src: local("Pretendard SemiBold"), url("../font/Pretendard-SemiBold.woff2") format("woff2");
}

@font-face {
  font-family: "Pretendard";
  font-weight: 500;
  font-display: swap;
  src: local("Pretendard Medium"), url("../font/Pretendard-Medium.woff2") format("woff2");
}

@font-face {
  font-family: "Pretendard";
  font-weight: 400;
  font-display: swap;
  src: local("Pretendard Regular"), url("../font/Pretendard-Regular.woff2") format("woff2");
}



/* ==================================================
	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;white-space:nowrap;}
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 {-webkit-appearance:none;}
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;
}

::-webkit-scrollbar {width: 6px;height: 6px;}
::-webkit-scrollbar-track {background: transparent;}
::-webkit-scrollbar-thumb {background: #c6c6c6;border-radius: 3px;}
::-webkit-scrollbar-thumb:hover {background: #999;}

/* ==================================================
	공통레이아웃
================================================== */
html,
body {min-width:320px;width:100%;height:100%;background-color:#fff;color:#353D4A;font-family:'맑은 고딕','Malgun Gothic','AppleGothic','Helvetica',Sans-serif; font-weight:400; -webkit-text-size-adjust:none; overflow: hidden;}
html {font-size:62.5%;}
body {position:relative;font-size:1.2rem;line-height:1.4; background-color:#F5F6FA;}


/* ==================================================
	Header / LNB
================================================== */
#header { position:fixed; top:0; left:0; width:100%; z-index:100; background-color:#fff; }
#header .top {display: flex; justify-content: space-between; border-bottom:1px solid #e2e2e2; position:relative; height: 66px;}
#header .left {display: flex; width: 100%;}
#header .right {height:100%; padding-left:20px; background:#fff;}
#header .logo-wrap {display: inline-block; width:180px; flex-shrink: 0;}
#header .logo-wrap > a { display:flex; height: 66px; align-items: center; justify-content: center;}
#header .logo { width:90px; }
#header #gnb { display:inline-block; white-space:nowrap; vertical-align: top; width: calc(100% - 180px); overflow: auto hidden;}
#header #lnb .lnb-wrap {height: 100%; overflow:hidden auto; padding-right: 5px;}
#header #gnb ul {display:flex; gap:24px}
#header #gnb li { height:66px; border-bottom:3px solid #fff; box-sizing:border-box; }
#header #gnb li a { line-height:66px; font-size:1.4rem; font-weight:bold; color:#6d7683; cursor:pointer; }
#header #gnb li a:hover {color: #353d4a;}
#header #gnb li.active { border-color:#008d36; }
#header #gnb li.active a { color:#008d36; }
#header #lnb { position:absolute; top:67px; left:0; padding:0 4px 0 10px; width:180px; height:calc(100vh - 66px); background-color:#fff; border-right:1px solid #e2e2e2; box-sizing:border-box; padding-top:20px; margin-left:0; transition:margin .2s ease; }
#header #lnb.fold { margin-left:-180px; transition:all .2s ease; }
#header #lnb li {position:relative; box-sizing:border-box; margin-bottom:4px; }
/* #header #lnb li.active:before {display:block; content:""; position:absolute; top:0; left:0; width:4px; height:24px; background:#008d36;} */
#header #lnb li > a {padding:8px; color:#6d7683; font-size:1.3rem; display: block; border-radius: 8px; line-height:2rem; letter-spacing: -0.1rem}
#header #lnb li > a:hover {color:#353D4A; font-weight: 700;}
#header #lnb li.active > a { font-weight:bold;  color:#008d36; background-color: #f2f7f2;}
#header #lnb li .under-depth {display:none; margin-top:8px;}
#header #lnb li.active .under-depth {display:block;}
#header #lnb li .under-depth a {display:block; padding-left: 4px; line-height: 2.4rem; color:#999; letter-spacing: -1.1px;}
#header #lnb li .under-depth a.active {color:#676767; font-weight:700;}
#header #lnb li .under-depth a:before {content:"- ";}
#header .profile {height: 100%; padding-right: 16px; display: flex; align-items: center; justify-content: center;}
#header .profile .thumb {flex-shrink: 0; width:30px; height:30px; border-radius:50%; margin-right:10px; overflow: hidden; background:#999 url(../img/common/bg_profile_photo.png) 50% / cover no-repeat;}
#header .profile .thumb img {width: 100%; height: 100%; object-fit: contain;}
#header .profile p { margin-right:12px; flex-shrink: 0;}
#header .profile p strong {display: block;}
#header .profile .select-arrow-down { display:inline-block; width:7px; height:5px; background:url(../img/common/select_arrow_down.png) no-repeat center; background-size:cover; vertical-align:middle;  }
#header .profile .logout {flex-shrink: 0; width: 24px; height: 24px; background: url(../img/common/icon_logout.png) 50% no-repeat; background-size: 18px auto;}

.header-search-area {  /* width:100%; position:fixed; top:67px; left:0; z-index:10;*/ padding:2px 30px 10px 210px;  background-color:#fff; border-bottom:1px solid #e2e2e2; transition:padding .2s ease; box-sizing:border-box;  }
.header-search-area.fold { padding-left:30px; transition:all .2s ease; }

.btn-lnb-toggle { position:absolute; top:50%; right:-14px; transform:translateY(-50%);}
.btn-lnb-toggle img { width:14px; }

/* ==================================================
	CONTENT
================================================== */
#page {height:calc(100% - 67px); margin-top: 67px; display: flex; flex-direction: column;}
#page > formx {height: 100%;}

#content {height: 100%; margin-left: 180px; padding:30px; background-color:#F5F6FA; overflow: auto; transition:padding .2s ease; box-sizing: border-box;}
#content.fold { margin-left:0px; transition:all .2s ease; }
/* #content.twoline-search-area { padding-top: 195px; } */
#content .box { height:1500px; background-color:#ddd;}

/* #page {height:100%;} */

@media (max-width:1280px)  {
  #content {padding: 15px;}
  #header .profile p,
  #header .profile .thumb {display: none;}
}

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

.d-iblock { display:inline-block; }
.d-block { display:block; }

.flexAlign {display: flex; align-items: center; gap:12px}
.flexAlign.hCenter {justify-content: center;}

/* ==================================================
	hide & float & clear
================================================== */
.hide {display:none !important;}
.pull-left {float:left;}
.pull-right {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;}
.fl-l { float:left; }
.fl-r { float:right; }
.pos-r {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-0 {margin-top:0 !important}
.mt-5 {margin-top:5px !important}
.mt-10 {margin-top:10px !important}
.mt-15 {margin-top:15px !important}
.mt-20 {margin-top:20px !important}
.mt-25 {margin-top:25px !important}
.mt-30 {margin-top:30px !important}
.mt-35 {margin-top:35px !important}
.mt-40 {margin-top:40px !important}
.mt-45 {margin-top:45px !important}
.mt-50 {margin-top:50px !important}
.mt-55 {margin-top:55px !important}
.mt-60 {margin-top:60px !important}
.mt-65 {margin-top:65px !important}
.mt-70 {margin-top:70px !important}
.mt-75 {margin-top:75px !important}
.mt-80 {margin-top:80px !important}
.mt-85 {margin-top:85px !important}
.mt-90 {margin-top:90px !important}
.mt-95 {margin-top:95px !important}
.mt-100 {margin-top:100px !important}

.mr-0 {margin-right:0 !important}
.mr-5 {margin-right:5px !important}
.mr-10 {margin-right:10px !important}
.mr-15 {margin-right:15px !important}
.mr-20 {margin-right:20px !important}
.mr-25 {margin-right:25px !important}
.mr-30 {margin-right:30px !important}
.mr-35 {margin-right:35px !important}
.mr-40 {margin-right:40px !important}
.mr-45 {margin-right:45px !important}
.mr-50 {margin-right:50px !important}
.mr-55 {margin-right:55px !important}
.mr-60 {margin-right:60px !important}
.mr-65 {margin-right:65px !important}
.mr-70 {margin-right:70px !important}
.mr-75 {margin-right:75px !important}
.mr-80 {margin-right:80px !important}
.mr-85 {margin-right:85px !important}
.mr-90 {margin-right:90px !important}
.mr-95 {margin-right:95px !important}
.mr-100 {margin-right:100px !important}

.mb-0 {margin-bottom:0 !important}
.mb-5 {margin-bottom:5px !important}
.mb-10 {margin-bottom:10px !important}
.mb-15 {margin-bottom:15px !important}
.mb-20 {margin-bottom:20px !important}
.mb-25 {margin-bottom:25px !important}
.mb-30 {margin-bottom:30px !important}
.mb-35 {margin-bottom:35px !important}
.mb-40 {margin-bottom:40px !important}
.mb-45 {margin-bottom:45px !important}
.mb-50 {margin-bottom:50px !important}
.mb-55 {margin-bottom:55px !important}
.mb-60 {margin-bottom:60px !important}
.mb-65 {margin-bottom:65px !important}
.mb-70 {margin-bottom:70px !important}
.mb-75 {margin-bottom:75px !important}
.mb-80 {margin-bottom:80px !important}
.mb-85 {margin-bottom:85px !important}
.mb-90 {margin-bottom:90px !important}
.mb-95 {margin-bottom:95px !important}
.mb-100 {margin-bottom:100px !important}

.ml-0 {margin-left:0 !important}
.ml-5 {margin-left:5px !important}
.ml-10 {margin-left:10px !important}
.ml-15 {margin-left:15px !important}
.ml-20 {margin-left:20px !important}
.ml-25 {margin-left:25px !important}
.ml-30 {margin-left:30px !important}
.ml-35 {margin-left:35px !important}
.ml-40 {margin-left:40px !important}
.ml-45 {margin-left:45px !important}
.ml-50 {margin-left:50px !important}
.ml-55 {margin-left:55px !important}
.ml-60 {margin-left:60px !important}
.ml-65 {margin-left:65px !important}
.ml-70 {margin-left:70px !important}
.ml-75 {margin-left:75px !important}
.ml-80 {margin-left:80px !important}
.ml-85 {margin-left:85px !important}
.ml-90 {margin-left:90px !important}
.ml-95 {margin-left:95px !important}
.ml-100 {margin-left:100px !important}

.pd-5 {padding:5px !important;}
.pd-10 {padding:10px !important;}
.pd-15 {padding:15px !important;}
.pd-20 {padding:20px !important;}
.pd-25 {padding:25px !important;}
.pd-30 {padding:30px !important;}
.pd-35 {padding:35px !important;}
.pd-40 {padding:40px !important;}
.pd-45 {padding:45px !important;}
.pd-50 {padding:50px !important;}

.pt-5 {padding-top:5px !important}
.pt-10 {padding-top:10px !important}
.pt-15 {padding-top:15px !important}
.pt-20 {padding-top:20px !important}
.pt-25 {padding-top:25px !important}
.pt-30 {padding-top:30px !important}
.pt-35 {padding-top:35px !important}
.pt-40 {padding-top:40px !important}
.pt-45 {padding-top:45px !important}
.pt-50 {padding-top:50px !important}
.pt-55 {padding-top:55px !important}
.pt-60 {padding-top:60px !important}
.pt-65 {padding-top:65px !important}
.pt-70 {padding-top:70px !important}
.pt-75 {padding-top:75px !important}
.pt-80 {padding-top:80px !important}
.pt-85 {padding-top:85px !important}
.pt-90 {padding-top:90px !important}
.pt-95 {padding-top:95px !important}
.pt-100 {padding-top:100px !important}

.pr-5 {padding-right:5px !important}
.pr-10 {padding-right:10px !important}
.pr-15 {padding-right:15px !important}
.pr-20 {padding-right:20px !important}
.pr-25 {padding-right:25px !important}
.pr-30 {padding-right:30px !important}
.pr-35 {padding-right:35px !important}
.pr-40 {padding-right:40px !important}
.pr-45 {padding-right:45px !important}
.pr-50 {padding-right:50px !important}
.pr-55 {padding-right:55px !important}
.pr-60 {padding-right:60px !important}
.pr-65 {padding-right:65px !important}
.pr-70 {padding-right:70px !important}
.pr-75 {padding-right:75px !important}
.pr-80 {padding-right:80px !important}
.pr-85 {padding-right:85px !important}
.pr-90 {padding-right:90px !important}
.pr-95 {padding-right:95px !important}
.pr-100 {padding-right:100px !important}

.pb-5 {padding-bottom:5px !important}
.pb-10 {padding-bottom:10px !important}
.pb-15 {padding-bottom:15px !important}
.pb-20 {padding-bottom:20px !important}
.pb-25 {padding-bottom:25px !important}
.pb-30 {padding-bottom:30px !important}
.pb-35 {padding-bottom:35px !important}
.pb-40 {padding-bottom:40px !important}
.pb-45 {padding-bottom:45px !important}
.pb-50 {padding-bottom:50px !important}
.pb-55 {padding-bottom:55px !important}
.pb-60 {padding-bottom:60px !important}
.pb-65 {padding-bottom:65px !important}
.pb-70 {padding-bottom:70px !important}
.pb-75 {padding-bottom:75px !important}
.pb-80 {padding-bottom:80px !important}
.pb-85 {padding-bottom:85px !important}
.pb-90 {padding-bottom:90px !important}
.pb-95 {padding-bottom:95px !important}
.pb-100 {padding-bottom:100px !important}

.pl-5 {padding-left:5px !important}
.pl-10 {padding-left:10px !important}
.pl-15 {padding-left:15px !important}
.pl-20 {padding-left:20px !important}
.pl-25 {padding-left:25px !important}
.pl-30 {padding-left:30px !important}
.pl-35 {padding-left:35px !important}
.pl-40 {padding-left:40px !important}
.pl-45 {padding-left:45px !important}
.pl-50 {padding-left:50px !important}
.pl-55 {padding-left:55px !important}
.pl-60 {padding-left:60px !important}
.pl-65 {padding-left:65px !important}
.pl-70 {padding-left:70px !important}
.pl-75 {padding-left:75px !important}
.pl-80 {padding-left:80px !important}
.pl-85 {padding-left:85px !important}
.pl-90 {padding-left:90px !important}
.pl-95 {padding-left:95px !important}
.pl-100 {padding-left:100px !important}

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


/* ==================================================
	font
================================================== */
.word-hide {font-size:0 !important;}