body { font-family: var(--font-family); font-size: .7rem; line-height: 1.8; color: var(--normal) }
hr { margin-top: 1rem; margin-bottom: 1rem; border: 0; border-top: var(--bs) solid var(--lightgray); --bs: 2px }
hr.min { --bs: 1px }
hr.with-line { margin: 0; border: 0 }
hr.with-line::before { display: block; width: 3.6rem; height: .5rem; content: ""; background-color: var(--primary) }
hr.with-line.light::before { background-color: var(--light) }
hr.with-line.xs::before { width: 1.6rem; height: .2rem }
.ff-en { font-family: "Arial", var(--font-family) }
.left-pad { padding-left: var(--left-pad) }
.frame-full, .frame-wide, .frame-middle, .frame-narrow { position: relative; width: 100%; margin-right: auto; margin-left: auto; padding-left: var(--page-pad); padding-right: var(--page-pad); }
.max-400 { width: 100%; max-width: 400px; margin-left: auto; margin-right: auto; }
@media screen and (min-width:768px) {
.frame-middle { max-width: 85vw; padding-left: 0; padding-right: 0; }
.frame-wide { max-width: 90vw; padding-left: 0; padding-right: 0; }
}
@media screen and (min-width:1024px) {
.frame-middle { max-width: 80vw; }
.frame-wide { max-width: 85vw; }
}
@media screen and (min-width:1200px) {
.frame-middle { max-width: 57.5rem; }
.frame-wide { max-width: 62.5rem; }
}
@media screen and (min-width:1280px) { }
@media screen and (min-width:1440px) { }
@media screen and (min-width:1600px) { }
@media screen and (min-width:1900px) { }
@media screen and (min-width:2200px) { }
body { overflow-x: hidden; color: var(--normal); background-color: var(--darkprimary) }
main { width: 100%; margin: 0 }
main:after { display: table; clear: both; content: "" }
.menu-mask { position: fixed; z-index: 20; top: 0; left: 99999999rem; display: block; width: 100%; height: 100%; content: ""; pointer-events: none; opacity: .7; background-color: rgb(0, 0, 0) }
.top-nav { position: fixed; z-index: 990; top: 0; right: 0; left: 0; display: flex; justify-content: space-between; height: var(--top-nav); padding-bottom: 1.25rem; transition: all .25s ease; }
.top-nav::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; transition: background .25s ease; background: url("/uploads/default/bg-nav.svg") no-repeat left top; background-size: 100% 100% }
.top-nav .row-nav { width: 100% }
.main-nav-bar, .top-nav-menu, .tnm-con, .tnm-con dl, .tnm-con dt { height: 100% }
.main-nav-bar { align-items: center; flex-grow: 1; justify-content: flex-end }
.main-nav-bar .top-row { display: flex; align-items: center; justify-content: flex-end; padding-right: 2rem }
.top-nav-menu { line-height: 1.5rem; z-index: 8; width: var(--w); --px: .75rem; --w: 66% }
.top-nav-logo { z-index: 9; display: flex; align-items: center; flex-shrink: 0; height: var(--h); margin-top: .5rem; transition: margin-top .25s ease; --h: 3rem }
.top-nav-logo h1 { display: block; width: 100%; height: 100%; transition: height .25s linear }
.top-nav-logo h1 a { display: block; height: 100%; transition: none }
.top-nav-logo img, .top-nav-logo svg { height: 100%; transition: all .25s; vertical-align: top }
.top-nav-logo .logo-white { opacity: 0 }
.top-nav-logo .logo-color { position: absolute; top: 0; left: 0; width: 100%; height: auto; opacity: 1 }
.top-nav-menu dt { z-index: 11; text-align: center }
.top-nav-menu dt a { line-height: 1.5rem; position: relative; z-index: 3; display: block; display: flex; align-items: center; height: 100%; padding-right: var(--px); padding-left: var(--px); transition: color .25s ease; white-space: nowrap; color: var(--white) }
.top-nav-menu dt a > em { line-height: 2.5 }
.top-nav-menu dl.active dt a, .top-nav-menu dt a:hover { color: var(--link) }
.tnmc-fit { display: none }
[data-view="desktop"] .top-nav-menu { transition: all .25s ease }
[data-view="desktop"] .top-nav-menu dl:hover .top-sub-menu, [data-view="desktop"] .top-nav-menu dl:hover:after { pointer-events: initial; opacity: 1 }
[data-view="desktop"] .tnmc-fit { display: block; overflow: hidden; height: 0 }
[data-view="desktop"] .tnmc-item { position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; transition: opacity .25s ease }
[data-view="desktop"] .tnmci-sub { z-index: 2; visibility: hidden; opacity: 0 }
.top-nav-menu dl.active dt a { color: var(--primary) }
.top-nav-menu dl.active dt a > em:after { left: 0; width: 100%; transition: width .5s }
.top-nav-menu dl:last-child dt { padding-right: 0 }
.top-sub-menu { position: absolute; z-index: 2; top: auto; width: fit-content; min-width: max(100%, 5.75rem); padding-top: .5rem; left: 0; transition: all .25s linear; pointer-events: none; opacity: 0; }
.top-sub-menu a { font-size: .75rem; width: 100%; display: block; padding: .35rem var(--px); transition: initial; text-align: left; white-space: nowrap; color: var(--normal) }
.top-sub-nav { overflow: hidden; border-radius: 5px; box-shadow: 2px 2px 8px rgba(0, 0, 0, .5); background-color: var(--lightprimary-90) }
.top-sub-nav li { width: 100%; }
.top-sub-nav li:first-child a { padding-top: .5rem }
.top-sub-nav li:last-child a { padding-bottom: .5rem }
.top-sub-nav span { position: absolute !important; top: 100%; left: 1.3rem; width: 18rem; padding: 3rem; transition: top .25s, opacity .25s; text-align: center; pointer-events: none; opacity: 0; background-color: white }
.top-sub-nav span > img { max-width: 9rem }
.top-sub-nav a:hover span { top: 100%; opacity: 1 }
.top-sub-menu a:hover, .top-sub-menu a.active { background-color: var(--darkprimary); color: var(--primary) }
.tnm-con:before { position: absolute; z-index: 5; top: 0; left: -10000px; width: 50000px; height: 100%; content: ""; pointer-events: none }
.top-quick { font-size: 1.2rem; z-index: 9; width: var(--w); height: 1.8rem; margin-left: var(--ml); color: var(--link); --fw: 42vw; --ml: 1rem; --w: 5rem }
.top-quick a:hover { color: var(--primary) }
.top-quick a i { vertical-align: top }
.top-quick .tq-con { position: absolute; z-index: 99999; top: 0; right: 0; width: var(--fw); height: 100%; transition: all .25s ease; transform: scaleX(0); transform-origin: center right }
.tq-con { position: absolute; z-index: 2; display: flex; align-items: center; justify-content: flex-end; width: 100%; height: 100%; pointer-events: none; opacity: 0 }
.tq-con > dd { font-size: 1rem; position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: flex-end; width: calc(100% - 2.5rem); height: 100%; pointer-events: none; opacity: 0 }
.top-nav[data-active^="#"] .tq-nav { pointer-events: none; opacity: 0 }
.top-nav[data-active^="#"] .tq-con { transform: unset; pointer-events: unset; opacity: 1 }
.top-quick[data-active="@search"] .tq-con > dd[data-con="search"] { pointer-events: unset; opacity: 1 }
.tq-con .img-ico > span.ico { background-color: var(--primary) }
.tq-con .img-ico:hover > span.ico { background-color: white }
.top-nav[data-active] .top-nav-menu { pointer-events: none; opacity: 0 }
.tqc-search dt { order: 2 }
.tqc-search dd { width: 100% }
.top-lang { margin-left: 1rem; }
.top-console { margin-left: .75rem; z-index: 6; }
.top-nav-menu .visible-inline-xs { display: none }
.top-toggle-nav { display: none }
.top-side a { color: var(--white) }
.top-side a:hover { color: var(--primary) }
.top-search { display: flex; align-items: center; justify-content: flex-end; width: 100% }
.top-search input[type="text"] { font-size: .8rem; line-height: 1; width: 100%; height: 2rem; padding: 0 2.5rem 0 1rem; color: var(--normal); border: 1px solid var(--lightgray); background-color: rgba(255, 255, 255, .25) }
.top-search button { font-size: 1.2rem; position: absolute; z-index: 2; top: 0; right: .5rem; display: flex; align-items: center; height: 100%; color: var(--muted); border: 0; background-color: transparent }
.top-search button i { -webkit-font-smoothing: auto }
.top-search:hover input { width: 100%; opacity: 1 }
.tlang-con > dd > a { line-height: 1; display: flex; align-items: center }
.fixed-tn .top-nav { height: var(--top-nav-sm); padding-bottom: 0 }
.fixed-tn .top-nav::before { transition: background .25s ease .25s; background: var(--lightprimary-90) }
.fixed-tn .top-nav-logo { margin-top: 0 }
.top-nav-logo svg path { fill: var(--primary) !important }
.transparent body[data-view="desktop"]:not(.fixed-tn) .top-nav-logo svg.logo-color path { fill: var(--white) !important }
.transparent body[data-view="desktop"]:not(.fixed-tn) .top-nav-menu dl.active dt a { color: var(--primary) }
.transparent body[data-view="desktop"]:not(.fixed-tn) .top-nav-menu dl.active dt a::after { opacity: 0 }
[data-view="desktop"].hide-top-nav .top-nav { transform: translateY(-101%) }
.b-border, .b-bc, .b-bcb, .b-arrow, .b-normal { white-space: nowrap }
.b-normal { display: flex; overflow: hidden; align-items: center; justify-content: center; width: 80px; height: 28px; border-radius: 15px; color: white }
.b-normal::before, .b-normal::after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; background-repeat: no-repeat; background-size: 100% 100% }
.b-normal::before { z-index: -2; transition: opacity .25s ease; background-image: url("/uploads/default/btn-sm-normal.png") }
.b-normal.b-md { width: 130px; height: 34px; border-radius: 22px }
.b-normal:not(.b-lg):hover { color: var(--white); background-color: rgba(255, 255, 255, .5) }
.b-normal:not(.b-lg):hover::before { opacity: .75 }
.b-normal.b-lg { width: 23.8rem; height: 3.8rem; padding-right: 5rem; padding-left: 5rem; border-radius: 10rem; }
.b-normal.b-lg::before { background-image: url("/uploads/default/btn-lg-normal.svg") }
.b-normal.b-lg:hover, .b-normal.b-lg.active { opacity: 1; color: var(--white) }
.b-normal.b-rounded { border: 1px solid var(--light-50); border-radius: 1.7rem; height: 3.4rem; min-width: 10rem; }
.b-normal.b-rounded::before { background-image: url("/uploads/default/btn-rounded.svg") }
/*  */
h3.title { color: var(--primary) }
h3.title.white { color: var(--white) }
.video-play-button { z-index: 1; color: var(--primary) }
.video-play-button:before { position: absolute; z-index: 0; top: 50%; left: 50%; display: block; width: 80px; height: 80px; content: ""; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); -webkit-animation: pulse-border 1500ms ease-out infinite; animation: pulse-border 1500ms ease-out infinite; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; background: white repeat scroll 0 0 }
.video-play-button.theme:before, .video-play-button.theme:after { background: var(--primary) repeat scroll 0 0 }
.video-play-button:after { position: absolute; z-index: 1; top: 50%; left: 50%; display: block; width: 80px; height: 80px; content: ""; -webkit-transition: all 200ms; -moz-transition: all 200ms; -ms-transition: all 200ms; -o-transition: all 200ms; transition: all 200ms; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; background: white repeat scroll 0 0 }
@-webkit-keyframes pulse-border {
0% { -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); opacity: 1 }
100% { -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); opacity: 0 }
}
@keyframes pulse-border {
0% { -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); opacity: 1 }
100% { -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); opacity: 0 }
}
.video-play-button i { z-index: 3 }
.video-play-button.relative { position: relative; width: 3rem; height: 3rem }
.video-play-button.relative::before, .video-play-button.relative::after { width: 100%; height: 100% }
.slides-list, .slides-list li, .bx-wrapper, .bx-viewport { position: relative; height: 100% }
.slick-list, .slick-track { overflow: hidden; height: inherit }
.slick-dotted { --db: 1.5rem }
.slick-dots { font-size: 0; line-height: 1; z-index: 3; height: 0; bottom: var(--db); left: 0; text-align: center }
.slick-dots li { width: 10px; height: 10px; margin-right: .35rem; margin-left: .35rem; padding: 0; transition: all .5s ease }
.slick-dots li button { width: 100%; height: 100%; margin: 0; padding: 0; background-color: transparent }
.slick-dots li button:before { font-size: 0; line-height: 1; width: 100%; height: 100%; transition: all .25s ease; opacity: .65; border-radius: 5rem; background-color: var(--white) }
.slick-dots li.slick-active button:before { opacity: 1; color: white; background-color: var(--primary) }
.dot-primary .slick-dots li button { background-color: white }
.dot-primary .slick-dots li.slick-active button { background-color: rgb(30, 80, 164) }
.slides-nav { top: 30% }
.slides-nav a { line-height: 1; position: absolute; top: 50%; display: inline-block }
.slides-nav i { vertical-align: top }
.slides-nav-prev { left: 0; -webkit-transform: translateX(-80%) translateY(-50%); transform: translateX(-80%) translateY(-50%) }
.slides-nav-next { right: 0; -webkit-transform: translateX(80%) translateY(-50%); transform: translateX(80%) translateY(-50%) }
.slick-track { margin-right: auto; margin-left: auto }
.slick-dotted.slick-slider { margin: 0 }
.slick-slider { --pn: 3rem; --pp: 3rem; --size: 2.4rem }
.slick-prev, .slick-next { z-index: 5; width: var(--size); height: var(--size); margin: 0; transition: all .25s ease }
.slick-prev::before, .slick-next:before { font-family: "cxany"; font-size: var(--size); transition: all .25s ease; opacity: 1; color: var(--darkgray) }
.slick-prev::before { content: "\e934" }
.slick-next::before { content: "\e935" }
.slick-prev { left: var(--pp) }
.slick-next { right: var(--pn) }
.slick-prev:hover::before, .slick-next:hover::before { color: var(--primary) }
.bottom-nav.slick-slider { --pn: 8.25rem; --pp: 4.5rem; --size: 2.6rem }
.bottom-nav .slick-next { right: initial; left: var(--pn) }
.bottom-nav .slick-prev::before, .bottom-nav .slick-next::before { font-size: 1.4rem; color: var(--normal) }
.bottom-nav .slick-prev, .bottom-nav .slick-next { z-index: 2; top: initial; bottom: 2.5rem; transform: none; opacity: .85; border-radius: 100%; background: rgba(255, 255, 255) }
.bottom-nav .slick-prev::before { content: "\e904" }
.bottom-nav .slick-next::before { content: "\e905" }
.bottom-nav .slick-prev:hover, .bottom-nav .slick-next:hover { background: var(--primary) }
.bottom-nav .slick-prev:hover::before, .bottom-nav .slick-next:hover::before { color: white }
@media screen and (min-width:1920px) {
.slides-nav-prev { -webkit-transform: translateX(-100%) translateY(-50%); transform: translateX(-100%) translateY(-50%) }
.slides-nav-next { -webkit-transform: translateX(100%) translateY(-50%); transform: translateX(100%) translateY(-50%) }
}
.shadow-con { overflow: hidden }
.radius-5 { border-radius: 5px }
.radius-10 { border-radius: 10px }
.radius-15 { border-radius: 15px }
.radius-25 { border-radius: 25px }
.desktop .home .fixed-tn .hsec-banner > div { padding-top: var(--top-nav-sm) }
.banner-wrapper { height: 100vh }
.full-banner { height: 100vh; max-height: 56vw; --h3:1.6rem; --h4:.9rem; }
.home .slides-list .hs-item::before { position: absolute; bottom: 0; left: 0; width: 100%; height: 24.5rem; content: ""; background: url("/uploads/default/bg-banner.svg") repeat-x left bottom; background-size: auto 100%; }
.slides-info { z-index: 1; display: flex; width: 100%; height: 100% }
.hs-item { overflow: hidden }
.hsi-container { z-index: 2 }
.hsi-con { margin-bottom: 5vw; transition: all .75s ease-in-out .75s; transform: translateY(15%); opacity: 0 }
.slides-list.completed .slick-current .hsi-con { transform: none; opacity: 1 }
.hsi-con.primary { color: var(--primary) }
.hsi-con img { width: auto; max-height: 100% }
.hsi-con h4 { font-size: var(--h4s); line-height: 1.5 }
.hsi-con h4 em { font-size: 80% }
.full-banner .hsi-con h4 { font-size: var(--h4) }
.sub-banner .sbani-con h3 { font-size: var(--h3s) }
.sub-banner .sbani-con h4 { font-size: var(--h4s) }
.hsi-player { width: 100%; height: 100% }
.hcom-overview { line-height: 2.3; max-width: 33rem; padding-top: 1.75rem; padding-bottom: 3.25rem; text-align: justify }
.secomc-txt .title { line-height: 1.8; /*height: 6rem;*/ }
.hfea-con { flex-grow: 1; height: 0; }
.hfeac-main { height: 80%; width: 50vw; margin: auto; top: 10%; }
.hfea-item { position: absolute; display: flex; align-items: flex-start; width: 15rem; }
.hfea-item > dt { line-height: 1; width: 100%; height: 3rem }
.hfea-item > dt > span { cursor: default; position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; min-width: 12vw; height: 100%; line-height: 3rem; text-align: center; }
.hfea-item > dd { pointer-events: none; width: fit-content; min-width: 14rem; text-align: center; white-space: nowrap; opacity: 1; transition: opacity .25s ease, transform .25s ease; }
.hfea-item.active > dd { opacity: 1; transform: none; }
.hfea-item:nth-child(1) { top: 37.5%; right: 50%; transform: rotate(-60deg) }
.hfea-item:nth-child(1) > dt { order: 2; }
.hfea-item:nth-child(1) > dd { position: absolute; top: 0; right: 0; transform: rotate(60deg) translate(-14rem, 2rem); transform-origin: right top; }
.hfea-item:nth-child(2) { top: 37.5%; left: 50%; transform: rotate(60deg) }
.hfea-item:nth-child(2) > dd { position: absolute; top: 0; left: 0; transform: rotate(-60deg) translate(14rem, 2rem); transform-origin: left top; }
.hfea-item:nth-child(3) { top: 75%; align-items: center; flex-direction: column; left: 50%; transform: translateX(-50%); }
.hfea-item:nth-child(3) > dt { margin-bottom: 5rem }
.hfea-item:nth-child(4) { top: 46%; align-items: center; justify-content: center; width: 100%; pointer-events: none; }
.hfea-item:nth-child(4) > dt { line-height: 1.25; width: fit-content; height: auto }
.hfeac-ani svg { max-height: 100%; }
.hfeac-ani svg g#triangle>path, .hfea-item>dt { animation-duration: 1s; animation-fill-mode: forwards; }
.hfea-con.animated svg g#triangle #s1 { animation-name: s1; }
.hfea-con.animated svg g#triangle #s2 { animation-name: s2; }
.hfea-con.animated svg g#triangle #s3 { animation-name: s3; }
.hfea-con.animated .hfea-item #d1 { animation-name: d1; }
.hfea-con.animated .hfea-item #d2 { animation-name: d2; }
.hfea-con.animated .hfea-item #d3 { animation-name: d3; }
@keyframes s1 {
  to { transform: translate(-13px, -13px); }
}
@keyframes s2 {
  to { transform: translate(13px, -13px); }
}
@keyframes s3 {
  to { transform: translate(0, 13px); }
}
@-webkit-keyframes s1 {
  to { transform: translate(-13px, -13px); }
}
@-webkit-keyframes s2 {
  to { transform: translate(13px, -13px); }
}
@-webkit-keyframes s3 {
  to { transform: translate(0, 13px); }
}
@keyframes d1 {
  from { opacity: 0; transform: translate(13px, 13px); }
}
@keyframes d2 {
  from { opacity: 0; transform: translate(-13px, 13px); }
}
@keyframes d3 {
  from { opacity: 0; transform: translate(0, -13px); }
}
@-webkit-keyframes d1 {
  from { opacity: 0; transform: translate(13px, 13px); }
}
@-webkit-keyframes d2 {
  from { opacity: 0; transform: translate(-13px, 13px); }
}
@-webkit-keyframes d3 {
  from { opacity: 0; transform: translate(0, -13px); }
}

