@charset "UTF-8";

/*
 * Css Framework  v0.1 sample
 *
 * @author Nuel Ha
 * @since 2023.02.23
 *
 * << 개정이력(Modification Information)>>
 *
 *   수정일          수정자                수정내용
 * -------------   --------    ---------------------------
 * 2023. 02. 23      하　늘        최초 생성
 */


/*
 * 사용방법
 * 1. 각 테마(light/dark)에 맞게 메인컬러와 서브컬러를 지정한다.
 * 2. 기본 폰트를 설정한다.
 * 3. 기본 변수 설정(option)
 */

/* ========================================================================
   1. 컬러 설정
 ========================================================================== */
:root,
:root[data-theme=light] {
  /* 라이트(기본) 테마 */
  /* 컬러 셋팅 */
  /* 기본 폰트 컬러 */
  --Default: #29292B;
  --Background: #ffffff;

  /* 메인컬러 & 서브컬러 지정 */
  --Primary1: #0860CE;
  --Primary2: #55BBD3;
  --Primary3: #31E493;

  /* 그레이스케일 컬러 */
  --Greyscale9: #29292B;
  --Greyscale8: #36373C;
  --Greyscale7: #4D4F56;
  --Greyscale6: #878991;
  --Greyscale5: #A9ABB3;
  --Greyscale4: #CED0D6;
  --Greyscale3: #DEE0E6;
  --Greyscale2: #E9EAEF;
  --Greyscale1: #F1F3F5;
  --Greyscale0: #F8F9FB;

  /* 기본 시스템 컬러 */
  --Error: #d32f2f;
  --Warning: #f9a825;
  --Success: #4caf50;
  --information: #0091ea;

  /* 기본사이즈 */
  --containerSize: 1480px
}

:root[data-theme=dark] {
  /* 다크모드 테마 */
  /* 컬러 셋팅 */
  /* 기본 폰트 컬러 */
  --Default: #FFFFFF;
  --Background: #29292B;

  /* 메인컬러 & 서브컬러 지정 */
  --Primary1: #0860CE;
  --Primary2: #55BBD3;
  --Primary3: #31E493;

  /* 그레이스케일 컬러 */
  --Greyscale0: #29292B;
  --Greyscale1: #36373C;
  --Greyscale2: #4D4F56;
  --Greyscale3: #878991;
  --Greyscale4: #A9ABB3;
  --Greyscale5: #CED0D6;
  --Greyscale6: #DEE0E6;
  --Greyscale7: #E9EAEF;
  --Greyscale8: #F1F3F5;
  --Greyscale9: #F8F9FB;

  /* 기본 시스템 컬러 */
  --Error: #d32f2f;
  --Warning: #f9a825;
  --Success: #4caf50;
  --information: #0091ea;
}

/* ========================================================================
   2. 기본 폰트 설정
 ========================================================================== */
:root {
  font-family: "Pretendard GOV",
    -apple-system,
    Arial,
    sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
}

/*
 * 기본서체
 * 경량화된 Noto Sans KR 적용
*/
@font-face {
  font-family: 'Pretendard GOV';
  font-weight: 900;
  font-display: block;
  src: local('Pretendard GOV Black'), url(../fonts/woff2/PretendardGOV-Black.woff2) format('woff2'), url(../fonts/woff/PretendardGOV-Black.woff) format('woff')
}

@font-face {
  font-family: 'Pretendard GOV';
  font-weight: 800;
  font-display: block;
  src: local('Pretendard GOV ExtraBold'), url(../fonts/woff2/PretendardGOV-ExtraBold.woff2) format('woff2'), url(../fonts/woff/PretendardGOV-ExtraBold.woff) format('woff')
}

@font-face {
  font-family: 'Pretendard GOV';
  font-weight: 700;
  font-display: block;
  src: local('Pretendard GOV Bold'), url(../fonts/woff2/PretendardGOV-Bold.woff2) format('woff2'), url(../fonts/woff/PretendardGOV-Bold.woff) format('woff')
}

@font-face {
  font-family: 'Pretendard GOV';
  font-weight: 600;
  font-display: block;
  src: local('Pretendard GOV SemiBold'), url(../fonts/woff2/PretendardGOV-SemiBold.woff2) format('woff2'), url(../fonts/woff/PretendardGOV-SemiBold.woff) format('woff')
}

@font-face {
  font-family: 'Pretendard GOV';
  font-weight: 500;
  font-display: block;
  src: local('Pretendard GOV Medium'), url(../fonts/woff2/PretendardGOV-Medium.woff2) format('woff2'), url(../fonts/woff/PretendardGOV-Medium.woff) format('woff')
}

