/*화살표 색*/
.component nav a {
	color: #000000;
}
.component nav a:hover::before {
	color: #533dff;
}

/*공통*/
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(50px 50px 50px rgba(0,0,0,0.1));
  filter: drop-shadow(50px 50px 50px 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: #000000;
	color: #fff;
	font-size: 15px;
	font-weight: bold;
	text-align: center;
	padding-top: 15px;
	box-sizing: border-box;
}

/*1*/
.current .p1_1 {
	left: 323px;
	top: 244px;
	-webkit-animation: MotionRotate4 3s infinite alternate;
	animation: MotionRotate4 3s infinite alternate;
}
.current .p1_2 {
	left: 648px;
	top: 81px;
	-webkit-animation: MotionY3 2s infinite alternate;
	animation: MotionY3 2s infinite alternate;
}
.current .p1_3 {
	left: 104px;
	top: 115px;
	-webkit-animation: MotionY2 .3s linear;
	animation: MotionY2 .3s linear;
}
.current .p1_4 {
	left: 118px;
	top: 175px;
	-webkit-animation: MotionScale1 .5s linear;
	animation: MotionScale1 .5s linear;
}
.current .p1_5 {
	left: 199px;
	top: 288px;
	-webkit-animation: MotionY3 .2s linear;
	animation: MotionY3 .2s linear;
}

/*2*/
.current .p2_1 {
	left: 113px;
	top: 118px;
	-webkit-animation: MotionX3 .2s linear;
	animation: MotionX3 .2s linear;
}
.current .p2_2 {
	left: 342px;
	top: 265px;
	-webkit-animation: MotionX4 1s linear infinite alternate;
	animation: MotionX4 1s linear infinite alternate;
}
.current .p2_3 {
	left: 223px;
	top: 541px;
	-webkit-animation: MotionY1 .4s linear;
	animation: MotionY1 .4s linear;
}

/*3*/
.current .p3_1 {
	left: 155px;
	top: 485px;
	-webkit-animation: MotionY2 .2s linear;
	animation: MotionY2 .2s linear;
}
.current .p3_2 {
	left: 477px;
	top: 486px;
	-webkit-animation: MotionX5 1.5s linear infinite;
	animation: MotionX5 1.5s linear infinite;
}

/*4*/
.current .p4_1 {
	left: 345px;
	top: 297px;
	-webkit-animation: MotionY2 .3s linear;
	animation: MotionY2 .3s linear;
}
.current .p4_2 {
	left: 425px;
	top: 193px;
	-webkit-animation: MotionY2 1s alternate infinite;
	animation: MotionY2 1s alternate infinite;
}
.current .p4_3 {
	left: 102px;
	top: 559px;
	-webkit-animation: MotionY1 .4s linear;
	animation: MotionY1 .4s linear;
}

/*5*/
.current .p5_1 {
	left: 470px;
	top: 102px;
	-webkit-animation: MotionX1 1s linear infinite alternate;
	animation: MotionX1 1s linear infinite alternate;
}
.current .p5_2 {
	left: 181px;
	top: 558px;
	-webkit-animation: MotionY1 .4s linear;
	animation: MotionY1 .4s linear;
}

/*6*/
.current .p6_1 {
	left: 743px;
	top: 141px;
	-webkit-animation: MotionX3 .3s linear alternate;
	animation: MotionX3 .3s linear alternate;
}
.current .p6_2 {
	left: 63px;
	top: 169px;
	-webkit-animation: MotionY2 1s alternate infinite;
	animation: MotionY2 1s alternate infinite;
}
.current .p6_3 {
	left: 392px;
	top: 460px;
	-webkit-animation: MotionX4 .4s linear;
	animation: MotionX4 .4s linear;
}

/*7*/
.current .p7_1 {
	left: 585px;
	top: 524px;
	-webkit-animation: MotionX3 .3s linear alternate;
	animation: MotionX3 .3s linear alternate;
}
.current .p7_2 {
	left: 719px;
	top: 348px;
	-webkit-animation: MotionY2 1s alternate infinite;
	animation: MotionY2 1s alternate infinite;
}
.current .p7_3 {
	left: 353px;
	top: 81px;
	-webkit-animation: MotionX4 .4s linear;
	animation: MotionX4 .4s linear;
}
.current .p7_4 {
	left: 64px;
	top: 410px;
	-webkit-animation: MotionX4 .2s linear;
	animation: MotionX4 .2s linear;
}

