@charset "utf-8";
/* CSS Document */

/* ajaxing */
#ajaxing {
	background: rgba(0, 0, 0, 0.2);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
}

.ajax-message {
	padding: 90px 0 0;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 9999;
	text-align: center;
	display: block;
}

	.ajax-message .msg {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 20px;
		color: #fff;
		background-color: var(--main-color-01-dark);
		border-radius: 1000px;
		padding: 20px 30px;
	}

	.ajax-message .loading {
		position: absolute;
		top: 0;
		left: 50%;
		width: 23px;
		height: 23px;
		margin: -12px 0 0 -12px;
	}

		.ajax-message .loading span {
			position: absolute;
			top: 23px;
			left: 23px;
			display: block;
			width: 23px;
			height: 23px;
			background: var(--main-color-01);
			border-radius: 23px;
			animation: cssload-spin2 1.73s ease-in-out infinite;
			-o-animation: cssload-spin2 1.73s ease-in-out infinite;
			-ms-animation: cssload-spin2 1.73s ease-in-out infinite;
			-webkit-animation: cssload-spin2 1.73s ease-in-out infinite;
			-moz-animation: cssload-spin2 1.73s ease-in-out infinite;
		}

			.ajax-message .loading span:first-child {
				top: -23px;
				left: 0;
				background: var(--main-color-02);
				animation: cssload-spin 1.73s ease-in-out infinite;
				-o-animation: cssload-spin 1.73s ease-in-out infinite;
				-ms-animation: cssload-spin 1.73s ease-in-out infinite;
				-webkit-animation: cssload-spin 1.73s ease-in-out infinite;
				-moz-animation: cssload-spin 1.73s ease-in-out infinite;
			}

			.ajax-message .loading span:last-child {
				top: 23px;
				left: -23px;
				background: var(--point-color-01);
				animation: cssload-spin3 1.73s ease-in-out infinite;
				-o-animation: cssload-spin3 1.73s ease-in-out infinite;
				-ms-animation: cssload-spin3 1.73s ease-in-out infinite;
				-webkit-animation: cssload-spin3 1.73s ease-in-out infinite;
				-moz-animation: cssload-spin3 1.73s ease-in-out infinite;
			}



@keyframes cssload-spin {
	0% {
		top: -23px;
		left: 0;
		transform: scale(1);
	}

	17% {
		transform: scale(.5);
	}

	33% {
		top: 23px;
		left: 23px;
		transform: scale(1);
	}

	50% {
		transform: scale(.5);
	}

	66% {
		top: 23px;
		left: -23px;
		transform: scale(1);
	}

	83% {
		transform: scale(.5);
	}

	100% {
		top: -23px;
		left: 0;
		transform: scale(1);
	}
}

@keyframes cssload-spin2 {
	0% {
		top: 23px;
		left: 23px;
		transform: scale(1);
	}

	17% {
		transform: scale(.5);
	}

	33% {
		top: 23px;
		left: -23px;
		transform: scale(1);
	}

	50% {
		transform: scale(.5);
	}

	66% {
		top: -23px;
		left: 0;
		transform: scale(1);
	}

	83% {
		transform: scale(.5);
	}

	100% {
		top: 23px;
		left: 23px;
		transform: scale(1);
	}
}

@keyframes cssload-spin3 {
	0% {
		top: 23px;
		left: -23px;
		transform: scale(1);
	}

	17% {
		transform: scale(.5);
	}

	33% {
		top: -23px;
		left: 0;
		transform: scale(1);
	}

	50% {
		transform: scale(.5);
	}

	66% {
		top: 23px;
		left: 23px;
		transform: scale(1);
	}

	83% {
		transform: scale(.5);
	}

	100% {
		top: 23px;
		left: -23px;
		transform: scale(1);
	}
}

@media (min-width: 768px) {
	.ajax-message .msg {
		position: relative;
		font-size: 1.5rem;
		padding: 20px 50px;
		max-width: 800px;
		margin: 0 auto;
	}
}

/* pre */
.pre {
	display: block;
	background-color: #fff;
	border: 2px solid #E0E5EB;
	border-radius: 0;
	max-height: 200px;
	overflow: hidden;
	overflow-y: auto;
	padding: 0.5rem;
}

/********** icon-box **********/
.icon-list {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 10px;
}

	.icon-list > li:not(:first-child) {
		position: relative;
		margin-left: 8px;
	}

		.icon-list > li:not(:first-child)::before {
			content: "";
			display: block;
			width: 1px;
			height: 14px;
			position: absolute;
			top: 50%;
			left: -4.5px;
			transform: translateY(-50%);
			background-color: #e0e0e0;
		}

	.icon-list .btn-icon {
		display: block;
		width: 32px;
		height: 32px;
		color: var(--main-color-01-dark);
		text-align: center;
	}

		.icon-list .btn-icon > span {
			display: block;
			height: 32px;
			line-height: 1.2;
		}

		.icon-list .btn-icon.help-btn {
			margin-top: 2px;
		}


/*****************************************************
	Title
*****************************************************/
.guide-title {
	margin-top: 40px;
	margin-bottom: 20px;
	padding: 10px 0;
	color: #ccc
}

/* sec title */

.sec-title {
	font-weight: bold;
}

.sec-title-01,
.sec-title-02,
.sec-title-03 {
	font-weight: 700;
}

.sec-title-01 {
	margin-top: 30px;
	margin-bottom: 15px;
	color: var(--main-color-01-dark);
	font-size: 24px;
}

.sec-title-02 {
	/*position: relative;*/
	margin-bottom: 10px;
	padding-left: 30px;
	/*color: var(--main-color-01-dark);*/
	font-size: 19px;
	background: url(/images/bullet-03.png) no-repeat left center;
	background-size: 26px;
}

	.sec-title-02::before {
		/*content: '';
	display: block;
	position: absolute;
	top: 3px;
	left: 0;
	width: 4px;
	height: 13px;
	background: var(--main-color-01)*/
	}

.sec-title-03 {
	margin-bottom: 10px;
	color: #222;
	font-size: 17px;
}

.content .header-gr .sec-title-01,
.content .header-gr .sec-title-02,
.content .header-gr .sec-title-03 {
	margin-bottom: 0;
	margin-top: 0;
}

.sec-title-01 > small,
.sec-title-02 > small,
.sec-title-03 > small {
	font-size: 15px;
}

/********** info-txt **********/
.info-box {
	display: flex;
	position: relative;
	margin-bottom: 15px;
	box-sizing: border-box;
	/*background: #F4F5FA;*/
	border: 2px solid #eff0f4;
	border-radius: 10px 10px 10px 10px;
}

