@charset "utf-8";

/* ### 기본 스타일 커스터마이징 시작 ### */

.bo_top_img{position:absolute;top:0;left:0;width:100%;height:420px;overflow:hidden;text-align:center}
.bo_top_img img {position: absolute;top: 0;left: -9999px;right: -9999px;margin: auto;width:100%;height:auto; 
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);}
html, body {
    height: 100vh; /* 뷰포트 높이 최소 100% */
    margin: 0;
    padding: 0;
    overflow: hidden; /* 🔥 body의 스크롤바 숨김 */
}

.extra-content.bibleCon p {
    text-indent: -1em; /* 글자 2개 크기만큼 들여쓰기 */
    padding-left:1em;
}

.juboCon div p {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3개 가로 배치 */
    gap:auto;
    padding: 10px 0;
    position: relative;
    border-bottom: 1px solid #ffffff1a;
    text-align: center;

}

.juboCon div p .left {
    display: grid;
    text-align: left;
    place-items: center left; 

}

/* 가운데 글씨는 선 위로 가도록 */
.juboCon div p .center {
    text-align: center;
    /* flex: 0; */
    font-size: 0.9em;
    color: #2d2d2d;
    padding: 5px 10px 3px;
    background: rgba(255, 255, 255, 0.067); /* 줄과 겹치지 않도록 배경 추가 */
    backdrop-filter: blur(10px); /* 🔥 블러 효과 적용 */
    -webkit-backdrop-filter: blur(10px); /* 사파리 지원 */
    border-radius: 10px;
    display: grid;
    place-items: center; 
}

.juboCon div p .right {
    text-align: right;
    font-size: 0.9em;
    color: #000000d0;
    display: grid;
    place-items: center right; 
}


/* ✅ 모바일 화면에서 배치 변경 */
@media screen and (max-width: 450px) {

    .juboCon div p {
        grid-template-columns: repeat(2, 1fr); /* 🔥 2열로 변경 */
        grid-template-rows: auto auto; /* 
        🔥 자동 높이 */

        grid-template-areas: 
            "one three"
            "two two"; 
    }

    .juboCon div p span:nth-child(1) {
        grid-column: 1;
        grid-area: one;
        grid-row: 1;
    }

    .juboCon div p span:nth-child(2) {
        grid-column: span 2; /* 🔥 2칸 차지 */
        grid-area: two;
        grid-row: 2;
        margin-top:5px;
    }

    .juboCon div p span:nth-child(3) {
        grid-area: three;
        grid-column: 2;
        grid-row: 1;
    }
     
    .juboCon div p .center{
        display: flex;
        text-align: left;
        flex-direction: column;
}   
    .juboCon div p .center span{
        display: inline;
        text-align: left;
}
}
#bo_sch{
    background-color: #522525;
    width: 100%;
    position: relative;
    margin-bottom:  15px !important;
    display: block;
    border-radius: 10px !important;
}

#bo_sch #sfl{
    border: none;
    border-right: 1px solid #e7e7e7;
}

#bo_sch #stx{
    border: none;
}
#fboardlist{
    min-height: 80vh;
    margin-top: 10px !important;
    background-color: #fff;
    position: relative;
    display: block;
    padding: 25px 25px 80px;
    border-radius: 10px;
}
.all_chk{
    padding-bottom: 15px;
}
#fboardlist .bo_fx{
    position: absolute;
    bottom: 0px;
}



.bottomMenu{font-style: none;
background: none !important;
color: #ffffff;}
/* 버튼 컨테이너 */
.button-container {
    display: flex;
    justify-content: center;
    gap: 15px; /* 버튼 간격 */
    /* margin-top: 20px; */
    background-color: #00000042;
}

/* 개별 버튼 */
.custom-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 60px;
    color: #fff;
    font-size: 14px;
    text-align: center;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    user-select: none;
    opacity: 50%;
}

/* 아이콘 */
.custom-button i {
    font-size: 24px;
    margin-bottom: 5px;
}

/* 호버 효과 */
.custom-button:hover {
    background: rgba(0, 0, 0, 0.85);
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}


#fadeOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* 어두운 투명 레이어 */
    opacity: 0;
    pointer-events: none;
    z-index: 9999;
    
    backdrop-filter: blur(10px); /* 🔥 블러 효과 적용 */
    -webkit-backdrop-filter: blur(10px); /* 사파리 지원 */
    
}

.nav-btnGF {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 20px;
    background: #333;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s;
}

.nav-btnGF:hover {
    background: #555;
}


.view-bottom-menu {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.menu-btn {
    display: inline-block;
    padding: 10px 15px;
    background: #444;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: background 0.3s;
}

.menu-btn:hover {
    background: #666;
}

.edit-btn {
    background: #007bff;
}

.edit-btn:hover {
    background: #0056b3;
}

.bo_top_img {height:200px;display: none;}

#tnb{display: none;}
#hd{display: none;}
#container_title{
    display: none;
}
#bo_sch .sch_input{height:52px;border:1px solid #cfcfcf;padding:0;background-color:transparent;padding:20 40px 0 10px;vertical-align:top}
#bo_sch .sch_input:focus{outline:none;border-bottom:2px solid #e32464}


#sermon_input{
    display: flex;
    flex-direction: row; /* 모바일에서는 세로 정렬 */
    gap:15px;
    padding: 25px;
    
    border-radius: 10px;
    background-color: #ffffff;
    /* box-shadow: 0 7px 10px rgba(0, 0, 0, 0.132); */
}
#wr_subject{
    margin-bottom: 15px;
    padding-left:30px !important;
    height: 40px;
    border-radius: 10px;
}


#sermon_input .double{
    display: flex;
    flex-direction: row; /* 모바일에서는 세로 정렬 */
    width: 100%;
    border-radius: 10px;
    background-color: #ffffff;
   padding: 25px;
   gap: 20px;
}


#sermon_input .section1,#sermon_input .section2,#sermon_input .section3{
    display: flex;
    flex-direction: column; /* 모바일에서는 세로 정렬 */
    width: 34%;
    height: fit-content;
    
}

#articleWrap{
    height: 100vh;
    min-height: 100vh;
    height: calc(var(--vh, 1vh) * 100); /* 모바일 대응 */
    width: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;


}
#bo_v { 
    position: relative; 
    max-width: 100% !important;
    padding:0px !important;
}

#bo_v_atc {
    padding: 45px !important;
    box-sizing: border-box;
    margin:0 !important;
}

.form_01 .write_div{
    margin: 0;
}


#bo_v_title{
    display: block;
    position: absolute !important;
    padding-top:18px!important;
    height: 45px;
    margin:0;
    text-align: center;
    font-weight: 100;
    opacity: 50%;
    font-size: 0.9em !important;
    position: relative !important;
}

#bo_v header {margin:0px !important;
position: relative;
height: 45px;;
background-color: rgba(0, 0, 0, 0.3); /* 배경만 30% 투명 */
backdrop-filter: blur(10px); /* 블러 효과 적용 */
-webkit-backdrop-filter: blur(10px); /* 사파리 지원 */
}

.editable-div {
    width: 100%;
    min-height: 200px;
    padding: 10px;
    border: 1px solid #bdbdbd;
    outline: none;
    font-size: 16px;
    border-radius:  10px ;
    margin-bottom:7px;
}

#bo_w h3{
    padding: 5px 10px;
    font-size: 0.9em;
    background-color: #e1e1e1;
    margin:15px 0 7px;
    border-radius: 10px;
    width: fit-content;
    height: fit-content;
}
.frm_input.mg7{margin-bottom: 7px;}
#editor_wr_1.editable-div{
    min-height: 70px;
}
#autosave_pop{
    float: right;
    
}
#bo_w{
    max-width: 1000px !important;
    display: block;
    padding:0 !important;
}

/* 📌 드래그 앤 드롭 영역 */
.drop-area {
    position: relative;
    border: 1px dashed #afafaf;
    padding: 13px;
    height: 90px;
    text-align: left;
    border-radius: 10px;
    transition: all 0.3s ease-in-out;
}
.drop-area.hover{
    border-color: #007bff;
    border-width: 3px;
    background: rgba(0, 123, 255, 0.1);
}
.drop-area p{
    margin: 0;
    font-size: 14px;
    color: #afafaf;
}



