@charset "utf-8";

/* 프리텐다드 속성 */
@font-face {
  font-family: "Pretendard";
  src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Thin.woff") format("woff");
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: "Pretendard";
  src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-ExtraLight.woff") format("woff");
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: "Pretendard";
  src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Pretendard";
  src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Pretendard";
  src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Pretendard";
  src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "Pretendard";
  src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Pretendard";
  src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-ExtraBold.woff") format("woff");
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: "Pretendard";
  src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Black.woff") format("woff");
  font-weight: 900;
  font-style: normal;
}

.font-thin {
  font-family: "Pretendard", sans-serif;
  font-weight: 100;
}

.font-extralight {
  font-family: "Pretendard", sans-serif;
  font-weight: 200;
}

.font-light {
  font-family: "Pretendard", sans-serif;
  font-weight: 300;
}

.font-regular {
  font-family: "Pretendard", sans-serif;
  font-weight: 400;
}

.font-medium {
  font-family: "Pretendard", sans-serif;
  font-weight: 500;
}

.font-semibold {
  font-family: "Pretendard", sans-serif;
  font-weight: 600;
}

.font-bold {
  font-family: "Pretendard", sans-serif;
  font-weight: 700;
}

.font-extrabold {
  font-family: "Pretendard", sans-serif;
  font-weight: 800;
}

.font-black {
  font-family: "Pretendard", sans-serif;
  font-weight: 900;
}

/* 기본 정보 */
body {
  font-family: "Pretendard", sans-serif;
  font-weight: 400;
}

.text-center {
  text-align: center !important;
}

.text-left {
  text-align: left !important;
}

.text-right {
  text-align: right !important;
}

.display-none {
  display: none;
}

.display-block {
  display: block;
}

.cursor-pointer {
  cursor: pointer;
}

.line-height-1 {
  line-height: 1;
}

.line-height-1-1 {
  line-height: 1.1;
}

.line-height-1-2 {
  line-height: 1.2;
}

.line-height-1-3 {
  line-height: 1.3;
}

.line-height-1-4 {
  line-height: 1.4;
}

.line-height-1-5 {
  line-height: 1.5;
}

.line-height-2 {
  line-height: 2;
}

/* 폰트 크기 */
.h48 {
  font-size: 48px;
}

.h42 {
  font-size: 42px;
}

.h40 {
  font-size: 40px;
}

.h36 {
  font-size: 36px;
}

.h34 {
  font-size: 34px;
}

.h32 {
  font-size: 32px;
}

.h28 {
  font-size: 28px;
}

.h24 {
  font-size: 24px;
}

.h20 {
  font-size: 20px;
}

.h18 {
  font-size: 18px;
}

.h16 {
  font-size: 16px;
}

.h14 {
  font-size: 14px;
}

.h13 {
  font-size: 13px;
}

.h12 {
  font-size: 12px;
}

.color-white {
  color: #FFFFFF;
}

.color-black {
  color: #000000;
}

.color-red {
  color: #FF0000;
}

.color-bg-red {
  background-color: rgb(255, 27, 76) !important;
}

.color-blue {
  color: blue;
}

.color-yellow {
  color: #fff002;
}

/* 기본 칼라 */
.dackColor900 {
  color: #232527;
}

.dackColor800 {
  color: #444444;
}

.dackColor700 {
  color: #636363;
}

.dackColor600 {
  color: #777777;
}

.dackColor500 {
  color: #A5A5A5;
}

.dackColor400 {
  color: #BFBFBF;
}

.dackColor300 {
  color: #E2E2E2;
}

.dackColor200 {
  color: #EFEFEF;
}

.dackColor100 {
  color: #F5F5F5;
}

.dackColor50 {
  color: #FAFAFA;
}

.dackBgColor900 {
  background-color: #232527;
}

.dackBgColor800 {
  background-color: #444444;
}

.dackBgColor700 {
  background-color: #636363;
}

.dackBgColor600 {
  background-color: #777777;
}

.dackBgColor500 {
  background-color: #A5A5A5;
}

.dackBgColor400 {
  background-color: #BFBFBF;
}

.dackBgColor300 {
  background-color: #E2E2E2;
}

.dackBgColor200 {
  background-color: #EFEFEF;
}

.dackBgColor100 {
  background-color: #F5F5F5;
}

.dackBgColor75 {
  background-color: #F7F7F7;
}

