/*공통영역 시작*/
/*css초기화*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
@import url('all.css');


:root {
  --esta-main-color: #cc1f36;
  --uk-eta-main-color: #1D70B8;
  --keta-main-color: #0066f9;
  --ca-eta-main-color: #26374a;
  --sub-color: #1C3764;
}

/* ------------- font ------------------- */
@font-face {
  font-family: 'Pretendard';
  font-weight: 900;
  font-display: swap;
  src: local('Pretendard Black'), url('/html/font/Pretendard-Black.otf') format('otf');
}

@font-face {
  font-family: 'Pretendard';
  font-weight: 800;
  font-display: swap;
  src: local('Pretendard ExtraBold'), url('/html/font/Pretendard-ExtraBold.otf') format('otf');
}

@font-face {
  font-family: 'Pretendard';
  font-weight: 700;
  font-display: swap;
  src: local('Pretendard Bold'), url('/html/font/Pretendard-Bold.otf') format('otf');
}

@font-face {
  font-family: 'Pretendard';
  font-weight: 600;
  font-display: swap;
  src: local('Pretendard SemiBold'), url('/html/font/Pretendard-SemiBold.otf') format('otf');
}

@font-face {
  font-family: 'Pretendard';
  font-weight: 500;
  font-display: swap;
  src: local('Pretendard Medium'), url('/html/font/Pretendard-Medium.otf') format('otf');
}

@font-face {
  font-family: 'Pretendard';
  font-weight: 400;
  font-display: swap;
  src: local('Pretendard Regular'), url('/html/font/Pretendard-Regular.otf') format('otf');
}

@font-face {
  font-family: 'Pretendard';
  font-weight: 300;
  font-display: swap;
  src: local('Pretendard Light'), url('/html/font/Pretendard-Light.otf') format('otf');
}

@font-face {
  font-family: 'Pretendard';
  font-weight: 200;
  font-display: swap;
  src: local('Pretendard ExtraLight'), url('/html/font/Pretendard-ExtraLight.otf') format('otf');
}

@font-face {
  font-family: 'Pretendard';
  font-weight: 100;
  font-display: swap;
  src: local('Pretendard Thin'), url('/html/font/Pretendard-Thin.otf') format('otf');
}

/* ------------------ font ------------------ */
body {
  background: #fff;
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif !important;
  font-size: 14px;
  color: #555555;
  font-weight: normal;
  padding: 0px;
  margin: 0px;
  letter-spacing: -0px;
}

html,
body {
  width: 100%;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  letter-spacing: 0px;
}

pre {
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif !important;
}

div,
p,
ul,
li,
table,
th,
td,
textarea,
input,
span,
form,
h1,
h2,
h3,
h4,
h5,
h6,
dt,
dl,
dd,
em,
sup {
  padding: 0px;
  margin: 0px;
  word-break: keep-all;
}

h1 {
  font-size: 40px;
  font-weight: 800;
  color: white;
}

h2 {
  font-size: 28px;
  line-height: 42px;
  font-weight: 700;
  color: #111;
}

h3 {
  font-size: 24px;
  font-weight: 700;
  color: #111;
}

ul,
ol,
dl,
dd,
dt,
li {
  list-style-type: none;
  margin: 0;
  padding: 0px;
  line-height: inherit;
  font-size: inherit;
  color: inherit;
  letter-spacing: 0px;
}

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

img {
  border: 0;
  vertical-align: middle;
  outline: none;
  image-rendering: -webkit-optimize-contrast !important;
}

hr {
  margin: 0;
  padding: 0;
  border: 1px solid #d5d5d5;
}

a,
a:link,
a:visited,
a:active {
  color: #000;
  letter-spacing: normal;
  text-decoration: none !important;
  letter-spacing: 0px;
}

a:hover {
  color: #000;
  text-decoration: none !important;
}

input:focus {
  outline: none;
}

* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

button {
  cursor: pointer;
  margin: 0;
  padding: 0;
  background: none;
  outline: none;
  border: none;
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif !important;

}

