/*构造命盘形状*/
#太极盘 {
    /* border: 1px solid red; */
    width: 550px;
    height: 550px;
    left: 395px;
    top: 95px;
    /*1使之为一个圆 */
    border-radius: 50%;
    /*2 position: relative;使元素在同一行 */
    position: relative;
    /* 超过我的部分隐藏，即圆形之外 */
    /*overflow: hidden;*/
    /*旋转：linear（匀速）*/
    /*animation: x 5s infinite linear;*/
    /*阴影 CSS3属性 */
    /*box-shadow: 0px 0px 5px 3px rgba(0, 0, 075);*/
}

/*命盘图片引用*/
/* #太极盘>div:first-child {
    border: 1px solid green;
    width: 110%;
    height: 110%;
    position: relative;
    left: 60px;
    top: 60px;
    background-repeat: no-repeat;
    background-size: 70% 70%;
} */

#五行环 {
    position: relative;
    height: 500px;
    width: 100%;
}

/*日期框div*/
.col-sm-6 {
    /* position: relative; */
    top: -400px;
    left: 700px;
}

.form-group {
    /* float: left; */
    /* margin-left: -20px; */
    position: relative;
    float: left;
}


body {
    background: #eee;
}

* {
    box-sizing: border-box;
    /*4元素不重叠后还是有点点重合了，所以需要改变核模型 */
    padding: 0;
    margin: 0;
}







/*构造命盘指针*/
#指针 {
    /*使其浮于命盘*/
    position: absolute;
    z-index: 1;
    width: 12px;
    height: 275px;
    /*位置*/
    top: 16%;
    left: 49%;
    /*rgba(R,G,B,A),R、G、B三个参数取值范围为：0 - 255。A为透明度参数，取值在0~1之间*/
    background: rgba(216, 54, 54, 0.85);
}



#命盘-wrapper {
    /*解除位置锁定*/
    position: relative;
    /*A flex默认会把里面的元素横的一致排开*/
    display: flex;
    justify-content: center;
    margin: auto;
    /*设置位置*/
    /* left: 50px; */
    /* top: -30px; */

    /*B 需要加这个才会竖直排列*/
    flex-direction: column;
    /*居左*/
    /* float: left; */
}


/*构造命盘形状*/
@media(min-width: 200px) {
    #命盘 {
        width: 600px;
        height: 600px;
        border-radius: 50%;
        position: relative;
        /* overflow: hidden; */
        /* box-shadow: 0px 0px 5px 3px rgb(0 0 75); */
        /* margin: 0 auto; */
        left: 20px;
        top: 70px;
    }
}

@media(min-width: 992px) {
    #命盘 {
        width: 600px;
        height: 600px;
        /*1使之为一个圆 */
        border-radius: 50%;
        /*2 position: relative;使元素在同一行 */
        position: relative;
        /* 超过我的部分隐藏，即圆形之外 */
        overflow: hidden;
        /*阴影 CSS3属性 */
        /*box-shadow: 0px 0px 5px 3px rgba(0, 0, 075);*/
        margin: 0 auto;
        left: 300px;
        top: 50px;
    }
}


/* 2021.5.14 运气时图太过不及说明 */
@media(min-width: 200px) {
    .five_elements_more_or_less {
        height: 210px;
        width: 100px;
        /* background: #000000; */
        position: absolute;
        left: 600px;
        top: 40px;
        /* background-image: url(../images/five_elements_more_less/h0.png); */
        /* background-position: center; */
        background-size: cover;
    }
}

@media(min-width: 992px) {
    .five_elements_more_or_less {
        height: 350px;
        width: 175px;
        /* background: #000000; */
        position: absolute;
        left: 950px;
        top: 50px;
        /* background-image: url(../images/five_elements_more_less/h0.png); */
        /* background-position: center; */
        background-size: cover;
    }
}




.explanation1 {
    position: relative;
    float: right;
    text-align: left;
    overflow: auto;


    width: 80%;
    height: 75%;
    right: 20px;
    padding: 10px;

    background: rgba(255, 255, 255, 0.59);
    border-radius: 10px 10px 10px 10px;


    font-size: 19px;
    /* 字体大小 */
    color: #000000;
    font-family: '隶书';
}


.huo_wrap {
    position: relative;
    width: 200px;
    height: 200px;
    /* left: -9px;
    top: -62px; */
    /* transform: rotate(45deg); */
    left: -37px;
    top: -17px;
}

.tu_wrap {
    position: relative;
    width: 200px;
    height: 200px;
    /* left: 255px;
    top: -92px; */
    /* transform: rotate(45deg); */
    left: 216px;
    top: -50px;
}

.mu_wrap {
    position: relative;
    width: 200px;
    height: 200px;
    /* left: -251px;
    top: -293px; */
    /* transform: rotate(45deg); */
    left: -290px;
    top: -250px;
}

.jin_wrap {
    position: relative;
    width: 200px;
    height: 200px;
    /* left: 160px;
    top: -193px;
    transform: rotate(45deg); */
    left: 120px;
    top: -150px;
}

.shui_wrap {
    position: relative;
    width: 200px;
    height: 200px;
    left: -207px;
    top: -355px;
}

/*火环元素*/
.huo_loader0 {
    position: relative;
    left: 169px;
    top: -55px;
}

.huo_loader1 {
    position: relative;
    left: 75px;
    top: -45px;
}

