/** body **/
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);

body{
	font-family:'Noto Sans TC',Microsoft JhengHei,'Open Sans',sans-serif;
	font-size:18px;
	background-color:#f8f9fa;
	/* //background-image:url("../images/background_2.png");
	//background-size:100% 100%; */
}

/** header **/
#header img{
	width:100%;
	height:auto;
}

#header_1{
	margin:70px 0px 100px 0px;
	display:inline;
}

#header_2{
	display:none;
}

.floating{
	animation-name:floating;
	animation-duration:2s;
	animation-iteration-count:infinite;
	animation-timing-function:ease-in-out;
	margin-top:75px;
}

@keyframes floating{
    from{
		transform:translate(0px,0px);
	}
    50%{
		transform:translate(0px,10px);
	}
    to{
		transform:translate(0px,0px);
	}
}

/** content **/
.card-container{
	perspective:700px;
}

.card-flip{
	position:relative;
	width:100%;
	transform-style:preserve-3d;
	height:auto;
	transition:all 0.5s ease-out;
	background:white;
	border:none;
}

.card-flip div{
	backface-visibility:hidden;
	transform-style:preserve-3d;
	height:100%;
	width:100%;
	border:none;
}

.card-flip .front{
	position:relative;
	z-index:1;
}

.card-flip .back{
	position:relative;
	z-index:0;
	transform:rotateY(-180deg);
}

.card-container:hover .card-flip{
	transform:rotateY(180deg);
}

figure{
	overflow:hidden;
}

.activity_hover figure{
	position:relative;
}

.activity_hover figure::before{
	position:absolute;
	left:-75%;
	display:block;
	content:'';
	width:50%;
	height:100%;
	background:linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,0.4));
	transform:skewX(-25deg);
}

.activity_hover figure:hover::before{
	animation:shine 1.6s;
}

@keyframes shine{
	100% {left:125%;}
}

.block{
	list-style-type:none;
	margin:0px;
	padding:0px;
	transition:0.6s;
}

.title{
	color:#FFFFFF;
	font-size:28px;
	font-weight:bold;
	text-align:center;
	padding:20px 4px 20px 4px;
}

.text{
	font-size:20px;
	text-align:center;
	padding:20px 20px 20px 20px;
}

.block:hover{
	box-shadow:0px 8px 12px 0px rgba(0,0,0,1);
}

.go span{
	display:inline-block;
	position:relative;
	transition:0.5s;
}

.go span:after{
	content:'\00bb';
	position:absolute;
	opacity:0;
	top:0px;
	right:-20px;
	transition:0.5s;
}

.go:hover span{
	color:white;
	padding-right:20px;
}

.go:hover span:after{
	opacity:1;
	right:0px;
}

.zoom{
	transition:transform 1s;
}

.zoom:hover{
	transform:scale(1.02); 
}

.back-to-top{
	display:none;
	position:fixed;
	right:10px;
	bottom:10px;
	padding:10px;
	border-radius:2px;
	color:#0B3260;
	background-color:#FFFFFF;
	opacity:0.8;
}

/** RWD **/
@media(max-width:768px){
	#header_1{
		display:none;
	}

	#header_2{
		margin:280px 0px 100px 0px;
		display:inline;
	}

	.floating{
		display:none;
	}
}