.ziwei-hero {
    background: #fdf9f7;
    padding: 6em 0 2em;
    text-align: center;
}

.ziwei-title {
    font-size: 2.5em;
    color: #802440;
    margin-bottom: 0.3em;
}

.ziwei-subhero {
    background: #fff;
    text-align: center;
    padding-bottom: 2em;
}

.ziwei-subtitle {
    font-size: 1.5em;
    color: #444;
}

.ziwei-tagline {
    font-style: italic;
    color: #999;
    margin-top: 0.5em;
}

section.form {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fdf9f7;
}

section.form .title {
    color: #F4E0C0;
    font-size: 1.5em;
    font-weight: 600;
}

section.form .sub-title {
    margin-bottom: 2em;
    font-size: 0.875em;
    color: #F4E0C0;
}

section.form .content-wrapper {
    width: 90%;
}

section.form .form-group {
    position: relative;
    margin-bottom: 1em;
}

section.form .form-group .label {
    color: #795548;
}

section.form .form-group input[type="text"] {
    padding: 0.75em;
    border: 1px solid #ccc;
    border-radius: 0.5em;
    font-size: 1em;
    width: 100%;
    background: #fff;
}

section.form .form-group .option-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1em;
}

section.form .form-group .option-group select {
    width: auto;
    margin-top: 0;
}

section.form .form-group .option-group select:nth-of-type(1) {
    width: 9em;
}

section.form .form-group .option-group select:nth-of-type(2) {
    width: 6em;
}

section.form .form-group .option-group select:nth-of-type(3) {
    width: 6em;
}

section.form .form-group select {
    padding: 0.75em;
    border: 1px solid #ccc;
    border-radius: 0.5em;
    font-size: 1em;
    width: 100%;
    background: #fff;
}

section.form .form-group .text {
    display: block;
    margin-left: 1em;
    margin-right: 1em;
    color: white;
}

section.form .btn-wrapper {
    margin-top: 3em;
    padding-bottom: 2em;
    text-align: center;
}

section.form .btn-wrapper .btn-submit {
    padding: 0.5em 1.25em;
    color: #140b01;
    color: white;
    background: #7e2740;
    border-radius: 0.5em;
    cursor: pointer;
}

section.form .btn-wrapper .btn-submit:hover {
    opacity: 0.9;
}


@media all and (min-width:600px) {
    section.form .content-wrapper {
        width: auto;
    }
}

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;
    }
}