@charset "utf-8";
@import "https://fonts.googleapis.com/earlyaccess/notosanstc.css";

body {
    box-sizing: border-box;
    font-family: "Noto Sans TC",微軟正黑體,Arial,Helvetica,heiti tc,SimHei,Microsoft JhengHei,serif;
    margin: 0;
    padding: 0;
    text-align: left;
	background:url("../images/bg_top.jpg") top center no-repeat black;
}
table {border: 0 none;border-collapse: collapse; margin: 0;padding: 0;}  
img {border: 0 none;}
h1, h2, h3, h4, h5, h6, ul, ol, li, p, div, blockquote, cite, em, tt, dfn { font-family:"Noto Sans TC",微軟正黑體,Arial,Helvetica,heiti tc,SimHei,Microsoft JhengHei,serif; font-weight: normal;margin: 0;padding: 0;}
dfn, strong, em {font-style: normal;}
li {list-style: outside none none;}
section a { cursor: pointer; outline: medium none; font-family: "Noto Sans TC","微軟正黑體",Arial,Helvetica,heiti tc,SimHei,Microsoft JhengHei,serif; display: block; color: black; position: relative; transform: scale(1); transition: 0.3s all;}
section a:hover{position: relative;}
p{ text-align: justify;font-size: 1.6rem; line-height: 2rem;}
.nobar{ overflow:hidden;}
section{ width:100%; position: relative; margin:0 auto;}
.centerBox{ width:100%; max-width:1200px;  position: relative; margin:0 auto;}
.mbOnly{ display:none;} .mbHide{ display:inline-block;}
h2{ width: 100%; text-align: center; padding-top: 25px; margin-bottom: 25px; z-index: 10;}

/*TOP*/
.topM{ display: none;}
.top { display: block; height: 830px; margin-bottom: 70px; position: relative; overflow: hidden;}
.top h1{ animation:h1f 10s infinite normal; position: absolute; top: 120px; right: 5px;}
@keyframes h1f{
    0%{}
 29%{filter: invert(0%);}
 30%{filter: invert(100%);}
 31%{filter: brightness(1)}
 32%{filter: invert(100%);}
 33%{filter: brightness(3)}
 34%{filter: invert(100%);}
 35%{filter: brightness(2)}
 36%{filter: invert(0%);}
}
.top .centerBox{ height: 830px;}
.top .centerBox img.mon { position: absolute;}
.mon.w1{ left: -90px; top: 440px; animation:ca01 3s infinite normal;}
.mon.w2{ left: 550px; top: 52px; animation:ca02 2s infinite normal;}
.mon.p1{ left: 40px; top: 50px; animation:ca03 3s infinite normal;}
.mon.p2{ right: -140px; top: 320px; animation:ca04 4s infinite normal;}
.mon.g1{ right: 0px; top: 85px; animation:ca01 3s infinite normal;}
.mon.g2{ left: 450px; top: 178px; animation:ca02 4s infinite normal;}
.mon.g3{ left: 60px; top: 310px; animation:ca03 2s infinite normal;}
.mon.b1{ left: 40px; top: 680px; animation:ca04 3s infinite normal;}
.mon.b2{ right: 315px; top: 610px; animation:ca01 4s infinite normal;}
ul.selectMenu{ position: absolute; bottom: 5px; width: 100%; text-align: center;}
ul.selectMenu li{ display: inline-block; margin: 0 5px;}
ul.selectMenu li:hover{ transform: translateY(5px);}

