/*!
 * 2023 Renewal of website brand image
 */
.brand-icon-2023 { width: 180px; height: 60px; display: block; background-image: url("../images/components/TYCeLogo.svg"); background-size: 95% auto; background-repeat: no-repeat; background-position: center center; text-indent: -9999px; margin: 0 auto; }

.content-container h1, .content-container h2 { color: #0172E5; }
.header-width-scale-2023 { max-width: 70em; }

.brand + .navigation { width: 35%; float: left; text-align: right; }
.navigation ul { font-size: 0; display: block; height: 3px;  }                    /*For New Header*/
.navigation ul li { display: none; vertical-align: middle; font-size: 1rem; position: relative; }    /*For New Header*/

.navigation li.toolbar-2023 { position: relative; margin-right: 1.5em; }
.navigation li.toolbar-2023 a:hover { background-color: transparent; }
.navigation li.toolbar-2023 a + ul { position: absolute; top: 36px; left: 50%; z-index: 9; }
.navigation li.toolbar-2023 a.active + ul { display: block; }
.navigation li.toolbar-2023 a span { display: inline-block; vertical-align: middle; font-size: 1.4em; }
/* for the purpose if there is multilanguage selection, put this back */
/* .navigation li:last-child.toolbar-2023 { display: inline-block; margin-bottom: 1.5em; }
.navigation li:last-child.toolbar-2023 a { background-color: transparent; color: #1f1f1f; }
.navigation li:last-child.toolbar-2023 ul li a:hover { background-color: #cccccc; }
.navigation li:last-child.toolbar-2023 a + ul li a { background-color: #0172E5; color: white; }
.navigation li.toolbar-2023.lang { line-height: 30px; height: 30px; display: inline-block; text-align: right; font-size: .9rem; } */
.navigation li.toolbar-2023 > ul { display: none; margin-left: 0px; width: 80px;   border-radius: 6px;   overflow: visible;}
.navigation li.toolbar-2023 ul li { display: block; margin: 0; width: 100%; background-color: transparent; }
.navigation li.toolbar-2023 ul li a { text-align: center; background-color: #0172E5;  color: white; padding: .5em .3em; line-height: 1.6; }
.navigation li.toolbar-2023 ul li:first-child a { border-bottom: 0; border-radius: 6px 6px 0 0; }
.navigation li.toolbar-2023 ul li:last-child a { border-bottom: 0;  border-radius: 0 0 6px 6px; }
.navigation>ul>li>.btn-customed { height: 30px; }

.sb-slidebar { z-index: 1; }
/* =========================
   FOOTER
   ========================= */

#sitemap {
    position: relative;

    background: #28579b;

    padding: 35px 40px 55px 65px;
    min-height: 300px;

    box-sizing: border-box;
    overflow: hidden;
}


/* Keep real footer content above decorative images */
#sitemap .sitemap-inner{
    position: relative;
    z-index: 2;
}

#sitemap .copyrights {
    position: absolute;

    left: 65px;
    bottom: 0;

    height: 30px;

    display: flex;
    align-items: center;

    margin: 0;
    padding: 0;

    font-size: 12px;
    color: #ffffff;

    z-index: 3;
}
/* =========================
   SITEMAP COLUMNS
   ========================= */

#sitemap .sitemap-list-container-2023 {
    display: grid;

    grid-template-columns:
        minmax(180px, 1.3fr)
        minmax(180px, 1.3fr)
        minmax(130px, 1fr)
        minmax(130px, 1fr)
        minmax(190px, 1.2fr);

    gap: 35px;

    margin: 0;
    padding: 0;

    list-style: none;
}


/* Kill old float layout */
#sitemap .sitemap-list-container-2023::before,
#sitemap .sitemap-list-container-2023::after {
    content: none !important;
    display: none !important;
}
#sitemap .sitemap-inner .sitemap-list > ul.sitemap-list-container-2023 > li {
    float: none;
    width: auto;
    margin: 0;
}


/* Remove old nth-child positioning */
#sitemap .sitemap-inner .sitemap-list >
ul.sitemap-list-container-2023 > li:nth-child(n) {
    margin-left: 0;
    margin-right: 0;
    clear: none;
}


/* Main links */
#sitemap .sitemap-list-container-2023 > li > a {
    display: block;

    margin-bottom: 10px;

    color: #fff;

    font-weight: 600;
    text-decoration: none;
}


/* Sub links */
#sitemap .sitemap-list-container-2023 ul {
    margin: 0;
    padding: 0;

    list-style: none;
}

#sitemap .sitemap-list-container-2023 ul li {
    margin-bottom: 8px;
}

#sitemap .sitemap-list-container-2023 ul a {
    color: #fff;
    text-decoration: none;

    font-size: 13px;
    font-weight: 400;
}


/* LEFT DECORATIVE EDGE */
#sitemap::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 30px;
    height: 100%;

    background: #5d88c7;

    z-index: 0;
}


/* BOTTOM DECORATIVE EDGE */
#sitemap::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 30px;

    background: #5d88c7;

    z-index: 0;
}

/* =========================
   BOTTOM-RIGHT LOGO
   ========================= */

.footer-brand-logo {
    position: absolute;

    right: 25px;
    bottom: 55px;

    width: 150px;
    height: auto;

    z-index: 3;
}


/* =========================
   COPYRIGHT
   ========================= */

#sitemap .copyrights {
    margin-top: 30px;

    font-size: 13px;
    color: #fff;

    text-align: left;
}

.social-icons {
  display: flex;
  gap: 28px; /* 👈 spacing between icons (adjust 24–32px if needed) */
  align-items: center;
}

/* Each icon container */
.social-icons a {
  width: 36px;
  height: 36px;

  display: flex;
  align-items: center;
  justify-content: center;

  text-decoration: none;
}

/* FA layered container */
.social-icons .fa-layers {
  width: 100%;
  height: 100%;
}

/* Background square */
.social-icons .fa-square {
  color: #ffffff;
  font-size: 36px; 
}

/* Icon inside */
/* .social-icons .fa-brands {
  color: #ffffff;
  font-size: 18px; 
} */

/* Optional hover (nice polish) */
.social-icons a:hover .fa-square {
  color: #6b7280;
}
.footer-contact {
    margin-top: 18px;
    color: #ffffff;
    font-size: 13px;
    line-height: 1.6;
}

.footer-contact p {
    margin: 0 0 4px 0;
}
@media (max-width: 1024px) {

    #sitemap {
        display: flex;
        flex-direction: column;
        align-items: center;

        padding: 20px 26px 22px;
        box-sizing: border-box;
    }

    /* logo */
    .footer-brand-logo {
        position: static !important;
        order: 1;

        height: 100px;

    
    }

    /* copyright */
    #sitemap .copyrights {
        left: 0;
        bottom: 0;

        width: 100%;
        height: 26px;

        display: flex;
        justify-content: center;
        align-items: center;

        margin: 0;
        padding: 0;

        text-align: center;
    }

    #sitemap .copyrights .text {
        font-size: 11px;
        line-height: 1;
        text-align: center;
    }

    /* sitemap/social area */
    #sitemap .sitemap-inner {
        order: 3;

        width: 100%;
        margin: 0;
        padding: 0;
    }

    #sitemap .sitemap-inner .sitemap-list {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    #sitemap .sitemap-list-container-2023 {
        display: block !important;
        margin: 0;
        padding: 0;
    }

    #sitemap .sitemap-list-container-2023 > li {
        display: none;
    }

    #sitemap .sitemap-list-container-2023 > li.social-column {
        display: block !important;
        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        float: none !important;
        text-align: center;
    }

    /* icons */
    .social-icons {
        display: flex !important;

        justify-content: center;
        align-items: center;

        gap: 16px;

        margin: 0;
        padding: 0;
    }

    .social-icons a {
        display: inline-flex;
        justify-content: center;
        align-items: center;

        width: 32px;
        height: 32px;
    }

    .social-icons .fa-square {
        font-size: 32px;
    }

    .social-icons .fa-brands,
    .social-icons .fa-envelope {
        font-size: 15px;
    }
       #sitemap::before,
    #sitemap::after {
        display: none;
    }
}

.content-container > .slogan-center-2023 { padding: 1em 2em ; width: 100%; }

.flex { display: flex; flex-wrap: wrap; }

.container-grid { display: table; }
.container-grid .row { display: table-row; }
.container-grid .row .cell { display: table-cell; }

.content-container .content-container-inner .block .title:after { display: none; }

