@charset "utf-8";

@font-face {
  font-family: "NanumSquareRound";
  font-style: normal;
  font-weight: 300;
  src: local("NanumSquareRoundL"), /* computer */ url("https://file.valofe.com/Valofe_file/web/fonts/NanumSquareRound/NanumSquareRoundL.eot"), /* IE9 Compat Modes */ url("https://file.valofe.com/Valofe_file/web/fonts/NanumSquareRound/NanumSquareRoundL.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ url("https://file.valofe.com/Valofe_file/web/fonts/NanumSquareRound/NanumSquareRoundL.woff2") format("woff2"), /* Modern Browsers */ url("https://file.valofe.com/Valofe_file/web/fonts/NanumSquareRound/NanumSquareRoundL.woff") format("woff"), /* Modern Browsers */ url("https://file.valofe.com/Valofe_file/web/fonts/NanumSquareRound/NanumSquareRoundL.ttf") format("truetype"); /* Safari, Android, iOS */
}

@font-face {
  font-family: "NanumSquareRound";
  font-style: normal;
  font-weight: 400;
  src: local("NanumSquareRoundR"), /* computer */ url("https://file.valofe.com/Valofe_file/web/fonts/NanumSquareRound/NanumSquareRoundR.eot"), /* IE9 Compat Modes */ url("https://file.valofe.com/Valofe_file/web/fonts/NanumSquareRound/NanumSquareRoundR.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ url("https://file.valofe.com/Valofe_file/web/fonts/NanumSquareRound/NanumSquareRoundR.woff2") format("woff2"), /* Modern Browsers */ url("https://file.valofe.com/Valofe_file/web/fonts/NanumSquareRound/NanumSquareRoundR.woff") format("woff"), /* Modern Browsers */ url("https://file.valofe.com/Valofe_file/web/fonts/NanumSquareRound/NanumSquareRoundR.ttf") format("truetype"); /* Safari, Android, iOS */
}

@font-face {
  font-family: "NanumSquareRound";
  font-style: normal;
  font-weight: 700;
  src: local("NanumSquareRoundB"), /* computer */ url("https://file.valofe.com/Valofe_file/web/fonts/NanumSquareRound/NanumSquareRoundB.eot"), /* IE9 Compat Modes */ url("https://file.valofe.com/Valofe_file/web/fonts/NanumSquareRound/NanumSquareRoundB.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ url("https://file.valofe.com/Valofe_file/web/fonts/NanumSquareRound/NanumSquareRoundB.woff2") format("woff2"), /* Modern Browsers */ url("https://file.valofe.com/Valofe_file/web/fonts/NanumSquareRound/NanumSquareRoundB.woff") format("woff"), /* Modern Browsers */ url("https://file.valofe.com/Valofe_file/web/fonts/NanumSquareRound/NanumSquareRoundB.ttf") format("truetype"); /* Safari, Android, iOS */
}

@font-face {
  font-family: "NanumSquareRound";
  font-style: normal;
  font-weight: 800;
  src: local("NanumSquareRoundEB"), /* computer */ url("https://file.valofe.com/Valofe_file/web/fonts/NanumSquareRound/NanumSquareRoundEB.eot"), /* IE9 Compat Modes */ url("https://file.valofe.com/Valofe_file/web/fonts/NanumSquareRound/NanumSquareRoundEB.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ url("https://file.valofe.com/Valofe_file/web/fonts/NanumSquareRound/NanumSquareRoundEB.woff2") format("woff2"), /* Modern Browsers */ url("https://file.valofe.com/Valofe_file/web/fonts/NanumSquareRound/NanumSquareRoundEB.woff") format("woff"), /* Modern Browsers */ url("https://file.valofe.com/Valofe_file/web/fonts/NanumSquareRound/NanumSquareRoundEB.ttf") format("truetype"); /* Safari, Android, iOS */
}

/*  Reset CSS  */
* {
  margin: 0;
  padding: 0;
  font-family: 'NanumSquareRound', sans-serif;
  box-sizing: border-box;
}

ol, ul {
  list-style: none;
}

a {
  outline: 0;
  text-decoration: none;
  color: #555;
}

img {
  border: 0;
}

body {
  font: 12px/1.6 arial;
  color: #555;
  min-width: 1280px;
  margin: 0;
  padding: 0;
}

input[type='text'] {
  border-block-style: none;
  background: transparent;
  border: none;
  padding-left: 5px;
}

/* 스크롤 바 */
/* width */
::-webkit-scrollbar {
  width: 4px;
}

/* Track */
::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.5);
}

/* Handle */
::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: rgba(206, 124, 121, 0.85);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: rgba(206, 124, 121, 1)
}

.hidden {
  visibility: hidden;
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 0;
  height: 0;
}

.text-indent {
  text-indent: -9999px;
}

.wrapper, #wrap {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/*sns*/
#sns {
  position: fixed;
  top: 40px;
  right: 50px;
  z-index: 14;
}

#sns li {
  float: left;
  margin-left: 20px;
}

#sns li i {
  font-size: 25px;
  color: #000;
  opacity: 0.7;
  transition: color 0.5s, transform 0.5s, opacity 0.5s;
  transform-origin: center;
}


#sns li i:hover {
  transform: scale(1.05);
  opacity: 1;
}


/*로고*/

#lnb {
  box-sizing: border-box;
  position: fixed;
  height: 100%; /*height: 100vh;*/
  width: 310px;
  overflow: hidden;
  top: 0;
  left: -263px;
  margin-top: 0;
  z-index: 30;
}

#lnb .lnb-wrapper {
  margin-top: 0;
  box-sizing: border-box;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
  width: 263px;
  padding: 0px 16px 30px 30px;
  background-color: rgba(0, 0, 0, 0.85);
  background-size: 263px 100%;
  background-repeat: repeat;
  background-position: left top;
  height: 100%; /*height: 100vh;*/
  overflow-y: auto;
}

h1 {
  position: absolute;
  top: 34px;
  left: 2rem;
  z-index: 10;
  width: 100%;
  max-width: 200px;
  text-align: center;
}

h1 img {
  width: 19vh;
  height: auto;
  max-width: 200px;
}

.btn-lnb-controll {
  position: absolute;
  left: 263px;
  top: 71px;
  width: 45px;
  height: 46px;
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.85);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}

.btn-lnb-controll .blit {
  display: inline-block;
  margin-top: 13px;
  margin-left: 9px;
  width: 23px;
  height: 19px;
  vertical-align: middle;
  transition: all .25s;
}

