body {
    margin: 0;
    height: 100vh;
    width: 100vw;
}

#wrapper {
    height: 100vh;
    width: 100vw;
    display: grid;
    grid-template-columns: 25vw 50vw 15vw 10vw;
    grid-template-rows: 10vh 15vh 50vh 25vh;
    background-size: cover;
}

button:hover {
    background-color: #AAFFEE;
    -webkit-box-shadow: 10px 10px 99px 12px #AAFFEE;
    -moz-box-shadow: 10px 10px 99px 12px #AAFFEE;
    box-shadow: 10px 10px 99px 12px #AAFFEE;
    color: black;
    transform: scale(0.9);
}

button {
    background-color: rgba(0, 0, 0, 0.5);
    border: none;
    color: white;
    padding: 1vw 2vw;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 2vw;
    transition: all 0.6s;
}

#option {
    grid-area: 3/2/4/3;
    display: grid;
    grid-template-rows: 1fr auto 1fr;
}

#buttons {
    width: 100%;
    height: auto;
    background: rgba(0, 0, 0, 0.5);
}

#option button {
    display: block;
    width: 80%;
    margin: 3% auto;
}


#dialog {
    display: grid;
    grid-area: 1 / 1 / span 2 /span 6;

    height: 200px;
    width: 960px;

    margin-top: 475px;
    margin-left: auto;
    margin-right: auto;

    background: url("../images/图标/chkbox.png") no-repeat;
    background-size: 1040px 250px;
    background-position: center;

    color: #fdfdfd;
    font-family: 楷体;
    font-size: 2.1vw;
    text-align:justify;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 4vh 3vw;
}

#dialog_last {
    display: grid;
    grid-area: 1 / 1 / span 2 /span 6;

    height: 200px;
    width: 960px;

    margin-top: 475px;
    margin-left: auto;
    margin-right: auto;

    background: url("../images/图标/chkbox.png") no-repeat;
    background-size: 1040px 250px;
    background-position: center;

    color: #fdfdfd;
    font-family: 楷体;
    font-size: 2.1vw;
    text-align:center;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 4vh 3vw;
}

#name {
    display: grid;
    grid-area: 1 / 1 / span 2 /span 6;
    margin-top: 420px;
    margin-left: 350px;

    background: url("../images/图标/0.png");
    background-size: 200px 80px;

    font-size: 2vw;
    font-family: "Microsoft YaHei";
    color:#ffffff;
    text-align: center;

    height: 10vh;
    width: 13vw;
    line-height: 10vh;
    bottom: 50vh;
}

#character1 {
    position: absolute;
    left: 200px;
    bottom: 0;
    z-index: 2;
    width: 370px;
    height: 600px;
}

#character2 {
    position: absolute;
    right: 200px;
    bottom: 0;
    z-index: 2;
    width: 400px;
    height: 600px;
}

#character3 {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;
    width: 1000px;
    height: 600px;
}
#character4 {
    position: absolute;
    right: 100px;
    bottom: 0;
    z-index: 2;
    width: 500px;
    height: 650px;
}
#character5 {
    position: absolute;
    left: 100px;
    bottom: 0;
    z-index: 2;
    width: 500px;
    height: 650px;
}

#paper1 {
    position: absolute;
    right: 20%;
    z-index: 2;
    width: 800px;
    height: 600px;
}





div {
    z-index: 10;
}


#jump {
    z-index: 99;
    position: absolute;
    right: 1vw;
    bottom: 1vh;
    background: none;
    color: rgb(255, 255, 255);
    text-decoration: none;
    font-family: 楷体;
    font-size: 2vw;
    -webkit-box-shadow:none;
    -moz-box-shadow:none;
    box-shadow:none;
}

#jump:hover{
    color: rgb(139, 244, 249);
}

#functions {
    display: grid;
    grid-area: 4 / 1 / span 1 /span 6;
    margin-top: 100px;
    margin-left: auto;
    margin-right: auto;

    display: flex;
    flex-grow: 1;
    flex-direction: row;
}

#functions button {
    height: 7vh;
    font-family: 楷体;
    font-size: larger;
}

#save {
    position: absolute;
    opacity: 0;
    text-align: center;
    width: 50vw;
    height: 40vh;
    margin: 25vh 25vw;
    background-color: rgb(197, 197, 197);
    box-shadow: 1vh 1vw 1vw rgba(0, 0, 0, .5);
    border-radius: .5vw;
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    font-size: 2vw;
    color: black;
}

#save_button {
    margin: 0 5vw;
    font-size: 2vw;
}

#update {
    position: absolute;
    opacity: 0;
    text-align: center;
    width: 50vw;
    height: 40vh;
    margin: 25vh 25vw;
    background-color: rgb(197, 197, 197);
    box-shadow: 1vh 1vw 1vw rgba(0, 0, 0, .5);
    border-radius: .5vw;
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    font-size: 2vw;
    color: black;
}

#update_button {
    margin: 0 5vw;
    font-size: 2vw;
}
#ms{
    position: fixed;
    opacity: 0;
}

#return_clear {
    display: grid;
    grid-area: 1 / 1 / span 2 /span 4;
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
    height: 15vh;

    display: flex;
    flex-grow: 1;
    flex-direction: row;
}
#return_clear button {
    height: 15vh;
    width: 25vh;
    font-family: 楷体;
    font-size: 2.5vw;
}
#return_clear_button {
    border: none;
    color: white;
    padding: 1vw 2vw;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 5vw;
    transition: all 0.6s;
}


#save2 {         
    z-index: -10000;
    position: absolute;
    opacity: 0;
    text-align: center;
    width: 50vw;
    height: 50vh;
    margin: 25vh 25vw;
    background-color:darkgray;
    box-shadow: 1vh 1vw 1vw rgba(0, 0, 0, .5);
    border-radius: .5vw;
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    font-size: 2vw;
    color: rgb(255, 255, 255);
}
#save2 button {      
    margin: 0 5vw;
    font-size: 2vw;
}