.info-box-header {
	position: relative;
	flex-shrink: 0;
	width: 30px;
}

	.info-box-header:before {
		content: "i";
		font-family: "Bio Sans", sans-serif;
		font-size: 13px;
		font-weight: bold;
		line-height: 18px;
		display: block;
		position: absolute;
		left: 6px;
		top: 10px;
		width: 18px;
		height: 18px;
		text-align: center;
		border-radius: 50%;
		color: #fff;
	}

.info-box .info-box-header:before {
	border: 1px solid #fff;
}

.info-box.type03 {
	padding: 10px;
}

.info-box-content {
	position: relative;
	padding: 10px 10px 10px 150px;
}

	.info-box-content:before {
		content: "";
		position: absolute;
		left: 25px;
		top: 30px;
		width: 60px;
		height: 50%;
		padding-top: 10px;
		text-align: center;
		background: url(/images/info-box.png) no-repeat center top;
		background-size: contain;
		border-right: 2px solid #eff0f4;
		padding-right: 100px;
	}

.info-box.type01 .info-box-content:before {
	/*background-color: var(--main-color-01-dark);*/
}

.info-box.type02 .info-box-content:before {
	background: var(--point-color-01);
}


/*****************************************************
	Button
*****************************************************/
.btn {
	padding: 4px 8px;
	margin-bottom: 3px;
}

.btn-primary,
.btn-primary:disabled {
	background: var(--main-color-01);
	border: 1px solid var(--main-color-01)
}

.btn-outline-primary,
.btn-outline-primary:disabled {
	border: 1px solid var(--main-color-01);
	color: var(--main-color-01)
}

	.btn-primary:hover,
	.btn-primary:focus,
	.btn-outline-primary:hover,
	.btn-outline-primary:focus {
		background: var(--main-color-01-hover);
		border: 1px solid var(--main-color-01-hover)
	}

.btn-light,
.btn-light:disabled {
	background: #fff;
	border: 1px solid var(--common-color-02)
}

.btn-outline-light,
.btn-outline-light:disabled {
	border: 1px solid var(--common-color-02);
	color: var(--common-color-02);
}



/*****************************************************
	List style
*****************************************************/

/* UL */
ul.list-style01 {
	margin-left: 20px;
}

	ul.list-style01 > li {
		position: relative;
		margin-bottom: 10px;
	}

		ul.list-style01 > li::after {
			content: "•";
			position: absolute;
			top: -1px;
			left: -17px;
			display: block;
		}

/* OL */
ol.list-style02 {
	list-style: decimal;
	margin-left: 15px;
}

	ol.list-style02 > li {
		margin-bottom: 10px;
	}

	ul.list-style01 ul,
	ol.list-style02 ul {
		list-style: none;
		margin-left: 15px;
		margin-top: 10px;
	}

		ul.list-style01 ul > li,
		ol.list-style02 ul > li {
			position: relative;
			padding-left: 3px;
			margin-bottom: 5px;
		}

			ul.list-style01 ul > li::before,
			ol.list-style02 ul > li::before {
				content: "\e5cc";
				position: absolute;
				top: 0;
				left: -17px;
				display: block;
				width: 16px;
				height: 16px;
				opacity: 0.5;
				font-family: 'Material Symbols Outlined';
			}


/*****************************************************
	Table
*****************************************************/
.table {
}

	.table tr {
		height: 50px;
	}

	.table.align-middle th,
	.table.align-middle td {
		vertical-align: middle;
	}

	.table caption {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	.table th,
	.table td {
		padding: 8px;
		vertical-align: middle;
	}

	.table th {
		white-space: nowrap;
		font-weight: normal;
		text-align: center;
	}

	.table thead th {
		padding-left: 24px;
		padding-right: 24px;
		background-color: var(--common-color-04);
		border-top: 2px solid var(--main-color-01-dark);
		border-bottom: 1px solid var(--common-color-02);
		vertical-align: middle;
		color: #222;
		font-weight: 500;
	}

	.table td {
		border-top: none;
		border-bottom: 1px solid var(--common-color-02);
	}

.table-hover tbody tr:hover,
.table-hover tbody tr:focus,
.table-hover tbody tr:hover th,
.table-hover tbody tr:focus th {
	background-color: #edf7f7;
}

.table tbody th {
	background-color: var(--common-color-04);
	font-weight: 500;
}

.table .edit-btn img {
	margin-right: 0;
}

.table .btn {
	padding: 2px 8px;
	height: 28px;
}

.table .bg-sky {
	background-color: #F6FBFB;
}

.table-footer-inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 10px;
}

	.table-footer-inner > .item {
		min-width: 1px;
	}

		.table-footer-inner > .item:first-child {
			margin-right: 15px;
		}

.table-footer .search-box {
	margin-top: 10px;
}

.table-footer .input-group-text {
	padding-top: 5px;
	padding-bottom: 5px;
}

.table-striped tbody th {
	background: #fff;
	border-bottom: 1px solid #ddd;
}

.table-striped tbody tr:nth-of-type(odd),
.table-striped tbody tr:nth-of-type(odd) th {
	background-color: #F6FBFB;
}

@media (max-width: 991px) {
	.table-responsive .table {
		min-width: 700px;
	}
}

@media (min-width: 1200px) {
	.table th {
		padding: 8px 5px;
	}

	.table td {
		padding: 5px;
	}

	.table .btn {
		margin-bottom: 1px
	}
}


/* table-box */
.table-box .table-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	margin-bottom: .5rem;
}

	.table-box .table-header .row,
	.table-box .table-header .header-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.table-box .table-header select.form-control {
		width: auto;
	}

@media(max-width: 768px) {

	.table-box .table-header .row:not(:last-child),
	.table-box .table-header .header-item:not(:last-child) {
		margin-bottom: .5rem;
	}
}




/*****************************************************
	workflow
*****************************************************/
.workflow {
	padding: 30px 15px 15px;
	border: 1px solid #e2e2e2;
}

.workflow-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	list-style: none;
	margin: 0 0 -8px 0;
}

	.workflow-list > li {
		width: 130px;
		min-width: 100px;
		height: 58px;
		padding-left: 25px;
		margin-right: 9px;
		position: relative;
		border-top: 1px solid #EAECF6;
		border-bottom: 1px solid #EAECF6;
		background-color: #EAECF6;
		color: #000;
		line-height: 1.2;
		margin-bottom: 10px;
	}

@media (min-width : 768px) {
	.workflow-list > li {
		margin-bottom: 15px;
	}
}

.workflow-list > li::before,
.workflow-list > li::after {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-top: 29px solid transparent;
	border-bottom: 29px solid transparent;
	border-left: 23px solid #EAECF6;
	position: absolute;
	top: -1px;
}

