@charset "utf-8";
* {
box-sizing:border-box;
margin:0; padding:0;
}
a {
text-decoration:none;
}
ol, ul {
list-style-type:none;
}
div#modal {
display:none;
position:fixed;
left:0; top:0;
width:100%; height:100vh;
background:#00000080;
z-index:1000000;
}
div#modal:target {
display:block;
}
	section.winmodal {
	position:relative;
	width:400px; height:350px;
	margin:10vh auto;
	background:#fdfdfd;
	border:20px solid #9aceff;
	border-radius:30px;
	}
		section.winmodal > h2 {
		width:260px; height:50px;
		margin:30px auto;
		/* padding:20px 0 0 0; */
		color:#000;
		/* font-size:20px; */
		/* line-height:50px; */
		}
		section.winmodal > p {
		width:320px; height:250px;
		margin:auto;
		color:#000;
		line-height:30px;
		}
		section.winmodal > a {
		position:absolute;
		right:20px; bottom:10px;
		width:70px; height:40px;
		background:#e8f4ff;
		color:#0000bb;
		font-size:15px;
		font-weight:bold;
		line-height:30px;
		text-align:center;
		border:4px solid #9aceff;
		border-radius:9px;
		}
		section.winmodal > a:hover {
		background:#006dd0;
		color:#eaeaff;
		border:4px solid #003362;
		}
