@font-face{font-family: 'Pretendard'; src: url('../fonts/Pretendard-Light.woff2') format('woff2'); font-weight: 300; font-style: normal;}
@font-face{font-family: 'Pretendard'; src: url('../fonts/Pretendard-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal;}
@font-face{font-family: 'Pretendard'; src: url('../fonts/Pretendard-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal;}
@font-face{font-family: 'Pretendard'; src: url('../fonts/Pretendard-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal;}
@font-face{font-family: 'Pretendard'; src: url('../fonts/Pretendard-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal;}
@font-face{font-family: 'Pretendard'; src: url('../fonts/Pretendard-Black.woff2') format('woff2'); font-weight: 900; font-style: normal;}

/* =============================================================== */

:root{
    /* color */
    --gs01: #fff;
    --gs02: #fafafa;
    --gs03: #f4f4f4;
    --gs04: #ebebeb;
    --gs05: #d5d5d5;
    --gs06: #a3a3a3;
    --gs07: #747474;
    --gs08: #606266;
    --gs09: #333;
    --gs10: #1c1c1c;
    --gs11: #000;

    --pc01: #0099ff;
    --pc02: #1a53a1;
    --pc03: #f6fcff;
    --pc04: #2b516b;
    --pc05: #007bff;
    --pc06: #e7efff;

    --ac-y-01: #fbff00;
    --ac-r-01: #FF0000;

    /* spacing */
    --sp05: 5px;
    --sp10: 10px;
    --sp15: 15px;
    --sp20: 20px;
    --sp25: 25px;
    --sp30: 30px;
    --sp35: 35px;
    --sp40: 40px;
    --sp45: 45px;
    --sp50: 50px;
    --sp60: 60px;
    --sp65: 65px;
    --sp70: 70px;
    --sp75: 75px;
    --sp80: 80px;
    --sp90: 90px;
    --sp100: 100px;

    /* font-style */
    --fs12: 0.75rem;    --lh12: 1.125rem;
    --fs14: 0.875rem;   --lh14: 1.25rem; 
    --fs16: 1rem;       --lh16: 1.375rem;
    --fs18: 1.125rem;   --lh18: 1.5rem;  
    --fs20: 1.25rem;    --lh20: 1.625rem; 
    --fs24: 1.5rem;     --lh24: 2rem;    
    --fs26: 1.625rem;   --lh26: 2.125rem; 
    --fs32: 2rem;       --lh32: 2.625rem; 
    --fs36: 2.25rem;    --lh36: 2.875rem;
    --fs50: 3.125rem;   --lh50: 3.75rem; 
}
@media screen and (max-width: 767px) {
    :root{
        --fs12: 0.75rem;   --lh12: 1.25rem;
        --fs14: 0.8125rem; --lh14: 1.3125rem;
        --fs16: 0.875rem;  --lh16: 1.375rem;
        --fs20: 1.125rem;  --lh20: 1.5rem;
        --fs24: 1.25rem;   --lh24: 1.75rem;
        --fs26: 1.375rem;  --lh26: 1.875rem;
        --fs32: 1.5rem;    --lh32: 1.875rem;
        --fs36: 1.65rem;   --lh36: 2.15rem;
        --fs50: 1.875rem;  --lh50: 2.5rem;
    }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
    :root {
        --fs12: 0.75rem;     --lh12: 1.125rem;
        --fs14: 0.875rem;    --lh14: 1.25rem;
        --fs18: 1rem;        --lh18: 1.375rem;
        --fs20: 1.1875rem;   --lh20: 1.625rem;
        --fs24: 1.5rem;      --lh24: 2rem;
        --fs26: 1.625rem;    --lh26: 2.125rem;
        --fs32: 1.625rem;    --lh32: 2.125rem;
        --fs36: 2rem;        --lh36: 2.625rem;
        --fs50: 2.75rem;     --lh50: 3.4375rem;
      }
}

/* =============================================================== */

/* font */
[class*="fs-12"]{ font-size: var(--fs12); line-height: var(--lh12);}
[class*="fs-14"]{ font-size: var(--fs14); line-height: var(--lh14);}
[class*="fs-16"]{ font-size: var(--fs16); line-height: var(--lh16);}
[class*="fs-18"]{ font-size: var(--fs18); line-height: var(--lh18);}
[class*="fs-20"]{ font-size: var(--fs20); line-height: var(--lh20);}
[class*="fs-24"]{ font-size: var(--fs24); line-height: var(--lh24);}
[class*="fs-26"]{ font-size: var(--fs26); line-height: var(--lh26);}
[class*="fs-32"]{ font-size: var(--fs32); line-height: var(--lh32);}
[class*="fs-42"]{ font-size: var(--fs42); line-height: var(--lh42);}
[class*="fs-50"]{ font-size: var(--fs50); line-height: var(--lh50);}

/* =============================================================== */

body{font-family: 'Pretendard', sans-serif;}
[class*="-container"]{margin-top: 106px; min-height: calc(100vh - 106px);}
.con-wrap{max-width: 1200px; margin: 0 auto;}
.d-block{display: block;}
.text-center{text-align: center;}
.max-w-500{max-width: 500px; margin: 0 auto;}

/* ────────────── flex ────────────── */
[class*="fx-"]{display: flex;}
.fx-1{align-items: center;}
.fx-2{justify-content: space-between;}
.fx-3{align-items: center; justify-content: space-between;}
.fx-4{flex-direction: column;}
.gap-1{gap: var(--sp05);}
.gap-2{gap: var(--sp10);}
.gap-3{gap: var(--sp15);}

/* ────────────── color ────────────── */
.color-b{color: var(--pc01);}
.color-bb{color: var(--pc04);}
.color-y{color: var(--ac-y-01);}
.color-r{color: var(--ac-r-01);}

/* ────────────── pagination ────────────── */
.pagination{
    display: flex; justify-content: center; flex-wrap: wrap; gap: var(--sp05); margin: var(--sp30) 0 0; font-size: var(-fs14);
}
.pagination a,
.pagination .page{
    display: inline-flex; align-items: center; justify-content: center; width: 32px; font-size: var(--fs14); line-height: var(--lh14);
    height: 32px; border-radius: 50%; text-align: center; text-decoration: none; border: 1px solid var(--gs05); color: var(--gs09); transition: border-color 0.2s ease-out;
}
.pagination .page:hover,
.pagination a:hover{
    border-color: var(--pc05);
}
.pagination .active{
    background: var(--pc05); color: var(--gs02); font-weight: 600; border-color: var(--pc05);
}
.pagination .disabled{
    pointer-events: none; color: var(--gs05); border-color: var(--gs04);
}
.pagination .dots{
    pointer-events: none; border: none; background: transparent; color: var(--gs06);
}

/* ────────────── logo ────────────── */
.logo{
    width: fit-content;
}
.logo a{
    display: block;
}
.logo a img{
    width: 100%; max-width: 120px;
}

/* ────────────── empty msg ────────────── */
.empty-msg{
    font-size: var(--fs16); width: 100%; text-align: center; padding: var(--sp30) 2%; color: var(--gs08);
}

/* ────────────── form group ────────────── */
input[type="date"],
select{
    -webkit-appearance: none;
    appearance: none; color: var(--gs08);
}
.form-group:not(:last-of-type){
    margin-bottom: var(--sp20);
}
.form-group label{
    margin-bottom: var(--sp05); display: block; font-weight: 600; font-size: var(--fs14); 
    line-height: var(--lh14); color: var(--gs08);
}
.form-group input,
.form-group select,
.form-group textarea,
.form-group button{
    width: 100%; padding: var(--sp10); border: 1px solid var(--gs05); border-radius: 6px; font-size: var(--fs14);
    background-color: var(--gs01); line-height: var(--lh14);
}
.form-group textarea{
    min-height: 100px; resize: none;
}
.form-group .info-msg{
    font-size: var(--fs12); line-height: var(--lh12); margin-top: var(--sp05); display: block; color: var(--gs06);
}

/* ────────────── button style ────────────── */
.box-btn{
    text-align: center;
}
[class*="btn-"]{
    display: inline-flex; align-items: center; justify-content: center; gap: 16px; 
    font-size: var(--fs16); font-weight: 600; transition: all .3s ease-out;
}
.btn-close{
    position: relative; width: 24px; height: 24px; background-color: transparent; margin-left: auto;
} 
.btn-close::before,
.btn-close:after{
    content: ''; position: absolute; top: 50%; left: 50%; width: 20px; height: 2px; background-color: var(--gs09); transform-origin: center;
} 
.btn-close::before{
    transform: translate(-50%, -50%) rotate(45deg);
}
.btn-close::after{
    transform: translate(-50%, -50%) rotate(-45deg);
}
/* btn - primary style */
[class*="btn-primary"]{
    padding: var(--sp15) var(--sp25); min-width: 100px; border-radius: 20px; max-height: 40px; margin: 0 auto;
}
[class*="btn-primary-b"]{
    box-shadow: 0 6px 12px rgba(0, 148, 255, 0.2);
}
.btn-primary-b{
    background-color: var(--pc01); color: var(--gs01); border: none; 
}
.btn-primary-b.full{
    width: 100%;
  }
.btn-primary-b:hover{
    filter: brightness(1.08);
}
.btn-primary-bline{
    background-color: transparent; color: var(--pc01); border: 1px solid var(--pc01);
}
.btn-primary-bline:hover{
    background-color: var(--pc01); color: var(--gs01);
}
[class*="btn-primary"] .arrow{
    display: inline-block; width: 28px; height: 10px; background: transparent; position: relative;
}
[class*="btn-primary"] .arrow::after{
    content: ''; position: absolute; width: 100%; height: 2px; background-color: var(--gs01); top: 50%; left: 0; transform: translateY(-50%);
}
[class*="btn-primary"] .arrow::before{
    content: ''; position: absolute; right: 0; top: 50%; width: 8px; height: 8px; border-top: 2px solid var(--gs01); transform: translateY(-50%) rotate(45deg);
}
.btn-primary-bline .arrow::after{
    background-color: var(--pc01);
}
.btn-primary-bline .arrow::before{
    border-color: var(--pc01);
}
.btn-primary-bline:hover .arrow::after{
    background-color: var(--gs01);
}
.btn-primary-bline:hover .arrow::before{
    border-color: var(--gs01);
}
/* normal btn (login, join) */
.btn-member{
    width: 100%; padding: var(--sp15); background-color: var(--pc01); color: var(--gs01); border: none;
    border-radius: 15px; cursor: pointer;
}

/* ────────────── title ────────────── */
.sec-tit{
    font-size: var(--fs50); font-weight: 700; text-align: center; color: var(--gs10);
}
.sec-tit span{
    color: var(--pc01);
}
.sec-sub-tit{
    font-size: var(--fs36); line-height: var(--lh36); font-weight: 700; text-align: center; color: var(--pc01);
}
.sec-subtext{
  text-align: center; display: block; color: var(--gs07); margin-top: var(--sp10); font-size: var(--fs16); line-height: var(--lh16);
}

/* ────────────── description ────────────── */
.desc{
    color: var(--gs10);
}
.desc > span{
    font-weight: 700; font-size: var(--fs16); line-height: var(--lh16); display: block; margin-bottom: var(--sp20); color: var(--pc01); text-transform: capitalize;
}
.desc h3{
    font-size: var(--fs24); line-height: var(--lh32); margin-bottom: var(--sp10); font-weight: 500;
}
.desc p{
    color: var(--gs08); font-size: var(--fs16); line-height: var(--lh16); font-weight: 500;
}

/* ────────────── tab ────────────── */
.tab-menu{
    display: flex; justify-content: center; flex-wrap: wrap; border-bottom: 1px solid var(--gs04); margin-top: var(--sp30);
}
.tab-btn{
    padding: var(--sp10) var(--sp15); font-size: var(--fs20); font-weight: 500; color: var(--gs09); position: relative;
}
.tab-btn.active{
    color: var(--pc05); font-weight: 700;
    }
.tab-btn.active::after {
    content: ""; position: absolute; bottom: -1px; left: 0; right: 0; height: 3px; background-color: var(--pc05);
}
.tab-content{
    display: none;
}
.tab-content.active{
    display: block;
}
/* tab category */
.tab-category{
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: var(--sp25) 0 var(--sp30);
}
.tab-tab{
    padding: var(--sp05) var(--sp15); font-size: var(--fs14); border: 1px solid var(--gs04); background-color: #fff;
    border-radius: 20px; color: var(--gs08); transition: all 0.3s ease-out;
}
.tab-tab:hover{
    background-color: var(--pc06); color: var(--pc05); border-color: transparent;
}
.tab-tab.active{
    background-color: var(--pc05); border-color: var(--pc05); color: var(--gs02); font-weight: 600;
}
/* tab list */
.tab-content [class*=-list] li:not(:last-of-type){
    border-bottom: 1px solid var(--gs04);
}

/* ────────────── accordion ────────────── */
.accordion-item [class^="accordion-"]{
    word-break: break-word; overflow-wrap: anywhere;
}
.accordion-q{
    display: flex; justify-content: space-between; align-items: center; cursor: pointer; padding: var(--sp15) 0;
    font-size: var(--fs16); line-height: var(--lh16); font-weight: 500;
}
.toggle-icon{
    display: inline-block; font-size: var(--fs18); color: var(--pc05); font-weight: 500; transition: transform 0.3s ease;
}
.toggle-icon::before{
    content: '+';
}
.toggle-icon.open::before{
    content: '-';
}
.toggle-icon.open{
    transform: rotate(180deg);
}
.accordion-a{
    display: none; padding: var(--sp20); font-size: var(--fs14); line-height: var(--lh14); color: var(--gs07); background-color: var(--gs02);
}

/* ────────────── banner ────────────── */
[class*="banner-"]{
    padding: var(--sp65);
}
.banner-blu{
    background-color: var(--pc01);
}
.banner-blu div{
    max-width: 900px; margin: 0 auto;
    color: var(--gs01); font-size: var(--fs32); line-height: var(--lh32); text-align: center; font-weight: 600;
}


/* =============================================================== */
/* ────────────── header ────────────── */
header{
    position: fixed; z-index: 10; top: 0; width: 100%; height: 110px; background-color: var(--gs01); 
    box-shadow: 20px 20px 20px 0 rgba(0, 0, 0, 0.03);
}
.header-top{
    background-color: var(--pc01); padding: var(--sp10) 2%; transition: all .3s ease-in-out;
}
.header-top .con-wrap{
    display: flex; justify-content: flex-end; gap: var(--sp15);
}
.header-top .con-wrap a{
    font-size: var(--fs14); font-weight: 500; color: var(--gs01);
}
.header-bottom{
    padding: 20px 2%;
}
/* gnb */
.gnb{
    display: flex; justify-content: space-between; color: var(--gs10); font-weight: 600;
}
.gnb ul{
    display: flex; justify-content: space-between; gap: var(--sp50);
}
.gnb a:hover{
    color: var(--pc01);
}
.hamburger{
    display: none; flex-direction: column; gap: 5px; border: none; background-color: transparent; padding: 0;
}
.hamburger span{
    display: block; width: 24px; height: 2px; background-color: var(--gs09);
}
/* fnb */
.fnb{
    position: fixed; z-index: 1000; top: 0; left: 0; width: 100%; height: 100vh; pointer-events: none; 
    opacity: 0; transition: opacity .6s ease; text-align: right;
}
.fnb .overlay{
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); 
    opacity: 0; transition: opacity .6s ease;
}
.fnb .menu{
    position: absolute; top: 0; right: 0; width: 55%; height: 100%; padding: var(--sp30) var(--sp20); background-color: var(--pc03);
    display: flex; flex-direction: column; gap: var(--sp40); transform: translateX(100%); transition: transform .6s ease; 
    box-shadow: -4px 0 8px rgba(0,0,0,0.1); margin-left: auto;
}
.fnb.on{
    pointer-events: auto; opacity: 1;
}
.fnb.on .overlay{
    opacity: 1;
}
.fnb.on .menu{
    transform: translateX(0);
}
.fnb .menu ul{
    height: 100vh; font-size: var(--fs18); margin-top: var(--sp100); font-weight: 600; color: var(--pc02);
}
.fnb .menu ul li:last-of-type{
    margin-top: var(--sp100); color: var(--gs06);
}
.fnb .menu ul li:last-of-type a{
    display: inline-block;
}
.fnb .menu ul li:last-of-type a:last-of-type{
    margin-left: var(--sp10);
}

/* ────────────── footer ────────────── */
footer{
    background-color: var(--gs11); color: var(--gs01); width: 100%; padding: var(--sp45) 2% var(--sp25);
}
footer .logo{
    margin-bottom: var(--sp30);
}
footer .logo+div{
    display: flex; justify-content: space-between; font-size: var(--fs14);
}
.company-info{
    display: flex; width: 50%; flex-wrap: wrap; gap: var(--sp10);
}
.company-info span b{
    padding-right: var(--sp05); font-weight: 700;
}
.footer-right{
    display: flex; justify-content: space-around; width: 40%;
}
.footer-right div{
    width: 45%;
}
.footer-right strong{
    margin-bottom: var(--sp05);
}
.footer-right a{
    width: fit-content; transition: color .3s ease-out;
}
.footer-right a:hover{
    color: var(--pc01); font-weight: 500;
}
footer p{
    text-align: center; font-size: var(--fs12); margin-top: var(--sp25); padding: 0 2%;
}

@media screen and (max-width: 767px){
    footer .logo+div{
        flex-direction: column; row-gap: var(--sp30);
    }
    footer .logo+div div{
        width: 100%;
    }
}
@media screen and (max-width: 991px) {
    [class*="-container"]{
        margin-top: 65px;
    }
    header{
        height: 65px;
    }
    .header-top{
      height: 0; opacity: 0; overflow: hidden; padding: 0;
    }
    .logo a img{
        max-width: 100px;
    }
    .gnb ul{
        display: none;
    }
    .hamburger{
        display: flex;
    }
}