/* =========================================
   RESET.CSS (Responsive Base)
   ========================================= */


@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');


@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Thin.woff2') format('woff2');
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Black.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
}

.poppins-thin {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.poppins-extralight {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.poppins-light {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.poppins-regular {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.poppins-medium {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.poppins-semibold {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.poppins-bold {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.poppins-extrabold {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.poppins-black {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.poppins-thin-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.poppins-extralight-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: italic;
}

.poppins-light-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.poppins-regular-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.poppins-medium-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.poppins-semibold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: italic;
}

.poppins-bold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.poppins-extrabold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: italic;
}

.poppins-black-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: italic;
}


.montserrat {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
}


/* 박스 모델 통일 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 기본 여백 제거 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
main, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 요소 display 초기화 */
article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section {
  display: block;
}

/* 본문 기본 세팅 */
html {
  scroll-behavior: smooth;
   font-weight: 400;  line-height: 1.2; 
  -webkit-text-size-adjust: 100%;
  font-size: clamp(7px, calc(0.27vw + 6.1px), 10px);
}

body {
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
  color: #333;
}

/* 리스트 스타일 제거 */
ol, ul {
  list-style: none;
}

/* 링크 스타일 초기화 */
a {
  text-decoration: none;
  color: inherit;
}

/* 이미지 반응형 */
img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 버튼, 입력요소 기본값 초기화 */
button, input, select, textarea {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
  appearance: none;
}

button {
  cursor: pointer;
}

/* 테이블 기본값 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Strong/Bold 폰트 가중치 */
b, strong {
  font-weight: 600;
}

/* 숨김 접근성용 클래스 */
.hidden,
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}




/* skipNavi ---------------------------------------------------------------------- */
.skipNavi {position:relative; z-index:99999;}
.skipNavi, .skipNavi ul {height:0}
.skipNavi ul li {display:inline;}
.skipNavi a {position:absolute; top:-9999px; width:100%; height:30px; text-align:center; color:#fff; font-weight:bold; line-height:30px; background:#000; z-index:1000;}
.skipNavi a:focus, .skipNavi a:hover, .skipNavi a:active {top:0;}




/* noStyle */
.bd_none {border:none !important;}
.bt_none {border-top:none !important;}
.bl_none {border-left:none !important;}
.bb_none {border-bottom:none !important;}
.br_none {border-right:none !important;}
.bk_none {background:none !important;}
.mr_auto {margin:0 auto !important;}
.mr_none {margin:0 !important;}
.pd_none {padding:0 !important;}
.bs_none {border-radius:0 !important;}



.bd_rd4 {border-radius: 0.4rem }
.bd_rd8 {border-radius: 0.8rem }
.bd_rd10 {border-radius: 1rem }
.bd_rd12{border-radius: 1.2rem }
.bd_rd14 {border-radius: 1.4rem }
.bd_rd16 {border-radius: 1.6rem }
.bd_rd20 {border-radius: 1.8rem }
.bd_rd25 {border-radius: 2rem }
.bd_rd50p {border-radius: 50%; }

.bold100 {font-weight: 100 !important; }
.bold200 {font-weight: 200 !important; }
.bold300 {font-weight: 300 !important; }
.bold400 {font-weight: 400 !important; }
.bold500 {font-weight: 500 !important; }
.bold600 {font-weight: 600 !important; }
.bold700 {font-weight: 700 !important; }
.bold800 {font-weight: 800 !important; }
.bold900 {font-weight: 900 !important; }


.poppins { font-family:  'Poppins'}

.f_wh { color:#fff !important; }
.f_bk {color:#333 !important; }
.f_gy {color:#999 !important; }
.f_gn {color:#508062 !important; }
.f_rd {color:#FF0707 !important; }


.mt0  {  margin-top: 0;  }
.mt10  {  margin-top: 1rem;  }
.mt20  {  margin-top: 2rem;  }
.mt30  {  margin-top: 3rem;  }
.mt40  {  margin-top: 4rem;  }
.mt50  {  margin-top: 5rem;  }
.mt60  {  margin-top: 6rem;  }
.mt70  {  margin-top: 7rem;  }
.mt80  {  margin-top: 8rem;  }
.mt90  {  margin-top: 9rem;  }
.mt100  {  margin-top: 10rem;  }



.mb0  {  margin-bottom: 0;  }
.mb10  {  margin-bottom: 1rem;  }
.mb20  {  margin-bottom: 2rem;  }
.mb30  {  margin-bottom: 3rem;  }
.mb40  {  margin-bottom: 4rem;  }
.mb50  {  margin-bottom: 5rem;  }
.mb60  {  margin-bottom: 6rem;  }
.mb70  {  margin-bottom: 7rem;  }
.mb80  {  margin-bottom: 8rem;  }
.mb90  {  margin-bottom: 9rem;  }
.mb100  {  margin-bottom: 10rem;  }


.ml0  {  margin-left: 0;  }
.ml10  {  margin-left: 1rem;  }
.ml20  {  margin-left: 2rem;  }
.ml30  {  margin-left: 3rem;  }
.ml40  {  margin-left: 4rem;  }
.ml50  {  margin-left: 5rem;  }
.ml60  {  margin-left: 6rem;  }
.ml70  {  margin-left: 7rem;  }
.ml80  {  margin-left: 8rem;  }
.ml90  {  margin-left: 9rem;  }
.ml100  {  margin-left: 10rem;  }

.mr0  {  margin-left: 0;  }
.mr10  {  margin-left: 1rem;  }
.mr20  {  margin-left: 2rem;  }
.mr30  {  margin-left: 3rem;  }
.mr40  {  margin-left: 4rem;  }
.mr50  {  margin-left: 5rem;  }
.mr60  {  margin-left: 6rem;  }
.mr70  {  margin-left: 7rem;  }
.mr80  {  margin-left: 8rem;  }
.mr90  {  margin-left: 9rem;  }
.mr100  {  margin-left: 10rem;  }




.pb0  {  padding-bottom: 0 !important;;  }
.pb10  {  padding-bottom: 1rem !important;;  }
.pb20  {  padding-bottom: 2rem !important;;  }
.pb30  {  padding-bottom: 3rem !important;;  }
.pb40  {  padding-bottom: 4rem !important;;  }
.pb50  {  padding-bottom: 5rem !important;;  }
.pb60  {  padding-bottom: 6rem !important;;  }
.pb70  {  padding-bottom: 7rem !important;;  }
.pb80  {  padding-bottom: 8rem !important;;  }
.pb90  {  padding-bottom: 9rem !important;;  }
.pb100  {  padding-bottom: 10rem !important;;  }


.tcen  {text-align: center !important;}
.tleft  {text-align: left !important;}
.tright  {text-align: right !important;}


.block {display: block;}
.inline {display: inline;} 
.inline_block {display: inline-block ;}



h1 { font-size: 10rem; }
h2 { font-size: 9rem; }
h3 { font-size: 4.2rem; }
h4 { font-size: 3.6rem; }
h5 { font-size: 3rem; }
h6 { font-size: 2.6rem; }
p  { font-size: 2.2rem; word-break: keep-all; line-height: 1.6; }


@media (max-width: 1440px) {
  
}


@media (max-width: 1200px) {
  
h1 { font-size: 8rem; }
h2 { font-size: 7rem; }
h3 { font-size: 4rem; }
h4 { font-size: 3.2rem; }
h6 { font-size: 2.2rem; }
}

@media (max-width: 1024px) {
   
}

@media (max-width: 768px) {
   
    
}

@media (max-width: 600px) {
   h3 {font-size: 3.2rem; } 
}