html, body {height: 100%;width: 100%;}
body.hidden {overflow: hidden;}
* {margin: 0;padding: 0;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;	box-sizing: border-box;}





img { border:none;width:100%}
li { list-style:none;}
a {text-decoration:none;color:#38386e}
a:hover {opacity:0.7;filter:alpha(opacity=70);}
body,html {
  width:100%;
  height:100%;
  overflow: hidden;
}
.wrap {position:absolute;left:0;top:0;bottom:0;right:0;}
.videobox {overflow: hidden;position: absolute;left:0;margin-left:50%;bottom:0;transform: translateX(-50%);}
.mask {position: absolute;left:0;top:0;right:0;bottom:0;z-index: 9;}
video {height: 100%;}
.pos-mid-center {
  position: fixed;
  left:50%;
  top:50vh;
  transform: translate(-50%, -50%);
}

.txt-red {color: red!important;}

.h8 {
  height:8px;
  line-height: 0!important;
}

.h16 {
  height:16px;
  line-height: 0!important;
}

.h24 {
  height:24px;
  line-height: 0!important;
}

.h36 {
  height:36px;
  line-height: 0!important;
}

:root {
  /* --scrollbar-color-thumb:red;
  --scrollbar-color-track:red;
  --scrollbar-color-track:red;
  --scrollbar-width-legacy:3px; */
}

@supports (scrollbar-width: auto) {
  .scroller {
      scrollbar-color: var(--scrollbar-color-thumb) var(--scrollbar-color-track);
      scrollbar-width: var(--scrollbar-width);
  }
}

/* Legacy browsers with `::-webkit-scrollbar-*` support */
@supports selector(::-webkit-scrollbar) {
  .scroller::-webkit-scrollbar-thumb {
      background: var(--scrollbar-color-thumb);
  }
  .scroller::-webkit-scrollbar-track {
      background: var(--scrollbar-color-track);
  }
  .scroller::-webkit-scrollbar {
      max-width: var(--scrollbar-width-legacy);
      max-height: var(--scrollbar-width-legacy);
  }
}

@keyframes ani-top
{
    from {transform: translateY(20px)}
    to {transform: translateY(0)}
}

table, th, td{
  border: 1px solid #38386e;
  border-collapse: collapse;
  margin:0 auto;
  line-height:30px;
  font-size: 15px;
  text-align: center;
}
th {
  background-color: #38386e;
  color: #fff;
}

td,th {padding:3px;}

body {
  background-color:#23272a;
}


/*one*/
.logo {width:170px}
.logo img{width:100%;}
.step-item .background, .step-item .mask, .step-item .main{
  position: absolute;
}
.step-item, .step-item .background, .step-item .mask, .step-item .main{
  left:0;top:0;right:0;
} 
.step-item .background {
  z-index: 1;
}
.step-item .main {
  z-index: 2;
}
.step-item .mask {
  z-index: 3;
  display: none;
}

.step-item .background video {
  
  margin-left:50%;
  transform: translateX(-50%);
}

.step-one .header .menu {
  float:right;

}

.step-one .cont {
  position: absolute;
  top:400px;
  left:50%;
  transform: translateX(-50%);
  margin-left: 150px;

}
.step-one .cont .btn {
  width:204px;
  height:184px;
  cursor: pointer;
}
.step-one .cont .txt {margin-left:4px;position: absolute;left:50%;transform: translateX(-50%);}
.step-one .cont .txt img {width:200px}

.step-one .cont .btn img:nth-child(2){
  position: absolute;
  top:-24px;left:-0;
  animation: step-one-btn 1s infinite;
}

.step-one .cont .btn img {width: 100%;}

.step-one .background {background: url('../images/max_bg1.jpg') left top no-repeat;}

.ani-delay-h1{
  animation-delay: .2s!important;
}
.ani-delay-1{
  animation-delay: .5s!important;
}
.ani-delay-h1-2{
  animation-delay: .8s!important;
}
.ani-delay-2{
  animation-delay: 1.1!important;
}
.ani-delay-h2-3{
  animation-delay: 1.2s!important;
}
.ani-delay-3{
  animation-delay: 1.7s!important;
}
.ani-delay-h3-4{
  animation-delay: 2.1s!important;
}
.ani-delay-4{
  animation-delay: 2.4s!important;
}

@keyframes step-one-btn
{
    from {transform: scale(0.2);opacity: 1;transform-origin: center;}
    to {transform: scale(0.8);opacity: 0;transform-origin: center;}
    
}
/*one*/

/* two */
.step-two .main {
  bottom:0;
  width:1200px;

  margin: 0 auto;
}

.step-two .slider {
   position: absolute;
   right:35px;
   top:50vh;
   transform: translateY(-50%);
   z-index: 9;

}

.step-two .slider:before {
  content: '';
  display: block;
  position: absolute;
  width:62px;
  height:88px;
  top:-88px;
  left:-10px;
  background: url('../images-new/top.png') center center no-repeat;

}

.step-two .slider:after {
  content: '';
  display: block;
  position: absolute;
  width:20px;
  height:65px;
  bottom:-60px;
  left:11px;
  background: url('../images-new/bottom.png') center center no-repeat;

}
.step-two .slider span {
  display: block;
  width:54px;
  height:85px;
  cursor: pointer;
  margin-bottom:6px;
}
.step-two .slider span img {display: none;}

.step-two .slider span:nth-child(1){
  background: url('../images-new/tab1_off.png') center top no-repeat;
}
.step-two .slider span:nth-child(1):hover,.step-two .slider span:nth-child(1).active{
  background: url('../images-new/tab1_on.png') center top no-repeat;
}
.step-two .slider span:nth-child(2){
  background: url('../images-new/tab2_off.png') center top no-repeat;
}
.step-two .slider span:nth-child(2):hover,.step-two .slider span:nth-child(2).active{
  background: url('../images-new/tab2_on.png') center top no-repeat;
}
.step-two .slider span:nth-child(3){
  background: url('../images-new/tab3_off.png') center top no-repeat;
}
.step-two .slider span:nth-child(3):hover,.step-two .slider span:nth-child(3).active{
  background: url('../images-new/tab3_on.png') center top no-repeat;
}
.step-two .slider span:nth-child(4){
  background: url('../images-new/tab4_off.png') center top no-repeat;
}
.step-two .slider span:nth-child(4):hover,.step-two .slider span:nth-child(4).active{
  background: url('../images-new/tab4_on.png') center top no-repeat;
}
.step-two .slider span:nth-child(5){
  background: url('../images-new/tab5_off.png') center top no-repeat;
}
.step-two .slider span:nth-child(5):hover,.step-two .slider span:nth-child(5).active{
  background: url('../images-new/tab5_on.png') center top no-repeat;
}

.cont-1 {
  display: flex;
  min-width: 1250px;
  flex-wrap: wrap;
  height:650px;
}

.step-two .main .body .box {
  width:522px;
  text-align: center;
  margin-right:99px;
  margin-bottom:55px;
  cursor: pointer;
}

.step-two .main .body .swiper-slide{display: none;width: auto;height: auto;}
.step-two .main .body .swiper-slide.active {
   display: flex;
}


.step-two .main .body .swiper-slide.active .box ,.step-two .main .body .swiper-slide.active .menu-box .menu-box-header, .step-two .swiper-slide.active .menu-box .menu-box-body{
  transform: translateY(20px);
  animation: ani-top 1s forwards;
  animation-fill-mode: forwards;
  
}


.step-two .main .body .swiper-slide .img-box {
  position: absolute;
  left:50%;
  top:50%;
  transform: translate(-70%, -58%);
}
.step-two .main .body .box .img-btn {display: inline-block;margin-top:-70px;cursor: pointer;}

.menu-box .menu-box-header {
  text-align: center;
}

.menu-box .menu-box-header span{
  display: inline-block;
  width: 194px;
  height:54px;
  cursor: pointer;
  overflow: hidden;
}

/* 弹框 start */
.dialog {
  
  margin: 0 auto;
  overflow: hidden;
  position: fixed;
  width:100%;
  height:100%;
  z-index:99;
  display: none;
}

.dialgo-full-bg {z-index:0;position: absolute;width:100%;height:100%;background-color: rgba(0, 0, 0, 0.5);}

.dialog.active {
   display: block;
}

.dialog .dialog-tit {
  text-align: center;
}

.dialog .dialog-tit img {width:auto}



.dialog .dialog-main {
  background: url('../images-new/box.png') center center no-repeat;
  width:1000px;
  height:750px;
  position: absolute;
  left:50%;
  top:50vh;
  transform: translate(-50%, -50%);
  overflow:hidden;
 
}

.dialog .bg-top{
  position: absolute;
  left:0;top:0;
}
.dialog .bg-btm{
  position: absolute;
  right:0;bottom:0;
}
.dialog .close-btn{
  position: absolute;
  width:45px;height:45px;
  background: url('../images/close.png') center center no-repeat;
  cursor: pointer;
  right:-0;
  top:0;
}

.dialog .dialog-main .dialog-tit {margin-top: 50px;}

.dialog .dialog-main .dialog-text, .menu-box-body-txt {
  
  color:#35374c;
  line-height: 1.5;
  font-size: 16px;
  /* text-indent: 2em; */
}

.dialog .dialog-main .dialog-text{
  margin: 0.6rem 1rem;
  position: absolute;
  /* left:1rem; */
  top:1.5rem;
  bottom:0.6rem;
  overflow-y: auto;
  white-space: normal; /* 保留空白符序列，但是正常换行。*/
  word-break: break-all; 

}

.dialog .dialog-main .dialog-text p {margin-bottom: 24px;}



.dialog .dialog-main .dialog-text img, .menu-box-body-txt img {
  
  display: block;
  margin: 0 auto;
  width:auto;
  max-width: 100%;

}

/* 弹框 end */

.menu-box .menu-box-body {
  background: url('../images-new/box.png') center center no-repeat;
  width:1000px;
  height:750px;
  margin: 0 auto;
 
}
.menu-box .menu-box-body .bg-top{
  position: absolute;
  left:-100px;top:0;
}
.menu-box .menu-box-body .bg-btm{
  position: absolute;
  right:-180px;bottom:0;
}
.menu-box-body-list {
  position: relative;
}
.menu-box-body-list-item {
  margin:80px;
  position: absolute;
  left:80px;top:135px;right:80px;bottom:20px;
  margin-top: 0;
  overflow-y: auto;
  display:none;
}
.menu-box-body-list-item.active {
  display: block;;
}

.menu-box-body-txt {
  position: relative;
  z-index: 2;
}

.menu-box-body-txt img {width: auto;}

.menu-box-body-txt p {margin-bottom: 16px;}

.menu-box-body-tit {
  text-align: center;
  margin-bottom:24px;
  display: none;
  margin-left:80px;
  margin-right: 80px;
  padding-top: 40px;
}
.menu-box-body-tit:first {display: block;}
.menu-box-body-tit img {width: auto;}

.menu-box .menu-box-header span img:nth-child(2){
  display: none;
}

.menu-box .menu-box-header span:hover img:nth-child(1),.menu-box .menu-box-header span.active  img:nth-child(1){
  display: none;
}

.menu-box .menu-box-header span:hover img:nth-child(2),.menu-box .menu-box-header span.active  img:nth-child(2){
  display: block;
}

/* two */

.show-in-pc {display: block!important;}
.show-in-mobile{display: none!important;}

@media screen and (min-width: 768px) {

  .step-one .background video {display: block;}
  .step-one .background img {display: none;}
   

}	


@media screen and (max-width: 768px) {


  body, html {overflow-y: auto;}

  .step-one .background {background: none;}
  .step-one .background video {display: none;}
  .step-one .background img {display: block;position: fixed;width:100%;}
  .step-one .cont {margin-left: 100px;}

  .step-two .slider {
    position: fixed;
    bottom:10px;
    top: auto;
    left:0;right:0;
    text-align: center;

  }


  .step-two .slider span {display: inline-block;width:70px;height:auto;top:auto;background-size:cover!important;background: none!important;}
  .step-two .slider span img {width:100%}
  .step-two .slider span img:nth-child(1){
    display: block;
  }
  .step-two .slider span:hover img:nth-child(1),.step-two .slider span.active img:nth-child(1){
    display: none;
  }
  .step-two .slider span:hover img:nth-child(2),.step-two .slider span.active img:nth-child(2){
    display: block;
  }

  


  .step-two .main .body .box {width:100%;margin-right: 0;margin-bottom:0px;}

  .step-two .main .img-box,   .step-two .main .img-btn {display: none!important;}

  .step-item .main {position: relative;}

  .swiper-slide.pos-mid-center {
    position: relative;
    left:auto;
    top:auto;
    transform: translate(-0%, -0%);
  }
  .cont-1 {min-width: 100%;}

  .dialog .dialog-main {width:88%;}
  .menu-box .menu-box-header span {width:30%;height:auto;overflow: hidden;}
  .menu-box .menu-box-body {width: 90%;min-height: 600px;height:auto}
  .step-two .main .body .swiper-slide {width:100%}
  .step-two .main .body .swiper-slide.active {display: block;}
  .menu-box-body-list-item {margin: .8rem;left:.8rem;top:3.5rem;right:.8rem;bottom:3rem;}

  .step-one .cont .btn {
    width: 150px;
    height:auto;
  }


  .step-two .background video {
    display: none!important;
  }
  .step-two .background img {display: block!important;}

  .menu-box .menu-box-body .bg-top,  .menu-box .menu-box-body .bg-btm {display: none;}

  .menu-box .menu-box-body .min-bg-top {
    display: block!important;
    position: absolute;
    left:0;right:0;bottom:0;
  }

  .step-one .cont .btn img:nth-child(2){
    left:5px;
    top:-17px;
  }

  .dialog .dialog-main .dialog-text {top:5.5rem}
  .dialog .dialog-tit img {
    width: 100%;
  }

  .step-two .main {width:100%}
  .step-two .slider:before, .step-two .slider:after {display: none;}
  .menu-box-body-tit {margin-left: 0;margin-right: 0;}
  .menu-box-body-tit img {width:100%;}

  .step-one .cont .txt img {width: 175px !important;}
  .show-in-pc{display: none!important;}
  .show-in-mobile{display: block!important;}
}