body {
/* animation:alocdaloc linear 4s infinite; */
}
div.wrap {
width:100%; height:700px;
/* background:#000; */
}
	div.headwrap {
	width:100%; height:100px;
	/* background:#ccc; */
	}
		header {
		width:1200px; height:100px;
		margin:0 auto;
		/* background:#ff0; */
		}
			div#home {
			position:relative;
			float:left;
			width:400px; height:100px;
			/* background:#88f; */
			}
				div#home img {
				position:absolute;
				left:30px; top:30px;
				width:200px; height:40px;
				animation:logoani 2s;
				}
			nav {
			position:relative;
			float:left;
			width:800px; height:100px;
			z-index:20;
			/* background:#c9f; */
			}
				ul.mainmenu {
				width:800px; height:60px;
				position:absolute;
				left:0; top:40px;
				background:#125697d0;
				/* clip-path:rect(0 800px 60px 0); */
				transition:all 0.2s;
				}
				ul.mainmenu:hover {
				height:220px;
				/* clip-path:rect(0 800px 220px 0); */
				}
					ul.mainmenu > li {
					float:left;
					width:200px; height:60px;
					background:#fff;
					font-size:24px;
					line-height:58px;
					text-align:center;
					/* clip-path:rect(0 200px 60px 0); */
					transition:all 0.4s;
					}
					ul.mainmenu > li:hover {
					background:#0076be;
					/* clip-path:rect(0 200px 292px 0); */
					}
						ul.mainmenu > li > a {
						display:block;
						width:200px; height:60px;
						color:#343434;
						/* text-align:center; */
						font-weight:bold;
						transition:all 0.2s;
						}
						ul.mainmenu > li:hover > a {
						color:#fff;
						font-weight:bold;
						}
						ul.submenu {
						height:0px;
						overflow:hidden;
						transition:all 0.2s;
						}
						ul.mainmenu:hover ul.submenu {
						height:160px;
						}
							ul.submenu > li {
							width:200px; height:40px;
							/* background:#1e90ff80; */
							font-size:18px;
							line-height:40px;
							/* transition:all 0.1s; */
							}
							ul.submenu > li:hover {
							background:#1e90ff;
							}
								ul.submenu > li > a {
								display:inline-block;
								width:100%; height:100%;
								/* background:#1e90ff; */
								color:#ccc;
								text-align:center;
								transition:all 0.2s;
								}
								ul.submenu > li:hover > a {
								/* background:#84c1ff; */
								color:#eee;
								}
	div.slide {
	position:relative;
	width:1200px; height:300px;
	margin:0 auto;
	background:#aaa;
	overflow:hidden;
	}
		div.slide > img {
		position:absolute;
		left:0; top:0;
		}
		img.slide1 {
		animation:anislide1 9s infinite;
		}
		img.slide2 {
		animation:anislide2 9s infinite;
		}
		img.slide3 {
		animation:anislide3 9s infinite;
		}
		div.slide > h2 {
		width:100%; height:100%;
		z-index:15;
		position:absolute;
		left:0; top:100px;
		color:#fff;
		font-size:50px;
		line-height:100px;
		text-align:center;
		text-shadow:2px 0 3px #000, 0 2px 3px #000, -2px 0 3px #000, 0 -2px 3px #000;
		}
		div.slide > h2.slide1text {
		left:-230px; top:20px;
		font-size:30px;
		animation:anitext1 ease-in 9s infinite;
		}
		div.slide > h2.slide2text {
		left:-270px; top:200px;
		font-size:30px;
		animation:anitext2 ease-in 9s infinite;
		}
		div.slide > h2.slide3text {
		left:-300px; top:140px;
		font-size:30px;
		animation:anitext3 ease-in 9s infinite;
		}
	div.contents {
	width:1200px; height:200px;
	margin:0 auto;
	/* background:#e3f3ff; */
	}
		div.c1c2 {
		position:relative;
		float:left;
		width:400px; height:200px;
		/* background:#e3f3ff; */
		}
			div.c1c2 > input {
			display:none;
			}
			div.c1c2 > input#notice {

			}
			div.c1c2 > input#gallery {

			}
			div.c1c2 > label {
			display:block;
			position:absolute;
			width:100px; height:39px;
			background:#ccc;
			color:#333;
			font-size:16px;
			line-height:38px;
			text-align:center;
			border:1px solid #444;
			z-index:5;
			}
			div.c1c2 > label.notilabel {
			left:31px; top:5px;
			border-radius:8px 0 0 0;
			}
			div.c1c2 > input#notice:checked ~ label.notilabel {
			background:#e3f3ff;
			border-bottom:0px solid #444;
			}
			div.c1c2 > label.galllabel {
			left:129px; top:5px;
			border-radius:0 8px 0 0;
			}
			div.c1c2 > input#gallery:checked ~ label.galllabel {
			background:#e3f3ff;
			border-bottom:0px solid #444;
			}
			div.c1c2 > div {
			display:none;
			position:absolute;
			left:5px; top:43px;
			width:390px; height:152px;
			background:#e3f3ff;
			border:1px solid #444;
			border-radius:10px;
			}
			div.notibox {
			}
			div.c1c2 > input#notice:checked ~ div.notibox {
			display:block;
			}
				div.notibox > p {
				width:100%; height:100%;
				padding:10px;
				}
					div.notibox > p > a {
					display:block;
					height:32px;
					color:#000;
					font-size:13px;
					line-height:30px;
					font-style:normal;
					/* font-weight:bold; */
					}
					div.notibox > p > a:hover {
				    text-decoration:underline dotted;
					color:#0083cb;
					font-weight:bold;
					font-style:italic;
					}
			div.gallbox {
			padding:11px 8px;
			}
			div.c1c2 > input#gallery:checked ~ div.gallbox {
			display:block;
			}
				div.gallbox > img {
				width:120px; height:130px;
				border:4px solid #99d2e3;
				border-radius:10px;
				}
		div.banner {
		position:relative;
		float:left;
		width:500px; height:200px;
		/* background:#088; */
		}
			div.banner > img {
			width:450px; height:190px;
			margin:5px 25px;
			border-radius:20px;
			}
			div.banner > p {
			position:absolute;
			left:40px; top:20px;
			color:#fff;
			font-size:24px;
			line-height:20px;
			text-align:center;
			text-shadow: 2px 2px 2px #000;
			}
		div.link {
		float:left;
		width:300px; height:200px;
		/* background:#0f8; */
		}
			div.link > div {
			float:left;
			width:300px; height:90px;
			margin:5px 0px;
			/* padding:0px 20px; */
			}
				div.link > div > a {
				position:relative;
				float:left;
				width:130px; height:90px;
				margin:0px 10px;
				}
					div.link > div > a > img {
					width:100%; height:100%;
					}
					div.link > div > a > p {
					position:absolute;
					left:0px; top:0px;
					width:100%; height:100%;
					color:#333;
					font-size:25px;
					text-align:center;
					line-height:90px;
					}
					div.link > div > a:hover > p {
					left: 7px;
					top: 7px;
					width: 116px;
					height: 76px;
					background:#b6dfeb;
					line-height:76px;
					font-weight:bold;
					z-index: -1;
					}
	div.footerwrap {
	width:100%; height:100px;
	background:#f4f7fa;
	}
		footer {
		width:1200px; height:100px;
		margin:0 auto;
		/* background:#f8f; */
		}
			div.logo2 {
			position:relative;
			float:left;
			width:400px; height:100px;
			/* background:#f48ea3; */
			}
				div.logo2 img {
				position:absolute;
				left:30px; top:30px;
				width:200px; height:40px;
				}
			div.footsub {
			float:left;
			width:800px; height:100px;
			/* background:#556B2F; */
			}
				ul.lowermenu {
				width:800px; height:60px;
				margin:auto;
				/* padding:0 40px; */
				line-height:40px;
				}
					ul.lowermenu > li {
					float:left;
					width:120px; height:30px;
					margin:15px auto;
					font-size:13px;
					line-height:26px;
					text-align:center;
					}
						ul.lowermenu > li > a {
						display:inline-block;
						width:100%; height:100%;
						color:#333;
						}
						ul.lowermenu > li > a:hover {
						font-weight:bold;
						}
				div.copyright {
				position:relative;
				width:800px; height:40px;
				}
					div.copybox {
					position:absolute;
					left:5px;
					width:700px; height:100%;
					}
						div.copybox > p {
						font-size:14px;
						}
						div.copybox > p.copy1 {
						float:left;
						}
						div.copybox > p.copy2 {
						float:right;
						}
						div.copybox > p.copy3 {
						clear:both;
						}
							div.copybox > p > a {
							color:#2b2bff;
							font-weight:bold;
							}
							div.copybox > p.copy1 > a {

							}
							div.copybox > p.copy2 > a {

							}
							div.copybox > p.copy3 > a {

							}