.background .video-wrap { width: 100%; height: 300px; }
.background .video-wrap video { position: relative; left: 50%; transform: translateX(-50%); height: 200px; }
.content-container .variable-wrapper { justify-content: center; align-items: baseline; }
.content-container .variable-wrapper .variable-item { flex-basis: 90%; margin: 1em 2em; }
.content-container .content-container-inner .link-wrapper { justify-content: space-around; align-items: baseline; }
.content-container .content-container-inner .link-wrapper .link-item { flex-basis: 90%; margin: 1em 0.3em; }
.content-container .content-container-inner .link-wrapper .link-item .cate { font-weight: 700; color: #595959; margin-top: 0.5em; }
.content-container .content-container-inner .link-wrapper .link-item h2 { margin: 0.5em 0; }
.content-container .content-container-inner .link-wrapper .link-item .link-more { text-decoration: underline; color: #939498; }
.content-container .flex .intro_icon {  max-width: 120px; max-height: 120px; }

/* landing banner RWD for mobile */
.aspect-ratio-box { width: 100%; position: relative; padding-top: 35%; }
.aspect-ratio-box img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.aspect-ratio-box.home-banner { display: none; }
.verbxslider.home-banner-mobile { display: block; }
.wide-banner { display: none; }
.wide-banner img { object-fit: cover;}
.wide-banner-mobile { display: block;  width: 100%;}
.wide-banner-mobile img {  display: block;   width: 100%;  height: auto;}


.btn.basic { background-color: #0172E5; }
.btn.reverse { background-color: #0172E5; }
.btn.gray:hover { background-color: #0172E5; }

/* Localization */

.btn-customed { display: inline-flex;padding: 12px 35px;justify-content: center;align-items: center;gap: 10px;}
.btn-customed-s { display: inline-flex;padding: 10px 12px;justify-content: center;align-items: center;gap: 10px;}
.btn-customed-s.pink {font-family: "Open Sans"; font-weight: 600;  border-radius: 5px; background: #D03B7F; color: #ffffff;}
.btn-customed.pink {font-family: "Open Sans"; font-weight: 600;  border-radius: 5px; border: 1px solid #D03B7F; background: #D03B7F; color: #ffffff;}
.btn-customed.blue { font-family: "Open Sans"; font-weight: 600; border-radius: 5px; border: 1px solid #3B80E3; background: #3B80E3; color: #ffffff;}
.btn-customed.lightblue { font-family: "Open Sans"; font-weight: 600; border-radius: 5px; background: #E6F0FB; color: #003E6B}
.btn-customed.white { font-family: "Open Sans"; font-weight: 600; border-radius: 5px; background: #ffffff; color: #003E6B;}
.btn-customed.grey { font-family: "Open Sans"; font-weight: 600; border-radius: 5px; background: #D8D8D8; color: #002462;}
.btn-customed.transparent { font-family: "Open Sans"; font-weight: 600; border-radius: 10px; border: 1px solid #C5DAFF; color: #F6F6F6;}
.btn-customed.contact { display: inline-flex;padding: 10px 15px;justify-content: center;align-items: center;gap: 10px;border-radius: 10px;  border: 1px solid #3B80E3; background: #3B80E3; color: #ffffff;}

.btn-customed.blue:hover { border: 1px solid #3271DF;background: #ffffff; color:#3271DF}
.btn-customed.contact:hover { border: 1px solid #3271DF;background: #ffffff; color:#3271DF}
.btn-customed.pink:hover { border: 1px solid #D03B7F;background: #ffffff; color:#D03B7F}

#certificate-head { padding: 1em 0; background-repeat: no-repeat; background-size: cover; }
#certificate-head h1 { color: #0172E5; }
#certificate { justify-content: center; }

#certificate .cert-item { background-color: #0172E5; width: 100%; display: flex; align-items: center; flex-direction: column; gap: 24px; margin-bottom: 40px; text-align: left; } 
#certificate .cert-img { display: block; width: 100%; height: auto; }
#certificate .cert-img img { display: block; width: 100%; height: auto; }
#certificate .cert-content { flex: 1; width: 100%; }
#certificate .cert-item .cert-content h2 { color: #ffffff; margin: 1rem 2rem; font-size: xx-large; }
#certificate .cert-item .cert-content h3,#certificate .cert-item .cert-content p { color: #ffffff; margin: 0.3rem 2rem; }
#certificate .cert-item:first-child, #certificate .cert-item:last-child { background-color: #ffffff; }
#certificate .cert-item:first-child .cert-content h2, #certificate .cert-item:last-child .cert-content h2 {  color: #0172E5; }
#certificate .cert-item:first-child h3,#certificate .cert-item:last-child h3 { color: #0172E5; }
#certificate .cert-item:first-child p, #certificate .cert-item:last-child p { color: #1f1f1f; }

.qs-slider { max-width: 100%; margin: 0 0 40px; --qs-page-width: clamp(10px, 4vw, 60px); }
.qs-item { box-sizing: border-box; }
.qs-page { display: block; height: 8px; border-radius: 999px; background: #ddd; cursor: pointer; }
.qs-viewport { overflow: visible; }
.qs-pagination { display: none; }

#awards .page-list { margin: 3em 0; }
#awards .recognition-section { --mobile-image-size: 120px; --mobile-axis-width: 34px; --mobile-item-gap: 24px; --mobile-side-gap: 10px; --mobile-line-top: 10px; --mobile-line-width: 35px; --mobile-line-shift-left: 4px;
    --desktop-card-width: 240px; --desktop-image-width: 160px; --desktop-image-height: 160px; --desktop-title-height: 52px; --desktop-axis-height: 54px; --desktop-card-gap: 28px; --desktop-line-height: 45px; --desktop-line-right: 0;
    --icon-size-mobile: 16px; --icon-size-desktop: 18px; --icon-gap-mobile: 8px; --icon-gap-desktop: 8px; --icon-top-mobile: 0; --icon-top-desktop: 8px;
    --line-color: #0172E5;
    width: 100%; box-sizing: border-box; margin-bottom: 3em; }
#awards .recognition-section *, #awards .recognition-section *:before, #awards .recognition-section *:after { box-sizing: border-box; }
#awards .recognition-wrap { position: relative; width: 100%; }
#awards .recognition-slider { width: 100%; overflow: visible; }
#awards .recognition-list { position: relative; display: flex; flex-direction: column; gap: var(--mobile-item-gap); width: 100%; padding: 0; }
#awards .recognition-list:before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); border-left: 2px dashed var(--line-color); z-index: 0; }
#awards .recognition-item { position: relative; z-index: 1; display: flex; align-items: flex-start; width: 100%; min-width: 0; }
#awards .recognition-item-image-wrap { flex: 0 0 calc(50% - (var(--mobile-axis-width) / 2)); max-width: calc(50% - (var(--mobile-axis-width) / 2)); display: flex; justify-content: flex-end; padding-right: var(--mobile-side-gap); }
#awards .recognition-item-image { width: var(--mobile-image-size); height: var(--mobile-image-size); background: var(--image-bg-color); display: flex; align-items: center; justify-content: center; overflow: hidden; }
#awards .recognition-item-image img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; border: 4px solid transparent; }
#awards .recognition-item-image img.has-frame { border-color: #0172E5; }
#awards .recognition-item-axis { position: relative; flex: 0 0 var(--mobile-axis-width); width: var(--mobile-axis-width); min-height: var(--mobile-image-size); }
#awards .recognition-item-axis:before { content: ""; position: absolute; top: var(--mobile-line-top); left: calc(50% - var(--mobile-line-shift-left)); width: var(--mobile-line-width); border-top: 2px solid var(--line-color); transform: translateX(-50%); z-index: 2; }
#awards .recognition-item-right { position: relative; text-align: left; flex: 0 0 calc(50% - (var(--mobile-axis-width) / 2)); max-width: calc(50% - (var(--mobile-axis-width) / 2)); min-width: 0; padding-left: calc(var(--mobile-side-gap) + var(--icon-size-mobile) + var(--icon-gap-mobile)); }
#awards .recognition-item-icon { position: absolute; top: var(--icon-top-mobile); left: var(--mobile-side-gap); width: var(--icon-size-mobile); height: var(--icon-size-mobile); z-index: 3; }
#awards .recognition-item-icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
#awards .recognition-item-title { margin: 0 0 8px; font-size: 18px; line-height: 1.4; font-weight: 700; color: #0172E5; overflow-wrap: break-word; word-break: break-word; }
#awards .recognition-item-body { min-width: 0; }
#awards .recognition-item-subtitle { margin: 0 0 8px; font-size: 14px; line-height: 1.6; font-weight: 600; color: #0172E5; overflow-wrap: break-word; word-break: break-word; }
#awards .recognition-item-desc { font-size: 14px; line-height: 1.8; color: #7E7E7E; overflow-wrap: break-word; word-break: break-word; }
#awards .recognition-arrow { display: none; position: absolute; top: 50%; transform: translateY(-50%); width: auto; height: auto; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; cursor: pointer; z-index: 5; }
#awards .recognition-arrow img { display: block; width: 39px; height: 39px; margin: 0 auto; }
#awards .recognition-arrow-prev { left: 0; }
#awards .recognition-arrow-next { right: 0; }
#awards .recognition-arrow.is-disabled { opacity: 0.35; pointer-events: none; }

#awards .segment-section { width: 100%; box-sizing: border-box; margin-bottom: 3em; }
#awards .segment-section *, #awards .segment-section *:before, #awards .segment-section *:after { box-sizing: border-box; }
#awards .segment-wrap { width: 100%; }
#awards .segment-list { display: flex; flex-wrap: wrap; gap: 20px; width: 100%; }
#awards .segment-item { width: 100%; background: #0172E5; padding: 20px; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
#awards .segment-item-image-wrap { width: 100%; margin-bottom: 16px; }
#awards .segment-item-image { width: 100%; height: 180px; display: flex; align-items: flex-start; justify-content: flex-start; overflow: hidden; }
#awards .segment-item-image img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
#awards .segment-item-title { margin: 0; font-size: 22px; line-height: 1.4; font-weight: 700; color: #FFFFFF; text-align: left; overflow-wrap: break-word; word-break: break-word; }
#awards .segment-item-subtitle { margin: 0 0 10px; font-size: 16px; line-height: 1.6; font-weight: 600; color: #FFFFFF; text-align: left; overflow-wrap: break-word; word-break: break-word; }
#awards .segment-item-desc { font-size: 14px; line-height: 1.8; color: #FFFFFF; text-align: left; margin-bottom: 25px; overflow-wrap: break-word; word-break: break-word; }

#esh .content-container-inner .content p { line-height: 2; font-size: 1.1em; }

.oem-banner { position: relative; width: 100%; overflow: hidden; background-color: #000; }
.oem-banner-slider { position: relative; width: 100%; height: 60vw; min-height: 210px; max-height: 320px; }
.oem-banner-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; z-index: 1; transition: opacity 0.45s ease, visibility 0.45s ease; }
.oem-banner-slide.is-active { opacity: 1; visibility: visible; z-index: 2; }
.oem-banner-media, .oem-banner-image, .oem-banner-video { position: absolute; inset: 0; width: 100%; height: 100%; }
.oem-banner-image, .oem-banner-video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.oem-banner-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 48px; height: 48px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.oem-banner-arrow img { display: block; width: 100%; height: 100%; object-fit: contain; }
.oem-banner-arrow-prev { left: 12px; }
.oem-banner-arrow-next { right: 12px; }
.oem-banner-pagination { position: absolute; right: 16px; bottom: 16px; z-index: 3; display: flex; align-items: center; gap: 8px; }
.oem-banner-dot { position: relative; width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: #ffffff; cursor: pointer; overflow: hidden; transition: width 0.25s ease, background 0.25s ease; }
.oem-banner-dot.is-active { width: 42px; background: #ffffff; border-radius: 999px; }
.oem-banner-dot.is-active::after { content: ''; position: absolute; top: 0; right: 0; width: 16px; height: 100%; background: #2F70DE; border-radius: 999px; }

.oem-title.content-container { min-height: auto; }
.oem-produce-slogan { width: 100%; background-color: #141C2E; color: #FFFFFF; padding: 0.2rem 0; }
.oem-design-list { display: flex; flex-wrap: wrap; margin: 1rem; padding: 0; }
.oem-design-item { width: 100%; margin: 0 0 24px 0; box-sizing: border-box; }
.oem-design-media { position: relative; width: 100%; aspect-ratio: 17 / 9; overflow: hidden; margin: 0 0 16px 0; border-radius: 16px; }
.oem-design-media img, .oem-design-media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.oem-design-content { text-align: left; }
.oem-design-content h3, .oem-design-content h4 { margin: 0 0 8px 0; color: #0172E5; text-align: left; }
.oem-design-content p { margin: 0; text-align: left; line-height: 1.8; }

.oem-produce-title { color: #0172E5; }
.oem-produce-list { width: 100%; margin: 0; padding: 0; }
.oem-produce-row { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; width: 100%; margin: 0; padding: 0; }
.oem-produce-row:last-child { margin-bottom: 0; }
.oem-produce-row.row-1 .oem-produce-item, .oem-produce-row.row-2 .oem-produce-item, .oem-produce-row.row-3 .oem-produce-item { width: 100%; }
.oem-produce-item { position: relative; overflow: hidden; aspect-ratio: 4 / 3; cursor: default; background: #eee; margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; }
.oem-produce-item.has-subtitle { cursor: pointer; }
.oem-produce-item img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-transition: transform .4s ease; transition: transform .4s ease; }
.oem-produce-item::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient( to top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.28) 38%, rgba(0, 0, 0, 0) 70% ); z-index: 1; pointer-events: none; }
.oem-produce-caption { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 2; min-height: 32px; text-align: left; }
.oem-produce-caption h3, .oem-produce-caption h4 { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; color: #fff; -webkit-transition: opacity .3s ease, -webkit-transform .3s ease; transition: opacity .3s ease, transform .3s ease; }
.oem-produce-caption h3 { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); font-size: 20px; line-height: 1.3; font-weight: 700; }
.oem-produce-caption h4 { opacity: 0; -webkit-transform: translateY(10px); transform: translateY(10px); font-size: 15px; line-height: 1.5; }
.oem-produce-item.has-subtitle.is-open .oem-produce-caption h3 { opacity: 0; transform: translateY(-8px); }
.oem-produce-item.has-subtitle.is-open .oem-produce-caption h4 { opacity: 1; transform: translateY(0); }

.oem-global h1 { color: #0172E5; }
.oem-global-container { padding-top: 1rem; border-top: 15px solid #2F70DE; border-left: 15px solid #2F70DE; border-right: 15px solid #2F70DE; }
.oem-global-img img { display: block; width: 100%; height: auto; }

.oem-quality-list { display: flex; flex-wrap: wrap; margin-left: -10px; margin-right: -10px; }
.oem-quality-item { position: relative; width: calc(100% - 20px); margin: 15px 50px; overflow: hidden; cursor: pointer; box-sizing: border-box; }
.oem-quality-item:before { content: ""; display: block; padding-top: 150%; }
.oem-quality-bg, .oem-quality-overlay, .oem-quality-inner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.oem-quality-bg { display: block; z-index: 0; object-fit: cover; }
.oem-quality-overlay { z-index: 1; background: rgba(0, 102, 153, 0); transition: background 0.35s ease; }
.oem-quality-inner { z-index: 2; overflow: hidden; }
.oem-quality-content-slider { display: flex; width: 200%; height: 100%; transform: translateX(-50%); transition: transform 0.45s ease; }
.oem-quality-panel { width: 50%; height: 100%; padding: 25px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-end; text-align: left; }
.oem-quality-panel-default { align-items: flex-start; }
.oem-quality-title { margin: 0; color: #fff; font-size: 22px; line-height: 1.4; font-weight: bold; }
.oem-quality-arrow { display: block; width: 45px; height: auto; margin-top: 12px; margin-left: 0; margin-right: 0; }
.oem-quality-panel-detail { align-items: flex-start; }
.oem-quality-detail-title { margin: 0; color: #fff; font-size: 22px; line-height: 1.4; font-weight: bold; }
.oem-quality-detail-divider { display: block; width: 135px; height: 2px; margin: 14px 0; background: #E81F76; }
.oem-quality-detail-text { margin: 0; color: #fff; line-height: 1.7; }
.oem-quality-item.active .oem-quality-content-slider { transform: translateX(0); }
.oem-quality-item.active .oem-quality-overlay { background: rgba(47, 112, 222, 0.75); }
.oem-quality-item.active .oem-quality-panel-detail { justify-content: center; gap: 8px; }

.oem-recognize-list { display: flex; flex-wrap: wrap; margin-left: -10px; margin-right: -10px; }
.oem-recognize-item { position: relative; display: block; width: 100%; margin: 5px; overflow: hidden; text-decoration: none; box-sizing: border-box; color: inherit; }
.oem-recognize-bg { display: block; width: 100%; height: auto; }
.oem-recognize-item::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 55%; background: linear-gradient(to top, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0)); z-index: 1; pointer-events: none; }
.oem-recognize-content { position: absolute; left: 0; bottom: 0; width: 100%; padding: 25px; box-sizing: border-box; text-align: left; z-index: 2; }
.oem-recognize-title { margin: 0; color: #ffffff; font-size: 20px; line-height: 1.4; font-weight: bold; text-align: left; }
.oem-recognize-arrow-wrap { position: relative; display: inline-block; width: 28px; height: 28px; margin-top: 12px; vertical-align: top; }
.oem-recognize-arrow { position: absolute; top: 0; left: 0; display: block; width: 28px; height: auto; transition: opacity 0.3s ease; }
.oem-recognize-arrow-default { opacity: 1; }
.oem-recognize-arrow-hover { opacity: 0; }
.oem-recognize-item:hover .oem-recognize-arrow-default { opacity: 0; }
.oem-recognize-item:hover .oem-recognize-arrow-hover { opacity: 1; }

.oem-tail-context p { margin-top: 0; margin-bottom: 3rem; }

.oem-contact-section { width: 100%; background-color: #2F70DE; color: #ffffff; padding: 24px 0; overflow: hidden; }
.oem-contact-section-inner { width: min(100% - 48px, 1400px); margin: 0 auto; }
.oem-contact-card { display: flex; flex-direction: column; gap: 0; }
.oem-contact-card + .oem-contact-card { margin-top: 48px; padding-top: 48px; border-top: 1px solid rgba(255, 255, 255, 0.25); }
.oem-contact-col-left, .oem-contact-col-right { display: contents; }
.oem-contact-card-image { order: 1; width: calc(100% + 24px); margin-right: -24px; display: flex; justify-content: flex-end; }
.oem-contact-card-left { order: 2; width: 100%; display: flex; flex-direction: column; gap: 14px; margin-top: 30px; }
.oem-contact-list-info { order: 3; width: 100%; margin-top: 3em; }
.oem-contact-card-brief { order: 4; width: 100%; display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.oem-contact-section-img { display: block; width: 100%; max-width: none; height: auto; object-fit: contain; object-position: right top; }
.oem-contact-page-title { margin: 0; font-size: 3em; line-height: 1.1; }
.oem-contact-page-desc { margin: 0; line-height: 1.8; font-weight: bold; white-space: pre-wrap; }
.oem-contact-list-title { margin: 0; line-height: 1.25; }
.oem-contact-list-subtitle { margin-top: 1em; line-height: 1; white-space: pre-wrap; }
.oem-contact-divider { width: 100%; height: 1px; background-color: rgba(255, 255, 255, 0.95); }
.oem-contact-list-brief { margin: 0; line-height: 1.3; white-space: pre-wrap; }
.oem-contact-page-desc p, .oem-contact-list-brief p { margin: 0; }
.oem-contact-section a { color: #ffffff; text-decoration: none; }

.news-list-wrapper .news-list li:hover { border: 4px solid #0172E5; }
.news-list-wrapper .news-list .article { display: table; min-height: 512.55px; padding: 1em 1em 0.5em 1em; }
.news-list-wrapper .news-list .article .article-head { display: table-row; height: 230px; }
.news-list-wrapper .news-list .article .thumb { display: table-row; }
.news-list-wrapper .news-list .article .article-footer { display: table-row; height: 60px; }
.news-list-wrapper .news-list .article .article-footer .content { display: table; width: 100%; padding: 1em 0 0 0; }
.news-list-wrapper .news-list .article .article-footer .fb-icon { display: table-cell; width: 30%; padding: 0 0 0 1em; }
.news-list-wrapper .news-list .article .article-footer .read-full { display: table-cell; width: 70%; text-decoration: underline; padding: 0 0 0 1em; }
.news-list-wrapper .news-list-inner .article .content .icons-back { color: #0172E5; vertical-align: middle; font-size: 2.5em; }
.news-list-wrapper .news-list-inner .article .content .icons-link { vertical-align: middle; color: #cccccc; margin: 0 2px; font-size: 2.5em; }

.investor-wrapper .investor-reports .investor-reports-table:first-child thead { background-color: #595959; }
ul.spokesperson li { border-bottom: 4px solid #0172E5; }
ul.spokesperson li .mail a:hover { color: #0172E5; }

.group-list li a { color: #0172E5; }

#hrm .content-container-inner li { margin: 1em; }
#hrm .content-wrapper .content { color: #1f1f1f; }
#hrm .main { text-align: left; }
#hrm .main .wrapper h1 { font-size: 2em; }
#hrm .more-link-2023 a { color:#A5BBCB; }
#hrm .more-link-2023 p { margin: auto; }

.esg-banner { height: 300px }
.esg-banner ul { display: flex; flex-wrap: wrap; top: 18%; justify-content: center; align-items: center; height: 75%; position: relative; }
.esg-banner ul > li:nth-child(n+2) { display: none; }
.esg-banner ul > li { width: 32vmin; height: 32vmin; border-radius: 50%; margin: 0 2vmin; background-image: linear-gradient(180deg, rgb(255,255,255), rgb(255,255,255),rgb(255,255,255,0.7),transparent); box-shadow: 5px 5px 8px 1px rgb(31,31,31,0.5); color: #0172E5; vertical-align: middle; }
.esg-banner ul > li .bg-flex-content { display: flex; flex-wrap: nowrap; flex-direction: column; height: 100%; justify-content: center; margin: 0 0.5em; }
.esg-banner ul > li .bg-flex-content h2,.esg-banner ul > li .bg-flex-content p { margin: 0; font-size: 2.5vmin; }
.esg-banner ul > li .bg-flex-content h2 span { font-size: 6vmin; }
.content-container .content-container-inner.esg-header { padding: 1em; }
.esg-wrapper .ns_wrapper { width: 100%; }
.esg-wrapper .ns_wrapper a { display: flex; flex-wrap: nowrap; }
.esg-wrapper .ns_wrapper a .ns_arrow { flex-basis: 15%; }
.esg-wrapper .ns_wrapper a .ns_date { flex-basis: 20%; }
.esg-wrapper .ns_wrapper a .ns_title { flex-basis: 65%; }
.esg-wrapper .ns_wrapper a h3 { color: #1f1f1f; padding: 0 0.5em; }
.esg-wrapper .ns_wrapper .ns_more { text-align: right; }
.esg-wrapper .ns_wrapper .ns_more a { display: inline-block; color: #5b5b5b; }
.esg-wrapper .ns_wrapper .ns_more a p { display: inline-block; margin: auto; }
.esg-wrapper .ns_wrapper .ns_more a span { display: none; }
.esg-wrapper .content .py_wrapper { display: flex; flex-wrap: wrap; justify-content: center;}
.esg-wrapper .content .py_wrapper .py_thumb { width: 100%; height: 100%; max-width: 100px; max-height: 100px; flex-shrink: 0; }
.esg-wrapper .is_wrapper { background-color: #f2f2f2; }
.esg-wrapper .is_wrapper .content h3 { color: #0172E5; }
.esg-wrapper .filter-list { display: none; }
.esg-wrapper .i-6-list ul > li { flex-basis: 100%; margin: 0.5em 0; }
.esg-wrapper .filter-item { display: none; margin: 2.5em 0; }
.esg-wrapper .filter-item.active { display: block; }
.esg-wrapper .filter-btn .is_arrow { color: #ffffff; }
.esg-wrapper h1.report-year { padding: 0 2rem; text-decoration: underline; }
.esg-wrapper .area-item { display: none; }
.esg-wrapper .area-item a { color: rgb(128,128,131); }
.esg-wrapper .area-item a:hover { color: #E81F76; }
.esg-wrapper .area-item.active { display: block; margin-left: 15%; }

.ns_list { --g: 15px; display: flex; flex-wrap: wrap; align-items: center; gap: var(--g); list-style: none; padding: 0; margin: 0; }
.ns_list > li{ flex: 0 1 calc((100% - (var(--g) * 2)) / 3); box-sizing: border-box; flex-basis: 100%; }
.ns_list .ns_link{ display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; text-decoration: none; color: inherit; }
.ns_list .ns_link:hover{ color: #E81F76; }
.ns_list .ns_icon{ flex: 0 0 auto; padding-right: 30px; height: 30px; margin: 10px 0; }
.ns_list .ns_text{ min-width: 0; word-break: break-word; }

.slider-flex-wrapper { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-around; }
.slider-flex-wrapper .slider-flex-btn { flex: 1 1 0; padding: 3em 0; }
.slider-flex-wrapper .slider-flex-btn a { display: inline-block; color: #ffffff; background-color: #08162c; padding: 2em 0.5em; opacity: 0.9; }
.slider-flex-wrapper .slider-flex-content { flex: 10 1 0; }

#scrollToTop { display: none; position: fixed; right: 2em; bottom: 2em; z-index: 9; }
#scrollToTop a { color: #0172E5; }

#stake .content-container-inner { margin: 0 1em; }
#stake .list-wrapper { margin: 1em 0; }
#stake .list-wrapper .list-item { flex-basis: 85%; margin: 1em; }
#stake .list-wrapper .list-item .list-icon { width: 120px; height: 120px; margin-left: 0; margin-right: 1em; }
#stake .list-wrapper .list-item .list-cont { flex-basis: 100%; }
#stake .list-wrapper .list-item .list-cont h2 { color: #1f1f1f; font-size: 2em; margin: 0.5em 0; }
#stake .list-wrapper .list-item .list-cont h3 { margin: 0.5em 0; font-size: 1.2em; }
#stake .list-wrapper .list-item .list-cont .mailto { color: #1f1f1f; }
#stake .list-wrapper .list-item .list-cont .mailto:hover { color: #0172E5; text-decoration: underline; }
#stake .list-wrapper .list-item .list-cont .list-link-title { color: #0172E5; }
#stake .list-wrapper .list-item .list-cont .list-link { color: #E81F76; }

#location .site-list { margin: 0 1em;}
#location .site-list .site-info .flex-align { flex-direction: column; justify-content: flex-start;}
#location .site-list .site-info h3 { margin: 0; }
#location .site-list .site-info .map-link { align-self: center;}
#location .site-list .site-info .map-link img { margin: 0.3em 0; }

table.directors-list th, table.directors-list td { white-space: pre-wrap; }

/* Survey Message */
.popup-wrap { width: 100%; height: 100%; display: none; position: fixed; top: 0px; left: 0px; content: ''; z-index: 1; }
.popup-box { width: 80%; padding: 20px 20px; transform: translate(-50%, -50%) scale(0.5); position: absolute; top: 65%; left: 50%; 
            box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.5); border-radius: 20px; background: #ffffff; text-align: left; }
.popup-box ul > li:first-child a { color: #ffffff; background-color: #0172E5; }
.popup-btn { color:#0172E5; display: inline-block; width: 70%; padding: 0.3em; margin: 0.5em; border: 3px #0172E5 solid; border-radius: 10px; text-align: center; }
.popup-box ul > li a:hover { color: #ffffff; background-color: #E81F76; border: 3px #E81F76 solid; };
.transform-in, .transform-out { display: block; -webkit-transition: all ease 0.5s; transition: all ease 0.5s; }
.transform-in { transform: translate(-50%, -50%) scale(1); }
.transform-out { transform: translate(-50%, -50%) scale(0.5); }
/* Survey Message */


@media (min-width: 768px) {
.content-container .variable-wrapper .variable-item { flex-basis: 40%; }
.content-container .content-container-inner .link-wrapper .link-item { flex-basis: 20%; }
.content-container .content-container-inner .content.full { width: 100%; padding: 0; }
.content-container > .slogan-center-2023 { padding: 1em 10em ; width: 100%; }
.aspect-ratio-box.home-banner { display: block; }
.verbxslider.home-banner-mobile { display: none; }
.wide-banner{ display: block; }
.wide-banner-mobile { display: none; }

.background .video-wrap video { height: 250px; }
.timeline li ul li:after { border: 4px solid #0172E5; }
.timeline li ul li:hover:after { background-color: #0172E5; }
.products-grid li .caption { background-color: rgba(60, 60, 60, 0.8); }
#hrm .content-container-inner ul { text-align: left; }
#hrm .content-container-inner li { margin: 1em; width: 100%; display: inline-block; float: left; }
#hrm .thumb { display: inline-block; vertical-align: middle; float: left; width: 33%; }
#hrm .content-wrapper { display: inline-block; vertical-align: middle; text-align: left; margin-left: 1em; width: 58%; }



.esg-banner { height: 560px }
.esg-banner ul { flex-wrap: nowrap; top: 20%; }
.esg-banner ul > li { width: 15vmin; height: 15vmin; margin: 0 0.8vmin; transform: translateY(0); transition: transform 0.4s linear 0s; }
.esg-banner ul > li:nth-child(n+2) { display: list-item; }
.esg-banner ul > li:nth-child(odd) { position: relative; top: -5vmin; }
.esg-banner ul > li:hover { transform: translateY(-25px); transition: transform 0.4s linear 0s; }
.esg-banner ul > li .bg-flex-content h2,.esg-banner ul > li .bg-flex-content p { font-size: 1vmin; }
.esg-banner ul > li .bg-flex-content h2 span { font-size: 2.5vmin; }
.esg-wrapper .ns_wrapper a .ns_arrow { flex-basis: 6%; }
.esg-wrapper .ns_wrapper a .ns_date { flex-basis: 10%; }
.esg-wrapper .ns_wrapper a .ns_title { flex-basis: 84%; }
.esg-wrapper .ns_wrapper .ns_more a { width: 56px; overflow: hidden; white-space: nowrap; }
.esg-wrapper .ns_wrapper .ns_more a:hover { width: 90px; transition: width 0.6s linear 0s; }
.esg-wrapper .ns_wrapper .ns_more a span { display: inline-block; }
.esg-wrapper .content .py_wrapper { flex-wrap: nowrap; justify-content: space-between; flex: 1 1 32%; margin-right: 1%; max-width: 32%; text-align: left; }
.esg-wrapper .content a { outline: none; }
.esg-wrapper .content a h3 { margin: 15px 0 5px 0; }
.esg-wrapper .content .filter-btn a { color: #5b5b5b; display: flex; flex-direction: column; flex-grow: 1; justify-content: flex-start; }
.esg-wrapper .i-6-list ul { align-items: stretch; justify-content: space-around; }
.esg-wrapper .i-6-list ul.flex-start { align-items: flex-start; }
.esg-wrapper .i-6-list ul > li { flex-basis: 16%; max-width: 16%; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-end; }
.esg-wrapper .filter-list { display: flex; flex-wrap: wrap; }
.esg-wrapper .filter-btn img { max-width: 100px; max-height: 100px; }
.esg-wrapper .is_wrapper { position: relative; top: -34px; }
.esg-wrapper .filter-btn.active .is_arrow { color: #f2f2f2; }
.esg-wrapper .area-item.active { margin-left: 25%; }
.ns_list > li{ flex: 0 1 calc((100% - (var(--g) * 2)) / 3); box-sizing: border-box; }
.slider-flex-wrapper .slider-flex-btn { display: none; }
#stake .list-wrapper .list-item { flex-basis: 50%; margin: 2em 0; }
#stake .list-wrapper .list-item .list-icon { margin: 0 0.5em; }
#stake .list-wrapper .list-item .list-cont { flex-basis: 64%; }
#stake .list-wrapper .list-item .list-cont h2 { margin: 0 0 0.5em 0; }
#location .site-list { margin: 0;}
#location .site-list .site-info .flex-align { flex-direction: row; align-items: center;}
#location .site-list .site-info h3 { margin: 0; }
#location .site-list .site-info .map-link { align-self: center;}
#location .site-list .site-info .map-link img { width: 50%; margin: 0 0.5em; }
.r-4-12 { display: inline-block; width: 30%; }
.popup-wrap { width: 100%; height: 100%; display: none; position: fixed; top: 0px; left: 0px; content: ''; z-index: 1; }
.popup-box { width: 40%; padding: 40px 60px; transform: translate(-50%, -50%) scale(0.5); position: absolute; top: 65%; left: 50%; 
            box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.5); border-radius: 20px; background: #ffffff; text-align: left; }
.popup-box li { display: inline; }
.popup-box ul > li:first-child a { color: #ffffff; background-color: #0172E5; }
.popup-btn { color:#0172E5; display: inline-block; width: 40%; margin: 0.5em; border: 3px #0172E5 solid; border-radius: 10px; text-align: center; }
.popup-box ul > li a:hover { color: #ffffff; background-color: #E81F76; border: 3px #E81F76 solid; };
.transform-in, .transform-out { display: block; -webkit-transition: all ease 0.5s; transition: all ease 0.5s; }
.transform-in { transform: translate(-50%, -50%) scale(1); }
.transform-out { transform: translate(-50%, -50%) scale(0.5); }}


@media (min-width: 1024px) { .brand-icon-2023 {  width: 150px; height: 60px; padding: 0 0; margin: 0;  background-size: contain; background-size: 95% auto; padding: 10px 0;}
.brand + .navigation { width: 90%; float: left; text-align: right; }
 nav ul { display: block; height: 50px; line-height: 100px; }
.navigation ul { font-size: 0; display: block; height: 40px; line-height: 30px; padding: 10px 0;} 
.navigation ul li { display: inline-block; vertical-align: middle; font-size: 1rem; position: relative; } 
.navigation li.toolbar-2023 { display: inline-block; position: relative; margin-right: 1.4em; }
.navigation li.toolbar-2023 a:hover { background-color: transparent; }
.navigation li.toolbar-2023 a + ul { position: absolute; top: 80px; top: 100%; left: 0; z-index: 9; }
.navigation li.toolbar-2023.lang a + ul { top: 40px; }
.navigation li.toolbar-2023 a.active + ul { display: block; }
.navigation li.toolbar-2023 a span { display: inline-block; vertical-align: middle; font-size: 1em; }
/* for the purpose if there is multilanguage selection, put this back */
/* .navigation li:last-child.toolbar-2023 { display: inline-block; margin-bottom: 0.5em; } */
/* .navigation li:last-child.toolbar-2023 ul { width: 68px; margin-left: -23px; } */
/* .navigation li:last-child.toolbar-2023 a { background-color: transparent; color: #ffffff; } */
.navigation li.toolbar-2023 ul li a:hover { background-color: #cccccc; color: white; }
.navigation li.toolbar-2023 ul { display: none; margin-left: 0; width: 160px;  border-radius: 6px; overflow: visible;}
.navigation li.toolbar-2023 ul li { margin: 0; width: 100%; background-color: transparent; }
.navigation li.toolbar-2023 ul li a { text-align: center; background-color: #0172E5; border-top: 0; padding: .5em .3em; line-height: 1.6; }
.navigation li.toolbar-2023 ul li ul {    position: absolute;    top: 0;    left: 100%;    display: none;} 
.navigation li.toolbar-2023.lang ul li:last-child a { border-bottom: 0; font-size: .9rem; }
.navigation li.toolbar-2023:hover > ul {    display: block;}
.navigation li.toolbar-2023 ul li:hover > ul {    display: block;}
.navigation li.toolbar-2023 ul {    z-index: 9999;}
.background.static-cover h1 { color: #0172E5; }

.introtyce {width: 100%; height:100%;}
.introtyce .introtyce-title h1 { color: #ffffff; text-align: left; }

#certificate .cert-img { display: block; width: 45%; height: auto; }
#certificate .cert-img img { display: block; height: auto; }
#certificate .cert-item { flex-direction: row; flex-wrap: nowrap; }
#certificate .cert-item:nth-child(even) { flex-direction: row-reverse; display: flex; align-items: flex-start; }
#certificate .cert-item:nth-child(even) .cert-content { margin-left: 12rem; margin-top: 3vw; }
#certificate .cert-item:nth-child(odd) .cert-content { margin-right: 12rem; }

.qs-slider { max-width: 45%; }
.qs-viewport { overflow: hidden; }
.qs-track { position: relative; left: 0; transition: left .4s ease; }
.qs-track.is-slider { display: flex; }
.qs-page-inner { flex: 0 0 100%; box-sizing: border-box; padding-right: 24px; }
.qs-pagination { display: flex; gap: 8px; margin-top: 15px; margin-left: 23px; }
.qs-page { display: block; height: 8px; border-radius: 999px; background: #ddd; cursor: pointer; flex: 0 0 var(--qs-page-width); max-width: 100%; }
.qs-page.is-active { background: #E81F76; }

#awards .recognition-wrap { padding: 0 56px; }
#awards .recognition-slider { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; }
#awards .recognition-slider::-webkit-scrollbar { display: none; }
#awards .recognition-list { position: relative; display: flex; flex-direction: row; align-items: flex-start; gap: var(--desktop-card-gap); width: max-content; min-width: 100%; padding-bottom: 8px; }
#awards .recognition-list:before { content: ""; position: absolute; top: calc( var(--desktop-image-height) + var(--desktop-title-height) + (var(--desktop-axis-height) / 2)); left: 0; right: 0; bottom: auto; transform: none; border-left: 0; border-top: 2px dashed var(--line-color); z-index: 0; }
#awards .recognition-item { position: relative; flex: 0 0 var(--desktop-card-width); width: var(--desktop-card-width); display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
#awards .recognition-item-image-wrap { order: 1; flex: 0 0 auto; width: 100%; max-width: 100%; height: var(--desktop-image-height); display: flex; justify-content: flex-end; align-items: center; padding: 0; margin: 0; align-self: stretch; }
#awards .recognition-item-image { width: var(--desktop-image-width); height: var(--desktop-image-height); margin: 0 0 0 auto; display: flex; align-items: center; justify-content: flex-end; align-self: flex-end; }
#awards .recognition-item-image img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; margin-left: auto; margin-right: 0; }
#awards .recognition-item-right { display: contents; }
#awards .recognition-item-title { order: 2; max-width: 100%; min-height: var(--desktop-title-height); margin: 0 0 0 auto; padding-top: 12px; display: flex; align-items: flex-start; justify-content: flex-end; font-size: 20px; line-height: 1.4; text-align: right; align-self: flex-end; }
#awards .recognition-item-axis { order: 3; position: relative; flex: 0 0 auto; width: 100%; height: var(--desktop-axis-height); min-height: var(--desktop-axis-height); align-self: stretch; }
#awards .recognition-item-axis:before { content: ""; position: absolute; top: 50%; right: 1px; left: auto; width: 0; height: var(--desktop-line-height); border-top: 0; border-left: 2px solid var(--line-color); transform: translateY(-50%); z-index: 2; }
#awards .recognition-item-icon { order: 4; position: static; width: var(--icon-size-desktop); height: var(--icon-size-desktop); margin-top: var(--icon-top-desktop); margin-bottom: var(--icon-gap-desktop); align-self: flex-end; flex: 0 0 auto; }
#awards .recognition-item-icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
#awards .recognition-item-body { order: 5; max-width: 100%; min-width: 0; margin: 0 0 0 auto; padding-left: 37px; text-align: right; align-self: flex-end; }
#awards .recognition-item-subtitle { margin: 0 0 8px; font-size: 15px; line-height: 1.6; text-align: right; }
#awards .recognition-item-desc { font-size: 14px; line-height: 1.8; text-align: right; }
#awards .recognition-arrow { display: block; }

#awards .segment-list { gap: 28px; }
#awards .segment-item { width: calc((100% - 28px) / 2); padding: 22px; }
#awards .segment-item-image { align-items: flex-start; }

.oem-banner-slider { height: 38vw; min-height: 380px; max-height: 560px; }
.oem-banner-arrow { width: 58px; height: 58px; }
.oem-banner-arrow-prev { left: 24px; }
.oem-banner-arrow-next { right: 24px; }
.oem-banner-pagination { right: 32px; bottom: 24px; gap: 10px; }
.oem-banner-dot { width: 9px; height: 9px; }
.oem-banner-dot.is-active { width: 56px; }
.oem-banner-dot.is-active::after { width: 20px; }

.oem-design-list { margin: 0 -24px; padding: 0; }
.oem-design-item { width: 50%; padding: 0 24px; margin: 0 0 48px 0; }
.oem-produce-row { margin-bottom: 1rem; }
.oem-produce-row.row-1 .oem-produce-item { width: 100%; }
.oem-produce-row.row-2 .oem-produce-item { width: 50%; }
.oem-produce-row.row-3 .oem-produce-item { width: 33.333333%; }
.oem-produce-caption { left: 24px; right: 24px; bottom: 24px; }
.oem-produce-caption h3 { font-size: 20px; line-height: 1.3; }
.oem-produce-caption h4 { font-size: 16px; line-height: 1.5; }
.oem-global-container { border-top: 25px solid #2F70DE; border-left: 25px solid #2F70DE; border-right: 25px solid #2F70DE; }

.oem-quality-item { width: calc(33.333% - 20px); margin: 10px; }
.oem-quality-item:before { padding-top: 155%; }
.oem-quality-panel { padding: 35px; }
.oem-quality-title { font-size: 22px; }
.oem-quality-arrow { width: 45px; margin-top: 15px; }
.oem-quality-detail-title { font-size: 23px; }
.oem-quality-detail-divider { width: 155px; margin: 16px 0; }
.oem-quality-detail-text { line-height: 1.8; }

.oem-recognize-item { width: calc(50% - 20px); }
.oem-recognize-content { padding: 45px; }
.oem-recognize-title { font-size: 24px; }
.oem-recognize-arrow-wrap { width: 32px; height: 32px; margin-top: 14px; }
.oem-recognize-arrow { width: 32px; }

.oem-contact-section { padding: 56px 0; }
.oem-contact-section-inner { width: 100%; max-width: none; margin: 0; }
.oem-contact-card { --desktop-gap: clamp(12px, 2vw, 24px); --desktop-left-space: clamp(120px, 12vw, 280px);
    display: flex; flex-direction: row-reverse; align-items: flex-start; gap: var(--desktop-gap); width: calc(100% - var(--desktop-left-space)); margin-left: var(--desktop-left-space); box-sizing: border-box; }
.oem-contact-col-left, .oem-contact-col-right { display: flex; flex-direction: column; }
.oem-contact-col-left { flex: 0 0 calc((100% - var(--desktop-gap)) * 0.4); max-width: calc((100% - var(--desktop-gap)) * 0.4); gap: 18px; margin-top: 5em; align-items: flex-end; }
.oem-contact-col-right { flex: 0 0 calc((100% - var(--desktop-gap)) * 0.6); max-width: calc((100% - var(--desktop-gap)) * 0.6); gap: 20px; margin-left: auto; }
.oem-contact-card-image { order: initial; width: 100%; margin-right: 0; display: flex; justify-content: flex-end; }
.oem-contact-card-left { order: initial; width: 100%; margin-top: 0; gap: 14px; }
.oem-contact-list-info { order: initial; width: 100%; }
.oem-contact-card-left, .oem-contact-list-info { width: min(100%, 460px); margin-left: auto; }
.oem-contact-card-brief { order: initial; width: 100%; margin-top: 0; gap: 0; }
.oem-contact-divider { display: none; }
.oem-contact-section-img { width: 100%; max-width: none; max-height: 520px; object-fit: contain; object-position: right top; }
.oem-contact-page-title { margin-top: 6px; }
.oem-contact-page-desc { max-width: 460px; }
.oem-contact-list-subtitle { max-width: 460px; }
.oem-contact-list-brief { max-width: 560px; margin-left: 40%; margin-right: 10px; }
.oem-contact-card--no-list .oem-contact-col-left { flex: 0 0 calc((100% - var(--desktop-gap)) * 0.3); max-width: calc((100% - var(--desktop-gap)) * 0.3); }

.esg-banner ul > li { width: 17vmin; height: 17vmin; }
.esg-banner ul > li .bg-flex-content h2,.esg-banner ul > li .bg-flex-content p { font-size: 1.5vmin; }
.esg-banner ul > li .bg-flex-content h2 span { font-size: 3.2vmin; }
#stake .list-wrapper .list-item { flex-basis: 50%; margin: 2em 0; }
#stake .list-wrapper .list-item .list-icon { margin: 0 0.5em; }
#stake .list-wrapper .list-item .list-cont { flex-basis: 73%; }}


/** subscribe 20230706 will **/
#subscribe-content{
    padding:0  10px;
}
.mb-3{
    margin-bottom: 1.5rem !important; 
}
.text-center{
    text-align: center;
}
#subscribe {
    max-width:100%;
}

#subscribe .form-control{
    margin-bottom:20px;
    display: flex;
    /* position: relative; */
}

#subscribe .form-control > label{
    min-width:100px;
    display: flex;
    align-items: center;
}
label.require::before{
    content: "* ";
    color:red;
}
#subscribe .form-control input[type='text'],
#subscribe .form-control input[type='email'], 
#subscribe .form-control input[type='number'], 
#subscribe .form-control input[type='file'], 
#subscribe .form-control input[type='textarea'],
#subscribe .form-control select{
    border:#0172E5 solid 1px;
    border-radius: 5px;
    width: calc(100% - 100px);
    height:44px;
    padding-left:10px;
}
#subscribe .form-control input::placeholder{
    color:#bbb;
}
#subscribe .form-control input[type='checkbox']{
    display: none;
}
#subscribe .form-control input[type='checkbox'] + span {
    position: relative;
    padding-left: 30px;
    cursor: pointer;
}
#subscribe .form-control input[type="checkbox"] + span:before {
    content: '';
    position: absolute;
    left: 0;
    top: -15px;
    width: 20px;
    height: 20px;
    border: 1px solid #0172E5;
    background: #fff;
    border-radius: 5px;;
}
#subscribe .form-control input[type="checkbox"]:checked + span:after {
    content: '\2714';
    position: absolute;
    left: 5px;
    top: -16px;
    border-radius: 5px;
    color:#0172E5;
}

.form-control .check-group{
    display: flex;
    flex-wrap: wrap;
}
.form-control .check-group > div{
    display: flex;
    align-items: baseline;
}
.form-control .check-group label{
    margin-right:30px;
}

select.form-select {
    appearance: none; /* 隱藏原生的箭頭 */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="23" height="14" fill="%230172E5" viewBox="0 0 23 14"><path d="m0 2.8l2.8-2.8 11.2 11.2-2.8 2.8z"/><path d="m11.8 14l-2.8-2.8 11.2-11.2 2.8 2.8z"/></svg>');
    background-position: right 10px center; /* 調整背景位置 */
    background-repeat: no-repeat;
    padding-right: 30px; /* 增加右邊的 padding 來容納箭頭 */
}

select.form-select:focus-visible {
    border: 1px solid #0172E5;
    outline: none;
}
p.cancelNotify{
    padding-left:100px;
    color:red;
}
p.cancelNotify::before{
    content: "* ";
}
.btn-subscribe{
    margin: .25rem .125rem;
    color:#fff;
    background-color: #0172E5;
    border: none;
    outline: none;
    padding: .5rem 2rem;
}
.btn-subscribe:hover{
    background-color: #0066cc;
}
.btn-subscribe:active{
    background-color: #025ab3;
}

/** dialog 20230712 will **/
.d-none{
    display:none;
}
.dialog-box {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
}
.dialog-info{
    position:fixed;
    max-width:75%;
    width:400px;
    padding:1.5rem;
    top:50%;
    left:50%;
    transform: translateX(-50%) translateY(-50%);
    background-color: #fff;
    box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.5);
    border-radius: 20px;
}
.dialog-content{
    margin-bottom: 15px;
}
.dialog-btn{
    text-align: center;
}
.dialog-btn .btn{
    width:40%;
    margin: 5px 10px;
    border-radius: 10px;
    padding:.25rem 1rem;
    
}
.btn-ok{
    border: solid 2px #0172E5;
    background-color: #0172E5;
    color:#fff;
}
.btn-ok:hover{
    background-color: #0068cf;
}
.btn-no{
    border: solid 2px #E81F76;
    background-color: #E81F76;
    color:#fff;
}
.btn-no:hover{
    background-color: #c41b64;
}

.faq-section {
  position: relative;
  padding: 80px 60px;
  background: #f5f5f5;
  overflow: hidden;
}

/* BIG BACKGROUND TEXT */
.faq-bg-text {
 font-family: Montserrat;
  position: absolute;
  bottom: 10px;
  right: 40px;
  font-size: 180px;
  font-weight: 800;
  color: #2f4ea2;
  opacity: 0.15;
 z-index: 999;
  pointer-events: none;
}

/* MAIN LAYOUT */
.faq-container {
  display: flex;
  align-items: center;
  gap: 60px;
  position: relative;
  z-index: 3;
}

/* LEFT IMAGE */
.faq-image img {
  width: 380px;
  border-radius: 8px;
  bottom: 0px;
  display: block;
}

/* RIGHT CONTENT */
.faq-content {
  flex: 1;
}

.faq-content h3 {
  font-family: Montserrat;
  color: #2f4ea2;
  margin-bottom: 20px;
}

/* FAQ LIST */
.faq-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.faq-list>li {
 font-family: Montserrat;
  padding: 12px 0;
  border-bottom: 1px solid #ccc;
  cursor: pointer;
  transition: color 0.2s;
}

.faq-list>li:hover {
  color: #2f4ea2;
}

@media (max-width: 768px) {
  .faq-container {
    flex-direction: column;
  }

  .faq-image img {
    width: 100%;
  }

  .faq-bg-text {
    font-size: 100px;
    left: 20px;
  }
}
.answer {
  display: none;
  font-size: 14px;
  color: #666;
  margin-top: 5px;
}

/* #about_tyce-head { padding: 1em 0; background-repeat: no-repeat; background-size: cover; }
#about_tyce-head h1 { color: #0172E5; }
#about_tyce { justify-content: center; }

#about_tyce .cert-item { background-color:  #ffffff;width: 100%; display: flex; align-items: center; flex-direction: column; gap: 24px; margin-bottom: 40px; text-align: left; } 
#about_tyce .cert-img { display: block; width: 100%; height: auto; }
#about_tyce .cert-img img { display: block; width: 100%; height: auto; }
#about_tyce .cert-content { flex: 1; width: 100%; }
#about_tyce .cert-item .cert-content h2 {font-family: Montserrat; color: #0172E5; font-weight: 700; margin: 1rem 2rem; font-size: 40px;}
#about_tyce .cert-item .cert-content h3,#about_tyce .cert-item .cert-content p, #about_tyce .cert-item .cert-content .stats { font-family: Montserrat; font-size: 20px; color: #000;  margin: 0.3rem 2rem; }
#about_tyce .cert-item h3 { color: #0172E5; }
#about_tyce .cert-item .cert-item p { color:  #000; font-size: 20px;font-family: Montserrat;}

#about_tyce .cert-img { display: block; width: 45%; height: auto; }
#about_tyce .cert-img img { display: block; height: auto; }
#about_tyce .cert-item { flex-direction: row; flex-wrap: nowrap; }
#about_tyce .cert-item:nth-child(odd) { flex-direction: row-reverse; display: flex;  }

#about_tyce .contents h2 {font-family: Montserrat; color:  #0172E5; font-weight: 600; margin: 1rem 2rem; font-size: xx-large; }
#about_tyce .contents h3 { font-family: Montserrat; color:  #000; ;  margin: 0.3rem 2rem; }

.stats {
  display: flex;
  gap: 40px;
  padding-top: 15px;
  margin-bottom: 30px;
}

.stats span {
  font-size: 20px;
  font-weight: 500;
  color: #000;
}

.stats strong {
  font-size: 40px;
  font-weight: 400;
  color: #000;
}
@media (max-width: 1024px) {
  .cert-item {
    flex-direction: column !important;
  }

  .cert-content,
  .cert-img {
    width: 100%;
  }
  .cert-img img { display: block; width: 100%; height: auto; }
} */
/* =============================
   ABOUT TYCE - DESKTOP
   ============================= */

#about-tyce-wrapper {
    margin: 0 40px;
}

#about_tyce {
    margin: 0;
    padding: 0;
    list-style: none;
}


/* EACH ROW */
#about_tyce .cert-item {
    width: 100%;

    display: flex;
    flex-direction: row;
    align-items: center;

    gap: 55px;

    margin-bottom: 45px;
    background: #fff;

    box-sizing: border-box;
}


/* First row: text left / image right */
#about_tyce .cert-item:nth-child(odd) {
    flex-direction: row-reverse;
}


/* =============================
   IMAGE
   ============================= */

#about_tyce .cert-img {
    flex: 0 0 45%;
    width: 45%;

    min-width: 0;
}

#about_tyce .cert-img img {
    display: block;

    width: 100%;
    height: auto;

    border-radius: 4px;
}


/* VIDEO IF USED */
#about_tyce .cert-img video {
    display: block;

    width: 100%;
    height: auto;
}


/* =============================
   CONTENT
   ============================= */

#about_tyce .cert-content {
    /*
     * Let content use whatever space remains
     * instead of forcing another 55%.
     */
    flex: 1 1 0;
    width: auto;
    min-width: 0;

    text-align: left;

    padding: 0 40px;

    box-sizing: border-box;
}


/* TITLE */
#about_tyce .cert-content h2 {
    margin: 0 0 18px;

    font-family: Montserrat, sans-serif;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.2;

    text-align: left;

    color: #0172E5;
}


/* DESCRIPTION */
#about_tyce .cert-content .description p {
    margin: 0 0 18px;

    font-family: Montserrat, sans-serif;
    font-size: 20px;
    line-height: 1.6;

    text-align: left;

    color: #000;
}


/* =============================
   STATS
   ============================= */

#about_tyce .stats {
    display: flex;
    flex-wrap: nowrap;

    justify-content: flex-start;
    align-items: flex-start;

    gap: 30px;

    margin: 25px 0 0;
    padding: 0;
}

#about_tyce .stats > div {
    display: flex;
    flex-direction: column;

    flex: 1 1 0;
    min-width: 0;
}

#about_tyce .stats span {
    font-family: Montserrat, sans-serif;

    font-size: 16px;
    font-weight: 500;

    white-space: nowrap;
}

#about_tyce .stats strong {
    font-family: Montserrat, sans-serif;

    font-size: 36px;
    font-weight: 400;

    white-space: nowrap;
}


/* Optional image inside stats */
#about_tyce .stats > img {
    width: 120px;
    height: auto;

    object-fit: contain;

    flex-shrink: 0;
}

#about_tyce .cert-button {
    margin-top: 30px; 
    display: flex;
    justify-content: flex-end;
}
/* ==========================================================
   TABLET
   Keep image + content beside each other,
   but reduce spacing/font sizes.
   ========================================================== */

@media (min-width: 769px) and (max-width: 1200px) {

    #about-tyce-wrapper {
        margin: 0 25px;
    }

    #about_tyce .cert-item {
        gap: 25px;
        margin-bottom: 40px;
    }


    /* Slightly smaller image */
    #about_tyce .cert-img {
        flex: 0 0 48%;
        width: 48%;
    }


    /* Reduce wasted horizontal padding */
    #about_tyce .cert-content {
        flex: 1 1 0;

        width: auto;
        min-width: 0;

        padding: 0 10px;
    }


    #about_tyce .cert-content h2 {
        font-size: clamp(27px, 3.2vw, 36px);

        margin-bottom: 14px;
    }


    #about_tyce .cert-content .description p {
        font-size: clamp(15px, 1.65vw, 18px);

        line-height: 1.55;
        margin-bottom: 15px;
    }


    /* Stats */
    #about_tyce .stats {
        gap: 15px;

        margin-top: 20px;
    }

    #about_tyce .stats span {
        font-size: 13px;

        white-space: normal;
    }

    #about_tyce .stats strong {
        font-size: clamp(25px, 3vw, 32px);
    }

}


/* ==========================================================
   MOBILE
   Image first, text underneath
   ========================================================== */

@media (max-width: 768px) {

    #about-tyce-wrapper {
        margin: 0;
    }


    #about_tyce {
        width: 100%;
    }


    #about_tyce .cert-item,
    #about_tyce .cert-item:nth-child(odd) {

        display: flex;
        flex-direction: column;

        width: 100%;

        gap: 0;

        margin-bottom: 30px;
    }


    /* IMAGE FIRST */
    #about_tyce .cert-img {
        flex: none;

        width: 100%;
    }

    #about_tyce .cert-img img {
        display: block;

        width: 100%;
        height: auto;
    }


    /* CONTENT BELOW IMAGE */
    #about_tyce .cert-content {
        width: 100%;

        flex: none;

        padding: 20px 25px 25px;

        box-sizing: border-box;
    }


    #about_tyce .cert-content h2 {
        margin: 0 0 12px;

        font-size: 22px;
        line-height: 1.2;
    }


    #about_tyce .cert-content .description p {
        margin: 0 0 15px;

        font-size: 15px;
        line-height: 1.4;
    }


    /* Stats */
    #about_tyce .stats {
        display: grid;

        grid-template-columns: repeat(3, 1fr);

        gap: 8px;

        margin-top: 18px;
    }


    #about_tyce .stats span {
        font-size: 10px;

        white-space: normal;
    }


    #about_tyce .stats strong {
        font-size: 18px;

        white-space: nowrap;
    }

}
.tecdoc-text {
    font-family: Montserrat, sans-serif;
    font-size: 20px;
    color: #000;
}
@media (max-width: 768px) {
    .tecdoc-text p {
        font-size: 13px;
    }
}
.our-values {
  /* padding: 80px 80px; */
  padding-left :156px;
  padding-right:100px;
}

/* TITLE */
.our-values h2 {
  font-size: 40px;
  margin-bottom: 10px;
  color: #0870E3;
  font-family: Montserrat;
  text-align: left;
  margin-left: 0;
}
.our-values header {
  text-align: left;
}

/* GRID: 2x2 layout */
.values-grid {
  display: grid;
  align-items: center;
  justify-items:center;
  grid-template-columns: repeat(2, 1fr);
  gap: 60px 80px; /* row gap / column gap */
}

/* EACH ITEM */
.value-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

/* ICON */
.value-icon img {
  width: 100px;
  height: 100px;
  object-fit: contain;
}

/* TEXT */
.value-text h3 {
  font-size: 18px;
  color: #1f3c88;
  margin-bottom: 10px;
}

.value-text p {
  font-size: 20px;
  font-family: Montserrat;
  color: #000;
 font-weight: 500;
  line-height: 1.6;
}
@media (max-width: 920px) {
  
    .our-values {
        width: 100%;

        padding: 0 22px;

        box-sizing: border-box;
    }

    /* Vision / Commitment / Values */
    .our-values h2 {
        margin: 0 0 8px 0;

        font-size: 24px;
        line-height: 1.2;

        text-align: center;
    }

    .our-values header {
        text-align: center;
    }

    /* text below Vision / Commitment / Values */
    .our-values > div > .value-text {
        text-align: center;
    }

    .our-values > div > .value-text p {
        margin: 0 auto 28px auto;

        max-width: 340px;

        font-size: 14px;
        line-height: 1.35;

        text-align: center;
    }


    /* values become one column */
    .values-grid {
        display: grid;

        grid-template-columns: 1fr;

        gap: 26px;

        width: 100%;

        margin-top: 25px;
    }


    /* icon left, text right */
    .value-item {
        display: grid;

        grid-template-columns: 82px 1fr;

        align-items: start;

        gap: 18px;

        width: 100%;
    }


    /* icon */
    .value-icon {
        width: 82px;

        display: flex;
        align-items: flex-start;
        justify-content: center;
    }

    .value-icon img {
        width: 70px;
        height: 70px;

        object-fit: contain;
    }


    /* value title */
    .value-text h3 {
        margin: 0 0 7px 0;

        font-size: 17px;
        line-height: 1.2;

        color: #00579c;
    }


    /* value description */
    .value-item .value-text p {
        margin: 0;

        font-size: 13px;
        font-weight: 400;
        line-height: 1.35;

        text-align: left;
    }
}

/* about us- locations */
.locations-section {
  padding: 10px 80px;
  /* padding: 2em 0; */
  background: #f5f5f5;
}

/* HEADER */
.locations-section .locations-header .subtitle {
  color: #999;
  margin-bottom: 10px;
}

.locations-section .locations-header h2 {
  /* font-size: 64px; */
  font-size: clamp(28px, 3.33vw, 64px);
  color: #1f3c88;
  font-family: Montserrat;
  margin-bottom: 30px;
}

/* TABS */
.locations-section .location-tabs {
  display: flex;
  gap: 20px;
  margin-bottom: 40px;
}

.locations-section .tab-btn {
  padding: 10px 24px;
  border: 1px solid #1f3c88;
  border-radius: 20px;
  background: transparent;
  color: #1f3c88;
  cursor: pointer;
  transition: all 0.3s;
}

.locations-section .tab-btn.active,
.locations-section .tab-btn:hover {
  background: #1f3c88;
  color: #fff;
}

/* IMAGE AREA */
.locations-section .location-images {
 position: relative;
}

.locations-section .location-img {
  display: flex;
  justify-content: center;
}


.locations-section .location-img img {
  width: 100%;
  border-radius: 12px;
  display: block;
}

/* .location-img {
  opacity: 0;
  transition: opacity 0.4s ease;
  position: absolute;
  width: 100%;
}

.location-img.active {
  opacity: 1;
  position: relative;
} */

.locations-section .img-wrapper {
  position: relative;
  overflow: hidden;
  width: 80%;
  border-radius: 12px;
}

/* IMAGE */
.locations-section .img-wrapper img {
  width: 100%;
  display: block;
}

/* OVERLAY (hidden by default) */
.locations-section .img-overlay {
   position: absolute;
  width: 40%;
  height: 100%;
  top: 0;
  left: 0;

  background: rgba(0, 62, 107, 0.80);
  color: #fff;

  display: flex;
  flex-direction: column;

  padding: 40px;
  box-sizing: border-box;
  
}

/* TEXT */
.locations-section .overlay-button {
  margin-top: auto;
}
.locations-section .overlay-content h3 {
  padding: 0;
  font-family: Montserrat;
  font-size: 40px;
  font-weight: 700; 
}
.locations-section .overlay-content p {
  padding: 0;
  font-family: Montserrat;
  font-size: 22px;
  font-weight: 400; 
  line-height: 2.5;
}

@media (max-width: 1400px){
  
  .locations-section {
    padding: 20px 20px;
  }

 
  .locations-section .img-overlay {
  position: absolute;
  width: 40%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 62, 107, 0.80);
  color: #fff;

  display: flex;
  justify-content: flex-start;  
  align-items: flex-start;        
  text-align: left;
  padding: 20px;     
  
}
  .locations-section .overlay-content h3 {
  padding: 0;
  font-family: Montserrat;
  font-size: 23px ;
  font-weight: 700; 
}
.locations-section .overlay-content p {
  padding: 0;
  font-family: Montserrat;
  font-size: 18px;
  font-weight: 400; 
}
}
@media (max-width: 920px) {

  .locations-section {
    padding: 20px 10px;
  }

  .locations-section .location-img {
    display: flex;
    justify-content: center;
  }

  .locations-section .img-wrapper {
    width: 100%;
    border-radius: 10px;
    overflow: hidden;

    display: flex;
    flex-direction: column;
  }

  .locations-section .img-wrapper img {
    width: 100%;
    height: auto;
    display: block;

    border-radius: 0;
  }

  .locations-section .img-overlay {
    position: static;

    width: 100%;
    height: auto;

    background: rgba(0, 62, 107, 0.80);
    color: #fff;

    display: flex;
    flex-direction: column;

    padding: 18px 20px 40px;
    box-sizing: border-box;
  }

  .locations-section .overlay-content h3 {
    margin: 0 0 15px;
    padding: 0;

    font-size: 18px;
    font-weight: 700;
  }

  .locations-section .overlay-content p {
    margin: 0;
    padding: 0;

    font-size: 13px;
    line-height: 1.35;
  }

  .locations-section .overlay-button {
    margin-top: 20px;
  }
}


/* contact us */
#contact-form-title {
    text-align: center;
    margin-bottom: 40px;
}

#contact-form-title h3 {
    margin-bottom: 8px;
}

#contact-form-title h1 {
    margin-top: 0;
}


/* =========================
   FORM LAYOUT
   ========================= */

.contact-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 50px;

    width: 90%;
    max-width: 1200px;

    margin: 0 auto;
}


/* Override old sidebar/grid sizing */
.contact-form > .sidebar {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}


/* =========================
   FORM FIELDS
   ========================= */

.contact-form .form-group {
    width: 100%;
    margin-bottom: 22px;
}

.contact-form label {
    display: block;

    margin-bottom: 8px;

    font-size: 15px;
    font-weight: 500;
    color: #333;
}


.contact-form input,
.contact-form textarea,
.contact-form select {
    display: block;

    width: 100%;
    max-width: 100%;

    box-sizing: border-box;

    padding: 12px 14px;

    border: 1px solid #d1d5db;
    border-radius: 4px;

    font-family: Montserrat, sans-serif;
    font-size: 15px;

    background: #fff;
}


.contact-form textarea {
    min-height: 180px;
    resize: vertical;
}


/* Select wrappers shouldn't restrict width */
.contact-form .controls,
.contact-form .select-wrapper {
    width: 100%;
}


/* =========================
   CAPTCHA
   ========================= */

.contact-form .captcha {
    margin-bottom: 25px;
}

.contact-form .captcha .controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.contact-form .captcha input {
    flex: 1;
    min-width: 0;
}

.contact-form .captcha img {
    flex: 0 0 auto;
    width: 88px;
    height: 44px;
}


/* =========================
   BUTTON
   ========================= */

.contact-form .submit-btn {
    display: inline-block;

    padding: 12px 30px;

    border: 0;
    border-radius: 4px;

    cursor: pointer;
}


/* =========================
   TABLET / MOBILE
   ========================= */

@media (max-width: 900px) {

    .contact-form {
        grid-template-columns: 1fr;
        gap: 0;

        width: 90%;
        max-width: 650px;
    }

}


/* =========================
   MOBILE
   ========================= */

@media (max-width: 600px) {

    #contact-form-title {
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
        margin-bottom: 30px;
    }

    #contact-form-title h3 {
        font-size: 18px;
    }

    #contact-form-title h1 {
        font-size: 32px;
    }


    .contact-form {
        display: block;

        width: 100%;
        max-width: none;

        padding: 0 20px;

        box-sizing: border-box;
    }


    /* Important: kill the old grid/sidebar rules */
    .contact-form > .sidebar,
    .contact-form .grid,
    .contact-form .g-6-12 {
        display: block;
        float: none;

        width: 100% !important;
        max-width: none !important;

        margin: 0;
        padding: 0;
    }


    .contact-form .form-group {
        margin-bottom: 18px;
    }


    .contact-form input,
    .contact-form textarea,
    .contact-form select {
        width: 100%;
        font-size: 16px;
    }


    .contact-form textarea {
        min-height: 150px;
    }


    /* CAPTCHA stays nicely in one row */
    .contact-form .captcha .controls {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
    }


    .contact-form .captcha img {
        width: 88px;
        height: 44px;
    }


    .contact-form .submit-btn {
        width: 100%;
        margin-top: 5px;
    }

}
/* Produt grid at landing */
/* =============================
   PRODUCT RANGE GRID
   ============================= */
.product-range-wrapper {
    width: 100%;

    padding: 0 40px;

    box-sizing: border-box;
}


/* Heading */
.product-range-header p {
    margin: 0 0 25px;

    color: #3271DF;

    font-family: Montserrat, sans-serif;
    font-size: 32px;
    font-weight: 700;

    line-height: 1.2;
}


/* Footer */
.product-range-footer {
    text-align: right;

    padding: 40px 60px;
}
.products-grid-m {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;

    margin: 0;
    padding: 0;

    list-style: none;
}


/* Card */
.products-grid-m li {
    width: 100%;

    background: #F1F1F1;
    border-radius: 4px;

    box-sizing: border-box;

    transition: background 0.3s ease;
}


/* Full clickable area */
.products-grid-m .card-link {
    display: block;
    width: 100%;
    height: 100%;

    text-decoration: none;
    color: inherit;
}


/* Inner card */
.products-grid-m .thumb {
    display: flex;
    flex-direction: column;

    width: 100%;
    height: 265px;

    padding: 18px;

    box-sizing: border-box;
}


/* Product title */
.products-grid-m .thumb > div {
    flex-shrink: 0;

    text-align: center;

    margin-bottom: 10px;
}


/* Product image */
.products-grid-m img {
    display: block;

    width: 100%;
    height: 100%;

    min-height: 0;

    object-fit: contain;
}


/* Hover */
.products-grid-m li:hover {
    background: #ffffff;
}


/* =============================
   TABLET
   ============================= */

@media (max-width: 1024px) {
   .product-range-wrapper {
        padding: 0 25px;
    }


    .product-range-header p {
        font-size: 26px;

        margin-bottom: 20px;
    }   
    
    .product-range-footer {
        padding: 30px 20px;
        text-align: center;
    }

    .products-grid-m {
        grid-template-columns: repeat(3, 1fr);

        gap: 20px;
    }

    .products-grid-m .thumb {
        height: 300px;

        padding: 18px;
    }

    .products-grid-m .thumb > div {
        font-size: 20px !important;
    }
}


/* =============================
   MOBILE
   ============================= */

@media (max-width: 600px) {
    .product-range-wrapper {
        padding: 0 12px;
    }


    .product-range-header p {
        font-size: 21px;

        margin-bottom: 15px;
    }

     .product-range-footer {
        padding: 25px 5px;

        text-align: center;
    }

    .product-range-footer h3 {
        font-size: 17px;
    }
    .products-grid-m {
        grid-template-columns: repeat(2, 1fr);

        gap: 10px;
    }

    .products-grid-m .thumb {
        height: 190px;

        padding: 10px;
    }

    .products-grid-m .thumb > div {
        font-size: 15px !important;

        margin-bottom: 6px;
    }
}

/* Landing -new section */
.hero-section {
  position: relative;
  width: 100%;
  min-height: 700px;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background-size: contain;
  background-position: right bottom ;
  background-repeat: no-repeat;
  z-index: 2;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background-position: left center ;
   /* background:  #fff; */

  background:   linear-gradient(
    to bottom,
    rgb(2, 8, 22) 0%,
    rgb(4, 11, 30) 60%,
    rgb(28, 40, 78) 100%
  );

  z-index: 1;

}
.hero-content {
  position: relative;
  z-index: 3;

  max-width: 1000px;
  padding: 100px 80px;

  color: #fff;
}
.hero-content h1 {
  font-size: 40px;
  font-weight: 700;
  color: #4da3ff;
  margin-bottom: 20px;
}

.hero-content p {
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 20px;
  color: #e5e7eb;
}


#hrm-benefits  {
    display:flex;
    align-items:center;
    gap:50px;
    padding:80px 0;
}

#hrm-benefits .benefits-title {
    writing-mode: vertical-rl;
    transform: rotate(180deg);

    font-size:28px;
    font-weight:700;
    color:#3271DF;

    flex-shrink:0;
}

#hrm-benefits .benefits-grid {
    flex:1;

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:24px;
}

#hrm-benefits .benefit-card {
    overflow:hidden;
    border-radius:8px;
    background:#2f5aa8;
}

#hrm-benefits .benefit-image {
    aspect-ratio:16/9;
    overflow:hidden;
}

#hrm-benefits .benefit-image img {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

#hrm-benefits .benefit-caption {
    background:#2f5aa8;
    color:#fff;
    text-align:center;
    padding:20px;
    font-size:24px;
    font-weight:600;
}

@media (max-width: 767px){

   
    #hrm-benefits{
        display:block;
        padding:50px 20px;
    }

    #hrm-benefits .benefits-title{
        writing-mode:horizontal-tb;
        transform:none;

        text-align:center;

        font-size:24px;
        margin-bottom:30px;
    }

    #hrm-benefits .benefits-grid{
        grid-template-columns:1fr;
        gap:24px;
    }

    #hrm-benefits .benefit-card{
        border-radius:12px;
        overflow:hidden;
    }

    #hrm-benefits .benefit-image{
        aspect-ratio:4/3;
    }

    #hrm-benefits .benefit-caption{
        font-size:16px;
        padding:14px;
    }
}
.quality-intro {
    width: 90%;
    max-width: 1250px;
    margin: 0 auto;
    text-align: center;
}
.quality-list {
    display: grid;

    grid-template-columns: repeat(3, minmax(0, 370px));

    /* fixed gap between cards */
    gap: 80px;

    /* center the whole row */
    justify-content: center;

    /* use only part of the screen width */
    width: 85%;
    /* max-width: 1800px; */

    margin: 40px auto;

    box-sizing: border-box;
}