/*8*/
.current .p8_1 {
	left: 290px;
	top: 110px;
	-webkit-animation: MotionY2 .2s alternate;
	animation: MotionY2 .2s alternate;

}
.current .p8_2 {
	left: 279px;
	top: 290px;
	-webkit-animation: MotionX5 2s linear alternate infinite;
	animation: MotionX5 2s linear alternate infinite;
}
.current .p8_3 {
	left: 138px;
	top: 583px;
	-webkit-animation: MotionY1 .4s linear;
	animation: MotionY1 .4s linear;
}

/*9*/
.current .p9_1 {
	left: 386px;
	top: 112px;
	-webkit-animation: MotionY2 .2s alternate;
	animation: MotionY2 .2s alternate;
}
.current .p9_2 {
	left: 187px;
	top: 291px;
	-webkit-animation: MotionX5 2s linear infinite;
	animation: MotionX5 2s linear infinite;
}
.current .p9_3 {
	left: 637px;
	top: 291px;
	-webkit-animation: MotionX5 2s linear infinite;
	animation: MotionX5 2s linear infinite;
}
.current .p9_4 {
	left: 294px;
	top: 559px;
	-webkit-animation: MotionY1 .4s linear;
	animation: MotionY1 .4s linear;
}

/*10*/
.current .p10_1 {
	left: 284px;
	top: 93px;
	-webkit-animation: MotionY2 .2s alternate;
	animation: MotionY2 .2s alternate;
}
.current .p10_2 {
	left: 419px;
	top: 305px;
	-webkit-animation: MotionScale3 2s ease alternate infinite;
	animation: MotionScale3 2s ease alternate infinite;
}
.current .p10_3 {
	left: 237px;
	top: 515px;
	-webkit-animation: MotionY1 .4s linear;
	animation: MotionY1 .4s linear;
}

/*11*/
.current .p11_1 {
	left: 194px;
	top: 84px;
	-webkit-animation: MotionY2 .2s alternate;
	animation: MotionY2 .2s alternate;
}
.current .p11_2 {
	left: 328px;
	top: 209px;
	-webkit-animation: MotionY2 1s alternate infinite;
	animation: MotionY2 1s alternate infinite;
}
.current .p11_3 {
	left: 375px;
	top: 226px;
	-webkit-animation: MotionY3 1s alternate ;
	animation: MotionY3 1s alternate ;
}

/*12*/
.current .p12_1, .current .p13_1, .current .p13_1 {
	left: 244px;
	top: 75px;
	-webkit-animation: MotionY2 .2s alternate;
	animation: MotionY2 .2s alternate;
}
.current .p12_2, .current .p13_2, .current .p13_2 {
	left: 105px;
	top: 186px;
	-webkit-animation: MotionX3 .2s ease;
	animation: MotionX3 .2s ease;
}
.current .p12_3, .current .p13_3, .current .p13_3 {
	left: 105px;
	top: 437px;
	-webkit-animation: MotionX4 .5s ease;
	animation: MotionX4 .5s ease;
}
.current .p12_4, .current .p13_4, .current .p13_4 {
	left: 582px;
	top: 164px;
	-webkit-animation: MotionY2 .5s ease, MotionY3 2s ease-in-out 1s infinite;
	animation: MotionY2 .5s ease, MotionY3 2s ease-in-out 1s infinite;
}
.current .p12_5, .current .p13_5, .current .p13_5 {
	left: 952px;
	top: 503px;
	-webkit-animation: MotionY2 .5s ease, MotionY4 2s ease-in-out 1s infinite;
	animation: MotionY2 .5s ease, MotionY4 2s ease-in-out 1s infinite;
}

/*15*/
.current .p15_1 {
	left: 184px;
	top: 172px;
	-webkit-animation: MotionScale1 .5s linear;
	animation: MotionScale1 .5s linear;
}
.current .p15_2 {
	left: 123px;
	top: 160px;
	-webkit-animation: MotionRotate3 .2s linear, MotionScale3 .5s .2s linear reverse;
	animation: MotionRotate3 .2s linear, MotionScale3 .5s .2s linear  reverse;
}
.current .p15_3 {
	left: 157px;
	top: 239px;	
	-webkit-animation: MotionY2 .3s linear;
	animation: MotionY2 .3s linear;
}
.current .p15_4 {
	left: 385px;
	top: 384px;
	-webkit-animation: MotionScale2 .2s linear, MotionY3 1s .2s ease infinite alternate ;
	animation: MotionScale2 .2s linear, MotionY3 1s .2s ease infinite alternate ;
}