body{
	width: 100vw;
	overflow-x: hidden;
	background: #77c5de;
	font-size: 16px;
	font-family: 'Roboto', 'Noto Sans TC', Arial,"文泉驛正黑","WenQuanYi Zen Hei","儷黑 Pro","LiHei Pro","微軟正黑體","Microsoft JhengHei",sans-serif;
}

body.clean_body{
	background: #f5daca;
}
a {
	text-decoration: none;
}

h1, h2, h3, h4, h5, h6{
	font-family: 'Roboto', "Noto Sans TC", sans-serif;
}

h1{
	font-size: 3.4em;
	font-weight: 500;
	line-height: 1.2em;
}

h2{
	font-size: 2.25em;
	font-weight: 500;
	line-height: 1.1em;
}

h3{
	font-size: 1.2em;
	font-weight: 500;
	line-height: 2.4em;
}

h4{
	font-size: 1.85em;
	font-weight: 500;
}

h5{
	font-size: 1.125em;
	font-weight: 500;
}

h6{
	font-size: 1em;
    font-weight: 500;
}

p{
	font-family: 'Roboto', "Noto Sans TC", sans-serif;
	text-align: justify;
	font-size: 0.975em;
    /* line-height: 1.5em; */
    font-weight: 400;
}

::selection {
    color: #000000;
    background: #ffcc00;
}

.show{
	display: block;
}

.hide{
	display: none;
}

.mobile{
	display: none;
}

.desktop{
	display: block;
}

.clearfix{
	clear: both;
}

section{
	position: relative;
	width: 100%;
	margin: 0 auto;
	/* overflow: hidden; */
}

/* ============================================================
LOADING
============================================================ */
.progress {
	position: fixed;
	z-index: 11111;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #77c5de;
	color: #ffffff;
}

.progress-inner {
	position: absolute;
	left: calc(50% - 110px);
	top: calc(50% - 91px);
	width: 220px;
	height: 182px;
	background-color: #275690;
	/*overflow: hidden;*/
}

/* .progress-inner img{
	width: 100%;
} */

.progress-bar {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #cbf2ff;
}

