@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC&display=swap');
html{
  scroll-behavior: smooth;
}
body{
	font-family: "Noto Sans TC", sans-serif;
	background-size: 50%;
	background: url("../images/bg-white.jpg");
	background-color: #fff;
	font-weight: 400;
  	font-style: normal;
	font-size:20px;
	margin:0px;
	padding:0px;
	text-align:center;
	overflow-x: hidden;
}

img{
	border:0px;
}

ul{
	list-style-type:none;
	margin:0px;
	padding:0px;
}

ul > li{
	margin:0px;
	padding:0px;
}
a{
	text-decoration:none;
}
a:hover{
	text-decoration:none;
}
:target {
    padding-top: 85px;
    margin-top: -85px;
}


.responsive_img{
	width: 100%;
}
.header{
	width: 100%;
	text-align: left;
}
.text-red{
	color:#ea3d77;
}

.mb{
	display: none;
}
.rwd-display{
	display: none;
}
@media screen and (max-width: 750px) {
	.pc{
		display: none;
	}
	.mb{
		display: inline;
	}

}
.white{
	color:#fff;
}
.orange{
	color:#ff9c00;
}
.blue{
	color:#080834;
}
.font-b{
	font-weight: bolder;
}

.font-imp{
	color:#ff9c00;
	font-size: 2em;
	font-weight: 900;
	animation-name: imp_text;
	transform-origin: top left; 
	 -webkit-animation:imp_text ease-in infinite; 
	 -moz-animation:imp_text ease-in infinite;
	 animation:imp_text ease-in infinite;
	 -webkit-animation-duration:2s;
	 -moz-animation-duration:2s;
	 animation-duration:2s;
}

@keyframes imp_text{
  0% {
	  color:#ff9c00;
	 transform: rotate(0deg);
  }
  50%{
	  color:#ff6511;
	  transform:rotate(360deg);
 }
  100% {
	  color:#ff9c00;
	 transform:rotate(0deg);
  }
}
section{
	padding: 0;
	margin: 0;
	max-width: 1024px;
	animation-duration: 1s;
	animation-name: section-animation;
	animation-direction: alternate;
}

@keyframes section-animation {
  from {
    opacity: 0;
  }

  to {
     opacity: 1;
  }
}
.float-btn{
	position: fixed;
	bottom:5%;
	right: 5%;
	width: 10%;
	z-index: 999999;
}
.float-btn-m{
	position: fixed;
	bottom:0;
	left: 0px;
	width: 100%;
	background-color: #b21818;
	z-index: 999999;
	overflow: hidden;
}
.float-btn-m a{
	color: #fff;
	font-size: 1.2rem;
	line-height: 4rem;
	text-align: center;
}
@media screen and (max-width: 740px) {
	.float-btn{
		display: none;
	}
}
@media screen and (min-width: 741px) {
	.float-btn-m{
		display: none;
	}
}

.float-text{
	position: absolute;
	top:0;
	left: 0;
	z-index: 9999;
	width: 100%;
}
.float-bg{
	width: 100%;
	animation: floatbg_animation linear 8s infinite;
	filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.5))
}
.float-bg:hover {
filter: drop-shadow(0px 0px 10px rgba(0,0,0,.5)) contrast(200%) blur(2px);
}
@keyframes floatbg_animation {
  0% {
	 transform: rotateZ(0deg);
}
  100% {
	  transform: rotateZ(360deg);
	}

}

#kv{
	position: relative;
	width: 100%;
	margin: 0 auto;
	height: 400px;
	animation-name: kv_animation;
	/*animation-timeline: view();*/
	transition-delay: 1s;
	animation-duration: 2s;
}
@keyframes kv_animation {
  0% {opacity: 0;}
  100% {opacity: 100;}
}
.kv-left{
	position: absolute;
	top: 0;
	left: 0;
	padding:0 0 10% 0;
	clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 0% 100%);
	background:#080834; 
	width:68%;
	height: 300px;
	color:#fff;
	line-height:1.2;
	z-index: 99;
}
.kv-right{
	position: absolute;
	top: 0;
	right: 0;
	clip-path: polygon(15% 0%, 100% 0%, 100% 100%, 0% 100%);
	width:44%;
	height: 450px;
	z-index: 999;
}

.kv-logo{
	margin:0 3%;
	padding-top:3%;
	width: 15%;
	max-width:150px;
	border:1px #fff soild;
	z-index:9999;
}
.logo{
	width: 100%;
}
.kv-subtitle{
	padding-top: 3%;
	font-size: 0.8em;
	font-style:italic;
	color: #fff;
	margin: 10px;
	animation-name: kvsubtitle_animation;
	/*animation-timeline: view();*/
	transition-delay: 10s;
	animation-duration: 3s;
}
@keyframes kvsubtitle_animation{
  from {
    opacity: 0;
  }

  to {
     opacity: 1;
	  
  }
}
.kv-title{
	font-size: 2.5em;
	font-style:italic;
	margin-bottom: 30px;
	
	animation-name: kvtitle_animation 2s infinite;
	/*animation-timeline: view();*/
	transition-delay: 3s;
	
}
@keyframes kvtitle_animation {
  from {
    opacity: 0;
	margin-bottom: 30px;
  }

  to {
     opacity: 1;
	 margin-bottom: 40px;
  }
}
.kv-btn-area{
	position: relative;
}
.kv-btn{
	position: absolute;
	text-decoration: none; 
	top: 0;
	left: 25%;
	width:30%;
	background: #ff9c00;
	padding: 10px 10%;
	color: #080834;
	font-weight: bold;
	border-radius: 30px 0;
	z-index: 9;
	box-shadow: 5px 5px 0px black;
	animation: kvbtn_animation 3s infinite;
}
@keyframes kvbtn_animation{
  0% {
     box-shadow: 5px 5px 0px black;
  }
  50% {
     box-shadow: 5px 5px 0px black;
	 
	 top: 0px;
  }
  55% {
 	 box-shadow: 0px 0px 0px black;
	 top: 3px;
  } 
  65% {
     box-shadow: 5px 5px 0px black;
	 
	 top: 0px;
  }
  75% {
 	 box-shadow: 0px 0px 0px black;
	 top: 3px;
  }
  85% {
	  
 	 box-shadow: 0px 0px 20px white;
  }
}
.clicker{
	position: absolute;
	top: 15px;
	right: 30%;
	width:40px;
	z-index: 99;
	animation: clicker_animation 3s infinite;
}
@keyframes clicker_animation{
  0% {
   	 right: 30%;
	 top: 15px;
  }
  50% {
	 right: 30%;
	 top: 15px;
  }
  55% {
	 right: 30%;
	 top: 20px;
  }
  65% {
	 right: 30%;
	 top: 15px;
  }
  75% {
	 right: 30%;
	 top: 20px;
  }
  85% {
	 right: 30%;
	 top: 15px;
  }
}



