.slogan-section {position: relative;background-color: #fff;background: #faf8f3;}
        .slogan-container {display: flex;flex-direction: column;width: 100%;max-width: 100%;margin: 0;border-top: 1px solid var(--border-color);border-bottom: 1px solid var(--border-color);}
        .slogan-section:before{content:"";background: url(/images/00/img-ab-00.png);aspect-ratio: 1/1;width: 10vw;top: 0vw;left: 40vw;background-size: cover;position: absolute;-webkit-animation: birdJitter 3s ease-in both infinite;animation: birdJitter 4s ease-in both infinite;}
        .content-area {position: relative;padding: 60px 24px;display: flex;flex-direction: column;justify-content: center;}
        .content-inner { max-width: 500px; margin: 0 auto; width: 100%; }
        .content-area:before{content:"";background:url(/images/00/bootmmimg.png);width: 15vw;aspect-ratio: 5/4;bottom: 0;right: 6vw;position: absolute;background-size: cover;}
        .tagline { color: var(--secondary); font-size: 13px; letter-spacing: 0.25em; margin-bottom: 24px; display: block; font-weight: 500; text-transform: uppercase; }
        .main-title { font-family: 'Noto Serif TC', serif; font-size: 32px; font-weight: 600; color: var(--primary); letter-spacing: 0.05em; margin: 0 0 32px 0; line-height: 1.4; }
        .divider { width: 60px; height: 1px; background-color: var(--dark_gary); margin: 0 0 32px 0; opacity: 0.4; }
        .sub-title { font-size: 16px; color: var(--info); font-weight: 500; margin-bottom: 16px; letter-spacing: 0.1em; line-height: 1.6; }
        .separator { color: var(--secondary); margin: 0 6px; font-size: 10px; opacity: 0.7; }
        .description { color: var(--dark); font-size: 15px; font-weight: 300; margin: 0; letter-spacing: 0.1em; line-height: 2; }


        .actions-area { display: flex; flex-direction: column; border-top: 1px solid var(--border-color); }
        

        a.action-card {flex: 1;display: flex;align-items: center;justify-content: space-between;padding: 40px 30px;border-bottom: 1px solid var(--border-color);background-color: #fffef9;position: relative;overflow: hidden;min-height: 180px;}
        .action-card:last-child { border-bottom: none; }
        .action-card:hover {background-color: #ffffff;}
        

        .card-content { position: relative; z-index: 2; flex: 1; padding-right: 20px; }
        .card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
        .card-icon-svg { width: 24px; height: 24px; fill: var(--primary); }
        .card-title { font-family: 'Noto Serif TC', serif; font-size: 20px; font-weight: 600; color: var(--info); letter-spacing: 0.1em; }
        .card-desc { font-size: 13px; color: var(--dark); letter-spacing: 0.05em; line-height: 1.6; display: block; }
        
   
        .card-arrow { width: 8px; height: 8px; display: flex; align-items: center; justify-content: center; background-color: var(--dark_gary); border-radius: 50%; transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); flex-shrink: 0; margin: 0 20px; }
        .action-card:hover .card-arrow { width: 48px; height: 48px; background-color: var(--primary); margin: 0; }
        .arrow-svg { width: 18px; height: 18px; stroke: #fff; stroke-width: 1.5; fill: none; opacity: 0; transform: scale(0.5); transition: all 0.3s ease; }
        .action-card:hover .arrow-svg { opacity: 1; transform: scale(1); }

     
        .action-card.highlight .card-title { color: var(--primary); }


        .animate-fade-up { opacity: 0; animation: fadeInUp 0.8s ease-out forwards; }
        .delay-100 { animation-delay: 0.1s; }
        .delay-200 { animation-delay: 0.2s; }
        .delay-300 { animation-delay: 0.3s; }
        .coolJJ_box {position: absolute;left: 40vw;width: 20vw;height: 20vw;bottom: 12vw;background-color: rgb(228 208 203);border-radius: 99999px;filter: blur(40px);animation: bounce 1s infinite;animation-duration: 10s;opacity: 0.5;z-index: 11;}

      
        @media (min-width: 960px) {
            .banner-wrapper { height: 600px; }
           
            .slogan-container { flex-direction: row; min-height: 500px; }
            .content-area {width: 80%;border-right: 1px solid var(--border-color);padding: 80px 60px;align-items: flex-end;text-align: right;}
            .content-inner { margin: 0; max-width: 480px; }
            .content-area { align-items: center; text-align: left; } 

            .content-inner {margin: 0;}
            .content-area {justify-content: center;align-items: flex-start;display: flex;}

            .actions-area { width: 50%; border-top: none; height: auto; }
            .action-card { flex: 1; padding: 0 60px; min-height: auto; }
            .main-title { font-size: 42px; margin-bottom: 40px; }
            .tagline { margin-bottom: 30px; }
            .card-title { font-size: 24px; }
            .card-desc { font-size: 14px; margin-top: 8px; }
        }

   
        @media (min-width: 1400px) {
            .content-area {padding: 10vw 5vw 10vw 10vw;}
            .action-card { padding: 0 80px; }
        }

        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

@media (max-width: 768px){
        .main-title{font-size: 25px;}
}
 @media (max-width: 480px){
        .slogan-section:before{width: 30vw;top: -14vw;left: 39vw;}
        .content-area:before{width: 28vw;right: -6vw;}
 }