@charset "utf-8";

/*-------------------------------------------------------------------
	분류그룹 :공통
-------------------------------------------------------------------*/
/* Layout */
#wrap{min-width:1366px;width:100%;height:100%;display: flex;flex-direction: column;}		
#container{height:100%;width: 100%;background-image: url(/common/images/layout_bg.jpg); background-repeat: no-repeat;  background-position: center;  background-size: cover;}

/*side*/
#side{z-index:200;position:fixed;left: 8px;top: 8px;width: 220px;height: calc(100% - 18px);background-color: #141414;box-shadow:3px 0 10px 0 rgb(0 0 0 / 5%);border-radius: 20px;transition: width .3s;}
#side .menu-scroll {height: calc(100% - 120px);}
#side .logo{height: 66px;display: flex;justify-content: space-between;align-items: center;padding: 0 5px;}
#side .logo span{text-align:center;margin:0;}
#side .logo span a {display: block;padding-top: 0px;transition: width .3s;transform-origin: center center;}
#side .logo .logo-tit {display: flex;flex-direction: column;align-items: flex-start;padding-top: 5px;padding-left: 14px;text-overflow: ellipsis;white-space: nowrap;}
#side .logo .logo-tit .txt {color: #fff;font-size:1.6rem;}
#side .logo .logo-tit .code {color: var(--primary-100);font-size: var(--fz-body-sm);}

.sidebar-show #side .logo span.logo-sm,
.sidebar-hide.side-hover #side .logo span.logo-sm {display: none;}
.sidebar-hide #side .logo span.logo-sm {display: block;}

.sidebar-hide #side .logo span.logo-lg {display: none;}
.sidebar-hide.side-hover #side .logo span.logo-lg {display: block;}
.sidebar-hide #side .logo .logo-tit { opacity: 0;}
.sidebar-hide.side-hover #side .logo .logo-tit {opacity: 1;transition: opacity 1s ease; transition-delay: 0.07s;}

#side .aside-menu ul.tabmenu{padding: 4px 7px 0px;height: 32px;}
#side .aside-menu ul.tabmenu li{height: 30px;line-height: 30px;width:50%;display:block;float:left;}
#side .aside-menu ul.tabmenu li a{text-align:center;display:block;color: var(--gray-10);border: 1px solid transparent;border-bottom: 1px solid var(--text-primary);font-size: var(--fz-body-sm);font-weight: 500; display: flex; align-items: center;justify-content: center;}
#side .aside-menu ul.tabmenu li a.active{color: var(--text-primary);border-radius:3px 3px 0 0;border: 1px solid var(--text-primary);border-bottom: none !important;}
#side .aside-menu .bookmark-list {color:#fff; padding:20px;font-size: var(--fz-body-sm);}
#side .aside-menu ul.tabmenu li a .menu-close {	
    border-radius: 50px;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
	margin:2px 0 0 3px;
	transition: all .2s ease;
}
#side .aside-menu ul.tabmenu li a .menu-close:hover {
	background-color: var(--board-color);
}
/*side추가수정*/
#side #lnb li .deps2.deps2_list > li.menu-item > a:before {
	content: "";
	font-size: 16px;
	background-image: url(/common/images/icon/icon_file.png);
	width: 16px;
	height: 14px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 16px;
	opacity: 0.8;
	margin-right: 4px;
}
#side #lnb li .deps2.deps2_list > li.menu-item > a.has:before {
	content: "";
	font-size: 16px;
	background-image: url(/common/images/icon/icon_folder.png);
	width: 16px;
	height: 12px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 16px;
	opacity: 0.8;
	margin-right: 4px;
}
#side #lnb li .deps2.deps2_list > li.menu-item > a.opened:before {
	background-image: url(/common/images/icon/icon_folder_open.png);
	opacity: 1;
}


/*side toggle*/
.sidebar-hide #side {width:60px;}
.sidebar-hide #content {padding-left:78px;}
.sidebar-hide #header .container-fluid {left:78px;    width: calc(100% - 78px);}

.sidebar-hide.side-hover #side.active {width:220px;}
.sidebar-hide.side-hover #side.active .logo h1 a {width:102px;}
.sidebar-hide.side-hover #side.active .logo h1 {margin: 0;}

.sidebar-hide #side.active .logo {padding: 5px 0px;}
.sidebar-hide.side-hover #side.active .logo {padding: 0 5px;}
.sidebar-hide.side-hover #side .aside-menu ul.tabmenu{height: 32px;padding: 4px 7px 0px;}

.sidebar-hide #side.active .logo h1 {margin: 0 auto;}
.sidebar-hide #side.active .logo h1 a {width:50px;}

.sidebar-hide #side.active .aside-menu ul.tabmenu,
.sidebar-hide #side.active .aside-menu #lnb li > a span.text,
.sidebar-hide #side.active .aside-menu #lnb li > a span.arrow,
.sidebar-hide #side.active .aside-menu #lnb li ul.deps2 li,
.sidebar-hide #side.active #lnb li ul.deps2::before,
.sidebar-hide #side .side-bot {
	display:none !important;
	/* overflow: hidden; */
	text-overflow: ellipsis;
	white-space: nowrap;
}
.sidebar-hide.side-hover #side.active .aside-menu ul.tabmenu,
.sidebar-hide.side-hover #side.active .aside-menu #lnb li > a span.text,
.sidebar-hide.side-hover #side.active .aside-menu #lnb li > a span.arrow,
.sidebar-hide.side-hover #side.active .aside-menu #lnb li ul.deps2 li,
.sidebar-hide.side-hover #side.active #lnb li ul.deps2::before,
.sidebar-hide.side-hover #side .side-bot {
	display:block !important;
	/* overflow: hidden; */
	text-overflow: ellipsis;
	white-space: nowrap;
}
.sidebar-hide.side-hover #side.active .aside-menu .deps1_list > li.menu-item {
	margin-bottom: 0px;
}
#side.active .aside-menu .deps1_list > li.menu-item {
	margin-bottom: 5px;;
}
.sidebar-hide #side #lnb li ul,
.sidebar-hide #side .aside-menu #lnb li > a span.text,
.sidebar-hide #side #lnb li > a span.text {
	opacity: 0;
    transform: translateX(-20px); /* 왼쪽으로 약간 이동한 상태 */
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    transition-delay: 0s; /* 지연 시간은 초기 상태에서는 0 */
}
.sidebar-hide.side-hover #side #lnb li ul,
.sidebar-hide.side-hover #side .aside-menu #lnb li > a span.text,
.sidebar-hide.side-hover #side #lnb li > a span.text {
	opacity: 1;
    transform: translateX(0); /* 제자리로 이동 */
    transition-delay: .1s; /* 3초 후에 나타남 */
}

#side #lnb {margin-top:12px;}
#side #lnb li{line-height:32px;position:relative;}
#side #lnb li > a{position: relative;padding:0 6px 0 6px;margin:0 2px;display: flex;align-items: center;flex: 0 0 100%;color:var(--gray-0);letter-spacing: -0.5px;transition: all .2s ease;border-radius: 50px;font-size: var(--fz-body-sm);}
#side #lnb li > a.lnb {justify-content: center;}
#side #lnb > li > a:hover {color:var(--text-primary);}
/* #side #lnb li a span {display: flex;} */
#side #lnb li a span.text {align-items: center;flex-grow: 1;}
#side #lnb li.deps1 > a > span.text {padding-left:4px;}
#side #lnb li a span.arrow {
	padding-right:12px;
	line-height: 18px;
    top: 0px;
    position: absolute;
    right: 6px;
}
#side #lnb li ul.deps2 > li:last-child {
	padding-bottom: 5px;
}
#side #lnb li > a svg {
	fill: var(--logo-color);
}
.stroke-icon {
	fill: var(--icon-fill, black); /* 기본 fill 색상 설정 */
}
#side #lnb li > a.active {
	color:#fff;
}
#side #lnb li.active > a.active {
	background: var(--primary-600);
}
#side #lnb li a svg {
	width:19px;
	height: 40px;
	margin-right:5px;
}
#side #lnb li a.opened {color: #fff;}
#side #lnb li ul {display:none;background:#2b292a;padding: 0;position: relative;}
/* #side #lnb li ul.deps2::before {content: "";width: 2px;height:calc(100% - 5px)!important;top: 0;left: 10px;background-color: #555;position:absolute;} */
#side #lnb li ul li{line-height: 26px;padding:0 0px 0 15px;}
#side #lnb li ul li a:hover {color: var(--text-primary)}
/* #side #lnb li ul li.active a:hover {color: var(--gray-0)} */
#side #lnb li ul li ul.deps3 {border-radius: 3px;background: #424242;margin: 0 9px 0 20px;}
#side #lnb li ul li ul.deps3 li {padding:4px 0px 4px 7px; margin-bottom: 0px;}
#side #lnb li ul li ul.deps3 li a {line-height: 1;position: relative;padding-left: 8px;} 
#side #lnb li ul li ul.deps3 li a::before {
	top: 8px;
    left: 0px;
    width: 3px;
    height: 3px;
    content: "";
    border-radius: 50%;
    position: absolute;
    background: #ffffff;
    transition: .5s;
}
#side #lnb li ul li ul.deps3 li.active a::before {
    background: var(--text-primary);
}