@media screen and (max-width: 1024px) {
	#kv{
		height: 400px;
	}
	.kv-right{
		top: 0;
		right: -15%;
		clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 0% 100%);
		width:58%;
		height: 380px;
	}
	.kv-logo{
		margin:0 3%;
		padding-top:3%;
		width: 35%;
		max-width:150px;
		border:1px #fff soild;
		z-index:9999;
	}
	.kv-subtitle{
		font-size: 1em;
	}
	.kv-title{
		font-size: 2.5em;
	}
}

@media screen and (max-width: 750px) {
	#kv{
		height: 300px;
		background-size: cover;
		background-image: url("../images/kv.jpg");
	}
	.kv-left{
		position: relative;
		width: 100%;
		clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
		background-color: rgba(8,8,52,0.9);
		height: 300px;
		padding: 0;
	}
	.kv-right{
		display: none;
	}

	.kv-logo{
		margin:0 3%;
		padding-top:3%;
		width: 25%;
		max-width:150px;
		border:1px #fff soild;
		z-index:9999;
	}
	.kv-subtitle{
		font-size: 0.7em;
	}
	.kv-title{
		font-size: 2em;
	}

}
/*@media screen and (max-width: 375px) {
	#kv{
		height: 300px;
	}
	.kv-left{
		padding: 0 3% 0 0;
		top: 0;
		left: 0;
		height: 280px;
	}
	.kv-right{
		position: absolute;
		top: 0;
		right: -30%;
		clip-path: polygon(20% 0%, 100% 0%, 100% 100%, 0% 100%);
		width:75%;
		height: 450px;
	}

	.kv-logo{
		margin:0 3%;
		padding:3% 0 0 5%;
		width: 30%;
		max-width:150px;
		border:1px #fff soild;
		z-index:9999;
	}
	.kv-subtitle{
		font-size: 0.8em;
	}
	.kv-title{
		font-size: 1.5em;
	}
	.kv-btn{
		font-size: 0.8em;
	}

}*/
.title-blue{
	color: #080834;
	font-size: 1.5em;
	font-weight: 800;
}

.title-white{
	color: #fff;
	font-size: 1.3em;
	font-weight: 800;
}
.subtitle{
	font-size: 1em;
	margin: 2% 0;
}


#challenge{
	position: relative;
	width: 100%;
	margin: 0 auto;
	text-align: center;	
	animation-name: challenge_animation;
	animation-timeline: view(20%); 
	animation-range: 0vh 100vh;
	transition-delay: 1s;
	animation-duration: 2s;
	animation-fill-mode:forwards;
}
@keyframes challenge_animation{
  0% {
	 opacity: 0;
	 top: 20px;
	}
  100% {
	opacity: 1;
	top: 0px;
	}
}

.challenge-area{
	padding-top: 5%;
}

.challenge-list{
	width: 90%;
	max-width: 1000px;
	margin: 3% auto;
	text-align: center;
}
.challenge-list li{
	display: inline-block;
	padding: 2%;
	margin: 1%;
	width: 25%;
	color: #080834;
	border: 2px #e2e2e2 solid;
	border-radius: 30px 0 30px 30px;
	background-color: #fff;
	text-align: center;
	opacity:0; 
	animation-timeline: scroll(); 
	animation-range: 0vh 50vh;
	animation-name: cli_animation;
	 -webkit-animation:cli_animation ease-in;  /* 呼叫命名為 fadeIn 的 keyframe, 使用 ease-in 動畫效果並且只重複執行一次 */
	 -moz-animation:cli_animation ease-in;
	 animation:cli_animation ease-in;

	 -webkit-animation-fill-mode:forwards;  /* 確保在動畫完成後，我們會保持在最後的 keyframe 值 (opacity: 1)*/
	 -moz-animation-fill-mode:forwards;
	 animation-fill-mode:forwards;
	
	 -webkit-animation-duration:1s;
	 -moz-animation-duration:1s;
	 animation-duration:1s;
}
@keyframes cli_animation{
  0% {
	  opacity: 0;
  }
  100% {
	  opacity: 1;
  }
}
.fade-in.one {
	-webkit-animation-delay: 1s;
	-moz-animation-delay: 1s;
	animation-delay: 1s;
}

.fade-in.two {
	-webkit-animation-delay:2s;
	-moz-animation-delay:2s;
	animation-delay: 2s;
}

.fade-in.three {
	-webkit-animation-delay: 3s;
	-moz-animation-delay: 3s;
	animation-delay: 3s;
}

.challenge-img{
	width: 90%;
	max-width: 120px;
	margin: 0 auto;
}
.challenge-title{
	font-size: 1.2em;
	font-weight: 900;
}
.challenge-subtitle{
	font-size: 1em;
	text-align: left;
	margin: 20px 0;
}
#target{
	position: relative;
	width: 100%;
	margin: 0 auto;
	text-align: center;
}
.target-area{
	padding: 5% 0;
	background: url("../images/bg-blue.jpg")no-repeat;
	background-position: bottom;
	background-size:cover;
	opacity: 0;
	animation-name: target_animation;
	animation-timeline: scroll(); 
	animation-range: 0vh 100vh;
	transition-delay: 1s;
	animation-duration: 2s;
	animation-fill-mode:forwards;
}
@keyframes target_animation{
  0% {opacity: 0;}
  100% {opacity: 100;}
}

.target-list{
	width: 90%;
	max-width: 1000px;
	margin: 3% auto;
}
.target-list li{
	display: inline-block;
	margin: 1%;
	width: 25%;
	color: #080834;
	vertical-align: top;
	opacity: 0;
	padding-top: 2%;
	animation-name: targetli_animation;
	 -webkit-animation:targetli_animation ease-in; 
	 -moz-animation:targetli_animation ease-in;
	 animation:targetli_animation ease-in;

	 -webkit-animation-fill-mode:forwards; 
	 -moz-animation-fill-mode:forwards;
	 animation-fill-mode:forwards;
	
	 -webkit-animation-duration:1s;
	 -moz-animation-duration:1s;
	 animation-duration:1s;
}
@keyframes targetli_animation{
  0% {
	  opacity: 0;
	  padding-top: 2%;
	  transform: rotatey(180deg);
  } 
  50% {
	  opacity: 0.5;
	  padding-top: 2%;
	  transform: rotatey(90deg);
  }
  100% {
	  opacity: 1;
	  padding-top: 0;
	  transform: rotatey(deg);
  }
}
.target-in.one {
	animation-timeline: scroll(); 
	animation-range: 0vh 100vh;
	-webkit-animation-delay: 1s;
	-moz-animation-delay: 1s;
	animation-delay: 1s;
}

.target-in.two {
	animation-timeline: scroll(); 
	animation-range: 0vh 100vh;
	-webkit-animation-delay:1.5s;
	-moz-animation-delay:1.5s;
	animation-delay: 1.5s;
}

.target-in.three {
	animation-timeline: scroll(); 
	animation-range: 0vh 100vh;
	-webkit-animation-delay: 2s;
	-moz-animation-delay: 2s;
	animation-delay: 2s;
}


