body {
    background: url(./image/bg.jpg) fixed no-repeat center top;
    background-size: cover;
    background-color: #1c3c579c;
    font-family: Arial, sans-serif;
    margin: auto;
    padding: 0;
    position: fixed;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
}

.main{
  background-color: #00000066;
  padding: 0 30% 100% 10%;
  display: flex;
  justify-content: center;/*主轴对齐方式,水平居中*/
  align-items: center;/*垂直对齐方式,居中*/
}

.main-inner{
  top: 2rem;
  position: relative;
  display: grid;
  grid-template-columns: auto 5rem;
  grid-template-rows: 10rem 10rem;
  grid-gap: 0.6rem;
}


.name-frame{
  font-family: 华文行楷;
}

.main-content{
  width: 6rem;
  height: 4rem;
  text-align: center;
  border-radius: 5%;
  background-color: #ffffff38;
}

.lucency{
  background-color: #fbffff00;
}

/*中心透明框（记得改成透明*/
/*
.center-frame{
    margin: auto;
    width: 50%;
    height: 40%;
    float: none;
    background-color: #fbffff00;
}
*/

/*圆角框*/
.filleted-corner{
  padding: 1rem;
  border-radius: 1rem;
  background-color: #cfd9f538;
}

.logo {
  width:150px; 
  left: 4rem;
  border-radius: 50%;
  border: 3px solid #92d3f8f5;
  box-shadow: 0 0 1px 5px rgba(223, 223, 223, 0.425);
  transition: all .5s;
  position: relative;
  z-index: 800;
}

.name-frame{
  width: 24rem;
  height: 8rem;
  float: none;
}

#name {
  float: none;
  position: relative;
  right: 4rem;
  margin: 0;
  padding: 0;
  font-family: PixelFont12px;
  font-size: 6rem;
  color: #fffefe;
  text-shadow: 5px 6px 10px #00eeff5b
}

@font-face
{
	font-family: PixelFont12px;
	src: url('./font/fusion-pixel-12px-proportional-zh_hans.ttf')

}

@font-face {
  font-family: UnidreamLED;
  src: url('./font/UnidreamLED.ttf');
}

@font-face {
  font-family:PixelFont8px;
  src: url('./font/fusion-pixel-8px-monospaced-zh_hans.ttf');
}

#web-run{
  margin: auto;
  width:20rem;
  height: 5rem;
  float: none;
  color: #ffffff;
}

#web-run p{
  position: relative;
  top: 1rem;
  right: 0.8rem;
}

#htmer_time{
  position: relative;
  float: none;
  top: 10px;
  font-size: xx-large;
  color: #62a3f8f6;
  font-family: PixelFont8px;
}

#third-party{
  position: relative;
  top: 4rem;
  width: 8rem;
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-template-rows: auto;
  grid-gap: 0.3rem;
}

.icon{
  width: 1.5rem;
  height: 1.5rem;
  opacity: 0.8;
  margin: 0.3rem;
  display: inline;
  float: right;
}

#web-inner{
  display: grid;
  grid-template-columns: 6rem 6rem auto;
  grid-template-rows:  auto;
  grid-gap: 1rem;
}

#web-inner div{
  padding: 0;
  width: 6rem;
  height: 4rem;
}

#web-content{
  top: 2rem;
  width: 6rem;
  height: 5rem;
  padding: 1.3rem;
  position: relative;
  text-align: center;
  font-size: large;
  font-family: PixelFont12px;
  text-decoration: none;
  color: #ffffff;
}

.button{
  padding: 1rem;
  border-radius: 1rem;
  background-color: #cfd9f538;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  cursor: pointer;
}

.button-on :hover{
  border: 3px solid #92d3f8f5;
  box-shadow: 0 0 1px 5px rgba(223, 223, 223, 0.425);
  transition: all .5s;

}


#music-play{
  position: relative;
  top: 1.5rem;
  width: 15rem;
  height: 10rem;
}

footer {
  position: fixed;
  top: 95%;
  bottom: 1rem;
  left: 0px;
  height: 100%;
  width: 100%;
  background-color:  #00000000;;
  padding: 10px;
  text-align: center;
}

.footer-filing-item {
  color:#d4eef8c4;
  text-decoration:none;
}

/*半透明框（记得整合）*/
.test{
  border-radius: 2rem;
  background-color: #06112e3f;
}