@charset "utf-8";


/* 시스템이용 안내문구 /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* 페이지 준비중 */
.ready_page * {line-height:1.4; word-break:keep-all;}
.ready_page {width:100%; min-height:70rem; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:40px; text-align:center; margin:0 auto; overflow:hidden;}
.ready_page span {width:120px; height:120px; display:flex; justify-content:center; align-items:center; text-align:center; border-radius:50%; background:linear-gradient(to bottom, #3a7ecd, #6da4e3); box-shadow:0 0 10px rgba(0,0,0,0.1);}
.ready_page span img {height:60px; padding:5px 0 0 5px;}
.ready_page h3 {font-size:48px; color:var(--black);}
.ready_page p {font-size:18px;}
.ready_page p ~ p {margin-top:5px;}

@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1025px){
	#userSub .ready_page span {width:100px; height:100px;}
	#userSub .ready_page span img {height:50px;}
	#userSub .ready_page h3 {font-size:36px;}
	#userSub .ready_page p {font-size:16px;}
}
@media screen and (max-width: 769px){
}
@media screen and (max-width: 481px){
}

/* 로딩화면 */
.loader {position:fixed; top:0; left:0; z-index:9999; width:100%; height:100%; background:var(--white);}
.loader .load_area {width:100%; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);}
.loader .load_area > *:not(.load_animation) {letter-spacing:-0.03em; padding:0 30px; text-align:center; word-break:keep-all;}
.loader .load_area h3 {font-size:20px; font-weight:bold; color:var(--fontcolor1);}
.loader .load_area p {font-size:15px; color:var(--fontcolor3); margin-top:12px;}
.loader .load_area .load_animation {position:relative; width:60px; height:60px; margin:0 auto 30px auto;}
.loading {
	--b: 10px; width:60px; margin:0 auto; aspect-ratio:1; border-radius:50%; padding:1px; background:conic-gradient(#0000 10%,#f13e3e) content-box;
	-webkit-mask: repeating-conic-gradient(#0000 0deg,#000 1deg 20deg,#0000 21deg 36deg), radial-gradient(farthest-side,#0000 calc(100% - var(--b) - 1px),#000 calc(100% - var(--b)));
	-webkit-mask-composite: destination-in; mask-composite: intersect; animation:spin 1.2s infinite steps(10);
}
@keyframes spin {
	to{transform:rotate(1turn);}
}


/* 문구 공통영역 /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* 타이틀 */
.sub_title1 {font-size:20px; font-weight:bold; color:var(--fontcolor1); margin-bottom:25px; word-break:keep-all;}
.sub_title2 {position:relative; font-size:18px; font-weight:bold; color:var(--fontcolor1); margin-bottom:20px; padding:0 0 0 30px; word-break:keep-all;}
.sub_title2::after {content:""; display:block; position:absolute; left:0; top:8px; width:20px; height:12px; background:url('../images/common/icn_title.svg') no-repeat;}
.sub_title3 {position:relative; font-size:16px; font-weight:bold; color:var(--fontcolor1); padding-left:12px; margin-bottom:15px; word-break:keep-all;}
.sub_title3::after {content:""; display:block; position:absolute; left:0; top:0; width:5px; height:5px; border-radius:50%; background:var(--maincolor);}

/* 안내문구(좌-우) */
.info_sect {display:flex; justify-content:flex-end; align-items:center; gap:20px; margin-bottom:20px;}
.info_sect > * {display:flex; flex-wrap:wrap; align-items:center; gap:5px; font-size:15px; margin-top:0 !important; margin-bottom:0 !important;}
.info_sect .left {margin-right:auto;}
.info_sect .left > * {margin-top:0 !important; margin-bottom:0 !important;}

@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1025px){
	#userSub .info_sect {flex-direction:column;}
	#userSub .info_sect:not(.left) {align-items:flex-end;}
}
@media screen and (max-width: 769px){
}
@media screen and (max-width: 481px){
}

/* 중요-경고 문구 */
.warn {position:relative; font-size:14px; padding:2px 0 2px 20px; margin-bottom:15px; word-break:keep-all;}
.warn::after {content:"\f06a"; display:block; position:absolute; left:0; top:3px; font-family:"FontAwesome"; font-size:13px; color:var(--red);}
.warn span, .warn strong {color:var(--red);}
.warn em {letter-spacing:0.02em; font-weight:bold; color:var(--fontcolor1);}

/* 테이블 내부 안내문구 */
.caution {position:relative; display:inline-block; font-size:14px; letter-spacing:0; margin:0 10px; padding-left:10px; word-break:keep-all;}
.caution::after {content:"*"; position:absolute; left:0; top:0; color:var(--red);}
.caution.long {display:block; margin:10px 0 0 0;}
.caution span, .caution strong {font-weight:500; color:var(--fontcolor1);}

/* 목록카운트 */
.count {font-size:14px; color:var(--fontcolor3); margin-bottom:15px;}
.count strong {font-family:var(); font-size:16px; color:var(--fontcolor1);}

/* 내용 리스트 */
.sub_list > li {position:relative; font-size:15px; line-height:1.4; padding:5px 0 5px 20px; word-break:keep-all;}
.sub_list > li::after {content:""; display:block; position:absolute; left:0; top:14px; width:8px; height:1px; background:var(--fontcolor3);}
.sub_list > li > ul {margin-top:10px;}
.sub_list > li > ul > li {position:relative; font-size:15px; padding:6px 0 6px 14px;}
.sub_list > li > ul > li::after {content:""; display:block; position:absolute; left:0; top:14px; width:4px; height:4px; border-radius:50%; background:var(--maincolor);}

@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1025px){
	#userSub .sub_list * {font-size:14px;}
}
@media screen and (max-width: 769px){
}
@media screen and (max-width: 481px){
}