.target-title{
	font-size: 1.2em;
	font-weight: 900;
	width: 100%;
	color: #080834;
	background-color: #ff9c00;
	padding: 5% 0;
	border-radius: 20px 20px 0 0;
}
.target-subtitle{
	font-size: 1em;
	font-weight: 700;
	background-color: #fff;
	padding: 5% 0 10% 0;
}

.target-img{
	width: 100%;
	text-align: right;
}
.target-img img{
	width: 27%;
	max-width: 100px;
}
.target-end{
	width: 60%;
	background-color: #ff9c00;
	border: 2px #fff solid;
	border-radius: 3em;
	margin: 0 auto;
	font-weight: 800;
	font-size: 1.2em; 
	padding: 1.5% 0;
	color: #fff; 
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
	/*
	animation-name: targetend_animation;
	 -webkit-animation:targetend_animation ease-in infinite;  
	 -moz-animation:targetend_animation ease-in infinite;
	 animation:targetend_animation ease-in infinite;

	 -webkit-animation-fill-mode:forwards;  
	 -moz-animation-fill-mode:forwards;
	 animation-fill-mode:forwards;
	
	 -webkit-animation-duration:1s;
	 -moz-animation-duration:1s;
	 animation-duration:1s;
	
	-webkit-animation-delay:1.5s;
	-moz-animation-delay:1.5s;
	animation-delay: 1.5s;
	*/
}
.target-end::after{
  content: '';
  position: absolute;
  inset: -20%;
  background: linear-gradient(45deg, rgba(255,255,255,0) 40%, rgba(255, 255, 255, 0.7), rgba(255,255,255,0) 60%);
  animation: targetend_animation 2s infinite;
  transform: translateX(-100%);
}
@keyframes targetend_animation{
  to {
    transform: translateX(100%);
  }
}
.target-end .blue{
 animation: targetblue_animation 2s infinite;
}
@keyframes targetblue_animation{
  0%{
		font-size: 1.5rem;
	}
	
  50%{
		font-size: 1.5rem;
	}
  100%{
		font-size: 1.5rem;
	}
}



#brand{
	width: 100%;
	margin: 0 auto;
	text-align: center;
}
.brand-area{
	padding: 5% 0;
	background: #ff9c00;
}
.brand-btn{
	position: relative;
	/*background:url("../images/icon-loud.png") no-repeat;
	background-position: 10% 8%;
	background-size: 14%;*/
	width: 60%;
	margin: 0 auto;
	vertical-align: middle;
}
.brand-btn-text{
	position: relative;
	/*background:url("../images/icon-loud.png") no-repeat;
	background-position: 10% 8%;
	background-size: 14%;*/
	background-color: #080834;
	width: 100%;
	border-radius: 4em;
	color: #fff;
	font-weight: 800;
	line-height: 2em;
	padding:4% 3% 3% 8%;
    flex-shrink: 0;
    overflow: hidden;
}
.brand-btn-text::after{
  content: '';
  position: absolute;
  inset: -20%;
  background: linear-gradient(45deg, rgba(255,255,255,0) 40%, rgba(255, 255, 255, 0.7), rgba(255,255,255,0) 60%);
  animation: brand_animation 2s infinite;
  transform: translateX(-100%);
}
@keyframes brand_animation{
  to {
    transform: translateX(100%);
  }
}
.brand-btn img{
	position: absolute;
	top: -10px;
	left: 5%;
	width: 20%;
	max-width: 120px;
	z-index: 9999;
	animation: brandimg_animation 2s infinite;
}
@keyframes brandimg_animation{
  0% {
    transform: rotateZ(0deg);
	  top: -10px
  } 
  10% {
    transform: rotateZ(-10deg);
	  top: 10px
  }
  20% {
    transform: rotateZ(-45deg);
	  top: -10px
  }
  30% {
    transform: rotateZ(-10deg);
	  top: 10px
  }
  40% {
    transform: rotateZ(-45deg);
	  top: -10px
  }
  50% {
    transform: rotateZ(-10deg);
	  top: 10px
  }
  60% {
    transform: rotateZ(-45deg);
	  top: -10px
  }
  70% {
    transform: rotateZ(-10deg);
	  top: 10px
  }
  80% {
    transform: rotateZ(-45deg);
	  top: -10px
  }
  90% {
    transform: rotateZ(-10deg);
	  top: 0px
  }
  100% {
    transform: rotateZ(0deg);
	  top: -10px
  }
}
.brand-btn-text .font-price{
	color: #fff;
}
@keyframes brandprice_animation{
  0% {
    color: #ffffff;
  } 
  50% {
    color: #ffe615;
  }
  100% {
    color: #ffffff;
  } 
}

.brand-list{
	width: 75%;
	max-width: 1000px;
	margin: 3% auto;
}
.brand-list li{
	position: relative;
	margin: 3% 0;
	width: 100%;
	color: #fff;
	background-color: #fff;
	text-align: left;
	vertical-align: top;
}

.brand-list li:nth-child(1){
	background: url("../images/brand1.jpg") no-repeat;
	background-position: bottom right;
	background-size: contain;
	background-color: #fff;
	opacity:0; 
	animation-name: brandli_animation1;
	
	 -webkit-animation:brandli_animation1 ease-in; 
	 -moz-animation:brandli_animation1 ease-in;
	 animation:brandli_animation1 ease-in;

	 -webkit-animation-fill-mode:forwards;
	 -moz-animation-fill-mode:forwards;
	 animation-fill-mode:forwards;
	
	 -webkit-animation-duration:1s;
	 -moz-animation-duration:1s;
	 animation-duration:1s;
	animation-timeline: scroll(); 
}

.brand-list li:nth-child(2){
	background: url("../images/brand2.jpg") no-repeat;
	background-position: bottom left;
	background-size: contain;
	background-color: #fff;
	opacity:0; 
	animation-name: brandli_animation2;
	 -webkit-animation:brandli_animation2 ease-in; 
	 -moz-animation:brandli_animation2 ease-in;
	 animation:brandli_animation2 ease-in;

	 -webkit-animation-fill-mode:forwards; 
	 -moz-animation-fill-mode:forwards;
	 animation-fill-mode:forwards;
	
	 -webkit-animation-duration:1s;
	 -moz-animation-duration:1s;
	 animation-duration:1s;
	animation-timeline: scroll(); 

}

.brand-list li:nth-child(3){
	background: url("../images/brand3.jpg") no-repeat;
	background-position: bottom right;
	background-size: contain;
	background-color: #fff;
	opacity:0; 
	
	animation-name: brandli_animation3;
	 -webkit-animation:brandli_animation3 ease-in;  
	 -moz-animation:brandli_animation3 ease-in;
	 animation:brandli_animation3 ease-in;

	 -webkit-animation-fill-mode:forwards; 
	 -moz-animation-fill-mode:forwards;
	 animation-fill-mode:forwards;
	
	 -webkit-animation-duration:1s;
	 -moz-animation-duration:1s;
	 animation-duration:1s;
	animation-timeline: scroll(); 
}