.btn-lnb-controll.is-normal .blit {
  background: url(https://lostsagakr-cdn-image.valofe.com/2014_grand/event/20260422_children/images/btn-closed-off.png) center no-repeat;
  background-size: 100%;
}

.btn-lnb-controll.is-normal:hover .blit {
  background: url(https://lostsagakr-cdn-image.valofe.com/2014_grand/event/20260422_children/images/btn-closed-on.png) center no-repeat;
  background-size: 100%;
}

.btn-lnb-controll.is-closed .blit {
  background: url(https://lostsagakr-cdn-image.valofe.com/2014_grand/event/20260422_children/images/btn-closed-off.png) center no-repeat;
  transform: rotate(180deg);
  background-size: 100%;
}

.btn-lnb-controll.is-closed:hover .blit {
  background: url(https://lostsagakr-cdn-image.valofe.com/2014_grand/event/20260422_children/images/btn-closed-on.png) center no-repeat;
  background-size: 100%;
  transform: rotate(180deg);
}

.btn-lnb-controll .bar {
  position: absolute;
  z-index: 1;
  right: 0;
  width: 3px;
  height: 46px;
  display: inline-block;
  background-color: #57d2ff;
}

#lnb_home {
  position: absolute;
  top: 14vh;
  
  width: 200px;
  z-index: 10;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  font-size: 15px;
  line-height: 15px;
  padding-top: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

#lnb_home i.fa {
  font-size: 20px;
  line-height: 16px;
  vertical-align: top;
}

#lnb_home:hover,
#lnb_home:hover i.fa {
  color: #fff;
  -webkit-animation: neon3 1.5s ease-in-out infinite alternate;
  -moz-animation: neon3 1.5s ease-in-out infinite alternate;
  -ms-animation: neon3 1.5s ease-in-out infinite alternate;
  -o-animation: neon3 1.5s ease-in-out infinite alternate;
  animation: neon3 1.5s ease-in-out infinite alternate;
}

#lnb_sns {
  position: fixed;
  z-index: 14;
  bottom: 105px;
  padding-top: 10px;
  box-sizing: border-box;
  padding-left: 20px;
  width: 221px;
  text-align: center;
  background-position: left top;
  background-repeat: no-repeat;
  -webkit-background-size: 100% 1px;
  -moz-background-size: 100% 1px;
  background-size: 100% 1px;
  background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0.125) 0%,
  rgba(255, 255, 255, 0.125) 1%, rgba(255, 255, 255, 0.1) 69%, rgba(255, 255, 255, 0) 100%);
  background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.125) 0%,
  rgba(255, 255, 255, 0.125) 1%, rgba(255, 255, 255, 0.1) 69%, rgba(255, 255, 255, 0) 100%);
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.125) 0%,
  rgba(255, 255, 255, 0.125) 1%, rgba(255, 255, 255, 0.1) 69%, rgba(255, 255, 255, 0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4dffffff', endColorstr='#00ffffff', GradientType=1);
}

#lnb_sns li {
  display: inline-block;
  margin-left: 2rem;
  margin-right: 2rem;
  
  transition: color 0.5s, transform 0.5s, opacity 0.5s;
}

#lnb_sns li:first-child {
  margin-left: 0;
  margin-right: 2rem;
}

#lnb_sns li i {
  font-size: 25px;
  color: rgba(255, 255, 255, 0.5);
  opacity: 0.5;
  transition: all 0.25s;
}

#lnb_sns li i.white {
  font-size: 25px;
  color: #fff;
  opacity: 0.5;
  
}

#lnb_sns li:hover i, #lnb_sns li:hover i {
  transform: scale(1.05);
  opacity: 1;
  color: #ffc52b;
  /*-webkit-animation: neon3 1.5s ease-in-out infinite alternate;*/
  /*-moz-animation: neon3 1.5s ease-in-out infinite alternate;*/
  /*-ms-animation: neon3 1.5s ease-in-out infinite alternate;*/
  /*-o-animation: neon3 1.5s ease-in-out infinite alternate;*/
  /*animation: neon3 1.5s ease-in-out infinite alternate;*/
}

p.copyright {
  position: fixed;
  bottom: 40px;
  z-index: 14;
  padding-top: 20px;
  padding-left: 10px;
  padding-right: 20px;
  box-sizing: border-box;
  width: 221px;
  background-position: left top;
  background-repeat: no-repeat;
  -webkit-background-size: 100% 1px;
  -moz-background-size: 100% 1px;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4dffffff', endColorstr='#00ffffff', GradientType=1);
  text-align: center;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
}


#menu {
  margin-top: 23.5vh;
}

#menu > li {
  position: relative;
  display: block;
  box-sizing: border-box;
  height: 6.5rem;
  text-align: left;
  /*max-height: 63px;*/
  /*line-height: 5.6vh;*/
  /*min-height: 52px;*/
  line-height: 1.2;
  background-position: left top;
  background-repeat: no-repeat;
  -webkit-background-size: 100% 1px;
  -moz-background-size: 100% 1px;
  background-size: 100% 1px;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+1,ffffff+69,ffffff+100&0.3+0,0.1+69,0+100 */
  background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0.125) 0%, rgba(255, 255, 255, 0.125) 1%, rgba(255, 255, 255, 0.1) 69%, rgba(255, 255, 255, 0) 100%); /* FF3.6-15 */
  background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.125) 0%, rgba(255, 255, 255, 0.125) 1%, rgba(255, 255, 255, 0.1) 69%, rgba(255, 255, 255, 0) 100%); /* Chrome10-25,Safari5.1-6 */
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.125) 0%, rgba(255, 255, 255, 0.125) 1%, rgba(255, 255, 255, 0.1) 69%, rgba(255, 255, 255, 0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

#menu em, #menu li span {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-style: normal;
}

#menu em {
  margin-bottom: 3px;
}

#menu li span.img {
  margin-top: 14px;
  font-size: 1rem;
  color: #57d2ff;
  gap: 7px;
}


#menu > li:nth-of-type(1) {
  height: 4rem;
  background: none;
}

#menu > li:nth-of-type(2) {
  height: 7.5rem;
}


#menu a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  height: 100%;
  transition: all 0.25s;
  /* padding-top: 16px;*/
  font-family: 'NanumSquareRound', sans-serif;
  color: rgba(255, 255, 255, 1);
  text-align: left;
  font-size: 18px;
  opacity: 0.8;
  letter-spacing: -1px;
}

#menu li a:hover {
  font-size: 18px;
  opacity: 1;
  text-decoration: none;
}

#menu li.on a {
  font-size: 1.125rem;
  opacity: 1;
}

