/* reset */
html,
body,
div,
p,
img,
span,
a,
em,
strong,
pre,
h1,
h2,
h3,
h4,
h4,
h5,
h6,
ul,
ol,
li,
dl,
dt,
dd,
table,
tbody,
thead,
tfoot,
tr,
th,
td,
form,
fieldset,
legend,
caption,
input,
textarea,
button,
select,
video,
iframe,
header,
article,
aside,
details,
figcaption,
figure,
footer,
hgroup,
menu,
nav,
section {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

main,
header,
article,
aside,
details,
figcaption,
figure,
footer,
hgroup,
menu,
nav,
section {
  display: block;
}

html {
  font-size: 16px;
  font-family: "Noto Sans KR", sans-serif;
  -webkit-text-size-adjust: none;
  scroll-behavior: smooth;
}

body {
  color: #1c1c1c;
  line-height: 1;
  font-weight: 400;
  word-break: break-all;
  letter-spacing: -0.5px;
}

input,
textarea,
button,
select {
  font-size: inherit;
  color: inherit;
  font-family: inherit;
}
input:focus,
textarea:focus,
button:focus,
select:focus {
  outline: none;
}

select {
  border: 0;
}

input::-ms-clear,
input::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
}

input::-webkit-search-decoration,
input::-webkit-search-cancel-button,
input::-webkit-search-results-button,
input::-webkit-search-results-decoration {
  display: none;
}

textarea {
  border: none;
  resize: none;
}

img,
fieldset,
button {
  border: 0;
  background: none;
}

img {
  max-width: 100%;
}

label {
  cursor: pointer;
}

input {
  border-radius: 0;
}

input[type=text],
input[type=tel] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

input,
button,
textarea {
  border: 0 none;
  outline: 0;
}

button {
  cursor: pointer;
}

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

ul,
ol {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

a,
img {
  vertical-align: top;
}

em {
  font-style: normal;
}

.blind,
caption {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
  font-size: 0;
  line-height: 0;
}

.hidden {
  visibility: hidden;
}

.gnbWrapper {
  min-width: 1280px !important;
}

h1.logo {
  position: absolute;
  top: 34px;
  left: 50px;
  z-index: 10;
}
h1.logo a {
  display: block;
  width: 240px;
  height: 33px;
  background: url(../images/logo.png) 0 0/100% auto no-repeat;
  text-indent: -9999px;
}
h1.logo a img {
  display: block;
}

.lnb_open h1.logo {
  display: none !important;
}

footer {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 146px;
  background: #000 url(../images/footer.png) 50% 50% no-repeat;
}
footer p {
  text-indent: -9999px;
}

#wrap {
  position: relative;
  margin: 0 auto;
  min-width: 1280px;
  max-width: 2560px;
  overflow: hidden;
}

section {
  position: relative;
}
section .bg,
section .overlay {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
}
section .obj {
  position: absolute;
  display: block;
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
}
section .inner {
  margin: 0 auto;
  max-width: 1280px;
}

.scroll_lock {
  width: 100%;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

#quick {
  position: fixed;
  top: 50%;
  right: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 136px;
  margin-top: -250px;
  z-index: 99;
}
#quick button {
  position: relative;
  width: 136px;
  height: 83px;
  background: url("../images/quick.png") no-repeat;
  background-position-x: 0;
}
#quick button:nth-of-type(1) {
  background-position-y: 0px;
}
#quick button:nth-of-type(2) {
  background-position-y: -83px;
}
#quick button:nth-of-type(3) {
  background-position-y: -166px;
}
#quick button:nth-of-type(4) {
  background-position-y: -249px;
}
#quick button:nth-of-type(5) {
  background-position-y: -332px;
}
#quick button:nth-of-type(6) {
  background-position-y: -415px;
}
#quick button:last-child {
  height: 50px;
  background-position-y: -498px;
}
#quick button:hover, #quick button.active {
  background-position-x: -136px;
  border-bottom: 1px solid #863232;
}

:root {
  --youtube-close-color: #bf2819;
}

.popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  overflow: auto;
}

.popup-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  height: 100%;
}

.popup-body {
  position: relative;
}

.popup-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 80px;
  z-index: 1000;
}

.popup-image {
  cursor: pointer;
}

.popup-inline {
  display: none;
}

.popup-youtube .popup-body {
  max-width: 1440px;
  width: calc(100% - 130px);
  width: -webkit-calc(100% - 130px);
}

.popup-youtube .popup-body:before {
  content: "";
  display: block;
  padding-bottom: 56.25%;
}

.popup-youtube iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.popup-youtube .close {
  position: absolute;
  top: 0;
  right: -62px;
  width: 60px;
  height: 60px;
  border: 1px solid var(--youtube-close-color);
}

.popup-youtube .close:before,
.popup-youtube .close:after {
  position: absolute;
  top: 7px;
  left: 29px;
  content: "";
  height: 45px;
  width: 1px;
  background-color: var(--youtube-close-color);
}

.popup-youtube .close:before {
  transform: rotate(45deg);
}

.popup-youtube .close:after {
  transform: rotate(-45deg);
}

.popup-youtube .close:hover {
  background-color: var(--youtube-close-color);
}

.popup-youtube .close:hover:before,
.popup-youtube .close:hover:after {
  background-color: white;
}

