@charset "utf-8";
*{ margin:0; padding:0; list-style:none;}
*{ 
	-webkit-tap-highlight-color: transparent;
	-webkit-tap-highlight-color: rgba(0,0,0,0); 
	-webkit-appearance: none; 
	-webkit-touch-callout: none;
	-webkit-user-select: none;
}
body{width:100%;height:100%}
.page{position:absolute;top:0px;width: 960px;height: 640px;overflow: hidden;}
#page0{background:url(../image/page0_bg.png);background-size: 100% 100%;}
.logo{padding-left: 23%;width: 54%;padding-top: 2%;height: 50%;}
.logo img{width:100%;height:100%}
#page1{display:none;background:url(../image/page1_bg.png);background-size: 100% 100%;}
.div_tr{width:100%;display:inline-block;}
.tempdiv{position:absolute;text-align: center;}
#title div{width:100%;height:100%;margin-top:13%}
#page1_back div{width:100%;height:100%;margin-top:36%;text-align: center;}
.tempdiv img{padding-top: 4%;}
#page5{display:none}
#music_btn{width:5%;position:absolute;top:5%;right:3%;z-index: 10;}
#music_btn img{width:100%}
.start{padding-top: 2%;text-align: center;}
.start img{height:20%}
.menu{width:100%;position:absolute;}
.menuleft{width:20%;float:left;padding-left: 27%;}
.menuleft img{width:100%}
.menuright{width:20%;float:right;padding-right: 27%;}
.menuright img{width:100%}
#page2{display:none;background:url(../image/page2_bg.png);}
#bar{background:url(../image/jindutiao1.png);position: fixed;bottom: 22px;left: 224px;background-size: 100% 100%;width:386px;height:72px}
#bar img{margin-left:-360px; -webkit-transition: all .5s ease-in-out 0s;-o-transition: all .5s ease-in-out 0s;-moz-transition: all .5s ease-in-out 0s;transition: all .5s ease-in-out 0s;}
#title{position: absolute;top: 62px;left: 22px;}
#morebtn{position: fixed;left: 38px;bottom: 16px;}
#morebtn0{position: fixed;left: 38px;bottom: 16px;}
.barout{margin-left: 13px;margin-top: 11px;overflow: hidden;border-radius: 30px;}
#nextbtn{position: fixed;right: 38px;bottom: 16px;display:none}
#photo{position: fixed;right: 38px;bottom: 16px;display:block}
#main{position: absolute;width:960px;height:640px;-webkit-transform-origin:0 0;transform-origin:0 0;}
.shuye{position:absolute;}
#shuye0{left:600px;top:286px}
#shuye1{left:600px;top:340px}
#shuye2{left:566px;top:420px}
#shuye3{left:500px;top:286px}
#shuye4{left:500px;top:340px}
#shuye5{left:466px;top:420px}
#tool{position:fixed;left: 790px;top: 400px;z-index: 20;-webkit-transition: all 0s ease-in-out 0s;-o-transition: all 0s ease-in-out 0s;-moz-transition: all 0s ease-in-out 0s;transition: all 0s ease-in-out 0s;}
#soap{position:absolute;left: 394px;top: 59px;}
#shuizi{position:absolute;left: 394px;top: 59px;}
#canvas_head{position:absolute;left: 0px;top: 0px;}
.dress{position:absolute;left: 394px;top: 0px;}
#dressMenu{position:absolute;top: 300px;left: 25px;display:none}
.menu0{float: left;width: 120px;position: initial;}
.menu1{float: left;width: 120px;position: initial;margin-left: 36px;}
#page3{background:url(../image/page2_bg.png);background-size: 100% 100%;display:none}
#eatMenu{position: absolute;left: 120px;bottom: 40px;width: 660px;display:none}
#eatfood{position: absolute;left: 415px;top: 294px;display:none}
#wantfood{position: absolute;left: 600px;top: 10px;display:none}
#gomain{position: fixed;left: 200px;bottom: 16px;}
#gomain1{position: absolute;left: 38px;bottom: 16px;}
.photokuang{position: fixed;left: 305px;top: 145px;background:url(../image/xiangkuang.png);width:351px;height:357px;display:none;background-size: 100% 100%;}
.photokuang div{  background: url(../image/photobg.png);width: 320px;height: 320px;background-size: 100% 100%;margin-left: 16px;margin-top: 15px;border-radius: 14px;}
.photoimg{width: 240px;margin-left: 46px;margin-top: 46px;}
#page4{background:url(../image/xiangce.png);background-size: 100% 100%;display:none}
#gallerytu{position: absolute;left: 346px;top: 16px;}
#photokuang0{display:block;left: 80px;}
#photokuang1{display:block;left: 530px;}
.backcolor{  position: absolute;left: 0px;top: 114px;width: 100%;height: 412px;background-color: rgba(0, 0, 0, 0.4);}
#left{position: absolute;left: 368px;bottom: 22px;}
#right{position: absolute;left: 500px;bottom: 22px;}
#chooseqiu{position: absolute;left: 240px;bottom: 300px;-webkit-transition: all .4s ease-in-out 0s;-o-transition: all .4s ease-in-out 0s;-moz-transition: all .4s ease-in-out 0s;transition: all .4s ease-in-out 0s;display:none}
#qiuyinying{position: absolute;left: 240px;bottom: 150px;-webkit-transition: all .4s ease-in-out 0s;-o-transition: all .4s ease-in-out 0s;-moz-transition: all .4s ease-in-out 0s;transition: all .4s ease-in-out 0s;display:none;-webkit-transform:scale(0.1);transform:scale(0.1)}
#xin0{position: absolute;left: 410px;top: 250px;display:none;-webkit-animation: xinfun  1.8s linear 0.5s;animation: xinfun  1.8s linear 0.5s;opacity:0}
#xin1{position: absolute;left: 353px;top: 202px;display:none;-webkit-animation: xinfun  1.8s linear 1s;animation: xinfun  1.8s linear 1s;opacity:0}
#xin2{position: absolute;left: 400px;top: 220px;display:none;-webkit-animation: xinfun  1.8s linear 0s;animation: xinfun  1.8s linear 0s;opacity:0}
#xin3{position: absolute;left: 370px;top: 210px;display:none;-webkit-animation: xinfun  1.8s linear 1.5s;animation: xinfun  1.8s linear 1.5s;opacity:0}
#xin4{position: absolute;left: 390px;top: 202px;display:none;-webkit-animation: xinfun  1.8s linear 2s;animation: xinfun  1.8s linear 2s;opacity:0}
/* #xin1{position: absolute;    left: 411px;
    top: 136px;display:none}
#xin2{position: absolute;    left: 347px;
    top: 73px;display:none} */
