@charset "UTF-8";
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: 1200px; -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: 1200px; max-width: 1920px; margin: 32px auto 0; overflow: hidden;}
#wrapper .obj,.quick a{ display: block; text-indent: -9999px; overflow: hidden; background-image: url(../images/spr_common.png); background-repeat: no-repeat;}
#header h1 { position: absolute; top: 89px; left: 50%; margin-left: -78px; z-index: 10;}
#header h1 a { width: 156px; height: 104px; background-position: 0 0;}
.quick { position: fixed; right: 2%; top: 30%; width: 104px; z-index: 50; transition: top 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);}
.quick li { position: relative; width: 104px; height: 104px; overflow: hidden; margin-bottom: 5px;}
.quick li a { display: block; position: relative; width: 100%; height: 100%;}
.quick li.q1{ height: 104px; }
.quick li.q1 a { background-position: 0 -166px; }
.quick li.q2 a { background-position: 0 -273px; }
.quick li.q3 a { background-position: 0 -381px; }
.quick li.top a { background-position: 0 -491px; }
.quick li.top{ height: 40px;}
.quick li a:hover,.quick li.active a { background-position-x: -141px;}
#container { position: relative; width: 100%; height: 100%;}
.section { width: 100%; text-align: center; position: relative;}
.section .content{ height: 100%; position: relative; z-index: 9;}
.section .tit{ width: 1000px; height: 299px; display: block; margin: 0 auto 0;}
.section .stit1 { height: 239px; 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;}
.section .txt{ width: 1269px; display: inline-block;}
.section .char span{ display: block; text-indent: -9999px; }
.section .char span::after{ content: ""; width: 100%; height: 100%; display: block; transform-origin: center bottom; background-image: url(../images/char_obj.png); background-repeat: no-repeat;}

#section0 { height: 876px; background: url(../images/bg_01.jpg) no-repeat center top;}
#section0 .slogan { width: 1000px; height: 528px; background: url(../images/slogan.png) no-repeat; position: absolute; left: 50%; margin-left: -500px; top: 200px; z-index: 4;}
#section0 .time { width: 1000px; height: 50px; background: url(../images/time.png) no-repeat; position: absolute; left: 50%; margin-left: -500px; top: 750px; z-index: 4;}
#section0 .flag-1 { width: 530px; height: 516px; background: url(../images/flag.png) no-repeat right center; position: absolute; left: 50%; margin-left: 90px; top: 70px; z-index: 2;}
#section0 .flag-2 { width: 530px; height: 516px; background: url(../images/flag.png) no-repeat left center; position: absolute; left: 50%; margin-left: -620px; top: 70px; z-index: 2;}
#section0 .tree-1 { width: 1920px; height: 620px; background: url(../images/tree_1.png) no-repeat right center; position: absolute; left: 50%; margin-left: -960px; top: 0; pointer-events: none;}
#section0 .char .char1{ width: 477px; height: 570px; position: absolute; left: 50%; top: 100px; margin-left: -905px; z-index: 1;}
#section0 .char .char1::after{ background-position: -534px 0; animation: rot_o1 10s infinite linear; }

#section1 { height: 2996px; background: url(../images/bg_02.jpg) no-repeat center top;}
#section1 .txt1_1{ height: 577px; margin: 0 auto 0; background: url(../images/txt1_1.png) no-repeat center top; position: relative; z-index: 3;}
#section1 .txt1_2{ height: 1395px; margin: 0 auto 0; background: url(../images/txt1_2.png) no-repeat center top; position: relative; z-index: 3;}
#section1 .txt1_3{ height: 730px; margin: 0 auto 0; background: url(../images/txt1_3.png) no-repeat center top; position: relative; z-index: 3;}
#section1 .char .char1{ width: 534px; height: 570px; position: absolute; left: 50%; top: -372px; margin-left: 240px; z-index: 2;}
#section1 .char .char1::after{ background-position:0 0; animation: rot_o3 3s infinite linear;}
#section1 .char .char2{ width: 265px; height: 366px; position: absolute; left: 50%; top: 1172px; margin-left: 605px; z-index: 2;}
#section1 .char .char2::after{ background-position:-1016px 0; animation: rot_o2 3s infinite linear;}
#section1 .char .char3{ width: 373px; height: 500px; position: absolute; left: 50%; top: 2017px; margin-left: -933px; z-index: 2;}
#section1 .char .char3::after{ background-position:-1284px 0; animation: rot_o1 3s infinite linear;}
#section1 .tree-1 { width: 493px; height: 1324px; background: url(../images/tree_2.png) no-repeat right center; position: absolute; left: 50%; margin-left: -960px; top: -326px; pointer-events: none;}

