/* font */
@font-face {
	font-family: 'SUIT Variable';
	font-weight: 400 500 600 700;
	src: url('../font/SUIT-Variable.woff2') format('font-woff2');
}
/* root */
:root {
  --primary-color: #1B5123;
  --content-bg-color: #F3F4F5;
  --white-color: #ffffff;
  --text-color: #000;
  --btn-color: #071146;
  --warning-color: #E31A1D;
  --agree-color: #0085FF;
  --gray-color: #838C97;
  --gray2-color: #B3B3B3;
  --check-color: #11C5A4;
  --footer-color: #818493;
  --deadline-color: #0062A9;
  --imminent-color: #C91C1C;
  --sale-color: #E99800;

  /* font size */
  --font-size-9: 0.5625rem;   /* 9px */
  --font-size-10: 0.625rem;   /* 10px */
  --font-size-11: 0.6875rem;  /* 11px */
  --font-size-12: 0.75rem;    /* 12px */
  --font-size-13: 0.8125rem;  /* 13px */
  --font-size-14: 0.875rem;   /* 14px */
  --font-size-16: 1rem;       /* 16px */
  --font-size-18: 1.125rem;   /* 18px */
  --font-size-20: 1.25rem;    /* 20px */

  /* letter-spacing */
  --letter-spacing: 0.0125rem; /* 0.2px */
}



/* reset.css */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 100%; /* 1rem = 16px */
  background-color: #757575;
}

body {
  width: 100%;
  height: auto;
  max-width: 720px;
  font-family: 'SUIT Variable';
  font-weight: 400;
  font-size: var(--font-size-16);
  letter-spacing: var(--letter-spacing);
  line-height: 1.5;
  position: relative;
  margin: 0 auto;
  background-color: var(--content-bg-color);
}

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
  font-weight: 600;
}

ul, ol {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit; 
}
button ,a{
  cursor: pointer;
}
button, input, select, textarea {
  background: none;
  border: none;
  font: inherit;
  color: inherit;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

blockquote, q {
  quotes: none;
}

img {
  max-width: 100%;
  height: auto;
}

address {
  font-style: normal;
}

dfn {
  font-style: italic;
}


/* common */
#brheader{
  width: 100%;
  height: 9.93rem;
  padding-top: 2.75rem;
  box-sizing: border-box;
  background-color: var(--primary-color);
  position: relative;
}
#brheader .logo{
  width: 11.25rem;
  height: 2.367rem;
  position: absolute;
  top: 2.25rem;
  left: 1.125rem;
  background-image: url('../img/logo.png');
  background-repeat: no-repeat; 
  background-size: contain;
  background-position: center; 
}
#brheader .logo a{
  width: 100%;
  height: 100%;
  display: block;
}
#brheader .nav-btn{
  width: 2.75rem;
  height: 2.75rem;
  position: absolute;
  top: 1.75rem;
  right: 1.125rem; 
}
#brheader .username{
  position: absolute;
  color: var(--white-color);
  top: 2.35rem;
  right: 4.25rem; 
  padding-left: 1.25rem;
  background-image: url(../img/icon-user-login.png);
  background-repeat: no-repeat;
  background-size: 1rem;
  background-position: 0 center;
}
#brheader .username span{
  font-weight: 600;
}
#brheader .nav-btn div{
  width: 1.75rem;
  height: 1.75rem;
  margin: 0 auto;
  background-image: url('../img/btn_etc.png');
  background-repeat: no-repeat; 
  background-size: cover;
  background-position: center; 
}
#brheader .banner{
  width: 88.88%;
  height: 26.66vw;
  border-radius: 0.875rem;
  margin: 0 auto;
  position: relative;
  top: 2.875rem;
  overflow: hidden;
}
#brheader .banner .mySwiper.header-banner{
  width: 100%;
  height: 100%;
}
#brheader .banner .mySwiper.header-banner .swiper-wrapper div{
  width: 100%;
  height: 100%;
  background-color: #fff;
  
}
#brheader .banner .mySwiper.header-banner .swiper-wrapper div img{
  width: 100%;
}
#brheader .banner .swiper-pagination{
  display: none;
  width: 2.375rem;
  height: 1.375rem;
  line-height: 1.375rem;
  text-align: center;
  border-radius: 0.937rem;
  font-size: var(--font-size-12);
  color: var(--white-color);
  background-color: var(--text-color);
  font-weight: 600;
  opacity: 0.5;
  position: absolute;
  bottom: 1.25rem;
  left: 1.25rem;
}
#gnb{
  width: 88.88%;
  height: 100vh;
  display: none;;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 11;
  background-color: var(--content-bg-color);
  border-radius: 0.937rem 0.937rem 0 0;
  box-sizing: border-box;
  padding: 4.5rem 1.25rem;
}
#gnb .user{
  width: 100%;
  height: 17.77vw;
  border: 1px solid #C8E4DA;
  border-radius: 0.225rem;
  line-height: 17.77vw;
  padding: 0 1.25rem;
  position: relative;
}
#gnb .user .user-data{
  font-size: var(--font-size-16);
 
}
#gnb .user .user-data .username{
  color: var(--check-color);
  font-weight: 700;
  display: inline-block;
  padding-left: 1.375rem;
  background-image: url('../img/icon-no-login.png');
  background-repeat: no-repeat; 
  background-size: 1rem;
  background-position: 0 center; 
}
#gnb .user .user-data .username.login{
  background-image: url('../img/icon-user-login.png');
}
#gnb .user .user-data + a{
  height: 7.77vw;
  line-height: 7.77vw;
  display: inline-block;
  background-color: var(--check-color);
  color: var(--white-color);
  padding: 0 0.937rem;
  border-radius: 0.937rem;
  font-size: var(--font-size-14);
  position: absolute;
  top: 50%;
  right: 1.25rem;
  transform: translate(0, -50%);
}
#gnb ul{
  margin-top: 8.33vw;
}
#gnb ul li{
  width: 100%;
  height: 15.55vw;
  line-height: 15.55vw;
  background-image: url('../img/icon-menu-itme.png');
  background-repeat: no-repeat; 
  background-size: 1.5rem;
  background-position: right center; 
  border-bottom: 1px solid #DDD;
}
#gnb ul li a{
  width: 100%;
  height: 100%;
  display: block;
}
#gnb .gnb-banner{
  width: calc(100% - 11.1vw);
  height: 22.2vw;
  position: absolute;
  left: 1.25rem;
  bottom: 14vw;
  
}
#gnb .gnb-banner .gnb-swiper{
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 1.125rem;
}
#gnb .gnb-banner .gnb-swiper .swiper-wrapper{
  width: 100%;
  height: 100%;
}
#gnb .gnb-banner .gnb-swiper .swiper-wrapper div{
  width: 100%;
  height: 100%;
  background-color: #fff;
  border-radius: 1.125rem;
}
#gnb .gnb-banner .swiper-pagination{
  position: relative;
  top: 1.5vw;
  left: 0;
}
#gnb .gnb-banner .swiper-pagination .swiper-pagination-bullet-active{
  background: var(--text-color);
}
#gnb .close{
  width: 3.375rem;
  height: 3.375rem;
  position: absolute;
  top: 0.1125rem ;
  right: 0.1125rem;
  background-image: url('../img/close.png');
  background-repeat: no-repeat; 
  background-size: 1.5rem;
  background-position: center; 
}
#brFooter{
  width: 100%;
  padding: 1.25rem;
  box-sizing: border-box;
  background-color: #000;
  color: var(--footer-color);
  
}
#brFooter .icon-page-move{
  width: 1.5rem;
  height: 1.5rem;
  display: inline;
}
#brFooter dl dt{
  color: var(--footer-color);
  font-size: var(--font-size-12);
  font-weight: 600;
}

