@charset "utf-8";

/* font */
/*
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard.css");
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');
*/



/* font : 경기천년제목 Gyeonggi Title */
/*
@font-face {
    font-family: 'Gyeonggi Title';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2410-3@1.0/Title_Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}
*/
@font-face {
    font-family: 'Gyeonggi Title';
    src: url('../fonts/gyeonggititle/Title_Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Gyeonggi Title';
    src: url('../fonts/gyeonggititle/Title_Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Gyeonggi Title';
    src: url('../fonts/gyeonggititle/Title_Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}



/* font : 수트 SUIT */
/*
@font-face {
    font-family: 'SUIT-Regular';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;   
}
*/
@font-face {
    font-family: 'SUIT';
    src: url('../fonts/suit/SUIT-Thin.woff2') format('woff2'),
         url('../fonts/suit/SUIT-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'SUIT';
    src: url('../fonts/suit/SUIT-ExtraLight.woff2') format('woff2'),
        url('../fonts/suit/SUIT-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'SUIT';
    src: url('../fonts/suit/SUIT-Light.woff2') format('woff2'),
         url('../fonts/suit/SUIT-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'SUIT';
    src: url('../fonts/suit/SUIT-Regular.woff2') format('woff2'),
        url('../fonts/suit/SUIT-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'SUIT';
    src: url('../fonts/suit/SUIT-Medium.woff2') format('woff2'),
         url('../fonts/suit/SUIT-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'SUIT';
    src: url('../fonts/suit/SUIT-SemiBold.woff2') format('woff2'),
         url('../fonts/suit/SUIT-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'SUIT';
    src: url('../fonts/suit/SUIT-Bold.woff2') format('woff2'),
         url('../fonts/suit/SUIT-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'SUIT';
    src: url('../fonts/suit/SUIT-ExtraBold.woff2') format('woff2'),
         url('../fonts/suit/SUIT-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'SUIT';
    src: url('../fonts/suit/SUIT-Heavy.woff2') format('woff2'),
         url('../fonts/suit/SUIT-Heavy.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}



/* fonts : Pretendard */
@font-face {
  font-family: 'Pretendard';
  font-weight: 100;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/pretendard/Pretendard-Thin.woff2') format('woff2'),
       url('../fonts/pretendard/Pretendard-Thin.woff') format('woff');
}

@font-face {
  font-family: 'Pretendard';
  font-weight: 200;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/pretendard/Pretendard-ExtraLight.woff2') format('woff2'),
       url('../fonts/pretendard/Pretendard-ExtraLight.woff') format('woff');
}
@font-face {
  font-family: 'Pretendard';
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/pretendard/Pretendard-Light.woff2') format('woff2'),
       url('../fonts/pretendard/Pretendard-Light.woff') format('woff');
}
@font-face {
  font-family: 'Pretendard';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/pretendard/Pretendard-Regular.woff2') format('woff2'),
       url('../fonts/pretendard/Pretendard-Regular.woff') format('woff');
}
@font-face {
  font-family: 'Pretendard';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/pretendard/Pretendard-Medium.woff2') format('woff2'),
       url('../fonts/pretendard/Pretendard-Medium.woff') format('woff');
}
@font-face {
  font-family: 'Pretendard';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/pretendard/Pretendard-SemiBold.woff2') format('woff2'),
       url('../fonts/pretendard/Pretendard-SemiBold.woff') format('woff');
}
@font-face {
  font-family: 'Pretendard';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/pretendard/Pretendard-Bold.woff2') format('woff2'),
       url('../fonts/pretendard/Pretendard-Bold.woff') format('woff');
}
@font-face {
  font-family: 'Pretendard';
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/pretendard/Pretendard-ExtraBold.woff2') format('woff2'),
       url('../fonts/pretendard/Pretendard-ExtraBold.woff') format('woff');
}

@font-face {
  font-family: 'Pretendard';
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/pretendard/Pretendard-Black.woff2') format('woff2'),
       url('../fonts/pretendard/Pretendard-Black.woff') format('woff');
}



/**/
@font-face {
    font-family: 'Noto Sans KR';
    src: url('../fonts/notosans/NotoSansKR-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Noto Sans KR';
    src: url('../fonts/notosans/NotoSansKR-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Noto Sans KR';
    src: url('../fonts/notosans/NotoSansKR-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Noto Sans KR';
    src: url('../fonts/notosans/NotoSansKR-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Noto Sans KR';
    src: url('../fonts/notosans/NotoSansKR-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Noto Sans KR';
    src: url('../fonts/notosans/NotoSansKR-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Noto Sans KR';
    src: url('../fonts/notosans/NotoSansKR-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Noto Sans KR';
    src: url('../fonts/notosans/NotoSansKR-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Noto Sans KR';
    src: url('../fonts/notosans/NotoSansKR-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}



body {
    font-family: 'SUIT-Regular', 'SUIT Variable', 'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif;
}

.font-gyeonggi { 
    font-family: 'Gyeonggi Title';
    font-weight: 500;
}



/* 스크롤바 */
body::-webkit-scrollbar { width: 1rem; }
body::-webkit-scrollbar-track { background-color: #f5f5f5; }
body::-webkit-scrollbar-thumb { background-color: #cacdd1; border-radius: 0rem; }

:root {
    /* color */
    --clr-white: #fff;
    --clr-white-dark: #f5f5f5;

    --clr-gray-e: #efefef;
    --clr-gray-d: #ddd;
    --clr-gray-c: #ccc;
    --clr-gray: #888;
    --clr-gray-bar: #cacdd1;
    --clr-gray-dark: #454545;

    --clr-black: #121212;
    --clr-navy: #000e1f;
    --clr-navy-light: #1f2732;

    --clr-blue-light: #d3e9ff;
    --clr-blue-Medium: #1777fe;
    --clr-blue: #345cd9;
    --clr-blue-green: #08b2b0;
    --clr-blue-dark: #0c3dba; 
    --clr-violet: #6638ed; 
    
    /* font */
    --fs-2xs: 1.5rem;
    --fs-xs: 1.6rem;
    --fs-md: 1.8rem;
    --fs-md-20: 2.0rem;
    --fs-lg: 2.2rem;
    --fs-lg-24: 2.4rem;
    --fs-lg-28: 2.8rem;
    --fs-lg-30: 3.0rem;
    --fs-lg-32: 3.2rem;
    --fs-xl: 3.8rem;
    --fs-2xl: 4.4rem;
    --fs-3xl: 4.8rem;

    /* shadow */
    --shadow-btn: 0.3rem 0.3rem 2rem rgb(0 0 0 / 5%);
    --shadow-sec: 0.2rem 0.2rem 2rem rgb(0 0 0 / 20%);
    --shadow-visual: 0.3rem 0.3rem 2rem rgb(28 130 254 / 50%);
    
}

/* skip nav */
#skipNav {
    position: relative;
    z-index: 9999;
}
#skipNav a {
    position: absolute; 	
    top: -20rem; 
    left: 0; 
    width: 100%; 
    line-height: 4rem; 
    font-size: var(--fs-md);
    text-align: center;
    border: 1px solid var(--clr-gray); 
    color : var(--clr-white);
    background-color: var(--clr-navy);
} 
#skipNav a:focus, 
#skipNav a:active { 
    top: 0;
}

/* progress bar */
#progress-cont {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 0.4rem;
    /* background-color: rgb(255 255 255 / 70%); */
    z-index: 10000;
}
#progress-bar {
    height: 100%;
    background-color: #1c82fe;
    width: 0%;
    display: none; 
}

.txtBlind { 
    position: absolute; 
    top: -99999rem; 
    left: -99999rem;
    overflow-y: hidden;
}


@media screen and (max-width: 1560px) {}