@charset "utf-8";

@import url("./jc-hww.css");

@font-face {
    font-family: "Paperozi";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-1Thin.woff2") format("woff2");
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: "Paperozi";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-2ExtraLight.woff2") format("woff2");
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: "Paperozi";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-3Light.woff2") format("woff2");
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: "Paperozi";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Paperozi";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-5Medium.woff2") format("woff2");
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "Paperozi";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-6SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: "Paperlogy";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-6SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: "Paperozi";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "Paperlogy";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "Paperozi";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-8ExtraBold.woff2") format("woff2");
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: "Paperozi";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-9Black.woff2") format("woff2");
    font-weight: 900;
    font-display: swap;
}

/* 초기화 */
html {
    overflow-y: scroll
}

body {
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-family: "Pretendard", "SUIT Variable", "Noto Sans KR", sans-serif;
    background: #fff;
    color: #101a2d
}

html,
h1,
h2,
h3,
h4,
h5,
h6,
form,
fieldset,
img {
    margin: 0;
    padding: 0;
    border: 0
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 1em;
    font-family: "Pretendard", "SUIT Variable", "Noto Sans KR", sans-serif
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block
}

ul,
dl,
dt,
dd {
    margin: 0;
    padding: 0;
    list-style: none
}

legend {
    position: absolute;
    margin: 0;
    padding: 0;
    font-size: 0;
    line-height: 0;
    text-indent: -9999em;
    overflow: hidden
}

label,
input,
button,
select,
img {
    vertical-align: middle;
    font-size: 1em
}

input,
button {
    margin: 0;
    padding: 0;
    font-family: "Pretendard", "SUIT Variable", "Noto Sans KR", sans-serif;
    font-size: 1em
}

input[type="submit"] {
    cursor: pointer
}

button {
    cursor: pointer
}

textarea,
select {
    font-family: "Pretendard", "SUIT Variable", "Noto Sans KR", sans-serif;
    font-size: 1em
}

select {
    margin: 0
}

p {
    margin: 0;
    padding: 0;
    word-break: break-all
}

.jc-nowrap {
    white-space: nowrap;
}

.jc-line {
    display: block;
}

hr {
    display: none
}

pre {
    overflow-x: scroll;
    font-size: 1.1em
}

a {
    color: #000;
    text-decoration: none
}

*,
:after,
:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* jc-btn: Figma 버튼 공통 스펙 (R6, md 40px / 18px padding / 16px Medium) */
.jc-btn {
    --jc-btn-bg: transparent;
    --jc-btn-bg-hover: var(--jc-btn-bg);
    --jc-btn-bg-active: var(--jc-btn-bg);
    --jc-btn-bg-disabled: var(--jc-btn-bg);
    --jc-btn-border-width: 0;
    --jc-btn-border-color: transparent;
    --jc-btn-border-color-hover: var(--jc-btn-border-color);
    --jc-btn-border-color-active: var(--jc-btn-border-color);
    --jc-btn-border-color-disabled: var(--jc-btn-border-color);
    --jc-btn-color: inherit;
    --jc-btn-color-disabled: var(--jc-btn-color);
    --jc-btn-opacity: 1;
    --jc-btn-opacity-hover: var(--jc-btn-opacity);
    --jc-btn-opacity-active: var(--jc-btn-opacity);
    --jc-btn-opacity-disabled: var(--jc-btn-opacity);
    --jc-btn-radius: 6px;
    --jc-btn-gap: 6px;
    --jc-btn-padding-y: 0;
    --jc-btn-padding-x: 18px;
    --jc-btn-padding-left: 18px;
    --jc-btn-padding-right: 18px;
    --jc-btn-font-size: 16px;
    --jc-btn-font-weight: 400;
    --jc-btn-line-height: 1.5;
    --jc-btn-min-width: auto;
    --jc-btn-height: 40px;
    --jc-btn-icon-size: 16px;
    --jc-btn-size-xs-min-width: 80px;
    --jc-btn-size-xs-height: 24px;
    --jc-btn-size-xs-gap: 4px;
    --jc-btn-size-xs-padding-y: 0;
    --jc-btn-size-xs-padding-x: 18px;
    --jc-btn-size-xs-font-size: 12px;
    --jc-btn-size-xs-line-height: 1.4;
    --jc-btn-size-xs-icon-size: 20px;
    --jc-btn-size-sm-min-width: 80px;
    --jc-btn-size-sm-height: 32px;
    --jc-btn-size-sm-gap: 4px;
    --jc-btn-size-sm-padding-y: 0;
    --jc-btn-size-sm-padding-x: 18px;
    --jc-btn-size-sm-font-size: 13px;
    --jc-btn-size-sm-line-height: 1.4;
    --jc-btn-size-sm-icon-size: 20px;
    --jc-btn-size-md-min-width: 100px;
    --jc-btn-size-md-height: 40px;
    --jc-btn-size-md-gap: 6px;
    --jc-btn-size-md-padding-y: 0;
    --jc-btn-size-md-padding-x: 18px;
    --jc-btn-size-md-font-size: 16px;
    --jc-btn-size-md-line-height: 1.5;
    --jc-btn-size-md-icon-size: 20px;
    --jc-btn-size-lg-min-width: 120px;
    --jc-btn-size-lg-height: 48px;
    --jc-btn-size-lg-gap: 6px;
    --jc-btn-size-lg-padding-y: 0;
    --jc-btn-size-lg-padding-x: 18px;
    --jc-btn-size-lg-font-size: 16px;
    --jc-btn-size-lg-line-height: 1.5;
    --jc-btn-size-lg-icon-size: 20px;
    --jc-btn-focus-ring: rgba(255, 113, 63, 0.28);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    gap: var(--jc-btn-gap);
    min-width: var(--jc-btn-min-width);
    height: var(--jc-btn-height);
    padding: var(--jc-btn-padding-y) var(--jc-btn-padding-right) var(--jc-btn-padding-y) var(--jc-btn-padding-left);
    border: var(--jc-btn-border-width) solid var(--jc-btn-border-color);
    border-radius: var(--jc-btn-radius);
    background: var(--jc-btn-bg);
    color: var(--jc-btn-color);
    opacity: var(--jc-btn-opacity);
    font-family: "Pretendard", "SUIT Variable", "Noto Sans KR", sans-serif;
    font-style: normal;
    font-weight: var(--jc-btn-font-weight);
    font-size: var(--jc-btn-font-size);
    line-height: 1;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    appearance: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.jc-btn:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 2px var(--jc-btn-focus-ring);
}

.jc-btn:not(:disabled):not([aria-disabled="true"]):hover,
.jc-btn:not(:disabled):not([aria-disabled="true"]):focus-visible {
    background: var(--jc-btn-bg-hover);
    border-color: var(--jc-btn-border-color-hover);
    color: var(--jc-btn-color);
    opacity: var(--jc-btn-opacity-hover);
}

.jc-btn:not(:disabled):not([aria-disabled="true"]):active {
    background: var(--jc-btn-bg-active);
    border-color: var(--jc-btn-border-color-active);
    opacity: var(--jc-btn-opacity-active);
}

.jc-btn:disabled,
.jc-btn[aria-disabled="true"] {
    background: var(--jc-btn-bg-disabled);
    border-color: var(--jc-btn-border-color-disabled);
    color: var(--jc-btn-color-disabled);
    opacity: var(--jc-btn-opacity-disabled);
    cursor: default;
    pointer-events: none;
    box-shadow: none;
}

.jc-btn--round {
    --jc-btn-radius: 9999px;
}

.jc-btn--round.jc-btn--gray.jc-btn--md {
    --jc-btn-font-size: 14px;
    --jc-btn-line-height: 1.4;
}

/* Figma 패딩: 라운드 — 화살표 없음 12,12 / 화살표 있음 20,20 */
.jc-btn--round:not(:has(.jc-btn__icon)) {
    --jc-btn-padding-left: 12px;
    --jc-btn-padding-right: 12px;
}

.jc-btn--round:has(.jc-btn__icon) {
    --jc-btn-padding-left: 20px;
    --jc-btn-padding-right: 20px;
}

.jc-btn--basic {
    --jc-btn-radius: 6px;
}

/* Figma 패딩: 라운드 아님 — 화살표 없음 18,18 / 화살표 있음 없는쪽 20, 있는쪽 16 */
.jc-btn--basic:not(:has(.jc-btn__icon)) {
    --jc-btn-padding-left: 18px;
    --jc-btn-padding-right: 18px;
}

.jc-btn--basic:has(.jc-btn__icon--right) {
    --jc-btn-padding-left: 20px;
    --jc-btn-padding-right: 16px;
}

.jc-btn--basic:has(.jc-btn__icon--left) {
    --jc-btn-padding-left: 12px;
    --jc-btn-padding-right: 18px;
}

/* Figma: shared button spacing/font tokens */
.jc-btn--xs {
    --jc-btn-min-width: var(--jc-btn-size-xs-min-width);
    --jc-btn-height: var(--jc-btn-size-xs-height);
    --jc-btn-gap: var(--jc-btn-size-xs-gap);
    --jc-btn-padding-y: var(--jc-btn-size-xs-padding-y);
    --jc-btn-padding-x: var(--jc-btn-size-xs-padding-x);
    --jc-btn-font-size: var(--jc-btn-size-xs-font-size);
    --jc-btn-line-height: var(--jc-btn-size-xs-line-height);
    --jc-btn-icon-size: var(--jc-btn-size-xs-icon-size);
}

.jc-btn--sm {
    --jc-btn-min-width: var(--jc-btn-size-sm-min-width);
    --jc-btn-height: var(--jc-btn-size-sm-height);
    --jc-btn-gap: var(--jc-btn-size-sm-gap);
    --jc-btn-padding-y: var(--jc-btn-size-sm-padding-y);
    --jc-btn-padding-x: var(--jc-btn-size-sm-padding-x);
    --jc-btn-font-size: var(--jc-btn-size-sm-font-size);
    --jc-btn-line-height: var(--jc-btn-size-sm-line-height);
    --jc-btn-icon-size: var(--jc-btn-size-sm-icon-size);
}

.jc-btn--md {
    --jc-btn-min-width: var(--jc-btn-size-md-min-width);
    --jc-btn-height: var(--jc-btn-size-md-height);
    --jc-btn-gap: var(--jc-btn-size-md-gap);
    --jc-btn-padding-y: var(--jc-btn-size-md-padding-y);
    --jc-btn-padding-x: var(--jc-btn-size-md-padding-x);
    --jc-btn-font-size: var(--jc-btn-size-md-font-size);
    --jc-btn-line-height: var(--jc-btn-size-md-line-height);
    --jc-btn-icon-size: var(--jc-btn-size-md-icon-size);
}

.jc-btn--lg {
    --jc-btn-min-width: var(--jc-btn-size-lg-min-width);
    --jc-btn-height: var(--jc-btn-size-lg-height);
    --jc-btn-gap: var(--jc-btn-size-lg-gap);
    --jc-btn-padding-y: var(--jc-btn-size-lg-padding-y);
    --jc-btn-padding-x: var(--jc-btn-size-lg-padding-x);
    --jc-btn-font-size: var(--jc-btn-size-lg-font-size);
    --jc-btn-line-height: var(--jc-btn-size-lg-line-height);
    --jc-btn-icon-size: var(--jc-btn-size-lg-icon-size);
}

@media (max-width: 1024px) {
    .jc-btn--tablet-md {
        --jc-btn-min-width: var(--jc-btn-size-md-min-width);
        --jc-btn-height: var(--jc-btn-size-md-height);
        --jc-btn-gap: var(--jc-btn-size-md-gap);
        --jc-btn-padding-y: var(--jc-btn-size-md-padding-y);
        --jc-btn-padding-x: var(--jc-btn-size-md-padding-x);
        --jc-btn-font-size: var(--jc-btn-size-md-font-size);
        --jc-btn-line-height: var(--jc-btn-size-md-line-height);
        --jc-btn-icon-size: var(--jc-btn-size-md-icon-size);
    }
}

@media (max-width: 767px) {
    .jc-btn--mobile-sm {
        --jc-btn-min-width: var(--jc-btn-size-sm-min-width);
        --jc-btn-height: var(--jc-btn-size-sm-height);
        --jc-btn-gap: var(--jc-btn-size-sm-gap);
        --jc-btn-padding-y: var(--jc-btn-size-sm-padding-y);
        --jc-btn-padding-x: var(--jc-btn-size-sm-padding-x);
        --jc-btn-font-size: var(--jc-btn-size-sm-font-size);
        --jc-btn-line-height: var(--jc-btn-size-sm-line-height);
        --jc-btn-icon-size: var(--jc-btn-size-sm-icon-size);
    }
}

@media (max-width: 640px) {
    .jc-btn--mobile-xs {
        --jc-btn-min-width: var(--jc-btn-size-xs-min-width);
        --jc-btn-height: var(--jc-btn-size-xs-height);
        --jc-btn-gap: var(--jc-btn-size-xs-gap);
        --jc-btn-padding-y: var(--jc-btn-size-xs-padding-y);
        --jc-btn-padding-x: var(--jc-btn-size-xs-padding-x);
        --jc-btn-font-size: var(--jc-btn-size-xs-font-size);
        --jc-btn-line-height: var(--jc-btn-size-xs-line-height);
        --jc-btn-icon-size: var(--jc-btn-size-xs-icon-size);
    }
}

/* Figma btn_pretendard: Normal=#F4B540, Hover=#F0A824, Pressed=#F9C85A, Disabled=#FFD77A */
.jc-btn--pretendard {
    --jc-btn-bg: #F4B540;
    --jc-btn-bg-hover: #F0A824;
    --jc-btn-bg-active: #F9C85A;
    --jc-btn-bg-disabled: #FFD77A;
    --jc-btn-color: #ffffff;
    --jc-btn-color-disabled: #ffffff;
    --jc-btn-focus-ring: rgba(244, 181, 64, 0.28);
}

/* Figma btn_white: Normal=rgba(255,255,255,0.20), Hover=0.10, Pressed=0.40, Disabled=0.20+text opacity 0.40 */
.jc-btn--white,
.jc-btn--transparent {
    --jc-btn-bg: rgba(255, 255, 255, 0.2);
    --jc-btn-bg-hover: rgba(255, 255, 255, 0.1);
    --jc-btn-bg-active: rgba(255, 255, 255, 0.4);
    --jc-btn-bg-disabled: rgba(255, 255, 255, 0.2);
    --jc-btn-border-width: 1px;
    --jc-btn-border-color: #ffffff;
    --jc-btn-border-color-hover: #ffffff;
    --jc-btn-border-color-active: #ffffff;
    --jc-btn-border-color-disabled: rgba(255, 255, 255, 0.4);
    --jc-btn-color: #ffffff;
    --jc-btn-color-disabled: rgba(255, 255, 255, 0.4);
    --jc-btn-focus-ring: rgba(255, 255, 255, 0.24);
}

/* Figma btn_dark: Normal=#3E3E3E, Hover=#9E9E9E, Pressed=#272727, Disabled=#EBEBEB(text white) */
.jc-btn--dark {
    --jc-btn-bg: #3e3e3e;
    --jc-btn-bg-hover: #9e9e9e;
    --jc-btn-bg-active: #272727;
    --jc-btn-bg-disabled: #ebebeb;
    --jc-btn-color: #ffffff;
    --jc-btn-color-disabled: rgba(255, 255, 255, 0.4);
    --jc-btn-focus-ring: rgba(62, 62, 62, 0.24);
}

/* Figma btn_gray: outline, stroke=#9E9E9E, Hover=rgba(white,0.10), Pressed=rgba(white,0.40), Disabled=rgba(white,0.20)+text opacity 0.40 */
.jc-btn--gray,
.jc-btn--outline {
    --jc-btn-bg: transparent;
    --jc-btn-bg-hover: rgba(255, 255, 255, 0.1);
    --jc-btn-bg-active: rgba(255, 255, 255, 0.4);
    --jc-btn-bg-disabled: rgba(255, 255, 255, 0.2);
    --jc-btn-border-width: 1px;
    --jc-btn-border-color: #9e9e9e;
    --jc-btn-border-color-hover: #9e9e9e;
    --jc-btn-border-color-active: #9e9e9e;
    --jc-btn-border-color-disabled: rgba(158, 158, 158, 0.4);
    --jc-btn-color: #9e9e9e;
    --jc-btn-color-disabled: rgba(158, 158, 158, 0.4);
    --jc-btn-focus-ring: rgba(158, 158, 158, 0.24);
}

.jc-btn__label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.jc-hww__btn .jc-hww__btn-label--desktop {
    display: flex;
}

.jc-hww__btn .jc-hww__btn-label--mobile {
    display: none;
}

.jc-btn__icon {
    display: block;
    flex: 0 0 auto;
    width: var(--jc-btn-icon-size);
    height: var(--jc-btn-icon-size);
    background-color: currentColor;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
}

.jc-btn__icon--left {
    -webkit-mask-image: url("../img/btn_arrow_left.svg");
    mask-image: url("../img/btn_arrow_left.svg");
}

.jc-btn__icon--right {
    -webkit-mask-image: url("../img/btn_arrow_right.svg");
    mask-image: url("../img/btn_arrow_right.svg");
}

input[type=text],
input[type=password],
textarea {
    -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ease-in-out;
    outline: none;
}

input[type=text]:focus,
input[type=password]:focus,
textarea:focus,
select:focus {
    -webkit-box-shadow: 0 0 5px #9ed4ff;
    -moz-box-shadow: 0 0 5px #9ed4ff;
    box-shadow: 0 0 5px #9ed4ff;
    border: 1px solid #558ab7 !important;
}

.placeholdersjs {
    color: #aaa !important
}

/* 레이아웃 크기 지정 */
#hd,
#wrapper,
#ft {
    min-width: 0
}

#hd_pop,
#hd_wrapper,
#tnb .inner,

#gnb .gnb_wrap,
#ft_wr {
    width: min(1200px, calc(100% - 160px));
    max-width: 1200px;
    box-sizing: border-box
}

#container_wr {
    width: 100%;
    max-width: none;
    box-sizing: border-box
}

/* 팝업레이어 */
#hd_pop {
    z-index: 1000;
    position: relative;
    margin: 0 auto;
    height: 0
}

#hd_pop h2 {
    position: absolute;
    font-size: 0;
    line-height: 0;
    overflow: hidden
}

.hd_pops {
    position: absolute;
    border: 1px solid #e9e9e9;
    background: #fff
}

.hd_pops img {
    max-width: 100%
}

.hd_pops_con {}

.hd_pops_footer {
    padding: 0;
    background: #000;
    color: #fff;
    text-align: left;
    position: relative
}

.hd_pops_footer:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: ""
}

.hd_pops_footer button {
    padding: 10px;
    border: 0;
    color: #fff
}

.hd_pops_footer .hd_pops_reject {
    background: #000;
    text-align: left
}

.hd_pops_footer .hd_pops_close {
    background: #393939;
    position: absolute;
    top: 0;
    right: 0
}

/* 상단 레이아웃 */
#hd {
    background: #212020
}

#hd_h1 {
    position: absolute;
    font-size: 0;
    line-height: 0;
    overflow: hidden
}

#tnb {
    border-bottom: 1px solid #383838;
    margin: 0 auto
}

#tnb:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: ""
}

#tnb .inner {
    margin: 0 auto
}

#hd_wrapper {
    position: relative;
    margin: 0 auto;
    height: 140px;
    zoom: 1
}

#hd_wrapper:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: ""
}

#logo {
    float: left;
    padding: 30px 0 0
}

