@charset "UTF-8";
@import url("../font/pretendard-subset.css");
@font-face {
  font-family: "Binggrae";
  src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/Binggrae.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
*,
*:before,
*:after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: "Pretendard";
}
button {
  color: inherit;
  -webkit-apperance: none;
  cursor: pointer;
  font-family: "Pretendard", sans-serif;
  font-weight: 600;
}

.flex {
  display: flex;
}
.flex.center {
  align-items: center;
  justify-content: center;
}
.flex.end {
  justify-content: flex-end;
}
.flex.between {
  justify-content: space-between;
  align-items: center;
}

.intro {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  height: 100%;
  background: linear-gradient(180deg, #d9d9d9 0px, #b3b3b3 110px, #999 111px, #e6e6e6 calc(100% - 75px), #f2f2f2 calc(100% - 75px), #ccc 100%);
}
.intro .light {
  position: absolute;
  top: 55px;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0.6;
}
.intro > div:not(.title) {
  text-align: center;
  padding: calc(110px + 2rem) 412px 0;
}
.intro > div:not(.title) > div {
  width: 640px;
  aspect-ratio: 3/2;
  background: white;
  border: 6px solid white;
  outline: 8px solid #808080;
  margin: 1.5rem auto;
}
.intro > div:not(.title) button {
  position: relative;
  font-size: 1.5rem;
  background: #A01857;
  border: none;
  border-radius: 9999px;
  color: white;
  padding: 0.75rem 1.5rem;
}
.intro .title {
  height: 80px;
  align-content: center;
}
.intro .title .center {
  gap: 1.5rem;
}

.menu-wrapper {
  position: absolute;
  z-index: 997;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0 432px;
  transform: translateY(-100%);
  transition: 0.4s transform;
}
.menu-wrapper.is-active {
  transform: translateY(0);
}
.menu-wrapper .menu {
  display: flex;
  justify-content: space-between;
  background: #A01857;
  border-radius: 0 0 1.75rem 1.75rem;
  padding: 1rem 2rem;
  gap: 1rem;
}
.menu-wrapper .menu > div {
  display: flex;
  flex-grow: 1;
  gap: 1rem;
}
.menu-wrapper .menu > div button {
  flex-grow: 1;
}
.menu-wrapper .menu button {
  background: white;
  border: none;
  border-radius: 9999px;
  font-size: 1.125rem;
  padding: 0.25rem 0;
}
.menu-wrapper .menu .close,
.menu-wrapper .menu .back {
  background: transparent;
  vertical-align: top;  
}
.menu-wrapper .menu .back .image-wrapper{  
  margin: 0;
  width: 100%;
}
.menu-wrapper .menu .back .image-wrapper > img{  
  width: 44px;    
}

.main {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #A01857;
  background-image: url("../images/bg_main.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 100%;
}
.main .grid {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  justify-content: space-between;
  padding: 1.5rem 412px;
}
.main .grid > div {
  width: 85%;
}
.main .grid > div:not(.title) {
  flex-grow: 1;
  display: flex;
}
.main .grid .end {
  margin-bottom: 1rem;
  padding: 0 24px;
}
.main .grid .end button {
  background: transparent;
  border: none;
}
.main .grid .items {
  display: flex;
  flex-wrap: wrap;
  row-gap: 2rem;
  width: 100%;  
}
.main .grid .items .item-wrapper {
  flex: 0 0 25%;
  padding: 0 24px;
}
.main .grid .items .item-wrapper .item {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  background: white;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
  border: 6px solid white;
  border-bottom: none;
}
.main .grid .items .item-wrapper .item img {
  width: 100%;
  aspect-ratio: 4/3;
}
.main .grid .items .item-wrapper .item div {
  display: flex;
  flex-grow: 1;
  justify-content: center;
  align-items: center;
  background: white;
  text-align: center;
  font-family: "Binggrae";
  font-size: 0.875rem;
  font-weight: 700;
  padding: 0.125rem 0;
}
.main .title {
  text-align: center;
}
.main .title .center {
  gap: 2rem;
}
.main .menu-wrapper {
  position: relative;
  transform: none;
}
.main .menu-wrapper .menu {
  border-radius: 1.25rem 1.25rem 0 0;
}

.fancybox__content {
  display: flex;
  max-width: 800px;
  height: 100%;
  padding: 0;
  background: #f5f5f7;
  letter-spacing: -.05rem;
  line-height: 1.8em;
}
.fancybox__content .title {
  padding: 0.5rem 0;
}
.fancybox__content .title span {
  font-size: 1rem;
}
.fancybox__content .title h2 {
  font-size: 1.5rem;
  margin: 0.25rem 0 0;
}
.fancybox__content .flex.end {
  padding: 0.5rem 1rem;
}
.fancybox__content .flex.between {
  padding: 0 1rem;
}
.fancybox__content .close {
  background: transparent;
  border: none;
  padding: 0;
}
.fancybox__content section img {
  width: 100%;
}
.fancybox__content .content {
  flex-grow: 1;
  overflow-y: scroll;
  display: flex;
  --scrollbar-color-track: #cdcdcd;
  --scrollbar-color-thumb: #A01857;
}

@supports (scrollbar-width: auto) {
  .fancybox__content .content {
    scrollbar-color: var(--scrollbar-color-thumb) var(--scrollbar-color-track);
    scrollbar-width: var(--scrollbar-width);
  }

  .warning {
    display: none;
  }
}

.fancybox__content .content p {
  flex: 0 0 65%;
  font-size: 1.125rem;
  padding: 1rem;
  margin: 0;
  word-break: keep-all;
}
.fancybox__content .content .bold {
  font-weight: 600;
  color: #A01857;
}

.fancybox__content .content .image-wrapper {
  flex: 0 0 35%;
  padding: 0.5rem;
  display: flex;
  align-items: flex-end;  
}
.fancybox__content .content .image-wrapper img {
  width: 100%;
}
.fancybox__content .buttons {
  gap: 1rem;
  padding: 1rem;
}
.fancybox__content .buttons button {
  color: white;
  font-weight: 600;
  font-size: 1.25rem;
  background: #A01857;
  border: none;
  padding: 0.5rem 1.5rem;
}
.fancybox__content .buttons button.point {
  background: #FF9500;
}

#dialog-event {
  height: auto;
  padding-bottom: 2rem;
}
#dialog-event .flex.between {
  gap: 2rem;
  padding: 0 2rem;
}
#dialog-event .flex.between.airpot h3, #dialog-event .flex.between.airpot h4 {
  color: #A01857;
}
#dialog-event .flex.between.coupon {
  padding: 2rem 4rem 2rem 2rem;
}
#dialog-event .flex.between.coupon h3, #dialog-event .flex.between.coupon h4 {
  color: #FF9500;
}
#dialog-event .flex.between > div {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#dialog-event .flex.between > div h3 {
  font-size: 1.625rem;
}
#dialog-event .flex.between > div h3, #dialog-event .flex.between > div h4 {
  margin-top: 0;
}
#dialog-event .flex.between > div strong,
#dialog-event .flex.between > div ul {
  font-size: 0.875rem;
  line-height: 1.5;
}
#dialog-event hr {
  border: none;
  width: 100%;
  height: 1px;
  background: #ddd;
}

