/* Noto Sans KR — fonts/ 에 넣어둔 woff2 9종을 그대로 연결합니다 (시안 사용 굵기 : Regular · Medium · Bold 위주, SemiBold · ExtraBold 소량) */
@font-face {
  font-family: "Noto Sans KR";
  font-weight: 100;
  font-display: swap;
  src: url("../fonts/noto-sans-kr-v36-korean-100.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans KR";
  font-weight: 200;
  font-display: swap;
  src: url("../fonts/noto-sans-kr-v36-korean-200.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans KR";
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/noto-sans-kr-v36-korean-300.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans KR";
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/noto-sans-kr-v36-korean-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans KR";
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/noto-sans-kr-v36-korean-500.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans KR";
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/noto-sans-kr-v36-korean-600.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans KR";
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/noto-sans-kr-v36-korean-700.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans KR";
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/noto-sans-kr-v36-korean-800.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans KR";
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/noto-sans-kr-v36-korean-900.woff2") format("woff2");
}

* {box-sizing: border-box; letter-spacing: -0.02em}
html {font-size: 10px;}
body {font-family: "Noto Sans KR", sans-serif; scroll-behavior: smooth; color: #231815; line-height: 1.4; letter-spacing: -0.02em}
body::-webkit-scrollbar {width: 8px;}
body::-webkit-scrollbar-thumb {background-color: #ccc; border-radius: 10px; background-clip: padding-box; border: 2px solid transparent;}
body::-webkit-scrollbar-track {background-color: #fff;}

/* 브랜드 컬러 (시안 확정)
   --fcp 포인트 그린. 메뉴 활성·밑줄·버튼·2depth 호버 배경이 참조합니다.
   --fcs 진한 그린. 그라데이션(--fcp → --fcs)의 끝 색으로만 씁니다. (모바일 메뉴 활성 · sub_tab)
   --fct 본문 기본색 (시안 스타일명 BROWN #231815) */
:root {
    --innerMo: 92%;
    --fcf: #fff;
    --fcp: #8fc31f;
    --fcs: #006934;
    --fct: #231815;
}


/* font size */
.fs11 {font-size: 1.1rem}
.fs12 {font-size: 1.2rem}
.fs13 {font-size: 1.3rem}
.fs14 {font-size: 1.4rem}
.fs15 {font-size: 1.5rem}
.fs16 {font-size: 1.6rem}
.fs17 {font-size: 1.7rem}
.fs18 {font-size: 1.8rem}
.fs19 {font-size: 1.9rem}
.fs20 {font-size: 2.0rem}
.fs21 {font-size: 2.1rem}
.fs22 {font-size: 2.2rem}
.fs23 {font-size: 2.3rem}
.fs24 {font-size: 2.4rem}
.fs25 {font-size: 2.5rem}
.fs26 {font-size: 2.6rem}
.fs27 {font-size: 2.7rem}
.fs28 {font-size: 2.8rem}
.fs29 {font-size: 2.9rem}
.fs30 {font-size: 3rem}
.fs31 {font-size: 3.1rem}
.fs32 {font-size: 3.2rem}
.fs33 {font-size: 3.3rem}
.fs34 {font-size: 3.4rem}
.fs35 {font-size: 3.5rem}
.fs36 {font-size: 3.6rem}
.fs37 {font-size: 3.7rem}
.fs38 {font-size: 3.8rem}
.fs39 {font-size: 3.9rem}
.fs40 {font-size: 4.0rem}
.fs41 {font-size: 4.1rem}
.fs42 {font-size: 4.2rem}
.fs43 {font-size: 4.3rem}
.fs44 {font-size: 4.4rem}
.fs45 {font-size: 4.5rem}
.fs46 {font-size: 4.6rem}
.fs47 {font-size: 4.7rem}
.fs48 {font-size: 4.8rem}
.fs49 {font-size: 4.9rem}
.fs50 {font-size: 5rem}
.fs51 {font-size: 5.1rem}
.fs52 {font-size: 5.2rem}
.fs53 {font-size: 5.3rem}
.fs54 {font-size: 5.4rem}
.fs55 {font-size: 5.5rem}
.fs56 {font-size: 5.6rem}
.fs57 {font-size: 5.7rem}
.fs58 {font-size: 5.8rem}
.fs59 {font-size: 5.9rem}
.fs60 {font-size: 6rem}
.fs61 {font-size: 6.1rem}
.fs62 {font-size: 6.2rem}
.fs63 {font-size: 6.3rem}
.fs64 {font-size: 6.4rem}
.fs65 {font-size: 6.5rem}
.fs66 {font-size: 6.6rem}
.fs67 {font-size: 6.7rem}
.fs68 {font-size: 6.8rem}
.fs69 {font-size: 6.9rem}
.fs70 {font-size: 7rem}
.fs80 {font-size: 8.0rem}
.fs88 {font-size: 8.8rem}
.fs96 {font-size: 9.6rem}
.fs109 {font-size: 10.9rem}
.fs130 {font-size: 13rem}
.fs140 {font-size: 14rem}
.fs200 {font-size: 20rem}

/* font color
   포인트 컬러 계열(연한 톤 등)은 섹션 작업하면서 필요할 때 아래에 추가합니다. */
.fcf {color: #fff}
.fcp {color: #8fc31f}     /* 포인트 그린 — :root --fcp 와 같은 값 */
.fcs {color: #006934}     /* 진한 그린 — :root --fcs 와 같은 값 */
.fct {color: #231815}     /* 본문 기본색 (BROWN) — :root --fct 와 같은 값 */
.fc00 {color: #000000}
.fc11 {color: #111111}
.fc22 {color: #222222}
.fc23 {color: #232323}    /* 푸터 배경과 같은 진회색 */
.fc33 {color: #333333}
.fc44 {color: #444444}
.fc55 {color: #555555}
.fc63 {color: #636363}
.fc69 {color: #696969}
.fc88 {color: #888888}
.fc99 {color: #999999}

/* font weight */
.fwt100 {font-weight: 100;}
.fwt200 {font-weight: 200;}
.fwt300 {font-weight: 300;}
.fwt400 {font-weight: 400;}
.fwt500 {font-weight: 500;}
.fwt600 {font-weight: 600;}
.fwt700 {font-weight: 700;}
.fwt800 {font-weight: 800;}
.fwt900 {font-weight: 900;}
.fwtbold {font-weight: bold}

/* inner
   시안 PC 콘텐츠 폭 : 헤더·푸터·서브 본문 모두 좌우 150 여백 = 1620 */
.inner1200 {max-width: 120rem;}
.inner1400 {max-width: 140rem;}
.inner1620 {max-width: 162rem;}
.inner1660 {max-width: 166rem;}

.lh1 {line-height: 1;}

/* css */
.block {display: block}
.inblock {display: inline-block;}

.flex {display: flex;}
.row {flex-direction: row}
.column {flex-direction: column;}
.justy_btw {justify-content: space-between;}
.justy_cnt {justify-content: center;}
.justy_ard {justify-content: space-around;;}
.alc {align-items: center;}
.alstart {align-items: flex-start;}
.alend {align-items: flex-end;}
.fxwrap {flex-wrap: wrap}

.abs {position: absolute;}
.fixed {position: fixed;}
.rel {position: relative;}
.x_center {left: 50%; transform: translateX(-50%);}
.y_center {top: 50%; transform: translateY(-50%);}
.w_center {left: 50%; top: 50%; transform: translate(-50%,-50%);}
.g_center {display: grid; place-items: center;}

.t_center {text-align: center}
.m_center {margin: 0 auto;}
.w100 {width: 100%;}
.h100 {height: 100%;}

.right0 {right: 0}
.left0 {left: 0}
.top0 {top: 0}
.bottom0 {bottom: 0}

.pointer {cursor: pointer;}

.img > img {width: 100%; display: block;}

.pc {display: block;}
.mo {display: none;}

@media all and (max-width: 1820px){
    html {font-size: 0.5vw;}
}

@media all and (max-width: 1680px){
    html {}
}

@media all and (max-width: 1320px){
    html {}
}

@media all and (max-width: 880px){
    html {font-size: 1.564vw;}

    .pc {display: none;}
    .mo {display: block;}
}

@media all and (max-width: 480px){
    html {font-size: 2.664vw}
}