*{font-family: 'Noto Sans TC','微軟正黑體',sans-serif; }
body{ font-family: 'Noto Sans TC','微軟正黑體',sans-serif;background: url(../images/bg.jpg) center / 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: #000;}
section p,section li,section table tr td{font-weight: 400;line-height: 1.8;color: #000;font-size: 1.12rem;}


.photo img{width: 100%;}

/* 輪播 */
.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: 1em; display: block; }

.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%;}  

.container{max-width:1350px;}

.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%;}  

#fluid { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; color: hsla(180, 100%, 50%, 0.325); }




/* 大小標題共用 */
.master-title {margin:20px 0;}
.master-title.center {text-align: center;margin:10px auto 40px;}
.master-title h2 {font-weight: 700;display: inline-block;position: relative;letter-spacing: .05em;margin: 0 0 20px;position: relative;}
.master-title p {font-size: 1.3rem;font-weight: 500;}



thead th {font-size: 1.25rem;}
table tbody tr {border-bottom: 1px solid #cacaca;}
table tbody tr:last-child {border: none;}
table thead.border-color-1  {border-bottom: 5px solid rgba(88, 125, 88, 0.6);}
table thead.border-color-2  {border-bottom: 5px solid rgba(126, 169, 144, 0.6)}



section .con {margin: 0 0 120px;}

/* 主視覺 */
/* header#visual {position: relative;background:url(../images/header-bg.jpg) center  / cover; height: 100vh;display: flex;justify-content: center;align-items: center;} */
header#visual {
  position: relative;
  width: 100%;
  height: 100vh; /* 看你 banner 高度再調 */
  overflow: hidden;
  background: linear-gradient(130deg,#bbd6ff,#c395ff,#ffdaff,#82b4ff);
  background-size: 500% 500%;
  animation: bgFlow 10s ease-in-out infinite alternate;
}
header#visual .bg {background: url(../images/header-bg.png) center / cover;background-size: cover;   
  width: 100%;height: 100vh;
  display: flex;
  align-self: center;
  justify-content: center;}

header#visual .header-title {width: 80%;text-align: center;position: relative;z-index: 999;align-self: center;margin: 0 0;}
header#visual .header-title img {width:78%;}
header#visual .logo {width:180px;position: absolute;left: 20px;top: 20px;}



@keyframes bgFlow {
  0% { background-position: 0% 0%; }
  100% { background-position: 100% 100%; }
}

/* 光暈 */
header#visual::before,
header#visual::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100vh;
  border-radius: 50%;
  filter: blur(150px);
  opacity: .75;
  pointer-events: none;
}

/* A 漂浮 */
header#visual::before {
  background: radial-gradient(circle, rgba(255, 213, 252, 0.7), rgba(255,180,250,0));
  top: -25%;
  left: -20%;
  animation: lightA 10s ease-in-out infinite;
}

/* B 漂浮 */
/* header#visual::after {
  background: radial-gradient(circle, rgba(201, 226, 255, 0.7), rgba(170,210,255,0));
  bottom: -30%;
  right: -20%;
  animation: lightB 20s ease-in-out infinite alternate-reverse;
} */

@keyframes lightA {
  0% { transform: translate(0,0); }
  50% { transform: translate(30%, -20%); }
  100% { transform: translate(-10%, 10%); }
}

/* @keyframes lightB {
  0% { transform: translate(0,0); }
  50% { transform: translate(-30%, 25%); }
  100% { transform: translate(10%, -5%); }
} */







section#lesson {box-shadow: inset 0 10px 30px -10px rgba(18, 55, 148, 0.2);padding: 20px 0 60px;}
section#lesson p.im {color: #dd1259;margin: 0 0 10px;font-weight: 600;text-shadow: 0 0 10px #ffffffc7, 0 0 2px #ffffffec, 0 0 2px #ffffffec;}
section#lesson .sub-g {display: flex;justify-content: space-between;}
section#lesson .sub-g .sub{background-color: #fff;width: 32%;border-radius: 10px;margin: 0  0  20px;transition: all .3s ease-in;}
section#lesson .sub-g .sub:nth-child(1){background: linear-gradient(45deg,#E93B6E,#f58147);}
section#lesson .sub-g .sub:nth-child(2){background: linear-gradient(45deg,#2D8CFB,#8C53BE);}
section#lesson .sub-g .sub:nth-child(3){background:linear-gradient(45deg,#03cac0,#167ce2);}


section#lesson .sub-g .sub a {display: block;padding: 30px;text-align: center;text-decoration: none;}
section#lesson .sub-g .sub h3 {color: #fff;font-weight: 600;font-size: 1.5rem;}
section#lesson .sub-g .sub h3 span{background-color: rgba(255, 255, 255, 0.8);padding: 2px 15px;border-radius: 8px;margin: 0 0 10px 0 ;display: inline-block;}
section#lesson .sub-g .sub:nth-child(1)  h3 span{color:#EC5062 ;}
section#lesson .sub-g .sub:nth-child(2)  h3 span{color: #5176E3;}
section#lesson .sub-g .sub:nth-child(3)  h3 span{color: #09A3C8;}

