@charset "UTF-8";
/* 【變數】 */
:root {
  --root: 16px;
  --wh: #fff;
  --blue: #278cc8;
  --green: #24a535;
  --sky: #99d9ff;
  --text: #231815;
  --ink: #313131;
  --tab: 162px;
}

/* 【樣式】 */
[pc] {
  display: block;
}

[mb] {
  display: none;
}

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

[hidden] {
  display: none;
}

[class$=-inner] {
  position: relative;
  margin: 0 auto;
}

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

body {
  background: var(--wh);
  font-family: "Noto Sans TC", "微軟正黑體", "Microsoft Jhenghei", "SF Pro TC", "PingFang TC", Arial, sans-serif;
  font-size: var(--root);
  font-weight: 400;
}

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

.menu {
  background: var(--sky);
  text-align: center;
}
.menu ul {
  display: flex;
  justify-content: center;
  margin: 0 auto;
  padding: 1.9vw 2vw;
  gap: 0 2.3vw;
}
.menu li {
  background: var(--wh);
  border-radius: 1.4vw;
  box-shadow: 0 4px 4px 3px rgba(64, 64, 64, 0.6);
}
.menu li a {
  display: block;
  text-decoration: none;
  padding: 0.67em 2em;
  font-weight: 600;
  font-size: 1.6vw;
  color: var(--blue);
}
.menu li:hover, .menu li.active {
  background: #25a536;
}
.menu li:hover a, .menu li.active a {
  text-decoration: none;
  color: var(--wh);
}

.main {
  background: linear-gradient(180deg, #B4ECFC 0%, #D8F5E3 41.99%, #DBF3E5 100%);
}
.main [class$=-inner] {
  width: 85.9vw;
  text-align: center;
}
.main h2 {
  display: inline-flex;
  gap: 0 0.24em;
  align-items: center;
  color: #24a437;
  font-size: 3.5vw;
  font-weight: 700;
  margin: 0.5em auto;
}
.main h2::before {
  content: "";
  aspect-ratio: 42/68;
  width: 2.2vw;
  background: url(../images/icon_plug.svg) center/cover no-repeat;
}
.main p {
  text-align: left;
  font-size: 1.5vw;
  font-weight: 400;
  line-height: 1.8;
}
.main .fig {
  margin: 7.3vw auto 0;
}

.function .function-inner .swiper {
  content: "五大功能";
  position: absolute;
  top: 14vw;
  width: 96%;
  left: 2%;
}
.function .function-inner .swiper-slide {
  text-align: center;
}
.function .function-inner .swiper-wrapper {
  left: unset;
}
.function .function-inner .func img {
  width: 15.3vw;
  margin: 0 auto;
}
.function .function-inner .func figcaption {
  margin: 0 auto;
  padding: 0.5em 0 0;
  text-align: center;
  font-size: 1.5vw;
  line-height: 1.4;
}

.btn-stalker {
  position: fixed;
  z-index: 499;
  bottom: 7vw;
  right: 4vw;
}
.btn-stalker img {
  width: 7.2vw;
}

/* 【寬度變化 MEDIA QUERIES】 */
@media screen and (max-width: 1920px) {
  :root {
    --size: 1;
  }
}
@media screen and (max-width: 750px) {
  [pc] {
    display: none;
  }
  [mb] {
    display: block !important;
  }
  .content .kv img[pc] {
    display: none;
  }
  .menu ul {
    padding: 4vw 2.9vw;
    gap: 0 4vw;
  }
  .menu li {
    border-radius: 3.6vw;
    box-shadow: 0 4px 4px 3px rgba(64, 64, 64, 0.6);
  }
  .menu li a {
    padding: 0.6em 0;
    font-size: 4vw;
    min-width: 7.3em;
  }
  .main [class$=-inner] {
    width: 100%;
  }
  .main .swiper-button-next, .main .swiper-button-prev {
    width: 12.3vw;
    height: 12.3vw;
    top: 13vw;
    background: url(../images/btn_arr-prev.png) center/cover no-repeat;
  }
  .main .swiper-button-next::after, .main .swiper-button-prev::after {
    content: none;
  }
  .main .swiper-button-next.swiper-button-disabled, .main .swiper-button-prev.swiper-button-disabled {
    opacity: 0.3;
  }
  .main .swiper-button-prev {
    left: 3vw;
  }
  .main .swiper-button-next {
    background-image: url(../images/btn_arr-next.png);
    right: 3vw;
  }
  .main h2 {
    font-size: 9.1vw;
    margin: 0.47em auto;
  }
  .main h2::before {
    width: 5.6vw;
  }
  .main h2:has(br) {
    line-height: 1.2;
  }
  .main p {
    font-size: 3.7vw;
    text-align: justify;
    line-height: 1.6;
    max-width: 92.3vw;
    margin: 0 auto;
  }
  .main .para {
    width: 92.3vw;
    margin: 0 auto;
  }
  .main .mb-title {
    width: 92.3vw;
    margin: 0 auto;
  }
  .service .service-inner .swiper {
    content: "五大核心服務";
    margin-top: 5.6vw;
  }
  .service .service-inner .func img {
    width: 75.9vw;
    margin: 0 auto;
  }
  .one-stop .one-stop-inner .fig {
    width: 82vw;
  }
  .applicable .applicable-inner .swiper {
    content: "選擇智匯充整體解決方案的優勢";
    margin-top: 6.1vw;
  }
  .applicable .applicable-inner .swiper .swiper-button-next, .applicable .applicable-inner .swiper .swiper-button-prev {
    top: 39vw;
  }
  .applicable .applicable-inner .func img {
    width: 71.1vw;
    margin: 0 auto;
  }
  .platform .platform-inner .fig {
    width: 83.7vw;
    margin: 14.7vw auto 0;
  }
  .app .app-inner .fig {
    width: 76vw;
    margin: 8vw auto 0;
  }
  .function .function-inner .swiper {
    position: relative;
    top: unset;
    left: unset;
    width: 100%;
    margin: 7.1vw auto 0;
  }
  .function .function-inner .swiper .swiper-button-next, .function .function-inner .swiper .swiper-button-prev {
    top: 15.5vw;
  }
  .function .function-inner .swiper-wrapper {
    gap: 0;
    left: -21vw;
  }
  .function .function-inner .func img {
    width: 36.5vw;
  }
  .function .function-inner .func figcaption {
    font-size: 3.7vw;
  }
  .btn-stalker {
    bottom: 10vw;
    right: 10px;
  }
  .btn-stalker img {
    width: 14.8vw;
  }
}
@media screen and (max-width: 749.98px) {
  :root {
    --size: 1;
  }
}
@media screen and (max-width: 576px) {
  .btn-stalker {
    bottom: 17vw;
  }
}
@media screen and (max-width: 430px) {
  .btn-stalker {
    bottom: 21vw;
  }
}
@media screen and (max-width: 393px) {
  .btn-stalker {
    bottom: 23vw;
  }
}
@media screen and (max-width: 375px) {
  :root {
    --size: 1;
  }
}