.brand-list li:nth-child(4){
	background: url("../images/brand4.jpg") no-repeat;
	background-position: bottom left;
	background-size: contain;
	background-color: #fff;
	opacity:0; 
	
	animation-name: brandli_animation4;
	 -webkit-animation:brandli_animation4 ease-in;  
	 -moz-animation:brandli_animation4 ease-in;
	 animation:brandli_animation4 ease-in;

	 -webkit-animation-fill-mode:forwards; 
	 -moz-animation-fill-mode:forwards;
	 animation-fill-mode:forwards;
	
	 -webkit-animation-duration:1s;
	 -moz-animation-duration:1s;
	 animation-duration:1s;
	animation-timeline: scroll();
}

@keyframes brandli_animation1{
  0% {
	  opacity: 0.5;
	  margin-left: -15%;
  }
  30% {
	  opacity: 1;
	  margin-left: 0px;
  }
  60% {
	  opacity: 1;
	  margin-left: 0px;
  }
}
@keyframes brandli_animation2{
  0% {
	  opacity: 0.5;
	  margin-left: 15%;
  }
  40% {
	  opacity: 1;
	  margin-left: 0px;
  }
  60% {
	  opacity: 1;
	  margin-left: 0px;
  }
}
@keyframes brandli_animation3{
  0% {
	  opacity: 0.5;
	  margin-left: -15%;
  }
  50% {
	  opacity: 1;
	  margin-left: 0px;
  }
  60% {
	  opacity: 1;
	  margin-left: 0px;
  }
}
@keyframes brandli_animation4{
  0% {
	  opacity: 0.5;
	  margin-left: 15%;
  }
  60% {
	  opacity: 1;
	  margin-left: 0px;
  }
  60% {
	  opacity: 1;
	  margin-left: 0px;
  }
}

.brandfade-in.one { 
	animation-range: 0vh 30vh;
	-webkit-animation-delay: 1s;
	-moz-animation-delay: 1s;
	animation-delay: 1s;
}

.brandfade-in.two {
	animation-range: 30vh 50vh;
	-webkit-animation-delay:1.5s;
	-moz-animation-delay:1.5s;
	animation-delay: 1.5s;
}

.brandfade-in.three { 
	animation-range: 50vh 80vh;
	-webkit-animation-delay: 2s;
	-moz-animation-delay: 2s;
	animation-delay: 2s;
}
.brandfade-in.four {
	animation-range: 80vh 100vh;
	-webkit-animation-delay: 2.5s;
	-moz-animation-delay: 2.5s;
	animation-delay: 2.5s;
}

.brand-list-left{
	width: 45%;
	padding: 2.5%;
	vertical-align: top;
	background-color: #fff;
}

.brand-list-right{
	margin-left: 50%;
	width: 45%;
	padding: 2.5%;
	vertical-align: top;
	background-color: #fff;
}

.brand-list-img{
	display: none;
}
.brand-list-title1{
	font-size: 0.9em;
	color: #ff9c00;
}
.brand-list-title2{
	font-size: 1.4em;
	line-height: 2em;
	color: #080834;
	font-weight: 900;
}
.brand-list-text1{
	font-size: 1em;
	line-height: 1.5em;
	color: #080834;
	font-weight: 700;
}
.brand-list-text2{
	font-size: 0.9em;
	line-height: 1.5em;
	color: #fff;
	background-color: #080834;
	padding: 2% 3%;
	margin: 1% 0;
}
.brand-list-text3{
	font-size: 0.9em;
	line-height: 1.5em;
	color: #080834;
}


.font-price{
	font-size: 3em;
	vertical-align: sub;
}
.brand-small{
	font-size: 0.8em;
	line-height: 1.5em;
	margin: 2% 0;
}


#service{
	position: relative;
	width: 100%;
	background: url("../images/bg-blue2.jpg");
	background-color: #080834;
	margin: 0 auto;
	text-align: center;
	padding: 5% 0;
}
.service-area{
	position: relative;
	margin: 0 auto;
	background-color: #ff9c00;
	width: 50%;
	height: 50%;
	border-radius: 80%; 
	padding: 10% 0;
	vertical-align: top;
}
.service-people{
	position: absolute;
	top: 1.3%;
	right: 1.2%;
	width: 100%;
	height: 100%;
	border-radius: 50%; 
	clip-path: circle(50% at 50% 50%);
	z-index: 999;
	opacity: 0;
	animation: servicepeople_animation 1s;
	animation-fill-mode:forwards;
	overflow: hidden;
}
@keyframes servicepeople_animation{
  0% {
    opacity: 0;
	right: 0;
  }
  100% {
	opacity: 1;
	right: 1.2%;
  }
}
.service-title{
	color: #fff;
	font-size: 1.5em;
	line-height: 1em;
	font-weight: 600;
	margin-bottom: 3%;
	opacity: 0;
	animation: service_animation 2s;
	animation-fill-mode:forwards;
}
@keyframes service_animation{
  0% {
   	margin-bottom: 3%;
  }
  100% {
	margin-bottom: 6%;
	 opacity: 1;
  }
}

.service-title2{
	font-size: 0.8em;
	line-height: 1em;
}
.service-subtitle{
	font-size: 0.9em;
	line-height: 1.5em;
	color: #fff;
	background-color: #080834;
	padding: 2% 8% 2% 2%;
	margin-left: 5%;
	width: 70%;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
	opacity: 0;
	animation: servicesub_animation 2s;
	animation-fill-mode:forwards;
	animation-delay: 1s;
}
.service-subtitle::after{
  content: '';
  position: absolute;
  inset: -20%;
  background: linear-gradient(45deg, rgba(255,255,255,0) 40%, rgba(255, 255, 255, 0.7), rgba(255,255,255,0) 60%);
  animation: servicesub2_animation 2s infinite;
  transform: translateX(-100%);
}
@keyframes servicesub_animation{
  0% {
   	margin-left: 0%;
  }
  100% {
	opacity: 1;
	margin-left: 5%;
  }
}

@keyframes servicesub2_animation{
  to {
    transform: translateX(100%);
  }
}
.service-list{
	text-align: left;
	font-size: 0.8em;
	line-height: 1.5em;
	margin-left: 13%;
	color: #fff;
	width: 50%;
}