#section2 { height: 2562px; background: url(../images/bg_03.jpg) no-repeat center top; z-index: 11;}
#section2 .txt2{width: 1200px; height: 2156px; margin:30px auto 0; background: url(../images/txt2.png) no-repeat center bottom; position: relative; z-index: 3;}
#section2 .char .char1{ width: 680px; height: 570px; position: absolute; left: 50%; top: 485px; margin-left: 555px; z-index: 2;}
#section2 .char .char1::after{ background-position:-1683px 0; animation: rot_o3 3s infinite linear;}
#section2 .tree-1 { width: 655px; height: 1079px; background: url(../images/tree_3.png) no-repeat right center; position: absolute; left: 50%; margin-left: -960px; top: -390px; pointer-events: none;}
#section2 .tree-2 { width: 565px; height: 1464px; background: url(../images/tree_4.png) no-repeat right center; position: absolute; left: 50%; margin-left: 395px; top: 1697px; pointer-events: none;}

#section3 { height: 1506px; background: url(../images/bg_04.jpg) no-repeat center top;}
#section3 .tree-1 { width: 709px; height: 194px; background: url(../images/tree_5.png) no-repeat right center; position: absolute; left: 50%; margin-left: 356px; top: 1014px; pointer-events: none;}
#section3 .char .char1{ width: 413px; height: 470px; position: absolute; left: 50%; top: -304px; margin-left: -797px; z-index: 5;}
#section3 .char .char1::after{ background-position: -2411px 0; animation: rot_o1 3s infinite linear; }

.swiper_reward { position: relative; width: 1226px; height: 925px; z-index: 3; margin: 0 auto; padding-top: 230px; 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: 40px; height: 57px; z-index: 5; border: 0; outline: none; display: block; position: absolute; left: 50%; top: 311px;} 
.swiper_reward .swiper-button-prev { margin-left: -340px; background-position: -858px 0;}
.swiper_reward .swiper-button-next { margin-left: 300px; background-position: -920px 0;}
.swiper_reward .btn:hover { background-position-y: -70px;}
.swiper_reward .swiper-pagination { top: 15px; height: 220px; background: url(../images/spr_common.png) no-repeat 74px -574px;}
.swiper_reward .swiper-pagination span { display: block; position: absolute; width: 103px; height: 103px; border-radius: 0; outline: none; opacity: 1; background: none;}
.swiper_reward .swiper-pagination span:nth-child(1) { left: 314px; top: 87px;}
.swiper_reward .swiper-pagination span:nth-child(2) { left: 558px; top: 19px;}
.swiper_reward .swiper-pagination span:nth-child(3) { left: 805px; top: 93px;}
.swiper_reward .swiper-pagination span:nth-child(4) { left: 1050px; top: 65px;}
.swiper_reward .swiper-pagination-bullet-active::before { content: ""; position: absolute; left: 17px; bottom: 74px; width: 105px; height: 105px; background: url(../images/spr_common.png) no-repeat -1074px 0; animation: gremlin 1s infinite cubic-bezier(0.175, 0.885, 0.32, 1.275); animation-direction: alternate; z-index: 3;}

.tsparticles{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
.tsparticles canvas{ width: 100%; height: 100%;-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 10%, rgb(0, 0, 0) 90%, rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 10%, rgb(0, 0, 0) 90%, rgba(0, 0, 0, 0) 100%);}


/* #popdiv{ width: 702px; display: none; z-index: 999;}
#popdiv .pop img{ width: 100%;}	
#popdiv .close{ width: 60px; height: 50px; position: absolute; top: 0; left: 50%; margin-left: -30px; display: block; text-indent: -9999px; cursor: pointer;}
 */

@keyframes gremlin {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-5px) rotate(-2deg);
  }
  100% {
    transform: translateY(0px) rotate(0deg);
  }
}


@keyframes tra_o1 {
  0%,100% {
    transform: translate(0px) ;
  }
  50% {
    transform: translateX(-20%) ;
  }
}

@keyframes sca_o1 {
  0%,100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.09) ;
  }
}
@keyframes rot_o1 {
  0%,100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-4deg) ;
  }
}

@keyframes rot_o2 {
  0%,100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(4deg) ;
  }
}

@keyframes rot_o3 {
  0%,100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(1deg) ;
  }
}

@keyframes rot_o4 {
  0%,100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-2deg) ;
  }
}