/*---------------------------------------- reset ----------------------------------------*/
/* @import "font.css"; */
@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;200;300;400;500;700;900&family=Roboto:wght@100;200;300;400;500;700;900&display=swap");
html {font-size:62.5%; background-color: #393C3E;}
body {word-break: break-all;font-family:'Noto Sans KR', sans-serif;font-weight:400;letter-spacing:-0.5px;font-size:1.4rem; overflow: hidden;}

/* ul, ol, dl {list-style: none; padding: 0; margin:0;} */
caption {display: none;}
textarea {resize: none;}
a {color: #006de3;}
a:hover {text-decoration: none;}
.selector-for-some-widget {box-sizing: content-box;}
.skip {position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;}
input[type=number]::-webkit-outer-spin-button, 
input[type=number]::-webkit-inner-spin-button {-webkit-appearance:none;margin:0}
input[type=number] {-moz-appearance:textfield}
button {border: 0;}
.flex-1 {flex:1;}
.w10p {width:10px !important;}
.w20p {width:20px !important;}
.w30p {width:30px !important;}
.w40p {width:40px !important;}
.w50p {width:50px !important;}
.w60p {width:60px !important;}
.w70p {width:70px !important;}
.w80p {width:80px !important;}
.w90p {width:90px !important;}
.w100p {width:100px !important;}
.w120p {width:120px !important;}

.font12 {font-size: 1.2rem;}
.font13 {font-size: 1.3rem;}
.font14 {font-size: 1.4rem;}
.font16 {font-size: 1.6rem;}
.font18 {font-size: 1.8rem;}
.font20 {font-size: 2rem;}

.ls-6 {letter-spacing: -0.6px !important;}

[class^='br-'] {
    width: 0px;
    height: 0px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.popup-on {overflow:hidden !important}

.show-pc {display: block;}
.show-mo {display: none;}

/* loading(svg) */
.loading {display:none;position:fixed;left:0;top:0;right:0;bottom:0;background:rgba(255,255,255,1);z-index:1100;}
.loading.on {display:block;}
.loading svg {display:block;position:absolute;left:50%;top:50%;transform: translate(-50%, -50%);width:120px;height:120px;}

.loading.type1 {background:rgba(255,255,255,0.5);} /* 글자 있을 경우 */
.loading.type1 svg {transform: translate(0, 0); margin: -70px 0 0 -60px;}
.loading.type1 .text-loading {display:block;position:absolute;left:50%;top:50%; transform: translate(-50%); padding-top:35px; font-size: 1.4rem; font-weight: 700;}

/*---------------------------------------- layout ----------------------------------------*/
.wrap {position: relative; width: 100%; max-width: 100%; min-width: 320px; /* min-width: 1200px; */ background-color: #1E1E1E;}
.wrap::after {content: ''; display: block; width: 100%; height: 100vh; position: absolute; left: 0px; top: 0px; z-index: -1; background: #1E1E1E;}
.wrap.type1 {background-color: #fff; min-height: 100vh; height:100%;}
.wrap.type2 {background-color: #fff; min-height: 100vh; height:100%; min-width: 100%; }

/* header */
.header-top {display: flex; align-items: center; height: 40px;} 
.header-top .logo img {height: 22px;}
.btn-ht.sideMenu .btn {background-color: #7F7F7F;}
.btn-ht.sideMenu .btn > i {color: #fff; font-size: 5.2rem; line-height: 6rem;}
.btn-ht.sideMenu .btn > i::before {font-size: inherit; line-height: inherit;}
.btn-ht.logout .btn > i {color: #fff; font-size: 4.4rem; line-height: 4rem;}
.btn-ht.sideQuick .btn > i {color: #fff; font-size: 4.4rem; line-height: 4rem;}
.logo {margin: 0 16px; flex:1;}
.logo > a {color: #fff;}
.header-top .btn-group.util {margin-left: auto; display: flex; align-items: center;}
.header-top .btn-group.util .btn-ht {margin-right: 16px;}
.header-top .btn-group.util .btn-ht .btn {width: 32px; height: 32px; width: 32px; height: 32px; background: url(../../img/icon_logout.svg) no-repeat; background-size: cover;}
.header-top .btn-member {display: flex; align-items: center;}
.header-top .btn-member::after {content: ''; display: inline-block; width: 1px; height: 14px; background-color: #fff; opacity: 0.3; margin: 0 8px 0 12px;} 
.header-top .btn-member a::before {content: ''; display: block; width: 32px; height: 32px; background: url(../../img/icon_profile.svg) no-repeat; background-size: cover;}
.header-top .btn-member a {display: flex; justify-content: center; align-items: center; height: 32px; color: #fff; font-weight: 400; font-size: 1.4rem;}

.header .nav {background: #464a4b}
.header .nav .nav-inner {display: flex; flex-wrap: wrap; margin: 0 auto;}
.header .nav .nav-item {margin: 0 10px;}
.header .nav .nav-item > a,
.header .nav .nav-item .dropdown > a {display: block; padding: 10px 10px 11px; color: #fff; font-size: 1.6rem;}
.header .nav .nav-item.active > a::before,
.header .nav .nav-item.active .dropdown > a::before {position: absolute; top:0px; left:0px; right:0px; margin: 0 auto; display: block; content: ''; width: 100%; height: 5px; animation: ani-bgColor 2s infinite; -webkit-animation: ani-bgColor 2s infinite;}

.header .nav .nav-item .dropdown-toggle::after {display: none;}
.header .nav .dropdown-menu {left:50%; transform:translateX(-50%);  min-width: 18rem; padding: 1rem 0; border: 1px solid #212529;}
.header .nav .dropdown-menu::before {content: ''; width: 10px;  height: 10px; border-top: 1px solid #212529; border-right: 1px solid #212529; background: #fff; display: inline-block; transform: rotate(315deg) translateX(-50%); position: absolute; top: -9px; left: 5px; right: 0; margin: 0 auto;}
.header .nav .dropdown-item {font-size: 1.4rem; padding-bottom: 0.3rem; text-align: center; }
.header .nav .dropdown-item.active {background: #4682d1;}

/* footer */
.footer {display: none; position: absolute; right: 20px; bottom: 0px; width: calc(100% - 230px); transition: all .4s; -webkit-transition: all .4s; z-index: 2; }
.footer.on {display: block;}
.footer-inner {width: 100%; text-align: center;}
.copyright {display: inline-block; border-radius: 5px; font-size: 1.2rem; padding: 12px; color: #999;}
.copyright:hover {opacity: 1;}

/* container */
.container {position: relative; width: 100%; max-width: 100%; /* min-width: 1200px; */ padding:0px; margin:0; /* overflow-x: hidden; /// */}
.container > .container-inner {position: relative; overflow: hidden;/* overflow:hidden 추가 */ /* display: flex; 스크롤에러남 */}

.btn-side-toggle {position: absolute; left: 210px; top: 300px; z-index: 10; transition: all .4s; -webkit-transition: all .4s;}
.btn-side-toggle button {position: relative; display: block; width: 24px; height: 112px; border-top-right-radius: 10px; border-bottom-right-radius: 10px;
    background: #ffe2e2; border: 1px solid #f7dede; /* background: #e2f1ff; border: 1px solid #deebf7; 화살표 : #7c94aa */ border-left: 0;
}
.btn-side-toggle button::before {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -45%); content: ''; display: block; width: 24px; height: 24px; background: url(../../img/icon_sidetoggle.svg) no-repeat center; background-size: cover;}
.btn-side-toggle.on button::before {transform: translate(-50%, -45%) scale(-1);}

/* side-out */
.side-out .side {/* position: absolute; margin-left: 0; transition: all .4s; -webkit-transition: all .4s; */ left: -204px;}
.side-out .content {width: calc(100% - 12px); margin: 0 6px;}
.side-out .btn-side-toggle {left: 6px;}
.side-out .footer {width: 100%;}

/* side */
.side {position: absolute; left: 0px; width: 204px; height: calc(100vh - 40px); padding: 22px 0 6px 18px; background: #fff; border-top-right-radius: 8px;  z-index: 1; transition: all .4s; -webkit-transition: all .4s;}
.side::after {content:""; display:block; clear:both;}
.side-inner {overflow-y: auto; height: 100%; margin: 0 4px 0 0; padding-right: 14px;}
.side-inner::-webkit-scrollbar {width:6px;height:4px;overflow:hidden}
.side-inner::-webkit-scrollbar-thumb {background-color:#caceda;outline:none;border-radius:10px}
.side-inner::-webkit-scrollbar-track {box-shadow:none;background:transparent;border-radius:10px}

/* side menu */
.side-menu {width:100%; margin-bottom: 15px;}
.side-menu ul {list-style:none; padding: 0; margin: 0;}
.side-menu ul ul {display:none; /* background-color: #f3f3f3; */}
.side-menu li {box-sizing:border-box;}

/* 1dep */
.side-menu-inner > .item {width:100%; margin-bottom: 8px;}
.side-menu-inner > .item > .title {cursor:pointer; position:relative; display:flex; padding:10px 46px 10px 0; font-size: 1.6rem; line-height: 2.2rem; font-weight: 600; z-index:2; color: #000; border-bottom: 1px solid #EAEAEA;}
.side-menu-inner > .item > .title::after {position:absolute; right:0px;top:50%; transform: translateY(-50%); content:''; display:block; width:20px; height:20px; background: url(../../img/icon-arrow-down1.svg) no-repeat center; background-size: cover !important;}
.side-menu-inner > .item.on  > .title::after {background: url(../../img/icon-arrow-up1.svg) no-repeat center;}

/* 2dep */
.side-menu .dep2 {padding-top: 16px;}
.side-menu .dep2 > .item { /* border-bottom: 1px solid #eaeaea; */}
.side-menu .dep2 > .item:last-of-type {border-bottom: 0px;}
.side-menu .dep2 > .item:first-of-type > .title {}
.side-menu .dep2 > .item:first-of-type > .title::after {top: 8px;}
.side-menu .dep2 > .item > .title {cursor:pointer; position:relative; display:flex; padding:8px 12px 9px 12px; font-size: 1.3rem; line-height: 2rem; color: #333; font-weight: 400;}
.side-menu .dep2 > .item.on a {color: #E40422; background: #FFEDED; border-radius: 6px;}
.side-menu .dep2 > .item a:hover {color: #E40422; }
/* .mo-menu .dep2 > .item.plus > .title::after {position:absolute;right:6px;top:16px; content:''; display:block; width:24px; height:24px; background-size: cover !important;} */

/* 3dep */
.side-menu .dep3 {padding: 12px; background: #f9f9f9;}
.side-menu .dep3 > .item {}
.side-menu .dep3 > .item.on {}
.side-menu .dep3 > .item > a {display: block; width: 100%; font-size: 1.4rem; line-height: 2.4rem; color: #666; margin-bottom: 12px;}
.side-menu .dep3 > .item > a:last-of-type {margin-bottom: 0;}

/* mobile */
.gnb-mobile {display: none;}

/* content */
.content {position: relative; width: calc(100% - 216px); margin-left: 210px; padding: 6px 6px 6px 40px; height: calc(100vh - 40px);  border-top-left-radius: 8px; border-top-right-radius: 8px; background-color: #fff; transition: all .4s; -webkit-transition: all .4s; /* overflow: auto; */}
.content::before {position: absolute; left: 0px; top: 0px; width: 100%; height: calc(100vh - 40px); background: #fff; content:""; display:block; z-index: 1; border-top-left-radius: 8px; border-top-right-radius: 8px; }
.content::after {content:""; display:block; clear:both;}
.content-inner {position: relative; height: 100%; padding: 0 34px 64px 0; z-index: 2; overflow-y: auto;}
.content-inner::before {content: ''; display: block; height: 26px;}
.content-inner::-webkit-scrollbar {width:6px;height:4px;overflow:hidden;}
.content-inner::-webkit-scrollbar-thumb {background-color:#caceda;outline:none;border-radius:10px}
.content-inner::-webkit-scrollbar-track {box-shadow:none;background:transparent;border-radius:10px}

/*---------------------------------------- common ----------------------------------------*/

/* title */
h2.title {font-size: 2.2rem; font-weight: 500; margin-bottom: 20px;}
h3.title {position: relative; font-size: 1.7rem; line-height: 2.4rem; font-weight: 500; margin-bottom: 20px; padding-left: 15px;}
h3.title::before {position: absolute; left:0px; top:0px; content: ''; display: block; width: 5px; height: 25px; background: #4682d1;}
h3.title.type1 {margin-bottom: 0px;}

/* sub title */
.s-title1 {position: relative; padding-left: 11px; font-size: 1.4rem; font-weight: 500; color: #000;}
.s-title1::before {position: absolute; left:0px; top:8px; content: ''; display: block; width:5px; height:5px; background: #999999; border-radius: 100%; z-index: 2;}
.s-title2 {font-size: 1.6rem; font-weight: 700; color: #083D7F;}
.s-title2.type1 {font-weight: 500; margin-bottom: 12px;}
.s-title3 {color: #000; font-weight: 700; margin-bottom: 8px;}
.s-title3.type1 {font-size: 1.6rem; font-weight: 500; margin-bottom: 12px;}


/* table */
.table td > a:hover {text-decoration: underline;}
.table .btn:hover {text-decoration: none;}

.table [class*=col] {padding:0px; margin:0px;}
.table th,
.table td {vertical-align: middle !important;}
.table.text-center th,
.table.text-center td {text-align: center;}

table .btn-tblink {font-size: 1.3rem; line-height: 1.5; padding: 0; color: #006de3 !important;}
table .btn-tblink:hover {text-decoration: underline;}

.table-type1 {margin-bottom: 30px; border-top:1px solid #1357b1;}
.table-type1 thead th {background: #f8f8f8; border-bottom-width: 1px;}
.table-type1 th, 
.table-type1 td {padding: 6px 12px; font-size: 1.3rem; font-weight: 400; text-align: center; border-top:0px; border-right:1px solid #e9e9e9; border-bottom: 1px solid #e9e9e9;}
.table-type1 thead th:last-of-type,
.table-type1 tbody td:last-of-type {border-right:0px;}
.table-type1 tbody th {font-weight: 400; background: #f8f8f8;}

.table-type2 {margin-bottom: 30px; border-top:1px solid #333;}
.table-type2 thead th {background: #f8f3f3; border-bottom-width: 1px;}
.table-type2 th, 
.table-type2 td {height: 36px; padding: 4px 14px; font-size: 1.3rem; font-weight: 400; text-align: left; border-top:0px; border-right:0; border-bottom: 1px solid #e9e9e9;}
.table-type2 tbody th {font-weight: 400; background: #f8f3f3;}
.table-type2.line th,
.table-type2.line td {border-right: 1px solid #e9e9e9;}
.table-type2.line th:last-of-type,
.table-type2.line td:last-of-type {border-right: 0px;}

.table-type2.lg th,
.table-type2.lg td {height: 60px; font-size: 1.4rem;}
.table-type2.lg .bold {font-weight: 600; font-size: 1.6rem; color: #000;}

.table-type3 {margin-bottom: 30px; border-top:1px solid #333 !important; border-left: 0 !important;}
.table-type3 thead th {background: #f8f3f3 !important; border-bottom-width: 1px;}
.table-type3 th, 
.table-type3 td {height: 36px; padding: 4px 14px; font-size: 1.3rem; font-weight: 400; text-align: left; border-top:0px; border-right:0; border-bottom: 1px solid #e9e9e9; border-right: 0 !important;}
.table-type3 tbody th {font-weight: 400; background: #f8f3f3;}
.table-type3.line th,
.table-type3.line td {border-right: 1px solid #e9e9e9;}
.table-type3.line th:last-of-type,
.table-type3.line td:last-of-type {border-right: 0px;}
/* .table-type3.table-hover tr:hover {background: #edf1fb !important;} */


form + .table-top {margin-top: 24px;}
.table-top {display: flex; margin-bottom: 10px;}
.table-top.type1 {margin-bottom: 20px;}
.table-top > div {/* flex:1; */ margin: 0; padding: 0;}
.result-total {display: flex; align-items: center; font-size: 1.3rem;}
.result-total .form-select {flex:none; width:110px; padding: 3px 6px; margin-right: 6px; font-size: 1.2rem !important;}
.necess {font-size: 1.3rem;}
.necess .ncs {font-weight: 500; color: #dc3545; vertical-align: middle;}
.dash {margin-top: 3px; margin-right: 4px; display: block; height: 100%; vertical-align: middle;}

/* table scroll */
.table-scroll {overflow-x:hidden;position:relative}
.table-scroll .table-list {overflow-x:auto;width:100%;padding-bottom:6px}
.table-scroll .table-list::-webkit-scrollbar {width:6px;height:6px;overflow:hidden}
.table-scroll .table-list::-webkit-scrollbar-thumb {background-color:#aaa;outline:none;border-radius:10px}
.table-scroll .table-list::-webkit-scrollbar-track {box-shadow:none;background:transparent;border-radius:10px}
.table-scroll .table-list table {table-layout:fixed;border-collapse:separate;border-spacing:0}

.table-x-scroll .table-list table {border-top: none;}
.table-x-scroll {border-top: 1px solid #1357b1;}

/* table-list */
.table-list {position:relative;margin-bottom:30px}
.table-list table {border-collapse:collapse;width:100%;border-left:1px solid #e9e9e9;border-top:1px solid #1357b1}
.table-list table th, 
.table-list table td {padding:6px 12px;font-size:1.3rem; line-height: 1.5; text-align:center;/* background:#fff; */border-right:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9}
.table-list table th {background:#f8f8f8;font-weight:500;}
.table-list table a:hover {text-decoration: underline;}
.table-list table label {font-size: inherit; font-weight: inherit; color: inherit; font-weight: inherit; line-height: inherit;}
.table-list table td.entry {background:#F6F6F6; color: #000; font-weight: 400;}


.table-list.type1 {}



/* card-list */
.card-list .card-title a {color: #333;}
.card-list .card-title a:hover {text-decoration: underline;}
.card-list + .btn-group.type1 {margin-top: 0px;}

/* board */
.file-count {display: flex; align-items: center; margin: 0 auto;}
.file-count::before {content: ''; display: block; margin-left: calc(50% - 16px); margin-right: 5px; width: 15px; height: 15px; background: url(../../img/icon_file.svg) no-repeat center; background-size: 100% auto;}
.file-count em {display: block; font-size: 1.4rem; font-style: normal;}

/* paging */
.paging {width: 100%; display: flex; justify-content: center;}
.paging .page-item {margin: 0 2px;}
.paging .page-link {padding: 6px 12px; font-size: 1.4rem; color: #999; border-color: #d0d0d0;}
.paging .page-link.arrow {padding: 6px 9px;}
.paging .page-link i::before {font-size: 1.6rem; color: #333; font-weight: 600;}
.page-item.disabled .page-link i::before {color: #ccc;}

/* reply */
.comt-comp {display: flex; margin-bottom: 30px;}
.comt-comp .ipt-box {position: relative; margin: 0; padding: 0 10px; border: 1px solid #ccc;}
.comt-comp .id {display: block; width: 100%; font-size: 1.2rem; height: 25px; font-weight: 500; margin-top: 10px; border-bottom: 1px dashed #ccc;}
.comt-comp .form-control {border: 0px; margin-bottom: 10px;}
.comt-comp .char-num {position: absolute; right:10px; top:10px; font-size: 1.2rem;}
.comt-comp .char-num > span {color: #dc3545;}
.comt-comp .btn-group {flex:1;}
.comt-comp .btn-group > button {font-size: 1.4rem; border-top-left-radius: 0px; border-bottom-left-radius: 0px;}

.comt-list {margin-bottom: 30px;}
.comt-list .comt-item {padding: 10px; margin-top: 10px; border:1px solid #ccc;}
.comt-list .comt-item:first-of-type {margin-top: 0;}
.comt-list .user {position: relative; display: flex; align-items: center; padding-bottom: 10px; border-bottom: 1px dashed #ccc;}
.comt-list .user .id {margin-right: 10px; font-size:1.3rem; font-weight: 500;}
.comt-list .user .data {font-size:1.3rem; color: #adadad;}
.comt-list .cont {padding: 10px 0 0 0;}
.comt-list .re-reply > .btn-group {margin-top: 10px;}

.comt-mod .btn-group,
.comt-write .btn-group {flex:none; width: 200px;}

.btn-comt-write {color: #fff; background-color: #343a40; border-color: #343a40;}
.btn-comt-write:hover {color: #fff;}
.btn-comt-cancel,
.btn-reply-cancel {color: #fff; background-color: #858c93; border-color: #858c93;}
.btn-comt-cancel:hover,
.btn-reply-cancel:hover {color: #fff;}
.btn-comt-mod {color: #343a40; background-color: #fff; border-color: #343a40;}
.btn-reply-write {color: #fff; background-color: #dc3545; border-color: #dc3545;}
.btn-reply-write:hover {color: #fff;}

.comt-item.re-comt {position: relative; margin: -1px 0 0 0; padding: 15px 10px 15px 40px;; background: #f9f9f9; border-top-color: #ececec;}
.comt-item.re-comt::before {position: absolute; left:17px; top:20px; display: block; content: "\f132"; font-family: bootstrap-icons!important; font-style: normal; font-weight: 400!important; font-variant: normal; text-transform: none; line-height: 1; vertical-align: -0.125em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
.comt-item.re-comt .comt-toggle .btn-comt-close > button {background: #f9f9f9;}
.comt-item.re-comt .comt-mod {margin-bottom: 0px !important;}
.comt-item.re-comt .comt-comp .ipt-box {background: #fff;}

/* comt-toggle */
.comt-toggle {position: relative;}
.comt-toggle.on {z-index: 1;}
.comt-toggle .comt-toggle-layer {display:none;}
.comt-toggle.on .comt-toggle-layer {display: block;}
.comt-toggle-layer {position: absolute; right:0px; top:34px; width: 65px; padding: 3px 0; height:auto; background: #fff; border:1px solid #000935; z-index: 2;}

.comt-toggle {margin-left: auto;}
.comt-toggle .btn-comt {display: block;}
.comt-toggle .btn-comt a,
.comt-toggle .btn-comt button {display: block; width: 24px; height: 24px; text-align: center; background: transparent; border:none;}
.comt-toggle .btn-comt button > span {display: block; width: 3px; height: 3px; background: #000; border-radius: 100%; margin: 4px auto; font-size: 0px; line-height: 0; text-indent: -9999px;}
.comt-toggle  .btn-comt button::after {display: block; content: ''; width: 3px; height: 3px; background: #000; border-radius: 100%; margin: 4px auto;}
.comt-toggle  .btn-comt button::before {display: block; content: ''; width: 3px; height: 3px; background: #000; border-radius: 100%; margin: 4px auto;}

.comt-toggle .btn-comt-mod,
.comt-toggle .btn-comt-dele {display: block; margin: 3px 0; text-align: center;}
.comt-toggle .btn-comt-mod > button,
.comt-toggle .btn-comt-dele > button {display: block; width: 100%; text-align: center; background: #fff; border: 0px; font-size: 12px;}
.comt-toggle .btn-comt-close {position: absolute; right:0px; top:-34px; display: block;}
.comt-toggle .btn-comt-close > button {display: flex; justify-content: center; align-items: center; width: 24px; height: 24px;  background: #fff; outline: 0; border: 0;}
.comt-toggle .btn-comt-close i::before {font-size: 2rem;}

.comt-item .comt-write {display: none; margin: 10px 0 !important;}
.comt-item .comt-mod {display: none; margin: 10px 0 !important;}
.comt-item .form-control {margin: 10px 0 0 0;}
.comt-item .char-num {position: relative; text-align: right; right:0px; top:0px; margin-bottom: 5px;}
.comt-item .comt-comp {margin-bottom: 0;}


/* button */
.btn-group {display: flex;}
.btn-group.center {justify-content: center; width: 100%;}
.btn-group.right {justify-content: flex-end;}
.btn-group.type1 {margin-top: -10px; margin-bottom: 30px;}
.btn-group.type1 .btn {margin: 0 2px; padding: 0.5rem 1.5rem; font-size: 1.3rem;}
.btn-group.type2 .btn {margin: 0 2px 0 0;}
.btn-group.auto .btn {flex:none; border-radius: .3rem !important;}
.btn-group .btn {margin-right: 4px;}
.btn-group .btn:last-of-type {margin-right: 0px;}
.btn {font-size: 1.2rem;}
.btn-secondary {background-color: #858c93; border-color: #858c93;}
.btn-group a + button {margin-left: 2px !important;}
.btn > i {margin-right: 5px;}
.btn i.bi-list::before {font-size: 1.4rem; font-weight: 700 !important;}
.btn-absolute {position: absolute !important; left: 0px; top: 0px;}

.btn-order-up,
.btn-order-down {margin:0px; padding:0px;}
.btn-order-up:hover,
.btn-order-down:hover {opacity: 0.8;}
.btn-order-up::before,
.btn-order-down::before {display: inline-block; font-size: 2.8rem; color: #666; /* color: #fd7e14; */ font-family: bootstrap-icons !important; font-style: normal; font-weight: normal !important; font-variant: normal; text-transform: none; line-height: 1; vertical-align: -0.125em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
.btn-order-up::before {content: "\f146";}
.btn-order-down::before {content: "\f125";}
/* .btn-order-up::before {content: "\F147";}
.btn-order-down::before {content: "\F126";} */

/* input */
input, select, textarea {font-size: 1.3rem !important;}
label {margin: 0; padding: 0;}
select::-ms-expand {display:none}

.form-control {padding: .375rem .75rem !important;}
.form-control,
.form-select {margin-right: 4px;}
.form-control::placeholder,
.form-select::placeholder {color: #9b9b9b;}
.form-control:disabled, .form-control[readonly],
.form-select:disabled, .form-select[readonly] {background-color: #e9ecef !important; opacity: 1 !important; color: #9b9b9b;}

.form-select {display: block; width: 100%; padding: 0.375rem 2.25rem 0.375rem 0.75rem !important; -moz-padding-start: calc(0.75rem - 3px); background: #fff url(../../img/icon_arrow_down.svg) no-repeat right 0.75rem center; background-size: 16px 12px; border: 1px solid #ced4da; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0.25rem; color: #212529;}
.form-select:focus {outline: none; border-color:#80bdff;outline:0;box-shadow:0 0 0 .2rem rgba(0,123,255,.25)}

.form-raido {display: flex; margin-right: 12px;}
.form-raido input {margin-right: 6px;}
.form-check {display: flex; margin-right: 15px; padding: 0;}
.form-check input  {margin-right: 6px;}

.form-calendar {display: flex; align-items: center; flex-wrap: wrap;}
.form-calendar.type2 {flex-wrap: wrap;}
.form-calendar span {margin-right: 4px;}
.form-control.datepicker {padding: 4px 0.75rem; min-width: 110px; background: #fff url(../../img/icon_calendar.svg) no-repeat right 6px center !important; background-size: 16px auto; color: #495057 !important;}

.file-group {margin-top: 2px !important; width: 100%; display: flex; flex-wrap: wrap; align-items: stretch; position: relative;}
.file-group .custom-file {flex:1; margin-right: 2px;}
.file-group .btn {margin-right: 2px;}

.custom-file-input {cursor: pointer;}
.custom-file-label::after {content: '파일 선택';}
.img-thumbnail {display: flex; justify-content: center; align-items: center; width: 150px; height: 150px;}
.img-thumbnail > img {max-width: 100%; max-height: 100%; object-fit: contain;}
.file-name {display: flex; margin-right: 4px; flex:1; border-bottom: 1px solid #eee;}
.file-name::before {content: ''; display: block; flex:none; width: 18px; height: 18px; margin-top: 2px; margin-right: 6px; background: transparent url(../../img/icon_file.svg) no-repeat center; background-size: cover;}
.file-name + .btn {align-self: flex-start;}
table td div:last-of-type .file-name:last-of-type {border-bottom: 0px;}

.datepicker {background: #fff}
.datepicker-dropdown {top: 0; left: 0;}
.datepicker table tr td.today, span.focused {border-radius: 50% !important;}
.datepicker thead tr:nth-child(2) {background-color: #1357b1 !important;}
.datepicker thead tr:nth-child(3) th {color: #1357b1 !important;padding-top: 10px; padding-bottom: 10px;}
.datepicker td,
.datepicker th {font-size: 1.3rem;}
.datepicker .dow, .old-day, .day, .new-day {width: 30px !important; height: 30px !important; border-radius: 0px !important;}
.datepicker .datepicker .old-day:hover, .day:hover, .new-day:hover, .month:hover, .year:hover, .decade:hover, .century:hover {border-radius: 50% !important; background-color: #eee;}
.datepicker .active {border-radius: 50% !important; background-image: linear-gradient(#90CAF9, #64B5F6) !important; color: #fff !important;}
.datepicker .prev, .next, .datepicker-switch {border-radius: 0 !important; padding: 6px 10px !important; text-transform: uppercase; color: #fff; opacity: 0.8;}
.datepicker .prev:hover, .next:hover, .datepicker-switch:hover {background-color: inherit !important; opacity: 1;}
.datepicker .datepicker-switch {font-size: 1.6rem;}
.datepicker .prev,
.datepicker .next {font-size: 2rem;}

.ipt-addr .zip {margin-right: 3px;}
.ipt-addr .zip input {width: 80px;}
.ipt-addr .zip .btn {margin-left: 3px;}
.ipt-addr .addr {flex: 1;}

/* list-text */
.list-text {}
.list-text-inner {list-style:none;margin-top:6px}
.list-text li {position:relative;font-size:1.3rem;line-height:1.9rem;margin-bottom:5px}
.list-text li:last-of-type {margin-bottom:0}

/* type */
.list-text.bullet li {padding-left:7px}
.list-text.bullet li::before {content:"";position:relative;display:inline-block;width:2px;height:2px;background-size:100% auto;vertical-align:top;position:absolute;left:0px;top:9px;background:#333;border-radius:100%}

.list-text.bullet1 li {padding-left:6px}
.list-text.bullet1 li::before {content:"";position:relative;display:inline-block;width:2px;height:2px;background-size:100% auto;vertical-align:top;position:absolute;left:0px;top:9px;background:#666;border-radius:100%}

.list-text.esse li {padding-left:12px}
.list-text.esse li::before {content:"*";position:relative;display:inline-block;width:2px;height:2px;background-size:100% auto;vertical-align:top;position:absolute;left:0px;top:3px;color:red}

.list-text.esse1 li {padding-left:16px}
.list-text.esse1 li::before {content:"※";position:relative;display:inline-block;width:2px;height:2px;background-size:100% auto;vertical-align:top;position:absolute;left:0px;top:0px;color:#333}

.list-text.bar li {padding-left:8px}
.list-text.bar li::before {content:"";position:relative;display:inline-block;width:3px;height:1px;background-size:100% auto;vertical-align:top;position:absolute;left:0px;top:9px;background:#333;border-radius:100%}

.list-text.bar1 li {padding-left:10px;font-size:1.6rem;line-height:22px}
.list-text.bar1 li::before {content:"";position:relative;display:inline-block;width:5px;height:2px;background-size:100% auto;vertical-align:top;position:absolute;left:0px;top:10px;background:#666;border-radius:100%}

/* text-box */
.text-box1 {margin-bottom: 30px;}
.text-box1 .text-box-inner {background: #f7f7f7; padding: 20px;}
.text-box1 .s-title1 {margin-bottom: 10px;}
.text-box1 .list-text.bullet {padding-left: 26px;}
.text-box1.type1 {margin-bottom: 40px;}

.text-box2 {}
.text-box2 .text-box-inner {border-top: 2px solid #000000; background: #F8FAFB; padding: 32px;}
.text-box2 .text-box-inner.type1 {background: #F0F7FA; margin-bottom: 20px;}
.text-box2 .text-box-inner.type2 {border-top:0px;}
.text-box2 .list-text.bullet + .btn {margin-top: 24px;}

.text-box2.type1 {margin-bottom: 40px;}
.text-box2.type1-2 {margin-bottom: 20px;}
[class^='text-box2 type1'] .text-box-inner {font-size: 1.6rem;}
[class^='text-box2 type1'] .list-text.bullet li {font-size: 1.6rem; margin-bottom: 4px;}
[class^='text-box2 type1'] .list-text.bullet li:last-of-type {margin-bottom: 0;}

.text-box2.print .text-box-inner {display: flex; align-items: center;}
.text-box2.print .text-box-inner::before {content: ''; display: block; width: 108px; height: 108px; margin-right: 4px;  background-size: contain;}

.text-box2.notice .text-box-inner {display: flex; align-items: center;}
.text-box2.notice .text-box-inner::before {content: ''; display: block; width: 108px; height: 108px; margin-right: 14px;  background-size: contain;}

/* text-box - icon */
[class^=text-box][class*=text-icon] > .text-box-inner {display: flex;}
[class^=text-box][class*=text-icon] > .text-box-inner::before {flex:none; content: ''; display: block; margin-right: 10px; width: 100px; height: 100px; }
[class^=text-box][class*=text-icon] .icon-inner {}

/* state */
[class^=state-] {display: flex;}
[class^=state-] > i {margin-right: 5px;  font-size: 1.4rem;}
[class^=state-] > span {display: block;}
.state-comp  {color: #28a745;}
.state-ing  {color: #999;}
.state-stand  {}
.state-act {color: #e06500;}
.state-act::before {background: #fd7e14;}
.state-inact {color: #999;}
.state-inact::before {background: #999;}
.state-act::before,
.state-inact::before {content: ''; display: block; margin-top: 5px; width: 10px; height: 10px; border-radius: 100%; margin-right: 3px;}

/* tab */
.nav-tabs {border-bottom: 1px solid #b4cae7;}
.nav-tabs .nav-link {color: #164b91; border:1px solid #b4cae7; background: #deecff; margin-right: 2px; padding: 0.5rem 1.5rem;}
.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:active,
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link.active {color: #fff; background: #007bff; border:1px solid #007bff;}
.nav-tabs .nav-link.disabled {color: #919191; background: #e9ecef; border: 1px solid #e9ecef; border-bottom: 1px solid #b4cae7;}

.tab-content {padding: 15px 0 15px 0;}
.tab-content.type1 {padding: 0 0 30px 0;}

/* popup */
.modal-header {background: #E40422;}
.modal-header .modal-title {color: #fff; font-size: 1.6rem;}
.modal-header .close {text-shadow: none; opacity: 1;}
.modal-header .close i {color: #fff; font-size: 2rem; font-weight: 700;}
.modal-body {padding: 20px;}
.modal-body::-webkit-scrollbar {width:6px;height:4px;overflow:hidden;}
.modal-body::-webkit-scrollbar-thumb {background-color:#b0b5c4;outline:none;border-radius:10px}
.modal-body::-webkit-scrollbar-track {box-shadow:none;background:transparent;border-radius:10px}
.modal-footer {justify-content: center; border-top: 0px; padding: 10px 10px 20px 10px;}
.modal-footer .btn {font-size: 1.3rem;}


/*---------------------------------------- content ----------------------------------------*/
/* login */
.type-login {/* background: url(../../img/login_bg.png) no-repeat; background-size: cover; */ min-height: 100vh; height:100%; background-color: #fff;}
.type-login .container-inner {height: 100vh; min-height: 700px; display: flex; justify-content: center; align-items: center; padding:0 20px;}


.login-slider {position: fixed; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%;z-index: 1;}
.login-slider div {position: absolute; width: 100%; height: 100%; object-fit: cover; display: none;}
.login-slider div.active {display: block;}
.login-slider .num01 {background: url(../../img/login_bg.png) no-repeat center; background-size: cover;}
.login-slider .num02 {background: url(../../img/login_bg2.png) no-repeat center; background-size: cover;}
.login-slider .num03 {background: url(../../img/login_bg3.png) no-repeat center; background-size: cover;}

.login {max-width: 440px; width: 440px; margin: 0 auto; padding: 68px 40px 44px; background: rgb(255, 255, 255, 0.9); border-radius: 12px; position: relative; z-index: 2;}
.login-top h1.logo {margin: 0; text-align: center; font-size: 3rem; line-height: 3.6rem; font-weight: 700; color: #000;}
.login-top h1.logo img {height: 34px;}
.login-top .sub-text {margin: 8px 0 0 0; text-align: center; font-size: 1.4rem; line-height: 2.2rem; color: #666;}
.login-top .sub-text > .text-danger {color: #000 !important;}

.login-form {margin: 36px auto 36px; padding: 0px; }
.login-checkbox {display:inline-block; vertical-align:middle; overflow:hidden; position:relative; cursor:pointer; font-size:1.3rem; line-height:23px;color:#333; margin-bottom: 0px;}
.login-checkbox input[type=checkbox] {position:absolute; left:-20px; top:-20px}
.login-checkbox:before {content:''; display:inline-block; vertical-align:top; width:24px; height:24px; background:url(../../img/icon_login_unchecked.svg) no-repeat; margin-right:4px; background-size:100%; }
.login-checkbox.checked:before {background:url(../../img/icon_login_checked.svg) 0 0 no-repeat; background-size:100%; }
.login-checkbox i {font-style:normal;color:#fd5490;}

.login-form .box-form > input {display: block; width: 100%; height: 48px; margin-bottom: 12px; padding: 0; font-size: 1.4rem !important; text-indent: 16px; border: 1px solid #DFDFDF; border-radius: 8px; color: #000;}
.login-form .box-form > input::placeholder {color: #999;}
.login-form .box-form > input:last-of-type {margin-bottom: 0;}

.login-form .box-form > .btn {display: flex; align-items: center; justify-content: center; margin-top: 40px; padding:0px; width: 100%; height: 60px; font-size: 2.2rem; background: #E40422; border-color: #E40422; border-radius: 4px; font-size: 1.8rem; line-height: 2.4rem; font-weight: 500; color: #fff;}
.login-form .box-form > .btn:hover {background: #2B2F33; border-color: #2B2F33;}
.login-form .box-form > .btn > span {font-size: 1.8rem; line-height: 2.4rem; font-weight: 500; color: #fff;}

.btn-join {width: 136px; height: 32px; background: #F5F5F5; border-color: #DFDFDF; color: #2B364D; border-radius: 4px;}
.btn-join:hover {color: #E40422; border-color: #bebebe;}

.login-alert {display: none; font-size: 1.3rem; margin-top: 8px; color: #E40422; text-align: center;}
.login-alert.on {display: block;}
.login-code {display: flex; align-items: center; margin-top: 5px; padding-left: 15px; font-size: 1.8rem; color: #fd5490;}
.login-code .btn {margin-left: auto; font-size: 1.8rem; text-decoration: underline;}

.login-footer ul {list-style: none; padding: 0; margin: 0;}
.login-footer li {text-align: center; color: #999; }
.login-footer li.text-box {margin: 12px 0 24px 0; padding: 8px 0; font-size: 1.2rem; line-height: 1.6rem; border: 1px solid #eaeaea;}
.login-footer li.text-sm {font-size: 1.1rem; line-height: 1.6rem; color: #999999; margin-top: 8px;}

.login-term {width: 1000px; margin: 30px auto 50px;}
.login-term .term-form {padding: 30px 40px; width: 100%; height: 300px; background: #f8f8f8;}
.login-term .term-form > .term-form-inner{width: 100%; height:100%; color: #999; font-size: 1.6rem; line-height: 2.4rem; overflow-y: auto;}
.login-term .term-check {display: flex; flex-direction: column; align-items: center; margin-top: 30px;}
.login-term .term-check .login-checkbox > span {color: #fd5490;}
.login-term .term-check .btn {display: block; margin-top: 15px; padding:0px; width: 250px; font-size: 2.2rem; line-height: 5.8rem; background: #415bb1;}

.idpw-check {margin-top: 12px;}
.btn-idpw {display: flex; justify-content: center; margin: 12px auto;}
.btn-idpw .btn {font-size: 1.4rem; color: #000 !important;}
.btn-idpw .btn:hover {text-decoration: underline;}

/* error */
.error .title {text-align: center;}
.error .title strong {display: block; font-family: georgia; font-size: 6rem; line-height: 6.6rem; font-weight: 600;}
.error .title span {display: block; font-size: 2.5rem; font-weight: 500;}
.error .text {text-align: center; margin-top: 15px;}
.error .btn-home {font-size: 1.4rem; margin-top: 5px;}

/* order */
.order-move {margin-top: 10px;}
.order-move .item {display: flex; align-items: center; margin-bottom: 10px;}
.order-move .item .btn {margin-right: 5px;}
.order-move .item .btn::before {color: #dc3545;}
.order-move .item .title {font-size: 1.4rem; font-weight: 500; margin-left: 5px;}


/*---------------------------------------- js ----------------------------------------*/
.dropdownH:hover>.dropdown-menu {display: block; margin:0px;}
.dropdownH>.dropdown-toggle:active {pointer-events: none;}




/*---------------------------------------- ani ----------------------------------------*/
@-webkit-keyframes ani-bgColor {
    0% {background-color: #4682d1;}
    50% {background-color: #fff;}
    100% {background-color: #4682d1;}
}
@keyframes ani-bgColor {
    0% { background-color: #4682d1;}
    50% {background-color: #fff;}
    100% { background-color: #4682d1;}
}




/* form */
.form-ipt {}
.form-ipt-inner {margin-bottom:20px}
.form-ipt .form-item {}
.form-ipt .form-item dl {list-style: none; padding: 0; margin: 0;}

.form-ipt .entry {margin-bottom:8px;}
.form-ipt .entry > label {font-size: inherit; font-weight: inherit; color: inherit; line-height: inherit;}

.form-dl {display: flex; align-items: stretch; width: 100%; /* display:flex; align-items: stretch; flex: 1; */}
.form-dl dt {width:15%; font-weight: normal;}
.form-dl dd {width: calc(100% - 15%);}
.form-dl dt,
.form-dl dd {align-content: center;}
.form-dl [class*=col] {padding:0; margin: 0;}
.form-dl .text-sm {margin-top: 8px;}

.form-dl .d-flex .btn-group {flex: none; width: auto; margin-left: 4px;}
.form-dl .d-flex .form-control:last-of-type, 
.form-dl .d-flex .form-select:last-of-type {margin-right: 0;}

/* col */
.form-dl.col2 dd {width: calc((100% - 30%)/2);}
.form-dl.col2 dd.col1 {width: calc((100% - 45%) / 3);}
.form-dl dd.flex-1 {flex:1; width: auto;}

.form-dl.col3 dd {width: calc((100% - 45%)/3);}

.form-dl.col4 dt {width:10%;}
.form-dl.col4 dd {width: calc((100% - 40%)/4);}



/* type1 */
.form-ipt.type1 .form-ipt-inner {border-top: 1px solid #000;}
.form-ipt.type1 dt,
.form-ipt.type1 dd {padding: 8px 14px; font-size: 1.3rem; line-height: 1.5; margin-bottom: 0; border-bottom: 1px solid #EAEAEA;}
.form-ipt.type1 .entry {margin:0px; color: #000; border-right: 1px solid #EAEAEA; background: #f8f3f3;}
.form-ipt.type1 .comp {}


/* necess */
.necess {color: #F16110; font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit;}


.form-calendar-outer {display: flex; width: 100%; flex-wrap: wrap;}
.form-calendar-outer .form-control {/* width: 114px; */width: 124px; cursor: pointer;}

.form-comp select {width: 100px; margin-right: 2px !important;}

.layer-video {width: 100%; height: 700px;}

/* etc */
.error-box {display: flex; align-items: center; justify-content: center; height: 100vh;}

/* dropzone */
.dz-progress {display: none !important;}
.dropzone {margin: 8px 0; padding: 8px 12px 0px 12px !important; border-color: #ccc !important;}
.dropzone .dz-message {margin: 3.6em 0 !important;}
.dropzone .dz-preview {display: flex !important; width: 100%; min-height: auto !important; margin: 0 0 4px 0 !important;}
.dropzone .dz-preview .dz-image {width: 18px !important; height: 18px !important; border-radius: 4px !important; margin-right: 8px !important; background: transparent url(../../img/icon_file.svg) no-repeat center !important; background-size: cover !important;}
.dropzone .dz-preview .dz-details {flex:1; display: flex; align-items: flex-start; position: relative !important; padding: 0px !important; min-width: auto !important; max-width: auto !important; line-height: 140% !important;}
.dropzone .dz-preview .dz-details .dz-size {flex:none; font-size: 12px !important; margin-bottom: 0px !important; margin-right: 8px; color: #888;}
.dropzone .dz-preview .dz-details .dz-size span {padding: 0 !important;}
.dropzone .dz-preview .dz-details .dz-filename {white-space: break-spaces !important; text-align: left;}
.dropzone .dz-preview .dz-details .dz-filename span {padding: 0 !important;}
.dropzone .dz-preview .dz-details .dz-filename:hover span {border: 0px !important; padding: 0 !important;}
.dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {border: 0px !important; overflow: auto !important;}
.dropzone .dz-preview .dz-remove {flex: none; margin-left: 12px;}
.dropzone .dz-preview .dz-remove button {margin-top: 0px !important;}

.dropzone:hover .file-dz-title::before {opacity: 0.6;}
.dropzone:hover .file-dz-title em {text-decoration: underline; } 
.file-dz-title {display: flex; flex-direction: column; align-items: center;}
.file-dz-title::before {content: ''; display: block; width: 40px; height: 40px; background: url(../../img/icon_file_drop.svg) no-repeat center; background-size: cover;}
.file-dz-title em {font-size: 1.4rem; font-weight: 500; letter-spacing: -0.6px; font-style: normal; margin-top: 12px;}

/** editor */
.ck.ck-toolbar.ck-toolbar_grouping>.ck-toolbar__items {flex-wrap: wrap !important;}
.ck-rounded-corners .ck.ck-editor__main>.ck-editor__editable, .ck.ck-editor__main>.ck-editor__editable.ck-rounded-corners {height: 300px;}

.board-cont {height: 200px !important;}
.board-cont .bc-div {width: 100%; height: 100%; vertical-align: top; padding: 4px 0;}

/* .ck-editor ul,
.ck-editor ol,
.ck-editor dl,
.board-cont ul, 
.board-cont ol, 
.board-cont dl {
    list-style: auto !important;
    padding: auto !important;
    margin: auto !important;
} */

.file-del {margin-left: 4px; margin-right: 8px;}
.file-del.form-check input {margin-right: 2px;}
.file-del > span {line-height: 28px; color: #6c757d;}


.box-board-code {display: flex;}
.box-board-code .item01 {margin-right: 36px; flex:none;}
.box-board-code .item01 tr:hover {cursor: pointer;}
.box-board-code .item02 {flex:1;}



.dashboard-item {border:2px solid #eee; margin-bottom: 28px;}
.dashboard-item:last-of-type {margin-bottom: 0;}
/* .dashboard-item > [class^=item] {position: relative; flex:none; width: calc(50% - 10px); padding: 80px 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.dashboard-item > [class^=item] .info {display: flex; flex-direction: column; align-items: center; justify-content: center; position: absolute; left: 0px; right: 0; top: 50%; transform: translateY(-50%); margin: 0 auto; z-index: 1;}

.dashboard-item .title {font-size: 1.8rem; font-weight: 600; letter-spacing: -0.6px; color: #444;}
.dashboard-item .count {font-size: 5rem; line-height: 6.4rem; font-weight: 700; color: #000;} */
.db-th {width: 40%;} 

.circle-svg {transform: rotate(-90deg); /* 시작점을 위쪽으로 조정 */}
.progress-circle {
  fill: none; /* 채우기 없음 */
  stroke: white; /* 초기 색상 */
  stroke-width: 8; /* 테두리 두께 */
  stroke-dasharray: 283; /* 원 둘레(2πr, r=45) */
  stroke-dashoffset: 283; /* 초기 오프셋 값 */
}
.progress-circle.num01 {animation: fill-circle1 0.4s linear forwards;}
.progress-circle.num02 {animation: fill-circle2 0.4s linear forwards;}
.progress-circle.num03 {animation: fill-circle3 0.4s linear forwards;}
.progress-circle.num04 {animation: fill-circle4 0.4s linear forwards;}
@keyframes fill-circle1 {
    0% {
        stroke: white; /* 흰색에서 시작 */
        stroke-dashoffset: 283; /* 원형 테두리 숨김 */
    }
    100% {
        stroke: #dc3545; /* 빨간색으로 변경 */
        stroke-dashoffset: 0; /* 원형 테두리 완전 표시 */
    }
}
@keyframes fill-circle2 {
    0% {
        stroke: white; /* 흰색에서 시작 */
        stroke-dashoffset: 283; /* 원형 테두리 숨김 */
    }
    100% {
        stroke: #dc8635; /* 빨간색으로 변경 */
        stroke-dashoffset: 0; /* 원형 테두리 완전 표시 */
    }
}

/* .dashboard-item > [class^=item]::before {content: ''; display: block; width: 300px; height: 300px; border: 20px solid red;
    border-radius: 100%;
    margin: 0 auto;
    border-top-color: #eee;
    animation: spinner 0.2s 1 linear;}

    @keyframes spinner {
        0% {transform: rotate(0deg); }
        100% {transform: rotate(360deg);}
      } */

.board-cont img {max-width: 100% !important; height: auto !important;}

/***************** pc2 *****************/
@media only screen and (max-width: 1500px) {
    .board-notice {width: 400px;}
    .board-cp {width: 400px;}

    .pc-scroll {table-layout: fixed !important;}
    .table-scroll .table-list.pc-scroll table {table-layout: auto;}
}

/***************** tablet *****************/
@media only screen and (max-width: 1199px) {

    .show-pc {display: none;}
    .show-mo {display: block;}
    .tb-none {display: none;}


    .footer {display: block; width: calc(100% - 60px); padding-bottom: 8px; opacity: 0.6; left: 0; right: 0; margin: 0 auto;}

    /* .side, */
    /* .content {margin: 0 0 6px 6px; padding: 0; width: calc(100% - 12px); height: calc(100vh - 60px); border-radius: 8px;}
    .content::before {height: calc(100vh - 60px); border-radius: 8px;}
    .content-inner::before {display: none;} */

    .content {margin: 0 0 6px 6px; width: calc(100% - 12px); height: 100%; min-height: 600px; padding: 0 0 0 0; border-radius: 8px;}
    .content::before {height: 100%; min-height: 600px; border-radius: 8px;}
    /* .content::before {display: none;} */
    .content-inner::before {display: none;}


    .side {left: -1000px;}
    .btn-side-toggle {opacity: 0; left: 6px;}
    .header-top .btn-group.util {display: none;}



    /* mobile */
    .header-top {height: 60px;}
    .header-top .logo img {height: 24px;}
    .header-top .gnb-mobile .logo img {height: 26px;}
    .gnb-mobile {display: block; margin-right: 16px;}

    /* gnb-mobile */
    .gnb-mobile {position: relative; display: block; order: 1;}
    .gnb-mobile .btn-menu {display: block;}
    .gnb-mobile .btn-menu button {display: block; width: 36px; height: 36px; background: url(../../img/icon-allmanu.svg) no-repeat center; background-size: cover; border: 0;}

    /* mobile menu */
    .gnb-mobile .menu-layer {display: none; position: fixed; right:0px; top:0px; bottom:0px; z-index: 900; background: #fcfcfc;}
    .gnb-mobile.on .menu-layer {display: block; }
    .gnb-mobile-bg {display: none; position: fixed; left:0px; top:0px; right:0px; bottom:0px; background: rgba(0,0,0,0.7); z-index: 899;}
    .gnb-mobile.on .gnb-mobile-bg {display: block;}

    .menu-layer {padding: 0 16px 80px 20px;  position: relative; width: 260px; min-height: auto; background-color: #fff; height: 100vh; overflow-y: auto; background-color: #fff; height: calc(var(--vh, 1vh) * 100);}
    .menu-layer .layer-inner {padding-right: 6px;}
    .menu-layer::-webkit-scrollbar {width:6px;height:4px;overflow:hidden}
    .menu-layer::-webkit-scrollbar-thumb {background-color:#caceda;outline:none;border-radius:10px}
    .menu-layer::-webkit-scrollbar-track {box-shadow:none;background:transparent;border-radius:10px}

    .mo-head {position: relative; width: 100%; height: 60px; margin-bottom: 8px; background-color: #fff;}
    .mo-head .head-inner {position: fixed; right:0px; top:0px; width:260px; background-color: #2B364D; z-index: 101;}

    .mhead-logo {display: flex; align-items: center; width: 100%; height: 60px; padding: 0 20px;}
    .mhead-logo .logo {margin:0px; order: 0;}
    .mhead-logo .logo > a {}
    .btn-menu-close {display: block; margin-left: auto;}
    .btn-menu-close button {display: block; width: 36px; height: 36px; background: url(../../img/icon-close1-w.svg) no-repeat center; background-size: cover;}
    .mhead-btn {width: 100%; display: flex; flex-wrap: wrap; border-top: 1px solid #4e4e4e;}
    .mhead-btn .btn {flex:none; width: 50%; height: 32px; padding: 0;}
    .mhead-btn .btn a {width: 100%; height: 100%; line-height: 30px; display: block; color: #fff;}

    .mo-hashtag {position: relative; margin-bottom: 10px;}
    .btn-hashtag-mo {display: block;}
    .btn-hashtag-mo button {display: block; width: 100%; height: 48px; background-size: 100% auto;}

    /* mobile menu */
    .mo-menu {width:100%; /* margin-bottom: 15px; */}
    .mo-menu ul {list-style: none; padding: 0; margin: 0;}
    .mo-menu ul ul {display:none; /* background-color: #f3f3f3; */}
    .mo-menu li {box-sizing:border-box;}

    /* 1dep */
    .mo-menu-inner > .item {width:100%;}
    .mo-menu-inner > .item > .title {cursor:pointer; position:relative; display:flex; padding:18px 46px 18px 0; font-size: 1.6rem; line-height: 2.4rem; font-weight: 600; z-index:2; color: #333; border-bottom: 1px solid #EAEAEA;}
    .mo-menu-inner > .item > .title::after {position:absolute; right:0px;top:50%; transform: translateY(-50%); content:''; display:block; width:20px; height:20px; background: url(../../img/icon-arrow-down1.svg) no-repeat center; background-size: cover !important;}
    .mo-menu-inner > .item.on  > .title::after {background: url(../../img/icon-arrow-up1.svg) no-repeat center;}
    /* .mo-menu-inner > .item > .title > span {font-size: 2.4rem; line-height: 3.2rem; font-weight: 600;} */

    /* 2dep */
    .mo-menu .dep2 > .item { /* border-bottom: 1px solid #eaeaea; */}
    .mo-menu .dep2 > .item:first-of-type {margin-top: 8px;}
    .mo-menu .dep2 > .item:last-of-type {border-bottom: 0px;}
    .mo-menu .dep2 > .item:first-of-type > .title {}
    .mo-menu .dep2 > .item:first-of-type > .title::after {top: 8px;}
    .mo-menu .dep2 > .item > .title {cursor:pointer; position:relative; display:flex; padding:12px 0 12px 16px; font-size: 1.3rem; line-height: 2rem; color: #333; font-weight: 400;}
    .mo-menu .dep2 > .item a:hover {color: #E40422; background: #FFEDED; border-radius: 4px;}
    /* .mo-menu .dep2 > .item.plus > .title::after {position:absolute;right:6px;top:16px; content:''; display:block; width:24px; height:24px; background-size: cover !important;} */

    .mo-menu .dep2 > .item.on a {color: #E40422; background: #FFEDED; border-radius: 6px;}
    .mo-menu .dep2 > .item a:hover {color: #E40422; }
    /* .mo-menu .dep2 > .item.on > .title > span {font-size: 1.6rem; line-height: 2.4rem; color: #666; font-weight: 600;} */

    /* 3dep */
    .mo-menu .dep3 {padding: 12px; background: #f9f9f9;}
    .mo-menu .dep3 > .item {}
    .mo-menu .dep3 > .item.on {}
    .mo-menu .dep3 > .item > a {display: block; width: 100%; font-size: 1.4rem; line-height: 2.4rem; color: #666; margin-bottom: 12px;}
    .mo-menu .dep3 > .item > a:last-of-type {margin-bottom: 0;}

    .mo-menu-btm {position: fixed; right: 0px; bottom: 0px; width: 260px; height: 60px; display: flex; align-items: center; background: #F6F6F6; z-index: 10;}
    .mo-menu-btm > div {flex:1; border-right: 1px solid #e7e7e7;}
    .mo-menu-btm > div:last-of-type {border-right: 0px;}
    .btn-mo-logout button {background: transparent;}
    .btn-mo-logout button::before {content: ''; display: block; margin-right: 2px; width: 22px; height: 22px; background: url(../../img/icon_logout_mo.svg) no-repeat center; background-size: cover;}
    .btn-mo-member a::before {flex:none; content: ''; display: block; margin-right: 2px; width: 22px; height: 22px; background: url(../../img/icon_profile_mo.svg) no-repeat center; background-size: cover;}
    .mo-menu-btm a,
    .mo-menu-btm button {display: flex; align-items: center; justify-content: center; width: 100%; padding: 4px 0; color: #000; text-align: center;}
    .mo-menu-btm a:hover,
    .mo-menu-btm button:hover {color: #E40422;}

    body {overflow-y: auto;}
    .content-inner {padding: 20px 20px 68px 20px; overflow: hidden;}

    
    .mo-full {max-width: 100%; width: 100%;}
    .mo-col {flex-direction: column;}

    /* login */
    .type-login .container-inner {width: 100%; height: 100%; min-height: 100%;  display: block; padding: 60px 20px 60px 20px;}
    .login {padding: 28px 20px; width: 100%; max-width: 400px;}
    .login-top h1.logo img {height: 28px;}
    .login-top .sub-text {font-size: 1.2rem; margin-top: 4px;}
    .login-form {margin: 20px auto;}
    .login-form .box-form > input {height: 40px; margin-bottom: 6px;}
    .login-alert {font-size: 1.2rem;}
    .login-form .box-form > .btn {margin-top: 24px; height: 44px; font-size: 1.6rem;}
    .idpw-check {margin-top: 8px;}
    .btn-idpw {margin: 4px auto;}
    .btn-idpw .btn {font-size: 1.3rem;}
    .btn-join {height: 28px;}
    .login-footer li.text-sm {margin-top: 6px;}


    /* common */
    h2.title {font-size: 2rem; letter-spacing: -0.6px;}
    h3.title {font-size: 1.6rem; line-height: 2.2rem; letter-spacing: -0.6px; padding-left: 12px;}
    h3.title::before {height: 20px; margin-top: 2px;}
    .necess {font-size: 1.2rem; line-height: 1.8rem;}

    .br-mo {display: block;}
    .mo_l0 {margin-left: 0 !important;}

    /* form */
    .form-calendar-outer .form-control {width: 100%; flex:1;}
    .form-comp {flex-wrap: wrap;}
    .form-comp select {width: 100%; margin-right: 0 !important; margin-bottom: 2px;}

    /* table */
    .table-top.type1 {margin-bottom: 12px;}
    .table-scroll .table-list {margin-bottom: 20px;}
    .btn-group + .paging {margin-top: 20px;}
    .btn-group + .table-top {margin-top: 20px;}

    /* board */
    .board-notice {width: 360px !important;}
    .board-cp {width: 240px !important;}
    .board-cp-code {width: 100px !important;}
    .board-cp-name {width: 90px !important;}
    .board-cp-date {width: 150px !important;}

    /* popup */
    .modal-dialog {max-width: 700px !important}
    .modal {padding-right: 0 !important;}
    .modal-video {width: 98% !important; max-width: 100% !important; margin: 0 auto !important;}
    .layer-video {width: 100%; height: 450px !important;}

    .box-board-code {flex-direction: column;}
    .box-board-code .item01 {margin-right: 0;}
    .mo-scroll {table-layout: fixed !important;}
    .table-scroll .table-list.pc-scroll table {table-layout: fixed;}

    .box-dashboard {flex-direction: column;}
    .box-dashboard .col-6 {width: 100%; max-width: 100%; margin-bottom: 24px;}
    .box-dashboard .col-6:last-of-type {margin-bottom: 0;}
    .dashboard-item > [class^=item] {padding: 24px 0;}
    .dashboard-item .title {font-size: 1.4rem;}
    .dashboard-item .count {font-size: 4rem; line-height: 5rem;}
    .circle-svg {width: 200px; height: 200px;}


}

/***************** mobile *****************/
@media only screen and (max-width: 767px) {

    /* .type-login {background: url(../../img/login_bg_mo.png) no-repeat center; background-size: cover;} */
    .login-slider .num01 {background: url(../../img/login_bg_mo.png) no-repeat center; background-size: cover;}
    .login-slider .num02 {background: url(../../img/login_bg2_mo.png) no-repeat center; background-size: cover;}
    .login-slider .num03 {background: url(../../img/login_bg3_mo.png) no-repeat center; background-size: cover;}

    .table-scroll .table-list table {table-layout: inherit;}
    .mo-none {display: none;}
    
    .mo-wrap {flex-wrap: wrap;}
    .mo-full2 {max-width: 100%; width: 100%;}
    .mo-col2 {flex-direction: column;}
    .mo-mt2 {margin-top: 2px !important;}

    .mo-m0 {margin: 0px !important;}
    .mo-mt0 {margin-top: 0px !important;}
    .mo-mb0 {margin-bottom: 0px !important;}
    .mo-ml0 {margin-left: 0px !important;}
    .mo-mr0 {margin-right: 0px !important;}

    .m-w80p {width:80px !important;}
    .m-w90p {width:90px !important;}
    .m-w100p {width:100px !important;}
    .m-w110p {width:110px !important;}

    /* board */
    .pagination { flex-wrap: wrap; justify-content: center;}
    .paging .page-item {margin: 0 2px;}
    .paging .page-link {width: 32px; padding: 1px 0; text-align: center; margin: 2px 0; /* padding: 1px 4px; font-size: 1.2rem; letter-spacing: -2px; */}
    .paging .page-link.arrow {width: 32px; padding: 1px 0;text-align: center;  /* padding: 1px 1px; */}
    

    /*------------ form ------------*/
    .form-dl {flex-wrap: wrap;}
    .form-dl dt {width: 100px !important;}
    .form-dl dd {width: calc(100% - 100px) !important;}
    .form-ipt.type1 dt, 
    .form-ipt.type1 dd {padding: 6px 8px;}

    /* .form-calendar { flex-wrap: nowrap;} */
    .form-calendar-outer .form-control {/* width: 100%; min-width: auto; */flex:none; width: 135px;  margin-bottom: 2px;}
    .form-calendar-outer .form-control:last-of-type {margin-right: 0;}
    .form-calendar-outer .form-calendar {max-width: 100%; width: 100%;}

    .form-comp {flex-wrap: nowrap;}
    .form-comp select {width: 80px; margin-right: 2px !important; margin-bottom: 0px;}

    .form-code {flex-wrap: wrap;}
    .form-code .form-control:first-of-type {width: 100%; flex:none; margin-right: 0; margin-bottom: 2px;}
    .form-code .form-control:nth-of-type(2) {flex:1;}

    .file-group {margin-top: 4px;}
    .file-group .custom-file {width: 100%; flex:none; margin-right: 0; margin-bottom: 2px;}
    .file-name {border-bottom: 0;}

    .dropzone .dz-message {margin: 4rem 0 !important;}
    .file-dz-title::before {width: 24px; height: 24px;}
    .file-dz-title em {font-size: 1.3rem;}

    .ipt-mo-row {flex-direction: column;}
    .ipt-mo-row select,
    .ipt-mo-row input {width: 100% !important; margin: 1px 0 1px 0 !important;}

    .ipt-addr {flex-direction: column;}
    .ipt-addr .zip {margin-right: 0;}
    .ipt-addr .zip .btn {margin-left: 2px;}

    /* popup */
    .layer-video {width: 100%; height: 300px !important;}

    .table-comp-code th, 
    .table-comp-code td {padding: 6px 4px !important;}

    /* dropzone */
    .dropzone .dz-preview .dz-details {flex-direction: column;}

    
    .box-dashboard table {margin-bottom: 0;}
    .box-dashboard table th {font-size: 1.2rem !important;}
    /* .dashboard-item {display: none;} */
    .db-th {width: 140px;}
    /* .dashboard-item {border: 0;}
    .dashboard-item .circle-svg {width: 150px; height: 150px;} */



}

/***************** mobile *****************/
@media only screen and (max-width: 400px) {
    .btn-absolute {position: relative !important;}
}

/**************** table dnd *************/
.icon-dnd-handle {display: block; width: 16px; height: 16px; background: url(../../img/icon_dnd_handle.svg) no-repeat center; background-size: cover; margin: 0 auto; cursor: pointer;}
.icon-dnd-handle:hover {background: url(../../img/icon_dnd_handle_hover.svg) no-repeat center; background-size: cover;}
.table-hover tr:hover {background: #edf1fb !important;}