body {
    margin: 0;
    padding: 0;
    background: #f5f2fb;
    color: #555;
    width: 100%;
    height: 100%;
}

html {
    width: 100%;
    height: 100%
}

.clear {
    clear: both
}

.h_nav {
    width: 100%;
    height: 60px;
    border-bottom: 2px solid #f4f4f4;
    background: #fff;
    line-height: 60px;
    text-align: center;
    font-size: 30px;
    color: #E72A5A
}

.test_content {
    width: 100%;
    height: auto;
    margin-top: 2%
}

.test_content h1 {
    display: inline-block;
    padding: 0;
    margin: 0
}

.number_size1 {
    font-size: 32px
}

.number_size2 {
    font-size: 18px
}

.test_content ul li {
    width: 100%;
    height: auto;
    background: #fff;
    border-bottom: 2px solid #f4f4f4;
    color: #272636;
    padding: 5%
}

.number {
    width: 5%;
    height: 100%;
    float: left
}

.question {
    margin-left: 2%;
    width: 75%;
    padding: 0 2%;
    float: left
}

.question1 {
    margin-left: 2%;
    width: 93%;
    padding: 0 2%;
    float: left
}

.question>img:nth-child(4) {
    margin-left: 20%
}

@media only screen and (max-width: 320px) {
    .question>img:nth-child(4) {
        margin-left: 9%
    }
}

.question_img {
    width: 18%;
    float: right
}

.question_img img {
    width: 100%;
    height: 60px
}

.question span {
    font-size: 17px;
    height: auto
}

.question p {
    font-size: 15px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.article-hisory-btn {
    width: 60px;
    height: 60px;
    background: url(../images/history.png) 0 0 no-repeat;
    background-size: 200%;
    border-radius: 50%;
    text-align: center;
    padding-top: 10px;
    color: #fff;
    font-weight: 700;
    position: relative;
    float: right;
    margin-top: -46px;
    margin-right: 20px
}

#article-content {
    width: 100%;
    height: auto
}

.time span {
    color: #c02427;
}

.title {
    width: 100%;
    background: #090909;
    opacity: .8;
    margin-top: -35px;
    display: block;
    height: 35px;
    font-weight: 700;
    font-size: 16px;
    line-height: 35px;
    padding-left: 10px;
    color: #fff
}

.article-textnum {
    float: left;
    position: absolute;
    margin: 0 5%;
    color: #fff;
    height: 40px;
    line-height: 40px;
    font-size: 16px
}

.article-textnum span {
    color: #000
}

.article-desc {
    height: auto;
    position: relative;
    margin: 5%
}

.article-desc span {
    margin-top: 5%;
    display: block;
    font-size: 16px;
    font-weight: 700
}

.article-desc img {
    width: 10%;
    float: left
}

.article-desc p {
    margin-left: 12%;
    width: 88%
}

.article-desc ul li span {
    margin-left: 12%;
    font-size: 15px
}

.article-explain {
    text-align: center
}

.article-explain img {
    width: 90%
}

.article-explain img:nth-child(2) {
    margin-top: 5%
}

.h5 {
    height: 5em
}

#article-foot {
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    height: 5em;
    background: rgba(0, 0, 0, 0.75);
    box-shadow: 0 0 36px rgba(0, 0, 0, .4), 1px 1px 1px 1px rgba(0, 0, 0, .1)
}

.article-zf {
    float: left;
    width: 20%;
    text-align: center;
    margin: 10px;
    margin-left: 5%;
    font-size: 15px;
    padding-left: 10px;
    border-left: 1px solid #7e7373
}

.article-zf span {
    font-size: 18px;
    color: red;
    font-weight: 700
}

.article-btn {
    float: right;
    width: 162px;
    text-align: center;
    background: url(../images/surepay.png) no-repeat 0 0;
    background-size: 200%;
    height: 55px;
    margin: 3%
}

.article-btn:active {
    background-position: 100% 0
}

.article-call {
    margin-bottom: 40px;
    margin-left: 5%;
    text-align: center
}

.article-call:active {
    background-position: 0 -25px
}

.article-call p {
    display: block;
    font-size: 12px;
    color: #000;
    margin: 0
}

body, html {
    max-width: 600px;
    margin: 0 auto;
    background: #ECAF4F;
    width: 100vw;
    overflow-x: hidden
}

.lf {
    float: left
}

.rt {
    float: right
}

.clear {
    clear: both
}

body::-webkit-scrollbar {
    width: 0;
    height: 0
}

body::-webkit-scrollbar-thumb {
    border-radius: 0;
    -webkit-box-shadow: inset 0 0 0 transparent;
    background: rgba(0, 0, 0, 0)
}

body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 0 transparent;
    border-radius: 0;
    background: rgba(0, 0, 0, 0)
}

@keyframes young {
    0% {
        opacity: 0
    }
    30% {
        opacity: 0
    }
    60% {
        opacity: 0
    }
    70% {
        opacity: 1
    }
}

@keyframes youngOld {
    0% {
        opacity: 0
    }
    30% {
        opacity: 0
    }
    70% {
        opacity: 0
    }
    80% {
        opacity: 1
    }
}

@keyframes bannerText {
    0% {
        opacity: 0
    }
    30% {
        opacity: 1
    }
    31% {
        opacity: 0
    }
    100% {
        opacity: 0
    }
}

