*{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: #403f3e;}
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;color: #de4e3b;}
section a:hover {font-size: 1.12rem;color: #de7c3b;}




/* 輪播 */
.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: 80px 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 30px;position: relative;}
.master-title.center {text-align: center;margin:10px auto 30px;}
.master-title h2 ,.master-title h3 ,.master-title h5  {color: #103a67;}
.master-title h2 {font-size: 2.5rem;font-weight: 700;display: inline-block;position: relative;letter-spacing: .05em;position: relative;position: relative;margin: 0;}
.master-title h5 {font-size: 1.4rem;line-height: 2rem;font-weight:400;}

.master-title h3.line-box {border: 2px solid #103a67;padding: 5px 30px;margin: 0 auto 10px;display: inline-block;}




.master-title.white h2 ,.master-title.white h3 ,.master-title.white h4 ,.master-title.white h5 {color: #fff;}


.master-title .line {width: 120px;height: 5px;background-color: #1a93d0;margin:10px  0;border-radius: 10px;}
.master-title.center .line {margin: 10px auto;}
.master-title.white .line{background-color: #fff;} 



.con-title h2 ,.con-title h3 ,.con-title h4  {color: #000;}





/* .con-title.white h2 ,.con-title.white h3 ,.con-title.white h4{color: #fff;} 
.con-title.yellow h2 ,.con-title.yellow h3 ,.con-title.yellow h4{color: #eeda9f;} 
.con-title h2.yellow.block ,.con-title h3.yellow.block ,.con-title h5.yellow.block  {color: #000;background-color: #eeda9f;padding: 5px 15px;margin: 0;display: inline-block;font-weight: 600;} 
 */
.con-title.center {text-align: center;margin:10px auto ;}
.con-title h2 ,.con-title h3 ,.con-title h4{position: relative;} 
.con-title h3 {margin: 30px 0;display: inline-block;color: #1A93D0;}
.con-title h3::before {background: url(../images/con-title.svg) no-repeat;width: 50px;height: 50px;position: absolute;left: -80px;top: 55%;background-size: contain;content: "";transform: translateY(-50%);}
.con-title h3::after {background: url(../images/con-title.svg) no-repeat;width:50px;height: 50px;position: absolute;right: -80px;top: 55%;background-size: contain;content: "";transform: translateY(-50%) scaleX(-1);}









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); }

 */







/* 主視覺 */
header#visual {position: relative;width: 100%;height: 100vh;  overflow: hidden;background-color: #57C2E7;z-index: 99;
}
header#visual .header-title {width:60%;margin: 10px auto; position: relative;}
header#visual .header-title h1 {position: absolute;z-index: -999;top: 0;left: 0;opacity: 0;}
header#visual .header-title h1 span {font-size: 3rem;font-weight: 600;}
header#visual .header-title > img {width: 100%;}

header#visual .header-photo {width: 30%;margin: 0 auto;}
header#visual .header-photo img{width: 100%;}



/* header#visual .header-video {width: 50%;margin: 0 auto;position: absolute;top: 65%;left: 40%;transform: translate(-50%,-50%);z-index: -1;}
header#visual .header-video video {width: 85%;position: absolute;bottom: 5%;left: 0;filter: brightness(.85)  contrast(1.5);} */
header#visual .header-video {width: 50%;margin: 0 auto;position: absolute;bottom:5%;left: 45%;transform: translate(-50%,0%);z-index: -1;}
header#visual .header-video img {width: 90%;position: absolute;bottom:0%;left: 0;filter: brightness(.85)  contrast(1.5);z-index: 1;}
header#visual .header-video .door {width: 35%;right:0%;bottom:0%;position: absolute;}
header#visual .header-video .door img{width: 100%;}
 
header#visual::before {content: ""; position: absolute;bottom:0%;width: 100%;height: 200px;left: 0;background:url(../images/bg-extend-01.svg) bottom center no-repeat;background-size: 100%;z-index: 99;}





section#ready {position: relative;padding: 60px 0 80px;margin: -50px 0 0;}
section#ready .box-g {margin: 80px 0 0;}
section#ready .box-g .master-title {margin:10px 0 80px;}
section#ready .box-g .box{border: 1px solid #c4d9e3;border-radius: 20px;padding: 70px 20px 20px;position: relative;margin: 20px 0;min-height: 380px;}
section#ready .box-g .box::before{content: "";position: absolute;transform:translate(-50%,-50%);left: 50%;width: 100px;height: 110px;background: url(../images/ready-icon.svg) center no-repeat;background-size: cover;top: 0;}

section#ready .box-g .box h5 {color: #1fa5d2;text-align: center;font-size: 1.1rem;}
section#ready .box-g .box h4 {text-align: center;font-size: 1.2rem;font-weight: 600;}
section#ready .box-g .box p {   text-align: justify;         /* 左右對齊 */
  text-justify: inter-ideograph; /* 中文友好字距分配 */
  line-break: strict;          /* 嚴格中文斷行規則 */
  word-break: break-word;      /* 必要時才斷字，不亂切英文 */}
section#ready .box-g .box p:last-child{text-align-last: left; }
section#ready .box-g .box ul {padding: 0 0 0 30px;}
section#ready p span {background: linear-gradient(to bottom, #fff59700 40%,#fff597 60%);}







section#choose {position: relative;background-color:#F5F5F5;}
section#choose ul {margin: 20px 0 0;width: 50%;}
section#choose ul li{margin: 10px 0;font-size: 1.25rem;}
section#choose ul li::marker{color: #1a93d0;}
section#choose .text-flex {display: flex;align-items: center;}
section#choose .text-flex .con-btn{border: 2px solid #1A93D0;padding: 20px 60px;font-size: 1.4rem;margin: 0 auto;border-radius: 30px;transition: all .3s ease-in;}
section#choose .text-flex a {margin: 0;padding: 0;display: inline-block;color: #1A93D0;text-decoration: none;}
section#choose .text-flex a:hover .con-btn{background-color: #1A93D0;color: #fff;} 











:root { --brand:#fff597; --t1: .9s; --gap: .15s; } /* t1=外圈時間，gap=接續間隔 */

.tick-svg { display:inline-block;  width: 25px;   /* 原本可能 48px 或更大 */
  height: 25px; }
.ring, .tick {
  fill: none;
  stroke: var(--brand);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  /* 先把線「藏起來」 */
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

/* 外圈粗細、動畫 */
.ring { 
  stroke-width: 2;
  transition: stroke-dashoffset .8s var(--t1) ease;
}

/* 勾勾粗細、動畫（延遲到外圈畫完再開始） */
.tick {
  stroke-width: 2;
  transition: stroke-dashoffset .8s ease calc(var(--t1) + var(--gap));
}

/* 進場時觸發：外圈→勾勾 依序畫出 */
.tick-svg.is-inview .ring,
.tick-svg.is-inview .tick { stroke-dashoffset: 0; }

/* （可選）若要有白底的內圈視覺，可加一層背景圓 */
.tick-bg { fill:#fff; }

/* 尊重使用者：減少動畫就直接顯示完成態 */
@media (prefers-reduced-motion: reduce) {
  .ring, .tick { transition:none; stroke-dashoffset:0; }
}

/* 進場時把 offset 從 1 推到 0，就像被畫出來 */
.js-tick.is-inview .tick { stroke-dashoffset: 0; }

/* 無動畫偏好時尊重使用者 */
@media (prefers-reduced-motion: reduce) {
  .tick { transition: none; stroke-dashoffset: 0; }
}




section#teacher{background-color: #1a93d0;}
section#teacher .text p , section#teacher .text ul li{color: #fff;}
section#teacher .photo {width: 90%;margin: auto;}
section#teacher .photo img{width: 100%;}
section#teacher .item-g {margin: 20px 0;}
section#teacher .item-g .item-flex{background-color: rgba(3, 92, 147, 0.6);border-radius: 5px;width: 100%;padding: 8px 30px;margin:10px auto;display: flex;align-items: center;}
section#teacher .item-g .item-flex .icon {margin: 0 10px 0 0;}

section#teacher h5 {margin: 0;font-size: 1.15rem;color: #fff;}














section#lecture {position: relative;background-color:#e6f5fa;padding: 80px 0;}
section#lecture .box-g.get {margin: 0 0 40px;}
section#lecture .box-g.get .box {text-align: center;} 
section#lecture .box-g.get .box .icon{width: 200px;margin: 0 auto 20px;} 


section#lecture .item-g.discount {margin: 150px 0 40px;}
section#lecture .item-g.discount .item-flex {border: 2px solid #1a93d0;border-radius: 20px;display: flex;align-items: center;padding: 30px;min-height:300px;background-color: #fff;justify-content: space-between;}
section#lecture .item-g.discount .item-flex .icon {width: 28%;text-align: center;}
section#lecture .item-g.discount .item-flex .icon img{width: 100px;margin: 0 0 20px;}
section#lecture .item-g.discount .item-flex .icon h4 {color: #000;font-weight: 600;}
section#lecture .item-g.discount .item-flex .text h5 span{background: linear-gradient(to bottom, #fff59700 40%,#fff597 60%);font-weight: 600;color: #eb2a2a;font-size: 1.5rem;}
section#lecture .item-g.discount .item-flex .text {width: 70%;}







section#info {position: relative;background-color:#e6f5fa;padding: 40px 0 150px;}

section#info .box.info {   background-color: #57C2E7;
  aspect-ratio: 1 / 1; /* 永遠保持 1:1 */
  border-radius: 50%;
  width: min(90vw, 600px); /* 隨畫面縮放，但不超過 600px */
  margin: 0 auto;
  border: 10px solid #ffffff90;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;z-index: 1;animation: cir 1.5s ease-in infinite;}


section#info .box.info ul {list-style: none;padding-left: 0;}
section#info .box.info ul li {color: #fff;font-size: 1.2rem;} 
section#info .box.info ul li span {background: linear-gradient(to bottom, #fff597 40%,#fff597 60%);padding: 2px 15px;margin: 20px 0 ;display: inline-block;}

section#info .box.info .photo {position: absolute;bottom:-25%;left: 50%;transform: translate(-50%,0%);width: 40%;z-index:100;}


section#info::after {content: ""; position: absolute;bottom:-200px;width: 100%;height: 200px;left: 0;background-size: 100%;z-index: 99;background:url(../images/bg-extend-02.svg) top center no-repeat;}
@keyframes cir {
  0% {
    border: 20px solid #ffffff99;
  }
  100% {
      border: 10px solid #ffffff7d;
  }
}
section#info .con-btn {background-color: #FFF597;padding: 5px 30px;border-radius: 30px;font-size: 1.2rem;}
section#info a {color: #000;display: block;text-decoration: none;}
section#info a:hover  .con-btn{background-color: #fffacf;}





/* 按鈕*/ 
section#BTN {padding: 150px 0 100px;background-color: #1A93D0;position: relative;}





/* 按鈕*/ 
section#form {padding: 150px 0 100px;background-color: #1A93D0;position: relative;}
section#form p{color: #fff;font-weight: 300;}
section#form .master-title h3 {font-size: 2rem;}


section#form h4 {font-size: 1.25rem;color: #fff;}
div.Form ul{width: 423px;padding: 10px 21px;list-style: none;clear: both;background: #fff;border-radius: 5px;display: block;margin:20px auto 0 auto;box-shadow: 0 0 20px rgb(0 0 0 / 30%);z-index: 9999;position: relative;}
div.Form ul li{margin: 12px 0;border: 1px solid #ced4da;border-radius: 0.25rem;text-align: center;}
div.Form ul li input{width: 100%;height: 45px;border:0;border-radius: 8px;padding: 0 12px;font-size: 18px;}
div.Form ul li.send input{background: #DB6F68;color: #FFF;font-size: 22px;cursor: pointer; transition: 0.2s;}
div.Form ul li.send input:hover{background: #000000;}
div.Form ul li.send{border: 0;}


div.Form ul li.area{background: #fff;border-radius: 8px;padding:10px 10px 0;}
div.Form ul li.area p{font-size: 16px;text-align: left;padding: 0;margin: 0 0 5px;color: #000 !important;font-weight: 400;}
div.Form ul li.area input{width: auto;height: auto;padding: 0;margin-right: 2px;}
div.Form ul li.area label{margin-right: 5px;font-size: 15px;}


div.Form ul li.no-title { margin: 12px 0 20px; border:0 solid #ced4da; text-align: center; }
div.Form ul li.no-title h5 {font-size: 1.4rem;}



/* form 送出*/
.thx{ 
    background:#232323;position: fixed;width:600px;
	height:220px;z-index:9999;
	left:50%;
	top:50%;
	margin-left:-300px;
    margin-top:-100px;
    font-size: 12px;
    padding-top: 70px;
}
.thx a {color: #232323;text-decoration: none;background-color: transparent;
    -webkit-text-decoration-skip: objects;text-align: center;margin-left: 250px;font-size: 22px;background: #f9d302;padding: 10px 30px;}

.thx p {color: #FFF;text-align: center;}




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



}

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

}

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

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

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



}


@media(max-width:991px){


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

    header#visual { height:500px; padding-bottom: 150px;}
    div.EventAD { width: 120px; }
    div.EventAD { width: 150px; }
    header#visual .header-title { width: 85%; }

    section#ready .box-g .box h4 { font-size: 1.2rem; }



    section#info .box.info .photo { bottom: -10%; width: 50%; }
}


@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 h2 { font-size: 1.7rem; }
    .con-title h3 { font-size: 1.4rem; }
    .con-title h3::before {width: 30px;height: 30px;left: -50px;top: 55%;;transform: translateY(-50%);}
    .con-title h3::after {width:30px;height: 30px;right: -50px;top: 55%;;transform: translateY(-50%) scaleX(-1);}



    div.EventAD { display: none;}



    header#visual { height: 400px; }
    header#visual .header-title { width: 98%; }
    header#visual .header-video { width: 60%; }
    section#ready .box-g .box { padding: 70px 20px 20px; min-height: auto; margin: 0 0 80px;}
   



    section#choose .text-flex ul {width: 100%;}
    section#choose .text-flex {flex-direction: column;}
    section#choose .text-flex .con-btn{margin: 20px 0;}

   
   
   
    section#lecture .box-g.get .box { margin: 0 auto 20px; }
    section#lecture .item-g.discount .item-flex { align-items: center; padding: 20px; margin: 0 auto 20px; }


    section#info .box.info .photo { bottom: -20%; width: 80%; }


  section#lecture .item-g.discount .item-flex .text { width: 60%; }
  section#lecture .item-g.discount .item-flex .icon { width:38%; }

    div.Form ul{width: 100%;}

section#form .master-title h3 {font-size: 1.8rem;}


}












@media(max-width: 575px){
    .container { padding: 15px; }
      header#visual { height: 300px; }
      section#lecture .box.info .photo { bottom: -4%; }

/* form 送出*/
.thx{ width:320px; left:50%; top:50%; margin-left:-160px; }
.thx a {margin-left: 114px;}


}