html {
    font-size: 24pt; /* 默认值适用于最大宽度640px */
}

@media only screen and (min-width: 641px) {
    html {
        font-size: 20pt;
    }
}

@media only screen and (min-width: 961px) {
    html {
        font-size: 17pt;
    }
}

@media only screen and (min-width: 1471px) {
    html {
        font-size: 14pt;
    }
}

body {
	margin: 0;
	background-color: #b8ecfd
}

.container {
	position: relative;
	background: #6ab8f9
}

.container #sky {
	height: 22.5vh;
	min-height: 200px;
	width: 100%;
	margin: 0;
	padding: 0
}

.container #sky .cloud {
	margin: auto;
	position: absolute;
	left: 0;
	top: 0;
	right: 40%;
	bottom: 380px;
	height: 125px;
	width: 125px;
	border-radius: 50%;
	background-color: white;
	opacity: .6
}

.container #sky .cloud:nth-of-type(2) {
	bottom: 330px;
	left: 40%;
	right: 0;
}

.container #sky .cloud::before {
	content: "";
	position: absolute;
	left: 80px;
	top: 40px;
	height: 85px;
	width: 85px;
	border-radius: 50%;
	background-color: white
}

.container #sky .cloud::after {
	content: "";
	position: absolute;
	left: -40px;
	top: 35px;
	height: 85px;
	width: 85px;
	border-radius: 50%;
	background-color: white
}

.container #text {
	height: 42.5vh;
	width: 100%;
	margin: 0;
	padding: 0;
	text-align: center;
}

.container #text .title {
    width: 100%;
    background: none;
    margin: auto;
    position: absolute;
    bottom: 0;
    left: 0;
    top: -120px;
    right: 0;
    height: 180px;
}

.container #text .menu {
	display: -moz-flex;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	-moz-flex-direction: column;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	-moz-align-items: center;
	-webkit-align-items: center;
	-ms-align-items: center;
	align-items: center;
	max-width: 100%;
	text-align: center;
}

.container #text .menu ul {
	display: -moz-flex;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	margin-bottom: 0;
	list-style: none;
	padding-left: 0;
	border: solid 1px #ffffff;
	border-radius: 4px;
}

.container #text .menu ul li {
	padding-left: 0;
	border-left: solid 1px #ffffff;
}

.container #text .menu ul li:first-child {
	border-left: 0;
}

.container #text .menu ul li a {
	display: block;
	min-width: 7.5rem;
	height: 2.75rem;
	line-height: 2.75rem;
	padding: 0 1.25rem 0 1.45rem;
	text-transform: uppercase;
	letter-spacing: 0.2rem;
	font-size: 1.1rem;
	color: inherit;
	border-bottom: 0;
	text-decoration: none;
}

.container #text .menu ul li a:hover {
	background-color: rgba(255, 255, 255, 0.075);
}

.container #text .menu ul li a:active {
	background-color: rgba(255, 255, 255, 0.175);
}

.container #ocean #boat-container {
	animation: boatsway 3s ease-in-out infinite alternate
}

@keyframes boatsway {
	from {
		transform: rotate(-5.5deg)
	}

	to {
		transform: rotate(5.5deg)
	}
}

.container #ocean #boat-container #boat {
	margin: auto;
	position: absolute;
	bottom: 0;
	left: 0;
	top: 0;
	right: 0;
	top: 45px;
	width: 400px;
	height: 100px;
	background-color: #225cee;
	border-bottom-right-radius: 5rem;
	border-bottom-left-radius: 5rem;
	z-index: 3;
	transform-style: preserve-3d
}

.container #ocean #boat-container #boat::before {
	content: "";
	position: absolute;
	height: 125px;
	width: 125px;
	left: 225px;
	bottom: 0;
	border-top-left-radius: 4rem;
	border-bottom-right-radius: 5rem;
	background-color: #225cee;
	z-index: 3
}

