/*normal pc*/
@media (max-width: 1600px) {
    body, html {
        font-size: 15px;
    }

    .auto-container-lg {
        position: static;
        max-width: 1240px; /*w=1160*/
        padding-right: 40px;
        padding-left: 40px;
        margin-right: auto;
        margin-left: auto;
    }
}

/*(xl)*/
@media (max-width: 1199.98px) {
    /*------header------*/
    .main-menu > li > a {
        padding: 1.7rem 0.8rem !important;
    }

    .top-share .share-link {
        margin-left: 0.8rem;
    }

    /* ------ component ------ */
    
    /* ------ banner ------ */
    .bannerArea-item .banner-box {
        top: 41%;
        width: 60%;
        left: 13%;
    }

    /*2.about*/
    .about-area .icon-go {
        right: 7%;
        width: 16rem;
    }

    .about-area .area-inner {
        padding-left: 21%;
    }

    /*3.service*/
    .service-area .item-list li img {
        height: 5rem;
    }

    .service-area .item-list li span {
        font-size: var(--size_19);
    }

    /*4.app*/
    .app-area.section_area .area-inner {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .app-area .phone-box .icon_arrow {
        top: 38%;
        left: -16%;
        width: 5rem;
    }
}

/*(lg) pad*/
@media (max-width: 991.98px) {
    /*------all------*/
    .xl-view {
        display: none !important;
    }

    .auto-container, .auto-container-sm, .auto-container-md, .auto-container-lg {
        padding: 0px 25px;
    }

    /* ------ component ------ */
    .img-btn {
        width: 11rem;
    }
    .bannerArea-item .img-btn {
        width: 9rem;
    }

    /*------header------*/
    .main-menu > li > a {
        padding: 1.7rem 0.45rem !important;
        font-size: var(--size_16);
        letter-spacing: 0.07rem;
    }

    .top-share .share-link {
        margin-left: 0.4rem;
    }

    .main-header .navbar-brand {
        width: 6rem;
    }

    /*------footer------*/
    .footer_area .footer-menu {
        padding: 0 2rem;
    }

    /*------banner------*/
    .bannerArea-item .banner-box {
        left: 13%;
        width: 56%;
    }

    /* ------ section ------ */

    /*2.about*/
    .about-area .area-inner {
        padding-left: 25%;
    }

    /*3.service*/
    .service-area .item-list li {
        display: inline-flex;
        flex-direction: column;
        text-align: center;
        -ms-flex: 0 0 33%;
        flex: 0 0 33%;
        max-width: 33%;
        margin-bottom: 3rem;
    }

    .service-area .item-list {
        max-width: 800px;
        margin: 4rem auto -3rem auto;
    }

    /*4.app*/
    .app-area .login-box {
        width: 4rem;
        position: absolute;
        top: 47%;
        right: -3rem;
    }

    .app-area.section_area .area-inner {
        padding-left: 0;
        padding-right: 1.5rem;
        padding-bottom: 0;
        margin-left: 4rem;
        margin-right: 5rem;
    }

    .app-area .pay-box {
        position: absolute;
        right: -5em;
        bottom: 2rem;
        width: 9.5rem;
        display: flex;
    }

    /*5.job*/
    .job-area .img-title {
        width: 30rem;
    }
}

/*(md)*/
@media (max-width: 767.98px) {
    body, html {
        font-size: 14px;
    }

    /*------all------*/
    .lg-view {
        display: none !important;
    }

    .lg-md-view, .md-sm-view {
        display: block !important;
    }

    /* ------ component ------ */
    .img-btn {
        margin: 6rem auto 0 auto;
    }

    .bannerArea-item .img-btn {       
        margin: 2.5rem auto 0 auto;
    }

    /*------header------*/
    .navbar-toggler {
        height: var(--header_height);
        width: var(--header_height);
        margin-left: auto;
        padding: 0.8rem 0.9rem;
        margin-top: 1px;
        margin-right: 0.2rem;
    }

    /*animate*/
    #collapsibleNavbar {
        position: fixed;
        top: var(--header_height);
        left: 0;
        right: 0;
        height: calc(100vh - var(--header_height)) !important;
        transition: all 0.35s;
        transform: translateX(0);
        z-index: 999;
        background: #505050;
    }

        #collapsibleNavbar.collapsing {
            overflow: initial;
            transform: translateX(100%);
        }

        #collapsibleNavbar.show + .navbarMask {
            display: block;
            z-index: 1039;
        }

        #collapsibleNavbar.show .navbarClose {
            display: flex !important;
        }

    /*menu*/
    .main-header .navbar {
        margin: 0 -15px;
    }

    .main-header .navbar-brand {
        box-shadow: none;
        height: var(--header_height);
        width: 60%;
        margin-left: 1.5rem;
    }

        .main-header .navbar-brand img {
            width: auto;
            height: 100%;
        }

    .main-menu.navbar-nav {
        display: block;
    }

    .main-menu > li {
        border-bottom: 1px solid #707070;
        height: auto;
    }

        .main-menu > li > a {
            margin-right: 0;
            margin-left: 2rem;
            padding: 1.2rem 0 !important;
            color: #FFFFFF !important;
        }

    .top-share {
        margin-left: 2rem;
    }

        .top-share .share-link {
            margin: 1rem 1rem 0 0;
            width: var(--size_26);
            height: var(--size_26);
        }

    /*------footer------*/
    .footer_area .footer-inner {
        padding: 40px 15px 0 15px;      
    }

    .footer_area .footer-logo-m {
        height: 2rem;
        margin-bottom: 1rem;
    }

    .footer_area .footer-contact {
        display: flex;
        justify-content: space-around;
        font-size: var(--size_13);
        align-items: flex-end;
    }

    .footer_area .img_phone-number {
        margin-top: 0;       
        width: 40%;
        padding-left: 1rem;
    }

    .footer_area .copyright {      
        padding-top: 25px;
    }

    /*------banner------*/
    .bannerArea-item .banner-box {
        left: 12%;
        width: 62%;
    }

    /* ------ section ------ */
    .section_area .area-arrow {
        top: -1rem;
        left: calc(50% - 1rem);
        width: 2rem;
        height: 2rem;
    }

    .section_area .area-inner {
        padding: 2rem 0;
    }

    .section_area h4 {
        font-size: var(--size_24);
    }

    /*2.about*/
    .about-area {
        background-image: url('../img/m04_background-dot1.svg');
        background-size: 100% auto;
    }

    .about-area .icon-go {
        top: -4rem;
        right: 6%;
        width: 15rem;
    }

    .about-area .area-inner {
        padding: 7rem 0 2rem 0;
        text-align: center;
    }

        .about-area h4 {
            text-align: center;
            font-size: var(--size_36);
        }

        .about-area h4 span {
            display: block;
        }

    /*4.app*/
    .app-area {
        background: #4b1c6a;
        background: linear-gradient(139deg, #502070, #020011);
    }

        .app-area.section_area .area-inner {
            margin: 0 1rem;
            padding-bottom: 7rem;
        }

        .app-area .img-title {
            width: 100%;
            max-width: 500px;
            margin-left: auto;
            margin-right: auto;
        }

        .app-area .qrcode-box {
            flex-direction: column;
            width: 28%;
            max-width: 10rem;
        }

            .app-area .qrcode-box a {
                width: 100%;
                padding: 0 0 1.5rem 0;
            }

        .app-area .phone-box {
            width: 58%;
            top: 16%;
            right: -2.5rem;
            padding: 1rem;
        }

            .app-area .phone-box .icon_arrow {
                top: 33%;
                left: -4rem;
            }

        .app-area .pay-box {
            right: -1rem;
            bottom: 3.5rem;
            width: 10rem;
        }

        .app-area .login-box {
            width: 5rem;
            top: initial;
            right: initial;
            left: 2.3rem;
            bottom: 4.5rem;
        }

        .app-area .search-box {
            position: absolute;
            left: 0;
            bottom: 0;
            width: calc(100% + 3rem);
            margin: 0 -1.5rem -40px -1.5rem;
            z-index: 1;
            padding: 1rem;
            text-align: center;
        }

            .app-area .search-box img {
                max-width: 560px;
            }

            .app-area .search-box:after {
                background: #2bac38;
            }

    /*5.job*/
    .job-area.section_area .area-arrow {
        display: none;
    }

    .job-area .area-inner {
        padding: 7rem 0 5rem 0;
    }

    .job-area:after {
        width: 18rem;
        height: 14rem;
        top: initial;
        left: 0;
        bottom: 2rem;
    }

    .job-area .img-title {
        max-width: 30rem;
        width: 90%;
        margin: 0 auto;
    }

    .job-area {
        background-image: url('../img/m05_background-dot2.svg');
    }

    /*6.customer*/
    .customer-area {
        background-image: url('../img/m12_background_queue.svg');
        background-size: 100% auto;
    }
}

