@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,header,footer,nav{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{}
q:before,q:after{content:'';}
*:focus { outline:none;}
img {max-width:100%!important; height: auto!important; _width:expression(this.width > 100 ? "100%" : this.width)!important;}

body { font-family:"SweiToothpasteCJKtc-Medium", "微軟正黑體", "Microsoft JhengHei" ,sans-serif; color:#000; font-size:18px; line-height:28px;}
body,html { height:100%; }
* { box-sizing: border-box; margin: 0; padding: 0; }

.container { width:95%; max-width:1100px; margin: 0 auto;}
.container-L { width:95%; max-width:1350px; margin: 0 auto;}
.red { color:#d05421;}
a { transition: all 0.2s; -webkit-transition: all 0.2s; -moz-transition: all 0.2s;}
p,ol li { font-size:16px; line-height:22px;}

/* nav */
.nav { position: fixed; top:36%; right:10px; width:130px; text-align: center; background: rgba(45,124,127,.9); border-radius:10px; display:none; z-index: 99;}
.nav a { color: #fff; display:block; padding:15px 0; font-size:15px; line-height:17px; border-bottom: 1px solid #4daca4;}
.nav a:hover { opacity:0.8;}
.nav a:last-child { border-bottom: none;}

#gotop { width:40px; height:40px; position: fixed; right: 10px; bottom: 15px; border-radius: 50%; background:url("../images/top.png") no-repeat center rgba(254,186,87,.8); background-size:12px 10px; z-index:99;}
#gotop:hover { bottom: 20px;}

footer { color:#999; font-size:14px; line-height:18px; padding:30px; text-align:center;}

/* 主視覺 */
#section0 { width:100%; height:920px; padding-top:240px; background: url("../images/bg-top.png") center top; background-size: 100% auto; text-align:center; background-attachment:fixed;}
.logo { display:block; position:absolute; left:5px; top:5px;}
.big-title { }
.top-info { width:95%; max-width:1060px; margin:0 auto; padding:30px 0; background:url("../images/top-bg.png") no-repeat center; background-size:100% 100%; position:relative;}
.top-card { width:100%; margin:10px auto;}
.top-card img {}
.btn-go { display:block; position:absolute; right:-30px; top:-30px;}
.btn-go:hover {transform: scale(1.1);}
.top-mobile,.btn-go-m { display:none;}

.main { background:url("../images/bg-main.jpg") center top repeat-y; background-size: 100% auto; background-attachment:fixed;}

/* 標題 */
.section-title { text-align: center; padding:80px 0 30px 0; width:95%; max-width:500px; margin:0 auto;}
.section-title img { }

/* 四格宣傳區 */
.promo { text-align:center;}
.notice { color:#767676; text-align:center; padding:30px 0;}

/* 書籍網格佈局 */
.book-grid { display: grid; gap:15px;}
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }

/* 書籍卡片 */
.book-card { display:block; color:#000; background: #fff; padding:8px 15px; text-align: center;}
.book-cover { }
.bname { font-size:24px; color: #333; margin-top:15px; font-weight:500; }
.intro { text-align:center; background:#f1f9e7; color:#247211;}
.price { font-size:18px; margin-top:10px;}
.price b { font-size:25px; font-weight: bold; color:#d05421; }
.price .str { text-decoration: line-through; color:#999;}
.book-card p { color:#666;}
.btn-buy { width:180px; margin:0 auto; color: #fff; padding: 8px 20px; position:relative; bottom:-20px; background:#000; font-size:20px; font-weight:500;}
.book-card:hover { opacity: 0.8;}
.btn-buy img { vertical-align:middle; }
.book-info { position:relative;}
.book-info .date { font-size:14px; line-height:14px; padding-top:12px; width:50px; height:50px; border-radius:50%; background:#f4c56d; position:absolute; top:20px; right:-20px;}

.notice-box { border:1px solid #ddd; padding:20px; margin-top:40px; color:#767676;}
.notice-box ol { padding-left:20px;}
.notice-box ol li { list-style:decimal; margin:10px 0;}

.book-card.mini { padding:8px; font-size:17px;}
.book-card.mini .bname { font-size:20px; line-height:20px; height:41px; margin:5px 0; }
.book-card.mini .intro { margin:8px 0;}
.book-card.mini p.des { font-size:15px; margin:8px 0;}
.book-card.mini p.price { font-size:18px;}

/* 推薦 */
.editor-intro-card { background:url("../images/bg-select.jpg"); padding:80px 40px 40px 40px; position: relative; margin-top:40px;}
.editor-badge { background:url("../images/editor-title.jpg"); color: #fff; font-size:30px; padding:15px 0; width:280px; text-align:center; display: inline-block; position: absolute; top:-20px; left: 50%; transform: translateX(-50%);}
.editor-content-flex { display: flex; gap: 30px; align-items: flex-start;  margin-bottom: 40px; margin-top: 20px;}
.editor-text { flex: 2; color: #444; line-height: 1.8; text-align: justify;}
.editor-text p { color:#666; font-size:18px; line-height:28px;}
.editor-photo-wrapper { flex: 1; min-width: 250px;}
.editor-photo { position: relative;}
.editor-photo div { background: #000; color: #fff; text-align: right; padding: 4px 10px; margin-top: -20px; border-radius:3px; position: relative; display: inline-block; float: right;}

/* 推薦書區 */
.sub-title { font-weight: 500; margin-bottom: 30px; color: #333; text-align:center; font-size:25px;}
.book-list { text-align: center;}
.book-item {  display:inline-block; width:300px; padding:10px 10px 25px 10px; margin:10px; vertical-align:top; color:#666; background:#fff;}
.book-item:hover { opacity:0.8;}
.book-item h4 { color:#45a2a0; font-size:21px; line-height:21px; font-weight:500; height:45px;}
.book-item p {}


/* RWD 設定 */
@media (max-width: 1400px) {
    /* 主視覺 */
    #section0 { width:100%; height:650px; padding-top:170px;}
    .big-title { width:500px}
    .top-info { max-width:760px; padding:40px 0;}
    .top-card img { width:200px;}
    
    /* part1 */
    .promo { text-align:center;}
    .promo img{ width:40%;}
}

@media (max-width: 1200px) {
.grid-5, .grid-3 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
    
    /* 主視覺 */
    #section0 { width:100%; height:auto; padding-top:0; background:none;}
    .logo { width:90px;}
    .top-info{ display:none;}
    .top-mobile { display:block;}
    .top-mobile img { display: block}
    .btn-go-m { display:block; position:absolute; right:5%; top:30%;}
    
    .main { background:url("../images/bg-main-m.jpg")repeat-y; background-size: 100% auto; padding:0 15px;}
    .editor-content-flex { flex-direction: column; }
    .editor-photo-wrapper { width: 100%; margin-bottom: 20px;}
    .editor-intro-card { padding: 30px 20px; }

}

@media (max-width: 768px) {
    
    .section { padding-top:30px;}
    /* nav */
    .nav { position: fixed; top:inherit; right:0; top:0; width:100%; background: rgba(45,124,127,.9); border-radius:0; z-index: 99;}
    .nav div { overflow-x: auto; overflow-y: hidden; display: flex; align-items: center; white-space: nowrap; -webkit-overflow-scrolling: touch;}
    .nav a { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; padding:10px 15px; font-size: 13px;  line-height: 1.2; height: 100%; text-align: center; border-right: 1px solid rgba(255, 255, 255, 0.3); border-bottom:none; }
    .nav a:last-child { border-right:none;}

    .btn-go-m { width:150px; right:5%; top:15%;}
    
    .section-title { padding:30px 0 20px 0;}
    .promo { width:300px; margin:0 auto;}
    .promo img{ width:300px;}
    
    .book-grid { gap:25px;}
    .grid-5, .grid-3 { grid-template-columns: repeat(2, 1fr); }
    
    .bname { font-size:20px; margin-top:10px; }
    .book-item h4 { margin:10px 0; font-size:20px; line-height:20px; height:auto;}
    .book-card.mini .bname { font-size:20px; line-height:22px; height:auto; }
    .btn-buy { width:160px; padding: 8px 20px; bottom:-15px;font-size:20px;}
    
    .editor-text p { font-size:16px;}
    .editor-badge { font-size:20px;}
}

@media (max-width: 640px) {
    .grid-5, .grid-3 { grid-template-columns: repeat(1, 1fr); }
    
}
@media (max-width: 480px) {
.btn-go-m { width:120px; right:3%; top:10%;}
}