@charset "UTF-8";
@keyframes drifting-harsh {
  0% {
    transform: translateY(-2%);
  }
  50% {
    transform: translateY(5%);
  }
  100% {
    transform: translateY(2%);
  }
}
@keyframes drifting-mild {
  0% {
    transform: translateY(-1%);
  }
  50% {
    transform: translateY(3%);
  }
  100% {
    transform: translateY(1%);
  }
}
@keyframes swipe-in-beam {
  0% {
    opacity: 0;
    mask-position: 65.5208vw 40.7813vw;
  }
  100% {
    opacity: 1;
    mask-position: 0 0;
  }
}
@keyframes swipe-in-wave {
  0% {
    opacity: 0;
    mask-position: 70.3125vw 45.9375vw;
  }
  100% {
    opacity: 1;
    mask-position: 0 0;
  }
}
@keyframes blur-in {
  100% {
    filter: opacity(1);
  }
}
@keyframes emit-high {
  0% {
    box-shadow: 0 0 0 0 rgba(149, 205, 237, 0.5);
  }
  100% {
    box-shadow: 0 0 0 9vw rgba(149, 205, 237, 0);
  }
}
@keyframes emit-mid {
  0% {
    box-shadow: 0 0 0 0 rgba(149, 205, 237, 0.45);
  }
  100% {
    box-shadow: 0 0 0 6vw rgba(149, 205, 237, 0);
  }
}
@keyframes emit-low {
  0% {
    box-shadow: 0 0 0 0 rgba(149, 205, 237, 0.4);
  }
  100% {
    box-shadow: 0 0 0 3vw rgba(149, 205, 237, 0);
  }
}
@keyframes blink {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes shine {
  0% {
    transform: translateX(-115%) skewX(-30deg);
  }
  100% {
    transform: translateX(300%) skewX(-30deg);
  }
}
:root {
  --root: 16px;
  --wh: #fff;
  --blue: #278cc8;
  --sky: #99d9ff;
  --text: #1d1d1d;
  --ink: #00218b;
  --tab: 162px;
  --cht-header: -113px;
  --menuitem: 113px;
  --abyss: #10152b;
  --lightBlue: #c1e5ff;
  --family: "Noto Sans TC", "微軟正黑體", "Microsoft Jhenghei", "SF Pro TC", "PingFang TC", Arial, sans-serif;
}

[pc] {
  display: block;
}

[mb] {
  display: none;
}

br[mb] {
  display: none;
}

.rwd, [rwd] {
  width: 100%;
}

[hidden] {
  display: none;
}

*, html {
  box-sizing: border-box;
}

body {
  background: var(--wh);
  font-family: var(--family);
  font-size: var(--root);
  font-weight: 400;
}

section#header {
  z-index: 800;
}

.uni {
  /* 【重設】 */
}
.uni a, .uni abbr, .uni acronym, .uni address, .uni applet, .uni article, .uni aside, .uni audio, .uni b, .uni big, .uni blockquote, .uni canvas, .uni caption, .uni center,
.uni cite, .uni code, .uni dd, .uni del, .uni details, .uni dfn, .uni dl, .uni dt, .uni em, .uni embed, .uni fieldset, .uni figcaption, .uni figure, .uni footer, .uni form,
.uni h1, .uni h2, .uni h3, .uni h4, .uni h5, .uni h6, .uni header, .uni hgroup, .uni i, .uni iframe, .uni img, .uni ins, .uni kbd, .uni label, .uni legend, .uni li, .uni main, .uni mark,
.uni menu, .uni nav, .uni object, .uni ol, .uni output, .uni p, .uni pre, .uni q, .uni ruby, .uni s, .uni samp, .uni section, .uni small, .uni span, .uni strike, .uni strong, .uni sub,
.uni summary, .uni sup, .uni table, .uni tbody, .uni td, .uni tfoot, .uni th, .uni thead, .uni time, .uni tr, .uni tt, .uni u, .uni ul, .uni var, .uni video, .uni body {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  line-height: 1;
}
.uni article, .uni aside, .uni details, .uni figcaption, .uni figure, .uni footer, .uni header, .uni hgroup, .uni main, .uni menu, .uni nav, .uni section {
  display: block;
}
.uni ol, .uni ul {
  list-style: none;
}

