/* CSS Document */
.stepBox {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: horizontal;
 -webkit-box-direction: normal;
     -ms-flex-direction: row;
         flex-direction: row;
 -webkit-box-pack: start;
     -ms-flex-pack: start;
         justify-content: flex-start;
 -webkit-box-align: stretch;
     -ms-flex-align: stretch;
         align-items: stretch;
 -ms-flex-wrap: wrap;
     flex-wrap: wrap;
 margin: 80px -32px 0;
}
@media (max-width: 640px) {
 .stepBox {
  margin: 50px 0;
 }
}

.stepItem {
 width: 25%;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: horizontal;
 -webkit-box-direction: normal;
     -ms-flex-direction: row;
         flex-direction: row;
 -webkit-box-pack: center;
     -ms-flex-pack: center;
         justify-content: center;
 -webkit-box-align: start;
     -ms-flex-align: start;
         align-items: flex-start;
 padding: 0 32px;
 margin-bottom: 100px;
}
@media (max-width: 1600px) {
 .stepItem {
  width: 33.3333%;
 }
}
@media (max-width: 1040px) {
 .stepItem {
  padding: 0 20px;
  width: 50%;
  margin-bottom: 80px;
 }
}
@media (max-width: 640px) {
 .stepItem {
  width: 100%;
  padding: 15px 0 0 40px;
  margin-bottom: 50px;
 }
 .stepItem:last-child {
  margin-bottom: 0;
 }
}
.stepItem::after {
 content: "";
 display: block;
 width: 120dvw;
 height: 1px;
 background: #606e7c;
 position: absolute;
 bottom: 37px;
 left: calc(800px - 50dvw - 50px);
}
@media (max-width: 1600px) {
 .stepItem::after {
  left: -50px;
 }
}
@media (max-width: 640px) {
 .stepItem::after {
  width: 1px;
  height: calc(100% + 80px);
  left: 20px;
  bottom: auto;
  top: 0;
 }
}
.stepItem .left {
 text-align: center;
}
.stepItem .step {
 font-size: 15px;
 font-weight: 400;
 font-family: "Cardo", "Noto Sans TC", "Microsoft JhengHei", serif;
 color: #606e7c;
 letter-spacing: 0.75px;
 margin-top: 50px;
}
@media (max-width: 1040px) {
 .stepItem .step {
  margin-top: 30px;
 }
}
@media (max-width: 640px) {
 .stepItem .step {
  width: 90px;
  margin-top: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 18px;
  position: absolute;
  top: -5px;
  left: -25px;
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
 }
}
.stepItem .step::before {
 content: "";
 display: block;
 width: 10px;
 height: 10px;
 background: #606e7c;
 border-radius: 50%;
 margin: 0 auto 12px;
}
@media (max-width: 640px) {
 .stepItem .step::before {
  margin: 0;
 }
}
.stepItem .Img {
 width: 100px;
 padding: 20px;
 border-radius: 50%;
 border: 1px solid #ddd;
}
@media (max-width: 1180px) {
 .stepItem .Img {
  width: 80px;
 }
}
@media (max-width: 400px) {
 .stepItem .Img {
  width: 60px;
  padding: 12px;
 }
}
.stepItem .Img img {
 width: 100%;
 height: auto;
 display: block;
 -webkit-backface-visibility: hidden;
         backface-visibility: hidden;
}
.stepItem .Txt {
 -webkit-box-flex: 1;
     -ms-flex: 1;
         flex: 1;
 padding-left: 20px;
}
@media (max-width: 400px) {
 .stepItem .Txt {
  padding-left: 10px;
 }
}
.stepItem .Txt .title {
 padding: 5px 0;
 font-size: 20px;
 font-weight: 500;
 font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
 color: #495056;
 letter-spacing: 1px;
}
@media (max-width: 1180px) {
 .stepItem .Txt .title {
  font-size: 18px;
 }
}
@media (max-width: 400px) {
 .stepItem .Txt .title {
  font-size: 16px;
 }
}
.stepItem .Txt .text {
 font-size: 15px;
 font-weight: 400;
 font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
 color: #8B8B8B;
 letter-spacing: 0.75px;
}
@media (max-width: 400px) {
 .stepItem .Txt .text {
  font-size: 14px;
 }
}
/*# sourceMappingURL=service.css.map */