@charset "utf-8";


/* 게시판 목록 공통 */
body {overflow-x: hidden;}

.selec_chk {position:absolute;top:0;left:0;width:0;height:0;opacity:0;outline:0;z-index:-1;overflow:hidden}
.chk_box {position:relative}
.chk_box input[type="checkbox"] + label {position:relative;color:#676e70}
.chk_box input[type="checkbox"] + label:hover {color:#2172f8}
.chk_box input[type="checkbox"] + label span {float:left;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}


.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_fx > ul li {display: inline-block; float: left}

.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}


/* 게시판 목록 */
#bo_list {width: 100vw; position:relative; margin: 54px auto 20px auto; overflow-x: hidden}
#bo_list:after {display:block;visibility:hidden;clear:both;content:""}

#now_menu {width: 100%; max-width:1320px; margin: 0 auto; padding:20px; text-align: left; z-index: 10px}
#now_menu span {text-decoration:none;}

#bo_cate {display: inline-block; margin: 0;}
#bo_cate ul {list-style: none;}
#bo_cate li {display: inline-block;}
#bo_cate a {display: none;}
#bo_cate #bo_cate_on a {display: inline-block;}

#bo_adm_bt {display: block; text-align:left;}

#boli_wrap {float:left; margin: 0; padding: 0; width: 100%; clear: both; overflow-x:hidden}
#boli_ul {width: 100vw; display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; justify-content: center; margin: 0 auto;}
#boli_ul li {flex-shrink: 1;  word-break: break-word;}
.li_i_mod {display: inline-block; font-size:12px; z-index: 9999; position: relative;}
.no_li {width: 100%; margin: 0; padding: 50px 0; text-align: center}
.bo_fx {display: inline-block; float: left; width: 30%; text-align: left; }

/* 기본_bs 소개_int */
.li_i_bs {flex-basis: 1200px; margin: 0 auto; min-height: 350px; position: relative; margin-bottom: 40px;}
.li_i_bs .c_p_txt {width: 100%; padding-top: 40px; word-break: keep-all;}
.li_i_bs .c_p_img {padding: 0; margin: 0;  min-height: 350px; z-index: -99; background-repeat: no-repeat;}

.li_i_bs .li_i_wr1 {display:block; font-size: 2.5rem; font-weight: 700; opacity: 0.5}
.li_i_bs .li_i_sub {display:block; font-size: 5.5rem; font-weight: 700; padding-bottom: 5px;}
.li_i_bs .i_wr4, .li_i_bs .i_wr5, .li_i_bs .i_wr6, .li_i_bs .i_wr7, .li_i_bs .i_wr8 {display: none;}
.li_i_bs .li_i_con {display: block; font-size: 2.0rem; margin-top: 16px; word-break: keep-all; font-weight: 300; color: #717171}


.bs_left .c_p_txt {float: right}
.bs_left .li_i_wrap {float: right; width: 100%;}

.bs_left .li_i_wr1, .bs_left .li_i_sub, .bs_left .i_con {padding-left: 40px; text-align: left; width: 100%; float: right}

.bs_left .i_con {display: block}
.bs_left .c_p_img {width: 100%;}


.bs_right .c_p_txt {float:left}
.bs_right .li_i_wrap {float: left; width: 100%}

.bs_right .li_i_wr1, .bs_right .li_i_sub, .bs_right .i_con {padding-right: 40px; width: 100%;float: left}

.bs_right .i_con {display: block}
.bs_right .c_p_img {width: 100%;}

.bs_cent {flex-grow: 1; margin-bottom: 60px; padding-top: 30px; padding-bottom: 10px; width: 100vw;}
.bs_cent .c_p_txt {}
.bs_cent .li_i_wr1, .bs_cent .li_i_sub, .bs_cent .i_con {padding-right: 40px; padding-left: 40px; text-align: center; width: 100%;}
.bs_cent .li_i_sub {padding-bottom: 10px;}
.bs_cent .li_i_wrap {float: left; width: 100%;}
.bs_cent .i_con {display: block; width: auto; margin: 0 auto 70px auto; text-align: center; padding-top: 20px; line-height: 1.6;}
.bs_cent .c_p_img {position: absolute; left: 0; top: 0; width: 100vw; height:100%; min-height: 350px; background-size:cover; background-position: 50% 50%;}

.bs_just .li_i_wr1, .bs_just .li_i_sub, .bs_just .i_con {padding-left: 40px; padding-right: 40px; text-align: left; width: 100%; max-width: 1200px; margin:0 auto;}
.bs_just .li_i_wrap {float: left; width: 100%;}
.bs_just .i_con {display: block}
.bs_just .c_p_img {width: 100%; max-width: 1200px; margin:0 auto; position: relative; left: 0; top: 0; width: 100%; min-width:0; background-color: transparent; background-position: top left;}

.li_i_bs .bsnomg {display: none;}


/* int_left 담임목사 / int_right 교역자 / int_cent 시무장로 / int_just 교직원 */

.li_i_int {flex-basis: 1200px; flex-shrink: 1; flex-grow: 1;
    display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-end; align-content: flex-start; padding: 0 40px; margin: 0 auto 60px auto;
}
.li_i_int .c_p_txt {width: 100%; flex-grow: 1; margin: 0; order: 0;}
.li_i_int .li_i_sub {width: 100%; float: left; padding: 10px 0 ; margin-top: 5px; margin-bottom: 25px; font-size: 2.3rem; font-weight: 700;}

.int_left, .int_right, .int_cent, .int_just {display: block; }
.int_left .li_i_sub, .int_right .li_i_sub, .int_cent .li_i_sub, .int_just .li_i_sub {border-bottom: 1px solid #eaeaea;}

.li_i_int .li_i_wrap {display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-end; align-content: flex-start; margin-bottom: 30px; float: left}
.li_i_int .li_i_con {order:2; display: inline-block; padding: 20px 0 10px 5px;}
.li_i_int .c_p_img {order:1; display: block; background-repeat: no-repeat; background-size: cover; background-position: center top; margin-right: 15px;}


.li_i_int .li_i_con > span {width: 100%; float: left; margin: 2px 0}
.li_i_int .li_i_con svg {width: 20px; margin-bottom: -5px;}
.li_i_int .li_i_con .i_wr4 {display: none;}
.li_i_int .li_i_con .i_con {display: block; font-weight: 700;  float: left}
.li_i_int .li_i_con .i_wr5 span, .li_i_int .li_i_con .i_wr6 span, .li_i_int .li_i_con .i_wr7 span {display:inline-block;}
.li_i_int .li_i_con .i_wr8 {color: #c8c8c8; font-size: 1.8rem; margin-bottom: 15px; word-break:keep-all}

.int_left .li_i_wrap, .int_right .li_i_wrap, .int_cent .li_i_wrap, .int_just .li_i_wrap {flex-basis:550px; margin-right: 5px;}

.int_left .c_p_img, .int_right .c_p_img, .int_cent .c_p_img, .int_just .c_p_img {min-width:266px; flex-basis: 266px; height: 336px}

.int_left .li_i_con, .int_right .li_i_con, .int_cent .li_i_con, .int_just .li_i_con {flex-basis: 264px;}

.int_left .i_con, .int_right .i_con, .int_cent .i_con, .int_just .i_con {font-size: 3rem;}




@media screen and (min-width: 992px) {
        .bs_left, .bs_right, .bs_just, .int_left, .int_right, .int_cent, .int_just {
            flex-grow: 1;}
    
        .bs_left {padding-right: calc(50% + 100px)}
        .bs_left .c_p_txt {max-width: 50vw; padding-left: calc(50vw - 580px)}
        .bs_left .li_i_wrap {max-width: 50vw; padding-left: calc(50vw - 580px)}
    
        .bs_right {padding-left: calc(50% + 100px);}
        .bs_right .c_p_txt {max-width: 50vw; padding-right: calc(50vw - 580px)}
        .bs_right .li_i_wrap {max-width: 50vw;  padding-right: calc(50vw - 580px)}
        .bs_right .li_i_wr1, .bs_right .li_i_sub, .bs_right .i_con {text-align: left;}
    
    
        
        .bs_cent .i_con {max-width:800px;}

        .bs_left .c_p_img {position: absolute; left: 50%; top: 0; background-position: top left; max-width: 600px}
        .bs_right .c_p_img {position: absolute; right: 50%; top: 0; background-position: top right; max-width: 600px}
        
        .int_left .li_i_wrap, .int_right .li_i_wrap, .int_cent .li_i_wrap, .int_just .li_i_wrap {width: 768px; flex-grow: 0; flex-shrink: 0;}
        .int_left .li_i_con, .int_right .li_i_con, .int_cent .li_i_con, .int_just .li_i_con {flex-grow:0}
    } 
    
@media screen and (max-width: 992px) {
    
    .li_i_bs, .li_i_hi, .li_i_int {flex-grow: 1;} 
    #now_menu, #boli_ul, .bs_cent .i_con, {width: 100vw;}
    
    .bs_left .li_i_wr1, .bs_left .li_i_sub, .bs_left .i_con {padding-right: 40px;}
    .bs_right .li_i_wr1, .bs_right .li_i_sub, .bs_right .i_con {padding-left: 40px; text-align: right}
    
    .bs_left .c_p_img {float:left; margin-top: 30px; background-position: 50% 50%}
    .bs_right .c_p_img {float:left; margin-top: 30px; background-position: 50% 50%}
    
    
    
    .int_cent .li_i_wrap, .int_just .li_i_wrap {flex-grow: 1; flex-shrink: 1;}
    .int_left .li_i_con, .int_right .li_i_con, .int_cent .li_i_con, .int_just .li_i_con {flex-grow:1}
}



/* 목록 상단 고정 */
.bs_none, .int_none {flex-grow: 1; position:absolute; top: -100px; left: 0; width: 100vw; min-height: 410px; z-index: -999; background-color:#ffffff; padding-top: 150px;border-bottom: 1px solid #d1d6db}
.bs_none .c_p_txt, .int_none .c_p_txt {width: 100%; float: left}
.bs_none .c_p_txt div, .int_none .c_p_txt div {width: 100%; float: left; margin:0; text-align: center}

.bs_none .li_i_wr1, .int_none .li_i_wr1 {font-size: 2.5rem; font-weight: normal; line-height: 1.4; color: #878787}
.bs_none .li_i_sub, .int_none .li_i_sub {width: 100%; float: left; text-align: center}
.bs_none .li_i_sub .i_sub, .int_none .li_i_sub .i_sub {font-size: 6rem; font-weight:bold}

.bs_none .li_i_wrap, .int_none .li_i_wrap {width: 100%}
.bs_none .li_i_con, .int_none .li_i_con {font-size: 2rem; margin-top: 16px; font-weight: 500; opacity: 0.6; flex-grow: 1; flex-shrink: 1}
.bs_none .c_p_img, .int_none .c_p_img {display: none}


/* 게시판 쓰기 */
#bo_w {margin: 0 auto; padding-top: 100px}
#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}
.half_input {width: 40%; margin-right: 10px}
.full_input {width: 90%}
#bo_w label {width: 80px; margin-right: 0.5%}
#bo_w label > strong {color: red; display: inline-block}
#bo_w label > span {display: inline-block}

#bo_w .int, #bo_w #morecon .wr5, #bo_w #morecon .wr6, #bo_w #morecon .wr7, #bo_w #morecon .wr8, #bo_w #morecon .wr9, #bo_w #morecon .wr10 {display: none;}
#bo_w .bs, #morecon .wr4 {display: block}

.wr_2_div, .morecon_div {display: block; width: 100%;}
#bo_w #morecon input {margin-bottom: 10px;}

#rd_bs:checked~.int, #rd_bs:checked~.write_div .int, #rd_bs:checked~#morecon int, #rd_bs:checked~#morecon .wr5, #rd_bs:checked~#morecon .wr6, #rd_bs:checked~#morecon .wr7, #rd_bs:checked~#morecon .wr8, #rd_bs:checked~#morecon .wr9, #rd_bs:checked~#morecon .wr10 {display: none;}
#rd_bs:checked~.bs, #rd_bs:checked~#morecon .bs {display: block;}
#rd_bs:checked~.write_div .bs {display: inline-block}


#rd_int:checked~.bs, #rd_int:checked~.write_div .bs, #rd_int:checked~#morecon .bs {display: none;}
#rd_int:checked~.int, #rd_int:checked~#morecon .wr5, #rd_int:checked~#morecon .wr6, #rd_int:checked~#morecon .wr7, #rd_int:checked~#morecon .wr10 {display: block;}
#rd_int:checked~.write_div .int, #rd_int:checked~#morecon .int {display: inline-block}

#bo_w #morecon {display: block; float: left; width: 100%}
#bo_w .plus_bt {display: inline-block; width: 49%; padding: 5px; cursor: pointer; border: 1px solid #000000; border-radius: 15px; text-align: center; font-weight: 700; font-size: 1.5rm; margin-right:5px;}
#bo_w #morecon .minbt {display: none;}
#bo_w #morecon .morecon {padding-top:50px; border-top:1px solid #eaeaea}
#bo_w #morecon .morecon .file_wr {width: 100%;}

#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 9px 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_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 .cont_part {margin:10px 0;position:relative; padding: 10px 0}

#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; text-align: right}
#bo_w .bo_w_flie .file_del input {display: inline-block}
#bo_w .bo_w_flie .file_del label {width: 500px}
#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}