:root {
    --ink: #141820;
    --muted: #73777e;
    --blue: #287bc0;
    --blue-deep: #0b3c86;
    --pale-blue: #edf5ff;
    --footer: #282828;
    --footer-line: #4d4d4d;
    --ft110: 110px;
    --ft58: 58px;
    --ft38: 38px;
    --p1600: 1600px;
    --p1564: 1564px;
    --p1458: 1458px;
    --p760: 760px;
    --p1320: 1320px;
    --p1200: 1200px;
    --p1100: 1100px;
    --p960: 960px;
    --p673: 673px;
    --p480: 480px;
    --p460: 460px;
    --p660: 660px;
    --p600: 600px;
    --p520: 520px;
    --p420: 420px;
    --p360: 360px;
    --p320: 320px;
    --p280: 280px;
    --p250: 250px;
    --p244: 244px;
    --p240: 240px;
    --p220: 220px;
    --p180: 180px;
    --p160: 160px;
    --p140: 140px;
    --p120: 120px;
    --p110: 110px;
    --p96: 96px;
    --p90: 90px;
    --p72: 72px;
    --p64: 64px;
    --p56: 56px;
    --p44: 44px;
    --p38: 38px;
    --p34: 34px;
    --p26: 26px;
    --p22: 22px;
    --p18: 18px;
}

body {
    color: var(--ink);
    background: #fff;
}

.site-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.SiteHeader {
    position: relative;
    z-index: 5;
    background: #fff;
}

.SiteHeader .main {
    height: var(--p76);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.SiteHeader .brand {
    display: block;
    width: var(--p128);
    aspect-ratio: 3.12;
}
.about1{
   color: rgba(13, 14, 16, 1);
}
.SiteHeader .brand img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.SiteHeader .navList {
    display: flex;
    align-items: center;
    gap: var(--p64);
    font-size: var(--ft16);
    font-weight: 600;
        color: #0f1010;
}

.SiteHeader .mobileMenuToggle {
    display: none;
}

.SiteHeader .navList a {
    padding: var(--p10) 0;
    position: relative;
}

.SiteHeader .navList a::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: var(--p4);
    left: 0;
    height: 2px;
    background: var(--blue);
    transform: scaleX(0);
    transition: transform var(--time);
}

.SiteHeader .navList a:hover,
.SiteHeader .navList a.active {
    color: #000;
}

.SiteHeader .navList a:hover::after,
.SiteHeader .navList a.active::after {
    transform: scaleX(1);
}

.SiteHeader .navItem {
    position: relative;
    display: inline-flex;
}

.SiteHeader .navSubList {
    position: absolute;
    top: 100%;
    left: 50%;
    display: none;
    min-width: var(--p120);
    padding: var(--p14) var(--p14) var(--p8);
    background: #fff;
    box-shadow: var(--shadow);
    transform: translateX(-50%);
    z-index: 10;
}

.SiteHeader .navSubList a {
    display: block;
    padding: var(--p8) 0;
    color: var(--muted);
    font-size: var(--ft13);
    line-height: 1.4;
    white-space: nowrap;
}

.SiteHeader .navItem:hover .navSubList,
.SiteHeader .navItem:focus-within .navSubList {
    display: block;
}

.SiteHeader .language {
    position: relative;
    margin-left: var(--p18);
}

.SiteHeader .languageToggle {
    display: inline-flex;
    align-items: center;
    gap: var(--p8);
    padding: var(--p10) 0;
    font-size: var(--ft14);
}

.SiteHeader .languageToggle svg {
    width: var(--p10);
    transition: transform var(--time);
}

.SiteHeader .language.open .languageToggle svg {
    transform: rotate(180deg);
}

.SiteHeader .languageMenu {
    position: absolute;
    top: calc(100% + var(--p8));
    right: 0;
    display: none;
    width: var(--p96);
    padding: var(--p8);
    background: #fff;
    box-shadow: var(--shadow);
}

.SiteHeader .language.open .languageMenu {
    display: block;
}

.SiteHeader .languageMenu button {
    display: block;
    width: 100%;
    padding: var(--p8);
    text-align: left;
    font-size: var(--ft13);
}