.content {
  background: var(--abyss);
}
.content .kv img[pc] {
  display: inline-block;
}
.content .kv img[mb] {
  display: none;
}
.content h2 {
  text-align: center;
  padding: 2.2vw 0;
}
.content h2 em {
  line-height: 1;
  font-size: 3.1vw;
  font-weight: 900;
  color: var(--wh);
  display: inline-block;
  border-bottom: 0.2vw solid var(--wh);
  padding-bottom: 0.6vw;
}
.content h3 {
  text-align: center;
  position: relative;
  z-index: 4;
  margin: 1.6vw auto 2.3vw;
}
.content h3::before, .content h3::after {
  position: absolute;
  z-index: 28;
  top: 50%;
  transform: translateY(-50%);
  content: "";
  width: 33.3vw;
  height: 0.6vw;
  background: url(../img/h3_tip.png) center/100% no-repeat;
}
.content h3::before {
  left: 0;
  background-position: left center;
}
.content h3::after {
  right: 0;
  background-position: right center;
}
.content h3 span {
  position: relative;
  z-index: 29;
  line-height: 1;
  font-size: 2vw;
  font-weight: 700;
  color: var(--ink);
  background: var(--wh);
  border-radius: 3.1vw;
  padding: 0.6vw 1.7vw;
  display: inline-block;
}
.content h3.partial {
  display: inline-block;
  padding: 0 4.3vw;
}
.content h3.partial::before, .content h3.partial::after {
  width: 10.4vw;
  background-image: url(../img/h3_tip-short.png);
}

.section-inner {
  position: relative;
  margin: 0 auto;
}

.aligner {
  font-family: var(--family);
  margin: 0 auto;
  max-width: 66.7vw;
}
.aligner article {
  font-family: var(--family);
  font-size: 1.7vw;
  font-weight: 400;
  line-height: 1.7;
  color: var(--wh);
  width: auto;
}
.aligner .solo {
  font-size: 1.3vw;
  font-weight: 500;
  color: var(--wh);
}
.aligner:has(h3.partial) {
  text-align: center;
}

.floater .section-inner {
  z-index: 500;
  width: 5.2vw;
  display: flex;
  flex-direction: column;
  gap: 1.4vw 0;
  position: fixed;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
}
.floater .section-inner .btn-oval {
  opacity: 0;
  transform: scale(0) rotate(-30deg);
  transition: opacity 0.3s ease-in, transform 0.2s ease-out;
  border-radius: 100%;
}
.floater .section-inner.action .btn-oval {
  opacity: 1;
  transform: scale(1) rotate(0);
  box-shadow: 0 0.05em 0.14em 0.08em rgba(255, 255, 255, 0.3);
}

