@charset "utf-8";
:root {
    /* Color styles */
    --neu--bk: #000000;
    --neu--900: #121212;
    --neu--800: #1c1c1c;
    --neu--700: #292929;
    --neu--600: #373737;
    --neu--500: #454545;
    --neu--400: #595959;
    --neu--300: #757575;
    --neu--200: #949494;
    --neu--100: #a1a1a1;
    --neu--50: #c7c7c7;
    --neu--40: #d1d1d1;
    --neu--30: #dedede;
    --neu--20: #ebebeb;
    --neu--10: #f5f5f5;
    --neu--00: #ffffff;
    --pri--10: #f5f9ff;
    --pri--30: #ecf4fe;
    --pri--50: #ddebfd;
    --pri--100: #c5ddfc;
    --pri--200: #94c1fa;
    --pri--300: #63a4f8;
    --pri--400: #4190f6;
    --pri--500: #2882f5;
    --pri--600: #0f64d2;
    --pri--700: #0f57b3;
    --pri--800: #0a3b7b;
    --pri--900: #072b5a;
    --sec--orange500: #f55e00;
    --sec--red500: #e83030;
    --sec--gold500: #e99d3a;
    --sec--green500: #00a352;
    --sec--sky500: #0096e0;
    --sys--informative--500: #0777da;
    --sys--informative--400: #3198f2;
    --sys--negative--500: #de3535;
    --sys--negative--400: #fc4a4a;
    --sys--caution--500: #e4780c;
    --sys--caution--400: #ef8925;
    --sys--positive--500: #00a300;
    --sys--positive--400: #08ba08;
}
.notice-wrap {
    width: 730px;
    font-family: 'Noto Sans KR';
    margin: 0;
}
.notice-wrap .body-title {
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 29px;
    color: #121212;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 20px 2px;
}
table {
    width: 100%;
}
table thead {
    border-bottom: 1px solid #ebebeb;
}
table thead td {
    background-color: #f5f5f5;
    color: #121212;
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 19px;
    box-sizing: border-box;
    height: 52px;
}
table td:first-child {
    width: 610px;
}
table td:nth-child(2) {
    width: 120px;
    text-align: center;
}
table tr {
    border-bottom: 1px solid #ebebeb;
}
table tbody td {
    color: #454545;
    text-align: center;
    font-size: 14px;
    line-height: 19px;
    box-sizing: border-box;
    height: 54px;
}
table tbody td.empty {
    height: 480px;
    padding-bottom: 20px;
    color: #757575;
    line-height: 18px;
}
.notice-subject {
    color: #121212;
    display: flex;
    align-items: center;
    gap: 4px;
    word-break: break-all;
    font-size: 14px;
    box-sizing: border-box;
    padding-left: 16px;
    max-width: 610px;
    text-align: left;
}
.notice-subject .subject-wrap {
    font-size: 14px;
    font-weight: 400;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #121212;
}
.notice-subject .subject-wrap.pined {
    color: #0f64d2;
}
.notice-subject svg {
    margin-right: 12px;
    flex-shrink: 0;
}
.notice-subject .icon-new {
    flex-shrink: 0;
    border-radius: 3px;
    background: #f55e00;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    width: 14px;
    height: 14px;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.pay-detail-wrap {
    display: flex;
    padding: 20px 20px 22px 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    border-radius: 8px;
    border: 1px solid #f5f5f5;
    background-color: #fff;
}
.pay-status-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    align-self: stretch;
}
.pay-status {
    display: flex;
    padding-left: 2px;
    justify-content: space-between;
    align-items: flex-start;
    align-self: stretch;
}
.pay-status > div {
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
    padding-left: 2px;
}
.pay-status > div.success {
    color: #3082fe;
}
.pay-status > div.fail {
    color: #949494;
}
.pay-status > div.cancel {
    color: #de3535;
}
.pay-status .btn-pay-cancel {
    color: #757575;
    font-size: 12px;
    line-height: 17px;
    text-decoration: underline;
}
.pay-gold-wrap {
    display: flex;
    padding-left: 2px;
    align-items: flex-start;
    align-self: stretch;
    gap: 10px;
    flex-direction: column;
}
.pay-gold {
    color: #454545;
    font-size: 20px;
    font-weight: 500;
    line-height: 29px;
}
.pay-balance-wrap {
    display: flex;
    padding-left: 5px;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}
