@charset "UTF-8";
/* 设置根元素字体大小为视口宽度与设计稿宽度的比例，实现响应式布局 */
:root {
  font-size: 0.0520833333vw;
  -webkit-tap-highlight-color: transparent;
}

/* 当屏幕宽度小于等于 750px 时，采用移动端适配比例（以 750 设计稿为基准） */
@media screen and (max-width: 750px) {
  :root {
    font-size: 0.1333333333vw;
  }
}
* {
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  font-size: 16rem;
  line-height: 1.44;
  color: #333333;
  overflow: auto;
}

#app {
  position: relative;
  min-height: 100%;
}

@keyframes slideDown {
  from {
    transform: translate3d(0, -100%, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
.navbar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: #ffffff;
  transition: transform 0.3s ease, background 0.3s ease;
  padding: 10rem 30rem 30rem;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
  z-index: 999;
}
.navbar.sticky {
  position: fixed;
  transform: translate3d(0, -100%, 0); /* 先隐藏在顶部 */
  background: #fff;
  animation: slideDown 0.3s forwards;
}
.navbar.sticky .navbar-nav .nav-item span {
  color: #333333;
}

.nav-container {
  width: 100%;
  display: flex;
  align-items: center;
}
.nav-container .logo {
  width: 310rem;
  padding-left: 16rem;
}
.nav-container .logo img {
  display: block;
  width: 212rem;
  margin: 0 auto;
}
.nav-container .menu-btn {
  display: none;
}
.nav-container .menu-list {
  display: none;
  position: absolute;
  right: 0;
  bottom: 0;
  transform: translateY(100%);
  width: 320rem;
  text-align: center;
  background: #ffffff;
  border: 2rem solid rgba(0, 0, 0, 0.15);
  border-radius: 8rem;
  box-shadow: 0 12rem 24rem rgba(0, 0, 0, 0.175);
  padding: 10rem 0;
}
.nav-container .menu-list a {
  display: block;
  text-decoration: none;
  font-size: 28rem;
  color: #333333;
  padding: 8rem 40rem;
}

.navbar-nav {
  display: flex;
  align-items: center;
  width: 1240rem;
  padding-top: 14rem;
  margin-left: 40rem;
}
.navbar-nav .nav-item {
  width: 200rem;
}
.navbar-nav .nav-item span {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  font-size: 18rem;
  border-radius: 20rem;
  color: #333333;
  transition: color 0.3s ease, background 0.3s ease;
  cursor: pointer;
  margin: 0 auto;
}
.navbar-nav .nav-item span a {
  display: block;
  color: inherit;
  text-decoration: none;
  padding: 6rem 20rem;
}
.navbar-nav .nav-item span.active {
  background: #ededed;
}
.navbar-nav .nav-item span:hover {
  background: #ededed;
}

.navbar.home {
  background: transparent;
  box-shadow: none;
}
.navbar.home .nav-container .navbar-nav .nav-item span {
  color: #ffffff;
}
.navbar.home .nav-container .navbar-nav .nav-item span.active {
  color: #4d72ec;
  background: #ffffff;
}
.navbar.home .nav-container .navbar-nav .nav-item span:hover {
  color: #4d72ec;
  background: #ffffff;
}
.navbar.home.sticky {
  background: #ffffff;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
}
.navbar.home.sticky .nav-container .navbar-nav .nav-item span {
  color: #333333;
}
.navbar.home.sticky .nav-container .navbar-nav .nav-item span.active {
  color: #333333;
  background: #ededed;
}
.navbar.home.sticky .nav-container .navbar-nav .nav-item span:hover {
  color: #333333;
  background: #ededed;
}

footer {
  font-size: 16rem;
  text-align: center;
}
footer .copyright {
  margin-bottom: 20rem;
}
footer .link {
  text-decoration: none;
  color: #337ab7;
}

@keyframes move {
  from {
    transform: translateX(-120%);
  }
  to {
    transform: translateX(-100%);
  }
}
.sidebar {
  position: fixed;
  right: 50rem;
  bottom: 50rem;
  z-index: 100;
  border: 1px solid #f0f0f0;
  background: #ffffff;
  box-shadow: 0 0 10px #acacac;
}
.sidebar li {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60rem;
  height: 60rem;
}
.sidebar li img {
  width: 45rem;
  height: 45rem;
}
.sidebar li img.back {
  width: 21rem;
  height: 24rem;
}
.sidebar li + li {
  border-top: 1px solid #f0f0f0;
}
.sidebar li .popup {
  display: none;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 160rem;
  height: 160rem;
  transform: translateX(-100%);
}
.sidebar li .popup img {
  display: block;
  width: 100%;
  height: 100%;
}
.sidebar li:hover .popup {
  display: block;
  animation: move 0.3s;
}

@media screen and (max-width: 750px) {
  .navbar {
    padding: 20rem;
    background: #ffffff !important;
  }
  .navbar-nav {
    display: none;
  }
  .nav-container .logo {
    width: 212rem;
    padding: 0;
  }
  .nav-container .menu-btn {
    display: block;
    font-size: 48rem;
    margin-top: 12rem;
    margin-left: auto;
  }
  .nav-container .menu-list {
    display: block;
  }
  footer .desktop {
    display: none;
  }
  footer .mobile {
    display: block;
  }
  .sidebar {
    right: 30rem;
    bottom: 30rem;
  }
  .sidebar li {
    width: 120rem;
    height: 120rem;
  }
  .sidebar li img {
    width: 90rem;
    height: 90rem;
  }
  .sidebar li img.back {
    width: 42rem;
    height: 48rem;
  }
  .sidebar li .popup {
    width: 320rem;
    height: 320rem;
  }
}
::-webkit-scrollbar-track-piece {
  background-color: #fff;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-thumb {
  background-color: #dfdede;
  background-clip: padding-box;
  min-height: 28px;
  border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #c8c8c8;
}