button:focus {
  outline: none;
}

legend {
  padding: 0;
}

textarea {
  border: none;
}


input,
textarea,
button,
select {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -o-border-radius: 0;
  border-radius: 0;
  appearance: none;
  background-color: transparent;
  border: none;
}

select,
input {
  border: 1px solid #d5d5d5;
}

select option {
  color: #555;
}

input::placeholder,
textarea::placeholder {
  display: none;
}

select:focus,
select:focus option {
  appearance: none;
}

input:focus {
  border-color: #cc1f36;
}

select:focus option {
  color: #333;
}

picture {
  display: block;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

/* IE10 이상에서 input box 에 추가된 지우기 버튼 제거 */
input::-ms-clear {
  display: none;
}

/* IE 에서 Select box 화살표 제거 */
select::-ms-expand {
  display: none;
}

input::-webkit-input-placeholder {
  color: 888888 !important;
  font-weight: 400 !important;
  font-size: 16px !important;
}

input:-ms-input-placeholder {
  color: #888888 !important;
  font-weight: 500 !important;
  font-size: 16px !important;
}

/*커스텀*/
::placeholder {
  color: 888888 !important;
  font-weight: 500 !important;
  font-size: 16px !important;
}

label {
  display: block;
  margin: 0 0 8px 2px;
  font-size: 14px;
  font-weight: 500;
}

label+input {
  display: block;
  width: 100%;
  height: 50px;
  border-radius: 5px;
  padding-left: 20px;
  font-size: 16px;
  font-weight: 500;
  color: #333;
  background-color: white;
}

.clearfix::after {
  content: '';
  clear: both;
  display: block;
}

.floatLeft {
  float: left;
}

.floatRight {
  float: right;
}

.imgBox {
  display: block;
}

.imgBox img {
  width: 100%;
}

.textBox {
  display: block;
}

.hidden {
  display: none;
}

.wrap {
  position: relative;
  width: 100%;
}

.red {
  display: inline-block;
  color: #cc1f36 !important;
}

span>.red,
label>.red {
  margin-left: 2px;
}

.titleWrap {
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 12px;
}

.titleWrap span {
  font-size: 15px;
  font-weight: 600;
}

/* 셀렉트박스 커스텀 */

/* selectBox 커스텀 시작 */
.selectBoxWrap {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: start;
}

.selectBoxTitle {
  margin: 0 0 10px 4px;
  font-size: 16px;
  font-weight: 500;
}

.selectBox {
  position: relative;
  width: 100%;
  height: 86px;
  border-radius: 5px;
  border: 1px solid #d5d5d5;
  background: url(../img/ico_arrow_down_20.svg) calc(100% - 26px) center no-repeat;
  background-size: 20px;
  background-color: white !important;
  cursor: pointer;
}

.selectBox.active {
  border-color: #cc1f36;
}

.selectBox .label {
  display: flex;
  align-items: center;
  text-align-last: left;
  width: inherit;
  height: inherit;
  padding-left: 26px;
  font-size: 20px;
  color: #888;
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif !important;
}

.selectBox .label.active {
  color: #555;
  font-weight: 700;
}

.selectBox .optionList {
  position: absolute;
  z-index: -1;
  top: 92px;
  left: 0;
  width: 100%;
  max-height: 0px;
  border-radius: 5px;
  overflow: hidden;
  background: white;
  border: 1px solid #d5d5d5;
  box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.1);
  padding: 0;
  overflow-y: auto;
  opacity: 0;
  transition: .2s ease;
}

.selectBox.active .optionList {
  z-index: 5;
  max-height: 465px;
  padding: 10px 0;
  opacity: 1;
  overflow-y: auto;
}

.selectBox .optionItem {
  padding: 26px;
  margin-right: 4px;
  font-size: 20px;
  color: #555;
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif !important;
  transition: all 0.1s ease;
}

.selectBox .optionItem:hover {
  background: #f5f5f5;
}