.SiteHeader .languageMenu button:hover,
.SiteHeader .languageMenu button.active {
    background: var(--pale-blue);
    color: var(--blue);
}

.PageHero {
    padding: 0;
    min-height: var(--p600);
    display: flex;
    align-items: center;
    background-position: center;
    background-size: cover;
}

.PageHero .eyebrow {
    display: flex;
    align-items: center;
    gap: var(--p18);
    margin-bottom: var(--p24);
    font-size: var(--ft20);
    font-weight: 700;
    letter-spacing: .18em;
}

.PageHero .eyebrow::before {
    width: var(--p40);
    height: 1px;
    background: var(--ink);
    content: "";
}

.PageHero h1 {
    font-size: var(--ft80);
    line-height: 1.12;
    font-weight: 800;
}

.PageHero.light h1,
.PageHero.light .eyebrow {
    color: #fff;
}

.PageHero.light .eyebrow::before {
    background: #fff;
}

.PageHero.homeHero {
    min-height: var(--p673);
    background-image: url("../assets/sketch/images/dd858b2a66be3209d2889a475129c7b25b8877d3.png");
}

.PageHero.homeHero h1 {
    font-size: var(--ft32);
    letter-spacing: .23em;
    font-weight: 500;
}

.PageHero.homeHero .homeCn {
    font-size: var(--ft28);
    letter-spacing: .35em;
}

.homePage .SiteHeader {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    background: transparent;
}

.homePage .SiteHeader .main {
    height: var(--p88);
}

.homePage .homeHero {
    align-items: flex-start;
}

.homePage .homeHero .main {
    width: var(--p1600);
    max-width: calc(100% - var(--p320));
    padding-top: var(--p244);
}

.homePage .homeHero h1 {
    font-size: var(--ft30);
}

.homePage .homeHero .homeCn {
    margin-bottom: var(--p12);
    font-size: var(--ft40);
    line-height: 1.5;
}

.homePage .homeHero p {
    margin-top: var(--p8);
    font-size: var(--ft18);
    letter-spacing: var(--p8);
}





.SectionTitle {
    text-align: center;
}

.SectionTitle h2 {
    font-size: var(--ft32);
    color: #0d2237;
}

.SectionTitle p {
    margin-top: var(--p18);
    color: var(--muted);
    font-size: var(--ft14);
}

.OutlineButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--p160);
    padding: var(--p14) var(--p30);
    border: 1px solid #89907d;
    color: var(--ink);
    font-size: var(--ft16);
    background: #fff;
    transition: color var(--time), background-color var(--time), transform var(--time);
}

.OutlineButton:hover {
    color: #fff;
    background: var(--blue);
    border-color: var(--blue);
    transform: translateY(-2px);
}

.ProductOverview {
    padding: var(--p110) 0 var(--p120);
}

.ProductOverview .productGrid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--p90);
    margin-top: 0;
}
.productGridList{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--p40);
}
.productGridList .item{
    padding: var(--p20);
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 10px;
    transition: all 0.3s;
}
.productGridList .item:hover{
    transform: translateY(-10px);
}

.productGridList .title{
        margin-bottom: var(--p24);
    font-size: var(--ft24);
}
.productGridList .desc{
    color: var(--muted);
    font-size: var(--ft15);
    line-height: 2.05;
      display: -webkit-box;       /* 必须结合 webkit-box 模型 */
  -webkit-box-orient: vertical; /* 设置子元素垂直排列 */
  -webkit-line-clamp: 2;      /* 核心：限制显示 2 行 */
  overflow: hidden;           /* 隐藏超出部分 */
  text-overflow: ellipsis;    /* 超出部分显示省略号 */
}
.ProductOverview .productGrid .item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--p64);
    align-items: center;
}

.ProductOverview .productGrid .item:nth-child(even) {
    direction: rtl;
}

.ProductOverview .productGrid .item:nth-child(even)>* {
    direction: ltr;
}

.ProductOverview .img_box {
    aspect-ratio: 1.62;
    box-shadow: 0 var(--p10) var(--p22) rgba(0, 0, 0, .18);
}

