.overflow-visible { overflow: visible !important }
.overflow-auto { overflow: auto !important }
.overflow-hidden { overflow: hidden !important }
@media (min-width:576px) { }
@media (min-width:768px) {
:root { --left-pad: 4rem; --page-pad: 4rem; }
.sub-banner.sm-banner { --h: 46vw }
.top-nav-menu { --px: .5rem }
}
@media (min-width:992px) {
:root { --left-pad: 5rem; --page-pad: 5rem; }
.top-nav-menu { --px: .95rem }
}
@media (min-width:1200px) {
.top-nav-menu { --px: .65rem }
.sub-banner.sm-banner { --h: 46vw }
.full-banner { --h3:3.5rem; --h4:1.5rem }
.abb-intro { --cfs: .925rem; --ih4:1.25rem; --ih3:1.5rem }
}
@media (min-width:1440px) {
.top-nav-menu { --w: 70% }
.top-nav-menu { --px: .7rem }
.top-lang { margin-left: 2rem; }
.top-console { margin-left: 1.5rem }
.top-quick { --w: 3rem }
.top-nav-menu { --px: .75rem }
.sub-banner.sm-banner { --h: 46vw }
.abb-intro { --cfs: .925rem; --ih4:1.25rem; --ih3:1.5rem }
.abbsi-con { --crt: 3rem; --fs: .9rem }
.abbsi-heading { --tpt: 1.25rem; --tpb: 1.25rem; --sfs: 3.75rem }
.abb-honor { --tcs: .8rem }
.prodh-list { --tss: 2.5rem; --tis: 1rem }
.newsh-list { --tss: 1.5rem; --tis: .75rem }
.main-footer { --im: 16vw }
.home-about { --him: 6.5rem; --hb: 3.25rem; --ts: .9rem; --cs: .85rem; --is: 1.8rem }
.footer-link { --ih: 2.5rem }
.sub-nav { --fs: .75rem; --ts: .8rem }
.hbus-info .sub-title { font-size: 3.6rem }
.habc-txt .sub-title { font-size: 2.5rem }
.abchat-info .fs-46 { font-size: 1.6rem }
.serprodn-list li { margin-bottom: .5rem }
}
@media (min-width:1600px) {
.b-normal { width: 118px; height: 30px; }
.b-normal.b-md { width: 168px; height: 44px; }
.hsolic-det { width: 10rem; height: 10rem; }
}
@media (min-width:1920px) {
:root { --left-pad: 4rem }
.top-quick { --ml: 1rem }
.top-lang { margin-left: 2rem; margin-right: 1.5rem }
.top-nav-menu { --px: .8rem }
.full-banner { --h3:3.5rem; --h4:1.5rem }
.bottom-nav.slick-slider { --size: 2.9rem; --pp: 5rem; --pn: 9rem }
.abb-intro { --cfs: 1rem; --ih4:1.4rem; --ih3:1.8rem }
.abbs-mask { --pt: 45vw }
.abbsi-con { --mh: 20vw; --crt: 5rem; --fs: 1rem }
.abbsi-heading { --tpt: 1.25rem; --tpb: 2rem; --sfs: 4.5rem }
.abb-honor { --tcs: .9rem; --dts: 6.75rem; --dss: 2rem }
.abto-list { --px: 4.5rem; --mh: 45vw; --ts: 2rem; --cp: 3rem }
.prodh-list { --tss: 2.8rem; --tis: 1.1rem }
.newsh-list { --tss: 1.5rem; --tis: .8rem }
.main-footer { --im: 100% }
.home-about { --him: 6.5rem; --hb: 3.25rem; --ts: 1rem; --cs: .9rem; --is: 2.2rem }
.footer-link { --ih: 3.25rem }
.hbus-info .sub-title { font-size: 4.4rem }
.habc-txt .sub-title { font-size: 3.2rem }
.abchat-info .fs-46 { font-size: 2.8rem }
.serprodn-list li { margin-bottom: 1rem }
}
@media (min-width:2560px) {
.top-lang { margin-right: 2.5rem !important }
.hfea-title { padding-top: 2rem }
.hfea-con { top: 2rem }
.hfea-item:nth-child(1) { right: 53% }
.hfea-item:nth-child(2) { left: 53% }
.hfea-item:nth-child(3) { top: 76% }
.hparsec-txt { padding-top: 3vw }
}
@media screen and (max-width:2560px) { }
@media screen and (max-width:1919.98px) { }
@media screen and (max-width:1599.98px) {
.hproc-det { padding-left: 3.5rem; padding-right: 3.5rem }
/* .home-solutions, .home-case { --gap: 20px; --per: calc(var(--wide-width) * .8) } */
}
@media screen and (max-width:1439.98px) {
/* .hproc-det { padding-left: 3.5rem; padding-right: 3.5rem } */
.home-solutions, .home-case { --gap: 20px; --per: calc(var(--wide-width) * .8) }
}
@media screen and (max-width:1399.98px) { }
@media screen and (max-width:1119.98px) {
.home .slides-list .hs-item::before { height: 30vw; }
.b-normal { width: 100px; height: 32px; }
.full-banner { max-height: 75vw; --h3:3.25rem; --h4:1.5rem }
.top-nav-logo { --h: 2.5rem }
.hproc-det { padding-left: 12vw; padding-right: 12vw; }
.b-normal.b-lg { padding-left: 2.5rem; padding-right: 2.5rem; width: 20rem; height: 3.25rem; }
.home-solutions, .home-case { --gap: 20px; --per: calc(var(--wide-width) * .7) }
.hsolic-det { width: 7rem; height: 7rem; }
.caseban-bg { max-height: 75vw; }
.abpro-mis-det { min-height: 12rem; }
}
@media screen and (max-width:1023.98px) and (min-width:768px) {
.full-banner { max-height: 75vw; }
.b-normal { width: 80px; height: 32px; }
.top-nav-logo { --h: 2.5rem }
.secomc-txt .title { line-height: 1.1rem; height: 3.3rem; }
.hfea-item:nth-child(1) { right: 43% }
.hfea-item:nth-child(2) { left: 43% }
.hfea-item:nth-child(3) { top: 80% }
.hfea-item:nth-child(1) > dd { top: 3rem }
.hfea-item:nth-child(2) > dd { top: 3rem }
.hfea-item:nth-child(3) > dd { top: -2.5rem }
.abpro-mis-det { min-height: 6rem; }
.hfeac-main { position: relative; height: 28vw; }
}
@media screen and (max-width:767.98px) {
body { --top-nav-sm: 60px; --left-sm: 20px; --fh: calc(100vh - var(--top-nav-sm)); --left-pad: var(--left-sm) !important }
html { font-size: 112.5% }
html.android body { font-family: var(--font-sans) }
body { font-size: .7rem; letter-spacing: 0; overflow-x: hidden }
.always-tn body { padding-top: var(--top-nav-sm) }
html.home body { padding-top: 0 }
input::placeholder { padding-top: .025em }
.frame-wide, .frame-middle, .frame-narrow { padding-right: var(--left-sm); padding-left: var(--left-sm); overflow: hidden }
.mobile-hidden { display: none }
.top-nav, .fixed-bar .top-nav, .top-nav-small { height: var(--top-nav-sm); background-color: initial }
.top-nav { transition: all .15s linear; width: 100vw; padding-bottom: initial; }
.top-nav::before { content: ''; background: var(--lightprimary-90) !important; z-index: 5; width: 100%; height: 100%; position: absolute; transition: all .15s; left: 0; top: 0; opacity: 1 }
.transparent body:not(.fixed-tn) .top-nav::before { background-color: rgba(0, 0, 0, .8); box-shadow: none }
.top-nav > .row-nav { display: flex; justify-content: space-between }
.top-nav-logo { width: auto; margin: 0 auto; }
.top-nav-logo h1 a { padding-left: 0 }
.top-nav-logo h1, .fixed-bar .top-nav-logo h1 { height: 32px; padding: 0 }
.top-nav-logo img { position: relative; height: 100% }
.top-nav-logo .logo-color { width: auto; height: 100% }
.top-console { margin-left: 0; }
.fixed-bar .top-nav-logo { padding-top: 0 }
.top-nav-logo svg path { fill: var(--white) !important }
.top-toggle-nav { z-index: 6 }
.main-nav-bar .top-row, .main-nav-bar > hr { display: none }
.top-nav-menu dl.has-sub dt:after { display: none }
.top-toggle-nav > span { display: block }
.top-toggle-nav > span { position: relative; width: 18px; height: 18px }
.top-toggle-nav i { font-size: 18px; position: absolute; top: 0; left: 0; color: white }
.top-toggle-nav i.icon-menu { opacity: 1 }
.top-toggle-nav i.icon-menu-close, .top-toggle-nav i.icon-menu-right { opacity: 0 }
.mobile-menu, .mobile-menu body { overflow: hidden !important; height: 100% !important }
.mobile-menu .top-toggle-nav i.mtt-btn { opacity: 0 }
.mobile-menu .top-toggle-nav i.icon-menu-close { opacity: 1 }
.mobile-menu .tn-menu { z-index: 1000; top: 0; display: block; opacity: 1 }
.mobile-menu .tn-logo img.logo-color { opacity: 0 }
.mobile-menu body:before { z-index: 5; opacity: 1 }
.mobile-menu .top-nav::before { background-color: var(--darkprimary) !important; }
.mobile-menu .top-toggle-nav i { color: var(--primary) }
.mobile-menu .top-nav-logo svg path { fill: var(--primary) !important }
.main-nav-bar { position: fixed; z-index: 0; z-index: -1; top: 0; right: 0; display: block; width: 100%; height: 0; margin: 0; padding: 0; transition: none; background: var(--darkprimary); overflow: hidden }
.top-nav-menu { --w: 100%; padding: var(--top-nav-sm) 0 0 0; margin: 0 }
.top-nav-menu > div { flex-wrap: wrap; display: block }
.top-nav-menu dl { width: 100%; height: auto; padding: 0; border-bottom: 1px solid var(--gray) }
.top-nav-menu dl > dt, .top-nav-menu dl > dd, .top-lang dl > dt { width: 100%; padding: .25rem var(--left-sm) }
.top-nav-menu dt { padding: 0 }
.top-nav-menu dt a { font-size: 1rem; display: flex; padding: .25rem 0; align-items: center; justify-content: space-between }
.top-nav-menu dt a::after, .top-sub-menu a::after { content: none }
.top-nav-menu dt a::before, .top-lang dl > dt a::before { content: "\e929"; font-family: "cxany"; order: 2; margin-left: auto }
.top-nav-menu dl.active dt a { background-color: transparent; font-weight: bold }
.top-sub-nav { border: initial; box-shadow: initial; background-color: initial; }
.mobile-menu .main-nav-bar { height: 100vh; overflow-y: auto; }
.top-toggle-nav { display: block; order: -2; width: 30px; margin-right: 40px; }
.top-nav-menu, .tnm-con, .tnm-con dl, .tnm-con dt { height: auto }
.tnm-con:before { display: none }
.top-quick { position: absolute; left: 0; top: 0; z-index: 15; justify-content: center; margin: 0 !important; height: 100vh !important; width: 100%; background-color: var(--light); line-height: initial; display: block }
.top-sub-menu:before { display: none }
.top-sub-menu { display: none; position: relative; overflow: hidden; max-height: 0; padding: 0; width: initial; left: initial; margin: 0 }
.top-sub-menu a { line-height: 1.8; font-size: .85rem; text-align: left; margin-top: .15rem; margin-bottom: .15rem; padding: .35rem .5rem }
.top-nav-menu dt a > em { line-height: 2.2; transition: none; }
.top-nav-menu dt a span { margin-left: .5rem }
.tsn-normal, .top-sub-nav { padding: .25rem 0 .25rem 0; display: block; height: auto }
.tnm-con dl.active .top-sub-menu { max-height: unset; opacity: 1; pointer-events: unset; display: block; border-top: 1px solid var(--gray) }
.video-ts > canvas { left: 50%; transform: translateX(-50%); width: auto }
.full-banner { max-height: initial; --h3:1.8rem; --h4:.9rem }
.top-console .b-normal { height: 28px; width: 70px; padding-left: .25rem; padding-right: .25rem; }
.tnm-spacer { width: 70px; }
/* home */
.secomc-img { display: none; }
.secomc-txt { position: relative; }
.sban-info h3 { line-height: 1.5; }
.hser-secomc { margin-top: initial; }
.hsi-con { margin-bottom: 20vw; }
.hpro-item > dl { margin-bottom: 2rem; }
.hproi-img { max-width: 200px; margin-left: auto; margin-right: auto; }
.b-normal.b-lg { width: 42vw; height: 2rem; padding: 0; }
.home-solutions, .home-case { --gap: 10px; --per: calc(var(--wide-width)); }
.radius-25 { border-radius: 15px; }
.slick-dots { transform: scale(.75); }
.hsol-list, .hcas-list { padding-bottom: 2.25rem; }
.hsolic-det { width: 4.25rem; height: 4.25rem; }
.hsoli-con .ratio-16-9 { padding-top: 60%; }
.hsup-con { --h: 5rem; }
.hsup-secomc .frame-wide { overflow: initial; }
.hsupc-ico > dt > img { max-height: 3rem; }
.hsupc-avatar > dt { --dt: 7.25rem; }
.mfoocc-logo { text-align: center; }
.mfoocc-logo > img { margin-left: auto; margin-right: auto; }
.footer-row .ftcopy { line-height: 1.5; }
.home-feature { --fw: 330px; }
.hfeac-txt { height: auto!important; }
.hfeac-ani { position: relative!important; }
.hfea-con { width: var(--fw); height: var(--fw); margin-left: auto; margin-right: auto; }
.hfeac-main { position: absolute; left: 0px; width: 100%; top: 0; height: 100% }
.hfea-item>dd { display: none; }
.hfea-item:nth-child(1) { right: 32% }
.hfea-item:nth-child(2) { left: 32% }
.hfea-item:nth-child(3) { top: 69% }
.hfea-item.active dt { color: var(--light); }

/* footer */
.footer-nav-menu dl > dt { border-bottom: 1px solid var(--gray); }
.mfns-li a, .mfn-sub-nav li a { color: var(--lightgray) }
.mfns-li:not(:last-child) a, .mfn-sub-nav li:not(:last-child) a { margin-right: 1rem; }
/* products */
.sub-banner > .full-banner { height: initial; }
.sub-banner .proban-con { padding-top: 20vw; }
.sub-banner .proban-img { order: -2; text-align: center; padding-bottom: 2rem; }
.sub-banner .proban-img > img { max-width: 50vw; }
.proadv-icon > img { height: 4rem; max-width: 6rem; width: auto !important; }
.propro-icon > img { height: auto; width: auto !important; }
.serapp-item-txt { min-height: initial; }
.caseban-bg { max-height: 120vw; }
.abpro-mis-det { min-height: 5rem; }
.abpro-txt { text-shadow: 1px 0 rgba(0, 0, 0, .75) }
.secomc-txt .title { height: initial; line-height: 2; }
.abpro-wel-list::before { width: 100%; }
.abpro-join-main { background-repeat: no-repeat; background-size: cover; }
.abpro-car-con .title { text-align: center !important; }
.abpro-con-feedback { --mt: 2.5rem; border-radius: 15px; }
.cfcc-con > li > label { font-size: .75rem; }
.b-normal.b-rounded { height: 2.6rem; }
.cfcc-con input[type="text"], .cfcc-con > li > label { height: 2.2rem; }
.cfcc-con > li { background-image: url("/uploads/default/bg-form.png"); }
}
@media screen and (max-width:767.98px) and (orientation:landscape) {
body { border: 3px dotted red }
body { -webkit-text-size-adjust: none }
html { font-size: 100% }
main { --gap2:.25rem }
}
@media (max-width:413.98px) { }
@media (max-width:389.98px) { }
@media (max-width:319.98px) { }
.ios.safari.mobile .full-banner { height: 100svh; }