/* Card keeps exactly the same ratio as your image */
.quality-item {
    position: relative;
    width: 100%;
    max-width: 370px;
    aspect-ratio: 469 / 720;
    overflow: hidden;
}


/* Image always completely fills the card */
.quality-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* =============================
   TITLE
   ============================= */

.quality-title {
    position: absolute;

    /* Position relative to image */
    top: 9%;
    left: 4.5%;
    right: 4.5%;

    z-index: 2;
}


.quality-title h3 {
    display: inline-block;

    margin: 0;

    color: #fff;

    font-size: 26px;
    line-height: 1.25;
    font-weight: 600;

    /* underline like your example */
    border-bottom: 1px solid #fff;
    padding-bottom: 3px;
}


/* =============================
   DESCRIPTION
   ============================= */

.quality-description {
    position: absolute;

    /* Around 66-68% down the image */
    top: 66%;
    left: 4.5%;
    right: 4.5%;

    z-index: 2;

    color: #fff;
}


.quality-divider {
    display: block;

    width: 115px;
    height: 1px;

    margin: 0 0 10px 0;

    background: #fff;
}


.quality-description p {
    margin: 0;

    color: #fff;

    font-size: 15px;
    line-height: 1.25;
}

@media (max-width: 900px) {

    .quality-list {
        grid-template-columns: 1fr;

        max-width: 469px;

        margin: 40px auto;
        padding: 0 25px;

        box-sizing: border-box;
    }

}


