@charset "UTF-8";

/* ************************
*	Layout css
*
*	Author : gplus
*	Release Date : 2024-11-25
*
* *************************
*/

/*
*	font size (16px 기준)
*	계산법 : px 기준 / 16
*
*	2.5rem = 40px
*	1rem = 16px
*	.9375rem = 15px
*	.875rem = 14px
*	.8125rem = 13px
*	.75rem = 12px
*	.6875rem = 11px
*	.625rem = 10px
*
*/

:root {
	--header-bg-white: #ffffff;
}

/* header */
#header { position: sticky; top: 0; background-color: var(--header-bg-white); z-index: 26; }

#header .header-login { position: relative; display: flex; align-items: center; justify-content: flex-end; max-width: 90rem; height: 3.125rem; margin: 0 auto; }
#header .hidden-login {  margin-right: 1rem; }
#header .header-login ul { position: relative; display: inline-flex; align-items: center; }
#header .header-login ul > li > p,
#header .header-login ul > li > p > span { font-size: .875rem; color: #767676; }
#header .header-login ul > li > p i { margin-right: .3125rem; font-size: 1rem; }
#header .header-login ul > li > a { position: relative; display: block; font-size: .875rem; color: #767676; }
#header .header-login ul > li + li > a { padding-left: .9375rem; }
#header .header-login ul > li + li > a::before { 
	position: absolute;
	content: '';
	top: 5px;
	left: 7px;
	width: 1px;
	height: .625rem;
	background-color: #767676;
}

#header .login-popup-form {
	position: absolute;
	top: 100%;
	right: 0;
	height: 0;
	padding: 0;
	overflow: hidden;
	opacity: 0;
	visibility: hidden; 
	background-color: rgba(255, 255, 255, .5);
	border: 1px solid #C9C9C9;
	border-radius: 0 0 22px 22px;
	backdrop-filter: blur(33px);
	-webkit-backdrop-filter: blur(33px);
	transition: .25s;
	z-index: 100;
}

#header .login-popup-form.on { height: auto; padding: 3.875rem 3.4375rem; opacity: 1; visibility: visible; }

#header .login-popup-form .login-form-content { display: flex; gap: .625rem; }
#header .login-popup-form .login-form-content .input-form { width: 16rem; }
#header .login-popup-form .login-form-content .title { display: block; margin-bottom: .625rem; font-size: 1rem; font-weight: 500; color: #092F69; }
#header .login-popup-form .login-form-content #loginForm {
	display: flex;
	flex-direction: column;
	height: 100%;
}

#header .login-popup-form .login-form-content .login-input { 
	display: block; 
	width: 100%; 
	height: 2.5rem;
	padding: 0 .625rem;
	background-color: var(--header-bg-white); 
	border: 1px solid #CCCCCC; 
	border-radius: 5px;
	font-family: 'PretendardGOV', sans-serif; 
	font-size: .875rem; 
}

#header .login-popup-form .login-form-content .login-input + .login-input { margin-top: 1rem; }
#header .login-popup-form .login-form-content .login-btn { 
	display: block; 
	width: 100%;
	height: 2.8125rem;
	margin-top: auto; 
	background: linear-gradient(100deg, #1268FA, #1DBA8F);
	border-radius: 5px;
	font-size: 1rem;
	font-weight: 500;
	color: #ffffff;
	font-family: 'PretendardGOV', sans-serif; 
}

#header .login-popup-form .login-form-content .login-util { display: flex; align-items: center; justify-content: center; gap: .625rem; margin-top: 1.25rem; }
#header .login-popup-form .login-form-content .login-util > a { position: relative; font-size: .875rem; color: #555555; }
#header .login-popup-form .login-form-content .login-util > a + a::before {
	position: absolute;
	content: '';
	top: 0;
	left: 0;
}

#header .header-inner { border-top: 1px solid #E8E8E8; }
#header .header-contents { display: flex; align-items: center; justify-content: space-between; max-width: 90rem; margin: 0 auto; height: 5rem; }
#header .header-contents .logo a { text-decoration: none; }
#header .header-lst { position: relative; display: flex; align-items: center; height: 100%; }
#header .header-lst > ul { display: flex; gap: 70px; }
#header .header-lst > ul > li.hidden > a { display: none; }
#header .header-lst > ul > li > a { font-size: 1.3125rem; font-weight: 500; color: #333333; }
#header .header-util { position: relative; display: flex; align-items: center; gap: .9375rem; }
#header .header-util .util {
	position: relative;
	display: inline-flex; 
	align-items: center; 
	justify-content: center; 
	width: 2.625rem; 
	height: 2.625rem; 
	background-color: transparent; 
	border-radius: 100%;
	font-size: 1.375rem;
}

#header .header-util .util:hover, #header .header-util .util:focus { text-decoration: none; }
#header .header-util .util.allmenu { background-color: #0F6BE2; color: var(--header-bg-white); }
#header .header-util .util.favorite-btn { background-color: #F5A62F; }
#header .header-util .util-favorite-list { position: absolute; top: calc(100% + .625rem); left: -6rem; z-index: 99; display: none; }
#header .header-util .util-favorite-list.active { display: block; }
#header .header-util .util-favorite-list .favorite-list-container {
	padding: 9px 11px;
	background-color: #fff;
	border: 1px solid #A595F8;
}

