@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;700;900&family=Noto+Serif+TC:wght@700&display=swap');
        
        /* ==========================================
           main.css - 變數與核心設定 (修正為溫潤 Claude 暖光色系)
           ========================================== */
        :root {
            --primary: #E0533C;          /* 暖心磚紅 (Claude 品牌代表色) */
            --primary-hover: #C8432E;    /* 磚紅深色 hover */
            --secondary: #4F46E5;        /* 質感沉穩靛藍 */
            --secondary-hover: #4338CA;
            
            --slate-100: #F3EFEA;        /* 輕暖砂礫白 */
            --slate-200: #EBE5DA;        /* 灰泥溫潤邊框 */
            --slate-300: #DCD4C5;
            --slate-400: #BCB2A1;
            --slate-500: #8C806F;
            --slate-600: #746d61;
            --slate-700: #4A4235;        /* 墨褐暗灰 */
            --slate-800: #191817;        /* 極深褐色 (取代刺眼全黑) */
            --slate-900: #12110F;
            
            --contrast-100: #FCFAF7;     /* 全局頂級暖白底色 */
            --contrast-200: #FAF6F0;     /* 卡片專屬淡奶油白 */
            --contrast-300: #f8f1e7;     /* 終端機與區塊標題底色 */
            --contrast-400: #ead0a5;     
            --contrast-500: #E0533C;
  

            --accent-emerald: #10B981;   /* 質感翡翠綠 (資安防護) */
            --accent-amber: #D97706;     /* 溫暖琥珀金 (成本控管) */
            --accent-rose: #E11D48;      /* 警示亮紅 */
            
            --text-500: #57534E;         /* 優雅石墨灰 */
            --white: #ffffff;
            --black: #000000;
            
            --font-sans: "Inter", "Noto Sans TC", "微軟正黑體", sans-serif;
            --font-serif: "Noto Serif TC", "微軟正黑體", Georgia, serif;
            
            --shadow-sm: 0 1px 2px 0 rgba(31, 29, 26, 0.05);
            --shadow-md: 0 4px 12px -1px rgba(31, 29, 26, 0.05), 0 2px 4px -1px rgba(31, 29, 26, 0.03);
            --shadow-lg: 0 12px 24px -3px rgba(31, 29, 26, 0.06), 0 4px 8px -2px rgba(31, 29, 26, 0.04);
            --shadow-xl: 0 24px 36px -5px rgba(31, 29, 26, 0.08), 0 12px 16px -5px rgba(31, 29, 26, 0.05);
            --shadow-2xl: 0 32px 64px -12px rgba(31, 29, 26, 0.12);
            
            --radius-lg: 12px;
            --radius-xl: 16px;
            --radius-2xl: 24px;
            --radius-full: 9999px;
        }


        img {width: 100%;}
        /* --- 網頁專屬獨立 CSS 樣式 --- */
        

     






       
      

::selection { background-color: #D97706; color: white; } 
section h1,section h2,section h3,section h4,section h5,section h6,section p,section span,section a{position: relative;z-index: 99;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-700);font-size: 1.02rem;line-height: 1.7;font-weight: 400;}

a:hover {  text-decoration: none; }


/* 輪播 */
.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: 6rem 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%;}  