@keyframes ca01{
    0%{margin:0px 0px 0px 0px; }
 30%{margin:5px 0px 0px 10px;}
 60%{margin:-5px 0px 0px 5px;}
 100%{margin:0px 0px 0px 0px;}
}
@keyframes ca02{
    0%{margin:0 -5px 0px 0px; }
 20%{margin:0 5px 0px -5px;}
 40%{margin:0 10px 0px -10px;}
 60%{margin:0 5px 0px -5px;}
 100%{margin:0 -5px 0px 0px;}
}
@keyframes ca03{
    0%{margin:-5px 0px 0px -10px }
 20%{margin:5px 0px 0px 0px}
 40%{margin:10px 0px 0px 5px}	
 60%{margin:0px 0px 0px -5px}
 100%{margin:-5px 0px 0px -10px}
}
@keyframes ca04{
    0%{margin:0px 0px 0px 0px }
 20%{margin:10px 0px 0px -10px}
 40%{margin:5px 0px 0px -15px}
 60%{margin:10px 0px 0px -5px}
 100%{margin:0px 0px 0px 0px}
}

.selectBooks h2{ text-align: center; margin: 25px auto;}
.selectBooks h3{ text-align: center; margin: 25px auto;}
.selectBooks h3 p{ color: white; text-align: center; font-size: 18px; line-height: 24px; margin: 15px auto; font-weight: normal;}