.ProductOverview .productGrid .title {
    margin-bottom: var(--p24);
    font-size: var(--ft30);
}

.ProductOverview .productGrid .desc {
    color: var(--muted);
    font-size: var(--ft15);
    line-height: 2.05;
}

.ProductOverview .productGrid .desc p+p {
    margin-top: var(--p6);
}

.ProductOverview .productActions {
    margin-top: var(--p72);
    text-align: center;
}

.HomeProducts {
    padding: var(--p120) 0 var(--p120);
}

.HomeProducts .main {
    max-width: var(--p1458);
}

.HomeProducts .SectionTitle h2 {
    font-size: var(--ft46);
    line-height: var(--ft56);
    font-weight: 500;
}

.HomeProducts .SectionTitle p {
    margin-top: var(--p30);
    font-size: var(--ft12);
}

.HomeProducts .productRows {
    margin-top: var(--p96);
    display: grid;
    gap: var(--p120);
}

.HomeProducts .item {
    display: grid;
    grid-template-columns: 1.641fr 1fr;
    align-items: center;
}

.HomeProducts .item:nth-child(even) {
    grid-template-columns: 1fr 1.65fr;
}

.HomeProducts .img_box {
    min-height: 500px;
    aspect-ratio: 906 / 507;
    background: #f7f7f7;
    box-shadow: 0 var(--p6) var(--p20) rgba(0, 0, 0, .18);
}

.HomeProducts .img_box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.HomeProducts .productRows .body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    aspect-ratio: 552 / 440;
    padding: var(--p56);
    color: #fff;
    max-height: 440px;
}

.HomeProducts .item:nth-child(1) .body {
    background: #f7aa22;
}

.HomeProducts .item:nth-child(2) .body {
    background: #a5005a;
}

.HomeProducts .item:nth-child(3) .body {
    background: #2d91c9;
}

.HomeProducts .item:nth-child(4) .body {
    background: #16a653;
}

.HomeProducts .title {
    font-size: var(--ft28);
    font-weight: 700;
}

.HomeProducts .desc {
    margin: var(--p18) 0 var(--p24);
    font-size: var(--ft14);
    line-height: 1.9;
}

.HomeProducts .more {
    align-self: flex-start;
    padding: var(--p8) var(--p18);
    background: rgba(255, 255, 255, .18);
    font-size: var(--ft13);
}

.HomeProducts .more:hover {
    background: #fff;
    color: var(--blue);
}

.productActions {
    margin-top: var(--p72);
    text-align: center;
}

.CompanyBrief {
    padding: var(--p120) 0 var(--p120);
    background-image: url("../assets/sketch/images/61be0eb9b7f1a25e9ccd911eb42800c421c911e2.png");
    background-position: center;
}

.CompanyBrief .main {
    width: var(--p1564);
}

.CompanyBrief .SectionTitle h2 {
    font-size: var(--ft46);
    line-height: var(--ft56);
    margin-bottom: var(--p24);
}

.CompanyBrief .SectionTitle p {
    max-width: var(--p1564);
    margin: var(--p18) auto 0;
    color: #34445b;
    font-size: var(--ft13);
    line-height: 2;
}
.CompanyBrief  .CompanyBrief_des{
    font-size: var(--ft20);
    line-height: var(--ft45);
}

.CompanyDetails {
    padding: var(--p64) 0 var(--p80);
    text-align: center;
}

.CompanyDetails .prose {
    max-width: var(--p1200);
    margin: var(--p24) auto 0;
    color: #65717d;
    font-size: var(--ft14);
    line-height: 2.1;
}

.TeamBrief {
    padding: var(--p100) 0;
    background: #f6f7f8;
    text-align: center;
}

.TeamBrief p {
    max-width: var(--p1100);
    margin: var(--p20) auto 0;
    color: var(--muted);
    font-size: var(--ft14);
}

.Development {
    padding: var(--p96) 0 var(--p140);
    color: #fff;
    background-color: #2072ba;
    /*background-image: url("../assets/sketch/images/888489e8d74c596ea5c2e3d95f60e4564cbd6ceb.png");*/
    background-position: bottom center;
    background-size: 100% auto;
    position: relative;
}
.Development>img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 800px;
    
    aspect-ratio: 4 / 4;
    max-width: 50%;
    
  
}
.Development .SectionTitle h2 {
    color: #fff;
}