/* 📌 이미지 미리보기 스타일 */
.drop-preview{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}
.drop-preview img{
    max-width: 100px;
    height: auto;
    border-radius: 5px;
    border: 1px solid #ddd;
    padding: 5px;
    background: #fff;
}

/* 📌 버튼 스타일 */
.drop-area button {
    position: absolute;
    right:10px;
    bottom: 10px;
    background-color: #216ebf;
    color: white;
    border: none;
    padding: 5px 10px;
    font-size: 0.9em;
    cursor: pointer;
    border-radius: 10px;
    transition: background 0.3s;
}
.drop-area button:hover {
    background-color: #0056b3;
}
.drop-area button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

/* 📌 게시글 저장 버튼 스타일 */
#save-btn {
    background-color: #28a745;
    margin-top: 10px;
}
#save-btn:hover {
    background-color: #218838;
}


#extra-content-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    /* height: 100vh !important; */
    /* overflow: hidden; */

    /* background: rgba(255, 255, 255, 0.2); 살짝 투명한 배경 */
    
}
.blurBG{
    position: absolute;
    left: 0px;
    right: 0px;
    top:43px;
    bottom:40px;
    background-color: #ffffff00;
    border-radius: 15px;
    
    backdrop-filter: blur(10px); /* 🔥 블러 효과 적용 */
    -webkit-backdrop-filter: blur(30px); /* 사파리 지원 */

    mask-image: radial-gradient(circle, rgba(255, 255, 255, 1) 40%, rgba(255, 255, 255, 0) 100%);
    -webkit-mask-image: radial-gradient(circle, rgba(255, 255, 255, 1) 40%, rgba(255, 255, 255, 0) 100%);

}

#extra-content-container {
    display: flex;
    /* overflow: visible; */
    touch-action: pan-y;
    
}
.extra-content {
    flex-direction: row; /* 모바일에서는 세로 정렬 */
    position: absolute;
    /* overflow: visible; */
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transform: translateX(100%); /* 기본적으로 오른쪽에서 대기 */
    transition: transform 0.35s ease-in-out, opacity 0.35s ease-in-out;
    display: flex;
    overflow: visible;
}

.extra-content div{
    
    transition: height 0.3s ease-in-out;
    border-radius: 15px;
    width: 100%;
    padding:20px;
    min-height: 90vh; /* 최소 높이 95% */
    background-color: #ffffff20;
    border: 1px solid #ffffff70;
    backdrop-filter: blur(5px); /* 🔥 블러 효과 적용 */
    -webkit-backdrop-filter: blur(5px); /* 사파리 지원 */
    clip-path: inset(-100px 0px 0px 0px);

}

.extra-content.firstCon div{
    background-color: #ffffff00;
    border: none;
    border-radius: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.299);
    backdrop-filter: none; /* 🔥 블러 효과 적용 */
    -webkit-backdrop-filter: none; /* 사파리 지원 */
    clip-path: inset(-100px 0px 0px 0px);
}

.extra-content.firstCon img{
    margin-bottom: 20px;
    box-shadow: 0 7px 10px rgba(0, 0, 0, 0.132);
    width: 100%;
}

.extra-content div.imgCon{
    padding:20px 0px;
    background-color: #ffffff91;
    position: relative; /* ✅ ::after를 위한 상대 위치 */
}

.extra-content div.imgCon img {
    position: relative;
    width: 100%; /* ✅ 부모 너비에 맞추되 원본 비율 유지 */
    height: auto; /* ✅ 이미지 비율 유지 */
    padding:20px 0;
    background-color: #fff;
    margin-top:25px;
}
.extra-content div .wr_introImg img{
    border-radius: 10px;
    width: 100%;
}

