/* 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;}
#BodyContainer{margin:0 auto}
#BodyContentEvent{width:100%}
#event{background:#f5f5f5}
#event a:hover{text-decoration:none;left:1px;top:1px;position:relative}


:root{
    --purple1:#a53a63;
    --purple2:#B75FA1;
    --green1:#027d62;
    --blue1:#0083c9;
    --light_yellow:#fffbac;
    --point: #b7164a;
    --gold: #96692e;
    --item: #fff;
}
small{font-size: 90%}
.bg {background: linear-gradient(180deg, #fff 0%,#f8f3ec 54%, #f0e2d1 100%);}
.bg1 {background: #f0e2d1;}
.ad{margin: 0% auto;text-align: center;padding: 0% 0 0%;}

.title{padding: 0% 8%;margin-top: -1rem;}
.title_ol{/*border-bottom: solid 8px #d79e23;text-align: center;padding: 2% 8%;margin: 0 auto;width: fit-content;background: url(../images/1504022_deco.png) no-repeat center ,linear-gradient(180deg, #ffffff 75%, #fff5e5b8 100%);filter: drop-shadow(5px 7px 5px rgba(0, 0, 0, 0.4));border-radius: 1.5rem 0;*/}
.title h1{padding: 2% 0 0%;font-size: 3.4rem;color: #d79e23;}
.title h2{padding: 2% 0 0%;font-size: 2.4rem;}
.title h2 span:nth-child(1){ color: #0CA800}
.title h2 span:nth-child(2){ color: #FF0004}
.title h4{padding: 0% 0% 0%;font-size: 3.2rem;color: #ab8454;border-top: solid 0px;border-bottom: solid 0px;font-weight: 900;font-family: "Noto Serif TC", serif;}
.title h4 strong{color: #565353;font-weight: 900;font-family: "Noto Serif TC", serif;}

    /* ② 書名橫幅 */
    .sec-banner { text-align: center; padding: 10px; margin-bottom: 12px; font-size: 2.2rem;font-weight: 900;font-family: "Noto Serif TC", serif;COLOR: #565353;}
    .sec-banner b { text-align: center; padding: 0px; margin: 0px; font-size: 1.6rem;COLOR: #565353;}
    .book-tag { font-weight: bold;color: #ffffff;clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0% 100%, 5% 50%, 0% 0%);background: linear-gradient(to right, #005871 10%, #007393 50%);padding: 0.8rem 1rem 0.8rem 2rem;}
    .book-tag-club { font-weight: bold;color: #ffffff;clip-path: polygon(0% 0%, 0% 100%, 0% 100%, 100% 100%, 97% 50%, 100% 0%);background: linear-gradient(to right, #33957f 50%, #027d62 90%);padding: 0.8rem 2rem 0.8rem 1.0rem;}

    .sec-time { padding: 2.2rem 0;background: url(../images/1505019_ol.png) no-repeat center, linear-gradient(180deg, #f0e2d1 75%, #f0e2d1 100%);font-size: 1.6rem;background-size: contain;color: #565353;margin: 0 auto;padding-left: 20%;}
    .sec-time p { }

    .sec-event { display: flex; gap: 10px; margin-bottom: 0%;padding: 1% 5%;align-items: center; }
    .event-cover { width: 30%; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 12px 8px; gap: 8px; }
    .cover-box { width: 90%; height: auto; display: flex; align-items: center; justify-content: center; color: #666; }
    .event-right { flex: 1; display: flex; flex-direction: column; gap: 10px; }
    .sec-lecturer { padding: 2rem 4rem;background: linear-gradient(180deg, #ffffff 75%, #fff5e5b8 100%);border-radius: 2rem; }
    .sec-lecturer h3 { font-size: 1.3rem; margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid #ccc; }
    .sec-lecturer h3 strong { font-size: 1.8rem;color: #ab8454;font-weight: 900;font-family: "Noto Serif TC", serif; }
    .sec-lecturer ul { list-style: disc; padding-left: 18px; }
    .sec-lecturer ul li a { color: #ab8454;text-decoration: underline;font-weight: 900;}

    .sec-focus { margin-bottom: 2%; padding: 1% 5%;}
    .focus-title { text-align: center;  padding: 0 0; margin-bottom: 12px; }
    .focus-title b { font-size: 1.8rem;color: #c33843;font-weight: 900;font-family: "Noto Serif TC", serif;transform: skew(0.06turn, -5deg);display: inline-block;  }
    .focus-title span { margin: 0 0.5rem 0.5rem 0;background: radial-gradient(circle at 4% 95%, #ead3af 10%, #fff8e4 50%, #c8a979 90%);width: 3.6rem;height: 3.5rem;display: inline-flex;align-items: center;justify-content: center;border-radius: 50%;transform: skew(-0.06turn, 5deg);box-shadow: rgba(0, 0, 0, 0.24) 0px 1px 6px;}
    .focus-sub { border-top: 4px solid #c33843;padding: 0rem 3rem 1rem;margin: 0rem auto 0rem;background: linear-gradient(to bottom, #f3eee4 0%, #ffffff 100%); }
    .focus-sub:last-child { margin-bottom: 0; }
    .focus-label { display: inline-block;padding: 0.2rem 3rem;margin-bottom: 4px;font-weight: bold;color: white;font-size: 1.2rem;background: linear-gradient(to right, #c33843 65%, #ab1722 100%);border-radius: 0 0 1rem 1rem; }
    .focus-sub p { line-height: 1.6; color: #333; }

    .sec-promo { text-align: center; margin-bottom: 0%; padding: 5% }
    .promo-desc { margin-bottom: 6px; padding-bottom: 0px; font-size: 1.6rem;font-weight: 900;font-family: "Noto Serif TC", serif;color: #ab8454; }
    .promo-desc .fc1 { color: #007393; }
    .promo-desc .fc2 { color: #2c8d77; }
    .promo-desc img { float: left;margin-right: 1rem; }
    .promo-price { margin-bottom: 6px;font-size: 2.0rem;font-weight: 900; }
    .promo-price small { font-size: 1.0rem;font-weight: normal; }
.sec-promo strong{ color: #c33843; font-weight: 900 }
    .promo-note { padding-top: 0.5rem;border-top: 1px dashed #ab8454;margin-top: 1rem; }

    .sec-footer { background: radial-gradient(circle at 4% 95%, #ead3af 10%, #fff8e4 50%, #c8a979 90%); padding: 1.5rem 0; text-align: center; }
    .link-btn { display: inline-block; background: #dde8f0; padding: 2px 10px; margin: 0.2rem 4px; text-decoration: none; cursor: pointer; background-color: #c33843;color: white;border-radius: 1rem;font-size: 1.2rem;}

.muted { font-size: 11px; color: #999;}
.fa-line {color: #06C755}


/*Tab*/
.Vuecontainer {}
.Vuetabs {margin-bottom: -2px; }
.Vuetabs ul {/*list-style-type: none; margin-left:; */}
.Vuetabs a{cursor: pointer;/*width: calc(100%/2);*/font-size: 1.6rem;text-align: center;font-family: serif;font-weight: 500;color: #777;padding: .5rem 1rem;transition: 0.2s;border: 1px dotted #b8983caa;border-right: none;background-color:#faf7ee;}
.Vuetabs a:last-child {border-right: 1px solid #f6f4ee;}
.Vuetabs a:hover {background-color: #eee3cc;color: #333;}
.Vuetabs a.active {background-color: #d79e23;color: #ffffff;border-bottom: 4px solid #9b8239;cursor: default;}
.tabVuecontent { padding: 2rem; /*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;}

.tab-wrap {
  display: flex;
}

.tab-wrap a:nth-child(1) {
  flex: 1;   /* 33% */
}

.tab-wrap a:nth-child(2) {
  flex: 2;   /* 66% */
}

.lecture{padding: 2% 8%;border-top: 5px var(--item2) dotted;border-bottom: 5px var(--item2) dotted;margin: 0 auto;}
.lecture caption{line-height: 1.55em; font-size: 1.25rem;color:var(--item);background-color:#877e8c;font-weight:700;padding: .5%;}
.lecture th{font-size: 1.125rem;background: #f2ebf7;font-weight: 700;}
.lecture th,#lecture td{line-height:1.55em;}
.lecture td{background:white;padding:.6% 1.5% .25%;font-size: 1.05rem;}
.lecture table{width:100%;background: #877e8c}
.lecture table a{color:var(--point);}
.lecture .tb_title{text-align: left;background: #f8ecdd;font-weight: 700;}
.lecture h2{font-weight: bold;font-family: "Noto Serif TC", serif;color:var(--title);}
.lec_group{font-size: clamp(1rem, 3vw,1.2rem);line-height: 1.7;margin: 0.5rem auto;}
.lec_group a{color:var(--point);}
.pub table span{font-size: 0.8rem;}
.pub table{text-align: center}
.pub table td small{font-size: 85%;}
.lec_group dt{font-size: clamp(1.1rem, 3vw,1.4rem);color:var(--point);font-weight: bold;}
.lec_title{
    font-family: "Noto Serif TC", "serif";font-size: clamp(1.3rem, 3vw,2.2rem);font-weight: bold;line-height: 1.7;margin: 0.5rem;
    text-align: center;border-bottom: 2px solid #743590;color:#743590;
}
.lec_title small{font-size: 55%;}
.teacher{text-align: left}
.pub{margin-bottom: 4%}
.pub i{color:var(--point);    font-size: 120%;}
.pub mark{color:var(--point);font-weight: bold;background: transparent;}
.lecture table,.lecture th,.lecture td{border-collapse:collapse;border:1px #765628 dotted;}
.lecture a.btn_primary{color:var(--item);padding:.05rem .3rem .1rem;background:var(--point);border-radius: 50rem;}

.buybtn {
    text-align: center;
    padding: 0;
    margin: 2% auto;
    font-size: 1.4rem;
    font-weight: bold;
}
.buybtn a{color:var(--item);padding:.1rem .5rem .3rem;background:var(--point);border-radius: 10rem;}


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

/*手機*/
@media all and (min-width: 1px) and (max-width:767px){
	.book-tag,.book-tag-club {text-align: center;padding: 0.8rem 0rem 0.8rem 0rem;clip-path: none;width: 100%;display: block;}
.title_ol{}
	.title {margin-top: 0rem;}
.title h1{font-size: 2.4rem;}
.title h4{font-size: 1.8rem;text-align: center;}
.title h4 span{display: block;}
	.sec-banner {font-size: 1.5rem;}
	.sec-event {flex-direction: column;}
	.event-cover {width: 50%;}
	.sec-lecturer {border-radius: 1rem;margin-bottom: 2rem;padding: 1rem 2rem;}
	.sec-promo {text-align: left;}
.sec-time {padding: 0.8rem 9%;font-size: 1.1rem;}
	.focus-sub {padding: 0rem 1rem 1rem;}
	.promo-desc {font-size: 1.3rem;}
	}