#menu > li > a { /*border-top:1px solid rgba(255,255,255,0.2)*/
  font-size: 1.125rem;
  padding-left: 14px;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4dffffff', endColorstr='#00ffffff', GradientType=1); /* IE6-9 */
}

/*
#menu li ul li a,
#menu li ul li a:hover,
#menu li.on ul li a{font-size:16px !important; text-align:left; padding-left:30px; height:40px; letter-spacing:0;}
*/
#menu li ul li a {
  padding-left: 30px;
}

#menu .title {
  display: block;
  width: 210px;
  padding-left: 14px;
  /*padding-bottom: 5px; padding-top:20px;*/
  /* border-top: 1px solid rgba(255,255,255,0.2); */
  text-align: left;
  font-size: 18px;
  color: rgba(255, 255, 255, 1);
  cursor: pointer;
  
  background-position: left top;
  background-repeat: no-repeat;
  -webkit-background-size: 100% 1px;
  -moz-background-size: 100% 1px;
  background-size: 100% 1px;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+1,ffffff+69,ffffff+100&0.3+0,0.1+69,0+100 */
  background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0.125) 0%, rgba(255, 255, 255, 0.125) 1%, rgba(255, 255, 255, 0.1) 69%, rgba(255, 255, 255, 0) 100%); /* FF3.6-15 */
  background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.125) 0%, rgba(255, 255, 255, 0.125) 1%, rgba(255, 255, 255, 0.1) 69%, rgba(255, 255, 255, 0) 100%); /* Chrome10-25,Safari5.1-6 */
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.125) 0%, rgba(255, 255, 255, 0.125) 1%, rgba(255, 255, 255, 0.1) 69%, rgba(255, 255, 255, 0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4dffffff', endColorstr='#00ffffff', GradientType=1); /* IE6-9 */
}

#menu .title:hover, #menu .title.on {
  -webkit-animation: neon3 1.5s ease-in-out infinite alternate;
  -moz-animation: neon3 1.5s ease-in-out infinite alternate;
  animation: neon3 1.5s ease-in-out infinite alternate;
}

#menu li ul li a .blit-lnb {
  display: inline-block;
  margin-right: 3px;
  margin-top: -1px;
  width: 18px;
  height: 15px;
  background: url("https://lostsagakr-cdn-image.valofe.com/2014_grand/event/20260422_chidren/images/btn-closed-off.png") center top no-repeat;
  background-size: 100%;
}

#menu li ul li.on a .blit-lnb {
  display: inline-block;
  margin-right: 3px;
  margin-top: -1px;
  width: 18px;
  height: 15px;
  background: url("https://lostsagakr-cdn-image.valofe.com/2014_grand/event/20260422_chidren/images/btn-closed-off-on.png") center top no-repeat;
  background-size: 100%;
}

#menu li:nth-child(4) {
  padding-bottom: 0;
  line-height: 23px;
}

#menu > li > a:hover,
#menu > li.on > a,
#menu li:nth-child(2).on > span,
#menu li:nth-child(2).on ul li.on a,
#menu .title:hover,
#menu .title.on {
  -webkit-animation: neon3 1.5s ease-in-out infinite alternate;
  -moz-animation: neon3 1.5s ease-in-out infinite alternate;
  -ms-animation: neon3 1.5s ease-in-out infinite alternate;
  -o-animation: neon3 1.5s ease-in-out infinite alternate;
  animation: neon3 1.5s ease-in-out infinite alternate;
}

@-webkit-keyframes neon3 {
  from {
    text-shadow: 0 0 0px #fff, 0 0 0px #57d2ff, 0 0 0px #57d2ff, 0 0 10px #57d2ff, 0 0 20px #57d2ff, 0 0 30px #57d2ff;
  }
  to {
    text-shadow: 0 0 0px #fff, 0 0 0px #57d2ff, 0 0 0px #57d2ff, 0 0 0px #57d2ff, 0 0 0px #57d2ff, 0 0 1px #57d2ff;
  }
}

@-moz-keyframes neon3 {
  from {
    text-shadow: 0 0 0px #fff, 0 0 0px #57d2ff, 0 0 0px #57d2ff, 0 0 10px #57d2ff, 0 0 20px #57d2ff, 0 0 30px #57d2ff;
  }
  to {
    text-shadow: 0 0 0px #fff, 0 0 0px #57d2ff, 0 0 0px #57d2ff, 0 0 0px #57d2ff, 0 0 0px #57d2ff, 0 0 1px #57d2ff;
  }
}

@-ms-keyframes neon3 {
  from {
    text-shadow: 0 0 0px #fff, 0 0 0px #57d2ff, 0 0 0px #57d2ff, 0 0 10px #57d2ff, 0 0 20px #57d2ff, 0 0 30px #57d2ff;
  }
  to {
    text-shadow: 0 0 0px #fff, 0 0 0px #57d2ff, 0 0 0px #57d2ff, 0 0 0px #57d2ff, 0 0 0px #57d2ff, 0 0 1px #57d2ff;
  }
}

@-o-keyframes neon3 {
  from {
    text-shadow: 0 0 0px #fff, 0 0 0px #57d2ff, 0 0 0px #57d2ff, 0 0 10px #57d2ff, 0 0 20px #57d2ff, 0 0 30px #57d2ff;
  }
  to {
    text-shadow: 0 0 0px #fff, 0 0 0px #57d2ff, 0 0 0px #57d2ff, 0 0 0px #57d2ff, 0 0 0px #57d2ff, 0 0 1px #57d2ff;
  }
}

@keyframes neon3 {
  from {
    text-shadow: 0 0 0px #fff, 0 0 0px #57d2ff, 0 0 0px #57d2ff, 0 0 10px #57d2ff, 0 0 20px #57d2ff, 0 0 30px #57d2ff;
  }
  to {
    text-shadow: 0 0 0px #fff, 0 0 0px #57d2ff, 0 0 0px #57d2ff, 0 0 0px #57d2ff, 0 0 0px #57d2ff, 0 0 1px #57d2ff;
  }
}

/*레이아웃*/
section {
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  background-size: 100% 100%;
  background-position: center;
  background-attachment: scroll;
}

#section1 {
  background-image: url(https://lostsagakr-cdn-image.valofe.com/2014_grand/event/20260422_children/images/sec1-bg.jpg);
}

#section2 {
  background-image: url(https://lostsagakr-cdn-image.valofe.com/2014_grand/event/20260422_children/images/sec2-bg.jpg);
}


#section3 {
  background-image: url(https://lostsagakr-cdn-image.valofe.com/2014_grand/event/20260422_children/images/sec2-bg.jpg);
}

