section.popup{
    background: #1e1103;
}

section.popup .content-wrapper{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
}

section.popup .ziwei .card-button{
    display: flex;
    justify-content: space-between;
    position: absolute;
    top: -3em;
    left: 0.5em;
    width: 100%;
    color: white;
    border: none;
    cursor: pointer;
}

section.popup .ziwei .card-button .block-left{

}

section.popup .ziwei .card-button .block-left .btn-back{
    font-size: 1.25em;
    font-weight: 600;
}

section.popup .ziwei .card-button .block-right{

}

section.popup .ziwei .card-button .block-right select{
    margin-left: 1em;
    padding: 0.3125em 1em;
    border-radius: 0.25em;
}

section.popup .ziwei .card-button .block-right .btn-liunian{
    padding: 0.25em 1em;
    background: #795548;
    border: 1px solid #ccc;
    font-size: 0.875em;
    border-radius: 0.25em;
    cursor: pointer;
}

section.popup .ziwei .card-button .block-right .btn-daxian{
    padding: 0.25em 1em;
    background: #795548;
    border: 1px solid #ccc;
    font-size: 0.875em;
    border-radius: 0.25em;
    cursor: pointer;
}

section.popup .ziwei{
    position: relative;
    width: 100%;
    height: 70vh;
    zoom: 0.8;
}

section.popup .ziwei .MangC{
    bottom: 1em;
}

section.popup .ziwei .MangY1,
section.popup .ziwei .MangY10{
    font-size: 0.75em;
    zoom: 0.8;
}

section.popup .ziwei .position{
    cursor: pointer;
}

section.popup .ziwei .position:after{
    content: attr(data-daword);
    display: none;
}

section.popup .ziwei .position.daxian:after{
    content: attr(data-daword);
    display: block;
    position: absolute;
    width: 100%;
    zoom: 1.5;
    color: #3F51B5;
    text-align: center;
    left: 50%;
    /* Vertical centering */
    top: 50%;
    /* Combining both horizontal and vertical centering */
    transform: translate(-50%, -50%);
}

section.popup .ziwei .position:hover{
    /*    filter: brightness(1.1);*/
}

section.popup .ziwei .position[data-target]{
}

section.popup .ziwei .position.active{
    outline: 3px solid #b99863;
    z-index: 100;
}

section.popup .ziwei .position[data-target]:before{
    content: attr(data-target);
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 0.25em;
    color: #fff;
    font-size: 0.75em;
    opacity: 0.5;
}

section.popup .ziwei .position[data-target-2]:after{
    content: attr(data-target-2);
    position: absolute;
    right: 0;
    bottom: 2em;
    padding: 0.25em;
    color: #fff;
    font-size: 0.75em;
    opacity: 0.5;
}

section.popup .ziwei .position[data-target="祿"]:before,
section.popup .ziwei .position[data-target-2="祿"]:after{
    background: green;
}

section.popup .ziwei .position[data-target="科"]:before,
section.popup .ziwei .position[data-target-2="科"]:after{
    background: #FF8300;
}

section.popup .ziwei .position[data-target="權"]:before,
section.popup .ziwei .position[data-target-2="權"]:after{
    background: blue;
}

section.popup .ziwei .position[data-target="忌"]:before,
section.popup .ziwei .position[data-target-2="忌"]:after{
    background: red;
}

section.popup .ziwei .zwDivCenter .select{
    position: absolute;
    left: 0;
    bottom: 0;
    font-size: 1em;
    font-weight: normal;
}

@media all and (min-width:600px){
    section.popup .ziwei{
        width: 90%;
        height: 45vw;
        min-height: 600px;
        zoom: 1;
    }

    section.popup .ziwei .position[data-target]:before{
/*        font-size: 3em;*/
    }

    section.popup .ziwei .zwDivCenter{
        padding: 1em;
    }
    
    section.popup .ziwei .MangY1,
    section.popup .ziwei .MangY10{
        font-size: 0.75em;
        zoom: 1;
    }
}