*{font-family: 'Noto Sans TC','微軟正黑體',sans-serif; }
body{ font-family: 'Noto Sans TC','微軟正黑體',sans-serif; background: url(../images/bg2.jpg) ;background-size:cover;background-attachment: fixed;}
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.4;position: relative;z-index: 999;color: #0D1F2D;}
section p,section li,section table tr td{font-weight: 400;line-height: 1.8;color: #3d3d3d;font-size: 1.12rem;}
section a {font-size: 1.12rem;}





/* 輪播 */
.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:1250px;}

.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.ml7{margin:20px 0 40px;position: relative;}
.master-title.center .ml7{text-align: center;margin:20px auto 40px;}
.master-title h2 ,.master-title h3 ,.master-title h5  {color: #000;}
.master-title.white h2 ,.master-title.white h3 ,.master-title.white h4 ,.master-title.white h5 {color: #fff;}

.master-title.ml7 {
  position: relative;
  font-weight: 600;
  font-size: 2.5em;

}

.master-title.ml7.center { text-align: center; }
.master-title.ml7.white .text-wrapper .letter {  color: #fff;} 

.master-title.ml7 .text-wrapper {  position: relative;
  display: block;
  padding-bottom: 0.2em;
  overflow: hidden;letter-spacing: .05em;}

.master-title.ml7 .text-wrapper .letter {transform-origin: 0 100%;
  display: inline-block; color: #000;}


header#visual .ml7 {
  position: relative;
  font-weight: 900;
  font-size: 3.7em;
}
header#visual .ml7 .text-wrapper {
  position: relative;
  display: block;
  padding-bottom: 0.2em;
  overflow: hidden;
}
header#visual .ml7 .letter {
  transform-origin: 0 100%;
  display: inline-block;
}


.master-title .icon {width: 90px;margin: 10px 0;}
.master-title.center .icon {margin: 10px auto;}




 




/* 主視覺 */
header#visual {position: relative;width: 100%;height: 100%;  overflow-x: hidden;
  overflow-y: visible;
  isolation: isolate; /* 保持層級乾淨 */}
header#visual .photo {width: 78%;position: relative;}
header#visual .photo img {width: 100%;}

header#visual .title-box {background: linear-gradient(45deg,#323482,#323482);padding:30px;position: absolute;z-index: 99;
right: 5%;bottom: 10%;border-radius: 5px;}
header#visual .title-box h1 {font-size: 3.2rem;color: #fff;font-weight: 900;line-height: 1.5;}
header#visual .title-box h2 {font-size: 2rem;color: #ffecaf;}




.agile-ring {
  position: absolute; top: 37%; left: 34%; width: 21%;
  transform: rotate(30deg);
  pointer-events: none; /* 避免擋到點擊 */
  z-index: 2;
}

/* 動畫：用 dash 擦出遮罩的白線 */
#ring-stroke {
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  animation: ring-draw 2.8s linear forwards;
}

/* 使用者偏好降噪：尊重減少動效 */
@media (prefers-reduced-motion: reduce) {
  #ring-stroke { animation: none; stroke-dashoffset: 0; }
}

@keyframes ring-draw { to { stroke-dashoffset: 0; } }



header#visual .header-bg {position: absolute;top: 0; right:-10%;transform: translateY(-50%) scale(-1);width: 80%;z-index: 88;   pointer-events: none; }
header#visual .header-bg img{
  display: block;
  width: 100%;
  height: auto;
}




section#why { z-index: 1;position: relative;}
section#why  img{width: 100%;}
section#why .con-flex {display: flex;align-items: center;}
section#why .con-flex .con{width: 33.33%;}
section#why .con-flex .con .item {display: flex;margin: 20px 0 0;}
section#why .con-flex .con .item .icon {width: 200px;padding: 10px;}
section#why .con-flex .con .photo {width: 100%;}
section#why .con-flex .con .item h5 {font-weight: 600;color: #000;}
section#why .data-box {padding: 30px;background-color: #464393;border-radius: 5px;}
section#why .data-box h3 {color: #fff;text-align: center;}
section#why .data-box .data {display: flex;}
section#why .data-box .data .item {width: 33.33%;margin: 10px 0 ;}
section#why .data-box .data .item h4 {font-size: 3rem;text-align: center;color: #ffecaf;font-weight: 600;}
section#why .data-box .data .item h5 {text-align: center;color: #fff;font-weight: 600;}






section#problem {background: url(../images/problem-photo-1.jpg) no-repeat right top,
  url(../images/header-bg.png) no-repeat -60% 100%;background-size: 70%,65%;
  padding: 250px 0 100px ;}
  

/* section#problem {background: url(../images/problem-photo-1.jpg) no-repeat right top,
  url(../images/header-bg.png) no-repeat -100% 100%;background-size: 70%,80%;
  padding: 250px 0 100px ;}
   */






section#problem .box {width: 75%;background-color: #fff;border-left:15px solid #7b6dac;padding: 30px;}