#header .header-util .util-favorite-list .list-search-container { border: 1px solid #A99DE5; border-radius: 4px; }
#header .header-util .util-favorite-list .list-search-container .title { width: 13.125rem; height: 2.1875rem; background-color: #7661E3; border-radius: 4px 4px 0 0; color: #fff; text-align: center; line-height: 2.1875rem; }
#header .header-util .util-favorite-list .search-input { display: flex; width: 13.125rem; }
#header .header-util .util-favorite-list .search-input input[type='text'] { width: calc(100% - 2.1875rem); padding: 0 .25rem; border: 0 none; border-radius: 0 0 0 4px; }
#header .header-util .util-favorite-list .search-input .search-btn { width: 2.1875rem; height: 2.1875rem; background-color: #fff; border-radius: 0 0 4px 0; color: #7661E3; }

#header .header-util .util-favorite-list .menu-list > li { display: flex; align-items: center; padding: 14px 0; }
#header .header-util .util-favorite-list .menu-list > li:last-child { padding: 14px 0 0 ;}
#header .header-util .util-favorite-list .menu-list > li + li { border-top: 1px solid #DDDDDD; }
#header .header-util .util-favorite-list .menu-list > li span { font-size: .8125rem; color: rgba(0, 0, 0, .8); }
#header .header-util .util-favorite-list .menu-list > li .favorite-status { position: relative; width: 25px; height: 25px; margin-left: auto; background-color: #fff; }
#header .header-util .util-favorite-list .menu-list > li .favorite-status::after {
	position: absolute;
	content: '\F186';
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-family: 'remixicon';
	font-size: 1.25rem;
	font-weight: 300;
	color: #d4d4d4;
}
#header .header-util .util-favorite-list .menu-list > li .menuBookmarkDeleteBtn::after {
	position: absolute;
	content: '\F186';
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-family: 'remixicon';
	font-size: 1.25rem;
	font-weight: 300;
	color: #F68C2E;
}

#header .header-util .util-favorite-list .menu-list > li .favorite-status.active::after { color: #F68C2E; }

#header .hidden-menu { display: none; }

#header .sub-menu-container { position: absolute; top: 100%; left: -4rem; z-index: 99; }
#header .sub-menu-container .sub-menu { 
	position: relative;
	display: flex;
	height: 0;
	overflow: hidden;
	background-color: #fff;
}

#header .sub-menu-container .sub-menu::before {
	position: absolute;
	content: '';
	top: 0;
	left: -100%;
	width: 1000%;
	height: 0;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
	z-index: -1;
}

#header .sub-menu-container.active .sub-menu { height: auto; overflow: visible; }
#header .sub-menu-container.active .sub-menu::before { height: 17.5625rem; overflow: visible; }

#header .sub-menu-container .sub-menu ul { min-width: 9.0625rem; padding: 1rem; }
#header .sub-menu-container .sub-menu ul + ul { border-left: 1px solid #E8E8E8; }
#header .sub-menu-container .sub-menu ul > li.sub-menu-item {
	display: block;
	min-width: 4.3125rem;
	font-size: 1rem;
	font-weight: 500;
	color: #666666;
	cursor: pointer;
	white-space: nowrap;
}

#header .sub-menu-container .sub-menu ul > li + li { margin-top: 1rem; }

@media all and (max-width: 1200px) {
	#header .header-contents { max-width: calc(100% - 2.5rem); }
	#header .header-lst > ul { gap: 40px; }
	#header .sub-menu-container { left: 50%; transform: translateX(-50%); }
}

@media all and (max-width: 1024px) {
	#header .header-lst { display: none; }
}


/* body */
#wrap { overflow: hidden auto; }
.section-inner { width: 80rem; margin: 0 auto; }
.section-quickmenu { margin-top: 3.4375rem; }
.section-banner { margin-top: 3.4375rem; }
.section-education { margin-top: 4rem; }

