img{ border:0px;}
a{ outline: none;
text-decoration: none;
behavior:expression(this.onFocus=this.blur());
transition-property:all 0.3s;
-moz-transition:all 0.3s;
-webkit-transition:all 0.3s;
-o-transition:all 0.3s;
}
*{ margin:0px; padding:0px; -webkit-box-sizing:border-box; box-sizing:border-box;}
html,body{ -webkit-text-size-adjust:100%; font-family:'Open Sans',"微軟正黑體","Arial"}
.header_bg {
    position: fixed;
    width: 100%;
    height: 110px;
    background: #d32f2f;
    border-bottom: 0px;
    z-index: 999;
    top: 0;
}
.header{ position:relative; margin:0 auto; width:100%; height:120px; padding:10 20px;}
.logo{ position:absolute; left:20px; top:20px; width:auto; height:55px;color:#fff;font-size:30px;}
.logo a:link {color:#ffffff; text-decoration: none;}
.logo a:visited {text-decoration: none; color:#ffffff;}
.logo a:active {text-decoration: none;}
.PageList1 {
    text-align: center;
    background: #8FB23B;
    color: #fff;
    width: 95%;
    border-radius: 8px;
    padding: 7px;
    margin: 0 auto;
    margin-top: 15px;
}

.PageList2 {
    background: red;
    color: #fff;
    padding: 5px;
    border-radius: 50px
}
.TopMenu{ position:absolute; top:12px; right:20px;}
.TopMenu a{ display:inline-block; vertical-align:top; font-size:13px; color:#ffffff;}
.TopMenu span{ display:inline-block; vertical-align:top; font-size:13px; color:#666666; margin:0 10px;}
.TopMenu2{ position:absolute; width:100px; text-align:center; top:0; right:0;}
.TopMenu2 a{ display:block; color:#ffffff; font-size:13px; padding:10px 0; border-radius:0 0 5px 5px;}
.TopMenu2 a:hover{ background:#957d55;}
.TopMenu2 img{ width:13px; margin-right:8px;}
#banner{ width:100%; overflow:hidden; padding-top:0; background:#ffffff;}
#index_more { position:absolute; z-index:3; width:200px; height:30px; left:50%; margin-left:-100px; bottom:20%; text-align:center;}
.btn_more{ display:inline-block; width:180px; height:46px; line-height:45px; text-align:center; font-size:14px; border:1px solid #ffffff; color:#ffffff;}
.btn_more:hover{ border:1px solid #af9366; background:#af9366; color:#ffffff; cursor:pointer;}
#NewsDiv {width:100%; position:relative; padding:5% 0 7% 0;}
#NewsDiv2{ margin:0px auto; width:1200px; text-align:center;}
#NewsDiv2Title{display:block; font-size:16px; color:#000000; margin-bottom:25px;}
#NewsDiv2Title span{ display:block; font-size:180%; padding-bottom:2px; font-weight:400; color:#000;}
#NewsDivC{ display:block; width:100%; overflow:hidden;}
#NewsDivC a{ display:inline-block; width:25%;margin:15px; vertical-align:top;margin-bottom:30px;}
#NewsDivC_bg{ position:relative; overflow:hidden; outline:1px solid #ffffff;border-radius:5px; }
#NewsDivC_bg span{ position:absolute; bottom:0; display:block; width:100%; text-align:center; font-size:14px; color:#ffffff; padding:10px 10px; background:rgba(0,0,0,0.4); text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
#NewsDivCC{margin:0 auto; display:block; width:100%; height:0; padding-bottom:100%; overflow:hidden; text-align:center; }
#TopBanner{ width:100%; overflow:hidden;  height:350px;}
#ContentBg{ width:100%; overflow:hidden; padding:60px 0 100px 0; background:#f1f2f4;}
#ContentMargin{ margin:0 auto; width:1200px; background:#fff; padding:60px 60px;}
#ContentTitle{ font-size:23px; font-weight:bold; color:#af9366; border-bottom:1px solid #e3e3e3; padding-bottom:20px; margin-bottom:20px;}
#t_menu{ display:none;}
#menu_c{ display:none;}
.MenuSet a:link {color:#ffffff; text-decoration: none;}
.MenuSet a{ display:inline-block; padding:10px 13px; font-size:16px; color:#ffffff; border-radius:5px;}
.MenuSet a:visited {text-decoration: none; color:#ffffff;}
.MenuSet a:active {text-decoration: none;}
.MenuSet {
    width: 100%;
    position: absolute;
    bottom: 10px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    justify-content: center;
}

.MenuSet ol{	
padding:0px;
}

.MenuSet ul{
padding:0px;
margin:0px;
width:250px;
border:#000 1px solid;
}

.MenuSet li,li a{
list-style:none;
margin:0px;
text-decoration:none;
}

.MenuSet li{
	border-bottom:#aaa 1px solid;
    text-align:left;
}

.MenuSet .level1,.level2,.level3,.level4,.level5{
background-color:#808080;  
}

.MenuSet .level1 li:hover,.level2 li:hover,.level3 li:hover,.level4 li:hover,.level5 li:hover{
background-color:#000; 
}

.MenuSet ul.level1{
display:none;
position:absolute;
}

.MenuSet li.mainmenu{
float:left;
list-style:none;
margin:0px;
position:relative;
border:0;
}

.MenuSet li:hover{
}

.MenuSet ul.level2,.MenuSet ul.level3,.MenuSet ul.level4,.MenuSet ul.level5{
display:none;
position:absolute;
left:248px;
top:0px;
}

.MenuSet li.submenu{
list-style:none;
width:250px;
margin:0px;
position:relative;
}

.MenuSet li.mainmenu:hover ul.level1
,.MenuSet ul.level1 li.submenu:hover ul.level2
,.MenuSet ul.level2 li.submenu:hover ul.level3
,.MenuSet ul.level3 li.submenu:hover ul.level4
,.MenuSet ul.level4 li.submenu:hover ul.level5
{
display:block;
}
.DivBoth {

}
.newsMain {
    margin: 5px;
    padding: 0px;
    line-height: 28px;
    text-align: left;
}
.inew_bg{ margin:0 auto; width:100%; padding:70px 0; overflow:hidden; background:url(../images/bg_n.gif);}
.inew{ margin:0 auto; width:60%; overflow:hidden;}
.inew_tt{ display:inline-block; width:30%; vertical-align:top;}
.inew_f{ display:inline-block; width:100%; font-size:15px; color:#af9366;}
.inew_f span{ display:block; font-size:180%; color:#000000; font-weight:bold;} 
.inew_more{ display:inline-block; width:100%; margin-top:6%;}
.inew_more a{ display:inline-block; font-size:12px; color:#000000;}
.inew_more a:hover{ color:#acacac;}
.inew_c{ display:inline-block; width:70%; vertical-align:top;}
.inew_cc{ width:90%; overflow:hidden;}
.inew_cc a{ display:block; width:100%;color:#000; overflow:hidden; margin-bottom:1.5%; padding-bottom:1.5%; font-size:15px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; letter-spacing:1px; border-bottom:1px dotted #CCCCCC;}
.inew_date{font-size:13px; font-family:'Open Sans', sans-serif; color:#999999; margin-right:8%;}
.iab_pic{ display:inline-block; width:100%; padding:10%;  font-size:30px; color:#ffffff; text-shadow:1px 1px 8px rgba(0%,0%,0%,0.6); text-align:center;}
.iab{ width:100%; overflow:hidden; padding:4% 20%; -ms-behavior:url(css/backgroundsize.min.htc); behavior:url(css/backgroundsize.min.htc);}
.iab_f{ width:100%; font-size:15px; line-height:2.0; text-align:center;}
.iab_f span{ display:block; font-size:180%; padding-bottom:4%; font-weight:300; color:#a77931;}
.iab_f_m{ width:100%; text-align:center; padding-top:5%;}
.iab_f_m a{ display:inline-block; padding:10px 30px; font-size:13px; color:#ffffff; background:#2f2f2f; border-radius:5px;}
.iab_f_m a:hover{ background:#666666; color:#ffffff; cursor:pointer;}
#footer_bg{ width:100%; overflow:hidden; padding:3% 0; background:#252525;}
#footers{ margin:0 auto; width:1050px; overflow:hidden; font-size:14px; line-height:1.6; color:#999999;}
#footer_tt{ font-size:160%; margin-bottom:3%; font-weight:300; line-height:1.3; color:#af9366;}
#footer_01{ display:inline-block; width:30%; vertical-align:top;}
#footer_01 a{ display:block; width:100%; color:#999999; padding-bottom:2%;}
#footer_01 a:hover{ color:#ffffff;}
#footer_02{ display:inline-block; width:40%; vertical-align:top;}
#footer_02 a{ display:inline-block; vertical-align:top; width:50%; color:#999999;padding-bottom:2%;}
#footer_02 a:hover{ color:#ffffff;}
#footer_03{ display:inline-block; width:30%; vertical-align:top;}
#footer_03 span{ font-size:140%; font-weight:300;}
#footer_03 a{ color:#999999;}
#footer_03 a:hover{ color:#ffffff;}
.rslides {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: 0;
    margin: 0;
}

    .rslides li {
        -webkit-backface-visibility: hidden;
        position: absolute;
        display: none;
        width: 100%;
        left: 0;
        top: 0;
    }

        .rslides li:first-child {
            position: relative;
            display: block;
            float: left;
        }

    .rslides img {
        display: block;
        height: auto;
        float: left;
        width: 100%;
        border: 0;
    }

.slide_container {
    position: relative;
    float: left;
    width: 100%;
}

.slide {
    position: relative;
    list-style: none;
    overflow: hidden;
    width: 100%;
    padding: 0;
    margin: 0;
}

    .slide li {
        position: absolute;
        width: 100%;
        left: 0;
        top: 0;
    }

    .slide img {
        display: block;
        position: relative;
        z-index: 1;
        height: auto;
        width: 100%;
        border: 0;
    }

.slide_nav {
    position: absolute;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    top: 50%;
    left: 0;
    opacity: 0.7;
    z-index: 3;
    text-indent: -9999px;
    overflow: hidden;
    text-decoration: none;
    height: 50px;
    width: 50px;
    background: transparent url("../images/symbol/arrows.png") no-repeat left top;
    background-size: cover;
    margin-top: -25px;
}

    .slide_nav:active {
        opacity: 1.0;
    }

    .slide_nav.next {
        left: auto;
        background-position: right top;
        right: 10px;
    }

ul.slide_tabs {
    position: absolute;
    bottom: 3%;
    width: 100%;
    text-align: center;
    z-index: 99
}

    ul.slide_tabs li {
        display: inline-block;
        width: 16px;
        height: 16px;
        background: url(../images/symbol/bullets.png) no-repeat;
        background-size: cover;
        margin: 0 3px;
    }

        ul.slide_tabs li.slide_here {
            background-position: 0 -16px;
        }


@media (min-width: 737px) and (max-width: 1249px) {
    .slide li {
        position: absolute;
        width: 110%;
        left: -5%;
        top: 0;
    }

    .slide_nav {
        position: absolute;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
        top: 50%;
        left: 0;
        opacity: 0.7;
        z-index: 3;
        text-indent: -9999px;
        overflow: hidden;
        text-decoration: none;
        height: 40px;
        width: 40px;
        background: transparent url("../images/symbol/arrows.png") no-repeat left top;
        background-size: cover;
        margin-top: -20px;
    }

        .slide_nav:active {
            opacity: 1.0;
        }

        .slide_nav.next {
            left: auto;
            background-position: right top;
            right: 0;
        }
}

@media screen and (max-width: 736px) {
    .slide li {
        position: absolute;
        width: 110%;
        left: -5%;
        top: 0;
    }

    .slide_nav {
        position: absolute;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
        top: 50%;
        left: 0;
        opacity: 0.7;
        z-index: 3;
        text-indent: -9999px;
        overflow: hidden;
        text-decoration: none;
        height: 30px;
        width: 30px;
        background: transparent url("../images/symbol/arrows.png") no-repeat left top;
        background-size: cover;
        margin-top: -15px;
    }

        .slide_nav:active {
            opacity: 1.0;
        }

        .slide_nav.next {
            left: auto;
            background-position: right top;
            right: 0;
        }

    ul.slide_tabs {
        bottom: 2%;
    }

        ul.slide_tabs li {
            width: 12px;
            height: 12px;
            margin: 0 2px;
        }

            ul.slide_tabs li.slide_here {
                background-position: 0 -12px;
            }
}

@media (min-width: 737px) and (max-width: 1249px) {
#gotop { width:45px; height:45px; right:15px; bottom:15px;}
    .MenuSet {
        width: 100%;
        position: absolute;
        /*left:10%;*/
        bottom: 10px;
        font-size: 12px;
        text-align: center;
        margin:0 auto;
    }
.MenuSet a{ display:inline-block; padding:10px 10px; font-size:12px; color:#ffffff; border-radius:5px;}
    .header_bg {
        position: fixed;
        width: 100%;
        height: 110px;
        background: #d32f2f;
        border-bottom: 0px;
        z-index: 999;
        top: 0;
    }
.header{ position:relative; margin:0 auto; width:100%; height:110px; padding:0 2%;}
.logo{ position:absolute; left:3%; top:12px; font-size:16px}
.btn{ display:none;}
.sbtn_f{ display:none;}
.sbtn{ top:22px; right:80px;}
.sbtn img{ width:19px;}
.sbtn a{ display:inline-block; margin-left:10px;}
.tbtn_c{ display:none;}
#banner{ width:100%; overflow:hidden; background:#ffffff;}
#menu_c{ display:none; position:fixed; z-index:999; top:0; background:rgba(0,0,0,0.8); width:100%; height:100%; overflow:hidden; overflow-y:auto;}
.menu_xx{ width:98%; overflow:hidden; height:24px; background:url(../images/symbol/pd_menu_close.png) no-repeat right center; background-size:contain; margin:2% 2% 2% 0;}
#menu_c_bg{ margin:0 auto; width:90%; background:#ffffff;}
#menu_c_b{display:inline-block; width:100%; padding:1% 5%; line-height:1.7; text-decoration:none; border-bottom:1px dotted #999999; color:#1e1e1e; font-size:16px; text-align:left;}
#menu_c_b:hover{ background:#f5f5f5; border-bottom:1px dotted #999999; color:#a77931;}
#menu_c_b2{display:inline-block; width:100%; padding:1% 5%; line-height:1.7; text-decoration:none; border-bottom:1px dotted #999999; color:#a77931; font-size:15px; text-align:left;padding-left:15%}
#menu_c_ca{ width:100%; padding:2% 5%; overflow:hidden; background:#af9366; text-align:center; color:#fff;border-bottom:1px dotted #666666;}
#menu_c_ca a{ display:inline-block; vertical-align:middle; color:#ffffff; font-size:16px; padding:0 4px;}
#menu_c_ca img{ width:18px; margin:3px 10px 0 0;}
#ContentBg{ width:100%; padding:5% 4% 8% 4%; }
#ContentMargin{ width:100%; overflow:hidden; padding:6% 5%;}
#NewsDiv2{  width:96%;}
#NewsDivC a{ display:inline-block; width:30%; vertical-align:top;margin-bottom:30px}
#ibox02a{ width:96%; padding:2% 0 3% 0;}
#ibox02a_f{ font-size:16px; margin-bottom:3%;}
#ibox02a_f span{ font-size:180%; padding-bottom:2px; }
#ibox02_c a{ display:inline-block; width:33%; vertical-align:top;}
#ibox02_c_p_bg span{ font-size:14px; padding:10px 0;}
#footer_bg{ padding:5% 0;}
#footers{ margin:0 auto; width:90%; font-size:14px; line-height:1.8;}
#footer_tt{ font-size:160%; margin-bottom:3%; line-height:1.3;}
#footer_01{ display:inline-block; width:25%; vertical-align:top;}
#footer_01 a{ padding-bottom:2%;}
#footer_02{ display:inline-block; width:40%; vertical-align:top;}
#footer_02 a{ padding-bottom:2%;}
#footer_03{ display:inline-block; width:35%; vertical-align:top;}
#footer_03 span{ font-size:140%;}
.inew_bg{ width:100%; padding:5% 0; }
.inew{ width:90%; }
.inew_tt{ width:100%; margin-bottom:3%;}
.inew_f{ display:inline-block; width:50%; font-size:14px; vertical-align:middle;}
.inew_f span{ display:block; font-size:180%; } 
.inew_more{ display:inline-block; width:50%; margin-top:0%; vertical-align:middle; text-align:right;}
.inew_more a{ display:inline-block; font-size:12px;}
.inew_c{ display:inline-block; width:100%; vertical-align:top;}
.inew_cc{ width:100%; overflow:hidden;}
.inew_cc a{ display:block; width:100%; margin-bottom:1%; padding-bottom:1%; font-size:15px;}
.inew_date{font-size:13px; margin-right:8%;}
.iab_pic{ padding:10%; font-size:27px;}
.iab{ padding:9% 10%;}
.iab_f{ margin:0 auto; width:100%; font-size:14px;}
.iab_f span{ font-size:180%; padding-bottom:10px;}
.iab_f_m{ padding-top:4%;}
.iab_f_m a{ padding:8px 26px;}
}

@media screen and (max-width: 736px) {
 #TopBanner{ width:100%; overflow:hidden;  height:150px;}
    .header_bg {
        position: fixed;
        width: 100%;
        height: 50px;
        background: #d32f2f;        
        border-bottom: 0px;
        z-index: 999;
        top: 0;
    }
.header{ position:relative; margin:0 auto; width:100%; height:50px; padding:0 2%;}
.logo{ position:absolute; left:3%; top:12px; font-size:14px}
.btn{ display:none;}
.TopMenu{display:none;}
.TopMenu2{display:none;}
.sbtn_f{ display:none;}
.sbtn{ top:17px; right:60px;}
.sbtn img{ width:18px;}
.sbtn a{ display:inline-block; margin-left:5px;}
.tbtn_c{ display:none;}
#banner{ width:100%; overflow:hidden; background:#ffffff; margin-top:50px;}
#index_more { display:none;}
.MenuSet{display:none}
#t_menu{ display:block; position:absolute; width:50px; height:50px; top:0; right:0; text-align:center; background:#af9366;}
#t_menu img{ height:50%; margin:12px 0;}
#menu_c{ display:none; position:fixed; z-index:999; top:0; background:rgba(0,0,0,0.8); width:100%; height:100%; overflow:hidden; overflow-y:auto;}
.menu_xx{ width:96%; overflow:hidden; height:24px; background:url(../images/symbol/pd_menu_close.png) no-repeat right center; background-size:contain; margin:4% 4% 4% 0;}
#menu_c_bg{ margin:0 auto; width:90%; overflow:hidden; background:#ffffff;}
#menu_c_b{display:inline-block; width:100%; padding:2% 5%; line-height:1.7; text-decoration:none; border-bottom:1px dotted #999999; color:#1e1e1e; font-size:15px; text-align:left;}
#menu_c_b:hover{ background:#f5f5f5; border-bottom:1px dotted #999999; color:#a77931;}
#menu_c_b2{display:inline-block; width:100%; padding:2% 5%; line-height:1.7; text-decoration:none; border-bottom:1px dotted #999999; color:#a77931; font-size:15px; text-align:left;padding-left:15%}
#menu_c_ca{ width:100%; padding:4% 5%; background:#af9366; text-align:center; color:#fff;border-bottom:1px dotted #666666;}
#menu_c_ca a{ display:inline-block; vertical-align:middle; color:#ffffff; font-size:15px; padding:0 4px;}
#menu_c_ca img{ width:16px; margin:3px 8px 0 0;}
#NewsDiv2{  width:90%;}
#NewsDivC a{ display:inline-block; width:45%; vertical-align:top;}
#ibox02a{ margin:0px auto; width:90%; padding:4% 0 8% 0;}
#ibox02a_f{ font-size:14px; margin-bottom:4%}
#ibox02a_f span{font-size:160%; padding-bottom:2px;}
#ibox02_c a{ display:inline-block; width:50%; vertical-align:top;}
#ibox02_c_p_bg span{ font-size:13px; padding:6px 0;}
#ContentBg{ width:100%; padding:11% 5% 14% 5%; }
#ContentMargin{ width:100%; overflow:hidden; padding:6% 2%;font-size:15px;}
#footer_bg{ padding:8% 0 4% 0;}
#footers{ margin:0 auto; width:90%; text-align:center; font-size:13px; line-height:1.4;}
#footer_tt{ font-size:160%; margin-bottom:3%; line-height:1.3;}
#footer_01{ display:block; width:100%; vertical-align:top; margin-bottom:10%;}
#footer_01 a{ display:inline-block; width:50%; padding:2% 0; text-align:center;}
#footer_02{ display:block; width:100%; vertical-align:top; margin-bottom:10%;}
#footer_02 a{ display:inline-block; width:50%; padding:2% 0; text-align:center;}
#footer_03{ display:block; width:100%; vertical-align:top; margin-bottom:6%;}
#footer_03 span{ font-size:140%;}
.inew_bg{ width:100%; padding:8% 0;}
.inew{ width:90%; }
.inew_tt{ width:100%; margin-bottom:5%;}
.inew_f{ display:inline-block; width:50%; font-size:13px; vertical-align:middle;}
.inew_f span{ display:block; font-size:150%; } 
.inew_more{ display:inline-block; width:50%; margin-top:0%; vertical-align:middle; text-align:right;}
.inew_more a{ display:inline-block; font-size:12px;}
.inew_c{ display:inline-block; width:100%; vertical-align:top;}
.inew_cc{ width:100%; overflow:hidden;}
.inew_cc a{ display:block; width:100%; margin-bottom:2%; padding-bottom:2%; font-size:13px; letter-spacing:0px;}
.inew_date{font-size:11px; margin-right:4%;}
.iab_pic{ padding:15%; font-size:20px;}
.iab{ padding:12% 5% 12% 5%;}
.iab_f{ margin:0 auto; width:100%; font-size:13px;}
.iab_f span{ font-size:160%; padding-bottom:4px;}
.iab_f_m{ padding-top:7%; font-size:12px;}
.iab_f_m a{ padding:5px 14px;}

}




.MenuSet {
    background-color: #8d6e63;
    bottom: 0;
}


#footer {
    width: 100%;
    background: #424242;
    padding: 40px;
    color: white;
    line-height: 30px;
}

.dropdown a:hover {
    background-color: #5d4037;
}

.dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #6d4c41;
    min-width: 200px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 100;
}


li.mainmenu:hover ul.level1, ul.level1 li.submenu:hover ul.level2, ul.level2 li.submenu:hover ul.level3, ul.level3 li.submenu:hover ul.level4, ul.level4 li.submenu:hover ul.level5 {
    display: block;
    background: #6d4c41;
}


.newsLine, .newsContent {
    color: #000;
}






.button {
    color: #333;
    font-size: 20px;
    width: fit-content;
    height: auto;
    background-color: #fff;
    border-bottom: 2px solid #c62828;
    cursor: pointer;
    margin-top: 1vh;
}
    .button a {
        color: #333;
        padding: 5px;
    }

    .button a:hover {
            background-color: #c62828;
            color: #fff;
            text-decoration: none;
    }

/* 影片與公告區 */
.content-section {
    display: flex;
    gap: 30px;
    padding: 40px 30px;
}
.video-area {
    flex: 1;
}

    .video-area h2 {
        color: #333;
        margin-bottom: 20px;
        font-size: 24px;
    }

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    background-color: #e0e0e0;
}

    .video-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }


.announcements-area {
    flex: 1;
}

    .announcements-area h2 {
        color: #333;
        margin-bottom: 20px;
        font-size: 24px;
    }

.announcement-list {
    list-style: none;
}

    .announcement-list li {
        padding: 12px 0;
        border-bottom: 1px solid #e0e0e0;
    }

        .announcement-list li:before {
            content: "●";
            color: #c62828;
            margin-right: 10px;
        }

    .announcement-list a {
        color: #333;
        text-decoration: none;
        transition: color 0.3s;
    }

        .announcement-list a:hover {
            color: #c62828;
        }


/* 三欄展示區 */
.showcase-section {
    padding: 40px 30px;
    background-color: #f5f5f5;
}

.showcase-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.showcase-card {
    background-color: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
}

    .showcase-card:hover {
        transform: translateY(-5px);
    }

.card-header {
    padding: 20px;
    color: white;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
}

.card1 .card-header {
    background-color: #4fc3f7;
}

.card2 .card-header {
    background-color: #64b5f6;
}

.card3 .card-header {
    background-color: #81c784;
}

.card-content {
    padding: 20px;
}

    .card-content ul {
        list-style: none;
    }

    .card-content li {
        padding: 8px 0;
        color: #333;
    }

        .card-content li:before {
            content: "●";
            color: #666;
            margin-right: 8px;
        }


@media (max-width: 768px) {
    .content-section {
        flex-direction: column;
    }


    .showcase-grid {
        grid-template-columns: 1fr;
    }
}



/* 常用連結區塊 */
.quick-links-section {
    width: 100%;
    max-width: 2000px;
    height: 100%;
    margin: 0 auto;
    margin-top: 2vh;
    margin-bottom: 2vh;
    background: white;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.section-title {
    color: #333;
    font-size: 1.8em;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 3px solid #667eea;
    display: inline-block;
}

.links-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.link-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: white;
    border: 2px solid #667eea;
    border-radius: 25px;
    text-decoration: none;
    color: #667eea;
    font-weight: 500;
    transition: all 0.3s ease;
}

    .link-button:hover {
        background: #667eea;
        color: white;
        /* transform: scale(1.05); */
        box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
    }

    .link-button i {
        font-size: 1.1em;
    }

/* 響應式設計 */
@media (max-width: 768px) {
    .quick-links-section {
        padding: 30px 20px;
    }

    .links-buttons {
        justify-content: center;
    }

    .link-button {
        flex: 1 1 calc(50% - 10px);
        min-width: 140px;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    @media (max-width: 480px) {
        .link-button {
            flex: 1 1 100%;
            font-size: 1em;
            gap: 5px;
        }

        .section-title {
            font-size: 1.2em;
        }
    }
}