.pay-balance {
    font-size: 13px;
    line-height: 17px;
    display: flex;
    align-items: center;
    width: 100%;
    gap: 4px;
    color: #757575;
}
.pay-balance > div {
    display: flex;
    align-items: center;
    gap: 6px;
}
.pay-balance span {
    color: #454545;
}
.pay-balance .gold-period {
    color: #757575;
    font-size: 12px;
}
.pay-info-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    align-self: stretch;
}
.pay-info-label {
    padding: 0px 2px 6px 2px;
    color: #121212;
    font-size: 14px;
    font-weight: 500;
    line-height: 19px;
}
.pay-info {
    display: flex;
    padding: 0px 2px 2px 2px;
    align-items: center;
    gap: 20px;
    align-self: stretch;
    color: #757575;
    font-size: 13px;
}
.pay-info.cancel {
    color: #121212;
    font-weight: 500;
}
.pay-info.cancel span {
    color: #de3535;
    font-weight: 400;
}
.pay-info span {
    color: #121212;
}
.v-account-info {
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.02);
    display: flex;
    padding: 14px 18px;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    align-self: stretch;
    margin-top: 6px;
}
.v-account-info > div {
    display: flex;
    padding: 0px 2px 2px 2px;
    align-items: center;
    gap: 20px;
    align-self: stretch;
    align-items: center;
    font-size: 13px;
    font-weight: 400;
    line-height: 18px;
    color: #454545;
}
.v-account-info span {
    display: inline-flex;
    width: 51px;
    text-align: left;
    color: #757575;
}
.pay-disc {
    padding: 16px 4px 0px 4px;
}
.pay-disc ul {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin: 0;
}
.pay-disc li {
    list-style: none;
    color: #757575;
    font-size: 12px;
    line-height: 16px;
    padding: 0 0 0 9px;
    position: relative;
}
.pay-disc li:before {
    content: '';
    position: absolute;
    width: 3px;
    height: 1px;
    background: #757575;
    left: 1px;
    top: 9px;
}
/* button */
.Button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    box-sizing: border-box;
    font-weight: 400;
    font-family: 'Noto Sans KR';
}
.Button span {
    display: inline-block;
}
.Button:hover,
.Button:focus {
    text-decoration: none;
    outline: none;
}
.Button:disabled,
.Button.disabled {
    cursor: default;
}
.Button.Primary {
    border: 1px solid var(--pri--500);
    background: var(--pri--500);
    color: var(--neu--00);
}
.Button.Primary:hover {
    border: 1px solid var(--pri--700);
    background: var(--pri--700);
    color: var(--neu--00);
}
.Button.Primary:disabled,
.Button.Primary.disabled {
    border: 1px solid var(--pri--300);
    background: var(--pri--300);
    color: var(--pri--100);
}
.Button.Secondary {
    border: 1px solid var(--pri--500);
    background: var(--neu--00);
    color: var(--pri--500);
}
.Button.Secondary:hover {
    border: 1px solid var(--pri--500);
    background: var(--pri--30);
    color: var(--pri--500);
}
.Button.Secondary:disabled,
.Button.Secondary.disabled {
    color: var(--pri--200);
    border: 1px solid var(--pri--100);
    background: var(--pri--30);
}
.Button.Tertiary {
    border: 1px solid var(--neu--50);
    background: var(--neu--00);
    color: var(--neu--900);
}
.Button.Tertiary:hover {
    border: 1px solid var(--neu--50);
    background: var(--neu--10);
}
.Button.Tertiary:disabled,
.Button.Tertiary.disabled {
    color: var(--neu--200);
    border: 1px solid var(--neu--30);
    background: var(--neu--20);
}
.Button.X-Large {
    border-radius: 6px;
    height: 48px;
    padding: 0 16px;
    font-size: 16px;
}
.Button.X-Large span {
    padding: 0 4px;
}
.Button.Large {
    border-radius: 6px;
    height: 42px;
    padding: 0 12px;
    font-size: 15px;
}
.Button.Large span {
    padding: 0 3px;
}
.Button.Medium {
    border-radius: 5px;
    height: 36px;
    padding: 0 10px;
    font-size: 14px;
}
.Button.Medium span {
    padding: 0 2px;
}
.Button.Small {
    border-radius: 4px;
    height: 30px;
    padding: 0 8px;
    font-size: 13px;
}
.Button.Small span {
    padding: 0 2px;
}
.Button.Tiny {
    border-radius: 3px;
    height: 24px;
    padding: 0 6px;
    font-size: 11px;
}
.Button.Tiny span {
    padding: 0 1px;
}
.Button.Block {
    width: 100%;
}