.hd_sch_wr {
    float: left;
    padding: 30px 0;
    width: 445px;
    margin-left: 65px
}

#hd_sch h3 {
    position: absolute;
    font-size: 0;
    line-height: 0;
    overflow: hidden
}

#hd_sch {
    border-radius: 30px;
    overflow: hidden
}

#hd_sch #sch_stx {
    float: left;
    width: 385px;
    height: 45px;
    padding-left: 10px;
    border-radius: 30px 0 0 30px;
    background: #2c2c2c;
    border: 0;
    border-right: 0;
    font-size: 1.25em;
    color: #fff
}

#hd_sch #sch_submit {
    float: left;
    width: 60px;
    height: 45px;
    border: 0;
    background: #2c2c2c;
    color: #fff;
    border-radius: 0 30px 30px 0;
    cursor: pointer;
    font-size: 16px
}

#hd_define {
    float: left
}

#hd_define:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: ""
}

#hd_define li {
    float: left;
    font-size: 1.083em;
    line-height: 14px;
    border-right: 1px solid #4a4a4a;
    position: relative;
    text-align: center;
    margin: 15px 10px 15px 0;
    padding-right: 10px
}

#hd_define li:last-child {
    padding-right: 0;
    margin-right: 0;
    border-right: 0
}

#hd_define li a {
    display: inline-block;
    color: #919191
}

#hd_define li.active a {
    color: #fff
}


#hd_qnb {
    float: right;
    text-align: right
}

#hd_qnb:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: ""
}

#hd_qnb li {
    float: left;
    font-size: 1.083em;
    line-height: 14px;
    border-right: 1px solid #4a4a4a;
    position: relative;
    text-align: center;
    margin: 15px 10px 15px 0;
    padding-right: 10px
}

#hd_qnb li:last-child {
    padding-right: 0;
    margin-right: 0;
    border-right: 0
}

#hd_qnb li span {
    display: block;
    margin-top: 5px;
    font-size: 0.92em
}

#hd_qnb li a {
    display: inline-block;
    color: #919191
}

#hd_qnb .visit .visit-num {
    display: inline-block;
    line-height: 16px;
    padding: 0 5px;
    margin-left: 5px;
    border-radius: 10px;
    background: #da22f5;
    color: #fff;
    font-size: 10px
}


.hd_login {
    position: absolute;
    right: 0;
    top: 60px
}

.hd_login li {
    float: left;
    margin: 0 5px;
    border-left: 1px solid #616161;
    padding-left: 10px;
    line-height: 13px
}

.hd_login li:first-child {
    border-left: 0
}

.hd_login a {
    color: #fff
}


/* 메인메뉴 */
#gnb {
    position: relative;
    background: #fff
}

#gnb>h2 {
    position: absolute;
    font-size: 0;
    line-height: 0;
    overflow: hidden
}

#gnb .gnb_wrap {
    margin: 0 auto;
    position: relative
}

#gnb .gnb_wrap:hover,
#gnb .gnb_wrap:focus,
#gnb .gnb_wrap:active {
    z-index: 3
}

#gnb #gnb_1dul {
    font-size: 1.083em;
    padding: 0;
    border-bottom: 1px solid #e0e2e5;
    zoom: 1
}

#gnb ul:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: ""
}

#gnb .gnb_1dli {
    float: left;
    line-height: 55px;
    padding: 0px;
    position: relative
}

#gnb .gnb_1dli:hover>a {
    color: var(--jc-primary-dark);
    -webkit-transition: background-color 2s ease-out;
    -moz-transition: background-color 0.3s ease-out;
    -o-transition: background-color 0.3s ease-out;
    transition: background-color 0.3s ease-out
}

.gnb_1dli .bg {
    position: absolute;
    top: 24px;
    right: 8px;
    display: inline-block;
    width: 10px;
    height: 10px;
    overflow: hidden;
    background: url('../img/gnb_bg2.gif') no-repeat 50% 50%;
    text-indent: -999px
}

.gnb_1da {
    display: block;
    font-weight: bold;
    padding: 0 15px;
    color: #080808;
    text-decoration: none
}

.gnb_1dli.gnb_al_li_plus .gnb_1da {
    padding-right: 25px
}

.gnb_2dli:first-child {
    border: 0
}

.gnb_2dul {
    display: none;
    position: absolute;
    top: 54px;
    min-width: 140px;
    padding-top: 2px
}

.gnb_2dul .gnb_2dul_box {
    border: 1px solid #e0e2e5;
    border-top: 0;
    padding: 0;
    -webkit-box-shadow: 0px 1px 5px rgba(97, 97, 97, 0.2);
    -moz-box-shadow: 0px 1px 5px rgba(97, 97, 97, 0.2);
    box-shadow: 0px 1px 5px rgba(97, 97, 97, 0.2)
}

.gnb_2da {
    display: block;
    padding: 0 10px;
    line-height: 40px;
    background: #fff;
    color: #080808;
    text-align: left;
    text-decoration: none
}

a.gnb_2da:hover {
    color: var(--jc-primary-dark);
    background: #f7f7f8;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out
}

.gnb_1dli_air .gnb_2da {}

.gnb_1dli_on .gnb_2da {}

.gnb_2da:focus,
.gnb_2da:hover {
    color: #fff
}

.gnb_1dli_over .gnb_2dul {
    display: block;
    left: 0
}

.gnb_1dli_over2 .gnb_2dul {
    display: block;
    right: 0
}

.gnb_wrap .gnb_empty {
    padding: 10px 0;
    width: 100%;
    text-align: center;
    line-height: 2.7em;
    color: #080808
}

.gnb_wrap .gnb_empty a {
    color: var(--jc-primary-dark);
    text-decoration: underline
}

.gnb_wrap .gnb_al_ul .gnb_empty,
.gnb_wrap .gnb_al_ul .gnb_empty a {
    color: #555
}

#gnb .gnb_menu_btn {
    background: #4158d1;
    color: #fff;
    width: 50px;
    height: 55px;
    border: 0;
    vertical-align: top;
    font-size: 18px
}

#gnb .gnb_close_btn {
    background: #fff;
    color: #b6b9bb;
    width: 50px;
    height: 50px;
    border: 0;
    vertical-align: top;
    font-size: 18px;
    position: absolute;
    top: 0;
    right: 0
}

#gnb .gnb_mnal {
    float: right;
    padding: 0
}

#gnb_all {
    display: none;
    position: absolute;
    border: 1px solid #c5d6da;
    width: 100%;
    background: #fff;
    z-index: 1000;
    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2)
}

#gnb_all h2 {
    font-size: 1.3em;
    padding: 15px 20px;
    border-bottom: 1px solid #e7eeef
}

#gnb_all .gnb_al_ul:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: ""
}

#gnb_all .gnb_al_ul>li:nth-child(5n+1) {
    border-left: 0
}

#gnb_all .gnb_al_li {
    float: left;
    width: 20%;
    min-height: 150px;
    padding: 20px;
    border-left: 1px solid #e7eeef
}

#gnb_all .gnb_al_li .gnb_al_a {
    font-size: 1.2em;
    display: block;
    position: relative;
    margin-bottom: 10px;
    font-weight: bold;
    color: var(--jc-primary-dark)
}

#gnb_all .gnb_al_li li {
    line-height: 2em
}

#gnb_all .gnb_al_li li a {
    color: #555
}

#gnb_all_bg {
    display: none;
    background: rgba(0, 0, 0, 0.1);
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999
}

/* 중간 레이아웃 */
#wrapper {}

#container_wr:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: ""
}

#container_wr {
    margin: 0 auto;
    zoom: 1
}

#aside {
    float: right;
    width: 235px;
    padding: 0;
    height: 100%;
    margin: 20px 0 20px 20px
}

#container {
    position: relative;
    float: left;
    min-height: 500px;
    height: auto !important;
    margin: 20px 0;
    font-size: 1em;
    width: 930px;
    zoom: 1
}

#container:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: ""
}

.lt_wr {
    width: 32%
}

.lt_wr:nth-child(3n+1) {
    clear: both
}

.latest_wr {
    margin-bottom: 20px
}

.latest_wr:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: ""
}

.latest_top_wr {
    margin: 0 -10px 20px
}

.latest_top_wr:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: ""
}

/* 하단 레이아웃 */
#ft {
    background: #212020;
    margin: 0 auto;
    text-align: center
}

#ft h1 {
    position: absolute;
    font-size: 0;
    line-height: 0;
    overflow: hidden
}

#ft_wr {
    max-width: 1240px;
    margin: 0;
    padding: 40px 0;
    position: relative;
    display: inline-block;
    text-align: left
}

#ft_wr:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: ""
}

#ft_wr .ft_cnt {
    width: 25%;
    float: left;
    padding: 0 20px
}

#ft_link {
    text-align: left
}

#ft_link a {
    display: block;
    color: #fff;
    line-height: 2em;
    font-weight: bold
}

#ft_company h2 {
    font-size: 1.2em;
    margin-bottom: 20px
}

#ft_company {
    font-weight: normal;
    color: #e3e3e3;
    line-height: 2em
}

#ft_catch {
    margin: 20px 0 10px
}

#ft_copy {
    text-align: center;
    width: min(1200px, calc(100% - 160px));
    max-width: 1200px;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 20px 0;
    color: #5b5b5b;
    font-size: 0.92em;
    border-top: 1px solid #383838
}

#top_btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    line-height: 46px;
    border: 2px solid #333;
    color: #333;
    text-align: center;
    font-size: 15px;
    z-index: 90;
    background: rgba(255, 255, 255, 0.5)
}

#top_btn:hover {
    border-color: #3059c7;
    background: #3059c7;
    color: #fff
}

/* 게시물 선택복사 선택이동 */
#copymove {}

#copymove .win_desc {
    text-align: center;
    display: block
}

#copymove .tbl_wrap {
    margin: 20px
}

#copymove .win_btn {
    padding: 0 20px 20px
}

.copymove_current {
    float: right;
    background: #ff3061;
    padding: 5px;
    color: #fff;
    border-radius: 3px
}

.copymove_currentbg {
    background: #f4f4f4
}

/* 화면낭독기 사용자용 */
#hd_login_msg {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 0;
    line-height: 0;
    overflow: hidden
}

.msg_sound_only,
.sound_only {
    display: inline-block !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0;
    line-height: 0;
    border: 0 !important;
    overflow: hidden !important
}

/* 본문 바로가기 */
#skip_to_container a {
    z-index: 100000;
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    font-size: 0;
    line-height: 0;
    overflow: hidden
}

#skip_to_container a:focus,
#skip_to_container a:active {
    width: 100%;
    height: 75px;
    background: #21272e;
    color: #fff;
    font-size: 2em;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    line-height: 3.3em
}

/* ie6 이미지 너비 지정 */
.img_fix {
    width: 100%;
    height: auto
}

/* 캡챠 자동등록(입력)방지 기본 -pc */
#captcha {
    display: inline-block;
    position: relative
}

#captcha legend {
    position: absolute;
    margin: 0;
    padding: 0;
    font-size: 0;
    line-height: 0;
    text-indent: -9999em;
    overflow: hidden
}

#captcha #captcha_img {
    height: 40px;
    border: 1px solid #898989;
    vertical-align: top;
    padding: 0;
    margin: 0
}

#captcha #captcha_mp3 {
    margin: 0;
    padding: 0;
    width: 40px;
    height: 40px;
    border: 0;
    background: transparent;
    vertical-align: middle;
    overflow: hidden;
    cursor: pointer;
    background: url('../../../img/captcha2.webp') no-repeat;
    text-indent: -999px;
    border-radius: 3px
}

#captcha #captcha_reload {
    margin: 0;
    padding: 0;
    width: 40px;
    height: 40px;
    border: 0;
    background: transparent;
    vertical-align: middle;
    overflow: hidden;
    cursor: pointer;
    background: url('../../../img/captcha2.webp') no-repeat 0 -40px;
    text-indent: -999px;
    border-radius: 3px
}

#captcha #captcha_key {
    margin: 0 0 0 3px;
    padding: 0 5px;
    width: 90px;
    height: 40px;
    border: 1px solid #ccc;
    background: #fff;
    font-size: 1.333em;
    font-weight: bold;
    text-align: center;
    border-radius: 3px;
    vertical-align: top
}

#captcha #captcha_info {
    display: block;
    margin: 5px 0 0;
    font-size: 0.95em;
    letter-spacing: -0.1em
}

/* 캡챠 자동등록(입력)방지 기본 - mobile */
#captcha.m_captcha audio {
    display: block;
    margin: 0 0 5px;
    width: 187px
}

#captcha.m_captcha #captcha_img {
    width: 160px;
    height: 60px;
    border: 1px solid #e9e9e9;
    margin-bottom: 3px;
    margin-top: 5px;
    display: block
}

#captcha.m_captcha #captcha_reload {
    position: static;
    margin: 0;
    padding: 0;
    width: 40px;
    height: 40px;
    border: 0;
    background: transparent;
    vertical-align: middle;
    overflow: hidden;
    cursor: pointer;
    background: url('../../../img/captcha2.webp') no-repeat 0 -40px;
    text-indent: -999px
}

#captcha.m_captcha #captcha_reload span {
    display: none
}

#captcha.m_captcha #captcha_key {
    margin: 0;
    padding: 0 5px;
    width: 115px;
    height: 29px;
    border: 1px solid #b8c9c2;
    background: #f7f7f7;
    font-size: 1.333em;
    font-weight: bold;
    text-align: center;
    line-height: 29px;
    margin-left: 3px
}

#captcha.m_captcha #captcha_info {
    display: block;
    margin: 5px 0 0;
    font-size: 0.95em;
    letter-spacing: -0.1em
}

#captcha.m_captcha #captcha_mp3 {
    width: 31px;
    height: 31px;
    background: url('../../../img/captcha2.webp') no-repeat 0 0;
    vertical-align: top;
    overflow: hidden;
    cursor: pointer;
    text-indent: -9999px;
    border: none
}

/* ckeditor 단축키 */
.cke_sc {
    margin: 0 0 5px;
    text-align: right
}

.btn_cke_sc {
    display: inline-block;
    padding: 0 10px;
    height: 23px;
    border: 1px solid #ccc;
    background: #fafafa;
    color: #000;
    text-decoration: none;
    line-height: 1.9em;
    vertical-align: middle;
    cursor: pointer
}

.cke_sc_def {
    margin: 0 0 5px;
    padding: 10px;
    border: 1px solid #ccc;
    background: #f7f7f7;
    text-align: center
}

.cke_sc_def dl {
    margin: 0 0 5px;
    text-align: left;
    zoom: 1
}

.cke_sc_def dl:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: ""
}

.cke_sc_def dt,
.cke_sc_def dd {
    float: left;
    margin: 0;
    padding: 5px 0;
    border-bottom: 1px solid #e9e9e9
}

.cke_sc_def dt {
    width: 20%;
    font-weight: bold
}

.cke_sc_def dd {
    width: 30%
}

/* ckeditor 태그 기본값 */
#bo_v_con ul {
    display: block;
    list-style-type: disc;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
    padding-left: 40px
}

#bo_v_con ol {
    display: block;
    list-style-type: decimal;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
    padding-left: 40px
}

#bo_v_con li {
    display: list-item
}

/* 버튼 (Figma 버튼 공통 스펙: R6, Primary #FFA722 / Hover #F29712 / Pressed #FFB84D, md 40px, padding 18px) */
a.btn,
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    height: 40px;
    padding: 0 18px;
    line-height: 1.4;
    text-align: center;
    font-weight: 500;
    font-size: 16px;
    border: 0;
    border-radius: 6px;
    -webkit-transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    -moz-transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

button.btn {
    min-height: 40px;
    height: 40px;
}

a.btn01 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    height: 40px;
    line-height: 1.4;
    border: 1px solid #dcdcdc;
    background: #fff;
    color: #333;
    text-decoration: none;
    vertical-align: middle;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 500
}

a.btn01:focus,
a.btn01:hover {
    text-decoration: none;
    background: #f9f9f9;
    border-color: #b0b0b0
}

button.btn01 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0 18px;
    height: 40px;
    line-height: 1.4;
    border: 1px solid #dcdcdc;
    background: #fff;
    color: #333;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 500
}

a.btn02 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    height: 40px;
    line-height: 1.4;
    border: 0;
    background: var(--jc-primary);
    color: #fff;
    text-decoration: none;
    vertical-align: middle;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 500
}

a.btn02:focus,
a.btn02:hover {
    text-decoration: none;
    background: var(--jc-primary-dark)
}

button.btn02 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0 18px;
    height: 40px;
    line-height: 1.4;
    border: 0;
    background: var(--jc-primary);
    color: #fff;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 500
}

button.btn02:hover {
    background: var(--jc-primary-dark)
}

.btn_confirm {
    text-align: right
}

/* 서식단계 진행 */

.btn_submit {
    border: 0;
    background: var(--jc-primary);
    color: #fff;
    cursor: pointer;
    border-radius: 6px;
    padding: 0 18px;
    height: 40px;
    line-height: 1.4;
    font-size: 16px;
    font-weight: 500;
    transition: background-color 0.2s ease
}

button.btn_submit,
a.btn_submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn_submit:hover {
    background: var(--jc-primary-dark)
}

.btn_submit:active {
    background: var(--jc-orange-400)
}

.btn_close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dcdcdc;
    cursor: pointer;
    border-radius: 6px;
    background: #fff;
    padding: 0 18px;
    height: 40px;
    line-height: 1.4;
    font-size: 16px
}

a.btn_close {
    text-align: center;
    line-height: 1.4
}

a.btn_cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    height: 40px;
    line-height: 1.4;
    background: #fff;
    border: 1px solid #dcdcdc;
    color: #555;
    text-decoration: none;
    vertical-align: middle;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 500
}

button.btn_cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    height: 40px;
    line-height: 1.4;
    background: #fff;
    border: 1px solid #dcdcdc;
    color: #555;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 500
}

.btn_cancel:hover {
    background: #f9f9f9;
    border-color: #b0b0b0;
    color: #333
}

a.btn_frmline,
button.btn_frmline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 128px;
    padding: 0 18px;
    height: 40px;
    border: 0;
    background: #3e3e3e;
    border-radius: 6px;
    color: #fff;
    text-decoration: none;
    vertical-align: top;
    font-size: 16px;
    font-weight: 500
}

/* Figma btn_dark */
a.btn_frmline {}

button.btn_frmline {
    font-size: 1em
}

/* 게시판용 버튼 (Figma 스타일 매핑: btn_b02=Primary, btn_b01=White/Outline) */
a.btn_b01,
.btn_b01 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    height: 40px;
    line-height: 1.4;
    color: #555;
    text-decoration: none;
    vertical-align: middle;
    border: 1px solid #dcdcdc;
    background: #fff;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 500
}

.btn_b01:hover,
a.btn_b01:hover {
    color: #333;
    background: #f9f9f9;
    border-color: #b0b0b0
}

a.btn_b02,
.btn_b02 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    height: 40px;
    line-height: 1.4;
    background: var(--jc-primary);
    color: #fff;
    text-decoration: none;
    border: 0;
    vertical-align: middle;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 500
}

a.btn_b02:hover,
.btn_b02:hover {
    background: var(--jc-primary-dark)
}

a.btn_b02:active,
.btn_b02:active {
    background: var(--jc-orange-400)
}

a.btn_b03,
.btn_b03 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    height: 40px;
    line-height: 1.4;
    background: #fff;
    border: 1px solid #b9bdd3;
    color: #646982;
    text-decoration: none;
    vertical-align: middle;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 500
}

a.btn_b03:hover,
.btn_b03:hover {
    background: #ebedf6
}

