@import url(layout.css?v=5.1); 
.mpart { background-size: cover;  background-image:url(../images/gender/bg1.svg); height:auto; margin:0;}
.card_bottom{ bottom:-0.7rem;}

.tbox{margin-top: 0.7rem;}
.tbox .top{background: linear-gradient(0, rgba(255,255,255,0) 20%, rgba(255,255,255,0.1) 60%, rgba(255,255,255,0.37));width:7.47rem;border-radius: 0.27rem;margin: 0.1rem auto 0;text-align: center;position: relative;}
.tbox .top:before{position:absolute;content:'';background:url(../images/gender/gender_bg.png);background-size: 2.54rem auto;width:2.54rem;height:1.16rem;top:-1.16rem;left:50%;margin-left: -1.27rem;}

.tbox .top em{width: 1.4rem;height: 1.4rem;display: inline-block;background: linear-gradient(0, #ffe5f8, #fff);padding: 0.1rem;margin: -0.98rem auto 0;background-size: 1.6rem;position: relative;border-radius: 100%;}
.boy .tbox .top em{background: linear-gradient(0, #e0ebff, #fff);}
.tbox .top em img{ width:100%; height:100%;}
.tbox .top b{color:#fff;font-size:0.4rem;display:block;line-height: 0.8rem;background:url(../images/gender/sel_arrow.png) no-repeat right center;background-size: 0.35rem;width: 1.65rem;margin: 0 auto;text-align: left;padding-left: 0.3rem;}

.tbox .top dt{text-align: center;margin: 0.16rem auto 0;font-size: 0;width:2.8rem;height:0.8rem;border-radius:0.8rem;background: rgba(197,59,130,0.5);}
.boy .tbox .top dt{ background:rgba(84,94,232,0.5);}
.tbox .top dt a{ display:inline-block; width:1.4rem; font-size:0.37rem; height:0.8rem; line-height: 0.8rem;  border-radius: 0.8rem; color:#fff;}
.tbox .top dt a.cur{background:#d9e5ff; color:#6e88f4; font-weight: bold;}
.tbox .top dd {color:#fff;margin:0 0.37rem;padding: 0.2rem 0.1rem 1.3rem;border-radius: .25rem;font-size: 0.4rem;}
.tbox .top dd li {line-height:0.8rem;float: none;width: auto;margin: 0;color: #fff;}
.tbox .top dd li strong{color: rgba(255,255,255,0.7);font-weight: normal;}
.tbox .top dd p{ background:none; padding:0; margin:0; color:#fff; text-indent: 2em;line-height:0.8rem;}

.girl .mpart { background-image:url(../images/gender/bg2.svg) }
.girl .tbox .top dt a.cur{background-color: #ffd6f5; color:#ec63aa;}
.murl { padding:0 0.26rem; display: -webkit-box; font-size: 0.38rem; margin-bottom: 0.4rem;}
.murl a {display: block;text-align: center;-webkit-box-flex: 1;box-sizing:border-box;color:#fff;margin:0.1rem;line-height:1rem;border-radius: .2rem;padding-right: 0.09rem;}
.murl a i{background:url(../images/gender/icon_murl.png) no-repeat 0 0;background-size: 0.56rem auto;width:0.56rem;height:0.56rem;display:inline-block;vertical-align: middle;margin-right: 0.05rem;}
.murl a:nth-child(2) i{ background-position: 0 -0.56rem;}
.murl a:nth-child(3) i{ background-position: 0 -1.12rem;}
.girl .murl a:nth-child(1){background:linear-gradient(0, #e967cf, #f289dd); box-shadow: 0 2px 2px rgba(233,103,277,0.2);}
.girl .murl a:nth-child(2){background:linear-gradient(0, #fe8081, #ff999a); box-shadow: 0 2px 2px rgba(254,128,129,0.2); width:2.5rem;}
.girl .murl a:nth-child(3){background:linear-gradient(0, #be7cf1, #cb92f8); box-shadow: 0 2px 2px rgba(190,124,241,0.2);}

.boy .murl a:nth-child(1){background:linear-gradient(0, #5abae2, #88d1ee); box-shadow: 0 2px 2px rgba(90,186,226,0.2);}
.boy .murl a:nth-child(2){background:linear-gradient(0, #74caa6, #90ddc9); box-shadow: 0 2px 2px rgba(148,213,187,0.2); width:2.5rem;}
.boy .murl a:nth-child(3){background:linear-gradient(0, #8f91f6, #9dabff); box-shadow: 0 2px 2px rgba(143,145,246,0.2);}


.fortune h4 {
    color: #f5890a;
    font-size: 0.48rem;
    margin-bottom: 0.2rem;
}

.viewcont { padding:0 0.37rem;}
.viewcont .outer { overflow:hidden;}
.viewcont .cont { background:#fff; line-height:1rem; font-size: 0.463rem;}
.viewcont .cont h2 {font-size:0.53rem; color:#e65992; line-height: 1rem; font-weight: 700;}
.viewcont .cont p { text-indent: .926rem; }
.viewcont .cont a { color: #5a96d2; }
.viewcont .cont a u { text-decoration: none }
.viewcont .cont img { max-width: 100%; display:block; margin:0 auto; }
.viewcont .cont .desc { background:#f6f6f6; border-radius: .2rem; color:#777; text-indent: 2em; padding:0.37rem; margin:0 0 0.5rem; font-size:0.426rem;}
.viewcont .teles { text-align: center; display:block; color:#ff9c00; font-size: 0.38rem; background: linear-gradient(to bottom , rgba(255,255,255,0) , #fff 60%); height: 1.5rem; position: relative; margin-top: -2rem; padding-top: 2.5rem;}
.viewcont .teles i { display: inline-block; padding-bottom:0.3rem; }
.viewcont .teles i small { display: block; width: .5rem; height: .5rem; border-radius: 1rem; margin: .1rem auto; background: #ffbf5b url(../images/arrow_down.png) no-repeat center 50% ;background-size:0.3rem auto;  }
.viewcont .relat { margin-top: .5rem }