@charset "utf-8";
@import url('fontawesome.min.css'); /*icon字型*/
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC:100,300,400,500,700,900&display=swap');

/* CSS Reset */
html, body, div, span, applet, object, iframe, form,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, 
em, img, q, strong, sub, sup,
dl, dt, dd, ol, ul, li { margin:0; padding:0; }
img { border:0; }
ul, ol { list-style:none; }
table { border-collapse:collapse;}
p { line-height:160%; padding:3px 0; }

select { padding:0; }
select, input, textarea { margin:0; font-family:'Arial', "Heiti TC", "黑體-繁", "Microsoft JhengHei", "微軟正黑體", sans-serif; }
input[type="button"], input[type="submit"], input[type="reset"] { padding:6px 4px; }
input[type="checkbox"], input[type="radio"] { margin-right:3px; vertical-align:middle; }
input[type="button"], input[type="submit"], input[type="reset"], select, button { cursor:pointer; }

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, font, 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, textarea, input{ box-sizing:border-box;}

/* 基本設定 */
body { color:#000; font-family:'Arial', "Microsoft JhengHei", "微軟正黑體",  "Heiti TC", "黑體-繁", sans-serif; 
	background-color:#eeecea; background-image:url('../images/bg.jpg');
}
h1, h2, h3, h4, h5, h6, .title { font-family:'Arial', 'Noto Sans TC', "Microsoft JhengHei", "微軟正黑體", "Heiti TC", "黑體-繁", sans-serif; }
.clear { clear:both; float:none; height:0px; width:0; border:none; overflow:hidden; }
.none { display:none; }
hr { clear:both; height:1px; border:0; background-color:#231f20; width:100%; margin:20px 0; }

/* 連結 */
a { text-decoration:none; color:#444;}
a:hover { text-decoration:none; color:#cf4747; }

/* Body */
body.fixed{ overflow:hidden; }
#Wrap{ min-width:320px; }

/* Header */
#Header{ background-image:url('../images/bg.jpg'); background-color:#eeecea; text-align: center; 
	padding: 15px 0; box-sizing: border-box;
}
#Header .logo { display:inline-block; }
#Header .logo a { display: block; width:325px; margin: auto; }
#Header .logo a img{ width:100%; height: auto; vertical-align: middle; }

/* center */
#center{ background-color: #231f20; position: relative; min-height: 56vh; width:100%; }
#center .game{ width: 100%; max-width: 1440px; position: relative; 
    margin-right: auto; margin-left: auto;   
}
#center .game > div{ padding-bottom: 56.25%; }
#center .game .webgl-content{ width: 100%; height: 100%; }
#gameContainer{ width: 100%; height: 100%; }
#gameContainer canvas{ max-width: 100%;
    -webkit-transform:translate(-50%, -50%);
    -moz-transform:translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%);
    -o-transform:translate(-50%, -50%);
    transform:translate(-50%, -50%);
}


/*----------------------------------------------------------------------*/
/* Footer */
#Footer > div { margin:0 auto; box-sizing:border-box; overflow:hidden; }


/*----------------------------------------------------------------------*/
/* footer-info */
.footer_info{ width:100%; text-align: center; padding:20px 10px; }
.footer_info::after{ content:''; display:block; clear:both; }
.footer_info .img{ margin-right:20px; margin-bottom: 20px;}
.footer_info .img img{ width:100%; height:auto; }
.footer_info .info-box{ display:inline-block; color:#424242; font-size:0.875em; }
.footer_info .info-box .text a{ display:inline-block; background-color:#932323; color:#fff; margin-right:10px; 
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
}
.footer_info .info-box .text a:hover{ opacity:0.8; }
.footer_info .info-box .text span{ margin-right:20px; margin-bottom:3px; display:inline-block;}
.footer_info .info-box .text a.map{ margin-right:0; }


/*----------------------------------------------------------------------*/
/* RWD設定 */
@media screen and (min-width: 320px) and (max-width: 639px) {
	/*Footer */
	.footer_info { text-align:center; }
	.footer_info .img{ max-width:200px; margin:auto; margin-bottom:10px; }
	.footer_info .info-box .text a{ padding:5px 10px; margin-bottom:5px; margin-top:5px; }
	.footer_info .info-box .text a.map{ display:block; }
}

@media screen and (min-width: 640px) and (max-width: 1023px) {
	/*Footer */
	.footer_info { text-align:center; }
	.footer_info .img{ max-width:280px; margin:auto; margin-bottom:15px; }
	.footer_info .info-box .text a{ padding:5px 10px; margin-bottom:5px;  margin-top:5px; }
}

@media screen and (min-width: 1024px) {
	/*Footer */
	.footer_info .img{ float:left; max-width:300px; }
	.footer_info .info-box .text a{ padding:3px 10px; margin-bottom:3px; }

}