@keyframes bannerText2 {
    0% {
        opacity: 0
    }
    31% {
        opacity: 0
    }
    50% {
        opacity: 1
    }
    60% {
        opacity: 1
    }
    70% {
        opacity: 0
    }
    100% {
        opacity: 0
    }
}

@keyframes compass {
    0% {
        opacity: 0;
        transform: rotate(0)
    }
    30% {
        opacity: 1;
        transform: rotate(360deg)
    }
    59% {
        transform: rotate(720deg);
        left: 35%
    }
    60% {
        opacity: 0;
        left: 52%
    }
    100% {
        left: 52%;
        transform: rotate(720deg)
    }
}

@-webkit-keyframes young {
    0% {
        opacity: 0
    }
    30% {
        opacity: 0
    }
    60% {
        opacity: 0
    }
    70% {
        opacity: 1
    }
}

@-webkit-keyframes youngOld {
    0% {
        opacity: 0
    }
    30% {
        opacity: 0
    }
    70% {
        opacity: 0
    }
    80% {
        opacity: 1
    }
}

@-webkit-keyframes bannerText {
    0% {
        opacity: 0
    }
    30% {
        opacity: 1
    }
    31% {
        opacity: 0
    }
    100% {
        opacity: 0
    }
}

@-webkit-keyframes bannerText2 {
    0% {
        opacity: 0
    }
    31% {
        opacity: 0
    }
    50% {
        opacity: 1
    }
    60% {
        opacity: 1
    }
    70% {
        opacity: 0
    }
    100% {
        opacity: 0
    }
}

@-webkit-keyframes compass {
    0% {
        opacity: 0;
        transform: rotate(0)
    }
    30% {
        opacity: 1;
        transform: rotate(360deg)
    }
    59% {
        transform: rotate(720deg);
        left: 35%
    }
    60% {
        opacity: 0;
        left: 52%
    }
    100% {
        left: 52%;
        transform: rotate(720deg)
    }
}

@-moz-keyframes young {
    0% {
        opacity: 0
    }
    30% {
        opacity: 0
    }
    60% {
        opacity: 0
    }
    70% {
        opacity: 1
    }
}

@-moz-keyframes youngOld {
    0% {
        opacity: 0
    }
    30% {
        opacity: 0
    }
    70% {
        opacity: 0
    }
    80% {
        opacity: 1
    }
}

@-moz-keyframes bannerText {
    0% {
        opacity: 0
    }
    30% {
        opacity: 1
    }
    31% {
        opacity: 0
    }
    100% {
        opacity: 0
    }
}

@-moz-keyframes bannerText2 {
    0% {
        opacity: 0
    }
    31% {
        opacity: 0
    }
    50% {
        opacity: 1
    }
    60% {
        opacity: 1
    }
    70% {
        opacity: 0
    }
    100% {
        opacity: 0
    }
}

@-moz-keyframes compass {
    0% {
        opacity: 0;
        transform: rotate(0)
    }
    30% {
        opacity: 1;
        transform: rotate(360deg)
    }
    59% {
        transform: rotate(720deg);
        left: 35%
    }
    60% {
        opacity: 0;
        left: 52%
    }
    100% {
        left: 52%;
        transform: rotate(720deg)
    }
}

.welcomeAnimation {
    width: 100vw;
    height: 46.875vw;
    background: url(../images/antimationBg.png) 0 0 no-repeat;
    background-size: 100%;
    position: relative
}

.compass {
    position: absolute;
    width: 30%;
    left: 35%;
    top: 20%;
    -webkit-animation: compass 10s linear 1 forwards
}

.bannerText {
    color: #4C1E06;
    height: 46.875vw;
    line-height: 46.875vw;
    text-align: center;
    font-weight: 800;
    -webkit-animation: bannerText 10s linear 1 forwards;
    font-size: 18px
}

.bannerText2 {
    color: #4C1E06;
    height: 46.875vw;
    font-weight: 600;
    -webkit-animation: bannerText2 10s linear 1 forwards;
    position: absolute;
    top: 25%;
    line-height: 30px;
    left: 30%
}

.bannerText2 b {
    color: #f2c925;
    margin-right: 20px;
    text-shadow: #000 1px 0 0, #000 0 1px 0, #000 -1px 0 0, #000 0 -1px 0
}

.bannerText2 b:nth-child(6) {
    margin: 0
}

.bannerText3 {
    position: absolute;
    width: 60%;
    right: -15%;
    bottom: 5%;
    -webkit-animation: youngOld 10s linear 1 forwards;
    font-size: 14px;
    color: #490505;
    font-family: "楷体";
    font-weight: 800
}

.bannerText3 b {
    color: #6b0d0d;
    font-weight: 800
}

.young {
    position: absolute;
    height: 100%;
    left: 3%;
    -webkit-animation: young 10s linear 1 forwards
}

.bannerTitle {
    position: absolute;
    width: 65%;
    right: 5%;
    top: 20%;
    -webkit-animation: youngOld 10s linear 1 forwards
}

.goHistoryBg {
    height: 42px;
    line-height: 42px;
    margin: 0 auto;
    padding-left: 10%;
    position: relative;
    background: #3A1506;
    color: #EFCA84
}

.goHistoryBg span {
    font-size: 20px;
    font-weight: 900;
    font-style: italic;
    padding: 0 10px 0 5px;
    background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#debf8c), to(#c89950));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.goHistoryBtn:hover {
    background: url(../images/history.png) 0 100% no-repeat;
    background-size: 100%
}

.imTU {
    width: 96%;
    margin: 0 auto 10px;
    display: block
}