/* 파일리스트 */
.file_list li {display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:14px; padding:4px 0;}
.file_list a {font-size:14px; font-weight:normal; text-decoration:none;}
.file_list a:has(img) img {margin-right:3px;}
.file_list a:hover {color:var(--fontcolor1); text-decoration:none;}
.file_list button {display:inline-flex; justify-content:center; align-items:center; width:16px; height:16px; color:var(--white); border-radius:3px; background:var(--red);}
.file_list button i {font-size:8px;}

/* 박스영역 */
.boxarea {font-size:15px; line-height:1.4; padding:15px; margin:20px 0; border-radius:3px; border:1px solid #ddd; background:#f7f8fc;}

/* 설명박스 */
.explain_box * {word-break:keep-all;}
.explain_box {width:100%; margin-bottom:2rem; border-radius:5px; border:1px solid #ccc; background:var(--white); overflow:hidden;}
.explain_box > strong {display:block; font-size:16px; font-weight:bold; color:#74757e; padding:12px 15px; border-radius:5px 5px 0 0; border-bottom:1px solid #ccc;}
.explain_box > div {font-size:14px; padding:12px 15px; border-radius:0 0 5px 5px; background:#f7f8fc;}
.explain_box > div ul li {position:relative; font-size:14px; line-height:1.2; color:var(--fontcolor1); padding:5px 0 5px 12px;}
.explain_box > div ul li:after {content:""; display:block; position:absolute; left:0; top:12px; width:3px; height:3px; border-radius:50%; background:var(--red); opacity:0.8;}
.explain_box b {color:var(--fontcolor1);}


/* 공통영역 ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* search */
.search_box {
	display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:15px 30px; padding:15px; margin-bottom:30px;
	border-radius:10px; border:1px solid #ddd; background:var(--white); /* box-shadow:1px 1px 8px 1px rgba(0,0,0,0.1); */ overflow:hidden;
}
.search_box label {font-size:13px; color:var(--fontcolor1); margin:0;}

.search_box input[type="text"]:-webkit-autofill, 
.search_box input[type="text"]:-webkit-autofill:hover, 
.search_box input[type="text"]:-webkit-autofill:focus, 
.search_box input[type="text"]:-webkit-autofill:active {
	transition:background-color 5000s ease-in-out 0.5s;
	-webkit-text-fill-color:#727272 !important;
} /*크롬 input 자동완성 배경색 제거 */

.search_box input[type="text"], .search_box select {min-width:100px;}

.search_box .form_row {flex:1; display:flex; flex-direction:column; gap:15px;}
.search_box .row {display:flex; flex-wrap:wrap; gap:10px;}
.search_box .row .items {display:flex; flex-wrap:wrap; flex-direction:column; gap:5px;}
.search_box .row .items span {display:flex;}

.search_box .row .wide {flex:1;} /* 넓게 */
.search_box .row .wide input[type="text"] {min-width:150px;}

.search_box .row .equal {min-width:200px; display:grid; grid-template-columns:repeat(auto-fit, minmax(20%, 1fr)); gap:15px;} /* 동일간격 */
.search_box .row .equal span {flex-direction:column; gap:5px;}

.search_box .row .words {flex:1;}  /* 상세검색 */
.search_box .row .words span {flex:1; display:grid; grid-template-columns:120px 1fr; gap:5px;}

.search_box .row .dates span {display:grid; grid-template-columns:100px 25px 10px 100px 25px; align-items:center; gap:3px;}  /* 날짜 */
.search_box .row .dates span em {font-size:14px; text-align:center;}
.search_box .row .dates.only span {grid-template-columns:100px 25px;} /* 단일달력일 경우 */

.search_box .submit {display:flex; justify-content:center; align-items:center;}
.search_box .submit button {
	font-family:var(--fontPre); width:120px; height:40px; display:flex; justify-content:center; align-items:center; gap:10px; 
	font-size:16px; line-height:0; letter-spacing:1px; font-weight:500; color:var(--white); text-align:center; border-radius:5em; background:var(--fifthcolor);
}
.search_box .submit button i {font-size:10px; margin-top:2px; opacity:0.6;}

@media screen and (max-width :1200px) {
}
@media screen and (max-width :1025px) {
}
@media screen and (max-width :769px) {
	#userSub .search_box {flex-direction:column; align-items:flex-start;}
	#userSub .search_box > * {width:100%;}
	
	#userSub .search_box label {font-size:14px;}
	#userSub .search_box .row {flex-direction:column;}
	
	#userSub .search_box .row .dates span {grid-template-columns:1fr 25px 10px 1fr 25px;}  /* 날짜 */
	#userSub .search_box .row .dates.only span {grid-template-columns:1fr 25px;} /* 단일달력일 경우 */
	
	#userSub .search_box .submit button {width:100%; height:36px; font-size:14px; border-radius:5px;}
	#userSub .search_box .submit button i {display:none;}
}
@media screen and (max-width :481px) {
}

/* 고용24 API 검색레이아웃 */
.search_work24 {display:flex; flex-wrap:wrap; align-items:center;}
.search_work24 span {display:flex; flex-wrap:wrap; align-items:center; gap:5px;}
.search_work24 select {width:12rem;}
.search_work24 input[type="text"] {flex:1; width:25rem;}
.search_work24 button {
	width:3.6rem; height:3.6rem; display:flex; justify-content:center; align-items:center; gap:1rem; font-size:1.4rem; line-height:0; letter-spacing:1px; font-weight:500; 
	color:rgba(255,255,255,0.8); text-align:center; border-radius:0 5px 5px 0; background:var(--fifthcolor);
}
.search_work24 button span {display:none;}

@media screen and (max-width :1200px) {
}
@media screen and (max-width :1025px) {
}
@media screen and (max-width :769px) {
}
@media screen and (max-width :481px) {
	.search_sect {width:100%; align-items:flex-start;}
	.search_sect * {width:100%;}
	.search_work24 {width:100%; flex-direction:column;}
	.search_work24 span {flex-direction:column;}
	.search_work24 select {width:100%;}
	.search_work24 input[type="text"] {flex:auto; width:100%;}
	.search_work24 button {width:100%; height:4.5rem; margin-top:5px; border-radius:5px;}
	.search_work24 button i {display:none;}
	.search_work24 button span {display:block; font-size:1.4rem; line-height:0; letter-spacing:1px; font-weight:500; color:var(--white); text-align:center;}
}

/* 탭 - 커뮤니티용 */
.notice_tab {display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:30px;}
.notice_tab li {flex:auto;}
.notice_tab li button {
	width:100%; min-width:100px; height:45px; display:flex; justify-content:center; align-items:center; font-size:15px; font-weight:bold; 
	color:#6b7383; text-align:center; word-break:keep-all; padding:10px 15px; border-radius:3px; border:2px solid #ddd; background:var(--white);
}
.notice_tab li button.on {color:var(--fourthcolor); border-color:var(--fourthcolor);}

@media screen and (max-width :1200px) {
}
@media screen and (max-width :1025px) {
}
@media screen and (max-width :769px) {
	#userSub .notice_tab {display:grid; grid-template-columns:repeat(3, 1fr);}
}
@media screen and (max-width :481px) {
	#userSub .notice_tab {grid-template-columns:repeat(2, 1fr);}
}

/* 서약 */
.vow * {line-height:1.4; color:var(--fontcolor1); word-break:keep-all;}
.vow {margin-top:30px;}
.vow h1 {font-size:22px; font-weight:bold; text-align:center; margin:30px 0;}
.vow h2 {font-size:20px; font-weight:500; text-align:center; margin:20px 0;}
.vow h3 {font-size:18px; text-align:center; padding:20px;}
.vow p {font-size:16px; text-align:center; padding:20px;}
.vow .user_sign {display:flex; flex-direction:column; gap:8px; padding:0 2px;}
.vow .user_sign div {display:flex; justify-content:flex-end; align-items:center; gap:8px; font-size:18px;}
.vow .user_sign div label {margin:0;}
.vow .user_sign div span {font-style:italic; font-weight:bold; margin-left:5px;}
.vow .jikin_vow {
	user-drag:none; -ms-user-drag:none; -moz-user-drag:none; -webkit-user-drag:none; -o-user-drag:none; /* 드래그 막기 */
	user-select:none; -ms-user-select:none; -moz-user-select:none; -webkit-user-select:none; -o-user-select:none; /* 선택 막기 */
	pointer-events:none; /* 마우스클릭 이벤트 막기-다운로드 등 방지 */
}

@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1025px){
}
@media screen and (max-width: 769px){
	#userSub .vow p br {display:none;}
	#userSub .vow .jikin_vow {width:50px;}
}
@media screen and (max-width: 481px){
}

/* 동의서 */
.agree_box * {word-break:keep-all;}
.agree_box {display:flex; flex-direction:column; gap:40px; padding:40px; border-radius:5px; border:1px solid #ccc; background:var(--white);}
.agree_box h3 {display:flex; flex-wrap:wrap; align-items:center; gap:15px; font-size:20px; font-weight:bold; color:var(--fontcolor1);}
.agree_box h3 span {
	width:30px; height:30px; display:flex; justify-content:center; align-items:center; 
	font-family:var(--fontPre); font-size:14px; line-height:0; font-weight:bold; color:var(--white); border-radius:50%; background:var(--subcolor);
}
.agree_box .agree_head {display:flex; flex-direction:column; gap:15px;}
.agree_box .agree_head p {font-size:15px;}

.agree_box .warn {margin:0;}
.agree_box .warnbox {gap:0; padding:15px 20px; border-radius:5px; background:var(--bgred);}
.agree_box .warnbox .warn ~ .warn {margin-top:5px;}

.agree_cont {display:flex; flex-direction:column; gap:20px;}
.agree_cont strong {font-size:16px; font-weight:500; color:var(--fontcolor1);}
.agree_cont > div {display:flex; flex-direction:column; gap:20px; font-size:15px; color:var(--fontcolor2); padding:25px; border-radius:5px; border:1px solid #eee; background:#f9f9f9;}
.agree_cont > div dl {display:flex; flex-direction:column; gap:8px;}
.agree_cont > div dl dt {font-weight:500; color:var(--fontcolor1);}
.agree_cont > div dl dd {display:flex; flex-direction:column; gap:8px; font-size:15px;}
.agree_cont > div ol li, .agree_cont ul li {padding:4px 0; line-height:1.4;}
.agree_cont > div ol li > ol li, .agree_cont ol li > ul li {color:var(--fontcolor2);}
.agree_cont > div ul > li {position:relative; padding-left:15px;}
.agree_cont > div ul > li::after {content:""; display:block; position:absolute; left:0; top:16px; width:6px; height:1px; background:var(--fontcolor3);}

.agree_check {display:flex; flex-direction:column; gap:20px;}
.agree_check_box {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; font-size:15px; padding:20px; border-radius:5px; background:#f2f3f8;}
.agree_check_box p {color:var(--fontcolor1);}
.agree_check_box span {display:flex; align-items:center; gap:15px;}
.agree_check_box span label {margin:0; cursor:pointer;}

@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1025px){
}
@media screen and (max-width: 769px){
	#userSub .agree_box {gap:25px; padding:25px;}
}
@media screen and (max-width: 481px){
}

/* 설문조사 */
.survey_wrapper { font-size:15px; }
.survey_wrapper * {word-break:keep-all;}
.survey_wrapper {overflow:hidden;}
.survey_wrapper .survey_title {font-size:18px; text-align:center; font-weight:bold; color:var(--white); padding:12px 20px; background:var(--darkblue);}
.survey_wrapper .survey_text {font-size:16px; text-align:left; padding:20px; background:#f7f8fc; word-break: break-word;}
.survey_wrapper .survey_ex {position:relative; font-size:14px; color:#828aa0; padding:0 0 10px 18px; margin-bottom:10px; border-bottom:1px dashed #ddd;}
.survey_wrapper .survey_ex::after {content:"※"; display:inline-block; position:absolute; left:0;}

.survey_wrapper > ul {padding:20px; background:#ecf4fd;}
.survey_wrapper > ul > li {padding:20px; margin-bottom:20px; background:var(--white);}
.survey_wrapper > ul > li:last-child {margin:0;}
.survey_wrapper > ul > li > h4 {font-size:16px; font-weight:bold; color:var(--fontcolor1); margin-bottom:15px;}
.survey_wrapper > ul > li > div.short_answer label {display:inline-block;}
.survey_wrapper > ul > li > div.long_answer label {display:block;}
.survey_wrapper > ul > li > div label {font-size:15px; margin:6px 10px 6px 0; color:var(--fontcolor2);}
.survey_wrapper > ul > li > div label.ect {display:block; width:100%;}
.survey_wrapper > ul > li > div label.ect input[type="text"] {margin:5px;}

@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1025px){
}
@media screen and (max-width: 769px){
	#userSub .survey_wrapper > ul > li > div.short_answer label {display:block;}
}
@media screen and (max-width: 481px){
}

/* 캘린더[달력] */
.canledar_plan {width:100%; display:flex; flex-direction:column; gap:20px; padding:30px; border:1px solid #ccc; background:var(--white);}
.calendar_info {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:20px;}

.calendar_dates {display:flex; flex-wrap:wrap; align-items:center; gap:20px; margin-bottom:20px;} /* 년도-월 이동 */
.calendar_dates > div {display:flex; flex-wrap:wrap; align-items:center; gap:0 20px;}
.calendar_dates > div button {font-size:24px; color:rgba(0,0,0,0.3);}
.calendar_dates > div span {display:flex; align-items:center; gap:10px; font-size:18px; color:var(--fontcolor1);}
.calendar_dates > div span:has(span) {gap:20px;}
.calendar_dates > div strong {font-family:var(--fontPre); font-size:30px; font-weight:bold;}

.calendar table {width:100%; table-layout:fixed; border:1px solid #ccc;}
.calendar table thead th {font-size:15px; font-weight:500; color:var(--fontcolor1); text-align:center; padding:12px 8px; border-bottom:1px solid #ccc; background:#f7f8fc;}
.calendar table thead th ~ th {border-left:1px solid #ddd;}
.calendar table thead th br {display:none;}
.calendar table tbody th {font-size:15px; font-weight:500; color:var(--fontcolor1); text-align:center; padding:12px 8px; border-right:1px solid #ddd; border-bottom:1px solid #ccc; background:#f7f8fc;}
.calendar table tbody td {height:100px; min-height:auto; vertical-align:top; font-size:15px; padding:10px 8px; border-bottom:1px solid #ddd; background:var(--white);}
.calendar table tbody td ~ td {border-left:1px solid #ddd;}
.calendar table tbody td p {font-family:var(--fontPre); font-size:16px; color:var(--fontcolor1); font-weight:bold; margin-bottom:8px;}

.calendar.schedule table tbody td {height:45px;} /* 스케줄용 */

.calendar .dept_bg {display:flex; justify-content:center; align-items:center; font-size:14px; text-align:center; text-decoration:none; padding:8px 5px; border-radius:3px;} /* 일정색상 */
.calendar .dept_bg ~ .dept_bg {margin-top:8px;}
.calendar .s_colorRed {color:#dd5f5b; background:#fff4f4;}
.calendar .s_colorOrange {color:#e29600; background:#fff6e3;}
.calendar .s_colorGreen {color:#4c9c00; background:#eef7e4;}
.calendar .s_colorBlue {color:#00aadd; background:#ebfaff;}

.calendar .saturday {color:var(--blue);} /* 토요일 */
.calendar .sunday {color:var(--red);} /* 일요일 */

.calendar .date_null {background:#f5f5f5;} /* 이전달-다음달 날짜 */

.color_state {display:flex; flex-wrap:wrap; justify-content:flex-start; gap:15px;} /* 일정색상안내 */
.color_state li {display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px; font-size:15px; color:var(--fontcolor1);}
.color_state li span {display:inline-flex; flex-wrap:wrap; width:25px; height:25px; border-radius:3px; border:1px solid #ccc;}

.mrColor4 {border-color:rgba(255,255,255,0.3) !important; background:var(--maincolor) !important;}
.mrColor5 {border-color:#bbb !important; background:url('/static_root/images/common/pattern_bg.png') repeat, #aaa !important; background-blend-mode:multiply;}

@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1025px){
	#userSub .calendar table colgroup col.time_date {width:80px;}
}
@media screen and (max-width: 769px){
	#userSub .canledar_plan {padding:30px 20px;}
	
	#userSub .calendar_info {flex-direction:column;}
	#userSub .calendar_info h4 {font-size:18px;}
	
	#userSub .calendar_dates {justify-content:center;}
	#userSub .calendar_dates > div button {font-size:18px;}
	#userSub .calendar_dates > div strong {font-size:22px;}
	
	#userSub .calendar table colgroup col.time_date {width:60px;}
	#userSub .calendar table thead th {font-size:14px; padding:12px 5px;}
	#userSub .calendar table thead th br {display:block;}
	#userSub .calendar table tbody th {font-size:14px; padding:12px 5px;}
	
	.color_state li {font-size:14px;}
}
@media screen and (max-width: 481px){
	#userSub .calendar_dates > div {gap:10px;}
	
	#userSub .calendar table colgroup col.time_date {width:40px;}
	#userSub .calendar table thead th {font-size:12px; padding:12px 3px;}
	#userSub .calendar table tbody th {font-size:12px; padding:12px 3px;}
}