@charset "UTF-8";
/* reset */
body, p, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, table, th, td, form, fieldset, legend, input, textarea, button, select {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body, input, textarea, select, button, table, em {
  font-family: "맑은 고딕", "Malgun Gothic", sans-serif;
  font-weight: normal;
  font-size: 16px;
}

img, fieldset {
  border: 0;
  vertical-align: top;
}

ul, ol {
  list-style: none;
}

em, address {
  font-style: normal;
}

a {
  text-decoration: none;
}

a:hover, a:active, a:focus {
  text-decoration: none;
}

html {
  min-width: 1263px;
  -webkit-text-size-adjust: none;
  background-color: #383838;
}

.blind, legend {
  position: absolute;
  left: -1000%;
  top: 0;
  width: 1px;
  height: 1px;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
  text-indent: -10000px;
}

button {
  border: 0;
  cursor: pointer;
  vertical-align: top;
  background: transparent;
}

button:focus {
  outline: none;
}

#loading{ width: 100%; height: 100%; position: fixed; top: 0; left: 0; background:#000; z-index:20; font-size: 18px; color: #cfd1cc; z-index: 101;}
#loading .box{ width: 100%; height: 1px; background: #414141; margin: 0 auto; position: relative; top: 50%; transform: translateY(-50%); left: 0;}
#loading .box span{ height: 1px; background: #c4c4c4; position: relative; top: 0; left: 0; display: block;}
#loading .box p{ font-size: 16px; line-height: 30px; color: #c0c0c0; text-align: center;}

#wrapper {
  position: relative;
  width: 100%;
  min-width: 1445px;
  max-width: 1920px;
  margin: 32px auto 0;
  overflow: hidden;
  opacity: 0;
}

#header h1 a,.btn,.start,.quick a {
  display: block;
  text-indent: -9999px;
  overflow: hidden;
  background-image: url(../images/spr_common.png);
  background-repeat: no-repeat;
}
#header {
  z-index: 200;
}
#header h1 {
  position: absolute;
  top: 8px;
  left: 50%;
  margin-left: 89px;
  z-index: 10;
}
#header h1 a {
  width: 232px;
  height: 156px;
  background-position: 0 0;
}
.quick {
  position: fixed;
  right: 2%;
  top: 30%;
  width: 150px;
  height: 260px;
  padding: 19px 0 0 0;
  z-index: 50;
  background:url(../images/spr_common.png) no-repeat -1px -332px;
  transition: top 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.quick li {
  position: relative;
  width: 150px;
  height: 60px;
  overflow: hidden;
}
.quick li.q1 a {
  background-position: 0 -351px;
}
.quick li.q2 a {
  background-position: 0 -411px;
}
.quick li.q3 a {
  background-position: 0 -471px;
}
.quick li.top a {
  background-position: 0 -531px;
}
.quick li a {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}
.quick li a:hover,.quick li.active a {
  background-position-x: -153px;
}

#container {
  position: relative;
  width: 100%;
  height: 100%;
}

.section {
  width: 100%;
  text-align: center;
}
.section .content{
  position: relative;
  z-index: 9;
}

.section .tit{
  width: 1000px;
  height: 245px; 
  display: block;
  margin: 0 auto;
}

.section .stit1 {
  background: url(../images/stit1.png) no-repeat;
}
.section .stit2 {
  background: url(../images/stit2.png) no-repeat;
}
.section .stit3 {
  background: url(../images/stit3.png) no-repeat;
}

.obj {
  z-index: 2;
}


#section0 {
  height: 1304px;
  background: url(../images/bg_01.jpg) no-repeat center top;
}

