/*@import url(https://fonts.googleapis.com/css?family=Josefin+Sans:300,400);*/
  /*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;} 
/* End hide from IE-mac */
* {box-sizing: border-box;}
h1, h2, h3, h4, h5, h6 {margin: 0; padding: 0; line-height: 1.2;}
map *:focus {outline:none;}
a {outline: none; /*for Firefox Google Chrome*/ behavior:expression(this.onFocus=this.blur()); /*for IE*/}
* {
  margin: 0;
  padding: 0;
}
html, body {
  height: 100%;
  font-family:"微軟正黑體", "Microsoft JhengHei", "新細明體", "PMingLiU";
  overflow-x: hidden;
  scroll-behavior: smooth;
}
section {
  position: relative;
  width: 100%;
  height: 100%;
}
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 */
}
h1 {
	font-family: 'Noto Serif TC', serif;
	font-weight: 900;
	font-size: 40px;
	margin: 0 auto 70px;
}
h2 {
	font-family: 'Noto Serif TC', serif;
	font-weight: 900;
	font-size: 36px;
	background: #fff;
	display: inline-block;
	padding: 5px 20px;
	margin-bottom: 70px;
}
.word {
	font-size: 22px;
	line-height: 1.7;
}
.title {
	margin-bottom: 70px;
	padding-top: 120px;
}

.scrollup {
	display: block;
    width:80px;
    height:80px;
    position:fixed;
    bottom:20px;
    right:30px;
    background: url(../images/scrollup.png) no-repeat;
    background-size: cover;
    z-index: 99;
    -webkit-filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.5));
  	filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.5));
  	opacity: .7;
  	transition: .3s;
}
.scrollup:hover {
  opacity: 1;
}
@media (max-width: 820px) {
	.scrollup {
		width:60px;
    	height:60px;
		bottom:10px;
	    right:10px;
	}
}

.scrolldown a {
  position: absolute;
  bottom: -30px;
  left: 46.5%;
  z-index: 2;
  display: inline-block;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  transition: opacity .3s;
  width: 100px;
  height: 100px;
  background: url(../images/scrolldown.png);
}
.scrolldown a:hover {
  opacity: .5;
}
.s-link a {
  padding-top: 60px;
  -webkit-filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.5));
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.5));
}

.artlogo {
	float: right;
	padding: 30px 30px 0 0;
}
@media (max-width: 820px) {
	.artlogo {
		width: 50px;
		padding: 20px 10px 0 0;
	}
}

.fb {
	position: fixed;
	bottom: 45px;
	right: 100px;
	z-index: 99;
}
@media (max-width: 820px) {
	.fb {
		bottom: 10px;
		left: 0px;
	}
}


#section01 {
	background:url(../images/topbg2.jpg) 50% 70% no-repeat;
	background-size: cover;
}
.top1 {
	position: absolute;
	top: 30px;
	left: 30px;
}
.top2 {
	position: absolute;
	top: 30px;
	right: 5%;
}
.top3 {
	position: absolute;
	top: 200px;
	left: 50px;
}
.top-m820, .top-m {
	display: none;
}
@media (max-width: 820px) {
	#section01 {
		background:url(../images/topbg2.jpg) 70% 120% no-repeat #F4F1DD;
		background-size: 200%;
	}
	.top-m820 {
		width: 100%;
		margin: 0 auto;
		padding-top: 20px;
		display: block;
	}
	.top-m {
		display: none;
	}
}
@media (max-width: 576px) {
	#section01 {
		background:url(../images/topbg2.jpg) 78% 110% no-repeat #F4F1DD;
		background-size: 200%;
	}
	.top-m {
		width: 95%;
		padding-top: 20px;
		margin: 0 auto;
		display: block;
	}
	.top-m820 {
		display: none;
	}
}

#section02 {
	background:url(../images/artword1.png) 50% 50% no-repeat, url(../images/artbg1.jpg) top center no-repeat;
}
@media (max-width: 820px) {
	#section02 {
		background:url(../images/artword1_m.png) 50% 50% no-repeat, url(../images/artbg1.jpg) 55% 50% no-repeat;
		background-size: 80%, cover;
	}
}

#section03 {
	background:url(../images/artword2.png) 90% 50% no-repeat, url(../images/artbg2.jpg) top center no-repeat;
}
@media (max-width: 820px) {
	#section03 {
		background:url(../images/artword2_m.png) 50% 70% no-repeat, url(../images/artbg2.jpg) 50% 50% no-repeat;
		background-size: 80%, cover;
	}
}