/*選書框框*/
.selectFrame{ width: 100%; overflow: hidden; text-align: center;}
.selectFrame li{ width: 48%; margin: 0 .5% 25px; display: inline-block; background: white; border: 2px solid #00ff00; border-radius: 0 0 0 110px; position: relative; overflow: hidden; vertical-align: top;}
.selectFrame li article{ padding: 20px 15px;}
.selectFrame li article h5{ font-size: 28px; line-height: 30px; height: 50px; background-color: #44d62c; width: 100%; padding: 10px 0; color: white; font-weight: 500; text-align: center; display: block; border-radius: 0 30px 0 0;}
.selectFrame li article p{ font-size: 16px; line-height: 24px; margin: 15px 0; height: 120px;}
.selectFrame li article div.selectCV{ width: 53%; display: inline-block;}
.selectFrame li article div.selectCV img{ max-width: 100%;}
.selectFrame li article div.info{ width: 44%; margin-left: 1.5%; display: inline-block; vertical-align: top; padding-top: 15px;}
.selectFrame li article div.info h6{ color: #44d62c; font-size: 25px; line-height: 30px; text-align: left; font-weight: 500;}
.selectFrame li article div.info h6 span{ font-size: 18px; line-height: 22px; display: block; margin-top: 3px;}
.selectFrame li article div.info h6 p{ margin: 0; line-height: 22px;}
.selectFrame li article div.info h6 p.type{ display: inline-block; background-color: black; font-size: 20px; line-height: 20px; color: #44d62c; border-radius: 0 18px 0 0; padding: 3px 20px 3px 10px; font-weight: 500; line-height: 24px; margin: 0; height: 30px; margin-bottom: 5px;}
.selectFrame li article div.info p{ height: auto; text-align: left;}
.editor{ width: 100%; background: rgba(68,214,44,.5); padding: 25px 10px 43px 35px;}
.editor p{ font-size: 15px; line-height: 22px; height: 150px;}
.editor p span{font-weight: 600; font-size: 18px; display: block; margin-bottom: 15px;margin-left: -10px;}
.editor img{float: right; max-width: 200px; margin-left: 15px;}
/*外文*/
.selectFrame.eng li {border: 2px solid #636ffc;}
.selectFrame.eng li article h5{ background-color: #636ffc;}
.selectFrame.eng li article p{ height: 240px;}
.selectFrame.eng li article div.info h6{ color: #636ffc;}
.selectFrame.eng li article div.info h6 p.type{ color: #636ffc;}
/*簡體*/
.selectFrame.cn li {border: 2px solid #009ace;}
.selectFrame.cn li article h5{ background-color: #009ace;}
.selectFrame.cn li article p{ height: 260px;}
.selectFrame.cn li article div.info h6{ color: #009ace;}
.selectFrame.cn li article div.info h6 p.type{ color: #009ace;}
/*有聲書*/
.selectFrame.audio li {border: 2px solid #ea27c2;}
.selectFrame.audio li article h5{ background-color: #ea27c2;}
.selectFrame.audio li article p{ height: 240px;}
.selectFrame.audio li article div.info h6{ color: #ea27c2;}
.selectFrame.audio li article div.info h6 p.type{ color: #ea27c2;}

.copyright {font-weight: normal; color:white; display: block; font-family: Verdana,Geneva,sans-serif; font-size: 14px; line-height: 28px; overflow: hidden; text-align: center; width: 100%; margin-top: 15px;}

.scrollup { display: none; position: fixed; background-color: black; right: 35px; bottom: 35px; width: 60px; height: 60px; color: white; font-size: 25px; font-weight: 500; line-height: 60px; text-align: center; color: white; z-index: 99999; border-radius: 50%; overflow: hidden;}
.scrollup:hover{}

@media screen and (max-width:1360px) {
	.selectFrame{ width: 90%; margin: 0 auto;}
	.selectFrame li article h5{ font-size: 25px;}
	.selectFrame li article p{ height: 140px;}
	.selectFrame li article div.info{ padding-top: 0;}
	.editor img{ max-width: 180px;}
	.editor p{ height: 160px;}
	.selectFrame.eng li article p{ height: 260px;}
	.selectFrame.cn li article p{ height: 285px;}
	.selectFrame.audio li article p{ height: 270px;}

}

@media screen and (max-width:800px) {
body {
	box-sizing: border-box;
	margin: 0;
	overflow-x: hidden;
	padding: 0;
	text-align: left;
	background-image: none;
}
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 {
	box-sizing: border-box;
}
#header{ overflow:hidden;}
p{ font-size: 2rem; line-height: 2.4rem; }
section a:hover{ margin-top:0px; transform: scale(0);}
img{ max-width: 100%;}
.mbOnly{ display:inline-block;} .mbHide{ display:none;}
h2{ margin-bottom: 15px; width: 95%; margin: 10px auto; padding: 0;}
section{ width: 100%; max-width:800px;}
.centerBox{width: 100%;}
	
	.top{ display: none;}
	.topM{ display: block; position: relative;}
	.selectBooks h2{ margin: 15px auto;}
	.selectBooks h2 img{ max-width: 85%;}
	
	ul.selectMenu{ width: 100%; position: fixed; bottom: -1px; z-index: 9999; }
	ul.selectMenu li{ width: 25%; margin: 0px; white-space: nowrap; text-align: center; float: left; background-color: black;}
	ul.selectMenu li:hover{ transform:translateY(0);}
	ul.selectMenu li a{ padding: 15px 0; color: black;}
	ul.selectMenu li p{font-size: 18px; line-height: 20px; padding:6px 0; font-weight: 600; text-align: center;}
	ul.selectMenu li:first-child{ background-color: #44d62c;}
	ul.selectMenu li:nth-child(2){ background-color: #636ffc;}
	ul.selectMenu li:nth-child(3){ background-color: #009ace;}
	ul.selectMenu li:nth-child(4){ background-color: #ea27c2;}
	
	.selectBooks{ padding-bottom: 50px;}
	.selectFrame li{ width: 93%; margin: 0 auto 20px;border-radius: 0 0 0 60px;}
	.selectFrame li article { padding: 10px;}
	.selectFrame li article p{ height: auto; line-height: 23px; margin: 10px 0;}
	.selectFrame li article h5{ font-size: 20px; height: auto;}
	.selectFrame li article div.selectCV{ width: 95%;}
	.selectFrame li article div.info{width: 95%;}
	.editor{ padding: 15px 20px 35px;}
	.editor p{ height: auto;}
	.editor img{ float: none; margin-bottom: 20px; max-width: 100%; margin-left: 0;}
	.selectFrame.eng li article p,.selectFrame.cn li article p,.selectFrame.audio li article p{ height: auto;}	
		
.scrollup {bottom: 25px;display: none;opacity: 1; position: fixed; right: 5px; text-align:center; z-index: 999;}
}