/* --- CSS 重置與變數 --- */
:root {
    --primary: #DB4D4D; 
    --primary-hover: #f67777; 
    --secondary: #18416E; 
    --slate-100: #eff3f6;
    --slate-200: #c7d9e9;
    --slate-300: #a6c0da;
    --slate-400: #9eb8d4;
    --slate-500: #4471ba;
    --slate-600: #18416E;
    --slate-700: #25395E;
    --slate-800: #0f243a;
    --slate-900: #17202a;
    --contrast-100:#f8fafc;
    --contrast-200:#ecf2f6;
    --contrast-300:#b1bfc9;
    --contrast-400:#afd8f2;
    --contrast-500:#5EB3E9;
    --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; }
img {width: 100%;}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-sans); background-color: var(--slate-800); color: var(--slate-900); overflow-x: hidden; line-height: 1.5; }

/* ::selection { background-color: #e9c65e; 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(--slate-900);}
section a:hover {color: #7dc7f5;}
h1, h2, h3, h4, h5, h6 { font-weight: 600; }

section p,section li,section table tr td{color: var(--slate-900);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(--secondary);}
.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;} 



/* 主視覺 */
header#visual { position: relative; width: 100%; height: 100vh; overflow: hidden;  background: url(../images/header-bg.jpg) center;background-size: cover;}
header#visual h1 {color: var(--slate-700);font-weight: 900;font-size: 5rem;letter-spacing: .05rem;line-height: 1.25;margin: 10px 0 40px;}
header#visual h1 span {color:var(--primary);}
header#visual h2 {color: #fff;background-color: var(--contrast-500);display: inline-block;padding: 8px 15px;border-radius: 15px;font-size:1.8rem;}
header#visual .text-border-8 {text-shadow: var(--text-border-8);}
header#visual .header-flex {display: flex;justify-content:center;align-items: center;width: 100%;margin: 4% 0 0;}
header#visual .header-flex .header-title{width: 66%;padding:0 30px;} 
header#visual .header-flex .header-photo {width: 28%;padding:0 30px;animation: aibot 2.5s ease-in-out alternate infinite ;}
header#visual .header-flex .header-photo img {width: 100%;}

@keyframes aibot {
  0%{transform: translateY(-6%);}
  50%{transform: translateY(4%);}
  100%{transform: translateY(-4%);}
}

header#visual .header-flex .header-title .header-sub {background-color: #fff;margin: 30px 0;padding: 20px;border-radius: 8px;border: 1px solid #000;}
header#visual .header-flex .header-title .header-sub p {font-size: 1.25rem;margin: 0;}



section#use {background-color: var(--slate-800);padding: 50px 0;}
section#use .box-content p span ,section#use .box-content p , section#use .box-content h5{color: var(--white);}
section#use .box-content .icon {background-color: rgba(74, 98, 137, 0.3);padding: 15px;border-radius: 10px;}
section#use .box-content .icon.icon-box-lg svg { width: 30px; height: 30px; stroke:var(--contrast-500); }


section#competency {/* 順序：1. 圖片 (最上層) -> 2. 水平線 -> 3. 垂直線 -> 4. 底色 (最底層) */
  background: url("../images/bg-color-block.png") no-repeat top left, linear-gradient(rgba(200, 200, 200, 0.5) 1px, transparent 1px), /* 水平線 */ linear-gradient(90deg, rgba(200, 200, 200, 0.5) 1px, transparent 1px), /* 垂直線 */ #fff; background-size: auto, 40px 40px, 40px 40px, auto;padding: 250px 0 100px ;}
section#competency .photo {width:100%;}


section#competency .box-content .box:nth-child(1) .photo{background: url(../images/competency-person-01.jpg);background-size: cover;}
section#competency .box-content .box:nth-child(2) .photo{background: url(../images/competency-person-02.jpg);background-size: cover;}
section#competency .box-content .box:nth-child(3) .photo{background: url(../images/competency-person-03.jpg);background-size: cover;}
section#competency .box-content .box:nth-child(4) .photo{background: url(../images/competency-person-04.jpg);background-size: cover;}



