html {
  color: #111;
  font-size: 1em;
  line-height: 1.4;
}
/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */
::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}
::selection {
  background: #b3d4fc;
  text-shadow: none;
}
/*
 * A better looking default horizontal rule
 */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}
/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */
audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}
/*
 * Remove default fieldset styles.
 */
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}
/*
 * Allow only vertical resizing of textareas.
 */
textarea {
  resize: vertical;
}
/* ==========================================================================
   Author's custom styles
   ========================================================================== */
/* ==========================================================================
   Helper classes
   ========================================================================== */
/*
 * Hide visually and from screen readers
 */
.hidden,
[hidden] {
  display: none !important;
}
/*
 * Hide visually and from screen readers, but maintain layout
 */
.invisible {
  visibility: hidden;
}
/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.clearfix::before,
.clearfix::after {
  content: " ";
  display: table;
}
.clearfix::after {
  clear: both;
}
/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */
@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}
@media print, (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 1.25dppx), (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}
body,
html {
  font-size: 100%;
  padding: 0;
  margin: 0;
  height: initial;
}
* {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
  /* 去除默认的下划线 */
  color: #111;
}
ul,
li {
  list-style: none;
}
label,
input {
  margin: 0;
  padding: 0;
}
/* Reset */
*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.main:before,
.main:after,
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}
.main:after,
.clearfix:after {
  clear: both;
}
body {
  background: #fcf3ec;
  color: #090b0a;
  font-weight: 500;
  font-size: 14px;
  font-family: "幼圆", "黑体", "宋体", SimSun, FangSong, STSong, STFangsong, Helvetica, Arial, sans-serif;
  overflow: hidden;
  position: relative;
}
.main {
  width: 100vw;
  height: 100vh;
  min-width: 1200px;
  min-height: 680px;
  position: relative;
  z-index: 2;
  background-position: top center;
  background-size: 1920px auto;
  background-repeat: no-repeat;
  /*min-width: 1920px;*/
  /*min-height: 1080px;*/
}
.swiper {
  width: 100%;
  height: 100%;
}
.swiper-slide {
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.menu {
  width: 1200px;
  height: 60px;
  position: absolute;
  top: 120px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  background-image: url("../img/menu.png");
  background-position: center center;
  background-size: auto 58px;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.menu .menu_list {
  position: relative;
  height: 60px;
}
.menu .menu_list .menu_item {
  font-size: 20px;
  line-height: 60px;
  color: transparent;
  overflow: hidden;
  display: inline-block;
  text-align: center;
  padding-left: 20px;
}
.menu .menu_logo {
  width: 340px;
  height: 60px;
}
footer {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 12px;
  color: #090b0a;
  z-index: 999;
  font-weight: 600;
}
footer a {
  text-decoration: underline;
  color: inherit !important;
}
.bubble-box {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}
.bubble {
  position: absolute;
  border-radius: 50%;
  background-image: url('../img/bubble_1.png');
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center center;
  animation: flutter 10s infinite;
  opacity: 0;
  pointer-events: none;
}
@keyframes flutter {
  0% {
    transform: translateX(0) scale(1);
    bottom: -100px;
    opacity: 1;
  }
  50% {
    transform: translateX(200px);
    opacity: 0.6;
  }
  100% {
    transform: translateX(0px) scale(1.2);
    bottom: 100%;
    opacity: 0;
  }
}
.bubble:nth-child(1) {
  left: -10%;
  width: 80px;
  height: 80px;
  animation-duration: 9s;
  animation-delay: 0.1s;
}
.bubble:nth-child(2) {
  left: 15%;
  width: 150px;
  height: 150px;
  animation-duration: 6s;
  animation-delay: 1.5s;
  background-image: url('../img/bubble_2.png');
}
.bubble:nth-child(3) {
  left: 20%;
  width: 60px;
  height: 60px;
  animation-duration: 10s;
}
.bubble:nth-child(4) {
  left: 30%;
  width: 100px;
  height: 100px;
  animation-duration: 5.5s;
  animation-delay: 1.5s;
}
.bubble:nth-child(5) {
  left: 40%;
  width: 50px;
  height: 50px;
  animation-duration: 12s;
}
.bubble:nth-child(6) {
  left: 50%;
  width: 60px;
  height: 60px;
  animation-duration: 6s;
  animation-delay: 1s;
}
.bubble:nth-child(7) {
  left: 60%;
  width: 100px;
  height: 100px;
  animation-duration: 8s;
  animation-delay: 1s;
  background-image: url('../img/bubble_2.png');
}
.bubble:nth-child(8) {
  left: 65%;
  width: 60px;
  height: 60px;
  animation-duration: 15s;
}
.bubble:nth-child(9) {
  left: 80%;
  width: 55px;
  height: 55px;
  animation-duration: 9s;
  animation-delay: 0.5s;
}
.bubble:nth-child(10) {
  left: 100%;
  width: 88px;
  height: 88px;
  animation-duration: 12s;
  background-image: url('../img/bubble_2.png');
}