@charset "utf-8";

/* 리스트/갤러리/웹진 아이콘 버튼 */
.icon-button {
    display: inline-block;
    margin: 7px;align-items: center;background-color:#23db79
}

.icon-button a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px 1px;
    text-decoration: none;
    color: #e6e6e6;
    /* background-color: #ffffff;
    border: 1px solid #ccc; */
    border-radius: 5px;
    transition: background-color 0.3s, border-color 0.3s;
}

.icon-button a:hover {
    /* background-color: #e0e0e0;
    border-color: #bbb; */
    color: #b4b4b4;
}

/* 선택된 버튼 스타일 */
.icon-button.active a {
    /* background-color: #dddddd;
    border-color: #b4b4b4; */
    color: #ff0096;
}

/* 아이콘과 텍스트 사이 여백 조정 */
.icon-button .fa-image,
.icon-button .fa-list,
.icon-button .fa-search {
    margin-right: 0px;
    font-size: 24px;
}
/* 웹진 */
#webzine_list .thumb_area {
    margin-top: 0px;
    margin-bottom: 0px;
  }

  #webzine_list .td_subject {
    padding: 0;
  }
  #webzine_list .td_subject {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }


/* 갤러리 목록 */
#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 .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;
    width: 100%;
    box-sizing: border-box; 
    border: 2px solid transparent; 
    transition: border-color 0.3s ease;
}

#bo_gall .gall_box {
    border-color: rgba(0, 0, 0, 0.2); 
    padding:5px;
}

#bo_gall .gall_box:hover {
    border-color: #ff0096; 
}

#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-right: 10px;
    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: #37c200;
}

#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%;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 부드러운 전환 효과 추가 */
}
#bo_gall .gall_img img:hover,
#bo_gall .gall_img video:hover {
    transform: scale(1.05); /* 약간의 확대 효과 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 그림자 효과 */
}
#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;
}
@media (max-width: 768px) {
    #bo_gall .gall_con {
        margin: 0;
        padding: 0;
    }

    #bo_gall .gall_img {
        margin-bottom: 0;
        background: #01be1a;
        height: auto !important;
        overflow: hidden;
    }

    #bo_gall .gall_text_href {
        margin: 0.5em 0; /* 상대적인 여백 */
    }

    #bo_gall .bo_tit {
        margin: 0;
        line-height: 1.2em; /* 줄 높이를 줄이기 */
        font-size: 1.2rem; /* 상대적인 폰트 크기 */
    }

    #bo_gall .bo_cnt {
        margin: 0;
        font-size: 0.9rem; /* 상대적인 폰트 크기 */
    }

    #bo_gall .gall_info {
        margin-top: 0.5em; /* 상대적인 여백 */
    }

    #bo_gall .gall_option {
        position: static; /* 모바일에서 절대 위치 제거 */
        margin-top: 0.5em; /* 상대적인 여백 */
    }
}
@media (max-width: 768px) {
    .gall_row {display: flex;flex-wrap: wrap;}
    .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 {
        /* width: calc(50% - 10px);  */ /* 두 개씩 배치50% (간격 포함) */
        width: 100%;
        margin: 5px; /* 요소 간의 간격 */
    }

    #bo_gall .gall_img img,
    #bo_gall .gall_img video {
        width: 100%;
        height: auto !important;
        object-fit: cover; /* 부모 요소를 채우도록 설정 */
    }
}

#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_cnt .fa-star-o::before { font-weight: 500; }
.bo_cnt i {
    color: gold; /* 별점 색상 */
    font-size: 16px;
}
.bo_cnt {
    word-wrap: break-word; /* 긴 단어를 줄 바꿈 */
    word-break: break-all; /* 단어가 너무 길어서 줄을 넘칠 때 줄 바꿈 */
}
/* .subject {
    word-wrap: break-word;
    word-break: break-all;
    
} */
.bo_tit {
    display: flex;
    align-items: center;  /* 수직 정렬을 중앙으로 */
    justify-content: space-between;  /* 아이템들을 좌우로 배치 */
    flex-wrap: wrap; /* 화면 크기에 맞게 아이템들이 줄 바꿈 가능 */
}

.code_num {
    display: inline-block;
    padding: 0px 5px;
    background-color: #f5f5f5;
    align-items: center;
    text-align: center;
    color: #333;
    font-weight: bold;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 14px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, background-color 0.3s ease;
}
.code_num:hover {background-color: #ff0096;color: #fff;transform: scale(0.9);}

.subject {
    font-size: 16px;
    font-weight: bold;
    margin-right: 10px; /* 간격을 주기 위한 여백 */
}

.new_icon {
    background-color: red;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px;
}

.cnt_cmt {
    background-color: #007bff;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px;

}
.btn-container {display: flex;gap: 10px;}
.btn-link {display: inline-block;width:100%;padding: 10px 20px;
    background-color: #ff0096;color: #fff;text-decoration: none;border-radius: 5px;
    font-size: 14px;font-weight: bold;text-align: center;transition: background-color 0.3s ease;}
.btn-link:hover {background-color: #f5282b;text-decoration: none;}