#side #lnb.deps1_list > li.active > a.opened {
	/* background-color: rgb(255 255 255 / 7%); */
}

#side #lnb li.menu-item.deps1 > a.opened {
	background-color: var(--btn-color);

}
#side #lnb li ul li.active {
	/* background-color: var(--btn-color); */
	/* border-radius: 18px; */
	color: var(--btn-color);
}
#side #lnb li ul li.active a {
	color:var(--text-primary);
}
#side #lnb li a.opened span.text {
	color: #fff;
}
#side #lnb li.menu-item.has a.opened span.text {
	color: var(--primary-300);
}



/* #side #lnb li ul[class^="deps"][class*="_list"] .menu-item.has > a::before {
	content: "";
    width: 2px;
    height: 0%;
    left: -5px;
    background-color: var(--primary-color);
    position: absolute;
    transition-duration: .15s !important;
    animation-duration: .2s !important;
    transition-property: all !important;
    transition-timing-function: cubic-bezier(.4,0,.2,1) !important;
}
#side #lnb li ul[class^="deps"][class*="_list"] .menu-item.has > a.opened::before {
	height: 80%;
} */

#side #lnb li ul[class^="deps"].resource {
    background-color: #282828;
    border-radius: 16px;
    margin-top: 3px;
}
#side #lnb li ul[class^="deps"][class*="_list"].resource li {
	padding-left:5px;
}

#side #lnb li ul li a {
	padding: 3px 5px 3px 5px;
	transition: all 0.2s ease-in-out;
}

#side #lnb li a .submenu-arrow {transform: translateY(-50%); color: var(--gray-20);}
#side #lnb li a .submenu-arrow:after, 
#side #lnb li a .submenu-arrow:before {
    position: absolute;
    width: 6px;
    height: 1.5px;
    background-color: currentcolor;
    border-radius: 2px;
    transition: all .3s ease;
    content: "";
}
#side #lnb li a.opened .submenu-arrow {
	margin-top:-2px;
}
#side #lnb li a .submenu-arrow:before {transform: rotate(-45deg) translateX(2.5px);}
#side #lnb li a .submenu-arrow:after {transform: rotate(45deg) translateX(-2.5px);}
#side #lnb li a.opened .submenu-arrow:before {transform:rotate(45deg) translateX(2.5px);}
#side #lnb li a.opened .submenu-arrow:after {transform:rotate(-45deg) translateX(-2.5px);} 
#side #lnb li span.m_icon i {
    width: 20px;
    height: 20px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px;
	display: none;
}
.sidebar-hide:not(.side-hover):not(.sidebar-show) #side #lnb li a {
	height: 37px;
    width: 26px;
    margin-left: 12px;
}

.sidebar-hide:not(.side-hover):not(.sidebar-show) #side #lnb li span.m_icon i {
	width: 25px;
    height: 25px;
	background-size: 25px;
}




.theme-teal #side #lnb li span.m_icon i {display:block;}
.theme-orange #side #lnb li span.m_icon i {display:block;}
.theme-indigo #side #lnb li span.m_icon i {display:block;}

/*theme-teal menu icon*/
.theme-teal #side #lnb li span.m_icon i.menu_t01 {background-image: url(/common/images/icon/m_icon_01_1.svg);}
.theme-teal #side #lnb li span.m_icon i.menu_t02 {background-image: url(/common/images/icon/m_icon_02_1.svg);}
.theme-teal #side #lnb li span.m_icon i.menu_t03 {background-image: url(/common/images/icon/m_icon_03_1.svg);}
.theme-teal #side #lnb li span.m_icon i.menu_t04 {background-image: url(/common/images/icon/m_icon_04_1.svg);}
.theme-teal #side #lnb li span.m_icon i.menu_t05 {background-image: url(/common/images/icon/m_icon_05_1.svg);}
.theme-teal #side #lnb li span.m_icon i.menu_t06 {background-image: url(/common/images/icon/m_icon_06_1.svg);}
.theme-teal #side #lnb li span.m_icon i.menu_t07 {background-image: url(/common/images/icon/m_icon_07_1.svg);}
.theme-teal #side #lnb li span.m_icon i.menu_t08 {background-image: url(/common/images/icon/m_icon_08_1.svg);}
.theme-teal #side #lnb li span.m_icon i.menu_t09 {background-image: url(/common/images/icon/m_icon_09_1.svg);}
.theme-teal #side #lnb li span.m_icon i.menu_t10 {background-image: url(/common/images/icon/m_icon_10_1.svg);}
.theme-teal #side #lnb li span.m_icon i.menu_t11 {background-image: url(/common/images/icon/m_icon_11_1.svg);}
.theme-teal #side #lnb li span.m_icon i.menu_t12 {background-image: url(/common/images/icon/m_icon_12_1.svg);}
.theme-teal #side #lnb li span.m_icon i.menu_t13 {background-image: url(/common/images/icon/m_icon_13_1.svg);}
.theme-teal #side #lnb li span.m_icon i.menu_t14 {background-image: url(/common/images/icon/m_icon_14_1.svg);}
.theme-teal #side #lnb li span.m_icon i.menu_t15 {background-image: url(/common/images/icon/m_icon_15_1.svg);}

/*theme-orange menu icon*/
.theme-orange #side #lnb li span.m_icon i.menu_t01 {background-image: url(/common/images/icon/m_icon_01_2.svg);}
.theme-orange #side #lnb li span.m_icon i.menu_t02 {background-image: url(/common/images/icon/m_icon_02_2.svg);}
.theme-orange #side #lnb li span.m_icon i.menu_t03 {background-image: url(/common/images/icon/m_icon_03_2.svg);}
.theme-orange #side #lnb li span.m_icon i.menu_t04 {background-image: url(/common/images/icon/m_icon_04_2.svg);}
.theme-orange #side #lnb li span.m_icon i.menu_t05 {background-image: url(/common/images/icon/m_icon_05_2.svg);}
.theme-orange #side #lnb li span.m_icon i.menu_t06 {background-image: url(/common/images/icon/m_icon_06_2.svg);}
.theme-orange #side #lnb li span.m_icon i.menu_t07 {background-image: url(/common/images/icon/m_icon_07_2.svg);}
.theme-orange #side #lnb li span.m_icon i.menu_t08 {background-image: url(/common/images/icon/m_icon_08_2.svg);}
.theme-orange #side #lnb li span.m_icon i.menu_t09 {background-image: url(/common/images/icon/m_icon_09_2.svg);}
.theme-orange #side #lnb li span.m_icon i.menu_t10 {background-image: url(/common/images/icon/m_icon_10_2.svg);}
.theme-orange #side #lnb li span.m_icon i.menu_t11 {background-image: url(/common/images/icon/m_icon_11_2.svg);}
.theme-orange #side #lnb li span.m_icon i.menu_t12 {background-image: url(/common/images/icon/m_icon_12_2.svg);}
.theme-orange #side #lnb li span.m_icon i.menu_t13 {background-image: url(/common/images/icon/m_icon_13_2.svg);}
.theme-orange #side #lnb li span.m_icon i.menu_t14 {background-image: url(/common/images/icon/m_icon_14_2.svg);}
.theme-orange #side #lnb li span.m_icon i.menu_t15 {background-image: url(/common/images/icon/m_icon_15_2.svg);}