#brFooter dl dd{
  color: var(--footer-color);
  font-size: var(--font-size-10);
  letter-spacing: -0.15vw;
  line-height: 150%;
}

#brFooter .info-page{
  margin-top: 0.623rem;
  margin-bottom: 0.623rem;
}

#brFooter .info-page > div{
  height: 1.5rem;
  line-height: 1.5rem;
  display: inline-block;
}
#brFooter .info-page > div a{
  width: 100%;
  height: 100%;
  display: flex;
  font-size: var(--font-size-12);
}

#brFooter .info-page .info-page__conditions{
   margin-right: 0.5rem;
}

#brFooter .copyright{
  font-size: var(--font-size-10);
  color: #353A52;
}
#dimm{
  width: 100vw;
  height: 100vh;
  background-color: #000;
  opacity: 0.8;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  display: none;
}
#loader{
  width: 100vw;
  height: 100vh;
  background-color: #FFF;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  display: none;
}

#loader .loader {
  width: 80px;
  padding: 12px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #1E1E1E;
  position: absolute;
  top: calc(50% - 40px);
  left: calc(50% - 40px);
  --_m: 
    conic-gradient(#0000 10%,#000),
    linear-gradient(#000 0 0) content-box;
  -webkit-mask: var(--_m);
          mask: var(--_m);
  -webkit-mask-composite: source-out;
          mask-composite: subtract;
  animation: l3 1s infinite linear;
}
@keyframes l3 {to{transform: rotate(1turn)}}
#cancel{
  display: none;
}
#popup{
  display: none;
  width: 88.88%;
  padding: 5.5% 5.5% 5.5%;
  background-color: var(--content-bg-color);
  position: fixed;
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 11;
  border-radius: 2vw;
  text-align: center;
}
#popup strong{
  width: 100%;
  font-size: var(--font-size-20);
  font-weight: 700;
  text-align: center;
  margin-bottom: 1.5rem;
}
#popup .text-box{
  width: 100%;
  background-color: var(--white-color);
  box-sizing: border-box;
  border: 1px solid var(--check-color);
  padding: 1.5rem 1.25rem;
  border-radius: 1.2rem;
  margin: 1.5rem 0;
  text-align: left;
}
#popup .text-box span.check{
  color: var(--check-color);
}
#popup .text-box span.red{
  color: var(--warning-color);
}
#popup .text-box span.bold{
  font-weight: 800;
}
button:disabled{
  background-color: #757575 !important;
  color: #C4C8D3 !important;
}

#popupSecede{
  display: none;
  width: 88.88%;
  padding: 5.5% 5.5% 5.5%;
  background-color: var(--content-bg-color);
  position: fixed;
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 11;
  border-radius: 2vw;
  text-align: center;
}
#popupSecede strong{
  width: 100%;
  font-size: var(--font-size-20);
  font-weight: 700;
  text-align: center;
  margin-bottom: 1.5rem;
}
#popupSecede .text-box{
  width: 100%;
  background-color: var(--white-color);
  box-sizing: border-box;
  border: 1px solid var(--check-color);
  padding: 1.5rem 1.25rem;
  border-radius: 1.2rem;
  margin: 1.5rem 0;
  text-align: left;
}
#popupSecede .submit-btn{
  display: flex; 
  justify-content: space-between;
  gap: 2%;
}
#popupSecede .submit-btn .btn-confirm {
  width: 49%;
  color: white;
  border: none;
}
#popupSecede .submit-btn .btn-cancel {
  width: 49%;
  background-color: #9e9e9e !important;
  color: white;
  border: none;
}


