@font-face { font-family: "ml"; font-weight: normal; font-style: normal; src: url("./fonts/Montserrat-Light.svg") format("svg"), url("./fonts/Montserrat-Light.ttf") format("truetype"), url("./fonts/Montserrat-Light.woff") format("woff"); }
@font-face { font-family: "mb"; font-weight: normal; font-style: normal; src: url("./fonts/Montserrat-Bold.svg") format("svg"), url("./fonts/Montserrat-Bold.ttf") format("truetype"), url("./fonts/Montserrat-Bold.woff") format("woff"); }
:root {
  --normal: rgb(0, 0, 0);
  --primary: rgb(255, 4, 2);
  --light: rgb(237, 237, 237);
  --gray: rgb(222, 222, 222);
  --silver: rgb(246, 246, 246);
  --link: rgb(191, 191, 191);
  --secondary: rgb(68, 68, 68);
  --mute: rgb(128, 128, 128);
  --white: white;
  --black: black;
  --dark: rgb(35, 35, 35);
  --top-nav: 3.4rem;
  --top-nav-sm: 3.4rem;
  --logo-size: 50px;
  --left-pad: 4rem;
  --left-wide: 7rem;
  --left-sm: 20px;
  --right-pad: 30px;
  --fw-bold: 600;
  --fw-normal: 400;
  --fw-light: 200;
  --font-sans: "Noto Sans SC", "-apple-system", "Helvetica Neue", "Helvetica", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC", "Source Han Sans CN", "Microsoft YaHei", "ST Heiti", "SimHei";
  --font-system: "-apple-system", "Noto Sans", "Helvetica Neue", "Helvetica", "Nimbus Sans L", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC", "Source Han Sans CN", "Microsoft YaHei", "ST Heiti", "SimHei";
  --font-family: "-apple-system", "Noto Sans", "Helvetica Neue", "Helvetica", "Nimbus Sans L", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC", "Source Han Sans CN", "Microsoft YaHei", "ST Heiti", "SimHei";
}

html { font-size: 100%; min-height: 100%; }
body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, dl, dt, dd, ol, ul, li, form, fieldset, legend, figure, table, th, td, caption, hr, input, button, article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { font-weight: var(--fw-normal); position: relative; margin: 0; padding: 0; }
body { font-family: var(--font-sans); font-size: .7rem; line-height: 1.8; letter-spacing: .025em; color: var(--normal); }
@media screen and (min-width:1200px) {
  html { font-size: 110%; }
}
@media screen and (min-width:1400px) {
  html { font-size: 115%; }
}
@media screen and (min-width:1600px) {
  html { font-size: 120%; }
}
@media screen and (min-width:1900px) {
  html { font-size: 125%; }
}
@media screen and (min-width:2500px) {
  html { font-size: 127.5%; }
}
@media screen and (min-width:3000px) {
  html { font-size: 130%; }
}
h1, h2, h3, h4, h5, h6 { display: block; }
audio, canvas, progress, video { display: inline-block; vertical-align: baseline; }
audio:not([controls]) { display: none; height: 0; }
video { width: 100%; max-width: 100%; max-height: 100%; object-fit: cover; }
[hidden], template { display: none; }
a, button { transition: all .5s; }
a { position: relative; display: inline-block; text-decoration: none; color: var(--link); }
a:hover { text-decoration: none; color: var(--primary); outline: none; }
a:focus, a:active, button:hover, button:focus, button:active, input:focus, textarea:focus, li:focus, video:active, video:focus { text-decoration: none; color: inherit; outline: none; }
button, a { -webkit-transform: translateZ(0); transform: translateZ(0); border: 0; background: transparent; -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden; }
button:hover { color: var(--primary); }
a, span, div, section, dl, dt, dd, i, em, label { font-style: normal; position: relative; }
li { list-style: none; }
input, textarea, button { font-family: var(--font-family); }
input, textarea { font-size: .7rem; width: 100%; resize: none; transition: border .5s, background-color .5s; border: 0; border-radius: 0; background: transparent; -webkit-appearance: none; }
a:hover .no-hover { color: inherit; background: initial; }

