.game {
    background-image: url(../images/banner_game.png?d=4);
    background-repeat: no-repeat;
    background-size: 100%;
    padding-bottom: 75px;
}

.div_game {
    background-image: url('../images/bg_game.png?d=4');
    height: 852px;
    width: 100%;
    background-repeat: no-repeat;
    background-size: 100%;
}

    .div_game > div:first-child, .div_game > div:nth-child(2) {
        width: 100%;
        max-width: 1200px;
        height: 100%;
        position: absolute;
        float: left;
        z-index: 0;
    }

        .div_game > div:first-child > img {
            position: absolute;
            top: 243px;
            left: 218px;
        }

        .div_game > div:nth-child(2) > img {
            position: absolute;
            top: 725px;
            right: 90px;
            cursor: pointer;
        }

@keyframes swing {
    15% {
        transform: translateX(5px);
    }

    40% {
        transform: translateX(-5px);
    }

    65% {
        transform: translateX(2px);
    }

    85% {
        transform: translateX(-2px);
    }

    100% {
        transform: translateX(0px);
    }
}

.div_game > div:nth-child(2) > img:hover {
    animation: swing 1s 1;
}

.div_game h1 {
    position: relative;
    top: 32px;
    left: 98px;
    font-size: 20pt;
    line-height: 30pt;
    display: inline-block;
    margin-block-start: 0;
    margin-block-end: 0;
}

.div_game .bts_red div {
    display: inline-block;
    position: relative;
    cursor: pointer;
}

    .div_game .bts_red div:nth-child(1) {
        top: 535px;
        left: 229px;
    }

    .div_game .bts_red div:nth-child(2) {
        top: 616px;
        left: 366px
    }

    .div_game .bts_red div:nth-child(3) {
        top: 399px;
        left: 280px;
    }

    .div_game .bts_red div:nth-child(4) {
        top: 399px;
        left: 409px;
    }

    .div_game .bts_red div:nth-child(5) {
        top: 521px;
        left: 559px;
    }

    .div_game .bts_red div:nth-child(6) {
        top: 615px;
        left: 274px;
    }

.wrap_game {
    background-color: #000000b5;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    display: none;
}

    .wrap_game > div {
        width: 850px;
        height: 668px;
        position: relative;
        top: calc(50vh - 334px);
        left: calc(50vw - 425px);
        display: inline-flex;
        flex-direction: column;
        background-color: white;
        border-radius: 20px;
    }

    .wrap_game .game_q {
        margin: 49px 118px 20px 48px;
        font-size: 20pt;
        font-weight: bolder;
        letter-spacing: 0.5pt;
        line-height: 32pt;
        display: inline-flex;
        flex-direction: row;
    }

    .wrap_game .game_a {
        margin: 10px 118px 20px 48px;
        font-size: 14pt;
        font-weight: bolder;
        letter-spacing: 0.5pt;
        line-height: 29pt;
        display: inline-flex;
        flex-direction: row;
    }

@media screen and (max-width: 980px) {
    .div_game {
        height: 696px;
    }

        .div_game > div:first-child > img {
            top: 186px;
            left: 171px;
            width: calc(173px * 0.85);
        }

        .div_game > div:nth-child(2) > img {
            top: 567px;
            right: 60px;
        }

        .div_game .bts_red img {
            width: calc(75px * 0.86);
        }

        .div_game .bts_red div:nth-child(1) {
            top: 419px;
            left: 185px;
        }

        .div_game .bts_red div:nth-child(2) {
            top: 485px;
            left: 293px;
        }

        .div_game .bts_red div:nth-child(3) {
            top: 309px;
            left: 219px;
        }

        .div_game .bts_red div:nth-child(4) {
            top: 308px;
            left: 319px;
        }

        .div_game .bts_red div:nth-child(5) {
            top: 407px;
            left: 439px;
        }

        .div_game .bts_red div:nth-child(6) {
            top: 485px;
            left: 202px;
        }

    .wrap_game > div {
        height: 45vh;
        top: 25vh;
    }

    .wrap_game .game_q {
        font-size: 2.4rem;
        letter-spacing: 1pt;
    }

    .wrap_game .game_a {
        font-size: 2rem;
        line-height: 4rem;
    }

        .wrap_game .game_a ul img {
            width: 36px;
        }
}

.wrap_game .game_q::before,
.wrap_game .game_a::before {
    content: '';
    display: block;
    width: 98px;
    height: 98px;
    min-width: 98px;
    margin-right: 27px;
    background-repeat: no-repeat;
}

.wrap_game .game_q::before {
    background-image: url(../images/icon_q.png);
}

.wrap_game .game_a::before {
    background-image: url(../images/icon_a.png);
}

.wrap_game .game_a ul {
    margin-block-start: 0;
    margin-block-end: 0;
}

.wrap_game .game_a label {
    /*display: inline-flex;*/
    display: flex;
    align-items: center;
}

.wrap_game .game_a label span{
    width: 500px;
}

.wrap_game .game_a input[type='radio'] {
    width: 20px;
    height: 20px;
    margin: 0 10px 0 0;
}

.wrap_game .game_a ul img {
    margin-left: 10px;
}

.wrap_game .bt_close {
    position: absolute;
    top: 32px;
    right: 27px;
    display: block;
    cursor: pointer;
}

.wrap_game .result_correct,
.wrap_game .result_wrong {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 40px 0;
}

    .wrap_game .result_correct span,
    .wrap_game .result_wrong span {
        display: block;
        font-size: 37pt;
        font-weight: bold;
        text-align: center;
        letter-spacing: 4pt;
    }

    .wrap_game .result_correct span {
        color: #d90000;
    }

    .wrap_game .result_wrong span {
        color: #223b7b;
    }

    .wrap_game .result_correct > div > div,
    .wrap_game .result_wrong > div > div {
        display: block;
        height: 64px;
        margin-top: 42px;
        text-align: center;
        font-size: 27pt;
        font-weight: bold;
        line-height: 64px;
        color: white;
        width: 200px;
        background-color: #d90000;
        border-radius: 16px;
        cursor: pointer;
    }

    .wrap_game .result_correct > div,
    .wrap_game .result_wrong > div {
        margin: 0 20px;
    }

    .wrap_game .result_correct::before,
    .wrap_game .result_correct::after,
    .wrap_game .result_wrong::before,
    .wrap_game .result_wrong::after {
        content: '';
        display: inline-block;
        width: 198px;
        height: 198px;
    }

    .wrap_game .result_correct::before {
        background-image: url('../images/pattern_right_l.png');
    }

    .wrap_game .result_correct::after {
        background-image: url('../images/pattern_right_r.png');
    }

    .wrap_game .result_wrong::before {
        background-image: url('../images/pattern_wrong_l.png');
    }

    .wrap_game .result_wrong::after {
        background-image: url('../images/pattern_wrong_r.png');
    }

.wrap_game .result_end {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 80px 0 0 0;
    text-align: center;
    font-size: 32pt;
    font-weight: bolder;
    line-height: 20pt;
}

    .wrap_game .result_end span {
        font-size: 38pt;
        color: #a90505;
    }

    .wrap_game .result_end p:nth-child(3) {
        display: inline-flex;
        align-items: center;
        color: #a90505;
    }

        .wrap_game .result_end p:nth-child(3) img {
            margin-left: 20px;
        }

    .wrap_game .result_end > div > div {
        display: block;
        height: 64px;
        text-align: center;
        font-size: 27pt;
        font-weight: bold;
        line-height: 64px;
        color: white;
        background-color: #a90505;
        border-radius: 16px;
        cursor: pointer;
    }