@charset 'utf-8';

/* --------------------------  */
/* variable                    */
/* --------------------------  */

body {
  --main-bg: rgba(255, 255, 255, 1);
  --main-bg-text: rgba(0, 0, 0, 1);
  --main-text: rgba(30, 30, 30, 1);
  --red: rgba(255, 59, 48, 1);
  --orange: rgba(255, 149, 0, 1);
  --yellow: rgba(255, 204, 0, 1);
  --green: rgba(40, 205, 65, 1);
  --mint: rgba(0, 199, 190, 1);
  --teal: rgba(89, 173, 196, 1);
  --cyan: rgba(85, 190, 240, 1);
  --blue: rgba(0, 122, 255, 1);
  --indigo: rgba(88, 86, 214, 1);
  --purple: rgba(175, 82, 222, 1);
  --pink: rgba(255, 45, 85, 1);
  --brown: rgba(162, 132, 94, 1);
  --dark: rgba(50, 50, 50, 1);
  --gray: rgba(142, 142, 147, 1);
  --gray2: rgba(174, 174, 178, 1);
  --gray3: rgba(199, 199, 204, 1);
  --gray4: rgba(209, 209, 214, 1);
  --gray5: rgba(229, 229, 234, 1);
  --gray6: rgba(242, 242, 247, 1);
}

body.dark,
.theme-dark {
  --main-bg: rgba(0, 0, 0, 1);
  --main-bg-text: rgba(255, 255, 255, 1);
  --main-text: rgba(220, 220, 220, 1);
  --red: rgba(255, 69, 58, 1);
  --orange: rgba(255, 159, 10, 1);
  --yellow: rgba(255, 214, 10, 1);
  --green: rgba(50, 215, 75, 1);
  --mint: rgba(102, 212, 207, 1);
  --teal: rgba(106, 196, 220, 1);
  --cyan: rgba(90, 200, 245, 1);
  --blue: rgba(10, 132, 255, 1);
  --indigo: rgba(94, 92, 230, 1);
  --purple: rgba(191, 90, 242, 1);
  --pink: rgba(255, 55, 95, 1);
  --brown: rgba(172, 142, 104, 1);
  --dark: rgba(205, 205, 205, 1);
  --gray: rgba(152, 152, 157, 1);
  --gray2: rgba(99, 99, 102, 1);
  --gray3: rgba(72, 72, 74, 1);
  --gray4: rgba(58, 58, 60, 1);
  --gray5: rgba(44, 44, 46, 1);
  --gray6: rgba(28, 28, 30, 1);
}


/* common (include, layout) */
body {font-family: 'NotoSansKR', '나눔고딕', 'NanumGothic', '맑은 고딕', 'malgun gothic', '돋움', Dotum, 'Apple SD Gothic Neo', Helvetica, sans-serif; font-weight: 400; font-size: 13px; color: var(--main-text); background: var(--gray6);}
#wrapper {overflow: hidden; min-width: 1200px;}
#skip-nav {position: fixed; left: 0; top: -41px; width: 100%; line-height: 40px; text-align: center; font-size: 16px; color: #ffffff; background: rgba(0, 0, 0, 0.5); border-bottom: 1px solid rgba(255, 255, 255, 0.7); transition: top 0.3s; z-index: 10000;}
#skip-nav:focus {top: 0;}