.hpro-item dt { transition: transform .5s ease-in }
.hpro-item > dl:hover dt { transform: translateY(-.5rem) }
[data-view="desktop"] .hpro-item:nth-child(2) > dl { margin-top: 50% }
.hprolink-list a.b-normal { opacity: .3 }
.home-solutions, .home-case { --gap: 30px; --per: var(--wide-width); }
.hsol-con { width: calc((var(--per) + var(--gap) * 2) * 3); left: 50%; transform: translateX(-50%) }
.hsol-slide { transition: opacity .5s ease; padding-left: var(--gap); padding-right: var(--gap) }
.hsoli-con { width: var(--per) }
.hsoli-con .ratio-16-9 { padding-top: 52% }
.hsolic-det { width: 8.5rem; height: 8.5rem; display: flex; align-items: center; justify-content: center; background: url("/uploads/default/bg-circle.png") center center no-repeat; background-size: contain }
.slick-active-ani { transition: opacity .5s ease-in .15s }
[data-view="desktop"] .hsol-slide:not(.active) { opacity: .3 }
[data-view="desktop"] .hsol-slide:not(.active) .slick-active-ani { opacity: 0 }
.hsol-nav { top: inherit; height: 0; bottom: 2.25rem }
.hsol-nav a > span { display: block; line-height: 1; transition: transform .25s ease }
.hsol-nav a:first-child:hover > span { transform: translateX(-.5rem) }
.hsol-nav a:last-child:hover > span { transform: translateX(.5rem) }
.hser-secomc { margin-top: 2% }
.hseri-con .ratio-16-9 { padding-top: 35% }
.hseric-det > span { transition: color .5s ease; }
.hseri-con:hover .hseric-det > span { color: var(--light); }
.hpar-con .ratio-16-9 { padding-top: 35% }
.hpar-con .ratio { border-radius: 15px; transition: all .5s ease }
.hpar-con .ratio:hover { transform: translateY(-2px); box-shadow: 3px 3px 10px rgba(0, 0, 0, .15) }
.hsup-con { --h: 10rem; height: var(--h) }
.hsupc-bg { border-radius: calc(var(--h) / 2) }
.hsupc-item { display: flex; align-items: center; max-height: 100% }
.hsupc-item > dt { flex-shrink: 0 }
.hsupc-item > dd { flex-grow: 1; padding: .5rem 1rem; text-align: center; justify-content: center }
.hsupc-ico > dt > img { max-height: 8rem; }
.hsupc-avatar { align-items: flex-end }
.hsupc-avatar > dt { --dt: 12.5rem; --dw: 15rem; height: var(--dt); width: var(--dw); transition: transform .5s ease-out; transform-origin: center bottom }
.hsupc-avatar > dd { display: flex; align-items: center; height: 100% }
.hsup-con:hover .hsupc-avatar > dt { transform: scale(1.1) }
/* common footer */
.main-footer a:hover { color: var(--light) }
.mfn-sub-nav a { display: block }
.mfoimg-logo { height: 3rem }
.footer-link { --ih: 2.25rem }
.footer-link dd a { margin: .75rem }
.footer-link dd a img { height: var(--ih) }
.footer-copyright, .footer-copyright a { color: var(--white) }
.footer-copyright a:hover { color: var(--light) }
.quick-nav { position: fixed; z-index: 999; right: .5rem; bottom: .5rem; border-radius: 5rem; width: var(--w); transition: transform .25s ease, opacity .25s ease; transform: translateX(0); --w: 2rem }
.quick-nav a { z-index: 1; display: flex; align-items: center; justify-content: center; width: 100%; height: var(--w); border-radius: 100%; color: var(--darkprimary); background-color: rgba(255, 255, 255, .15) }
.quick-nav a:hover { z-index: 5; background-color: var(--primary) }
.quick-nav a span { position: absolute; z-index: -1; right: calc(var(--w) + 2px); bottom: 0; transition: all .25s ease; transform: translateX(-10%); white-space: nowrap; pointer-events: none; opacity: 0; border: 1px solid var(--lightgray); border-radius: 8px; background-color: white }
.quick-nav a span::after { position: absolute; top: 0; right: -10px; width: 15px; height: 100%; content: ""; background-color: transparent }
.quick-nav a:hover { color: var(--darkprimary); border-color: var(--lightgray); background-color: white }
.quick-nav a:hover span { -webkit-transform: translateX(0); transform: translateX(0); pointer-events: initial; opacity: 1 }
.quick-nav.hide-me { transform: translateX(100%); pointer-events: none; opacity: 0 }
.mfoocc-con { text-align: center; width: fit-content; }
.mfoocc-con>img { display: block; }
.mfoimg-qrcode { max-width: 120px; }
/* sub page */
.sban-img { z-index: -99; pointer-events: none; opacity: 0 }
.sban-info h3 { font-size: var(--h3); line-height: 1.2 }
.sban-info h4 { font-size: var(--h4) }
.sub-banner.sm-banner { height: var(--h); --h: 25vw }
.sban-con { top: 0; right: 0; left: 0; width: 100%; padding-top: var(--top-nav) }
.sban-con.abs { width: inherit }
.hover-border { line-height: 1; padding: .4rem 0 }
.hover-border:before { position: absolute; bottom: 0; left: 0; display: block; width: 100%; height: 4px; content: ""; transition: transform .6s cubic-bezier(.36, .14, 0, 1); transform: scale(0, 1); transform-origin: 100% 50%; background-color: var(--primary) }
.hover-border.hb-normal:before { background-color: var(--normal) }
.hover-auto .hover-link:hover .hover-border:before, .hover-auto .hover-border:hover:before { transform: scale(1, 1); transform-origin: 0 50% }
.hover-link { cursor: pointer }
.hover-border.hb-dark { color: var(--dark) }
.breadcrumb { margin-top: 5.75rem }
.breadcrumb a, .breadcrumb span { flex-shrink: 0; margin-right: .5rem; opacity: .3 }
.breadcrumb a:hover { opacity: 1; color: inherit }
.subnav-container { border-bottom: 1px solid var(--lightgray) }
.sub-nav a { display: flex; height: 5rem }
.sub-nav a.active { font-weight: bold; color: var(--primary) }
.sub-nav a.active .hover-border:before { transform: scale(1, 1); transform-origin: 0 50% }
.sub-nav a:first-child { margin-left: 0 !important }
.sub-nav a .hover-border { display: flex; align-items: center; height: 100% }
.subban-txt { position: absolute; z-index: 5; top: 0; left: 0; flex-wrap: wrap; width: 100%; height: 100% }
.subban-txt > dl { max-width: 40rem }
.about-banner .slides-info { padding-top: 0 }
[data-view="desktop"] .abb-pic .obs { margin-top: -5rem }
.mouse-scroll { z-index: 2; display: block; width: 2rem; height: 2.7rem; border: 1px solid var(--silver); border-radius: 1rem; background: none }
.mouse-scroll:before { position: absolute; top: .45rem; left: .75rem; width: .4rem; height: .4rem; content: ""; -webkit-animation: scrollanimation 2s infinite; -moz-animation: scrollanimation 2s infinite; -ms-animation: scrollanimation 2s infinite; -o-animation: scrollanimation 2s infinite; animation: scrollanimation 2s infinite; border-radius: 100%; background: var(--silver) }
.mouse-scroll:hover { opacity: .8 }
@keyframes scrollanimation {
0% { top: .45rem; opacity: 0 }
20% { top: .45rem; opacity: 1 }
60% { top: 1.15rem; opacity: 1 }
80%, 100% { top: 1.15rem; opacity: 0 }
}
/* about */
.abpro-mis-det { min-height: 16vw; }
.abpro-hon-item { background: url("/uploads/default/bg-honor-item.svg") no-repeat; background-size: 100% 100%; border: 1px solid var(--light-50); }
.abpro-hon-item-img { width: 5rem; }
.abpro-hon-item-txt { border-top: 1px solid var(--light-50); margin-top: 1rem; padding-top: .25rem; }
.abpro-hon-item-txt > h4 { display: flex; align-items: center; justify-content: center; min-height: 2.5rem; }
.abpro-join-main, .abs-main-bg { background-repeat: repeat-y; background-position: center top; background-size: 100% auto; }
.abpro-wel-list::before, .abpro-wel-list::after, .abpro-off-item::before, .abpro-car-con::before { content: ""; position: absolute; display: block; left: 0; top: 0; width: 50%; height: .2rem; background: url("/uploads//default/bg-join-title.svg") no-repeat; background-size: 100% 100%; }
.abpro-wel-list::after { left: initial; right: 0; }
.abpro-off-item::before, .abpro-car-con::before { width: 100%; }
.abpro-car-qrcode { max-width: 10rem; }
.abpro-con-feedback { border-top-left-radius: 25px; border-bottom-left-radius: 25px; background-color: rgba(14, 19, 56, 1); }
.abpro-con-link a>img { height: 2.4rem; width: 2.4rem; }
.cfcc-con > li { margin-bottom: 1rem; display: flex; align-items: flex-start; background: url("/uploads/default/bg-form.svg") repeat center top; background-size: 101% auto; overflow: hidden; border-radius: 1.3rem; }
.cfcc-con > li > label { flex-shrink: 0; height: 2.6rem; white-space: nowrap; min-width: 6rem; padding-left: 1.5rem; padding-right: 1rem; margin-right: 0; font-size: .9rem; }
.cfcc-con > li > label::after { content: "│"; position: absolute; right: 0; font-size: 1rem; color: var(--light); }
.cfcc-con input[type="text"], .cfcc-con textarea { border-color: transparent; background-color: transparent; vertical-align: top; flex-grow: 1; color: var(--white); font-size: .9rem; }
.cfcc-con input[type="text"] { height: 2.6rem; }
.cfcc-con textarea { height: 11rem; }
/* products */
.proban-con { padding-top: 8.5vw; }
.proban-cats { width: fit-content; padding: .25rem .65rem; line-height: 1; border: 1px solid white; }
.profea-con .ratio { transition: all .25s ease; }
.profea-con .inner { opacity: .8; transition: all .25s ease; }
.profea-con .ratio:hover { background-color: var(--darkprimary) }
.proadv-icon { text-align: center; }
.proadv-icon > img { height: 6rem; max-width: 8rem; }
.proadv-txt { text-align: justify; text-align-last: center; }
.proadd-item-det { line-height: 1.3rem; max-height: 3.9rem; }
.propro-icon > img { height: 6rem; }
/* services */
.serban-con { padding-bottom: 1vw; }
.serapp-item-txt { display: flex; justify-content: center; }
.serapp-item-img .ratio-16-9 { padding-top: 74%; }
.serapp-item-img .inner::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; background: url("/uploads/default/mask-app.svg") no-repeat; background-size: cover; }

