body {font-family:"Noto Sans TC", "Roboto", "微軟正黑體", "Helvetica", sans-serif;color:#000;background-color:#FFFEF1;}

img{border:0;}

#wrap {width:100%; margin:0 auto; overflow:hidden;}

/* 各區塊 */
#setbooks, #contents, #bookinfo, #recommend, #comment, #booklist{padding:15px 0;}
#contents, #ad{padding:0 0 15px;} 

@media screen and (min-width:768px){
  #setbooks, #contents, #bookinfo, #recommend, #comment, #booklist, #ad{padding:25px 0;}
}
@media screen and (min-width:1200px){
  #contents, #bookinfo{padding:40px 0 25px;}
}


/* topbar */
.header{position:fixed;margin:auto;width:100%;z-index:100;background-color:#FFF;padding:10px 0px}
.topbarW{font-family:Arial, Helvetica, sans-serif;font-size:13px;color:#000;line-height:35px}
.topbarLogo img{height:40px}
@media only screen and (min-width:768px){
  .topbarLogo img{width:auto}
}
.topbarPic{vertical-align:middle}
.topbarW{font-family:Arial, Helvetica, sans-serif;font-size:13px;color:#000;line-height:35px}
.gridTop{vertical-align:top}
.topLink:link{font-family:Arial, Helvetica, sans-serif;font-size:13px;font-weight:normal;color:#333;text-decoration:none}
.topLink:visited{font-family:Arial, Helvetica, sans-serif;font-size:13px;font-weight:normal;color:#333;text-decoration:none}
.topLink:hover{font-family:Arial, Helvetica, sans-serif;font-size:13px;font-weight:normal;color:#999;text-decoration:none}
.topLink:active{font-family:Arial, Helvetica, sans-serif;font-size:13px;font-weight:normal;color:#333;text-decoration:none}


/* 刊頭 */
#kv{margin-top:40px;width:100%;height:auto;background:#fff1a2 url('../images/bg-kv_s.jpg')top center no-repeat;background-size:112% auto;}
#kv .container{max-width:95%;margin:0 auto;}
.mainkv{padding-top:30px;text-align:center;position:relative;}
img.slo-1{width:98%;margin:0 auto;}
.slo-2{width:66%;margin:auto;position:absolute;top:75px;left:0;right:0;z-index:90;}
.chat-s{width:96%;margin:43px auto 0;position:relative;padding-bottom:133px;}
.slo-3{position:absolute;background:url('../images/slo03-s.png') no-repeat;background-size:100%;width:33px;height:105px;top:85px;right:0;z-index:10}

@media screen and (min-width:375px){
.chat-s{margin:43px auto 0;padding-bottom:173px;}
.slo-2{width:66%;top:80px;}
.slo-3{width:42px;height:134px;top:110px;right:0;}
}
@media screen and (min-width:640px) and (max-width:767px){
  #kv{background-size:100% auto;}
  #kv .container{max-width:90%;margin:0 auto;}
  .mainkv{padding-top:50px}
  img.slo-1{width:95%;}
  .slo-2{width:68%;top:135px;left:0;right:0;z-index:90;}
  .chat-s{margin:75px auto 0;padding-bottom:215px;}
  .slo-3{width:66px;height:210px;top:165px;right:10px;}
}

@media screen and (min-width:768px){
  #kv{background-size:cover;}
  #kv .container{max-width:720px;margin:0 auto;}
  .mainkv{padding-top:56px}
  img.slo-1{width:90%;}
  .slo-2{width:64%;top:146px;}
  .chat-s{margin:80px auto 0;padding-bottom:290px;}
  .slo-3{background:url('../images/slo03-b.png') no-repeat;background-size:100%;width:135px;height:250px;top:193px;right:-35px;transform:rotateY(-3deg)}
}

@media screen and (min-width:992px){
  #kv{background:#fff1a2 url('../images/bg-kv_m.jpg')top center no-repeat;background-size:100% auto;}
  #kv .container{max-width:960px;}
  .mainkv{padding-top:45px}
  img.slo-1{width:78%;}
  .slo-2{width:52%;top:150px;}
  .chat{width:100%;margin:108px auto 0;position:relative;padding-bottom:525px;}
  .talk-1, .talk-2, .talk-3, .talk-4, .talk-5, .talk-6, .slo-3{position:absolute;background-size:100%;background-repeat:no-repeat;}
  .talk-1{background-image:url('../images/talk01.png');width:145px;height:120px;top:60px;left:62px;z-index:8}
  .talk-2{background-image:url('../images/talk02.png');width:152px;height:140px;top:0px;left:206px;z-index:7}
  .talk-3{background-image:url('../images/talk03.png');width:156px;height:115px;top:90px;left:331px;z-index:6}
  .talk-4{background-image:url('../images/talk04.png');width:234px;height:107px;top:-25px;left:365px;z-index:5}
  .talk-5{background-image:url('../images/talk05.png');width:170px;height:134px;top:-22px;right:155px;z-index:4}
  .talk-6{background-image:url('../images/talk06.png');width:228px;height:78px;top:84px;right:60px;z-index:3}
  .slo-3{width:153px;height:279px;top:200px;right:25px;z-index:10;transform:rotateY(3deg)}
}

@media screen and (min-width:1200px){
  #kv{background:#fff1a2 url('../images/bg-kv.jpg')top center no-repeat;background-size:auto;}
  #kv .container{max-width:1140px;}
  .mainkv{padding-top:48px;}
  img.slo-1{width:72%;}
  .slo-2{width:48%;top:163px;}
  .chat{margin:110px auto 0;padding-bottom:485px;}
  .talk-1{top:100px;left:159px;}
  .talk-2{top:0px;left:273px;}
  .talk-3{top:95px;left:451px;}
  .talk-4{top:-25px;left:454px;}
  .talk-5{top:-12px;right:239px;}
  .talk-6{top:69px;right:104px;}
  .slo-3{top:164px;right:60px;}
}

@media screen and (min-width:1400px){
  #kv .container{max-width:1320px;}
  img.slo-1{width:64%;}
  .slo-2{width:43%;top:165px;}
  .chat{width:80%;padding-bottom:485px;}
  .talk-1{top:76px;left:124px;}
  .talk-2{top:8px;left:263px;}
  .talk-3{top:90px;left:415px;}
  .talk-4{top:-25px;left:425px;}
  .talk-5{top:-20px;right:195px;}
  .talk-6{top:66px;right:66px;}
  .slo-3{top:168px;right:27px;}
}


/* 套書 */
#setbooks{background-color:#FFFEF1;position:relative}
#setbooks::before{content:'';width:100%;height:25px;position:absolute;top:-25px;background-image:url('../images/curve2.png');background-size:cover;}
.txt01{font-size:16px;line-height:1.45rem;font-weight:500;text-align:justify;letter-spacing:.5px;margin-bottom:.75rem}
img.setbooks-t{width:95%;margin:0 auto;vertical-align:middle;}
img.age{max-width:75%;margin:15px auto;vertical-align:middle}
.txt02{font-size:12px;line-height:1.25rem;font-weight:500;margin-left:3em;text-indent:-3em;text-align:justify;margin-bottom:0;}
.txt02 span{letter-spacing:-.5em;}

.pricebox{display:flex;flex-direction:column;justify-content:center;align-items:center;margin:15px auto 40px;}
.o-price{font-size:15px;color:#707070;text-decoration:line-through;letter-spacing:1px;margin-bottom:0;}
.sale{font-size:25px;color:#e60012;font-weight:bold;vertical-align:middle;letter-spacing:1px;margin-bottom:0;}
.sale span{font-size:2.2rem;margin:0 3px;}
.btn-red-b{font-size:1.2rem;line-height:1;letter-spacing:0.5px;color:#fff;background-color:#e60012;margin-top:5px;}
.btn-red-b span{font-size:1.5rem;margin-left:.2em;}
.pricebox > .btn{padding:1rem 4rem;}

@media screen and (min-width:768px){
  #setbooks > .container{margin-bottom:35px;}
  .txt01{font-size:20px;line-height:2rem;}
  img.setbooks-t{width:100%;max-width:575px;}
  img.age{max-width:90%;margin:5px auto 0;float:right;}
  .txt02{font-size:15px;line-height:1.5rem;padding-right:0em;margin-left:3em;text-indent:-3em;text-align:justify;margin-bottom:0;padding-left:1em;}
  .pricebox{flex-direction:row;margin:20px auto 40px;}
  .pricebox > .btn{padding:1rem 3rem;}
  .o-price{font-size:18px;margin-right:1em;padding-top:25px;}
  .sale{font-size:26px;margin-right:1em;}
  .sale span{font-size:3.2rem;}
  .btn-red-b{font-size:1.5rem;margin-top:0;}
  .btn-red-b span{font-size:1.75rem;}
}

@media screen and (min-width:992px){
  .txt02{padding-right:5em;padding-left:2em;}
  img.age{max-width:100%;margin:0;}
}

@media screen and (min-width:1200px){
  #setbooks::before{height:35px;top:-35px;}
}


/* 4大主題 */
#contents{background-color:#F8B62A;position:relative}
#contents::before{content:'';width:100%;height:25px;position:absolute;top:-25px;background-image:url('../images/curve3.png');background-size:cover;}
#contents > .container{position:relative;}
#contents > .container-fluld{width:85%;margin:20px auto;}
#contents .L01{position:absolute;width:300px;height:auto;z-index:6;display:none;}
#contents .R01{position:absolute;width:231px;height:auto;z-index:6;display:none;}

.m-space{margin-bottom:22px;}
.topic{width:100%;height:auto;margin:0 auto;padding:0;background-color:#FFF6FF;border-radius:.75rem;box-shadow:3px 2px 4px rgba(0,0,0,0.2)}
.m-space:nth-child(2) .topic{background-color:#f2ffe6;}
.m-space:nth-child(2) .topic-title{background-color:#6eb92b;}
.m-space:nth-child(3) .topic{background-color:#f9eff0;}
.m-space:nth-child(3) .topic-title{background-color:#eba5ad;}
.m-space:nth-child(4) .topic{background-color:#fcf0ee;}
.m-space:nth-child(4) .topic-title{background-color:#e60012;}

.topic-title{width:100%;height:auto;padding:10px 0;background-color:#ba84b8;border-radius:.75rem .75rem 0 0;display:flex;justify-content:center;align-items:center;}
img.kind{width:46%;padding:0;max-width:272px;margin:0 auto;}
.bookname{display:none;font-size:1rem;color:#000;font-weight:bold;margin-bottom:0;margin-right:.5em;word-break:keep-all;}
.topic h4{display:block;font-size:1.25rem;text-align:center;font-weight:bold;margin:5px 0 10px;}

.topicbox{width:88%;margin:10px auto 15px;display:flex;flex-direction:column;justify-content:center;align-items:center;}
img.topicimg{width:80%;max-width:240px;vertical-align:middle;}
.topicbox ul{width:80%;padding-left:0;margin:0 auto 10px;}
.topicbox ul li{font-size:1rem;line-height:1.65;color:#6E4704;font-weight:bold;list-style:none;float:left;width:100%;padding-left:.25em;}
.topicbox ul li span{font-size:1.1rem;line-height:1.65;color:#ec614c;margin-right:.5em;}

@media screen and (min-width:640px) and (max-width:767px){
  .bookname{display:block;font-size:1.5rem;}
  .topic h4{display:none;}
  .topicbox{width:90%;flex-direction:row;}

  .topic-title{padding:12px 0;justify-content:space-between;}
  img.kind{width:35%;padding:0 2%;margin:0 0 0 5%;}
  img.topicimg{width:50%;max-width:250px;}
  .topicbox ul{width:45%;}
}

@media screen and (min-width:768px){
  #contents > .container{margin:10px auto 0;}
  #contents > .container-fluld{width:90%;margin:30px auto;}
  #contents .L01{width:160px;left:0;top:-30px;display:block;}
  #contents .R01{width:150px;right:10px;top:-28px;display:block;}

  .topic-title{justify-content:space-between;}
  img.kind{width:35%;padding:0 2%;margin:0 0 0 5%;}
  .bookname{display:block;font-size:1.5rem;}

  .topicbox{width:92%;flex-direction:row;}  
  .topicbox ul{width:50%;margin:0;}
  .topicbox ul li{font-size:1.15rem;line-height:1.65;padding-left:1em;}
  .topicbox ul li span{font-size:1.2rem;line-height:1.65;}
  .topicbox > :first-child {margin-right:3%;}
}

@media screen and (min-width:992px){
  #contents > .container{margin:0 auto;}
  #contents > .container-fluld{width:90%;margin:40px auto;}
  #contents .L01{width:250px;left:0;top:-80px;display:block;}
  #contents .R01{width:220px;right:7px;top:-85px;display:block;}
  .topic-title{justify-content:center;align-items:center;}
  img.kind{width:40%;padding:0;margin:0;}
  .topicbox{width:100%;flex-direction:column;margin:15px auto;}
  .topicbox ul{width:100%;padding:10px 0 10px 20px;}
  .topicbox ul li{font-size:1rem;line-height:2;width:46%;padding-left:.5em;}
  .m-space:nth-child(4) .topicbox ul li:nth-child(4){width:54%;}
  .topicbox ul li span{font-size:1rem;line-height:2;margin-right:.35em;}
  img.topicimg{width:56%;max-width:260px;margin:0 auto 10px;}
  .bookname{display:none;}
  .topic h4{font-size:1.45rem;margin:0;}
  .topicbox > :first-child {margin:0 auto;margin-bottom:10px;}
}

@media screen and (min-width:1200px){
  #contents > .container-fluld{width:88%;margin:45px auto;}
  #contents::before{height:35px;top:-35px;}
  #contents .L01{width:300px;left:0;top:-110px;}
  #contents .R01{width:231px;right:45px;top:-70px;}
  .bookname{font-size:1.5rem;}
  .topicbox{width:92%;flex-direction:row;}
  img.topicimg{width:47%;max-width:280px;}
  .topicbox > :first-child {margin-right:3%;}
  img.kind{width:38%;padding:0 2%;margin:0 5%;}
  .bookname{display:block;font-size:1.5rem;margin-right:1em;}
  .topicbox ul{float:none;padding:0}
  .topicbox ul li{font-size:1.2rem;line-height:1.6;float:none;width:100%;}
  .m-space:nth-child(4) .topicbox ul li:nth-child(4){width:100%;}
  .topicbox ul li span{font-size:1.25rem;line-height:1.6;margin-right:.5em;}
}

@media screen and (min-width:1400px){
  #contents > .container-fluld{width:85%;}
  #contents .L01{left:60px}
  #contents .R01{right:125px}

  .topicbox ul{width:46%;margin:0;}
  img.topicimg{width:50%;}
  .topicbox > :first-child {margin-right:4%;}
  img.kind{width:35%;}
}

@media screen and (min-width:1920px){
  #contents > .container-fluld{width:70%;}
}


/* 每冊內容 */
#bookinfo{background-color:#FFF;position:relative}
#bookinfo::before{content:'';width:100%;height:25px;position:absolute;top:-25px;background-image:url('../images/curve6.png');background-size:cover;}
.role{display:flex;flex-direction:column;justify-content:center;}
.role img{width:90%;height:auto;vertical-align:middle;margin:0 auto;}
.role p{font-size:14px;line-height:1.3rem;padding:5px 15px 0;text-align:justify;}

.intro{width:100%;margin:0 auto 20px;}
.intro:first-child{margin-top:20px;}
.intro:last-child{margin-bottom:30px;}
.intro .book{width:100%;margin:0 auto;padding:0 0 15px;text-align:center;}
.intro .bv{width:95%;margin:0 auto;display:flex;flex-direction:column;justify-content:center;}
img.bv-t{display:none;}
img.bv-t_m{display:block;width:85%;max-width:459px;margin:10px auto 0;}
.bv > .flim{width:100%;margin:10px auto 20px;box-shadow:3px 2px 4px rgba(0,0,0,0.2)}

/*單書*/
.book > .container{width:100%;margin:5px auto 0;}
img.b-title{width:98%;max-width:468px;margin:0 auto;}
.intro:nth-child(2) .book > img.b-title{width:100%;max-width:480px;margin:0 auto;}
.intro:nth-child(3) .book > img.b-title{max-width:300px;margin:0 auto;}
.intro:nth-child(4) .book > img.b-title{max-width:300px;margin:0 auto;}

.mainbox{display:flex;flex-direction:column;justify-content:center;}
.mainbox a{width:90%;margin:0 auto 10px;padding-right:10%;}
.mainbox div{width:90%;margin:0 auto;text-align:center;word-break:break-all;}
.mainbox h4{font-size:1.35rem;font-weight:bold;line-height:1.45;letter-spacing:.25px}
.mainbox p{font-weight:400;font-size:15px;line-height:1.5;text-align:center;margin-bottom:0;}
.item-price{width:90%;margin:0 auto;display:flex;flex-direction:column;justify-content:center;}
.item-price p {text-align:center;font-size:24px;line-height:2;color:#e60012;font-weight:bold;letter-spacing:.15px;margin-bottom:0;margin-right:0.5em;}
.item-price p > span{font-size:1rem;line-height:2;color:#707070;letter-spacing:.15px;text-decoration:line-through;margin-right:0.75em;}
.item-price > .btn-red{width:75%;margin:0 auto;font-size:1.2rem;line-height:1.2;letter-spacing:0.75px;padding:.75rem 2rem;}
.item-price > .btn-red span{font-size:1.5rem;color:#fff;margin-left:.2em;}

@media screen and (min-width:768px){
  #bookinfo::before{height:30px;top:-30px;}
  .role p{font-size:16px;line-height:1.5rem;padding:10px 25px 0;}
  .role img{width:80%;max-width:255px;}

  .intro{width:95%;margin:40px auto;background-color:#FFF;border:3px solid #BA84B8;}
  .intro:first-child{margin-top:60px;}
  .intro .book{position:relative;padding:30px 0 5px;}
  .intro:nth-child(2){border:3px solid #6EB92B;}
  .intro:nth-child(3){border:3px solid #EBA5AD;}
  .intro:nth-child(4){border:3px solid #E60012;}

  img.b-title{position:absolute;width:100%;max-width:539px;margin:auto;top:-60px;left:0;right:0;z-index:3;}
  .intro:nth-child(2) .book > img.b-title{max-width:539px;}
  .intro:nth-child(3) .book > img.b-title{max-width:430px;top:-45px;}
  .intro:nth-child(4) .book > img.b-title{max-width:430px;top:-45px;}

  .book > .container{margin:15px auto;}
  .mainbox{flex-direction:row;justify-content:flex-start;align-items:center;}
  .mainbox a{width:48%;margin-right:2%;padding-right:0}
  .mainbox div{width:60%;text-align:left;word-break:normal;padding-right:5%;}
  .mainbox p{text-align:left;font-size:1rem;}
  .item-price{width:100%;flex-direction:row;align-items:center;} 
  .item-price p{text-align:left;font-size:26px;line-height:2;}
  .item-price p > span{font-size:1.2rem;line-height:2;}
  .item-price > .btn-red{width:35%;margin:0;font-size:1.5rem;}
  .item-price > .btn-red span{font-size:1.75rem;}

  .intro .bv{width:90%;}
  img.bv-t_m{width:70%;}
  .bv > .flim{width:100%;margin:10px auto 35px;box-shadow:0px 0px 0px rgba(0,0,0,0)}
}

@media screen and (min-width:1024px){
  .intro{width:100%;margin:60px auto 20px;display:flex;align-items:flex-start;border:0;background-color:transparent;}
  .intro:first-child{margin-top:60px;}
  .intro:nth-child(2), .intro:nth-child(3), .intro:nth-child(4){border:0;}
  .intro .book{width:62%;margin:0;flex-shrink:0;padding:20px 30px 20px 0;background-color:#FFFBE6;border:3px solid #BA84B8;}
  .intro:nth-child(2) .book{border:3px solid #6EB92B;}
  .intro:nth-child(3) .book{border:3px solid #EBA5AD;}
  .intro:nth-child(4) .book{border:3px solid #E60012;}
  .intro .bv{margin:0;width:42%;flex-shrink:0;margin-top:25px;z-index:1;}
  img.bv-t{display:block;width:100%;max-width:337px;margin:0 0 0 auto;}
  img.bv-t_m{display:none;}
  .bv > .flim{margin:10px auto 0;box-shadow:3px 2px 4px rgba(0,0,0,0.2)}
  .intro > :first-child{margin-right:-3%;}
  .intro:last-child{margin-bottom:50px;}

  .book > .container{margin:20px auto 10px;}
  img.b-title{position:absolute;width:100%;max-width:539px;margin:auto;top:-60px;left:0;right:0;z-index:3;}
  .intro:nth-child(2) .book > img.b-title{max-width:585px;}
  .intro:nth-child(3) .book > img.b-title{max-width:430px;top:-45px;}
  .intro:nth-child(4) .book > img.b-title{max-width:430px;top:-45px;}
  .mainbox div{width:54%;padding-right:0;}
  .mainbox h4{font-size:1.5rem;line-height:1.55}
  .mainbox p{line-height:1.65;text-align:justify;padding-left:.5em;padding-right:0}
  .item-price p {font-size:26px;margin-right:0.5em;}
  .item-price p > span{margin-right:.75em;}
  .item-price > .btn-red{font-size:22px;padding:.75rem 1.2rem;}
  .item-price > .btn-red span{font-size:1.25rem;}
}

@media screen and (min-width:1200px){
  .role p{font-size:18px;line-height:1.65rem;}

  .intro:first-child{margin-top:80px;}
  .intro .book{width:60%;padding:20px 40px 20px 0;}
  .intro > :first-child{margin-right:-5%;}
  .intro:last-child{margin-bottom:70px;}
  .intro .bv{margin-top:15px;}
  img.bv-t{width:80%;margin:0 auto;}

  .mainbox a{width:46%;margin-right:0;}
  .mainbox div{width:48%;}
  .mainbox p{padding-right:5%}
  .mainbox h4{font-size:1.6rem;line-height:2}
  .item-price{margin-top:10px;}
}

@media screen and (min-width:1400px){
  #bookinfo::before{height:35px;top:-35px;}

  .mainbox a{width:48%;}
  .mainbox div{width:45%;}
  .mainbox h4{font-size:1.75rem;line-height:2}
  .mainbox p{font-size:19px;line-height:1.75;}
  .item-price{margin-top:0;}
}


/* 專家推薦 */
#recommend{background-color:#ffe922;position:relative;}
#recommend .container{margin-bottom:15px;}
#recommend::before{content:'';width:100%;height:25px;position:absolute;top:-25px;background-image:url('../images/curve4.png');background-size:cover;}

.probox{width:100%;margin:0 auto 15px;}
.probox .pro-L{width:95%;margin:0 auto 25px;padding:10px;background-color:#fff;border:4px solid #6E4704;border-radius:10px;text-align:right;box-shadow:-3px 4px 6px rgba(0,0,0,0.4)}
.probox .pro-R{width:95%;margin:0 auto;padding:10px;background-color:#fff;border:4px solid #6E4704;border-radius:10px;position:relative;z-index:1;text-align:right;box-shadow:-3px 4px 6px rgba(0,0,0,0.4)}
.bg-pink{background-color:#ffe2ed;border-radius:8px;padding:10px 15px;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;}
img.pro-mark{width:45px;display:block;margin:5px auto 10px;}
.probox h4{font-size:1.12rem;padding-top:10px;font-weight:bold;color:#e2503a;}
.probox p{font-size:16px;font-weight:600;line-height:1.45rem;letter-spacing:.15px;text-align:justify;margin-bottom:.5rem;}

@media screen and (min-width:768px){
  .probox{display:flex;align-items:flex-start;}
  .probox .pro-L{width:52%;flex-shrink:0;margin-top:60px;border:5px solid #6E4704;position:relative}
  .probox .pro-L::before{content:'';width:60px;height:48px;position:absolute;top:-48px;left: 150px;background-image:url('../images/dialog.png');background-size:cover;}
  .probox .pro-R{width:52%;flex-shrink:0;padding:15px;border:5px solid #6E4704;background-color:#fff;border:5px solid #6E4704;border-radius:10px;position:relative;z-index:1;text-align:right;box-shadow:-3px 4px 6px rgba(0,0,0,0.4)}
  .probox .pro-R::before{content:'';width:60px;height:48px;position:absolute;bottom:-48px;right:150px;background-image:url('../images/dialog2.png');background-size:cover;}
  .probox > :first-child{margin-right:-5%;}
  .bg-pink{border-radius:10px;padding:25px 35px 25px 25px;flex-direction:row;}
  .pro-R .bg-pink{padding:25px 20px;}
  img.pro-mark{display:none;margin:0;}
  .probox h4{font-size:1.12rem;padding-top:10px;}
  .probox p{font-size:16px;font-weight:600;line-height:1.45rem;letter-spacing:.15px;text-align:justify;margin-bottom:.5rem;}  
}

@media screen and (min-width:992px){
  #recommend{background:#ffe922 url('../images/pumpkin.png') top center no-repeat;background-size:cover;}
  .bg-pink{padding:25px 45px 25px 15px;}
  .probox .pro-L{padding:15px 20px;}
  .probox .pro-L::before{width:69px;height:55px;top:-55px;left:135px;}
  .probox .pro-R{padding:15px 20px;}
  .probox .pro-R::before{width:69px;height:55px;bottom:-55px;right:250px;}
  .pro-R .bg-pink{padding:25px 25px 25px 15px;}
  .probox h4{font-size:1.35rem;}
  .probox p{font-size:18px;line-height:1.9rem;}
  img.pro-mark{width:50px;display:block;}
}

@media screen and (min-width:1200px){
  #recommend .container{margin-bottom:25px;}
  #recommend::before{height:35px;top:-35px;}
  .bg-pink{padding:25px 65px 25px 25px;}
  .pro-R .bg-pink{padding:25px 40px 25px 20px;}
  .probox p{font-size:19px;line-height:2.1rem;}
  img.pro-mark{width:60px;}
}

@media screen and (min-width:1400px){
  .probox{width:90%;}
}


/* 家長好評 */
#comment{background-color:#FFF1A2;position:relative;}
#comment::before{content:'';width:100%;height:25px;position:absolute;top:-25px;background-image:url('../images/curve5.png');background-size:cover;}
#comment .R02{position:absolute;width:142px;height:auto;right:0;bottom:-78px;z-index:6;display:none;}
#comment .L02{position:absolute;width:225px;height:auto;left:150px;bottom:-75px;z-index:6;display:none;}
#comment .container{margin-bottom:30px;}

.item{border-bottom:2px dashed #6EB92B;padding:1rem .75rem 2rem;}
.item:first-child{padding:0rem .75rem 2rem;}
.item:nth-child(3){border-bottom:0;padding:1rem .75rem 3rem;}
.item p{font-size:14px;text-align:justify;font-weight:600;line-height:1.5;margin-bottom:0;}
.item p span{font-size:1rem;color:#6E4704;line-height:1.5;float:right;margin-top:10px;}

@media screen and (min-width:414px){
  .item{padding:1rem .75rem 2.7rem;}
  .item:first-child{padding:0rem .75rem 2.7rem;}
}

@media screen and (min-width:768px){
  #comment::before{height:30px;top:-30px;}
  #comment .container{margin-bottom:50px;}
  .item:first-child{padding:0 1.25rem 2.5rem;}
  .item p{font-size:18px;line-height:2;}
  .item p span{font-size:1.25rem;line-height:2;margin-top:0;}
  #comment .R02{width:142px;right:26px;bottom:-95px;display:block;}
  #comment .L02{width:200px;left:8px;bottom:-36px;display:block;}
}
@media screen and (min-width:992px){
  #comment .R02{width:170px;top:0;right:5px;top:-110px;}
  #comment .L02{width:250px;left:10px;bottom:-65px;}
}

@media screen and (min-width:1200px){
  #comment::before{height:35px;top:-35px;}
  .item{padding:1rem .75rem 3.5rem;}
  .item:first-child{padding:0 .75rem 3.5rem;}
  #comment .R02{width:215px;right:25px;top:-110px;}
  #comment .L02{width:315px;left:45px;bottom:-105px;}
}

@media screen and (min-width:1400px){
  .item{padding:1rem .75rem 1.5rem;}
  .item:first-child{padding:0 .75rem 1.5rem;}
  .item:nth-child(3){padding:1rem .75rem 4rem;}
  #comment .R02{right:180px;top:-150px;}
  #comment .L02{width:339px;left:160px;}
}


/* 書單 */
#booklist{background-color:#FFF;position:relative;}
#booklist::before{content:'';width:100%;height:25px;position:absolute;top:-25px;background-image:url('../images/curve6.png');background-size:cover;}/*top跟height數字一樣*/
#booklist .container{margin-bottom:15px;}

.btn{border-radius:50px;padding:.75rem 1.5rem;font-weight:bold;border:0;}
.btn:hover{color:#fff;border:0}
.btn:focus, .btn:active{outline: none !important;box-shadow: none !important;-webkit-box-shadow: none !important;}

.btn-red{font-size:1rem;line-height:1;letter-spacing:0.5px;color:#fff;background-color:#e60012;}
.btn-red span{font-size:1.1rem;margin-left:2px;}

.card{border:0;padding:.5rem 0;text-align:center;}
.card-body{padding:.5rem .25rem;}
.card-body p{margin-bottom:.35rem;}
a > img.card-img-top{width:90%;margin:0 auto;}
.cover-border{border:1px solid rgba(0,0,0,.125)}
.card-title{font-size:16px;margin-bottom:.25rem;font-weight:bold;}
.card-text {font-size:16px;color:#e60012;font-weight:bold;display:flex;flex-direction:column;justify-content:center;align-items:center;}
.card-text span{font-size:0.9rem;color:#707070;text-decoration:line-through;margin-right:5px;}

@media screen and (min-width:768px){
  #booklist::before{height:30px;top:-30px;}
  #booklist .container{margin-bottom:30px;}
  .btn{padding:.75rem 2rem;}
  .btn-red{font-size:1.2rem;line-height:1.2;letter-spacing:0.75px;}
  .btn-red span{font-size:1.35rem;margin-left:5px;color:#fff;}
  .card-body{padding:.75rem .5rem;}
  a > img.card-img-top{width:75%;}
  .card-title{font-size:20px;}
  .card-text {font-size:18px;flex-direction:row;}
}

@media screen and (min-width:1200px){
  #booklist::before{height:35px;top:-35px;}
}

/* ad */
#ad{background-color:#FFF;}
#ad .container{margin-bottom:35px;}


/* footer */
.bottom a:link{font-size:13px;font-weight:bold;color:#FFF;text-decoration:none}
.bottom a:hover{font-size:13px;font-weight:bold;color:#FFF;background-color:#666666;text-decoration:underline}
.bottom a:visited{font-size:13px;font-weight:bold;color:#FFF;background-color:#666666;text-decoration:none}
.footer01{font-size:13px;font-weight:bold;color:#bd4d03;background-color:#fff;text-align:center;padding:20px 0 10px 0}
.footer02{font-size:13px;text-align:center;color:#000;line-height:24px;background-color:#fff}
.footer02 a:link{font-size:13px;text-align:center;color:#000;text-decoration:none}
.footer02 a:hover{font-size:13px;text-align:center;color:#000;text-decoration:underline}
.footer02 a:visited{font-size:13px;text-align:center;color:#000;text-decoration:none}
.bottom1{font-size:13px;font-weight:bold;color:#FFF;background-color:#3e3d43;height:35px;padding:20px 0 10px 0;text-align:center}
.footer011{font-size:13px;font-weight:bold;color:#fff;background-color:#3e3d43;text-align:center;padding:20px 0 10px 0}
.footer021{font-size:13px;text-align:center;color:#aaaaaa;line-height:24px;background-color:#222127}


/*新增animate*/
.animate__animated.animate__delay-ss{-webkit-animation-delay:.5s;animation-delay:.5s;-webkit-animation-delay:var(--animate-delay);animation-delay:var(--animate-delay)}

@-webkit-keyframes pulse2{
  0%{-webkit-transform:scaleX(1);transform:scaleX(1)}
  50%{-webkit-transform:scale3d(0.95,0.95,0.95);transform:scale3d(0.95,0.95,0.95)}
  to{-webkit-transform:scaleX(1);transform:scaleX(1)}
}

@keyframes pulse2{
  0%{-webkit-transform:scaleX(1);transform:scaleX(1)}
  50%{-webkit-transform:scale3d(0.95,0.95,0.95);transform:scale3d(0.95,0.95,0.95)}
  to{-webkit-transform:scaleX(1);transform:scaleX(1)}
}

.animate__pulse2{
  -webkit-animation-name:pulse2;
  animation-name:pulse2;
  -webkit-animation-timing-function:ease-in-out;
  animation-timing-function:ease-in-out
}


@-webkit-keyframes zoomOut2{
  0%{opacity:0;-webkit-transform:scale3d(1.5,1.5,1.5);transform:scale3d(1.5,1.5,1.5)}
  50%{opacity:1}
}
@keyframes zoomOut2{
  0%{opacity:0;-webkit-transform:scale3d(1.5,1.5,1.5);transform:scale3d(1.5,1.5,1.5)}
  50%{opacity:1}
}
.animate__zoomOut2{-webkit-animation-name:zoomOut2;animation-name:zoomOut2}