a.btn_b04,
.btn_b04 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    height: 40px;
    line-height: 1.4;
    background: #fff;
    border: 1px solid #dcdcdc;
    color: #707070;
    text-decoration: none;
    vertical-align: middle;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 500
}

a.btn_b04:hover,
.btn_b04:hover {
    color: #333;
    background: #f9f9f9;
    border-color: #b0b0b0
}

a.btn_admin,
.btn_admin {
    display: inline-block;
    color: #d13f4a;
    text-decoration: none;
    vertical-align: middle
}

.btn_admin:hover,
a.btn_admin:hover {
    color: #ff3746
}


/* 기본테이블 */
.tbl_wrap table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0 5px;
    background: #fff;
    border-top: 1px solid #ececec;
    border-bottom: 1px solid #ececec
}

.tbl_wrap caption {
    padding: 10px 0;
    font-weight: bold;
    text-align: left
}

.tbl_head01 {
    margin: 0 0 10px
}

.tbl_head01 caption {
    padding: 0;
    font-size: 0;
    line-height: 0;
    overflow: hidden
}

.tbl_head01 thead th {
    padding: 20px 0;
    font-weight: 600;
    text-align: center;
    border-top: 2px solid var(--jc-navy);
    border-bottom: 1px solid #ececec;
    height: 40px;
    background: #f9f9f9;
    color: #101a2d
}

.tbl_head01 thead th input {
    vertical-align: top
}

/* middle 로 하면 게시판 읽기에서 목록 사용시 체크박스 라인 깨짐 */
.tbl_head01 tfoot th,
.tbl_head01 tfoot td {
    padding: 10px 0;
    border-top: 1px solid #c1d1d5;
    border-bottom: 1px solid #c1d1d5;
    background: #d7e0e2;
    text-align: center
}

.tbl_head01 tbody th {
    padding: 8px 0;
    border-bottom: 1px solid #e8e8e8
}

.tbl_head01 td {
    color: #666;
    padding: 10px 5px;
    border-top: 1px solid #ecf0f1;
    border-bottom: 1px solid #ecf0f1;
    line-height: 1.4em;
    height: 60px;
    word-break: break-all
}

.tbl_head01 tbody tr:hover td {
    background: #fafafa
}

.tbl_head01 a:hover {
    text-decoration: underline
}

.tbl_head02 {
    margin: 0 0 10px
}

.tbl_head02 caption {
    padding: 0;
    font-size: 0;
    line-height: 0;
    overflow: hidden
}

.tbl_head02 thead th {
    padding: 5px 0;
    border-top: 1px solid #d1dee2;
    border-bottom: 1px solid #d1dee2;
    background: #e5ecef;
    color: #383838;
    font-size: 0.95em;
    text-align: center;
    letter-spacing: -0.1em
}

.tbl_head02 thead a {
    color: #383838
}

.tbl_head02 thead th input {
    vertical-align: top
}

/* middle 로 하면 게시판 읽기에서 목록 사용시 체크박스 라인 깨짐 */
.tbl_head02 tfoot th,
.tbl_head02 tfoot td {
    padding: 10px 0;
    border-top: 1px solid #c1d1d5;
    border-bottom: 1px solid #c1d1d5;
    background: #d7e0e2;
    text-align: center
}

.tbl_head02 tbody th {
    padding: 5px 0;
    border-top: 1px solid #e9e9e9;
    border-bottom: 1px solid #e9e9e9;
    background: #fff
}

.tbl_head02 td {
    padding: 5px 3px;
    border-top: 1px solid #e9e9e9;
    border-bottom: 1px solid #e9e9e9;
    background: #fff;
    line-height: 1.4em;
    word-break: break-all
}

.tbl_head02 a {}

/* 폼 테이블 */
.tbl_frm01 {
    margin: 0 0 20px
}

.tbl_frm01 table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0
}

.tbl_frm01 th {
    width: 70px;
    padding: 7px 13px;
    border: 1px solid #e9e9e9;
    border-left: 0;
    background: #f5f8f9;
    text-align: left
}

.tbl_frm01 td {
    padding: 7px 10px;
    border-top: 1px solid #e9e9e9;
    border-bottom: 1px solid #e9e9e9;
    background: transparent
}

.wr_content textarea,
.tbl_frm01 textarea,
.form_01 textarea,
.frm_input {
    border: 1px solid #d0d3db;
    background: #fff;
    color: #000;
    vertical-align: middle;
    border-radius: 3px;
    padding: 5px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}

.tbl_frm01 textarea {
    padding: 2px 2px 3px
}

.frm_input {
    height: 40px
}

.full_input {
    width: 100%
}

.half_input {
    width: 49.5%
}

.twopart_input {
    width: 385px;
    margin-right: 10px
}

.tbl_frm01 textarea,
.write_div textarea {
    width: 100%;
    height: 100px
}

.tbl_frm01 a {
    text-decoration: none
}

.tbl_frm01 .frm_file {
    display: block;
    margin-bottom: 5px
}

.tbl_frm01 .frm_info {
    display: block;
    padding: 0 0 5px;
    line-height: 1.4em
}

/*기본 리스트*/
.list_01 ul {
    border-top: 1px solid #ececec
}

.list_01 li {
    border-bottom: 1px solid #ececec;
    background: #fff;
    padding: 10px 15px;
    list-style: none;
    position: relative
}

.list_01 li:nth-child(odd) {
    background: #f6f6f6
}

.list_01 li:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: ""
}

.list_01 li:hover {
    background: #f9f9f9
}

.list_01 li.empty_li {
    text-align: center;
    padding: 20px 0;
    color: #666
}

/*폼 리스트*/
.form_01 h2 {
    font-size: 1.167em
}

.form_01 li {
    margin-bottom: 10px
}

.form_01 ul:after,
.form_01 li:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: ""
}

.form_01 .left_input {
    float: left
}

.form_01 .margin_input {
    margin-right: 1%
}

.form_01 textarea {
    height: 100px;
    width: 100%
}

.form_01 .frm_label {
    display: inline-block;
    width: 130px
}

/* 자료 없는 목록 */
.empty_table {
    padding: 50px 0 !important;
    text-align: center
}

.empty_list {
    padding: 20px 0 !important;
    color: #666;
    text-align: center
}

/* 필수입력 */
.required,
textarea.required {
    background-image: url('../img/require.webp') !important;
    background-repeat: no-repeat !important;
    background-position: right top !important
}

/* 테이블 항목별 정의 */
.td_board {
    width: 80px;
    text-align: center
}

.td_category {
    width: 80px;
    text-align: center
}

.td_chk {
    width: 30px;
    text-align: center
}

.td_date {
    width: 60px;
    text-align: center
}

.td_datetime {
    width: 110px;
    text-align: center
}

.td_group {
    width: 80px;
    text-align: center
}

.td_mb_id {
    width: 100px;
    text-align: center
}

.td_mng {
    width: 80px;
    text-align: center
}

.td_name {
    width: 100px;
    text-align: left
}

.td_nick {
    width: 100px;
    text-align: center
}

.td_num {
    width: 50px;
    text-align: center
}

.td_numbig {
    width: 80px;
    text-align: center
}

.td_stat {
    width: 60px;
    text-align: center
}

.txt_active {
    color: #5d910b
}

.txt_done {
    color: #e8180c
}

.txt_expired {
    color: #ccc
}

.txt_rdy {
    color: #8abc2a
}

/* 새창 기본 스타일 */
.new_win {
    position: relative
}

.new_win .tbl_wrap {
    margin: 0 20px
}

.new_win #win_title {
    font-size: 1.3em;
    height: 50px;
    line-height: 30px;
    padding: 10px 20px;
    background: #fff;
    color: #000;
    -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, .1);
    -moz-box-shadow: 0 1px 10px rgba(0, 0, 0, .1);
    box-shadow: 0 1px 10px rgba(0, 0, 0, .1)
}

.new_win #win_title .sv {
    font-size: 0.75em;
    line-height: 1.2em
}

.new_win .win_ul {
    margin-bottom: 15px;
    padding: 0 20px
}

.new_win .win_ul:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: ""
}

.new_win .win_ul li {
    float: left;
    background: #fff;
    text-align: center;
    padding: 0 10px;
    border: 1px solid #d6e9ff;
    border-radius: 30px;
    margin-left: 5px
}

.new_win .win_ul li:first-child {
    margin-left: 0
}

.new_win .win_ul li a {
    display: block;
    padding: 8px 0;
    color: #6794d3
}

.new_win .win_ul .selected {
    background: var(--jc-primary-dark);
    border-color: var(--jc-primary-dark);
    position: relative;
    z-index: 5
}

.new_win .win_ul .selected a {
    color: #fff;
    font-weight: bold
}

.new_win .win_desc {
    position: relative;
    margin: 10px;
    border-radius: 5px;
    font-size: 1em;
    background: #f2838f;
    color: #fff;
    line-height: 50px;
    text-align: left;
    padding: 0 20px
}

.new_win .win_desc i {
    font-size: 1.2em;
    vertical-align: baseline
}

.new_win .win_desc:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 50px;
    background: #da4453;
    border-radius: 3px 0 0 3px
}

.new_win .frm_info {
    font-size: 0.92em;
    color: #919191
}

.new_win .win_total {
    float: right;
    display: inline-block;
    line-height: 30px;
    font-weight: normal;
    font-size: 0.75em;
    color: #3a8afd;
    background: #f6f6f6;
    padding: 0 10px;
    border-radius: 5px
}

.new_win .new_win_con {
    margin: 20px 0;
    padding: 20px
}

.new_win .new_win_con:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: ""
}

.new_win .new_win_con2 {
    margin: 20px 0
}

.new_win .btn_confirm:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: ""
}

.new_win .win_btn {
    text-align: center
}

.new_win .cert_btn {
    margin-bottom: 30px;
    text-align: center
}

.new_win .btn_close {
    padding: 0 18px;
    height: 40px;
    overflow: hidden;
    cursor: pointer;
    border-radius: 6px
}

.new_win .btn_submit {
    padding: 0 18px;
    height: 40px;
    font-weight: 500;
    font-size: 16px;
    border-radius: 6px;
    background: var(--jc-primary)
}

.new_win .btn_submit:hover {
    background: var(--jc-primary-dark)
}

/* 검색결과 색상 */
.sch_word {
    color: #fff;
    background: #ff005a;
    padding: 2px 5px 3px;
    line-height: 18px;
    margin: 0 2px
}

/* 자바스크립트 alert 대안 */
#validation_check {
    margin: 100px auto;
    width: 500px
}

#validation_check h1 {
    margin-bottom: 20px;
    font-size: 1.3em
}

#validation_check p {
    margin-bottom: 20px;
    padding: 30px 20px;
    border: 1px solid #e9e9e9;
    background: #fff
}

/* 사이드뷰 */
.sv_wrap {
    position: relative;
    font-weight: normal
}

.sv_wrap .sv {
    z-index: 1000;
    display: none;
    margin: 5px 0 0;
    font-size: 0.92em;
    background: #333;
    -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)
}

.sv_wrap .sv:before {
    content: "";
    position: absolute;
    top: -6px;
    left: 15px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 6px 6px 6px;
    border-color: transparent transparent #333 transparent
}

.sv_wrap .sv a {
    display: inline-block;
    margin: 0;
    padding: 0 10px;
    line-height: 30px;
    width: 100px;
    font-weight: normal;
    color: #bbb
}

.sv_wrap .sv a:hover {
    background: #000;
    color: #fff
}

.sv_member {
    color: #333
}

.sv_on {
    display: block !important;
    position: absolute;
    top: 23px;
    left: 0px;
    width: auto;
    height: auto
}

.sv_nojs .sv {
    display: block
}

/* 페이징 */
.pg_wrap {
    clear: both;
    float: left;
    display: inline-block
}

.pg_wrap:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: ""
}

.pg {
    text-align: center
}

.pg_page,
.pg_current {
    display: inline-block;
    vertical-align: middle;
    background: #eee;
    border: 1px solid #eee
}

.pg a:focus,
.pg a:hover {
    text-decoration: none
}

.pg_page {
    color: #959595;
    font-size: 1.083em;
    height: 30px;
    line-height: 28px;
    padding: 0 5px;
    min-width: 30px;
    text-decoration: none;
    border-radius: 3px
}

.pg_page:hover {
    background-color: #fafafa
}

.pg_start {
    text-indent: -999px;
    overflow: hidden;
    background: url('../img/btn_first.gif') no-repeat 50% 50% #eee;
    padding: 0;
    border: 1px solid #eee
}

.pg_prev {
    text-indent: -999px;
    overflow: hidden;
    background: url('../img/btn_prev.gif') no-repeat 50% 50% #eee;
    padding: 0;
    border: 1px solid #eee
}

.pg_end {
    text-indent: -999px;
    overflow: hidden;
    background: url('../img/btn_end.gif') no-repeat 50% 50% #eee;
    padding: 0;
    border: 1px solid #eee
}

.pg_next {
    text-indent: -999px;
    overflow: hidden;
    background: url('../img/btn_next.gif') no-repeat 50% 50% #eee;
    padding: 0;
    border: 1px solid #eee
}

.pg_start:hover,
.pg_prev:hover,
.pg_end:hover,
.pg_next:hover {
    background-color: #fafafa
}

.pg_current {
    display: inline-block;
    background: var(--jc-navy);
    border: 1px solid var(--jc-navy);
    color: #fff;
    font-weight: bold;
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    min-width: 30px;
    border-radius: 3px
}

/* cheditor 이슈 */
.cheditor-popup-window *,
.cheditor-popup-window :after,
.cheditor-popup-window :before {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

/* Mobile화면으로 */
#device_change {
    display: block;
    margin: 0.3em;
    padding: 0.5em 0;
    border: 1px solid #eee;
    border-radius: 2em;
    background: #fff;
    color: #000;
    font-size: 2em;
    text-decoration: none;
    text-align: center
}

/* ===== Landing Shell (Community) ===== */
/* ===== Joyconnect Design System: Color Tokens (피그마 기준) ===== */
:root {
    /* Joy Logo Colors */
    --jc-logo-orange: #F4B540;   /* Joy Orange */
    --jc-logo-navy: #141F61;     /* Joy Navy */

    /* Black & White */
    --jc-black: #000000;
    --jc-white: #FFFFFF;

    /* Orange Scale (피그마 정확한 값) */
    --jc-orange-900: #CA7E00;
    --jc-orange-800: #D68B0A;
    --jc-orange-700: #ED9908;
    --jc-orange-600: #F0A824;
    --jc-orange-500: #F4B540;
    --jc-orange-400: #F9C85A;
    --jc-orange-300: #FFD77A;
    --jc-orange-200: #FFE8B3;
    --jc-orange-100: #FEF9F0;

    /* BG Deemed (반투명 오버레이) */
    --jc-deemed-200: rgba(0, 0, 0, 0.6);
    --jc-deemed-100: rgba(0, 0, 0, 0.4);

    /* Gray Scale */
    --jc-gray-500: #9E9E9E;
    --jc-gray-300: #EBEBEB;

    /* Semantic / Utility */
    --brand: #156ef7;
    --brand-strong: #0f56c0;
    --accent: #10bea5;
    --line: #d5dfeb;
    --jc-bg: #edf3fb;
    --jc-text: #101a2d;
    --jc-muted: #5a6980;

    /* Alias: 자주 사용하는 브랜드 색상 단축키 */
    --jc-primary: var(--jc-orange-500);          /* = #F4B540, 주요 CTA */
    --jc-primary-dark: var(--jc-orange-600);     /* = #F0A824, hover/강조 */
    --jc-primary-darker: var(--jc-orange-700);   /* = #ED9908, pressed */
    --jc-primary-light: var(--jc-orange-200);    /* = #FFE8B3, 배경/disabled */
    --jc-primary-lighter: var(--jc-orange-100);  /* = #FEF9F0, 매우 연한 배경 */
    --jc-navy: var(--jc-logo-navy);              /* = #141F61, 네이비 강조 */
}

body {
    margin: 0;
    font-size: 14px;
    color: var(--jc-text);
    font-family: "Pretendard", "SUIT Variable", "Noto Sans KR", sans-serif;
    line-height: 1.6;
}

.jc-shell {
    position: relative;
    min-height: 100vh;
}

.jc-wrap {
    width: min(1140px, calc(100% - 40px));
    margin: 0 auto;
}

.jc-header-wrap {
    /* Figma PC GNB: 1440px frame, 48px side padding, 1344px inner width */
    width: min(1344px, calc(100% - 96px));
    margin: 0 auto;
}

.jc-skip {
    position: absolute;
    top: -9999px;
    left: 14px;
    z-index: 9999;
    border-radius: 10px;
    padding: 10px 14px;
    background: #0c182f;
    color: #fff;
}

.jc-skip:focus {
    top: 14px;
}

/* 내용관리 관리자 버튼 숨김 */
.ctt_admin {
    display: none !important;
}

.jc-header {
    position: sticky;
    top: 0;
    z-index: 90;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, backdrop-filter 0.2s ease;
}

.jc-header.scrolled {
    box-shadow: 0 10px 24px rgba(15, 24, 43, 0.08);
}

.jc-header-inner {
    min-height: 66px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.jc-logo {
    display: inline-flex;
    align-items: center;
    font-family: "Montserrat", "SUIT Variable", "Pretendard", "Noto Sans KR", sans-serif;
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1;
    text-transform: uppercase;
    color: #263170;
    white-space: nowrap;
}

.jc-logo-image-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    line-height: 0;
    width: 138px;
    height: 14px;
}

.jc-logo-image {
    display: block;
    width: 138px;
    height: 14px;
    object-fit: contain;
    object-position: left center;
}

.jc-logo-image-white {
    display: none;
}

/* === 네비 테마: solid (흰색 배경 - 기본 / 메인 / 대부분 페이지) === */
.jc-header.jc-header-theme-solid {
    background: #fff;
    border-bottom: 1px solid #e4e8f0;
}

.jc-header.jc-header-theme-solid.jc-header-content {
    border-bottom: 0;
}

.jc-header.jc-header-theme-solid .jc-logo-image-dark {
    display: block;
}

.jc-header.jc-header-theme-solid .jc-logo-image-white {
    display: none;
}

/* === 네비 테마: dark (레거시 호환성 유지) === */
.jc-header.jc-header-theme-dark .jc-logo-image-dark {
    display: block;
}

.jc-header.jc-header-theme-dark .jc-logo-image-white {
    display: none;
}

.jc-header.jc-header-theme-white .jc-logo-image-dark,
.jc-header.jc-header-dark .jc-logo-image-dark,
.jc-header[data-logo="white"] .jc-logo-image-dark {
    display: none;
}

.jc-header.jc-header-theme-white .jc-logo-image-white,
.jc-header.jc-header-dark .jc-logo-image-white,
.jc-header[data-logo="white"] .jc-logo-image-white {
    display: block;
}

.jc-nav {
    flex: 1;
    min-width: 0;
    margin-left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.jc-nav-main,
.jc-nav-side {
    display: flex;
    align-items: center;
}

.jc-nav-main {
    gap: 6px;
    min-width: 0;
}

.jc-nav-side {
    gap: 0;
    flex: 0 0 auto;
}

.jc-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    font-family: "Pretendard", "SUIT Variable", "Noto Sans KR", sans-serif;
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: 0;
    color: #616161;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.jc-nav-main a {
    min-height: 40px;
    padding: 10px 16px;
    border-radius: 999px;
    font-weight: 400;
}