#header {position: fixed; left: 0; top: 0; width: 100%; min-width: 1200px; height: 80px; background-color: var(--main-bg); border-bottom: 1px solid var(--gray4); z-index: 1000;}
#header-top {position: relative; height: calc(100% - 46px); padding: 0 30px;}
#header-top div.company {position: absolute; left: 30px; top: 10px; font-size: 12px; z-index: 100; width: 150px;}
#header-top div.company > a {display: inline-block; position: relative; padding-right: 20px;}
#header-top div.company > a img {height: 20px; margin-right: 5px;}
#header-top div.company > a em {vertical-align: middle; display: inline-block; line-height: 20px;}
#header-top div.company > a i {position: absolute; right: 0; top: 50%; transform: translate(0, -50%); color: var(--gray); transition: transform 0.3s;}
#header-top div.company div.popup {position: absolute; top: calc(100% + 5px); width: 100%; overflow: hidden; height: 0; transition: height 0.3s; display: none;}
#header-top div.company ul {background-color: var(--main-bg); border: 1px solid var(--gray4); padding: 6px 10px;}
#header-top div.company ul > li + li {margin-top: 5px;}
#header-top div.company ul > li > a {display: block; position: relative; height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: all 0.2s;}
#header-top div.company ul > li > a:hover {color: var(--main-bg-text); font-weight: 700;}
#header-top div.company ul > li > a img {height: 20px; margin-right: 5px;}
#header-top div.company ul > li > a em {vertical-align: middle;}
#header-top div.company.open > a i {transform: translate(0, -50%) rotate(180deg);}
#header-top div.company div.popup.show {display: block;}


#header-top div.user {position: absolute; right: 30px; top: 10px; font-size: 13px;}
#header-top div.user > a {display: block; padding-right: 20px;}
#header-top div.user span.photo {position: relative; display: inline-block; vertical-align: middle; width: 26px; height: 26px; border-radius: 20px; overflow: hidden; text-indent: -999px; margin-right: 5px; background-color: var(--main-bg); background: var(--main-bg) url(../img/sample/sample-face.jpg) center center no-repeat; background-size: cover;}
#header-top div.user span.name {display: inline-block; vertical-align: middle; line-height: 26px;}
#header-top div.user span.name em {font-weight: 700;}
#header-top div.user > a i {position: absolute; right: 0; top: 50%; transform: translate(0, -50%); color: var(--gray); transition: all 0.2s;}
#header-top div.user div.popup {position: absolute; right: 0; top: 100%; width: 250px; height: 0; overflow: hidden; z-index: 100; transition: height 0.3s; display: none;}
#header-top div.user div.popup > .container {position: relative; height: 120px; background-color: var(--main-bg); border: 1px solid var(--gray4); border-radius: 4px; padding: 10px; margin-top: 6px;}
#header-top div.user div.popup > .container::before {content: ''; position: absolute; right: 20px; top: -12px; border: 6px solid transparent; border-bottom-color: var(--gray4);}
#header-top div.user div.popup > .container::after {content: ''; position: absolute; right: 20px; top: -10px; border: 6px solid transparent; border-bottom-color: var(--main-bg);}
#header-top div.user.open > a i {transform: translate(0, -50%) rotate(180deg);}
#header-top div.user div.popup.show {display: block;}

#header-bottom {position: relative; height: 46px; display: grid; grid-template-columns: 220px 1fr 250px;}
#header-bottom > div.logo {position: relative;}
#header-bottom > div.logo h1 {position: absolute; left: 30px; top: 50%; transform: translate(0, -50%); font-size: 24px;}
#header-bottom > div.logo h1 a {display: block;}
#header-bottom > div.logo h1 a img {height: 30px;}