.progress-text {
	color: #ffffff;
	font-family: "Indie Flower", "Roboto", "Noto Sans TC", sans-serif;
	font-size: 2em;
	font-weight: 700;
	position: absolute;
	z-index: 9999999;
	width: 220px;
	text-align: center;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* .complete {
	overflow: auto;
} */

.progress-logo {
	-moz-transform: scale(1.02, 1.02);
	-ms-transform: scale(1.02, 1.02);
	-webkit-transform: scale(1.02, 1.02);
	transform: scale(1.02, 1.02);
	position: absolute;
	top: 0;
}

.progress-complete .progress-bar {
	background-color: #77c5de;
}

/* ============================================================
NAV
============================================================ */
nav{
	width: 100%;
	height: 80px;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
}

.ng-logo{
	width: 100px;
	height: auto;
	position: relative;
	margin: 18px 0 0 20px;
	float: left;
	z-index: 6;
}

.ng-logo img{
	width: 100%;
}

.ng-logo a{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.menu{
	width: calc(100% - 120px);
	position: relative;
	float: right;
}

nav:after{
	content: '';
	display: table;
	clear: both;
}

nav:before{
	content: '';
	display: table;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: linear-gradient(rgba(52, 113, 155, .9), rgba(52, 113, 155, 0));
}

.menu-container{
	width: calc(100% - 240px);
	float: left;
	position: relative;
	margin-left: 40px;
}

.share-container{
	width: 180px;
	float: right;
	position: relative;
}

.menu:after{
	content: '';
	display: table;
	clear: both;
}

.menu-item{
	width: calc(100%/6);
	height: 60px;
	float: left;
	font-family: 'Roboto', "Noto Sans TC", sans-serif;
	font-size: 1em;
	font-weight: 400;
	text-align: center;
	line-height: 60px;
	color: #ffffff;
	position: relative;
	transition: .2s linear;
}

.menu-item-active{
	background: rgba(52, 113, 155, .95);
}

.menu-item:hover{
	background: rgba(52, 113, 155, .95);
}

.menu-container ul:after{
	content: '';
	display: table;
	clear: both;
}

.menu-item a{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.submenu{
	width: 100%;
	position: absolute;
	left: -1000em;
	opacity: 0;
	transition: opacity 0.5s 0s,
				left 0s 0.5s;
}

.menu-item:hover .submenu{
	left: 0;
	opacity: 1;
	transition: opacity 0.5s 0s;
}

.submenu-item{
	width: 100%;
	height: 45px;
	font-family: 'Roboto', "Noto Sans TC", sans-serif;
	font-size: 1em;
	text-align: center;
	line-height: 45px;
	position: relative;
	background: rgba(52, 113, 155, .7);
	transition: .2s linear;
}

.submenu-item:hover{
	background: rgba(230, 125, 5, .8);
}

.submenu-item-active{
	background: rgba(230, 125, 5, .8);
}

.submenu-item a{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.share-icon{
	width: 28%;
	float: left;
	margin-top: 10px;
	margin-left: 4%;
}

.share-container:after{
	content: '';
	display: table;
	clear: both;
}

.icon-container{
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid #ffffff;
	box-sizing: border-box;
	text-align: center;
	line-height: 41px;
	color: #ffffff;
	font-size: 1.2em;
	transition: .2s linear;
}

.fb-icon:hover{
	background: #3b5998;
}

.line-icon:hover{
	background: #00c300;
}

.telegram-icon:hover{
	background: #0088cc;
}




/* ======= icon animation ======= */
.nav-icon{
	display: none;
}

.menu-icon{
	width: 40px;
	height: 40px;
	float: right;
	position: relative;
    cursor: pointer;
    margin-top: 24px;
    margin-right: 24px;
    z-index: 5;
}

.menu-icon-line{
	width: 100%;
    height: 3px;
    background: #002b58;
    margin-bottom: 7px;
    border-radius: 50000px;
}

.menu-icon-line:nth-child(3){
	margin-bottom: 0;
}

@keyframes navActive1{
	0%{
		transform: rotate(0deg);
    	margin-top: 0px;
    	background: #002b58;
	}

	100%{
		transform: rotate(45deg);
    	margin-top: 10px;
    	background: #ffffff;
	}
}

@keyframes navActive1Back{
	0%{
    	transform: rotate(45deg);
    	margin-top: 10px;
    	background: #ffffff;
	}

	100%{
		transform: rotate(0deg);
    	margin-top: 0px;
    	background: #002b58;
	}
}

@keyframes navActive3{
	0%{
		transform: rotate(0deg);
    	margin-top: 0px;
    	background: #002b58;
	}

	100%{
		transform: rotate(-45deg);
    	margin-top: -10px;
    	background: #ffffff;
	}
}

@keyframes navActive3Back{
	0%{
    	transform: rotate(-45deg);
    	margin-top: -10px;
    	background: #ffffff;
	}

	100%{
		transform: rotate(0deg);
    	margin-top: 0px;
    	background: #002b58;
	}
}

.menu-line1-active{
    animation: navActive1 .2s;
	animation-fill-mode: forwards;
}

.menu-line3-active{
    animation: navActive3 .2s;
	animation-fill-mode: forwards;
}

.menu-line1-back{
    animation: navActive1Back .2s;
	animation-fill-mode: forwards;
}

.menu-line3-back{
    animation: navActive3Back .2s;
	animation-fill-mode: forwards;
}

/* ======= END OF icon animation ======= */




.menu-comingsoon{
	position: absolute;
	width: 100%;
	text-align: center;
	top: 15px;
    /* transform: rotate(-5deg); */
}

.menu-comingsoon p{
	font-family: 'Indie Flower', cursive;
    color: #e6a05a;
    font-size: 1.4em;
    font-weight: 700;
    text-align: center;
}



@media all and (max-width: 1100px){
	.menu{
		width: 100%;
		height: 100vh;
		position: absolute;
		float: none;
		right: -100%;
		top: 0;
		background: #002b58;
	}

	.nav-icon{
		display: block;
	}

	.menu-container{
		width: 90%;
		float: none;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	.menu-item{
		width: 100%;
		height: auto;
		float: none;
		text-align: left;
		font-weight: 500;
		color: #ffab69;
	}

	.menu-item:hover{
		background: none;
	}

	.menu-item-active{
		background: none;
	}

	.submenu-item:hover{
		background: none;
	}

	.share-container{
		float: none;
	}

	.submenu{
		position: relative;
		opacity: 1;
		left: auto;
		transition: none;
	}

	.submenu-item{
		width: 120px;
	    height: 30px;
		font-family: 'Roboto', "Noto Sans TC", sans-serif;
		font-size: .95em;
	    text-align: left;
	    line-height: 30px;
	    position: relative;
	    background: none;
	    transition: .2s linear;
	    float: left;
	    border-right: 1px solid #ffffff;
	    margin-left: 10px;
	    color: #ffffff;
	}

	.submenu:after{
		content: '';
		display: table;
		clear: both;
	}

	.submenu-item:nth-last-child(1){
		border-right: none;
	}

	.share-container{
		position: absolute;
		bottom: 20px;
		right: 10px;
	}


	.menu-comingsoon{
		width: auto;
		top: 0;
		left: 70px
	}

	.submenu-item-active{
		text-align: center;
	    border-radius: 50000px;
	    background: rgba(230, 125, 5, .8);
	}


}

@media all and (max-width: 480px){
	.ng-logo{
		width: 70px;
		margin: 15px 0 0 15px;
	}
	.submenu-item{
		width: 120px;
		font-size: .9em;
	}

	.submenu-item-active{
		text-align: center;
	    border-radius: 50000px;
	    background: rgba(230, 125, 5, .8);
	}
}

@media all and (max-width: 374px){
	/* .submenu-item{
		margin-left: 5px; 
	} */

	.menu-item:nth-child(3) .submenu-item:nth-child(2),
	.menu-item:nth-child(3) .submenu-item:nth-child(3),
	.menu-item:nth-child(5) .submenu-item:nth-child(2),
	.menu-item:nth-child(5) .submenu-item:nth-child(3){
		width: 70px;
	}
}

@media all and (max-width: 321px){
	.menu-item{
		line-height: 40px;
	}
}

/* ============================================================
HEADER
============================================================ */
.kv{
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	overflow: hidden;
	z-index: 1;
	background: url(../img/kv/kv_bg.jpg) no-repeat;
	background-size: cover;
}

.kv .water {
	position: absolute;
	background-image: url("../img/kv/sea-map.png");
	background-size: cover;
	top:0;
	left:0;
	height: 100%;
	width: 100%;
	filter: url("#turbulence");
}

.kv-imgs{
	position: absolute;
	z-index: 3;
}

.kv-imgs img{
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.kv-mountain-l{
	width: 30%;
	left: 0;
	bottom: 0;
	z-index: 2;
}

.kv-mountain-l-img{
	width: 100%;
	padding-bottom: 90.92%;
	position: relative;
}

.kv-mountain-r{
	width: 30%;
	right: 0;
	bottom: 0;
	z-index: 2;
}

.kv-mountain-r-img{
	width: 100%;
	padding-bottom: 113.2%;
	position: relative;
}

.kv-mountain-up-l{
	position: absolute;
	width: 15%;
	top: 0;
	left: 0;
	transform-origin: 0% 100%;
	animation: mountainUpL 5s infinite linear;
	animation-fill-mode: forwards;
}

@keyframes mountainUpL{
	0%{
		transform: rotate(0deg);
	}

	50%{
		transform: rotate(10deg);
	}

	100%{
		transform: rotate(0deg);
	}
}

.kv-mountain-up-r{
	position: absolute;
	width: 15%;
	top: 50%;
	right: 20%;
	transform-origin: 100% 100%;
	animation: mountainUpR 5s infinite linear;
	animation-fill-mode: forwards;
}

@keyframes mountainUpR{
	0%{
		transform: rotate(0deg);
	}

	50%{
		transform: rotate(7deg);
	}

	100%{
		transform: rotate(0deg);
	}
}

.kv-grass-1{
	width: 8%;
	bottom: -5px;
	left: 0;
	transform: translate(-50%, 0);
	transform-origin: 50% 100%;
	animation: grassMoveSP 5s 0s infinite linear;
	animation-fill-mode: forwards;
	z-index: 3;
}

.kv-grass-1-img{
	width: 100%;
	padding-bottom: 84.375%;
	position: relative;
}

.kv-grass-2{
	width: 5%;
	bottom: -5px;
	left: 2%;
	transform-origin: 50% 100%;
	animation: grassMove 5s 1s infinite linear;
	animation-fill-mode: forwards;
	z-index: 3;
}

.kv-grass-2-img{
	width: 100%;
	padding-bottom: 126.5625%;
	position: relative;
}

.kv-grass-3{
	width: 6%;
	bottom: -5px;
	left: 6%;
	transform-origin: 50% 100%;
	animation: grassMove 5s 2s infinite linear;
	animation-fill-mode: forwards;
	z-index: 3;
}

.kv-grass-3-img{
	width: 100%;
	padding-bottom: 96.988%;
	position: relative;
}

.kv-grass-4{
	width: 6%;
	bottom: -5px;
	left: 11%;
	transform-origin: 50% 100%;
	animation: grassMove 5s 3s infinite linear;
	animation-fill-mode: forwards;
	z-index: 3;
}

.kv-grass-4-img{
	width: 100%;
	padding-bottom: 65.088%;
	position: relative;
}

.kv-grass-5{
	width: 8%;
	bottom: -5px;
	left: 15%;
	z-index: 4;
	transform-origin: 50% 100%;
	animation: grassMove 4s 3s infinite linear;
	animation-fill-mode: forwards;
}

.kv-grass-5-img{
	width: 100%;
	padding-bottom: 86.98%;
	position: relative;
}

.kv-grass-6{
	width: 8%;
	bottom: -5px;
	left: 21%;
	transform-origin: 50% 100%;
	animation: grassMove 4s 2s infinite linear;
	animation-fill-mode: forwards;
	z-index: 3;
}

.kv-grass-6-img{
	width: 100%;
	padding-bottom: 63.68%;
	position: relative;
}

.kv-grass-7{
	width: 5%;
	bottom: -5px;
	left: 27%;
	z-index: 4;
	transform-origin: 50% 100%;
	animation: grassMove 6s 2s infinite linear;
	animation-fill-mode: forwards;
}

.kv-grass-7-img{
	width: 100%;
	padding-bottom: 86.05%;
	position: relative;
}

.kv-grass-8{
	width: 5%;
	bottom: -5px;
	left: 30%;
	z-index: 2;
	transform-origin: 50% 100%;
	animation: grassMove 3s 3s infinite linear;
	animation-fill-mode: forwards;
}

.kv-grass-8-img{
	width: 100%;
	padding-bottom: 134.27%;
	position: relative;
}

.kv-grass-9{
	width: 10%;
	bottom: -15px;
	left: 33%;
	transform-origin: 50% 100%;
	animation: grassMove 4s 2s infinite linear;
	animation-fill-mode: forwards;
	z-index: 3;
}

.kv-grass-9-img{
	width: 100%;
	padding-bottom: 44.8%;
	position: relative;
}

.kv-grass-10{
	width: 7%;
	bottom: -5px;
	left: 40%;
	transform-origin: 50% 100%;
	animation: grassMove 4s 0s infinite linear;
	animation-fill-mode: forwards;
	z-index: 3;
}

.kv-grass-10-img{
	width: 100%;
	padding-bottom: 97.01%;
	position: relative;
}

.kv-grass-11{
	width: 8%;
	bottom: -15px;
	left: 44%;
	transform-origin: 50% 100%;
	animation: grassMove 4s 1s infinite linear;
	animation-fill-mode: forwards;
	z-index: 3;
}

.kv-grass-11-img{
	width: 100%;
	padding-bottom: 44.98%;
	position: relative;
}

.kv-grass-12{
	width: 7%;
	bottom: -5px;
	left: 48%;
	transform-origin: 50% 100%;
	animation: grassMove 5s 1s infinite linear;
	animation-fill-mode: forwards;
	z-index: 3;
}

.kv-grass-12-img{
	width: 100%;
	padding-bottom: 94.7%;
	position: relative;
}

.kv-grass-21{
	width: 7%;
	bottom: -5px;
	right: 41%;
	z-index: 4;
	transform-origin: 50% 100%;
	animation: grassMove 5s 3s infinite linear;
	animation-fill-mode: forwards;
}

.kv-grass-22{
	width: 5%;
	bottom: -5px;
	right: 38%;
	transform-origin: 50% 100%;
	animation: grassMove 5s 0s infinite linear;
	animation-fill-mode: forwards;
	z-index: 3;
}

.kv-grass-23{
	width: 6%;
	bottom: -5px;
	right: 33%;
	transform-origin: 50% 100%;
	animation: grassMove 4s 1s infinite linear;
	animation-fill-mode: forwards;
	z-index: 3;
}

.kv-grass-24{
	width: 6%;
	bottom: -5px;
	right: 28%;
	transform-origin: 50% 100%;
	animation: grassMove 5s 2s infinite linear;
	animation-fill-mode: forwards;
	z-index: 3;
}

.kv-grass-25{
	width: 8%;
	bottom: -5px;
	right: 22%;
	z-index: 2;
	transform-origin: 50% 100%;
	animation: grassMove 4s 2s infinite linear;
	animation-fill-mode: forwards;
}

.kv-grass-26{
	width: 8%;
	bottom: -5px;
	right: 16%;
	transform-origin: 50% 100%;
	animation: grassMove 5s 2s infinite linear;
	animation-fill-mode: forwards;
	z-index: 3;
}

.kv-grass-27{
	width: 5%;
	bottom: -5px;
	right: 13%;
	z-index: 4;
	transform-origin: 50% 100%;
	animation: grassMove 5s 1s infinite linear;
	animation-fill-mode: forwards;
}

.kv-grass-28{
	width: 5%;
	bottom: -5px;
	right: 9%;
	z-index: 4;
	transform-origin: 50% 100%;
	animation: grassMove 4s 1s infinite linear;
	animation-fill-mode: forwards;
}

.kv-grass-29{
	width: 10%;
	bottom: -15px;
	right: 0%;
	transform-origin: 50% 100%;
	animation: grassMove 4s 0s infinite linear;
	animation-fill-mode: forwards;
	z-index: 3;
}

.kv-grass-30{
	width: 7%;
	bottom: -5px;
	right: -3%;
	transform-origin: 50% 100%;
	animation: grassMove 5s 1s infinite linear;
	animation-fill-mode: forwards;
	z-index: 3;
}

@keyframes grassMove{
	0%{
		transform: rotate(0deg);
	}

	50%{
		transform: rotate(10deg);
	}

	100%{
		transform: rotate(0deg);
	}
}

@keyframes grassMoveSP{
	0%{
		transform: translate(-50%, 0) rotate(0deg);
	}

	50%{
		transform: translate(-50%, 0) rotate(10deg);
	}

	100%{
		transform: translate(-50%, 0) rotate(0deg);
	}
}

@media screen and (orientation: portrait) {
	.kv-mountain-l{
		width: 50%;
	}

	.kv-mountain-r{
		width: 50%;
	}

	.kv-grass-1{
		width: 16%;
	}

	.kv-grass-2{
		width: 10%;
	}

	.kv-grass-3{
		width: 12%;
	}

	.kv-grass-4{
		width: 12%;
	}

	.kv-grass-5{
		width: 16%;
	}

	.kv-grass-6{
		width: 16%;
	}

	.kv-grass-7{
		width: 10%;
	}

	.kv-grass-8{
		width: 10%;
	}

	.kv-grass-9{
		width: 20%;
	}

	.kv-grass-10{
		width: 14%;
	}

	.kv-grass-11{
		width: 16%;
		display: none;
	}

	.kv-grass-12{
		width: 14%;
	}

	.kv-grass-21{
		width: 16%;
		display: none;
	}

	.kv-grass-22{
		width: 10%;
		display: none;
	}

	.kv-grass-23{
		width: 12%;
		display: none;
	}

	.kv-grass-24{
		width: 12%;
	}

	.kv-grass-25{
		width: 16%;
	}

	.kv-grass-26{
		width: 16%;
	}

	.kv-grass-27{
		width: 10%;
	}

	.kv-grass-28{
		width: 10%;
	}

	.kv-grass-29{
		width: 20%;
		display: none;
	}

	.kv-grass-30{
		width: 14%;
	}
}

.side-fish1 {
	width: 24%;
	top: 12%;
	left: 3%;
	transform-origin: 50% 100%; 
	animation: sideFishMove 5s 1s infinite linear;
	animation-fill-mode: forwards;
	z-index: 3;
}

.side-fish2 {
	width: 8%;
	top: 30%;
	left: 0;
	transform-origin: 50% 100%; 
	animation: sideFishMove 2s 0.1s infinite linear;
	animation-fill-mode: forwards;
	z-index: 3;
}

.side-fish3 {
	width: 46%;
	top: 35%;
	left: 2%;
	transform-origin: 100% 0; 
	animation: sideFishMove 6s 2s infinite linear;
	animation-fill-mode: forwards;
	z-index: 3;
}

.side-fish4 {
	width: 50%;
	top: 8%;
	right: 0;
	transform-origin: 50% 100%; 

	animation: sideFishMove2 5s 3s infinite linear;

	animation-fill-mode: forwards;
	z-index: 3;
}

.side-fish5 {
	width: 30%;
	top: 55%;
	right: 0;
	transform-origin: 100% 100%; 
	animation: sideFishMove 5s 2s infinite linear;
	animation-fill-mode: forwards;
	z-index: 3;
}

@keyframes sideFishMove{
	0%{
		transform: translate(0, -50%) rotateY(0deg) rotateZ(0deg);
	}

	50%{
		transform: translate(0%, -40%) rotateY(0deg) rotateZ(-5deg);
	}

	100%{
		transform: translate(0, -50%) rotateY(0deg) rotateZ(0deg);
	}
}

@keyframes sideFishMove2{
	0%{
		transform:translate(0,0);
	}

	50%{
		transform:translate(0,20px);
	}

	100%{
		transform:translate(0,0);
	}
}
@media screen and (orientation: portrait) {

	/* .side-fish1 {
		width: 26%;
	}
	
	.side-fish2 {
		width: 18%;
	}
	
	.side-fish3 {
		width: 45%;
	}
	
	.side-fish4 {
		width: 0%;
	}
	
	.side-fish5 {
		width: 40%;
	} */
	

}

/* ============================================================
HEADER
============================================================ */
header.index-header{
	width: 100%;
	height: 100vh;
	position: relative;
	margin: 0 auto;
	overflow: hidden;
	z-index: 9;
}

h1{
	position: absolute;
	top: -100vh;
	left: -100vw;
}

.h1{
	width: 85%;
	max-width: 800px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}


.fishtitle{
	width: 100%;
	position: relative;
}


.title-left{
	width: 18%;
	float: left;
	margin-top: 5%;
	position: relative;
}

.title-right{
	width: 70%;
	float: right;
	position: relative;
}


.fishtitle:after{
	content: '';
	display: table;
	clear: both;
}

.fishgroup{
	width: 100%;
	padding-bottom: 143.233%;
	position: relative;
}

.yellow-border{
	width: 50%;
	height: 100%;
	position: absolute;
	overflow: hidden;
}

.yellow-border.left{
	top: 0;
	left: 0;
}

.yellow-border.right{
	top: 0;
	right: 0;
}

.fish{
	width: 160%;
	position: absolute;
	top: 52%;
	left: -25%;
	animation: fishSwim 2s infinite linear;
	animation-fill-mode: forwards;
}

.fish_nomove{
	width: 160%;
	position: absolute;
	top: 52%;
	left: -25%;
	transform: translate(0,-50%);
}

@keyframes fishSwim{
	0%{
		transform: translate(0, -50%) rotateY(0deg) rotateZ(0deg);
	}

	50%{
		transform: translate(0%, -40%) rotateY(0deg) rotateZ(-5deg);
	}

	100%{
		transform: translate(0, -50%) rotateY(0deg) rotateZ(0deg);
	}
}


.fish-go{
	width: 10%;
	position: fixed;
	left: 0;
	top: 100%;
	animation: fishGo 15s linear forwards infinite;
}

@keyframes fishGo{
	0%{
		left: -20%;
		top: 100%;
		/* transform: translate(0, -50%) rotateY(0deg) rotateZ(0deg); */
	}

	50%{
		/* transform: translate(0, -50%) rotateY(20deg) rotateZ(2deg); */
		opacity: 1;
	}

	100%{
		left: 120%;
		top: 50%;
		/* transform: translate(0, -50%) rotateY(0deg) rotateZ(0deg); */
		opacity: 0;
	}
}

@media all and (max-width: 480px){
	.fish-go{
		width: 30%;
	}
}


.yellow-border img{
	width: 200%;
	position: absolute;
}

.yellow-border.left img{
	top: 0;
	left: 0;
}

.yellow-border.right img{
	top: 0;
	right: 0;
}
.main-title-en {
	width: 400px;
	margin-top: 10px;
}

.main-title-en  img{
	width: 100%;
}

.fish img, .fish_nomove img{
	width: 100%;
}

.main-title-word{
	width: 100%;
	position: relative;
	margin-left: 0;
}

.main-title-date{
	position: relative;
	width: 80%;
	margin-left: 20%;
	margin-top: -8%;
}

.main-title-word img,
.main-title-date img{
	width: 100%;
}

/* .date-location{
	width: 100%;
	position: relative;
	padding-bottom: 11.52%;
	margin-top: 20px;
}

.date-location-img img{
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.wave{
	width: 65%;
	position: absolute;
	top: -15px;
	right: 0;
}

.wave img{
	width: 100%;
} */


@media all and (max-width: 1280px){
	.h1{
		max-width: 660px;
		
	}
}

@media all and (max-width: 1024px){
	.h1{
		max-width: 550px;
		margin-top: 8%;

	}
	
}

@media all and (max-width: 768){
	.h1{
		max-width: 650px;
		margin-top: 0;

	}
}

.header-arrow{
	font-size: 3em;
	color: #275690;
	position: absolute;
	bottom: 10%;
	left: 50%;
	transform: translate(-50%, 0);
	opacity: 1;
	animation: arrowDown 1.5s linear forwards infinite;
}

@keyframes arrowDown{
	0%{
		bottom: 20%;
		opacity: 0;
	}

	50%{
		bottom: 15%;
		opacity: 1;
	}

	100%{
		bottom: 10%;
		opacity: 0;
	}
}


/* .kv-light{
	width: 85%;
	position: absolute;
	top: -20px;
	
	opacity: 0;
}

.kv-light img{
	width: 100%;
}

.kv-light-1{
	animation: lightMove 5s 0s infinite linear;
	animation-fill-mode: forwards;
}

.kv-light-2{
	animation: lightMove 3.5s 2s infinite linear;
	animation-fill-mode: forwards;
} */

@keyframes lightMove{
	0%{
		left: -10%;
		top: -20px;
		opacity: 0;
	}

	50%{
		opacity: .7;
	}

	100%{
		left: 0%;
		top: -50px;
		opacity: 0;
	}
}



/* sign up */
.signup{
	position: fixed;
	right: 20px;
	bottom: 30%;
	transform: translate(0, 50%);
	cursor: pointer;
	z-index: 99;
	animation: signupJump 1s linear forwards infinite;
}

.signup-action{
	width: 130px;
	padding-bottom: 125px;
	background: url('../img/signup.png') no-repeat;
	background-size: 100%;
	position: relative;
}

.signup-action p{
	width: 100%;
	font-size: 1.4em;
	color: #ffffff;
	text-shadow: rgba(0, 0, 0, .7) 2px 2px 2px;
	text-align: center;
	position: absolute;
	bottom: 10%;
	left: 0;
}

.signup-hashtag{
	width: 100%;
	height: 35px;
	background: #ffffff;
	border-radius: 5px;
	position: relative;
	margin-top: -2px;
}

.signup-hashtag h5{
	font-size: 1.2em;
	text-align: center;
	line-height: 37px;
	color: #275690;
}

.signup a{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

@keyframes signupJump{
	0%{
		margin-bottom: 0;
	}

	50%{
		margin-bottom: -10px;
	}

	100%{
		margin-bottom: 0;
	}
}


@media all and (max-width: 480px){
	.signup-action{
		width: 100px;
		padding-bottom: 96px;
	}

	.signup-action p{
		font-size: 1.2em;
	}

	.signup-hashtag h5{
		font-size: 1em;
	}

	.signup{
		right: 10px;
		bottom: 20%;
	}
}


/* back-index */
.back-index{
	width: 50px;
	height: auto;
	padding: 20px;
	box-sizing: border-box;
	background: rgba(0, 55, 102, .7);
	color: #ffffff;
	position: fixed;
	bottom: 100px;
	left: 0;
	z-index: 4;
}

.back-index p{
	text-align: center;
	font-size: 1em;
	line-height: .5em;
	font-weight: 400;
	writing-mode: vertical-lr;
	letter-spacing: .1em;
}

.back-index a{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

@media all and (max-width: 1100px){
	.back-index{
		width: auto;
		height: 50px;
		bottom: 0;
	}

	.back-index p{
		writing-mode: horizontal-tb;
	}
	
}

/* ============================================================
SECTION ABOUT
============================================================ */
section.about{
	width: 100%;
	position: relative;
	margin: 0 auto;
}

.about-container{
	width: 90%;
	max-width: 1100px;
	position: relative;
	margin: 0 auto;
}

.unit-title{
	padding: 20px 0;
	position: relative;
	z-index: 1;
}

@media all and (max-width: 480px){
	.unit-title{
		padding: 0;
	}
}

.unit-title h2{
	font-family: 'Indie Flower', 'Roboto', "Noto Sans TC", sans-serif;
	color: #ffffff;
	float: left;
	font-size: 3em;
}

.unit-title-ch h2 em{
	font-size: .8em;
}

.title-fish{
	width: 100px;
	float: left;
	opacity: .5;
}

.title-fish img{
	width: 100%;
}

.unit-title:after{
	content: '';
	display: table;
	clear: both;
}

.about-video{
	width: 100%;
	padding-bottom: 56.25%;
	position: relative;
}

.about-video iframe{
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
}


.about-content{
	width: 90%;
	position: relative;
	margin: 30px auto;
	z-index: 2;
}

.about-content p{
	color: #333;
	font-size: 1.1em;
}

.display-table{
	display: table;
}

.display-table-tr{
	display: table-row;
}

.display-table-td{
	display: table-cell;
	vertical-align: middle;
}

.about-content .display-table-td:nth-child(1){
	width: 70%;
	position: relative;
}

.about-content .display-table-td:nth-child(2){
	width: 30%;
	position: relative;
}

.display-table-td.table-caption{
	/* display: table-caption; */
	
}

.go-signup{
	position: relative;
	z-index: 2;
}

.go-signup a{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 2;
}

/* .about-content .display-table-td.table-caption{
	width: 100%;
	margin: 30px 0;
} */

.display-table-td p{
	color: #333;
	font-size: 1.1em;
}

.about-content .item-intro {
	width: 100%;
}

.about-content .item-intro tr:nth-last-child(1) td:nth-last-child(1){
	padding: 10px;
	background: rgba(255,255,255,0.5);
	border-radius: 8px;
	margin: 20px 0;
}

.about-content .item-intro tr:nth-last-child(2) td{
	padding-bottom: 20px;
}

.display-table-td p a{
	background: #275690;
	color: #ffffff;
	padding: 0 5px;
	position: relative;
	z-index: 1;
}

.item-intro td:nth-child(1){
	width: 100px;
}

.circle-btn{
	width: 150px;
	height: 150px;
	position: relative;
	margin: 0 auto;
	background: #6b3c99;
	border-radius: 50%;
}

.circle-btn p{
	color: #ffffff;
	text-align: center;
	line-height: 150px;
	position: relative;
	z-index: 2;
}

.circle-btn:before{
	content: '';
	display: table;
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: rgba(107,60,153,.5);
	transform: scale(1);
	opacity: 1;
	z-index: 1;
	animation: circleBig 1s infinite linear forwards;
}

@keyframes circleBig{
	0%{
		transform: scale(1);
		opacity: 1;
	}

	100%{
		transform: scale(2);
		opacity: 0;
	}
}

@media all and (max-width: 768px) {
	.display-table, .display-table-tr, .display-table-td{
		display: block;
	}

	.about-content{
		width: 100%;
	}

	.about-content .display-table-td:nth-child(1),
	.about-content .display-table-td:nth-child(2){
		width: 100%;
	}

	.about-content .display-table-td:nth-child(2){
		margin-top: 70px;
	}

	
}

@media all and (max-width: 480px){
	.unit-title h2{
		font-size: 1.75em;
	}

	.item-intro td:nth-child(1){
		width: 52px;
	}

	.item-intro td:nth-child(1) p{
		text-align: left;
	}

	.line-p{
		display: none;
	}

	.item-intro td{
		border-bottom: 1px solid #275690;
	}

	.about-content .item-intro tr:nth-last-child(1) td,
	.about-content .item-intro tr:nth-last-child(2) td{
		border-bottom: none;
	}

	.circle-btn{
		width: 100px;
		height: 100px;
	}

	.circle-btn p{
		line-height: 100px;
	}

}


/* ============================================================
SECTION GIFT
============================================================ */
section.gift{
	width: 100%;
	position: relative;
	margin: 0 auto;
}

.gift-container{
	width: 90%;
	max-width: 1100px;
	position: relative;
	margin: 100px auto;
}

.gift-text{
	width: 40%;
	float: left;
	position: relative;
}

.gift-text p{
	color: #275690;
	font-size: 1.1em;
}

.gift-pic{
	width: 60%;
	float: right;
	position: relative;
}

.gift-content:after{
	content: '';
	display: table;
	clear: both;
}

.gift-content-container p em{
	color: #6b3c99;
	font-size: 1.25em;
}

.gift-content-container p span.sale{
	color: #6b3c99;
	font-size: 1.5em;
}

.gift-content-container p span.price{
	font-size: .85em;
	text-decoration: line-through;
}

.gift-pic-img{
	width: 100%;
	position: relative;
	margin: 0 auto;
}

.gift-pic-img img{
	width: 100%;
}


@media all and (max-width: 768px) {
	.gift-text, .gift-pic{
		width: 100%;
		float: none;
	}

	.gift-pic{
		margin-top: 50px;
	}
}

/* ============================================================
SECTION SPONSOR
============================================================ */
section.sponsor{
	width: 100%;
	position: relative;
	margin: 0 auto;
}

.sponsor-container{
	width: 90%;
	max-width: 1100px;
	position: relative;
	margin: 100px auto;
}

.sponsor-category{
	color: #275690;
	font-size: 1.1em;
}

.sponsor-area{
	margin: 0;
}

.sponsor-logo{
	width: 100%;
	position: relative;
	margin: 0 auto;
	z-index: 2;
}

.sponsor-img {
	width: 20%;
	padding-bottom: 8%;
	position: relative;
	float: left;
	opacity: 1;
	transition: .2s linear;
}

.sponsor-logo ul:after{
	content: '';
	display: table;
	clear: both;
}

.sponsor-img-s{
	width: 15%;
	padding-bottom: 15%;
	position: relative;
}

.sponsor-img-m{
	width: 30%;
	padding-bottom: 15%;
	position: relative;
}

.sponsor-img-l{
	width: 40%;
	padding-bottom: 15%;
	position: relative;
}

.sponsor-img-container{
	width: 100%;
	height: 60%;
    position: absolute;
	margin: 0 auto;
}

.sponsor-img-container img{
	width: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.sponsor-img a{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 4;
}

@media all and (max-width: 480px){
	.sponsor-img{
		width: 50%;
		padding-bottom: 20%;
	}
	
}


/* ============================================================
FOOTER
============================================================ */
footer{
	width: 100%;
	position: relative;
	margin: 0 auto;
	z-index: 3;
}

.top-grass{
	width: 100%;
	position: relative;
	padding-bottom: 3.75%;
	background: url('../img/footer_bg.svg') no-repeat;
	background-size: cover;
	margin-bottom: -5px;
	margin-top: 4rem;
}

.footer-container{
	width: 100%;
	position: relative;
	background: #0d2d52;
}

.footer-content{
	width: 90%;
	max-width: 1100px;
	position: relative;
	margin: 0 auto;
	padding: 20px 0 60px 0;
}

.footer-logo{
	width: 40%;
	float: left;
}

.footer-logos{
	float: left;
}

.footer-logos:after{
	content: '';
	display: table;
	clear: both;
}

.footer-logo-ng{
	max-width: 150px;
}

.footer-logo-boulder{
	max-width: 200px;
	margin-left: 40px;
	margin-top: 2%;
}

.footer-logo img{
	width: 100%;
}

.footer-social{
	color: #ffffff;
	float: right;
	margin-top: 15px;
}

.footer-social p{
	text-transform: uppercase;
	font-weight: 700;
	font-size: 1.1em;
}

.footer-social ul li{
	font-size: 2.2em;
	margin-right: 20px;
	float: left;
}

.footer-social ul li a{
	color: #ffffff;
}

.footer-social ul:after{
	content: '';
	display: table;
	clear: both;
}

.footer-copyright{
	width: 90%;
	max-width: 1100px;
	position: relative;
	margin: 0 auto;
}

.footer-copyright{
	color: #ffffff;
    padding-top: 15px;
    border-top: 1px solid #347097;
    margin-top: 20px;
    font-weight: 300;
    line-height: 1.4em;
    padding-bottom: 30px;
}

.footer-copyright p a{
	color: #ffffff;
	text-decoration: underline;
}

.footer-copyright p em, .footer-copyright p em a{
	color: #4179be;
	text-decoration: none;
}




@media all and (max-width: 768px){
	.footer-logos, .footer-social{
		float: none;
		margin-top: 30px;
	}

	
}


/* ============================================================
GO TOP
============================================================ */

#gotop{
	width: 52px;
	height: 52px;
	background: rgba(243,121,0,.7);
	z-index:9;
	position: fixed;
	right: 20px;
	bottom: 10px;
	cursor: pointer;
	border-radius: 50%;
	display:none;
	-o-transition: .2s linear;
	-webkit-transition: .2s linear;
	-moz-transition: .2s linear;
	transition:  .2s linear;
	z-index: 5;
}

#gotop i{
	font-size: 3em;
	color: #FFFFFF;
	width: 52px;
	line-height: 52px;
	text-align: center;
	-o-transition: .2s linear;
	-webkit-transition: .2s linear;
	-moz-transition: .2s linear;
	transition:  .2s linear;
}


/* ============================================================
ABOUT
============================================================ */
.about-bg{
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
	display: block;
}

.about-bg-1{
	width: 10%;
    transform-origin: center bottom;
    top: 40%;
    left: -1%;
    animation: aboutBgLeft 5s linear forwards infinite;
}

.about-bg-2{
	width: 5%;
    transform-origin: center bottom;
    top: 50%;
    left: 0;
    animation: aboutBgLeft 3s .5s linear forwards infinite;
}

.about-bg-3{
	width: 12%;
    transform-origin: center bottom;
    bottom: 20%;
    right: -5%;
    animation: aboutBgRight 4s .3s linear forwards infinite;
}

@keyframes aboutBgLeft{
	0%{
		transform: rotate(0deg);
	}

	50%{
		transform: rotate(5deg);
	}

	100%{
		transform: rotate(0);
	}
}

@keyframes aboutBgRight{
	0%{
		transform: rotate(-0);
	}

	50%{
		transform: rotate(-5deg);
	}

	100%{
		transform: rotate(0);
	}
}

@media all and (max-width: 768px){
	.about-bg-1{
		width: 20%;
	}

	.about-bg-2{
		width: 24%;
	}

	.about-bg-3{
		width: 24%;
	}
}

@media all and (max-width: 1100px){
	.about-bg{
		display: none;
	}
}


section.about-original{
	width: 100%;
	position: relative;
	background: linear-gradient(rgba(0, 55, 102, 1.0),rgba(0, 55, 102, 0));
}

.about-original-container{
	width: 90%;
	max-width: 1100px;
	position: relative;
	margin: 0 auto;
}

.about-earth{
	width: 70%;
	max-width: 300px;
	position: relative;
	margin: 0 auto;
	padding-top: 100px;
	margin-bottom: 30px; 
	/* transform: scale(2); */
	animation: earthScale 4s ease-in-out forwards infinite;
}

.about-earth img{
	width: 100%;
}

@keyframes earthScale{
	0%{
		transform: scale(1);
	}

	50%{
		transform: scale(.85);
	}

	100%{
		transform: scale(1);
	}
}

.about-intro{
	width: 100%;
	position: relative;
}

.about-intro p{
	font-size: 1.2em;
	font-weight: 500;
	color: #ffffff;
	text-align: center;
	margin: 5px 0;
}

.about-intro-content{
	width: 100%;
	position: relative;
	margin: 50px 0;
	display: flex;
    justify-content: space-between;
    align-items: center;
}

.about-content-text{
	width: 45%;
	position: relative;
}

.about-content-pic{
	width: 50%;
	position: relative;
}

.about-content-text p{
	font-size: 1.1em;
	color: #333333;
}

.about-content-pic img{
	width: 100%;
}

@media all and (max-width: 768px) {
	.about-intro-content{
		width: 100%;
		display: block;
	}

	.about-content-text{
		width: 100%;
		margin-bottom: 30px;
	}

	.about-content-pic{
		width: 100%;
	}
}



/* video */
section.about-videoarea{
	width: 100%;
	position: relative;
	overflow: hidden;
}

.about-video-container{
	width: 100%;
	max-width: 1100px;
	position: relative;
	margin: 0 auto;
}

.about-video-title{
	width: 90%;
	position: relative;
	margin: 0 auto;
}

.about-video-content{
	width: 100%;
	padding-bottom: 56.25%;
    margin: auto;
    position: relative;
    z-index: 1;
}

.about-video-slide{
	width: 300%;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

.about-video-0{
	width: 100%;
	position: relative;
	float: left;
}

.about-video-slide:after{
	content: '';
	display: table;
	clear: both;
}

.about-iframe{
	width: 100%;
	padding-bottom: 56.25%;
	position: relative;
}

.about-iframe iframe{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.slide-control{
	width: 100%;
    margin: auto;
    position: absolute;
    z-index: 3;
    top: 50%;
    transform: translate(0,-50%);
}

.slide-prev, .slide-next{
	width: 50px;
	height: 50px;
	text-align: center;
	line-height: 50px;
	background: rgba(0, 0, 0, .8);
	cursor: pointer;
	color: #ffffff;
	font-size: 2em;
	position: absolute;
}

.slide-prev{
	top: 0;
	left: 0;
}

.slide-next{
	top: 0;
	right: 0;
}

/* fish */
section.about-fish{
	width: 100%;
	position: relative;
	overflow: hidden;
}

.about-fish-container{
	width: 90%;
	max-width: 1100px;
	position: relative;
	margin: 50px auto;
}

.about-fish-content{
	width: 100%;
	position: relative;
	display: flex;
    justify-content: space-between;
	align-items: center;
	z-index: 2;
}

.about-fish-pic{
	width: 40%;
	position: relative;
}

.about-fish-pic img{
	width: 100%;
}

.about-fish-text{
	width: 55%;
	position: relative;
}

.about-fish-text h3{
	font-size: 1.8em;
	color: #000000;
}

.about-fish-text h3 em{
	font-style: italic;
}

.about-fish-text p{
	font-size: 1.1em;
	color: #333333;
}

@media all and (max-width: 768px) {
	.about-fish-content{
		width: 100%;
		display: block;
	}

	.about-fish-text{
		width: 100%;
		margin-bottom: 30px;
	}

	.about-fish-pic{
		width: 100%;
	}
}

@media all and (max-width: 480px){
	.about-fish-text h3{
		font-size: 1.3em;
	}
}


.about-fish-qa{
	width: 100%;
	position: relative;
	margin: 50px 0 100px 0;
}

.about-fish-question{
	width: 100%;
	position: relative;
	margin: 0 auto;
}

.about-fish-question h3{
	text-align: center;
	color: #ffffff;
	font-size: 1.5em;
	font-family: 'Indie Flower', 'Roboto', "Noto Sans TC", sans-serif;
}

.about-fish-question h3 em{
	font-size: 2.5em;
}

.about-fish-answer{
	width: 100%;
	max-width: 800px;
	position: relative;
	margin: 20px auto;
}

.about-fish-answer ul li{
	width: 32%;
	height: 100px;
	position: relative;
	float: left;
	margin-right: 2%;
	border: 2px solid rgba(0, 55, 102, 1.0);
	box-sizing: border-box;
	border-radius: 5px;
	cursor: pointer;
	z-index: 3;
	color: rgba(0, 55, 102, 1.0);
	transition: .2s linear;
}

.about-fish-answer ul li:nth-last-child(1){
	margin-right: 0;
}

.about-fish-answer ul:after{
	content: '';
	display: table;
	clear: both;
}

.about-fish-answer ul li h5{
	font-size: 1.5em;
	text-align: center;
	line-height: 100px;
}

@keyframes answerJump{
	0%{
		margin-top: 0;
	}

	50%{
		margin-top: -10px;
	}

	100%{
		margin-top: 0;
	}
}

.about-fish-answer ul li:hover{
	background: rgba(0, 55, 102, 1.0);
	border: 2px solid #ffffff;
	color: #ffffff;
	animation: answerJump .5s linear forwards infinite;
}

@media all and (max-width: 480px){
	.about-fish-question h3{
		font-size: 1em;
	}

	.about-fish-answer ul li h5{
		font-size: 1em;
	}
}

/* answer popup */
.answer-popup, 
.answer-popup-wrong {
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	background: rgba(119, 197, 222, .7);
	z-index: 6;
	display: none;
	opacity: 0;
}

.answer-popup-content{
	width: 90%;
	max-width: 500px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	background: #ffffff;
	padding: 20px;
	box-sizing: border-box;
	border-radius: 10px;
}

.answer-popup-content .fish{
	width: 60%;
	max-width: 300px;
	position: relative;
	top: auto;
	left: auto;
	margin: 0 auto;
	margin-bottom: -60px;
}

.answer-popup-content h5{
	text-align: center;
	font-size: 3em;
	color: rgba(0, 55, 102, 1.0);
}

.answer-popup-content p{
	text-align: center;
	font-size: 1.5em;
	color: #333333;
}

.popup-close{
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: rgba(0, 55, 102, 1.0);
	border: 2px solid #ffffff;
	box-sizing: border-box;
	color: #ffffff;
	text-align: center;
	line-height: 50px;
	font-size: 2em;
	cursor: pointer;
}

.popup-close-out{
	position: absolute;
	right: 0;
}

.answer-popup-content .popup-close{
	position: absolute;
	top: 0;
	right: 0;
	transform: translate(30%, -30%);
}

@media all and (max-width: 480px) {
	.answer-popup-content .fish{
		margin-bottom: -45px;
	}

	.answer-popup-content h5{
		font-size: 1.7em;
	}

	.answer-popup-content p{
		font-size: 1em;
	}
}

/* ============================================================
INTRO
============================================================ */
.intro-bg{
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	/* z-index: 1; */
}

.swim-fish{
	width: 20%;
	opacity: .6;
	position: absolute;
	top: 60%;
	left: 0;
	transform: rotate(-10deg);
	animation: swimFish 5s linear forwards infinite;
	z-index: 2;
}

@keyframes swimFish{
	0%{
		top: 70%;
		left: -25%;
	}

	100%{
		top: 30%;
		left: 105%;
	}
}

.swim-fish img{
	width: 100%;
}

@media all and (max-width: 768px){
	.swim-fish{
		width: 40%;
	}
}

.intro-bottom-bg{
	width: 100%;
	padding-bottom: 56.25%;
	position: fixed;
	top: -12%;
	left: 0;
	overflow: hidden;
}

.intro-bottom-bg img{
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.clean-bottom-bg:after{
	content: '';
	display: table;
	position: absolute;
	width: 100%;
	/* height: 100%; */
	padding-bottom: 56.25%;
	bottom: 0;
	left: 0;
	/* background: rgba(119, 197, 222, .5); */
	background: linear-gradient(to top, rgba(245, 218, 202, 1), rgba(245, 218, 202, .2), rgba(245, 218, 202, 0), rgba(245, 212, 202, 0));
}

/* .clean-bottom-bg{
	top: -20%;
} */

.intro-bottom-bg-wave{
	width: 200%;
	position: absolute;
	left: 0;
	top: 27%;
	animation: waveWave 5s linear forwards infinite;
}

.intro-bottom-bg-wave img{
	width: 100%;
	position: relative;
}

@keyframes waveWave{
	0%{
		opacity: 0;
		left: 0;
	}

	50%{
		opacity: 1;
		left: -50%;
	}

	100%{
		opacity: 0;
		left: -100%;
	}
}

/* info */
section.info{
	width: 100%;
	position: relative;
	margin: 0 auto;
}

.intro-info-container{
	width: 90%;
	max-width: 1100px;
	position: relative;
	margin: 0 auto;
	padding-top: 100px;
}




.intro-info-text{
	width: 100%%;
	position: relative;
	float: left;
}


.intro-info-content:after{
	content: '';
	display: table;
	clear: both;
}

.info-text-group{
	margin: 10px 0;
}

.info-text-group .step{
	color: #ffffff;
    background:#41859B;
    font-size: 0.875rem;
    padding: 3px;
	margin-right: 0.5rem;
	border-radius: 3px;
    font-weight: normal;
}

.info-text-group h6{
	font-size: 1.2em;
	color: #275690;
	text-decoration: underline;
	margin-top: 1.2rem;
}

.info-text-group h5{
	font-size: 1.2em;
	color: #333333;
}

.info-text-group h5 ul li{
	line-height: 2rem;
}

.info-schedule-group{
	width: 100%;
	position: relative;
	display: flex;
	align-items: stretch;
	justify-content: flex-start;
	margin: 10px 0;
}

.schedule-time{
	width: 45%;
}

.schedule-content{
	width: 55%;
}

.schedule-time, .schedule-content{
	background: rgba(39, 86, 144, .8);
	padding: 20px;
	box-sizing: border-box;
	border-radius: 10px;
	
}

.schedule-time p, .schedule-content p{
	color: #ffffff;
	text-align: center;
}

.schedule-time p{
	font-size: 1.3em;
}

.schedule-content p{
	font-size: 1.2em;
}

@media all and (max-width: 960px) {
	.intro-bottom-bg{
		top: 0;
	}

	.intro-info-text{
		width: 100%;
		float: none;
	}

	.intro-info-schedule{
		width: 100%;
		float: none;
		margin-top: 30px;
	}

	.info-text-group h6, .info-text-group h5{
		clear: both;
		text-align: left;
	}

}

@media all and (max-width: 480px){
	.intro-info-content{
		margin-top: -20px;
	}

	.info-text-group h6{
		font-size: 1.1em;
	}

	.info-text-group h5{
		font-size: 1.2em;
	}

	.schedule-time p{
		font-size: 1.15em;
	}

	.schedule-content p{
		font-size: 1em;
	}

	.schedule-time, .schedule-content{
		padding: 10px;
	}
}


/* race */
section.race{
	width: 100%;
	position: relative;
	margin: 0 auto;
}

.intro-race-container{
	width: 90%;
	max-width: 1100px;
	position: relative;
	margin: 50px auto;
}

.intro-race-table{
	width: 100%;
	position: relative;
	display: table;
}

.intro-race-tr{
	display: table-row;
}

.intro-race-td{
	display: table-cell;
	position: relative;
	width: 32%;
}

.intro-race-content{
	width: 90%;
	position: relative;
	margin: 0 auto;
}

.race-item h2{
	font-size: 3em;
	text-align: center;
	padding: 0;
	margin: 0;
	color: #275690;
	margin-bottom: -10px;
}

.race-item h2 em{
	font-size: .4em;
}

.race-item-sp h2{
	margin-bottom: -20px;
}

.race-price p{
	font-size: 1.4em;
	text-align: center;
	padding: 10px 0;
}

.race-memo p{
	font-size: 1.1em;
	text-align: center;
	padding: 10px 0;
}

.race-rule p{
	font-size: 1.1em;
	text-align: left;
	padding: 10px 0;
}

.race-price, .race-memo, .race-rule{
	background: rgba(255, 255, 255, .85);
	border-radius: 10px;
	padding: 5px 20px;
	box-sizing: border-box;
	color: #275690;
}

.race-price, .race-memo{
	border-bottom: 1px dotted #275690;
}

.race-btn{
	width: 120px;
	height: 45px;
	position: relative;
	margin: 20px auto;
	background: #275690;
	border-radius: 5px;
	box-sizing: border-box;
	cursor: pointer;
	transition: .2s linear;
}

.race-btn p{
	font-size: 1em;
	text-align: center;
	line-height: 46px;
	color: #ffffff;
}

.race-btn:hover{
	background: #ffffff;
	border: 1px dotted #275690;
}

.race-btn:hover.race-btn p{
	color: #275690;
}

.race-sp{
	font-size: .9em;
	text-align: left;
	padding: 10px 0;
	color: #275690;
}

/* popup */
.intro-popup{
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	background: rgba(119, 197, 222, .9);
	z-index: 6;
	display: none;
	opacity: 0;
}

.intro-popup-content{
	width: 90%;
	max-width: 800px;
	max-height: 80vh;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	background: #ffffff;
	padding: 20px;
	box-sizing: border-box;
	border-radius: 10px;
	overflow-y: auto;
}

.intro-popup-0{
	width: 90%;
	position: relative;
	margin: 0 auto;
	opacity: 0;
	display: none;
}

.intro-popup-0 img{
	width: 100%;
}

.intro-popup-content .popup-close{
	position: absolute;
	top: 0;
	right: 0;
	transform: translate(30%, -30%);
}

.intro-popup-map{
	width: 100%;
	position: relative;
}

.intro-popup-map img{
	width: 100%;
}

.intro-popup-0 p{
	color: #333333;
	margin: 10px 0;
}

.intro-popup-0 p em{
	font-size: 1.25em;
	color: #275690;
}

@media all and (max-width: 768px) {
	.intro-race-table{
		display: block;
	}

	.intro-race-tr{
		display: block;
	}

	.intro-race-td{
		display: block;
		width: 100%;
		margin-bottom: 50px;
	}
}


/* gift */
section.intro-gift{
	width: 100%;
	position: relative;
	margin: 0 auto;
}

.intro-gift-container{
	width: 90%;
	max-width: 1100px;
	position: relative;
	margin: 50px auto;
}

.gift-content{
	width: 100%;
	position: relative;
	margin: 0 auto;
}

.gift-content ul{
	width: 100%;
	position: relative;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-content: center;
}

.gift-content ul li{
	width: 32%;
	position: relative;
	margin-bottom: 20px;
	margin-left: 1%;
}

.gift-content ul li:nth-child(3), .gift-content ul li:nth-child(5){
	margin-right: 0;
}

.gift-content-bg{
	width: 100%;
	height: 100%;
	background: rgba(195, 207, 226, .9);
	border-radius: 10px;
}

.gift-content-container{
	width: 90%;
	position: relative;
	margin: 0 auto;
	padding: 30px 15px 15px 15px;
	box-sizing: border-box;
	/* background: rgba(195, 207, 226, .9);
	background-image: linear-gradient(135deg, rgba(245, 247, 250, .8) 0%, rgba(195, 207, 226, .8) 100%);
	border-radius: 10px; */
}

.gift-content ul li h3{
	font-size: 1.4em;
	text-align: center;
	color: #275690;
	line-height: 1.2em;
}

.gift-content ul li h3 em{
	font-size: .7em;
	color: #275690;
}

.gift-content ul li p{
	color: #333333;
	margin: 5px 0;
}

.gift-content ul li p.sp-center{
	text-align: center;
}

.gift-content ul li p.gift-content-em{
	/* background: #ffcc00; */
	color: #000000;
	/* padding: 0 5px; */
	box-sizing: border-box;
	margin: 5px 0;
	font-size: 1em;
	/* text-decoration: underline; */
	color: #6b3c99;
}

.gift-content ul li p.sp-purple{
	color: #6b3c99;
}

.gift-content ul li p.gift-content-em em{
	font-size: .7em;
}


.gift-content-em .btn-small {
	
	background: #275690;
	color:  #fff;
	padding: 3px 10px;
	margin: 1rem auto;
	border-radius: 3px;
}

.gift-content-em .btn-small:hover {
	background: #4879B6;
}

.gift-content ul li p.gift-content-em.somespace {
	margin: 10px 0;
}

.gift-btn{
	width: 100px;
	height: 45px;
	position: relative;
	margin: 10px auto;
	border-radius: 5px;
	background: #000000;
	cursor: pointer;
}

.gift-content ul li .gift-btn p{
	color: #ffffff;
	text-align: center;
	line-height: 46px;
}

.gift-img{
	width: 100%;
	position: relative;
	margin: 0 auto;
}

.gift-img img{
	width: 100%;
}

/* popup */
.size-table{
	width: 100%;
	position: relative;
}

.size-table tr td{
	border-bottom: 1px solid #275690;
	border-right: 1px solid #275690;
	width: 25%;
	padding: 0 5px;
	box-sizing: border-box;
}

.size-table tr td:nth-last-child(1){
	border-right: none;
}

.size-table tr:nth-child(2) td{
	background: rgba(39, 86, 144, .3);
}

.size-table tr td:nth-child(1){
	background: rgba(39, 86, 144, .15);
}

.size-table tr:nth-child(1) td{
	text-align: center;
	background: #275690;
	color: #ffffff;
}

.size-table td p{
	text-align: left;
}

.size-table tr:nth-child(1) td p{
	color: #ffffff;
}

@media all and (max-width: 768px) {
	.gift-content-container{
		width: 100%;
	}

	.gift-content ul{
		display: block;
	}

	.gift-content ul li{
		width: 100%;
	}
}

.gift-fishchief{
	width: 100%;
	background: rgba(255, 255, 255, .8);
	border-radius: 10px;
	position: relative;
	margin: 30px auto;
	padding: 50px;
	box-sizing: border-box;
}

.gift-fishchief-container{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
    justify-content: space-between;
    align-content: center;
}

.fishchief-left{
	width: 20%;
	position: relative;
}

.fishchief-left img{
	width: 100%;
}

.fishchief-right{
	width: 75%;
	position: relative;
}

.fishchief-right h3{
	font-size: 1.4em;
    color: #49b19c;
    line-height: 1.2em;
}

.fishchief-right h3 em{
	font-size: 1.2em;
}

.fishchief-right p{
	margin: 10px 0;
	color: #333333;
}

.fishchief-right p em{
	color: #49b19c;
	font-size: 1.2em;
}

.fishchief-btn{
	width: 200px;
	height: 45px;
	position: relative;
	border-radius: 5px;
	border: 1px solid #49b19c;
	box-sizing: border-box;
	margin-top: 5px;
	transition: .2s linear;
	display: inline-block;
	margin-right: 10px;
}

.fishchief-btn a{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

.fishchief-btn p{
	margin: 0;
	text-align: center;
	line-height: 45px;
	color: #49b19c;
	transition: .2s linear;
}

.fishchief-btn:hover{
	background: #49b19c;
	border: 1px solid #ffffff;
}

.fishchief-btn:hover.fishchief-btn p{
	color: #ffffff;
}

@media all and (max-width: 768px){
	.gift-fishchief{
		padding: 25px;
	}

	.gift-fishchief-container{
		display: block;
	}

	.fishchief-left{
		width: 80%;
		margin: 0 auto;
		margin-bottom: 20px;
	}

	.fishchief-right{
		width: 100%;
	}

	.fishchief-right h3{
		text-align: center;
		font-size: 1.2em;
	}
}

.gift-content-2{
	width: 100%;
	position: relative;
	margin: 30px auto;
}

.other-gift{
	width: 100%;
	position: relative;
	background: rgba(195, 207, 226, .9);
	border-radius: 10px;
}

.other-gift .gift-content-container{
	width: 100%;
}

.other-gift h3{
	font-size: 1.4em;
    text-align: center;
    color: #275690;
    line-height: 1.2em;
}

.other-gift-table{
	width: 100%;
	position: relative;
	display: table;
	padding: 10px 0;
}

.other-gift-tr{
	display: table-row;
}

.other-gift-td{
	display: table-cell;
	width: 33.3333%;
	padding: 20px;
	box-sizing: border-box;
}

.other-td-title, .other-td-pic, .other-td-li{
	width: 100%;
	position: relative;
	
	box-sizing: border-box;
}

.other-td-pic, .other-td-li{
	border-top: 1px dotted #275690;
	padding: 15px;
}

.other-td-title h5{
	/* font-family: 'Indie Flower', 'Roboto', "Noto Sans TC", sans-serif; */
	text-align: center;
	font-size: 1.5em;
	color: #275690;
}

.other-td-title h5 em{
	font-size: .85em;
}

.other-td-pic img{
	width: 100%;
}

.other-td-li ul li{
	list-style: disc;
	list-style-position: outside;
	box-sizing: border-box;
	margin-left: 20px;
}

.other-td-li ul li p{
	text-align: left;
	color: #333333;
}

@media all and (max-width: 768px){
	.other-gift-table{
		display: block;
	}

	.other-gift-tr{
		display: block;
	}

	.other-gift-td{
		display: block;
		width: 100%;
	}
}

@media all and (max-width: 480px){
	.other-gift-td{
		padding: 0;
		margin-top: 30px;
	}
}
.ig-wrap h4 {
	font-size: 1.4em;
    color: #275690;
	line-height: 1.2em;
	margin: 6rem 0 1rem;
}

.ig-photo-show {
	background: #fff;
    border-radius: 5px;
    padding-bottom: 2rem;
}

p.comingsoon {
	font-family: 'Indie Flower', cursive;
    color: #e6a05a;
    font-size: 2em;
	font-weight: 700;
	font-style: italic;
	text-align: center;
	
	background: rgba(195, 207, 226, .9);
	padding: 4rem;
	border-radius: 10px;
}

.intro-gift-attention{
	width: 100%;
	position: relative;
	margin: 30px auto;
	font-family: 'Roboto', "Noto Sans TC", sans-serif;
}

.intro-gift-attention h4{
	font-size: 1.4em;
	color: #275690;
	line-height: 1.2em;
	font-family: 'Roboto', 'Noto Sans TC', Arial,"文泉驛正黑","WenQuanYi Zen Hei","儷黑 Pro","LiHei Pro","微軟正黑體","Microsoft JhengHei",sans-serif;
}

.intro-gift-attention table{
	width: 100%;
	position: relative;
	margin: 20px auto;
}

.intro-gift-attention table tr td{
	margin: 0;
	padding: 8px;
	box-sizing: border-box;
	background: rgba(39, 86, 144, .2);
	color: #ffffff;
}

.intro-gift-attention table tr td p{
	text-align: center;
}

.intro-gift-attention table tr:nth-child(1) td{
	background: rgba(39, 86, 144, .7);
}

.intro-gift-attention table tr td:nth-child(1){
	width: 20%;
}

.intro-gift-attention table tr td:nth-child(2){
	width: 50%;
}

.intro-gift-attention table tr td:nth-child(3){
	width: 20%;
}

.intro-gift-attention table tr td:nth-child(4){
	width: 10%;
}

.gift-slide{
	width: 100%;
	position: relative;
	padding-bottom: 30%;
	overflow: hidden;
	margin-bottom: 3rem;
}

.gift-slide-container{
	position: absolute;
}

.gift-slide-0{
	width: 20%;
	position: relative;
	float: left;
}

.gift-slide-container:after{
	content: '';
	display: table;
	clear: both;
}

.gift-slide-all{
	width: 85%;
	position: relative;
	margin: 0 auto;
}

.gift-slide-pic{
	width: 100%;
	position: relative;
	border: 1px solid #ffffff;
	border-radius: 5px;
	box-sizing: border-box;
	overflow: hidden;
}

.gift-slide-pic img{
	width: 100%;
}

.gift-slide-text p{
	font-size: 1em;
	text-align: center;
	margin: 10px 0;
	color: #ffffff;
}

.gift-slide .slide-prev, .gift-slide .slide-next{
	background: rgba(39, 86, 144, .7);
}

@media all and (max-width: 840px) {
	.gift-slide{
		padding-bottom: 105%;
	}
}



.gift-subtitle {
	margin: 6rem 0 2rem;
}

.intro-gift-attention ul li{
	list-style: decimal;
	margin: 5px 0;
	margin-left: 20px;
}

.intro-gift-attention ul li p{
	text-align: left;
	color: #333333;
}


.rule-notice {
	margin: 2rem 0 0.5rem;
}

ul.number-list li {
	list-style-type: decimal;
}

ul.dot-list li {
	list-style-type: disc;
}

.highlight {
	color: #6b3c99;
	font-weight: 500;
	padding: 0 5px;
}

.highlight-bold {
	font-weight: 500;
}

/* google map */
.googlemap{
	width: 100%;
	height: 500px;
	position: relative;
	margin-bottom: 50px;
	z-index: 2;
}

#map{
	height: 100%;
}

.googlemap_clean {
	margin-top: 30px;
}

.googlemap_clean_area img {
	width: 100%;
	margin-top: 1rem;
}


@media all and (max-width: 480px) {
	.traffic-drive h4, .traffic-bus h4{
		font-size: 1.1em;
	}

	.signup-traffic-content ol li p{
		font-size: 1em;
	}

	.signup-traffic-content p{
		font-size: 1em;
	}
}



/* ============================================================
SIGNUP
============================================================ */
.kv-signup{
	transform: rotate(180deg);
}


section.signup-info{
	width: 100%;
	position: relative;
	margin: 0 auto;
}

.signup-info-container{
	width: 90%;
	max-width: 1100px;
	position: relative;
	margin: 0 auto;
	padding-top: 100px;
	z-index: 9;
}

.signup-info-table table{
	width: 100%;
	position: relative;
}

.signup-info-table table td{
	vertical-align: top;
	padding: 5px 0;
	box-sizing: border-box;
}

.signup-info-table table td:nth-child(1){
	width: 110px;
}

.signup-info-table table td p{
	font-size: 1.2em;
	color: #333333;
}

.signup-info-table table td:nth-child(1) p{
	color: #275690;
}

.signup-info-table table td p a{
	text-decoration: underline;
	z-index: 2;
	position: relative;
	color: #275690;
}

@media all and (max-width: 480px) {
	.signup-info-table table td p{
		font-size: 1em;
	}

	.signup-info-table table td:nth-child(1){
		width: 80px;
	}

	.signup-info-table table td:nth-child(2){
		padding-right: 10px;
	}
}

.signup-info-delivery{
	width: 100%;
	position: relative;
	margin: 30px auto;
}

.signup-info-delivery h4{
	font-size: 1.4em;
    color: #275690;
    line-height: 1.2em;
}

.signup-info-delivery ol li{
	list-style: decimal;
}

.signup-info-delivery ol li table{
	width: 100%;
	max-width: 500px;
}

.signup-info-delivery ol li table tr td{
	text-align: center;
	vertical-align: middle;
	border-top: 1px solid #275690;
	border-left: 1px solid #275690;
	box-sizing: border-box;
	padding: 5px;
	width: 50%;
}

.signup-info-delivery ol li table tr td:nth-last-child(1){
	border-right: 1px solid #275690;
}

.signup-info-delivery ol li table tr:nth-last-child(1) td{
	border-bottom: 1px solid #275690;
}

.signup-info-delivery ol li table tr td p{
	text-align: center;
	vertical-align: middle;
}

.signup-info-delivery ol li{
	font-family: 'Roboto', "Noto Sans TC", sans-serif;
	color: #333333;
	margin: 10px 0;
}

.signup-info-delivery ol li p{
	color: #333333;
	font-size: 1.1em;
}

.signup-info-delivery ol li table tr:nth-child(1) td{
	background: #275690;
}

.signup-info-delivery ol li table tr:nth-child(1) td p{
	color: #ffffff;
}


@media all and (max-width: 480px) {
	.signup-info-delivery h4{
		font-size: 1.2em;
	}

	.signup-info-delivery ol li p{
		font-size: 1em;
	}
}




/* traffic */
section.signup-attention{
	width: 100%;
	position: relative;
	margin: 0 auto;
}

.signup-attention-container{
	width: 90%;
	max-width: 1100px;
	position: relative;
	margin: 0 auto;
	padding-top: 50px;
}

/* attention */
.qa-paper{
	position: relative;
	z-index: 2;
}

.mag-qu{
	width: 100%;
	position: relative;
	font-size: 1.125em;
	background: #275690;
	color: #ffffff;
	padding: 15px 20px;
	cursor: pointer;
	box-sizing: border-box;
	border: 1px dotted #ffffff;
}

.mag-qu-text{
	width: calc(100% - 30px);
	float: left;
}

.mag-qu-triangle{
	width: 30px;
	text-align: center;
	float: right;
}

.triangle-down{
	display: none;
}

.triangle-up{
	display: block;
}

.mag-qu:after{
	content: '';
	display: table;
	clear: both;
}

.mag-an{
	width: 100%;
	background: rgba(255, 255, 255, .5);
	border: 1px dotted #ffffff;
	box-sizing: border-box;
	/* display: none; */
	padding: 20px;
}

.mag-an p{
	font-size: 1em;
	color: #333333;
}

ol.num li{
	list-style: decimal;
	font-family: "Roboto", "Noto Sans TC", sans-serif;
	font-size: 1.1em;
	margin-left: -20px;
}

ol.num li{
	list-style: upper-latin;
	font-family: "Roboto", "Noto Sans TC", sans-serif;
	font-size: 1.1em;
	margin-left: -20px;
}

@media all and (max-width: 768px){
	.mag-qu, .mag-an p{
		font-size: 1em;
	}
}

/* ============================================================
COOPERATION
============================================================ */
.kv-cooperation{
	transform: rotate(180deg);
}

.kv-cooperation .kv-mountain-l,
.kv-cooperation .kv-mountain-r{
	bottom: -10%;
}

section.cooperation-team{
	width: 100%;
	position: relative;
	margin: 0 auto;
	z-index: 2;
}

.co-team-container{
	width: 90%;
	max-width: 1100px;
	position: relative;
	margin: 0 auto;
	padding-top: 100px;
	padding-bottom: 100px;
}

.co-team-0{
	margin: 30px 0;
}

.co-team-bg{
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, .5);
	border-radius: 5px;
}

.co-team-content{
	width: 100%;
	padding: 50px;
	box-sizing: border-box;
	position: relative;
	display: flex;
    justify-content: space-between;
	align-items: center;
	
    background: rgba(255, 255, 255, .8);
    border-radius: 10px;
}
    
.co-team-content em {
	font-size: 1.25rem;
}

.co-team-logo{
	width: 30%;
	position: relative;
}

.co-team-logo img{
	width: 100%;
}

.co-team-info{
	width: 65%;
	position: relative;
}

.co-team-info h4{
	font-size: 1.5em;
	color: #275690;
	margin-bottom: 10px;
}

.co-team-info p{
	font-size: 1em;
	color: #333333;
	margin: 5px 0;
}

.co-team-btn{
	width: auto;
	height: 45px;
	padding: 0 15px;
	box-sizing: border-box;
	position: relative;
	border-radius: 5px;
	background: #275690;
	transition: .2s linear;
}

.co-team-btn p{
	text-align: center;
	color: #ffffff;
	line-height: 45px;
	margin-top: 10px;
	height: 45px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    transition: .2s linear;
}

.co-team-btn:hover{
	background: #ffffff;
}

.co-team-btn:hover.co-team-btn p{
	color: #275690;
}

.co-team-btn a{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 2;
}

@media all and (max-width: 768px) {
	.co-team-content{
		display: block;
	}

	.co-team-logo{
		width: 100%;
		margin-bottom: 20px;
	}

	.co-team-info{
		width: 100%;
	}
}

@media all and (max-width: 480px) {
	.co-team-content{
		padding: 25px;
	}

	.co-team-info h4{
		font-size: 1.2em;
	}

	.co-team-info p{
		font-size: .9em;
	}
}


/* ============================================================
CLEAN
============================================================ */
header.cleanup-title{
	width: 90%;
	position: relative;
	margin: 0 auto;
	padding-top: 100px;
}

.clean-h1{
	width: 85%;
    max-width: 520px;
    position: relative;
    margin: 0 auto;
}

@media all and (max-width: 768px){
	.clean-h1 {
		max-width: 400px;
	}

	.main-title-en {
		width: 100%;
	}
}

.title-left{
	width: 18%;
	margin-left: 5%;
}

.cleanup-title h2{
	font-size: 1.6em;
	color: #333333;
	text-align: center;
	margin-bottom: 15px;
	margin-top: 15px;
}

.cleanup-h1{
	width: 90%;
	max-width: 400px;
	position: relative;
	margin: 10px auto;
}

.cleanup-h1 img{
	width: 100%;
}

.unit-title-clean{
	text-shadow: 2px 2px 5px rgba(0, 0, 0, .5);
}

section.clean-functoin{
	width: 100%;
	position: relative;
	margin: 0 auto;
	z-index: 2;
}

.clean-functoin-container{
	width: 90%;
	max-width: 1100px;
	position: relative;
	margin: 0 auto;
	padding-top: 50px;
}

.clean-function-content{
	width: 100%;
	position: relative;
	display: flex;
	justify-content: space-between;
    align-items: center;
}

.clean-function-text{
	width: 48%;
	position: relative;
}

.clean-function-text p{
	font-size: 1.2em;
    color: #333333;
}

.clean-function-pic{
	width: 48%;
	position: relative;
}

.clean-function-pic img{
	width: 100%;
}

@media all and (max-width: 768px) {
	.clean-function-content{
		display: block;
	}

	.clean-function-text, .clean-function-pic{
		width: 100%;
		margin-bottom: 20px;
	}
}

@media all and (max-width: 480px) {
	.clean-function-text p{
		font-size: 1em;
	}
}



/* info */
section.clean-info{
	width: 100%;
	position: relative;
	margin: 0 auto;
	z-index: 2;
}

.clean-info-container{
	width: 90%;
	max-width: 1100px;
	position: relative;
	margin: 0 auto;
	padding-top: 50px;
}

.clean-info-content{
	width: 100%;
	position: relative;
	display: flex;
	justify-content: space-between;
    align-items: center;
}

.clean-info-content.block {
	display: initial;
}

.clean-info-content p{
	font-size: 1.2em;
    color: #333333;
}

.clean-info-content.block p{
	margin-bottom: 0.5rem;
}

table.clean-info-flextable{
	width: 80%;
	position: relative;
}

.clean-btn-signup{
	width: 20%;
	position: relative;
}

.circle-btn-orange{
	background: #e6a05a;
}

.circle-btn:before {
    content: '';
    display: table;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(230,160,90,.5);
    transform: scale(1);
    opacity: 1;
    z-index: 1;
    animation: circleBig 1s infinite linear forwards;
}

.circle-btn-orange p{
	color: #ffffff;
}

.clean-btn-signup a{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 2;
}

@media all and (max-width: 1100px){
	.clean-info-content{
		display: block;
	}

	table.clean-info-flextable{
		width: 100%;
	}

	.clean-btn-signup{
		width: 100%;
		margin-top: 40px;
	}
}

.clean-info-content table tr td{
	vertical-align: top;
}

.clean-info-content table tr td:nth-child(1){
	width: 110px;
}

table.clean-info-table tr td{
    vertical-align: middle;
    border-top: 1px solid #275690;
    border-left: 1px solid #275690;
    box-sizing: border-box;
	padding: 2px 5px;
	background: rgba(255, 255, 255, .4);
}

table.clean-info-table tr td p{
	text-align: center;
}

table.clean-info-table tr td:nth-child(1){
	width: 150px;
}

table.clean-info-table tr:nth-child(1) td{
	background: #275690;
}

table.clean-info-table tr:nth-child(1) td p{
	color: #ffffff;
}

table.clean-info-table tr:nth-last-child(1) td{
	border-bottom: 1px solid #275690;
}

table.clean-info-table tr td:nth-last-child(1){
	border-right: 1px solid #275690;
}


@media all and (max-width: 480px) {
	.clean-info-content p, table.clean-info-table tr td p{
		font-size: 1em;
	}

	.clean-info-content table tr td:nth-child(1){
		width: 85px;
	}

	table.clean-info-table tr td:nth-child(1) {
	    width: 100px;
	}
}


/* info */
section.clean-price{
	width: 100%;
	position: relative;
	margin: 0 auto;
	z-index: 2;
}

.clean-price-container{
	width: 90%;
	max-width: 1100px;
	position: relative;
	margin: 0 auto;
	padding-top: 50px;
}

.clean-price-content{
	width: 100%;
	position: relative;
}

.clean-price-content p{
	font-size: 1.2em;
    color: #333333;
    text-align: left;
}

.clean-price-pic{
	width: 100%;
	position: relative;
	margin: 10px auto;
}

.clean-price-pic img{
	width: 100%;
	max-height: 210px;
}

.clean-price-pic2 img{
	width: 100%;
	max-height: 200px;
    width: auto;
}

.clean-price-content table{
	width: 100%;
	max-width: 800px;
	position: relative;
}

.clean-price-content table tr td{
	vertical-align: top;
}

.clean-price-content table tr td:nth-child(1){
	width: 110px;
}

p.clean-price-memo{
	font-size: 1em;
}

@media all and (max-width: 480px) {
	.clean-price-content p{
		font-size: 1em;
	}

	.clean-price-content table tr td:nth-child(1){
		width: 95px;
	}
}


/* gift */
section.clean-gift{
	width: 100%;
	position: relative;
	margin: 0 auto;
	z-index: 2;
}

.clean-gift-container{
	width: 90%;
	max-width: 1100px;
	position: relative;
	margin: 0 auto;
	padding-top: 50px;
}

.clean-gift-content{
	width: 100%;
	position: relative;
	/* display: flex;
	justify-content: space-between;
    align-items: center; */
}

.clean-gift-text{
	width: 100%;
	position: relative;
}

.clean-gift-text p{
	font-size: 1.2em;
	color: #333333;
	margin-bottom: 1rem;
}



.clean-gift-pic {
	width: 100%;
	max-width: 600px;
	position: relative;
	margin-top: 10px;
}



.clean-gift-pic img{
	width: 100%;
	max-width: 400px;
}

.clean-gift-pic2 img{
	width: 100%;
	max-width: 320px;
}

/* @media all and (max-width: 768px) {
	.clean-gift-content{
		display: block;
	}

	.clean-gift-text, .clean-gift-pic{
		width: 100%;
		margin-bottom: 20px;
	}
} */

@media all and (max-width: 480px) {
	.clean-gift-text p{
		font-size: 1em;
	}
}

/* qualifications */
section.qualifications{
	width: 100%;
	position: relative;
	margin: 0 auto;
	z-index: 2;
}

.clean-qualifications-container{
	width: 90%;
	max-width: 1100px;
	position: relative;
	margin: 0 auto;
	padding-top: 50px;
}

.clean-qualifications-content{
	width: 100%;
	position: relative;
}

.clean-qualifications-content p{
	font-size: 1.2em;
    color: #333333;
}

.clean-qualifications-content ul li{
	list-style: disc;
	margin: 5px 0;
	margin-left: 1.2em;
}

@media all and (max-width: 480px) {
	.clean-qualifications-content p{
		font-size: 1em;
	}
}

/* method */
section.method{
	width: 100%;
	position: relative;
	margin: 0 auto;
	z-index: 2;
}

.clean-method-container{
	width: 90%;
	max-width: 1100px;
	position: relative;
	margin: 0 auto;
	padding-top: 50px;
}

.clean-method-content{
	width: 100%;
	position: relative;
	font-size: 1.2em;
	font-family: 'Roboto', "Noto Sans TC", sans-serif;
}

.clean-method-content p{
	/* font-size: 1.2em; */
    color: #333333;
}

.clean-method-content ol li{
	list-style: decimal;
	margin: 5px 0;
	margin-left: -1em;
	color: #333333;
}

.clean-method-content ol li:after{
	content: '';
	display: table;
	clear: both;
}

.clean-method-content ol li p em{
	font-weight: 700;
	color: #000000;
	/* text-decoration: underline; */
}

.clean-method-btn{
	width: 120px;
	padding: 10px;
	box-sizing: border-box;
	text-align: center;
	background: #000000;
	border-radius: 5px;
	color: #ffffff;
	cursor: pointer;
	position: relative;
	transition: .2s linear;
	margin: 4px 8px;
}

.clean-method-content em {
	color: #3b5998;
	font-weight: 500;
	padding: 0 3px;
}

.clean-method-btn a{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

.clean-method-content ol li p:after{
	content: '';
	display: table;
	clear: both;
}

.clean-method-btn a{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

.clean-method-btn:hover{
	color: #000000;
	background: #ffffff;
}

@media all and (max-width: 480px) {
	.clean-method-content ol li{
		font-size: 1em;
	}
}

/* team */
section.clean-team{
	width: 100%;
	position: relative;
	margin: 0 auto;
	z-index: 2;
}

.clean-team-container{
	width: 90%;
	max-width: 1100px;
	position: relative;
	margin: 0 auto;
	padding-top: 50px;
}

.clean-team-intro{
	width: 100%;
	position: relative;
	display: flex;
	justify-content: space-between;
	align-content: center;
}

.clean-team-logo{
	width: 30%;
	position: relative;
}

.clean-team-logo img{
	width: 100%;
}

.clean-team-text{
	width: 65%;
	position: relative;
}

.clean-team-text p{
	font-size: 1.2em;
    color: #333333;
}

.clean-team-btn{
	width: 250px;
	height: 45px;
	background: #275690;
	position: relative;
	box-sizing: border-box;
	border-radius: 10px;
	transition: .2s linear;
	margin: 10px 0;
}

.clean-team-btn p{
	text-align: center;
	line-height: 45px;
	color: #ffffff;
	font-size: 1em;
	transition: .2s linear;
}

.clean-team-btn a{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

.clean-team-btn:hover{
	background: none;
	border: 1px solid #275690;
}

.clean-team-btn:hover.clean-team-btn p{
	color: #275690;
}

@media all and (max-width: 640px) {
	.clean-team-intro{
		display: block;
	}

	.clean-team-logo{
		width: 90%;
		margin: 20px auto;
		/* margin-bottom: 20px; */
	}

	.clean-team-text{
		width: 100%;
	}
}

@media all and (max-width: 480px) {
	.clean-team-text p{
		font-size: 1em;
	}
}



/* method */
section.attention{
	width: 100%;
	position: relative;
	margin: 0 auto;
	z-index: 2;
}

.clean-attention-container{
	width: 90%;
	max-width: 1100px;
	position: relative;
	margin: 0 auto;
	padding-top: 50px;
}

.clean-attention-content{
	width: 100%;
	position: relative;
}

.clean-attention-content p{
	/* font-size: 1.2em; */
    color: #333333;
}

.clean-attention-content ol li{
	list-style: decimal;
	margin: 15px 0;
	font-family: 'Roboto', "Noto Sans TC", sans-serif;
	font-size: 1.2em;
	margin-left: -1em;
	color: #333333;
}

@media all and (max-width: 480px) {
	.clean-attention-content ol li{
		font-size: 1em;
	}
}

ul.list-dotted li {
	list-style: disc;
	font-size: inherit;
	margin: 0 0 0 1rem;
}

/* join */
section.join{
	width: 100%;
	position: relative;
	margin: 0 auto;
	z-index: 2;
}

.clean-join-container{
	width: 90%;
	max-width: 1100px;
	position: relative;
	margin: 0 auto;
	padding-top: 50px;
}

.clean-join-content{
	width: 100%;
	position: relative;
}

.clean-join-content p{
	font-size: 1.2em;
	color: #333333;
	margin-bottom: 1rem;
}

.clean-join-content a{
	color: #275690;
	text-decoration: underline;
}

.clean-join a {
	text-decoration: none;
}

@media all and (max-width: 480px) {
	.clean-join-content p{
		font-size: 1em;
	}
}


/* contact */
section.clean-contact{
	width: 100%;
	position: relative;
	margin: 0 auto;
	z-index: 2;
	margin-bottom: 50px;
}

.clean-contact-container{
	width: 90%;
	max-width: 1100px;
	position: relative;
	margin: 0 auto;
	padding-top: 50px;
}

.clean-contact-content{
	width: 100%;
	position: relative;
}

.clean-contact-content p{
	font-size: 1.2em;
    color: #333333;
}

.clean-contact-content a{
	color: #275690;
}


@media all and (max-width: 480px) {
	.clean-contact-content p{
		font-size: 1em;
	}
}

.highlight-blue {
	color: #275690;
	font-weight: 500;
}

.MuiTypography-h4 {text-align: center!important;}

/* ============================================================
RWD
============================================================ */
@media all and (max-width: 1440px) {
	
}

@media all and (max-width: 1366px){
	
}

@media all and (max-width: 1280px){
	
}

@media all and (max-width: 1024px) {
	
}

@media all and (max-width: 960px) {
	
}

@media screen and (orientation: portrait) {
	

}

@media all and (max-width: 768px) {
	
}

@media all and (max-width: 640px) {
	
}

@media all and (max-width: 480px) {
	
}


@media all and (max-width: 320px){
	
}