@charset "UTF-8";
*{outline:none;-webkit-box-sizing:border-box;box-sizing:border-box;}
blockquote,body,dd,div,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,img,input,li,ol,p,pre,textarea,ul{margin:0;padding:0}
a{text-decoration:none;outline:none;}
img{border:0;vertical-align:middle;}
button,input,select{outline:0;border:none}
.cursor,button{cursor:pointer}
ul,li{list-style:none;}
body{background-color:#e3edb5;}
p{font-family:'Open Sans','Noto Sans TC','Microsoft YaHei',sans-serif;color:#000;font-size:18px;line-height:1.4;font-weight:400;margin-bottom:.25em;letter-spacing:.25px;text-align:justify;}
@media only screen and (max-width:991px){
  p{font-size:16px;line-height:1.5;}
}

#wrap{width:100%;margin:0 auto;overflow:hidden;padding-top:50px;}

/*** nav ***/
.clearfix:after {clear:both;display:block;visibility:hidden;height:0;content:"."}
.clearfix {zoom:1}
.fleft{float:left}
.fright{float:right}
.menu{position:fixed;width:100%;z-index:100;-webkit-box-shadow:0px 0px 5px rgba(0, 0, 0, 0.5);box-shadow:0px 0px 5px rgba(0, 0, 0, 0.5);padding:10px 15px;background-color:#fff;line-height:0}
.menu .logo {display:inline-block}
.menu .logo img {width:auto;height:30px}
.login_btn {transition:.2s ease;display:inline-block;padding:0 6px}
#main{width:100%;max-width:1200px;margin:0 auto;}
@media only screen and (min-width:768px) {
    #main {padding-left:20px;padding-right:20px}
}

/***保固頁***/

.cardpage{width: 60%;overflow: hidden;background-color: #FFF;margin: 5% auto;padding: 2%;text-align: center;}
table{padding: 1%}
.illg{margin: 2% auto; width: 450px;}

@media only screen and (max-width:991px){
	.cardpage{width: 80%;overflow: hidden;background-color: #FFF;margin: 2% auto;padding: 2%;text-align: center;}
	table{padding: 1%;}

}

@media only screen and (max-width:575px){
	.cardpage{width: 98%;overflow: hidden;background-color: #FFF;margin: 1% auto;padding: 2%;text-align: center;}
	table{padding: 1%;}

}



/*** 刊頭 ***/
.hd_bg{width:100%;margin:0 auto;background:#e3edb5 url('../images/kv_bg.jpg') center top;overflow:hidden;}
.mainkv{width:100%;max-width:1200px;margin:0 auto;height:780px;position:relative;}
.bear{position:absolute;width:33%;max-width:391px;top:22%;left:-10%;z-index:5;}
.bird{position:absolute;width:15%;max-width:175px;top:26%;right:-2.5%;z-index:5;}
.snake{position:absolute;width:19%;max-width:227px;top:56%;right:1.5%;z-index:5;}
.bubble{position:absolute;width:77%;max-width:915px;height:654px;top:4.5%;left:10.8%;background:url('../images/bubble.png')center top no-repeat;text-align:center;padding-top:7%;}
img.bubble-1{width:61%;max-width:555px;animation:fadeIn 5s .6s;animation-fill-mode:both;}
.bubble-2{padding-left:6%;margin-top:-18px;margin-bottom:27px;}
.bubble-2 > img {width:66%;max-width:429px;height:auto;animation-name:fadeIn,tada;animation-duration:1s,1s;animation-delay:1.5s,2s;animation-fill-mode:both,none;}
.bubble-2 > img:last-child{width:29%;max-width:213px;height:auto;animation:zoomIn .6s 1.7s;animation-fill-mode:both;}
img.bubble-3{width:62%;max-width:566px;animation:fadeIn .75s 1.9s;animation-fill-mode:both;}
.black1{position:absolute;width:26%;max-width:304px;top:80.5%;left:22%;z-index:2;animation:black-L .2s 2.1s;animation-fill-mode:both;}
.black2{position:absolute;width:33%;max-width:390px;top:78.5%;left:45%;z-index:3;animation:black-R .2s 2.1s;animation-fill-mode:both;}
.kv-title3{position:absolute;bottom:0;left:0;right:0;margin:auto;width:64%;max-width:766px;animation:fadeIn 3.5s 2.5s;animation-fill-mode:both;}
.bear-d{position:absolute;width:15%;max-width:176px;top:24%;left:-4.5%;z-index:6;opacity:0;animation-name:fadeIn, dialog;animation-duration:2s, 2s;animation-delay:3s,0s;animation-iteration-count:1,infinite;animation-fill-mode:forwards,none;}
.bird-d{position:absolute;width:13%;max-width:154px;top:8%;right:4%;z-index:6;opacity:0;animation:dialogfade 5s 3.6s;animation-iteration-count:infinite;animation-fill-mode:none;}
.snake-d{position:absolute;width:14%;max-width:164px;top:51%;right:-3.8%;z-index:6;opacity:0;animation:dialogfade 5s 4.2s;animation-iteration-count:infinite;animation-fill-mode:none;}
.video{width: 700px;height: 394px;border: 4px #000 solid;border-radius: 20px;margin: 2%;}

@media only screen and (max-width:1399px){
  .hd_bg{background-size:cover;background-repeat:no-repeat;}
  .mainkv{width:80%;max-width:100%}
  .bubble{width:84%;background-size:100% auto;}
  .bear{top:25%;}
  .bird{top:20%;right:-10.5%}
  .snake{right:-5.5%;}
  .bear-d{width:16%;left:-5%;}
  .bird-d{width:14%;top:4%;right:-2%;}
  .snake-d{width:15%;top:49%;right:-11%;}
  .black1{width:28%;}
  .black2{width:36%;top:78%;left:47%;}
  .kv-title3{width:68%;bottom:1.5%}
}
@media only screen and (max-width:1280px){
  .black1{top:77.5%;}
  .black2{top:75%;}
  .kv-title3{bottom:4%}
}
@media only screen and (max-width:1199px){
  .mainkv{height:auto;padding-top:63%;}
  .bubble-2{margin-top:-12px;margin-bottom:20px;}
  .bubble-2 > img{width:50%;}
  .bubble-2 > img:last-child{width:27%;}
  img.bubble-1{width:64%;}
  img.bubble-3{width:63%;}
  .bear{width:35.5%;top:21%;left:-11%;}
  .bird{width:17.5%;top:19%;right:-11.5%}
  .snake{width:24%;top:54%;right:-9.5%;}
  .bear-d{width:18%;top:20%;left:-7%;}
  .bird-d{width:16%;top:3%;right:-4%;}
  .snake-d{width:17%;top:45%;right:-12%;}
  .black1{top:75%;}
  .black2{top:72%;}
  .kv-title3{width:80%;bottom:5%}
}
@media only screen and (max-width:768px){
  .hd_bg{background-size:150% auto;background-position:46% 0;}
  .mainkv{width:90%;padding-top:116%}
  .bubble{width:96%;left:0;right:0;margin:auto;top:2%;padding-top:9%;}
  img.bubble-1{width:68%;}
  .bubble-2{margin-top:-20px;margin-bottom:16px;}
  img.bubble-3{width:60%;}
  .black1{width:34%;top:50.5%;left:15%;}
  .black2{width:44%;top:49%;left:45%;}
  .bear{width:40%;top:48%;left:0;}
  .bear-d{width:22%;top:49%;left:-3%;}
  .bird{width:20%;top:73%;right:32%}
  .bird-d{width:20%;top:60%;right:42%;}
  .snake{width:26%;top:68%;right:2%}
  .snake-d{width:21%;top:58%;right:-3%;}
  .kv-title3{width:98%;bottom:2%}
.video{width: 90%;height: 100%;border: 3px #000 solid;border-radius: 20px;margin: 3% auto;}

}
@media only screen and (max-width:575px){
  .bubble-2{margin-top:-9px;margin-bottom:3px;}
  .black1{top:50%;}
  .bear-d{width:24%;}
  .bird-d{width:22%;top:59%;right:41%;}
  .snake-d{width:24%;top:56%;right:-4%;}
.video{width: 80%;height: 100%;border: 3px #000 solid;border-radius: 20px;margin: 3% auto;}

}

/*刊頭動態*/
.fadeIn{opacity:0;animation-name:fadeIn;animation-timing-function:ease-in-out}
@keyframes fadeIn{
  0% {opacity:0;}
  30%,100% {opacity:1;}
}
.tada {animation-name:tada;}
@keyframes tada {
    0% {transform:scaleX(1)}
    10%,20% {transform:scale3d(.9, .9, .9) rotate(-3deg)}
    30%,50%,70%,90% {transform:scale3d(1.1, 1.1, 1.1) rotate(3deg)}
    40%,60%,80% {transform:scale3d(1.1, 1.1, 1.1) rotate(-3deg)}
    to {transform:scaleX(1)}
}
.zoomIn {animation-name:zoomIn;}
@keyframes zoomIn {
    0% {opacity:0;transform:scale3d(.2, .2, .2)}
    100% {opacity:1;transform:scale3d(1, 1, 1)}
}
.dialog{animation-name:dialog;animation-timing-function:ease}
@keyframes dialog{
  from {transform:scale(1)}
  50% {transform:scale(1.05)}
  to {transform:scale(1)}
}
.dialogfade{opacity:0;animation-name:dialogfade;animation-timing-function:ease-in-out}
@keyframes dialogfade{
  from {opacity:0;}
  10%,90% {opacity:1;}
  100% {opacity:0;}
}
.black-L {opacity:0;animation-name:black-L;}
@keyframes black-L {
  from {opacity:0;transform:translate3d(-25%, 0, 0)}
  to {opacity:1;transform:translateZ(0)}
}
.black-R {opacity:0;animation-name:black-R;}
@keyframes black-R {
  from {opacity:0;transform:translate3d(25%, 0, 0)}
  to {opacity:1;transform:translateZ(0)}
}


/*** 共用 ***/
.pos_r{position:relative;}
#about, #characters, #intro, #kids, #author, #experts, #blogger, #booklist, #banner, #fb{width:100%;}
.mainbox{width:100%;max-width:1200px;margin:0 auto;}
.part-title{width:100%;margin:0 auto 2rem;text-align:center;}
.part-title_m{width:95%;margin:0 auto 1rem;}
.mt-space{margin-top:50px}
.mb20{margin-bottom:20px}
@media only screen and (max-width:1199px){
  .part-title{width:96%;}
  .mainbox{width:100%;max-width:100%;}
  .mt-space{margin-top:35px}
}
@media only screen and (max-width:991px){
  .part-title{margin:0 auto 1rem;}
  .mainbox{width:96%;}
}
@media only screen and (max-width:575px){
  .mt-space{margin-top:15px}
}

/*** 錨點偏移 ***/
#characters:target::before{content:"";display:block;padding-top:35px;}
#preview:target::before{content:"";display:block;padding-top:40px;}
#kids:target::before{content:"";display:block;padding-top:25px;}
#author:target::before{content:"";display:block;padding-top:60px;}
#experts:target::before{content:"";display:block;padding-top:15px;}
#blogger:target::before{content:"";display:block;padding-top:40px;}
#booklist:target::before{content:"";display:block;padding-top:40px;}

/*** about ***/
#about{padding:50px 0 0;}
.p2_bg{width:100%;max-width:1366px;margin:0 auto;background:#fff;border-radius:30px;padding:1.5rem 0;overflow:hidden;text-align:center;}
.bg2{width:100%;padding-top:14%;background:#fff8d6 url('../images/bg2.gif')top center no-repeat;background-size:116% auto;}
.takelook{width:90%;margin:0 auto;display:flex;justify-content:space-around;align-items:center;flex-wrap:wrap;}

/*fancybox*/
.tk-pic{width:30%;flex-grow:1;padding:0 0.5%;margin-bottom:1.05rem}
.view{overflow:hidden;position:relative}
.view img{width:100%;height:100%}
.view .overlay{background:rgba(0,0,0,.5);height:100%;left:0;opacity:0;position:absolute;top:0;width:100%;transition:opacity .3s}
.view .overlay-caption{position:absolute;text-align:center;top:50%;width:100%;transform:translateY(-50%)}
.view p, .view img{transition:all 0.3s}
.view p{transform:translate3d(0,200%,0)}
li.view p, .view p{color:#fcce56;margin:0;opacity:0;font-size:9em;font-weight:700;text-align:center;}
.view .overlay-caption img{width:50%;max-width:124px;margin:0 auto;}
.slider-box:hover img{transform:scale(1.08)}
.slider-box:hover .overlay{opacity:1}
.slider-box:hover .overlay p{opacity:1;transform:translate3d(0,0,0)}

@media only screen and (max-width:1399px){
  .p2_bg{width:92%;}
  .takelook{width:93%;}
}
@media only screen and (max-width:1199px){
  #about{padding:20px 0 0;}
  .p2_bg{width:94%;max-width:100%;}
  .takelook{width:96%;}
}
@media only screen and (max-width:991px){
  .p2_bg{padding:1.25rem 0 .5rem;}
  .tk-pic{width:35%;}
  .takelook{width:92%;}
}
@media only screen and (max-width:768px){
  .bg2{padding-top:17%;background-size:126% auto;}
}
@media only screen and (max-width:575px){
  #about{padding:10px 0 0;}
 .p2_bg{padding:1rem 0 .25rem;}
}



/*** characters ***/
#characters{padding:20px 0 30px;}
#characters > .mainbox{padding-top:1.5rem}
.bg-lightyellow{width:100%;background-color:#fff8d6}
.p3-characters{width:100%;max-width:1156px;margin:10px auto 40px;}
.p3-characters_m{display:none;}
#characters > .mainbox{position:relative;}
.ill3-1, .ill3-2, .ill3-3{position:absolute;z-index:1}
.ill3-1{width:14.7%;top:10%;left:-13%;}
.ill3-2{width:20%;top:44%;right:-10%;}
.ill3-3{width:15%;bottom:5%;left:1%;}

@media only screen and (max-width:1399px){
  #characters > .mainbox{width:80%;}
  .ill3-1{left:-10%;}
  .ill3-2{right:-14%;}
}
@media only screen and (max-width:1199px){
  #characters > .mainbox >.part-title{width:100%;}
  .ill3-1{top:18%;left:-10.5%;}
  .ill3-2{width:22%;top:46%;right:-16%;}
}
@media only screen and (max-width:991px){
  #characters > .mainbox{width:92%;}
  .ill3-1,.ill3-2{display:none;}
}
@media only screen and (max-width:768px){
  #characters > .mainbox{padding-top:.5rem}
  #characters > .mainbox > .part-title{margin:0 auto 1.5rem;}
  .p3-characters{display:none;}
  .p3-characters_m{display:block;width:100%;margin:10px auto 25px;}
  .ill3-3{width:23%;bottom:0;left:1%;}
}
@media only screen and (max-width:575px){
  #characters{padding:10px 0 20px;}
}

/*** intro ***/
#intro{padding:0;}
.bg-beige{width:100%;background-color:#fffceb}
.bg4-1{width:100%;padding-top:10.25%;background:#fffceb url('../images/bg4-1.gif')top center no-repeat;background-size:135% auto;}
.bg4-2{width:100%;padding-top:10.25%;background:#e3edb5 url('../images/bg4-2.gif')top center no-repeat;background-size:135% auto;}
.bookbox{margin-top:35px;padding:0;text-align:center}
.border-r{border-right:#e4ecd3 1px solid;}
.cover-flex{display:flex;flex-direction:column;justify-content:center;align-items:center;}
.cover-flex > :last-child{width:100%;}
a.coverimg{width:45%;margin:0 auto 10px;transition:all .2s}
a.coverimg:hover{transform:scale(1.02)}
p.bname{color:#a15428;font-weight:700;font-size:1.8em;line-height:1.65;text-align:center;margin-bottom:0;}
p.age{font-size:1em;line-height:1.6;letter-spacing:.5px;text-align:center;margin-bottom:0} 
p.txt01{font-size:1.125em;font-weight:400;line-height:1.5;letter-spacing:.25px;margin-bottom:.5em}
p.txt01 > span{display:block;font-weight:700;line-height:1.55;margin-bottom:.1em;}
p.txt02{font-size:1.3em;font-weight:700;line-height:1.5;margin-bottom:.5em}
.bookbox > p.txt01 {padding:0 10%;}
.sale{margin-bottom:20px;text-align:center;}
.sale p{color:#ec751a;font-family:'Open Sans','Noto Sans TC','Microsoft YaHei',sans-serif;font-size:2.06em;font-weight:600;letter-spacing:1px;margin-bottom:.1em;text-align:center;}
span.o-price{color:#888888;font-size:.75em;font-weight:500;text-decoration:line-through;margin-right:.75em;letter-spacing:.5px;}
span.price{font-size:1.25em;margin-left:8px;margin-right:8px;letter-spacing:0;}
.btnbox{margin:10px auto 30px;display:flex;justify-content:center;}
.btnbox >:first-child{margin-right:2%;}
.buybtn,.previewbtn,.downloadbtn{display:inline-block;background-color:#ec751a;border-radius:10px;padding:.5em 3em;box-shadow:0px 5px 0 #8b0000;color:#fff;font-family:'Open Sans','Noto Sans TC',sans-serif;font-size:1.75em;font-weight:700;letter-spacing:1px;transition:all .2s;}
.previewbtn{background-color:#4ba33b;padding:.5em 1.75em;box-shadow:0px 5px 0 #135707;font-size:1.25em;font-weight:700;}
.downloadbtn{background-color:#5db0f1;padding:.5em 1.75em;box-shadow:0px 5px 0 #004d89;font-size:1.25em;font-weight:700;}
.buybtn:hover{color:#fff;transform:translateY(3px);box-shadow:0 0 0 #8b0000;}
.previewbtn:hover{color:#fff;transform:translateY(3px);box-shadow:0 0 0 #135707;}
.downloadbtn:hover{color:#fff;transform:translateY(3px);box-shadow:0 0 0 #004d89;}
.ill4-1{position:absolute;width:51%;max-width:335px;right:-21%;top:33%;}
.bookbox:last-child >.sale{margin-top:60px;}

/*preview*/
.previewbox{width:100%;padding:45px 0 0;background-color:#fffceb}
.previewbox > .mainbox{width:80%;}
.collect_5x6{width:100%;margin:0 auto 65px;background:#4f8944;border-radius:30px;padding:20px 10px 32px;}
.takelook2{width:96%;margin:0 auto;background-color:transparent;padding:0;}
p.list-title{font-size:2em;font-weight:700;margin-bottom:.5em;text-align:center;color:#fff;}
.book2-hide{display:none;}


@media only screen and (max-width:1399px){
  .bookbox:last-child > .btnbox >:first-child{margin-right:0;}
  .ill4-1{width:59%;right:-18%;top:85%;}
  .bookbox:last-child >.sale{margin-top:0;}
  .previewbox{padding:50px 0 0;}
  .previewbox > .mainbox{width:80%;}
}
@media only screen and (max-width:1199px){
  .ill4-1{width:49%;right:25%;top:70%;}
  .bookbox:last-child >.sale{margin-top:170px;}
  .previewbox{padding:35px 0 0;}
  .previewbox > .mainbox{width:90%;}
}
@media only screen and (max-width:991px){
  #intro >.container > .part-title{margin:0 auto 2rem;}
  .bg4-1, .bg4-2{background-size:200% auto;}
  .bookbox:first-child{margin-bottom:20px}
  .border-r{border-right:0;}
  .cover-flex{width:80%;margin:0 auto;display:flex;flex-direction:row;align-items:center;margin-bottom:10px}
  .bookbox:last-child >.cover-flex{align-items:flex-end;}
  a.coverimg{width:60%;margin:0 auto 5px;padding:0 4% 0 2%;}
  .cover-flex > :last-child{width:auto;flex-grow:1;}
  .btnbox{margin:10px auto 20px;flex-direction:column;}
  .previewbtn,.downloadbtn{padding:.5em 2em;margin:0 auto;font-size:1.375em;}
  .btnbox >:first-child{margin-right:auto;margin-bottom:1.5rem;}
  .bookbox:last-child > .cover-flex > div >.btnbox >:first-child{margin-bottom:0;}
  p.bname{font-size:2.2em;margin-bottom:.25rem;}
  .bookbox > p.txt01{padding:0 12% 0 15%;line-height:1.6;}
  .bookbox > p.txt01 > span{font-size:1.2em;line-height:1.6;margin-bottom:.2em;}
  .ill4-1{width:37%;right:1%;top:-7.5%;}
  .bookbox:last-child >.sale{margin-top:0;}
  .previewbox > .mainbox{width:92%;}
}
@media only screen and (max-width:767px){
  .bookbox:first-child{margin-bottom:32px}
  .cover-flex{width:100%;}
  a.coverimg{width:50%;padding:0 4% 0 0;}
  .bookbox > p.txt01{padding:0 5%;}
  .ill4-1{right:5%;top:-4.5%;}
  .previewbox > .mainbox{width:95%;}
}
@media only screen and (max-width:575px){
  #intro >.mainbox{margin-top:15px;}
  #intro >.mainbox > .part-title{width:100%;}
  .bookbox{margin-top:25px;}
  .bookbox:first-child{margin-bottom:15px}
  .cover-flex{width:80%;flex-direction:column;}
  a.coverimg{width:60%;padding:0;}
  .cover-flex > :last-child{width:100%;}
  p.bname{font-size:1.65em;}
  .previewbtn,.downloadbtn{padding:.5em 1.2em;font-size:1.125em;}
  .btnbox{flex-direction:row;}
  .btnbox >:first-child{margin:0 2% 0 0}
  p.txt01{font-size:1em;}
  .bookbox > p.txt01{padding:0 8%;}
  .bookbox > p.txt01 > span{font-size:1.125em;}
  .sale p{font-size:1.65em;}
  .buybtn{font-size:1.375em}
  .ill4-1{display:none;}
  .previewbox{padding:20px 0 0}
  .collect_5x6{padding:15px 10px 25px;border-radius:15px;}
  p.list-title{font-size:1.65em;}
  .flex-control-paging li a{width:15px !important;height:15px !important;}
  .flex-direction-nav a {width:45px !important;height:45px !important;top:42% !important;}
  .flex-direction-nav a:before{font-size:36px !important;}
  .flex-direction-nav .flex-prev {left:5px !important}
  .flex-direction-nav .flex-next {right:5px !important}
  .flexslider:hover .flex-direction-nav .flex-prev {left:5px !important}
  .flexslider:hover .flex-direction-nav .flex-next {right:5px !important}
}


/*** kids ***/
#kids{padding:0 0 70px;}
#kids > .mainbox{padding-top:2.5rem;}
/* #kids > .mainbox:last-child{padding-top:0;} */
.share{display:flex;justify-content:space-between;flex-wrap:wrap;padding:0 2%;}
.share-new{padding:1.5rem 2% 0;display:none;overflow:hidden;}
.share-new-flex{display:flex;justify-content:space-between;flex-wrap:wrap;}
.ill5{position:absolute;width:17%;max-width:195px;top:3%;left:0;right:0;margin:auto;z-index:-1}
.share_item, .share_item2{width:38%;position:relative;background:#fff;border-radius:15px;border:#91c7ed 2px solid;padding:2.5% 2% 1%;margin-bottom:40px;}
.share_item2{width:48%;}
.share_item:nth-child(n+5){margin-bottom:25px;}
.share_title{width:54%;margin:0 auto;position:absolute;top:-20px;left:23%;background-color:#91c7ed;color:#000;padding:4px 0;border-radius:20px;font-family:'Open Sans','Noto Sans TC','Microsoft YaHei',sans-serif;font-size:1.25em;font-weight:500;text-align:center;}
.collapsible .active, .collapsible:focus, .collapsible:hover {border:none;outline:none;}
.collapsible {outline:none;color:white;width:100%;border:none;background-color:transparent;position:relative;text-align:center;padding-top:10px;}
#kids .kids_more {width:100%;padding-left:0;padding-right:0;text-align:left;}
.morebtn{display:inline-block;background-color:#e4edb6;border-radius:10px;border:#336618 2.5px solid;padding:.25em 2.5em;box-shadow:0px 5px 0 #336618;color:#336618;font-family:'Open Sans','Noto Sans TC',sans-serif;font-size:1.375em;font-weight:700;letter-spacing:1px;transition:all .2s;}
.morebtn span{font-size:1.25em;margin-left:.5em}
.morebtn:hover{transform:translateY(3px);background-color:#336618;box-shadow:0 0 0 #e4edb6;color:#fff;}

@media only screen and (max-width:1199px){
  #kids > .mainbox{padding-top:1rem;}
  .share_title{width:72%;left:14%;font-size:1.125em;}
}
@media only screen and (max-width:991px){
  #kids > .mainbox{padding-top:2rem;}
  #kids >.mainbox > .part-title{margin:0 auto 2rem;}
  .ill5{width:21%;}
  .share_title{width:88%;left:6%;}
}
@media only screen and (max-width:767px){
  .ill5{display:none;}
  .share_item, .share_item2{width:48%;}
  .share_title{width:82%;left:11%;}
}
@media only screen and (max-width:575px){
  #kids{padding:0 0 45px;}
  .share, .share-new-flex{flex-direction:column;justify-content:center;}
  .share_item, .share_item2{width:90%;margin:0 auto 40px;padding:4.5% 4% 1%;}
  .share > .share_item:last-child{margin-bottom:20px}
  .share-new > .share_item2:last-child{margin-bottom:0}
  .morebtn{padding:.25em 1.25em;font-size:1.25em;}
  #kids .kids_more{width:96%;}
}


/*** author ***/
#author{padding:0 0 60px;}
.authorbox{width:100%;margin:0 auto;display:flex;justify-content:center;align-items:flex-start;}
.authorimg{flex-grow:1;text-align:center;}
.authortxt{width:66%;padding-left:2%;}
.namebox{display:flex;justify-content:flex-start;align-items:center;margin-bottom:15px;}
p.aname{display:inline-block;font-weight:700;font-size:1.875em;line-height:1.8;margin-bottom:15px;}
p.aname span{font-family:'Open Sans','Noto Sans TC',sans-serif;font-size:.95em;margin:0 .75em 0 .2em;letter-spacing:-.2px;}
.ig{width:7%;transition:width .2s}
.ig:hover{width:8%;}
p.tip{font-size:.95em;color:#833608;font-weight:500;letter-spacing:.25px;line-height:1.55;margin-top:1em;margin-bottom:0;}

@media only screen and (max-width:1199px){
  .authorbox{width:94%;}
  .authorimg{padding-top:1%}
  .authortxt{width:80%;}
}
@media only screen and (max-width:991px){
  .authorbox{width:96%;}
  .authorbox{flex-direction:column;align-items:center;}
  .authorimg{width:64%;padding:2% 0;margin:5px 0 10px;}
  .authortxt{width:95%;}
  p.aname{text-align:center;}
}
@media only screen and (max-width:767px){
  .authorimg{width:76%;}
  .ig{width:10%;transition:none}
}
@media only screen and (max-width:575px){
  .authorimg{width:90%;}
  .authortxt{text-align:center;}
  p.aname{line-height:1.4}
  p.aname span{display:block;}
  .ig{width:15%;margin:12px auto;}
}



/*** experts ***/
#experts{padding:50px 0;}
#experts > .mainbox > div:last-child{width:86%;margin:0 auto;}
p.ename{color:#4f8944;font-weight:700;font-size:1.75em;text-align:center;line-height:1.8;margin-bottom:.75em}
img.ill7-1{width:27%;max-width:303px;margin:0 0 0 20px;float:right;}

@media only screen and (max-width:1399px){
  #experts > .mainbox > div:last-child{width:90%;}
}
@media only screen and (max-width:1199px){
  img.ill7-1{width:33%;margin:-12px 0 0 32px}
}
@media only screen and (max-width:991px){
  img.ill7-1{width:30%;margin:0 0 0 25px}
  #experts > .mainbox > div:last-child{width:95%;}
}
@media only screen and (max-width:767px){
  img.ill7-1{width:40%;margin:29px 0 9px 14px}
  #experts > .mainbox > div:last-child{width:90%;}
}
@media only screen and (max-width:575px){
  #experts{padding:35px 0 20px;}
  p.ename{font-size:1.375em;line-height:1.4;}
  p.txt02{font-size:1.125em}
}

/*** blogger ***/
#blogger{padding:30px 0 60px;}
.swiper-container{width:96%;margin:50px auto 0;padding:0;}
.itembox{width:88%;margin:0 auto;display:block;}
.itembox-flex{display:flex;justify-content:center;align-items:flex-start;}
.itembox-flex > :last-child{flex-grow:1;padding-left:2%;}
.itembox .img-container{overflow:hidden;width:180px;height:180px;max-width:180px;max-height:180px;min-width:180px;min-height:180px;margin:0 auto}
.itembox .img-container img{width:auto;height:100%;margin-left:-20%}
p.item-title{font-size:1.375em;margin-bottom:10px;font-weight:700;text-align:left;}

@media only screen and (max-width:1399px){
  .swiper-container{width:100%;}
}
@media only screen and (max-width:1199px){
  .swiper-container{width:90%;}
  .itembox{width:84%;}
}
@media only screen and (max-width:991px){
  .swiper-container{width:96%;margin:40px auto 0;}
  .itembox-flex > :last-child{padding-left:3%;}
  .itembox{width:90%;padding:0 3%;}
  .itembox .img-container{width:200px;height:200px;max-width:200px;max-height:200px;min-width:200px;min-height:200px;margin:5px auto 0}
}
@media only screen and (max-width:767px){
  .itembox-flex{flex-direction:column;align-items:center;}
  .itembox{width:82%;padding:0;text-align:center}
  .itembox .img-container{margin:5px auto 15px;}
}
@media only screen and (max-width:575px){
  #blogger{padding:30px 0 35px;}
  .swiper-container{margin:20px auto 0;}
  .itembox{width:70%;}
  .itembox .img-container{width:160px;height:160px;max-width:160px;max-height:160px;min-width:160px;min-height:160px;}
}


/*** booklist ***/
#booklist{padding:65px 0 10px;}
.ill9-1,.ill9-2{position:absolute;z-index:-1}
.ill9-1{width:22%;max-width:262px;top:-72%;left:4%;}
.ill9-2{width:19%;max-width:225px;top:-60%;right:6%;}
.list1{width:100%;margin:0 auto;background-color:#f39d60;border-radius:30px;padding:2%;margin-bottom:50px;text-align:center;}
.list2{width:100%;margin:0 auto;background-color:#fbcd55;border-radius:30px;padding:2%;text-align:center;}
.card{border:0;border-radius:0;padding:0 0 .6rem;text-align:center;position:relative;transition:all .2s}
.card:hover{transform:scale(1.02)}
.card-body{padding:0 .75rem;}
.card-title{font-weight:500;font-size:1.125em;margin-bottom:0;/* padding-right:4%; */text-align:left;}
.card-sale{display:flex;justify-content:center;align-items:center;}
.card-text{flex-grow:1;font-size:1em;line-height:1.4;color:#000;margin-bottom:0;overflow:hidden;word-break:break-all;}
.card-img, .card-img-top{border-top-left-radius:0;border-top-right-radius:0;}
span.del{color:#888888;font-size:.9em;font-weight:500;text-decoration:line-through;margin-right:.4em;letter-spacing:0;}
span.price2{color:#ec751a;font-size:1.25em;font-weight:600;margin:0 2px;}
.cartbtn{background-color:#ec751a;border-radius:50%;padding:8px 12px;color:#fff;}
/* .list2 > .row > .col{margin-bottom:20px;} */
/* .list2 > .row > .col:nth-child(n+5){margin-bottom:0;} */

@media only screen and (max-width:1199px){
  .ill9-1{width:24%;top:-58%;left:1%;}
  .ill9-2{width:21%;top:-40%;right:2%;}
  .card-title{font-size:1.1em;margin-bottom:0.25em;}
  span.del{display:block;}
}
@media only screen and (max-width:991px){
  #booklist > .mainbox > .part-title{margin:0 auto 1.5rem;text-align:right;padding-right:8%}
  .ill9-1{width:28%;top:-49%;left:5%;}
  .ill9-2{display:none;}
  .list1{width:96%;margin-bottom:30px;padding:3% 2% 4%;}
  .list2{width:96%;padding:3% 2% 4%;}
  .card-body{padding:0 1.25rem .25rem;}
  .card-title{font-size:1.2em;}
  .card-img-top{width:80%;margin:.2rem auto 0;}
  .card-text{font-size:1.125em;}
  span.del{display:inline-block;}
  .list2 > .row > .col{margin-bottom:0px;}
}
@media only screen and (max-width:767px){
  #booklist > .mainbox > .part-title{padding-right:3%}
  .ill9-1{width:31%;top:-21%;left:-2%;}
  .card-body{padding:0 .8rem .25rem}
  span.del{display:block;}
}
@media only screen and (max-width:575px){
  #booklist{padding:40px 0 10px;}
  #booklist > .mainbox > .part-title{width:63%;margin:0;padding-right:0;margin-left:32%;margin-bottom:20px}
  .list1, .list2{padding:4% 3% 4%;}
  .list1 > :first-child{width:80%;margin:0 auto 8px;}
  .list2 > :first-child{width:80%;margin:0 auto 8px;}
  .ill9-1{width:52%;top:-21%;left:-44%;}
  .card{padding:0 0 .2rem;}
  .card-title{font-size:.95em;line-height:1.3;}
  .card-text{font-size:.9em;}
  span.del{font-size:.75em;}
  span.price2{font-size:1.05em;}
}

/*** banner+FB ***/
#banner{padding:30px 0 10px;}
#fb{padding:30px 0 70px;}
.feb{transition:all .2s}
.feb-m{display:none;}
.feb:hover, .feb-m:hover{transform:scale(1.02)}
@media only screen and (max-width:1199px){
  #banner > .mainbox, #fb > .mainbox{width:92%;}
}
@media only screen and (max-width:991px){
  .feb{display:none;}
  .feb-m{display:block;}
}

@media only screen and (max-width:575px){
  #banner{padding:20px 0 10px;}
  #fb{padding:20px 0 40px;}
}

/*** 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}


/*其他動態*/
.animated{animation-fill-mode:both}
.animated-n{animation-fill-mode:none}
.animated.infinite {animation-iteration-count:infinite}
.fadeIn2{opacity:0;animation-name:fadeIn2;animation-timing-function:ease}
@keyframes fadeIn2{
  from {opacity:0;}
  to {opacity:1;}
}
.blockUp{animation-name:blockUp}
@keyframes blockUp {
    0% {opacity:0;transform:translate3d(0, 5%, 0)}
    to {opacity:1;transform:translateZ(0)}
}
.slideInR{animation-name:slideInR}
@keyframes slideInR {
    0% {opacity:0;transform:translate3d(50%, 0, 0);}
    25%{opacity:1;}
    to {opacity:1;transform:translateZ(0)}
}
.zoomIn2{animation-name:zoomIn2}
@keyframes zoomIn2 {
    0% {opacity:0;transform:scale3d(.8, .8, .8)}
    50% {opacity:1}
}