.main-container {
    position: relative;
    display: none;
    background: url(../img/questions/index-questions-bg.png) no-repeat;
    background-size: cover;
    align-items: center;
}

.main-container .container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    height: 86%;
    background: #f9eacd;
}

.main-container .container .container-black-scroll {
    display: none;
    justify-content: center;
    align-items: center;
    /* width: 35%;
    height: 75%; */
    width: 480px;
    height: 480px;
    background: url(../img/container/index-container-circle.png) no-repeat;
    background-size: 100% 100%;
    border-radius: 50%;
    -webkit-animation: scroll 2s linear 0s infinite;
}

@-webkit-keyframes scroll {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
    }
}

.container .container-black-scroll .container-circle-word {
    width: 48%;
    height: 48%;
    border-radius: 50%;
    background: url(../img/container/index-container-word.png) no-repeat;
    background-size: cover;
}

/* 题目 */
.container-ques {
    display: none;
    width: 100%;
    height: 100%;

}

/* 题目   左边 */
.container-ques .container-ques-left {
    position: relative;
    width: 20%;
}

.container-ques-left .ques-left-title {
    position: absolute;
    top: 6px;
    width: 240px;
    height: 80px;
    line-height: 80px;
    background: url(../img/container/index-container-titleBg.png) no-repeat;
    background-size: 100% 100%;
}

.container-ques-left .ques-left-title p {
    color: #fafafa;
    letter-spacing: 0;
    text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;
    font-size: 2.2rem;
    letter-spacing: 20px;
    text-align: justify;
    margin: 0 0 0 10%;
}

.container-ques-left .ques-left-luban {
    width: 290px;
    height: 330px;
    margin: 50% auto;
}

@media screen and (max-width:1368px) {
    .container-ques-left .ques-left-luban {
        width: 240px;
    }
}

.ques-left-luban img {
    width: 100%;
    height: 100%;
}

/* 题目   右边 */
.container-ques .container-ques-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80%;
}

.container-ques-right .right-container {
    display: flex;
    flex-direction: column;
    width: 70%;
    height: calc(100% - 200px);
    margin: 10% 0 0 0;
}

.container-ques-right .ques-right-items {
    width: 100%;
    height: auto;
    margin: 0 0 5% 0;
    color: #696969;
    font-weight: bold;
    letter-spacing: 2px;
    font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif;
}

.container-ques-right .ques-right-stem {
    font-size: 2.25rem;
}

.container-ques-right .ques-right-options {
    display: none;
    font-size: 1.85rem;
}

.ques-right-options .right-options-item {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
}

.right-options-item input[type="radio"] {
    /* 去除浏览器默认样式 */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* 重新绘制 */
    width: 30px !important;
    height: 30px !important;
    display: inline-block;
    cursor: pointer;
    outline: none;
    vertical-align: middle;
    margin: 0 10px 0 0;
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20t%3D%221617012185507%22%20class%3D%22icon%22%20viewBox%3D%220%200%201024%201024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20p-id%3D%222062%22%3E%3Cpath%20d%3D%22M593.92%20215.04c112.64%200%20204.8%2092.16%20204.8%20204.8v204.8c0%20112.64-92.16%20204.8-204.8%20204.8h-204.8c-112.64%200-204.8-92.16-204.8-204.8v-204.8c0-112.64%2092.16-204.8%20204.8-204.8h204.8m0-51.2h-204.8c-143.36%200-256%20112.64-256%20256v204.8c0%20143.36%20112.64%20256%20256%20256h204.8c143.36%200%20256-112.64%20256-256v-204.8c0-138.24-112.64-256-256-256z%22%20fill%3D%22%23696969%22%20p-id%3D%222063%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") no-repeat;
}

