/* 속성 */
.f-left {
  float: left;
}

.f-right {
  float: right;
}

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

.flex-d-row {
  display: flex;
  flex-direction: row !important;
  gap: 2px;
}

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

.flex-center {
  display: flex;
  justify-content: center;
}

.center {
  justify-content: center;
  align-items: center;
}

.start {
  justify-content: flex-start;
  align-items: center;
}

.rowstart {
  justify-content: center;
  align-items: flex-start;
}

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

.around {
  justify-content: space-around;
  align-items: center;
}

.end {
  justify-content: flex-end;
  align-items: center;
}

.rowend {
  justify-content: center;
  align-items: flex-end;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-shrink {
  flex-shrink: 0;
}

.flex1 {
  flex: 1;
}

.g-0 {
  gap: 0px !important;
}

.g-2 {
  gap: 2px !important;
}

.g-4 {
  gap: 4px !important;
}

.g-6 {
  gap: 6px !important;
}

.g-8 {
  gap: 8px !important;
}

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

.g-12 {
  gap: 12px !important;
}

.g-16 {
  gap: 16px !important;
}

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

.g-24 {
  gap: 24px !important;
}

.t-12 {
  font-size: .75rem;
}

.t-tiny {
  font-size: 0.875rem;
  font-weight: normal;
}

.t-xsmall {
  font-size: .9375rem;
}

.t-small {
  font-size: 1rem !important;
}

.t-xmedium {
  font-size: 1.15rem !important;
}

.t-medium {
  font-size: 1.25rem !important;
}

.t-large {
  font-size: 1.5rem !important;
}

.t-thin {
  font-weight: 200 !important;
}

.t-normal {
  font-weight: 400 !important;
}

.t-bold {
  font-weight: 600 !important;
}

.t-extra {
  font-weight: 800 !important;
}

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

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

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

.t-underline {
  text-decoration: underline;
}

.line-h-s {
  line-height: 1.4 !important;
}

.hidden {
  display: none !important;
}

.notice {
  font-size: 3.5vw;
}

.req {
  height: 16px;
  line-height: normal;
  color: #EA6062;
}

.c-white {
  color: white !important;
}

.c-gray {
  color: #878B8D !important;
}

.color-gray-light {
  color: #c2c2c2;
}

.c-lgray {
  color: #ffffff82 !important
}

.c-navy {
  color: #004E86;
}

.w100 {
  width: 100% !important;
}

.w50 {
  width: 50% !important;
}

.w30 {
  width: 30% !important;
}

.max-w-800 {
  max-width: 800px;
}

.blue-btn {
  display: inline-block;
  padding: 12px;
  /* max-width: 400px; */
  max-height: 46px;
  min-width: fit-content;
  background-color: var(--color--main) !important;
  color: #fff !important;
  border: none;
  border-radius: 6px;
  font-weight: normal;
  line-height: normal;
}

.blue-btn2 {
  display: inline-block;
  padding: 0.3rem 0.5rem;
  max-width: 400px;
  max-height: 1.5rem;
  background-color: var(--color--sub);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-weight: normal;
}

.blue-line-btn {
  display: inline-block;
  padding: 8px 12px;
  max-height: 46px;
  background-color: #fff;
  border: 1px solid var(--color--sub);
  border-radius: 6px;
  font-weight: normal;
}

.green-btn2 {
  display: inline-block;
  padding: 0.3rem 0.5rem;
  max-width: 400px;
  max-height: 1.5rem;
  background: #03C75A;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-weight: normal;
}

.pink-btn2 {
  display: inline-block;
  padding: 0.3rem 0.5rem;
  max-height: 1.5rem;
  background: #E65656;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-weight: normal;
}

.navy-btn {
  display: inline-block;
  padding: 14px 32px;
  max-height: 46px;
  background-color: var(--color--main);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-weight: normal;
}

.navy-btn-s {
  display: inline-block;
  padding: 4px 12px;
  max-height: 46px;
  background-color: var(--color--main);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-weight: normal;
}

.gray-btn {
  display: inline-block;
  padding: 14px 32px;
  max-height: 46px;
  background-color: #878B8D;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-weight: normal;
}

.border-btn {
  display: inline-block;
  padding: 12px;
  max-height: 46px;
  background-color: #fff;
  color: #333;
  border: 1px solid #E8E8E8;
  border-radius: 6px;
  font-weight: normal;
  text-align: center;
}

.line-btn {
  max-height: 46px;
  background: none;
  border: none;
  padding: 0 0 4px 0;
  border-bottom: 1px solid #333;
}

.none-btn {
  background: none;
  border: none;
}

.wide-btn {
  width: 100%;
  height: 46px;
  text-align: center;
}

.del-btn {
  width: 46px;
  height: 46px;
  background: #FFE4E4;
  border-radius: 6px;
  border: none;
}

.s-btn {
  padding: 4px 8px;
  font-size: 12px;
}

.btn-wrap-fixed {
  display: flex;
  flex-direction: row;
  justify-content: center;
  position: fixed;
  bottom: 0;
  left: 50%;
  width: 100%;
  max-width: 800px;
  transform: translateX(-50%);
  padding: 12px 16px;
  background: #fff;
  border-top: 1px solid #eee;
  z-index: 1;
}

.btn-wrap {
  margin-top: 20px;
}

.btn-wrap select {
  height: 46px !important;
  background: var(--color--sub) !important;
  color: #fff;
  border-radius: 6px;
  border: none !important;
  text-align: center;
}

.btn-wrap-type01 {
  width: 100%;
}

.btn-wrap-type02 {
  width: 100%;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.btn-wrap-type02 select, .btn-wrap-type02 input, .btn-wrap-type02 button:not(.del-btn) {
  width: 50%;
}

.btn-wrap-type03 {
  gap: 8px;
}

.btn-wrap-type03 select {
  width: 40%;
}

/* box */
.box {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
  background: #fff;
  border-radius: 8px;
  font-size: 14px;
}

.box.gray {
  background: #f5f5f5;
}

.box.border {
  border: 1px solid #E8E8E8;
}

.box.border.on {
  border: 1px solid var(--color--point);
}

.h-46 {
  height: 46px;
}

.h-auto {
  height: auto !important;
}

.x-scroll {
  overflow-x: auto;
  white-space: nowrap;
}

.x-scroll::-webkit-scrollbar {
  display: none;
  /* 스크롤바 숨기기 */
}

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

.line {
  width: calc(100% + 40px);
  margin-left: -20px;
  border-bottom: 1px solid #eee;
}

.b-line {
  position: relative;
}

.b-line::after {
  content: '';
  width: calc(100% + 40px);
  height: 1px;
  margin-left: -20px;
  display: block;
  position: absolute;
  bottom: 0;
  background: #eee;
}

.b-line-6 {
  position: relative;
}

.b-line-6::after {
  content: '';
  width: calc(100% + 40px);
  height: 6px;
  margin-left: -20px;
  display: block;
  position: absolute;
  bottom: 0;
  background: #eee;
}

.b-bottom {
  width: 100%;
  border-bottom: 1px solid #eee;
}

.image-upload {
  width: calc(100vw / 3 - 20px);
  max-width: calc(800px / 3 - 20px);
  height: calc(100vw / 3 - 20px);
  max-height: calc(800px / 3 - 20px);
  border: 1px dashed #ccc;
  border-radius: 10px;
  object-fit: cover;
}

.emptyBox {
  height: calc(100dvh - 178px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

.bg_opacity {
  width: 100%;
  height: 100dvh;
  position: absolute;
  top: 0;
  left: 0;
  background: #00000085;
}

/* 포인트 색상 */
.main-color {
  color: var(--color--main);
}

.point-color {
  color: var(--color--sub);
}

.red-color {
  color: red;
}

.blue-color {
  color: rgb(31, 101, 192);
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.visible {
  overflow: visible !important;
}

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

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

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

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

.p-24-16 {
  padding: 24px 16px !important;
}

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

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

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

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

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

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

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

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

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

.m-0 {
  margin: 0 !important;
}

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

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

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

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

.m-t-1 {
  margin-top: 1rem !important;
}

.m-t-2 {
  margin-top: 2rem !important;
}

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

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

.m-t-3 {
  margin-top: 3rem !important;
}

.m-t-4rem {
  margin-top: 4rem !important;
}

.m-b-0 {
  margin-bottom: 0 !important;
}

.m-b-4 {
  margin-bottom: 4px !important;
}

.m-b-8 {
  margin-bottom: 8px !important;
}

.m-b-12 {
  margin-bottom: 12px !important;
}

.m-b-1 {
  margin-bottom: 1rem !important;
}

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

.m-b-24 {
  margin-bottom: 24px !important;
}

.m-b-2 {
  margin-bottom: 2rem !important;
}

.m-b-3 {
  margin-bottom: 3rem !important;
}

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

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

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

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

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

/* 말줄임 1줄 */
.ellipse_one {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 1 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
}

/* 말줄임 2줄 */
.ellipse_two {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
  line-height: 1rem;
}