body{
    margin:0;
    font-family: 'Kiwi Maru', serif;
}
.error{
    text-align:center;
}
#maps{
    bottom:10%;
    height:90%;
    width:100%;
    position: absolute;
    z-index:-1;
    overflow:hidden;
}
.first{
    visibility:hidden;
}
.bg{
    background-color:#000000;
    z-index:1;
    position:absolute;
    height:90%;
    top:0;
    left:0;
    right:0;
}
.picture{
    position:absolute;
    z-index:2;
    right:0;
    left:0;
    top:0;
}
.header{
    position: absolute;
    background-color:#000000;
    color:#ffffff;
    z-index:11;
    width:94.6%;
    left:0;
    right:0;
    padding:0 2.7%;
}
.start{
    background-color:#000000;
    color:#ffffff;
    position:absolute;
    width:100%;
    height:100%;
    z-index:1;
}
.count{
    margin:0 auto;
    text-align:center;
}
.kind{
    font-size:56px;
    text-align:center;
    z-index:2;
    position: absolute;
    top:10%;
    width:80%;
    margin:0 10%;
}
.countDown{
    font-size:120px;
    text-align:center;
    position: absolute;
    top:30%;
    width:50%;
    margin:0 25%;
    z-index:2;
    display:none;
}
.loading{
    color:#fff;
    text-align: center;
    font-size:28px;
    position: absolute;
    top:40%;
    width:50%;
    margin:0 25%;
    z-index:2;
}
.text{
    background-color:#000;
    color:#fff;
}

.pin{
    position:absolute;
    bottom:0;
    width:100%;
    height:10%;
    background-color:#ffffff;
    font-size:32px;
    text-align:center;
    cursor: pointer;
    z-index:4;
    display: flex;
    justify-content: center;
    align-items: center;
}
.timer{
    margin-top:30px;
    display:flex;
    height:37px;
    padding-bottom: 10px;
}
.timerLogo{
    background:url("/pin/images/time.png") no-repeat;
    background-size:contain;
    width:24px;
    margin-right:4px;
}
.var{
    border-radius:7.5px;
    width:84.2666vw;
    background-color:#fff;
    height:15px;
    margin-top:11px;
    position: relative;
}
.remain{
    border-radius:7.5px 0 0 7.5px;
    height:15px;
    background-color:#008ff6;
    position:absolute;
}
.countsOfQuestions{
    margin-top:14px;
}

.toMap{
    position:absolute;
    bottom:0;
    width:100%;
    height:10%;
    background-color:#ffffff;
    font-size:32px;
    cursor:pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}
.toPic{
    position: absolute;
    bottom:0;
    width:15%;
    height:10%;
    background-color:#ffffff;
    font-size:32px;
    z-index:5;
    cursor: pointer;
    border-right:1px solid #000000;
    display: flex;
    justify-content: center;
    align-items: center;
}
.next{
    text-align:center;
    background-color:#fff;
    color:#000;
    height:10%;
    width:100%;
    position: absolute;
    bottom:0;
    justify-content:center;
    align-items:center;
    display:flex;
    cursor: pointer;
}
.item{
    z-index:12;
    position:absolute;
    right:0;
}
@media screen and (max-width:767px){
    .head{
        height:110px;
        width:100%;
        background-color:#000;
    }
    .text{
        padding-top:16px;
        font-size:22px;
        text-align:center;
    }
    .ansMsg{
        padding-top:29px;
        font-size:13px;
    }
    .ansAtdp{
        font-size:15px;
    }
    .ansDistance{
        font-size:20px;
    }
    .next{
        font-size:36px;
    }
    .count{
        font-size:56px;
    }
    .nowTimes{
        font-size:21px;
        font-weight:bold;
    }
    .slash{
        font-size:16px;
    }
    .allTimes{
        font-size:14px;
    }
    .timeUpImage{
        background:url("/pin/images/timeup.png") no-repeat;
        height:48px;
        margin-right:35.67605%;
        width:28.6479%;
        margin-left:35.67605%;
        margin-bottom:5px;
    }
    .timeup{
        font-size:15px;
    }
    .item{
        display:flex;
        background-color:#fff;
        width:185px;
        height:35px;
        margin-top:14px;
        margin-right:16px;
        border-radius:5px;
        display: none;
    }
    .coin{
        background-color:#ffba00;
        width:95px;
        display:flex;
        border-radius: 5px 0 0 5px;
    }
    .coinImage{
        margin:7.5px;
        background:url("/pin/images/coin_mark.png") no-repeat;
        background-size:contain;
        width:20px;
        height:20px;
    }
    .coinCount{
        color:#fff;
        font-weight:bold;
    }
    .change{
        margin:3.75px;
        background:url("/pin/images/change_off.png") no-repeat;
        background-size:contain;
        width:27.5px;
    }
    .stop{
        margin:3.75px;
        background:url("/pin/images/stop_off.png") no-repeat;
        background-size:contain;
        width:27.5px;
    }
    .hint{
        margin:3.75px;
        background:url("/pin/images/hint_off.png") no-repeat;
        background-size:contain;
        width:27.5px;
    }
    .cover{
        background:#fff;
    }
    .hintTitle{
        background-color:#fff;
        color:#000;
        z-index:20;
        position:absolute;
        top:20%;
        left:10px;
    }
    .answerKmStr{
        font-size:16px;
    }
    .timeup{
        background-color:#000;
        z-index:10;
        width:100%;
    }
    .timeupImage{
        background:url("/pin/images/timeup.png") no-repeat;
        background-color:#000;
        background-size:contain;
        width:46%;
        height:31%;
        left:27%;
        top:35.6%;
        position: absolute;
    }
    .countsOfTimeup{
        position: absolute;
        top:14px;
        left:2.7%;
        color: #fff;
    }
    .countsOfAnswer{
        position: absolute;
        top:14px;
        left:2.7%;
        color: #000;
    }
}
@media screen and (min-width:768px){
    .text{
        font-size:32px;
    }
    .next{
        font-size:32px;
    }
    .count{
        font-size:30px;
    }
    .smallPic:hover{
        width:26%;
    }
    .picture{
        cursor: pointer;
    }
}