:root {
     --color-primary: #212121;
 }

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: 'Roboto';
 }

 html,
 body {
     height: 100%;
     overflow: hidden;


 }

 a {
     text-decoration: none;
     font-size: 24px;
     font-weight: 500;

 }

 button {
     border: none;
 }

 img {
     display: block;
     user-select: none;
 }

 .flex-between {
     display: flex;
     align-items: center;
     justify-content: space-between;
 }

 .flex-start {
     display: flex;
     align-items: center;
     justify-content: flex-start;
 }

 .flex-center {
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .bg_img {
     position: absolute;
     top: 0;
     left: 0;
     z-index: -1;
     width: 100%;

 }

 #content {
     height: 100%;
     background: #ffffff;
     position: relative;
     min-width: 768px;

     li {
         height: 100dvh;
         display: flex;
         align-items: center;
         justify-content: start;
         color: #fff;
         position: absolute;
         inset: 0;
         transition: none;
         flex-direction: column;
         transform: translateY(var(--transform));

         .bg_wrap {
             position: fixed;
             top: 0;
             left: 0;
             width: 100%;
             height: 70%;
             z-index: -1;
             overflow: hidden;
         }


         .recharge_btn {
             position: absolute;
             top: 55px;
             background: var(--color-primary);
             right: 10px;
             color: #fff;
             font-size: 14px;
             font-weight: 500;
             border-radius: 24px;
             padding: 5px 10px;
         }

         main {
             width: 100%;
             padding: 3vh 3vw;
             box-sizing: border-box;
             overflow: hidden;
             align-items: normal;
             flex: 1;

             .left {
                 width: 50%;

                 .btn_wrap {
                     column-gap: 20px;
                     white-space: nowrap;


                     button {
                         border-radius: 6px;
                         background: #000;
                         padding: 10px 15px;
                         width: 40%;
                         cursor: pointer;
                         position: relative;



                         img {
                             margin-right: 10px;
                         }


                         .text {
                             color: #fafafa;
                             font-size: 16px;
                             font-weight: 400;
                             text-align: start;
                         }

                         .name {
                             color: #fff;
                             font-size: 26px;
                             font-weight: 500;
                         }

                         .qrcode {
                             position: absolute;
                             right: 0px;
                             top: 50%;
                             transform: translate(100%, -50%);
                             display: none;
                         }

                         &:last-child {
                             &:hover {
                                 .qrcode {
                                     display: block;
                                 }
                             }
                         }


                     }
                 }

                 h2 {
                     font-size: 64px;
                     color: #212121;
                     font-weight: 700;
                     margin-top: 20px;
                     line-height: 1.2;
                     margin-bottom: 40px;
                 }
             }

             .main_img {
                 margin-right: 20px;
                 height: 100%;
                 aspect-ratio: 338/684;


             }


         }

         footer {
             width: calc(100% - 40px);
             margin: 0 auto;



             .friend_concat {
                 width: 100%;
                 margin: 10px 0;
                 padding: 0 10px;
                 box-sizing: border-box;
                 column-gap: 10px;

                 a {
                     box-sizing: border-box;
                     font-size: 20px;
                     font-weight: 500;
                     text-align: center;
                     color: #666;
                 }

                 .div_divider {
                     width: 2px;
                     height: 20px;
                     background: #666;

                     &:last-child {
                         display: none;
                     }
                 }
             }
         }
     }
 }

 nav {
     padding: 0px 3vw;
     margin-top: 30px;
     width: 100%;
     align-items: flex-start !important;

     .left {
         font-size: 24px;
         font-weight: 500;
         column-gap: 15px;
         line-height: 1.3;
         color: #000;
         max-width: 50%;
         align-items: flex-start;

         .logo_img {
             width: 80px;
             height: 80px;
         }

         .logo_text_img {
             width: 209px;
         }

         p {
             margin-top: 10px;
         }
     }


 }

 .dot_wrap {
     position: absolute;
     right: 20px;
     top: 50%;
     transform: translateY(-50%);

     .dot {
         background: rgba(255, 255, 255, 0.70);
         padding: 5px;
         margin: 8px;
         box-sizing: content-box;
         border-radius: 50%;
         transition: all .3s;
         cursor: pointer;


     }

     .dot.active {
         background: #fff;
     }
 }


 select {
     border: none;
     outline: none;
     background: none;
     color: var(--color-primary);
     font-weight: 500;
     font-size: 16px;
     position: absolute;
     right: 3vw;
     top: 30px;



 }

 #dialog_modal {
     border: none;
     border-radius: 8px;
     padding: 20px;
     padding-bottom: 50px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     transition: all ease-in 0.2s;


     button {
         position: absolute;
         bottom: 10px;
         cursor: pointer;
         left: 50%;
         font-size: 20px;
         width: 30px;
         height: 30px;
         transform: translate(-50%, 0px);
         border-radius: 50%;
     }
 }

 @media (max-width: 1024px) {
     nav {
         .left {
             .logo_img {
                 width: 65px;
                 height: 65px;
             }

             .logo_text_img {
                 width: 170px;
             }

             font-size: 20px;
         }
     }

     li {
         main {
             .left {
                 h2 {
                     font-size: 48px !important;
                 }

                 .btn_wrap {
                     .text {
                         font-size: 14px !important;
                     }

                     .name {
                         font-size: 20px !important;
                     }
                 }
             }
         }
     }

     footer {
         a {
             font-size: 16px !important;
         }

         .div_divider {
             height: 16px !important;
         }
     }
 }