/*strong, .strong { font-weight: normal; } */
.strong { font-weight: bold; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; max-height: 100%; vertical-align: top; }
hr { margin-top: 1rem; margin-bottom: 1rem; border: 0; border-top: 1px solid var(--mute); }
hr.min { margin-top: 0; margin-bottom: 0; }
dl, dt, dd { line-height: inherit; }
a.block span { position: relative; display: block; }
.normal { font-size: initial; font-weight: normal; font-style: normal; }
.mobile-break { display: none; }
.inline { position: relative; display: inline; vertical-align: top; letter-spacing: normal; }
.block { position: relative; display: block; }
.nowrap { white-space: nowrap; }
.ellipsis { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.multi-ellipsis { display: -webkit-box !important; overflow: hidden; -webkit-box-orient: vertical; word-break: break-word; }
.gray { color: var(--gray); }
.white { color: white; }
.black { color: var(--black); }
.primary { color: var(--primary); }
.silver { color: var(--silver); }
.secondary { color: var(--secondary); }
.mute { color: var(--mute); }
.dark { color: var(--dark); }
.light { color: var(--light); }
.bg-white { background-color: white; }
.bg-gray { background-color: var(--gray); }
.bg-silver { background-color: var(--silver); }
.bg-dark { background-color: var(--dark); }
.bg-black { background-color: rgb(11, 11, 11); }
.none { display: none; }
.noevent { pointer-events: none; }
.full-size { position: relative; overflow: hidden; width: 100%; height: 100%; }
.full-height, .fh { height: 100%; }
.full-width, .fw { width: 100%; height: auto; vertical-align: top; }
.abs { position: absolute; top: 0; left: 0; width: 100%; }
.bgs-cover, .bgs-contain { background-repeat: no-repeat; background-position: center center; }
.bgs-cover { background-size: cover; }
.bgs-contain { background-size: contain; }
.bgp-left-top { background-position: left top; }
.bgp-center-top { background-position: center top; }
.at-middle { display: flex !important; align-items: center; flex-wrap: wrap; }
.v-middle { display: flex; align-items: center; justify-content: left; }
.cxany-valign-middle span, .cxany-valign-middle img, .cxany-valign-middle i { display: inline-block; float: none; vertical-align: middle; }
.left-pad { padding-left: var(--left-pad); }
.right-pad { padding-right: var(--right-pad); }
.fs-light { font-weight: 300;  /*-webkit-font-smoothing: antialiased; */ }
.ff-system { font-family: var(--font-system); }
.ff-ml { font-family: "ml", var(--font-system); }
.ff-mb { font-family: "mb", var(--font-system); }
.fw-200 { font-weight: 200; }
.fw-300 { font-weight: 300; }
.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fs-9{font-size:.45rem}.fs-10{font-size:.5rem}.fs-11{font-size:.55rem}.fs-12{font-size:.6rem}.fs-13{font-size:.65rem}.fs-14{font-size:.7rem}.fs-15{font-size:.75rem}.fs-16{font-size:.75rem}.fs-17{font-size:.85rem}.fs-18{font-size:.9rem}.fs-19{font-size:.95rem}.fs-20{font-size:1rem}.fs-21{font-size:1.05rem}.fs-22{font-size:1.1rem}.fs-23{font-size:1.15rem}.fs-24{font-size:1.2rem}.fs-25{font-size:1.25rem}.fs-26{font-size:1.3rem}.fs-27{font-size:1.35rem}.fs-28{font-size:1.4rem}.fs-29{font-size:1.45rem}.fs-30{font-size:1.5rem}.fs-31{font-size:1.55rem}.fs-32{font-size:1.6rem}.fs-33{font-size:1.65rem}.fs-34{font-size:1.7rem}.fs-35{font-size:1.75rem}.fs-36{font-size:1.8rem}.fs-37{font-size:1.85rem}.fs-38{font-size:1.9rem}.fs-39{font-size:1.95rem}.fs-40{font-size:2rem}.fs-42{font-size:2.1rem}.fs-44{font-size:2.2rem}.fs-46{font-size:2.3rem}.fs-48{font-size:2.4rem}.fs-50{font-size:2.5rem}.fs-52{font-size:2.6rem}.fs-54{font-size:2.7rem}.fs-56{font-size:2.8rem}.fs-58{font-size:2.9rem}.fs-60{font-size:3rem}.fs-62{font-size:3.1rem}.fs-64{font-size:3.2rem}.fs-66{font-size:3.3rem}.fs-68{font-size:3.4rem}.fs-70{font-size:3.5rem}.fs-72{font-size:3.6rem}.fs-74{font-size:3.7rem}.fs-76{font-size:3.8rem}.fs-78{font-size:3.9rem}.fs-80{font-size:4rem}.fs-82{font-size:4.1rem}.fs-84{font-size:4.2rem}.fs-86{font-size:4.3rem}.fs-88{font-size:4.4rem}.fs-90{font-size:4.5rem}.fs-92{font-size:4.6rem}.fs-94{font-size:4.7rem}.fs-96{font-size:4.8rem}.fs-98{font-size:4.9rem}.fs-100{font-size:5rem}
.p-t{padding-top:5rem}.p-t-lg{padding-top:8rem}.p-t-md{padding-top:4rem}.p-t-sm{padding-top:2.5rem}.p-t-xs{padding-top:1.5rem}.p-t-min{padding-top:.75rem}.p-b{padding-bottom:5rem}.p-b-lg{padding-bottom:8rem}.p-b-md{padding-bottom:4rem}.p-b-sm{padding-bottom:2.5rem}.p-b-xs{padding-bottom:1.5rem}.p-b-min{padding-bottom:.75rem}.m-t{margin-top:5rem}.m-t-lg{margin-top:8rem}.m-t-md{margin-top:4rem}.m-t-sm{margin-top:2.5rem}.m-t-xs{margin-top:1.5rem}.m-t-min{margin-top:.75rem}.m-b{margin-bottom:5rem}.m-b-lg{margin-bottom:8rem}.m-b-md{margin-bottom:4rem}.m-b-sm{margin-bottom:2.5rem}.m-b-xs{margin-bottom:1.5rem}.m-b-min{margin-bottom:.75rem}.m-l{margin-right:5rem}.m-l-lg{margin-left:8rem}.m-l-md{margin-left:4rem}.m-l-sm{margin-left:2.5rem}.m-l-xs{margin-left:1.5rem}.m-l-min{margin-left:.75rem}.m-r{margin-right:5rem}.m-r-lg{margin-right:8rem}.m-r-md{margin-right:4rem}.m-r-sm{margin-right:2.5rem}.m-r-xs{margin-right:1.5rem}.m-r-min{margin-right:.75rem}.l-h-lg{line-height:2.5}.l-h-md{line-height:2.2}.l-h-sm{line-height:2}.l-h-xs{line-height:1.6}.l-h-2-8{line-height:2.8}.l-h-2-7{line-height:2.7}.l-h-2-6{line-height:2.6}.l-h-1-4{line-height:1.4}.l-h-1-3{line-height:1.3}.l-h-1-2{line-height:1.2}.l-h-1-1{line-height:1.1}.l-h-1{line-height:1}@media screen and (min-width:1900px){.p-t{padding-top:6rem}.p-b{padding-bottom:6rem}.m-t{margin-top:6rem}.m-b{margin-bottom:6rem}.p-t-md{padding-top:5rem}.p-b-md{padding-bottom:5rem}.m-t-md{margin-top:5rem}.m-b-md{margin-bottom:5rem}}
[data-clamp="2"] { -webkit-line-clamp: 2; }
[data-clamp="3"] { -webkit-line-clamp: 3; }
[data-clamp="4"] { -webkit-line-clamp: 4; }
[data-clamp="5"] { -webkit-line-clamp: 5; }
[class*="icon-"] { display: inline-block; }
.row { position: relative; margin-right: 0; margin-left: 0; }
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { padding-right: 0; padding-left: 0; }
.spacing-1 { margin-right: -1px; margin-left: -1px; }
.spacing-1 [class^="col-"] { padding-right: 1px; padding-left: 1px; }
.spacing-2 { margin-right: -2px; margin-left: -2px; }
.spacing-2 [class^="col-"] { padding-right: 2px; padding-left: 2px; }
.spacing-5 { margin-right: -.25rem; margin-left: -.25rem; }
.spacing-5 [class^="col-"] { padding-right: .25rem; padding-left: .25rem; }
.spacing-7 { margin-right: -.35rem; margin-left: -.35rem; }
.spacing-7 [class^="col-"] { padding-right: .35rem; padding-left: .35rem; }
.spacing-10 { margin-right: -.5rem; margin-left: -.5rem; }
.spacing-10 [class^="col-"] { padding-right: .5rem; padding-left: .5rem; }
.spacing-15 { margin-right: -.75rem; margin-left: -.75rem; }
.spacing-15 [class^="col-"] { padding-right: .75rem; padding-left: .75rem; }
.spacing-20 { margin-right: -1rem; margin-left: -1rem; }
.spacing-20 [class^="col-"] { padding-right: 1rem; padding-left: 1rem; }
.spacing-25 { margin-right: -1.25rem; margin-left: -1.25rem; }
.spacing-25 [class^="col-"] { padding-right: 1.25rem; padding-left: 1.25rem; }
.spacing-30 { margin-right: -1.5rem; margin-left: -1.5rem; }
.spacing-30 [class^="col-"] { padding-right: 1.5rem; padding-left: 1.5rem; }
.spacing-35 { margin-right: -1.75rem; margin-left: -1.75rem; }
.spacing-35 [class^="col-"] { padding-right: 1.75rem; padding-left: 1.75rem; }
.spacing-40 { margin-right: -2rem; margin-left: -2rem; }
.spacing-40 [class^="col-"] { padding-right: 2rem; padding-left: 2rem; }
.spacing-50 { margin-right: -2.5rem; margin-left: -2.5rem; }
.spacing-50 [class^="col-"] { padding-right: 2.5rem; padding-left: 2.5rem; }
a.block span.inline { display: inline-block; }
.btn-inline { line-height: 40px; width: 100%; height: 40px; transition: background .5s; color: white; background-color: rgb(214, 216, 221); }
.btn-inline:hover { background-color: rgb(56, 101, 199); }
.ratio { position: relative !important; display: block; overflow: hidden; }
.ratio .inner { position: absolute !important; top: 0; left: 0; width: 100%; height: 100%; }
.ratio > img { position: absolute; z-index: -1; top: 0; left: 0; width: 1px; height: 1px; }
.ratio-16-10 { padding-top: 62.5%; }
.ratio-16-9 { padding-top: 56.25%; }
.ratio-9-16 { padding-top: 177.7777%; }
.ratio-1-1 { padding-top: 100%; }
.ratio-2-1 { padding-top: 50%; }
.ratio-3-1 { padding-top: 33.3333%; }
.ratio-3-2 { padding-top: 66.6666%; }
.ratio-2-3 { padding-top: 133.3333%; }
.ratio-4-3 { padding-top: 75%; }
.ratio-1-2 { padding-top: 150%; }
.ratio-1-3 { padding-top: 300%; }
.hover-zoom { transition: all .5s ease; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden; }
a:hover .hover-zoom, li:hover .hover-zoom, .has-hover:hover .hover-zoom { -webkit-transform: scale(1.1); transform: scale(1.1); }
.window-height { height: 100vh; transition: opacity .8s; opacity: 0; }
.window-height.show-me { opacity: 1; }
.wow { visibility: hidden; opacity: 0; }
.wow-loaded .wow { opacity: 1; }
.ani { transition: all .5s; -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden; }
.noani { transition: none !important; }
.wait-transitioning { pointer-events: none; }
.flex, [class*="flex-"] { display: flex; }
.flex-sb { justify-content: space-between; }
.flex-sc { justify-content: center; }
.flex-cc { align-items: center; justify-content: center; }
.flex-cs { align-items: center; justify-content: flex-start; }
.flex-ce { align-items: center; justify-content: flex-end; }
.flex-cb { align-items: center; justify-content: space-between; }

/* Frame Defined */
.frame-full, .frame-wide, .frame-middle, .frame-narrow { position: relative; width: auto; margin-right: auto; margin-left: auto; }
.frame-full, .frame-wide { padding-right: var(--left-pad); padding-left: var(--left-pad); }
.frame-wide { max-width: 100%; padding-right: var(--left-pad); padding-left: var(--left-pad); }
@media screen and (min-width:1280px) {
  .frame-narrow { max-width: 640px; padding-right: 0; padding-left: 0; }
  .frame-middle { max-width: 1040px; padding-right: 0; padding-left: 0; }
}
@media screen and (min-width:1440px) {
  .frame-narrow { max-width: 740px; }
  .frame-middle { max-width: 1040px; }
  .frame-wide { max-width: 1280px; padding-right: 0; padding-left: 0; }
}
@media screen and (min-width:1600px) {
  .frame-wide { max-width: 1380px; }
}
@media screen and (min-width:1900px) {
  .frame-wide { max-width: 1420px; }
}
@media screen and (min-width:2500px) { }

/* Main */
body { overflow-x: hidden; color: var(--normal); background-color: black; }
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); }

