* {
   color: #fff;
   text-decoration: none;
}
.npcHome {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%) scale(0.7);
   width: 300vw;
   height: 150vh;
   min-height: 800px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   cursor: default;
   overflow: hidden;

   background-image: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.1) 30%,
      rgba(0, 0, 0, 0.55) 70%,
      rgba(0, 0, 0, 0.8)
   );
}

.npcHome-box {
   position: absolute;
   top: 65%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 100%;
   height: 650px;
   display: flex;
   justify-content: center;
   overflow: hidden;
}

/*.container {*/
/*   position: absolute;*/
/*   top: 20%;*/
/*   left: 50%;*/
/*   transform: translate(-50%, -50%);*/
/*   width: 650px;*/
/*   height: 200px;*/
/*   color: #fff;*/
/*   font-size: 10em;*/
/*   display: flex;*/
/*   justify-content: center;*/
/*   background: linear-gradient(to right, #ffffff, #38c1ff, #ffffff);*/
/*   -webkit-background-clip: text;*/
/*   color: transparent;*/
/*   background-size: 300% 100%;*/
/*}*/

.info {
   position: absolute;
   top: 45%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 100%;
   height: 100px;
   font-size: 37px;
   font-weight: 700;
   display: flex;
   align-items: center;
   justify-content: center;
   text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.download {
   position: absolute;
   top: 60%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 500px;
   height: 100px;
   font-size: 37px;
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.download div {
   width: 235px;
   height: 90px;
   border-radius: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   background-color: #222;
   box-shadow: 0 5px 15px rgb(0 0 0 / 35%);
   transition: all 0.2s ease-in-out;
}

.download div:hover {
   transform: scale(1.1);
}

.GetInto {
   position: absolute;
   top: 80%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 500px;
   height: 90px;
   font-size: 37px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 37px;
   font-size: 28px;
   cursor: pointer;
   box-shadow: 0 5px 15px rgb(0 0 0 / 35%);
   background: linear-gradient(45deg, #345bac, #4069bf);
   transition: all 0.2s ease-in-out;
}

.GetInto:hover {
   background: linear-gradient(45deg, #345baccc, #4069bfb8);
}

.ljf_body {
   position: relative;
   overflow: hidden;
}

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

section {
   position: relative;
   width: 100vw;
   height: 100vh;
   overflow: hidden;
   display: flex;
   justify-content: center;
   align-items: center;
   transform: 0.3s;
}

.ljf_box {
   position: absolute;
   width: 100vw;
   height: 100vh;
   overflow: hidden;
   display: flex;
   justify-content: center;
   align-items: center;
}

.ljf_img1 {
   position: absolute;
   top: -4vh;
   left: -4vw;
   width: 106vw;
   height: 110vh;
   object-fit: cover;
   transform: 0.3s;
}

.ljf_img2 {
   position: absolute;
   width: 400px;
   height: 400px;
   text-align: center;
   display: table-cell;
   vertical-align: middle;
   transform: 0.3s;

   opacity: 1;
   animation: myRotate 30s linear infinite;
   transform: scale(0.5);
}

.ljf_img3 {
   position: absolute;
   width: 680px;
   height: 680px;
   text-align: center;
   display: table-cell;
   vertical-align: middle;
   transform: 0.3s scale(0.2);
   opacity: 1;
   animation: myRotate2 40s linear infinite;
}

.ljf_img4 {
   position: absolute;
   top: -4vh;
   left: -2vw;
   width: 106vw;
   height: 110vh;
   object-fit: cover;
   transform: 0.3s;

   text-align: center;
   display: table-cell;
   vertical-align: middle;
   opacity: 1;
   transform: 0.3s;
}

.ljf_img6 {
   position: absolute;
   top: 2vh;
   left: -5vw;
   width: 108vw;
   height: 110vh;
   object-fit: cover;
   transform: 0.3s;
}

.ljf_img5 {
   position: absolute;
   top: 0vh;
   left: -2vw;
   width: 106vw;
   height: 104vh;
   object-fit: cover;
   transform: 0.3s;
}

.ljf_img7 {
   position: absolute;
   top: 0vh;
   left: 0vw;
   width: 104vw;
   height: 106vh;
   object-fit: cover;
   transform: 0.3s;
}

@keyframes myRotate {
   0% {
      -webkit-transform: rotate(0deg);
   }

   50% {
      -webkit-transform: rotate(180deg);
   }

   100% {
      -webkit-transform: rotate(360deg);
   }
}

@keyframes myRotate2 {
   0% {
      -webkit-transform: rotate(360deg);
   }

   50% {
      -webkit-transform: rotate(180deg);
   }

   100% {
      -webkit-transform: rotate(0deg);
   }
}