/*public*/
html,body,address,blockquote,div,dl,form,h1,h2,h3,h4,h5,h6,ol,p,pre,table,ul,dd,dt,li,tbody,td,th,thead,tr,button,object,a,abbr,b,em,i,img,samp,span,strong,sub,sup,tt,var,input,select{margin:0;padding:0}
input,button,img,fieldset{border:0;outline:none}
input,select{outline:none}
/* set image max width to 100% */
img,video{max-width:100%;height:auto;width:auto\9;/* ie8 */}
/* set html5 elements to block */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
html{height:100%;overflow:hidden;}
body{width:100%;height:100%;font:12px/1.5 'Microsoft Yahei',Arial,Helvetica,sans-serif;color:#2d2d2d;word-wrap:break-word;word-break:break-all;overflow:hidden}
body div,body p{margin:0 auto;word-break:normal;}
address,cite,dfn,em,var{font-style:normal}
var{font-family:Verdana,Arial}
sup{vertical-align:text-top}
sub{vertical-align:text-bottom}
a{color:#fff;text-decoration:none;outline:none}
a:hover{text-decoration:none}
/* list */
ul,ol{list-style:none}

/*Align*/
.alg_r{text-align:right}
.alg_c{text-align:center}

/*Border*/

/*float*/
.fl{float:left}
.fr{float:right}
.clear{clear:both}
.oFlow{overflow:hidden;zoom:1}

.animate{}
.top{top:-200%}
.left{left:-300%}

.page_01{position:relative;width:100%;height:100%;background:#1A232C url(../images/bg.jpg) bottom center no-repeat;background-size:100% 100%}
.lian{position:absolute;top:0;left:0;right:0;height:10%;background:url(../images/lian.png) bottom left repeat-x;display:none;z-index:999}
.share{position:absolute;top:0;right:30px;width:40%;background:url(../images/share.png) top right no-repeat;background-size:100%;height:150px;display:none;z-index:999}
#chuan{position:absolute;bottom:6%;left:15%;width:180px;z-index:998;display:none;}
.page_01 .wrap{display:none;width:100%;padding-top:80px}
.page_01 .wrap #p_top{z-index:998;text-align:center;}
.page_01 .wrap #p_top p{margin-top:30px;font-size:16px;color:#8b8178;text-align:left;padding-bottom:20px;text-indent:1em;width:494px}
.page_01 .wrap #p_top #logo{padding-top:3%}
.page_01 .wrap #p_top #logo img{margin:0 auto;width:35%}
.page_01 .wrap #p_top p.tips{margin-top:10px;text-indent:0;text-align:center}
.page_01 .wrap #start{z-index:999;cursor:pointer;width:15%;-webkit-transform: translate3d(0, 3000px, 0);transform: translate3d(0, 3000px, 0);}
.page_01 .wrap #start .inner{width:94%;padding-bottom:3%;text-align:center}
.page_01 .wrap.active #start{-webkit-animation: bounceInUp 1s;animation: bounceInUp 1s;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}


.xz{position:absolute;top:100%;z-index:998;}
.xz h1{width:40%;margin:0 auto;text-align: center;margin-bottom:8%;}
.xz ul{position:relative;width:1200px;height:380px;background:url(../images/xz_bg.png) center no-repeat;background-size:100%;overflow:hidden;margin:0 auto;}
.xz li{position:absolute;width:92px;cursor:pointer}
#item01{top:62px;}


.page_02{position:relative;width:100%;height:100%;background:#1A232C url(../images/bg1.jpg) bottom no-repeat;background-size:100% 100%;filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;}
.main{width:800px;height:100%}
.main #con{position:relative;width:100%;height:100%}
.main #con li{position:absolute;padding:3% 0;width:100%;-webkit-transition: all 0.5s;transition: all 0.5s;left:0;top:150%;color:#000;font-size:1.3em;letter-spacing:1px;z-index:99999}
.main #con .haveimg .haveimg_pho{height:auto;overflow:hidden;zoom:1;}
.main #con .haveimg{overflow:hidden;zoom:1;}
.main #con .haveimg p{width:25%;float:left;text-align:center;padding:0px}
.main #con .haveimg p.ask{background:transparent;border-bottom:0px}
.main #con .haveimg p.btn{float:right;padding-right:10%;padding-top:30px}
.main #con .haveimg .haveimg_pho li{position:static;float:left;width:25%;text-align:center;}
.main #con .haveimg .haveimg_pho li img{width:70%;margin:0 auto}
.main .cup{width:250px;text-align:center;padding-top:3%}
.main #con li h1{padding-bottom:1%;color:#fff;font-family:"微软雅黑";font-weight:300;font-size:28px}
.main #con li.pFouc{top:2%;}
.main #con li p{padding:10px 20px;line-height:40px;margin:10px 5%;cursor:pointer;font-size:1.5em;color:#515151;width:90%;}
.main #con li p.ask.seled{color:#000;background-color:#FFEAA6;border-radius:8px}
.main #con li p.ask{color:#003647;background-color:#fff;border-radius:8px}
.main #con li p.btn{background:none;float:none;margin:30px auto 0;}
.main #con li.pFouc .place{text-align:center;}
.main #con li.pFouc .place img{width:35%} 
#tap{position: absolute;top:50%;right:0;margin-top:-170px;width:300px;height:340px;background:url(../images/tap.png) center no-repeat;background-size:100%}
#tap .inner{position:relative;width:100%;height:100%;cursor:pointer}
#tap .inner span{display:inline-block;position:absolute;bottom:18.5%;left:38.88888889%;width:11.111111111%}
#process{position:absolute;right:0;bottom:10px;width:50%}
#process #boy{width:10%;margin-right:5%}

#result{position:absolute;top:12%;width:100%;display:none;z-index:900}
#result h1{width:50%;margin:0 auto;text-align:center;font-size:60px;color:#AECFEC}
#result h1 p{font-size:18px;text-align:center;margin-top:20px;}
#result h1 var,#result h1 img{vertical-align:middle}
#result #img{width:24%}
#result #img img{transition: all 0.4s linear;transform: scale(3)}
#result #img img.nor{transform: scale(1)}
#result .btm ul{list-style:none;overflow:hidden;display:block;width:18%;margin:0 auto}
.bq{text-align:center;color:#fff;padding-top:10px}
/*#result .btm ul li{float:left;width:50%}*/

#share{width: 40%;text-align:center;padding-top:20px}

#clouds{position:absolute;top:10%;left:0;right:0;bottom:0;background:url(../images/clouds.png) repeat-x top left;z-index:100}


.next{display:none;}
.btn{text-align:center;clear:both}

.footer{position:absolute;left:0;right:0;bottom:2%;padding:20px;text-align:center;color:#414243;z-index:999}
.footer p{line-height: 25px}
.footer p a{color:#414243}

.re_img{width:50%;margin-top:-30px;text-align:center}
#re_txt{font-size:20px;color:#fff;margin:10px 0}
#re_txt p a{color:#fff}
#re_txt span{font-size:40px;color:#fff;font-weight:600;}
.re_btn{width:120px;height:45px;line-height:40px;background:url(../images/re_til_bg.png) top center no-repeat;text-align:center;font-size:20px;font-weight:bold;color:#fff;margin-top:0;cursor:pointer;background-size:100% 100%}
.daan{width:120px;text-align:center;cursor:pointer;margin-top:10px}
.daan a{display:block;color:#6a3906;}
#bom{position:absolute;bottom:-1%;left:50%;width:60%;margin-left:-30%;text-align:center;}
#ewm{width:15%;padding:2%;background:#fff;display:none}
.ewm{padding:5px 0;}
.ewm .ewm_img{width:7%;margin:0 auto;}
.ewm .ewm_img img{width:100%}
.ewm p{font-size:12px;color:#fff;text-align:center;}

@-webkit-keyframes bounceInUp {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
            transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
            transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
            transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
            transform: translate3d(0, -5px, 0);
  }

  100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInUp {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
            transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
            transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
            transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
            transform: translate3d(0, -5px, 0);
  }

  100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}



@media screen and (max-width: 1920px) {
	.main #con li{font-family:'Microsoft Yahei';}
	.page_01 .wrap #start{margin-top:60px}
	}
	@media screen and (max-width: 1366px) {
	.page_01 .wrap #start{width:20%;}
	.main #con li p{font-size:1.4em;line-height:40px}
  .page_01 .wrap #p_top p{margin-top:10px;width:494px}
  .page_01 .wrap #p_top #logo{width:100%;text-align:center}
  #result .btm ul{width:24%}
	}

	@media screen and (max-width: 1280px) {
		.page_01 .wrap{width:100%}
		}
	@media screen and (max-width: 1024px) {
		.main{width: 90%}
		.main #con li{font-size:1em;padding:0px 0px;}
    .main .cup{padding-top:6%}
		#share{width:100%}
		#result #img{width:24%;margin-top:0}
		#result h1{font-size:30px}
    .share{height:100px;}
    #result{top:5%}
    #result .btm ul{width:28%}
    .page_01 .wrap{padding-top:30px}
    .page_01 .wrap #p_top{margin:0 auto}
    .page_01 .wrap #p_top #logo img{width:55%}
    .main .cup{width:300px}
    .re_img{margin-top:-90px}
	}
@media screen and (max-width: 970px) {
	#result #img{width:30%;margin-top:0}
	#tap{margin-top: -110px;width: 200px;height: 220px}
	#chuan{width:10%}
  #result .btm ul{width:32%}
  .main #con li h1{font-size: 26px}
}
@media screen and (max-width: 750px) {
  #result #img{width:30%;margin-top:0}
  #tap{margin-top: -110px;width: 200px;height: 220px}
  #chuan{width:10%}
  #result .btm ul{width:42%}

}
@media screen and (max-width:600px) {
  .page_01{background:#1A232C url(../images/bg_pho.jpg) bottom center no-repeat;background-size:100% 100%}
  .page_02{background:#1A232C url(../images/bg1_pho.jpg) bottom center no-repeat;background-size:100% 100%}
	.page_01 .wrap #start{width:24%;margin-top:80px}
	.page_01 .wrap #p_top{width:95%;}
	.page_01 .wrap #p_top p{font-size:14px;margin:8px;width:95%}
  .page_01 .wrap #p_top #logo{width:100%;text-align:center}
  .main{padding-top:10px}
	.main #con li{font-family:"Microsoft Yahei";letter-spacing:1px;}
  .main .cup{width:65%;top:3%}
	.main #con li p.btn{margin-top:10px;background:none}
	.main #con li p.ask.seled{color:#000}
	.main #con li p.ask{width:80%}
	.main #con li p.fl{padding-left:10%;}
	.main #con li p.fr{padding-right:10%;}
	.main #con li h1{font-size:16px}
	.main #con li p{font-weight:bold;font-size:14px;line-height:16px;}
	#result h1{width:50%;}
	#result h1 p{font-size:14px}
	.re_img{width:90%;display:block;overflow:hidden;zoom:1;margin-top:0px}
	#result #img{width:40%;float:left}
  .footer{padding:0;}
  .footer p{line-height:20px}
  #re_txt{margin:15px 0;font-size:20px}
  #re_txt div{width:95%}
  #re_txt span{font-size:30px}
  #re_txt p{font-size:14px}
  #result{top:18%}
  .share{height:150px;width:80px}
  #result .btm ul{width:94%}
  .next img{width:35%}
  .main #con .haveimg p.btn{padding-top:10px;}
  .page_01 .wrap #p_top #logo img{width:100%}
  .daan{width:80px}
  .ewm{display:none}
	}
@media screen and (max-height:480px) {
  .share{width:60px}
  .main #con li{padding:0%;}
  .main #con li h1{font-size:14px;padding-bottom:20px}
  .page_01 .wrap #p_top p{font-size:12px;margin:10px;}
  #result{top:11%;}
  .re_btn{margin-top:0px}
  #re_txt{margin:0;font-size:16px}
  #re_txt span{font-size:22px}
  .main #con .haveimg p.btn{padding-top:0px;}
  .page_01 .wrap #start{width:24%;margin-top:20px}
  #re_txt div{width:95%}
  #re_txt p{font-size:12px}
  .main #con li p.btn .next img{margin:0 auto}
  .daan{width:60px}
	}