body{margin:0;padding:0;font-family:"Microsoft YaHei";background:#c4c2c3;}



.loading{position:absolute;width:100%;height:100%;z-index:1000;}
.suggest{position:fixed;bottom:0;width:100%;text-align:center;color:white;font-size:12px;}
.load_val{width:100%;}
.loading_line{width:60%;height:8px;position:absolute;left:23%;top:46%;background:#8cd5fd;border-radius:5px;}
.loading_line_blank{width:0%;height:100%;background: #00558e;border-radius:5px;}

.coypright{position:fixed;bottom:8%;width:100%;text-align:center;color:#00558e;font-size:16px;}

section{position:absolute;width:100%;height:100%;background-size:100% 100%;}
.swiper-container{position:absolute;width:100%;height:100%}
.swiper-slide{position:relative;overflow:hidden}
.swiper-slide *{position:absolute;opacity:0;background-size:100% 100%;}

#p0{background-image:url('../images/p0.jpg');}
#p0 .p1{background-image:url('../images/p0.1.png');width:100%;height:100%;}
#p0 .p2{background-image:url('../images/p0.2.png');width:100%;height:100%;}
#p0 .p3{background-image:url('../images/p0.3.png');width:100%;height:100%;}
#p0 .p4{background-image:url('../images/p0.4.png');width:13.8%;height:18.8%;top:60%;left:28%;}
#p0 .p5{background-image:url('../images/p0.5.jpg');width:100%;height:11%;bottom:0;}

#p1 .p3{width:65%;height:60%;}
.c1{background-image:url('../images/p1.jpg');}
.c1 .p1{background-image:url('../images/p1.1.png');width:100%;height:100%;}
.c1 .p2{background-image:url('../images/p1.2.png');width:100%;height:100%;}
.c1 .p3{top:10%;left:21%;}
.c2{background-image:url('../images/p2.jpg');}
.c2 .p1{background-image:url('../images/p2.1.png');width:100%;height:100%;}
.c2 .p2{background-image:url('../images/p2.2.png');width:100%;height:100%;}
.c2 .p3{top:10%;left:17%;}
.c3{background-image:url('../images/p3.jpg');}
.c3 .p1{background-image:url('../images/p3.1.png');width:100%;height:100%;}
.c3 .p2{background-image:url('../images/p3.2.png');width:100%;height:100%;}
.c3 .p3{top:7%;left:21%;}
.c4{background-image:url('../images/p4.jpg');}
.c4 .p1{background-image:url('../images/p4.1.png');width:100%;height:100%;}
.c4 .p2{background-image:url('../images/p4.2.png');width:100%;height:100%;}
.c4 .p3{top:15%;left:21%;}
.c5{background-image:url('../images/p5.jpg');}
.c5 .p1{background-image:url('../images/p5.1.png');width:100%;height:100%;}
.c5 .p2{background-image:url('../images/p5.2.png');width:100%;height:100%;}
.c5 .p3{top:7%;left:21%;}
.c6{background-image:url('../images/select.png');width:100%;height:40%;bottom:-2%;}

.c6 div{width: 45%;height: 11%;opacity: 1;}
.s1{top: 42%;left: 4%;}
.s2{top: 42%;right: 3%;}
.s3{top: 59%;left: 4%;}
.s4{top: 59%;right: 3%;}
.s5{top: 75%;left: 4%;}
.c6 .s6{top: 80%;right: 22%;background: url('../images/hand.png');background-size: 100% 100%;width: 6%;opacity: 0;}

.on{width:100%;height:100%;}

#p0.action .p1{animation: fadeInDown .6s ease both;-moz-animation: fadeInDown .6s ease both;-webkit-animation: fadeInDown .6s ease both;-o-animation: fadeInDown .6s ease both;}
#p0.action .p2{animation: fadeInRight .6s 1s ease both;-moz-animation: fadeInRight .6s 1s ease both;-webkit-animation: fadeInRight .6s 1s ease both;-o-animation: fadeInRight .6s 1s ease both;}
#p0.action .p3{animation: fadeIn 1s 1.5s ease-in both;-moz-animation: fadeIn 1s 1.5s ease-in both;-webkit-animation: fadeIn 1s 1.5s ease-in both;-o-animation: fadeIn 1s 1.5s ease-in both;}
#p0.action .p4{animation: fadeIn .5s 1.5s ease both;-moz-animation: fadeIn .5s 1.5s ease-in both;-webkit-animation: fadeIn .5s 1.5s ease both;-o-animation: fadeIn .5s 1.5s ease both;}
#p0.action .p5{animation: fadeInUp .5s 1.5s ease both;-moz-animation: fadeInUp .5s 1.5s ease both;-webkit-animation: fadeInUp .5s 1.5s ease both;-o-animation: fadeInUp .5s 1.5s ease both;}

#p1.action .on{opacity:1;}
#p1.action .on .p1{animation: flash 1s .5s ease both;-moz-animation: flash 1s .5s ease both;-webkit-animation: flash 1s .5s ease both;-o-animation: flash 1s .5s ease both;} 
#p1.action .on .p2{animation: fadeIn .5s 1.5s ease both;-moz-animation: fadeIn .5s 1.5s ease both;-webkit-animation: fadeIn .5s 1.5s ease both;-o-animation: fadeIn .5s 1.5s ease both;} 
#p1.action .on .p3{opacity: 1;}




#p1.action .c6{animation: fadeInUp .6s 1.5s ease both;-moz-animation: fadeInUp .6s 1.5s ease both;-webkit-animation: fadeInUp .6s 1.5s ease both;-o-animation: fadeInUp .6s 1.5s ease both;}
#p1.action .s6{animation: flash .6s 2.5s ease both;-moz-animation: flash .6s 2.5s ease both;-webkit-animation: flash .6s 2.5s ease both;-o-animation: flash .6s 2.5s ease both;}



.iframe,#camera{position:absolute;width:100%;height:100%;z-index:100;display:none;background:white;}
#iframe,#iframe1{width:100%;height:100%;}
.b1{position:fixed;bottom:5%;left:30%;width:40%;height:16.5%;background-image:url('../images/b1.png');background-size:100% 100%;}
.b2{position:fixed;bottom:5%;left:30%;width:40%;height:16.5%;background-image:url('../images/b2.png');background-size:100% 100%;}
.camera{width: 100%;height: 40%;}
.return{width: 100%;height: 40%;margin-top:20%;}


.replay{width:45%;height:8%;top:78%;left:27%;}
.share{width:45%;height:8%;top:88%;left:27%;}
#share img {width:40%;float:right;}
.link{height: 5%;width: 32%;top: 65%;left: 46%;}
.last{width:18%;height:4%;top:19%;left:31%;background:url('../images/last.png') no-repeat 0 0;background-size:100% 100%;}

#share{position:absolute;width:100%;height:100%;display:none;background:rgba(0,0,0,0.9);}
.bp{position:absolute;width:100%;height:40%;top:16%;}
#bigpic{position:absolute;width:100%;height:0%;display:none;overflow-x:auto;overflow-y:hidden;top:36%;left:50%;}
#bigpic img{height:100.5%;}
.close{position:fixed;right:5%;top:2%;z-index:1000;width:12%;height:7%;background:url('../images/close.png') no-repeat 0 0;background-size:100% 100%;}

@keyframes ear
{
	0%{background-image:url('../images/p0.a.png');}
	50%{background-image:url('../images/p0.b.png');}
	100%{background-image:url('../images/p0.a.png');}
}

@-moz-keyframes ear /* Firefox */
{
	0%{background-image:url('../images/p0.a.png');}
	50%{background-image:url('../images/p0.b.png');}
	100%{background-image:url('../images/p0.a.png');}
}

@-webkit-keyframes ear /* Safari บอ Chrome */
{
	0%{background-image:url('../images/p0.a.png');}
	50%{background-image:url('../images/p0.b.png');}
	100%{background-image:url('../images/p0.a.png');}
}

@-o-keyframes ear /* Opera */
{
	0%{background-image:url('../images/p0.a.png');}
	50%{background-image:url('../images/p0.b.png');}
	100%{background-image:url('../images/p0.a.png');}
}


@-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}}

@-webkit-keyframes coin{
	0%{opacity:0;-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
	20%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
	25%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
	40%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
	50%{opacity:1;-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
	80%{background-image:url('../images/p0.a.png');opacity:1;-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
	90%{background-image:url('../images/p0.b.png');opacity:1;-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
	100%{background-image:url('../images/p0.a.png');opacity:1;-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
}
@keyframes coin{
	0%{opacity:0;-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
	20%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
	25%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
	40%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
	50%{opacity:1;-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
	80%{background-image:url('../images/p0.a.png');opacity:1;-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
	90%{background-image:url('../images/p0.b.png');opacity:1;-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
	100%{background-image:url('../images/p0.a.png');opacity:1;-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
}

@-webkit-keyframes flash /* Safari บอ Chrome */
{
	0%{opacity:0;}
	20%{opacity:1;}
	40%{opacity:0;}
	60%{opacity:1;}
	80%{opacity:0;}
	100%{opacity:1;}
}