@media screen and (min-width: 320px) {
    /* Menu */
    .localnav-wrap { height: 70px;line-height: 70px;text-align: center;}

    .nav {background: #fafafa;z-index: 99; overflow: inherit;padding: 0 40px; position: sticky; top: 0;
        font-family: 'Kanit', Helvetica, Arial, sans-serif;font-weight: 600;
    }
    .navmenu {font-size: 0; width: 100%; max-width: 1140px; margin: 0 auto;overflow-x: scroll; overflow-y: hidden; -webkit-overflow-scrolling: touch;
        white-space: nowrap;position: relative;
        /* display: flex; flex-wrap: nowrap; */
    }
    .navmenu a {text-decoration: none;}
    .navmenu ul { text-align: left;list-style-type: none;padding: 0;}
    .navmenu ul li {display: inline-block;cursor: pointer;position: relative;}
    .navmenu li:first-child {margin-left: 2px;}
    .navmenu li:last-child {margin-right: 2px;}
    .navmenu a { font-size: 16px;line-height: 1;color: #333; display: inline-block; vertical-align: top; padding: 0 30px; height: 80px; line-height: 80px;}
    .navmenu li:after {content: '';width: 1px;height: 20px;background-color: #AEAEAE;position: absolute;top: 0;bottom: 0;margin: auto;}
    .navmenu li:last-child:after { display: none;}
    .navmenu a:focus {color: rgba(0, 0, 0, .3);/*border: 2px solid transparent;*/}
    .navmenu .section-detail .active {color: #fff;/* border: 2px solid #fff; */ }
    .nav .previous,
    .nav .next { width: 40px;height: 100%;background: #fafafa;text-align: center;line-height: 80px;position: absolute; top: 0;z-index: 900;}
    .nav .previous {left: 0;}
    .nav .next {right: 0;}
    .nav .previous:after,
    .nav .next:after {content: ''; border-top: 3px solid #777; border-left: 3px solid #777; display: inline-block; width: 10px; height: 10px;
        visibility: visible;margin: 0;position: absolute;top: 32px;
    }
    .nav .next:after {transform: rotate(-225deg);right: 16px;top: 33px;}
    .nav .previous:after {transform: rotate(-45deg);left: 16px; }
    .nav .previous:hover:after,
    .nav .next:hover:after {border-top: 3px solid #777;border-left: 3px solid #777;}
    .nav .image {width: 201px;}
    .barfixed #nav,
    .barfixed #localnav-fixed {position: fixed !important;width: 100%;}
    .image-menu {display: none;}
    .localnav { /*background-color: transparent;*/ position: sticky; top: 80px;
        background-color: #f2f2f2;border-image-slice: 1; border-width: 4px;
        border-image-source: linear-gradient(to right, #92CB70, #098D45, #FCEE23, #6E67AE, #EB0D8C);
    }
    .localnav a {width: 100%;max-width: 300px; margin: 0 auto;}
    .nav.nav-menu .action {position: absolute; right: 50%; top: 0; bottom: 0; margin: auto; margin-right: -586px;}
    .navmenu a {font-size: 16px;}
    .navmenu a:hover,
    .navmenu li:hover {color: #fff;/* border: 2px solid #fff; */}
    .navmenu .section-detail:hover,
    .navmenu .section-detail.active {background: rgb(146, 203, 112);background: linear-gradient(115deg, #6AB3CF 0%, #DD6D9C 100%);color: #fff;}
    .navmenu .sc-highlight:hover,
    .navmenu .sc-highlight.active { background: rgb(146, 203, 112);background: linear-gradient(115deg, #DD6D9C 0%, #66659E 100%);color: #fff;}
    .navmenu .detailsapply:hover,
    .navmenu .detailsapply.active {background: rgb(179, 219, 155); background: linear-gradient(115deg, #66659E 0%, #31B791 100%);color: #fff;}
    .navmenu .how-to-apply:hover,
    .navmenu .how-to-apply.active {background: rgb(146, 203, 112);background: linear-gradient(115deg, #31B791 0%, #6AB3CF 100%);color: #fff;}
    .navmenu .faq:hover,
    .navmenu .faq.active {background: rgb(146, 203, 112);background: linear-gradient(115deg, #2BACE2 0%, #92CB70 100%);color: #fff;}
    .navmenu li a:after {top: 31px;}
}

@media screen and (min-width: 767px) {
    .localnav { background-color: #f2f2f2;}
    .localnav a { width: auto;}
}

@media screen and (min-width: 1025px) {
    .nav { padding: 0; }
    .navm {display: none;}
    .navmenu {height: 80px;overflow-x: hidden;}
    .navmenu ul li a {margin: 0;}
    .navmenu li:after {right: 0px;}
    /* .navmenu li:first-child a {margin-left: 0;} */
    /* .navmenu li:last-child a {margin-right: 0;} */
    .nav .previous:after { top: 34px;}
    .nav .next:after {top: 35px;}
    .localnav-wrap {height: 80px;line-height: 80px;}
    .image-menu {display: block;position: absolute; right: 0; bottom: 0; z-index: 1;width: 100%;max-width: 201px;}

    .localnav{position: sticky; top: 80px;}
}


@media screen and (max-width: 1024px) {
    .nav.nav-menu .action { margin-right: -476px;}
}

@media screen and (max-width: 991px) {
    .nav.nav-menu .action {display: none;}
    .navmenu a li:after { right: -30px;}
}

@media screen and (max-width: 767px) {
    .navmenu a {height: 50px; line-height: 50px;}
    .nav .previous:after,
    .nav .next:after {top: 21px;}

    .nav{top: -0.5px;}
    .localnav{top: auto; bottom: 0; left: 0; right: 0; position: fixed; border-bottom-width: 0px; border-top: 4px solid transparent;}
    .slogan{margin-bottom: 74px;}
}