/*(sm) phone*/
@media (max-width: 575.98px) {

    /*------all------*/
    .auto-container, .auto-container-sm, .auto-container-md, .auto-container-lg {
        padding: 0px 15px;
    }

    .lg-view, .lg-md-view {
        display: none !important;
    }

    .md-sm-view, .sm-view {
        display: block !important;
    }

    /* ------ component ------ */

    /*------banner------*/
    .bannerArea-item .image-box { /*2140 x 2470*/
        padding-bottom: 115.42%;
    }

        .bannerArea-item .image-box .banner-image {
            width: auto;
            height: 100%;
        }

    .bannerArea-item .banner-box {
        top: 27%;
        left: 14%;
        width: 72%;
        margin: 0 auto;
        text-align: center;
    }

        .bannerArea-item .banner-box img {
            max-width: 350px;
            margin: 0 auto;
        }

    .banner-carousel .dots-outter {
        bottom: 3rem;
    }

    /* ------ section ------ */
    .section_area {
        padding: 20px 0;
    }

    /*2.about*/
    .about-area .icon-go {
        top: -2.5em;
        right: 1rem;
        width: 14rem;
    }

    .about-area .area-arrow {
        display: none;
    }

    .about-area .area-inner {
        line-height: 1.5rem;
        letter-spacing: 0.08rem;
        font-size: var(--size_15);
    }

    .about-area .img_statement {
        width: 18rem;
        margin-top: 1rem;
    }

    /*3.service*/
    .service-area .item-list li {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
        margin-bottom: 3rem;
    }

    .service-area h4 {
        width: 15rem;
    }

    .service-area .item-list {
        margin: 3rem auto -3rem auto;
    }

    /*4.app*/
    .app-area.section_area .area-inner {
        margin: 0 0.5rem;
    }

    .app-area .phone-box .icon_arrow {
        top: 33%;
        left: -3%;
        width: 3rem;
    }

    .app-area .phone-box {
        width: 75%;
        max-width: 22rem;
    }

    .app-area .pay-box {
        bottom: 2.5rem;
        width: 8.5rem;
    }

        .app-area .pay-box img {
            padding-left: 0.4rem;
        }

    .app-area .qrcode-box a {
        padding: 0 0 1rem 0;
    }

    .app-area .login-box {
        width: 4.5rem;
        left: 1rem;
        bottom: 3.5rem;
    }

    /*5.job*/
    .job-area .area-inner {
        padding: 7rem 0 4rem 0;
    }

    /*6.customer*/
    .customer-area .area-inner {
        padding: 1rem 0 7rem 0;
    }
}

/*-----*/

@media (min-width: 768px) {
}

@media (min-width: 992px) {
}

@media (min-width: 1200px) {
}