section#lesson .sub-g .sub:hover {transform: translateY(10px);}







section#lesson .lesson-box-g {margin: 50px 0 0;}

section#lesson .lesson-box-g .lesson-box{width: 100%;position: relative;background-color: rgba(255, 255, 255, 0.25); box-shadow: -3px -3px 0px rgba(255,255,255,0.8),
  3px 3px 5px rgba(0, 0, 0, 0.2);border-radius: 10px;margin: 80px 0;}
section#lesson .lesson-box-g .lesson-box:nth-child(2){margin:80px 0 0;}
section#lesson .lesson-box-g .lesson-box:nth-child(3){margin:80px 0 0;}



section#lesson .lesson-box-g .lesson-box .lesson-con-title {width: 90%;text-align: center;padding: 30px;z-index:-1;border-radius: 0 0  10px 10px;position: relative;margin: 0 auto;transform: translateY(-5px);}
section#lesson .lesson-box-g .lesson-box .lesson-con-title h3 {color: #fff;font-weight: 600;}
section#lesson .lesson-box-g .lesson-box .lesson-con-title h3 span {background-color: rgba(255, 255, 255, 0.8);padding: 2px 15px;border-radius: 8px;margin: 0 6px 0 0 ;}

section#lesson .lesson-box-g .lesson-box .lesson-con-title p{margin: 0;}
section#lesson .lesson-box-g .lesson-box:nth-child(1) .lesson-con-title h3 span{color: #EC5062;}
section#lesson .lesson-box-g .lesson-box:nth-child(2) .lesson-con-title h3 span{color: #5176E3;}
section#lesson .lesson-box-g .lesson-box:nth-child(3) .lesson-con-title h3 span{color: #09A3C8;margin: 0 0 5px;display: inline-block;}




section#lesson .lesson-box-g .lesson-box .lesson-con-title  p {font-size: 1.15rem;color: #fff;text-align: left;}
section#lesson .lesson-box-g .lesson-box .sm-title {margin: 40px 0 0;}
section#lesson .lesson-box-g .lesson-box .sm-title h4{font-size: 1.6rem;}




section#lesson .lesson-box-g .lesson-box .lesson-box-con {background-color: rgba(255, 255, 255, 0.5);box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);   backdrop-filter: blur(12px);padding:0 30px 30px;margin: 20px 0 0;z-index: 99;border-radius: 10px;}







section#lesson .lesson-box-g .lesson-box:nth-child(1) .lesson-con-title  {background:linear-gradient(45deg,#E93B6E,#f58147);} 
section#lesson .lesson-box-g .lesson-box:nth-child(2) .lesson-con-title  {background:linear-gradient(45deg,#2D8CFB,#8C53BE);} 
section#lesson .lesson-box-g .lesson-box:nth-child(3) .lesson-con-title  {background:linear-gradient(45deg,#03cac0,#167ce2);} 


section#lesson .lesson-box-g .lesson-box:nth-child(1) .lesson-box-con .viden-con-flex ul li span {background-color: #ffcbfe; }
section#lesson .lesson-box-g .lesson-box:nth-child(2) .lesson-box-con .viden-con-flex ul li span {background-color: #bfefe5; }
section#lesson .lesson-box-g .lesson-box:nth-child(3) .lesson-box-con .viden-con-flex ul li span {background-color: #cbfffc; }





.video-flex {display: flex;align-items: center;flex-wrap: wrap;justify-content: center;}
.video-flex .video-item{width:32%;position: relative;cursor: pointer;margin: 20px 30px;filter: brightness(.9);transition: all .2s ease-in;border-radius: 5px;overflow: hidden;}
.video-flex .video-item:hover {filter: brightness(1.6);}
.video-flex .video-item a {display: block;}
.video-flex .video-item .play-icon{width:55px;height: 55px; position: absolute;background: url(../images/icon-play-1.png) center / cover;transform: translate(-50%,-50%);top: 45%;left: 50%;}
.video-flex .video-item:hover .play-icon{background: url(../images/icon-play-2.png)  center / cover;}
.video-flex .video-item img{width: 100%}


section#lesson .master-title h3 {margin: 10px auto;}
section#lesson .master-title h5 {color: #fff;}

section#lesson .lesson-box-g .lesson-box .lesson-box-con .lesson-item-g .lesson-item{padding: 15px;margin: 0 0 10px;transition: all .3s ease-in;cursor: pointer;}

section#lesson .lesson-box-g .lesson-box .lesson-box-con .lesson-item-g .lesson-item P {margin: 0;line-height: 1.6;font-size: 1rem;}
section#lesson .lesson-box-g .lesson-box .lesson-box-con .lesson-item-g .lesson-item a {display: block;text-decoration: none;}



section#lesson .lesson-box-g .lesson-box:nth-child(1)  .lesson-box-con .lesson-item-g .lesson-item  {background-color: rgba(251, 214, 224, 0.8);border-left:5px solid rgba(235, 182, 190, 0.8) ;}
section#lesson .lesson-box-g .lesson-box:nth-child(1)  .lesson-box-con .lesson-item-g .lesson-item:hover  {border-left:5px solid #EC4B65 ;}