.container #ocean #boat-container #boat::after {
	content: "";
	position: absolute;
	height: 100px;
	width: 100px;
	left: 222.5px;
	bottom: 45px;
	border-radius: 4rem;
	background-color: #fadd5f;
	transform: translateZ(-1px)
}

.container #ocean #boat-container #boat #shadow-right {
	margin: auto;
	position: absolute;
	bottom: 0;
	left: 0;
	top: 0;
	right: 0;
	left: 200px;
	height: 100px;
	width: 100px;
	height: 125px;
	width: 125px;
	left: 275px;
	bottom: 25px;
	border-top-left-radius: 4rem;
	border-bottom-right-radius: 5rem;
	background-color: #063ad4;
	z-index: 2
}

.container #ocean #boat-container #boat #rim-left {
	margin: auto;
	position: absolute;
	bottom: 0;
	left: 0;
	top: 0;
	right: 0;
	width: 260px;
	height: 22.5px;
	background-color: #fadd5f;
	border-radius: 5rem;
	left: -180px;
	bottom: 115px;
	z-index: 3
}

.container #ocean #boat-container #boat #rim-right {
	margin: auto;
	position: absolute;
	bottom: 0;
	left: 0;
	top: 0;
	right: 0;
	width: 155px;
	height: 20px;
	background-color: #fadd5f;
	border-radius: 5rem;
	right: -290px;
	bottom: 170px;
	z-index: 5
}

.container #ocean #boat-container #boat #rim-right::before {
	content: "";
	position: absolute;
	width: 55px;
	right: 0;
	height: 20px;
	background-color: #f5b748;
	border-radius: 5rem
}

.container #ocean #boat-container #boat #rim-right::after {
	content: "";
	position: absolute;
	width: 55px;
	right: 40px;
	height: 20px;
	background-color: #fadd5f;
	border-radius: 5rem
}

.container #ocean #boat-container #boat #luggage-right {
	margin: auto;
	position: absolute;
	bottom: 0;
	left: 0;
	top: 0;
	right: 0;
	bottom: 180px;
	border-top-left-radius: 1rem;
	border-top-right-radius: 1rem;
	width: 90px;
	height: 50px;
	left: 295px;
	opacity: .7;
	background-color: #b8ecfd
}

.container #ocean #boat-container #boat #luggage-right::before {
	content: "";
	position: absolute;
	bottom: 40px;
	left: 20px;
	border-top-left-radius: 1rem;
	border-top-right-radius: 1rem;
	height: 27.5px;
	width: 50px;
	background-color: #b8ecfd
}

.container #ocean #boat-container #boat #luggage-right::after {
	content: "";
	position: absolute;
	bottom: 50px;
	left: 30.5px;
	height: 7.5px;
	width: 30px;
	background-color: #6ab8f9
}

.container #ocean #boat-container #boat #luggage-right-shadow {
	margin: auto;
	position: absolute;
	bottom: 0;
	left: 0;
	top: 0;
	right: 0;
	bottom: 180px;
	border-top-left-radius: 1rem;
	border-top-right-radius: 1rem;
	width: 50px;
	height: 50px;
	left: 257.5px;
	opacity: .7;
	background-color: white
}

.container #ocean #boat-container #boat #luggage-left {
	margin: auto;
	position: absolute;
	bottom: 0;
	left: 0;
	top: 0;
	right: 0;
	left: -380px;
	bottom: 143px;
	width: 110px;
	height: 70px;
	border-radius: 1rem;
	background-color: #b8ecfd;
	opaciy: .7;
	transform: translateZ(-1px)
}

.container #ocean #boat-container #boat #luggage-left::before {
	content: "";
	position: absolute;
	left: -20px;
	width: 80px;
	height: 57.5px;
	background-color: white;
	border-radius: 1rem
}

.container #ocean #boat-container #boat #luggage-left::after {
	content: "";
	position: absolute;
	top: 12.5px;
	left: -2.5px;
	width: 37.5px;
	height: 12.5px;
	background-color: #fadd5f;
	border-radius: 1rem
}

