/* --- CSS 重置與變數 --- */
:root {
    --primary: #ff2c6f; 
    --primary-hover: #ff558b; 
    --secondary: #18416E; 
    --slate-100: #e5e8ef;
    --slate-200: #ccd3e0;
    --slate-300: #a6c0da;
    --slate-400: #9eb8d4;
    --slate-500: #8494a4;
    --slate-600: #4c5064;
    --slate-700: #0E152E;
    --slate-800: #080c1b;
    --slate-900: #17202a;
    --contrast-100:#f8fafc;
    --contrast-200:#ecf2f6;
    --contrast-300:#b1bfc9;
    --contrast-400:#afd8f2;
    --contrast-500:#5EB3E9;
    --text-500:#475569;
    --red:#e71c25;
    --white: #ffffff;
    --black: #000000;
    --font-sans: "Noto Sans TC", "微軟正黑體", Arial, sans-serif;
    --font-serif: "Noto Serif TC", "微軟正黑體", Arial, sans-serif;
    --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    --text-border-8: 8px  8px 0 #fff, -8px -8px 0 #fff, 8px -8px 0 #fff, -8px  8px 0 #fff,
     0px  8px 0 #fff, 0px -8px 0 #fff, 8px  0px 0 #fff, -8px  0px 0 #fff;
    --text-border-2: 3px  3px 5px #0000004d, -3px -3px 10px #0000004d, 3px -3px 5px #00000099, -3px  3px 10px #0000004d,
     0px  3px 5px #0000004d, 0px -3px 10px #00000073, 3px  0px 5px #0000004d, -3px  0px 10px #0000004d; 
     
}



img {width: 100%;}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-sans); background-color:#ebeff2; overflow-x: hidden; line-height: 1.5; }