#gnb {font-size: 13px; font-weight: 700;}
#gnb > ul {display: flex;}
#gnb > ul > li + li {margin-left: 20px;}
#gnb > ul > li > a {display: block; position: relative; line-height: 46px; padding: 0 15px 0 10px; transition: all 0.3s;}
#gnb > ul > li > a i {position: absolute; right: 0; top: 50%; transform: translate(0, -50%); font-size: 12px; color: var(--gray); transition: all 0.2s;}
#gnb > ul > li > a::before {content: ''; position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 0); width: 0; height: 2px; background-color: var(--blue); transition: all 0.3s;}
#gnb > ul > li.on > a,
#gnb > ul > li > a:hover {color: var(--blue);}
#gnb > ul > li.on > a::before,
#gnb > ul > li > a:hover::before {width: 100%;}
#gnb > ul > li.open > a i {transform: translate(0, -50%) rotate(180deg); color: var(--blue);}
#gnb div.sub {position: absolute; left: 0; top: calc(100% + 1px); width: 100%; background-color: var(--main-bg); overflow: hidden; height: 0px; box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2); z-index: 100; transition: height 0.5s;}
#gnb div.sub > .container {position: relative; padding-left: 230px;}
#gnb div.sub > .container div.title {position: absolute; left: 0; top: 0; width: 230px; height: 100%; padding: 30px; border-right: 1px solid var(--gray4);}
#gnb div.sub > .container div.title h3 {font-size: 20px; font-weight: 400; margin-bottom: 20px;}
#gnb div.sub > .container div.title p.desc {font-weight: 400; font-size: 13px;}
#gnb div.sub > .container > ul {display: flex; padding: 20px 80px 30px 30px;}
#gnb div.sub > .container > ul > li {min-width: 120px;}
#gnb div.sub > .container > ul > li.on {background-color: var(--gray6);}
#gnb div.sub > .container > ul > li + li {margin-left: 20px;}
#gnb div.sub > .container > ul > li > a {display: block; position: relative; padding: 10px; font-size: 15px;}
#gnb div.sub > .container > ul > li > ul {margin-top: 10px;}
#gnb div.sub > .container > ul > li > ul > li + li {margin-top: 3px;}
#gnb div.sub > .container > ul > li > ul > li > a {display: block; position: relative; width: 100%; padding: 10px 10px; font-size: 12px; font-weight: 500;}
#gnb div.sub > .container > ul > li > ul > li > a::before {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 2px solid transparent; box-sizing: border-box; transition: all 0.3s;}
#gnb div.sub > .container > ul > li > ul > li.on > a::before {border-color: var(--blue);}
#gnb div.sub > .container a.close {position: absolute; right: 30px; top: 30px; width: 30px; height: 30px; border: 1px solid var(--gray4); color: var(--gray2); font-size: 16px;}
#gnb div.sub > .container a.close i {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}

#header-bottom > div.function {position: relative;}
#header-bottom > div.function ul.icon {position: absolute; right: 30px; top: 50%; transform: translate(0, -50%); display: flex;}
#header-bottom > div.function ul.icon > li + li {margin-left: 20px;}
#header-bottom > div.function ul.icon > li.favorite {display: inline-flex;}
#header-bottom > div.function ul.icon > li.favorite a {position: relative; border: 1px solid var(--gray); width: 34px; height: 20px; font-size: 12px; background-color: var(--main-bg);}
#header-bottom > div.function ul.icon > li.favorite a:first-child {border-top-left-radius: 20px; border-bottom-left-radius: 20px;}
#header-bottom > div.function ul.icon > li.favorite a:last-child {border-top-right-radius: 20px; border-bottom-right-radius: 20px; margin-left: -1px;}
#header-bottom > div.function ul.icon > li.favorite a i {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
#header-bottom > div.function ul.icon > li.favorite a:first-child i:first-child {display: block;}
#header-bottom > div.function ul.icon > li.favorite a:first-child i:last-child {display: none;}
#header-bottom > div.function ul.icon > li.favorite.on a:first-child i:first-child {display: none;}
#header-bottom > div.function ul.icon > li.favorite.on a:first-child i:last-child {display: block;}
#header-bottom > div.function ul.icon > li.etc {font-size: 16px;}
#header-bottom > div.function ul.icon > li.etc a {display: block; position: relative; height: 20px; width: 20px;}
#header-bottom > div.function ul.icon > li.etc a i {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
#header-bottom > div.function ul.icon > li.etc a span.badge {position: absolute; left: 10px; top: -5px; min-width: 18px; height: 14px; line-height: 14px; font-size: 10px; background-color: var(--red); color: #ffffff; border-radius: 30px; padding: 0 6px;}


