@media (min-width: 768px) and (max-width: 1300px) {
    html, body {
        overflow-x: hidden;
    }
    .wingmall-container {
        width: 100%;
        padding: 0 10px;
    }
    .main-menu .menu ul li {
        margin-right: 0;
        width: 50%;
    }
    .menu-top {
        padding: 15px;
    }
    .service-area .service-area-box {
        margin-bottom: 40px;
    }
    .page-title {
        padding: 40px 0;
        text-align: center;
    }
    .page-breadcrumbs ul {
        justify-content: center;
    }
    .footer-dl-app a img {
        margin-bottom: 15px;
    }
    .information .info-box {
        margin-bottom: 20px;
    }
    .footer-app {
        text-align: right;
    }
    .about-white-box .about-img {
        position: unset;
        display: none;
    }
    .promotion, .news, .corporate, .service-area, .with-us {
        padding: 80px 0;
    }
    .swiper {
        margin-bottom: 0px;
    }
    .js-slideshow, .js-slideshow-reverse {
        padding-bottom: 2vw;
    }
    .slide-partner {
        width: 17vw;
        height: 150px;
    }
    .single-promo-end-title {
        top: -45px;
    }
    .single-main-promo-items {
        top: -15px;
    }
}
@media (max-width: 767px) {
    html, body {
        overflow-x: hidden;
    }
    .sp-block {
        display: block !important;
    }
    .sp-none {
        display: none !important;
    }
    .news-box .wrapper-animate-img {
        height: 200px;
    }
    .post-content-right {
        margin-left: 0px;
        margin-bottom: 20px;
        max-width: 100%;
    }
    .menu-top {
        margin-top: 0;
        margin-bottom: 0;
    }
    .subtitle-phone-num {
        display: block;
        font-size: 16px;
    }
    .promo-main-detail .read-more {
        position: unset;
    }
    .single-main-promo-items {
        position: unset;
    }
    .single-promo-detail {
        text-align: start;
    }
    .single-promo-items {
        border-radius: 0px 10px 10px 0px;
    }
    .single-promo-end-title {
        border-radius: 10px 0px 0px 10px;
        top: 0px;
        right: 12px;
    }
    .title-404 h1 {
        font-size: 35px;
    }
    .content-404 {
        padding: 40px;
    }
    .wingmall-offcanvas-header {
        background: var(--blue);
        color: #fff;
    }
    .wingmall-offcanvas-body {
        background: var(--main);
    }
    .wingmall-offcanvas-body a {
        color: #fff;
        font-size: 19px;
        font-weight: bold;
    }
    .wingmall-offcanvas-body .navbar-nav .nav-link.active,
    .wingmall-offcanvas-body .navbar-nav .show>.nav-link {
        color: var(--blue);
    }
    .btn-sp-search {
        background: var(--blue);
        outline: none;
        border: none;
        color: #fff;
        border-radius: 5px;
        padding: 5px 10px 5px 10px;
    }
    .wingmall-btn-close i {
        font-size: 22px;
        color: #fff;
    }
    .wingmall-btn-close {
        background: transparent;
        outline: none;
        border: none;
    }
    .about-form-box h1 {
        margin-bottom: 15px;
    }
    .about-white-box .about-img {
        position: unset;
        display: none;
    }
    .about-white-box {
        padding: 20px;
        border-radius: 20px;
        margin-bottom: 50px;
    }
    .about-form-box {
        padding: 20px;
        border-radius: 20px;
    }
    .page-title-container {
        border-radius: 0px 0px 50px 50px;
        padding-top: 65px;
    }
    .rider-img {
        position: unset;
        display: none;
    }
    .promotion-wrapper-img {
        height: 200px;
    }
    .news-box {
        height: 370px;
    }
    .form-title h1 {
        font-size: 35px;
    }
    .rider-main-form {
        width: 100%;
        padding: 15px;
    }
    .page-breadcrumbs ul {
        justify-content: center;
    }
    .promotion-box {
        height: auto;
    }
    .promo-main-detail {
        height: auto;
    }
    .page-title {
        padding: 40px 0;
        text-align: center;
    }
    .page-title h1 {
        font-size: 35px
    }
    .single-page-title {
        text-align: center;
        padding: 20px 0px 135px 0px;
    }
    .single-page-title h1 {
        font-size: 35px
    }
    .wingmall-container {
        width: 100%;
        padding: 0 10px;
    }
    #header {
        padding: 0;
        position: fixed;
        z-index: 9;
        width: 100%;
        border-bottom: 2px solid var(--main);
    }
    .service-area .service-area-box {
        width: 100%;
        height: 100%;
        margin-bottom: 20px;
        padding: 0;
    }
    .information .info-box {
        margin-bottom: 30px;
        padding: 0 10px;
    }
    .title-h1 h1 {
        font-size: 35px;
    }
    .title-h1 {
        margin-bottom: 50px;
    }
    .circle-green, .circle-pink, .cross-pink, .pill-blue {
        display: none;
    }
    .service-area, .app, .with-us, .promotion, .news, .corporate {
        padding: 50px 0;
    }
    /* .information {
        padding: 50px 0;
    } */
    .service-area .swiper-pagination {
        position: relative;
        bottom: 0px !important;
    }
    .app-right {
        text-align: center;
        margin-bottom: 40px;
    }
    .app .dl-amount span {
        font-weight: bold;
    }
    .more-post {
        top: 70px;
        font-size: 17px;
    }
    .main-footer {
        padding-left: 15px;
        padding-right: 15px;
    }
    .headerBannerSwiper {
        padding-left: 15px;
        padding-right: 15px;
        margin-top: 100px;
    }
    .service-area .service-area-title {
        box-shadow: none;
        /* height: 120px; */
    }
    .footer-app {
        margin-bottom: 30px;
    }
    .footer-bottom {
        text-align: center;
    }
    .social-media ul {
        justify-content: center;
    }
    .social-media {
        margin: 15px 0;
    }
    .footer-dl-app {
        display: flex;
        justify-content: space-between;
    }
    .more-post-sp {
        color: var(--blue);
        font-size: 20px;
        font-weight: bold;
        border: 1px solid var(--blue);
        padding: 10px 15px 10px 15px;
        border-radius: 20px;
    }
    .information .info-box img {
        height: 200px;
    }
    .form-thank {
        width: 100%;
        text-align: center;
    }
    .js-slideshow, .js-slideshow-reverse {
        padding-bottom: 2vw;
    }
    .slide-partner {
        width: 20vw;
        height: 100px;
    }
    .headerBannerSwiper .autoplay-progress {
        display: none;
    }
    .rider-form {
        padding: 15px;
        border-radius: 20px;
    }
    .rider-form-title {
        text-align: center;
        padding: 25px;
    }
    .rider-need-box p {
        font-size: 20px;
    }
    .rider-need-box {
        margin-bottom: 60px;
    }
    .rider-need-box img {
        width: 60%;
    }
    .rider-form-title h2,
    .rider-need h2,
    .white-box h2 {
        font-size: 30px;
    }
    .img-rider-app {
        text-align: center;
    }
    .section-rider-app h2 {
        margin-top: 30px;
        text-align: center;
    }
    .section-rider-app p {
        text-align: center;
    }
    .rider-app-download {
        text-align: center;
    }
    .merchant-main-form {
        margin: 0;
    }
    .merchant-form {
        padding: 15px;
        border-radius: 20px;
    }
    .merchant-form-title {
        padding: 35px;
        text-align: center;
    }
    .merchant-form-title h2 {
        font-size: 30px;
    }
    .bg-curve-white {
        padding: 20px;
        border-radius: 20px;
    }
}
@media (max-width: 420px) {
    #spin {
        font-size: 16px;
    }
}