@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP|Noto+Serif+JP&display=swap");
html, body {
	font-family: "Microsoft JhengHei", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	font-size: 1rem;
	line-height: 1.5;
	color: #000;
	background: #FFF;
	letter-spacing: 2px;
}
body, div, span, ul, ol, li, form {
	margin: 0;
	padding: 0;
}
ul, li {
	list-style-type: none;
}
li {
	padding-right: 10px;
}
a {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}

.header-top-menu a {
	color: #FFF;
}
.header-top-content{
	margin:5px 0;
}
.nav-link {
	font-size: 1.2em;
	margin-right: 3em;
}
.main {
	display: inline-block;
	width: 100%;
}
.top-sea {
	display: inline-block;
	width: 100%;
}
.bottom-sea {
	display: inline-block;
	width: 100%;
}
.content-box {
	display: inline-block;
	width: 100%;
}
.bg-darkblue {
	background: #042048;
}
.bg-darkblue2 {
	background: #04204891;
}
.pop {
	display: inline-block;
	padding: 3.6em;
	margin: 5em;
	color: #FFF;
	border-radius: 20px;
	text-align: justify;
}
.pop p {
	font-size: 1.8em;
	text-align: justify;
}
.animal {
	animation: zy 2.5s .15s linear infinite;
  -moz-animation: zy 2.5s .15s linear infinite; /* Firefox */
  -webkit-animation: zy 2.5s .15s linear infinite; /* Safari and Chrome */
  -o-animation: zy 2.5s .15s linear infinite; /* Opera */
	display: inline-flex;
}




/*聯絡我們-頁面樣式*/
.pop2 {
	display: inline-block;
	padding: 3em;
	margin: 2em;
	color: #FFF;
	border-radius: 20px;
	text-align: justify;
}
.pop2 p {
	font-size: 1.8em;
	text-align: justify;
}
.contact-map
{
	border:1px solid #61bccc;
	padding:6px 6px 0px;
	display: inline-block;
	width: 45%;
}

.contact-box{
	float: right;
	width: 53%;
}

.contact-txt
{
	margin:0 auto 10px;
	padding:5px 20px;
	border-top:1px solid #61bccc;
	border-right:2px solid #61bccc;
	border-left:1px solid #61bccc;
	border-bottom:2px solid #61bccc;
	background-color:#f9feff;
	color: #0a5360;
	text-decoration: none;
	font-weight:bold;
}
textarea {
  resize : none;
}
 @-webkit-keyframes zy{
  10% {
    transform: rotate(15deg);
  }
  20% {
    transform: rotate(-10deg);
  }
  30% {
    transform: rotate(5deg);
  }
  40% {
    transform: rotate(-5deg);
  }
  50%,100% {
    transform: rotate(0deg);
  }
}
@-moz-keyframes zy{
  10% {
    transform: rotate(15deg);
  }
  20% {
    transform: rotate(-10deg);
  }
  30% {
    transform: rotate(5deg);
  }
  40% {
    transform: rotate(-5deg);
  }
  50%,100% {
    transform: rotate(0deg);
  }
}
@-o-keyframes zy{
  10% {
    transform: rotate(15deg);
  }
  20% {
    transform: rotate(-10deg);
  }
  30% {
    transform: rotate(5deg);
  }
  40% {
    transform: rotate(-5deg);
  }
  50%,100% {
    transform: rotate(0deg);
  }
}
@keyframes zy{
  10% {
    transform: rotate(15deg);
  }
  20% {
    transform: rotate(-10deg);
  }
  30% {
    transform: rotate(5deg);
  }
  40% {
    transform: rotate(-5deg);
  }
  50%,100% {
    transform: rotate(0deg);
  }

}



@media (max-width: 575.98px) {
h1,h4,h5 {
	font-size: 100%;
	margin-top:1em;
}
.bgroup{text-align: center;}				
.contact-box{padding:0;margin:0; width:100%;}	
.pop {
	padding: 1em;
	margin: 0;
	text-align: justify;
}
.pop2 {
	padding: 0.6em;
	margin: 0;
	text-align: justify;
}
.pop p {
	font-size: 100%;
}
.animal,.contact-map {
	display: none;
}
	
}

@media (min-width: 576px) and (max-width: 767.98px) {
h1,h4,h5 {
	font-size: 100%;
}
.bgroup{text-align: right;}				
.pop {
	padding: 1em;
	margin: 1em;
	text-align: justify;
}
.pop2 {
	padding: 1em;
	margin: 0;
}
.pop p {
	font-size: 100%;
	text-align: justify;
}
.animal,.contact-map {
	display: none;
}
}

@media (min-width: 768px) and (max-width: 991.98px) {
h1 {
	font-size: 1.4em;
}
h4,h5{
		font-size: 1em;
	}	
.bgroup{text-align: right;}			
.pop2 {
	padding: 1em;
	margin: 0;
	text-align: justify;
}
.pop {
	padding: 1em;
	margin: 1em;
	text-align: justify;
}
.pop p {
	font-size: 100%;
}
.animal img {
	width: 100%;
}
.contact-map{display: none;}	
.contact-box{width:100%;}	
}



@media (min-width: 992px) and (max-width: 1199.98px) {
h1,h4,h5 {
	font-size: 1.8em;
}
	h4,h5{
		font-size: 1em;
	}	
.bgroup{text-align: right;}		
.pop {
	padding: 2em;
	margin: 3em;
	text-align: justify;
}	
.pop2 {
	padding: 1em;
	margin: 0;
	word-break: break-all;
	text-align: justify;
}
.pop p {
	font-size: 1.2em;
}
.animal img {
	width: 100%;
}
}

@media (min-width: 1200px) {
h1 {
	font-size: 1.8em;
}
h4,h5{
		font-size: 1em;
}	
.bgroup{text-align: right;}	
.pop {
	padding: 2em;
	margin: 2em;
	text-align: justify;
}	
.pop2 {
	padding: 1em;
	margin: 0;
	word-break: break-all;
	text-align: justify;
}
.pop p {
	font-size: 1.2em;
}
.animal img {
	width: 100%;
}
}