#visual {
  position: relative;
  width: 2560px;
  height: 1300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: url("../images/visual/bg_visual.jpg") 50% #0f1110 no-repeat;
  background-size: auto 100%;
}
#visual .container {
  position: relative;
  z-index: 5;
  width: 1280px;
  height: 1300px;
  text-align: center;
}
#visual .container .title {
  margin-top: 137px;
}
#visual .container .summary {
  margin-top: -105px;
}
#visual .deco {
  position: relative;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}
#visual .deco .stones {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  display: flex;
  width: 100%;
  height: 100%;
}
#visual .deco .stones > div {
  width: 50%;
}
#visual .deco .stones > div span {
  display: block;
  position: absolute;
}
#visual .deco .stones .left .stone_left1 {
  left: 220px;
  top: 125px;
}
#visual .deco .stones .left .stone_left1 picture {
  animation: stone_left1_bounce 5000ms ease-out infinite;
  -webkit-animation: stone_left1_bounce 5000ms ease-out infinite;
}
@keyframes stone_left1_bounce {
  0% {
    transform: translateY(-20px);
    -webkit-transform: translateY(-20px);
  }
  50% {
    transform: translateY(0);
    -webkit-transform: translateY(0);
  }
  100% {
    transform: translateY(-20px);
    -webkit-transform: translateY(-20px);
  }
}
#visual .deco .stones .left .stone_left2 {
  left: 160px;
  top: 270px;
}
#visual .deco .stones .left .stone_left2 picture {
  animation: stone_left2_bounce 2000ms ease-out infinite;
  -webkit-animation: stone_left2_bounce 2000ms ease-out infinite;
}
@keyframes stone_left2_bounce {
  0% {
    transform: translateY(10px);
    -webkit-transform: translateY(10px);
  }
  50% {
    transform: translateY(0);
    -webkit-transform: translateY(0);
  }
  100% {
    transform: translateY(10px);
    -webkit-transform: translateY(10px);
  }
}
#visual .deco .stones .left .stone_left3 {
  left: 345px;
  top: 380px;
}
#visual .deco .stones .left .stone_left3 picture {
  animation: stone_left3_bounce 1000ms ease-out infinite;
  -webkit-animation: stone_left3_bounce 1000ms ease-out infinite;
}
@keyframes stone_left3_bounce {
  0% {
    transform: translateY(5px);
    -webkit-transform: translateY(5px);
  }
  50% {
    transform: translateY(0);
    -webkit-transform: translateY(0);
  }
  100% {
    transform: translateY(5px);
    -webkit-transform: translateY(5px);
  }
}
#visual .deco .stones .left .stone_left4 {
  left: 168px;
  top: 560px;
}
#visual .deco .stones .left .stone_left4 picture {
  animation: stone_left4_bounce 2500ms ease-out infinite;
  -webkit-animation: stone_left4_bounce 2500ms ease-out infinite;
}
@keyframes stone_left4_bounce {
  0% {
    transform: translateY(15px);
    -webkit-transform: translateY(15px);
  }
  50% {
    transform: translateY(0);
    -webkit-transform: translateY(0);
  }
  100% {
    transform: translateY(15px);
    -webkit-transform: translateY(15px);
  }
}
#visual .deco .stones .left .stone_left5 {
  left: 280px;
  top: 725px;
}
#visual .deco .stones .left .stone_left5 picture {
  animation: stone_left5_bounce 2000ms ease-out infinite;
  -webkit-animation: stone_left5_bounce 2000ms ease-out infinite;
}
@keyframes stone_left5_bounce {
  0% {
    transform: translateY(-10px);
    -webkit-transform: translateY(-10px);
  }
  50% {
    transform: translateY(0);
    -webkit-transform: translateY(0);
  }
  100% {
    transform: translateY(-10px);
    -webkit-transform: translateY(-10px);
  }
}
#visual .deco .stones .left .stone_left6 {
  left: 370px;
  top: 925px;
}
#visual .deco .stones .left .stone_left6 picture {
  animation: stone_left6_bounce 3000ms ease-out infinite;
  -webkit-animation: stone_left6_bounce 3000ms ease-out infinite;
}
@keyframes stone_left6_bounce {
  0% {
    transform: translateY(-10px);
    -webkit-transform: translateY(-10px);
  }
  50% {
    transform: translateY(0);
    -webkit-transform: translateY(0);
  }
  100% {
    transform: translateY(-10px);
    -webkit-transform: translateY(-10px);
  }
}
#visual .deco .stones .left .stone_left7 {
  left: 0;
  top: 840px;
}
#visual .deco .stones .left .stone_left7 picture {
  animation: stone_left7_bounce 3500ms ease-out infinite;
  -webkit-animation: stone_left7_bounce 3500ms ease-out infinite;
}
@keyframes stone_left7_bounce {
  0% {
    transform: translateY(10px);
    -webkit-transform: translateY(10px);
  }
  50% {
    transform: translateY(0);
    -webkit-transform: translateY(0);
  }
  100% {
    transform: translateY(10px);
    -webkit-transform: translateY(10px);
  }
}
#visual .deco .stones .right .stone_right1 {
  right: 320px;
  top: 70px;
}
#visual .deco .stones .right .stone_right1 picture {
  animation: stone_right1_bounce 1000ms ease-out infinite;
  -webkit-animation: stone_right1_bounce 1000ms ease-out infinite;
}
@keyframes stone_right1_bounce {
  0% {
    transform: translateY(-5px);
    -webkit-transform: translateY(-5px);
  }
  50% {
    transform: translateY(0);
    -webkit-transform: translateY(0);
  }
  100% {
    transform: translateY(-5px);
    -webkit-transform: translateY(-5px);
  }
}
#visual .deco .stones .right .stone_right2 {
  right: 330px;
  top: 220px;
}
#visual .deco .stones .right .stone_right2 picture {
  animation: stone_right2_bounce 3000ms ease-out infinite;
  -webkit-animation: stone_right2_bounce 3000ms ease-out infinite;
}
@keyframes stone_right2_bounce {
  0% {
    transform: translateY(8px);
    -webkit-transform: translateY(8px);
  }
  50% {
    transform: translateY(0);
    -webkit-transform: translateY(0);
  }
  100% {
    transform: translateY(8px);
    -webkit-transform: translateY(8px);
  }
}
#visual .deco .stones .right .stone_right3 {
  right: 200px;
  top: 335px;
}
#visual .deco .stones .right .stone_right3 picture {
  animation: stone_right3_bounce 5000ms ease-out infinite;
  -webkit-animation: stone_right3_bounce 5000ms ease-out infinite;
}
@keyframes stone_right3_bounce {
  0% {
    transform: translateY(-20px);
    -webkit-transform: translateY(-20px);
  }
  50% {
    transform: translateY(0);
    -webkit-transform: translateY(0);
  }
  100% {
    transform: translateY(-20px);
    -webkit-transform: translateY(-20px);
  }
}
#visual .deco .stones .right .stone_right4 {
  right: 120px;
  top: 480px;
}
#visual .deco .stones .right .stone_right4 picture {
  animation: stone_right4_bounce 3500ms ease-out infinite;
  -webkit-animation: stone_right4_bounce 3500ms ease-out infinite;
}
@keyframes stone_right4_bounce {
  0% {
    transform: translateY(10px);
    -webkit-transform: translateY(10px);
  }
  50% {
    transform: translateY(0);
    -webkit-transform: translateY(0);
  }
  100% {
    transform: translateY(10px);
    -webkit-transform: translateY(10px);
  }
}
#visual .deco .stones .right .stone_right5 {
  right: 455px;
  top: 575px;
}
#visual .deco .stones .right .stone_right5 picture {
  animation: stone_right5_bounce 2000ms ease-out infinite;
  -webkit-animation: stone_right5_bounce 2000ms ease-out infinite;
}
@keyframes stone_right5_bounce {
  0% {
    transform: translateY(-10px);
    -webkit-transform: translateY(-10px);
  }
  50% {
    transform: translateY(0);
    -webkit-transform: translateY(0);
  }
  100% {
    transform: translateY(-10px);
    -webkit-transform: translateY(-10px);
  }
}
#visual .deco .stones .right .stone_right6 {
  right: 470px;
  top: 870px;
}
#visual .deco .stones .right .stone_right6 picture {
  animation: stone_right6_bounce 1000ms ease-out infinite;
  -webkit-animation: stone_right6_bounce 1000ms ease-out infinite;
}
@keyframes stone_right6_bounce {
  0% {
    transform: translateY(5px);
    -webkit-transform: translateY(5px);
  }
  50% {
    transform: translateY(0);
    -webkit-transform: translateY(0);
  }
  100% {
    transform: translateY(5px);
    -webkit-transform: translateY(5px);
  }
}
#visual .deco .stones .right .stone_right7 {
  right: 355px;
  top: 940px;
}
#visual .deco .stones .right .stone_right7 picture {
  animation: stone_right7_bounce 2000ms ease-out infinite;
  -webkit-animation: stone_right7_bounce 2000ms ease-out infinite;
}
@keyframes stone_right7_bounce {
  0% {
    transform: translateY(12px);
    -webkit-transform: translateY(12px);
  }
  50% {
    transform: translateY(0);
    -webkit-transform: translateY(0);
  }
  100% {
    transform: translateY(12px);
    -webkit-transform: translateY(12px);
  }
}
#visual .deco .stones .right .stone_right8 {
  right: 0px;
  top: 785px;
}
#visual .deco .stones .right .stone_right8 picture {
  animation: stone_right8_bounce 2500ms ease-out infinite;
  -webkit-animation: stone_right8_bounce 2500ms ease-out infinite;
}
@keyframes stone_right8_bounce {
  0% {
    transform: translateY(15px);
    -webkit-transform: translateY(15px);
  }
  50% {
    transform: translateY(0);
    -webkit-transform: translateY(0);
  }
  100% {
    transform: translateY(15px);
    -webkit-transform: translateY(15px);
  }
}
#visual .deco .chains {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  display: flex;
  width: 100%;
  height: 100%;
}
#visual .deco .chains > div {
  width: 50%;
}
#visual .deco .chains > div span {
  display: block;
  position: absolute;
}
#visual .deco .chains .left .chain_left1 {
  left: 15px;
  top: -65px;
}
#visual .deco .chains .left .chain_left1 picture {
  animation: chain_left1_leftSpin 3500ms ease-out infinite;
  -webkit-animation: chain_left1_leftSpin 3500ms ease-out infinite;
}
@keyframes chain_left1_leftSpin {
  0% {
    transform: rotate(0deg);
    transform-origin: 50% 50%;
  }
  50% {
    transform: rotate(-1deg);
    transform-origin: 50% 50%;
  }
  100% {
    transform: rotate(0deg);
    transform-origin: 50% 50%;
  }
}
#visual .deco .chains .left .chain_left2 {
  left: 105px;
  top: -120px;
  transform: rotate(58deg);
  transform-origin: 0% 0%;
  z-index: 1;
}
#visual .deco .chains .left .chain_left2 picture {
  transform-origin: 50% 100%;
  animation: chain_left2_stretch 5000ms linear infinite alternate;
  -webkit-animation: chain_left2_stretch 5000ms linear infinite alternate;
}
@keyframes chain_left2_stretch {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.02, 1);
  }
  100% {
    transform: scale(1, 1);
  }
}
#visual .deco .chains .left .chain_left3 {
  left: 435px;
  top: -72px;
  transform: rotate(85deg);
  transform-origin: 0% 0%;
}
#visual .deco .chains .left .chain_left3 picture {
  transform-origin: 50% 100%;
  animation: chain_left2_stretch 7000ms linear infinite alternate;
  -webkit-animation: chain_left2_stretch 7000ms linear infinite alternate;
}
@keyframes chain_left2_stretch {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.95, 1);
  }
  100% {
    transform: scale(1, 1);
  }
}
#visual .deco .chains .right .chain_right1 {
  right: 0;
  top: -65px;
}
#visual .deco .chains .right .chain_right1 picture {
  transform-origin: 50% 100%;
  animation: chain_left2_stretch 5000ms linear infinite alternate;
  -webkit-animation: chain_left2_stretch 5000ms linear infinite alternate;
}
@keyframes chain_left2_stretch {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.05, 1);
  }
  100% {
    transform: scale(1, 1);
  }
}
#visual .deco .chains .right .chain_right1_2 {
  right: 0;
  top: 0;
  border: 1px solid red;
  transform-origin: 100% 0%;
}
#visual .deco .chains .right .chain_right2 {
  right: 0;
  top: -65px;
}
#visual .deco .hands {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
}
#visual .deco .hands span {
  display: block;
  position: absolute;
}
#visual .deco .hands .hand1 {
  left: 0px;
  top: 65px;
}
#visual .deco .hands .hand1 picture {
  animation: hand1_leftSpin 4000ms ease-out infinite;
  -webkit-animation: hand1_leftSpin 4000ms ease-out infinite;
}
@keyframes hand1_leftSpin {
  0% {
    transform: rotate(0deg);
    transform-origin: 50% 50%;
  }
  50% {
    transform: rotate(-1deg);
    transform-origin: 50% 50%;
  }
  100% {
    transform: rotate(0deg);
    transform-origin: 50% 50%;
  }
}
#visual .deco .hands .hand2 {
  left: 700px;
  bottom: -210px;
}
#visual .deco .hands .hand2 picture {
  animation: hand2_shake 5500ms ease-out infinite;
  -webkit-animation: hand2_shake 5500ms ease-out infinite;
}
@keyframes hand2_shake {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(5px, 5px) rotate(5deg);
  }
  50% {
    transform: translate(0, 0) rotate(0eg);
  }
  75% {
    transform: translate(-5px, 5px) rotate(-5deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}
#visual .deco .hands .hand3 {
  right: 840px;
  bottom: -90px;
}
#visual .deco .hands .hand3 picture {
  animation: hand3_shake 6000ms ease-out infinite;
  -webkit-animation: hand3_shake 6000ms ease-out infinite;
}
@keyframes hand3_shake {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(-10px, -30px) rotate(8deg);
  }
  50% {
    transform: translate(0, 0) rotate(0eg);
  }
  75% {
    transform: translate(10px, -30px) rotate(-8deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}
#visual .deco .hands .hand4 {
  right: 0px;
  top: 340px;
}
#visual .deco .chain {
  position: absolute;
  bottom: 55px;
  left: 0;
  z-index: 1;
}
#visual .bg {
  position: relative;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
}
#visual .bg span {
  display: block;
  position: absolute;
}
#visual .bg .character_left1 {
  left: 365px;
  bottom: -325px;
  z-index: 1;
}
#visual .bg .character_right1 {
  right: 765px;
  bottom: 175px;
  z-index: 1;
}
#visual .bg .character_right2 {
  right: 0px;
  bottom: -78px;
  z-index: 2;
}
#visual .bg .zombies {
  left: 532px;
  bottom: 110px;
  z-index: 0;
}
#visual .bg .top-deco {
  left: 0;
  bottom: 0;
  z-index: 4;
}
#visual .bg .smoke {
  left: 0;
  bottom: 0;
}
#visual .bg .dust {
  left: 0;
  bottom: 0;
}
#visual .bg .particle {
  left: 0;
  bottom: 0;
  z-index: 3;
}
#visual .bg .particle picture {
  animation: particle_flicker 2000ms 500ms linear infinite alternate;
  -webkit-animation: particle_flicker 2000ms 500ms linear infinite alternate;
}
@keyframes particle_flicker {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.6;
  }
}

