@charset "UTF-8";
/*===== base =====*/
/*
*******************************************************************************************************************************
----------  RESET
*******************************************************************************************************************************
*/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;200;300;400;500;600;700;800;900&display=swap");
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }

body {
  line-height: 1; }

ol,
ul {
  list-style: none; }

blockquote,
q {
  quotes: none; }

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none; }

:focus {
  outline: 0; }

ins {
  text-decoration: none; }

del {
  text-decoration: line-through; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

@media screen and (max-width: 768px) {
  .example {
    font-size: 14px; } }

@media screen and (min-width: 768px) {
  .example {
    font-size: 16px; } }

@media screen and (max-width: 48em) {
  .example {
    font-size: 14px; } }

/* -------------
    $ scss
------------- */
/* font */
/* mixin */
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@-moz-keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@-ms-keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@-o-keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@-moz-keyframes fadeOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@-ms-keyframes fadeOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@-o-keyframes fadeOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@keyframes fadeOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

/* -------------
    ALL USE
------------- */
img {
  max-width: 100%;
  height: auto; }

a {
  display: block;
  text-decoration: none; }

.c {
  clear: both; }

.table {
  display: table; }

.tr {
  display: table-row; }

.th,
.td {
  display: table-cell;
  vertical-align: middle; }

.hide {
  display: none !important; }

.ab {
  position: absolute; }

.clearfix:after {
  content: "";
  display: block;
  clear: both; }

.float-l {
  float: left; }

.float-r {
  float: right; }

._m {
  display: none; }
  @media screen and (max-width: 768px) {
    ._m {
      display: block; } }

@media screen and (max-width: 768px) {
  ._pc {
    display: none !important; } }

.autoW {
  width: auto; }

.btnover {
  position: relative; }
  .btnover::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center top;
    opacity: 0; }
  .btnover:hover > img {
    opacity: 0; }
  .btnover:hover:after {
    opacity: 1; }

/* vw換算 */
/* rem換算 */
/* em換算 */
.example {
  font-size: 1.33333em;
  padding: 0.5em; }

/* 百分比換算 */
@-webkit-keyframes scrollAni {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0); }
  50% {
    -webkit-transform: translate(0, 110%);
    transform: translate(0, 110%); }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0); } }
@keyframes scrollAni {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0); }
  50% {
    -webkit-transform: translate(0, 110%);
    transform: translate(0, 110%); }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0); } }

/*===== 結構 =====*/
/* loading -----------------------------------------------------------*/
.loading {
  background: #00a0e9;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  text-align: center; }
  .loading .inner {
    display: inline-block;
    vertical-align: middle; }
  .loading .line {
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #ffffff;
    margin: 0 5px; }
    @media screen and (max-width: 768px) {
      .loading .line {
        width: 3vw;
        height: 3vw; } }
  .loading:after {
    content: "";
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle; }

.loading .line:nth-last-child(1) {
  -webkit-animation: loadingC 0.6s 0.1s linear infinite;
  animation: loadingC 0.6s 0.1s linear infinite; }

.loading .line:nth-last-child(2) {
  -webkit-animation: loadingC 0.6s 0.2s linear infinite;
  animation: loadingC 0.6s 0.2s linear infinite; }

.loading .line:nth-last-child(3) {
  -webkit-animation: loadingC 0.6s 0.3s linear infinite;
  animation: loadingC 0.6s 0.3s linear infinite; }

@-webkit-keyframes loadingC {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0); }
  50% {
    -webkit-transform: translate(0, 50%);
    transform: translate(0, 50%); }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0); } }

@keyframes loadingC {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0); }
  50% {
    -webkit-transform: translate(0, 50%);
    transform: translate(0, 50%); }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0); } }

/* lightbox
------------------------------------------------------*/
/* 鎖卷軸 */
.lb-no-scroll {
  overflow: hidden !important; }

/* 背景 */
.lb-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 9998;
  display: none; }

/* 外框 .lb：可保留既有樣式，只要在開啟時加上 .is-open */
.lb[data-lb] {
  display: none;
  position: fixed;
  z-index: 9999; }

.lb.is-open {
  display: block; }

/* 分頁容器（可選） */
.lb [data-lb-item] {
  display: none; }

.lb [data-lb-item].is-active {
  display: block; }

/* lightbox style */
.lb {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  text-align: center;
  font-size: 0; }
  .lb:after {
    content: "";
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle; }
  .lb .btn_x {
    width: 3.77778rem;
    position: absolute;
    top: -1.94444rem;
    right: -1.94444rem;
    cursor: pointer;
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease; }
    .lb .btn_x:hover {
      -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
      transform: rotate(180deg);
      -webkit-transition: all .3s ease;
      -o-transition: all .3s ease;
      transition: all .3s ease; }

.lbbox {
  width: 88%;
  margin: auto;
  max-width: 700px;
  display: inline-block;
  background: #f2f5fb;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  vertical-align: middle;
  position: relative;
  box-sizing: border-box; }

.lb-smartConstruction {
  background-color: #00a0e9;
  padding: 3px;
  border-radius: 0.55556rem;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }
  .lb-smartConstruction .subtitle {
    font-size: 1.33333rem;
    color: #fff;
    font-weight: 700;
    text-align: center;
    border-radius: 1.66667rem;
    padding: 0.55556rem 1.66667rem;
    position: absolute;
    background-color: #00a0e9;
    top: -1.11111rem;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%); }
  .lb-smartConstruction .pic img {
    border-radius: 0.55556rem; }
  .lb-smartConstruction .text {
    font-size: 1.11111rem;
    color: #fff;
    line-height: 1.5;
    text-align: justify;
    padding: 0 1.11111rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    word-break: break-all;
    text-align: justify;
    letter-spacing: -1px;
    padding: 0.83333rem 1.11111rem; }

/* BODY,HTML
--------------------------------------------------------------------------------------*/
html, body {
  width: 100%;
  font-family: Arial, "Noto Sans TC", "微軟正黑體", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, "新細明體", "蘋果儷黑體", Verdana, sans-serif;
  overflow-x: hidden;
  font-size: 18px; }
  @media screen and (max-width: 1680px) {
    html, body {
      font-size: 16px; } }
  @media screen and (max-width: 1024px) {
    html, body {
      font-size: 14px; } }
  @media screen and (max-width: 950px) {
    html, body {
      font-size: 16px; } }
  @media screen and (max-width: 768px) {
    html, body {
      font-size: 2.4vw; } }

html {
  -webkit-text-size-adjust: 100%;
  background-color: #fff; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  /* 不換行，避免高度改變 */
  border: 0; }

/* 架構
--------------------------------------------------------------------------------------*/
.wrapper {
  width: 100%; }

section {
  width: 100%;
  padding: 4.72222rem 0; }

.container-1670 {
  width: 92.5%;
  max-width: 1670px;
  margin: 0 auto;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: relative; }
  @media screen and (max-width: 768px) {
    .container-1670 {
      width: 90%; } }