/* content */
#wrap{
  padding: 3rem 0;
}
#wrap section{
  width: 100%;
  min-height: calc(100vh - 104.5vw);
  padding: 0 1.25rem;
  box-sizing: border-box;
}

.page-title{
  width: 100%;
  font-size: var(--font-size-20);
  font-weight: 700;
  text-align: center;
  margin-bottom: 1.5rem;

}
.page-subtitle{
  width: 100%;
  font-size: var(--font-size-14);
  font-weight: 700;
  text-align: center;
  margin-bottom: 1.5rem;

}
.user-input{
  background-color: var(--white-color);
  width: 100%;
  height: 2.75rem;
  border-radius: 0.375rem;
  box-sizing: border-box;
  padding: 0.75rem;
}
.user-input::placeholder{
  color: #B3B3B3;
}
.btn-large{
  width: 100%;
  height: 14.44vw;
  border-radius: 0.375rem;
  display: block;
  box-sizing: border-box;
  text-align: center;
  line-height: 14.44vw;
  background-color: var(--btn-color) !important;
  color: var(--white-color);
  font-size: var(--font-size-18);
  font-weight: 600;
}
.btn-small{
  width: 100%;
  height: 2.75rem;
  border-radius: 0.375rem;
  display: block;
  box-sizing: border-box;
  text-align: center; 
  line-height: 2.75rem;
}
.btn-array{
  width: 48%;
  height: 14.44vw;
  border-radius: 0.375rem;
  display: inline-block;
  box-sizing: border-box;
  text-align: center;
  line-height: 14.44vw;
  
  
  font-size: var(--font-size-18);
  font-weight: 600;
}
.btn-array:first-of-type {
  background-color: var(--white-color) !important;
  color: var(--btn-color);
  border: 1px solid var(--btn-color);
}

.btn-array:last-of-type {
  background-color: var(--btn-color) !important;
  color: var(--white-color);
}
.warning{
  font-size: var(--font-size-13);
  color: var(--warning-color);
  box-sizing: border-box;
  padding: 0 0 0 1.75rem;
  background-image: url('../img/icon-warning.png');
  background-repeat: no-repeat; 
  background-size: contain;
  background-position: 0 0; 
}
/* agree terms */
.agree-box > label{
  font-size: var(--font-size-18);
  font-weight: 600;
}
.agree-box input[type="checkbox"]{
  display: none;
}
.agree-box .icon-check{
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  display: inline-block;
  position: relative;
  top: 0.375rem;
  border-radius: 1.5rem;
  background-repeat: no-repeat; 
  background-size: 0.937rem;
  background-position: center;
  margin-right: 2vw;
}
.agree-box > .icon-check{
  background-image: url('../img/check_all.png');
  background-color: var(--footer-color);
}
.agree-box > input[type="checkbox"]:checked + .icon-check{
  background-color: var(--check-color);
}
.agree-box > p{
  color: #838383;
  font-size: var(--font-size-14);
  margin-top: 3.33vw;
  margin-bottom: 4.33vw;
}
.agree-box > div{
  margin-bottom: 4.33vw;
}
.agree-box > div label{
  font-size: var(--font-size-18);
}
.agree-box > div label span{
  color: var(--warning-color);
}
/* .agree-box > div.agree-box__select label span{
  color: var(--agree-color);
} */
.agree-box > div p{
  padding: 1.5rem 1rem;
  margin-top: 0.75rem;
  background-color: var(--white-color);
  color: #838383;
  font-size: var(--font-size-14);
  max-height: 42vw;
  overflow-y: auto;
  border-radius: 0.5rem;
}
.agree-box > div .icon-check{
  background-image: url('../img/check_none.png');
}
.agree-box > div input[type="checkbox"]:checked + .icon-check{
  background-image: url('../img/check.png');
}
.submit-btn{
  margin-top: 1.625rem;
}
/* guide */
#guide{
  width: 100vw;
  height: 205.55vw;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 11;
  background-image: url('../img/guide.png');
  background-repeat: no-repeat; 
  background-size: 100%;
  background-position: center;
  display: none;
}
#guide .close-btn{
  position: absolute;
  right: 3.33%;
  bottom:0;
  color: #ddd;
  padding: 1rem 1rem 1rem 1.5rem;
  background-image: url('../img/close_2.png');
  background-repeat: no-repeat; 
  background-size: 1.2rem;
  background-position:0 center;
}
/* sign up */
.input-box{
  margin-bottom: 2rem;
}
.input-box .user-input{
  box-sizing: border-box;
  border: 1px solid #DDDDDD;
}
.input-box > div{
  margin-bottom: 0.75rem;
}
.input-box > div .input-title{
  font-size: var(--font-size-13);
  margin-bottom: 0.225rem;
}
.input-box > div .input-title sup{
  color: var(--warning-color);
  font-size: var(--font-size-10);
  position: relative;
  top: 0.7vw;
}
.input-box > div .warning{
  margin-top: 0.5rem;
}
.input-box > div span{
  font-size: var(--font-size-13);
  color: #B3B3B3;
}
.input-box__username{
  position: relative;
}
.input-box__username .user-input{
  width: calc(100% - 5.5rem);
}
.input-box__username .btn-small{
  width: 5rem;
  background-color: var(--white-color);
  border: 1px solid #757575;
  display: inline-block;
  color: #757575;
  position: absolute;
  bottom: 0;
  right: 0;
}
.input-box__phone-number{
  position: relative;
}