@keyframes toast {
  0% {
    transform: translateY(10px);
    opacity: 0;
  }
  10% {
    transform: translateY(0);
    opacity: 1;
  }
  90% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(10px);
    opacity: 0;
  }
}
#event1 {
  position: relative;
  z-index: 1;
  width: 2560px;
  height: 1597px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: url("../images/event1/bg_event1.png") 50% no-repeat;
  background-size: auto 100%;
  margin-top: -373px;
  padding-top: 373px;
}
#event1 .container {
  position: relative;
  z-index: 5;
  width: 1280px;
  height: 1597px;
  text-align: center;
}
#event1 .container .title {
  margin-bottom: 5px;
}
#event1 .container .summary {
  margin-bottom: 72px;
}
#event1 .container .period {
  margin-bottom: 24px;
}
#event1 .container .contents {
  display: flex;
  justify-content: center;
  gap: 2px;
}
#event1 .container .contents .gift {
  width: 543px;
}
#event1 .container .contents .user-display {
  position: relative;
  width: 683px;
  height: 100%;
}
#event1 .container .contents .user-display .btn_caution {
  position: absolute;
  bottom: 86px;
  right: 54px;
  width: 155px;
  height: 33px;
  background: url("../images/event1/btn_caution.png") 50% 0 no-repeat;
  background-size: cover;
}
#event1 .container .contents .form-box {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: 683/647;
}
#event1 .container .contents .form-box .content-box {
  position: relative;
  position: absolute;
  top: 81px;
  left: 54px;
  width: calc(100% - 108px);
  aspect-ratio: 575/433;
  z-index: 1;
}
#event1 .container .contents .form-box .bg {
  display: block;
}
#event1 .container .contents .form-login .content-box {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
}
#event1 .container .contents .form-login .btn_login {
  width: 100%;
  background: url("../images/event1/btn_login_off.png") 50% 0 no-repeat;
  background-size: cover;
  aspect-ratio: 576/95;
}
#event1 .container .contents .form-login .btn_login:hover {
  background-image: url("../images/event1/btn_login_on.png");
}
#event1 .container .contents .form-complete .content-box {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
}
#event1 .container .contents .form-complete .form-alarm {
  display: flex;
  width: 100%;
  height: 117px;
  align-items: center;
  justify-content: center;
}
#event1 .container .contents .form-complete .form-alarm p {
  font-weight: 500;
  font-size: 16px;
  line-height: 1.4;
  text-align: center;
  color: #383838;
}
#event1 .container .contents .form-complete .form-alarm p em {
  font-size: inherit;
  line-height: inherit;
  font-style: normal;
  color: inherit;
}
#event1 .container .contents .form-apply .checkbox-list .form-checkbox {
  display: block;
}
#event1 .container .contents .form-apply .checkbox-list .form-checkbox input[type=checkbox] {
  display: none;
}
#event1 .container .contents .form-apply .checkbox-list .form-checkbox input[type=checkbox] + label {
  display: flex;
  position: relative;
  background: url("../images/event1/checkbox.png") no-repeat;
  display: block;
  height: 17px;
  padding-left: 25px;
  text-align: left;
  color: #272b2d;
  cursor: pointer;
}
#event1 .container .contents .form-apply .checkbox-list .form-checkbox input[type=checkbox]:checked + label {
  background-position: 0 -17px;
}
#event1 .container .contents .form-apply .checkbox-list .all_check {
  margin-bottom: 18px;
  padding-bottom: 15px;
  border-bottom: 1px solid #989898;
  box-sizing: border-box;
}
#event1 .container .contents .form-apply .checkbox-list .all_check .form-checkbox input[type=checkbox] + label {
  font-size: 16px;
  line-height: 17px;
  font-weight: 600;
}
#event1 .container .contents .form-apply .checkbox-list ul {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
#event1 .container .contents .form-apply .checkbox-list ul li {
  display: flex;
  align-items: center;
  gap: 10px;
}
#event1 .container .contents .form-apply .checkbox-list ul li button {
  width: 62px;
  height: 20px;
  background: url("../images/event1/btn_detail.png") 50% no-repeat;
  background-size: cover;
}
#event1 .container .contents .form-apply .checkbox-list ul li .form-checkbox input[type=checkbox] + label {
  font-size: 14px;
  line-height: 17px;
  font-weight: 500;
}
#event1 .container .contents .form-apply .msg_toast {
  opacity: 0;
  position: absolute;
  top: -21px;
  right: 0;
  font-size: 14px;
  line-height: 16px;
  font-weight: 500;
  color: #195ccc;
}
#event1 .container .contents .form-apply .msg_toast.active {
  animation: toast 3000ms 100ms cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
