@media only screen and (min-width: 320px) {
    /* ------------------------ */
    /* -------- Global -------- */
    /* ------------------------ */
    .icon.share {
        width: 20px;
        height: 20px;
    }

    .icon.group {
        width: 16px;
        height: 16px;
        margin-right: 12px;
    }

    /* ------------------------ */
    /* ------ Breadcrumb ------ */
    /* ------------------------ */
    .main-breadcrumb {
        column-gap: 8px;
        padding: 12px 0;
    }
    .main-breadcrumb li {
        font-size: 10px;
        line-height: 14px;
        letter-spacing: 1px;
    }
    .main-breadcrumb li a {
        font-size: 10px;
        line-height: 14px;
        letter-spacing: 1px;
    }
    .main-breadcrumb li.first {
        display: flex;
    }
    .main-breadcrumb li.bc-mobile,
    .main-breadcrumb li.hide-mobile {
        display: none;
    }
    /* .main-breadcrumb li.first-parent::before {
        content: unset;
    } */
     .main-breadcrumb li.first-parent:first-child:before {
        content: unset;
    }

    /* ------------------------ */
    /* -------- Header -------- */
    /* ------------------------ */
    .main-header__desktop {
        display: none;
    }

    .wrp-mobile__header {
        position: relative;
        z-index: 9;
    }
    .main-header__mobile {
        position: relative;
        position: relative;
        z-index: 20;
        display: block;
        padding: 8px 0;
        border-bottom: 1px solid var(--Secondary-50);
        background: var(--White);
        /* overflow-y: hidden; */
    }
    

    .main-header__row {
        padding: 0;
    }

    .main-header-m__col1 {
        grid-column: 1/2;
        display: grid;
        justify-content: start;
        align-items: center;
    }
    .main-header-m__col2 {
        grid-column: 2/4;
        display: grid;
        justify-content: center;
        align-items: center;
    }
    .main-header-m__col3 {
        grid-column: 4/-1;
        display: grid;
        justify-content: end;
        align-items: center;
    }

    .menu-btn,
    .menu-btn-slide {
        width: 20px;
        height: 20px;
        cursor: pointer;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .menu-btn span,
    .menu-btn span::before,
    .menu-btn span::after,
    .menu-btn-slide span,
    .menu-btn-slide span::before,
    .menu-btn-slide span::after {
        background: var(--Neutral-700);
        border-radius: 3px;
        content: "";
        position: absolute;
        width: 16px;
        height: 1px;

        -webkit-transition: 0.3s ease-in-out;
        -moz-transition: 0.3s ease-in-out;
        -o-transition: 0.3s ease-in-out;
        transition: 0.3s ease-in-out;
    }
    .menu-btn span::before,
    .menu-btn-slide span::before {
        margin-top: -5px;
    }
    .menu-btn span::after,
    .menu-btn-slide span::after {
        margin-top: 5px;
    }
    .menu-btn.active span,
    .menu-btn-slide.active span {
        background: transparent;
    }
    .menu-btn.active span::before,
    .menu-btn-slide.active span::before {
        margin-top: 0;

        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    .menu-btn.active span::after,
    .menu-btn-slide.active span::after {
        margin-top: 0;

        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }

    .wrp-mobile__nav {
        position: absolute;
        top: 0;
        right: 100%;
        z-index: 10;
        width: 100%;
        height: 100vh;
        transition: all 0.45s ease-in-out;
        background-color: var(--White);
    }
    .wrp-mobile__nav.visible {
        right: 0;
    }

    .full-logo {
        height: 40px;
    }

    .header-slide {
        width: 100%;
        padding: 8px 0;
        border-bottom: 1px solid var(--Secondary-50);
    }

    .nav-mobile,
    .nav-contact__mobile {
        grid-column: 1/-1;
    }

    .nav-slide {
        width: 100%;
        height: 100%;
        padding-bottom: 36px;
    }
    .nav-slide .container-main {
        height: 100%;
    }
    .nav-slide .main-header__row {
        height: 100%;
    }
    .row-mobile {
        grid-column: 1/-1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
    }


    .row-mobile__wrp,
    .group-row {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-column-gap: 12px;
    }

    .mobile-nav__col1 {
        grid-column: 1/3;
        display: grid;
        justify-content: start;
        align-items: center;
    }
    .mobile-nav__col1 a {
        height: 70px;
    }
    .mobile-nav__col2 {
        grid-column: 3/-1;
        display: grid;
        justify-content: end;
        align-items: center;
        position: relative;
        height: 77px;
    }
    .mobile-nav__col2 a {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 1;
    }
    .mobile-nav__col2 iframe {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 0;
    }

    ul.mobile-menu {
        list-style: none;
        padding: 20px 0;
        margin: 0;
        display: flex;
        flex-direction: column;
    }

    ul.mobile-menu li {
        padding: 12px 0;
        border-bottom: 1px solid var(--Secondary-50);
    }
    ul.mobile-menu li:first-child {
        padding-top: 0;
    }

    ul.mobile-menu li a {
        font-family: var(--nav-tagline-font-family);
        text-decoration: none;
        color: var(--Neutral-800);
        font-size: 14px;
        font-weight: 300;
        text-transform: uppercase;
    }

    .nav-contact,
    .nav-contact:visited {
        font-size: 14px;
        font-style: normal;
        font-weight: 300;
        line-height: 16px;
        letter-spacing: 1.4px;
        width: 100%;
        padding: 10px 12px;
        margin-left: 0;
        text-transform: uppercase;
    }

    /* ------------------------ */
    /* -------- Search -------- */
    /* ------------------------ */

    .wrp-search .header-slide {
        display: block;
    }
    .form-group.w90 {
        width: 100%;
        display: flex;
        flex-direction: column;
        row-gap: 8px;
    }

    .body-search {
        padding: 32px 0 20px 0;
    }
    .search-close {
        display: none;
        margin-bottom: 0;
    }
    .search-box {
        grid-column: 1 / -1;
    }

    /* ------------------------ */
    /* --------- Body --------- */
    /* ------------------------ */
    /* .body-page {
        padding-top: 57px;
    } */

    /* ------------------------ */
    /* -------- Footer -------- */
    /* ------------------------ */
    .wrp-footer__countries ul {
        display: flex;
        padding: 8px 16px;
        justify-content: center;
        align-items: center;
        align-content: center;
        gap: 8px 20px;
        flex-wrap: wrap;
    }

    .wrp-newsletter {
        width: 100%;
        padding: 40px 0;
    }
    .newsletter-info {
        grid-column: 1/-1;

        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        flex: 1 0 0;
        margin-bottom: 24px;
    }

    .newsletter-form {
        grid-column: 1/-1;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 24px;
        flex: 1 0 0;
    }

    .form-row {
        grid-column: 1/-1;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .form-group.half {
        width: 100%;
    }

    .footer-row {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        margin-bottom: 36px;
    }
    .footer-menu {
        order: 2;
        width: 100%;
        display: block;
        column-gap: 20px;
        columns: 2;
        -webkit-columns: 2;
    }
    .footer-menu > * {
        break-inside: avoid;
    }

    .footer-menu__col li.headline a {
        font-size: 12px;
        line-height: 14px;

        /* position: relative;
        z-index: 11; */
    }
    .footer-menu__col li a {
        font-size: 12px;
        line-height: 14px;
    }
    html[lang="th"] .footer-menu__col li.headline a {
        font-size: 14px;
        line-height: 16px;
    }
    html[lang="zh"] .footer-menu__col li.headline a {
        font-size: 14px;
        line-height: 16px;
    }

    .language-menu {
        order: 1;
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        column-gap: 12px;
        margin-bottom: 20px;
    }


    .footer-consult {
        padding: 60px 0;
    }

    .box-consult {
        grid-column: 1 / -1;
        display: flex;
        flex-direction: column;
        row-gap: 20px;
    }

    .box-consult__btn {
        display: flex;
        flex-direction: column;
        column-gap: 20px;
        row-gap: 16px;
        align-items: center;
        justify-content: center;
    }

}

@media only screen and (min-width: 320px) and (max-height: 568px) {

}

@media only screen and (min-width: 360px) {

}

@media only screen and (min-width: 360px) and (max-height: 640px) {

}

@media only screen and (min-width: 360px) and (max-height: 740px) {

}

@media only screen and (min-width: 360px) {

}

@media only screen and (min-width: 360px) and (max-height: 740px) {

}

@media only screen and (min-width: 375px) {
}

@media only screen and (min-width: 375px) and (max-height: 667px) {

}

@media only screen and (min-width: 375px) and (max-height: 812px) {

}

@media only screen and (min-width: 390px) {

}

@media only screen and (min-width: 390px) and (max-height: 844px) {

}

@media only screen and (min-width: 393px) {

}

@media only screen and (min-width: 412px) {

}

@media only screen and (min-width: 412px) and (max-height: 914px) {

}

@media only screen and (min-width: 412px) and (max-height: 915px) {

}

@media only screen and (min-width: 414px) and (max-height: 736px) {

}

@media only screen and (min-width: 414px) and (max-height: 896px) {

}

@media only screen and (min-width: 430px) {

}

@media only screen and (min-width: 430px) and (max-height: 932px) {

}

@media only screen and (min-width: 540px) {
    /* ------------------------ */
    /* -------- Global -------- */
    /* ------------------------ */



    /* ------------------------ */
    /* -------- Header -------- */
    /* ------------------------ */
    .main-header-m__col2 {
        grid-column: 4/6;
        display: grid;
        justify-content: center;
        align-items: center;
    }

    .full-logo {
        height: 50px;
    }

    .main-header-m__col3 {
        grid-column: 8/-1;
        display: grid;
        justify-content: end;
        align-items: center;
    }


    /* ------------------------ */
    /* ----- Hero Banner ------ */
    /* ------------------------ */


    /* ------------------------ */
    /* -------- Footer -------- */
    /* ------------------------ */
}

@media only screen and (min-width: 768px) {

    /* ------------------------ */
    /* -------- Global -------- */
    /* ------------------------ */



    /* ------------------------ */
    /* -------- Header -------- */
    /* ------------------------ */

    /* ------------------------ */
    /* -------- Search -------- */
    /* ------------------------ */
    .body-search {
        padding: 40px 0 80px 0;
    }
    .search-box {
        grid-column: 3 / 7;

        display: flex;
        flex-direction: column;
    }

    /* ------------------------ */
    /* --------- Body --------- */
    /* ------------------------ */
    /* .body-page {
        padding-top: 67px;
    } */

    /* ------------------------ */
    /* -------- Footer -------- */
    /* ------------------------ */
    .newsletter-info {
        grid-column: 1/5;

        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        flex: 1 0 0;
        align-self: stretch;
        margin-bottom: 0;
    }

    .newsletter-form {
        grid-column: 5/-1;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 24px;
        flex: 1 0 0;
    }

    .form-row {
        grid-column: 1/-1;
        display: flex;
        flex-direction: row;
        gap: 12px;
    }
    .form-group.half {
        width: 49%;
    }


    .wrp-footer__menu {
        width: 100%;
        padding: 20px 0;
    }
    .footer-row {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-bottom: 60px;
    }
    .footer-menu {
        order: 1;
        width: 50%;
        display: flex;
        flex-direction: row;
        column-gap: 42px;

        columns: unset;
        -webkit-columns: unset;
    }
    .language-menu {
        order: 2;
        width: 40%;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        column-gap: 20px;
    }

    .footer-consult {
        padding: 80px 0;
    }

    .box-consult {
        grid-column: 3 / 7;
        display: flex;
        flex-direction: column;
        row-gap: 20px;
    }

    .box-consult__btn {
        display: flex;
        flex-direction: row;
        column-gap: 20px;
        row-gap: 16px;
        align-items: center;
        justify-content: center;
    }

}

@media only screen and (min-width: 820px) {

}

@media only screen and (min-width: 992px) {

}

@media only screen and (min-width: 1024px) {
    /* ------------------------ */
    /* -------- Global -------- */
    /* ------------------------ */



    /* ------------------------ */
    /* -------- Header -------- */
    /* ------------------------ */


    /* ------------------------ */
    /* ----- Hero Banner ------ */
    /* ------------------------ */


    /* ------------------------ */
    /* -------- Footer -------- */
    /* ------------------------ */
}

@media screen and (min-width: 1024.99px) {

    /* ------------------------ */
    /* -------- Global -------- */
    /* ------------------------ */
    .icon.share {
        width: 24px;
        height: 24px;
    }

    .icon.group {
        width: 24px;
        height: 24px;
        margin-right: 16px;
    }

    /* ------------------------ */
    /* ------ Breadcrumb ------ */
    /* ------------------------ */
    .main-breadcrumb {
        column-gap: 8px;
        padding: 20px 0;
    }
    .main-breadcrumb li {
        font-size: 0.751rem;
        line-height: 0.875rem;
        letter-spacing: 1.2px;
    }
    .main-breadcrumb li.first-parent::before {
        content: "/";
        display: block;
        margin-right: 8px;
    }
    .main-breadcrumb li a {
        font-size: 0.751rem;
        line-height: 0.875rem;
        letter-spacing: 1.2px;
    }
    .main-breadcrumb li.first,
    .main-breadcrumb li.hide-mobile {
        display: flex;
    }
    .main-breadcrumb li.bc-mobile {
        display: none;
    }


    /* ------------------------ */
    /* -------- Header -------- */
    /* ------------------------ */
    .main-header__desktop {
        display: block;
    }
    .main-header__mobile {
        display: none;
    }

    .main-header__row {
        padding: 12px 0;
    }

    .full-logo {
        height: 80px;
    }

    .nav-contact,
    .nav-contact:visited {
        font-size: 0.875rem;;
        line-height: 1rem;
        width: 150px;
        padding: 0;
        margin-left: 20px;
    }

    /* ------------------------ */
    /* -------- Search -------- */
    /* ------------------------ */
    .wrp-search .header-slide {
        display: none;
    }
    .form-group.w90 {
        width: 90%;
        display: flex;
        flex-direction: column;
        row-gap: 8px;
    }

    .search-close {
        grid-column: 1 / -1;
        display: flex;
        text-align: right;
        justify-content: flex-end;
        margin-bottom: 40px;
    }
    .search-box {
        grid-column: 4 / 10;

        display: flex;
        flex-direction: column;
    }

    /* ------------------------ */
    /* --------- Body --------- */
    /* ------------------------ */
    /* .body-page {
        padding-top: 178px;
    } */

    /* ------------------------ */
    /* -------- Footer -------- */
    /* ------------------------ */
    .wrp-footer__countries ul {
        display: flex;
        padding: 8px 0px;
        justify-content: center;
        align-items: center;
        gap: 52px;
        align-self: stretch;
    }

    .wrp-newsletter {
        width: 100%;
        padding: 52px 0;
    }
    .newsletter-info {
        grid-column: 1/5;

        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        flex: 1 0 0;
        align-self: stretch;
    }

    .newsletter-form {
        grid-column: 7/-1;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 24px;
        flex: 1 0 0;
    }

    .form-group.half {
        width: 49%;
    }


    .wrp-footer__menu {
        padding: 40px 0 20px 0;
    }
    .footer-row {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    .footer-menu {
        width: 60%;
        display: flex;
        flex-direction: row;
        column-gap: 52px;
    }

    .footer-menu__col li.headline a {
        font-size: 0.751rem;
        line-height: 0.875rem;
    }
    .footer-menu__col li a {
        font-size: 0.875rem;
        line-height: 1.125rem;
    }

    .language-menu {
        width: 35%;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        column-gap: 20px;
        margin-bottom: 0;
    }

    .footer-consult {
        padding: 100px 0;
    }

    .box-consult {
        grid-column: 5 / 9;
        display: flex;
        flex-direction: column;
        row-gap: 24px;
    }

    .box-consult__btn {
        display: flex;
        flex-direction: row;
        column-gap: 20px;
        row-gap: 16px;
        align-items: center;
        justify-content: center;
    }

}

@media only screen and (min-width: 1366px) {
    /* ------------------------ */
    /* -------- Header -------- */
    /* ------------------------ */
    .main-header__desktop {
        display: block;
    }
    .main-header__mobile {
        display: none;
    }

}

@media only screen and (min-width: 1440px) {
    /* ------------------------ */
    /* -------- Header -------- */
    /* ------------------------ */

}
@media only screen and (min-width: 1475px) {


}
@media only screen and (min-width: 1600px) {

    /* ------------------------ */
    /* -------- Header -------- */
    /* ------------------------ */
}

@media only screen and (min-width: 1920px) {

}

@media only screen and (min-width: 2500px) {

}