.workflow-list > li::before {
	left: 0;
	border-left-color: white;
}

.workflow-list > li::after {
	right: -23px;
	z-index: 1;
}

.workflow-list > li.step-success {
	border-top-color: #28a745;
	border-bottom-color: #28a745;
	background-color: #28a745;
}

	.workflow-list > li.step-success::after {
		border-left-color: #28a745;
	}

.workflow-list > li.step-secondary {
	border-top-color: #5a6268;
	border-bottom-color: #5a6268;
	background-color: #5a6268;
}

	.workflow-list > li.step-secondary::after {
		border-left-color: #5a6268;
	}

.workflow-list > li.step.link::before,
.workflow-list > li.link::before {
	border-left: 23px solid #fff;
}

.workflow-list > li.step.link::after,
.workflow-list > li.link::after {
	border-left: 23px solid var(--common-color-02);
}

.workflow-list > li.step.link,
.workflow-list > li.link {
	background-color: var(--common-color-02);
	border-top-color: var(--common-color-02);
	border-bottom-color: var(--common-color-02);
}

	.workflow-list > li.step.link a,
	.workflow-list > li.link a {
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: transparent;
		color: #053b76;
		font-weight: bold;
	}

		.workflow-list > li.step.link a:hover,
		.workflow-list > li.step.link a:focus,
		.workflow-list > li.link a:hover,
		.workflow-list > li.link a:focus {
			text-decoration: none;
		}

/* workflow current step */
.workflow-list > li.step {
	background-color: var(--main-color-01-dark);
	border-top-color: var(--main-color-01-dark);
	border-bottom-color: var(--main-color-01-dark);
	color: #fff
}

	.workflow-list > li.step::after {
		border-left-color: var(--main-color-01-dark)
	}

/* workflow-list > .item-title */
.workflow-list > li .item-title {
	display: flex;
	width: 100px;
	height: 56px;
	align-items: center;
	justify-content: center;
	margin-left: 0;
	position: relative;
	z-index: 3;
	word-break: keep-all;
	text-align: center;
	letter-spacing: -0.075em;
}

.workflow-list > li.step .item-title {
	position: relative;
	margin-left: 0;
}

	.workflow-list > li.step .item-title::after {
		content: "\e86c";
		font-family: 'Material Symbols Outlined';
		font-variation-settings: 'FILL' 1;
		display: block;
		width: 30px;
		height: 30px;
		position: absolute;
		top: -24px;
		left: 50%;
		transform: translateX(-50%);
		font-weight: 700;
		font-size: 30px;
		color: var(--main-color-01);
	}

.workflow-list > li.link .item-title {
	margin-left: 3px;
	padding-right: 0;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.workflow-list > li.link a:hover .item-title {
	text-decoration: underline;
	color: black;
}

.workflow-list > li.step.link .item-title {
	width: 90px;
}

	.workflow-list > li.step.link .item-title::before {
		left: 45%;
	}

	.workflow-list > li.step.link .item-title::after {
		left: 45%;
		color: white;
	}




/*****************************************************
	form
*****************************************************/

.input-group .input-group-append .btn {
	margin-bottom: 0
}

.input-group .btn > span {
	font-size: 18px;
	vertical-align: middle;
}

	.input-group .btn > span.ico-calendar {
		margin-top: -3px;
	}

/* 기본 테이블(반응형 테이블). 기존 React 시스템에서 참고하여 현 시스템에 맞게 수정함. */
.b-table-box {
	margin-bottom: 15px;
	border-top: 2px solid var(--main-color-01-dark);
}

	.b-table-box.bd-top-none {
		border-top: 1px solid #DEE1E8;
	}

	.b-table-box .b-row-box {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}

	.b-table-box .b-row-item {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-flex: 0;
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
		min-height: 50px;
		border-bottom: 1px solid #DEE1E8;
	}

	.b-table-box .b-title-box {
		position: relative;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-box-flex: 0;
		-ms-flex: 0 0 120px;
		flex: 0 0 120px;
		max-width: 120px;
		padding: 0 0.25rem;
		padding-right: 10px;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		background: var(--common-color-04);
		color: #2C2D2E;
		font-weight: 700;
		line-height: 1.2;
		text-align: left;
		-webkit-box-pack: start;
		-ms-flex-pack: start;
		justify-content: center;
		border-right: 1px solid #DEE1E8;
	}

	.b-table-box.title-box-xl .b-title-box {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 160px;
		flex: 0 0 160px;
		max-width: 160px;
	}

	.b-table-box.title-box-lg .b-title-box {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 140px;
		flex: 0 0 140px;
		max-width: 140px;
	}

	.b-table-box.title-box-sm .b-title-box {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 100px;
		flex: 0 0 100px;
		max-width: 100px;
	}

	.b-table-box.title-box-xs .b-title-box {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 80px;
		flex: 0 0 80px;
		max-width: 80px;
	}

	.b-table-box .b-title-box label {
		margin-bottom: 0;
		font-weight: 500;
		word-break: keep-all;
		line-height: 1.4;
		max-width: 100%;
		word-wrap: break-word;
		white-space: pre-wrap;
	}

		.b-table-box .b-title-box label.req::after,
		label.req::after,
		th.req nobr::after {
			content: "*";
			display: inline-block;
			width: 10px;
			margin-right: 2px;
			font-weight: 700;
			color: #ff0000;
		}

	.b-table-box .b-con-box {
		position: relative;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		width: 100%;
		padding: 0.5rem;
		background: #fff;
	}

		.b-table-box .b-con-box .btn {
			margin-top: 2px;
			margin-bottom: 2px;
			padding: 2px 8px;
		}

	.b-table-box .form-control,
	.b-table-box .form-select {
		padding: 2px 0.75rem;
	}

	.b-table-box .b-con-box .material-symbols-outlined {
		font-size: 16px;
		vertical-align: middle;
	}

	.b-table-box .b-con-box.text-left {
		-webkit-box-pack: start;
		-ms-flex-pack: start;
		justify-content: flex-start;
	}

	.b-table-box .b-con-box.text-center {
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
	}

	.b-table-box .b-con-box.text-right {
		-webkit-box-pack: end;
		-ms-flex-pack: end;
		justify-content: flex-end;
	}

	.b-table-box .form-group {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		width: 100%;
		margin-right: 0;
	}

		.b-table-box .form-group:last-child {
			margin-bottom: 0;
		}

	.b-table-box .form-group-inline {
		margin-right: 5px;
		width: auto;
	}

	.b-table-box .form-group .form-control {
		flex-grow: 1;
		flex-basis: 0;
	}

	.b-table-box .form-control,
	.b-table-box .form-select {
		margin-top: 2px;
		margin-bottom: 2px;
		border-radius: 0;
	}

	.b-table-box .form-w-auto,
	.b-table-box .form-w-xs,
	.b-table-box .form-w-sm,
	.b-table-box .form-w-md,
	.b-table-box .form-w-lg,
	.b-table-box .form-w-xl {
		width: 100%
	}

	.b-table-box .b-con-box .row {
		width: 100%;
		margin-left: -1px;
		margin-right: -1px;
	}

		.b-table-box .b-con-box .row > div {
			padding-left: 1px;
			padding-right: 1px;
		}

			.b-table-box .b-con-box .row > div .form-control {
				margin-right: 0;
			}

@media (max-width : 768px) {
	.b-table-box .b-con-box .row > div {
		padding-right: 0;
	}
}

/*
.b-table-box .b-con-box .form-control:only-child,
.b-table-box .b-con-box .form-control:last-child,
.b-table-box .b-con-box .w2spinner:only-child,
.b-table-box .b-con-box .w2spinner:last-child {
    margin-right: 0;
}
 */
@media (min-width : 768px) {

	.b-table-box .b-row-item,
	.flex-col-2 .b-row-item {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 50%;
		flex: 0 0 50%;
		max-width: 50%;
	}

	/* 1단 테이블 */
	.flex-col-1 .b-row-item {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}

	/* 2단 테이블 */
	.b-table-box .b-row-item.merge-2,
	.flex-col-2 .b-row-item.merge-2 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}

	/* 3단 테이블 */
	.flex-col-3 .b-row-item:last-child,
	.flex-col-3 .b-row-item.merge-2,
	.flex-col-3 .b-row-item.merge-prev {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}

	/* 4단 테이블 */
	.flex-col-4 .b-row-item.merge-2,
	.flex-col-4 .b-row-item.merge-3,
	.flex-col-4 .b-row-item.merge-4,
	.flex-col-4 .b-row-item.merge-prev,
	.flex-col-4 .b-row-item.merge-next,
	.flex-col-4 .b-row-item.merge-3 + .b-row-item {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}

	/* 5단 테이블 */
	.flex-col-5 .b-row-item:last-child,
	.flex-col-5 .b-row-item.merge-prev,
	.flex-col-5 .b-row-item.merge-next:nth-child(4),
	.flex-col-5 .b-row-item.merge-3,
	.flex-col-5 .b-row-item.merge-3 + .merge-next,
	.flex-col-5 .b-row-item.merge-4 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}

		.flex-col-5 .b-row-item.merge-prev:nth-child(2),
		.flex-col-5 .b-row-item.merge-next,
		.flex-col-5 .b-row-item.merge-next + .b-row-item,
		.flex-col-5 .b-row-item.merge-3 + .b-row-item + .b-row-item {
			-webkit-box-flex: 0;
			-ms-flex: 0 0 50%;
			flex: 0 0 50%;
			max-width: 50%;
		}

	.b-table-box .form-w-auto {
		width: auto
	}

	.b-table-box .form-w-xs {
		width: 30px;
	}

	.b-table-box .form-w-sm {
		width: 60px;
	}

	.b-table-box .form-w-md {
		width: 90px;
	}

	.b-table-box .form-w-lg {
		width: 110px;
	}

	.b-table-box .form-w-xl {
		width: 140px;
	}
}

