@charset "utf-8";
/* =reset 网页样式重置----------*/
html { font-size:1em;-webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-tap-highlight:rgba(0,0,0,0);-webkit-text-size-adjust:none;overflow:-moz-scrollbars-vertical;/*强制firefox出现滑动条*/}
body { font-size:0.75em;}
label { cursor:pointer;}
a:link, a:visited { text-decoration:none;}
input:focus { outline: none; }
input,button,select,textarea{font-family:"微软雅黑";outline:none;/*-webkit-appearance:none;*//*强制去除表单自带的样式*/ }
textarea{resize:none;/*-webkit-appearance:none;*//*强制去除textarea自带的样式*/ }
input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset; } /*利用阴影来填充掉input自动填充色*/
textarea,input,select { background: none; border:none; margin: 0; padding: 0; }
a, abbr, acronym, address, applet, article, aside, audio, b, blockquote, big, body, center, canvas, caption, cite, code, command, datalist, dd, del, details, dfn, dl, div, dt, em, embed, fieldset, figcaption, figure, font, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, keygen, label, legend, li, meter, nav, menu, object, ol, output, p, pre, progress, q, s, samp, section, small, span, source, strike, strong, sub, sup, table, tbody, tfoot, thead, th, tr, tdvideo, tt,u, ul, var { margin:0; padding:0;}
article, aside, footer, header, hgroup, nav, section, figure, figcaption { display: block;} /*html5设置*/
h1, h2, h3, h4, h5, h6, th, td, table, input, button, select, textarea, sub{ font-size:1em;}
body, input, button, select, textarea, sub{ font-family:Arial, sans-serif;}
em, cite, address, optgroup { font-style:normal;}
kbd, samp, code { font-family:monospace;}
img, input, button, select, textarea { vertical-align:middle;outline:none;}
ul, ol { list-style:none;}
img, fieldset { border:0;}
abbr, acronym { cursor:help; border-bottom:1px dotted black;}
table {	width:100%; border-spacing:0; border:0;}
table th, table td { border:0;}
legend, hr { overflow:hidden; position:absolute; top:0; left:0;}
legend, hr, caption { visibility:hidden; font-size:0; width:0; height:0; line-height:0;}
html {height: 100%;}

/**
 * = global 统一样式
 *******************************************************************************************************/