#section04 {
	background:url(../images/artword3.png) 85% 65% no-repeat, url(../images/artbg3.jpg) 50% 45% no-repeat;
	background-size: auto, cover;
}
#section04 .artlogo {
	-webkit-filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 10));
  	filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 10));
}
@media (max-width: 1440px) {
	#section04 {
		background:url(../images/artword3.png) 95% 65% no-repeat, url(../images/artbg3.jpg) 50% 50% no-repeat;
		background-size: auto, cover;
	}
}
@media (max-width: 1366px) {
	#section04 {
		background:url(../images/artword3.png) 99% 65% no-repeat, url(../images/artbg3.jpg) 50% 50% no-repeat;
		background-size: auto, cover;
	}
}
@media (max-width: 1280px) {
	#section04 {
		background:url(../images/artword3.png) 99% 65% no-repeat, url(../images/artbg3.jpg) 50% 50% no-repeat;
		background-size: 43%, cover;
	}
}
@media (max-width: 1024px) {
	#section04 {
		background:url(../images/artword3.png) 99% 60% no-repeat, url(../images/artbg3.jpg) 55% 50% no-repeat;
		background-size: 43%, cover;
	}
}
@media (max-width: 820px) {
	#section04 {
		background:url(../images/artword3_m.png) 50% 80% no-repeat, url(../images/artbg3.jpg) 10% 50% no-repeat;
		background-size: 80%, cover;
	}
}

#section05 {
	background:url(../images/artword4.png) 50% 70% no-repeat, url(../images/artbg4.jpg) top center no-repeat;
	background-size: auto, cover;
}
@media (max-width: 820px) {
	#section05 {
		background:url(../images/artword4_m.png) 50% 90% no-repeat, url(../images/artbg4.jpg) 70% 50% no-repeat;
		background-size: 80%, cover;
	}
}
#section06 {
	background:url(../images/artword5.png) 50% 60% no-repeat, url(../images/artbg5.jpg) top center no-repeat;
	background-size: auto, cover;
}
#section06 .artlogo {
	-webkit-filter: drop-shadow(0px 0px 10px rgba(255, 255, 255, 10));
  	filter: drop-shadow(0px 0px 10px rgba(255, 255, 255, 10));
}
@media (max-width: 820px) {
	#section06 {
		background:url(../images/artword5_m.png) 50% 70% no-repeat, url(../images/artbg5.jpg) 10% 50% no-repeat;
		background-size: 80%, cover;
	}
}

#section07 {
	height: auto;
	background: #00252c;
	color: #fff;
	padding: 50px 0px 120px;
	background: url(../images/waveline-1.png) bottom center no-repeat #00252c;
}
#section07 .fl-md {
	width: 45%;
}
#section07 .fr-md {
	width: 50%;
}
.menu {
	color: #fff;
	font-size: 20px;
	border-bottom: solid 1px #eee;
	background: url(../images/menubg.png) #00252c;
	margin-bottom: 0;
	padding-top: 30px;
	position: sticky;
	top: 0;
	z-index: 9;
}
.menu a, .menu a:visited {
	color: #fff;
	text-decoration: none;
	padding: 0 30px;
	display: inline-block;
}
.menu a:hover {
	transition: .3s;
	opacity: .5;
}
.menu-box {
	max-width: 1280px;
	margin: 0 auto;
	text-align: center;
	margin-bottom: 30px;
}
.anchor { }
@media (max-width: 820px) {
	.menu {
		font-size: 18px;
		padding: 15px 0 0;
	}
	.menu a, .menu a:visited {
		padding: 0 10px;
	}
	.menu-box {
		line-height: 2;
		margin-bottom: 15px;
	}
	.m-line {
		border-right: solid 1px #666;
	}
}
.pic-box img {
	width: 100%;
}
.pic-box2 .fl-md, .pic-box2 .fr-md {
	width: 48% !important;
	margin-top: 20px;
	text-align: center;
}
.pic-box a:hover {
	transition: .3s;
	-webkit-filter:brightness(.5);
}
.small {
	font-size: 16px;
	margin-top: 10px;
	display: inline-block;
}
@media (max-width: 820px) {
	#section07 {
		padding: 0px 0px 120px;
	}
	#section07 .fl-md, #section07 .fr-md {
		float: none;
		width: 100%;
	}
	.pic-box2 .fl-md, .pic-box2 .fr-md {
		float: none;
		width: 100% !important;
	}
	.pic-box {
		margin-top: 20px;
	}
}

