@charset "utf-8";
/* CSS Document */

@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
body {
	font-family: 'Noto Sans TC', "微軟正黑體", "Microsoft JhengHei UI", sans-serif;
	color: #333;/*background-color: #eee;*/
	-webkit-appearance: none;
    background-image: url("../images/tweed.png");
	background-position: left top;
	background-repeat: repeat;
}
html, body {
	height: 100%;
	font-size: 75%;
}
.wrap{
     height: 100%;
    *display: table; /* For IE7 Hack */
    *height: 100%; /* For IE7 Hack */
}
.main{
    min-height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
	}
* {
	box-sizing: border-box;
}
p {
	line-height: 2;
	font-size: 1.4rem;
	color: #333;
	margin-bottom: 17px;
}

a {
	outline: none;
	transition: all 0.6s;
	-o-transition: all 0.6s;
	-moz-transition: all 0.6s;
	-webkit-transition: all 0.6s;
	text-decoration: none;
    color: #8f9f38;
}
a:hover{
    color: #666;
}
.contain{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 20%;
    height: auto;
    font-size: 1.4rem;
    text-align: center;
    line-height: 1.7;
}
.contain img{
    width: 100%;
    height: auto;
}
.notfound_img{
    width: 75%;
}
.en{
    font-size: 1.3rem;
    text-align: center;
}
.br-break{
    display: none;
}
@media screen and (max-width: 1366px) {

.contain{
    width: 30%;
}
.notfound_img {
    width: 70%;
}
}
@media screen and (max-width: 1180px) {

.contain {
    width: 35%;
}
}
@media screen and (max-width: 1024px){
.contain {
    width: 40%;
}

}
@media screen and (max-width: 820px){
.contain {
    width: 50%;
}
}
@media screen and (max-width: 576px){
.contain {
    width: 80%;
    font-size: 1.3rem;
}
.en{
    font-size: 1.2rem;
}
.br-break{
    display: block;
}
}