/* 改变动画的效果方式*/
* {
  -webkit-transition-timing-function: ease-in-out;
     -moz-transition-timing-function: ease-in-out;
      -ms-transition-timing-function: ease-in-out;
       -o-transition-timing-function: ease-in-out;
          transition-timing-function: ease-in-out;
}
body { position: relative; font-family:"微软雅黑"; width: 640px;height:100%; max-width:640px; min-width:640px; margin: 0 auto; -webkit-user-select: none;background-color:#ccc;overflow:hidden;}
body h1,body h2,body h3,body h4,body h5,body h6,body strong,body em {font-weight:normal; } /*微软雅体 将原有的bold属性去掉*/


/****************************Home********************/
div#outerWrap{position:relative;width:640px;height:100%;min-height:820px;margin:0 auto;overflow:hidden;background-color:#f9b2ba;}
section{
	display:none;position:absolute;top:0;left:0;width:640px;height:100%;overflow:hidden;
	-webkit-transition: top .4s ease-in-out 0s;
	transition: top .4s ease-in-out 0s;
}
section.upmotion{top:-100% !important;}
section.upmotion2{top:0% !important;}

/****************************Loading********************/
section#sec-load{display:block;top:0%;background-color:#f9b2ba;}
section#sec-load{width:100%;height:100%;overflow:hidden;background-color:#fab1ba;}
section#sec-load>span{
	display:block;position:absolute;top:50%;left:275px;margin-top:-170px;width:90px;height:322px;overflow:hidden;background:url(../img/load_cir.png) no-repeat 0 -262px;
	 -webkit-animation:loopBottle 1.2s steps(1) 0s infinite;
    animation:loopBottle 1.2s steps(1) 0s infinite;
}
@keyframes loopBottle {
	0% {background-position:0 -262px;}
	33% {background-position:-90px -262px;}
	66% {background-position:-180px -262px;}
	100%{background-position:0 -262px;}
}
@-webkit-keyframes loopBottle {
	0% {background-position:0 -262px;}
	33% {background-position:-90px -262px;}
	66% {background-position:-180px -262px;}
	100%{background-position:0 -262px;}
}
section#sec-load>b{display:block;position:absolute;top:50%;left:238px;margin-top:155px;width:164px;height:27px;overflow:hidden;background:url(../img/load_cir.png) no-repeat -270px -262px;}
section#sec-load>p{display:block;position:absolute;top:50%;left:189px;margin-top:-220px;width:262px;height:262px;border-radius:50%;overflow:hidden;-webkit-transform:rotate(45deg);transform:rotate(45deg);background:url(../img/load_cir.png) no-repeat -393px 0;}
section#sec-load>p:after{content:"";position: absolute;top:10px;left:10px;display: block;height:242px;width:242px;background:#fab1ba;border-radius:50%;overflow:hidden;}
section#sec-load>p>span{display:block;position:absolute;left:0;top:0;width:50%;height:100%;overflow:hidden;}
section#sec-load>p>span:nth-child(2){left:50%;}
section#sec-load>p>span:nth-child(3){display:none;background:url(../img/load_cir.png) no-repeat;}
section#sec-load>p>span>b{
	display:block;position:absolute;top:0;height:100%;width:100%;
}
section#sec-load>p>span:nth-child(1)>b{
	left:100%;background:url(../img/load_cir.png) no-repeat -262px 0;
	border-bottom-left-radius: 0;
    border-top-left-radius: 0;
	-webkit-transform-origin: 0 50% 0;
    transform-origin: 0 50% 0;
	-webkit-transform:rotate(0deg);
	transform:rotate(0deg);
}
section#sec-load>p>span:nth-child(2)>b{
	left:-100%;background:url(../img/load_cir.png) no-repeat -131px 0;
	border-bottom-right-radius: 0;
    border-top-right-radius: 0;
	-webkit-transform-origin: 100% 50% 0;
    transform-origin: 100% 50% 0;
	-webkit-transform:rotate(0deg);
	transform:rotate(0deg);
}


