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

@import url(../../css/reset.css);
@import url(../../css/font-awesome/css/font-awesome.min.css);

html { height:100%; }
body { min-height:100%; }

body {
	background:#000;
	font-family:"微軟正黑體", "LiHei Pro", "新細明體", sans-serif;
	color:#333;
	font-size:15px;
	line-height:1.5;
	color:#000;
	width:100%;
}

img { display:block;}

a { color:#314F7D; text-decoration:none; }
a:hover { color:#2DA7E0; }
/* CSS3 漸變效果 */
a {                                   /* Browser Support: http://www.w3schools.com/css/css3_transitions.asp */
	-webkit-transition:all 0.5s ease; /* for Chrome and Safari */
	-moz-transition:all 0.5s ease;    /* for Firefox */
	-o-transition:all 0.5s ease;      /* for Opera */
	-ms-transition:all 0.5s ease;
	transition:all 0.5s ease;
}

[class*="col-"] {  /* 套用在class屬性的值包含 col- 的樣式 */
	float:left;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

.col-2 { width:50%; }

.col-3 { width:33.33%; }

.col-4 { width:25%; }

.col-5 { width:20%; }

.b-box {
	-webkit-box-sizing:border-box;  /* Safari, Chrome */
	-moz-box-sizing:border-box;     /* Firefox */
	box-sizing:border-box;          /* IE8+, Opera */
}

a.more {
	display:inline-block;
	font-size:14px;
	color:#FFF;
	background:#AD0521;
	border:1px solid #A9031E;
	border-radius:3px;
	line-height:28px;
	padding:0px 12px;
}

a.more:hover {
	opacity:0.8;
}

.m_menu { display:none; }

/*** 網頁頭 ***/
#header {
	background:url(../images/mv_bg.jpg) repeat-x center center;
}
#header header {
	width:980px;
	margin:0 auto;
	position:relative;
	z-index:9999;
}

#header h1 {
	background:url(../images/nav-saya.png) no-repeat;
	width:96px;
	height:94px;
	position:absolute;
	top:12px;
	left:50%;
	margin-left:-40px;
	text-indent:-9999px;
}

#header h1 a {
	display:block;
	width:96px;
	height:94px;
	box-shadow:3px 6px 12px #333;
}

#header ul {
	background:url(../images/nav-bg.png) no-repeat;
	padding:27px 78px 0 94px;
}

#header ul li {
	float:left;
}

#header ul li.nav03 {
	margin-left:96px;
}

#header ul li img {  /* 與 :hover img 搭配，產生滑鼠滑過圖片 縮放+透明+漸變效果 */
	-webkit-transition:all 0.3s ease; /* for Chrome and Safari */
	-moz-transition:all 0.3s ease;    /* for Firefox */
	-o-transition:all 0.3s ease;      /* for Opera */
	-ms-transition:all 0.3s ease;
	transition:all 0.3s ease;
}

#header ul li:hover img {
	margin-top:-3px;
}

/*** MV ***/
.mv_bg {
	background:url(../images/mv_bg.jpg) repeat-x center center;
	margin-top:-75px;
	position:relative;
}

#mv {
	width:980px;
	height:294px;
	margin:0 auto;
	position:relative;
}

/*** 內容 ***/
section {
	width:980px;
	margin:0 auto;
}

/*** 頁尾資訊 ***/
#footer {}

#footer footer {
	width:980px;
	margin:0 auto;
	position:relative;
	/*z-index:9999;*/
}

#footer h2 {
	background:url(../images/nav-saya.png) no-repeat;
	width:96px;
	height:94px;
	position:absolute;
	top:0;
	left:50%;
	margin-left:-40px;
	text-indent:-9999px;
}

#footer h2 a {
	display:block;
	width:96px;
	height:94px;
	box-shadow:3px 6px 12px #333;
}

#footer ul.footnavi {
	background:url(../images/nav-bg-footer.png) no-repeat;
	padding:27px 78px 0 94px;
}

#footer ul.footnavi li {
	float:left;
}

#footer ul.footnavi li.nav03 {
	margin-left:96px;
}

#footer ul.footnavi li img {  /* 與 :hover img 搭配，產生滑鼠滑過圖片 縮放+透明+漸變效果 */
	-webkit-transition:all 0.3s ease; /* for Chrome and Safari */
	-moz-transition:all 0.3s ease;    /* for Firefox */
	-o-transition:all 0.3s ease;      /* for Opera */
	-ms-transition:all 0.3s ease;
	transition:all 0.3s ease;
}