.jc-nav-main a.is-current,
.jc-nav-main a[aria-current="page"],
.jc-nav-main a:hover,
.jc-nav-main a:focus-visible {
    color: #191919;
    background: var(--jc-orange-200);
}

.jc-nav-side a {
    min-height: 40px;
    padding: 10px 8px;
    font-weight: 700;
    color: #000;
}

.jc-nav-side a.is-current,
.jc-nav-side a[aria-current="page"],
.jc-nav-side a:hover,
.jc-nav-side a:focus-visible {
    color: var(--jc-orange-500);
}

/* 데스크탑 nav에서 HOME 링크 숨김 (모바일 메뉴에서는 표시) */
.jc-nav a.jc-nav-home {
    display: none;
}

@media (min-width: 1025px) and (max-width: 1100px) {
    .jc-header-inner {
        gap: clamp(24px, calc(10.667vw - 85.333px), 32px);
    }

    .jc-nav-main {
        gap: clamp(4px, calc(2.667vw - 23.333px), 6px);
    }

    .jc-nav-main a {
        padding-left: clamp(12px, calc(5.333vw - 42.667px), 16px);
        padding-right: clamp(12px, calc(5.333vw - 42.667px), 16px);
    }
}

/* === 네비 테마: white (season 페이지 전용 투명 네비바) === */
.jc-header.jc-header-theme-white,
.jc-header.jc-header-theme-transparent-dark,
body.jc-white-nav .jc-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    border-bottom: 0;
    background: transparent;
}

.jc-header.jc-header-theme-white.scrolled,
.jc-header.jc-header-theme-transparent-dark.scrolled,
body.jc-white-nav .jc-header.scrolled {
    box-shadow: 0 10px 24px rgba(15, 24, 43, 0.08);
    backdrop-filter: blur(5px);
}

.jc-header.jc-header-theme-white.scrolled,
body.jc-white-nav .jc-header.scrolled {
    background: rgba(0, 0, 0, 0.28);
    box-shadow: none;
}

.jc-header.jc-header-theme-transparent-dark.scrolled {
    background: rgba(255, 255, 255, 0.86);
    border-bottom: 1px solid #ebebeb;
}

.jc-header.jc-header-theme-white .jc-logo-image-dark,
body.jc-white-nav .jc-logo-image-dark {
    display: none;
}

.jc-header.jc-header-theme-transparent-dark .jc-logo-image-dark {
    display: block;
}

.jc-header.jc-header-theme-white .jc-logo-image-white,
body.jc-white-nav .jc-logo-image-white {
    display: block;
}

.jc-header.jc-header-theme-transparent-dark .jc-logo-image-white {
    display: none;
}

.jc-header.jc-header-theme-white .jc-nav a,
body.jc-white-nav .jc-nav a {
    color: #fff;
}

.jc-header.jc-header-theme-transparent-dark .jc-nav-main a {
    color: #616161;
}

.jc-header.jc-header-theme-transparent-dark .jc-nav-side a {
    color: #000;
}

.jc-header.jc-header-theme-white .jc-nav-main a.is-current,
.jc-header.jc-header-theme-white .jc-nav-main a[aria-current="page"],
.jc-header.jc-header-theme-white .jc-nav-main a:hover,
.jc-header.jc-header-theme-white .jc-nav-main a:focus-visible,
body.jc-white-nav .jc-nav-main a.is-current,
body.jc-white-nav .jc-nav-main a[aria-current="page"],
body.jc-white-nav .jc-nav-main a:hover,
body.jc-white-nav .jc-nav-main a:focus-visible {
    color: #191919;
    background: var(--jc-orange-200);
}

.jc-header.jc-header-theme-transparent-dark .jc-nav-main a.is-current,
.jc-header.jc-header-theme-transparent-dark .jc-nav-main a[aria-current="page"],
.jc-header.jc-header-theme-transparent-dark .jc-nav-main a:hover,
.jc-header.jc-header-theme-transparent-dark .jc-nav-main a:focus-visible {
    color: #191919;
    background: var(--jc-orange-200);
}

.jc-header.jc-header-theme-white .jc-nav-side a.is-current,
.jc-header.jc-header-theme-white .jc-nav-side a[aria-current="page"],
.jc-header.jc-header-theme-white .jc-nav-side a:hover,
.jc-header.jc-header-theme-white .jc-nav-side a:focus-visible,
body.jc-white-nav .jc-nav-side a.is-current,
body.jc-white-nav .jc-nav-side a[aria-current="page"],
body.jc-white-nav .jc-nav-side a:hover,
body.jc-white-nav .jc-nav-side a:focus-visible {
    color: var(--jc-orange-500);
}

.jc-nav-empty {
    color: #596680;
    font-size: 0.96rem;
}

.jc-nav-empty a {
    color: #263170;
    font-weight: 700;
}

.jc-menu-btn {
    display: none;
    position: relative;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    padding: 0;
    color: #fff;
}

.jc-menu-btn-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.jc-menu-btn-icon {
    position: relative;
    display: block;
    width: 24px;
    height: 2.4px;
    border-radius: 999px;
    background: #fff;
    transform-origin: center center;
    transition: background-color 0.3s ease-in, transform 0.3s ease-in;
}

.jc-menu-btn-icon:before,
.jc-menu-btn-icon:after {
    content: "";
    position: absolute;
    left: 50%;
    right: auto;
    width: 24px;
    height: 2.4px;
    border-radius: 999px;
    background: #fff;
    transform: translateX(-50%);
    transition: top 0.3s ease-in, left 0.3s ease-in, transform 0.3s ease-in, width 0.3s ease-in;
}

.jc-menu-btn-icon:before {
    top: -8px;
}

.jc-menu-btn-icon:after {
    top: 8px;
}

.jc-menu-btn[aria-expanded="true"] .jc-menu-btn-icon {
    background: transparent;
}

.jc-menu-btn[aria-expanded="true"] .jc-menu-btn-icon:before {
    width: 31.45px;
    left: 50%;
    top: 0;
    transform: translateX(-50%) rotate(45deg);
}

.jc-menu-btn[aria-expanded="true"] .jc-menu-btn-icon:after {
    width: 31.45px;
    left: 50%;
    top: 0;
    transform: translateX(-50%) rotate(-45deg);
}

body.jc-nav-open {
    overflow: hidden;
}

#wrapper {
    min-width: 0;
    padding: 0;
}

#container_wr {
    width: 100%;
    max-width: none;
    margin: 0;
    box-sizing: border-box;
}

#container_wr:after {
    content: "";
    display: block;
    clear: both;
}

#container {
    position: relative;
    float: none;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: 1em;
}

/* 게시판(목록/보기/쓰기/댓글/갤러리) 전용 레이아웃 */
#container #bo_list,
#container #bo_gall,
#container #bo_v,
#container #bo_w,
#container #bo_vc {
    width: min(1140px, calc(100% - 40px)) !important;
    margin: 60px auto 22px;
}

#aside {
    display: none !important;
}

/* Shared banner layouts (home carousel / nav-main content banners) */
.jc-banner-line {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 44px;
    padding: 12px;
    gap: 12px;
    background: #000;
}

.jc-banner-line p {
    margin: 0;
    font-family: "Pretendard", "SUIT Variable", "Noto Sans KR", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Main home banner */
.jc-banner--home {
    --jc-home-banner-overlay: var(--jc-deemed-100);
    /* Side space makes the prev arrow + copy block + next arrow match .jc-home-who-inner. */
    --jc-banner-side-space: max(80px, calc((100% - 1200px) / 2));
    position: relative;
    isolation: isolate;
    z-index: 50;
    width: 100%;
    /* Figma PC Banner / Main: 1440x680. Keep the next banner line visible on tall desktop viewports. */
    height: clamp(560px, calc(100vh - 66px), 680px);
    height: clamp(560px, calc(100dvh - 66px), 680px);
    margin: 0 auto;
    padding: 120px var(--jc-banner-side-space) 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 0;
    overflow: hidden;
    background-color: #141414;
    background-image:
        linear-gradient(0deg, var(--jc-deemed-100), var(--jc-deemed-100)),
        var(--jc-home-banner-image);
    background-position: var(--jc-home-banner-position, center center);
    background-size: var(--jc-home-banner-size, cover);
    background-repeat: no-repeat;
}

.jc-banner-bg-stack {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: #141414;
}

.jc-banner-bg {
    position: absolute;
    inset: 0;
    background-color: #141414;
    background-image:
        linear-gradient(0deg, var(--jc-home-banner-overlay), var(--jc-home-banner-overlay)),
        var(--jc-banner-layer-image, var(--jc-home-banner-image));
    background-position: var(--jc-home-banner-position, center center);
    background-size: var(--jc-home-banner-size, cover);
    background-repeat: no-repeat;
    opacity: 0;
    transform: translateZ(0);
    will-change: opacity;
}

.jc-banner-bg-current {
    opacity: 1;
}

.jc-banner-bg-next {
    transition: opacity 0.7s ease;
}

.jc-banner--home.is-bg-changing .jc-banner-bg-next {
    opacity: 1;
}

/* Frame 367: prev arrow + copy block + next arrow are the banner content group. */
.jc-banner-stage {
    flex: 1 1 0;
    min-height: 0;
    margin: 0 auto;
    width: 100%;
    max-width: 1200px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0;
    gap: 64px;
    z-index: 1;
}

.jc-banner-progress-wrap {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    margin-top: auto;
    width: 120px;
    height: 66px;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* icon 32×32, order 0 (prev) / 2 (next) */
.jc-banner-arrow {
    width: 32px;
    height: 32px;
    flex: none;
    flex-grow: 0;
    border: 0;
    background: transparent;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.jc-banner-arrow-prev {
    order: 0;
}

.jc-banner-arrow-next {
    order: 2;
}

/* 공통 원형 화살표 아이콘 (32x32, 회색 배경 + 흰색 화살표) */
.jc-icon-circle-arrow {
    position: relative;
    width: 16px;
    height: 26px;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.jc-icon-circle-arrow::before,
.jc-icon-circle-arrow::after {
    content: none;
}

.jc-icon-circle-arrow--next {
    background-image: url("../img/btn_main_back.svg");
}

.jc-icon-circle-arrow--prev {
    background-image: url("../img/btn_main_foward.svg");
}

.jc-icon-arrow-right {
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    background-color: currentColor;
    -webkit-mask: url("../img/common/hwt-btn-arrow.svg") center / 16px 16px no-repeat;
    mask: url("../img/common/hwt-btn-arrow.svg") center / 16px 16px no-repeat;
}

/* Gray outline CTA buttons (business) — jc-hww__btn, jc-home-hwt-more, jc-news__btn는 jc-btn--gray로 처리 */
#ctt.jc-business .jc-business-work__btn {
    border: 1px solid #9e9e9e;
    background: transparent;
    color: #9e9e9e;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

#ctt.jc-business .jc-business-work__btn:hover,
#ctt.jc-business .jc-business-work__btn:focus-visible {
    background: rgba(255, 255, 255, 0.1);
    border-color: #9e9e9e;
    color: #9e9e9e;
}

/* 배너 화살표는 공통 아이콘을 그대로 사용 */
.jc-banner-arrow-icon {
    display: inline-block;
}

/* Frame 366: 1024×274, flex column, gap 48px */
.jc-banner-copy {
    flex: 1 1 0;
    order: 1;
    width: auto;
    max-width: none;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    gap: 48px;
    transition: opacity 0.28s ease;
}

/* Frame 365: title + desc block → 16px between title and desc (via margin), 48px to button */
.jc-banner-title {
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0;
    gap: 0;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}

/* Subtitle Base: 32px, 120%, White */
.jc-banner-title span {
    display: flex;
    align-items: center;
    font-family: "Paperozi", "Pretendard", "SUIT Variable", "Noto Sans KR", sans-serif;
    font-size: 56px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.3px;
    color: #FFFFFF;
    word-break: keep-all;
}

/* Subheading: 218×56, 20px, 140%, White; 16px from title (Frame 365 gap) */
.jc-banner-desc {
    margin: -32px 0 0 0;
    width: auto;
    min-height: 0;
    flex: none;
    order: 1;
    flex-grow: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    font-family: "Pretendard", "SUIT Variable", "Noto Sans KR", sans-serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.5;
    color: #FFFFFF;
    letter-spacing: 0;
    word-break: keep-all;
}

.jc-banner-desc span {
    display: block;
    line-height: 1.5;
}

/* Button: 285×66, flex row, White border/background */
.jc-banner-cta {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0 16px 0 20px;
    gap: 6px;
    width: auto;
    min-width: 120px;
    max-width: 320px;
    height: 48px;
    flex: none;
    order: 1;
    flex-grow: 0;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid #FFFFFF;
    border-radius: 8px;
    font-family: "Pretendard", "SUIT Variable", "Noto Sans KR", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #FFFFFF;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

/* Only Text: Body Base */
.jc-banner-cta [data-banner-cta-label] {
    display: flex;
    align-items: center;
    flex: none;
    order: 0;
    flex-grow: 0;
    min-height: 0;
    font-family: "Pretendard", "SUIT Variable", "Noto Sans KR", sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #FFFFFF;
}

/* Icon: 20×20, Vector 6 = 16px white line */
.jc-banner-cta .jc-banner-cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    order: 1;
    flex-grow: 0;
    padding: 0;
}

.jc-banner-cta:hover,
.jc-banner-cta:focus-visible {
    background: rgba(255, 255, 255, 0.32);
    color: #FFFFFF;
}

.jc-banner-progress {
    z-index: 2;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 72px;
    min-width: 72px;
    padding: 6px 8px;
    border-radius: 9999px;
    background: #00000033;
    line-height: 0;
    box-sizing: border-box;
}

.jc-banner-dot {
    appearance: none;
    display: block;
    flex: none;
    order: 0;
    width: 6px;
    height: 6px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background: #ebebeb;
    cursor: pointer;
}

.jc-banner-dot.is-active {
    background: #fff;
}

.jc-banner-dot[aria-current="true"] {
    background: #fff;
}

.jc-banner-dot:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.8);
    outline-offset: 3px;
}

.jc-banner-fab {
    position: fixed;
    right: 36px;
    bottom: 36px;
    width: 120px;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    align-items: center;
    will-change: auto;
    animation: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

body.jc-footer-visible .jc-banner-fab {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.jc-fab-top {
    box-sizing: border-box;
    position: relative;
    width: 60px;
    height: 60px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 2px;
    flex: none;
    color: #fff;
    text-decoration: none;
    transition: color 0.22s ease-out;
}

.jc-fab-top:hover,
.jc-fab-top:focus-visible {
    color: #f4b540;
}

/* 흰 배경 구간: 기본 노란색, hover 흰색으로 반전 */
.jc-banner-fab[data-bg="light"] .jc-fab-top {
    color: #f4b540;
}

.jc-banner-fab[data-bg="light"] .jc-fab-top:hover,
.jc-banner-fab[data-bg="light"] .jc-fab-top:focus-visible {
    color: #fff;
}

.jc-fab-top-icon {
    width: 20px;
    height: 20px;
    display: block;
    background: transparent;
    -webkit-mask: url("../img/btn_top_white.svg") center calc(50% + 1px) / auto 18px no-repeat;
    mask: url("../img/btn_top_white.svg") center calc(50% + 1px) / auto 18px no-repeat;
    background-color: currentColor;
    transition: background-color 0.22s ease-out;
}

.jc-fab-top-icon:before {
    content: none;
}

.jc-fab-top span:last-child {
    width: 44px;
    min-height: 22px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    text-align: center;
    font-family: "Pretendard", "SUIT Variable", "Noto Sans KR", sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
}

.jc-fab-request {
    position: relative;
    width: 120px;
    height: 120px;
    padding: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex: none;
    border-radius: 9999px;
    background: #fff;
    box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transform: translate3d(0, 0, 0);
    will-change: transform, background-color, box-shadow;
    transition:
        background-color 0.28s ease-out,
        box-shadow 0.28s ease-out;
}

.jc-fab-request:before {
    content: none;
}

/* 벌 아이콘: 항상 원 중앙에 고정, 레이아웃 공간 차지 안 함 */
.jc-fab-request-bee {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 64.5px;
    height: 70.53px;
    object-fit: contain;
    display: block;
    transform: translate3d(-50%, -50%, 0) rotate(0deg);
    transform-origin: 50% 72%;
    will-change: transform, opacity;
    animation: jc-fab-bee-sway 1.56s linear infinite;
    transition:
        transform 0.22s cubic-bezier(0.32, 0, 0.18, 1),
        opacity 0.22s ease-out;
}

.jc-fab-request-text {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    order: 0;
    min-width: 42px;
    height: 17px;
    font-family: "Pretendard", "SUIT Variable", "Noto Sans KR", sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 1.4;
    color: #ffffff;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease-out;
}

.jc-fab-request-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: none;
    order: 1;
    width: 15px;
    height: 15px;
    opacity: 0;
    pointer-events: none;
    background: var(--jc-fab-arrow-url, url("../img/btn_arrow_right.svg")) center / 14px 14px no-repeat;
    transition: opacity 0.2s ease-out;
}

.jc-fab-request-arrow::before {
    content: none;
}

@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
    .jc-fab-request:hover {
        background: #f4b540;
        transform: translate3d(0, 0, 0);
        box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.05);
        animation: none;
    }

    .jc-fab-request:hover .jc-fab-request-bee {
        animation: none;
        transform: translate3d(-50%, -50%, 0) scale(0.9);
        opacity: 0;
    }

    .jc-fab-request:hover .jc-fab-request-text,
    .jc-fab-request:hover .jc-fab-request-arrow {
        opacity: 1;
        pointer-events: auto;
    }
}

.jc-fab-request:focus-visible {
    background: #f4b540;
    transform: translate3d(0, 0, 0);
    box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.05);
    animation: none;
}

.jc-fab-request:focus-visible .jc-fab-request-bee {
    animation: none;
    transform: translate3d(-50%, -50%, 0) scale(0.9);
    opacity: 0;
}

.jc-fab-request:focus-visible .jc-fab-request-text,
.jc-fab-request:focus-visible .jc-fab-request-arrow {
    opacity: 1;
    pointer-events: auto;
}

@keyframes jc-fab-bee-sway {
    0%,
    40% {
        transform: translate3d(-50%, -50%, 0) rotate(11deg);
    }

    40% {
        animation-timing-function: cubic-bezier(0.34, 0, 0.18, 1);
    }

    44% {
        transform: translate3d(-50%, -50%, 0) rotate(0deg);
        animation-timing-function: cubic-bezier(0.34, 0, 0.18, 1);
    }

    48%,
    88% {
        transform: translate3d(-50%, -50%, 0) rotate(-11deg);
    }

    88% {
        animation-timing-function: cubic-bezier(0.34, 0, 0.18, 1);
    }

    92% {
        transform: translate3d(-50%, -50%, 0) rotate(0deg);
        animation-timing-function: cubic-bezier(0.34, 0, 0.18, 1);
    }

    96%,
    100% {
        transform: translate3d(-50%, -50%, 0) rotate(11deg);
    }
}

@keyframes jc-fab-float {
    0% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(0, -8px, 0);
    }

    100% {
        transform: translate3d(0, 0, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .jc-banner-bg-next {
        transition: none;
    }

    .jc-banner-fab {
        animation: none;
    }

    .jc-fab-request-bee {
        animation: none;
    }
}

#ctt.jc-banner-main .jc-banner.jc-banner--page {
    --jc-banner-divider-min-width: 120px;
    --jc-banner-divider-max-width: 267px;
    --jc-banner-divider-basis: 267px;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 458px;
    margin: 0;
    padding: 0 36px 83px;
    border-bottom: 1px solid #ebebeb;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    color: #000000;
    background-color: #ffffff;
}