#section4 {
  background-image: url(https://lostsagakr-cdn-image.valofe.com/2014_grand/event/20260422_children/images/sec4-bg.jpg);
}

#section5 {
  background-image: url(https://lostsagakr-cdn-image.valofe.com/2014_grand/event/20260422_children/images/sec5-bg.jpg?1);
}

article {
  position: absolute; /*top:46%;*/
  top: 80px;
  width: calc(100% - 520px);
  left: 400px;
  z-index: 11;
  background: red;
  padding: 30px;
  border-radius: 8px;
}

article p {
  width: 100%;
  font-family: 'NanumSquareRound', sans-serif;
  font-size: 36px;
  letter-spacing: -3px;
  line-height: 1;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  font-weight: bold;
}

article span {
  width: 100%;
  display: block;
  margin-top: 10px;
  margin-left: 4px;
  font-size: 16px;
  letter-spacing: -0.5px;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
}

#section1 article {
  background: rgba(206, 124, 121, 0.85);
}

#section3 article {
  background: rgba(41, 48, 77, 0.85); /* background:rgba(206,124,121,0.85);*/
}

#section4 article {
  background: rgba(189, 77, 94, 0.85);
}

#section5 article {
  background: rgba(227, 148, 10, 0.85);
}

#section1 p {
  color: #fff;
  text-align: center;
}

#section1 span {
  color: #fff;
  text-align: center;
}

#section2 p {
  color: #fff;
}

#section2 span {
  color: #fff;
}

#section3 p {
  color: #fff;
}

#section4 p {
  color: #fff;
}

#section4 span {
  color: #fff;
}

#section5 p {
  color: #fff;
}

#section5 span {
  color: #6644fb;
}


#section3 .img-wrap {
  position: absolute;
  top: 0;
  height: 100%;
  z-index: 12;
  left: 53%;
  transform: translate(-47%);
}

#section4 .img-wrap {
  position: absolute;
  top: 0;
  right: 17%;
  height: 100%;
  z-index: 12;
}

#section5 .img-wrap {
  position: absolute;
  top: 0;
  height: 100%;
  z-index: 12;
  left: 50%;
  transform: translateX(-50%);
}

#section2 .img-wrap img {
  height: 100%;
  position: relative;
}

#section3 .img-wrap img {
  height: 100%;
}

#section4 .img-wrap img {
  height: 100%;
}

#section5 .img-wrap img {
  height: 100%;
  right: 2%;
}


/* 추억의 뽑기 */
#section2 article {
  background: rgba(41, 48, 77, 0.85);
}

#section2 .img-wrap {
  position: absolute;
  height: 100%;;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* section 1*/
#section2 .sec2-char._l {
  position: absolute;
  left: 6vw;
  top: 17vh;
  z-index: 10;
  width: 24vw;
}

#section2 .sec2-char._r {
  position: absolute;
  right: 4vw;
  bottom: 3vh;
  z-index: 10;
  height: 87vh;
}

/* 캐릭터 영상 & 스킬 */
#section4 .hero-wrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

#section4 .chr-hero._l {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 35%;
}

#section4 .chr-hero._r {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 37vw;
  filter: brightness(0.74) saturate(0.84);
}

#section4 .chr-hero {
  scale: 0.85;
  filter: brightness(0.8) saturate(0.88);
  will-change: filter;
}

#section4 .chr-hero._l {
  transform-origin: left center;
}

#section4 .chr-hero._r {
  transform-origin: right center;
}

#section4 .tit-hero {
  position: absolute;
  top: 9%;
  left: 50%;
  transform: translateX(-50%);
  height: 73px;
}

#section4 .tit-hero img {
  height: 100%;
  vertical-align: bottom;
}


#section4 .btn-yt {
  display: inline-block;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -89%);
  position: absolute;
  
}

#section4 .btn-yt img {
  height: 9vh;
  margin-bottom: 40%;
}

#section4 .btn-yt img:hover {
  filter: brightness(1.2);
}

.character-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /*width: calc(276 px + 276 px + 360 px);*/
  height: 29.75vh;
  position: absolute;
  left: 50%;
  bottom: 12%;
  transform: translateX(-50%);
  gap: 20vw;
}


.character-item li {
  aspect-ratio: 276/276;
  width: 276px;
  height: 100%;
  position: relative;
  overflow: hidden;
  filter: brightness(0.74) saturate(0.84);
  -moz-transition: all .2s ease-in;
  -o-transition: all .2s ease-in;
  -webkit-transition: all .2s ease-in;
  transition: all .2s ease-in;
}

.character-item li.scroll-reveal {
  transition: translate 0.8s ease, opacity 0.8s ease;
}

.character-item li.scroll-reveal.delay-hero-1.is-visible {
  transition-delay: 0.45s;
}

.character-item li.scroll-reveal.delay-hero-2.is-visible {
  transition-delay: 0.65s;
}

.scroll-reveal.delay-after-wrap-1.is-visible {
  transition-delay: 0.3s;
}

.scroll-reveal.delay-after-wrap-2.is-visible {
  transition-delay: 0.45s;
}

.scroll-reveal.delay-stage-1.is-visible {
  transition-delay: 0.2s;
}

.scroll-reveal.delay-stage-2.is-visible {
  transition-delay: 0.45s;
}

.scroll-reveal.delay-stage-3.is-visible {
  transition-delay: 0.75s;
}

.scroll-reveal.delay-stage-4.is-visible {
  transition-delay: 1.05s;
}