/* Heading Top Navigation */
.top-nav { position: fixed; z-index: 990; top: 0; left: 0; display: flex; justify-content: space-between; width: 100%; width: 100%; height: var(--top-nav); transition: all .25s linear; background-color: black; }
.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 .top-row { display: flex; align-items: center; justify-content: flex-end; padding-right: 2rem; }
.top-nav-menu { line-height: 1.5rem; z-index: 8; padding-right: .75rem; }
.top-nav-logo { z-index: 9; display: flex; align-items: center; flex-shrink: 0; height: 100%; max-height: 100%; margin-right: 2.85rem; margin-left: 2.75rem; }
.top-nav-logo h2 { display: block; width: 100%; text-align: center; max-width: 6.5rem; height: 100%; transition: height .25s linear; }
.top-nav-logo h2 a { display: block; height: var(--top-nav); padding-top: 1.1rem; padding-bottom: .5rem; transition: none; height: 100%; }
.top-nav-logo h2 a img { width: auto; height: 100%; margin-left: auto; margin-right: auto; }
.top-nav-logo img, .top-nav-logo svg { height: 100%; transition: all .25s; }
.top-nav-menu dt { z-index: 11; text-align: center; }
.top-nav-menu dt a { font-size: .8rem; line-height: var(--top-nav); position: relative; z-index: 3; display: block; display: flex; align-items: center; height: 100%; padding-right: 1.3rem; padding-left: 1.3rem; white-space: nowrap; color: var(--link); }
.top-nav-menu dt a > em { line-height: var(--top-nav); }
.top-nav-menu dt a > em:after { border-width: 1px; }
.top-nav-menu dl.active dt a, .top-nav-menu dt a:hover { color: var(--link); }
.top-nav-menu dl.active dt a:after, .top-nav-menu dt a:hover:after { opacity: 1; }
.desktop .top-nav-menu dl:hover .top-sub-menu, .desktop .top-nav-menu dl:hover:after { pointer-events: initial; opacity: 1; }
.top-nav-menu dl.active dt a { color: white; }
.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; left: 0; width: 100%; transition: all .25s linear; pointer-events: none; opacity: 0;  /*transform: translateY(-100%); */ }
.top-sub-menu:before { position: absolute; z-index: 0; top: unset; left: -10000px; width: 50000px; height: 100%; content: ""; background-color: rgba(0, 0, 0, .6); }
.top-sub-menu a { font-size: .8rem; display: block; padding-right: 1.3rem; padding-left: 1.3rem; white-space: nowrap; }
.top-sub-menu a > em { line-height: 2.6rem; }
.top-sub-menu a:hover, .top-sub-menu a.active { color: var(--primary); }
.top-sub-nav { display: flex; align-items: center; flex-wrap: nowrap; height: 2.6rem; }
.tnm-con:before { position: absolute; z-index: 5; top: 0;  /*background-color: white; */ left: -10000px; width: 50000px; height: 100%; content: ""; }
/*.tsm-about, .tsm-media { right: 100%; left: initial; }*/
.tsm-about>ul, .tsm-media>ul { justify-content: center; }
.top-quick { z-index: 9; width: 12rem; }
.top-lang { font-size: .5rem; padding-left: 2rem; transform-origin: right center; }
.top-lang a { display: flex; align-items: center; color: rgb(100, 100, 100); }
.top-lang a i { display: inline-block; width: .75rem; height: 1px; transition: background .5s; background: rgb(100, 100, 100); }
.top-lang a:hover, .top-lang a.active, .top-search a:hover { color: white; }
.top-lang a:hover i, .top-lang a.active i, .top-search a:hover i { background-color: white; }
.top-nav-menu .visible-inline-xs { display: none; }
.top-toggle-nav { display: none; }
.top-search { display: flex; align-items: center; justify-content: flex-start; width: 1.6rem; transition: all .5s; }
.top-search input[type="text"] { font-size: .65rem; line-height: 1rem; width: 100%; width: 0; height: 1.6rem; padding: .25rem 3rem .25rem 1rem;  /*transition: all .5s; */ opacity: 0; color: var(--link); border: 0; border-radius: 1rem; background-color: rgb(17, 17, 17); }
.top-search button { font-size: 1.05rem; position: absolute; z-index: 2; top: 0; right: .5rem; display: flex; align-items: center; height: 1.6rem; color: var(--link); border: 0; background-color: transparent; }
.top-search:hover { width: 10rem; }
.top-search:hover input { width: 100%; opacity: 1; }
.tbtn-shop { font-size: 1.1rem; }
.top-social { padding-left: 3rem; }
.top-social a { font-size: .8rem; line-height: 1; display: flex; align-items: center; justify-content: center; width: 1.3rem; height: 1.3rem; margin-right: .5rem; margin-left: .5rem; color: white; border-radius: 100%; background-color: var(--mute); }
.top-social a:last-child { margin-right: 0; }
.top-social a:hover { background-color: var(--primary); }
.social-image > span { position: absolute; top: 200%; left: 50%; display: block; overflow: hidden; width: 7rem; padding: .5rem; transition: all .25s; transform: translate3d(-50%, 0%, 0); pointer-events: none; opacity: 0; border-radius: 6px; background: white; box-shadow: 0 0 15px rgba(0, 0, 0, .15); }
.social-image:hover > span { top: 150%; opacity: 1; }
.desktop.transparent .top-social a { color: var(--mute); background: white; }
.desktop.transparent .top-quick { color: white; }
.desktop.transparent .fixed-tn .top-social a { color: white; background: var(--mute); }
.desktop.transparent .fixed-tn .top-quick { color: var(--link); }
.desktop.transparent body:not(.fixed-tn) .top-nav { background-color: transparent; box-shadow: none; }
.desktop.transparent body:not(.fixed-tn) .top-nav-menu dt a { color: var(--white); }
.desktop.transparent body:not(.fixed-tn) .top-nav-logo svg g { fill: var(--white); }
.desktop.transparent body:not(.fixed-tn) .top-search button { color: var(--white); }
.desktop .hide-top-nav .top-nav { transform: translateY(-101%); }
.home .top-nav { transform: translateY(-110%); pointer-events: none; }
.home .fixed-tn .top-nav { transform: none; pointer-events: unset; }

/* Button */
.b-border { display: flex; align-items: center; justify-content: center; max-width: 4.9rem; height: 2rem; color: var(--primary); border: 1px solid var(--primary); background-color: transparent; }
.b-border:hover { color: white; background-color: black; }
.b-bc { display: flex; align-items: center; justify-content: center; max-width: 4.9rem; height: 2rem; color: white; border: 1px solid var(--primary); background-color: var(--primary); }
.b-bc:hover { color: var(--primary); background-color: transparent; }
.b-sm { max-width: 4.2rem; height: 1.7rem; padding-top: .2em; }

/* Grid */
.grid { display: flex; flex-wrap: wrap; list-style: none; }
.grid [class*="width-"] { flex-shrink: 0; max-width: 100%; }
.width-1-8 { width: 12.5%; }
.width-2-8, .width-1-4 { width: 25%; }
.width-1-5 { width: 20%; }
.width-3-8 { width: 37.5%; }
.width-4-8, .width-1-2 { width: 50%; }
.width-5-8 { width: 62.5%; }
.width-6-8, .width-3-4 { width: 75%; }
.width-7-8 { width: 87.5%; }
.width-1-3 { width: 33.3333%; }
.width-2-3 { width: 66.6666%; }
.width-1-6 { width: 16.6666%; }
.width-1-7 { width: 14.285%; }
.width-1-10 { width: 10%; }
.width-auto { flex-grow: 1; }
.grid.spacing-10 > [class*="width-"] { padding-right: .5rem; padding-left: .5rem; }

/* Home */
.slides-list, .slides-list li, .bx-wrapper, .bx-viewport { position: relative; height: 100%; }
.slick-list, .slick-track { overflow: hidden; height: inherit; }
.slick-dots { font-size: 0; line-height: 1; z-index: 3; bottom: 2.25rem; left: 0; text-align: center; }
.slick-dots li { width: .2rem; height: .2rem; margin-right: .5rem; margin-left: .5rem; padding: 0; }
.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; position: absolute; width: 100%; height: 100%; transition: all .5s; opacity: .5; border-radius: .1rem; background-color: white; }
.slick-dots li.slick-active button:before { top: -.3rem; height: .5rem; opacity: 1; color: white; }
.dot-primary .slick-dots li button { background-color: white; }
.dot-primary .slick-dots li.slick-active button { background-color: rgb(30, 80, 164); }
.slick-prev, .slick-next { line-height: 4.5rem; z-index: 2; overflow: hidden; width: 4.5rem; height: 4.5rem; text-align: center; }
.slick-prev { left: -6rem; }
.slick-next { right: -6rem; }
.slick-prev:before, .slick-next:before { font-family: "cxany"; font-size: 2.8rem; transition: color .5s; vertical-align: middle; color: var(--primary); }
.slick-prev:before { content: "\c1021"; }
.slick-next:before { content: "\c1022"; }
.slick-dark-nav .slick-prev:before, .slick-dark-nav .slick-next:before { color: transparent; }
.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { color: var(--link); }
.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; }
@media screen and (min-width:1900px) {
  .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%); }
}
.desktop.home, .desktop.home body { overflow: hidden; }
.desktop .home .fixed-tn .hsec-banner > div { padding-top: var(--top-nav-sm); }
.banner-wrapper { height: 100vh; }
.home-banner { height: 100vh; }
.home-slides .slick-dots { bottom: 3.5rem; }
.home-slides .slick-arrow { transition: all .5s; opacity: 0; color: white; background-color: transparent; }
.home-slides .slick-arrow:before { font-size: 1.4rem; }
.home-slides:hover .slick-arrow { opacity: 1; }
.home-slides .slick-prev { left: 6%; }
.home-slides .slick-next { right: 6%; }
.slides-info { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding-bottom: 2rem; }
.hsi-con { text-align: right; color: white; }
.hsi-con.primary { color: var(--primary); }
.hsi-con img { width: auto; max-height: 100%; }
.hsi-con h3 { font-family: "anul", var(--font-family); font-size: 3.5rem; }
.hsi-con h4 { font-size: 2.8rem; font-weight: 100; line-height: 1; display: flex; align-items: center; margin-top: 1rem; }
.hsi-con h4 em { font-size: 80%; }
a.cover-link { position: absolute; z-index: 9; top: 0; left: 0; display: block; width: 100%; height: 100%; }
.home-intro { width: 100%; height: 100vh; }
.home-intro > a { display: flex !important; color: white; }
.home-intro > a span { display: block; }

