@media (min-width: 768px) {
    #back-to-top {
        width: 50px;
        height: 50px;
        z-index: 554;
        bottom: 5rem;
        right: 2rem;
        left: auto;
        border-radius: 50%;
        padding-top: .45rem;
        font-size: 2rem;
        transform: translate(-50%,0);
    }

    .hvr-underline-from-left:before {
        bottom: -1.5rem;
    }

    .menubar-top ul li a.hvr-underline-from-left:before {
        bottom: -0.5rem !important;
    }

    .search-box input:focus,
    .search-box input:valid {
        width: 200px;
    }

    .menubar-top {
        display: flex !important;
        justify-content: flex-end;
    }

        .menubar-top ul {
            width: 80%;
            list-style: none;
            display: flex;
            align-items: center;
            text-align: right;
        }

    .btn-language {
        right: 0;
        top: 0rem;
        position: inherit;
        z-index: 999;
        border-left: none;
        padding-left: 0rem;
    }

        .btn-language .dropdown-menu {
            z-index: 99;
            padding: 0;
        }

    .search-box {
        position: relative;
        top: auto;
        right: auto;
        font-size: 30px;
        margin-top: -.8rem;
        z-index: 990;
    }

    .menubar-top ul li {
        width: auto;
        margin: auto;
        font-size: 20px;
        position: relative;
    }

        .menubar-top ul li .line-right {
            position: absolute;
            left: -14px;
            top: -2px;
            border-right: 1px solid #acacac;
            z-index: 99;
            width: 1px;
            height: 25px;
        }

            .menubar-top ul li .line-right.line-right2 {
                top: 1px;
            }

        .menubar-top ul li a:hover {
            color: #00ab4e;
        }

    .btn-language a {
        font-size: 24px;
    }

        .btn-language a:hover {
            color: #00ab4e;
            background: #ebebeb;
        }

    .navbar-collapse ul li a {
        color: #000;
    }

    .navbar-collapse ul li {
        padding: 0 0;
        width: auto;
        margin: auto;
        font-size: 20px;
    }

    .navbar-expand-md .navbar-nav .nav-link {
        padding-right: 0;
        padding-left: 0;
    }

    .navbar-expand-md .navbar-nav {
        width: 100%;
    }

    .navbar-brand {
        text-align: left;
        width: 100%;
    }

        .navbar-brand img {
            width: auto;
        }

    .set-box span {
        font-size: 28px;
    }

    .set-box p {
        font-size: 22px;
    }

    .priceoli-box {
        padding: 8% 0;
    }

        .priceoli-box h1 {
            font-size: 55px;
            line-height: .8rem;
        }

        .priceoli-box p {
            font-size: 24px;
            margin: 0;
        }

        .priceoli-box .icon-oli h1 {
            line-height: normal;
        }

    .icon-oli {
        margin-bottom: 1rem;
    }

    .content-box2, .content-box3, .content-box4 {
        padding: 4% 0;
    }

    .product-service h1 {
        font-size: 22px;
    }

    .content-box3 .row.no-gutters {
        margin: 0 -15px;
        padding: 0;
    }

    .content-box3 .no-gutters .col-md-4 {
        padding: 0 15px;
    }

    .detail-chance h1 {
        font-size: 24px;
    }

    .title-box {
        font-size: 40px;
    }

    .content-box5 {
        padding: 0;
    }

    .search-map {
        padding: 15px;
        width: 85%;
        margin: 0 auto;
        border-radius: 20px;
    }

    .title-box p {
        font-size: 24px;
        padding: 0 10%;
    }

    .detail-joinus h1 {
        font-size: 30px;
        line-height: 1;
    }

    .detail-joinus {
        font-size: 20px;
        bottom: .7rem;
        left: 49%;
    }

    .footer {
        padding: 5% 0;
    }

    .logo-footer {
        text-align: left;
    }

    .condition-copyright {
        text-align: right;
    }

    .tabs-footer h1 {
        margin-bottom: .3rem;
        font-size: 24px;
        font-weight: 700;
    }

    .tabs-footer ul li {
        padding: 2px 0;
    }

    .social-footer, .call-center {
        padding: 0;
        margin-top: 1rem;
    }

    .copyright-box {
        padding: 2% 0;
    }

    .menu-footer {
        list-style: none;
        width: 100%;
        display: flex;
        margin-top: 1rem;
        align-items: center;
    }

        .menu-footer li {
            width: auto;
            margin: auto;
            text-align: left;
        }

    .tabs-footer a:hover {
        color: #48bb53;
    }

    .search-box input {
        width: 23px;
        height: 23px;
    }

    .search-box:after {
        width: 1px;
        height: 10px;
        top: 27px;
    }

    .priceoli-box .icon-oli img {
        width: auto;
    }


    /********************************************/
    .all-pd .box-img-pd {
        height: 150px;
        display: flex;
        align-items: center;
    }

        .all-pd .box-img-pd img {
            margin: auto 0;
        }

    /********************************************/


    /* other-page*/
    html {
        font-size: 16px;
    }

    .other-page {
        padding: 2% 0;
    }

    .title-table {
        text-align: left;
    }

    .img-otherpage {
        text-align: left;
        margin: 2rem auto 2rem;
    }

    .menu-card ul li {
        padding: 0 14px;
        margin: 0;
    }

    .title-table.title-table-fleet {
        margin-top: 2rem;
    }

    .title-table table tr td .social-other img {
        width: auto;
    }

    .title-table table tr td img {
        width: 1.5rem;
    }




    /*search-map#6*/
    .pagesearch-map {
        text-align: left;
    }

    .show-detailsearch {
        font-size: 1.2rem;
        padding: 0;
    }

        .show-detailsearch .text-box2 {
            margin-top: 1.5rem;
        }

        .show-detailsearch .row {
            margin-bottom: 1rem;
        }

    .form-search {
        width: 50%;
    }

    .map {
        height: 100%;
    }

    .mapsearch-box {
        margin-bottom: 2.5rem;
    }


    /*otherpage#5*/
    .show-detailsearch-cream .form-search {
        width: 65%;
    }

    .map-cream .map {
        min-height: 350px;
    }

    .img-cream:hover img {
        transform: scale(1.05);
    }

    /*coffeworld#1*/
    .title-otherpage img, .title-otherpage span {
        display: inline-block;
    }

    .title-menufood, .logo-menufood {
        text-align: left;
    }

        .logo-menufood img {
            width: auto !important;
        }

    .menu-coffeworld .dropdown-menu {
        width: auto;
    }

    .img-oil img {
        width: 100%;
    }

    .title-table table tr td .img-oil img {
        width: 100%;
    }

    .franchise-oil h1 {
        transition: all 0.4s;
        background: url("../images/arrow-busi4.png") right 10px center no-repeat;
    }

    .franchise-oil:hover h1 {
        color: #00ab4e;
        background-position: right 0 center;
        background-image: url("../images/arrow-busi1-hover.png");
    }

    .menu-coffeworld .btn {
        float: right;
    }

    /*25-05-2020*/
    .slide-service #carousel a {
        height: 350px !important;
    }

    .line-timeline {
        left: 2.2rem;
    }

    .detail-box-input.detail-box-input2 {
        background-size: auto;
        background-position: right 12px top 12px;
    }

    .menu-card .hvr-underline-from-left:before {
        background: #00ab4e;
    }

    .menu-service ul li a.active.hvr-underline-from-left:before, .menu-service ul il a.hvr-underline-from-left:focus:before, .menu-service ul li a.hvr-underline-from-left:hover:before {
        right: 0;
        bottom: -2.2rem;
    }

    .menu-service {
        border-bottom: 1px solid #cccccc;
    }

        .menu-service ul {
            display: flex !important;
        }

    .guidepartners-box {
        padding: 4% 0 0;
    }
    /*END-25-05-2020*/

    .img-csr.view-vdo iframe {
        height: 350px;
    }

    /*livechat*/
    .livechat-btn {
        width: 245px;
        height: 35px;
        right: 3rem;
    }

        .livechat-btn img {
            width: auto;
        }

        .livechat-btn p.text-top {
            left: 1.5rem;
            top: 1.6rem;
        }

        .livechat-btn p.text-bottom {
            position: absolute;
            right: 1.5rem;
            bottom: 1.6rem;
        }

        .livechat-btn img.chatimg {
            right: .5rem;
            top: 1.5rem;
        }

    .livechat-box {
        width: 300px;
        height: 390px;
        right: 1rem;
    }

    /*aboutus*/
    .epot-box {
        display: flex;
        text-align: left;
        width: 100%;
    }

        .epot-box .img-box {
            width: 60%;
        }

        .epot-box .detail-epotbox {
            width: 60%;
            padding-left: 30px;
            margin: 0 auto;
        }

    .detail-epotbox .goto-map {
        margin: 1rem 0;
    }

    .logis-icon img {
        width: 100%;
    }

    .vdo-transport {
        width: 80%;
        margin: auto;
    }

    .map.map-stationservice {
        height: 450px;
    }

    .show-detailsearch.station-detailsearch {
        height: 450px;
    }

    .station-detailsearc .img-map img {
        width: 100%;
    }

    .list-ethicsperson img.icon-gas {
        width: auto;
    }

    .list-ethicsperson img.icon-gas2 {
        width: auto;
    }




    /*sustainable*/
    .timeline-box img {
        width: auto;
    }

    .timeline-box .linecolor-timeline {
        left: 19%;
    }

    .detail-table img {
        width: auto;
    }

    /*edit 09-07-2020*/
    /*edit 09-07-2020-end*/
    .form-searcharea {
        margin-top: 0;
        margin-bottom: 1rem
    }



    .viewmore-maxnitron {
        right: 5%;
        bottom: 5%;
    }

    .line-social-btn, .facebook-social-btn, .youtube-social-btn {
        text-align: left;
    }

    .menu-card.menu-card-oil ul li {
        padding: 0 3px;
    }



    /*27-07-2020*/
    .vdo-box {
        height: 380px;
    }

    .career-fullbox .download-setbox .card-header.boxreadmore h1 .fa-chevron-down {
        right: 42%;
    }

    .career-fullbox .download-setbox .card-header.boxreadmore h1 .fa-chevron-up {
        right: 45%;
    }
    /*27-07-2020-end*/


    /*05/08/2020*/
    #showpopup .modal-dialog {
        margin: auto;
        height: 100vh;
    }

    #showpopup .modal-content {
        height: 440px;
        transform: translate(0,50%);
    }
}
/*///////////////////////////////////////////////////////////////////////////////////*/
@media (min-width: 992px) {
    .hvr-underline-from-left:before {
        bottom: -1rem;
    }

    .menubar-top ul li a.hvr-underline-from-left:before {
        bottom: -.4rem;
    }

    .menubar-top ul {
        width: 70%;
    }

        .menubar-top ul li .line-right {
            top: 1px;
        }

    .search-box {
        font-size: 32px;
        margin-top: -.4rem;
    }

    .menubar-top ul li, .navbar-collapse ul li {
        font-size: 24px;
        font-family: 'PSL-Kanda-Bold';
    }

    .menubar-top {
        margin-bottom: .5rem;
    }

    .set-box span {
        font-size: 33px;
    }

    .priceoli-box h1 {
        font-size: 55px;
    }

    .priceoli-box .icon-oli h1 {
        font-size: 40px;
    }

    .set-box p {
        font-size: 26px;
    }

    .priceoli-box p {
        font-size: 26px;
        padding: 0 15%;
    }

    .priceoli-box {
        padding: 7% 0;
    }

    .product-service h1 {
        font-size: 26px;
    }

    .detail-chance h1 {
        font-size: 26px;
    }

    .news-detail, .news-detail h1 {
        font-size: 26px;
    }

    .title-box p {
        font-size: 26px;
        padding: 0 7%;
    }

    .search-map {
        font-size: 26px;
    }

    .detail-joinus h1 {
        font-size: 40px;
    }

    .detail-joinus {
        font-size: 26px;
        bottom: 1.3rem;
        left: 50%;
    }

    .social-footer, .call-center {
        padding: 0;
        margin-top: 0;
    }

    .call-center {
        margin-top: 1.3rem;
        font-size: 26px;
    }

    .tabs-footer ul li {
        font-size: 22px;
    }

    .condition-copyright {
        font-size: 24px;
    }

    /*****************DEV A***************************/

    /*search-map#6*/
    .form-search {
        width: 60%;
    }

    .show-detailsearch {
        margin-top: 0;
        height: 300px;
    }

        .show-detailsearch.station-detailsearch {
            height: 500px;
        }

    .title-table table tr td img {
        width: auto;
    }


    /*otherpage#5*/
    .show-detailsearch-cream .form-search {
        width: 45%;
    }
    /*edit change 07-07-2020*/
    .title-table-cream img {
        width: 5rem;
    }

    /*coffeworld#1*/
    .maxmart-service-box img {
        width: auto;
    }

    .img-maxcard1 {
        width: 18%;
    }

    /*02-06-2020*/
    .img-area iframe {
        height: 280px;
    }

    /*END-02-06-2020*/
    /*livechat*/
    .livechat-btn p.text-top {
        left: 1.2rem;
    }

    .livechat-btn p.text-bottom {
        right: 1.2rem;
    }

    .livechat-btn img.chatimg {
        right: .8rem;
    }



    /*aboutus*/
    .detail-epotbox .goto-map {
        width: 20%;
    }

    .vdo-transport iframe {
        height: 350px;
    }

    .detail-maping {
        margin: -1.5rem auto 0;
        padding-top: 2rem;
    }

    .carbox-transport .img-box img {
        width: 100%;
    }

    .carbox-transport.carbox-transport3 .img-box img {
        width: auto;
    }


    /*sustainable*/
    .timeline-box .linecolor-timeline {
        left: 17.5%;
    }

    .busi-icon img {
        width: auto;
    }


    /*เพิ่ม css 09-07-2020*/
    #slideshow .item iframe, #slideshow .item video {
        height: 400px;
    }

    #thumbs .item video, #thumbs .item img {
        height: 145px;
    }
    /*เพิ่ม css 09-07-2020-end*/

    .viewmore-maxnitron {
        right: 10%;
    }


    .line-social-btn, .facebook-social-btn, .youtube-social-btn {
        display: flex;
        align-items: center;
    }

        .line-social-btn p, .facebook-social-btn p, .youtube-social-btn p {
            margin: 0 !important;
        }

        .line-social-btn img, .facebook-social-btn img, .youtube-social-btn img {
            margin: 0 7px 0 0 !important;
        }

    .checkmark {
        top: 9px;
    }



    /*27-07-2020*/
    .vdo-box {
        height: 480px;
    }

    .detail-salestore.detail-career p {
        width: 22%;
    }
    /*27-07-2020-end*/
    .menu-card.menu-card-oil ul li {
        padding: 0 15px;
    }
}
/*///////////////////////////////////////////////////////////////////////////////////*/
@media (min-width: 1200px) {

    html {
        font-size: 18px;
    }

    .container {
        max-width: 1230px;
    }

    .menubar-top ul li, .navbar-collapse ul li {
        font-size: 28px;
        font-family: 'PSL-Kanda-Bold';
    }

        .menubar-top ul li.border-right {
            padding-right: 3rem;
        }

    .search-box {
        margin-top: -.5rem;
        margin-left: -.6rem;
    }

    .menubar-top ul {
        width: 75%;
    }

        .menubar-top ul li .line-right {
            left: -32px;
        }

            .menubar-top ul li .line-right.line-right2 {
                left: -25px;
                top: 3px;
            }

    .btn-language .btn {
        font-size: 28px;
    }

    .set-box {
        padding-bottom: 13%;
        font-size: 50px;
        line-height: normal;
        background-size: 100% !important;
    }

        .set-box p {
            font-size: 30px;
        }

        .set-box span {
            font-size: 50px;
        }

    .priceoli-box h1 {
        line-height: normal;
    }

    .priceoli-box p {
        font-size: 30px;
        padding: 0 3%;
    }

    .priceoli-box {
        padding: 5% 0;
    }

        .priceoli-box .icon-oli h1 {
            font-size: 55px;
        }

    .title-box {
        font-size: 55px;
    }

    .product-service h1 {
        font-size: 28px;
    }

    .detail-chance h1 {
        font-size: 30px;
        padding: 20px 10px;
    }

    .detail-chance {
        width: 55%;
    }

    .news-detail {
        font-size: 28px;
    }

        .news-detail h1 {
            font-size: 28px;
        }

    .title-box p {
        font-size: 28px;
    }

    .search-map {
        font-size: 28px;
        padding: 20px;
        width: 60%;
    }

    .call-center h1 {
        line-height: .6;
        font-size: 110px;
    }

    .call-center {
        margin-top: 1rem;
        font-size: 30px;
    }

    .social-footer h1, .tabs-footer h1 {
        font-size: 28px;
    }

    .tabs-footer ul li {
        font-size: 25px;
    }

    .tabs-footer ul {
        margin-bottom: 1rem;
    }

    .detail-joinus h1 {
        font-size: 63px;
    }

    .detail-joinus {
        font-size: 33px;
        bottom: 2.4rem;
    }

    .btn-language .dropdown-menu {
        width: 5rem;
        text-align: center;
    }

    .btn-language a {
        font-size: 28px;
        padding: 10px 8px;
    }

    .search-box:after {
        height: 11px;
        top: 26px;
        right: -2px;
    }

    /*********************DEV***********************************/

    html {
        font-size: 18px;
    }

    .title-otherpage {
        margin: 3rem auto 3rem;
    }


    .form-search {
        width: 69%;
    }

    .show-detailsearch {
        height: 450px;
        /*padding-top: 1rem;/*edit change 07-07-2020*/
    }

    .station-detailsearch .img-map img {
        width: auto;
    }
    /*otherpage#5*/
    .title-table-cream img {
        width: 5rem;
    }

    .social-other img {
        width: auto;
    }

    .img-cream img {
        width: auto;
    }

    .maxcrad-table img {
        width: auto;
    }


    .img-otherpage img {
        width: auto;
    }
    /*25-05-2020*/
    .line-timeline {
        left: 1.8rem;
    }
    /*END-25-05-2020*/



    /* csr-page*/
    .img-csr img {
        width: auto;
    }

    .detailarea h1 {
        margin-bottom: 1rem;
    }

    .areabox {
        margin-bottom: 2rem;
    }

    .img-csr.view-vdo iframe {
        height: 480px;
    }

    /*livechat*/
    .livechat-box {
        height: 420px;
    }

    .livechat-btn p.text-top {
        left: 1.2rem;
        top: 1.2rem;
    }

    .livechat-btn p.text-bottom {
        bottom: 1.4rem;
    }

    .livechat-btn img.chatimg {
        right: .5rem;
        top: 1.2rem;
    }

    .franchise-oil {
        width: 95%;
    }

    /*aboutus*/
    .detail-maping {
        position: relative;
        margin-top: -1rem;
    }

    .detail-salestore img {
        width: auto;
    }

    .vdo-transport iframe {
        height: 450px;
    }

    .map.map-stationservice {
        height: 500px;
    }

    .bord-person img {
        width: auto;
    }


    /*sustainable*/
    .timeline-box .linecolor-timeline {
        left: 16.5%;
    }

    .sub-policies .accordion .img-box img {
        width: auto;
    }

    .img-box.img-boxsub img {
        width: auto;
    }



    /*เพิ่ม css 07-07-2020*/
    .show-detailsearch-cream .form-search {
        width: 55%;
    }

    .modal-dialog {
        max-width: 768px;
        margin: 1.75rem auto;
    }

    .pagination a {
        padding: 8px 15px;
    }
    /*เพิ่ม css 07-07-2020-end*/

    /*เพิ่ม css 09-07-2020*/
    .owl-nav .owl-prev .fa-chevron-left {
        font-size: 24px;
        left: -20px;
    }

    .owl-nav .owl-next .fa-chevron-right {
        font-size: 24px;
        right: -20px;
    }
    /*เพิ่ม css 09-07-2020-end*/



    .viewmore-maxnitron {
        padding: 10px 15px;
    }

    .viewmore-maxnitron {
        right: 11%;
        bottom: 4%;
    }






    /*27-07-2020*/
    .careerus-box h1 {
        -webkit-line-clamp: 1;
        height: calc(1.8rem * 1.2 * 1);
    }

    .careerus-box .col-xl-9 {
        padding-left: 0;
    }

    .careerus-box {
        padding: 20px;
    }

    #showpopup button.close {
        padding: 10px;
    }

    .select-list .btn-secondary {
        background-position: right 15px center;
    }

    .career-fullbox .download-setbox .card-header.boxreadmore h1 .fa-chevron-down {
        right: 45%;
    }

    .career-fullbox .download-setbox .card-header.boxreadmore h1 .fa-chevron-up {
        right: 46%;
    }
    /*27-07-2020-end*/

    /*05-08-2020*/
    #showpopup .modal-dialog {
        width: 500px;
    }

    #showpopup .modal-content {
        height: 480px;
    }
}
/*///////////////////////////////////////////////////////////////////////////////////*/
@media (min-width: 1440px) {
    .container {
        max-width: 1480px;
    }

    .menubar-top ul {
        width: 58%;
    }

    .icon-oli {
        margin-bottom: 2rem;
    }

    .set-box {
        padding-bottom: 14.3%;
    }

    .detail-joinus {
        bottom: 3.4rem;
    }


    /*********************DEV* A**********************************/
    /*search-map#6*/
    .form-search {
        width: 69%;
    }

    .show-detailsearch {
        font-size: 22px;
    }



        /*aboutus*/
        .show-detailsearch.station-detailsearch {
            height: 500px;
        }

    .vdo-transport iframe {
        height: 520px;
    }

    .vdo-transport {
        width: 70%;
        margin: auto;
    }

    .carbox-transport .img-box img {
        width: auto;
    }

    /*sustainable*/
    .timeline-box .linecolor-timeline {
        left: 15.8%;
    }

    .detail-table img {
        width: auto;
    }

    .table-boxsub {
        overflow-x: inherit;
    }


    /*เพิ่ม css 09-07-2020*/
    #slideshow .item iframe, #slideshow .item video {
        height: 640px;
    }

    #thumbs .item video, #thumbs .item img {
        height: 225px;
    }
    /*เพิ่ม css 09-07-2020-end*/

    .viewmore-maxnitron {
        right: 14%;
        bottom: 8%;
    }

    /*27-07-2020*/
    .vdo-box {
        height: 600px;
    }
    /*27-07-2020-end*/
}
/*///////////////////////////////////////////////////////////////////////////////////*/
@media (min-width: 1920px) {
    /*25-05-2020*/
    /*END-25-05-2020*/
}