@charset "utf-8";
body{
	font-family:"Microsoft Yahei","SimSun";
	font-size:16px;
	color:#000;
	background:#fff;
	white-space: nowrap;
    overflow-x: scroll;
	overflow-y: hidden;
}

@media only screen and (max-height: 938px) { body{ font-size: 15px !important; } }
@media only screen and (max-height: 875px) { body{ font-size: 14px !important; } }
@media only screen and (max-height: 813px) { body{ font-size: 13px !important; } }
@media only screen and (max-height: 750px) { body{ font-size: 12px !important; } }
@media only screen and (max-height: 688px) { body{ font-size: 11px !important; } }
@media only screen and (max-height: 625px) { body{ font-size: 10px !important; } }

a{
	color:#c00;
}

a:hover{
	text-decoration: none;
	color: #e64048 !important;
}

.fw{
	color: #fff;
}

.fw a{
	color: #fff;
}

.fw a:hover{
	color: #dfdfdf !important;
}

img{
	display:block;
	max-height: 100%;
	max-width: 100%;
}

h1,h2,h3,h4,h5{
	font-family:"Microsoft Yahei","SimHei";
	overflow:hidden;
}

p,li{
	overflow:hidden;
}

table{
	font-size: 1em;
}

.photo{
	position: relative;
	overflow: hidden;
}

.photo img{
	width: 100%;
	height: 100%;
}

.photo p{
	position: absolute;
	left: 0px;
	bottom : 0px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.abs{
	position: absolute;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
	opacity: 1;
}

.abs0{
	position: absolute;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
	opacity: 0;
}

.abs i,.abs0 i{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0%;
	top: 0%;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
}

.music{
	position: fixed;
	right: 1em;
	top: 1em;
	width: 2.8em;
	height: 2.8em;
	cursor: pointer;
	z-index: 999;
}
.music.on{background:url(images/music-on.png) no-repeat; background-size:100% 100%;}
.music.off{background:url(images/music-off.png) no-repeat;background-size:100% 100%;}
.music img{display: inline-block;}
@-moz-keyframes music{from{ transform:rotate(-360deg); }to{ }}
@-o-keyframes music{from{ transform:rotate(-360deg); }to{ }}
@-webkit-keyframes music{from{ transform:rotate(-360deg); }to{ }}
@keyframes music{from{ transform:rotate(-360deg); }to{ }}
.music.on{
	animation:'music' 1.5s linear 0s infinite;
	-ms-animation:music 1.5s linear 0s infinite;
	-moz-animation:music 1.5s linear 0s infinite;
	-o-animation:'music' 1.5s linear 0s infinite;
	-webkit-animation:'music' 1.5s linear 0s infinite;
}

#page{
	position: relative;
	height: 100%;
}

#body-bg{
	max-width: none;
	height: 100%;
}

.body-bg{
	position: relative;
	display: inline-block;
	vertical-align: top;
	max-width: none;
	height: 100%;
}

#box{
	position: absolute;
	height: 100%;
	left: 0px;
	top: 0px;
	overflow-y: hidden;
}

.cover{
	width: 89.48%;
	height: 28.26%;
	right: 0%;
	bottom: 0%;
	background-image:url("images/cover.png");
	background-position: center bottom;
}