.Development .timeline {
    position: relative;
    max-width: var(--p960);
    margin: var(--p56) auto 0;
    padding: var(--p20) 0;
}

.Development .timeline::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: rgba(0, 0, 0, 1);
    content: "";
}

.Development .item {
    position: relative;
    display: grid;
    grid-template-columns:repeat(2,1fr);
    align-items: center;
    margin-bottom: var(--p38);
    gap: var(--p50);
}

.Development .item:nth-child(odd) .event {

    text-align: right;
}

.Development .item:nth-child(even) .year {
    text-align: right;
}

.Development .year {

    text-align: left;
    font-size: var(--ft12);
    font-weight: 700;
}

.Development .event span {
    display: inline-block;
    padding: var(--p10) var(--p16);
    background: #fff;
    color: #3d4e63;
    font-size: var(--ft13);
}

.Honors {
    padding: var(--p80) 0;
    text-align: center;
}

.Honors .img_box {
    width: min(var(--p660), 100%);
    height: 100%;
    margin: var(--p34) auto var(--p14);
}

.Honors p {
    color: var(--muted);
    font-size: var(--ft12);
}

.Partners {
    padding: var(--p72) 0;
    background: #e7f4ff;
}

.Partners .img_box {
    max-width: var(--p1100);
    margin: var(--p38) auto 0;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: var(--p20);
    width: 100%;
}
.Partners .img_box img{
    width: 100%;
    transition: all 0.3s;
}
.Partners .img_box img:hover{
    transform: scale(1.05);
}

.NewsCenter {
    padding: var(--p72) 0 var(--p96);
}

.NewsCenter .newsList {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--p20);
    margin-top: var(--p38);
}

.NewsCenter .item {
    display: block;
    border: 1px solid #e4e8ed;
    border-radius: var(--p8);
    overflow: hidden;
    background: #fff;
    box-shadow: 0 var(--p8) var(--p18) rgba(24, 55, 83, .06);
}

.NewsCenter .img_100 {
    aspect-ratio: 1.7;
}

.NewsCenter .body {
    padding: var(--p18);
}

.NewsCenter .date {
    color: #8a939c;
    font-size: var(--ft11);
}

.NewsCenter .title {
    margin-top: var(--p10);
    font-size: var(--ft15);
    line-height: 1.6;
}

.NewsCenter .excerpt {
    margin-top: var(--p10);
    color: var(--muted);
    font-size: var(--ft12);
    line-height: 1.8;
}

.NewsCenter .read {
    display: inline-block;
    margin-top: var(--p14);
    color: var(--blue);
    font-size: var(--ft11);
    font-weight: 700;
}

.NewsCenter .item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}

.DetailLayout {
    padding: var(--p90) 0 var(--p120);
}

.DetailLayout .main {
    display: grid;
    grid-template-columns: var(--p220) 1fr;
    gap: var(--p38);
    align-items: start;
}
.DetailLayout .newsList{
    width: var(--main);
    max-width: 90%;
    margin-right: auto;
    margin-left: auto;
    display: grid;
    gap: var(--p38);
}
.DetailLayout .newsList .newsBox{
    width: 100%;
    padding: var(--p20);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    display:grid;
    grid-template-columns: 1fr 3fr;
    gap: var(--p38);
}
.DetailLayout .newsList .newsBox>img{
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}
.DetailLayout .newsList .newsText{
    position: relative;
}
.DetailLayout .newsList .newsText .title{
    font-size: var(--ft20);
    font-weight: bold;
    margin-bottom: var(--p20);
}
.DetailLayout .newsList .newsText .des{
      display: -webkit-box;       /* 必须结合 webkit-box 模型 */
  -webkit-box-orient: vertical; /* 设置子元素垂直排列 */
  -webkit-line-clamp: 3;      /* 核心：限制显示 2 行 */
  overflow: hidden;           /* 隐藏超出部分 */
  text-overflow: ellipsis;    /* 超出部分显示省略号 */
}
.DetailLayout .newsList .newsText a{
    position: absolute;
    bottom: 0;
}
.DetailLayout .tabList {
    display: grid;
    gap: var(--p14);
}

