/* --- CSS 重置與變數 --- */
  @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;700;900&family=Noto+Serif+TC:wght@700&display=swap');
        
      :root {
            --primary: #DC2529;
            --primary-hover: #b91c1c;
            --secondary: #18416E;
            --slate-100: #e5e8ef;
            --slate-200: #ccd3e0;
            --slate-300: #a6c0da;
            --slate-400: #9eb8d4;
            --slate-500: #b3b3b3;
            --slate-600: #c6c8ca;
            --slate-700: #2d1e1e;
            --slate-800: #1b1717;
            --slate-900: #030303;
            --contrast-100: #f8fafc;
            --contrast-200: #ecf2f6;
            --contrast-300: #b1bfc9;
            --contrast-400: #afd8f2;
            --contrast-500: #3b82f6;
            --text-500: #475569;
            --red: #dc2626;
            --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%;}
        /* --- 網頁專屬獨立 CSS 樣式 --- */
        

        /* 浮動按鈕 */
        .floatBtn { display: block; position: fixed; top:0;right: 0; z-index: 9999;transition: all .3s ease-in;}
        .floatBtn .floatBtn-1{background-color: rgba(66, 26, 26, 0.6);border-radius: 0px 0px 0px 20px;box-shadow: 2px 2px 20px 0px rgba(1, 46, 42, 0.15000000596046448);width: 160px;height: 140px;padding: 5px 10px 5px 10px;transition: all .3s ease-in;  animation: floatBtn .8s infinite alternate ease-in;}

     
        @keyframes floatBtn {
            from {background-color: rgba(78, 26, 26, 0.4); }
            to { background-color: rgba(91, 13, 13, 0.9); }
        }

        .floatBtn .floatBtn-1  {text-align: left;} 
        .floatBtn .floatBtn-1 img {width: 100%;} 
        .floatBtn .floatBtn-1 p {margin: 5px 0 0 ; font-weight: 600;font-size: 1.2rem;}
        /* .floatBtn:hover {transform: scale(1.1);  } */
        .floatBtn:hover  .floatBtn-1{
            box-shadow: 0 0 15px rgba(213, 46, 46, 0.8);animation-play-state: paused;
            background-color: rgba(27, 3, 3, 0.826) !important;}







        
        @keyframes beaconRotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
      

        .top-warning {
            top: 0; background-color: var(--primary); z-index: 100; padding: 0.6rem 0; overflow: hidden;
            border-bottom: 1px solid rgba(255,255,255,0.2);
        }
        .scroll-text { display: flex; width: max-content; animation: infinite-scroll 25s linear infinite; }



        .btn-primary {
            display: inline-flex; align-items: center; padding: 1.5rem 3.5rem; background-color: var(--primary);
            color: var(--white); font-weight: 900; font-size: 1.5rem; text-decoration: none; border: none;
            cursor: pointer; transition: all 0.3s; position: relative;
        }
        .btn-primary::after {
            content: ""; position: absolute; inset: 0; border: 2px solid var(--white); transform: translate(6px, 6px);
            z-index: -1; transition: transform 0.3s;
        }
        .btn-primary:hover::after { transform: translate(0, 0); }
        .btn-primary:hover { background-color: var(--white); color: var(--primary); }

        .glass-card { background: rgba(26, 26, 26, 0.85); border: 1px solid rgba(255,255,255,0.08); backdrop-filter: blur(10px); padding: 2.5rem; }
        .badge-alert { display: inline-block; padding: 0.5rem 1.5rem; background: var(--primary); color: var(--white); font-weight: 900; letter-spacing: 2px; }

        .method-svg { max-width: 600px; margin: 0 auto; filter: drop-shadow(0 0 20px rgba(174, 114, 222, 0.2)); }


::selection { background-color: #DC2529; 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;}

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: 120px 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 60px;}
.master-title.center {margin: 0 auto 60px;}
.master-title h2 {font-weight: 900;display: inline-block;letter-spacing: .05em;color:  var(--slate-700);font-size: 2.75rem;}
.master-title h3 {color: var(--primary);letter-spacing: .3rem;font-size: 1.75rem;}


