@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@900&display=swap');

/* css reset 歸0 */
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,font,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,caption,tfoot,thead{margin:0;padding:0;border:0;outline:0;font-size:100%}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
:focus{outline:0}
ins{text-decoration:none}
del{text-decoration:line-through}
/* css reset 歸0 end */

body{margin:0 auto;padding:0;font-family: 'Noto Sans TC', sans-serif;background: url(../images/1502044_3_line_bg.gif) #eff0e5;}
#BodyContainer{margin:0 auto}
#BodyContentEvent{width:100%}
#event{background:#f5f5f5}
#event a:hover{text-decoration:none;left:1px;top:1px;position:relative}

h1{font-size: 3rem;}
.flex{display: flex;flex-wrap: wrap;margin: 0 auto;justify-content: center;}

article{background: white;}

.banner{margin: 0 auto;padding: 3.2rem 0 1.3rem;position: relative;z-index: 0;}
.banner::before{content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: url(../images/1505031_4.png) right top / cover no-repeat;width: 850px;height: 228px;z-index: -1;}
.banner img{ max-width: 100%;height: auto;}
.book_group{align-items: center;font-size: clamp(1.1rem, 3vw, 1.3rem);}
.cover figure{margin: 0 auto;text-align: center;}
.cover figure img{filter: drop-shadow(0 2px 8px rgba(0,0,0,.25));}
.cover figure figcaption{font-family: "Noto Serif TC", serif;font-size: clamp(1.2rem, 3vw, 1.55rem);background: white;padding: 0 .5rem .5rem;border-radius: 0 0 6rem 6rem;margin: 1rem auto -3rem;}
.infor ul{ padding: 0;}
.infor li{ margin-bottom: 1rem;padding: .35rem 1.2rem;font-weight: bold;}
.infor li:nth-child(odd){background: linear-gradient(to right,#ffdf4f85 0%,#ffdf4f70 85%,transparent 100%);}
.feature{margin: 0 0 1rem;}
.feature li{margin: auto;padding: .15rem 2rem;font-size: clamp(1.1rem, 3vw, 1.3rem);font-weight: bold;list-style-position: inside;}
.feature li span{display: inline-block;padding: .35rem 0;margin-left: -0.6rem;}
.chapter{font-size: clamp(1.1rem, 3vw, 1.3rem);line-height: 2.2;font-weight: bold;margin-left: 2rem;}
.chapter span{margin-right: 1rem;padding: .1rem .5rem;background: #11948b;color: white;border-radius: 1rem;}
.booklist{padding: 1rem 2.5rem 2.5rem;background: #adc93b;justify-content: flex-end;gap: 1rem;}
.booklist .title{color:#c9242b;font-family: "Noto Serif TC", serif;font-size: clamp(1.5rem, 3vw, 2.6rem);font-style: italic;margin-right: 4rem;}
.books{width: 100%;}
.books figure{width: calc(100%/4);margin: 0 auto}
.books figure img{max-width: 100%;height: auto;}
.books figure figcaption{font-size: 1rem;font-weight: bold;color: black;font-weight: normal;margin-top: 1rem;}
.books figure a{color: black;}

.brand{gap: 1rem;margin: 0 auto;padding: 2rem 0;background: #ffdf4f;}
.brand figure{align-items: center;margin: 0;background: #fff;border-radius: .35rem;overflow: hidden;}
.brand figure>a{display: flex;align-items: center;padding: .35rem .55rem;}
.brand figure:nth-child(1)>a{background: #f04922;}
.brand figure:nth-child(2)>a{background: #812225;}
.brand figure img{display: block;max-height: 58px;width: auto;margin: auto;max-width: 100%;height: auto;}
.brand figure figcaption{padding: 0 .85rem;font-weight: 700;line-height: 1.35;color: #111;background: #fff;white-space: nowrap;}
:is(.brand figure figcaption, .buy_group ul) a{color: #111;}
.buy_group{background: #f9e7c4;padding: 2rem 5rem;}
.buy_group ul{width: 90%;margin: 0 auto;}

@media (max-width: 768px) {
  .banner{overflow: hidden;}
  .buy_group{background: #f9e7c4;padding: 2rem;}
  .cover figure figcaption{margin: 1rem auto;}
  .feature li span{margin-left:inherit;}
  .booklist{justify-content: center;padding: 1rem;}
  .booklist .title{margin-right: inherit;margin:auto;}
  .books figure{width: calc(100%/2);margin: 0 auto 1.5rem;text-align: center;}
  .chapter{margin-left: inherit;}
  @media (max-width: 360px) {
    .books figure {width: calc(100%);}
    .brand figure{flex-direction: column;width: 60%;display: inline-block;text-align: center;}
    .brand figure figcaption{white-space: wrap;}
    .feature li{display:inline-block;padding: .15rem 1rem;}
  }
}

/*各大相容檢視*/
@media screen and (-webkit-min-device-pixel-ratio:0) { /*Webkit*/
}
@-moz-document url-prefix(){/*Firefox*/
}

@media \0screen\,screen\9 {/*IE 6 7 8*/
}

@media screen\0 {/*IE 8 9 10 11*/
}

@media print {
}