@media (min-width : 992px) {
}

@media (min-width : 1200px) {
}

@media (min-width : 1400px) {
	.b-table-box .b-title-box {
		padding: 0 0.5rem;
	}

	.b-table-box .b-con-box {
	}

	.b-table-box.small .b-title-box {
		padding: 0 8px 0 0.25rem;
	}

	.b-table-box.small .b-con-box {
		padding: 0 0.25rem;
	}

	/* 3단 테이블 */
	.flex-col-3 .b-row-item,
	.flex-col-3 .b-row-item:last-child,
	.flex-col-3 .b-row-item.merge-prev {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 33.333333%;
		flex: 0 0 33.333333%;
		max-width: 33.333333%;
	}

		.flex-col-3 .b-row-item.merge-2 {
			-webkit-box-flex: 0;
			-ms-flex: 0 0 66.666666%;
			flex: 0 0 66.666666%;
			max-width: 66.666666%
		}

		.flex-col-3 .b-row-item.merge-3 {
			-webkit-box-flex: 0;
			-ms-flex: 0 0 100%;
			flex: 0 0 100%;
			max-width: 100%
		}
}

@media (min-width : 1600px) {
	.b-table-box .b-title-box {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 140px;
		flex: 0 0 140px;
		max-width: 140px;
	}

	.b-table-box.title-box-xl .b-title-box {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 180px;
		flex: 0 0 180px;
		max-width: 180px;
	}

	.b-table-box.title-box-lg .b-title-box {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 160px;
		flex: 0 0 160px;
		max-width: 160px;
	}

	.b-table-box.title-box-sm .b-title-box {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 120px;
		flex: 0 0 120px;
		max-width: 120px;
	}

	.b-table-box.title-box-xs .b-title-box {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 100px;
		flex: 0 0 100px;
		max-width: 100px;
	}

	/* 4단 테이블 */
	.flex-col-4 .b-row-item,
	.flex-col-4 .b-row-item.merge-prev,
	.flex-col-4 .b-row-item.merge-next,
	.flex-col-4 .b-row-item.merge-3 + .b-row-item {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 25%;
		flex: 0 0 25%;
		max-width: 25%;
	}

		.flex-col-4 .b-row-item.merge-2 {
			-webkit-box-flex: 0;
			-ms-flex: 0 0 50%;
			flex: 0 0 50%;
			max-width: 50%;
		}

		.flex-col-4 .b-row-item.merge-3 {
			-webkit-box-flex: 0;
			-ms-flex: 0 0 75%;
			flex: 0 0 75%;
			max-width: 75%;
		}

		.flex-col-4 .b-row-item.merge-4 {
			-webkit-box-flex: 0;
			-ms-flex: 0 0 100%;
			flex: 0 0 100%;
			max-width: 100%
		}

	/* 5단 테이블 */
	.flex-col-5 .b-row-item,
	.flex-col-5 .b-row-item.merge-prev.merge-3-prev {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 25%;
		flex: 0 0 25%;
		max-width: 25%;
	}

		.flex-col-5 .b-row-item:last-child {
			-webkit-box-flex: 0;
			-ms-flex: 0 0 100%;
			flex: 0 0 100%;
			max-width: 100%;
		}

		.flex-col-5 .b-row-item.merge-2,
		.flex-col-5 .b-row-item.merge-prev,
		.flex-col-5 .b-row-item.merge-next:nth-child(4) {
			-webkit-box-flex: 0;
			-ms-flex: 0 0 50%;
			flex: 0 0 50%;
			max-width: 50%;
		}

			.flex-col-5 .b-row-item.merge-2:last-child,
			.flex-col-5 .b-row-item.merge-3 + .b-row-item + .b-row-item,
			.flex-col-5 .b-row-item.merge-3:last-child,
			.flex-col-5 .b-row-item.merge-4-prev {
				-webkit-box-flex: 0;
				-ms-flex: 0 0 100%;
				flex: 0 0 100%;
				max-width: 100%;
			}

			.flex-col-5 .b-row-item.merge-prev:nth-child(2),
			.flex-col-5 .b-row-item.merge-3 {
				-webkit-box-flex: 0;
				-ms-flex: 0 0 75%;
				flex: 0 0 75%;
				max-width: 75%;
			}
}