.character-item li:nth-of-type(1) {
  background: url(https://lostsagakr-cdn-image.valofe.com/2014_grand/event/20260422_children/images/skill1-off.png) center no-repeat;
  background-size: 100% 100%;
  justify-self: flex-start;
}

.character-item li:nth-of-type(2) {
  background: url(https://lostsagakr-cdn-image.valofe.com/2014_grand/event/20260422_children/images/skill2-off.png) center no-repeat;
  background-size: 100% 100%;
  justify-self: flex-end;
}

.character-item li::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.character-item li:nth-of-type(1)::after {
  background-image: url(https://lostsagakr-cdn-image.valofe.com/2014_grand/event/20260422_children/images/skill1-on.png);
}

.character-item li:nth-of-type(2)::after {
  background-image: url(https://lostsagakr-cdn-image.valofe.com/2014_grand/event/20260422_children/images/skill2-on.png);
}

.character-item li:nth-of-type(1).scroll-reveal.is-visible::after {
  animation: skillBlinkLeft 14s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.character-item li:nth-of-type(2).scroll-reveal.is-visible::after {
  animation: skillBlinkRight 14s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.character-item li:nth-of-type(1).scroll-reveal.is-visible {
  animation: skillCardAccentLeft 14s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.character-item li:nth-of-type(2).scroll-reveal.is-visible {
  animation: skillCardAccentRight 14s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

#section4 .chr-hero._l.scroll-reveal.is-visible {
  animation: characterAccentLeft 14s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

#section4 .chr-hero._r.scroll-reveal.is-visible {
  animation: characterAccentRight 14s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

@keyframes skillBlinkLeft {
  0%, 27% {
    opacity: 0.92;
  }
  43%, 70% {
    opacity: 0;
  }
  86%, 100% {
    opacity: 0.92;
  }
}

@keyframes skillBlinkRight {
  0%, 27% {
    opacity: 0;
  }
  43%, 70% {
    opacity: 0.92;
  }
  86%, 100% {
    opacity: 0;
  }
}

@keyframes characterAccentLeft {
  0%, 27% {
    filter: brightness(1.12) saturate(1.08);
    scale: 1;
  }
  43%, 70% {
    filter: brightness(0.8) saturate(0.88);
    scale: 0.85;
  }
  86%, 100% {
    filter: brightness(1.12) saturate(1.08);
    scale: 1;
  }
}

@keyframes characterAccentRight {
  0%, 27% {
    filter: brightness(0.74) saturate(0.84);
    scale: 0.85;
  }
  43%, 70% {
    filter: brightness(1.22) saturate(1.14);
    scale: 1;
  }
  86%, 100% {
    filter: brightness(0.74) saturate(0.84);
    scale: 0.85;
  }
}

@keyframes skillCardAccentLeft {
  0%, 27% {
    filter: brightness(1.06) saturate(1.04);
  }
  43%, 70% {
    filter: brightness(0.74) saturate(0.84);
  }
  86%, 100% {
    filter: brightness(1.06) saturate(1.04);
  }
}

@keyframes skillCardAccentRight {
  0%, 27% {
    filter: brightness(0.74) saturate(0.84);
  }
  43%, 70% {
    filter: brightness(1.06) saturate(1.04);
  }
  86%, 100% {
    filter: brightness(0.74) saturate(0.84);
  }
}


/* 메인 텍스트 애니메이션 */
#mainTitle {
  position: absolute;
  display: inline-block;
  
  width: auto; /*margin-left:25.375%;*/
  height: 69vh;
  aspect-ratio: 763/650;
  text-align: center;
  z-index: 21;
  
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  
}

#mainTitle img {
  position: relative;
  display: inline-block;
  text-align: center;
  z-index: 20;
  width: auto;
  max-height: 100%;
  pointer-events: none;
}

#t-event {
  margin-top: 60px;
  width: 78.190255%;
}

#t-time {
  margin-top: 20px;
  width: 89.443155%;
}

.aniText1 {
  animation: aniText 1s 0s 1 both;
  -webkit-animation: aniText 1s 0s 1 both;
}

.aniText2 {
  animation: aniText 1s 0.1s 1 both;
  -webkit-animation: aniText 1s 0.1s 1 both;
}

.aniText3 {
  animation: aniText 1s 0.2s 1 both;
  -webkit-animation: aniText 1s 0.2s 1 both;
}

.aniText4 {
  animation: aniText 1s 0.3s 1 both;
  -webkit-animation: aniText 1s 0.3s 1 both;
}

.aniText5 {
  animation: aniText 1s 0.4s 1 both;
  -webkit-animation: aniText 1s 0.4s 1 both;
}

.aniText6 {
  animation: aniText 1s 0.5s 1 both;
  -webkit-animation: aniText 1s 0.5s 1 both;
}

.aniText7 {
  animation: aniText 1s 0.6s 1 both;
  -webkit-animation: aniText 1s 0.6s 1 both;
}

.aniTextTitle {
  animation: aniTextTitle 1s 0.7s 1 both;
  -webkit-animation: aniTextTitle 1s 0.7s 1 both;
}

/* 풍성하고 즐거운 */
@keyframes aniText {
  from {
    transform: translate(15px, -15px);
    opacity: 0;
  }
  to {
    transform: translate(0px);
    opacity: 1;
  }
}

@-webkit-keyframes aniText {
  from {
    transform: translate(15px, -15px);
    opacity: 0;
  }
  to {
    transform: translate(0px);
    opacity: 1;
  }
}

/* 추석맞이 이벤트 */
@keyframes aniTextTitle {
  from {
    transform: translateY(15px);
    opacity: 0;
  }
  to {
    transform: translateY(0px);
    opacity: 1;
  }
}

@-webkit-keyframes aniTextTitle {
  from {
    transform: translateY(15px);
    opacity: 0;
  }
  to {
    transform: translateY(0px);
    opacity: 1;
  }
}

/* 메인 타이틀 */
/*#section1 .moon-tit { position: absolute; bottom:0; right: 0; margin-right: 44.75vh; }*/
/*#section1 .moon-tit .moon {width:99.5vh;}*/
/*#section1 .moon-tit .tit {position: absolute; top:15vh; left:13vh; width:71.1vh; }*/


/* 캐릭터 */
#section1 .chr1 {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  z-index: 12;
}

#section1 .chr1 img {
  width: 100%;
  vertical-align: bottom;
}

#section1 .chr1 img.fox {
  position: absolute;
  right: -50px;
  bottom: 0;
  width: auto;
  height: 100vh;
}

#section1 .chr1 img.deco-eft {
  position: absolute;
  bottom: 72vh;
  right: 30.3vh;
  width: 8%;
}

#section4 .chr2 {
  position: absolute;
  bottom: 7%;
  left: 8.2%;
  height: 80.1%;
  z-index: 12;
}

#section4 .chr2 img {
  height: 100%;
}

/* 빤짝이는 여우 빛 */
.twinkle {
  animation: twinkle 2s 0.6s infinite alternate;
}

@keyframes twinkle {
  0% {
    opacity: 0
  }
  30% {
    opacity: 0.8
  }
  60% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}

/* 마우스 스크롤 이미지 */
.aniBounce {
  animation: bounce 1s infinite alternate;
  -webkit-animation: bounce 1s infinite alternate;
}

@keyframes bounce {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-15px);
  }
}

@-webkit-keyframes bounce {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-15px);
  }
}

/* 영웅 애니메이션 */
.slideRight {
  opacity: 0;
  animation: slideRight 1.2s 0.2s;
  -webkit-animation: slideRight 1.2s 0.2s;
  -ms-animation: slideRight 1.2s 0.2s;
  -o-animation: slideRight 1.2s 0.2s;
  -moz-animation: slideRight 1.2s 0.2s;
  animation-fill-mode: forwards;
}