.extra-content.active {
    position: relative;
    transform: translateX(0);
    /* overflow: visible; */
    opacity: 1;
}
/* h3(제목) 스타일 */
.extra-content h3 {
    float: none;
    clear: both;
    display: inline-block;
    width: fit-content;
    height: fit-content;
    text-align: left;
    color: #000;
    padding:20px 30px 5px 7px;
    left: 15px;
    line-height: 0.5em;
    font-size: 17px;
    white-space: nowrap;
    z-index: 10;
    /* text-shadow:0px 3px 5px rgba(0, 0, 0, 0.2); */
}


/* p(내용) 스타일 */
.extra-content p {
    /* width: 80%; PC에서는 오른쪽 70% 차지 */
    text-align: left;
    line-height: 1.4em;
    font-size: 17px;
    padding: 0.25em 0;
}

.extra-content p i{
    font-style: normal; /* 기본 이탤릭 제거 */
    font-weight: bold;
    display: inline-block;
    color: #fff;
    padding: 5px 15px;
    border-radius: 25px;
    margin: 10px 0;
}


/* 📌 폰트 조절 버튼 */
#font-size-wrapper {
    position: absolute;
    right:8px;
    top: 8px;
    display: inline-block;
    z-index: 9999; /* 다른 요소보다 최상단 */
}

#font-size-toggle {
    background: #00000038;
    color: white;
    border: none;
    /* padding: 4px 8px; */
    height: 30px;
    width:30px;
    font-size: 15px;
    border-radius: 5px;
    border-width: 2px;
    cursor: pointer;
    text-align: center;
    transition: background 0.3s, transform 0.2s;   
    padding: 0 !important;
    margin: 0 !important;
}

/* 버튼 호버 효과 */
#font-size-toggle:hover {
    background: #202021;
    transform: scale(1.1);
}

/* 📌 팝업 메뉴 스타일 */
#font-size-popup {
    position: absolute;
    top: 30px; /* 버튼 아래 위치 */
    right: 0px; /* 🔥 부모 기준으로 오른쪽에서 10px 떨어지게 설정 */
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 10px 10px;
    border-radius: 8px;
    display: flex;
    flex-direction: row;
    gap: 8px;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    z-index: 9999;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

/* 📌 팝업 내부 버튼 스타일 */
#font-size-popup button {
    background: white;
    color: black;
    border: none;
    padding: 6px 13px;
    font-size: 19px;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s;
    white-space: nowrap;
}

#font-size-popup {
    position: absolute;
    z-index: 9999; /* 가장 위로 올리기 */
    background: white;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

#font-size-popup.open { 
    pointer-events: auto; /* 클릭 가능 */
}

#font-size-wrapper::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.3); /* 반투명 배경 */
    z-index: 9998; /* 팝업보다 낮게 */
    display: none; /* 기본 숨김 */
}

#font-size-wrapper.open::before {
    display: block; /* 팝업 열릴 때 활성화 */
    pointer-events: auto; /* 뒤쪽 클릭 방지 */
}

/* 버튼 호버 효과 */
#font-size-popup button:hover {
    background: #ddd;
}

/* 기본적으로 숨겨진 상태 */
.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* 클릭 방지 */
}

/* 🔥 팝업이 열릴 때 */
.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto; /* 클릭 허용 */
}


 @media (max-width: 969px){
      .bo_top_img {height:200px}
      

 }
 @media (max-width: 768px) {
    .extra-content {
        flex-direction: column; /* 모바일에서는 세로 정렬 */
        /* text-align: center; */
        gap: 10px; /* 제목과 본문 간격 추가 */
        align-items: flex-start; /* 제목과 본문을 왼쪽 정렬 */
    }

    .extra-content h3 {
        text-align: left; /* 왼쪽 정렬 */
    }

    .extra-content p {
        width: 100%; /* 전체 너비 차지 */
        text-align: left; /* 왼쪽 정렬 */
        order: 2; /* 순서 변경 */
    }

    #bo_v_atc {
        padding: 10px !important;
        box-sizing: border-box;
        margin:0 !important;
    }
    
}
/* 게시판 버튼 */
/* 목록 버튼 */
#bo_list a.btn_b01 {}
#bo_list a.btn_b01:focus, #bo_list .btn_b01:hover {}
#bo_list a.btn_b02 {}
#bo_list a.btn_b02:focus, #bo_list .btn_b02:hover {}
#bo_list a.btn_admin {} /* 관리자 전용 버튼 */
#bo_list a.btn_admin:focus, #bo_list a.btn_admin:hover {}
.chk_all{margin:10px 0}