@media (min-width : 1800px) {

	/* 5단 테이블 */
	.flex-col-5 .b-row-item,
	.flex-col-5 .b-row-item:last-child,
	.flex-col-5 .b-row-item.merge-prev,
	.flex-col-5 .b-row-item.merge-next,
	.flex-col-5 .b-row-item.merge-next + .b-row-item,
	.flex-col-5 .b-row-item.merge-prev:nth-child(2),
	.flex-col-5 .b-row-item.merge-next:nth-child(4),
	.flex-col-5 .b-row-item.merge-3 + .b-row-item + .b-row-item,
	.flex-col-5 .b-row-item.merge-3 + .merge-next,
	.flex-col-5 .b-row-item.merge-prev.merge-3-prev {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 20%;
		flex: 0 0 20%;
		max-width: 20%;
	}

		.flex-col-5 .b-row-item.merge-2,
		.flex-col-5 .b-row-item.merge-2:last-child {
			-webkit-box-flex: 0;
			-ms-flex: 0 0 40%;
			flex: 0 0 40%;
			max-width: 40%;
		}

		.flex-col-5 .b-row-item.merge-3,
		.flex-col-5 .b-row-item.merge-3:last-child {
			-webkit-box-flex: 0;
			-ms-flex: 0 0 60%;
			flex: 0 0 60%;
			max-width: 60%;
		}

		.flex-col-5 .b-row-item.merge-4 {
			-webkit-box-flex: 0;
			-ms-flex: 0 0 80%;
			flex: 0 0 80%;
			max-width: 80%;
		}

		.flex-col-5 .b-row-item.merge-5 {
			-webkit-box-flex: 0;
			-ms-flex: 0 0 100%;
			flex: 0 0 100%;
			max-width: 100%;
		}
}

/* 테이블관련 추가 유형 - 우측의 빈 셀의 표현 */
.b-table-box .b-row-item.b-blank {
	min-height: 0 !important;
	border-bottom: none;
}

@media (min-width : 768px) {
	.b-table-box .b-row-item.b-blank {
		border-bottom: 1px solid #DEE1E8;
		/* border-bottom: none; */
		margin-top: -1px;
	}
}

@media (min-width : 1400px) {
	.flex-col-3 .b-row-item.b-blank {
		min-height: 44px;
		border-bottom: 1px solid #DEE1E8;
	}
}

@media (min-width : 1600px) {

	.flex-col-4 .b-row-item.b-blank,
	.flex-col-4 .b-row-item.b-blank.merge-2 {
		min-height: 44px;
		border-bottom: 1px solid #DEE1E8;
	}

	.flex-col-5 .b-row-item.b-blank {
		min-height: 44px;
		border-bottom: 1px solid #DEE1E8;
	}
}

@media (min-width : 1800px) {
	.flex-col-5 .b-row-item.b-blank {
		min-height: 44px;
		border-bottom: 1px solid #DEE1E8;
	}
}



/*****************************************************
	Tab
*****************************************************/
/* tab-style01 */
.nav-tabs.tab-style01 {
	border-bottom: none;
	margin-bottom: 30px;
}

	.nav-tabs.tab-style01 .nav-item {
		margin: 0 5px 5px 0;
	}

	.nav-tabs.tab-style01 .nav-link {
		border: 1px solid var(--common-color-02);
		background-color: #f8f9fd;
		border-radius: 41px;
		padding: 7px 15px;
		font-size: 17px;
		color: #888;
		word-break: initial;
	}

		.nav-tabs.tab-style01 .nav-link:hover,
		.nav-tabs.tab-style01 .nav-link:focus {
			color: var(--main-color-01);
		}

		.nav-tabs.tab-style01 .nav-link.active {
			border-color: var(--main-color-01);
			color: var(--main-color-01);
			background-color: #fff;
		}

@media (min-width: 768px) {
	.nav-tabs.tab-style01 .nav-link {
		padding: 10px 20px;
	}
}

@media (min-width: 992px) {
	.nav-tabs.tab-style01 {
		position: relative;
		background: var(--common-color-04);
		border-top: 1px solid var(--common-color-02);
	}

		.nav-tabs.tab-style01:before,
		.nav-tabs.tab-style01:after {
			position: absolute;
			content: '';
			background-color: var(--common-color-02);
		}

		.nav-tabs.tab-style01:before {
			right: 1px;
			top: 0;
			width: 1px;
			height: 100%;
		}

		.nav-tabs.tab-style01:after {
			left: 0;
			bottom: 0;
			width: 100%;
			height: 1px;
		}

		.nav-tabs.tab-style01 .nav-item {
			width: calc(33.333% + 1px);
			margin: -1px 0 0 -1px;
		}

		.nav-tabs.tab-style01 .nav-link {
			position: relative;
			border-radius: 0;
			padding: 15px 35px 15px 20px;
			margin: 0;
			width: 100%;
			height: 100%;
		}

			.nav-tabs.tab-style01 .nav-link:after {
				content: '\e313';
				font-family: 'Material Symbols Outlined';
				position: absolute;
				top: 12px;
				right: 20px;
				font-size: 19px;
			}

			.nav-tabs.tab-style01 .nav-link:hover:after,
			.nav-tabs.tab-style01 .nav-link:focus:after {
				color: #888;
				font-weight: normal;
			}

			.nav-tabs.tab-style01 .nav-link.active {
				border-width: 2px;
				z-index: 1;
			}

				.nav-tabs.tab-style01 .nav-link.active:hover:after,
				.nav-tabs.tab-style01 .nav-link.active:focus:after {
					font-weight: 600;
					color: var(--common-color-02);
				}
}

@media (min-width: 1300px) {
	.nav-tabs.tab-style01:before {
		right: 0;
	}
}

