@charset "utf-8";

/* CSS DocumentU2FsdGVkX18PpxOrCHtPvqUWoygiKovB/pkvCpyCWDOgpOLAFxJfgE9exYteLyvh */

body {
    min-width: 3.2rem;
    max-width: 7.5rem;
    margin: 0 auto !important;
    overflow-x: hidden;
    background: #fff;
    font: .32rem/1.5 "microsoft yahei", Arial, Helvetica, sans-serif;
    color: #333;
}

body,
section,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
p,
th,
td,
input,
textarea,
select,
img {
    margin: 0;
    padding: 0;
    border: 0;
}

ul,
ol,
li {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: inherit;
    font-weight: lighter;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

em,
i {
    display: inline-block;
    font-weight: normal;
    font-style: normal;
}

textarea,
select,
input {
    font-family: "Microsoft Yahei";
    font-size: .32rem;
    color: #666;
}

b {
    font-weight: bold;
}

img {
    margin: 0;
    padding: 0;
    border: 0;
}

a {
    color: #333;
    text-decoration: none;
}

a:hover {
    /*color:#333; U2FsdGVkX18PpxOrCHtPvqUWoygiKovB/pkvCpyCWDOgpOLAFxJfgE9exYteLyvh*/
    text-decoration: none;
}

input[type="text"],
input[type="password"],
input[type="button"],
input[type="submit"],
button,
textarea {
    -webkit-appearance: none;
}

.cfx:after,
nav.mini:after,
.h:after,
.hn:after,
.PH:after {
    content: ' ';
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
    line-height: 0;
}

* {
    box-sizing: border-box;
}

.fl {
    float: left;
}

.fr {
    float: right;
}


/**** 公共css ****/


/**** 首页 ****/

.wrapper {
    float: left;
    width: 100%;
}

.wrapper.index {
    background: #300c4f url(../images/wrap-index.jpg) no-repeat;
    background-size: 100% auto;
}

.indexLogo {
    float: left;
    width: 1.65rem;
    height: .95rem;
    margin: 0 0 -.95rem 0;
    background: url(../images/logo.png) no-repeat right center;
    background-size: auto 100%;
}

.picture,
.picture img {
    float: left;
    width: 100%;
}


/*banner图动画*/

.indexBann {
    position: relative;
    float: left;
    width: 100%;
    overflow: hidden;
}

.indexBann .plate {
    position: absolute;
    top: 0;
    left: 50%;
    width: 4.39rem;
    transform: translate(-50%, 0%);
    z-index: 92;
}

.indexBann .card ul li {
    position: absolute;
    width: 1.31rem;
    left: 3.1rem;
    top: 1.2rem;
}

.indexBann .card ul li:first-child {
    transform: scale(.01);
    z-index: 100;
    animation: moveleft 1s linear forwards;
    -webkit-animation: moveleft 1s linear forwards;
}

@keyframes moveleft {
    0% {}
    100% {
        left: .5rem;
        top: .2rem;
        transform: scale(1);
    }
}

@-webkit-keyframes moveleft {
    0% {}
    100% {
        left: .5rem;
        top: .2rem;
        transform: scale(1);
    }
}

.indexBann .card ul li:last-child {
    transform: scale(.01);
    z-index: 100;
    animation: moveRight 1s linear 1s forwards;
    -webkit-animation: moveRight 1s linear 1s forwards;
}

@keyframes moveRight {
    0% {}
    100% {
        left: 5.5rem;
        top: .2rem;
        transform: scale(1);
    }
}

@-webkit-keyframes moveRight {
    0% {}
    100% {
        left: 5.5rem;
        top: .2rem;
        transform: scale(1);
    }
}

.indexBann .card ul li img {
    animation: moves 1s linear .9s infinite alternate;
    -webkit-animation: moves 1s linear .9s infinite alternate;
}

.indexBann .card ul li:last-child img {
    animation-delay: 1.5s;
    -webkit-animation-delay: 1.5s;
}

@keyframes moves {
    0% {}
    100% {
        transform: translateY(.2rem);
    }
}

@-webkit-keyframes moves {
    0% {}
    100% {
        transform: translateY(.2rem);
    }
}

.indexBann .plate img,
.indexBann .card ul li img {
    float: left;
    width: 100%;
}

.indexBann #carousel {
    height: 3.5rem;
    margin-top: 2.5rem;
}