/* 大小標題共用 */
.master-title {margin: 0 0 30px;width: 75%;}
.master-title.center {margin: 0 auto 30px;}
.master-title h2 {font-weight: 900;display: inline-block;letter-spacing: .02em;color:  var(--slate-800);margin: 0 0 20px;}
.master-title h3 {color: var(--primary);letter-spacing: .1rem;font-size: 1.75rem;}
.master-title h3.sm {color: var(--accent-amber);
    font-size: 1rem;
    background-color: #fff5e9;
    padding: 0.35rem 1rem;
    border-radius: .25rem;
    margin: 0 0 10px;
    display: inline-block;
    border: 1px solid #d0b89e;}
.master-title span {color: #DB6E14;}
.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:var(--primary);margin:10px 0 ;}
.master-title.center .line {margin: 10px auto 20px;}

.con-title.center {text-align: center;}
.con-title h3 {display: inline-block;letter-spacing: .02em;color:  var(--slate-800);}







 /* 導覽列與首頁 */
        header.sticky-header { position: sticky; top: 0; background-color: rgba(252, 250, 247, 0.9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--slate-200); z-index: 999; }
        header.sticky-header .header-inner { height: 5rem; display: flex; align-items: center; justify-content: space-between; }
        header.sticky-header .header-inner .nav-title span{ line-height: 1.2;}
        header.sticky-header .header-inner .nav-title span br{display: none;}
        header.sticky-header .header-inner .nav-links a { text-decoration: none; color: var(--text-500); transition: color 0.2s; font-size: 1rem; font-weight: 500; }
        header.sticky-header .header-inner .nav-links a:hover { color: var(--primary); }

        /* 導覽列優化結構 */
        header.sticky-header .header-inner .logo-icon-wrap { display: flex; }
         header.sticky-header .header-inner .logo-icon-wrap img {width: 45px;}
        header.sticky-header .header-inner .nav-right-group { display: flex; align-items: center; gap: 2rem; }
        header.sticky-header .header-inner .action-group { display: flex; align-items: center; gap: 1rem; }




        
        /* 按鈕設計 */
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0.65rem 1.25rem;
            border-radius: var(--radius-lg);
            font-weight: 600;
            font-size: 0.875rem;
            border: 1px solid transparent;
            cursor: pointer;
            transition: all 0.2s ease-in-out;
            text-decoration: none;
            outline: none; 
        }
        .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show > .btn-primary.dropdown-toggle { color: rgb(255, 255, 255); background-color:var(--primary); border-color:  var(--slate-200);outline: none;box-shadow: 0 0 0 .2rem rgba(0, 123, 255, 0);}
        .btn-primary.focus, .btn-primary:focus {
            box-shadow: 0 0 0 .2rem rgba(0, 123, 255, 0) !important;
        }
        .btn-primary {
            background-color: var(--primary);
            color: var(--white);
            box-shadow: 0 4px 10px rgba(224, 83, 60, 0.15);
        }
        .btn-primary:hover {
            background-color: var(--primary-hover);
            box-shadow: 0 6px 15px rgba(224, 83, 60, 0.25);
            border-color: var(--slate-300);
        }
        .btn-secondary {
            background-color: var(--white);
            border-color: var(--slate-200);
            color: var(--slate-800);
            box-shadow: var(--shadow-sm);
            
        }
        .btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show>.btn-secondary.dropdown-toggle { color: var(--slate-700); background-color: var(--slate-100); border-color: transparent; }
        .btn-secondary.focus, .btn-secondary:focus { box-shadow: 0 0 0 .2rem rgba(108, 117, 125, 0); }
        .btn-secondary:not(:disabled):not(.disabled).active:focus, .btn-secondary:not(:disabled):not(.disabled):active:focus, .show>.btn-secondary.dropdown-toggle:focus {
            box-shadow: 0 0 0 .1rem rgba(108, 117, 125, .2);
        }

        .btn-secondary i{
            color: var(--contrast-500);
        }
        .btn-secondary:hover {
            background-color: var(--slate-100);
            color: var(--slate-700);
            border-color: var(--slate-300);
        }
        .btn-lg {
            padding: 1rem 2rem;
            font-size: 1rem;
            border-radius: var(--radius-xl);
        }
     

        /* Hero 區塊專屬結構 */
        section.hero-section { padding: 4rem 0 6rem 0; background: linear-gradient(#ffe9cd 1px, transparent 1px),  linear-gradient(90deg, #ffe9cd 1px, transparent 1px),  var(--contrast-100);background-size: 50px 50px;}
        section.hero-section h1 {background: linear-gradient(90deg, var(--primary), var(--accent-amber));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;letter-spacing: .02rem;font-weight: 800;font-size: 3.5rem;}
        section.hero-section h2 {font-size: 1.8rem;margin: 0;transform: translateY(15px);color: #442c66;font-weight: 600;}
        section.hero-section .hero-left {  display: flex; flex-direction: column;}
        section.hero-section .hero-left .icon-flex{  display: flex; align-items: center;}
        section.hero-section .hero-left .icon-flex .icon {width:75px;margin:0 5px 0 20px;}
        section.hero-section .hero-left .icon-flex .icon img{width:100%;}

        section.hero-section .photo {width: 100%;}
        section.hero-section .photo img{filter: brightness(1.1);}

.ud {animation:ud 4s ease-in-out 0s infinite ;}
@keyframes ud {
    0%, 100% {
    transform: translateY(5px);
    }

50% {
    transform: translateY(-17px);
    }
}










        /* 痛點區塊專屬 */
        section#problem{ background-color: var(--contrast-300);}
        section#problem .panel-card { background-color: var(--white); border: 1px solid var(--slate-200); border-radius:0 0 var(--radius-xl) var(--radius-xl); padding: 2rem; box-shadow: var(--shadow-sm); transition: all 0.3s ease; position: relative; overflow: hidden; }
        section#problem .panel-card-accent::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #F87171, var(--primary)); }
        section#problem .panel-card:hover { border-color: rgba(224, 83, 60, 0.4);   }
        section#problem .panel-card .pain-icon{ width: 3rem; height: 3rem; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; padding: 1rem; }
        section#problem .panel-card .pain-icon i {font-size: 1.6rem}
        section#problem .panel-card .pain-icon.red { background-color: #FEF2F2;}
        section#problem .panel-card .pain-icon.red i{ color: var(--accent-rose); }
        section#problem .panel-card .pain-icon.amber { background-color: #FFFBEB;}
        section#problem .panel-card .pain-icon.amber i{ color: var(--accent-amber); }
        section#problem .panel-card .pain-icon.rose { background-color: #FFF1F2;}
        section#problem .panel-card .pain-icon.rose i{ color: var(--accent-rose); }   
        section#problem .panel-card .pain-icon.blue { background-color: #EEF2FF;}
        section#problem .panel-card .pain-icon.blue i{ color: #4F46E5; } 

        section#problem .banner-box { background-color: var(--contrast-100); border: 1px solid var(--slate-200); padding: 1.5rem; border-radius: var(--radius-xl); }
        section#problem .banner-box p {margin: 0;} 


        
        /* gstack 協作框架 */
        section#framework{background-color: var(--contrast-200);border-top: 1px solid var(--slate-200);} 
 




         section#framework .item-con {background-color: var(--contrast-300); border: 2px solid var(--slate-200); border-radius: var(--radius-xl); overflow: hidden;  padding:1.75rem 3rem;}
        section#framework .item-con .item-g {display: flex; gap: 1.5rem;position: relative;}
        section#framework .item-con .item-g::after {content: ""; position: absolute;transform: translateY(-50%);top: 50%;height: 6px;width: 100%;background-color:#e1d4c4;z-index: 1;}



        section#framework .item-con .item-g .item{width: 19%;background-color: var(--contrast-100); border-radius: var(--radius-xl);position: relative;z-index: 99;border: 1px solid var(--slate-200);padding:40px 1rem 1rem;overflow: hidden;}
        section#framework .item-con .item-g .item .num {width:50px;margin: 20px auto ;position: absolute;position: absolute; top: -56px; left: -35px; width: 70px; height: 70px; transform: rotate(-45deg); display: flex; justify-content: center; align-items: flex-end;background-color: #ff951b84;}
        section#framework .item-con .item-g .item .num span {transform: rotate(45deg);color: #FFFBEB; font-weight: bold;font-size: .95rem;}

        section#framework .item-con .item-g .item .num img{object-fit: cover;filter: brightness(1.15);}
        section#framework .item-con .item-g .item h4 {text-align: center;}
        section#framework .item-con .item-g .item p {margin: 0;}
        section#framework .item-con > p > b {background-color: bisque;padding: .2rem;}
        section#framework .item-con .item-g .item a {color: #E0533C;transition: all .3s ease-in;}
        section#framework .item-con .item-g .item a:hover {color: #b43a27;}

       section#features {background-color: var(--contrast-300);border-top: 1px solid var(--slate-200);} 
        section#features .panel-card{background-color: var(--white); border: 1px solid var(--slate-200); padding: 1rem; border-radius: var(--radius-xl); box-shadow: var(--shadow-sm);}

        section#features .panel-card .pillar-icon {width: 3rem; height: 3rem; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; padding: 1rem;}
        section#features .panel-card .pillar-icon i {font-size: 1.6rem}
        section#features .panel-card .pillar-icon.red { background-color: #FFF1F2;}
        section#features .panel-card .pillar-icon.red i{ color: var(--accent-rose); }
        section#features .panel-card .pillar-icon.blue { background-color: #EEF2FF;}
        section#features .panel-card .pillar-icon.blue i{ color: #4F46E5; }
        section#features .panel-card .pillar-icon.amber { background-color: #FFFBEB;}
        section#features .panel-card .pillar-icon.amber i{ color: var(--accent-amber); }
        section#features .panel-card .pillar-icon.rose { background-color: #FFF1F2;}
        section#features .panel-card .pillar-icon.rose i{ color: var(--accent-rose); }  
        section#features .panel-card .pillar-icon.green { background-color: #ECFDF5;}
        section#features .panel-card .pillar-icon.green i{ color: #10B981; }  




        section#syllabus {padding: 6rem 0; background: linear-gradient(#ffe9cd 1px, transparent 1px),  linear-gradient(90deg, #ffe9cd 1px, transparent 1px),  var(--contrast-100);background-size: 50px 50px;}

        section#syllabus .box .box-photo {width:80%;margin: 0 auto 20px;}
        section#syllabus .box .box-photo img {width: 100%;filter: brightness(1.1);}
        section#syllabus .box  h5 { color:  var(--accent-amber);font-size:medium;}

        section#syllabus .box-results { background-color: var(--primary-hover); border: 2px solid var(--slate-200); border-radius: var(--radius-xl); overflow: hidden; padding:4rem 6rem; margin: 30px auto 0;width: 85%; }
        section#syllabus .box-results h3,section#syllabus .box-results ul li,section#syllabus .box-results h5{color: #fff;}
        section#syllabus .box-results p {color: rgba(255, 255, 255, 0.85);}

        section#syllabus .box-results p  b { color: #fff;}
        section#syllabus .box-results ul {display: flex;flex-wrap: wrap;flex: 1;padding: 0;margin: 0 0 20px;}
        section#syllabus .box-results ul li{list-style: none;width: 50%;margin:5px 0 ;position: relative;padding-left: 30px;}
        section#syllabus .box-results ul li::before{content: "\f00c"; position: absolute; left: 0px;top: 2px; width: 20px;height: 20px;font-size: 1rem; font-family: "Font Awesome 7 Free";font-weight: 900;color:#ffc363;}
        section#syllabus .box-results h6 {padding: 0 0 0 0px;margin: 10px 0;background-color: var(--contrast-100);padding: 1rem;border-left: 8px solid var(--accent-rose);}
        section#syllabus .box-results  .lesson-good{padding: 2rem 3rem;background-color: rgba(249, 226, 226, 0.05);border-radius: 1.25rem;border: 1px solid #e2818362;}
      section#syllabus .box-results .lesson-good .icon-flex {display: flex;align-items: center;}
      section#syllabus .box-results .lesson-good .icon-flex img{width: 50px;margin-right: 10px;}
      section#syllabus .box-results .lesson-good .icon-flex p {transform: translateY(5px);margin: 0;color: #fff;font-weight: 600;}



        section#instructor  {padding: 6rem 0;background-color: var(--contrast-300);}
        section#instructor .box {display: flex;justify-content: space-between;}
        section#instructor .box .phhoto-con {width: 24%;text-align: center;}
        section#instructor .box .phhoto-con h5 {margin: 20px auto;}
        section#instructor .box .phhoto-con .photo {border-radius: 100%;width: 250px;overflow: hidden;margin: 0 auto;text-align: center;}
        section#instructor .box .phhoto-con .photo img {object-fit: cover;}
        section#instructor .box .text {width: 75%;}
      
        section#instructor .box .text .master-title h3 {color: #000000;}
        section#instructor .box .text .master-title h3{color: var(--accent-amber);font-size: 1rem;background-color: #fff5e9;padding: 0.35rem 1rem;border-radius: .25rem;margin: 0 0 10px;display: inline-block;border: 1px solid #d0b89e;}
        section#instructor .box .text .master-title h2 {display: block;}

        section#instructor .box ul {margin: 0 0 20px;padding: 0;}
        section#instructor .box ul li{position: relative;list-style: none;padding-left: 30px;}
        section#instructor .box ul li::before{content: "\f058"; position: absolute; left: 0px;top: 2px; width: 20px;height: 20px;font-size: 1rem; font-family: "Font Awesome 7 Free";font-weight: 900;color: var(--primary);}
        section#instructor .box .text i {color:#faa67fb7;} 


        /* 按鈕*/ 
        section#BTN {position: relative; background-color: var(--contrast-200); border-top: 1px solid var(--slate-200);}
        section#BTN h3{color: var(--accent-amber);font-size: 1rem;background-color: #fff5e9;padding: 0.35rem 1rem;border-radius: .25rem;margin: 0 0 10px;display: inline-block;border: 1px solid #d0b89e;} 
        section#BTN .con-btn {width:90%;margin: 60px 0 20px;}
        section#BTN .photo img{filter: brightness(1.1);width:90%;}


        
        section#qa{ background-color: var(--contrast-200);padding: 0 0 6rem;}
        section#qa .box {background-color: var(--contrast-300); border: 2px solid var(--slate-200); border-radius: var(--radius-xl); overflow: hidden; padding: 2rem 3rem;}
        section#qa .box h3 {text-align: center;}
        section#qa .box .item-g  {margin: 20px 0 0;}
        section#qa .box .item-g .item{padding: 40px 0 ;border-bottom: 1px dashed var(--slate-400);}
        section#qa .box .item-g .item:last-child {border-bottom: none;padding: 40PX 0 20px;}
        section#qa .box .item-g .item .q-title i{color: var(--contrast-500);}
        section#qa .box .item-g .item .a-con {padding: 0 0 0 30px;}
        section#qa .box .item-g .item .a-con p {margin: 0;}













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


}

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


}

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

    .container{position: relative;max-width:1150px;}

  




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

     nav ul li { font-size: 1.1rem; }

}