.input-box__phone-number .btn-small{
  width: 6rem;
  background-color: var(--white-color);
  border: 1px solid #757575;
  display: inline-block;
  color: #757575;
  /* position: absolute; */
  bottom: 0;
  right: 0;
  /* font-size: x-large; */
}
.input-box__phone-number .btn-small:disabled {
    opacity: 1; /* 흐려지지 않게 */
    background-color: #A0A0A0 !important; /* 기존 버튼 색상 유지 */
    color: white;
    cursor: not-allowed;
}
.input-box__verification{
  position: relative;
  display: none;
}
.input-box__verification .user-input{
  width: calc(100% - 12.8rem);
}
.input-box__verification .btn-small{
  width: 6rem;
  background-color: var(--white-color);
  border: 1px solid #757575;
  display: inline-block;
  color: #757575;
  /* position: absolute; */
  bottom: 0;
  right: 0;
  /* font-size: x-large; */
}
.input-box__verification .btn-small:disabled {
    opacity: 1; /* 흐려지지 않게 */
    background-color: #A0A0A0 !important; /* 기존 버튼 색상 유지 */
    color: white;
    cursor: not-allowed;
}
#timer {
    text-align: center;
    width: calc(100% - 14.8rem);
}
.input-box__gender input[type="radio"]{
  display: none;
}
.input-box__gender{
  position: relative;
}
.input-box__gender label{
  width: 49.22%;
  height: 2.75rem;
  display: inline-block;
  box-sizing: border-box;
  border: 1px solid #757575;
  border-radius: 0.375rem;
  line-height: 2.75rem;
  text-align: center;
  color: #B3B3B3;
  font-size: var(--font-size-18);
  background-color: var(--white-color);
  font-weight: 600;
}
.input-box__gender label:last-child{
  position: absolute;
  bottom: 0;
  right: 0;
}
.input-box__gender input[type="radio"]:checked + label{
  color: var(--white-color);
  font-size: var(--font-size-18);
  background-color: #757575;
}
/* login */
.login-input input{
  margin-bottom: 0.75rem;
}
.login-btn button{
  color: var(--white-color);
  background: var(--btn-color);
  font-size: var(--font-size-18);
  margin-top: 0.75rem;
}
.login-btn > div{ 
  margin-top: 0.225rem;
  position: relative;
  text-align: center;
}
.login-btn > div::after{
  display: block;
  content: "";
  width: 1px;
  height: 2.6vw;
  background-color: var(--gray-color);
  position: absolute;
  top: 0.75rem;
  left: 9.625rem;
}
.login-btn > div a{
  display: inline-block;
  font-size: var(--font-size-13);
  padding: 2.3vw 1.375rem;
  color: var(--gray-color);
}
.oauth-login a{
  overflow: hidden;
  text-indent: -9999px;
  background-repeat: no-repeat; 
  background-size: cover;
  background-position: center; 
  margin-top: 2.33vw;
}
.oauth-login .naver-btn{
  background-image: url('../img/naver.png');
}
.oauth-login .kakao-btn{
  background-image: url('../img/kakao.png');
}
.oauth-login .apple-btn{
  background-image: url('../img/apple.png');
}
.oauth-login .google-btn{
  background-image: url('../img/google7.png');
}
.sign-up{
  margin-top: 1.5rem;
}
.sign-up a{
  background-color: var(--white-color);
  border: 1px solid #757575;
  font-weight: 600;
}
/* schedule-box */
#schedule-box{
  width: 100%;
  padding: 1.25rem;
  background-color: var(--content-bg-color);
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 11;
  border-radius: 1.25rem 1.25rem 0 0;
  display: none;
}

