/*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 '微软雅黑',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{display:table;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:table-cell;vertical-align:middle;width:100%;filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;}
.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}
.page_01 .wrap #p_top #logo p{text-align:center;font-size:18px;color:#fff;padding:0}
.page_01 .wrap #p_top #logo img{margin:0 auto;width:640px}
.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%;margin-top:2%;-webkit-transform: translate3d(0, 3000px, 0);transform: translate3d(0, 3000px, 0);opacity:0}
.page_01 .wrap #start p{text-align:center;color:#fff;font-size:20px;padding-bottom:5px}
.page_01 .wrap #start .inner{width:85%;text-align:center}
.page_01 .wrap #start .inner #wd{width:36%}
.page_01 .wrap.active #start{-webkit-animation: bounceInUp 1s;animation: bounceInUp 1s;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);opacity:1}
.page_01 .link{text-align:center;}
.page_01 .link ul{overflow:hidden;zoom:1;width:300px;margin:0 auto}
.page_01 .link ul li{float:left;width:25%;padding-top:5%}
.page_01 .link ul li p{color:#fff;padding-bottom:5px}
.page_01 .link ul .link_r{float:right}
.page_01 .link ul a{display:inline-block}

.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:900px;height:100%}
.main #con{position:relative;width:100%;height:100%}
.main #con li{position:absolute;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:268px;text-align:center;padding-top:8%}
.main #con li h1{padding-bottom:2%;color:#fff;font-family:"微软雅黑";font-weight:300}
.main #con li.pFouc{top:0;}
.main #con li p{padding:10px 20px;line-height:40px;margin-bottom:10px;cursor:pointer;font-size:1.7em;color:#515151}
.main #con li p.ask.seled{color:#fff;background-color:#e25858;border-radius:8px}
.main #con li p.ask{color:#003647;background-color:#dfdfdf;border-radius:8px}
.main #con li p.btn{background:none}
#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:20%;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}
/*#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}

.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:0;text-align:center}
#re_txt{font-size:24px;color:#515151;margin:50px 0}
#re_txt span{font-size:30px;color:#fff;font-weight:200;}
.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:30px;font-weight:bold;color:#FFDFBD;margin-top:0;cursor:pointer;background-size:100% 100%}
.daan{width:120px;height:45px;line-height:40px;background:url(../images/re_til_bg.png) top center no-repeat;text-align:center;font-size:30px;font-weight:bold;color:#FFDFBD;margin-top:0;cursor:pointer;background-size:100% 100%;margin-top:10px}
.daan a{display:block;color:#FFDFBD;}
#bom{position:absolute;bottom:1%;left:60%;width:40%;margin-left:-30%;text-align:center;}
#ewm{width:15%;padding:2%;background:#fff;display:none}

.mask{position:absolute;top:0;left:0;display:none;width:100%;height:100%;background:#000;fiter:alpha(opacity=50);opacity:0.5;z-index:9998}
.share_box{position:absolute;top:50%;left:50%;display:none;width:250px;height:280px;margin-left:-125px;margin-top:-140px;z-index:9999;background:#fff;-webkit-box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.6);-webkit-border-radius: 3px;-webkit-tap-highlight-color: rgba(255, 255, 255, 0);}
.share_box li{display:block;padding:0px 10px;overflow:hidden;border-bottom:1px dashed #e8e8e8;font-size:16px;}
	.share_box li.alg_c{line-height:50px;border:none;font-size:18px;letter-spacing:10px;cursor:pointer}
.share_box .bdshare-button-style1-32 a{float:none;display:block;width:60%;text-align:left;padding-left:50px;text-indent:0;color:#666}


.copyright{margin-top:2%;text-align:center;color:#fff;font-size:14px}

@-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:1366px){.page_01 .wrap #start{width:20%}
	.main #con li p{font-size:1.4em;line-height:30px}
	.page_01 .wrap #p_top #logo p{margin-top:10px}
	.page_01 .wrap #p_top #logo{width:100%;text-align:center}
	#result .btm ul{width:24%}
	.page_01 .wrap #p_top #logo{width:35%}
	.main #con li h1{font-size:24px}
}
@media screen and (max-width:1024px){.main{width:90%}
	.main #con li{padding:0;font-size:1em}
	.main .cup{padding-top:5%}
	#share{width:100%}
	#result #img{margin-top:0;width:24%}
	#result h1{font-size:30px}
	.share{height:100px}
	#result{top:15%}
	#result .btm ul{width:28%}
	.page_01 .wrap #p_top{margin:0 auto}
}
@media screen and (max-width:970px){#result #img{margin-top:0;width:30%}
	#tap{margin-top:-110px;width:200px;height:220px}
	#chuan{width:10%}
	#result .btm ul{width:32%}
}
@media screen and (max-width:750px){#result #img{margin-top:0;width:30%}
	#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:url(../images/bg_pho.jpg) center no-repeat;background-size: 100% 100%}
	.page_02{background:url(../images/bg1_pho.jpg) center no-repeat;background-size: 100% 100%}
	.page_01 .wrap #start{width:60%}
	.page_01 .wrap #p_top{width:90%}
	.page_01 .wrap #p_top #logo p{margin:8px;width:95%;font-size:14px}
	.page_01 .wrap #p_top #logo{width:100%;text-align:center}
	.main #con li{letter-spacing:1px;font-family:"微软雅黑"}
	.main .cup{width:60%;padding-top:3%}
	.main #con li p.btn{margin-top:10px;background:0}
	.main #con li h1{font-size:16px}
	.main #con li p{padding:10px;font-weight:bold;font-size:14px;line-height:14px}
	#result h1{width:60%}
	#result h1 p{font-size:14px}
	.re_img{display:block;overflow:hidden;width:90%;zoom:1}
	#result #img{float:left;width:40%}
	.footer{padding:0}
	.footer p{line-height:20px}
	#re_txt{margin:15px 0;font-size:20px}
	#re_txt span{font-size:20px;text-indent:2em}
	#result{top:20%}
	.share{height:150px}
	#result .btm ul{width:94%}
	.main #con .haveimg p{width:50%}
	.main #con .haveimg p img{width:50%}
	.next img{width:30%}
	.main #con .haveimg p.btn{padding-top:10px}
	.page_01 .link ul{width:80%}
	.copyright{font-size:10px}
	.re_btn{font-size:20px}
	.daan{font-size:20px}
}
@media screen and (max-height:480px){
	.main #con li{padding:1%}
	.main #con li h1{font-size:12px}
	.page_01 .wrap #p_top #logo p{margin:10px;font-size:12px}
	#result{top:22%}
	.re_btn{margin-top:0}
	#re_txt{margin:10px 0;font-size:16px}
	#re_txt span{font-size:14px}
	.main #con .haveimg p.btn{padding-top:0}
	.main #con li p{line-height:8px}
	.main .cup{padding-top:0}
	.next img{width:20%}
	.share{width:30%}
}