@charset "utf-8";

@font-face {
  font-family: hyjh;
  src: url(../fonts/qh55.ttf) format("truetype");

}

@font-face {
  font-family: CadillacGothic;
  src: url(../fonts/CadillacGothic-Regular.woff) format("woff");
  font-style: normal;
  font-weight: 400;
}

* {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  position: relative;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
  text-size-adjust: none;
  font-family: 'hyjh', sans-serif;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  outline: 0;
  background-color: #fff;
}

a {
  display: block;
  transform: translate3d(0,0,0);
}

a.hover {
  filter: opacity(.8);
}

img {
  -webkit-user-select: none;
  -moz-user-select: none;
    -ms-user-select: none;
        user-select: none;
}

a img {
  width: 100%;
}

::-webkit-input-placeholder {
  color: #4d4d4d; 
} 

.swiper-container {
  transform: translate3d(0, 0, 0);
}

.swiper-wrapper {
  transform: translate3d(0, 0, 0);
}

.swiper-slide {
  overflow: hidden;
  backface-visibility: hidden;
  position: relative;
  will-change: transform;
}

.swiper-slide img {
  backface-visibility: hidden;
}

#swiper_content {
  position: absolute;
  top: 60px;
  left: 0;
  height: calc(100vh - 60px);
  width: 100vw;
}

#swiper-scrollbar {
  position: absolute;
  right: 0;
  top: 0;
  width: 10px;
  height: 100vh;
  background-color:rgba(0, 0, 0, .3);
  z-index: 100;
}

/* #preload {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100;
  background-color: #fff;
}

.preload_wrapper {
  position: absolute;
  width: 750px;
  height: 1448px;
  top: 50%;
  left: 0;
  margin-top: -810px;
}
 */

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

::-webkit-scrollbar-track {
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgba(66, 66, 66, .6);
}

.headerBox {
  position: fixed;
  /* position: fixed; */
  /* top: 0; */
  /* left: 0; */
  width: 100vw;
  height: 90px;
  background-color: white;
  z-index: 10;
}

.logo {
  width: 178px;
  top: 30px;
  left: 41px;
  position: absolute;
}

.logo img {
  width: 100%
}

.home_btn {
  width: 55px;
  top: 35px;
  right: 94px;
  position: absolute;
}

.home_btn img {
  width: 100%;
}

.bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
}

.wrapper {
  position: absolute;
  top: 50%;
  left: 0;
  width: 1920px;
  height: 1080px;
  transform-origin: center left;
  margin-top: -510px;
}

.wrapper.big_wrapper {
  transform-origin: bottom left;
  margin-top: 0;
  top: unset;
  bottom: 0;
}

.wrapper-bottom {
  /* top: unset; */
  /* bottom: 0; */
}

.wrapper-center {
  top: 50%;
  transform: translateY(-50%);
}

.page1_title {
  position: absolute;
  left: 683px;
  top: 170px;
  width: 546px;
}

.page1_dialog1 {
  position: absolute;
  left: 522px;
  top: 816px;
  width: 468px;
}

.page1_dialog2 {
  position: absolute;
  left: 1389px;
  top: 547px;
  width: 468px;
}

.page1_dialog3 {
  position: absolute;
  left: 1288px;
  top: 668px;
  width: 579px;
}

.page1_wave {
  position: absolute;
  left: 510px;
  top: 379px;
  width: 430px;
  height: 611px;
}

.page1_wave img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.page1_txt {
  position: absolute;
  left: 522px;
  top: 562px;
  width: 677px;
}

.page2_txt1 {
  position: absolute;
  left: 588px;
  top: 203px;
  width: 744px;
}

.page2_txt2 {
  position: absolute;
  left: 660px;
  top: 307px;
  width: 600px;
}

.page3_txt1 {
  position: absolute;
  left: 622px;
  top: 156px;
  width: 676px;
}

.page3_txt2 {
  position: absolute;
  left: 727px;
  top: 249px;
  width: 465px;
}

.page3_wave {
  position: absolute;
  left: 449px;
  top: 328px;
  width: 1074px;
  height: 149px;
}

.page3_wave img {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}

.page4_txt {
  position: absolute;
  left: 697px;
  top: 197px;
  width: 514px;
}

.page4_dialog1 {
  position: absolute;
  left: 493px;
  top: 564px;
  width: 338px;
}

.page4_dialog2 {
  position: absolute;
  left: 1115px;
  top: 631px;
  width: 339px;
}

.page4_dialog3 {
  position: absolute;
  left: 599px;
  top: 684px;
  width: 338px;
}

.page4_dialog4 {
  position: absolute;
  left: 996px;
  top: 753px;
  width: 338px;
}