#schedule-box .schedule-title{
  display: block;
  margin-bottom: 1.75rem;
  font-size: var(--font-size-18);
  
}
#schedule-box #schedule-box_wrap{
  width: 100%;
  max-height: 70vh;
  overflow-y: auto;
}
#schedule-box .schedule-item{
  margin: 0.625rem 0;
  background-color: var(--white-color);
  border-radius: 0.937rem;
  padding: 1.25rem;
}
#schedule-box .schedule-item .item__status{
  height: 1.5rem;
  padding: 0 0.75rem;
  line-height: 1.5rem;
  display: inline-block;
  font-size: var(--font-size-12);
  color: var(--white-color);
  border-radius: 0.75rem; 
  position: relative;
  top: -0.125rem;
}
#schedule-box .schedule-item .item__status.possible{
  background-color: var(--agree-color);
}
#schedule-box .schedule-item .item__status.sale{
  background-color: var(--sale-color);
}
#schedule-box .schedule-item .item__status.deadline{
  background-color: var(--gray2-color);
}
#schedule-box .schedule-item .item__title{
  height: 1.5rem;
  line-height: 1.6rem;
  font-size: var(--font-size-15);
  display: inline-block;
  padding-left: 0.25rem;
}
#schedule-box .schedule-item .itme__info{
  text-align: center;
}
#schedule-box .schedule-item .itme__time{
  color: var(--gray-color);
  font-size: var(--font-size-14);
  display: inline-block;
  padding-left: 1.375rem;
  background-image: url('../img/iocn-time.png');
  background-repeat: no-repeat; 
  background-size: 1rem;
  background-position: 0 0.11rem;
}
#schedule-box .schedule-item .itme__seat{
  color: var(--warning-color);
  font-size: var(--font-size-14);
  display: inline-block;
  padding-left: 1.375rem;
  background-image: url('../img/iocn-seat.png');
  background-repeat: no-repeat; 
  background-size: 1rem;
  background-position: 0 0.06rem; 
  margin-left: 0.937rem;

}
#schedule-box .schedule-item .itme__seat + span{
  color: var(--gray-color);
  font-size: var(--font-size-14);
}
#schedule-box .schedule-item .item__submit{
  margin-top: 1.25rem;
  text-align: center;
}
#schedule-box .schedule-item .item__submit button{
  width: 100%;
  height: 11.11vw;
  line-height: 11.11vw;
  box-sizing: border-box;
  border: 1px solid var(--check-color);
  color: var(--check-color);
  border-radius: 0.45rem;
}
#schedule-box .schedule-item .item__submit.deadline button{
  border-color: var(--gray2-color);
  color: var(--gray2-color);
}
#schedule-box .close{
  width: 3.37rem;
  height: 3.37rem;
  position: absolute;
  top: 0.125rem;
  right: 0.125rem;
  background-image: url('../img/close.png');
  background-repeat: no-repeat; 
  background-size: 1.25rem;
  background-position: center; 
}
/* find-id */
.find-input input{
  margin-bottom: 0.75rem;
}
.find-input .warning{
  display: none;
}
.find-response{
  text-align: center;
  background-color: var(--white-color);
  padding: 3rem 1.25rem;
  font-size: var(--font-size-18);
  font-weight: 500;
  border-radius: 0.5rem;
}
.find-response span{
  color: var(--check-color);
}
.find-response span.find-email{
  display: inline-block;
  border-bottom: 1px solid var(--check-color);
}
/* info-text-box */
.info-text-box{
  background-color: var(--white-color);
  padding: 1.5rem 1rem;
  border-radius: 0.5rem;
  color: #838383;
}
.info-text-box .info{
  font-size: 13px;
}
/* main */
.calender-title{
  width: 80%;
  text-align: center;
  margin: 0 auto;
}
.calender-title h2{
  font-size: var(--font-size-18);
  display: inline-block;
  line-height: 1.5rem;
  padding: 1rem 0;
}
.calender-title button{
  width: 1.5rem;
  height: 1.5rem;
  background-repeat: no-repeat;
  background-size: 1.5rem;
  background-position: center;
  padding: 2rem;
  position: relative;
  top: -0.4rem;
}
.calender-title button.prev{
  background-image: url('../img/prev_btn.png');
}
.calender-title button.next{
  background-image: url('../img/next_btn.png');
}
#calender{
  background-color: var(--white-color);
  border-radius: 0.5rem;
}
.day-of-the-week { 
  display: flex;
  justify-content: space-between; 

}

.day-of-the-week div {
  flex: 1;
  text-align: center; 
  padding: 10px; 
  box-sizing: border-box;
  border-left: 1px solid #F3F4F5;
  font-size: var(--font-size-14);
}
.calender-days > div{
  display: flex;
  justify-content: space-between; 
}
.calender-days div > div.date {
    /* flex: 1 0 calc(100% / 7); */
    flex: 1;
    text-align: center; 
    padding: 6px 3px; 
    box-sizing: border-box;
    border-top: 1px solid #F3F4F5;
    border-left: 1px solid #F3F4F5;
}
.calender-days div > div.date.day-on{
  border: 2px solid var(--sale-color);
}
.calender-days div > div.date.day-off div{
  opacity: 0.3;
}
.calender-days div > div.date.day-off .date__number{
  color: #000;
}
.calender-days div > div.date .date__number{
  font-size: var(--font-size-12);
}
.calender-days div > div.date .date__number.holidays {
  color: var(--warning-color);
}
.calender-days div > div.date .date__schedule{
  width: 100%;
  /* height: 0.875rem; */
  line-height: 0.74rem;
  font-size: var(--font-size-9);
  border-radius: 0.2rem;
  /* white-space: nowrap; */
  /* overflow: hidden;       */
  text-overflow: ellipsis;
  padding: 0.15rem 0.25rem;
  margin: 0.1rem 0;
}
.calender-days div > div.date .date__schedule.deadline{
  color: var(--white-color);
  background-color: var(--footer-color);
}
.calender-days div > div.date .date__schedule.imminent{
  color: var(--white-color);
  background-color: var(--imminent-color);
}
.calender-days div > div.date .date__schedule.sale{
  color: var(--white-color);
  background-color: var(--sale-color);
}

.calender-days div > div.date .date__schedule.agree{
  color: var(--white-color);
  background-color: var(--agree-color);
}

.calender-days div > div.date .date__schedule.end{
  color: var(--white-color);
  background-color: var(--gray-color);
}


.calender-days .date:nth-child(1) .date__number, .day-of-the-week__sun { 
  color: var(--warning-color);
  border-left: none;
}

.calender-days div:nth-child(7n) .date__number, .day-of-the-week__sat{ 
  color: var(--agree-color);
}
.product-info{
  width: 200px;
  margin: 1.2rem auto 0;
}
.product-info div{
  display: inline-block;
  font-size: var(--font-size-10);
  margin-left: 1rem;
}
.product-info div:nth-child(1){
  margin: 0;
}
.product-info div:nth-child(1)::before{
  background-color: var(--footer-color);
}
.product-info div:nth-child(2)::before{
  background-color: var(--agree-color);
}
.product-info div:nth-child(3)::before{
  background-color: var(--sale-color);
}
.product-info div::before{
  display: inline-block;
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 0.25rem;
  margin-right: 0.25rem;
}

