@charset "utf-8";

/* == 全部共用區 =============================== */
* {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	/*寬和高不會和padding加在一起(舊)*/
	box-sizing: border-box;
	/*寬和高不會和padding加在一起(新)*/
}

html {
	-webkit-text-size-adjust: none;
	/*在iOS旋轉手機畫面時鎖定文字不放大*/
}

body {
	background-image: url(../images/background/top_bg.jpg);
	background-repeat: repeat-x;
	background-color: #493f3a;
}

/* == 桌機版型區 =============================== */

@media screen and (min-width: 1025px) {

	#header {
		width: 1260px;
		height: 120px;
		margin: 20px auto 0;
	}

	#logo {
		float: left;
		width: 300px;
		height: 100px;
		background-image: url(../images/wicca_logo.png);
		overflow: hidden;
		white-space: nowrap;
		font-size: 0px;
		text-indent: -9999px;
		z-index: 1;
	}

	#logo a {
		background: url(../images/wicca_logo.png) top left no-repeat;
		width: 300px;
		height: 100px;
		text-indent: -9999px;
		display: block;
		white-space: nowrap;
	}

	#logo a:hover {
		background: url(../images/wicca_logo.png) top left no-repeat;
		text-align: center;
	}

	#menu {
		float: right;
		width: 945px;
		height: 120px;
	}

	#menu ul {
		float: right;
		width: 880px;
		height: 60px;
		margin-top: 30px;
	}

	#menu ul li {
		float: left;
	}

	#menu ul li a {
		display: block;
		height: 60px;
		text-indent: -9999px
	}

	#menu ul li a.item_01 {
		width: 197px;
		background: url(../images/menu.jpg) no-repeat left top;
	}

	#menu ul li a.item_01:hover {
		width: 197px;
		background: url(../images/menu_hover.jpg) no-repeat left top;
	}

	#menu ul li a.item_01active {
		width: 197px;
		background: url(../images/menu_hover.jpg) no-repeat left top;
	}

	#menu ul li a.item_02 {
		width: 234px;
		background: url(../images/menu.jpg) no-repeat -197px top;
	}

	#menu ul li a.item_02:hover {
		width: 234px;
		background: url(../images/menu_hover.jpg) no-repeat -197px top;
	}

	#menu ul li a.item_02active {
		width: 234px;
		background: url(../images/menu_hover.jpg) no-repeat -197px top;
	}

	#menu ul li a.item_03 {
		width: 293px;
		background: url(../images/menu.jpg) no-repeat -431px top;
	}

	#menu ul li a.item_03:hover {
		width: 293px;
		background: url(../images/menu_hover.jpg) no-repeat -431px top;
	}

	#menu ul li a.item_03active {
		width: 293px;
		background: url(../images/menu_hover.jpg) no-repeat -431px top;
	}

	#menu ul li a.item_04 {
		width: 156px;
		background: url(../images/menu.jpg) no-repeat -724px top;
	}

	#menu ul li a.item_04:hover {
		width: 156px;
		background: url(../images/menu_hover.jpg) no-repeat -724px top;
	}

	#menu ul li a.item_04active {
		width: 156px;
		background: url(../images/menu_hover.jpg) no-repeat -724px top;
	}

	#header .fans {
		position: absolute;
		top: 55px;
		left: 90%;
		width: 130px;
	}

	#header .fans a {
		padding-right: 10px;
	}

	/*    visual_ad_首頁視覺        */
	/***********************************************/
	#visual {
		width: 100%;
		margin: 0 auto;
	}

	#visual img {
		width: 100%;
		height: 100%;
	}

	/*    footer         */
	/***********************************************/
	#footer {
		width: 100%;
		height: 100px;
		background-color: #493f3a;
		font-size: 1em;
		clear: both;
	}

	#footer_box {
		width: 1260px;
		height: 57px;
		margin: 0 auto;
		padding-top: 43px;
		background-color: #493f3a;
	}

	#footer_nav {
		float: left;
		width: 720px;
		height: 57px;
	}

	#footer_nav ul {
		padding-left: 30px;
		font-family: Arial, Helvetica, "微軟正黑體", "Microsoft JhengHei", "微软雅黑体", "Microsoft YaHei", "新細明體", "PMingLiU", "細明體", "MingLiU", "標楷體", "DFKai-sb", "宋体", SimSun, sans-serif;
		text-align: center;
		font-size: 1em;
	}

	#footer_nav li {
		float: left;
		line-height: 14px;
		border-left: 1px solid #65605d;
		width: 164px;
	}

	#footer_nav li a {
		color: #cebfc7;
		line-height: 17px;
	}

	#footer_nav li a:hover {
		color: #ffeaeb;
	}

	#footer_nav li.break {
		background-image: none;
	}

	/*    copyright 版權資訊        */
	/***********************************************/
	#copyright_info {
		float: right;
		width: 500px;
		text-align: right;
		padding-right: 30px;
		font-family: Times, serif;
		font-size: 0.8em;
		letter-spacing: 1px;
		word-spacing: 0.58em;
		color: #9c9c9c;
	}

	#copyright_info a {
		color: #9c9c9c;
	}

	#copyright_info a:hover {
		color: #9c9c9c;
	}

	.fb-like {
		margin-left: -30px;
	}

}