/*theme-indigo menu icon*/
.theme-indigo #side #lnb li span.m_icon i.menu_t01 {background-image: url(/common/images/icon/m_icon_01_3.svg);}
.theme-indigo #side #lnb li span.m_icon i.menu_t02 {background-image: url(/common/images/icon/m_icon_02_3.svg);}
.theme-indigo #side #lnb li span.m_icon i.menu_t03 {background-image: url(/common/images/icon/m_icon_03_3.svg);}
.theme-indigo #side #lnb li span.m_icon i.menu_t04 {background-image: url(/common/images/icon/m_icon_04_3.svg);}
.theme-indigo #side #lnb li span.m_icon i.menu_t05 {background-image: url(/common/images/icon/m_icon_05_3.svg);}
.theme-indigo #side #lnb li span.m_icon i.menu_t06 {background-image: url(/common/images/icon/m_icon_06_3.svg);}
.theme-indigo #side #lnb li span.m_icon i.menu_t07 {background-image: url(/common/images/icon/m_icon_07_3.svg);}
.theme-indigo #side #lnb li span.m_icon i.menu_t08 {background-image: url(/common/images/icon/m_icon_08_3.svg);}
.theme-indigo #side #lnb li span.m_icon i.menu_t09 {background-image: url(/common/images/icon/m_icon_09_3.svg);}
.theme-indigo #side #lnb li span.m_icon i.menu_t10 {background-image: url(/common/images/icon/m_icon_10_3.svg);}
.theme-indigo #side #lnb li span.m_icon i.menu_t11 {background-image: url(/common/images/icon/m_icon_11_3.svg);}
.theme-indigo #side #lnb li span.m_icon i.menu_t12 {background-image: url(/common/images/icon/m_icon_12_3.svg);}
.theme-indigo #side #lnb li span.m_icon i.menu_t13 {background-image: url(/common/images/icon/m_icon_13_3.svg);}
.theme-indigo #side #lnb li span.m_icon i.menu_t14 {background-image: url(/common/images/icon/m_icon_14_3.svg);}
.theme-indigo #side #lnb li span.m_icon i.menu_t15 {background-image: url(/common/images/icon/m_icon_15_3.svg);}

/*side-bottom*/
#side .side-bot {padding-top: 10px;}
#side .side-bot > div{justify-content: center; align-items: center;}
#side .side-bot .login-wrap .lcs_switch {width: 52px;height: 24px;}
#side .side-bot .login-wrap .lcs_cursor {width: 20px;height: 20px;}
#side .side-bot .login-wrap .lcs_switch.lcs_on .lcs_cursor {left: 30px;}
#side .side-bot .login-wrap .lcs_switch.lcs_on .lcs_label_on {left: 0px;}
#side .side-bot .login-wrap .lcs_switch.lcs_off {background: var(--gray-40);}

#side .side-bot a {
	position: relative;
    display: flex;
    width: 33px;
    height: 33px;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
	background-color: rgb(255 255 255 / 10%);
	background-position: center center;
	background-repeat: no-repeat;
	border:1px solid transparent;
}
#side .side-bot .set-wrap a {
	background-image: url(/common/images/icon_set.png);
}
#side .side-bot .bell-wrap a {
	background-image: url(/common/images/icon_bell.png);
}
#side .side-bot a:hover {
	border-color: rgb(154 224 217 / 50%);
    transition: var(--transition);
}
#side .side-bot .bell-wrap a .dot-badge {
	position: absolute;
    width: 17px;
    height: 17px;
    background-color: var(--color-s1);
    border-radius: 50%;
    top: -2px;
    right: -6px;
    line-height: 17px;
    text-align: center;
    font-size: 12px;
    font-weight: 400;
    color: #fff;
}
#side .side-bot .bell-wrap {
    position: relative;
    display: inline-block;
}

#side .side-bot .bell-wrap .dropdown-menu {
    position: absolute;
    bottom: calc(100% + 7px); /* 메뉴가 아이콘 위에 나타나도록 설정 */
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    color: #000;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    width: 200px;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    visibility: hidden;
	white-space: nowrap;
    border: 1px solid #ddd; /* 경계선 추가 */
	border-bottom: none;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out, visibility 0.3s ease-out;
	filter: drop-shadow(0px 0px 1px #fff); /* 흰색 경계선 효과 */
	font-size: var(--fz-body-sm);
}

#side .side-bot .bell-wrap .tooltip-arrow {
	position: absolute;
    bottom: 100%; /* 드롭다운 메뉴 바로 위에 삼각형이 위치하도록 조정 */
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid #fff; /* 말풍선의 삼각형 색상 설정 */
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
	filter: drop-shadow(0px 0px 1px #fff); /* 흰색 경계선 효과 */
	
}
#side .side-bot .bell-wrap .show.dropdown-menu {
    max-height: 500px; /* 충분히 큰 값 */
    opacity: 1;
    visibility: visible;
}

#side .side-bot .bell-wrap .show.tooltip-arrow {
    opacity: 1;
    visibility: visible;
}
#side .side-bot .bell-wrap .dropdown-menu .title{
	padding:10px;
}
#side .side-bot .bell-wrap .dropdown-menu .title .text-num{
	color: #8e8da1;
    font-weight: 500;
    padding-left: 3px;
}
#side .side-bot .bell-wrap .dropdown-menu ul li {
	border-bottom: 1px dashed #e7e2e2;
    padding: 5px 10px;
    letter-spacing: .01em;
	display: flex;
    align-items: center;
}
#side .side-bot .bell-wrap .dropdown-menu ul li:first-child {
	border-top: 1px dashed #e7e2e2;
}
#side .side-bot .bell-wrap .dropdown-menu ul li:last-child {
    border-bottom: 0;
}
#side .side-bot .bell-wrap .dropdown-menu ul li:last-child .icon{
    color: #f1421b;
	background:#f9f1f4;
}
#side .side-bot .bell-wrap .dropdown-menu ul li .icon {
	width: 35px;
    height: 35px;
    background: #f2f1f9;
    color: #6560f0;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}
#side .side-bot .bell-wrap .dropdown-menu ul li .icon i {
	font-size: 20px;
}
#side .side-bot .bell-wrap .dropdown-menu ul li .txt {	
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 5px;
    width: calc(100% - 38px);
}
#side .side-bot .bell-wrap .dropdown-menu ul li .txt strong {
	font-size: var(--fz-title-sm);
}


/*#content*/
#content{position:relative;padding-left: 238px;padding-top: 40px;display: flex;flex-direction: column;height: calc(100% - 52px);transition: .4s !important;padding-right: 10px;}
.content-page {
	position:relative;
	display: flex;
	flex-direction: column;
	height: calc(100%);
	transition: .4s !important;
	padding-left: 0 !important;
	padding-top : 0 !important;
	height: 100% !important;
	padding-right: 0 !important;
	
}
#content.toggle-con-left{padding-left:0px !important;}

/*#header*/
#header{z-index:100;position: fixed;top: 8px;left: 8px;;width: 100%; min-width: 1366px;}
#header .logo {
    background: #141414;
    width: 220px;
    height: 65px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 20px 20px 0 0;
}
#header .logo > h1 {padding-left:10px;}
#header .logo a {align-items:center;padding-top: 15px;}
#header .logo a img {width:100px;}
#header .logo a span {font-size: 18px;font-weight: 500;margin-left: 8px;padding-top: 18px;color: #fff;}

#header .container-fluid {
	width: calc(100% - 236px);
	display: flex;
	position: fixed;
	left: 236px;
	transition: .4s !important;
	min-width: 1130px;
}
#header .container-fluid .header-wrapper {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: end;
    padding: 0 15px;
}
#side .side-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#side .side-top a.btn-togg-left {transform: rotate(0deg);padding: 0 5px;transition-delay: .1s;}
#side .side-top a.btn-togg-left i {font-size:18px; color:#fff;}
#side .side-top a.btn-togg-left i:nth-child(1) {color: rgb(255 255 255 / 50%); width: 7px;}