.DetailLayout .tabList a {
    min-height: var(--p64);
    padding: var(--p18) var(--p20);
    background: #f7f7f7;
    color: #555;
    font-size: var(--ft16);
    text-align: left;
}

.DetailLayout .tabList a.active,
.DetailLayout .tabList a:hover {
    background: var(--blue);
    color: #fff;
}
.DetailLayout .tabList button {
    min-height: var(--p64);
    padding: var(--p18) var(--p20);
    background: #f7f7f7;
    color: #555;
    font-size: var(--ft16);
    text-align: left;
}

.DetailLayout .tabList button.active,
.DetailLayout .tabList button:hover {
    background: var(--blue);
    color: #fff;
}

.DetailLayout .tabPanel {
    display: none;
}

.DetailLayout .tabPanel.active {
    display: block;
}

.DetailLayout .tabPanel h2 {
    margin-bottom: var(--p20);
    font-size: var(--ft32);
}
.caseList{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--p38);
}
.caseList .caseBox{
    width: 100%;
    padding: var(--p20);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    transition: all 0.3s;
}
.caseList .caseBox:hover{
        transform: translateY(-10px);
}
.caseList .caseBox:hover>p{
    color: red;
}
.caseList .caseBox>img{
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}
.caseList .caseBox .title{
    font-size: var(--ft20);
    font-weight: bold;
    margin-bottom: 10px;
    margin-top: 10px;
}
.caseList .caseBox>p{
    font-size: 14px;
}
.DetailLayout .tabPanel .s_content {
    color: #3d3e40;
    font-size: var(--ft15);
    line-height: 2;
}
.DetailLayout .tabPanel .s_content video{
	width:100% !important;
}
.DetailLayout .tabPanel .img_box {
    margin: var(--p28) 0;
    aspect-ratio: 1.75;
    background: #000;
}

.ServiceText {
    padding: var(--p72) 0 var(--p96);
}

.ServiceText .main {
    max-width: var(--p1320);
}

.ServiceText h2 {
    margin-bottom: var(--p34);
    text-align: center;
    font-size: var(--ft26);
}

.ServiceText .s_content {
    color: var(--muted);
    font-size: var(--ft15);
}

.ContactForm {
    padding: var(--p96) 0 var(--p120);
}

.TrialForm {
    padding: var(--p64) 0 var(--p110);
}

.ContactForm form,
.TrialForm form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--p18) var(--p20);
}

.ContactForm label,
.TrialForm label {
    display: grid;
    gap: var(--p8);
    color: #34383d;
    font-size: var(--ft16);
}

.ContactForm label.wide,
.TrialForm label.wide {
    grid-column: 1 / -1;
}

.ContactForm input,
.ContactForm select,
.TrialForm input {
    width: 100%;
    height: var(--p48);
    padding: 0 var(--p18);
    border: 1px solid #c8cbd0;
    border-radius: var(--p10);
    font-size: var(--ft14);
}

.ContactForm .formAction,
.TrialForm .formAction {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-start;
    margin-top: var(--p8);
}

.ContactForm .btn,
.TrialForm .btn {
    min-width: var(--p220);
    background: var(--blue);
    border-color: var(--blue);
    font-size: var(--ft18);
}

.FormMessage {
    display: none;
    margin-top: var(--p14);
    color: var(--blue);
    font-size: var(--ft14);
}

.FormMessage.show {
    display: block;
}

.TrialLead {
    padding: var(--p72) 0 0;
}

.TrialLead h2 {
    margin-bottom: var(--p34);
    font-size: var(--ft26);
}

.TrialLead .img_box {
    /*width: min(var(--p960), 100%);*/
    margin: 0 auto;
    box-shadow: var(--shadow);
}

.TrialForm {
    padding-top: var(--p44);
}

.TrialForm .choiceTitle {
    margin-bottom: var(--p22);
    font-size: var(--ft22);
}