.right-options-item input[type="radio"]::after {
    content: url("data:image/svg+xml;charset=utf8,%3Csvg%20t%3D%221617012908592%22%20class%3D%22icon%22%20viewBox%3D%220%200%201024%201024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20p-id%3D%222379%22%20%3E%3Cpath%20d%3D%22M947.2%20194.56l-20.48-40.96c-51.2%2030.72-97.28%2066.56-143.36%2097.28-46.08-51.2-112.64-81.92-189.44-81.92h-204.8c-143.36%200-256%20112.64-256%20256v204.8c0%20143.36%20112.64%20256%20256%20256h204.8c143.36%200%20256-112.64%20256-256v-204.8c0-40.96-10.24-76.8-25.6-107.52%2040.96-46.08%2081.92-87.04%20122.88-122.88z%20m-148.48%20225.28v204.8c0%20112.64-92.16%20204.8-204.8%20204.8h-204.8c-112.64%200-204.8-92.16-204.8-204.8v-204.8c0-112.64%2092.16-204.8%20204.8-204.8h204.8c56.32%200%20112.64%2025.6%20148.48%2061.44-122.88%2097.28-215.04%20194.56-261.12%20256L307.2%20399.36%20230.4%20460.8l302.08%20302.08c35.84-97.28%20133.12-256%20261.12-404.48%200%2020.48%205.12%2040.96%205.12%2061.44z%22%20fill%3D%22%23c03126%22%20p-id%3D%222380%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
    width: 100%;
    height: 100%;
    line-height: 30px;
    transition: all ease-in-out 300ms;
    -webkit-transition: all ease-in-out 300ms;
    -moz-transition: all ease-in-out 300ms;
    opacity: 0;
    background: transparent;
}

.right-options-item input[type="radio"]:checked::after {
    opacity: 1;
}

.right-options-item label {
    width: 84%;
    font-size: 1.5rem;
word-break: break-all;
}

/* 回答错误 */
.ques-right-tips .tips-error,
.ques-right-tips .tips-true {
    display: none;
    align-items: center;
    justify-content: center;
    color: #bf242a;
    font-size: 1.50rem;
    font-weight: 600;
    letter-spacing: 2px;
}

.ques-right-tips .tips-error img {
    width: 180px;
    height: 180px;
    margin: 0 0 0 20px;
}

.ques-right-tips .tips-true img {
    width: 230px;
    height: 180px;
    margin: 0 0 0 20px;
    color: #00a381;
}

/* 按钮 */
.ques-right-btns {
    display: flex;
    justify-content: flex-end;
}

.ques-right-btns .right-btns {
    display: inline-block;
    width: 140px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    font-size: 1.4rem;
    font-family: Verdana;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;

    text-decoration: none;
    color: #fff;
    outline: none;
    animation: swingBtn 2s linear infinite;
    cursor: pointer;
}

@-webkit-keyframes swingBtn {
    10% {
        transform: rotate(15deg);
    }

    20% {
        transform: rotate(-10deg);
    }

    30% {
        transform: rotate(5deg);
    }

    40% {
        transform: rotate(-15deg);
    }

    50%,
    100% {
        transform: rotate(0deg);
    }
}

.ques-right-btns .btns-next {
    border: 1px solid #4ca1af;
    text-shadow: 0px 0px 0px #c4e0e5;
    box-shadow: inset 0px 0px 0px -50px #4ca1af;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(8%, #4ca1af), color-stop(97%, #c4e0e5));
    background-color: #4ca1af;
    margin: 5% 1%;
    display: block;
}

.ques-right-btns .btns-next:hover {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(8%, #c4e0e5), color-stop(97%, #4ca1af));
    background-color: #c4e0e5;
}

.ques-right-btns .btns-submit {
    border: 1px solid #84bbf3;
    text-shadow: 0px 0px 0px #528ecc;
    box-shadow: inset 0px 0px 0px -50px #dcecfb;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(8%, #bddbfa), color-stop(97%, #80b5ea));
    background-color: #bddbfa;
    margin: 5% 10% 5% 3%;
    display: block;
}

.ques-right-btns .btns-submit:hover {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(8%, #80b5ea), color-stop(97%, #bddbfa));
    background-color: #80b5ea;
}

.ques-right-btns .btns-again {
    border: 1px solid #fdc830;
    text-shadow: 0px 0px 0px #fdc830;
    box-shadow: inset 0px 0px 0px -50px #f37335;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(8%, #f37335), color-stop(97%, #fdc830));
    background-color: #f37335;
    margin: 5% 3% 5% 0;
    display: none;
}

.ques-right-btns .btns-again:hover {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(8%, #fdc830), color-stop(97%, #f37335));
    background-color: #f37335;
}

.ques-right-btns .btns-over {
    border: 1px solid #a73737;
    text-shadow: 0px 0px 0px #a73737;
    box-shadow: inset 0px 0px 0px -50px#7a2828;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(8%, #7a2828), color-stop(97%, #a73737));
    background-color: #7a2828;
    margin: 5% 10% 5% 0;
    display: none;
}

.ques-right-btns .btns-over:hover {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(8%, #a73737), color-stop(97%, #7a2828));
    background-color: #7a2828;
}

/* 结束页 */
.container-finish {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.container-finish .finish-good,
.container-finish .finish-pass {
    /* display: none; */
    flex-direction: column;
    align-items: center;
    /* margin: 5% 0 10px 0; */
}

.container-finish .finish-flower,
.container-finish .finish-fighting {
    width: 290px;
    height: 270px;

}

.container-finish .finish-flower {
    background: url(../img/container/index-container-trueFinishTip.png) no-repeat;
    background-size: 100% 100%;
}

.container-finish .finish-fighting {
    background: url(../img/container/index-container-errorFinishTip.png) no-repeat;
    background-size: cover;
}

.container-finish .finish-title {
    position: relative;
    letter-spacing: 0.21em;
    font-size: 2.45em;
    font-weight: normal;
    margin: 13px auto 2%;
    font-weight: bold;
    color: #000;
}

.container-finish .finish-title::before {
    color: #bf242a;
    text-shadow: 0 0 1px currentColor, -1px -1px 1px #bf242a, 0 -1px 1px #bf242a, 1px -1px 1px #bf242a, 1px 0 1px #bf242a, 1px 1px 1px #bf242a, 0 1px 1px #bf242a, -1px 1px 1px #bf242a, -1px 0 1px #bf242a;
}

.container-finish .finish-title::after {
    color: #bf242a;
    text-shadow: 1px -1px 1px #bf242a, -1px 1px 1px rgba(255, 255, 255, .5);
}

.container-finish .finish-title::before,
.container-finish .finish-title::after {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.finish-good .finish-title::before,
.finish-good .finish-title::after {
    content: '闯关结束,恭喜你,奖励一朵小红花!';
}

.finish-pass .finish-title::before,
.finish-pass .finish-title::after {
    content: '闯关结束,再接再厉,继续努力!';
}

.container-finish .finish-scrore {
    font-size: 1.75rem;
    letter-spacing: 1px;
    color: #696969;
}

.options-img{
    max-width: 160px;
    max-height: 160px;
}