@charset "utf-8";
#bo_list .td_datetime {width:210px;text-align:center}
#bo_list .td_name {width:210px;text-align:center;}
#bo_list .td_nick {width:210px;text-align:center}
#bo_list .td_status {width:210px;text-align:center}
#bo_list .td_num {width:210px;text-align:center}
#bo_list .td_num2 {width:105px;text-align:center}
.round-btn,
#bo_w .bo_w_flie .frm_file,
#bo_v .bo_w_flie .frm_file {font-size: 1rem;}
.board-wrapper {padding: 180px 0 200px; overflow-x: hidden;}
.board-tit-wrap {margin-bottom: 120px; text-align: center;}
.board-tit-wrap h2 {font-size: 1.778rem; margin-bottom: 30px;}
.board-tit-wrap h3 {font-size: 2.222rem; font-weight: 500; margin-bottom: 8px;}
.board-tit-wrap p {font-size: 1.111rem; font-weight: 400; color: #4B5563;}
.board-tit-wrap p.bo_info {display: flex; justify-content: center; align-items: center; column-gap: 34px; color: #939393;}
.board-tit-wrap p.bo_info .line {width: 1px; height: 20px; background-color: #939393;}
.board-nav {display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 850px; margin: 100px auto 0;}
.board-nav .btn_list .round-btn {padding: 17px 20px; min-width: 266px; font-size: 1rem; font-weight: 500; color: #111827; display: flex; align-items: center; justify-content: center;}
#bo_btn_top,#gall_allchk {margin-bottom: 30px;}
#bo_gall #gall_ul:has(.empty_list) {justify-content: center;}
#bo_gall li.empty_list {font-size: 2rem; color: #c8c8c8;}
#bo_gall #gall_ul {display: flex; flex-wrap: wrap; column-gap: 24px; row-gap: 200px; padding-bottom: 100px;}
#bo_gall #gall_ul .col-gn-4 {width: calc(100% / 4 - ( 24px * 3 ) / 4);}
#bo_gall #gall_ul .col-gn-3 {width: calc(100% / 3 - ( 24px * 2 ) / 3);}
#bo_gall #gall_ul .gall_li .gall_box,
#bo_gall #gall_ul .gall_li .gall_box a {width: 100%;}
#bo_gall #gall_ul .col-gn-4:nth-child(4n):not(:last-child)::after,
#bo_gall #gall_ul .col-gn-3:nth-child(3n):not(:last-child)::after {content: ''; display: block; width: calc(100vw - 100px); max-width: 1723px; height: 1px; position: absolute; top: calc(100% + 100px); right: 0; background-color: #E2E2E2;}
#bo_gall .bo_tit {font-size: 1.111rem; text-align: center; width: 100%; display: flex; align-items: center; justify-content: center; column-gap: 3px;}
#bo_gall .bo_tit .tit-txt {max-width: calc(100% - 50px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
#bo_gall .bo_tit .new_icon {width:1rem; height:1rem; line-height: unset; font-size:0.875rem; display: flex; align-items: center; justify-content: center; color:#fff; background:#2C1333; text-align:center; border-radius:2px; font-weight:400; margin-left: 0;}
#bo_gall .bo_tit .is_notice_badge {font-size: 1.111rem; aspect-ratio: 1 / 1;}
#bo_gall .gall_img {margin-top: 1.444rem; width: 100%; height: auto; aspect-ratio: 557 / 358; overflow: hidden;}
#bo_gall .gall_img img {width: 100%; height: 100%; object-fit: cover;}
#bo_gall .gall_img .no_image {width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;}
#bo_v_atc {text-align: center;}
.bo_w_flie {width: 100%; display: flex; flex-direction: column; row-gap: 12px;}
.bo_w_flie .file_notice {font-size: 0.889rem; color: #4B5563;}
/* 분류탭 */
#bo_cate_ul {display: flex; align-items: center; justify-content: space-between; max-width: 675px; margin: 0 auto; flex-wrap: wrap;}
#bo_cate_ul a {position: relative; padding: 10px; font-size: 1.111rem; color: #2C2C2C;}
#bo_cate_ul a:hover {color: #000;}
#bo_cate_ul a::after {transition: width 0.2s; content: ''; background-color: #000; width: 0; height: 1px; position: absolute; left: 0; bottom: 0;}
#bo_cate_ul a:hover::after {width: 100%;}
#bo_cate_ul a#bo_cate_on {color: #000; font-weight: 500;}
#bo_cate_ul a#bo_cate_on::after {width: 100%;}
/* 리스트형 */
#bo_list #bo_btn_top {display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;}
#bo_list .tbl_wrap table {border-top: 0; border-bottom: 0;}
#bo_list th {background-color: #EDEDED; font-size: 1rem; font-weight: 600;}
#bo_list .td_chk,
#bo_list td {border-bottom: 0; border-top: 0;}
#bo_list td,
#bo_list td span {font-size: 0.889rem; color: #484848; font-weight: 500;}
#bo_list tr {border-bottom: 1px solid #DDDDDD;}
#bo_list .tbl_head01 tbody tr:hover td {background-color: unset;}
#bo_list tr .bo_tit {display: flex; align-items: center; column-gap: 3px;}
#bo_list tr .bo_tit a {font-size: 0.889rem; color: #484848; font-weight: 500; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; white-space: normal; line-height: 25px;}
#bo_list .bo_tit .new_icon {flex-shrink: 0; width:1rem; height:1rem; line-height: unset; font-size:0.875rem; display: flex; align-items: center; justify-content: center; color:#fff; background:#2C1333; text-align:center; border-radius:2px; font-weight:400; margin-left: 0;}
#bo_list .tbl_head01 a:hover {text-decoration: unset;}
#bo_list tr:hover {background-color: #F3F4F6;}
#bo_list tr:hover td,
#bo_list tr:hover td span,
#bo_list tr:hover td a {color: #7A4A6E;}
/* #bo_list .bo_notice {background-color: #E6D9E3;} */
/* 페이징 */
.pg_wrap {margin-top: 4.667rem; position: relative;}
.pg {column-gap: 10px;}
.pg_current,
.pg_page {border-radius: 50%;}
.pg_current {background-color: #B89BB1; border-color: #B89BB1;}
.pg_page {background-color: transparent; border-color: transparent; color: #111827;}
.pg_wrap .label {position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
/* 온라인상담 */
/* 답변등록 */
.bo_v_answer {border: 1px solid #ddd; margin: 5rem 0; padding: 4.444rem 2.778rem; border-radius: 10px;}



/* 시술예약 */
.reservation-section .reservation-wrap {max-width: 950px; width: 100%; margin: 0 auto; border-radius: 10px; padding: 5rem 3.125rem; border: 1px solid #ddd;}
.reservation-section .reservation-wrap .form-section {margin-bottom: 60px;}
.reservation-section .reservation-wrap .input-title {font-size: 1.333rem; padding-bottom: 10px; margin-bottom: 26px; border-bottom: 1px solid #ddd;}
.reservation-section .reservation-wrap .input-wrap {row-gap: 10px;}
.reservation-section .reservation-wrap .input-wrap label {font-size: 0.889rem; color: #111827;}
.reservation-section .reservation-wrap .input-wrap .required {color: #81BAFF;}
.reservation-section .reservation-wrap .input-row {flex-wrap: wrap; row-gap: 16px;}
.reservation-section .reservation-wrap .input-row .input-wrap {width: calc(100% / 3 - 26px / 3);}
.reservation-section .reservation-wrap .custom-select::after {right: 24px; opacity: 0.7;}
.reservation-section .reservation-wrap .custom-select select,
.reservation-section .reservation-wrap input[type="tel"],
.reservation-section .reservation-wrap input[type="text"],
.reservation-section .reservation-wrap input[type="password"],
.reservation-section .reservation-wrap input[type="email"],
.reservation-section .reservation-wrap input[type="number"] {border-radius: 100px; background-color: #fff; font-size: 0.889rem;}
.reservation-section .reservation-wrap textarea {background-color: #fff; font-size: 0.889rem;}
.reservation-section .reservation-wrap .custom-select:hover select,
.reservation-section .reservation-wrap input[type="tel"]:hover,
.reservation-section .reservation-wrap input[type="text"]:hover,
.reservation-section .reservation-wrap input[type="password"]:hover,
.reservation-section .reservation-wrap input[type="email"]:hover,
.reservation-section .reservation-wrap input[type="number"]:hover ,
.reservation-section .reservation-wrap textarea:hover {background-color: #F8F8F8;}
.reservation-section .reservation-wrap .date-picker-group {width: 100%; max-width: 200px;}
.reservation-section .reservation-wrap .time-select-wrap .time-grid {display: flex; row-gap: 16px; column-gap: 10px; flex-wrap: wrap;}
.reservation-section .reservation-wrap .time-select-wrap .time-grid .time-item {width: calc(100% / 9 - (10px * 8) / 9);}
.reservation-section .reservation-wrap .time-select-wrap .time-grid .time-item label {width: 100%;}
.reservation-section .reservation-wrap .notice-box {padding: 1.667rem; margin-top: 26px; border-radius: 5px;}
.reservation-section .reservation-wrap .notice-box ul {display: flex; flex-direction: column; row-gap: 10px;}
.reservation-section .reservation-wrap .notice-box ul li {font-size: 0.889rem;}
.reservation-section .reservation-wrap .notice-box ul li br {display: none;}
.reservation-section .reservation-wrap .notice-box ul li a {font-size: 1rem; font-weight: 500;}
.reservation-section .reservation-wrap .notice-box ul li a:hover {text-decoration: underline;}
.reservation-section .reservation-wrap .btn-wrap {margin-top: 50px;}
.reservation-section .reservation-wrap .btn-wrap .round-btn {margin: 0 auto;}
.reservation-section .reservation-wrap .done-ico {margin: 0 auto;}
@media (min-width: 1921px) {
    #bo_gall #gall_ul .col-gn-4:nth-child(4n):not(:last-child)::after,
    #bo_gall #gall_ul .col-gn-3:nth-child(3n):not(:last-child)::after {max-width: 1920px;}
}

@media (max-width: 1440px) {
    #bo_list .td_name {width: 20%;}
    #bo_list .td_num,
    #bo_list .td_datetime {width: 15%;}
}

@media (max-width: 1280px) {
    #bo_list .td_name {width: 15%;}
    #bo_list .td_num,
    #bo_list .td_datetime {width: 10%;}
}

@media (max-width: 1024px) {
    .board-wrapper {padding: 120px 0 140px;}
    .board-tit-wrap {margin-bottom: 80px;}
    #bo_gall #gall_ul {row-gap: 120px;}
    #bo_gall #gall_ul .col-gn-4 {width: calc(100% / 3 - ( 24px * 2 ) / 3);}
    #bo_gall #gall_ul .col-gn-4:nth-child(4n):not(:last-child)::after,
    #bo_gall #gall_ul .col-gn-3:nth-child(3n):not(:last-child)::after {top: calc(100% + 60px); width: calc(100vw - 80px);}
    .reservation-section .reservation-wrap .notice-box {padding: 1.333rem;}
}

@media (max-width: 768px) {
    .board-wrapper {padding: 80px 0 100px;}
    .board-tit-wrap {margin-bottom: 50px;}
    .board-tit-wrap h2 {font-size: 1.5rem; margin-bottom: 20px;}
    .board-tit-wrap h3 {font-size: 1.8rem;}
    .board-nav .btn_list .round-btn {min-width: 100%; padding: 15px 20px;}
    #bo_gall #gall_ul {column-gap: 15px; row-gap: 80px;}
    #bo_gall #gall_ul .col-gn-4,
    #bo_gall #gall_ul .col-gn-3 {width: calc(50% - 7.5px);}
    #bo_gall #gall_ul .col-gn-4:nth-child(4n):not(:last-child)::after,
    #bo_gall #gall_ul .col-gn-3:nth-child(3n):not(:last-child)::after {display: none;}
    #bo_list thead {display: none;}
    #bo_list tbody {border-top: 2px solid #111827;}
    #bo_list tr {display: flex; flex-wrap: wrap; align-items: center; padding: 5px 0;}
    #bo_list .bo_notice td {background-color: unset;}
    #bo_list td {padding: 2px 5px; height: fit-content;}
    #bo_list .td_chk,
    #bo_list .td_num2 {width: 25px;}
    #bo_list tr:has(.td_chk) .td_subject {width: calc(100% - 50px);}
    #bo_list .td_subject {width: calc(100% - 25px);}
    #bo_list .td_name,
    #bo_list .td_num,
    #bo_list .td_datetime {width: fit-content;}
    #bo_list .td_name,
    #bo_list .td_num {position: relative;}
    #bo_list .td_name::after,
    #bo_list .td_num::after {content: ''; width: 1px; height: 10px; position: absolute; left: 100%; top: 50%; transform: translateY(-50%); background-color: #DDDDDD;}
    /* 시술예약 */
    .reservation-section .reservation-wrap {padding: 4rem 2.4rem;}
    .reservation-section .reservation-wrap .input-row .input-wrap {width: 100%;}
    .reservation-section .reservation-wrap .time-select-wrap .time-grid .time-item {width: calc(100% / 6 - (10px * 5) / 6);}
    .reservation-section .reservation-wrap .notice-box ul li br {display: inline-block;}
}

@media (max-width: 600px) {
    #bo_list #bo_btn_top .search-wrap {width: 100%;}
    #bo_list #bo_btn_top .search-wrap .select-wrap {width: 100px; flex-shrink: 0;}
    #bo_list #bo_btn_top .search-wrap input {flex: 1;}
}

@media (max-width: 480px) {
    .board-wrapper {padding: 60px 15px 80px;}
    .board-tit-wrap h3 {font-size: 1.5rem;}
    .board-tit-wrap p.bo_info {flex-direction: column; row-gap: 8px;}
    .board-tit-wrap p.bo_info .line {display: none;}
    #bo_gall #gall_ul .col-gn-4,
    #bo_gall #gall_ul .col-gn-3 {width: 100%;}
    #bo_cate_ul li {width: calc(100% / 3);}
    #bo_cate_ul a {width: 100%; text-align: center;}
    #bo_cate_ul a::after {display: none;}
    #bo_cate_ul a#bo_cate_on {background-color: #E6D9E3; font-weight: 400;}
    #bo_list #bo_btn_top .search-wrap {flex-wrap: wrap; row-gap: 5px;}
    #bo_list #bo_btn_top .search-wrap .select-wrap {width: 100%;}
    #bo_list #bo_btn_top .search-wrap input {width: calc(100% - 16px - 83px); flex-shrink: 0; flex: unset;}
    /* 시술예약 */
    .reservation-section .reservation-wrap {padding: 3rem 1.5rem;}
    .reservation-section .reservation-wrap .time-select-wrap .time-grid .time-item { width: calc(100% / 3 - (10px * 2) / 3);}
}