@media (min-width: 1500px) {
	.nav-tabs.tab-style01 .nav-item {
		width: calc(25% + 1px);
	}
}

@media (min-width: 1600px) {
	.nav-tabs.tab-style01 .nav-item {
		width: calc(20% + 1px);
	}
}

@media (min-width: 1900px) {
	.nav-tabs.tab-style01 .nav-item {
		width: calc(15% + 1px);
	}
}

/* tab-style02 */
.tab-style02 {
	margin-bottom: 20px;
	border-bottom: none;
}

	.tab-style02 .nav-item {
		position: relative;
		margin-right: 15px;
	}

		.tab-style02 .nav-item:after {
			content: '';
			position: absolute;
			top: 13px;
			right: 0;
			width: 5px;
			height: 5px;
			display: block;
			background: #ccc;
		}

		.tab-style02 .nav-item:last-child:after {
			display: none;
		}

	.tab-style02 .nav-link {
		position: relative;
		background: transparent;
		color: #888;
		border: none;
		border-radius: 5px;
		padding: 0 20px 0 0;
		font-size: 19px;
	}

		.tab-style02 .nav-link:hover,
		.tab-style02 .nav-link:focus {
			color: var(--main-color-01);
			font-weight: 500;
		}

		.tab-style02 .nav-link.active {
			color: var(--main-color-01);
			padding-left: 27px;
		}

			.tab-style02 .nav-link.active:after {
				content: '\e86c';
				position: absolute;
				top: -3px;
				left: 0;
				font-family: 'Material Symbols Outlined';
				font-variation-settings: 'FILL' 1;
				font-size: 24px;
			}

	.tab-style02 + .tab-content {
		border-top: 1px solid #ccc;
		padding-top: 30px;
	}


/*****************************************************
	Board
*****************************************************/
.table-box .table-header .total {
	display: flex;
	align-items: center;
}

.table-box .text-total {
	padding: 0 4px;
	color: var(--point-color-01);
	font-size: 112%;
	font-weight: 700;
	line-height: 1;
}

/* non-page */
.non-page.table-board {
	margin-top: 0.5rem;
	padding-top: 1rem;
	border-top: 2px solid #4E4F52;
	border-bottom: 1px solid #D3D5DB;
}

	.non-page.table-board h3 {
		text-align: center;
		padding: 180px 0 4rem;
		margin: 8rem 0 2rem;
		background: url(/images/msg-img02.png) no-repeat center top;
		background-size: 220px;
	}


/* Pagination Box */
.pagination-box {
	margin-top: 20px;
}

.pagination {
	justify-content: center;
}

	.pagination .page-item.page-info {
		display: flex;
		align-items: center;
		padding: 0 10px;
	}

	.pagination .page-link {
		height: 100%;
		padding: 7px 14px;
		color: #7B7F8B;
		border-color: #D3D5DB;
	}

	.pagination .page-item.prev .page-link,
	.pagination .page-item.next .page-link,
	.pagination .page-item.first .page-link,
	.pagination .page-item.last .page-link {
		display: block;
		padding: 7px 10px;
	}

	.pagination .page-item.first .page-link,
	.pagination .page-item.last .page-link {
		padding-left: 11px;
		padding-right: 11px;
	}

		.pagination .page-item.prev .page-link::before,
		.pagination .page-item.next .page-link::before,
		.pagination .page-item.first .page-link::before,
		.pagination .page-item.last .page-link::before {
			content: '';
			display: inline-block;
			font-display: block;
			font-family: 'Material Symbols Outlined';
			font-style: normal;
			font-weight: normal !important;
			font-variant: normal;
			text-transform: none;
			line-height: 1;
			vertical-align: -0.125em;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
		}

	.pagination .page-item.prev .page-link::before {
		content: '\e408';
	}

	.pagination .page-item.next .page-link::before {
		content: '\e409';
	}

	.pagination .page-item.first .page-link::before {
		content: '\eac3';
	}

	.pagination .page-item.last .page-link::before {
		content: '\eac9';
	}

	.pagination .page-item:not(.first):not(.prev):not(.next):not(.last):not(.page-info) {
		display: none;
	}

.page-item.active .page-link {
	border-color: var(--main-color-01);
	background-color: var(--main-color-01);
	color: #fff;
}

.page-link:focus {
	box-shadow: 0 0 0 0.2rem rgba(3, 97, 203, .25);
}

@media (min-width: 420px) {
	.pagination .page-item.page-info {
		display: none !important;
	}

	.pagination .page-item:not(.first):not(.prev):not(.next):not(.last):not(.page-info) {
		display: list-item;
	}
}

/* board */
.b-new,
.b-update {
	display: inline-flex;
	width: 20px;
	height: 20px;
	border-radius: 20px;
	justify-content: center;
	align-items: center;
	font-size: 12px;
	color: #fff;
	margin-left: 6px;
}

.b-new {
	background-color: var(--point-color-01);
}

.b-update {
	background-color: var(--main-color-01);
}

.board .table tbody tr td a {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
}

.board .table tbody tr td .material-symbols {
	font-size: 19px;
}

/* board-view */
.board-view {
	margin-top: .5rem;
	padding-top: 1rem;
	/*border-top: 2px solid #4E4F52;*/
}

.modal .board-view {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}

.board-view .board-view-title {
	border-bottom: 1px solid #D3D5DB;
	padding: 0 0 1.5rem;
}

	.board-view .board-view-title .tit-h2 {
		line-height: 1.3;
		word-break: keep-all;
	}

.board-view .board-info {
	font-size: 0.875rem;
	margin-bottom: 0;
	margin-top: 1rem;
	margin-left: 0;
	padding-left: 0;
	display: flex;
	align-items: center;
}

	.board-view .board-info li {
		color: #666;
		margin-right: 1rem;
	}

		.board-view .board-info li:first-child {
			margin-left: 0;
			padding-left: 0;
		}

@media(min-width: 768px) {
	.board-view .board-info li {
		position: relative;
		display: inline-flex;
		margin-right: .5rem;
		padding-left: .5rem;
		align-items: center;
	}

		.board-view .board-info li:after {
			content: '';
			display: inline-block;
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			width: 1px;
			height: 14px;
			background-color: #C7CFD9;
		}

		.board-view .board-info li:first-child:after {
			display: none;
		}
}

.board-view .board-info li .material-symbols {
	font-size: 16px;
	color: #95A6BC;
	margin-right: 0.2rem;
	line-height: 1;
}

