/* CSS Document */
html{ height:100%;}
body{ margin:0; padding:0; overflow:hidden;}
a{ text-decoration:none; color:#666;}
.box{min-height:833px;  margin:0 auto; width:640px; height:100%; position:absolute; overflow:hidden;}
.con div{ position:absolute; -webkit-animation-fill-mode: both;}
.fm_1{ bottom:-20px; -webkit-animation-name: fadeIn; -webkit-animation-duration: 2s;}
.fm_2{ bottom:0;-webkit-animation-delay: 1.5s;-webkit-animation-name: fadeIn;-webkit-animation-duration: 1s;}
.fm_3{ bottom:1%; left:50%; margin-left:-27px;}
.fm_4{ bottom:80px; left:330px; -webkit-animation-delay: 1.5s;-webkit-animation-name: fadeIn;-webkit-animation-duration: 1s;}
.fm_5{ bottom:20%; left:15px;-webkit-animation-name: fadeInLeft;-webkit-animation-delay: .5s;-webkit-animation-duration: 1s;}
.fm_6{ top:15%; left:150px;-webkit-animation-name: fadeInDown;-webkit-animation-delay: 1s;-webkit-animation-duration: 2s;}


.page1_1{ bottom:1%;-webkit-animation-name: fadeIn; -webkit-animation-duration: 2s;}


.page2_1{ top:13%; left:40px;-webkit-animation-name: fadeInDown;-webkit-animation-delay: .5s;-webkit-animation-duration:.5s;}
.page2_2{ bottom:0; left:15px;-webkit-animation-name: fadeInLeft;-webkit-animation-delay: 1s;-webkit-animation-duration:.5s;}



.page3_1{ bottom:0; left:15px;-webkit-animation-name: fadeInLeft;-webkit-animation-delay: 1s;-webkit-animation-duration:.5s;}
.page3_2{top:11%;-webkit-animation-name: fadeInRight;-webkit-animation-delay: .5s;-webkit-animation-duration:.5s;}

.page4_1{ bottom:20%; left:70px;-webkit-animation-name: fadeInRight;-webkit-animation-delay: 1s;-webkit-animation-duration:.5s;}
.page4_3{ top:13%; left:30px;-webkit-animation-name: fadeInLeft;-webkit-animation-delay: .5s;-webkit-animation-duration:.5s;}
.page4_4{ top:33%; left:200px;-webkit-animation-name: fadeInLeft;-webkit-animation-delay: .5s;-webkit-animation-duration:.5s;}


.li1{ width:203px; border-right:1px solid #d0d0d0;}
.li2{ width:292px; border-left:1px solid #f4f3f3; border-right:1px solid #d0d0d0;}
.li2 span{ display:inline-block; padding-top:4px;}
.li3{ width:140px; border-left:1px solid #f4f3f3;}
.li3 span{ display:inline-block; padding-top:20px;}
.np{left:20px;}
.c{ top:100px; left:8px;-webkit-animation-name: fadeInDown;-webkit-animation-delay: .5s;-webkit-animation-duration:.5s;}

.down_1{ position:relative;bottom:80px;left:570px;}	
.down_1 img{ position:absolute;}

.sound{ position:fixed; width:55px; height:41px; z-index:9999;  top: 129px; left:50%;    margin: 0 0 0 231px;background:url(../images/icon-sound-on-51x44.png) center center no-repeat; }
.sound1{ position:fixed; width:55px; height:41px; z-index:9999;  top: 129px;left:50%;margin: 0 0 0 231px; background:url(../images/icon-sound-off-51x44.png) center center no-repeat;}
@media screen and (min-height:970px){
	
html{ height:100%;}
body{ margin:0; padding:0; overflow:hidden;}
.box{  margin:0 auto; width:640px; height:100%; position:absolute;}
.con div{ position:absolute; -webkit-animation-fill-mode: both;}
.fm_1{ bottom:12%; -webkit-animation-name: fadeIn; -webkit-animation-duration: 2s;}
.fm_2{ bottom: 14%;-webkit-animation-delay: 1.5s;-webkit-animation-name: fadeIn;-webkit-animation-duration: 1s;}
.fm_3{ bottom:1%; left:50%; margin-left:-27px;}
.fm_4{bottom: 21.5%;left:330px; -webkit-animation-delay: 1.5s;-webkit-animation-name: fadeIn;-webkit-animation-duration: 1s;}
.fm_5{bottom: 29%; left:15px;-webkit-animation-name: fadeInLeft;-webkit-animation-delay: .5s;-webkit-animation-duration: 1s;}
.fm_6{ top:15%; left:150px;-webkit-animation-name: fadeInDown;-webkit-animation-delay: 1s;-webkit-animation-duration: 2s;}


.page1_1{ bottom:8%;-webkit-animation-name: fadeIn; -webkit-animation-duration: 2s;}
.np{left:20px;}

.page2_1{ top:15%; left:40px;-webkit-animation-name: fadeInDown;-webkit-animation-delay: .5s;-webkit-animation-duration:.5s;}
.page2_2{ bottom:10%; left:15px;-webkit-animation-name: fadeInLeft;-webkit-animation-delay: 1s;-webkit-animation-duration:.5s;}

.c{ top:160px; left:8px;-webkit-animation-name: fadeInDown;-webkit-animation-delay: .5s;-webkit-animation-duration:.5s;}




.page3_1{ bottom:10%; left:20px;-webkit-animation-name: fadeInLeft;-webkit-animation-delay: 1s;-webkit-animation-duration:.5s;}
.page3_2{top:15%;-webkit-animation-name: fadeInRight;-webkit-animation-delay: .5s;-webkit-animation-duration:.5s;}

.page4_1{ bottom:23%; left:70px;-webkit-animation-name: fadeInRight;-webkit-animation-delay: .5s;-webkit-animation-duration:.5s;}
.page4_3{ top:13%; left:30px;-webkit-animation-name: fadeInLeft;-webkit-animation-delay: 1s;-webkit-animation-duration:.5s;}

.li1{ width:203px; border-right:1px solid #999;}
.li2{ width:292px; border-left:1px solid #CCC; border-right:1px solid #999;}
.li2 span{ display:inline-block; padding-top:4px;}
.li3{ width:140px; border-left:1px solid #CCC;}
.li3 span{ display:inline-block; padding-top:20px;
	
	}
}