#ctt.jc-banner-main .jc-banner.jc-banner--page.has-background-image {
    color: #ffffff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: calc(458px + 67px);
}

#ctt.jc-banner-main .jc-banner.jc-banner--page.has-background-image::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.4);
}

#ctt.jc-banner-main .jc-banner__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1368px;
    padding: 0 min(120px, max(80px, calc((100% - 1200px) / 2)));
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
}

#ctt.jc-banner-main .jc-banner__text {
    margin: 0;
    flex: 0 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Pretendard", "SUIT Variable", "Noto Sans KR", sans-serif;
    font-size: 48px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-align: center;
    color: inherit;
    white-space: normal;
    word-break: keep-all;
}

#ctt.jc-banner-main .jc-banner__divider {
    display: block;
    width: 100%;
    min-width: var(--jc-banner-divider-min-width, 120px);
    max-width: var(--jc-banner-divider-max-width, 267px);
    flex: 1 1 var(--jc-banner-divider-basis, 267px);
    height: 0;
    border-top: 1px solid currentColor;
}

/* business banner desktop typography spec */
#ctt.jc-business.jc-banner-main .jc-banner__text {
    white-space: nowrap;
}

#ctt.jc-business.jc-banner-main .jc-banner__text:first-of-type {
    width: 353px;
    flex: 0 0 353px;
}

#ctt.jc-business.jc-banner-main .jc-banner__text:last-of-type {
    width: 444px;
    flex: 0 0 444px;
}

/* goods/portfolio/news/season/career banner desktop typography guard */
#ctt.jc-goods.jc-banner-main .jc-banner__text,
#ctt.jc-portfolio.jc-banner-main .jc-banner__text,
#ctt.jc-news.jc-banner-main .jc-banner__text,
#ctt.jc-season.jc-banner-main .jc-banner__text,
#ctt.jc-career.jc-banner-main .jc-banner__text {
    font-family: "Paperozi", "Pretendard", "SUIT Variable", "Noto Sans KR", sans-serif;
    font-size: 36px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0;
    white-space: nowrap;
}

#ctt.jc-news.jc-banner-main .jc-banner__text:first-of-type {
    width: 497px;
    flex: 0 0 497px;
}

#ctt.jc-news.jc-banner-main .jc-banner__text:last-of-type {
    width: 381px;
    flex: 0 0 381px;
}

@media (max-width: 1024px) {
    /* 태블릿: 헤더가 숨겨지므로 배너를 전체 화면 높이로 */
    .jc-banner--home {
        height: 100vh;
        height: 100dvh;
        padding: 0 32px 24px;
    }

    .jc-banner-stage {
        gap: 80px;
        width: 100%;
        max-width: 100%;
    }

    .jc-banner-copy {
        gap: 48px;
        max-width: 100%;
    }

    .jc-banner-title span {
        font-size: 32px;
        line-height: 120%;
    }

    .jc-banner-fab {
        right: 24px;
        bottom: 24px;
    }

    #ctt.jc-banner-main .jc-banner.jc-banner--page {
        --jc-banner-divider-min-width: 120px;
        --jc-banner-divider-max-width: 220px;
        --jc-banner-divider-basis: 220px;
        height: 380px;
        padding: 0 28px 64px;
    }

    #ctt.jc-banner-main .jc-banner.jc-banner--page.has-background-image {
        height: calc(380px + 67px);
    }

    #ctt.jc-banner-main .jc-banner__inner {
        padding: 0 56px;
    }

    #ctt.jc-banner-main .jc-banner__text {
        font-size: clamp(2rem, 4.3vw, 2.5rem);
    }

}

@media (min-width: 1025px) and (max-width: 1439px) {
    .jc-banner--home {
        height: clamp(560px, calc(100vh - 66px), 680px);
        height: clamp(560px, calc(100dvh - 66px), 680px);
        padding: clamp(88px, 8vw, 120px) var(--jc-banner-side-space) 40px;
    }

    .jc-banner-stage {
        max-width: 1200px;
        gap: clamp(32px, calc(7.711vw - 47.02px), 64px);
    }

    .jc-banner-copy {
        gap: clamp(36px, calc(2.892vw + 6.38px), 48px);
    }

    .jc-banner-title span {
        font-size: clamp(38px, calc(4.337vw - 6.45px), 56px);
    }

    .jc-banner-desc {
        margin-top: clamp(-32px, calc(3.855vw - 71.52px), -16px);
        font-size: clamp(18px, calc(1.446vw + 3.18px), 24px);
    }
}

/* 태블릿·모바일: 배너 진행 점 노출 + FAB 크기 조정 */
@media (max-width: 1024px) {

    .jc-banner--home {
        padding: 0 80px 24px;
    }

    .jc-banner-progress-wrap {
        display: flex !important;
        width: 120px;
        height: 66px;
        padding: 24px;
    }

    .jc-banner-progress {
        display: inline-flex !important;
    }

    .jc-banner-fab {
        right: 24px;
        bottom: 24px;
        width: 90px;
    }

    .jc-fab-top {
        display: none !important;
    }

    .jc-fab-request {
        width: 90px;
        height: 90px;
        box-shadow: 0 -9px 22.5px rgba(0, 0, 0, 0.05);
    }

    .jc-fab-request-bee {
        width: 48.375px;
        height: 52.9px;
    }

    /* Figma footer type=tab: 800px frame, 80px side padding, 180×18.39px logo */
    .jc-footer-logo-image-wrap {
        max-width: 180px;
        height: 18.39px;
    }

    .jc-footer-logo-image {
        width: auto;
        height: 18.39px;
        max-width: 100%;
        object-fit: contain;
    }
}

/* 모바일 전용 FAB (Figma 360px, 52px 원형 버튼 기준) */
@media (max-width: 640px) {
    .jc-banner-fab {
        right: 16px;
        bottom: 16px;
        width: 52px;
    }

    .jc-fab-request {
        width: 52px;
        height: 52px;
        background: #fff;
        box-shadow: 0 -4.5px 11.25px rgba(0, 0, 0, 0.05);
    }

    .jc-fab-request-bee {
        width: 24.188px;
        height: 26.45px;
    }

    .jc-fab-request-text {
        display: none;
    }

    .jc-fab-request-arrow {
        display: none;
    }

    .jc-fab-top {
        width: 48px;
        height: 48px;
        padding: 6px 8px;
        justify-content: center;
    }

    .jc-fab-top-icon {
        width: 16px;
        height: 16px;
        -webkit-mask-size: auto 14px;
        mask-size: auto 14px;
        -webkit-mask-position: center calc(50% + 1px);
        mask-position: center calc(50% + 1px);
    }

    .jc-fab-top span:last-child {
        min-height: 14px;
        font-size: 12px;
    }
}

@media (max-width: 768px) {

    /* bannerLine - tablet */
    .jc-banner-line {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 12px;
        gap: 12px;
        width: 100%;
        max-width: none;
        height: 44px;
        min-height: 44px;
        margin: 0;
        background: #000000;
        flex: none;
        align-self: stretch;
        flex-grow: 0;
    }

    .jc-banner-line p {
        width: 426px;
        max-width: 100%;
        height: 20px;
        font-family: "Pretendard", "SUIT Variable", "Noto Sans KR", sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 140%;
        display: flex;
        align-items: center;
        color: #FFFFFF;
        flex: none;
        flex-grow: 0;
        text-align: center;
    }

    /* 태블릿(~768px): 헤더가 숨겨지므로 배너를 전체 화면 높이로 */
    .jc-banner--home {
        --jc-home-banner-overlay: var(--jc-deemed-200);
        height: 100vh;
        height: 100dvh;
        padding: 0;
        gap: 0;
        background-color: #141414;
        background-image:
            linear-gradient(0deg, var(--jc-deemed-200), var(--jc-deemed-200)),
            var(--jc-home-banner-image);
        background-position: var(--jc-home-banner-position, center center);
        background-size: var(--jc-home-banner-size, cover);
        background-repeat: no-repeat;
    }

    /* Tablet: Frame 367 arrows hidden; Frame 366 → 584×256 */
    .jc-banner-stage {
        flex: 1 1 0;
        max-width: 100%;
        width: 100%;
        min-height: 0;
        padding: 0 80px;
        gap: 0;
    }

    .jc-banner-arrow {
        display: none;
    }

    .jc-banner-copy {
        max-width: 689.85px;
        width: 100%;
        gap: 32px;
    }

    .jc-banner-title {
        gap: 0;
    }

    .jc-banner-title span {
        font-size: 44px;
        line-height: 1.3;
        letter-spacing: 0;
    }

    .jc-banner-desc {
        margin-top: 0;
        width: auto;
        min-height: 0;
        font-size: 20px;
        line-height: 1.5;
    }

    .jc-banner-cta {
        width: auto;
        height: 48px;
        padding: 0 16px 0 20px;
        gap: 6px;
        font-size: 16px;
        font-weight: 400;
        line-height: 150%;
    }

    .jc-banner-cta [data-banner-cta-label] {
        font-size: 16px;
        font-weight: 400;
        line-height: 150%;
        min-height: 0;
    }

    .jc-banner-progress-wrap {
        display: flex !important;
        width: 96px;
        height: 56px;
        padding: 16px 12px 24px;
    }

    .jc-banner-progress {
        display: inline-flex !important;
    }

    #ctt.jc-banner-main .jc-banner.jc-banner--page {
        --jc-banner-divider-min-width: 200px;
        --jc-banner-divider-max-width: 200px;
        --jc-banner-divider-basis: 200px;
        height: 304px;
        padding: 0 12px 32px;
    }

    #ctt.jc-banner-main .jc-banner.jc-banner--page.has-background-image {
        height: calc(304px + 67px);
    }

    #ctt.jc-banner-main .jc-banner__inner {
        width: 100%;
        padding: 0;
        gap: 32px;
        min-height: 34px;
    }

    #ctt.jc-banner-main .jc-banner__text {
        font-size: 24px;
        font-weight: 700;
        line-height: 1.4;
        white-space: nowrap;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 1 auto;
    }

    #ctt.jc-business.jc-banner-main .jc-banner__text:first-of-type,
    #ctt.jc-business.jc-banner-main .jc-banner__text:last-of-type {
        width: auto;
        flex: 0 1 auto;
    }

    #ctt.jc-goods.jc-banner-main .jc-banner__text,
    #ctt.jc-portfolio.jc-banner-main .jc-banner__text,
    #ctt.jc-news.jc-banner-main .jc-banner__text,
    #ctt.jc-season.jc-banner-main .jc-banner__text,
    #ctt.jc-career.jc-banner-main .jc-banner__text {
        font-family: "Paperozi", "Pretendard", "SUIT Variable", "Noto Sans KR", sans-serif;
        white-space: nowrap;
    }

    #ctt.jc-news.jc-banner-main .jc-banner__text:first-of-type,
    #ctt.jc-news.jc-banner-main .jc-banner__text:last-of-type {
        width: auto;
        flex: 0 1 auto;
    }
}

@media (max-width: 640px) {

    /* bannerLine - mobile: 전체 폭 검정 바, 텍스트 가운데 정렬 */
    .jc-banner-line {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 41px;
        padding: 12px 16px;
        gap: 12px;
        background: #000000;
        box-sizing: border-box;
    }

    .jc-banner-line p {
        margin: 0;
        width: 100%;
        max-width: 100%;
        min-height: 17px;
        font-family: "Pretendard", "SUIT Variable", "Noto Sans KR", sans-serif;
        font-weight: 400;
        font-size: 12px;
        line-height: 140%;
        color: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Mobile: 헤더가 숨겨지므로 배너를 전체 화면 높이로 */
    .jc-banner--home {
        --jc-home-banner-overlay: var(--jc-deemed-200);
        height: 100vh;
        height: 100dvh;
        padding: 0;
        gap: 0;
        background-color: #141414;
        background-image:
            linear-gradient(0deg, var(--jc-deemed-200), var(--jc-deemed-200)),
            var(--jc-home-banner-image);
        background-position: var(--jc-home-banner-position, center center);
        background-size: var(--jc-home-banner-size, cover);
        background-repeat: no-repeat;
    }

    .jc-banner-stage {
        flex: 1 1 0;
        margin: 0 auto;
        width: 100%;
        max-width: 100%;
        min-height: 0;
        padding: 0 40px;
        gap: 0;
    }

    .jc-banner-copy {
        max-width: 263px;
        width: 100%;
        gap: 24px;
    }

    .jc-banner-title {
        gap: 0;
    }

    .jc-banner-title span {
        font-size: 36px;
        line-height: 1.3;
        letter-spacing: 0;
    }

    .jc-banner-desc {
        margin-top: 0;
        width: auto;
        min-height: 0;
        font-size: 18px;
        line-height: 1.5;
    }

    .jc-banner-cta {
        width: auto;
        height: 32px;
        padding: 0 12px 0 16px;
        gap: 4px;
        font-size: 12px;
        font-weight: 400;
        line-height: 1.4;
        border-radius: 4px;
    }

    .jc-banner-cta [data-banner-cta-label] {
        font-size: 12px;
        font-weight: 400;
        line-height: 1.4;
        min-height: 0;
    }



    #ctt.jc-banner-main .jc-banner.jc-banner--page {
        --jc-banner-divider-min-width: 60px;
        --jc-banner-divider-max-width: 60px;
        --jc-banner-divider-basis: 60px;
        height: 131px;
        padding: 0;
    }

    #ctt.jc-banner-main .jc-banner.jc-banner--page.has-background-image {
        height: calc(131px + 67px);
    }

    #ctt.jc-banner-main .jc-banner__inner {
        width: 100%;
        padding: 32px 12px;
        gap: 6px;
        min-height: 84px;
    }

    #ctt.jc-banner-main .jc-banner__text {
        font-size: 14px;
        font-weight: 700;
        line-height: 1.4;
        white-space: nowrap;
    }

}

@media (max-width: 640px) {
    #ctt.jc-banner-main .jc-banner.jc-banner--page {
        height: 131px;
        padding: 0;
    }

    #ctt.jc-banner-main .jc-banner.jc-banner--page.has-background-image {
        height: calc(131px + 63px);
    }

    #ctt.jc-banner-main .jc-banner__inner {
        padding: 32px 12px;
        gap: 6px;
        min-height: 84px;
    }

    #ctt.jc-banner-main .jc-banner__text {
        font-size: 14px;
    }

    /* 요청 범위: season/portfolio/news/goods/career 모바일 배너 텍스트 축소 */
    #ctt.jc-goods.jc-banner-main .jc-banner__text,
    #ctt.jc-portfolio.jc-banner-main .jc-banner__text,
    #ctt.jc-news.jc-banner-main .jc-banner__text,
    #ctt.jc-season.jc-banner-main .jc-banner__text,
    #ctt.jc-career.jc-banner-main .jc-banner__text {
        font-size: 12px;
        line-height: 1.35;
    }

    #ctt.jc-banner-main .jc-banner__divider {
        width: 60px;
        min-width: 60px;
        flex-basis: 60px;
    }
}

@media (min-width: 481px) and (max-width: 640px) {
    .jc-banner-stage {
        max-width: 460px;
        padding: 0 20px;
        margin: 0 auto;
    }

    .jc-banner-copy {
        max-width: 420px;
    }

    .jc-banner-desc {
        width: 280px;
    }
}

.jc-footer {
    border-top: 0;
    background: var(--jc-navy);
    color: #fff;
    overflow: hidden;
}

.jc-footer-wrap {
    /* Figma footer: PC 1440/1200, tablet 800/640, mobile 360/320 */
    width: min(var(--jc-footer-content-max, 1200px), calc(100% - 160px));
    margin: 0 auto;
}

.jc-footer-inner {
    padding: 120px 0 0;
    display: flex;
    flex-direction: column;
    gap: 48px;
    align-items: stretch;
}

.jc-footer-content {
    display: flex;
    gap: clamp(160px, calc(100vw - 1109px), 331px);
    align-items: flex-start;
}

.jc-footer-logo {
    margin: 0;
    padding: 0;
    width: 240px;
    flex-shrink: 0;
}

.jc-footer-logo-image-wrap {
    position: relative;
    display: block;
    width: 100%;
}

.jc-footer-logo-image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.jc-footer-logo-image-white {
    display: none;
}

.jc-footer.jc-footer-dark .jc-footer-logo-image-dark,
.jc-footer[data-logo="white"] .jc-footer-logo-image-dark {
    display: none;
}

.jc-footer.jc-footer-dark .jc-footer-logo-image-white,
.jc-footer[data-logo="white"] .jc-footer-logo-image-white {
    display: block;
}

.jc-footer-body {
    flex: 1 1 0;
    min-width: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}

.jc-footer-social {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;
}

.jc-footer-social li {
    margin: 0;
    padding: 0;
}

.jc-footer-social a {
    width: 52px;
    height: 52px;
    box-sizing: border-box;
    border-radius: 999px;
    border: 1px solid var(--jc-navy);
    color: #4f4f4f;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    background: #fff;
    transition: box-shadow 0.2s ease;
    flex: 0 0 auto;
}

.jc-footer-social-icon {
    width: auto;
    height: auto;
    max-width: 20px;
    max-height: 20px;
    object-fit: contain;
    display: block;
    flex: 0 0 auto;
}

.jc-footer-social a:hover,
.jc-footer-social a:focus-visible {
    box-shadow: none;
}

.jc-footer-social a:hover .jc-footer-social-icon,
.jc-footer-social a:focus-visible .jc-footer-social-icon {
    /* filter: grayscale(1) brightness(0.28); */
}

.jc-footer-social-char {
    font-size: 1.9rem;
    line-height: 1;
    font-weight: 700;
}

.jc-footer-social-fallback {
    font-size: 1.25rem;
    text-transform: lowercase;
    letter-spacing: -0.01em;
}

.jc-footer-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: #fff;
    max-width: 709px;
}

.jc-footer-meta-mobile {
    display: none;
}

.jc-footer-meta-mobile p {
    margin: 0;
    font-family: "Pretendard", "SUIT Variable", "Noto Sans KR", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.4;
    color: #fff;
}

.jc-footer-meta-mobile a {
    color: inherit;
}

.jc-footer-company {
    margin: 0;
    font-family: "Pretendard", "SUIT Variable", "Noto Sans KR", sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.5;
    color: #fff;
    flex: none;
    order: 0;
    flex-grow: 0;
    white-space: nowrap;
}

.jc-footer-meta {
    margin: 0;
    font-family: "Pretendard", "SUIT Variable", "Noto Sans KR", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.4;
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 20px;
}

.jc-footer-meta span {
    display: inline-block;
    min-height: 20px;
    flex: none;
    flex-grow: 0;
}

.jc-footer-meta a {
    color: inherit;
}

.jc-footer-copy,
.jc-footer-note {
    margin: 0;
    font-family: "Pretendard", "SUIT Variable", "Noto Sans KR", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.4;
    color: #fff;
}

.jc-footer-policies {
    margin: 0;
    padding: 0;
    max-width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 6px 12px;
}

.jc-footer-policies a {
    font-family: "Pretendard", "SUIT Variable", "Noto Sans KR", sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.5;
    color: #fff;
    white-space: nowrap;
    text-decoration: none;
}

.jc-footer-slogan {
    width: 100%;
}

.jc-footer-slogan-wrap {
    width: 100%;
}

.jc-footer-slogan img {
    width: 100%;
    height: auto;
    display: block;
}

.jc-footer-policies a:hover,
.jc-footer-policies a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 2px;
}

body.jc-policy-modal-open {
    overflow: hidden;
}

