@charset "utf-8";
/* CSS Document */
body{
	font-family: 'Noto Sans TC', sans-serif;
    /*font-weight: 400;*/
    font-size: 16px;
	color:#333333;
}
.servBox{
	margin: 1.5% 0 0 3%;
	cursor:pointer;
}

.servTitle{
	font-size:1.2em;
	line-height:2em;
	font-weight:550;
	padding:0.5% 2% 0.5% 7%;
	background-position:top 50% left 15%;
}

.servTitlebg1{
	background:url(../../images/servTitlebg1.png)  no-repeat;
	background-position: top 60% left 16%;
}

.servTitlebg2{
	background:url(../../images/servTitlebg2.png)  no-repeat;
	background-position: top 50% left 15%;
}

.servTitlebg3{
	background:url(../../images/servTitlebg3.png)  no-repeat;
	background-position: top 50% left 21.5%;
}

.servTitlebg4{
	background:url(../../images/servTitlebg4.png)  no-repeat;
	/*margin-left: -30px;*/
	background-position: top 50% left 8%;
}

.servTitlebg5{
	background:url(../../images/servTitlebg2.png)  no-repeat;
	background-position: top 50% left 11%;
}

.servTitlebg4 span{
	/*margin-left: 30px;*/
}
/*btn hover CSS*/
#hoberBox1:hover .servTitlebg1{
	background:url(../../images/servTitlebg1_hover.png)  no-repeat;
	background-position:top 50% left 15%;
	color:white;
}
#hoberBox2:hover .servTitlebg2{
	background:url(../../images/servTitlebg4_hover.png)  no-repeat;
	background-position:top 50% left 15%;
	color:white;
}
#hoberBox3:hover .servTitlebg3{
	background:url(../../images/servTitlebg3_hover.png)  no-repeat;
	background-position:top 50% left 21.5%;
	color:white;
}

#hoberBox4:hover .servTitlebg4{
	background:url(../../images/servTitlebg2_hover.png)  no-repeat;
	background-position:top 50% left 8%;
	color:white;
}


#hoberBox5:hover .servTitlebg5{
	background:url(../../images/servTitlebg4_hover.png)  no-repeat;
	background-position:top 50% left 11%;
	color:white;
}

#hoberBox1:hover .servTitlebg1 {
	animation:servhover1 .5s linear both;

}
#hoberBox2:hover .servTitlebg2,#hoberBox5:hover .servTitlebg5 {
	animation:servhover2 .5s linear both;
}
#hoberBox3:hover .servTitlebg3 {
	animation:servhover3 .5s linear both;
}
#hoberBox4:hover .servTitlebg4 {
	animation:servhover4 .5s linear both;
}
#hoberBox5{
	margin-bottom:5%;
}
/*btn hover CSS*/






.d-m-Inlineblock{display:none;}



.servContent{
	display:block;
	padding:0 0 0 7%;
	margin:1% 0 0 0;
	line-height:1.5em;
	font-weight:400;
}

.sevrShape{
	position:relative;
	width:60%;
	height:auto;
	display:block;
	margin: -15% 0 0 0;
	text-align: center;
	/*bottom:0;*/
}




#animation_container{
    width: 100% !important;
    height: auto !important;
    position:relative;
}

#canvas{
    width: 100% !important;
    height: auto !important;
    position: relative !important;
}
#dom_overlay_container{
	width: 100% !important;
    height: auto !important;
    position: relative !important;
}





/****RWD設定****/
@media (min-width: 1921px) {
	.sevrShape{
		margin: -30% 0 0 0;
    	width: 65%;
	}
}
@media (max-width: 1680px) {
	.sevrShape{
		margin: -20% 0 0 0;
    	width: 70%;
	}
}