section#competency .box-content .box .photo { min-height: 380px; position: relative; overflow: hidden; }
section#competency .box-content .box .photo .text { position: absolute; bottom: 0; left: 0; width: 100%; display: flex; flex-direction: column; transition: transform .4s ease-out; }
section#competency .box-content .box .photo .text h5 { background-color: #5eb4e9d3; width: 100%; margin: 0; padding: 8px; color: #fff; text-align: center; }
section#competency .box-content .box .photo .text p { padding: 0 15px; background-color: #ffffffc9; margin:0; }
section#competency .box-content .box .photo .text { transform: translateY(0); }

section#competency .box-content .box .photo .text p { max-height: 0; opacity: 0; overflow: hidden; transition: all .4s ease-out; }
section#competency .box-content .box .photo:hover .text p { max-height: 300px; opacity: 1; padding: 8px 15px; }



section#possess {background:url(../images/bg-color-block-2.png), #EBECF0;background-size: 100%;background-repeat: no-repeat;background-position: left bottom;  }
section#possess .photo {background-color: #9cadcb38;   backdrop-filter: blur(2px); padding: 60px;border-radius: 8px;width:70%;margin: 40px auto 20px;}
section#possess .photo img {width: 100%;}




section#lesson {background-color: var(--slate-800);border-radius:.75rem ;overflow: hidden; box-shadow: var(--shadow-xl);}
section#lesson .lesson-box {color: #fff;}
section#lesson .lesson-box h2 {background-color: #fff;color: var(--slate-700);padding: 8px 18px;border-radius: 5px;transition: all .3s ease-in;margin: 0;}
section#lesson .lesson-box a.lesson-link {transition: all .3s ease-in;display: block;width: 50%;margin: 0 auto 20px;text-align: center;}
section#lesson .lesson-box a.lesson-link:hover {text-decoration: none;}
section#lesson .lesson-box a.lesson-link:hover h2 {background-color: var(--contrast-500);color: #fff;}


section#lesson .lesson-box p , section#lesson .lesson-box h3 {color: #fff;}

section#lesson .lesson-content-group {display: flex; }
section#lesson .lesson-content-group .lesson-content { padding: 30px; flex: 1;border-right: 1px solid #fff;}
section#lesson .lesson-content-group .lesson-content:last-child {border-right: none;}
section#lesson .lesson-content-group .lesson-content .icon {width: 80px;}
section#lesson .lesson-content-group .lesson-content .icon svg{width: 50px; height: 50px; stroke:var(--contrast-500); }




section#lesson .discount-content-group {padding:30px 30px 15px;border: 6px solid var(--contrast-500);border-radius: 10px;margin: 40px 0;}
section#lesson .discount-content-group h3 {color: #fff;margin: 0 0 20px;text-align: center;letter-spacing: .2rem;}
section#lesson .discount-content-group h5 ,section#lesson .discount-content-group ul li,section#lesson .discount-content-group p{color: #fff;}
section#lesson .discount-content-group  del {color: #fff;font-size: .95rem;font-weight: 300;text-decoration:none;}
section#lesson .discount-content-group .discount-content {display: flex;justify-content: space-between;align-items:stretch ;}




section#lesson .discount-content-group .discount-content .discount-content-list{ padding: 30px;border-radius: 10px;margin: 0 0 20px; }
section#lesson .discount-content-group svg {transform: translateY(-3px); stroke:var(--contrast-500);}
section#lesson .discount-content-group ul {margin: 20px 0 0 !important;font-size: 1.125rem;
border-radius: 8px;margin: 0 0 8px;}
section#lesson .discount-content-group ul li {margin: 0 0 10px;}
/* section#lesson .discount-content-group ul li::marker {color: var(--contrast-500);} */
section#lesson .discount-content-group h5 {margin: 20px 0 0;}
section#lesson .discount-content-group ul li span {color:#fbda80;font-size: 1.25rem;font-weight: 600;}
section#lesson .discount-content-group ul li b {}



