@charset "utf-8";

html, body { width:100%; height:100%;}
body { background: url("../images/bbs/entry-bg.png") no-repeat top center #000; background-size:contain; font-family: PMingLiU;}
img { max-width:100%!important; height: auto !important; _width:expression(this.width > 100 ? "100%" : this.width)!important;}
#page { margin:0 auto; width:90%; max-width: 1100px;}

.header { text-align:center;}
.header p { font-size:18px; color:#fff;}
.header .box { width:180px; display:inline-block; background:#fff; text-align:left; padding:0 5px;}
.header .box .line { color:#000; font-weight:15px; line-height:30px; animation-name:twinkle; animation-duration: 1s; animation-iteration-count: infinite;}
@keyframes twinkle {
  0%   { opacity:1;}
  50%  { opacity: 0;}
  100% { opacity: 1;}
}

.main { }
.content { padding:20px 0; text-align:center;}
.content a { width:200px; height:200px; display:inline-block; vertical-align:middle; margin:2px;}
.content a:hover { opacity:0.8;}

.copyright { text-align:center; padding:60px 0 20px 0; font-size:11px; color:#999;}
.copyright a { text-decoration:none; color:#ccc; font-size: 13px;}
.copyright a:hover { text-decoration:underline; color:#3399ff;}

.socialmedia{ position:absolute; bottom:10px; width:100%; text-align:center;}
.socialmedia a{ display:inline-block; color:#666; margin:3px 10px;}
.socialmedia a+a{}
.socialmedia img{ margin-right:5px;}
.blue{ font-weight:bold; font-size:15px; color:#3399ff;}


@media screen and (max-width: 768px) {
	body { background: url("../images/bbs/entry-bg-m.png") no-repeat top center #000; background-size:contain;}
	.header p { font-size:13px;}
	.header .box { width:120px; display:inline-block; margin-top:5px;}
	.header .box .line { font-weight:13px; line-height:20px;}
	.content a { width:150px; height:150px;}
	.copyright {}
}