.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 span {color: var(--primary);}
.master-title p {margin: 20px 0;font-size: 1.15rem;}
.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;}




/* 主視覺 */
/* .grid-overlay { background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px); background-size: 50px 50px; } */

.siren-red-static {
    position: absolute; top: 10%; left: 10%; width: 800px; height: 800px; border-radius: 50%;
    background: radial-gradient(circle, var(--red) 20%, transparent 70%);
    animation: sirenRedPulse 3s infinite ease-in-out; pointer-events: none;transform-origin: center;z-index: 1;
}
.siren-blue-static {
    position: absolute; top: 10%; right: 10%; width: 800px; height: 800px; border-radius: 50%;
    background: radial-gradient(circle, var(--contrast-500) 20%, transparent 70%);
    animation: sirenBluePulse 3s infinite ease-in-out ; pointer-events: none;animation-delay: 1.5s; opacity: 0;transform-origin: center;z-index: 1;
}

@keyframes sirenRedPulse {
  0%, 20%, 100% { opacity: 0; transform: translateX(-50%) scale(0.8); filter: blur(40px); }
            10% { opacity: 0.25; transform: translateX(-55%) scale(1.4); filter: blur(60px); }
}

@keyframes sirenBluePulse {
    0%, 20%, 100% { opacity: 0; transform: translateX(50%) scale(0.8); filter: blur(40px); }
            10% { opacity: 0.25; transform: translateX(55%) scale(1.4); filter: blur(60px); }
}

header .bg-video{width: 100%;height: 100vh;position: fixed;z-index:-1;opacity: .5;}
header .bg-video video {width: 100%;height: 100vh;z-index: 1;object-fit: cover;opacity: .15;mix-blend-mode: color-dodge;}


header.hero-section { padding-top: .5rem; padding-bottom: .5rem;   min-height: 100vh; display: flex; align-items: center; justify-content: center; position: relative;overflow: hidden;}
header.hero-section .header-title  {display: flex; align-items: center; justify-content: center;position: relative;z-index: 99;margin: 0 0 10px;}
header.hero-section .header-title .icon {width: 80px;}

header.hero-section h1.hero-title-text {  line-height: 1.5;display: inline-block;margin: 0;text-align: left;font-weight: 600;letter-spacing: .1rem;}
header.hero-section h1.hero-title-text span {background-color: #791818;padding:0.25rem 1.25rem;}
/* header.hero-section h1.hero-title-text  br {display: none;} */




.pulse-primary {animation: pulse-primary 2s infinite;}
@keyframes pulse-primary {
        0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); border-color: var(--primary); }
        70% { box-shadow: 0 0 0 20px rgba(220, 38, 38, 0); border-color: rgba(220, 38, 38, 0.5); }
        100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); border-color: var(--primary); }
    }

