@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 0px 0;
    border-radius: 0 0 2px 2px;
    width: 100%;
    box-sizing: border-box; 
    border: 0px 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: 0px;
    padding-left: 10px;
    padding-right: 5px;
    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;
        gap: 0px; /* 요소 간 간격 줄이기 */
    }

    .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% - 2px); /* gap 포함하여 50% 맞추기 */
        box-sizing: border-box;
    }

    #bo_gall .gall_img img,
    #bo_gall .gall_img video {
        width: 100%;
        height: auto !important;
        object-fit: cover;
    }
}

#bo_gall .gall_text_href {margin:0px 0}
#bo_gall .gall_text_href a {font-weight:bold}
#bo_gall .gall_text_href img {margin:0 0 0 0px}
#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;}

/* 겔러리 쿠폰명 */
.bo_coupon {border: 2px solid #eee;border-radius: 0px;padding: 1px 0px;margin-bottom: 0px;background-color: #fafafa;box-shadow: 0 2px 5px rgba(0,0,0,0.05);font-family: 'Noto Sans KR', sans-serif;}
.bo_coupon span {display: block;margin-bottom: 8px;font-size: 15px;color: #333;}
.bo_coupon .cp_name {font-weight: bold;font-size: 16px;color: #222;margin-bottom: 10px;text-align: center; }
.bo_coupon .coupon-info {background-color: #fff;padding: 1px 15px;border-radius: 8px;border: 1px dashed #ddd;margin-top: 10px;}
.bo_coupon .coupon-info p {margin: 5px 0;font-size: 14px;color: #555;}
.cp_name,
.cp_info1,
.cp_info2,
.cp_info3 {
    display: block;           /* 또는 inline-block 가능 */
    white-space: nowrap;      /* 줄바꿈 방지 */
    overflow: hidden;         /* 넘치는 텍스트 숨김 */
    text-overflow: ellipsis;  /* ...으로 말줄임 표시 */
    max-width: 100%;          /* 부모 영역에 맞춰 제한 */
    margin-bottom: 4px;       /* 항목 간 여백 (선택사항) */
}

/* 겔러리 버튼 */
.btn-container {display: flex;justify-content: space-between; /* 좌/우 끝으로 정렬 */align-items: center;gap: 10px;margin-top: 10px;}
.coupon-btn {padding: 8px 16px;font-size: 14px;background-color: #ff0096;color: #fff;border: none;border-radius: 4px;cursor: pointer;transition: background 0.3s;}
.coupon-btn:hover {background-color: #9e4278;}
.btn-link {display: inline-block;padding: 8px 16px;font-size: 14px;text-decoration: none;color: #333;background-color: #f0f0f0;border: 1px solid #ccc;border-radius: 4px;transition: background 0.3s, color 0.3s;}
.btn-link:hover {background-color: #e0e0e0;color: #000;}