@charset "utf-8";
/* ******************************************************* 
* filename:layout.css 
* description:전체 레이아웃 CSS 
* update:2025-06-13
******************************************************** */

/* layout */
body,table,th,td,button,select,input,br {
	font-family:'Pretendard','unicons',"돋움",Dotum,Arial,sans-serif,"맑은고딕",malgun Gothc;
	font-size:14px;
	color:var(--color-gray09);
}
html {
}
body {
	background-color:var(--color-gray00);
	-ms-word-break:keep-all;
	word-break:keep-all;
	min-height:100vh;
	width:100%;
}
#wrap {
	width:100%;
	min-width:1380px;
	position:relative;
	overflow:visible;
	/* min-height: 680px;*/
}
/* ****************** 공통클래스 ********************** */
/* 공통 클래스 */
.area {
	width:100%;
	margin:0px auto;
	padding:0 12px 0 56px;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
}
.slider-area {
	width: calc(100% - 250px);
}
/* ****************** HEADER ********************** */
#header {
	height: 50px;
	overflow: hidden;
	width: 100%;
}
#headerInnerWrap {
	position:relative;
	z-index:99;
	background-color:var(--color-gray00);
	box-sizing:border-box;
	width: 100%;
	height: 100%;
	background: #fff;
}
#headerInner {
	position:fixed;
	width: calc(100% - 240px);
	border-bottom: 1px solid var(--color-gray03);
	background: #fff;
	padding: 0 24px 0 56px;
}
#container.close #headerInner {width: calc(100% - 80px);}

/* -------- Header::Location BOX -------- */
.header-location-box {
	float: left;
    height: 38px;
    margin: 6px 0;
    padding: 2px 12px 2px 4px;
    box-sizing: border-box;
    background-color: var(--color-gray01);
    border-radius: 40px;
    border: 1px solid var(--color-gray02);
}
.header-location-box ul {
	display:flex;
	align-items:center;
}
.header-location-box ul:before {
	content:'\ebc8';
	display:inline-block;
	background-color:var(--color-blue06);
	width:28px;
	height:28px;
	border-radius:50px;
	color:var(--color-gray00);
	margin-right:12px;
	line-height:28px;
	text-align:center;
	font-size: 18px;
}
.header-location-box ul li {
	line-height:32px;
	font-weight:400;
	color:var(--color-gray09);
	width:340px;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.header-location-box ul li p {
	font-size:14px;
	font-weight:400;
	color:var(--color-gray08);
}
.header-location-box ul li p.long {
	animation:marquee 15s linear infinite;
}
.header-location-box:hover {
	cursor:pointer;
}
.header-location-box:hover ul li p {
	animation:none;
	font-weight:500;
}
@keyframes marquee {
	from {
		transform:translateX(0);
	}
	to {
		transform:translateX(-100%);
	}
}
@media (hover:hover) and (min-width:700px) {
	.animated-title .content {
		-webkit-transform:translateY(calc(100% - 8rem));
		transform:translateY(calc(100% - 8rem));
	}
}
@media all and ( max-width:1199px ) {
	.header-location-box ul li {
		width: 200px;
	}
}
/*브레드 크럼*/
.bread-crumb {
	width:100%;
	height:28px;
	margin-bottom:6px;
}
.bread-crumb ul {
	display:flex;
}
.bread-crumb ul li {
	font-size:14px;
	line-height:28px;
	padding:0 4px;
	color:var(--color-gray06);
	font-weight:600
}
.bread-crumb ul li:after {
	content:'\e81f';
	margin-left:4px;
	color:var(--color-gray04)
}
.bread-crumb ul li:first-child {
	padding-left:0;
}
.bread-crumb ul li:last-child {
	color:var(--color-gray09);
}
.bread-crumb ul li:last-child:after {
	content: '';
}
/* -------- Header::UTIL BOX -------- */
.header-util-box {
	float:right;
}
.header-util-box .header-util-list-con {
	position:relative;
	display:flex;
	height:50px;
	align-items:center;
}
.header-util-box .header-util-list-con>li {
	position:relative;
	padding: 0 12px;
}
.header-util-box .header-util-list-con>li:first-child::before {
	display:none;
}
.header-util-box .header-util-list-con>li::before {
	content:'';
	width:1px;
	height:16px;
	display:inline-block;
	background:var(--color-gray03);
	margin-right:8px;
	position:absolute;
	left:0;
	top:50%;
	transform:translateY(-50%);
	display: none;
}
.header-util-box .header-util-list-con span {
	font-size:14px
}
.header-util-box .header-util-list-con .user-guide-btn {
	background:#3269C8;
	background:linear-gradient(199deg,rgba(50,105,200,1) 35%,rgb(19 11 131) 100%);
}
.header-util-box .header-util-list-con .user-guide-btn {
	padding:6px 8px 6px 4px;
	border-radius:4px;
	color:#fff;
	font-weight:700;
	font-size:14px;
}
.header-util-box .header-util-list-con .user-guide-btn>i {
	font-size: 18px;
}
/*User 이용일 계산::툴팁*/
.header-util-box .header-util-list-con .user-days {
	display:inline-block;
	color:var(--color-gray06);
	cursor:pointer;
	height:28px;
	line-height:28px;
	/* background:var(--color-gray02);
	padding:0 8px;
	border-radius:4px; */
}
.header-util-box .header-util-list-con .user-days .icon {
	background: var(--color-gray02);
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 50px;
    text-align: center;
    line-height: 24px;
}
.header-util-box .header-util-list-con .user-days:hover .icon {background: var(--color-blue05);color: #fff;}
.header-util-box .header-util-list-con .user-days em {
	font-weight:700;
	color:var(--color-gray09);
}
.header-util-box .header-util-list-con .user-days:hover {
	color:var(--color-gray08);
	transition:0.3s;
}
.header-util-box .header-util-list-con .user-days-tooltip {
	background-color:var(--color-gray00);
	border:1px solid var(--color-gray03);
	color:var(--color-gray08);
	position:absolute;
	width: 176px;
    right: 0;
	top:39px;
	box-shadow:0px 8px 12px 0px rgba(100,80,150,0.2);
	border-radius:0 0 4px 4px;
	display:none;
	border-top:0;
}
.header-util-box .header-util-list-con .user-days:hover+.user-days-tooltip {
	display:block;
}
.header-util-box .header-util-list-con .user-days-tooltip p {
	line-height:1.2;
	font-size:14px;
	padding:6px 16px;
	display:flex;
	align-items:center;
	justify-content:space-between;
}
.header-util-box .header-util-list-con .user-days-tooltip p:first-child {
	border-bottom:1px solid var(--color-gray03);
	font-weight:700;
}
.header-util-box .header-util-list-con .user-days-tooltip p:nth-child(2) {
	padding-top:8px;
}
.header-util-box .header-util-list-con .user-days-tooltip p:last-child {
	padding-bottom:8px;
}
.header-util-box .header-util-list-con .user-days-tooltip span {
	display:inline-block;
}
.header-util-box .header-util-list-con .user-days-tooltip p em {
	font-weight:600;
	color:var(--color-gray09);
}
.header-util-box .header-util-list-con .user-name {
	color:var(--color-gray09);
	font-weight:700;
	margin:0 4px;
}
.header-util-box .header-util-list-con .logout {
	border:1px solid var(--color-gray03);
	padding:4px;
	border-radius:4px;
	font-size: 16px;
}
/* -------- Header::SNB(PC) -------- */
#snb {
	position:absolute;
	top:42px;
	left:0px;
	width:100%;
	z-index:99;
	border-top:1px solid #dadbe0;
	border-bottom:1px solid #dadbe0;
}
#snb>ul {
	margin-left:-20px;
	position:relative;
}
#snb>ul>li {
	float:left;
}
#snb>ul>li+li {
	margin-left:28px;
}
#snb>ul>li>a {
	position:relative;
	z-index:100;
	display:block;
	height:50px;
	line-height:50px;
	text-align:center;
	color:rgba(115,120,149,0.65);
	font-weight:600;
	font-size:17px;
	letter-spacing:-0.65px;
	-webkit-transition:color 0.3s;
	transition:color 0.3s;
}
#snb>ul>li>a span {
	position:relative;
	display:inline-block;
	padding:0 20px;
}
#snb>ul>li>a span:after {
	position:absolute;
	bottom:-1px;
	left:50%;
	display:block;
	content:"";
	width:0;
	height:3px;
	background-color:#001648;
	-webkit-transition:all 0.3s;
	transition:all 0.3s;
}
#snb>ul>li>a:hover,#snb>ul>li.on>a {
	color:#001648;
	border-color:#ddd;
}
#snb>ul>li>a:hover span:after,#snb>ul>li.on>a span:after {
	width:100%;
	margin-left: -50%;
}
/* **********************	* 사이드바 영역********************** */
#leftSideBar {
	position:fixed;
	z-index:500;
	top:0;
	left:0;
	bottom:0;
	background-color:var(--color-gray00);
	-webkit-transition:all 0.3s;
	transition:all 0.3s;
}
#leftBarOpenBtn {
	display:block;
	position:absolute;
	top:-1px;
	right:-33px;
	width:35px;
	height:52px;
	background-color:#fff;
	-webkit-border-radius:0 10px 10px 0;
	border-radius:0 10px 10px 0;
	z-index:1000;
	border:1px solid var(--color-gray03);
	border-left:none;
}
#leftBarOpenBtn:hover {
	-webkit-box-shadow:4px 2px 6px 1px rgba(0,0,0,0.13);
	box-shadow:4px 2px 6px 1px rgba(0,0,0,0.13);
}
#leftBarOpenBtn:before {
	display:block;
	content:'\e81f';
	font-size:18px;
	transform:rotate(180deg);
	color:#001648;
}
.left-sidebar-inner {
	width:100%;
	height:100%;
	width:240px;
	border-right:1px solid var(--color-gray03);
	box-sizing:border-box;
}
.left-sidebar-logo {
	height:72px;
	box-sizing:border-box;
	padding:16px;
	margin-bottom:8px;
}
.left-sidebar-logo .logo {
	position:relative;
	z-index:999;
}
.left-sidebar-logo .logo a {
	display:block;
	width:190px;
	height:36px;
	background: url("../images/common/logo.svg") 0 0 no-repeat;
}