.part01 i{ background-image: url("images/part01.png"); }
.part02 i{ background-image: url("images/part02.png"); }
.part03 i{ background-image: url("images/part03.png"); }
.part04 i{ background-image: url("images/part04.png"); }
.part05 i{ background-image: url("images/part05.png"); }
.part06 i{ background-image: url("images/part06.png"); }
.part07 i{ background-image: url("images/part07.png"); }
.part08 i{ background-image: url("images/part08.png"); }
.en .part09 i{ background-image: url("images/part09-en.png"); }
.kr .part09 i{ background-image: url("images/part09-kr.png"); }
.en .part10 i{ background-image: url("images/part10-en.png"); }
.kr .part10 i{ background-image: url("images/part10-kr.png"); }
.part11 i{ background-image: url("images/part11.png"); }
.part12 i{ background-image: url("images/part12.png"); }
.en .part13 i{ background-image: url("images/part13-en.png"); }
.kr .part13 i{ background-image: url("images/part13-kr.png"); }
.en .part15 i{ background-image: url("images/part15-en.png"); }
.kr .part15 i{ background-image: url("images/part15-kr.png"); }
.part16 i{ background-image: url("images/part16.png"); }
.en .part17 i{ background-image: url("images/part17-en.png"); }
.kr .part17 i{ background-image: url("images/part17-kr.png"); }
.part18 i{ background-image: url("images/part18.png"); }
.en .part20 i{ background-image: url("images/part20-en.png"); }
.kr .part20 i{ background-image: url("images/part20-kr.png"); }
.en .part21 i{ background-image: url("images/part21-en.png"); }
.kr .part21 i{ background-image: url("images/part21-kr.png"); }
.en .part22 i{ background-image: url("images/part22-en.png"); }
.kr .part22 i{ background-image: url("images/part22-kr.png"); }
.part23 i{ background-image: url("images/part23.png"); }
.part24 i{ background-image: url("images/part24.png"); }
.en .part25 i{ background-image: url("images/part25-en.png"); }
.kr .part25 i{ background-image: url("images/part25-kr.png"); }
.en .part26 i{ background-image: url("images/part26-en.png"); }
.kr .part26 i{ background-image: url("images/part26-kr.png"); }
.en .part27 i{ background-image: url("images/part27-en.png"); }
.kr .part27 i{ background-image: url("images/part27-kr.png"); }
.en .part28 i{ background-image: url("images/part28-en.png"); }
.kr .part28 i{ background-image: url("images/part28-kr.png"); }
.en .part29 i{ background-image: url("images/part29-en.png"); }
.kr .part29 i{ background-image: url("images/part29-kr.png"); }
.en .part30 i{ background-image: url("images/part30-en.png"); }
.kr .part30 i{ background-image: url("images/part30-kr.png"); }
.part31 i{ background-image: url("images/part31.png"); }
.en .part33 i{ background-image: url("images/part33-en.png"); }
.kr .part33 i{ background-image: url("images/part33-kr.png"); }
.en .part34 i{ background-image: url("images/part34-en.png"); }
.kr .part34 i{ background-image: url("images/part34-kr.png"); }
.en .part35 i{ background-image: url("images/part35-en.png"); }
.kr .part35 i{ background-image: url("images/part35-kr.png"); }
.en .part36 i{ background-image: url("images/part36-en.png"); }
.kr .part36 i{ background-image: url("images/part36-kr.png"); }
.en .part37 i{ background-image: url("images/part37-en.png"); }
.kr .part37 i{ background-image: url("images/part37-kr.png"); }
.en .part38 i{ background-image: url("images/part38-en.png"); }
.kr .part38 i{ background-image: url("images/part38-kr.png"); }
.en .part39 i{ background-image: url("images/part39-en.png"); }
.kr .part39 i{ background-image: url("images/part39-kr.png"); }
.en .part40 i{ background-image: url("images/part40-en.png"); }
.kr .part40 i{ background-image: url("images/part40-kr.png"); }

