@charset "utf-8";
/* CSS Document */
@import url("jquery.mmenu.all.css");
body {font:normal 1.875rem/1.5 Arial, Helvetica, "微軟正黑體"; color:#444444; background-color:#f6f6f6; margin:0; padding:0;}
a {text-decoration:none; color: #fff;transition: all 0.3s;}
a.current, a:hover{color: #fff;}
div, p, span, ul, ol, li, h1, h2, h3, h4, h5, h6, input, table, td, th, img {margin: 0;padding: 0;border: none;}
img {border: none;display:block;}
ul{ margin: 0 0 20px;}
ul li{ list-style: none; padding: 0 0 0 30px; margin: 5px 0;}
ul li{ background:url(../images/dot.png) 8px center no-repeat;}
ul.brown li{color:#a38b78;  background:url(../images/dot2.png) 8px center no-repeat;}
p{ margin: 0 0 20px;}
h1{ width:96px; height: 36px; }
h1 a{width:96px; height: 36px; display: block; background:url(../images/logo.svg) 0 center no-repeat;background-size: cover;  cursor: pointer;}
h2{background:#f6f6f6 url(../images/h2_bg2.png) center repeat-x; margin: 0 0 20px;}
h2 span{ padding: 0 10px 0 30px;color:#6f4244; font-size: 2.250rem; background:#f6f6f6 url(../images/h2_bg.png) 0 10px no-repeat;}
h3{ font-size: 2.250rem; color: #000;}
.pagesize{ position: relative;}
/*header*/
header{ background-color: #383838;}
header .in{  width:1160px; height: 60px; padding: 0 30px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; box-sizing: border-box;}
header ul{ position: relative; display: block; margin: 0;}
header ul li{ display: inline-block; margin: 0 20px; font-size: 1.125rem; }
header ul li a{ width:100%; display: block;   box-sizing: border-box;opacity: 0.7; transition: all 0.3s;}
header ul li a:hover, header ul li.current a{opacity: 1;}
nav{ display: none;}
/*menu*/
.menu{ display: none; position:absolute; top: 16px; right: 15px; width: 26px; height: 30px;}
.menu a{ width: 26px; height: 30px;}
.icon_menu {}
.icon_menu { width: 30px;}
.icon_menu::after, .icon_menu::before, .icon_menu span { background-color: #bfbfbf; border-radius: 2px; content: ''; display: block; height: 2px; margin: 5px 0;transition: all .2s ease-in-out;}
.icon_menu::before { transform: translateY(0) rotate(0);}
.icon_menu::after { transform: translateY(0) rotate(0);}
.open .icon_menu::before { transform: translateY(8px) rotate(135deg);}
.open .icon_menu::after { transform: translateY(-6px) rotate(-135deg);}
.open .icon_menu span { transform: scale(0);}
/*view*/
.view{ position: relative; width: 100%; height: 1520px; display: block; margin: 0 auto 30px; background:url(../images/bg.jpg) center no-repeat; box-sizing: border-box;}
.view .books{ position: absolute; top:110px; left: 50%; width: 1160px; text-align: center; margin: 0 -580px;}
.view .books img{ width: 100%;}
.view a.btn{  width: 520px; height: 150px; display: block; margin: 30px auto;color:#fff; font-size: 3.00rem; line-height: 150px; background-color: #383838; border-radius: 99em;}
.view a.btn:hover{ background-color: #6f4244; }
/*box*/
.box .pic{ float:left; padding: 15px 20px 15px 0; background-color: #f6f6f6;}
.box .info img{ width: 100%; height: auto; margin: 0 0 30px;}
.box p{ letter-spacing: -0.4px; }
.box h3{}
.box h4{font-size: 1.375rem; color:#fff;}
.box h4 span{ padding: 0 0  0 10px;}
.box.book01 h3{color: #018637;}
.box.book01 h4{ padding:7px 10px; background-color: #018637;}
.box.book02 h3{color: #59371c;}
.box.book02 h4{ padding:7px 10px; background-color: #59371c;}
.box.book03 h3{color: #6f4244;}
.box.book03 h4{ padding:7px 10px; background-color: #6f4244;}
/*intro*/
.intro{ width: 1120px; margin: 0 auto; box-sizing: border-box;}
/*readBox*/
.readBox .info{ box-shadow: 0px 0px 10px rgba(0,0,0,0.3);margin: 0 0 30px;}
.readBox .info img{ width: 100%; height: auto;}
/*footer*/
footer{ background-color: #383838; text-align: center; padding: 40px 0 30px; font-size: 1.125rem;}
footer .logo{width:218px; height: 48px; display: block; margin: 0 auto;}
footer .logo a{width:218px; height: 48px; display: block; background:url(../images/logo.png) 0 center no-repeat;background-size: cover;  cursor: pointer;}
footer ul{ display:flex; justify-content: center; padding: 0; margin: 0; color: #fff; }
footer ul li{  padding: 0 20px; margin:15px 0 ; border-right: 1px solid #888888; line-height: 1; }
footer ul li:last-child{border:none;}
footer p{color: #888888; margin: 0;}
.main{ padding: 0 0 30px;}
.goTop{ position:absolute; width: 60px; height: 60px; display: block; }
.goTop a{width: 60px; height:60px; display: block;background:url("../images/goTop.png") no-repeat;}
@media screen and (max-width: 1159px){
	body { font-size: 1.625rem;}
	/*header*/
	header .in{  width:1000px; height: 60px; padding: 0 30px;}
	/*view*/
	.view{ height: auto; padding: 80px 15px 30px;}
	.view .books{ position: static; width: 1000px; text-align: center; margin: 0 auto;}
	.view a.btn{  width: 300px; height: 100px;  font-size: 2.00rem; line-height: 100px;  }
	/*intro*/
	.intro{ width: 1000px;padding: 0 30px;}
	/*box*/
	.box h4{font-size: 1rem; color:#fff; margin: 0 0 10px;}
	.box h4 span{ padding: 0 0  0 10px;}
	/*footer*/
	footer{font-size: 1rem;}
}
@media screen and (max-width: 1023px){
	body { font-size: 1.250rem;}
	/*header*/
	header .in{  width:100%;}
	header ul li{ margin: 0 5px;}
	/*view*/
	
	.view{ height: auto; padding:60px 10px 0;background-size: cover;}
	.view .books{ position: static; width: 100%; text-align: center; margin: 0 auto;}
	.view a.btn{  width: 80%; height: 60px;  font-size: 2.00rem; line-height:60px;  }
	/*box*/
	.box h3{font-size: 1.5rem;}
	/*intro*/
	.intro{ width: 100%;padding: 0 10px;}
	/*footer*/
	footer{font-size: 0.813rem;}
	footer ul li{ padding: 0 5px;}
}

@media screen and (max-width: 767px){
	body { font-size: 1rem;}
	/*header*/
	header .in{ position: relative;width:100%; height: auto; min-height: 60px; padding:60px 0 0 ; display: block;}
	header .in h1{ position: absolute; top: 10px; left: 15px;}
	header .in ul#nav{ padding: 0; margin: 0;  display: none; }
	header .in ul#nav li{ width:100%; background: #494949; padding: 0; margin: 0; text-align: center; border-bottom: 1px solid #6c6c6c;}
	header .in ul#nav li a{ padding: 15px 0; opacity: 1; }
	h2{ margin: 0 0 10px;}
	h2 span{ padding: 0 10px 0 30px;color:#6f4244; font-size: 1.5rem; background:#f6f6f6 url(../images/h2_bg.png) 5px 3px no-repeat;}
	h3{font-size: 1.5rem; }
	/*view*/
	.view{ height: auto; padding:30px 10px 0;}
	/*box*/
	.box .pic{ width: 70%; float:none; padding: 0; margin: 0 auto;}
	.box .pic img{ width: 100%; height: auto;}
	.box h3{font-size: 1.375rem; text-align: center;}
	.box h4{text-align: center;}
	.box .info img{ width: 100%; height: auto; margin: 0 0 30px;}
	/*menu*/
	.menu{ display: block;}
	nav{ display: block;}
	footer{padding:15px 0; }
	footer ul { padding: 10px 0; flex-wrap: wrap;}
	footer ul li{ width: 100%; padding: 0 ; margin: 5px 0; border: none;}
}