.modal{
	z-index: 998;
	position: fixed; 
	justify-content: center;
	top:0;
	left:0;
	width:100%;
	height:100%;
	overflow: hidden;
	background-color: rgba(0,0,0,0.9);
	}
	.modal_body{
	z-index: 999;	
	margin: 8% 0 0;  
	background-color: rgb(255,255,255);
	border-radius:10px;  
  
	}
	/* 바디에 스크롤 막는 방법 */
	.not_scroll{
	position: fixed;
	overflow: hidden;
	width: 100%;
	height: 100%
	}
	.not_scroll .cont {
	position: relative;
	top: 0;
	}

#dialog-popup{    
  max-width: 1200px;
  height: auto;
  padding-bottom: 2rem;
}
#dialog-popup .flex.between.notice > img{
  width: 35%;    
}
#dialog-popup .flex.between {
  gap: 2rem;
  padding: 2rem 1rem 0 2rem;
}
#dialog-popup .title {
  padding: 2rem 1rem 0 2rem;
  gap: 2rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
#dialog-popup .flex.between.notice h3 {
  font-size: 1.25rem;
  color: #FF9500;
}
#dialog-popup .flex.between.notice h4 {
  font-weight: 500;
  line-height: 1.25;
  color: #333;
}
#dialog-popup .flex.between > div {
  word-break: keep-all;
  display: flex;
  flex-direction: column;
  align-items: left;  
}

