/*화살표 색*/
.component nav a {
	color: #fff;
}
.component nav a:hover::before {
	color: #01c6fb;
}

/*공통*/
body {
  background: url(../img/bg.jpg) center top no-repeat;
  overflow: hidden;
}
.character {
  position: fixed;
  bottom: 0;
  background: url(../img/character.png) center top no-repeat;
  width: 100%;
  height: 306px;
  z-index: 1000000000000;
}
.img_shadow {
  -webkit-filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.1));
  filter: drop-shadow(30px 30px 30px rgba(0,0,0,0.1));
  z-index: 1;
}
.poab {
	position: absolute;
  z-index: 2;
	opacity: 0;
	transition: all .3s;
}

.current .poab {
	opacity: 1;
}

.pagenum {
	position: absolute;
	font-family: arial;
	top: 720px;
	left: 100px;
	width: 50px;
	height: 50px;
	z-index: 1000000000000;
	border-radius: 50%;
	background-color: #2d1bf3;
	color: #fff;
	font-size: 15px;
	font-weight: bold;
	text-align: center;
	padding-top: 15px;
	box-sizing: border-box;
}

/*1*/
.current .p1_1 {
	left: 89px;
	top: 454px;
	-webkit-animation: MotionY2 .3s linear  alternate;
	animation: MotionY2 .3s linear  alternate;
}
.current .p1_2 {
	left: 99px;
	top: 123px;
	-webkit-animation: MotionX2 .5s infinite alternate;
	animation: MotionX2 .5s infinite alternate;
}
.current .p1_3 {
	left: 104px;
	top: 376px;
	-webkit-animation: MotionY2 .5s linear alternate;
	animation: MotionY2 .5s linear alternate;
}

/*2*/
.current .p2_1 {
	left: 129px;
	top: 258px;
	-webkit-animation: MotionY2 .2s linear;
	animation: MotionY2 .2s linear;
}
.current .p2_2 {
	left: 651px;
	top: 424px;
	-webkit-animation: MotionX2 .2s linear;
	animation: MotionX2 .2s linear;
}

/*3*/
.current .p3_1 {
	left: 150px;
	top: 209px;
	-webkit-animation: MotionY2 .5s linear infinite alternate;
	animation: MotionY2 .5s linear infinite alternate;
}
.current .p3_2 {
	left: 280px;
	top: 97px;
	-webkit-animation: MotionY3 .3s linear alternate;
	animation: MotionY3 .3s linear alternate;
}
.current .p3_3 {
	left: 486px;
	top: 601px;
	-webkit-animation: MotionY1 .3s linear alternate;
	animation: MotionY1 .3s linear alternate;
}

/*4*/
.current .p4_1 {
	left: 270px;
	top: 183px;
	-webkit-animation: MotionX5 1s linear infinite;
	animation: MotionX5 1s linear infinite;
}
.current .p4_2 {
	left: 249px;
	top: 523px;
	-webkit-animation: MotionY1 .5s linear ;
	animation: MotionY1 .5s linear ;
}

/*5*/
.current .p5_1 {
	left: 89px;
	top: 76px;
	-webkit-animation: MotionY2 .3s linear  alternate;
	animation: MotionY2 .3s linear  alternate;
}
.current .p5_2 {
	left: 258px;
	top: 241px;
	-webkit-animation: MotionY1 .3s linear alternate;
	animation: MotionY1 .3s linear alternate;
}

/*6*/
.current .p6_1 {
	left: 426px;
	top: 185px;
	-webkit-animation: MotionX5 1s linear infinite;
	animation: MotionX5 1s linear infinite;
}
.current .p6_2 {
	left: 294px;
	top: 523px;
	-webkit-animation: MotionY1 .5s linear ;
	animation: MotionY1 .5s linear ;
}

/*7*/
.current .p7_1 {
	left: 344px;
	top: 97px;
	-webkit-animation: MotionY1 .5s alternate ;
	animation: MotionY1 .5s alternate ;
}
.current .p7_2 {
	left: 238px;
	top: 571px;
	-webkit-animation: MotionX5 1.5s linear infinite;
	animation: MotionX5 1.5s linear infinite;
}

/*8*/
.current .p8_1 {
	left: 260px;
	top: 435px;
	-webkit-animation: MotionY1 .5s alternate ;
	animation: MotionY1 .5s alternate ;

}
.current .p8_2 {
	left: 266px;
	top: 524px;
	-webkit-animation: MotionX5 1.5s linear infinite;
	animation: MotionX5 1.5s linear infinite;
}

