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


/*===============共用區======================*/
/* ---reset.css--- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;}
	
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;}
	
body {line-height: 1;}

ol, ul {list-style: none;}

blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;}
table {
	border-collapse: collapse;
	border-spacing: 0;}
/* ---reset.css--- */


html{font-family:"微軟正黑體",Arial, Helvetica, sans-serif;-webkit-text-size-adjust:none;}


/*=======================================================網頁 start===================================================================*/
	
.banner{
	width:100%;
	max-width:980px;
	height:380px;
	max-height:;
	margin:0 auto;
	background-image:url(../img/980x380.jpg);
	background-size:100%;
	background-repeat:no-repeat;
	margin-top:80px;}
	
.paper{
	width:100%;
	height:0;
	padding-bottom:5.07%;
	background-image:url(../img/paper.png);
	background-size:cover;
	background-repeat:no-repeat;}
	
.bg{
	width:100%;
	height:auto;
	background-image:url(../img/bg.jpg);
	background-size:100%;
	padding-bottom:5%;}
	
	
.wrapper{
	width:1280px;
	height:auto;
	margin:0 auto;}

/******------ 第一區 開始 ------*******/
	
h2{
	width:800px;
	font-size:2.2em;
	font-weight:bold;
	text-align:center;
	margin:5% auto 0 auto;
	line-height:2;
	border-bottom:2px solid #000;
	letter-spacing:5px;}
	
h2:before{
	content:" ";
	display:block;
	margin-top:-80px;
	height:80px;
	visibility:hidden;}
	
.content{
	width:90%;
	height:auto;
	margin:2.5% 0 0 0;
	background-color:#FFF;
	border-radius:20px;
	-webkit-box-shadow: 0 0 10px #bdc3c4;
	-moz-box-shadow: 0 0 10px #bdc3c4;
	box-shadow: 0 0 10px #bdc3c4;
	overflow:hidden;
	padding:4% 5%;}
	
.book{
	width:25%;
	height:auto;
	float:left;
	box-shadow: 0 0 3px #bdc3c4;
	overflow:hidden;
	cursor:pointer;}
	
.book img{
	width: 100%;
    height: 100%;
    object-fit:cover;
	transform:scale(1,1);
	transition: all 1s ease-out;}
	