.indexBann #carousel .card img {
    width: 1.15rem;
    display: block;
}


/*banner图动画*/

.main {
    float: left;
    width: 100%;
    padding: 0 .2rem .5rem .2rem;
}

.indexTxt {
    float: left;
    width: 100%;
    color: #fff;
	font-weight: bold;
    text-align: center;
   /* margin-top: .2rem;*/
}

.indexTxt span:nth-child(1) {
    color: #ffc10a;
}

.indexTxt span:nth-child(3), .indexTxt span:nth-child(4) {
    color: #f6606a;
}


/** 资料输入版块 **/

.inputbox {
    float: left;
    width: 100%;
    padding: .3rem .2rem;
    margin: .4rem 0 0 0;
    background: #fff;
    border-radius: .3rem;
    box-shadow: 0 1px .15rem 1px rgba(185, 41, 19, 0.19);
}

.inputbox .box {
    float: left;
    width: 100%;
}

.inputbox div:nth-child(2).box {
    margin: .3rem 0 0 0;
}

.inputbox .box .zuo {
    float: left;
    width: .7rem;
    padding: .15rem 0;
    margin: 0 .3rem 0 0;
    border-radius: .1rem;
    line-height: 1.2;
    color: #fff;
    font-weight: bold;
    text-align: center;
}

.inputbox div:nth-child(1).box .zuo {
    background: #e66ca3;
}

.inputbox div:nth-child(2).box .zuo {
    background: #769fda;
}

.forminput {
    overflow: hidden;
}

.forminput_hang {
    float: left;
    width: 100%;
    border-bottom: solid 1px #cecece;
}

.forminput_hang_bt {
    float: left;
    width: 1.1rem;
    line-height: .8rem;
}

.forminput_hang_name {
    float: left;
    width: 50%;
}

.forminput_hang_name input {
    float: left;
    width: 100%;
    border: none;
    background: none;
    outline: none;
    height: .8rem;
}

.forminput_hang_sex {
    float: right;
    width: 1.2rem;
    margin: .18rem 0 0 0;
    border: solid .02rem #ccc;
    border-radius: .25rem;
}

.forminput_hang_sex a {
    float: left;
    width: 50%;
    line-height: .4rem;
    color: #ccc;
    text-align: center;
}

.forminput_hang_sex a.current {
    color: #fff;
}

.forminput_hang_sex a:first-child.current {
    background: #4784dd;
    border-radius: .25rem 0 0 .25rem;
}

.forminput_hang_sex a:last-child.current {
    background: #da445b;
    border-radius: 0 .25rem .25rem 0;
}

.forminput_hang_birth {
    overflow: hidden;
    line-height: .8rem;
    color: #666;
    cursor: pointer;
}

.forminput_hang_birth span {
    display: block;
}


/** 资料输入版块 **/

.button {
    float: left;
    width: 100%;
    padding: 0 .2rem;
    margin: .4rem 0 0 0;
}

.button a,
.button a img {
    float: left;
    width: 100%;
}

.button.zoom {
    animation: btnZoom 1s linear infinite alternate;
    -moz-animation: btnZoom 1s linear infinite alternate;
    -webkit-animation: btnZoom 1s linear infinite alternate;
    -o-animation: btnZoom 1s linear infinite alternate;
}

@keyframes btnZoom {
    from {}
    to {
        transform: scale(.8);
    }
}

@-moz-keyframes btnZoom {
    from {}
    to {
        transform: scale(.8);
    }
}

@-webkit-keyframes btnZoom {
    from {}
    to {
        transform: scale(.8);
    }
}

@-o-keyframes btnZoom {
    from {}
    to {
        transform: scale(.8);
    }
}

.bigbox {
    float: left;
    width: 100%;
    padding: .3rem;
    margin: .88rem 0 0 0;
    background: #ffebef;
    border: solid .02rem rgba(243, 174, 42, 0.96);
    box-shadow: inset 0 .03rem .75rem 0 rgba(153, 31, 39, 0.59);
    border-radius: .1rem;
}

.bigbox.about {
    background: #ffebef url(../images/about-bg.png) no-repeat;
    background-size: 100% auto;
    box-shadow: none;
}