@media (max-width: 1440px) {
	.sevrShape{
		margin: -20% auto 0;
    	width: 80%;
	}

	
	.servTitlebg1{
		background-position: top 60% left 9%;
	}
	
	.servTitlebg2{
		background-position: top 50% left 8.5%;
	}
	
	.servTitlebg3{
		background-position: top 50% left 13.5%;
	}
	
	.servTitlebg4{
		background-position: top 50% left 5%;
	}
	
	.servTitlebg5{
		background-position: top 50% left 6%;
	}

	#hoberBox1:hover .servTitlebg1{
		background-position:top 50% left 9%;
	}
	#hoberBox2:hover .servTitlebg2{
		background-position:top 50% left 8.5%;
	}
	#hoberBox3:hover .servTitlebg3{
		background-position:top 50% left 13.5%;
	}
	#hoberBox4:hover .servTitlebg4{
		background-position:top 50% left 5%;
	}
	#hoberBox5:hover .servTitlebg5{
		background-position:top 50% left 6%;
	}


}

@media (min-width: 1025px) and (max-width: 1200px) {
	.sevrShape {
		margin: -13% auto 0;
		width: 80%;
	}

	.servTitlebg1{
		background-position: top 60% left 7%;
	}
	
	.servTitlebg2{
		background-position: top 50% left 6.5%;
	}
	
	.servTitlebg3{
		background-position: top 50% left 11.5%;
	}
	
	.servTitlebg4{
		background-position: top 50% left 3%;
	}
	
	.servTitlebg5{
		background-position: top 50% left 4%;
	}

	#hoberBox1:hover .servTitlebg1{
		background-position:top 50% left 7%;
	}
	#hoberBox2:hover .servTitlebg2{
		background-position:top 50% left 6.5%;
	}
	#hoberBox3:hover .servTitlebg3{
		background-position:top 50% left 11.5%;
	}
	#hoberBox4:hover .servTitlebg4{
		background-position:top 50% left 3%;
	}
	#hoberBox5:hover .servTitlebg5{
		background-position:top 50% left 4%;
	}
}




@media (max-width: 1024px) {
	.sevrShape{
		margin: 8% auto 0;
    	width: 100%;
	}
	.servTitlebg1{
		background-position: top 60% left 4%;
	}
	
	.servTitlebg2{
		background-position: top 50% left 3.5%;
	}
	
	.servTitlebg3{
		background-position: top 50% left 3.5%;
	}
	
	.servTitlebg4{
		background-position: top 50% left 1%;
	}
	
	.servTitlebg5{
		background-position: top 50% left 1%;
	}

	#hoberBox1:hover .servTitlebg1{
		background-position:top 50% left 4%;
	}
	#hoberBox2:hover .servTitlebg2{
		background-position:top 50% left 3.5%;
	}
	#hoberBox3:hover .servTitlebg3{
		background-position:top 50% left 3.5%;
	}
	#hoberBox4:hover .servTitlebg4{
		background-position:top 50% left 1%;
	}
	#hoberBox5:hover .servTitlebg5{
		background-position:top 50% left 1%;
	}
}