#event1 .container .contents .form-apply input[type=tel],
#event1 .container .contents .form-apply input[type=text] {
  display: block;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  outline: none;
  background-color: transparent;
}
#event1 .container .contents .form-apply input[type=tel]::-moz-placeholder, #event1 .container .contents .form-apply input[type=text]::-moz-placeholder {
  font-size: 15px;
  font-weight: 400;
  color: #8f8f8f;
  transform: translate3d(0, -3px, 0);
}
#event1 .container .contents .form-apply input[type=tel]::placeholder,
#event1 .container .contents .form-apply input[type=text]::placeholder {
  font-size: 15px;
  font-weight: 400;
  color: #8f8f8f;
  transform: translate3d(0, -3px, 0);
}
#event1 .container .contents .form-apply .form-phone {
  position: relative;
  display: flex;
  height: 73px;
  margin-top: 20px;
}
#event1 .container .contents .form-apply .form-phone .input-box {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0 10px;
  box-sizing: border-box;
  background: #fff;
  font-size: 22px;
  line-height: 24px;
  font-weight: 700;
  text-align: left;
}
#event1 .container .contents .form-apply .form-phone .input-box span {
  display: block;
  width: 78px;
  height: 24px;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  text-indent: 20px;
  border-right: 1px solid #989898;
}
#event1 .container .contents .form-apply .form-phone .input-box input[type=tel] {
  width: calc(100% - 78px);
  height: 24px;
  text-indent: 24px;
}
#event1 .container .contents .form-apply .form-phone .input-box.disabled {
  position: relative;
  cursor: not-allowed;
}
#event1 .container .contents .form-apply .form-phone .input-box.disabled::after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  background: transparent;
}
#event1 .container .contents .form-apply .form-phone .btn_send {
  width: 100%;
  background: url("../images/event1/btn_send_off.png") 50% 0 no-repeat;
  background-size: cover;
  width: 171px;
  height: 100%;
}
#event1 .container .contents .form-apply .form-phone .btn_send:not(:disabled):hover {
  background-image: url("../images/event1/btn_send_on.png");
}
#event1 .container .contents .form-apply .form-phone .btn_send:disabled {
  position: relative;
  cursor: not-allowed;
}
#event1 .container .contents .form-apply .form-phone .btn_send:disabled::after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  background: transparent;
}
#event1 .container .contents .form-apply .form-auth {
  display: flex;
  align-items: center;
  height: 73px;
  margin-top: 10px;
  padding: 0 10px;
  box-sizing: border-box;
  background: #fff;
}
#event1 .container .contents .form-apply .form-auth input[type=text] {
  display: block;
  width: 100%;
  height: 100%;
  font-size: 22px;
  line-height: 24px;
  font-weight: 700;
  text-align: left;
  text-indent: 20px;
}
#event1 .container .contents .form-apply .form-auth .timer {
  width: 70px;
  font-size: 15px;
  line-height: 17px;
  font-weight: 700;
  text-align: center;
  color: #a83131;
  opacity: 0;
}
#event1 .container .contents .form-apply .form-auth.focus {
  border: 2px solid #a83131;
}
#event1 .container .contents .form-apply .form-auth.disabled {
  position: relative;
  cursor: default;
  opacity: 0.5;
}
#event1 .container .contents .form-apply .form-auth.disabled::after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  background: transparent;
}
#event1 .container .contents .form-apply .form-button {
  position: relative;
  margin-top: 40px;
}
#event1 .container .contents .form-apply .form-button .btn_apply {
  width: 100%;
  background: url("../images/event1/btn_submit_off.png") 50% 0 no-repeat;
  background-size: cover;
  aspect-ratio: 576/95;
}
#event1 .container .contents .form-apply .form-button .btn_apply:not(.disabled):hover {
  background-image: url("../images/event1/btn_submit_on.png");
}
#event1 .container .contents .form-apply .form-button .btn_apply.disabled {
  position: relative;
  cursor: not-allowed;
}
#event1 .container .contents .form-apply .form-button .btn_apply.disabled::after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  background: transparent;
}
#event1 .anchor {
  position: absolute;
  top: 450px;
  left: 0;
}