header.hero-section .logo { width:40%; position: relative;z-index: 99;margin:40px auto;}
header.hero-section .box {background: rgba(62, 42, 42, 0.2); backdrop-filter: blur(12px); border: 1px solid var(--primary); border-radius: 2rem; padding: 2rem; box-shadow: var(--shadow-xl); transition: transform 0.3s ease; margin: 0 auto;position: relative;z-index: 99;width: 80%;}
header.hero-section .box p {line-height: 1.6;font-size: 1.1rem; }
header.hero-section .box p span {color: var(--primary); font-weight: 600;}
header.hero-section .box h2 {color:white;margin: 20px 0;letter-spacing: 0.15em; }
header.hero-section .box h2 span{background-color: #791818;padding:0.25rem 1.25rem; }
    header.hero-section .box h2 br{display: none; }
  

/* 為何傳統安全措施無法應付? */
section#tradition {background-color: #0b0606;}
section#tradition  .container { max-width: 1480px;}
section#tradition .box { border: 1px solid rgba(59, 62, 66, 0.4); min-height: 100px;padding: 2rem;position: relative;overflow: hidden;transition: all .3s ease-in;}
section#tradition .box .photo{ border-radius: 10px; width: 100%; height: 180px; margin-bottom: 20px; filter:grayscale(1) ;border-radius: 1rem;overflow: hidden;border: 1px solid red;transition: all .3s ease-in;position: relative;z-index: 99;}
section#tradition .box .photo img {width: 100%;height: 100%;object-fit: cover;display: block;transition: all .3s ease-in;transform-origin: center;}
section#tradition .box:nth-child(1) { border-left: none ; }
section#tradition .box:nth-child(4) { border-right: none ; } 


section#tradition .box:hover .photo {filter:grayscale(0) ;}
section#tradition .box:hover .photo img {transform: scale(1.05);}

section#tradition .box  h3 {font-weight: 900;margin: 40px 0 20px;transition: all .3s ease-in;}
section#tradition .box .box-photo {position: absolute;z-index: 1;width: 100%;height: 100%;filter:grayscale(1) ;opacity: 0;top: 0;left: 0;transition: all .3s ease-in;}
section#tradition .box .box-photo  img {width: 100%;height: 100%;object-fit: cover;display: block;transition: all .3s ease-in;transform-origin: center;}
section#tradition .box:hover  {background-color: rgba(73, 42, 42, 0.15)}
section#tradition .box:hover .box-photo {opacity: .2;}
section#tradition .box:hover .box-photo img {transform: scale(1.2);}
section#tradition .box:hover  h3 {color: var(--primary);}



section#lesson {background: radial-gradient(
    circle at bottom right, 
    rgba(67, 10, 10, 0.85) 0%, 
    rgba(23, 15, 12, 0.85) 40%, 
    rgba(26, 15, 15, 0.85) 100%
  );}
section#lesson .lesson-box  {margin:40px 0 20px;}
section#lesson .lesson-box .item-title h3{margin: 0 0 20px;}

section#lesson .lesson-box .item-content .number-item{margin:20px 0 ;}
section#lesson .lesson-box .item-content .number-item h4{color: var(--primary);font-weight: 600;font-size: 4rem;display: flex;align-items: center;}
section#lesson .lesson-box .item-content .number-item h4 span:last-child {font-size: 2.25rem;margin: 8px 10px 0;}


section#lesson .lesson-feature {background: rgba(62, 42, 42, 0.2);backdrop-filter: blur(12px); border-radius: 1.5rem; padding: 2rem; box-shadow: var(--shadow-xl); position: relative;z-index: 99;width: 100%;}
section#lesson .lesson-feature ul {margin: 40px 0 0;padding: 0;list-style: none;}
section#lesson .lesson-feature ul li {display: flex;align-items: flex-start;border-bottom: 1px solid rgba(255, 255, 255, 0.1);padding: 20px 15px;}
section#lesson .lesson-feature ul li:hover {background-color: rgba(73, 42, 42, 0.2) }
section#lesson .lesson-feature ul li:last-child {border-bottom: none;}
section#lesson .lesson-feature ul li h4{color: #fff;}
section#lesson .lesson-feature ul li .feature-icon {padding: 0.75rem;border-radius: .25rem;margin: 0 20px 0 0;}
section#lesson .lesson-feature ul li .feature-icon i {font-size: 1.5rem;color: var(--white);}

section#lesson .lesson-feature ul li:nth-child(1) .feature-icon {background-color: rgba(194, 22, 22, 0.5)}
section#lesson .lesson-feature ul li:nth-child(2) .feature-icon {background-color: rgba(33, 86, 143, 0.418);}
section#lesson .lesson-feature ul li:nth-child(3) .feature-icon {background-color: rgba(72, 64, 60, 0.9);}
section#lesson .lesson-feature ul li .feature-text p span{font-weight: 600; color: var(--primary);} 







