@charset "UTF-8";
html,
body {
  height: 100%;
  font-size: 14px;
}

#header {
  border-bottom: 1px solid #ddd;
}

#header .top {
  max-width: var(--max-width);
  margin: 0 auto;
}

#container {
  position: relative;
  background: #efefef;
  padding: 30px 20px;
  min-height: 70%;
}

#container .title {
  position: relative;
  margin-bottom: 30px;
  padding-bottom: 20px;
  font-size: 1.5em;
  font-weight: 500;
  text-align: center;
}

#container .title .notice {
  font-size: 1.2rem;
  font-weight: 400;
  margin-top: 10px;
}

#container .title .small {
  font-size: 1rem;
  font-weight: 400;
}

#container .title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  border-bottom: 2px solid var(--color-main);
}

#container .title span {
  display: inline-block;
}

#container .content {
  max-width: var(--max-width);
  margin: 50px auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

section {
  width: calc(50% - 10px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media screen and (max-width: 700px) {
  section {
    width: 100%;
  }
}
.box {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
}

.box .item {
  padding: 10px;
  border-bottom: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.box .item:last-child {
  border-bottom: 0;
}

.box .box-title {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 1.1em;
  font-weight: 600;
}

.box .box-title-small {
  font-size: 0.8em;
  font-weight: 400;
  color: var(--color-main);
}

.ticket-select {
  display: flex;
  align-items: center;
}

.ticket-select .ticket_view,
.ticket-select .allday_ticket_view {
  border: 0;
  text-align: center;
  width: 100px;
  font-size: 1em;
  outline: none;
  color: #000;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.ticket-select input {
  display: none;
}

.minus,
.plus {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid #ddd;
  border-radius: 50%;
  cursor: pointer;
}

.minus {
  background: url("../images/remove.svg") no-repeat center;
  background-size: 100%;
}

.plus {
  background: url("../images/add.svg") no-repeat center;
  background-size: 100%;
}

.total,
.total-ticket {
  font-weight: 500;
  font-size: 1.2em;
  color: var(--color-main);
}

ul {
  list-style: disc;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

li {
  margin-left: 20px;
  font-size: 0.8em;
}

.input-area {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.input-box {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.input-box input[type=text],
.input-box input[type=email],
.input-box input[type=password],
.input-box input[type=number],
select,
.input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  font-size: 1em;
  outline: none;
  color: #000;
  height: 41px;
}

select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: #fff;
  background: url(../images/select_arrow.svg) no-repeat center right 10px;
  background-size: 1em;
}

.input-box input[type=password] {
  padding-right: 30px;
}

.pwd {
  position: relative;
}

#visible_pwd {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

.check-area {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 10px;
}

.agree-check-area {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.agree-item {
  padding: 0 10px;
}

.agree-top {
  display: flex;
  justify-content: space-between;
  font-size: 0.8em;
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
}

.agree-top .togglePopup::after {
  content: "내용보기";
  color: var(--color-main);
  cursor: pointer;
}

.agree-top.active .togglePopup::after {
  content: "닫기";
  color: var(--color-main);
}

.agree-top .togglePopup:hover::after {
  text-decoration: underline;
}

.agree-body {
  display: none;
  padding: 10px;
  font-size: 0.7em;
  border-bottom: 1px solid #ddd;
}

.agree-top.active + .agree-body {
  display: block;
}

.agree-item:last-child .agree-body,
.agree-item:last-child .agree-top {
  border-bottom: 0;
  padding-bottom: 0;
}

.agree-item:last-child .agree-top.active {
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px !important;
}

.agree-body table {
  border-top: 1px solid #999;
  border-left: 1px solid #999;
  margin-top: 10px;
  width: 100%;
}

.agree-body table td {
  padding: 5px;
  border-bottom: 1px solid #999;
  border-right: 1px solid #999;
}

.agree-body table td:first-child {
  width: 40%;
}

.agree-body table td:last-child {
  width: 60%;
}

.grey-bg {
  background: #efefef;
}

.cancel-table {
  margin-top: 0 !important;
  border-top: 1px solid #999;
  border-left: 1px solid #999;
  margin-top: 10px !important;
  width: 100%;
  font-size: 0.7rem;
}

.cancel-table td {
  text-align: center;
  width: 50% !important;
  padding: 5px;
  border-bottom: 1px solid #999;
  border-right: 1px solid #999;
  vertical-align: middle;
}

.cancel-table td:first-child {
  width: 40%;
}

.cancel-table td:last-child {
  width: 60%;
}

.cancel-info {
  margin-top: 5px;
  font-size: 0.7rem;
}

label input[type=checkbox],
label input[type=radio] {
  display: none;
}

label {
  display: flex;
  gap: 5px;
}

input + .checkbox::after {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 1px solid #999;
  border-radius: 50%;
  background: url("../images/check.svg") no-repeat center;
  background-size: 100%;
  position: relative;
  top: 0.1em;
}

input:checked + .checkbox::after {
  background: var(--color-main) url("../images/check_white.svg") no-repeat center;
  background-size: 100%;
  border-color: var(--color-main);
}

.btn-area {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 10px;
  gap: 5px;
}

.submit-btn {
  width: 100%;
  display: inline-block;
  padding: 10px 20px;
  text-align: center;
  font-size: 1.2em;
  background: var(--color-main);
  color: #fff;
  border-radius: 50px;
  cursor: pointer;
}

.submit-btn.disabled {
  position: relative;
  background: #333;
  cursor: crosshair;
}

.submit-btn.disabled::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 1em;
  padding: 3px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
  --_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: l4 1s infinite linear;
}

@keyframes l4 {
  to {
    transform: translateY(-50%) rotate(1turn);
  }
}
#footer {
  text-align: center;
  font-size: 0.9em;
  padding: 20px;
}

.detail, .detail-eng {
  display: inline-block;
  border: 1px solid var(--color-main);
  background: var(--color-main);
  color: #fff;
  font-weight: 500;
  font-size: 14px;
  margin-top: 10px;
  padding: 10px 20px;
  border-radius: 50px;
  cursor: pointer;
}

.confirm {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border: 1px solid #333;
  background: #333;
  color: #fff;
  font-weight: 500;
  font-size: 14px;
  margin-top: 10px;
  padding: 10px 20px;
  border-radius: 50px;
  cursor: pointer;
}

.confirm .small-font {
  font-size: 10px;
}

.confirmModal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
}

.confirmModal .modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 20px;
}

.confirmModal .modal-content .inner {
  position: relative;
  padding: 50px 20px 20px;
}

.confirmModal .close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  background: url("../images/close.svg") no-repeat center;
  background-size: 100%;
  cursor: pointer;
}