::selection { background-color: #ff2c6f; color: white; } 
section h1,section h2,section h3,section h4,section h5,section h6,section p,section span,section a{position: relative;z-index: 999;color: var(--text-700);}
section a:hover {color: var(--primary-hover);}
h1, h2, h3, h4, h5, h6 { font-weight: 600; }

section p,section li,section table tr td{color: var(--slate-600);font-size: 1.1rem;line-height: 1.7;font-weight: 400;}




/* 輪播 */
.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 .container{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{position: relative;max-width:1280px;}


/* 大小標題共用 */
.master-title {margin: 0 0 40px;}
.master-title.center {margin: 0 auto 40px;}
.master-title h2 {font-weight: 900;display: inline-block;letter-spacing: .05em;color:  var(--slate-700);;}



.text-gradient {
    background: linear-gradient(to right, #ff4b78, #946feb);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;margin: 0 5px;
}

.master-title h2 br {display: none;}
.master-title span {color: var(--primary);}
.master-title p {margin: 0;font-size: 1.2rem;}
.master-title.white h2 {color: var(--white);}
.master-title.white p {color: var(--slate-100);}
.master-title.white .bg-w {background-color: #fff;color: var(--slate-700);padding: 0 18px;border-radius: 5px;}
.master-title.center {text-align: center;} 
.master-title .line {width: 150px;height: 5px;border-radius: 30px; background: linear-gradient(to right, #ff4b78, #946feb);margin: 0 auto;}


/* 主視覺 */
header#visual { position: relative; width: 100%; height: 90vh;background: radial-gradient(circle at 100% 10%, #8540b4 , #562577 3px, #0e152e 40%, #0e152e 60%);padding:80px 60px 30px;}

header#visual .header-logo {position: absolute;top: -120px;left: 0;width: 250px;z-index: 999;}

header#visual .container-fluid {max-width: 92%;position: relative;}
header#visual .header-title {margin: 100px 0 20px;}
header#visual .header-title h1 {display: inline-block;margin: 0 0 15px; color:  #fff;font-size: 2.5rem;position: relative;z-index: 999;text-shadow: var(--text-border-2);line-height: 1.6;}
header#visual .header-con {width: 60%;position: relative;z-index: 999;background-color: #ffffffc2;border-radius: 0.5rem;overflow: hidden;}
header#visual .header-con h2{font-size: 3rem;display: inline-block;font-weight: 700;background-color: var(--red);padding: 8px 20px;letter-spacing: .05rem;color: #fff;}
header#visual .header-con p{color: var(--slate-700);font-size: 1.4rem;font-weight: 300;padding: 15px;}
header#visual .header-photo {position: absolute;right: 0;top:-135px;width: 46%;}

section#lesson {background:linear-gradient(to bottom,#0E152E 3% ,#0E152E 3%,#EBEFF2 3%,#EBEFF2 100%) #ebeff2;position: relative;padding: 1px 0 100px;}


section#lesson .data-content  .data-box {background-color: #fff;border-radius: 1.2rem;padding: 20px;box-shadow: var(--shadow-lg);width: 300px;width: 100%;margin: 0 auto 20px;text-align: center;font-size: 1.25rem;flex: 1; }
section#lesson .data-content .data-box .counter-value {font-size: 2.5rem;font-weight: 900;}
section#lesson .data-content .data-box .icon {width: 80px;height: 80px;border-radius: 100%;display: flex;align-items: center;justify-content: center;margin: 0 auto;}
section#lesson .data-box-item {display: flex; flex-direction: column;}
section#lesson .data-box-item .icon i{width: 40px;height: 40px;}
section#lesson .data-box-item:nth-child(1) .icon {background-color: #feedf2;}
section#lesson .data-box-item:nth-child(1) .icon  i {color: #C01B44;}

section#lesson .data-box-item:nth-child(2) .icon {background-color: #F5E8F1;}
section#lesson .data-box-item:nth-child(2) .icon  i {color: #9D2179;}

section#lesson .data-box-item:nth-child(3) .icon {background-color: #F0E9F3;}
section#lesson .data-box-item:nth-child(3) .icon  i {color: #6D288D;}

section#lesson .data-box-item:nth-child(4) .icon {background-color: #EDE9F4;}
section#lesson .data-box-item:nth-child(4) .icon  i {color: #4A2C91;}

section#lesson .data-box-item:nth-child(5) .icon {background-color: #F5E8F1;}
section#lesson .data-box-item:nth-child(5) .icon  i {color: #9D2179;}

section#lesson .data-box-item:nth-child(6) .icon {background-color: #F0E9F3;}
section#lesson .data-box-item:nth-child(6) .icon  i {color: #6D288D;}







section#lesson .btn-line {width:80%;background: linear-gradient(to right , #FF2C6F, #FF2C6F);border-radius: .5rem;overflow: hidden;margin: 80px auto 20px;}
section#lesson .btn-line ul {list-style: none; padding: 0; margin: 0; display: flex; 
    justify-content:space-around;}
section#lesson .btn-line ul li {color: #fff;font-size: 1.35rem;width: 25%;text-align: center;border-right: 1px solid rgba(255, 255, 255, 0.5);}
section#lesson .btn-line ul li:last-child {border-right: none;}
section#lesson .btn-line ul li a {color: #fff;width: 100%;display: block;padding: 8px 15px;} 
section#lesson .btn-line ul li a:hover {text-shadow: 0 0 20px rgba(255, 255, 255, 0.8),0 0 5px rgba(255, 157, 195, 0.8);text-decoration: none;color: #ffecd7;background-color: var(--primary-hover);}

section#lesson .lesson-content {margin: 0 ;padding: 5% 12%;flex-wrap: wrap;}
section#lesson .lesson-content:nth-child(even) {background-color: #f6f9fb;} 


section#lesson .lesson-content .lesson-content-title {width: 25%;position: sticky;top: 20px;align-self: flex-start;}
section#lesson .lesson-content .lesson-content-title h5 {color: #FF2C6F;border-bottom:1px solid #caced3;padding: 0 0 10px;}



section#lesson .lesson-content .lesson-content-title .photo{width: 250px;height: 250px;border-radius: 1.25rem;margin: 0 0 20px;background-size: cover;position: relative;}
section#lesson .lesson-content .lesson-content-title .icon{background-color: #fff;width: 50px;height: 50px;border-radius: .5rem;bottom: 15px;left: 15px;position: absolute;}
section#lesson .lesson-content .lesson-content-title .icon svg {stroke: #FF2C6F;width: 32px;height: 32px;transform: translate(-50%,-50%);left: 50%;top: 50%;position: relative;}
     section#lesson .lesson-content .lesson-content-title  .lesson-content-title-text p{font-size: .95rem;}





section#lesson .lesson-content .lesson-content-item {width: 72%;transition: all .3s ease-in;}

section#lesson .lesson-content .lesson-content-item .item {background-color: #fff;border-radius: 1.2rem;padding:0;box-shadow: var(--shadow-lg);width: 300px;width: 100%;margin: 0 auto 30px;overflow: hidden;transition: all .3s ease-in;}
section#lesson .lesson-content .lesson-content-item .item h5 {background-color: #20282f;color: #fff;padding: 10px 20px;transition: all .3s ease-in;line-height: 1.5;}
section#lesson .lesson-content .lesson-content-item .item .text {padding:20px 20px 20px 0;}
section#lesson .lesson-content .lesson-content-item .item img {width: 120px;margin: 0 auto 0;}

section#lesson .lesson-content .lesson-content-item .item a {display: block;}
section#lesson .lesson-content .lesson-content-item .item a:hover {text-decoration: none;}

section#lesson .lesson-content .lesson-content-item .item:hover {box-shadow: var(--shadow-md);transform: translateY(2px);}







section#lesson .lesson-content .lesson-content-item.path {width: 100%;}
section#lesson .lesson-content .lesson-content-item.path .item {width: 100%;}
section#lesson .lesson-content .lesson-content-item.path .item:hover {transform: translateY(0);box-shadow: var(--shadow-lg);}
section#lesson .lesson-content .lesson-content-item.path .item h6{padding: 20px;}
section#lesson .lesson-content .lesson-content-item.path .item svg a:hover g  {opacity: .7;} 
section#lesson .lesson-content .lesson-content-item .item:hover h5 {background-color:var(--primary);color: #fff;}
section#lesson .lesson-content .lesson-content-item .item p {font-size: 1.05rem;}
section#lesson .lesson-content .lesson-content-item .item p.im {background-color: #fff5f5;padding: 5px 8px;border-radius: .5rem;border: 1px solid #ffd6d6;display: inline-block;color: #C01B44;margin: 0;font: 1rem sans-serif;}






section#UUU {background: radial-gradient(circle at 100% 10%, #8540b4 , #562577 3px, #0e152e 40%, #0e152e 60%);}
section#UUU .box {background-color: #192232de;border-radius: .5rem;padding: 20px;border: 1px solid var(--slate-600);transition: all .3s ease-in;}
section#UUU .box .box-title {margin: 40px 0 20px;}

section#UUU .box:hover {border: 1px solid var(--slate-500);}
section#UUU .box h5{color:#fff;margin: 0;}
section#UUU .box p{color: var(--slate-200);font-size: 1.05rem;}
section#UUU .box p span{color:#ffe8ba;font-weight: 600;}
section#UUU .box .icon {width: 45px;height: 45px;border-radius: .25rem;display: flex;align-items: center;justify-content: center;}
section#UUU .box .icon i{color: #fff;font-size: 1.5rem;}
section#UUU .box:nth-child(1) .icon {background: linear-gradient(to right,#A42070,#91237E);}
section#UUU .box:nth-child(2) .icon {background: linear-gradient(to right,#802686,#582B90);}
section#UUU .box:nth-child(3) .icon {background: linear-gradient(to right,#27254C,#295CE0);}



section#experience {background-color: #ebeff2;}
section#experience a {color: var(--slate-600);display: flex;
    flex-direction: column;
    height: 100%;}
section#experience a:hover {text-decoration: none;}



section#experience .box {background:url(../images/icon-comma.svg), #fff; background-size: 60px;background-position: 95% 20px; background-repeat: no-repeat; border-radius: 1.2rem;padding: 20px;box-shadow: var(--shadow-lg);font-size: 1.25rem;transition: all .3s ease-in;flex: 1;display: flex;
    flex-direction: column;}
section#experience .box .name .photo {width: 80px;height: 80px;border-radius: 100%;overflow: hidden;}
section#experience a:hover .box {box-shadow: var(--shadow-sm);transform: translateY(2px);}
section#experience .box p {margin: 20px 0 0;font-size: 1.05rem;}
section#experience h5 {background-color: #f5f6ff;padding: 5px 8px;border-radius: .5rem;border: 1px solid #e2d6ff;display: inline-block;color: #4d1bc0;margin: 0;font: .95rem sans-serif;}
















/* 按鈕*/ 
section#BTN {position: relative;padding: 0 0 60px;}
section#BTN  .btn h5{margin: 0;padding: 0; font-weight: 600;font-size: 1.4rem;transition: all ease 200ms;display: inline-block;text-wrap: wrap;color: #fff;}
section#BTN  .btn h5 i {color: #ffed85;}
section#BTN  a:hover h5 {color: #fff;}
section#BTN  a:hover h5 i{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;padding: 10px;border-radius: 10px;background-color: var(--primary);color: #fff; }
section#BTN a:hover{background-color: var(--primary-hover);text-shadow: 0 0 20px rgba(255, 255, 255, 0.8),0 0 5px rgba(255, 157, 195, 0.8);}
section#BTN .btn {padding: 0;}










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


}

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


}

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

    .container{position: relative;max-width:1150px;}
    header#visual { padding:30px 15px; height: auto;}
    header#visual .header-photo { position: absolute; right: 0; top: 0; width: 50%; }
    header#visual .container-fluid { max-width: 98%; }

    section#lesson .btn-line {width:92%;}
    section#lesson .lesson-content { padding: 5% 30px; }

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

     nav ul li { font-size: 1.1rem; }
     header#visual .header-title { width: 100%;margin: 150px 0 20px; }
     header#visual .header-title h1 {font-size: 2.3rem;letter-spacing: .25rem;}

     header#visual .header-con { width: 100%; }
     header#visual .header-photo { top: -150px; width: 55%; }
}


