@charset "utf-8";
/*
@description : css reset for banknoteRepayment
@author : wangxiaohua
@date : 2014-01-18
*/

/*css reset*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td,span{margin: 0;padding: 0}
h1,h2,h3,h4,h5,h6,input,textarea,select,button{font-size: 100%;font-weight: normal;}
ul,ol{list-style: none;}
html,body{font-family: 'helvetica neue',tahoma,'hiragino sans gb',stheiti,'wenquanyi micro hei',\5FAE\8F6F\96C5\9ED1,\5B8B\4F53,sans-serif;-webkit-user-select: none;user-select: none;height: 100%;position: relative;background: #efeff4; width: 100%; overflow: hidden;}
section{position: absolute;width: 100%;height: 100%;left: 0;top: 0;}
a,img{-webkit-touch-callout: none;}
a,ins{text-decoration: none;}
a:hover{text-decoration: none;}
img{vertical-align: middle;width: 100%}
table, th, tr, td{border: none;}
input{border: none;outline: none}
@media (max-height:400px){
    .bottom{
        display:none;
    }
}
.bgFF6259{background-color: #FF6259}
.bgFFBA59{background-color: #FFBA59}
.bg9CEAA9{background-color: #9CEAA9}
.bg9998E6{background-color: #9998E6}
.bg01AFEE{background-color: #01AFEE}
.bgFF6C88{background-color: #FF6C88}
.bgF6CC7FF{background-color: #6CC7FF}
/*set float and clear float*/
section{padding-top: 25%}
.auto {margin-left: auto;margin-right: auto;}
.logo{width: 135px;position: absolute;z-index: 1;}
.action{}
.action .title{width: 90%}
.action .per{width: 32%}
.action .btn{width: 30%;}
.action .title-2{
	-webkit-animation: bounceIn 0.8s 0.4s 1 forwards;
	-moz-animation: bounceIn 0.8s 0.4s 1 forwards;
	-ms-animation: bounceIn 0.8s 0.4s 1 forwards;
	animation: bounceIn 0.8s 0.4s 1 forwards;
}
.problem{padding-top: 15%}
.problem{padding-top: 15%}
.problem .title{width: 90%;height: 53%;background: url("../img/proTitle.png") no-repeat;background-size:100% }
.problem .title_1{position: relative;padding-top: 2rem;margin-top: 22%;height: 20rem;background: url("../img/ansTitle_1.png") no-repeat;background-size:100% }
.problem .title_1 p{font-size: 1.2rem;font-weight: bold;color: #fff;}
.problem .title_1 span{font-size: 0.8rem;color: #fff;}
.problem .title_1 .button{width: 7rem;height: 1.5rem;margin: 0 auto;text-align: center;background-color: #0BACD3;color: #fff;font-size: 0.8rem;line-height: 1.5rem;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;}
.problem .title_2{position: relative;height: 24rem;margin-top: 28%;background: url("../img/ansTitle_2.png") no-repeat;background-size:100% }
.problem .title_2 p{font-size: 1.2rem;color: #fff;font-weight: bold;}
.problem .title_2 .word{font-size: 1rem;color: #fff;}
.problem .title_2 .buttonArea{position: relative;margin-top: 9rem;width: 15rem;height: 2rem}
.problem .title_2 .buttonArea .button{background: url("../img/button.png") no-repeat;background-size: 100px 29px;width: 100px;text-align: center;line-height: 27px;height: 29px;color: #FFFFFF;position: absolute;}
.problem .title_2 span{width: 3rem;background-color: #fff;height: 1rem;display: inline-block;line-height: 1rem;font-size: 0.8rem;color: #000;text-align: center;}
.problem .balloon_1{position: absolute;top: -3rem;right: 3rem;width: 45px;height: 67px;}
.problem .balloon_2{position: absolute;top: 13rem;left: 2rem;width: 35px;height: 51px;}
.problem .could{width: 15.75rem;position: absolute;right: 0;top: -2rem;}
.problem .share{position: absolute;right: 1rem;top: -5rem;width: 85px;height: 67px;}
.problem .title p{width: 60%;margin: 0 auto;padding-top: 28%;font-size: 0.8rem;font-weight: bold;letter-spacing: 2px;text-indent: 0;}
.problem .answer{width: 80%;height: 7%;line-height: 2.2rem;text-align: center;text-indent: 2rem;font-size: 0.75rem;opacity: 0}
.problem .p2_answerA{background: url("../img/p2_1.png") no-repeat;background-size:100%;}
.problem .p2_answerB{background: url("../img/p2_2.png") no-repeat;background-size:100%;}
.problem .p2_answerC{background: url("../img/p2_3.png") no-repeat;background-size:100%;}
.problem .p3_answerA{background: url("../img/p3_1.png") no-repeat;background-size:100%;}
.problem .p3_answerB{background: url("../img/p3_2.png") no-repeat;background-size:100%;}
.problem .p3_answerC{background: url("../img/p3_3.png") no-repeat;background-size:100%;}
.problem .p4_answerA{background: url("../img/p4_1.png") no-repeat;background-size:100%;}
.problem .p4_answerB{background: url("../img/p4_2.png") no-repeat;background-size:100%;}
.problem .p4_answerC{background: url("../img/p4_3.png") no-repeat;background-size:100%;}
.problem .p5_answerA{background: url("../img/p5_1.png") no-repeat;background-size:100%;}
.problem .p5_answerB{background: url("../img/p5_2.png") no-repeat;background-size:100%;}
.problem .p5_answerC{background: url("../img/p5_3.png") no-repeat;background-size:100%;}
.problem .bottom{position: absolute;bottom: 0;height: 13.5rem;width: 100%;}
.problem .fly-t1{
	-webkit-animation: bounceInLeft 1s 0.8s forwards;
	-moz-animation: bounceInLeft 1s 0.8s forwards;
	-ms-animation: bounceInLeft 1s 0.8s forwards;
	animation: bounceInLeft 1s 0.8s forwards;
}
.problem .fly-t2{
	-webkit-animation: bounceInRight 1.2s 0.8s forwards;
	-moz-animation: bounceInRight 1.2s 0.8s forwards;
	-ms-animation: bounceInRight 1.2s 0.8s forwards;
	animation: bounceInRight 1.2s 0.8s forwards;
}
.problem .fly-t3{
	-webkit-animation: bounceInLeft 1.4s 0.8s forwards;
	-moz-animation: bounceInLeft 1.4s 0.8s forwards;
	-ms-animation: bounceInLeft 1.4s 0.8s forwards;
	animation: bounceInLeft 1.4s 0.8s forwards;
}
.flyUp{
	-webkit-animation: fadeInUp 1.4s 0s forwards;
	-moz-animation: fadeInUp 1.4s 0s forwards;
	-ms-animation: fadeInUp 1.4s 0s forwards;
	animation: fadeInUp 1.4s 0s forwards;
}
.flyShow{
	-webkit-animation: fadeInShow 1.4s 0s forwards;
	-moz-animation: fadeInShow 1.4s 0s forwards;
	-ms-animation: fadeInShow 1.4s 0s forwards;
	animation: fadeInShow 1.4s 0s forwards;
}
.flyLefttHide{
	-webkit-animation: fadeLeftHide 1s 0s forwards;
	-moz-animation: fadeLeftHide 1s 0s forwards;
	-ms-animation: fadeLeftHide 1s 0s forwards;
	animation: fadeLeftHide 1s 0s forwards;
}
.flyLefttShow{
	-webkit-animation: fadeLeftShow 1s 0s forwards;
	-moz-animation: fadeLeftShow 1s 0s forwards;
	-ms-animation: fadeLeftShow 1s 0s forwards;
	animation: fadeLeftShow 1s 0s forwards;
}
.flycould{
	-webkit-animation: couldfly 3s 0.8s forwards;
	-moz-animation: couldfly 3s 0.8s forwards;
	-ms-animation: couldfly 3s 0.8s forwards;
	animation: couldfly 3s 0.8s forwards;
}
.stageY{
	top: 0;
	left: 0;
	-webkit-transform: translateY(100%);
	-moz-transform: translateY(100%);
	-ms-transform: translateY(100%);
	transform: translateY(100%);
	-webkit-transform-origin: 50% 50%;
	-moz-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	overflow: hidden;
}
.stageX{
	top: 0;
	left: 0;
	-webkit-transform: translateX(100%);
	-moz-transform: translateX(100%);
	-ms-transform: translateX(100%);
	transform: translateX(100%);
	-webkit-transform-origin: 50% 50%;
	-moz-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	overflow: hidden;
}