/* ============ Base / Reset ============ */
*,
*::before,
*::after {
    box-sizing: unset; /* 성능·안정성 */
    margin: 0;
}
button{
outline: none;
}
button{
    border: none;
}
.leftflex{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 50%;
}
.rightflex{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 50%;
}
html, body {
    padding: 0;
    margin: 0;
}

ul, ol {
    list-style: none;
    padding: 0;
    margin: 0;
}

a {
    text-decoration: none;
    color: inherit;
}

html {
    scroll-behavior: smooth;
}

/* 접근성 유틸 (화면에서 숨기기) */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

/* ============ Layout Helpers ============ */
section{
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    flex-direction: column;
}

.pc-mobile { display: flex; }
.mobile-pc { display: none; }
.pc        { display: flex; }
.pc-inline { display: inline; }
.tablet    { display: none; }
.mobile    { display: none; }

.clearfix::before,
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

.flowhid { overflow: hidden; }
.hide    { display: none !important; }
.hideopa { opacity: 0 !important; }
.show    { opacity: 1 !important; }
.absol   { position: absolute; }
.rltv    { position: relative; }

.scrX{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.scrX .scrX_item{
    animation: marqueeX 20s linear infinite;
    width: 100%;
}
.scrX .scrX_item_absol {
    right: -100%;
    width: 100%;
}

.scrY{
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.scrY .scrY_item{
    animation: marqueeY 20s linear infinite;
    height: 100%;
}
.scrY .scrY_item_absol {
    bottom: -100%;
    width: 100%;
}

.flexrow{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}
.flexcol{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

/* ============ Fonts ============ */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;500;600;700&display=swap");

/* Pretendard – 각 굵기 분리 선언 (font-display: swap으로 FOUT 최소화) */
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TTTtangsbudaejjigaeB';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2212@1.0/TTTtangsbudaejjigaeB.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'TheJamsil5Bold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302_01@1.0/TheJamsil5Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

body {
    /* fluid type 기본값 – 기존 계산식 유지 */
    font-family: 'Pretendard','Noto Sans KR',system-ui,-apple-system,Segoe UI,Roboto,Apple SD Gothic Neo,'Noto Serif KR',sans-serif;
}

/* ============ Preload holder ============ */


/* ============ Animations / Keyframes ============ */
/* 기존 이름 유지 + 문법 오류 제거 */

@keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@keyframes marquee2 {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}
@keyframes marqueeX {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}
@keyframes marqueeY {
    from { transform: translateY(0); }
    to   { transform: translateY(-100%); }
}

@keyframes slick-circle { 0%{left:0;} 100%{left:99%;} }

@keyframes soul_out {
    0% { opacity: 0.7; }
    100% { opacity: 0; transform: translateY(-50%); }
}

@keyframes ddm3 {
    0% { transform: scale(1); }
    50% { transform: rotate(-2deg); }
    100% { transform: scale(1.05); }
}
@keyframes ddm4 {
    0% { transform: scale(1); }
    25% { transform: rotate(-2deg); }
    50% { transform: scale(1.05); }
    75% { transform: rotate(2deg); }
    100% { transform: scale(1); }
}

@keyframes rotate360 { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }

@keyframes rotate_img10deg {
    0%,49% { transform: rotate(10deg); }
    50%,99% { transform: rotate(-10deg); }
    100% { transform: rotate(10deg); }
}
@keyframes rotate_img5deg {
    0%,49% { transform: rotate(5deg); }
    50%,99% { transform: rotate(-5deg); }
    100% { transform: rotate(5deg); }
}

@keyframes opazoom {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.02); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
.opazoom { animation: opazoom 1.5s infinite; }

@keyframes ani_scale {
    0% { transform: scale(1); }
    50% { transform: matrix(1.1, 0.01, 0.01, 1.2, 0, 0); }
    100% { transform: scale(1); }
}
@keyframes zoom {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

@keyframes blk {
    0%,30% { opacity: 0; }
    31%,99% { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes blk2 {
    0%,49% { opacity: 0; }
    50%,99% { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes blk3 {
    0%,24% { opacity: 1; }
    25%,99% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes scaleOpa { 100% { transform: scale(1.1); opacity: 0; } }
@keyframes scaleOpa2 { 100% { transform: scale(1.4); opacity: 0; } }
@keyframes scaleOpa3 { 100% { transform: scale(1.3); opacity: 0; } }

@keyframes ball   { 0% { bottom: 0; } 100% { bottom: 20px; } }
@keyframes ddm    { 0% { transform: scale(1); } 50% { transform: matrix(1.05, 0.01, 0.01, 1.05, 0, -30); } 100% { transform: scale(1); } }
@keyframes ddm_m  { 0% { transform: scale(1); } 50% { transform: matrix(1.05, 0.01, 0.01, 1.05, 0, -15); } 100% { transform: scale(1); } }
@keyframes ddm_m2 { 0% { transform: scale(1); } 50% { transform: matrix(1.15, 0.01, 0.01, 1.15, 0, 30); } 100% { transform: scale(1); } }

@keyframes zoom2 { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }

@keyframes rotate_imageY { 0% { transform: rotateY(0); } 100% { transform: rotateY(360deg); } }

@keyframes ddm2   { 0% { transform: scale(1); } 50% { transform: translateY(20px); } 100% { transform: scale(1.02); } }
@keyframes ddm2X  { 0% { transform: scale(1); } 50% { transform: translateX(-100%); } 100% { transform: scale(1.02); } }
@keyframes ddm2Xhalf { 0% { transform: scale(1); } 50% { transform: translateX(-50%); } 100% { transform: scale(1.02); } }

@keyframes uitLineMove {
    0%   { stroke-dashoffset: 300.292; }
    100% { stroke-dashoffset: 110; }
}

@keyframes hand {
    0%   { transform: translateY(-0.5%); }
    25%  { transform: translateY(1%); }
    50%  { transform: translate(0.5%, -1%); }
    75%  { transform: translate(1%, 0.5%); }
    100% { transform: translate(1%, -1%); }
}
@keyframes hand2 {
    0%   { transform: translateY(2%); }
    25%  { transform: translateY(-1%); }
    50%  { transform: translate(-1%, 2%); }
    75%  { transform: translate(2%, 1%); }
    100% { transform: translateY(2%); }
}

@keyframes bg-position {
    0%   { background-position: bottom; }
    25%  { background-position: center; }
    50%  { background-position: inherit; }
    75%  { background-position: center; }
    100% { background-position: bottom; }
}

/* ❗️기존 smoke에 있던 random()은 CSS 문법이 아니므로 제거/치환 */
@keyframes smoke {
    0%   { transform: translate(0, 30%) rotate(0); opacity: 0.2; }
    25%  { transform: translate(10vw, 50vh) rotate(50deg) translateX(10px); opacity: 1; }
    50%  { transform: translate(25vw, 75vh) rotate(50deg) translateX(50px); opacity: 1; }
    75%  { transform: translate(40vw, 85vh) rotate(50deg) translateX(50px); opacity: 1; }
    100% { transform: translate(50vw, 200vh) rotate(0) translateX(70px); opacity: 0.2; }
}

@keyframes light {
    0%,31%,34%,39%,42%,47% { opacity: 0; }
    5%,30%,35%,38%,43%,46% { opacity: 0.4; }
    50%,55%,60%,67%,51%,54%,68%,100% { opacity: 1; }
    70% { opacity: 0.2; }
}

/* 떨어지는 효과 – 잘못된 transform 토큰 제거 */
@keyframes fall {
    0% {
        top: 0;
        opacity: 1;
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        transform-origin: center center;
    }
    100%{
        transform: rotateX(240deg) rotateY(400deg) rotateZ(310deg);
        transform-origin: center center;
        top: 100%;
        opacity: 0;
    }
}
@keyframes fall2 {
    0% {
        top: 0;
        opacity: 1;
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        transform-origin: center center;
    }
    100%{
        transform: rotateX(-240deg) rotateY(-400deg) rotateZ(-310deg);
        transform-origin: center center;
        top: 100%;
        opacity: 0;
    }
}

@keyframes backgroundchange {
    0%   { background: url(/images/con11_07.png) no-repeat center / contain; }
    25%  { background: url(/images/con11_08.png) no-repeat center / contain; }
    50%  { background: url(/images/con11_09.png) no-repeat center / contain; }
    75%  { background: url(/images/con11_10.png) no-repeat center / contain; }
    100% { background: url(/images/con11_07.png) no-repeat center / contain; }
}
@keyframes opa {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes backgroundchange_2 {
    0%   { background: url(/images/con08_07.png) no-repeat center / contain; }
    20%  { background: url(/images/con08_08.png) no-repeat center / contain; }
    40%  { background: url(/images/con08_09.png) no-repeat center / contain; }
    60%  { background: url(/images/con08_10.png) no-repeat center / contain; }
    80%  { background: url(/images/con08_11.png) no-repeat center / contain; }
    100% {
        background: url(/images/con08_07.png) no-repeat center / contain;
    }
}

@keyframes rotateAnimation {
    0% { transform: rotate(-1deg); }
    40% { transform: rotate(1deg); }
    60% { transform: rotate(2deg); }
    80% { transform: rotate(-1deg); }
    100% { transform: rotate(1deg); }
}

/* ============ Helpers ============ */
.rotate    { animation: rotate360 2s linear infinite; }
.pointer   { cursor: pointer; }
.blk       { animation: blk 1s infinite; }
.scaleopa1 { animation: scaleOpa 2s infinite; }
.scaleopa2 { animation: scaleOpa2 2s infinite; }

.main1 {
    top: 0;
    opacity: 0.3;
    width: 100%;
    z-index: 100011;
    pointer-events: none;
    margin-top: -25.2%;
}
.face.brandface.main{
    height: 33.5vw;
    background: url(/images/05_sub_01.jpg) no-repeat center / cover;
    justify-content: flex-start;
}
.con2{
    flex-direction: row;
    justify-content: flex-start !important;
}
.con2_top{
    margin-top: 7.7%;
    margin-left: 0%;
    width: 75%;
}
.con2_top_2nd{
    margin-top: 0.5%;
    margin-left: 0%;
    width: 75.5%;
    font-size: 2.8vw;
}
.con2_top_3rd{
    margin-top: 3.3%;
    margin-left: 0%;
    width: 75.3%;
    font-size: 1.3vw;
}
.con2_top_4th{
    width: 36%;
    padding-left: 2%;
    border-left: 1px solid var(--tc);
    margin-top: -3%;
}
.con2_top_4th p:nth-child(1){
    margin-bottom: 6%;
}
.con2_top_5th{
    width: 13.4383%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 3%;
    margin-left: -62%;
    margin-bottom: 7.3%;
}
.con2ab{
    right: 0;
    width: 37.6%;
    background: white;
    height: 100%;
    z-index: 1;
}
.con2abab2{
    width: 65.9218%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    top: 14%;
    left: -28%;
}
.con2abab2ab2{
    width: 22.0339%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    animation: ddm_m 2s infinite;
    top: 1%;
    left: -7%;
}
.con2abab{
    width: 83.1006%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    bottom: 0;
    left: 1%;
}
.con2{
    padding-bottom: 8%;
}
.con2ab {
    right: 0;
    width: 37.6%;
    background: white;
    height: 83%;
    z-index: 1;
    top: 0;
}
.con2abab2ab{
    width: 59.1102%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    top: 97%;
}

.con7_prev:after,.con7_next:after {
    content: unset !important;
}

.con7_prev {
    left: 1% !important;
    top: unset !important;
    width: 4vw !important;
    height: 3vw !important;
    border-radius: unset;
    overflow: hidden;
    left: 38.3% !important;
    bottom: 46%;
    transition: 0.4s background;
}
.con7_next{
    right: 1% !important;
    top: unset !important;
    width: 4vw !important;
    height: 3vw !important;
    border-radius: unset;
    overflow: hidden;
    transition: 0.4s background;
    right: 38.3% !important;

    bottom: 46%;

}
.swiper-pagination { position: relative; width: 100px; bottom: auto;}
.swiper-pagination-progressbar-fill {
    background: var(--mc) !important;
}
.swiper-pagination2 { position: relative !important;  width: calc(100% - 150px); height: 10px; bottom: auto; }
.pagination_container{
    position: absolute;
}
.swiper-pagination {
    position: absolute !important;
    bottom: auto !important;
    color: transparent !important;
    font-size: 1.3vw !important;
    font-family: var(--tf) !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;font-weight: 600;
    align-items: center !important;
    top: 20% !important;
    letter-spacing: 0.6vw !important;
    left: unset !important;
}
.swiper-pagination.swiper-pagination-fraction span{
    color: black !important;
}
.swiper-pagination-fraction .swiper-pagination-current{
    left: 16% !important;
    position: absolute;
}
.swiper-pagination-fraction .swiper-pagination-total{
    right: 16% !important;
    position: absolute;
}
.pagination_container {
    width: 58vw;
    height: 3vw;
    bottom: 2.3%;
    background: unset;
    display: flex
;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.swiper-pagination2{
    width: 50% !important;
    top: 4% !important;
    bottom: unset !important;
    background: rgb(140 140 140 / 47%) !important;
}
.swiper-pagination-progressbar-fill{
    background: var(--mc) !important;
}
.con3_top{
    width: 5.40682%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0.2%;
    overflow: hidden;
    margin-left: 0%;
}
.con4_top_4th_item1{
    z-index: 2;
}
.con4_top_4th_item2 {
    z-index: 3;
    position: absolute;
}
.faq_a .mf{
    font-size: 0.9vw;
}
.con4_top_4th_item3 {
    z-index: 4;
    position: absolute;
}
.con4_top_4th_item4 {
    z-index: 5;
    position: absolute;
}
.con4_top_4th_itemabcon{
    top: 120%;
}
.con3_top_2nd{
    margin-top: 1.3%;
    margin-left: 0%;
    font-size: 2.8vw;
}
.con6_mid_swiper_1_slide_p_con{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.con3_top_4th{
    margin-top: 3%;
    width: 150% !important;
    margin-left: 0%;
    margin-bottom: 2.5%;
}
.con3_top_4th_ab_2nd{
    margin-top: 0%;
    margin-left: 0%;
    left: 78%;
    white-space: nowrap;
    top: 59%;
}
.con3_top_4th_img{
    width: 36.0965%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
}
.con3_top_4th_ab{
    margin-top: 0%;
    margin-left: 0%;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    width: 40%;
    right: 77%;
    text-align: right;
    white-space: nowrap;
    top: 23%;
    flex-direction: column;
}
.con3_top_4th_ab1{
    margin-bottom: 2%;
}

.pagination_container {
    width: 17vw;
    height: 3vw;
    bottom: unset;
    background: unset;
    display: flex
;
    align-items: center;
    justify-content: center;
    z-index: 2;
    rotate: 90deg;
    top: 65.7%;
    left: 35.3%;
}



/* 텍스트 블록 기본 비노출(이미지는 그대로) */
.con6_mid_swiper_1 .con6_mid_swiper_1_slide .con3_top_4th_ab,
.con6_mid_swiper_1 .con6_mid_swiper_1_slide .con3_top_4th_ab_2nd {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .5s ease, transform .6s ease;
    pointer-events: none; /* 클릭 막기(선택) */
}

/* 활성(가운데) 슬라이드에서만 노출 */
.con6_mid_swiper_1 .swiper-slide-active .con3_top_4th_ab,
.con6_mid_swiper_1 .swiper-slide-active .con3_top_4th_ab_2nd {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* 살짝 더 부드럽게: 제목 -> 본문 순서감 주고 싶다면 딜레이 분리 */
.con6_mid_swiper_1 .swiper-slide-active .con3_top_4th_ab  { transition-delay: .05s; }
.con6_mid_swiper_1 .swiper-slide-active .con3_top_4th_ab_2nd { transition-delay: .12s; }

.con4_top{
    margin-top: 8%;
    margin-left: 0%;
    font-size: 1.6vw;
}
.con4_top_2nd{
    margin-top: 0%;
    margin-left: 0%;
    font-size: 2.8vw;
}
.con4_top_3rd{
    margin-top: 3%;
    margin-left: 0%;
    text-align: center;
}
.con4_top_4th{
    margin-top: 3.3%;
    margin-left: 0%;
}
.con4_top_4th_item{
    width: 75.43% !important;
    border: 1px solid var(--mc);
    height: 22.4vw;
    background: white;
    justify-content: flex-start !important;
}
.con4_top_4th_item_top{
    margin-top: 6%;
    margin-left: 0%;
    width: 88%;
}
.con4_top_4th_item_top_2nd{
    margin-top: 1%;
    margin-left: 0%;
    width: 88%;
    font-size: 1.84vw;
}
.con4_top_4th_item_top_3rd{
    margin-top: 3.6%;
    margin-left: 0%;
    text-align: right;
    white-space: nowrap;
    width: 43%;
    margin-left: -55%;
}
.con4_top_4th_itemab{
    width: 49.9652%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    left: 50%;
}
.con4_top_4th_itemab2{
    width: 6.95894%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    top: 39%;
}
.con4_top_4th_itemabab{
    width: 59.8886%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
}
.con4_top_4th_itemababab{
    width: 29.0698%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
}
.con4_top_4th_itemababab{
    width: 14.4186%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
}
.con4_top_4th_itemab4{
    width: 45.7203%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    left: 51%;
    bottom: 7%;
}





/* 전체 텍스트 기본색: 검정 */
.board_wrap{ color:#000; }

/* 상단 바(카운트 + 검색) 배경을 잿빛으로 */
.board_top {
    display: flex
;
    align-items: center;
    justify-content: space-between;
    gap: 2vw;
    margin-bottom: 1.2vw;
    background: var(--tc);
    padding: .3vw 1.2vw;
    border-radius: .4vw;
    width: 73.3%;
    margin-top: 6%;
}
.board_top .mf{ font-size: .9vw;; }

/* 검색창: 잿빛 배경 위에서 보이도록 텍스트/플레이스홀더는 검정 계열 */
.board_search{
    position: relative;
    display:flex; align-items:center;
    width: min(28vw, 440px);
    border-bottom: 1px solid rgba(0,0,0,.25);
    padding: .4vw 0;
    background: transparent; /* 바탕은 상단 바의 잿빛 사용 */
}
.board_search input{
    flex:1 1 auto; border:0; outline:0; background:transparent;
    color:#000; font-size:.9vw; padding:.2vw .4vw;
}
.board_search input::placeholder{ color: rgba(0,0,0,.45); }
.board_search button{ border:0; background:transparent; cursor:pointer; }
.board_search img{ width:1.2vw; height:auto; display:block; }

/* 표 헤더/본문: 모두 검정 텍스트 */
.board_tbl{ width:100%; border-collapse:collapse; table-layout:fixed; background:#fff; }
.board_tbl thead th{
    background: var(--sc);
    color:#000;                  /* ← 검정 */
    text-align:center;
    padding: 1.0vw .6vw;
    border-top: 2px solid rgba(0,0,0,.15);
    border-bottom: 2px solid rgba(0,0,0,.15);
    font-weight:700;
}
.board_tbl thead .mf{ font-size:1vw; }
.board_tbl tbody td{
    padding:1.0vw .6vw;
    border-bottom:1px solid rgba(0,0,0,.08);
    text-align:center;
    color:#000;                  /* ← 검정 */
}
.board_tbl tbody td.title{
    text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.board_tbl .mf{ font-size:.9vw; }

/* 핀/페이지네이션 아이콘 크기(vw 유지) */
.pin{ width:1.2vw; height:auto; display:inline-block; vertical-align:middle; }

/* 페이지네이션 번호도 검정 */
.page_numbers button{ border:0; background:transparent; cursor:pointer; font-size:.9vw; color:#000; }
.page_numbers button.active{ font-weight:700; border-bottom:2px solid currentColor; }

/* 버튼 아이콘(이전/다음) */
.page_btn{ border:0; background:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.page_btn img{ width:1.8vw; height:auto; display:block; }
.board_search img {
    width: 1.5vw;
    height: auto;
    display: block;
}
.board_tbl {
    width: 75%;
    border-collapse: collapse;
    table-layout: fixed;
    background: #fff;
}
.board_pagination{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1%;
    margin-bottom: 6.5%;
}
.page_btn img {
    width: 2.5vw;
    height: auto;
    display: block;
}
.pageNumbers button{
    padding: 0 1vw;
}

/* table-layout: fixed 유지 */
.board_tbl{ table-layout: fixed; }

/* 컬럼 폭 */
.board_tbl .col-no    { width: 8%;  }
.board_tbl .col-title { width: 56%; }
.board_tbl .col-author{ width: 17%; }
.board_tbl .col-date  { width: 19%; }

/* 제목 칼럼: 좌측 정렬 + 말줄임 유지 */
.board_tbl tbody td.title{
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* 컨테이너 */
.faq_wrap{ width: 70%; margin: 0 auto; padding: 1.2vw 0; }

/* 리스트: 좌우 보더 없음, 위·아래만 */
.faq_list{ list-style: none; margin: 0; padding: 0; }
.faq_item{ border-top: .08vw solid var(--mc); }
.faq_item:last-child{ border-bottom: .08vw solid var(--mc); }

/* 질문 행(Q) — Q/A 너비 동일(둘 다 100%) */
.faq_q{
    width: 100%;
    display: flex; align-items: center;
    gap: 1.2vw;
    padding: 1.2vw 0;
    background: transparent; border: 0; cursor: pointer; text-align: left;
    color: #000;
}

/* 이미지들은 div 래퍼 안에, 폭 지정 없음 — 위치는 margin만 */
.q_icon{ margin-left: 1.6vw; margin-right: .8vw; }
.q_icon img{ display: block; }

.toggle_btn{ margin-left: auto; margin-right: 1.2vw; }
.toggle_btn img{ display: block; }


.faq_q_title{ font-size: 1.1vw; line-height: 1.35; flex: 1 1 auto; }

/* 답변 패널(A) — 배경/보더, 처음엔 접힘 */
.faq_a{
    width: 100%;
    display: flex; align-items: flex-start; gap: 1vw;
    background: #f0f7ef;
    margin: .6vw 0 1.4vw 0;
    overflow: hidden;
    max-height: 0;                 /* 접힘 상태 */
    transition: max-height .28s ease, padding .2s ease, margin .2s ease;
    padding: 0;                    /* 펼칠 때 JS가 높이만 조절 */
}

.a_icon{ margin-left: 1.6vw; margin-right: .8vw; }
.a_icon img{ display: block; }

.faq_a_inner{ padding: 1.2vw 1.6vw 1.2vw 0; } /* 텍스트 영역 패딩만 vw */


.faq_wrap li, .faq_wrap ul{
    width: 100%;
}
.faq_a {
    width: 100%;
    display: flex
;
    align-items: flex-start;
    gap: 1vw;
    background: #f0f7ef;
    border-top: .08vw solid #28552b3b;
    border-bottom: .08vw solid #28552b3b;
    margin: .6vw 0 1.4vw 0;
    overflow: hidden;
    max-height: 0;
    transition: max-height .28s ease, padding .2s ease, margin .2s ease;
    padding: 0;
}
.a_icon{
    width: 2.9985%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 4%;
    margin-left: 4.7%;
}
.faq_a {
    margin: 0;
}
.faq_a_inner{
    margin-top: 0%;
    margin-left: 0%;
    width: 64%;
}
.faq_a_inner {
    padding: 2.2vw 1.6vw 2.2vw 0;
}

.a_icon {
    width: 2.9985%;
    display: flex
;
    justify-content: center;
    align-items: center;
    margin-top: 3%;
    margin-left: 4.7%;
}

/* 기본: 정지 */
.toggle_btn img{
    display:block;
    transition: transform .2s ease;
    transform: rotate(0deg);
    transform-origin: 50% 50%;
}

/* 활성(열림) 상태: 시계방향 90도 회전 */
.faq_q[aria-expanded="true"] .toggle_btn img{
    transform: rotate(90deg);
}
.faq_wrap {
    width: 70%;
    margin: 0 auto;
    padding: 7.2vw 0;
}
/* ============ Reduced Motion (접근성) ============ */
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
    .scrX .scrX_item,
    .scrY .scrY_item { animation: none !important; }
}

.con4_con {
    padding-bottom: 6%;
}
.con4_top_4th_itemababab2{
    width: 29.1027%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    animation: scaleOpa2 infinite 1s linear;
}
.con4_top_4th_itemabab  > img{
    animation: scaleOpa infinite 2s linear;

}
.container{
    display: none;
}


.header_menu_1:nth-child(4) {
    font-weight: 700;
    color: var(--mc);
}

.header_menu_1:nth-child(4) .header_menu_1ab1 {
    bottom: 145%;
    width: 55%;
    display: flex
;
    justify-content: center;
    align-items: center;
    opacity: 1;
}
.header_menu_1:nth-child(4) .header_menu_1ab2 {
    top: 206%;
    width: 65%;
    display: flex
;
    opacity: 1;
    justify-content: center;
    align-items: center;
}


/* ============ Breakpoints ============ */
@media screen and (max-width: 1023px) {
    .pc        { display: none; }
    .tablet    { display: flex; }
    .pc-mobile { display: none; }
    .mobile-pc { display: flex; }
}

@media screen and (max-width: 599px) {
    .tablet { display: none; }
    .mobile { display: flex; }

    .con2_top {
        margin-top: 13.7%;
        margin-left: 0%;
        width: 75%;
        text-align: center;
    }

    .con2_top_2nd {
        margin-top: 2.5%;
        margin-left: 0%;
        width: 75.5%;
        font-size: 8.8vw;
        text-align: center;
    }
    .con2_top_3rd {
        margin-top: 4.3%;
        margin-left: 0%;
        width: 75.3%;
        font-size: 4.3vw;
        text-align: center;
    }

    .con2_top_4th {
        width: 76%;
        padding-left: 2%;
        border-left: unset;
        margin-top: 4%;
        text-align: center;

    }

    .con2_top_5th {
        width: 46.4383%;
        display: flex
    ;
        justify-content: center;
        align-items: center;
        margin-top: 6%;
        margin-left: 0;
        margin-bottom: 7.3%;
    }

    .con2_con {
        padding-bottom: 75%;
    }
    .con2ab {
        right: 0;
        width: 100%;
        background: white;
        height: 24%;
        z-index: 1;
        top: unset;
        bottom: 0;
    }
    .con2abab {
        width: 83.1006%;
        display: flex
    ;
        justify-content: center;
        align-items: center;
        margin-top: 0%;
        margin-left: 0%;
        bottom: 0;
        left: 15%;
    }
    .con2abab2 {
        width: 65.9218%;
        display: flex
    ;
        justify-content: center;
        align-items: center;
        margin-top: 0%;
        margin-left: 0%;
        top: -87%;
        left: 11%;
    }
    .con2abab2 {
        width: 65.9218%;
        display: flex
    ;
        justify-content: center;
        align-items: center;
        margin-top: 0%;
        margin-left: 0%;
        top: -87%;
        left: 11%;
    }
    .con3_top_2nd {
        margin-top: 2.3%;
        margin-left: 0%;
        font-size: 7.8vw;
    }
    .con3_top_4th_img {
        width: 89.0965%;
        display: flex
    ;
        justify-content: center;
        align-items: center;
        margin-top: 0%;
        margin-left: 0%;
    }
    .con3_top_4th_ab{
        position: relative;
        text-align: center;
        justify-content: center;
        align-items: center;
        margin: 0;
        left: unset;
        right: unset;
        margin-top: 5%;
        margin-bottom: 5%;
    }
    .con3_top_4th_ab_2nd{
        text-align: center;
        margin-top: 0%;
        margin-left: 0%;
        position: relative;
        right: unset;
        left: unset;
    }

    .con3_top_4th {
        margin-top: 3%;
        width: 186% !important;
        margin-left: 0%;
        margin-bottom: 2.5%;
        margin-top: 7%;
    }
    .con3_top_2nd {
        margin-top: 15.3%;
        margin-left: 0%;
        font-size: 7.8vw;
    }
    .con3_top_4th {
        margin-bottom: 7.5%;
    }
    .con4_top {
        margin-top: 15%;
        margin-left: 0%;
        font-size: 4vw;
    }
    .con4_top_2nd {
        margin-top: 0%;
        margin-left: 0%;
        font-size: 7.8vw;
        margin-top: 1%;
    }
    .con4_top_3rd {
        margin-top: 3%;
        margin-left: 0%;
        text-align: center;
        width: 70%;
    }
    .con4_top_4th_item_top {
        text-align: center;
        margin-top: 11%;
        margin-left: 0%;
        width: 88%;
    }

    .con4_top_4th_item_top_2nd {
        margin-top: 2%;
        margin-left: 0%;
        width: 88%;
        font-size: 4.84vw;
        text-align: center;
    }

    .con4_top_4th_item_top_3rd {
        margin-top: 3.6%;
        margin-left: 0%;
        text-align: center;
        white-space: unset;
        width: 95%;
    }
    .con4_top_4th_item {
        width: 75.43% !important;
        border: 1px solid var(--mc);
        height: 110.4vw;
        background: white;
        justify-content: flex-start !important;
    }
    .con4_top_4th_itemab {
        width: 100%;
        display: flex
    ;
        justify-content: center;
        align-items: center;
        margin-top: 0%;
        margin-left: 0%;
        left: 0;
        bottom: 0;
    }
    .con4_top_4th_itemab2 {
        width: 19.95894%;
        display: flex
    ;
        justify-content: center;
        align-items: center;
        margin-top: 0%;
        margin-left: 0%;
        top: 55%;
    }

    .con4_top_4th_itemab4 {
        width: 95.7203%;
        display: flex
    ;
        justify-content: center;
        align-items: center;
        margin-top: 0%;
        margin-left: 0%;
        left: unset;
        bottom: 10%;
    }
    .board_top .mf {
        font-size: 3vw;
    }
    .board_top {
        display: flex
    ;
        align-items: center;
        justify-content: space-between;
        gap: 3vw;
        margin-bottom: 1.2vw;
        background: var(--tc);
        padding: 2.3vw 4.2vw;
        border-radius: .4vw;
        width: 81.3%;
        margin-top: 15%;
    }
    .board_search img {
        width: 2.5vw;
        height: auto;
        display: block;
        margin-left: -302%;
    }
    .board_tbl {
        width: 89%;
        border-collapse: collapse;
        table-layout: fixed;
        background: #fff;
    }
    .board_tbl thead .mf {
        font-size: 3vw;
    }
    .board_tbl .mf {
        font-size: 2.8vw;
    }
    .pin {
        width: 2.5vw;
        height: auto;
    }
    .page_numbers button {
        border: 0;
        background: transparent;
        cursor: pointer;
        font-size: 2.9vw;
        color: #000;
    }
    .page_btn img {
        width: 6.5vw;
        height: auto;
        display: block;
    }
    .faq_wrap {
        width: 92%;
        margin: 0 auto;
        padding: 7.2vw 0;
    }

    .faq_q {
        width: 100%;
        display: flex
    ;
        align-items: center;
        gap: 1.2vw;
        padding: 4.2vw 0;
        background: transparent;
        border: 0;
        cursor: pointer;
        text-align: left;
        color: #000;
    }
    .faq_q_title {
        font-size: 3.3vw;
        line-height: 1.35;
        flex: 1 1 auto;
    }
    .q_icon{
        width: 16.56883%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 0%;
        margin-left: 0%;
    }
    .a_icon {
        width: 8.9985%;
        display: flex
    ;
        justify-content: center;
        align-items: center;
        margin-top: 3%;
        margin-left: 4.7%;
    }
    .toggle_btn{
        width: 10.56321%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 0%;
        margin-left: 0%;
    }
    .faq_wrap {
        width: 92%;
        margin: 0 auto;
        padding: 15.2vw 0;
    }

    .faq_a .mf{
        font-size: 3vw;
    }


    .con4_top_4th_itemabcon {
        top: unset;
        position: relative;
        margin-top: 3%;
    }


    .con3 .con7_prev {
        left: 1% !important;
        top: unset !important;
        width: 11vw !important;
        height: 6vw !important;
        border-radius: unset;
        overflow: hidden;
        left: 32.3% !important;
        bottom: 46%;
        transition: 0.4s background;
    }


    .con3 .con7_next {
        right: 1% !important;
        top: unset !important;
        width: 11vw !important;
        height: 6vw !important;
        border-radius: unset;
        overflow: hidden;
        right: 32.3% !important;
        bottom: 46%;
        transition: 0.4s background;
    }


    .con3_top {
        width: 15.40682%;
        display: flex
    ;
        justify-content: center;
        align-items: center;
        margin-top: 15.2%;
        overflow: hidden;
        margin-left: 0%;
        margin-bottom: -13%;
    }

    .con3_top_4th {
        margin-bottom: 11.5%;
    }
    .con3_top_4th_ab2{
        font-size: 4.3vw !important;
    }

.pagination_container {
    width: 59vw;
    height: 3vw;
    bottom: unset;
    background: unset;
    display: flex
;
    align-items: center;
    justify-content: center;
    z-index: 2;
    rotate: unset;
    top: 78.7%;
    left: unset;
}
    
}