@keyframes logoani {
  0% {top:-40px;}
100% {top:30px;}
}
@keyframes anislide1 {
  0% {left:0; z-index:1;}
 25% {left:0; z-index:1;}
 33% {left:1200px; z-index:1;}
 34% {left:1200px; z-index:0;}
 66% {left:0; z-index:0;}
 99% {left:0; z-index:1;}
100% {left:0; z-index:1;}
}
@keyframes anislide2 {
  0% {left:0; z-index:0;}
 33% {left:0; z-index:0;}
 34% {left:0; z-index:1;}
 58% {left:0; z-index:1;}
 66% {left:1200px; z-index:1;}
 67% {left:1200px; z-index:0;}
 99% {left:0; z-index:0;}
100% {left:0; z-index:0;}
}
@keyframes anislide3 {
  0% {left:1200px; z-index:-1;}
 33% {left:0; z-index:-1;}
 34% {left:0; z-index:0;}
 66% {left:0; z-index:0;}
 67% {left:0; z-index:1;}
 91% {left:0; z-index:1;}
 99% {left:1200px; z-index:1;}
100% {left:1200px; z-index:-1;}
}
@keyframes anitext1 {
  0% {opacity:1; z-index:1;}
 25% {opacity:1; z-index:1; left:-230px;}
 33% {opacity:0; z-index:0; left:0px;}
 91% {opacity:0; z-index:1; left:-230px;}
 99% {opacity:1; z-index:1;}
100% {opacity:1; z-index:1;}
}
@keyframes anitext2 {
  0% {opacity:0; z-index:0;}
 25% {opacity:0; z-index:0;}
 33% {opacity:1; z-index:1;}
 58% {opacity:1; z-index:1; left:-270px;}
 66% {opacity:0; z-index:0; left:-40px;}
100% {opacity:0; z-index:0; left:-270px;}
}
@keyframes anitext3 {
  0% {opacity:0; z-index:0;}
 58% {opacity:0; z-index:0;}
 66% {opacity:1; z-index:1;}
 91% {opacity:1; z-index:1; left:-300px;}
 99% {opacity:0; z-index:1; left:-70px;}
100% {opacity:0; z-index:0; left:-300px;}
}
@keyframes alocdaloc {
  0% {filter:hue-rotate(0deg);}
100% {filter:hue-rotate(360deg);}
}