*{margin: 0;padding: 0;user-select: none;/*令所有文字不可选*/}
body{width: 100%;height: 100%;background-color: #FAF8EF;overflow: hidden;font-family: Arial, "Microsoft YaHei"}

/* main BEGIN */
#main,#home{
    width: 100%;
    height: 100%;
}

.homeLogo{
    position: absolute;
    top: 30px;
    width: 100%;height: 120px;
    text-align: center;
    line-height: 100px;letter-spacing: 5px;
    font-size: 3em;
    color: #766E63;
}
#mainTop{
    position: absolute;
    left: 0;top: 130px;
    width: 100%;
    /*border-bottom: solid 3px black;
    /*background-color: red;*/
}
.help{
    position: absolute;
    right: 2%;
    top: -90px;
    width: 30px;
    height: 30px;
    line-height: 30px;text-align: center;
    color: #CBBFB3;
    font-size: 1.5em;
    border-radius: 20px;
    border: 5px solid #CBBFB3;
    cursor: pointer;
}
.logo{
    position: absolute;
    left: 50%;
    margin-left: -100px;
    width: 200px;
    height: 200px;
    background-image: url(../imgs/logo.png);
    border-radius: 15px;
    line-height: 100px;
    text-align: center;
    font-size: 2em;
    color: white;
}

#mainMid{
    position: absolute;
    left: 0;top: 320px;
    width: 100%;
    height: 100px;
    /*background-color: green;*/
}
.mainMenu{
    position: absolute;
    left: 0px;top: 0px;
    width: 100%;height: 100px;
    color: #CBBFB3;
    font-size: 2em;
}
.buttonLeft,.buttonRight{
    width: 25%;height: 50px;
    line-height: 50px;
    text-align: center;
    cursor: pointer;
}
.buttonLeft{
    position: absolute;
    top: 25px;left: 0;
}
.buttonRight{
    position: absolute;
    top: 25px;right: 0;
}
.gameKind1,.gameKind2{
    position: absolute;
    left: 25%;top: 25px;
    width: 50%;height: 50px;
    line-height: 50px;
    text-align: center;
    color: #766E63;
    font-weight: bold;
}
.gameKind2{
    display: none;
}

#mainDown{
    position: absolute;
    left: 0;top: 420px;
    width: 100%;
    height: 200px;
}
.gameBegin{
    position: absolute;
    width: 70%;height: 60px;
    left: 15%;top:0;
    border-radius: 10px;
    background-color: #F1AF78;
    line-height: 60px;
    text-align: center;
    color: white;
    font-size: 1.2em;
    cursor: pointer;
}
.gameRank{
    position: absolute;
    width: 70%;height: 60px;
    left: 15%;top:80px;;
    border-radius: 10px;
    background-color: #CBBFB3;
    line-height: 60px;
    text-align: center;
    color: white;
    font-size: 1.2em;
    cursor: pointer;
}
/* main END */

/* home BEGIN */
#home{
    display: none;
}
.score{
    position: absolute;
    left: 0%;top: 20px;
    width: 100%;height: 100px;
}
.logo2{
    position: absolute;
    left:5%;top: 0;
    width: 20%;height: 100px;
    line-height: 100px;letter-spacing: 5px;
    font-size: 2.5rem;
    color: #766E63;
}
.scoreDisplay{
    position: absolute;
    right: 5%;top: 0;
    width: 50%;height: 100px;
    line-height: 100px;
    background-color: #BAAC9F;
    font-size: 1.2rem;
    border-radius: 15px;
    color: white;
}
.scoreInform{
    float: left;
    width: 65%;height: 100px;
    text-align: center;
    color:white;
    font-size: 1.6rem;
}
.tools{
    position: absolute;
    top: 130px;
    width: 100%;height: 50px;
    line-height: 50px;
    color: white;
    text-align: center;
}
/*
.backTool{
    position: absolute;
    right: 100px;top: 0;
    width: 50px;
    height: 50px;
    background-color: #BAAC9F;
    border-radius: 15px;
    cursor: pointer;
}*/
.homeTool{
    position: absolute;
    right: 5%;top: 0;
    width: 50px;
    height: 50px;
    background-color: #BAAC9F;
    border-radius: 15px;
    cursor: pointer;
}
#map{
    position: absolute;
    top: 210px;left: 5%;
    width: 90%;height: 400px;
    border-radius: 15px;
    background-color: #BAAC9F;
}
.box{
    width: 22.5%;height: 80px;
    float: left;
    border-radius: 5px;
    margin-left: 2%;
    margin-top: 16px;
    background-color: #D5CDC2;
    cursor: pointer;
    line-height: 80px;
    text-align: center;
    font-size: 2em;
    font-weight: bold;
}
@keyframes addnew{
    from{transform: scale(0.5,0.5);}
    to{transform: scale(1,1);}
}
@keyframes turnnew{
    from{transform: scale(1.3,1.3);}
    to{transform: scale(1,1);}
}
@keyframes donothing{
    from{transform: scale(1,1);}
    to{transform: scale(1,1);}
}
/*
    background-color    color
        0: #D5CDC2      #766E63
        2: #ECE4D9      #766E63
        4: #ECE0C6      #766E63
        8: #F2B179      white
        16: #F59562     white
        32: #F57C5F     white
        64: #F45E39     white
        128...: #ECCF71 white
*/