@media (max-width: 992px) {
	.sevrShape{
		margin: 0% auto 0;
    	width: 60%;
	}
	.servBox{
		margin:3% 0 0 1%;
	}
	.servTitle {
		font-size: 1.5em;
		padding: 0.5% 2% 0.5% 4%;
	}
	.servTitlebg1{
		background-position: top 60% left 4%;
	}
	
	.servTitlebg2{
		background-position: top 50% left 3.5%;
	}
	
	.servTitlebg3{
		background-position: top 50% left 4.5%;
	}
	
	.servTitlebg4{
		background-position: top 50% left 2%;
	}
	
	.servTitlebg5{
		background-position: top 50% left 2%;
	}

	#hoberBox1:hover .servTitlebg1{
		background-position:top 50% left 4%;
	}
	#hoberBox2:hover .servTitlebg2{
		background-position:top 50% left 3.5%;
	}
	#hoberBox3:hover .servTitlebg3{
		background-position:top 50% left 4.5%;
	}
	#hoberBox4:hover .servTitlebg4{
		background-position:top 50% left 2%;
	}
	#hoberBox5:hover .servTitlebg5{
		background-position:top 50% left 2%;
	}
	.servContent {
		padding: 0 5% 2% 4%;
		line-height: 2em;
		font-size: 1.2em;
        text-align: justify; text-justify: inter-ideograph; -ms-text-justify: inter-ideograph; /IE9/ -moz-text-align-last:justify; /Firefox/ -webkit-text-align-last:justify; /Chrome/

	}
	.servContent br{display:none;}
	.d-m-Inlineblock{display:inline-block;}
}
@media (max-width: 760px) {
	.sevrShape{
    	width: 75%;
	}
	.servTitle {
		padding: 0.5% 2% 0.5% 7%;
	}
	.servContent {
		padding: 0 7% 2%;
	}
}
@media (max-width: 481px) {
	.sevrShape{
    	width: 100%;
    	margin-top: -10%;
	}
	.servBox {
		margin: 3% 0 0 0%;
	}
	.servTitle {
		font-size: 1.5em;
		padding: 0.5% 2% 0.5% 7%;
	}
	.servContent {
		letter-spacing: 0em;
		width: 94%;
	}
   
	.servTitlebg1{
		background-position: top 60% left 2%;
	}
	
	.servTitlebg2{
		background-position: top 50% left 3%;
	}
	
	.servTitlebg3{
		background-position: top 50% left 4.5%;
	}
	
	.servTitlebg4{
		background-position: top 50% left 1%;
	}
	
	.servTitlebg5{
		background-position: top 50% left 2%;
	}

	#hoberBox1:hover .servTitlebg1{
		background-position:top 50% left 2%;
	}
	#hoberBox2:hover .servTitlebg2{
		background-position:top 50% left 3%;
	}
	#hoberBox3:hover .servTitlebg3{
		background-position:top 50% left 4.5%;
	}
	#hoberBox4:hover .servTitlebg4{
		background-position:top 50% left 1%;
	}
	#hoberBox5:hover .servTitlebg5{
		background-position:top 50% left 2%;
	}
}
@media  (max-width: 414px) {
	.split-box {
		margin: 22% 0 -5% 0%;
	}
	.servBox {
		margin: -5% 0 10% -2%;
	}
	.sevrShape{
		margin: -5% auto 2%;
    	width: 95%;
	}
	.servTitle {
		font-size: 1em;
		padding: 0 0% 0 7%;
	}
	.servContent {
		padding: 0 0% 0% 9%;
		line-height: 1.5em;
		font-size: 1.2em;
		margin: 0 0 5% 0;
	}

}
@media (max-width: 375px) {
	.sevrShape {
		margin: -15% auto 2%;

	}
	.servTitle {
		font-size: 1.25em;
	}
	.servContent {
		font-size: 1em;
	}
}
@media  (max-width: 320px) {
	.sevrShape {
		margin: -15% auto 2%;
	}
	.servTitle {
		font-size: 1em;
	}
	.servContent {
		font-size: 0.85em;
	}

}



/*svg*/
/**************************動態函數*******************************************/
@keyframes servhover1{
	0%{
		background-color:none;
	}
	100%{
	    background-color:#ab05f2;
	}

}
@keyframes servhover2{
	0%{
		background-color:none;
	}
	100%{
	    background-color:#24d8b6;
	}

}
@keyframes servhover3{
	0%{
		background-color:none;
	}
	100%{
	    background-color:#63488f;
	}

}
@keyframes servhover4{
	0%{
		background-color:none;
	}
	100%{
	    background-color:#cde50a;
	}

}

@keyframes draw{
	0%{
		stroke-dashoffset: 2000;
	}
	100%{
		stroke-dashoffset: 0;
	}
}

@keyframes shapeHover{
	0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  40% {
    -webkit-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  60% {
    -webkit-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}