html,
body {
	font-family: "微軟正黑體", Microsoft Jhenghei, Arial, San serifs;
	font-size: 16px;
	letter-spacing: 0.5px;
	background-color: #1f8ca3;
	height: 100%;
    text-align: center;
	overflow: hidden;
}
a {
	color:black;
}
a:hover {
	background-color: rgba(255, 255, 255, 0.3);
	color: #01a4a3;
	text-decoration: none;
}
ol, ul {
	list-style-type: none;
}
img {
	display: block;
	width: 100%;
}

.loader {
	display: inline-block;
	width: 60px;
	height: 60px;
	position: fixed;
	border: 4px solid #d20270;
	margin: -30px 0 0 -30px;
	top: 50%;
	animation: loader 2s infinite ease;
}

.loader-inner {
  vertical-align: top;
  display: inline-block;
  width: 100%;
  background-color: #d20270;
  animation: loader-inner 2s infinite ease-in;
  animation-iteration-count: 3;
}

@keyframes loader {
  0% {
    transform: rotate(0deg);
  }
  
  25% {
    transform: rotate(180deg);
  }
  
  50% {
    transform: rotate(180deg);
  }
  
  75% {
    transform: rotate(360deg);
  }
  
  100% {
    transform: rotate(360deg);
  }
}

@keyframes loader-inner {
	0% {
		height: 0%;
	}

	25% {
		height: 0%;
	}

	50% {
		height: 100%;
	}

	75% {
		height: 100%;
	}

	100% {
		height: 0%;
	}
}


.svg-preload {
	position: absolute;
	top: 0;
    right: 0;
    bottom: 0;
	left: 0;
    margin: auto;
    z-index: 990;
}

.rect {
	fill: none;
	stroke-width: 6px;
	stroke: #d20270;
	stroke-dasharray: 24;
	stroke-dashoffset: 50%;
	-webkit-animation: movedash 1.5s forwards 0s infinite;
        animation: movedash 1.5s forwards 0s infinite;
}

@-webkit-keyframes movedash {
	to {
		stroke-dashoffset: 250%;
	}
}

@keyframes movedash {
	to {
		stroke-dashoffset: 250%;
	}
}

body.modal-open .background-container {
    -webkit-filter: blur(4px);
    -moz-filter: blur(4px);
    -o-filter: blur(4px);
    -ms-filter: blur(4px);
    filter: blur(4px);
    filter: url("https://gist.githubusercontent.com/amitabhaghosh197/b7865b409e835b5a43b5/raw/1a255b551091924971e7dee8935fd38a7fdf7311/blur".svg#blur);
	filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='4');
}

.pageContainer {

}
.container {
	width: 990px !important;
	height: 600px;
	min-height: 100%;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 10px;
	padding: 0;
	margin: 0;
	position: relative;
}
.logo {
	position: absolute;
	left: 50%;
	top: 50%;
	margin-top: -50px;
	transform: translate(-50%, -50%);
	z-index: 999;
}
.img-logo {
	width: 220px;
	height: 50px;
}
.kv {
	display: inline-block;
	position: relative;
	right: 500px;
	top: 40px;
	z-index: 10;
	animation: float 3s ease-in-out infinite;
	-webkit-animation-delay: 4s; /* Safari 4.0 - 8.0 */
	animation-delay: 4s;
}
@keyframes float {
	0% {
		transform: translateX(0px);
	}
	50% {
		transform: translateX(5px);
	}
	100% {
		transform: translateX(0px);
	}
}
.scene {
	position: relative;
	padding: 0;
	margin: 20px;
	z-index:100;
}
.scene li {
	position: absolute;
	top:0;
	left:0;
}
.title {
	min-height: 382px;
	display: inline-block;
	position: absolute;
	top: 20px;
	left: 40px;
	z-index: 490;
}
.title > div {
	margin: 10px 0;
}
.title > div:first-child {
	margin-bottom: 15px;
}
.row3 .row3-img {
	position: relative;
}
.row3 .row3-span {
	position: relative;
	margin-left: 0;
}
.row4 .row4-img {
	position: relative;
	margin-left: 0px;
	bottom: 40px;
}
.row4 .row4-span {
	position: relative;
	margin-left: -320px;
	bottom: 40px;
}
.t3-1 {
	position: relative;
	left: 0;
	top: -20px;
}
.t4-1 {
	position: relative;
	left: 45px;
	top: -97px;
}




/* footer */
.footer {
	display: inline-block;
	height: 144px;
	width: 100%;
	background-color: #211613;
	position: absolute;
	bottom: 0;
    left: 0;
    right: 0;
}
.navbar .navbar-nav {
	display: inline-block;
	vertical-align: top;
	position: relative;
	z-index:500;
}
.navbar .nonRWD {
	text-align: center;
	margin-top: 0;
}
.navbar-custom {
	background-color: transparent; 
    border-color: transparent; 
}
.nav li {
	padding: 10px 0px; 
}