.part01{ width: 2.3%; height: 12.8%; left: 0.5%; top: 0%; }
.part02{ width: 1.6%; height: 20.3%; left: 6.5%; top: 0%; }
.part03{ width: 2.8%; height: 18.1%; left: 2.3%; top: 75.0%; }
.part04{ width: 3.7%; height: 24.8%; left: 6.3%; top: 75.2%; }
.part05{ width: 1.5%; height: 46.5%; left: 9.6%; top: 53.4%; }
.part06{ width: 0.8%; height: 17.1%; left: 9.9%; top: 25.3%; }
.part07{ width: 3.0%; height: 14.8%; left: 8.5%; top: 85.2%; }
.part08{ width: 1.9%; height: 10.3%; left: 4.1%; top: 4.1%; }
.part09{ width: 5.7%; height: 60.1%; left: 2.0%; top: 14.9%; }
.part10{ width: 4.7%; height: 29.6%; left: 15.9%; top: 14%; }
.part11{ width: 2.2%; height: 21.7%; left: 20.0%; top: 2.4%; }
.part12{ width: 3.0%; height: 59.1%; left: 21.6%; top: 40.9%; }
.part13{ width: 7.6%; height: 29.6%; left: 23.0%; top: 8.4%; }
.part15{ width: 9.3%; height: 30.4%; left: 33.4%; top: 8.4%; }
.part16{ width: 4.0%; height: 64.9%; left: 33.9%; top: 35.1%; }
.part17{ width: 2.2%; height: 30.4%; left: 37.4%; top: 50%; }
.part18{ width: 2.2%; height: 40.9%; left: 39.1%; top: 41.0%; }
.part20{ width: 9.4%; height: 97.7%; left: 41.3%; top: 2%; }
.part21{ width: 7.9%; height: 100%; left: 50.1%; top: 0%; }
.part22{ width: 9.2%; height: 92.9%; left: 58.2%; top: 0%; }
.part23{ width: 2.1%; height: 30.4%; left: 67.1%; top: 6.4%; }
.part24{ width: 2.1%; height: 27.7%; left: 68.1%; top: 72.3%; }
.part25{ width: 2.6%; height: 22.4%; left: 68.2%; top: 40.5%; }
.part26{ width: 2.6%; height: 15.5%; left: 69.6%; top: 18.1%; }
.part27{ width: 2.4%; height: 20.4%; left: 71.1%; top: 69.6%; }
.part28{ width: 4.2%; height: 65.6%; left: 71.2%; top: 15.7%; }
.part29{ width: 2.9%; height: 16.7%; left: 75.2%; top: 14.4%; }
.part30{ width: 0.9%; height: 46.4%; left: 76.4%; top: 36.1%; }
.part31{ width: 2.8%; height: 50.9%; left: 77.7%; top: 35.2%; }
.part33{ width: 2.5%; height: 20.4%; left: 92.3%; top: 7.5%; }
.part34{ width: 2.9%; height: 56.9%; left: 93.1%; top: 29.6%; }
.part35{ width: 2.2%; height: 23.6%; left: 91.9%; top: 22.9%; }
.part36{ width: 3.1%; height: 42.7%; left: 91.7%; top: 56.1%; }
.part37{ width: 2.9%; height: 39.1%; left: 95.2%; top: 14.5%; }
.part38{ width: 1.5%; height: 31.5%; left: 95.4%; top: 46.0%; }
.part39{ width: 2.6%; height: 25.2%; left: 95.1%; top: 71.7%; }
.part40{ width: 1.6%; height: 15.1%; left: 98.0%; top: 82.9%; }

.drop1,
.drop2,
.drop3,
.drop4,
.drop5{
	width: 12%; height: 100%; left: 67.2%; top: 0%; transform: scale(0) translateZ(100em); z-index: 99;
}

.en .drop1{ background-image: url("images/drop1-bg-en.png"); }
.kr .drop1{ background-image: url("images/drop1-bg-kr.png"); }
.en .drop2{ background-image: url("images/drop2-bg-en.png"); }
.kr .drop2{ background-image: url("images/drop2-bg-kr.png"); }
.en .drop3{ background-image: url("images/drop3-bg-en.png"); }
.kr .drop3{ background-image: url("images/drop3-bg-kr.png"); }
.en .drop4{ background-image: url("images/drop4-bg-en.png"); }
.kr .drop4{ background-image: url("images/drop4-bg-kr.png"); }
.en .drop5{ background-image: url("images/drop5-bg-en.png"); }
.kr .drop5{ background-image: url("images/drop5-bg-kr.png"); }

.drop1 .close,
.drop2 .close,
.drop3 .close,
.drop4 .close,
.drop5 .close{
	width: 6.4%; height: 14.4%; right: 3%; top: 8.5%;
}

.en .drop1 .close,
.en .drop2 .close,
.en .drop3 .close,
.en .drop4 .close,
.en .drop5 .close{
	background-image: url("images/drop-close-en.png");
}

.kr .drop1 .close,
.kr .drop2 .close,
.kr .drop3 .close,
.kr .drop4 .close,
.kr .drop5 .close{
	background-image: url("images/drop-close-kr.png");
}