/* pagination */
.pagination-new {
    position: relative;
    display: flex;
    padding: 20px 0 0 0;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.pagination-new button.page-num {
    background-color: transparent;
    border: 0;
    margin: 6px 9px 8px 9px;
    padding: 0 1px;
    font-size: 14px;
    color: #a3a4ae;
    border-bottom: 1px solid transparent;
    font-weight: 400;
}
.pagination-new button.btn-first,
.pagination-new button.btn-prev,
.pagination-new button.btn-next,
.pagination-new button.btn-last {
    background-color: transparent;
    border: 0;
    width: 32px;
    height: 32px;
}
.pagination-new button.page-num:hover {
    color: #24252e;
}
.pagination-new button.page-num.active {
    font-weight: 500;
    color: #24252e;
    border-color: #24252e;
}
.pagination-new .btn-outline {
    width: 30px;
    height: 30px;
    padding: 3px 0 0 0;
}
.pagination-new .btn-ghost {
    width: 30px;
    height: 30px;
    padding: 3px 0 0 0;
}
.pagination-new .icon-16 {
    margin: 3px 0;
}
.page-num-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
button.btn-first svg,
button.btn-prev svg,
button.btn-next svg,
button.btn-last svg {
    stroke: #121212;
}
button.btn-first:disabled svg,
button.btn-prev:disabled svg,
button.btn-next:disabled svg,
button.btn-last:disabled svg {
    stroke: #a1a1a1;
}
/* 검색 */
.search-wrap {
    display: flex;
    padding: 20px 0;
    justify-content: center;
    align-items: center;
    gap: 6px;
}
.search-wrap input[type='search'] {
    border-radius: 5px;
    border: 1px solid #dedede;
    background: #fff;
    width: 200px;
    height: 36px;
    padding: 0px 6px 0px 12px;
    font-size: 14px;
    color: #454545;
    box-sizing: border-box;
}
.search-wrap input[type='search']:focus {
    border-color: #454545;
}
.search-wrap input[type='search']::placeholder {
    color: #949494;
}
.select-wrap {
    position: relative;
}
.select-wrap svg {
    position: absolute;
    top: 11px;
    right: 12px;
}
.select-wrap select {
    border-radius: 6px;
    border: 1px solid #dedede;
    background: #fff;
    color: #454545;
    width: 102px;
    box-sizing: border-box;
    height: 36px;
    padding: 0 12px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 14px;
    outline: none;
}
.select-wrap select:focus {
    border-color: #454545;
}
/* 선물하기 */
.back-dim {
    position: fixed;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
    z-index: 20000;
    width: 100%;
    height: 100%;
    margin: 0px auto;
    background-color: rgba(0, 0, 0, 0.4);
    overflow: hidden auto;
}
.div_table {
    display: table;
    height: 100%;
    margin: 0 auto;
}
.div_table_cell {
    display: table-cell;
    vertical-align: middle;
    padding: 16px 0;
}
.recomm-modal {
    display: flex;
    width: 460px;
    padding-bottom: 30px;
    flex-direction: column;
    align-items: flex-start;
    border-radius: 5px;
    background: #fff;
    position: relative;
    font-family: 'Noto Sans KR';
}
.recomm-modal .modal-header {
    width: 100%;
    height: 51px;
    font-size: 19px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    position: relative;
    box-sizing: border-box;
    border-bottom: 1px solid #efefef;
}
.recomm-modal .modal-header .btn-close {
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 20px;
    padding: 16px;
    margin: 0;
}
.modal-content {
    position: relative;
    padding: 24px 32px 0 32px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}
.modal-content .recomm-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 21px;
    color: #333;
}
.modal-content .recomm-info .title {
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
    display: flex;
    gap: 8px;
    align-items: center;
}
.modal-content .recomm-info .title span {
    font-size: 14px;
    font-weight: 400;
    line-height: 19px;
    color: #757575;
}
.btn-comp-area {
    display: -webkit-flex;
    display: flex;
    gap: 8px;
}
/* view */
.notice-content {
    color: #121212;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 19px;
    padding: 20px 0 30px 0;
    border-bottom: 1px solid #454545;
}
.view-title {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding-bottom: 24px;
    border-bottom: 1px solid #454545;
    box-sizing: border-box;
}
.view-title .subject {
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
    color: #121212;
}
.date-comments {
    display: flex;
    align-items: center;
    height: 20px;
}
.date-comments .date {
    font-size: 13px;
    font-style: normal;
    line-height: 18px;
    color: #454545;
}