.service-list li{
	margin: 3% 0;  
	list-style-image: url("../images/icon-check.png");
	opacity: 0;
	
	animation-name: service_animation;
	 -webkit-animation:service_animation ease-in; 
	 -moz-animation:service_animation ease-in;
	 animation:service_animation ease-in;

	 -webkit-animation-fill-mode:forwards; 
	 -moz-animation-fill-mode:forwards;
	 animation-fill-mode:forwards;
	
	 -webkit-animation-duration:1s;
	 -moz-animation-duration:1s;
	 animation-duration:1s;
}
@keyframes service_animation{
  0% {
	  opacity: 0;
	  margin-left: -20px;
  }
  50% {
	  opacity: 1;
	  margin-left: 0px;
  }
	100% {
	  opacity: 1;
	  margin-left: 0px;
  }
}
.sitem.one{
	animation-timeline: scroll();
	-webkit-animation-delay: 0.4s;
	-moz-animation-delay: 0.4s;
	animation-delay: 0.4s;
}
.sitem.two{
	animation-timeline: scroll();
	-webkit-animation-delay:0.8s;
	-moz-animation-delay:0.8s;
	animation-delay: 0.8s;

}

.sitem.three{
	animation-timeline: scroll(); 
	-webkit-animation-delay: 1.2s;
	-moz-animation-delay: 1.2s;
	animation-delay: 1.2s;
}

.service-list-title{
	background-color: #fff;
	color: #ff9c00;
	font-weight: 600;
	padding: 0.5% 3%;
}
.service-img{
	width: 20%;
	max-width: 17px;
}
.service-end{
	position: relative;
	width: 70%;
	border: 1px #fff solid;
	border-radius: 30px;
	padding: 2% 5% 8% 5%;
	margin: 3% auto 0;
	color: #fff;
	
}
.service-end-title{
	color: #ff9c00;
	font-size: 1.5em;
	line-height: 2em;
	font-weight: 800;
	animation: servicetitle_animation ease-in 2s;
}
@keyframes servicetitle_animation{
  0% {
	 opacity: 0;
   	 padding-top: 20px;
  } 
  100% {
	 opacity: 1;
     padding-top: 0px;
  } 
}
.service-end-text{
	color: #fff;
	font-size: 1em;
	line-height: 2em;
	font-weight: bolder;
}
.service-end-btn{
	position: relative;
	margin-bottom: 5%;
	margin-top: 5%;
	cursor: pointer;
}
.service-btn{
	position: absolute;
	text-align: center;
	text-decoration: none; 
	font-size: 1.2em;
	top: 0;
	left: 0;
	width:50%;
	background: #ff9c00;
	padding: 12px 10%;
	color: #080834;
	font-weight: bold;
	border-radius: 30px 0;
	z-index: 9;
	box-shadow: 5px 5px 0px black;
	cursor: pointer;
	animation: sbtn_animation 3s infinite;
}
@keyframes sbtn_animation{
  0% {
     box-shadow: 5px 5px 0px black;
  }
  50% {
     box-shadow: 5px 5px 0px black;
	 
	 top: 0px;
  }
  55% {
 	 box-shadow: 0px 0px 0px black;
	 top: 3px;
  } 
  65% {
     box-shadow: 5px 5px 0px black;
	 
	 top: 0px;
  }
  75% {
 	 box-shadow: 0px 0px 0px black;
	 top: 3px;
  }
  85% {
	  
 	 box-shadow: 0px 0px 20px white;
  }
}
.service-clicker{
	position: absolute;
	top: 15px;
	right: 55%;
	width:40px;
	z-index: 99;
	animation: sclicker_animation 3s infinite;
}
@keyframes sclicker_animation{
  0% {
	 top: 15px;
  }
  50% {
	 top: 15px;
  }
  55% {
	 top: 20px;
  }
  65% {
	 top: 15px;
  }
  75% {
	 top: 20px;
  }
  85% {
	 top: 15px;
  }
}


.service-form{
	width: 100%;
	padding: 0 25%;
	text-align: left;
	font-size: 0.9em;
	line-height: 1.5em;
}
.service-form input{
	width: 50%;
	height: 2.5em;
	border: 0;
}
.service-form select{
	width: 50%;
	height: 2.5em;
	border: 0;
}
footer{
	width: 100%;
	background-color: #000;
	color: #fff;
	font-size: 0.8rem;
	line-height: 1rem;
	text-align: center;
	padding: 1.5% 0;
}

footer .footer_box{
	width: 100%;
	margin: 0 auto;
}