.side_scroll {
    height: calc(100vh - 112px);
    padding-bottom: 20px;
    overflow-y: scroll;
	overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/*메뉴*/
.side-nav-con {
	padding:0 20px;
}
.nav-category {
	margin-top:8px;
	display:flex;
	align-items:center;
	grid-gap:12px;
}
.nav-category h6 {
	display:inline-block;
	color:var(--color-gray05);
}
.nav-category::after {
	content:'';
	display:inline-block;
	width:100%;
	height:1px;
	background-color:var(--color-gray03);
}
.nav-item {
	width:100%;
	box-sizing:border-box;
	padding:4px 0px;
	position:relative;
}
.side-nav-con .nav-item>a:not(.close-ver-btn) {
	position:relative;
	display:block;
	padding:0px;
	width:100%;
	margin:auto;
	box-sizing:border-box;
	-webkit-transition:all 0.3s;
	transition:all 0.3s;
	color:var(--color-gray08);
	border-radius:5px;
}
.side-nav-con .nav-item>.close-ver-btn {
	position:absolute;
	top:0;
	left:0;
	display:block;
	height:40px;
	width:100%;
	box-sizing:border-box;
	-webkit-transition:all 0s;
	transition:all 0s;
	visibility:hidden;
	opacity:0;
	transition-delay:0s;
}
.side-nav-con .nav-item>a:before {
	position:absolute;
	top:50%;
	margin-top:-10px;
	right:8px;
	font-size:12px;
	line-height:20px;
	content:'\ead5';
	color:var(--color-gray06);
	;
}
.side-nav-con .nav-item>a>span {
	display:inline-block;
	font-size:16px;
	margin:0;
	color:var(--color-gray09);
	padding:12px 0;
	box-sizing:border-box;
}
.side-nav-con .nav-item>a>img {
	width:20px;
	margin:0 16px 10px 0;
}
.side-nav-con .nav-item>a>span,.side-nav-con .nav-item>a:before {
	opacity:1;
	-webkit-transition:opacity 0.3s,visibility 0.3s;
	transition:opacity 0.3s,visibility 0.3s;
	font-weight: 600;
}
/*메뉴 마우스오버 시*/
.side-nav-con:not(.nav-bottom) .nav-item:not(.active)>a:not(.close-ver-btn):hover {
	color:var(--color-blue05);
}
.side-nav-con:not(.nav-bottom) .nav-item:not(.active)>a:not(.close-ver-btn):hover:is(i,span) {
	color:var(--color-blue05);
}
.side-nav-con .nav-item:not(.active)>a:not(.close-ver-btn):hover:before {
	color:var(--color-blue05);
}
.side-nav-con.nav-bottom {
	width:calc(100% - 40px);
	margin-top: auto;
}
.side-nav-con.nav-bottom .nav-item>a:before {
	display:none;
}
.side-nav-con.nav-bottom .nav-item {
	border:1px solid var(--color-gray09);
	border-radius:6px;
	box-sizing:border-box;
	padding:0 8px;
	margin-top:4px;
	background-color: #fff;
}
.side-nav-con.nav-bottom .nav-item>a {
	display:flex;
	align-items:center;
	gap:4px;
}
.side-nav-con.nav-bottom .nav-item a span {
	color:var(--color-gray09);
	font-size:14px;
}
.side-nav-con.nav-bottom .nav-item:hover {
	box-shadow:1px 3px 10px 1px rgba(0,0,0,0.18);
	transition:0.3s;
}
.side-nav-con.nav-bottom .nav-item a i {
	color:var(--color-gray09);
	font-size:18px;
	position:relative;
	top:1px;
	margin-right:4px;
}
.side-nav-con.nav-bottom .nav-item:not(.active)>a:not(.close-ver-btn):hover {
	background:none;
}
.side-nav-con.nav-bottom .nav-item.point-bnt {
	background:#3269c8;
	border:0;
	letter-spacing: -0.6px;
}
.side-nav-con.nav-bottom .nav-item.point-bnt a i {
	color:#fff;
}
.side-nav-con.nav-bottom .nav-item.point-bnt a span {
	color:#fff;
	line-height:18px;
}
.side-nav-con.nav-bottom .nav-item.line-blue {
	border:1px solid #3269c8;
}
.side-nav-con.nav-bottom .nav-item.line-blue a i {
	color:var(--color-blue05);
}
.side-nav-con.nav-bottom .nav-item.line-blue a span {
	color:var(--color-blue05);
	line-height:18px;
}
.nav-2dep-list {
	display:none;
}
.nav-2dep-list li {
	display:block;
	height:40px;
	line-height:40px;
	box-sizing:border-box;
	padding:0 12px 0 24px;
	white-space:nowrap;
}
.nav-2dep-list li a {
	color:var(--color-gray08);
}
.nav-2dep-list li a span {
	font-size:15px;
	font-weight:500;
	letter-spacing: -0.5px;
}
/* 메뉴- 선택시::gnb active */
.side-nav-con:not(.nav-bottom) .nav-item:hover>a {
	color:var(--color-blue03);
}
.side-nav-con .nav-item.active {
	width:100%;
}
.side-nav-con .nav-item.active>a {
	color:var(--color-gray08);
	font-weight:600;
}
.side-nav-con .nav-item.active>a>:is(span,i) {
	color:var(--color-gray08);
	font-weight:600;
}
.side-nav-con .nav-item.active>a:before {
	content:'\ea8d';
	color:var(--color-blue03);
	font-size:12px;
	line-height:20px;
	font-weight:200;
}
.nav-2dep-list li a:hover,.nav-2dep-list li.on a {
	color:var(--color-blue05);
}
.nav-2dep-list li a:hover,.nav-2dep-list li.on span {
	font-weight: 700;
}
/* 사이드바 닫혔을 경우 */
#container.close {
		width:100%
}
#container.close #leftBarOpenBtn:before {
	content:'\e81f';
	transform:rotate(0deg);
}
#leftSideBar.close {
	width:80px;
	position:fixed;
}
#leftSideBar.close+#rightContent {
	padding-left:80px;
}
#leftSideBar.close .left-sidebar-inner {
	width:80px;
}
#leftSideBar.close .left-sidebar-logo {
	padding:0 17px;
}
#leftSideBar.close .left-sidebar-logo .logo {
	height:72px;
	box-sizing:border-box;
	padding:16px 0px;
	margin-bottom:8px;
}
#leftSideBar.close .left-sidebar-logo .logo a {
	width:36px;
	height:36px;
	background:url("../images/common/logo.svg") 0 0 no-repeat;
	background-size:cover;
}
#leftSideBar.close .side-nav-con .nav-item {
	padding:4px 5px;
}

