@charset "utf-8";
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	
}

ol, ul {
	list-style: none;
}

.banner img{
	position:relative;
	z-index:-999;
    vertical-align:bottom;}


.content{
	background:#535d6b;
	padding:10px;
	margin-bottom:20px;
	color:#FFF;
	font-family:Microsoft JhengHei;}

.omg{
	text-align:center;
	font-weight:bold;
	margin:10% 0;
	color:#333;}
	
h2{
	font-size:34px;
	font-family:Microsoft JhengHei,MingLiU;}	
h4{
	font-size:22px;
	font-family:Microsoft JhengHei,MingLiU;}



.container{
	width:100%;
	max-width:1200px;
	margin:auto;
	font-family:Microsoft JhengHei;}

.card{
	margin-bottom:10px;}	
	
.face{
	width:90%;
	height:200px;
	margin:auto;}
	
.face1{
	position:relative;
	background:#966;
	display:flex;
	justify-content:center;	
	z-index:1;}	
	
.face2{
	position:relative;
	display:flex;
	justify-content:center;
	align-items: center;
	border:1px #000 solid;
	border-top:none;
	padding:10px;		
	box-sizing:border-box;
	font-weight:600;}		


h3{
	bottom:10px;
	left:0;
	right:0;
	padding:0;
	color:#fff;
	text-align:center;
	font-size:1.5em;
	position:absolute;}

.content2 img{
	top:30px;
	left:0;
	right:0;
	margin:auto;
	position:absolute;}


h1{
	font-size:20px;
	color: #7C98B3;}
		
.footer{
	margin-bottom:-600px;}


@media screen and (min-width:900px){
	body{
		height:1600px;}
	.banner img{
		height:400px;}

		
	.content{
		font-size:28px;
		padding:30px;
		text-align:center;}
		
	.omg{
		margin:5% 0 0;}
		
	.container{
		display:flex;}	
		
	.face{
		transition:0.5s;}
		
	.face1{
		transform:translateY(100px);}	
		
	.card:hover .face1{
		background:#C6997D;
		transform:translateY(0);}
	
	.face2{	
		transform:translateY(-100px);}
	
	.card:hover .face2{
		transform:translateY(0);}
					
	h3{
		bottom:5px;}
	
	.content2{
		transition:0.5s;}
	
	.card{
		width:33%;
		margin-bottom:0px;}
		
	h1{
		left:10%;
		width:400px;
		position:absolute;
		font-size:28px;}
		
		
	.footer{
	    margin-bottom:-700px;}				
		
		}