section#lesson .lesson-box-g .lesson-box:nth-child(2)  .lesson-box-con .lesson-item-g .lesson-item  {background-color: rgba(196, 225, 251, 0.8);border-left:5px solid rgba(158, 193, 231, 0.8) ;}
section#lesson .lesson-box-g .lesson-box:nth-child(2)  .lesson-box-con .lesson-item-g .lesson-item:hover  {border-left:5px solid #4C79E7 ;}

section#lesson .lesson-box-g .lesson-box:nth-child(3)  .lesson-box-con .lesson-item-g .lesson-item  {background-color: rgba(211, 239, 240, 0.8);border-left:5px solid rgba(152, 212, 207, 0.8) ;}
section#lesson .lesson-box-g .lesson-box:nth-child(3)  .lesson-box-con .lesson-item-g .lesson-item:hover  {border-left:5px solid #09B1CA ;}






section#lesson .lesson-box-g .lesson-box:nth-child(1)  i  {color: #EC4B65 ;}
section#lesson .lesson-box-g .lesson-box:nth-child(2)  i  {color: #4C79E7 ;}
section#lesson .lesson-box-g .lesson-box:nth-child(3)  i  {color: #09B1CA ;}













/* 按鈕*/ 
section#BTN {position: relative;padding: 0 0 30px ;}
section#BTN  .btn h5{margin: 0;padding: 0; font-weight: 600;font-size: 1.25rem;transition: all ease 200ms;display: inline-block;color: #000;text-wrap: wrap;}
section#BTN  a:hover h5 {color: #fff;}
section#BTN a {  text-decoration: none;display: block;text-align: center; width:100%;font-size: 1.2rem;font-weight: 600;transition: all ease 200ms;margin: 0 auto 20px;text-align: center;background-color: transparent;border: 3px solid #373495;padding: 10px;border-radius: 10px;}
section#BTN a:hover{border: 3px solid #373495;;background-color: #2a2693e2;}


section#BTN .btn {padding: 0;}










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



}

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

}

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





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

     nav ul li { font-size: 1.1rem; }
     header#visual .header-title { width: 100%; }
    
    .video-flex .video-item { width: 44.8%; }
}


@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:0;height:600px; }
    header#visual .bg {background: url(../images/header-bg.png) center / cover; height: auto;height:600px;padding: 0;}
    header#visual .header-title  {width: 80%;margin: 0 0 50px;}
    header#visual .header-title img { width: 96%; }





    section#lesson .lesson-box-g .lesson-box .lesson-box-con .viden-con-flex { flex-direction: column; }
    section#lesson .lesson-box-g .lesson-box .lesson-box-con .viden-con-flex .text { width: 100%; }
    section#lesson .lesson-box-g .lesson-box .lesson-box-con .viden-con-flex .viden-con-g { width: 100%; }




  section#lesson .lesson-box-g { margin: 250px 0; }
  section#lesson .lesson-box-g:last-child { margin: 250px 0 0; }
  
  section#BTN a {  width: 400px;}

     
     
}


@media(max-width: 767px){
    .container { padding: 15px;max-width: 98%; }
 
    .title h3 { font-size: 1.6rem; }
    h2{font-size: 1.6rem;}
    nav {position: relative;padding: 0;box-shadow: none;}
    nav ul li img { width: 20px; }
    nav ul { flex-direction: column;max-width: 100%; }
    nav ul li { margin:10px 0; }
    .master-title h2 { font-size: 1.7rem; }
    .master-title h4 { font-size: 1.3rem; }
    .master-title h5 { font-size: 1.1rem;line-height: 1.8; }

    section p, section li, section table tr td { font-size: 1.05rem; }

    section {padding: 20px 0;}

    header#visual { height:auto; padding:0;height: 450px; }
    header#visual .bg {background: url(../images/header-bg-m.png) center / cover; height: auto;height:450px;padding: 0;}


    header#visual .header-title  {width: 100%;margin: 0 0 50px;}
    header#visual .header-title img { width: 96%; }

    section#lesson .sub-g {flex-direction: column;}
    section#lesson .sub-g .sub{width: 100%;}
    section#lesson .lesson-box-g:last-child { margin: 100px 0 0; }
    section#lesson .lesson-box-g .lesson-box .lesson-con-title { width:100%; padding: 15px; }
    section#lesson .lesson-box-g .lesson-box .lesson-con-title h3 {line-height: 1.8;}
    section#lesson .lesson-box-g .lesson-box .lesson-box-con { padding:0 15px 15px; }
    section#lesson .lesson-box-g { margin:180px 0; }


    .video-flex .video-item { width: 100%; }


    /* section#BTN .btn { width: 100%; } */
    section#BTN a { width: 100%;}




}












@media(max-width: 575px){
    .container { padding: 15px; }
    .title h3 { font-size: 1.6rem; }
    h2{font-size: 1.6rem;}
    h3{font-size: 1.3rem;}
    h4{font-size: 1.2rem;}
    h5{font-size: 1.1rem;}
    .title h4 { font-size: 1.3rem; }
   


}