* {
  padding: 0;
  margin: 0;
  list-style: none;
}
.wrapper {
  position: relative;
  float: left;
  margin-left: 3rem;
  margin-top: 2rem;
  /* margin-left: -20rem; */
  width: 60rem;
  height: 60rem;
  background-image: url("./images/bg.jpg");
  background-size: 100% 100%;
  box-shadow: 0 0 0.6rem 0.3rem #7d907e;
}

.wrapper .tips{
  display: flex;
  justify-content: center;
  align-items: center;
  width:100%;
  height: 100%;
  font-size: 2rem;
  color: #fff;
  background: rgba(0,0,0,0.5);
}

.options {
  /* position: absolute; */
  float: left;
  margin-left: 20rem;
  margin-top: 2rem;
  width: 20rem;
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  background: #7d907e;
}
.options ul li {
  margin: 0;
  text-align: center;
}
.options ul li #start {
  margin-top: 1rem;
  width: 18rem;
}
.options input {
  width: 18rem;
  margin: 0 auto;
  text-align: center;
  border: 2px solid #ccc;
}
/*
*让左边的left为0
*/
@media screen and (min-width: 840px) and (max-width: 1100px) {
  .wrapper {
    position: relative;
    margin-left: 3rem;
    margin-top: 2rem;
    width: 60rem;
    height: 60rem;
    background-image: url("./images/bg.jpg");
    background-size: 100% 100%;
    box-shadow: 0 0 0.6rem 0.3rem #7d907e;
  }
  .options {
    /* position: absolute; */
    float: left;
    margin-left: 0;
    margin-top: 2rem;
    width: 20rem;
    border: 1px solid #ccc;
    border-radius: 0.5rem;
    background: #7d907e;
  }
}
/**
*   wrapper margin-left: 0;和左边的靠拢
*/
@media screen and (min-width: 810px) and (max-width: 840px) {
  .wrapper {
    position: relative;
    margin-left: 0;
    margin-top: 2rem;
    width: 60rem;
    height: 60rem;
    background-image: url("./images/bg.jpg");
    background-size: 100% 100%;
    box-shadow: 0 0 0.6rem 0.3rem #7d907e;
  }
  .options {
    /* position: absolute; */
    float: left;
    margin-left: 0;
    margin-top: 2rem;
    width: 20rem;
    border: 1px solid #ccc;
    border-radius: 0.5rem;
    background: #7d907e;
  }
}
/**
* 撑满全屏
*/
@media screen and (max-width: 810px) {
    /* html,body{
        width: 100%;
        height: 100%;
    } */
  .wrapper {
    position: relative;
    margin: 2rem auto;
    width: 100%;
    height: 35rem;
    background-image: url("./images/bg.jpg");
    background-size: 100% 100%;
    box-shadow: 0 0 0.6rem 0.3rem #7d907e;
  }
  .options {
    /* position: absolute; */
    float: left;
    margin: 0;
    width: 100%;
    /* height: 50%; */
    border: 1px solid #ccc;
    border-radius: 0.5rem;
    background: #7d907e;
  }
  .options input {
    width: 98%;
    margin: 0 auto;
    text-align: center;
    border: 2px solid #ccc;
  }
  .options ul li #start {
    margin-top: 1rem;
    width: 98%;
  }
}