@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+HK:wght@200..900&family=Noto+Serif+TC:wght@800&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;font-weight: ;background: url("../images/0607059_line-bg.gif"), linear-gradient(to bottom,#EBEEF6 30%, white 100%);color: #2a2a2a;}
#BodyContainer{margin:0 auto}
#BodyContentEvent{width:100%}
#event{background:#ffffff}
#event a:hover{text-decoration:none;left:1px;top:1px;position:relative}
a { color: #2a2a2a;}
.w-full{width: 100%;}
h1{font-size: 2rem;}
h2{font-size: 2.6rem;padding: 0.85rem 1rem;display: flex;justify-content: center;font-family: "Noto Serif TC", serif;color: var(--blue1);font-weight: 500;}
#event_third h2{color: white;justify-content: center;align-items: center;padding: 0;}
.container{background: #f9ddcd;border-radius: 6px;justify-content: center;align-items: center;margin: auto;padding-bottom: 1rem;box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;}
#event_master {z-index: 5;}
[id^="event_"]:not(#event_master) {z-index: 1;}
#event_master h1 { align-items: center;justify-content: center; }
#event_master img { max-width: 100%; }
.flex{display: flex;flex-wrap: wrap;}
.bg1{background: url("../images/1312040_3_6.png") top center / 100% auto no-repeat;}
.bg2{background: url("../images/1312040_3_8.png") top center / cover no-repeat;margin-top: -4.8rem;}
.bg2 a{color: white;}
.bg3{background: url("../images/1312040_3_9.png") top center / cover repeat;padding: 2rem 3rem 1rem;}
.bg4{background: url("../images/1312040_3_11.png") top center / cover repeat;}

:root{
    --blue1: #008fd2;
}

/*書單*/
.booklist{margin: auto;display: flex;flex-wrap: wrap;width: calc(100% - 10%);row-gap: .5rem;}
figure{width: calc(100%/4 - 12px);text-align: center;margin:0 auto;z-index: 3;}
figure img{max-width:100%;height: auto;filter: drop-shadow(0px 0px 3px #0000006f);}
figure a{width: 100%;color: #000;display: flex;justify-content: center;align-items: center;text-align: center;	}
figcaption{margin: 3% 0 6%;font-size: 1rem;}
.figcaption_l a{text-align: left;}
.books, .books th, .books td {border: 2px solid #f9ddcd;border-collapse: collapse;padding: 0.3rem .8rem;}
.books th{
    background: var(--blue1);color: white;    
}
.books tr td:nth-child(odd) { text-align: center; }
.books td { background: #f6f6f6; }
.booklist_title {
    text-align: left;font-size: 1.4rem;font-weight: bold;
    display: flex;flex-wrap: wrap;align-items: center;
    border: solid 1px white;margin-bottom: 0.5rem;
}
caption{font-size: 1.6rem;text-align: center;justify-content: center;margin: 0 auto;line-height: 1.8;color: #e73133;}
caption br{display: none;}


/*優惠*/
.sale_box{padding: 0 4.5rem 2rem;font-size: 1.2rem;line-height: 1.9;color: white;}
.sale_box a{background: yellow;color: #e73133;border-radius: 20px;padding: 0 .5rem;text-decoration: none;font-size: 0.9em;display: inline-block;text-align: center;}
.sale_box b { color:#3f4097;font-weight: bold; }
.sale_box span{font-weight: 700;font-size: 1.3rem;color:yellow;margin: 0 .2rem;}
.sale_box small{font-size: .8rem;}
.sale_box dd:before{content: "．"}
    
@media (max-width:767px) {
    .container {padding: 2rem 0;}
    .bg2{ margin-top: initial;}
    .bg3{padding: 2rem 1rem;}
    .container,#event_master h1{flex-direction: column;}
    h2 { width: auto; font-size: 1.9rem;padding: .1rem 2rem;text-align: center;margin: 0 auto 1rem;border-radius: 20px;}
    .booklist { width: 94%; }
    caption br{display: block;}
    figure { width: calc(100%/2 - 12px); }
    @media screen and (max-width: 660px){#event_third h2 span{width: 100%;}}
    @media screen and (max-width: 370px){.bg3 figure{width: 100%;}h2{font-size: 1.5rem;}}
    .sale_box{padding: 0 2rem 2rem;}
    .sale_box dd:nth-child(2){text-indent: initial;margin-left: initial;}
}


/*各大相容檢視*/
@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 {
}