#dialog-popup .flex.between > div h3, #dialog-popup .flex.between > div h4 {
  margin-top: 0;
}
#dialog-popup .flex.between > div strong,
#dialog-popup .flex.between > div ul {
  font-size: 1rem;  
  margin-top: 0.125rem;
  margin-bottom: 0.125rem;
}
#dialog-popup hr {
  border: none;
  width: 100%;
  height: 1px;
  background: #ddd;
}

#dialog-invite .content {
  padding: 2rem 0;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}
#dialog-invite img {
  max-width: 80%;
}

@keyframes slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-200%);
  }
}
.event .menu-wrapper {
  transform: none;
}
.event section {
  padding: 0 212px;
}
.event section > div {
  background: #F5F5F7;
  border-top: 10px solid #A01857;
  padding: 0 200px;
  margin-top: -2.5rem;
}
.event section > div .title {
  align-items: center;
  border-bottom: 1px solid #cdcdcd;
  font-size: 1.25rem;
}
.event section > div .title h3 {
  font-size: 2rem;
  color: #A01857;
}
.event section > div ul {
  padding: 0 0 0 1rem;
  line-height: 1.6;
}
.event section > div:last-of-type {
  flex-direction: column;
  gap: 1rem;
  border: none;
  padding: 2rem 0;
}
.event section > div:last-of-type button {
  background: #A01857;
  border: none;
  border-radius: 9999px;
  color: white;
  font-size: 1.25rem;
  font-weight: 700;
  padding: 0.75rem 1.5rem;
}
.event section .range {
  width: 100%;
  margin-top: 2rem;
}
.event .step {
  font-size: 1.25rem;
  margin: 5rem 0 2rem;
}
.event .select-form {
  display: flex;
  gap: 2rem;
}
.event .select-form input {
  display: none;
}
.event .select-form input + label {
  background: #D9D9D9;
  text-align: center;
  padding: 1rem 0;
  flex-grow: 1;
  cursor: pointer;
}
.event .select-form input:checked + label {
  background: #A01857;
  color: white;
}
.event .select-form.age {
  margin-top: 1rem;
  flex-wrap: wrap;
  row-gap: 1rem;
}
.event .select-form.age input + label {
  flex-basis: calc(25% - 2rem);
}
.event .grid .items {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 2rem;
}
.event .grid .items .item-wrapper {
  flex: 0 0 calc(25% - 2rem);
}
.event .grid .items .item-wrapper .item {
  width: 100%;
  height: 100%;  
}
.event .grid .items .item-wrapper .item input {
  display: none;
}
.event .grid .items .item-wrapper .item input:checked + label {
  background: #A01857;
  color: white;
}
.event .grid .items .item-wrapper .item input:checked + label strong:before, .event .grid .items .item-wrapper .item input:checked + label strong:after {
  color: white;
}
.event .grid .items .item-wrapper .item input:checked + label strong::before {
  content: "선택취소";
}
.event .grid .items .item-wrapper .item input:checked + label strong:after {
  content: "♥";
}
.event .grid .items .item-wrapper .item input + label {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: white;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.2);
  padding: 0.5rem;
  gap: 0.25rem;
  cursor: pointer;
}
.event .grid .items .item-wrapper .item input + label div {
  font-size: 0.875rem;
  font-weight: 500;
  text-align: center;
  flex-grow: 1;
  display: flex;
  align-items: center;
}
.event .grid .items .item-wrapper .item input + label img {
  width: 100%;
}
.event .grid .items .item-wrapper .item input + label strong:before, .event .grid .items .item-wrapper .item input + label strong:after {
  display: inline-block;
}
.event .grid .items .item-wrapper .item input + label strong:before {
  content: "선택하기";
}
.event .grid .items .item-wrapper .item input + label strong:after {
  content: "♡";
  display: inline-block;
  color: #A01857;
  margin-left: 0.25rem;
}
.event .form > label {
  display: flex;
  align-items: center;
  margin: 0 0 1rem;
}
.event .form > label strong {
  flex: 0 0 4rem;
}
.event .form > label .flex {
  gap: 0.5rem;
}
.event .form > label .flex input {
  flex: 1 1 30%;
  min-width: none;
  width: auto;
}
.event .form > div {
  margin-top: 2rem;
}
.event .form > div ul {
  background: #d9d9d9;
  padding: 2rem;
  margin-top: 0.5rem;
}
.event .form > div ul li {
  display: flex;
  align-items: start;
  padding: 0.25rem 0;
}
.event .form > div ul li strong {
  flex: 0 0 15rem;
}
.event input[type=text],
.event input[type=number] {
  border: 1px solid #bbb;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
}
.event.second .menu-wrapper .menu {
  background: #FF9500;
}
.event.second .event-bg {
  overflow-x: hidden;  
}
.film-container {
  object-fit: contain;    
}
.event.second .event-bg .frames {
  position: relative;
  object-fit: contain;  
  z-index: 2;
  height: 18rem;
  animation: slide 60s linear infinite;
  margin: 2rem calc((412px + 4rem) * -1) 0;
  padding: 0 0 12rem;
  gap: 0;
  padding: 0;
}
.event.second .event-bg .frames .frame {
  position: relative;
  flex: 0 0 auto;
  aspect-ratio: 4/3.529;
  background-size: contain;
  background-repeat: no-repeat;
  padding: 1.125rem 0rem 1.5rem 0rem;
}
.event.second .event-bg .frames .frame:after {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  content: "";
  display: inline-block;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg width='340' height='300' viewBox='0 0 340 300' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M332 7H338C339.1 7 340 7.9 340 9V0H0V300H340V291C340 292.1 339.1 293 338 293H332C330.9 293 330 292.1 330 291V279C330 277.9 330.9 277 332 277H338C339.1 277 340 277.9 340 279V21C340 22.1 339.1 23 338 23H332C330.9 23 330 22.1 330 21V9C330 7.9 330.9 7 332 7ZM310 9C310 7.9 310.9 7 312 7H318C319.1 7 320 7.9 320 9V21C320 22.1 319.1 23 318 23H312C310.9 23 310 22.1 310 21V9ZM290 9C290 7.9 290.9 7 292 7H298C299.1 7 300 7.9 300 9V21C300 22.1 299.1 23 298 23H292C290.9 23 290 22.1 290 21V9ZM270 9C270 7.9 270.9 7 272 7H278C279.1 7 280 7.9 280 9V21C280 22.1 279.1 23 278 23H272C270.9 23 270 22.1 270 21V9ZM250 9C250 7.9 250.9 7 252 7H258C259.1 7 260 7.9 260 9V21C260 22.1 259.1 23 258 23H252C250.9 23 250 22.1 250 21V9ZM230 9C230 7.9 230.9 7 232 7H238C239.1 7 240 7.9 240 9V21C240 22.1 239.1 23 238 23H232C230.9 23 230 22.1 230 21V9ZM210 9C210 7.9 210.9 7 212 7H218C219.1 7 220 7.9 220 9V21C220 22.1 219.1 23 218 23H212C210.9 23 210 22.1 210 21V9ZM190 9C190 7.9 190.9 7 192 7H198C199.1 7 200 7.9 200 9V21C200 22.1 199.1 23 198 23H192C190.9 23 190 22.1 190 21V9ZM170 9C170 7.9 170.9 7 172 7H178C179.1 7 180 7.9 180 9V21C180 22.1 179.1 23 178 23H172C170.9 23 170 22.1 170 21V9ZM150 9C150 7.9 150.9 7 152 7H158C159.1 7 160 7.9 160 9V21C160 22.1 159.1 23 158 23H152C150.9 23 150 22.1 150 21V9ZM130 9C130 7.9 130.9 7 132 7H138C139.1 7 140 7.9 140 9V21C140 22.1 139.1 23 138 23H132C130.9 23 130 22.1 130 21V9ZM110 9C110 7.9 110.9 7 112 7H118C119.1 7 120 7.9 120 9V21C120 22.1 119.1 23 118 23H112C110.9 23 110 22.1 110 21V9ZM90 9C90 7.9 90.9 7 92 7H98C99.1 7 100 7.9 100 9V21C100 22.1 99.1 23 98 23H92C90.9 23 90 22.1 90 21V9ZM70 9C70 7.9 70.9 7 72 7H78C79.1 7 80 7.9 80 9V21C80 22.1 79.1 23 78 23H72C70.9 23 70 22.1 70 21V9ZM50 9C50 7.9 50.9 7 52 7H58C59.1 7 60 7.9 60 9V21C60 22.1 59.1 23 58 23H52C50.9 23 50 22.1 50 21V9ZM30 9C30 7.9 30.9 7 32 7H38C39.1 7 40 7.9 40 9V21C40 22.1 39.1 23 38 23H32C30.9 23 30 22.1 30 21V9ZM10 9C10 7.9 10.9 7 12 7H18C19.1 7 20 7.9 20 9V21C20 22.1 19.1 23 18 23H12C10.9 23 10 22.1 10 21V9ZM20 291C20 292.1 19.1 293 18 293H12C10.9 293 10 292.1 10 291V279C10 277.9 10.9 277 12 277H18C19.1 277 20 277.9 20 279V291ZM40 291C40 292.1 39.1 293 38 293H32C30.9 293 30 292.1 30 291V279C30 277.9 30.9 277 32 277H38C39.1 277 40 277.9 40 279V291ZM60 291C60 292.1 59.1 293 58 293H52C50.9 293 50 292.1 50 291V279C50 277.9 50.9 277 52 277H58C59.1 277 60 277.9 60 279V291ZM80 291C80 292.1 79.1 293 78 293H72C70.9 293 70 292.1 70 291V279C70 277.9 70.9 277 72 277H78C79.1 277 80 277.9 80 279V291ZM100 291C100 292.1 99.1 293 98 293H92C90.9 293 90 292.1 90 291V279C90 277.9 90.9 277 92 277H98C99.1 277 100 277.9 100 279V291ZM120 291C120 292.1 119.1 293 118 293H112C110.9 293 110 292.1 110 291V279C110 277.9 110.9 277 112 277H118C119.1 277 120 277.9 120 279V291ZM140 291C140 292.1 139.1 293 138 293H132C130.9 293 130 292.1 130 291V279C130 277.9 130.9 277 132 277H138C139.1 277 140 277.9 140 279V291ZM160 291C160 292.1 159.1 293 158 293H152C150.9 293 150 292.1 150 291V279C150 277.9 150.9 277 152 277H158C159.1 277 160 277.9 160 279V291ZM180 291C180 292.1 179.1 293 178 293H172C170.9 293 170 292.1 170 291V279C170 277.9 170.9 277 172 277H178C179.1 277 180 277.9 180 279V291ZM200 291C200 292.1 199.1 293 198 293H192C190.9 293 190 292.1 190 291V279C190 277.9 190.9 277 192 277H198C199.1 277 200 277.9 200 279V291ZM220 291C220 292.1 219.1 293 218 293H212C210.9 293 210 292.1 210 291V279C210 277.9 210.9 277 212 277H218C219.1 277 220 277.9 220 279V291ZM240 291C240 292.1 239.1 293 238 293H232C230.9 293 230 292.1 230 291V279C230 277.9 230.9 277 232 277H238C239.1 277 240 277.9 240 279V291ZM260 291C260 292.1 259.1 293 258 293H252C250.9 293 250 292.1 250 291V279C250 277.9 250.9 277 252 277H258C259.1 277 260 277.9 260 279V291ZM280 291C280 292.1 279.1 293 278 293H272C270.9 293 270 292.1 270 291V279C270 277.9 270.9 277 272 277H278C279.1 277 280 277.9 280 279V291ZM300 291C300 292.1 299.1 293 298 293H292C290.9 293 290 292.1 290 291V279C290 277.9 290.9 277 292 277H298C299.1 277 300 277.9 300 279V291ZM320 291C320 292.1 319.1 293 318 293H312C310.9 293 310 292.1 310 291V279C310 277.9 310.9 277 312 277H318C319.1 277 320 277.9 320 279V291ZM330 270H10V30H330V270Z' fill='black'/%3E%3C/svg%3E%0A");
  background-size: contain;
}
.event.second .event-bg .frames .frame .image-wrapper {
  position: relative;
  z-index: 1;
  background-color: white;
  background-size: cover;
  background-position: center;
}
.event.second section > div {
  border-top-color: #FF9500;
}
.event.second section > div .title h3 {
  color: #FF9500;
}
.event.second section > div:last-of-type button {
  background: #FF9500;
}

