@charset "utf-8";

/* 게시판 공통 */
.sub-page {width: 100%; height: 100%; flex-grow: 1;}
.handling .bg, .handling_en .bg {background-image: url(img/bg_electronic.jpg);}
.gallery .bg, .gallery_en .bg {background-image: url(img/bg_gallery.jpg);}
.sub-page .sub-title-area .text2 {color: #EEEEEE;}
.sub-page .sub-title-area .title2 {color: #fff;}

.sub-page .title1 {text-align: center; overflow: hidden; position: relative; margin-bottom: 5rem; z-index: 1;}
.sub-page .title1 p {width: -moz-fit-content; width: -webkit-fit-content; width: fit-content; padding: 0 40px; margin: 0 auto; display: -webkit-flex; display: flex; justify-content: center; align-items: center; background: #fff;}
.sub-page .title1 .svg-line {width: 100vw; height: 2px; position: absolute; top: calc(50% - 2px); left: 50%; transform: translateX(-50%); z-index: -1;}

#bo_cate h2 {position: absolute; font-size: 0; line-height: 0; overflow: hidden;}
/* //게시판 공통 */

/* 갤러리 목록 */
#bo_lightbox h2 {width: 0; height: 0; margin: 0; padding: 0; font-size: 0; line-height: 0; overflow: hidden;}

.ul-board {display: grid; gap: 30px;}
.thumb-box {position: relative; display: block;}
.thumb-box .checkbox-area {position: absolute; top: 10px; left: 10px; z-index: 15;}
.thumb-box .checkbox-area input[type=checkbox] + label::before {color: #f9f9f9;}
.thumb-box .checkbox-area input[type=checkbox]:checked + label::before {color: var(--highlight);}
.thumb-box .thumb {width: 100%; padding-bottom: 75.15151515152%; position: relative; border-radius: 10px; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.08); overflow: hidden;}
.thumb-box img, .thumb-box video {width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0;}
.thumb-box .dim {position: absolute; inset: 0; background-color: var(--dim, rgba(0, 0, 0, .67)); display: -webkit-flex; display: flex; justify-content: center; align-items: center; font-family: var(--gmarket); font-weight: 700; font-size: 1.25rem; color: #fff; line-height: 1; z-index: 10;}
.thumb-box .dim i {margin-right: 4px;}
.thumb-box .dim.notice {background-color: rgba(255, 69, 70, .67);}

#bo_lightbox .gall-now a {color: var(--red, #FF4546);}

.thumb-box .subject {padding: 14px 30px; background: var(--dim, rgba(0, 0, 0, 0.67)); color: #FFF; font-size: 1.25rem; font-weight: 550; line-height: 140%; position: absolute; bottom: 0; left: 0; right: 0;}

.thumb-box .subject .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}
.thumb-box .subject .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}
.thumb-box .subject .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}
.thumb-box .subject .icon-new {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}
.thumb-box .subject .icon-hot {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}
.thumb-box .subject .fa-lock {display:inline-block;margin-left:4px;line-height:16px;color:#999;text-align:center;vertical-align:middle}

/* 게시판 목록 공통 */
.bo-top {margin-bottom: 15px; display: -webkit-flex; display: flex; justify-content: space-between; align-items: center;}

.bo-top .ul-user-btn {order: 2;}
.bo-top #check_all {order: 1;}

.bo-bottom {margin: 5px 0;}

.ul-user-btn {display: -webkit-flex; display: flex; justify-content: end; align-items: center; margin-left: auto;}
.ul-user-btn>li {width: 40px; text-align: center; background: #fff; position: relative;}
.ul-user-btn>li + li {margin-left: 5px;}

.more-opt {display: none; position: absolute; top: 45px; right: 0; background-color: #fff; border: var(--border-solid); z-index: 999;}
.more-opt:before {content: ''; position: absolute; top: -8px; right: 13px; width: 0; height: 0; border-width: 0 6px 8px 6px; border-style: solid; border-color: transparent transparent #dfdfdf transparent;}
.more-opt:after {content: ''; position: absolute; top: -6px; right: 13px; width: 0; height: 0; border-width: 0 6px 8px 6px; border-style: solid; border-color: transparent transparent #fff transparent;}
.more-opt li {padding: 10px; color: var(--gray, #999);}
.more-opt li + li {border-top: 1px solid #f1f1f1;}
.more-opt li button, 
.more-opt li a {width: 100%; border: 0; border-radius: 0; background: #fff; color: var(--gray, #999); display: -webkit-flex; display: flex; justify-content: end; align-items: center; column-gap: 10px;}
.more-opt li:hover a,
.more-opt li:hover button {color: var(--dark, #222);}
.more-opt li i {order: 2;}

.td_num strong {color:#000}
.bo_cate_link {display:inline-block;background:#fff7ed;color:#FCBA62;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: var(--red, #FF4546);}
#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_lightbox li.empty {padding: 85px 0; text-align: center;}

.bo-search-wrap {display: none; width: 100%; height: 100%; position: fixed; inset: 0; z-index: 999;}
.bo-search {
    width: 330px; max-height: 300px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; text-align: left; overflow-y: auto; border-radius: 10px; flex-direction: column; gap: 0;
    -moz-box-shadow: 1px 1px 18px var(--shadow); 
    -webkit-box-shadow: 1px 1px 18px var(--shadow); 
    box-shadow: 1px 1px 18px var(--shadow);
}
.bo-search h3 {width: 100%; padding: 15px; border-bottom: 1px solid #e8e8e8;}
.bo-search form {padding: 15px;}
.bo-search #sfl {width: 100%;}
.bo-search .search-bar {width: 100%; margin-top: 10px;}
.bo-search .input-search {width: 100%;}
.bo-search .btn-bo-search-close {padding: 15px; position: absolute; right: 0; top: 0; color: #b5b8bb; border: 0; font-size: 16px; background:#fff}
.bo-search-bg {width: 100%; height: 100%; background-color: var(--dim, rgba(0, 0, 0, .67));}


/* 게시판 쓰기 */
#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 .top {padding: 15px; display: -webkit-flex; display: flex; justify-content: space-between; align-items: center; border-top: 2px solid var(--dark); border-bottom: 1px solid var(--dark);}

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

#bo_v_title {}
#bo_v_title .bo_v_cate {padding: 5px 10px; display: inline-block; background: #fff7ed; color: #FCBA62; 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:var(--border-solid);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:#FCBA62}
#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:#FCBA62}
#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:var(--border-solid);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:#FCBA62}
#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:#FCBA62}
#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: 3.75rem 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;padding:15px}
#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:underline}
#bo_v_con img {max-width:100%;height:auto}

#bo_v_act {margin-bottom:30px;text-align:center}
#bo_v_act .bo_v_act_gng {position:relative}
#bo_v_act a {margin-right:5px;vertical-align:middle;color:#4a5158}
#bo_v_act a:hover {background-color:#fff;color:#ff484f;border-color:#ff484f}
#bo_v_act i {font-size:1.4em;margin-right:5px}
#bo_v_act_good, #bo_v_act_nogood {display:none;position:absolute;top:30px;left:0;z-index:9999;padding:10px 0;width:165px;background:var(--red, #FF4546);color:#fff;text-align:center}
#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}


/*글쓰기*/
#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 .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;height:auto;line-height:1;}
#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}





@media screen and (max-width:1200px){
    .ul-board {gap: 24px;}
}

@media screen and (min-width:993px){
    .ul-board {grid-template-columns: repeat(4, 1fr);}
    #bo_lightbox li.empty {grid-column: 1 / span 4;}
}

@media screen and (max-width:992px){
    .ul-board {grid-template-columns: repeat(3, 1fr); gap: 24px 16px;}
    #bo_lightbox li.empty {grid-column: 1 / span 3;}
}

@media screen and (max-width:768px){
    .ul-board {grid-template-columns: repeat(2, 1fr);}
    #bo_lightbox li.empty {grid-column: 1 / span 2;}
}

@media screen and (max-width:480px){
    .ul-board {grid-template-columns: unset; gap: 16px 12px;}
    
    #bo_lightbox li.empty {grid-column: unset;}
}