.TrialForm .choiceList {
    display: grid;
    gap: var(--p16);
    margin-bottom: var(--p38);
    grid-column: span 2;
}

.TrialForm .choiceList label {
    display: flex;
    align-items: center;
    gap: var(--p12);
}

.TrialForm .choiceList input {
    width: var(--p16);
    height: var(--p16);
}

.TrialForm .formAction {
    flex-direction: column;
    align-items: center;
}

.TrialForm .formAction .btn {
    width: var(--p220);
}

.TrialForm .note {
    margin-top: var(--p18);
    font-size: var(--ft13);
}

.CareerList {
    padding: var(--p96) 0 var(--p120);
}

.CareerList .jobGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--p110) var(--p160);
}

.CareerList .job {
    color: #6c7278;
    font-size: var(--ft13);
    line-height: 1.9;
}

.CareerList .job h2 {
    color: #1e3853;
    font-size: var(--ft28);
}

.CareerList .job h2::after {
    display: block;
    width: var(--p50);
    height: var(--p4);
    margin: var(--p20) 0 var(--p34);
    background: var(--blue);
    border-radius: var(--p4);
    content: "";
}

.CareerList .job p+p {
    margin-top: var(--p24);
}

.CareerContact {
    padding: var(--p64) 0 var(--p80);
    text-align: center;
}

.CareerContact h2 {
    color: #1e3853;
    font-size: var(--ft26);
}

.CareerContact p {
    margin-top: var(--p12);
    color: var(--muted);
    font-size: var(--ft15);
    line-height: 1.9;
}

.CareerContact a {
    display: inline-block;
    margin-top: var(--p22);
    padding: var(--p14) var(--p26);
    background: var(--blue);
    color: #fff;
}

.CareerContact a:hover {
    background: var(--blue-deep);
}

.SiteFooter {
    padding: var(--p64) 0 0;
    background: var(--footer);
    color: #bbb;
}

.SiteFooter .footerTop {
    display: grid;
    grid-template-columns: 1.45fr repeat(3, 1fr);
    gap: var(--p64);
    padding-bottom: var(--p100);
}

.SiteFooter .footerBrand>img {
    display: block;
    width: var(--p240);
    max-width: 100%;
    aspect-ratio: 3.12;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.SiteFooter .footerBrand::before {
    display: none;
}

.SiteFooter .address {
    margin-top: var(--p24);
    font-size: var(--ft13);
    line-height: 1.85;
}

.SiteFooter .qrWrap {
    position: relative;
    display: inline-flex;
    width: var(--p120);
    margin-top: var(--p28);
    background: #fff;
}

.SiteFooter .qrWrap img {
    width: 100%;
}

.SiteFooter .qrHint {
    position: absolute;
    bottom: calc(100% + var(--p10));
    left: 50%;
    width: var(--p160);
    padding: var(--p10);
    background: #fff;
    color: #333;
    font-size: var(--ft12);
    text-align: center;
    opacity: 0;
    transform: translate(-50%, var(--p8));
    pointer-events: none;
    transition: opacity var(--time), transform var(--time);
}

.SiteFooter .qrWrap:hover .qrHint {
    opacity: 1;
    transform: translate(-50%, 0);
}

.SiteFooter .footerCol h3 {
    margin-bottom: var(--p24);
    color: #aaa;
    font-size: var(--ft15);
    font-weight: 500;
}

.SiteFooter .footerCol a {
    display: block;
    margin-bottom: var(--p16);
    color: #d4d4d4;
    font-size: var(--ft13);
    line-height: 1.35;
}

.SiteFooter .footerCol a:hover {
    color: #fff;
    transform: translateX(var(--p4));
}

.SiteFooter .footerBottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--p24) 0;
    border-top: 1px solid var(--footer-line);
    color: #929292;
    font-size: var(--ft14);
}

.SiteFooter .socialList {
    display: flex;
    gap: var(--p20);
}

.SiteFooter .socialList a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--p30);
    height: var(--p30);
    border: 1px solid #bbb;
    border-radius: var(--p4);
    color: #fff;
    font-size: var(--ft14);
    font-weight: 700;
}