.article-master {
    background: url(../images/threeIm.png) 0 0 no-repeat;
    background-size: 100%;
    width: 100vw;
    padding-bottom: 40px
}

.baziTitle {
    background: url(../images/baziTitle.png) 48% 25% no-repeat;
    background-size: 90%;
    width: 100vw;
    height: 47vw
}

.baziTitle>div {
    padding-top: 30vw;
    padding-left: 10vw;
    font-size: 14px
}

.baziyoung {
    float: right;
    padding-top: 15vw;
    width: 40vw;
    padding-right: 10vw
}

.userInputBg input {
    border: 0;
    background: 0 0;
    width: 60%;
    color: #2A0C06
}

.userInputBg input::-webkit-input-placeholder {
    color: #78685d
}

#birth, #birthday {
    background: url(../images/more.png) 100% 50% no-repeat;
    background-size: 7%
}

.inputClick {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 45px
}

.gender-select input {
    display: none;
    position: relative
}

.gender-select label {
    position: relative;
    color: #714F27;
    margin-right: 10%
}

.gender-select label i {
    width: 14px;
    height: 14px;
    background: 0 0;
    border-radius: 50%;
    border: 1px solid #714F27;
    position: relative;
    display: inline-block;
    top: 2px;
    left: -5px
}

.gender-select input:checked+i:after {
    content: ' ';
    width: 6px;
    height: 6px;
    position: absolute;
    top: 25%;
    background: #92171A;
    left: 25%;
    font-size: 32px;
    border-radius: 50%
}

.gender-select input:checked+i {
    border: 1px solid #92171A
}

.goPayBtn {
    width: 75%;
    height: 40px;
    background: url(../images/goPayBtn.png) 0 0 no-repeat;
    background-size: 100% 200%;
    margin: 0 auto;
    display: block;
    line-height: 40px;
    color: #fff;
    text-align: center
}

.goHistory {
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center
}

.gearDate, .gearDatetime, .gearTime {
    bottom: 0
}

.youngP {
    width: 88%;
    padding: 19vw 0 5vw 42vw;
    text-indent: 30px;
    margin: 0 6.5vw 5vw;
    font-size: 14px;
    border-bottom: 1px solid #9D7826
}

@media screen and (min-width: 374px) {
    .youngP {
        font-size: 16px
    }
}

.youngP b {
    color: #6B2917
}

.youngP span {
    color: #D81313
}

.youngP p {
    margin: 0
}

#video {
    width: 92%;
    margin: 0 auto;
    display: block;
    border: 1px solid #E9A70D
}

#message-wrap {
    margin-top: 20%
}

#message-user {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0
}

.message-user {
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    padding: 10%
}

.message-user {
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    margin-top: -40px;
    padding: 10%
}

form {
    margin: 0 20%;
    width: 60%
}

.message-input {
    margin-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #c9c9c9
}

.message-input-left {
    color: #2d2d2d;
    font-size: 16px;
    float: left;
    width: 20%;
    text-align: center
}

.message-input-right {
    float: left;
    width: 75%;
    text-align: center;
    position: relative
}

.message-input-right input {
    width: 100%;
    border: none;
    text-align: center;
    background: #f5f2fb;
    padding: 5px
}

.female, .male {
    width: 30px;
    height: 30px
}

.male {
    float: left;
    margin-left: 20%;
    background: url(../images/male.png) no-repeat 0 0;
    background-size: cover
}

.position25 {
    background-position: 0 -25px
}

.position0 {
    background-position: 0 0
}

.female {
    float: right;
    margin-right: 20%;
    background: url(../images/female.png) no-repeat 0 0;
    background-size: cover
}

.message-btn-next {
    width: 166px;
    margin: 10% auto 0;
    height: 36px;
    background: #F8B9B0;
    border-radius: 30px;
    line-height: 36px;
    text-align: center;
    color: #fff
}

.message-btn-next:active {
    background-position: -166px 0
}

.hint-message {
    margin: 10px 0;
    color: #F95B39
}

.hint-message-money {
    background: url(../images/laba.png) no-repeat 0 0;
    background-size: 15%;
    padding-left: 35px;
    height: 22px;
    line-height: 22px;
    margin-top: 10px
}

.hint-loading {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, .85)
}

.hint-loading p {
    color: #fff;
    margin: 0 auto;
    display: table;
    padding-top: 98%;
    font-size: 18px
}

.order-exit {
    width: 100%;
    height: 40px;
    line-height: 40px;
    background: #fff;
    padding-left: 5%
}

.comment-exit, .gosee-exit, .history-exit, .history-hint {
    top: 0;
    position: absolute;
    font-size: 16px
}

.history-hint {
    width: 30px;
    height: 30px;
    background: url(../images/his-hint.png) no-repeat;
    background-size: 100% 100%;
    right: 0;
    top: 5px
}

.order-list {
    width: 100%;
    height: auto;
    background: #fff6e0;
    padding-bottom: 2%
}

.order-list ul {
    margin: 0;
}

.order-list ul li {
    width: 90%;
    line-height: 30px;
    margin: 0 0 0 5%;
}

.order-title h3 {
    font-size: 16px;
    padding-left: 5%;
    margin-bottom: 0;
    margin-top: 1px;
    line-height: 40px;
    border-bottom: 1px solid #f4f4f4
}

.top {
    margin-top: 5%
}

.pay-choose {
    width: 25px;
    height: 30px;
    float: right;
    background: url("../images/pay-choose.png") 0 0 no-repeat;
    background-size: 100%;
    margin-top: 8px;
}