@media screen and (min-width: 768px) and (max-width: 1070px) {
	#header .fans {
		position: absolute;
		top: 60px;
		left: 960px;
		width: 130px;
	}

	#header .fans a {
		padding-right: 10px;
	}
}

/* == 平板版型區 =============================== */

@media screen and (min-width: 768px) and (max-width: 1024px) {

	#header {
		width: 1260px;
		height: 120px;
		margin: 20px auto 0;
	}

	#logo {
		float: left;
		width: 300px;
		height: 100px;
		background-image: url(../images/wicca_logo.png);
		overflow: hidden;
		white-space: nowrap;
		font-size: 0px;
		text-indent: -9999px;
		z-index: 1;
	}

	#logo a {
		background: url(../images/wicca_logo.png) top left no-repeat;
		width: 300px;
		height: 100px;
		text-indent: -9999px;
		display: block;
		white-space: nowrap;
	}

	#logo a:hover {
		background: url(../images/wicca_logo.png) top left no-repeat;
		text-align: center;
	}

	#menu {
		float: right;
		width: 945px;
		height: 120px;
	}

	#menu ul {
		float: right;
		width: 880px;
		height: 60px;
		margin-top: 30px;
	}

	#menu ul li {
		float: left;
	}

	#menu ul li a {
		display: block;
		height: 60px;
		text-indent: -9999px
	}

	#menu ul li a.item_01 {
		width: 197px;
		background: url(../images/menu.jpg) no-repeat left top;
	}

	#menu ul li a.item_01:hover {
		width: 197px;
		background: url(../images/menu_hover.jpg) no-repeat left top;
	}

	#menu ul li a.item_01active {
		width: 197px;
		background: url(../images/menu_hover.jpg) no-repeat left top;
	}

	#menu ul li a.item_02 {
		width: 234px;
		background: url(../images/menu.jpg) no-repeat -197px top;
	}

	#menu ul li a.item_02:hover {
		width: 234px;
		background: url(../images/menu_hover.jpg) no-repeat -197px top;
	}

	#menu ul li a.item_02active {
		width: 234px;
		background: url(../images/menu_hover.jpg) no-repeat -197px top;
	}

	#menu ul li a.item_03 {
		width: 293px;
		background: url(../images/menu.jpg) no-repeat -431px top;
	}

	#menu ul li a.item_03:hover {
		width: 293px;
		background: url(../images/menu_hover.jpg) no-repeat -431px top;
	}

	#menu ul li a.item_03active {
		width: 293px;
		background: url(../images/menu_hover.jpg) no-repeat -431px top;
	}

	#menu ul li a.item_04 {
		width: 156px;
		background: url(../images/menu.jpg) no-repeat -724px top;
	}

	#menu ul li a.item_04:hover {
		width: 156px;
		background: url(../images/menu_hover.jpg) no-repeat -724px top;
	}

	#menu ul li a.item_04active {
		width: 156px;
		background: url(../images/menu_hover.jpg) no-repeat -724px top;
	}

	#header .fans {
		position: absolute;
		top: 60px;
		left: 960px;
		width: 130px;
	}

	#header .fans a {
		padding-right: 10px;
	}

	/*    visual_ad_首頁視覺        */
	/***********************************************/
	#visual {
		width: 100%;
		margin: 0 auto;
	}

	#visual img {
		width: 100%;
		height: 100%;
	}

	/*    footer         */
	/***********************************************/
	#footer {
		width: 100%;
		height: 100px;
		background-color: #493f3a;
		font-size: 1em;
		clear: both;
	}

	#footer_box {
		width: 1260px;
		height: 57px;
		margin: 0 auto;
		padding-top: 43px;
		background-color: #493f3a;
	}

	#footer_nav {
		float: left;
		width: 720px;
		height: 57px;
	}

	#footer_nav ul {
		padding-left: 30px;
		font-family: Arial, Helvetica, "微軟正黑體", "Microsoft JhengHei", "微软雅黑体", "Microsoft YaHei", "新細明體", "PMingLiU", "細明體", "MingLiU", "標楷體", "DFKai-sb", "宋体", SimSun, sans-serif;
		text-align: center;
		font-size: 1em;
	}

	#footer_nav li {
		float: left;
		line-height: 14px;
		border-left: 1px solid #65605d;
		width: 164px;
	}

	#footer_nav li a {
		color: #cebfc7;
		line-height: 17px;
	}

	#footer_nav li a:hover {
		color: #ffeaeb;
	}

	#footer_nav li.break {
		background-image: none;
	}

	/*    copyright 版權資訊        */
	/***********************************************/
	#copyright_info {
		float: right;
		width: 500px;
		text-align: right;
		padding-right: 30px;
		font-family: Times, serif;
		font-size: 0.8em;
		letter-spacing: 1px;
		word-spacing: 0.58em;
		color: #9c9c9c;
	}

	#copyright_info a {
		color: #9c9c9c;
	}

	#copyright_info a:hover {
		color: #9c9c9c;
	}

	.fb-like {
		margin-left: -30px;
	}


}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
	#visual {
		width: 1260px;
		margin: 0 auto;
	}

	#visual img {
		width: 1260px;
		height: auto;
	}
}

