@import url(layout.css?v=6);

header {
    opacity: 0.8;
}

header.header {
    opacity: 1;
}

.mpart {
    background-size: 100%;
    background: linear-gradient(115deg, #131552, #5d219e);
}

.vision {
    position: absolute;
    width: 100%;
}

.vision .s_mide {
    height: 12rem;
    opacity: 0.5;
}

.vision_bottom {
    position: absolute;
    bottom: -0.8rem;
}

.vision .s_botm:nth-child(1n),
.vision .s_botm:nth-child(2n) {
    margin-top: -2.2rem;
}

.hkl {
    opacity: 0.55;
}

.mpart .bgimg {
    background: url(../images/astrolabe_pair/bgimg.png) no-repeat 0 0;
    background-size: 9.5rem;
    width: 9.5rem;
    height: 9.5rem;
    position: absolute;
    bottom: -5rem;
    right: -3.5rem;
    animation: rotate 200s linear infinite;
    opacity: .8;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.plus_box .plus_mpart {
    background: linear-gradient(115deg, #131552, #5d219e);
}

.inp_form {
    position: relative;
    top: 0;
    width: 100%;
    max-width: 750px;
    padding: 1.5rem 0 2rem;
    overflow: hidden;
    z-index: 1
}

.inp_form strong {
    background: url(../images/astrolabe_pair/tit.png) no-repeat .5rem 0;
    background-size: 8rem 2.5rem;
    width: 8.5rem;
    height: 2.5rem;
    display: block;
    margin: 0 auto -.2rem;
    padding-top: 1.7rem;
    box-sizing: border-box;
}

.inp_form strong p {
    font-size: .32rem;
    color: #fff;
    opacity: .8;
    font-weight: normal;
    text-align: center;
}

.inp_form strong p span {
    margin: 0 .2rem;
    opacity: .6;
}

.inpbox {
    min-height: auto;
    background: rgba(0, 0, 0, .2);
}

.inpbox input[type=text],
.inpbox span {
    height: 1rem;
    line-height: 1rem;
    text-align: left;
    font-size: .36rem;
    margin: 0;
}

.inpbox input[type=text],
.inpbox span.notempty {
    color: #fff;
}

.inp_form .inp_box {
    border-radius: .4rem;
    padding: .3rem .8rem;
    box-sizing: border-box;
    font-size: 0;
    margin: .35rem .7rem 0;
}

.inp_form .inp_box.girlbox {
    background: rgba(163, 88, 172, .3);
    margin-top: .6rem;
}
.inp_form .inp_box.boybox {
    background: rgba(91, 97, 204, .3);
}


.inp_form .inp_box .inplabel label {
    color: #a9bff6;
    display: inline-block;
    width: 1.5rem;
    vertical-align: top;
    line-height: .8rem;
    font-size: .36rem;
    height: .8rem;
    text-align: right;
    margin-right: .3rem;
}

.inp_form .inp_box.boybox .inplabel label {
    color: #a9bff6;
}

.inp_form .inp_box.girlbox .inplabel label {
    color: #ebb2cc;
}

.radio-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.inp_form .inp_box .inplabel label.radio-item {
    width: auto;
}

.radio-item {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
}

.inpbox span.radio-icon {
    text-align: center
}

.radio-icon {
    position: relative;
    width: 18px;
    height: 18px;
    border-radius: .926rem;
}

.radio-input:checked+.radio-icon {
    background: #83a1ed;
    color: #fff;
    text-align: center;
}

.boybox .radio-input:checked+.radio-icon {
    background: #83a1ed;
}

.girlbox .radio-input:checked+.radio-icon {
    background: #e783b0;
}

.inp_form .inpbox {
    margin: 0;
    display: inline-block;
    width: 4rem;
}

.inp_form .inplabel {
    margin: .3rem 0;
}

.inp_form .name {
    width: 5rem;
}

.inp_form .datebox {
    width: 4rem;
}

.inp_form .timebox {
    width: 3rem;
}

.inp_form .placebox {
    width: 5rem;
}


.inp_form button {
    font-size: 0.43rem;
    background: linear-gradient(155deg, #7d42b4, #c850ba);
    margin: .5rem .7rem 0;
    display: block;
    width: -webkit-fill-available;
    height: 1.3rem;
    border-radius: .3rem;
    box-shadow: none;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
}

.inp_form button i {
    background: url(../images/arrow_more_r.png) no-repeat 0 50%;
    width: .45rem;
    height: .45rem;
    background-size: .35rem;
    margin-left: .2rem;
}


.toollist {
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid #eee;
}

.toollist ul li {
    margin: 0;
}


/*结果页*/
.pl_tbox {
    margin: .5rem 0 0;
    position: relative;
}

.pl_tbox img {
    width: 100%;
    height: auto;
    display: block;
}

.pl_back {
    background: linear-gradient(90deg, #6b4ce1, #9d51f2);
    box-shadow: inset 0 -.2rem rgba(0, 0, 0, .1);
    margin: 0 .8rem;
    border-radius: .2rem;
    line-height: 1.1rem;
    color: #fff;
    text-align: center;
    padding-bottom: .17rem;
    font-weight: bold;
    font-size: .45rem;
    display: block;
}

.pl_table {
    background: linear-gradient(90deg, #6b4ce1, #9d51f2);
    box-shadow: inset 0 -.2rem rgba(0, 0, 0, .1);
    margin: 0 .8rem;
    border-radius: .2rem;
    line-height: 1.1rem;
    color: #fff;
    text-align: center;
    padding-bottom: .17rem;
    font-weight: bold;
    font-size: .45rem;
}

.pl_table i {
    background: url(../images/arrow6.png) no-repeat 0 0;
    width: .45rem;
    height: .45rem;
    background-size: .45rem;
    transform: rotate(-90deg);
    display: inline-block;
    vertical-align: middle;
    margin-left: .12rem;
    margin-top: -.05rem;
}

.table_list {
    display: none;
}

.table_list h3 {
    text-align: center;
    font-size: .46rem;
}

.table_list .table_box {
    margin: .3rem 0 .6rem;
}

.table_list .table_box dl dt {
    background: #f5f5f5;
    line-height: .8rem;
    border-radius: .1rem;
    font-size: .38rem;
    color: #999;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    font-size: .28rem;
}

.table_list .table_box dl dt label {
    flex: auto;
    text-align: center;
    width: 1rem;
}

.table_list .table_box dl dt label:first-child {
    width: .35rem;
}

.table_list .table_box dl dt label.long1 {
    width: 1.2rem;
}

.table_list .table_box dl dt label.long2 {
    width: 1.6rem;
}

.table_list .table_box dl dd {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    font-size: .28rem;
    border-bottom: 1px solid #eee;
}

.table_list .table_box dl dd span {
    flex: auto;
    text-align: center;
    padding: .2rem 0;
    box-sizing: border-box;
    display: block;
    width: 1rem;
    white-space: nowrap;
}

.table_list .table_box dl dd span:first-child {
    width: .35rem;
}

.table_list .table_box dl dd span.long1 {
    width: 1.2rem;
}

.table_list .table_box dl dd span.long2 {
    width: 1.6rem;
}

.table_list .table_box dl dd span img {
    width: .45rem;
    height: .45rem;
    display: inline-block;
    vertical-align: sub;
    margin-right: .1rem;
}

.pl_list {
    margin-top: .5rem;
    position: relative;
}

.pl_list h2 {
    padding: .4rem .38rem .3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: none;
}

.analyzer {    
    border-top: solid .3rem #ebebeb;
}
.pl_list.analyzer:first-of-type {
    border-top: none !important;
}

.pl_list h2 strong {
    color: #7458db;
}

.pl_list h2 span {
    color: #b13dce;
    background: #f9e2ff;
    font-size: .375rem;
    font-weight: normal;
    line-height: .65rem;
    display: inline-block;
    padding: 0 .2rem;
    margin-left: .15rem;
    border-radius: .1rem;
}

.pl_list h2 .score {
    font-weight: normal;
    color: #ff3f65;
    padding: 0 .2rem;
    line-height: .6rem;
    border-radius: .4rem;
    margin-top: .2rem;
    float: right;
    font-size: .3rem;
}
.pl_list h2 .score i {
    font-size: .45rem;
    font-weight: 700;
}

.pl_list h2 small {
    font-weight: normal;
    color: #7458db;
    background: #e8e2ff;
    padding: 0 .2rem;
    font-size: .3rem;
    line-height: .6rem;
    border-radius: .4rem;
    margin-top: .2rem;
}

.pl_list h2 small i {
    background: url(../images/astrolabe_pair/arrow_T.png) no-repeat center;
    background-size: .3rem;
    width: .3rem;
    height: .3rem;
    margin-left: .1rem;
    padding: 0;
    vertical-align: middle;
    margin-top: -.08rem;
    transform: rotateX(180deg)
}

.pl_list h2 small.active i {
    transform: rotateX(0deg)
}

.pl_list.show_all .expandBox {
    display: none;
}


.pl_list .expandBox {
    text-align: center;
    padding: .25rem .1rem .35rem;
    margin: 0 .3rem;
    border-radius: .2rem;
    display: flex;
    flex-direction: column;
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    bottom: 0;
    backdrop-filter: blur(.1rem);
    -webkit-backdrop-filter: blur(.1rem);
    /* filter: blur(10px); */
    /* 为了实现只模糊边缘的效果，添加边框 */
    box-shadow: 0 -.1rem .3rem .2rem rgba(255, 255, 255, 1);

}

.pl_list .expandBox::before {
    content: '';
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: #ffffff91;
    box-shadow: inset 0 0 .3rem .2rem rgba(255, 255, 255, 1);

}

.pl_list .expandBox span {
    display: block;
    margin-bottom: .35rem;
    color: #37363a;
    background: #ece4f383;
    border-radius: .2rem;
    padding: .2rem .5rem;
    font-size: .375rem;
}

.pl_list .expandBox strong {
    color: #802ecc;
    font-size: .4rem;
    font-weight: normal;

}

.pl_list .expandBox strong {
    background: linear-gradient(135deg, #df7ec4, #9457cc);
    display: block;
    height: 1rem;
    border-radius: 1rem;
    text-align: center;
    line-height: 1rem;
    margin: 0 auto;
    color: #fff;
    padding: 0 .6rem;
    box-shadow: 0 0 .2rem rgba(0, 0, 0, .25);
}

.pl_list .expandBox strong i {
    background:url(../images/arrow_more3.png) no-repeat center;
    width: .4rem;
    height: .4rem;
    background-size: 85%;
    margin-right: .1rem;
    display: inline-block;
    vertical-align: middle;
    
}
.pl_list.lock .expandBox strong i{ background-image: url(../images/icon_lock.png);margin-top: -0.12rem;}

.pl_list.aminate {

    transition: height 0.3s ease;
    height: 6rem;
}

.pl_info {
    margin: 0 .4rem;
    overflow: hidden;
    position: relative;
}

.pl_info.show {
    display: block;
}

.pl_list.show_all .pl_info {
    height: auto;
}

.pl_info .pl_con {
    line-height: .8rem;
    font-size: .425rem;
    text-align: justify;
    padding: .25rem 0;
}

.pl_info p strong {
    color: #7068d4;

}

.pl_info .des {
    text-align: justify;
    background: #fff7ec;
    color: #df8e24;
    font-size: .375rem;
    padding: .2rem .35rem;
    border-radius: .2rem;
    line-height: .45rem;
}
.pl_info .des div {
    margin-top: .15rem;
}
.pl_info .calcProcess {
    text-align: justify;
    font-size: .375rem;
    line-height: .5rem;
    line-height: 1.8;
    display: none;
    margin-top: .2rem;
}
.pl_info .calcProcess .processType {
    padding: .1rem 0;
    padding: .2rem .35rem;
    border-radius: .2rem;
}
.pl_info .calcProcess .processPositive {
    background: #ffebf1;
    color: #ca3461;
    margin-bottom: .1rem;
}
.pl_info .calcProcess .processNegative {
    background: #f1eafa;
    color: #7650a5;
}
.pl_info .calcProcess label {
    font-weight: bold;
}


.pay_layer {
    display: none;
}

.layer {
    background: rgba(0, 0, 0, .5);
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 1;
}

.pay_box {
    background: #fff;
    border-radius: .4rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: fixed;
    width: 8rem;
    z-index: 1;
}

.pay_box .tit {
    padding: 0 .45rem;
    line-height: 1.2rem;
    border-bottom: 1px solid #eee;
    font-size: .4rem;
    font-weight: bold;
}

.pay_box .tit i {
    background: url(../images/icon_cancel.png) no-repeat 0 0;
    background-size: .5rem;
    width: .5rem;
    height: .5rem;
    float: right;
    margin-top: .35rem;
}

.pay_box .con {
    padding: .2rem .45rem .45rem;
}

.pay_box .con p {
    font-size: .34rem;
    text-align: justify;
    line-height: .55rem;
}

.pay_box .con dl {
    background: #f1f1f1;
    font-size: .34rem;
    padding: .1rem .3rem;
    border-radius: .2rem;
    margin-top: .2rem;
    line-height: .7rem;
    color: #555;
    margin-bottom: .3rem;
}

.pay_box .con dl span {
    color: #333;
    font-weight: bold;
}

.pay_box .con dl span.f_red {
    color: #f00;
    font-size: .5rem;
}

.pay_box .con dl span.f_red i {
    font-size: .32rem;
}

.pay_box .con .pay_btn {
    display: block;
    width: 100%;
    margin-top: .2rem;
    color: #fff;
    height: 1.2rem;
    border-radius: 1.2rem;
    font-size: .4rem;
}

.pay_box .con .pay_btn i {
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    width: .5rem;
    height: .5rem;
    display: inline-block;
    margin-right: .15rem;
    vertical-align: middle;
    margin-top: -.1rem;
}

.pay_box .con .pay_btn.wx_pay {
    background: #30b640;
}

.pay_box .con .pay_btn.zfb_pay {
    background: #1faae7;
}

.pay_box .con .pay_btn.wx_pay i {
    background-image: url(../images/icon_wxpay.png);
}

.pay_box .con .pay_btn.zfb_pay i {
    background-image: url(../images/icon_zfbpay.png);
}

/*查看订单*/
.link_order {
    display: none;
    position: absolute;
    right: 0;
    width: 1rem;
    background: #be5b7b;
    border-radius: .2rem 0 0 .2rem;
    color: #fff;
    font-size: .36rem;
    text-align: center;
    line-height: .42rem;
    box-sizing: border-box;
    padding: .3rem .2rem;
    top: 12rem;
}

.view .link_order {
    top: 12rem;
}