@font-face {
  font-family: 'Pretendard GOV';
  font-weight: 400;
  font-display: block;
  src: local('Pretendard GOV Regular'), url(../fonts/woff2/PretendardGOV-Regular.woff2) format('woff2'), url(../fonts/woff/PretendardGOV-Regular.woff) format('woff')
}

@font-face {
  font-family: 'Pretendard GOV';
  font-weight: 300;
  font-display: block;
  src: local('Pretendard GOV Light'), url(../fonts/woff2/PretendardGOV-Light.woff2) format('woff2'), url(../fonts/woff/PretendardGOV-Light.woff) format('woff')
}

@font-face {
  font-family: 'Pretendard GOV';
  font-weight: 200;
  font-display: block;
  src: local('Pretendard GOV ExtraLight'), url(../fonts/woff2/PretendardGOV-ExtraLight.woff2) format('woff2'), url(../fonts/woff/PretendardGOV-ExtraLight.woff) format('woff')
}

@font-face {
  font-family: 'Pretendard GOV';
  font-weight: 100;
  font-display: block;
  src: local('Pretendard GOV Thin'), url(../fonts/woff2/PretendardGOV-Thin.woff2) format('woff2'), url(../fonts/woff/PretendardGOV-Thin.woff) format('woff')
}

/* ========================================================================
   3. 기본 변수 설정(option)
 ========================================================================== */
:root {
  /*
  * 그리드 시스템
  * -> 주의! 수정해도 반응형에 반영 안됨
  */
}

/* ========================================================================
   CSS RESET / PREFIX
 ========================================================================== */

:root {
  /* 아이폰 폰트 깨지는 현상 수정 */
  /* 크롬, 사파리, 오페라 신버전 */
  -webkit-text-size-adjust: 100%;
  /* IE */
  -ms-text-size-adjust: 100%;
  /* 파이어폭스 */
  -moz-text-size-adjust: 100%;
  /* 오페라 구버전 */
  -o-text-size-adjust: 100%;
}

body {
  background-color: var(--Background);
}

table,
th,
td,
input,
select,
button,
textarea,
pre {
  font: inherit;
  color: inherit;
}

body,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
select,
button,
textarea,
p,
blockquote,
table,
th,
td {
  margin: 0;
  padding: 0;
}

ol,
ul {
  list-style: none;
}

img,
fieldset {
  border: 0;
}

img {
  vertical-align: middle;
}

a {
  color: var(--Default);
  text-decoration: none;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
}

th,
td {
  word-break: break-all;
  word-wrap: break-word;
}

label {
  cursor: pointer;
}

input,
button {
  border: 0;
  border-radius: 0;
  background-color: unset;
}

textarea {
  resize: none;
}

input,
button,
select,
textarea {
  vertical-align: middle;
}

address,
caption,
cite,
code,
dfn,
em,
var {
  font-style: normal;
}

hr {
  clear: both;
  display: none;
}

blockquote,
q {
  quotes: none;
}

abbr,
acronym {
  border: 0;
}