@keyframes slideRight {
  from {
    left: 4%;
    opacity: 0
  }
  to {
    left: 8.2%;
    opacity: 1;
  }
}

@-webkit-keyframes slideRight {
  from {
    left: 4%;
    opacity: 0
  }
  to {
    left: 8.2%;
    opacity: 1;
  }
}

@-ms-keyframes slideRight {
  from {
    left: 4%;
    opacity: 0
  }
  to {
    left: 8.2%;
    opacity: 1;
  }
}

@-o-keyframes slideRight {
  from {
    left: 4%;
    opacity: 0
  }
  to {
    left: 8.2%;
    opacity: 1;
  }
}

@-moz-keyframes slideRight {
  from {
    left: 4%;
    opacity: 0
  }
  to {
    left: 8.2%;
    opacity: 1;
  }
}

/* section4 푸짐한 한가위 상자 */

.sec5-char._l {
  position: absolute;
  top: 56px;
  left: 50%;
  transform: translateX(calc(-50% - 613px));
  z-index: 20;
}

.sec5-char._r {
  position: absolute;
  right: 0;
  bottom: 0;
}


/* section5 패키지 */
#section5 .img-wrap .btn-go-to-shop {
  display: inline-block;
  position: absolute;
  left: 50%;
  bottom: 20.5%;
  transform: translateX(-50%);
}

#section5 .btn-container {
  position: relative;
  width: 100%;
  height: 100%;
}

#section5 .img-wrap .btn-go-to-shop img {
  max-width: 255px;
  height: 4.74vh;
}

/* ./ section5 패키지 */

/* popup START*/
/* START popup 공통 요소 */
.layer-wrap {
  z-index: 9998;
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  text-align: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.layer-wrap:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -.25em;
}

.layer-wrap.basic .pop-layer {
  z-index: 9999;
  box-sizing: border-box;
  display: inline-block;
  vertical-align: middle;
  width: min(92vw, 560px);
  height: auto;
  background: transparent;
}

.layer-wrap.basic2 .pop-layer {
  z-index: 9999;
  box-sizing: border-box;
  display: inline-block;
  vertical-align: middle;
  width: 600px;
  height: auto;
  min-height: 240px;
  background-color: #fff;
}

.layer-wrap.yt .pop-layer {
  z-index: 9999;
  box-sizing: border-box;
  display: inline-block;
  vertical-align: middle;
  width: min(92vw, 1080px);
  height: auto;
  background: transparent;
}

.layer-wrap.tbl .pop-layer {
  z-index: 9999;
  box-sizing: border-box;
  display: inline-block;
  vertical-align: middle;
  width: 500px;
  min-height: 240px;
  height: 340px;
  overflow-y: auto;
  /*background:#9aa34d;*/
  background: #fff;
  border: 3px solid #2766c1;
}

.pop-container {
  padding: 0;
  height: 100%;
  background: transparent;
}

.pop-container .skip {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
  visibility: hidden;
}

.pop-container .frame {
  z-index: 9999;
  position: relative;
  margin: 0;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 251, 255, 0.94) 100%);
  box-shadow: 0 24px 80px rgba(8, 20, 42, 0.28);
  overflow: hidden;
}

.pop-container.my-get-list .frame {
  border: none;
}

/* 애니메이션 */
.shadow {
  display: none;
  opacity: 1;
  width: 100%;
  height: 100%;
  position: fixed;
  padding-bottom: 0px;
  top: 0;
  left: 0;
  z-index: -1;
  background-size: cover;
  background: rgba(7, 15, 30, 0.58);
}

.pop-container .frame h1 {
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  max-width: unset;
  padding: 28px 76px 0 32px;
  box-sizing: border-box;
  color: #1f2a44;
  font-weight: 800;
  font-size: 18px;
  background: none;
  text-align: left;
  position: absolute;
  text-indent: 0;
}


.layer-wrap.tbl .pop-container .frame h1 {
  top: -18px;
  left: 0;
  color: #311e13;
  max-width: unset;
}

.pop-container .msg {
  box-sizing: border-box;
  width: 100%;
  margin-top: 0;
  padding: 88px 32px 0;
  letter-spacing: -0.5px;
  font-size: 19px;
  font-weight: bold;
  color: #2a3552;
  line-height: 1.65;
}

.pop-container .msg .db-text {
  display: inline-block;
  letter-spacing: -0.5px;
  font-size: 19px;
  font-weight: bold;
  color: #1274d8;
  line-height: 1.4;
}

.pop-container .msg .db-error {
  display: inline-block;
  letter-spacing: -0.5px;
  font-size: 18px;
  font-weight: bold;
  color: #a00000;
  line-height: 1.4;
}

.pop-container .msg .db-alert {
  display: inline-block;
  font-family: 'Malgun Gothic';
  letter-spacing: -0.5px;
  font-size: 18px;
  font-weight: bold;
  color: cornflowerblue;
  line-height: 1.4;
}