.nav li a {
	display: inline-block;
	padding: 10px 15px;
}
.nav li a:hover, 
.nav li a:active,
.nav li a:focus {
	color:;
	background-color: transparent;
	border: 0;
	outline: 0;
}
.nav li a h4 {
	font-size: 18px;
	font-family: "微軟正黑體", Microsoft JhengHei;
	font-weight: bold;
	color: #211613;
}
.nav li a p {
	font-size: 13px;
	font-family: Gill Sans, Gill Sans MT, Calibri, sans-serif; 
	font-weight: normal;
	color: #00d8ff;
	text-transform: uppercase;
}
/* nav button hover effect */
.hvr-grow-shadow {
	text-transform: uppercase;
	font-weight: 900;
	overflow: hidden;
	line-height: 0.75;
	color: #c5c2b8;
}

a.hvr-grow-shadow:hover h4{
	color: #d10372;
}
a.hvr-grow-shadow:hover p{
	color: white;
}
.hvr-grow-shadow::before {
	content: attr(data-letters);
	position: absolute;
	z-index: 2;
	overflow: hidden;
	color: #424242;
	white-space: nowrap;
	width: 0%;
	-webkit-transition: width 0.4s 0.3s;
	transition: width 0.4s 0.3s;
}
.hvr-grow-shadow:hover::before {
	width: 100%;
}
.hvr-grow-shadow::after {
	content: '';
	position: absolute;
	height: 2px;
	width: 100%;
	top: 50%;
	margin-top: -8px;
	right: 10px;
	background: #F9F9F9;
	-webkit-transform: translate3d(-100%,0,0);
	transform: translate3d(-100%,0,0);
	-webkit-transition: -webkit-transform 0.4s;
	transition: transform 0.4s;
	-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

.hvr-grow-shadow:hover::after {
	-webkit-transform: translate3d(100%,0,0);
	transform: translate3d(100%,0,0);
	right: -10px;
}


#random, #random2 {
	display: inline-block; 
    position: absolute;
	opacity: 0;
}
#random2 img {
	width: 50%;
	height: 50%;
}



/* modal */
.modal-dialog {
    width: 990px;
}
button.close {
	position: relative;
	width: 60px;
	height: 60px;
    top: -38px;
    right: -15px;
    background-color: white;
    color: rgba(0, 0, 0, 1);
    padding: 20px;
    z-index:101;
	opacity: 1;
}
.close:hover, .close:focus {
	background: rgba(209, 3, 114, 1) none repeat scroll 0 0;
	color:  white;
	opacity: 1;
	text-shadow: 0 1px 0 white;
}
.modal-content {
    background-clip: padding-box;
    background: rgba(31, 140, 163, 1) none repeat scroll 0 0;
	border: 3px solid white;
    border-radius: 0;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
    outline: 0 none;
    position: relative;
}
.modal-header {
	background: rgba(31, 140, 163, 1) none repeat scroll 0 0;
	color: white;
	border-radius: 15px 15px 0px 0px;
	-moz-border-radius: 15px 15px 0px 0px;
	-webkit-border-radius: 15px 15px 0px 0px;
	margin-left: 45px;
	margin-right: 45px;
	padding-top: 40px;
	border-bottom: 0;
}
.modal-title {
	font-size: 27px;
	font-weight: bold;
	text-align: center;
	color: white;
	display: inline-block;
	border-bottom: 1px solid white;
}
.modal-body {
	font-size: 16px;
	color:white;
    letter-spacing: 1.6px;
    line-height: 1.8;
	margin-right: 45px;
	padding: 0;
	text-align: justify;
	text-justify: inter-ideograph;
	-ms-text-justify: inter-ideograph; /*IE9*/
	-moz-text-align-last:justify; /*Firefox*/
	-webkit-text-align-last:justify; /*Chrome*/
}
#modal1 .modal-body .title-row,
#modal2 .modal-body .title-row {
	background-color: white;
	padding: 0 20px 0 0;
	display: inline-block;
}
#modal1 .modal-body h4 {
	font-size: 17px;
    letter-spacing: 1.6px;
    font-weight: bold;
    margin-bottom: 10px;
	color: #E40077;
	margin-left: 45px;
}
#modal2 .modal-body h4 {
	font-size: 19px;
    letter-spacing: 1.6px;
    font-weight: bold;
    margin-bottom: 10px;
	color: #E40077;
	margin-left: 45px;
}
#modal2 .modal-body h4.dis {
	margin-bottom: 10px;
}
#modal2 .modal-body h4.dis p{
	display: inline;
}
#modal2 .modal-body p.inli{
	display: inline-block;
	margin: 0 0 20px;
}
#modal1 .modal-body p {
	margin: 10px 0 20px 45px;
    font-size: 16px;
    letter-spacing: 1.2px;
    line-height: 27px;
}
#modal2 .modal-body p {
	margin: 10px 0 20px 45px;
	font-size: 16px;
}
#modal2 .modal-body .ul-text{
	margin-bottom: 20px;
	padding: 0;
	margin-left: 70px;
}
#modal2 .modal-body .ul-text li p {
	margin: 5px 0 5px;
}
#modal2 .modal-body .ul-text li p b{
	color: #ed2b93;
    font-size: 18px;
	/*text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;*/
}
#modal2 .modal-body .ul-text li p span.pl-7{
	padding-left: 7px;
}




body, .load, .svg-preload, .logo, .kv, .nav1, .nav2, .nav3, .nav4, .nav5, .t1, .t2, .t3, .t3-1, .t4, .t4-1 {
	opacity: 0;
}