@charset "utf-8";
/* CSS Document */

html, body { margin:0px; }

/*  @font-face {
		  font-family: "DFNewMaruGothic";  
		  src: local("DFNewMaruGothic"), 
          url("fonts/華康新綜藝體.ttf") format("woff2");
		  font-display: swap;
		 
}  */


@font-face {
      font-family: "EPHVAG";
      src: local("EPHVAG"), 
           url("fonts/EPHVAG.ttf") format("woff2");
      font-display: swap;
} 

@font-face {
      font-family: "DFNewMaruGothic";
      src: local("DFNewMaruGothic"), 
           url("fonts/華康新綜藝體.ttc") format("woff2");
          /*  url("fonts/新綜藝體W9.ttc") format("woff2"); */
      font-display: swap;
} 
       
@font-face {
      font-family: "DFHeiBold";
      src: local("DFHeiBold"), 
           url("fonts/粗圓體.ttc") format("woff2");
      font-display: swap;
} 

/* body { width:100%; font-size-adjust:100%; -webkit-text-size-adjust:100%; box-sizing:border-box; position:relative; color:#000000; font-size:16px; font-family:"Lato", "微軟正黑體", "Microsoft JhengHei", sans-serif; overflow:hidden-x; overflow-y:auto; } */
/* body { width:100%; font-size-adjust:100%; -webkit-text-size-adjust:100%; box-sizing:border-box; position:relative; color:#000000; font-size:16px; overflow:hidden-x; overflow-y:auto; } */


body {
  margin: 0;  /* 移除默認body邊距 */
  padding: 0;
 /* font-family: 
        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 
        Helvetica, Arial, sans-serif,
        "DFHeiBold", "華康粗圓體", "Microsoft YaHei", sans-serif; */
      /* font-weight: bold;  */
}

a { outline:none; text-decoration:none; }

ul, ol { list-style:none; margin:0; padding:0; }
li { vertical-align:top; }

h1, h2, h3, h4, h5, p { padding:0; margin:0; }

img { border:none; }

/* input, select, textarea { font-family:"Lato", "微軟正黑體", "Microsoft JhengHei", sans-serif; } */

input:focus, select:focus, textarea:focus { border-color:#66afe9; outline:0; -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6); box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6); outline:thin dotted; outline:5px auto -webkit-focus-ring-color; outline-offset:-2px; }

button, input[type=submit], input[type=reset], input[type=button] { -webkit-appearance:none; appearance:none; }

/* ---------------- clear fix ---------------- */

.clearfix:after { content:"."; display:block; clear:both; visibility:hidden; xline-height:0; height:0; font-size:0; }
.clearfix { display:inline-block; }
html[xmlns] .clearfix { display:block; }
* html .clearfix { height:1%; }

/*-------------------------------------------------------------------------------------*/
/* LAYOUT */
#wrap .container { max-width:1252px; }
#wrap { width:100%; background-color:#ffffff; box-sizing:border-box; position:relative; z-index:1000; overflow:hidden;height: auto !important; min-height: 100vh; }
#wrap .container { width:100%; max-width:1272px; padding-left:15px; padding-right:15px; margin:0px auto; position:relative; box-sizing:border-box; display:block; }
#wrap .container {
	display: flex;
	/* align-items: center; */
	flex-wrap: wrap;
}

#wrap .overlay { position:absolute; left:0; top:0; z-index:5000; width:0; height:0; background-color:rgba(0,0,0,0.3); opacity:0; transition-delay:0.3s; -webkit-transition-delay:0.3s; -moz-transition-delay:0.3s; }
.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}


.box .row.top {
  min-width:100%;
  flex: 0 1 auto;

}

.box .row.middle {
  flex: 1 1 auto;
}

.box .row.bottom {
  flex: 0 1 82px;
}

#top { background-image:url(../img/header.png);padding-top:4px; background-repeat:repeat-x; background-position:center top;  position:relative; z-index:101; display:block; }
#top {
	padding: 10px 0 8px 0;
	height:90px;
}
#top .logo_area { float:left; position:relative; display:flex; align-items:center; flex-grow: 1;margin: 10px 0 0 10px;}
#top .logo { float:left; width:152px; padding-right:8px; position:relative; }
#top .logo:after { position:absolute; right:0; top:50%; content:""; width:1px; height:77%; background-color:#ffffff; transform:translateY(-50%); }
#top .logo img { width:100%; display:block; }
#top .course_logo { width:105px; padding-left:10px; }
#top .course_logo img { width:100%; display:block; }




#main { position:relative; overflow:hidden; }
#main .container { z-index:1; }


#main .content { width:100%; display:block; padding:0px 0; }

