* { box-sizing: border-box; }
body { width: 100%; height: 100vh; margin: 0; padding: 0; background-color: #9397a3; background: linear-gradient(45deg, #bdc1cb, #9397a3);}

/* 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 { 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-menu:hover { cursor: pointer; }
.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 종료 */

/* dialog 그림자 */
.ui-dialog {box-shadow: 3px 3px 10px -1px rgba(0, 0, 0, 0.5);}

/*  main 시작  */
.container-main {text-align: center; width: 100%; margin-top: 30px;} 
.container-main img {width: 1190px; height: 570px;}
.container-bottom {width: 100%;}
.container-bottom-wrapper {width: 1190px; margin: 20px auto; display:flex; justify-content: space-between;}
.container-bottom-right {display: flex;}

.notice-box {width: 430px; height: 220px; margin-right: 20px; padding: 20px; background: white;}
.notice-box-header {display: flex; justify-content: space-between; width: 100%;}
.notice-box .notice-box__title { font: bold 12pt "malgun gothic", Dotum; }
.notice-box__mark {cursor: poiner; font-size: 1.5rem; cursor: pointer;}
.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; cursor: pointer; }
.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; }
.ells { white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; }

.etc-box-wrap {width: 487px; display: inline-block;}
.etc-box-wrap-up {display: flex; justify-content: flex-end;}
.etc-box-wrap-down {display: flex; justify-content: flex-end;}
.etc-box-wrap .etc-box_item {display: inline-block; background-color: #4f81bd; }
.etc-box-wrap .etc-box_item img {width: 160px; height: 110px;}
.etc-box_item img:hover { cursor: pointer; opacity: 0.4; }

.login-box {display: inline-block; width: 260px; height: 220px; padding: 40px 20px; background: #f3f4f8;}
.login-box-header {font: bold 12pt "malgun gothic", Dotum;}
.login-box-main {height: 64px; margin: 15px 0 20px 0; display: flex; }
.login-box-main-left {width: 140px;}
.login-box-main-right {width: 65px;}
.login-box__id {width: 100%; border: 1px solid rgb(208, 208, 208);}
.login-box__id input {width: 100%; height: 30px; border: none;}
.login-box__pw {width: 100%; border: 1px solid rgb(208, 208, 208);}
.login-box__pw input {width: 100%; height: 30px; border: none;}
.login-box__login {width: 100%; height: 65px; color: white; justify-content: center; align-items: center; font-size: 0.875rem; background: #4f81bd; border: 1px solid rgb(208, 208, 208);}
.login_box__btn_login {width: 100%; height: 100%; cursor: pointer; color: white; border: none; background-color: transparent;}
.login-box-footer {font-size: 0.875rem;}
.login-box__search_pw {color: #555555; text-decoration: none;}
.login-box__search_pw:hover {color: navy;}

/*  main 끝  */

/* footer 시작 */
footer { width: 100%; height: 30px; align-items: center; background: #dadbdd; color: #888888; font-size: 0.75rem; }
.footer-wrapper {width: 100%; height: 100%;}
.footer-left { padding-top: 10px;}
/* footer 종료 */

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

#divBoard .board_header { display: flex; justify-content: space-between; width: 100%; height: 50px; align-items: center;	padding-left: 10px; margin-bottom: 20px; border-top: 1px solid black; border-bottom: 1px solid lightgray;}
#board_subject { font-weight: bold;}
.board_right { height: 100%; display: flex; justify-content: end; 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 { width: 100%;	margin-top: 6px; border: 1px solid lightgray; border-collapse: collapse;}
#tbl_attach tr { height: 24px; }
#tbl_attach th { background-color: #f4f4f4; }
#tbl_attach td { border: 1px solid lightgray; font-size: 0.875rem; }
#tbl_attach a:link { text-decoration: none !important;}

#GjTbl {border-bottom: 1px solid #ddd;}
#GjTbl th { border: 1px solid #ddd; padding: 0.35em 0 .35em; font-weight: bold; font-size: 15px;,text-align:center; background-color: rgb(248, 248, 248);}
#GjTblBody tbody { border-bottom: 1px solid #ddd;}
#GjTblBody tbody tr { border: 1px solid #ddd; }
#GjTblBody tbody tr td {padding: 5px 0; border: 1px solid #ddd; }
#gjList .tr_obj { background: #f7f7f7;}
#gjList tr:hover{ background: #fff4d2;}
.tr_title.on { background: rgb(238, 240, 252) !important; font-weight:bold;}
.tabCon div{height:500px;}

#divCyber{ margin: 0px 0px 0px 40px; padding: 8px 0px;}
#divCyber h3 { position: relative;	font-size: 30px; line-height: 40px;	text-align: center;	font-family: 'notokr-medium'; display: inline-block; border-top: 3px solid #e04438; padding-top: 10px; color: #e04438;}
#divCyber .board_header span{	display: block;	text-align: center;	color: #424242;	width: 100%; margin-top: 10px; font-size: 15px;}
#divCyber textarea{ width: 97%; resize: vertical;	font-family: NanumGothic;}
#divCyber .cyberSubject{text-align: center; color: red;}
#divCyber ul{ padding-left: 2em; list-style-type: circle; border-radius: 3px;}
#divCyber .file_box  ul { display: block; margin: 0;	padding: 0;	min-height: 24px; max-height: 200px; overflow-y: auto; vertical-align: top;}
#divCyber .file_box { border: 1px solid #666;	width: 97%; height:103px; padding: 10px 12px 34px 12px; box-sizing: border-box; border-radius: 3px;}
#divCyber .divDonge {	width: 97%;	border: 1px solid #666;	padding: 5px 30px; box-sizing: border-box; list-style:disc;}
#divCyber p { font-size: 16px; color: #6b6867; font-family: NanumGothic; font-weight: bold;}
#divCyber .btnSend, #divCyber .btnClear{ cursor: pointer; font-weight:bold; color: #fff; font-size: 16px; background: #126; height: 50px; min-width: 140px; border-radius: 6px; border: 1px solid #b8b8b8;	padding: 2px;}
#divCyber .btnClear:active {background: #777; color: pink;}
#divCyber #FB_frame {width:100%; height:100%;}
#divCyber .ui-widget-content {border:none !important;}
/* 공지사항 Dialog 창 종료 */

/* dialog 버튼 css*/
.ui-dialog .ui-dialog-titlebar-close span {margin:-8px !important;}
.ui-dialog-buttonpane.ui-widget-content.ui-helper-clearfix {display:flex; justify-content:space-between; width: 156%; align-items: center;}
.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-only {padding:0; font-size: 15px;}
/* dialog 버튼 css 종료*/

/* ESG dialog css 시작 */
.tabCon div{text-align: center; padding-top: 20px; background: white;}
/* ESG dialog css 종료 */