.surepay {
    width: 90%;
    text-align: center;
    background: #01AAAf;
    height: 40px;
    border-radius: 10px;
    line-height: 40px;
    color: #fff;
    font-size: 16px;
    margin: 0 auto;
    margin-top: 10%
}

.goods-title {
    width: 85%;
    margin: 0 auto;
    font-size: 14px;
    padding: 10px 0 0;
}

.goods-go-pay-btn {
    background: url(../images/btnBg.png) 0 0 no-repeat;
    background-size: 100%;
    text-align: center;
    height: 50px;
    width: 80%;
    margin: 4% auto 0;
    line-height: 50px;
    color: #fff;
}

.order-pay {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .8);
    position: fixed;
    top: 0
}

.exit, .pay {
    width: 80%;
    margin: 10%;
    background: #fff;
    text-align: center;
    border-radius: 10px;
    position: relative
}

.pay {
    padding-bottom: 5%
}

.exit h2, .pay h2 {
    height: 60px;
    line-height: 60px;
    border-bottom: 1px solid #f4f4f4
}

.pay ul li {
    width: 100%;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #f4f4f4
}

.pay span {
    position: absolute;
    left: 0;
    font-size: 32px;
    line-height: 60px;
    display: block;
    width: 60px;
    height: 60px
}

.exit ul li {
    float: left;
    width: 50%;
    height: 50px;
    line-height: 50px;
    border-radius: 10px
}

.exit ul li:nth-child(1) {
    border-right: 1px solid #f4f4f4
}

.exit ul li:nth-child(2) {
    background: #01AAAf
}

.exit span {
    height: 80px;
    display: block
}

.loading {
    text-align: center;
    margin: 0 auto;
    margin-top: 50%
}

.paySuccess {
    text-align: center;
    padding: 5%;
    padding-bottom: 40px
}

.paySuccess label {
    float: left
}

.paySuccess img {
    width: 20px;
    margin: 0 auto
}

.paySuccess p {
    text-align: left
}

.mySC {
    width: 144px;
    text-align: center;
    background: url(../images/answer.png) no-repeat 0 0;
    background-size: 200%;
    height: 40px;
    margin: 80% auto 0
}

#comment-nav, #gosee-nav, #history-nav {
    width: 90%;
    margin: 0 auto;
    height: 50px;
    line-height: 50px;
    position: relative;
    border-bottom: 1px solid #c9c9c9
}

#history-nav {
    height: 50px
}

.comment-exit, .gosee-exit, .history-exit {
    position: absolute;
    font-size: 16px
}

#history-nav h3 {
    margin: 0;
    text-align: center;
    padding-top: 15px;
    font-size: 18px;
    font-weight: 700
}

#comment-product, #gosee-product, #history-product {
    width: 90%;
    margin: 0 auto;
    position: relative
}

#history-product {
    text-align: center
}

#history-product img {
    width: 100%
}

#gosee-product ul li, #history-product ul li {
    margin-left: 1%;
    margin-bottom: 5%;
    width: 98%;
    height: auto;
    background: #fff;
    line-height: 27px;
    position: relative
}

.gosee-date, .history-date {
    float: left;
    margin-left: 4%;
    height: 30px;
    line-height: 30px
}

.gosee-name, .history-name {
    float: right;
    margin-right: 4%;
    height: 30px;
    line-height: 30px
}

.gosee-title, .history-title {
    display: block;
    height: 40px;
    font-size: 18px;
    background: #000;
    opacity: .8;
    color: #fff;
    margin-top: -40px;
    line-height: 40px;
    text-align: left;
    padding-left: 5%
}

.history-this-next {
    color: #fff;
    position: absolute;
    right: 5%;
    font-size: 20px;
    top: 50%;
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, .7);
    border-radius: 50%;
    line-height: 40px
}

.history-message {
    width: 100%;
    position: relative
}

.history-cov {
    width: 100%;
    height: 180px;
    background: #1b1313;
    border-radius: 5px;
    opacity: .8;
    margin-top: -180px;
    color: #fff;
    font-size: 20px;
    text-align: center
}

.padding40 {
    padding-top: 40px
}

.history-cov span {
    color: #f95b39
}

.gosee-result {
    font-size: 18px;
    font-weight: 700;
    display: block;
    margin: 2%;
    border-bottom: 1px solid #9D7826
}

.gosee-message>p {
    padding: 0 5%
}

#gosee-nav h3 {
    background: url(../images/retroaction.png) 0 0 no-repeat;
    background-size: 200%;
    height: 36px;
    width: 50px;
    margin: 0;
    font-weight: 700;
    position: absolute;
    right: 5%;
    top: 15%;
}

#gosee-nav h3:hover {
    background: url(../images/retroaction.png) 100% 0 no-repeat;
    background-size: 200%
}

.attr-summary {
    box-sizing: border-box;
    width: 100%;
    background: url("../images/attr-summary.png") 5% 50% no-repeat;
    background-size: 10%;
    padding: 5% 0 5% 20%;
    margin: 0;
    line-height: 18px;
    -moz-box-shadow: 0 2px 3px #333333;
    -webkit-box-shadow: 0 2px 3px #333333;
    box-shadow: 0 2px 3px #333333;
    position: inherit;
}

.attr-summary span {
    color: #C02427;
}

.attr-summary-pad {
    height: 20px;
    margin: 0;
    background: #EFCFA6;
}