.event-bg {
  background-color: #EDEDED;
  background-image: url("../images/bg_event_bottom.svg");
  background-position: left bottom;
  background-size: 100%;
  background-repeat: no-repeat;
}
.event-bg > div {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0 412px 5rem;
}
.event-bg > div > img {
  position: relative;
  left: -200px;
  width: 200px;
  height: -moz-fit-content;
  height: fit-content;
  box-shadow: -2rem 0 4px rgba(0, 0, 0, 0.125);
}
.event-bg > div > img:last-of-type {
  left: initial;
  right: -200px;
}
.event-bg > div .content {
  width: 100%;
  text-align: center;
  padding: 7rem 4rem 0;
  margin-left: -200px;
  margin-right: -200px;
}
.event-bg > div .content img {
  width: 100%;
}
.event-bg > div .content .frames {
  display: flex;
  align-items: stretch;
  gap: 1rem;
  padding: 2rem 0;
}
.event-bg > div .content .frames > div {
  display: flex;
  flex-direction: column;
  flex: 0 0 calc(33.3% - 0.625rem);
}
.event-bg > div .content .frames > div .frame {
  aspect-ratio: 9/7;
  background: url("../images/img_frame.svg") no-repeat center/contain;
  background-color: #333;
}
.event-bg > div .content .frames > div div:first-of-type {
  flex-grow: 0;
  padding-bottom: 0.5rem;
}
.event-bg > div .content .frames > div div:last-of-type {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 0.25rem;
  padding: 0.5rem 0;
  margin-top: 0.25rem;
}