.kv .section-inner {
  aspect-ratio: 1920/752;
  overflow: hidden;
}
.kv .sat {
  position: absolute;
  overflow: hidden;
}
.kv .sat img {
  position: relative;
  transform: rotate(0);
  transition: transform 400ms ease-in;
}
.kv .sat:hover {
  cursor: pointer;
}
.kv .sat:hover img {
  transform: rotate(-8deg);
}
.kv .sat::before {
  position: absolute;
  content: "";
  display: block;
  border-radius: 100%;
  background: rgba(255, 0, 0, 0);
}
.kv .kv-low {
  z-index: 211;
  top: 26vw;
  left: 73vw;
  padding: 2.1vw;
}
.kv .kv-low img {
  z-index: 210;
  width: 6.1vw;
}
.kv .kv-low.action {
  animation: drifting-harsh 3s infinite alternate;
}
.kv .kv-low::before {
  z-index: 209;
  width: 23.3333333333%;
  height: 33.3333333333%;
  top: 28%;
  left: 38%;
}
.kv .kv-low:hover::before {
  animation: emit-low 1s ease-out forwards, blink 5ms linear infinite;
}
.kv .kv-mid {
  z-index: 208;
  top: 20vw;
  left: 58vw;
  padding: 3.1vw;
}
.kv .kv-mid img {
  z-index: 207;
  width: 11.4vw;
}
.kv .kv-mid.action {
  animation: drifting-mild 4s infinite alternate;
}
.kv .kv-mid::before {
  z-index: 206;
  width: 25%;
  height: 20.33225%;
  top: 33%;
  left: 33%;
}
.kv .kv-mid:hover::before {
  animation: emit-mid 1s ease-out forwards, blink 5ms linear infinite;
}
.kv .kv-high {
  z-index: 205;
  top: 3.5vw;
  left: 59vw;
  padding: 2.1vw;
}
.kv .kv-high img {
  z-index: 204;
  width: 23.9vw;
}
.kv .kv-high.action {
  animation: drifting-mild 6s infinite alternate;
}
.kv .kv-high::before {
  z-index: 203;
  width: 28.0566666667%;
  height: 33.3333333333%;
  top: 27%;
  left: 28%;
}
.kv .kv-high:hover::before {
  animation: emit-high 1s ease-out forwards, blink 5ms linear infinite;
}
.kv .kv-title {
  position: absolute;
  z-index: 204;
  left: 0;
  top: 0;
  filter: opacity(0);
}
.kv .kv-title.action {
  animation: blur-in 1s ease-in forwards;
}
.kv .kv-title.left {
  width: 48vw;
  top: 0;
}
.kv .kv-title.right {
  z-index: 212;
  width: 13vw;
  left: unset;
  top: 4.1vw;
  right: 1.5vw;
}
.kv .kv-title-hem {
  position: relative;
  overflow: hidden;
}
.kv .kv-title-hem .shine-overlay {
  position: absolute;
  inset: 0;
  background: url(../img/kv_title-light.gif) center center/cover no-repeat;
  mask-image: url(../img/skv_title-left.png);
  mask-mode: match-source;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mix-blend-mode: plus-lighter;
  animation-fill-mode: both;
  opacity: 0.5;
}
.kv .kv-wave {
  position: absolute;
  z-index: 203;
  opacity: 0;
  top: 0;
  right: 0;
  width: 60vw;
}
.kv .kv-wave.action {
  animation: swipe-in-wave 800ms ease-out forwards;
  mask-image: linear-gradient(to top left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 10%, rgb(0, 0, 0) 100%);
  mask-repeat: no-repeat;
}
.kv .kv-beam {
  position: absolute;
  z-index: 202;
  opacity: 0;
  top: -0.5vw;
  right: 4.2vw;
  width: 55.9vw;
  transform: rotate(-8deg);
  transform-origin: right bottom;
}
.kv .kv-beam.action {
  animation: swipe-in-beam 1.5s ease-in forwards;
  mask-image: linear-gradient(to top left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 10%, rgb(0, 0, 0) 100%);
  mask-repeat: no-repeat;
}
.kv .kv-earth {
  aspect-ratio: 1920/647;
}

#top {
  position: relative;
  top: var(--cht-header);
}

.connector .section-inner {
  text-align: center;
  aspect-ratio: 1920/30;
}
.connector .glare {
  width: 64.8vw;
  margin: 0 auto;
  transform: translateY(-50%);
}

.main {
  background: #4a9eda url(../img/bg_main.jpg) center top/100% no-repeat;
}
.main.leo, .main.meo {
  background: #198cd4 url(../img/bg_leo.jpg) center top/100% no-repeat;
}

.features .section-inner {
  z-index: 15;
}