#leftSideBar.close .side-nav-con .nav-item.active {
	border-radius:5px;
}
#leftSideBar.close .nav-category {
	justify-content:center;
}
#leftSideBar.close .side-nav-con.nav-bottom .nav-item a i {
	margin-right:0
}
#leftSideBar.close .nav-category::after {
	display:none;
}
#leftSideBar.close .side-nav-con .nav-item>a {
	position:absolute;
	top:0;
	left:0;
	visibility:hidden;
	opacity:0;
	border-radius:5px;
	line-height:40px;
	padding: 0;
	text-align: center;
}
#leftSideBar.close .side-nav-con .nav-item>a>img {margin: 0;}
#leftSideBar.close .side-nav-con .nav-item>.close-ver-btn {
	position:relative;
	visibility:visible;
	opacity:1;
	transition-delay:0s;
	justify-content:center;
}
#leftSideBar.close .side-nav-con.nav-bottom .nav-item {
	text-align:center;
	padding:0;
}
#leftSideBar.close .side-nav-con .nav-item>a:before {
	display:none;
}
#leftSideBar.close .side-nav-con .nav-item>a>span,#leftSideBar.close .side-nav-con .nav-item>a:before {
	opacity:0;
	transition-delay:0.1s;
}
#leftSideBar.close .nav-2dep-list {
	display:none !important;
}
#leftSideBar.close .nav-2dep-list li a {
	visibility:hidden;
	opacity:0;
	transition-delay:0.3s;
}
#leftSideBar.close .nav-catecory {
	justify-content:center;
}
#leftSideBar.close .nav-catecory:after {
	display: none;
}
#leftSideBar.close .side-nav-con.nav-bottom {padding:0 10px;width: calc(100% - 20px);}
#leftSideBar.close .side_scroll {display: block; height: calc(100vh - 20px);}