#section0 .flower_1 {
  width: 1920px;
  height: 2120px;
  background: url(../images/flower_1.png) no-repeat;
  position: absolute;
  left: 50%;
  margin-left: -960px;
  top: 0;
  z-index: 1;
}
#section0 .flower_2 {
  width: 1920px;
  height: 2120px;
  background: url(../images/flower_2.png) no-repeat;
  position: absolute;
  left: 50%;
  margin-left: -960px;
  top: 0;
  z-index: 1;
}
#section0 .flower_3 {
  width: 1920px;
  height: 2120px;
  background: url(../images/flower_3.png) no-repeat;
  position: absolute;
  left: 50%;
  margin-left: -960px;
  top: 0;
  z-index: 5;
}
#section0 .flower_4 {
  width: 1920px;
  height: 2120px;
  background: url(../images/flower_4.png) no-repeat;
  position: absolute;
  left: 50%;
  margin-left: -960px;
  top: 0;
  z-index: 9;
}
#section0 .npc {
  width: 802px;
  height: 1113px;
  background: url(../images/npc.png) no-repeat;
  position: absolute;
  left: 50%;
  margin-left: -788px;
  top: 8px;
  z-index: 4;
}
#section0 .char1 {
  width: 221px;
  height: 284px;
  background: url(../images/char1.png) no-repeat;
  position: absolute;
  left: 50%;
  margin-left: -944px;
  top: 17px;
  z-index: 4;
  transform-origin: center bottom;
}
#section0 .char2 {
  width: 403px;
  height: 424px;
  background: url(../images/char2.png) no-repeat;
  position: absolute;
  left: 50%;
  margin-left: 608px;
  top: 547px;
  z-index: 4;
  transform-origin: center bottom;
}
#section0 .char3 {
  width: 214px;
  height: 305px;
  background: url(../images/char3.png) no-repeat;
  position: absolute;
  left: 50%;
  margin-left: 317px;
  top: 871px;
  z-index: 4;
  transform-origin: center bottom;
}

#section0 .main_title{
  width: 776px;
  height: 663px;
  position: absolute;
  left: 50%;
  margin-left: -137px;
  top: 179px;
  z-index: 6;
}
#section0 .main_title .title_bg{
  width: 769px;
  height: 318px;
  background: url(../images/title_bg.png) no-repeat;
  position: absolute;
  left: 2px;
  top: 259px;
}
#section0 .main_title .title1{
  width: 727px;
  height: 312px;
  background: url(../images/title1.png) no-repeat;
  position: absolute;
  left: 23px;
  top: 0;
}
#section0 .main_title .title2{
  width: 696px;
  height: 198px;
  background: url(../images/title2.png) no-repeat;
  position: absolute;
  left: 80px;
  top: 323px;
}
#section0 .main_title .date{
  width: 661px;
  height: 101px;
  background: url(../images/date.png) no-repeat;
  position: absolute;
  left: 55px;
  top: 573px;
}

#section0 .cl_l {
  width: 978px;
  height: 939px;
  background: url(../images/cl_l.png) no-repeat;
  position: absolute;
  left: 50%;
  margin-left: -960px;
  top: 987px;
  z-index: 10;
}

#section0 .cl_r {
  width: 888px;
  height: 898px;
  background: url(../images/cl_r.png) no-repeat;
  position: absolute;
  right: 50%;
  margin-right: -960px;
  top: 987px;
  z-index: 10;
}

#section1 {
  height: 2926px;
  background: url(../images/bg_02.jpg) no-repeat center top;
}

#section1 .txt1_1{
  width: 1445px;
  height: 582px;
  margin: -44px auto 0;
  background: url(../images/txt1_1.png) no-repeat;
  position: relative;
  z-index: 3;
}
#section1 .txt1_2{
  width: 1445px;
  height: 1142px;
  margin: 27px auto 0;
  background: url(../images/txt1_2.png) no-repeat;
  position: relative;
  z-index: 3;
}
#section1 .txt1_3{
  width: 1445px;
  height: 852px;
  margin: 40px auto 0;
  background: url(../images/txt1_3.png) no-repeat;
  position: relative;
  z-index: 3;
}

#section1 .n1{
  width: 681px;
  height: 1502px;
  background: url(../images/bg_char01.png) no-repeat;
  position: absolute;
  top: 718px;
  left: 50%;
  margin-left: -1111px;
}

#section1 .n2{
  width: 754px;
  height: 1181px;
  background: url(../images/bg_char02.png) no-repeat;
  position: absolute;
  top: 1516px;
  left: 50%;
  margin-left: 434px;
}

#section2 {
  height: 2314px;
  background: url(../images/bg_03.jpg) no-repeat center top;
  z-index: 11;
}

#section2 .txt2{
  width: 1445px;
  height: 1972px;
  margin: 20px auto 0;
  background: url(../images/txt2.png) no-repeat;
  position: relative;
  z-index: 3;
}

#section2 .n1{
  width: 844px;
  height: 1472px;
  background: url(../images/bg_char04.png) no-repeat;
  position: absolute;
  top: -242px;
  left: 50%;
  margin-left: 329px;
}

#section2 .n2{
  width: 696px;
  height: 1769px;
  background: url(../images/bg_char05.png) no-repeat;
  position: absolute;
  top: 818px;
  left: 50%;
  margin-left: -1122px;
}

