@charset "UTF-8";
/* =================================================
title       :base
create date :2026-06

memo :
기존 프로젝트 Base Style
(기존 CSS 이관 - css, css_2023 폴더)
- reset
- normalize
- typography
- 기본 table
- 기본 form
- helper
================================================= */


/* ==========================================
  1. reset
========================================== */
h1 {
  font-size:var(--text-xxl);
  color:var(--color-text-primary);
  font-weight:700;
}
h2 {
  font-size:var(--text-xl);
  color:var(--color-text-primary);
  font-weight:700;
}
h3 {
  font-size:var(--text-lg);
  color:var(--color-text-primary);
  font-weight:700;
}
body {
  margin: 0;
  padding: 0;
  font-family: var(--text-font-family);
  font-size:var(--text-sm);
  line-height: 1.5;
  font-weight: 400;
  color: #555;
  word-break: keep-all;
  text-underline-position: under;
}

.caption,
.helper-text {font-size:var(--text-xs);}

form,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ul li,
p,
th,
td,
ol,
ul,
li,
p,
span,
label,
input,
button,
textarea,
table td,
th {
  color:var(--color-text-primary);
  font-family:var(--text-font-family) !important;
  background:none;
}

select {
  color:var(--color-text-primary);
  font-family:var(--text-font-family) !important;
}

a:hover,
button:hover {
  transition:all .2s ease;
  opacity:0.9;
}

a:hover {
  text-decoration: none;
  color: inherit;
}

input[type="radio"],
input[type="checkbox"] {
  -webkit-border:1px solid;
  border:1px solid;
  box-sizing:border-box;
  padding:0;
}

input[type="button"] {
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
}

img,
table {
  border:none;
}

li {
  list-style:none
}

form,
fieldset {
  margin:0;
  padding:0;
  border:none;
}

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

table thead {
  background: transparent;
}

.text-underline,
.text-underline:hover {
  text-decoration:underline;
}

button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button;
}

button:not(:disabled),
[type='button']:not(:disabled),
[type='reset']:not(:disabled),
[type='submit']:not(:disabled) {
  cursor: pointer;
}

button::-moz-focus-inner,
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

input[type="text"].error,
input[type="password"].error {
  border: 1px solid #e73838;
}

input[type="text"].read,
input[type="password"].read {
  background: #e4e4e4;
}

input[type="text"]:read-only {
  border-color: #DEE4EA;
  background: #F3F4F6 !important;
  color: #33363D;
}

input[type="text"]:disabled,
input[type="password"]:disabled {
  border-color: #DEE4EA !important;
  background: #F3F4F6 !important;
  color: #B1BAC3 !important;
}

/* 말줄임 */
.text-ellipsis {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* 말줄임 2줄 */
.text-ellipsis2 {
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background-color: #eaeaea;
  border-left: 1px solid #cecece;
}

::-webkit-scrollbar-thumb {
  background-color: #cecece;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #aaa;
}

::-webkit-scrollbar-track {
  border-radius: 0;
  box-shadow: none;
  border: 0;
}

::-webkit-scrollbar-thumb {
  border-radius: 0;
  box-shadow: none;
  border: 0;
}

/* clearfix */
.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

.clearfix:before,
.clearfix:after {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

.clearfix:after {
  clear: both;
}

#skip_nav {
  position: absolute;
  left: 0;
  top: -1000px;
  width: 100%;
  height: 0px;
  z-index: 1002;
  line-height: 0px;
  font-size: 0px;
}
#skip_nav a {
  display: block;
  text-align: center;
  width: 100%;
  line-height: 0px;
  font-size: 0px;
}
#skip_nav a:focus, #skip_nav a:hover, #skip_nav a:active {
  position: absolute;
  left: 0;
  top: 1000px;
  padding: 10px 0;
  display: block;
  height: 45px;
  background: #20262c;
  font-size: 15px;
  font-weight: bold;
  line-height: 18px;
  color: #fff;
}

caption, legend, .sr-only, .sr_only, .hidden, .none, .blind, .IR {
  overflow: hidden;
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0 none;
  clip: rect(0, 0, 0, 0);
}

:is(input, select, textarea):focus-visible {
  border-color: var(--color-primary);
  outline: 1px solid var(--color-primary);
  outline-offset: 2px;
}

.d-block {
  display: block !important;
}

.d-inline-block {
  display: inline-block !important;
}

.pos-r {position: relative !important;}

/* ==========================================
   정렬
========================================== */
.txt_left,
.text-left {
  text-align:left !important;
}

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

.txt_right,
.text-right {
  text-align:right;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

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

.flex-nowrap {
  flex-wrap: nowrap !important;
}

/* ==========================================
  넓이
========================================== */
.border-0 {
  border: 0;
}

.wp100 {
  width: 100% !important;
}

.wp80 {
  width: 80% !important;
}

.wp50 {
  width: 50% !important;
}

.h120 {
  height: 120px;
}

/* ==========================================
  padding / margin
========================================== */
.p0 {
  padding: 0 !important
}

.pd-y40 {
  padding:40px 0 !important;
}

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

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


.m0 {
  margin: 0 !important
}

.ml10 {
  margin-left: 10px !important;
}

.ml20 {
  margin-left: 20px !important;
}

.ml30 {
  margin-left: 30px !important;
}

.ml40 {
  margin-left: 40px !important;
}

.ml50 {
  margin-left: 50px !important;
}


.mr5 {
  margin-right: 5px !Important;
}

.mr10 {
  margin-right: 10px !important;
}

.mr20 {
  margin-right: 20px !important;
}

.mr30 {
  margin-right: 30px !important;
}

.mr40 {
  margin-right: 40px !important;
}

.mr50 {
  margin-right: 50px !important;
}


.mt0 {
  margin-top: 0 !Important;
}

.mt5 {
  margin-top: 5px !Important;
}

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

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

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

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

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

.mt53 {
  margin-top: 53px !Important;
}

.mt60 {
  margin-top: 60px !Important;
}

.mt70 {
  margin-top: 70px !Important;
}

.mt80 {
  margin-top: 80px !Important;
}

.mt90 {
  margin-top: 90px !Important;
}

.mt100 {
  margin-top: 100px !Important;
}

.mb0 {
  margin-bottom: 0 !Important;
}

.mb5 {
  margin-bottom: 5px !Important;
}

.mb10 {
  margin-bottom: 10px !important;
}

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

.mb30 {
  margin-bottom: 30px !important;
}

.mb40 {
  margin-bottom: 40px !important;
}

.mb50 {
  margin-bottom: 50px !important;
}

.mb80 {
  margin-bottom: 80px !important;
}

.mb100 {
  margin-bottom: 100px !important;
}


.co-red{
  color: #F44A4A;
}