.container-1220 {
  width: 92.5%;
  max-width: 1220px;
  margin: 0 auto;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: relative; }
  @media screen and (max-width: 768px) {
    .container-1220 {
      width: 90%; } }

.content {
  width: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

main {
  width: 100%;
  font-size: 18px !important;
  font-family: Arial, "Noto Sans TC", "微軟正黑體", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, "新細明體", "蘋果儷黑體", Verdana, sans-serif !important; }
  main * {
    font-family: Arial, "Noto Sans TC", "微軟正黑體", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, "新細明體", "蘋果儷黑體", Verdana, sans-serif !important; }
  @media screen and (max-width: 1680px) {
    main {
      font-size: 16px; } }
  @media screen and (max-width: 1024px) {
    main {
      font-size: 14px; } }

.header-spacer {
  padding: 0; }
  @media screen and (max-width: 1024px) {
    .header-spacer {
      height: 110px; } }
  @media screen and (max-width: 768px) {
    .header-spacer {
      height: 89px; } }

/* header
--------------------------------------------------------------------------------------*/
#headerWrap {
  font-size: 16px;
  padding: 0; }

/* footer
--------------------------------------------------------------------------------------*/
footer {
  width: 100%; }

#footer {
  padding: 0; }

/* 主選單
--------------------------------------------------------------------------------------*/
#mainnav {
  width: 100%;
  background-color: #0068b1;
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0; }
  #mainnav.fixed {
    position: fixed;
    top: 0;
    bottom: auto;
    left: 0;
    width: 100%;
    z-index: 100;
    top: 85px; }
    @media screen and (max-width: 768px) {
      #mainnav.fixed {
        top: 89px; } }
  #mainnav ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    width: 100%;
    max-width: 1220px;
    margin: 0 auto; }
    @media screen and (max-width: 768px) {
      #mainnav ul {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 0 1vw; } }
  #mainnav li:hover a, #mainnav li.active a {
    background-color: #2f83bf;
    position: relative;
    top: 0.55556rem; }
    #mainnav li:hover a::after, #mainnav li.active a::after {
      opacity: 1; }
  #mainnav a {
    position: relative;
    color: #fff;
    font-size: 1.16667rem;
    padding: 1.66667rem 2.77778rem;
    font-weight: 500;
    text-align: center;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    letter-spacing: 0.1em; }
    @media screen and (max-width: 950px) {
      #mainnav a {
        padding: 1.66667rem 1.05556rem;
        font-size: 1.05556rem; } }
    @media screen and (max-width: 768px) {
      #mainnav a {
        font-size: 3.73333vw;
        line-height: 1.1;
        padding: 0 2.5vw;
        height: 16vw;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center; } }
    #mainnav a::after {
      content: '';
      position: absolute;
      right: 0;
      bottom: 0;
      width: 0.66667rem;
      height: 0.55556rem;
      background: #0B5B8C;
      -webkit-transform: translate(100%, 0) scaleY(-1);
      -ms-transform: translate(100%, 0) scaleY(-1);
      transform: translate(100%, 0) scaleY(-1);
      -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
      clip-path: polygon(0 0, 100% 100%, 0 100%);
      pointer-events: none;
      opacity: 0; }