#footer ul.footnavi li:hover img {
	margin-top:-3px;
}

#footer ul.m_footnavi {
	display:none;
}

#footer .doggysite {
	display:none;
}

#footer2 {
	background-color:#331208;
	padding:10px 0;
}

h5.copyright {
	color:#FFF;
	font-size:14px;
	font-weight:normal;
	text-align:center;
}

/*** Responsive Web Design 響應式網頁 ***/
@media screen and (max-width: 980px) {
#header {
	display:none;
}

.mv_bg {
	margin-top:0 !important;
}

/*** 手機版選單 ***/
.m_menu {
	display:block;
	width:100%;
	box-shadow:0 2px 5px rgba(0,0,0,0.3);
	
	position:fixed;
	top:0;
	left:0;
	z-index:999;
}

.m_menu .overlay {
	display:none;
	background:rgba(0,0,0,0.5);
	width:100%;
	height:100%;
	padding-bottom:60px;
	
	position:fixed;
	top:0;
	left:0;
	z-index:10;
}

/* 手機版選單抬頭 */
.m_menu .titleBar {
	background:#341308;
}

.m_menu .titleBar a.toggle {
	display:block;
	float:left;
	width:60px;
	height:60px;
	line-height:60px;
	background:#6A0C06;
	color:#A95A56;
	font-size:24px;
	text-align:center;
	cursor:pointer;
}

.m_menu .titleBar .title {
	/*float:left;*/
	position:absolute;
	left:50%;
	top:0;
	margin-left:-48px;
}
	
.m_menu .titleBar .title img {
	display:block;
	width:auto;
	height:80px;
}

.m_menu .titleBar .rightBox {
	float:right;
	padding:6px 12px 0 0;
}

.m_menu .titleBar .rightBox > a {
	display:inline-block;
}

/* 手機版選單項目 */
.m_menu .navPanel {
	background:#6A0C06;
	width:230px;
	height:100%;
	padding-bottom:50px;
	overflow-y:auto;
	
	position:fixed;
	left:-230px;
	top:0;
	z-index:11;
	
	-webkit-transition:all 0.5s ease; /* for Chrome and Safari */
	-moz-transition:all 0.5s ease;    /* for Firefox */
	-o-transition:all 0.5s ease;      /* for Opera */
	-ms-transition:all 0.5s ease;
	transition:all 0.5s ease;
}

.m_menu .navPanel.open {
	left:0;
}

.m_menu .navPanel h4 {
	background:#341308;
	font-size:15px;
	font-weight:normal;
	color:#FFF;
	padding:20px;
	text-transform:uppercase;
}

.m_menu ul.nav {
	border-bottom:2px solid #85211A;
}

.m_menu ul.nav li {
	border-top:2px solid #85211A;
}

.m_menu ul.nav li a {
	display:block;
	color:#FFF;
	font-size:16px;
	font-weight:bold;
	padding:20px 16px;
}

.m_menu ul.nav li b {
	font-size:12px;
	font-style:italic;
	margin-left:10px;
	text-transform:uppercase;
}

/*** 內容 ***/
section {
	width:100%;
}

/*** 頁尾資訊 ***/
#footer footer {
	width:100% !important;
}

#footer h2 {
	display:none;
}

#footer ul.footnavi {
	display:none;
}

#footer ul.m_footnavi {
	display:block;
	background:#FFF;
	border-top:5px solid #F9E8D4;
	border-left:5px solid #F9E8D4;
	margin:20px;
}

#footer ul.m_footnavi li {
	float:left;
	border-right:5px solid #F9E8D4;
	border-bottom:5px solid #F9E8D4;
	width:50%;
}

#footer ul.m_footnavi li a {
	display:block;
	color:#330507;
	font-size:16px;
	text-align:center;
	line-height:44px;
	padding:0 15px;
}

#footer .doggysite {
	display:block;
	width:100%;
	text-align:center;
}

#footer .doggysite a {
	display:inline-block;
	vertical-align:middle;
}

}

@media screen and (max-width: 480px) {
/* 手機版選單項目 */
.m_menu .titleBar .rightBox {
	padding:12px 12px 0 0;
}

.m_menu .titleBar .rightBox > a img {
	width:120px;
}

/*** 頁尾資訊 ***/
#footer ul.m_footnavi li {
	float:none;
	width:100%;
}

}