/* Mobile */
@media (max-width: 600px) {

    .quality-list {
        grid-template-columns: 1fr;

        width: 100%;
        max-width: none;

        margin: 30px 0;
        padding: 0 20px;

        box-sizing: border-box;
    }


    .quality-title h3 {
        font-size: 20px;
    }


    .quality-description p {
        font-size: 13px;
    }


    .quality-divider {
        width: 90px;
    }
}

/* Landing buttons floating on the video */
.landing-video-wrap {
    position: relative;
    width: 100%;
}

.landing-video {
    display: block;
    width: 100%;
    height: 500px;
    object-fit: cover;
}

.landing-video-buttons {
    position: absolute;
    left: 7%;
    bottom: 17%;

    display: flex;
    flex-direction: column;
    gap: 10px;

    z-index: 2;
}

.landing-video-btn {
    display: block;
    width: 220px;
    padding: 10px 15px;

    background: rgba(35, 35, 35, 0.85);
    color: #fff;

    text-align: center;
    text-decoration: none;
    font-size: 20 px;
    font-family: "Open Sans"; ;
    box-sizing: border-box;
}

.landing-video-btn:hover {
    background: rgba(27, 27, 27, 0.85);
    color: #fff;
}

@media (max-width: 767px) {

    .landing-video {
        height: 320px;
        width: 100%;
        object-fit: cover;
    }

    .landing-video-buttons {
        position: absolute;
        left: 20px;
        bottom: 20px;
        right: auto;

        width: 180px;

        display: flex;
        flex-direction: column;
        gap: 8px;

        z-index: 10;
    }

    .landing-video-btn {
        display: block;

        width: 100%;
        box-sizing: border-box;

        padding: 9px 12px;

        font-size: 11px;
        line-height: 1.3;

        text-align: center;
        white-space: nowrap;

        background: rgba(35, 35, 35, 0.85);
        color: #fff;

        text-decoration: none;
    }
}