#event2 {
  position: relative;
  width: 2560px;
  height: 1245px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: url("../images/event2/bg_event2.jpg") 50% no-repeat;
  background-size: auto 100%;
}
#event2 .container {
  position: relative;
  width: 1280px;
  height: 1245px;
  text-align: center;
}
#event2 .container .title {
  margin-top: 163px;
}
#event2 .container .summary {
  margin-top: 12px;
}
#event2 .container .contents {
  position: relative;
  width: 1200px;
  margin-top: 68px;
}
#event2 .container .contents .gift {
  display: inline-block;
  margin-left: 80px;
}
#event2 .container .contents .character {
  position: absolute;
  top: -26px;
  right: -265px;
}
#event2 .anchor {
  position: absolute;
  top: 200px;
  left: 0;
}

#event3 {
  position: relative;
  z-index: 1;
  width: 2560px;
  height: 1340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: url("../images/event3/bg_event3.jpg") 50% no-repeat;
  background-size: auto 100%;
}
#event3 .container {
  position: relative;
  width: 1280px;
  height: 1340px;
  text-align: center;
}
#event3 .container .title {
  margin-top: 160px;
}
#event3 .container .summary {
  margin-top: 7px;
}
#event3 .container .contents {
  display: flex;
  justify-content: center;
  margin-top: 68px;
}
#event3 .deco {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  height: 100%;
  z-index: 1;
}
#event3 .deco > div {
  position: relative;
  width: 50%;
}
#event3 .deco > div picture {
  display: block;
  position: absolute;
}
#event3 .deco .coin_left1 {
  top: 40px;
  left: 540px;
  animation: coin_left1_bounce 2500ms ease-out infinite;
  -webkit-animation: coin_left1_bounce 2500ms ease-out infinite;
}
@keyframes coin_left1_bounce {
  0% {
    transform: translateY(15px);
    -webkit-transform: translateY(15px);
  }
  50% {
    transform: translateY(0);
    -webkit-transform: translateY(0);
  }
  100% {
    transform: translateY(15px);
    -webkit-transform: translateY(15px);
  }
}
#event3 .deco .coin_left2 {
  top: 260px;
  left: 435px;
  animation: coin_left2_bounce 2000ms ease-out infinite;
  -webkit-animation: coin_left2_bounce 2000ms ease-out infinite;
}
@keyframes coin_left2_bounce {
  0% {
    transform: translateY(12px);
    -webkit-transform: translateY(12px);
  }
  50% {
    transform: translateY(0);
    -webkit-transform: translateY(0);
  }
  100% {
    transform: translateY(12px);
    -webkit-transform: translateY(12px);
  }
}
#event3 .deco .coin_left3 {
  top: 316px;
  left: 583px;
  animation: coin_left3_bounce 2400ms ease-out infinite;
  -webkit-animation: coin_left3_bounce 2400ms ease-out infinite;
}
@keyframes coin_left3_bounce {
  0% {
    transform: translateY(25px);
    -webkit-transform: translateY(25px);
  }
  50% {
    transform: translateY(0);
    -webkit-transform: translateY(0);
  }
  100% {
    transform: translateY(25px);
    -webkit-transform: translateY(25px);
  }
}
#event3 .deco .coin_left4 {
  top: 700px;
  left: 280px;
  animation: coin_left4_bounce 2000ms ease-out infinite;
  -webkit-animation: coin_left4_bounce 2000ms ease-out infinite;
}
@keyframes coin_left4_bounce {
  0% {
    transform: translateY(-10px);
    -webkit-transform: translateY(-10px);
  }
  50% {
    transform: translateY(0);
    -webkit-transform: translateY(0);
  }
  100% {
    transform: translateY(-10px);
    -webkit-transform: translateY(-10px);
  }
}
#event3 .deco .coin_left5 {
  bottom: 140px;
  left: 550px;
  animation: coin_left5_bounce 1500ms ease-out infinite;
  -webkit-animation: coin_left5_bounce 1500ms ease-out infinite;
}
@keyframes coin_left5_bounce {
  0% {
    transform: translateY(-20px);
    -webkit-transform: translateY(-20px);
  }
  50% {
    transform: translateY(0);
    -webkit-transform: translateY(0);
  }
  100% {
    transform: translateY(-20px);
    -webkit-transform: translateY(-20px);
  }
}
#event3 .deco .coin_right1 {
  top: 43px;
  right: 565px;
  animation: coin_right1_bounce 3500ms ease-out infinite;
  -webkit-animation: coin_right1_bounce 3500ms ease-out infinite;
}
@keyframes coin_right1_bounce {
  0% {
    transform: translateY(10px);
    -webkit-transform: translateY(10px);
  }
  50% {
    transform: translateY(0);
    -webkit-transform: translateY(0);
  }
  100% {
    transform: translateY(10px);
    -webkit-transform: translateY(10px);
  }
}
#event3 .deco .coin_right2 {
  top: 320px;
  right: 467px;
  animation: coin_right2_bounce 5000ms ease-out infinite;
  -webkit-animation: coin_right2_bounce 5000ms ease-out infinite;
}
@keyframes coin_right2_bounce {
  0% {
    transform: translateY(-20px);
    -webkit-transform: translateY(-20px);
  }
  50% {
    transform: translateY(0);
    -webkit-transform: translateY(0);
  }
  100% {
    transform: translateY(-20px);
    -webkit-transform: translateY(-20px);
  }
}
#event3 .deco .coin_right3 {
  top: 405px;
  right: 377px;
  animation: coin_right3_bounce 2000ms ease-out infinite;
  -webkit-animation: coin_right3_bounce 2000ms ease-out infinite;
}
@keyframes coin_right3_bounce {
  0% {
    transform: translateY(-10px);
    -webkit-transform: translateY(-10px);
  }
  50% {
    transform: translateY(0);
    -webkit-transform: translateY(0);
  }
  100% {
    transform: translateY(-10px);
    -webkit-transform: translateY(-10px);
  }
}
#event3 .deco .coin_right4 {
  bottom: 198px;
  right: 540px;
  animation: coin_right4_bounce 3500ms ease-out infinite;
  -webkit-animation: coin_right4_bounce 3500ms ease-out infinite;
}
@keyframes coin_right4_bounce {
  0% {
    transform: translateY(35px);
    -webkit-transform: translateY(35px);
  }
  50% {
    transform: translateY(0);
    -webkit-transform: translateY(0);
  }
  100% {
    transform: translateY(35px);
    -webkit-transform: translateY(35px);
  }
}
#event3 .deco .coin_right5 {
  bottom: 130px;
  right: 390px;
  animation: coin_right5_bounce 1000ms ease-out infinite;
  -webkit-animation: coin_right5_bounce 1000ms ease-out infinite;
}
@keyframes coin_right5_bounce {
  0% {
    transform: translateY(5px);
    -webkit-transform: translateY(5px);
  }
  50% {
    transform: translateY(0);
    -webkit-transform: translateY(0);
  }
  100% {
    transform: translateY(5px);
    -webkit-transform: translateY(5px);
  }
}
#event3 .anchor {
  position: absolute;
  top: 100px;
  left: 0;
}

