/* 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;}
#BodyContainer{margin:0 auto}
#BodyContentEvent,#event{width:100%}
#event a:hover{text-decoration:none;left:1px;top:1px;position:relative}
.bgcolor1{background-color: white;}
.bgcolor2{
    background: url("../images/1304028_bg.png") center top / cover no-repeat, linear-gradient(to bottom, var(--font_ocher) 5%, var(--font_green) 80%);
    margin-top: -25.5rem;
}
.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_green: #00585D;
    --font_red: #B61D22;
    --font_black: #231815;
    --font_ocher: #BB9C45;
    --text_t1: 4.8rem;
    --text_t2: 3.8rem;
    --text_t3: 1.55rem;    
}

article img{ max-width: 100%; height: auto; }

h1 {
    font-family: var(--ff1);
    font-weight: 900;
    font-style: normal;
    color: var(--font_green);
    font-size: var(--text_t1);
    justify-content: space-around;
    align-items: flex-start;
    margin: 0 auto;
    line-height: 1.4;
    letter-spacing: 0.08rem;
    padding: 1rem 5rem 2rem;
}
h1 img { margin-top: 2.2rem; }
.h1 {
    width: 67%;font-size: var(--text_t1);
    justify-content: center;align-items: center;
}
.h1 span {
    font-size: var(--text_t2);
    font-family: var(--ff1);
    font-weight: 600;
    color: var(--font_black);
    padding-top: 0.2rem;
    margin-top: 0.2rem;
    border-top: 2px dashed var(--font_ocher);
    width: 80%;
    text-align: right;
}
.master_title {
    font-size: var(--text_t3);
    font-family: var(--ff1);
    font-weight: 600;
    align-items: flex-start;
    justify-content: space-around;
    width: 100%;
    position: relative;z-index: 0;
    margin-top: -6rem;
    padding: 3rem;
}
.master_title::before {
    position: absolute;content: '';
    width: 100%;height: 7rem;
    background: linear-gradient(to right, #503500 0%, #A07B26 30%, #E8D680 45%, #E8D680 75%, #A07B26 96%, #503500 100%);
    left: 0;right: 0;margin: auto;top: 5rem;z-index: -1;
}
.master_title_content span { color: var(--font_red);display: block; }
.master_title_content { width: 60%;margin-top: 3rem; }
#event_master .money {
    margin: 2% 0 7% 0;
    text-align: center;
    font-weight: bolder;
}
figcaption { font-size: 1.3rem;color: white;text-align: center;font-family: serif; }
figcaption span { font-size: 1.7rem;color: white; }
figure { margin: 0;text-align: center;}
.author{
    background: #F4EBA3;
    border-radius:30px;
    display: inline-block;
    margin-top: 21rem;
    font-size: 1.1rem;padding: 1rem 2rem;    
}
.author dt{font-size: 1.3rem;font-family: var(--ff1);}
.author dt span{font-size: 1.5rem;}
.author dl { margin: 0; }
.feature_box {
    justify-content: space-between;row-gap: 2rem;
    align-items: flex-end;
    width: 84%;margin: auto;padding: 2rem 0;
}
.feature_box figcaption{font-size: 1.5rem;text-align: center;}
.buy {background:linear-gradient(to right,#a8832b 0%,#d79c11 50%,#a8832b 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: -3%;
    top: -20%;
    padding: 10px 0 0;
    color: white;
    background: var(--font_green);
    line-height: 26px;
    text-align: center;
    font-size: 1.15rem;
    animation: move 1s ease-in forwards infinite;
}
@keyframes move {
    0% { top: -20%; }
    50% { top: -19.3%; }
    100% { top: -20%; }
}
.allow span {
    display: block;
    font-size: larger;
    font-weight: bold;
    color: #fffec8;
}

/*命中 hit*/
.master_box { position: relative; }
.master_list {
    width: calc(100% / 2 - 0px);
    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;
    margin: 0 0 2.5%;padding: 0;
}
.master_list .h1 span { text-align: center; }
.master_list .h1 > div { justify-content: center; }
.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: 3.2rem;}
.master_list h3 { font-size: 2.6rem;font-family: var(--ff1); }
.master_list h3 span{ color: var(--font_red); }
.quiz_flex{border-bottom: 1px dotted #666666;justify-content: center;background: rgb(255, 255, 255);}
.quiz_flex .quiz:first-child{width:100%;text-align: left;}
.quiz_group{margin:2% 3%;}
.quiz_group h3{ font-size: 2rem;color: white;line-height: 2; }
.quiz p:first-of-type{font-weight: bolder;color: #23448b;}
.quiz_flex:last-child{border-bottom: none;}
.quiz{width: calc(100%/1.25);padding: 2% 15px;}
.quiz p{margin: 7px 0;line-height: 24px;text-align: justify;}
.quiz h5{background: linear-gradient(45deg, #413d99, #ff5a62);color: #ffffff;text-align: center;font-size: 1.3rem;font-weight: 400;margin: 0 0 5px;border-radius: 25px;padding: 2px 0;    font-size: 1.6rem;}
.quiz p:nth-child(1){font-weight: bold}
.quiz p:last-child{color: #ff283d}


/*Tab*/
.tabbox {
margin: 0 auto;
padding: 2% 3% 1%;
text-align: center;}
.Vuecontainer {}
.Vuetabs {width: 90%;margin: 0 auto -2px; }
.Vuetabs ul {/*     list-style-type: none; margin-left:; */}
.Vuetabs a{cursor: pointer;padding: .75rem 2rem;transition: background-color 0.2s;border: 1px solid #ccc;border-right: none;background-color: #f1f1f192;width: calc(100%/2);font-size: 1.6rem;}
.Vuetabs a:nth-child(1) {border-radius: 30px 0 0 30px;}
.Vuetabs a:last-child {border-right: 1px solid #ccc;border-radius: 0px 30px 30px 0;}
.Vuetabs a:hover {background-color: #aaa; color: #fff;}
.Vuetabs a.active {background-color: #fff;color: var(--font_red); border-bottom: 5px solid var(--font_green);cursor: default;}
.tabVuecontent { padding: 1rem;/* border: 1px solid #ccc; box-shadow: 3px 3px 6px #e1e1e1;*/}
.fade-enter-active, .fade-leave-active {transition: opacity .5s;}
.fade-enter, .fade-leave-to{opacity: 0;transition: opacity 0s;}



@media (min-width: 768px) and (max-width: 1199px) {
    :root { --text_t3: 1.7rem; } 
    h1 { padding: 1rem 3rem 3rem; }    
    .book_geoup { width: 34%; }
    .feature_box { width: 88%;align-items: flex-end; }
    .feature_box figure { width: 50%; }
    .author { font-size: 1.2rem; }
    .author dt span { font-size: 1.8rem; }
    .quiz { width: fit-content; }
}

@media (min-width: 800px) and (max-width: 1050px) { 
    :root {
        --text_t1: 4rem;--text_t2: 3rem;--text_t3: 2rem;
    } 
    h1 { align-items: center; }  
    .h1 { width: 48%; }
    .master_title { margin-top: -7rem; }
    .master_title::before { top: 7rem; }
    .master_title_content { margin-top: 5rem; }
}

@media (max-width: 799px) {
    :root {
        --text_t1: 3.5rem;--text_t2: 2.6rem;--text_t3: 1.5rem;
    }  
    h1 { flex-direction: column;padding: 1rem;align-items: center;margin: auto;gap: 1rem; }
    h1 img { margin-top: 0; }
    .master_list .h1, .master_title_content { width: 100%; }
    .h1  { width: initial; }
    .h1 span { text-align: center; }
    .cover { width: 80%;margin: auto; }
    .master_box { flex-direction: column-reverse; }
    .master_title, .bgcolor2, .master_title_content, .author { margin-top: 0; }
    .master_title_content {
        background: linear-gradient(to right, #A07B26 0%, #E8D680 20%, #E8D680 80%, #A07B26 100%);
        padding: 1rem;text-align: center;
    }
    @media screen and (max-width: 360px) { :root { --text_t3: 1.1rem; }  }
    .master_title { background: white;padding: 1rem 0 0; }
    .master_title::before { display: none; }
    .master_list { width: calc(100% / 1 - 0px);padding: 20px 20px 0 20px;flex-direction: column; }
    .master_list .booksize { margin: auto; }
    .master_list.r {
        margin-left: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }
    .master_list.r.a { padding: 20px 0 0; }
    figcaption, figcaption span { color: var(--font_black); }
    .quiz { width: fit-content; }
    .quiz_group h3{ font-size: 1.7rem;}
    .author { font-size: 1.2rem;padding: 1rem; }
    .author dt { font-size: 1.4rem; }
    .author dt span { font-size: 1.7rem; }
    .feature_box { justify-content: center; }
    .buy ul li { width: 90%;margin: auto;display: flex;flex-wrap: wrap;justify-content: center; }
    #event_note p{margin-left: initial;text-align: center;}
}


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