.sidebar-mode {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: #000;
  opacity: 0.2;
  z-index: 98;
  display: none;
}
.sidebar {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 999;
  width: 200rem;
  height: 100vh;
  background-image: url(/expert/web/icon/side-bar-bg.png);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 340rem 100%;
  animation: showSideBar 0.5s linear forwards;
  display: none;
  z-index: 101;
}
.sidebar .logo {
  width: 99rem;
  height: 100rem;
  position: absolute;
  top: 80rem;
  left: 80rem;
}
.sidebar .text {
  width: 73rem;
  position: absolute;
  right: 42rem;
  top: 80rem;
  left: 72rem;
}
.sidebar .nav {
  position: absolute;
  width: 180rem;
  top: 282rem;
  right: 0;
}
.sidebar .nav a {
  color: #5e4a23;
  text-decoration: none;
}
.sidebar .nav a:hover {
  color: #9a3312;
}
.sidebar .nav ul,
.sidebar .nav li {
  list-style: none;
}
.sidebar .nav .nav-main {
  width: 100%;
  padding: 0;
  margin: 0;
}
.sidebar .nav .nav-main > li {
  padding: 20rem 0;
  cursor: pointer;
  position: relative;
  width: 100%;
  text-align: center;
  left: 0;
}
.sidebar .nav .nav-main > li:nth-child(1) {
  animation: titleMoveIn 0.6s ease-in forwards;
}
.sidebar .nav .nav-main > li:nth-child(2) {
  animation: titleMoveIn 0.7s ease-in forwards;
}
.sidebar .nav .nav-main > li:nth-child(3) {
  animation: titleMoveIn 0.8s ease-in forwards;
}
.sidebar .nav .nav-main > li:nth-child(4) {
  animation: titleMoveIn 0.9s ease-in forwards;
}
.sidebar .nav .nav-main > li:nth-child(5) {
  animation: titleMoveIn 1s ease-in forwards;
}
.sidebar .nav .nav-main > li:nth-child(6) {
  animation: titleMoveIn 1.1s ease-in forwards;
}
.sidebar .nav .nav-main > li:nth-child(7) {
  animation: titleMoveIn 1.2s ease-in forwards;
}
.sidebar .nav .nav-main > li:nth-child(8) {
  animation: titleMoveIn 1.3s ease-in forwards;
}
.sidebar .nav .nav-main > li:nth-child(9) {
  animation: titleMoveIn 1.4s ease-in forwards;
}
.sidebar .nav .nav-main > li:nth-child(10) {
  animation: titleMoveIn 1.5s ease-in forwards;
}
.sidebar .nav .nav-main > li.active .title {
  color: #9a3312;
  position: relative;
}
.sidebar .nav .nav-main > li.active.active .title:not(.none-child)::after {
  content: '';
  position: absolute;
  width: 14rem;
  height: 14rem;
  top: 50%;
  margin-top: -7rem;
  background-image: url(/expert/web/icon/nav-icon-active.png);
  background-size: 14rem 14rem;
  animation: titleAciveArr 0.5s ease-in-out forwards;
}
.sidebar .nav .nav-main .title {
  font-family: FZCUJINLJW--GB1-0;
  font-size: 18rem;
  color: #5e4a23;
  letter-spacing: 0;
  text-align: center;
  position: relative;
}
.sidebar .nav .nav-main .children {
  display: none;
  position: absolute;
  background-color: #f1ebdd;
  right: 100%;
  top: 0;
  padding: 0;
  border-radius: 3rem 0 0 3rem;
  z-index: -1;
  overflow: hidden;
  width: 0;
  animation: navChild 0.5s ease-in-out forwards;
}
.sidebar .nav .nav-main .children li {
  font-family: FZCUJINLJW--GB1-0;
  font-size: 18rem;
  color: #5e4a23;
  text-align: center;
  height: 62rem;
  line-height: 62rem;
  position: relative;
  z-index: -1;
  width: 180rem;
}
.sidebar .nav .nav-main .children li:not(:last-child):after {
  content: '';
  width: 71rem;
  height: 1rem;
  background-color: #d9b0a6;
  position: absolute;
  bottom: 0;
  left: 55rem;
  opacity: 0.4;
}
.sidebar .nav .nav-main .children li:not(:last-child)::before {
  content: '';
  position: absolute;
  bottom: -1rem;
  left: 90rem;
  width: 3rem;
  height: 3rem;
  background: #d9b0a6;
  border-radius: 100%;
}
.sidebar .nav .nav-main .children li:hover {
  color: #9a3312;
}
.sidebar .nav .nav-main .children li:nth-child(1) {
  animation: navChildTitleMoveIn 0.6s ease-in-out forwards;
}
.sidebar .nav .nav-main .children li:nth-child(2) {
  animation: navChildTitleMoveIn 0.7s ease-in-out forwards;
}
.sidebar .nav .nav-main .children li:nth-child(3) {
  animation: navChildTitleMoveIn 0.8s ease-in-out forwards;
}
.sidebar .nav .nav-main .children li:nth-child(4) {
  animation: navChildTitleMoveIn 0.9s ease-in-out forwards;
}
.sidebar .nav .nav-main .children li:nth-child(5) {
  animation: navChildTitleMoveIn 1s ease-in-out forwards;
}
.sidebar .nav .lang {
  text-align: center;
  font-family: FZCUJINLJW--GB1-0;
  font-size: 18rem;
  color: #5e4a23;
  letter-spacing: 0;
  margin-top: 80rem;
  cursor: pointer;
  position: relative;
  animation: showSideBar 1.2s linear forwards;
}
.sidebar .nav .lang span.inactive {
  opacity: 0.6;
}
.sidebar .nav .lang span {
  opacity: 1;
}
@keyframes showSideBar {
  0% {
    right: -200rem;
  }
  100% {
    right: 0;
  }
}
@keyframes titleMoveIn {
  0% {
    left: 200rem;
  }
  100% {
    left: 0;
  }
}
@keyframes titleAciveArr {
  0% {
    left: 40rem;
    opacity: 0;
  }
  100% {
    left: 24rem;
    opacity: 1;
  }
}
@keyframes navChild {
  0% {
    width: 0;
  }
  100% {
    width: 180rem;
  }
}
@keyframes navChildTitleMoveIn {
  0% {
    left: 80rem;
  }
  100% {
    left: 0;
  }
}
.logo-fix {
  position: fixed;
  top: 39rem;
  right: 64rem;
  z-index: 1000;
  cursor: pointer;
  padding: 5rem;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 12rem;
  width: 90rem;
  height: 90rem;
  display: none;
  animation: fadeInOut 0.6s forwards ease-in infinite alternate;
}
.logo-fix.space-wrap {
  top: 180rem;
}
.logo-fix-lv2 {
  padding: 5rem;
  width: 80rem;
  height: 80rem;
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 12rem;
  animation: fadeInOut2 0.6s forwards ease-in infinite alternate;
}
.logo-fix-lv3 {
  width: 80rem;
  height: 80rem;
  background-color: #fff;
  border-radius: 12rem;
}
.logo-fix .swallow {
  position: relative;
  width: 80rem;
  height: 80rem;
}
.logo-fix .swallow img.gif {
  transform: rotateY(180deg) translate(3rem, 0);
  width: 70rem;
  height: 70rem;
  display: block;
  margin: auto;
}
.logo-fix .swallow img.space {
  width: 64rem;
  display: block;
  margin: auto;
}
.logo-fix .logo-text {
  font-size: 14rem;
  position: absolute;
  bottom: 12rem;
  left: 0;
  right: 0;
  text-align: center;
  line-height: 1;
  color: #5e4a23;
}
.logo-fix.fly-out {
  background-color: transparent;
  animation: none;
  transition: all 0.3s ease-in;
}
.logo-fix.fly-out .logo-fix-lv2,
.logo-fix.fly-out .logo-fix-lv3 {
  background-color: transparent;
  animation: none;
  transition: background-color 0.3s ease-out;
}
.logo-fix.fly-out .logo-fix-lv3 {
  background-color: transparent;
  transform-origin: -10rem 150%;
  transition: transform 1.5s ease-out;
  transform: rotate(-360deg);
}
.logo-fix.fly-out .swallow {
  position: fixed;
  z-index: 1000;
  transform: rotate(0deg) translate(45rem, 0rem);
  transition: transform 0.8s ease-out;
}
.logo-fix.fly-out .swallow img.left {
  animation: bird_fly_left 0.2s forwards ease-in infinite alternate;
}
.logo-fix.fly-out .swallow img.right {
  animation: bird_fly_right 0.2s forwards ease-in infinite alternate;
}
.logo-fix.fly-out .logo-text {
  opacity: 0;
}
.logo-fix.fly-out.fly-in .swallow img.left {
  animation: bird_fly_left 0.6s forwards ease-in infinite alternate;
}
.logo-fix.fly-out.fly-in .swallow img.right {
  animation: bird_fly_right 0.6s forwards ease-in infinite alternate;
}
@keyframes bird_fly_left {
  0% {
    transform: translate(-35rem, -50%) rotateY(-20deg) rotateZ(10deg);
  }
  100% {
    transform: translate(-35rem, -50%) rotateY(30deg) rotateZ(-10deg);
  }
}
@keyframes bird_fly_right {
  0% {
    transform: translate(6rem, -50%) rotateY(-20deg) rotateZ(-10deg);
  }
  100% {
    transform: translate(6rem, -50%) rotateY(30deg) rotateZ(10deg);
  }
}
@keyframes bird_flying_x {
  0% {
    right: 74rem;
  }
  100% {
    right: 274rem;
  }
}
@keyframes bird_flying_y {
  0% {
    top: 74rem;
  }
  100% {
    top: 274rem;
  }
}
@keyframes bird_flying_r {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-180deg);
  }
}
@keyframes fadeInOut {
  0% {
    background-color: rgba(255, 255, 255, 0.1);
  }
  100% {
    background-color: rgba(255, 255, 255, 0.2);
  }
}
@keyframes fadeInOut2 {
  0% {
    background-color: rgba(255, 255, 255, 0.2);
  }
  100% {
    background-color: rgba(255, 255, 255, 0.4);
  }
}
.space-time {
  position: fixed;
  top: 196rem;
  right: 64rem;
  z-index: 100;
  display: none;
  cursor: pointer;
}
.space-time img {
  width: 100rem;
  height: 100rem;
  display: block;
}