.bigbox.marg40 {
    margin: .4rem 0 0 0;
}

.bigbox div:nth-child(2).freeTxt,
.bigbox div:nth-child(2).freeMonth {
    margin: 0;
}

.picTitle {
    float: left;
    width: 100%;
    margin: -.8rem 0 .3rem 0;
}

.picTitle img {
    float: left;
    width: 100%;
}


/**** 首页 ****/


/**** 浮动按钮 ****/

.floatbtn {
    float: left;
    width: 100%;
    background: rgba(0, 0, 0, .7);
    padding: .1rem;
    position: fixed;
    bottom: 0;
    max-width: 7.5rem;
}

.floatbtn .button {
    margin: 0;
}


/*** 浮动按钮 ***/


/**** 输入页-微信 ****/

.wrapper.input {
    background: #300c4f url(../images/wrap-input.jpg) no-repeat;
    background-size: 100% auto;
    min-height: calc(100vh - .96rem);
}


/**** 输入页-微信 ****/


/**** 中间页 ****/

.wrapper.middle {
    padding: 7.05rem 0 0 0;
    background: #300c4f url(../images/wrap-mid.jpg) no-repeat;
    background-size: 100% auto;
    /*min-height: calc(100vh - .96rem);*/
}


/**** 中间页 ****/


/**** 免费页 ****/

.wrapper.free {
    background: #300c4f url(../images/wrap-free.jpg) no-repeat;
    background-size: 100% auto;
}

.freeData {
    float: left;
    width: 100%;
}

