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

.servTitlebg2{
	background:url(../../images/servTitlebg2.png)  no-repeat;
}
.servTitlebg3{
	background:url(../../images/servTitlebg3.png)  no-repeat;
	
}

.servTitlebg4{
	background:url(../../images/servTitlebg4.png)  no-repeat;
}
/*btn hover CSS*/
#hoberBox1:hover .servTitlebg1{
	background:url(../../images/servTitlebg1_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 15%;
	color:white;
}

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

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


#hoberBox1:hover .servTitlebg1 {
	animation:servhover1 .5s linear both;
	
}
#hoberBox2:hover .servTitlebg2 {
	animation:servhover2 .5s linear both;
}
#hoberBox3:hover .servTitlebg3 {
	animation:servhover3 .5s linear both;
}
#hoberBox4:hover .servTitlebg4 {
	animation:servhover4 .5s linear both;
}
/*btn hover CSS*/


.servTitle,.servTitle2{
	font-size:1.2em;
	line-height:2em;
	font-weight:600;
	padding:0.5% 2% 0.5% 7%;
	letter-spacing:0.15em;
	white-space:nowrap !important;
}

.servTitle{
	background-position:top 50% left 15%;
	
}
.servTitle2{
	background-position:top 50% left 7%;
	
}

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



.servContent{
	display:block;
	padding:0 0 0 7%;
	margin:1.5% 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%;
	}
	
	.servTitle{
		background-position: top 50% left 5%;
	}
	#hoberBox1:hover .servTitlebg1{
		background-position:top 50% left 5%;
	}
	#hoberBox2:hover .servTitlebg2{
		background-position:top 50% left 5%;
	}
	#hoberBox3:hover .servTitlebg3{
		background-position:top 50% left 5%;
	}
	#hoberBox4:hover .servTitlebg4{
		background-position:top 50% left 5%;
	}
	
	
	
}
	
@media (min-width: 1025px) and (max-width: 1280px) {
	.sevrShape {
		margin: -13% auto 0;
		width: 80%;
	}
	
	.servTitle{
		background-position: top 50% left 5%;
	}
	#hoberBox1:hover .servTitlebg1{
		background-position:top 50% left 5%;
	}
	#hoberBox2:hover .servTitlebg2{
		background-position:top 50% left 5%;
	}
	#hoberBox3:hover .servTitlebg3{
		background-position:top 50% left 5%;
	}
	#hoberBox4:hover .servTitlebg4{
		background-position:top 50% left 5%;
	}
	
}	
	
	


@media (max-width: 1024px) {
	.sevrShape{
		margin: -16% auto 0;
    	width: 100%;
	}
	.servTitle,#hoberBox1:hover .servTitlebg1,#hoberBox3:hover .servTitlebg3,#hoberBox4:hover .servTitlebg4{
		background-position: top 50% left 6%;
	}
	#hoberBox2:hover .servTitlebg2{
		background-position: top 50% left 2.5%;
	}
	.servTitle{
		padding:0.5% 2% 0.5% 7%;
	}
	
	.servTitle2 {
		background-position: top 50% left 2.5%;
	}
	
}

@media (max-width: 992px) {
	.sevrShape{
		margin: 0% auto 0;
    	width: 60%;
	}
	.servBox{
		margin:3% 0 0 1%;
	}
	.servTitle,.servTitle2 {
		font-size: 1.5em;
		padding: 0.5% 2% 0.5% 5%;
	}
	.servTitle2 {
		background-position: top 50% left 3%;
	}
	#hoberBox2:hover .servTitlebg2{
		background-position: top 50% left 3%;
	}
	.servContent {
		padding: 0 5% 2%;
		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;}
	.servTitle,#hoberBox1:hover .servTitlebg1,#hoberBox3:hover .servTitlebg3,#hoberBox4:hover .servTitlebg4{
		background-position: top 50% left 8%;
	}
	.d-m-Inlineblock{display:inline-block;}
}
@media (max-width: 760px) {
	.sevrShape{
    	width: 75%;
	}
	.servTitle,.servTitle2 {
		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,#hoberBox1:hover .servTitlebg1,#hoberBox3:hover .servTitlebg3,#hoberBox4:hover .servTitlebg4{
		background-position: top 50% left 5%;
	}
}
@media  (max-width: 414px) {
	.split-box {
		margin: 22% 0 -5% 0%;
	}
	.servBox {
		margin: -5% 0 10% 0%;
	}
	.sevrShape{
		margin: -5% auto 2%;
    	width: 95%;
	}
	.servTitle,.servTitle2 {
		font-size: 1.4em;
    	padding: 1% 2% 1% 9%;
	}
	.servTitle2 {
		background-position: top 50% left 2%;
	}
	.servContent {
		padding: 0 2% 0 10%;
		line-height: 1.5em;
		font-size: 1.1em;
		margin: 0 0 5%;
	}
	
}
@media (max-width: 375px) {
	.sevrShape {
		margin: -15% auto 2%;
		
	}
	.servTitle,#hoberBox1:hover .servTitlebg1,#hoberBox2:hover .servTitlebg2,#hoberBox3:hover .servTitlebg3,#hoberBox4:hover .servTitlebg4{
		background-position: top 50% left 1%;
	}
	.servTitle2 {
		background-position: top 50% left 0.5%;
	}
	.servTitle, .servTitle2 {
		font-size: 1.2em;
		padding: 2% 2% 2% 8%;
	}
	.servContent {
		font-size: 1em;
		padding: 0 2% 0 8%;
	}
}
@media  (max-width: 320px) {
	.sevrShape {
		margin: -15% auto 2%;
	}
	.servTitle,#hoberBox1:hover .servTitlebg1,#hoberBox3:hover .servTitlebg3,#hoberBox4:hover .servTitlebg4 {
		background-position: top 50% left 1%;
	}
	.servTitle, .servTitle2 {
		font-size: 1em;
		padding: 2% 2% 2% 8%;
	}
	.servContent {
		font-size: 0.9em;
		padding: 0 2% 0 8%;
	}
		
}
/*svg*/

/*.circle{
	stroke: #23d9b7;
}


.halfcircle{
	stroke: #AB05F2;
	}
.rectangle{
	stroke: #63488F;
	}
.triangle{
	stroke: #D7F205;

	}
.halfcircle,.circle,.rectangle,.triangle{
	fill:none;
	stroke-width:3px;
	}


.shapeHover{
	animation:shapeHover 1s linear;
	animation-iteration-count:1;
}

*/


/*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);
  }
}