/* reservation */
.reservation-info{
  width: 100%;
  background-color: var(--white-color);
  box-sizing: border-box;
  border: 2px solid var(--check-color);
  padding: 1.5rem 1.25rem;
  border-radius: 1.2rem;
  margin-bottom: 1.5rem;
}
.reservation-info .date-info{
   color: #2A2D32;
   font-size: var(--font-size-18);
}
.reservation-info .product-title{
  font-size: var(--font-size-20);
  color: var(--check-color);
  letter-spacing: 0.1rem;
  display: block;

}
.reservation-info__detail li{
  padding: 0 0 0 1.35rem;
  background-repeat: no-repeat;
  background-size: 1rem;
  background-position: 0 center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reservation-info__detail .reservation-info__detail-time{
  background-image: url("../img/iocn_reservation_time.png");
}
.reservation-info__detail .reservation-info__detail-seat{
  background-image: url("../img/iocn_reservation_seat.png");
}
.reservation-info__detail .reservation-info__detail-amount{
  background-image: url("../img/iocn_reservation_amount.png");
}
.reservation-info__detail .reservation-info__detail-included{
  background-image: url("../img/iocn_reservation_included.png");
  background-position: left top;
}
.reservation-info__detail .reservation-info__detail-greenfee{
  background-image: url("../img/iocn_reservation_greenfee.png");
  background-position: left top;
}
.reservation-info__detail .reservation-info__detail-not-included{
  background-image: url("../img/iocn_reservation_not_included.png");
  background-position: left top;
}
.reservation-info__detail .reservation-info__booking-date{
  background-image: url("../img/iocn_reservation_time.png");
}
.reservation-info__detail .reservation-info__settlement-method{
  background-image: url("../img/iocn_reservation_participationfee.png");
}
.reservation-info__detail .reservation-info__booking-status{
  background-image: url("../img/iocn_reservation_check.png");
}
.reservation-info__detail .reservation-info__payment-guidance{
  background-image: url("../img/iocn_reservation_check.png");
}
.reservation-info__detail li span{
  color: #838C97;
  font-size: var(--font-size-14);
  white-space: normal;
}
.reservation-info__detail li .detail-title{
  color: var(--text-color);
}
.reservation-info__detail li .detail-title::after{
  display: inline-block;
  content: "";
  width: 1px;
  height: var(--font-size-12);
  background-color: #DCDCDC;
  margin-left: 0.5rem;
  margin-right: 0.3rem;
}
.reservation-info__detail li .mark{
  color:  var(--warning-color);
}
.reservation-person-ui{
  width: 100%;
  margin-bottom: 1.5rem;
  border-radius: 1rem;
  background-color: #1E1E1E;
  box-sizing: border-box;
  padding: 0.75rem 1.25rem;
  position: relative;
}
.reservation-person-ui .ui-title{
  color: var(--white-color);
  font-weight: 500;
  letter-spacing: 0;
  display: inline-block;
  margin-right: 0.25rem;
}
.reservation-person-ui .seat-number{
  color: var(--check-color);
}
.reservation-person-ui span{
  color: #757575;
}
.reservation-person-ui .member-ui-button{
  position: absolute;
  top:0.65rem;
  right: 1.25rem;

  
}
.reservation-person-ui .member-ui-button button{
  width: 2.75rem;
  height: 1.75rem;
  line-height: 1.75rem;
  background-color: var(--white-color);
  border: 1px solid #757575;
  box-sizing: border-box;
  border-radius: 0.25rem;
  margin: 0 0 0 0.25rem;
}
.reservation-person-ui .member-ui-button button.checked{
  color: var(--white-color);
  background-color: var(--check-color);
}
.reservation-person{
  width: 100%;
  background-color: var(--white-color);
  box-sizing: border-box;
  border: 2px solid var(--check-color);
  padding: 1.5rem 1.25rem;
  border-radius: 1.2rem;
  overflow: hidden;
  position: relative;
}
.reservation-person.impossible::after{
  width: 100%;
  height: 100%;
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
}
.reservation-person-info{
  padding: 1.5rem 0 0.75rem;
  border-bottom: 1px dashed #B7B7B7;
}
.reservation-person-info:first-child{
  padding-top: 0;
}
.reservation-person-info:last-child{
  border-bottom: none;
}
.reservation-person-info .reservation-person-info__header{
  color: var(--check-color);
  margin-bottom: 0.5rem;
}
.reservation-person-info .eliminate-button{
  width: 1.5rem;
  height: 1.5rem;
  line-height: 1.5rem;
  background-color: var(--check-color);
  color: var(--white-color);
  font-size: var(--font-size-30);
  border-radius: 1.5rem;
  font-weight: 600;
  margin-right: 0.5rem;
  display: none;
}
.reservation-person-info .input-title{
  font-size: var(--font-size-13);
  margin-bottom: 0.225rem;
}
.reservation-person-info .input-title span{
  font-size: var(--font-size-11);
  color: #B3B3B3;
}
.reservation-person-info .input-title sup{
  color: var(--warning-color);
  font-size: var(--font-size-10);
  position: relative;
  top: 0.15rem;
}
.reservation-person-info .input-row{
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.reservation-person-info .input-row > div:first-child{
  width: 58%;
}
.reservation-person-info .input-row > div:last-child{
  width: 38%;
}
.reservation-person-info .input-row .user-input{
  box-sizing: border-box;
  border: 1px solid #757575;
}
.reservation-person-info .input-row .input-box__gender label{
  font-size: var(--font-size-14);
}
.reservation-person-info .input-row .input-box__gender label{
  width: 45%;
  border-color: #757575;
}
.reservation-person-info .input-row .input-box__gender input[type="radio"]:checked + label{
  font-size: var(--font-size-14);
}
.reservation-person-info .input-row .input-box__handicap .handicap{
  width: 100%;
  height: 2.75rem;
  border: 1px solid #757575;
  border-radius: 0.375rem;
  text-align: center;
  appearance: none; /* 기본 브라우저 스타일 제거 */
  -webkit-appearance: none; /* WebKit 기반 브라우저 */
  -moz-appearance: none; /* Firefox */
}
.reservation-person-info .input-row .input-box__handicap .user-input{
  text-align: center;
}
.payment-type{
  width: 100%;
  background-color: var(--white-color);
  box-sizing: border-box;
  padding: 1.5rem 1.25rem;
  border-radius: 1.2rem;
  margin-top: 1.75rem;
}
.payment-type > div{
  padding-left: 2rem;
  position: relative;
}
.payment-type > div .icon{
  width: 1.5rem;
  height: 1.5rem;
  box-sizing: border-box;
  border-radius: 1.5rem;
  border: 1px solid #C4C8D3;
  position: absolute;
  top: 0;
  left: 0;
}
.payment-type > div strong{
  font-weight: 400;
}
.payment-type > div p{
  color: #838C97;
  font-size: var(--font-size-14);
}
.payment-type > div input{
  display: none;
}
.payment-type > div input:checked + label .icon{
  border-color: var(--check-color);
  border-width: 3px;
}
.payment-type > div input:checked + label .icon::after{
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 0.75rem;
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--check-color);
}
.reservation-result , .reservation-correction{
  background-color: #1E1E1E;
  box-sizing: border-box;
  padding: 1.75rem 1.25rem 2.25rem;
  border-radius: 1rem 1rem 0 0;
}
.reservation-result .result-text{
  text-align: right;
  color: #6F6F6F;
  font-size: var(--font-size-14);
  font-weight: 500;
}
.reservation-result .price-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.reservation-result .price-row .price__formula{
  font-weight: 600;
  color: var(--white-color);
}
.reservation-result .price-row .price__formula span{
  color: var(--white-color);
}
.reservation-result .price-row .price__formula .multiply{
  display: inline-block;
  margin: 0 0.3rem 0;
  color: #6F6F6F;
}
.reservation-result .price-row .price__total{
  color: #B8FA55;
  font-size: 1.375rem;
  font-weight: 600;
}

.reservation-result .btn-large{
  background-color: #095113 !important;
}
.reservation-correction{
  position: relative;
  z-index: 1;
}
.reservation-correction .result-info{
  font-size: var(--font-size-14);
  color: var(--white-color);
  position: absolute;
  top: 1.75rem;
  left: 1.5rem;
  padding-left: 1.7rem;
}
.reservation-correction .result-info::after{
  width: 1.25rem;
  height: 1.25rem;
  line-height: 1.15rem;
  border: 1px solid var(--white-color);
  border-radius: 1.25rem;
  display: block;
  content: "?";
  color: var(--white-color);
  text-align: center;
  position: absolute;
  top: 0rem;
  left: 0;
}
.reservation-correction .submit-btn{
  display: flex;
  justify-content: space-between;
}
.reservation-correction .result-text{
  text-align: right;
  color: #6F6F6F;
  font-size: var(--font-size-14);
  font-weight: 500;
  margin-bottom: 1rem;
}
.reservation-correction .price-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.reservation-correction .price-row .price__formula{
  font-weight: 600;
  color: var(--white-color);
}
.reservation-correction .price-row .price__formula span{
  color: var(--white-color);
}
.reservation-correction .price-row .price__formula .multiply{
  display: inline-block;
  margin: 0 0.3rem 0;
  color: #6F6F6F;
}
.reservation-correction .price-row .price__total{
  color: #B8FA55;
  font-size: 1.375rem;
  font-weight: 600;
}
.reservation-correction .price-row .price__addition,
.reservation-correction .price-row .price__decrement{
  color: #FA5555;
  padding-left: 4.25rem;
}
.reservation-correction .price-row .price__addition-total,
.reservation-correction .price-row .price__decrement-total{
  color: #FA5555;

}
.reservation-correction .submit-btn .btn-large{
  width: 49%;
  background-color: #095113 !important;
}
.reservation-correction .submit-btn .btn-large:last-child{
  background-color: var(--white-color) !important;
  color: #095113;
}
/* cancel */
.cancel-wrap{
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 11;
}
.cancel-info{
  background-color: var(--content-bg-color);
  box-sizing: border-box;
  padding: 1.75rem 1.25rem 2.25rem;
  border-radius: 1rem 1rem 0 0;
  position: relative;
  top: 1rem;
}
.cancel-info .cancel-info__title{
  font-size: var(--font-size-20);
}
.cancel-info p{
  font-size: var(--font-size-14);
  margin: 1.25rem 0;
}
.cancel-info .cancel-info__detail{
  background-color: var(--white-color);
  box-sizing: border-box;
  padding: 0.7rem;
  border-radius: 0.5rem;
  margin-bottom: 1.25rem;
}
.cancel-info .cancel-info__detail dt{
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.cancel-info .cancel-info__detail dd{  
  font-size: var(--font-size-14);
}
.cancel-info .cancel-info__message{
  font-weight: 600;
  
}
.cancel-wrap .close{
  width: 3.37rem;
  height: 3.37rem;
  position: absolute;
  top: 1.25rem;
  right: 0.125rem;
  background-image: url('../img/close.png');
  background-repeat: no-repeat; 
  background-size: 1.25rem;
  background-position: center; 
}
 /* last reservation check */
 .reservation-list-ui{
  width: 100%;
  margin-bottom: 1.5rem;
  border-radius: 1rem;
  background-color: #1E1E1E;
  box-sizing: border-box;
  padding: 0.75rem;
  position: relative;
  display: flex;
 }
 .reservation-list-ui .ui-title{
  color: var(--white-color);
 }
 .reservation-list-ui .calendar-ui{
  color: var(--white-color);
  margin: 0 0.5rem;
 }
 .reservation-list-ui .calendar-ui input{
  width: 5rem;
  background-color: var(--white-color);
  box-sizing: border-box;
  padding: 0 0.5rem;
  border-radius: 0.25rem;
  border: 1px solid #B3B3B3;
  background-position: 90% center;
  background-repeat: no-repeat;
  background-size: 1rem;
  background-image: url("../img/date.png");
  color: #000;
 }
 .reservation-list-ui button{
  background-color: #757575;
  color: var(--white-color);
  padding: 0 0.5rem;
  border-radius: 0.3rem;
 }
 .reservation-list__header{
  font-size: var(--font-size-14);
  font-weight: 300;
  display: flex;
  justify-content: space-between;
 }
 .reservation-list__header select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 1.5rem;
  background-position: 90% center;
  background-repeat: no-repeat;
  background-size: 1.5rem;
  background-image: url("../img/icon_option_arrow_.png");
 }
 .reservation-list ul{

 }
 .reservation-list ul li{
  margin: 1.25rem 0;
  background-color: var(--white-color);
  border-radius: 0.937rem;
  padding: 1.25rem;
 }
 .reservation-list ul li .item-header{
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-16);
  margin-bottom: 0.75rem;
 }
 .reservation-list ul li .item-header .item__status{
  font-weight: 600;
 }
 .reservation-list ul li .item-header .item__status.confirmed{
  color: var(--agree-color);
 }
 .reservation-list ul li .item-header .item__status.pending{
  color: var(--warning-color);
 }
 .reservation-list ul li .item-header .item__status.canceled{
  color: var(--text-color);
 }
 .reservation-list ul li .item-header .item__status.request-cancel{
  color: var(--warning-color);
 }
 .reservation-list ul li .item-header .item__status.refund-pending{
  color: var(--warning-color);
 }
 .reservation-list ul li .item-header .item__status.unknown{
  color: var(--sale-color);
 }
 .reservation-list ul li .item-header .item__title{
  height: 1.5rem;
  line-height: 1.6rem;
  font-size: var(--font-size-16);
  display: inline-block;
  padding-left: 0.25rem;
 }
 .reservation-list .itme__info{
  margin: 0.5rem 0;
 }
 .reservation-list .itme__info .itme__time{
  color: var(--gray-color);
  font-size: var(--font-size-14);
  display: inline-block;
  padding-left: 1.375rem;
  background-image: url('../img/iocn-time.png');
  background-repeat: no-repeat; 
  background-size: 1rem;
  background-position: 0 0.11rem;
 }
 .reservation-list .itme__info .itme__seat{
  color: var(--gray-color);
  font-size: var(--font-size-14);
  display: inline-block;
  padding-left: 1.375rem;
  background-image: url('../img/iocn-seat.png');
  background-repeat: no-repeat; 
  background-size: 1rem;
  background-position: 0 0.06rem; 
  margin-left: 0.937rem;
 }
 .reservation-list .item__submit button{
  width: 100%;
  height: 11.11vw;
  line-height: 11.11vw;
  box-sizing: border-box;
  /* border: 1px solid #757575; */
  /* color: #757575; */
  border: 1px solid var(--check-color);
  color: var(--check-color);
  border-radius: 0.45rem;
 }

