cd_mingrenguan/game/css/css.css

@font-face
{
font-family: LiSu;
src: url('../font/SIMLI.TTF');
}
.fontLiSu {
    font-family: 'LiSu';
}
.colorc {
    color:#38290F;
}
.color2 {
    color:#9D3323;
}
.centerc {
    text-align:center;
    font-size:35px;
    line-height: 54px;
    height:100%;

}
img {
    max-width:100%;
}
button {
    background:none;
    outline:none;
    border:none;
}
.flexc {
    display: flex;
    justify-content: center;
    align-items: center;
}
.flexc-column {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.btnc {
    width:180px;
    height:180px;
    line-height: 180px;
    font-size:34px;
    margin-top:20px;
}
.start-btn {
    background:url(../img/btn-bg1.png)center/130px no-repeat;
}
.again-btn {
    background:url(../img/btn-bg1.png)center/130px no-repeat;
}
.over-btn {
    background:url(../img/btn-bg2.png)center/130px no-repeat;
}
.game {
    position:absolute;
    z-index:9999;
    width:100%;
    height:100%;
    overflow: hidden;
}
.bg {
    /* background:url(../img/bg.jpg)center 100% no-repeat; */
}
.center-bg {
    background: url(../img/cener-bg.jpg)center 100% no-repeat;
}
 .game-container {
     position:relative;
    width:1246px;
    height:700px;
    
}
.game-container .close-game {
    position:absolute;
    top:-22px;
    right:-22px;
    display:block;
    width:44px;
    height:44px;
    background:#38290F;
    border-radius:22px;
    color:#EDDABA;
    font-size:36px;
    text-align: center;
    line-height: 44px;
}
.game-container .start {
    width:100%;
    height:100%;
}
.game-container .left-title {
    width:323px;
    height:534px;
    /* border:2px dashed rgb(39, 25, 14,0.16); */
    margin-right:8px;
}
.game-container .right-info {
    font-size:30px;
    line-height: 54px;
    color:#38290F;
    text-align:center;
}
.game-container .right-info {
    width:570px;
}
.game-container .right-info span {
    color:#9D3323;
}
.game-container .right-info .start-btn {
    font-size:34px;
    color:#9D3323;
}
.game-container .process .top-img {
    position:absolute;
    left:0;
    top:0;
    width:129px;
    height:214px;
    /* border:1px dashed rgba(39, 25, 14,0.16); */
    
}
.game-container .process .topic {
    width:720px;
    margin-top:122px;
}
.game-container .process  .topic .question {
    font-size:30px;
    line-height: 54px;
}
.game-container .process .topic .answer {
    width:427px;
    margin-top:30px;
}
.game-container .process .topic .answer ul li {
    line-height:54px;
    margin-bottom:20px;
    font-size:30px;
}
.game-container .process .topic .answer ul li:hover {
    border-bottom:1px solid #A58E65;
    color:#9D3323;
}

.game-container .process .topic .answer ul li.active {
    border-bottom:1px solid #A58E65;
}
.game-container .process .topic .answer ul li.correct::after {
    content: '√';
    color:#9D3323;
    margin-left:1em;
}
.game-container .process .topic .answer ul li.wrong::after {
    content:'×';
    color:#9D3323;
    margin-left:1em;
}
.game-container .process .next-btn {
    width:90px;
    height:90px;
    line-height: 90px;
    position:absolute;
    right:106px;
    bottom:85px;
    font-size:28px;
    background:url(../img/btn-bg1.png)center/100% no-repeat;
}
.pc {
    display:block;
}
.wap {
    display:none;
}
@media screen and (max-width:600px) {
    .pc {
        display:none;
    }
    .wap {
        display:block;
    }
    .btnc {
        width:22vw;
        height:22vw;
        line-height: 22vw;
        margin-top:0;
        font-size:4.8vw;

    }
    .start-btn {
        background:url(../img/btn-bg1.png)center/18vw no-repeat;
    }
    .again-btn {
        background:url(../img/btn-bg1.png)center/18vw no-repeat;
    }
    .over-btn {
        background:url(../img/btn-bg2.png)center/18vw no-repeat;
    }
    .centerc {
        font-size:5.5vw;
        line-height: 9.2vw;
        justify-content: flex-start;
    }
    .centerc p {
        margin-top:23vw;
        margin-bottom:32vw;
    }
    .bg {
        /* background: url(../img/wapbg.jpg)center no-repeat; */
        /* background:#38290fcc;
        background-size:cover; */
    }
    .center-bg {
        background: url(../img/wapcenter-bg.jpg)center 100% no-repeat;
        background-size:cover;
    }
    .game-container {
        width:88.8vw;
        height:149vw;
        
    }
    .game-container .close-game {
        width:8.5vw;
        height:8.5vw;
        line-height: 8.5vw;
        font-size:6vw;
        right:-4vw;
        top:-4vw;
    }
    .game-container .start {
        flex-direction: column;
    }
    .game-container .left-title {
        width:42.7%;
        height:auto;
        border-width:1px;
        margin-right:4vw;
    }
    .game-container  .right-info {
        width:70%;
        font-size:4vw;
        line-height: 7vw;
    }
    .game-container  .right-info .start-btn {
        position:relative;
        font-size:6vw;
        width:30.5vw;
        height:30.5vw;
        line-height: 30.5vw;
        background-size:23.5vw;
    }
    .game-container .right-info .start-btn::after {
        content:'';
        display:block;
        width:23.5vw;
        height:23.5vw;
        position:absolute;
    }
    .game-container .process .top-img {
        width:18.6vw;
        height:auto;
        position:relative;
        border:1px dashed rgba(39, 25, 14,0.16);
        margin-top:5.7vw;
    }
    .game-container .process .topic {
        width:66.6vw;
        margin-top:5.7vw;
    }
    .game-container .process  .topic .question {
        font-size:4.1vw;
        line-height: 7vw;
    }
    .game-container .process .topic .answer {
        width:88%;
        margin:11vw auto 0;
    }
    .game-container .process .topic .answer ul li {
        line-height:6.3vw;
        margin-bottom:2vw;
        font-size:4vw;
    }
    .game-container .process .topic .answer ul li.active {
        border-bottom:1px solid #A58E65;
    }
    .game-container .process .topic .answer ul li.correct::after {
        content: '√';
        color:#9D3323
    }
    .game-container .process .topic .answer ul li.wrong::after {
        content:'×';
        color:#9D3323
    }
    .game-container .process .next-btn {
        width:14vw;
        height:14vw;
        line-height: 14vw;
        position:absolute;
        right:5.9vw;
        bottom:5.1vw;
        font-size:4.3vw;
        background:url(../img/btn-bg1.png)center/100% no-repeat;
    }
}