.confirmModal #login {
  width: 90%;
  max-width: 500px;
}

.confirmModal #login .inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.confirmModal .select-area {
  display: flex;
  border: 1px solid #ddd;
  border-radius: 50px;
  overflow: hidden;
}

.confirmModal .select-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  height: 40px;
  background: #fff;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: pointer;
}

.confirmModal .select-btn.active {
  background: var(--color-main);
  color: #fff;
}

.confirmModal .modal-title {
  text-align: center;
  font-size: 1.3em;
  font-weight: 500;
}

.confirmModal .modal-input-area {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.confirmModal input {
  padding: 10px;
  border: 1px solid #ddd;
  font-size: 1em;
  outline: none;
}

.confirmModal .btn-area {
  display: flex;
  justify-content: center;
}

.confirmModal .login-btn {
  display: inline-block;
  padding: 10px 40px;
  background: var(--color-main);
  color: #fff;
  border-radius: 30px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: pointer;
}

.confirmModal .login-btn.disabled {
  position: relative;
  background: #333;
  cursor: crosshair;
}

.confirmModal .login-btn.disabled::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 1em;
  padding: 3px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
  --_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: l4 1s infinite linear;
}

.confirmModal .modal-info-area {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 0.9em;
}

.detailModal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
}

.detailModal .modal-content {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border-radius: 20px;
  width: 90%;
  max-width: 600px;
  height: calc(100% - 20px);
}