/*.hintro-con { display: inline-block; flex-direction: column; } */
.hintro-play { height: 3.2rem; margin-top: .75rem; text-align: center; background-size: 3.2rem 3.2rem; }
.hintro-txt { padding-left: .15em; text-align: center; letter-spacing: .15em; }
.hintro-video { width: 100%; height: 100%; }
.home-sec.cover-link { width: auto; height: auto; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.home-intro:after { content: ""; position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 3; background: rgba(0, 0, 0, .5); }


/*.hp-list, .home-tech, .home-cats, .home-smart, .home-os { height: calc(100vh - var(--top-nav)); } */
.hp-list, .home-tech, .home-cats, .home-smart, .home-os { height: 100vh; }
.ht-list li:before { position: absolute; z-index: 0; top: 0; left: 50%; width: 20vw; height: 100%; content: ""; transform: translateX(-50%); }
.ht-list li { cursor: pointer; }
.ht-list dl { z-index: 2; height: 14rem; }
.ht-list dt, .ht-list dd { transition: all .5s; }
.ht-list dt { font-size: 1.3rem; line-height: 4rem; height: 4rem; }
.ht-list dd { position: absolute; top: .5rem; left: 180%; transform: translateX(10%); white-space: nowrap; pointer-events: none; opacity: 0; }
.ht-list dd span { font-size: 1rem; line-height: 3rem; display: block; }
.ht-list li:last-child dl { height: 4rem; }
.ht-list li:not(:last-child) dl:before, .ht-list li:not(:last-child) dl:after { position: absolute; left: 50%; width: 1px; content: ""; transition: all .5s; background: white; }
.ht-list li dl:after { bottom: 0; height: calc(100% - 4rem); }
.ht-list li:not(:last-child) dl:before { z-index: 3; top: 4rem; height: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgb(255, 4, 2) 100%); }
.ht-list li.active dl:before { height: calc(100% - 4rem); }
.ht-list li.active dl:after { height: 0; }
.ht-list li:hover dt { transform: scale(1.3); }
.ht-list li:hover dd { transform: none; opacity: 1; }
.ht-bg { position: absolute; z-index: 1; bottom: 0; left: 0; width: 100%; height: 100%; }
.ht-bg li { position: absolute; z-index: 1; display: block; width: 100%; height: 100%; transition: opacity .5s; opacity: 0; }
.ht-bg li.active { z-index: 9; opacity: 1; }
.home-cats > ul { height: 100%; }
.hc-bg { position: absolute; z-index: 0; top: 0; left: 0; width: 100%; height: 100%; background: black; }
.hc-bg li { position: absolute; z-index: 1; width: 100%; height: 100%; transition: opacity 1s; opacity: 0; }
.hc-bg li.active { z-index: 5; opacity: 1; }
.hc-list { height: 100%; }
.hc-list li { flex-shrink: 0; width: calc(12.5% + 1px); height: 100%; margin-left: -1px; transition: all .5s; border-right: 1px solid var(--dark); border-left: 1px solid var(--dark); }
.hc-list dl { overflow: hidden; width: 100%; height: 100%; }
.hc-list dt { z-index: 2; top: 10rem; text-align: center; }
.hc-list dd { position: absolute; z-index: 0; top: -10%; left: 0; width: 100%; height: 120%; transition: all .5s; }
.hcl-icon { display: inline-block; width: 4rem; height: 4rem; margin-bottom: 2rem; }
.desktop .hc-list:hover li:nth-child(odd) dd { transform: translateY(-5%); opacity: 0; }
.desktop .hc-list:hover li:nth-child(even) dd { transform: translateY(5%); opacity: 0; }
.hc-list li .hcl-icon svg path { transition: all .5s; fill: var(--link); }
.hc-list li:hover { z-index: 9; border-color: var(--link); }
.hc-list li:hover .hcl-icon svg path { fill: var(--primary); }
.hs-tab-panel, .hser-tab-panel { position: absolute; z-index: 0; top: 0; left: 0; width: 100%; height: 100%; }
.hstp-item { height: 100vh; padding-top: 15rem; }
.hser-item { padding-top: 0; }
.hs-tab-con { top: 12rem; justify-content: center; }
.hs-tab { line-height: 1; width: 40%; }
.hs-tab:after { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; content: ""; background-color: var(--link); }
.hs-tab a { z-index: 2; }
.hs-tab a > em { line-height: 3rem; vertical-align: top; }
.hs-tab a.active, .hs-tab a:hover { color: white; }
.hs-tab a.active > em:after { left: 0; width: 100%; transition: width .5s; }
.home-customer { background: rgb(11, 11, 11); }
.hcus-con > div { overflow: hidden; width: 100%; }
.hcus-gal { overflow: hidden; justify-content: space-between; max-width:100%; width: 42rem; height: 100%; }
.hcus-gal > div { max-width:100%; width: 13rem; }
.hcus-gal > div img, .hcus-gal > div > a { overflow: hidden; margin-bottom: 2rem; border-radius: .8rem; }
.hcus-gal .exph-list:before, .hcus-mobile .exph-list:before { opacity: 0; transition: opacity .5s; }
.hcus-gal .exph-list:hover:before, .hcus-mobile .exph-list:hover:before { opacity: 1; }
.hcus-gal .exph-list:hover .exph-con { background-size: cover; }

.hcus-info { position: absolute; z-index: 9; top: 0; left: 0; width: 100%; height: 100vh; transition: opacity .25s; pointer-events: none; opacity: 0; }
.hcgal-con { justify-content: flex-end; }
.fp-viewing-5 .hcus-info { transition-delay: .5s; opacity: 1; }
.sticky-opened .sticky { position: fixed; }
.hcus-info:before, .hcus-info:after { position: absolute; z-index: 5; left: 0; width: 100%; height: 12rem; content: ""; }
.hcus-info:before { top: var(--top-nav); background: linear-gradient(to bottom, rgba(11, 11, 11, 1) 0%, rgba(11, 11, 11, 0) 100%); }
.hcus-info:after { bottom: 0; background: linear-gradient(to top, rgba(11, 11, 11, 1) 0%, rgba(11, 11, 11, 0) 100%); }
.home-services { display: flex; align-items: flex-end; height: 100vh; }
.hser-tab-con { bottom: 0; width: 100%; }
.hser-tab a { line-height: 7rem; width: 25%; text-align: center; }
.hser-tab a.active { color: var(--primary); background-color: rgba(255, 255, 255, .1); }
.home-partner { padding-top: 5rem; padding-bottom: 8rem; }
.hpar-con { width: 100%; max-width: 56rem; height: 17.5rem; margin: auto; }
.hpar-con:after { position: absolute; z-index: 5; left: 0; width: 100%; height: 10rem; content: ""; }
.hpar-con:after { bottom: 0; background: linear-gradient(to top, rgba(11, 11, 11, 1) 0%, rgba(11, 11, 11, 0) 100%); }
.home-adv { background-color: white; }
.home-adv > div { padding-right: 2.5rem; padding-left: 2.5rem; }
.hadv-list>li:not(:last-child) { border-right: 1px solid var(--dark); }
.hadv-list h4 { margin-top: 1.25rem; margin-bottom: 1.25rem; }
.home-join { padding-top: 7rem; padding-bottom: 4.5rem; }
.hjoin-item { flex-shrink: 0; max-width:100%; width: 26.5rem; }
.home-join .spacer { width: 1px; height: 100%; background: var(--dark); }
h4.title { padding-top: 4.5rem; padding-bottom: 4.5rem; }
h3.title { font-size: 2rem; line-height: 1.1; }
h3.title.left-line { padding-left: 2rem; }
h3.title.left-line:before { position: absolute; top: 0; left: 0; width: .2rem; height: 100%; content: ""; background-color: var(--primary); }
h3.title-sm { font-size: 1.2rem; }
h3.title-sm.left-line:before { position: absolute; top: 0; left: 0; width: .15rem; height: 100%; content: ""; background-color: var(--primary); }
h3.title-sm.left-line { padding-left: 1.25rem; }
.hcom-overview { line-height: 2.3; max-width: 33rem; padding-top: 1.75rem; padding-bottom: 3.25rem; text-align: justify; }
.pt-lg { padding-top: 9.5rem; }
.pb-lg { padding-bottom: 9.5rem; }
.pt-md { padding-top: 7.5rem; }
.pb-md { padding-bottom: 7.5rem; }
.pt-sm { padding-top: 5rem; }
.pb-sm { padding-bottom: 5rem; }
.pt-xs { padding-top: 2.5rem; }
.pb-xs { padding-bottom: 2.5rem; }
.mt-lg { margin-top: 9.5rem; }
.mb-lg { margin-bottom: 9.5rem; }
.mt-md { margin-top: 7.5rem; }
.mb-md { margin-bottom: 7.5rem; }
.mt-sm { margin-top: 5rem; }
.mb-sm { margin-bottom: 5rem; }
.mt-xs { margin-top: 2.5rem; }
.mb-xs { margin-bottom: 2.5rem; }

