body{
    margin: 0;
    padding: 0;
}
header{
    width: 100;
    height: 124px;
    background-image: url(img/header.png);
}
#header{
    width: 100;
    height: 83px;
    margin-top: 5px;
    margin-left: 400px;
    background-image:url(img/logo1.png);
    background-repeat: no-repeat;
}
main{
    width: 100;
    height: 668px;
    background-color: #475669;
    position: relative;
}
footer{
    width: 100%;
    height: 68px;
    
}
#footer{
    width: 100%;
    height: 82px;
    background-color: #842E27;
    color:white;
    text-align: center;
}

/*滚动代码 待调整*/
#max{
  width: 100%;
  height: 668px;
  align-items: center;
  margin: 0 auto;
  margin-top: 0%;
  }
  .re{
    position: relative;
    height: 668px;
    width: 100%;
  }
  .re ul{
    width: 100%;
    height: 620px;
    list-style-type:none ;
    margin-top: 0;
    padding-left: 0;
    padding-right: 0;
  }
  .re ul>li{
    float: left;
    width: 100%;
    height: 668px;
    position: absolute;
    transition: 1s;
    opacity: 0;
  }
  .re ul>li img{
    width: 100%;
    height: 668px;
  }
  #max ol {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5,75px);
    grid-template-rows: auto;
    grid-gap: 1em;gap: 1em;
    margin-left:40%;
    list-style: none;
    top:0;left:0;
  }
  #max ol li {
    width: 10px;
    height: 10px;
    font-size: 15px;
    line-height: 20px;
    float: left;
    text-align: center;
    border-radius: 2em;
    border: 5px solid #999999;
  }
  /*滚动代码 待调整*/

#input{
    width: 286px;
    height: 449px;
    background-color: rgba(255, 255, 255, 0.9);
    float: right;
    position: absolute;
    top: 70px;
    right: 280px;
    border-radius: 0.5em;
    overflow: hidden;
}
.change{
  display: block;
  width: 143px;
  height: 40px;
  float: left;
  padding-top: 5px;
  text-align: center;
  background-color:#842E27;
  border-style: none;
  cursor: pointer;
  color: white;
}
#change1{
  background-color: rgba(255, 255, 255, 0.9);
  color:#842E27;
}

.change a{
  font-size: 19px;
}
#change_2{
  margin-top: 40px;
  position: relative;
  transition: 1s;
  transform-style: preserve-3d;
}
#change_2{
  width: 286px;
  height: 290px;
}
#change_2_1,#change_2_2{
  width: 246px;
  height: 260px;
  backface-visibility: hidden;
  position: absolute;
  padding: 30px 20px 0px 20px;
  top: 0;
}
#change_2_2{
  width: 286px;
  padding: 30px 0px 0px 0px;
  transform:rotateY(-180deg);
}
#change_2_1 div{
  width: 246px;
  height: 40px;
  background-color: #fff;
  margin-bottom: 20px;
  position: relative;
  z-index: 8;
}
#change_2_1 div img{
  position: absolute;
  top: 11px;
  left: 11px;
  z-index: 10;
}
#change_2_1_text_1,#change_2_1_text_2{
  width: 205px;
  height: 22px;
  position: absolute;
  left: 0;
  top: 0;
  padding: 6px 11px 6px 30px;
  color: #475669;
  border: none;
  z-index: 9;
}
#canvas_fa{
  position: relative;
  z-index: 9;
}
#text{
  width: 99px;
  height: 28px;
  padding: 6px 11px 6px 30px;
  border:none;
}
#canvas{
  background:none;
  float: right;
  position: absolute;
  top: 10px;
  right: 15px;
  color:green;
  cursor: pointer;
  vertical-align: middle;
  box-sizing: border-box;
  z-index: 10;
}
#bt,#reset_bt{
  width: 110px;
  height: 40px;
  background-color:#842E27;
  color: white;
  border: none;
  border-radius: 0.2em;
}
#reset_bt{
  float: right;
  background-color: #475669;

}
#Remember_fa a{
  font-size: 14px;
  text-decoration: none;
}
#Remember{
  color: blue;
  margin-right: 40px;
}
#QR{
  width: 246px;
  height: 246px;
  margin-left: 20px;
  background-color:white;
  position: relative;
  transition: 1s;
  transform-style: preserve-3d;
}
#QR_1,#QR_2{
  position: absolute;
  top: 0;
  left: 0;
  backface-visibility: hidden;
}
#QR_2{
  transform:rotateY(-180deg);
}
#scan{
  width: 100%;
  height: 20px;
}
#scan a{
  text-decoration: none;
  color: black;
  font-weight: 600;
}
#qq{
  width: 100%;
  height: 60px;
  position: relative;
}
#qq img{
  position: absolute;
  left: 30%;
  top: 20px;
}
#qq a{
  position: absolute;
  top: 25px;
  left: 40%;
}