.navbar {
     visibility: hidden;
     z-index: 9999;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     background-color: transparent !important;
     padding: unset;
     align-items: flex-start;
 }

 .navbar .navbar-toggler {
     margin-top: 10px;
 }

 .navbar .logo {
     margin-left: 40px;
 }

 .navbar .navbar-toggler {
     z-index: 999;
     border: none;
 }

 .navbar .navbar-toggler:focus {
     box-shadow: unset;
 }

 .navbar .navbar-collapse {
     position: fixed;
     top: 0;
     left: 0;
     background-color: #000;
     width: 100%;
 }

 .navbar-light .navbar-nav {
     padding: 40px;
 }

 .navbar-light .navbar-nav .nav-link {
     color: #fff;
 }

 .navbar-light .navbar-nav .nav-link:focus,
 .navbar-light .navbar-nav .nav-link:hover {
     color: #fff;
 }
 .pop-vedio { height: 705px; }
 @media (min-width: 300px) and (max-width: 320px) { .pop-vedio { height: 190px; } }
 @media (min-width: 321px) and (max-width: 450px) { .pop-vedio { height: 230px; } }
@media (min-width: 451px) and (max-width: 600px) { .pop-vedio { height: 270px; }}
 @media (min-width: 601px) and (max-width: 720px) { .pop-vedio { height: 345px; }}
@media (min-width: 721px) and (max-width: 1024px) { .pop-vedio { height: 375px; }}
@media (min-width: 1025px) and (max-width: 1200px) { .pop-vedio { height: 430px; }}
@media (min-width: 1201px) and (max-width: 1300px) { .pop-vedio { height: 475px; }}
@media (min-width: 1301px) and (max-width: 1500px) { .pop-vedio { height: 550px; }}
@media (min-width: 1501px) and (max-width: 1700px) { .pop-vedio { height: 630px; } }
 @media (min-width: 300px) and (max-width: 720px) {
     .top-container::before {
         content: "";
         position: absolute;
         background: url(../images/top-m-bg.jpg);
         width: 100%;
         height: 100%;
         top: 0;
         background-position: top center;
         background-repeat: no-repeat;
         background-size: contain;
     }

     .banner-section .banner_content h1 {
         font-size: 34px;
         padding: unset;
     }

     .banner-section .banner_content .text {
         font-size: 18px;
     }

     .banner-section .banner_content .small-txt {
         font-size: 12px;
     }

     .btn-term {
         margin-top: 20px;
         display: block;
         width: 31px;
         height: 15px;
         background: url(../images/arrow-m.png);
     }

     .footer .footer-item {
         width: 95%;
     }

     .footer .footer-item ul {
         padding: unset;
         flex-wrap: wrap;
         gap: 0;
     }

     .footer .footer-item ul li {
         flex: 0 0 50%;
         text-align: center;
         margin-bottom: 10px;
     }

     .footer-bottom {
         display: flex !important;
         flex-direction: column !important;
         gap: 10px !important;
         width: 95% !important;
     }

     .footer-bottom .info-box {
         display: flex !important;
         flex-direction: column !important;
         gap: 10px !important;
         align-items: center;
     }

     .footer-bottom .info-box .img {
         margin-bottom: 20px;
     }

     .footer-bottom .info-box {
         margin-bottom: 20px;
     }

     .footer-bottom .info-box .info-body p {
         font-size: 14px !important;
     }

     .footer .footer-bottom .links-box ul {
         align-items: center;
         padding: unset;
     }

     .enter-body {
         max-width: 90%;
         padding-top: 40px;
     }

     .enter-body .enter-title {
         font-size: 30px;
     }

     .enter-body .enter-dis {
         font-size: 16px;
     }

     .step-groups .step01,
     .step-groups .step02 {
         display: flex;
         flex-direction: column;
         align-items: center;
     }

     .step-groups .step01 .num,
     .step-groups .step02 .num {
         width: 32px;
         height: 32px;
         font-size: 18px;
         font-weight: 700;
     }

     .step-groups .step01 h2,
     .step-groups .step02 h2 {
         font-size: 24px;
         text-align: center;
     }

     .step-groups .step-body {
         padding-top: 0;
         align-items: center;
     }

     .step-groups .step-body h2,
     .step-groups .step-body p {
         text-align: center;
     }

     .step-groups {
         gap: 30px;
     }

     .btn-primary {
         width: 275px;
     }

     .bonus-info {
         flex-direction: column;
         padding: unset;
         margin-bottom: 30px;
     }

     .bonus-info .img {
         width: 100%;
         height: unset;
     }

     .bonus-info .img img {
         border-top-left-radius: 10px;
         border-top-right-radius: 10px;
         border-bottom-left-radius: 0;
     }

     .bonus-info .info-body {
         opacity: 0.9;
         padding: 20px;
         text-align: center;
         border-radius: 10px;
     }

     .bonus-info .info-body h2 {
         margin-bottom: 5px;
     }

     .timer-info .title {
         font-size: 17px;
     }

     .timer-info .timer-body .timer-item .timer-item-title {
         font-size: 50px;
     }

     .timer-info .timer-body .timer-item .timer-item-value {
         color: #fff;
         font-size: 15px;
         font-weight: 700;
     }

     .timer-info .timer-body {
         width: unset;
         gap: 30px;
     }

     .why-pop {
         width: 90%;
     }

     .why-pop h1 {
         font-size: 32px;
         margin-bottom: 10px;
         width: 85%;
     }

     .why-pop h3 {
         font-size: 18px;
         margin-bottom: 10px;
         width: 90%;
     }

     .why-pop .pop-vedio {
         width: 100%;
     }

     .why-pop .item-body {
         width: 90%;
     }
 }

 @media (min-width: 320px) and (max-width: 1024px) {
     .pc-header {
         visibility: hidden;
     }

     .navbar {
         visibility: visible
     }
 }