@charset "utf-8";
.ms .inner-wrap { position: relative; overflow: hidden; }
/* .ms .inner-wrap .zipper { position: absolute; left: 590px; top: 68px; overflow: hidden; width: 1000px; height: 694px; transition: left 3s; }
.ms .inner-wrap .zipper img { position: absolute; left: 0; top: 0; transition: left 3s; transform: rotate(180deg); }
.ms .inner-wrap .zipper.on { left: 1365px; }
.ms .inner-wrap .zipper.on img { left: -775px; }
.ms .inner-wrap .zipper2 { position: absolute; left: 345px; top: 75px; overflow: hidden; width: 405px; height: 694px;  transition: left 3s; }
.ms .inner-wrap .zipper2 img { width: 100%; height: 100%; object-fit: cover; }
.ms .inner-wrap .zipper2.on { left: 1120px; } */


.zipper { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }

.top_box, .bottom_box {
  width: 120%;
  height: 412px;
}

.main > div {
  display: inline-block;
}
.top_zipperL, .bottom_zipperL {
  animation: width 5s linear forwards;
  width:0;
  height: 100%;
  float: left;
  display: inline-block;
}
.top_zipperR {
  width: 100%;
  height: 100%;
  -webkit-animation: fL 5s linear forwards;
  animation: fL 5s linear forwards;
  border-bottom: 5px dotted #525252b8 ;
  display: inline-block;
  background: #fff;
}

.bottom_zipperR {
  width: 100%;
  height: 100%;
  -webkit-animation: fL 5s linear forwards;
  animation: fL 5s linear forwards;
  border-top: 5px dotted #525252b8;
  display: inline-block;
  background: #fff;
}
.zipper_switch {
  top: 386px;
  position: absolute;
  left: 1%;
  animation: switch 5s cubic-bezier(0.6,0.95,0.65,0.75) forwards;
}

@keyframes fL {
  0% {
    border-radius: 0;
  }
  100% {
    border-bottom-left-radius: 90%;
    border-top-left-radius: 90%;
    width: 30%;
  }
}

@keyframes width {
  0% {
    width: 0%;
  }
  100% {
    width: 70%;
  }
}
@keyframes switch {
  0% {
    left:1%;
  }

  100% {
    left: 100%;
  }
}



.section { width: 100%; }

.section1 {}
.section1 .tab-btn {}
.section1 .tab-btn > li { cursor: pointer; }
.section1 .tab-btn > li > p { color: #ece1f4; }
.section1 .tab-btn > li.on { position: relative; }
.section1 .tab-btn > li.on::after { content: ''; position: absolute; right: 0; bottom: -20px; width: 642px; height: 1px; background: #666; }
.section1 .tab-btn > li.on > p:nth-of-type(1) { color: #8f46b8; }
.section1 .tab-btn > li.on > p:nth-of-type(2) { color: #000; }

.section1 .tab-content { display: none; }
.section1 .tab-content.on { display: block; }

.section2 .ops-wrap { width: 100%; }
.section2 .ops_slide {}
.section2 .ops_slide .ops-container{ margin: 0 auto; position: relative; overflow: hidden; list-style: none; padding: 0; }
.section2 .ops_slide .ops-wrapper { display: flex; height:100%; -webkit-transform:translateZ(0); -ms-transform:translateZ(0); transform:translateZ(0); }
.section2 .ops_slide .ops-wrapper:after{ content:''; display:block; clear:both; }
.section2 .ops_slide .ops-wrapper .ops-slide { width: 280px; height: 100px; margin: 0 20px; }
.section2 .ops_slide .ops-wrapper .ops-items{ float:left; position:relative; width:100%; height:100%; }