@charset "utf-8";
@font-face {
  font-family: 'SweiToothpasteCJKtc-Medium';
  src: url(https://cdn.jsdelivr.net/gh/max32002/swei-toothpaste@2.090/WebFont/CJK%20TC/SweiToothpasteCJKtc-Medium.woff2) format("woff2");
}

/*reset*/
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,button,p,ul,ol,li,table,th,td,b{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
img,a{border:0; outline:0;}
a{ text-decoration:none;}
ul{list-style:none;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
*:focus { outline:none;}
body { font-family:"SweiToothpasteCJKtc-Medium", "微軟正黑體", "Microsoft JhengHei" ,sans-serif; color:#34322d; font-size:20px; line-height:30px;
	background: url(../images/bg1.jpg), url(../images/bg2.jpg);
	background-position: center top, center bottom;
	background-repeat: no-repeat;
}

img {max-width:100%!important; height: auto!important; _width:expression(this.width > 100 ? "100%" : this.width)!important;}
.yel { color: #fcd4c0;}
.red { color: #e74c17;}
.blu { color: #6c91e4;}
.green { color: #2b5a18;}
.break { display: block;}
.small { font-size: 15px;}
.t-center { text-align:center;}
a.line { color:#34322d; text-decoration:underline;}
h2 { font-size:28px; line-height:38px;}
h3 { font-size:22px; line-height:32px; margin:15px 0; font-weight:bold;}
p { font-size:16px; line-height:20px;}

/*head*/
#po_bar { position:relative; width:100%; margin:0 auto; height:45px; z-index:3;}
.logo{ display:block; position:absolute; top:10px; left:15px;}
ul#option { position:absolute; top:10px; right:15px;}
ul#option li { display: inline-block; font-size:13px; margin-left:5px; }
ul#option li img { vertical-align:middle;}
ul#option li a { color:#34322d;}
ul#option li a:hover { text-decoration:underline; opacity:0.7;}
ul#option li.p-m { display: none;}

.title { text-align:center; padding:5% 0 10% 0;}
.title h2 { margin:15px 0; letter-spacing:2px;}
h2 .line { background: rgb(255,255,255); background: linear-gradient(180deg, rgba(255,255,255,0) 60%, rgba(251,209,90,1) 40%);}
h2 .red { font-size:35px; font-weight:bold;}

.box { clear: both; width:90%; max-width:1000px; margin:50px auto; background:#f0ebcb; border-radius:15px; position: relative;}
.sec-title { width:500px; text-align:center; margin:60px auto 20px auto;}
.box .sec-title { position:absolute; left:50%; margin-left:-250px; top:-100px;}
.inner { padding:70px 80px 50px 80px;}
.field { margin-bottom:15px; font-size:20px; line-height:30px;}
.field .left { display:inline-block; width:100px; background:#fbd15a; margin-right:10px; text-align:center; vertical-align:top;}
.field .right { display: inline-block; vertical-align:top; width:calc( 100% - 120px );}
ol { padding-left:20px;}
ol li { list-style: decimal; margin-bottom:10px;}

.notice { width:84%; max-width:800px; margin:30px auto; padding:20px 3% 30px 3%; border:1px solid #91c578;}
.notice .ti { background:#e2e2a3; color:#57733d; text-align:center; font-size:17px; line-height:17px; width:110px; margin:0 auto; position:relative; top:-30px;}
.notice ol li { font-size:14px; line-height:18px; margin-bottom:10px;}

/* tab */
.tabUI { width:90%; max-width:1050px; margin:20px auto;}
.tab { margin: 0 auto; text-align: center; overflow: hidden; position: relative; z-index: 10;}
.tab.fixed { position: fixed; width: 1050px; top: 0; left: 50%; margin-left: -525px; z-index: 10; }
.tab.fixed li { border-radius:0;}
.tab li { float: left; width:24%; background:#b5bc76; margin-right:1%; border-radius:15px 15px 0 0;}
.tab li:last-child { margin-right:0; width:25%;}
.tab a { display:block; line-height:60px; font-size:25px; color:#2b5a18; cursor: pointer;}
.tab a span { font-size:12px; display:inline-block; vertical-align:middle;}
.tab a:hover {}
.tab li:last-child a { border-right: none;}
.tab li.active { background: #f0ebcb;}
.tab li.active a { font-weight:500; color:#e74c17;}
.tab-inn { padding:40px 40px 0 40px; background:#f0ebcb; }

.books { text-align: center; margin-top:30px;}
.books a{ display: inline-block; width:150px; height:290px; margin:0 20px; vertical-align: top; position:relative; z-index:9;}
.books a img { width: 150px; height: 200px; -webkit-transition:0.2s; -moz-transition:0.2s; transition:0.2s;}
.books a:hover img { box-shadow:0 0 0 5px #fff;}
.books a h4 { font-size: 17px; line-height:20px; margin:5px 0; color:#2b5a18;}
.books a p { font-size: 14px; line-height:16px; color:#34322d; font-weight:500;}
.books .tag1 { background:#eb73a6; font-size:13px; color:#fff; padding:0 5px; position:absolute; right:0; top:0;}
.books .tag2 { background:#ac9ab9; font-size:13px; color:#fff; padding:0 5px; position:absolute; right:0; top:0;}

#footer { font-size:13px; line-height:16px; clear:both; color:#fff; text-align:center; padding:150px 20px 50px 20px;}

/*gotop*/
#gotop{ display: block; position:fixed; bottom:20px; right:20px; width:40px; height:40px; border-radius: 50%; background:url(../images/top-arrow.png) no-repeat center #b5bc76; background-size:16px 13px; -webkit-transition:0.2s; -moz-transition:0.2s; transition:0.2s; z-index: 5; cursor: pointer;}
#gotop:hover { bottom:25px;}

/*-----------------------rwd*/
@media screen and (max-width: 1600px) {
    body {  background-size:contain;}
	.title { padding:2% 0 8% 0;}
}

@media screen and (max-width: 1500px) {
    body { background-size: auto;}
}

@media screen and (max-width: 1000px) {
    body { font-size:17px; line-height:25px;
	background: url(../images/bg1-m.jpg), url(../images/bg3.jpg), url(../images/bg2-m.jpg);
	background-position: center top, center bottom, center;
	background-repeat: no-repeat, no-repeat, repeat-y;
	background-size: contain;
	}
    .title { padding:5% 0 15% 0; height:500px;}
	.titleimg img { width:350px;}
	.inner { padding:80px 50px 50px 50px;}
    .tab.fixed { width:100%; top: 0; left:0; margin-left: 0;}
}

@media screen and (max-width: 800px) {
	.logo { width:100px;}
	.btn-menu { display:block; width:32px; height:32px; position:absolute; top:10px; right:10px; background:url(../images/icon-share.png) no-repeat center; background-size:32px 32px; z-index: 100;}
	.btn-menu.active{ background:url(../images/icon-xx.png) no-repeat center; background-size:32px 32px;}
	ul#option { display:none; width: 100%; height: 70px; top: 0; left: 0; padding-top: 50px; text-align: center; background:#e2e2a3; z-index:99; -webkit-backface-visibility:hidden;}
	ul#option li.p-m { display:inline-block;}
	ul#option li.p-pc { display:none;}
	ul#option li { font-size:14px; margin-left:10px;}

	h2 { font-size:20px; line-height:30px;}
    h3 { font-size:18px; line-height:25px;}
	p { font-size:15px; line-height:18px;}
	
	.inner { padding:50px 30px 30px 30px;}

	.sec-title { width:320px;}
	.box .sec-title { width:320px; position:absolute; left:50%; margin-left:-160px; top:-100px;}
	
    .field { margin-bottom:15px; font-size:17px; line-height:25px;}
    .field .left { display:block; width:100px; margin:8px 0;}
    .field .right { display:block; width:100%;}
    
	.break { display: inline; }
    .tab { width:100%; border-radius:0;}
	.tab.fixed { position: fixed; width:100%; top: 0; left:0; margin-left:0; }
    .tab a { line-height:35px; font-size:14px;}
	.tab-inn { padding:15px;}
	
	.books {}
	.books a{ width: 120px; height:230px; margin:0 5px;}
	.books a h4 { font-size:17px; }
	.books a p { font-size:13px;}
	.books a img { width:120px; height:160px;}
	
    #footer { padding:20px; margin-top:120px;}

	/*gotop*/
	#gotop{ bottom:10px; right:10px; width:30px; height:30px;}
}

@media screen and (max-width: 500px) {
    .title { padding:4% 0 0 0; height:500px;}
    .titleimg img { width:250px;}
    h2 { font-size:17px; line-height:27px;}
    .title h2 { margin:10px 0; letter-spacing:0;}
    h2 .red { font-size:22px; }
}