.pop-container .btn-layer-close {
  position: absolute;
  top: 20px;
  right: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(17, 116, 216, 0.08);
  color: #45617f;
  text-indent: 0;
  font-size: 0;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.pop-container .btn-layer-close::before,
.pop-container .btn-layer-close::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

.pop-container .btn-layer-close::before {
  transform: rotate(45deg);
}

.pop-container .btn-layer-close::after {
  transform: rotate(-45deg);
}

.pop-container .btn-layer-close:hover {
  background: rgba(17, 116, 216, 0.14);
  color: #1274d8;
  transform: rotate(90deg);
}

.yt .pop-container {
  padding: 0;
  background: transparent;
}

.yt .pop-container .frame {
  overflow: visible;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 32px;
  background: linear-gradient(180deg, rgba(20, 28, 44, 0.96) 0%, rgba(10, 14, 24, 0.98) 100%);
  box-shadow: 0 28px 100px rgba(0, 0, 0, 0.38);
  padding: 22px;
}

.yt .pop-container .frame iframe {
  display: block;
  width: 100%;
  min-width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  min-height: 0;
  border: 0;
  border-radius: 20px;
  background: #000;
}

.yt .pop-container .btn-layer-close {
  top: -14px;
  right: -14px;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.yt .pop-container .btn-layer-close:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  transform: rotate(90deg) scale(1.03);
}

.pop-container .wrap-btn {
  width: 100%;
  margin: 28px auto 0;
  padding: 0 32px 32px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.pop-container .btn-confirm, .pop-container .btn-cancel, .pop-container .btn-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 140px;
  height: 52px;
  padding: 0 24px;
  border-radius: 16px;
  border: 1px solid transparent;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}

.pop-container .btn-confirm:hover, .pop-container .btn-cancel:hover, .pop-container .btn-close:hover {
  transform: translateY(-1px);
}

.pop-container .btn-confirm {
  background: linear-gradient(135deg, #1a7cf0 0%, #45b7ff 100%);
  color: #fff;
}

.pop-container.my-get-list .btn-confirm {
  background: url("https://lostsagakr-cdn-image.valofe.com/2014_grand/event/202108_thanksgiving/images/btn-pop-confirm-o.png") 0 0 no-repeat;
}

.pop-container .btn-cancel {
  background: rgba(239, 244, 251, 0.9);
  color: #52637d;
  border-color: rgba(82, 99, 125, 0.12);
}


.btn1 {
  margin-right: 0;
}

.btn2 {
  margin-left: 0;
}


.rwd-media-container {
  overflow: hidden;
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  padding-bottom: calc(9 / 16 * 100%);
}

.rwd-media {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  z-index: 0;
}

.cover-video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  z-index: 0;
  background: rgba(0, 0, 0, 0.65) url("https://lostsagakr-cdn-image.valofe.com/2014_grand/event/20180919_thanksgiving/images/cover-video.png");
}

.cover-video::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 45vw;
  height: 48vh;
  background: radial-gradient(circle at bottom right, rgba(6, 10, 18, 1) 0%, rgba(6, 10, 18, 0.98) 18%, rgba(6, 10, 18, 0.86) 34%, rgba(6, 10, 18, 0.48) 60%, rgba(6, 10, 18, 0) 84%);
  pointer-events: none;
}

/* 마우스 */
.mouse {
  position: fixed;
  top: 50px;
  right: 0;
  z-index: 0;
}


.cont-wrap {
  position: relative;
  width: 100%;
  height: 100%;
}


.check-wrap .row-w {
  display: table-cell;
  vertical-align: middle;
  padding: 1% 0;
}

#section3 .check-wrap {
  z-index: 10;
  margin-top: 8vh;
  background: #136737;
}

/* ////////////// EVENT2 ////////////// */
#section3 {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-image: url(https://lostsagakr-cdn-image.valofe.com/2014_grand/event/20260422_children/images/sec3-bg2.jpg);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

#section3 .cont-wrap {
  z-index: 10;
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  
  display: flex;
  align-items: center;
  justify-content: center;
  
}

#section3 .present {
  position: absolute;
  bottom: 0;
  right: -5vh;
  z-index: 0
}

#section3 .row-w {
  position: relative;
  width: 95.37037037vh;
  height: 100vh;
  max-width: 100%;
  margin: 0 auto;
  background: url("https://lostsagakr-cdn-image.valofe.com/2014_grand/event/20260422_children/images/sec3-cont.png") no-repeat center center;
  background-size: 100% 100%;
}

#section3 .row-w .img-attend {
  width: 100%;
}

#section3 .check-wrap {
  z-index: 10;
}

/* 출석체크 아이템 받기 */
.attendInputBox {
  position: absolute;
  display: inline-block;
  right: 272px;
  top: 45px;
  width: 170px;
  height: 24px;
  text-align: center;
  z-index: 13;
  color: #000;
  font-size: 14px;
  font-weight: bold;
  font-family: 'NanumSquareRound', 'Malgun Gothic', 'Dotum', sans-serif;
}

.attend-list {
  position: absolute;
  left: 10.1%;
  top: 22.8%;
  width: 79.3%;
  height: 46%;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  column-gap: 0.8%;
  row-gap: 5.2%;
}

.attend-list li {
  position: relative;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
}

.attend-list li a {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  text-indent: -9999px;
}

.attend-list li[data-status='get-ok'] {
  pointer-events: none;
}

.attend-list li[data-status='get-ok'] a:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: block;
  background: url(https://lostsagakr-cdn-image.valofe.com/2014_grand/event/20260422_children/images/get-ok2.png) center no-repeat;
  background-size: 100% 100%;
}


.secret-attend-list {
  position: absolute;
  left: 70px;
  top: 0px;
  width: 954px;
}

.secret-attend-list li {
  position: relative;
  /*float: left;*/
  /*width: 152px;*/
  /*height: 256px;*/
  /*margin-right: 7.9px;*/
  
  aspect-ratio: 154/238;
  width: calc(154 / 954 * 100%);
  margin-right: 4.5px; /*calc(6 / 154 * 100%);*/
  margin-bottom: 14px;
}

.secret-attend-list li:nth-child(-n+6) {
  margin-bottom: 14px;
}

.secret-attend-list li a {
  display: inline-block;
  width: 100%;
  height: 100%;
  text-indent: -9999px;
}