section#lesson .exam-content-group {margin: 60px 0;}
section#lesson .exam-content-group .exam-content ul {padding: 0;margin: 0;list-style: none;}
section#lesson .exam-content-group .exam-content ul > li {border-bottom: 1px solid #7f7f7f7b;color: #fff;padding: 8px 16px;}
section#lesson .exam-content-group .exam-content ul > li:last-child {border-bottom: none;}
section#lesson .exam-content-group .exam-content ul > li span:nth-child(1) {color: var(--slate-400);font-weight: 600;}
section#lesson .exam-content-group .exam-content ul > li span:nth-child(2) {color: var(--white);font-weight: 300;}
section#lesson .exam-content-group  h3 {color: #fff;margin: 0 0 20px;}
section#lesson .exam-content-group .exam-content .exam-content-list.renew {background-color: #677ba95e;padding: 30px;border-radius: 10px;}
section#lesson .exam-content-group .exam-content .exam-content-list.renew p {color: #fff;margin: 0;}

section#lesson .exam-content-group svg {stroke: var(--contrast-500);}









/* 按鈕*/ 
section#BTN {position: relative;padding: 0 0 60px;background-color: var(--slate-800);}
section#BTN  .btn h5{margin: 0;padding: 0; font-weight: 600;font-size: 1.4rem;transition: all ease 200ms;display: inline-block;color: var(--slate-800);text-wrap: wrap;}
section#BTN  .btn h5 i {color: var(--contrast-500);}
section#BTN  a:hover h5 {color: #fff;}
section#BTN  a:hover h5 i{color: #fff;}
section#BTN a {  text-decoration: none;display: block;color: var(--slate-800); 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: 1px solid var(--slate-800);padding: 10px;border-radius: 10px;background-color: #fff;}
section#BTN a:hover{background-color: var(--primary);}
section#BTN .btn {padding: 0;}










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


}

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


}

@media(max-width:1300px){
    /* 主視覺 */
    header#visual .logo { width: 25%; }
    .container{position: relative;max-width:1150px;}



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

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


@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: 2.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 { height: auto; padding: 5% 2% 0;overflow: visible;}
    header#visual .header-flex { flex-direction: column; width: 100%; margin: 4% 0 0; }
    header#visual .header-flex .header-title { width: 100%; padding: 0; }
    header#visual h1 { font-size: 2.6rem;  }
    header#visual h2 { line-height: 1.6; font-size: 1.2rem; }
    header#visual .header-flex .header-photo { width: 80%;z-index: 99; }





    section#competency .box-content .box {margin: 0 0 30px;}
    section#competency .box-content .box .photo { min-height: 500px;width: 100%; }
    section#competency .box-content .box .photo .text p { max-height: 300px;opacity: 1; overflow: visible;  padding: 8px 15px;background-color: #ffffffc9; margin:0;}
    section#competency .box-content .box .photo:hover .text p { max-height: 300px; opacity: 1; }









    section#possess .text{ margin: 0 0 20px; }
    section#possess .photo { padding: 15px; width:100%; margin: 0 auto 20px; }




    section#lesson .lesson-box a.lesson-link { width: 100%; }
    section#lesson .lesson-content-group { flex-direction: column; }
    section#lesson .lesson-content-group .lesson-content { border-right: none; padding: 0;}
    section#lesson .lesson-content-group .lesson-content .text {width: 80%;}
    section#lesson .lesson-content-group .lesson-content .icon { width: 50px; }
    section#lesson .discount-content-group {padding: 14px;}
    section#lesson .discount-content-group .discount-content { padding: 0; flex-direction: column; }
    section#lesson .discount-content-group .discount-content .discount-content-list { padding: 0px; }

    section#lesson .exam-content-group .exam-content .exam-content-list.renew { padding: 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; }


}