/* home ah*/
.hah-img { flex-shrink: 0; width: 57.5%; }
.hah-img .bgs-cover { padding-top: 68%; }
.hah-txt { padding-top: 5%; }
.hah-txt .overview { line-height: 2; max-width: 23rem; margin-top: 3.5rem; margin-bottom: 3.5rem; text-align: justify; }
.hah-txt .overview p { height: 1rem; }

/* home about */
.hab-heading { text-align: center; }
.hab-heading img { width: auto; max-height: 8.5rem; }
.hab-con { line-height: 2; max-width: 45.5rem; padding-top: 3.5rem; letter-spacing: .12em; }
.hab-con p { margin-bottom: 1rem; }

/* home news */
.hnews-top { flex-shrink: 0; width: 50%; }
.hnews-top > div { padding: 2.5rem 3.5rem; background-color: white; }
.hnews-top > div > span { display: block; }
.hnews-top .subject { line-height: 1.2; padding-top: .5rem; }
.hnews-top .overview { margin-top: 1rem; margin-bottom: 1.25rem; }
.hnews-top .img { margin-bottom: 1.5rem; padding-top: 42%; }
.hnews-list { flex-shrink: 0; width: 40.5%; }
.hnews-list li a { padding-top: 2.5rem; padding-right: 25%; color: rgb(113, 113, 113); border-top: 1px solid var(--mute); }
.hnews-list .date { font-size: .9rem; font-weight: 300; line-height: 1.8rem; position: absolute; right: 0; transition: font-size .25s; transform-origin: right center; }
.hnews-list .subject { line-height: 1.8rem; }
.hnews-list .overview { margin-top: .75rem; margin-bottom: 2.25rem; }
.hnews-list li:last-child .overview { margin-bottom: 0; }
.hnews-list li a:hover { color: black; border-top-color: var(--primary); }
.hnews-list li a:hover .date { font-size: 1.3rem; }
.hnews-top h4, .hnews-tab { height: 3rem; margin-bottom: 1.75rem; }
.hnews-tab a { margin-left: 2.5rem; }
.hnews-tab a:after { font-family: "cxany"; font-size: 1rem; line-height: 1; position: absolute; top: 110%; left: 50%; content: "\c1033"; transition: opacity .25s; transform: translateX(-50%); opacity: 0; color: var(--primary); }
.hnews-tab a.active { color: var(--primary); }
.hnews-tab a.active:after { opacity: 1; }

/* bottom line animate */
a > em { line-height: 1; display: inline-block; overflow: hidden; }
a > em:after { position: absolute; bottom: 0; left: 100%; display: block; width: 0; height: 1px; content: ""; transition: all .25s; background: var(--primary);  /*background: linear-gradient(to right, rgba(255, 4, 2, 0) 0%, rgb(255, 4, 2) 100%); */ }
a:hover > em:after { left: 0; width: 100%; transition: width .5s; }

/* common footer */
.main-footer { padding-top: 4rem; }
.footer-nav-menu { padding-top: 2rem; padding-bottom: 5rem; }
.fnm-item { padding-left: 1rem; padding-right: 1rem }
.fnm-item a { display: flex; align-items: center; height: 1.6rem; }
.fnm-item dt { line-height: 1.6; margin-bottom: .5rem; font-size: .75rem; }
.fnm-item dt a { color: white;justify-content: center; }
.fnm-item dt a:hover { color: var(--primary); }
.fnm-item a > em { line-height: 1.5; }
.footer-copyright { background: black; }
.footer-copyright, .footer-copyright a { color: rgb(142, 142, 142); }
.footer-copyright a:hover { color: white; }
.fcopy-con { padding-top: 1rem; padding-bottom: 1rem; color: var(--mute); }
.mf-img { width: 100%; max-width: 46rem; margin-bottom: 6.5rem; }
.desktop body { overflow-y: scroll; }
.mf-search { max-width:100%; width: 13rem; height: 1.5rem; }
.mf-search button { position: absolute; right: 0; top: 0; font-size: .8rem; width: 2rem; height: 100%; display: flex; align-items: center; justify-content: center; z-index: 2; color: white; }
.mf-search input[type="text"] { border: 0; line-height: .7rem; padding: .4rem 2rem .4rem .6rem; background-color: var(--dark); color: white; height: 100%; }
.mf-beian { display: inline-block; margin-left: .75rem; }
.fnm-social dd a { font-size: 1rem; margin-left: .25rem; margin-right: .25rem; }

/* sub banner*/
.sub-body body { padding-top: var(--top-nav); }
.sban-con { height: 30rem; }
.sban-info h3 { font-weight: 200; text-align: center; }
.sban-info h4 { margin-top: 1.5rem; text-align: center; }
.sub-nav { height: var(--top-nav-sm); }
.sub-nav .left-nav { z-index: 9; top: 0; left: 0; width: 100%; height: var(--top-nav-sm); background-color: rgba(255, 255, 255, .7); }
.sub-nav .left-nav > ul, .sub-nav .left-nav li, .sub-nav .left-nav li > a { height: 100%; }
.sub-nav .left-nav a { display: flex; align-items: center; margin-right: 1.3rem; margin-left: 1.3rem; color: var(--secondary); }
.sub-nav .left-nav a:hover, .sub-nav .left-nav a.active { font-weight: bold; color: var(--primary); }

/*.sub-nav .left-nav a.active { color: var(--primary); font-weight: bold; } */
.sub-nav .leftsec { font-weight: bold; }
.sub-nav .leftsec > i { margin-left: 1rem; }

/* products */
.prodi-back > img { width: 100%; }
.prodi-text { position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%; text-align: center; }
.prodi-text > img { width: auto; height: 100%; }
.prodet-download { line-height: 2.5; padding-top: 5.5rem; padding-bottom: 5.5rem; background-color: rgb(17, 17, 17); }
.prodet-download a { display: block; max-width: 16rem; padding: 0 3rem; color: white; }
.prodet-download a:hover { color: var(--primary); }
.prodet-download a > span { flex-direction: column; }
.prodet-download a > span { flex-direction: column; }
.prodet-download a > span i { margin-bottom: .25rem; }
.prodet-download a > span em { font-size: .6rem; line-height: 1; width: 5.5rem; height: 1.1rem; margin: auto; transition: border .5s; border: 1px solid white; border-radius: .55rem; }
.prodet-download a:hover > span em { border-color: var(--primary); }
.pro-cats { background-color: white; }
.procat-list { height: 7.4rem; }
.procat-list a { color: black; }
.procl-icon { width: 2.5rem; height: 2.5rem; margin: auto; }
.procl-icon img { position: absolute; top: 0; left: 0; width: auto; height: 100%; transition: opacity .5s; }
.pcic-active { opacity: 0; }
.procat-list a strong { display: inline-block; margin-top: .5rem; }
.procat-list a:hover, .procat-list a.active { color: var(--primary); }
.procat-list a:hover .pcic-active, .procat-list a.active .pcic-active { opacity: 1; }
.procat-list a:hover .pcic-front, .procat-list a.active .pcic-front { opacity: 0; }
.procat-con { padding-top: 4rem; padding-bottom: 6rem; background-color: var(--light); }
.procat-heading { padding-bottom: 1.5rem; }
.procat-heading h3 { line-height: 1.9; }
.procat-heading h4 { padding-top: 2.5rem; line-height: 1.8; }
.pro-list li { margin-bottom: 1rem; }
.pro-list .col-sm-12 .ratio-1-1 { padding-top: 35%; }
.pro-list a { transition: none; }
.pro-list a:hover { color: inherit; }
.pro-list a .subject { font-size: 1.3rem; line-height: 1.8; }
.pro-list li .inner { display: flex !important; align-items: center; flex-direction: column; padding: 2rem 3.5rem 3rem 3.5rem; }
.pro-list li .inner span { transition: all .5s; color: black; }
.pro-list li a:hover .inner span { color: inherit; }
.pro-list li .pl-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.desktop .pro-list li:nth-child(1), .desktop .pro-list li:nth-child(4) { width: 100% }
.desktop .pro-list li:nth-child(1) .ratio-1-1, .desktop .pro-list li:nth-child(4) .ratio-1-1 { padding-top: 35%; }
.desktop .pro-list li:nth-child(1) .inner, .desktop .pro-list li:nth-child(4) .inner { align-items: flex-start; justify-content: flex-end; padding: 2rem 4rem 2rem 4rem; }
.pro-list li:nth-child(1) .inner span, .pro-list li:nth-child(4) .inner span, .pro-list li.white .inner span { color: var(--light); }
.desktop .pro-list li:nth-child(1) .sub, .desktop .pro-list li:nth-child(4) .sub { margin-top: .75rem; margin-bottom: 3.25rem; }
.prodi-info { padding-top: 6rem; padding-bottom: 8rem; background-color: white; }
.prodi-info dl p { margin-bottom: 1.5rem; }
.prodi-info dl dt { margin-bottom: 2rem; }
.prodi-info dl dd { font-size: .8rem; line-height: 2; color: var(--secondary) }
.ser-brand .frame-narrow { margin-left: 0; }

/* advantage */
.sub-fh { height: calc(100vh - var(--top-nav)); }


