*{font-family: 'Noto Sans TC','微軟正黑體',sans-serif; }
body{ font-family: 'Noto Sans TC','微軟正黑體',sans-serif;;}
html{  scroll-behavior: smooth;}
section h1,section h2,section h3,section h4,section h5,section h6,section p,section span,section a{line-height: 1.6;position: relative;z-index: 999;color: #333;}
section p,section li,section table tr td{font-weight: 400;line-height: 1.8;color: #333;font-size: 1.12rem;}
section a {font-size: 1.12rem;color: #de4e3b;}
section a:hover {font-size: 1.12rem;color: #de7c3b;text-decoration: none;}

.paper {width: 100%;height: 100vh;background: url("../images/paper.jpg") center / cover;top: 0;left: 0;position: fixed;z-index:1;opacity: .3;mix-blend-mode: multiply;z-index: 1;}


/* 輪播 */
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span { background: #ff7876 !important; }
.owl-theme .owl-dots .owl-dot span, .owl-theme .owl-dots .owl-dot span { background: #c5b9b6 !important; }

/* 共通 */
section {padding: 100px 0;position: relative;}
section p br { content: ""; margin: 0.8em; display: block; }

.container{max-width:1280px;}

.video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }
.video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0;left: 0; width: 100%; height: 100%;}  


/* 大小標題共用 */
.master-title {margin:10px 0;position: relative;}
.master-title.center {text-align: center;margin:10px auto;}
.master-title h2 ,.master-title h3 ,.master-title h5 , .master-title p{color: #25325C;font-weight: 600;}
.master-title.white h2 ,.master-title.white h3 ,.master-title.white h5 , .master-title p {color: #fff;}
.master-title h2 {font-size: 2.5rem;font-weight: 700;}
.master-title h3 {font-size: 1.8rem;}
.master-title p {font-size: 1.25rem;}


/*
div.EventAD { width:180px; display: block; position: fixed; right: 0; top: 00px; z-index: 200; animation-name: EventAD-M; animation-duration: 5s; animation-iteration-count: infinite; }
div.EventAD:hover { width: 200px; right: 0; transition: 0.3s; animation-iteration-count: initial; animation-name: initial; }
 @keyframes EventAD-M { 0%{ right: -20px; } 70%{ right: 25px; } 100%{ right:-20px; } }
div.EventAD img { width: 100%; box-shadow: 0 0 15px rgb(120, 120, 120); border-radius: 10px; }
div.EventAD img:hover { box-shadow: 0 0 20px rgb(150, 150, 150); }

 */



.box-style {background-color: #fff;border-radius: 20px;box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);position: relative;padding: 30px;z-index: 99; }



/* 主視覺 */
header#visual {position: relative;width: 100%;height:90vh; background:   url("../images/header-bg-01.jpg") center/cover no-repeat; animation: headerBg 3s steps(4) infinite;display: flex;align-items: center;padding: 5% 2%;justify-content: space-between;background-color:#fff5e4;  }

@keyframes headerBg {
  0%   { background-image: url(../images/header-bg-01.jpg); }
  25%  { background-image: url(../images/header-bg-02.jpg); }
  50%  { background-image: url(../images/header-bg-03.jpg); }
  75%  { background-image: url(../images/header-bg-04.jpg); }
  100% { background-image: url(../images/header-bg-01.jpg); }
}


header#visual .header-title{width:60%;z-index: 999;}

header#visual .header-title h1 {font-size:4.5rem;font-weight: 800;color: #333;text-align: center;line-height: 1.5;}
header#visual .header-title h1 span{color: #ed701d;margin: 0 20px;}
header#visual .header-title h1 span.im{color: #333;background: linear-gradient(to top,#ffbb3cc0 60%,transparent 60%);}
header#visual .header-title h2 {text-align: center;background-color: #E63D3D;margin: 0 auto 20px;width: 40%;color: #fff;padding: 8px 15px;border-radius:5px;position: relative;font-size:2.2rem;animation:jumpTitle 1.5s ease-in-out infinite ;}
@keyframes jumpTitle {
 0%   { transform: translateY(0); }
  20%  { transform: translateY(-15px); }  /* 快速上升 */
  40%  { transform: translateY(0); }      /* 掉回原位 */
  55%  { transform: translateY(-8px); }   /* 微彈一下 */
  70%  { transform: translateY(0); }      /* 回原位 */
  100% { transform: translateY(0); }
}



header#visual .header-title h2::after {content: "";  position: absolute; left: 50%; bottom: -15px; transform: translateX(-50%); width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 20px solid #E63D3D;}
header#visual .header-photo{width: 40%;text-align: center;position: relative;}
header#visual .header-photo img{  width: 100%; opacity:1;   }
header#visual .header-photo .cir {  position: absolute;    mix-blend-mode: multiply;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 5px solid #f09451;   /* 🔸要明確定義樣式為 solid */
  background: transparent;     /* 🔸確保裡面是透明的 */
  box-sizing: border-box;
  animation: cir 2s ease-out infinite;
  opacity: 1;}
@keyframes cir {
  0%   { width: 10%;height:5%;border-width: 5px;opacity: .8;}
  15%  {  width: 30%;height: 20%;border-width: 15px;}
  30%  {  width: 60%;height: 50%; border-width: 40px;}
  45%  { width: 90%;height: 80%;border-width:65px;opacity: .2; }
  100% {width:  90%;height: 80%; border-width: 65px;opacity: .2;}
}

header#visual .header-photo h3 {transform: translate(0,-80%);font-size:3rem;font-weight: 800;}



section#troubled {background: url(../images/master-bg-01.jpg) repeat; background-size: 50%;padding: 100px 0; background-attachment: fixed;}
section#troubled .box {z-index: 99;}
section#troubled .box  .con-flex{display: flex;justify-content:space-between;}
section#troubled .box  .con-flex .text{width: 55%;}
section#troubled .box  .con-flex .text .icon{width: 70px;}
section#troubled .box  .con-flex .text .icon img{width: 70px;}
section#troubled .box  .con-flex .photo{width: 42%;}
section#troubled .box  .con-flex .photo img{width: 100%;}


section#advantage {background-color: #ed701d;}
section#advantage .master-title:nth-child(2){margin: 100px 0 0;}
section#advantage .master-title p {text-align: left;}
section#advantage .box-g {display: flex;}
section#advantage .box-g .box {margin:20px 15px;box-shadow: 5px 5px 2px #ed701d;background-color: #fff;width: 33.33%;}
section#advantage .box-g .box .icon{width: 150px;margin: 40px auto ;}
section#advantage .box-g .box h4 {color: #fff;background-color: #E63D3D;padding: 8px 15px;font-size: 1.4rem;border-radius: 5px;text-align: center;}
section#advantage .box-g .box ul {padding:0 0 0 30px;margin: 0;}
section#advantage .box-g .box ul li span,section#advantage .box-g .box p span{background: linear-gradient(to top,#ffe89c9a 70%,transparent 70%);}
section#advantage .box-g .box p {margin: 0;}
section#advantage ul li::marker {color: #ed701d;}





section#harvest {background-color: #fff5e4;padding: 100px 0 50px;}
section#harvest .con-flex {margin: 20px auto 60px;display: flex;justify-content: space-between;}
section#harvest .con-flex .photo {width: 42%;}
section#harvest .con-flex .photo img{width: 100%;}
section#harvest .con-flex .text {width: 55%;} 



section#harvest ul {list-style: none;padding:   0;}
section#harvest ul li {margin: 0 0 20px;}
section#harvest ul li svg{width: 30px;display: inline-block;transform: translateY(-5px);}
section#harvest ul li svg .tick{fill:#ed701d;}

section#harvest ul li svg .tick-line{fill:#979797;}







.marquee { width: 100%;overflow-x: hidden; overflow-y: visible; padding: 25px 0 0; position: relative;z-index: 99;mix-blend-mode: multiply;}
.marquee-inner { display: flex; gap: 20px; align-items: center; width: max-content; animation: scroll 25s linear infinite; }

.marquee-inner img { width: 80px; transition: transform 0.3s ease;opacity: .9; }
/* 無縫滾動 */
@keyframes scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-33.33%); }  /* ✅ 跑兩份剛好 */
}
.marquee-inner img:hover{transform: translateY(-20px);} 
/* 跳動動畫 */
.jump { transform: translateY(-20px); }




section#lesson {background-color: #ed701d;}
section#lesson .master-title h2 span {font-size: 2.5rem;font-weight: 600;background-color: #fff;color: #ed701d;padding: 4px 15px;border-radius: 2px;margin:5px 10px;display: inline-block;}
section#lesson .master-title small {font-size: 1.5rem;}

section#lesson a {display: block;margin:40px 15px 40px;}
section#lesson a:hover .box.lesson-1:hover  {box-shadow: 0 0 30px #668aff8f;transform: translateY(2px);border: 2px solid #668aff8f;}
section#lesson a:hover .box.lesson-2:hover  {box-shadow: 0 0 30px #ffa8a89d;transform: translateY(2px);border: 2px solid #ffa8a89d;}
section#lesson a:hover .box.lesson-3:hover  {box-shadow: 0 0 30px #ffdd9aaf;transform: translateY(2px);border: 2px solid #ffdd9aaf;}













section#lesson .box {box-shadow: 5px 5px 2px #ed701d;padding: 5px;position: relative;transition: all .3s ease-in;padding:30px 15px;border: 2px solid #a6a6a6;}
section#lesson .box .con-flex {display: flex;}
section#lesson .box .con-flex .text,
section#lesson .box .con-flex .letter-flex,
section#lesson .box .con-flex .con{width: 50%;margin: 10px;padding: 25px;}

section#lesson .box .con-flex.con-flex1{margin: 20px 0 10px;}
section#lesson .box .con-flex .letter-flex {display: flex;justify-content: center;align-items: center;}
section#lesson .box .con-flex .letter-flex .letter{width: 25%;margin: 10px;}
section#lesson .box .con-flex .letter-flex .letter img{width: 100%;}

section#lesson .box .con-flex .con {border-radius: 10px;}
section#lesson .box .con-flex .con p {margin: 0 0 8px;}
section#lesson .box .lesson-title {padding: 8px 15px;text-align: center;}



section#lesson .box .lesson-title h3 {color: #fff;border-radius:  10px;text-align: center;padding: 8px 15px;width: 70%;margin: 5px auto ;font-weight:600;}
section#lesson .box.lesson-1 .lesson-title h3 {background-color: #2C3E7A;}
section#lesson .box.lesson-2 .lesson-title h3 {background-color: #E33B3A;}
section#lesson .box.lesson-3 .lesson-title h3 {background-color: #F0A100;}

section#lesson .box.lesson-1  .con-flex .con {background: #f0f4ff;}
section#lesson .box.lesson-2  .con-flex .con {background: #fff1f1;}
section#lesson .box.lesson-3  .con-flex .con {background: #fff7e9;}



section#lesson .box h4 {font-weight: 600;font-size: 1.6rem;}
section#lesson .box.lesson-1 .lesson-title h4 {color: #2C3E7A;}
section#lesson .box.lesson-2 .lesson-title h4 {color: #E33B3A;}
section#lesson .box.lesson-3 .lesson-title h4 {color: #F0A100;}
section#lesson .box.lesson-1 i {color: #c5ccdf;}
section#lesson .box.lesson-2 i {color: #e5c3c3;}
section#lesson .box.lesson-3 i {color: #e4d6c0;}




section#lesson .box ul.lesson-list{list-style: none;}
section#lesson .box ul.lesson-list > li {text-indent: -1.5em;margin: 0 0 10px;}
section#lesson .box ul.lesson-list > li svg {width: 25px;display: inline;transform: translateY(-4px);}
section#lesson .box ul.lesson-list > li svg .tick-line{fill:#979797 !important;}
section#lesson .box.lesson-1  ul.lesson-list li svg .tick{fill:#3453b7;}
section#lesson .box.lesson-2  ul.lesson-list li svg .tick{fill:#E33B3A;}
section#lesson .box.lesson-3  ul.lesson-list li svg .tick{fill:#F0A100;}




section#lesson .box ul.list{ display: block; list-style:none;  text-indent: 0;}
section#lesson .box ul.list li { position: relative;}
section#lesson .box ul.list li::before { content: ""; position: absolute; left:-20px; top: 15px; width: 6px; height: 6px; border-radius: 50%; background-color: #333;  }

section#lesson .box.lesson-1 ul.list li::before {background-color: #3453b7;}
section#lesson .box.lesson-2 ul.list li::before {background-color: #E33B3A;}
section#lesson .box.lesson-3 ul.list li::before {background-color: #F0A100;}

section#lesson .box .lesson-title h3::after {content: "";  position: absolute; left: 50%; bottom: -15px; transform: translateX(-50%); width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent;}
section#lesson .box.lesson-1 .lesson-title h3::after { border-top: 20px solid #2C3E7A;}
section#lesson .box.lesson-2 .lesson-title h3::after { border-top: 20px solid #E33B3A;}
section#lesson .box.lesson-3 .lesson-title h3::after { border-top: 20px solid #F0A100;}



section#stu {position: relative;background-color:#fff5e4; background:   url("../images/header-bg-01.jpg") bottom/cover no-repeat; animation: headerBg 3s steps(4) infinite;display: flex;background-color:#fff5e4;padding: 100px 0 0 ;  }
section#stu .master-title {background-color: #fff5e4;}
section#stu .con-g .con-flex {display: flex;justify-content: space-around;align-items: center; border-bottom: 2px dashed #7c7564a0;padding: 30px;background-color: #fff5e4;}
section#stu .con-g .con-flex .photo{width: 25%;text-align: center;background-color: #fff5e4;}
section#stu .con-g .con-flex .photo img{width: 150px;border-radius: 30px;border: 3px solid #F4911E;}
section#stu .con-g .con-flex .text {width: 75%;position: relative;}
section#stu .con-g .con-flex .text .comma {position: absolute;right: -15px ; top:15px;width: 30px;z-index: 1;opacity: 1};
section#stu .con-g .con-flex .text .comma img{width: 80px;}


section#form {background:   url("../images/header-bg-01.jpg") bottom/cover no-repeat; animation: headerBg 3s steps(4) infinite; padding: 0 0 0px; }
section#form h3 span.im{background: linear-gradient(to top,#ffbb3cc0 60%,transparent 60%);color: #25325C;}
section#form .master-title {margin:0 0 40px;}
section#form .icon{width: 90px;margin: 0 0 10px;}
section#form .icon img{width: 90px;}
.bg-pattern {background: url(../images/master-bg-01.jpg) top repeat; background-size: 50%;height: 100px;background-attachment: fixed;};

section#form a {display: inline-block;text-decoration: none;}
section#form a  .big-btn {display: inline-block;margin: 20px 0;font-size: 1.4rem;padding: 8px 15px;border-radius: 10px;font-weight: 600;transition: all .3s ease-in;width: 300px;text-align: center;background-color:#E63D3D ;color: #fff;}
section#form a .big-btn i {color: #ffffff;margin-left: 10px;transition: all .3s ease-in;}

section#form a:hover {text-decoration: none;}
section#form a:hover .big-btn i {transform: translateX(5px);}
section#form a:hover .big-btn {background-color: #242c48;}
/* section#form a:hover .big-btn {box-shadow: 0 0 5px #ff8585;border: 3px solid #ff8585;} */

div.Form ul li.send input { background: #E63D3D !important; transition: all .3s ease-in !important;}

div.Form ul li.send input:hover { background: #242c48 !important;}




@media(max-width:1690px){
    .title h2 {font-size: 2rem;}
    /* 主視覺 */



}

@media(max-width:1440px){
     /* 主視覺 */
 

}

@media(max-width:1300px){
    /* 主視覺 */


}
@media(max-width:1199px){
     /* 主視覺 */
     header#visual { height: auto; }
     header#visual .header-title {width: 65%;background-color:#fff5e4;z-index: 0;position: relative;}
     header#visual .header-title h1 { font-size: 2.4rem; }
     header#visual .header-title h2 { color: #fff; font-size:1.4rem; width: 60%;}
     header#visual .header-photo { width: 35%; }
     header#visual .header-photo h3 { font-size:2rem; }









}


@media(max-width:991px){


    .master-title { width: 100%; }
    .master-title h2 { font-size: 2rem; }
    .container{max-width:900px;}
 


}


@media(max-width: 767px){
    .container { padding: 15px;max-width: 98%; }
     section p,section li,section table tr td{font-size: 1rem;}

    /* 大小標題共用 */
    .master-title h2 {font-size: 1.5rem;}
    .master-title h3 {font-size: 1.3rem;}
    .master-title p {font-size: 1.05rem;}



     header#visual {flex-direction: column; }

     header#visual .header-title {width: 100%;margin: 0 0 20px;}
     header#visual .header-title h1 { font-size: 2.4rem; }
     header#visual .header-title h2 { color: #fff; font-size:1.4rem; width: 60%;}
     header#visual .header-photo { width: 60%; }
     header#visual .header-photo h3 { font-size:1.8rem;transform: translate(0, -28%); }

     section svg {width: 20px !important;}


     section#troubled .box .con-flex { flex-direction: column; }
     section#troubled .box .con-flex .text { width: 100%; }
     section#troubled .box .con-flex .photo { margin: 20px 0 0; width: 100%; }
     section#troubled .box .con-flex .text .icon img { width: 50px; }

     section#advantage .box-g { flex-direction: column; }
     section#advantage .box-g .box { margin: 20px 0; width: 100%; }
     section#advantage .box-g .box h4 { font-size: 1.2rem; }




      section#harvest .con-flex { flex-direction: column; }
      section#harvest .con-flex .photo { width:100%;margin: 0 0 20px; }
      section#harvest .con-flex .text { width:100%; }
      .marquee-inner img { width:40px; }

      section#lesson .box .lesson-title h3 { font-size: 1.4rem; width: 100%; }
      section#lesson .box h4 { font-size: 1.2rem; }
      
      section#lesson .box .con-flex { flex-direction: column;justify-content:space-between;padding: 10px 15px; }
      section#lesson .box .con-flex .text {width: 100%;padding: 0 15px;}
      section#lesson .box .con-flex .text  p {margin: 0;}
      section#lesson .box .con-flex .con {width: 100%;margin: 0 0 20px;padding: 15px;}

      section#lesson .box .con-flex .letter-flex { width: 70%;padding: 0; }

      section#stu .con-g .con-flex .photo {width: 28%;margin: 20px 0;align-self: start;}
      section#stu .con-g .con-flex .photo img { width: 100%; border-radius: 30px;}

      section#stu .con-g .con-flex { padding: 10px 15px; }


      section#stu .con-g .con-flex .text {width: 65%;}
      section#stu .con-g .con-flex .text .comma { right: -15px; top: 0px; }
      section#stu .con-g .con-flex .text h4 { font-size: 1.3rem;}

      section#form .master-title { margin: 0 0 20px; }
      section#form {padding: 0 0 100px;}
}












@media(max-width: 575px){
    .container { padding: 15px; }
     header#visual .header-title h1 { font-size: 1.8rem; }


}