/*9*/
.current .p9_1 {
	left: 326px;
	top: 181px;
	-webkit-animation: MotionX5 1s linear infinite;
	animation: MotionX5 1s linear infinite;
}
.current .p9_2 {
	left: 301px;
	top: 493px;
	-webkit-animation: MotionY1 .5s linear ;
	animation: MotionY1 .5s linear ;
}

/*10*/
.current .p10_1 {
	left: 124px;
	top: 548px;
	-webkit-animation: MotionY1 1s  alternate ;
	animation: MotionY1 1s  alternate ;
}
.current .p10_2 {
	left: 462px;
	top: 548px;
	-webkit-animation: MotionY2 1s  alternate ;
	animation: MotionY2 1s  alternate ;
}
.current .p10_3 {
	left: 817px;
	top: 548px;
	-webkit-animation: MotionX4 1s ease alternate;
	animation: MotionX4 1s ease alternate;
}

/*11*/
.current .p11_1 {
	left: 226px;
	top: 101px;
	-webkit-animation: MotionX5 1s linear infinite;
	animation: MotionX5 1s linear infinite;
}
.current .p11_2 {
	left: 127px;
	top: 227px;
	-webkit-animation: MotionY1 .5s linear ;
	animation: MotionY1 .5s linear ;
}

/*12*/
.current .p12_1 {
	left: 309px;
	top: 100px;
	-webkit-animation: MotionY1 .5s alternate ;
	animation: MotionY1 .5s alternate ;
}
.current .p12_2 {
	left: 362px;
	top: 591px;
	-webkit-animation: MotionX5 1.5s linear infinite;
	animation: MotionX5 1.5s linear infinite;
}

/*13*/
.current .p13_1 {
	left: 948px;
	top: 424px;
	-webkit-animation: MotionRotate1 .2s linear alternate;
	animation: MotionRotate1 .2s linear alternate;
}
.current .p13_2 {
	left: 142px;
	top: 296px;
	-webkit-animation: MotionY2 .2s linear;
	animation: MotionY2 .2s linear;
}
.current .p13_3 {
	left: 146px;
	top: 455px;
	-webkit-animation: MotionY2 .2s linear;
	animation: MotionY2 .2s linear;
}

/*14*/
.current .p14_1 {
	left: 117px;
	top: 172px;
	-webkit-animation: MotionY1 .5s alternate ;
	animation: MotionY1 .5s alternate ;
}
.current .p14_2 {
	left: 119px;
	top: 532px;
	-webkit-animation: MotionX5 1.5s linear infinite;
	animation: MotionX5 1.5s linear infinite;
}

/*15*/
.current .p15_1 {
	left: 104px;
	top: 350px;
	-webkit-animation: MotionRotate1 .2s linear alternate;
	animation: MotionRotate1 .2s linear alternate;
}
.current .p15_2 {
	left: 441px;
	top: 351px;
	-webkit-animation: MotionRotate1 .3s linear alternate;
	animation: MotionRotate1 .3s linear alternate;
}
.current .p15_3 {
	left: 791px;
	top: 350px;
	-webkit-animation: MotionRotate1 .4s linear alternate;
	animation: MotionRotate1 .4s linear alternate;
}

/*16*/
.current .p16_1 {
	left: 94px;
	top: 58px;	
	-webkit-animation: MotionY1 .5s alternate ;
	animation: MotionY1 .5s alternate ;
}
.current .p16_2 {
	left: 94px;
	top: 476px;
	-webkit-animation: MotionScale2 .2s linear, MotionScale3 5s .2s linear infinite reverse;
	animation: MotionScale2 .2s linear, MotionScale3 5s .2s linear infinite reverse;
}
.current .p16_3 {
	left: 706px;
	top: 204px;
	-webkit-animation: MotionX5 1.5s linear infinite;
	animation: MotionX5 1.5s linear infinite;
}

/*18*/
.current .p18_1 {
	left: 788px;
	top: 123px;
	-webkit-animation: MotionRotate1 .2s linear alternate;
	animation: MotionRotate1 .2s linear alternate;
}
.current .p18_2 {
	left: 148px;
	top: 129px;
	-webkit-animation: MotionY1 .5s alternate ;
	animation: MotionY1 .5s alternate ;
}
.current .p18_3 {
	left: 148px;
	top: 544px;
	-webkit-animation: MotionX5 1.5s linear infinite;
	animation: MotionX5 1.5s linear infinite;
}

/*19*/
.current .p19_1 {
	left: 482px;
	top: 328px;
	-webkit-animation: MotionX1 1s ease infinite alternate;
	animation: MotionX1 1s ease infinite alternate;
}