@media (min-width: 1025px) and (max-width: 1279px) {
    .jc-footer-meta-contact span:first-child {
        flex-basis: 100%;
    }
}

.jc-policy-modal[hidden] {
    display: none;
}

.jc-policy-modal {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.jc-policy-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 14, 43, 0.65);
}

.jc-policy-modal__dialog {
    position: relative;
    width: min(860px, calc(100vw - 24px));
    max-height: min(80vh, 760px);
    background: #fff;
    color: #111;
    border-radius: 16px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.jc-policy-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.jc-policy-modal__title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.35;
    color: #111;
}

.jc-policy-modal__close {
    border: 0;
    background: #f2f4f8;
    color: #111;
    border-radius: 9999px;
    padding: 8px 14px;
    font-size: 14px;
    line-height: 1;
    font-weight: 700;
    cursor: pointer;
}

.jc-policy-modal__close:hover,
.jc-policy-modal__close:focus-visible {
    background: #dfe5ef;
}

.jc-policy-modal__body {
    padding: 20px 24px 24px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.jc-policy-modal__status {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: #555;
}

.jc-policy-modal__status-link {
    margin: 10px 0 0;
    font-size: 14px;
}

.jc-policy-modal__status-link a {
    color: #1f2d80;
    text-decoration: underline;
}

@media (max-width: 1024px) {
    /* 태블릿·모바일: 헤더(nav 바) 숨김 — 햄버거 버튼은 position:fixed 로 독립 표시 */
    .jc-header,
    .jc-header.jc-header-theme-white,
    .jc-header.jc-header-theme-transparent-dark,
    body.jc-white-nav .jc-header {
        position: static;
        top: auto;
        left: auto;
        right: auto;
        height: 0;
        min-height: 0;
        overflow: visible;
        border: 0;
        background: transparent;
        box-shadow: none;
    }


    .jc-header-wrap {
        width: 100%;
        padding: 0 40px;
        box-sizing: border-box;
    }

    .jc-header-inner {
        padding: 0;
        height: 0;
        min-height: 0;
        justify-content: space-between;
    }


    /* 1024px 이하에서는 로고를 숨깁니다. */
    .jc-logo {
        display: none;
    }

    .jc-menu-btn {
        --jc-menu-btn-size: 56px;
        --jc-menu-btn-icon-width: 24px;
        --jc-menu-btn-icon-height: 3px;
        --jc-menu-btn-icon-offset: 8px;
        --jc-menu-btn-icon-hover-top-width: 12px;
        --jc-menu-btn-icon-hover-middle-width: 16px;
        --jc-menu-btn-icon-hover-bottom-width: 24px;
        --jc-menu-btn-selected-icon-width: 31.45px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 40px;
        right: 40px;
        width: var(--jc-menu-btn-size);
        height: var(--jc-menu-btn-size);
        min-width: var(--jc-menu-btn-size);
        padding: 0;
        box-sizing: border-box;
        border-radius: 9999px;
        background: var(--jc-orange-500);
        z-index: 1301;
    }

    .jc-menu-btn-icon,
    .jc-menu-btn-icon:before,
    .jc-menu-btn-icon:after {
        width: var(--jc-menu-btn-icon-width);
        height: var(--jc-menu-btn-icon-height);
        border-radius: 999px;
    }

    .jc-menu-btn-icon:before {
        top: calc(0px - var(--jc-menu-btn-icon-offset));
    }

    .jc-menu-btn-icon:after {
        top: var(--jc-menu-btn-icon-offset);
    }

    .jc-menu-btn[aria-expanded="true"] .jc-menu-btn-icon:before,
    .jc-menu-btn[aria-expanded="true"] .jc-menu-btn-icon:after {
        width: var(--jc-menu-btn-selected-icon-width);
        left: 50%;
        right: auto;
        top: 0;
    }

    .jc-menu-btn[aria-expanded="true"] .jc-menu-btn-icon {
        background: transparent;
    }

    .jc-menu-btn[aria-expanded="true"] .jc-menu-btn-icon:before {
        transform: translateX(-50%) rotate(45deg);
    }

    .jc-menu-btn[aria-expanded="true"] .jc-menu-btn-icon:after {
        transform: translateX(-50%) rotate(-45deg);
    }

    .jc-header.jc-header-theme-white.jc-header-with-banner-line .jc-menu-btn {
        top: calc(var(--jc-header-offset, 44px) + 40px);
    }

    .jc-nav {
        --jc-nav-menu-font-size: clamp(17px, 2.5vw, 20px);
        --jc-nav-menu-gap: clamp(20px, 3.125vw, 28px);
        --jc-nav-menu-pad-top: clamp(72px, 10dvh, 96px);
        --jc-nav-menu-pad-bottom: clamp(32px, 5dvh, 48px);
        --jc-nav-menu-pad-x: clamp(48px, 7.8125vw, 80px);
        display: none;
        position: fixed;
        inset: 0;
        width: 100vw;
        height: 100dvh;
        margin-left: 0;
        border-radius: 0;
        border: 0;
        background: #fff;
        box-shadow: none;
        padding: calc(env(safe-area-inset-top, 0px) + var(--jc-nav-menu-pad-top)) var(--jc-nav-menu-pad-x) calc(env(safe-area-inset-bottom, 0px) + var(--jc-nav-menu-pad-bottom));
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: var(--jc-nav-menu-gap);
        max-height: 100dvh;
        overflow-y: auto;
        overscroll-behavior: contain;
        z-index: 1200;
        box-sizing: border-box;
    }

    .jc-nav:before {
        display: none;
        content: none;
    }

    .jc-nav.open {
        display: flex;
    }

    .jc-nav-main,
    .jc-nav-side {
        display: contents;
    }

    /* 모바일 메뉴에서는 HOME 링크 표시 */
    .jc-nav a.jc-nav-home {
        display: inline-flex;
    }

    .jc-nav a {
        min-height: unset;
        padding: 0;
        border-radius: 0;
        font-family: "Pretendard", "SUIT Variable", "Noto Sans KR", sans-serif;
        font-size: var(--jc-nav-menu-font-size);
        font-weight: 500;
        line-height: 1.4;
        letter-spacing: 0;
        text-align: center;
        color: #000;
        background: transparent;
        white-space: nowrap;
        width: fit-content;
        margin: 0 auto;
    }

    .jc-header.jc-header-theme-white .jc-nav a,
    .jc-header.jc-header-theme-transparent-dark .jc-nav a,
    body.jc-white-nav .jc-nav a {
        color: #000;
    }

    .jc-nav-main a,
    .jc-nav-side a {
        font-weight: 500;
    }

    .jc-nav-main a.is-current,
    .jc-nav-main a[aria-current="page"],
    .jc-nav-side a.is-current,
    .jc-nav-side a[aria-current="page"],
    .jc-header.jc-header-theme-white .jc-nav-main a.is-current,
    .jc-header.jc-header-theme-white .jc-nav-main a[aria-current="page"],
    .jc-header.jc-header-theme-white .jc-nav-side a.is-current,
    .jc-header.jc-header-theme-white .jc-nav-side a[aria-current="page"],
    body.jc-white-nav .jc-nav-main a.is-current,
    body.jc-white-nav .jc-nav-main a[aria-current="page"],
    body.jc-white-nav .jc-nav-side a.is-current,
    body.jc-white-nav .jc-nav-side a[aria-current="page"] {
        background: transparent;
        color: #000;
    }

    .jc-nav a:hover,
    .jc-nav a:focus-visible,
    .jc-header.jc-header-theme-white .jc-nav-main a:hover,
    .jc-header.jc-header-theme-white .jc-nav-main a:focus-visible,
    .jc-header.jc-header-theme-white .jc-nav-side a:hover,
    .jc-header.jc-header-theme-white .jc-nav-side a:focus-visible,
    body.jc-white-nav .jc-nav-main a:hover,
    body.jc-white-nav .jc-nav-main a:focus-visible,
    body.jc-white-nav .jc-nav-side a:hover,
    body.jc-white-nav .jc-nav-side a:focus-visible {
        background: transparent;
        color: var(--jc-orange-500);
    }

    .jc-nav-empty {
        color: #000;
        font-size: 1rem;
        line-height: 1.5;
        text-align: center;
    }

    .jc-nav-empty a {
        color: var(--jc-orange-500);
    }

    /* 그누보드 기본 min-width: 1200px 해제 → 태블릿/모바일 오른쪽 여백 방지 */
    #hd,
    #wrapper,
    #ft {
        min-width: 0;
    }

    /* 네비게이션(전체 메뉴) 오버레이가 열려 있을 때 FAB 숨김 */
    body.jc-nav-open .jc-banner-fab {
        display: none;
    }

    body.jc-nav-open {
        overflow: hidden;
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    #ctt.jc-inqury::before,
    #ctt.jc-guide::before,
    #ctt.jc-support::before,
    #ctt.jc-request::before,
    #ctt.jc-newsletter::before {
        content: "";
        display: block;
        width: 100%;
        height: 80px;
        box-sizing: border-box;
        background: #ffffff;
        border-bottom: 1px solid #ebebeb;
    }

    .jc-header.jc-header-no-banner .jc-menu-btn {
        --jc-menu-btn-size: 56px;
        --jc-menu-btn-icon-width: 24px;
        --jc-menu-btn-icon-height: 3px;
        --jc-menu-btn-icon-offset: 8px;
        top: 12px;
        right: 12px;
        padding: 8px;
    }
}

/* 태블릿 이하에서는 푸터 SNS 아이콘 hover 효과 제거 */
@media (max-width: 1024px) {
    .jc-footer-wrap {
        width: calc(100% - 160px);
        max-width: none;
        margin: 0 auto;
    }

    .jc-footer-inner {
        padding: 80px 0 0;
        box-sizing: border-box;
        gap: 32px;
        align-items: stretch;
    }

    .jc-footer-content {
        flex-direction: column;
        gap: 32px;
        min-height: 341px;
        padding: 0;
        box-sizing: border-box;
    }

    .jc-footer-logo {
        font-size: clamp(2.15rem, 8vw, 3.4rem);
        grid-column: auto;
        grid-row: auto;
        width: 180px;
    }

    .jc-footer-logo-image-wrap {
        width: 180px;
        height: 18.39px;
        min-height: 0;
    }

    .jc-footer-logo-image {
        width: 100%;
        height: auto;
        max-height: 18.39px;
        object-fit: contain;
    }

    .jc-footer-body {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: none;
        flex: none;
        min-height: 0;
        gap: 32px;
    }

    .jc-footer-social {
        width: auto;
        max-width: 100%;
        flex-wrap: nowrap;
        gap: 16px;
    }

    .jc-footer-social a {
        width: 42px;
        height: 42px;
        border-width: 0.75px;
    }

    .jc-footer-social-icon {
        max-width: 14px;
        max-height: 14px;
    }

    .jc-footer-info {
        grid-column: auto;
        grid-row: auto;
        max-width: none;
        gap: 6px;
        width: 100%;
    }

    .jc-footer-meta,
    .jc-footer-copy,
    .jc-footer-note {
        font-size: 13px;
        line-height: 1.4;
    }

    .jc-footer-meta {
        gap: 6px 20px;
        flex-wrap: nowrap;
        white-space: nowrap;
    }

    .jc-footer-meta span {
        min-height: 18.2px;
    }

    .jc-footer-company {
        font-size: 15px;
        line-height: 1.5;
    }

    .jc-footer-note {
        white-space: nowrap;
    }

    .jc-footer-policies {
        grid-column: auto;
        grid-row: auto;
        justify-self: auto;
        margin-top: 0;
    }

    .jc-footer-policies a {
        font-size: 12px;
        font-weight: 400;
    }

    .jc-footer-slogan-wrap,
    .jc-footer-slogan {
        width: 100% !important;
    }

    .jc-footer-slogan {
        font-size: clamp(36px, 6.7cqi, 48px) !important;
        letter-spacing: -0.04em !important;
        line-height: 0.82 !important;
        text-align: left !important;
        transform: none !important;
    }

    .jc-footer-social a:hover,
    .jc-footer-social a:focus-visible {
        box-shadow: none;
    }

    .jc-footer-social a:hover .jc-footer-social-icon,
    .jc-footer-social a:focus-visible .jc-footer-social-icon {
        /* filter: grayscale(1) brightness(0.28); */
    }
}

@media (max-width: 768px) {
    .jc-wrap {
        width: min(1140px, calc(100% - 28px));
    }

    .jc-logo {
        display: none;
    }

    /* 그누보드 기본 min-width: 1200px 해제 → 모바일 오른쪽 여백 방지 */
    #hd,
    #wrapper,
    #ft {
        min-width: 0;
    }

    #container_wr {
        width: 100%;
    }

    #wrapper {
        padding-top: 0;
    }

    #container {
        padding: 0;
        border-radius: 0;
    }

    .jc-footer-wrap {
        width: min(1200px, calc(100% - 160px));
        max-width: none;
        margin: 0 auto;
    }
}

@media (max-width: 640px) {
    :root {
        --jc-mobile-design-width: 360px;
        --jc-mobile-side: clamp(20px, 8.89vw, 32px);
        --jc-mobile-content-width: min(100%, var(--jc-mobile-design-width));
    }

    .jc-hww__btn .jc-hww__btn-label--desktop {
        display: none;
    }

    .jc-hww__btn .jc-hww__btn-label--mobile {
        display: flex;
    }

    .jc-wrap {
        width: calc(100% - 20px);
    }

    #container_wr {
        width: 100%;
    }

    .jc-header-wrap {
        width: calc(100% - 30px);
    }

    .jc-header-inner {
        padding: 0;
        height: 0;
        min-height: 0;
    }


    .jc-header.jc-header-theme-white.jc-header-with-banner-line {
        top: var(--jc-header-offset, 41px);
    }

    .jc-header.jc-header-content .jc-header-inner {
        min-height: 0;
    }


    .jc-header.jc-header-support {
        border-bottom: 0;
        box-shadow: none;
    }

    /* 모바일 헤더 min-height 58px, 버튼 28px 기준 상단 여백 유지 */
    .jc-header.jc-header-theme-white.jc-header-with-banner-line .jc-menu-btn {
        top: calc(var(--jc-header-offset, 41px) + 15px);
    }

    .jc-menu-btn {
        top: 15px;
        right: 15px;
        width: 28px;
        height: 28px;
        min-width: 28px;
        padding: 4px;
        box-sizing: border-box;
        border-radius: 9999px;
        background: var(--jc-orange-500);
    }

    .jc-menu-btn-icon,
    .jc-menu-btn-icon:before,
    .jc-menu-btn-icon:after {
        width: 12px;
        height: 1.5px;
    }

    .jc-menu-btn-icon:before {
        top: -4px;
    }

    .jc-menu-btn-icon:after {
        top: 4px;
    }

    .jc-menu-btn[aria-expanded="true"] .jc-menu-btn-icon:before,
    .jc-menu-btn[aria-expanded="true"] .jc-menu-btn-icon:after {
        width: 15px;
        top: 0;
    }

    .jc-header.jc-header-content .jc-menu-btn {
        top: 15px;
        right: 15px;
        width: 28px;
        height: 28px;
        min-width: 28px;
        padding: 4px;
    }

    .jc-header.jc-header-content .jc-menu-btn-icon,
    .jc-header.jc-header-content .jc-menu-btn-icon:before,
    .jc-header.jc-header-content .jc-menu-btn-icon:after {
        width: 12px;
        height: 1.5px;
    }

    .jc-header.jc-header-content .jc-menu-btn-icon {
        border-radius: 999px;
    }

    .jc-header.jc-header-content .jc-menu-btn-icon:before {
        top: -4px;
    }

    .jc-header.jc-header-content .jc-menu-btn-icon:after {
        top: 4px;
    }

    .jc-header.jc-header-content .jc-menu-btn[aria-expanded="true"] .jc-menu-btn-icon:before,
    .jc-header.jc-header-content .jc-menu-btn[aria-expanded="true"] .jc-menu-btn-icon:after {
        width: 15px;
        top: 0;
    }

    #ctt.jc-inqury::before,
    #ctt.jc-guide::before,
    #ctt.jc-support::before,
    #ctt.jc-request::before,
    #ctt.jc-newsletter::before {
        content: "";
        display: block;
        width: 100%;
        height: 52px;
        background: #ffffff;
    }

    .jc-logo {
        font-size: 1.35rem;
    }

    .jc-logo-image-wrap {
        width: 138px;
        height: 14px;
    }

    .jc-logo-image {
        width: 138px;
        height: 14px;
    }

    .jc-nav {
        padding: 0 0 48px;
        justify-content: center;
        gap: 24px;
    }

    .jc-nav:before {
        width: min(360px, 100%);
        min-height: 80px;
        flex-basis: 80px;
    }

    .jc-nav a {
        min-height: 0;
        font-size: var(--jc-nav-menu-font-size);
        line-height: 1.4;
    }

    #container {
        padding: 0;
    }

    .jc-footer {
        padding: 0 20px;
        box-sizing: border-box;
    }

    .jc-footer-wrap {
        width: 100%;
        max-width: none;
        padding: 0;
        margin: 0;
    }

    .jc-footer-inner {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        grid-template-columns: none;
        width: 100%;
        box-sizing: border-box;
        padding: 40px 0 0;
        gap: 24px;
    }

    .jc-footer-logo {
        font-size: 2.05rem;
        grid-column: auto;
        grid-row: auto;
        width: 120px;
    }

    .jc-footer-logo-image-wrap {
        width: 120px;
        max-width: 100%;
        min-height: 0;
        height: 12.26px;
    }

    .jc-footer-logo-image {
        width: 100%;
        height: auto;
        max-width: 100%;
        max-height: 12.26px;
        object-fit: contain;
    }

    .jc-footer-body {
        display: flex;
        flex-direction: column;
        flex: none;
        gap: 24px;
        width: 100%;
        max-width: none;
    }
    .jc-footer-content {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        padding: 0;
        gap: 24px;
        min-height: 0;
    }

    .jc-footer-social {
        grid-column: auto;
        grid-row: auto;
        width: auto;
        max-width: none;
        flex-wrap: nowrap;
        gap: 8px;
    }

    .jc-footer-info {
        grid-column: auto;
        grid-row: auto;
        width: 100%;
        max-width: none;
        gap: 6px;
    }

    .jc-footer-info .jc-footer-copy {
        margin-top: 0;
    }

    .jc-footer-social a {
        width: min(42px, calc((100vw - 72px) / 5));
        height: min(42px, calc((100vw - 72px) / 5));
        border-width: 0.75px;
    }

    .jc-footer-social-char {
        font-size: 1.2rem;
    }

    .jc-footer-social-icon {
        max-width: clamp(13px, 4vw, 15px);
        max-height: clamp(12px, 3.8vw, 14px);
    }

    .jc-footer-company {
        width: auto;
        min-height: 20px;
        font-size: 15px;
    }

    .jc-footer-meta,
    .jc-footer-copy,
    .jc-footer-note {
        font-size: 12px;
        line-height: 1.4;
    }

    .jc-footer-meta {
        display: none;
    }

    .jc-footer-meta-mobile {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .jc-footer-meta-mobile p {
        font-size: 12px;
        line-height: 1.4;
        max-width: 100%;
        overflow-wrap: break-word;
    }

    .jc-footer-meta span {
        display: block;
        min-height: 17px;
        line-height: 1.4;
        white-space: normal;
    }
    .jc-footer-meta .jc-footer-desktop-only {
        display: none;
    }

    .jc-footer-note {
        max-width: 100%;
        white-space: normal;
    }

    .jc-footer-policies {
        grid-column: auto;
        grid-row: auto;
        margin-top: 0;
    }

    .jc-footer-policies a {
        font-size: 12px;
        font-weight: 400;
        line-height: 1.4;
    }

    .jc-footer-slogan-wrap {
        width: 100% !important;
        height: calc((100vw - 40px) * 84.39453125 / 1366.51611328125);
        min-height: 17px;
        max-height: 38px;
        overflow: hidden;
    }

    .jc-footer-slogan {
        font-size: clamp(24px, 7.6cqi, 40px) !important;
        line-height: 0.82 !important;
        letter-spacing: -0.04em !important;
        text-align: left !important;
        transform: none !important;
        overflow: hidden;
        white-space: nowrap;
    }
}