/*오른쪽 컨텐츠 영역*/
#rightContent {
	height:100%;
	width:100%;
	padding-left: 240px;
}
/* **********************	* 내용영역********************** */
#container {
	position:relative;
	display:flex;
	height:100%;
	-webkit-transition:all 0.3s;
	transition: all 0.3s;
}
/* SUB LAYOUT::컨텐츠 레이아웃 */
#middleArea {
	position:relative;
	background-color:var(--color-gray01);
	height: calc(100% - 50px);
}

/* SUB LAYOUT::서브 타이틀 */
#subTitleContent {
	height:40px;
	display:flex;
	justify-content:space-between;
	align-items:center;
	margin-bottom:16px;
}
.sub-title {
	display:flex;
	align-items:center;
	gap:16px
}
.sub-content-tit {
	font-weight:800;
	letter-spacing:-0.65px;
	color:var(--color-gray09);
	white-space:nowrap;
}
.sub-content-tit2 {
	font-size:20px;
	font-weight:700;
	letter-spacing:-0.65px;
	color:var(--color-gray08);
	white-space:nowrap;
	margin-bottom:16px;
	margin-left:12px;
}
.sub-content-tit2:before {
	content:'\e9af';
	font-weight:500;
	margin-right:4px;
}
.sub-content-txt {
	position:relative;
	float:left;
	width:auto;
	font-size:16px;
	line-height:20px;
	letter-spacing:-0.25px;
	color:var(--color-gray07);
	font-weight:300;
	max-width: 880px;
}
/*상태 메세지 박스:인라인*/
.msgBoxContent {
	margin:0px 0px 16px 0;
}
.msg-box {
	display:flex;
	border:1px solid var(--color-gray03);
	box-sizing:border-box;
	padding:8px 12px 8px 16px;
	align-items:center;
	border-radius:4px;
		column-gap:12px;
	min-height:50px;
}
.msg-box.column {
	flex-direction:column;
	row-gap:4px;
	column-gap:4px;
}
.msg-box.align-start {
	align-items:start;
}
.m-left {
	margin-left:auto;
}
.msg-box.step-box {
	display:grid;
	grid-template-columns:1fr 500px 5fr;
	border:1px solid var(--color-blue03);
	background-color:#d6e9fc70;
}
.msg-box.step-box.tp2 {
	display:flex;
	justify-content:space-between;
}
.msg-box.step-box.row {
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:16px;
	border:1px solid var(--color-blue03);
	background-color:#d6e9fc70;
	gap:4px;
}
.msg-box.step-box.col {
	display:flex;
	align-items:center;
	flex-direction:column;
	padding:16px;
	gap:4px;
	border:1px solid var(--color-blue03);
	background-color:#d6e9fc70;
}
.msg-box .step {
	display:flex;
	grid-gap:40px;
	justify-content:center;
}
.msg-box .step li {
	font-size:16px;
	font-weight:800;
	border:2px solid var(--color-blue05);
	color:var(--color-blue05);
	padding:4px 18px 4px 4px;
	border-radius:100px;
	opacity:0.4;
	white-space:nowrap;
	background:#fff;
}
.msg-box .step li:after {
	content:'\e81b';
	position:absolute;
	font-size:22px;
	color:var(--color-blue03);
	right:-33px;
	top:6px;
	font-weight:100;
}
.msg-box .step li:before {
	content:'\e974';
	font-size:18px;
	width:24px;
	margin-right:12px;
	height:24px;
	border-radius:50px;
	display:inline-block;
	background-color:var(--color-blue05);
	color:var(--color-gray00);
	text-align:center;
	font-weight:200;
	line-height: 24px;
}
/*미접수*/
.msg-box .step li.no-data {
	width:fit-content;
	opacity:1;
}
.msg-box .step li.no-data:before {
	content: '!'
}
/*완료*/
.msg-box .step li.fin {
	opacity:1;
}
.msg-box .step li.fin:before {
		content: '\e8b2';
}
/*진행중*/
.msg-box .step li.active {
	opacity:1;
	-webkit-animation:blink 2s infinite both;
	 animation:blink 2s infinite both;
	 border:2px solid var(--color-system-danger02);
	color:var(--color-system-danger02);
}
.msg-box .step li.active:before {
	background:var(--color-system-danger02);
}
.msg-box .step li.fin:before {
		content: '\e8b2';
}
/*반려*/
.msg-box .step li.return {
	opacity:1;
	border:2px solid var(--color-system-danger02);
	color:var(--color-system-danger02);
	background-color:#ff375b12;
	-webkit-animation:blink 2s infinite both;
	 animation:blink 2s infinite both;
}
.msg-box .step li.return:before {
		content:'!';
	background-color:var(--color-system-danger02);
}
.msg-box .step li:last-child:after {
	content:'';
}
.msg-text {
	line-height:1.3;
	font-size:14px;
	letter-spacing:0.5px;
	padding:0 10px 0 20px;
}
.msg-text:is(li,span,p) {
	font-weight:500;
}
.msg-text li {
	margin-bottom:4px;
}
.msg-text li:before {
	content:'-';
	margin-right:6px;
	margin-left:-12px;
}
.msg-text-arrow {
	line-height:1.3;
	font-size:14px;
	letter-spacing:0.5px;
	padding:0 10px 0 20px;
	letter-spacing:-0.6px;
	font-weight:500;
}
.msg-text-arrow li {
	margin-bottom:4px;
	list-style-type: disclosure-closed;
}
/*메세지 박스 - 상태 박스*/
.msg-box.state-box {
	grid-gap:12px;
		align-items:flex-start;
		flex-direction:column;
		background-color:var(--color-gray00);
		padding:12px 16px;
}
.msg-box.state-box .state-text {
	display:flex;
	align-items:flex-start;
	grid-gap:16px;
	line-height:1.3
}
.msg-box.state-box .state {
	display:flex;
	justify-content:space-between;
	width: 100%;
}
/*메세지박스*/
.msg-box.row {
	flex-direction:column;
}
.msg-box.bg-gray {
	background-color:#f0f0f085;
}
.msg-box .tit {
	font-size:16px;
	font-weight:bold;
	margin-right:6px;
}
.msg-box .tit:before {
	content:'';
	display:inline-block;
	background-color:var(--color-gray04);
	width:4px;
	height:12px;
	border-radius:4px;
	margin-right: 6px;
}
/*250509 추가*/
.msg-box .tag-tit {
	font-size:14px;
	background-color:#555;
	color:#fff;
	padding:6px 12px;
	border-radius:2px;
	white-space: nowrap;
}
/*인포박스*/
.info-box {
	border:1px solid var(--color-gray04);
	padding:0;
	box-sizing:border-box;
	border-radius:2px;
}
.info-box-tit {
	font-size:15px;
	font-weight:700;
	padding:4px 8px;
	background-color:var(--color-gray01);
	color:var(--color-gray09);
	width:100%;
	box-sizing:border-box;
	border-bottom:1px solid var(--color-gray03);
}
.info-box-tit:before {
	content:'\ea39';
		margin-right:4px;
}
.info-box-cont {
	padding:8px;
	box-sizing:border-box;
	font-weight:400;
	color:var(--color-gray06);
}
@media all and ( max-width:1379px ) {
	#wrap {
		min-width:1024px;
	}
	.msg-box.step-box.tp2 {
			flex-direction:column;
		row-gap:8px;
		padding:20px;
	}
}
@media all and ( max-width:1024px ) {
	#wrap {
		min-width:1024px;
	}
	#subTitleContent {
		height:auto;
			margin-bottom:0px;
	}
	.sub-title {
			width:100%;
			align-items:flex-start;
			gap:8px;
			flex-direction:column;
			margin-bottom: 8px;
	}
}
/*게시판 상단 이용안내 박스*/
.top-notice-box {
	margin-top:16px;
}
.top-notice-box-tit {
	display:flex;
	margin-bottom:4px;
	align-items:center;
	justify-content:space-between;
}
.top-notice-box-tit h6 {
	font-size:16px;
	font-weight:bold;
}
.top-notice-box-tit h6::before {
	content:'';
	display:inline-block;
	position:relative;
	top:2px;
	width:5px;
	border-radius:5px;
	height:16px;
	background-color:var(--color-gray04);
	margin-right:8px;
}
.top-notice-box-cont {
	border:1px solid var(--color-gray03);
	padding:12px;
	box-sizing:border-box;
	line-height: 1.5;
}
/*윈도우 팝업:(회의록 제출하기 등) 기본 셋팅 (가로 100%) */
.windowPopup {
	height:100vh;
}
.windowPopup #container {
		width:80%;
	height:80%;
	margin:auto;
	box-sizing:border-box;
	padding:40px;
}
@media all and ( max-width:860px ) {
	.windowPopup #container {
			width:100%;
	}
}
.noDataMsg {
	font-family:'Pretendard','unicons',"돋움",Dotum,Arial,sans-serif,"맑은고딕",malgun Gothc;
}
.windowPopup #max-container {
		width:90%;
	min-width:1240px;
	height:100%;
	margin:auto;
	box-sizing: border-box;
}
/* 로딩스피너 */
#loading-screen {
	position:fixed;
	top:0;
	left:0;
	width:100vw;
	height:100vh;
	background-color:rgba(255,255,255,0.85);
	z-index:9999;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items: center;
}
/* 로딩 이미지 스타일 */
.spinner-img {
	width:120px;
	height:120px;
	animation:spin 1.5s linear infinite,fadePulse 2s ease-in-out infinite;
	transform-origin: center;
}
/* 회전 애니메이션 */
@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}
/* 투명도 변화 애니메이션 */
@keyframes fadePulse {
	0% {
		opacity:0.2;
	}
	50% {
		opacity:1;
	}
	100% {
		opacity: 0.2;
	}
}
/* 텍스트 */
.loading-text {
	margin-top:16px;
	font-size:16px;
	color:var(--color-gray05);
	font-family:sans-serif;
	font-weight:700;
	text-align:center;
	line-height: 1.5;
}
/* 로딩 오버레이 */
.card-loader {
	position:absolute;
	inset:0;
	background-color:rgba(255,255,255,0.8);
	z-index:101;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-direction: column;
}
/* 숨기기용 */
.card-loader.hidden {
	display:none;
}
.card-loader .spinner-img {
	width:60px;
	height: 60px;
}
/* 파일 다운로드 */
.file-down-box {
	display:flex;
	align-items:center;
	gap:16px;
}
.file-down-box .file-btn {
	border:1px solid #eaeaea;
	padding:12px 16px 16px 16px;
	border-radius:8px;
}
.file-down-box .file-btn p {
	font-size:14px;
	font-weight:600;
	margin-top:4px;
}
.file-down-box .file-btn img {
	width:50px;
}
.file-down-box>.file-btn:hover {
	background:var(--color-gray01);
	border:1px solid var(--color-gray03);
}
.num_s {
	display:inline-flex;
	justify-content:center;
	align-items:center;
	background:var(--color-gray08);
	border-radius:50%;
	font-weight:600;
	color:#fff;
	width:20px;
	height:20px;
	margin-left:6px;
	font-size:12px;
}
.circle-box {
}
.circle-box li {
	padding-left:14px;
	line-height:18px;
	margin-bottom:6px;
	text-align:left;
	position:relative;
}
.circle-box li::before {
	content:'';
	display:block;
	width:4px;
	height:4px;
	background:#151515;
	position:absolute;
	left:5px;
	top:6px;
	border-radius:2px;
}
.num-box {
}
.num-box li {
	list-style-type:decimal;
	margin-left:20px;
	line-height:18px;
	margin-bottom:4px;
}
.num-box li:last-child {
	margin-bottom: 0;
}
/* 2025.10.28 4대보험>사회보험 신고요청 추가 css */
/* 재연동 */
.history-btn {
	padding:4px 8px;
	border-radius:50px;
	font-size:12px;
	margin:0;
	display:inline-flex;
	align-items:center;
	gap:4px;
}
.history-btn i::before {
	margin: 0 !important;
}
/* 추가신고하기 버튼 */
.question-box {
	margin-left:auto;
	display:flex;
	gap:6px;
}
.question-box>.btn {
	border-radius:30px;
	margin:0;
	padding:0 8px 0 16px;
	display:flex;
	align-items:center;
	justify-content:center;
	font-weight:800;
}
.question-box>.btn i::before {
	font-size:24px;
	width:20px;
	vertical-align:middle;
}
.question-box .tooltip-icon {
	position:relative;
	display:flex;
	width:40px;
	height:40px;
	align-items:center;
	justify-content:center;
	background:var(--color-blue05);
	border-radius:30px;
}
.question-box .tooltip-icon>i {
	color:var(--color-gray00);
	font-size: 24px;
}
/* 툴팁 알림 영역 */
.question-show {
	display:none;
	position:absolute;
	top:50px;
	right:0;
	width:200px;
	z-index:99;
	background-color:var(--color-blue05);
	color:var(--color-gray00);
	box-shadow:0px 8px 12px 0px rgba(100,80,150,0.2);
	padding:8px;
	text-align:center;
	line-height:18px;
	font-weight:500;
	border-radius:8px;
	font-size:13px;
}
.question-show::before {
	content:"";
	position:absolute;
	top:-7px;
	right:11px;
	border-left:8px solid transparent;
	border-right:8px solid transparent;
	border-bottom:8px solid var(--color-blue05);
}
.question-show::after {
	content:"";
	position:absolute;
	top:-8px;
	right:11px;
	border-left:8px solid transparent;
	border-right:8px solid transparent;
	border-bottom:8px solid 8px solid var(--color-blue05);
}
.tooltip-icon:hover .question-show {
	display: block;
}
/* 신고대상자 카드 */
.card-slider {
	display:flex;
	width:calc(100% - 20px);
	background:#edf1f5;
	padding:16px 4px 16px 16px;
	border-radius:12px;
	overflow:hidden;
	position:relative;
}
.card-all-btn {
	border-radius:8px;
	overflow:hidden;
	min-width:180px;
	min-height:81px;
	background-color:var(--color-blue05);
	padding:12px 16px;
	display:flex;
	flex-direction:column;
	justify-content:center;
	gap:4px;
	letter-spacing:-0.6px;
	width:210px;
	flex:none;
	color:#fff;
}
.card-all-btn .title-total {
	margin:0;
	width:100%;
	font-size:16px;
	display:flex;
	flex-direction:column;
	font-weight:600;
	text-align:left;
	color:#fff;
}
.card-all-btn .title-total .total-num {
	font-size:24px;
}
.card-all-btn>button>i::before {
	margin:0 !important;
	font-size:24px;
	width:20px;
}
.line-bottom {
	color:#B1CFEF;
	border-bottom:1px solid #b1cfef69;
	padding-bottom:8px;
}
.history-box {
	/* color:#B1CFEF; */
	/* border-top:1px solid #b1cfef69; */
	/* padding-top:6px; */
	display:flex;
	align-items:center;
	gap:4px;
}
.history-box p {
	letter-spacing:-0.6px;
}
.history-box button {
	background:#6193DE;
	color:#fff;
	font-size:12px;
	padding:3px 10px 3px 6px;
	border-radius: 20px;
	display: inline-flex;
    align-items: center;
	border: 0;
}
/* 대상자 없음 리셋 */
.card-nolist {
	background:#fff;
	border-radius:8px;
	height:100%;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-direction:column;
	gap:4px;
	margin:0 16px;
}
.card-nolist .title {
	display:inline-flex;
	align-items:center;
	font-size:18px;
	font-weight:600;
	gap:2px;
}
.card-nolist .title>i {
	font-size: 24px;
}
/* 카드 슬라이드 */
.card-slider .card-wrap {
	position:absolute;
	left:260px;
	top:16px;
	background:#EDF1F5;
	border-radius:8px;
	overflow:hidden;
	width:calc(100% - 260px);
	height:calc(100% - 32px);
}
.card-list {
	display:flex;
	padding:0 16px;
}
.card-list .slick-track {
	margin:0;
	width:100% !important;
	display:flex !important;
	max-width: 1235px;
}
/* 5개 한 줄 기준(정적 모드일 때) */
.card-list .card-item {
	flex:0 0 calc((100% - 60px)/5);
	border-radius:8px;
	background:#ffffff;
	display:flex;
	align-items:center;
	justify-content:center;
	font-weight:600;
	margin:0 4px;
	width:100%;
}
.card-list .card-item>a.box {
	padding:20px 5% 10px 5%;
	display:inline-block;
	width: calc(100% - 10%);
}
/* 건강,연금,고용,산재 */
.insurance {
	display:flex;
	gap:4px;
	margin-top:12px;
	justify-content:center;
}
.insurance li {
	border:1px solid var(--color-gray03);
	color:var(--color-gray05);
	padding:4px 6px;
	border-radius:4px;
	font-size:13px;
	font-weight: 500;
}
/* 신고대상자 슬라이드 slick */
.card-item.slick-slide {
	margin:0 6px;
	box-sizing:border-box;
	border:1px solid transparent;
}
.card-item.slick-slide:hover {
	border:1px solid var(--color-blue05);
}
.card-item.slick-slide:hover a p {
	color: var(--color-blue05) !important;
}
/* slick 초기화되면 block으로 바꿔 충돌 방지 */
.slick-initialized.card-list {
	display: block;
}
/* 화살표 스타일(원형 버튼 예시) */
.card-wrap .slick-prev,.card-wrap .slick-next {
	width:36px;
	height:36px;
	border-radius:50%;
	z-index:5;
	background:var(--color-blue05);
}
.card-wrap .slick-prev.slick-disabled,.card-wrap .slick-next.slick-disabled {
	opacity:0.4;
}
.card-wrap .slick-prev:before,.card-wrap .slick-next:before {
	color:#fff;
	font-size:20px;
	display:none;
}
.card-wrap .slick-prev>i,.card-wrap .slick-next>i {
	width:32px;
	height:32px;
}
.card-wrap .slick-prev>i:before,.card-wrap .slick-next>i:before {
	font-size:32px;
	width:32px;
	height:32px;
	color:#fff;
	margin:0 !important;
}
.card-wrap .slick-prev:hover,.card-wrap .slick-prev:focus,.card-wrap .slick-next:hover,.card-wrap .slick-next:focus {
	background:var(--color-blue05);
}
.card-wrap .slick-prev {
	left:5px;
}
.card-wrap .slick-next {
	right:5px;
}
.card-reset {
	position:absolute;
	top:0;
	z-index:100;
	background:#000000bf;
	width:100%;
	height:100%;
	border-radius:8px;
	display:flex;
	align-items:center;
	justify-content:center;
	color:#fff;
	gap:8px;
}
.card-reset .icon {
	width:40px;
	height:40px;
	display:flex;
	align-items:center;
	justify-content:center;
	background-color:var(--color-blue06);
	border-radius:30px;
}
.card-reset .icon i {
	font-size:24px;
}
.card-box {
	display:flex;
	gap:16px;
}
.card-box .card-all-box {
	width:100%;
	flex:auto;
	background:#edf1f5;
	margin:0;
	width:100%;
	font-size:16px;
	display:flex;
	justify-content:space-between;
	font-weight:600;
	padding:24px 20px;
	border-radius:8px;
}
.card-box .card-all-box .total-num {
	font-size:20px;
	font-weight:700;
}
@media all and ( max-width:1440px ) {
	.card-box .card-all-box {
		flex-direction:column;
		flex-direction:column;
		align-items:center;
		gap:16px;
	}
	.card-box .card-all-box p {
		text-align:center;
	}
}
@media all and ( max-width:1520px ) {
	.card-list .card-item {
			flex:0 0 calc((100% - 38px)/3);
	}
}
@media all and ( max-width:1024px ) {
	.card-list .card-item {
			flex: 0 0 calc((100% - 18px)/2);
	}
}
/* 검토대상자 모달 */
.popup-cont.all-person-box {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:8px;
	padding:12px 0 0 0;
	margin:12px 0 0 0;
	max-height:370px;
	overflow-y:scroll;
	border-top:1px solid #b1cfef;
	width:100%;
}
.all-person-box .person-box a {
	display:flex;
	align-items:center;
	justify-content:space-between;
	background:#fff;
	border-radius:4px;
	padding:16px 12px;
	border:1px solid transparent;
}
.all-person-box .person-box dl {
	display:flex;
}
.all-person-box .person-box dt {
	font-weight:800;
	font-size:16px;
}
.all-person-box .person-box dd {
	font-size:14px;
	align-self:center;
	margin-left:8px;
	color:var(--color-gray05);
}
.all-person-box .person-box .btn {
	border-radius:20px;
	display:flex;
	align-items:center;
	padding:2px 10px;
	font-size:14px;
	border:1px solid var(--color-blue05);
	color:var(--color-blue05);
	font-weight:600;
}
.all-person-box .person-box .btn i {
	font-size:20px;
}
.all-person-box .person-box .btn i::before {
	width:12px;
	margin:0 !important;
}
.person-box a:hover .btn {
	background:var(--color-blue05);
	color:#fff;
}
.person-box a:hover {
	border:1px solid var(--color-blue05);
}
.person-box a:hover dt,.person-box a:hover dd {
	color:var(--color-gray08);
}
.info-num {
	background:#F3F3F3;
	border-radius:4px;
	padding:12px 8px;
	display:flex;
	align-items:center;
	justify-content:space-between;
}
.info-num .icon {
	background:#BACAE7;
	padding:6px 4px;
	border-radius: 44px;
}
/* 	2025.11.10	사용자 가이드북 */
.user-guide {
	overflow:hidden;
	background-color:#F3F7FD;
	height:100vh;
	display:flex;
	align-items:center;
	justify-content:center;
}
.user-guide>.modal-content {
	margin:0 auto;
	width:1020px;
	height:599px;
}
.user-guide>.modal-content .popup-inner-box {
	background:#fff url(../images/common/user_guide_bg.png) no-repeat center center;
	background-size:cover;
	height:517px;
	width:calc(100% - 40px);
	display:flex;
	flex-direction:column;
	justify-content:center;
}
.user-guide-box {
	max-width:500px;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	margin-left:50px;
}
.user-guide-box>p {
	font-size:32px;
	text-align:center;
	margin-bottom:16px;
}
.go-guide-info {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:16px;
	height:calc(100% - 36px);
}
.go-guide-info li {
	border:2px solid var(--color-gray03);
	border-radius:4px;
	padding:16px;
	background:#fff;
}
.go-guide-info li:hover {
	border:2px solid #070062;
}
.go-guide-info li:hover a {
	color:#070062;
}
.go-guide-info li a {
	gap:4px;
	display:flex;
	align-items:center;
	font-size:16px;
	font-weight:800;
	margin-bottom:8px;
	line-height:120%;
}
.go-guide-info li a span:last-child {
	margin-left:auto;
	color:#070062;
}
.go-guide-info li .img {
	width:32px;
	height:32px;
	display:inline-block;
	flex:none;
}
.go-guide-info li .icon01 {
	background:url("../images/icon/dashboard_icon_1.png") no-repeat;
	background-size:100%;
}
.go-guide-info li .icon02 {
	background:url("../images/icon/dashboard_icon_2.png") no-repeat;
	background-size:100%;
}
.go-guide-info li .icon03 {
	background:url("../images/icon/dashboard_icon_3.png") no-repeat;
	background-size:100%;
}
.go-guide-info li .icon04 {
	background:url("../images/icon/dashboard_icon_4.png") no-repeat;
	background-size:100%;
}
.go-guide-info li a i {
	margin-left:auto;
}
.go-guide-info li p {
	line-height:130%;
}
.user-guide .popup-inner-box .logo {
	background:url(../images/common/logo.svg) no-repeat;
	background-size:100%;
	width:140px;
	height:26px;
	position:absolute;
	right:45px;
	bottom: 40px;
}