.board-view .board-view-files {
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	border-bottom: 1px solid #D3D5DB;
	padding: 0.75rem 0;
}

	.board-view .board-view-files h5 {
		color: #666;
		font-size: 1rem;
		margin-top: 0;
		display: none;
	}

	.board-view .board-view-files ul {
		margin: 0;
		padding: 0;
	}

		.board-view .board-view-files ul > li {
			position: relative;
		}

			.board-view .board-view-files ul > li > a {
				font-size: 0.875rem;
				letter-spacing: -0.05rem;
				padding-left: 1.25rem;
				position: relative;
			}

				.board-view .board-view-files ul > li > a:after {
					position: absolute;
					top: 3px;
					left: 0;
					content: '\e226';
					display: inline-block;
					font-family: 'Material Symbols Outlined';
					font-style: normal;
					font-size: 16px;
					text-transform: none;
					line-height: 1;
					vertical-align: -0.125em;
					-webkit-font-smoothing: antialiased;
					-moz-osx-font-smoothing: grayscale;
					color: #bfbfbf;
					transform: rotate(45deg);
				}

				.board-view .board-view-files ul > li > a:hover,
				.board-view .board-view-files ul > li > a:focus {
					text-decoration: none;
				}

					.board-view .board-view-files ul > li > a:hover:after,
					.board-view .board-view-files ul > li > a:focus:after {
						color: #0056b3;
					}

@media(min-width: 768px) {
	.board-view .board-view-files h5 {
		display: block;
		padding-left: 10px;
	}

	.board-view .board-view-files ul {
		border-left: 1px solid #D3D5DB;
		padding-left: 1rem;
		margin-left: 2rem;
	}

		.board-view .board-view-files ul > li > a {
			position: relative;
		}
}

.board-view .board-view-cont {
	padding: 2rem 0.5rem 3rem;
}

	.board-view .board-view-cont img {
		max-width: 100%;
	}

.board-view .video-wrapper {
	width: 100%;
	text-align: center;
	background-color: #000;
}

	.board-view .video-wrapper iframe {
		width: 345px;
		height: 194px;
		max-width: 100%;
	}

/* pager */
.pager {
	margin-bottom: 2rem;
}

	.pager .pager-navi {
		display: block;
		margin-bottom: 0;
		color: #124fb6;
		font-size: 15px;
		font-weight: 600;
	}

		.pager .pager-navi .bi::before {
			font-weight: bolder;
		}

	.pager .next {
		text-align: right;
	}

	.pager .pager-title {
		display: inline-block;
		padding: 0 0.125rem;
		font-size: 14px;
	}

	.pager .prev a,
	.pager .next a {
		font-size: 0.875rem;
		display: block;
	}

	.pager a:hover .pager-title,
	.pager a:focus .pager-title {
		text-decoration: underline;
		color: #000;
	}

/* comment */
.board-comment {
}

	.board-comment h3 {
		background: none;
		padding: 0 0 0.6rem 0;
		font-size: 1.5rem;
		color: #555;
		margin-bottom: 0;
		border-bottom: 1px solid #777;
	}

		.board-comment h3 .badge {
			font-size: 0.8rem;
		}

	.board-comment .messages {
		border-top: 1px dotted #bfbfbf;
		padding-top: 1rem;
	}

		.board-comment .messages:first-child {
			border-top: none;
			padding-top: 0;
		}

		.board-comment .messages > .messages {
			position: relative;
			border-top: 1px dotted #bfbfbf;
			border-bottom: none;
			padding-left: 2rem;
			margin-bottom: 1rem;
		}

			.board-comment .messages > .messages:after {
				content: '';
				position: absolute;
				left: 1.3rem;
				top: 1.5rem;
				width: 0.65rem;
				height: 0.7rem;
				border-left: 1px solid #b1b1b1;
				border-bottom: 1px solid #b1b1b1;
			}

		.board-comment .messages .heading {
			font-size: .875rem;
			font-weight: 500;
			margin-bottom: 0.6rem;
		}

			.board-comment .messages .heading .date {
				font-weight: 200;
				color: #7B7F8B;
				margin-left: 0.2rem;
				font-size: 13px;
			}

			.board-comment .messages .heading .comment-btn {
				float: right;
				display: inline-block;
			}

				.board-comment .messages .heading .comment-btn .btn {
					padding: 0 0.1rem;
					background-color: transparent;
					color: #7B7F8B;
				}

		.board-comment .messages .comment {
			font-size: .875rem;
			letter-spacing: -0.05rem;
			line-height: 1.4;
			margin-bottom: 1rem;
		}

.board-bottom {
	border-top: 1px solid #D3D5DB;
	padding-top: 20px;
	margin-top: 3rem;
	position: relative;
}

@media(min-width: 768px) {

	.board-comment .messages .heading,
	.board-comment .messages .comment {
		font-size: 1rem;
	}
}


/* Attach */
.attach {
	display: flex;
	justify-content: space-between;
}

	.attach .drop-zone {
		flex: 0 0 calc(100% - 135px);
		height: 120px;
		background-color: #fafafa;
		text-align: center;
		overflow-y: auto;
	}

		.attach .drop-zone .non-info {
			background: url(/images/drag.png) no-repeat center 26px;
			padding: 4.8rem 0 1rem;
			margin-bottom: 0;
			color: #666;
			font-size: 14px;
		}

	.attach.attached .drop-zone .non-info {
		display: none;
	}

	.attach .attach-btn {
		width: 120px;
	}

		.attach .attach-btn button.btn {
			width: 100%;
			height: 100%;
			background-image: url(/images/upload.png);
			background-repeat: no-repeat;
			background-position: center 26px;
			font-size: 14px;
			padding: 42px 0 0;
		}

	.attach.attached .drop-zone .attach-list {
		padding: 7px 15px 15px;
		margin: 0;
	}

		.attach.attached .drop-zone .attach-list > li {
			position: relative;
			padding: 5px 30px 5px 17px;
			border-top: 1px dashed #dcdcdc;
			text-align: left;
		}

			.attach.attached .drop-zone .attach-list > li:hover,
			.attach.attached .drop-zone .attach-list > li:focus {
				background: #e8e9eb;
			}

			.attach.attached .drop-zone .attach-list > li:first-child {
				border: none;
			}

			.attach.attached .drop-zone .attach-list > li a {
				display: inline-block;
				font-size: 14px;
				color: #333;
			}

				.attach.attached .drop-zone .attach-list > li a:after {
					content: '\e226';
					position: absolute;
					top: 7px;
					left: 0;
					font-family: 'Material Symbols Outlined';
					display: inline-block;
					width: 15px;
					height: 20px;
					font-size: 16px;
					color: #999;
				}

				.attach.attached .drop-zone .attach-list > li a:hover .attach-name,
				.attach.attached .drop-zone .attach-list > li a:focus .attach-name {
					color: #222;
				}

				.attach.attached .drop-zone .attach-list > li a .attach-size {
					color: #666;
					margin-left: 0.4rem;
				}

			.attach.attached .drop-zone .attach-list > li button {
				position: absolute;
				top: 4px;
				right: 0;
				padding: 0;
				font-size: 24px;
				color: #aaa;
				line-height: 1;
				border: none;
			}

				.attach.attached .drop-zone .attach-list > li button:hover,
				.attach.attached .drop-zone .attach-list > li button:focus {
					color: #555;
				}




