<style>
        /* ???? */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
		    /*padding-left: 2px;
		   /* padding-right: 2px;
		    font-family: ?????, Arial, sans-serif;
		    height: auto;
		    /*font-size: 16px;   ?????? */
        }
	a {
	  color: #133260;
	}
	/* ????? */
	a:hover {
	  color: blue;
	}
/* ??? */
.header {
    display: flex; /* ?? Flexbox */
    align-items: center; /* ?????? */
    justify-content: space-between; /* ???? */
    padding: 0; /* ????? */
    /* background-color: #f8f8f8; ????,????? */
    flex-wrap: nowrap; /* ???? */
}
		section, footer, .table-container, .carousel-container {
		    padding-left: 2px;
		    padding-right: 2px;
		}
		
        /* ???? ?? */
       .top_sch {
            margin: 0;
            padding: 22px;
            background-color: #000;
            z-index: 999;
        }
        /* ???? ?? */
       .top_sch2 {
		  display: flex;
		  align-items: center;     /* ?????? */
		  justify-content: space-between;
		  padding: 1% 2%;
		  width: 100%;
		  box-sizing: border-box;
		 /* flex-wrap: wrap;  ??:????????? */
		 background-color: #FFF;
        }
        
        .fontsize-btn {
            margin: 2px;
            padding: 2px;
            cursor: pointer;
            border: 1px solid #fff;
            display: inline-block;
        }
        .active {
            background-color: #FFF;
            color: #000;
        }
        /* ?????? */
        # top_menu {
            list-style: none;
            display: flex;
            justify-content: space-around;
            background-color: #000;
            /* padding: 5px;*/
            text-align: left;
            margin: 0 auto;
        }
		#google_translate_element {
		    width: 150px; /* ?????? */
    		    right: 0; /* ?????????? */
    		    top: 5px;  /*???????? */
		    /*object-fit: cover;  ????????,???????????? */
		    position: absolute;
		    z-index: 999; 
		   /* transform: translateY(20px);  ????20?? */
		}
		
		#google_sch {
		    width: 250px;  /*?????? */
    		    right: 150px; /*?????????? */
    		    top: 5px;  /*???????? */
		    /*object-fit: cover;  ????????,???????????? */
		    position: absolute;
		     /*transform: translateY(30px); ????20?? */
		    z-index: 999;
		}
		
		#font_sch {
		    width: 400px;  /*?????? */
    		    right: 400px; /*?????????? */
    		    top: 5px;  /*???????? */
		    /*object-fit: cover;  ????????,???????????? */
		    position: absolute;
		   /*  transform: translateY(20px); ????20?? */
		   color: white;
		    z-index: 999;
		}
		
        /* Logo ?? */
        .logo {
		width: 100%;
		height: auto;
		max-width:100%; /* ????????????? */
		position: relative;
		margin-bottom: 0;
		padding-bottom: 0;
		text-align: center; /* ????????? */
        }
        
        .logo img {
		width: 500px ;  
		max-width: 100%;  /*????????????? */
		height: auto; /* ?????? */
		display: block; /* ?????? */
        }

		.carousel-title {
		    position: absolute;
		    bottom: 0;
		    left: 0;
		    width: 100%; /* ??????? */
		    height: 50px;
		    background-color: rgba(0, 0, 0, 0.5); /* ??????? */
		    color: white;
		    text-align: left;
		    line-height: 50px; /* ??????? */
		    font-size: 18px;
		    padding: 0 10px;
		    box-sizing: border-box;
		}
		
		/* ?????? */
		.image-grid {
			display: grid;
			grid-template-columns: repeat(7, 1fr); /* ????? 10 ? */
			gap: 5px; /* ??????? */
			max-width: 80%; /* ?????? */
			margin: 0 auto; /* ??? `.container` ?? */
			text-align: center;
			justify-content: center;
		}
		
		.image-grid img {
		    width: 100%;
		    height: auto;
		    object-fit: cover; /* ??????? */
		    text-align: center;
		}

        
        /* ?????? (????????) */
        .menu-toggle {
		display: none;
		background-color: #333;
		color: white;
		padding: 0px;
		cursor: pointer;
		text-align: center;
		font-size: 18px;
		position: absolute;
		right: 5px; /* ???? 5px */
		top: 65%;
		transform: translateY(-50%);  /*???? */
        }

        /* 選單區域 */
        .menu {
		flex: 1; /* 可選：讓選單自適應剩餘空間 */
		display: flex;
		/*justify-content: flex-end;  將選單內容向右對齊 */
		justify-content: center;
		list-style: none;
		margin: 0 auto;
		padding: 0;
		background-color: #fff;
		max-width: 70%;  /* 限制最大寬度  */
		transition: all 0.3s ease; /* 過渡效果 */
        }
        
        /* 漢堡選單按鈕 (僅在小螢幕上顯示) */
        .menu-toggle {
		display: none;
		background-color: #333;
		color: white;
		padding: 0px;
		cursor: pointer;
		text-align: center;
		font-size: 18px;
		position: absolute;
		right: 5px; /* 距離右邊 5px */
		top: 70%;
		transform: translateY(-50%); /* 垂直居中 */
        }

        .menu li {
            flex: 1;
            text-align: center;
            position: relative;
            padding: 0;
            margin: 0;
        }

        .menu a {
            display: block;
            padding: 5px;
            color: #000;
            text-decoration: none;
        }

        .menu a:hover {
            background-color: #EFEFEF;
            color: #000;
            margin: 0 auto;
        }


        /* ????? */
        .submenu {
            display: none;
            position: absolute;
            background-color: #333;
            list-style: none;
            padding: 0;
            margin: 0 auto;
            z-index: 1000;
        }

        .menu li:hover > .submenu {
            display: block;
        }

        .submenu li {
            width: 150px;
        }

        .submenu li a {
            display: block;
            padding: 5px;
            color: white;
            text-decoration: none;
        }

        .submenu li a:hover {
            background-color: #EFEFEF;
        }

        .submenu .submenu {
            top: 0;
            left: 100%;
        }

        /* ??????????? 
	.menu li > a.submenu-toggle::after {
		content: '\25BC'; /* ??????? &#9660; */
		/*float: left; */
		display: inline-block;
		margin-left: 2px
		 font-size: 20px;   /*?????? */
		 / * vertical-align: middle; */
        }

		/* ???? */
		.table-container {
		    display: flex;
		    justify-content: space-between;
		    margin: 20px 0;
		    gap: 10px;
		}
		
		/* ??????? */
		.table-wrapper {
		    flex: 1;
		}
		
		/* ?????? */
		.inner-table {
		    width: 100%;
		    border-collapse: collapse;
		}
		
		.inner-table td {
		    padding: 5px;
		    border: 1px solid #ddd;
		}
		
		/* ????2 */
		.table-container2 {
		    display: flex;
		    background-color: #B4D4FF;
		}
		
		/* ???????2 */
		.table-wrapper2 {
		    flex: 1;
		}
		
		/* ??????2 */
		.inner-table2 {
		    width: 100%;
		    border-collapse: collapse;
		}
		
		/* ????3 */
		.table-container3 {
		    display: flex;
		    justify-content: space-between;
		    margin: 20px 0;
		    gap: 10px;
		}
		
		/* ???????3 */
		.table-wrapper3 {
		    flex: 1;
		}
		
		/* ??????3 */
		.inner-table3 {
		    width: 100%;
		    border-collapse: collapse;	    
		}
		
		.inner-table3 td {
		    padding: 5px;
		    border: 1px solid #ddd;
		}
		
	/* ????4 */
	.table-container4 {
		display: grid;
		grid-template-columns: repeat(5, 1fr); /* ????? 7 ? */
		gap: 5px; /* ??????? */
		margin: 2px 0;
		text-align: center;
		margin-bottom: 0;
		align-items: top;
	}
	
	/* ??????? */
	.table-wrapper4 {
	    flex: 1;
	    / * background-color: #0056b3;*/
	}
	
	/* ?????? */
	.inner-table4 {
	    width: 100%;
	    border-collapse: collapse;
	}
	
	.inner-table4 td {
	    padding: 5px;
	    border: 1px solid #ddd;
	}
	.inner-table4 img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover; /* ???????,?????? */
		object-position: center; /* ?????????? */
		transition: transform 0.5s ease-in-out;
	}
	
	.image-container {
	    position: relative;
	    width: 100%; /* ??????? */
	    max-width:80%; /* ??:??????,?????? */
	    margin: 0 auto; /* ??:???? */
	}
	
	.image-container img {
	    width: 100%; /* ???????? */
	    height: 100%;  ??????,???? */
	    display: block; /* ??????????? */
	}
	

