*{
  border: 0px;
  margin: 0px;
  padding: 0px;
}
h1 {
  color:white;
  font-size: 50px;
}

header {
  background-color :mediumorchid;
  height: 120px;
  width: 100%;
}

/* header a{
  color: white;
  text-decoration: none;
  font-size: 20px;
}

header a:hover{
  text-decoration: underline;
}

header li{
  display: inline;
  margin-right: 3vw;
}

header ul{
  position:absolute;
  right: 2vw;
  top: 0;
  line-height: 120px;
} */

header h1{
  position:absolute;
  left: 10vw;
  top: 0;
  line-height: 120px;
}

header h2{
  position:absolute;
  left: 2vw;
  top: 0;
  line-height: 120px;
  background-image: url(logo.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 60px;
  text-indent: -9999px;
}

main {
  background-color: azure;
  display:flex;
  justify-content: center;
}

main div{
  background-color: azure;
  display:flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  width: 300px;
  height: 300px;
}

main div button:hover{
  cursor: pointer;
  color:purple;
}

main div button{
  text-align: center;
  color:blueviolet;
  font-size: 30px;
  margin-top: 20px;
}

main div p{
  text-align: center;
  line-height: 1.5;
  margin-top:20px;
}

.model_set{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  font-family: Arial, sans-serif;
}
.shezhi {
  margin: 0;
  font-size: 1.2em;
  width:200px;
  background-color: antique-white;
  text-align:center;
}
.shezhi:hover{
  cursor:pointer;
  color:violet;
}

.hidden{
  display: none;
}

.xuexi{
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.xuexi div{
  display :flex;
  margin:20px 0;
}

.xuexi p{
  width: 300px; 
}

.xuexi input{
  width: 250px;
}

.xuexi pp{
  width: 50px;
  background-color: antiquewhite;
}

.yule{
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.yule div{
  display :flex;
  margin:20px 0;
}

.yule p{
  width: 300px; 
}

.yule input{
  width: 250px;
}

.yule pp{
  width: 50px;
  background-color: antiquewhite;
}

.chufa_f{
  display:flex;
  align-items: center;
  justify-content: center;
}

.add_command{
  background-color:green;
  color:white;
  font-size: 20px;
  width:100px;
  border-radius: 10px;
  margin-right: 50px;
}

.add_command:hover{
  cursor:pointer;
  color: pink;
}

.chufa_s{
  font-size: 15px;
  margin-left: 10px;
}

footer {
  position: fixed;
  bottom: 0;
}

.period_box{
  display:flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}

.zhiling_input {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}

.zhiling_input label{
  margin-right: 50px;
  font-size: 15px;
}

.zhiling_input input{
  font-size: 15px;
  height:20px;
  width: 200px;
  border:2px solid black;
  border-radius: 5px;
}

.specific_box{
  display:flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}

.specific_box input{
  width: 40px;
  height:20px;
  border:2px solid black;
  border-radius: 5px;
  font-size: 18px;
}

.specific_box div{
  margin-left: 20px;
}

.period_box input#p_time{
  margin-left: 10px;
  margin-right: 10px;
  border: 2px solid black;
  border-radius: 5px;
  font-size: 18px;
  width: 50px;
}

.period_box div{
  margin-left: 10px;
}

.ctr_period_box{
  display:'block';
}

.ctr_specific_box{
  display:none;
}

.yuyinzhilingku{
  display:flex;
  justify-content:center ;
  align-items: center;
  flex-direction: column;
}

#yuyinzhilingku{
  margin:20px 0;
  font-size: 20px;
  background-color: aquamarine;
  width: 150px;
  border-radius: 10px;
  text-align: center;
}

li {
  display:flex;
  justify-content: space-between;
}

li label{
  margin:4px 5px;
}

.zhiling_{
  width:200px;
  border:1px;
}

.moshi_ {
  width: 160px;
  border:1px;
}

.chufashijian_{
  width: 280px;
  border: 1px;
}

.garbage {
  width: 25px;
  height: 25px;
  background: none;
  cursor:pointer;
  opacity: 0.5;
}

.garbage:hover{
  opacity: 1.0;
}

body {
  background-color: azure;
}

.tijiao{
  background-color: none;
  position: fixed;
  bottom: 80px;
  width: 100%;
  text-align: center;
}

.tijiao_{
  width: 80px;
  height:40px;
  font-size: 20px;
  background: none;
  background-color: green;
  color:white;
  border-radius: 10px;
}

.tijiao_:hover {
  text-decoration: underline;
  cursor:pointer;
  color:pink;
}

.bt {
  display:flex;
  justify-content: center;
  align-items: center;
}

.subbt {
  margin:0 10px;
  font-size: 17px;
  width :100px;
}

.subbt:hover {
  text-decoration: underline;
  cursor: pointer;
  color:pink;
}

.daochu{
  background-color: none;
  position: fixed;
  bottom: 80px;
  width: 100%;
  text-align: center;
}

.daochu_{
  width: 80px;
  height:40px;
  font-size: 20px;
  background: none;
  background-color: green;
  color:white;
  border-radius: 10px;
}

.daochu_:hover {
  text-decoration: underline;
  cursor:pointer;
  color:pink;
}

#main_f{
  display:flex;
  align-items: center;
  justify-content: center;
}

#baogaof{
  display: flex;
  align-items: center;
  justify-content: center;
}