legend,
caption {
  visibility: hidden;
  overflow: hidden;
  line-height: 0;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  text-indent: -99999px;
  font-size: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
main {
  display: block;
}

/* ========================================================================
   Grid System
 ========================================================================== */

.container {
  display: block;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.row {
  display: flex;
  -webkit-box-flex: 0;
  flex: 0 1 auto;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-direction: row;
  flex-wrap: wrap;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.row .col {
  float: left;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  min-height: 1px;
  justify-content: space-between;
  box-sizing: border-box;
}

.row .col {
  -webkit-box-flex: 0;
  flex: 0 0 auto;
  padding: 16px;
  max-width: 100%;
}

@media (max-width: 319px) {
  .container {
    width: calc(100% - 32px);
  }

  .row .col {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
    padding: 8px;
  }
}

/* 작은 모바일(플립, 아이폰 SE 등) ~ 모바일 */
@media (min-width: 320px) {
  .container {
    width: calc(100% - 32px);
  }

  .row .col {
    padding: 8px;
  }

  .row .col.m1 {
    max-width: 8.3333333333%;
    flex-basis: 8.3333333333%;
  }

  .row .col.m2 {
    max-width: 16.6666666667%;
    flex-basis: 16.6666666667%;
  }

  .row .col.m3 {
    max-width: 25%;
    flex-basis: 25%;
  }

  .row .col.m4 {
    max-width: 33.3333333333%;
    flex-basis: 33.3333333333%;
  }

  .row .col.m5 {
    max-width: 41.6666666667%;
    flex-basis: 41.6666666667%;
  }

  .row .col.m6 {
    max-width: 50%;
    flex-basis: 50%;
  }

  .row .col.m7 {
    max-width: 58.3333333333%;
    flex-basis: 58.3333333333%;
  }

  .row .col.m8 {
    max-width: 66.6666666667%;
    flex-basis: 66.6666666667%;
  }

  .row .col.m9 {
    max-width: 75%;
    flex-basis: 75%;
  }

  .row .col.m10 {
    max-width: 83.3333333333%;
    flex-basis: 83.3333333333%;
  }

  .row .col.m11 {
    max-width: 91.6666666667%;
    flex-basis: 91.6666666667%;
  }

  .row .col.m12 {
    max-width: 100%;
    flex-basis: 100%;
  }

  .row .col.m-5 {
    max-width: 20%;
    flex-basis: 20%;
  }

}

/* 태블릿 */
@media (min-width: 768px) {
  .container {
    width: calc(100% - 64px);
  }

  .row .col {
    padding: 8px;
  }

  .row .col.t1 {
    max-width: 8.3333333333%;
    flex-basis: 8.3333333333%;
  }

  .row .col.t2 {
    max-width: 16.6666666667%;
    flex-basis: 16.6666666667%;
  }

  .row .col.t3 {
    max-width: 25%;
    flex-basis: 25%;
  }

  .row .col.t4 {
    max-width: 33.3333333333%;
    flex-basis: 33.3333333333%;
  }

  .row .col.t5 {
    max-width: 41.6666666667%;
    flex-basis: 41.6666666667%;
  }

  .row .col.t6 {
    max-width: 50%;
    flex-basis: 50%;
  }

  .row .col.t7 {
    max-width: 58.3333333333%;
    flex-basis: 58.3333333333%;
  }

  .row .col.t8 {
    max-width: 66.6666666667%;
    flex-basis: 66.6666666667%;
  }

  .row .col.t9 {
    max-width: 75%;
    flex-basis: 75%;
  }

  .row .col.t10 {
    max-width: 83.3333333333%;
    flex-basis: 83.3333333333%;
  }

  .row .col.t11 {
    max-width: 91.6666666667%;
    flex-basis: 91.6666666667%;
  }

  .row .col.t12 {
    max-width: 100%;
    flex-basis: 100%;
  }

  .row .col.t-5 {
    max-width: 20%;
    flex-basis: 20%;
  }
}

/* 데스크탑 ~ 전체 화면 */
@media (min-width: 1200px) {
  .container {
    width: calc(100% - 64px);
  }

  .row .col {
    padding: 16px;
  }

  .row .col.d1 {
    max-width: 8.3333333333%;
    flex-basis: 8.3333333333%;
  }

  .row .col.d2 {
    max-width: 16.6666666667%;
    flex-basis: 16.6666666667%;
  }

  .row .col.d3 {
    max-width: 25%;
    flex-basis: 25%;
  }

  .row .col.d4 {
    max-width: 33.3333333333%;
    flex-basis: 33.3333333333%;
  }

  .row .col.d5 {
    max-width: 41.6666666667%;
    flex-basis: 41.6666666667%;
  }

  .row .col.d6 {
    max-width: 50%;
    flex-basis: 50%;
  }

  .row .col.d7 {
    max-width: 58.3333333333%;
    flex-basis: 58.3333333333%;
  }

  .row .col.d8 {
    max-width: 66.6666666667%;
    flex-basis: 66.6666666667%;
  }

  .row .col.d9 {
    max-width: 75%;
    flex-basis: 75%;
  }

  .row .col.d10 {
    max-width: 83.3333333333%;
    flex-basis: 83.3333333333%;
  }

  .row .col.d11 {
    max-width: 91.6666666667%;
    flex-basis: 91.6666666667%;
  }

  .row .col.d12 {
    max-width: 100%;
    flex-basis: 100%;
  }

  .row .col.d-5 {
    max-width: 20%;
    flex-basis: 20%;
  }
}


/* ========================================================================
   Media Query Classes
 ========================================================================== */

@media only screen and (max-width: 767px) {
  .showM {
    display: block !important;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1199px) {
  .showT {
    display: block !important;
  }
}

@media only screen and (min-width: 1200px) {
  .showD {
    display: block !important;
  }
}

@media only screen and (max-width: 767px) {
  .hideM {
    display: none !important;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1199px) {
  .hideT {
    display: none !important;
  }
}

@media only screen and (min-width: 1200px) {
  .hideD {
    display: none !important;
  }
}