@import url('https://fonts.googleapis.com/css2?family=Chiron+Sung+HK:ital,wght@0,200..900;1,200..900&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/bg_line.gif) #fffcf0;}
#BodyContainer{margin:0 auto}
#BodyContentEvent{width:100%}
#event{background:#f5f5f5}
h1{font-size: clamp(1.6rem, 5vw, 3.5rem);}
h3{font-size: clamp(1.2rem, 5vw, 2.3rem);}
.flex{display: flex;flex-wrap: wrap;}
.bgcolor1{background: linear-gradient(to bottom, white 60%, #ffdebc 100%);}
:root{
    --blue1:#78348b;
    --blue2:#964ea5;
    --orange1:#d26726;
    --orange2:#e49426;
}
a{transition: transform .15s ease, color .15s ease;display: inline-block;}
a:hover{transform: translateY(2px);}

/* MAIN */
.banner{
    font-family: "Chiron Sung HK", serif;text-align: center;position: relative;background: linear-gradient(to bottom, var(--orange2) 30%, var(--orange1) 70%);border-top: 12px solid var(--orange2);border-bottom: 12px solid var(--blue2);
    gap: 1.3rem;justify-content: center;align-items: center;flex-direction: column;padding: 3rem 0;color: white;z-index: 0;
}
.banner::before{position: absolute;content: '';width: 534px;height: 160px;background: url("../images/1501071_bg.png") no-repeat center bottom/contain ;bottom: 0;right: 0;z-index: -1;}
.banner::after{position: absolute;content: '';width: 100%;height: .2rem;bottom: -1.3rem;right: 0;background: var(--blue2); z-index: -1;}
.banner :is(h1, h2,h3) {font-weight: 900;}
.banner h1 {text-shadow: 2px 2px 4px rgba(0,0,0,0.3);line-height: 1.5;}
.banner h1 span{font-size: 0.8em;}
.title_container{align-items: flex-end;text-align: left;}
.banner h3 {color: var(--blue1);background: white;display: inline-block;padding: .1rem 1rem;border-radius:.5rem;}
.info{
    font-size: clamp(1.15rem, 5vw, 1.9rem);background: linear-gradient(68deg, var(--blue1) 0%,var(--blue2) 30%,var(--blue2) 75%,var(--blue1) 100%);flex-direction: column; margin: 0 auto;
    justify-content: center;align-items: center;padding: 0.3rem 2rem;color: white;border-radius: 0.5rem;transform: translateY(-3rem);font-family: serif;width: fit-content;
}
.info small{font-size: 80%;}
figure{margin: 1%;}
.tag{
    width: 150px;height: 150px;border-radius: 50%;padding: 1.3rem 0 0;color: #fffcd3;background: linear-gradient(320deg, var(--blue1) 15%, var(--blue2) 40%);margin-left: -4.7rem;
    text-align: center;font-size: 1.2rem;justify-content: center;align-items: center;flex-direction: column;filter: drop-shadow(0 0 3px white);font-family: serif;
}
.tag span{color:#fed949;font-size: clamp(1.2rem, 4vw, 1.5rem);font-weight: bold;padding-bottom: 0.3rem;margin-bottom: 0.3rem;display: inline-block;border-bottom: thin dotted #fffcd3;}
.cover{padding: .6rem 3.5rem;transform: translateY(-1rem);}
.group{padding: 0rem 3.5rem;}
.bookgroup{justify-content: space-around;width: 50%;}
.bookgroup_indent{margin-left: -4.3rem;}
.bookgroup figure figcaption{
    font-weight: bold;background: white;color: var(--blue1);padding: 0.3rem;text-align: center;font-size: 0.8rem;
    display: inline-block;box-shadow: 0 0 5px rgba(0,0,0,0.3);border-radius: .5rem;margin-top: -1.1rem;letter-spacing: 0.06rem;
}
.group{
    display: grid;grid-template-columns: 1fr 1fr;grid-template-areas: "author  booklist" "law     booklist";
    gap: 2.5rem 1.2rem;align-items: stretch;margin-top: 1.2rem;
}
.author,.lawsource{border-radius: 10px;padding: .5rem 1.5rem;width: 100%;}
.author{  grid-area: author;background: linear-gradient(180deg, #ffffff 0%, #ffe0a4 100%);}
.lawsource{grid-area: law;background: linear-gradient(180deg, #ffffff 0%, #bad5fa 100%);padding: .5rem 2.5rem;margin: auto;}
.booklist{grid-area: booklist;}
.author dl,.lawsource dl{margin: 0;}
.author dt,.lawsource dt{font-weight: 900;font-family: "Chiron Sung HK", serif;font-size: clamp(1.2rem, 5vw, 1.5rem);line-height: 1.2;letter-spacing: .06em;}
.author dl{margin: 0;display: grid;grid-template-columns: 86px 1fr;align-items: start;}
.author dt{grid-column: 2;margin: 0 0 6px;font-weight: 900;letter-spacing: .08em;color: var(--orange1);line-height: 1.15;position: relative;}
.author dt::before{
    content: "作者\A簡歷";white-space: pre;position: absolute;left: -5.5rem;top:2.2rem;width: 72px;padding: 10px 8px;border-radius: 8px;
    background: var(--orange2);color: #fff;font-weight: 900;font-size: 14px;line-height: 1.1;text-align: center;
}
.author dd{grid-column: 2;margin: 0;font-weight: 700;color: #222;line-height: 1.6;}
.author dd{padding-left: 1em;text-indent: -1em;}
.lawsource dt{background: linear-gradient(to bottom,#2ea7e0 10%,#005284 90%);-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;margin-bottom: 0.3rem;}
.author dd,.lawsource dd{font-weight: 700;color: #222;font-size: 1.1rem;}
.lawsource dt a{-webkit-text-fill-color: initial;color: #005284;text-decoration: underline;font-weight: 900;margin-left: .25em;display: inline-block;margin-left: 0.2rem;transition: transform .15s ease, color .15s ease;}
.lawsource dt a:hover{transform: translateY(2px);color: #005284;}
.lawsource dt a::before{content: '☛';}
.lawsource mark{background: transparent;padding: 0 .15em;font-weight: 600;font-size: clamp(1.2rem, 5vw, 1.5rem);font-family: arial, serif;}
.lawsource dd:nth-of-type(1) mark{ color: #983890; }
.lawsource dd:nth-of-type(2) mark{ color: #eb5f59; }
.law-inner{max-width: 420px;width: 100%;text-align: left;margin:auto;display: flex;flex-wrap: wrap;justify-content: center;}
.booklist .books{width: 100%;border-collapse: collapse;background: #fff;overflow: hidden;box-shadow: 0 2px 10px rgba(0,0,0,.06);}
.booklist .books th,.booklist .books td{padding: 10px 12px;text-align: left;border: 1px solid rgba(51,96,150,.5);}
.booklist .books th{background: rgba(51,96,150,.08);color: var(--blue1);font-weight: 900;text-align: center;}
.booklist .books td:last-child,.booklist .books th:last-child{width: 90px;text-align: center;}
.booklist .books a{color: #26376d;text-decoration: underline;}

/*書單*/
.booklist{margin: 5%}
.books td:nth-child(4){color: red}
.books p{text-align: left}
.learning-points {font-weight: 600;font-size: clamp(1.1rem, 5vw, 1.3rem);margin: 2.5rem auto;line-height: 1.8;letter-spacing:0.035rem}
.learning-points li:nth-child(odd){color: var(--blue1);}
.learning-points li:nth-child(even){color: var(--orange1);}

@media (max-width: 767px){
    .title_container{flex-direction: column;align-items: center;}
    .cover{padding: 0rem 1.5rem;column-gap: 1rem}
    .bookgroup{width: 46%;}
    .bookgroup_indent{margin-left: inherit;}
    .tag{margin-left: 0; margin-top: 1rem;}
    .author, .lawsource{padding: 1rem;}
    .author dl{grid-template-columns: 1fr;}
    .author dt{grid-column: 1;display: flex;align-items: center;justify-content: center;gap: 10px;margin: 0 0 6px;}
    .author dt::before{position: static;left: auto;top: auto;width: auto;padding: 8px 10px;border-radius: 8px;font-size: 13px;line-height: 1.1;flex: 0 0 auto;}
    .author dd{grid-column: 1;}
    .booklist{margin: 0;}
    .learning-points{padding: 1rem 2rem;text-align: justify;}
}
@media (max-width: 580px){
    .group{
        grid-template-columns: 1fr;
        grid-template-areas: "author" "law" "booklist";
        padding: 0 2rem;
    }
    .author dt::before{
        padding: 7px 9px;
        font-size: 12.5px;
    }
}

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