@import url('./css_counsel.css');

.btn_def, a.a_btn_def{display: inline-block; background-color:#565656; padding:8px 28px; margin:5px 2px; border-radius: 30px; color:#fff; font-size:1.23em; border:0;}
.bbs_bot {position:relative;padding-top:25px;width:100%; text-align:center}
.bbs_bot .btn_write {top:25px;right:0;}
.btn_def:hover, a.a_btn_def:hover{color:#e7f6fd}
.board_list_check{vertical-align: middle}

/* list */

.bbs_list {width:100%; border-top:2px solid #806713; table-layout: fixed;}
.bbs_list tr.notice{padding:15px 0;font-size:18px;background:#fffae8; color:#111;  border-bottom:1px solid #c3b06a; font-weight: bold}
.tr_selectd{background-color:#f4f1ff !important}
.bbs_list tr th {padding:15px 0;font-size:18px;background-color:#fffef4; color:#33471c;  border-bottom:1px solid #c3b06a;}
.bbs_list tr td {padding:15px 0;font-size:17px;text-align:center; border-bottom: 1px solid #c3b06a;}
.bbs_list tr td.no {text-align: center;}
.bbs_list tr td.subj {padding-left:10px;text-align:left; white-space: nowrap;	overflow: hidden; text-overflow: ellipsis;}
.bbs_list tr td.subj a {color:#333;   }
.bbs_list tr td.subj a:hover {color:#075cc5;}
.bbs_list tr td.subj span.repl_nums{color: #aaa;}
.bbs_list tr td.subj span.del_txt{color: red;}
.bbs_list tr td.subj span.kwd_search{color: red; font-weight: bold;}
.bbs_list tr td.date, table.bbs_list tr td.hit , table.bbs_list tr td.w_name {color: #777;}

span.board_gbn{border:0px solid #333; color: #fff; background-color: #c54c4c; padding: 4px 12px; margin-right: 5px; border-radius: 6px; font-weight: bold}
span.board_gbn.i0{background-color: #c54c4c;}
span.board_gbn.i1{background-color: #c8a44d;}
span.board_gbn.i2{background-color: #83c84d;}
span.board_gbn.i3{background-color: #4dc8c4;}
span.board_gbn.i4{background-color: #4d58c8;}
span.board_gbn.i5{background-color: #bb4dc8;}

a.gbn_btn{border:0px solid #333; color: #333; background-color: #fff; padding: 4px 12px; margin-right: 5px; border-radius: 6px; font-weight: bold; border:1px solid #efefef}
a.gbn_btn:hover, a.gbn_btn.hover{color:#fff; background-color: #333;  border:1px solid #333}
div.gbn_area{display: inline-block; float: left; margin-top:13px}

i.secr{color: #d04b4b;    border: 0px solid #000;    margin-right: 3px;    font-size: 19px;    cursor: default;    vertical-align: middle;}
i.notice{color: #c3b06a;    border: 0px solid #000;    font-size: 26px;    cursor: default;    vertical-align: middle;}
i.files{color: #c3b06a; font-size:1.5em;vertical-align:-5px}
span.del_txt{color: red;}
span.repl_nums{color: #999;font-size:0.8em; margin-left:5px}

.board_search_area {padding:5px 20px 10px 5px; overflow: hidden; text-align: right}

form.find_form {    display: inline-block;    border: 1px solid #555;    padding: 5px 7px 5px 17px;    border-radius: 30px;}
form.find_form input.find_txt {width: 330px;    height: 29px;    color: #333;    font-size: 18px;    border: 0;    margin: 0;    padding: 2px;    vertical-align: middle;  border-radius: 3px; outline: 0}
form span.find_view{background-color: #edc45e;    padding: 0;    margin: 0;    display: inline-block;    width: 32px;    height: 32px;    cursor: pointer;    border-radius: 30px;}
form span.find_view i{color: #fff;    font-size: 28px;   vertical-align: middle;  padding: 2px 0 0 2px;}

/* m_board_read */

.bbs_read{padding:5px; border:0}
.read_top{margin:10px 0 0 0; padding:20px 5px 20px 20px;background-color: #f3f3f3; font-size:18px; font-weight: 700; border:1px solid #aaa; border-width: 1px 0; border-bottom-color:#ccc}
.read_top_info{background-color: #f9f9f9; font-size:16px; margin: 0; padding: 12px 25px; border-bottom:1px solid #333; text-align: right}

.bbs_comment_view{padding:20px;font-size: 16px; line-height: 1.5em;}
.bbs_comment_view img{max-width:98%; height:auto; object-fit: contain; display: block; margin: auto}
.download_area{margin:40px 20px; padding:10px 30px; border:1px dotted #aaa; background-color: #f3f3f3; font-size:25px; border-radius: 30px}
.download_area i.file_dn_icon{font-size:40px; vertical-align: middle; color:var(--mian-color)}
.download_area .file_lists{display: inline-block; padding: 7px 15px; border-radius: 20px; border: 1px solid #048dc8; background-color: #d8e1ec; cursor: pointer;color: #333; margin:0 3px;font-size: 18px; vertical-align: middle}
.download_area .file_lists:hover{background-color: #5080ec; color: #fff; border-color:  #5080ec;}


.read_top .cal_op{display: inline-block; padding: 3px 10px; background-color: #133863; color: #fff; border-radius: 6px;}

/* image board */
.bbs_list_image{text-align: left; overflow: hidden; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content:flex-start; gap:1.33%}
.bbs_list_image li{padding:0; margin:0 ;margin-bottom:50px; width:24%;display:inline-block; overflow: hidden; border:1px solid #aaa; border-radius: 12px;} 
.bbs_list_image li div.img {padding:0px;width:100%; height: 220px ; display:inline-block; background-size:cover; background-position: center; background-repeat: no-repeat; cursor: pointer}
.bbs_list_image li p.subj{padding:0 10px ; margin:0; text-align:left;  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.bbs_list_image li p.subj a{width:100%;} 
.bbs_list_image li p.info{vertical-align: top; font-size:14px; color:#777; text-align: right; margin:0; padding:5px 20px}
.bbs_list_image li div.img_card {padding:0px;width:100%; height: 220px ; display:inline-block; background-size:cover; background-position: top; background-repeat: no-repeat; cursor: pointer}


.bbs_list_vod{text-align: left; overflow: hidden; }
.bbs_list_vod li{padding:0; margin:1%;margin-bottom:50px; float:left; width:31%;display:inline-block; overflow: hidden; border:1px solid #aaa; border-radius: 12px;} 
.bbs_list_vod li div.img {padding:0px;width:100%; height: 220px ; display:inline-block; background-size:cover; background-position: center; background-repeat: no-repeat; cursor: pointer}
.bbs_list_vod li p.subj{padding:0 10px ; margin:0; text-align:left;  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.bbs_list_vod li p.subj a{width:100%;} 
.bbs_list_vod li p.info{vertical-align: top; font-size:14px; color:#777; text-align: right; margin:0; padding:5px 20px}


/*
.m_bbs_read li.bbs_read_title {font-size:1.2em; color:#333; padding:5px 5px 1px 5px}
.m_bbs_read li.bbs_read_title span.del_txt{color: red;}
.m_bbs_read li.bbs_read_title i.secr{color: #f71873; font-size:1em;vertical-align:-1px}

.m_bbs_read li.bbs_read_title img {width: 38px; height: auto; margin-bottom: -3px; margin-right: 5px;}
.m_bbs_read li.bbs_read_title_info {font-size:0.75em; color:#777; padding:3px 5px; border-bottom:1px solid #ccc; text-align:right}
*/
.board_view_image{margin: 0 auto; display: block; max-width: 95%}

.bbs_wr{padding:6px 3px; margin: 0; border-bottom: solid 1px #ccc; vertical-align: middle; background: #fafafa}
.bbs_wr span{display:inline-block; width: 130px; font-size:18px}
.bbs_wr span i{font-size:12px; margin-right:3px}
.bbs_wr input.insert_txt {width:800px; padding:5px 7px; border:0; background-color: #fff; font-size: 1.2em; border:1px solid #666; border-radius: 5px}
.bbs_wr input[type=password] {width:200px; padding:5px 7px; border:0; background-color: #fff; font-size: 1.2em; border:1px solid #f88; border-radius: 5px}
.bbs_wr  span.info_gray{font-size:0.8em; color:#aaa ;display: inline-block}
.bbs_wr  span.info_secr{font-size:1em; color:#333;display: inline}
.bbs_wr .secr{accent-color:red}
.bbs_wr label{margin-right:12px}



.in_su, .in_su_pass{display: block; padding: 80px; text-align: center; margin: 50px auto; width:50%; min-width: 350px; border:2px dashed #aaa; border-radius:30px; background-color: #f3f3f3 }
.in_su_pass input[type="password"]{font-size:16px; border:2px solid #c63d3d; color:#c63d3d; padding: 10px 12px; border-radius: 6px; width:250px}
.in_su_pass input::placeholder{	color: #999;font-size: 1em;display: inline-block;}




.bbs_file_up_area{padding:18px;}
.bbs_file_up_area p{padding: 12px 5px; border-bottom:1px dashed #aaa; margin: 0; font-size:14px}
.bbs_file_up_area .file_tit{display: inline-block; width:120px; font-weight: 700}


/* 달력 */
div.calendar_move{text-align: center; font-size: 32px; margin-top: 20px; text-align: center; font-family:var(--body-font); font-weight: 500;}
div.calendar_move a{color:#565656}
div.calendar_move a:hover{color: #319a3a;}
div.calendar_move span.ym{color: #565656;}
div.calendar_move span.arr{ cursor: pointer;}


div.calendar_cap{text-align: right; padding:5px;}
div.calendar_cap a{padding: 3px 10px; font-size: 14px; color: #333; margin: 2px 0; border-radius: 6px; display:inline-block; }
div.calendar_cap a.cap1{background-color: #cbf1cf;}
div.calendar_cap a.cap2{background-color: #f1ddcb;}
div.calendar_cap a.cap3{background-color: #c6d4fb;}



table.calendar{width:100%;border-collapse: collapse;border:0 ;table-layout:fixed; color: #555;}
table.calendar th{padding:8px; font-size:15px;color:#fff; background-color:#666; text-align:center; border:1px solid #fff}
table.calendar td{border:1px solid #c9c9cb; padding:3px; vertical-align: top;height: 150px;}
table.calendar td.nonday{background-color:#f3f3f3}
table.calendar td p{padding:0; margin:0;text-align:left; font-weight:600; font-size: 13px;}
table.calendar td p.sun{color:red;font-size:11px;padding:3px}
table.calendar td p.sat{color:blue;font-size:11px;padding:3px}
table.calendar td p.nor{color:#333;font-size:11px;padding:3px}
table.calendar td a{display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;padding: 1px 6px; font-size: 12px; color: #333; margin: 2px 0; border-radius: 6px}
table.calendar td a:hover{color: #a91616; }
table.calendar td a.p1{background-color: #cbf1cf;}
table.calendar td a.p2{background-color: #f1ddcb;}
table.calendar td a.p3{background-color: #c6d4fb;}

.bgc_change_0{background-color: #cbf1cf;}
.bgc_change_1{background-color: #f1ddcb;}
.bgc_change_2{background-color: #c6d4fb;}


/* 카드뉴스 */

div.card_slide{width:90%; max-width: 980px; margin: 0 auto; position: relative; aspect-ratio: 1 / 1}
div.card_slide ul{margin: 0; padding: 0; list-style: none;}
div.card_slide li.slide_li{ width: 100%; aspect-ratio: 1 / 1; background-position:center center ; z-index:-100 ;background-repeat: no-repeat; background-size: contain}

.vdo_view{width:98%; height:auto; display: block; margin: 20px auto;}
.video-container{aspect-ratio: 16 / 9; width: 96%; max-width: 1200px; margin: 20px auto}
.video-container_shorts{aspect-ratio: 9/16; width: 80%; max-width: 800px; margin: 20px auto}

/*리플*/
p.repl_nums{text-align:left;color:#b83874;font-weight:bold;clear:both; padding-top:20px}
div.repl_body{background-color:#f6f6f6;padding:10px}
div.repl_body div.repl_title{width:100%;height:20px}
div.repl_body div.repl_title span.name{float:left; font-size:16px; color:#333333; font-family:"돋움"; font-weight:bold}
div.repl_body div.repl_title span.date{float:right; font-size:13px;color:#aaaaaa;font-family:Arial}
div.repl_body div.repl_title span.del{float:right; cursor:pointer;font-size:13px;color:#787878;font-family:Arial; margin:0 10px}
div.repl_body div.repl_title span.deld{font-size:13px;color:red; margin:0 10px}
div.repl_body div.repl_view {margin:5px 0 0 5px; color: #666; line-height: 1.65em;}

div.repl_del{display:none;line-height:22px;text-align:left;width:100%;background-color:#fff5e0; text-align:right}
div.repl_del form{text-align:right}
p.repl_line{margin:30px 0;height:1px; border-bottom:1px dashed #aaa;}



div.repl_wr_box{background-color:#f2f1ed;border:1px dotted #aaa; padding:10px; overflow: hidden;}
textarea.repl_comment{border-style:solid;border-color:#aaa;border-width:1px;height:80px;width:-webkit-fill-available;margin:10px 0;border-radius: 5px; overflow: auto; float: left;}
input.repl_up{width:-webkit-fill-available;height:30px;float:right;margin:0px; font-size: 16px; border: 1px solid #ccc; background: #f3f3f3; border-radius: 5px; float: right;cursor: pointer;}

input.repl_wr{border: 1px solid #aaa; padding:3px ;}
input.repl_wr.name{width:90px}
input.repl_wr.pass{width:90px}

form.repl_del_form{background-color:#d8eaea;padding:5px 10px; float: right; display: inline-block; border: 1px solid #799494; margin-left: 20px;}
form.repl_del_form input.repl_dl_pass{ padding: 2px 5px; border:1px solid #c58383;width:80px;height: 25px;}
form.repl_del_form input.repl_dl_btn{border: 1px solid #E5D3F2; padding: 2px 5px; cursor: pointer;height: 25px;}
form.repl_del_form input.repl_dl_btn.act{border-color: #E5D3F2;}
form.repl_del_form input.repl_dl_btn.cnsl{}

/* faq */
.faq_list_box{ border:1px solid #2b4a0c; border-width: 1px 0px 0px 1px; overflow: hidden; margin-bottom:30px}
.faq_list{float:left; width:20%; border:1px solid #2b4a0c; border-width: 0px 1px 1px 0; text-align: center; padding:20px 10px; font-size:18px; font-weight: bold}
.faq_list:hover, .faq_list.hover{background-color: #e0f6c8; color:#0c1701}

.faq_accordion {border-top:2px solid #666; margin-top:0px}
.faq_accordion dt {position: relative; /* 화살표 배치를 위해 */padding: 15px 40px 15px 15px;background: #ffffff;border-bottom: 1px solid #eee;cursor: pointer;font-weight: bold;transition: background 0.3s; font-size:18px}
.faq_accordion dt span{display: inline-block; text-align: center; padding: 8px 12px 8px 10px; border-radius: 30px; font-size:28px; font-weight: 800 ; background-color: #ffcd4a ; color:#fff; vertical-align: middle; }
.faq_accordion dt strong{width:200px; color:#333; display: inline-block; text-align: center; vertical-align:middle; }
.faq_accordion dt p{display: inline-block; width:calc(100% - 270px) ; vertical-align:middle; margin: 0; padding: 0; font-weight: 300; font-family: var(--body-font);font-size:17px}
.faq_accordion dt span.kwd_search{padding: 0; font-size: 18px; border: 0; background-color: initial; color: red}

/* 우측 화살표 아이콘 (가상 요소) */
.faq_accordion dt::after {content: '▼';position: absolute;right: 15px;top: 50%;transform: translateY(-50%);font-size: 18px;transition: transform 0.3s; /* 회전 애니메이션 */}

/* 활성화 시 화살표 회전 및 배경색 변경 */
.faq_accordion dt.active {background: #fff2d2;color: #333;}
.faq_accordion dt.active::after {transform: translateY(-50%) rotate(180deg); /* 화살표 뒤집기 */}

/* 부드러운 열림 효과의 핵심 */
.faq_accordion dd {overflow: hidden;max-height: 0; /* 처음엔 높이를 0으로 */transition: max-height 0.3s ease-out; /* 스무스한 변화 */background: #fff;margin: 0;border-bottom: 1px solid #eee;}
.faq_accordion dd div {padding: 20px;line-height: 1.6;color: #444; background-color: #fafafa}


/* 교육 신청 */
.m_wr_wrp{max-width:900px; margin: 0 auto;}
.m_wr{padding:8px 3px 8px 15px; margin: 0;  vertical-align: middle; max-width: 880px}
.m_wr span{display:inline-block; width: 200px; font-size:18px}
.m_wr span i{font-size:12px; margin-right:3px}
.m_wr input.insert_txt {width:70% ; padding:5px 7px; border:0; background-color: #fff; font-size: 1.2em; border:1px solid #aaa; border-radius: 0; border-color : #fff #fff #ccc #fff}
.m_wr input.insert_txt:hover { background-color: #eee; border-color:#aaa; border-radius: 6px}
.m_wr input.insert_date{width:120px;  padding:5px 7px; border:0; background-color: #fff; font-size: 1.2em; border:1px solid #aaa; border-radius: 6px}


.m_wr input[type=password] {width:200px; padding:5px 7px; border:0; background-color: #fff; font-size: 1.2em; border:1px solid #f88; border-radius: 5px}
.m_wr  span.info_gray{font-size:0.8em; color:#aaa ;display: inline-block}
.m_wr  span.info_secr{font-size:1em; color:#333;display: inline}
.m_wr .secr{accent-color:red}
.m_wr label{margin-right:20px}
.smd{text-align: center; width: max-content; padding:10px 20px; border:1px solid #aaa; border-radius: 20px; margin: 10px auto}
.smd span{font-size:18px; display: inline-block; padding: 5px 10px; border-radius: 6px;}
.smd label{white-space: nowrap; margin-right:20px}
.smd span.w100{width: max-content}

.edu_view{width:100%; padding:20px; border-radius: 10px; border:1px solid #D4AEAE; background-color: #fffcfc; margin-bottom: 30px}
.edu_view fieldset{width:max-content; font-size:16px; display: inline-block; vertical-align: top; border-radius: 6px;padding :10px 20px; text-align: center; margin:10px 5px; background-color: #fff; min-height: 80px}
.edu_view legend{font-size:18px; font-weight: 700; padding:2px 10px; border:1px solid #aaa; border-radius: 6px; background-color: #f3f3f3}
.edu_view p{font-weight: 700; font-size:18px; color:#333; margin: 0; padding: 0}
a.file_lists_edu_view{display: inline-block; padding: 0px 15px; border-radius: 20px; border: 1px solid #048dc8; background-color: #d8e1ec; cursor: pointer;color: #333; margin:-3px 3px 0 3px;font-size: 16px; vertical-align: middle; }
a.file_lists_edu_view:hover{background-color: #5080ec; color: #fff; border-color:  #5080ec;}


.m_wr select{width:max-content;  padding:5px 7px; border:0; background-color: #fff; font-size: 1.2em; border:1px solid #aaa; border-radius: 6px}
.m_wr_agree{text-align:center; padding: 8px 10px; border:1px solid #aaa; border-radius: 20px; background-color: #fff3f3}
.room_use_info{border:2px dashed #b50000; border-radius: 6px; padding: 10px; font-size:18px; line-height: 25px; background-color: #ffe4e4; width:90%; margin:10px auto}
.room_use_info p{font-size:32px; font-weight: 700; text-align:center}






.datepicker{width:120px !important}





ul.square {  list-style: none; /* 기본 점 제거 */padding: 0;}
ul.square li {position: relative;padding-left: 20px; /* 사각형이 들어갈 자리 */padding : 5px 5px 5px 20px;margin-left:10px}
ul.square  li::before {content: ""; position: absolute; left: 0; top: 10px;  width: 12px;    height: 12px;   border: 1px solid #000;  background-color: #111; border-radius: 3px}






/* 메시지 보내기 */
form.sms_send_board{display: block; border: 1px solid #555; margin-top: 20px;}
form.sms_send_board p.sms_tit{background-color: #555; font-size: 16px; padding: 10px; margin: 0;color: #fff; font-weight: bold;}
form.sms_send_board p.sms_inp{padding: 0px; border-bottom: 1px solid #aaa; margin: 0; vertical-align: middle; font-size: 12px;}
form.sms_send_board p.sms_inp span{background-color: #efefef; padding: 5px; margin: 0; vertical-align: middle; display: inline-block;font-size: 14px;}
form.sms_send_board p.sms_inp span#txt_lng{background-color: #fff; padding: 0px; margin: 0; vertical-align: middle; display: inline-block; font-weight: bold;}

form.sms_send_board p.sms_inp input, form.sms_send_board p.sms_inp select{vertical-align: middle; display: inline-block; height: 25px;}
form.sms_send_board p.sms_inp input.sms_value{border: 1px solid #e1efff; padding: 7px 10px; background-color: #e1efff; width: -webkit-fill-available; height: auto;}
form.sms_send_board p.sms_inp input.sms_value:focus{background-color: #fff; border: 1px solid #333;}
form.sms_send_board p.sms_inp input[type=button]{display: block; text-align: center; cursor: pointer; width: -webkit-fill-available; height: auto; padding:8px; border:1px solid #aaa; border-width:1px 0 0 0;font-size: 16px;}
form.sms_send_board p.sms_inp input[type=button]:hover{color: #fff; background-color: #666;}




/* 페이지 이동 
div.page {display: grid;  grid-auto-flow:column; justify-content: center; place-items: center;  padding:20px; overflow: hidden; width:content-box; }
div.page a{padding:8px 15px;color:#333; border:1px solid #666; font-size: 26px; font-weight: 800; margin:3px; border-radius: 33px;min-width:48px; height:48px; line-height: 34px}
div.page a:hover, div.page a.hover{color:#fff;background-color:#333; border-color:#333}
div.page a i{    line-height: 32px; font-size:30px; }
*/

.clr {clear:both;}
.pos_abs {position:absolute;}
._center{text-align:center}

table.tmp_tb{width:800px; border-collapse:collapse; margin:10px auto;overflow:hidden}
table.tmp_tb tr{border:1px solid #aaa}
table.tmp_tb tr th{font-size:20px; text-align:center;padding:7px; background-color:#eee}
table.tmp_tb tr th.tit{font-size:16px; text-align:center;padding:7px; background-color:#fafafa; border:1px solid #aaa;}
table.tmp_tb tr td{padding:5px; border:1px solid #aaa; line-height:25px}
table.tmp_tb tr td.tit{width:155px; font-size:15px; text-align:center}
table.tmp_tb tr td.img{padding:5px; }
table.tmp_tb tr td.img img{width:200px; margin:3px; float:left }
table.tmp_tb tr td.body{overflow:hidden}
input{
    vertical-align:middle;
}

input[type="checkbox"] ,input[type="radio"]{
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: var(--navi-hover-color, #ff6600); /* 최신 브라우저에서 체크 색상 변경 */
    vertical-align: top;
}

.board_adm_box{padding: 10px;}
.board_adm_box input[type=button],div.board_adm_box select{background-color:var(--navi-hover-color); padding:5px 12px; margin:3px; border-radius: 4px; color:#fff; font-size:16px; cursor:pointer; border: 1px solid #333;}
.board_adm_box input[type=button]:hover{background-color: #333; color: #fff;}
.board_adm_box select{background-color:#f3f3f3; color: #333;}