.SiteFooter .socialList a:hover {
    color: var(--footer);
    background: #fff;
}

@media only screen and (min-width: 768px) and (max-width: 1199px) {
    .SiteHeader .navList {
        gap: var(--p30);
    }

    .PageHero {
        min-height: var(--p360);
    }

    .ProductOverview .productGrid {
        gap: var(--p56);
    }

    .SiteFooter .footerTop {
        grid-template-columns: 1.4fr repeat(3, 1fr);
        gap: var(--p30);
    }
}

@media only screen and (max-width: 767px) {
    .SiteHeader .main {
        height: var(--p64);
        gap: var(--p12);
    }

    .SiteHeader .brand {
        width: var(--p96);
    }

    .SiteHeader .mobileMenuToggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: var(--p38);
        height: var(--p38);
        margin-left: auto;
        border: 1px solid #d8dce0;
        border-radius: var(--p4);
        color: var(--ink);
    }

    .SiteHeader .mobileMenuToggle svg {
        width: var(--p20);
    }

    .SiteHeader .navList {
        position: absolute;
        top: var(--p64);
        right: 0;
        left: 0;
        display: none;
        align-items: stretch;
        flex-direction: column;
        gap: 0;
        padding: var(--p10) 4%;
        background: rgba(255, 255, 255, .98);
        box-shadow: 0 var(--p10) var(--p20) rgba(0, 0, 0, .08);
        font-size: var(--ft15);
        white-space: normal;
    }

    .SiteHeader .navList.open {
        display: flex;
    }

    .SiteHeader .navList a {
        padding: var(--p14) 0;
        border-bottom: 1px solid #edf0f2;
    }

    .SiteHeader .navList a:last-child {
        border-bottom: 0;
    }

    .SiteHeader .navList a::after {
        right: auto;
        width: var(--p30);
    }

    .SiteHeader .navItem {
        display: block;
    }

    .SiteHeader .navSubList {
        position: static;
        display: block;
        min-width: 0;
        padding: 0 0 0 var(--p18);
        box-shadow: none;
        transform: none;
    }

    .SiteHeader .navSubList a {
        padding: var(--p10) 0;
        color: var(--muted);
        font-size: var(--ft13);
    }

    .SiteHeader .language {
        margin-left: 0;
    }

    .SiteHeader .languageToggle {
        font-size: var(--ft12);
    }

    .PageHero {
        min-height: var(--p280);
    }

    .PageHero.homeHero {
        min-height: var(--p360);
        background-position: 57% center;
    }

    .PageHero.productHero,
    .PageHero.caseHero,
    .PageHero.companyHero,
    .PageHero.newsHero,
    .PageHero.careerHero {
        min-height: var(--p280);
    }

    .PageHero.contactHero,
    .PageHero.serviceHero {
        min-height: var(--p280);
    }

    .PageHero.trialHero {
        min-height: var(--p240);
    }

    .PageHero h1 {
        font-size: var(--ft48);
    }

    .PageHero .eyebrow {
        gap: var(--p12);
        margin-bottom: var(--p18);
        font-size: var(--ft14);
    }

    .PageHero .eyebrow::before {
        width: var(--p30);
    }

    .PageHero.homeHero h1 {
        font-size: var(--ft22);
    }

    .PageHero.homeHero .homeCn {
        font-size: var(--ft20);
    }

    .homePage .SiteHeader .main {
        height: var(--p64);
    }

    .homePage .homeHero .main {
        width: 100%;
        max-width: 92%;
        padding-top: var(--p150);
    }

    .homePage .homeHero .homeCn {
        margin-bottom: var(--p8);
        font-size: var(--ft30);
        line-height: 1.3;
    }

    .homePage .homeHero h1 {
        font-size: var(--ft22);
    }

    .homePage .homeHero p {
        margin-top: var(--p6);
        font-size: var(--ft14);
        letter-spacing: var(--p4);
    }

    .HomeProducts {
        padding: var(--p60) 0;
    }

    .HomeProducts .main,
    .CompanyBrief .main {
        width: 100%;
        max-width: 92%;
    }

    .HomeProducts .SectionTitle h2,
    .CompanyBrief .SectionTitle h2 {
        font-size: var(--ft28);
    }

    .HomeProducts .SectionTitle p {
        font-size: var(--ft12);
        line-height: 1.8;
    }

    .HomeProducts .productRows {
        margin-top: var(--p40);
        gap: var(--p44);
    }

    .HomeProducts .item,
    .HomeProducts .item:nth-child(even) {
        grid-template-columns: 1fr;
    }

    .HomeProducts .productRows .body {
        aspect-ratio: 552 / 440;
        padding: var(--p30);
    }

    .HomeProducts .title {
        font-size: var(--ft22);
    }

    .HomeProducts .desc {
        font-size: var(--ft13);
    }

    .HomeProducts .productActions {
        margin-top: var(--p44);
    }

    .CompanyBrief {
        padding: var(--p60) 0;
        background-position: 58% center;
    }

    .CompanyBrief .SectionTitle p {
        font-size: var(--ft12);
        line-height: 1.9;
        text-align: left;
    }

    .ProductOverview .productGrid,
    .HomeProducts .productRows {
        gap: var(--p44);
    }

    .ProductOverview .productGrid .item,
    .HomeProducts .item,
    .HomeProducts .item:nth-child(even) {
        grid-template-columns: 1fr;
    }

    .ProductOverview .productGrid .item:nth-child(even) {
        direction: ltr;
    }

    .ProductOverview .productGrid .item {
        gap: var(--p24);
    }

    .ProductOverview {
        padding: var(--p60) 0;
    }

    .ProductOverview .productGrid .title {
        font-size: var(--ft26);
    }

    .ProductOverview .productActions {
        margin-top: var(--p48);
    }

    .CompanyDetails,
    .TeamBrief,
    .Development,
    .Honors,
    .Partners {
        padding: var(--p60) 0;
    }

    .Development .timeline {
        margin-top: var(--p30);
    }

    .Development .item {
        margin-bottom: var(--p24);
    }

    .NewsCenter {
        padding: var(--p60) 0;
    }

    .DetailLayout,
    .ServiceText,
    .ContactForm,
    .TrialForm,
    .CareerList {
        padding: var(--p60) 0;
    }

    .DetailLayout .tabPanel h2 {
        font-size: var(--ft26);
    }

    .DetailLayout .tabPanel .s_content {
        font-size: var(--ft14);
    }

    .TrialLead {
        padding: var(--p60) 0 0;
    }

    .TrialLead h2 {
        font-size: var(--ft22);
    }

    .CareerContact {
        padding: var(--p60) 0;
    }

    .HomeProducts .productRows .body {
        padding: var(--p30);
    }

    .NewsCenter .newsList,
    .CareerList .jobGrid {
        grid-template-columns: 1fr;
    }

    .NewsCenter .newsList {
        gap: var(--p24);
    }

    .CompanyBrief .SectionTitle p,
    .CompanyDetails .prose {
        text-align: left;
    }

    .Development .timeline::before {
        left: var(--p30);
    }

    .Development .item {
        grid-template-columns: var(--p60) 1fr;
    }

    .Development .year {
        grid-column: 1;
    }

    .Development .item:nth-child(odd) .event,
    .Development .item:nth-child(even) .event {
        grid-column: 2;
        text-align: left;
    }

    .DetailLayout .main {
        grid-template-columns: 1fr;
        gap: var(--p30);
    }

    .DetailLayout .tabList {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--p10);
    }

    .DetailLayout .tabList button {
        padding: var(--p12);
        font-size: var(--ft14);
    }

    .ContactForm form,
    .TrialForm form {
        grid-template-columns: 1fr;
    }

    .ContactForm label.wide,
    .TrialForm label.wide,
    .ContactForm .formAction,
    .TrialForm .formAction {
        grid-column: auto;
    }

    .ContactForm .btn,
    .TrialForm .btn {
        width: 100%;
    }

    .CareerList .jobGrid {
        gap: var(--p56);
    }

    .SiteFooter .footerTop {
        grid-template-columns: 1fr;
        gap: var(--p38);
    }

    .SiteFooter .footerBottom {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--p20);
    }
}