.side-hover.sidebar-show #side .side-top a.btn-togg-left,
.sidebar-show #side .side-top a.btn-togg-left{
	transform: rotate(180deg);
	transition-duration: .3s;
    transition-property: transform;

}
.sidebar-hide:not(.side-hover):not(.sidebar-show) #side .side-top a.btn-togg-left {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	opacity: 0;
	transition-delay: .0s;
}

#header .container-fluid .header-wrapper .nav-right li {
	display: flex;
	align-items: center;
	position: relative;
}
#header .container-fluid .header-wrapper .nav-right li .iconWrap {
	width:30px;
	height:29px;
	display:flex;
	align-items: center;
	justify-content: center;
	border-radius:8px;
	background-color:#35cfb5;
	color:#fff;
	z-index: 2;
}
#header .container-fluid .header-wrapper .nav-right li .iconWrap i {
	font-size:2.0rem;
}
#header .container-fluid .header-wrapper .nav-right li .contWrap {
	display:flex;
	align-items: center;
	justify-content: center;
	border-radius:8px;
	background-color: rgb(255 255 255 / 60%);
	height: 100%;
	margin-left: -20px;
	z-index: 1;
	padding: 0 10px 0 28px;
}
#header .container-fluid .header-wrapper .nav-right li .contWrap span {
	font-size: var(--fz-body-sm);
	letter-spacing: -0.1px;
}
#header .container-fluid .header-wrapper .nav-right li.aff .iconWrap {
	background-color:#35b8cf;
}
#header .container-fluid .header-wrapper .nav-right li.user .iconWrap {
	background-color:#688bfd;
}
#header .container-fluid .header-wrapper .nav-right li.note .iconWrap {
	position: relative;
	background-color:#de9d2a;
	border-radius: 8px;
}
#header .container-fluid .header-wrapper .nav-right li.sitemap .iconWrap {
	position: relative;
	background-color:#31a7e1;
}
#header .container-fluid .header-wrapper .nav-right li.note .iconWrap a i {
	color:#fff;
}

#header .container-fluid .header-wrapper .nav-right li.full-screen .iconWrap {
	border-radius: 50px;
	background-color: rgb(255 255 255 / 50%);
    color: var(--darkgray-color);
	cursor: pointer;
	transition: all 0.2s ease-in-out;
}
#header .container-fluid .header-wrapper .nav-right li.full-screen .iconWrap:hover {
	color: var(--color-s1);
}

/*글자 확대 축소*/
#header .container-fluid .header-wrapper .nav-right li.fs_control a {
	display: flex;
    width: 20px;
    height: 20px;
    border: 1px solid #61646e;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    line-height: 1;
    background-color: rgb(255 255 255 / 40%);
	font-size:18px;
	transition: all 0.2s ease-in-out;
}
#header .container-fluid .header-wrapper .nav-right li.fs_control a:hover {
	color:var(--primary-700);
	border-color:var(--primary-700);
}

#header .container-fluid .header-wrapper .nav-right li.sitemap .iconWrap a i {
	color:#fff;
	font-size:1.6rem;
}
#header .container-fluid .header-wrapper .nav-right li.note .iconWrap a span,
#header .container-fluid .header-wrapper .nav-right li.sitemap .iconWrap a span,
#header .container-fluid .header-wrapper .nav-right li.full-screen .iconWrap span {
	color:#666;
	position:absolute;
	font-family:sans-serif;
	bottom: -50px;
	left: 50%;
	transform: translateX(-50%); /* 가로 정중앙 정렬 */
	padding: 5px 10px;
	z-index:-1;
	font-size:14px;
	border-radius:2px;
	background:#fff;
	visibility:hidden;
	opacity:0;
	-o-transition:all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	-webkit-transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	-moz-transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	line-height: 16px;
	white-space: nowrap;
	display: flex;
	align-items: center;
	justify-content: center;
}

#header .container-fluid .header-wrapper .nav-right li.note .iconWrap a span:before,
#header .container-fluid .header-wrapper .nav-right li.sitemap .iconWrap a span:before,
#header .container-fluid .header-wrapper .nav-right li.full-screen .iconWrap span:before {
	content:'';
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 5px solid #fff;
	position:absolute;
	bottom: 26px;
	left: 50%;
	transform: translateX(-50%); /* 화살표도 정중앙 */
}
#header .container-fluid .header-wrapper .nav-right li.note .iconWrap a:hover span,
#header .container-fluid .header-wrapper .nav-right li.sitemap .iconWrap a:hover span,
#header .container-fluid .header-wrapper .nav-right li.full-screen .iconWrap:hover span {
	bottom:-32px;
	visibility:visible;
	opacity:1;
}
#header .container-fluid .header-wrapper .header_search .form-control {
	width:270px;
	border-radius: 50px;
	background: url(/common/images/icon_search.png) no-repeat 12px center;
	background-color: #fff;
	padding:3px 10px 3px 35px;
	border-color: transparent;
}
#header .container-fluid .header-wrapper .header_search .form-control::-moz-placeholder {
    color: var(--gray-40);
    -moz-transition: var(--transition);
    transition: var(--transition);
}
#header .container-fluid .header-wrapper .header_search .form-control::placeholder {
    color: var(--gray-40);
    transition: var(--transition);
}

#header .container-fluid .header-wrapper .header_search .form-control:focus::-moz-placeholder {
    color: transparent;
}

#header .container-fluid .header-wrapper .header_search .form-control:focus::placeholder {
    color: transparent;
}

.btn-togg-left.on .status_toggle path {
    stroke: #fda112;
    fill: rgb(241 175 48 / 25%)
}
.btn-togg-left .status_toggle path {
	stroke: #fda112;
    fill: rgba(0,0,0,0);
}

/*contet-inner*/
#content-inner{
	margin: 0;
	position:relative;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgb(255 255 255 / 55%);
	border-radius: 20px;
	scrollbar-gutter: stable;
	/* backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);  */
}
/* 스크롤바 스타일링 (옵션) */
#content-inner::-webkit-scrollbar {
    width: 8px; /* 스크롤바 너비 */
}

#content-inner::-webkit-scrollbar-thumb {
    background: #888; /* 스크롤바 색상 */
    border-radius: 4px; /* 둥근 모서리 */
}

#content-inner::-webkit-scrollbar-thumb:hover {
    background: #555; /* Hover 효과 */
}