.dackBgColor50 {
  background-color: #FAFAFA;
}

/* 브랜드 칼라 */
.brandColor-purple {
  color: #8e43e9 !important;
}

.brandColor-orange {
  color: #ed7135 !important;
}

.brandColor-darkgray {
  color: #3a4a5f !important;
}

.brandColor-lightgray {
  color: #939393 !important;
}

.brandColor-darkBlue {
  color: #3A4A5F !important;
}

.brandBgColor-purple {
  background-color: #8e43e9 !important;
}

.brandBgColor-orange {
  background-color: #ed7135 !important;
}

.brandBgColor-darkgray {
  background-color: #3a4a5f !important;
}

.brandBgColor-lightgray {
  background-color: #939393 !important;
}

.brandBgColor-darkBlue {
  background-color: #3A4A5F !important;
}

/* 마진 패딩 속성 */
.w-p-1 {
  padding-left: 1%;
  padding-right: 1%;
}

.w-p-2 {
  padding-left: 2%;
  padding-right: 2%;
}

.w-p-10 {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

.w-p-15 {
  padding-left: 15px !important;
  padding-right: 15px !important;
}

.w-p-20 {
  padding-left: 20px !important;
  padding-right: 20px !important;
}

.w-p-25 {
  padding-left: 25px !important;
  padding-right: 25px !important;
}

.w-p-30 {
  padding-left: 30px !important;
  padding-right: 30px !important;
}

.w-p-35 {
  padding-left: 35px !important;
  padding-right: 35px !important;
}

.w-p-40 {
  padding-left: 40px !important;
  padding-right: 40px !important;
}

.w-p-45 {
  padding-left: 45px !important;
  padding-right: 45px !important;
}

.h-p-10 {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

.h-p-15 {
  padding-top: 15px !important;
  padding-bottom: 15px !important;
}

.h-p-20 {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

.h-p-25 {
  padding-top: 25px !important;
  padding-bottom: 25px !important;
}

.h-p-30 {
  padding-top: 30px !important;
  padding-bottom: 30px !important;
}

.h-p-35 {
  padding-top: 35px !important;
  padding-bottom: 35px !important;
}

.h-p-40 {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

.h-p-45 {
  padding-top: 45px !important;
  padding-bottom: 45px !important;
}

.w-m-10 {
  margin-left: 10px !important;
  margin-right: 10px !important;
}

.w-m-15 {
  margin-left: 15px !important;
  margin-right: 15px !important;
}

.w-m-20 {
  margin-left: 20px !important;
  margin-right: 20px !important;
}

.w-m-25 {
  margin-left: 25px !important;
  margin-right: 25px !important;
}

.w-m-30 {
  margin-left: 30px !important;
  margin-right: 30px !important;
}

.w-m-35 {
  margin-left: 35px !important;
  margin-right: 35px !important;
}

.w-m-40 {
  margin-left: 40px !important;
  margin-right: 40px !important;
}

.w-m-45 {
  margin-left: 45px !important;
  margin-right: 45px !important;
}

.h-m-10 {
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}

.h-m-15 {
  margin-top: 15px !important;
  margin-bottom: 15px !important;
}

.h-m-20 {
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}

.h-m-25 {
  margin-top: 25px !important;
  margin-bottom: 25px !important;
}

.h-m-30 {
  margin-top: 30px !important;
  margin-bottom: 30px !important;
}

.h-m-35 {
  margin-top: 35px !important;
  margin-bottom: 35px !important;
}

.h-m-40 {
  margin-top: 40px !important;
  margin-bottom: 40px !important;
}

.h-m-45 {
  margin-top: 45px !important;
  margin-bottom: 45px !important;
}

.p-0 {
  padding: 0 !important;
}

.p-5 {
  padding: 5px !important;
}

.p-10 {
  padding: 10px !important;
}

.p-15 {
  padding: 15px !important;
}

.p-20 {
  padding: 20px !important;
}

.p-25 {
  padding: 25px !important;
}

.p-30 {
  padding: 30px !important;
}

.p-35 {
  padding: 35px !important;
}

.p-40 {
  padding: 40px !important;
}

.p-45 {
  padding: 45px !important;
}

.m-5 {
  margin: 5px !important;
}

.m-10 {
  margin: 10px !important;
}

.m-15 {
  margin: 15px !important;
}

.m-20 {
  margin: 20px !important;
}

.m-25 {
  margin: 25px !important;
}

.m-30 {
  margin: 30px !important;
}

.p-t-5 {
  padding-top: 5px;
}

.p-t-10 {
  padding-top: 10px;
}

.p-t-15 {
  padding-top: 15px;
}

.p-t-20 {
  padding-top: 20px;
}

.p-t-25 {
  padding-top: 25px;
}

.p-t-30 {
  padding-top: 30px;
}

.p-t-35 {
  padding-top: 35px;
}

.p-t-40 {
  padding-top: 40px;
}

.p-t-45 {
  padding-top: 45px;
}

.p-t-50 {
  padding-top: 50px !important;
}

.p-b-5 {
  padding-bottom: 5px;
}

.p-b-10 {
  padding-bottom: 10px;
}

.p-b-15 {
  padding-bottom: 15px;
}

.p-b-20 {
  padding-bottom: 20px;
}

.p-b-25 {
  padding-bottom: 25px;
}

.p-b-30 {
  padding-bottom: 30px;
}

.p-b-35 {
  padding-bottom: 35px;
}

.p-b-40 {
  padding-bottom: 40px;
}

.p-b-45 {
  padding-bottom: 45px;
}

.p-b-50 {
  padding-bottom: 50px;
}

.p-l-5 {
  padding-left: 5px;
}

.p-l-10 {
  padding-left: 10px;
}

.p-l-15 {
  padding-left: 15px;
}

.p-l-20 {
  padding-left: 20px;
}

.p-l-25 {
  padding-left: 25px;
}

.p-l-30 {
  padding-left: 30px;
}

.p-l-35 {
  padding-left: 35px;
}

.p-l-40 {
  padding-left: 40px;
}

.p-l-45 {
  padding-left: 45px;
}

.p-l-50 {
  padding-left: 50px;
}

.p-r-5 {
  padding-right: 5px;
}

.p-r-10 {
  padding-right: 10px;
}

.p-r-15 {
  padding-right: 15px;
}

.p-r-20 {
  padding-right: 20px;
}

.p-r-25 {
  padding-right: 25px;
}

.p-r-30 {
  padding-right: 30px;
}

.p-r-35 {
  padding-right: 35px;
}

.p-r-40 {
  padding-right: 40px;
}

.p-r-45 {
  padding-right: 45px;
}

.p-r-50 {
  padding-right: 50px;
}

.m-t-5 {
  margin-top: 5px !important;
}

.m-t-10 {
  margin-top: 10px !important;
}

.m-t-12 {
  margin-top: 12px !important;
}

.m-t-15 {
  margin-top: 15px !important;
}

.m-t-20 {
  margin-top: 20px !important;
}

.m-t-25 {
  margin-top: 25px !important;
}

.m-t-30 {
  margin-top: 30px !important;
}

.m-t-35 {
  margin-top: 35px !important;
}

.m-t-40 {
  margin-top: 40px !important;
}

.m-t-45 {
  margin-top: 45px !important;
}

.m-t-50 {
  margin-top: 50px !important;
}

.m-t-55 {
  margin-top: 55px !important;
}

.m-t-60 {
  margin-top: 60px !important;
}

.m-t-65 {
  margin-top: 65px !important;
}

.m-t-70 {
  margin-top: 70px !important;
}

.m-t-75 {
  margin-top: 75px !important;
}

.m-t-80 {
  margin-top: 80px !important;
}

.m-t-85 {
  margin-top: 85px !important;
}

.m-t-90 {
  margin-top: 90px !important;
}

.m-t-95 {
  margin-top: 95px !important;
}

.m-t-100 {
  margin-top: 100px !important;
}

.m-b-5 {
  margin-bottom: 5px;
}

.m-b-10 {
  margin-bottom: 10px;
}

.m-b-15 {
  margin-bottom: 15px;
}

.m-b-20 {
  margin-bottom: 20px;
}

.m-b-25 {
  margin-bottom: 25px;
}

.m-b-30 {
  margin-bottom: 30px;
}

.m-b-35 {
  margin-bottom: 35px;
}

.m-b-40 {
  margin-bottom: 40px;
}

.m-b-45 {
  margin-bottom: 45px;
}

.m-b-50 {
  margin-bottom: 50px;
}

.m-l-5 {
  margin-left: 5px;
}

.m-l-10 {
  margin-left: 10px;
}

.m-l-13 {
  margin-left: 13px;
}

.m-l-15 {
  margin-left: 15px;
}

.m-l-20 {
  margin-left: 20px;
}

.m-l-25 {
  margin-left: 25px;
}

.m-l-30 {
  margin-left: 30px;
}

.m-l-35 {
  margin-left: 35px;
}

.m-l-40 {
  margin-left: 40px;
}

.m-l-45 {
  margin-left: 45px;
}

.m-l-50 {
  margin-left: 50px;
}

.m-r-5 {
  margin-right: 5px;
}

.m-r-10 {
  margin-right: 10px;
}

.m-r-15 {
  margin-right: 15px;
}

.m-r-20 {
  margin-right: 20px;
}

.m-r-25 {
  margin-right: 25px;
}

.m-r-30 {
  margin-right: 30px;
}

.m-r-35 {
  margin-right: 35px;
}

.m-r-40 {
  margin-right: 40px;
}

.m-r-45 {
  margin-right: 45px;
}

.m-r-50 {
  margin-right: 50px;
}

/* 버튼 속성 */
.btn {
  border-radius: 5px;
  border: 1px solid #939393;
  font-family: 'Pretendard', sans-serif;
  font-weight: 400;
}

.btn-gray {
  background-color: #939393;
  color: white;
  border: none !important;
}

.btn-gray-border {
  background-color: transparent;
  color: #939393;
  border: 1px solid #939393;
}

.btn-dark {
  background-color: #434343;
  color: white;
  border: none !important;
}

.btn-orange {
  background-color: #ED7135;
  color: white;
  border: none !important;
}

.btn-darkBlue {
  background-color: #3A4A5F;
  color: white;
  border: none !important;
}

.btn-white {
  background-color: white;
  color: #939393;
}

/* flex */
.flex {
  display: flex;
}

.flex-column {
  display: flex;
  flex-direction: column !important;
}

.flex-row {
  display: flex;
  flex-direction: row !important;
}

.flex-justify-center {
  justify-content: center !important;
}

.flex-justify-start {
  justify-content: flex-start !important;
}

.flex-justify-end {
  justify-content: flex-end !important;
}

.flex-align-center {
  align-items: center !important;
}

.flex-align-start {
  align-items: flex-start !important;
}

.flex-align-end {
  align-items: flex-end !important;
}

.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex-split-w {
  width: 635px;
  height: 100%;
  border-right: 1px solid #939393;
}

.flex-split-h-line {
  margin-left: -20px;
  margin-top: 5px;
  margin-bottom: 5px;
  width: 635px;
  border-bottom: 1px solid #939393;
}

.flex-1 {
  flex: 1 !important;
}

.flex-gap-5 {
  gap: 5px !important;
}

.flex-gap-10 {
  gap: 10px !important;
}

.flex-gap-15 {
  gap: 15px !important;
}

.flex-gap-20 {
  gap: 20px !important;
}

.flex-gap-25 {
  gap: 25px !important;
}

.flex-gap-30 {
  gap: 30px !important;
}

.flex-gap-35 {
  gap: 35px !important;
}

.flex-gap-40 {
  gap: 40px !important;
}

.flex-gap-45 {
  gap: 45px !important;
}

.flex-gap-50 {
  gap: 50px !important;
}

.flex-gap-55 {
  gap: 55px !important;
}

.flex-gap-60 {
  gap: 60px !important;
}


/* 보더 정의 */
.border-top-none {
  border-top: none !important;
}

.border-bottom-none {
  border-bottom: none !important;
}

.border-left-none {
  border-left: none !important;
}

.border-right-none {
  border-right: none !important;
}

.border-top-left-radius-5 {
  border-top-left-radius: 5px !important;
}

.border-top-right-radius-5 {
  border-top-right-radius: 5px !important;
}

.border-bottom-left-radius-5 {
  border-bottom-left-radius: 5px !important;
}

.border-bottom-right-radius-5 {
  border-bottom-right-radius: 5px !important;
}

.border-top-left-radius-none {
  border-top-left-radius: 0 !important;
}

.border-top-right-radius-none {
  border-top-right-radius: 0 !important;
}

.border-bottom-left-radius-none {
  border-bottom-left-radius: 0 !important;
}

.border-bottom-right-radius-none {
  border-bottom-right-radius: 0 !important;
}

.border-gray {
  border: 1px solid #939393;
}