section.sec-common{background-color:#f6a1ab;}
section.sec-common>span{display:block;position:absolute;width:50%;height:100%;left:0;top:0;overflow:hidden;background-color:#fae0e2;}
section.sec-common>dl{position:absolute;width:590px;height:184px;left:25px;top:30%;margin-top:-184px;overflow:hidden;}
section.sec-common>dl>dt{
	float:left;width:295px;height:46px;overflow:hidden;background-repeat:no-repeat;opacity:0;
	-webkit-transform:translate(-100px,0);
	transform:translate(-100px,0);
}
section.sec-common>dl>dd{
	float:left;width:295px;height:46px;overflow:hidden;background-repeat:no-repeat;opacity:0;
	-webkit-transform:translate(100px,0);
	transform:translate(100px,0);
}
section#sec-main>dl>dt,section#sec-main>dl>dd{background-image:url(../img/words_01.png);}
section#sec-second>dl>dt,section#sec-second>dl>dd{background-image:url(../img/words_02.png);}
section#sec-third>dl>dt,section#sec-third>dl>dd{background-image:url(../img/words_03.png);}
section.sec-common>dl>dt:nth-child(1){
	background-position:0 0;
	-webkit-transition: all .4s ease-in-out 0s;
	transition: all .4s ease-in-out 0s;
}
section.sec-common>dl>dt:nth-child(3){
	background-position:0 -46px;
	-webkit-transition: all .4s ease-in-out 0.2s;
	transition: all .4s ease-in-out 0.2s;
}
section.sec-common>dl>dt:nth-child(5){
	background-position:0 -92px;
	-webkit-transition: all .4s ease-in-out 0.4s;
	transition: all .4s ease-in-out 0.4s;
}
section.sec-common>dl>dt:nth-child(7){
	background-position:0 -138px;
	-webkit-transition: all .4s ease-in-out 0.6s;
	transition: all .4s ease-in-out 0.6s;
}
section.sec-common>dl>dd:nth-child(2){
	background-position:-295px 0;
	-webkit-transition: all .4s ease-in-out 0s;
	transition: all .4s ease-in-out 0s;
}
section.sec-common>dl>dd:nth-child(4){
	background-position:-295px -46px;
	-webkit-transition: all .4s ease-in-out 0.2s;
	transition: all .4s ease-in-out 0.2s;
}
section.sec-common>dl>dd:nth-child(6){
	background-position:-295px -92px;
	-webkit-transition: all .4s ease-in-out 0.4s;
	transition: all .4s ease-in-out 0.4s;
}
section.sec-common>dl>dd:nth-child(8){
	background-position:-295px -138px;
	-webkit-transition: all .4s ease-in-out 0.6s;
	transition: all .4s ease-in-out 0.6s;
}
section.sec-common>p{
	display:block;position:absolute;bottom:0;height:65%;opacity:0;
	-webkit-transform-origin: left bottom;
    transform-origin: left bottom;
	-webkit-transform:rotate(-90deg);
	transform:rotate(-90deg);
	-webkit-transition: all .8s cubic-bezier(0.680, -0.550, 0.265, 1.550) 0s;
	transition: all .8s cubic-bezier(0.680, -0.550, 0.265, 1.550) 0s;
}
section#sec-main>p{left:46px;width:530px;max-height:717px;background:url(../img/peo_01.png) no-repeat top left;}
section#sec-second>p{left:75px;width:491px;max-height:715px;background:url(../img/peo_02.png) no-repeat top left;}
section#sec-third>p{left:63px;width:590px;max-height:718px;background:url(../img/peo_03.png) no-repeat top left;}
section.sec-common>p.showing{
	opacity:1;
	-webkit-transform:rotate(0deg);
	transform:rotate(0deg);
}
section.sec-common>p.hidding{
	opacity:0;
	-webkit-transform:rotate(90deg);
	transform:rotate(90deg);
}
section#sec-third>div{display:none;position:absolute;bottom:40px;left:240px;width:160px;height:67px;overflow:hidden;background:url(../img/arrow.png) no-repeat;}
section#sec-third>div.upanimate{
	-webkit-animation: bottom-arr 1.5s linear infinite;
	animation: bottom-arr 1.5s linear infinite;
}
@-webkit-keyframes bottom-arr {
	0%,30% {opacity: 0;-webkit-transform: translate(0,8px);}
	60% {opacity: 1;-webkit-transform: translate(0,0);}
	100% {opacity: 0;-webkit-transform: translate(0,-10px);}
}
@keyframes bottom-arr {
	0%,30% {opacity: 0;transform: translate(0,8px);}
	60% {opacity: 1;transform: translate(0,0);}
	100% {opacity: 0;transform: translate(0,-10px);}
}



section#sec-end{top:100%;background-color:#f9b2ba;}
section#sec-end>span{display:block;position:absolute;width:181px;height:55px;right:48px;top:45px;overflow:hidden;background:url(../img/logo.png) no-repeat;}
section#sec-end>dl{position:absolute;width:640px;height:660px;left:0;top:40%;margin-top:-240px;overflow:hidden;}
section#sec-end>dl>dt{margin:0 auto;width:338px;height:532px;overflow:hidden;background:url(../img/end_main.png) no-repeat;}
section#sec-end>dl>dd{
	margin:18px auto 0 auto;width:356px;height:76px;overflow:hidden;border:solid 2px #fff;border-radius:76px;box-shadow:0px 0px 20px #fff;-webkit-box-shadow:0px 0px 20px #fff;
	-webkit-animation: shadow-eff 1.5s ease-in-out infinite alternate;
	animation: shadow-eff 1.5s ease-in-out infinite alternate; 
}
section#sec-end>dl>dd>a{display:block;width:356px;height:76px;overflow:hidden;background:url(../img/end_btn.png) no-repeat center center;}
/*shadow-eff*/
@-webkit-keyframes shadow-eff {
	from { box-shadow:0px 0px 20px #fff; }
	50% { box-shadow:0px 0px 0px #fff; }
	to { box-shadow:0px 0px 20px #fff; }
}
@keyframes shadow-eff {
	from { -webkit-box-shadow:0px 0px 20px #fff; }
	50% { -webkit-box-shadow:0px 0px 0px #fff; }
	to { -webkit-box-shadow:0px 0px 20px #fff; }
}



section.animate>dl>dt,section.animate>dl>dd{
	opacity:1 !important;
	-webkit-transform: rotate(0deg) translate(0,0) scale(1) !important;
	transform: rotate(0deg) translate(0,0) scale(1) !important;
}