@font-face {
	font-family: NotoSansTC-Light;
	src: url(../fonts/NotoSansTC-Light.otf);
	src: url(../fonts/TaipeiSansTCBeta-Bold.otf);
	src: url(../fonts/TaipeiSansTCBeta-Regular.otf);
	src: url(../fonts/TaipeiSansTCBeta-Light.otf);
}
body {
	font-family: '微軟正黑體', 'NotoSansTC-Light', 'Noto Sans TC', sans-serif, Arial, Helvetica, Microsoft JhengHei, Apple LiGothic, 'Roboto Condensed';
	font-size: 16px;
	color: #333;
	margin: 0;
	overflow: hidden;
}
   html, body {
   	height: 100%;
   	padding: 0;
   }
   .bg_cover {
    width: 1920px;
    height: 100vh;
    background: linear-gradient(135deg, #fff8f0, #fffde7, #e0f7fa, #fff);
    background-size: 400% 400%;
    animation: smoothGradient 15s ease infinite;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  /* ✨ 漸層動畫：讓顏色柔和流動 */
  @keyframes smoothGradient {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
  
   .bg_logo_fa {
   	position: absolute;
   	width: 180px;
   	height: 180px;
   	display: block;
   	top: 250px;
   	left: 45.5%;
   	background: url("../img/u1.svg");
   	background-repeat: no-repeat;
   	background-size: 100% auto;
   }
   .bg_logo_o {
   	position: absolute;
   	width: 30px;
   	height: 30px;
   	display: block;
   	top: 95px;
   	left: 25px;
   }
#colorfulPulse {
  width: 130px;
  height: 80px;
  margin:0 auto;
	text-align: center;
}

#colorfulPulse span {
  display: inline-block;
  width: 8px;
  height:40px;
  animation-name: scale;
  -webkit-animation-name: scale;
  -moz-animation-name: scale;
  -ms-animation-name: scale;
  -o-animation-name: scale;
  animation-duration: 2.5s;
  -webkit-animation-duration: 2.5s;
  -moz-animation-duration: 2.5s;
  -ms-animation-duration: 2.5s;
  -o-animation-duration: 2.5s;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
}
span.item-1 {
  background: #b4b4b5;
}
span.item-2 {
  background: #c3c3c4;
}
span.item-3 {
  background: #d4d4d4;
}
span.item-4 {
  background: #dfdfdf;
}
span.item-5 {
  background: #e9e9e9;
}
span.item-6 {
  background: #f4f4f4;
}
span.item-7 {
  background: #ffffff;
}

.item-1 {
  animation-delay: -1s;
  -webkit-animation-delay: -1s;
  -moz-animation-delay: -1s;
  -ms-animation-delay: -1s;
  -o-animation-delay: -1s;
}

.item-2 {
  animation-delay: -0.9s;
  -webkit-animation-delay: -0.9s;
  -moz-animation-delay: -0.9s;
  -ms-animation-delay: -0.9s;
  -o-animation-delay: -0.9s;
}

.item-3 {
  animation-delay: -0.8s;
  -webkit-animation-delay: -0.8s;
  -moz-animation-delay: -0.8s;
  -ms-animation-delay: -0.8s;
  -o-animation-delay: -0.8s;
}

.item-4 {
  animation-delay: -0.7s;
  -webkit-animation-delay: -0.7s;
  -moz-animation-delay: -0.7s;
  -ms-animation-delay: -0.7s;
  -o-animation-delay: -0.7s;
}

.item-5 {
  animation-delay: -0.6s;
  -webkit-animation-delay: -0.6s;
  -moz-animation-delay: -0.6s;
  -ms-animation-delay: -0.6s;
  -o-animation-delay: -0.6s;
}

.item-6 {
  animation-delay: -0.5s;
  -webkit-animation-delay: -0.5s;
  -moz-animation-delay: -0.5s;
  -ms-animation-delay: -0.5s;
  -o-animation-delay: -0.5s;
}

.item-7 {
  animation-delay: -0.4s;
  -webkit-animation-delay: -0.4s;
  -moz-animation-delay: -0.4s;
  -ms-animation-delay: -0.4s;
  -o-animation-delay: -0.4s;
}

@-webkit-keyframes scale {
  0%, 40%, 100% {
    -moz-transform: scaleY(0.2);
    -ms-transform: scaleY(0.2);
    -o-transform: scaleY(0.2);
    -webkit-transform: scaleY(0.2);
    transform: scaleY(0.2);
  }

  20%, 60% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -o-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}
@-moz-keyframes scale {
  0%, 40%, 100% {
    -moz-transform: scaleY(0.2);
    -ms-transform: scaleY(0.2);
    -o-transform: scaleY(0.2);
    -webkit-transform: scaleY(0.2);
    transform: scaleY(0.2);
  }

  20%, 60% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -o-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}
@-ms-keyframes scale {
  0%, 40%, 100% {
    -moz-transform: scaleY(0.2);
    -ms-transform: scaleY(0.2);
    -o-transform: scaleY(0.2);
    -webkit-transform: scaleY(0.2);
    transform: scaleY(0.2);
  }

  20%, 60% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -o-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}
@keyframes scale {
  0%, 40%, 100% {
    -moz-transform: scaleY(0.2);
    -ms-transform: scaleY(0.2);
    -o-transform: scaleY(0.2);
    -webkit-transform: scaleY(0.2);
    transform: scaleY(0.2);
  }

  20%, 60% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -o-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}