.page-title {
	display: flex;
	width: 100%;
	padding: 0;
	justify-content: space-between;
	align-items: center;
}
.page-title .tit-area {
	display: flex;
    padding: 6px 5px 4px 20px;
    align-items: center;
}
.page-title h2 {
	color: #333;
	font-size: 18px;
	margin-bottom: 7px;
	font-weight: 500;
	margin: 0;
}
.page-title .button-area {
	padding-right:13px;
	padding-top: 4px;
	padding-bottom:2px;
}
.page-body .row {
	display:flex;
	margin: 0px 5px;
	padding-left: 5px;
	/* padding-right: 5px; */
}
.page-body .row.full-cont {
	flex-grow:1;
}
.page-body .section-wrapper {
	display: flex;
    flex-direction: column;
	background: #fff;
	border-radius: 10px;
	transition: all .3s ease;
	/* min-height: 50px; */
	padding: 5px 8px;
	/* margin: 0 5px; */
}
h3.sect-tit{font-size:var(--fz-title-xsm) !important;font-weight:500;display:flex;flex-direction: row;justify-content: flex-start;align-items:center;position: relative;margin: 1px 0; white-space: nowrap;}
h3.sect-tit:before {content:'';width: 12px;height: 12px;border-radius: 50%;border: 3px solid transparent;position: relative;background: conic-gradient(from 87deg,#64543a, 0deg,#ffc04e 45deg,#ffc04e 92deg,#64543a 92deg);background-origin: border-box;background-clip: border-box;box-sizing: border-box;    margin-right: 5px;}
h3.sect-tit:after{content:'';background:#fff;border-radius: 100%;width:6px;height:6px;display: block;position: absolute;left:3px;top:50%;margin-top:-3px;}
h4 {display: flex; align-items: center; font-size: var(--fz-body-sm); padding: 0; margin: 2px 0; color: var(--color-m6); font-weight: 500;}
h4::before{
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    margin-right: 5px;
    border-radius: 2px;
    background-color: var(--primary-600);
}
.page-body .card{
	background-color: #f7f9fc;
	padding: 6px 0;
	border: 1px solid #e7ecf9;
	border-radius: 10px;
}
.page-body .section-wrapper .card.search-inner {
	padding: 6px 0;
    border-bottom-width: 2px;
    border-bottom-color: var(--primary-600);
}
.page-body .section-wrapper .card.search-inner .search-area {
	position: relative;
}

.content-inner-page {
	border-radius: 0 !important;
}

/*tabs - 공통*/
.tab-list {
	display: flex;
	list-style-type: none;
	padding: 0;
}
.tab-list li {
	margin: 0;
}
.tab-link {
	position: relative;
	display: block;
	padding: 5px 20px;
	text-decoration: none;
	color: #333;
	border: 1px solid transparent;
	transition: background-color 0.3s, border-bottom 0.3s;
	border-radius: 5px 5px 0 0;
}
.tab-link.disabled {
	pointer-events: none;
	color: #808080;
	cursor: not-allowed;
	opacity: 0.6;
	background-color: var(--gray-10);
  }
.tab-content {
	background-color: #fff;
	width: 100%;
}
.tab-pane {
	display: none;
}
.tab-pane.active {
	display: block;
}

/*tabs - 상단탭*/
#content > .tab-container {
    display: flex;
	flex-direction: row;
    align-items: end;
    width: 100%;
}

#content > .tab-container .tab-scroll {
    overflow-x: auto;
    flex-grow: 1;
	width: 80%;
}

#content .tab-container .tab-scroll .nav-customs.tab-list {
	display:flex;
	padding-left: 48px;
	overflow: hidden;
	white-space: nowrap;
}
#content .tab-container .tab-scroll .nav-customs.tab-list li {
	position: relative;
}
#content .tab-container .tab-scroll .nav-customs.tab-list .tab-link {
	position: relative;
	display: block;
	float: left;
	background-color: #eff2f7;
	margin-right: 28px;
	-webkit-transition: all .5s ease;
	transition: all .5s ease;
	will-change: background-color, color, transform;
	border: 1px solid transparent;
	padding: 2px 20px 2px 7px;
	font-size: 1.4rem;
	line-height: 1.5;
	letter-spacing: -0.8px;
	color: #565656;
	
}
#content .tab-container .tab-scroll .nav-customs.tab-list .tab-link::after,
#content .tab-container .tab-scroll .nav-customs.tab-list .tab-link::before {
	display: block;
	content: " ";
	position: absolute;
	top: -1px;
	bottom: -1px;
	width: 20px;
	background-color: #eff2f7;
	-webkit-transition: all .5s ease;
	transition: all .5s ease;
	will-change: background-color, transform;
}
#content .tab-container .tab-scroll .nav-customs.tab-list .tab-link::before {
	border-radius: 0 8px 0 0;
	right: -14px;
	-webkit-transform: skew(25deg,0deg);
	transform: skew(25deg,0deg);
}
#content .tab-container .tab-scroll .nav-customs.tab-list .tab-link::after {
	border-radius: 8px 0 0 0;
	left: -14px;
	-webkit-transform: skew(-25deg,0deg);
	transform: skew(-25deg,0deg);
	box-shadow: -2px -2px 2px rgb(119 119 119 / 3%);
}
#content .tab-container .tab-scroll .nav-customs.tab-list .tab-link.active {
	z-index: 1
}
#content .tab-container .tab-scroll .nav-customs.tab-list .tab-link.active,
#content .tab-container .tab-scroll .nav-customs.tab-list .tab-link.active:after,
#content .tab-container .tab-scroll .nav-customs.tab-list .tab-link.active:before {
	background-color: var(--primary-700);
	color: #fff;
}
#content .tab-container .tab-scroll .nav-customs.tab-list .close-btn {
	position: absolute;
	right: 27px;
	top: 6px;
	z-index: 2;
	padding: 0;
	width: 17px;
	height: 17px;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%23333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 12px;
	transition: background-color 0.2s ease, background-image 0.2s ease;
	border-radius: 50px;
	background-color: rgb(195 195 195 / 40%);
}

#content .tab-container .tab-scroll .nav-customs.tab-list li .close-btn:hover {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%23000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>');
    background-color: rgb(195 195 195 / 80%);
}
#content .tab-container .tab-scroll .nav-customs.tab-list li.active .close-btn{
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>');
}

#content .tab-container .tab-controls {
    display: flex;
    margin-left: 10px;
	margin-bottom: 2px;
}
#content .tab-container .tab-controls button {
    background: #f0f0f0;
    border: 1px solid #b3b5bb;
    cursor: pointer;
    margin-left: -1px;
	padding: 3px 5px;
}
#content .tab-container .tab-controls button:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
	transition: background-color 0.2s ease, background-image 0.2s ease;
}
#content .tab-container .tab-controls .scroll-left {
	border-radius: 5px 0 0 5px;
}
#content .tab-container .tab-controls .close-all {
	border-radius: 0 5px 5px 0;
}

/*favorite*/
.bookmark-container {
    display: flex;
    align-items: center;
    justify-content: center;
}
.bookmark-btn {
    width: 20px;
    height: 20px;
    background-image: url(/common/images/bookmark_icon.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 20px;
    margin-right: 5px;
	cursor: pointer;
}

.bookmark-btn.isbookmark {
    width: 20px;
    height: 20px;
    background-image: url(/common/images/bookmark_icon_b.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 20px;
    margin-right: 5px;
	cursor: pointer;
}

#content-inner .page-body {
	display: flex;
    flex-direction: column;
	height: calc(100% - 46px);
}

/*검색 박스*/
#content-inner .page-body .section-wrapper .form-row {
    display: flex;
    flex-wrap: wrap;
	gap: 3px 0;
	padding-left: 1rem;
    padding-right: 1rem;
}

/*입력화면 일때 간격 좁게, 타이틀이 없을 때*/
#content-inner .page-body.section-wrapper.grid-layout-type1  {
	padding:10px;
}
#content-inner .page-body .section-wrapper.gap-type1 .form-row {
	gap: 3px 0;
}

#content-inner .page-body .section-wrapper .form-control{
	padding:2px 4px;
	border-radius:7px;
	font-family: 'Noto Sans KR';
	width: 100%;
	 font-size: var(--fz-body-sm);
}
#content-inner .page-body .section-wrapper .form-group {display: flex;flex-direction: row;justify-content: flex-start;align-items: center;font-size: var(--fz-body-sm);}
#content-inner .page-body .section-wrapper .form-group .form-tit {font-size: var(--fz-body-sm);font-weight: 500;padding: 0px 8px 0px 0px;min-width: 100px;display: flex;justify-content: flex-end;line-height: 1;}
#content-inner .page-body .section-wrapper .form-group .form-conts {position: relative;display: flex;justify-content: flex-start;align-items: center; gap: 0.5rem;}
#content-inner .page-body .section-wrapper .form-group .form-conts span.em {margin: 0px;}
#content-inner .page-body .section-wrapper .form-group .form-conts span.form-btn{cursor: pointer;}

#content-inner .page-body .section-wrapper .form-multi {
	flex-grow: 1;
	line-height: 1.1;
}
#content-inner .page-body .section-wrapper .form-group .form-conts.f-multi {
	gap: 0rem;
}

/*검색 열기 닫기*/
.page-body .section-wrapper .boxBtn {
	display: flex;
    justify-content: center;
}
.page-body .section-wrapper .boxBtn .detail_btn {
	position: relative;
	background-color: var(--primary-600);
	-webkit-transition: all .5s ease;
	transition: all .5s ease;
	will-change: background-color, color, transform;
	border: 1px solid transparent;
	font-size: 0;
	height: 16px;
	width: 30px;
}
.page-body .section-wrapper .boxBtn .detail_btn::after,
.page-body .section-wrapper .boxBtn .detail_btn::before {
	display: block;
	content: " ";
	position: absolute;
	top: -1px;
	bottom: -1px;
	width: 25px;
	background-color: var(--primary-600);
	-webkit-transition: all .5s ease;
	transition: all .5s ease;
	will-change: background-color, transform;
}
.page-body .section-wrapper .boxBtn .detail_btn::before {
	border-radius: 0 0px 8px 0;
	right: -18px;
	-webkit-transform: skew(138deg,0deg);
	transform: skew(138deg, 0deg);
}
.page-body .section-wrapper .boxBtn .detail_btn::after {
	border-radius: 0 0 0 8px;
	left: -18px;
	-webkit-transform: skew(-138deg,0deg);
	transform: skew(-138deg, 0deg);
}
.page-body .section-wrapper .boxBtn .detail_btn i {
	font-size: 1.2rem;
	color: #fff;
	margin-top: -2px;
}
.page-body .section-wrapper .boxBtn.closed {
	border-top:1px solid var(--primary-600);
}