@media(max-width:991px){

    .master-title { width:100%; }
    section#BTN a {  width: 100%;}

 

   

}


@media(max-width: 767px){
    .container { padding: 15px;max-width: 98%; }
    .title h3 { font-size: 1.6rem; }

  /* 浮動按鈕 */
    .floatBtn { display: none; }

    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.75rem;line-height: 1.5;margin: 5px 0 0;}
    .master-title p {font-size: 1.1rem;text-align: left;}
    .master-title h2 br {display: block;}

    
    
    section {padding: 60px 0;}
    section p, section li, section table tr td { font-size: 1.05rem; }
  
  
    header.sticky-header .header-inner .nav-title span br{display: block;}
    section.hero-section h1 {font-size: 2.2rem;}
    section.hero-section h1 br{display: none;}
    section.hero-section h2 { font-size: 1.5rem; transform: translateY(15px); }
    section.hero-section .hero-left .icon-flex .icon { width:55px; }
    section.hero-section .photo { margin: 30px 0 0; }



    section#framework .item-con .item-g { flex-direction: column; }
    section#framework .item-con .item-g .item {width: 100%;}
    section#framework .item-con { background-color: var(--contrast-300); border: 2px solid var(--slate-200); border-radius: var(--radius-xl); overflow: hidden; padding: 1.75rem ; }

    section#syllabus .box .box-photo { width: 70%; margin: 20px auto; }


    section#syllabus .box-results { padding:10px; width: 95%; }
    section#syllabus .box-results ul { flex-direction: column; }
    section#syllabus .box-results ul li {width: 100%;}
    section#syllabus .box-results .lesson-good { padding:1.75rem; }

    section#instructor .box { flex-direction: column;align-items: center; }
    section#instructor .box .phhoto-con { width: 50%;margin: 0 0 30px; }
    section#instructor .box .phhoto-con .photo { width: 100%; }
    section#instructor .box .text { width: 100%; }



    section#BTN .con-btn { width: 100%;  }
    section#BTN .photo {margin: 0 0 20px;}



    section#qa .box{padding: 1.75rem;}
    section#qa .box .item-g .item .q-title {padding-left:30px ;}
    section#qa .box .item-g .item .q-title h5{ text-indent: -26px;font-size:1.2rem ;line-height: 1.5;}
    section#qa .box .item-g .item .a-con p { text-align: left; }

}












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


}