body{margin:0;padding:0;font-family:"Microsoft YaHei";}
.loading{position:absolute;width:100%;height:100%;background:url('../images/loading.jpg') no-repeat;background-size:100% 100%;}
.suggest{position:fixed;bottom:0;width:100%;text-align:center;color:white;font-size:12px;}
.load_val{width:100%;}
.loading_line{width:60%;height:3px;position:absolute;left:20%;top:50%;background:#011a39;}
.loading_line_blank{width:0%;height:100%;background:#5da4fc;}
.coypright{position:fixed;bottom:8%;width:100%;text-align:center;color:#333;font-size:16px;}

.music_blk{z-index:99999999999;position:absolute;left:10px;bottom:10px;}
.music{display:block;width:23px;height:23px;background:url('../images/music.png') no-repeat;background-size:23px 23px;}
.music_on{-webkit-animation:rotate 1.2s linear infinite;animation:rotate 1.2s linear infinite;}

section{position:absolute;width:100%;height:100%;display:none;background-size:100% 100%;}
.layer{position:absolute;width:100%;height:100%;background-size:100% 100%;}
.action{display:block;}
section div{position:absolute;top:0;left:0;width:100%;height:100%;background-size:100% 100%;}
li{list-style:none;margin:5%;width:90%;}

#p0{background-image:url('../images/p0.jpg');}
#p0 .w1{background-image:url('../images/p0.1.png');animation: fadeInDown .6s  ease-out both;-webkit-animation: fadeInDown .6s  ease-out both;}
#p0 .w2{background-image:url('../images/p0.2.png');animation: fadeInUp .6s  ease-out both;-webkit-animation: fadeInUp .6s  ease-out both;}
#p0 .w3{background-image:url('../images/p0.3.png');opacity:0;animation: flash 2.5s .8s ease-out infinite;-webkit-animation: flash 2.5s .8s ease-out infinite;}
#p0 .button{width:24%;height:15%;top:64%;left:40%;}

#p1{background-image:url('../images/p1.jpg');}
#p1 .w1{background-image:url('../images/p1.1.png');animation: fadeIn 1s ease-out both;-webkit-animation: fadeIn 1s  ease-out both;}
#p1 .w2{background-image:url('../images/p1.2.png');animation: fadeIn 1s 1s ease-out both;-webkit-animation: fadeIn 1s 1s ease-out both;}
#p1 .w3{background-image:url('../images/p1.3.png');animation: fadeIn 1s 2s ease-out both;-webkit-animation: fadeIn 1s 2s ease-out both;}
#p1 .w4{background-image:url('../images/p1.4.png');display:none;}
#p1 .w4 div{background-size:100% 100%;width:7%;height:15%;}
#p1 .w4 .flight{top:21%;left:31%;width:38%;height:6%;}
.fire1{transform:rotate(-190deg);top:39%;left:8%;animation: fire .6s infinite;-webkit-animation: fire .6s infinite;}
.fire2{transform:rotate(-184deg);top:36%;left:27%;animation: fire .8s infinite;-webkit-animation: fire .6s infinite;}
.fire3{transform:rotate(-180deg);top:36%;left:46.6%;animation: fire .7s infinite;-webkit-animation: fire .6s infinite;}
.fire4{transform:rotate(-176deg);top:36%;left:66%;animation: fire .6s infinite;-webkit-animation: fire .6s infinite;}
.fire5{transform:rotate(-170deg);top:39%;left:85%;animation: fire .8s infinite;-webkit-animation: fire .6s infinite;}
#p1 .w4 .fire{background:url('../images/fire.png') no-repeat;}
#p1 .button{width:40%;height:7%;top:72%;left:30%;}

#p2{background-image:url('../images/p2.jpg');}
#p2 .w1{background-image:url('../images/p2.1.png');animation: fadeIn .6s 1.8s ease-out both;-webkit-animation: fadeIn .6s 1.8s ease-out both;}
#p2 .w2{background-image:url('../images/p2.2.png');animation: fadeIn .6s .6s ease-out both;-webkit-animation: fadeIn .6s .6s ease-out both;}
#p2 .w3{background-image:url('../images/p2.3.png');animation: fadeIn .6s 1.2s ease-out both;-webkit-animation: fadeIn .6s 1.2s ease-out both;}
#p2 .w4{background-image:url('../images/p2.4.png');animation: fadeIn .6s ease-out both;-webkit-animation: fadeIn .6s ease-out both;}
#p2 .w5{background-image:url('../images/p2.5.png');animation: fadeIn .6s 2.4s ease-out both;-webkit-animation: fadeIn .6s 2.4s ease-out both;}
.school1{background-image:url('../images/p2-9.jpg');z-index:10;display:none;}
.school1 .p{background-image:url('../images/p2-10.png');}
.school2{background-image:url('../images/p2-3.jpg');z-index:10;display:none;}
.school2 .p{background-image:url('../images/p2-4.png');}
.school3{background-image:url('../images/p2-1.jpg');z-index:10;display:none;}
.school3 .p{background-image:url('../images/p2-2.png');}
.school4{background-image:url('../images/p2-5.jpg');z-index:10;display:none;}
.school4 .p{background-image:url('../images/p2-6.png');}
.school5{background-image:url('../images/p2-7.jpg');z-index:10;display:none;}
.school5 .p{background-image:url('../images/p2-8.png');}
.p .audio{width:42%;height:8%;top:31%;left:40%;}
.p .message{width:38%;height:5.5%;top:44%;left:31%;}
.p .return{width:38%;height:5.5%;top:51%;left:31%;}
.s{background-image:url('../images/share.png');z-index:20;display:none;}
.m{background-image:url('../images/message.jpg');z-index:15;display:none;}
.close{width:auto;height:auto;top:4%;left:84%;font-size:16px;z-index:16;}
.list{overflow:hidden;width:90%;height:60%;top:12%;left:5%;}
.list ul{padding:0;margin:0;color:#6d7d98;position:relative;top:0px;}
#mes{width:44.5%;height:4%;top:75%;left:26%;font-size:16px;position:absolute;}
.submit{width:48%;height:5%;top:82%;left:26%;}
.share{width:48%;height:5%;top:89%;left:26%;}

#p2 .button1{width:27%;height:5%;top:19%;left:46%;}
#p2 .button2{width:27%;height:5%;top:35%;left:71%;}
#p2 .button3{width:27%;height:5%;top:38%;left:30%;}
#p2 .button4{width:27%;height:5%;top:58%;left:17%;}
#p2 .button5{width:27%;height:5%;top:57%;left:60%;}

@keyframes flash
{
	0%{opacity:0;}
	15%{opacity:1;}
	30%{opacity:0;}
	45%{opacity:1;}
	85%{opacity:1;}
	100%{opacity:0;}
}


@-webkit-keyframes flash /* Safari บอ Chrome */
{
	0%{opacity:0;}
	15%{opacity:1;}
	30%{opacity:0;}
	45%{opacity:1;}
	85%{opacity:1;}
	100%{opacity:0;}
}
@keyframes fire
{
	0%{background-size:100% 100%;}
	50%{background-size:100% 100%;}
	100%{background-size:100% 100%;}
}


@-webkit-keyframes fire /* Safari บอ Chrome */
{
	0%{background-size:100% 100%;}
	50%{background-size:100% 90%;}
	100%{background-size:100% 100%;}
}


@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}
@-moz-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}
@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}

@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}
@-moz-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}
@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}


@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}
@-moz-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}
@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}

@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}
@-moz-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}
@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}

@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}
@-moz-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}
@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}

.pulse {-webkit-animation-name: pulse;animation-name: pulse}@-webkit-keyframes rotate {0% {-webkit-transform: rotate(0);transform: rotate(0);}100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}}@-webkit-keyframes shake {0%, 80%, 100% {-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}82%, 86%, 90%, 94%, 98% {-webkit-transform: translate3d(-15px, 0, 0);transform: translate3d(-15px, 0, 0);}84%, 88%, 92%, 96% {-webkit-transform: translate3d(15px, 0, 0);transform: translate3d(15px, 0, 0);}}@keyframes rotate {0 {-webkit-transform: rotate(0);-ms-transform: rotate(0);transform: rotate(0);}100% {-webkit-transform: rotate(360deg);-ms-transform: rotate(360deg);transform: rotate(360deg);}}