.page4_name {
  position: absolute;
  left: 898px;
  top: 184px;
  width: 320px;
}

.page4_name h6 {
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  font-size: 64px;
  width: 100%;
}

.page5_title {
  position: absolute;
  left: 594px;
  top: 154px;
  width: 732px;
}

.page5_dialog1 {
  position: absolute;
  left: 453px;
  top: 342px;
  width: 494px;
  height: 137px;
}

.page5_dialog2 {
  position: absolute;
  left: 965px;
  top: 393px;
  width: 479px;
  height: 137px;
}

.page5_dialog3 {
  position: absolute;
  left: 706px;
  top: 631px;
  width: 494px;
  height: 137px;
}

.page5_content {
  transform: scale3d(.9, .9, 1);
}

.page5_avatar {
  position: absolute;
  width: 137px;
  height: 137px;
  top: 0;
  display: block;
  z-index: 1;
}

.page5_dialog1 .page5_avatar,
.page5_dialog3 .page5_avatar {
  left: 0;
}

.page5_dialog2 .page5_avatar {
  right: 0;
}

.page5_dialog div {
  position:absolute;
  border: 1px solid black;
  overflow: hidden;
  width: 463px;
  height: 102px;
  border-radius: 51px;
  background-color: rgb(255, 255, 255);
  top: 16px;
}

.page5_dialog1 div,
.page5_dialog3 div {
  left: 16px;
}

.page5_dialog2 div {
  right: 16px;
}

.page5_dialog div img {
  position:absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: auto;
  filter: grayscale(1);
}

.page5_dialog div img.page5_wave2 {
  left: unset;
  right: 0;
}

#page5_btn1 {
  position: absolute;
  left: 830px;
  top: 549px;
  width: 276px;
  height: 78px;
  z-index:5;
}

#page5_btn1 img:first-child {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

#page5_btn1 img:last-child {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
}

#page5_btn2 {
  position: absolute;
  left: 830px;
  top: 809px;
  width: 276px;
  height: 78px;
}

#page5_btn2 img:first-child {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

#page5_btn2 img:last-child {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
}

.page6_title {
  position: absolute;
  left: 488px;
  top: 143px;
  width: 945px;
}

.page6_dot1 {
  position: absolute;
  left: 908px;
  top: 544px;
  width: 40px;
  z-index: 1;
}

.page6_dot2 {
  position: absolute;
  left: 974px;
  top: 544px;
  width: 39px;
  z-index: 1;
}

.page6_wave1 {
  position: absolute;
  transform: rotate(-27deg) skewX(-10deg);
  overflow: hidden;
  transform-origin: right top;
  width: 1300px;
  height: 1300px;
  top: 560px;
  left: -370px;
}

.page6_wave1 div {
  position:absolute;
  right: 0;
  top: 0;
  transform: translate3d(50%, -50%, 0);
  width: 100%;
  height: 100%;
}

.page6_wave1 div::after {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  border-radius: 100%;
  background: radial-gradient(farthest-corner at center center, rgba(255, 0, 5, 0.24) 0%, rgba(255, 0, 5, 0.24) 70%,rgba(255, 0, 5, 0) 100%);
  transform: scale3d(0,0,1);
}

.page6_wave2 {
  position: absolute;
  transform: rotate(27deg) skewX(10deg);
  transform-origin: left top;
  overflow: hidden;
  transform-origin: left top;
  width: 1300px;
  height: 1300px;
  top: 560px;
  left: 990px;
}

.page6_wave2 div {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate3d(-50%, -50%, 0);
  width: 100%;
  height: 100%;
}

.page6_wave2 div::after {
  width: 100%;
  height: 100%;
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  border-radius: 100%;
  background: radial-gradient(farthest-corner at center center, rgba(215, 215, 215, 0.24) 0%,rgba(215, 215, 215,0.24) 70%, rgba(215, 215, 215, 0) 100%);
  transform: scale3d(0,0,1);
}

.page6_name h6 {
  position: absolute;
  z-index: 3;
  font-size: 24px;
  /* font-weight: bolder; */
  color: white;

}

.page6_name h6:first-child {
  top: 700px;
  left: 800px;
}

.page6_name h6:last-child {
  top: 740px;
  left: 870px;
}

.page7_title {
  position: absolute;
  left: 560px;
  top: 184px;
  width: 800px;
}

.page7_dialog1 {
  opacity: 0;
}

.page7_dialog11 {
  position: absolute;
  left: 158px;
  top: 408px;
  width: 544px;
}

.page7_dialog12 {
  position: absolute;
  left: 281px;
  top: 672px;
  width: 636px;
}