#lnb {position: fixed; left: 0; top: 80px; width: 220px; height: calc(100% - 80px); background-color: var(--main-bg); border-right: 1px solid var(--gray4); z-index: 900; transition: left 0.3s;}
#lnb a.toggle {position: absolute; right: 0; top: 30px; width: 24px; height: 24px; border: 1px solid var(--gray5); border-radius: 30px; background-color: var(--main-bg); transform: translate(50%, 0);}
#lnb a.toggle i {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: all 0.3s;}
#lnb > h2 {line-height: 70px; font-size: 20px; font-weight: 400; padding-left: 30px;}
#lnb > nav {position: relative; height: 100%; overflow: auto; font-size: 13px; font-weight: 700; padding-bottom: 100px;}
#lnb > nav > ul > li {border-bottom: 1px solid var(--gray5);}
#lnb > nav > ul > li:first-child {border-top: 1px solid var(--gray5);}
#lnb > nav > ul > li > a {display: block; position: relative; line-height: 40px; font-size: 14px; padding-left: 30px;}
#lnb > nav > ul > li > a i {position: absolute; right: 20px; top: 50%; transform: translate(0, -50%); color: var(--gray); font-size: 12px; transition: all 0.3s;}
#lnb > nav > ul > li.open > a i {transform: translate(0, -50%) rotate(180deg);}
#lnb > nav > ul > li.on > a i {color: var(--blue);}
#lnb > nav > ul > li.on > a::before {content: ''; position: absolute; left: 0; top: 0; width: 3px; height: 100%; background-color: var(--blue);}
#lnb > nav > ul > li > ul {overflow: hidden; height: 0; transition: height 0.3s;}
#lnb > nav > ul > li > ul.show > li {display: block;}
#lnb > nav > ul > li > ul > li {display: none;}
#lnb > nav > ul > li > ul > li:first-child {border-top: 1px solid var(--gray5);}
#lnb > nav > ul > li > ul > li > a {display: block; position: relative; line-height: 30px; padding-left: 35px; transition: all 0.3s;}
#lnb > nav > ul > li > ul > li > a::before {content: ''; position: absolute; left: 0; top: 50%; transform: translate(0, -50%); width: 3px; height: 0; background-color: var(--blue); transition: all 0.3s;}
#lnb > nav > ul > li > ul > li.on > a,
#lnb > nav > ul > li > ul > li > a:hover {background-color: var(--gray6);}
#lnb > nav > ul > li > ul > li.on > a::before,
#lnb > nav > ul > li > ul > li > a:hover::before {height: 100%;}

#header-notice {position: fixed; right: -250px; top: 80px; width: 250px; height: calc(100% - 80px); background-color: var(--main-bg); border-left: 1px solid var(--gray4); overflow: auto; transition: right 0.3s;}
#header-notice div.header {position: relative; line-height: 40px; font-size: 14px; padding: 0 15px; border-bottom: 1px solid var(--gray4);}
#header-notice div.header a.close {position: absolute; right: 15px; top: 50%; transform: translate(0, -50%);}
#header-notice ul.tab {display: flex;}
#header-notice ul.tab > li {width: 50%; border-bottom: 2px solid var(--gray5); text-align: center;}
#header-notice ul.tab > li + li {border-left: 1px solid var(--gray5);}
#header-notice ul.tab > li > a {display: block; position: relative; line-height: 30px; font-size: 12px; font-weight: 700;}
#header-notice ul.tab > li > a::before {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 2px solid var(--blue); box-sizing: border-box; opacity: 0;}
#header-notice ul.tab > li.on > a::before {opacity: 1;}
#header-notice div.section {padding: 15px; max-height: calc(100% - 100px); overflow: auto; display: none;}
#header-notice div.section.on {display: block;}
#header-notice table.content {width: 100%; border-top: 1px solid var(--gray5); font-size: 11px; table-layout: fixed;}
#header-notice table.content thead {background-color: var(--gray6);}
#header-notice table.content th,
#header-notice table.content td {border-bottom: 1px solid var(--gray5); padding: 8px 5px; text-align: center;}
#header-notice table.content tbody td:first-child {text-align: left;}
#header-notice table.content tbody td {padding: 10px 5px;}
#header-notice table.content tbody td a {display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}


