// .container{
//   width: 100%;
//   min-height: 100%;
//   display: flex;
//   flex-direction: column;
//   position: relative;
//   padding: 1rem;
//   background-color: var(--widget-bg);
// }
// .content{
//   display: flex;
//   flex-direction: column;
//   gap: 0.7rem;
// }
// .act_new{
//   top: 0;
//   right: 0;
//   width: 5.8rem;
//   height: auto;
// }
// .clock_item{
//   margin-right: 0.7rem;
//   display: flex;
//   align-items: center;
//   justify-content: space-between;
//   gap: 0.5rem;
//   padding: 0.3rem 0.8rem;
//   background-color: #22272b;
//   height: 2rem;
//   border-radius: 0.3rem;
//   font-size: 1rem;
//   color: #fff;
//   & .clock_icon{
//     margin-right: -1.5rem;
//     width: 2.4rem;
//     height: 2.4rem;
//   }
// }
// .act_item{
//   display: flex;
//   flex-direction: column;
//   width: 100%;
//   aspect-ratio: 1350/583;
//   position: relative;
//   & .banner{
//     width: 100%;
//     height: auto;
//     border-radius: 0.5rem;
//     z-index: 0;
//   }
//   & .item_content{
//     position: absolute;
//     z-index: 1;
//     top: 0;
//     left: 0;
//     right: 0;
//     bottom: 0;
//     & .item_left{
//       position: absolute;
//       top: 1rem;
//       left: 1rem;
//     }
//     & .item_right{
//       position: absolute;
//       bottom: 0.3rem;
//       right: 0.2rem;
//     }
//   }
// }
// .gift_item{
//   display: flex;
//   flex-direction: column;
//   gap: 0.5rem;
//   & .gift_title{
//     font-size: 1.2rem;
//     font-weight: 500;
//     color: var(--header);
//   }
//   & .git_fun_item{
//     display: flex;
//     flex-direction: row;
//     align-items: center;
//     justify-content: space-between;
//     gap: 0.8rem;
//     & .left{
//       display: flex;
//       padding: 1.5rem 0.55rem;
//       align-items: center;
//       justify-content: center;
//       background-image: linear-gradient(135deg, #FCD7A1 0%, #D17836 100%);
//       box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.25);
//       border-radius: 0.5rem;
//       & .icon_con{
//         display: flex;
//         position: relative;
//         align-items: center;
//         justify-content: center;
//         width: 3.3rem;
//         height: 3.3rem;
//         border-radius: 50%;
//         background: #3F5B88;
//         border: 0.04rem solid #FCD7A1;
//         img{
//           height: 80%;
//           width: auto;
//         }
//         & .red_dot{
//           top: 0rem;
//           right: 0.2rem;
//           position: absolute;
//           width: 0.8rem;
//           height: 0.8rem;
//           border-radius: 50%;
//           background: #FF0000;
//         }
//       }
//     }
//     & .right{
//       width: 100%;
//       img{
//         border-radius: 0.5rem;
//         width: 100%;
//         height: auto;
//       }
//     }
//   }
// }

.container {
    width: 100%;
    height: 100%;
    overflow: hidden;

    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: flex-start;

    .topArea {
        width: 100%;
        position: relative;
        top: 0;
        z-index: 10;
        background-color: #1b1c26;

        flex-shrink: 0;

        .header {
            width: 100%;
            height: 4.4rem;
            color: #fff;
            font-size: 1.61rem;
            text-align: center;
            line-height: 4.4rem;
            font-family: Roboto;
        }
    }

    .centerArea {
        width: 100%;
        flex: 1;
        overflow-y: auto;

        .content {
            width: 100%;
            padding: 0 1rem;
            margin-bottom: 5rem;

            .act_item {
                margin-bottom: 0.73rem;
                width: 100%;
                height: 7.3rem;
                position: relative;

                display: flex;
                flex-direction: column;
                align-items: flex-start;
                justify-content: center;

                background: linear-gradient(
                    270deg,
                    rgb(0, 69, 39),
                    rgb(0, 0, 0) 100%
                );
                border-radius: 0.36rem;

                .banner {
                    width: 100%;
                    height: 7.3rem;
                    position: absolute;
                    top: 0;
                    left: 0;
                }

                .title {
                    width: 80%;
                    font-size: 1.17rem;
                    font-weight: 700;
                    color: #0aeb88;
                    margin-left: 1.47rem;
                    text-align: left;
                    font-family: Roboto;
                }

                .desc {
                    font-size: 2.64rem;
                    font-weight: 900;
                    color: #fff;
                    text-shadow: 0 0.1rem 0 var(--primaryColor);
                    margin-left: 1.47rem;
                    line-height: 3rem;
                    font-family: Roboto;
                }
            }
        }
    }
}
