* {margin:0; padding:0; box-sizing:border-box;-webkit-transition-property: all;-moz-transition-property:all; }
* { font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Open Sans", "Noto Sans", "Noto Naskh Arabic", "Amiri", Tahoma, "Noto Sans SC", "Noto Sans TC", "Microsoft YaHei", "PingFang SC", "Noto Sans JP", "Yu Gothic", Meiryo, "Noto Sans KR", "Malgun Gothic", "Noto Sans Hebrew", "Noto Sans Thai", sans-serif;
margin: 0; padding: 0; box-sizing: border-box;
-webkit-transition-property: all; -webkit-transition-duration:.3s;
-moz-transition-timing-function: cubic-bezier(100,50,21,6);-moz-transition-property: all; -moz-transition-timing-function: cubic-bezier(100,50,21,6);}

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite,
code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details,embed,figure, 
figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video {
margin:0; padding:0;border:0; scroll-behavior:smooth; font-family:"system-ui", sans-serif; Line-height:35.007px;color:#666; }  

body { min-height: 100vh; font-size:20px ;background-color:#f8f9fa;color:#333;scroll-behavior:smooth;
font-family:-apple-system,BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Open Sans", "Noto Sans", "Noto Naskh Arabic", "Amiri", Tahoma, "Noto Sans SC", "Noto Sans TC", "Microsoft YaHei", "PingFang SC", "Noto Sans JP", "Yu Gothic", Meiryo, "Noto Sans KR", "Malgun Gothic", "Noto Sans Hebrew", "Noto Sans Thai", sans-serif;
}
.container { width:100%; min-height:100%; background:#f8f9fa;  position:relative; margin:0; padding:0; font-size:20px;color:#020617 ; 
justify-content: center;align-items: center; -webkit-text-size-adjust: 100%;  -ms-text-size-adjust: 100%;-moz-text-size-adjust:100%;text-size-adjust: 100%;
font:inherit;vertical-align:baseline;white-space: normal;}

.responsive{height:auto;display:block;margin-left:auto;margin-right:auto;margin-top:auto;margin-bottom:auto;width:99.8%;justify-content:center;align-items:center;}
       
.header{height:62px;line-height:62px; width:100%;background-color:#003994; color:#333;padding:2px; }

 nav form { background-color:#003994; display:flex; width:100%; align-content:center;  animation:2s ease-out 0s 1 bounceIn ; 
  position:-webkit-sticky; position:sticky;top:0; z-index:9999;}
	.navmenu a { color:#ffffff; text-decoration:none; text-transform:uppercase; height:45px; Line-height:45px;  }
	.navmenu label { color:#ffffff; text-decoration:none; text-transform:uppercase;  }
	.navmenu .checkboxlabel, [id^=check] { display: none; cursor:pointer;   }
	.navmenu {  background-color:#024fc9;margin: 0px auto; padding:0px;  color:#ffffff; white-space:nowrap; font-weight:normal; }
	.navmenu:after { content: ''; display: table;clear:both; }
	.navmenu ul { position:relative; float:none; padding:0px; margin:0px; list-style:none; cursor:pointer;} 
	.navmenu ul li { background-color:#003994 ;float:left; display:inline-block; margin: 0px;  }
	.navmenu ul li:hover { background-color:#0532e6;     }
	.navmenu a { display: block; padding:0px 15px; font-size:17px;  }
	.navmenu ul li ul li:hover { background-color:#000; }
	.navmenu a:hover { background-color:#0532e6; }
	.navmenu ul li ul { position: absolute; display:none; top:45px; } 
	.navmenu ul li:hover > ul { display: inherit;background-color:#000; } 
	.navmenu ul li ul li { position:relative; float:none; display: list-item; width:auto; background-color:#003994;  animation: 1s ease-out 0s 1 slideInFromtop;}
	.navmenu ul li ul li ul { position: absolute; top:0px; left:100%; }
	.navmenu li > label:after { margin-left:1px; content: '\25bc'; }
	.navmenu li > a:after { margin-left:1px; content: '\25bc'; }
	.navmenu li ul li a:after { display: inline-block; transform: rotate(270deg);       }
	
	.navmenu li > a:only-child:after { content: ''; }

	@media screen and (max-width :750px) {
	
	.navmenu .checkboxlabel  {font-size:16px;font-weight:bold;  }

		.navmenu { margin:0px; white-space:normal; word-wrap: break-word !important; width:100%; }
		.navmenu a:hover { background-color:#0532e6; color:#fff; }
		.navmenu .topmenu { background-color:#003994;font-size:18px;  }
		.navmenu .topmenu:after { float:right; content: '\2630'; margin-right:-8px; }
		.navmenu .checkboxlabel + a, .menu { display:none; }
		.navmenu .checkboxlabel { background-color:#003994 ;display:block;  padding:0px 16px;  }
		.navmenu .checkboxlabel:hover { background-color:#024fc9; }
		.navmenu [id^=check]:checked + ul { display: block; }
		.navmenu ul li { display: block; width: 100%; }
		.navmenu ul li ul .checkboxlabel, .navmenu ul li ul a { padding:0px 25px; }
		.navmenu ul li ul li ul { position: relative; left: 0px; }
		.navmenu ul li ul li a {  background:#fff; color: #222; }
		.navmenu ul li ul li ul a { background-color:#0099d8; }
		.navmenu ul li ul li .checkboxlabel, .navmenu ul li ul a, .navmenu ul li ul li ul a { padding: 0px 20px; font-size:16px;  background:#fff; color:#222; }
		.navmenu ul li ul li .checkboxlabel, .navmenu ul li ul a { background-color:#ff6600; }
		.navmenu ul li ul { position: static; float: none; } 
		.navmenu ul li ul li:hover > ul, .navmenu ul li:hover > ul { display: none; } 
		.navmenu ul li ul li { display:block; width:100%; }
		.navmenu ul li ul li ul li { position:static; }
		.navmenu li > label:after { float:right; }
		.navmenu li > a:after { float:right; }
	}
	
@keyframes slideInFromLeft {
0% {transform: translateX(-100%);}
  100% {transform: translateX(0);}
}
@keyframes slideInFromright {
  0% {transform: translateX(100%);}
  100% { transform: translateX(0);}
}
@keyframes slideInFromtop{
  0% {transform:translatey(100%);}
  100% {transform:translatey(0); }
}
@keyframes slideInFrombottom{
  0% {transform: translatey(-100%);  }
  100% { transform: translatey(0);}
}

section {background-color:#E6F7FF;padding: 20px;z-index:1;}
.content-section {display:flex;flex-wrap:wrap; gap:16px;padding:16px;box-sizing:border-box; background-color:#fafafa;}
.card {background:#fff; padding:12px; flex: 1 1 calc(25% - 12px); box-sizing:border-box; display:flex; flex-direction:column; word-wrap: break-word;}
.card img {width:90%; height:auto; object-fit:cover;display:block;border-radius:1%;}
.card h1, .card h2, .card h3, .card h4, .card h5, .card h6 { margin: 10px 0;text-align: center;}
.card h1 { font-size: 26px; color: #f45325; }
.card h2 { font-size: 24px; color: #000; }
.card h3, .card h4, .card h5, .card h6 { font-size: 19px; color: #000; text-align: left; }
.card p { margin-bottom: 10px; overflow-wrap: break-word; max-width: 100%;}

form {margin-top: 15px;}
.input-row {margin-bottom: 10px; display: flex; flex-direction: column;}
.input-row label {font-weight: bold; margin-bottom: 5px;}
.input-row input, .input-row textarea {padding: 8px;  font-size: 16px; border: 1px solid #ccc; border-radius: 4px; }
.input-row input[type="submit"] {  background-color: #f45325;  color: white;  border: none;  cursor: pointer;  width: 120px;}
@media (max-width: 999px) {
 .card {flex: 1 1 calc(50% - 10px); }}
@media (max-width: 799px) {
.card {flex: 1 1 100%; padding: 10px;} }
@media (max-width: 515px) { .content-section { padding: 8px; }
.card { flex: 1 1 100%;padding: 8px;}
.card img {width: 100%;height: auto;} }


.footer {background-color:#1a1a1a; color:#fff;padding:40px 20px 20px;}
.footer-container {display:flex;flex-wrap:wrap; justify-content:space-between; gap:30px; max-width:1200px;margin:0 auto;}
.footer-column {flex: 1 1 220px; min-width: 220px; }
.footer h3 {font-size:18px;margin-bottom:15px;color:#f1c40f;}
.footer p,.footer a { font-size:14px; color:#ccc; text-decoration none;line-height:1.6;}
.footer a:hover { color: #fff;}
.footer-bottom {border-top:1px solid #333; margin-top:30px; padding-top:15px;text-align:center; font-size:13px;color:#888;}
 @media (max-width: 768px) {
.footer-container {flex-direction:column; text-align:center; }
.footer-column { margin-bottom: 25px;}}
	
#myBtn {display:none;   position:fixed; bottom:20px;  left:20px;  z-index:99;  border:none;  outline:none;  background-color:#ff6f61;  color:white; cursor:pointer;  padding:15px;  border-radius:10px; font-size:18px; }
#myBtn:hover { background-color:#555;transition: 1s; }