@charset "utf-8";
@import url("/common/font/Pretendard/fonts.css");
@import url("/common/font/NanumGothic/fonts.css");
@import url("/common/font/RemixIcon-4.2.0/remixicon.css"); 
@import url("/font/XEIcon-2.3.3/xeicon.css");

/*-------------------------------------------------
Author : KLIC
Create date : 2023. 11. 01. RESET SY,CHo
-------------------------------------------------*/

/* reset.css */
html {font-size: 20px;}
*, *:before, *:after {box-sizing: border-box;}
body {margin: 0; padding: 0; font-family: 'Pretendard', 'NanumGothic', 'Montserrat', 'NotoSans', sans-serif; font-size: 0.8rem; font-weight: 400; color: #333;}
ul, ol, li, dl, dt, dd {padding: 0; margin: 0; list-style: none;}
h1, h2, h3, h4, h5, h6 {padding: 0; font-size: inherit; font-weight: inherit; margin: 0;}
a {color: inherit; text-decoration: none;}
img {margin: 0; padding: 0; line-height:0; vertical-align: middle; font-size: 0; border: 0;}
table {width: 100%; border-collapse: separate; border-spacing: 0;}
table td, table th{vertical-align: middle;}
caption, legend {position: absolute; margin: -1px; padding: 0; width: 1px; height: 1px; border: 0; clip: rect(0, 0, 0, 0); overflow: hidden;}
select, input, textarea {font-family: 'Pretendard', 'Montserrat', 'NotoSans', '돋움', 'Dotum', '굴림', 'Gulim', AppleGothic, UnDotum, Arial, Tahoma, Verdana, sans-serif; font-size: 0.8rem; font-weight: 400; color: #444;}
select, input {vertical-align: middle;}
address, em, i {font-style: normal;}
button, input, optgroup, select, textarea {margin: 0; font-family: inherit; font-size: 100%; color: inherit;}
button {background: none; border: 0; cursor: pointer;}
hr {display: block; margin: 0; padding: 0; height: 0; border: none;}
figure, figcaption, p {margin: 0; padding: 0;}
form, fieldset {margin: 0; padding: 0; line-height: 1; border: none;}
button, [type="button"], [type="reset"], [type="submit"] {-webkit-appearance: none; -moz-appearance: none; appearance: none;/* -webkit-appearance: button; -moz-appearance: button; appearance: button; */}/* iOS의 기본 스타일은 제거되고, css에서 사용자가 정의한 스타일로 반영 */
header, footer, article, section, aside, nav, main {display: block;}
small {font-size: 0.65rem;}/* Add the correct font size in all browsers. */

/* Prevent `sub` and `sup` elements from affecting the line height in all browsers. */
sub, sup {position: relative; line-height: 0; vertical-align: baseline; font-size: 0.6rem;}
sub {bottom: -0.25em;}
sup {top: -0.5em;}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, main,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin: 0; padding: 0; border: 0; vertical-align: baseline;}
/* b, strong {font: inherit;} 게시글 editor 작성 속성까지 초기화됨 */

/* Skip 메뉴 */
#skipArea {position: absolute; top: -1000px; left: 0; width: 100%; height: 0; line-height: 0; font-size: 0; z-index: 9999;}
#skipArea a {display: block; width: 100%; line-height: 0; text-align: center; font-size: 0;}
#skipArea a:focus, 
#skipArea a:hover, 
#skipArea a:active {position: absolute; top: 1000px; left: 0; display: block; padding: 0.4rem 0; height: 1.5rem; line-height: 0.9rem; font-size: 0.6rem; font-weight: bold; color: #fff; background: #20262c ;}

.hid {position: absolute; margin: -1px; padding: 0; width: 1px; height: 1px; border: 0; clip: rect(0, 0, 0, 0); overflow: hidden;}
.al {text-align: left !important;}
.ac {text-align: center !important;}
.ar {text-align: right !important;}
.fl {float: left !important;}
.fr {float: right !important;}

.clearfix:after {content: ""; display: block; clear: both; visibility: hidden;}



/* jconfirm:has(.customJconfirm) */
.jconfirm:has(.customJconfirm) {

	/* height */
	--height-header: 3.25rem;
	--height-footer: 5.5rem;

	/* padding */
	--pd-hor: 1.25rem;
}
.jconfirm:has(.customJconfirm) .jconfirm-holder {max-height: 100vh;}
.jconfirm:has(.customJconfirm) .jconfirm-box {display: flex; flex-direction: column; width: calc(100% - 100px) !important; max-width: 31.5rem !important; max-height: calc(100vh - 100px); padding: 0;}
.jconfirm:has(.customJconfirm) .jconfirm-box div.jconfirm-title-c {line-height: var(--height-header); background-color: #0077c6; padding: 0 var(--pd-hor); font-size: 1.1rem; color: #fff; font-weight: 700;}
.jconfirm:has(.customJconfirm) .jconfirm-box div.jconfirm-title-c .jconfirm-title {display: block; white-space: nowrap; overflow: hidden;}
.jconfirm:has(.customJconfirm) .jconfirm-box div.jconfirm-content-pane {margin-bottom: 0;}
.jconfirm:has(.customJconfirm) .jconfirm-box div.jconfirm-content-pane .jconfirm-content {max-height: calc(100vh - 100px - var(--height-header) - var(--height-footer)) !important; padding: calc(var(--pd-hor) / 3 * 2) var(--pd-hor) 0; overflow-x: hidden; overflow-y: auto;}
.jconfirm:has(.customJconfirm) .jconfirm-box .jconfirm-buttons {display: flex; align-items: center; gap: 0.25rem; height: var(--height-footer); padding: 0 var(--pd-hor);}
.jconfirm:has(.customJconfirm) .jconfirm-box .jconfirm-buttons button {border-radius: 0.4rem; padding: 0.3rem 1rem;}
.jconfirm:has(.customJconfirm) .jconfirm-box .jconfirm-buttons > button {margin: 0;}
/*
	jconfirm:has(.customJconfirm).jconfirm-white
	jconfirm:has(.customJconfirm).jconfirm-light
*/
.jconfirm:has(.customJconfirm).jconfirm-white .jconfirm-bg,
.jconfirm:has(.customJconfirm).jconfirm-light .jconfirm-bg {background-color: #000; opacity: 0.5;}
.jconfirm:has(.customJconfirm).jconfirm-white .jconfirm-box,
.jconfirm:has(.customJconfirm).jconfirm-light .jconfirm-box {border-radius: 1rem; box-shadow: 0.15rem 0.2rem 0.4rem rgba(0,0,0,0.15);}
.jconfirm:has(.customJconfirm).jconfirm-white .jconfirm-box .jconfirm-buttons,
.jconfirm:has(.customJconfirm).jconfirm-light .jconfirm-box .jconfirm-buttons {float: none; justify-content: flex-end; width: 100%;}
.jconfirm:has(.customJconfirm).jconfirm-white .jconfirm-box .jconfirm-buttons button,
.jconfirm:has(.customJconfirm).jconfirm-light .jconfirm-box .jconfirm-buttons button {font-size: 0.8rem; font-weight: 600;}

/* .customJconfirm - tbl-wrap */
.customJconfirm .tbl-wrap {margin: -0.25rem 0;}
.customJconfirm .tbl-wrap table th,
.customJconfirm .tbl-wrap table td {padding: 0.25rem 0;}
.customJconfirm .tbl-wrap table th {padding: 0.675rem 0; padding-right: 0.5rem; text-align: left; vertical-align: top;}
.customJconfirm .tbl-wrap table th label,
.customJconfirm .tbl-wrap table th span {display: block; padding-left: 0.85rem; font-size: 0.9rem; color: #222; font-weight: 700; position: relative;}
.customJconfirm .tbl-wrap table th label::before,
.customJconfirm .tbl-wrap table th span::before {content: ""; display: block; width: 0.4rem; height: 0.4rem; border-radius: 50%; background-color: #0077c6; position: absolute; left: 0; top: 0.25rem;}
/* .customJconfirm - form-wrap */
.customJconfirm .form-wrap {display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;}
.customJconfirm .form-wrap .iptSt {display: flex; align-items: center; min-width: unset; height: 1.75rem; border-radius: 0.3rem; border: 1px solid #b9bbc5; padding: 0 0.6rem; font-size: 0.75rem; color: #222; font-weight: 500;}
.customJconfirm .form-wrap .iptSt::placeholder {color: #8e8e8e; font-weight: 400;}
.customJconfirm .form-wrap .iptSt:is(select) {background: url('/images/web/scnu/kor/campusmap/select_arrow.png') right 0.4rem center no-repeat; padding-right: calc(0.8rem + 10px); appearance: none;}
.customJconfirm .form-wrap .iptSt:is(select)::-ms-expand {display: none;}
.customJconfirm .form-wrap .iptSt:is(textarea) {height: 5.75rem; padding: 0.6rem;}
.customJconfirm .form-wrap .iptSt.wFlex {flex: 1;}
.customJconfirm .form-wrap .iptSt.w100 {width: 100%;}

/* fileCustom */
.form-wrap #fileCustom {width: 0; height: 0; border: 0; padding: 0; position: absolute; overflow: hidden;}
.form-wrap #fileCustom + label.iptSt {background-color: #f4f4f5; color: #000; cursor: pointer;}
.form-wrap #fileNameCustom {flex: 1; font-size: 0.65rem; color: #555;}
.form-wrap #filePreviewCustom {display: flex; justify-content: center; align-items: center; width: 100%; height: 7.5rem; background-color: #f1f1f1; font-size: 0; line-height: 0; overflow: hidden;}
.form-wrap #filePreviewCustom img {max-width: 100%; max-height: 100%; object-fit: contain;}
/* fileCustom : active */
.form-wrap #fileCustom + label.iptSt,
.form-wrap #filePreviewCustom {transition: 0.3s;}
.form-wrap #fileCustom + label.iptSt:hover,
.form-wrap #fileCustom:focus + label.iptSt {border-color: #0077c6; background-color: #fff; color: #0077c6;}
.form-wrap #filePreviewCustom:hover,
.form-wrap #filePreviewCustom:focus {opacity: 0.75;}



@media screen and (max-width: 1240px) {

	/* jconfirm:has(.customJconfirm) */
	.jconfirm:has(.customJconfirm) {

		/* height */
		--height-header: 2.75rem;
		--height-footer: 4rem;
	}
	.jconfirm:has(.customJconfirm) .jconfirm-box div.jconfirm-title-c {font-size: 1rem;}
}



@media screen and (max-width: 1024px) {

	/* reset.css */
	html {font-size: 19px;}
}



@media screen and (max-width: 768px) {

	/* reset.css */
	html {font-size: 18px;}

	/* jconfirm:has(.customJconfirm) */
	.jconfirm:has(.customJconfirm) {

		/* height */
		--height-header: 2.5rem;
		--height-footer: 3.75rem;
	}
	.jconfirm:has(.customJconfirm) .jconfirm-box div.jconfirm-title-c {font-size: 0.9rem;}
	/* .customJconfirm - tbl-wrap */
	.customJconfirm .tbl-wrap table th {padding: 0.725rem 0;}
	.customJconfirm .tbl-wrap table th label,
	.customJconfirm .tbl-wrap table th span {font-size: 0.8rem;}
	/* .customJconfirm - form-wrap */
	.customJconfirm .form-wrap .iptSt.mob_w100 {width: 100%;}
}



@media screen and (max-width: 580px) {

	/* .customJconfirm - tbl-wrap */
	.customJconfirm .tbl-wrap {margin: 0;}
	.customJconfirm .tbl-wrap table thead {display: none;}
	.customJconfirm .tbl-wrap table tbody,
	.customJconfirm .tbl-wrap table tr {display: block;}
	.customJconfirm .tbl-wrap table th {display: block; padding: 0.5rem 0;}
	.customJconfirm .tbl-wrap table td {display: block;}
}



@media screen and (max-width: 480px) {

	/* reset.css */
	html {font-size: 17px;}
}



@media screen and (max-width: 380px) {

	/* jconfirm:has(.customJconfirm) */
	.jconfirm:has(.customJconfirm) {

		/* padding */
		--pd-hor: 1rem;
	}
	.jconfirm:has(.customJconfirm) .jconfirm-box {width: calc(100% - (var(--gap-hor) * 2)) !important;}
}