/* 引入一般字重 */
@font-face {
  font-family: 'NotoSansTC'; /* 自定義名稱 */
  src: url('../fonts/NotoSansTC-ExtraLight.ttf') format('truetype');
  font-weight: 400; /* 正常字重 */
  font-style: normal;
  font-display: swap; /* 加載策略，可避免 FOUT */
}

/* 引入粗體字重 */
@font-face {
  font-family: 'NotoSansTC2';
  src: url('../fonts/NotoSansTC-SemiBold.ttf') format('truetype');
  font-weight: 900; /* 粗體 */
  font-style: normal;
  font-display: swap;
}

.about{
  margin-top:30px;
  margin-bottom: 0px;
  background-image: url("../images/BG-1.png");
  background-repeat: no-repeat;
  background-position: 402px 220px;
}
.about_title{
  background-image: url("../images/title1.png");
  background-repeat: no-repeat;
  background-position: 180px 0px;
  height: 180px;
  margin-bottom: 30px !important;
}
.mb-5 {
  margin-bottom: 1rem !important;
}
/* 標題 */
.section-title{
  color:#007cba;
  font-family: 'NotoSansTC2';
  font-size:30pt;
}
.section-sub{
  color: #007cba;
  font-family: 'NotoSansTC';
  font-weight: 600;
  font-size: 26pt !important;
  letter-spacing: 5px;
}
.section-third{
  color: #fff !important;
  font-family: 'NotoSansTC2';
  font-weight: 900 !important;
  font-size: 20pt;
  letter-spacing: 3px;
  background-image: url('../images/subtitle1.png');
  background-repeat: no-repeat;
  text-align: center;
  line-height: 35px;
  margin-bottom: 0.5rem !important;
}
.section-thirdcontent{
  /*max-width:560px;*/
  color:#333;
  font-family: 'NotoSansTC2';
  font-weight: 900 !important;
  font-size: 16pt;
  line-height: 1.2;
}
.section-thirdcontaner{
  gap: 80px;
  display: flex;
  left: 50px;
  position: relative;
}
.section-forth{
  font-size: 30pt;
  font-weight: bold !important;
  font-family: 'NotoSansTC2';
  letter-spacing: 2px;
  margin: 0px;
  background-image: url("../images/title2.png");
  background-repeat: no-repeat;
  background-position: 200px 10px;
}
.section-forthsub{
  color:#007cba !important;
  font-size: 18pt;
  font-weight: bold !important;
  font-family: 'NotoSansTC2';
  letter-spacing: 2px;
  top: -8px;
  position: relative;
}
/* 卡片 */
.info-card{
  /*border-radius:20px;
  box-shadow:0 12px 30px rgba(0,0,0,.08);*/
}
.card{
  border: 0px;
  padding: 0px !important;
  background-color: transparent;
}
/* WMS */
.wms-wrap{
  position:relative;
  margin-top:0px;
}
.wms-icon{
  width:110px;
  height:110px;
  background:linear-gradient(135deg,#3fd4c3,#0a7bc2);
  color:#fff;
  font-size:2.2rem;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  z-index:2;
  position:relative;
  animation: float 3s ease-in-out infinite;
}
.icon01{
  background-image: url("../images/icon1.png");
  background-repeat: no-repeat;
}
.icon02{
  background-image: url("../images/icon2.png");
  background-repeat: no-repeat;
}
.icon03{
  background-image: url("../images/icon3.png");
  background-repeat: no-repeat;
}
.icon04{
  background-image: url("../images/icon4.png");
  background-repeat: no-repeat;
}
.icon05{
  background-image: url("../images/icon5.png");
  background-repeat: no-repeat;
}
.wms-linespot{
    background: transparent;
	width:150px;
	height:90px;
	padding: 0px;
}
  .col-md-1 {
    padding:0px;
  }
@keyframes float{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-6px);}
}

