.background {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 60vh;
     background-color: var(--red);
     z-index: -99;
 }


 .main-text {
     color: var(--white);
     text-align: start;
     font-family: Anton;
     font-size: 7.5rem;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
 }

 .descript {
     color: var(--white);
     font-family: Afacad;
     font-size: 1.25rem;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
 }

 .avatar {
     width: 28.375rem;
     height: 33.5625rem;
     border-radius: 2.6875rem;
     background: url(img/avatar.png);
     background-position: center;
     background-size: cover;
     margin: auto;
 }

 .des-after {
     display: none;
     color: var(--white);
     text-align: center;
     font-family: Afacad;
     font-size: 1rem;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
     width: 40.3125rem;
     margin: 0 auto 4rem;
 }

 .cate {
     color: var(--white);
     text-align: start;
     font-family: Anton;
     font-size: 2.5rem;
     font-style: normal;
     font-weight: 400;
     line-height: 3rem;
     padding-left: calc(var(--bs-gutter-x) * .5 *2) !important;
 }

 .tee {
     color: var(--white);
     font-family: Afacad;
     font-size: 1.25rem;
     font-style: normal;
     font-weight: 400;
     line-height: 3rem;
 }

 .h46 {
     line-height: 46px;
 }

 @media (max-width: 1280px) {
     .s1 {
         padding-bottom: 6rem !important;
     }
 }

 @media (max-width: 1025px) {
     .main-text {
         font-size: 6.5rem;
     }

     .descript {
         font-size: 1rem;
     }

     .s1 {
         padding-bottom: 3rem !important;
     }

 }

 @media (max-width: 991px) {
     .descript {
         display: none;
     }

     .des-after {
         display: block;
     }

     .main-text {
         text-align: center;
         font-size: 7.5rem;
         line-height: 20rem;
     }

     .s1 {
         padding-bottom: 6rem !important;
     }

     .s2 {
         height: auto !important;
     }
 }

 @media (max-width: 912px) {

     .s1 {
         padding-bottom: 20rem !important;
     }
 }

 @media (max-width: 820px) {
     .main-text {
         line-height: 25rem;
     }

     .main-text {
         text-align: center;
         font-size: 7.5rem;
         line-height: 20rem;
     }

     .s1 {
         padding-bottom: 10rem !important;
     }

     .hiiu p {
         padding: 0 !important;
     }
 }

 @media (max-width: 767px) {
     .s1 {
         padding-bottom: 14rem !important;
         padding-left: 1rem !important;
         padding-right: 1rem !important;
     }

     .main-text {
         text-align: center;
         font-size: 3.75rem;
         line-height: 12rem;
     }

     .avatar {
         width: 17.0625rem;
         height: 17.875rem;
     }

     .des-after {
         width: 85%;
         font-size: 0.85rem;
     }

     p {
         font-size: 0.85rem !important;
     }

     .cate {
         text-align: center;
         margin-bottom: 3rem !important;
     }

     .hiiu-first {
         padding-left: 0 !important;
     }

     .hiiu-last {
         padding-right: 0 !important;
     }
 }