.drop1 .btn1{ width: 20%; height: 11.4%; left: 22%; top: 31.7%; }
.drop1 .btn2{ width: 20%; height: 11.4%; left: 15%; top: 50.6%; }
.drop1 .btn3{ width: 20%; height: 11.4%; left: 20%; top: 75.6%; }
.drop2 .btn1{ width: 16.3%; height: 16.6%; left: 22%; top: 64.9%; }
.drop2 .btn2{ width: 16.3%; height: 16.6%; left: 25%; top: 22.6%; }
.drop2 .btn3{ width: 16.3%; height: 16.6%; left: 42%; top: 32.1%; }

.drop1 .show1_1{ width: 45.9%; height: 92.5%; left: 46.4%; top: 1.4%; }
.drop1 .show1_2{ width: 54.0%; height: 76.4%; left: 43.0%; top: 17.2%; }
.drop1 .show1_3{ width: 59.8%; height: 89.2%; left: 41.3%; top: 7.6%; }
.drop2 .show2_1{ width: 49.2%; height: 79.2%; left: 42.3%; top: 19%; background-image: url("images/drop2-show1.png"); }
.drop2 .show2_2{ width: 55.3%; height: 79.2%; left: 39.3%; top: 19%; background-image: url("images/drop2-show2.png"); }
.drop2 .show2_3{ width: 47.0%; height: 79.2%; left: 43.4%; top: 19%; background-image: url("images/drop2-show3.png"); }

.en .drop1 .show1_1{ background-image: url("images/drop1-show1-en.png"); }
.kr .drop1 .show1_1{ background-image: url("images/drop1-show1-kr.png"); }
.en .drop1 .show1_2{ background-image: url("images/drop1-show2-en.png"); }
.kr .drop1 .show1_2{ background-image: url("images/drop1-show2-kr.png"); }
.en .drop1 .show1_3{ background-image: url("images/drop1-show3-en.png"); }
.kr .drop1 .show1_3{ background-image: url("images/drop1-show3-kr.png"); }

@keyframes move0{
	from{ transform: scale(0.8); }
	to{ opacity: 1; }
}
.part08{
	animation:'move0' 0.6s ease-in-out 0.5s forwards;
	-ms-animation:move0 0.6s ease-in-out 0.5s forwards;
	-moz-animation:move0 0.6s ease-in-out 0.5s forwards;
	-o-animation:'move0' 0.6s ease-in-out 0.5s forwards;
	-webkit-animation:'move0' 0.6s ease-in-out 0.5s forwards;
}
.part09{
	animation:'move0' 0.6s ease-in-out 1.0s forwards;
	-ms-animation:move0 0.6s ease-in-out 1.0s forwards;
	-moz-animation:move0 0.6s ease-in-out 1.0s forwards;
	-o-animation:'move0' 0.6s ease-in-out 1.0s forwards;
	-webkit-animation:'move0' 0.6s ease-in-out 1.0s forwards;
}
.active.part10,
.active.part11,
.active.part13,
.active.part15,
.active.part17,
.active.part20,
.active.part21,
.active.part22,
.active.part23,
.active.part24,
.active.part25,
.active.part26,
.active.part27,
.active.part28,
.active.part29,
.active.part30,
.active.part34{
	animation:'move0' 0.6s ease-in-out 0s forwards;
	-ms-animation:move0 0.6s ease-in-out 0s forwards;
	-moz-animation:move0 0.6s ease-in-out 0s forwards;
	-o-animation:'move0' 0.6s ease-in-out 0s forwards;
	-webkit-animation:'move0' 0.6s ease-in-out 0s forwards;
}
.active.part35{
	animation:'move0' 0.6s ease-in-out 0.1s forwards;
	-ms-animation:move0 0.6s ease-in-out 0.1s forwards;
	-moz-animation:move0 0.6s ease-in-out 0.1s forwards;
	-o-animation:'move0' 0.6s ease-in-out 0.1s forwards;
	-webkit-animation:'move0' 0.6s ease-in-out 0.1s forwards;
}
.active.part36{
	animation:'move0' 0.6s ease-in-out 0.2s forwards;
	-ms-animation:move0 0.6s ease-in-out 0.2s forwards;
	-moz-animation:move0 0.6s ease-in-out 0.2s forwards;
	-o-animation:'move0' 0.6s ease-in-out 0.2s forwards;
	-webkit-animation:'move0' 0.6s ease-in-out 0.2s forwards;
}
.active.part37{
	animation:'move0' 0.6s ease-in-out 0.3s forwards;
	-ms-animation:move0 0.6s ease-in-out 0.3s forwards;
	-moz-animation:move0 0.6s ease-in-out 0.3s forwards;
	-o-animation:'move0' 0.6s ease-in-out 0.3s forwards;
	-webkit-animation:'move0' 0.6s ease-in-out 0.3s forwards;
}
.active.part38{
	animation:'move0' 0.6s ease-in-out 0.4s forwards;
	-ms-animation:move0 0.6s ease-in-out 0.4s forwards;
	-moz-animation:move0 0.6s ease-in-out 0.4s forwards;
	-o-animation:'move0' 0.6s ease-in-out 0.4s forwards;
	-webkit-animation:'move0' 0.6s ease-in-out 0.4s forwards;
}
.active.part39{
	animation:'move0' 0.6s ease-in-out 0.5s forwards;
	-ms-animation:move0 0.6s ease-in-out 0.5s forwards;
	-moz-animation:move0 0.6s ease-in-out 0.5s forwards;
	-o-animation:'move0' 0.6s ease-in-out 0.5s forwards;
	-webkit-animation:'move0' 0.6s ease-in-out 0.5s forwards;
}