#main .back_to_top { position:fixed; right:245px; bottom:30px; width:60px; display:none; cursor:pointer; }
#main .back_to_top.onBottom { /*position:absolute;*/ bottom:105px !important; }
#main .back_to_top img { width:100%; display:block; }


 #main::after {
    content: "";
			 background-image: url('../img/gs_bg_1650.png');
			background-repeat: no-repeat;
			background-position: bottom center; 
			background-size: 100% auto; 
			opacity: 0.8;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: -1;
			width: 100%; 
			height: 100vh;
			margin: 0;   
			
		/*	
		 content: "";
		background-image: url('../img/gs_bg_1650.png');
		background-repeat: no-repeat;
		background-position: top center;  
		background-size: 100% auto; 
		opacity: 0.8;
		position: absolute;
		top: 0; 
		left: 0;
		right: 0;
		z-index: -1;
		width: 100%; 
		height: 100vh;
		margin: 0; 
*/
}
   

.container {
				width: 100%;
				max-width: 1200px; /* 可根據需要調整 */
				margin: 0 auto;
				padding: 0 15px;
}

 /* 頁中內容樣式 */
        main {
            flex: 1;
            padding: 20px 0;
        }
        
        .banner {
            width: 100%;
            margin-bottom: 40px;
            text-align: center;
        }
        
        .banner img {
            max-width: 100%;
            height: auto;
            display: inline-block;
        }
		

        
        .image-button-container {
            max-width: 100%;
            text-align: center;
        }
        
        .image-button {
            position: relative;
            display: inline-flex;
            cursor: pointer;
            border: none;
            background: none;
            padding: 0;
            /* font-family: 'DFHeiBold', 'Microsoft JhengHei', sans-serif; */
            width: 100%;
            max-width: 410px; /* 最大寬度 */
            transition: transform 0.2s ease;
			white-space: normal;
			word-wrap: break-word;
			word-break: break-word;
			line-height: 1.3;
        }
		
        
        /* 圖片自適應 */
        .button-image {
            display: block;
            width: 100%;
            height: auto;
            transition: opacity 0.3s ease;
        }
        
        .button-image.hover {
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            width: 100%;
        }
		
		.image-button:focus {
			outline: none;
			box-shadow: none;
			border: none; 
		}
        
        /* 文字樣式 */
        .button-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #553c83;
            font-size: 18pt;
           /*  font-weight: bold; */
            text-align: center;
           /*  text-shadow: 1px 1px 3px rgba(0,0,0,0.3); */
            pointer-events: none;
            white-space: nowrap;
            transition: all 0.3s ease;
            width: 90%; 
            overflow: hidden;
            text-overflow: ellipsis;
        }
		
		.button-text-chi {
			font-family: 'DFHeiBold', 'Microsoft JhengHei', sans-serif; 
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #553c83;
            font-size: 18pt;
           /*  font-weight: bold; */
            text-align: center;
           /*  text-shadow: 1px 1px 3px rgba(0,0,0,0.3); */
            pointer-events: none;
            white-space: nowrap;
            transition: all 0.3s ease;
            width: 90%; 
            overflow: hidden;
            text-overflow: ellipsis;
        }
		
		.button-text-eng {
			font-family: 'EPHVAG', 'Microsoft JhengHei', sans-serif; 
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #553c83;
            font-size: 18pt;
           /*  font-weight: bold; */
            text-align: center;
           /*  text-shadow: 1px 1px 3px rgba(0,0,0,0.3); */
            pointer-events: none;
            white-space: nowrap;
            transition: all 0.3s ease;
            width: 90%; 
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
       
        .image-button:hover .button-image.default {
            opacity: 0;
        }
        
        .image-button:hover .button-image.hover {
            opacity: 1;
        }
		        
        .image-button:hover .button-text {
            color: #ffffff !important;
            text-shadow: 1px 1px 5px rgba(0,0,0,0.5);
        }
        
       
        @media (max-width: 768px) {
            .button-text {
                font-size: 14pt;
            }
        }
        
        @media (max-width: 480px) {
            .button-text {
                font-size: 12pt;
            }
        } 
        
 
		
		.category-row {
            width: 100%;
            margin-bottom: 20px;
        }
        
        .category-image {
            width: 100%;
            display: flex;
            align-items: center;
            overflow: hidden;
			margin-left: 10px;
        }
        
        .category-image img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }
        
        .columns-container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            width: 100%;
			text-align:center;
        }
        
        .column {
            flex: 1;
            min-width: 300px;
            display: flex;
            flex-direction: column;
            gap: 15px;
			margin-left: 30px;
        }
        
        .product-item {
            padding: 10px;
            background-color: #f9f9f9;
            border-radius: 4px;
            border-left: 4px solid #4CAF50;
        }
		
		
		/* 文字樣式 */
        .category-text {
			font-family: 'DFHeiBold', 'Microsoft JhengHei', sans-serif; 
            color: #9d3531;
			font-size: 24pt;
			font-weight: bold; 
        }

		.category-text-chi {
			font-family: 'DFHeiBold', 'Microsoft JhengHei', sans-serif;  
            color: #9d3531;
			font-size: 24pt;
			font-weight: bold; 
        }
		
		.category-text-eng {
			font-family: 'EPHVAG', 'Microsoft JhengHei', sans-serif; 
            color: #9d3531;
			font-size: 24pt;
			font-weight: bold; 
        }
		
		.category-text-footer {
			/* font-family: 'DFHeiBold', 'Microsoft JhengHei', sans-serif;  */
            color: #5a3b7f;
			font-size: 14pt;
			text-align: justify;
			display: flex; 
			align-items: flex-start; 
			gap: 8px;
			margin: 20px 0 0 115px
        }

		.footer {
            width: 100%;
            background-color: #c0bde5;
            padding: 14px 10px;
			font-weight: bold;
        }	
		
		.footer-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            max-width: 1200px;
            margin: 0 auto;
            gap: 30px;
        }
        
        .footer-logo {
            flex: 0 0 auto;
        }
        
        .footer-logo img {
            max-width: 180px;
            height: auto;
        }

        
		 .footer-dropdown {
			flex: 1;
            max-width:200px;
            background:#553c83; 
			background:-moz-linear-gradient(top,  #553c83 0%, #d7f1f8 100%); 
			background:-webkit-linear-gradient(top,  #553c83 0%,#d7f1f8 100%); 
			background:linear-gradient(to bottom,  #fdfdfd 0%,#d7f1f8 100%);
			border-radius:6px;
			position:relative; 
			cursor:pointer; 
		}
		 
		.footer-dropdown select { 
			display:block; 
			width:100%; 
			height:28px; 
			padding:4px 12px; 
			font-size:13px; 
			color:#553c83; 
			background:#553c83; 
			background:-moz-linear-gradient(top,  #553c83 0%, #d7f1f8 100%); 
			background:-webkit-linear-gradient(top,  #fdfdfd 0%,#d7f1f8 100%); 
			background:linear-gradient(to bottom,  #fdfdfd 0%,#d7f1f8 100%); 
			filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdfdfd', endColorstr='#d7f1f8',GradientType=0 ); 
			border:1px solid #d69c46; 
			border-radius:4px; 
			box-sizing:border-box; 
			-webkit-appearance:none; 
			appearance:none; 
			-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075); 
			box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075); 
			-webkit-transition:border-color ease-in-out .15s, box-shadow ease-in-out .15s; 
			-o-transition:border-color ease-in-out .15s, box-shadow ease-in-out .15s; 
			transition:border-color ease-in-out .15s, box-shadow ease-in-out .15s; 
		}
		
		.footer-dropdown:before { 
			position:absolute;
			right:15px; 
			top:50%; 
			z-index:1;
			content:""; 
			width:0;
			height:0; 
			border-style:solid;
			border-width:0 4px 5px 4px; 
			border-color:transparent transparent #008cd6 transparent; 
			transform:translateY(-50%); 
		} 
        
        .footer-links {
            flex: 1;
            text-align: right;
            min-width: 250px;
        }
		
        
        .footer-links-top {
			display: flex;
			align-items: center;
			justify-content: flex-end;
        }
        
        .footer-links-top a {
           
            text-decoration: none;
            margin: 0 5px; 
			color:#553c83;
			vertical-align:top; 
			font-size:14px; 
        }
        
        .footer-links-top a:hover {
            text-decoration: underline;
        }
        
        .footer-links-top a:first-child {
            margin-left: 0;
        }
        
        .footer-links-bottom {
			color:#553c83;
			font-size:12px; 
			margin-right: 5px;
        }
        
        /* 响应式调整 */
        @media (max-width: 768px) {
            .footer-container {
                flex-direction: column;
                align-items: center;
                gap: 10px;
            }
            
            .footer-dropdown {
                margin-left: 0;
                width: 100%;
            }
            
            .footer-links {
                text-align: left;
                width: 100%;
            }
            
           .footer-links-top {
				/* margin-bottom: 10px; */
				display: flex;
				align-items: center;
				justify-content:center;
			}
			
			.footer-links-bottom {
				text-align:center;
			}
			
			.category-text-footer {
			
				margin: 20px 0 0 50px
			}

			
        }

	.english {
	  font-family: "Arial", sans-serif;
	}