/* pc */
@media (min-width: 720px) {
  html{
    width: 100%;
    height: auto;
    font-size: 200%;
    position: relative;
    background-color: #757575;
  }
  body{
    width: 720px;
    height: auto;
    
  }
  #brheader .banner{
    height: 6rem;
  }
  /* GNB */
  #gnb{
    height: 100%;
    position: absolute;
  }
  #gnb .user{
    height: 4rem;
    line-height: 4rem;
    position: relative;
  }
  #gnb .user .user-data + a{
    height: 1.75rem;
    line-height: 1.75rem;
  }
  #gnb ul li{
    height: 3.5rem;
    line-height: 3.5rem;
  }
  #gnb .gnb-banner{
    width: 100%;
    height: 5rem;
    border-radius: 1.125rem;
    position: relative;
    left: 0;
    bottom: 0;
    margin-top: 1.5rem;
  }
  .btn-large{
    height: 3.25rem;
    line-height: 3.25rem;
  }
  /* login */

  .login-btn > div::after{
    height: 0.625rem;
  }
  /* guide */
  #guide{
    width: 100%;
    height: 46.25rem;
  }
  /* schedule-box */
  #schedule-box{
    width: 720px;
    position: relative;
    bottom: 0;
    left: 0;
    z-index: 11;
  }
  #schedule-box .schedule-item .item__status{
    height: 1.5rem;
  }
  #schedule-box .schedule-item .item__title{
    height: 1.5rem;
  }

  #schedule-box .schedule-item .item__submit button{
    height: 2.5rem;
    line-height: 2.5rem;
  }
  /* cancel */
  .cancel-wrap{
    width: 100%;
    max-width: 720px;
    position: absolute;
  }

  .reservation-list .item__submit button{
    height: 2.5rem;
    line-height: 2.5rem;
   }
}