* { user-select: none; box-sizing: border-box; }

body { width: 100%; margin: 0; padding: 0; /* background-image: url(/img/main_image_bg.png); */ background-color: #9397a3; background: linear-gradient(45deg, #bdc1cb, #9397a3); }

.grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-gap: 24px; }

.container-grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-gap: 24px; }

/* header 시작 */
header { height: 50px; align-items: center; background: #333333; color: white; }

	header a { text-decoration: none !important; color: white !important; }

	header img { width: 100%; height: 100%; }

	header .header-left { grid-column: span 6; display: flex; height: 100%; }

.header-left .header-left-menu { display: flex; justify-content: center; align-items: center; width: 50px; border-right: 1px solid #717171; }

.header-left .header-left-logo-box { display: flex; justify-content: center; align-items: center; }

.header-left .logo-box__logo { padding: 0 15px; border-right: 1px solid #717171; }

	.header-left .logo-box__logo:nth-last-child(1) { border-right: none; }


header .header-right { grid-column: span 6; justify-self: end; display: flex; align-items: center; font-size: 0.95rem; padding-right: 30px; }

.header-right__item { margin-left: 15px; }
/* header 종료 */

/* main 시작 */
main .container { grid-column: span 12; grid-column-gap: 0; max-width: 1190px; height: 80%; margin: 30px auto 60px auto; padding: 0; }

main .carousel-box { grid-column: span 12; position: relative; width: 100%; height: 570px; }

.carousel-slide-container { width: 100%; height: 100%; }

	.carousel-slide-container .active { display: block; }

.carousel-slide { width: 100%; height: 100%; display: none; }

	.carousel-slide img { width: 100%; height: 100%; }

.carousel-btn-container { display: flex; justify-content: space-between; }

.carousel-btn-container { width: 100%; position: absolute; top: 50%; display: flex; justify-content: space-between; align-items: center; background-color: transparent; }

.carousel-btn-prev { width: 55px; height: 59px; cursor: pointer; }

.carousel-btn-next { width: 55px; height: 59px; cursor: pointer; }

main .notice-box { grid-column: span 5; height: 190px; margin-right: 20px; padding: 20px; background: white; }

.notice-box .notice-box-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }

.notice-box .notice-box__title { font: bold 12pt "malgun gothic", Dotum; }

.notice-box .notice-box__mark { font-size: 1.5rem; }

	.notice-box .notice-box__mark:hover { cursor: pointer; }

.notice-box .notice-box__list { display: table; width: 100%; padding: 0; margin: 0 0 3px 0; border: none; table-layout: fixed; }

.notice-box .notice-box__subject:hover { color: #4f81bd; }

.notice-box .notice-box__cell { display: table-cell; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; vertical-align: middle; overflow-wrap: break-word; word-break: break-all; height: 20px; }

.notice-box .notice-box__point { width: 10px; }

.notice-box .notice-box__subject { font-size: 0.875rem; }

.notice-box .notice-box__name { width: 100px; text-align: right; color: #888888; font-size: 0.8rem; }

.notice-box .notice-box__bar { width: 20px; text-align: center; color: #c8c8c8; font-size: 0.9rem; }

.notice-box .notice-box__date { width: 70px; text-align: right; color: #888888; font-size: 0.8rem; }


main .etc-box { grid-column: span 4; height: 190px; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 50% 50%; grid-template-areas:
		'item01 item02 item03'
		'item04 item05 item06'; }

.etc-box div { background-color: #4f81bd; }

.etc-box img { width: 100%; height: 100%; }

	.etc-box img:hover { cursor: pointer; opacity: 0.4; }

.etc-box__item01 { grid-area: item01; }

.etc-box__item02 { grid-area: item02; }

.etc-box__item03 { grid-area: item03; }

.etc-box__item04 { grid-area: item04; }

.etc-box__item05 { grid-area: item05; }

.etc-box__item06 { grid-area: item06; }

main .login-box { grid-column: span 3; height: 190px; padding: 20px; background: #f3f4f8; }

.login-box__title { font: bold 12pt "malgun gothic", Dotum; }

.login-box-main { height: 64px; display: grid; grid-template-columns: 35% 35% 30%; grid-template-rows: 50% 50%; gap: 0; grid-template-areas:
		'id id login'
		'pw pw login'; margin: 15px 0 20px 0; }

.login-box__id { grid-area: id; border-radius: 0px; border: 1px solid rgb(208, 208, 208); background-color: red; }

.login-box__pw { grid-area: pw; border-radius: 0px; border: 1px solid rgb(208, 208, 208); background-color: blue; }

.login-box__login { grid-area: login; display: flex; width: 100%; height: 100%; color: white; justify-content: center; align-items: center; font-size: 0.875rem; background-color: #4f81bd; }

	.login-box__login:hover { cursor: pointer; }

.login_box__btn_login { width: 100%; height: 100%; cursor: pointer; color: white; border: none; background-color: transparent; }

.login_box__input { width: 100%; height: 100%; padding-left: 10px; border: none; outline: none; }

.login-box-footer { font-size: 0.875rem; }

.login-box__search_pw { width: max-content; color: #555555; text-decoration: none; }

	.login-box__search_pw:hover { color: navy; }

/*2025.04.26 유대규: 로그인 후 메시지(비밀번호 만료, 오류, 복잡성 불만족 등) 표시 할때 사용*/
.login-msgbox { text-align: center; font-weight: bold; line-height: 1.5em; font-size: 1.1em; border: 2px dotted blue; border-radius: 3px; padding: 8px; word-break: keep-all; }
	.login-msgbox button { width: 40%; height: 3em; color: white; border: 1px solid #36a; border-radius: 3px; background-color: #48b; }
		.login-msgbox button:hover { color: #FF9; border: 1px solid #993; }
		.login-msgbox button:active { color: #F66; }

/* main 종료 */
.ui-dialog { box-shadow: 3px 3px 10px -1px rgba(0, 0, 0, 0.5); }
/* footer 시작 */
footer { grid-column: span 12; width: 100%; height: 40px; align-items: center; padding: 0 20px; background: #dadbdd; color: #888888; font-size: 0.75rem; }

	footer a { text-decoration: none !important; color: #888888 !important; }

.footer-left { grid-column: span 6; }

footer .footer-right { height: 100%; grid-column: span 6; justify-self: end; display: flex; align-items: center; }

.footer-right .footer-right__item { padding: 0 15px; border-right: 1px solid #c8c8c8; }

	.footer-right .footer-right__item:nth-last-child(1) { border-right: none; padding-right: 0; }
/* footer 종료 */

/* button*/
.btn, a.btn, a.btn:link, a.btn:visited { border: 0; color: White; font-weight: bold; font-size: 12px; cursor: pointer; padding: 4px 6px; height: 19px; line-height: 12px; border-radius: 2px; box-sizing: border-box; margin: 1px 0; letter-spacing: inherit; white-space: nowrap; vertical-align: middle; background-color: #555; background-repeat: no-repeat; background-position: 2px 2px; }

	.btn:hover, a.btn:hover { color: #FFF; background-color: #333; text-decoration: none; }

/* 공지사항 Dialog 창 시작 */
#divBoard { padding-top: 20px; }

	#divBoard .board_header { display: grid; grid-template-columns: repeat(12, 1fr); grid-gap: 0; width: 100%; height: 50px; align-items: center; padding-left: 10px; margin-bottom: 20px; border-top: 1px solid black; border-bottom: 1px solid lightgray; }

.board_left { grid-column: span 6; }

#board_subject { font-weight: bold; }

.board_right { height: 100%; grid-column: span 6; justify-self: end; display: flex; align-items: center; font-size: 0.8rem; }

.board_right_item { padding: 0 15px; border-right: 1px solid #c8c8c8; }

	.board_right_item:nth-last-child(1) { border-right: none; padding-right: 0; }

#board_main { height: 400px; padding: 0 10px 0 10px; overflow-y: auto; }

.board_footer a { text-decoration: none; }

.footer_attach { color: #1b4f8d; font-weight: bold; }

#tbl_attach, #pop_board_footer table { width: 100%; margin-top: 6px; border: 1px solid lightgray; border-collapse: collapse; }

	#tbl_attach tr, #pop_board_footer table tr { height: 24px; width: 100%; }

	#tbl_attach th, #pop_board_footer table th { background-color: #f4f4f4; }

	#tbl_attach td, #pop_board_footer table td { border: 1px solid lightgray; font-size: 0.875rem; }

	#tbl_attach a:link, #pop_board_footer table a:link { text-decoration: none !important; }
/* 공지사항 Dialog 창 종료 */

.ells { white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; }

/* 태블릿 */
@media screen and (max-width: 1023px) {

	main .container { margin: 30px 10px 40px 10px; }

	main .container-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas:
			'carousel carousel'
			'etc-box login-box'
			'notice-box notice-box'; }

	main .carousel-box { grid-area: carousel; grid-column: span 2; height: 400px; }

	main .notice-box { grid-area: notice-box; grid-column: span 2; margin: 0; height: 190px; }

	main .etc-box { grid-area: etc-box; grid-column: span 1; height: 190px; }

	main .login-box { grid-area: login-box; grid-column: span 1; height: 190px; }

	footer .footer-left { grid-column: span 3; }

	footer .footer-right { grid-column: span 9; }
}


/* 모바일 */
@media screen and (max-width: 767px) {
	header .header-left { grid-column: span 12; }

	header .header-left-menu { display: none !important; }

	header .header-right { display: none; }

	main .container-grid { grid-template-columns: 1fr; grid-template-areas:
			'carousel'
			'login-box'
			'notice-box'
			'etc-box'; margin: 30px 10px 40px 10px; }

	main .carousel-box { grid-area: carousel; height: 280px; }

	main .notice-box { grid-area: notice-box; margin: 0; height: 190px; }

	main .etc-box { grid-area: etc-box; height: 190px; }

	main .login-box { grid-area: login-box; height: 190px; }

	footer .footer-left { grid-column: span 12; }

	footer .footer-right { display: none; }


	#divBoard .board_header { height: 70px; }

	#divBoard .board_left { grid-column: span 12; }

	#divBoard .board_right { grid-column: span 12; }
}