/* == 手機版型區 =============================== */

@media screen and (max-width: 767px) {
	#header {
		width: 1260px;
		height: 120px;
		margin: 20px auto 0;
	}

	#logo {
		float: left;
		width: 300px;
		height: 100px;
		background-image: url(../images/wicca_logo.png);
		overflow: hidden;
		white-space: nowrap;
		font-size: 0px;
		text-indent: -9999px;
		z-index: 1;
	}

	#logo a {
		background: url(../images/wicca_logo.png) top left no-repeat;
		width: 300px;
		height: 100px;
		text-indent: -9999px;
		display: block;
		white-space: nowrap;
	}

	#logo a:hover {
		background: url(../images/wicca_logo.png) top left no-repeat;
		text-align: center;
	}

	#menu {
		float: right;
		width: 945px;
		height: 120px;
	}

	#menu ul {
		float: right;
		width: 880px;
		height: 60px;
		margin-top: 30px;
	}

	#menu ul li {
		float: left;
	}

	#menu ul li a {
		display: block;
		height: 60px;
		text-indent: -9999px
	}

	#menu ul li a.item_01 {
		width: 197px;
		background: url(../images/menu.jpg) no-repeat left top;
	}

	#menu ul li a.item_01:hover {
		width: 197px;
		background: url(../images/menu_hover.jpg) no-repeat left top;
	}

	#menu ul li a.item_01active {
		width: 197px;
		background: url(../images/menu_hover.jpg) no-repeat left top;
	}

	#menu ul li a.item_02 {
		width: 234px;
		background: url(../images/menu.jpg) no-repeat -197px top;
	}

	#menu ul li a.item_02:hover {
		width: 234px;
		background: url(../images/menu_hover.jpg) no-repeat -197px top;
	}

	#menu ul li a.item_02active {
		width: 234px;
		background: url(../images/menu_hover.jpg) no-repeat -197px top;
	}

	#menu ul li a.item_03 {
		width: 293px;
		background: url(../images/menu.jpg) no-repeat -431px top;
	}

	#menu ul li a.item_03:hover {
		width: 293px;
		background: url(../images/menu_hover.jpg) no-repeat -431px top;
	}

	#menu ul li a.item_03active {
		width: 293px;
		background: url(../images/menu_hover.jpg) no-repeat -431px top;
	}

	#menu ul li a.item_04 {
		width: 156px;
		background: url(../images/menu.jpg) no-repeat -724px top;
	}

	#menu ul li a.item_04:hover {
		width: 156px;
		background: url(../images/menu_hover.jpg) no-repeat -724px top;
	}

	#menu ul li a.item_04active {
		width: 156px;
		background: url(../images/menu_hover.jpg) no-repeat -724px top;
	}

	#header .fans {
		position: absolute;
		top: 60px;
		left: 960px;
		width: 130px;
	}

	#header .fans a {
		padding-right: 10px;
	}

	/*    visual_ad_首頁視覺        */
	/***********************************************/
	#visual {
		width: 100%;
		margin: 0 auto;
	}

	#visual img {
		width: 100%;
		height: 100%;
	}

	/*    footer         */
	/***********************************************/
	#footer {
		width: 100%;
		height: 100px;
		background-color: #493f3a;
		font-size: 1em;
		clear: both;
	}

	#footer_box {
		width: 1260px;
		height: 57px;
		margin: 0 auto;
		padding-top: 43px;
		background-color: #493f3a;
	}

	#footer_nav {
		float: left;
		width: 720px;
		height: 57px;
	}

	#footer_nav ul {
		padding-left: 30px;
		font-family: Arial, Helvetica, "微軟正黑體", "Microsoft JhengHei", "微软雅黑体", "Microsoft YaHei", "新細明體", "PMingLiU", "細明體", "MingLiU", "標楷體", "DFKai-sb", "宋体", SimSun, sans-serif;
		text-align: center;
		font-size: 1em;
	}

	#footer_nav li {
		float: left;
		line-height: 14px;
		border-left: 1px solid #65605d;
		width: 164px;
	}

	#footer_nav li a {
		color: #cebfc7;
		line-height: 17px;
	}

	#footer_nav li a:hover {
		color: #ffeaeb;
	}

	#footer_nav li.break {
		background-image: none;
	}

	/*    copyright 版權資訊        */
	/***********************************************/
	#copyright_info {
		float: right;
		width: 520px;
		text-align: right;
		padding-right: 30px;
		font-family: Times, serif;
		font-size: 0.8em;
		letter-spacing: 1px;
		word-spacing: 0.58em;
		color: #9c9c9c;
	}

	#copyright_info a {
		color: #9c9c9c;
	}

	#copyright_info a:hover {
		color: #9c9c9c;
	}

	.fb-like {
		margin-left: -30px;
	}
}

@media only screen and (max-device-width: 767px) {
	#visual {
		width: 1260px;
		margin: 0 auto;
	}

	#visual img {
		width: 1260px;
		height: auto;
	}

}