.freeData ul {
    float: left;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.freeData ul li {
    float: left;
    width: 49%;
    padding: .2rem 0;
    border: solid .02rem rgba(103, 68, 142, 0.96);
    border-radius: .1rem;
    color: #c9a6e8;
    text-align: center;
}

.freeInfo {
    float: left;
    width: 100%;
    padding: .2rem;
    margin: .4rem 0 0 0;
    background: #fff;
    border: solid .02rem rgba(243, 174, 42, 0.96);
    box-shadow: inset 0 .03rem .75rem 0 rgba(153, 31, 39, 0.59);
    border-radius: .1rem;
    line-height: 1.7;
    font-size: .3rem;
    color: #300c4f;
    text-align: justify;
}

.freeInfo img {
    float: left;
    width: 2rem;
    margin: 0 .15rem 0 0;
}

.freeInfo.zy img {
    float: left;
    width: 3.5rem;
    margin: -.5rem -.2rem 0 -.3rem;
}

.freeInfo span {
    color: #f00;
}

.freePaizhen {
    position: relative;
    float: left;
    width: 100%;
    height: 9.62rem;
    margin: .4rem 0 0 0;
    background: url(../images/paizhen-bg.png) no-repeat center;
    background-size: 6.8rem auto;
}

.freePaizhen ul li {
    position: absolute;
    width: 1.5rem;
    height: 2.18rem;
}

.freePaizhen ul li img {
    width: 100%;
    height: 100%;
}

.freePaizhen ul li.niwei img {
    transform: rotate(180deg);
}

.freePaizhen ul li:nth-child(1) {
    left: .8rem;
    top: 1.24rem;
}

.freePaizhen ul li:nth-child(2) {
    right: .8rem;
    top: 1.24rem;
}

.freePaizhen ul li:nth-child(3) {
    left: 2.8rem;
    top: 0;
}

.freePaizhen ul li:nth-child(4) {
    left: 2.8rem;
    top: 2.48rem;
}

.freePaizhen ul li:nth-child(5) {
    left: 2.8rem;
    top: 4.96rem;
}

.freePaizhen ul li:nth-child(6) {
    left: 2.8rem;
    top: 7.44rem;
}

.freePaizhen ul li:nth-child(7) {
    left: .8rem;
    top: 4.96rem;
}

.freePaizhen ul li:nth-child(8) {
    right: .8rem;
    top: 4.96rem;
}

.freePaizhen ul li:nth-child(9) {
    left: 2.8rem;
    top: 4.96rem;
    transform: rotate(90deg);
}

.freeCard {
    float: left;
    width: 100%;
    text-align: center;
}

.freeCard img {
    width: 2.5rem;
    border-radius: .1rem;
}

.freeCard.niwei img {
    transform: rotate(180deg);
}

.freeCard span {
    display: inline-block;
    padding: 0 .4rem;
    margin: .1rem 0 0 0;
    background: #e28021;
    border-radius: .3rem;
    line-height: .65rem;
    color: #fff;
    font-weight: bold;
}

.freeTxt {
    float: left;
    width: 100%;
    margin: .2rem 0 0 0;
    color: #300c4f;
    text-align: justify;
}

.freeMohu {
    float: left;
    width: 100%;
    padding: .5rem;
    margin: .2rem 0 0 0;
    background: url(../images/mohu.png) no-repeat;
    background-size: 100% 100%;
}

.freeMohu a {
    float: left;
    width: 100%;
    display: flex;
    align-items: center;
    padding: .3rem;
    background: #fef3d6;
    border: solid .02rem rgba(245, 175, 124, 0.96);
    border-radius: .1rem;
    color: #9d3555;
    text-align: justify;
}

.freeMohu a img {
    float: left;
    width: .92rem;
    margin: 0 .2rem 0 0;
}

.freeMohu a i {
    color: #f00;
}

.freeMonth {
    float: left;
    width: 100%;
    margin: .2rem 0 0 0;
    display: flex;
    justify-content: space-between;
}

.freeMonth dl {
    width: 2.02rem;
    background: #ffe5d4;
    border: solid 1px #e44e14;
    border-radius: .1rem;
    text-align: center;
}

.freeMonth dl dt {
    float: left;
    width: 100%;
    background: #e44e14;
    border-radius: .1rem .1rem 0 0;
    line-height: .65rem;
    font-size: .38rem;
    color: #fff;
    font-weight: bold;
}

.freeMonth dl dd {
    float: left;
    width: 100%;
    line-height: 1.1rem;
    font-size: .428rem;
    color: #300c4f;
}

.freeTitle {
    float: left;
    width: 100%;
    font-size: .38rem;
    color: #300c4f;
    font-weight: bold;
    text-align: center;
}

.freeList {
    float: left;
    width: 100%;
}

.freeList dl {
    float: left;
    width: 100%;
    margin: .3rem 0 0 0;
    display: flex;
    align-items: center;
}

.freeList dl dt {
    float: left;
    width: 2.13rem;
}

.freeList dl dt img {
    float: left;
    width: 100%;
}

.freeList dl dd {
    flex: 1;
    padding: 0 0 0 .2rem;
    color: #300c4f;
    text-align: justify;
}

.freeList dl dd span {
    color: #f00;
}


/**** 免费页 ****/


/**** 结果页 ****/

.resultTips {
    float: left;
    width: 100%;
    margin: .2rem 0 0 0;
    font-size: .3rem;
    color: #534d58;
    text-align: justify;
}

.resultValue {
    position: relative;
    float: left;
    width: 100%;
    height: 6.46rem;
    margin: .2rem 0 0 0;
    background: url(../images/value-bg.png) no-repeat center;
    background-size: 90% 90%;
}

.resultValue ul li {
    position: absolute;
    width: 1.85rem;
}

.resultValue ul li img {
    float: left;
    width: 100%;
}

.resultValue ul li:nth-child(1) {
    left: 2.3rem;
    top: 0;
}

.resultValue ul li:nth-child(2) {
    left: 2.3rem;
    bottom: 0;
}

.resultValue ul li:nth-child(3) {
    left: 0;
    top: 1.4rem;
}

.resultValue ul li:nth-child(4) {
    right: 0;
    top: 1.4rem;
}

.resultValue ul li:nth-child(5) {
    left: .4rem;
    top: 3.6rem;
}

.resultValue ul li:nth-child(6) {
    right: .4rem;
    top: 3.6rem;
}

.recomKaxina {
    float: left;
    width: 100%;
    height: 6.09rem;
    padding: 4.85rem 1.2rem 0 1.2rem;
    margin: .3rem 0 0 0;
    background: url(../images/kaxina-bg.png) no-repeat;
    background-size: 100% 100%;
}

.recomKaxina a {
    float: left;
    width: 100%;
    background: #b03ce0;
    border-radius: .45rem;
    line-height: .85rem;
    font-size: .36rem;
    color: #fffc00;
    font-weight: bold;
    text-align: center;
}

.recomTaluo {
    float: left;
    width: 100%;
    padding: 3.56rem .3rem .3rem .3rem;
    margin: .4rem 0 0 0;
    background: #fff url(../images/taluo-bg.png) no-repeat;
    background-size: 100% auto;
    border-radius: .1rem;
}

.recomTaluo a {
    float: left;
    width: 100%;
    padding: .15rem .3rem;
    margin: .2rem 0 0 0;
    background: #e99c72;
    border: solid .02rem #f68a55;
    border-radius: .2rem;
    line-height: .8rem;
    color: #fff;
    font-weight: bold;
}

.recomTaluo a i {
    float: right;
    width: .8rem;
    height: .8rem;
    background: #fff;
    border-radius: 50%;
    color: #e99c72;
    font-weight: bold;
    text-align: center;
}


/**** 结果页 ****/


/**** 动画页 ****/

.wrapper.step {
    background: #300c4f url(../images/wrap-step.jpg) no-repeat;
    background-size: 100% auto;
    padding: 2.0rem 0 2.4rem 0;
    min-height: 100vh;
}

.stepElement {
    position: relative;
    float: left;
    width: 100%;
}

.stepElement ul li {
    position: absolute;
    display: none;
    opacity: 0;
}

.stepElement ul li:nth-of-type(1) {
    width: 7.5rem;
    animation: scaleRotate 2s linear forwards;
    -webkit-animation: scaleRotate 2s linear forwards;
}

@keyframes scaleRotate {
    0% {
        transform: rotate(0) scale(.01);
    }
    100% {
        opacity: 1;
        transform: rotate(1turn) scale(1);
    }
}

@-webkit-keyframes scaleRotate {
    0% {
        transform: rotate(0) scale(.01);
    }
    100% {
        opacity: 1;
        transform: rotate(1turn) scale(1);
    }
}

.stepElement ul li:nth-of-type(2) {
    width: 3.48rem;
    left: 2rem;
    top: 2.3rem;
    animation: scaleRotateOpa 2s linear 2s forwards;
    -webkit-animation: scaleRotateOpa 2s linear 2s forwards;
}

@keyframes scaleRotateOpa {
    0% {
        opacity: 1;
    }
    50%,
    52% {
        transform: rotate(1turn) scale(.01);
    }
    98% {
        transform: rotate(0) scale(1.2);
        opacity: 1;
    }
    100% {
        transform: rotate(0) scale(1.3);
        opacity: 0;
    }
}

@-webkit-keyframes scaleRotateOpa {
    0% {
        opacity: 1;
    }
    50%,
    52% {
        transform: rotate(1turn) scale(.01);
    }
    98% {
        transform: rotate(0) scale(1.2);
        opacity: 1;
    }
    100% {
        transform: rotate(0) scale(1.3);
        opacity: 0;
    }
}

.stepElement ul li:nth-of-type(3) {
    width: 100%;
    top: 1.17rem;
    animation: scaleRotate 1s linear 4s forwards;
    -webkit-animation: scaleRotate 1s linear 4s forwards;
}

.stepElement ul li:nth-of-type(4) {
    width: 3.22rem;
    top: 1.17rem;
    left: 2.14rem;
    animation: scaleRotateUn 1s linear 4s forwards;
    -webkit-animation: scaleRotateUn 1s linear 4s forwards;
}

@keyframes scaleRotateUn {
    0% {
        transform: rotate(0) scale(.01);
    }
    100% {
        opacity: 1;
        transform: rotate(-1turn) scale(1);
    }
}

@-webkit-keyframes scaleRotateUn {
    0% {
        transform: rotate(0) scale(.01);
    }
    100% {
        opacity: 1;
        transform: rotate(-1turn) scale(1);
    }
}

.stepElement ul li img,
.stepAnima ul li img {
    float: left;
    width: 100%;
}

.stepAnima {
    float: left;
    width: 100%;
    position: relative;
    padding: 0 .3rem;
    margin-top: .55rem;
}

.stepAnima ul {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 7rem;
}

.stepAnima ul li {
    width: 1.5rem;
    position: absolute;
    transition: all 1s linear;
    -webkit-transition: all 1s linear;
}


/**** 动画页 **U2FsdGVkX18PpxOrCHtPvqUWoygiKovB/pkvCpyCWDOgpOLAFxJfgE9exYteLyvh**/