@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400&display=swap'); /* font-family: 'Noto Sans KR', sans-serif; */

body{background-color: #f7f7f7;}
a:hover{color: #7B6858;}

#login_box {position: absolute;left: 50%;margin-left: -200px;top: 50%;transform: translateY(-50%);background-color: #fff;width:400px; min-height:300px;padding:50px 24px;box-shadow:rgba(145,158,171,0.2) 0px 0px 2px 0px,rgba(145,158,171,0.12) 0px 12px 24px -4px;border-radius:7px}
#login_box > form{display:grid; grid-template-columns:1fr;  grid-row-gap:10px}
#login_box > h1{padding-bottom: 30px;}

#aside{background-color: #FAF6EB;position: fixed;width: 300px;height: 100%;box-shadow:0px 0px 20px rgba(1, 41, 112, 0.1);top: 0;}
#aside > h1{height: 100px;display: flex;align-items:center;  justify-content:center;background-color: #fff;}
#aside > h1 img{max-height:46px;}
#nav{padding:24px;}
#nav .menu_wrap{background-color: #fff;border-radius:7px; padding: 14px;margin: 10px 0 10px 0;}
#nav a{display: block;color: #666;padding:6px 10px;border-radius:4px;}
#nav a > i{margin-right: 6px;}
.teins{color: #666;padding: 24px;}
.teins a{color: #000;}
.teins a:hover{color: #000;;}
#aside .boardlist a.active{background-color: #A7927F;color: #fff;}



#cont_wrap{margin-left: 300px;}
#header{width: 100%;height: 70px;display: flex;align-items: center;flex-direction:row-reverse;margin-bottom: 24px;}
#header .util{margin-right: 30px;display: flex;align-items: center;}
#header .util > i{margin-right: 4px;font-size: 20px;}
#header .util > button{border: 1px solid #ccc;margin-left: 10px;padding: 4px 12px;border-radius:4px;font-size: 14px;}


#main {background-color: #fff;max-width:1100px; min-height:500px;padding: 24px;box-shadow:rgba(145,158,171,0.2) 0px 0px 2px 0px,rgba(145,158,171,0.12) 0px 12px 24px -4px;border-radius:7px;margin:0px 0px 0px 320px}
#main > .title{font-size:24px ;margin-bottom: 24px;}



/* common */
.inner{min-height:500px}
.img100 > img{width:100%; height: auto;}
.max-img100 > img{max-width:100%; height: auto;}
.w100px{width: 100px !important;}
.w150px{width: 150px !important;}
.w100per{width: 100% !important;}
.text-center{text-align: center !important;}
.text-left{text-align: left !important;}
.text-right{text-align: right !important;}
.font-bold{font-weight: bold;}

.display-none{display: none !important;}
.display-block{display: block !important;}
.p-relative{position: relative;}
.mobile_show{display: none;}
.divide2{display:grid;grid-template-columns:repeat(2, 1fr);}
.divide3{display:grid;grid-template-columns:repeat(3, 1fr);}

span.text-gradient {background: -webkit-linear-gradient(315deg, #1e30f3 0%, #e21e80 100%); -webkit-background-clip: text;-webkit-text-fill-color: transparent;}
span.space{display: inline-block;width: 24px;}
span.line::before {content: "|";display: inline-block;	padding:0 14px;color: #666;}

button + button{margin-left: 4px;}

@media (max-width:768px){
	
	.mobile_block{display: block !important;}
	.mobile_none{display: none !important;}
	.mobile_show{display: block !important;}
	span.space{width: 12px;}
	span.m_br{display: block;font-size: 1rem !important;}
	
	.divide2{display: block;}
	.divide3{display: block;}

}


/* board */
	.btn_box{padding: 20px;}
	.btn_box > button{width: 100px;}

	#paging{display:flex; justify-content:center; margin-top: 1.5rem;}
	#paging > a{display: inline-block;padding: 2px 10px;text-align: center;}
	#paging > a.active{border: 1px solid #7B6858;color: #7B6858;}
	#paging > a > i:hover{font-weight: bold;}

	.grid_list .col{display:grid;grid-template-rows:50px; align-items: center;border-bottom: 1px solid #ddd;}
	.grid_list .col.row5{grid-template-columns:30% 20% 20% 20% 10%;}
	.grid_list .col.row5 > li{text-align: center;}

	.flex_list .col{display:flex;align-items: center;height: 50px;border-bottom: 1px solid #ddd;cursor: pointer;}
	.flex_list .col.fixed{background-color: #f7f7f7;}
	.flex_list .col:hover{background-color: #f7f7f7;}
	.flex_list .col > li{text-align: center;}

	.flex_list .col.row4 > li:nth-child(1){width: 10%;}
	.flex_list .col.row4 > li:nth-child(2){width: 60%;text-align: left;}
	.flex_list .col.row4 > li:nth-child(3){width: 15%;}
	.flex_list .col.row4 > li:nth-child(4){width: 15%;}

	.flex_list .col.popup > li:nth-child(1){width: 10%;}
	.flex_list .col.popup > li:nth-child(2){width: 45%;text-align: left;}
	.flex_list .col.popup > li:nth-child(3){width: 30%;}
	.flex_list .col.popup > li:nth-child(4){width: 15%;}


	.flex_list .col.row5 > li:nth-child(1){width: 10%;}
	.flex_list .col.row5 > li:nth-child(2){width: 10%;}
	.flex_list .col.row5 > li:nth-child(3){width: 50%;text-align: left;}
	.flex_list .col.row5 > li:nth-child(4){width: 15%;}
	.flex_list .col.row5 > li:nth-child(5){width: 15%;}

	.flex_list .col.group > li:nth-child(1){width: 8%;}
	.flex_list .col.group > li:nth-child(2){width: 21%;}
	.flex_list .col.group > li:nth-child(3){width: 21%;}
	.flex_list .col.group > li:nth-child(4){width: 21%;}
	.flex_list .col.group > li:nth-child(5){width: 8%;}
	.flex_list .col.group > li:nth-child(6){width: 21%;}

	.flex_list .col.book > li:nth-child(1){width: 8%;}
	.flex_list .col.book > li:nth-child(2){width: 23%;}
	.flex_list .col.book > li:nth-child(3){width: 23%;}
	.flex_list .col.book > li:nth-child(4){width: 23%;}
	.flex_list .col.book > li:nth-child(5){width: 23%;}


	.flex_list .col a{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
	.flex_list .col a:hover{color: #000;}
	
	
	ul.thead{border-top: 2px solid #5C5C5C;cursor:default !important;color: #000;}
	ul.thead > li{text-align: center !important;position: relative;}
	ul.thead > li + li::before{content: "";	display: block; width: 1px;	height: 12px;background-color: #ddd;	position: absolute;	left: 0px;top: 6px;}
	ul.thead:hover{background-color: #fff !important;}
	.no_cont{text-align: center;height: 50px;line-height: 50px;border-bottom: 1px solid #ddd;}

	.board_view .title{border-top: 2px solid #5C5C5C;border-bottom: 1px solid #ddd;padding: 12px;position: relative;}
	.board_view .title > strong{display: block;text-align: center;}
	.board_view .title > span{font-size: 14px;color: #666;position: absolute;top: 50%; transform: translateY(-50%);right: 20px;}
	.board_view .cont{padding: 20px;min-height:300px}
	.board_view .cont img{max-width:100%;}
	.board_view .list{height: 50px;border-top: 1px solid #ddd;border-bottom: 1px solid #ddd;display:flex;margin-top: -1px;align-items: center;}
	.board_view .list > span{display: inline-block;width: 150px;height: 48px;background-color: #f7f7f7;text-align: center;line-height: 48px;}
	.board_view .list > a{display: inline-block;padding-left: 10px;line-height: 50px;}
	.board_view .list > div{padding-left: 10px;}

	.board_write{display:grid; grid-template-columns:20% auto;border-top: 2px solid #5C5C5C;border-bottom: 1px solid #ddd;}
	.board_write > div{min-height:50px;display: flex;align-items:center;}
	.editor_wrap{padding-bottom: 50px;display: block !important;padding-top: 6px;}
	#editor strong{font-weight: bold;}

	.flex_list .icon{display: inline-block;border: 1px solid #000;padding: 2px;text-align: center;width: 70px;}
	.flex_list .icon.notice{border-color: #006794;color: #006794;}
	.flex_list .icon.event{border-color: #DE7823;color: #DE7823;}


	.board_view .icon{display: inline-block;border: 1px solid #000;padding:0 6px;text-align: center;margin-right: 6px;}
	.board_view .icon.notice{border-color: #006794;color: #006794;}
	.board_view .icon.event{border-color: #DE7823;color: #DE7823;}

	.input_style{width:100%;border-radius: 0.25rem;padding: 0.375rem 0.75rem;}

	


	@media (max-width:768px){
		.grid_list .col{padding: 6px 14px;justify-items:left;}
		.grid_list .col.row5{grid-template-rows:repeat(2, 1fr);grid-template-columns:53% 33% 14%}
		.grid_list .col.row5 > li:nth-child(5){grid-row-start:1; grid-row-end:3;grid-column-start:3;grid-column-end:4;}

		.flex_list .col:nth-child(2){border-top: 1px solid #ddd;}
		.flex_list .col.row4 > li:nth-child(1){width: 15%;}
		.flex_list .col.row4 > li:nth-child(2){width: 85%;}
		.flex_list .col.row4 > li:nth-child(3){display: none;}
		.flex_list .col.row4 > li:nth-child(4){display: none;}
		.flex_list .thead{display: none;}

		.board_view .title > span{position:static;display: block;text-align: center;transform: translateY(0%);}
		.board_view .list > span{width: auto;padding: 0 14px;}

	}

/* button */
	.btn{display: inline-block;text-align: center;vertical-align: middle;border: 1px solid transparent;transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;padding: 0.5rem 0.8rem; line-height: 1.5;border-radius: 0.2rem;}
	
	.btn-gray{background-color: #888;border: 1px solid #888;color: #fff;}
	.btn-gray:hover {color: #fff;background-color: #747474;border-color: #747474;}
	.btn-gray:focus, .btn-gray.focus {color: #fff;background-color: #747474;border-color: #747474;box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5);}
	.btn-gray.disabled, .btn-gray:disabled {color: #fff;background-color: #747474;border-color: #747474;}

	.btn-gray-line{background-color: #fff;border: 1px solid #6c757d;}
	.btn-gray-line:hover {color: #fff;background-color: #888;border-color: #545b62;}
	.btn-gray-line:focus, .btn-gray-line.focus {color: #fff;background-color: #888;border-color: #545b62;box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5);}

	
	.btn-maincolor{background-color: #7B6858;border: 1px solid #7B6858;color: #fff;}
	.btn-maincolor:hover{background-color: #7B6858;border: 1px solid #7B6858;color: #fff;}
	.btn-maincolor:focus{background-color: #7B6858;border-color: #7B6858;box-shadow: 0 0 0 0.2rem rgba(143, 121, 54, 0.5);color: #fff;}

	.btn-maincolor-line{background-color: #fff;border: 1px solid #7B6858;color: #7B6858;}
	.btn-maincolor-line:hover{background-color: #7B6858;border: 1px solid #7B6858;color: #fff;}
	.btn-maincolor-line:focus{background-color: #7B6858;border-color: #7B6858;box-shadow: 0 0 0 0.2rem rgba(143, 121, 54, 0.5);color: #fff;}

	@media (max-width:768px){
		.btn{padding: .7rem 1.5rem;}
}


/* input style */
	.custom	input[type="text"],
	.custom	input[type="password"]{display: block;width: 100%;padding: 0.375rem 0.75rem;border: 1px solid #ced4da;border-radius: 0.25rem;font-size: 1rem;line-height: 1.5;}
	.custom	input[type="file"]{color: #666;}
	.custom	input[type="radio"] {display:none;}
	.custom	input[type="radio"] + label {padding-left:25px; font-size:15px; color:#000; background:url("/images/common/radio_btn_off.png") no-repeat 0 center; margin-right:10px;display: inline-block;height:24px;}
	.custom	input[type="radio"]:checked + label {padding-left:25px; font-size:15px; color:#000; background:url("/images/common/radio_btn_on.png") no-repeat 0 center; display: inline-block;height:24px;}
	.custom	input[type="checkbox"] {display:none;}
	.custom	input[type="checkbox"] + label {padding-left:28px; font-size:15px; color:#000; background:url("/images/common/checkbox_btn_off.png") no-repeat 0 center; margin-right:10px;display: inline-block;height:24px;}
	.custom	input[type="checkbox"]:checked + label {padding-left:28px; font-size:15px; color:#000; background:url("/images/common/checkbox_btn_on.png") no-repeat 0 center;}


	input.w30{width: 30px !important;}
	input.w40{width: 40px !important;}
	input.w50{width: 50px !important;}
	input.w60{width: 60px !important;}
	input.w70{width: 70px !important;}
	input.w80{width: 80px !important;}
	input.w90{width: 90px !important;}
	input.w100{width: 100px !important;}



/* padding, margin */
.mgb0{margin-bottom: 0 !important;}
.mgb10{margin-bottom: 10px !important;}
.mgb20{margin-bottom: 20px !important;}
.mgb30{margin-bottom: 30px !important;}
.mgb40{margin-bottom: 40px !important;}
.mgb50{margin-bottom: 50px !important;}
.mgb60{margin-bottom: 60px !important;}
.mgb70{margin-bottom: 70px !important;}
.mgb80{margin-bottom: 80px !important;}
.mgb90{margin-bottom: 90px !important;}
.mgb100{margin-bottom: 100px !important;}

.mgt0{margin-top: 0px !important;}
.mgt10{margin-top: 10px !important;}
.mgt20{margin-top: 20px !important;}
.mgt30{margin-top: 30px !important;}
.mgt40{margin-top: 40px !important;}
.mgt50{margin-top: 50px !important;}
.mgt60{margin-top: 60px !important;}
.mgt70{margin-top: 70px !important;}
.mgt80{margin-top: 80px !important;}
.mgt90{margin-top: 90px !important;}
.mgt100{margin-top: 100px !important;}

.mgl0{margin-left: 0px !important;}
.mgl10{margin-left: 10px !important;}
.mgl20{margin-left: 20px !important;}
.mgl30{margin-left: 30px !important;}
.mgl40{margin-left: 40px !important;}
.mgl50{margin-left: 50px !important;}
.mgl60{margin-left: 60px !important;}
.mgl70{margin-left: 70px !important;}
.mgl80{margin-left: 80px !important;}
.mgl90{margin-left: 90px !important;}
.mgl100{margin-left: 100px !important;}

.mgr0{margin-right: 0px !important;}
.mgr10{margin-right: 10px !important;}
.mgr20{margin-right: 20px !important;}
.mgr30{margin-right: 30px !important;}
.mgr40{margin-right: 40px !important;}
.mgr50{margin-right: 50px !important;}
.mgr60{margin-right: 60px !important;}
.mgr70{margin-right: 70px !important;}
.mgr80{margin-right: 80px !important;}
.mgr90{margin-right: 90px !important;}
.mgr100{margin-right: 100px !important;}

.pd0{padding: 0px !important;}
.pd10{padding: 10px !important;}
.pd20{padding: 20px !important;}
.pd30{padding: 30px !important;}
.pd40{padding: 40px !important;}
.pd50{padding: 50px !important;}
.pd60{padding: 60px !important;}
.pd70{padding: 70px !important;}
.pd80{padding: 80px !important;}
.pd90{padding: 90px !important;}
.pd100{padding: 100px !important;}

.pdt0{padding-top: 0px !important;}
.pdt10{padding-top: 10px !important;}
.pdt20{padding-top: 20px !important;}
.pdt30{padding-top: 30px !important;}
.pdt40{padding-top: 40px !important;}
.pdt50{padding-top: 50px !important;}
.pdt60{padding-top: 60px !important;}
.pdt70{padding-top: 70px !important;}
.pdt80{padding-top: 80px !important;}
.pdt90{padding-top: 90px !important;}
.pdt100{padding-top: 100px !important;}

.pdb0{padding-bottom: 0px !important;}
.pdb10{padding-bottom: 10px !important;}
.pdb20{padding-bottom: 20px !important;}
.pdb30{padding-bottom: 30px !important;}
.pdb40{padding-bottom: 40px !important;}
.pdb50{padding-bottom: 50px !important;}
.pdb60{padding-bottom: 60px !important;}
.pdb70{padding-bottom: 70px !important;}
.pdb80{padding-bottom: 80px !important;}
.pdb90{padding-bottom: 90px !important;}
.pdb100{padding-bottom: 100px !important;}

.pdl0{padding-left: 0px !important;}
.pdl10{padding-left: 10px !important;}
.pdl20{padding-left: 20px !important;}
.pdl30{padding-left: 30px !important;}
.pdl40{padding-left: 40px !important;}
.pdl50{padding-left: 50px !important;}
.pdl60{padding-left: 60px !important;}
.pdl70{padding-left: 70px !important;}
.pdl80{padding-left: 80px !important;}
.pdl90{padding-left: 90px !important;}
.pdl100{padding-left: 100px !important;}

.pdr10{padding-right: 10px !important;}
.pdr20{padding-right: 20px !important;}
.pdr30{padding-right: 30px !important;}
.pdr40{padding-right: 40px !important;}
.pdr50{padding-right: 50px !important;}
.pdr60{padding-right: 60px !important;}
.pdr70{padding-right: 70px !important;}
.pdr80{padding-right: 80px !important;}
.pdr90{padding-right: 90px !important;}
.pdr100{padding-right: 100px !important;}



/*--------------------------------------------------------------
reset
--------------------------------------------------------------*/
	*{margin:0;padding:0;box-sizing:border-box;word-break: keep-all;}
	body,input,select,textarea,button{font:16px/1.5 'Noto Sans KR','돋움','굴림','Gulim',sans-serif ; color:#333;}
	a,img,input{outline:none;}
	li{list-style:none;vertical-align:top;}
	fieldset,iframe{border:none 0;vertical-align:top;border:0 none;}
            img{border:none 0;border:0 none;}
	input,select,button{vertical-align:middle;}
	strong,address,th{font-style:normal;font-weight:normal;}
	label,button{cursor:pointer;margin-bottom: 0;}
	.hide,.skip,legend,caption{position:absolute;left:-9999px;width:0;height:0;font-size:0;overflow:hidden;text-indent:-9999px;}
	table{width:100%;table-layout:fixed;border-spacing:0;border-collapse:collapse;}
	a{text-decoration:none;color:#333;}
	a:hover,a:focus{text-decoration:none;}
	input[type="text"], input[type="password"]{border:1px solid #ddd;padding:0 6px;}
	button{border: 0;}
	label{font-weight: normal;position: relative;top: 2px;}
	textarea{border: 1px solid #ddd;}
	i{font-style: normal;}
	td{word-wrap:break-word}

	input::placeholder { color: #8B8B8B !important;  }
	textarea::placeholder { color: #8B8B8B !important;  }
	input::-webkit-input-placeholder { color: #8B8B8B !important;  }  /* 크롬 구버전 */
	input:-ms-input-placeholder { color: #8B8B8B !important;  } /* IE적용 */