nav.menu {
  padding: 0.5vw 0 2.1vw;
}
nav.menu ul:not(.drop-links) {
  display: flex;
  justify-content: space-around;
  transform: translateX(0.5vw);
}
nav.menu li {
  position: relative;
}
nav.menu li a[role=menuitem] {
  z-index: 10;
  position: relative;
  display: block;
  text-align: center;
  width: 19.8vw;
}
nav.menu li a[role=menuitem] .txt {
  position: relative;
  z-index: 9;
  width: 7.4vw;
  display: inline-block;
  margin: 0 auto;
}
nav.menu li a[role=menuitem] .btnbox {
  position: absolute;
  z-index: 8;
  inset: 0;
  display: flex;
}
nav.menu li a[role=menuitem] .btnbox .btn-l, nav.menu li a[role=menuitem] .btnbox .btn-r {
  height: 3.6vw;
  border: none;
  outline: none;
}
nav.menu li a[role=menuitem] .btnbox .btn-l {
  width: 2.1vw;
  background: url(../img/menu_cta-left.png) left top/cover no-repeat;
  transform: translate(0.5px, 0);
}
nav.menu li a[role=menuitem] .btnbox .btn-r {
  background: url(../img/menu_cta-right.png) right top/cover no-repeat;
  flex: 1;
}
nav.menu li a[role=menuitem]::before {
  content: "";
  display: block;
  width: 4.3vw;
  height: 3.4vw;
  background: url(../img/menu_icon.png) center/cover no-repeat;
  position: absolute;
  z-index: 10;
  top: 0.3vw;
  left: -1vw;
}
nav.menu li .drop {
  z-index: 9;
  position: absolute;
  left: 1vw;
  right: 1vw;
  top: 2vw;
  text-align: center;
  background: var(--wh);
  padding: 0;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease, padding 0.2s ease;
}
nav.menu li .drop .drop-inner {
  background: var(--lightBlue);
  transition: padding 0.3s ease;
}
nav.menu li .drop .drop-cta {
  width: 10.5vw;
  display: inline-block;
  margin: 0 auto;
}
nav.menu li .drop .drop-cta.ensuing {
  margin-top: 1vw;
}
nav.menu li .drop .drop-links {
  display: block;
  max-height: unset;
  padding-top: 0.2vw;
  font-family: var(--family);
}
nav.menu li .drop .drop-links li a {
  font-size: 1.5vw;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text);
}
nav.menu li .drop .drop-links li a:hover {
  text-decoration: underline;
}
@media (hover: hover) and (pointer: fine) {
  nav.menu li:hover .drop {
    max-height: 31.3vw;
    padding: 0.2vw;
    box-shadow: 0.8vw 0.8vw 0.7vw 0.5vw rgba(0, 0, 86, 0.45);
  }
  nav.menu li:hover .drop .drop-inner {
    padding-top: 3.6vw;
    padding-bottom: 2.1vw;
    padding-left: 0.8vw;
    padding-right: 0.8vw;
  }
}
@media (hover: none) and (pointer: coarse) {
  nav.menu li.touched .drop {
    max-height: 31.3vw;
    padding: 0.2vw;
    box-shadow: 0.8vw 0.8vw 0.7vw 0.5vw rgba(0, 0, 86, 0.45);
  }
  nav.menu li.touched .drop .drop-inner {
    padding-top: 3.6vw;
    padding-bottom: 2.1vw;
    padding-left: 0.8vw;
    padding-right: 0.8vw;
  }
}

.intro .aligner article {
  padding: 2vw 0 4vw;
}

.video {
  background: url(../img/bg_video.png) center bottom/contain no-repeat;
}
.video .aligner {
  padding-bottom: 4vw;
}
.video .aligner .video-outer {
  padding-top: 6.2vw;
  padding-bottom: 5.2vw;
}
.video .aligner .video-outer .video iframe {
  width: 100%;
  aspect-ratio: 560/315;
}

.services {
  font-family: var(--family);
}
.services .section-inner {
  position: relative;
  background: #d9e0f5;
  overflow: hidden;
  padding-top: 2.9vw;
  padding-bottom: 6.3vw;
  padding-left: 2.9vw;
}
.services .section-inner .pict {
  z-index: 43;
  position: absolute;
  right: 0;
  bottom: -0.1vw;
}
.services .section-inner .pict img[pc] {
  width: 37.1vw;
}
.services .section-inner .pict img[mb] {
  display: none;
}

.s-tags {
  display: inline-flex;
  gap: 0 1.4vw;
  padding-left: 0.6vw !important;
}
.s-tags li {
  cursor: pointer;
}
.s-tags li span {
  display: inline-block;
  text-align: center;
  font-size: 1.9vw;
  font-weight: 800;
  line-height: 1.2;
  color: var(--wh);
  background: #7e7e7e;
  padding: 1.1vw 0;
  width: 12.5vw;
  border-radius: 7.8vw;
}
.s-tags li#t0.active span {
  background: #0f8bc1;
}
.s-tags li#t1.active span {
  background: #5bb202;
}
.s-tags li#t2.active span {
  background: #f29200;
}