section#problem .box .item {margin: 20px 0;}
section#problem .box .item p{margin: 0;text-align: justify;  text-align-last: left;
  line-break: strict;}
section#problem .box .item .item-title {display: flex;align-items: center;}
section#problem .box .item .item-title .icon{width: 25px;margin:-8px 10px 0 0;}
section#problem .box .item .item-title .icon img{width: 100%;}
section#problem .box .item .item-title.item-warm {background-color: #f9eded;padding: 20px;}
section#problem .box .item .item-title.item-warm .icon {width: 70px;padding: 0 10px;}





section#lesson {background-color: rgba(212, 214, 241, 0.6);}
section#lesson .box-g .box-flex {display: flex;align-items: stretch;min-height: 350px;background-color: #fff;border-bottom:1px solid #e8e8f3 ;border-radius: 5px;}
section#lesson .box-g .box-flex .lesson-title{width: 35%;padding: 20px;}
section#lesson .box-g .box-flex .lesson-title .icon{width: 110px;margin: 0 auto 10px;}
section#lesson .box-g .box-flex .lesson-title .icon img{width: 100%;}
section#lesson .box-g .box-flex .lesson-title h4,section#lesson .box-g .box-flex .lesson-title h5 {text-align: center;}
section#lesson .box-g .box-flex .lesson-title {display: flex;justify-content: center;flex-direction: column;padding: 30px;width: 30%;}
section#lesson .box-g .box-flex .lesson-title h4 {font-size: 1.8rem;font-weight: 600;color: #fff;}
section#lesson .box-g .box-flex .lesson-title h5{color: #ffecaf;font-size: 1.4rem;}

section#lesson .box-g .box-flex .lesson-con {padding: 30px;width: 70%;}
section#lesson .box-g .box-flex .lesson-con .lesson-btn {padding: 5px 30px;border-radius: 10px;font-size: 1.05rem;display: inline-block;margin: 10px 0 ;cursor: pointer;transition: all .3s ease-in;}

section#lesson .box-g .box-flex .lesson-con a {display: inline-block;}
section#lesson .box-g .box-flex .lesson-con b{font-size: 1.1rem;font-weight: 600;color: #3d3d3d;}

section#lesson .box-g .box-flex:nth-child(1) .lesson-title{background-color: #ad8dc0;}
section#lesson .box-g .box-flex:nth-child(2) .lesson-title{background-color: #7b6dac;}
section#lesson .box-g .box-flex:nth-child(3) .lesson-title{background-color: #9470b9;}
section#lesson .box-g .box-flex:nth-child(4) .lesson-title{background-color: #484c98;}
section#lesson .box-g .box-flex:nth-child(5) .lesson-title{background-color: #1d3f8a;}
section#lesson .box-g .box-flex:nth-child(6) .lesson-title{background-color: #47389a;}


section#lesson .box-g .box-flex:nth-child(1) .lesson-con .lesson-btn {border:2px solid #ad8dc0;color: #ad8dc0;}
section#lesson .box-g .box-flex:nth-child(2) .lesson-con .lesson-btn {border:2px solid #7b6dac;color: #7b6dac;}
section#lesson .box-g .box-flex:nth-child(3) .lesson-con .lesson-btn {border:2px solid #9470b9;color: #9470b9;}
section#lesson .box-g .box-flex:nth-child(4) .lesson-con .lesson-btn {border:2px solid #484c98;color: #484c98;}
section#lesson .box-g .box-flex:nth-child(5) .lesson-con .lesson-btn {border:2px solid #1d3f8a;color: #1d3f8a;}
section#lesson .box-g .box-flex:nth-child(6) .lesson-con .lesson-btn {border:2px solid #47389a;color: #47389a;}



section#lesson .box-g .box-flex:nth-child(1) .lesson-con .lesson-btn:hover {background-color: #ad8dc0;color: #fff;}
section#lesson .box-g .box-flex:nth-child(2) .lesson-con .lesson-btn:hover {background-color: #7b6dac;color: #fff;}
section#lesson .box-g .box-flex:nth-child(3) .lesson-con .lesson-btn:hover {background-color: #9470b9;color: #fff;}
section#lesson .box-g .box-flex:nth-child(4) .lesson-con .lesson-btn:hover {background-color: #484c98;color: #fff;}
section#lesson .box-g .box-flex:nth-child(5) .lesson-con .lesson-btn:hover {background-color: #1d3f8a;color: #fff;}
section#lesson .box-g .box-flex:nth-child(6) .lesson-con .lesson-btn:hover {background-color: #47389a;color: #fff;}


















/* 按鈕*/ 
section#BTN {background: url(../images/btn-bg.jpg);background-size: cover;padding: 100px 0;}


section#BTN .big-btn {margin: 0 auto;font-size: 1.7rem;padding: 12px 15px;text-align: center;width: 60%;border-radius: 20px;border: 3px solid #fff;transition: all .3s ease-in;margin: 0 auto;}
section#BTN .big-btn p{margin: 0;font-size: 1.6rem;font-weight: 600;color: #fff;}