/* 읽기 버튼 */
#bo_v a.btn_b01 {}
#bo_v a.btn_b01:focus, #bo_v .btn_b01:hover {}
#bo_v a.btn_b02 {}
#bo_v a.btn_b02:focus, #bo_v .btn_b02:hover {}
#bo_v a.btn_admin {} /* 관리자 전용 버튼 */
#bo_v a.btn_admin:focus, #bo_v a.btn_admin:hover {}

/* 쓰기 버튼 */
#bo_w .btn_confirm {} /* 서식단계 진행 */
#bo_w .btn_submit {}
#bo_w .btn_cancel {}
#bo_w .btn_frmline {} /* 우편번호검색버튼 등 */

/* 게시판 목록 공통 */
#nav{position:absolute;top:140px;right:0;color:#fff;z-index:10;font-size:0.92em;width:100%}
#nav .nav_wr{margin:0 auto;max-width:1200px;text-align:right;padding: 0 10px}
#nav a{color:#fff;}

#bo_cate h2 {width:0;height:0;font-size:0;line-height:0;overflow:hidden}
#bo_cate {background:#fff;color:#333;border-bottom:1px solid #eee;
white-space: nowrap;overflow-x: auto;
-webkit-overflow-scrolling: touch
 -ms-overflow-style: -ms-autohiding-scrollbar;}
#bo_cate::-webkit-scrollbar {display: none;}
#bo_cate ul{margin:0 auto;max-width:1200px;padding:0 10px}
#bo_cate ul:after {display:block;visibility:hidden;clear:both;content:""} 
#bo_cate li{display:inline-block}
#bo_cate li a{display:block;padding:0 15px;line-height:55px;color:#333947}
#bo_cate #bo_cate_on{position:relative;font-weight:bold;color:#ea185f}
#bo_cate #bo_cate_on:before{width:100%;content:'';height:2px;background:#ea185f;position:absolute;bottom:0;left:0}

#bo_sch {background:#fff;position:relative;margin:10px 0 20px;border-radius:3px;height: 40px;}
#bo_sch:after {display:block;visibility:hidden;clear:both;content:""}
#bo_sch legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
#bo_sch select{border:0;height:40px;border:1px solid #cfcfcf;vertical-align:top;padding-left:10px}
#bo_sch .sch_input{height:40px;border:1px solid #cfcfcf;padding:0;background-color:transparent;padding:0 40px 0 10px;vertical-align:top}
#bo_sch .sch_input:focus{outline:none;border-bottom:2px solid #e32464}
#bo_sch .sch_btn{height:40px;position:absolute;color:#aaa;top:0;right:0;border:0;width:40px;background:none;font-size:15px;vertical-align:top}

#bo_list_total{position:absolute;top:300px;color:#fff;left:0;width:100%;z-index:10;text-align:center;font-size:0.923em;width:100% ;}

#bo_list{margin:0 auto;max-width:1000px;clear:both}
#bo_list .all_chk {float:left;margin-top:20px}