.book:hover{
	box-shadow: 0 0 8px #a2a2a2;}
	
.book img:hover{transform:scale(1.2,1.2);}
	
.introduce{
	width:72%;
	height:auto;
	float:right;
	padding:0 0 0 3%;}
	
.introduce2{
	width:72%;
	height:auto;
	float:right;
	padding:0 0 0 3%;}
	
.tit{
	width:72%;
	height:auto;
	float:right;
	padding:0 0 0 3%;}
	
h3{
	font-size:1.8em;
	font-weight:bold;
	line-height:1.3;
	margin-bottom:1%;}
	
.line{
	border-left:8px solid #a6937c;
	margin-right:1.5%;}
	
h4{
	font-size:1.05em;
	line-height:1.6;
	padding:0 0 0 3%;
	color:#7c7c7c;}
	
hr.style-one {
    border: 0;
    height: 0;
    border-top: 1px solid rgba(0,0,0,0.1);
    border-bottom: 1px solid rgba(255,255,255,0.3);
	margin:1.5% auto;}
	
p{
	font-size:1.05em;
	line-height:1.6;
	padding:0 0 0 3%;
	color:#7c7c7c;
	text-align:justify;}
	
/*------按鈕-------*/

.button{
	width:50%;
	height:auto;
	clear:both;
	margin:0 0 0 29%;
	padding-top:2%;}
	
button{
	font-size:1.2em;
	line-height:2;
	font-family:"微軟正黑體",Arial, Helvetica, sans-serif;
	border-radius:5px;
	border:0;
	cursor:pointer;
	-webkit-transition-duration: 0.4s; /* Safari */
  	transition-duration: 0.4s;}
	
.b_en{
	color:#FFF;
	background-color:#ae946a;
	border:2px solid #ae946a;
	width:30%;}
	
.b_r{
	color:#FFF;
	background-color:#91aa93;
	border:2px solid #91aa93;
	margin-left:5%;
	width:30%;}
	
button:focus{outline:0;}
  
.b_en:hover{
    border:2px solid #ae946a;
    background-color:#FFF;
    color:#ae946a;}
  
.b_r:hover{
	border:2px solid #91aa93;
    background-color:#FFF;
    color:#91aa93;}

/******------ 第一區 結束 ------*******/


/******------ 第二區 開始 ------*******/

.pic{
	width:25%;
	max-width:100%;
	height:100%;
	float:left;
	background-color:#CCC;
	box-shadow: 0 0 3px #bdc3c4;
	overflow:hidden;
	cursor:pointer;}
	
.pic_box{
	width:300px;
    height:200px;}
	
	
.pic img{
	width:100%;
    height:100%;
    object-fit:cover;}
	
	
.more{
	width:30%;
	font-size:1.2em;
	line-height:2;
	font-family:"微軟正黑體",Arial, Helvetica, sans-serif;
	border-radius:5px;
	border:0;
	color:#7c7c7c;
	background-color:#fff;
	border:2px solid #7c7c7c;
	cursor:pointer;
	-webkit-transition-duration: 0.4s; /* Safari */
  	transition-duration: 0.4s;}
	
.more span{
	letter-spacing:-4px;}
	
.more:hover{
	border:2px solid #7c7c7c;
    background-color:#7c7c7c;
    color:#fff;}
	
span3{
	font-weight:bold;
	color:#9b3a4f;}
	
/******------ 第二區 結束 ------*******/	


/******------ 第三區 開始 ------*******/

h5{
	width:100%;
	font-size:1.4em;
	line-height:1.3;
	text-align:center;
	letter-spacing:5px;}



.bk_list{
	width:100%;
	height:auto;
	margin:3% 0 0 0;}
	
.bk{
	width:22%;
	height:100%;
	float:left;
	margin:0 1.5% 0 1.5%;}
	
.bk_pic{
	width:100%;
	height:100%;
	box-shadow: 0 0 3px #bdc3c4;
	overflow:hidden;
	cursor:pointer;
	padding:2% auto;}
	
.bk_pic img{
	width:100%;
    height:100%;
	min-height:380px;/*大小*/
    object-fit:cover;   
	transform:scale(1,1);
	transition: all 1s ease-out;}
	
.bk_pic:hover{
	box-shadow: 0 0 8px #a2a2a2;}
	
.bk_pic img:hover{transform:scale(1.2,1.2);}
	
	
/*------書列表 按鈕-------*/
	
.but{
	width:100%;
	height:auto;
	margin-top:10%;
	margin-bottom:15%;}
	
.b_en2{
	color:#FFF;
	background-color:#ae946a;
	border:2px solid #ae946a;
	width:50%;}
	
.b_en3{
	color:#FFF;
	background-color:#ae946a;
	border:2px solid #ae946a;
	width:100%;}  /*單 電子書閱讀*/
	
.b_r2{
	color:#FFF;
	background-color:#91aa93;
	border:2px solid #91aa93;
	margin-left:2%;
	width:46%;}
	
.b_r3{
	color:#FFF;
	background-color:#91aa93;
	border:2px solid #91aa93;
	width:100%;} /*單 線上閱讀*/

.b_en2:hover{
  border:2px solid #ae946a;
  background-color:#FFF;
  color:#ae946a;}
  
.b_en3:hover{
  border:2px solid #ae946a;
  background-color:#FFF;
  color:#ae946a;} /*單 電子書閱讀hover*/
  
.b_r2:hover{
	border:2px solid #91aa93;
    background-color:#FFF;
    color:#91aa93;}
	
.b_r3:hover{
	border:2px solid #91aa93;
    background-color:#FFF;
    color:#91aa93;} /*單 線上閱讀hover*/
	
		

/******------ 第三區 結束 ------*******/	


footer{
	width:99%;
	line-height:1.6;
	text-align:center;
	background-color:#7c7c7c;
	color:#FFF;
	letter-spacing:1px;
	font-size:1em;
	padding:0.5%;}
	
	
/*=======================================================網頁 resize===================================================================*/

@media screen and (min-width:320px) and (max-width:1280px){.wrapper{width:100%;} button{line-height:2.5;} .more{line-height:2.5;}}

@media screen and (min-width:481px) and (max-width:979px) {
.banner{
	width:100%;
	height:0;
	padding-bottom:40%;}
}

@media screen and (max-width:480px) {
.banner{
	height:0;
	padding-bottom:70%;
	background-image:url(../img/436x290.jpg);}
}


@media screen and (max-width:1279px){

.bk{
	width:46%;
	margin:0 2% 0 2%;}	
}

@media screen and (min-width:768px) and (max-width:1022px){
h2{
	width:70%;
	font-size:2em;
	line-height:2.2;
	letter-spacing:0px;}
	
.content{
	width:80%;
	margin:3% 5% 0 5%;
	padding:4% 5%;}
	
.tit{width:62%;}
	
.tit h3{
	height:180px;
	line-height:180px;}
	
.introduce2{width:100%;}
	
.pic{width:35%;}

.pic_box{height:180px;}

.h{ height:15px;}

}

@media screen and (min-width:320px) and (max-width:767px){
	
.tit{width:57%;}
	
.tit h3{
	height:120px;
	line-height:120px;}
	
.introduce2{width:100%;}
	
.pic{width:40%;}

.pic_box{height:120px;}

.h{ height:5px;}
	
}

@media screen and (min-width:640px) and (max-width:1024px){
	
.button{
	width:90%;
	padding-top:3%;}
	
h3{font-size:1.5em;}
	
.line{border-left:5px solid #a6937c;}

h4{
	font-size:1em;
	line-height:1.5;}
	
p{
	font-size:1em;
	line-height:1.5;}
	
.more{margin:0 0 0 10%;}
	
}


@media screen and (min-width:481px) and (max-width:639px){
	
.button{width:100%;padding-top:3%;}
	
h3{font-size:1.3em;}

.line{border-left:5px solid #a6937c;}

h4{font-size:1em;line-height:1.4;}
	
p{font-size:1em;line-height:1.4;}

.more{width:40%;}

}



@media screen and (min-width:480px) and (max-width:767px){
h2{
	width:80%;
	font-size:1.5em;
	letter-spacing:0px;}
	
.content{
	width:90%;
	margin:3% 0% 0 0%;
	padding:4% 5%;}
	
h5{
	font-size:1.5em;
	letter-spacing:0px;}
	
}

@media screen and (max-width:560px){
.bk{
	width:46%;
	margin:3% 2% 5% 2%;}
	
	
footer{
	width:96%;
	line-height:1.6;
	padding:3% 2%;}
	
.but{display:none;}



}
@media screen and (max-width:480px){
	
.content{
	margin:4% 0% 0 0%;}
	
.book{
	width:50%;
	margin:2% auto;
	float:none;}
	
.introduce{
	width:100%;
	float:none;
	padding:0;
	margin:3% 0 0 0;}
	
.button{width:150%;padding-top:3%;margin:0 2%;}
	
h3{font-size:1.3em;}

.line{border-left:5px solid #a6937c;}

h4{font-size:1em;line-height:1.4;}
	
p{font-size:1em;line-height:1.4;}

.more{margin:0 0 0 20%;}

h5{
	font-size:1.3em;
	letter-spacing:0px;
	line-height:1.2;}



}


@media screen and (max-width:479px){
h2{
	width:90%;
	font-size:1.5em;
	letter-spacing:0px;}
}



/*-------導覽列-----------*/

nav {
  width:100%;
  height:80px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-shadow: 0 2px 4px #cccccc;
  box-shadow: 0 2px 4px #cccccc;
  background-color:#eeeeee;
  position:relative;
  z-index:9999;
  position: fixed;
  right: 0;
  top:0;} 

.nav-logo {
  width:auto;
  height:100%;
  padding:1.5% 0 0 0;
  float:left;
  display:inline;}
  
.nav-logo img {
  max-width:100%;
  max-height:100%;}
  
.nav-list{
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  float:right;}
	
.nav-list li{
  position: relative;
  list-style: none;
  float:left;
  text-align: center;
  text-decoration: none;
  list-style: none;
  line-height:75px;}
  
.nav-list li a {
  color:#000000;
  display:inline-block;
  margin: 0 10px;
  padding:0 20px;
  font-size:1em;
  text-decoration:none;}
  
.nav-list li a:hover {
  background-color:#ffffff;
  border-bottom:5px solid #ae946a;}
  
/* 漢堡選單 */	
.nav-menu {
  display: none;
  float:right;
  padding:1% 0.8%;
  position:relative;
  border:1px solid #ccc;
  border-radius:10%;
  margin:1.8% 0 0 0;
  background: #fff;
  cursor: pointer;
  z-index: 999;}
	
.nav-menu span {
  height:2px;
  width:25px;
  display: block;
  background:#CCC;
  border-radius:5%;}
	
.nav-menu span + span {margin-top:25%;}

/*nav .open {
  right:0%;
  overflow: auto;}*/
  

@media screen and (max-width:1279px){
.nav-logo {padding:2% 0 0 5%;}}


@media screen and (max-width:1024px){
	
.nav-menu {
	display:block;
	margin:2% 3% 0 0;}
  
.nav-list {
  position:fixed;
  height:100%;
  top:80px;
  padding-top:10px;
  width:40%;
  background: #fff;
  right:-60%;
  -webkit-transition:1s;
  transition:1s;
  -webkit-box-shadow: 3px 0px 10px #f0eded;
  box-shadow: 3px 0px 10px #f0eded;
  right:0%;
  overflow: auto;
  display:none;}
  
.nav-list li{
  width: 100%;
  margin: 0;
  overflow: hidden;}
  
.nav-list li{margin-bottom: 15px;}

.nav-list li a{
  width: 100%;
  border-radius: 0;
  padding:0px;
  margin: 0;}
  
.nav-list li a:hover {
  background-color:#eeeeee;
  border-bottom:0px solid #ae946a;}

.nav-list li .menu {
  position: relative;
  width: 100%;
  text-align: center;
  border-radius: 0;
  -webkit-box-shadow: 0 -1px 7px #ccc inset;
  box-shadow: 0 -1px 7px #ccc inset;} 
}


@media screen and (max-width:980px){
	.nav-menu {margin:2.2% 3% 0 0;}}
	
	
@media screen and (max-width:900px){
	.nav-logo {padding:2.5% 0 0 5%;}
	.nav-menu {margin:2.5% 3% 0 0;}}
	
@media screen and (max-width:800px){
	.nav-logo {padding:2.5% 0 0 5%;}
	.nav-menu {margin:2.8% 3% 0 0;}
	.nav-list {width:50%;}}
	
@media screen and (max-width:750px){
	.nav-logo {padding:3% 0 0 5%;}
	.nav-menu {margin:2.2% 3% 0 0;}
	.nav-menu {padding:2% 1.8%;}}
	
@media screen and (max-width:680px){
	.nav-logo {padding:3.2% 0 0 5%;}
	.nav-menu {margin:2.5% 3% 0 0;}}
	
@media screen and (max-width:640px){
	.nav-logo {padding:3.5% 0 0 5%;}
	.nav-menu {margin:3% 3% 0 0;}}
	
@media screen and (max-width:600px){
	.nav-logo {padding:3.8% 0 0 5%;}
	.nav-menu {margin:3.5% 3% 0 0;}}
	
@media screen and (max-width:540px){
	.nav-logo {padding:3.8% 0 0 5%;}
	.nav-menu {margin:4% 3% 0 0;}}
	
@media screen and (max-width:480px){
	.nav-logo {padding:5% 0 0 5%;}
	.nav-menu {margin:3.8% 3% 0 0;}
	.nav-menu {padding:3% 2.8%;}
	.nav-list {width:70%;}}
	
@media screen and (max-width:415px){
	.nav-logo {padding:5.5% 0 0 5%;}
	.nav-menu {margin:5% 3% 0 0;}}
	
@media screen and (max-width:360px){
	.nav-logo {padding:6% 0 0 5%;}
	.nav-menu {margin:5.8% 3% 0 0;}}
	
	
/*-------fb------*/

.fb {
	position: absolute;
	top:35%;
	left:25%;}
	
@media screen and (max-width:1680px){.fb {left:21%;}}
@media screen and (max-width:1440px){.fb {left:16%;}}
@media screen and (max-width:1300px){.fb {left:13%;}}
@media screen and (max-width:1279px){.fb {top:43%;left:18%;}}
@media screen and (max-width:1130px){.fb {top:40%;left:20%;}}
@media screen and (max-width:980px){.fb {top:36%;left:22%;}}
@media screen and (max-width:850px){.fb {top:38%;left:25%;}}
@media screen and (max-width:757px){.fb {left:28%;}}
@media screen and (max-width:650px){.fb {left:30%;}}
@media screen and (max-width:600px){.fb {top:40%;left:35%;}}
@media screen and (max-width:510px){.fb {top:38%;left:40%;}}
@media screen and (max-width:480px){.fb {top:40%}}
@media screen and (max-width:430px){.fb {top:40%;left:45%;}}
@media screen and (max-width:378px){.fb {left:50%;}}
@media screen and (max-width:338px){.fb {top:38%;left:52%;}}


/*------------書封大小-------------*/

@media screen and (max-width:1279px){.bk_pic img{min-height:740px;}}
@media screen and (max-width:1230px){.bk_pic img{min-height:720px;}}
@media screen and (max-width:1200px){.bk_pic img{min-height:700px;}}
@media screen and (max-width:1150px){.bk_pic img{min-height:680px;}}
@media screen and (max-width:1100px){.bk_pic img{min-height:640px;}}
@media screen and (max-width:1024px){.bk_pic img{min-height:600px;}}
@media screen and (max-width:1022px){.bk_pic img{min-height:530px;}}
@media screen and (max-width:940px){.bk_pic img{min-height:495px;}}
@media screen and (max-width:900px){.bk_pic img{min-height:470px;}}
@media screen and (max-width:855px){.bk_pic img{min-height:455px;}}
@media screen and (max-width:850px){.bk_pic img{min-height:450px;}}
@media screen and (max-width:825px){.bk_pic img{min-height:438px;}}
@media screen and (max-width:820px){.bk_pic img{min-height:435px;}}
@media screen and (max-width:800px){.bk_pic img{min-height:422px;}}
@media screen and (max-width:780px){.bk_pic img{min-height:410px;}}
@media screen and (max-width:768px){.bk_pic img{min-height:415px;}}
@media screen and (max-width:750px){.bk_pic img{min-height:435px;}}
@media screen and (max-width:725px){.bk_pic img{min-height:430px;}}
@media screen and (max-width:700px){.bk_pic img{min-height:415px;}}
@media screen and (max-width:680px){.bk_pic img{min-height:405px;}}
@media screen and (max-width:620px){.bk_pic img{min-height:370px;}}
@media screen and (max-width:600px){.bk_pic img{min-height:356px;}}
@media screen and (max-width:560px){.bk_pic img{min-height:335px;}}
@media screen and (max-width:533px){.bk_pic img{min-height:320px;}}
@media screen and (max-width:480px){.bk_pic img{min-height:290px;}}
@media screen and (max-width:420px){.bk_pic img{min-height:255px;}}
@media screen and (max-width:414px){.bk_pic img{min-height:249px;}}
@media screen and (max-width:400px){.bk_pic img{min-height:241px;}}
@media screen and (max-width:390px){.bk_pic img{min-height:235px;}}
@media screen and (max-width:380px){.bk_pic img{min-height:210px;}}
@media screen and (max-width:375px){.bk_pic img{min-height:226px;}}
@media screen and (max-width:360px){.bk_pic img{min-height:218px;}}
@media screen and (max-width:350px){.bk_pic img{min-height:215px;}}
@media screen and (max-width:320px){.bk_pic img{min-height:195px;}}