.english-name-fixed {
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.75);
    width: 100%;
    height: 100%;
}

.show-english-name {
    width: 96%;
    position: absolute;
    top: 5%;
    left: 2%;
    background: #F8EBCB;
    padding-bottom: 2%;
}

.hideEnglishName {
    position: absolute;
    width: 30px;
    height: 30px;
    top: 3%;
    right: 5%;
    background: url("../images/close.png") 0 0 no-repeat;
    background-size: 100% 100%;
}

.gose-english-name-bg {
    color: #000;
    line-height: 150%;
}

.gose-english-name-bg p {
    margin: 0;
}

.english-name-more-bg .promoteEnglishName {
    margin: 20px 0;
    border-bottom: 1px solid #917B69;
}

.promoteEnglishName-name {
    font-weight: 700;
}

.gose-english-name-bg p.tuijian-english-name-title {
    text-align: center;
    background: url("../images/tuijian-english-name-title.png") 40% 0 no-repeat;
    background-size: 98% 100%;
    padding: 5% 0;
    margin: 5px 0;
    font-size: 16px;
    letter-spacing: 2px;
}

.english-name-more-title span.rt {
    color: #C02427;
}

.resharsh {
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
}

/*.resharsh:hover{*/

/*-webkit-transform:rotate(360deg);*/

/*transform:rotate(360deg)*/

/*}*/

.tuijian-english-name {
    font-size: 22px;
    padding: 10px 0;
    font-weight: 700;
}

.tuijian-english-name-bg {
    padding: 0 5%;
}

.english-name-qushi {
    width: 96%;
    margin: 2% auto 0;
    padding: 2%;
    background: #D09B58;
}

.english-name-qushi-hints {
    color: #fff;
    font-size: 12px;
}

.english-name-qushi-hint {
    background: #E3C18F;
    width: 96%;
    margin: 0 auto;
    padding: 2%;
}

.english-name-qushi-hint p {
    margin: 1% 0;
}

.result-title {
    width: 35%;
    position: absolute;
    left: 32%;
    top: 30%;
}

.english-name-more-bg {
    width: 94%;
    margin: 0 auto;
    padding-bottom: 10%;
}

.english-name-explains {
    float: right;
}

#comment-nav h3 {
    line-height: 30px;
    margin: 0;
    text-align: center;
    padding-top: 14px;
    font-size: 18px;
    font-weight: 700
}

.comment-box {
    height: 90vw;
    margin-left: 1%;
    margin-top: 5%;
    width: 100%;
    background: url(../images/commentBg.png) 0 0 no-repeat;
    background-size: 100%;
    border-radius: 5px;
    line-height: 27px;
    padding-bottom: 10px
}

.comment-btn-commit {
    width: 90vw;
    margin: 0 auto;
    line-height: 30px;
    height: 60px;
    background: url(../images/commit.png);
    background-position: 0 0;
    background-size: 200%;
    background-repeat: no-repeat
}

.comment-btn-commit:active {
    background-position: 100% 0
}

.rank-nav {
    padding: 8% 0 0 20%;
    width: 90%
}

.rank-title {
    float: left;
    margin-top: 2%;
    margin-left: 5%;
    margin-right: 5%
}

.rank-container {
    padding-top: 3%;
    padding-right: 5%;
    display: flex
}

.almost-coincide {
    flex: 1
}

.quite-coincide {
    flex: 1
}

.half-coincide {
    flex: 1
}

.almost-coincide-text {
    color: #f95b39;
    float: left
}

.quite-coincide-text {
    color: #c4c4c4;
    float: left
}

.half-coincide-text {
    color: #c4c4c4;
    float: left
}

.almost-coincide-img, .half-coincide-img, .quite-coincide-img {
    width: 20px;
    height: 20px
}

.almost-coincide-img {
    float: left;
    margin-right: 0;
    background: url(../images/almost.png);
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: cover
}

.quite-coincide-img {
    float: left;
    margin-right: 0;
    background: url(../images/quite.png) no-repeat -25px 0;
    background-size: cover
}

.half-coincide-img {
    float: left;
    margin-right: 0;
    background: url(../images/half.png) no-repeat -25px 0;
    background-size: cover
}

.comment-textarea {
    margin: 0 auto;
    display: block;
    border: 0;
    padding: 2%;
    color: #2d2d2d;
    width: 85%;
    height: 160px;
    overflow: auto;
    resize: none;
    background: 0 0
}

#comment-product hr {
    color: #C9C9C9;
    margin: 0
}

.gearDate {
    height: 45%;
    top: 55%
}

.blackBg {
    display: none;
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, .2)
}

@-webkit-keyframes line-scale {
    0% {
        -webkit-transform: scaley(1);
        transform: scaley(1)
    }
    50% {
        -webkit-transform: scaley(.4);
        transform: scaley(.4)
    }
    100% {
        -webkit-transform: scaley(1);
        transform: scaley(1)
    }
}

@keyframes line-scale {
    0% {
        -webkit-transform: scaley(1);
        transform: scaley(1)
    }
    50% {
        -webkit-transform: scaley(.4);
        transform: scaley(.4)
    }
    100% {
        -webkit-transform: scaley(1);
        transform: scaley(1)
    }
}

.line-scale>div:nth-child(1) {
    -webkit-animation: line-scale 1s .1s infinite cubic-bezier(.2, .68, .18, 1.08);
    animation: line-scale 1s .1s infinite cubic-bezier(.2, .68, .18, 1.08)
}