section#method  .container { max-width: 1480px;}
section#method .box-content  {width: 52%;}
section#method .box-content .item-g .item{display: flex;padding:2rem;border: 1px solid rgba(255, 255, 255, 0.1);position: relative;}
section#method .box-content .item-g .item .num {font-family: "Share Tech Mono", ui-monospace, SFMono-Regular, monospace;;font-size: 1.25rem;font-weight: 700;color: var(--primary);margin-right: 20px;flex-shrink: 0;}
section#method .box-content .item-g .item:hover {background-color: rgba(73, 42, 42, 0.2) }

section#method .box-content .item-g .item .icon {position: absolute;right: 25px;top: 25px;}
section#method .box-content .item-g .item .icon i{color: rgba(255, 255, 255, 0.1);font-size: 1.75rem;}
section#method .box-content .item-g .item:hover .icon i{ color: var(--primary);}
section#method  .photo {width: 45%;margin: 20px 0 0;}




section#training {background: radial-gradient(
    circle at top left, 
    rgba(67, 10, 10, 0.85) 0%, 
    rgba(23, 15, 12, 0.85) 40%, 
    rgba(26, 15, 15, 0.85) 100%
  );}

section#training  .training-grid {display:flex;align-items: center;gap: 40px;justify-content: space-between;flex-wrap: wrap;}
section#training .training-card  {display: flex;width: 45%;align-items: flex-start;}
section#training .training-card .icon-box {color: var(--white);margin-right: 20px;background: rgba(62, 42, 42, 0.8);padding: 0.75rem;border-radius: .25rem;margin: 0 20px 0 0;} 


section#training .frame-box {background: rgba(62, 42, 42, 0.2);backdrop-filter: blur(12px); border-radius: 1.5rem; padding: 2rem; box-shadow: var(--shadow-xl); position: relative;z-index: 99;width: 100%;}

section#training .frame-box .frame-box-title{margin: 40px auto 20px;}
section#training .frame-box .frame-box-title h3 {text-align: center;}
section#training .frame-box .frame-box-title h3 i{color: var(--primary);}
section#training .frame-box .frame-box-title ul {margin: 40px 0 0;display: flex;flex-wrap: wrap;}
section#training .frame-box .frame-box-title ul li {margin: 10px 0 ;color: #e5e3e3;list-style: none;width:50%;}

section#training .frame-box .frame-box-title ul li i {color: var(--primary);margin-right: 10px;}



section#value .value-box-text ul { margin: 0; }
section#value .value-box-text ul li {margin: 10px 0 ;list-style: square;color: #e5e3e3;}
section#value .value-box-text ul li::marker {color: var(--primary);} 
section#value .value-box-photo {width: 100%;margin: 40px 0 0;}





section#discount {background-color: #0b0606;} 
section#discount  .master-title br {display: none;}

section#discount .box { border: 1px solid rgba(59, 62, 66, 0.4); min-height: 100px;padding: 2rem;position: relative;overflow: hidden;transition: all .3s ease-in;}
section#discount .box h3 {transition: all .3s ease-in;}
section#discount .box:hover  {background-color: rgba(73, 42, 42, 0.15)}
section#discount .box:hover h3 {color: var(--primary);}





section#discount .box .icon {padding: 0.75rem;border-radius: .25rem;display: inline-block;margin: 30px 0 ;}
section#discount .box .icon i {font-size: 1.5rem;color: var(--white);}

section#discount .box:nth-child(1) .icon {background-color: rgba(194, 22, 22, 0.5)}
section#discount .box:nth-child(2) .icon {background-color: rgba(33, 86, 143, 0.418);}
section#discount .box:nth-child(3) .icon {background-color: rgba(72, 64, 60, 0.9);}
section#discount .box:nth-child(4) .icon {background-color: rgba(79, 117, 103, 0.9);}