.page7_dialog2 {
  opacity: 0;
}

.page7_dialog21 {
  position: absolute;
  left: 179px;
  top: 377px;
  width: 265px;
}

.page7_dialog22 {
  position: absolute;
  left: 291px;
  top: 678px;
  width: 552px;
}

.page7_dialog3 {
  opacity: 0;
}

.page7_dialog31 {
  position: absolute;
  left: 228px;
  top: 405px;
  width: 254px;
}

.page7_dialog32 {
  position: absolute;
  left: 375px;
  top: 646px;
  width: 449px;
}

.page7_pic1 {
  position: absolute;
  left: 929px;
  top: 378px;
  width: 829px;
}

.page7_pic2 {
  position: absolute;
  left: 945px;
  top: 392px;
  width: 833px;
}

.page7_pic3 {
  position: absolute;
  left: 929px;
  top: 412px;
  width: 830px;
}

.page7_pic4 {
  position: absolute;
  left: 951px;
  top: 439px;
  width: 832px;
}

/* .page7_gif {
  position: absolute;
  width: 1920px;
  left: 0;
  top: 405px;
} */

.page7_gif {
  position: absolute;
  width: 1700px;
  left: 110px;
  top: 405px;
}

.page8_title {
  position: absolute;
  left: 626px;
  top: 170px;
  width: 668px;
}

.page8_logo {
  transform: scale3d(.88, .88, 1);
}

.page8_logo1 {
  position: absolute;
  left: 807px;
  top: 482px;
  width: 321px;
  z-index: 10;
}

.page8_logo2 {
  position: absolute;
  left: 461px;
  top: 285px;
  width: 294px;
  z-index: 9;
}

.page8_logo3 {
  position: absolute;
  left: 688px;
  top: 620px;
  width: 290px;
  z-index: 8;
}

.page8_logo4 {
  position: absolute;
  left: 590px;
  top: 437px;
  width: 285px;
  z-index: 7;
}

.page8_logo5 {
  position: absolute;
  left: 944px;
  top: 598px;
  width: 286px;
  z-index: 5;
}

.page8_logo6 {
  position: absolute;
  left: 738px;
  top: 372px;
  width: 286px;
  z-index: 4;
}

.page8_logo7 {
  position: absolute;
  left: 1007px;
  top: 374px;
  width: 287px;
  z-index: 3;
}

.page8_logo8 {
  position: absolute;
  left: 1078px;
  top: 481px;
  width: 286px;
  z-index: 2;
}

.page8_logo9 {
  position: absolute;
  left: 1184px;
  top: 294px;
  width: 291px;
  z-index: 1;
}

.page8_logo10 {
  position: absolute;
  left: 807px;
  top: 747px;
  width: 309px;
  z-index: 6;
}

.page9_title {
  position: absolute;
  left: 598px;
  top: 183px;
  width: 725px;
}

.page9_dot {
  position: absolute;
  left: 944px;
  top: 637px;
  width: 130px;
  height: 130px;
}

.page9_icon {
  position: absolute;
  width: 58px;
  bottom: 0;
  left: 0;
  z-index: 1;
}

.page9_wifi {
  position: absolute;
  right: 0;
  top: 0;
  width: 90px;
  height: 89px;
}

.page9_wifi img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.page10_title {
  position: absolute;
  left: 637px;
  top: 163px;
  width: 646px;
}

.page10_txt {
  position: absolute;
  left: 590px;
  top: 354px;
  width: 714px;
}

.page11_title {
  position: absolute;
  left: 635px;
  top: 229px;
  width: 650px;
}

.page11_txt1 {
  position: absolute;
  left: 732px;
  top: 484px;
  width: 457px;
}

.page11_txt2 {
  position: absolute;
  left: 764px;
  top: 708px;
  width: 393px;
}

.subMenu {
  min-width: 1200px;
  width: 100vw;
  height: 60px;
  background-color: #4b4b4b;
  z-index: 200;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.subMenu .title {
  padding-left: 48px;
  flex-shrink: 0;
  color: white;
  /* font-weight: bold; */
  font-family: CadillacGothic;
}

.subMenu ul {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
} 

.subMenu ul a {
  margin: 0 12px;
  font-size: 16px;
  cursor: pointer;
  text-decoration: none;
  color: white;
}

.subMenu ul a.sp {
  border-bottom: 1px solid currentColor;
  /* text-decoration: underline!important; */
}

.subMenu ul a:hover {
  border-bottom: 1px solid currentColor;
}

.arrow {
  position: absolute;
  left: 48.62vw;
  bottom: .5vw;
  width: 2.760416vw;
  pointer-events: none;
}