/* 流程線 */
.wms-line{
  position:absolute;
  top:46px;
  left:8%;
  right:8%;
  height:4px;
  background:linear-gradient(
    90deg,
    rgba(63,212,195,.3),
    rgba(10,123,194,.8),
    rgba(63,212,195,.3)
  );
  animation: flow 3s linear infinite;
}

.linebreak{
	display:none;
}

@keyframes flow{
  from{background-position:0%}
  to{background-position:200%}
}
@media (max-width: 810px) {
  .section-forth {
  font-size: 24pt;
    background-position: 0px 8px;
	background-size: 99%;
  }
  .about_title {
        background-position: 0px 30px;
		background-size: 99%;
  }
  .section-title {
	  font-size: 25pt;
	  padding-top: 25px;
	}
	.section-sub {
	line-height: 1.5;
	}
	.section-thirdcontaner {

  left: 16px;
  }
  .col-md-1 {
    width: 0.2%;
    transform: scale(0.8);
    left: -50px;
    position: relative;
  }
  .mt-3 {
	width: 110px;
  }
  .wms-linespot {  
  padding-top: 70px;
}
/* 手機隱藏流程線 */
@media(max-width:768px){
  .about {
     margin-bottom: 0px;
  }
  .about_title {
	 background-image: url("../images/title_m.png");
	 background-repeat: no-repeat;
	 background-position: 5px 30px;
	 /*background-size: 95%;*/
	 margin-bottom: 0px !important;
     height: 150px;
  }
  
  .section-title {
	 font-size: 26pt;
	 margin-bottom: 2px;
	 padding-top: 5px;
  }
  
  .section-sub {
	 font-size: 16pt !important;
	 letter-spacing: 0px;
  }
  
  .section-thirdcontaner {
	 left: 0px;
	 gap: 0px;
  }
  
  .section-forth {
	  font-size: 17pt;
	  background-image: url("../images/title_m2.png");
	  background-repeat: no-repeat;
	  background-position: 0px 8px;
	}
	.section-forthsub {
	  font-size: 12pt;
	  letter-spacing: 2px;
	  top: -4px;
	}  
	.col-6 {
	  flex: 0 0 auto;
	  width: 32%;
	  margin: 0px;
	}
	  .col-md-1 {
	  transform: scale(1);
    left: -3px;
  }
  
	.wms-linespot {
	  display:none;
	}
	.linebreak{
	  display:block !important;
	  margin: 0px;
	}
	.wms-servicemap{
	  padding-bottom:10px;
	}
	.wms-wrap {
	  background-image: url("../images/xu..png");
	  background-repeat: no-repeat;
	  background-position: 32px 45px;
	}
	.sub_text{
	  display:none;
	}
	.wms-wrap .mt-3{
	 margin-bottom: 30px !important;
     margin-top: 0px !important;
	 margin-left: 15px;
	}
	
	.wms-icon {
  width: 96px;
  height: 96px;
  }
	.icon01{
	  background-image: url("../images/icon1m.png");
	  background-repeat: no-repeat;
	}
	.icon02{
	  background-image: url("../images/icon2m.png");
	  background-repeat: no-repeat;
	}
	.icon03{
	  background-image: url("../images/icon3m.png");
	  background-repeat: no-repeat;
	}
	.icon04{
	  background-image: url("../images/icon4m.png");
	  background-repeat: no-repeat;
	}
	.icon05{
	  background-image: url("../images/icon5m.png");
	  background-repeat: no-repeat;
	}

		
}
 @media (max-width: 428px) {
    .about_title {
      background-position: 2px 30px;
	}
	.section-sub {
	line-height: 1.2;
	}
}
@media (max-width: 418px) {
  .section-forth {
    background-position: 10px 8px;
  }
  .about_title {
    background-position: 2px 30px;
  }
}

@media (max-width: 390px) {
  .wms-wrap {
    background-position: 14px 45px;
  }
  .section-forth {
    background-position: 0px 8px;
  }
  .about_title {
    background-position: 5px 30px;
  }
}  

@media (max-width: 375px) {
  .section-forth {
    background-position: 0px 8px;
  }
}