@keyframes move1{
	from{ transform: translateX(-2em); }
	to{ opacity: 1; }
}
.part01,
.part03{
	animation:'move1' 0.6s ease-in-out 0s forwards;
	-ms-animation:move1 0.6s ease-in-out 0s forwards;
	-moz-animation:move1 0.6s ease-in-out 0s forwards;
	-o-animation:'move1' 0.6s ease-in-out 0s forwards;
	-webkit-animation:'move1' 0.6s ease-in-out 0s forwards;
}

@keyframes move2{
	from{ transform: translateX(2em); }
	to{ opacity: 1; }
}
.part04,
.part06{
	animation:'move2' 0.6s ease-in-out 0s forwards;
	-ms-animation:move2 0.6s ease-in-out 0s forwards;
	-moz-animation:move2 0.6s ease-in-out 0s forwards;
	-o-animation:'move2' 0.6s ease-in-out 0s forwards;
	-webkit-animation:'move2' 0.6s ease-in-out 0s forwards;
}

@keyframes move3{
	from{ transform: translateY(-2em); }
	to{ opacity: 1; }
}

.part02,
.active.part18{
	animation:'move3' 0.6s ease-in-out 0s forwards;
	-ms-animation:move3 0.6s ease-in-out 0s forwards;
	-moz-animation:move3 0.6s ease-in-out 0s forwards;
	-o-animation:'move3' 0.6s ease-in-out 0s forwards;
	-webkit-animation:'move3' 0.6s ease-in-out 0s forwards;
}

@keyframes move4{
	from{ transform: translateY(2em); }
	to{ opacity: 1; }
}
.part05,
.active.part12,
.active.part16,
.active.part31{
	animation:'move4' 0.6s ease-in-out 0s forwards;
	-ms-animation:move4 0.6s ease-in-out 0s forwards;
	-moz-animation:move4 0.6s ease-in-out 0s forwards;
	-o-animation:'move4' 0.6s ease-in-out 0s forwards;
	-webkit-animation:'move4' 0.6s ease-in-out 0s forwards;
}

@keyframes move5{
	from{ opacity: 0; transform: scale(0); }
	to{ opacity: 1; transform: scale(1); }
}

.active.drop1,
.active.drop2,
.active.drop3,
.active.drop4,
.active.drop5{
	animation:'move5' 0.6s ease-in-out 0s forwards;
	-ms-animation:move5 0.6s ease-in-out 0s forwards;
	-moz-animation:move5 0.6s ease-in-out 0s forwards;
	-o-animation:'move5' 0.6s ease-in-out 0s forwards;
	-webkit-animation:'move5' 0.6s ease-in-out 0s forwards;
}