.date-comments .comments {
    font-size: 13px;
    font-style: normal;
    line-height: 18px;
    display: flex;
    align-items: flex-start;
    gap: 4px;
    color: #757575;
}
.date-comments .comments span {
    color: #2882f5;
}
.divide-dot {
    width: 14px;
    text-align: center;
    color: #888;
}
.divide-textline {
    margin: 0 5px;
    height: 10px;
    width: 1px;
    background-color: #c7c7c7;
    display: inline-block;
}
.next-prev-notice {
    display: flex;
    height: 52px;
    padding: 0 12px;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    color: #121212;
    border-bottom: 1px solid #ebebeb;
    box-sizing: border-box;
}
.next-prev-notice a {
    font-weight: 400;
    color: #454545;
}
.list-btn-wrap {
    padding: 20px 0 30px 0;
    text-align: center;
}
.comments-wrap {
}
.comments-total {
    display: flex;
    padding-bottom: 14px;
    align-items: flex-start;
    gap: 4px;
    align-self: stretch;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 21px;
    color: #121212;
}
.comments-total span {
    color: #2882f5;
}
.comment-write-wrap {
    display: flex;
    padding: 14px 18px 18px 18px;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    border-radius: 8px;
    background: #f5f5f5;
    margin: 0 0 24px 0;
    position: relative;
}
.comment-write-wrap.depth-1 {
    margin: 20px 0 20px 28px;
}
.comment-write-wrap.depth-2 {
    margin: 20px 0 20px 56px;
}
.comment-write-wrap.depth-3 {
    margin: 20px 0 20px 84px;
}
.comment-write-wrap.depth-1:before,
.comment-write-wrap.depth-2:before,
.comment-write-wrap.depth-3:before {
    content: '';
    width: 14px;
    height: 14px;
    border-left: 1px solid #dedede;
    border-bottom: 1px solid #dedede;
    position: absolute;
    box-sizing: border-box;
}
.comment-write-wrap.depth-1:before {
    top: 0;
    left: -28px;
}
.comment-write-wrap.depth-2:before {
    top: 0;
    left: -28px;
}
.comment-write-wrap.depth-3:before {
    top: 0;
    left: -28px;
}
.comment-write {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    align-self: stretch;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 19px;
    color: #121212;
}
.comment-write textarea {
    border-radius: 6px;
    border: 1px solid #dedede;
    background: #fff;
    display: flex;
    height: 100px;
    padding: 14px;
    align-items: flex-start;
    flex-shrink: 0;
    align-self: stretch;
    resize: none;
    font-family: 'Noto Sans KR';
    outline: none;
    margin-top: 2px;
}
.comment-write textarea:focus {
    border-color: #121212;
}
.comment-write textarea:disabled {
    border-radius: 6px;
    border: 1px solid #dedede;
    background: #ebebeb;
}
.count-submit {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
    align-self: stretch;
}
.count-submit .Button {
    width: 84px;
}
.text-count {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 19px;
    color: #757575;
}
.text-count span {
    font-weight: 500;
    color: #121212;
}
.comment-list {
}
.comments-list .comment {
    display: flex;
    padding: 18px;
    align-self: stretch;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    flex: 1 0 0;
    border-bottom: 1px solid #dedede;
    font-size: 14px;
    font-weight: 400;
    position: relative;
}
.comments-list .comment:first-of-type,
.comment-write-wrap + .comment {
    border-top: 1px solid #dedede;
}
.comments-list .comment.depth-1 {
    padding-left: 46px;
}
.comments-list .comment.depth-1:before,
.comments-list .comment.depth-2:before,
.comments-list .comment.depth-3:before,
.comments-list .comment.depth-4:before {
    content: '';
    width: 14px;
    height: 14px;
    border-left: 1px solid #dedede;
    border-bottom: 1px solid #dedede;
    position: absolute;
    box-sizing: border-box;
}
.comments-list .comment.depth-1:before {
    top: 18px;
    left: 18px;
}
.comments-list .comment.depth-2 {
    padding-left: 62px;
}
.comments-list .comment.depth-2:before {
    top: 18px;
    left: 34px;
}
.comments-list .comment.depth-3 {
    padding-left: 78px;
}
.comments-list .comment.depth-3:before {
    top: 18px;
    left: 50px;
}
.comments-list .comment.depth-4 {
    padding-left: 94px;
}
.comments-list .comment.depth-4:before {
    top: 18px;
    left: 66px;
}
.comments-list .comment button {
    background: transparent;
    border: none;
    padding: 0;
    font-weight: 400;
}
.comment .writer-info {
    display: flex;
    height: 24px;
    align-items: center;
}
.comment .writer-info .nickname {
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 19px;
    color: #121212;
}
.comment .writer-info .nickname.my-nickname {
    color: #2882f5;
}
.comment .writer-info .date {
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
    color: #757575;
}
.comment .comment-reaction {
    display: flex;
    height: 20px;
    align-items: center;
    gap: 4px;
    flex-direction: row;
    font-size: 13px;
}
.comment .comment-reaction > div {
    display: flex;
    height: 20px;
    align-items: center;
    flex-direction: row;
}
.comment-reaction .reaction-btn {
    gap: 10px;
}
.like,
.dislike,
.report {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
}
.like {
    color: #e83030;
}
.dislike {
    color: #0096e0;
}
.report {
    color: #757575;
}
.re-comment {
    color: #454545;
}
.delete {
    color: #757575;
}
.attachment-wrap {
    display: flex;
    padding: 12px 12px 14px 12px;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    align-self: stretch;
    border-radius: 6px;
    border: 1px solid #ebebeb;
    margin-top: 20px;
}
.attachment-title {
    color: #454545;
    font-size: 13px;
    font-weight: 400;
    height: 18px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.attachment-file {
    display: flex;
    padding-left: 20px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 6px;
}
.attachment-file a {
    font-size: 12px;
    font-weight: 400;
    color: #2882f5;
}
.notice-content-wrap {
    margin-left: 2px;
}
.clear-button {
    position: absolute;
    width: 26px;
    height: 26px;
    padding: 4px;
    top: 5px;
    right: 6px;
    background: none;
    border: none;
    cursor: pointer;
    display: none;
}

.search-field {
    position: relative;
}
input::-webkit-search-cancel-button {
    display: none;
}