.banner {
  position: relative;
  width: 100%;
  height: 50vh;
}
.banner #particles-01 {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000a14;
  z-index: 1;
}
.banner #space {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000a14;
  z-index: 1;
}
.banner #particles-02 {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -140px;
  margin-left: -250px;
  width: 500px;
  height: 280px;
  z-index: 1;
}
.banner .swiper-container {
  position: relative;
  height: 100%;
  z-index: 2;
}
.banner button {
  padding: 0 12px;
  color: #fff;
  font-size: 17px;
  line-height: 35px;
  border-radius: 8px;
  border: 1px solid #fff;
  background-color: transparent;
  transition: all .4s;
}
.banner button:hover {
  color: #000a14;
  background-color: #fff;
}
.banner .curtain {
  position: relative;
}
.banner .curtain .flex-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  margin: 0 auto;
  width: 50%;
  min-width: 1100px;
  height: 100%;
}
.banner .curtain aside {
  color: #fff;
  font-size: 22px;
}
.banner .curtain aside span {
  font-size: 16px;
}
.banner .curtain aside h4 {
  margin: 20px 0;
  color: #53b0ff;
  font-size: 26px;
}
.banner .curtain aside h4 span {
  color: #37c89f;
  font-size: 22px;
}
.banner .curtain aside button {
  margin-top: 40px;

}
.banner button {
  margin-top: 40px;
  position: relative;
  cursor: pointer;
  margin-left: 140px;
}
.banner .curtain .curtain-image {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 30%;
  height: 100%;
  z-index: 1;
}
.banner .curtain .curtain-phone {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 315px;
  height: 410px;
  z-index: 2;
}
.banner .curtain .curtain-earth {
  position: absolute;
  /*top: 0;*/
  right: 0;
  width: 442px;
  height: 288px;
  z-index: 2;
}
.banner .item-02,
.banner .item-03,
.banner .item-04
{
  position: relative;
}
.banner .item-02 .background,
.banner .item-04 .background,
.banner .item-03 .background
{
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  opacity: 0;
  transition: all .4s;
}
.banner .item-02 .flex-container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  margin: 0 auto;
  padding: 0 90px;
  width: 50%;
  min-width: 1100px;
  height: 100%;
  z-index: 1;
}
.banner .item-04 .flex-container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  margin: 0 auto;
  width: 50%;
  min-width: 1100px;
  height: 100%;
  z-index: 1;
}
.banner .item-04 .item-thumb{
  margin-left: 30px;
  width: 340px;
}

.banner .item-04 aside{
  flex: 1;
  padding: 0 40px;
  color: #fff;
}
.banner .item-04 span{
  display: inline-block;
  padding: 0 15px;
  line-height: 34px;
  border: 2px solid #fff;
}

.banner .item-04 h4{
  font-size: 27px;
  font-weight: bolder;
}
.banner .item-04 p{
  padding: 15px;
  line-height: 24px;
}
.banner .item-04 button{
  /*padding: 5px 15px;*/
  /*background-color: #10ac7e;*/
  /*border: 0;*/
  /*border-radius: 0;*/
}
.banner .item-02 .flex-container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  margin: 0 auto;
  padding: 0 90px;
  width: 50%;
  min-width: 1100px;
  height: 100%;
  z-index: 1;
}
.banner .item-02 aside{
  flex: 1;
  padding: 0 40px;
  color: #fff;
}
.banner .item-02 .item-thumb{
  margin-left: 30px;
  width: 340px;
}
.banner .item-02 h4{
  font-size: 24px;
  font-weight: bolder;
}
.banner .item-02 p{
  padding: 15px 0;
  line-height: 24px;
}
.banner .item-02 span{
  display: inline-block;
  padding: 0 15px;
  line-height: 34px;
  border: 2px solid #fff;
}
.banner .item-03 .flex-container{
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: 0 auto;
  width: 50%;
  min-width: 1100px;
  height: 100%;
  z-index: 1;
}
.banner .item-03 aside{
  padding: 0 30px;
  width: 45%;
  color: #fff;
}
.banner .item-03 .item-thumb{
  flex: 1;
}
.banner .item-03 h4{
  font-size: 30px;
  font-weight: bolder;
}
.banner .item-03 h3{
  font-size: 36px;
  font-weight: bolder;
}
.banner .item-03 p{
  position: relative;
  padding: 24px 0;
  font-size: 26px;
}
.banner .item-03 p:after{
  /*content: '';*/
  /*position: absolute;*/
  /*left: 0;*/
  /*bottom: 0;*/
  /*width: 130px;*/
  /*height: 1px;*/
  /*background-color: #fff;*/
}
.banner .item-03 ul{
  display: flex;
  padding-top: 20px;
}
.banner .item-03 ul li{
  margin-right: 25px;
  padding-left: 30px;
  height: 32px;
  line-height: 32px;
  background-repeat: no-repeat;
  background-position: left center;
}
.banner .item-03 ul li:nth-child(1){
  background-image: url(../../images/banner-03-01.png);
}
.banner .item-03 ul li:nth-child(2){
  background-image: url(../../images/banner-03-02.png);
}
.banner .ani-slide .background{
  opacity:1;
}
.wrapper {
  position: relative;
}

