@charset "utf-8";

:root {
	--col-theme: #2C4ED5;
	--col-theme-h: #1c3bb5;
	--col-subtheme: #2C83D5;
	--col-subtheme-h: #111f33;

	--col-wt: #FFF;
	--col-bk: #222;
	--col-gray: #C6C6C6;
	--col-darkgray: #555;
	--col-red: #FF3838;
	--col-blue: #2D74F6;

	--col-bd-gray: #DDD;

	--trans-25: all .25s ease-in-out;
	--trans-45: all .45s cubic-bezier(0.645, 0.045, 0.355, 1);

	--hd-height: 5.6rem;
	--ft-height: 7rem;
	--aside-wd: 26rem;
}

html {font-size: 62.5%;}
body {background: var(--col-wt); color: var(--col-bk); font-family: 'NanumSquareRound', sans-serif; font-size: 1.6rem; font-weight: 400; letter-spacing: 0; overflow: hidden auto;}
@media (min-width: 992px) {
	html {font-size: 70.4%;} /* 18px */
}



/*============================================================*/
/* common */
/*============================================================*/
/* width */
.wd_auto {width:auto !important}

/* align */
.df-2 {display: flex; gap: .8rem;}
.df-2 > * {flex: 0 0 auto; width: calc(50% - .4rem);}

