:root {
  --main-primary-color: #910000;
  --main-secondary-color: #e2caa3;
  --main-box-shadow: 0px 2px 4px 0px rgba(46, 25, 16, 0.16);
  --main-detail-background-img: url("/img/box_banner_bg.png");
  font-size: 16px;
}

html,
body,
#app,
.page {
  font-family: SimSun;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.back {
  cursor: pointer;
}

/* Scroll bar stylings */
::-webkit-scrollbar {
  width: 0.625rem;
  height: 0.625rem;
}

/* Track */
::-webkit-scrollbar-track {
  background: var(--lightestgrey);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 0.3125rem;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}
.main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
}
.page:not(.home) .main {
  --main-sub-header-height: 6.3125rem;
  --main-sub-header-logo-height: 4.9375rem;
  --main-sub-header-margin-left: 8.0625rem;
  --main-sub-header-background: url("/img/sub_title_bg.png");
  --main-sub-menu-width: 5.9375rem;
  --main-sub-menu-border-radius: 2.5rem;
  --main-sub-logo: url("/img/sub_logo.png");
  --main-right-background: url("/img/sub_bg.png");
  --main-right-back-btn: url("/img/sub_back_btn.png");

  --main-background: #eaeaea;
  --logo-width: 4.9375rem;
  --go-home-width: 3.75rem;
  --logo-background-color: #910000;

  --main-sub-nav-background: url("/img/sub_nav_bg.png");
  --main-sub-nav-height: 3.5rem;
  --main-sub-nav-title-width: 21.375rem;
}
.page:not(.home) .main .content {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  justify-content: flex-start;
  background-color: var(--main-background);
}
.page:not(.home) .main .content .left {
  flex-grow: 0;
  margin-right: var(--main-sub-menu-width);
  height: calc(100% - var(--main-sub-header-height));
  display: inline-flex;
  flex-direction: column;
}

.page:not(.home) .main .content .right {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
}
.page:not(.home) .main .n-tabs .n-tabs-nav {
  height: var(--main-sub-nav-height);
  width: 100%;
  flex: 0 0 auto;
  background-image: var(--main-sub-nav-background);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: left center;
}

.page:not(.home) .main .content .meta-title {
  text-align: center;
  width: var(--main-sub-nav-title-width);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.page:not(.home) .main .content .meta-title img {
  width: auto;
  height: calc(var(--main-sub-nav-height) - 0.95rem);
}

.page:not(.home) .main .content .tab-content {
  width: calc(100% - 10rem);
  margin: 0 auto;
  &::-webkit-scrollbar {
    display: none;
  }
}
/* .tab-content */
.page:not(.home) .main .content .n-tabs {
  --n-tab-font-size: 1.25rem !important;
  --n-tab-gap: 120px !important;
  --n-pane-padding-top: 3.125rem !important;
  --n-pane-padding-bottom: 3.125rem !important;
  height: 100%;
  overflow: hidden;
}

.page:not(.home) .main .content .n-tabs .v-x-scroll,
.page:not(.home) .main .content .n-tabs .v-x-scroll * {
  height: 100%;
}
.page:not(.home) .main .content .n-tabs .n-tab-pane {
  overflow-y: scroll;
}
.page:not(.home) .main .content .n-tabs .n-tabs-bar {
  height: 0.25rem;
  border-radius: 1.875rem !important;
}

.vr_button {
  background-image: url("/img/vr_btn.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  width: 100px;
  height: 24px;
  cursor: pointer;
}