@media screen and (max-width: 750px) {
	#challenge{
		position: relative;
		width: 100%;
		margin: 0 auto;
		text-align: center;
	}
	.challenge-area{
		padding: 5%;
	}
	
	.kv-btn{
		left: 20%;
		width:45%;
		white-space:nowrap;
	}
	.clicker{
		top: 15px;
		right: 20%;
		animation: clicker_animation_m 3s infinite;
	}
	@keyframes clicker_animation_m{
	  0% {
		 right: 20%;
		 top: 15px;
	  }
	  50% {
		 right: 20%;
		 top: 15px;
	  }
	  55% {
		 right: 20%;
		 top: 20px;
	  }
	  65% {
		 right: 20%;
		 top: 15px;
	  }
	  75% {
		 right: 20%;
		 top: 20px;
	  }
	  85% {
		 right: 20%;
		 top: 15px;
	  }
	}

	.challenge-list{
		width: 90%;
		margin: 3% auto;
		text-align: center;
	}
	.challenge-list li:nth-child(1){
		display: block;
		background-color: #fff;
		padding: 3% 4%;
		margin: 3% 0;
		width: 92%;
		color: #080834;
		border: 2px #e2e2e2 solid;
		border-radius: 30px 0 30px 30px;
	}
	.challenge-list li:nth-child(2){
		display: block;
		background-color: #fff;
		padding: 3% 4%;
		margin: 3% 0;
		width: 92%;
		color: #080834;
		border: 2px #e2e2e2 solid;
		border-radius: 30px 0 30px 30px;
	}
	.challenge-list li:nth-child(3){
		display: block;
		background-color: #fff;
		padding: 3% 4%;
		margin: 3% 0;
		width: 92%;
		color: #080834;
		border: 2px #e2e2e2 solid;
		border-radius: 30px 0 30px 30px;
	}

	.challenge-img{
		width: 90%;
		max-width: 120px;
		margin: 0 auto;
	}
	.challenge-title{
		font-size: 1.2em;
		font-weight: 900;
	}
	.challenge-subtitle{
		font-size: 1em;
		text-align: center;
		margin: 20px 0;
	}
	#target{
		position: relative;
		width: 100%;
		margin: 0 auto;
		text-align: center;
	}
	.target-area{
		padding: 5% 0;
		background: url("../images/bg-blue.jpg")no-repeat;
		background-position: bottom;
		background-size:cover;
	}

	.target-list{
		width: 90%;
		max-width: 1000px;
		margin: 3% auto;
	}
	.target-list li:nth-child(1){
		display: inline-block;
		margin: 1%;
		width: 70%;
	}
	.target-list li:nth-child(2){
		display: inline-block;
		margin: 1%;
		width: 70%;
	}
	.target-list li:nth-child(3){
		display: inline-block;
		margin: 1%;
		width: 70%;
	}

	.target-title{
		font-size: 1.2em;
		font-weight: 900;
		width: 100%;
		color: #080834;
		background-color: #ff9c00;
		padding: 5% 0;
		border-radius: 20px 20px 0 0;
	}
	.target-subtitle{
		font-size: 1em;
		font-weight: 700;
		background-color: #fff;
		padding: 5% 0 10% 0;
	}
	.target-img{
		width: 100%;
		text-align: right;
	}
	.target-img img{
		width: 27%;
		max-width: 100px;
	}
	.target-end{
		width: 90%;
		background-color: #ff9c00;
		border: 2px #fff solid;
		border-radius: 3em;
		margin: 0 auto;
		font-weight: 800;
		font-size: 1.2em; 
		line-height: 1em; 
		padding:5% 0;
		color: #fff;
	}
	.rwd-display{
		display: block;
	}
	.float-btn{
		position: fixed;
		bottom:10%;
		right: 10%;
		width: 20%;
		z-index: 999999;
	}

	#brand{
		width: 100%;
		margin: 0 auto;
		text-align: center;
	}
	.brand-area{
		padding: 5% 0;
		background: #ff9c00;
	}
	.brand-btn{
		position: relative;
		width: 90%;
		margin: 2% auto;
	}
	.brand-btn-text{
		position: relative;
		background-color: #080834;
		width: 100%;
		border-radius: 3em;
		color: #fff;
		font-weight: 800;
		line-height: 2em;
		padding: 2% 0% 2% 6% ;
		flex-shrink: 0;
		overflow: hidden;
	}
	.brand-btn img{
		position: absolute;
		top: 6px;
		left: 2%;
		width: 15%;
		max-width: 120px;
	}
	.brand-list{
		width: 90%;
		margin: 3% auto;
	}
	.brand-list li:nth-child(1), li:nth-child(2), li:nth-child(3), li:nth-child(4){
		width: 100%;
		background:none;
		padding: 0;
	}
	.brand-list-left{
		width: 90%;
		padding: 2.5% 5%;
		vertical-align: top;
		background-color: #fff;
		margin-top: -10px;
	}
	.brand-list-right{
		width: 90%;
		padding: 2.5% 5%;
		margin: 0;
		vertical-align: top;
		background-color: #fff;
		margin-top: -10px;
	}
	.brand-list-img{
		display: block;
		width: 100%;
	}
	
	
	.brand-list-title1{
		font-size: 0.9em;
		color: #ff9c00;
	}
	.brand-list-title2{
		font-size: 1.4em;
		line-height: 2em;
		color: #080834;
		font-weight: 900;
	}
	.brand-list-text1{
		font-size: 1em;
		line-height: 1.5em;
		color: #080834;
		font-weight: 700;
	}
	.brand-list-text2{
		font-size: 0.9em;
		line-height: 1.5em;
		color: #fff;
		background-color: #080834;
		padding: 2% 3%;
		margin: 1% 0;
	}
	.brand-list-text3{
		font-size: 0.9em;
		line-height: 1.5em;
		color: #080834;
	}
	@keyframes brandli_animation1{
	  0% {
		  opacity: 0.5;
		  margin-left: -15%;
	  }
	  50% {
		  opacity: 1;
		  margin-left: 0px;
	  }
	  100% {
		  opacity: 1;
		  margin-left: 0px;
	  }
	}
	@keyframes brandli_animation2{
	  0% {
		  opacity: 0.5;
		  margin-left: 15%;
	  }
	  60% {
		  opacity: 1;
		  margin-left: 0px;
	  }
	  100% {
		  opacity: 1;
		  margin-left: 0px;
	  }
	}
	@keyframes brandli_animation3{
	  0% {
		  opacity: 0.5;
		  margin-left: -15%;
	  }
	  70% {
		  opacity: 1;
		  margin-left: 0px;
	  }
	  100% {
		  opacity: 1;
		  margin-left: 0px;
	  }
	}
	@keyframes brandli_animation4{
	  0% {
		  opacity: 0.5;
		  margin-left: 15%;
	  }
	  80% {
		  opacity: 1;
		  margin-left: 0px;
	  }
	  100% {
		  opacity: 1;
		  margin-left: 0px;
	  }
	}


	.font-price{
		font-size: 3em;
		vertical-align: sub;
	}
	.brand-small{
		font-size: 0.8em;
		line-height: 1.5em;
		margin: 2% 0;
	}


	#service{
		position: relative;
		width: 100%;
		background: url("../images/bg-blue2.jpg");
		background-color: #080834;
		margin: 0 auto;
		text-align: center;
		padding: 5% 0;
	}
	.service-area{
		position: relative;
		margin: 0 auto;
		background-color: #ff9c00;
		width: 80%;
		height: 100%;
		border-radius: 100%; 
		padding: 12% 0;
		vertical-align: top;
	}
	.service-people{
		position: absolute;
		top: 0%;
		right: -0.5%;
		width: 100%;
		height: 100%;
		clip-path: circle(50% at 50% 50%);
	}
	.service-title{
		color: #fff;
		font-size: 1.5em;
		line-height: 1em;
		font-weight: 600;
		margin-bottom: 5%;
		margin-top: -10px;
	}
	.service-title2{
		font-size: 0.8em;
		line-height: 1em;
	}
	.service-subtitle{
		font-size: 0.9em;
		line-height: 1.5em;
		color: #fff;
		background-color: #080834;
		padding: 2% 8% 2% 2%;
		margin:-10px 5% 0 0;
		width: 70%;
	}
	@keyframes servicesub_animation{
	  0% {
		margin-left: -5%;
	  }
	  100% {
		opacity: 1;
		margin-left: 0%;
	  }
	}
	.service-list{
		text-align: left;
		font-size: 0.8em;
		line-height: 1.5em;
		margin-left: 13%;
		color: #fff;
		width: 60%;
	}

	.service-list li{
		margin: 2% 0;  
		list-style-image: url("../images/icon-check.png");
	}
	.service-list-title{
		background-color: #fff;
		color: #ff9c00;
		font-weight: 600;
		padding: 0.5% 3%;
	}
	.service-img{
		width: 20%;
		max-width: 17px;
	}
	.service-end{
		position: relative;
		width: 70%;
		border: 1px #fff solid;
		border-radius: 30px;
		padding: 2% 0 8%;
		margin: 3% auto 0;
		color: #fff;

	}
	.service-end-title{
		color: #ff9c00;
		font-size: 1.5em;
		line-height: 2em;
		font-weight: 800;
	}
	.service-end-text{
		color: #fff;
		font-size: 1em;
		line-height: 2em;
		font-weight: bolder;
	}
	.service-end-btn{
		width: 90% !important;
        padding: 20px 0 40px 0 !important;
        box-sizing: border-box !important;
	}
	.service-btn{
		width:78%!important;
		font-size: 0.9em;
		white-space:nowrap;
	}
	@keyframes servicebtn_animation{
	  0% {
		 left: 13%;
	  } 
	  70% {
		 left: 14%;
	  }
	  80% {
		 left: 13%;
	  } 
	  90%{
		 left: 14%;
	  }
	  100%{
		 left: 13%;
	  }
	}
	.arrow {
		clip-path: polygon(0 0, 0% 100%, 50% 50%);
		background: #080834;
		width: 30px;
	}
	.service-form{
		width: 85%;
		padding: 0 0 0 20%;
		text-align: left;
		font-size: 0.9em;
		line-height: 1em;
	}
	.service-form input{
		width: 70%;
		height: 2.5em;
		border: 0;
	}
	.service-form select{
		width: 70%;
		height: 2.5em;
		border: 0;
	}
	/* 2. 優化錯誤訊息佔用的空間 */
	.service-form .field-error {
		width: 70%;
	}

	/* 3. 如果有填寫提示(field-tip)，也縮減它的間距 */
	.service-form .field-tip {
		width: 70%;
	}
	
	.service-clicker{
		right: 25%;
		top: 25px;
		animation: sclicker_animation_m 3s infinite;
	}
	@keyframes sclicker_animation_m{
	  0% {
		 right: 25%;
		 top: 25px;
	  }
	  50% {
		 right: 25%;
		 top: 25px;
	  }
	  55% {
		 right: 25%;
		 top: 30px;
	  }
	  65% {
		 right: 25%;
		 top: 25px;
	  }
	  75% {
		 right: 25%;
		 top: 30px;
	  }
	  85% {
		 right: 25%;
		 top: 25px;
	  }
	}
	.service-form label {
        margin-bottom: 18px !important;
    }
	.service-form input, 
    .service-form select {
        box-sizing: border-box !important;
        padding: 0 10px !important;
		margin-top: 10px !important;
    }


}

