body {
	margin: 0;
	padding: 0px 0px 10px 0px;
	background: #e7e9c3;
	font-family: 'Varela Round', sans-serif;
}


.divcenter{ /*讓div屏幕居中*/
text-align: center; /*讓div內部文字居中*/
border-radius: 20px;
width: 100%;
height: 300px;
margin: auto;
position: absolute;
z-index: 90;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

/* Center the loader */
#loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Add animation to "page content" */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 } 
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom { 
  from{ bottom:-100px; opacity:0 } 
  to{ bottom:0; opacity:1 }
}


/*----footer 開始-----*/
.fbox {
	background-color: #DDDDDD;
	color: #433955;
  	margin-bottom: 0px;
	bottom: 0px;
 	min-height: 0px;
 	text-align: center;
	position: fixed;
	z-index:99;
	bottom: 0px;
	left: 0px;
	width: 100%;
}

.fbox .fbox-in {
    padding: 5px 5px 5px 5px;
    font-size: 1.1vh;
}
/*----footer 結束-----*/


.banner {
  background: url(../images/banner.jpg?20200629) right center  no-repeat;
  background-size:	cover;
  height: 110;

}

.banner-logo {
	float: left;
	margin-top: 8px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 10px;
	display: inline;

	max-width:88%;
	max-height: 88%;
}


.box {
  color: #433955;
  margin-bottom: 20px;
  min-height: 200px;
  text-align: center;
}
.box img {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  display: block;
  width: 100%;
  overflow: hidden;
}
.box .box-heading {
  max-height: 120px;
  overflow: hidden;
}
.box .box-body {
  border: 2px solid  #eaedf2;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  padding: 6px 6px 6px 6px;
}

.box .box-in {
  background-color: #eee;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  padding: 1px 1px 1px 1px;
}
@media (max-width: 768px) {
  .navbar-right form {
    display: none;
  }
}
@media (max-width: 568px) {
  .jumbotron {
    text-align: center;
  }

.online-box {
  color: #433955;
  margin-bottom: 20px;
  text-align: center;
  width: 95%;
  margin: auto;
	}

.img-sz {
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
  display: block;
  width: 90vw;
}