/*tabs - 공통*/
.tab-container {
	display: flex;
    flex-direction: column;
    align-items: flex-start;
	position: relative;
}
.tab-container.t-type2.tab-list {
	display: flex;
	list-style-type: none;
	padding: 0;
	border-bottom: 1px solid #ddd;
}
.tab-container.t-type2 .tab-list li {
	margin: 0;
}
.tab-container.t-type2 .tab-link {
	position: relative;
    display: block;
    text-decoration: none;
	border-radius: 5px 5px 0 0;
}
.tab-container.t-type2 .tab-content {
	background-color: #fff;
	width: 100%;
}
.tab-container.t-type2 .tab-pane {
	display: none;
	padding: 0px;
}
.tab-container.t-type2 .tab-pane.active {
	display: block;
}

/*tab - layout*/
.tab-container.tab-page .tab-wrap .row {
	padding-left:0;
	padding-right:0;
}
.tab-container.tab-page .tab-wrap .row .section-wrapper {
	margin:0;
}

/*tabs - Default Tabs*/
.tab-list.nav-tabs .tab-link::after {
	content: "";
	background: #007BFF;
	height: 2px;
	position: absolute;
	width: 100%;
	left: 0;
	bottom: -2px;
	-webkit-transition: all 250ms ease 0s;
	transition: all 250ms ease 0s;
	-webkit-transform: scale(0);
	transform: scale(0);
}
.tab-list.nav-tabs .tab-link.active:after {
	-webkit-transform: scale(1);
	transform: scale(1);
}

/*tabs - nav-customs3*/
.tab-list.nav-customs3 .tab-link::after {
	content: "";
	background: #007BFF;
	height: 2px;
	position: absolute;
	width: 100%;
	left: 0;
	bottom: -2px;
	-webkit-transition: all 250ms ease 0s;
	transition: all 250ms ease 0s;
	-webkit-transform: scale(0);
	transform: scale(0);
}
.tab-list.nav-customs3 .tab-link.active:after {
	-webkit-transform: scale(1);
	transform: scale(1);
}
/*tab custom nav 3*/
.nav-customs2.tab-list {display: flex;list-style-type: none;padding: 0;border-bottom: 1px solid #ddd;width: 100%;}
.nav-customs2 li a {border: 1px solid var(--gray-30); margin-right: 1px;padding: 2px 20px;border-bottom: 0;}
.nav-customs2 li a.active {background: var(--logo-color);color: var(--gray-0);}


/*tab custom nav */
.tab-container.t-type2 .nav-customs2.tab-list { 
	display: flex;
    list-style-type: none;
    padding: 0;
    border-bottom: 1px solid #ddd;
	overflow: hidden; 
	width: 100%;
}
.tab-container.t-type2 .nav-customs2 li a {border: 1px solid var(--gray-30); margin-right: 1px;padding: 2px 20px;border-bottom: 0;}
.tab-container.t-type2 .nav-customs2 li a.active {background: var(--logo-color);color: var(--gray-0);}

.tab-container.t-type2 .form-group {
	position: absolute;
    left: 314px;
    width: 260px;
}

.tab-container.t-type2 .tab-right,
.tab-container .tab-right {
	position: absolute;
	right:0;
	display:flex;
	align-items: center;
}


/*tab childtabs*/
.tab-container.childTabs .tab-list li a {font-size: var(--fz-body-sm);}
.tab-container.childTabs .tab-list li a.active {background: var(--primary-700);font-size: var(--fz-body-sm);}

/* 작은 탭 크기 스타일 */
.small-tabs .tab-list {
    font-size: var(--fz-body-sm);
}
.small-tabs .tab-link {
    padding:3px 10px !important;
}

/*컨텐츠에 탭이 상단에 위치한 화면*/
.tab-container.tab-page .tab-content .tab-wrap {
	display:flex;
	flex-direction: column;
}

/*popup 탭 오른쪽 버튼*/
.tab-right-btn {
	position:absolute;
	right:0;
	top:2px;
}

/*테마 - 툴팁테스트*/
.theme-tooltip {
    display: none; /* 기본적으로 숨김 */
    position: absolute;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    padding: 10px;
    z-index: 1000;
    bottom: 66px;
    width: 140px;
    left: 60px;
}
.theme-tooltip.on {
    display: block; /* 'on' 클래스가 추가되면 보이도록 설정 */
}
.theme-option {
    padding: 8px;
    margin-bottom: 4px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.3s, color 0.3s;
}
.theme-option:hover {
    background-color: #f0f0f0;
}
.theme-option.teal {
    color: #0fa393;
    border: 1px solid #14b8a6;
    text-align: center;
    background-color: rgb(20 184 166 / 15%);
}
.theme-option.orange {
    color: #ffa000;
    border: 1px solid #e49207;
    text-align: center;
    background-color: rgb(228 146 7 / 15%);
}
.theme-option.indigo {
    color: #6366f1;
    border: 1px solid #6366f1;
    text-align: center;
    background-color: rgb(99 102 241 / 15%);
}
/* 사용자정보수정 */
.theme-option.userinfo {
    color: #ec4899;
    border: 1px solid #ec4899;
    text-align: center;
    background-color: rgb(236 72 153 / 15%);
}
/* 업무상태설정 */
.theme-option.branStatus {
    color: #4b5563;
    border: 1px solid #4b5563;
    text-align: center;
    background-color: rgb(75 85 99 / 15%);
}

/*box - type*/
#content-inner .page-body .box-type1 {
    background: #fff;
    padding: 7px 0;
    border: 1px solid var(--gray-20);
    border-radius: 5px;
}
#content-inner .page-body .box-type2 {
	background-color: #fafafa;
    padding: 6px 0;
    border: 1px solid #e0e2e7;
    border-radius: 10px;
}

/*popup*/

[id^="popupModal"] {
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	line-height: 1.5;
	z-index:999;
}
[id^="popupModal"] .modalWrap {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: row;
	position: relative;
	z-index: 9;
	height: 100%;
	max-height: 100%;
}
[id^="popupModal"] .modalWrap .modal {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-direction: column;
	position: relative;
	overflow: hidden;
	max-height: 100%;
	background-color: #fff;
	border-radius: 12px;
	outline-color: transparent;
	transition: outline-color 0.1s;
	z-index: 1000; /* 모달을 배경보다 위로 */
	min-height: 370px; /* 최소 높이 */
	min-width: 500px; /* 최소 너비 */
	/* height: 567px; */
}

/* modeless */
[id^="popupModal"] .modalWrap .modal.modeless {
	border: 1px solid #878787;
    box-shadow: 0px 0px 28px 0px rgba(0, 0, 0, 0.18);
  }