#section08 {
	height: auto;
	color: #000;
	padding: 0px 30px 50px;
}
#section08 .fl-md {
	width: 48%;
}
#section08 .fl-md img {
	width: 100%;
}
#section08 .fr-md {
	width: 45%;
	margin-top: 25px;
}
@media (max-width: 820px) {
	#section08 {
		padding: 0px 0px 50px;
	}
	#section08 .fl-md, #section08 .fr-md, #section08 .fl-md img {
		float: none;
		width: 100%;
	}
	.t-fix {
		width: 100%;
	}
}

#section09 {
	height: auto;
	color: #000;
	padding: 50px 30px;
	background: url(../images/bg1.jpg) bottom center no-repeat fixed;
}
.flex-container {
  display: flex;
  flex-wrap: wrap;
  font-size: 18px;
  text-align: center;
  background: url(../images/boxbg.png);
  border-radius: 10px;
  padding: 30px;
}
.flex-item {
  padding: 10px;
  flex: 20%;
}
.flex-book {
	display: flex;
	flex-direction:column;
}
.flex-book-item {
	width: 100%;
}
.flex-book img {
	width: 100%;
	-webkit-filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5));
  	filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5));
}
.flex-book h1 {
	font-weight: 900;
	font-size: 20px;
	margin: 10px auto 0;
}
.flex-book a,.flex-book a:visited {
	width: 100%;
	color: #fff;
	font-size: 20px;
	font-weight: 900;
	border-radius: 50px;
	display: inline-block;
	background: #d7583d;
	text-decoration: none;
	padding: 10px 0;
	transition: .3s;
}
.flex-book a:hover {
	background: #f56647;	
}
.book-box {
	background: #fff;
	border-radius: 10px;
	padding: 10px;
	text-align: left;
	line-height: 1.5;
	margin: 15px auto;
	-webkit-filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.3));
  	filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.3));
}
.book-box-t {
	border-bottom: solid 1px #ccc;
	padding-bottom: 15px;
	margin-bottom: 15px;
}
@media (max-width: 820px) {
	#section09 {
		padding: 0px 0px 50px;
		background: url(../images/bg1_m.jpg) top center no-repeat;
		background-size: cover;
	}
	.flex-container {
		padding: 15px;
	}
	.flex-item {
	    flex: 100%;
	}
}

#section10 {
	height: auto;
	color: #000;
	padding: 50px 30px;
	background: url(../images/bg2.jpg) bottom center no-repeat fixed;
}
.off-btn {
	width: 100%;
	color: #fff;
	font-size: 20px;
	font-weight: normal;
	border-radius: 50px;
	display: inline-block;
	background: #8b8b8b;
	text-decoration: none;
	padding: 10px 0;
}
@media (max-width: 820px) {
	#section10 {
		padding: 0px 0px 50px;
		background: url(../images/bg2_m.jpg) top center no-repeat;
		background-size: cover;
	}
}

#section11 {
	height: auto;
	color: #000;
	padding: 50px 30px 120px;
	background: url(../images/bg3.jpg) 50% 85% no-repeat, url(../images/waveline-2.png) bottom center no-repeat, #F4F1DD;
}
#section11 .flex-container {
	background: none;
	align-items: stretch;
	padding: 0;
	margin-bottom: 20px;
}
#section11 .flex-item {
	flex: 1;
	background: #fff;
	margin: 0 8px;
}
.flex-author {
	/*display: flex;
	flex-direction:column;
	align-items: stretch;*/
	height: 470px;
	position:relative;
}
.flex-author-item {
	width: 100%;
	/*flex: 1;*/
}
.a-name {
	font-family: 'Noto Serif TC', serif;
	font-weight: 300;
	font-size: 22px;
}
.a-title {
	font-size: 17px;
	color: #00749a;
}
.a-txt {
	color: #666;
	text-align: left;
	line-height: 1.5;
}
.a-pic {
	margin-top: 15px;
	position:absolute;
	bottom: 0;
	right: 0;
	
}
.a-pic img {
	vertical-align: bottom;
}
.h-fix .flex-author {
	height: 520px;
}
@media (max-width: 1024px) {
	.flex-author {
		height: 510px;
	}
	.h-fix .flex-author {
		height: 570px;
	}
}
@media (max-width: 820px) {
	#section11 {
		padding: 0px 0px 100px;
		background: url(../images/bg3.jpg) 85% 95% no-repeat, url(../images/waveline-2.png) bottom center no-repeat, #F4F1DD;
	}
	#section11 .flex-container {
		flex-direction: column;
		margin-bottom: 0px;
	}
	#section11 .flex-item {
		margin-bottom: 15px;
	}
	.a-pic {
		position: static;
	}
	.flex-author, .h-fix .flex-author {
		height: auto;
	}
}

