@charset "utf-8";
/*2024 - 01 - 11   DMAX MAXBOARD  [ BASIC BOARD ] 
* common
* List
* View
* Write
* ETC
*/

/**************************************
common
***************************************/

	.full_input {width:100%}
	.half_input {width:49.5%}


	.wr_content textarea {border:2px solid #000;padding:2rem;line-height: 150%; resize: none; border-radius:0; ;}
	.max_input {display:block; height:auto; padding:10px 0; border:0; border-bottom:2px solid #000; font:inherit; letter-spacing:-0.04em; -webkit-appearance:none; -webkit-border-radius:0;}
	.max_input:focus {border-bottom:2px solid #1dac6a;}
	input[type="password"] {background:url("../../max_board_basic/image/common/ico_pass_hide.png") 96% center no-repeat;} 
	
	input[type=text],input[type=password], textarea {
	-webkit-transition:all 0.30s ease-in-out;
	-moz-transition:all 0.30s ease-in-out;
	-ms-transition:all 0.30s ease-in-out;
	-o-transition:all 0.30s ease-in-out;
	outline:none;
	}

	input[type=text]:focus,input[type=password]:focus, textarea:focus,select:focus {
	-webkit-box-shadow:0 0 5px #9ed4ff;
	-moz-box-shadow:0 0 5px #9ed4ff;
	box-shadow:0 0 5px #9ed4ff;
	border:1px solid #558ab7 !important;
	}

	/* selectbox */
	.max_select {display:block; height:auto; padding:10px 0; border:0; border-bottom:2px solid #000;background: url("../../max_board_basic/img/ico_select.png") 98% 50% #fff no-repeat;background-size:8px;border-radius:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-sizing:border-box;letter-spacing:-1px;font-size:inherit;}
	.max_select::-ms-expand {display:none;}
	.max_select:focus {border-bottom:2px solid #1dac6a;}

	/*체크박스 커스텀*/
	.max_ckit input[type="checkbox"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0; }
	.max_ckit input[type="checkbox"] + label { display: inline-block; position: relative; padding-left: 30px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }
	.max_ckit input[type="checkbox"] + label:before { content: ''; position: absolute; left: 0; top: -4px; width: 21px; height: 21px; text-align: center; background: #fff; border: 1px solid #ccc; border-radius:3px; }
	.max_ckit input[type="checkbox"] + label:active:before, .checks input[type="checkbox"]:checked + label:active:before { box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1); }
	.max_ckit input[type="checkbox"]:checked + label:before { background: #fff; border-color: #ccc; }
	.max_ckit input[type="checkbox"]:checked + label:after { content: ''; position: absolute; top: 2px; left: 6px; width: 9px; height: 9px; background: #006f76; border-radius: 0; box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3); }

	/*라디오버튼 커스텀*/
	input[type="radio"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0; }
	input[type="radio"] + label { display: inline-block; position: relative; padding-left: 30px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }
	input[type="radio"] + label:before { content: ''; position: absolute; left: 0; top: -4px; width: 21px; height: 21px; text-align: center; background: #fff; border: 1px solid #ccc; border-radius: 100%; }
	input[type="radio"] + label:active:before, .checks input[type="radio"]:checked + label:active:before { box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1); } 
	input[type="radio"]:checked + label:before { background: #fff; border-color: #ccc; }
	input[type="radio"]:checked + label:after { content: ''; position: absolute; top: 2px; left: 6px; width: 9px; height: 9px; background: #006f76; border-radius: 100%; box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3); }

	/* 체크박스 */
	.selec_chk {position:absolute;top:0;left:0;width:0;height:0;opacity:0;outline:0;z-index:-1;overflow:hidden}
	.chk_box {position:relative}
	.chk_box input[type="checkbox"] + label {position:relative;color:#676e70; text-align:Center;   line-height: 30px; display: inline-table;vertical-align: middle;}
	.chk_box input[type="checkbox"] + label:hover {color:#676e70}
	.chk_box input[type="checkbox"] + label span {float:left;width:25px;height:25px;display:inline-block;margin-right:10px;text-align: center;background:#ddd url(../../max_board_basic/img/chk.png) no-repeat 50% 50%;}
	.chk_box input[type="checkbox"]:checked + label {color:#000}
	.chk_box input[type="checkbox"]:checked + label span {background:url(../../max_board_basic/img/chk.png) no-repeat 50% 50% var(--main-color1);}
	
	.chk_box	input[type="radio"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0; }
	.chk_box	input[type="radio"] + label { display: inline-block;  margin-right:20px; position: relative; padding-left: 30px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }
	.chk_box	input[type="radio"] + label:before { content: ''; position: absolute; left: 0; top: -4px; width: 24px; height: 24px; text-align: center; background: #ddd url(../../max_board_basic/img/chk.png) no-repeat 50% 50%;; border: 1px solid #ccc; border-radius: 100%; }
	.chk_box	input[type="radio"] + label:active:before, .checks input[type="radio"]:checked + label:active:before { box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1); } 
	.chk_box	input[type="radio"]:checked + label:before { background: #fff; border-color: #ccc; }
	.chk_box	input[type="radio"]:checked + label:after { content: ''; position: absolute; top: -4px; left: 0px; width: 24px; height: 24px; background: #00a080 url(../../max_board_basic/img/chk.png) no-repeat 50% 50%;     border: 1px solid #AE875E; border-radius: 100%; box-shadow:none; }

	.max_tta {width:100%; height:auto; border-bottom:2px solid #d7d7d7; margin-top:16px; line-height:1.6;}
	.max_tta:focus {border-bottom:2px solid #1dac6a;}


/*-------------------------------------------------*/
:root {--board-color1:#ef5a02;}

/*-------------------------------------------------*/
.col-gn-1 {width: 100%;}
.col-gn-2 {width: 50%;}
.col-gn-3 {width: 33.33%;}
.col-gn-4 {width: 25%;}
.col-gn-5 {width: 20%;}

/*-------------------------------------------------*/

#max_board_wrap {position: relative; padding:10rem 0;}

#max_bo_top {position: relative; margin-bottom: 5rem; }
#max_bo_top section {position: relative; display:flex; width: 100%; align-items: center; justify-content: space-between;}
#max_bo_bottom  {position: relative; margin-top: 5rem; }
#max_bo_bottom section {}

.max_view #max_bo_bottom .nav_wrap {margin-top:5rem;}
.max_view #max_bo_bottom .nav_wrap ul{justify-content: center;}

/*-------------------------------------------------*/
.pageinfo_wrap { position: relative; width: 100%;}
.pageinfo_wrap span {font-weight: bold; color:var(--board-color1); }
/*-------------------------------------------------*/
.category_wrap {position: relative; width: 100%;}
.category_wrap ul { display:flex;}
.category_wrap ul li {}
.category_wrap ul li a {min-width:8rem;text-align: center; display: inline-block; padding:2rem 2rem; position: relative;}
.category_wrap ul li a#bo_cate_on {font-weight: bold; color:var(--board-color1);}
.category_wrap ul li a#bo_cate_on::before {content:''; width: 100%; height: 2px; background: var(--board-color1); position: absolute; bottom:0; left:0;}
/*-------------------------------------------------*/
.title_wrap {position: relative;width: 100%; text-align: left; padding:0 0 5rem ;border-bottom:2px solid #000;}
.title_wrap .info {position: relative;	display:flex;align-items: center;  font-size: 1.25em;margin-bottom: 2rem;}
.title_wrap .info  p {color:var(--board-color1);font-weight: bold;display: inline-block;margin-right:2rem;}
.title_wrap .info  span {font-size: .8em;}
.title_wrap h2 {font-size: 3em;}
.title_wrap h2 em {display: block;font-size: 1.6rem;margin-top:2rem; color:#888;}
/*-------------------------------------------------*/
.nav_wrap {position: relative; width: 100%;}
.nav_wrap ul { display:flex; justify-content: flex-end;flex-wrap: wrap;}
.nav_btn { border:0; margin:0 2px; width: 8rem; height:4rem; display:flex; justify-content: center; align-items: center;}
.nav_ty1 {background:#fff; border:1px solid var(--board-color1); color:var(--board-color1);} /*컬러셋1*/
.nav_ty2 {background:var(--board-color1); color:#fff;} /*컬러셋2*/
.nav_ty3 {background:#333; color:#fff;} /*컬러셋3*/
/*-------------------------------------------------*/
.search_wrap {position: relative; width: 100%;background: #f5f5f5; padding:1rem 0;}
.bo_sch {position:relative;width: 100%; display: flex; justify-content: center;}
.bo_sch:after {display:block;visibility:hidden;clear:both;content:""}
.bo_sch h3 {padding:15px;border-bottom:1px solid #e8e8e8}
.bo_sch legend {background:red}
.bo_sch form {padding:15px 0;display:block; margin:0 auto;}
.bo_sch select {width:15%;height:50px; padding:10px 15px; vertical-align: top; border:1px solid #ddd;}
.bo_sch .sch_bar {display:inline-block;clear:both;width:30%;}
.bo_sch .sch_input {width:100%;height:50px; border:1px solid #ddd; padding:10px 15px;background-color:#fff;float:left; }
.bo_sch .sch_btn {height:50px;color:#fff;background:#333;border:0;width:100px;font-size:15px;   vertical-align: top;}
.bo_sch .sch_btn span {margin-left:10px;}
/*-------------------------------------------------*/
.direction_wrap {position: relative;width: 100%;border-top: 1px solid #eee;}
.direction_wrap a { display: flex; align-items: center; padding: 1.5rem 0;border-bottom: 1px solid #eee;}
.direction_wrap a .tit { width: 10%; display: flex; align-items: center;}
.direction_wrap a .tit  i { font-size: 1.25em; margin-right: 1rem;}
.direction_wrap a .cont { width: 90%; display: flex; justify-content: space-between;  align-items: center;}
.direction_wrap a .cont strong { width: 80%; line-height: 130%; text-overflow: ellipsis; white-space:nowrap; word-wrap:normal; overflow:hidden;}
.direction_wrap a .cont span {font-size: .9em;}

/* 페이징 *//*-------------------------------------------------*/
.pg_wrap {clear:both;float:inherit;display:block; position: relative;text-align: center; margin:30px 0;}
.pg_wrap:after {display:block;visibility:hidden;clear:both;content:""} 
.pg {text-align:center}
 .pg_current {display:inline-block;height:40px; width:40px; color:#fff; line-height:40px; vertical-align:middle;background:var(--board-color1); border:0; border-radius:100%;}
.pg a:focus, .pg a:hover {text-decoration:none}
.pg_page {color:var(--board-color1); background:#fff; border:1px solid #ddd; font-size:1.083em;height:40px; width:40px; line-height:40px;padding:0 5px;min-width:30px;text-decoration:none;border-radius:100%; }
.pg_page:hover {background-color:#fafafa}
.pg_start {text-indent:-999px;overflow:hidden;background:url('/img/btn_first.gif') no-repeat 50% 50% #fff;padding:0;border:1px solid #ddd; margin-right:10px;}
.pg_prev {text-indent:-999px;overflow:hidden;background:url('/img/btn_prev.gif') no-repeat 50% 50% #fff;padding:0;border:1px solid #ddd;}
.pg_end {text-indent:-999px;overflow:hidden;background:url('/img/btn_end.gif') no-repeat 50% 50% #fff;padding:0;border:1px solid  #ddd; margin-left:10px;}
.pg_next {text-indent:-999px;overflow:hidden;background:url('/img/btn_next.gif') no-repeat 50% 50% #fff;padding:0;border:1px solid  #ddd;}
.pg_start:hover,.pg_prev:hover,.pg_end:hover,.pg_next:hover {background-color:#fafafa}


/**************************************
List
***************************************/
#max_bo_list {position: relative;}

.board_list {position: relative; }
.board_list .list_header {display:flex;justify-content: space-between;padding:2rem 0;font-weight: bold;border-top:2px solid var(--board-color1); border-bottom:1px solid #aaa; background-color:#fff ;align-items: center;text-align: center;}
.board_list .list_content {display:flex;justify-content: space-between; align-items: center; padding:2rem 0;border-bottom:1px solid #ddd; text-align: center;}
.board_list .list_content .tit {text-align:left;}
.board_list .chk {width: 5%;}
.board_list .no {width: 5%;}
.board_list .cate {width: 20%;}
.board_list .tit {width: 52%;	}
.board_list .date {width: 10%;}
.board_list .writer {width: 10%;}
.board_list .data {width: 8%;}
.board_list .data i {font-size: 1.5em;}
.board_list .tit .suj_title .bo_tit {display:flex; }
.board_list .tit .suj_title .bo_tit a{font-size: 1.125em;font-weight: bold;  text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow:hidden;}
.board_list .tit .suj_title .bo_tit span {margin-left:1rem; color:var(--board-color1);font-size: 1.25em;}
.board_list .empty_box {width: 100%; height: 20rem;display: flex; flex-direction: column; align-items: center; justify-content: center;  border-bottom: 1px solid #ddd;}
.board_list .empty_box i {font-size: 2em;margin-bottom: 1rem;}

.board_list .no2 {width:3%;}
.board_list .img2 {width: 15%; text-align:center;}
.board_list .img2 img {width:120px;}
.board_list .cate2 {width:8%;}
.board_list .tit2 {width:65%;}
.board_list .tit2 .cate_txt { color:#ef5a02; font-weight:600;}
.list_content .tit2 {text-align:left;}
.board_list .go2 {width:10%;}
.board_list .go2 a { width:100px; height:40px; border-radius:50px; border:1px solid #ef5a02; line-height:38px; text-align:center; color:#ef5a02; display:block; margin:0 auto;}

/**************************************
View
***************************************/
#max_bo_view {position: relative; }
.view { margin:5rem 0;}
.view #gall_img {position: relative; text-align: center; margin:5rem 0;}
.view #gall_img img {width: 100%; height: auto;}
.view #bo_v_con {line-height:150%;}
.view #bo_v_con img {width: 100%; height: auto;}


.file {}
.file ul {}
.file ul li { margin: 1rem 0; }
.file .file_box {position: relative;display: flex;width: 100%;border:1px solid #eee;padding: 1.5rem;justify-content: space-between;align-items: center;}
.file .file_box:hover {background:var(--board-color1); color:#fff;}
.file .file_box .title{display:flex;align-items: center;}
.file .file_box .title i { font-size: 1.5em; margin-right: 1rem;}
.file .file_box .title p {}
.file .file_box .title p > span { font-weight: bold;}
.file .file_box .title p > em { font-size: .8em; margin-left: 1rem;}
.file .file_box .info { font-size: .9em;}

.link {}
.link ul {}
.link ul li {margin: 1rem 0; }
.link .link_box {position: relative;display: flex;width: 100%;border:1px solid #eee;padding: 1.5rem;justify-content: space-between;align-items: center;}
.link .link_box:hover {background:var(--board-color1); color:#fff;}
.link .link_box .title{display:flex;align-items: center;}
.link .link_box .title i { font-size: 1.5em; margin-right: 1rem;}
.link .link_box .title p {}
.link .link_box .title p > span { font-weight: bold;}
.link .link_box .info { font-size: .9em;}



/**************************************
Write
***************************************/
#max_bo_write {position: relative; }
#max_bo_write > ul {display:flex;flex-wrap: wrap; }
#max_bo_write > ul > li.w50p {width: 50%;padding-right:10%;}
#max_bo_write > ul > li.w50 {width: 50%;}
#max_bo_write > ul > li.w100 {width: 100%;}
#max_bo_write > ul > li { padding:2rem 0;display:flex;align-items: flex-start; flex-direction: column;}
#max_bo_write > ul > li .w_subj {width: 100%; margin-bottom: 1rem; font-size: .9em; font-weight: bold;}
#max_bo_write > ul > li .w_content {width: 100%;}

#max_bo_write  .bo_v_option  {display: flex;}
#max_bo_write  .bo_v_option li {display:inline-block;float:left;text-align:left;margin-right:2rem}
#max_bo_write  .bo_v_option li label {vertical-align:middle}
#max_bo_write  .bo_v_option .chk_box input[type="checkbox"] + label span {margin-left:0;margin-right:5px}


/**************************************
ETC
***************************************/
.admission {border:5px solid #eee; padding:4rem 0; margin-bottom: 5rem;	}
.admission  .b_pass {position: relative; }
.admission  .b_pass p {text-align: center;font-size: 1.125em; line-height: 150%;}
.admission .inp-form {display:flex; justify-content: center; align-items: center; margin:2rem 0;}
.admission .inp-form ul {}
.admission .inp-form ul li {margin: 1rem;}
.admission .inp-form ul li label {width: 8rem; display: inline-block;}
.admission .inp-form button {background: #333;width:8rem; height: 9rem; border:0;  color:#fff; border-radius:.5rem;}
.admission .a_agree {text-align: center;}






/**************************************

***************************************/


@media screen and (max-width: 768px) {
    
    .board_list .list_header {display:none;}
    .board_list .list_content {display:block;  padding:20px 0; padding-left:100px; position:relative;}
    .board_list .img2 {position:absolute; left:0; top:20px; width:85px;}
    .board_list .img2 img {width:100%;}
    .list_content .tit2 {padding:10px 0; width:auto;}
    .board_list {border-top:1px solid #ddd; }
    .board_list .no2 {display:none;}
    .board_list .go2 a {height:28px; line-height:26px; font-size:15px; width:80px;}
    
    
	#max_board_wrap {padding:5rem 0;}
	#max_bo_top {margin-bottom: 3rem;}
	#max_bo_top section {flex-direction: column;}

	.category_wrap ul {justify-content: center;margin:1rem 0;}
	.nav_wrap ul {justify-content: center;margin:1rem 0;}

	.board_list .writer {display: none;}
	.board_list .data {display: none;	}
	.board_list .date {width: 20%;}

	.title_wrap h2 {font-size: 1.5em;}
	.title_wrap .info {font-size: 1em;}
	.title_wrap h2 em {font-size: 1.4rem;}

	.file .file_box .info {display: none;}

	.direction_wrap a {flex-direction: column; align-items: flex-start; }
	.direction_wrap a .tit {width: 100%;    margin-bottom: 0.5rem;}
	.direction_wrap a .tit i {font-size: 1em;}
	.direction_wrap a .cont {width: 100%;}

	.nav_btn {font-size: .8em; width: 6rem; height: 3rem;}
	


	.bo_sch select {width: 25%;}
	.bo_sch .sch_bar {width: 40%;}
}


/*=======================* 댓글 *==========================*/
/*댓글 리스트*/
#max_coment {background:#F5F6FA; position: relative; padding:2rem ;}
#max_coment .title { position: absolute;top:0; left:0; width:5rem; height:5rem; line-height:5rem; display: block;color:#fff; text-align: center;}
#max_coment h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#max_coment article { position:relative;}
#max_coment article:after {display:block;visibility:hidden;clear:both;content:""}
#max_coment article .cm_wrap {float:left;width:100%; position: relative; background: #fff; margin: .5rem 0; padding: 1.5rem; border-radius:.5rem;}
#max_coment article .cm_wrap header {margin-bottom:10px;}
#max_coment article .cm_gnb {position: absolute; right:0; top:0;margin: 1.5rem;}
#max_coment article .cm_gnb li {float:left; display: block;}
#max_coment article .cm_gnb li a {background:#fff; /* font-size:0.75rem; */ display: inline-block; border:1px solid #ddd; margin:0 3px; padding:5px 10px;}
#max_coment article .cm_gnb li a:hover {background:#aaa; border:1px solid currentColor; color:#fff;}

#max_coment .member, #max_coment .max_coment, #max_coment .sv_member, #max_coment .sv_guest {font-weight:500}
.bo_vc_hdinfo {color:#777}
#max_coment h1 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#max_coment .cmt_contents {line-height:1.8em;padding:0 0 20px}
#max_coment p a {text-decoration:underline}
#max_coment p a.s_cmt {text-decoration:underline;color:#ed6479}
#bo_vc_empty {margin:0;padding:80px 0 !important;color:#777;text-align:center}
#max_coment #bo_vc_winfo {float:left}
#max_coment .bo_vl_opt {position:absolute;top:0;right:0}


#max_coment_w {position:relative;margin:10px 0;display:block; margin-top:2rem; padding-top:2rem; border-top:1px solid #ddd;}
#max_coment_w:after {display:block;visibility:hidden;clear:both;content:""}
#max_coment_w h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#max_coment_w #char_cnt {display:block;margin:0 0 5px}
#max_coment_w textarea {border:1px solid #ccc;background:#fff;color:#000;vertical-align:middle;padding:5px;width:100%;height:100px;font-family: inherit;}
#wr_secret {}
.bo_vc_w_info {margin:10px 0;float:left}
.bo_vc_w_info:after {display:block;visibility:hidden;clear:both;content:""}
.bo_vc_w_info .frm_input {float:left;margin-right:5px}
.bo_vc_w_info #captcha {padding-top:10px;display:block;clear:both}
.bo_vc_w .btn_confirm {clear:both;margin-top:10px; display: flex; justify-content: space-between;}
.bo_vc_w .btn_confirm label {display:inline-block;margin-right:10px;border-radius:3px;font-size:1.5em;text-align:center}
.bo_vc_w .btn_submit {height:45px;padding:0 20px;border-radius:3px;font-weight:bold;font-size:1.083em}
.bo_vc_w .btn_confirm .secret_cm label {font-size:1em !important}
.bo_vc_w_wr:after {display:block;visibility:hidden;clear:both;content:""}
.secret_cm {display:inline-block;float:left}

.etc_info_table {width:100%;border-top:2px solid #b28850;}
.etc_info_table tr {border-bottom:1px solid #ddd;}
.etc_info_table tr th {background:#f5f5f5; padding:15px 20px;text-align:left;	}
.etc_info_table tr td {padding:15px;}