.tycebackground {
    position: relative;

    width: 100%;
    aspect-ratio: 1920 / 654;

    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    color: #fff;
}


/* content area */
.tycebackground .backgroundcover {
    width: 100%;
    height: 100%;

    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 6% 8%;
}


/* TITLE */
.tycebackground .backgroundcover header {
    display: block;
    max-width: 700px;
}

.tycebackground .backgroundcover h1 {
    margin: 0 0 20px;

    max-width: 700px;

    font-family: Montserrat;
    font-size: clamp(28px, 3.33vw, 64px);
    line-height: 1.08;

    color: #fff;
}


/* DESCRIPTION */
.tycebackground .backgroundcover > div {
    max-width: 550px;

    line-height: 1.5;
}

.tycebackground .backgroundcover p {
    margin: 0;

    max-width: 550px;

    font-family: Montserrat;
    font-size: clamp(15px, 1.1vw, 21px);
    line-height: 1.5;

    color: #fff;
}


/* =========================
   MOBILE
   ========================= */

@media (max-width: 700px) {

    .tycebackground {
        aspect-ratio: auto;

        min-height: 320px;

        background-position: center center;
    }

    .tycebackground .backgroundcover {
        height: auto;
        min-height: 320px;

        justify-content: center;

        padding: 35px 32px;
    }

    .tycebackground .backgroundcover header {
        max-width: 100%;
    }

    .tycebackground .backgroundcover h1 {
        max-width: 100%;

        margin-bottom: 18px;

        font-size: clamp(28px, 8vw, 40px);
        line-height: 1.08;
    }

    .tycebackground .backgroundcover > div {
        max-width: 100%;
    }

    .tycebackground .backgroundcover p {
        max-width: 100%;

        font-size: 16px;
        line-height: 1.45;
    }
}

