@charset "utf-8";

/* 게시판 목록 */
#bo_cate {margin:25px 0}
#bo_cate h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#bo_cate ul {zoom:1}
#bo_cate ul:after {display:block;visibility:hidden;clear:both;content:""}
#bo_cate li {display:inline-block;padding:2px}
#bo_cate a {display:block;line-height:28px;padding:5px 15px;border-radius:30px;border:1px solid #d6e9ff;color:#6794d3}
#bo_cate a:focus, #bo_cate a:hover, #bo_cate a:active {text-decoration:none;background:#3a8afd;color:#fff}
#bo_cate #bo_cate_on {z-index:2;background:#3a8afd;color:#fff;font-weight:bold;border:1px solid #3a8afd;
-webkit-box-shadow:inset 0 2px 5px rgb(33, 135, 202);
-moz-box-shadow:inset 0 2px 5px rgb(33, 135, 202);
box-shadow:inset 0 2px 5px rgb(33, 135, 202)}
.td_subject img {margin-left:3px}


.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;padding-left:20px;color:#676e70;vertical-align:baseline}
.chk_box input[type="checkbox"] + label:hover{color:#2172f8}
.chk_box input[type="checkbox"] + label span {position:absolute;top:10px;left:10px;width:15px;height:15px;display:block;background:#fff;border:1px solid #d0d4df;border-radius:3px}
.write_div .chk_box input[type="checkbox"] + label, .bo_vc_w .chk_box input[type="checkbox"] + label {padding-left:20px}
.write_div .chk_box input[type="checkbox"] + label span, .bo_vc_w .chk_box input[type="checkbox"] + label span {position:absolute;top:2px;left:0;width:15px;height:15px;display:block;margin:0;background:#fff;border:1px solid #d0d4df;border-radius:3px}
.chk_box input[type="checkbox"]:checked + label {color:#000}
.chk_box input[type="checkbox"]:checked + label span {background:url(./img/chk.png) no-repeat 50% 50% #3a8afd;border-color:#1471f6;border-radius:3px}
.all_chk.chk_box input[type="checkbox"] + label span {top:0;left:0}


/* 갤러리 목록 */
#bo_gall h2 {margin:0;padding:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden}
#bo_gall #gall_ul {margin:10px -10px 0;padding:0;list-style:none;zoom:1}
#bo_gall #gall_ul:after {display:block;visibility:hidden;clear:both;content:""}
#bo_gall .gall_li {}
#bo_gall .gall_li .gall_chk {position:absolute;top:0;left:0;padding:5px;z-index:1}
#bo_gall .gall_box {position:relative;margin:0 0 50px 0;border-radius:0 0 2px 2px}
#bo_gall .gall_con {position:relative}

.gall_row .col-gn-0,.gall_row .col-gn-1,.gall_row .col-gn-2,.gall_row .col-gn-3,.gall_row .col-gn-4,.gall_row .col-gn-5,.gall_row .col-gn-6,.gall_row .col-gn-7,.gall_row .col-gn-8,.gall_row .col-gn-9,.gall_row .col-gn-10 {position:relative;min-height:1px;padding-left:10px;*padding-left:0;padding-right:10px;*padding-right:0;float:left;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin-left:0}
.gall_row .col-gn-0,.gall_row .col-gn-1 {width:100%}
.gall_row .col-gn-2 {width:50%}
.gall_row .col-gn-3 {width:33.33333333%}
.gall_row .col-gn-4 {width:25%}
.gall_row .col-gn-5 {width:20%}
.gall_row .col-gn-6 {width:16.66666667%}
.gall_row .col-gn-7 {width:14.28571428%}
.gall_row .col-gn-8 {width:12.5%}
.gall_row .col-gn-9 {width:11.11111111%}
.gall_row .col-gn-10 {width:10%}

.gall_row .box_clear {clear:both}

#bo_gall .gall_now .gall_text_href a {color:#ff3061}

#bo_gall .gall_href a:link, #bo_gall .gall_href a:focus, #bo_gall .gall_href a:hover {text-decoration:none}
#bo_gall .gall_img {border-bottom:1px solid #eee;text-align:center;overflow:hidden}
#bo_gall .gall_img a,#bo_gall .gall_img .no_image,#bo_gall .gall_img .is_notice {display:block}
#bo_gall .gall_img img, #bo_gall .gall_img video {max-width:100%;height:auto !important}
#bo_gall .gall_img span {display:inline-block;background:#eaeaea;text-align:center;text-transform:uppercase;font-weight:bold;font-size:1.25em;color:#777}

#bo_gall .gall_text_href {margin:10px 0}
#bo_gall .gall_text_href a {font-weight:bold}
#bo_gall .gall_text_href img {margin:0 0 0 4px}
#bo_gall .bo_tit {display:block;line-height:30px;font-weight:bold;color:#000;font-size:1.2em}
#bo_gall .bo_tit .cnt_cmt {background:#e9eff5;color:#3a8afd;font-size:11px;height:16px;line-height:16px;padding:0 5px;border-radius:3px;vertical-align:middle}

#bo_gall .bo_cnt {color:#acacac;line-height:18px}
#bo_gall .profile_img img {border-radius:50%}
#bo_gall .bo_tit .fa-download {width:16px;height:16px;line-height:16px;background:#e89f31;color:#fff;text-align:center;font-size:10px;border-radius:2px;margin-right:2px;vertical-align:middle}
#bo_gall .bo_tit .fa-link {width:16px;height:16px;line-height:16px;background:#ad68d8;color:#fff;text-align:center;font-size:10px;border-radius:2px;margin-right:2px;vertical-align:middle;font-weight:normal}
#bo_gall .bo_tit .fa-link {width:16px;height:16px;line-height:16px;background:#ad68d8;color:#fff;text-align:center;font-size:10px;border-radius:2px;margin-right:2px;vertical-align:middle;margin-right:2px}
#bo_gall .bo_tit .new_icon {display:inline-block;width:16px;line-height:16px;font-size:0.825em;color:#23db79;background:#b9ffda;text-align:center;border-radius:2px;margin-left:2px;font-weight:bold;vertical-align:baseline}
#bo_gall .bo_tit .hot_icon {display:inline-block;width:16px;line-height:16px;font-size:0.833em;color:#fff;background:#e52955;text-align:center;border-radius:2px;vertical-align:middle;margin-right:2px}
#bo_gall .bo_tit .fa-lock {display:inline-block;line-height:16px;color:#999;text-align:center;vertical-align:middle}

#bo_gall .gall_info {line-height:1.5em;line-height:20px}
#bo_gall .gall_info strong {display:inline-block;margin:0}
#bo_gall .gall_info i {font-size:12px}
#bo_gall .gall_info .gall_date,
#bo_gall .gall_info .gall_view {display:inline-block;margin-left:10px;color:#777}

#bo_gall .gall_option {position:absolute;top:10px;right:10px}
#bo_gall .gall_option strong {background:#fff;padding:5px 10px;border-radius:30px;-webkit-box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2);
-moz-box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2);
box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2)}

/* 게시판 목록 공통 */
#bo_btn_top {margin:10px 0}
#bo_btn_top:after {display:block;visibility:hidden;clear:both;content:""}
.bo_fx {margin-bottom:5px;float:right;zoom:1}
.bo_fx:after {display:block;visibility:hidden;clear:both;content:""}
.bo_fx ul {margin:0;padding:0;list-style:none}
#bo_list_total {float:left;line-height:34px;font-size:0.92em;color:#4e546f}

.btn_bo_user {float:right;margin:0;padding:0;list-style:none}
.btn_bo_user li {float:left;width:40px;text-align:center;margin-left:5px;background:#fff}
.btn_bo_user > li {position:relative}
.btn_bo_adm {float:left}
.btn_bo_adm li {float:left;margin-right:5px}
.btn_bo_adm input {padding:0 8px;border:0;background:#d4d4d4;color:#666;text-decoration:none;vertical-align:middle}
.bo_notice td {background:#fff6fa !important;border-bottom:1px solid #f8e6ee}
.bo_notice td a {font-weight:bold}
.bo_notice .notice_icon {display:inline-block;line-height:25px;border-radius:5px;font-weight:bold;color:#f9267f}

.more_opt {display:none;position:absolute;top:45px;right:0;background:#fff;border:1px solid #b8bfc4;z-index:999}
.more_opt:before {content:"";position:absolute;top:-8px;right:13px;width:0;height:0;border-style:solid;border-width:0 6px 8px 6px;border-color:transparent transparent #b8bfc4 transparent}
.more_opt:after {content:"";position:absolute;top:-6px;right:13px;width:0;height:0;border-style:solid;border-width:0 6px 8px 6px;border-color:transparent transparent #fff transparent}
.more_opt li {border-bottom:1px solid #f1f1f1;padding:10px;float:inherit;width:90px;margin:0;color:#6b757c;text-align:left}
.more_opt li:last-child {border-bottom:0}
.more_opt li button, .more_opt li a {width:100%;border:0;background:#fff;color:#6b757c}
.more_opt li:hover a,
.more_opt li:hover button {color:#000}
.more_opt li i {float:right;line-height:20px}

.td_num strong {color:#000}
.bo_cate_link {display:inline-block;background:#e2eaf6;color:#3a8afd;font-weight:normal !important;height:20px;line-height:10px;padding:5px 8px;border-radius:5px;font-size:0.95em} /* 글제목줄 분류스타일 */
.bo_cate_link:hover {text-decoration:none}
.bo_current {color:#e8180c}
#bo_list .profile_img {display:inline-block;margin-right:5px}
#bo_list .profile_img img {border-radius:50%}
#bo_list .cnt_cmt {display:inline-block;margin:0 0 0 3px;font-weight:bold;color:#ed6478;font-size:0.86em}

#bo_gall li.empty_list {padding:85px 0;text-align:center}

.bo_sch_wrap {display:none;width:100%;height:100%;position:fixed;top:0;left:0;z-index:999}
.bo_sch {position:absolute;top:50%;left:50%;background:#fff;text-align:left;width:330px;max-height:300px;margin-left:-125px;margin-top:-180px;overflow-y:auto;border-radius:5px;-webkit-box-shadow:1px 1px 18px rgba(0,0,0,0.2);-moz-box-shadow:1px 1px 18px rgba(0,0,0,0.2);box-shadow:1px 1px 18px rgba(0,0,0,0.2);border:1px solid #dde7e9;background:#fff;border-radius:3px}
.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;display:block}
.bo_sch select {border:0;width:100%;height:40px;border:1px solid #d0d3db;border-radius:2px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075);
-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075)}
.bo_sch .sch_bar {display:inline-block;width:100%;clear:both;margin-top:15px;border:1px solid #d0d3db;border-radius:2px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075);
-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075)}
.bo_sch .sch_input {width:250px;height:38px;border:0;padding:0;background-color:transparent;float:left}
.bo_sch .sch_btn {height:38px;float:right;color:#656565;background:none;border:0;width:40px;font-size:15px}
.bo_sch .bo_sch_cls {position:absolute;right:0;top:0;color:#b5b8bb;border:0;padding:12px 15px;font-size:16px;background:#fff}
.bo_sch_bg {background:#000;background:rgba(0,0,0,0.1);width:100%;height:100%}


/* 게시판 쓰기 */
#char_count_desc {display:block;margin:0 0 5px;padding:0}
#char_count_wrap {margin:5px 0 0;text-align:right}
#char_count {font-weight:bold}

#autosave_wrapper {position:relative}
#autosave_pop {display:none;z-index:10;position:absolute !important;top:34px;right:0;width:350px;height:auto !important;height:180px;max-height:180px;border:1px solid #565656;background:#fff;
-webkit-box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2);
-moz-box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2);
box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2)}
#autosave_pop:before {content:"";position:absolute;top:-8px;right:45px;width:0;height:0;border-style:solid;border-width:0 6px 8px 6px;border-color:transparent transparent #000 transparent}
#autosave_pop:after {content:"";position:absolute;top:-7px;right:45px;width:0;height:0;border-style:solid;border-width:0 6px 8px 6px;border-color:transparent transparent #fff transparent}
html.no-overflowscrolling #autosave_pop {height:auto;max-height:10000px !important} /* overflow 미지원 기기 대응 */
#autosave_pop strong {position:absolute;font-size:0;line-height:0;overflow:hidden}
#autosave_pop div {text-align:center;margin:0 !important}
#autosave_pop button {margin:0;padding:0;border:0}
#autosave_pop ul {padding:15px;border-top:1px solid #e9e9e9;list-style:none;overflow-y:scroll;height:130px;border-bottom:1px solid #e8e8e8}
#autosave_pop li {padding:8px 5px;border-bottom:1px solid #fff;background:#eee;zoom:1}
#autosave_pop li:after {display:block;visibility:hidden;clear:both;content:""}
#autosave_pop a {display:block;float:left}
#autosave_pop span {display:block;float:right;font-size:0.92em;font-style:italic;color:#999}
.autosave_close {cursor:pointer;width:100%;height:30px;background:none;color:#888;font-weight:bold;font-size:0.92em}
.autosave_close:hover {background:#f3f3f3;color:#3597d9}
.autosave_content {display:none}
.autosave_del {background:url(./img/close_btn.png) no-repeat 50% 50%;text-indent:-999px;overflow:hidden;height:20px;width:20px}

/* 게시판 읽기 */
#bo_v {margin-bottom:20px;background:#fff;box-sizing:border-box}

#bo_v_table {position:absolute;top:0;right:16px;margin:0;padding:0 5px;height:25px;background:#ff3061;color:#fff;font-weight:bold;line-height:2.2em}

#bo_v_title {}
#bo_v_title .bo_v_cate {display:inline-block;line-height:20px;background:#e2eaf6;color:#3a8afd;padding:0 10px;border-radius:3px;}
#bo_v_title .bo_v_tit {display:block;font-size:2em;margin:5px 0 0;word-break:break-all}

#bo_v_info {margin:0;border-bottom:1px solid #f1f1f1;color:#666}
#bo_v_info:after {display:block;visibility:hidden;clear:both;content:""} 
#bo_v_info h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}

#bo_v_info .profile_info {margin:20px 0 10px;display:inline-block;float:left}
#bo_v_info .profile_info .pf_img {float:left;margin-right:10px}
#bo_v_info .profile_info .pf_img img {border-radius:50%;width:50px;height:50px}
#bo_v_info .profile_info .profile_info_ct {float:left;padding:5px 0;line-height:18px}

#bo_v_info strong {display:inline-block;margin:0 10px 0 0;font-weight:normal}
#bo_v_info .sv_member,
#bo_v_info .sv_guest,
#bo_v_info .member,
#bo_v_info .guest {font-weight:bold}
#bo_v_info .profile_img {display:none}
#bo_v_info .sv_member {color:#000}
#bo_v_info .if_date {margin:0;color:#888}

#bo_v_file h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#bo_v_file ul {margin:0;list-style:none}
#bo_v_file li {padding:15px;position:relative;margin:10px 0;border:1px solid #dfdfdf;border-radius:5px;
-webkit-box-shadow:1px 1px 5px 0px hsl(232, 36%, 96%);
-moz-box-shadow:1px 1px 5px 0px hsl(232, 36%, 96%);
box-shadow:1px 1px 5px 0px hsl(232, 36%, 96%)}
#bo_v_file li i {float:left;color:#b2b2b2;font-size:2.35em;margin-right:20px}
#bo_v_file a {float:left;display:block;text-decoration:none;word-wrap:break-word;color:#000}
#bo_v_file a:focus, #bo_v_file li:hover a, #bo_v_file a:active {text-decoration:underline;color:#3a8afd}
#bo_v_file img {float:left;margin:0 10px 0 0}
#bo_v_file .bo_v_file_cnt {color:#b2b2b2;font-size:0.92em}
#bo_v_file li:hover {border-color:#bed4f4;color:#bed4f4}
#bo_v_file li:hover i {color:#3a8afd}
#bo_v_file li:hover .bo_v_file_cnt {color:#99c2fc}

#bo_v_link h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#bo_v_file ul {margin:0;list-style:none}
#bo_v_link li {padding:15px;position:relative;margin:10px 0;border:1px solid #dfdfdf;border-radius:5px;
-webkit-box-shadow:1px 1px 5px 0px hsl(232, 36%, 96%);
-moz-box-shadow:1px 1px 5px 0px hsl(232, 36%, 96%);
box-shadow:1px 1px 5px 0px hsl(232, 36%, 96%)}
#bo_v_link li i {float:left;color:#b2b2b2;font-size:2.35em;margin-right:20px}
#bo_v_link a {float:left;display:block;text-decoration:none;word-wrap:break-word;color:#000}
#bo_v_link a:focus, #bo_v_link li:hover a, #bo_v_link a:active {text-decoration:underline;color:#3a8afd}
#bo_v_link .bo_v_link_cnt {color:#b2b2b2;font-size:0.92em}
#bo_v_link li:hover {border-color:#bed4f4;color:#bed4f4}
#bo_v_link li:hover i {color:#3a8afd}
#bo_v_link li:hover .bo_v_link_cnt {color:#99c2fc}

#bo_v_top {zoom:1}
#bo_v_top:after {display:block;visibility:hidden;clear:both;content:""}
#bo_v_top h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#bo_v_top ul {padding:0;list-style:none;word-break:break-all}

#bo_v_bot {zoom:1}
#bo_v_bot:after {display:block;visibility:hidden;clear:both;content:""}
#bo_v_bot h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#bo_v_bot ul {padding:0;list-style:none}

.bo_v_com {margin:20px 0;float:right}
.bo_v_com > li {position:relative;float:left;margin-left:5px}

.bo_v_nb {margin:20px 0;position:relative;clear:both;text-align:left}
.bo_v_nb:after {display:block;visibility:hidden;clear:both;content:""}
.bo_v_nb li {border-top:1px solid #f1f1f1;padding:13px}
.bo_v_nb li:last-child {border-bottom:1px solid #f1f1f1}
.bo_v_nb li:hover {background:#f6f6f6}
.bo_v_nb li i {font-size:13px;color:#b3b3b3}
.bo_v_nb li .nb_tit {display:inline-block;padding-right:20px;color:#b3b3b3}
.bo_v_nb li .nb_date {float:right;color:#b3b3b3}

#bo_v_atc {min-height:200px;height:auto !important;height:200px}
#bo_v_atc_title {position:absolute;font-size:0;line-height:0;overflow:hidden}

#bo_v_img {width:100%;overflow:hidden;zoom:1}
#bo_v_img:after {display:block;visibility:hidden;clear:both;content:""}
#bo_v_img a.view_image {display:block}
#bo_v_img img {margin-bottom:20px;max-width:100%;height:auto}

#bo_v_con {margin:10px 0 30px;width:100%;line-height:1.7em;min-height:200px;word-break:break-all;overflow:hidden}
#bo_v_con a {color:#000;text-decoration:none}
#bo_v_con img {max-width:100%;height:auto}

#bo_v_act {
    margin-bottom: 0px;
    text-align: left;
}
#bo_v_act .bo_v_act_gng {
    display: block; /* 또는 display: inline-block; */
    margin-bottom: 10px; /* 원하는 간격으로 조정 */
    /* 첫 번째 span에는 margin-bottom을, 두 번째 span에는 margin-top을 줄 수도 있습니다. */
}
/* 또는 특정 span에만 마진을 주고 싶다면 */
#bo_v_act .bo_v_act_gng:first-of-type { /* 첫 번째 span (버튼) */
    margin-bottom: 0px; /* 아래쪽으로 20px 간격 추가 */
}
#bo_v_act .bo_v_act_gng:last-of-type { /* 두 번째 span (설명) */
    margin-top: 20px; /* 위쪽으로 20px 간격 추가 */
}
#bo_v_act .bbs_bn_box {
    display: block; /* 또는 display: inline-block; */
    margin-bottom: 10px; /* 원하는 간격으로 조정 */
    /* 첫 번째 span에는 margin-bottom을, 두 번째 span에는 margin-top을 줄 수도 있습니다. */
}
/* 또는 특정 span에만 마진을 주고 싶다면 */
#bo_v_act .bbs_bn_box:first-of-type { /* 첫 번째 span (버튼) */
    margin-bottom: 0px; /* 아래쪽으로 20px 간격 추가 */
}
#bo_v_act .bbs_bn_box:last-of-type { /* 두 번째 span (설명) */
    margin-top: 20px; /* 위쪽으로 20px 간격 추가 */
}
#bo_v_act a {
    /* 기존 버튼 스타일 */
    margin-right: 5px;
    vertical-align: middle;
    color: #4a5158;
    text-decoration: none;
    
    display: inline-flex;
    align-items: center;
    justify-content: center; /* 가로 중앙 정렬 */
    
    border: 1px solid #dedede;
    width: 70px; /* 직사각형 버튼 너비 */
    height: 46px; /* 직사각형 버튼 높이 */
    line-height: normal;
    border-radius: 30px; /* 둥근 모서리 (타원형/직사각형) */
    padding: 0 10px;
    box-sizing: border-box;
    
    background-color: #f8f9fa;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

#bo_v_act a:hover {
    background-color: #e2e6ea;
    color: #ff484f;
    border-color: #ff484f;
}

#bo_v_act img {
    /* 모든 이미지에 공통으로 적용될 기본 스타일 */
    vertical-align: middle;
    /* max-width와 height:auto는 아래 more-button img에서만 적용되도록 분리 */
    /* 기존에 적용된 width, height는 여기서 제거 (아래 개별 스타일에서 정의) */
}

/* 숫자 텍스트에 대한 스타일 */
.count-text {
    font-size: 1em;
    color: #4a5158;
    font-weight: bold;
    white-space: nowrap;
}

/* --- 각 버튼의 img 스타일을 세분화 --- */
/* 일반 버튼 (추천, 비추천, 공유, 저장, PDF, 인쇄, 신고 등) 내부 이미지 스타일 */
#bo_v_act a:not(.more-button) img {
    margin-right: 5px; /* 텍스트가 있는 버튼에만 마진 적용 */
    width: 20px; /* 아이콘 크기 지정 */
    height: 20px;
}

/* --- '더보기' 버튼 (정원형) 스타일 --- */
#bo_v_act a.more-button {
    width: 46px; /* 높이와 동일하게 설정하여 정원형으로 만듦 */
    height: 46px; /* 기존 버튼의 높이와 동일하게 유지 */
    border-radius: 50%; /* 50%로 설정하여 완벽한 원형으로 만듦 */
    padding: 0; /* 내부 텍스트가 없으므로 패딩 제거 */
    flex-shrink: 0; /* 공간이 부족해도 줄어들지 않도록 */
}

#bo_v_act a.more-button img {
    margin-right: 0; /* 아이콘 옆에 텍스트가 없으므로 마진 제거 */
    max-width: 60%; /* 부모(버튼) 너비의 60%까지 커질 수 있음 */
    max-height: 60%; /* 부모(버튼) 높이의 60%까지 커질 수 있음 */
    width: auto; /* 이미지의 원래 비율을 유지하면서 자동 조절 */
    height: auto; /* 이미지의 원래 비율을 유지하면서 자동 조절 */
    object-fit: contain; /* 이미지가 잘리지 않고 버튼 안에 꽉 차도록 */
}

#bo_v_act a.more-button span {
    display: none; /* "더보기" 버튼의 텍스트(비어있는 span)는 표시하지 않음 */
}

/* 기존의 .bo_v_good 및 .bo_v_nogood 스타일은 위 #bo_v_act a 에 통합되었으므로,
   이 중복되는 부분은 삭제하거나 주석 처리하세요. */
/*
#bo_v_act .bo_v_good {display:inline-block;border:1px solid #dedede;width:70px;line-height:46px;border-radius:30px}
#bo_v_act .bo_v_nogood {display:inline-block;border:1px solid #dedede;width:70px;line-height:46px;border-radius:30px}
*/

#bo_v_sns {padding:0;list-style:none;zoom:1;float:left;display:inline-block}
#bo_v_sns:after {display:block;visibility:hidden;clear:both;content:""}
#bo_v_sns li {float:left;width:135px;margin-right:5px;text-align:left}
#bo_v_sns li a {height:35px;line-height:35px;text-align:center;border-radius:5px;color:#fff;font-size:0.95em}
#bo_v_sns li img {vertical-align:middle;margin-right:5px}
#bo_v_sns li .sns_f {display:block;background:#3b5997}
#bo_v_sns li .sns_t {display:block;background:#09aeee}
#bo_v_sns li .sns_g {display:block;background:#ea4026}
#bo_v_sns li .sns_k {display:block;background:#fbe300}

#bo_v_share {position:relative;padding:20px 0}
#bo_v_share:after {display:block;visibility:hidden;clear:both;content:""}
#bo_v_share .btn {padding:0 10px;color:#555;font-weight:normal;font-size:1em;width:80px;line-height:35px;height:35px;border-color:#d5d5d5;border-radius:5px}
#bo_v_share .btn:hover {background:#fff}
#bo_v_share .btn i {margin-right:5px;color:#4b5259;vertical-align:middle}


/* 게시판 댓글 */
.cmt_btn {width:100%;text-align:left;border:0;border-bottom:1px solid #f0f0f0;background:#fff;font-weight:bold;margin:30px 0 0px;padding:0 0 15px}
.cmt_btn span.total {position:relative;display:inline-block;margin-right:5px;font-size:1em;color:#3a8afd}
.cmt_btn span.cmt_more {float:right;display:inline-block;width:15px;height:10px;background:url(./img/btn_cmt.png) no-repeat right 2px;margin-top:5px}
.cmt_btn_op span.cmt_more {background-position:right -8px}
.cmt_btn b {font-size:1.2em;color:#000}
.cmt_btn span.total:after {position:absolute;bottom:-17px;left:0;display:inline-block;background:#3a8afd;content:"";width:100%;height:2px}
#bo_vc {}
#bo_vc h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#bo_vc article {margin:20px 0;position:relative;border-bottom:1px solid #f0f0f0}
#bo_vc article:after {display:block;visibility:hidden;clear:both;content:""}
#bo_vc article .profile_img img {border-radius:50%}
#bo_vc article .pf_img {float:left;margin-right:10px}
#bo_vc article .pf_img img {border-radius:50%;width:50px;height:50px}
#bo_vc article .cm_wrap {float:left;max-width:870px;width:90%}
#bo_vc header {position:relative;width:100%}
#bo_vc header:after {display:block;visibility:hidden;clear:both;content:""}
#bo_vc header .profile_img {display:none}
#bo_vc header .icon_reply {position:absolute;top:15px;left:-20px}
#bo_vc .member, #bo_vc .guest, #bo_vc .sv_member, #bo_vc .sv_guest {font-weight:bold}
.bo_vc_hdinfo {color:#777}
#bo_vc h1 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#bo_vc .cmt_contents {line-height:1.8em;padding:0 0 20px}
#bo_vc p a {text-decoration:underline}
#bo_vc p a.s_cmt {text-decoration:underline;color:#ed6479}
#bo_vc_empty {margin:0;padding:80px 0 !important;color:#777;text-align:center}
#bo_vc #bo_vc_winfo {float:left}
#bo_vc .bo_vl_opt {position:absolute;top:0;right:0}

.bo_vc_act {display:none;position:absolute;right:0;top:40px;width:58px;text-align:right;border:1px solid #b8bfc4;margin:0;list-style:none;background:#fff;zoom:1;z-index:9999}
.bo_vc_act:before {content:"";position:absolute;top:-8px;right:5px;width:0;height:0;border-style:solid;border-width:0 6px 8px 6px;border-color:transparent transparent #b8bfc4 transparent}
.bo_vc_act:after {content:"";position:absolute;top:-6px;right:5px;width:0;height:0;border-style:solid;border-width:0 6px 8px 6px;border-color:transparent transparent #fff transparent}
.bo_vc_act li {border-bottom:1px solid #f0f0f0}
.bo_vc_act li:last-child {border-bottom:0}
.bo_vc_act li a {display:inline-block;padding:10px 15px}
.bo_vc_act li a:hover {color:#3a8afd}

.bo_vc_w {position:relative;margin:10px 0;display:block}
.bo_vc_w:after {display:block;visibility:hidden;clear:both;content:""}
.bo_vc_w h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
.bo_vc_w #char_cnt {display:block;margin:0 0 5px}
.bo_vc_w textarea {border:1px solid #ddd;background:#fff;color:#000;vertical-align:middle;border-radius:3px;padding:5px;width:100%;height:65px;
-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1)}
#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;clear:both}
.bo_vc_w .btn_confirm {clear:both;margin-top:10px}
.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}

#bo_vc_send_sns {display:inline-block;float:left}
#bo_vc_sns {display:inline-block;margin:0;padding:0;list-style:none;zoom:1}
#bo_vc_sns:after {display:block;visibility:hidden;clear:both;content:""}
#bo_vc_sns li {float:left;margin:0 5px 0 0}
#bo_vc_sns .sns_li_f {border-radius:3px;background:#3a589b;height:40px;line-height:40px;padding:0 0 0 10px}
#bo_vc_sns .sns_li_t {border-radius:3px;background:#00aced;height:40px;line-height:40px;padding:0 0 0 10px}
#bo_vc_sns .sns_li_off {background:#bbb}
#bo_vc_sns a {display:inline-block;padding:0 15px 0 5px}
#bo_vc_sns input {margin:0 5px 0 0}

/*글쓰기*/
#bo_w .bo_v_option li {display:inline-block;float:left;text-align:left;margin:0 5px 0 0}
#bo_w .bo_v_option li label {vertical-align:baseline}
#bo_w .bo_v_option .chk_box input[type="checkbox"] + label span {margin-left:0;margin-right:5px}
#bo_w .write_div {margin:10px 0;position:relative}
#bo_w .write_div:after {display:block;visibility:hidden;clear:both;content:""}
#bo_w .bo_w_info:after {display:block;visibility:hidden;clear:both;content:""}
#bo_w .bo_w_info .frm_input {float:left;margin-bottom:1%}
#bo_w #wr_password, #bo_w #wr_homepage {margin-left:1%}
#bo_w .wr_content.smarteditor2 iframe {background:#fff}
#bo_w .bo_w_tit {position:relative}
#bo_w .bo_w_tit .frm_input {padding-right:120px}
#bo_w .bo_w_tit #btn_autosave {position:absolute;top:5px;right:5px;line-height:30px;height:30px}
#bo_w .bo_w_link label {position:absolute;top:1px;left:1px;border-radius:3px 0 0 3px;height:38px;line-height:38px;width:40px;font-size:1.2em;text-align:center;color:#b2b2b2}
#bo_w .bo_w_link .frm_input {padding-left:50px}
#bo_w .bo_w_flie .lb_icon {position:absolute;top:0px;left:0px;border-radius:3px 0 0 3px;height:38px;line-height:38px;width:40px;font-size:1.2em;text-align:center;color:#b2b2b2}
#bo_w .bo_w_flie .frm_file {padding-left:50px;margin-top:3px}
#bo_w .bo_w_flie .file_wr {position:relative;border:1px solid #ccc;background:#fff;color:#000;vertical-align:middle;border-radius:3px;padding:5px;height:40px;margin:0}
#bo_w .bo_w_flie .frm_input {margin:10px 0 0}
#bo_w .bo_w_flie .file_del {position:absolute;top:10px;right:10px;font-size:0.92em;color:#7d7d7d}
#bo_w .bo_w_select select {border:1px solid #d0d3db;width:100%;height:40px;border-radius:3px;}
#bo_w .btn_submit {padding:0 20px;font-size:1.167em}
#bo_w .btn_cancel {border-radius:3px;font-size:1.167em}








/**********************
여기서부터 빌더전용 CSS입니다.
스킨작업은 가급적 CSS를 수정하지마시고, 
주석 후 새로 라인을 추가해주세요.
************************/

/* 갤러리용 비디오용 목록 */
.gallery-item-img {
    position: relative;
}

/* 그리드 컨테이너 (Masonry.js의 대상이 될 요소) */
.gallery_grid_container {
    padding-top: 0px;
    padding-left: 10px;
    padding-right: 10px;
    max-width: 1100px; /* 전체 컨테이너 최대 너비 */
    margin: 0 auto;
    position: relative; /* Masonry.js에서 필요할 수 있음 */
}

/* 각 그리드 아이템 */
.gallery_grid_item {
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);

    /* Masonry의 gutter와 일치하는 하단 마진 */
    margin-bottom: 20px;

    /* 4열 기준으로 너비 재계산: (100% / 4) - (gutter * (4-1) / 4) = 25% - (20 * 3 / 4) = 25% - 15px */
    /* 5열 기준으로 너비 재계산: (100% / 5) - (gutter * (5-1) / 5) = 20% - (20 * 4 / 5) = 20% - 16px */
    width: calc(24.56% - 15px);
}

/* 썸네일 이미지 링크 (<a> 태그)의 기본 상태 */
.gallery-item-img a {
    display: block;
    background-color: transparent;
    transition: background-color 0.3s ease-in-out;
    box-sizing: border-box;
    border-radius: 10px;
    overflow: hidden;
}

/* 마우스 오버 시 <a> 태그의 배경색 변경 */
.gallery-item-img:hover a {
    background-color: rgba(0, 123, 255, 0.1);
}

/* 썸네일 이미지 (<img> 태그) 자체의 기본 상태 */
.gallery-item-img a img {
    display: block;
    width: 100%; /* 부모 <a> 태그의 100% 너비 */
    height: auto; /* 중요: 높이를 자동으로 설정하여 원본 비율 유지 */
    object-fit: contain; /* 이미지가 잘리지 않고 컨테이너에 맞게 축소/확대 */
    border-radius: 10px; /* <img> 태그의 둥근 모서리 */
    transition: transform 0.3s ease-in-out; /* 확대/축소 효과 트랜지션 */
}

/* 마우스 오버 시 이미지 (<img> 태그) 확대 */
.gallery-item-img:hover a img {
    transform: scale(1.03); /* 이미지 1.03배 확대 */
}

/* 기타 스타일 */
/* .gallery-item-ico 기존 정의를 아래와 같이 수정 및 통합합니다. */
.gallery-item-ico {
    position: absolute;
    top: 10px;
    right: 10px; /* 우측 상단 유지, 좌측 상단 유지 시 left: 10px */
    display: flex;
    flex-direction: column; /* !!! 이 부분을 추가/수정합니다: 요소들을 세로로 정렬 !!! 가로 정렬 시 제거 */
    gap: 5px; /* !!! 이 부분을 유지합니다: 세로 간격 5px !!! */
    z-index: 10;
}

.gallery-item-ico .bbs_list_label {
    font-size: 11px;
    border-radius: 4px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 3px;
    padding-bottom: 2px;
    font-weight: bold;
    color: #f9f9f9; /* 기본 텍스트 색상 */
    line-height: 1;
    background-color: rgba(0, 0, 0, 0.5); /* 기본 배경색 (반투명) */
    /* text-shadow: 1px 1px 2px rgba(0,0,0,0.3); 가독성을 위한 그림자 */

   /* 텍스트 중앙 정렬 추가된 공통 스타일 */
    display: block; /* !!! inline-block을 block으로 변경 !!! */    
    text-align: center; 
}

/* 썸네일 오버레이 플레이 버튼 위치 및 정렬 */
.gallery-item-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 15; /* 썸네일 아이콘보다 위에 오도록 z-index를 더 높게 설정 */
    display: flex; /* 내부 아이콘 정렬을 위해 */
    justify-content: center; /* 가로 중앙 정렬 */
    align-items: center; /* 세로 중앙 정렬 */
}

/* 플레이 아이콘 (예: 삼각형) 스타일 */
.gallery-item-play .play-icon {
    /* 삼각형 아이콘의 경우 패딩 조절로 중앙 정렬 */
    padding-left: 5px; /* 삼각형 특성상 약간 왼쪽으로 치우쳐 보이므로 오른쪽으로 조금 이동 */
}

/* (선택 사항: 만약 HTML은 유지하고 CSS로만 숨기고 싶다면) */
.gallery-item-con {
    display: none; /* 새로 추가: 내용을 숨김 */
    /* margin-top, padding, margin-bottom 등의 기존 속성들은 제거 가능 */
}

.gallery-item-tit {
    font-size: 15px;
    text-align: left;
    margin: 0;
    padding: 0;
    /* 추가: 줄바꿈을 위한 강제 스타일 */
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    width: auto !important;
    max-width: none !important;
    word-wrap: break-word; /* 긴 단어도 강제로 줄바꿈 */
}

.gallery-item-tit li {
    margin: 0;
    padding: 0;
    line-height: 1.4;
    /* 추가: li 요소에도 줄바꿈 허용 */
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    width: auto !important;
    word-wrap: break-word;
}

/* cut2 클래스를 완전히 무력화 */
.gallery-item-tit.cut2,
.gallery-item-tit li.cut2,
.cut2 {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    width: auto !important;
    max-width: none !important;
    display: block !important;
    word-wrap: break-word !important;
}

/* 제목 링크에도 적용 */
.gallery-item-tit a {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    width: auto !important;
    word-wrap: break-word !important;
    display: block !important;
}

/* 제목 뒤에 붙던 .fl_icos 숨김 */
.gallery-item-tit .fl_icos {
    display: none; /* 추가 */
}

.gallery-item-con a {font-size: 14px; color:#999;}
.gallery-item-info {margin-top: 20px; font-size: 12px; padding: 0 10px;}
.gall_chk_is {position: absolute; top:10px; left: 10px;}


.sv_member .profile_img img {width:auto !important;}

/* gallery_v_mtop 클래스는 .gallery_grid_item 에 흡수되거나, 추가 마진 등을 위해 유지 가능 */
.gallery_v_mtop {
    /* 이 클래스는 .gallery_grid_item 이 모든 스타일을 가지므로, 추가 마진 등이 필요 없다면 비워두세요. */
}
.meta-author {
    display: block; /* 줄바꿈하여 제목 아래에 표시 */
    margin-top: 5px; /* 제목과 작성자 이름 사이의 작은 간격 */
    font-size: 13px; /* 추가 */
    color: #888; /* 추가 */
}

/* 모든 텍스트 정보(아이콘, 제목, 메타정보, 내용요약)를 감싸는 컨테이너 */
.gallery-content-area {
    padding: 0px 10px 15px 10px; /* 상단 8px, 좌우 10px, 하단 15px으로 조정 */
}

/* 회원 아이콘, 제목, 작성자를 한 줄에 정렬하는 flexbox 행 */
.gallery-profile-row {
    display: flex;
    align-items: center; /* 세로 중앙 정렬 */
    margin-bottom: 8px; /* 프로필/제목 줄과 메타 정보 줄 사이의 간격 */
    margin-top: 5px; /* 썸네일과 프로필 줄 사이의 상단 간격 */
}

/* 회원 아이콘 자체의 스타일 */
.author-icon {
    display: flex; /* 내부 이미지 중앙 정렬용 */
    justify-content: center; /* 내부 이미지 중앙 정렬용 */
    align-items: center; /* 내부 이미지 중앙 정렬용 */
    margin-right: 12px; /* 아이콘과 텍스트 사이 간격 (12px) */
    box-sizing: border-box; /* 패딩과 테두리를 너비/높이에 포함 */

    width: 36px; /* 아이콘 너비 */
    height: 36px; /* 아이콘 높이 */
    border-radius: 50%; /* 원형으로 만듦 */
    background-color: #fff; /* 기본 배경색 (이미지 없을 시 대비) */
    border: 1px solid #ddd;
    overflow: hidden; /* 이미지가 원형 밖으로 나가지 않도록 함 */
    flex-shrink: 0; /* flex 컨테이너 내에서 공간이 부족해도 축소되지 않도록 함 */
    margin-right: 10px; /* 아이콘과 옆 텍스트 사이의 간격 */
}

/* 회원 아이콘 이미지(.author-icon 내부의 img 태그) 스타일 */
.author-icon img {
    display: block;
    object-fit: cover; /* 이미지가 잘리지 않고 영역을 꽉 채우도록 함 */

    width: auto !important;
    height: auto !important;
    max-width: 36px;
    max-height: 36px;
    
    /* 최소 크기 보장 */
    min-width: 20px;
    min-height: 20px;
    
}

/* 노이미지 파일에 대한 특별 처리 (고정 크기) */
.author-icon img[src*="no_image"] {
    width: 36px !important;
    height: 36px !important;
    object-fit: cover;
}

/* 제목과 작성자 이름을 담는 컬럼 (아이콘 옆) */
.gallery-title-author-col {
    display: flex;
    flex-direction: column; /* 제목과 작성자를 세로로 정렬 */
    flex-grow: 1; /* 남은 공간을 채우도록 확장 */
    min-width: 0; /* 내용이 길어져도 컨테이너를 넘어가지 않도록 함 (flexbox에서 중요) */
}

/* 공지/배지 등 특정 요소만 일반 글자로 (제목은 굵게 .gallery-item-tit li a { font-weight: bold; */
.gallery-item-meta-info a {
    font-weight: normal !important;
    color: #888;
}

/* 카테고리, 작성일, 조회수 등 통합 메타 정보(.gallery-item-meta-info.new-position) 스타일 */
.gallery-item-meta-info.new-position {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 12px;
    color: #888;
    margin-top: 0px;
    padding-left: calc(36px + 12px);
    line-height: 0.5;
    margin-bottom: 5px; /* 하단 여백 추가하여 박스 하단과의 간격 확보 */
}

/* 각 정보 항목(li) 사이의 간격 및 구분자 */
.gallery-item-meta-info.new-position li {
    margin-right: 8px; /* 각 항목 사이의 간격 */
    position: relative; /* ::after 가상 요소 위치 지정을 위해 */
    white-space: nowrap; /* 항목이 다음 줄로 넘어가지 않도록 방지 */
}

/* 각 정보 항목(li) 뒤에 구분자(·) 추가 */
.gallery-item-meta-info.new-position li:not(:last-child)::after {
    content: '·'; /* 구분자로 사용할 문자 */
    margin-left: 8px; /* 구분자와 다음 항목 사이의 간격 */
    color: #bbb; /* 구분자 색상 */
}

/* 이전 프로필 아이콘 관련 스팬 태그 숨기기 (더 이상 필요 없음) */
.gallery-item-meta-info.new-position .prof_tiny_name {
    display: none;
}

/* 추가: 메타 정보의 좌측 정렬을 제목/작성자와 맞추기 위한 클래스 */
.gallery-item-meta-info.gallery-meta-offset {
    /* gallery-content-area의 패딩(10px) + author-icon 너비(36px) + author-icon margin-right(10px) = 56px */
    padding-left: 46px;
}





/* 탭 메뉴 { */
.tab_menu {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 10px 0;
    position: relative;
}
.tab_menu li {
    margin-right: 10px;
}
.tab_menu li a {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    text-decoration: none;
    color: #333;
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 15px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    box-sizing: border-box;
}
.tab_menu li a svg {
    width: 14px; /* SVG 아이콘 크기 조정 */
    height: 14px;
    margin-right: 5px;
}
.tab_menu li a:hover,
.tab_menu li a.active {
    background-color: #007bff;
    color: #fff;
    border-color: #007bff;
}
.tab_menu li a.active svg {
    fill: #fff; /* 활성화된 탭 아이콘 색상 변경 */
}
/* } */

/* 반응형을 위한 미디어 쿼리 */

@media (max-width: 992px) { /* 화면 너비가 992px 이하일 때 (예: 태블릿 가로) */
    .gallery_grid_item {
        /* 3열 */
        /* 3열 기준으로 너비 재계산: (100% / 3) - (gutter * (3-1) / 3) = 33.3333% - 13.3333px */
        width: calc(33.3333% - 13.3333px);
    }
}

@media (max-width: 576px) { /* 화면 너비가 576px 이하일 때 (예: 태블릿 세로, 큰 모바일) */
    .gallery_grid_item {
        /* 2열 */
        /* 2열 기준으로 너비 재계산: (100% / 2) - (gutter * (2-1) / 2) = 50% - 10px */
        width: calc(50% - 10px);
    }
}

@media (max-width: 340px) { /* 화면 너비가 340px 이하일 때 (예: 작은 모바일) */
    .gallery_grid_item {
        /* 1열 */
        width: 100%;
    }
}






/* 목록 {*/
.rb_bbs_wrap {position: relative;}
.rb_bbs_wrap .rb_bbs_top {
    margin-top: -55px; /* 상단 여백 조절 */
    margin-bottom: 30px; /* 하단 여백 조절 */
    display: flex; /* ul 자체를 flex 컨테이너로 만듦 */
    justify-content: flex-end; /* 모든 li 항목을 우측으로 정렬 */
    align-items: center; /* 세로 중앙 정렬 (li 항목들의 높이가 다를 경우) */
    flex-wrap: wrap; /* 공간이 부족하면 줄바꿈 되도록 설정 */
}
.rb_bbs_wrap .rb_bbs_top li {
    /* float:right; /* 기존 float 속성은 flexbox와 함께 사용하지 않음 */
    /* flexbox가 알아서 정렬하므로 float은 제거합니다. */
    margin-left: 10px; /* 각 li 항목 사이에 간격 추가 (필요에 따라 조절) */
    /* 다른 li 항목의 기본 스타일은 여기에 유지 */
}
.rb_bbs_wrap .rb_bbs_top li.cnts {
    margin-right: 10px; /* 전체 게시물 수 텍스트의 우측 여백 */
    margin-top: 0; /* flexbox 사용 시 수직 정렬을 위해 margin-top 제거 */
    font-size: 12px;
    color:#999;
    /* 다른 li 항목보다 내용이 길기 때문에 순서 조절을 위해 order 속성을 줄 수도 있습니다. */
    /* order: 1; */
}
/* 목록 - 상단 우측 : 선택복사,삭제,이동,검색,글등록, RSS 바로가기 버튼 CSS */
.rb_bbs_wrap .rb_bbs_top li.cnts .cnts_btn {
    /* 버튼 기본 스타일 초기화 */
    background: none; /* 배경색 제거 */
    border: none;    /* 테두리 제거 */
    padding: 0;      /* 패딩 제거 */
    margin: 0;       /* 마진 제거 */
    cursor: pointer; /* 마우스 오버 시 포인터 변경 */
    
    /* 부모 .cnts의 폰트 스타일 상속 (기본) */
    font-size: inherit; /* 부모 .cnts와 동일한 폰트 크기 상속 */
    color: inherit;     /* 부모 .cnts와 동일한 글자색 상속 */
    font-family: inherit; /* 부모 .cnts와 동일한 폰트 상속 */
    line-height: inherit; /* 부모 .cnts와 동일한 라인 높이 상속 */

    /* 버튼처럼 보이도록 간격 및 디자인 추가 (필요시) */
    display: inline; /* 글자처럼 한 줄에 놓이도록 */
    /* text-decoration: underline; /* 밑줄 추가 (선택 사항) */
}
.rb_bbs_wrap .rb_bbs_top li.cnts .cnts_btn:hover {
    color: #000; /* 마우스 오버 시 색상 변경 (예시: 빨간색) */
    /* text-decoration: underline; /* 마우스 오버 시 밑줄 추가 (선택 사항) */
}
.rb_bbs_wrap #bo_cate {margin-bottom: 0px; margin-top: 30px; display: flex;}
.rb_bbs_wrap #bo_cate #bo_cate_ul {flex:1; position: relative;}
.rb_bbs_wrap #bo_cate a {display: inline-flex; padding: 0px 20px; border:0px; font-size: 16px; color:#000; background-color: transparent; line-height: 56px; position: relative;}
.rb_bbs_wrap #bo_cate a:first-child {padding-left: 0px;}
.rb_bbs_wrap #bo_cate a:hover {background-color: transparent; font-family:'font-B',sans-serif;}
.rb_bbs_wrap #bo_cate #bo_cate_on {background-color: transparent; font-weight: normal; box-shadow: none; color:#AA20FF; border:0px; font-family:'font-B',sans-serif;}
.rb_bbs_wrap #bo_cate li {padding: 0px; display: inline-block;}
.rb_bbs_wrap #bo_cate #bo_cate_ul:before {content: "";bottom: 0;position: absolute;width: 100%;margin: 0;height: 1px;background-color: rgba(0, 0, 0, .1);}
.rb_bbs_wrap #bo_cate #bo_cate_on::after {content: "";position: absolute;bottom: 0;right: 20px;left: 0px;height: 2px;background-color: currentColor;}
.rb_bbs_wrap .mo_date_wrap {margin-bottom: 5px;}
.rb_bbs_wrap .rb_bbs_list {border-top:0px solid #ddd; margin-top: 20px;}
.rb_bbs_wrap .rb_bbs_for {padding-top: 40px; padding-bottom: 40px; border-bottom: 1px solid #eee; position: relative;}
.rb_bbs_wrap .rb_bbs_for:hover {background-color: #f9f9f9;} /* 공지사항 마우스 오버 시 배경색상 */
.rb_bbs_wrap .rb_bbs_for_wrap {width: 100%;}
.rb_bbs_wrap .rb_bbs_for_info {width: 15%; box-sizing: border-box; padding-right: 30px; float:left;}
.rb_bbs_wrap .rb_bbs_for_cont {float:left; width: 85%; padding-right: 40px;}
.rb_bbs_wrap .rb_bbs_for_img {position: absolute; top:40px; right: 0px;}
.rb_bbs_wrap .rb_bbs_for_img img {height:115px; width: auto;}
.rb_bbs_wrap .rb_bbs_for_info1_num {font-size: 16px; color:#999; float:left;}
.rb_bbs_wrap .rb_bbs_for_info1_chk {float:right; margin-top: -2px;}
.rb_bbs_wrap .rb_bbs_for_info2 {margin-top: 20px;}
.rb_bbs_wrap .rb_bbs_for_info2 li {color:#999; font-size: 12px;}
.rb_bbs_wrap .view_info_span {color:#999; font-size: 12px;}
.rb_bbs_wrap .view_info_span_ip {color:#999; font-size: 12px; margin-left: -10px;}
.rb_bbs_wrap .view_info_span a {color:#999; font-size: 12px;}
.rb_bbs_wrap .rb_bbs_for_info2 .ca_names {margin-top: 15px;}
.rb_bbs_wrap .rb_bbs_for_info2 .ca_names a {border-bottom: 2px solid #eee; color:#999; padding-bottom: 4px;}
.rb_bbs_wrap .rb_bbs_for_info2 .ca_names a:hover {color:#000; border-bottom: 2px solid #000;}
.rb_bbs_wrap .rb_bbs_for_cont_subj a {font-size: 22px;}
.rb_bbs_wrap .rb_bbs_for_cont_subj a i {opacity: 0.2}
.rb_bbs_wrap .rb_bbs_for_cont_txt {font-size: 14px; color:#777; line-height: 140%; margin-top: 20px; word-break: keep-all;}
.rb_bbs_wrap .rb_thumb_wrap {box-sizing: border-box; }

.rb_bbs_wrap .btns_gr_wrap {position:fixed; top:128px; left: 0px; width: 100%; z-index: 0; height:0px;}
.rb_bbs_wrap .btns_gr_wrap .sub {padding: 0px; height:0px; min-height: 0px;}
.rb_bbs_wrap .btns_gr_wrap .btns_gr {float:right; width: 50px; margin-right: -100px;}

.rb_bbs_wrap .btns_gr_wrap .btns_gr .fl_btns {width: 50px; height:50px; border:1px solid #ddd; background-color: #fff; border-radius: 6px; text-align: center; margin-bottom: 10px; position: relative; display: block; line-height: 45px;}

/* 목록, 보기 내부 버튼들을 가로로 나열 */
#bo_v_btns {
    display: flex; /* 내부 버튼들을 가로로 나열 */
    flex-wrap: wrap; /* 공간 부족 시 줄바꿈 */
    gap: 4px; /* 버튼 간 간격 */
    align-items: center; /* 세로 중앙 정렬 */
}
.rb_bbs_wrap .btm_btns {
    display: flex; /* 자식 요소들을 가로로 나열 */
    justify-content: space-between; /* #bo_v_btns와 .btm_btns_right를 양 끝으로 정렬 */
    align-items: center; /* 세로 중앙 정렬 */
    width: 100%; /* 부모에 맞춰 너비 100% */
    margin-top: 30px; /* 기존 상단 마진 유지 */
    margin-bottom: 30px; /* 필요한 경우 하단 마진 추가 */
    padding: 0; /* ul의 기본 패딩 제거 */
    list-style: none; /* ul의 기본 블릿 제거 */
}
.rb_bbs_wrap .btm_btns .fl_btns {
    line-height: normal;
    display: flex; /* flexbox를 사용하여 내부 요소(img, span 등)를 유연하게 정렬 */
    align-items: center; /* 세로 중앙 정렬 */
    justify-content: center; /* 가로 중앙 정렬: 이 부분이 중요합니다. */

    height: 35px; /* 기존 높이 유지 */
    border: 1px solid #ddd; /* 기존 테두리 유지 */
    background-color: #fff; /* 기존 배경색 유지 */
    border-radius: 6px; /* 기존 border-radius 유지 */
    color: #999; /* 기존 색상 유지 */
    padding: 0 15px; /* 버튼 자체의 가로 패딩 */
    box-sizing: border-box; /* 패딩이 너비에 포함되도록 */
    gap: 5px; /* <--- 이미지와 텍스트(span) 사이 간격을 flex `gap`으로 조절 */
}
/* 버튼 내부 이미지의 크기 및 마진 설정 */
.rb_bbs_wrap .btm_btns .fl_btns img {
    height: 18px; /* 이미지 높이 명시 */
    width: auto; /* 가로 비율 유지 */
    /* margin-right: 5px; 이 부분 제거 또는 0으로 설정 */
    /* vertical-align: middle; flex 컨테이너에서는 불필요할 수 있음 */
    /* margin-top: -2px; 이 부분도 제거 또는 0으로 설정하여 초기화 */
    margin: 0; /* 모든 마진을 초기화하여 flexbox에 의한 정렬에 맡깁니다. */
    display: block; /* 가끔 인라인 요소의 미세한 여백이 문제가 될 수 있어 block으로 설정 */
}
/* 텍스트(span)가 있다면 이미지 옆에 잘 나오도록 */
.rb_bbs_wrap .btm_btns .fl_btns span {
    display: inline-block; /* flex item의 기본 동작에 따라 block이나 inline-block이 유용 */
    margin: 0; /* 불필요한 마진 제거 */
    flex-shrink: 0; /* 텍스트가 줄어들지 않도록 방지 */
}
/* 1. 전체 버튼 영역을 감싸는 부모 컨테이너 스타일 */
.rb_bbs_wrap .btm_btns {
    display: flex;                  /* 자식 요소(좌/우 영역)를 가로로 배치 */
    justify-content: space-between; /* 자식 요소들을 양쪽 끝으로 밀어냅니다. */
    align-items: center;            /* 자식 요소들을 세로 중앙에 정렬 */
    width: 100%;                    /* 너비를 100%로 설정하여 공간을 모두 사용 */
    padding: 0;                     /* ul 태그의 기본 패딩 제거 */
    margin-top: 20px;               /* 상단 목록과의 간격 (필요에 따라 조절) */
}
/* 2. 좌측과 우측 영역 내부의 버튼들을 정렬하는 스타일 (코드를 합쳐서 중복 제거) */
.rb_bbs_wrap .btm_btns_left, 
.btm_btns_right {
    display: flex;       /* 내부 버튼들을 가로로 나열 */
    align-items: center; /* 내부 버튼들을 세로 중앙 정렬 */
    gap: 4px;            /* 버튼 사이의 간격 */
}
/* 3. 불필요해진 float 속성 및 clear:both 요소 처리 */
/* float를 사용하지 않으므로 기존 float 속성이 있다면 제거하는 것이 좋습니다. */
.rb_bbs_wrap .btm_btns_right a {
    float: none; /* float 속성 제거 */
    margin-right: 0; /* gap 속성으로 대체되었으므로 0으로 설정 */
}
/* 4. btm_btns_left btm_btns_right 불필요해진 float 속성 및 clear:both 요소 처리 (기존과 동일) */
.rb_bbs_wrap .btm_btns .cb {
    display: none;
}
/* 5. main_color_bg 클래스를 가진 btm_btns_right 내의 이미지에 대한 특정 스타일 */
/* 기존에 문제가 있었던 이미지 크기 및 마진 조정은 여기서도 확인이 필요합니다. */
.rb_bbs_wrap .btm_btns_right .main_color_bg img {
    height: 12px; /* 이 값은 유지하되, 필요하다면 다시 조절 */
    margin-top: 0; /* 마진 초기화 */
    margin-right: 0; /* 마진 초기화 */
    margin-left: 0; /* 마진 초기화 */
}/* '더보기' 버튼과 숨겨진 버튼들을 감싸는 컨테이너 */
.more_actions_container {
    display: flex; /* 내부 요소(더보기 버튼과 숨겨진 버튼 컨테이너)를 가로로 나열 */
    align-items: center; /* 세로 중앙 정렬 */
}
/* 숨겨진 버튼들을 감싸는 컨테이너 */
.more_hidden_buttons {
    display: none; /* 기본적으로 숨김 */
    align-items: center; /* 내부 버튼들을 세로 중앙 정렬 */
    gap: 8px; /* 숨겨진 버튼들 사이의 간격 */
    margin-left: 8px; /* '더보기' 버튼과의 간격, 필요하다면 조절 */
}
/* 개별 숨겨진 버튼 스타일 (기존 .fl_btns 스타일을 그대로 사용) */
/* .more_hidden_buttons .fl_btns { ... } */
/* 이 부분은 기존 .fl_btns 스타일이 적용되므로 별도로 추가할 필요 없음 */

.rb_bbs_wrap .rb_bbs_for_mem {margin-top: 20px;}
.rb_bbs_wrap .rb_bbs_for_mem li {display: inline-block; margin-left: 0px; margin-right: 5px;}
.rb_bbs_wrap .rb_bbs_for_mem li dd {display: inline-block; margin-right: 10px;}
.rb_bbs_wrap .rb_bbs_for_mem li dd span {font-size: 11px; color:#000;}
.rb_bbs_wrap .is_good span {color:#000 !important;}
.rb_bbs_wrap .is_nogood span {color:#000 !important;}

.rb_bbs_wrap .rb_bbs_for_mem_icos .fl_icos {
    line-height: normal;
    align-items: center; /* 세로 중앙 정렬 */
    justify-content: center; /* 가로 중앙 정렬: 이 부분이 중요합니다. */
    font-size: 11px;
    height: 15px; /* 기존 높이 유지 */
    border: 1px solid #ddd; /* 기존 테두리 유지 */
    background-color: #fff; /* 기존 배경색 유지 */
    border-radius: 4px; /* 기존 border-radius 유지 */
    color: #999; /* 기존 색상 유지 */
    padding: 1px 5px; /* 버튼 자체의 가로 패딩 */

    gap: 5px; /* <--- 이미지와 텍스트(span) 사이 간격을 flex `gap`으로 조절 */
}
/* 버튼 내부 이미지의 크기 및 마진 설정 */
.rb_bbs_wrap .rb_bbs_for_mem_icos .fl_icos img {
    height: 18px; /* 이미지 높이 명시 */
    width: auto; /* 가로 비율 유지 */
    /* margin-right: 5px; 이 부분 제거 또는 0으로 설정 */
    /* vertical-align: middle; flex 컨테이너에서는 불필요할 수 있음 */
    /* margin-top: -2px; 이 부분도 제거 또는 0으로 설정하여 초기화 */
    margin: 0; /* 모든 마진을 초기화하여 flexbox에 의한 정렬에 맡깁니다. */
    display: block; /* 가끔 인라인 요소의 미세한 여백이 문제가 될 수 있어 block으로 설정 */
}
/* 텍스트(span)가 있다면 이미지 옆에 잘 나오도록 */
.rb_bbs_wrap .rb_bbs_for_mem_icos .fl_icos span {
    display: inline-block; /* flex item의 기본 동작에 따라 block이나 inline-block이 유용 */
    margin: 0; /* 불필요한 마진 제거 */
    flex-shrink: 0; /* 텍스트가 줄어들지 않도록 방지 */
}

/* } */

/* 보기 { */
.rb_bbs_wrap h2 {font-size: 30px; font-weight: normal; word-break: keep-all; line-height: 130%; font-family: 'font-R', sans-serif; margin-top: 0px;}
.rb_bbs_for_mem_view {border-bottom: 1px solid #ddd; padding-bottom: 30px;}
.rb_bbs_wrap .rb_bbs_for_mem_view .rb_bbs_for_mem_names {float:left; display: block;}
.rb_bbs_wrap .rb_bbs_for_mem_view .rb_bbs_for_mem_names span {margin-right: 10px;}
.rb_bbs_wrap .rb_bbs_for_mem_view .rb_bbs_for_mem_names span.profile_img {margin-right: 0px;}
.rb_bbs_wrap .rb_bbs_for_mem_view .rb_bbs_for_btm_info {float:right; display: block; margin-right: 0px; margin-left: 20px;}
.rb_bbs_wrap .rb_bbs_file_for {padding-top: 17px; padding-bottom: 17px; font-size: 12px; border-bottom:1px solid #eee; color:#888; background-color: #fff; padding-left: 0px; padding-right: 0px; box-sizing: border-box;}
.rb_bbs_wrap .rb_bbs_file_for i {margin-right: 10px;}
.rb_bbs_wrap .rb_bbs_file_for .file_contents {margin-top: 10px; padding: 0px 15px 0px 28px; border-radius: 0px; margin-bottom: -2px;}
.rb_bbs_wrap #bo_v_con {margin: 0px; padding-top: 40px; padding-bottom: 40px; font-size: 16px;}
.rb_bbs_wrap #bo_v_con img {max-width: 100%;}
.rb_bbs_wrap #bo_v_act .bo_v_good {display:inline-block;border:1px solid #ddd;width:70px;line-height:48px;border-radius:30px; background-color: #fff;}
.rb_bbs_wrap #bo_v_act .bo_v_nogood {display:inline-block;border:1px solid #ddd;width:70px;line-height:48px;border-radius:30px; background-color: #fff;}
.rb_bbs_wrap #bo_v_act a {margin-left: 2px; margin-right: 2px; width: auto !important; padding-left: 20px; padding-right: 20px;}
.rb_bbs_wrap #bo_v_act a:hover {border-color:#000; color:#000;}
.rb_bbs_wrap #bo_v_act {background-color: #f9f9f9; border-radius: 10px; padding: 20px; box-sizing: border-box;}
.rb_bbs_wrap #bo_v_btns {float:left;}
.rb_bbs_wrap .bo_v_nb li {padding-top: 17px; padding-bottom: 17px; font-size: 14px; cursor: pointer;}
.rb_bbs_wrap .bo_v_nb li:hover {background-color: #f9f9f9;}
.rb_bbs_wrap .bo_v_nb li .nb_date {font-size: 12px;}
.rb_bbs_wrap .cmt_btn {border-bottom: 1px solid #ddd;}
.rb_bbs_wrap .cmt_btn span.total:after {display: none;}
.rb_bbs_wrap .cmt_btn span.total {color:#000; font-size: 16px}
.rb_bbs_wrap .cmt_btn b {color:#999; font-size: 16px;}
.rb_bbs_wrap #bo_vc header .profile_img {display: inherit;}
.rb_bbs_wrap #bo_vc header {width: 80%;}
.rb_bbs_wrap #bo_vc article .pf_img {display: none;}
.rb_bbs_wrap .cm_wrap span {font-size: 12px;}
.rb_bbs_wrap .cm_wrap {background-repeat: no-repeat; padding-top: 20px; padding-bottom: 20px; max-width: inherit !important; width: 100% !important;}
.rb_bbs_wrap #bo_vc .cmt_contents {padding-top: 0px; font-size: 14px; padding-bottom: 0px; margin-top: 15px; line-height: 130%; color:#222;}
.rb_bbs_wrap #bo_vc article {margin: 0px;}
.rb_bbs_wrap .bo_vc_w {margin: 0px;}
.rb_bbs_wrap .bo_vc_w textarea {font-size:14px !important; border-radius: 0px; resize: none; height:65px; margin-top: 30px; background-color: #f9f9f9; padding: 15px !important; padding-right: 70px !important; box-sizing: border-box; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 0px !important; border-bottom-right-radius: 0px !important; border:1px solid #ddd; font-size: 16px; color:#000; box-shadow: none; line-height: 130%; overflow: hidden;}
.rb_bbs_wrap .bo_vc_w textarea:focus {border:1px solid #ddd !important; background-color: #fff;}
.rb_bbs_wrap .bo_vc_w textarea::placeholder {color:#999;}
.rb_bbs_wrap .p_times {display: block; margin-top: 5px;}
.rb_bbs_wrap #bo_vc .bo_vl_opt {top:20px;}
.rb_bbs_wrap #bo_vc .bo_vl_opt button {padding: 0px; height:auto; line-height: inherit; color:#000; width: 26px;}
.rb_bbs_wrap #bo_vc .bo_vl_opt button:hover {color:#999;}
.rb_bbs_wrap .bo_vc_act {top:30px;}
.rb_bbs_wrap .bo_vc_act li a:hover {color:#000;}
.rb_bbs_wrap .bo_vc_w_wr {padding: 15px; border:1px solid #ddd; border-top:0px; box-sizing: border-box; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;}
.rb_bbs_wrap .btn_confirm_btn_wrap {margin-right: 0px;}
.rb_bbs_wrap .btn_confirm_cm_wrap i {margin-right: 5px;}
.rb_bbs_wrap .bo_vc_w .btn_confirm {margin-top: 0px;}
.rb_bbs_wrap .bo_vc_w .btn_confirm label {margin: 0px; font-size: 14px; display: inherit; color:#000;}
.rb_bbs_wrap .bo_vc_w .btn_submit {height:40px; border-radius: 6px; font-weight: normal; font-size: 16px; padding-left: 25px; padding-right: 25px;}
.rb_bbs_wrap .cm_wrpa_write_left {float:left;}
.rb_bbs_wrap .cm_wrpa_write_left span {color:#999; font-size: 14px; padding-left: 5px; line-height: 40px;}
.rb_bbs_wrap .cm_wrpa_write_left span.main_color {padding-left: 0px;}
.rb_bbs_wrap .cm_wrpa_write_right {float:right;}
.rb_bbs_wrap .cm_wrpa_write_right span{vertical-align:middle;}
.rb_bbs_wrap #char_cnt {position: absolute; top:50px; right:17px; text-align: right;font-weight: normal; font-size: 12px; color:#999; margin: 0px;}
.rb_bbs_wrap .bo_vc_w_info {margin-top: 0px; margin-bottom: 0px; float:none; margin-bottom: 15px; padding-bottom: 15px; margin-left: -15px; margin-right: -15px; border-bottom: 1px solid #eee; padding-left: 15px; padding-right: 15px; box-sizing: border-box;}
.rb_bbs_wrap .bo_vc_w_info #captcha {margin-top: 30px;}
.rb_bbs_wrap .bo_vc_w_info .frm_input {float:none; border:1px solid #ddd; height:30px; width: 100px; border-radius: 6px !important; padding-left: 10px; padding-right: 10px;}
.rb_bbs_wrap .bo_vc_w_info_ul1 {margin-top: -60px;}
.rb_bbs_wrap #bo_v_img .view_image {display: inline;}
#bo_v_act_good, #bo_v_act_nogood {display:none;position:absolute;top:50px;left:0;z-index:9999;padding:7px 10px;width:auto; font-size: 12px; background:#ff3061;color:#fff;text-align:center; font-weight: normal; word-break: keep-all; border-radius: 10px;}
/* } */

/* 작성자 서명 { */
.rb_bbs_wrap .writer_prof {background-color: #f9f9f9; padding:30px; box-sizing: border-box; border-radius: 10px;}
.rb_bbs_wrap .writer_prof .writer_prof_ul1 {float:left; width: 55%;}
.rb_bbs_wrap .writer_prof .writer_prof_ul2 {float:right;}
.rb_bbs_wrap .writer_prof .writer_prof_ul2 a {display: inline-block; vertical-align: top;}
.rb_bbs_wrap .writer_prof .writer_prof_ul1 .writer_prof_li_prof_img {float:left; margin-right:20px;}
.rb_bbs_wrap .writer_prof .writer_prof_ul1 .writer_prof_li_prof_img img {width: 50px; height:50px; border-radius: 10px;}
.rb_bbs_wrap .writer_prof .writer_prof_ul1 .writer_prof_li_prof_txt {float:left; color:#999;}
.rb_bbs_wrap .writer_prof .writer_prof_ul1 .writer_prof_li_prof_txt span {}
.rb_bbs_wrap .writer_prof .writer_prof_ul1 .writer_prof_li_prof_txt .prof_nick .sv_wrap a {font-size: 18px; font-family:'font-R',sans-serif; color:#000;}
.rb_bbs_wrap .writer_prof .writer_prof_ul1 .writer_prof_li_prof_txt .prof_nick {display: block; margin-bottom: 5px; margin-top: 3px;}
.rb_bbs_wrap .writer_prof .writer_prof_li_txt {margin-top: 15px; font-size: 16px; color:#666; line-height: 130%; word-break: keep-all;}
.rb_bbs_wrap .writer_prof_ul2 .fl_btns {width: 50px; height:50px; border:1px solid #ddd; background-color: #fff; border-radius: 6px; text-align: center; margin-bottom: 0px; position: relative; display: block; line-height: 45px;}
.rb_bbs_wrap .writer_prof_ul2 .fl_btns:hover {border-color:#AA20FF;}
.rb_bbs_wrap .writer_prof_ul2 .gd_btn {width: auto; background-color: #AA20FF; color:#fff; font-size: 16px; padding-left: 20px; padding-right: 20px; border:0px;}
.rb_bbs_wrap .writer_prof_ul2 .gd_btn i {margin-top: 0px; margin-right: 5px; float:left;}
.rb_bbs_wrap .writer_prof_ul2 .gd_btn span {float:right; margin-top: 2px;}
/* } */

/* 쓰기 { */
.rb_bbs_wrap.rb_bbs_write_wrap {margin-top: 0px;}
.rb_bbs_wrap #char_count_wrap {position: absolute; top:35px; right:17px; text-align: right;font-weight: normal; font-size: 12px; color:#999; margin: 0px;}
.rb_bbs_wrap .help_text {font-size: 12px; color:#999; display: block; margin-bottom: 10px; word-break: keep-all;}
.rb_bbs_wrap .help_text_gap {font-size: 12px; color:#999; display: block; margin-bottom: 10px; word-break: keep-all; margin-top: 15px;}
.rb_bbs_wrap .ca_name {width: 35%;}
.rb_bbs_wrap .wr_subject {width: 70%; height:60px; font-size: 18px; padding-left: 20px; padding-right: 20px; box-sizing: border-box;}
.rb_bbs_wrap .rb_inp_wrap {margin-bottom: 10px;}
.rb_bbs_wrap .border_info_wrap { border: 1px solid #ddd; border-radius: 10px; padding: 20px; margin-bottom: 20px; } .border_info_wrap h2 { font-size: 20px; font-weight: bold; margin-bottom: 15px; }
.rb_bbs_wrap .border_info_wrap h2 {font-size: 20px; font-weight: bold; margin-bottom: 15px;}
.rb_bbs_wrap .cke_sc {display: none !important;}
.rb_bbs_wrap .wr_content {position: relative;}
.rb_bbs_wrap .wr_content textarea {border:1px solid #ddd; padding: 20px; box-sizing: border-box; box-shadow: none; border-radius: 10px; resize: none;}
.rb_bbs_wrap .guest_inp_wrap {background-color: #f9f9f9; border-radius: 10px; padding: 20px; box-sizing: border-box;}
.rb_bbs_wrap .guest_inp_wrap .input_tiny {width: 20%}
.rb_bbs_wrap .guest_inp_wrap .email {margin-top: 5px; width: 60%}
.rb_bbs_wrap .rb_inp_wrap_link {position: relative; margin-bottom: 10px;}
.rb_bbs_wrap .rb_inp_wrap_link i {position: absolute; top:14px; left: 15px;}
.rb_bbs_wrap .rb_inp_wrap_link .input {padding-left: 40px; box-sizing: border-box;}
.rb_bbs_wrap .rb_inp_wrap_gap {margin-top: 30px;}
.rb_bbs_wrap .rb_inp_wrap_confirm {text-align: center; margin-top: 30px;}
.rb_bbs_wrap .rb_inp_wrap_confirm .btn_cancel {width:auto;background-color: #aaa;color: #fff;height: 47px;border-radius: 10px;border: 0px; line-height: 47px; font-size: 14px; font-weight: normal; padding-left: 30px; padding-right: 30px;}
.rb_bbs_wrap .rb_inp_wrap_confirm .btn_submit {width:auto;background-color: #AA20FF;color: #fff;height: 47px;border-radius: 10px;border: 0px; font-size: 14px; font-weight: normal; padding-left: 30px; padding-right: 30px;}
.rb_bbs_wrap .rb_inp_wrap_confirm .btn_submit:hover {opacity: 0.8}
.rb_bbs_wrap #bo_vc_w #wr_content {border-bottom-left-radius: 0px !important; border-bottom-right-radius: 0px !important;}
/* } */

/* 파일업로드 { */
.swiper-wfile {margin-top: 10px;}
.au_input {width:100%;height:100%;display:block;opacity:0;position:absolute;top:0;left:0;z-index:97;}
.au_btn_search_file {background-color:#279e6b;padding:15px;text-align:center;cursor:pointer; border-radius: 6px; color:#fff;}
.au_file_list {width: 100%; box-sizing: border-box; position: relative;}
.au_file_list_img_wrap {height:90px; overflow: hidden; border-radius: 6px; border:1px solid #eee; box-sizing: border-box;}
.au_file_list img {width: 100%; height:auto; min-height:100%;}
.au_progress {display:none;border-radius:4px;text-align:center; margin-top: 10px; background-color: rgba(0,0,0,0.05);}
.au_bars {font-size: 10px; color:rgba(0,0,0,1); background-color: rgba(0,0,0,0.1); border-radius:4px; transition: all 350ms cubic-bezier(0.07, 1, 0.07, 1);}
.cut {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 100%;display: block;}
.au_btn_del {border-radius:4px;background-color:#f00;color:#fff !important;opacity:1;cursor:pointer; position: absolute; bottom:25px; right:5px; font-size: 11px; padding: 2px 5px 2px 5px;}
.au_btn_del 2{border-radius:4px;background-color:#279e6b;color:#fff;opacity:1;cursor:pointer; position: absolute; bottom:25px; right:5px; font-size: 11px; padding: 2px 5px 2px 5px; z-index: 3}
#file_list .swiper-slide_lists dd {display: none; right:37px; color:#fff !important;}
#file_list .swiper-slide_lists:nth-child(1) dd {display: block !important;}
.au_btn_search_file {border:2px solid #ddd !important; background-color: #fff !important; color:#999 !important; min-height:100px; padding-top: 35px !important;}
.au_btn_search_file_btn {
    padding-left: 10px;
    padding-right: 10px;
    cursor: pointer;
    border: 0px dashed #f0f0f0 !important;
    color: #999 !important;
}
.w_pd {padding-top: 23px; }
.w_etc {display: block; width: 40px; margin:0 auto; text-align: center; background-color: #aaa; color:#fff; padding-top: 14px; padding-bottom: 18px; font-weight: bold; border-radius: 6px;}
.w_pdf {display: block;  width: 40px; margin:0 auto; text-align: center; background-color: #e7191b; color:#fff; padding-top: 14px; padding-bottom: 18px; font-weight: bold; border-radius: 6px;}
.w_ppt {display: block; width: 40px; margin:0 auto; text-align: center; background-color: #f68100; color:#fff; padding-top: 14px; padding-bottom: 18px; font-weight: bold; border-radius: 6px;}
.w_pptx {display: block;  width: 40px; margin:0 auto; text-align: center; background-color: #f68100; color:#fff; padding-top: 14px; padding-bottom: 18px; font-weight: bold; border-radius: 6px;}
.w_jpg {display: block;  width: 40px; margin:0 auto; text-align: center; background-color: #87cd6d; color:#fff; padding-top: 14px; padding-bottom: 18px; font-weight: bold; border-radius: 6px}
.w_zip {display: block;  width: 40px; margin:0 auto; text-align: center; background-color: #fec200; color:#fff; padding-top: 14px; padding-bottom: 18px; font-weight: bold; border-radius: 6px;}
.w_hwp {display: block;  width: 40px; margin:0 auto; text-align: center; background-color: #006fbe; color:#fff; padding-top: 14px; padding-bottom: 18px; font-weight: bold; border-radius: 6px;}
.w_xlsx {display: block;  width: 40px; margin:0 auto; text-align: center; background-color: #00753e; color:#fff; padding-top: 14px; padding-bottom: 18px; font-weight: bold; border-radius: 6px;}
.w_xls {display: block;  width: 40px; margin:0 auto; text-align: center; background-color: #00753e; color:#fff; padding-top: 14px; padding-bottom: 18px; font-weight: bold; border-radius: 6px;}
.w_doc {display: block;  width: 40px; margin:0 auto; text-align: center; background-color: #01528a; color:#fff; padding-top: 14px; padding-bottom: 18px; font-weight: bold; border-radius: 6px;}
.w_docx {display: block;  width: 40px; margin:0 auto; text-align: center; background-color: #01528a; color:#fff; padding-top: 14px; padding-bottom: 18px; font-weight: bold; border-radius: 6px;}
#son {height:10px;}
/* } */


/* 검색 { */
.bo_sch_bg {background: rgba(0,0,0,0.5);}
/* } */


/* 툴팁 { */
.rb_bbs_wrap .tooltips {opacity: 0; transition: all 350ms cubic-bezier(0.645, 0.045, 0.355, 1); cursor: default; position: absolute; left:50px; width: max-content; color: #fff; background-color: #212121; border-radius: 4px; padding: 4px 6px; font-size: 11px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: 100%; top:50%; transform: translateY(-50%); }
.rb_bbs_wrap .tooltips:after {border-top: 4px solid rgba(0, 0, 0, 0); border-left: 4px solid #212121; border-right: 4px solid rgba(0, 0, 0, 0); border-bottom: 4px solid rgba(0, 0, 0, 0); content: ""; position: absolute; left: -7px; top: 50%; transform: translateY(-50%) rotate(180deg); }
.rb_bbs_wrap .btns_gr_wrap .btns_gr .fl_btns:hover .tooltips {left: 60px; opacity: 1;}
.rb_bbs_wrap .writer_prof_ul2 .fl_btns .tooltips {left: 50%; transform: translateX(-50%); bottom:-20px; top:auto;}
.rb_bbs_wrap .writer_prof_ul2 .fl_btns .tooltips:after {top:-7px; left: 50%; transform: translateX(-50%); border-top: 4px solid rgba(0, 0, 0, 0); border-left: 4px solid rgba(0, 0, 0, 0); border-left: 4px solid rgba(0, 0, 0, 0); border-bottom: 4px solid #212121;}
.rb_bbs_wrap .writer_prof_ul2 .fl_btns:hover .tooltips {opacity: 1; bottom:-30px;}
/* } */

/* 검색창 { */
.bo_sch select {height:47px; border-radius: 10px; width: 100%;}
.bo_sch .sch_bar {margin-top: 10px; border:0px; box-shadow: none; position: relative;}
.bo_sch .sch_bar input {width: 100%; padding-right: 47px;}
.bo_sch .sch_btn {float:none; position: absolute; top:0px; right:0px; height:47px; width:47px;}
.bo_sch h3 {font-size: 16px;}
.bo_sch {border:0px; border-radius: 10px; box-shadow: 10px 10px 30px rgba(0,0,0,0.2);}
/* } */

/* 상단 강조글, 참고사항글 처리 { */
.rb_bbs_wrap .wr_subhead {background-color: #f9f9f9; color:#09244B; font-size: 14px; line-height: 150%; padding: 20px; box-sizing: border-box;}
.rb_bbs_wrap .wr_subhead_list {border-bottom:1px solid #eee;}

/* 뱃지 처리 { */
.vico_txt {border:1px solid #ddd; padding: 7px 15px 7px 15px; border-radius: 30px; font-size: 14px;}
.vico_wrap {margin-bottom: 10px;}
.list_vico_txt {border-radius: 6px; font-size: 12px;}
.list_vico_wrap {margin-bottom: 20px;}
.list_wr_suhead {border-radius: 10px; padding: 30px !important;}
.vico_link {cursor: pointer;}
.vico_link:hover {border-color:#AA20FF;}

/* 태그 처리 { */
.wr_tag {
    display: flex;
    flex-wrap: wrap; /* 태그가 많아지면 다음 줄로 넘어가도록 설정 */
    gap: 5px; /* 태그 사이 간격 */
    margin-top: 5px;
    margin-bottom: 10px;
}
.wr_tag a,
.wr_tag span { /* a 태그와 span 태그 모두에 기본 스타일 적용 */
    font-size: 13px;
    padding: 3px 8px; /* 위, 아래 3px, 양 옆 8px */
    border-radius: 4px; /* 살짝 둥근 모서리 */
    text-decoration: none;
    transition: all 0.2s ease-in-out; /* 호버 시 부드러운 전환 효과 */
    display: inline-block; /* 뱃지처럼 보이도록 */
    white-space: nowrap; /* 태그 내용이 한 줄에 표시되도록 */
    
    /* 여기서 기본 글자 색상을 #777 (회색)으로 설정합니다. */
    color: #777; 
}
/* 태그 색상 정의 (순서에 따라 다른 배경색 적용) - 총 30개 */
/* 글자색은 위에서 #777로 고정하고, 배경색만 변경합니다. */
.wr_tag a:nth-of-type(1), .wr_tag span:nth-of-type(1) { background-color: #e0f2f7; } /* Light Blue 50 */
.wr_tag a:nth-of-type(2), .wr_tag span:nth-of-type(2) { background-color: #e6ffe6; } /* Light Green 50 */
.wr_tag a:nth-of-type(3), .wr_tag span:nth-of-type(3) { background-color: #fff3e0; } /* Orange 50 */
.wr_tag a:nth-of-type(4), .wr_tag span:nth-of-type(4) { background-color: #fce4ec; } /* Pink A100 */
.wr_tag a:nth-of-type(5), .wr_tag span:nth-of-type(5) { background-color: #ede7f6; } /* Deep Purple 50 */
.wr_tag a:nth-of-type(6), .wr_tag span:nth-of-type(6) { background-color: #fffde7; } /* Yellow A100 */
.wr_tag a:nth-of-type(7), .wr_tag span:nth-of-type(7) { background-color: #fbe9e7; } /* Deep Orange 50 */
.wr_tag a:nth-of-type(8), .wr_tag span:nth-of-type(8) { background-color: #e3f2fd; } /* Blue A100 */
.wr_tag a:nth-of-type(9), .wr_tag span:nth-of-type(9) { background-color: #e0f7fa; } /* Cyan 50 */
.wr_tag a:nth-of-type(10), .wr_tag span:nth-of-type(10) { background-color: #f1f8e9; } /* Light Green 50 */
.wr_tag a:nth-of-type(11), .wr_tag span:nth-of-type(11) { background-color: #ffe0b2; } /* Orange 100 */
.wr_tag a:nth-of-type(12), .wr_tag span:nth-of-type(12) { background-color: #f8bbd0; } /* Pink 100 */
.wr_tag a:nth-of-type(13), .wr_tag span:nth-of-type(13) { background-color: #d1c4e9; } /* Deep Purple 100 */
.wr_tag a:nth-of-type(14), .wr_tag span:nth-of-type(14) { background-color: #fff9c4; } /* Yellow 100 */
.wr_tag a:nth-of-type(15), .wr_tag span:nth-of-type(15) { background-color: #ffccbc; } /* Deep Orange 100 */
.wr_tag a:nth-of-type(16), .wr_tag span:nth-of-type(16) { background-color: #bbdefb; } /* Blue 100 */
.wr_tag a:nth-of-type(17), .wr_tag span:nth-of-type(17) { background-color: #b2ebf2; } /* Cyan 100 */
.wr_tag a:nth-of-type(18), .wr_tag span:nth-of-type(18) { background-color: #c8e6c9; } /* Light Green 100 */
.wr_tag a:nth-of-type(19), .wr_tag span:nth-of-type(19) { background-color: #ffecb3; } /* Amber 100 */
.wr_tag a:nth-of-type(20), .wr_tag span:nth-of-type(20) { background-color: #ffcdd2; } /* Red 100 */
.wr_tag a:nth-of-type(21), .wr_tag span:nth-of-type(21) { background-color: #b3e5fc; } /* Light Blue 200 */
.wr_tag a:nth-of-type(22), .wr_tag span:nth-of-type(22) { background-color: #c5e1a5; } /* Light Green 200 */
.wr_tag a:nth-of-type(23), .wr_tag span:nth-of-type(23) { background-color: #ffab91; } /* Deep Orange 200 */
.wr_tag a:nth-of-type(24), .wr_tag span:nth-of-type(24) { background-color: #f48fb1; } /* Pink 200 */
.wr_tag a:nth-of-type(25), .wr_tag span:nth-of-type(25) { background-color: #e1bee7; } /* Purple 200 */
.wr_tag a:nth-of-type(26), .wr_tag span:nth-of-type(26) { background-color: #ffe082; } /* Amber 200 */
.wr_tag a:nth-of-type(27), .wr_tag span:nth-of-type(27) { background-color: #a7ffeb; } /* Teal A200 */
.wr_tag a:nth-of-type(28), .wr_tag span:nth-of-type(28) { background-color: #ccff90; } /* Lime A200 */
.wr_tag a:nth-of-type(29), .wr_tag span:nth-of-type(29) { background-color: #ff8a80; } /* Red A200 */
.wr_tag a:nth-of-type(30), .wr_tag span:nth-of-type(30) { background-color: #b9f6ca; } /* Green A200 */
/* 호버 시 효과 */
.wr_tag a:hover {
    filter: brightness(0.9); /* 색상이 약간 어두워지게 */
}

/* 댓글 더보기 { */
.hidden-comment { display: none; }
.load-more-btn {
    display: block;
    width: 120px; /* 이미지처럼 가로 길이를 조절 */
    padding: 15px;
    margin: 20px auto; /* 가운데 정렬 */
    background: #ffffff; /* 흰색 배경 */
    border: 1px solid #eee; /* 주황색 테두리 (이미지에 보이는 색상과 유사하게) */
    border-radius: 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #333; /* 텍스트 색상 (원하는 색상으로 조정) */
}
.load-more-btn:hover {
    background: #f9f9f9; /* hover 시 약간 다른 색상 (선택 사항) */
}

/* SNS 공유 및 링크 복사 영역 전체 */
.rb_bbs_wrap #bo_v_share {padding-top: 0px; padding-bottom: 0px; float:right;}
.rb_bbs_wrap #bo_v_share li a span {display: none;}
.rb_bbs_wrap #bo_v_share li {width: 35px; margin-right: 0px; margin-left: 5px;}
.rb_bbs_wrap #bo_v_sns li img {margin-right: 0px;}
.rb_bbs_wrap .copy_urls {float:left;}
.rb_bbs_wrap .copy_urls li {width:35px; margin-right: 0px; margin-left: 5px;}
.rb_bbs_wrap .copy_urls li a {display: block; background: #f1f1f1; height: 35px;line-height: 35px;text-align: center;border-radius: 5px;color: #fff;font-size: 0.95em;}
.rb_bbs_wrap #bo_v_share {float:none; text-align: center;}
.rb_bbs_wrap #bo_v_share ul {display: inline-block; float:none; vertical-align: top; margin-left: -1px; margin-right: -1px;}

/* 보기 - 수정, 목록, 스크랩, 글 등록 버튼 */
.rb_bbs_wrap #bo_v_act {margin-top: 20px;}
.rb_bbs_wrap .ver_ico {background-color: #D6DCE0; color:#09244B; font-size: 11px; padding: 2px 5px 2px 5px; border-radius: 4px;}
.rb_bbs_wrap .ver_ico2 {font-size: 11px; color:#999;}
.rb_bbs_wrap .wr_2 {background-color: #f9f9f9; color:#09244B; font-size: 14px; line-height: 150%; padding: 20px; box-sizing: border-box;}
.rb_bbs_wrap .ver_ico_wrap {position: absolute; bottom:44px; left: 0px;}
.rb_bbs_wrap .noti_bg {}

.rb_bbs_wrap .rb_bbs_for_cont_subj2 a {font-size: 16px;}
.rb_bbs_wrap .rb_bbs_for2 {padding-top: 10px; padding-bottom: 10px; padding-left: 30px; border-bottom: 1px solid #eee; position: relative;}
.rb_bbs_wrap .rb_bbs_for_mem2 {margin-top: 5px !important;}
.rb_bbs_wrap .rb_bbs_for_mem_names2 {color:#999; font-size: 12px;}
.rb_bbs_wrap .rb_bbs_for_btm_info2 dd span {color:#999 !important; font-size: 12px !important;}
.rb_bbs_wrap .rb_bbs_for_btm_info2 dd a {font-size: 12px; color:#999}
.rb_bbs_wrap .rb_bbs_for_btm_info2 dd i {opacity: 0.4}
.rb_bbs_wrap .wr_2_list {border-bottom:1px solid #eee;}

.rb-board-table {width: 100%; border-collapse: collapse;}
.rb-board-table thead {}
.rb-board-table tbody tr:hover {background-color: #f9f9f9 !important;}
.rb-board-table th {padding-top: 20px; padding-bottom: 20px; text-align: center;  font-family:'font-B',sans-serif; font-weight: normal; border-bottom: 1px solid #ddd;}
.rb-board-table td {padding-top: 20px; padding-bottom: 20px; border-bottom: 1px solid #eee;}
.rb-board-table td.rb-board-no {width: 10%; text-align: center}
.rb-board-table td.rb-board-writer {width: 20%; text-align: center;}
.rb-board-table td.rb-board-views {width: 15%; text-align: center;}
.rb-board-table td.rb-board-date {width: 15%; text-align: center;}
.rb-board-table td.rb-board-title {width: 60%; padding-right: 15px; padding-left: 15px;}
.rb-board-table td.rb-board-title a {font-size: 16px;}
.rb-board-table td .cats {color:#999 !important; padding-right: 10px;}
.rb-board-table .bbs_basic_infos_wrap {margin-top: 10px; font-size: 12px !important; color:#999 !important;}
.rb-board-table .bbs_basic_infos_wrap a {font-size: 12px !important; color:#999;}
.rb-board-table td.rb-board-title {background-repeat: no-repeat;}

.rb-board-table td.rb-board-title .fl_icos {
    line-height: normal;
    align-items: center; /* 세로 중앙 정렬 */
    justify-content: center; /* 가로 중앙 정렬: 이 부분이 중요합니다. */
    font-size: 11px;
    height: 15px; /* 기존 높이 유지 */
    border: 1px solid #ddd; /* 기존 테두리 유지 */
    background-color: #fff; /* 기존 배경색 유지 */
    border-radius: 4px; /* 기존 border-radius 유지 */
    color: #999; /* 기존 색상 유지 */
    padding: 1px 5px; /* 버튼 자체의 가로 패딩 */

    gap: 5px; /* <--- 이미지와 텍스트(span) 사이 간격을 flex `gap`으로 조절 */
}
/* 버튼 내부 이미지의 크기 및 마진 설정 */
.rb-board-table td.rb-board-title .fl_icos img {
    height: 18px; /* 이미지 높이 명시 */
    width: auto; /* 가로 비율 유지 */
    /* margin-right: 5px; 이 부분 제거 또는 0으로 설정 */
    /* vertical-align: middle; flex 컨테이너에서는 불필요할 수 있음 */
    /* margin-top: -2px; 이 부분도 제거 또는 0으로 설정하여 초기화 */
    margin: 0; /* 모든 마진을 초기화하여 flexbox에 의한 정렬에 맡깁니다. */
    display: block; /* 가끔 인라인 요소의 미세한 여백이 문제가 될 수 있어 block으로 설정 */
}
/* 텍스트(span)가 있다면 이미지 옆에 잘 나오도록 */
.rb-board-table td.rb-board-title .fl_icos span {
    display: inline-block; /* flex item의 기본 동작에 따라 block이나 inline-block이 유용 */
    margin: 0; /* 불필요한 마진 제거 */
    flex-shrink: 0; /* 텍스트가 줄어들지 않도록 방지 */
}








/* 목록 - 정렬 선택 박스 (새로 추가한 li) 스타일 */
.rb_bbs_wrap .rb_bbs_top li.order_list_item {
    /* 이 li는 다른 li들과 동일하게 우측에 정렬됩니다. */
    /* width: auto; 또는 flex-basis를 사용하여 너비를 조절할 수 있습니다. */
    /* flex-basis: 150px; /* 예시: 고정 너비 설정 */
    /* 또는 flex-basis: auto; 로 내용에 맞춰 조절 */
    /* 다른 li 항목과 동일하게 margin-left가 적용됩니다. */
    /* 추가적인 스타일이 필요하면 여기에 정의 */
}
.sort_select_wrap {
    /* select 박스를 감싸는 div의 스타일 */
    flex-basis: auto; /* 내용 너비에 맞춰 자동 조절 */
    width: 100px; /* 셀렉트 박스의 고정 너비를 설정할 수도 있습니다. (예시) */
    /* max-width: 100%; /* 부모 li.order_list_item의 너비를 넘지 않도록 */
}
/* 목록 - 셀렉트 박스 높이 및 텍스트 정렬 조절 */
.sort_select_wrap select {
    height: 36px; /* 원하는 높이로 조절 (예: 30px, 36px 등) */
    padding: 4px 18px; /* 위아래 패딩을 줄여서 높이를 조절 */
    line-height: 1.5; /* 텍스트가 중앙에 오도록 라인 높이 조절 (필요시) */
    box-sizing: border-box; /* 패딩이 높이에 포함되도록 설정 */
    
    /* 텍스트 가운데 정렬 추가 */
    text-align: left; 
    text-align-last: left; /* Internet Explorer/Edge에서 드롭다운 화살표 옆 텍스트 정렬 */

    -webkit-appearance: none; /* 웹킷 브라우저의 기본 스타일 제거 (선택 사항) */
    -moz-appearance: none;    /* 모질라 브라우저의 기본 스타일 제거 (선택 사항) */
    appearance: none;         /* 기본 스타일 제거 (선택 사항) */
    /* background-image: url('경로/화살표_이미지.svg'); /* 기본 화살표 제거 시 커스텀 화살표 추가 (선택 사항) */
    /* background-repeat: no-repeat; */
    /* background-position: right 8px center; */
    /* background-size: 10px; */
}
@media (max-width: 1024px) {
    .sort_select_wrap {flex-basis: auto; width: 120px;} /* 반응형 너비 조절 */
}
@media (max-width: 768px) {
    .sort_select_wrap {flex-basis: auto; width: 100px;} /* 반응형 너비 조절 */
}
@media (max-width: 480px) {
    .sort_select_wrap {flex-basis: auto; width: 90px;} /* 반응형 너비 조절 */
}
/* .cb 클래스는 float를 해제하는 용도였으나, flexbox 사용 시에는 불필요할 수 있습니다. */
/* ul에 flexbox를 적용하면 자식 li 요소들이 자동으로 가로로 정렬되므로 .cb는 제거해도 됩니다. */
.cb { clear: both; } /* 혹시 모를 상황을 대비해 일단 유지 */

/* 목록 상단 바로가기 버튼 링크 (간격 설정) */
/* .rb_bbs_wrap .rb_bbs_top ul 에 flexbox 속성 추가 */
.rb_bbs_wrap .rb_bbs_top ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}
/* li.cnts 에 flex-grow 속성 추가 */
.rb_bbs_wrap .rb_bbs_top li.cnts {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
    margin-right: 10px;
}
/* .cnts_btn 버튼의 간격, 배경, 테두리, 폰트 스타일 조정 */
.rb_bbs_wrap .rb_bbs_top li.cnts button.cnts_btn {
    padding: 0 4px;
    margin: 0 2px;
    font-size: 12px;
    color: #999;
    background: none;
    border: none;
    cursor: pointer;
    white-space: nowrap;
}

/* 보기 상단 바로가기 버튼 링크 */
/* 새로운 클래스 정의: view_action_link */
.rb_bbs_wrap .view_action_link {
    color: #999; /* 기본 글자색 */
    font-size: 12px; /* 기본 폰트 크기 */
    /* 필요에 따라 다른 기본 스타일 추가 */
}
/* view_action_link 클래스 내부의 <a> 태그에 적용되는 기본 스타일 */
.rb_bbs_wrap .view_action_link a {
    color: #999; /* 링크 기본 글자색 (view_action_link와 동일하게) */
    font-size: 12px; /* 링크 기본 폰트 크기 (view_action_link와 동일하게) */
    text-decoration: none; /* 링크 기본 밑줄 제거 (원한다면) */
}
/* view_action_link 클래스 내부의 <a> 태그에 마우스 오버 시 스타일 (가장 중요!) */
.rb_bbs_wrap .view_action_link a:hover {
    color: #000; /* 마우스 오버 시 원하는 색상 (예: 빨간색) */
    /* text-decoration: underline; /* 마우스 오버 시 밑줄 추가 */
}
/* fl_btns 클래스를 가진 <a> 태그 안에 있는 view_action_link에도 hover 적용 */
/* 이 규칙이 위에 있는 .view_action_link a:hover 보다 더 구체적이므로, 우선 적용될 가능성이 높습니다. */
.rb_bbs_wrap a.fl_btns .view_action_link:hover {
    color: #000; /* 마우스 오버 시 원하는 색상 */
    /* text-decoration: underline; /* 마우스 오버 시 밑줄 추가 */
}





/* ... 자세히보기 ...접기 CSS 추가 */
.more-content {
    display: none; /* 초기에는 숨김 */
}

/* 자세히보기/접기 버튼 공통 스타일 */
.expand-btn,
.collapse-btn {
/* 기존 텍스트와 동일하게 (색상 및 굵기 제거) */
    color: inherit; /* 부모 요소의 글자 색상 상속 */
    cursor: pointer;
    text-decoration: none; /* 밑줄 유지 */
    margin-left: 5px;
    font-weight: normal; /* 굵기 제거 */
    display: inline; /* 글과 자연스럽게 이어지도록 inline으로 설정 */
}

/* 텍스트 버튼 호버 시 */
.expand-btn:hover,
.collapse-btn:hover {
    color: inherit; /* 호버 시에도 글자 색상 변화 없음 */
    text-decoration: none; /* 호버 시 밑줄 제거 (원하면 유지) */
}

/* 초기에는 접기 버튼 숨김 */
.collapse-btn {
    display: none;
}





/* 댓글 자세히보기/접기 스타일 */
.comment-content-wrapper {
    position: relative;
}

.comment-content-short {
    max-height: 110px; /* 약 3-4줄 정도 */
    overflow: hidden;
    position: relative;
}

.comment-content-short::after { /* 밑에서 위로 그라데이션 */
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(transparent, rgba(255, 255, 255, 0.9));
    pointer-events: none;
}

.comment-expand-btn, .comment-collapse-btn {
    display: inline; /* 변경: 텍스트 흐름과 같이 */
    color: #777;    
    font-size: 13px;
    font-weight: normal; /* 변경: 굵기 제거 */
    cursor: pointer;
    margin-top: 0; /* 변경: 상단 여백 제거 */
    margin-left: 5px; /* 추가: ... 과의 간격 */
    padding: 0; /* 변경: 패딩 초기화 */
    border: none;
    background: none;
    text-decoration: underline; /* 추가: 밑줄로 링크 강조 */
}

.comment-expand-btn:hover, .comment-collapse-btn:hover {
    color: #333;
    text-decoration: underline;
}

.comment-content-full {
    display: none;
}

.comment-content-full.show {
    display: block;
}




/* 댓글 추천/비추천 전체 컨테이너 (아이콘+숫자) */
.cmt_good_btn_wrap {
    display: inline-flex; /* 아이콘과 숫자가 한 줄에 있도록 */
    align-items: center; /* 세로 중앙 정렬 */
    margin-left: 0px; /* 버튼 그룹 간격 조절 */
    margin-top: 15px; /* 상단 여백 (원하는 위치에 따라 조절) */
    font-size: 13px; /* 숫자 폰트 크기 */
    vertical-align: middle; /* 다른 인라인 요소와 세로 정렬 */
}

.cmt_nogood_btn_wrap {
    display: inline-flex; /* 아이콘과 숫자가 한 줄에 있도록 */
    align-items: center; /* 세로 중앙 정렬 */
    margin-left: 0px; /* 버튼 그룹 간격 조절 */
    margin-top: 15px; /* 상단 여백 (원하는 위치에 따라 조절) */
    font-size: 13px; /* 숫자 폰트 크기 */
    vertical-align: middle; /* 다른 인라인 요소와 세로 정렬 */
}

/* 댓글 추천/비추천 아이콘 부분 (원형 배경 적용) */
.cmt_good_btn,
.cmt_nogood_btn {
    display: inline-flex;
    align-items: center; /* 세로 중앙 정렬 */
    justify-content: center; /* 가로 중앙 정렬 */
    cursor: pointer;
    color: #333; /* 기본 아이콘 색상 */
    width: 35px; /* 원형 크기 조절 */
    height: 35px; /* 원형 크기 조절 */
    border-radius: 50%; /* 컨테이너를 원형으로 만듦 */
    transition: background-color 0.2s ease, color 0.2s ease; /* 배경색과 아이콘 색상 모두에 전환 효과 적용 */
    flex-shrink: 0; /* flex 컨테이너 내에서 크기 줄어들지 않도록 */
}

/* 마우스 오버 시 아이콘 색상 및 원형 배경 변경 */
.cmt_good_btn:hover,
.cmt_nogood_btn:hover {
    color: #333; /* 호버 시 아이콘 색상 */
    background-color: #eee; /* 호버 시 원형 배경색 */
}

/* 추천/비추천 SVG 아이콘 스타일 */
.cmt_good_btn svg,
.cmt_nogood_btn svg {
    width: 20px; /* 아이콘 크기 조절 (원형 크기에 맞춰 조절) */
    height: 20px; /* 아이콘 크기 조절 */
    /* vertical-align: middle; - 이제 flexbox로 중앙 정렬되므로 필요 없음 */
}

/* 추천/비추천 숫자 스타일 */
.good_count,
.nogood_count {
    font-weight: bold;
    margin-left: 0px; /* 아이콘 원형과 숫자 사이 간격 */
    white-space: nowrap; /* 숫자가 줄바꿈되지 않도록 */
    color: #333; /* 숫자 기본 색상 (아이콘 색상과 동일하게) */
}

/* 마우스 오버 시 숫자 색상 변경 (필요시 - 아이콘과 별도로 변경 가능) */
.cmt_good_btn_wrap:hover .good_count, /* 래퍼에 호버 시 숫자 색상 변경 */
.cmt_nogood_btn_wrap:hover .nogood_count {
    color: #333; /* 숫자 색상은 유지하거나 원하는 색상으로 변경 */
}

.cmt_good_btn.disabled,
.cmt_nogood_btn.disabled {
    cursor: not-allowed;
    opacity: 0.6;
}




/* 메인 이미지 스와이퍼 슬라이드 높이 제한 */
/* 1. 메인 이미지 스와이퍼 (.mySwiper) 관련 설정 */
.swiper.mySwiper .swiper-slide {
    max-height: 600px; /* 메인 슬라이드의 최대 높이 (원하는 값으로 조절) */
    height: auto;      /* 내용에 따라 높이 조절 */
    width: 100%;       /* 너비 100% 유지 */
    display: flex;     /* Flexbox 사용하여 이미지 중앙 정렬 */
    align-items: center; /* 세로 중앙 정렬 */
    justify-content: center; /* 가로 중앙 정렬 */
    background-color: #000; /* 이미지 주변 빈 공간을 검은색으로 채움 */
    overflow: hidden;  /* 슬라이드 영역을 벗어나는 내용 숨김 */
}

.swiper.mySwiper .swiper-slide img {
    max-width: 100%;   /* 이미지가 부모 너비를 초과하지 않도록 */
    max-height: 100%;  /* 이미지가 부모 높이를 초과하지 않도록 */
    
    /* 핵심: 이미지를 자르지 않고, 비율을 유지하며 공간 안에 최대한 맞춥니다. */
    object-fit: contain !important; /* !important를 사용하여 다른 스타일 강제 오버라이드 */
    
    width: auto !important;    /* 이미지 원래 가로 비율 유지 */
    height: auto !important;   /* 이미지 원래 세로 비율 유지 */
    display: block !important; /* 이미지 블록 요소로 변경하여 중앙 정렬이 잘 되도록 */
}

/* 2. 서브 이미지 스와이퍼 (.mySwiper2) 관련 설정 */
.swiper.mySwiper2 .swiper-slide {
    width: 100px !important; /* 썸네일 슬라이드 너비 고정 (기존 인라인 스타일 오버라이드) */
    height: 100px !important; /* 썸네일 슬라이드 높이 고정 (기존 인라인 스타일 오버라이드) */
    display: flex;             /* Flexbox 사용하여 이미지 중앙 정렬 */
    align-items: center;       /* 세로 중앙 정렬 */
    justify-content: center;   /* 가로 중앙 정렬 */
    background-color: #333;    /* 썸네일 빈 공간 배경색 (원하는 색으로 조절) */
    cursor: pointer;           /* 마우스 커서 변경 */
    overflow: hidden;          /* 슬라이드 영역 벗어나는 내용 숨김 */
}

.swiper.mySwiper2 .swiper-slide img {
    max-width: 100%;
    max-height: 100%;
    
    /* 핵심: 썸네일도 자르지 않고 비율 유지하며 공간 안에 맞춤 */
    object-fit: contain !important; /* !important 사용 */
    
    width: auto !important;
    height: auto !important;
    display: block !important;
}








/* 반응형 처리 { */
@media all and (max-width:1024px) {
    .rb_bbs_wrap .rb_bbs_for_info {float:none; width: auto; position: absolute; top:39px; right:-5px; padding-right: 0px; z-index: 97;}
    .rb_bbs_for_info1_num {display: none;}
    .rb_bbs_for_info2 {display: none;}
    .mo_date_wrap {color:#999; font-size: 12px; margin-bottom: 5px;}
    .rb_bbs_wrap .rb_bbs_for_cont {width: 90%;}
    .rb_bbs_wrap .rb_bbs_for_img img {height:80px;}
    .bo_v_nb li .nb_tit {display: block;}
    .bo_v_nb li .nb_date {float:none;}
    .rb_bbs_wrap .bo_v_nb li a {display: block; margin-top: 7px;}
    .rb_bbs_wrap .cm_wrpa_write_left {float:none; text-align: left; word-break: keep-all;}
    .rb_bbs_wrap .cm_wrpa_write_right {float:none; text-align: left; padding-top: 10px;}
    .rb_bbs_wrap .bo_vc_w .btn_submit {float:right; margin-top: -5px;}
    
    .rb_bbs_wrap .btns_gr_wrap .btns_gr {margin-right: 0px;}
    .rb_bbs_wrap .btns_gr_wrap {width: auto; top:65%; transform: translateY(-50%); left: auto; right:20px; z-index: 98; height:auto;}
    .rb_bbs_wrap .tooltips {display: none;}
    .bo_sch {margin-left: 0px; transform: translateX(-50%);}
    
    .rb_bbs_wrap .ca_name {width: 60%;}
    .wr_content #char_count_wrap {display: none;}
    .rb_bbs_wrap .guest_inp_wrap .input_tiny {width: 30%;}
    .rb_bbs_wrap .guest_inp_wrap .email {width: 80%;}
    .rb_bbs_for_mem_names span {word-break: keep-all;}
    .rb_bbs_wrap h2 {font-size: 24px; margin-top: 5px;}
    
    .rb_bbs_wrap .rb_bbs_for_mem li {margin-right: 10px;}
    .rb_bbs_wrap .rb_bbs_for_mem_view .rb_bbs_for_btm_info {margin-left: 10px;}
    
    .rb_bbs_wrap .cont_info_wrap_l {float:none; width: 100%;}
    .rb_bbs_wrap .cont_info_wrap_r {float:none; width: 100%;}
    .rb_bbs_wrap .writer_prof {padding: 20px; position: relative;}
    .rb_bbs_wrap .writer_prof .writer_prof_ul2 {position: absolute; top:20px; right:20px;}
    .rb_bbs_wrap .writer_prof .writer_prof_li_txt {float:none; width: 100%; font-size: 14px; margin-top:20px; word-break: keep-all;}
    .rb_bbs_wrap .writer_prof .writer_prof_ul1 {float:none; width: 100%;}
    
    .view_info_span_date {display: none;}
    
    .btm_btns_left {float:none;}
    .btm_btns_right {float:none; margin-top: 0px;}
    
    .btns_gr {display: none;}
    .rss_pc {display: none !important;}
    .btm_btns_left .btn_bo_sch {float:right;}
    .btm_btns_right .main_color_bg {width: 100%; height:50px !important; font-size: 16px;}
    .btm_btns_right .main_color_bg img {height: 18px; margin-right: 10px;}
    
    .gallery_v_mtop {margin-bottom: 20px;}
}
/* } */





















/* 채용 { */
.rc_wrap1 {border:1px solid #eee; border-radius: 10px; padding: 30px; box-sizing: border-box;}
.rc_wrap1_ul1 {font-size: 14px; color:#888;}
.rc_wrap1_ul2 {font-size: 28px; word-break: keep-all; margin-bottom: 10px; margin-top: 5px;}
.rc_wrap1_ul3 {margin-top: 15px; font-size: 16px; color:#454545;}
.rc_wrap1_infos {border-top:1px solid #eee; margin-top: 30px; padding-top: 30px; display: flex;}
.rc_wrap1_infos ul {display: inline-flex;align-items: center;flex: 1 1;}
.rc_wrap1_infos_ico {width: 60px; height:60px; background-color: #f9f9f9; border-radius: 60px; text-align: center; position: relative;}
.rc_wrap1_infos_ico i {position: absolute; top:50%; transform: translateY(-50%); width: 100%; text-align: center; display: block;}
.rc_wrap1_infos_ico img {width: auto; height:25px;}
.rc_wrap1_infos_txt {margin-left: 16px;}
.rc_wrap1_infos_txt dd:nth-child(2) {font-size: 18px; margin-top: 4px;}
.rc_sub_title {font-size: 24px; margin-top: 50px; margin-bottom: 20px;}
.rc_wrap2 {border:1px solid #eee; border-radius: 10px; padding: 30px; box-sizing: border-box; display: flex;flex-wrap: wrap;gap: 60px;}
.rc_wrap2_div {display: flex; width: calc(50% - 30px); flex-direction: column; gap: 20px; font-size: 15px;}
.rc_wrap2_div ul {align-items: flex-start; flex-direction: row; display: flex; width: 100%; }
.rc_wrap2_div ul dt {width: 30%; color:#999;}
.rc_wrap2_div ul dd {width: 70%; word-break: keep-all;}

.rc_wrap3_div {width: 100%; font-size: 26px; border-bottom:1px solid #eee; margin-bottom: -30px; padding-bottom: 30px;}

.rc_wrap3 {border:1px solid #eee; border-radius: 10px; padding: 0px; box-sizing: border-box; overflow: hidden;}
.rc_sub_title2 {font-size: 16px; margin-top: 0px; display: block; padding:30px;}

.rc_pri {display: flex; gap:10px;}
.rc_pri_ico {border:1px solid #454545; padding: 3px 7px 3px 7px; margin-top: -3px; border-radius: 30px; font-size: 14px;}
.rc_pri_txt {}

.rc_wrap4 {border:1px solid #eee; border-radius: 10px; padding: 30px; box-sizing: border-box; display: flex;flex-wrap: wrap;gap: 60px;}
.rc_wrap4_div {display: flex; width: 100%; flex-direction: column; gap: 0px; font-size: 15px;}
.rc_wrap4_div ul {align-items: flex-start; flex-direction: row; display: flex; width: 100%; }

.flex_gbtns {display: flex; align-items: center; margin-right: 30px;}
.flex_gbtns a {margin-left: auto; border:1px solid #ddd; padding: 5px 10px;}
.flex_gbtns a:hover {border-color:#454545;}

.rc_wrap5 {border:1px solid #eee; border-radius: 10px; margin-bottom: 50px; padding: 30px; box-sizing: border-box; display: flex;flex-wrap: wrap;gap: 60px;}
.rc_wrap5_div {display: flex; width: 100%; flex-direction: column; gap: 0px; font-size: 15px;}
.rc_wrap5_div ul {align-items: flex-start; flex-direction: row; display: flex; width: 100%; }


.bbs_prd_list_con_li4 li .rc_label1 {background-color: #454545; color:#fff; padding-left: 8px; padding-right: 8px;}
.bbs_prd_list_con_li4 li .rc_label2 {background-color: transparent; color:#454545; border:1px solid #454545; padding-left: 8px; padding-right: 8px;}
.bbs_prd_list_con_li4 li .rc_label_txt {padding-left: 5px; padding-right: 0px; text-align: left; background-color: transparent; font-size: 16px;}

.lists_rc_p1 {position: absolute; left: 30px; bottom:30px; display: flex; align-items: center; gap:5px; cursor: pointer;}
.lists_rc_p1:hover li dd {color:#000;}
.lists_rc_p2 {position: absolute; right: 30px; bottom:34px;}
.wrap_selec {float:left !important; width: 150px;}
.wrap_selec select {width: 100%;}
/* } */


/* 커스텀 오버레이 { */
    .wrap {position: absolute;left: 0;bottom: 45px;width: 200px;height: 82px;margin-left: -100px;text-align: left;overflow: hidden;font-size: 14px;border-radius: 10px;box-shadow: 0px 0px 20px rgba(0,0,0,0.1);}
    .wrap * {padding: 0;margin: 0;}
    .wrap .info {width: 200px;height: 82px;background: #fff; padding: 20px;}
    .wrap .info:nth-child(1) {border: 0;}
    .info .close {position: absolute;top: -2px;right: 0px;width: 20px;height: 20px;}
    .info .close:hover {cursor: pointer;}
    .info .body {position: relative;}
    .info .desc {position: relative;margin-top: 0px;}
    .desc .sub3 {color:#999; font-size: 14px; margin-top: 5px;}
    .desc .titles {font-size: 18px;}
    .info .img {position: absolute;top: 10px;left: 10px; width:50px; height:50px; border-radius: 4px; background-repeat: no-repeat; background-position: center center; background-size: cover;}
    .info .link {color: #5085BB;}

    .cut90 {
        overflow: hidden; 
        text-overflow: ellipsis;
        white-space: nowrap; 
        width: 90%;
        display: block;
    }
    
    .cut80 {
        overflow: hidden; 
        text-overflow: ellipsis;
        white-space: nowrap; 
        width: 80%;
        display: block;
    }

/* } */

#roadview {width:100%; height: 400px; border-radius: 4px; margin-bottom: 15px;}
.info_btm_bg {background-color: #f9f9f9; border-radius: 10px; padding: 30px; margin-bottom: 15px; word-break: keep-all; color:#454545; font-size: 14px; line-height: 140%;}


/* 탭 메뉴 { */
.tab_menu {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 10px 0; /* 탭 버튼과 라인(상단) 사이 간격 조절 */
    position: relative; /* 가상 요소 위치 기준점 설정 */
}
.tab_menu li {
    margin-right: 10px;
}
.tab_menu li a {
    display: flex; /* flexbox를 사용하여 아이콘과 텍스트를 정렬 */
    align-items: center; /* 아이콘과 텍스트를 세로 가운데 정렬 */
    padding: 10px 15px;
    padding: 4px 8px; /* 패딩 값 조정 (글자와 박스와의 간격 */
    text-decoration: none;
    color: #333;
    background-color: #f0f0f0;
    border: 1px solid #ddd; /* 탭 버튼 테두리 */
    border-radius: 15px; /* 테두리 둥글게 */
    cursor: pointer;
    transition: background-color 0.3s ease; /* 부드러운 배경색 변경 효과 */
    box-sizing: border-box; /* 테두리 포함 너비 계산 */
}
.tab_menu li a svg {
    width: 24px;  /* 아이콘 크기 24px로 변경 */
    height: 24px; /* 아이콘 크기 24px로 변경 */
    margin-right: 8px; /* 아이콘과 글자 사이 간격 조절 */
    vertical-align: middle; /* 아이콘을 세로 중앙 정렬 */
}
.tab_menu li a:hover,
.tab_menu li a.active {
    background-color: #fff;
    color: #000;
}
/* 탭 메뉴 아래 가로 라인 */
.tab_menu::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10px; /* 탭 버튼과 라인(하단) 사이 간격 조절 */
    height: 1px;
    background-color: #ddd;
}

/* 탭 컨텐츠 스타일 */
.tab_content {
    display: none;
    padding: 20px;
    border: none; /* 탭 내용 테두리 제거 */
}
.tab_content.active {
    display: block;
}

/* } */