/* solutions */
.solcat-heading { padding-top: 5.5rem; padding-bottom: 6.5rem; }
.solcat-heading h3 { line-height: 2; }
.solcat-heading:after { position: absolute; z-index: 2; bottom: -2.5rem; left: 50%; width: 1px; height: 5rem; content: ""; background: var(--primary); }
.solcat-con { width: 100%; }
.solci-con { width: 100%; }
.solci-con li { width: 21.75%; margin-right: 1rem; margin-left: 1rem; }
.solci-con[data-c="10"] li { width: 16.5%; margin-right: .5rem; margin-left: .5rem; }
.solci-con[data-c="10"] li .ratio { padding-top: 115%; }
.solci-con li a { overflow: hidden; color: black; border-radius: 8px; }
.solci-txt { line-height: 1.6; display: flex !important; align-items: center; flex-direction: column; justify-content: center; height: 6.5rem; background-color: white; }
.solci-txt small { font-size: .9rem; }
.solci-txt strong { font-size: 1.2rem; font-weight: normal; display: block; }
.solci-con li a:hover { color: var(--primary); }
.procom.pro-cats { padding-top: 8rem; padding-bottom: 8rem; }
.procom-heading h3 { line-height: 1.5; padding-bottom: .75rem; }
.procom .procat-list { flex-wrap: wrap; width: 40rem; max-width: 100%; height: auto; margin-top: 3rem; }
.procom .procat-list li { width: 25%; padding-top: 1.25rem; padding-bottom: 1.25rem; }
.procom .procat-list a strong { margin-top: .15rem; }
.sol-details { padding-top: 4rem; padding-bottom: 4rem; }
.soldet-heading { padding-bottom: 3.5rem; }
.soldet-heading h3 { line-height: 1.5; padding-bottom: .75rem; }
.soldet-item { margin-bottom: 5rem; }
.soldet-item > div { padding-top: 1.5rem; }
.soldet-item p { line-height: 2; }
.prodown-list { width: 100%; }
.brand-img { padding-top: 6rem; padding-bottom: 2rem; }
.brand-img > div { margin-bottom: 4rem; }
.brand-faq .sqa-list { padding-top: 3rem; padding-bottom: 6rem; }

/* about brand */
.abint-info { padding-top: 4rem; padding-bottom: 4rem; }
.abint-info dt h3 { line-height: 1.3; letter-spacing: .2em; color: rgb(76, 76, 76); }
.abint-info dt h4 { line-height: 2; padding-top: .5rem; padding-bottom: .5rem; border-bottom: .35rem solid var(--primary); }
.abint-info dd { width: 24rem; max-width: 100%; }
.abint-info dd p { margin-bottom: 1rem; }
.abint-item p { line-height: 2; max-width: 32rem; text-align: justify; }
.abint-txt { padding-top: 5rem; padding-right: 1rem; padding-bottom: 6rem; padding-left: 9rem; }
.abint-txt dl { max-width: 37.5rem; padding-bottom: 4rem; }
.abint-txt dt { padding-right: .5rem; white-space: nowrap; }
.abint-txt dt, .abint-txt dd { line-height: 1.5; }
.abcon-heading h3 { padding-top: 3rem; padding-bottom: 1.75rem; }
.abcon-map { margin-top: 2.5rem; }
.abcon-info { padding-top: 4rem; }
.abcon-link { padding-top: 1rem; padding-bottom: 4rem; }
.abcon-link dl { flex-shrink: 1; }
.abcon-link dt ul { flex-wrap: wrap; }
.abcon-link dt li { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.abcon-link dt a { color: rgb(3, 73, 191); }
.abcon-link dt h5 { font-size: .9rem; line-height: 2; }
.abcon-link-pdf { padding: 0; background-color: transparent; }
.abcon-link-pdf.prodet-download a { padding: 0; color: black; }
.abcon-link-pdf.prodet-download a > span em { border-color: black; }
.abcon-address { padding-top: 4rem; padding-bottom: 2rem; }
.abcon-address li { padding-bottom: 2rem; }
.abcon-address h5 { font-size: .9rem; line-height: 2.5; }
.abjoin-heading { padding-top: 3rem; padding-bottom: 5rem; }
.abjoin-heading h3 { padding-bottom: 4rem; }
.abjoin-heading p { line-height: 2; }
.about-join-list { padding-top: 4rem; padding-bottom: 8rem; background-color: var(--light); }
.abjoin-left { flex-grow: 1; }
.abjoin-right { flex-shrink: 0; max-width:100%; width: 11rem; margin-left: .75rem; }
.abjoin-filter { margin-bottom: .75rem; padding: .75rem; }
.abjoin-filter input, .abjoin-filter select { line-height: 1; width: 100%; height: 1.5rem; padding: 0 .5rem; border: 1px solid var(--light); }
.abjoin-filter .row > div { margin-top: .25rem; margin-bottom: .25rem; }
.abjf-submit { position: absolute; top: 0; right: 0; height: 100%; padding: 0 1rem; color: white; background-color: black; }
.abjoin-list a { padding: 1rem 1rem 0 1rem; color: black; }
.abjoin-list a > span { padding-bottom: .5rem; border-bottom: 1px solid var(--silver); }
.abjoin-list a:hover { background-color: var(--silver); }
.abj-subject em { font-size: .6rem; line-height: 1; display: block; margin-right: .5rem; padding: .15rem; color: white; border-radius: 3px; background-color: var(--primary); }
.abjoin-list .abj-subject { margin-bottom: .25rem; }
.abjoinlist-con > span { line-height: 1.2; }
.abj-heading { padding: 0 .5rem; }
.abjoin-side { padding-top: .75rem; }
.abjoin-side .abj-subject { line-height: 1.5; align-items: flex-start; }
.abjoin-side ul a { padding-top: .75rem; padding-right: .5rem; padding-left: .5rem; color: var(--mute); }
.abjoin-side ul a:hover { background-color: var(--silver); }
.abjoin-side ul a > span { padding-bottom: .75rem; border-bottom: 1px dotted var(--silver); }
.abjdet-nav { line-height: 1.25; padding-top: 1.25rem; padding-bottom: 1.25rem; }
.abjdet-con { padding-top: 1rem; padding-bottom: 8rem; background-color: var(--silver); }
.abjd-info { padding: 2rem; }
.abjd-add { line-height: 2; padding: 0 1rem; color: white; background: black; }
.abjd-con dt strong { position: relative; z-index: 2; display: inline-block; padding-right: .5rem; background: white; }
.abjd-con dt:before { position: absolute; z-index: 1; top: 50%; left: 0; width: 100%; height: 0; content: ""; border-top: 1px dotted var(--link); }
.abjd-con dd strong { font-size: .7rem; line-height: 1.5; display: block; padding-top: .75rem; padding-bottom: .75rem; }

.desktop .abcon-map #map { height: 22rem; }
#map img { max-width: initial; max-height: initial; height: initial; vertical-align: initial; }
#map label { max-width: unset; }
#map .BMap_Marker { pointer-events: none; }
.abcm-addr { font-size: .9rem; margin-top: 1rem; line-height: 1; }



/* news */
.newsh-item { margin-bottom: 2.5rem; }
.newsh-txt { font-size: .6rem; padding-top: 1.15rem; padding-left: .75rem; padding-right: .75rem; }
.newsh-intro { color: var(--dark); max-height: 3rem; line-height: 1rem; height: 2.95rem; margin-bottom: .85rem; }
.newsh-info { display: flex!important; line-height: 1; font-size: .55rem; color: var(--dark) }
.newsh-date { }

.pager-list { align-items: center; justify-content: flex-end; }
.pager-list a { font-family: "Arial"; font-size: .8rem; line-height: 1.3rem; display: flex; align-items: center; justify-content: center; min-width: 1.6rem; height: 1.3rem; margin-right: 1px; margin-left: 1px; text-align: center; color: rgb(128, 128, 128); }
.pager-list a:hover, .pager-list a.active { color: var(--primary) }
.pager-list .pager-prev, .pager-list .pager-next { width: 1.6rem; height: 1.6rem; font-size: .8rem; padding: 0; display: flex; justify-content: center; align-items: center; background: black; color: white; border-radius: 100%; margin-right: .25rem; margin-left: .25rem; }

.newsd-heading h3 { line-height: 1.4; }
.newsd-heading .info { line-height: 1; padding-top: 1.5rem; }
.newsd-heading .info span { padding-right: 1rem; padding-left: 1rem; }
.newsd-heading .info span > i { margin-right: .25rem; }
.newsd-desc { line-height: 2; padding-top: 2.5rem; padding-bottom: 2.5rem; }
.newsd-desc p { font-family: var(--font-system); margin-bottom: 1em; }
.newsd-desc p.empty-line { line-height: 1.5; }
.newsd-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; color: white; border-radius: 100%; background-color: var(--mute); }
.newsd-share a:hover { background-color: var(--primary); }