.index-intro {
  padding: 50px 0;
}
.index-intro .flex-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
  padding: 0 65px;
  width: 1100px;
}
.index-intro section {
  padding: 0 24px;
  font-size: 20px;
}
.index-intro section h4 {
  margin-bottom: 25px;
  color: #3e3a39;
  font-size: 32px;
}
.index-intro section h4 span {
  color: #2f9fff;
}
.index-intro section p {
  margin-bottom: 45px;
}
.index-intro section a {
  display: inline-block;
  padding: 0 24px;
  color: #fff;
  font-size: 16px;
  line-height: 35px;
  border-radius: 7px;
  background-color: #2f9fff;
}
.index-intro video{
  object-fit: fill;
}

.index-progress {
  position: relative;
  height: 660px;
}
.index-progress #particles-03 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #0c0f15;
  z-index: 0;
}
.index-progress .flex-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin: 0 auto;
  width: 1100px;
  height: 100%;
  z-index: 1;
}
.index-progress .sandwich, .index-progress .container {
  position: relative;
}
.index-progress .sandwich {
  min-width: 270px;
}
.index-progress .sandwich .board {
  position: relative;
  height: 360px;
}
.index-progress .sandwich .board img{
  position: absolute;
  left: 0;
  width: 270px;
  height: 185px;
}
.index-progress .sandwich .board img:nth-child(1){
  top: 0;
  z-index: 3;
}
.index-progress .sandwich .board img:nth-child(2){
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  z-index: 2;
}
.index-progress .sandwich .board img:nth-child(3){
  top: 170px;
  z-index: 0;
}
.index-progress .sandwich .target {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: unset;
  width: 530px;
/*   height: 430px; */
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  z-index: 99;
}
.index-progress .nav {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.index-progress .nav .item {
  position: absolute;
  color: #fff;
  font-size: 24px;
}
.index-progress .nav .item:after {
  content: '';
  position: absolute;
  top: 50%;
  margin-top: -1px;
  width: 35px;
  height: 2px;
  background-color: #fff;
}
.index-progress .nav .item:nth-child(1) {
  top: 25px;
  left: -45%;
}
.index-progress .nav .item:nth-child(1):after {
  left: 110%;
}
.index-progress .nav .item:nth-child(2) {
  top: 45%;
  right: -55%;
}
.index-progress .nav .item:nth-child(2):after {
  right: 110%;
}
.index-progress .nav .item:nth-child(3) {
  bottom: 10%;
  left: -45%;
}
.index-progress .nav .item:nth-child(3):after {
  left: 110%;
}
.index-progress .nav .item.active {
  color: #62d9cd;
}
.index-progress .nav .item.active:after {
  background-color: #62d9cd;
}
.index-progress .right-side {
  position: relative;
  margin-left: 15%;
  padding-left: 125px;
  height: 86%;
  overflow-y: hidden;
}
.index-progress .right-side::-webkit-scrollbar {
  display: none;
}
.index-progress .timeline {
  position: absolute;
  top: 0;
  left: -95px;
  width: 35px;
  height: 100%;
  z-index: 5;
}
.index-progress .timeline .timeline-item {
  display: block;
  height: 0;
  width: 4px;
  background-image: linear-gradient(to bottom, #20c197, #018dfc);
  transition: all 0.4s;
}
.index-progress .container {
  position: relative;
  transform: translate3d(0, 0, 0);
  transition: all 0.4s;
  /* height: 100%; */
}
.index-progress .container .item[data-id] {
  position: relative;
  padding: 25px 0;
  color: #fff;
  font-size: 14px;
}
.index-progress .container .item[data-id]:after {
  content: attr(data-id);
  position: absolute;
  top: -12px;
  left: -20px;
  color: #202430;
  font-weight: bolder;
  font-size: 75px;
  z-index: -1;
}
.index-progress .container .item[data-id] .title {
  position: relative;
  margin-bottom: 10px;
  font-size: 19px;
  background-image: linear-gradient(to right, #333, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.index-progress .container .item[data-id] .more {
  display: inline-block;
  margin-top: 12px;
  padding: 0 10px;
  height: 24px;
  color: #fff;
  font-size: 12px;
  line-height: 24px;
  border-radius: 24px;
  background-image: linear-gradient(to right, #20c197, #018dfc);
}
.index-progress .container .item[data-id] .item-icon {
  position: absolute;
  top: 25px;
  left: -109px;
  padding: 5px 0;
  width: 32px;
  background-color: #0c0f15;
  z-index: 99;
}
.index-progress .container .item.active .title {
  background-image: linear-gradient(to right, #20c197, #018dfc);
}
.latest-news{
  padding: 60px 25px 0;
  width: 1100px;
}
.latest-news{
  display: flex;
  justify-content: space-between;
}
.latest-news aside{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-right: 45px;
  width: 465px;
  overflow: hidden;
}
.latest-news aside img{
  max-width: auto;
  height: 250px;
}
.latest-news aside .items section{
  padding: 25px 0;
  overflow: hidden;
}
.latest-news .news-container{
  flex: 1;
  min-width: 540px;
}
.latest-news .items{
  display: flex;
  color: #666666;
  line-height: 28px;
}
.latest-news .items .time{
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 20px;
  font-size: 13px;
  text-align: center;
}
.latest-news .items .time span{
  font-size: 26px;
}
.latest-news .news-container .items section{
  padding: 25px 0 25px 20px;
  border-left: 2px solid #f6f6f6;
  border-bottom: 2px solid #f6f6f6;
  overflow: hidden;
}
.latest-news .news-container .items:last-child section{
  border-bottom: none;
}
.latest-news .items .title{
  position: relative;
  margin-bottom: 5px;
  color: #333;
  font-size: 16px;
  line-height: 28px;
}
.latest-news .items .title p{
  width: 82%;
  height: 28px;
  text-overflow: ellipsis;
	white-space: nowrap;
  overflow: hidden;
}
.latest-news .items .title .tag{
  position: absolute;
  right: 0;
  top: 0;
  width: 50px;
  height: 28px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  line-height: 28px;
  background-color: #21c294;
}
.latest-news .items .title .tag:before{
  content: '';
  position: absolute;
  left: -8px;
  top: 6px;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #21c294;
}

.taillight {
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 45px;
  background: rgba(102, 102, 102, .8);
  z-index: 9999;
}
.taillight span, .taillight .contact {
  display: inline-block;
}
.taillight span {
  color: #fff;
  font-size: 18px;
  font-weight: bolder;
  line-height: 45px;
}
.taillight .contact {
  margin-left: 45px;
  padding: 0 18px;
  height: 28px;
  color: #fff;
  font-size: 14px;
  line-height: 28px;
  border-radius: 4px;
  background: #209afe;
}

.taillight .close{
    position: absolute;
    right: 2%;
    width: 25px;
    font-size: 20px;
    text-align: center;
    line-height: 25px;
}
.lockScroll {
  overflow: hidden;
  touch-action: none;
}
.lockScroll body {
  overflow: hidden;
  touch-action: none;
  margin-right: 17px;
}
.line2{
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.line3{
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
}
/*# sourceMappingURL=main.css.map */