#section12 {
	height: auto;
	color: #000;
	padding: 0px 30px 0px;	
}
#section12 .main-box {
	padding-bottom: 130px;
}
.photo {
	float: left;
	margin-right: 50px;
}
.p1 {
	position: absolute;
	top: 50px;
	right: 150px;
}
.p2 {
	position: absolute;
	bottom: 0;
	right: 400px;
}
@media (max-width: 820px) {
	#section12 {
		padding: 0px 0px 0px;
	}
		#section12 .main-box {
		padding-bottom: 0px;
	}
	.photo {
		float: none;
		width: 100%;
		margin-bottom: 15px;
	}
	.p1, .p2 {
		position: static;
	}
	.p1 {
		width: 50px;
	}
	.p2 {
		float: right;
		margin-top: 15px;
		width: 150px;
	}
}

#section13 {
	height: auto;
	background: #499cac;
	color: #000;
	padding: 50px 30px 30px;	
	background: url(../images/waveline-3.png) top center no-repeat #499cac;
}
#section13 .fl-md, #section13 .fr-md {
	width: 49%;
	background: #fff;
}
.setbook {
	font-size: 22px;
	padding: 20px;
	text-align: center;
}
.setbook img {
	margin-bottom: 15px;
}
.setbook hr {
	height: 1px;
    background-color: #ddd;
    border: none;
}
.setbook-link {
	font-size: 16px;
	padding: 15px;
	text-align: center;
}
.setbook-link a,.setbook-link a:visited {
	border-radius: 30px;
	border: solid 1px #000;
	display: inline-block;
	text-decoration: none;
	color: #000;
	padding: 3px 15px;
	margin: 8px 5px 0;
	transition: .3s;
}
.setbook-link a:hover {
	background: #000;
	color: #fff;
}
.link-fix.setbook-link a {
	margin: 8px 3px 0;
}
.gap {
	height: 418px;
}
@media (max-width: 820px) {
	#section13 {
		padding: 100px 0px 50px;
	}
	#section13 .fl-md, #section13 .fr-md {
		width: 100%;
		float: none;
		margin-bottom: 20px;
	}
	.setbook img {
		width: 100%;
	}
	.gap {
		height: auto;
	}
}

#section14 {
	height: auto;
	background: #00252c;
	color: #fff;
	padding: 150px 30px 80px;
	background: url(../images/waveline-4.png) top center no-repeat #00252c;
}
#section14 .fl-md, #section14 .fr-md {
		width: 49%;
	}
#section14 .bn img {
	width: 100%;
}
#section14 a:hover {
	transition: .3s;
	-webkit-filter:brightness(.5);
}
.p3 {
	position: absolute;
	top: -50px;
	left: 130px;
}
@media (max-width: 820px) {
	#section14 {
		padding: 80px 0px 50px;
	}
	#section14 .fl-md, #section14 .fr-md {
		width: 100%;
		float: none;
		margin-bottom: 20px;
	}
	.p3 {
		position: static;
		width: 30%;
	}
}

.footer {
	background: #00252c;
}
.footer-bg {
	height: 118px;
	background: url(../images/footer-pic.png) top center no-repeat;
}
.footer-box {
	background: #52a744;
}
.footer-cont {
	max-width: 1280px;
	margin: 0 auto;
	padding: 30px;
	color: #fff;
	font-size: 16px;
	line-height: 1.5;
}
.footer-cont a {
	margin-right: 5px;
}
.footer-cont .fl-md {
	margin-right: 70px;
}
@media (max-width: 820px) {
	.footer-bg {
		background: url(../images/footer-pic.png) 78% 50% no-repeat;
	}
	.footer-cont .fl-md {
		margin-right: 0px;
		margin-top: 15px;
	}
	.footer-cont {
		padding-bottom: 60px;
	}

}

.main-box {
  position: relative;
  max-width: 1280px;
  height: 100%;
  margin: 0 auto;
  padding: 0 30px;
  /*text-align: center;
  display: flex;
  justify-content: center;
  align-items: center; */
}

.hide-md {
	display: none;
}
.fl-md {
	float: left;
}
.fr-md {
	float: right;
}

@media (max-width: 820px) {
  	.hide-sm {
	  display: none;
	  visibility: hidden;
	}
	.hide-md {
	  display: block;
	}
}