.newsn-list>li { margin-bottom: 2rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--gray) }
.newsi-txt { position: absolute!important; color: white; width: 100%; left: 0; bottom: 0; background: linear-gradient(to bottom, rgba(0,0,0,.25) 0%, rgba(0,0,0,1) 100%); padding: .75rem 1rem; line-height: 1.65; }
.newsn-item, .newsn-info { display: flex!important; }
.newsn-img { width: 40%; flex-shrink: 0; }
.newsn-cats { margin-left: .5rem; }
.newsn-txt { flex-grow: 1; padding-left: 2rem; }
.bd_weixin_popup_foot { white-space: nowrap; }
.bd_weixin_popup { height: auto!important; }
.newsd-share a { background-image: unset; padding: 0!important; height: 1.5rem!important; width: 1.5rem!important; background-image: unset!important; font-size: 1rem!important; margin: 0 .5rem!important }
.newsd-share a>i { pointer-events: none; }
.bdsharebuttonbox { display: flex; align-items: center; }

/* contact */
.contact-article { padding-top: 2rem; }
.contact-list { padding-top: 2.5rem; }
.con-desc { line-height: 2.5; padding-top: 1.5rem; padding-bottom: 2rem; }
.contact-list:first-child .con-item { border-bottom: 1px solid var(--silver); }
.consec-feedback { margin-top: 2rem; padding-top: 2.5rem; padding-bottom: 5rem; background-color: var(--gray); }
.conf-item { line-height: 2rem; justify-content: flex-start; padding-top: 1rem; padding-bottom: 1rem; border-bottom: 1px dotted rgb(198, 198, 198); }
.conf-item:last-child, .conf-item.no-border { border-bottom: 0; }
.conf-item label { font-size: .8rem; flex-shrink: 0; width: 7.5rem; margin: 0; padding: 0; }
.conf-item > div.width-full { flex-grow: 1; }
.confi-text { height: 4.8rem; line-height: 1.8; }
.cfcc-con input[type="text"] { margin-bottom: .75rem; }
.btn-submit { width: 7rem; height: 2rem; }
.btn-reset { margin-left: 2.5rem; }
.group-auth { padding-top: 0; }
.cfc-box { margin-bottom: 1px; }
.cfcb-address h4 { margin-top: 1rem; }
.cfcb-address .tel { line-height: 1; padding-top: 1.25rem; padding-bottom: 1.5rem; }
.cfcb-address .tel > i { margin-right: .25rem; }
.cfcb-address .overview { line-height: 2.3; }
.confi-text-con { padding-top: 1rem; }
.cfc-work { padding-top: 1.75rem; padding-bottom: 1.75rem; }
.cfcwork-img { height: 6rem; }
.cfcb-time dt { padding-right: 1.5rem; }
.cfcb-time dd h4 { margin-bottom: .5rem; }
.cfcc-con label { line-height: 1; position: absolute; z-index: 2; top: 0; top: 1.05rem; left: 1rem; margin: 0; color: var(--mute); }
.cfcc-con input[type="text"], .cfcc-con textarea { padding-right: .5rem; padding-left: .5rem; border: 0; border-bottom: 1px solid var(--dark); background-color: transparent; }
.cfcc-con textarea { border: 1px solid var(--dark); }
.cfcc-desc { margin-top: 1.25rem; margin-bottom: 1.25rem; }
.cfcc-btn button { display: flex; justify-content: center; max-width: unset; margin-top: .75rem; padding-right: 2rem; padding-left: 2rem; text-align: center; color: var(--black); border-color: var(--dark); }
.cfcb-form { padding-bottom: 1.5rem; }
.ajl-item:not(:last-child) { padding-bottom: .5rem; }
.ajl-item h4 { padding: .75rem 0; cursor: pointer; transition: background-color .5s; background-color: white; }
.ajl-content { font-family: var(--font-system); line-height: 2.3; overflow: hidden; height: 0; margin-top: 1px; padding: 0; transition: all .5s; border-bottom: 1px solid var(--gray); background-color: white; }
.ajl-content > div { padding-bottom: .75rem; padding-left: .75rem; }
.ajl-item.active h4 .icon-plus:before { content: "\c1012"; }
.ajl-item .width-1 { width: 10%; }
.ajl-item .width-2 { flex-shrink: 0; width: 90%; padding-right: 10%; }
.ajl-content h5 { margin-bottom: 1.5rem; }
#map img { max-width: initial; height: initial; max-height: initial; vertical-align: initial; }
#map label { max-width: unset; }

/* about join */
.jadv-item { margin-bottom: 1rem; padding: 0 2rem 2rem 2rem; background-color: white; }
.jadv-item dt { overflow: hidden; width: 100%; height: 4.5rem; text-align: center; }
.jadv-item dt span { font-size: 2rem; line-height: 1.5; position: absolute; top: 0; left: 50%; display: flex; align-items: flex-end; justify-content: center; width: 4.4rem; height: 4.4rem; transform: translate(-50%, -38%); color: white; border-radius: 100%; background-color: var(--primary); }
.jadv-item dd > strong { line-height: 2.5; display: block; margin-bottom: .75rem; text-align: center; border-bottom: 1px solid var(--mute); }
.jadv-item dd > div { line-height: 2.2; }
.jcon-list { padding: 1.5rem 0; background-color: white; }
.jcon-list li { flex: 1; padding: 1.5rem 2rem; }
.jcon-list li:not(:last-child) { border-right: 1px solid var(--silver); }
.jcon-list li > strong { margin-bottom: 1rem; }
.jcon-list li > div { line-height: 2; margin-bottom: 1.5rem; }
.top-sub-nav > li { height: 100%; }
.top-sub-nav > li > a { display: flex; align-items: center; height: 100%; }
.top-sub-nav span { position: absolute !important; top: 100%; left: 1.3rem; max-width:100%; 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; }

/* join */
.joinc-heading { line-height: 1.2; padding-top: 5rem; padding-bottom: 4.5rem; }
.join-landing { padding-bottom: 5rem; }
.join-landing a .subject { font-size: .9rem; line-height: 1; padding: 1.5rem 1rem; text-align: center; }
.join-landing a:hover .subject { color: var(--primary); }
.join-sol .procom-heading { padding-top: 4rem; padding-bottom: 3rem; }
.join-procat.pro-cats.procom { padding-top: 6rem; }
.join-adv ul { max-width: 1300px; margin: auto; }
.join-adv li { background-color: rgb(247, 247, 247); }
.join-adv li a { color: black; }
.join-adv li:nth-child(odd) { background-color: rgb(234, 234, 234); }
.join-adv li .inner { padding: 3rem 1.8rem; }
.join-adv li .subject { margin-bottom: .5rem; }
.join-adv-fb { max-width: 1300px; padding-top: 3rem; padding-bottom: 6rem; }
.join-fb-add { max-width:100%; width: 10rem; }
.serlan-con { padding-top: 7.5rem; }
.serlan-procat.procom.pro-cats { padding-top: 5rem; padding-bottom: 5rem; }
.serlan-list { padding-bottom: 4rem; }
.serlan-list .procom-heading { padding-bottom: 3rem; }
.serlan-list .prodet-item { padding-top: 1.5rem; }
.nav-path { line-height: 1; padding-top: 1rem; padding-bottom: 1rem; padding-left: 3rem; color: var(--mute); }
.nav-path a { color: var(--mute); }
.nav-path em { display: block; padding-right: .5rem; padding-left: .5rem; }
.nav-path a.active { color: white; }
.bg-white .nav-path a.active { color: black; }
.nav-path a:hover { color: var(--primary); }
.ser-man-home { padding-bottom: 5rem; }
.serman-search { padding-top: 2rem; padding-bottom: 2rem; }
.serman-search .top-search { max-width:100%; width: 15rem !important; padding-bottom: 1.25rem; }
.serman-search .top-search input { width: 100%; padding: .25rem 3rem .25rem 1rem; opacity: 1; }
.search-tags { position: absolute; bottom: 0; left: 0; width: 100%; height: 1rem; padding-left: 1rem; }
.search-tags a { margin-right: .5rem; color: var(--mute); }
.serman-cats { padding-bottom: .5rem; }
.serman-cats a { line-height: 1.2rem; padding-right: .75rem; padding-left: .75rem; white-space: nowrap; color: white; border-radius: .6rem; background-color: transparent; }
.serman-cats a:hover, .serman-cats a.active { background: rgba(237, 237, 237, .1); }
.sermcl li { padding-top: .75rem; padding-bottom: .75rem; }
.sermcl-item { background-color: rgb(54, 54, 54); box-shadow: 0 0 15px 8px rgba(0, 0, 0, .3); }
.sermcl-item .ratio { background-position: center 25%; background-size: 45% auto; }
.sermcl-item .inner { flex-direction: column; padding-top: 80%; padding-bottom: 10%; transition: all .25s ease; }
.sermcl-item .inner a { display: flex; align-items: center; justify-content: center; width: 100%; height: 25%; color: white; }
.sermcl-item .inner a:hover { background-color: rgba(80, 80, 80, .8); }
.sermcl-link { opacity: 0; }
.sermcl-item:hover .inner { padding-top: 10%; background-color: rgba(54, 54, 54, .8); }
.sermcl-item:hover .sermcl-link { opacity: 1; }
.sernarrow { padding-right: 3rem; padding-left: 3rem; }
.sermd-info { padding-top: 5rem; padding-bottom: 4rem; }
.sermd-info > .flex-cb { padding-bottom: 4rem; }
.sermd-info h3 > strong { padding-bottom: .75rem; }
.sermd-down { max-width:100%; width: 14rem; height: 3.4rem; padding-right: 2.5rem; padding-left: 2.5rem; color: white; border-radius: 10px; background: black; box-shadow: 0 5px 20px rgba(0, 0, 0, .65); }
.sermd-con video { height: auto; vertical-align: top; margin-bottom: 2rem; padding-left: 3rem; padding-right: 3rem; }

