/* 고객센터 공지사항 */
body.customer-notice { margin: 0; background: #fff; }
.customer-notice * { box-sizing: border-box; font-family: "Pretendard", sans-serif; }
.customer-notice [hidden] { display: none !important; }
#contaniner.customer-notice { 
    width: 100%; 
    padding:0 20px 180px; 
    padding-top: calc(var(--common-padding-top) + var(--site-promotion-height) + var(--site-gnb-height) - var(--site-promotion-offset, 0px));
    transition: padding-top 0.32s ease;
}
.customer-notice .notice-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.customer-notice .notice-heading { margin: 0 auto 56px; text-align: center; }
.customer-notice h1 { margin: 0; color: #252b36; font-weight: 600; letter-spacing: 0; }
.customer-notice .notice-heading__label { display: block; margin-bottom: 10px; color: #8991a8; font-size: 24px; font-weight: 600; line-height: 24px; letter-spacing: 0; }
.customer-notice .notice-heading__title { display: block; color: #252b36; font-size: 50px; font-weight: 600; line-height: 70px; letter-spacing: 0; word-break: keep-all; }
.customer-notice .notice-content { width: 100%; max-width: 700px; margin: 0 auto; }
.customer-notice .notice-search { margin: 0; }
.customer-notice .notice-search__filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.customer-notice .notice-control { display: block; width: 100%; min-width: 0; height: 44px; margin: 0; padding: 0 14px; border: 1px solid #d2daed; border-radius: 4px; background-color: #fff; color: #0f172a; font-size: 14px; font-weight: 400; line-height: normal; letter-spacing: 0; box-shadow: none; }
.customer-notice select.notice-control { appearance: none; padding-right: 36px; background: #fff url("../../../img/sub/customer/notice_select_arrow.svg") right 8px center / 28px 28px no-repeat; cursor: pointer; }
.customer-notice .notice-control::placeholder { color: #acbfdf; opacity: 1; }
.customer-notice .notice-control:focus { outline: 2px solid #7140ff;}
.customer-notice .notice-search__keyword { position: relative; margin-top: 8px; }
.customer-notice .notice-search__keyword input { padding-right: 58px; }
.customer-notice #notice_search_btn { position: absolute; top: 0; right: 0; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 4px; background: transparent; cursor: pointer; }
.customer-notice #notice_search_btn::before { content: ""; width: 24px; height: 24px; background: url("../../../img/sub/customer/notice_search.svg") center / contain no-repeat; }
.customer-notice .notice-tabs { display: flex; justify-content: center; gap: 10px; margin: 30px 0 40px; overflow-x: auto; padding: 0; list-style: none; }
.customer-notice .notice-tabs > .tab_li { display: flex; flex: 0 0 auto; margin: 0; padding: 0; list-style: none; }
.customer-notice .notice-tabs button { flex: 0 0 auto; min-height: 34px; margin: 0; padding: 6px 12px; border: 1px solid #d2daed; border-radius: 100px; background: #fff; color: #60718e; font-size: 14px; font-weight: 400; line-height: 20px; letter-spacing: 0; white-space: nowrap; cursor: pointer; }
.customer-notice .notice-tabs > .tab_li.on > button { border-color: #7140ff; background: #7140ff; color: #fff; font-weight: 600; }
.customer-notice button:focus-visible,
.customer-notice a[href]:focus-visible { outline: 2px solid #7140ff; outline-offset: 3px; }
.customer-notice .notice-list { margin: 0; padding: 2px 15px; border: 1px solid #eaeff4; border-radius: 12px; list-style: none; }
.customer-notice .notice-row { margin: 0; padding: 20px 0 16px; border-bottom: 1px solid #eaeff4; list-style: none; }
.customer-notice .notice-row:last-of-type,
.customer-notice .notice-row.is-last { border-bottom: 0; }
.customer-notice .notice-subject { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.customer-notice .notice-title { min-width: 0; color: #0f172a; font-size: 14px; font-weight: 500; line-height: 20px; letter-spacing: 0; text-decoration: none; overflow-wrap: anywhere; word-break: keep-all; }
.customer-notice .notice-title[href]:hover { text-decoration: underline; }
.customer-notice .notice-prefix { flex: 0 0 auto; color: #7a43ff; font-size: 14px; font-weight: 600; line-height: 20px; letter-spacing: 0; }
.customer-notice .notice-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px; margin-top: 14px; }
.customer-notice .notice-meta > span,
.customer-notice .notice-meta time { color: #8991a8; font-size: 13px; font-weight: 400; line-height: 18px; letter-spacing: 0; }
.customer-notice .notice-category { margin-right: auto; }
.customer-notice .notice-meta .notice-views { display: inline-flex; align-items: center; gap: 5px; color: #b7c5e8; white-space: nowrap; }
.customer-notice .notice-views::before { content: ""; width: 18px; height: 18px; flex: 0 0 auto; background: url("../../../img/sub/register/register_icon02.svg") center / contain no-repeat; }
.customer-notice .notice-meta time { white-space: nowrap; }
.customer-notice .notice-empty { padding: 64px 20px; border: 1px solid #eaeff4; border-radius: 12px; text-align: center; }
.customer-notice .notice-empty p { margin: 0; color: #60718e; font-size: 14px; font-weight: 400; line-height: 24px; letter-spacing: 0; }
.customer-notice .notice-empty p + p { margin-top: 6px; }
.customer-notice .notice-status { margin: 0 0 16px; color: #60718e; font-size: 14px; font-weight: 400; line-height: 24px; letter-spacing: 0; }
.customer-notice .notice-pagination { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 50px; }
.customer-notice .notice-pagination button,
.customer-notice .notice-pagination > span { display: inline-grid; place-items: center; min-width: 28px; height: 28px; margin: 0; padding: 0 4px; border: 0; border-radius: 4px; background: transparent; color: #8aa5e7; font-size: 13px; font-weight: 400; line-height: 18px; letter-spacing: 0; opacity: 1; }
.customer-notice .notice-pagination button[aria-current="page"] { background: #d2daed; color: #0f172a; }
.customer-notice .notice-pagination .notice-pagination__prev,
.customer-notice .notice-pagination .notice-pagination__next { min-width: 18px; padding: 0; }
.customer-notice .notice-pagination__prev::before,
.customer-notice .notice-pagination__next::before { content: ""; width: 6px; height: 6px; border-top: 1px solid #a9bffc; border-right: 1px solid #a9bffc; transform: rotate(45deg); }
.customer-notice .notice-pagination__prev::before { transform: rotate(-135deg); }

@media screen and (max-width: 768px) {
    #contaniner.customer-notice { 
        padding: 0 20px 64px; 
        padding-top: calc(var(--common-padding-top) + var(--site-promotion-height) + var(--site-gnb-height) - var(--site-promotion-offset, 0px));
    }
    .customer-notice .notice-heading { margin-bottom: 42px; }
    .customer-notice .notice-heading__label { margin-bottom: 8px; font-size: 16px; line-height: 20px; }
    .customer-notice .notice-heading__title { font-size: 24px; line-height: 34px; }
    .customer-notice .notice-tabs { justify-content: start; gap: 8px; margin: 14px 0; }
    .customer-notice .notice-pagination { margin-top: 40px; }
}


/* S: 261021 : 뱃지 */
.customer-notice .notice-subject { align-items: center; gap: 6px; }
.customer-notice .notice-badge { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; height: 24px; padding: 0 10px; border-radius: 100px; background: #f6f7f9; font-size: 11px; font-weight: 600; line-height: 20px; letter-spacing: 0.165px; white-space: nowrap; }
.customer-notice .notice-badge--new { color: #227aff; }
.customer-notice .notice-badge--open { color: #6e3ef7; }
.customer-notice .notice-badge--issue { color: #dd5257; }
/* E: 261021 : 뱃지 */

/* S: 261021 : 상단 고정 목록 */
.customer-notice .notice-list--pinned { margin-bottom: 10px; padding: 20px 16px; border: 0; border-radius: 10px; background: #f8f4fb; }
.customer-notice .notice-list--pinned .notice-row { padding-top: 16px; }
.customer-notice .notice-list--pinned .notice-row:first-child { padding-top: 0; }
.customer-notice .notice-list--pinned .notice-row:last-child { padding-bottom: 0; }
.customer-notice .notice-pin-label { display: none; flex: 0 0 auto; color: #7a43ff; font-size: 14px; font-weight: 500; line-height: 20px; }
/* E: 261021 : 상단 고정 목록 */

/* S: 261021 : 이벤트 배너 */
.customer-notice #notice_event_banner { margin-bottom: 28px; }
.customer-notice #notice_event_banner .mo_banner { display: none; }
.customer-notice #notice_event_banner .swiper_container { position: relative; }
.customer-notice #notice_event_banner .ad_box_pc,
.customer-notice #notice_event_banner .ad_box_mo { position: relative; overflow: hidden; border-radius: 20px; touch-action: pan-y; }
.customer-notice #notice_event_banner .swiper-wrapper { position: relative; display: flex; width: 100%; height: 100%; box-sizing: content-box; transition-property: transform; }
.customer-notice #notice_event_banner .swiper-slide { display: block; flex: 0 0 100%; width: 100%; min-width: 0; height: auto; }
.customer-notice #notice_event_banner .swiper-slide img { display: block; width: 100%; height: auto; margin: 0; }
.customer-notice #notice_event_banner .swiper-pagination { position: absolute; right: 48px; padding: 0; bottom: 10px; display: flex; justify-content: center; gap: 6px; z-index: 2; }
.customer-notice #notice_event_banner .swiper-pagination-bullet { display: block; width: 6px; height: 6px; margin: 0; border-radius: 50%; background: #fff; opacity: 0.45; cursor: pointer; }
.customer-notice #notice_event_banner .swiper-pagination-bullet-active { opacity: 1; }
.customer-notice #notice_event_banner .swiper-button-prev,
.customer-notice #notice_event_banner .swiper-button-next { display:none;position: absolute; top: 50%; /*display: grid;*/ place-items: center; width: 32px; height: 32px; margin: -16px 0 0; padding: 0; border: 0; border-radius: 50%; background: rgba(15, 23, 42, 0.5); z-index: 2; cursor: pointer; }
.customer-notice #notice_event_banner .swiper-button-prev { left: 8px; right: auto; }
.customer-notice #notice_event_banner .swiper-button-next { right: 8px; left: auto; }
.customer-notice #notice_event_banner .swiper-button-prev::after,
.customer-notice #notice_event_banner .swiper-button-next::after { content: none; }
.customer-notice #notice_event_banner .swiper-button-prev::before,
.customer-notice #notice_event_banner .swiper-button-next::before { content: ""; width: 6px; height: 6px; border-top: 1px solid #fff; border-right: 1px solid #fff; transform: rotate(45deg); }
.customer-notice #notice_event_banner .swiper-button-prev::before { transform: rotate(-135deg); }
.customer-notice #notice_event_banner .is-single .swiper-pagination,
.customer-notice #notice_event_banner .is-single .swiper-button-prev,
.customer-notice #notice_event_banner .is-single .swiper-button-next { display: none; }
.customer-notice #notice_event_banner .swiper-notification { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
/* E: 261021 : 이벤트 배너 */

/* S: 261021 : 모바일 고정 목록 / 이벤트 배너 */
@media screen and (max-width: 768px) {
    .customer-notice .notice-pin-label { display: inline; }
    .customer-notice #notice_event_banner { margin-bottom: 20px; }
    .customer-notice #notice_event_banner .pc_banner { display: none; }
    .customer-notice #notice_event_banner .mo_banner { display: block; }
}
/* E: 261021 : 모바일 고정 목록 / 이벤트 배너 */

