/*화살표 색*/
.component nav a {
	color: #8fdd6c;
}
.component nav a:hover::before {
	color: #178fff;
}

/*공통*/
body {
  background: url(../img/bg.jpg) center top no-repeat;
  overflow: hidden;
	margin: 0;
}
.character {
  position: fixed;
  bottom: 0;
  background: url(../img/character.png) center top no-repeat;
  width: 100%;
  height: 319px;
  z-index: 1000000000000;
	margin: 0;
	padding: 0;
}
.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: #8fdd6c;
	color: #000;
	font-size: 15px;
	font-weight: bold;
	text-align: center;
	padding-top: 15px;
	box-sizing: border-box;
}


/* -webkit-animation: MotionY2 .2s linear, MotionRotate3_1 2s linear .2s infinite;
animation: MotionY2 .2s linear, MotionRotate3_1 2s linear .2s infinite; */

/*1*/
.current .p1_1 {
	left: 958px;
	top: 617px;
	-webkit-animation: MotionY5 0.3s linear alternate;
	animation: MotionY5 0.3s linear alternate;
}
.current .p1_2 {
	left: 121px;
	top: 211px;
	-webkit-animation: MotionScale3 1s linear infinite alternate;
	animation: MotionScale3 1s linear infinite alternate;
}
.current .p1_3 {
	left: 517px;
	top: 242px;
	-webkit-animation: MotionY2 .2s linear alternate;
	animation: MotionY2 .2s linear alternate;
}
.current .p1_4 {
	left: 538px;
	top: 271px;
	-webkit-animation: MotionX8 1s  alternate;
	animation: MotionX8 1s  alternate;
}
.current .p1_5 {
	left: 540px;
	top: 481px;
	-webkit-animation: MotionY1 1s alternate;
	animation: MotionY1 1s alternate;
}

/*2*/
.current .p2_1 {
	left: 44px;
	top: 568px;
	-webkit-animation: MotionY2 .2s linear infinite alternate;
	animation: MotionY3 2s linear infinite alternate;
}
.current .p2_2 {
	left: 272px;
	top: 613px;
	-webkit-animation: MotionX8 1s  alternate;
	animation: MotionX8 1s  alternate;
}
/*3*/
.current .p3_1 {
	left: 44px;
	top: 527px;
	-webkit-animation: MotionY2 .2s linear infinite alternate;
	animation: MotionY3 2s linear infinite alternate;
}
.current .p3_2 {
	left: 227px;
	top: 570px;
	-webkit-animation: MotionX8 1s  alternate;
	animation: MotionX8 1s  alternate;
}

/*4*/
.current .p4_1 {
	left: 377px;
	top: 104px;
	-webkit-animation: MotionY1 .2s linear;
	animation: MotionY1 .2s linear;
}
.current .p4_2 {
	left: 44px;
	top: 568px;
	-webkit-animation: MotionY2 .2s linear infinite alternate;
	animation: MotionY3 2s linear infinite alternate;
}
.current .p4_3 {
	left: 277px;
	top: 613px;
	-webkit-animation: MotionX8 1s  alternate;
	animation: MotionX8 1s  alternate;
}

/*5*/
.current .p5_1 {
	left: 154px;
	top: 598px;
	-webkit-animation: MotionX1 1s linear infinite alternate;
	animation: MotionX1 1s linear infinite alternate;
}

/*6*/
.current .p6_1 {
	left: 436px;
	top: 238px;
	-webkit-animation: MotionScale3 2s linear infinite alternate;
	animation: MotionScale3 2s linear infinite alternate;
}
.current .p6_2 {
	left: 354px;
	top: 92px;
	-webkit-animation: MotionY1 .2s linear;
	animation: MotionY1 .2s linear;
}
.current .p6_3 {
	left: 329px;
	top: 478px;
	-webkit-animation: MotionX8 0.3s  alternate;
	animation: MotionX8 0.3s  alternate;
}
.current .p6_4 {
	left: 513px;
	top: 478px;
	-webkit-animation: MotionX8 0.6s  alternate;
	animation: MotionX8 0.6s  alternate;
}
.current .p6_5 {
	left: 696px;
	top: 478px;
	-webkit-animation: MotionX8 1s  alternate;
	animation: MotionX8 1s  alternate;
}

/*7*/
.current .p7_1 {
	left: 440px;
	top: 104px;
	-webkit-animation: MotionY1 .2s linear;
	animation: MotionY1 .2s linear;
}
.current .p7_2 {
	left: 229px;
	top: 407px;
	-webkit-animation: MotionY2 .2s linear infinite alternate;
	animation: MotionY3 2s linear infinite alternate;
}
.current .p7_3 {
	left: 106px;
	top: 534px;
	-webkit-animation: MotionX8 0.3s  alternate;
	animation: MotionX8 0.3s  alternate;
}
.current .p7_4 {
	left: 483px;
	top: 534px;
	-webkit-animation: MotionX8 0.6s  alternate;
	animation: MotionX8 0.6s  alternate;
}
.current .p7_5 {
	left: 854px;
	top: 554px;
	-webkit-animation: MotionX8 1s  alternate;
	animation: MotionX8 1s  alternate;
}

/*8*/
.current .p8_1 {
	left: 384px;
	top: 104px;
	-webkit-animation: MotionY1 .2s linear;
	animation: MotionY1 .2s linear;

}
.current .p8_2 {
	left: 252px;
	top: 555px;
	-webkit-animation: MotionY2 .2s linear infinite alternate;
	animation: MotionY3 2s linear infinite alternate;
}

/*9*/
.current .p9_1 {
	left: 265px;
	top: 104px;
	-webkit-animation: MotionY1 .2s linear;
	animation: MotionY1 .2s linear;
}
.current .p9_2 {
	left: 102px;
	top: 194px;
	-webkit-animation: MotionX8 0.3s  alternate;
	animation: MotionX8 0.3s  alternate;
}
.current .p9_3 {
	left: 449px;
	top: 194px;
	-webkit-animation: MotionX8 0.6s  alternate;
	animation: MotionX8 0.6s  alternate;
}
.current .p9_4 {
	left: 796px;
	top: 194px;
	-webkit-animation: MotionX8 1s  alternate;
	animation: MotionX8 1s  alternate;
}

/*10*/
.current .p10_1 {
	left: 493px;
	top: 205px;
	-webkit-animation: MotionX5 2s linear infinite;
	animation: MotionX5 2s linear infinite;
}
.current .p10_2 {
	left: 382px;
	top: 314px;
	-webkit-animation: MotionY2 .2s linear alternate;
	animation: MotionY2 .2s linear alternate;
}
.current .p10_3 {
	left: 285px;
	top: 340px;
	-webkit-animation: MotionX8 1s  alternate;
	animation: MotionX8 1s  alternate;
}