/* ???????? */
.responsive {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

/* ?????? */
.responsive-table {
    flex: 1 1 30%;
    min-width: 300px;  /*??????????? */
}

/* ?????? */
.text-container {
    flex: 1 1 65%;
    min-width: 300px; /* ??????????? */
}

/* ??????? */
.responsive-table img {
    width: 100%;
    height: auto;
    display: block;
    align-items: center; /* ????? */
}
/* ?????? */
.responsive-table2 {
    flex: 1 1 10%;
    min-width: 300px;  /*??????????? */
}

/* ?????? */
.text-container2 {
    flex: 1 1 65%;
    min-width: 300px; /* ??????????? */
}

/* ??????? */
.responsive-table2 img {
    width: 100%;
    height: auto;
    display: block;
}
        .banner {
            width: 100%;
            height: 60px;
            overflow: hidden;
            position: relative;
            border: 1px solid #ccc;
        }

        /* ???? */
        .banner-images {
            display: flex;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            transition: left 1.5s ease-in-out;
        }

        /* ???? */
        .banner-images img {
            width: 150px;
            height: 53px;
            margin-right: 10px;
            cursor: pointer;
        }

        /* ?????? */
        .banner-button {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            border: none;
            cursor: pointer;
            padding: 5px;
            z-index: 1;
        }

        .banner-button.left {
            left: 0;
        }

        .banner-button.right {
            right: 0;
        }
        
        /* ???? */
        .banner-images2	 {
            display: flex;
            position: absolute;
            left: 0;
            /*top: 50%;*/
            transform: translateY(-50%);
            transition: left 1.5s ease-in-out;
        }

        /* ???? */
        .banner-images2 img {
            width: 100%;
            /*height: 53px;*/
            margin-right: 10px;
            cursor: pointer;
        }

        
        /* ??????? */
        .announcement-wrapper {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5); /* ????? */
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999; /* ??????????? */
        }

        .announcement {
            background-color: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            text-align: center;
        }

        .announcement img {
            width: 500px;
            height: auto; /* ?????????? */
            border-radius: 10px;
        }
        
        /* ???????? */
        .sticky {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
        }

        .sticky + .content {
            padding-top: 0px; /* ?????? */
        }

        /* ???? */
