* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  font-family: 'Noto Sans TC', sans-serif;
  line-height: 1.5;
}

h2{
	font-weight: 300;
	font-size: 27px;
	margin: 0 0 10px 0;
}

h3{
	font-size: 16px;
}

a{
	text-decoration: none;
	color: orange;
}

.logo img{
	width: 130px;
	border-radius: 50%;
}

.main-header-container{
		background: #fff;
}

.main-header,
.intro,
.intro-content,
.colums,
.slogan,
.legal {
	max-width: 960px;
	padding: 20px;
	margin: 0 auto;	
}

.main-header nav a {
	display: block;
	padding: 10px 20px;
	text-transform: uppercase;
	font-size: 20px;
	font-weight: 300;
	color: #222;
	border-bottom: 1px solid transparent;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s ease;
}
#nav-big {
	display: block;
}
#nav-small {
	display: none;
}
.main-header nav a:hover{
	border-color: orange;
}

.main-header .logo{
	float: left;
}

.main-header nav{
	float: right;
	padding-top: 10px;
}

.main-header ul{
	list-style: none;
	padding:0;
	maargin:0;
}

.main-header li{
	float: left;
}

.intro-container{
	background: transparent url(../img/intro_hg.png) bottom center no-repeat;
	height: 500px;
	background-size: cover;
	position: relative;
	}

.intro{
	text-align: center;
	padding-top: 16px;
}

.intro h1{
	font-size: 50px;
	text-transform: uppercase;
	background: whitesmoke;
	padding: 15px;
	border-radius: 10px;
	opacity: 0.5;
}

.intro h1 span{
	display: block;
	font-style: italic;
	font-size: 25px;
}

.intro .gif{
	position: absolute;
	bottom: 10px;
	left: 33%;
	width: 33%;
	border-radius: 33%;
}

.intro-content-container{
	background: #f1ede4;
}

.intro-text, 
.intro-aside{
	float: left;
	padding: 0 5px;			
}

.intro-text{
	width: 66.66%;
}

.intro-text p{
	margin-top: 0;
}

.intro-aside{
	width: 33.33%;
	border-left: 1px solid #999;
}
.intro-aside h3,
.intro-aside p{
	margin: 0;
}

.colums-container{
	background: #e3e8c6;
}

.colums article{
	float: left;
	width: 33.33%;
	padding: 5px 20px;
	border-left: 1px solid #999;
	
	/*text-align: center;*/
}
.colums article:first-child{
	border: none;
	padding-left: 0;
}

.colums article .button{
	display: block;
	text-align: center;
	margin: 5px;
}
.slogan-container{
	background: #f1ede4;
}
.slogan a{
	font-size: 23px;
	line-height: 1.2;
}

.slogan p span{
	display: block;
	font-weight: 700;
}

.legal-container{
	background: #222;
	color: #e3e8c6;
}

.legal-container a{
	color: #e3e8c6;
	font-weight: 700;
	padding-bottom: 2px;
	border-bottom: 1px solid transparent;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s ease;	
}
.legal-container a:hover{
	border-color: #e3e8c6;
}

.legal-container img{
	margin: 0 4px;
	vertical-align: text-bottom;
}

.button{
	display: inline-block;
	padding: 5px 20px;
	text-transform: uppercase;
/*	border: 1px solid red;*/
	color: red;
		background: whitesmoke;
		border-radius: 5px;
	opacity: 0.5;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s ease;	
}

.button:hover{
background: transparent url(../img/logo_small.jpg)  center no-repeat;	
	color: red;
	font-weight: bolder;
	opacity: 1;
}

.btn-dark{
	border-color: #222;
	color: #222;
}

.btn-dark:hover{
	background: #222;
	color: orange;
}

/* clearfix*/
.clearfix:before,.clearfix:after{
	content: " ";
	display: table;
}

.clearfix:after{
	clear: both;
}

/*media-Queries*/
@media screen and (max-width: 850px){
	.intro-container{
		height: 400px;
	}	
	.main-header .logo,
	.main-header nav,
	.main-header li{
		float: none;
	}
	.main-header{
		text-align: center;
	}

	.main-header li{
		display: inline-block;
	}

	.main-header nav{
		padding-top: 5px;
	}

	.intro-text,
	.intro-aside{
		width: 50%;
		border: none;
		padding: 5px; 
	}
	.intro .gif{
		display: none;
	}


}
@media screen and (max-width: 700px){	
	.intro-container{
		height: 200px;
	}
	.intro{
		padding-top: 20px;
	}
	.intro h1{
		font-size: 30px;
	}
	.intro h1 span{
		font-size: 16px;
	}
	.intro-text,
	.intro-aside{
		width: 100%;
	}	
	.colums article,
	.colums article:first-child{
		width: 100%;
		border: 1px dotted;
		padding: 15px; 
		margin-bottom: 5px;
	}
.slogan span, 
.legal{
	font-size: 14px;
}
#nav-big {
	display: none;
}
#nav-small {	
	z-index: 100;
	position: fixed;
	display: block;
	border-radius: 5px;
	background: white;
	opacity: .75;
	
}
#nav-small:hover {	
	opacity: 1;
	color: black;
}
#nav-small li a {
	padding: 0px 10px;
	font-size: 12px;
	color: #000000;
}
#nav-small li:hover, #nav-small li a:hover {
	width: 100vw;
	color: red;
}
	
}