@charset "UTF-8";
::-moz-selection {
  background: transparent;
}

::selection {
  background: transparent;
}

option {
  background-color: #fff;
}

body {
  /* 모바일에서 사용자가 클릭했을때 클릭 범위 색상 */
  -webkit-tap-highlight-color: transparent;
}

.not_scroll {
  position: fixed;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

#wrap {
  max-width: 480px;
  height: 100%;
  margin: 0 auto;
  background-color: #F5F7FA;
  position: relative;
  display: flex;
  flex-direction: column;
}

#container {
  height: auto;
  background: #F5F7FA;
  max-width: 480px;
  width: 100%;
  margin: 0 auto;
}

/* ================= 타이포 셋팅 ==================== */
.ft_title1 {
  font-size: 22px;
  line-height: 28px;
  font-weight: bold;
}

.ft_title2 {
  font-size: 18px;
  line-height: 28px;
  font-weight: bold;
}

.ft_sub_t1 {
  font-size: 16px;
  line-height: 22px;
  font-weight: bold;
}

.ft_sub_t2 {
  font-size: 14px;
  line-height: 20px;
  font-weight: bold;
}

.ft_sub_t3 {
  font-size: 12px;
  line-height: 18px;
  font-weight: bold;
}

.ft_sub_t4 {
  font-size: 11px;
  line-height: 16px;
  font-weight: bold;
}

.ft_body1 {
  font-size: 16px;
  line-height: 22px;
}

.ft_body2 {
  font-size: 14px;
  line-height: 20px;
}

.ft_sub_txt1 {
  font-size: 12px;
  line-height: 18px;
}

.ft_sub_txt2 {
  font-size: 11px;
  line-height: 16px;
}

.gray6 {
  color: #8F9399;
}

/* ================= 타이포 셋팅 끝 ==================== */
/* ================= UI 공통 테이블 ==================== */
input[type=text].user_id,
input[type=email].user_id,
input[type=password].user_pw {
  max-width: 440px;
  width: 100%;
  line-height: 40px;
  background: #EBEEF2;
  text-align: right;
  padding: 0 14px;
  border-radius: 10px;
  display: block;
  margin: 0 auto;
  font-family: "roboto_regular";
}
input[type=text].user_id::placeholder,
input[type=email].user_id::placeholder,
input[type=password].user_pw::placeholder {
  color: #9b9fa5;
  text-align: left;
}

input[type=checkbox] {
  width: 16px;
  height: 16px;
  background: #D7DBE0 url(../../images/icon/agreement_none_icon2.svg) no-repeat 0 0/contain;
  border-radius: 3px;
  cursor: pointer;
}

input[type=checkbox]:checked {
  background: #D7DBE0 url(../../images/icon/agreement_active_icon2.svg) no-repeat 0 0/contain;
}

.login_btn {
  max-width: 440px;
  width: 100%;
  line-height: 54px;
  background: #CC1C0A;
  border-radius: 10px;
  text-align: center;
  color: #fff;
}

.join_btn,
.confirm_btn,
.cancel_btn {
  display: block;
  width: 100%;
  border-radius: 10px;
  line-height: 54px;
  background: #CC1C0A;
  color: #fff;
  text-align: center;
}
.join_btn:disabled,
.confirm_btn:disabled,
.cancel_btn:disabled {
  background: #D7DBE0;
  color: #777A7F;
}

.cancel_btn,
.confirm_btn {
  background: #262626;
}

input[type=text].info_input,
input[type=password].info_input {
  max-width: 440px;
  width: 100%;
  line-height: 40px;
  background: #EBEEF2;
  padding: 0 14px;
  border-radius: 10px;
  display: block;
  margin: 0 auto;
  font-family: "roboto_regular";
}
input[type=text].info_input::placeholder,
input[type=password].info_input::placeholder {
  color: #9b9fa5;
}
input[type=text].info_input:read-only,
input[type=password].info_input:read-only {
  background: #D7DBE0;
  color: #333;
}

/* 작은 검정 버튼 */
.small_btn_black {
  padding: 8px 10px;
  background: #262626;
  color: #fff;
  border-radius: 6px;
}

input[type=password].normal {
  max-width: 440px;
  width: 100%;
  line-height: 40px;
  border-radius: 10px;
  text-align: center;
  background: #fff;
}
input[type=password].normal::placeholder {
  color: #8F9399;
}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

/* 파이어폭스 */
input[type=number] {
  -moz-appearance: textfield;
}

/* 하단 메뉴 */
.bottom_gnb {
  position: sticky;
  bottom: 0;
  width: 100%;
  height: 74px;
  background: #262626;
  z-index: 200;
}
.bottom_gnb ul {
  height: 74px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.bottom_gnb li {
  display: flex;
}
.bottom_gnb li a {
  width: 46px;
  height: 46px;
  color: #8F9399;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.bottom_gnb li a img {
  width: auto;
  height: 26px;
}

/* 셀렉트 박스 */
select {
  width: 82px;
  height: 32px;
  border: 1px solid #EBEEF2;
  border-radius: 6px;
  padding: 0 10px;
  background: #262626 url(../../images/icon/arrow_bottom.svg) no-repeat right 10px center/auto 7px;
  color: #fff;
}
select option {
  color: #333;
  padding: 0 20px;
}

/* ================= UI 공통 테이블 끝 !! ==================== */
#header {
  max-width: 480px;
  width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 300;
}

.overlay {
  width: 100vw;
  height: 100vh;
  position: absolute;
  background: rgba(0, 0, 0, 0.8);
}

.confirm_modal_wrap,
.alert_modal_wrap {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
}

.modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 440px;
  min-height: 100px;
  width: calc(100% - 22px);
  border-radius: 14px;
  background: #fff;
  padding: 53px 16px 16px;
}
.modal .icon {
  width: 58px;
  height: 58px;
  background: url(../../images/icon/alert_icon.svg) no-repeat center/contain;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}
.modal .modal_title {
  text-align: center;
  margin-bottom: 16px;
}
.modal .modal_sub_text {
  margin-bottom: 24px;
  text-align: center;
}
.modal .modal_box {
  background: #E4E6EB;
  border-radius: 10px;
  padding: 14px 12px;
  margin-bottom: 12px;
}
.modal .modal_box p {
  padding-left: 8px;
  position: relative;
  margin-bottom: 8px;
}
.modal .modal_box p span {
  position: absolute;
  top: 0;
  left: 0;
}
.modal .modal_box p:last-child {
  margin-bottom: 0;
}
.modal .button_wrap {
  display: flex;
  gap: 16px;
}

.alert_modal_wrap .modal_title {
  margin-bottom: 10px;
}

.input_checkbox {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.input_checkbox > div {
  display: flex;
  gap: 6px;
  align-items: center;
  color: #fff;
}
.input_checkbox input {
  border: 1px solid #fff;
}
.input_checkbox label {
  line-height: 1;
  cursor: pointer;
}

/*# sourceMappingURL=Common.css.map */