/* CSS Document */
*{ margin:0; padding:0; box-sizing:border-box; }

.U-txt-pointB{
	color:#70216f;
}
.U-txt-pointC{
	color:#FF0;
}
.table .U-td-styleA{
	background:#b8d4fc;
}

/*改變iphone電話號碼顏色樣式*/
a[href^=tel]{
 color:#0FF;
}



.U-wrapper{ background:url(../images/indexbg.jpg) #cc6101 center top no-repeat; }

/*header*/
.U-header { 
	position:relative;
}
	.U-header .container{ 
		width:1024px;
		height: 590px;
		position:relative;
	 }
		.U-header .slogan{
			width:593px;
			height:265px;
			position:absolute;
			top:146px;
			left:206px;
			background:url(../images/slogan.png)
		}
		.U-header .logo{
			width:205px;
			height:136px;
			position:absolute;
			top:26px;
			left:66px;
		}
			.U-header .logo a{
				width:205px;
				height:136px;
				display:block;
				background:url(../images/logo.png);
			}
	
	

/*content*/
	.U-content{
		width:100%;
		position:relative;
	}
		.U-content .container{
				width:800px;
				padding:10px 0 20px 0;
		}
			.U-content p{
				font-size:1.2em;
				margin-left:2em;
				line-height:3em;
			}
			.U-content h4{
				font-size:1.3em;
				padding:5px 12px;
				border-radius: 1.2em;
				background: #992525;
				display: inline-block;
				color:#fff;
			}
			.U-content a{
				color:#412f7a;
				font-weight:bold;
			}
		.U-content ol{
			font-size:1.2em;
			line-height:1.8em;
			margin-left:3em;
			padding-bottom:20px;
		}

				
		


/*動態*/
.animated {
	-webkit-animation-delay: 0.5s;
	animation-delay: 0.5s;
  -webkit-animation-duration: 60s;
  animation-duration: 60s;
  animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}
@keyframes flipInX {
	0% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    opacity: 1;
  }

  0.5% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
  }

  1% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  1.5% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  
  2% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
	}

  2.5% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  3% {
    transform: translateY(-3%);   
  }
  6% {
    transform: translateY(3%);   
  }
   9% {
    transform: translateY(-3%);   
  }
  12% {
   transform: translateY(3%);
  }
   15% {
    transform: translateY(-3%);   
  }
  18% {
   transform: translateY(3%);
  }
  21% {
    transform: translateY(-3%);   
  }
  24% {
   transform: translateY(3%);
  }
  27% {
    transform: translateY(-3%);
  }
  30% {
    transform: translateY(3%);   
  }
  33% {
   transform: translateY(-3%);
  }
  36% {
    transform: translateY(3%);
  }  
  39% {
    transform: translateY(-3%);   
  }
  41% {
   transform: translateY(3%);
  }
  44% {
    transform: translateY(-3%);
  } 
  47% {
    transform: translateY(3%);   
  }
  50% {
    transform: translateY(-3%);   
  }
  53% {
   transform: translateY(3%);
  }
  56% {
    transform: translateY(-3%);
  } 
  59% {
    transform: translateY(3%);   
  }
  62% {
   transform: translateY(-3%);
  }
  65% {
    transform: translateY(3%);
  }
  68% {
    transform: translateY(-3%);   
  }
  71% {
   transform: translateY(3%);
  }
  74% {
    transform: translateY(-3%);
  }
  
  77% {
    transform: translateY(3%);   
  }
  80% {
   transform: translateY(-3%);
  }
  83% {
    transform: translateY(3%);
  }
  
  86% {
    transform: translateY(-3%);   
  }
  89% {
   transform: translateY(3%);
  }
  92% {
    transform: translateY(-3%);
  }
  
  95% {
    transform: translateY(3%);   
  }
  98% {
   transform: translateY(-3%);
  }
  100% {
    transform: translateY(0%);
  }
}
@-webkit-keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    opacity: 1;
  }

  2% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
  }

  4% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  6% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  
  8% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
	}

  20% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  21% {
    transform: translateY(-3%);   
  }
  24% {
   transform: translateY(3%);
  }
  27% {
    transform: translateY(-3%);
  }
  30% {
    transform: translateY(3%);   
  }
  33% {
   transform: translateY(-3%);
  }
  38% {
    transform: translateY(3%);
  }  
  41% {
    transform: translateY(-3%);   
  }
  44% {
   transform: translateY(3%);
  }
  47% {
    transform: translateY(-3%);
  } 
  50% {
    transform: translateY(3%);   
  }
  53% {
   transform: translateY(-3%);
  }
  56% {
    transform: translateY(3%);
  } 
  59% {
    transform: translateY(-3%);   
  }
  62% {
   transform: translateY(3%);
  }
  65% {
    transform: translateY(-3%);
  }
  68% {
    transform: translateY(3%);   
  }
  71% {
   transform: translateY(-3%);
  }
  74% {
    transform: translateY(3%);
  }
  
  77% {
    transform: translateY(-3%);   
  }
  80% {
   transform: translateY(3%);
  }
  83% {
    transform: translateY(-3%);
  }
  
  86% {
    transform: translateY(3%);   
  }
  89% {
   transform: translateY(-3%);
  }
  92% {
    transform: translateY(3%);
  }
  
  95% {
    transform: translateY(-3%);   
  }
  98% {
   transform: translateY(3%);
  }
  100% {
    transform: translateY(0%);
  }
}

.flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}