#event4 {
  position: relative;
  z-index: 1;
  width: 2560px;
  height: 1362px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: url("../images/event4/bg_event4.png") 50% no-repeat;
  background-size: auto 100%;
}
#event4 .container {
  position: relative;
  width: 1280px;
  height: 1362px;
  text-align: center;
}
#event4 .container .title {
  margin-top: 200px;
}
#event4 .container .contents {
  position: relative;
  margin-top: 50px;
}
#event4 .container .contents .btn_weapon-list {
  position: absolute;
  left: 50%;
  z-index: 2;
  bottom: 94px;
  width: 576px;
  height: 95px;
  background: url("../images/event4/btn_weapon_off.png") 50% 0 no-repeat;
  background-size: cover;
  transform: translateX(-50%);
}
#event4 .container .contents .btn_weapon-list:hover {
  background-image: url("../images/event4/btn_weapon_on.png");
}
#event4 .container .character {
  position: absolute;
  width: 100%;
  height: 0;
}
#event4 .container .character span {
  display: block;
  position: absolute;
}
#event4 .container .character .character_left {
  left: -535px;
  bottom: -438px;
}
#event4 .container .character .character_right {
  right: -280px;
  bottom: -210px;
}
#event4 .container .character .character_right picture {
  animation: event4_character_right_waddle 1200ms linear infinite alternate;
  -webkit-animation: event4_character_right_waddle 1200ms linear infinite alternate;
}
@keyframes event4_character_right_waddle {
  0% {
    transform: rotate(0);
    -webkit-transform: rotate(0);
    transform-origin: 20% 92%;
  }
  100% {
    transform: rotate(1deg);
    -webkit-transform: rotate(1deg);
    transform-origin: 50% 92%;
  }
}
#event4 .anchor {
  position: absolute;
  top: 100px;
  left: 0;
}