@media screen and (max-width: 430px) {
	#brand{
		width: 100%;
		text-align: center;
		background: #ff9c00;
	}
	.brand-area{
		width: 90%;
		margin: 0 auto;
	}
	.brand-btn{
		position: relative;
		width: 90%;
		margin: 0 auto;
	}
	.brand-btn-text{
		position: relative;
		background-color: #080834;
		width: 100%;
		border-radius: 3em;
		color: #fff;
		font-weight: 800;
		line-height: 2em;
		padding: 2% 0% 2% 6% ;
		flex-shrink: 0;
		overflow: hidden;
	}
	.brand-btn img{
		position: absolute;
		top: -7%;
		left: 5%;
		width: 20%;
		max-width: 120px;
	}
	.brand-small{
		margin-bottom: 10%;
	}
	#service{
		
	}
	.service-area{
		position: relative;
		margin: 0 auto;
		background-color: #ff9c00;
		width: 105%;
		height: 100%;
		border-radius: 100%; 
		padding: 20% 0;
		margin-left: -3%;
		vertical-align: top;
	}
	.service-people{
		position: absolute;
		top: 0;
		right: -1.3%;
		width: 100%;
		height: 100%;
		clip-path: circle(50% at 50% 50%);
	}
	@keyframes servicepeople_animation{
	  0% {
		opacity: 0;
		right:-1%;
	  }
	  100% {
		opacity: 1;
		right: -1.3%;
	  }
	}
	.service-title{
		color: #fff;
		font-size: 1.3em;
		line-height: 1.3em;
		font-weight: 600;
		margin-bottom: 5%;
		margin-top: -20px;
	}
	.service-title2{
		font-size: 0.8em;
		line-height: 0.8em;
	}
	.service-subtitle{
		font-size: 0.9em;
		line-height: 1.5em;
		color: #fff;
		background-color: #080834;
		padding: 2% 4% 2% 6%;
		margin:-14px 5% 0 0;
		width: 70%;
	}
	.service-list{
		text-align: left;
		font-size: 0.8em;
		line-height: 1.5em;
		margin-left: 14%;
		color: #fff;
		width: 60%;
		margin-top: 2%;
	}

	.service-list li{
		margin: 2% 0;  
		list-style-image: url("../images/icon-check.png");
	}
	.service-list-title{
		background-color: #fff;
		color: #ff9c00;
		font-weight: 600;
		padding: 0.5% 3%;
	}
	.service-img{
		width: 20%;
		max-width: 17px;
	}
	.service-end{
		position: relative;
		width: 84%;
		border: 1px #fff solid;
		border-radius: 30px;
		padding: 3% 3% 8% 3% ;
		margin: 3% auto ;
		color: #fff;

	}
	.service-end-title{
		color: #ff9c00;
		font-size: 1.2em;
		line-height: 1.5em;
		font-weight: 800;
	}
	.service-end-text{
		color: #fff;
		font-size: 0.9em;
		line-height: 1.2em;
	}
	
	.service-end-btn{
		width: 90% !important;
        padding: 20px 0 40px 0 !important;
        box-sizing: border-box !important;
	}
	@keyframes servicebtn_animation{
	  0% {
		 left: 13%;
	  } 
	  70% {
		 left: 14%;
	  }
	  80% {
		 left: 13%;
	  } 
	  90%{
		 left: 14%;
	  }
	  100%{
		 left: 13%;
	  }
	}
	/* 2. 優化錯誤訊息佔用的空間 */
	.service-form .field-error {
		width: 70%;
	}

	/* 3. 如果有填寫提示(field-tip)，也縮減它的間距 */
	.service-form .field-tip {
		width: 70% !important;
	}
	
}


