*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-size:18px;
  }
  .container{
    min-height:100vh;
  }
  .content-top{
    display:flex;
    align-items: center;
    background-repeat: repeat;
    background-image: url(../images/20240618/page-bg.jpg);
  }
  .content-body{
    padding:1rem 1rem 0;
  }
  .content-body .content-body-title{
    font-size:28px;
    color:#fff;
    font-family:'MiSans';
    display:flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  .content-body .content-body-title a{
    text-align:center;
    color: #fff;
    padding: .2rem .6rem;
    line-height: .9rem;
    border: 1px solid #ffffff52;
    border-radius: 1rem;
    font-size: .6rem;
    text-decoration: none;
    display: block;
    width: 2.6rem;
    height: 1.4rem;
    min-width: 2.6rem;
    min-height: 1rem;
  }
  .content-body .content-main{}
  .content-body .content-main .content-main-1{
    height:50vw;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
  .content-body .content-main .content-main-2{
      display:flex;
      margin-top:20px;
  }
  .content-body .content-main .content-main-2 .content-main-left-item{
      width:50%;
      color:#fff;
      font-family:'MiSans';
      text-align:center;
  }
  .content-body .content-main .content-main-2 .content-main-left-item .content-main-left-item-type{
      font-size:10px;
      margin-bottom:6px;
  }
  .content-body .content-main .content-main-2 .content-main-left-item .content-main-left-item-title{
      font-size:22px;
  }
  
  .content-body .content-main .content-main-left{
      display:flex;
      flex-direction: column;
    justify-content: center;
  }
  .content-body .content-main .content-main-left .content-main-left-item{
    font-family:'MiSans';
    color:#fff;
    margin:16px 0;
  }
  .content-body .content-main .content-main-left .content-main-left-item .content-main-left-item-type{
      font-size:10px;
      margin-bottom:6px;
  }
  .content-body .content-main .content-main-left .content-main-left-item .content-main-left-item-title{
      font-size:22px;
  }
  
  .content-body .content-main .content-main-right{
      min-width:50vw;
      max-width:60vw;
      background-position: center center;
      background-size:cover;
  }
  
  .content-sound{
      padding:10vw 5vw;
      display:flex;
      flex-direction: row;
      align-items: center;
  }
  .content-sound-body{
    height:7px;
    position:relative;
    display:flex;
    align-items: center;
    margin: 10px 0;
    width:100%;
  }
  .content-sound-body .content-sound-line{
      background:#7a95b5;
      height:1px;
      width:100%;
  }
  .content-sound-body .content-sound-bar{
      width:7px;
      height:7px;
      position:absolute;
      top:0;
      left:0;
      border-radius:4px;
      background:#fff;
  }
  .content-sound .content-sound-time{
      display:flex;
      justify-content: space-between;
    width:100%;
  }
  .content-sound .content-sound-time .content-sound-time-item{
      color:#c9d9eb;
      font-size:10px;
  }
  
  .content-sound .content-sound-controller{
    height: 50px;
    line-height: 50px;
    width:50px;
    text-align: center;
    margin-right:20px;
  }
  .content-sound .content-sound-controller .sound-icon{
      font-family:'iconfont';
      color:#fff;
      font-size:16px;
      padding: 16px;
      border-radius: 38px;
      border: 1px solid #7a95b5;
  }
  .content-radius{
      background: #fff;
      margin:0 -1rem;
      height:16px;
      border-top-left-radius: 16px;
      border-top-right-radius: 16px;
  }
  
  .content-more{
      padding: .5rem 1rem 1.5rem;
  }
  .content-more .more-content{
      display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
  }
  .content-more .more-content .more-item{
      width:50%;
    font-family:'MiSans';
    margin-bottom: .8rem;
  }
  
  .content-more .more-content .more-item .more-item-type{
      font-size:.8rem;
      margin-bottom:6px;
      color:#b1bcc9;
  }
  .content-more .more-content .more-item .more-item-title{
      font-size:.9rem;
      color:#5a6169;
  }
  
  .content-more .more-text{
      padding-top:1rem;
      margin-top:0.6rem;
      border-top:1px solid #e6e9eb;
  }
  .content-more .more-text *{
    font-family:'MiSans';
    color:#61676d;
    font-size: 15px;
    line-height: 28px;
    text-align:justify;
  }