/* Landing mid banner text */
.intro-text-section {
    width: 100%;
    padding: 30px 20px;
    box-sizing: border-box;
}

.intro-text-inner {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    text-align: center;
}

.intro-text-inner header {
    width: 100%;
    max-width: none;
}

.intro-text-inner p {
    width: 100%;
    max-width: none;
    margin: 0 auto;

    color: #3271DF;
    font-family: Montserrat;
    font-size: clamp(16px, 1.5vw, 28px);
    font-weight: 700;
    line-height: 1.5;
}

@media (max-width: 768px) {

    .intro-text-section {
        padding: 25px 24px;
    }

    .intro-text-inner,
    .intro-text-inner header,
    .intro-text-inner p {
        width: 100%;
        max-width: none;
    }

    .intro-text-inner header p {
        font-size: 15px;
        line-height: 1.4;
    }
}

/* =========================================================
   TYCE LOW BANNER
   ========================================================= */

.tyce-low-banner {
    position: relative;

    width: calc(100% - 32px);
    margin: 20px auto;

    box-sizing: border-box;
}


/* =========================================================
   BANNER IMAGE - DESKTOP
   ========================================================= */

.tyce-low-banner-image {
    width: 100%;
    aspect-ratio: 1920 / 570;

    background-image: var(--desktop-banner);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    border-radius: 6px;
}


