﻿/*某星座首页*/
.astro_box
{
    width: 100%;
    position: relative;
    background-color: #fefefe;
    background-image: url(img/mouxingzuo_bg.png);
    background-size: 100% ;
    background-repeat: no-repeat;
}
.astro_box:after
{
    content: "";
    display: block;
    padding-bottom:156%;
}

/*LOGO*/
.astro_logo
{
    width: 33%;
    position: absolute;
    top: 9.2%;
    left: 50%;
    margin-left:-16.5%;
}
.astro_logo span
{
    display: block;
    box-sizing: border-box;
    background-image: url(img/astro.png);
    background-repeat: no-repeat;
    background-size: auto 100%; 
    background-position: -0.66% 0.03rem;
    margin-bottom: 10%;
}
.astro_logo span:after
{
    content: "";
    display: block;
    padding-bottom:100%;
}
.astro_logo.by span { background-position: -0.66% 0.03rem;}
.astro_logo.jn span { background-position: 8.60% 0.03rem; }
.astro_logo.sz span { background-position: 17.9% 0.03rem; }
.astro_logo.jx span { background-position: 26.95% 0.03rem; }
.astro_logo.shz span { background-position: 36.69% 0.03rem; }
.astro_logo.cn span { background-position: 45.38% 0.03rem; }
.astro_logo.tc span { background-position: 54.5% 0.03rem; }
.astro_logo.tx span { background-position: 63.90% 0.03rem; }
.astro_logo.ss span { background-position: 72.75% 0.03rem; }
.astro_logo.mj span { background-position: 81.65% 0.03rem; }
.astro_logo.sp span { background-position: 91.30% 0.03rem; }
.astro_logo.sy span { background-position: 100.38% 0.03rem; }
.astro_logo h1
{
    display: inline-block;
    width: 100%;
    color: #f7f7f7;
    font-style: normal;
    font-weight: bold;
    font-size: 0.44rem;
    text-indent: 0.38rem;
    text-align: center;
}
.astro_logo h1 i
{
    display: inline;
    font-size: 0.24rem;
    color: #dec3f3;
    margin-left: 0.1rem;
    font-weight: normal;
}
.astro_logo em
{
    display: block;
    font-size: 0.3rem;
    color: #dec3f3;
    text-align: center;
    font-style: normal;
}

/*属性*/
.astro_shuxing
{
    width: 100%;
    position: absolute;
    top: 44%;
    padding: 0 0.2rem;
    box-sizing: border-box;
}
.astro_shuxing:after
{
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
.astro_shuxing span
{
    display: block;
    float: left;
    width: 33.3%;
    color: #FAFAFA;
    font-size: 0.36rem;
    line-height: 0.46rem;
    text-align: center;
    padding-bottom: 0.36rem;
}
.astro_shuxing em
{
    display: block;
    font-size: 0.26rem;
    color: #d9caf3;
    font-style: normal;
}

/*性格*/
.astro_info
{
    width: 86%;
    position: absolute;
    top: 74.5%;
    left: 50%;
    margin-left: -43%;
    font-size: 0.34rem;
    line-height: 0.5rem;
    text-align: justify;
    box-sizing: border-box;
    padding: 0.34rem;
    color: #d7c3f8;
    background-color: #b25aed;
    border-radius: 0.4rem;
}
.astro_info a
{
    color: #f8bc3e;
}

/*运势*/
.astro_yunshi
{
    padding: 0.6rem 0.46rem 0;
    background-color: #fefefe;
}
.astro_yunshi h4
{
    text-align: center;
    font-size: 0.36rem;
}
.astro_yunshi h4 a
{
    color: #606060;
}
.astro_yunshi p
{
    font-size: 0.32rem;
    line-height: 0.48rem;
    color: #606060;
    text-align: justify;
}
.astro_yunshi p a
{
    color: #f8bc3e;
}
.astro_yunshi .star
{
    display: block;
    margin: 0.1rem auto 0.4rem;
    width: 1.6rem;
    height: 0.28rem;
    background-image: url(img/start_bg.png);
    background-repeat: no-repeat;
    background-size: 100%;
}
.astro_yunshi .star5 { background-position: 0 0; }
.astro_yunshi .star4 { background-position: 0 20%; }
.astro_yunshi .star3 { background-position: 0 40%; }
.astro_yunshi .star2 { background-position: 0 60%; }
.astro_yunshi .star1 { background-position: 0 80%; }

/*配对*/
.astro_peidui
{
    padding: 0.7rem 0.26rem 0;
    background-color: #fefefe;
}
.astro_peidui h4
{
    padding-bottom: 0.4rem;
    text-align: center;
    font-size: 0.36rem;
}
.astro_peidui h4 a
{
    color: #606060;
}
.astro_peidui p
{
    width: 80%;
    margin: auto;
}
.astro_peidui p:after
{
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
.astro_peidui p a
{
    width: 25%;
    float: left;
    font-size: 0.28rem;
    text-align: center;
    color: #606060;
}
.astro_peidui p a span
{
    display: block;
    width: 0.8rem;
    height: 0.8rem;
    margin: auto;
    box-sizing: border-box;
    border-radius:50%;
    border: 2px solid #e0e0e0;
    background-color: #efefef;
    background-image: url(img/astro.png);
    background-repeat: no-repeat;
    background-size: auto 100%;
}
.astro_peidui span.by { background-position: -0.66% 0.03rem;}
.astro_peidui span.jn { background-position: 8.60% 0.03rem; }
.astro_peidui span.sz { background-position: 17.9% 0.03rem; }
.astro_peidui span.jx { background-position: 26.95% 0.03rem; }
.astro_peidui span.shz { background-position: 36.69% 0.03rem; }
.astro_peidui span.cn { background-position: 45.38% 0.03rem; }
.astro_peidui span.tc { background-position: 54.5% 0.03rem; }
.astro_peidui span.tx { background-position: 63.90% 0.03rem; }
.astro_peidui span.ss { background-position: 72.75% 0.03rem; }
.astro_peidui span.mj { background-position: 81.65% 0.03rem; }
.astro_peidui span.sp { background-position: 91.30% 0.03rem; }
.astro_peidui span.sy { background-position: 100.38% 0.03rem; }

/*标签*/
.astro_tag
{
    padding: 0.6rem 0.46rem;
    background-color: #fefefe;
}
.astro_tag:after
{
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
.astro_tag a
{
    display: inline-block;
    float: left;
    width: 22%;
    height: 0.6rem;
    font-size: 0.28rem;
    line-height: 0.6rem;
    text-align: center;
    color: #606060;
    margin-right: 4%;
    margin-top: 0.3rem;
    border: 1px solid #eaeaea;
    border-radius: 4px;
    box-sizing: border-box;
}
.astro_tag a:nth-child(4),
.astro_tag a:last-child
{
    margin-right: 0;
}