.container #ocean #boat-container #sailor {
	margin: auto;
	position: absolute;
	bottom: 0;
	left: 0;
	top: 0;
	right: 0;
	top: -140px;
	height: 110px;
	width: 97.5px;
	right: 115px;
	border-top-left-radius: 4rem;
	border-top-right-radius: 4rem;
	background-color: #ec4e2f;
	z-index: 1
}

.container #ocean #boat-container #sailor::before {
	content: "";
	position: absolute;
	width: 14.5px;
	height: 8.5px;
	background-color: black;
	border-bottom-left-radius: 1rem;
	border-bottom-right-radius: 1rem;
	top: 70.5px;
	left: 35.5px
}

.container #ocean #boat-container #sailor-arm-left {
	margin: auto;
	position: absolute;
	bottom: 0;
	left: 0;
	top: 0;
	right: 0;
	left: -65.5px;
	top: -70px;
	height: 55px;
	width: 30px;
	background-color: #ec4e2f;
	z-index: 6;
	transform: translateZ(1px);
	border-radius: 4rem
}

.container #ocean #boat-container #sailor-arm-right {
	margin: auto;
	position: absolute;
	bottom: 0;
	left: 0;
	top: 0;
	right: 0;
	left: -235.5px;
	top: -145px;
	height: 30px;
	width: 65px;
	background-color: #ec4e2f;
	z-index: 6;
	transform: translateZ(1px);
	border-radius: 4rem;
	transform-origin: right center;
	animation: wave .85s infinite alternate ease-in-out
}

@keyframes wave {
	from {
		transform: rotate(-15deg)
	}

	to {
		transform: rotate(15deg)
	}
}

.container #ocean #boat-container .sailor-eye {
	margin: auto;
	position: absolute;
	bottom: 0;
	left: 0;
	top: -100px;
	right: 0;
	left: -162.5px;
	bottom: 180px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background-color: white;
	z-index: 7
}

.container #ocean #boat-container .sailor-eye:nth-of-type(2) {
	left: -87.5px
}

.container #ocean #boat-container .sailor-eye::before {
	content: "";
	position: absolute;
	width: 10px;
	height: 10px;
	background-color: black;
	border-radius: 50%;
	top: 9px;
	left: 10px
}

.container #ocean #boat-container #sailor-cap {
	margin: auto;
	position: absolute;
	bottom: 0;
	left: 0;
	top: 0;
	right: 0;
	bottom: 255px;
	right: 80px;
	height: 50px;
	width: 37.5px;
	border-top-left-radius: 12.5px;
	border-top-right-radius: 12.5px;
	background-color: #f5b748;
	transform: rotate(20deg)
}

.container #ocean #boat-container #sailor-cap::before {
	content: "";
	position: absolute;
	right: 20px;
	top: 5px;
	height: 50px;
	width: 27.5px;
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
	background-color: #fadd5f;
	transform: rotate(-50deg)
}

.container #ocean .waves {
	position: relative;
	width: 100%;
	height: 15vh;
	margin-bottom: -7px;
	min-height: 100px;
	max-height: 150px;
	z-index: 10
}

.container #ocean .parallax>use {
	animation: tide 25s cubic-bezier(0.55,0.5,0.45,0.5) infinite
}

@keyframes tide {
	from {
		transform: translate3d(-90px,0,0)
	}

	to {
		transform: translate3d(85px,0,0)
	}
}

.container #ocean .parallax>use:nth-child(1) {
	animation-delay: -2s;
	animation-duration: 7s
}

.container #ocean .parallax>use:nth-child(2) {
	animation-delay: -3s;
	animation-duration: 10s
}

.container #ocean .parallax>use:nth-child(3) {
	animation-delay: -4s;
	animation-duration: 13s
}

.container #ocean .parallax>use:nth-child(4) {
	animation-delay: -5s;
	animation-duration: 20s
}