@keyframes move6{
	from{ opacity: 1; transform: scale(1); }
	to{ opacity: 0; transform: scale(0); }
}

.hide.drop1,
.hide.drop2,
.hide.drop3,
.hide.drop4,
.hide.drop5{
	animation:'move6' 0.6s ease-in-out 0s forwards;
	-ms-animation:move6 0.6s ease-in-out 0s forwards;
	-moz-animation:move6 0.6s ease-in-out 0s forwards;
	-o-animation:'move6' 0.6s ease-in-out 0s forwards;
	-webkit-animation:'move6' 0.6s ease-in-out 0s forwards;
}

@keyframes shake0{
	from{ }
	50%{ transform: scale(0.9); }
	to{ }
}
.part25 i,
.part27 i,
.part30 i,
.part33 i{
	animation:'shake0' 3.0s linear 0s infinite;
	-ms-animation:shake0 3.0s linear 0s infinite;
	-moz-animation:shake0 3.0s linear 0s infinite;
	-o-animation:'shake0' 3.0s linear 0s infinite;
	-webkit-animation:'shake0' 3.0s linear 0s infinite;
}
.part26 i,
.part29 i{
	animation:'shake0' 3.0s linear -1.5s infinite;
	-ms-animation:shake0 3.0s linear -1.5s infinite;
	-moz-animation:shake0 3.0s linear -1.5s infinite;
	-o-animation:'shake0' 3.0s linear -1.5s infinite;
	-webkit-animation:'shake0' 3.0s linear -1.5s infinite;
}

@keyframes shake1{
	from{ }
	50%{ transform: translateX(-1em); }
	to{ }
}
.part03 i{
	animation:'shake1' 3.0s linear 0s infinite;
	-ms-animation:shake1 3.0s linear 0s infinite;
	-moz-animation:shake1 3.0s linear 0s infinite;
	-o-animation:'shake1' 3.0s linear 0s infinite;
	-webkit-animation:'shake1' 3.0s linear 0s infinite;
}
.part04 i{
	animation:'shake1' 3.0s linear -1.5s infinite;
	-ms-animation:shake1 3.0s linear -1.5s infinite;
	-moz-animation:shake1 3.0s linear -1.5s infinite;
	-o-animation:'shake1' 3.0s linear -1.5s infinite;
	-webkit-animation:'shake1' 3.0s linear -1.5s infinite;
}

@keyframes shake2{
	from{ }
	50%{ transform: translateY(-1em); }
	to{ }
}
.part01 i,
.part06 i,
.part11 i{
	animation:'shake2' 3.0s linear 0s infinite;
	-ms-animation:shake2 3.0s linear 0s infinite;
	-moz-animation:shake2 3.0s linear 0s infinite;
	-o-animation:'shake2' 3.0s linear 0s infinite;
	-webkit-animation:'shake2' 3.0s linear 0s infinite;
}
.part02 i{
	animation:'shake2' 3.0s linear -1.5s infinite;
	-ms-animation:shake2 3.0s linear -1.5s infinite;
	-moz-animation:shake2 3.0s linear -1.5s infinite;
	-o-animation:'shake2' 3.0s linear -1.5s infinite;
	-webkit-animation:'shake2' 3.0s linear -1.5s infinite;
}

@keyframes move5{
	from{ opacity: 0; transform: scale(0) translateZ(100em); }
	to{ opacity: 1; transform: scale(1) translateZ(100em); }
}

.active.drop1,
.active.drop2,
.active.drop3,
.active.drop4,
.active.drop5{
	animation:'move5' 0.6s ease-in-out 0s forwards;
	-ms-animation:move5 0.6s ease-in-out 0s forwards;
	-moz-animation:move5 0.6s ease-in-out 0s forwards;
	-o-animation:'move5' 0.6s ease-in-out 0s forwards;
	-webkit-animation:'move5' 0.6s ease-in-out 0s forwards;
}