/* search */
.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(--mute); border-color: var(--mute); }
.search-count { align-items: flex-end; justify-content: space-between; }

/* experience */
.expban-list { height: 32rem; }
.exp-home { padding-top: 4.5rem; padding-bottom: 6rem; }
.exph-con { overflow: hidden; }
.exph-filter { height: 2.6rem; margin-bottom: 2.5rem; padding: 0 5rem; border-radius: 1.3rem; background-color: var(--silver); }
.exph-filter span { margin-right: 3rem; color: black; }
.exph-filter a { margin-right: 1.25rem; }
.exph-filter a:hover, .exph-filter a.active { color: black; }
.exphom-list { margin-right: -.5rem; margin-left: -.5rem; }
.exph-item { overflow: hidden; width: 33.3333%; padding: .5rem; }
.exph-item .inner { background-size: 100% auto; }
.exph-item a { overflow: hidden; color: white; border-radius: 1.5rem; background-color: rgb(230,230,230) }
.exph-item a .ratio-1-2 { padding-top: 177%; }
.exph-item a .ratio-2-1 { padding-top: 64%; }
.exph-list:before { position: absolute; z-index: 9; top: 50%; left: 50%; width: 3.2rem; height: 3.2rem; margin-top: -1.6rem; margin-left: -1.6rem; content: ""; background: url("http://www.wingto.com/uploads/default/play.svg") no-repeat; background-size: contain; }
.exph-list:after { position: absolute; z-index: 5; bottom: 0; left: 0; width: 100%; height: 12rem; content: ""; pointer-events: none; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%); }
.exph-con { display: flex !important; align-items: flex-end; padding: 1.25rem 1.75rem; transition: background-size .5s; }
.exph-txt { z-index: 9; width: 100%; }
.exph-item a.exph-month { background-color: black; }
.exph-month .exph-con { align-items: flex-start; padding-top: 2.5rem; padding-left: 2.5rem; }
.exph-txt .overview { line-height: 1rem; height: 2.8rem; max-height: 3rem; margin-top: .5rem; margin-bottom: .25rem; text-align: justify; }
.exph-txt .date { text-align: right; }
.exph-list:hover .exph-con { background-size: 110% auto; }
.modal-gallery .fancybox-content { background: transparent; }
.modal-gallery .fancybox-bg { opacity: .95; background: black; }
.modal-gallery .fancybox-toolbar { z-index: -1; display: none; }
.is-frame .top-nav, .is-frame .main-footer { display: none !important; }
.is-frame, .is-frame body { width: 100%; max-width: 100%; margin: auto; padding: 0; }
.is-frame body { overflow: hidden; background: transparent; }
.desktop .fancybox-active { margin-right: 0; }
.desktop .fancybox-active .top-nav { margin-right: 15px; }
.expdet-con { overflow: hidden; max-width:100%; width: 22rem; border-radius: 1.5rem; }
.expdet-txt { position: absolute; bottom: 0; left: 0; width: 100%; padding: 1.25rem 1.5rem; }
.expdet-txt.exph-txt .overview { line-height: 1.2rem; height: 3.5rem; max-height: 3.6rem; }
.expdet-close { position: absolute; width: 100%; text-align: right; }
.expdet-pn { position: absolute; bottom: 0; left: calc(50% + 5rem); display: flex; overflow: visible; align-items: flex-end; flex-direction: column; transform: translateX(-50%); text-align: right; }
.expdet-pn a { font-size: 1.25rem; display: block; display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; margin: .5rem; color: var(--primary); border-radius: 100%; background: rgba(255, 255, 255, .06); }
.expdet-pn a:hover { background: rgba(255, 255, 255, .15); }
@media screen and (max-width:1900px) {
  .expdet-con { width: 22rem; }
}
@media screen and (max-width:1600px) {
  .expdet-con { width: 20rem; }
}
@media screen and (max-width:1280px) {
  .expdet-con { width: 19rem; }
}

/* Media */
.mch-home { padding-top: 4.5rem; padding-bottom: 5rem; }
.mch-nav { background: transparent; padding: 0; }
.mch-nav a { margin-left: 1.25rem; }
.exph-filter.mch-nav a:hover, .exph-filter.mch-nav a.active { color: var(--primary) }
.mcl-txt { padding-top: 1.5rem; padding-bottom: 1.5rem; padding-right: 20%; }
.mcl-subject { font-size: .8rem; line-height: 1.2rem; max-height: 2.4rem; height: 1.2rem; }
.exph-filter.mch-nav { height: auto; }

/* */
.fancy-box { border-radius: 10px; display: none; z-index: 2; background-color: white; }
.fancy-feedback { max-width: 26rem; padding: 2.5rem 3rem; }
.fancy-box .fancybox-close-small { width: 3.5rem; height: 3.5rem; }
.cmf-feedback input[type="text"] { border: 0; border-bottom: 1px solid var(--mute); padding: .5rem .25rem; font-size: .8rem; margin-bottom: .75rem; font-weight: normal; }
.cmf-feedback textarea { vertical-align: top; border: 1px solid var(--mute); border-radius: 8px; font-size: .8rem; margin-top: .75rem; margin-bottom: 1.25rem; line-height: 1.6; min-height: 5rem; padding: .75rem .25rem }
.cmf-submit { width: 100%; border: 1px solid var(--mute); background-color: var(--light); line-height: 2.8rem; text-align: center; height: auto; }

.home .quick-nav { right: 2rem; margin-top: -1rem; }
.join .fancy-feedback { display: block; }
.join-top-feedback { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2 }

@media screen and (max-width:1440px) {
  .fancy-feedback { max-width: 23rem; padding: 2rem 2.5rem; }
  .cmf-feedback input[type="text"], .cmf-feedback textarea { font-size: .7rem; } 
}
@media screen and (max-width:720px) {
  .quick-nav { right: var(--left-sm)!important; }
  .fancy-feedback { width: 100%; padding: 1.5rem 1.5rem; }
  .cmf-feedback input[type="text"], .cmf-feedback textarea { font-size: .7rem; }
}

/* Form */
input { outline: none !important; }
input[type="text"], textarea { font-family: "Arial"; font-size: .65rem; font-weight: 400; line-height: 2.8rem; z-index: 1; padding: 0 .8rem; transition: border .5s ease; border: 1px solid rgb(198, 198, 198); background-color: white; }
input[type="text"] { line-height: .9rem; padding-top: .9rem; padding-bottom: .9rem; }
input[type="text"].error, textarea.error, input[type="text"]:focus, textarea:focus { border-color: var(--primary); }
::-webkit-input-placeholder { color: rgb(157, 157, 157); }
:-moz-placeholder { color: rgb(157, 157, 157); }
::-moz-placeholder { color: rgb(157, 157, 157); }
:-ms-input-placeholder { color: rgb(157, 157, 157); }
.form-message { font-size: 0; line-height: 0; z-index: -9; display: none; visibility: hidden; height: 0; }
input[type="radio"], input[type="checkbox"] { display: inline-block; }
input[type="checkbox"], input[type="radio"] { position: relative; width: .65rem; height: .65rem; margin: 0; padding: 0; vertical-align: middle; border: 0; background: transparent; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
input[type="checkbox"]:before, input[type="radio"]:before { font-family: "cxany"; font-size: .75rem; line-height: .75rem; position: absolute; top: -.1rem; left: 0; display: block; overflow: hidden; width: 100%; height: 100%; content: ""; transition: all .5s; text-align: center; border: 1px solid rgb(128, 128, 128); }
input[type="checkbox"]:checked:before, input[type="radio"]:checked:before { content: ""; color: white; border: 0; background-color: rgb(30, 80, 164); }
input[type="checkbox"]:disabled:before, input[type="radio"]:disabled:before { color: rgb(103, 134, 157); background-color: rgb(235, 240, 242); }
input:focus::-webkit-input-placeholder { color: rgba(0, 0, 0, .35); }
input:focus:-moz-placeholder { color: rgba(0, 0, 0, .35); }
input:focus::-moz-placeholder { color: rgba(0, 0, 0, .35); }
input:focus:-ms-input-placeholder { color: rgba(0, 0, 0, .35); }
textarea:focus::-webkit-input-placeholder { color: rgba(0, 0, 0, .35); }
textarea:focus:-moz-placeholder { color: rgba(0, 0, 0, .35); }
textarea:focus::-moz-placeholder { color: rgba(0, 0, 0, .35); }
textarea:focus:-ms-input-placeholder { color: rgba(0, 0, 0, .35); }
::selection { color: white; background: var(--red); }
::selection { color: white; background: rgba(255, 87, 20, .8); }
ins[data-type="screen"] { display: none; content: "xs"; }
@media (min-width:768px) {
  ins[data-type="screen"] { content: "sm"; }
}
@media (min-width:992px) {
  ins[data-type="screen"] { content: "md"; }
}
@media (min-width:1200px) {
  ins[data-type="screen"] { content: "lg"; }
}
@media (min-width:1400px) {
  ins[data-type="screen"] { content: "lg xl"; }
}