/*
//버튼(6)
- 기본 버튼
- 리스트 버튼
- 체크박스 버튼
- 라디오 버튼
- 텍스트 버튼
- 항목 선택 버튼
//텍스트박스(4)
- 기본형
- 항목명 + 텍스트 박스(세로형)
- 항목명 + 텍스트 박스(가로형)
- 텍스트 박스(기본형+메시지 출력)
// 셀렉트 박스 & 드롭다운
- 셀렉트박스(디폴트)
- 드롭다운
// 다이얼로그
- 팝업/알럿(확인용)
- 팝업/알럿(안내용)
*/
@font-face {
  font-family: 'Inter';
  src: url('../font/Inter-Regular.woff2') format('woff2'), url('../font/Inter-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Inter';
  src: url('../font/Inter-Medium.woff2') format('woff2'), url('../font/Inter-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Inter';
  src: url('../font/Inter-Bold.woff2') format('woff2'), url('../font/Inter-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Inter';
  src: url('../font/Inter_ExtraBold.woff2') format('woff2'), url('../font/Inter_ExtraBold.woff') format('woff');
  font-weight: 800;
  font-style: normal;
}
/*
예시)
.box {
	.clearfix();   // 클리어픽스 함수 호출
	.ellipsis();   // 텍스트 말줄임 함수 호출
}
*/
.main {
  display: flex;
  text-align: center;
  background: transparent;
  overflow: visible !important;
  min-height: 100vh;
}
@media (min-width: 1080px) {
  .main {
    background: #EEF1F2;
  }
}
.main__aside {
  width: 50%;
  display: none;
}
@media (min-width: 1080px) {
  .main__aside {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    padding-right: 7rem;
    text-align: left;
    margin-top: 24.9rem;
  }
}
.main__inner {
  position: fixed;
  padding: 6rem 4rem 4rem;
  border-radius: 2rem;
  height: 38rem;
  background: url('../images/banner_bg.jpg') no-repeat center bottom / cover;
}
.main__info {
  width: 32.7rem;
  display: flex;
  justify-content: center;
  text-align: center;
}
.main__title {
  font-size: 3.2rem;
  line-height: 3.2rem;
  font-weight: 800;
}
.main__desc {
  font-size: 1.2rem;
  color: #333;
}
.main__desc img {
  display: block;
  margin: auto;
}
.main__desc span {
  color: #333;
  display: inline-block;
}
.main__decs-info {
  margin: 2rem 0;
  font-size: 1.4rem;
  font-weight: 700;
}
.main__decs-info strong {
  display: inline-block;
  color: #0057FF;
  font-weight: 700;
}
.main__qr {
  width: 80px;
  height: auto;
  margin-top: 1rem;
}
.main__qrcode {
  height: fit-content;
}
.nav {
  width: 100%;
  max-width: 43rem;
  height: 5.6rem;
  line-height: 5.6rem;
  margin: 0 auto;
}
@media (min-width: 1080px) {
  .nav {
    height: 6.4rem;
    line-height: 6.4rem;
  }
}
.nav__wrap {
  display: flex;
  justify-content: center;
}
.nav__prev {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 2rem;
  margin: auto;
  height: fit-content;
}
@media (min-width: 1080px) {
  .nav__prev {
    left: 0;
  }
}
.nav__heading {
  font-size: 1.8rem;
  font-weight: 700;
}
.login-wrap {
  width: 100%;
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: auto;
  overflow: visible !important;
  background: #fff;
}
@media (min-width: 1080px) {
  .login-wrap {
    max-width: 53rem;
    box-shadow: 0px 0px 14px rgba(81, 81, 81, 0.15);
    margin-bottom: 0;
  }
}
.login-wrap.is-guest .login-wrap__heading {
  margin-top: 8rem;
}
@media (min-width: 1080px) {
  .login-wrap.is-guest .login-wrap__heading {
    margin-top: 12rem;
  }
}
.login-wrap__inner {
  width: 100%;
}
.login-wrap.-reserv {
  box-shadow: 0px 0px 14px 0px rgba(81, 81, 81, 0.15);
  background: #F1F2F3;
  padding-top: 12rem;
}
.login-wrap.-reserv .login-wrap__heading {
  font-size: 4rem;
  font-weight: 400;
  margin-bottom: 6rem;
}
@media (min-width: 1080px) {
  .login-wrap.-reserv .login-wrap__heading {
    font-size: 5rem;
    margin-bottom: 9rem;
  }
}
.login-wrap.-reserv .login-wrap__heading span {
  display: inline-block;
  font-weight: 800;
}
.login-wrap[data-view="login"] ~ .login-wrap__footer {
  display: none;
}
.login-wrap .buttons__item + .buttons__item {
  margin-left: 0;
}
.login-wrap .login-wrap[data-view="terms"] {
  text-align: left;
  align-items: baseline;
}
.login-wrap__header {
  position: relative;
  padding: 1.5rem 0;
  width: 100%;
}
@media (min-width: 1080px) {
  .login-wrap__header {
    padding: 1.7rem 0;
  }
}
.login-wrap__header .login-wrap__heading {
  margin-bottom: 0;
}
.login-wrap__aside {
  width: 50%;
  display: none;
}
@media (min-width: 1080px) {
  .login-wrap__aside {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    padding-right: 7rem;
    text-align: left;
  }
}
.login-wrap__info {
  width: 32.7rem;
  margin: 1.7rem;
  display: flex;
  justify-content: space-between;
}
.login-wrap__title {
  font-size: 2.4rem;
  line-height: 3.2rem;
}
.login-wrap__desc {
  font-size: 1.2rem;
  color: #999;
}
.login-wrap__desc span {
  color: #333;
  display: inline-block;
}
.login-wrap__qr {
  width: 80px;
  height: auto;
  margin-top: 1rem;
}
.login-wrap__heading {
  margin-bottom: 3rem;
  width: 100%;
  max-width: 43rem;
  margin: 0 auto;
}
@media (min-width: 1080px) {
  .login-wrap__heading {
    margin-bottom: 6rem;
  }
}
@media (min-width: 1080px) {
  .login-wrap__heading + .login-wrap__sub {
    margin-top: -4.6rem;
  }
}
.login-wrap__heading.-left {
  text-align: left;
}
.login-wrap__heading span {
  display: block;
  font-size: 2.4rem;
  font-weight: 700;
}
@media (min-width: 1080px) {
  .login-wrap__heading span {
    font-size: 2.6rem;
  }
}
.login-wrap__heading p {
  color: #666;
  font-size: 1.4rem;
  margin-top: 1.6rem;
}
@media (min-width: 1080px) {
  .login-wrap__heading p {
    font-size: 1.6rem;
  }
}
.login-wrap__sub {
  font-weight: 400;
  color: #666;
  font-size: 1.4rem;
  margin-top: 1.6rem;
  width: 100%;
}
@media (min-width: 1080px) {
  .login-wrap__sub {
    font-size: 1.6rem;
    margin-top: 2rem;
  }
}
.login-wrap__sub.-left {
  text-align: left;
  width: 100%;
  max-width: 43rem;
  margin: 1.6rem auto 0;
}
.login-wrap__divider {
  position: relative;
  width: 100%;
  max-width: 43rem;
  text-align: center;
  margin: 4.9rem auto;
}
.login-wrap__divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin: auto;
  width: 90%;
  height: 1px;
  background: #d9d9d9;
  transform: translateY(-50%);
  z-index: 1;
}
@media (min-width: 1080px) {
  .login-wrap__divider::before {
    width: 100%;
  }
}
.login-wrap__divider span {
  display: inline-block;
  padding: 0 1.2rem;
  background: #fff;
  position: relative;
  z-index: 2;
}
.login-wrap__links a {
  color: #191919;
  text-decoration: none;
  margin: 0 0.5rem;
}
.login-wrap__links a:hover {
  text-decoration: underline;
}
.login-wrap__links span {
  display: inline-block;
  margin: 0 1rem;
}
.login-wrap__tab {
  display: flex;
  width: 100%;
  max-width: 43rem;
  margin: 0 auto 4rem;
  text-align: center;
}
@media (min-width: 1080px) {
  .login-wrap__tab {
    margin: 0 auto 7.7rem;
  }
}
.login-wrap__tab-button {
  width: 50%;
  padding: 1.5rem 0;
  border-bottom: 1px #d9d9d9 solid;
  font-size: 1.6rem;
}
@media (min-width: 1080px) {
  .login-wrap__tab-button {
    padding: 1.7rem 0;
    font-size: 1.8rem;
  }
}
.login-wrap__tab-button.is-active {
  color: #0057FF;
  font-weight: 700;
  border-bottom: 2px #0057FF solid;
}
.login-wrap__panel {
  display: none;
  width: 100%;
}
.login-wrap__panel.is-visible {
  display: block;
}
.login-wrap__panel .form__title {
  margin-bottom: 0;
}
.login-wrap__panel .form__desc {
  margin: 0.8rem 0;
}
@media (min-width: 1080px) {
  .login-wrap__panel .form__desc {
    margin: 1rem 0;
  }
}
.login-wrap__panel .form__field {
  margin-top: 2rem;
}
.login-wrap__footer {
  position: fixed;
  bottom: 0;
  padding: 2rem 2rem 3rem !important;
  box-shadow: 0px 0px 19.787px 0px rgba(81, 81, 81, 0.15);
  background: #fff;
}
@media (min-width: 1080px) {
  .login-wrap__footer {
    position: relative;
    padding: 3rem 1.9rem 3rem 1.9rem !important;
  }
}
.login-wrap__footer.buttons .button {
  padding: 1rem 0;
}
@media (min-width: 1080px) {
  .login-wrap__footer.buttons .button {
    padding: 1.4rem 1.6rem;
  }
}
.login-wrap__footer.buttons .button:last-child {
  margin-top: 0;
}
[data-view="findpw"].login-wrap,
[data-view="user"].login-wrap,
[data-view="login"].login-wrap,
[data-view="reserv"].login-wrap,
[data-view="user-secession"].login-wrap,
[data-view="reserving-step1"].login-wrap,
[data-view="reserving-step2"].login-wrap,
[data-view="reserving-step3"].login-wrap,
[data-view="reserving-step4"].login-wrap,
[data-view="reserving-step5"].login-wrap {
  padding-top: 0;
}
[data-view="findpw"] .login-wrap__heading,
[data-view="user"] .login-wrap__heading,
[data-view="login"] .login-wrap__heading,
[data-view="reserv"] .login-wrap__heading,
[data-view="user-secession"] .login-wrap__heading,
[data-view="reserving-step1"] .login-wrap__heading,
[data-view="reserving-step2"] .login-wrap__heading,
[data-view="reserving-step3"] .login-wrap__heading,
[data-view="reserving-step4"] .login-wrap__heading,
[data-view="reserving-step5"] .login-wrap__heading {
  margin-top: 4rem;
}
[data-view="user"],
[data-view="reserving-step3"],
[data-view="reserving-step5"] {
  height: auto !important;
}
[data-view="login"],
[data-view="user-email-login"] {
  padding-top: 8rem;
}
@media (min-width: 1080px) {
  [data-view="login"],
  [data-view="user-email-login"] {
    padding-top: 12rem;
  }
}
[data-view="reserving-step2"] .login-wrap__inner,
[data-view="terms-view"] .login-wrap__inner,
[data-view="email-join"] .login-wrap__inner {
  padding-bottom: 13rem;
}
@media (min-width: 1080px) {
  [data-view="reserving-step2"] .login-wrap__inner,
  [data-view="terms-view"] .login-wrap__inner,
  [data-view="email-join"] .login-wrap__inner {
    padding-bottom: 0;
  }
}
[data-view="reserving-step2"] .login-wrap__footer,
[data-view="terms-view"] .login-wrap__footer,
[data-view="email-join"] .login-wrap__footer {
  position: fixed;
  bottom: 0;
  padding: 2rem 1.9rem;
}
@media (min-width: 1080px) {
  [data-view="reserving-step2"] .login-wrap__footer,
  [data-view="terms-view"] .login-wrap__footer,
  [data-view="email-join"] .login-wrap__footer {
    position: relative;
    padding: 3rem 1.9rem 3rem 1.9rem;
  }
}
[data-view="reserving-step2"] .login-wrap__footer button:last-child,
[data-view="terms-view"] .login-wrap__footer button:last-child,
[data-view="email-join"] .login-wrap__footer button:last-child {
  margin-top: 0;
}
[data-view="email-join"] .form {
  margin-top: 1.6rem;
}
@media (min-width: 1080px) {
  [data-view="email-join"] .form {
    margin-top: 2.8rem;
  }
}
[data-view="login"] .login-wrap__heading {
  margin-bottom: 4.6rem;
}
@media (min-width: 1080px) {
  [data-view="login"] .login-wrap__heading {
    margin-bottom: 6rem;
  }
}
[data-view="login"] .buttons {
  padding: 0 2rem;
}
[data-view="reserving-step1"] .login-wrap__inner,
[data-view="reserving-step2"] .login-wrap__inner,
[data-view="reserving-step3"] .login-wrap__inner {
  margin-top: 5rem;
  padding-bottom: 10rem;
}
[data-view="reserving-step1"] .nav,
[data-view="reserving-step2"] .nav,
[data-view="reserving-step3"] .nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  max-width: none;
  margin-top: 0;
  background: #fff;
}
@media (min-width: 1080px) {
  [data-view="reserving-step1"] .nav,
  [data-view="reserving-step2"] .nav,
  [data-view="reserving-step3"] .nav {
    max-width: 52.9rem;
    left: 50%;
  }
}
[data-view="reserving-step1"] .nav__prev,
[data-view="reserving-step2"] .nav__prev,
[data-view="reserving-step3"] .nav__prev {
  left: 2rem;
}
[data-view="reserving-step1"] .myinfo__icon,
[data-view="reserving-step2"] .myinfo__icon,
[data-view="reserving-step3"] .myinfo__icon {
  right: 2rem;
}
[data-view="reserving-step1"] .login-wrap__footer,
[data-view="reserving-step2"] .login-wrap__footer,
[data-view="reserving-step3"] .login-wrap__footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  padding: 1rem 3rem;
  z-index: 11;
}
@media (min-width: 1080px) {
  [data-view="reserving-step1"] .login-wrap__footer,
  [data-view="reserving-step2"] .login-wrap__footer,
  [data-view="reserving-step3"] .login-wrap__footer {
    padding: 2rem 3rem;
    left: 50%;
    max-width: 52.9rem;
  }
}
[data-view="reserving-step3"] .login-wrap__inner {
  padding: 0 0 15rem;
}
[data-view="user-email-login"] .login-wrap__heading {
  margin-bottom: 4.6rem;
}
@media (min-width: 1080px) {
  [data-view="user-email-login"] .login-wrap__heading {
    margin-bottom: 6rem;
  }
}
[data-view="reserving-step5"] .login-wrap__inner,
[data-view="user-secession"] .login-wrap__inner {
  padding-bottom: 13rem;
}
@media (min-width: 1080px) {
  [data-view="reserving-step5"] .login-wrap__inner,
  [data-view="user-secession"] .login-wrap__inner {
    padding-bottom: 0;
  }
}
[data-view="user"] .dropdown__item:last-child {
  border-bottom: 4px solid #F4F4F4;
}
[data-view="terms-view"] .login-wrap__heading {
  margin-bottom: 0;
  width: 100%;
  max-width: 43rem;
  padding: 0 2rem;
  margin-top: 1.6rem;
}
@media (min-width: 1080px) {
  [data-view="terms-view"] .login-wrap__heading {
    margin-top: 2.8rem;
    padding: 0;
  }
}
[data-view="terms-view"] .login-wrap__sub.-left {
  padding: 0 2rem;
}
@media (min-width: 1080px) {
  [data-view="terms-view"] .login-wrap__sub.-left {
    padding: 0;
  }
}
[data-view="reserving-step5"] .dropdown__heading .dropdown__sub {
  text-align: right;
}
.buttons {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-self: flex-start;
  width: 100%;
}
.buttons.-half {
  flex-direction: row;
}
.buttons.-half .buttons__item {
  width: 50%;
  flex: 1;
}
.buttons.-half .buttons__item .buttons__item + .buttons__item {
  margin-left: 1.1rem;
}
.buttons.-col3 {
  flex-direction: row;
}
.buttons.-col3 .buttons__item {
  width: 33.333%;
}
.buttons__item + .buttons__item {
  margin-left: 1.1rem;
}
.buttons.-reserv {
  margin-top: 1rem;
  padding: 0 2rem;
}
.buttons.-reserv .buttons__item + .buttons__item {
  margin: 1rem 0 0;
}
.buttons.-sns .buttons__item {
  margin-bottom: 1rem;
}
.buttons .button {
  position: relative;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  max-width: 43rem;
  margin: 0 auto;
  padding: 1.4rem 1.6rem;
  border-radius: 0.6rem;
  font-size: 1.8rem;
  border: 1px #d9d9d9 solid;
  font-weight: 700;
}
.buttons .button.-basic {
  color: #191919;
  border: 1px #d9d9d9 solid;
  background: #fff;
}
.buttons .button.-enabled {
  color: #fff;
  background: #0057FF;
}
.buttons .button.-disabled {
  color: #fff;
  cursor: not-allowed;
  background: #B7B7B7;
}
.buttons .button + .buttons .button {
  margin-top: 1.4rem;
}
.buttons .button.-icon::before {
  content: "";
  position: absolute;
  left: 1.6rem;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 2.2rem;
  height: 2.2rem;
  background: url('../images/button__kakao.svg') no-repeat center top / 100%;
}
.buttons .button.-kakao {
  border: 1px #FEE500 solid;
  background: #FEE500;
}
.buttons .button.-naver {
  color: #fff;
  border: 1px #03C75A solid;
  background: #03C75A;
}
.buttons .button.-naver::before {
  background: url('../images/button__naver.svg') no-repeat center top / 100%;
}
.buttons .button.-google::before {
  background: url('../images/button__google.svg') no-repeat center top / 100%;
}
.buttons .button.-line {
  color: #fff;
  border: 1px #06C755 solid;
  background: #06C755;
}
.buttons .button.-line::before {
  background: url('../images/button__line.svg') no-repeat center top / 100%;
}
.buttons .button.-wechat {
  color: #fff;
  border: 1px #51C332 solid;
  background: #51C332;
}
.buttons .button.-wechat::before {
  background: url('../images/button__wechat.svg') no-repeat center top / 100%;
}
@media (min-width: 1080px) {
  .buttons .button {
    border-radius: 0.8rem;
    font-size: 2rem;
  }
}
.buttons__auth-number {
  position: absolute;
  width: fit-content !important;
  right: 1.6rem;
  top: 0.8rem;
  margin: auto 0 0;
  padding: 0 1.6rem !important;
  font-size: 1.4rem;
  color: #999;
  min-height: auto !important;
  max-height: fit-content !important;
  line-height: 2.8rem;
  border-radius: 1.4rem;
  border: 1px #d9d9d9 solid;
}
@media (min-width: 1080px) {
  .buttons__auth-number {
    width: 10rem !important;
    top: 1.2rem;
  }
}
.form {
  width: 100%;
  max-width: 43rem;
  margin: 0 auto;
  overflow-y: auto;
  padding: 0.3rem 2rem 4.6rem;
}
@media (min-width: 1080px) {
  .form {
    padding: 0.3rem 0.5rem 4.6rem;
  }
}
.form button:hover,
.form select:hover,
.form button:focus,
.form select:focus {
  outline: 0;
  border-radius: 0.6rem;
  box-shadow: 0 0 0 1px #fff, 0 0 0 2px #0057FF;
}
.form__field {
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: left;
}
.form__field + .form__field {
  margin-top: 1.2rem;
}
@media (min-width: 1080px) {
  .form__field + .form__field {
    margin-top: 1.5rem;
  }
}
.form__field input {
  padding: 1.4rem 1.6rem;
  border: 1px #d9d9d9 solid;
  border-radius: 6px;
  font-size: 1.6rem;
  width: 100%;
  height: 100%;
  max-height: 4.5rem;
}
.form__field input:hover,
.form__field input:focus {
  outline: 0;
  border-radius: 0.6rem;
  border: 1px #0057FF solid;
  box-shadow: 0 0 0 2px #fff;
}
.form__field input::placeholder {
  color: #999;
}
.form__field input:value {
  color: #999;
}
.form__field input:disabled {
  pointer-events: none;
  user-select: none;
  border: 1px #d9d9d9 solid;
  background: #F9F9F9;
}
.form__field input:disabled::placeholder {
  color: #B6B6B6;
}
@media (min-width: 1080px) {
  .form__field input {
    padding: 1.7rem 2rem;
    font-size: 1.8rem;
    max-height: 5.6rem;
  }
}
.form__field.-login input {
  font-size: 1.6rem;
}
@media (min-width: 1080px) {
  .form__field.-login input {
    font-size: 1.8rem;
  }
}
.form__field.-col3 .birth-date-group {
  display: flex;
}
.form__field.-col3 .birth-date-group input + input {
  margin-left: 0.4rem;
}
.form__field.-gender .gender-group {
  display: flex;
  width: 100%;
  margin-top: 0.6rem;
}
.form__field.-gender .gender-group div {
  width: 50%;
}
.form__field.-gender .gender-group div:last-child {
  margin-left: 1rem;
}
.form__field.-gender .gender-group input[type="radio"] {
  display: none;
}
.form__field.-gender .gender-button {
  height: 4.5rem;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.6rem 0.8rem;
  border: 1px solid #ccc;
  border-radius: 0.6rem;
  font-size: 1.6rem;
  cursor: pointer;
  background: #fff;
  transition: all 0.3s;
}
.form__field.-gender .gender-button:hover,
.form__field.-gender .gender-button:focus {
  outline: 0;
  border-radius: 0.6rem;
  box-shadow: 0 0 0 1px #fff, 0 0 0 2px #0057FF;
}
@media (min-width: 1080px) {
  .form__field.-gender .gender-button {
    padding: 0.6rem 0.9rem;
    font-size: 1.8rem;
    height: 5.6rem;
  }
}
.form__field.-gender .gender-group input[type="radio"]:checked + .gender-button {
  color: #fff;
  border: 1px #0057FF solid;
  background: #0057FF;
}
.form__label {
  text-align: left;
  margin-bottom: 0.6rem;
}
.form__label .required {
  color: #E0392D;
  margin-left: 0.2rem;
}
.form__label + .form__email-auth {
  margin: 0;
}
.form__desc {
  position: relative;
  margin-top: 0.5rem;
  font-size: 1.2rem;
  text-align: left;
}
@media (min-width: 1080px) {
  .form__desc {
    font-size: 1.4rem;
  }
}
.form__desc + .form__field {
  margin-top: 2rem;
}
.form__desc::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 16px;
  height: 16px;
}
.form__desc.-error {
  padding-left: 2.1rem;
  color: #E0392D;
}
.form__desc.-error::before {
  background: url('../images/state__error.svg') no-repeat center top / 100%;
}
.form__desc.-success {
  padding-left: 2.1rem;
  color: #0057FF;
}
.form__desc.-success::before {
  background: url('../images/state__success.svg') no-repeat center top / 100%;
}
.form__desc.-subtext {
  padding-left: 2.1rem;
  color: #999;
}
.form__desc.-subtext::before {
  background: url('../images/state__sub.svg') no-repeat center top / 100%;
}
.form__type {
  margin-bottom: 5rem;
}
.form__type label {
  display: block;
  margin-bottom: 1rem;
  font-weight: 700;
}
.form__type--buttons {
  display: flex;
  flex-direction: row;
  padding: 0 0.4rem;
}
.form__type--buttons .button:hover,
.form__type--buttons .button:focus {
  outline: 0;
  border-radius: 0.6rem;
  box-shadow: 0 0 0 1px #fff, 0 0 0 2px #0057FF;
}
.form__type--buttons .button:last-child {
  margin: 0;
}
.form__type--buttons .button + .button {
  margin-left: 1.2rem;
}
.form__title {
  text-align: left;
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
}
@media (min-width: 1080px) {
  .form__title {
    font-size: 1.8rem;
    margin-bottom: 1rem;
  }
}
.form__options {
  margin-top: 1.6rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.4rem;
}
@media (min-width: 1080px) {
  .form__options {
    margin-top: 2rem;
  }
}
.form__options .selectbox {
  width: fit-content;
  max-width: none;
  margin: 0;
}
.form__options .selectbox__check label:first-child {
  border: none;
  padding: 0 0 0 3.2rem;
  margin: 0;
}
.form__phone {
  display: flex;
  gap: 0.5rem;
}
.form__phone select {
  width: 8.2rem;
  padding: 0.7rem 0.8rem 0.7rem 1.5rem;
  font-size: 1.4rem;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  background: url('../images/select-arr.svg') no-repeat 84% center;
}
@media (min-width: 1080px) {
  .form__phone select {
    width: 8.2rem;
    padding: 0.7rem 1rem 0.7rem 1.8rem;
  }
}
.form__phone input {
  flex: 1;
}
.form__phone-auth,
.form__email-auth {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
  width: 100%;
  height: 100%;
}
.form__phone-auth .buttons,
.form__email-auth .buttons {
  width: fit-content;
}
.form__phone-auth .button,
.form__email-auth .button {
  width: 8.2rem;
  padding: 0.6rem 0.8rem;
  font-size: 1.4rem;
  font-weight: 400;
  min-height: 4.5rem;
}
.form__phone-auth .button:first-child,
.form__email-auth .button:first-child {
  padding: 0;
}
.form__phone-auth .button:last-child,
.form__email-auth .button:last-child {
  margin-top: 0;
}
@media (min-width: 1080px) {
  .form__phone-auth .button,
  .form__email-auth .button {
    width: 10rem;
    padding: 0.7rem 1rem;
    font-size: 1.4rem;
    min-height: 5.6rem;
  }
}
.form__auth-number {
  position: relative;
}
.form__auth-number input {
  padding-right: 10rem;
}
.form__find {
  color: #666;
  text-decoration: none;
  font-size: 1.4rem;
  align-self: end;
}
.form__join {
  text-align: center;
  margin: 4rem 0 1.3rem;
}
@media (min-width: 1080px) {
  .form__join {
    margin: 5rem 0 2rem;
  }
}
.form__join p {
  font-size: 1.4rem;
  color: #666;
  margin-bottom: 0.8rem;
  position: relative;
  border-bottom: 1px #d9d9d9 solid;
  width: fit-content;
  margin: 0 auto 0.8rem;
}
.form__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}
.form__header .login-wrap__heading {
  font-size: 2rem;
  font-weight: 700;
}
.form__header .login-wrap__mypage {
  width: 2.8rem;
  height: 2.8rem;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.form__header .login-wrap__mypage img {
  width: 100%;
  height: auto;
}
.form__tab {
  display: flex;
  justify-content: space-around;
  border-bottom: 1px solid #b9b9b9;
  margin-bottom: 3rem;
}
.form__tab-button {
  flex: 1;
  text-align: center;
  font-size: 1.6rem;
  font-weight: 500;
  padding-bottom: 1.2rem;
  border-bottom: 2px solid transparent;
  background: none;
  cursor: pointer;
}
.form__tab-button.is-active {
  border-color: #191919;
  color: #191919;
  font-weight: 700;
}
.form__email-info {
  width: 100%;
}
.form__phone-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.form__phone-group input {
  width: 100%;
  max-width: 21%;
  height: 100%;
  text-align: center;
}
@media (min-width: 1080px) {
  .form__phone-group input {
    max-width: 22%;
  }
}
.form__phone-group .selectbox__button {
  color: #191919;
}
.form .hyphen {
  width: 1rem;
  height: 0.1rem;
  background: #999;
}
.form .auth-button {
  padding: 0;
}
.form .textarea {
  border: 1px #d9d9d9 solid;
  width: 100%;
  min-height: 15.5rem;
  padding: 1.5rem 2rem;
  resize: none;
  background: #fff;
}
@media (min-width: 1080px) {
  .form .textarea {
    padding: 1.7rem 2.2rem;
  }
}
.form .textarea-counter {
  position: absolute;
  bottom: 8px;
  right: 10px;
  font-size: 14px;
  color: #999;
}
[data-view="reserving-step5"] .terms {
  margin-top: 0;
}
.selectbox {
  position: relative;
  width: 90%;
  max-width: 43rem;
  margin: 0 auto;
}
@media (min-width: 1080px) {
  .selectbox {
    width: 100%;
  }
}
.selectbox__button {
  position: relative;
  width: 100%;
  height: 7rem;
  line-height: 7rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  padding: 1.9rem 1.6rem;
  border: 1px solid #d9d9d9;
  border-radius: 0.6rem;
  font-size: 1.6rem;
  color: #191919;
  background: #fff;
  cursor: pointer;
}
@media (min-width: 1080px) {
  .selectbox__button {
    padding: 2.4rem 2rem;
    height: 8.7rem;
    line-height: 8.7rem;
  }
}
.selectbox__button.-country {
  position: relative;
  padding-left: 4rem;
  height: auto;
  line-height: normal;
  text-align: left;
  background: url('../images/popup_country.svg') no-repeat 95% center;
}
.selectbox__button.-country::before {
  content: "";
  position: absolute;
  left: 1.5rem;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 2.2rem;
  height: 2.2rem;
  background: url('../images/global-fill.svg') no-repeat 90% center;
}
.selectbox__button.-country-ph {
  height: 4.5rem;
  line-height: 1.5rem;
  width: 8rem;
  text-align: left;
  color: #191919;
  padding: 1.4rem 1rem;
  background: url('../images/select-arr.svg') no-repeat 80% center;
}
@media (min-width: 1080px) {
  .selectbox__button.-country-ph {
    width: 8.5rem;
    height: 5.6rem;
    line-height: normal;
  }
}
.selectbox__arrow {
  content: '';
  position: absolute;
  right: 1.4rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2.2rem;
  height: 2.2rem;
  background: url('../images/select-arr.svg') no-repeat center center / 100%;
  transition: transform 0.3s ease;
}
.selectbox.-open .selectbox__arrow {
  transform: translateY(-50%) rotate(180deg);
}
.selectbox.-selected .selectbox__button {
  color: #191919;
  font-weight: 700;
}
.selectbox.-open .selectbox__list {
  display: block;
}
.selectbox.-open .selectbox__button {
  color: #191919;
  font-weight: 700;
}
.selectbox__list {
  display: none;
  margin-top: 0.4rem;
  border: 1px solid #d9d9d9;
  border-radius: 0.6rem;
  overflow: hidden;
  max-height: calc(7.4rem * 4);
  overflow-y: auto;
}
.selectbox__list::-webkit-scrollbar {
  width: 6px;
}
.selectbox__list::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}
.selectbox__list::-webkit-scrollbar-track {
  background-color: transparent;
}
.selectbox__list .selectbox__item {
  padding: 1.9rem 1.6rem;
  font-size: 1.6rem;
  background: #fff;
  cursor: pointer;
}
@media (min-width: 1080px) {
  .selectbox__list .selectbox__item {
    padding: 2.4rem 2rem;
  }
}
.selectbox__list .selectbox__item + .selectbox__item {
  border-top: 1px #b9b9b9 solid;
}
.selectbox__list .selectbox__item:hover {
  background: #E6EEFF;
}
.selectbox__list .selectbox__item.-title {
  font-weight: 700;
  cursor: default;
}
.selectbox__check {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}
.selectbox__check label {
  position: relative;
  padding-left: 3.2rem;
  font-size: 1.6rem;
}
.selectbox__check label + label {
  margin-top: 1.2rem;
}
@media (min-width: 1080px) {
  .selectbox__check label + label {
    margin-top: 1.4rem;
  }
}
@media (min-width: 1080px) {
  .selectbox__check label {
    font-size: 1.8rem;
  }
}
.selectbox__check label[for="allcheck"] {
  font-weight: 700;
  padding-bottom: 3rem;
  margin-bottom: 3rem;
  border-bottom: 1px #d9d9d9 solid;
}
.selectbox__check label[for="allcheck"] input[type="checkbox"] {
  top: 0.5rem;
  bottom: auto;
}
@media (min-width: 1080px) {
  .selectbox__check label[for="allcheck"] {
    padding-bottom: 3.6rem;
    margin-bottom: 3.6rem;
  }
}
.selectbox__check input[type="checkbox"] {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  appearance: none;
  -webkit-appearance: none;
  width: 2rem;
  height: 2rem;
  background: url('../images/checkbox-off.svg') no-repeat center / contain;
  border: none;
  outline: none;
  cursor: pointer;
}
.selectbox__check input[type="checkbox"]:checked {
  background: url('../images/checkbox-on.svg') no-repeat center / contain;
}
.selectbox__check span {
  font-size: 1.4rem;
  color: #191919;
}
.selectbox__check.-terms {
  display: block;
  text-align: left;
}
.selectbox__check.-terms label {
  display: flex;
  justify-content: space-between;
}
.selectbox__check.-terms label a {
  color: #666;
  border-bottom: 1px #666 solid;
  height: fit-content;
  align-self: center;
}
.selectbox__check.-step .category-group {
  padding: 0.3rem;
}
.selectbox__check.-step .category-group-list {
  width: 100%;
}
.selectbox__check.-step .category-group {
  text-align: left;
  width: 100%;
  position: relative;
}
.selectbox__check.-step .category-group + .category-group {
  margin: 2.4rem 0;
  padding-top: 2.4rem;
}
.selectbox__check.-step .category-group::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0.4rem;
  background: rgba(217, 217, 217, 0.3);
}
@media (min-width: 1080px) {
  .selectbox__check.-step .category-group::before {
    height: 0.5rem;
  }
}
.selectbox__check.-step .category-group:first-child::before {
  content: none;
}
.selectbox__check.-step .category-title {
  display: block;
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 1rem;
}
@media (min-width: 1080px) {
  .selectbox__check.-step .category-title {
    font-size: 1.8rem;
  }
}
.selectbox__check.-step .category-options label {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: all 0.2s ease;
}
.selectbox__check.-step .category-options label span {
  font-size: 1.4rem;
}
@media (min-width: 1080px) {
  .selectbox__check.-step .category-options label span {
    font-size: 1.6rem;
  }
}
.selectbox__radio label {
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 2.8rem;
  cursor: pointer;
  font-size: 1.6rem;
}
.selectbox__radio input[type="radio"] {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  appearance: none;
  -webkit-appearance: none;
  background: url('../images/radio-off.svg') no-repeat center / contain;
  border: none;
  outline: none;
  cursor: pointer;
}
.selectbox__radio input[type="radio"]:checked {
  background: url('../images/radio-on.svg') no-repeat center / contain;
}
.selectbox__radio span {
  font-size: 1.4rem;
  color: #191919;
}
@media (min-width: 1080px) {
  .selectbox__radio span {
    font-size: 1.6rem;
  }
}
.terms {
  width: 100%;
  margin-top: 8rem;
}
@media (min-width: 1080px) {
  .terms {
    margin-top: 10rem;
  }
}
.myinfo {
  text-align: left;
  border-top: 0.6rem #d9d9d9 solid;
}
.myinfo__icon {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 2rem;
  margin: auto;
  height: fit-content;
}
@media (min-width: 1080px) {
  .myinfo__icon {
    right: 0;
  }
}
.myinfo__inner {
  border-bottom: 1px #d9d9d9 solid;
  padding: 1.1rem 2.6rem 1.1rem;
  width: 100%;
}
.myinfo__title {
  max-width: 43rem;
  margin: 0 auto;
  font-size: 1.6rem;
  font-weight: 700;
}
@media (min-width: 1080px) {
  .myinfo__title {
    font-size: 1.8rem;
  }
}
.myinfo__agree {
  width: 100%;
  max-width: 43rem;
  margin: 0 auto;
  padding: 2.2rem 2rem 0 2.6rem;
}
@media (min-width: 1080px) {
  .myinfo__agree {
    padding: 2.6rem 0 0;
  }
}
.myinfo__agree-item {
  font-size: 1.4rem;
}
@media (min-width: 1080px) {
  .myinfo__agree-item {
    font-size: 1.6rem;
  }
}
.myinfo__agree-item + .myinfo__agree-item {
  margin-top: 2rem;
}
.myinfo__agree-item .title {
  font-weight: 700;
  position: relative;
  padding-left: 0.7rem;
}
.myinfo__agree-item .title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7rem;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: #191919;
}
.myinfo__button {
  margin: 2rem;
  text-align: right;
}
@media (min-width: 1080px) {
  .myinfo__button {
    width: 100%;
    max-width: 43rem;
    margin: 7rem auto 0;
  }
}
.popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.4);
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  z-index: 9999;
}
.popup body.popup-open {
  overflow: hidden;
  touch-action: none;
}
.popup.is-active {
  display: flex;
  align-items: center;
  justify-content: center;
}
.popup__button {
  display: block;
  text-align: center;
  padding: 1.4rem;
  border-radius: 0.8rem;
}
.popup__content {
  position: relative;
  padding: 1.4rem 2rem;
  border-radius: 1rem;
  width: 90%;
  margin: 0 auto;
  max-width: 450px;
  background: #fff;
}
@media (min-width: 1080px) {
  .popup__content {
    width: 100%;
  }
}
.popup__content .button {
  font-size: 1.6rem;
}
@media (min-width: 1080px) {
  .popup__content .button {
    font-size: 1.8rem;
  }
}
.popup__content.-full {
  border-radius: 0;
  height: 100%;
  max-width: none;
  width: 100%;
}
@media (min-width: 1080px) {
  .popup__content.-full {
    height: auto;
    max-width: 450px;
    border-radius: 1rem;
  }
}
.popup__title {
  font-weight: 700;
  font-size: 1.8rem;
  padding-bottom: 1.4rem;
  text-align: left;
  position: relative;
}
@media (min-width: 1080px) {
  .popup__title {
    font-size: 2rem;
  }
}
.popup__title.-complete {
  padding-left: 2.8rem;
}
.popup__title.-complete::before {
  content: "";
  width: 2.2rem;
  height: 2.2rem;
  position: absolute;
  left: 0;
  top: 0;
  background: url('../images/popup__success.svg') no-repeat center top / 100%;
}
@media (min-width: 1080px) {
  .popup__title.-complete {
    padding-left: 3.9rem;
  }
  .popup__title.-complete::before {
    width: 3.1rem;
    height: 3.1rem;
  }
}
.popup__aligner {
  border-top: 1px #d9d9d9 solid;
  padding: 1.2rem 0;
  font-size: 1.4rem;
  text-align: left;
}
@media (min-width: 1080px) {
  .popup__aligner {
    font-size: 1.6rem;
  }
}
.popup__impact {
  display: inline-block;
  font-weight: 700;
}
.popup__close {
  text-indent: -99999px;
  cursor: pointer;
  position: absolute;
  right: 2rem;
  top: 1.4rem;
  width: 22px;
  height: 22px;
  background: url('../images/popup__close.svg') no-repeat center top / 100%;
}
.popup__datas {
  border-bottom: 1px #d9d9d9 solid;
  padding: 0 1.1rem 1.2rem;
}
@media (min-width: 1080px) {
  .popup__datas {
    padding: 0.5rem 2rem 2.8rem;
  }
}
.popup__data {
  display: flex;
  justify-content: space-between;
  font-size: 1.4rem;
}
@media (min-width: 1080px) {
  .popup__data {
    font-size: 1.8rem;
  }
}
.popup__data-value {
  text-align: right;
}
.popup__warning {
  text-align: center;
  color: #E0392D;
  font-size: 1.4rem;
  margin-top: 1.4rem;
}
@media (min-width: 1080px) {
  .popup__warning {
    margin-top: 2rem;
    font-size: 1.8rem;
  }
}
.popup__complete {
  text-align: center;
  color: #0057FF;
  font-size: 1.4rem;
  margin-top: 1.4rem;
}
@media (min-width: 1080px) {
  .popup__complete {
    margin-top: 2rem;
    font-size: 1.8rem;
  }
}
.popup__country {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.popup__country-input {
  position: relative;
  font-size: 1.8rem;
}
.popup__country-input input {
  border: 1px #d9d9d9 solid;
  border-radius: 1rem;
  width: 100%;
  padding: 2rem 2.8rem;
}
.popup__country-input input:placeholder {
  color: #191919;
}
.popup__country-close {
  text-indent: -99999px;
  position: absolute;
  right: 6rem;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 2.5rem;
  height: 2.5rem;
  background: url('../images/popup_search-close.svg') no-repeat center top / cover;
}
.popup__country-search {
  text-indent: -99999px;
  position: absolute;
  right: 2.8rem;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 2.5rem;
  height: 2.5rem;
  background: url('../images/popup_search.svg') no-repeat center top / cover;
}
.popup__country-list {
  margin-top: 0.6rem;
  border: 1px #d9d9d9 solid;
  border-radius: 1rem;
  width: 100%;
  padding: 1.6rem 2.2rem;
  font-weight: 500;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  max-height: 48rem;
}
.popup__country-list::-webkit-scrollbar {
  width: 0;
}
@media (min-width: 1080px) {
  .popup__country-list:hover {
    scrollbar-width: thin;
  }
  .popup__country-list:hover::-webkit-scrollbar {
    width: 0.6rem;
  }
  .popup__country-list:hover::-webkit-scrollbar-track {
    background: transparent;
  }
  .popup__country-list:hover::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
  }
}
.popup__country-list li button {
  padding: 1.2rem 1rem;
  font-size: 1.8rem;
  display: block;
  width: 100%;
  text-align: left;
  cursor: pointer;
}
.popup__country-list li button:focus {
  background: #E6EEFF;
}
.popup__country-list li button:hover {
  background: #E6EEFF;
}
.popup__country-list li .en-name {
  color: #999;
  margin-left: 0.6rem;
  display: inline-block;
}
.alert {
  padding: 2rem 1rem;
  border-radius: 0.6rem;
  width: 100%;
  max-width: 34rem;
  margin: 0 auto 2.4rem;
}
@media (min-width: 1080px) {
  .alert {
    width: 100%;
    max-width: 43rem;
    padding: 2.5rem 1.2rem;
  }
}
.alert__content {
  position: relative;
  padding-left: 2.6rem;
  text-align: left;
  font-size: 1.4rem;
}
@media (min-width: 1080px) {
  .alert__content {
    font-size: 1.6rem;
    line-height: 2rem;
  }
}
.alert__content::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 2rem;
  height: 2rem;
  background-size: 100%;
}
@media (min-width: 1080px) {
  .alert__content::before {
    top: 0.2rem;
  }
}
.alert.-error {
  color: #E0392D;
  background: #FFECE6;
}
.alert.-error .alert__content::before {
  background: url('../images/alert__error.svg') no-repeat center top;
}
.alert.-warning {
  color: #999;
  margin: 1.6rem auto;
  background: #F9F9F9;
}
@media (min-width: 1080px) {
  .alert.-warning {
    margin: 1.1rem auto 2.6rem;
  }
}
.alert.-warning .alert__content::before {
  background: url('../images/alert__warning.svg') no-repeat center top;
}
.alert.-info {
  color: #0057FF;
  background: #E6EEFF;
}
.alert.-info .alert__content::before {
  background: url('../images/alert__info.svg') no-repeat center top;
}
.componets {
  padding: 2rem;
}
.dropdown {
  width: 100%;
  max-width: 43rem;
  margin: 0 auto;
}
.dropdown.-reserv .dropdown__expander {
  padding: 1rem 2.6rem;
  align-items: center;
}
@media (min-width: 1080px) {
  .dropdown.-reserv .dropdown__expander {
    padding: 1.1rem 2.9rem;
  }
}
.dropdown.-reserv .dropdown__item + .dropdown__item {
  margin-top: 4.6rem;
}
.dropdown__list {
  width: 100%;
}
@media (min-width: 1080px) {
  .dropdown__list {
    max-width: 43rem;
    margin: 0 auto;
  }
}
.dropdown__list.-myinfo {
  border-bottom: 1px #d9d9d9 solid;
}
.dropdown__list.-myinfo .dropdown__heading {
  border-bottom: 1px #d9d9d9 solid;
}
.dropdown__list.-myinfo .dropdown__expander {
  padding: 1.1rem 2.6rem;
}
@media (min-width: 1080px) {
  .dropdown__list.-myinfo .dropdown__expander {
    padding: 1.2rem 2.9rem;
  }
}
.dropdown__list.-myinfo .dropdown__expands {
  display: block;
  padding: 1.1rem 2.6rem;
}
@media (min-width: 1080px) {
  .dropdown__list.-myinfo .dropdown__expands {
    padding: 1.2rem 2.9rem;
  }
}
.dropdown__list.-myinfo .dropdown__item:last-child .dropdown__heading {
  border-bottom: 1px #d9d9d9 solid;
}
.dropdown__item {
  border-top: 4px solid #F4F4F4;
}
.dropdown__item + .dropdown__item {
  border-top: 4px solid #F4F4F4;
}
.dropdown__item.-view .dropdown__expander {
  position: relative;
  padding-right: 5rem;
}
.dropdown__item.-view .dropdown__expander::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 2rem;
  transform: translateY(-50%);
  width: 2.2rem;
  height: 2.2rem;
  background: url('../images/dropdown__arrow.svg') no-repeat center / contain;
  transition: transform 0.3s ease;
  transform: translateY(-50%) rotate(0);
}
.dropdown__item.is-open .dropdown__expander::after {
  transform: translateY(-50%) rotate(180deg);
}
.dropdown__heading.-request {
  border-bottom: none;
}
.dropdown__expander {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  width: 100%;
  position: relative;
  padding: 2rem 1.6rem;
  font-size: 1.6rem;
}
@media (min-width: 1080px) {
  .dropdown__expander {
    padding: 2.2rem 2.8rem;
  }
}
.dropdown__subject {
  font-weight: 700;
  text-align: left;
}
.dropdown__subject.sub {
  font-size: 1.6rem;
}
@media (min-width: 1080px) {
  .dropdown__subject.sub {
    font-size: 1.8rem;
  }
}
.dropdown__data {
  padding: 2rem 2.4rem;
  border-top: 1px #d9d9d9 solid;
}
@media (min-width: 1080px) {
  .dropdown__data {
    padding: 2.2rem 2.8rem;
  }
}
.dropdown__data .dropdown__data-title {
  text-align: left;
}
.dropdown__data .dropdown__data-value {
  text-align: right;
}
.dropdown__data-item {
  display: flex;
  justify-content: space-between;
}
.dropdown__data-item + .dropdown__data-item {
  margin-top: 1rem;
}
.dropdown__expands {
  display: none;
}
.dropdown__expands.-request {
  display: block;
}
.dropdown__expand {
  padding: 2rem 2.4rem;
  background: rgba(217, 217, 217, 0.2);
}
.dropdown__expand.-background-none {
  background: none;
  padding: 0;
}
.dropdown__expand.-background-none .form {
  max-width: none;
}
@media (min-width: 1080px) {
  .dropdown__expand {
    padding: 2.2rem 2.8rem;
  }
}
.dropdown__content-item {
  font-size: 1.4rem;
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.dropdown__content-item + .dropdown__content-item {
  margin-top: 1rem;
}
@media (min-width: 1080px) {
  .dropdown__content-item {
    font-size: 1.6rem;
  }
}
.dropdown__title {
  text-align: left;
  width: 8rem;
}
.dropdown__value {
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: calc(100% - 8rem);
}
.dropdown__value.-check {
  position: relative;
  padding-left: 2rem;
  width: fit-content;
  display: flex;
  align-self: center;
  color: #004ABA;
}
.dropdown__value.-check::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 1.7rem;
  height: 1.7rem;
  background: url('../images/myinfo_check.svg') no-repeat center top / 100%;
}
.dropdown__value#reservName {
  width: 13rem;
}
.dropdown__btn {
  border: 1px #d9d9d9 solid;
  border-radius: 0.6rem;
  padding: 1.4rem 1.6rem;
  margin: 1.8rem 0;
  width: 90%;
  background: #fff;
}
@media (min-width: 1080px) {
  .dropdown__btn {
    width: 100%;
    padding: 1.6rem 1.8rem;
    margin: 2rem 0;
  }
}
.dropdown__button {
  align-self: center;
  width: 100%;
  max-width: fit-content;
  padding: 0 1.6rem;
  height: 2.8rem;
  line-height: 2.8rem;
  color: #666;
  font-size: 1.4rem;
  border-radius: 1.4rem;
  border: 1px #d9d9d9 solid;
  background: #fff;
}
@media (min-width: 1080px) {
  .dropdown__button {
    height: 3.3rem;
    line-height: 3.3rem;
    font-size: 1.6rem;
  }
}
.dropdown__caption {
  display: block;
}
.login-wrap.-reserving {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 5rem;
  text-align: left;
}
.reserv__fix {
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  padding: 0 2rem;
  z-index: 9;
  background: #fff;
}
@media (min-width: 1080px) {
  .reserv__fix {
    padding: 0;
    background: transparent;
  }
}
.reserv__fix.is-fixed {
  position: fixed;
  top: 5rem;
  padding-bottom: 1rem;
  z-index: 20;
  margin: 0;
  border-top: none;
  border-bottom: 1px #d9d9d9 solid;
  background: #fff;
}
@media (min-width: 1080px) {
  .reserv__fix.is-fixed {
    box-shadow: none;
    max-width: 52.9rem;
    left: 50%;
    top: 4.5rem;
  }
}
.reserv__top {
  width: 100%;
  margin: 0 auto;
}
.reserv__sub {
  color: #666;
  font-size: 1.4rem;
  text-align: left;
  width: 100%;
  max-width: 43rem;
  margin: 1rem auto 0;
  padding: 0 2rem;
}
@media (min-width: 1080px) {
  .reserv__sub {
    font-size: 1.6rem;
    margin: 1.4rem auto 0;
    padding: 0;
  }
}
.reserv__contetns {
  padding-top: 12.5rem;
}
@media (min-width: 1080px) {
  .reserv__contetns {
    padding-bottom: 12rem;
  }
}
.reserv__selected {
  display: flex;
  justify-content: space-between;
  padding: 2rem 3rem;
  font-size: 1.6rem;
  font-weight: 700;
  border-top: 3px #d9d9d9 solid;
  margin-top: 2.4rem;
}
@media (min-width: 1080px) {
  .reserv__selected {
    padding: 2rem 3rem;
  }
}
.reserv__selected-label {
  display: block;
  font-weight: 700;
}
.reserv__selected-value {
  font-weight: 700;
}
.reserv__contens {
  width: 100%;
  overflow-y: auto;
  /* 캘린더 헤더 */
  /* 달 이동 버튼 */
  /* 슬라이더 (요일 + 날짜) */
  /* 시간표 */
}
.reserv__contens .calendar-header {
  display: flex;
  justify-content: center;
  width: 100%;
  align-items: center;
  height: 7rem;
  line-height: 7rem;
  padding: 0 0.3rem;
  box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.05);
}
.reserv__contens .calendar-header .calendar-btn {
  margin: 0 2rem;
}
.reserv__contens .calendar-month {
  font-size: 1.6rem;
  font-weight: 700;
}
.reserv__contens .calendar-btn {
  background: none;
  border: none;
  font-size: 2rem;
  cursor: pointer;
}
.reserv__contens .calendar-slider {
  display: flex;
  align-items: center;
  justify-content: left;
  width: 100%;
  position: relative;
  overflow: hidden;
  padding: 1.6rem 0.3rem 4rem;
  border-top: 1px #d9d9d9 solid;
  border-bottom: 1px #d9d9d9 solid;
}
@media (min-width: 1080px) {
  .reserv__contens .calendar-slider {
    justify-content: space-between;
  }
}
.reserv__contens .calendar-slider .calendar-btn {
  margin: 0 0.5rem;
}
.reserv__contens .calendar__dates {
  display: flex;
  justify-content: space-around;
  gap: 0.2rem;
  width: 100%;
  padding: 0;
  transition: transform 0.3s ease;
  will-change: transform;
}
@media (min-width: 1080px) {
  .reserv__contens .calendar__dates {
    gap: 0.5rem;
    margin: 0 1rem;
  }
}
.reserv__contens .calendar__dates li {
  text-align: center;
}
.reserv__contens .calendar__dates .day {
  display: block;
  font-size: 1.6rem;
  font-weight: 700;
  color: #B7B7B7;
  margin-bottom: 0.25rem;
}
.reserv__contens .calendar__dates .date {
  position: relative;
  display: inline-block;
  width: 4.6rem;
  height: 4.6rem;
  font-size: 1.6rem;
  font-weight: 700;
  cursor: pointer;
  transition: 0.2s;
}
.reserv__contens .calendar__dates .date.active {
  color: #fff;
  font-weight: 700;
  border-radius: 50%;
  background: #0057FF;
}
.reserv__contens .calendar__dates .date.active .today {
  bottom: -3rem;
}
.reserv__contens .calendar__dates .date .today {
  display: block;
  font-size: 1.2rem;
  color: #0057FF;
  line-height: 1;
  position: absolute;
  bottom: -2rem;
  left: 50%;
  transform: translateX(-50%);
}
.reserv__contens .calendar__dates .date .today::before {
  content: "";
  position: absolute;
  top: -1rem;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: #0057FF;
}
.reserv__contens .calendar__dates .date.-disabled {
  color: #d9d9d9;
  cursor: not-allowed;
  pointer-events: none;
  border-radius: 50%;
  background: #F5F5F5;
}
.reserv__contens .time-table-wrap {
  margin-top: 2rem;
  position: relative;
  padding: 0 2rem;
}
.reserv__contens .time-table-label {
  font-size: 1.6rem;
  font-weight: 700;
  display: block;
  float: left;
}
.reserv__contens .time-table-label .required {
  color: #E0392D;
}
.reserv__contens .time-table-guide {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  font-size: 1.6rem;
  color: #999;
  margin-bottom: 2rem;
}
.reserv__contens .time-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}
.reserv__contens .time-table thead th {
  font-size: 1.6rem;
}
.reserv__contens .time-table th,
.reserv__contens .time-table td {
  border: 1px solid #d9d9d9;
  text-align: center;
  height: 4.6rem;
}
.reserv__contens .time-table th {
  background: #f5f5f5;
  position: sticky;
  font-weight: 500;
  top: 0;
  font-size: 1.8rem;
  z-index: 2;
}
.reserv__contens .time-table button {
  display: block;
  padding: 1rem;
  width: 100%;
  height: 100%;
  border: none;
  cursor: pointer;
  background: url('../../resources/images/timetable_select.svg') no-repeat center center / 2.4rem;
}
@media (min-width: 1080px) {
  .reserv__contens .time-table button {
    background-size: 2.8rem;
  }
}
.reserv__contens .time-table button:hover {
  background: #0057FF url('../../resources/images/timetable_active.svg') no-repeat center center / 2.4rem;
}
.reserv__contens .time-table button.-active {
  background: #0057FF url('../../resources/images/timetable_active.svg') no-repeat center center / 2.4rem;
}
.reserv__contens .time-table button:disabled {
  color: #ccc;
  pointer-events: none;
  cursor: not-allowed;
  background: #F5F5F5 url('../../resources/images/timetable_disabled.svg') no-repeat center center / 2.4rem;
}
.reserv__steps {
  width: 100%;
  max-width: 43rem;
  margin: 1.2rem auto 0;
  display: flex;
  justify-content: space-between;
}
@media (min-width: 1080px) {
  .reserv__steps {
    margin: 1.5rem auto 0;
  }
}
.reserv__step {
  text-align: center;
  position: relative;
  width: 100%;
  max-width: 33%;
}
.reserv__step + .reserv__step::before {
  content: '';
  position: absolute;
  top: 2rem;
  left: -3rem;
  width: 100%;
  max-width: 5rem;
  height: 1px;
  background: #d9d9d9;
  z-index: 0;
}
.reserv__step__contetns .-fix .form__title {
  margin-bottom: 0.8rem;
}
@media (min-width: 1080px) {
  .reserv__step__contetns .-fix .form__title {
    margin-bottom: 1rem;
  }
}
.reserv__step .reserv__number {
  position: relative;
  width: 4rem;
  height: 4rem;
  z-index: 1;
  display: block;
  line-height: 4rem;
  border-radius: 50%;
  margin: 0 auto;
  text-align: center;
  color: #0057FF;
  font-size: 1.4rem;
  background: #F2F7FF;
}
.reserv__step .reserv__number::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  transform: translate(-50%, -50%);
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  background: #BFD5FF;
}
@media (min-width: 1080px) {
  .reserv__step .reserv__number {
    font-size: 1.6rem;
  }
}
.reserv__step .reserv__value {
  font-size: 1.4rem;
  margin: 1.2rem 0 0;
}
@media (min-width: 1080px) {
  .reserv__step .reserv__value {
    font-size: 1.6rem;
    margin: 1.5rem 0 0;
  }
}
.reserv__step.-on .reserv__number {
  color: #fff;
  background: #F2F7FF;
}
.reserv__step.-on .reserv__number::after {
  background: #0057FF;
}
.reserv__step.-on .reserv__value {
  font-weight: 700;
}
.toast {
  position: fixed;
  bottom: 12rem;
  left: 0;
  right: 0;
  margin: 0 auto;
  color: #E0392D;
  background: #FFECE6;
  border-radius: 0.6rem;
  width: 90%;
  max-width: 43rem;
  font-size: 1.4rem;
  padding: 2rem 1rem 2rem 4rem;
  text-align: left;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  z-index: 9999;
  animation: fadein 0.3s ease, fadeout 0.3s ease 4.7s;
}
@media (min-width: 1080px) {
  .toast {
    left: 50%;
    font-size: 1.6rem;
    width: 100%;
    max-width: 43rem;
    bottom: 13.5rem;
    margin: 0 0 0 5rem;
  }
}
.toast::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 2.1rem;
  width: 2rem;
  height: 2rem;
  background-size: 100%;
  background: url('../images/alert__error.svg') no-repeat center top;
}
@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeout {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.floating {
  position: fixed;
  right: 2rem;
  bottom: 2rem;
  text-align: center;
}
@media (min-width: 1080px) {
  .floating {
    right: 2.5rem;
    bottom: 2.5rem;
  }
}
.floating__lang {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 0.6rem;
  position: fixed;
  right: 2rem;
  bottom: 2rem;
}
.floating__lang button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  box-shadow: 0px 0px 14px 0px rgba(81, 81, 81, 0.15);
  background: #fff;
}
.floating__lang button:hover,
.floating__lang button:focus {
  outline: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px #0057FF;
}
@media (min-width: 1080px) {
  .floating__lang button {
    width: 6.2rem;
    height: 6.2rem;
  }
}
.floating__lang button img {
  width: 2.8rem;
  height: 2.8rem;
  display: block;
}
.floating__lang-list {
  border-radius: 3.4rem;
  padding: 2.2rem 0;
  width: 100%;
  max-width: 5rem;
  margin-bottom: 1rem;
  box-shadow: 0px 0px 14px 0px rgba(81, 81, 81, 0.15);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
  background: #fff;
}
@media (min-width: 1080px) {
  .floating__lang-list {
    max-width: 6.2rem;
    padding: 3rem 0;
  }
}
.floating__lang-list.-up {
  max-height: 50rem;
  opacity: 1;
  transform: translateY(0);
}
.floating__lang-item {
  font-size: 1.4rem;
  padding: 1rem;
}
@media (min-width: 1080px) {
  .floating__lang-item {
    font-size: 1.6rem;
  }
}
.floating__lang-item a {
  display: block;
}
.floating__lang-item a:hover {
  font-weight: 700;
  color: #0057FF;
}
.floating__channel-talk button {
  display: block;
  width: 5rem;
  height: 5rem;
  border-radius: 6.2rem;
  background: linear-gradient(154deg, #21D4FD 1.04%, #B721FF 95.75%);
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}
.floating__channel-talk button:hover,
.floating__channel-talk button:focus {
  outline: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px #0057FF;
}
@media (min-width: 1080px) {
  .floating__channel-talk button {
    width: 6.2rem;
    height: 6.2rem;
  }
}
.footer {
  padding: 2rem 1.6rem;
  text-align: left;
  width: 100%;
  background: #e8e8e8;
}
@media (min-width: 1080px) {
  .footer {
    max-width: 52.9999rem;
    left: 50%;
  }
}
.footer__inner {
  width: 100%;
  max-width: 43rem;
  margin: 0 auto;
}
.footer__button {
  text-align: left;
  position: relative;
  z-index: 2;
  width: fit-content !important;
  margin: 0 0 2rem;
  padding-right: 2.5rem;
  font-size: 1.2rem;
  color: #999;
  font-weight: 700;
  cursor: pointer;
}
.footer__button::before {
  content: "";
  position: absolute;
  top: 0.3rem;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 1.8rem;
  height: 1.8rem;
  background: url('../images/footer__button.svg') no-repeat center 3px / 100%;
  transition: transform 0.3s ease;
}
.footer__button.on::before {
  top: 0.7rem;
  transform: rotate(180deg);
}
.footer__button button {
  color: #666;
  font-size: 1.2rem;
  font-weight: 700;
}
.footer__info {
  display: none;
  bottom: 4rem;
  left: 0;
  right: 0;
  width: 100%;
  margin: 16px 0;
  padding: 0;
  z-index: 1;
}
.footer__util-item {
  display: flex;
  justify-content: left;
}
.footer__util-title {
  font-size: 10px;
  color: #999;
  font-size: 1rem;
}
.footer__util-title span {
  display: inline-block;
  margin: 0 0.2rem;
}
.footer__util-value {
  color: #999;
  font-size: 1.4rem;
  text-align: left;
  font-size: 10px;
}
.footer__desc {
  margin-top: 1.2rem;
  color: #999;
  font-size: 10px;
  line-height: 1.4rem;
}
.footer__link a {
  display: inline-block;
  color: #999;
  font-size: 1.2rem;
  border-bottom: 1px #999 solid;
}
.footer__link a:last-child {
  font-weight: 700;
}
.footer__copy {
  color: #999;
  font-size: 10px;
  margin-top: 1rem;
}
.m-none {
  display: none;
}
@media (min-width: 1080px) {
  .m-none {
    display: block;
  }
}
.pc-none {
  display: block;
}
@media (min-width: 1080px) {
  .pc-none {
    display: none;
  }
}
html {
  font-size: 62.5%;
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}
body {
  font-family: 'Inter', sans-serif;
  font-size: 1.6rem;
  color: #191919;
  line-height: 1.5;
}
input.is-error:hover,
input.is-error:focus {
  outline: 0;
  border-radius: 0.6rem;
  border: 1px #E0392D solid;
  box-shadow: 0 0 0 2px #fff;
}
input.is-success:hover,
input.is-success:focus {
  outline: 0;
  border-radius: 0.6rem;
  border: 1px #0057FF solid;
  box-shadow: 0 0 0 2px #fff;
}
button,
input,
select,
textarea,
a {
  font-family: 'Inter', sans-serif;
  font-size: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
  appearance: none;
}
button:hover,
input:hover,
select:hover,
textarea:hover,
a:hover,
button:focus,
input:focus,
select:focus,
textarea:focus,
a:focus {
  outline: 0;
  border-radius: 0.6rem;
  box-shadow: 0 0 0 1px #fff, 0 0 0 2px #0057FF;
}
select {
  border-radius: 0.6rem;
  border: 1px ;
  width: 100%;
  max-width: 43rem;
  padding: 1.4rem 1.6rem;
  font-size: 1.6rem;
  margin: 0 auto;
  border: 1px #d9d9d9 solid;
  background: url('../images/select-arr.svg') no-repeat 95% center;
}
select:hover,
select:focus {
  outline: 0;
  border-radius: 0.6rem;
  box-shadow: 0 0 0 1px #fff, 0 0 0 2px #0057FF;
}
@media (min-width: 1080px) {
  select {
    font-size: 1.8rem;
    padding: 1.7rem 1.9rem;
  }
}
.line {
  height: 0.4rem;
  width: 100%;
  margin: 3rem 0;
  background: #d9d9d9;
}
@media (min-width: 1080px) {
  .line {
    height: 0.5rem;
    margin: 3.4rem 0;
  }
}