.list-box.line {}
.list-box.line li {	border-bottom:1px solid var(--color-gray04);margin:6px 0;padding-bottom:6px;}
.list-box.line li:last-child {border-bottom:0px solid;margin-bottom:0;padding-bottom:0;}
.blue.arrow i::before {margin:0 !important;}




/************************************ 
26.04.16 right side 디자인 
************************************/
#middleArea.right-side-open {display: flex;position: relative;padding-right: 240px;}
#middleArea.right-side-open.closed {padding-right: 0;}
#middleArea.right-side-open #content {flex: 1;min-width: 0; /* flex 자식 요소의 최소 너비 문제 방지 */transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);padding: 24px;margin: 16px;min-height: calc(100vh - 82px);border-radius: 8px;}

/* 오른쪽 영역 */
.rightSideBar {width: 240px; /* 사이드바 너비 고정 */ position: fixed;right: 0; transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); z-index: 10;height: calc(100vh - 86px);margin: 16px 0;}
.rightSideBar .sideInner {position: relative;border: 1px solid var(--color-gray03);background:var(--color-gray01);background: #fff;height: 100%;border-radius: 8px 0 0 8px;overflow: hidden;box-shadow: 0 4px 16px rgba(0,0,0,.1);display: flex;flex-direction: column;}
.rightSideBar .rightSideClose {position: absolute;top: 50%;left: -33px; transform: translateY(-50%);width: 34px;background:#3c497b;color: #fff;border-radius: 8px 0 0 8px;z-index: 10;word-break: break-all;padding: 16px 8px;font-weight: 600;writing-mode: vertical-rl;box-shadow: -3px 2px 5px rgba(0, 0, 0, 0.1);}
.rightSideBar .rightSideClose.is-opened::before {content:'닫기';display: block;clear: both;}
.rightSideBar .rightSideClose::before {content:'안내센터';display: block;clear: both;}
.rightSideBar .rightSideClose.is-opened {background: #fff;border-top: 1px solid var(--color-gray03);border-left: 1px solid var(--color-gray03);border-bottom: 1px solid var(--color-gray03);color: var(--color-blue06);}
/* 닫혔을 때 (side-closed) 상태 */
#middleArea.closed .rightSideBar { transform: translateX(240px);}
/* 버튼 클래스 토글에 따른 아이콘 회전 */
/* .btn-side-toggle.is-opened::after {transform: rotate(225deg); } */


.sideHeader {background:#3c497b;height: 56px;padding: 0 8px 0 20px;border-bottom: 1px solid #eee;display: flex;align-items: center;justify-content: space-between;}
.sideHeader p {font-weight: 600;font-size: 18px;color: #fff;}
.sideHeader .headerClose {border: 0;display: flex;align-items: center;background: #3c497b;color: #fff;width: 32px;height: 32px;justify-content: center;border-radius: 20px;}

.sideBody {padding: 16px 14px 16px 16px;overflow-y: auto;background:#fff;}
.barTitle {font-size: 17px;color: var(--color-gray09);margin-bottom: 8px;font-weight: 700;}

.sideItemList {}
.sideItemList li a {padding: 5px 0;font-weight: 600;font-size: 14px;display: block;line-height: 130%;position: relative;padding-left: 18px;word-break: keep-all;color: var(--color-gray07);}
.sideItemList li a:before {content: '\e8b2';display: inline-block;clear: both;margin-right: 8px;
position: absolute;left: 0;}
.sideItemList li a:hover {color: var(--color-blue05);}

.sideQaList {}
.sideQaList .tit {font-weight: 400;font-size: 14px; margin-bottom: 6px;color: var(--color-gray05);}
.sideQaList ul li {margin: 4px 0;}
.sideQaList ul li > a {padding: 8px;border-radius: 4px;border: 1px solid var(--color-gray02);display: block;word-break: keep-all;line-height: 130%;font-weight: 600;color: var(--color-gray07);font-size: 14px;background: var(--color-gray01);}
.sideQaList ul li > a:hover {color: var(--color-blue05);background: var(--color-gray01);box-shadow: 1px 1px 2px 1px rgb(49 49 49 / 8%);}

.listEmpty .tit {font-weight: 400;font-size: 14px;margin-bottom: 6px;color: var(--color-gray05);}
.listEmpty .listEmptyBtn {display: flex;gap: 4px;}
.listEmpty .listEmptyBtn > a {flex: 1;text-align: center;font-size: 14px;padding: 16px 4px;border: 1px solid var(--color-gray02);border-radius: 4px;font-weight: 600;}
.listEmpty .listEmptyBtn > a:hover {background: var(--color-gray01);}

.sidefooter {margin: 16px;margin-top: auto;}
.sidefooter hr {border-top: 1px solid var(--color-gray02);margin: 0 0 16px 0;}
.quickDefaultBtn {display: grid;gap: 4px;grid-template-columns: 1fr 1fr;}
.quickDefaultBtn > a {padding: 16px 4px;border-radius: 4px;font-size: 13px;font-weight: 600;letter-spacing: -0.6px;text-align: center;}
.quickDefaultBtn > a img {width: 32px;margin-bottom: 2px;}
.quickDefaultBtn .quideBtn {background: #f8f6ff;color: #6e41e2;}
.quickDefaultBtn .quideBtn img {transform: scale(0.8);transition: transform 0.2s ease-in-out;}
.quickDefaultBtn .quideBtn:hover img {transform: scale(1);}

.quickDefaultBtn .headsetBtn {background: #FBF3FF;color: #8A46B5;}
.quickDefaultBtn .headsetBtn img {transform: scale(0.8);transition: transform 0.2s ease-in-out;}
.quickDefaultBtn .headsetBtn:hover img {transform: scale(1);}

.quickBtnbox {margin-top: 16px;}
.quickBtn {display: flex;flex-direction: column;gap: 4px;margin-top: 4px;}
.quickBtn > a {min-height:40px;padding: 0 4px;border-radius: 4px;font-size: 13px;font-weight: 600; display: flex;align-items: center;justify-content: center;}
.quickBtn > a.bg-blue {color: var(--color-blue05);}
.quickBtn > a.bg-gray {color: var(--color-gray09);}