.huo_loader2 {
    position: relative;
    left: 149px;
    top: -160px;
}

.huo_loader3 {
    position: relative;
    left: 139px;
    top: -290px;
}i

.huo_loader4 {
    position: relative;
    left: 129px;
    top: -440px;
}

.huo_loader5 {
    position: relative;
    left: 119px;
    top: -610px;
}

.huo_loader6 {
    position: relative;
    left: 109px;
    top: -800px;
}

/*土环元素*/
.tu_loader0 {
    position: relative;
    left: 170px;
    top: -35px;
}

.tu_loader1 {
    position: relative;
    left: 76px;
    top: -25px;
}

.tu_loader2 {
    position: relative;
    left: 149px;
    top: -140px;
}

.tu_loader3 {
    position: relative;
    left: 139px;
    top: -270px;
}

.tu_loader4 {
    position: relative;
    left: 129px;
    top: -420px;
}

.tu_loader5 {
    position: relative;
    left: 109px;
    top: -600px;
}

.tu_loader6 {
    position: relative;
    left: 109px;
    top: -800px;
}

/*木环元素*/
.mu_loader0 {
    position: relative;
    left: 170px;
    top: -35px;
}

.mu_loader1 {
    position: relative;
    left: 76px;
    top: -25px;
}

.mu_loader2 {
    position: relative;
    left: 149px;
    top: -140px;
}

.mu_loader3 {
    position: relative;
    left: 139px;
    top: -270px;
}

.mu_loader4 {
    position: relative;
    left: 129px;
    top: -420px;
}

.mu_loader5 {
    position: relative;
    left: 109px;
    top: -600px;
}

.mu_loader6 {
    position: relative;
    left: 109px;
    top: -800px;
}

/*金环元素*/
.jin_loader0 {
    position: relative;
    left: 170px;
    top: -35px;
}

.jin_loader1 {
    position: relative;
    left: 76px;
    top: -25px;
}

.jin_loader2 {
    position: relative;
    left: 149px;
    top: -140px;
}

.jin_loader3 {
    position: relative;
    left: 139px;
    top: -270px;
}

.jin_loader4 {
    position: relative;
    left: 129px;
    top: -420px;
}

.jin_loader5 {
    position: relative;
    left: 109px;
    top: -600px;
}

.jin_loader6 {
    position: relative;
    left: 109px;
    top: -800px;
}

/*水环元素*/
.shui_loader0 {
    position: relative;
    left: 170px;
    top: -35px;
}

.shui_loader1 {
    position: relative;
    left: 76px;
    top: -25px;
}

.shui_loader2 {
    position: relative;
    left: 149px;
    top: -140px;
}

.shui_loader3 {
    position: relative;
    left: 139px;
    top: -270px;
}

.shui_loader4 {
    position: relative;
    left: 129px;
    top: -420px;
}

.shui_loader5 {
    position: relative;
    left: 109px;
    top: -600px;
}

.shui_loader6 {
    position: relative;
    left: 109px;
    top: -800px;
}

/* 控制相对位置 */





/* 五行的解释 */

.luck_total {
    position: relative;
    bottom: 700px;
    left: 720px;
    width: 200px;
    height: 300px;
}



.luck_total p {
    font-family: "微软雅黑";
    font-size: larger;
    font-weight: bold;
    color: white;
}



.luck_total img {
    width: 50px;
    height: 50px;
}




/*      第一个命盘的解释      */
.luck_total2 {
    width: 400px;
    position: absolute;
    bottom: 130px;
    left: 620px;

}

.luck_total2 img {
    width: 50px;
    height: 50px;
}

.luck_total2 div p {


    font-size: medium;
    font-family: "微软雅黑";
    font-weight: bold;
}







/* 设置移动端自适应显示，必须在原属性下方设置 */
@media(max-width: 500px) {
    #太极盘 {
        width: 200px;
        height: 200px;
        width: 550px;
        height: 550px;
        left: 180px;
        top: 90px;
        border-radius: 50%;
        position: relative;
    }

    #五行环 {
        position: relative;
        height: 700px;
        width: 100%;
    }

    #命盘 {
        width: 100px;
        height: 100px;
    }



    /* 太极背景图 */
    .tab-para {
        background-size: 100% auto;
        background-repeat: no-repeat;
        /* 图片不重复 */
        /* height: 714px; */
    }

    .huo_wrap {
        position: relative;
        width: 50px;
        height: 50px;
        left: -70px;
        top: -190px;
        transform: rotate(45deg);
    }

    .tu_wrap {
        position: relative;
        width: 50px;
        height: 50px;
        left: -70px;
        top: -190px;
        transform: rotate(45deg);
    }

    .jin_wrap {
        position: relative;
        width: 50px;
        height: 50px;
        left: -70px;
        top: -190px;
        transform: rotate(45deg);
    }

    .shui_wrap {
        position: relative;
        width: 50px;
        height: 50px;
        left: -70px;
        top: -190px;
        transform: rotate(45deg);
    }

    .mu_wrap {
        position: relative;
        width: 50px;
        height: 50px;
        left: -70px;
        top: -190px;
        transform: rotate(45deg);
    }

    /* .radar {
        left: 160px;
        top: 201px;
    } */


    .about-us h3 {
        color: #fff;
        font-size: 15px;
        text-transform: inherit;
        max-width: 100px;
        /* font-weight: 600; */
        /* line-height: 1.22; */
    }

}