.board_list ul{clear:both;border-top:1px solid #000}
.board_list li{padding:15px;border-bottom:1px solid #e6e6e6;position:relative}
.board_list .bo_notice  {background:#f7f7f7}
.board_list .bo_subject{font-size:1.077em;font-weight:bold;margin-bottom:10px}
.board_list .notice_icon{color:#6683be}
.board_list .bo_cate_link{color:#ea185f;margin-bottom:10px;display:block}

.board_list .fa-download{width:16px;height:16px;line-height:16px;background:#e89f31;color:#fff;text-align:center;font-size:10px;border-radius:4px;vertical-align:middle;}
.board_list .fa-link{width:16px;height:16px;line-height:16px;background:#ad68d8;color:#fff;text-align:center;font-size:10px;border-radius:4px;vertical-align:middle;font-weight: normal;}
.board_list .fa-heart{width:16px;height:16px;line-height:16px;background:#ff66b0;color:#fff;text-align:center;font-size:10px;border-radius:4px;vertical-align:middle;;font-weight: normal;}
.board_list .new_icon{display:inline-block;width: 16px;line-height:16px ;font-size:0.833em;color:#ffff00;background:#6db142;border-radius:4px;text-align:center;vertical-align:middle;font-size:11px}
.board_list .hot_icon{display:inline-block;width: 16px;line-height:16px ;font-size:0.833em;color:#fff;background:#e52955;;border-radius:4pxtext-align:center;;vertical-align:middle;font-weight:normal;font-size:11px}
.board_list .fa-lock{display: inline-block;line-height: 14px;width: 16px;font-size: 0.833em;color: #fff;background: #262b88;text-align: center;border-radius: 4px;font-size: 12px;border:1px solid #262b88}

.board_list .bo_info {line-height:20px;color:#86909a}
.board_list .bo_info .sv_member{color:#86909a;font-weight:normal}
.board_list .bo_info img{vertical-align:top;border-radius:30px}
.board_list .bo_info i{margin-left:5px}

.bo_fx {margin:20px 0}
.bo_fx:after {display:block;visibility:hidden;clear:both;content:""} 
.bo_fx li{display:inline-block;}
.btn_bo_adm{float:left}
.btn_wr{float:right}

@media (max-width: 969px){
    /* #bo_sch select{width:30%;float:left} */
    /* #bo_sch .sch_input{width:68%;float:right;} */
    /* #bo_list .all_chk{margin:10px 0} */
    #nav{top:60px}
}
@media (min-width: 970px){
    /* #bo_sch {float:right;} */
    .board_list .li_cate{padding-left:120px}
    .board_list .bo_cate_link{position:absolute;top:15px;left:15px;color:#ea185f;width:100px}

 }

/* 게시판 쓰기 */
#bo_w #wr_email, #bo_w #wr_homepage, #bo_w #wr_subject {width: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}

#wr_email, #wr_homepage, #wr_subject, .wr_link {width:100%}

/* 게시판 읽기 */
#bo_v {margin:0 auto;max-width:1200px;padding:10px;}

#bo_v_table {padding: 10px;color:#999;font-size:0.9em;font-weight:bold}

#bo_v header {margin:5px 0 0px}
#bo_v_title {line-height:1em}
.bo_v_cate{color:#ea185f}
.bo_v_tit{display:block;font-size:1.5em;margin:0px 0 0;color:#fff;text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 검은색 그림자 */padding-bottom: 5px;}

#bo_v_info {margin:0 0px 30px;color:#86909a;line-height:20px;}
#bo_v_info h2 {position:absolute;font-size:0;text-indent:-9999em;line-height:0;overflow:hidden}
#bo_v_info strong {display:inline-block;font-weight:normal;margin:0 5px}
#bo_v_info .profile_img img{border-radius:50%;vertical-align:top}
#bo_v_info .sv_member{color:#86909a}
#bo_v_info i{margin:0 3px 0 8px}

#bo_v_file {margin:0 }
#bo_v_file h2  {position:absolute;width:0;height:0;font-size:0;line-height:0;overflow:hidden}
#bo_v_file ul {margin:0;padding:0;list-style:none}
#bo_v_file li {padding: 10px 10px 10px 60px;border: 1px solid #e8e8e8;background:#fff;color:#aaa;margin: 0 0 10px;border-radius:5px;position:relative;
-webkit-box-shadow: 0 0 5px  #e2e4f1;
-moz-box-shadow: 0 0 5px #e2e4f1;
box-shadow: 1px 2px 8px #e2e4f1
}
#bo_v_file li:hover{border:1px solid #dac4e5}
#bo_v_file li:hover i{color:#9f64bb}
#bo_v_file li i{position:absolute;top:50%;left:10px;font-size:20px;color:#aaa;width:40px;line-height:40px;text-align:center;margin-top:-20px}
#bo_v_file a {display:block;font-weight:normal;text-decoration:none;margin:0 0 3px}
#bo_v_file li:hover a{color:#9f64bb}
#bo_v_file a strong{text-decoration:underline;font-weight:normal}
#bo_v_file  span {font-size:0.91em}

#bo_v_link {margin:0 }
#bo_v_link h2  {position:absolute;width:0;height:0;font-size:0;line-height:0;overflow:hidden}
#bo_v_link ul {margin:0;padding:0;list-style:none}
#bo_v_link li {padding: 10px 10px 10px 60px;border: 1px solid #e8e8e8;background:#fff;color:#aaa;margin: 0 0 10px;border-radius:5px;position:relative;
-webkit-box-shadow: 0 0 5px  #e2e4f1;
-moz-box-shadow: 0 0 5px #e2e4f1;
box-shadow: 1px 2px 8px #e2e4f1}
#bo_v_link li:hover{border:1px solid #dac4e5}
#bo_v_link li:hover i{color:#9f64bb}
#bo_v_link li i{position:absolute;top:50%;left:10px;color:#aaa;font-size:20px;;width:40px;line-height:40px;text-align:center;margin-top:-20px}
#bo_v_link a {display:block;text-decoration:none;margin:0 0 3px}
#bo_v_link li:hover a{color:#9f64bb}
#bo_v_link a strong{text-decoration:underline;font-weight:normal}
#bo_v_link span {font-size:0.91em}
.bo_v_link_cnt {font-size:0.92em}

#bo_v_top {margin:20px 0;clear:both}
#bo_v_top:after {display:block;visibility:hidden;clear:both;content:""}
#bo_v_top h2 {position:absolute;font-size:0;text-indent:-9999em;line-height:0;overflow:hidden}
#bo_v_top ul {margin:0;padding:0;list-style:none}
#bo_v_top ul:after {display:block;visibility:hidden;clear:both;content:""}
#bo_v_top ul li{display:inline-block;}
.bo_v_left{float:left}
.bo_v_right{float:right}

#bo_v_bot {padding:0 10px}
#bo_v_bot:after {display:block;visibility:hidden;clear:both;content:""}
#bo_v_bot h2 {position:absolute;font-size:0;text-indent:-9999em;line-height:0;overflow:hidden}
#bo_v_bot ul {margin:0;padding:0;list-style:none}

.bo_v_nb{clear:both;margin:10px 0;border-top:1px solid #e8e8e8;text-align:left;position:relative;}
.bo_v_nb:after {display:block;visibility:hidden;clear:both;content:""}
.bo_v_nb li {border-bottom:1px solid #e8e8e8}
.bo_v_nb li a{display:block;padding:15px 0px;vertical-align:top;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
.bo_v_nb li i{color:#d1d7de;width:30px;text-align:center;}

#bo_v_atc {min-height:200px}
#bo_v_atc_title {margin:0;padding:0;height:0;overflow:hidden}

#bo_v_img {margin:0 0 0px;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:15px;max-width:100%;height:auto}

#bo_v_con {min-height:200px;margin-bottom:20px;width:100%;font-size:1.250em;line-height:1.7em;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:20px 0;float:right;text-align:center}
#bo_v_act .bo_v_act_gng {position:relative}
#bo_v_act a {vertical-align:middle;padding:0 20px}
#bo_v_act  i{font-size:16px;margin-right:5px}
#bo_v_act .bo_v_good:hover{background:#faeaea;color:#e24c76}
#bo_v_act_good, #bo_v_act_nogood {display:none;position:absolute;top:30px;left:0;padding:10px 0;width:165px;background:#ff3061;color:#fff;text-align:center}

#bo_v_share{position:relative;margin:20px 0;float:left}
#bo_v_share:after {display:block;visibility:hidden;clear:both;content:""}

.btn_share{display:none;}
.bo_v_snswr{float:left;position:relative;}
#bo_v_sns {;padding:0;list-style:none;zoom:1}
#bo_v_sns:after {display:block;visibility:hidden;clear:both;content:""}
#bo_v_sns li {float:left;width:40px;text-align:center;margin-left:3px}
#bo_v_sns li a{height:40px;padding:10px 0;background:#aaa}
#bo_v_sns li .sns_f{display:block;border-radius:33px}
#bo_v_sns li .sns_f:hover{background:#415b92;}
#bo_v_sns li .sns_t{display:block;;border-radius:33px}
#bo_v_sns li .sns_t:hover{background:#35b3dc;}
#bo_v_sns li .sns_g{display:block;border-radius:33px}
#bo_v_sns li .sns_g:hover{background:#d5503a;}
#bo_v_sns li .sns_k{display:block;;border-radius:33px}
#bo_v_sns li .sns_k:hover{background:#fbe300;}
#bo_v_sns li img{vertical-align:top}
.btn_scrap {float:left;margin-left:5px}

/* 게시판 댓글 */
.cmt_btn{;text-align:left ;width:100% ;background:none;border:0;color:#000;font-weight:bold;margin:20px 0 0px;cursor:pointer}
#bo_vc h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#bo_vc article {margin:20px 0;position:relative}
#bo_vc article .profile_img img{border-radius:50%}
#bo_vc article header{color: #b5b5b5;padding-left:50px;line-height:20px}
#bo_vc .comment_profile_img{position:absolute;top:0;left:0}
#bo_vc .comment_profile_img img, #bo_vc .profile_img img{border-radius:50%}
#bo_vc .sv_member, #bo_vc .sv_guest {font-weight:bold}
#bo_vc .sv_member img{display:none}
.bo_vc_hdinfo {display:block}
#bo_vc h1 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#bo_vc .cmt_contents {padding:0 0 15px;border-bottom:1px solid #eee;line-height:1.8em}
#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_act {text-align:right;margin:0;list-style:none;zoom:1}
.bo_vc_act:after {display:block;visibility:hidden;clear:both;content:""}
.bo_vc_act li {display:inline-block;}
.bo_vc_act li a{padding:0 5px;line-height:23px}

.bo_vc_w {position:relative;margin:20px 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{padding:5px;width:100%;height:120px;}
#wr_secret{}
.bo_vc_w_info{margin:10px 0}
.bo_vc_w_info:after {display:block;visibility:hidden;clear:both;content:""}
.bo_vc_w_info .frm_input{width:100%;margin:3px 0;margin-right:5px}
.bo_vc_w_info #captcha{padding-top:10px;display:block;clear:both}
.bo_vc_w .btn_confirm{margin-top:10px;line-height:25px;}
.bo_vc_w .btn_confirm .li_chk{float:left}
.bo_vc_w .btn_confirm input{vertical-align:middle}
.bo_vc_w .btn_confirm label{display:inline-block}
.bo_vc_w .btn_submit{float:right;padding:0 20px;font-weight:bold}
.bo_vc_w_wr:after {display:block;visibility:hidden;clear:both;content:""}

#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_vl_opt{position:absolute;top:0;right:0;}
.bo_vl_opt .cmt_opt{background:none;border:0;width:20px;height:30px;color:#86949a;font-size:15px}
.bo_vl_opt .cmt_opt:hover{color:#447eec}
.bo_vl_act{display:none;position:absolute;right:0;border:1px solid #ddd;width:60px;padding:5px 0;background:#fff;z-index:10;text-align:center;
 -webkit-box-shadow:  2px 2px 6px #f3f3f3;
-moz-box-shadow:  2px 2px 6px #f3f3f3;
box-shadow: 2px 2px 6px #f3f3f3} 
.bo_vl_act li{padding:5px 0;}

/*글쓰기*/
#bo_w{max-width:1200px;margin:0 auto;padding:10px}
#bo_w .form_01{margin:10px 0}
#bo_w .bo_w_select select{border:1px solid #3497d9;background:#fff;width:100%}
#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;background:#eee;text-align:center}
#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;background:#eee;text-align:center}
#bo_w .bo_w_flie .frm_file{padding-left:50px;}
#bo_w .bo_w_flie .file_wr{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:5px 0 0 }
.write_div{margin:20px 0;}