.event [type="checkbox"] {
  width: 1rem;
  height: 1rem;
  accent-color: #A01857;
}
.event.second [type="checkbox"] {
  width: 1rem;
  height: 1rem;
  accent-color: #FF9500;
}

footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #E0E0E0;
  padding: 2rem 212px;
}
footer > div {
  display: flex;
}
footer > div ul {
  border-left: 1px solid #bbb;
  list-style: none;
  font-size: 0.875rem;
  color: #808080;
  margin: 0 0 0 1.5rem;
  padding: 0 0 0 1.5rem;
}
footer .flex {
  gap: 1rem;
}

@media (max-width: 1780px) {
  .main .grid {
    padding: 1.5rem 400px;
  }
  .main .grid .items {
    flex-wrap: wrap;
    row-gap: 2rem;
  }
  .main .grid > div {
    width: 90%;
  }
}
@media (max-width: 1600px) {
  .main .grid {
    padding: 2rem 300px;
  }
  .event section > div {
    padding: 0 2rem;
  }
  .main .grid > div {
    width: 90%;
  }
}
@media (max-width: 1440px) {
  .intro > div:not(.title) {
    padding: calc(110px + 2rem) 100px 0;
  }
  .main .grid {
    padding: 2rem 240px;
  }
  .main .grid .items {
    flex-wrap: wrap;
    row-gap: 2rem;
  }
  .main .grid > div {
    width: 100%;
  }
  .menu-wrapper {
    padding: 0;
  }
  .event-bg > div {
    padding: 4rem 1rem 0;
  }
  .event-bg > div > img {
    display: none;
  }
  .event-bg > div .content {
    margin: 0;
    padding: 5rem 0 0;
  }
  .event section {
    padding: 0 100px;
  }
  .event section > div {
    margin-top: 2rem;
  }
  .event.second .event-bg .frames {
    height: 12rem;
    margin: 2rem -1rem 0;
  }
  .event.second .event-bg .frames .frame {
    padding: 0.875rem 0rem 1rem 0rem;
  }
}
@media (max-width: 1280px) {
  .event section {
    font-size: 1rem;
  }
  .event section > div .title {
    font-size: 1.125rem;
  }
  .menu-wrapper {
    padding: 0;
  }
}
@media (max-width: 1024px) {
  .event section {
    font-size: 1rem;
  }
  .event section > div .title {
    font-size: 1.125rem;
  }
  .main .grid > div {
    width: 90%;
  }
  .main .grid {
    padding: 2rem 10px;
  }
  .main .grid .items {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    row-gap: 2rem;
  }
  .main .grid .items .item-wrapper {
    flex: 0 0 25%;
    padding: 0 2rem;
  }
  .main .grid .items .item-wrapper .item {
    border-width: 4px;
  }
  .main .grid .items .item-wrapper .item div {
    font-size: 1rem;
    padding: 0.25rem 0;
  }
}
@media (max-width: 768px) {
  .intro .light {
    width: 100%;
  }
  .intro > div:not(.title) {
    padding: 8rem 2rem 0;
  }
  .intro > div:not(.title) img {
    width: 100%;
  }
  .intro > div:not(.title) > div {
    width: 100%;
  }
  .main {
    width: 100%;
    background-size: cover;
  }
  .main .grid {
    justify-content: center;
    padding: 0.5rem;
  }
  .main .grid > div {
    width: 100%;
  }
  .main .grid > div:not(.title) {
    flex-grow: 0;
    align-items: flex-start;
  }
  .main .grid .end {
    padding: 1rem 0;
  }
  .main .grid .items {
    row-gap: 0.725rem;
  }
  .main .grid .items .item-wrapper {
    flex: 0 0 33.3%;
    padding: 0 0.5rem;
  }
  .main .grid .items .item-wrapper .item {
    border-width: 4px;
  }
  .main .grid .items .item-wrapper .item div {
    letter-spacing:-.0725rem;
    font-size: 0.625rem;
    padding: 0.25rem 0;
  }
  .main .grid .title {
    margin: 0;
  }
  .main .grid .title > img {
    width: 80%;
  }
  .main .grid .title .flex {
    padding: 0.5rem 0;
    gap: 1.5rem;
  }
  .main .grid .title .flex img {
    height: 1.25rem;
  }
  .menu-wrapper {
    position: relative;
    padding: 0;
  }
  .menu-wrapper .menu {
    border-radius: 0;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
  }
  .menu-wrapper .menu > div {
    gap: 0.5rem;
  }
  .menu-wrapper .menu button {
    font-size: 0.875rem;
    word-break: keep-all;
    padding: 0.5rem 1rem;
  }
  .menu-wrapper .menu .back,
  .menu-wrapper .menu .close {
    padding: 0.5rem;
  }
  .menu-wrapper .menu .back svg,
  .menu-wrapper .menu .close svg {
    width: 1.25rem;
    height: 1.25rem;
  }
  .event-bg {
    background: white;
  }
  .event-bg > div {
    padding: 4rem 1rem 0;
  }
  .event-bg > div > img {
    display: none;
  }
  .event-bg > div .content {
    margin: 0;
    padding: 0;
  }
  .event section {
    padding: 0;
  }
  .event section > div {
    padding: 0 2rem;
    margin-top: 0;
  }
  .event section > div .title {
    flex-direction: column;
    align-items: center;
    font-size: 0.875rem;
    padding-bottom: 2rem;
  }
  .event section > div .title > div {
    width: 100%;
  }
  .event section > div .title h3 {
    font-size: 1.25rem;
    word-break: keep-all;
  }
  .event section > div .step {
    font-size: 1rem;
    margin: 2.5rem 0 0.875rem;
  }
  .event section > div .select-form {
    gap: 0.875rem;
  }
  .event section > div .select-form label {
    font-size: 0.875rem;
  }
  .event section > div .select-form.age input + label {
    flex-basis: calc(25% - 0.875rem);
  }
  .event section > div .grid .items {
    gap: 0.875rem;
  }
  .event section > div .grid .items .item-wrapper {
    flex: 1 0 calc(50% - 0.875rem);
  }
  .event .form > div ul {
    padding: 1rem 2rem;
  }
  .event .form > div ul li {
    flex-direction: column;
  }
  .event .form > div ul li strong {
    flex: 0 0 auto;
  }
  .event .form label input {
    flex: 1 1 auto;
  }
  .event .form label .flex {
    flex-grow: 1;
  }
  .event .form label .flex input {
    flex: 1 0 auto;
    width: 30%;
  }
  .event.second .event-bg .frames {
    height: 8rem;
  }
  .event.second .event-bg .frames .frame {
    padding: 0.5rem 0rem 0.875rem 0rem;
  }
  .event.second .event-bg .frames .frame .image-wrapper {
    margin: 0.125rem 0rem -0.125rem;
  }
  footer {
    display: none;
    padding: 1rem 2rem;
  }
  footer > div {
    flex-direction: column;
    align-items: start;
    gap: 1rem;
  }
  footer > div .logo {
    height: 2.5rem;
  }
  footer > div ul {
    margin: 0;
    padding: 0;
    font-size: 0.75rem;
    border: none;
  }
  footer .flex {
    align-items: end;
    justify-content: space-between;
  }
  .fancybox__content {
    width: 100%;
  }
  .fancybox__content .content {
    flex-direction: column;
  }
  .fancybox__content .content p {
    font-size: 0.875rem;
  }
  .fancybox__content .buttons {
    gap: 0.5rem;
  }
  .fancybox__content .buttons button {
    font-size: 0.875rem;
  }
  #dialog-event .flex.between {
    flex-direction: column;
  }
  #dialog-event .flex.between.coupon {
    padding-right: 2rem;
  }

  #dialog-popup {
    padding: 0 0 0 0;
    height: 100%;
  }
  #dialog-popup .title > div img{
    height: 2.875rem;
  }  
  #dialog-popup .flex.between{
    gap: 2rem;
    padding: 1rem 1rem 0 1rem;    
    flex-direction: column;
  }
  #dialog-popup .flex.between.notice {    
    gap: 0.25rem;
  }
  #dialog-popup .flex.between.notice > img{
    width: 60%;    
  }
  #dialog-popup .flex.between > div ul {
    font-size: 0.875rem;        
    -webkit-padding-start: 0.25rem;
    margin-top: 0.125rem;
    margin-bottom: 0.125rem;
  }
  #dialog-popup .flex.between.notice h3 {
    font-size: 1rem;    
  }
  #dialog-popup .flex.center {
    margin-top: 1rem;    
  }
  #dialog-popup .title {
    padding: 1rem 1rem 0 1rem;  
  }
  #dialog-popup .flex.between.notice {
    padding: 1rem;  
  }
  .modal_body{
    height: 100%;
    padding: 0.125rem;
    margin: 0;    
    border-radius:0px;    
  }
  .menu-wrapper .menu .back .image-wrapper > img{  
    width: 30px;    
  }

}
/*# sourceMappingURL=style.css.map */