.secret-attend-list li[data-status='get-ok'] a:after {
  position: absolute;
  display: inline-block;
  content: '';
  width: 100%;
  height: 100%;
  background: url(https://lostsagakr-cdn-image.valofe.com/2014_grand/event/vent/20260422_children/images/202106_marble/images/get-ok2.png) center no-repeat;
  left: 0;
  top: 0;
}

/* 나의 출석 BONUS */
.floating-banner-attend {
  opacity: 1;
  z-index: 9998;
  position: absolute;
  display: inline-block;
  width: 166px;
  height: 724px;
  right: 8vw;
  top: 50%;
  transform: translateY(-50%);
  background: url(https://lostsagakr-cdn-image.valofe.com/2014_grand/event/20260422_children/images/sec3-floating.png) 0 0 no-repeat;
}

.my-attend-cnt {
  position: absolute;
  top: 87px;
  left: 44px;
  width: 76px;
  height: 39px;
  line-height: 39px;
  color: #002467;
  border: none;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  background: none;
}

.my-attend-cnt::placeholder {
  color: #002467;
}

.my-attend-cnt ~ span {
  position: absolute;
  top: 96px;
  right: 53px;
  font-size: 14px;
  font-weight: bold;
  color: #002467;
}

.bonus-attend-list {
  position: absolute;
  left: 10px;
  top: 148px;
  width: 146px;
}

.bonus-attend-list li {
  position: relative;
  width: 100%;
  height: 184px;
  margin-bottom: 8px;
}

.bonus-attend-list li a {
  display: inline-block;
  width: 100%;
  height: 100%;
  text-indent: -9999px;
}

.bonus-attend-list li[data-status='get-ok'] a:after {
  position: absolute;
  display: inline-block;
  content: '';
  width: 100%;
  height: 100%;
  background: url(https://lostsagakr-cdn-image.valofe.com/2014_grand/event/20260422_children/images/get-bonus.png) center no-repeat;
  left: 0;
  top: 0;
}


/************** CHAR  **************/
.sec1-char {
  position: absolute;
}

.sec1-char._chr1 {
  right: 6vw;
  bottom: 7vh;
  height: 82vh;
}

.sec1-char._chr1 img {
  height: 100%;
}

/* dragon */
.sec1-char._chr2 {
  left: -4vw;
  top: 5vh;
  width: 24vw;
}

.sec1-char._chr2 img {
  width: 100%;
}

.sec1-char._chr3 {
  left: 16vw;
  transform: translateX(-30%);
  bottom: 4vh;
  width: 38vh;
}

.sec1-char._chr3 img {
  width: 100%;
}

.sec3-char {
  position: absolute;
  left: 0;
  bottom: 2rem;
}

/*.sec5-char._l {*/
/*  position: absolute;*/
/*  left: 0;*/
/*  bottom: 2rem;*/
/*}*/

/*.sec5-char._r {*/
/*  position: absolute;*/
/*  right: 0;*/
/*  bottom: 2rem;*/
/*}*/

.scroll-reveal {
  opacity: 0;
  translate: 0 0;
  transition: translate 0.8s ease, opacity 0.8s ease;
  transition-delay: 0s;
  will-change: translate, opacity;
}

.scroll-reveal.from-left {
  translate: -80px 0;
}

.scroll-reveal.from-top {
  translate: 0 -50px;
}

.scroll-reveal.from-right {
  translate: 80px 0;
}

.scroll-reveal.from-bottom {
  translate: 0 50px;
}

.scroll-reveal.is-visible {
  opacity: 1;
}

.scroll-reveal.from-left.is-visible,
.scroll-reveal.from-top.is-visible,
.scroll-reveal.from-right.is-visible,
.scroll-reveal.from-bottom.is-visible {
  translate: 0 0;
}

#section1 .sec1_left.scroll-reveal.is-visible {
  animation: floatDragon 5.4s ease-in-out 1.35s infinite;
}

#section1 .sec1_right.scroll-reveal.is-visible {
  animation: flashSpark 5.2s ease-in-out 1.1s infinite;
}

#section1 .sec1_mid.scroll-reveal.is-visible {
  animation: breatheFloat 5.4s ease-in-out 1.3s infinite;
}

#section2 .sec2-char._l.scroll-reveal.is-visible {
  animation: floatDragonWide 5.8s ease-in-out 1.35s infinite;
}

#section2 .sec2-char._r.scroll-reveal.is-visible {
  animation: flashSparkSoft 5.6s ease-in-out 1.1s infinite;
}

#section3 .sec3-char.scroll-reveal.is-visible {
  animation: floatWatcher 5s ease-in-out 0.8s infinite;
}

#section3 .floating-banner-attend.scroll-reveal.is-visible {
  animation: bannerSway 6.2s ease-in-out 1s infinite;
}

#section5 .sec5-char._l.scroll-reveal.is-visible {
  animation: crowHover 4.8s ease-in-out 0.8s infinite;
}

#section5 .sec5-char._r.scroll-reveal.is-visible {
  animation: heroDrift 5.8s ease-in-out 1s infinite;
}

@keyframes floatDragon {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  25% {
    transform: translate3d(-6px, -5px, 0) rotate(-1deg);
  }
  50% {
    transform: translate3d(-12px, 2px, 0) rotate(0deg);
  }
  75% {
    transform: translate3d(-5px, 7px, 0) rotate(1deg);
  }
}

@keyframes flashSpark {
  0%, 18%, 100% {
    transform: translate3d(0, 0, 0);
    filter: brightness(1) saturate(1);
  }
  20% {
    transform: translate3d(0, -3px, 0);
    filter: brightness(1.18) saturate(1.12);
  }
  23% {
    transform: translate3d(0, 0, 0);
    filter: brightness(1);
  }
  27% {
    transform: translate3d(0, -5px, 0);
    filter: brightness(1.24) saturate(1.2);
  }
  32% {
    transform: translate3d(0, 0, 0);
    filter: brightness(1.04) saturate(1.04);
  }
}

@keyframes breatheFloat {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(0, -10px, 0) scale(1.015);
  }
}

@keyframes floatDragonWide {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  30% {
    transform: translate3d(-7px, -8px, 0) rotate(-1deg);
  }
  60% {
    transform: translate3d(-14px, 2px, 0) rotate(0deg);
  }
  85% {
    transform: translate3d(-5px, 6px, 0) rotate(1deg);
  }
}

@keyframes flashSparkSoft {
  0%, 22%, 100% {
    transform: translate3d(0, 0, 0);
    filter: brightness(1) saturate(1);
  }
  26% {
    transform: translate3d(0, -4px, 0);
    filter: brightness(1.14) saturate(1.08);
  }
  31% {
    transform: translate3d(0, 0, 0);
    filter: brightness(1);
  }
  36% {
    transform: translate3d(0, -6px, 0);
    filter: brightness(1.2) saturate(1.12);
  }
  42% {
    transform: translate3d(0, 0, 0);
    filter: brightness(1.03) saturate(1.03);
  }
}

@keyframes floatWatcher {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  50% {
    transform: translate3d(10px, -10px, 0) rotate(1deg);
  }
}

@keyframes bannerSway {
  0%, 100% {
    transform: translateY(-50%) rotate(0deg);
  }
  50% {
    transform: translateY(calc(-50% - 8px)) rotate(-1.5deg);
  }
}

@keyframes crowHover {
  0%, 100% {
    transform: translateX(calc(-50% - 613px)) translateY(0) rotate(0deg);
  }
  50% {
    transform: translateX(calc(-50% - 613px)) translateY(-10px) rotate(-2deg);
  }
}

@keyframes heroDrift {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(-8px, -10px, 0);
  }
}

@media screen and (max-width: 1418px) {
  
  
  #section2 .img-wrap {
    /*left: 57%;*/
  }
  
  #section3 .img-wrap {
    /*left: 59.5%;*/
  }
  
  #section5 .img-wrap {
    /*left: 56%;*/
  }
  
  #section4 .tit-hero {
    /*height: 15%;*/
    /*top: 16%;*/
    /*right: 20%;*/
  }
}

@media screen and ( max-width: 1280px) {
  #lnb {
    height: 100%;
  }
  
  #section3 .img-wrap {
    transform: translate(-51%);
  }
  
  #section5 .img-wrap {
    transform: translate(-47.7%);
  }
}