@charset "utf-8";
* { margin: 0; padding: 0; }
a:link, a:visited ,a:hover ,a:active {text-decoration: none;}
area:focus { outline-width: 0px;}
*:link, *:visited, *:hover, *:active, *:focus , * {
-o-transition: color .20s linear, background-color .20s linear, border-color .20s linear;
-webkit-transition: color .20s linear, background-color .20s linear, border-color .20s linear;
-moz-transition: color .20s linear, background-color .20s linear, border-color .20s linear;
transition: color .20s linear, background-color .20s linear, border-color .20s linear;}
img, iframe{ border:none;}
ul, li{ list-style-type:none;}

body{ background:url(../img/bg.jpg) repeat; font-family:Microsoft JhengHei, Arial, Helvetica, sans-serif; overflow-x:hidden;}
body, html{ height:100%;}

h1{ color:#48b133;}
h2{ color:#48b133;}
h3{ color:#7e7e7e;}
p{font-size:1.125em; line-height:33px; color:#454545; font-weight:300;}

#wrapper{ width:100%; margin: 0; position: relative; float:left;}

/* nav */
nav{ width:10%; height: 100%; position: absolute; left:0; background:#2b2b2b url(../img/nav_bg2.png) top left repeat-y; display:inline-block; z-index:999; padding-bottom:55px;}
nav ul{ width:100%; overflow:auto; position: absolute; top: 0; left: 0;}
nav ul li{ float:left; text-align:center;}
.nav_td{ background:#fff845; height:95px; width:100%; padding:5px 0 0 0; margin:0 0 10px 0;}
.nav_td img{ width:142px; margin: 5px 0 0 0;}
.navs{ padding:0 0 10px 0; color:#fff; font-size:1.125em; margin:12px 0 10px 13%; border-bottom:2px solid #2b2b2b; width:80%;}
.navs a{ display: block; width:100%; height:100%; color:#fff;}
.navs a:visited{ color:#fff;}
.navs a:hover{ color:#fff845;}
.navs:hover{ border-bottom:2px solid #fff845;}
.nav_sh{ margin:10px 0 10px 18%;}
.nav_book{ margin:10px 0 10px 20%; color:#CCC; font-size:0.813em; line-height:22px;}

/* btn */
.btn1 { width: 100%; height: 30px; color:#fff; line-height:30px; background:#6ed75b; box-shadow: 0 5px 0 #52a72e; -webkit-box-shadow: 0 5px 0 #52a72e; -moz-box-shadow: 0 5px 0 #52a72e; -webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px; margin:5px 0 0 0; font-size:15px; font-weight:300;}
.btn1 a { display: block; width: 100%; height: 100%; text-decoration: none; cursor: pointer; -webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px; color:#fff;}
.btn1 a:hover { text-decoration: none; background-color: #52a72e; -webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px;}

.btn2 { width: 150px; height: 40px; color:#fff; line-height:40px; background:#6ed75b; box-shadow: 0 5px 0 #52a72e; -webkit-box-shadow: 0 5px 0 #52a72e; -moz-box-shadow: 0 5px 0 #52a72e; -webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px; margin:5px 10% 0 10%; font-size:1.125em; text-align:center; font-weight:300;}
.btn2 a { display: block; width: 100%; height: 100%; text-decoration: none; cursor: pointer; -webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px; color:#fff;}
.btn2 a:hover { text-decoration: none; background-color: #52a72e; -webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px;}

.btn3 { width: 150px; height: 40px; color:#fff; line-height:40px; background:#6ed75b; box-shadow: 0 5px 0 #52a72e; -webkit-box-shadow: 0 5px 0 #52a72e; -moz-box-shadow: 0 5px 0 #52a72e; -webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px; margin:5px 0 0 0; font-size:1.125em; text-align:center; font-weight:300;}
.btn3 a { display: block; width: 100%; height: 100%; text-decoration: none; cursor: pointer; -webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px; color:#fff;}
.btn3 a:hover { text-decoration: none; background-color: #52a72e; -webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px;}

.btn4 { width: 80%; height: 30px; color:#fff; line-height:30px; background:#6ed75b; box-shadow: 0 5px 0 #52a72e; -webkit-box-shadow: 0 5px 0 #52a72e; -moz-box-shadow: 0 5px 0 #52a72e; -webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px; margin:10px 10% 0 10%; font-size:15px; font-weight:300;}
.btn4 a { display: block; width: 100%; height: 100%; text-decoration: none; cursor: pointer; -webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px; color:#fff;}
.btn4 a:hover { text-decoration: none; background-color: #52a72e; -webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px;}

.btn5 { border:none; width: 250px; height: 60px; color:#fff; line-height:60px; background:#f56200; box-shadow: 0 5px 0 #be4c00; -webkit-box-shadow: 0 5px 0 #be4c00; -moz-box-shadow: 0 5px 0 #be4c00; -webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px; font-size:15px; text-align:center; font-weight:300; font-family:Microsoft JhengHei, Arial, Helvetica, sans-serif; margin:0 auto;}
.btn5 a { display: block; width: 100%; height: 100%; text-decoration: none; cursor: pointer; -webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px; color:#fff;}
.btn5:hover, .btn:focus { text-decoration: none; background-color: #be4c00; -webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px; cursor: pointer;}
	
/* art */
section{ display:inline-block; width:100%; background:url(../img/bg.jpg) repeat; min-height:1000px;}
section .tit{ text-align:center; margin:0 0 10px 0;}

.art_td{ padding:90px 0 30px 0; position:relative; width:80%; margin-left:15.5%; background:url(../img/pic3.png) center -10px no-repeat;}
.art_sh{ margin:0 auto 15px auto; text-align:center; display:block; width:100%;}
.art_td h1{ text-align:center; font-size:3em; letter-spacing:1px; font-weight:300; line-height:40px; margin-bottom:10px;}
.art_td h2{ font-size:1.5em; font-weight:700; line-height:36px; margin-bottom:20px;}
.art_td h3{ text-align:center; font-size:0.813em; font-weight:300; line-height:25px; margin-bottom:10px;}
.art_td p{ margin-bottom:20px; line-height:40px;}
.art_td p a{ color:#f56200;}
.art_td p a:visited{ color:#f56200;}
.art_td p a:hover{ color:#be4c00;}
.s_pic1{ position: absolute; top:480px; left:22.5%; z-index:9;}
.s_pic2{ position: absolute; top:170px; left:70%; z-index:9;}

.art_pic_td{ width:700px; margin:0 auto 30px auto; background:url(../img/6_bg1.png) center top no-repeat,url(../img/6_bg2.png) center bottom no-repeat; -moz-background-size: contain; background-size: contain; text-align:center; padding:20px 0;}
.art_pic_td img{ width:630px;}

.art_td ul{ margin:0; padding:0; width:100%; margin:20px 0 0 30px;}
.art_td ul h2{ font-size:1.125em; font-weight:700; line-height:30px; margin:0;}
.art_td ul li{ font-size:1em; line-height:40px; color:#555; list-style-type:circle;}
.art_td ul li a{ color:#555;}
.art_td ul li a:visited{ color:#555;}
.art_td ul li a:hover{ color:#f56200;}


/* book */
.card8{ padding: 30px 0; display:block; text-align:center; width:90%; margin-left:10%;}
.card8 ul{ width:800px; margin:0 auto;}
.books{ width:18%; text-align:center; float:left; margin:0 0 70px 0; padding:0 1%;}
.books a { display: block; width: 100%; height: 100%; text-decoration: none; cursor: pointer;}
.books img{ margin:0 0 5px 0; width:120px; height:160px;}
.books h2 { font-size:15px; line-height:22px; font-weight:700; color:#48b133; text-align:left;}
.books h2 a {color:#48b133;}
.books h2 a:visited {color:#48b133;}
.books h2:hover {color:#f56200;}
.books p { font-size:15px; line-height:22px; font-weight:300; color:#454545;}


/* foot */
footer{ width:100%; background:#fff845; text-align:center; color:#222; line-height:22px; font-size:13px; font-weight:700; padding:5px 0; float:left;}
footer a{ color:#be4c00;}
footer a:hover{ color:#f56200;}

/* action */
.animation1{visibility: hidden;}
.opa{animation: line 1s linear; -webkit-animation: line 1s linear; -moz-animation:line 1s linear; -o-animation: line 1s linear; visibility: visible !important;}
@keyframes line { 
0% { opacity:0;} 100% { opacity:1;}}
@-webkit-keyframes line {
0% { opacity:0;} 100% { opacity:1;}}

.fadeIn{animation: fadeIn 2s ease-in-out; -webkit-animation: fadeIn 2s ease-in-out; -moz-animation:fadeIn 2s ease-in-out; -o-animation: fadeIn 2s ease-in-out; visibility: visible !important;}
@keyframes fadeIn {
	0% {opacity: 0; transform: translateY(-50%);}	
	100% {opacity: 1; transform: translateY(0%);}		
}
@-webkit-keyframes fadeIn {
	0% { opacity: 0;  transform: translateY(-50%);}	
	100% { opacity: 1; transform: translateY(0%);}		
}

.fadeIn2{animation: fadeIn2 0.6s linear; -webkit-animation: fadeIn2 0.6s linear; -moz-animation:fadeIn2 0.6s linear; -o-animation: fadeIn2 0.6s linear; visibility: visible !important;}
@keyframes fadeIn2 {
	0% {opacity: 0; transform: translateY(30%);}	
	100% {opacity: 1; transform: translateY(0%);}		
}
@-webkit-keyframes fadeIn2 {
	0% { opacity: 0;  transform: translateY(30%);}	
	100% { opacity: 1; transform: translateY(0%);}		
}

@media screen and (max-width: 1680px) {
nav{ width:15%;}
.nav_book{ margin:10px 0 10px 24%;}

section ul{ width:85%; margin-left:15%;}
.s_pic1{ left:13%;}
.s_pic2{left:77%;}
.card8{ width:83%; margin-left:17%;}

.art_td{ width:75%; margin-left:20.5%;}
}

@media screen and (max-width: 1366px) {
.nav_book{ display:none;}
.nav_td{ padding:3px 0 0 0; margin:0 0 8px 0;}
.navs{ padding:0 0 8px 0;}

.s_pic1{ left:6%;}
.s_pic2{left:83%;}

}

@media screen and (max-width: 1280px) {
.s_pic1{ left:3%;}
.s_pic2{left:86%;}

}

@media screen and (max-width: 1024px) {
nav{ width:17%;}
.navs{ padding:0 0 10px 0;}

section ul{ width:83%; margin-left:17%;}
.s_pic1{ left:-30px;}
.s_pic2{left:91%;}

.art_td{ margin-left:22%;}
}