/* =============================================================
   MERGED STYLESHEET — styles_merged.css
   Merged from: main CSS (1) + extended CSS (2)
   Covers: Desktop, Laptop, Tablet, Mobile
   OS Support: Windows, macOS, Android, iOS
   ============================================================= */

/* ============================================================
   SECTION 1: RESET & BASE
   ============================================================ */
*:focus { outline: none; }

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote,
dl, dt, dd, ul, ol, li, pre, form, fieldset, legend,
button, input, textarea, th, td {
    padding: 0;
    margin: 0;
}

/* ============================================================
   SECTION 2: FONT FACES
   ============================================================ */
@font-face {
    font-family: "SourceHanSansCN-Normal";
    src: url("fonts/SourceHanSansCN-Normal/SourceHanSansCN-Normal.woff2") format("woff2"),
         url("fonts/SourceHanSansCN-Normal/SourceHanSansCN-Normal.woff") format("woff"),
         url("fonts/SourceHanSansCN-Normal/SourceHanSansCN-Normal.ttf") format("truetype"),
         url("fonts/SourceHanSansCN-Normal/SourceHanSansCN-Normal.eot") format("embedded-opentype"),
         url("fonts/SourceHanSansCN-Normal/SourceHanSansCN-Normal.svg") format("svg"),
         url("fonts/SourceHanSansCN-Normal/SourceHanSansCN-Normal.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: AlibabaPuHuiTi-2-45-Light;
    src: url(fonts/AlibabaPuHuiTi-2-45-Light.eot) format('embedded-opentype'),
         url(fonts/AlibabaPuHuiTi-2-45-Light.otf) format('opentype'),
         url(fonts/AlibabaPuHuiTi-2-45-Light.ttf) format('TrueType'),
         url(fonts/AlibabaPuHuiTi-2-45-Light.woff) format('woff'),
         url(fonts/AlibabaPuHuiTi-2-45-Light.woff2) format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'Alibaba PuHuiTi 2.0 55';
    src: url('fonts/AlibabaPuHuiTi_2_85_Bold.eot');
    src: url('fonts/AlibabaPuHuiTi_2_85_Bold.eot?#iefix') format('embedded-opentype'),
         url('fonts/AlibabaPuHuiTi_2_85_Bold.woff2') format('woff2'),
         url('fonts/AlibabaPuHuiTi_2_85_Bold.woff') format('woff'),
         url('fonts/AlibabaPuHuiTi_2_85_Bold.ttf') format('truetype'),
         url('fonts/AlibabaPuHuiTi_2_85_Bold.svg#AlibabaPuHuiTi_2_85_Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'bookmanoldstylebold';
    src: url('https://heveaboard.com.my/wp/hbb/public/css/bookmanoldstyle_bold.ttf') format('truetype');
    font-weight: bold;
    font-display: swap;
}

/* ============================================================
   SECTION 3: GLOBAL BASE STYLES
   ============================================================ */
html {
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

*, *::before, *::after {
    box-sizing: inherit;
}

body {
    font: 1em/1.3 "AlibabaPuHuiTi-2-45-Light", sans-serif;
    -webkit-text-size-adjust: 100% !important;
    margin: 0;
    padding: 0;
    color: #262626;
    /* Prevent horizontal overflow on mobile */
    overflow-x: hidden;
}

img {
    max-width: 100%;
    vertical-align: middle;
    border: 0;
}

button, input, select, textarea, h1, h2, h3, h4, h5, h6 {
    font-size: 1em;
    line-height: 1.3;
    font-family: "AlibabaPuHuiTi-2-45-Light", sans-serif;
}

address, cite, dfn, em, var { font-style: normal; }
code, kbd, pre, samp { font-family: courier new, courier, monospace; }
small { font-size: 0.75em; }

ul, ol {
    list-style: none;
    margin: 0;
}

body, legend { color: #262626; }

a {
    color: #262626;
    text-decoration: none;
}
a:hover {
    color: #e2bca4;
    text-decoration: none;
}
a:active { color: inherit; }

sup { vertical-align: text-top; }
sub { vertical-align: text-bottom; }
fieldset { border: 0; }

table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    word-break: break-all;
}
table th { font-weight: normal; }
table th, table td {
    font-weight: normal;
    text-align: center;
}

article, aside, details, figcaption, figure, footer,
header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    display: block;
    margin: 0;
    padding: 0;
}

/* Placeholder colors — cross-browser */
::-webkit-input-placeholder { color: #000; }
::-moz-placeholder           { color: #000; }
:-ms-input-placeholder       { color: #000; }
::placeholder                { color: #000; }

/* ============================================================
   SECTION 4: UTILITY CLASSES
   ============================================================ */
.clearfix::after {
    content: '\20';
    display: block;
    height: 0;
    clear: both;
}
.clearfix { *zoom: 1; }

button:disabled,
.disabled {
    opacity: 0.5;
    cursor: default;
}

.hi {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.daxie { text-transform: uppercase; }

.cell_mid { display: table; height: 100%; width: 100%; }
.cell_h    { height: 100%; display: table-cell; vertical-align: middle; }

.comdiv { width: 100%; overflow: hidden; margin: 0; padding: 0; }

.cc    { display: none; }
.mys   { display: none; }
.pp    { display: none; }
.hhh   { overflow: hidden; }

/* Required field indicator */
.required { color: red; }

/* Transition helpers */
.css3,
.about_1 ul li a {
    -webkit-transition-duration: 0.5s;
    -ms-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    transition-duration: 0.5s;
}

.cssimg,
.cssimgp img,
.index_4_3_left_1_bg,
.pro_1_mid_mid_left_bg,
.ser_2_mid_pic_bg,
.ser_1_right_bg {
    transition: all 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

/* ============================================================
   SECTION 5: NAVIGATION — DESKTOP HEADER (original)
   ============================================================ */
#header {
    padding: 1em 0;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 999;
    /* iOS safe-area support */
    padding-top: max(1em, env(safe-area-inset-top));
}

#header.cur {
    background-color: #fff;
    padding: 0;
    box-shadow: 0 6px 15px rgba(98, 98, 98, .1);
}

#header.cur .header_mid {
    margin-top: 0;
    margin-bottom: 0;
}

#header.cur.headroom--unpinned { top: -100%; }

.header_mid {
    display: table;
    table-layout: fixed;
    width: 100%;
    padding: 0 2.60416666666667%;
    position: relative;
}

.header_mid_left {
    width: 13.59375vw;
    display: table-cell;
    vertical-align: middle;
    position: relative;
}

.header_mid_left img:nth-child(2) { display: none; }

#header.cur .header_mid_left img:nth-child(1),
body.nybody .header_mid_left img:nth-child(1),
body.mbs .header_mid_left img:nth-child(1) { display: none; }

#header.cur .header_mid_left img:nth-child(2),
body.nybody .header_mid_left img:nth-child(2),
body.mbs .header_mid_left img:nth-child(2) { display: block; }

.header_mid_mid {
    width: 100%;
    display: table-cell;
    vertical-align: middle;
}

.header_mid_mid ul {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: flex-end;
}

.header_mid_mid ul li {
    line-height: 2.25em;
    margin-left: 3.35%;
    padding: 20px 0;
}

.header_mid_mid ul li:last-child { margin-right: 8vw; }

.header_mid_mid ul li a.biga { color: #fff; font-size: 1.125em; }

/* CSS2 override — hide first nav item */
.header_mid_mid ul li:nth-child(1) { opacity: 0; visibility: hidden; }
.header_mid_mid ul li ul li:nth-child(1) { opacity: 1; visibility: visible; }

#header.cur .header_mid_mid ul li a.biga { color: #000; }
body.nybody .header_mid_mid ul li a.biga,
body.mbs .header_mid_mid ul li a.biga { color: #000; }

.header_mid_right {
    display: table-cell;
    vertical-align: middle;
    height: 2.25em;
    width: 255px;
}

/* Drop navigation */
.drop {
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    border-top: 2px solid #c7c7c7;
    border-bottom: 1px solid #c9caca;
    background-color: #fff;
    padding: 0 2.60416666666667%;
    display: none;
    z-index: 2;
}

#header .list {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 101.63398693%;
}

dt.btn { padding-bottom: .5em; font-size: 18px; }
dt.btn a { color: #000; }

#navi .drop a { display: inline-block; vertical-align: middle; }
#navi .drop a.jumpto { font-size: 1.125em; color: #000; }

#header ul li dl {
    min-width: 12.52723312%;
    padding: 25px 1.63398693% 25px 0;
    line-height: 1.5em;
}

a#j {
    padding-right: 20px;
    color: #000;
    background-position: right center;
    background-repeat: no-repeat;
    background-image: url(../images/header/j.png);
}

#header ul li dl dd a { font-size: 1em; color: #666; }
#header ul li dl dd { margin-top: .75em; }

#header ul li dl dd a,
#navi .drop a.jumpto {
    display: inline-block;
    position: relative;
}

#header ul li dl dd a::after,
#navi .drop a.jumpto::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 1px;
    background-color: #666;
    transition: all .5s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

#header ul li dl dd a:hover::after,
#navi .drop a.jumpto:hover::after { width: 100%; }

/* Header right search/actions */
.header_mid_right_mid { position: relative; height: 2.25em; }

.header_mid_right_mid_right {
    position: absolute;
    right: 0;
    top: 0;
    width: 2.25em;
    height: 2.25em;
    text-align: center;
    border-radius: 100%;
    background-color: #ededed;
}

.header_mid_right_mid_right a {
    display: block;
    color: #000;
    line-height: 2em;
    font-size: 18px;
}

.header_mid_right_mid_left {
    position: relative;
    margin-right: 2.7em;
    background-color: #ededed;
    border-radius: 2.25em;
    padding: 0 2.3em 0 1em;
}

.header_mid_right_mid_left input.twbk {
    border: none;
    background: none;
    width: 100%;
    height: 2.25em;
    line-height: 2.25em;
}

.header_mid_right_mid_left input.tbtn {
    position: absolute;
    right: 0;
    top: 0;
    width: 2.25em;
    height: 100%;
    background: none;
    border: none;
    cursor: pointer;
    background-image: url(../images/header/img11.png);
    background-position: center;
    background-repeat: no-repeat;
    z-index: 10;
}

.header_mid_right ul li {
    position: relative;
    margin-left: 10px;
    float: left;
    height: 43px;
    background-color: rgba(0,0,0,.22);
}

.header_mid_right ul li:nth-child(1) {
    border-radius: 100%;
    width: 43px;
}

.header_mid_right ul li:nth-child(1) a {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    display: block;
    width: 25px;
    height: 25px;
    background-image: url(../images/header/img1.png?v=1);
    background-position: center;
    background-repeat: no-repeat;
}

.header_mid_right ul li:nth-child(2) {
    height: 43px;
    line-height: 43px;
    padding: 0 20px;
    border-radius: 3px;
    overflow: hidden;
}

.header_mid_right ul li:nth-child(2) a {
    padding-right: 1.6em;
    display: block;
    color: #fff;
    font-size: 1.125em;
    background-image: url(../images/header/img2.png?v=1);
    background-position: right center;
    background-repeat: no-repeat;
}

.header_mid_right dl dd { display: inline-block; }
.header_mid_right dl dd a { color: #fff; }

.header_mid_right dl dd:nth-child(1) {
    background-image: url(../images/header/img4.png);
    background-position: right center;
    background-repeat: no-repeat;
    padding-right: 10px;
    margin-right: 5px;
}

.header_mid_right dl dd:nth-child(2) {
    background-image: url(../images/header/img3.png);
    background-position: right center;
    background-repeat: no-repeat;
    padding-right: 15px;
}

.header_mid_right dl dd:nth-child(1) a {
    background-image: url(../images/header/img1.png);
    background-position: left center;
    background-repeat: no-repeat;
    padding-left: 20px;
}

.header_mid_right dl dd:nth-child(2) a {
    background-image: url(../images/header/img2.png);
    background-position: left center;
    background-repeat: no-repeat;
    padding-left: 20px;
}

body.nybody .header_mid_right dl dd a,
body.mbs .header_mid_right dl dd a { color: #000; }

body.nybody .header_mid_right dl dd:nth-child(1) a { background-image: url(../images/header/img1b.png); }
body.mbs    .header_mid_right dl dd:nth-child(1) a { background-image: url(../images/header/img1b.png); }
body.nybody .header_mid_right dl dd:nth-child(2) a { background-image: url(../images/header/img2b.png); }
body.mbs    .header_mid_right dl dd:nth-child(2) a { background-image: url(../images/header/img2b.png); }
body.nybody .header_mid_right dl dd:nth-child(1)   { background-image: url(../images/header/img4b.png); }
body.mbs    .header_mid_right dl dd:nth-child(1)   { background-image: url(../images/header/img4b.png); }
body.mbs #header { background-color: #fff; }

/* PC slide-out menu */
.pcmenulist {
    position: fixed;
    right: -100%;
    visibility: hidden;
    top: 0;
    height: 100%;
    z-index: 995;
    background-color: rgba(0,0,0,0.89);
    color: #fff;
    width: 58vw;
    transition: right 0.3s ease, visibility 0.3s ease;
}

.showpcmenus .header_mid_right ul li:nth-child(1),
.showpcmenus .header_mid_right ul li:nth-child(2) { border: 1px #fff solid; }

.showpcmenus .header_mid_right ul li:nth-child(2) a { background-image: url(../images/xx.png); }

.showpcmenus .pcmenulist { visibility: visible; right: 0; }

.showpcmenus .header_mid_left,
.showpcmenus .header_mid_mid { opacity: 0; visibility: hidden; }

.pcmenulist_mid {
    padding: 0 2vw 0 10vw;
    overflow-y: auto;
    max-height: calc(100vh - 110px);
    margin-top: 110px;
    -webkit-overflow-scrolling: touch; /* iOS smooth scroll */
}

.pcmenulist_mid ul {
    padding-top: 0;
    padding-bottom: 32px;
    -webkit-column-count: 3;
    column-count: 3;
    -webkit-column-gap: 0;
    column-gap: 0;
}

.pcmenulist_mid ul li { margin-bottom: 2em; break-inside: avoid; }
.pcmenulist_mid ul li p { font-size: 1.25em; color: #e3eae0; }
.pcmenulist_mid ul li a { color: #fff; }
.pcmenulist_mid ul li dl { margin: 1em 0; }
.pcmenulist_mid ul li dl dd { margin-bottom: 10px; }

body.showpcmenus { overflow: hidden; }
body.showpcmenus #header.cur { background: none; }

/* ============================================================
   SECTION 6: NAVBAR (CSS2 — custom navbar system)
   ============================================================ */
.navbar,
.custom-navbar {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 15px;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    background-color: transparent;
    transition: top 0.3s, background-color 0.3s, color 0.3s;
    /* iOS safe area */
    padding-top: max(8px, env(safe-area-inset-top));
}

.navbar.scrolled,
.custom-navbar.scrolled {
    background-color: white;
    color: black;
}

.navbar img,
.custom-navbar img {
    height: 50px;
    margin-right: auto;
}

/* Desktop drop-down menu (CSS2) */
.desktop-menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
}

.desktop-menu li {
    position: relative;
    margin: 0 10px;
}

.desktop-menu a {
    text-decoration: none;
    color: white;
    padding: 8px;
    display: block;
    transition: background-color 0.3s ease, color 0.3s ease;
    font-size: 14px;
}

.navbar.scrolled .desktop-menu a { color: black; }

.desktop-menu li:hover > a {
    background-color: white;
    color: black;
}

/* Submenu levels */
.submenu,
.sub-submenu,
.sub-sub-submenu,
.sub-sub-sub-submenu {
    display: none;
    position: absolute;
    background-color: white;
    list-style-type: none;
    padding: 0;
    margin: 0;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.submenu { top: 100%; left: 0; }
.sub-submenu { top: 0; left: 100%; }
.sub-sub-submenu { top: 0; left: 100%; }
.sub-sub-sub-submenu { top: 0; left: 100%; }

.submenu li,
.sub-submenu li,
.sub-sub-submenu li { width: 210px; border-bottom: 1px solid rgba(0,0,0,0.1); }
.sub-sub-sub-submenu li { width: 200px; border-bottom: 1px solid rgba(0,0,0,0.1); }

.submenu a,
.sub-submenu a,
.sub-sub-submenu a,
.sub-sub-sub-submenu a { color: black; font-size: 13px; }

.desktop-menu li:hover > .submenu           { display: block; }
.submenu li:hover > .sub-submenu            { display: block; }
.sub-submenu li:hover > .sub-sub-submenu    { display: block; }
.sub-sub-submenu li:hover > .sub-sub-sub-submenu { display: block; }

/* Language selector */
.language-select {
    margin-left: auto;
    background-color: white;
    color: black;
    border: 1px solid black;
    padding: 5px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    outline: none;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
    -webkit-appearance: none; /* iOS fix */
    appearance: none;
}

.language-select:focus { border-color: #333; }

/* Hamburger — hidden on desktop */
.custom-hamburger { display: none; }

/* ============================================================
   SECTION 7: MOBILE MENU (CSS2)
   ============================================================ */
.custom-mobile-menu {
    display: none;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    background-color: black;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    color: white;
    padding-top: 60px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* iOS safe area bottom */
    padding-bottom: env(safe-area-inset-bottom);
}

.custom-mobile-menu.active { display: flex; }

.custom-mobile-menu li {
    margin: 0;
    border-bottom: 1px solid white;
}

.custom-mobile-menu a {
    color: white;
    padding: 15px 0 15px 15px;
    display: block;
    font-size: 18px;
    transition: background-color 0.3s ease, color 0.3s ease;
    text-align: left;
}

.custom-mobile-menu li:hover > a {
    background-color: #555;
    color: white;
}

/* Mobile submenu levels */
.custom-submenu,
.custom-sub-submenu {
    display: none;
    position: relative;
    background-color: #444;
    padding-left: 15px;
}

.custom-has-submenu.custom-active > .custom-submenu       { display: block; }
.custom-has-sub-submenu.custom-active > .custom-sub-submenu { display: block; }

.custom-mobile-menu li.custom-has-submenu > a::after {
    content: ' +';
    float: right;
    margin-left: 10px;
    font-size: 15px;
}

.custom-mobile-menu li.custom-active > a::after { content: ' -'; }

.custom-mobile-menu li.custom-has-sub-submenu > a::after {
    content: ' -';
    float: right;
    margin-left: 10px;
    font-size: 16px;
}

.custom-submenu li a,
.custom-sub-submenu li a {
    color: white;
    padding: 10px 0;
    font-size: 15px;
    padding-left: 3px;
}

.custom-sub-submenu { padding-left: 3px; }

.custom-sub-submenu li a::before {
    content: '•';
    margin-right: 10px;
    font-size: 16px;
}

.custom-sub-sub-submenu {
    display: none;
    padding-left: 1px;
    background-color: #555;
}

.custom-has-sub-sub-submenu.custom-active > .custom-sub-sub-submenu { display: block; }

.custom-sub-sub-sub-submenu {
    display: none;
    padding-left: 60px;
    background-color: #555;
}

.custom-has-sub-sub-sub-submenu.custom-active > .custom-sub-sub-sub-submenu { display: block; }

.non-link { cursor: default; }

/* ============================================================
   SECTION 8: HOVER SCALE EFFECTS (desktop only via media query)
   ============================================================ */
@media screen and (min-width: 769px) {
    .cssimg:hover,
    .cssimgp:hover img,
    .index_4_3_left:hover .index_4_3_left_1_bg,
    .pro_1_mid ul li:hover .pro_1_mid_mid_left_bg,
    .ser_2_mid ul li:hover .ser_2_mid_pic_bg,
    .ser_1_right:hover .ser_1_right_bg {
        transform: scale(1.08, 1.08);
    }

    .custom-menu.custom-mobile-menu { display: none; }
}

/* ============================================================
   SECTION 9: BANNER / HERO SECTION
   ============================================================ */
.banner_img {
    position: relative;
    width: 100%;
    height: 100vh;
}

.banner_img_pc {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.banner_img_jj {
    color: #fff;
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 10;
    top: 50%;
    -webkit-transform: translate(-0%, -50%);
    transform: translate(-0%, -50%);
}

.banner_img_jj_mid { margin: 0 2.60416666666667%; }

.banner_img_jj_mid_img img { max-width: 11.04166666666667vw; }

.banner_img_jj_mid_1_f {
    margin-top: 1.25em;
    margin-bottom: 0.2em;
    font-family: "Times New Roman", Times, serif;
    font-size: 3.75em;
}

.banner_img_jj_mid_1_f_1 { font-size: 4.5em; }

.banner_img_jj_mid_2_f { font-size: 1.875em; letter-spacing: .4em; }
.banner_img_jj_mid_2_f_2 { font-size: 2.25em; margin-top: .3em; }
.banner_img_jj_mid_2_f_small { font-size: 16px; letter-spacing: 0; }

.banner_img_jj_mid_1_f_nt { margin-top: 0; }

/* CSS2 — banner text box overlay style */
.banner_img_jj_mid_1_f_1 {
    position: absolute;
    font-family: 'AlibabaPuHuiTi-2-45-Light', sans-serif;
    color: white;
    background: rgba(0, 0, 0, 0.5);
    padding: 20px;
    border-radius: 10px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: fadeInUp 2s;
    text-align: center;
    font-size: 1.2em;
    max-width: 90%;
    overflow: auto;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translate3d(0, 100%, 0); }
    to   { opacity: 1; transform: none; }
}

.indexbanner {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
}

.indexbanner video {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    -o-object-fit: fill;
    object-fit: fill;
}

.mainbody {
    position: relative;
    z-index: 10;
    background-color: #fff;
    overflow: hidden;
    margin-top: 100vh;
}

.indexbanner_down {
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 10;
    bottom: 4.42708333333333vw;
}

.indexbanner_down a {
    position: relative;
    display: inline-block;
    font-size: 1.5em;
    color: #fff;
    padding-bottom: 1.125em;
}

.indexbanner_down a::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0.875em;
    height: 0.5833333333333333em;
    background-image: url(../images/index/img1.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-transform: translate(-50%, -0%);
    transform: translate(-50%, -0%);
}

/* New page banner */
.nybanner {
    position: relative;
    height: 100vh;
}

.nybanner_bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.nymid { margin: 0 5.20833333333333%; }

.nymainbody {
    margin-top: 100vh;
    background-color: #fff;
    position: relative;
    z-index: 10;
    overflow: hidden;
}

.bannerdes {
    width: 100%;
    z-index: 10;
    color: #fff;
    position: absolute;
    left: 0;
    bottom: 9.89583333333333vw;
}

.bannerdes_1 {
    font-weight: bold;
    font-size: 5.9375em;
}

.bannerdes_2 { font-size: 1.875em; }

#bannerdes {
    margin-top: 100vh;
    width: 100%;
    position: relative;
    z-index: 5;
    overflow: hidden;
}

#bannerdes.fix {
    position: fixed;
    left: 0;
    top: 0;
    margin-top: 0;
}

.shoujibannerimg { display: none; }

/* ============================================================
   SECTION 10: INDEX SECTIONS
   ============================================================ */
/* --- index_1 / index_bg --- */
.index_1_bg {
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    height: 100vh;
}

.index_1_mid { padding: 4.47916666666667vw 0 7.8125vw 0; }

.index_1_mid dl dd {
    float: left;
    width: 25%;
    text-align: center;
}

.index_1_mid_mid_1 { height: 22.60416666666667vw; }
.index_1_mid_mid_1 img { max-height: 22.60416666666667vw; }

.index_1_mid_mid_2 {
    color: #000;
    margin-top: 4.94791666666667vw;
    padding: 0 5vw;
}

.index_1_mid_mid_2_1 { font-size: .875em; }
.index_1_mid_mid_2_2 { font-size: 1.25em; margin-top: 5px; }

.index_1_mid_mid_2_3 {
    line-height: 1.6;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    word-wrap: break-word;
    word-break: break-all;
    margin-top: 1.5vw;
}

/* --- y_index_1 --- */
.y_index_1 { padding-bottom: 6vw; }
.y_index_1_mid { margin: 0 3.125em; }

.y_index_1_1 {
    text-align: center;
    margin-top: 7vw;
    font-family: 'bookmanoldstylebold', sans-serif;
    font-size: 32px;
    font-weight: bold;
    color: #046A38;
}

.y_index_1_2 {
    text-align: center;
    font-size: 1.25em;
    line-height: 1.6;
    margin-top: .3em;
    margin-bottom: 5vw;
}

.y_index_1_1_j { /* placeholder for sub-variant */ }

.y_index_1_3 { position: relative; padding: 0 6.25em; }
.y_index_1_3_mid_1 { overflow: hidden; }
.y_index_1_3_mid_1 img { width: 100%; }

.y_index_1_3_mid_2 p {
    padding: 5px 0;
    margin-top: 1em;
    min-width: 150px;
    border-bottom: 1px #000 solid;
    display: inline-block;
}

.y_index_1_3_mid_2 p span {
    color: #000;
    font-size: 1.125em;
    display: block;
    padding-right: 1em;
    background-position: right center;
    background-repeat: no-repeat;
    background-image: url(../images/footer/img5.png);
}

/* Carousel arrows */
.y_index_1_3_left {
    background-image: url(../images/index/img2.png);
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    z-index: 10;
    left: 0;
    top: 11.875vw;
    width: 3.125em;
    height: 3.125em;
    border: 1px #86aa9b solid;
    cursor: pointer;
}

.y_index_1_3_left:hover,
.y_index_1_3_left_w {
    background-color: #1b5f43;
    background-image: url(../images/index/img2on.png);
}

.y_index_1_3_right {
    background-image: url(../images/index/img3.png);
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    z-index: 10;
    right: 0;
    top: 11.875vw;
    width: 3.125em;
    height: 3.125em;
    border: 1px #86aa9b solid;
    cursor: pointer;
}

.y_index_1_3_right:hover,
.y_index_1_3_right_w {
    background-color: #1b5f43;
    background-image: url(../images/index/img3on.png);
}

.y_index_1_3_left_line,
.y_index_1_3_right_line {
    position: static;
    display: inline-block;
    margin-left: 10px;
}

#y_index_1_3_left_pro  { left: 1.875em;  top: 50%; -webkit-transform: translate(0,-50%); transform: translate(0,-50%); background-image: url(../images/index/img2on.png); }
#y_index_1_3_right_pro { right: 1.875em; top: 50%; -webkit-transform: translate(0,-50%); transform: translate(0,-50%); background-image: url(../images/index/img3on.png); }

#y_index_1_3_left_pro.swiper-button-disabled,
#y_index_1_3_right_pro.swiper-button-disabled,
.y_index_1_3_left_a.swiper-button-disabled,
.y_index_1_3_right_a.swiper-button-disabled { display: none; }

/* --- y_index_2 (video section) --- */
.y_index_2 {
    position: relative;
    height: 100vh;
    color: #fff;
    text-align: center;
    overflow: hidden;
}

.y_index_2 video {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 10px;
    width: auto;
    height: auto;
    z-index: 0;
    -o-object-fit: cover;
    object-fit: cover;
}

.y_index_2_bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.y_index_2_mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 1;
}

.y_index_2_mask .y_index_1_mid {
    color: white;
    z-index: 2;
    padding: 20px;
}

.y_index_2_mask_1 { font-size: 1.125em; }
.y_index_2_mask_2 { font-size: 3em; margin: .5em 0 .7em 0; }

.y_index_2_mask_3 a {
    width: 5.6875em;
    height: 5.6875em;
    display: inline-block;
    background-image: url(../images/index/img7.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* --- y_index_3 / y_index_4 / y_index_5 --- */
.y_index_3 {
    padding-top: 6.97916666666667vw;
    background-color: #fff;
    position: relative;
    z-index: 10;
}

.y_index_4 {
    padding-bottom: 9.375vw;
    position: relative;
    z-index: 10;
    background-color: #323232;
    color: #fff;
    overflow: hidden;
}

.y_index_4_mid { margin: 0 8.33333333333333%; }

.y_index_4_1 ul li {
    overflow: hidden;
    margin-right: 4.0625%;
    float: left;
    width: 30.625%;
    position: relative;
}

.y_index_4_1 ul li:nth-child(3) { margin-right: 0; }

.y_index_4_1_2 { position: absolute; left: 0; bottom: 0; width: 100%; z-index: 10; }
.y_index_4_1_3 { position: absolute; left: 0; bottom: 0; width: 100%; z-index: 5; }

.y_index_4_1_3::after {
    transition: all .5s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(../images/index/img12.png);
    opacity: 0;
}

.y_index_4_1 ul li:hover .y_index_4_1_3::after { opacity: 1; }
.y_index_4_1_3 img { width: 100%; }

.y_index_4_1_2_mid { padding: 2.34375vw; }
.y_index_4_1_2_mid_1 { font-size: 1.875em; }
.y_index_4_1_2_mid_2 { font-size: 1.25em; line-height: 1.6; margin-top: .2em; }
.y_index_4_1_2 { color: #fff; }

.y_index_4_1_1 img { width: 100%; }
.searchbody_3_pro_mid_img img { width: 100%; }

.y_index_5 { overflow: hidden; background-color: #fff; position: relative; z-index: 10; }
.y_index_5_1 ul li { float: left; width: 16.66666666666667%; text-align: center; }

/* wow animation */
.wow {
    -webkit-animation: fadeInUp 1s ease-in-out;
    animation: fadeInUp 1s ease-in-out;
}

/* ============================================================
   SECTION 11: ABOUT PAGE
   ============================================================ */
.about_1 { text-align: center; color: #fff; height: 100vh; }
.about_1_1 { margin: 0 auto; max-width: 1000px; line-height: 1.8; margin-top: 1.875em; }

.about_2 { padding-top: 8.85416666666667vw; }

.about_2_mid_right { float: right; width: 43.96551724137931%; }
.about_2_mid_left  { float: left;  width: 45.97701149425287%; }

.about_2_mid_right_pic { overflow: hidden; margin-top: 4em; }
.about_2_mid_right_pic img { width: 100%; }

.about_2_mid_left_1 { overflow: hidden; }
.about_2_mid_left_1 img { width: 100%; }

.about_3 { padding-top: 5.72916666666667vw; text-align: center; }
.about_3_1 { max-width: 705px; }

.about_3_2 ul li {
    position: relative;
    float: left;
    width: 31.66666666666667%;
    margin-right: 2.5%;
}

.about_3_2 ul li:nth-child(3) { margin-right: 0; }
.about_3_2_img { overflow: hidden; }
.about_3_2_img img { width: 100%; }

.about_3_2_jj {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 10;
    width: 100%;
    color: #fff;
    text-align: left;
}

.about_3_2_jj_jj { padding: 2vw; line-height: 1.6; }
.about_3_2_jj_1 { font-size: 1.5em; margin-bottom: .5em; }
.about_3_2 { margin-top: 4.94791666666667vw; }

.about_3_3 {
    padding-top: 4vw;
    padding-bottom: 8vw;
    line-height: 1.8;
    text-align: left;
}

.about_4 {
    padding-top: 11.19791666666667vw;
    padding-bottom: 8.85416666666667vw;
    background-attachment: fixed;
    background-image: url(../images/about/img6.jpg);
    overflow: hidden;
    color: #fff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.about_4_1_1 { font-size: 1.25em; font-family: "Times New Roman", Times, serif; font-weight: bold; }
.about_4_1_2 { line-height: 1.6; }
.about_4_1 ul li { margin-bottom: 1em; }
.about_4_1 { margin-top: 2.5em; }

.jobnav { margin-top: 2em; }

.jobnav_mid_left {
    font-family: "宋体";
    font-size: 24px;
    margin-right: 5px;
    display: inline-block;
    border: 1px #fff solid;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
}

.jobnav_mid_right {
    font-family: "宋体";
    font-size: 24px;
    display: inline-block;
    border: 1px #fff solid;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
}

.jobnav_mid_left:hover,
.jobnav_mid_right:hover { background-color: #fff; color: #333; }

/* ============================================================
   SECTION 12: FOOTER
   ============================================================ */
#footer {
    padding-top: 6vw;
    position: relative;
    z-index: 10;
    background-color: #323232;
    color: #fff;
    overflow: hidden;
}

.footer_mid { margin: 0 5.72916666666667%; }

.footer_y_1 { margin-bottom: 6vw; }

.footer_y_1_left  { float: left;  width: 27%; }
.footer_y_1_right { float: right; width: 73%; }

.footer_y_1_left_mid { padding-right: 1em; }
.footer_y_1_left_mid_1 { line-height: 1.6; }

.footer_y_1_left_mid_2 { line-height: 1.7; margin-top: 2em; margin-bottom: 1.5em; }

.footer_y_1_left_mid_3 a {
    color: #fff;
    border-bottom: 1px #fff solid;
    padding-bottom: 5px;
    display: inline-block;
}

.footer_y_1_left_mid_3 a span {
    padding-right: 19px;
    background-image: url(../images/footer/img5.png);
    background-position: right center;
    background-repeat: no-repeat;
}

.footer_y_1_right_mid { border-left: 1px #4c4c4c solid; }

.footer_y_1_right_mid_1 ul li {
    float: right;
    margin-left: 8vw;
}

.footer_y_1_right_mid_1 ul li:last-child { margin-left: 0; }

.footer_y_1_right_mid_1 ul li p { font-size: 1.25em; padding-bottom: .5em; }
.footer_y_1_right_mid_1 ul li dl dd a { color: #fff; }
.footer_y_1_right_mid_1 ul li dl dd { margin-top: 1em; }

.footer_y_1_right_mid_2 { text-align: right; }

.footer_y_1_right_mid_2 ul li {
    margin-left: .875em;
    display: inline-block;
    position: relative;
}

.footer_y_1_right_mid_2 ul li a {
    display: block;
    border: 1px #525252 solid;
    border-radius: 3px;
    width: 2em;
    height: 2em;
    background-position: center;
    background-repeat: no-repeat;
}

.footer_y_1_right_mid_2 ul li:nth-child(1) a { background-image: url(../images/footer/img1.png); }
.footer_y_1_right_mid_2 ul li:nth-child(2) a { background-image: url(../images/footer/img2.png); }
.footer_y_1_right_mid_2 ul li:nth-child(3) a { background-image: url(../images/footer/img3.png); }
.footer_y_1_right_mid_2 ul li:nth-child(4) a { background-image: url(../images/footer/img4.png); }

.footer_y_1_right_mid_2 ul li img {
    display: none;
    position: absolute;
    top: 2em;
    max-width: none;
    width: 110px;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}

.footer_y_1_right_mid_2 ul li:hover img { display: block; }

.footer_1 {
    border-bottom: 1px #000 solid;
    border-top: 1px #000 solid;
    text-align: center;
    padding: 1em 0;
}

.footer_2 { padding-top: 5.20833333333333vw; padding-bottom: 4.6875vw; }

.footer_2_left  { float: left;  width: 34%; }
.footer_2_mid   { float: left;  width: 36%; }
.footer_2_right { float: right; width: 30%; }

.footer_2_1 {
    margin-bottom: 1em;
    font-size: 1.25em;
    font-family: "Times New Roman", Times, serif;
    font-weight: bold;
}

.footer_2_left_mid { margin-right: 1em; }
.footer_2_left_mid_1 { line-height: 1.6; }

.footer_2_mid_mid {
    border-left: 1px #dfdfde solid;
    border-right: 1px #dfdfde solid;
    padding-bottom: 2em;
    padding-left: 7.8125vw;
    padding-right: 4.16666666666667vw;
}

.footer_2_mid_mid_1 dl dd {
    float: left;
    width: 33.3333%;
    line-height: 1.6;
    margin-bottom: 4px;
}

.footer_2_right_mid { padding-left: 5.72916666666667vw; }

.footer_2_right_mid_1 ul li {
    margin-right: 4px;
    display: inline-block;
    position: relative;
}

.footer_2_right_mid_1 ul li a {
    transition: all .5s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
    display: block;
    border: 1px #000 solid;
    border-radius: 100%;
    width: 30px;
    height: 30px;
    background-position: center;
    background-repeat: no-repeat;
}

.footer_2_right_mid_1 ul li a:hover { background-color: #000; }

.footer_2_right_mid_1 ul li:nth-child(1) a        { background-image: url(../images/footer/i1.png); }
.footer_2_right_mid_1 ul li:nth-child(1) a:hover  { background-image: url(../images/footer/i1on.png); }
.footer_2_right_mid_1 ul li:nth-child(2) a        { background-image: url(../images/footer/i2.png); }
.footer_2_right_mid_1 ul li:nth-child(2) a:hover  { background-image: url(../images/footer/i2on.png); }
.footer_2_right_mid_1 ul li:nth-child(3) a        { background-image: url(../images/footer/i3.png); }
.footer_2_right_mid_1 ul li:nth-child(3) a:hover  { background-image: url(../images/footer/i3on.png); }
.footer_2_right_mid_1 ul li:nth-child(4) a        { background-image: url(../images/footer/i4.png); }
.footer_2_right_mid_1 ul li:nth-child(4) a:hover  { background-image: url(../images/footer/i4on.png); }

.footercp {
    line-height: 1.6;
    padding: .875em 0;
    background-color: #fff;
    color: #000;
    overflow: hidden;
}

.footercp a   { color: #000; }
.footercp_left  { float: left; }
.footercp_right { float: right; }

/* CSS2 footer test bar */
.footertest {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    background-color: #fff;
    padding: 6px;
}

.footertest p {
    margin: 0;
    color: black;
    text-align: center;
    line-height: 1.2;
}

/* ============================================================
   SECTION 13: PRODUCT PAGES
   ============================================================ */
.pro_mid { position: relative; }

.pro_mid_1 { border-bottom: 1px #d6d6d6 solid; padding: 2em 0; }
.pro_mid_1 .nymid { position: relative; }
.pro_mid_1_left { font-size: 1.125em; }

.pro_mid_1_right {
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
}

.pro_mid_1_right a {
    text-align: center;
    position: relative;
    white-space: nowrap;
    display: block;
    border: 1px #000 solid;
    width: 95px;
    height: 35px;
    line-height: 35px;
    border-radius: 35px;
}

.pro_mid_1_right a span {
    padding-right: 20px;
    font-size: 14px;
    color: #000;
    position: absolute;
    left: 50%;
    top: 50%;
    background-image: url(../images/product/img1.jpg);
    background-position: right center;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    display: block;
}

.pro_mid_2 ul li:nth-child(2n) { background-color: #efefef; }
.pro_mid_2 ul li .index_1_mid  { padding: 9vw 0; }

.pro_mid_catelist {
    min-height: 55vw;
    max-height: 55vw;
    overflow: hidden;
    overflow-y: auto;
    display: none;
    position: absolute;
    z-index: 99999999999999999;
    background-color: #fff;
    top: 200vh;
    right: 0;
    width: 54.27083333333333%;
    -webkit-overflow-scrolling: touch;
}

.pmask {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: .5;
    z-index: 8888888;
}

.pro_mid_catelist_mid { margin: 3vw 6.77083333333333vw; }
.pro_mid_catelist_mid_1 { position: relative; font-size: 14px; padding-left: 6vw; }
.pro_mid_catelist_mid_1_right { position: absolute; right: 0; top: 0; cursor: pointer; }
.pro_mid_catelist_mid_2 { margin-top: 1em; }

.pro_mid_catelist_mid_2 ul li a {
    color: #000;
    display: block;
    position: relative;
    font-size: 1.125em;
    border-bottom: 1px #d1d1d1 solid;
    padding: 1em 0 1em 6vw;
    background-position: 97% center;
    background-repeat: no-repeat;
    background-image: url(../images/product/img2.png);
}

.pro_mid_catelist_mid_2 ul li dl dd a {
    font-size: 16px;
    display: inline;
    border: none;
    background: none;
    padding: 0;
    background-position: left center;
    background-repeat: no-repeat;
}

.pro_mid_catelist_mid_2 ul li dl { padding-left: 6vw; display: none; }
.pro_mid_catelist_mid_2 ul li dl dd { margin-top: 10px; }
.pro_mid_catelist_mid_2 ul li.on dl { display: block; }

.pro_mid_catelist_mid_2 ul li.on a.showchild {
    background-color: #f1f1f1;
    border-bottom: 1px rgba(0,0,0,0) solid;
}

.pro_mid_catelist_mid_2 ul li dl dd a:hover {
    padding-left: 12px;
    background-image: url(../images/product/img3.png);
}

/* Product info page */
.pro_info_1_mid {
    display: flex;
    flex-direction: column;
    position: relative;
    flex-flow: row wrap;
}

.pro_info_1_mid_left {
    width: 58%;
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    z-index: 1;
    overflow: hidden;
}

.pro_info_1_mid_left img { width: 100%; }

.pro_info_1_mid_right { position: relative; width: 42%; }

.lv-product-page-header__secondary-wrapper {
    width: 100%;
    min-height: 100vh;
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pro_info_1_mid_right_mid {
    margin: 0 6.77083333333333vw 0 13.54166666666667vw;
}

.pro_info_1_mid_right_mid_1 { position: relative; font-size: 3em; }

.pro_info_1_mid_right_mid_1 a {
    position: absolute;
    right: 0;
    top: 0;
    width: 1.458333333333333em;
    height: 1.458333333333333em;
    border-radius: 100%;
    border: 1px #434343 solid;
    line-height: 1.458333333333333em;
    text-align: center;
    font-family: "宋体";
    color: #fff;
}

.pro_info_1_mid_right_mid_2 { font-size: 1.125em; margin-top: 7vw; }
.pro_info_1_mid_right_mid_3 { font-size: 1.875em; font-weight: bold; border-bottom: 1px #434343 solid; padding-top: .3em; padding-bottom: .7em; margin-bottom: 1em; }
.pro_info_1_mid_right_mid_4 { line-height: 1.6; margin-bottom: 2.5em; }

.pro_info_1_mid_right_mid_5 a {
    display: block;
    width: 188px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    background-color: #fff;
    border-radius: 40px;
    color: #000;
}

.pro_info_1_mid_right_mid_5 a span {
    padding-left: 24px;
    display: inline-block;
    background-position: left center;
    background-repeat: no-repeat;
    background-image: url(../images/product/img7.png);
}

.pro_info_2 .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background-color: #000; }
.pro_info_2 #okg::after { background-color: #000; }
.pro_info_2 { overflow: hidden; text-align: center; padding-top: 9.375vw; }

.pro_info_m { display: none; }

/* ============================================================
   SECTION 14: SERVICES, CASES, TEAM, ADV, NEWS PAGES
   ============================================================ */

/* --- Services / strategy --- */
.st_1 ul li { position: relative; height: 100vh; }
.st_1_bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.st_1_jj {
    position: absolute;
    left: 0;
    bottom: 3.64583333333333vw;
    width: 100%;
    z-index: 10;
    text-align: center;
    color: #fff;
}

.st_1_jj_1 { font-size: 2em; margin-bottom: 1em; }

.st_1_jj_2 dl dd { display: inline-block; margin: 0 5px; }

.st_1_jj_2 dl dd a {
    display: block;
    width: 10.83333333333333em;
    line-height: 1.944444444444444em;
    border-radius: 1.944444444444444em;
    color: #fff;
    background-color: rgba(0,0,0,0.38);
    border: 1px rgba(255,255,255,0.53) solid;
    font-size: 1.125em;
}

.st_1_bg.b { display: none; }
.st_1_bg.m { background-attachment: inherit; }

.st_1_category ul li { float: left; width: 50%; }
.st_1_category ul li:nth-child(3n+1) { width: 100%; }
.st_1_category ul li:nth-child(3n+1) .st_1_bg.m { display: none; }
.st_1_category ul li:nth-child(3n+1) .st_1_bg.b { display: block; }

/* --- Cases --- */
.y_case_1 { padding-top: 9.375vw; }

.y_case_1_1_mid_left { overflow: hidden; width: 56.54761904761905%; float: left; }
.y_case_1_1_mid_left img { width: 100%; }

.y_case_1_1_mid_right { margin-top: 4vw; float: right; color: #000; width: 34.6875%; }

.y_case_1_1_mid_right_1 span {
    display: inline-block;
    background-image: url(../images/cases/img2.png);
    background-position: right center;
    background-repeat: no-repeat;
    padding-right: 40px;
}

.y_case_1_1_mid_right_2 { margin-bottom: 1em; font-size: 1.875em; font-weight: bold; margin-top: 5px; }

.y_case_1_1_mid_right_3 {
    line-height: 1.8;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    word-wrap: break-word;
    word-break: break-all;
}

.y_case_1_1 ul li:nth-child(2n) .y_case_1_1_mid_left { float: right; }
.y_case_1_1 ul li:nth-child(2n) .y_case_1_1_mid_right { float: left; }
.y_case_1_1 ul li { margin-bottom: 8vw; }

.y_case_1_1_mid_right_info { float: right; width: 35.625%; }
.y_case_1_1_mid_right_3_info { line-height: 1.8; }
.y_case_1_1_mid_right_info_1 { text-align: right; padding: 1.5625vw 0; }

.y_case_1_1_mid_right_info_1 a {
    display: inline-block;
    width: 5em;
    height: 5em;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(../images/cases/img4.png);
}

.case_info_2 { overflow: hidden; background-color: #ededed; }
.case_info_2_1 { overflow: hidden; }
.case_info_2_1 img { width: 100%; }
.case_info_2_2 { text-align: center; margin-top: 4vw; margin-bottom: 4vw; opacity: 0; }
.swiper-slide.swiper-slide-active .case_info_2_2 { opacity: 1; }

.swiper-container-case .swiper-slide  { padding: 0 calc((100vw - 49.47916666666667vw) * 0.05); width: 49.47916666666667vw; }
.swiper-container-case2 .swiper-slide { padding: 0 calc((100vw - 43.22916666666667vw) * 0.0359375); width: 43.22916666666667vw; }

#swiper-pagination-cases .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: none;
    border: 1px #fff solid;
    opacity: 1;
}

#swiper-pagination-cases .swiper-pagination-bullet-active { background-color: #fff; }
#swiper-pagination-cases { bottom: 2em; }

.y_case_1_1_mid_left .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 10px; }

/* --- Team --- */
.y_team_1 { margin-top: 14.58333333333333vw; }
.y_team_1_1 { font-size: 2.25em; font-family: 'Alibaba PuHuiTi 2.0 55'; }
.y_team_1_2 { font-size: 3.75em; margin-top: .2em; margin-bottom: 4vw; }

.y_team_1_3_img { overflow: hidden; }
.y_team_1_3_img img { width: 100%; }

.y_team_1_3 { padding-bottom: 7.8vw; margin-bottom: 7.8vw; border-bottom: 1px #d4d4d4 solid; }

.y_team_1_3_act { position: relative; margin-top: 5vw; }
.y_team_1_3_act_r { position: absolute; right: 0; top: 0; }

.y_team_1_3_act_l { max-width: 665px; }
.y_team_1_3_act_l_1 { margin-bottom: .4em; font-size: 3em; font-weight: bold; }
.y_team_1_3_act_l_2 { line-height: 1.8; }

.y_team_2_1_mid_left { float: left; width: 32.8125%; overflow: hidden; }
.y_team_2_1_mid_left img { width: 100%; }

.y_team_2_1_mid_right { float: right; width: 63%; margin-top: 7.5vw; }
.y_team_2_1_mid_right_1 { font-size: 3em; font-weight: bold; }
.y_team_2_1_mid_right_2 { font-size: 1.5em; line-height: 1.6; margin-top: .4em; margin-bottom: 1em; }
.y_team_2_1_mid_right_3 { line-height: 2; }
.y_team_2_1 ul li { margin-bottom: 6vw; }

.y_team_2_1 ul li:nth-child(2n) .y_team_2_1_mid_left { float: right; }
.y_team_2_1 ul li:nth-child(2n) .y_team_2_1_mid_right { float: left; }

/* --- News --- */
.news_1 { padding-top: 7vw; }
.newsmid { margin: 0 15%; }
.newscate { text-align: center; }

.newscate li {
    letter-spacing: 0;
    display: inline-block;
    font-size: 18px;
    background-image: url(../images/news/img2.jpg);
    padding: 0 15px;
    background-position: left center;
    background-repeat: no-repeat;
}

.newscate li:nth-child(1) { background-image: none; }
.newscate li a { color: #666; }
.newscate li a:hover,
.newscate li a.on { color: #000; }

.news_2_1 ul li { float: left; width: 49%; margin-bottom: 4.6875vw; }
.news_2_1 ul li:nth-child(2n) { float: right; }
.news_2_1 ul li.kuan { width: 100%; text-align: center; }

.news_2_1_img { overflow: hidden; }
.news_2_1_img img { width: 100%; }
.news_2_1_jj { color: #000; padding-top: 1.875em; }
.news_2_1_jj_1 { font-size: 1.125em; }
.news_2_1_jj_2 { font-size: 1.5em; margin: 10px 0; font-weight: bold; }
.news_2_1_jj_3 { font-size: 1.125em; }
.news_2_1 { margin-top: 3.64583333333333vw; }

.news_2_2 a {
    border-radius: 40px;
    display: block;
    margin: 0 auto;
    max-width: 235px;
    text-align: center;
    line-height: 40px;
    color: #fff;
    background-color: #000;
}

.news_info_1 { text-align: center; padding: 5em 0; overflow: hidden; }
.news_info_1_con { line-height: 1.8; padding-bottom: 50px; }

.news_info_act { position: relative; padding-right: 200px; }
.news_info_act_re { position: absolute; right: 0; top: 0; z-index: 10; }

.news_info_act_re a {
    display: block;
    width: 180px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #fff;
    border-radius: 40px;
    background-color: #000;
}

.newsinfo_mid_4_mid_left,
.newsinfo_mid_4_mid_right { font-size: 1.125em; line-height: 1.6; padding-bottom: 5px; }

/* News (Ayuna) */
.ay_news_1 { padding-top: 8.33333333333333vw; }

.ay_news_1_1 ul li { width: 100%; overflow: hidden; }
.ay_news_1_1 ul li dl { position: relative; width: 100%; }

.ay_news_1_1 ul li dl dd {
    float: left;
    margin-bottom: 2.86458333333333vw;
    border-bottom: 1px #a4a4a4 solid;
    position: relative;
    height: 26vw;
    width: 23.625%;
    margin-left: 1.83333333333333%;
}

.ay_news_1_1_img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.ay_news_1_1_img_bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: 100% 100%; }
.ay_news_1_1_jj { z-index: 10; position: absolute; width: 100%; top: 14vw; }

.ay_news_1_1 ul li:nth-child(1) dl dd:nth-child(1) { margin-left: 0; width: 49.08333333333333%; }
.ay_news_1_1 ul li:nth-child(1) dl dd:nth-child(1) .ay_news_1_1_img,
.ay_news_1_1 ul li:nth-child(2) dl dd:nth-child(3) .ay_news_1_1_img { height: 100%; }

.ay_news_1_1 ul li:nth-child(1) dl dd:nth-child(4),
.ay_news_1_1 ul li:nth-child(2) dl dd:nth-child(1),
.ay_news_1_1 ul li:nth-child(2) dl dd:nth-child(4) { margin-left: 0; }

.ay_news_1_1 ul li:nth-child(2) dl dd:nth-child(3) { width: 49.08333333333333%; }

.ay_news_1_1_jj_mid_1 { color: #1b5f43; }
.ay_news_1_1_jj_mid_2 { margin-top: .3em; margin-bottom: .65em; font-size: 1.5em; color: #333; }
.ay_news_1_1_jj_mid_3 { color: #666; line-height: 1.6; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; word-wrap: break-word; word-break: break-all; }

.ay_news_1_1 ul li:nth-child(2) dl dd:nth-child(3) .ay_news_1_1_jj_mid_3,
.ay_news_1_1 ul li:nth-child(1) dl dd:nth-child(1) .ay_news_1_1_jj_mid_3 { -webkit-line-clamp: 2; }

.ay_news_1_1 ul li:nth-child(1) dl dd:nth-child(1) .ay_news_1_1_jj_mid_1,
.ay_news_1_1 ul li:nth-child(1) dl dd:nth-child(1) .ay_news_1_1_jj_mid_2,
.ay_news_1_1 ul li:nth-child(1) dl dd:nth-child(1) .ay_news_1_1_jj_mid_3,
.ay_news_1_1 ul li:nth-child(2) dl dd:nth-child(3) .ay_news_1_1_jj_mid_1,
.ay_news_1_1 ul li:nth-child(2) dl dd:nth-child(3) .ay_news_1_1_jj_mid_2,
.ay_news_1_1 ul li:nth-child(2) dl dd:nth-child(3) .ay_news_1_1_jj_mid_3 { color: #fff; }

.ay_news_1_1 ul li:nth-child(1) dl dd:nth-child(1) .ay_news_1_1_jj_mid,
.ay_news_1_1 ul li:nth-child(2) dl dd:nth-child(3) .ay_news_1_1_jj_mid { padding: 2vw; }

.ay_news_1_1 ul li:nth-child(1) dl dd:nth-child(1)::after,
.ay_news_1_1 ul li:nth-child(2) dl dd:nth-child(3)::after {
    pointer-events: none;
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(../images/news/img2.png);
}

.ay_news_1_1 ul li:nth-child(1) dl dd:nth-child(1) .ay_news_1_1_jj,
.ay_news_1_1 ul li:nth-child(2) dl dd:nth-child(3) .ay_news_1_1_jj { top: auto; bottom: 0; }

.ay_news_1_1 ul li dl dd a { display: block; }

/* News info (Ayuna) */
.ay_news_info_1_mid { position: relative; padding: 3.64583333333333vw 0; }
.ay_news_info_1_mid_left { font-size: 1.125em; }

.ay_news_info_1_mid_right {
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    font-size: .875em;
}

.ay_news_info_1_mid_right a {
    display: block;
    width: 5em;
    height: 5em;
    background-image: url(../images/news/img3.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.ay_news_info_2_mid { margin: 0 auto; max-width: 1100px; }
.ay_news_info_2_mid_1 { text-align: center; color: #1b5f43; }
.ay_news_info_2_mid_2 { text-align: center; font-size: 1.5em; line-height: 1.6; margin-top: 5px; }
.ay_news_info_2_mid_3 { line-height: 1.8; margin: 3.125vw 0; }

.ay_news_info_2_mid_4 {
    margin-bottom: 4.53125vw;
    position: relative;
    padding: 1em 0;
    border-bottom: 1px #c4c4c4 solid;
    border-top: 1px #c4c4c4 solid;
    overflow: hidden;
}

.ay_news_info_2_mid_4 ul li { float: left; width: 50%; }
.ay_news_info_2_mid_4 ul li span { padding-right: 10px; }
.ay_news_info_2_mid_4 ul li:nth-child(2) { text-align: right; }
.ay_news_info_2_mid_4_mid { padding-right: 95px; color: #333; }
.ay_news_info_2_mid_4 ul li:nth-child(2) .ay_news_info_2_mid_4_mid { padding-left: 95px; padding-right: 0; }

.ay_news_info_2_mid_4::after {
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 28px;
    height: 6px;
    background-image: url(../images/news/img4.png);
    background-position: center;
    background-repeat: no-repeat;
}

.ay_news_info_2_mid_4_mid a { color: #333; }
.nnnmmm { display: none; width: 100%; }

/* --- ADV page --- */
.adv_mid { margin: 0 8.33333333333333%; }

.adv_2 ul li { cursor: pointer; float: left; }
.adv_2 ul li:nth-child(1) { width: 25%; }
.adv_2 ul li:nth-child(2) { width: 22%; }
.adv_2 ul li:nth-child(3) { width: 30%; }
.adv_2 ul li:nth-child(4) { width: 23%; }

.adv_2_mid {
    overflow: hidden;
    display: flex;
    justify-content: space-around;
    padding: 0 1em;
    border-left: 1px #e6e6e6 solid;
}

.adv_2 ul li:nth-child(1) .adv_2_mid { padding-left: 0; border: none; }
.adv_2 ul li:nth-child(4) .adv_2_mid { padding-right: 0; }
.adv_2_mid_right { margin-left: 1em; }
.adv_2_mid_right_1 { font-size: 1.875em; }
.adv_2_mid_right_2 { font-size: 1.125em; line-height: 1.5; }

.adv_2_mid_left { position: relative; }

.adv_2_mid_left img:nth-child(2) {
    opacity: 0;
    position: absolute;
    z-index: 10;
    left: 0;
    top: 0;
    transition: all .5s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

.adv_2 ul li.on .adv_2_mid_left img:nth-child(2) { opacity: 1; }
.adv_2 ul li.on .adv_2_mid_left img:nth-child(1) { opacity: 0; }

.adv_3 { margin: 6.45833333333333vw 0; }
.adv_3_mid { position: relative; overflow: hidden; }
.adv_3_mid_left { overflow: hidden; width: 37.25%; float: left; }
.adv_3_mid_left img { width: 100%; }
.adv_3_mid_right { float: right; width: 21.9375%; margin-top: 30vw; overflow: hidden; }
.adv_3_mid_right img { width: 100%; }
.adv_3_mid_mid { position: absolute; right: 0; width: 56.25%; bottom: 22vw; }
.adv_3_mid .y_index_1_1,
.adv_3_mid .y_index_1_2 { text-align: left; }
.adv_3_mid_mid_1 { line-height: 1.8; }
.adv_3_mid_mid_j { margin-bottom: 2vw; }

.adv_3_act {
    position: absolute;
    bottom: 16vw;
    z-index: 10;
    left: 43.75%;
    width: 6.875em;
}

.adv_3_act .y_index_1_3_left,
.adv_3_act .y_index_1_3_right { top: 0; }

#adv_3_act_m { right: 8.33333333333333%; left: auto; bottom: auto; top: -9vw; }

.adv_4 {
    position: relative;
    background-image: none;
    color: #fff;
    text-align: center;
    padding-bottom: 9.375vw;
    overflow: hidden;
}

.adv_4_bg {
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.adv_4_bg.on { opacity: 1; }
.adv_4 .adv_mid { position: relative; z-index: 10; }

.adv_4_1 ul li { cursor: pointer; text-align: center; display: inline-block; margin: 0 3.5vw; }

.adv_4_1_1 {
    text-align: center;
    border-radius: 100%;
    border: 1px #fff solid;
    width: 6.40625vw;
    height: 6.40625vw;
}

.adv_4_1_1 img { max-width: 3.28125vw; }
.adv_4_1_2 { font-size: 1.125em; margin-top: 1.5em; }
.adv_4_1 ul li.on .adv_4_1_1 { background-color: rgba(12,49,6,0.66); border-color: rgba(12,49,6,0.66); }
.adv_4_1 { margin-bottom: 4vw; }

.adv_4_2 { position: relative; }
.adv_4_2_mid { margin-left: 115px; margin-right: 115px; }
.adv_4_2_mid_1 h3 { display: inline-block; position: relative; font-size: 3.75em; }
.adv_4_2_mid_1 h3 span.l { position: absolute; left: 0; top: 0; }
.adv_4_2_mid_2 { font-size: 1.125em; line-height: 1.8; margin-top: 3.5vw; margin-bottom: 1em; }

.adv_5 { padding: 8.54166666666667vw 0; }
.adv_5_mid_left { float: left; width: 58%; }
.adv_5_mid_right { overflow: hidden; float: right; width: 38.9375%; }
.adv_5_mid_right img { width: 100%; }

.adv_5_mid_left .y_index_1_1,
.adv_5_mid_left .y_index_1_2 { text-align: left; }
.adv_5_mid_left .y_index_1_1 { margin-top: 0; }
.adv_5_mid_left .y_index_1_2 { margin-bottom: 0; }

.adv_5_mid_left_1 { line-height: 1.8; margin-top: 1vw; }

.adv_5_mid_left_2 ul li { float: left; width: 49%; margin-bottom: 2em; }
.adv_5_mid_left_2 ul li:nth-child(2n) { float: right; }
.adv_5_mid_left_2_mid_left { width: 75px; float: left; margin-right: 1em; }
.adv_5_mid_left_2_mid_right_1 { font-size: 1.5em; margin-top: .4em; }
.adv_5_mid_left_2_mid_right_2 { line-height: 1.5; margin-top: 5px; }
.adv_5_mid_left_2 { margin-top: 4vw; }

/* --- Map / Contact --- */
.contact_1 { position: relative; }
.contact_1 img { max-width: none; }

#map { height: 49.89583333333333vw; }

.dsk {
    background-color: #000;
    border-radius: 50%;
    opacity: 0;
    -webkit-animation: ripple 4s ease-out 225ms infinite;
    animation: ripple 4s ease-out 225ms infinite;
    position: absolute;
    left: 0;
    top: 0;
    width: 60px;
    height: 60px;
    z-index: 1;
}

@-webkit-keyframes ripple { 0%{opacity:0;transform:scale(.1,.1)} 5%{opacity:1} 100%{opacity:0;transform:scale(1.8)} }
@keyframes ripple         { 0%{opacity:0;transform:scale(.1,.1)} 5%{opacity:1} 100%{opacity:0;transform:scale(1.8)} }
@-webkit-keyframes ripple2{ 0%{opacity:1;transform:scale(1.1,1.1)} 5%{opacity:1} 100%{opacity:0;transform:scale(1.8)} }
@keyframes ripple2        { 0%{opacity:1;transform:scale(1.1,1.1)} 5%{opacity:1} 100%{opacity:0;transform:scale(1.8)} }

.dsk::before {
    content: '';
    display: block;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    border-radius: 50%;
    background-color: #000;
    opacity: 0;
    width: 60px;
    height: 60px;
    -webkit-animation: ripple2 4s ease-out 925ms infinite;
    animation: ripple2 4s ease-out 925ms infinite;
}

.mapmid {
    max-width: 625px;
    position: absolute;
    z-index: 10;
    right: 5.20833333333333vw;
    bottom: 5.20833333333333vw;
}

.mapmid_jj { overflow: hidden; background-color: #fff; padding: 3.64583333333333vw; }
.mapmid_jj_1 { font-family: "Times New Roman", Times, serif; font-size: 2.25em; }
.mapmid_jj_2 { font-size: 1.25em; margin-bottom: 1.5em; }

.mapmid_jj_3 dl dd {
    padding-left: 1.5em;
    margin-top: .3em;
    font-size: 1.125em;
    line-height: 1.6;
    position: relative;
}

.mapmid_jj_3 dl dd img { position: absolute; left: 0; top: .5em; }

.contact_2 { background-size: cover; padding-top: 9.89583333333333vw; color: #fff; overflow: hidden; background-image: url(../images/contact/img4.jpg); }
.contact_2_1 { text-align: center; }

.contact_2_2_mid {
    color: #fff;
    padding: 2.60416666666667vw;
    overflow: hidden;
    height: 17vw;
    background-color: rgba(0,0,0,0.24);
    cursor: pointer;
}

.contact_2_2_mid_jj_1 span {
    padding-left: 1em;
    font-size: 1.875em;
    position: relative;
    display: inline-block;
}

.contact_2_2_mid_jj_1 span::after {
    position: absolute;
    left: 0;
    top: .25em;
    content: '';
    width: 0.6666666666666667em;
    height: 0.9333333333333333em;
    background-image: url(../images/footer/img5.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.contact_2_2_mid_jj_2 dl dd {
    float: left;
    line-height: 1.6;
    width: 49%;
    margin-bottom: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contact_2_2_mid_jj_2 dl dd:nth-child(2n) { float: right; }
.contact_2_2_mid_jj_2 { margin: 1.5em 0; }

.contact_2_2_mid_jj_3 span {
    display: block;
    border: 1px #fff solid;
    width: 128px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border-radius: 30px;
}

.contact_2_2 { margin-top: 5em; }

/* --- Users / U page --- */
.u_1 { text-align: center; padding-top: 6.92708333333333vw; }
.u_2 { margin: 0 auto; max-width: 1440px; text-align: center; margin-top: 4.16666666666667vw; }

.u_2 ul li { float: left; width: 25%; text-align: center; }
.u_2_mid { border-left: 1px #e5e5e5 solid; }
.u_2 ul li:nth-child(1) .u_2_mid { border: none; }
.u_2_mid_1 img { max-width: 7.39583333333333vw; }
.u_2_mid_2 { font-size: 1.25em; margin-top: .875em; }

.u_3 {
    overflow: hidden;
    margin-top: 11.875vw;
    padding-bottom: 7.5vw;
    background-attachment: fixed;
    background-image: url(../images/u/img5.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: #fff;
}

.u_3_1 { text-align: center; margin-top: 3em; padding-bottom: 4em; }

.u_3_1 a {
    display: inline-block;
    border: 1px #fff solid;
    line-height: 2em;
    border-radius: 2em;
    padding: 0 1.5em;
    color: #fff;
    margin: 0 5px;
}

.u_3_1 a.on { background-color: #fff; color: #000; }

.u_3_2 ul li { float: left; width: 32%; margin-right: 2%; margin-bottom: 1.5em; }
.u_3_2 ul li:nth-child(3),
.u_3_2 ul li:nth-child(4) { margin-right: 0; }
.u_3_2 ul li:nth-child(4) { width: 100%; }

.u_3_2 ul li input,
.u_3_2 ul li textarea { border: none; background: none; width: 100%; color: #fff; }
.u_3_2 ul li div { border-bottom: 1px #fff solid; padding-bottom: 1em; }
.u_3_2 ul li textarea { height: 145px; }

.u_3_3 a {
    display: block;
    margin: 0 auto;
    max-width: 575px;
    height: 65px;
    line-height: 65px;
    text-align: center;
    background-color: #fff;
    color: #000;
    border-radius: 65px;
}

.u_3_3 { margin-top: 2em; }
.u_3_3 a:hover { background-color: #333; color: #fff; }

/* --- Misc pages --- */
.mr_1 { background-color: #e4e4e4; overflow: hidden; }
.mr_1_1 { text-align: center; }
.mr_2 .y_index_1_1,
.mr_2 .y_index_1_2 { text-align: left; }

.mr_2_1_mid { padding-top: 2em; padding-bottom: 4em; position: relative; text-align: center; }
.mr_2_1_mid_1 { font-size: 1.875em; margin-bottom: .2em; }
.mr_2_1_mid_2 { font-size: 1.125em; line-height: 1.6; }

.mr_2_1_mid::after {
    z-index: 10;
    opacity: 0;
    transition: all .5s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
    content: '';
    position: absolute;
    left: 50%;
    bottom: 1px;
    height: 1px;
    background-color: #000;
    width: 9.375em;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}

.mr_2_1 { position: relative; margin-bottom: 7vw; border-bottom: 1px #d0d0d0 solid; }
.swiper-slide.swiper-slide-active .mr_2_1_mid::after { opacity: 1; }

.mr_3 {
    padding-bottom: 14.79166666666667vw;
    background-image: url(../images/m/img3.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    background-attachment: fixed;
}

.mr_3_1 { color: #fff; }
.mr_3_2 { margin: 0 auto; max-width: 1145px; }
.mr_3_2_mid { padding-right: 80px; padding-left: 2vw; position: relative; background-color: #fff; }

.mr_3_2_mid_right {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    z-index: 10;
    width: 70px;
    background-image: url(../images/m/img4.png);
    background-position: center;
    background-repeat: no-repeat;
}

.mr_3_2_mid_right input {
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.mr_3_2_mid_left input { color: #000; font-size: 1.125em; border: none; background: none; width: 100%; height: 25px; line-height: 25px; }
.mr_3_2_mid_left { padding: 1.6em 0; }

/* --- Swiper pagination --- */
#okg {
    margin-bottom: 2em;
    left: 0;
    position: relative;
    background: none;
    width: 100%;
    margin-top: 4.6875vw;
}

#okg::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    height: 1px;
    margin-top: -.5px;
    background-color: #d5d5d5;
    width: 100%;
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    z-index: 10;
    background-color: #000;
}

.okp { text-align: center; padding-bottom: 6.51041666666667vw; }
.okp dl dd {
    margin: 0 .75em;
    cursor: pointer;
    display: inline-block;
    border: 1px #1b5f43 solid;
    width: 10px;
    height: 10px;
    border-radius: 100%;
}

.okp dl dd.on { background-color: #1b5f43; }

/* --- Job info modal --- */
.jobinfo {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 99999999999999;
    background-color: rgba(0,0,0,0.5);
    -webkit-overflow-scrolling: touch;
}

.jobinfo_mid { margin: 0 auto; padding: 0 1em; max-width: 1024px; }

.jobinfo_mid_jj {
    background-color: #fff;
    position: relative;
    border-radius: 1em;
    padding: 1.5em;
}

.close { cursor: pointer; text-align: right; }
.jobinfo_mid_jj_1 { font-size: 1.5em; padding: .5em 0; border-bottom: 1px #dedede solid; padding-top: 0; }
.jobinfo_mid_jj_2 { line-height: 1.8; margin-top: 1.5em; }

/* --- Pop modal --- */
.popshow {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    z-index: 9999999999999999;
    text-align: center;
    background-color: #fff;
    -webkit-overflow-scrolling: touch;
}

.popshow_mid { position: relative; width: 900px; max-width: 80%; margin: 0 auto; }

.pclose {
    width: 36px;
    height: 36px;
    background: none;
    border-radius: 50%;
    position: absolute;
    margin: 3.48958333% 0 0;
    right: -13.33333333%;
    top: 0;
    background: url(../images/close.png) no-repeat center center;
    background-size: contain;
    cursor: pointer;
}

/* --- Search body --- */
.searchbody { padding-top: 9vw; padding-bottom: 8vw; }

.searchbody_2_mid_left { float: left; width: 36.5%; overflow: hidden; }
.searchbody_2_mid_left img { width: 100%; }
.searchbody_2_mid_right { padding-top: 2.86458333333333vw; float: right; width: 56.875%; position: relative; }

.searchbody_2_mid_right_1 { font-size: 1.5em; color: #23654a; }
.searchbody_2_mid_right_2 { font-size: 3em; color: #000; margin-top: .1em; border-bottom: 1px #dfdfdf solid; padding-bottom: .5em; margin-bottom: .5em; }
.searchbody_2_mid_right_3 { font-size: 1.875em; }

.searchbody_2_mid_right_4 ul li { margin-top: 1vw; float: left; width: 18.68131868131868%; margin-right: 1.64835164835165%; }
.searchbody_2_mid_right_4 ul li:nth-child(5n) { margin-right: 0; }

.searchbody_2_mid_right_4_mid { position: relative; padding: 0 3px; }
.searchbody_2_mid_right_4_mid img {
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    width: 100%;
}

.searchbody_2_mid_right_4_mid { height: 6.77083333333333vw; overflow: hidden; }

.searchbody_2_mid_right_4_mid p {
    position: absolute;
    left: 0;
    bottom: 10px;
    min-width: 110px;
    background-image: url(../images/m/img7.png);
    color: #fff;
    line-height: 18px;
}

.searchbody_2_mid_right_4_mid p span {
    padding-left: 15px;
    background-image: url(../images/m/img8.png);
    margin-left: 8px;
    font-size: 14px;
    background-position: left center;
    background-repeat: no-repeat;
}

.adv_3_act_ss {
    position: relative;
    left: 0;
    bottom: 0;
    height: 3.125em;
    margin-top: 2.34375vw;
}

.searchbody_2_mid_right .ay_news_info_1_mid_right { top: 0; -webkit-transform: translate(0,0); transform: translate(0,0); }

.searchbody_2_mid_left_p { float: left; width: 43.4375%; }
.searchbody_2_mid_right_p { float: right; width: 51.5625%; padding-top: 5vw; position: relative; }

.searchbody_2_mid_right_p .ay_news_info_1_mid_right { -webkit-transform: translate(0,0); transform: translate(0,0); top: 0; }

.searchbody_2_mid_left_p_img { overflow: hidden; }
.searchbody_2_mid_left_p_img img { width: 100%; }

.searchbody_2_mid_left_p_img_mask {
    background-size: cover;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 10;
}

.searchbody_2_mid_left_p_img_mask::after {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1.3125em;
    height: 1.375em;
    background-image: url(../images/product/img7.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: all 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

.searchbody_2_mid_left_p:hover .searchbody_2_mid_left_p_img_mask::after { opacity: 1; }

.searchbody_2_mid_right_p_1_1 span {
    padding-left: .65em;
    font-size: 1.125em;
    position: relative;
    display: inline-block;
}

.searchbody_2_mid_right_p_1_1 span::after {
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: .6em;
    height: .6em;
    border-radius: 100%;
    background-color: #000;
}

.searchbody_2_mid_right_p_1_2 { font-size: 1.125em; line-height: 1.6; }
.searchbody_2_mid_right_p_1 ul li { border-bottom: 1px #dfdfdf solid; padding: 1.5em 0; }
.searchbody_2_mid_right_p_1 ul li:nth-child(1) { padding-top: 0; }
.searchbody_2_mid_right_p_1_2 { margin-top: 1em; }
.searchbody_2_mid_right_p_1_3 { margin-top: 1em; }

.searchbody_2_mid_right_p_1_3 dl dd {
    margin-right: .5em;
    cursor: pointer;
    display: inline-block;
    width: 2.1875em;
    height: 2.1875em;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 100%;
}

.searchbody_2_mid_right_p_1 ul li:last-child { border: none; }

.searchbody_3_pro_mid { position: relative; }
.searchbody_3_pro { margin: 8.33333333333333vw 0 0 0; }
.searchbody_4_pro_mid { margin-bottom: 6vw; font-size: 1.5em; line-height: 1.6; padding: 2.6vw 0; border-bottom: 1px #d4d4d4 solid; }

.pwud { margin-top: 1em; }
.pwud span {
    font-size: 1.125em;
    padding-left: 1.5em;
    color: #000;
    display: inline-block;
    position: relative;
}

.pwud span::after {
    top: 50%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    content: '';
    position: absolute;
    left: 0;
    width: 0.9444444444444444em;
    height: 0.9444444444444444em;
    background-image: url(../images/product/img9.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* --- YWY pages (About/Contact/Product variants) --- */
.ywy_about_1 { padding: 6.5vw 0; }

.ywy_about_1_mid ul li { float: left; }
.ywy_about_1_mid ul li:nth-child(1) { width: 17%; }
.ywy_about_1_mid ul li:nth-child(2) { width: 32%; }
.ywy_about_1_mid ul li:nth-child(3) { width: 26%; }
.ywy_about_1_mid ul li:nth-child(4) { width: 25%; }

.ywy_about_1_mid_mid { border-left: 1px #dbdbdb solid; padding: 0 4vw; }
.ywy_about_1_mid ul li:nth-child(1) .ywy_about_1_mid_mid { padding-left: 0; border: none; }
.ywy_about_1_mid ul li:nth-child(4) .ywy_about_1_mid_mid { padding-right: 0; }
.ywy_about_1_mid_mid_1 { font-size: 1.125em; }
.ywy_about_1_mid_mid_1 span { font-size: 6em; font-weight: bold; }
.ywy_about_1_mid_mid_2 { font-size: 1.25em; }

.ywy_about_2 { margin-bottom: 10vw; }
.ywy_about_2_mid_left { float: left; width: 51.5%; overflow: hidden; }
.ywy_about_2_mid_left img { width: 100%; }
.ywy_about_2_mid_right { float: right; width: 40.625%; }
.ywy_about_2_mid_right .y_index_1_1,
.ywy_about_2_mid_right .y_index_1_2 { text-align: left; }
.ywy_about_2_mid_right .y_index_1_1 { margin-top: 2vw; }
.ywy_about_2_mid_right .y_index_1_2 { margin-bottom: 1vw; }
.ywy_about_2_mid_right_1 { line-height: 1.8; }

.ywy_about_3 {
    background-attachment: fixed;
    background-image: url(../images/about/img5.jpg);
    overflow: hidden;
    color: #fff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.ywy_about_3 ul li { position: relative; height: 46.25vw; float: left; width: 33.3333%; }

.ywy_about_3_top {
    top: 2.34375vw;
    border: 1px #fff solid;
    width: 6.77083333333333vw;
    height: 6.77083333333333vw;
    position: absolute;
    right: 2.34375vw;
    text-align: center;
    border-radius: 100%;
}

.ywy_about_3_top img { max-width: 60%; }

.ywy_about_3 ul li::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 1px;
    background-color: #fff;
    opacity: .22;
}

.ywy_about_3_footer { position: absolute; left: 0; width: 100%; top: 34vw; }
.ywy_about_3_footer_mid { margin: 2.34375vw; }
.ywy_about_3_footer_mid_1 { font-size: 3em; margin-bottom: .1em; }
.ywy_about_3_footer_mid_2 { font-size: 1.5em; }
.ywy_about_3_footer_mid_3 { opacity: 0; line-height: 1.8; margin-top: 3vw; }

.ywy_about_3 ul li.kuan .ywy_about_3_footer { top: auto; bottom: 0; }
.ywy_about_3 ul li.kuan { width: 50%; }
.ywy_about_3 ul li.zhai { width: 25%; }
.ywy_about_3 ul li.kuan .ywy_about_3_footer_mid_3 { opacity: 1; }
.ywy_about_3 ul li.kuan .ywy_about_3_top { background-color: rgba(27,95,67,0.5); border-color: rgba(27,95,67,0.5); }

.ywy_about_4,
.ywy_about_5 { background-color: #fff; position: relative; z-index: 10; }

.ywy_about_4_mid { display: flex; flex-direction: column; position: relative; flex-flow: row wrap; }
.ywy_about_4_mid_left { position: relative; width: 57%; }
.ywy_about_4_mid_right { width: 43%; position: sticky; position: -webkit-sticky; top: 0; z-index: 1; overflow: hidden; }
.ywy_about_4_mid_right .y_index_1_1,
.ywy_about_4_mid_right .y_index_1_2 { text-align: left; }
.ywy_about_4_mid_right_1_1 { font-size: 1.875em; }
.ywy_about_4_mid_right_1_2 { margin-top: 10px; font-size: 1.125em; line-height: 1.6; margin-bottom: 2.8em; }

#tree-frames-container img { display: none; width: 90%; max-width: 600px; aspect-ratio: 1 / 1; position: relative; margin: 0 auto; }
#tree-frames-container img:nth-child(1) { display: block; }
#tree-frames-container { text-align: center; }

.ywy_about_5 {
    overflow: hidden;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(../images/about/img9.jpg);
}

.ywy_about_5_1 { color: #333; line-height: 2; margin-bottom: 2.86458333333333vw; }
.ywy_about_5 .y_index_1_2 { margin-bottom: 2.86458333333333vw; }
.ywy_about_5_2 { text-align: center; margin-bottom: 2.86458333333333vw; }
.ywy_about_5_3_1 { position: relative; }

.ywy_about_5_3_1_img { left: 13%; top: 8%; position: absolute; width: 73.125%; }
.ywy_about_5_3_1_img img { width: 100%; }
.ywy_about_5_3_1_name { text-align: center; padding: 0 1em; word-break: break-all; font-size: 16px; }

/* YWY Contact */
.ywy_contact_1 { margin: 7.8125vw 0; }
.ywy_contact_1_1_right { float: right; width: 70%; overflow: hidden; }
.ywy_contact_1_1_left { float: left; width: 30%; margin-top: 5.72916666666667vw; }
.ywy_contact_1_1_right img { width: 100%; }
.ywy_contact_1_1_left_mid { padding-right: 1em; }
.ywy_contact_1_1_left .y_index_1_1,
.ywy_contact_1_1_left .y_index_1_2 { text-align: left; }
.ywy_contact_1_1_left .y_index_1_1 { margin-top: 0; }
.ywy_contact_1_1_left .y_index_1_2 { margin-bottom: 0; }
.ywy_contact_1_1_left_mid_1 { font-size: 2.25em; margin-top: 2.86458333333333vw; }
.ywy_contact_1_1_left_mid_3 ul li { font-size: 1.125em; margin-bottom: .5em; line-height: 1.6; }
.ywy_contact_1_1_left_mid_3 { margin-top: 1.5625vw; margin-bottom: 1.5vw; }

.ywy_contact_1_1_left_mid_4 a {
    color: #000;
    display: block;
    width: 10em;
    border-bottom: 1px #000 solid;
    padding-bottom: 5px;
}

.ywy_contact_1_1_left_mid_4 a span {
    display: block;
    font-size: 1.125em;
    background-position: right center;
    background-repeat: no-repeat;
    background-image: url(../images/contact/img2.png);
}

.ywy_contact_2 { position: relative; }
#map_canvas { height: 52vw; width: 135vw; left: -35vw; }

.ywy_contact_2_mid {
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    position: absolute;
    z-index: 10;
    background-color: #fff;
    top: 50%;
    width: 540px;
    right: 8.33333333333333%;
    height: 41vw;
    max-height: 41vw;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.ywy_contact_2_mid_mid { padding: 3.64583333333333vw; }
.ywy_contact_2_mid_mid_1 { font-size: 3em; font-weight: bold; }
.ywy_contact_2_mid_mid_2_1 { font-size: 1.25em; }
.ywy_contact_2_mid_mid_2_2 { line-height: 1.5; padding-top: 5px; }
.ywy_contact_2_mid_mid_2_2 dd { margin-top: 5px; }
.ywy_contact_2_mid_mid_2 ul li { cursor: pointer; margin-bottom: 1em; padding-bottom: 1em; border-bottom: 1px #e2e2e2 solid; padding-top: 1em; }
.ywy_contact_2_mid_mid_2 ul li:last-child { border: none; }
.ywy_contact_2_mid_mid_2 ul li.on .ywy_contact_2_mid_mid_2_1 { color: #225815; }

/* YWY Products */
.ywy_p_1_mid { position: relative; padding-right: 27.5%; }
.ywy_p_1 .adv_mid { border-top: 1px #dfdfdf solid; padding-top: 1em; }
.ywy_p_1_mid_left { padding-right: 2em; }
.ywy_p_1_mid_right { position: absolute; right: 0; top: 1em; width: 27.5%; }

.ywy_p_1_mid_right_mid {
    padding-left: 44px;
    border: 1px #bdbdbd solid;
    border-radius: 2.1875em;
    position: relative;
}

.ywy_p_1_mid_right_mid_right input {
    border: none;
    background: none;
    width: 100%;
    height: 2.1875em;
    line-height: 2.1875em;
}

.ywy_p_1_mid_right_mid_left {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 44px;
}

.ywy_p_1_mid_right_mid_left input {
    border: none;
    background: none;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-image: url(../images/footer/img5.png);
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
}

.ywy_p_1_mid_left ul li { margin-top: 1em; display: inline-block; margin-right: 5px; }

.ywy_p_1_mid_left ul li a {
    transition: all .5s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
    display: block;
    background-color: #eeeeee;
    padding: 0 1em;
    line-height: 1.875em;
    border-radius: 1.875em;
    color: #000;
}

.ywy_p_1_mid_left ul li a:hover,
.ywy_p_1_mid_left ul li a.on { background-color: #333; color: #fff; }

.ywy_p_1_mid_left ul li a span {
    position: relative;
    padding-right: 1.5em;
    display: block;
    font-size: 1.125em;
}

.ywy_p_1_mid_left ul li a span::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
}

.ywy_p_2_1 { margin-top: 2.6vw; margin-bottom: 4vw; }

.ywy_p_2_1 ul li { margin-right: 1.66666666666667%; float: left; width: 23.75%; margin-top: 2.6vw; }
.ywy_p_2_1 ul li:nth-child(4n) { margin-right: 0; }

.ywy_p_2_1_1 { position: relative; overflow: hidden; }
.ywy_p_2_1_1 img { width: 100%; }
.ywy_p_2_1_3 { font-size: .875em; color: #666; }

.ywy_p_2_1_1_bg {
    background-size: cover;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
}

.ywy_p_2_1_1_bg.on { opacity: 1; z-index: 10; }

.ywy_p_2_1_2 { margin-top: 1em; color: #000; position: relative; padding-right: 120px; }
.ywy_p_2_1_2_right { position: absolute; right: 0; top: 0; z-index: 10; }

.ywy_p_2_1_2_right dl dd {
    margin-left: 2px;
    cursor: pointer;
    display: inline-block;
    width: 13px;
    height: 13px;
    border-radius: 100%;
    background-position: center;
    background-repeat: no-repeat;
}

.ywy_p_2_1_2_left { font-size: 1.125em; }

.ywy_p_2_1_1_case {
    opacity: 0;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 100;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: all 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

.ywy_p_2_1 ul li .ywy_p_2_1_1:hover .ywy_p_2_1_1_case {
    opacity: 1;
    transform: scale(1.08, 1.08);
}

/* Contact nybanner body */
body.nybody .header_mid_mid ul li a.biga,
body.nybody .header_mid_right dl dd a { color: #000; }

/* --- LX about --- */
.lx_about_6_mid_2_img { height: 110px; }
.lx_about_6_mid_2_img img { max-width: 90%; }

/* --- Scroll to top button --- */
#scrollToTopBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: black;
    color: white;
    cursor: pointer;
    width: 50px;
    height: 50px;
    font-size: 30px;
    text-align: center;
    line-height: 50px;
    border-radius: 4px;
    /* iOS safe area bottom */
    bottom: max(20px, env(safe-area-inset-bottom));
}

#scrollToTopBtn:hover { background-color: #555; }

/* --- Contact form (CSS2) --- */
/* ============================================================
   CONTAINER — fluid, matches site's 5.2% margin convention
   ============================================================ */

/*
   Site uses 5.20833% side margins (= 100px on 1920px screen).
   Container follows the same system:
   width 89.58333% = 100% - (2 × 5.20833%)
   Scales naturally across all screen sizes without breakpoint hacks.
*/
.container {
    width: 89.58333333333333%;        /* mirrors site's nymid/adv_mid margin */
    max-width: 1720px;                /* cap at ~1920px base with side gutters */
    margin-top: 5.72916666666667vw;   /* matches footer_mid top spacing */
    margin-bottom: 5.72916666666667vw;
    margin-left: auto;
    margin-right: auto;
    padding: 3.64583333333333vw 4.16666666666667%;  /* matches mapmid_jj padding */
    background: #fff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border-radius: 10px;
}

/* When .container sits inside .nymainbody (sub-pages), push below fixed header */
.nymainbody .container {
    margin-top: 6.25vw;
}

/* ============================================================
   FORM GRID — CSS Grid 2-col, no HTML changes needed
   Works with: .form-group divs, <p> tags, bare wrappers
   ============================================================ */

h2 {
    text-align: center;
    color: #000;
    font-family: 'AlibabaPuHuiTi-2-45-Light', sans-serif;
    font-size: clamp(1.25em, 2.5vw, 2em);
    margin-bottom: 0.4em;
}

/* Special untuk "HeveaBoard Berhad" title sahaja. */
.hbb-title {
    font-family: 'AlibabaPuHuiTi-2-45-Light', sans-serif;
    font-size: clamp(1.75em, 2.34375vw, 3em) !important;
    text-align: center !important;
    line-height: 1.2 !important;
    letter-spacing: 0.01em;
    margin-top: 0;
    margin-bottom: 0.5em;
    display: block;
}

/* Sub-heading / intro text inside container */
.container p,
.container > p {
    text-align: center;
    font-size: clamp(0.875em, 1.04166vw, 1.125em);
    line-height: 1.7;
    color: #444;
    margin-bottom: 2em;
}

/* ── FORM GRID WRAPPER ── */
.container form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(14px, 1.302083vw, 25px) clamp(20px, 2.08333vw, 40px);
    align-items: start;
}

/* ── DEFAULT: every .form-group = 1 column ── */
.container form .form-group,
.container form p.form-group {
    grid-column: span 1;
    margin-bottom: 0;    /* gap handles spacing now */
    min-width: 0;        /* prevent grid blowout */
}

/* ── FULL-WIDTH items (span both columns) ── */
.container form .form-group.full-width,
.container form .form-group--full,
.container form .form-submit,
.container form .submit-wrap,
.container form .form-group:has(textarea),
.container form .form-group:has(select[multiple]) {
    grid-column: span 2;
}

/* Fallback for browsers without :has() support —
   add class .full-width manually to Message/submit rows  */

/* ── LABELS ── */
.container form label,
.container label {
    display: block;
    margin-bottom: 6px;
    font-size: clamp(0.8125em, 0.9375vw, 1em);
    font-weight: 500;
    color: #333;
}

/* ── INPUTS, SELECTS, TEXTAREAS ── */
.container input,
.container textarea,
.container select {
    width: 100%;
    padding: clamp(9px, 0.677083vw, 13px) clamp(10px, 0.78125vw, 15px);
    border: 1px solid #d8d8d8;
    border-radius: 5px;
    font-size: clamp(14px, 0.9375vw, 17px);
    font-family: 'AlibabaPuHuiTi-2-45-Light', sans-serif;
    color: #262626;
    background-color: #fff;
    line-height: 1.5;
    margin-top: 3px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    /* Cross-device fixes */
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-sizing: border-box;
}

.container select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23333' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
    cursor: pointer;
}

.container input:focus,
.container textarea:focus,
.container select:focus {
    border-color: #046A38;
    outline: none;
    box-shadow: 0 0 0 3px rgba(4, 106, 56, 0.12);
}

.container input::placeholder,
.container textarea::placeholder {
    color: #aaa;
}

.container textarea {
    resize: vertical;
    min-height: clamp(120px, 9.375vw, 180px);
    -webkit-appearance: none;
}

/* ── SUBMIT BUTTON ── */
.container button[type="submit"],
.container input[type="submit"],
.container .btn-submit {
    grid-column: span 2;
    width: 100%;
    padding: clamp(13px, 1.04166vw, 20px);
    background-color: #046A38;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: clamp(15px, 1.04166vw, 18px);
    font-weight: 600;
    font-family: 'AlibabaPuHuiTi-2-45-Light', sans-serif;
    letter-spacing: 0.04em;
    transition: background-color 0.25s ease, transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    margin-top: 0.5em;
}

.container button[type="submit"]:hover,
.container input[type="submit"]:hover,
.container .btn-submit:hover {
    background-color: #035530;
}

.container button[type="submit"]:active,
.container input[type="submit"]:active {
    transform: translateY(1px);
}

/* Generic button fallback (non-submit) */
.container button:not([type="submit"]) {
    background-color: #000;
    color: #fff;
}

.container button:not([type="submit"]):hover {
    background-color: #333;
}

/* ── FORM HELPER CLASSES ── */
.form-row {
    display: contents; /* lets children participate in parent grid */
}

.form-group {
    min-width: 0;
    margin-bottom: 0;
}

.form-group.full-width { grid-column: span 2; }

.contact-info { margin-top: clamp(20px, 2.08333vw, 40px); }

.contact-info p,
.contact-info a {
    margin: 5px 0;
    font-size: clamp(14px, 1.04166vw, 18px);
    color: #000;
}

.contact-info a:hover { text-decoration: underline; }

.social-media { display: flex; justify-content: center; margin-top: clamp(16px, 1.5625vw, 30px); }
.social-media a { margin: 0 10px; color: #000; font-size: clamp(20px, 1.5625vw, 28px); text-decoration: none; }
.social-media a:hover { color: #0056b3; }

iframe {
    width: 100%;
    border: 0;
    border-radius: 10px;
    height: clamp(300px, 26.041666vw, 500px);
    grid-column: span 2;   /* span full width if inside form grid */
}

/* ============================================================
   SECTION 14B: CUSTOM SLIDER / IMAGE GRID
   ============================================================ */

.custom-slider-section {
    padding: clamp(16px, 1.5625vw, 30px);
}

.custom-swiper-container {
    position: relative;
}

.custom-image-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
    justify-content: left;
}

/* Default: 6 images per row — desktop/large screen */
.custom-image-list li {
    width: calc(100% / 6 - 10px);
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-image-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-cell {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-holder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.custom-pagination {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 5px;
}

.custom-navigation dl {
    display: flex;
    gap: 5px;
}

.active-slide {
    background-color: #000;
    border-radius: 50%;
    width: 10px;
    height: 10px;
}

/* ============================================================
   SECTION 15: MEDIA QUERIES
   Breakpoints (largest → smallest):
   1600px+ | 1680px | 1350px | 1200px | 1080px | 980px
   850px | 768px | 640px | 480px
   ============================================================ */

/* --- LARGE SCREENS (≥1600px) --- */
@media screen and (min-width: 1600px) {
    .desktop-menu a,
    .submenu a,
    .sub-submenu a,
    .sub-sub-submenu a,
    .sub-sub-sub-submenu a,
    .language-select { font-size: 18px; }

    .desktop-menu a { padding: 12px 16px; }

    .submenu a,
    .sub-submenu a,
    .sub-sub-submenu a,
    .sub-sub-sub-submenu a { padding: 14px 18px; }

    .navbar,
    .custom-navbar { padding: 12px 30px; }
    /* Large desktop — container padding boost */
    .container { padding: 3.125vw 3.64583333333333%; }
    h2 { font-size: 2em; }
    .container form { gap: clamp(16px, 1.5625vw, 28px) clamp(24px, 2.5vw, 48px); }
    .form-group { margin-bottom: 0; }
    .container input, .container textarea, .container select { font-size: 18px; }
    .container button[type="submit"], .container input[type="submit"] { font-size: 18px; padding: 18px; }
}

/* --- ≤1680px --- */
@media screen and (max-width: 1680px) {
    .header_mid_mid ul li:last-child { margin-right: 1em; }
    .header_mid_right { width: 200px; }
    .ywy_about_3_footer_mid_1 { font-size: 2em; }
    .ywy_about_3_footer_mid_2 { font-size: 1.125em; }
    .ywy_about_1_mid_mid_1 span { font-size: 4em; }
    .searchbody_4_pro_mid { font-size: 1.125em; }
    .pwud span,
    .searchbody_2_mid_right_p_1_2 { font-size: 1em; }
    .ywy_contact_1_1_left { margin-top: 0; }
    .ywy_contact_2_mid { height: 47vw; max-height: 47vw; }
    .ywy_contact_2_mid_mid_2 ul li { margin-bottom: 0; }
    .ywy_contact_2_mid_mid_1 { font-size: 2em; }
    .ywy_contact_1_1_left_mid_1 { font-size: 1.5em; }
    .searchbody_2_mid_right_3 { font-size: 1.5em; }
    .searchbody_2_mid_right_2 { font-size: 2em; }
    .searchbody_2_mid_right_1 { font-size: 1.125em; }
    .mr_2_1_mid_1 { font-size: 1.5em; }
    .mr_2_1_mid_2 { font-size: 1em; }
    .ay_news_1_1_jj_mid_2 { font-size: 1.25em; }
    .adv_5_mid_left_2_mid_left { width: 60px; }
    .adv_5_mid_left_2_mid_right_1 { font-size: 1.25em; }
    .adv_4_2_mid_1 h3 { font-size: 2.5em; }
    .adv_2_mid_right_1 { font-size: 1.375em; }
    .adv_2_mid_right_2 { font-size: 1em; }
    .y_case_1_1_mid_right_2 { font-size: 1.5em; }
    .bannerdes_2 { font-size: 1.5em; }
    .bannerdes_1 { font-size: 4em; }
    .y_team_2_1_mid_right_1 { font-size: 2em; }
    .y_team_2_1_mid_right_2 { font-size: 1.125em; }
    .y_team_1_3_act_l_1 { font-size: 2.5em; }
    .y_team_1_1 { font-size: 1.875em; }
    .y_team_1_2 { font-size: 3em; }
    .footer_y_1_right_mid_1 ul li { margin-left: 6.5vw; }
    .footer_mid { margin: 0 2.9%; }
    .y_index_4_1_2_mid { font-size: .875em; }
    .pro_info_1_mid_right_mid { margin: 0 6.77083333333333vw; }
    .y_index_2_mask_3 a { font-size: .875em; }
    .y_index_1_2 { font-size: 1.25em; }
    .y_index_2_mask_2 { font-size: 2.5em; }
    .banner_img_jj_mid_1_f_1 { font-size: 3.25em; }
    .banner_img_jj_mid_2_f_2 { font-size: 1.875em; }
    .indexbanner_down a { font-size: 1.25em; }
    .banner_img_jj_mid_2_f { font-size: 1.5em; }
    .banner_img_jj_mid_1_f { font-size: 3em; }
    .banner_img_jj_mid_img img { max-width: 9vw; }
    .index_1_mid_mid_2 { padding: 0 3vw; }
    .about_3_2_jj_1 { font-size: 1.25em; }
}

/* --- ≤1350px --- */
@media screen and (max-width: 1350px) {
    .header_mid_right { width: 36px; }
    .header_mid_right_mid_left { display: none; }
}

/* --- ≤1200px --- */
@media screen and (max-width: 1200px) {
    #navi { display: none; }
    .header_mid_right_mid_right a { font-size: 16px; }
}

/* --- ≤1080px --- */
@media screen and (max-width: 1080px) {
    /* Slider: 5 per row on small laptop */
    .custom-image-list li { width: calc(100% / 5 - 10px); }
    .footer_y_1_right_mid_1 ul li { margin-left: 4vw; }
    .y_index_5 .y_index_1_2 { font-size: 1em; }
    .y_index_4_1_2_mid_1 { font-size: 1.5em; }
    .y_index_4_1_2_mid_2 { font-size: 16px; }
    .y_index_4 .y_index_1_2 { font-size: 1em; }
    .y_index_3 .y_index_1_2 { font-size: 1em; }
    .y_index_1_3 { padding: 0 4em; }
    .y_index_1_mid { margin: 0 2.60416666666667%; }
    .y_index_1 .y_index_1_2 { font-size: 1em; }
    .banner_img_jj_mid_1_f_1 { font-size: 2.5em; }
    .banner_img_jj_mid_2_f_2 { font-size: 1.5em; }
    .ywy_p_2_1_2 { padding-right: 80px; }
    .ywy_p_1_mid_left ul li a span { font-size: 1em; }
    .ywy_contact_1_1_left_mid_4 a span { font-size: 1em; }
    .ywy_contact_1_1_left_mid_3 ul li { font-size: 1em; }
    .ywy_contact_1_1_left_mid_1 { font-size: 1.25em; }
    .ywy_about_3_footer_mid_1 { font-size: 1.5em; }
    .ywy_about_3_footer_mid_2 { font-size: 1em; }
    .ywy_about_1_mid_mid_1 span { font-size: 2.5em; }
    .ywy_about_1_mid_mid_1 { font-size: 1em; }
    .ywy_about_1_mid_mid_2 { font-size: 1em; }
    .searchbody_2_mid_right_3 { font-size: 1.25em; }
    .searchbody_2_mid_right_1 { font-size: 1em; }
    .searchbody_2_mid_right_2 { font-size: 1.5em; }
    .ay_news_info_2_mid_2 { font-size: 1.25em; }
    .ay_news_info_1_mid_left { font-size: 1em; }
    .ay_news_info_1_mid_right a { font-size: .875em; }
    .ay_news_1_1 ul li dl dd { height: 32vw; }
    .adv_5_mid_left_2_mid_right_1 { font-size: 1.125em; }
    .adv_4_2_mid_1 h3 { font-size: 1.5em; }
    .adv_4_2_mid { margin-left: 60px; margin-right: 60px; }
    .adv_4_2_mid_2 { font-size: 1em; }
    .adv_3_mid_mid { bottom: 18vw; }
    .adv_3_act { width: 5.2em; }
    .adv_2_mid_right_1 { font-size: 1.25em; }
    .y_index_1_2 { font-size: 1.25em; }
    .y_index_2_mask_2 { font-size: 1.5em; }
    .bannerdes_2 { font-size: 1.25em; }
    .bannerdes_1 { font-size: 3em; }
    .y_team_2_1_mid_right_1 { font-size: 1.5em; }
    .y_index_1_3_left,
    .y_index_1_3_right { font-size: .75em; }
    .y_team_1_3_act_l_1 { font-size: 1.5em; }
    .y_team_1_1 { font-size: 1.5em; }
    .y_team_1_2 { font-size: 2em; }
    .y_index_4_mid,
    .adv_mid { margin: 0 2.60416666666667%; }
    .contact_2_2_mid { height: 25vw; }
    .contact_2_2_mid_jj_1 span { font-size: 1.375em; }
    .news_2_1_jj_2 { font-size: 1.25em; }
    .news_2_1_jj_3 { font-size: 1em; }
    .newsmid { margin: 0 3.125vw; }
    .pro_info_m { display: none; }
}

/* --- ≤980px --- */
@media screen and (max-width: 980px) {
    .y_index_2_mask_3 a { font-size: .6em; }
    .mr_3_2_mid_left input { font-size: 1em; }
    .mr_3_2_mid_left { padding-top: 1em; padding-bottom: 1em; }
    .mr_2_1_mid_1 { font-size: 1.25em; }
    #adv_3_act_m { position: relative; height: 3.125em; margin-left: auto; margin-right: 0; top: auto; bottom: 1em; right: 2.60416666666667%; }
    .adv_5_mid_right { width: 100%; }
    .adv_5_mid_left { width: 100%; }
    .adv_3_mid_left { width: 100%; float: none; }
    .adv_3_mid_mid { position: static; width: 100%; }
    .adv_3_mid_right { float: none; width: 100%; margin-top: 1em; }
    .adv_3_act { position: relative; left: auto; bottom: 0; height: 3.125em; margin: 0 auto; margin-top: 1.5em; }
}

/* --- ≤850px --- */
@media screen and (max-width: 850px) {
    .footer_y_1_left { width: 100%; }
    .footer_y_1_right { display: none; }
}

/* --- ≤768px (Tablet/Mobile) — CSS2 mobile menu activated --- */
@media screen and (max-width: 768px) {
    .desktop-menu { display: none; }
    /* Slider: 3 per row on mobile */
    .custom-image-list li { width: calc(100% / 3 - 10px); height: 120px; }
    .ywy_about_5_3_1_name { font-size: 10px; word-wrap: break-word; word-break: break-word; }

    .custom-hamburger {
        display: flex;
        flex-direction: column;
        cursor: pointer;
    }

    .custom-hamburger div {
        width: 20px;
        height: 2px;
        background-color: white;
        margin: 3px 0;
        transition: transform 0.3s, background-color 0.3s;
    }
}

/* --- ≤810px (original large mobile breakpoint) --- */
@media screen and (max-width: 810px) {
    /* Slider: 4 per row on tablet */
    .custom-image-list li { width: calc(100% / 4 - 10px); height: 110px; }
    /* Tablet container — slightly tighter than desktop */
    .container { width: 92%; padding: 4vw 4%; margin-top: 8vw; margin-bottom: 8vw; }
    .nymainbody .container { margin-top: 10vw; }
    .container form { grid-template-columns: 1fr 1fr; gap: 3vw 3%; }
 
    #map_canvas { height: 52vw; width: 100vw; left: 0; }
    .indexbanner_down a { font-size: 1em; }
    .banner_img_jj_mid_1_f_1 { font-size: 1.875em; }
    .banner_img_jj_mid_2_f_2 { font-size: 1.125em; }
    .y_index_5_1 ul li { width: 25%; }
    .searchbody_4_pro_mid { font-size: 1em; }
    .searchbody_2_mid_right_p_1_3 dl dd { font-size: .75em; }
    .searchbody_2_mid_left_p_img_mask { background-size: cover; }
    .searchbody_2_mid_left_p,
    .searchbody_2_mid_right_p { width: 100%; }
    .ywy_p_2_1 ul li { width: 32%; margin-right: 2%; }
    .ywy_p_2_1 ul li:nth-child(3n) { margin-right: 0; }
    .ywy_p_2_1 ul li:nth-child(4n) { margin-right: 2%; }
    .ywy_p_1_mid_right { position: relative; margin: 1em 0; width: 100%; }
    .ywy_p_1_mid { padding-right: 0; }
    .ywy_contact_2_mid_mid_1 { font-size: 1.5em; }
    .ywy_contact_2_mid { position: static; -webkit-transform: translate(0,0); transform: translate(0,0); width: 100%; height: auto; max-height: none; }
    .ywy_contact_1_1_right { width: 100%; margin-top: 1.5em; }
    .ywy_contact_1_1_left { width: 100%; }
    .okp { display: none; }
    .ywy_about_3 { padding-bottom: 2.5em; padding-top: 1.5em; }
    .ywy_about_3_footer_mid_1 { font-size: 1.25em; }
    .ywy_about_3_footer { position: static; }
    .ywy_about_3_top { width: 60px; height: 60px; position: static; margin: 0 2.60416666666667%; }
    .ywy_about_3_footer_mid_3 { opacity: 1; }
    .ywy_about_3 ul li .ywy_about_3_footer { top: auto; bottom: 0; }
    .ywy_about_3 ul li { margin-top: 1.5em; width: 100%; height: auto; }
    .ywy_about_3 ul li.kuan { width: 100%; }
    .ywy_about_3 ul li.zhai { width: 100%; }
    .ywy_about_4_mid_right_1_1 { font-size: 1.5em; }
    .ywy_about_4_mid_right_1_2 { font-size: 1em; margin-bottom: 1.5em; }
    .ywy_about_4_mid_right { width: auto; margin: 0 2.60416666666667%; }
    .ywy_about_4_mid_left { display: none; }
    .ywy_about_2_mid_right { width: 100%; margin-top: 1.5em; }
    .ywy_about_2_mid_left { width: 100%; }
    .searchbody { padding-top: 100px; }
    .searchbody_2_mid_left { width: 100%; }
    .searchbody_2_mid_right { width: 100%; }
    .ay_news_info_1_mid_right a { display: none; }
    .ay_news_info_2_mid_4 ul li { width: 100%; }
    .ay_news_info_2_mid_4 ul li:nth-child(2) { text-align: left; margin-top: .75em; }
    .ay_news_info_2_mid_4 ul li:nth-child(2) .ay_news_info_2_mid_4_mid { padding-left: 0; }
    .ay_news_info_2_mid_4::after { display: none; }
    .nnnmmm { display: block; }
    .ay_news_1_1 ul li:nth-child(1) dl dd:nth-child(1) { width: 100%; margin-left: 0; margin-right: 0; }
    .ay_news_1_1 ul li dl dd { width: 100%; margin-left: 0; margin-right: 0; }
    .ay_news_1_1 ul li:nth-child(1) dl dd:nth-child(1) .ay_news_1_1_jj_mid,
    .ay_news_1_1 ul li:nth-child(2) dl dd:nth-child(3) .ay_news_1_1_jj_mid { padding: 0; }
    .ay_news_1_1_img { display: none; }
    .ay_news_1_1_jj { position: static; padding-top: 1em; }
    .ay_news_1_1 ul li dl dd { height: auto; margin: 0; padding: 1em 0; }
    .ay_news_1_1 ul li:nth-child(1) dl dd:nth-child(1) .ay_news_1_1_jj_mid_1,
    .ay_news_1_1 ul li:nth-child(1) dl dd:nth-child(1) .ay_news_1_1_jj_mid_2,
    .ay_news_1_1 ul li:nth-child(1) dl dd:nth-child(1) .ay_news_1_1_jj_mid_3,
    .ay_news_1_1 ul li:nth-child(2) dl dd:nth-child(3) .ay_news_1_1_jj_mid_1,
    .ay_news_1_1 ul li:nth-child(2) dl dd:nth-child(3) .ay_news_1_1_jj_mid_2,
    .ay_news_1_1 ul li:nth-child(2) dl dd:nth-child(3) .ay_news_1_1_jj_mid_3 { color: #000; }
    .ay_news_1_1 ul li:nth-child(1) dl dd:nth-child(1)::after,
    .ay_news_1_1 ul li:nth-child(2) dl dd:nth-child(3)::after { display: none; }
    .adv_4_1 { display: none; }
    .adv_2 ul li:nth-child(3) .adv_2_mid { border: none; }
    .adv_2_mid_left { text-align: center; }
    .adv_2_mid_left img { height: 80px; }
    .adv_2 ul li:nth-child(1),
    .adv_2 ul li:nth-child(2),
    .adv_2 ul li:nth-child(3),
    .adv_2 ul li:nth-child(4) { width: 50%; margin-bottom: 2em; }
    .y_index_1_3_mid_2 p span { font-size: 1em; }
    .y_case_1_1_mid_right_info_1 a { font-size: .7em; }
    .y_case_1_1_mid_right_info { width: 100%; }
    .y_case_1_1_mid_left,
    .y_case_1_1_mid_right { width: 100%; }
    .y_case_1_1_mid_right_2 { font-size: 1.25em; }
    .bannerdes_1 { font-size: 2em; }
    .y_team_2_1_mid_right,
    .y_team_2_1_mid_left { width: 100%; }
    .y_team_1_3_act_r { position: static; width: 100%; text-align: center; padding-bottom: 1em; }
    .y_team_1_3_act_l_1,
    .y_team_2_1_mid_right_1 { font-size: 1.25em; }
    .y_team_1_2 { font-size: 1.5em; }
    .y_team_1_1 { font-size: 1.25em; }
    .pro_info_m { display: block; }
    .pro_info_1_mid_right_mid { margin: 0 3.125vw; }
    .pro_info_1 { background-color: #0d0d0d; padding-top: 120px; padding-bottom: 2em; }
    .lv-product-page-header__secondary-wrapper { min-height: inherit; }
    .pro_info_1_mid_right { width: 100%; }
    .pro_info_1_mid_left { display: none; }
    .y_index_3 .y_index_1_1 { margin-top: 0; }
    .y_index_3 .pro_info_1_mid_left { display: block; width: 100%; }
    .pro_info_1_mid_right_mid_3 { font-size: 1.5em; }
    .contact_2_2_mid_jj_1 span { font-size: 1.25em; }
    .contact_2_2_mid { height: 35vw; }
    .mapmid { position: static; max-width: 100%; }
    .news_info_act_re a { width: 100%; }
    .news_info_act_re { padding-top: 1.5em; position: static; width: 100%; }
    .news_info_act { padding-right: 0; }
    .u_1 .banner_img_jj_mid_2_f { font-size: 1.125em; }
    .u_2_mid_1 img { max-width: 80%; }
    .u_2 ul li { width: 50%; margin-top: 1.5em; }
    .u_2 ul li:nth-child(3) .u_2_mid { border: none; }
    .u_2_mid_2 { font-size: 1em; }
    .pro_mid_catelist_mid_2 ul li a { font-size: 1em; }
    .index_1_mid dl dd { width: 33.3333%; margin-bottom: 1em; }
    .st_1_category ul li { width: 100%; }
    .st_1_jj_2 dl dd a { font-size: 1em; }
    .st_1_jj_1 { font-size: 1.5em; }
    .footercp_left,
    .footercp_right { width: 100%; text-align: center; }
    .footer_1 { padding: .5em 0; }
    .footer_1 img { height: 20px; }
    .footer_2_left { width: 100%; }
    .footer_2_mid,
    .footer_2_right { display: none; }
    .about_2_mid_right,
    .about_2_mid_left { width: 100%; }
    .about_2_mid_left { margin-top: 1.5em; }
    .banner_img_jj_mid_1_f { font-size: 2em; }
    .banner_img_jj_mid_2_f { font-size: 1.375em; }

    /* Mobile banner */
    .banner_img { height: auto; min-height: 300px; }
    .banner_img_jj_mid_1_f_1 { font-size: 1em; padding: 15px; position: static; transform: none; margin: 20px; }
    .shoujibannerimg { display: block; width: 100%; height: 500px; }
    .banner_img_pc { display: none; }

    /* Mobile — collapse form to single column */
    .container { width: 94%; padding: 6vw 5%; margin-top: 10vw; margin-bottom: 10vw; border-radius: 8px; }
    .nymainbody .container { margin-top: 14vw; }
    .container form {
        grid-template-columns: 1fr;   /* single column on mobile */
        gap: 4vw 0;
    }
    .container form .form-group,
    .container form .form-group.full-width,
    .container button[type="submit"],
    .container input[type="submit"],
    iframe { grid-column: span 1; }    /* reset all spans to 1 on mobile */
    h2 { font-size: 1.375em; }
    .container button[type="submit"],
    .container input[type="submit"] { padding: 14px; font-size: 15px; }
    .container p { font-size: 0.9375em; margin-bottom: 1.5em; }


}

/* --- ≤640px --- */
@media screen and (max-width: 640px) {
    .nybanner { height: auto; }
    .nymainbody { margin-top: 0; }
    .banner_img_pc { display: none; }
    .mainbody { margin-top: 0; }
    .banner_img { height: auto; }
    .indexbanner { position: relative; height: auto; }
    .nybanner_bg { display: none; }
    .shoujibannerimg { display: block; width: 100%; }
    .mys { display: block; }
    .y_index_4_1 { display: none; }
    .y_index_1_3 { padding-left: 0; padding-right: 0; }
    .ywy_p_2_1_2_right { position: static; }
    .ywy_p_2_1_2 { padding-right: 0; }
    .footer_y_1_left_mid_2 { margin-top: 1em; }
    .footer_y_1_left_mid_1 img { width: 220px; }
    .y_index_5_1 ul li { width: 33.3333%; }
    .y_index_4_1_2_mid_1 { font-size: 1.375em; }
    .y_index_4_1_1 img { width: 100%; }
    .y_index_4_1 ul li { width: 100%; margin-right: 0; margin-bottom: 1.5em; }
    .y_index_2 { height: 50vh; }
    .y_index_1 .y_index_1_3_left,
    .y_index_1 .y_index_1_3_right { top: 30%; }
    .y_index_1_3_mid_2 p { min-width: 100%; }
    .y_index_1 .y_index_1_3_left  { background-image: url(../images/index/img2on.png); }
    .y_index_1 .y_index_1_3_right { background-image: url(../images/index/img3on.png); }
    .ywy_p_2_1 ul li { width: 49%; margin-right: 0; }
    .ywy_p_2_1 ul li:nth-child(3n) { margin-right: 0; }
    .ywy_p_2_1 ul li:nth-child(4n) { margin-right: 0; }
    .ywy_p_2_1 ul li:nth-child(2n) { float: right; }
    .ywy_about_4_mid_right_1_1 { font-size: 1.375em; }
    .ywy_about_1_mid_mid_1 span { font-size: 2em; }
    .ywy_about_1_mid ul li:nth-child(1),
    .ywy_about_1_mid ul li:nth-child(2),
    .ywy_about_1_mid ul li:nth-child(3),
    .ywy_about_1_mid ul li:nth-child(4) { width: 50%; margin-bottom: 1em; }
    .ywy_about_1_mid ul li:nth-child(3) .ywy_about_1_mid_mid { padding-left: 0; border-left: none; }
    .ywy_about_1_mid ul li:nth-child(2) .ywy_about_1_mid_mid { padding-right: 0; }
    .searchbody_2_mid_right_2 { font-size: 1.25em; }
    .searchbody_2_mid_right_4 ul li { width: 32%; margin-right: 2%; }
    .searchbody_2_mid_right_4 ul li:nth-child(3n) { margin-right: 0; }
    .searchbody_2_mid_right_4 ul li:nth-child(5n) { margin-right: 2%; }
    .adv_5_mid_left_2 ul li { width: 100%; margin-bottom: 1em; }
    .adv_2 ul li:nth-child(1),
    .adv_2 ul li:nth-child(2),
    .adv_2 ul li:nth-child(3),
    .adv_2 ul li:nth-child(4) { width: 100%; padding: 1em 0; border-bottom: 1px #e6e6e6 solid; margin-bottom: 0; }
    .adv_2_mid { border: none; padding-left: 0; padding-right: 0; }
    .adv_2_mid_left { float: left; padding-right: 1em; }
    .adv_2_mid_left img { height: 60px; }
    .adv_2 ul li .adv_2_mid { display: block; }
    .index_1_bg { background-attachment: inherit; }
    .news_1 .banner_img_jj_mid_1_f { font-size: 1.5em; }
    .news_2_1 ul li.kuan { text-align: left; }
    .news_2_1 ul li { width: 100%; }
    .u_3_3 a { height: 50px; line-height: 50px; }
    .u_3_2 ul li { width: 100%; margin-right: 0; }
    .pro_mid_catelist_mid { margin-top: 1em; }
    .pro_mid_catelist_mid_2 ul li a { padding-top: .75em; padding-bottom: .75em; }
    .pro_mid_catelist { width: 90vw; min-height: 150vw; max-height: 150vw; }
    .about_3_2 ul li { width: 100%; margin-right: 0; margin-bottom: 1em; }
}

/* --- ≤600px --- */
@media screen and (max-width: 600px) {
    .ywy_about_5_3_1_name { font-size: 8px; word-wrap: break-word; word-break: break-word; }
}

/* --- ≤480px --- */
@media screen and (max-width: 480px) {
    /* Slider: 2 per row on small phones */
    .custom-image-list li { width: calc(100% / 2 - 10px); height: 100px; }
    .lx_about_6_mid_2_img img { max-width: 70%; }
    #hkk { display: none; }
    .banner_img_jj_mid_1_f_1 { font-size: 1.5em; }
    .y_index_5_1 ul li { width: 33.3333%; }
    .ywy_about_1_mid_mid_1 span { font-size: 1.5em; }
    .adv_4 .y_index_1_3_left,
    .adv_4 .y_index_1_3_right { top: 50%; -webkit-transform: translate(0,-50%); transform: translate(0,-50%); }
    .adv_4_2_mid_1 h3 { font-size: 1.25em; margin-top: 1em; }
    .y_index_1_2 { font-size: 1.25em; }
    .y_index_2_mask_2 { font-size: 1.25em; }
    .y_case_1_1_mid_right_info_1 a { font-size: .5em; }
    .bannerdes_1 { font-size: 1.5em; }
    .y_team_1_2 { font-size: 1.25em; }
    .y_team_1_1 { font-size: 1.125em; }
    .y_team_1 { margin-top: 100px; }
    .header_mid_left img { width: 180px; }
    .banner_img_jj_mid_img img { max-width: 20vw; }
    .pro_info_1_mid_right_mid_5 a { width: 100%; }
    .pro_info_1_mid_right_mid_3 { font-size: 1.375em; }
    .index_1 .index_1_mid dl dd { width: 100%; }
    .jobinfo_mid_jj_1 { font-size: 1.375em; }
    .contact_2_2_mid { height: 50vw; }
    #map { height: 60vw; }
    .index_1_mid dl dd { width: 50%; margin-bottom: 1.5em; }
    .index_1_mid_mid_2_2 { font-size: 1.125em; }
    .st_1_jj_2 dl dd a { width: 100%; }
    .st_1_jj_2 dl dd { margin-left: 0; width: 48%; }
    .st_1_jj_2 dl dd:nth-child(2) { float: right; }
    .st_1_jj_2 dl { width: 100%; clear: both; overflow: hidden; }
    .st_1_jj_1 { font-size: 1.375em; }
    .searchbody_2_mid_right_4_mid { height: 90px; }
    /* Mobile bottom safe area for scroll-to-top */
    #scrollToTopBtn { right: 15px; bottom: max(15px, env(safe-area-inset-bottom)); }
}

/* ============================================================
   SECTION 16: iOS / ANDROID SPECIFIC FIXES
   ============================================================ */

/* Prevent text size inflation on orientation change */
@media screen and (orientation: landscape) {
    body { -webkit-text-size-adjust: 100%; }
}

/* Fix for position:fixed on iOS when keyboard is open */
@supports (-webkit-touch-callout: none) {
    .custom-mobile-menu {
        /* Use dvh on supported iOS versions */
        height: 100dvh;
    }
    .y_index_2 {
        height: 100dvh;
    }
    .banner_img,
    .nybanner,
    .about_1 {
        height: 100dvh;
    }
}

/* Touch action for better mobile scrolling */
.pcmenulist,
.custom-mobile-menu,
.pro_mid_catelist,
.popshow {
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}

/* Prevent tap highlight on touch devices */
a, button, input, select, textarea {
    -webkit-tap-highlight-color: transparent;
}

/* Fix for Android Chrome input zoom (font-size must be ≥16px) */
@media screen and (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="search"],
    input[type="tel"],
    input[type="number"],
    textarea,
    select {
        font-size: 16px;
    }
}

/* Windows high-contrast mode support */
@media (forced-colors: active) {
    .okp dl dd,
    .footer_2_right_mid_1 ul li a,
    .jobnav_mid_left,
    .jobnav_mid_right {
        forced-color-adjust: none;
    }
}

/* Print styles */
@media print {
    #header,
    #scrollToTopBtn,
    .pcmenulist,
    .custom-mobile-menu,
    .jobinfo,
    .popshow { display: none !important; }

    .mainbody,
    .nymainbody { margin-top: 0 !important; }

    body { color: #000; background: #fff; }
    a { color: #000; text-decoration: underline; }
}