/* common search bar: portfolio + goods */
.jc-search-bar {
    box-sizing: border-box;
    width: 244px;
    height: 44px;
    padding: 6px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #ebebeb;
    border-radius: 9999px;
    background: #f9f9f9;
    position: relative;
}

.jc-search-bar:focus-within {
    border-color: #9e9e9e;
}

.jc-search-bar__icon {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
}

.jc-search-bar__input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: "Pretendard", "SUIT Variable", "Noto Sans KR", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: #000000;
    padding-right: 28px;
    /* 검색어 취소 버튼 영역 확보 */
    appearance: none;
    -webkit-appearance: none;
}

.jc-search-bar__input::placeholder {
    color: #b4b4b4;
}

/* 브라우저 기본 search X 버튼 숨김 */
.jc-search-bar__input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

/* 검색어 취소 버튼 (Bounding box + cancel) - 공통 스타일 */
.jc-search-bar__cancel {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border: 0;
    padding: 0;
    border-radius: 50%;
    background-color: #000000;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    line-height: 0;
    display: none;
}

.jc-search-bar__cancel::before,
.jc-search-bar__cancel::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 10px;
    height: 1.6px;
    background: #ffffff;
    border-radius: 999px;
    transform-origin: center;
}

.jc-search-bar__cancel::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.jc-search-bar__cancel::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.jc-search-bar__cancel.is-visible {
    display: block;
}

/* ========== 전역 체크박스 디자인 (주황 #FFB84D + 흰색 체크) ========== */

/* .chk_box 패턴 (input + label > span) - 로그인, 게시판, 쇼핑 등 전체 */
body .chk_box {
    position: relative;
}

body .chk_box input[type="checkbox"] {
    position: absolute;
    z-index: -1;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    appearance: none;
    -webkit-appearance: none;
    clip-path: inset(50%);
    overflow: hidden;
}

body .chk_box input[type="checkbox"]+label {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: #676e70;
}

body .chk_box input[type="checkbox"]+label:hover {
    color: #2172f8;
}

body .chk_box input[type="checkbox"]+label span {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    display: block;
    width: 16px;
    height: 16px;
    background: #F7F7F7;
    border: 1px solid #9E9E9E;
    border-radius: 4px;
    box-sizing: border-box;
}

body .chk_box input[type="checkbox"]:checked+label {
    color: #000;
}

body .chk_box input[type="checkbox"]:checked+label span {
    background: #FFB84D;
    border-color: #FFB84D;
    background-image: none;
}

body .chk_box input[type="checkbox"]:checked+label span::after {
    content: "";
    position: absolute;
    box-sizing: border-box;
    left: 16.67%;
    right: 16.67%;
    top: 25%;
    bottom: 29.17%;
    border: solid #F7F7F7;
    border-width: 0 1.6px 1.6px 0;
    transform: rotate(45deg);
    box-sizing: border-box;
}

.chk_box input[type="checkbox"][disabled]+label {
    cursor: default;
    opacity: 0.7;
}

body .chk_box input[type="checkbox"][disabled]+label span {
    background: #F7F7F7;
    border-color: #9E9E9E;
}

body .chk_box input[type="checkbox"][disabled]:checked+label span {
    background: #F7F7F7;
    border-color: #9E9E9E;
}

body .chk_box input[type="checkbox"][disabled]:checked+label span::after {
    border-left-color: #828282;
    /* Gray-600 */
    border-bottom-color: #828282;
}

.selec_chk {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    opacity: 0;
    outline: 0;
    z-index: -1;
    overflow: hidden;
}

/* ========== 전역 라디오 버튼 디자인 (주황 #FFB84D 인디케이터) ========== */

/* 기본 radio 숨기기 */
body .chk_box input[type="radio"] {
    position: absolute;
    z-index: -1;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    appearance: none;
    -webkit-appearance: none;
    clip-path: inset(50%);
    overflow: hidden;
}

/* 라디오 라벨 정렬 (체크박스와 동일) */
body .chk_box input[type="radio"]+label {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: #676e70;
}

body .chk_box input[type="radio"]+label:hover {
    color: #2172f8;
}

/* 비선택 상태 (회색 원) */
body .chk_box input[type="radio"]+label span {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    display: block;
    width: 16px;
    height: 16px;
    box-sizing: border-box;
    background: #F7F7F7;
    /* Gray-100 BG */
    border: 1px solid #616161;
    /* Gray-700 */
    border-radius: 9999px;
}

/* 선택 상태 (주황 테두리 + 안쪽 주황 원) */
body .chk_box input[type="radio"]:checked+label {
    color: #000;
}

body .chk_box input[type="radio"]:checked+label span {
    background: #EBEBEB;
    /* Gray-300 */
    border-color: #FFB84D;
    /* Orange-400 */
}

body .chk_box input[type="radio"]:checked+label span::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #FFB84D;
    /* Orange-400 */
    border-radius: 9999px;
}

/* JC Checkbox + Chip (.jc-check-chip-wrap / .jc-check-chip-box) - 동일 디자인 */
.jc-check-chip-wrap {
    position: relative;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    padding: 0;
    gap: 12px;
    min-width: 0;
    min-height: 32px;
    cursor: pointer;
    vertical-align: middle;
    box-sizing: border-box;
}

.jc-check-chip-wrap input[type="checkbox"] {
    position: absolute;
    z-index: -1;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    appearance: none;
    -webkit-appearance: none;
    clip-path: inset(50%);
    overflow: hidden;
}

.jc-check-chip-box {
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0;
    gap: 10px;
    width: 16px;
    height: 16px;
    background: #F7F7F7;
    border: 1px solid #9E9E9E;
    border-radius: 4px;
    flex: none;
}

.jc-check-chip-wrap input[type="checkbox"]:checked+.jc-check-chip-box {
    background: #FFB84D;
    border-color: #FFB84D;
}

.jc-check-chip-wrap input[type="checkbox"]:checked+.jc-check-chip-box::after {
    content: "";
    position: absolute;
    box-sizing: border-box;
    width: 4px;
    height: 8px;
    left: 50%;
    top: 46%;
    border: solid #F7F7F7;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -50%) rotate(45deg);
    box-sizing: border-box;
}

.jc-check-chip-wrap input[type="checkbox"][disabled]+.jc-check-chip-box {
    background: #F7F7F7;
    border-color: #9E9E9E;
}

.jc-check-chip-wrap input[type="checkbox"][disabled]:checked+.jc-check-chip-box::after {
    border-left-color: #828282;
    /* Gray-600 */
    border-bottom-color: #828282;
}

.jc-check-chip-wrap .jc-chip {
    margin-left: 0;
}

/* Common input field (Figma form input) */
.jc-input-field {
    width: 100%;
    min-height: 76px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* 레이블 아래 여백은 jc-input-label margin-bottom으로 처리 */
    gap: 0;
    align-self: stretch;
}

.jc-input-label {
    margin: 0 0 8px 0;
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    font-family: "Pretendard", "SUIT Variable", "Noto Sans KR", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    color: #000000;
}

.jc-input-control {
    box-sizing: border-box;
    width: 100%;
    min-height: 46px;
    height: 46px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12px 16px;
    gap: 8px;
    background: #F9F9F9;
    border: 1px solid #EBEBEB;
    border-radius: 8px;
    align-self: stretch;
}

.jc-input-control input,
.jc-input-control textarea {
    flex: 1;
    min-width: 0;
    margin: 0;
    border: 0;
    padding: 0;
    background: transparent;
    font-family: "Pretendard", "SUIT Variable", "Noto Sans KR", sans-serif;
    font-size: 16px;
    line-height: 1.4;
    color: #000000;
}

.jc-input-control input {
    height: 22px;
}

.jc-input-control input::placeholder,
.jc-input-control textarea::placeholder {
    color: #B4B4B4;
}

.jc-input-control input:focus,
.jc-input-control textarea:focus {
    outline: none;
}

.jc-input-control:focus-within {
    border-color: #FFB84D;
    background: #FFFDFB;
}

/* Common radio group (Figma form radios) */
.jc-radio-group {
    margin: 0 0 8px;
    padding: 0;
    border: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.jc-radio-group legend {
    position: static;
    margin: 0 0 8px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: "Pretendard", "SUIT Variable", "Noto Sans KR", sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    color: rgba(0, 0, 0, 0.8);
    text-indent: 0;
    overflow: visible;
}

.jc-radio-group legend::after {
    content: "*";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: #F29712;
    font-size: 16px;
    line-height: 1;
}

.jc-radio-row {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.jc-radio-item {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    min-height: 22px;
    cursor: pointer;
}

/* Request page radio/checkbox visuals - managed globally */
.jc-radio-item input[type="radio"] {
    position: absolute;
    z-index: -1;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    appearance: none;
    -webkit-appearance: none;
    clip-path: inset(50%);
    overflow: hidden;
}

.jc-radio-item .jc-radio-visual {
    box-sizing: border-box;
    width: 16px;
    height: 16px;
    background: #F7F7F7;
    border: 1px solid #616161;
    border-radius: 9999px;
    position: relative;
    flex: 0 0 16px;
}

.jc-radio-item input[type="radio"]:checked+.jc-radio-visual {
    background: #EBEBEB;
    border-color: #FFB84D;
}

.jc-radio-item input[type="radio"]:checked+.jc-radio-visual::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 9999px;
    background: #FFB84D;
}

.jc-radio-item input[type="radio"]:focus-visible+.jc-radio-visual {
    outline: 2px solid var(--jc-primary-dark);
    outline-offset: 2px;
}

.jc-radio-text {
    font-family: "Pretendard", "SUIT Variable", "Noto Sans KR", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    color: rgba(0, 0, 0, 0.8);
    word-break: keep-all;
}

.jc-checkbox-item input[type="checkbox"] {
    position: absolute;
    z-index: -1;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    appearance: none;
    -webkit-appearance: none;
    clip-path: inset(50%);
    overflow: hidden;
}

.jc-checkbox-item .jc-checkbox-visual {
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0;
    gap: 10px;
    width: 16px;
    height: 16px;
    background: #F7F7F7;
    border: 1px solid #9E9E9E;
    border-radius: 4px;
    flex: none;
    order: 0;
    flex-grow: 0;
}

.jc-checkbox-item input[type="checkbox"]:checked+.jc-checkbox-visual {
    background: #FFB84D;
    border-color: #FFB84D;
}

.jc-checkbox-item input[type="checkbox"]:checked+.jc-checkbox-visual::after {
    content: "";
    position: absolute;
    box-sizing: border-box;
    left: 16.67%;
    right: 16.67%;
    top: 25%;
    bottom: 29.17%;
    border: solid #F7F7F7;
    border-width: 0 1.6px 1.6px 0;
    transform: rotate(45deg);
}

/* JC Chip common (Figma: chips) */
.jc-chip {
    box-sizing: border-box;
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    font-family: "Pretendard", "SUIT Variable", "Noto Sans KR", sans-serif;
    font-weight: 500;
    --jc-chip-min-height: 21px;
    --jc-chip-padding-x: 4px;
    --jc-chip-radius: 3px;
    --jc-chip-font-size: 14px;
    --jc-chip-line-height: 1.5;
    min-height: var(--jc-chip-min-height);
    padding: 0 var(--jc-chip-padding-x);
    border-radius: var(--jc-chip-radius);
    font-size: var(--jc-chip-font-size);
    line-height: var(--jc-chip-line-height);
}

.jc-chip--large {
    --jc-chip-min-height: 21px;
    --jc-chip-padding-x: 4px;
    --jc-chip-radius: 3px;
    --jc-chip-font-size: 14px;
    --jc-chip-line-height: 1.5;
}

.jc-chip--medium {
    --jc-chip-min-height: 18px;
    --jc-chip-padding-x: 4px;
    --jc-chip-radius: 3px;
    --jc-chip-font-size: 12px;
    --jc-chip-line-height: 1.4;
}

.jc-chip--small {
    --jc-chip-min-height: 16px;
    --jc-chip-padding-x: 4px;
    --jc-chip-radius: 2.25px;
    --jc-chip-font-size: 10.5px;
    --jc-chip-line-height: 1.4;
}

.jc-chip--responsive {
    --jc-chip-min-height: 21px;
    --jc-chip-padding-x: 4px;
    --jc-chip-radius: 3px;
    --jc-chip-font-size: 14px;
    --jc-chip-line-height: 1.5;
}

@media (max-width: 1024px) {
    .jc-chip--responsive {
        --jc-chip-min-height: 18px;
        --jc-chip-padding-x: 4px;
        --jc-chip-radius: 3px;
        --jc-chip-font-size: 12px;
        --jc-chip-line-height: 1.4;
    }
}

@media (max-width: 640px) {
    .jc-chip--responsive {
        --jc-chip-min-height: 16px;
        --jc-chip-padding-x: 4px;
        --jc-chip-radius: 2.25px;
        --jc-chip-font-size: 10.5px;
        --jc-chip-line-height: 1.4;
    }
}

.jc-chip.is-black {
    background: #000000;
    color: #ffffff;
}

.jc-chip.is-orange {
    background: var(--jc-primary-dark);
    color: #ffffff;
}

.jc-chip.is-gray {
    background: var(--jc-gray-300);
    color: #000000;
}

.jc-chip.is-yellow {
    background: var(--jc-primary);
    color: #ffffff;
}

.jc-chip.is-white {
    background: #f9f9f9;
    color: #000000;
    border: 1px solid #ebebeb;
}

.jc-chip.is-outline {
    background: #f9f9f9;
    color: #000000;
    border: 1px solid #ebebeb;
}

/* ==========================================================================
   Joyconnect Board Style Override (Renewal)
   ========================================================================== */

/* 1. 게시판 컨테이너 (Card Style) - List, Gallery, View, Write, Comment */
#container #bo_list,
#container #bo_gall,
#container #bo_v,
#container #bo_w,
#container #bo_vc,
.bo_sch_wrap {
    background-color: #ffffff;
    border: 1px solid #eef2f6;
    /* 연한 회색 보더 */
    border-radius: 16px;
    /* 둥근 모서리 */
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
    /* 부드러운 그림자 */
    padding: 40px;
    /* 넉넉한 여백 */
    margin-bottom: 80px;
    position: relative;
    z-index: 1;
}

/* 모바일 대응: 패딩 축소 */
@media (max-width: 768px) {

    #container #bo_list,
    #container #bo_gall,
    #container #bo_v,
    #container #bo_w,
    #container #bo_vc {
        padding: 20px;
        border-radius: 12px;
    }
}

/* 2. 게시판 테이블 (List Style) */
/* 상단 굵은 라인 */
.tbl_head01 table {
    border-top: 2px solid #101a2d;
    /* Joyconnect Dark Navy */
}

/* 헤더 스타일 */
.tbl_head01 thead th {
    padding: 16px 0;
    font-weight: 600;
    font-size: 0.95em;
    color: #101a2d;
    background-color: #f8f9fa;
    /* 아주 연한 회색 배경 */
    border-bottom: 1px solid #eef2f6;
    border-top: 0;
}

/* 바디 셀 스타일 */
.tbl_head01 tbody td {
    padding: 16px 10px;
    border-bottom: 1px solid #eef2f6;
    color: #4a5568;
    /* 다크 그레이 텍스트 */
    font-size: 0.95em;
    line-height: 1.5;
}

/* 호버 효과 */
.tbl_head01 tbody tr:hover td {
    background-color: #fcfcfc;
}

/* 제목 링크 스타일 */
.tbl_head01 .td_subject a {
    color: #101a2d;
    font-weight: 500;
    font-size: 1.05em;
    text-decoration: none;
    transition: color 0.2s;
}

.tbl_head01 .td_subject a:hover {
    color: var(--jc-primary-dark);
    /* Joyconnect Orange */
}

/* 3. 버튼 공통 스타일 (Figma 버튼 시스템: R6, Primary #FFA722 / Hover #F29712 / Pressed #FFB84D) */
a.btn,
.btn,
button.btn_submit,
input.btn_submit {
    border-radius: 6px;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.4;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    border: 0;
    cursor: pointer;
}

/* 메인 액션 버튼 (Figma btn_pretnedard: Normal #FFA722, Hover #F29712, Pressed #FFB84D) */
#bo_list .btn_submit,
#bo_w .btn_submit,
.btn_b02 {
    background-color: var(--jc-primary) !important;
    color: #ffffff !important;
    padding: 0 18px !important;
    height: 40px !important;
    line-height: 1.4 !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    border: none !important;
}

#bo_list .btn_submit:hover,
#bo_w .btn_submit:hover,
.btn_b02:hover {
    background-color: var(--jc-primary-dark) !important;
    box-shadow: 0 4px 12px rgba(255, 91, 37, 0.2);
}

#bo_list .btn_submit:active,
#bo_w .btn_submit:active,
.btn_b02:active {
    background-color: var(--jc-orange-400) !important;
}

/* 서브 액션 버튼 (Figma btn_white: 흰색 테두리) */
.btn_b01,
.btn_cancel {
    background-color: #ffffff !important;
    border: 1px solid #dcdcdc !important;
    color: #555555 !important;
    padding: 0 18px !important;
    height: 40px !important;
    line-height: 1.4 !important;
    font-size: 16px !important;
    font-weight: 500 !important;
}

.btn_b01:hover,
.btn_cancel:hover {
    background-color: #f9f9f9 !important;
    border-color: #b0b0b0 !important;
    color: #333333 !important;
}

/* 4. 게시판 보기 (View Style) */
/* 제목 */
#bo_v_title .bo_v_tit {
    font-size: 1.8rem;
    font-weight: 700;
    color: #101a2d;
    margin-bottom: 24px;
    line-height: 1.4;
    letter-spacing: -0.02em;
}

/* 작성 정보 (날짜, 조회수 등) */
#bo_v_info {
    border-bottom: 1px solid #eef2f6;
    padding-bottom: 20px;
    margin-bottom: 40px;
    color: #718096;
}

#bo_v_info strong {
    color: #2d3748;
    font-weight: 600;
}

/* 본문 내용 */
#bo_v_con {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #2d3748;
    margin-bottom: 60px;
}

/* 댓글 영역 */
.cmt_btn {
    background-color: #f8f9fa;
    border: 0;
    padding: 15px 20px;
    border-radius: 8px;
    margin-top: 40px;
    color: #4a5568;
    font-weight: 600;
}

#bo_vc article {
    border-bottom: 1px solid #eef2f6;
    padding: 24px 0;
}

/* 첨부파일/링크 박스 스타일링 */
#bo_v_file li,
#bo_v_link li {
    border: 1px solid #eef2f6 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    background-color: #fbfbfb;
    padding: 16px 20px !important;
    margin: 10px 0 !important;
    transition: all 0.2s;
}

#bo_v_file li:hover,
#bo_v_link li:hover {
    border-color: var(--jc-primary-dark) !important;
    background-color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