.detailModal .modal-content .inner {
  position: relative;
  padding: 50px 20px 20px;
  height: 100%;
}

.detailModal .img {
  height: 100%;
  overflow-y: auto;
  padding-right: 10px;
}

.detailModal .img::-webkit-scrollbar {
  width: 5px;
}

/* 스크롤바 트랙 스타일 */
.detailModal .img::-webkit-scrollbar-track {
  background: #ddd;
  /* 트랙 배경색 */
}

/* 스크롤바 막대 스타일 */
.detailModal .img::-webkit-scrollbar-thumb {
  background: var(--color-main);
  /* 막대 배경색 */
  border-radius: 5px;
  /* 막대 둥글기 */
}

/* 호버 시 막대 스타일 */
.detailModal .img::-webkit-scrollbar-thumb:hover {
  background: var(--color-main);
  /* 호버 시 막대 배경색 */
}

.detailModal .close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  background: url("../images/close.svg") no-repeat center;
  background-size: 100%;
  cursor: pointer;
}

.cancelModal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
}

.cancelModal .modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 20px;
  width: 90%;
  max-width: 500px;
  max-height: 90%;
  overflow: auto;
}

.cancelModal.detail-view #cancel-list {
  display: none;
}

.cancelModal #cancel-detail {
  display: none;
}

.cancelModal.detail-view #cancel-detail {
  display: block;
}

.cancelModal .modal-content .inner {
  position: relative;
  padding: 50px 20px 20px;
}

.cancelModal .close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  background: url("../images/close.svg") no-repeat center;
  background-size: 100%;
  cursor: pointer;
}

.cancelModal .modal-title {
  text-align: center;
  font-size: 1.3em;
  font-weight: 500;
  margin-bottom: 30px;
}

.cancelModal .modal-list {
  display: flex;
  flex-direction: column;
  border: 1px solid #ddd;
  border-radius: 10px;
}

.cancelModal .item {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #ddd;
  padding: 10px 10px;
}

.cancelModal .item:last-child {
  border-bottom: 0;
}

.cancelModal .item:nth-child(2n) {
  background-color: #efefef;
}

#cancel-detail .modal-cancel-list {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  border-top: 1px solid var(--color-main);
  max-height: 300px;
  overflow: auto;
}

#cancel-detail .modal-cancel-list label {
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

.cancel-submit-btn {
  width: 100%;
  max-width: 200px;
  display: inline-block;
  padding: 10px 20px;
  text-align: center;
  background: #333;
  color: #fff;
  border-radius: 50px;
  margin-top: 20px;
  cursor: pointer;
}

.cancel-submit-btn.disabled {
  position: relative;
  background: #333;
  cursor: crosshair;
}

.cancel-submit-btn.disabled::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 1em;
  padding: 3px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
  --_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: l4 1s infinite linear;
}

.cancelModal .info {
  display: flex;
  flex-direction: column;
}

.cancelModal .info-row {
  display: flex;
  gap: 1em;
}

.cancelModal .info-category {
  font-weight: 600;
}

.cancelModal .btn-area {
  padding: 0;
}

.cancelModal .link-btn {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 5px;
  background: #01396D;
  color: #fff;
  cursor: pointer;
}

.cancelModal .cancel-btn {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 5px;
  background: #333;
  color: #fff;
  cursor: pointer;
}

.cancel-btn.disabled {
  position: relative;
  background: #333;
  cursor: crosshair;
}

.cancel-btn.disabled::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 1em;
  padding: 3px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
  --_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: l4 1s infinite linear;
}

.cancelModal .cancel-info {
  margin-top: 20px;
  text-align: center;
}

.hide {
  display: none;
}

.origin_font {
  font-size: 1em;
}

.origin_font .cancel-table {
  font-size: 1em;
}

.origin_font .cancel-info {
  font-size: 1em;
}

.color-pink {
  color: var(--color-pink);
}

.color-purple {
  color: var(--color-purple);
}