/* 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("https://fd.get.com.tw/edm/20250331/12053001_line-bg.gif");}
#BodyContainer{margin:0 auto}
#BodyContentEvent{width:100%}
#event{background: #FCFCFB;}
#event a:hover{text-decoration:none;left:1px;top:1px;position:relative}
.bg1{background: url("https://fd.get.com.tw/edm/20250331/1403003_03.png") no-repeat right bottom / 100% auto;}
.banner{display: flex;justify-content: center;align-items: center;flex-wrap: wrap;}

:root{
  --red1: #D4181B;
  --blue1: #043E81;
}

/*單字*/
.word_group,.word_root{margin: 2.5rem auto;}
.word_group ol{display: flex;flex-wrap: wrap;justify-content: center;column-gap: 1rem;row-gap: .35rem}
.word_group li{
  width: calc(100%/2.2 - 1rem);text-align: center;padding: 1%;margin: 1px;background: linear-gradient(to right, #65BE9E, #228461);
  border-radius: 30px;color: white;display: inline-block;font-size: clamp(.9rem, 5vw, 1.5rem);
}
.word_group li:nth-of-type(even){background: linear-gradient(to right, #ED8578, #C5466E);}
.word_root ol{display: flex;flex-wrap: wrap;}
.word_root li{width: calc(100%/2);text-align: center;}
details > summary {color: white;font-size: clamp(1.3rem, 5vw, 1.8rem);padding: .6rem 0;list-style-type: none;background: var(--red1);text-align: center;cursor :pointer;margin-bottom: .3rem;transition: .3s ease; }
details[open] > summary {background: var(--blue1);letter-spacing:0.2rem;}
details {  
    interpolate-size: allow-keywords;
      &::details-content {
      block-size: 0;
      overflow: hidden;
      transition: content-visibility 500ms allow-discrete, opacity 500ms, block-size 500ms;
    }
    &[open]::details-content {
      block-size: auto;
    }
  }
.word_root ol{display: flex;flex-wrap: wrap;margin: auto;justify-content: center;width: 88%;}
.word_root li{width: calc(100%/2);text-align: center;margin: .35rem auto;}
/*書單*/
h3{font-size: clamp(1.3rem, 5vw, 2.3rem);margin: 2% auto;color: var(--blue1);display: flex;justify-content: center;align-items: center;flex-wrap: wrap;flex-direction: column;line-height: 1.9;}
#event_third h3 span{display: inline-block;font-size: clamp(1.3rem, 5vw, 1.8rem);color: white;background: var(--red1);padding: 0 1rem;border-radius: 20px;}
.booklist{margin: 1rem;display: flex;flex-wrap: wrap;background-color: blanchedalmond;border-radius:10px;padding: 1rem 0;align-items: flex-start;}
.booklist figure{text-align: center;width: calc(100%/3 - 4px);padding: 1%;display: flex;flex-wrap: wrap;justify-content: center;align-items: center;}
.booklist figcaption{font-size: clamp(.9rem, 5vw, 1.2rem);margin: 1rem 0;line-height: 1.5;color: var(--blue1);}
.booklist figcaption span{font-size: clamp(.9rem, 5vw, 1rem);display: block;color: var(--red1);}
small{font-size: .8rem;}
nav a {display: inline-block;padding: .6rem 2rem;background: var(--red1);color: white;border-radius: 10px;margin: 0 auto 1rem;text-align: center;font-size: 1.2rem;}

@media (min-width: 992px) and (max-width: 1200px){
  .word_root ol{width: clamp(65%, 5vw, 80%);}
}

@media (min-width: 768px) and (max-width: 991px){
  .word_root ol{width: 80%;}
}

@media (max-width: 767px){
  .booklist figure{width: calc(100%/2);flex-direction: column;}
  @media screen and (max-width: 500px){.booklist figure{width: calc(100%);}}
}

/*各大相容檢視*/
@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 {
}