/*-------------------------------------------------------------------------------- global */
* 			{ background-repeat:no-repeat;  background-position:left top; vertical-align:top; font-family:微軟正黑體,'Microsoft JhengHei',Arial,sans-serif; }

html 		{ overflow-x:hidden; }

body 		{ padding:0px; margin:0px; min-height:100vh; background-image:linear-gradient( 135deg, #3C8CE7 10%, #000000 100%); }

body, textarea, input, button, label, select { font-size:1.1rem; color:#333; }

/*-------------------------------------------------------------------------------- margin & padding */
.MT0			{ margin-top:0px; }
.MT10			{ margin-top:10px; }
.MT20			{ margin-top:20px; }
.MB20			{ margin-bottom:20px; }

/*-------------------------------------------------------------------------------- a & button */
a				{ color:#00A3D8; text-decoration:none; }
a:hover			{ color:#EC358F; text-decoration:underline; position:relative; top:1px; }
a       .Strong	{ color:#008FBF; }
a:hover .Strong	{ color:#DC1478; }

button 			{ background:linear-gradient(135deg, #667eea, #764ba2); color:white; font-weight:600;
					border:none; padding: 0.8rem 2.4rem; border-radius:40px; box-shadow:0 4px 16px rgba(102, 126, 234, 0.4);
					cursor: pointer; transition:all 0.3s ease; }
button:hover 	{ box-shadow:0 8px 30px rgba(102, 126, 234, 0.6); transform:translateY(-2px); }
button.Red 			{ background:transparent; color:#e74c3c; border:2px solid #e74c3c; box-shadow:0 4px 16px rgba(255, 0, 0, 0.2); }
button.Red:hover 	{ background:#e74c3c; color:white; box-shadow:0 8px 30px rgba(255, 0, 0, 0.4); }
	
button.Gray 		{ background:transparent; color:#6c757d; border:2px solid #6c757d; box-shadow:0 4px 16px rgba(255, 0, 0, 0.1); }
button.Gray:hover 	{ background:#6c757d; color:white; box-shadow:0 8px 30px rgba(0, 0, 0, 0.3); }

/*-------------------------------------------------------------------------------- #Layout */
#Layout 	{ max-width:1200px; width:90%; min-height:100vh;
				position:relative; margin:0 auto; padding:0px 0px 0px 0px;
				background-image:url("image/bg.jpg"); background-color:#AA8A09; background-position:top; background-attachment:inherit;
				box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }
@media (width <= 1000px) { #Layout { width:100%; } }
@media (width <= 600px)  { #Layout { box-shadow:none; padding:0px; } }

/*-------------------------------------------------------------------------------- #Header */
#Header 			{ display:grid; grid-template-columns:repeat(auto-fit,minmax(420px, 1fr)); position:relative; top:0px; width:100%; }
#Header #Logo		{ background-image:url("image/logo.png"); width:420px; height:90px; margin-left:20px; }
#Header #Nav 		{ margin-left:20px; }

/*-------------------------------------------------------------------------------- #Content */
#Content {
	/*
            background: white;
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
	*/
			margin:0px;
			padding:0px;
            width: 100%;
			min-height:600px;
            animation: fadeIn 0.6s ease-out;
}
@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
	
/*
.card {
            background:white; border-radius:20px; padding: 40px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            width: 100%;
            max-width: 600px;
            text-align: center;
            animation: fadeIn 0.6s ease-out;
        }

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