@media(max-width:991px){

    section#competency .box-content .box .photo { width: 60%;margin: 0 auto 30px; }
    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: 2rem;line-height: 1.5;margin: 5px 0 0;}
    .master-title p {font-size: 1.2rem;}
    .master-title h2 br {display: block;}

    
    
    section {padding: 60px 0;}
    section p, section li, section table tr td { font-size: 1.05rem; }
  
    header#visual .header-logo { width: 215px; }
    header#visual .header-title h1 { font-size: 1.6rem;display: inline-block; text-align: justify; }
    header#visual .header-con p { font-size: 1.3rem; text-shadow: 0 0 0 rgba(255, 255, 255, 0),0 0 0 rgba(255, 157, 195, 0); }
    header#visual .header-con h2 { font-size: 2.2rem; }




    header#visual .header-title br {display: none !important;}
    section#lesson {background:linear-gradient(to bottom,#0E152E 8% ,#0E152E 8%,#EBEFF2 8%,#EBEFF2 100%) #ebeff2;}
    section#lesson .btn-line ul { flex-direction: column; }
    section#lesson .btn-line ul li{ width: 100%;font-size: 1.2rem; border-right: 0px solid rgba(255, 255, 255, 0.5); border-bottom: 1px solid rgba(255, 255, 255, 0.5);}
    section#lesson .lesson-content .lesson-content-title { width: 100%; position: relative; top: 20px; align-self: flex-start;display: flex;margin: 0 0 20px; }
    section#lesson .lesson-content .lesson-content-title  .lesson-content-title-text {width: 60%;}
    section#lesson .lesson-content { padding: 5% 30px; }
    section#lesson .lesson-content .lesson-content-title .photo{width: 120px;height: 120px;margin: 0 20px 20px 0;}
    section#lesson .lesson-content .lesson-content-title .icon { width: 40px; height: 40px; border-radius: .25rem; bottom: 15px; }
    section#lesson .lesson-content .lesson-content-title .icon svg { width: 25px; height: 25px; }
    section#lesson .lesson-content .lesson-content-item { width: 100%; }
    section#lesson .lesson-content .lesson-content-item .item img { width: 100px; margin: 20px 20px 0; }
  
  
  
  
  
  
  
    section#experience .box { margin: 0 0 20px; }

  
  
  
  
  
  
  
    section#BTN a { width:100%;margin: 0 0 40px;}













}












@media(max-width: 575px){
    .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; }


}