/* 모달 배경 */
[id^="popupModal"] .modalWrap .popmodal-back {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.65); /* 배경 어둡게 */
	z-index: 999; /* 모달 뒤에 나타나도록 */
}
[id^="popupModal"] .modalWrap .modal-header {width: calc(100% - 45px);padding: 13px 30px 7px 10px;background-color: inherit;border-top-left-radius: inherit;border-top-right-radius: inherit;cursor: move;}
[id^="popupModal"] .modalWrap .modal-header .modal-title {display: -webkit-box;overflow: hidden;text-overflow: ellipsis;-webkit-box-orient: vertical;-webkit-line-clamp: 1;font-weight: 700;margin: 0;line-height: 32px;font-size: 17px; margin: 0px;}
[id^="popupModal"] .modalWrap .modal-conts {overflow:auto;display: flex;align-items: flex-start;justify-content: flex-start;flex-direction: column;position: relative;width: calc(100% - 30px);padding: 0px 15px 15px;}
[id^="popupModal"] .modalWrap .modal-conts .conts-tit {font-weight: 700;}
[id^="popupModal"] .modalWrap .closeBtn {position: absolute;top: 15px;right: 15px;border:none;background-color:transparent;cursor: pointer;}
[id^="popupModal"] .modalWrap .closeBtn i{font-size:var(--fz-title-xlg);}
[id^="popupModal"] .modalWrap .modal-conts > * {width: 100%;}
[id^="popupModal"] .modalWrap .modal-conts .tit-type01{display:flex;flex-direction: row;justify-content: flex-end;align-items:center;margin-bottom:5px;}
[id^="popupModal"] .modalWrap .modal-conts .tit-type01:has(h3) {justify-content: space-between;}
[id^="popupModal"] .modalWrap .modal-conts .tit-type01 .sect-tit{margin-bottom:0;}
[id^="popupModal"] .modalWrap .modal-conts .conts-area {overflow-y: auto;overflow-x:hidden;width: 100%;display: flex;align-items: flex-start;justify-content: flex-start;flex-direction: column;}
[id^="popupModal"] .modalWrap .modal-conts .search-wrap{display: flex;flex-direction: row;justify-content: space-between;align-items: center;padding:12px;width:100%;border-radius:7px;background:#f7f8fc;border:1px solid #e4eaf8;box-sizing:border-box;margin-bottom:10px;flex-wrap:wrap;}

[id^="popupModal"] .modalWrap .modal-btn {display: flex;align-items: center;justify-content: flex-end;flex-direction: row;gap: 0.5rem;    width: 100%;    width: calc(100% - 45px);    padding: 15px;border-top:1px solid var(--gray-30);}
[id^="popupModal"] .modalWrap .modal-btn .btn {min-width: 87px;background:var(--gray-70);}
[id^="popupModal"] .modalWrap .modal-btn .btn.outline{background:transparent;border-color:#888CA0;color:var(--gray-70);}  [id^="popupModal"] .modalWrap .modal-btn .btn.outline:hover {color: #fff;  background-color: #888CA0 !important;  border-color: #888CA0;}
/* [id^="popupModal"] .modalWrap .modal-btn .btn:hover {background:var(--gray-90);} */

[id^="popupModal"] .modalWrap .modal-conts .row-cont {display: flex;width: 100%;box-sizing: border-box;}
[id^="popupModal"] .modalWrap .modal-conts .search-wrap {padding: 12px 0;min-height: auto !important;}
[id^="popupModal"] .modalWrap .modal-conts .search-wrap .search-area {width:100%;position: relative;display:flex;padding-right:10px;}
[id^="popupModal"] .modalWrap .modal-conts .search-wrap .search-area .form-row {display: flex;flex-wrap: wrap;gap: 10px 0;width:calc(100% - 82px) !important;margin-right:15px;justify-content:flex-start;}
[id^="popupModal"] .modalWrap .modal-conts .search-wrap .search-area .form-group {display: flex;flex-direction: row;justify-content: flex-start;align-items: center;}
[id^="popupModal"] .modalWrap .modal-conts .search-wrap .search-area .form-group .form-tit {font-size: var(--fz-body-sm);font-weight: 500;padding: 0px 10px 0 0;    min-width: 100px;display: flex;justify-content: flex-end;}

/*조회버튼이 상단에 위치할시*/
[id^="popupModal"] .modalWrap .modal-conts .search-wrap .form-row {display: flex;flex-wrap: wrap;gap: 5px 0;width:100% !important;justify-content:flex-start;padding:0 1rem;}
.textarea-wrap.h-1 textarea{height:45px;min-height:30px !important;}

.w-8{width:8% !important;}
.w-15{width:15% !important;}
.justify-between {justify-content: space-between !important;}

.SheetMain{z-index:1015 !important;}
.IBMenuMain {z-index: 999999 !important;}

/*Board*/
.board-inner{display:block; padding:0; border-top:2px solid #2b2b2c; border-bottom:1px solid #b0b0b0; font-size:1em; color: #333;}
.board-inner button{cursor:pointer;}
.board-inner .detail{overflow:hidden; background:#fff;}
.board-inner .detail > li{float:left; position:relative; width:100%; min-height:2em; padding-left:10em; border-top:1px solid #ddd; box-sizing:border-box;}
.board-inner .detail > li .titles{position:absolute; top:0; left:0; width:10em; height:100%; background-color:#F8F8F8; box-sizing: border-box;}
.board-inner .detail > li .titles span{display:table; width:100%; height:100%;}
.board-inner .detail > li .titles strong{display:table-cell; width:100%; height:100%; line-height:1.2; padding:0 2em; ; vertical-align:middle; font-weight:500; color: #222;}
.board-inner .detail > li .txts {padding:0.4em 1em;}
.board-inner .detail > li .txts{color:#444;}
.board-inner .detail > li .contents{color:#444;padding:1em 1.6em ;}
.board-inner .detail > li.no_title{padding-left:0;}
.board-inner .detail > li .contents{min-height:10em;}
.board-inner .subject {display: block;width: 100%;height: auto;line-height: 1.3;padding: 1.8rem 2.5rem;background-color: #F8F8F8;font-size: var(--fz-body-lg);font-weight:500;color: #222;box-sizing: border-box;}
.board-inner.view {border-bottom:0;}
.board-inner.view .noti {display: inline-flex;align-items: center;height: 23px;margin-right: 4px;padding: 0 5px;font-size: 14px;color: #fff;background-color: var(--color-s1); border-radius: 4px;}
.board-footer {margin-bottom:10px;}

/*board - 열고닫기*/
.page-body .section-wrapper .board-inner .card.search-inner {
	border:none;
	padding:0;
}
.page-body .section-wrapper .board-inner .card.search-inner .detail{
	border-radius: 0 0 10px 10px;
    border-bottom: 2px solid var(--primary-600);
} 

/*공지*/
.board-inner.view .noti.comp {background-color: var(--color-s1); }

/*미공지*/
.board-inner.view .noti.n_comp {background-color: var(--color-s3);}

/*board-btn*/
.board-wrap .btn.likeit_btn {background-color: #fff; color: var(--gray-90); border: 1px solid #5a5a5a;}
.board-wrap .btn.likeit_btn .u_ico{width: 17px;	height: 17px;margin-right: 3px;background: url(/common/images/board_icon/ico-post-like.svg) no-repeat;vertical-align: middle;}
.board-wrap .btn.likeit_btn.on .u_ico {background: url(/common/images/board_icon/ico-post-like-on.svg) no-repeat;}

/*첨부파일*/
.board-inner .detail > li.filebox ul{padding:0.6em 1em;display: flex;flex-wrap: wrap;flex-direction: column;}
.board-inner .detail > li.filebox ul li{margin: 2px 0;display: flex;align-items: center;}
.board-inner .detail > li.filebox ul li a:hover {text-decoration: underline;color: var(--primary-800);}

/*이전글,다음글*/
.prev_next_link{margin-top:2em;font-size:1em;border-top:1px solid #a0a0a0;border-bottom: 1px solid #a0a0a0;}
.prev_next_link ul li{display: table; table-layout: fixed; min-height:3.2em; width: 100%; box-sizing:border-box;}
.prev_next_link ul li:nth-child(2){border-top: 1px solid #ddd;}
.prev_next_link ul li strong{display: table-cell; width: 9em; padding:0 1em; text-align:center; vertical-align: middle; background:#F8F8F8; color: #222; font-weight:500;}
.prev_next_link ul li a{display: table-cell; vertical-align: middle; overflow:hidden; padding:0 0.79em; text-overflow:ellipsis; white-space:nowrap; color:#444;}
.prev_next_link ul li a:hover{text-decoration:underline;}
.prev_next_link ul li p{display: table-cell; padding:0 0.79em; vertical-align: middle;}

/* 댓글 모듈 */
.comment_wrap.reply .attach_pic_comp{margin-top:12px;}
.comment_wrap .comment_list_area .textarea_wrap {margin-right:10px;}/* 2024-04-11 수정 */
.comment_wrap .textarea_wrap .textarea{height: 60px; font-size: 14px; line-height: 18px; width: 100%;  margin: 0; padding-right: 16px; border: 0;  resize: none; word-break: break-all; outline: none; font-family: Noto Sans KR;}
.comment_wrap .textarea_wrap .textarea::placeholder{font-size:14px;line-height:20px;}
.comment_wrap .textarea_wrap .cnt_bottom{overflow-y:hidden;display:flex;align-items:flex-end;justify-content:flex-end;width:100%;margin:20px 16px 0 0;}
.comment_wrap .textarea_wrap .comment_btn{display:flex;gap:12px;}
.comment_write_area{margin-top: 40px;padding: 0 90px;}
.comment_util_box{margin-top:12px;}
.comment_util_box .btn_s{border-color:#ccc;color:#666;background-color: #fff;}
.comment_wrap .reply_area{position:relative;padding-left:72px;}
.comment_wrap .reply_area .comment_item:before{content:'';display:block;overflow:hidden;position:absolute;left:-32px;top:0;width:15px;height:15px;font-size:0;line-height:0;vertical-align:top;border-left:1px solid #ccc;border-bottom:1px solid #ccc;}
.comment_wrap .reply_area.reply_re {padding-left: 122px;}

.comment_wrap{width: 100%;margin-top: 30px;padding-top: 22px;border-top: 1px solid #dbdbdb;}
.comment_list{padding: 0 70px;}
.comment_list > ul > li{padding: 20px;border-bottom:1px solid #dbdbdb;}
.comment_list > ul > li:first-of-type{padding-top: 0;}
.comment_list_area ~ .comment_write_area{margin-top:30px;}
.comment_item{position: relative;display: flex;flex-direction: row;}
.comment_item .comment_box {padding-right:10px;}
.comment_thumb .profile_img{display:block;overflow:hidden;width: 35px;height: 35px;margin-right: 12px;border-radius:50%;background:url('/common/images/board_icon/img_profile.png') no-repeat center center / 40px auto;}
.comment_thumb .profile_img img{display: block;width: 100%;height: 100%;object-fit: cover;}
.comment_cont{min-width: 0;flex: 1;display: flex;flex-direction: column;}
.comment_info{position: relative;display: flex;flex-direction: row;align-items: center;margin-bottom: 8px;line-height: 20px;}
.comment_info .user_info{display: flex;flex-direction: row;align-items: center;min-width: 0;}
.comment_info .user_info > span{display:block;position:relative;font-size:14px;}
.comment_info .user_info > span ~ span{margin-left:8px;padding-left:8px;}
.comment_info .user_info > span ~ span:before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:12px;background-color:#dbdbdb;}
.comment_info .user_info .name{display:block;overflow:hidden;min-width:0;text-overflow:ellipsis;white-space:nowrap;}
.comment_info .user_info .date{display:block;white-space:nowrap;font-weight:400;color:#999;}
.comment_txt .txt {position:relative;max-height:100%;font-size:16px;font-weight:400;line-height:28px;}/* 2024-04-11 수정 */
.comment_txt~ .comment_img{margin-top:16px;}
.comment_img {max-width:384px;}/* 2024-05-08 수정 */
.comment_img a{display:block;width:100%;height:100%;}
.comment_img .total{display:block;height:24px;padding:0 8px;position:absolute;right:0;bottom:0;background-color:rgba(0,0,0,.6);font-family: Montserrat; font-size:12px;font-weight:500;line-height:26px;color:#fff;}/* 2024-04-11 폰트수정 */
.comment_modify{display:none;}
.more_drop{position:relative;}
.comment_info .more_drop{margin-left:auto}
.reply_area{position:relative;padding-left:88px;}

/* 더보기(수정/삭제/취소) */
.more_drop{position:relative;}
.more_drop .layer_box{display:none;position:absolute;right:0;top: 36px;z-index:2;/* border:1px solid #ccc; */border-radius: 10px;background-color: #fff;box-shadow: 0 12px 22px #202c3824, 0 4px 8px #202c3814;}
.more_drop.on .layer_box{display: block;}
.more_drop .btn_ico.more {border: 1px solid #e0e3e7; border-radius: 6px; width: 32px; height: 32px;}
.more_drop .btn_ico.more:hover {background-color: rgba(33, 57, 82, .06);}
.more_drop .layer_list{padding:4px 0;}
.more_drop .layer_list .btnm{display:inline-flex;align-items:center;min-width: 90px;width:100%;padding:8px 15px;font-size:14px;font-weight:400;color:#737373;}
.more_drop .layer_list li:hover .btnm {text-decoration: underline;}
.more_drop .btnm.modify:before{content:'';display:inline-block;width:16px;height:16px;margin:0 8px 0 0;background:url("/common/images/board_icon/ico_modify_16.svg") no-repeat center center;}
.more_drop .btnm.del:before{content:'';display:inline-block;width:16px;height:16px;margin:0 8px 0 0;;background:url("/common/images/board_icon/ico_del_16.svg") no-repeat center center;}
.more_drop .btnm.cancel:before{content:'';display:inline-block;width:16px;height:16px;margin:0 8px 0 0;;background:url("/common/images/board_icon/ico_close_16_gray.svg") no-repeat center center;}
.textarea_wrap{display: flex;flex-wrap:wrap;padding: 18px 8px 18px 18px;border: 1px solid #DBDBDB;}

/*split*/
.split-horizontal {
	display: flex;
		flex-direction: row;
		height: 100vh;
}
.split-vertical  {
		display: flex;
		flex-direction: column;
}
.gutter {
	background-color: #eee;
	background-repeat: no-repeat;
	background-position: 50%;
}
.gutter.gutter-horizontal {
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
	cursor: col-resize;
}
.gutter.gutter-vertical {
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII=');
	cursor: row-resize;
}

@media all and (max-width:1500px){
    #content-inner .page-body .section-wrapper .form-row {
        padding-left: 0.5rem;
        padding-right: 1rem;
    }
	#content-inner .page-body .section-wrapper .cont-inner .c_item .card .form-tit {
		min-width:80px !important;
	}
	.form-group .nice-select {
        min-width: 80px;
    }
	#content-inner .page-body .section-wrapper .form-group .form-tit {
		min-width: 85px;
	}
}

/* Start of cyw0322 */
.content-page {
	position:relative;
	display: flex;
	flex-direction: column;
	height: calc(100%);
	transition: .4s !important;
	padding-left: 0 !important;
	padding-top : 0 !important;
	height: 100% !important;
	padding-right: 0 !important
}
.content-inner-page {
	border-radius: 0 !important;
	display: flex;
	flex-direction: column;
}
#content-inner .page-body-inner.page-body{
	/* display: flex;
    flex-direction: column;
	padding: 10px; */
}
#side .aside-menu .bookmark-list li.active{
	background-color: var(--btn-color);
    border-radius: 18px;
}
/* End of cyw0322 */

/*dialog -type04*/
.form-type01 {width: 100%;display: flex;flex-direction: row;justify-content: space-between;align-items: center;flex-wrap: wrap;gap: 5px 0;}

/*address popup*/
.conts-area.addr {background: #f4f4ff;border-radius: 15px;border: 1px solid #cccce2;padding: 15px 20px;box-sizing: border-box;}
.conts-area.addr .addr-top {width: 100%;margin-bottom: 15px;}
.conts-area.addr .addr-top p {font-size: var(--fz-title-md);}
.conts-area.addr .addr-top>button {background: transparent;border: transparent;color: var(--gray-90);padding: 0;float: right;}
.conts-area.addr .addr-top>button i {font-size: var(--fz-title-lg);}
.conts-area.addr .addr-top .inputBox-search-wrap {position: relative;margin: 5px 0;width: 100%;display: flex;flex-direction: row;justify-content: flex-start;align-items: center;gap: 10px;}
.conts-area.addr .addr-top .inputBox-search-wrap .form-conts {width: 90%;}
.conts-area.addr .addr-top .inputBox-search-wrap button {width: 10%;}

.conts-area.addr .addr-top .inputBox-wrap {display: flex;flex-direction: column;gap: 5px; margin: 5px 0;}

.conts-area.addr .addr-type01 {width:100%;min-height:80px;}
.conts-area.addr .addr-type01 p {margin-left: 10px;}
.conts-area.addr .addr-type01 dl {margin-left: 10px;}
.conts-area.addr .addr-type01 dl dd {padding-left: 10px;color: var(--blue-color);}
.conts-area.addr .addr-type01 .addr-grid{width:100%;margin-top:5px;}