@media screen and (max-width: 375px) {
	.target-end{
		font-size: 1em; 
		line-height: 1em;
	}
	#brand{
		width: 100%;
		text-align: center;
	}
	.kv-btn{
		left: 15%;
		width:55%;
		white-space:nowrap;
	}
	.brand-area{
		width: 90%;
		padding: 5% 0;
		background: #ff9c00;
	}
	.brand-btn{
		position: relative;
		width: 90%;
		margin: 0 auto;
	}
	.brand-btn-text{
		position: relative;
		background-color: #080834;
		width: 100%;
		border-radius: 3em;
		color: #fff;
		font-weight: 800;
		line-height: 2em;
		padding: 2% 0% 2% 6% ;
		flex-shrink: 0;
		overflow: hidden;
	}
	.brand-btn img{
		position: absolute;
		top: 3%;
		left: 15%;
		width: 16%;
		max-width: 120px;
	}
	.brand-list{
		width: 90%;
		margin: 3% auto;
	}
	.brand-list-li{
		width: 100%;
		background:none;
		padding: 0;
		margin: 6% 0;
	}
	.brand-list-left{
		width: 90%;
		padding: 2.5% 5%;
		vertical-align: top;
		background-color: #fff;
		margin-top: -10px;
	}
	.brand-list-right{
		width: 90%;
		padding: 2.5% 5%;
		margin: 0;
		vertical-align: top;
		background-color: #fff;
		margin-top: -10px;
	}
	.brand-list-img{
		display: block;
		width: 100%;
	}
	.brand-list-title1{
		font-size: 0.9em;
		color: #ff9c00;
	}
	.brand-list-title2{
		font-size: 1.4em;
		line-height: 2em;
		color: #080834;
		font-weight: 900;
	}
	.brand-list-text1{
		font-size: 1em;
		line-height: 1.5em;
		color: #080834;
		font-weight: 700;
	}
	.brand-list-text2{
		font-size: 0.9em;
		line-height: 1.5em;
		color: #fff;
		background-color: #080834;
		padding: 2% 3%;
		margin: 1% 0;
	}
	.brand-list-text3{
		font-size: 0.9em;
		line-height: 1.5em;
		color: #080834;
	}


	.font-price{
		font-size: 3em;
		vertical-align: sub;
	}
	.brand-small{
		font-size: 0.8em;
		line-height: 1.5em;
		margin: 2% 0;
	}


	
	#service{
		position: relative;
		width: 100%;
		background: url("../images/bg-blue2.jpg");
		background-color: #080834;
		margin: 0 auto;
		text-align: center;
		padding: 5% 0;
	}
	.service-area{
		position: relative;
		margin: 0 auto;
		background-color: #ff9c00;
		width: 105%;
		height: 100%;
		border-radius: 100%; 
		padding: 15% 0;
		margin-left: -3%;
		vertical-align: top;
	}
	.service-people{
		position: absolute;
		top: -1%;
		right: -1.3%;
		width: 100%;
		height: 100%;
		clip-path: circle(50% at 50% 50%);
	}
	@keyframes servicepeople_animation{
	  0% {
		opacity: 0;
		right:-1%;
	  }
	  100% {
		opacity: 1;
		right: -1.3%;
	  }
	}
	.service-title{
		color: #fff;
		font-size: 1.3em;
		line-height: 1em;
		font-weight: 600;
		margin-bottom: 5%;
		margin-top: -10px;
	}
	.service-title2{
		font-size: 0.7em;
		line-height: 1em;
	}
	.service-subtitle{
		font-size: 0.8em;
		line-height: 1.5em;
		color: #fff;
		background-color: #080834;
		padding: 2% 8% 2% 2%;
		margin:-10px 5% 0 0;
		width: 80%;
	}
	.service-list{
		text-align: left;
		font-size: 0.7em;
		line-height: 1.5em;
		margin-left: 15%;
		color: #fff;
		width: 60%;
	}

	.service-list li{
		margin: 1% 0;  
		list-style-image: url("../images/icon-check.png");
		list-style-position:inherit;
	}
	.service-list-title{
		background-color: #fff;
		color: #ff9c00;
		font-weight: 600;
		padding: 0.5% 3%;
	}
	.service-img{
		width: 20%;
		max-width: 17px;
	}
	
	.service-end{
		position: relative;
		width: 90%;
		border: 1px #fff solid;
		border-radius: 30px;
		padding: 2% 0 8%;
		margin: 3% auto 0;
		color: #fff;

	}
	.service-end-title{
		color: #ff9c00;
		font-size: 1.2em;
		line-height: 1.8em;
		font-weight: 800;
	}
	.service-end-text{
		color: #fff;
		font-size: 1em;
		line-height: 1.5em;
	}
	.service-end-btn{
		width: 90% !important;
        padding: 20px 0 40px 0 !important;
        box-sizing: border-box !important;
	}
}





		/* 下方新增說明區塊 */
		#seo-content{
			width: 100%;
			margin-right: auto;
			margin-left: auto;
		}


		/* SEO accordion */
		#seo-content .challenge-area{
			text-align: left;
			padding: 5% 5% 3%;
		}
		#seo-content .seo-accordion-title{
			position: relative;
			margin: 0;
			padding: 18px 56px 18px 20px;
			border-top: 1px solid #d9d9d9;
			cursor: pointer;
			font-size: 1.35em;
			font-weight: 800;
			color: #080834;
			text-align: left;
			transition: background-color 0.25s ease;
		}
		#seo-content .seo-accordion-title:last-of-type{
			border-bottom: 1px solid #d9d9d9;
		}
		#seo-content .seo-accordion-title:hover{
			background-color: rgba(8, 8, 52, 0.04);
		}
		#seo-content .seo-accordion-title::after{
			content: '+';
			position: absolute;
			right: 20px;
			top: 50%;
			transform: translateY(-50%);
			font-size: 1.4em;
			font-weight: 700;
			line-height: 1;
		}
		#seo-content .seo-accordion-title[aria-expanded='true']::after{
			content: '−';
		}
		#seo-content .seo-accordion-content{
			padding: 0 20px 22px;
			border-bottom: 1px solid #d9d9d9;
		}
		#seo-content .seo-accordion-content p,
		#seo-content .seo-accordion-content ul,
		#seo-content .seo-accordion-content ol,
		#seo-content .seo-accordion-content h3{
			margin-top: 16px;
		}
		#seo-content .seo-accordion-content ul{
			padding-left: 1.2em;
			list-style: disc;
		}
		#seo-content .seo-accordion-content li{
			margin-bottom: 8px;
		}
		#seo-content .seo-accordion-title:focus-visible{
			outline: 2px solid #ff9c00;
			outline-offset: -2px;
		}

		@media screen and (max-width: 750px) {
			#seo-content .seo-accordion-title{
				font-size: 1.1em;
				padding: 16px 48px 16px 16px;
			}
			#seo-content .seo-accordion-content{
				padding: 0 16px 18px;
			}
		}
		.field-error {
			margin-top: 3px;
			font-size: 14px;
			line-height: 1;
			color: #d93025;
			min-height: 21px;
			font-weight: 500;
		}

		.service-form.has-error input,
		.service-form.has-error select {
			border: 1px solid #d93025 !important;
			background-color: #fff8f8;
		}

		.service-form.has-error .field-tip {
			margin-bottom: 0;
		}












/* ============================================================
   表單跑版修正
   ============================================================ */


/* 2. 優化錯誤訊息佔用的空間 */
.service-form .field-error {
    min-height: 0;      /* 移除強制的最小高度，讓沒錯誤時不佔位 */
    margin-top: 2px;    /* 稍微與輸入框拉開一點點即可 */
    display: block;     /* 確保它在輸入框下方換行 */
    font-size: 13px;
	display: block;
}

/* 3. 如果有填寫提示(field-tip)，也縮減它的間距 */
.service-form .field-tip {
    margin-top: 2px;
    margin-bottom: 5px;
	display: block;
	font-size: 0.75em;
	color: #ccc;
	line-height: 1;
	word-break: break-all;
	width: 50%;
}


.lightbox-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.65);
    z-index: 9999999; /* 確保在最上層 */
    display: flex;
    align-items: center;
    justify-content: center;
}
.lightbox-content {
    background: #fff;
    padding: 40px 20px;
    border-radius: 15px;
    max-width: 300px;
    width: 80%;
    text-align: center;
}
.close-lightbox-btn {
    margin-top: 20px;
    padding: 10px 30px;
    background: #080834;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}