/* 5. 입력 폼 스타일 (Input, Textarea) - Write/Comment */
.frm_input,
textarea {
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    transition: border-color 0.2s, box-shadow 0.2s;
    background-color: #fff;
    font-size: 1rem;
    color: #2d3748;
    box-shadow: none !important;
}

.frm_input:focus,
textarea:focus {
    border-color: var(--jc-primary-dark) !important;
    /* 포커스 시 오렌지 */
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 91, 37, 0.1) !important;
}

/* 6. 페이지네이션 (Pagination) */
.pg_wrap {
    margin-top: 40px;
    text-align: center;
}

.pg_page,
.pg_current {
    display: inline-block;
    vertical-align: middle;
    width: 36px;
    height: 36px;
    line-height: 34px;
    /* border 고려 */
    border-radius: 50%;
    /* 원형 버튼 */
    margin: 0 4px;
    font-weight: 600;
    font-size: 14px;
    border: 1px solid transparent;
    background-color: transparent;
    color: #718096;
    text-align: center;
    padding: 0;
}

.pg_current {
    background-color: var(--jc-primary-dark);
    color: #ffffff;
    border-color: var(--jc-primary-dark);
}

.pg_page:hover {
    background-color: #f1f1f1;
    color: #2d3748;
    text-decoration: none;
}

/* 처음/이전/다음/마지막 버튼 아이콘화 */
.pg_start,
.pg_prev,
.pg_end,
.pg_next {
    background-color: #fff;
    border: 1px solid #e2e8f0;
    text-indent: -9999px;
    position: relative;
}

.pg_start:hover,
.pg_prev:hover,
.pg_end:hover,
.pg_next:hover {
    background-color: #f8f9fa;
    border-color: #cbd5e0;
}



@media (min-width: 641px) and (max-width: 1024px) {
    .jc-nav {
        justify-content: flex-start;
        align-items: stretch;
        gap: 48px;
        padding: 170px 80px 80px;
    }

    .jc-nav:before {
        content: none;
    }
}

/* ==========================================================================
   Joyconnect Policy Pages
   ========================================================================== */

.jc-policy-page {
    --jc-policy-navy: #101a2d;
    --jc-policy-orange: var(--jc-primary-dark);
    --jc-policy-text: #2f3f4f;
    --jc-policy-text-light: #5a6675;
    --jc-policy-border: #e4e8f0;
    --jc-policy-border-strong: #cfd6e2;
    --jc-policy-bg: #f7f7f7;
    --jc-policy-panel: #ffffff;
    width: min(1140px, calc(100% - 40px));
    margin: 0 auto;
    padding: 72px 0 120px;
    font-family: "Pretendard", "SUIT Variable", "Noto Sans KR", sans-serif;
    color: var(--jc-policy-text);
    line-height: 1.78;
    font-size: 16px;
    word-break: keep-all;
    overflow-wrap: break-word;
}

.jc-policy-page * {
    box-sizing: border-box;
}

.jc-policy-page .jc-policy-hero {
    margin-bottom: 32px;
    padding: 0 0 32px;
    border-bottom: 1px solid var(--jc-policy-border);
}

.jc-policy-page .jc-policy-eyebrow {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--jc-policy-orange);
}

.jc-policy-page .jc-policy-title {
    margin: 0;
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--jc-policy-navy);
}

.jc-policy-page .jc-policy-subtitle {
    max-width: 768px;
    margin: 20px 0 0;
    font-size: 17px;
    color: var(--jc-policy-text-light);
}

.jc-policy-page .jc-policy-card {
    padding: 56px 64px;
    border: 1px solid var(--jc-policy-border);
    border-radius: 28px;
    background: var(--jc-policy-panel);
    box-shadow: 0 20px 40px rgba(16, 26, 45, 0.05);
}

.jc-policy-page .jc-policy-intro {
    margin: 0 0 40px;
    padding: 0 0 28px;
    border-bottom: 2px solid var(--jc-policy-navy);
}

.jc-policy-page .jc-policy-article {
    margin-bottom: 48px;
}

.jc-policy-page .jc-policy-article:last-of-type {
    margin-bottom: 0;
}

.jc-policy-page .jc-policy-article-title {
    margin: 0 0 20px;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.01em;
    color: var(--jc-policy-navy);
}

.jc-policy-page .jc-policy-article p {
    margin: 0 0 12px;
}

.jc-policy-page .jc-policy-article p:last-child {
    margin-bottom: 0;
}

.jc-policy-page .jc-policy-article ul,
.jc-policy-page .jc-policy-article ol {
    margin: 12px 0;
    padding-left: 1.25em;
}

.jc-policy-page .jc-policy-article li {
    margin-bottom: 8px;
}

.jc-policy-page .jc-policy-article li:last-child {
    margin-bottom: 0;
}

.jc-policy-page .jc-policy-subheading {
    margin: 20px 0 10px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--jc-policy-navy);
}

.jc-policy-page .jc-policy-table-wrap {
    overflow-x: auto;
    margin: 18px 0;
    border: 1px solid var(--jc-policy-border);
    border-radius: 18px;
    background: #fff;
}

.jc-policy-page .jc-policy-table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.jc-policy-page .jc-policy-table th,
.jc-policy-page .jc-policy-table td {
    padding: 16px 18px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--jc-policy-border);
}

.jc-policy-page .jc-policy-table tr:last-child th,
.jc-policy-page .jc-policy-table tr:last-child td {
    border-bottom: 0;
}

.jc-policy-page .jc-policy-table th {
    width: 28%;
    background: #f9fafc;
    color: var(--jc-policy-navy);
    font-weight: 600;
}

.jc-policy-page .jc-policy-table td {
    color: var(--jc-policy-text-light);
}

.jc-policy-page .jc-policy-note {
    margin: 14px 0 0;
    padding: 14px 16px;
    border: 1px solid var(--jc-policy-border);
    border-radius: 14px;
    background: var(--jc-policy-bg);
    color: var(--jc-policy-text-light);
    font-size: 0.95rem;
}

.jc-policy-page .jc-policy-effective {
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid var(--jc-policy-border-strong);
    font-weight: 600;
    color: var(--jc-policy-navy);
}

.jc-policy-page .jc-policy-effective strong {
    color: var(--jc-policy-orange);
}

@media (max-width: 768px) {
    .jc-policy-page {
        width: 100%;
        padding: 24px 0 56px;
        font-size: 15px;
    }

    .jc-policy-page .jc-policy-card {
        padding: 32px 22px;
        border-radius: 20px;
        box-shadow: 0 12px 24px rgba(16, 26, 45, 0.05);
    }

    .jc-policy-page .jc-policy-subtitle {
        font-size: 16px;
    }

    .jc-policy-page .jc-policy-title {
        font-size: clamp(28px, 6vw, 40px);
    }

    .jc-policy-page .jc-policy-article-title {
        font-size: 1.32rem;
    }

    .jc-policy-page .jc-policy-table {
        min-width: 0;
    }
}

@media (max-width: 640px) {
    .jc-policy-page {
        width: 100%;
        padding: 8px 0 32px;
        font-size: 14px;
        line-height: 1.7;
    }

    .jc-policy-page .jc-policy-hero {
        margin-bottom: 18px;
        padding-bottom: 18px;
    }

    .jc-policy-page .jc-policy-eyebrow {
        margin-bottom: 8px;
        font-size: 11px;
        letter-spacing: 0.06em;
    }

    .jc-policy-page .jc-policy-title {
        font-size: 26px;
        line-height: 1.25;
    }

    .jc-policy-page .jc-policy-subtitle {
        margin-top: 12px;
        font-size: 14px;
        line-height: 1.6;
    }

    .jc-policy-page .jc-policy-card {
        padding: 22px 16px;
        border-radius: 14px;
        box-shadow: none;
    }

    .jc-policy-page .jc-policy-article {
        margin-bottom: 28px;
    }

    .jc-policy-page .jc-policy-intro {
        margin-bottom: 28px;
        padding-bottom: 20px;
    }

    .jc-policy-page .jc-policy-article-title {
        margin-bottom: 14px;
        font-size: 1.08rem;
        line-height: 1.45;
    }

    .jc-policy-page .jc-policy-article ul,
    .jc-policy-page .jc-policy-article ol {
        padding-left: 1.1em;
    }

    .jc-policy-page .jc-policy-table th,
    .jc-policy-page .jc-policy-table td {
        padding: 0;
        border-bottom: 0;
    }

    .jc-policy-page .jc-policy-table-wrap {
        margin: 14px 0;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    .jc-policy-page .jc-policy-table,
    .jc-policy-page .jc-policy-table tbody,
    .jc-policy-page .jc-policy-table tr,
    .jc-policy-page .jc-policy-table th,
    .jc-policy-page .jc-policy-table td {
        display: block;
        width: 100%;
    }

    .jc-policy-page .jc-policy-table {
        min-width: 0;
        font-size: 0.95rem;
    }

    .jc-policy-page .jc-policy-table tr {
        padding: 14px 14px 12px;
        border: 1px solid var(--jc-policy-border);
        border-radius: 12px;
        background: #ffffff;
    }

    .jc-policy-page .jc-policy-table tr+tr {
        margin-top: 10px;
    }

    .jc-policy-page .jc-policy-table th {
        width: 100%;
        margin: 0 0 6px;
        background: transparent;
        font-size: 0.88rem;
        line-height: 1.5;
    }

    .jc-policy-page .jc-policy-table td {
        color: var(--jc-policy-text);
        font-size: 0.94rem;
        line-height: 1.65;
    }

    .jc-policy-page .jc-policy-effective {
        margin-top: 32px;
        padding-top: 18px;
    }
}

/* iPad/tablet QA overrides: prevent page-title and overlay menu overflow. */
@media (max-width: 1279px) {
    html,
    body,
    .jc-shell {
        max-width: 100%;
        overflow-x: hidden;
    }
}

@media (max-width: 1024px) {
    .jc-nav {
        justify-content: flex-start;
        padding: calc(env(safe-area-inset-top, 0px) + var(--jc-nav-menu-pad-top, 112px)) var(--jc-nav-menu-pad-x, 80px) calc(env(safe-area-inset-bottom, 0px) + var(--jc-nav-menu-pad-bottom, 80px));
        gap: var(--jc-nav-menu-gap, 40px);
    }

    .jc-nav:before {
        display: none;
        content: none;
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    #ctt.jc-banner-main .jc-banner.jc-banner--page {
        height: 304px;
        padding: 0 24px 40px;
    }

    #ctt.jc-banner-main .jc-banner.jc-banner--page.has-background-image {
        height: 371px;
    }

    #ctt.jc-banner-main .jc-banner__inner {
        width: min(720px, calc(100% - 72px));
        padding: 0;
        gap: 20px;
    }

    #ctt.jc-banner-main .jc-banner__text {
        font-size: clamp(20px, 2.7vw, 28px);
        line-height: 1.35;
        white-space: normal;
        word-break: keep-all;
        flex: 0 1 auto;
    }

    #ctt.jc-banner-main .jc-banner__divider {
        min-width: 72px;
        max-width: 112px;
        flex: 0 1 96px;
    }
}

/* shared content-page banners: Figma desktop 1480:4178, tablet 1492:9518 / 1480:9160, mobile 1495:5398
   - mobile/tablet banner variants already embed the hamburger/nav zone inside the 131/291 banner frame
   - pages without a banner use a separate 52/80 top spacer instead (`#ctt::before`) */
#ctt.jc-banner-main .jc-banner.jc-banner--page.jc-banner--content-page {
    --jc-banner-divider-min-width: 72px;
    --jc-banner-divider-max-width: 398px;
    --jc-banner-divider-basis: 398px;
    box-sizing: border-box;
    height: 524px;
    padding: 0 36px 94px;
}

#ctt.jc-banner-main .jc-banner.jc-banner--page.jc-banner--content-page.has-background-image {
    height: 524px;
}

#ctt.jc-banner-main .jc-banner.jc-banner--page.jc-banner--content-page .jc-banner__inner {
    width: min(1368px, calc(100% - 72px));
    max-width: 1368px;
    min-height: 47px;
    padding: 0;
    gap: 32px;
}

#ctt.jc-banner-main .jc-banner.jc-banner--page.jc-banner--content-page .jc-banner__text {
    width: auto;
    flex: 0 0 auto;
    font-family: "Paperozi", "Pretendard", "SUIT Variable", "Noto Sans KR", sans-serif;
    font-size: clamp(28px, 2.5vw, 36px);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0;
    white-space: nowrap;
    word-break: keep-all;
}

#ctt.jc-banner-main .jc-banner.jc-banner--page.jc-banner--content-page .jc-banner__divider {
    width: auto;
    min-width: var(--jc-banner-divider-min-width, 72px);
    max-width: var(--jc-banner-divider-max-width, 398px);
    flex: 1 1 var(--jc-banner-divider-basis, 398px);
}

@media (min-width: 641px) and (max-width: 1024px) {
    .jc-header.jc-header-content:not(.jc-header-no-banner) .jc-menu-btn {
        --jc-menu-btn-size: 56px;
        --jc-menu-btn-icon-width: 24px;
        --jc-menu-btn-icon-height: 3px;
        --jc-menu-btn-icon-offset: 8px;
        top: 12px;
        right: 12px;
        padding: 8px;
    }

    #ctt.jc-banner-main .jc-banner.jc-banner--page.jc-banner--content-page,
    #ctt.jc-banner-main .jc-banner.jc-banner--page.jc-banner--content-page.has-background-image {
        --jc-banner-divider-min-width: 56px;
        --jc-banner-divider-max-width: 180px;
        --jc-banner-divider-basis: clamp(72px, 18vw, 180px);
        height: 291px;
        padding: 155px 36px 0;
    }

    #ctt.jc-banner-main .jc-banner.jc-banner--page.jc-banner--content-page .jc-banner__inner {
        width: min(728px, calc(100% - 72px));
        max-width: 728px;
        min-height: 136px;
        padding: 32px 0;
        box-sizing: border-box;
        gap: clamp(16px, 3vw, 32px);
    }

    #ctt.jc-banner-main .jc-banner.jc-banner--page.jc-banner--content-page .jc-banner__text {
        flex: 0 1 auto;
        font-size: clamp(22px, 3vw, 28px);
        line-height: 1.3;
        white-space: nowrap;
    }
}

@media (max-width: 640px) {
    #ctt.jc-banner-main .jc-banner.jc-banner--page.jc-banner--content-page,
    #ctt.jc-banner-main .jc-banner.jc-banner--page.jc-banner--content-page.has-background-image {
        height: calc(env(safe-area-inset-top, 0px) + 131px);
        padding: calc(env(safe-area-inset-top, 0px) + 46px) 0 0;
    }

    #ctt.jc-banner-main .jc-banner.jc-banner--page.jc-banner--content-page .jc-banner__inner {
        width: 100%;
        max-width: none;
        min-height: 85px;
        padding: 32px 12px;
        box-sizing: border-box;
        gap: clamp(4px, 1.2vw, 8px);
    }

    #ctt.jc-banner-main .jc-banner.jc-banner--page.jc-banner--content-page .jc-banner__text {
        width: auto;
        flex: 0 0 auto;
        font-size: clamp(14px, 4.3vw, 16px);
        white-space: nowrap;
    }

    #ctt.jc-banner-main .jc-banner.jc-banner--page.jc-banner--content-page .jc-banner__divider {
        width: auto;
        min-width: 0;
        max-width: none;
        flex: 1 1 auto;
    }
}

@media (max-width: 640px) {
    .jc-menu-btn {
        --jc-menu-btn-size: 28px;
        --jc-menu-btn-icon-width: 12px;
        --jc-menu-btn-icon-height: 1.5px;
        --jc-menu-btn-icon-offset: 4.5px;
        --jc-menu-btn-icon-hover-top-width: 6px;
        --jc-menu-btn-icon-hover-middle-width: 8px;
        --jc-menu-btn-icon-hover-bottom-width: 12px;
        --jc-menu-btn-selected-icon-width: 15px;
        top: calc(env(safe-area-inset-top, 0px) + 15.238px);
        right: calc(env(safe-area-inset-right, 0px) + 15.238px);
        padding: 4px;
    }

    .jc-header.jc-header-theme-white.jc-header-with-banner-line .jc-menu-btn {
        top: calc(var(--jc-header-offset, 44px) + 15.238px);
    }

    .jc-nav {
        --jc-nav-menu-font-size: clamp(15px, min(5vw, 2.8125dvh), 20px);
        --jc-nav-menu-gap: clamp(14px, min(6.666vw, 3.75dvh), 28px);
        --jc-nav-menu-pad-top: clamp(58px, min(22.78vw, 12.9dvh), 82px);
        --jc-nav-menu-pad-bottom: clamp(24px, min(11.111vw, 6.25dvh), 40px);
        --jc-nav-menu-pad-x: clamp(24px, 11.111vw, 40px);
        padding: calc(env(safe-area-inset-top, 0px) + var(--jc-nav-menu-pad-top)) var(--jc-nav-menu-pad-x) calc(env(safe-area-inset-bottom, 0px) + var(--jc-nav-menu-pad-bottom));
        gap: var(--jc-nav-menu-gap);
    }

    .jc-nav:before {
        display: none;
        content: none;
    }
}

@media (min-width: 641px) and (max-width: 1024px) and (max-height: 640px) {
    .jc-nav {
        --jc-nav-menu-font-size: clamp(15px, 2.8dvh, 18px);
        --jc-nav-menu-gap: clamp(14px, 3dvh, 22px);
        --jc-nav-menu-pad-top: clamp(56px, 10dvh, 90px);
        --jc-nav-menu-pad-bottom: clamp(20px, 5dvh, 36px);
        --jc-nav-menu-pad-x: clamp(40px, 6.25vw, 64px);
        padding: calc(env(safe-area-inset-top, 0px) + var(--jc-nav-menu-pad-top)) var(--jc-nav-menu-pad-x) calc(env(safe-area-inset-bottom, 0px) + var(--jc-nav-menu-pad-bottom));
        gap: var(--jc-nav-menu-gap);
    }
}

@media (max-width: 1024px) and (max-height: 520px) {
    .jc-menu-btn {
        --jc-menu-btn-size: 28px;
        --jc-menu-btn-icon-width: 12px;
        --jc-menu-btn-icon-height: 1.5px;
        --jc-menu-btn-icon-offset: 4.5px;
        --jc-menu-btn-icon-hover-top-width: 6px;
        --jc-menu-btn-icon-hover-middle-width: 8px;
        --jc-menu-btn-icon-hover-bottom-width: 12px;
        --jc-menu-btn-selected-icon-width: 15px;
        top: calc(env(safe-area-inset-top, 0px) + 15.238px);
        right: calc(env(safe-area-inset-right, 0px) + 15.238px);
        padding: 4px;
    }

    .jc-header.jc-header-theme-white.jc-header-with-banner-line .jc-menu-btn {
        top: calc(var(--jc-header-offset, 44px) + 15.238px);
    }

    .jc-nav {
        --jc-nav-menu-font-size: clamp(12px, 3.2dvh, 16px);
        --jc-nav-menu-gap: clamp(7px, 2.4dvh, 14px);
        --jc-nav-menu-pad-top: clamp(36px, 10dvh, 52px);
        --jc-nav-menu-pad-bottom: clamp(12px, 4dvh, 24px);
        --jc-nav-menu-pad-x: clamp(20px, 6.667vw, 24px);
        padding: calc(env(safe-area-inset-top, 0px) + var(--jc-nav-menu-pad-top)) var(--jc-nav-menu-pad-x) calc(env(safe-area-inset-bottom, 0px) + var(--jc-nav-menu-pad-bottom));
        gap: var(--jc-nav-menu-gap);
    }
}