/*****************************************************
	modal-fav
*****************************************************/
.bookmark-list {
}

	.bookmark-list ul li {
		display: flex;
		width: 100%;
		border-top: 1px solid #dee2e6;
		padding: 10px 20px;
		align-items: center;
		justify-content: space-between;
	}

		.bookmark-list ul li:first-child {
			border-top: none;
		}

	.bookmark-list li button {
		margin-bottom: 0;
	}



/*****************************************************
	site-map
*****************************************************/
.site-map-list {
}

	.site-map-list a {
		display: block;
	}

	.site-map-list > ul > li > a {
		font-size: 1.125rem;
		margin-top: 1rem;
		display: block;
		padding: 0.5rem;
		font-weight: 600;
		text-align: center;
		color: #222;
		background: #f2f3f5;
		border-radius: 50px;
	}

	.site-map-list > ul > li:first-child > a {
		margin-top: 0;
	}

	.site-map-list > ul > li > a:hover,
	.site-map-list > ul > li > a:focus {
		background: #efefef;
	}


@media (min-width: 768px) {
	.site-map-list > ul > li > a {
		font-size: 1.25rem;
		margin-top: 1rem;
		margin-bottom: 0.5rem;
		padding: 0.8rem;
	}

	.site-map-list > ul > li:first-child > a {
		margin-top: 1rem;
	}

	.site-map-list > ul > li > ul > li a {
		font-size: 1.125rem;
	}

	.site-map-list > ul > li > ul > li > ul > li > a {
		font-size: 1rem;
	}

	.site-map-list > ul > li > ul > li > ul > li > ul > li {
		margin: 0.25rem 0;
	}
}


/*****************************************************
	photo
*****************************************************/
.photo-wrap {
	position: relative;
	display: flex;
	-webkit-box-flex: 0;
	max-width: 110px;
	height: 110px;
	margin: 10px;
}

	.photo-wrap .btn {
		position: absolute;
		right: 0;
		bottom: 0;
		width: 40px;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #808895;
		border-radius: 50%;
	}

		.photo-wrap .btn:hover,
		.photo-wrap .btn:focus {
			background: #616770;
		}

		.photo-wrap .btn .material-symbols-outlined {
			color: #fff
		}

.photo {
	position: relative;
	display: block;
	width: 100%;
	height: 0;
	padding-bottom: 100%;
	overflow: hidden;
	border-radius: 50%;
	background: url(/images/non-member02.jpg) no-repeat center;
	background-size: cover;
}

	.photo img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}


/*****************************************************
	detail
*****************************************************/
.detail-con .detail-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 5px;
}

	.detail-con .detail-list li {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		border: 13px solid #ccc;
		width: 140px;
		height: 140px;
		transition: .3s;
	}

		.detail-con .detail-list li:hover {
			box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
		}

		.detail-con .detail-list li.detail-box01 {
			border-color: #cee1f7;
		}

		.detail-con .detail-list li.detail-box02 {
			border-color: #cbeaf7;
		}

		.detail-con .detail-list li.detail-box03 {
			border-color: #cad4f0;
		}

		.detail-con .detail-list li.detail-box04 {
			border-color: #9bbae7;
		}

		.detail-con .detail-list li.detail-box05 {
			border-color: #cfead3;
		}

		.detail-con .detail-list li.detail-box06 {
			border-color: #8FD6D0;
		}

		.detail-con .detail-list li.detail-box07 {
			border-color: #ffe9a7;
		}

		.detail-con .detail-list li.detail-box08 {
			border-color: #ffdcad;
		}

		.detail-con .detail-list li.detail-box09 {
			border-color: #d6c8ea;
		}

		.detail-con .detail-list li.detail-box10 {
			border-color: #ffd3d6;
		}

		.detail-con .detail-list li .tit {
			margin-bottom: 0;
			font-size: 14px;
			font-weight: 500;
			color: #4c4c4c;
			text-align: center;
			width: 100%;
			display: -webkit-box;
			word-wrap: break-word;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			text-overflow: ellipsis;
			overflow: hidden;
			padding: 0 15px;
		}

		.detail-con .detail-list li .num {
			font-family: var(--font-type-01);
			font-weight: bold;
			font-size: 32px;
			line-height: 1;
			color: var(--sub-color-01-light);
			margin: 0;
		}

		.detail-con .detail-list li button {
			border: 1px solid transparent;
			border-top-color: var(--sub-color-01-light);
			border-bottom-color: var(--sub-color-01-light);
			color: var(--sub-color-01-light);
			background-color: transparent;
			padding: 0px 5px;
			font-size: 14px;
			transition: .5s;
		}

			.detail-con .detail-list li button:hover,
			.detail-con .detail-list li button:focus {
				background-color: var(--sub-color-01-light);
				color: #fff;
				border-color: var(--sub-color-01-light);
				border-radius: 50px;
			}

@media (min-width: 576px) {
	.detail-con .detail-list {
		gap: 20px;
	}

		.detail-con .detail-list li {
			width: 185px;
			height: 185px;
			border: 20px solid #ccc;
		}

			.detail-con .detail-list li .tit {
				font-size: 16px;
				padding: 0 20px;
			}

			.detail-con .detail-list li .num {
				font-size: 40px;
				margin: 4px 0;
			}

			.detail-con .detail-list li button {
				padding: 2px 7px;
			}
}

.header-sub {
	display: flex;
	flex-direction: row;
	justify-content: center;
	border: 2px solid #eff0f4;
	border-radius: 10px;
	padding: 15px;
	font-size: 19px;
	margin-bottom: 15px;
	background: #f8f8f8;
	text-align: center;
}

	.header-sub strong {
		color: var(--main-color-01-hover);
	}

.border-box {
	padding: 20px 40px 40px 40px;
	border: 2px solid #eff0f4;
	border-radius: 10px;
}

	.border-box .border-box-header {
		display: flex;
		justify-content: center;
	}


/*****************************************************
	modal
*****************************************************/
@media (min-width: 576px) {
	.modal-xl {
		max-width: 85%;
	}
}

@media (min-width: 992px) {
	.modal-xl {
		max-width: var(--bs-modal-width);
	}
}