.line-scale>div:nth-child(2) {
    -webkit-animation: line-scale 1s .2s infinite cubic-bezier(.2, .68, .18, 1.08);
    animation: line-scale 1s .2s infinite cubic-bezier(.2, .68, .18, 1.08)
}

.line-scale>div:nth-child(3) {
    -webkit-animation: line-scale 1s .3s infinite cubic-bezier(.2, .68, .18, 1.08);
    animation: line-scale 1s .3s infinite cubic-bezier(.2, .68, .18, 1.08)
}

.line-scale>div:nth-child(4) {
    -webkit-animation: line-scale 1s .4s infinite cubic-bezier(.2, .68, .18, 1.08);
    animation: line-scale 1s .4s infinite cubic-bezier(.2, .68, .18, 1.08)
}

.line-scale>div:nth-child(5) {
    -webkit-animation: line-scale 1s .5s infinite cubic-bezier(.2, .68, .18, 1.08);
    animation: line-scale 1s .5s infinite cubic-bezier(.2, .68, .18, 1.08)
}

.line-scale>div {
    background-color: #FF4C24;
    width: 4px;
    height: 35px;
    border-radius: 2px;
    margin: 2px;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    display: inline-block
}

.line-scale {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 20;
    margin-left: -28px;
    margin-top: -22px
}

.resultContent {
    text-indent: 25px;
    padding: 3%
}

.resultContent p {
    margin-top: 20px
}

.title-reader {
    border-bottom: 1px solid #6C2D18;
    font-size: 18px;
    display: block;
    background: url(../images/titleReader.png) 0 30% no-repeat;
    background-size: 8%;
    color: #C02427;
    padding-left: 10px
}

.history-hint-message {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, .85);
    text-align: center;
    color: #fff;
    font-size: 16px;
    display: none
}

.hint-title {
    margin: 15% 0 20%
}

.hint-titleOne {
    margin: 0
}

.history-hint-message>span {
    height: 30px;
    width: 2px;
    background: #fff;
    margin: 0 auto;
    display: block;
    position: relative;
    margin-bottom: 4px
}

.history-hint-message>span>i {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    border: 2px solid #fff;
    border-left: 0;
    border-top: 0;
    transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    bottom: 0;
    left: -3px
}

.history-hint-message>span>span {
    position: absolute;
    top: 25%;
    width: 30vw;
    font-size: 12px
}

.hint-cannle {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 5vw;
    left: 5vw;
    background: url(../images/xx.png) no-repeat;
    background-size: 100% 100%
}

.hint-border {
    border: 1px solid #fff;
    padding: 10px;
    width: 80%;
    margin: 0 auto
}

.resultContent {
    text-indent: 25px;
    padding: 3%
}

.resultContent p {
    margin-top: 20px
}

.title-reader {
    display: block;
    color: #C02427
}

.bazi {
    display: block;
    margin: 0 auto;
    width: 60%
}

.resultContentborder {
    border: 5px solid #D7A76B;
    padding-bottom: 10px;
}

.resultContentOnebg {
    margin: 0 auto;
    width: 100%;
    position: relative;
    background: #F8EBCC;
}

.rocket {
    position: absolute;
    width: 10%;
    right: -4%;
    bottom: 24%
}

.resultContentOne {
    text-align: center;
    line-height: 32px
}

.title-name {
    padding: 5% 2%;
    border-bottom: 1px solid #CFB781;
    font-size: 16px;
}

.title-name-bg {
    margin: 0 5%;
}

.title-name-birth {
    padding: 0 5px;
    margin: 0;
}

.baziBg {
    padding: 4% 0;
    border-bottom: 1px solid #FD5A37;
    width: 80%;
    margin: 0 auto
}

.shichen {
    color: #FD5A37
}

.gosee-message-container {
    width: 100%;
    margin: 0 auto
}

.paySuccess p {
    text-align: center
}

.paySuccess h3 img {
    width: 12%;
    margin: 0 5px
}

.hasHistory {
    text-align: center
}

.hasHistoryOne {
    color: #FD5A37;
    font-size: 16px;
    margin-top: 30%
}

.successCommit {
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, .85);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 500;
    display: none
}

.successCommit p {
    width: 80%;
    height: 40px;
    line-height: 40px;
    border-radius: 20px;
    border: 1px solid #FA795D;
    background: #fff;
    margin: 0 auto;
    margin-top: 45vh;
    text-align: center
}

.resultContentborder-l {
    width: 50%;
    float: left;
    padding-left: 4%
}

.resultContentborder-l1 {
    width: 20%;
    float: left;
    padding-left: 4%
}

.resultContentborder-r {
    float: right;
    width: 50%
}

.resultContentborder-r1 {
    float: right;
    width: 80%
}

.pl4 {
    padding-left: 4%
}

.fs12 {
    font-size: 12px
}

.mt4 {
    margin-top: 4%
}

.resultmsg span {
    display: block;
    font-size: 18px;
    color: red;
    margin: 5%
}

.resultmsg p {
    margin: 5%
}

.message-input-right span {
    right: 0;
    top: 20%
}

.gzhText {
    color: #f95b39;
    margin-top: 5%
}

.gzh {
    background: url(../images/gzhgo.png) no-repeat;
    background-size: 100%;
    width: 180px;
    height: 43px;
    margin: 0 auto;
    position: relative;
    z-index: 800
}

.nl {
    display: block;
    float: left;
    margin-left: 5%
}