.carousel-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 70vh;  /*????? 60% */
    margin: 0;
    padding: 0;
}

.carousel-slides {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 100%;
    height: 100%;  /*??????? */
    align-items: top;
}

.carousel-slide {
    flex: 0  0 auto;
    width: 100%;
    height: 100%;  /*??????? */
    display: flex;
    justify-content: center;
    align-items: top;
}

.carousel-slide img {
    width: 100%;
    height: 100%; /* ???????? */
    object-fit: fill; /* ?????????? */
    object-position: center; /* ?????? */
}
		
        /* ?????? */
        .carousel-arrow {
            position: absolute;
            top: 65%;
            transform: translateY(-50%);
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            border: none;
            padding: 10px;
            cursor: pointer;
            font-size: 20px;
            z-index: 1001;
        }

        .carousel-arrow.left {
            left: 10px;
            z-index: 1001;
        }

        .carousel-arrow.right {
            right: 10px;
            z-index: 1001;
        }

        /* ?????? */
        .footer-image {
            width: 100%;
            height: auto;
            margin-top: 0;
            padding-top: 0;
        }

        .footer-image img {
            width: 100%;
            height: auto;
            object-fit: contain;
        }
        
        /* ??????? */
        .fixed-table {
            position: fixed;
            top:  30%; /* ???50px???,????? */
            right: 0; /* ???????? */
            width: 50px; /* ???? */
            height: auto;
            border: 0px; /* ???? */
            z-index: 1000;
        }

        /* ???? */
        .fixed-table table {
            width: 100%;
            border-collapse: collapse; /* ????? */
        }

        .fixed-table td {
            width: 100%;
            height: auto; /* ???????? */
            text-align: center;
            padding: 0;
        }

        /* ?????? */
        .fixed-table img {
            width: 50px;
            height: auto;
        }
        
        /* ???????? */
        @media (max-width: 768px) {
	        .logo {
	            height: auto;
	            width: 100%;
	            text-align: center;
	            position: relative;
	            margin-bottom: 0;
	            padding-bottom: 0;
	        }
	        .logo img {
	            /*max-width: 30px;*/
	            height: auto;
	            display: block;
	            margin: 0;
	        }
	        
		    .carousel-title {
		        font-size: 16px; /* ?????????? */
		        height: 40px; /* ???? */
		        line-height: 40px;
		    }
		  
		    .table-container {
		        flex-direction: column;
		    }
		    
		    .table-container2 {
		        flex-direction: column;
		    }
		    
		    .table-container3 {
		        flex-direction: column;
		    }
		    .table-container4 {
		        flex-direction: column;
		        grid-template-columns: repeat(3, 1fr); /* ??????? 2? */
		    }
		    
    .responsive {
        flex-direction: column;
        align-items: center; /* ????? */
    }

    .responsive-table,.text-container.responsive-table2,.text-container2 {
        flex: 1 1 100%; /* ???????? 100% */
    }
		    
		    .image-grid {
		        grid-template-columns: repeat(3, 1fr); /* ??????? 2? */
		        max-width: 100%; /* ?????? */
		        text-align: center;
		    }

            .menu-toggle {
                display: block;
                margin: 10px auto;
                top: 40px;  /*???????? */
                right: 0; /* ???????? */
                z-index: 1000;
            }
            .menu {
                width: 100%;
                flex-direction: column;
                display: none;
            }

            .menu.show {
                display: flex;
            }

            .submenu {
                position: static;
            }

            .menu li:hover > .submenu {
                display: none;
            }

            .menu li.active > .submenu {
                display: block;
            }

            .submenu .submenu {
                padding-left: 20px;
            }
            
	        .submenu li {
	            width: auto;
	        }
            
	    .carousel-container {
	        height: auto;  /*????????? */
	        /*height: 60vh;  ????? 60% */
	    }
	
	    .carousel-slide {
	        height: auto; /* ??????????? */
	    }
	
	    .carousel-slide img {
	        width: 100%;
	        height: auto; /* ????????? */
	        object-fit: contain; /* ??????,???? */
	    }
	    
        /* ?????? */
        .carousel-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            border: none;
            padding: 5px;
            cursor: pointer;
            font-size: 24px;
            z-index: 1001;
        }
	    
        .carousel-arrow.left {
            left: 5px;
            z-index: 1001;
        }

        .carousel-arrow.right {
            right: 5px;
            z-index: 1001;
        }	    
	    
	    /* ?? Google ???????????768px? */
	    #google_translate_element {
	        display: none;
	    }
	    #google_sch {
	        display: none;
	    }
	    #font_sch {
	        display: none;
	    }
	    .top_sch {
	        display: none;
	    }
        /* ???? ?? */
       .top_sch2 {
       	flex-wrap: wrap;  /*??:????????? */
		 }
        }
</style>