@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..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;color:#2e2926;}
#BodyContainer{margin:0 auto}
#BodyContentEvent,#event{width:100%}
#event a:hover{text-decoration:none;left:1px;top:1px;position:relative}
.bgcolor1{background-color: #EBEBEB;}
.bgcolor2{background-color: white;}
.bgcolor3{background: linear-gradient(to bottom, white 20%,  #fcf9f2 70%);}
.bgcolor4{background-color: #f8f2e6;}
.bgcolor5{background-color: #FFFFFF;}
:root{
  --purple1: #6c406c;
  --red1 :#a74454;
  --brown1: #8e5e0c;
  --green1: #36766a;
}

.container{width: 1200px;margin:0 auto;	padding: 3.2rem 0;}
h1{font-size: 3rem;}
h2{font-size: 2rem;}
h3{font-size: clamp(1.4rem, 5vw, 2.7rem);padding: 0.5rem 0;font-family: "LXGW WenKai Mono TC", monospace;font-weight: 700;}
h4{font-size: clamp(.8rem, 5vw, 1.4rem);padding: 0 0 2rem;font-family: "LXGW WenKai Mono TC", monospace;font-weight: 700;}
.brown{color: var(--brown1);}
.green{color: var(--green1);}
.red{color: var(--red1);}
.purple{color: var(--purple1);}
.info{font-size: clamp(1rem, 3vw, 1.2rem);text-align: justify;}
picture{justify-content: center;}

/*師資*/
.teacher{background:#fff;border-radius:6px;border:1px solid #e2e8f0;box-shadow:0 4px 16px #0000000a;display:flex;flex-direction:column;padding:1.5rem 1.25rem 1.25rem;position:relative;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease;font-family: "LXGW WenKai Mono TC", monospace;}
.teacher::before{content:'';position:absolute;top:0;left:0;right:0;height:10px;background-color:var(--theme-color,#347a6e)}
.teacher .item{font-size: 1.2rem;}
.teacher .item span{display:inline-block;background-color:var(--theme-color,#347a6e);color:#fff;font-weight:500;padding:.35rem 0rem;border-radius:4px;width:50%;text-align: center;}
.teacher .name-block {margin: 0.25rem auto;}
.teacher-divider{height:2px;background-color:#f3e6d5;margin:.85rem 0}
.teacher .name{display:block;font-size:1.5rem;font-weight:700;color:#0f172a;padding:0}
.teacher .name-subtitle{color:var(--theme-color,#347a6e);line-height:1.4;font-weight:500}
.teacher .feature-block{display:flex;flex-direction:column;gap:.6rem;flex-grow:1;}
.teacher .info-title{font-size:1.2rem;font-weight:700;line-height:1.4;margin-bottom: 0.5rem;}
.teacher .info-desc{line-height:1.5;font-size: 1rem;color:#616161;}
.teacher .price-block{margin-top:auto;padding-top:.5rem;margin-bottom:1rem}
.teacher .price{font-size:1.2rem;color:#334155;font-weight:500;display:flex;align-items:baseline;gap:.35rem}
.teacher .price b{font-size:1.5rem;color:#b91c1c;font-weight:800;font-family: 'Noto Sans TC', sans-serif;}
.teacher .action-buttons{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.teacher button{cursor:pointer;padding:.5rem .25rem;font-size:.9rem;font-weight:500;border-radius:6px;transition:all .15s ease-in-out;text-align:center;line-height:1.25;width:100%}

/* 第一個按鈕：學員心得 (主題色外框風格) */
.teacher button:first-child,
.teacher button.btn-outline {
  background: #ffffff;
  border: 1.5px solid var(--theme-color, #347a6e);
  color: var(--theme-color, #347a6e);
}

/* 第二個按鈕：免費試聽 (主題色實心風格) */
.teacher button ~ button,
.teacher button.btn-solid {
  background-color: var(--theme-color, #347a6e);
  border: 1.5px solid var(--theme-color, #347a6e);
  color: #ffffff;
}

/* 7. 四種主題顏色設定 (對應 .card-1 ~ .card-4) */
.card-1 { --theme-color: #347a6e; } /* 綠色：刑事訴訟法 */
.card-2 { --theme-color: #a65330; } /* 棕色：刑法 */
.card-3 { --theme-color: #603b6b; } /* 紫色：民事財產法 */
.card-4 { --theme-color: #9e3345; } /* 酒紅：行政法 */
          
/* .teacher{border-radius: 8px;margin: 0 0.5%;font-size: 1.1rem;display: flex;flex-direction: column;padding: 2rem 0 1.35rem;gap: 0.6rem;grid-row: 1;font-family: "LXGW WenKai Mono TC", monospace;}
.teacher .item{font-size: 1.25rem;}
.teacher div{padding: 3% 5%;}
.teacher .item span{
  text-align: center;font-size: 140%;font-weight: bold;display: block;width: fit-content;margin: auto;padding: 0.1rem 1.5rem;margin-bottom: 1rem;font-weight: 500;
  clip-path: polygon(94% 0, 100% 50%, 94% 100%, 6% 100%, 0 50%, 6% 0);background: linear-gradient(to right, #ffffff 60%, transparent 100%);color: #222;font-family: "Chiron Hei HK", sans-serif;font-family: "LXGW WenKai Mono TC", monospace;
}
.teacher .name{
  display: flex;font-size: 1.4rem;background: linear-gradient(45deg, rgb(255 255 255 / 40%) 10%, rgb(255 255 255 / 100%) 40%,rgb(255 255 255 / 100%) 70%,
  rgb(255 255 255 / 40%) 100%); padding: 1rem 0;justify-content: center;align-items: center;color: black;clip-path: polygon(100% 0, 100% 92%, 92% 100%, 0 100%, 0 0);
  font-family: "LXGW WenKai Mono TC", monospace;font-weight: 400;
}
.teacher div:nth-child(5){margin-top: auto;}
.teacher button{cursor:pointer;background:linear-gradient(to bottom, white 49%, #dadada 50%, white 80%);color:var(--purple1);border-radius:4px;padding:5px 15px;margin: 0 2%;}
.teacher button:hover{padding: 3px 15px 7px;}
.teacher button~button{border:1px solid #c4181f;color:#c4181f;}
.teacher button~button:hover{background:linear-gradient(to bottom, #c4181f 50%, white 100%);color:#fff}
.teacher .price b{font-size: 120%;color: #c4181f;} 
.card-1{background: var(--green1);color: white;}
.card-2{background: var(--brown1);color: white;}
.card-3{background: var(--purple1);color: white;}
.card-4{background: var(--red1);color: white;}*/

.fa-circle-check{color: var(--brown1);}

#Carousel{width:94%; margin:1.3rem auto;font-family: "LXGW WenKai Mono TC", monospace;}
.VueCarousel-slide {display: flex ;align-items: stretch;height: auto;}
/* .VueCarousel-slide{align-items:flex-start;justify-content:center;box-sizing:border-box;gap:20px;} */
.VueCarousel-navigation-button{color: var(--blue_light)!important;}
.fade-enter-active, .fade-leave-active {transition: opacity .3s;}
.fade-enter, .fade-leave-to {opacity: 0;transition: opacity 0.15s;}

/*心得*/
.details {  
  max-height: 0; overflow: hidden;border-radius: 8px;
  transition: opacity 0.4s ease-in-out;
  opacity: 0; font-size: 1.1rem; background: linear-gradient(to bottom, white 80%, transparent);
}
.details.active {
      display: block; /* 展開時顯示 */
    }

.details div{padding: 0.5rem;}
#details-3.details div:not(.subtitle){margin-bottom: 0.5rem;border-bottom: 1px solid var(--red1);}
.details span{font-weight: bold;display: block;color: var(--brown1);}
.subtitle{font-size: 1.35rem;font-weight: bold;margin: 0.5rem 0;}
#details-1 .subtitle{color: var(--green1);}
#details-2 .subtitle{color: var(--brown1);}
#details-3 .subtitle{color: var(--purple1);}
#details-4 .subtitle{color: var(--red1);}
.details.open { max-height: 5000px; opacity: 1; padding: 1rem 3rem; }
.class_info{display: flex;justify-content: center;font-size: 1.1rem;}
.buy { text-align: center; font-size: 1.3rem; background: #c4181f; padding: 0.2rem 1.3rem; border-radius: 2.5rem; color: white; width: fit-content; margin: 0 1rem 2rem; }

/*內容*/
.info-card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem;align-items:stretch;font-family: "LXGW WenKai Mono TC", monospace;}
.info-card{background-color:#fff;border-bottom-left-radius:8px;border-bottom-right-radius:8px;border-top:5px solid #a3681b;padding:1rem 1.75rem;box-shadow:0 4px 6px #bbbbb7;display:flex;flex-direction:column}
.info-card:hover{transform:translateY(-4px);box-shadow:0 15px 30px -5px #a3681b24 0 8px 16px -4px #00000014}
.card-title{display:flex;align-items:center;gap:10px;font-size:1.5rem;font-weight:700;margin-bottom:1rem;letter-spacing:.01em}
.card-body{font-size:1.1rem;color:#525252;line-height:1.85;text-align:justify}

/* 購課與觀看說明區塊 */
.info-section{margin-top:4rem}
.section-title{font-size:2.2rem;font-weight:900;text-align:center;color:#2c2c2c;margin-bottom:1.75rem;letter-spacing:.02em}
.info-outer-box{background-color:#f7f2ea;border:1px solid #e3dbce;border-radius:12px;padding:1.75rem;box-shadow:0 4px 12px #00000005}
.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:1rem}
.info-item{background-color:#fff;border:1px solid #e5ded4;border-radius:.5rem;padding:1.125rem 1.25rem;display:flex;flex-direction:column;justify-content:center}
.info-item-title{font-size:1.1rem;font-weight:700;color:#a3681b;margin-bottom:.375rem}
.info-item-content{font-size:1rem;color:#2c2c2c;line-height:1.5;font-weight: 500;}
.info-note-box{background-color:#eae3d8;border-radius:6px;padding:.875rem 1.25rem;text-align:center;font-size:.95rem;font-weight:500;color:#5e584f}

/* 固定頁尾區塊樣式 */
.fixed-footer{position:fixed;bottom:0;left:0;width:100%;background:linear-gradient(135deg,#82303e 0%,#903746 50%,#9f3e4e 100%);color:#fff;padding:0.5rem;box-shadow:0 -4px 20px #0000002e;z-index:1000;text-align:center}
.footer-title{font-size:1.6rem;font-weight:500;letter-spacing:.05em;margin-bottom:.875rem;color:#fff}
.footer-buttons{display:flex;justify-content:center;align-items:center;gap:16px;flex-wrap:wrap}
.footer-buttons a{display:inline-block;background-color:transparent;color:#fff;font-size:1rem;font-weight:500;text-decoration:none;padding:.5625rem 2rem;border-radius:.375rem;border:1px solid #fff;transition:all .25s ease}
.footer-buttons a:hover{background-color:#f5f5f5;color:#8c3545;transform:translateY(-2px);box-shadow:0 4px 12px #00000038}



@media (min-width:1281px){     
    .container{width:1200px;margin:auto}
}
@media (max-width:1280px){     
    .container{max-width:100%;margin:auto;padding:1rem;}
    #Carousel {width: 80%;margin: 2rem auto;}
}

@media (max-width: 767px){
  h3{text-align: center;}
  .teachergroup {display: flex;flex-direction: column;gap: 15px;}
  .teacher {width: 100%;}
  .info-card-grid {grid-template-columns: 1fr;gap: 20px;}
  .info-grid {grid-template-columns: 1fr;}
  .footer-title {font-size: 1.3rem;margin: 0 auto;}
  .footer-buttons {padding: 0.5rem 1.5rem;font-size: 0.95rem;}
  .details.open { padding: 1rem; }

}

@media (min-width: 769px) {
  .teachergroup {display: grid;grid-template-columns: repeat(4, 1fr);gap: 15px;}
  /* 所有卡片固定在第 1 列 */
  .teacher {grid-row: 1;}
  /* 所有心得區塊固定在第 2 列，且橫跨 4 欄 */
  .details { margin-top: 0;grid-row: 2;grid-column: 1 / -1; /* 從第 1 欄橫跨至最後一欄 */}
}


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