.article-history-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #f95b39;
    color: #fff;
    text-align: center;
    line-height: 20px;
    position: absolute;
    padding-top: 10px;
    top: 160px;
    right: 10px
}

.hitory-tishi {
    float: right;
    width: 23%;
    margin-top: 2%;
}

.history-qes {
    background: url(../images/qes.png);
    float: right
}

.history-call {
    background: url(../images/call.png);
    float: right
}

.history-call, .history-qes {
    background-position: 0 0;
    background-size: 100%;
    background-repeat: no-repeat;
    width: 26px;
    height: 26px;
    margin-left: 2%;
    text-align: center
}

.history-call span, .history-qes span {
    display: block;
    margin-top: 10px;
    font-size: 10px
}

#call {
    margin: 5%;
    font-size: 16px
}

#call h2 {
    font-size: 20px;
    color: grey;
    margin-top: -24px;
    margin-bottom: 16px
}

#call span {
    display: block;
    font-size: 18px;
    color: #000
}

.successCommit {
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, .85);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 500;
    display: none
}

.successCommit p {
    width: 66%;
    height: 124px;
    text-align: left;
    padding: 5% 5%;
    line-height: 20px;
    border-radius: 10px;
    border: 1px solid #FA795D;
    background: #fff;
    margin: 0 auto;
    margin-top: 34vh;
    font-size: 16px
}

.message-input-right span.rt {
    position: absolute;
    right: 0;
    top: 0
}

#yougo {
    width: 100%;
    height: 100%;
    position: absolute;
    background: rgba(0, 0, 0, .8);
    top: 0;
    display: none
}

.yougo-content {
    width: 80%;
    height: auto;
    background: #fff;
    margin: 0 auto;
    margin-top: 32vh;
    border-radius: 10px;
    padding-top: 5%;
    padding-bottom: 5%
}

.yougo-content span {
    display: block;
    width: 80%;
    margin: 0 auto;
    height: 30px;
    line-height: 30px;
    font-size: 14px
}

.yougo-content label {
    height: 40px;
    line-height: 40px;
    font-size: 30px;
    color: #000;
    margin-top: -8px;
    float: right;
    margin-right: 20px;
    width: 50px;
    text-align: center
}

.yougo-btn {
    background: url(../images/sure.png);
    background-position: 0 0;
    background-size: cover;
    background-repeat: no-repeat;
    width: 165px;
    height: 40px;
    text-align: center;
    margin: 0 auto;
    margin-top: 3vh
}

.yougo-btn:active {
    background-position: -165px 0
}

.gearDatetime {
    bottom: 0
}

.gosee-sp1 {
    display: block;
    position: relative;
    margin-top: 10%;
    text-align: center;
    font-size: 17px;
    color: #000
}

.gosee-sp2 {
    display: block;
    position: relative;
    text-align: center;
    margin-top: 5%;
    font-size: 17px;
    color: #000
}

.gosee-sp3 {
    display: block;
    position: relative;
    text-align: center;
    margin-top: 2%;
    font-size: 17px;
    color: #000
}

.telBg {
    background: url(../images/telBg.png) no-repeat 0 0;
    background-size: 100% 100%;
    width: 100%;
    height: 132vw;
    margin: 0 auto;
    z-index: 40;
    display: table;
    position: relative
}

.telBg input {
    width: 70%;
    text-align: center;
    background: rgba(0, 0, 0, .8);
    margin: 85vw auto 0;
    display: block;
    color: #fff;
    padding: 5px 0
}

.telBg b {
    background: url(../images/duihao.png);
    background-size: 100% 100%;
    width: 20px;
    height: 20px;
    display: inline-block;
    position: absolute;
    right: 5%;
    top: 86.5vw;
    opacity: 0
}

.postTel {
    background: #7F7F7F;
    width: 120px;
    height: 40px;
    margin: 5% auto;
    display: block;
    border-radius: 22px;
    font-size: 18px;
    text-align: center;
    color: #fff;
    line-height: 40px;
    border: 1px solid #000
}

.gongxi {
    margin: 40% auto;
    display: block;
    width: 70%
}

.gongxiBg {
    z-index: 999;
    position: fixed;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, .8)
}

.telHint {
    color: #F95B39;
    font-size: 12px;
    opacity: 0;
    margin: 5px 0;
    text-align: center
}

.resultContent p:last-child {
    margin: 0
}

@keyframes scrollText1 {
    0% {
        transform: translateY(0)
    }
    50% {
        transform: translateY(-33%)
    }
    99.99% {
        transform: translateY(-66%)
    }
    99.999% {
        transform: translateY(0)
    }
}

.commentShow>div {
    height: 85vw;
    overflow: hidden
}

.commentBg {
    animation: scrollText1 30s 5s linear infinite
}

.commentBg img {
    width: 100%;
    margin: 0 auto;
    display: block
}

#gosee-nav, #history-nav {
    margin: 0 auto;
    background: #C77E3C;
    color: #2A0C06;
    width: 100%;
    padding: 0 5%;
    border: 0
}

#gosee-product {
    width: 96%;
    border: 2px solid #000;
    border-top: 0;
    margin: -2px auto;
}

#gosee-product ul li {
    background: #EFCFA6;
    margin: 0 auto;
    width: 100%;
    padding-bottom: 1%
}

#gosee-product ul {
    background: #F9D597
}

#comment-product {
    width: 100%
}

#gosee-nav {
    background: #C77E3C;
    margin: 0 auto
}