#section2 .n3{
  width: 911px;
  height: 709px;
  background: url(../images/bg_char03.png) no-repeat;
  position: absolute;
  top: -88px;
  left: 50%;
  margin-left: -1152px;
}

#section3 {
  height: 1774px;
  background: url(../images/bg_04.jpg) no-repeat center top;
}

#section3 .n1{
  width: 804px;
  height: 1450px;
  background: url(../images/bg_char06.png) no-repeat;
  position: absolute;
  top: 59px;
  left: 50%;
  margin-left: 279px;
}

#section3 .n2{
  width: 811px;
  height: 1049px;
  background: url(../images/bg_char07.png) no-repeat;
  position: absolute;
  top: 1022px;
  left: 50%;
  margin-left: -1066px;
}

#section3 .road {
  width: 1033px;
  height: 141px;
  display: block;
  position: absolute;
  left: 50%;
  top: 373px;
  margin-left: -516px;
  background: url(../images/bg_road.png) no-repeat;
}
.swiper_reward {
  position: relative;
  width: 1445px;
  height: 1093px;
  z-index: 30;
  margin: 0 auto;
  padding-top: 340px;
  background: url(../images/bg-reward.png) no-repeat center bottom;
}

.swiper_reward .swiper-wrapper {
  margin: 0 auto;
  width: 100%;
  height: 100%;
  text-align: center;
}

.swiper_reward .swiper-slide {
  opacity: 0 !important;
}

.swiper_reward .swiper-slide-active {
  opacity: 1 !important;
}

.swiper_reward .btn {
  width: 102px;
  height: 92px;
  z-index: 5;
  border: 0;
  outline: none;
}

.swiper_reward .swiper-button-prev {
  display: block;
  position: absolute;
  left: 50%;
  top: 340px;
  margin-left: -490px;
  background-position: -367px 0;
}

.swiper_reward .swiper-button-next {
  display: block;
  position: absolute;
  left: 50%;
  top: 340px;
  margin-left: 400px;
  background-position: -471px 0;
}

.swiper_reward .btn:hover {
  background-position-y: -97px;
}

#section3 .start {
  width: 103px;
  height: 103px;
  z-index: 10;
  display: block;
  position: absolute;
  left: 50%;
  top: 401px;
  margin-left: -570px;
  background-position: 0 -199px;
}

.swiper_reward .swiper-pagination {
  top: 15px;
  height: 159px;
}
.swiper_reward .swiper-pagination span {
  display: block;
  position: absolute;
  width: 103px;
  height: 103px;
  border-radius: 0;
  outline: none;
  opacity: 1;
  background: url(../images/spr_common.png) no-repeat;
  background-position-y: -200px;
}
.swiper_reward .swiper-pagination span:nth-child(1) {
  left: 490px;
  top: 146px;
}
.swiper_reward .swiper-pagination span:nth-child(2) {
  left: 740px;
  top: 93px;
}
.swiper_reward .swiper-pagination span:nth-child(3) {
  left: 990px;
  top: 176px;
}
.swiper_reward .swiper-pagination span:nth-child(4) {
  left: 1190px;
  top: 125px;
}
.swiper_reward .swiper-pagination span:nth-child(1) {
  background-position-x: -104px;
}
.swiper_reward .swiper-pagination span:nth-child(2) {
  background-position-x: -220px;
}
.swiper_reward .swiper-pagination span:nth-child(3) {
  background-position-x: -336px;
}
.swiper_reward .swiper-pagination span:nth-child(4) {
  background-position-x: -452px;
}
.swiper_reward .swiper-pagination span:nth-child(4)::after {
  content: "";
  width: 148px;
  height: 103px;
  display: block;
  position: absolute;
  left: 17px;
  top: -85px;
  background: url(../images/spr_common.png) no-repeat;
  background-position: -652px -106px;
  z-index: 1;
}

.swiper_reward .swiper-pagination span::before {
  content: "";
  opacity: 0;
  position: absolute;
  left: 17px;
  top: -47px;
  width: 92px;
  height: 86px;
  background: url(../images/spr_common.png) no-repeat;
  background-position: -609px 0;
  animation: gremlin 1s infinite cubic-bezier(0.175, 0.885, 0.32, 1.275);
  animation-direction: alternate;
  z-index: 3;
}
.swiper_reward .swiper-pagination .swiper-pagination-bullet-active::before {
  opacity: 1;
}

@keyframes gremlin {
  0% {
    transform: translateY(-30px) scaleY(1.1);
  }
  100% {
    transform: translateY(0) scaleY(1);
  }
}