.s-tabs blockquote {
  z-index: 44;
  position: relative;
  padding: 2.3vw 0 0;
  width: 100%;
  min-height: 30vh;
}
.s-tabs blockquote ul {
  display: flex;
  gap: 0 1vw;
}
.s-tabs blockquote ul li {
  width: 16.9vw;
  height: 18vw;
  border-radius: 2.6vw;
  box-shadow: 0.2em 0.05em 0.5em 0.2em rgba(0, 0, 0, 0.15);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  text-align: center;
  color: #333;
  padding-top: 7vw;
}
.s-tabs blockquote ul li strong {
  display: block;
  font-size: 1.7vw;
  font-weight: 800;
  line-height: 1.8;
}
.s-tabs blockquote ul li p {
  display: block;
  font-size: 1.1vw;
  font-weight: 500;
  padding: 0 1.3vw;
  line-height: 1.6;
  letter-spacing: 0.5px;
}
.s-tabs #b0 ul li[value="1"] {
  background-image: url(../img/card_ap1-2.png);
}
.s-tabs #b0 ul li[value="2"] {
  background-image: url(../img/card_ap1-1.png);
}
.s-tabs #b0 ul li[value="3"] {
  background-image: url(../img/card_ap1-3-v2.png);
}
.s-tabs #b0 ul li[value="4"] {
  background-image: url(../img/card_ap1-4.png);
}
.s-tabs #b1 ul li[value="1"] {
  background-image: url(../img/card_ap2-1.png);
}
.s-tabs #b1 ul li[value="2"] {
  background-image: url(../img/card_ap2-2.png);
}
.s-tabs #b1 ul li[value="3"] {
  background-image: url(../img/card_ap2-3.png);
}
.s-tabs #b1 ul li[value="4"] {
  background-image: url(../img/card_ap2-4-v2.png);
}
.s-tabs #b1 ul li[value="4"] p {
  letter-spacing: -0.5px;
}
.s-tabs #b2 ul li[value="1"] {
  background-image: url(../img/card_ap3-1.png);
}
.s-tabs #b2 ul li[value="2"] {
  background-image: url(../img/card_ap3-2.png);
}
.s-tabs #b2 ul li[value="3"] {
  background-image: url(../img/card_ap3-3.png);
}
.s-tabs #b2 ul li[value="3"] p {
  letter-spacing: 1.5px;
}
.s-tabs #b2 ul li[value="4"] {
  background-image: url(../img/card_ap3-4.png);
}

.category .section-inner {
  background: rgba(255, 255, 255, 0.85);
  padding-top: 3.1vw;
  padding-bottom: 3.6vw;
  padding-left: 2.2vw;
}
.category .section-inner .figure {
  position: absolute;
  top: 3.5vw;
  right: 3.1vw;
}
.category .section-inner .figure img {
  width: 46.4vw;
}
.category .bdgs {
  display: flex;
  gap: 0 1.3vw;
  padding-left: 0.3vw;
}
.category .bdgs li {
  display: inline-block;
  line-height: 1;
  cursor: pointer;
  font-size: 1.9vw;
  color: var(--wh);
  font-weight: 800;
  background: #464646;
  padding: 0.7vw 1.5vw;
  border-radius: 2em;
}
.category .bdgs li.active {
  background: #000092;
}
.category dl {
  color: #000;
}
.category dl dt {
  font-size: 2.1vw;
  font-weight: 900;
  line-height: 1;
  padding: 0.8em 0 0.8em 0.7em;
}
.category dl dd {
  box-shadow: 0.2em 0.05em 0.5em 0.2em rgba(0, 0, 0, 0.15);
  background: var(--wh);
  border-radius: 2.1vw;
  padding: 1.5vw 1.5vw 1.3vw;
  font-size: 1.6vw;
  font-weight: 500;
  line-height: 1.6;
  margin-right: 52vw;
  min-height: 11.3em;
}

.setup .section-inner::before {
  position: absolute;
  content: "";
  display: block;
  background: linear-gradient(360deg, rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0.7) 100%);
  height: 2vw;
  inset: 0;
  bottom: unset;
  mix-blend-mode: overlay;
}
.setup .section-inner h3.partial {
  margin-top: 5vw;
  margin-bottom: 3.5vw;
}

.contact .section-inner .aligner .solo {
  text-align: center;
  padding: 7vw 0 7vw;
}
.contact .section-inner .btn-contact {
  position: absolute;
  top: 2vw;
  right: 5vw;
  width: 10.4vw;
}
.contact + .connector .glare {
  position: absolute;
  inset: 0;
  transform: translateY(-55%);
}

.neon .section-inner h2 {
  padding: 0;
  margin: 4.4vw auto;
}
.neon .section-inner .aligner {
  position: relative;
  padding-bottom: 5vw;
}
.neon .section-inner .aligner article {
  text-align: center;
  position: absolute;
  width: 59vw;
  top: 3vw;
  left: 3.5vw;
}

