div, h1{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.ttx-older{
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: #ab0101;
}
.result-header{
    width: 100%;
    height: 630px;
    background: url('/images/result/result-headerBg.jpg') center no-repeat;
    background-size: 100% 100%;
}
.pay-lock-header{
    width: 100%;
    height: 630px;
    background: url('/images/result/pay-lock-bg.png') center no-repeat;
    background-size: 100% 100%;
}
/* face */
.face-detail{
    max-width: 100%;
    height: 335px;
    overflow: hidden;
    z-index: 2;
}
.faceAnimate{
    width: 375px;
    height: 335px;
    z-index: 2;
}
.faceAbsoulte{
    position: absolute;
    top: 0;
    left: 0;
    width: 375px;
    height: 335px;
    z-index: 5;
}
.face-count{
    width: 100%;
    height: 282px;
}
.face-count-warn{
    width: 90%;
    margin: 0 auto;
    font-size: 15px;
    line-height: 22px;
    color: rgba(248,234,166,1);
}
.face-count-price{
    width: 60%;
    margin: 16px auto 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
}
.face-count-price span{
    font-size: 15px;
    line-height: 22px;
    color: rgba(248,234,166,1);
}
.face-count-price span:nth-of-type(1){
    text-decoration: line-through;
}
.face-count-warn span{
    background: rgba(171,1,0,1);
}
.face-count-price span:nth-of-type(2){
    background: rgba(171,1,0,1);
    padding: 0 5px;
}
.pay-button{
    width: 271px;
    height: 44px;
    background: url('/images/result/pay-lock-button.png') center no-repeat;
    background-size: 100%;
    margin: 6px auto 0;
}
.fix-box{
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    padding: 15px 0;
    background: rgba(0,0,0,.7);
    z-index: 99;
}
.fix-pay-button{
    width: 271px;
    height: 44px;
    margin: 0 auto;
    background: url('/images/result/pay-lock-button.png') center no-repeat;
    background-size: 100%;
}
.face-overview{
    width: 100%;
    padding-top: 40px;
    background: url('/images/result/pay-lock-split.png') center 0% no-repeat;
    background-size: 100%;
}
.face-overview-result{
    width: 100%;
    padding-top: 20px;
    background: url('/images/result/result-cirLine.png') center 0% no-repeat;
    background-size: 100%;
}
/* count-header */
.count-header{
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    height: 130px;
    align-items: center;
}
.count-share{
    width: 81px;
    height: 32px;
    background: url('/images/result/result-share.png') center no-repeat;
    background-size: 100%;
    position: fixed;
    top: 450px;
    right: 0;
    z-index: 99;
}
.count-photo{
    width: 81px;
    height: 32px;
    background: url('/images/result/result-refreshPhoto.png') center no-repeat;
    background-size: 100%;
}
.count-center{
    width: 159px;
    height: 133px;
    line-height: 133px;
    font-size: 67px;
    color: #AB0100;
    text-align: center;
}
.count-footer{
    width: 85%;
    height: 120px;
    margin: 2px auto 0;
    background: url('/images/result/result-line.png') center no-repeat;
    background-size: 100% 100%;
    padding: 1px 2%;
    display: flex;
    justify-content: space-around;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: flex-end;
}
.count-footer div{
    background:linear-gradient(180deg,rgba(248,234,165,1) 0%,rgba(171,1,0,1) 100%);
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
}
.count-data-ani{
    height: 1%;
    transition: 1.5s all;
}

.count-sign{
    width: 85%;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    flex-wrap: nowrap;
    flex-direction: row;
    padding: 2px 2% 0;
}
.count-sign div{
    font-size: 12px;
    color: #F4F0B9;
    white-space: nowrap;
}
/* 分类 */
.overview-header{
    width: 100%;
    height: 33px;
    background: url('/images/result/result-title.png') center no-repeat;
    background-size: 271px 33px;
    margin: 20px 0;
}
.overview-content{
    width: 89.8%;
    margin: 0 auto 20px;
    background: #F8EAA6;
    border-radius: 4px;
    font-size: 13px;
    color: #a31717;
    line-height: 20px;
    padding: 20px;
}
.module{
    position: relative;
    width: 89.8%;
    margin: 0 auto 20px;
    background: #F7EDBA;
    border-radius: 4px;
    font-size: 14px;
    color: #ab0100;
    line-height: 20px;
    padding: 20px;
}
.hide{
    position: relative;
    height: 355px;
    overflow: hidden;
}
.hideMark{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 117px;
}
.hiden{
    width: 100%;
    background:url('/images/result/result-mark.png') center no-repeat;
    background-size: 100%;
}
.hideBtn{
    width: 100%;
    height: 40px;
    line-height: 40px;
    color: #AB0100;
    font-size: 12px;
    padding-left: 20px;
    text-align: center;
}
.module-header{
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    flex-direction: row;
}
.module-line{
    width: 100%;
    border-top: 1px #e8be95 solid;
}
.foot-keyworks{
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
}
.foot-keyworks div{
    text-align: center;
    white-space: nowrap;
    border-radius: 2px;
    background: #AB0100;
    color: #F8EAA6;
    font-size: 14px;
    width: 24%;
    height: 22px;
    line-height: 22px;
    margin: 13px 1% 0 0;
}
.header-title, .header-type{
    width: 105px;
}
.header-title{
    display: flex;
    justify-content: space-between;
}
.header-type{
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.header-userImg{
    width: 100px;
    height: 100px;
    zoom: 0.5;
}
.header-userType{
    width: 40px;
    height: 50px;
}
.header-type .type-font{
    text-align: center;
    white-space: nowrap;
    border-radius: 3px;
    background: #AB0100;
    color: #F8EAA6;
    font-size: 14px;
    width: 48px;
    height: 22px;
    line-height: 22px;
    margin: 0 2px 2px;
}

.body-one{
    margin:10px 0 15px;
}
.body-title{
    font-size: 16px;
    font-weight: bold;
    color: #ab0100;
    text-align: left;
    transform: translateX(-8px);
}
.body-content{
    font-size: 14px;
    color: #ab0100;
    text-align: left;
}
.body-image{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: nowrap;
}
/* 标题 */
.five-title{
    width: 100%;
    height: 20px;
}
.title-1{
    background: url('/images/result/result-fiveFace.png') center no-repeat;
    background-size: 147px 20px;
}
.title-2{
    background: url('/images/result/result-faceDetail.png') center no-repeat;
    background-size: 147px 20px;
}
.title-3{
    width: 100%;
    height: 35px;
    background: url('/images/result/result-fullYear.png') center no-repeat;
    background-size: 90px 24px;
}
/* 眼睛/字体背景 */
.header-userEyebrow{
    background: url('/images/result/result-eyebrow.png') center 0% no-repeat;
    background-size: 100%;
}
.header-userEye{
    background: url('/images/result/result-eye.png') center 0% no-repeat;
    background-size: 100%;
}
.header-userFaceType{
    background: url('/images/result/result-faceType.png') center 0% no-repeat;
    background-size: 100%;
}
.header-userFloor{
    background: url('/images/result/result-floor.png') center 0% no-repeat;
    background-size: 100%;
}
.header-userNose{
    background: url('/images/result/result-nose.png') center 0% no-repeat;
    background-size: 100%;
}
/* 下边距 */
.bottom-15{
    margin-bottom: 15px;
}
.bottom-10{
    margin-bottom: 10px;
}
/* 流年运势 */
.fullYearResult{
    padding: 20px 0;
    background: #FFFFFF;
    width: 89.8%;
    margin: 0 auto 20px;
    border-radius: 4px;
    font-size: 16px;
    line-height: 20px;
    color: #77767C;
}
.fullYear{
    padding: 20px 0;
    background: #FFFFFF;
    width: 89.8%;
    margin: 0 auto 20px;
    border-radius: 4px;
    font-size: 16px;
    line-height: 20px;
    color: #77767C;
    max-height: 500px;
    overflow: hidden;
    position: relative;
}
.fullYear::after{
    position: absolute;
    content: '';
    bottom: 0;
    left: 11px;
    width: 93%;
    height: 138px;
    background: #ffffff url(/images/result/pay-lock-fullYear.png) center no-repeat;
    background-size: 100%;
}
.fullYear-content{
    padding: 0 25px;
}
/* 分享卡片 */
.shareFullYear{
    width: 340px;
    position: relative;
    margin: 0 auto 20px;
    border: 5px #F7EDBA solid;
    border-radius: 5px;
}
.fullYearCanvas{
    width: 100%;
    max-width: 100%;
    display: block;
}
.bottomShare{
    display: block;
    margin: 0 auto 50px;
    width: 164px;
}
.pointShare{
    position: absolute;
    width: 0;
    height: 0;
    border-bottom: 7px solid #F7EDBA;
    border-right: 7px solid transparent;
    bottom: -0.5em;
    left: 50%;
    transform: rotate(-45deg);
}
.fullYear-data{
    width: 89.5%;
    height: 240px;
    margin: 0 auto;
}
.fullYear-switch{
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    color: #757575;
    font-size: 15px;
    margin-top: 20px;
}
.fullYear-switch div{
    margin-right: 20px;
    position: relative;
}
.fullYear-switch div:nth-last-child(1){
    margin-right: 0;
}
.switch-active::before{
    display: block;
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-bottom: 10px solid #D72630;
    border-right: 10px solid transparent;
    top: -10px;
    left: 10px;
    transform: rotate(-45deg);
}
.fullYearHiden{
    position: relative;
    height: 480px;
    overflow: hidden;
}
.fullYear-hiden{
    position: absolute;
    width: 100%;
    height: 157px;
    bottom: -2px;
    left: 0;
}
.fullYear-share{
    width: 250px;
    height: 41px;
    background: url(/images/result/fullYearShare.png) center no-repeat;
    background-size: 100%;
}
.hiden-white{
    width: 100%;
    height: 77px;
    background:url('/images/result/whiteMark.png') center no-repeat;
    background-size: 100%;
}
.hiden-share{
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #FFFFFF;
}
.fullYearTitle{
    padding: 2px;
}
/* 五行 */
.ico{
    width: 49%;
    height: 94px;
    color: #fff;
    font-size: 20px;
    line-height: 94px;
    padding-right: 5%;
    text-align: right;
}
.ico-fire{
    background: url('/images/result/ico-fire.png') center no-repeat;
    background-size: 100%;
}
.ico-wood{
    background: url('/images/result/ico-wood.png') center no-repeat;
    background-size: 100%;
}
.ico-floor{
    background: url('/images/result/ico-floor.png') center no-repeat;
    background-size: 100%;
}
.ico-gold{
    background: url('/images/result/ico-gold.png') center no-repeat;
    background-size: 100%;
}
.ico-water{
    background: url('/images/result/ico-water.png') center no-repeat;
    background-size: 100%;
}
.abstract{
    max-height: 200px;
    overflow: hidden;
}
.eyebrow,.eye,.nose,.floor, .faceType, .fiveFaceDetail{
    position: relative;
    max-height: 320px;
    overflow: hidden;
}
.eyebrow::after,.eye::after,.nose::after,.floor::after, .faceType::after, .abstract::after, .fiveFaceDetail::after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 11px;
    width: 100%;
}
.eye::after{
    width: 93%;
    height: 138px;
    background: #F7EDBA url(/images/result/pay-lock-eye.png) center no-repeat;
    background-size: 100%;
}
.eyebrow::after{
    width:93%;
    height: 138px;
    background: #F7EDBA url(/images/result/pay-lock-eyebrow.png) center no-repeat;
    background-size: 100%;
}
.nose::after{
    width: 93%;
    height: 138px;
    background: #F7EDBA url(/images/result/pay-lock-nose.png) center no-repeat;
    background-size: 100%;
}
.floor::after{
    width: 93%;
    height: 138px;
    background: #F7EDBA url(/images/result/pay-lock-floor.png) center no-repeat;
    background-size: 100%;
}
.faceType::after{
    width: 93%;
    height: 138px;
    background: #F7EDBA url(/images/result/pay-lock-faceType.png) center no-repeat;
    background-size: 100%;
}
.abstract::after{
    width: 93%;
    height: 138px;
    background: #F7EDBA url(/images/result/pay-lock-abstract.png) center no-repeat;
    background-size: 100%;
}
.fiveFaceDetail::after{
    width: 93%;
    height: 138px;
    background: #F7EDBA url(/images/result/pay-lock-five.png) center no-repeat;
    background-size: 100%;
}
/*ec-canvas {*/
    /*width: 100%;*/
    /*height: 100%;*/
/*}*/

.shareAndSave{
    width: 89%;
    margin: 20px auto 12px;
    display: flex;
    justify-content: center;
}
.shareAndSave img{
    width: 164px;
    height: 40px;
}

.pay-banner{
    width: 89.8%;
    margin: 0 auto 18px;
}
.banner-item{
    width: 100%;
    margin: 0 auto 19px;
}
.banner-item:nth-last-child(1){
    margin: 0 auto;
}
.banner-item img{
    width: 100%;
}
.kefu-btn-bg{
    position: fixed;
    right:10px;
    top: 375px;
    width:60px;
    height:60px;
    z-index: 66;
}
.kefu-btn{
    width: 100%;
    height: 100%;
}
.moreDetail{
    position: relative;
    width: 6em;
    font-size: 16px;
    font-weight: 500;
    color: rgba(248,234,166,1);
    line-height: 18px;
    text-align: center;
    margin: 15px auto 20px;
}
.moreDetail:before, .moreDetail:after{
    position: absolute;
    content: '';
    width: 40px;
    height: 1px;
    background: rgba(248,234,166,1);
}
.moreDetail:before{
    left: -3em;
    top: .5em;
}
.moreDetail:after{
    right: -3em;
    top: .5em;
}
#img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#img>img {
    display: block;
    width: 100%;
    height: 100%;
    z-index: 10;
    vertical-align: bottom;
}
h1{
    pointer-events: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.fix-share{
    position: fixed;
    top: 368px;
    right: 0;
    width: 81px;
    height: 32px;
    background: url('/images/result/result-share.png') center no-repeat;
    background-size: 100%;
}
.fix2share{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7) url('/images/result/fix2share.png') center 0 no-repeat;
    background-size: 90%;
    z-index: 99;
}
.to-bottom{
  position: fixed;
  bottom: 5%;
  left: 4px;
  z-index: 99;
    animation: 1s bottom-1 linear infinite;
}
.to-bottom-1{
  width: 17px;
  height: 9px;
  background: url(/images/result/to-bottom-1.png) center no-repeat;
  background-size: 100% 100%;
}
.to-bottom-2{
  width: 17px;
  height: 9px;
  background: url(/images/result/to-bottom-2.png) center no-repeat;
  background-size: 100% 100%;
  /*animation: 1s bottom-2 linear infinite;*/
}
.to-bottom-3{
  width: 17px;
  height: 9px;
  background: url(/images/result/to-bottom-3.png) center no-repeat;
  background-size: 100% 100%;
  /*animation: 1s bottom-3 linear infinite;*/
}
.to-bottom-text{
  color: #f8eaa6;
  font-size: 12px;
  width: 17px;
  line-height: 13px;
  text-align: center;
  margin-bottom: 7px;
}
@keyframes bottom-1 {
  0% {
      bottom: 5%;
  }
  25% {
      bottom: 2%;
  }
  50% {
      bottom: 0;
  }
  75%{
      bottom: 2%;
  }
  100%{
      bottom: 5%;
  }
}
.pay-or-nopay-bg{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.75);
    z-index: 9999;
}
.pay-or-nopay{
    border-radius: 10px;
    background: #fff;
    width: 80%;
    margin: auto;
    position: absolute;
    top: 50%; left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
.pay-or-nopay div{
    border-bottom: 1px solid #aaa;
    padding: 15px 0;
}
.pay-or-nopay div:last-child{
    border: 0;
}