/* 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;
}

.bg {background: url(../images/1504022_01.png) no-repeat top;}

.title{margin: 0% auto;text-align: center;padding: 7% 0 11%;}
.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 h4{padding: 0 0 1%;font-size: 1.6rem;color: #604002;}

/*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.35rem;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: grid;
  grid-template-columns: repeat(6 ,1fr);
}

.tab-wrap a:nth-child(n+2) {
   grid-column: span 1;
}

.tab-wrap a:nth-child(4) {
   grid-column: span 3;
}

.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;}
.notice_area a{text-decoration: underline;}
.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;text-decoration: none;}

/* 浮動容器 */
        .chat-bubble {
            position: fixed;
            left: calc(50% - 425px - 293px); 
            width: 270px;
            padding: 20px;
            background: #ffffff;
            border-radius: 16px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
            border: 1px solid #d79e23;
            z-index: 1000;
            top: 42%;
            transform: translateY(-50%);
        }

        /* 對話框尖角 */
        .chat-bubble::after {
            content: '';
            position: absolute;
            top: 50%;
            right: -15px;
            margin-top: -15px;
            border-width: 15px 0 15px 15px;
            border-style: solid;
            border-color: transparent transparent transparent #d79e23;
        }

        .chat-bubble::before {
            content: '';
            position: absolute;
            top: 50%;
            right: -12px;
            margin-top: -13px;
            border-width: 13px 0 13px 13px;
            border-style: solid;
            border-color: transparent transparent transparent #ffffff;
        }

        /* 文字樣式 */
        .content h3 {
            margin: 0 0 5px 0;
            font-size: 1.15rem;
            font-weight: 700;
            color: #333;
        }

        .content p {
            margin: 0 auto;
            line-height: 1.5;
        }
        
        .content .red {
            color:var(--point);
            font-weight: 700;
        }
        
        .content .line {
            color:#00b900;
            font-weight: 700;
        }

        /* 按鈕樣式 */
        .cta-button {
            width: auto;
            padding: 1px 5px;
            text-align: center;
            background-color: #00b900; /* LINE綠 */
            color: white;
            text-decoration: none;
            border-radius: 6px;
            font-weight: bold;
            transition: background 0.3s;
        }

        .cta-button:hover {
            background-color: #009d00;
        }

/* 響應式設定：針對手機螢幕 */
@media (max-width: 1300px) {
            .chat-bubble {
                left: auto;
                right: 30px;
                top: auto;
                bottom: 30px;
                transform: translateY(0);
            }
            .chat-bubble::after {
                display: none;
                /* top: auto;
                bottom: -15px;
                right: 20px;
                margin-top: 0;
                border-width: 15px 15px 0 0;
                border-color: #e0e0e0 transparent transparent transparent; */
            }
            .chat-bubble::before {
                display: none;
                /* top: auto;
                bottom: -12px;
                right: 22px;
                margin-top: 0;
                border-width: 13px 13px 0 0;
                border-color: #ffffff transparent transparent transparent; */
            }
        }

        @media (max-width: 480px) {
        .content h3 {
            margin: 0 auto;
        }

            .chat-bubble {
                bottom: 25px;
                right: 65px;
                left: 0px;
                width: auto;
                padding: 10px;
            }
            
            .hidden-content { display: none; }
            .is-expanded .hidden-content { display: block; }

            .content h3 {
                cursor: pointer;
                position: relative;
                padding-right: 20px;
            }
            
            .content h3::after {
                content: '▼';
                font-size: 10px;
                position: absolute;
                right: 0;
                top: 50%;
                transform: translateY(-50%);
            }
        }

/*各大相容檢視*/
@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){
.title_ol{border-bottom: solid 6px #d79e23;background: url(../images/1504022_deco.png) no-repeat center, linear-gradient(180deg, #ffffff 75%, #fff5e5 100%);background-size: 95%;}
.title h1{font-size: 2.4rem;}
.title h4{font-size: 1.1rem;}
.Vuetabs a{font-size: 1rem;padding: .5rem;display: grid;align-items: center;}

	}