@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@900&display=swap');
#event_book,#event_notice,#event_news .NewsStyle a{font-weight: normal}#event_book,#event_notice,#event_news .NewsStyle a{font-weight: normal}#event_book,#event_notice,#event_news .NewsStyle a{font-weight: normal}#event_book,#event_notice,#event_news .NewsStyle a{font-weight: normal}/* 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:"微軟正黑體";background: #ebf1f1 url(../images/bg_line.gif);color: #231815;}
#BodyContainer{margin:0 auto}
#BodyContentEvent{width:100%}
#event{background:white;padding: 0 0 3%;}
#event a:hover{text-decoration:none;left:1px;top:1px;position:relative}
.br{display:block}
[class*="flex"]{display:flex;flex-wrap:wrap;display:-ms-flexbox;-ms-flex-wrap:wrap}

article{margin: 0 0 5%;}

.br{display:block}
[class*="flex"]{display:flex;flex-wrap:wrap;display:-ms-flexbox;-ms-flex-wrap:wrap}
:root{
  --light_blue: #3b91c0;
	--blue1:#2b6389;
	--blue2:#213157;
	--red1:#b40005;
  --purple1:#b75590;
  --yellow1:#FFF000;
  --green1: #96b830;
  --green2: #6cae34;
  --text-shadow:1.5px 0 2px black,-1.5px 0 2px black,0 1.5px 2px black,0 -1.5px 2px black;font-weight: bold;
  --font-family: "Noto Serif TC", "PMingLiU", serif;
}
.text_blue{color: var(--blue1);}
.text_blue2{color: var(--blue2);}
.text_green{color: var(--green1);}
.text_green2{color: var(--green2);}
h1{font-size: clamp(1.8rem, 5vw, 5rem);width: 100%;margin: 0 auto .8rem;color: var(--blue2);font-family: var(--font-family);}
h2{font-size:clamp(1.3rem,3vw,2.1rem);font-family: var(--font-family);display:inline-block;color:#3b91c0;padding:.1rem .7rem;margin:auto;line-height:1.4;position: relative;z-index: 1;}
h2::before{content: "";position: absolute;top: 0;left: 0;width: 3rem;height: 3rem;background: linear-gradient(to bottom, #f4f7ca, #dfe665);border-radius: 50%;transform: translate(-50%, -20%); z-index: -1;}
h3{font-size: 1.5rem;width: -webkit-fill-available;}
h3 span{display: inline-block;background-color: var(--blue1);color:white;padding: .2% .5%;margin-right: 1%;}
.banner{display: flex;flex-wrap: wrap;justify-content: center;text-align: center;padding: 2rem 0 0;line-height:1.5;}
#event_book>div{padding:0 2% 2%;width: 86%;margin:0 auto 3%;}
.book_area{justify-content: space-around;width: 84%;margin:0 auto 1%;gap: 2rem;position: relative;z-index: 2;}
.event_book_bg{position: relative;z-index: 1;}
.event_book_bg::before{content: "";position: absolute;top: -11rem;left: 0;width: 850px;height: 467px;background: url("../images/1508090_bg.png") center bottom / cover;z-index: -1;}
.book_area img{max-width: 100%;margin:0 auto 1%;}
.booktable caption{
  font-size:clamp(1.2rem, 3vw, 1.7rem);font-weight: bolder;line-height: 2;padding: .4rem 2rem;border-radius: 2rem;width: fit-content;
  background: linear-gradient(to bottom, var(--light_blue), var(--blue1));color: white;margin:0 auto 1rem;color: #fff9b4;
}
.book_area figure{width: 45%;margin-inline: auto;margin:0;}
.book_area ul{width: 45%;display: flex;flex-wrap: wrap; align-content: center;}
.book_area ul li{font-size: 1.4rem;margin-bottom: 0.8rem;padding-bottom: 0.8rem;list-style: none;position: relative;}
.book_area ul li::before{content: '★';position: absolute;left: -1.5rem;color: var(--blue2);text-align: left;}
.book_area ul li:nth-of-type(even)::before{color: var(--green2);}
.book_area ul li:not(:last-child){border-bottom: 1px solid #5783a1;}

.booktable,.booktable th,.booktable td{border-collapse:collapse;border:1px #717071 solid;}
.booktable{width:96%;margin:2% auto 0;font-size:1rem;line-height:1.8;text-align:center;background-color: white;}
/* .booktable tr:nth-last-of-type(1) td{text-align: right;padding-right:1rem;} */
.booktable a{color: #3b3b3b;}
.booktable tr:nth-of-type(even){background: #eee;}
.booktable th{font-weight:700;background: #b5d7b9;}
.booktable p{text-align:left;margin-left:2%}
.booktable td:nth-of-type(4){color: #ff0000;}
.bookname{text-align: left;padding-left: 1rem;}
#event_notice{background-color: #e6eaa4;}
.ps{text-align: right;font-size: 0.9rem;}

/*經驗談*/
.title{
	font-size: 2rem;text-align: center;background: var(--blue2);border-radius: 12px 12px 0 0;
	padding: .1rem 2rem;color: white;width: fit-content;margin: 2.5rem auto 0; 
}
.student{background: white;border-radius: 12px 12px 0 0;padding: 2rem;margin: 0 2rem 0;line-height: 1.6;}
.student>div{text-align: right;}
.student a{color: var(--red1);}
.student dl{margin: 2% auto 1rem;padding-bottom: 1rem;border-bottom: dashed 1px var(--light_blue);line-height: 1.5;}
.student dt{font-size: 1.2rem;color: var(--purple1);font-weight: 700;}
.student dt span{font-size: 1.35rem;color: var(--red1);margin-right: .3rem;}
.student dd{text-indent:2rem;margin: 0.3rem auto;text-align: justify;}
mark{background: var(--red1);color: white;margin-left: .3rem;font-size: .8em;padding: 0 .3rem;border-radius: 6px;}
.more{text-align: right}


@media (max-width:767px){
    h1{font-size: 2.85rem;}
    @media screen and (max-width:360px){h1{font-size:2.3rem}}
    h2{font-size: 1.5rem;padding: 0 5%;}
    h3{width:88%;font-size: 1.4rem;margin: auto;justify-content: center;}
    h4{font-size: 2rem;}
    .banner{padding: 3rem 0 0;}
    .book_area{justify-content: center;}
    .book_area figure,.book_area ul{width:96%;margin: auto;text-align: center;justify-content: center;font-size: 1.1rem;}
    .book_area ul li br,.book_area ul li:after{display: none;}
    .book_area ul li:before{width: 100%;}
    #event_book{border-radius: inherit;padding: 5% 0;}
    #event_book>div{padding:3% 2% 5%;margin: 0 1rem;width: auto;}
    .event_book_bg::before{width: 100%;height: 100%;top: -5rem;}
    .booktable{width: auto;}
    .bookname{padding-left: 0.3rem;}
    .student{margin:1.5rem 1rem 0;padding: 1rem;}
}