/* list */
.btm-box {margin-top: 1rem; padding: 1.4rem 1rem; background: #FBFBFB; border: 1px solid var(--col-bd-gray); border-radius: .8rem;}
.btm-box h6 {margin-bottom: .6rem; font-family: 'Pretendard'; color: var(--col-red); font-size: 14px; font-weight: 700;}
.ul-dotted > li {position: relative; padding-left: 1rem; font-size: 12px; line-height: 1.45;}
.ul-dotted > li::before {content: ""; position: absolute; top: 0.6rem; left: 0; display: inline-block; width: .3rem; aspect-ratio: 1; border-radius: 50%; background: var(--col-bk);}
.ul-dotted > li + li {margin-top: 0.4rem;}



/*============================================================*/
/* button */
/*============================================================*/
.comment {position: relative; margin-top: .8rem; padding-left: .8rem; color: var(--col-darkgray); font-size: 1.4rem;}
.comment::before {content: "*"; position: absolute; top: 0.3rem; left: 0; line-height: 1;}
.comment strong {color: var(--col-red);}

.ellipsis {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-break: break-all;}
.ellipsis.line2 {-webkit-line-clamp: 2;}

/* color */
.col-red {color: var(--col-red);}



/*============================================================*/
/* button */
/*============================================================*/
.btn-sm {position: relative; display: inline-flex; justify-content: center; align-items: center; text-align: center; min-width: 6.1rem; height: 2.8rem; padding: 0 1rem; border-radius: 0; font-size: 14px; font-family: 'NanumSquareRoundBold'; line-height: 1;}
.btn-md {position: relative; display: inline-flex; justify-content: center; align-items: center; gap: 0.2rem; text-align: center; min-width: 10rem; height: 4rem; padding: 0 1rem; border-radius: 0; font-size: 1.6rem; font-weight: 500; line-height: 1;}
.btn-lg {position: relative; display: inline-flex; justify-content: center; align-items: center; gap: 0.2rem; text-align: center; width: 100%; height: 5rem; padding: 0 1rem; border-radius: 0; font-size: 1.6rem; font-family: 'NanumSquareRoundBold'; font-weight: 500; line-height: 1;}

.btn-theme {background: var(--col-theme); color: #fff; transition: var(--trans-25);}
.btn-subtheme {background: var(--col-subtheme); color: #fff; transition: var(--trans-25);}
.btn-wt {background: var(--col-wt); transition: var(--trans-25);}
.btn-gray {background: #A7AED1; color: #fff; transition: var(--trans-25);}
.btn-red {background: var(--col-red); color: #fff; transition: var(--trans-25);}
.btn-blue {background: var(--col-blue); color: #fff; transition: var(--trans-25);}
.btn-yellow {background: var(--col-yellow); color: #fff; transition: var(--trans-25);}

.btn-bd-theme {border: 1px solid var(--col-theme); color: var(--col-theme); font-family: 'NanumSquareRoundBold'; transition: var(--trans-25);}
.btn-bd-gray {border: 1px solid #A7AED1; transition: var(--trans-25);}

.btn-excel {background: #02723b; color: #fff;}
.btn-download {display: flex; justify-content: center; align-items: baseline; gap: .5rem; max-width: 100%; padding: .25rem 1rem; border-radius: .25rem; border: 1px solid var(--col-bd-gray); color: var(--col-darkgray); font-family: 'NanumSquareRoundBold'; font-size: 1.4rem; font-weight: 500; transition: var(--trans-25);}

@media (hover: hover) and (pointer: fine) {
	.btn-theme:hover {background: var(--col-theme-h);}
	.btn-wt:hover {color: var(--col-theme);}

	.btn-bd-theme:hover {border-color: var(--col-theme-h); color: var(--col-theme-h);}
}

/*============================================================*/
/* state */
/*============================================================*/
.state > * {min-width: 7.2rem;}
.bg-theme {background: var(--col-theme); color: #fff; user-select: none;}
.bg-gray {background: var(--col-gray); color: #fff; user-select: none;}
.bg-bd-bk {border: 1px solid var(--col-bk); user-select: none;}


/* ============================================================
* search
* ============================================================ */
.sch_box {display: flex; justify-content: space-between; gap: .5rem; margin-bottom: 2rem;}
.sch_box input[type='search'] {width: 300px; padding: 0 1rem;}
.sch_box button {border: 1px solid var(--col-bd-gray); height: 4rem; aspect-ratio: 1; transition: var(--trans-25);}
@media (hover: hover) and (pointer: fine) {
	.sch_box button:hover {border-color: var(--col-theme);}
}


/* ============================================================
* tab
* ============================================================ */
.termPage .sub-container {overflow: hidden;}

/* 탭 메뉴 */
.tabs .tab-menu {display: flex; align-items: center; margin-bottom: 2rem;}
.tabs .tab-menu a {flex: 1 0 0; display: flex; justify-content: center; align-items: center; height: 4.6rem; padding: 1rem 2rem; border: 1px solid var(--col-theme); background: var(--col-wt); color: var(--col-theme); font-size: 1.4rem; transition: var(--trans-25);}
.tabs .tab-menu a.on {background: var(--col-theme); color: var(--col-wt); font-family: 'NanumSquareRoundBold'; font-weight: 700;}
@media (hover: hover) and (pointer: fine) {
	.tabs .tab-menu a:hover {background: var(--col-wt); color: var(--col-theme);}
}

/* 탭 콘텐츠 */
.tab-content {height: 660px; height: calc(100dvh - var(--hd-height) - 10rem); overflow: hidden auto;}
.tab-content::-webkit-scrollbar {width: 10px;}
.tab-content::-webkit-scrollbar-thumb {background-color: var(--col-gray); border: 2px solid var(--col-wt); border-radius: 100px; cursor: pointer;}



/* ============================================================
* mobile-not-allowed
* ============================================================ */
.mobile-not-allowed {position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; background: #fff; font-weight: 700; overflow: hidden; z-index: 1;}




/* ============================================================
* modal
* ============================================================ */
/* 모달 배경 스타일 */
.modal {
	display: none; /* 기본적으로 숨김 */
	position: fixed;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0, 0, 0, 0.4);
}

/* 모달 콘텐츠 스타일 */
.modal-content {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	background-color: #fff;
	padding: 20px;
	border: 1px solid #888;
	width: 80%;
	max-width: 400px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.modal-content h3 {font-family: 'NanumSquareRoundBold'; font-weight: 500;}
.modal-content .mypage-list {margin-top: 1.8rem;}
.modal-content .mypage-list ul,
.modal-content .mypage-list li {border: 0;}
.modal-content .mypage-list li a::after,
.modal-content .mypage-list li button::after {display: none;}