/* Visual */
.visual-container { display: grid; grid-template-columns: 1fr 25.625rem; gap: 3.125rem; margin-top: .875rem; }
.visual-container .visual { position: relative; padding: 4rem 2.8rem 3.8rem; border-radius: 22px;
}
.visual-container .visual::before {
	position: absolute;
	content: '';
	top: 0;
	right: 0;
/* 	width: 100vw; */
	width: 825px;
	height: 100%;
	background: url('../../../images/publishing/main/mainbgimg.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center right;
/* 	border-radius: 0 22px 22px 0; */
	border-radius: 22px;
	z-index: -1;
}

.visual-container .visual .visual-title { margin-bottom: 1.0625rem; font-size: 3.75rem; font-weight: 700; color: #fff; text-shadow: 0 0 10px rgba(0, 0, 0, .16); letter-spacing: -.3px; padding-left: 20px; margin-top: 75px;}
.visual-container .visual .visual-subtitle { display: block; font-size: 1.875rem; font-weight: 500; color: #FBD61E; text-shadow: 0 3px 7px rgba(0, 0, 0, .2); padding-left: 20px;}
.visual-container .visual .visual-util { position: relative; display: flex; gap: 4px; margin-top: 7.3rem; gap: 10px;}
.visual-container .visual .visual-util .util-item { 
	flex: 1 0 15.625rem;
	padding: 2.5rem 1.6875rem;
	background-color: rgba(255, 255, 255, .3); 
	box-shadow: 0 0 10px rgba(0, 0, 0, .1);
	backdrop-filter: blur(30px);
	-webkit-backdrop-filter: blur(30px);
}

.visual-container .visual .visual-util .util-item:first-of-type { border-radius: 20px 0 0 20px; }
.visual-container .visual .visual-util .util-item:last-of-type { border-radius: 0 20px 20px 0; }
.visual-container .visual .visual-util .util-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; font-size: 1.5625rem; font-weight: 700; color: #dbfbff; }
.visual-container .visual .visual-util .util-content { font-size: 1rem; font-weight: 500; color: #ffffff; word-break: keep-all; letter-spacing: 0; line-height: 1.3;}
/* .visual-container .visual .visual-util .util-item:first-of-type .util-content { max-width: 10.125rem; } */
.visual-container .visual .visual-util .util-item:nth-of-type(2) .util-btn { margin-top: 2.8125rem; }
.visual-container .visual .visual-util .util-btn { 
	display: inline-flex; 
	align-items: center; 
	justify-content: center; 
	gap: .625rem; 
	width: 9.75rem; 
	height: 2.75rem; 
	margin-top: 1.875rem;
	background: #ffffff; 
	border-radius: 22px;
	font-size: .9375rem; 
	color: #111111;
	transition: .25s;
}

.visual-container .visual .visual-util .util-btn:hover,
.visual-container .visual .visual-util .util-btn:focus { background: linear-gradient(100deg, #FF7F1D, #A742FE); color: #ffffff; text-decoration: none; }

.visual-container .notice-chart { position: relative; }
.visual-container .notice { padding: 1.25rem 2.25rem; background-color: #F2F8FF; border: 1px solid #CEDDF2; border-radius: 22px; }
.visual-container .notice .title-wrap { display: flex; align-items: center; gap: 4px; }
.visual-container .notice hr { display: block; width: 100%; height: 1px; margin: .75rem 0 1.125rem; background-color: #DDDDDD; visibility: visible; }
.visual-container .notice .title-wrap strong { font-size: 1.5625rem; font-weight: 700; color: #525552; }

.visual-container .notice-content { display: flex; }
.visual-container .notice ul > li:first-child { margin-bottom: 1.5625rem; }
.visual-container .notice ul > li:first-child .notice-content { gap: 1.25rem; }
.visual-container .notice ul > li:first-child .notice-content .date {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 4.875rem;
	height: 4.875rem;
	background-color: #fff;
	border-radius: 10px;
	box-shadow: 0 0 6px rgba(0, 0, 0, .1); 
	color: #777777;
	flex-direction: column;
}

.visual-container .notice-content .cont { width: calc(100% - 6.125rem); }
.visual-container .notice-content .cont a { display: block; }
.visual-container .notice-content .cont .title {
	display: block;
	overflow: hidden; 
	white-space: nowrap; 
	text-overflow: ellipsis; 
	font-size: 1.1875rem; 
	font-weight: 700; 
	color: #333333;
	word-break: keep-all; 
}

.visual-container .notice ul > li:first-child .notice-content { align-items: center; }
.visual-container .notice ul > li:first-child .notice-content .cont .title { 
	display: -webkit-box;
	overflow: hidden;
	white-space: normal;
	text-overflow: ellipsis;
	font-size: 1.1875rem;
	font-weight: 700;
	color: #333333;
	word-break: keep-all;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-height: 1.5;
}
.visual-container .notice ul > li:not(:first-child) { position: relative; padding-left: .625rem; }
.visual-container .notice ul > li:not(:first-child)::before { 
	position: absolute; 
	content: ''; 
	top: .75rem;
	left: 0;
	width: 3px; 
	height: 3px;
	background-color: #555;
	border-radius: 100%;
}

.visual-container .notice ul > li:not(:first-child) .notice-content { flex-direction: column; }
.visual-container .notice ul > li:not(:first-child) .notice-content .cont { order: 1; width: 100%; }
.visual-container .notice ul > li:not(:first-child) .notice-content .date { order: 2; }
.visual-container .notice ul > li:not(:first-child) .notice-content .cont .title { font-size: 1.0625rem; font-weight: 500; color: #444444; }
.visual-container .notice ul > li:not(:first-child) .notice-content .date { font-size: .875rem; font-weight: 400; color: #777777; }
.visual-container .notice ul > li:not(:first-child) + li { margin-top: .75rem; }

.visual-container .chart-container { display: flex; flex-direction: column; gap: 1.25rem; margin-top: .625rem; padding: 2rem; background-color: #F5F5F5; border: 1px solid #DDDDDD; border-radius: 22px; }
.visual-container .chart-container .chart-item { display: flex; justify-content: space-between; width: 100%; height: 7.5rem; padding: 1.4375rem 1.875rem 0 1rem; background-color: #fff; border-radius: 10px; box-shadow: 0 0 20px rgba(0, 0, 0, .16); }
.visual-container .chart-container .chart-item img { max-width: 8.75rem; }
.visual-container .chart-container .chart-content { text-align: right; }
.visual-container .chart-container .chart-content .title { display: block; margin-bottom: 6px; font-size: 1.0625rem; font-weight: 500; color: #222222; }
.visual-container .chart-container .chart-content strong { font-size: 1.9375rem; font-weight: 700; color: #222222; }
.visual-container .chart-container .chart-content strong + span { font-size: 1.0625rem; font-weight: 500; color: #222222; }

/* visual :: login after */
.visual-after-container { position: relative; }
.visual-after-container .visual-content { 
	position: relative;
	width: 100%;
	min-height: 31.25rem;
	padding: 1rem 0 4.375rem;
	background: url('../../../images/publishing/main/after_visual_bg.jpg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.visual-after-container .visual-content::after {
	position: absolute;
	content: '';
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom, #73B2FB, #3688F2);
	z-index: -1;
}

.visual-after-container .visual-btn-container { width: 80rem; margin: 0 auto 1rem; text-align: right; }
.visual-after-container .visual-btn-container .survey-btn {
	display: inline-flex;
	align-items: center;
	height: 2.25rem;
	padding: 0 .75rem;
	line-height: 2.25rem; 
	text-align: center; 
	background-color: transparent; 
	border: 1px solid #F2F8FF; 
	border-radius: 18px; 
	font-size: 1rem; 
	font-weight: 500; 
	color: #EDF1F7; 
}

.visual-after-container .visual-btn-container .survey-btn i { margin-right: .5rem; font-size: 1.25rem; color: #F5BA2F; }

.visual-after-container .visual-grid { display: grid; grid-template-columns: 1fr 22.0625rem; gap: 1.3125rem; width: 80rem; margin: 0 auto; }
.visual-after-container .visual-info { display: flex; flex-wrap: wrap; gap: 1.3125rem; }
.visual-after-container .visual-info .visual-info-item { flex: 1 0 50%; max-width: 27.625rem; height: 19.0625rem; padding: 2.0625rem; background-color: #fff; border-radius: 20px; }
.visual-after-container .visual-info .visual-info-item.info {
	display: flex;
	flex-direction: column;
	padding: 2.5rem 2.0625rem;
	background-color: #7FD3F6;
	backdrop-filter: blur(50px);
	-webkit-backdrop-filter: blur(50px);
	box-shadow: 0 0 10px rgba(0, 0, 0, .16);
}

.visual-after-container .visual-info .visual-info-item.notice { padding: 1.5625rem 2.0625rem 2.0625rem; background-color: #F2F8FF; }
.visual-after-container .visual-info .visual-info-item.calendar { background-color: rgba(54, 136, 242, .85); backdrop-filter: blur(30px); box-shadow: 0 0 10px rgba(0, 0, 0, .16); }
.visual-after-container .visual-info .visual-info-item.todo { background-color: #415774; box-shadow: 0 0 10px rgba(0, 0, 0, .16); }


.visual-after-container .visual-info .info-title-container { display: flex; align-items: center; gap: 1.125rem; }
.visual-after-container .visual-info .info-title-container .title h6 { margin-bottom: 2px; font-size: 1.375rem; font-weight: 500; color: #fff; }
.visual-after-container .visual-info .info-title-container .title span { display: block; font-size: 1rem; font-weight: 300; color: #070D11; }
.visual-after-container .visual-info .info-title-btn-container {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: .875rem .5rem;
	margin-top: auto;
}

.visual-after-container .visual-info .info-title-btn-container > a {
	display: block;
	height: 3.75rem;
	background-color: rgba(37, 94, 151, .56);
	font-size: 1.125rem;
	font-weight: 500;
	color: #fff;
	text-align: center;
	line-height: 3.75rem;
}

.visual-after-container .visual-info .info-title-btn-container > a:first-of-type { border-radius: 20px 5px 20px 5px; }
.visual-after-container .visual-info .info-title-btn-container > a:nth-of-type(2) { border-radius: 5px 20px 5px 20px; }
.visual-after-container .visual-info .info-title-btn-container > a:nth-of-type(3) { border-radius: 5px 20px 5px 20px; }
.visual-after-container .visual-info .info-title-btn-container > a:nth-of-type(4) { border-radius: 20px 5px 20px 5px; }

.visual-after-container .notice .title-wrap { display: flex; align-items: center; gap: 4px; }
.visual-after-container .notice hr { display: block; width: 100%; height: 1px; margin: 4px 0 .625rem; background-color: #DDDDDD; visibility: visible; }
.visual-after-container .notice .title-wrap strong { font-size: 1.5625rem; font-weight: 700; color: #525552; }

.visual-after-container .notice-content { display: flex; }
.visual-after-container .notice ul > li:first-child { margin-bottom: .9375rem; }
.visual-after-container .notice ul > li:first-child .notice-content { gap: 1.25rem; }
.visual-after-container .notice ul > li:first-child .notice-content .date {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 4.875rem;
	height: 4.875rem;
	background-color: #fff;
	border-radius: 10px;
	box-shadow: 0 0 6px rgba(0, 0, 0, .1); 
	color: #777777;
	flex-direction: column;
}

.visual-after-container .notice-content .cont { width: calc(100% - 6.125rem); }
.visual-after-container .notice-content .cont a { display: block; }
.visual-after-container .notice-content .cont .title {
	display: -webkit-box;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 1.1875rem;
	font-weight: 700;
	color: #333333;
	word-break: keep-all;
}

.visual-after-container .notice ul > li:first-child .notice-content { align-items: center; }
.visual-after-container .notice ul > li:first-child .notice-content .cont .title { 
	display: -webkit-box;
	white-space: normal;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-height: 1.5;
}

.visual-after-container .notice ul > li:not(:first-child) { position: relative; padding-left: .625rem; }
.visual-after-container .notice ul > li:not(:first-child)::before { 
	position: absolute; 
	content: ''; 
	top: .75rem;
	left: 0;
	width: 3px; 
	height: 3px;
	background-color: #555;
	border-radius: 100%;
}

.visual-after-container .notice ul > li:not(:first-child) .notice-content { flex-direction: column; }
.visual-after-container .notice ul > li:not(:first-child) .notice-content .cont { order: 1; width: 100%; }
.visual-after-container .notice ul > li:not(:first-child) .notice-content .date { order: 2; margin-top: 2px; }
.visual-after-container .notice ul > li:not(:first-child) .notice-content .cont .title { font-size: 1.0625rem; font-weight: 500; color: #444444; }
.visual-after-container .notice ul > li:not(:first-child) .notice-content .date { font-size: .875rem; font-weight: 400; color: #777777; }
.visual-after-container .notice ul > li:not(:first-child) + li { margin-top: .75rem; }


.visual-after-container .kakao-contents { position: relative; }
.visual-after-container .kakao-contents .title-wrap { display: flex; align-items: center; margin-bottom: 1.25rem; }
.visual-after-container .kakao-contents .title-wrap strong { margin-left: .625rem; font-size: 1.5625rem; font-weight: 500; color: #FBFC07; }
.visual-after-container .kakao-contents .title-wrap .more-link { margin-left: auto; font-size: 1.5625rem; font-weight: 600; color: #FBFC07; }
.visual-after-container .kakao-contents ul > li { display: flex; align-items: center; padding: .78125rem 0; border-bottom: 1px solid #DDDDDD; }
.visual-after-container .kakao-contents ul > li .icon { margin-right: 6px; }
.visual-after-container .kakao-contents ul > li .name { font-size: 1rem; font-weight: 500; color: #F6F6A5; }
.visual-after-container .kakao-contents ul > li .tel, 
.visual-after-container .kakao-contents ul > li .date { margin-left: auto; font-size: .875rem; font-weight: 400; color: #F2F8FF; }

.visual-after-container .todo .todo-util { display: flex; align-items: center; justify-content: flex-end; }
.visual-after-container .todo .todo-util .todo-link { font-size: 1.875rem; color: #989898; }
.visual-after-container .todo .todo-util .todo-link:hover,
.visual-after-container .todo .todo-util .todo-link:focus { text-decoration: none; }
.visual-after-container .todo .todo-util .todo-link.prev { margin-right: 1.625rem; }
.visual-after-container .todo .todo-util .todo-link.next { margin-left: 1.625rem; }
.visual-after-container .todo .todo-util strong { font-size: 2.5rem; font-weight: 500; color: #F6F9FE; }
.visual-after-container .todo .todo-util strong .todoYear { 
	display: inline-block; 
	vertical-align: middle;
	margin-right: .875rem; 
	font-size: .9375rem; 
	font-weight: 700; 
	color: #D5D4B1; 
}

/* 2024.12.03 jslee 추가 */
.visual-after-container .todo .todo-list {
	height: 85%;
	overflow-x: auto;
	scrollbar-width: none;
}

.visual-after-container .todo .todo-list ul > li { display: flex; align-items: center; padding: .8125rem 0; }
.visual-after-container .todo .todo-list ul > li + li { border-top: 1px dotted #A1BAC6; }
.visual-after-container .todo .todo-list ul > li > span { min-width: 3.125rem; margin-right: .625rem; font-size: 1.0625rem; font-weight: 600; color: #E9E9E9; }
.visual-after-container .todo .todo-list ul > li > p { 
	max-width: calc(100% - 3.75rem); 
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 1.125rem; 
	font-weight: 400; 
	color: #E8F2F3; 
}

.visual-after-charts .charts-item { padding: 28px 25px 28px .5625rem; border-radius: 20px 20px 20px 5px; box-shadow: 0 0 10px rgba(0, 0, 0, .16); backdrop-filter: blur(30px); }
.visual-after-charts .charts-item[data-main-link] { cursor: pointer; }
.visual-after-charts .charts-item + .charts-item { margin-top: 1.0625rem; }
/* .visual-after-charts .charts-item:first-of-type { background-color: rgba(13, 194, 151, .8); } */
/* .visual-after-charts .charts-item:nth-of-type(2) { background-color: rgba(146, 187, 10, .8); } */
/* .visual-after-charts .charts-item:nth-of-type(3) { background-color: rgba(1, 182, 229, .8); } */
.visual-after-charts .charts-item:first-of-type { background-color: #30b3b9; }
.visual-after-charts .charts-item:nth-of-type(2) { background-color: #78a968; }
.visual-after-charts .charts-item:nth-of-type(3) { background-color: #21a1e0; }
.visual-after-charts .charts-item .charts-title-wrap { display: flex; align-items: center; justify-content: flex-end; gap: 5px; margin-bottom: .625rem; }
.visual-after-charts .charts-item .charts-title-wrap span { font-size: 22px; font-weight: 400; color: #E1FFF6; text-align: right; }

.visual-after-charts .charts-item .charts-title-wrap img { width: 5.625rem; }

.visual-after-charts .charts-item .charts-count { display: block; padding-right: 22px; font-size: 2.6875rem; font-weight: 700; color: #fff; text-align: right; }
.visual-after-charts .charts-item .charts-count span { margin-left: .625rem; font-size: 1.3125rem; font-weight: 500; }


/* favorite */
.favorite-menu-container { position: relative; width: 80rem; margin: -1.875rem auto 4rem; padding: 2.4375rem; background-color: #F2F4F8; border-radius: 20px; z-index: 1; }
.favorite-menu-container .title { display: block; margin-bottom: 1.5625rem; font-size: 2rem; font-weight: 600; color: #333; text-align: center; }
.favorite-menu-container .favorite-lst { 
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.875rem;
	max-width: 63.125rem; 
	margin: 0 auto; 
}

.favorite-menu-container .favorite-lst .favorite-item { 
	position: relative; 
	width: 100%; 
	height: 3.125rem; 
	padding: .9375rem .9375rem .9375rem 2.5rem; 
	background-color: #fff; 
	border: 1px solid #DDDDDD; 
	border-radius: 5px; 
	cursor: pointer;
}

.favorite-menu-container .favorite-lst .favorite-item::after {
	position: absolute;
	content: '\F186';
	top: 50%;
	left: .9375rem;
	transform: translateY(-50%);
	font-family: 'remixicon';
	font-size: 1.25rem;
	color: #F68C2E;
}

.favorite-menu-container .favorite-lst .favorite-item span { display: block; font-size: 1.125rem; font-weight: 400; color: #000; }


/* quick menu */
.quick-menu-container { padding: 2.5rem 0 3.25rem; background-color: #F5F7FA; border-radius: 20px; }
.quick-menu-container .title { margin-bottom: 1.875rem; font-size: 2rem; font-weight: 500; color: #333333; text-align: center; }
.quick-menu-container .quick-menu {
	position: relative;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 6.25rem;
	max-width: 70rem;
	margin: 0 auto;
}

.quick-menu-container .quick-menu .icon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 6.5rem;
	height: 6.5rem;
	margin: 0 auto;
	border-radius: 20px 0 20px 0;
}

.quick-menu-container .quick-menu .icon:hover { box-shadow : 0 10px 6px rgba(3, 3, 3, .2); }

.quick-menu-container .quick-menu-item:first-of-type .icon { background: #00A081; }
.quick-menu-container .quick-menu-item:nth-of-type(2) .icon { background: #F68C2E; }
.quick-menu-container .quick-menu-item:nth-of-type(3) .icon { background: #F8AF0D; }
.quick-menu-container .quick-menu-item:nth-of-type(4) .icon { background: #BDD82C; }
.quick-menu-container .quick-menu-item:nth-of-type(5) .icon { background: #2BBDD1; }

.quick-menu-container .quick-menu-item:first-of-type:hover .icon { background: linear-gradient(110deg, #00A081, #097863); }
.quick-menu-container .quick-menu-item:nth-of-type(2):hover .icon { background: linear-gradient(110deg, #F68C2E, #CE6E1A); }
.quick-menu-container .quick-menu-item:nth-of-type(3):hover .icon { background: linear-gradient(110deg, #F8AF0D, #DB9E16); }
.quick-menu-container .quick-menu-item:nth-of-type(4):hover .icon { background: linear-gradient(110deg, #BDD82C, #A1BC07); }
.quick-menu-container .quick-menu-item:nth-of-type(5):hover .icon { background:linear-gradient(110deg, #2BBDD1, #319FAE); }

.quick-menu-container .quick-menu-item .quick-menu-link strong { display: block; margin-top: .625rem; font-size: 1.125rem; font-weight: 500; color: #000000; text-align: center; }

/* user :: login after */
.user-quick-container .user-quick-wrap {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2.5rem;
	width: 80rem; 
	margin: 0 auto; 
	padding: 3rem 4.3125rem; 
	background-color: #EFF6FC; 
	border-radius: 20px; 
}

.user-quick-container .user-quick-wrap .uq-title-container { display: flex; align-items: center; margin-bottom: .8125rem; }
.user-quick-container .user-quick-wrap .uq-title-container .title { margin-left: 9px; font-size: 1.5625rem; font-weight: 500; color: #333333; }
.user-quick-container .user-quick-wrap .uq-title-container .more-link { margin-left: auto; }
.user-quick-container .user-quick-wrap .uq-title-container .more-link:hover,
.user-quick-container .user-quick-wrap .uq-title-container .more-link:focus { text-decoration: none; }
.user-quick-container .user-quick-wrap .uq-title-container .more-link i { font-size: 1.25rem; color: #000000; }

.user-quick-container .user-quick-wrap .uq-list { border-top: 1px solid #000000; }
.user-quick-container .user-quick-wrap .message-item a { position: relative; display: flex; align-items: center; padding: .78125rem 0; padding-left: .78125rem; border-bottom: 1px solid #DDDDDD; }
.user-quick-container .user-quick-wrap .message-item a::before {
	position: absolute;
	content: '';
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: 4px;
	height: 4px;
	background-color: #555555;
	border-radius: 100%;
}
.user-quick-container .user-quick-wrap .message-item .message-cont { font-size: 1em; font-weight: 400; color: #333333; }
.user-quick-container .user-quick-wrap .message-item .date { margin-left: auto; font-size: .875rem; color: #777777; }
.user-quick-container .user-quick-wrap .document-list > li { display: flex; align-items: center; }
.user-quick-container .user-quick-wrap .document-list > li > a { position: relative; margin-left: .625rem; padding: .78125rem 0; font-size: 1rem; font-weight: 400; color: #333333; }
.user-quick-container .user-quick-wrap .document-list > li:last-child { border-bottom: 1px solid #DDDDDD; }
.user-quick-container .user-quick-wrap .manual-link { 
	display: flex; 
	align-items: center; 
	justify-content: space-between;
	padding: 7.5px 1.5625rem;
	background-color: #FFFFFF;
	border: 1px solid #E1E1E1;
	border-radius: 5px;
}

.user-quick-container .user-quick-wrap .manual-link:hover,
.user-quick-container .user-quick-wrap .manual-link:focus { text-decoration: none; }

.user-quick-container .user-quick-wrap .manual-link:not(:first-of-type) { margin-top: 3px; }
.user-quick-container .user-quick-wrap .manual-link:first-of-type { margin-top: .8125rem; }
.user-quick-container .user-quick-wrap .manual-link span,
.user-quick-container .user-quick-wrap .manual-link i { font-size: 1.125rem; font-weight: 500; color: #444444; }


/* user guide */
.user-main-container { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); }
.user-main-container > div { position: relative; height: 23.375rem; }
.user-main-container > div::after {
	position: absolute;
	content: '';
	top: 0;
	width: 100%;
	height: 23.375rem;
}

.user-main-container .user-content { width: 36.25rem; }
.user-main-container .user-content hr { display: block; width: 100%; height: 1px; visibility: visible; margin: 1.125rem 0 1.8125rem; background-color: #ffffff; }
.user-main-container .user-content p { font-size: 1.25rem; color: #444; word-break: keep-all; }
.user-main-container .user-content .user-link { 
	display: inline-flex; 
	align-items: center; 
	justify-content: center; 
	gap: .625rem; 
	width: 9.75rem; 
	height: 2.75rem; 
	margin-top: 1.875rem;
	background: #ffffff; 
	border-radius: 22px;
	font-size: .9375rem; 
	color: #111111;
	transition: .25s;
}

.user-main-container .user-content .user-link:hover,
.user-main-container .user-content .user-link:focus { background: linear-gradient(100deg, #FF7F1D, #A742FE); color: #ffffff; text-decoration: none; }

.user-main-container .title { font-size: 2rem; font-weight: 500; color: #333333; letter-spacing: -.8px; }

.user-main-container .user-education { padding: 3.125rem 3.6875rem 2.0625rem 0; background-color: #D8EAFF; }
.user-main-container .user-education::after { left: -100%; background-color: #D8EAFF; }
.user-main-container .user-education .title { color: #0060CF; }
.user-main-container .user-education p { max-width: 26.125rem; }
.user-main-container .user-education .img { position: absolute; right: 4.3125rem; bottom: 2.0625rem; }

.user-main-container .user-guide { padding: 3.125rem 0 2.0625rem 3.8125rem; background-color: #E7E3FF; }
.user-main-container .user-guide::after { right: -100%; background-color: #E7E3FF; }
.user-main-container .user-guide .title { color: #98148B; }
.user-main-container .user-guide p { max-width: 23.1875rem; }
.user-main-container .user-guide .img { position: absolute; right: 0; bottom: 2.0625rem; }

/* education */
.education-video-container { margin-top: 4rem; background-color: #F4F6F5; }
.education-video-container hr { display: block; width: 100%; height: 1px; margin: 1.125rem 0 1.875rem; background-color: #fff; visibility: visible; }
.education-video-container .inner { padding: 3.125rem 0; }
.education-video-container .education-title { position: relative; }
.education-video-container .education-title strong { font-size: 2rem; font-weight: 500; color: #0060CF; }
.education-video-container .education-title .more-link {
	position: absolute;
	bottom: 0;
	right: 0;
	font-size: .9375rem;
	color: #111111;
}

.education-video-container .education-video-area { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4375rem; }
.education-video-container .education-video-area .video-item { position: relative; cursor: pointer; }
.education-video-container .education-video-area .video-item img { width: 100%; height: 12.4375rem; }
.education-video-container .education-video-area .video-item .icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.education-video-container .education-video-area .video-item .icon i { font-size: 1.25rem; }

/* fixed wrap right: calc(50% - 49.375rem); */
.fixed-wrap { position: fixed; top: 62%; right: 20px; transform: translateY(-50%); z-index: 1000; }
.fixed-wrap .fixed-container { padding: .75rem .625rem; background-color: #fff; border-radius: 50px; box-shadow: 0 0 10px rgba(0, 0, 0, .16); }
.fixed-wrap .fixed-link { 
	display: flex; 
	align-items: center; 
	justify-content: center; 
	flex-direction: column; 
	width: 5rem; 
	height: 5rem; 
	border-radius: 100%; 
}

.fixed-wrap .fixed-link:hover, .fixed-wrap .fixed-link:focus { text-decoration: none; }
.fixed-wrap .fixed-link + .fixed-link { margin-top: .625rem; }
.fixed-wrap .fixed-link span { display: block; margin-top: 5px; font-size: .875rem; font-weight: 500; }

.fixed-wrap .fixed-link[data-click-document] { background-color: #5EB18D; color: #fff; }
.fixed-wrap .fixed-link[data-click-edu] { background-color: #CEC10C; color: #fff; }
.fixed-wrap .fixed-link[data-click-manual] { background-color: #0063DC; color: #fff; }
.fixed-wrap .fixed-link[data-click-top] { border: 1px solid #AAAAAA; color: #333333; }
.fixed-wrap .fixed-link[data-click-top] span { margin-top: 0; }
.fixed-wrap .fixed-link[data-click-top] i { font-size: 1.25rem; transform: rotate(-90deg); }

/* info call */
.info-call-container { margin-top: 4rem; border-top: 1px solid #AEAEAE; }
.info-call-container .info-call { display: flex; align-items: center; gap: 1.875rem; padding: 1.5625rem 0; }
.info-call-container .info-call .icon { 
	display: inline-flex; 
	flex-direction: column;
	align-items: center; 
	justify-content: center;
	gap: 5px;
	width: 7.5rem; 
	height: 10.75rem; 
	background-color: #DEB823; 
	border-radius: 10px; 
	color: #fff; 
	text-align: center; 
}

.info-call-container .info-call .icon i { font-size: 1.5625rem; font-weight: 300; }
.info-call-container .info-call .icon span { display: block; font-size: 1rem; font-weight: 500; }
.info-call-container .info-call .info-call-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; width: calc(100% - 9.375rem); }
.info-call-container .info-call .info-call-list .call-list-item {
	width: 100%;
	height: 5.125rem;
	padding: 7px 1.125rem 5px;
	background-color: #F6FAFB;
	border-radius: 5px;
	display: flex;
	justify-content: center;
	flex-direction: column;
}

.info-call-container .info-call .info-call-list .call-list-item * { display: block; }
.info-call-container .info-call .info-call-list .call-list-item strong { font-size: .9375rem; font-weight: 500; color: #777777; }
.info-call-container .info-call .info-call-list .call-list-item span { font-size: .9375rem; font-weight: 500; color: #000000; }

/* footer */
#footer, #footer .footer-content { width: 100%; border-top: 1px solid #E1E1E1; }
#footer .footer-top ul > li { display: inline-block; }
#footer .footer-top ul > li + li > a { margin-left: 2.5rem; }
#footer .footer-top ul > li > a { display: inline-block; padding: 1.3125rem 0; font-size: 1rem; font-weight: 500; color: #111111; }
#footer .footer-content .cont { display: flex; align-items: center; padding: 2.5rem 0; }
#footer .footer-content .footer-address * { display: block; margin-left: 1.875rem; font-size: .875rem; color: #383838; }
#footer .footer-content .footer-address span + span { margin-top: 9px; }

/* Site Map */
body.sitemap { overflow: hidden; }
.data-sitemap-container { 
	position: fixed; 
	top: 3.125rem; 
	left: 50%; 
	transform: translateX(-50%); 
	z-index: 1200; 
	visibility: hidden; 
	opacity: 0;
	transition: .25s;
}

.data-sitemap-container.on { visibility: visible; opacity: 1; }
.data-sitemap-container .sitemap-wrap { 
	position: relative;
	width: 100vw;
	height: 100vh;
	max-width: 100%;
	overflow: hidden;
	background: linear-gradient(180deg, #3D84DB, #2A6EC4);
}

.data-sitemap-container .sitemap-inner { max-width: 90rem; margin: 0 auto; padding: 3.625rem 0; }
.data-sitemap-container .sitemap-title .title { font-size: 2.25rem; font-weight: 500; color: #D5F0FE; }
.data-sitemap-container .sitemap-close {
	position: absolute;
	top: 2.5rem;
	right: 10rem;
	font-size: 3rem;
	font-weight: 300;
	color: #ECECF6; 
}

.data-sitemap-container .sitemap-close:hover { text-decoration: none; }
.data-sitemap-container .sitemap-content {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 6.25rem;
	margin-top: 7.125rem;
}

.data-sitemap-container .sitemap-item .tit { display: block; margin-bottom: .875rem; font-size: 1.875rem; font-weight: 500; color: #fff; }
.data-sitemap-container .sitemap-item .sitemap-list { display: block; padding: 1.125rem 0; border-top: 2px solid #FFFFFF; border-bottom: 1px solid rgba(255, 255, 255, .37); }
.data-sitemap-container .sitemap-item .sitemap-list > li > a { display: block; font-size: 1.0625rem; font-weight: 500; color: #fff; }
.data-sitemap-container .sitemap-item .sitemap-list > li + li > a { margin-top: 1rem; }

@media all and (max-width: 1024px) {
	.data-sitemap-container .sitemap-content { 
		grid-template-columns: repeat(3, 1fr);
		padding: 0 4rem;
	}
	.data-sitemap-container .sitemap-close { right: 5rem; }
	.data-sitemap-container .sitemap-title .title { padding: 0 4rem; }
	.data-sitemap-container .sitemap-item .tit { font-size: 1.75rem; }
}

/* Content */
.data-content-container { width: 84.375rem; margin: 0 auto; padding: 2.5rem 0; }
.data-content-container.full { width: 100%; max-width: calc(100% - 18rem); }

/* Sub */
.data-subvisual-container { 
	background: url(../../../images/publishing/sub/subvisual.png) center;
	background-size: cover;
	border-radius: 0 0 38px 38px;
}

.data-subvisual-container .subvisual-area { 
	position: relative;
	display: flex; 
	align-items: center; 
	justify-content: center;
	width: 90rem;
	height: 7.5rem;
	margin: 0 auto;
	border-radius: 0 0 38px 38px;
}

.data-subvisual-container .subvisual-area .title { margin-bottom: 0; font-size: 2.5rem; font-weight: 500; color: #FBB854; }
.data-subvisual-container .subvisual-area .title .subtitle {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	padding-left: 1rem;
	border-left: 1px solid #FFFFFF;
	font-size: 1.5625rem; 
	font-weight: 500; 
	color: #FBDA3A; 
}

.data-subvisual-container .subvisual-area .subvright {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translate(0, -50%);
	padding: 0; 
	font-size: 1rem;
}

.data-subvisual-container .subvisual-area .subvright .location01 { gap: .6875rem; }
.data-subvisual-container .subvisual-area .subvright .location02 { margin: 0; font-size: 1rem; }
.data-subvisual-container .subvisual-area .subvright .location02 i { font-size: 1.25rem; font-weight: 300; color: #D1D4DB; }

.data-submenu-depth-container { width: calc(100% - 2.5rem); margin: 0 auto; background-color: #F2F4F8; border-radius: 40px; }
.data-submenu-depth-container .submenu-depth-list { 
	display: flex; 
	align-items: center; 
	justify-content: center;
	gap: 3.25rem;
	max-width: 84.375rem; 
	height: 5rem;
	margin: 0 auto; 
}

.data-submenu-depth-container .submenu-depth-list .sub-text.active {
	width: 12rem;
	height: 3.375rem;
	background: linear-gradient(120deg, #0E66FC, #24A0FF); 
	border-radius: 27px; 
	font-size: 1.0625rem;
	font-weight: 500;
	color: #fff;
	text-align: center;
	line-height: 3.375rem;
}

.data-submenu-depth-container .submenu-depth-list .sub-text a { font-size: 1.0625rem; font-weight: 500; color: #333333; }


/* 공지사항 추가 적용 (년.월.일) 2024-12-03 */

.visual-container .notice ul > li .notice-content .date .noticeYear_Month { font-size: .875rem; font-weight: 500; color: #777777; } 
.visual-container .notice ul > li .notice-content .date .noticeDay { font-size: 2.5rem; font-weight: 700; color: #333333; } 

.visual-after-container .notice ul > li .notice-content .date .noticeYear_Month { font-size: .875rem; font-weight: 500; color: #777777; } 
.visual-after-container .notice ul > li .notice-content .date .noticeDay { font-size: 2.5rem; font-weight: 700; color: #333333; }