section#BTN .big-btn:hover {background: #fff;}
section#BTN .big-btn:hover p {
 background: linear-gradient(50deg, #8B85DD, #8B85DD);  -webkit-background-clip: text; /* 只顯示在文字範圍 */
  -webkit-text-fill-color: transparent; /* 把字本身填色透明 */
}
section#BTN  a {text-decoration: none;}







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



}

@media(max-width:1440px){
     /* 主視覺 */
   header#visual .header-icon-gear.gear-1 {left: 2%;top:5% ;width:5% ;} 
   header#visual .header-icon-gear.gear-2 {left: 5%;top:28% ;width:3% ;} 
   header#visual .header-icon-gear.gear-3 {right: 2%;top:15% ;width:5% ;} 

}

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

header#visual .title-box h1 {font-size: 2.4rem;}
header#visual .title-box h2 {font-size: 1.2rem;}

.master-title.ml7 { font-size: 2em; }
.master-title .icon { width: 70px; }


















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



}


@media(max-width:991px){

    .title h3 { font-size: 1.6rem; }
    .master-title { width: 100%; }
    .container{max-width:900px;}
    nav ul {max-width:900px;}

    header#visual { height:auto; padding-bottom: 150px;}
    header#visual .title-box { width: 95%; padding:20px; left: 50%; right: auto ; bottom:8% ; transform: translate(-50%,0%); }
    header#visual .photo { width: 100%; position: relative; }
    header#visual .title-box h1 {font-size: 2.2rem;}
    header#visual .title-box h2 {font-size: 1.4rem;}




}


@media(max-width: 767px){
    .container { padding: 15px;max-width: 98%; }
 

    h2{font-size: 1.6rem;}
    section { padding: 30px 0;}
    section h4 {font-size: 1.2rem;}
    section p {font-size: 1.05rem;}
    section p, section li, section table tr td { font-size: 1rem;line-height:1.6; }

    .master-title .icon { width: 60px; }

    header#visual .title-box h1 {font-size: 1.6rem;}
    header#visual .title-box h2 {font-size: 1.3rem;line-height: 1.6;}
    .master-title.ml7 { font-size: 1.6em; }

    section#why { padding: 0 0 30px; }
    section#why .con-flex {flex-direction: column;}
    section#why .con-flex .con { width: 100%; }
 
    section#why .con-flex .con:nth-child(1) {order: 1;}
    section#why .con-flex .con:nth-child(2) {order: 3;}
    section#why .con-flex .con:nth-child(3) {order: 2;}
   

    section#why .data-box .data { flex-direction: column; }
    section#why .data-box .data .item { width: 100%; display: flex;align-items: center;margin: 0;}
    section#why .data-box .data .item h4 { font-size: 2.2rem; }
    section#why .data-box .data .item h5 { font-size: 1.2rem; margin: 0 0 0 10px; }

    section#why .con-flex .con .photo { width: 100%;text-align: center; }
    section#why .con-flex .con .photo img{ width: 60% }
    section#why .con-flex .con .item .icon { width: 100px; padding: 0 10px 0 0; }

    section#problem { background: url(../images/problem-photo-1.jpg) no-repeat right top, url(../images/header-bg.png) no-repeat -100% 100%; background-size: 90%, 90%; padding: 100px 0 30px; }


    section#problem .box { width: 95%; border-left: 12px solid #7b6dac; padding: 20px; }
    section#problem .box .item .item-title .icon { margin: -12px 10px 0 0; }
    section#problem .box .item .item-title.item-warm .icon img { width: 50px; }



    section#lesson .box-g .box-flex { flex-direction: column; margin: 0 0 20px; }
    section#lesson .box-g .box-flex .lesson-title { flex-direction: row; padding: 20px; width: 100%; align-items: center;}

    section#lesson .box-g .box-flex .lesson-title .icon { width:25%; margin: 0 20px 0 0; }
    section#lesson .box-g .box-flex .lesson-title div:nth-child(2){width: 75%;}
    section#lesson .box-g .box-flex .lesson-title h4 { font-size: 1.4rem;text-align: left; }
    section#lesson .box-g .box-flex .lesson-title h5 { font-size: 1.1rem;text-align: left; }

    section#lesson .box-g .box-flex .lesson-con b {width: 100%;display: block;}
    section#lesson .box-g .box-flex .lesson-con p {width: 100%;}
    section#lesson .box-g .box-flex .lesson-con { padding: 20px; width: 100%;  display: flex; justify-content: center;flex-direction: column;align-items: center; }
    section#lesson .box-g .box-flex .lesson-con ul {width: 100%;}
    section#lesson .box-g .box-flex .lesson-con .lesson-btn { transition: all .3s ease-in;width: 300px;text-align: center; }

    section#BTN .big-btn { width: 100%; margin: 20px auto; }
    section#BTN .big-btn p { font-size: 1.4rem; }


}












@media(max-width: 575px){
    .container { padding: 15px; }

}