.gosee-exit {
    top: 0;
    color: #2A0C06
}

#comment-nav {
    padding-left: 5%;
    height: 50px;
    background: #C77E3C;
    line-height: 50px;
    margin: 0 auto;
    width: 100%;
    color: #2A0C06;
    border: 0
}

.goPayBtnDown:hover {
    background: url(../images/goPayBtnDown.png) 100% 0 no-repeat;
    background-size: 200%
}

.article-call p:last-child {
    background: url(../images/call.png) 0 0 no-repeat;
    background-size: 18%;
    display: inline-block;
    padding-left: 25px
}

#call p {
    color: #371E09
}

#call p.twoCall {
    border-bottom: 1px solid #2A0C06;
    border-top: 1px solid #2A0C06;
    padding: 20px 0
}

#call span {
    color: #80200D;
    margin: 5px 0;
    display: inline-block
}

#call img {
    width: 100%;
    margin: 5% 0
}

.pay-banner {
    width: 100%;
    position: relative
}

.center {
    text-align: center;
}

.pay-banner img {
    width: 10px;
    position: absolute;
    bottom: -5px;
    right: 40%;
    height: 10px
}

.pay-banner-name {
    position: absolute;
    top: 3%;
    left: 10%;
    font-size: 20px;
    font-weight: 600
}

.pay-banner-moontime {
    position: absolute;
    top: 14.8%;
    left: 17%;
    font-size: 10px
}

.pay-banner-suntime {
    top: 11.5%;
    position: absolute;
    font-size: 10px;
    left: 17%
}

.hideR-exit {
    margin-left: 10px;
    color: #2A0C06;
    float: left;
    position: absolute
}

.hideR-head {
    padding: 10px 0;
    position: relative;
    background: #C57F3A;
    color: #000
}

.bgTitle {
    height: 14px;
    margin: 0;
    padding: 0;
    vertical-align: top;
    display: block;
    width: 100%;
}

#hideResult {
    width: 98%;
    margin: 0 auto;
    background: #E2BF95;
    border: 2px solid #36311E;
    border-top: 0;
}

.gosee-message {
    width: 100%;
    margin: 0 auto 5%;
    display: block;
    border: 4px solid #CF9256;
    position: relative;
    background: #FFEFCC;
    box-sizing: border-box;
}

.mo {
    position: absolute;
    right: -3%;
    top: 0;
    width: 20%
}

.careerLuckHide {
    border: 5px solid;
    border-image: url(../images/case.png) 5;
    margin: 0 auto;
    padding: 5px;
    width: 90%;
}

.hide-tips span {
    color: #C02427
}

.gosee-message-title {
    width: 100%;
    margin: 5% auto;
    display: block;
    border: 4px solid #CF9256;
    position: relative;
    background: #F8EBCC
}

.analyseBg {
    margin: 0 2% 2%;
    background: #D09B58;
    overflow: hidden;
    padding: 0 5% 10%
}

.feng {
    width: 30%;
    transform: rotate(-45deg);
    background: #fff;
    color: #D09B58;
    display: block;
    text-align: center;
    height: 30px;
    line-height: 30px;
    margin-left: -16%;
    margin-top: -2%
}

.gosee-message-small-message {
    padding: 0 2%
}

.hideResultBtn {
    width: 80%;
    background: #c9302c;
    position: relative;
    color: #fff;
    padding-left: 20%;
    margin: 0 auto;
    border-radius: 30px;
    height: 30px;
    font-size: 14px;
    line-height: 30px
}

.lock {
    position: absolute;
    left: 10%;
    top: -10%;
    width: 15px
}

.hide-go-payBg {
    position: fixed;
    width: 100%;
    height: 50px;
    background: rgba(255, 255, 255, .5);
    line-height: 50px;
    bottom: 0;
    left: 0;
}

.hide-go-pay {
    width: 80%;
    background: url(../images/goPayBtn.png) 0 0 no-repeat;
    background-size: 100% 200%;
    height: 50px;
    margin: 0 auto;
    color: #fff;
    text-align: center;
    line-height: 50px
}

.percent {
    width: 80%;
    margin: 0 auto 2%;
    display: block
}

.CommentOne {
    padding-top: 20%;
    margin: 0 auto;
    font-weight: 700;
    width: 90%;
    font-size: 13px;
}

.textRed {
    color: #c02427
}

.CommentTwo {
    margin: 0 auto;
    width: 90%;
    font-size: 12px;
}

.gosee-messagess {
    width: 100%;
    margin: 5% auto
}

.order-money {
    width: 90%;
    margin: 5px auto 0;
    background: #fff6e0;
    border-radius: 5px;
}

.order-money2 {
    width: 90%;
    margin: 5px auto 0;
}

.order-money>div {
    padding: 5px 5%;
}

.money-show {
    width: 55%;
}

.money-show span {
    color: #f5e8c6;
    background: #c02427;
    border-radius: 4px;
    padding: 4px;
}

.order-money-title {
    border-bottom: 1px solid #F1C072;
    padding: 5px 5%;
    margin: 0;
}

.order-list p.center {
    border-bottom: 1px solid #F1C072;
    padding: 5px 0 10px;
    margin: 0;
}

.imTUs {
    width: 100%;
    margin: 0 auto;
    display: block;
}

.imMar {
    margin: 10px auto;
}

.english-name-more-title {
    padding: 0 0 5%;
}

.englishName {
    position: absolute;
    top: 32%;
    left: 10%;
}