@charset "utf-8";

/*Google fonts*/
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
@import url(https://fonts.googleapis.com/earlyaccess/cwtexkai.css);
@import url(https://fonts.googleapis.com/earlyaccess/cwtexming.css);

/*clear float*/ 
.clearfix:after { content: ".";	display: block;	height: 0; clear: both; visibility: hidden; }
.clearfix { display: inline-table; } 
/* Hides from IE-mac \*/ 
* html .clearfix { height: 1%; }
.clearfix { display: block; } 
map *:focus { outline:none; }
a { outline: none; /*for Firefox Google Chrome*/ behavior:expression(this.onFocus=this.blur()); /*for IE*/ }
ol, ul { list-style: none; }
dl, dt, dd, ol, ul, li  { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
h1, h2, h3, h4, h5, h6 { margin: 0;	padding: 0;	border: 0; vertical-align: baseline; }
* {
	box-sizing: border-box;
}
img {
	border:0;
}
ol, ul, li {
	list-style:none;
	margin:0;
	padding:0;
	border:0;
	font-size:100%;
	font:inherit;
	vertical-align:baseline;
}
body, pre, .overlay {
	font-size:23px;
	font-family: 'Noto Sans TC', sans-serif;
}
body {
	margin:0;
}
pre {
    /*white-space: pre-line;保留換行,合併空格,遇到父元素邊界自動換行*/
    word-wrap: break-word;      /* IE 5.5-7 */
    white-space: -moz-pre-wrap; /* Firefox 1.0-2.0 */
    white-space: pre-wrap;      /* Modern browsers */
    line-height: 2;
}

.scrollup{
    width:70px;
    height:70px;
    opacity:0.95;
    position:fixed;
    bottom:30px;
    right:30px;
    display:none;
    background: url(../images/icon_top.png) no-repeat;
}

.fb-share-button {
	float: right;
}

.top-box {
	background: url(../images/topbg.jpg) no-repeat top center;
	height: 1300px;
}
.menu-box {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	border-bottom: solid 1px #aca48c;
	background: url(../images/boxbg.png);
	padding: 20px;
}
.menu {
	max-width: 1100px;
	margin: 0 auto;
}
.top-t {
	max-width: 1100px;
	padding-top: 100px;
	margin: 0 auto;
}
.top-t-m {
	display: none;
}
.top-t img, .t img {
	display: block;
	margin: 0 auto;
}

.t {
	display: block;
}
.t-m {
	display: none;	
}

.zone-1 {
	background: url(../images/bg2.jpg) no-repeat top center fixed #f4f5f9;
	margin: 0 auto;
}
.zone-1 img {
	margin-top: 30px;
}
.zone-1 .pic-w img {
	width: 527px;
}
.main {
	max-width: 1100px;
	margin: 0 auto;
	padding: 60px 20px;
}

.md-fl {
	float: left;
}
.md-fr {
	float: right;
}
.shadow {
	-webkit-filter: drop-shadow(15px 15px 10px rgba(0, 0, 0, 0.3));
    filter: drop-shadow(15px 15px 10px rgba(0, 0, 0, 0.3));
}
.text-box {
	width: 45%;
}

.zone-2, .zone-5 {
	background: url(../images/bg3.jpg) top center fixed;
	margin: 0 auto;
}
.zone-2 .pic-w-1 img {
	width: 560px;
	margin-top: 10px;
}
.zone-2 .pic-w-2 img {
	width: 448px;
	margin-top: 10px;
}

.zone-3 {
	background: url(../images/bg4.jpg) no-repeat bottom center #fff;
	margin: 0 auto;
}
.zone-3 .clearfix img, .zone-4 .clearfix img {
	width: 510px;
}

.zone-4 {
	background: url(../images/bg5.jpg) no-repeat bottom center #fff;
	margin: 0 auto;
}
.zone-4 .t img {
	width: auto;
}
.zone-5 .pic-w img {
	width: 800px;
}
.zone-6 {
	background: #fff;
}
.zone-6 span {
	font-family: 'cwTeXKai', serif;
	font-weight: 800;
	padding: 5px 5px;
	border: solid 1px #000;
	margin-right: 10px;
	display: inline-block;
}
img.book {
	width: 500px;
}
.info-box {
	width: 51%;
	font-size: 20px;
	margin-top: 180px;
}
.price {
	font-size: 23px;
	margin-top: 40px;
}
.price strong {
	color: #b53619;
}
.price a, .price a:visited {
	font-size: 20px;
	background: #b53619;
	color: #fff;
	text-decoration: none;
	padding: 5px 20px 8px;
	display: inline-block;
	letter-spacing: 3px;
	transition: .3s;
	text-align: center;
}
.price a:hover {
	background: #000;
}
.price b {
	display: inline-block;
	font-weight: normal;
	margin-right: 20px;
}

a img:hover {
	-webkit-filter:brightness(.7);	
}

@media (max-width: 992px) {
	iframe, .md-fl img, .md-fr img, .text-box,
	.zone-3 .clearfix img, .zone-4 .clearfix img,
	.zone-1 .pic-w img, .zone-2 .pic-w-1 img, .zone-2 .pic-w-2 img, .zone-5 .pic-w img {
		width: 100%;
	}
	.md-fl, .md-fr {
		float:none;
	}
	.top-t, .t {
		display: none;
	}
	.top-t-m, .t-m {		
		display: block;
	}
	.top-t-m img {
		width: 100%;
	}
	.top-box {
		background: none;
		height: auto;
	}
	.menu img {
		width: 130px;
	}
	.main {
		padding: 40px 20px;
	}
	.zone-1 {
		background-attachment: scroll;
		background-position: bottom;
		background-size: contain;
	}
	.zone-2, .zone-5 {
		background-attachment: scroll;
	}
	.zone-1 img {
		margin-top: 0px;
	}
	.info-box {
		width: 100%;
		margin-top: 20px;
		text-align: center;
	}
	.info-box span {
		margin-bottom: 10px;
	}
	.price {
		margin: 20px auto;
		text-align: center;
	}
	.price a {
		width: 100%;
		margin-top: 10px;
	}
	.price b {
		margin-right: 0;
	}
	.scrollup{
	    bottom:5px;
	    right:5px;
	    background-size: 70%;
	}
}