/* ====================================================================================
  各頁面設定
======================================================================================*/
/* index - 智慧建築 -------------------------------*/
/* ====================================================================================
  各區塊設定
======================================================================================*/
/* 主視覺 -------------------------------*/
section.secKv {
  height: 37.77778rem;
  background-image: url("../images/index/kv.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: auto 100%;
  position: relative;
  padding: 0; }
  @media screen and (max-width: 768px) {
    section.secKv {
      height: 186.66667vw;
      background-image: url("../images/index/m_kv.jpg");
      background-size: cover; } }
  section.secKv .scroll {
    position: absolute;
    top: 83%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 3.72222rem;
    cursor: pointer;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease; }
    section.secKv .scroll::after {
      content: "";
      display: block;
      width: 100%;
      height: 30.12048%;
      position: absolute;
      left: 0;
      bottom: 0;
      background-image: url("../images/scroll_ar.png");
      background-repeat: no-repeat;
      background-position: center center;
      background-size: 100% auto;
      -webkit-animation: scrollAni 0.8s ease infinite;
      animation: scrollAni 0.8s ease infinite; }
    section.secKv .scroll:hover {
      -webkit-transform: translateX(-50%) translateY(10%);
      -ms-transform: translateX(-50%) translateY(10%);
      transform: translateX(-50%) translateY(10%);
      -webkit-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
      transition: all 0.3s ease; }
    @media screen and (max-width: 768px) {
      section.secKv .scroll {
        width: 15.73333vw; } }

/* 中華電信智慧建築 -------------------------------*/
section.secIntelligent {
  padding-bottom: 0; }
  @media screen and (max-width: 768px) {
    section.secIntelligent {
      padding-bottom: 10vw; } }
  @media screen and (max-width: 1680px) {
    section.secIntelligent .sectitle {
      width: 25.44444rem; } }
  section.secIntelligent .content {
    width: 157.37705%;
    margin-left: -28.5%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
    @media screen and (max-width: 1220px) {
      section.secIntelligent .content {
        width: 109%;
        margin-left: -4.5%; } }
    @media screen and (max-width: 768px) {
      section.secIntelligent .content {
        width: 100%;
        margin-left: 0;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column; } }
    section.secIntelligent .content > div {
      -webkit-box-flex: 1;
      -ms-flex: 1 1 50%;
      flex: 1 1 50%; }
      @media screen and (max-width: 768px) {
        section.secIntelligent .content > div {
          -webkit-box-flex: 1;
          -ms-flex: 1 1 100%;
          flex: 1 1 100%;
          -ms-flex: auto;
          flex: auto; } }
    section.secIntelligent .content .pic {
      height: 27.77778rem;
      background-image: url("../images/index/intelligent_pic.jpg");
      background-repeat: no-repeat;
      background-position: center center;
      background-size: cover; }
      @media screen and (max-width: 768px) {
        section.secIntelligent .content .pic {
          height: 44.66667vw; } }
    section.secIntelligent .content .text {
      background-color: #f9f9f9;
      font-size: 1.33333rem;
      line-height: 1.5;
      color: #000;
      font-weight: 400;
      padding: 0 3.88889rem;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center; }
      @media screen and (max-width: 1220px) {
        section.secIntelligent .content .text {
          padding: 0 3%; } }
      @media screen and (max-width: 768px) {
        section.secIntelligent .content .text {
          font-size: 3.6vw;
          padding: 3vw; } }
      section.secIntelligent .content .text font {
        color: #1dabeb; }

/* 中華優勢 -------------------------------*/
@media screen and (max-width: 1680px) {
  .secAdvantages .sectitle {
    width: 18.83333rem; } }

.secAdvantages .content {
  text-align: center;
  position: relative; }
  @media screen and (max-width: 768px) {
    .secAdvantages .content {
      margin-top: 10vw; } }

.secAdvantages .pic {
  width: 25.27778rem;
  margin: 0 auto; }
  @media screen and (max-width: 1024px) {
    .secAdvantages .pic {
      width: 36.22222rem; } }

.secAdvantages .text {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }
  @media screen and (max-width: 1024px) {
    .secAdvantages .text {
      width: 70%;
      top: 52%;
      -webkit-box-align: start;
      -ms-flex-align: start;
      align-items: flex-start; } }
  @media screen and (max-width: 950px) {
    .secAdvantages .text {
      width: 80%; } }
  @media screen and (max-width: 768px) {
    .secAdvantages .text {
      width: 100%; } }
  .secAdvantages .text p {
    font-size: 1.33333rem;
    color: #000;
    line-height: 1.5;
    font-weight: 400;
    width: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }
    @media screen and (max-width: 1200px) {
      .secAdvantages .text p {
        font-size: 1.22222rem; } }
    @media screen and (max-width: 768px) {
      .secAdvantages .text p {
        font-size: 3.6vw; } }
    .secAdvantages .text p:nth-child(odd) {
      padding-right: 20%;
      text-align: right;
      -webkit-box-pack: end;
      -ms-flex-pack: end;
      justify-content: flex-end; }
      @media screen and (max-width: 1200px) {
        .secAdvantages .text p:nth-child(odd) {
          padding-right: 13.33333rem; } }
      @media screen and (max-width: 1024px) {
        .secAdvantages .text p:nth-child(odd) {
          text-align: left;
          padding-right: 5.55556rem;
          -webkit-box-pack: start;
          -ms-flex-pack: start;
          justify-content: flex-start; } }
      @media screen and (max-width: 768px) {
        .secAdvantages .text p:nth-child(odd) {
          padding-right: 3vw; } }
    .secAdvantages .text p:nth-child(even) {
      padding-left: 20%;
      text-align: left;
      -webkit-box-pack: start;
      -ms-flex-pack: start;
      justify-content: flex-start; }
      @media screen and (max-width: 1200px) {
        .secAdvantages .text p:nth-child(even) {
          padding-left: 13.33333rem; } }
      @media screen and (max-width: 1024px) {
        .secAdvantages .text p:nth-child(even) {
          padding-left: 5.55556rem; } }
      @media screen and (max-width: 768px) {
        .secAdvantages .text p:nth-child(even) {
          padding-left: 3vw; } }
    .secAdvantages .text p:nth-child(1), .secAdvantages .text p:nth-child(2) {
      margin-bottom: 4.72222rem; }
      @media screen and (max-width: 1024px) {
        .secAdvantages .text p:nth-child(1), .secAdvantages .text p:nth-child(2) {
          margin-bottom: 20rem; } }
    @media screen and (max-width: 1024px) {
      .secAdvantages .text p br {
        display: none; } }

/* 認識智慧建築 -------------------------------*/
section.secAbout {
  text-align: center; }
  @media screen and (max-width: 1680px) {
    section.secAbout .sectitle {
      width: 25.05556rem; } }
  section.secAbout .pic {
    position: relative; }
    section.secAbout .pic .brain {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-56%, -50%);
      -ms-transform: translate(-56%, -50%);
      transform: translate(-56%, -50%);
      width: 36.06557%;
      z-index: -1; }
      @media screen and (max-width: 768px) {
        section.secAbout .pic .brain {
          width: 66%;
          -webkit-transform: translate(-49.5%, -54.5%);
          -ms-transform: translate(-49.5%, -54.5%);
          transform: translate(-49.5%, -54.5%); }
          section.secAbout .pic .brain img {
            max-width: auto;
            width: 100%; } }

/* Read DM -------------------------------*/
section.secReadDm {
  background-color: #ddebf2; }
  @media screen and (max-width: 768px) {
    section.secReadDm {
      padding: 10vw 0; } }
  section.secReadDm .content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch; }
    @media screen and (max-width: 768px) {
      section.secReadDm .content {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column; } }
    section.secReadDm .content > div {
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      width: 50%;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      max-width: 50%;
      -ms-flex-preferred-size: 50%;
      flex-basis: 50%; }
      @media screen and (max-width: 768px) {
        section.secReadDm .content > div {
          width: 100%;
          max-width: 100%;
          -ms-flex-preferred-size: 100%;
          flex-basis: 100%; } }
  section.secReadDm .pic {
    position: relative; }
    section.secReadDm .pic img {
      width: 33.83333rem;
      height: 23.88889rem;
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-45%, -50%);
      -ms-transform: translate(-45%, -50%);
      transform: translate(-45%, -50%);
      -webkit-box-shadow: -0.83333rem 0.83333rem 0 0 rgba(0, 0, 0, 0.1);
      box-shadow: -0.83333rem 0.83333rem 0 0 rgba(0, 0, 0, 0.1);
      -o-object-fit: cover;
      object-fit: cover; }
      @media screen and (max-width: 768px) {
        section.secReadDm .pic img {
          position: initial;
          -webkit-transform: none;
          -ms-transform: none;
          transform: none;
          -webkit-box-shadow: none;
          box-shadow: none;
          width: 100%;
          height: 46.66667vw;
          -o-object-fit: cover;
          object-fit: cover; } }
  section.secReadDm .info {
    background-color: #fff;
    padding: 1.94444rem 3.61111rem;
    padding-left: 5rem;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start; }
    @media screen and (max-width: 768px) {
      section.secReadDm .info {
        padding: 5vw 8vw;
        padding-left: 8vw; } }
  section.secReadDm .title {
    margin-bottom: 1.66667rem;
    padding-bottom: 1.66667rem;
    border-bottom: 1px solid #dedede; }
    @media screen and (max-width: 768px) {
      section.secReadDm .title {
        width: 100%;
        margin-bottom: 3vw; }
        section.secReadDm .title img {
          width: 85%; } }
  section.secReadDm .txt {
    font-size: 1rem;
    line-height: 1.5;
    color: #000000;
    text-align: justify;
    font-weight: 400;
    margin-bottom: 1.11111rem; }
    @media screen and (max-width: 768px) {
      section.secReadDm .txt {
        font-size: 3.6vw;
        margin-bottom: 5vw; } }
  section.secReadDm .btnRead {
    font-size: 1.33333rem;
    line-height: 4.72222rem;
    color: #fff;
    font-weight: 500;
    text-align: center;
    width: 13.88889rem;
    background-color: #1263a6;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    position: relative; }
    @media screen and (max-width: 768px) {
      section.secReadDm .btnRead {
        font-size: 4vw; } }
    section.secReadDm .btnRead:hover {
      -webkit-filter: brightness(1.2);
      filter: brightness(1.2);
      -webkit-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
      transition: all 0.3s ease; }
      section.secReadDm .btnRead:hover::after {
        -webkit-transform: translateX(80%);
        -ms-transform: translateX(80%);
        transform: translateX(80%);
        -webkit-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease; }
    section.secReadDm .btnRead::after {
      content: "";
      display: block;
      width: 0.5rem;
      height: 0.77778rem;
      background-image: url("../images/index/read_ar.png");
      background-repeat: no-repeat;
      background-size: 100% auto;
      background-position: center center;
      position: absolute;
      top: 43%;
      left: 88%;
      -webkit-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
      transition: all 0.3s ease; }

/* 實績探索 -------------------------------*/
section.secProjects {
  text-align: center; }
  @media screen and (max-width: 1680px) {
    section.secProjects .sectitle {
      width: 25.05556rem; } }
  section.secProjects .list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    gap: 0.55556rem; }
    @media screen and (max-width: 1024px) {
      section.secProjects .list {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 4%;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center; } }
    section.secProjects .list > li {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 23%;
      flex: 0 0 23%;
      text-align: left; }
      @media screen and (max-width: 1024px) {
        section.secProjects .list > li {
          -webkit-box-flex: 0;
          -ms-flex: 0 0 48%;
          flex: 0 0 48%;
          margin-bottom: 1.66667rem; } }
    section.secProjects .list .pic {
      margin-bottom: 1.11111rem; }
      @media screen and (max-width: 768px) {
        section.secProjects .list .pic {
          margin-bottom: 2vw; } }
      section.secProjects .list .pic img {
        width: 100%; }
    section.secProjects .list .title {
      font-size: 1.66667rem;
      color: #0068b1;
      font-weight: 500;
      margin-bottom: 0.83333rem;
      text-align: center; }
      @media screen and (max-width: 768px) {
        section.secProjects .list .title {
          font-size: 4vw; } }
    section.secProjects .list .txt {
      font-size: 1rem;
      color: #000;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
      @media screen and (max-width: 768px) {
        section.secProjects .list .txt {
          font-size: 3.6vw; } }
      section.secProjects .list .txt dt, section.secProjects .list .txt dd {
        margin-bottom: 0.55556rem;
        font-weight: normal; }
      section.secProjects .list .txt dt {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%; }
      section.secProjects .list .txt dd {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%; }

/* 相關網站 -------------------------------*/
section.secLinks {
  padding-bottom: 8.33333rem; }
  @media screen and (max-width: 1680px) {
    section.secLinks .sectitle {
      width: 25.05556rem; } }
  section.secLinks .content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 2.22222rem; }
    section.secLinks .content .link {
      font-size: 1.66667rem;
      color: #000;
      font-weight: 500; }
      section.secLinks .content .link svg {
        width: 1.66667rem;
        color: #000;
        display: inline-block;
        vertical-align: baseline; }
      section.secLinks .content .link:hover {
        color: #1263a6; }

/* 智慧建築標章 -------------------------------*/
@media screen and (max-width: 1680px) {
  section.secLabel .sectitle {
    width: 25.05556rem; } }

@media screen and (max-width: 768px) {
  section.secLabel .sectext {
    margin-bottom: 0; } }

section.secLabel .content {
  text-align: center; }

@media screen and (max-width: 768px) {
  section.secLabel .pic {
    width: 112%;
    margin-left: -6%; } }

@media screen and (max-width: 768px) {
  section.secLabel .ps {
    margin-top: 4vw; } }

/* 智慧建築標章規劃服務 -------------------------------*/
section.secConsulting {
  background-color: #ddebf2; }
  @media screen and (max-width: 1680px) {
    section.secConsulting .sectitle {
      width: 34.66667rem; } }
  section.secConsulting .content {
    text-align: center; }

/* 優良系統整合商 -------------------------------*/
section.secIntegrator {
  padding-bottom: 5.55556rem; }
  @media screen and (max-width: 1680px) {
    section.secIntegrator .sectitle {
      width: 28.27778rem; } }
  section.secIntegrator .content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: end;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-left: 0.83333rem; }
    section.secIntegrator .content .box {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center; }
      @media screen and (max-width: 768px) {
        section.secIntegrator .content .box {
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
          -ms-flex-direction: column;
          flex-direction: column; } }
      section.secIntegrator .content .box .pic {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 314px;
        flex: 0 0 314px; }
        @media screen and (max-width: 1680px) {
          section.secIntegrator .content .box .pic {
            -webkit-box-flex: 0;
            -ms-flex: 0 0 17.44444rem;
            flex: 0 0 17.44444rem; } }
        @media screen and (max-width: 768px) {
          section.secIntegrator .content .box .pic {
            -webkit-box-flex: 1;
            -ms-flex: auto;
            flex: auto;
            width: 42vw;
            position: relative;
            z-index: 1; } }
        section.secIntegrator .content .box .pic img {
          -webkit-box-shadow: -0.83333rem 0.83333rem 0 0 rgba(0, 0, 0, 0.1);
          box-shadow: -0.83333rem 0.83333rem 0 0 rgba(0, 0, 0, 0.1); }
      section.secIntegrator .content .box .text {
        background: #ddebf2;
        padding: 7.22222rem 5rem;
        font-size: 1.33333rem;
        color: #000;
        line-height: 1.5; }
        @media screen and (max-width: 950px) {
          section.secIntegrator .content .box .text {
            padding: 5.55556rem 2.22222rem; } }
        @media screen and (max-width: 768px) {
          section.secIntegrator .content .box .text {
            font-size: 3.6vw;
            padding: 7vw 5vw;
            padding-top: 13vw;
            margin-top: -7vw; } }

/* 智慧標章Q&A -------------------------------*/
section.secQa.whitebg .atext {
  background-color: #e9f4f9; }

@media screen and (max-width: 1680px) {
  section.secQa .sectitle {
    width: 25.44444rem; } }

section.secQa .qalist li {
  cursor: pointer; }
  section.secQa .qalist li:not(:last-child) {
    margin-bottom: 1.11111rem; }
  section.secQa .qalist li:hover .qtext {
    -webkit-filter: brightness(1.1);
    filter: brightness(1.1);
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease; }
    section.secQa .qalist li:hover .qtext p {
      -webkit-transform: translateX(2%);
      -ms-transform: translateX(2%);
      transform: translateX(2%);
      -webkit-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
      transition: all 0.3s ease; }
  section.secQa .qalist li.isopen .qtext::after {
    -webkit-transform: translateY(-50%) rotate(0deg);
    -ms-transform: translateY(-50%) rotate(0deg);
    transform: translateY(-50%) rotate(0deg);
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease; }
  section.secQa .qalist li.isopen .atext {
    display: block; }

section.secQa .qtext {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #2f83bf;
  padding: 0.27778rem;
  position: relative;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease; }
  @media screen and (max-width: 768px) {
    section.secQa .qtext {
      padding: 2vw 1.5vw;
      padding-right: 8vw; } }
  section.secQa .qtext::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-left: 0.38889rem solid transparent;
    /* 寬度一半 */
    border-right: 0.38889rem solid transparent;
    border-top: 0.72222rem solid white;
    /* 高度 */
    position: absolute;
    top: 50%;
    right: 1.11111rem;
    -webkit-transform: translateY(-50%) rotate(-90deg);
    -ms-transform: translateY(-50%) rotate(-90deg);
    transform: translateY(-50%) rotate(-90deg);
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease; }
    @media screen and (max-width: 768px) {
      section.secQa .qtext::after {
        border-left: 0.55556rem solid transparent;
        /* 寬度一半 */
        border-right: 0.55556rem solid transparent;
        border-top: 1rem solid white;
        /* 高度 */ } }
  section.secQa .qtext p {
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease; }
  section.secQa .qtext span {
    font-size: 1.44444rem;
    font-weight: 600;
    color: #fff;
    background-color: #1dabeb;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 0.66667rem 0.44444rem;
    margin-right: 1.11111rem; }
    @media screen and (max-width: 768px) {
      section.secQa .qtext span {
        font-size: 4.13333vw;
        padding: 2.6vw 2vw; } }
  section.secQa .qtext p {
    font-size: 1.33333rem;
    color: #fff;
    font-weight: 600;
    line-height: 1.5; }
    @media screen and (max-width: 768px) {
      section.secQa .qtext p {
        font-size: 4vw;
        line-height: 1.3; } }

section.secQa .atext {
  font-size: 1.22222rem;
  color: #000;
  line-height: 1.7;
  background-color: #fff;
  padding: 1.66667rem 2.77778rem;
  padding-left: 4.16667rem; }
  @media screen and (max-width: 768px) {
    section.secQa .atext {
      font-size: 3.6vw;
      padding-left: 0;
      padding: 5vw 6vw;
      line-height: 1.5; } }

/* 全方位整合服務 -------------------------------*/
@media screen and (max-width: 1680px) {
  section.secService .sectitle {
    width: 25.44444rem; } }

section.secService .content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-left: 6.11111rem; }
  @media screen and (max-width: 950px) {
    section.secService .content {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column; } }

section.secService .btnlist {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 14.16667rem;
  flex: 0 0 14.16667rem;
  margin-top: 2.77778rem; }
  @media screen and (max-width: 950px) {
    section.secService .btnlist {
      -webkit-box-flex: 1;
      -ms-flex: auto;
      flex: auto;
      width: 100%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      gap: 2%;
      margin-top: 0; } }
  section.secService .btnlist li {
    height: 3.44444rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background-color: #ccecfb;
    color: #000;
    font-size: 1.22222rem;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    border-radius: 2.77778rem;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    cursor: pointer; }
    section.secService .btnlist li:not(:last-child) {
      margin-bottom: 0.66667rem; }
    section.secService .btnlist li:hover, section.secService .btnlist li.active {
      background-color: #00a0e9;
      color: #fff;
      -webkit-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
      transition: all 0.3s ease; }
    section.secService .btnlist li br {
      display: none; }
      @media screen and (max-width: 950px) {
        section.secService .btnlist li br {
          display: block; } }
    @media screen and (max-width: 950px) {
      section.secService .btnlist li {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 23.5%;
        flex: 0 0 23.5%;
        border-radius: 0.83333rem;
        height: 5rem; } }

section.secService .mainbox {
  position: relative; }
  @media screen and (max-width: 950px) {
    section.secService .mainbox {
      width: 100%;
      padding-left: 0;
      margin-top: 4vw; } }
  @media screen and (max-width: 768px) {
    section.secService .mainbox {
      margin-top: 0vw;
      padding-bottom: 20vw; } }
  section.secService .mainbox .pic {
    width: 800px;
    margin-left: 10rem; }
    @media screen and (max-width: 1680px) {
      section.secService .mainbox .pic {
        width: 48.88889rem; } }
    @media screen and (max-width: 768px) {
      section.secService .mainbox .pic {
        width: 110vw;
        margin-left: -2vw;
        margin-top: 0; } }
  section.secService .mainbox .text {
    max-width: 13.88889rem;
    position: absolute;
    left: 1.66667rem;
    font-size: 93%; }
    @media screen and (max-width: 768px) {
      section.secService .mainbox .text {
        max-width: 90%;
        left: 0; } }
    section.secService .mainbox .text p {
      font-size: 1.11111rem;
      line-height: 1.5;
      color: #fff;
      font-weight: 500;
      background-color: #00a0e9;
      border-radius: 1.66667rem;
      display: inline-block;
      padding: 0rem 0.83333rem;
      margin-bottom: 0.27778rem; }
      @media screen and (max-width: 768px) {
        section.secService .mainbox .text p {
          font-size: 3.6vw;
          padding: 0.5vw 2vw 0.2vw;
          margin-bottom: 2vw; } }
    section.secService .mainbox .text span {
      display: block;
      font-size: 1rem;
      font-weight: 400;
      color: #000;
      line-height: 1.5;
      text-align: justify; }
      @media screen and (max-width: 768px) {
        section.secService .mainbox .text span {
          font-size: 3.2vw; } }
    section.secService .mainbox .text::after {
      content: "";
      display: block;
      width: 15.94444em;
      background-repeat: no-repeat;
      background-size: 100% auto;
      background-position: center center;
      position: absolute; }
      @media screen and (max-width: 768px) {
        section.secService .mainbox .text::after {
          display: none; } }
    section.secService .mainbox .text.t1 {
      top: 89%;
      max-width: 23.33333rem; }
      section.secService .mainbox .text.t1::after {
        width: 19.33333em;
        height: 8.44444em;
        background-image: url("../images/service/line_1.png");
        top: 0%;
        right: -66%; }
      @media screen and (max-width: 768px) {
        section.secService .mainbox .text.t1 {
          top: 80%;
          max-width: 90%; } }
    section.secService .mainbox .text.t2 {
      top: 0; }
      @media screen and (max-width: 768px) {
        section.secService .mainbox .text.t2 {
          top: 80%; } }
    section.secService .mainbox .text.t3 {
      top: 31.5%; }
      section.secService .mainbox .text.t3::after {
        height: 3.61111em;
        background-image: url("../images/service/line_3.png");
        top: 10%;
        right: -73%; }
      @media screen and (max-width: 768px) {
        section.secService .mainbox .text.t3 {
          top: 82%; } }
    section.secService .mainbox .text.t4 {
      top: 32%; }
      section.secService .mainbox .text.t4::after {
        height: 12.83333em;
        background-image: url("../images/service/line_4.png");
        top: 7%;
        right: -75%; }
      @media screen and (max-width: 768px) {
        section.secService .mainbox .text.t4 {
          top: 82%; } }
    section.secService .mainbox .text.t5 {
      top: 22%; }
      section.secService .mainbox .text.t5::after {
        height: 0.61111em;
        background-image: url("../images/service/line_5.png");
        top: 14%;
        right: -71%; }
      @media screen and (max-width: 768px) {
        section.secService .mainbox .text.t5 {
          top: 82%; } }
    section.secService .mainbox .text.t6 {
      top: 19%; }
      section.secService .mainbox .text.t6::after {
        height: 3.11111em;
        background-image: url("../images/service/line_6.png");
        top: 9%;
        right: -72%; }
      @media screen and (max-width: 768px) {
        section.secService .mainbox .text.t6 {
          top: 82%; } }
    section.secService .mainbox .text.t7 {
      max-width: 20em;
      top: 86.5%; }
      section.secService .mainbox .text.t7::after {
        height: 1.44444rem;
        background-image: url("../images/service/line_7.png");
        top: -5%;
        right: -55%; }
      @media screen and (max-width: 768px) {
        section.secService .mainbox .text.t7 {
          top: 82%;
          max-width: 90%; } }
    section.secService .mainbox .text.t8 {
      max-width: 18.88889rem;
      top: 5.5%; }
      section.secService .mainbox .text.t8::after {
        width: 19.44444em;
        height: 0.5em;
        background-image: url("../images/service/line_8.png");
        top: 13%;
        right: -42%; }
      @media screen and (max-width: 768px) {
        section.secService .mainbox .text.t8 {
          top: 82%;
          max-width: 90%; } }
    section.secService .mainbox .text.t9 {
      max-width: 16.11111rem;
      top: 8%; }
      section.secService .mainbox .text.t9::after {
        display: none; }
      @media screen and (max-width: 768px) {
        section.secService .mainbox .text.t9 {
          top: 82%;
          max-width: 90%; } }

/* 智慧營建服務 -------------------------------*/
section.secSmartConstruction {
  padding-bottom: 0; }
  @media screen and (max-width: 1680px) {
    section.secSmartConstruction .sectitle {
      width: 25.44444rem; } }
  @media screen and (max-width: 768px) {
    section.secSmartConstruction .sectext {
      margin-bottom: 4vw; } }
  section.secSmartConstruction .menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 0.83333rem;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 90%;
    margin: 0 auto;
    margin-bottom: 1.11111rem; }
    @media screen and (max-width: 768px) {
      section.secSmartConstruction .menu {
        width: 100%;
        -webkit-box-align: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
        gap: 2vw; } }
    section.secSmartConstruction .menu li {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 23%;
      flex: 0 0 23%;
      font-size: 1.33333rem;
      line-height: 1.2;
      color: #000;
      font-weight: 400;
      background-color: #d2f2fe;
      border-radius: 2.77778rem;
      padding: 1.38889rem 0;
      cursor: pointer;
      text-align: center;
      margin-bottom: 0.55556rem; }
      section.secSmartConstruction .menu li:hover, section.secSmartConstruction .menu li.active {
        background-color: #00a0e9;
        color: #fff; }
      @media screen and (max-width: 768px) {
        section.secSmartConstruction .menu li {
          border-radius: 0.83333rem;
          padding: 3vw 0;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          justify-content: center;
          margin-bottom: 0vw; } }
  section.secSmartConstruction .maincon {
    padding: 2.77778rem 0; }
    @media screen and (max-width: 768px) {
      section.secSmartConstruction .maincon {
        padding: 0; } }
    section.secSmartConstruction .maincon .container-1220 {
      position: relative; }
      @media screen and (max-width: 768px) {
        section.secSmartConstruction .maincon .container-1220 {
          width: 100%; } }
    section.secSmartConstruction .maincon .textbox {
      background-color: #fff;
      border: 2px solid #00a0e9;
      border-radius: 0.55556rem;
      position: absolute;
      font-size: 1.11111rem;
      line-height: 1.5;
      color: #000;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      padding: 1.38889rem 1.11111rem 1.11111rem;
      font-size: 1.11111rem;
      box-sizing: border-box;
      word-break: break-all;
      text-align: justify; }
      @media screen and (max-width: 768px) {
        section.secSmartConstruction .maincon .textbox {
          font-size: 3.2vw;
          padding: 4vw 3vw 3vw;
          -webkit-box-shadow: 0 0 3vw 2vw rgba(0, 160, 233, 0.2);
          box-shadow: 0 0 3vw 2vw rgba(0, 160, 233, 0.2); } }
      section.secSmartConstruction .maincon .textbox:after {
        content: "";
        display: block;
        position: absolute;
        background-repeat: no-repeat;
        background-size: 100% auto;
        background-position: center center; }
      section.secSmartConstruction .maincon .textbox p {
        background-color: #00a0e9;
        font-size: 1.33333rem;
        font-weight: 500;
        color: #fff;
        border-radius: 1.66667rem;
        display: inline-block;
        padding: 0.55556rem 0.83333rem 0.44444rem;
        margin-bottom: 0.55556rem;
        line-height: 1;
        position: absolute;
        top: -1.38889rem;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%); }
        @media screen and (max-width: 768px) {
          section.secSmartConstruction .maincon .textbox p {
            font-size: 3.6vw; } }
      section.secSmartConstruction .maincon .textbox.t1 {
        width: 28.68852%;
        top: 69%;
        left: 71%; }
        @media screen and (max-width: 768px) {
          section.secSmartConstruction .maincon .textbox.t1 {
            width: 46.93333%;
            top: 56%;
            left: 44%; } }
        section.secSmartConstruction .maincon .textbox.t1:after {
          width: 4.22222rem;
          height: 3rem;
          top: -3.33333rem;
          left: 5.55556rem;
          background-image: url("../images/smart-construction/line_1.png"); }
          @media screen and (max-width: 768px) {
            section.secSmartConstruction .maincon .textbox.t1:after {
              background-image: url("../images/smart-construction/m_line_1.png");
              width: 2.13333vw;
              height: 9.46667vw;
              top: -31%;
              left: 48%; } }
      section.secSmartConstruction .maincon .textbox.t2 {
        width: 40%;
        top: 1%;
        left: 64%; }
        @media screen and (max-width: 768px) {
          section.secSmartConstruction .maincon .textbox.t2 {
            width: 50%;
            top: 13%;
            left: 8%; } }
        section.secSmartConstruction .maincon .textbox.t2:after {
          width: 2.33333rem;
          height: 4.38889rem;
          top: 100%;
          left: 16.66667rem;
          background-image: url("../images/smart-construction/line_2.png"); }
          @media screen and (max-width: 768px) {
            section.secSmartConstruction .maincon .textbox.t2:after {
              background-image: url("../images/smart-construction/m_line_2.png");
              width: 14.66667vw;
              height: 8.93333vw;
              top: 7%;
              left: 101%; } }
      section.secSmartConstruction .maincon .textbox.t3 {
        width: 40.16393%;
        top: 1%;
        left: 0.5%; }
        @media screen and (max-width: 768px) {
          section.secSmartConstruction .maincon .textbox.t3 {
            width: 50%;
            top: 16%;
            left: 45%; } }
        section.secSmartConstruction .maincon .textbox.t3:after {
          width: 0.5rem;
          height: 12.88889rem;
          top: 100%;
          left: 22.22222rem;
          background-image: url("../images/smart-construction/line_3.png"); }
          @media screen and (max-width: 768px) {
            section.secSmartConstruction .maincon .textbox.t3:after {
              background-image: url("../images/smart-construction/m_line_3.png");
              width: 2.13333vw;
              height: 6.93333vw;
              top: 100%;
              left: 49%; } }
      section.secSmartConstruction .maincon .textbox.t4 {
        width: 40.16393%;
        top: 1%;
        left: 0.5%; }
        @media screen and (max-width: 768px) {
          section.secSmartConstruction .maincon .textbox.t4 {
            width: 51.6%;
            top: 41.5%;
            left: 5%; } }
        @media screen and (max-width: 768px) {
          section.secSmartConstruction .maincon .textbox.t4 p {
            width: 62%;
            text-align: center; } }
        section.secSmartConstruction .maincon .textbox.t4:after {
          width: 6.16667rem;
          height: 2.38889rem;
          top: 100%;
          left: 22.22222rem;
          background-image: url("../images/smart-construction/line_4.png"); }
          @media screen and (max-width: 768px) {
            section.secSmartConstruction .maincon .textbox.t4:after {
              background-image: url("../images/smart-construction/m_line_4.png");
              width: 2.13333vw;
              height: 14.8vw;
              top: -39%;
              left: 49%; } }
      section.secSmartConstruction .maincon .textbox.t5 {
        width: 40.16393%;
        top: 11%;
        left: 0.5%; }
        @media screen and (max-width: 768px) {
          section.secSmartConstruction .maincon .textbox.t5 {
            width: 48%;
            top: 15%;
            left: 8%; } }
        section.secSmartConstruction .maincon .textbox.t5:after {
          width: 2.16667rem;
          height: 3.61111rem;
          top: 100%;
          left: 7.77778rem;
          background-image: url("../images/smart-construction/line_5.png"); }
          @media screen and (max-width: 768px) {
            section.secSmartConstruction .maincon .textbox.t5:after {
              background-image: url("../images/smart-construction/m_line_5.png");
              width: 6.8vw;
              height: 9.2vw;
              top: 100%;
              left: 45%; } }
      section.secSmartConstruction .maincon .textbox.t6 {
        width: 45.08197%;
        top: 73%;
        left: 24.5%; }
        @media screen and (max-width: 768px) {
          section.secSmartConstruction .maincon .textbox.t6 {
            width: 50.93333%;
            top: 33%;
            left: 7%; } }
        section.secSmartConstruction .maincon .textbox.t6:after {
          width: 4.22222rem;
          height: 1.77778rem;
          top: 5.55556rem;
          left: -4.16667rem;
          background-image: url("../images/smart-construction/line_6.png"); }
          @media screen and (max-width: 768px) {
            section.secSmartConstruction .maincon .textbox.t6:after {
              background-image: url("../images/smart-construction/m_line_6.png");
              width: 9.2vw;
              height: 18vw;
              top: 100%;
              left: 34%; } }
      section.secSmartConstruction .maincon .textbox.t7 {
        width: 40.16393%;
        top: 1%;
        left: 0.5%; }
        @media screen and (max-width: 768px) {
          section.secSmartConstruction .maincon .textbox.t7 {
            width: 49.6%;
            top: 12%;
            left: 44%; } }
        section.secSmartConstruction .maincon .textbox.t7:after {
          width: 3.16667rem;
          height: 3.88889rem;
          top: 100%;
          left: 7.77778rem;
          background-image: url("../images/smart-construction/line_7.png"); }
          @media screen and (max-width: 768px) {
            section.secSmartConstruction .maincon .textbox.t7:after {
              background-image: url("../images/smart-construction/m_line_7.png");
              width: 9.2vw;
              height: 11.6vw;
              top: 100%;
              left: 34%; } }
      section.secSmartConstruction .maincon .textbox.t8 {
        width: 28.68852%;
        top: 69%;
        left: 71%; }
        @media screen and (max-width: 768px) {
          section.secSmartConstruction .maincon .textbox.t8 {
            width: 50%;
            top: 31%;
            left: 44%; } }
        section.secSmartConstruction .maincon .textbox.t8 p {
          width: 58%; }
          @media screen and (max-width: 768px) {
            section.secSmartConstruction .maincon .textbox.t8 p {
              width: 64%;
              text-align: center; } }
        section.secSmartConstruction .maincon .textbox.t8:after {
          width: 7.11111rem;
          height: 3.77778rem;
          top: 6.11111rem;
          left: -7.11111rem;
          background-image: url("../images/smart-construction/line_8.png"); }
          @media screen and (max-width: 768px) {
            section.secSmartConstruction .maincon .textbox.t8:after {
              background-image: url("../images/smart-construction/m_line_8.png");
              width: 9.86667vw;
              height: 2.13333vw;
              top: 67%;
              left: -21%; } }
  section.secSmartConstruction .lb {
    position: absolute;
    z-index: 1; }

/* 建築碳盤查服務 -------------------------------*/
@media screen and (max-width: 1680px) {
  section.secBuildingCarbon .sectitle {
    width: 28.22222rem; } }

section.secBuildingCarbon .title {
  font-size: 2rem;
  font-weight: 600;
  color: #fff;
  background-color: #0068b1;
  padding: 1.11111rem 0;
  margin-bottom: 2.22222rem;
  text-align: center; }

section.secBuildingCarbon .sub {
  font-size: 2rem;
  color: #000;
  font-weight: 600;
  margin-bottom: 1.66667rem;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center; }
  @media screen and (max-width: 950px) {
    section.secBuildingCarbon .sub {
      font-size: 1.77778rem; } }
  @media screen and (max-width: 768px) {
    section.secBuildingCarbon .sub {
      font-size: 4.8vw; } }
  section.secBuildingCarbon .sub::after, section.secBuildingCarbon .sub::before {
    content: "";
    width: 20.55556rem;
    height: 0.55556rem;
    background-image: url("../images/building-carbon/building_sub_deco.png");
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center center;
    vertical-align: middle; }
    @media screen and (max-width: 1366px) {
      section.secBuildingCarbon .sub::after, section.secBuildingCarbon .sub::before {
        width: 25.62225vw;
        height: 0.73206vw; } }
    @media screen and (max-width: 950px) {
      section.secBuildingCarbon .sub::after, section.secBuildingCarbon .sub::before {
        -webkit-box-flex: 0;
        -ms-flex: 0 1 25%;
        flex: 0 1 25%; } }
    @media screen and (max-width: 768px) {
      section.secBuildingCarbon .sub::after, section.secBuildingCarbon .sub::before {
        background-image: url("../images/building-carbon/m_building_sub_deco.png");
        width: 12vw;
        height: 1.33333vw;
        -webkit-box-flex: 0;
        -ms-flex: 0 1 12vw;
        flex: 0 1 12vw; } }
  section.secBuildingCarbon .sub::before {
    margin-right: 1.94444rem; }
    @media screen and (max-width: 1366px) {
      section.secBuildingCarbon .sub::before {
        margin-right: 2.56223vw; } }
  section.secBuildingCarbon .sub::after {
    -webkit-transform: scaleX(-1) scaleY(-1);
    -ms-transform: scaleX(-1) scaleY(-1);
    transform: scaleX(-1) scaleY(-1);
    margin-left: 1.94444rem; }
    @media screen and (max-width: 1366px) {
      section.secBuildingCarbon .sub::after {
        margin-left: 2.56223vw; } }

section.secBuildingCarbon .core {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 3.33333rem;
  padding: 0.55556rem 0 2.22222rem; }
  @media screen and (max-width: 950px) {
    section.secBuildingCarbon .core {
      gap: 2.22222rem; } }
  @media screen and (max-width: 768px) {
    section.secBuildingCarbon .core {
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      gap: 0vw 5vw;
      padding: 0 0 7vw; } }
  section.secBuildingCarbon .core li {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    border-radius: 50%;
    text-align: center;
    aspect-ratio: 1 / 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center; }
    @media screen and (max-width: 950px) {
      section.secBuildingCarbon .core li {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 30%;
        flex: 0 0 30%; } }
    @media screen and (max-width: 768px) {
      section.secBuildingCarbon .core li {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 45%;
        flex: 0 0 45%; } }
    section.secBuildingCarbon .core li:nth-child(1) {
      background-color: #d8f1e6; }
    section.secBuildingCarbon .core li:nth-child(2) {
      background-color: #bae8ff; }
    section.secBuildingCarbon .core li:nth-child(3) {
      background-color: #dde5ff; }
    section.secBuildingCarbon .core li p {
      font-size: 1.77778rem;
      color: #000;
      font-weight: 700;
      margin-bottom: 1.66667rem; }
      @media screen and (max-width: 768px) {
        section.secBuildingCarbon .core li p {
          font-size: 4.8vw;
          margin-bottom: 3vw; } }
    section.secBuildingCarbon .core li span {
      display: block;
      font-size: 1.11111rem;
      line-height: 1.7;
      color: #000;
      font-weight: 400; }
      @media screen and (max-width: 768px) {
        section.secBuildingCarbon .core li span {
          font-size: 3.2vw;
          line-height: 1.3; } }

section.secBuildingCarbon .pic {
  overflow-x: auto;
  padding-bottom: 2.77778rem;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch; }
  section.secBuildingCarbon .pic::-webkit-scrollbar {
    height: 0.55556rem; }
  section.secBuildingCarbon .pic::-webkit-scrollbar-track {
    background: #fff; }
  section.secBuildingCarbon .pic::-webkit-scrollbar-thumb {
    background: #00A0E9; }
    section.secBuildingCarbon .pic::-webkit-scrollbar-thumb:hover {
      background: #007db6; }
  section.secBuildingCarbon .pic img {
    min-width: 67.72222rem;
    width: 90%;
    margin: 0 auto; }
    @media screen and (max-width: 768px) {
      section.secBuildingCarbon .pic img {
        min-width: 66.66667rem; } }

/* 系統服務 -------------------------------*/
section.secSystem .sectitle {
  width: 18.83333rem; }

section.secSystem .sectext {
  text-align: left; }
  section.secSystem .sectext ul {
    padding-left: 1.11111rem; }
    @media screen and (max-width: 768px) {
      section.secSystem .sectext ul {
        padding-left: 5vw; } }
    section.secSystem .sectext ul li {
      list-style: disc; }
      section.secSystem .sectext ul li::marker {
        color: #1dabeb; }

section.secSystem .imgbox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 3.88889rem; }
  @media screen and (max-width: 950px) {
    section.secSystem .imgbox {
      -ms-flex-wrap: wrap;
      flex-wrap: wrap; } }
  section.secSystem .imgbox div {
    width: 50%; }
    @media screen and (max-width: 950px) {
      section.secSystem .imgbox div {
        width: 70%; } }
    @media screen and (max-width: 768px) {
      section.secSystem .imgbox div {
        width: 90%; } }
  section.secSystem .imgbox img {
    -webkit-box-shadow: -0.83333rem 0.83333rem 0 0 rgba(0, 0, 0, 0.1);
    box-shadow: -0.83333rem 0.83333rem 0 0 rgba(0, 0, 0, 0.1); }
  section.secSystem .imgbox p {
    font-size: 1.33333rem;
    text-align: center;
    color: #000;
    font-weight: 400;
    margin-top: 1.66667rem; }
    @media screen and (max-width: 768px) {
      section.secSystem .imgbox p {
        font-size: 3.6vw; } }

/* ====================================================================================
  共用物件
======================================================================================*/
.bg-gray {
  background-color: #f9f9f9; }

.bg-light-blue {
  background-color: #ddebf2; }

.sectitle {
  margin: 0 auto;
  margin-bottom: 2.77778rem;
  text-align: center; }

.sectext {
  font-size: 1.33333rem;
  color: #000;
  line-height: 1.7;
  text-align: center;
  margin-bottom: 2.77778rem;
  font-weight: 400; }
  @media screen and (max-width: 768px) {
    .sectext {
      font-size: 3.6vw; } }
  .sectext font {
    font-weight: 600;
    color: #1dabeb; }

.bold-blue {
  font-weight: 600;
  color: #1dabeb; }

.ps {
  font-size: 1rem;
  line-height: 1.5;
  color: #000;
  margin-top: 2.22222rem; }
  @media screen and (max-width: 768px) {
    .ps {
      font-size: 2.93333vw; } }

.btnMore {
  font-size: 1rem;
  color: #1dabeb;
  font-weight: 500;
  letter-spacing: 0.05em;
  position: relative;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  cursor: pointer; }
  @media screen and (max-width: 768px) {
    .btnMore {
      font-size: 3.6vw; } }
  .btnMore::after {
    content: "";
    display: inline-block;
    width: 1.77778rem;
    height: 1.77778rem;
    border-radius: 50%;
    border: 1px solid #1dabeb;
    vertical-align: middle;
    margin-left: 2.22222rem;
    -webkit-transform: translateY(-0.22222rem);
    -ms-transform: translateY(-0.22222rem);
    transform: translateY(-0.22222rem);
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease; }
    @media screen and (max-width: 768px) {
      .btnMore::after {
        width: 5.5vw;
        height: 5.5vw; } }
  .btnMore::before {
    content: "";
    display: block;
    width: 2.83333rem;
    height: 0.27778rem;
    background-image: url(../images/more_ar.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center center;
    position: absolute;
    top: 27%;
    left: 3.61111rem;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease; }
    @media screen and (max-width: 768px) {
      .btnMore::before {
        left: 13vw;
        width: 6.8vw;
        height: 0.66667vw; } }
  .btnMore:hover {
    -webkit-filter: brightness(0.8);
    filter: brightness(0.8); }
    .btnMore:hover::before {
      -webkit-transform: translateX(100%);
      -ms-transform: translateX(100%);
      transform: translateX(100%);
      -webkit-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
      transition: all 0.3s ease; }

.secFixbtn {
  width: 7.72222rem;
  position: fixed;
  bottom: 8%;
  right: 1.5%;
  z-index: 10;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease; }
  @media screen and (max-width: 950px) {
    .secFixbtn {
      width: 5.55556rem; } }
  @media screen and (max-width: 768px) {
    .secFixbtn {
      width: 12.13333vw;
      bottom: 13%;
      right: 1.8%; } }
  .secFixbtn:hover {
    -webkit-transform: translateY(-8%);
    -ms-transform: translateY(-8%);
    transform: translateY(-8%);
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-filter: brightness(1.3);
    filter: brightness(1.3);
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease; }

/*# sourceMappingURL=css_min.css.map */