html, body { /*撐滿*/
        margin: 0;
        padding: 0;
        width: 100%;
    }

    body {
        font-family: Arial, "LiHei Pro", "黑體-繁", "微軟正黑體", sans-serif;
        font-weight: 600;
        color: #2d3e57;
        line-height: 1.4;
        letter-spacing: 0.05em;
    }

    header{
        position: sticky;
        top: 0;
        z-index: 1000;
        background-color: #ffffff;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }

    .top_header{
        display:flex;
        justify-content: center;
        align-items: center;
        gap: 15px;
        flex-wrap: wrap;
        position: relative; /* 為了讓手機版選單可以絕對定位 */
    }

    .hamburger_bar {
        display: none;
        cursor: pointer;
        flex-direction: column;
        gap: 5px;
    }

    .hamburger_bar .bar{
        width: 25px;
        height: 3px;
        background-color: rgb(165, 164, 164);
        transition: all 0.3s ease-in-out;
    }

    .top_header .Cyberhood_pic{
        height: 60px;
        width: auto;

    }

    .top_button{
        font-size: 18px;
        cursor: pointer;
        border: none;
        background-color: white;
        font-family: inherit; /* 繼承母體的字 */
    }

    .dropdown{
        position: relative;
        display: inline-block;
    }

    .dropdown .arrow{
        display: inline-block;
        transition: transform 0.4s ease;
    }

    .dropdown_content{
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        background-color: #ffffff;
        min-width: 200px;
        box-shadow: 0px 8px 16px rgba(0,0,0,0.15);
        border-radius: 6px;
        z-index: 1001;
        overflow: hidden;
        text-align: left;
    }

    .dropdown_content a {
        color: #2d3e57;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        font-size: 16px;
        font-weight: 500;
        transition: background 0.2s, color 0.2s;
    }

    .dropdown_content a:hover {
        background-color: #f1f5f9;
        color: #123092;
    }

    .dropdown:hover .dropdown_content,
    .dropdown.active .dropdown_content {
        display: block;
    }

    .dropdown:hover .arrow,
    .dropdown.active .arrow {
        transform: rotate(180deg); /* 讓 ▼ 變成 ▲ */
    }

    .section_box{
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 70px;
        width: 100%;
        box-sizing: border-box;
        padding: 80px 40px;
    }

    .section_pic{
       width: 100%;
       max-width: 550px;
       height: auto;
       border-radius: 8px;
       padding: 0;

    }

    .section_box .text_box{
        max-width: 650px;
        width: 100%;
    }

    .section_box.reverse{
        flex-direction: row-reverse;
    }

    .hero_banner{
        width: 100%;
        box-sizing: border-box;
        background-color: #fffbfe;
        display: flex;
        flex-direction: column;
    }

    .hero_banner img{
        width: 100%;
        height: auto;     
        max-height: 550px;
        object-fit: cover;
        display: block;
        margin-bottom: 35px;
    }

    .hero_text_box {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
        padding: 20px;
    }
    
    .hero_text_box .bigger_text {
        font-size: 38px;
        color: black;
        font-weight: 700;
        margin: 0 0 12px 0;
    }
    
    .hero_text_box p {
        font-size: 22px;
        color: #2d3e57;
        line-height: 1.7;
        margin: 4px 0;
    }

    .hero_banner img.homepage_pic2 {
        width: calc(100% - 40px) !important; 
        max-width: 900px;  
        margin: 20px auto 40px auto;  
        display: block;
        box-sizing: border-box;
        border-radius: 20px; 
    }

    .prettier_pic, .p27001_pic{
        width: 100%;
        max-width: 1200px;  
        margin: 40px auto;  
        padding: 0 20px;  
        text-align: center;
        box-sizing: border-box;
    }

    .prettier_pic img{
        width: 100%;          
        max-height: 730px;    
        object-fit: cover;    
        object-position: center; 
        display: block;
        margin: 0 auto;
        border-radius: 15px;
    }

    .p27001_pic img{
        max-width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
        border-radius: 15px;
    }

    .bigger_text{
        color: #123092;
    }

    .official_doc{
        background-color: #ebf4fd;
    }

    .school_system{
        background-color: #f5f3ff;
    }

    .application_section{
        width: 100%;
        padding: 50px 40px 150px 40px;
        box-sizing: border-box;
        background-color: #ebf4fd;
    }

    .card_container{
        display: flex;
        justify-content: center;
        gap: 25px;
        max-width: 1400px;
        margin: 0 auto;    
        flex-wrap: wrap;
    }

    .app_card{
        flex: 1 1 260px;
        max-width: 320px;
        min-height: 420px;
        background-color: #ffffff;
        border-radius: 10px;
        padding: 45px 25px;
        box-sizing: border-box;
        text-align: center; 
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); 
        border: 1px solid #e2e8f0;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        cursor: pointer;
        text-decoration: none;
        color: inherit;
    }

    .app_card:hover{
        transform: translateY(-8px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
    }

    .app_card img{
        width: 100%;
        max-width: 300px;
        height: 190px;
        object-fit: contain;
        margin-bottom: 5px;
    }

    .application_section .bigger_text{
        font-size: 34px;
        font-weight: 600;
        text-align: center;
    }

    .app_card .bigger_text {
        font-size: 32px;     
        margin-top: 5px;   
        margin-bottom: 8px;   
    }
    
    .app_card p:last-child {
        font-size: 16px;      
        margin-top: 0;   
        margin-bottom: 0;
    }

    .application_section p{
        font-size: 18px;
    }

    .app_card:nth-child(1) { border: 2px solid #E07A5F; }
    .app_card:nth-child(1) .bigger_text { color: #E07A5F; }

    .app_card:nth-child(2) { border: 2px solid #2A9D8F; }
    .app_card:nth-child(2) .bigger_text { color: #2A9D8F; }

    .app_card:nth-child(3) { border: 2px solid #66584c; }
    .app_card:nth-child(3) .bigger_text { color: #66584c; }

    .app_card:nth-child(4) { border: 2px solid #59afbb; }
    .app_card:nth-child(4) .bigger_text { color: #59afbb; }

    .gps{
        width: 100%;
        padding: 80px 40px 80px 40px;
        box-sizing: border-box;
        background-color: #f5f3ff;
    }

    .gps .bigger_text{
        font-size: 34px;
    }

    .gps p{
        font-size: 18px;
    }

    .gps_btn {
        display: inline-block;
        padding: 12px 23px;
        background-color: transparent; 
        color: #123092; 
        text-decoration: none;
        border: 2px solid #c0ceff;
        border-radius: 50px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        margin-top: 20px;
    }
    
    .gps_btn:hover {
        background-color: #5a81ff;
        color: #ffffff; 
        transform: translateY(-2px);
        box-shadow: 0 6px 15px rgba(18, 48, 146, 0.15);
    }

    .wonder_box{
        width: 100%;
        box-sizing: border-box;
        padding: 120px 60px 120px 60px;
        background-color: #fffbfe;
        font-family: inherit;
    }

    .wonder_box .bigger_text{
        font-size: 34px;
    }

    .wonder_box p {
        font-size: 18px;
    }

    .wonder_box .wonder_box_btn{
        cursor: pointer;
        font-size: 15px;
        border: none;
        padding: 5px;
        font-family: inherit;
        background-color: #fffbfe;
    }

    .wonder_box .section_pic{
        height: 270px;
        width: auto;
    }

    .recommend{
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 50px 40px 50px 40px;
        box-sizing: border-box;
        background-color: #F5F2EB;
    }

    .recommend_content{
        display: flex;
        gap: 30px;
        align-items: stretch;
        box-sizing: border-box;
        max-width: 1400px;
        width: 100%;
        margin: 0 auto;
    }

    .professor{
        display: flex;
        flex-direction: column;
        gap: 10px;
        flex: 1;
        background-color: #ffffff;
        padding: 20px;
        border-radius: 8px;
        box-sizing: border-box;
        justify-content: space-between;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        cursor: pointer;
    }

    .professor:hover{
        transform: translateY(-8px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
    }

    .Lee_professor {
        height: 250px;
        width: auto;
        border-radius: 6px;
        margin: 0 auto;
        margin-top: 10px;
    }

    .recommend .text_box{
        display: flex;
        flex-direction: column;  /* 讓標題和多個段落由上往下乖乖去排 */
        padding: 1px 15px;
    }

    .recommend .bigger_text{
        font-size: 34px;
        font-weight: 600;
        margin-bottom: 15px;
        text-align: center;
    }

    .recommend .full_content_btn{
        font-size: 15px;
        background-color: #ffffff;
        border: none;
        cursor: pointer;
        margin-left: auto;
        margin-top: 10px;
    }
    
    .recommend p {
        margin-top: 2px;
        margin-bottom: 4px;
        line-height: 1.7; 
        font-size: 16px;
        font-weight: 500;
    }

    .text_box .bigger_text {
        font-size: 34px; 
        font-weight: 600;
        line-height: 1;
    }

    .text_box p{
        font-weight: 500;
        font-size: 18px;
    }

    .articles_sections .bigger_text {
        font-size: 34px; 
    }

    .articles_sections{
        display: flex;
        flex-direction: column;
        gap: 70px;
        flex: 1;

    }

    .articles{
        margin-left: auto;
        width: 100%;
        background-color: #ffffff;
        padding: 20px;
        border-radius: 8px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        cursor: pointer; 
    }

    .articles p {
        font-size: 16px;
        font-weight: 500;
        line-height: 1.9;
        text-align: left;
        word-break: break-all; /* 防止掉出框框*/
    }

    .articles:hover{
        transform: translateY(-8px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
    }

    .tools_section{
        width: 100%;
        background-color: #ebf4fd;
        padding: 100px 40px 100px 40px;
        box-sizing: border-box;

    }

    .tools{
        display: flex;
        gap: 40px;
        max-width: 1200px; 
        box-sizing: border-box;
        margin: 0 auto;
    }

    .tool_card{
        flex: 1;
        background-color: #ffffff;
        border-radius: 12px;
        padding: 30px 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        align-items: center;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        cursor: pointer;
    }

    .tool_card:hover{
        transform: translateY(-5px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    }

    .tool_card .bigger_text {
        font-size: 34px;
        color: #123092;
        font-weight: 600;
        margin-top: 0;
        margin-bottom: 12px;
    }
    
    .tool_card p{
        font-weight: 550;
        font-size: 16px;
        line-height: 1.9;
        color: #2d3e57;
        margin-top: 0;
        margin-bottom: 20px;
    }

    .tool_action_btn {
        display: inline-block;
        margin-top: auto; 
        padding: 10px 28px;
        background-color: #123092;
        color: #ffffff;
        text-decoration: none;
        border-radius: 20px;
        font-size: 15px;
        font-weight: 600;
        transition: background-color 0.3s ease;
    }
    
    .tool_action_btn:hover {
        background-color: #0d2268;
    }
    
    .line_qr {
        width: 100px;
        height: 100px;
        margin-top: auto; 
        object-fit: contain;
    }

    .try_apply.tool_card{
        border: 2px solid #3BA4D9;
    }

    .try_apply .bigger_text{
        color: #3BA4D9;
    }

    .try_apply .tool_action_btn { 
        background-color: #3BA4D9; 
    }
    .try_apply .tool_action_btn:hover { 
        background-color: #2b84b3;
    }

    .customer_service.tool_card{
        border: 2px solid #E86363;
    }

    .customer_service .bigger_text { 
        color: #E86363; 
    }
    .customer_service .tool_action_btn { 
        background-color: #E86363; 
    }
    .customer_service .tool_action_btn:hover { 
        background-color: #c74a4a; 
    }

    .offical_line.tool_card{
        border: 2px solid #00B900;
    }
    
    .offical_line .bigger_text { 
        color: #00B900; 
    }

    .icon{
        width: 1.05em;           
        height: 1.05em;
        margin-right: 8px;
        margin-bottom: 6px;
        vertical-align: middle;
    }

    .fqa_section{
        width: 100%;
        box-sizing: border-box;
        padding: 80px 80px;
        background-color: #f5f3ff;
        font-family: inherit;
    }

    .fqa_section .bigger_text{
        font-size: 34px;
        text-align: center;
    }

    .fqa_container{
        max-width: 800px;
        margin: 0 auto;
    }

    .fqa_item{
        background-color: #f8fafc;
        border: 1px solid #bec3ca;
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 15px;
        cursor: pointer;
    }

    .fqa_questions{
        background-color: none;
        font-size: 18px;
        font-weight: 600;
        list-style: none; /*移除預設小箭頭*/
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .fqa_questions::after{
        content: "▼";
        transition: transform 0.3s ease;
        flex-shrink: 0;
        margin-left: 10px;
    }

    .fqa_item.active .fqa_questions::after{
        transform: rotate(180deg);
    }

    .fqa_answer_wrap {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), padding 0.35s ease;    
    }

    .fqa_item.active .fqa_answer_wrap {
        max-height: 500px;
    }

    .fqa_answer{
        background-color: none;
        font-size: 15px;
        margin-top: 8px;
        color: #3c61af;
    }

    .bottom{
        width: 100%;
        text-align: center;
        box-sizing: border-box;
        padding: 55px 40px 20px 40px;
        background-color: #fafafa;
        font-weight: 500;
        font-size: 14px;
    }

    /*區塊浮起的效果*/
    .fade_up{
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.8s ease-out, transform 0.8s ease-out;

    }

    .fade_up.show{
        opacity: 1;
        transform: translateY(0);
    }

    .privacy_link {
        color: #2d3e57;
        text-decoration: none;
        transition: color 0.2s ease;
    }
    
    .privacy_link:hover {
        color: #123092;
        text-decoration: underline;
    }
    
    .modal_section.active .modal_box { 
        transform: translateY(0); 
    }

    @media (max-width: 992px) {
        .hamburger_bar {
            display: flex; 
        }
        
        .bar{
            border-radius: 15px;
        }

        .hamburger_bar:hover {
            background-color: #ffffff; 
        }
        
        .hamburger_bar:hover .bar {
            background-color: #555555;
        }

        .nav_menu {
            display: flex; 
            flex-direction: column;
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            background-color: #ffffff;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
            padding: 15px 0;

            opacity: 0;
            visibility: hidden;
            transform: translateY(-20px);
            transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), 
                        opacity 0.30s ease, 
                        visibility 0.35s;
        }
    
        .nav_menu.active {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
    
        .dropdown {
            width: 100%;
        }
        
        .top_button {
            width: 100%;
            text-align: left;
            padding: 15px 40px;
            border-bottom: 1px solid #f1f5f9;
        }
    
        .dropdown_content {
            position: static; 
            box-shadow: none;
            background-color: #f8fafc;
        }
        
        .dropdown_content a {
            padding-left: 60px;
        }

        .section_box, 
        .section_box.reverse {
            flex-direction: column;
            padding: 40px 20px;
            gap: 30px;
        }

        .hero_text_box{
            padding: 10px 40px;
        }

        .hero_text_box p{
            font-size: 15px;
        }

        .Lee_professor,
        .wonder_box .section_pic {
            height: auto;       
            max-height: 200px;  
            width: 100%;       
            object-fit: contain;
        }

        .recommend_content {
            flex-direction: column;
            gap: 60px;
        }
    
        .tools {
            flex-direction: column;
        }
    
        .bigger_text, 
        .hero_text_box .bigger_text, 
        .application_section .bigger_text {
            font-size: 26px !important;
        }

        .application_section {
            padding: 30px;
        }

        .fqa_section, .tools_section, .section_box.wonder_box, .section_box.gps {
            padding: 40px;
        }
    }

    .official_doc p, .school_system p {
        font-size: 15px;
    }

    .app_card {
        padding: 25px;
    }

    .hero_banner img {
        padding-bottom: 10px;
    }

    .bigger_text, 
    .top_title .title {
        font-size: 26px !important;
    }

    .top_title .small_word,
    .title_section p,
    .cloud_computing p,
    .accompany p,
    .cyberhood p,
    .recognize p,
    .product p,
    .bottom p {
        font-size: 15px;
    }

    .top_title {
        padding: 0px 20px 40px 20px;
        width: 100%;
        box-sizing: border-box;
    }

    .pic,
    .top_title .pic,
    .cyberhood .pic {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        box-sizing: border-box;
        display: block; 
        margin: 0 auto; /* 置中 */
    }

    .title_section,
    .cloud_computing,
    .accompany,
    .cyberhood,
    .product,
    .recognize {
        padding: 40px 20px !important;
        box-sizing: border-box;
        width: 100%;
        overflow: hidden; 
    }

    .recognize_section, 
    .product_section {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px !important;
        width: 100% !important;
    }

    .recognize_section1, 
    .recognize_section2, 
    .recognize_section3, 
    .product_ans,
    .support {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 25px 20px !important; 
        flex: none !important; 
        margin: 0 !important;
    }

    .recognize_section p {
        word-break: break-all; 
    }

    .product_btn {
        max-width: 100%;
        box-sizing: border-box;
        white-space: normal;
    }

    .breadcrumb {
        padding: 20px 20px 10px;
        font-size: 12px;
        box-sizing: border-box;
        width: 100%;
    }