/* ==================== Global Reset & Base ==================== */
@font-face {
  font-family: 'Microsoft YaHei UI';
  font-style: normal;
  font-weight: 700;
  src: url('https://www.jingyougz.com/_nuxt/MicrosoftYaHeiUI-Bold-subset.woff2') format('woff2');
}
@font-face {
  font-family: 'Microsoft YaHei UI';
  font-style: normal;
  font-weight: 400;
  src: url('https://www.jingyougz.com/_nuxt/MicrosoftYaHeiUI-subset.woff2') format('woff2');
}

* {
  font-display: swap;
  font-family: 'Microsoft YaHei UI', 'Microsoft YaHei UI-Bold', sans-serif;
  box-sizing: border-box;
}

*::after, *::before {
  background-repeat: no-repeat;
  box-sizing: border-box;
}

html {
  height: 100%;
  touch-action: manipulation;
}

body {
  margin: 0;
  overscroll-behavior-y: none;
  overflow: hidden;
}

a, a:focus, a:hover {
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6, p {
  margin-bottom: 0;
  margin-top: 0;
}

::-webkit-scrollbar {
  display: none;
}

img {
  vertical-align: middle;
}

ul, li {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ==================== Utility Classes ==================== */
.d-flex { display: flex; }
.jcsb { justify-content: space-between; }
.aic { align-items: center; }
.jcc { justify-content: center; }
.jcsa { justify-content: space-around; }
.fdc { flex-direction: column; }
.cup { cursor: pointer; }
.ovh { overflow: hidden; }
.fff-color { color: #fff; }
.red-color { color: #bb342e; }
.w100 { width: 100%; }
.tar { text-align: right; }
.fz14 { font-size: 0.875rem; }
.mb16 { margin-bottom: 1rem; }
.tac { text-align: center; }

/* ==================== Layout ==================== */
.layout-header {
  position: fixed;
  width: 100%;
  z-index: 2025;
}

.app-container {
  height: 100vh;
  overflow: auto;
  width: 100vw;
}

/* ==================== PC Header ==================== */
.pc-header {
  background-color: #fff;
  box-shadow: -0.125rem 0 0.375rem 0.125rem #dedbce40;
  height: 4.375rem;
  padding-left: 8.125rem;
  padding-right: 2.5rem;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 2025;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pc-header .logo {
  height: 2.6875rem;
  width: 10rem;
}

.nav-img {
  height: 0.625rem;
  margin-right: 0.625rem;
  width: 0.625rem;
}

.nav-item {
  margin-right: 3.3125rem;
}

.nav-item.active {
  color: #b23b36;
}

.nav-item:last-child {
  margin-right: 0;
}

/* ==================== Mobile Header ==================== */
.m-header {
  display: none;
  background-color: #fff;
  box-shadow: 2px 2px 5px #f6eeee;
  height: 4.32rem;
  padding-top: 0.64rem;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 2025;
}

.m-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.43rem;
}

.m-logo {
  display: block;
  height: 2.54rem;
  width: 9.43rem;
}

.m-button {
  background: #bb342e;
  border-radius: 0.5rem;
  height: 2.93rem;
  width: 2.93rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s;
}

.m-button img {
  width: 1.2rem;
  height: 1.2rem;
}

.m-button.rotate {
  transform: rotate(180deg);
}

/* ==================== Mobile Sidebar ==================== */
.m-sidebar {
  display: none;
  background: #fff;
  height: calc(100dvh - 4.39rem);
  position: absolute;
  right: 0;
  top: 4.32rem;
  width: 16.64rem;
  z-index: 3;
}

.m-sidebar-bg {
  display: none;
  background: #000;
  height: calc(100dvh - 4.39rem);
  opacity: 0.8;
  position: absolute;
  top: 4.32rem;
  width: 100%;
  z-index: 2;
}

.m-sidebar-item {
  border-bottom: 0.125rem solid #e2e3e4;
  border-left: 0.32rem solid #fff;
  font-size: 1.07rem;
  font-weight: 700;
  height: 4.1rem;
  line-height: 4.1rem;
  text-align: center;
  width: 100%;
  cursor: pointer;
}

.m-sidebar-item.active {
  border-left: 0.32rem solid #bb342e;
  color: #bb342e;
}

/* ==================== Main Swiper ==================== */
.main-swiper {
  height: 100vh;
  width: 100%;
}

.main-swiper .swiper-slide {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

/* ==================== Page Global Background ==================== */
.page-globle {
  background: 50%/cover no-repeat url('https://www.jingyougz.com/_nuxt/底图_2x.DrvJJkI-.png');
  height: 100%;
  padding-left: 3.625rem;
  padding-right: 1.875rem;
  width: 100%;
}

/* ==================== Animations ==================== */
@keyframes fadeInLoop {
  0% { opacity: 0; }
  50% { opacity: 1; }
  to { opacity: 0; }
}

@keyframes slideInLeft {
  0% { opacity: 0; transform: translate(-18.75rem); }
  to { opacity: 1; transform: translate(0); }
}

@keyframes slideInRight {
  0% { opacity: 0; transform: translate(18.75rem); }
  to { opacity: 1; transform: translate(0); }
}

@keyframes slideInLeft80 {
  0% { opacity: 0; transform: translate(-5rem); }
  to { opacity: 1; transform: translate(0); }
}

@keyframes slideUp {
  0% { opacity: 0; transform: translateY(3.125rem); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes verticalMove {
  0% { transform: translateY(-0.75rem); }
  50% { transform: translateY(0); }
  to { transform: translateY(-0.75rem); }
}

@keyframes fade {
  0% { opacity: 0; }
  to { opacity: 1; }
}

.swiper-slide-active .slide-in-left {
  animation: slideInLeft 1s ease-out forwards;
}
.swiper-slide-active .slide-in-right {
  animation: slideInRight 1s ease-out forwards;
}
.swiper-slide-active .middle-join-button {
  animation: slideInLeft80 1s ease-out forwards;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s ease;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}

/* ==================== Section 1: Dashboard ==================== */
.pc-dashboard {
  height: 100%;
  padding: 1.5625rem 2.25rem 0;
  width: 100%;
}

.pc-dashboard-container {
  align-items: center;
  background-image: url('https://www.jingyougz.com/image/dashboard/底图@2x.png');
  background-size: 100%;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.company-name {
  animation: slideUp 0.5s ease forwards;
  font-size: 4.375rem;
  font-weight: 700;
  letter-spacing: 0.75rem;
  margin-bottom: 3rem;
  margin-top: 14.5rem;
}

.company-slogan {
  animation: slideUp 1s ease forwards;
  font-size: 0.875rem;
  letter-spacing: 0.75rem;
  position: relative;
}

.go-other {
  left: 50%;
  position: absolute;
  top: 20rem;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mouse {
  border: 0.1875rem solid #807d7d;
  border-radius: 0.6875rem;
  height: 2.1875rem;
  width: 1.25rem;
  position: relative;
}

.point {
  height: 0.125rem;
  margin: 0.625rem auto 0;
  width: 0.125rem;
  background: #fff;
}

.wheel {
  background: #fff;
  animation: verticalMove 3s ease-in-out infinite;
  border-radius: 0.125rem;
  height: 0.5rem;
  left: 0.5rem;
  position: absolute;
  top: 1.25rem;
  width: 0.25rem;
}

@media (min-width: 2560px) {
  .pc-dashboard-container {
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .go-other {
    top: 18.75rem;
  }
}

/* ==================== Section 2: About ==================== */
.pc-about {
  background-image: url('https://www.jingyougz.com/_nuxt/底图_2x.DrvJJkI-.png');
  background-size: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-container {
  width: 80%;
  max-width: 1200px;
}

.big-logo {
  height: 25.5rem;
  margin-right: 8.5rem;
  margin-top: 2.5rem;
  width: 25.625rem;
}

.about-container .title h3 {
  color: #bb342e;
  font-size: 2.125rem;
  margin: 0;
}

.about-container .title span {
  color: #a5a5a5;
  display: block;
  padding-left: 4.75rem;
}

.keyword {
  line-height: 1.875rem;
  margin: 3.125rem 0;
}

.company-introduce {
  color: #333;
  font-size: 0.875rem;
  line-height: 1.8;
}

.company-introduce p:nth-last-child(2) {
  margin: 3.125rem 0;
}

/* Left decoration */
.about-left-content {
  left: 3.625rem;
  position: absolute;
  top: 16.875rem;
  width: 1.1875rem;
  z-index: 10;
}

.about-left-content > img {
  height: 15rem;
}

.left-img {
  color: #343942;
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 0.56rem;
  margin: 0.88rem auto 0;
  text-align: center;
  width: 0.56rem;
  writing-mode: vertical-lr;
}

/* Right decoration */
.right-confine {
  margin-right: 1.875rem;
  position: absolute;
  right: 0;
  top: 0;
}

.right-confine img {
  margin-right: 1rem;
  vertical-align: top;
}

.big-about {
  height: 17.75rem !important;
  width: 2.5rem !important;
}

.red-block {
  height: 5.125rem !important;
  width: 0.625rem !important;
}

/* ==================== Section 3: Develop ==================== */
.develop-container {
  position: relative;
}

.develop-title {
  align-items: flex-end;
  margin-bottom: 3.125rem;
  padding-left: 25rem;
  padding-top: 5.75rem;
  text-align: left;
  width: 100%;
}

.develop-title img {
  vertical-align: bottom;
}

.develop-count {
  height: 3.25rem;
  width: 3.875rem;
}

.develop-course img:first-child {
  height: 1.875rem;
  width: 7.125rem;
}

.develop-course img:last-child {
  height: 0.5rem;
  width: 7.5rem;
}

.toggle-btn {
  margin-bottom: 0.9375rem;
  padding-right: 24rem;
}

.toggle-btn img {
  cursor: pointer;
  height: 2.25rem;
  margin-left: 1.125rem;
  width: 2.375rem;
}

.middle-container {
  height: 30rem;
  padding-top: 3.06rem;
  position: relative;
  width: 74.06rem;
}

.middle-container .line {
  background: #9a9696;
  height: 0.13rem;
  width: 100%;
}

.develop-swiper {
  height: 26.69rem;
  padding-top: 1rem;
  position: absolute;
  top: 0;
  width: 100%;
}

.develop-item {
  height: 26.69rem;
  transition: transform 0.3s ease;
  width: 17.94rem;
}

.develop-item:hover {
  transform: translateY(-1rem);
}

.develop-item:hover .item-line {
  width: 2.13rem !important;
}

.develop-item:hover .item-container {
  box-shadow: 0.1875rem 0.1875rem 0.3125rem #4544444d;
}

.develop-item:hover .item-container .content {
  background-size: 120% !important;
}

.develop-item:hover .item-container .content .overlay {
  opacity: 1 !important;
}

.develop-item .age {
  color: #3e3a3a;
  font-size: 1rem;
  height: 1rem;
  line-height: 1rem;
  margin-left: 1.06rem;
  text-align: center;
  width: 2.8rem;
}

.develop-item .point {
  background: #bb342e;
  border-radius: 0.28rem;
  height: 0.56rem;
  margin-left: 2.06rem;
  margin-top: 0.85rem;
  width: 0.56rem;
}

.develop-item .point-sm {
  background: #db753e;
  border-radius: 0.065rem;
  height: 0.13rem;
  margin-left: 2.275rem;
  margin-top: 0.1rem;
  width: 0.13rem;
}

.item-container {
  background: #fff;
  box-shadow: 0.0625rem 0.0625rem 0.125rem #c9c5c54d;
  height: 21.69rem;
  padding: 2.19rem 1.13rem 0 1.06rem;
  width: 100%;
}

.item-container .year {
  color: #bb342e;
  font-size: 1rem;
  height: 1rem;
  line-height: 1rem;
  text-align: start;
  width: 3.38rem;
}

.item-container .dev-title {
  color: #3e3a3a;
  font-size: 0.88rem;
  font-weight: 700;
  height: 0.88rem;
  letter-spacing: 0.09rem;
  line-height: 0.88rem;
  margin-top: 1.5rem;
  text-align: left;
  width: 100%;
}

.item-line {
  background: #bb342e;
  height: 0.38rem;
  margin-top: 4.81rem;
  transition: width 0.5s ease;
  width: 0;
}

.develop-content {
  height: 11rem;
  margin-top: 0.38rem;
  padding: 2rem 0.81rem 0;
  transition: background-size 1s ease;
  width: 100%;
  position: relative;
}

.overlay {
  align-items: flex-end;
  background-color: #b33d37bf;
  bottom: 0.5rem;
  color: #fff;
  display: flex;
  height: calc(100% - 1rem);
  justify-content: center;
  left: 0.81rem;
  opacity: 0;
  position: absolute;
  transition: opacity 0.3s ease;
  width: calc(100% - 1.94rem);
}

.overlay-text {
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 300;
  letter-spacing: 0.06875rem;
  line-height: 1.125rem;
  margin-bottom: 1.625rem;
  text-align: left;
  width: 13.625rem;
}

/* ==================== Section 4: Product ==================== */
.product-container {
  background: 50%/cover no-repeat url('https://www.jingyougz.com/_nuxt/底图_2x.DrvJJkI-.png');
  height: 100%;
  position: relative;
  width: 100vw;
}

.product-container .left {
  bottom: 4.38rem;
  height: 30.13rem;
  left: 3.63rem;
  position: absolute;
  width: 1.19rem;
  z-index: 10;
}

.product-container .left .left-red {
  background: #bb342e;
  height: 15rem;
  width: 1.19rem;
}

.product-middle {
  margin: 0 auto;
  position: relative;
  height: 100%;
}

.product-swiper {
  width: 100%;
  height: 100%;
}

.product-swiper .swiper-slide {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.product-swiper .swiper-slide-active {
  opacity: 1;
}

.swiper-item-swxmc {
  align-items: center;
  display: flex;
  height: calc(100vh - 70px);
  justify-content: center;
  width: 100%;
  position: relative;
  transition: opacity 0.5s ease-in-out;
}

.swiper-item-container {
  height: 70rem;
  margin: auto;
  position: relative;
  width: 88.75rem;
  max-width: 100%;
}

.middle-02 {
  height: 3.25rem;
  left: 2.25rem;
  position: absolute;
  top: 8.81rem;
  width: 4rem;
  z-index: 10;
}

.middle-02-slash {
  height: 1.31rem;
  left: 5.65rem;
  position: absolute;
  top: 10.68rem;
  width: 1.32rem;
  z-index: 10;
}

.middle-title {
  height: 1.81rem;
  left: 7.37rem;
  position: absolute;
  top: 9.5rem;
  width: 7.13rem;
  z-index: 10;
}

.middle-title-en {
  height: 0.5rem;
  left: 7.37rem;
  position: absolute;
  top: 11.43rem;
  width: 7.81rem;
  z-index: 10;
}

.swiper-underframe {
  height: 11.19rem;
  left: 2.69rem;
  position: absolute;
  top: 14.5rem;
  width: 6.19rem;
  z-index: 5;
}

.swiper-underframe-play {
  height: 9.56rem;
  left: 4.31rem;
  position: absolute;
  top: 15.62rem;
  width: 3rem;
  z-index: 6;
}

.swiper-underframe-text-en {
  color: #443d3d;
  font-size: 0.875rem;
  font-weight: 400;
  left: 4.06rem;
  position: absolute;
  top: 16rem;
  z-index: 7;
  opacity: 0;
  animation: fade 0.5s ease-out forwards;
  animation-delay: 0.6s;
  animation-fill-mode: backwards;
}

.vertical-line {
  background: #000;
  height: 2.06rem;
  left: 8.75rem;
  position: absolute;
  top: 25.81rem;
  width: 0.13rem;
}

.swiper-arrow {
  height: 0.78rem;
  left: 10.94rem;
  position: absolute;
  top: 16.03rem;
  width: 0.89rem;
}

.swiper-title {
  color: #333;
  font-size: 1.88rem;
  font-weight: 700;
  height: 1.81rem;
  left: 10.37rem;
  line-height: 1.81rem;
  position: absolute;
  text-align: left;
  top: 17.81rem;
  width: 15rem;
  z-index: 10;
}

.first-line {
  background: #000;
  height: 0.13rem;
  width: 0.69rem;
  left: 10.62rem;
  position: absolute;
  top: 20.43rem;
}

.title-en {
  color: #6b6b6b;
  font-size: 0.75rem;
  height: 0.63rem;
  left: 10.62rem;
  line-height: 0.63rem;
  position: absolute;
  text-align: left;
  top: 20.87rem;
}

.category {
  background: #bb342e;
  color: #fff;
  font-size: 1.06rem;
  height: 2.06rem;
  left: 10.62rem;
  letter-spacing: 0.08rem;
  line-height: 1.06rem;
  padding: 0.5rem 1.13rem;
  position: absolute;
  text-align: left;
  top: 22.43rem;
  display: inline-block;
}

.second-line {
  background: #000;
  height: 0.13rem;
  width: 0.69rem;
  left: 10.62rem;
  position: absolute;
  top: 25.37rem;
}

.detail-title {
  color: #333;
  font-size: 0.88rem;
  font-weight: 700;
  height: 0.94rem;
  left: 2.62rem;
  line-height: 0.94rem;
  position: absolute;
  text-align: left;
  top: 30.48rem;
  width: 3.63rem;
}

.line-third {
  background: #000;
  height: 0.13rem;
  width: 0.69rem;
  left: 2.62rem;
  position: absolute;
  top: 32.43rem;
}

.detail-text {
  color: #686868;
  font-size: 0.75rem;
  height: 9.5rem;
  left: 2.62rem;
  line-height: 1.25rem;
  position: absolute;
  text-align: left;
  top: 33.12rem;
  width: 25rem;
}

.product-picture {
  position: absolute;
}

/* Product selector */
.selector {
  height: 34.82rem;
  position: absolute;
  right: 23.5rem;
  top: 9.18rem;
  width: 6.44rem;
  z-index: 10;
}

.selector img {
  display: block;
  margin: 0 auto;
  width: 4.44rem;
}

.selector .img-product {
  margin-bottom: 0.7rem;
}

.select-container {
  height: 27.3rem;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.select-item {
  margin-bottom: 0.7rem;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 4.44rem;
  width: 100%;
}

.select-item img {
  width: 4.44rem;
  height: 4.44rem;
  object-fit: contain;
}

.select-item.active {
  position: relative;
}

.select-item.active::before {
  content: '';
  position: absolute;
  top: 0.1rem;
  left: 50%;
  transform: translateX(-50%);
  width: 5rem;
  height: 4.19rem;
  border: 0.15rem solid #bb342e;
  border-radius: 0.5rem;
  z-index: 5;
}

.select-item.active img {
  position: relative;
  z-index: 10;
  top: -0.3rem;
}

.select-active-frame {
  height: 4.19rem;
  width: 4.44rem;
  padding-top: 0.1rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.select-active-frame img:first-child {
  position: absolute;
  top: -0.3rem;
  left: 1.4rem;
  z-index: 100;
  width: 4.44rem;
  height: 4.44rem;
}

.select-bottom {
  bottom: 0;
  left: 1rem;
  position: absolute;
}

/* ==================== Section 5: Employee ==================== */
.employee-container {
  align-items: center;
  background: 50%/cover no-repeat url('https://www.jingyougz.com/_nuxt/底图_2x.DrvJJkI-.png');
  display: flex;
  height: 100%;
  justify-content: center;
  position: relative;
  width: 100vw;
}

.employee-container .left {
  bottom: 4.38rem;
  height: 30.13rem;
  left: 3.63rem;
  position: absolute;
  width: 1.19rem;
}

.employee-container .left .left-red {
  background: #bb342e;
  height: 15rem;
  width: 1.19rem;
}

.employee-middle {
  height: 34.5rem;
  margin: 0 auto;
  position: relative;
  width: 93.87rem;
  max-width: 100%;
}

.middle-swiper-container {
  height: 26.5rem;
  left: 4.94rem;
  position: absolute;
  top: 0;
  width: 43.31rem;
  z-index: 1;
}

.middle-swiper-container img {
  width: 43.31rem;
  max-width: 100%;
}

.employee-swiper {
  width: 100%;
  height: 100%;
}

.employee-swiper .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}

.middle-join-button-icon {
  width: 100%;
}

#employeePrev, #employeeNext {
  cursor: pointer;
  height: 3.25rem;
  width: 2.19rem;
  position: absolute;
  top: 12.56rem;
  z-index: 10;
}

#employeePrev {
  left: -2.82rem;
  background: url('data:image/svg+xml,%3csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2044%2044%22%3e%3cpath%20fill=%22%23bb342e%22%20d=%22M28%2010L18%2022l10%2012%22%20stroke=%22%23bb342e%22%20stroke-width=%222%22%20fill=%22none%22/%3e%3c/svg%3e') no-repeat center;
}

#employeeNext {
  right: -2.82rem;
  background: url('data:image/svg+xml,%3csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2044%2044%22%3e%3cpath%20fill=%22%23bb342e%22%20d=%22M16%2010l10%2012L16%2034%22%20stroke=%22%23bb342e%22%20stroke-width=%222%22%20fill=%22none%22/%3e%3c/svg%3e') no-repeat center;
}

.middle-redMark {
  height: 8.5rem;
  left: 0;
  position: absolute;
  top: 17.31rem;
  width: 53.5rem;
}

.middle-join-button {
  background: #bb342e;
  border-radius: 0.5rem;
  color: #fff;
  font-size: 0.94rem;
  font-weight: 700;
  height: 3.13rem;
  left: 41.13rem;
  letter-spacing: 0.19rem;
  line-height: 3.13rem;
  position: absolute;
  text-align: center;
  top: 27.19rem;
  width: 12.19rem;
  transition: top 0.3s ease;
}

.middle-join-button:hover {
  top: 26.79rem;
}

.middle-03 {
  height: 3.25rem;
  left: 57.5rem;
  position: absolute;
  top: 4.63rem;
  width: 4.31rem;
}

.middle-03-slash {
  height: 1.31rem;
  left: 61.25rem;
  position: absolute;
  top: 6.6rem;
  width: 1.31rem;
}

.middle-title {
  height: 1.81rem;
  left: 63.62rem;
  position: absolute;
  top: 5.51rem;
  width: 7rem;
}

.middle-title-en {
  height: 0.5rem;
  left: 63.62rem;
  position: absolute;
  top: 7.63rem;
  width: 6.38rem;
}

.middle-benefits {
  left: 57.87rem;
  position: absolute;
  top: 10.38rem;
}

.benefit {
  background: rgba(255,255,255,0.9);
  height: 7.5rem;
  margin-bottom: 0.44rem;
  padding: 1.69rem 0 0 3.13rem;
  position: relative;
  transition: transform 0.3s ease;
  width: 36rem;
  border-radius: 0.25rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.benefit:hover {
  transform: translateX(3rem);
}

.benefit:hover .benefit-num {
  transform: scale(1.5);
}

.benefit-title {
  color: #333;
  font-size: 1rem;
  font-weight: 700;
  height: 1.06rem;
  line-height: 1.06rem;
  text-align: left;
}

.benefit-description {
  color: #424242;
  font-size: 0.75rem;
  font-weight: 400;
  height: 0.81rem;
  line-height: 0.81rem;
  margin-top: 1.13rem;
  text-align: left;
}

.benefit-num {
  color: #e5c6c4;
  font-size: 2rem;
  height: 1.5rem;
  left: 32.5rem;
  line-height: 1.5rem;
  position: absolute;
  text-align: center;
  top: 3.25rem;
  transition: transform 0.3s ease;
}

/* ==================== Right Decoration (shared) ==================== */
.right {
  height: 18.38rem;
  position: absolute;
  right: 1.88rem;
  top: 0;
  width: 7.62rem;
  z-index: 10;
}

.right .right-img-our {
  background: #bb342e;
  height: 7.44rem;
  left: 0;
  position: absolute;
  top: 0.62rem;
  width: 0.19rem;
}

.right .right-img-product {
  color: #f3e1e0;
  font-size: 3.25rem;
  font-weight: 700;
  left: 3.56rem;
  line-height: 2.56rem;
  position: absolute;
  text-align: left;
  top: 0.43rem;
  width: 2.56rem;
  writing-mode: vertical-lr;
}

.right .right-img-employee {
  color: #f3e1e0;
  font-size: 3.25rem;
  font-weight: 700;
  height: 17.94rem;
  left: 3.56rem;
  line-height: 2.56rem;
  position: absolute;
  text-align: left;
  top: 0.43rem;
  width: 2.56rem;
  writing-mode: vertical-lr;
}

.right .right-red {
  background: #bb342e;
  height: 5.31rem;
  left: 6.93rem;
  position: absolute;
  top: 0;
  width: 0.69rem;
}

/* ==================== Footer ==================== */
.pc-footer {
  background: #000;
  min-height: 20.6rem;
  padding: 2.25rem 0;
}

.footer-container {
  display: flex;
  margin: 0 auto;
  width: 80.87rem;
  max-width: 90%;
}

.footer-logo {
  height: 14.75rem;
  margin-right: 5.88rem;
  width: 20rem;
}

.footer-right {
  color: #fff;
  padding-top: 0;
}

.footer-top {
  color: #fff;
  display: flex;
  font-size: 0.88rem;
  font-weight: 300;
  height: 0.88rem;
  line-height: 1.31rem;
  text-align: left;
  width: 18.12rem;
}

.footer-line {
  background: #fff;
  height: 1rem;
  margin: 0.1rem 0.5rem;
  width: 0.125rem;
}

.footer-text {
  color: #aaa;
  font-size: 0.88rem;
  font-weight: 300;
  line-height: 1.31rem;
  margin-top: 2.25rem;
  text-align: left;
}

.footer-text p {
  margin-bottom: 0.41rem;
}

/* ==================== Responsive ==================== */
@media screen and (max-width: 768px) {
  .pc-header {
    display: none;
  }
  .m-header {
    display: block;
  }

  body {
    overflow: auto;
  }

  .app-container {
    height: auto;
    overflow: visible;
    padding-top: 4.375rem;
  }

  .main-swiper {
    height: auto;
  }

  .main-swiper .swiper-slide {
    height: auto;
    min-height: 100vh;
  }

  .company-name {
    font-size: 2.5rem;
    margin-top: 8rem;
  }

  .about-container {
    flex-direction: column;
    width: 90%;
  }

  .big-logo {
    height: 12rem;
    width: 12rem;
    margin-right: 0;
    margin-top: 1rem;
  }

  .about-left-content,
  .right-confine,
  .right,
  .product-container .left,
  .employee-container .left {
    display: none;
  }

  .develop-title {
    padding-left: 1rem;
    padding-top: 2rem;
  }

  .middle-container {
    width: 100%;
    overflow-x: auto;
  }

  .product-middle {
    height: auto;
  }

  .swiper-item-container {
    width: 100%;
  }

  .selector {
    position: relative;
    right: auto;
    top: auto;
    margin: 1rem auto;
  }

  .employee-middle {
    width: 100%;
  }

  .middle-swiper-container {
    width: 90%;
    left: 5%;
  }

  .middle-benefits {
    left: 1rem;
    top: 28rem;
    width: 90%;
  }

  .benefit {
    width: 100%;
  }

  .pc-footer {
    padding: 2rem 1rem;
  }

  .footer-container {
    flex-direction: column;
    width: 100%;
  }

  .footer-logo {
    height: 8rem;
    width: 10rem;
    margin-right: 0;
    margin-bottom: 1rem;
  }
}

/* ==================== Fade Init ==================== */
@keyframes fadeInitIn {
  0% { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInitOut {
  0% { opacity: 1; }
  to { opacity: 0; }
}

.fade-init-enter-active {
  animation: fadeInitIn 1s ease;
}
.fade-init-leave-active {
  animation: fadeInitOut 1s ease;
}

#appContainer {
  opacity: 1;
  transition: opacity 1s ease;
}

#appContainer.loading {
  opacity: 0;
}

/* ==================== Swiper Override ==================== */
.swiper {
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  padding: 0;
  position: relative;
  z-index: 1;
}

.swiper-wrapper {
  box-sizing: content-box;
  display: flex;
  height: 100%;
  position: relative;
  transition-property: transform;
  width: 100%;
  z-index: 1;
}

.swiper-slide {
  flex-shrink: 0;
  height: 100%;
  position: relative;
  transition-property: transform;
  width: 100%;
}

.no-scroll::-webkit-scrollbar {
  display: none;
}
.no-scroll {
  -ms-overflow-style: none;
  scrollbar-width: none;
}