@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/line_bg.gif") #fffef5;color: var(--font-var(--font_black));}
#BodyContainer{margin:0 auto}
#BodyContentEvent,#event{width:100%}
#event a:hover{text-decoration:none;left:1px;top:1px;position:relative}
.hit_bgcolor1{background: #fff url(../images/1306089_main_bg.png) no-repeat center top / 100%;}
.bgcolor1{background: url("../images/1510029_main_line.png") center bottom / cover no-repeat #007479;}
.bgcolor2{background: #eee6d4;display: flex;flex-wrap: wrap;}
.bgcolor3{background-color: #EBEBEB;}
.bgcolor4{background-color: #F6F6F6;}
.bgcolor5{background-color: #EBEBEB;}
[class*="flex"]{display:flex;flex-wrap:wrap}
:root {
  --ff1: "Noto Serif TC", serif;
  --font_black: #231815;
  --font_light_green: #008183;
  --font_green: #00585D;
  --font_red: #B61D22;
  --font_var(--font_black): #231815;
  --font_light_ocher: #d4c088;
  --font_ocher: #86632C;
  --font_ocher_line: #bb9c45;
  --font_orange: #EA5E00;
  --text_t1: clamp(2.2rem, 6vw, 4rem);
  --text_t2: clamp(2rem, 6vw, 3.8rem);
  --text_t3: clamp(1.7rem, 6vw, 3rem);    
  --text_t4: clamp(1.3rem, 6vw, 1.8rem);    
}

/* main */
.master_container { justify-content: space-between;align-items: center;position: relative; }
.master_logo{width:fit-content;background:#bb9c45;position:relative;justify-content:center;padding:2rem 1rem 2rem 3rem;}
.master_logo::before{width:1.8rem;height: 100%;content: '';position: absolute;left: 0;top: 0;background: var(--font_black);border-radius: 0 0 1rem 0;}
.master_logo span { width: 100%;height: 3rem;background: linear-gradient(to right, var(--font_ocher) 0%, var(--font_light_ocher) 50%);align-self: flex-end; }
.master_title { width: 75%;color: white }
.master_title .h1 {
  width: 100%;font-size: clamp(2.2rem, 6vw, 4.3rem);text-shadow: 0 0 1px var(--font_black), 0 0 2px var(--font_black), 0 0 3px var(--font_black);
  font-family: "Noto Serif TC", serif;padding: 0.6rem;font-weight: 900;font-optical-sizing: auto;justify-content: center;align-items: center;
}
.master_title .h1 div:nth-child(1) span { display: inline-block;border-radius: 50%;font-size: 0.55em;background: var(--font_ocher);color: white;padding: 0 .55rem; }
.master_title .h1 div:nth-child(2) span { color: var(--font_light_ocher);font-size: clamp(2.2rem, 4vw, 4.5rem);padding: 0 1rem;display: inline-block;
  border-left: solid 2px var(--font_light_ocher);border-right: solid 2px var(--font_light_ocher); }
.master_info {
  text-align: center;background: var(--font_black);color: white;font-size: 1.6rem;font-family: serif;padding: .3rem 1.8rem;font-family: "Noto Serif TC", serif;
  display:flex;width: fit-content;margin: -.4rem auto -1rem;flex-wrap: wrap;justify-content: center;align-items: center;border-radius: 1rem;z-index: 1;position: relative;
}
.master_info span { color: #bb9c45; }
/* main end */

article img{ max-width: 100%; height: auto;margin: auto; }
.h1{font-size: 2rem;}
.info{font-size: 1.2rem;}
figcaption { font-size: 1.3rem;color: var(--font_green);text-align: center;font-family: serif; }
.feature_box{justify-content:center;position:relative;align-items:flex-start;margin:auto;padding:1rem 0 2.5rem;row-gap:5.8rem;column-gap: 1rem;}
.feature_box1{width:47%;justify-content:center;row-gap:2rem;align-items:center;margin:auto;padding:2rem}
.feature_box figcaption{
  display: inline-block;width: 100%;padding: 0 2rem; margin-block-start: -1.2rem;border-radius: 1rem 1rem 0 0;
  background: linear-gradient(to bottom, #dccc9e 0%, var(--font_ocher_line) 40%);color: var(--font_black);text-align: center;
}
.feature_box figure:nth-child(even) figcaption{ padding-left: 1.2rem; }
.feature_box figure:nth-child(4) figcaption{ text-align: left; }
.feature_box figure:nth-child(odd) figcaption{ padding-right: 1.2rem; }
.feature_box>figure{display:flex;flex-wrap:wrap;text-align:center;padding-block-start:.6rem;margin-top: 2rem;}
.feature_box > figure:nth-child(even) { align-items: flex-start; }
.feature_box > figure:nth-child(odd) { align-items: flex-start; }
.feature_box > figure:nth-child(4) { margin-top: -.3rem;}
:is(.feature_box, .feature_box1) figure img { margin: .4rem auto; }
.feature_box > figure { width: calc(100%/2.1 - 5px);padding-bottom: 0.4rem; background: white;border: solid 1px var(--font_ocher_line);border-radius: 1rem;box-shadow: 0 0 5px #00000070; }
.feature_box > figure > figcaption > span { font-size: 120%;background: var(--font_ocher);color: white;padding: .3rem .5rem;margin-right: 0.5rem; }
.book_box { position: absolute;transform: translate(23%, 60%);text-align: center;z-index: 5; }
.book_group { display: inline-flex; }
.cover { z-index: 1; }
.cover figure { display: flex;flex-wrap: wrap;align-items: flex-start;flex-direction: column; }
.cover figcaption { clip-path: initial; }
.author {
  color: var(--font_black);z-index: 0;align-self: center;padding: .2rem 2rem .2rem 6rem;margin-block-start: 1rem;text-align: left;
  margin-left: -6rem;background: white;border-radius: 0 0 1rem 0;border: solid 1px var(--font_ocher_line);position: relative;font-size: clamp(1rem, 2vw, 1.1rem);
}
.author dt { font-size: 1.3rem;background: var(--font_green);color: white;margin: -1rem 0 .5rem 0;padding: .2rem 1rem;display: inline-block;border-radius: 1rem 1rem 0 0; }
.author dt span { font-size: 1.5rem;margin: 0 .2rem;letter-spacing: 0.3rem; }
.author dd::before { content: '· '; }
.cover figcaption{background:none;color:var(--font_black);padding:.2rem 1rem;transform:translate(200px,-40px)}
.buy {background: linear-gradient(to right, #00585D 15%, #00585D 25%, #008183 50%, #00585D 75%, #00585D 100%);padding: 15px 0;}
.buy ul li{display: inline;font-size: 1.5rem;color:#fff;}
.buy ul li a{color: #fff59c;}
#event_buy{text-align: center;}
.buy a{padding: 0 2%;}

#event_note{text-align:left;float:left;width:100%;padding-top: 3%;padding-bottom: 4%;background:linear-gradient(to right,#a8832b 0%,#d79c11 50%,#a8832b 100%);border-radius: 0 0 10px 10px;}
#event_note p{font-size:13px;line-height:20px;color:#000;margin-left:30%;color: #FFFFFF;}
.allow{position:absolute;text-decoration:none;width:108px;height:108px;border-radius:50%;right:-9%;top:6%;padding:10px 0 0;color:white;
  background:var(--font_orange);line-height:26px;text-align:center;font-size:1.15rem;animation:move 1s ease-in forwards infinite}
@keyframes move{0%{top:6%}50%{top:7%}100%{top:6%}}
.allow span{display:block;font-size:larger;font-weight:bold;color:#fffec8}

/*命中 hit*/
.master_box { position: relative;align-items: center; }
.master_list {
    width: calc(100% / 2 - 0px);color: var(--font_ocher);
    padding: 15px 0 0 0;
    border-radius: 0 0 10px 10px;
    margin: 0;text-align: center;
    position: relative;justify-content: center;
}
.master_list.r{margin-left:-6.5%;text-align:center;position:relative}
.master_list.r.a h1 { width: 100%; }
.master_list .h1 {
    font-size: var(--text_t1);width: 100%;
    text-align: center;font-family: "Noto Serif TC", serif;
    margin: 0 0 2.5%;padding: 0;font-weight: 900;
    flex-direction: column;
}
.master_list .h1 span { text-align: center; }
.master_list .h1 div:nth-child(2) span{display: block;}
.master_list .h1 > div { justify-content: center; flex-direction: column;}
.master_list:nth-child(1) { order: 1; }
.master_list:nth-child(2) { order: 2; }
.master_list .booksize { margin: 5% 22% 0; }
.master_list figure { margin: 5% 16% 0;filter: drop-shadow(2px 4px 5px #4f4f4f70); }
.master_list h2 {font-size: clamp(2.2rem, 4vw, 3.2rem);}
.master_list h3 { font-size: clamp(1.6rem, 4vw, 2.6rem);font-family: var(--ff1);font-weight: bold; }
.master_list h3 span{ color: var(--font_red); }
:is(.quiz_flex, .quiz_flex_container) { justify-content: center;background: rgb(255, 255, 255); }
.quiz_flex { border: inset 4px var(--font_ocher);margin-block-end: 2rem; }
/*.quiz_flex .quiz:first-child{width:100%;text-align: left;}*/
.quiz_group{ margin: 0 1rem 1rem; }
.quiz_group h4{ font-size: 2rem;color: var(--font_red);line-height: 2; }
.quiz_subtitle{font-weight: bolder;color: #23448b;}
/*.quiz p:first-of-type{font-weight: bolder;color: #23448b;}*/
.quiz,.quiz_analyze, .quiz_pic{width: 100%;padding: 2% 15px;}
.quiz p{margin: 7px 0;line-height: 24px;text-align: justify;}
.quiz_pic>figure>figcaption{color: var(--font_red);font-size: 1rem;font-family: 'Noto Sans TC', sans-serif;text-align: left;}
/*.quiz p:nth-child(1){font-weight: bold;color: #ff283d}}
.quiz p:last-child{color: #ff283d}*/
.quiz_analyze{text-align: left;}
.quiz_analyze dt{font-weight: bold;color: var(--font_red);}
.quiz_analyze dd{margin-left: 1.7rem;text-indent: -1.7rem;}

/*Tab*/
*:before,*:after{margin:0;padding:0;box-sizing:border-box}
.tabbox{margin:0 auto;padding:2% 3% 1%;text-align:center}
/*.content > div {
	display: none;
    padding:3% 2% 1%;
	background-color: #fbf8ff;
    border-radius: 0 0 8px 8px;
}*/
.tabbox input {display: none;}
.tab_title{font-size:1.7rem;display:inline-block;text-align:center;width:calc(100%/3 - 5px);border-bottom:1px #e9716e solid;padding:2px 0;color:#ff9800;}
.tab_title:hover {cursor: pointer;position: relative;background-color: #e9e9e9;border-radius: 20px 20px 0 0;}
input:checked + .tab_title.a,input:checked + .tab_title.b{border:3px #e9716e solid;border-bottom:3px #fff solid;border-radius:20px 20px 0 0;color:#f55865}
#tab1:checked ~ .content #content1,
#tab2:checked ~ .content #content2,
#tab3:checked ~ .content #content3{ display: block;text-align: left; }
@media (width >= 768px) and ( width < 1200px) {
  .book_box { position: initial;transform: revert;order:1; width: stretch; }
  .feature_box{row-gap: inherit;}
  .feature_box > figure:nth-child(2){order:2;}
  .feature_box > figure:nth-child(3){order:4;}
  .feature_box > figure:nth-child(4){order:3;margin-top: 2rem;}
  .feature_box > figure:nth-child(5){margin-top: 2rem;order:5;}
}
@media (width >= 960px) and ( width < 965px) {
  .author { margin-block-start: -1rem; }
  .cover figcaption { transform: translate(200px, -80px); }
}
@media ( width < 767px ) {
  .master_container { flex-direction: column; }
  .master_logo { width: initial;row-gap: 1.2rem }
  .master_title { width: initial; }
  .master_title .h1 { justify-content: center;text-align: center; }
  @media screen and ( width < 320px ) {
      .master_title .h1 { font-size: 2.4rem; }
      .master_title .h1 div:nth-child(2) span { font-size: 0.8em; }
      .master_info { font-size: 1.2rem; }
  }
  .master_title .h1 div:nth-child(2) span { display: block; }
  .master_info br { display: none; }
  .master_list.r{ margin-left: 0; }
  .master_logo span { height: 1rem; }
  .master_box{justify-content: center;}
  .feature_box{column-gap: inherit;row-gap: 2rem;padding: 2rem 1.5rem;}
  .feature_box > figure { width: initial;margin: auto; }
  .feature_box figure:nth-child(even) figcaption, .feature_box figure:nth-child(odd) figcaption { text-align: center;transform:none; }
  .author dt{margin: -2rem 0 .5rem 0;}  
  .book_box { position: initial;transform: revert; }
  .book_group { flex-direction: column;row-gap: 1rem; }
  .cover figure { align-items: center;gap: 1rem; }
  .author { margin: auto;padding: 1rem; width: stretch; }
  .buy ul li{display:block;}
  .buy{padding: 1rem;}
  #event_note p{margin: .5rem 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 {
}