.selectBox .optionItem.active {
  color: #cc1f36;
  font-weight: 700;
}

/* 스크롤 커스텀 */
.selectBox .optionList::-webkit-scrollbar {
  width: 6px;
}

.selectBox .optionList::-webkit-scrollbar-track {
  background: transparent;
  margin-top: 5px;
}

.selectBox .optionList::-webkit-scrollbar-thumb {
  background: #999;
  border-radius: 45px;
}

.selectBox .optionList::-webkit-scrollbar-thumb:hover {
  background: #999;
}

/* selectBox 커스텀 끝 */

/*폰트전용class*/
/* .fs10 {
  font: 1rem/1.4rem sans-serif;
}

.fs11 {
  font: 1.1rem/1.5rem sans-serif;
}

.fs12 {
  font: 1.2rem/1.6rem sans-serif;
}

.fs13 {
  font: 1.3rem/1.7rem sans-serif;
}

.fs14 {
  font: 1.4rem/1.8rem sans-serif;
}

.fs15 {
  font: 1.5rem/1.9rem sans-serif;
}

.fs16 {
  font: 1.6rem/2rem sans-serif;
}

.fs17 {
  font: 1.7rem/2.1rem sans-serif;
}

.fs18 {
  font: 1.8rem/2.2rem sans-serif;
}

.fs19 {
  font: 1.9rem/2.3rem sans-serif;
}

.fs20 {
  font: 2rem/2.4rem sans-serif;
}

.fs21 {
  font: 2.1rem/2.5rem sans-serif;
}

.fs22 {
  font: 2.2rem/2.6rem sans-serif;
}

.fs33 {
  font: 2.3rem/2.7rem sans-serif;
}

.fs24 {
  font: 2.4rem/2.8rem sans-serif;
}

.fs25 {
  font: 2.5rem/2.9rem sans-serif;
}

.fs26 {
  font: 2.6rem/3rem sans-serif;
}

.fs27 {
  font: 2.7rem/3.1rem sans-serif;
}

.fs28 {
  font: 2.8rem/3.2rem sans-serif;
}

.fs29 {
  font: 2.9rem/3.3rem sans-serif;
}

.fs30 {
  font: 3rem/3.4rem sans-serif;
} */

/*햄버거 버튼 전용 css*/
/* .mobMenuBtn {background-color: transparent;border: 0;padding: 0;width: 30px;height: 30px;position: relative;outline: none;}
.mobMenuBtn span,.mobMenuBtn::before,.mobMenuBtn::after {display: block;width: 32px;height: 2px;background-color: #58595b;position: absolute;left: 50%;top: 38%;opacity: 1;-webkit-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out;}
.mobMenuBtn::before,.mobMenuBtn::after {content: '';}
.mobMenuBtn::before {margin-top: -8px;background-color: #000;width: 100%; left: 0; top: 50%;}
.mobMenuBtn::after {margin-top: 8px;background-color: #000;width: 100%;left: 0;top: 50%;}
.mobMenuBtn span {text-indent: -9999px;background-color: #000;width: 100%;left: 0;top: 50%;}
.mobMenuBtn.expanded span,.mobMenuBtn.expanded::before,.mobMenuBtn.expanded::after {background-color: #000;}
.mobMenuBtn.expanded span {opacity: 0;}
.mobMenuBtn.expanded::before,.mobMenuBtn.expanded::after {margin-top: 0;}
.mobMenuBtn.expanded::before {-webkit-transform: rotate(45deg);transform: rotate(45deg);}
.mobMenuBtn.expanded::after {-webkit-transform: rotate(-45deg);transform: rotate(-45deg);} */

/*커스텀모달*/
/* .modal {
  display: none;
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.5);
}

.popup {
  opacity: 0;
  visibility: hidden;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  transition-duration: 0.3s;
  transition-property: opacity;
}

.popup.active {
  opacity: 1;
  visibility: visible;
}

.popup .scrollWrap {
  position: relative;
  width: 100%;
  height: 100%;
} */