.con-btn {background-color: rgba(12, 8, 8, 0.75);width: 350px;margin:60px auto 100px;transition: all .3s ease-in; border: 1px solid rgba(59, 62, 66, 0.6);border-radius: 10px;}
.con-btn h5 {color: #fff;text-align: center;padding: 1.25rem 2rem;font-size: 1.5rem;margin: 0;}
.con-btn h5 i {color: var(--primary);transition: all .3s ease-in;margin-right: 15px;}
.con-btn:hover i {transform: scale(1.2);} 
.con-btn:hover {background-color: #2d171755;border: 1px solid var(--primary);}
.con-btn  a {display: block;}

/* 按鈕*/ 
section#BTN {position: relative;background: url(../images/footer-bg.jpg) no-repeat center center;background-attachment: fixed; background-size: cover;border-top: 10px solid var(--primary);  }
section#BTN .box {background-color: #0a0a0a93; border: 1px solid rgba(59, 62, 66, 0.4);padding: 4rem;width: 100%;margin: 0 auto 40px;border-radius: 0.75rem;backdrop-filter: blur(12px);}
section#BTN .box h2 {font-style: italic; line-height: 3.5rem;font-weight: 900;text-align: center;
font-size: 2.25rem;}
section#BTN .box h2 span {color: var(--primary);}
section#BTN .con-btn {width:90%;margin: 60px auto 20px;}


/* 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.hero-section .box {width: 100%;}
  




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

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

}

@media(max-width:991px){

    section#competency .box-content .box .photo { width: 60%;margin: 0 auto 30px; }
    section#BTN a {  width: 400px;}

    header.hero-section h1.hero-title-text {  line-height: 1.8;text-align: left;font-size: 2.5rem;}
    header.hero-section h1.hero-title-text  br {display: block;}
    header.hero-section .logo { width: 60%; }


    /* .siren-red-static { left: 0%; width:300px; height: 300px; }
    .siren-blue-static { right: 0%; width: 300px; height: 300px; }
 */





}


@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.2rem;}
    .master-title h2 br {display: block;}

    
    
    section {padding: 60px 0;}
    section p, section li, section table tr td { font-size: 1.05rem; }
  
    header.hero-section { min-height: auto;}
    header.hero-section .header-title { flex-direction: column; }
    header.hero-section h1.hero-title-text { text-align: center;font-size: 2rem;line-height: 1.5;}
    header.hero-section .header-title .icon { width: 80px; }
    header.hero-section .logo { width:80%;margin: 40px auto; }
    header.hero-section .box h2 {line-height: 2;margin: 0 0 20px;font-size: 1.6rem;}
    header.hero-section .box h2 br{display: block; }
  
  

    section#tradition .box:nth-child(1) { border-left: 1px solid rgba(59, 62, 66, 0.4) ; }
    section#tradition .box:nth-child(4) { border-right: 1px solid rgba(59, 62, 66, 0.4) ; } 


    section#lesson .item-content{ grid-template-columns: repeat(2, 1fr); }
    section#lesson .lesson-box .item-content .number-item h4 { font-size: 3rem; }
    section#lesson .lesson-feature .item-title h3 {text-align: center;}



    section.method .flex  {flex-direction: column;}
    section#method .box-content {
        width: 100%;
    }
    section#method .container { max-width:980%;padding: 15px; }

    section#method .photo { width: 100%; }
    
    
    section#training .training-grid { flex-wrap: wrap; flex-direction: column; }
    section#training .training-card { width: 100%; }
    section#training .frame-box .frame-box-title ul { flex-direction: column;padding: 0; }
    section#training .frame-box .frame-box-title ul li { width:100%; }
    section#training .frame-box .frame-box-title ul li i { margin-right: 2px; }


    section#discount  .master-title br {display: block;}







    .con-btn {width:300px;margin: 20px auto;}
    .con-btn h5 {font-size: 1.15rem;margin: 0;}
    .con-btn h5 i {margin-right: 10px;}



    section#BTN .box{padding: 2rem;}
    section#BTN .box h2 { line-height: 2.5rem; font-size: 1.5rem;margin:0 0 20px }
    section#BTN .con-btn { width: 100%; margin: 20px auto 5px; }





}












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


}