#footer {position: relative; line-height: 30px; font-size: 12px; color: var(--gray); text-align: center;}



/* login */
#login-container {position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 500px; min-height: 300px; padding: 40px; background-color: var(--main-bg); border: 1px solid var(--gray4); border-radius: 4px;}
#login-container a.link {display: block; margin-top: 100px; line-height: 40px; border: 1px solid var(--gray4); border-radius: 4px; text-align: center; font-size: 16px;}








/* sub (common) */
body.sub #wrapper {padding: 80px 0 0 220px; transition: all 0.3s;}
body.sub #main {position: relative; padding: 20px 20px 100px 20px; min-height: calc(100vh - 110px);}
body.sub #main h2 {font-size: 20px; font-weight: 400; margin-top: 30px; margin-bottom: 30px;}
body.sub #main h2 a {margin-left: 6px; color: var(--gray); position: relative; top: -2px;}
body.sub #wrapper.hide-left {padding-left: 20px;}
body.sub #wrapper.hide-left #lnb {left: -200px;}
body.sub #wrapper.hide-left #lnb a.toggle i {transform: translate(-50%, -50%) rotate(180deg);}
body.sub #wrapper.show-right {padding-right: 250px;}
body.sub #wrapper.show-right #header-notice {right: 0;}
@media (max-width: 1600px) {
  body.sub #wrapper.show-right {padding-right: 0;}
}







/* --------------------------  */
/* Module                      */
/* --------------------------  */

/* bread-crumb */
#bread-crumb {display: flex; font-size: 12px;}
#bread-crumb > li + li::before {content: '\f105'; font-family: 'Font Awesome 6 Free'; font-weight: 700; margin: 0 10px; color: var(--gray3); font-size: 11px;}
#bread-crumb > li > a:hover {text-decoration: underline;}
#bread-crumb > li > em {color: var(--blue); font-weight: 700;}

/* custom-scroll (Vertical) */
.custom-scroll {overflow: auto; scrollbar-width: thin; scrollbar-color: #e0e0e0; -ms-overflow-style: none;}    /* firefox, IE 고려 */
.custom-scroll::-webkit-scrollbar {width: 6px;}
.custom-scroll::-webkit-scrollbar-thumb {background-color: transparent; border-radius: 10px;}
.custom-scroll:hover::-webkit-scrollbar-thumb {background-color: rgba(0, 0, 0, 0.2);}
.custom-scroll::-webkit-scrollbar-track {background-color: transparent;}


/* search-grid */
ul.ct-search-grid {position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px 30px; padding-right: 100px;}
ul.ct-search-grid > li {position: relative; grid-column: span 2;}
ul.ct-search-grid > li.half {grid-column: span 3;}
ul.ct-search-grid > li.long {grid-column: span 4;}
ul.ct-search-grid > li.full {grid-column: span 6;}
ul.ct-search-grid > li ul.ct-input-list {display: inline-flex; margin-left: 20px; max-width: calc(100% - 100px);}
ul.ct-search-grid > li.btn {position: absolute; right: 0; top: 0; width: 80px;}
ul.ct-search-grid > li.btn > a {width: 80px; min-width: initial;}
ul.ct-search-grid > li.btn > a + a {margin-top: 10px;}
@media (max-width: 1400px) {
  ul.ct-search-grid > li {position: relative; grid-column: span 3;}
  ul.ct-search-grid > li.half {grid-column: span 6;}
  ul.ct-search-grid > li.long {grid-column: span 6;}
  ul.ct-search-grid > li.full {grid-column: span 6;}
}

/* search-flow */
ul.ct-search-flow {position: relative; display: flex; flex-wrap: wrap;}
ul.ct-search-flow > li {position: relative; margin: 0 30px 10px 0;}
ul.ct-search-flow > li ul.ct-input-list {display: inline-flex; margin-left: 20px; max-width: calc(100% - 100px);}
ul.ct-search-flow > li.btn > a {min-width: initial; width: 80px;}