body {
         display: flex;
         justify-content: center;
         align-items: center;
         background-attachment: fixed;
         background-repeat: no-repeat;
         background-size: cover;
         height: 100vh;
     }

     a {
         color: white;
     }

     .box {
         position: absolute;
         width: 1110px;
         background: #ffffff;
         border-radius: 12px;
         box-shadow:  0 15px 50px  rgba(0,0,0,0.5);
     }

     .background {
         position: relative;
         z-index: 1;
         height: 300px;
         border-top-left-radius: 12px;
         border-top-right-radius: 12px;
     }

     .background::before {
         border-top-left-radius: 12px;
         border-top-right-radius: 12px;
         position: absolute;
         background-size: cover;
         width:100%;
         height: 100%;
         content: '';
         z-index: -1;
         transform-origin: 0 0;
         transform: skewY(0deg);
     }

     .avatar {
         position: absolute;
         background: #cacaca;
         top: 150px;
         left: 60px;
         width: 220px;
         height: 220px;
         z-index: 2;
         border-radius: 500px;
         border: 7px #fff solid;
         box-shadow: 0 5px 10px #00000065;
     }

     .title {
         padding: 150px 0 0 360px;
         text-shadow: 0 0 10px #000;    
     }

     .title .Positive-title {
          position: relative;
         color: white;
         font-size: 50px;
         font: 900 px '';
         margin-bottom: 5px;
     }

     .title .Positive-title span {
         position: absolute;
         top: 23px;
         margin-left: 12px;
        background: #ffe44c;
         border-radius: 5px;
         color: #000000;
         font-size: 14px;
         padding: 0px 4px;
     }      

     .title .onespeech {
         color: #fff;
         font: 500 24px '';
     }

     .content {
         height: 26px;
         color: #ff0000;
    }

     .tags {
         position: relative;
         left: 35px;
         padding-top: 100px;
         width: 250px;
         height: 360px;
         float: left;
         text-align: center;
     }

     .tag {
         background: rgb(149, 178, 255);
         color: #fff;
         border-radius: 4px;
         padding: 3px 8px;
         font-size: 14px;
         margin-right: 4px;
         line-height: 35px;
         cursor: pointer;
         box-shadow:  0 2px 3px  rgba(0,0,0,0.3);
     }

     .tag:hover {
         background: #eee4ad;
         color: #444;
     }   

     .container {
         position: relative;
          width: 825px;
         top: -25px;
         left: 35px;
         float: left;
     }

     .introduce {
         position: relative;
         left: 50px;
         top:20px;
         width: 751px;
         height: 80px;
         font-size: 20px;
         border-radius: 12px;
         -webkit-line-clamp: 2; 
         word-break: break-all;
     }

     .aplayer {
         position: relative;
         top: 5px;
         left: 45px;
         width: 750px; 
         box-shadow:  0 3px 5px  rgba(0,0,0,0.3);
     }
   
     .nav-button {
         position: relative;
         left: 45px;
         top: 15px;
         width: 770px;
         height: 130px;
         float: left;
     }

     .spacing-button {
         position: relative;
        margin: 7px 5px;
         width: 245px;
         height: 50px;
        z-index: 3;
         float: left;
         border-radius: 6px;
         box-shadow:  0 3px 5px  rgba(0,0,0,0.3); 
     }

     .copyright {
         position: absolute;
         top: 200px;
         width: 230px;
         height: 95px;
         left: -230px;
     }

     .footer {
         display: inline-block;
         border-radius: 6px;
         text-shadow: none;
         font-size: 14.1px;
         color: #fff;
         line-height: 18px;
         margin-bottom: 7px;
     }

     .footer .subject {
         display: inline-block;
         background-color: #4d4d4d;
         padding: 4px 4px 4px 6px;
         border-top-left-radius: 4px;
         border-bottom-left-radius: 4px;
         box-shadow:  0 2px 1.5px  rgba(0,0,0,0.2);
     }
    
     .footer .value {
         display: inline-block;
         padding: 3.8px 6px 4px 4px;
         border-top-right-radius: 4px;
         border-bottom-right-radius: 4px;
          box-shadow:  0 2px 1.5px  rgba(0,0,0,0.2);
     }
 
     .footer  .subnav {
         display: inline-block;
         background-color: #4d4d4d;
         padding: 4px 4px 4px 4px;
         border-radius: 4px;
         box-shadow:  0 2px 1.5px  rgba(0,0,0,0.2);
     } 
    
     /* 颜色 */
     .orange {
          background-color: #ff7300 !important;
     }
     .green {
         background-color: #31DF8A !important;
     }
     .Yellow{
         background-color: #ffa600!important;
     } 
	 .blue{
	     background-color: #1E9FFF!important;
	 } 

     /* 手机端样式 */
 
     @media (max-width: 575px) {

     .box{
         position: absolute;
         width: 100%;
         background: #ffffff;
         border-radius: 12px;
         box-shadow:  0 15px 50px  rgba(0,0,0,0.5);
     }
    
     .background {
         position: relative;
         z-index: 1;
         border-top-left-radius: 12px;
         border-top-right-radius: 12px;
     }
    
     .background::before {
         border-top-left-radius: 12px;
         border-top-right-radius: 12px;
         position: absolute;
         background-size: cover;
         width:100%;
         height: 450px;
         content: '';
         z-index: -1;
         transform-origin: 0 0;
         transform: skewY(0deg);
     }
    
     .avatar {
         position: absolute;
         background: #cacaca;
         width:200px;
         height: 200px;
         left: 50%; 
         top:25%;     
        transform:translate(-50%,-50%);
         z-index: 2;
         border: 5px #fff solid; 
         box-shadow: 0 5px 10px #00000065;
     }
    
     .title {
         padding: 150px 0 0 0px;
         text-shadow: 0 0 10px #000;
         text-align: center;
     }
    
     .title .Positive-title {
          position: relative;
         color: rgb(255, 255, 255);
         font-size: 25px;
         top: 230px;
         margin-bottom: 5px;
     }
     .title .onespeech {
         display: none;
     }
     
     .content{
         height: 26px;
         color: #444;
     }
    
     .tags{
         display: none;
     }

     .tag {
         display: none;
     }
    
     .container {
         left: 0px;
         position:relative;
         width: 100%;
         height: 100%;
         top: 150px;
         float: left;
         background: #ffffff;
         border-radius: 12px;
     }
    
     .introduce {
         left: 0px;
         position:static;
         top: 50px;
         width: 100%;
         height: 100%;
         z-index: 4;
     }

     .aplayer{
         left: 0px;
         position:static;
         width: 97%;
         top: 40px;
         border-radius: 6px; 
         box-shadow:  0 3px 5px  rgba(0,0,0,0.3); 
     } 
    
     .nav-button{
        left: 0px;
         position:static;
         top: 40em;
         width: 100%;
         height:100% ;
         float: left
     }
    
     .spacing-button{
         left: 0px;
         position:static;
         margin: 5px 5px;
         width: 47.6%;
         height: 3em;
         z-index: 3;
         float: left;
         border-radius: 6px;
         box-shadow:  0 3px 5px  rgba(0,0,0,0.3); 
     }
    
     .copyright{
        position:static;
         top: 1%;
         width: 100%;
         height: 100%;
         left: 0px;
     }
     } 

     /* 按钮大小 */
     @media (max-width: 450px) {

     .spacing-button{
         width: 100%;
     }

     .aplayer{
         width: 100%;
    } 
     }

     /* 头像大小 */
     @media (max-width: 400px) {

     .avatar {
           width:130px;
           height: 130px;
     }
     }