/* case */
.caseban-img { opacity: initial; }
.caseban-det { min-height: 10rem; }
/* .caseban-con { --bh: 23vw; min-height: 56vh; } */
.case .solstr-con { border: 1px solid var(--light); }
.solstr-con p { margin-bottom: 1.25em;}
/* news */
.newsli-box { border-bottom: 1px solid var(--lightgray) }
.newsli-con { transition: transform .5s ease }
.news-list .item-left { line-height: 1; flex-shrink: 0; width: 8rem; height: fit-content }
.ani-font { transition: color .5s ease }
.ani-bg { transition: background .5s ease }
[data-view="desktop"] .news-list .item-info { line-height: 1.5; flex-grow: 1; margin-left: 8rem; padding-right: 5rem }
.news-list.has-thumbs .item-left { width: 150px; padding-right: 30px; text-align: left }
.news-list.has-thumbs .item-info { margin-left: 15rem; padding-right: 8rem }
.news-list.has-thumbs .overview { line-height: 22px; max-height: 44px; color: rgb(128, 128, 128) }
.news-list .image { flex-shrink: 0; width: 9rem }
.news-list .item-info i[class^="icon-"] { position: absolute; top: 35%; right: 0; transition: all .5s ease }
.desktop .news-list .newsl-item:hover { color: var(--white); background-color: var(--darkprimary) }
.desktop .news-list .newsl-item:hover .newsli-con { transform: scale(1.1) }
.desktop .news-list .newsl-item:hover .ani-font { color: var(--white) !important }
.news-details.sub-page { padding-top: 20px; padding-bottom: 20px }
.news-heading { text-align: center }
.news-heading h2 { font-weight: bold; line-height: 1; margin-top: 100px; margin-bottom: 20px; color: black }
.news-heading h4 { font-size: 14px; color: rgb(155, 155, 156) }
.news-heading h4 i { font-size: 1rem; margin-top: -.25rem; margin-right: 5px; vertical-align: middle }
.news-heading h4 span { margin-right: 10px; margin-left: 10px; vertical-align: middle }
.news-content { font-size: 15px; margin-top: 40px; padding-bottom: 40px }
.news-content strong { color: black }
.newsd-con p { margin-bottom: 1.5em }
.nsca-list li a i { margin-top: -.2rem; transition: -webkit-transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s; vertical-align: middle }
.nsca-list li a:hover i { -webkit-transform: translateX(.5rem); transform: translateX(.5rem) }
.nscv-list .image .inner::after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; transition: background-color .5s ease, opacity .5s ease; opacity: .4; background-color: black }
.nscv-list .image .ratio::after { font-family: "cxany"; font-size: 3.5rem; line-height: 3.5rem; position: absolute; z-index: 3; top: 50%; left: 50%; width: 3.5rem; height: 3.5rem; content: "\e92f"; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; color: var(--white); border-radius: 100% }
.nscv-list li:hover .text { background-color: var(--darkprimary) }
.nscv-list li:hover .ani-font { color: var(--white) !important }
.video-list > li:nth-child(n + 7) { display: none }
.video-list > li.active { display: list-item }
.newsdet-container { padding-top: var(--top-nav-sm) }
.article-prev-next { border-top: 1px solid var(--darkgray); border-bottom: 1px solid var(--darkgray) }
.apn-con { height: var(--h); --w: 2.5rem; --h: 3.5rem }
.apn-con > div { display: flex; align-items: center; height: 100% }
.apnc-item { flex-shrink: 0; width: calc(50% - var(--w)) }
.apnc-item::before { position: absolute; top: 0; right: 0; width: 50vw; height: 100%; content: ""; transition: background .5s ease; background-color: var(--darkgray) }
.apnc-item.apnc-next::before { right: initial; left: 0 }
.apnc-item:hover::before { background-color: var(--primary) }
.apnc-item:hover, .apnc-item:hover a, .apnc-item:hover a > i { color: var(--white) !important }
.apnc-back { justify-content: center; width: calc(var(--w) * 2); background-color: var(--silver) }
.apnc-back a { width: 100%; height: 100% }
.apnc-back a:hover { color: var(--white) !important; background-color: var(--primary) }
.apnc-item a { width: 100%; color: var(--dark) }
.apnc-item a span { max-width: 80% }
.related-news { background: rgba(227, 227, 227, 1) }
.related-news .btn-more { top: initial; bottom: 0; min-width: initial; --bc: var(--muted) }
.related-list hr { --lightgray: var(--darkgray) }
.relatedn-item .intro { line-height: 1.3rem; min-height: 3.9rem }
.newsd-share .social-share a { font-size: 1rem; display: flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; margin-right: .5rem; margin-left: .5rem; padding: .35rem; border: 0; border-radius: 6px; background-color: var(--lightgray) }
.newsd-share .social-share a:hover { background-color: var(--light) }
.newsd-share .social-share a:before { content: unset !important }
.pager-list a { font-size: .9rem; display: flex; align-items: center; justify-content: center; min-width: 1.6rem; height: 1.6rem; margin-right: .5rem; margin-left: .5rem }
.pager-list a.active { pointer-events: none; color: var(--white); background-color: var(--primary) }
.pager-list a:hover { color: var(--primary) }
.pager-list .pager-prev, .pager-list .pager-next { font-size: .9rem; margin-right: .25rem; margin-left: .25rem; background-color: transparent }
.search-title { margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px dotted var(--primary) }
.search-title h3 { font-family: "ikeasbi"; font-size: 1.7rem }
.search-products .subject { font-size: .85rem; line-height: 1.5rem; display: inline-block; margin-top: .5rem; padding-right: 1.5rem; padding-left: 1.5rem; color: var(--primary); border: 1px solid var(--primary); border-radius: .75rem }
.search-products .overview { font-family: var(--font-system); font-size: .7rem; color: var(--primary) }
.search-list a { margin-top: 1rem; margin-bottom: 1rem; padding-bottom: 1rem }
.search-list a:hover { background-color: rgb(248, 248, 248); box-shadow: .35rem .35rem .75rem rgba(0, 0, 0, .1) }
.search-list a:hover .subject, .search-list a:hover .overview { color: var(--muted); border-color: var(--muted) }
.search-count { align-items: flex-end; justify-content: space-between }
.search-home .top-search input[type="text"] { color: var(--normal) }
.ressub-nav a { border-bottom: 2px solid transparent }
.ressub-nav a.active { color: var(--primary); border-color: var(--primary) }
.seares-products.prodh-list { --tis: .9rem; --tss: 2rem }
.hide-nav .top-nav { display: none }
.hide-nav body { padding: 0 }
.error-404 { height: 100vh }
.page-404 .b-bc { --py: .25rem }
.page-404-badges { top: 0; right: 0; left: initial; width: 8rem; transform: translate(50%, -50%) }
.arch-content { color: var(--link) }
.arch-content h1, .arch-content h2, .arch-content h3, .arch-content h4 { color: var(--dark) }
.archive-title hr.with-line::before { height: .25rem }
.arch-faq-list { border-bottom: 1px solid var(--darkgray) }
.archfaq-item { border-top: 1px solid var(--darkgray) }
.archfaq-item .ajl-content > div { padding: 0; background-color: initial }
.archfaqi-con { color: var(--link) }
.archfaqi-con p { margin-bottom: 1em }
.archfaqi-con p strong { font-size: 118%; color: var(--primary) }
.archfaq-item [aria-expanded="true"] .bnav-icon::before { content: "\c014" }
.archive-sitemap .archive-title hr.with-line::before { width: 100%; height: 1px; background-color: var(--darkgray) }
.form-message { font-size: 0; line-height: 0; z-index: -9; display: none; visibility: hidden; height: 0 }
input { outline: none !important }
input[type="text"], textarea { z-index: 1; padding: 0 .8rem; transition: all .5s ease; }
textarea { padding-top: .6rem; line-height: 1.6; }
input[type="text"].error, textarea.error, input[type="text"]:focus, textarea:focus { border-color: transparent }