::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }
  body,html{
      margin:0px;
      padding:0px;
      -ms-overflow-style: none; /* IE 10+ */
      scrollbar-width: none; /* Firefox */
  }
  html,body{
      -webkit-tap-highlight-color:transparent;
      -webkit-tap-highlight-color: rgba(0,0,0,0);
      padding:0px;
      margin:0px;
      background:#fff;
      -o-user-select:none;
      -khtml-user-select:none;
      -webkit-user-select:none;
      -ms-user-select:none;
      user-select:none;
  }
  input{
      border:0px;
  }
  input:focus-visible {
      outline: none;
      border:0px;
  }
  
  /*version: 2.7.0*/
  html,body{color:#000;background:#FFF;}
  body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{
      margin:0;padding:0;
  }
  table{border-collapse:collapse;border-spacing:0;}
  fieldset,img{border:0;}
  address,caption,cite,code,dfn,em,strong,th,var,optgroup{
      font-style:inherit;font-weight:inherit;
  }
  del,ins{text-decoration:none;}
  li{list-style:none;}
  caption,th{text-align:left;}
  h1,h2,h3,h4,h5,h6{    font-size:100%;font-weight:normal;}
  q:before,q:after{content:'';}
  abbr,acronym{border:0;font-variant:normal;}
  sup{vertical-align:baseline;}
  sub{vertical-align:baseline;}
  legend{color:#000;}
  input,button,textarea,select,optgroup,option{
      font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;
  }
  input,button,textarea,select{*font-size:100%;}
  .clear{clear:both;}
  input::-moz-focus-inner{ border: 0;padding: 0;}
a:-webkit-any-link:active {
    color: #000000;text-decoration:none
  }
  a:active {
      color: #000000;text-decoration:none
  }
  a:link{color:#000000;text-decoration:none};
  a:visible{color:#000000;text-decoration:none};
  a{color:#000000;text-decoration:none};
  
  /*added*/
  input[type=button],input[type=submit] {-webkit-appearance: button;}
  .invalid{
      filter: grayscale(100%);
      -webkit-filter: grayscale(100%);
      -moz-filter: grayscale(100%);
      -ms-filter: grayscale(100%);
      -o-filter: grayscale(100%);
      filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
      -webkit-filter: grayscale(1);
  }

#app{
    position: relative;
    width: 1920px;
}

.bg{
    position: relative;
    margin-top: -2px;
}

.top_bg{
    position: relative;
    width: 1920px;
    height: 1080px;
    background: url("../img/top2.png") no-repeat center;
    background-size: 100% auto;
}

.top_title{
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 200px;
    background: url("../img/title.png") no-repeat center;
    background-size: 100% auto;
}

.main{
    position: relative;
    width: 1920px;
    height: 1080px;
    background-color: black;
    color:white;
}

.swiper{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    position: absolute;
    top: 100px;
}

.main .title{
    text-align: center;
    width: 100%;
    font-size: 48px;
    font-weight: bold;
}

.left_button,.right_button{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    background: url("../img/next.png") no-repeat center;
    background-size: 100% 100%;
    cursor: pointer;
}

.left_button{
    left: -100px;
    transform: rotateZ(180deg) translateY(50%);
}

.right_button{
    right: -100px;
}

.swiper-con{
    position: absolute;
    top: 150px;
    width: 900px;
    height: 421px;
}

.swiper-container{
    display: flex;
    justify-content: center;
    position: relative;
    width: 900px;
    height: 421px;
}

.swiper-container .swiper-slide{
    width: 748px;
    height: 421px;
}

.swiper_img_1{
    width: 748px;
    height: 421px;
    background: url("../img/1.png") no-repeat center;
    background-size: 100% 100%;
}

.swiper_img_2{
    width: 748px;
    height: 421px;
    background: url("../img/2.png") no-repeat center;
    background-size: 100% 100%;
}

.swiper_img_3{
    width: 748px;
    height: 421px;
    background: url("../img/3.png") no-repeat center;
    background-size: 100% 100%;
}

.swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets{
    left: 50%;
    transform: translateX(-50%);
    bottom: -75px;
    z-index: 50;
}

.swiper-pagination .swiper-pagination-bullet {
    width: 80px;
    height: 46px;
    background: url("../img/pageoff.png") no-repeat center center;
}

.swiper-pagination  .swiper-pagination-bullet-active {
    width: 80px;
    height: 46px;
    background: url("../img/pageon.png") no-repeat center center;
}

.bottom{
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    height: 200px;
}

.bottom .text_area{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 16px;
    line-height: 16px;
}

.bottom .text_area span{
    margin-bottom: 15px;
    user-select: text;
}

.bottom .icon{
    position: absolute;
    top: -20px;
    right: 400px;
    width: 85.6px;
    height: 84.8px;
    background: url("../img/www.png") no-repeat center;
    background-size: 100% auto;
}