/* =========================================================
   MOBILE HEADER
   hidden on desktop
   ========================================================= */

.tyce-low-mobile-header {
    display: none;
}


/* =========================================================
   BUTTON - DESKTOP
   ========================================================= */

.tyce-low-banner-button {
     display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}
/* 
.tyce-low-banner-button .btn-customed {
    text-decoration: none; 
} */


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {

    .tyce-low-banner {
        width: calc(100% - 24px);
        margin: 16px auto;
    }

    .tyce-low-banner-button {
        right: 20px;
        bottom: 18px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .tyce-low-banner {
        width: calc(100% - 20px);
        margin: 10px auto 20px;

        position: relative;
    }


    /* Show title only on mobile */

    .tyce-low-mobile-header {
        display: block;
        margin-bottom: 12px;
    }

    .tyce-low-mobile-header span {
        display: block;

        font-family: Montserrat, sans-serif;
        font-size: 12px;
        font-weight: 400;
        line-height: 1.2;

        color: #999999;

        margin-bottom: 4px;
    }

    .tyce-low-mobile-header h2 {
        font-family: Montserrat, sans-serif;

        font-size: 20px;
        font-weight: 700;
        line-height: 1.1;

        color: #0172E5;

        margin: 0;
        padding: 0;
    }


    /* Change to mobile banner */

    .tyce-low-banner-image {
        background-image: var(--mobile-banner);

        /* Change this to match your mobile image ratio */
        aspect-ratio: 16 / 4;

        background-size: cover;
        background-position: center center;

        border-radius: 5px;
    }


    /* Button becomes normal content below image */

    .tyce-low-banner-button {
        position: static;

        display: flex;
        justify-content: flex-end;

        margin-top: 10px;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .tyce-low-banner {
        width: calc(100% - 16px);
        margin: 8px auto 20px;
    }

    .tyce-low-mobile-header {
        margin-bottom: 12px;
    }

    .tyce-low-mobile-header span {
        font-size: 11px;
    }

    .tyce-low-mobile-header h2 {
        font-size: 20px;
    }

    .tyce-low-banner-button {
        margin-top: 10px;
    }
}