/* 【寬度變化 MEDIA QUERIES】 */
@media screen and (max-width: 1920px) {
  :root {
    --size: 1;
  }
}
@media screen and (max-width: 750px) {
  :root {
    --cht-header: -113px;
  }
  [pc] {
    display: none;
  }
  [mb] {
    display: block !important;
  }
  br[mb] {
    display: block;
  }
  .content .kv img[pc] {
    display: none;
  }
  .content .kv img[mb] {
    display: inline-block;
  }
  .content h2 em {
    font-size: 8.7vw;
    border-bottom-width: 0.7vw;
  }
  .content h3::before, .content h3::after {
    width: 30.7vw;
    height: 1.6vw;
    background: url(../img/h3_tip-MB.png) center/cover no-repeat;
  }
  .content h3 span {
    font-size: 5.3vw;
    padding: 1.3vw 4.7vw 1.3vw;
    border-radius: 8vw;
  }
  .content h3.partial {
    padding: 0 10.9vw;
  }
  .content h3.partial::before, .content h3.partial::after {
    width: 22.9vw;
    height: 1.6vw;
    background: url(../img/h3_tip-MB.png) left center/cover no-repeat;
  }
  .content h3.partial::after {
    background-position: right center;
  }
  .aligner {
    max-width: unset;
    padding-left: 6vw;
    padding-right: 6vw;
  }
  .aligner article {
    font-size: 4vw;
    font-weight: 500;
  }
  .floater .section-inner {
    width: 13.3vw;
    right: unset;
    left: 84vw;
  }
  .kv .section-inner {
    aspect-ratio: 750/1076;
  }
  .kv .kv-low {
    left: 57.1vw;
    top: 102vw;
  }
  .kv .kv-low img {
    width: 12.7vw;
  }
  .kv .kv-low::before {
    width: 35%;
    height: 50%;
    left: 30%;
  }
  .kv .kv-mid {
    left: 31.5vw;
    top: 87vw;
  }
  .kv .kv-mid img {
    width: 24.7vw;
  }
  .kv .kv-mid::before {
    width: 33.3333333333%;
    height: 27.1096666667%;
  }
  .kv .kv-high {
    left: 24.3vw;
    top: 53vw;
  }
  .kv .kv-high img {
    width: 52.5vw;
  }
  .kv .kv-high::before {
    width: 42.085%;
    height: 50%;
  }
  .kv .kv-title {
    left: -3.6vw;
    top: -9.6vw;
  }
  .kv .kv-title.left {
    width: 80.8vw;
    top: -10vw;
    left: -4.3vw;
  }
  .kv .kv-title.right {
    width: 23.7vw;
    top: 58vw;
    left: 74.5vw;
    right: unset;
  }
  .kv .kv-wave {
    top: 56.5vw;
    right: 2.5vw;
    transform: rotate(9deg) scale(2.3) translate(0, -0.5vw);
  }
  .kv .kv-beam {
    top: 63vw;
    right: 4.3vw;
    width: 167.7vw;
    transform: rotate(0) scale(1.5);
  }
  .kv .kv-earth {
    aspect-ratio: 750/1076;
  }
  .connector .glare {
    width: 80vw;
  }
  .main {
    background-image: url(../img/bg_main-MB.jpg);
  }
  .main.leo, .main.meo {
    background-image: url(../img/bg_leo-MB.jpg);
  }
  .features .section-inner {
    padding-top: 1.5vw;
  }
  nav.menu li {
    max-width: 23.9vw;
  }
  nav.menu li a[role=menuitem] {
    width: 24vw;
  }
  nav.menu li a[role=menuitem] .txt {
    width: 16.7vw;
  }
  nav.menu li a[role=menuitem] .btnbox .btn-l, nav.menu li a[role=menuitem] .btnbox .btn-r {
    height: 8vw;
  }
  nav.menu li a[role=menuitem] .btnbox .btn-l {
    width: 3.7vw;
  }
  nav.menu li a[role=menuitem]::before {
    width: 9.3vw;
    height: 7.5vw;
    top: 0.8vw;
    left: -4.3vw;
  }
  nav.menu li .drop {
    top: 5vw;
    left: 0.5vw;
    right: 0.5vw;
  }
  nav.menu li .drop .drop-cta {
    width: 15.9vw;
  }
  nav.menu li .drop .drop-links li a {
    font-size: 1.9vw;
  }
}
@media screen and (max-width: 750px) and (hover: hover) and (pointer: fine) {
  nav.menu li:hover .drop {
    max-height: 80vw;
    padding: 0.3vw;
  }
  nav.menu li:hover .drop .drop-inner {
    padding-top: 4.7vw;
    padding-bottom: 2.7vw;
    padding-left: 1.6vw;
    padding-right: 1.6vw;
  }
}
@media screen and (max-width: 750px) and (hover: none) and (pointer: coarse) {
  nav.menu li.touched .drop {
    max-height: 80vw;
    padding: 0.3vw;
  }
  nav.menu li.touched .drop .drop-inner {
    padding-top: 4.7vw;
    padding-bottom: 2.7vw;
    padding-left: 1.6vw;
    padding-right: 1.6vw;
  }
}
@media screen and (max-width: 750px) {
  .paragraphs .aligner {
    padding-bottom: 2em;
  }
  .services .aligner {
    padding-bottom: 3vw;
  }
  .services .section-inner {
    padding-left: 6vw;
    padding-right: 6vw;
    padding-top: 6vw;
  }
  .services .section-inner .pict {
    position: relative;
    inset: unset;
    padding-top: 6.1vw;
  }
  .services .section-inner .pict img[mb] {
    width: 100%;
  }
  .s-tags {
    width: 100%;
    gap: 0 1.7vw;
    padding-left: unset !important;
  }
  .s-tags li span {
    font-size: 4vw;
    width: 27.7vw;
  }
  .s-tabs blockquote {
    min-height: unset;
    padding-top: 5vw;
  }
  .s-tabs blockquote ul {
    flex-direction: column;
    gap: 3.1vw 0;
  }
  .s-tabs blockquote ul li {
    position: relative;
    width: auto;
    border-radius: 3.1vw;
    background-color: var(--wh);
    background-position: -2.1vw -1.3vw;
    background-size: 33.793%;
    padding-top: 0;
  }
  .s-tabs blockquote ul li > div {
    display: flex;
    align-items: stretch;
    height: 100%;
  }
  .s-tabs blockquote ul li strong {
    font-size: 3.2vw;
    font-weight: 900;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    width: 24vw;
    padding-top: 11.5vw;
  }
  .s-tabs blockquote ul li p {
    font-size: 3.5vw;
    text-align: justify;
    font-weight: 500;
    padding: 0;
    padding-right: 1em;
    flex: 1;
    line-height: 1.4;
    display: grid;
    place-items: center;
  }
  .s-tabs #b1 ul li {
    background-position: 0.9vw 0.9vw;
    background-size: 26%;
  }
  .s-tabs #b1 ul li[value="3"] strong {
    font-size: 2.4vw;
    padding-top: 12.5vw;
  }
  .s-tabs #b2 ul li {
    background-position: -0.7vw -0.4vw;
    background-size: 30%;
  }
  .s-tabs #b2 ul li[value="2"] strong {
    font-size: 2.8vw;
    padding-top: 12vw;
  }
  .s-tabs #b2 ul li[value="3"] strong {
    font-size: 2.5vw;
    padding-top: 12vw;
  }
  .category .aligner {
    padding-top: 6vw;
    padding-bottom: 2vw;
  }
  .category .section-inner {
    padding-left: 6vw;
    padding-right: 6vw;
    padding-top: 5vw;
    padding-bottom: 6vw;
  }
  .category .section-inner .figure {
    position: static;
    padding-top: 6vw;
  }
  .category .section-inner .figure img {
    width: 100%;
  }
  .category .bdgs {
    padding-left: 0;
    width: 100%;
    gap: 0;
    justify-content: space-between;
  }
  .category .bdgs li {
    font-size: 3.9vw;
    padding: 1.2vw 3.1vw;
  }
  .category dl dt {
    font-size: 3.9vw;
    text-align: center;
    padding: 1em;
  }
  .category dl dd {
    border-radius: 4.4vw;
    font-size: 3.9vw;
    margin: unset;
    padding: 1em;
    text-align: justify;
    min-height: unset;
  }
  .setup .section-inner {
    padding-left: 3.6vw;
    padding-right: 3.6vw;
    padding-top: 5.3vw;
  }
  .setup .section-inner .aligner {
    padding-bottom: 2vw;
  }
  .contact .section-inner .aligner .solo {
    text-align: center;
    font-size: 2.9vw;
    padding-bottom: 9vw;
    line-height: 1.8;
  }
  .neon .section-inner .aligner article {
    width: 72vw;
    top: 8vw;
    left: 14vw;
    text-align: center;
  }
}
@media screen and (max-width: 749.98px) {
  :root {
    --size: 1;
  }
}
@media screen and (max-width: 375px) {
  :root {
    --size: 1;
  }
}