#saved{position: fixed;left: 354px;top: 18px;display:none}
#phone{  background-color: rgb(199,48,102);z-index: 100;position: absolute;top: 0;left: 0;width: 100%;height: 100%;display:none}
.imgbox{text-align: center;}
.box0{margin-top: 5%;}
.box1{margin-top: 30%;}
.box2{  position: absolute;bottom: 5%;width: 100%;}
@-webkit-keyframes xinfun
{
    0%   { -webkit-transform: translate(0px, 0px) scale(1);opacity:0}
	20%   { -webkit-transform: translate(-40px, -44px) scale(0.75);opacity:1}
	40%   { -webkit-transform: translate(0px, -88px) scale(0.5); }
	60%   { -webkit-transform: translate(-40px, -132px) scale(0.25);}
	80%   { -webkit-transform: translate(0px, -176px) scale(0.5); }
    100% { -webkit-transform: translate(-40px, -220px) scale(0.75);}
}
@keyframes xinfun
{
    0%   { transform: translate(0px, 0px) scale(1);opacity:0}
	20%   { transform: translate(-40px, -44px) scale(0.75);opacity:1}
	40%   { transform: translate(0px, -88px) scale(0.5); }
	60%   { transform: translate(-40px, -132px) scale(0.25);}
	80%   { transform: translate(0px, -176px) scale(0.5); }
    100% { transform: translate(-40px, -220px) scale(0.75);}
}