#event5 {
  position: relative;
  width: 2560px;
  height: 1210px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: -70px;
  background: url("../images/event5/bg_event5.jpg") 50% no-repeat;
  background-size: auto 100%;
}
#event5 .container {
  position: relative;
  width: 1280px;
  height: 1210px;
  text-align: center;
}
#event5 .container .title {
  margin-top: 176px;
}
#event5 .container .summary {
  margin-top: 10px;
}
#event5 .container .contents {
  position: relative;
  margin-top: 70px;
}
#event5 .container .contents .btn_support {
  position: absolute;
  left: 50%;
  z-index: 2;
  bottom: 143px;
  width: 576px;
  height: 95px;
  background: url("../images/event5/btn_support_off.png") 50% 0 no-repeat;
  background-size: cover;
  transform: translateX(-50%);
}
#event5 .container .contents .btn_support:hover {
  background-image: url("../images/event5/btn_support_on.png");
}
#event5 .container .contents .character {
  position: absolute;
  left: -94px;
  bottom: -98px;
}
#event5 .deco {
  position: relative;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
}
#event5 .deco .ribbon1 {
  position: absolute;
  left: 0;
  top: 165px;
  animation: ribbon1_bounce 3000ms ease-out infinite;
  -webkit-animation: ribbon1_bounce 3000ms ease-out infinite;
}
@keyframes ribbon1_bounce {
  0% {
    transform: translateY(20px);
    -webkit-transform: translateY(20px);
  }
  50% {
    transform: translateY(0);
    -webkit-transform: translateY(0);
  }
  100% {
    transform: translateY(20px);
    -webkit-transform: translateY(20px);
  }
}
#event5 .deco .ribbon2 {
  position: absolute;
  left: 0;
  top: 565px;
  animation: ribbon2_bounce 1000ms ease-out infinite;
  -webkit-animation: ribbon2_bounce 1000ms ease-out infinite;
}
@keyframes ribbon2_bounce {
  0% {
    transform: translateY(-8px);
    -webkit-transform: translateY(-8px);
  }
  50% {
    transform: translateY(0);
    -webkit-transform: translateY(0);
  }
  100% {
    transform: translateY(-8px);
    -webkit-transform: translateY(-8px);
  }
}
#event5 .deco .ribbon3 {
  position: absolute;
  right: 210px;
  top: 150px;
  animation: ribbon3_bounce 3500ms ease-out infinite;
  -webkit-animation: ribbon3_bounce 3500ms ease-out infinite;
}
@keyframes ribbon3_bounce {
  0% {
    transform: translateY(5px);
    -webkit-transform: translateY(5px);
  }
  50% {
    transform: translateY(0);
    -webkit-transform: translateY(0);
  }
  100% {
    transform: translateY(5px);
    -webkit-transform: translateY(5px);
  }
}
#event5 .deco .ribbon4 {
  position: absolute;
  right: 0;
  top: -40px;
  animation: ribbon4_bounce 2500ms ease-out infinite;
  -webkit-animation: ribbon4_bounce 2500ms ease-out infinite;
}
@keyframes ribbon4_bounce {
  0% {
    transform: translateY(-10px);
    -webkit-transform: translateY(-10px);
  }
  50% {
    transform: translateY(0);
    -webkit-transform: translateY(0);
  }
  100% {
    transform: translateY(-10px);
    -webkit-transform: translateY(-10px);
  }
}
#event5 .deco .ribbon5 {
  position: absolute;
  right: 0px;
  top: 515px;
  animation: ribbon5_bounce 2000ms ease-out infinite;
  -webkit-animation: ribbon5_bounce 2000ms ease-out infinite;
}
@keyframes ribbon5_bounce {
  0% {
    transform: translateY(10px);
    -webkit-transform: translateY(10px);
  }
  50% {
    transform: translateY(0);
    -webkit-transform: translateY(0);
  }
  100% {
    transform: translateY(10px);
    -webkit-transform: translateY(10px);
  }
}
#event5 .anchor {
  position: absolute;
  top: 100px;
  left: 0;
  border: 20px solid red;
}

#wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: "Pretendard", sans-serif;
}
#wrap picture {
  display: block;
}

.hide {
  position: absolute;
  width: 0;
  line-height: 0;
  height: 0;
  font-size: 0;
  top: 0;
  left: -9999px;
  overflow: hidden;
}

.util {
  position: absolute;
  top: 30px;
  right: 30px;
  z-index: 100;
}
.util a,
.util button {
  background: url("../images/spr_util.png") 0 0 no-repeat;
  text-indent: -9999px;
}
.util > div {
  display: flex;
  gap: 4px;
}
.util .btn_start {
  display: block;
  width: 190px;
  height: 40px;
}
.util .btn_start:hover {
  background-position-y: -70px;
}
.util .btn_home {
  display: block;
  width: 40px;
  height: 40px;
  background-position-x: -194px;
}
.util .btn_home:hover {
  background-position-y: -70px;
}
.util .btn_hide {
  margin-top: 10px;
  width: 234px;
  height: 14px;
  background-position-y: -48px;
}
.util .btn_hide:hover {
  background-position-y: -118px;
}

footer {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 120px;
  background: #000 url(../images/footer.jpg) 50% 50% no-repeat;
}