body, html {
  background: #1E1E1E;
}

a {
  color: #FFFFFF;
}


/* 左右布局 */
.card-box section {
  width: 1140px;
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.card-box section .title {
  width: 449px;
  font-style: normal;
  font-weight: 900;
  font-size: 44px;
  line-height: 52px;
  font-family: Figtree;
}
.card-box section .desc {
  width: 449px;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 29px;
  font-family: Figtree;
}
/* 左右布局 */

/* 上下布局 */
.card-box2 section {
  width: 1140px;
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
.card-box2 section .title {
  font-style: normal;
  font-weight: 900;
  font-size: 44px;
  line-height: 52px;
  font-family: Figtree;
}
.card-box2 section .desc {
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 29px;
  font-family: Figtree;
}
/* 上下布局 */
.color-w{
  color: #fff;
}
.color-b{
  color: #080611;
}



/*first_box*/
.first_box {
  display: block;
  width: 100vw;
  height: calc(100vh - 80px);
  background-image: url("../img/1_b.png");
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;

}
.card-box .title {
  width: 449px;
  margin: 0 auto;
}
.card-box .desc {
  width: 449px;
  margin: 40px auto;
}
.first_con .btn {
  width: 162px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  background: linear-gradient(132.16deg, #CB1EC4 -5.96%, #4AC9FF 73.76%);
  border-radius: 28px;
  cursor: pointer;
}
.first_con .btn:active{
  opacity: 0.7;
}
.first_box img {
  width: 600px;
  height: 600px;
}
/*first_box*/

/*seconed_box*/
.seconed_box {
  background: #fff;
  height: 1080px;
}
.seconed_box img {
  width: 538px;
  height: 336px;
}
/*seconed_box*/
/*third_box*/
.third_box {
  background: #E6E0FF;
  height: 1080px;
}
.third_con {
  margin-bottom: 186px;
}

.third_box .title {
  width: 1092px;
  text-align: center;
}

.third-list {
  width: 1140px;
  display: flex;
  justify-content: space-between;
}

.third-list .item {
  width: 280px;
  display: flex;
  flex-direction: column;
}

.third-list .item img {
  width: 200px;
  height: 200px;
  margin: 0 auto 72px;
}

.third-list .item span {
  font-size: 24px;
  color: #080611;
  text-align: center;
}

/*third_box*/
/*four_box*/
.four_box {
  background: #080611;
  height: 1080px;
}

.four_con {
  margin-bottom: 112px;
}

.four_box .title {
  width: 781px;
  text-align: center;
  margin: 0px auto;
}

.four_box .desc {
  width: 820px;
  text-align: center;
  margin: 40px auto 0;
}

/*four_box*/
/*fif_box*/
.fif_box {
  background: #fff;
  height: 1080px;
}

.fif_con {
  margin-bottom: 134px;
}

.fif_con .title {
  width: 781px;
  text-align: center;
  margin: 0px auto;
}

.fif-list {
  width: 1140px;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

.fif-list .item {
  width: 262px;
  height: 108px;
}

.fif-list .item img {
  width: 262px;
  height: 108px;
}

/*fif_box*/

/* form-box */
.form-box {
  width: 544px;
  height: 584px;
  padding: 24px 32px 32px 32px;
  border-radius: 56px;
  background: #58575D;
  box-sizing: border-box;
}

.form-box .form-title {
  font-family: Figtree;
  font-size: 40px;
  font-weight: 600;
  line-height: 48px;
  text-align: center;
  color: #fff;
  margin-bottom: 32px;
}

.form-box .form-con {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
}

.form-box .form-con input {
  width: 228px;
  height: 48px;
  border-radius: 6px;
  background: #fff;
  border: none;
  outline: none;
  padding: 0 16px;
  box-sizing: border-box;
  font-size: 16px;
}

.form-box .form-con textarea {
  width: 480px;
  height: 120px;
  border-radius: 6px;
  background: #fff;
  border: none;
  outline: none;
  padding: 16px;
  box-sizing: border-box;
  font-size: 16px;
  resize: none;
}

.form-box .form-con textarea::placeholder,
.form-box .form-con input::placeholder {
  color: #B5B5B5;
}

.form-box .form-con .publisher {
  width: 480px;
  height: 48px;
  border-radius: 6px;
  padding: 0 16px;
  background: #fff;
  border: none;
  outline: none;
  font-size: 16px;
}

.form-box .btn {
  width: 480px;
  height: 56px;
  background: linear-gradient(132.16deg, #CB1EC4 -5.96%, #4AC9FF 73.76%);
  font-family: Figtree;
  font-size: 18px;
  font-weight: 400;
  line-height: 21.6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 28px;
  color: #fff;
  cursor: pointer;
}

.form-box .btn:active {
  opacity: 0.7;
}

/* form-box */

/* error */
.error-tips {
  position: fixed;
  width: 300px;
  height: 50px;
  top: 50px;
  left: 0;
  right: 0;
  margin: auto;
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid #d9d9d9;
  box-shadow: 0 0 4px rgba(0, 0, 0, .17);
  background: #fff;
  display: block;
  z-index: 1000;
  display: flex;
  align-items: center;
  font-size: 14px;
  transition: opacity 0.5s ease-in-out; /* 透明度过渡效果 */  
  animation: slideInFromTop 0.5s forwards; /* 引入动画 */  
  animation-play-state: paused; /* 初始状态为暂停 */ 
}

/* 进入动画 */  
@keyframes slideInFromTop {  
  0% {  
    transform: translateY(-100%); /* 从顶部外开始 */  
    opacity: 0;  
  }  
  100% {  
    transform: translateY(0); /* 移动到原位 */  
    opacity: 1;  
  }  
}  
  
/* 隐藏动画（如果需要的话） */  
@keyframes fadeOut {  
  0% {  
    opacity: 1;  
  }  
  100% {  
    opacity: 0;  
  }  
}

/* error */




.banner .banner_content {
  width: 1140px;
  position: absolute;
  bottom: 72px;
  left: 50%;
  transform: translateX(-50%);
}

.banner .title {
  width: 1140px;
  font-style: normal;
  font-weight: 700;
  font-size: 56px;
  color: #333333;
  margin: 0 auto;
  text-align: center;
  line-height: 64px;
  font-family: Inter;
}

.banner .title-tips {
  width: 1140px;
  color: #1E1E1E;
  text-align: center;
  font-size: 28px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  margin: 8px auto 0;
  text-align: center;
  font-family: Inter;
}

.banner .desc {
  width: 1140px;
  color: #1E1E1E;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 30px;
  margin: 24px auto 0;
  text-align: center;
  font-family: Inter;
}

@media (min-width: 640px) and (max-width: 1139px) {
  .banner {
    height: calc(100vh - 56px);
    background-image: url("../img/1_pad.jpg");
    background-size: auto 100%;
  }

  .banner>section {
    width: 100%;
    /*align-items: center;*/
    padding: 0 24px;
  }

  .banner .banner_content {
    width: 592px;
    bottom: 72px;
  }

  .banner .title {
    width: 592px;
    margin-top: 419px;
    font-size: 40px;
    text-align: center;
    line-height: 54px;
  }

  .banner .title-tips {
    width: 592px;
    color: #1E1E1E;
    text-align: center;
    font-family: Inter;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
  }

  .banner .desc {
    width: 592px;
    color: #1E1E1E;
    font-family: Inter;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
  }
}

@media (min-width: 320px) and (max-width: 639px) {
  .banner {
    height: calc(100vh - 56px);
    background-image: url("../img/1_mobile.jpg");
    background-size: auto 100%;
  }

  .banner>section {
    width: 100%;
    /*align-items: center;*/
    padding: 0 24px;
  }

  .banner .banner_content {
    width: 327px;
    bottom: 24px;
  }

  .banner .title {
    width: 100%;
    margin-top: 484px;
    margin-top: 484px;
    font-size: 32px;
    font-style: normal;
    font-weight: 500;
    line-height: 42px;
  }

  .banner .title-tips {
    width: 327px;
    color: #1E1E1E;
    text-align: center;
    font-family: Inter;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
  }

  .banner .desc {
    width: 100%;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
  }
}

/*banner*/
/*monetize*/
.monetize {
  display: block;
  width: 100%;
  height: 640px;
  background: #FFFFFF;
}

.monetize>section {
  width: 1140px;
  height: 100%;
  margin: 0 auto;
  opacity: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /*top: -60px;*/
}

.monetize .textBox {
  width: 564px;
  display: flex;
  flex-direction: column;
}

.monetize .tips {
  color: #1E1E1E;
  font-family: Inter;
  font-size: 42px;
  font-style: normal;
  font-weight: 600;
  line-height: 58px;
}

.monetize .title {
  color: #1E1E1E;
  font-family: Inter;
  font-size: 42px;
  font-style: normal;
  font-weight: 600;
  line-height: 58px;
  margin-bottom: 40px;
}

.monetize .title>span {
  color: #FE3939;
}

.monetize .desc {
  color: #1E1E1E;
  font-family: Inter;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 30px;
}

.monetize .imgBox {
  width: 480px;
  height: 480px;
}

.monetize .imgBoxPC {
  display: block;
}

.monetize .imgBoxPhone {
  display: none;
}

.monetize .imgBox img {
  width: 100%;
  height: 100%;
}

@media (min-width: 640px) and (max-width: 1139px) {
  .monetize {
    height: 724px;
  }

  .monetize>section {
    width: 100%;
    padding: 0 24px 0;
  }

  .monetize .textBox {
    width: auto;
    flex: 1;
  }

  .monetize .textBox_left {
    margin-left: 28px;
  }

  .monetize .textBox_right {
    margin-right: 28px;
  }

  .monetize .imgBox {
    width: 270px;
    height: 270px;
  }

  .monetize .tips {
    font-size: 32px;
    font-weight: 400;
    line-height: normal;
  }

  .monetize .title {
    font-size: 32px;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 24px;
  }

  .monetize .desc {
    font-size: 16px;
    line-height: 24px;
  }
}

@media (min-width: 320px) and (max-width: 639px) {
  .monetize {
    width: 100vw;
    height: auto;
  }

  .monetize>section {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  .monetize .textBox {
    width: 100%;
    padding: 40px 24px 0;
    margin-bottom: 64px;
  }

  .monetize .imgBox {
    width: 375px;
    height: 375px;
    margin-bottom: 88px;
  }

  .monetize .imgBoxPC {
    display: none;
  }

  .monetize .imgBoxPhone {
    display: block;
  }

  .monetize .tips {
    font-size: 32px;
    line-height: normal;
    /*margin-bottom: 24px;*/
  }

  .monetize .title {
    font-size: 32px;
    line-height: normal;
    margin-bottom: 24px;
  }

  .monetize .desc {
    font-size: 15px;
  }
}

/*monetize*/
/*advertise*/
.advertise {
  display: block;
  width: 100%;
  height: 896px;
  background-image: url("../img/3.png");
  background-position: center;
  background-size: auto 100%;
  background-repeat: no-repeat;
}

.advertise>section {
  width: 1140px;
  height: 100%;
  margin: 0 auto;
  opacity: 0;
  position: relative;
}

.advertise .textBox {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding-top: 104px;
}

.advertise .tips {
  color: #1E1E1E;
  text-align: center;
  font-family: Inter;
  font-size: 28px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  margin-bottom: 16px;
}

.advertise .title {
  color: #FFFFFF;
  font-family: Inter;
  font-size: 42px;
  font-style: normal;
  font-weight: 600;
  line-height: 58px;
  margin-bottom: 40px;
  text-align: center;
}

.advertise .title span {
  color: #FE3939;
}

.advertise .typeBox {
  width: 1016px;
  height: 40px;
  padding: 0 160px;
  display: flex;
  justify-content: space-around;
  margin: 0 auto 80px;
}

.advertise .typeBox .typeItem {
  color: #FFFFFF;
  opacity: 0.4;
  text-align: center;
  font-family: Inter;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 40px;
}

.advertise .typeBox .typeItem-active {
  font-size: 28px;
  opacity: 1;
}

@media (min-width: 640px) and (max-width: 1139px) {
  .advertise {
    height: 764px;
  }

  .advertise>section {
    width: 100%;
    padding: 0 24px 0;
  }

  .advertise .textBox {
    padding-top: 40px;
  }

  .advertise .tips {
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    margin-bottom: 8px;
  }

  .advertise .title {
    width: 330px;
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    margin: 0 auto 40px;
    line-height: normal;
  }

  .advertise .typeBox {
    width: 100%;
    padding: 0;
  }
}

@media (min-width: 320px) and (max-width: 639px) {
  .advertise {
    height: 760px;
  }

  .advertise>section {
    width: 100%;
    padding: 0 24px 0;
  }

  .advertise .textBox {
    padding-top: 40px;
  }

  .advertise .tips {
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    margin-bottom: 8px;
  }

  .advertise .title {
    width: 100%;
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    margin: 0 auto 40px;
    line-height: normal;
  }

  .advertise .typeBox {
    width: 100%;
    padding: 0;
    margin-bottom: 40px;
  }

  .advertise .typeBox .typeItem {
    font-size: 14px;
  }
}

/*advertise*/
/*sports*/
.sports {
  display: block;
  width: 100%;
  height: 640px;
  background-image: url("../img/4_pc.jpg");
  background-position: center;
  background-size: auto;
  background-repeat: no-repeat;
}

.sports>section {
  width: 1140px;
  height: 100%;
  margin: 0 auto;
  opacity: 0;
  position: relative;
  /*display: flex;*/
  /*align-items: center;*/
  /*justify-content: space-between;*/
  /*top: -60px;*/
}

.sports .textBox {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding-top: 261px;
}

.sports .tips {
  color: #FFFFFF;
  text-align: center;
  font-family: Inter;
  font-size: 28px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  margin-bottom: 16px;
}

.sports .title {
  color: #FFFFFF;
  font-family: Inter;
  font-size: 42px;
  font-style: normal;
  font-weight: 600;
  line-height: 58px;
  margin-bottom: 40px;
  text-align: center;
}

.sports .title span {
  color: #FE3939;
}

.sports .desc {
  color: #FFFFFF;
  text-align: center;
  font-family: Inter;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 30px;
}

@media (min-width: 640px) and (max-width: 1139px) {
  .sports {
    height: 764px;
    background-size: auto 100%;
  }

  .sports>section {
    width: 100%;
    padding: 0 24px 0;
  }

  .sports .textBox {
    /*padding-top: 40px;*/
  }

  .sports .tips {
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    margin-bottom: 8px;
  }

  .sports .title {
    width: 544px;
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    margin: 0 auto 8px;
    line-height: normal;
  }

  .sports .desc {
    width: 544px;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
  }
}

@media (min-width: 320px) and (max-width: 639px) {
  .sports {
    height: 760px;
    background-size: auto 100%;
  }

  .sports>section {
    width: 100%;
    padding: 0 24px 0;
  }

  .sports .textBox {
    /*padding-top: 40px;*/
  }

  .sports .tips {
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    margin-bottom: 8px;
  }

  .sports .title {
    width: 100%;
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    margin: 0 auto 8px;
    line-height: normal;
  }

  .sports .desc {
    width: 100%;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
  }
}

/*sports*/
/*partners*/
.partners {
  display: block;
  width: 100%;
  height: 370px;
  background: #FFFFFF;
}

.partners>section {
  width: 1140px;
  height: 100%;
  margin: 0 auto;
  opacity: 0;
  position: relative;
  /*display: flex;*/
  /*align-items: center;*/
  /*justify-content: space-between;*/
  /*top: -60px;*/
}

.partners .textBox {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding-top: 40px;
}

.partners .tips {
  color: #1E1E1E;
  text-align: center;
  font-family: Inter;
  font-size: 28px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  margin-bottom: 16px;
}

.partners .title {
  color: #1E1E1E;
  font-family: Inter;
  font-size: 42px;
  font-style: normal;
  font-weight: 600;
  line-height: 58px;
  margin-bottom: 16px;
  text-align: center;
}

.partners .title span {
  color: #FE3939;
}

.partners .iconBox {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.partners .iconBox .icon-item {
  width: 96px;
  height: 96px;
  margin-left: 40px;
  margin-top: 40px;
}

.partners .iconBox .icon-item img {
  width: 100%;
  height: 100%;
}

@media (min-width: 640px) and (max-width: 1139px) {
  .partners {
    height: 471px;
    background-size: auto 100%;
  }

  .partners>section {
    width: 544px;
    padding: 0 24px 0;
  }

  .partners .textBox {
    padding-top: 40px;
  }

  .partners .tips {
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    margin-bottom: 8px;
  }

  .partners .title {
    width: 100%;
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    margin: 0 auto 8px;
    line-height: normal;
  }

  .partners .iconBox {
    justify-content: center;
  }

  .partners .iconBox .icon-item {
    width: 80px;
    height: 80px;
    margin-left: 40px;
    margin-top: 40px;
  }

  .partners .iconBox .icon-item-pad {
    margin-left: 0;
  }
}

@media (min-width: 320px) and (max-width: 639px) {
  .partners {
    height: 448px;
    background-size: auto 100%;
  }

  .partners>section {
    width: 100%;
    padding: 0 24px 0;
  }

  .partners .textBox {
    padding-top: 40px;
  }

  .partners .tips {
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    margin-bottom: 8px;
  }

  .partners .title {
    width: 100%;
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    margin: 0 auto 8px;
    line-height: normal;
  }

  .partners .iconBox {
    width: 280px;
    margin: 0 auto;
    justify-content: center;
  }

  .partners .iconBox .icon-item {
    width: 64px;
    height: 64px;
    margin-left: 32px;
    margin-top: 32px;
  }

  .partners .iconBox .icon-item-mobile {
    margin-left: 0;
  }
}

/*partners*/
/*contact*/
.contact {
  display: block;
  width: 100%;
  height: 342px;
  background: #020202;
}

.contact>section {
  width: 1140px;
  height: 100%;
  margin: 0 auto;
  opacity: 1;
  position: relative;
}

.contact .textBox {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding-top: 80px;
}

.contact .tips {
  color: #FFFFFF;
  text-align: center;
  font-family: Inter;
  font-size: 28px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  margin-bottom: 16px;
}

.contact .title {
  color: #FFFFFF;
  text-align: center;
  font-family: Inter;
  font-size: 28px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  margin-bottom: 40px;
}

.contact .desc {
  color: #FFFFFF;
  text-align: center;
  font-family: Inter;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 58px;
}

@media (min-width: 640px) and (max-width: 1139px) {
  .contact {
    height: 239px;
    background-size: auto 100%;
  }

  .contact>section {
    width: 100%;
    padding: 0 24px 0;
  }

  .contact .textBox {
    padding-top: 40px;
  }

  .contact .tips {
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    margin-bottom: 8px;
  }

  .contact .title {
    width: 544px;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    margin: 0 auto 40px;
    line-height: 24px;
  }

  .contact .desc {
    width: 100%;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
  }
}

@media (min-width: 320px) and (max-width: 639px) {
  .contact {
    height: 278px;
    background-size: auto 100%;
  }

  .contact>section {
    width: 100%;
    padding: 0 24px 0;
  }

  .contact .textBox {
    padding-top: 40px;
  }

  .contact .tips {
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    margin-bottom: 8px;
  }

  .contact .title {
    width: 100%;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    margin: 0 auto 40px;
    line-height: 24px;
  }

  .contact .desc {
    width: 100%;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
  }
}

/*contact*/

/*footer*/
.footer {
  width: 1140px;
  height: 72px;
  /*background: #020202;*/
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
}

.footer span {
  height: 16px;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #FFFFFF;
  text-align: center;
  line-height: 16px;
}

.footer .pp {
  cursor: pointer;
}

.footer .footer-right {
  height: 26px;
  display: flex;
  align-items: center;
}

.footer .line {
  width: 1px;
  height: 14px;
  background: #fff;
  margin: 0 12px;
}

@media (min-width: 640px) and (max-width: 1139px) {
  .footer {
    width: 100%;
    padding: 0 24px;
  }
}

@media (min-width: 320px) and (max-width: 639px) {
  .footer {
    width: 100%;
    flex-direction: column;
    padding: 0 24px;
    justify-content: center;
  }

  .footer .pp {
    margin-top: 8px;
  }
}

/*footer*/
/*swiper*/
#mySwiper {
  position: relative;
  width: 1200px;
  margin: 0 auto;
}

#mySwiper .swiper-container {
  padding-bottom: 60px;
}

#mySwiper .swiper-slide {
  width: 320px;
  height: 360px;
}

#mySwiper .swiper-slide>div {
  width: 100%;
  height: 100%;
  position: relative;
}

#mySwiper .swiper-slide>div img {
  width: 100%;
  height: 100%;
}

#mySwiper .swiper-slide>div>.img-0 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
}

#mySwiper .swiper-slide>div>.img-1 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
}

#mySwiper .swiper-slide>div>.img-2 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
}

#mySwiper .swiper-slide>div>.img-3 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

#mySwiper .swiper-slide>div>.img-4 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

#mySwiper .swiper-pagination {
  width: 100%;
  bottom: 20px;
}

#mySwiper .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 5px;
  background: rgba(255, 255, 255, 0.20);
  width: 10px;
  height: 10px;
  opacity: 1;
}

#mySwiper .swiper-pagination-bullets .swiper-pagination-bullet-active {
  background-color: #FFFFFF;
}

#mySwiper .swiper-button-prev {
  left: -30px;
  top: 40%;
  width: 45px;
  height: 45px;
  color: rgba(255, 255, 255, 0.5);
}

#mySwiper .swiper-button-prev:hover {
  background-position: 0 -46px;
  background-size: 100%
}

#mySwiper .swiper-button-next {
  right: -30px;
  top: 40%;
  width: 45px;
  height: 45px;
  color: rgba(255, 255, 255, 0.5);
}

@media (min-width: 640px) and (max-width: 1139px) {
  #mySwiper {
    width: 100vw;
    /*transform: scale(0.8);*/
  }

  #mySwiper .swiper-button-prev {
    display: none;
  }

  #mySwiper .swiper-button-next {
    display: none;
  }

  #mySwiper .swiper-pagination {
    /*display: none;*/
  }

  #mySwiper .swiper-slide {
    width: 320px;
    height: 360px;
  }

  #mySwiper .swiper-slide .img-none {
    display: none;
  }

  #mySwiper .swiper-slide .img-show {
    display: block;
  }

  #mySwiper .swiper-slide-active .img-none {
    display: block;
  }

  #mySwiper .swiper-slide-active .img-show {
    display: block;
  }
}

@media (min-width: 320px) and (max-width: 639px) {
  #mySwiper {
    width: 100vw;
    /*transform: scale(0.8);*/
  }

  #mySwiper .swiper-button-prev {
    display: none;
  }

  #mySwiper .swiper-button-next {
    display: none;
  }

  #mySwiper .swiper-pagination {
    /*display: none;*/
  }

  #mySwiper .swiper-slide {
    width: 320px;
    height: 360px;
  }

  #mySwiper .swiper-slide .img-none {
    display: none;
  }

  #mySwiper .swiper-slide .img-show {
    display: block;
  }

  #mySwiper .swiper-slide-active .img-none {
    display: block;
  }

  #mySwiper .swiper-slide-active .img-show {
    display: block;
  }
}

/*swiper*/
/*service*/
.service {
  display: block;
  width: 100%;
  height: 640px;
  background: #FFFFFF;
}

.service>section {
  width: 1140px;
  height: 100%;
  margin: 0 auto;
  opacity: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  top: -60px;
}

.service .textBox {
  width: 564px;
  display: flex;
  flex-direction: column;
}

.service .title {
  font-size: 48px;
  font-weight: 700;
  line-height: 58px;
  color: #131313;
  font-style: normal;
  margin-top: 24px;
}

.service .desc {
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
  color: #7E7E7E;
  margin-top: 8px;
}

.service .imgBox {
  width: 480px;
  height: 480px;
}

.service .imgBoxPC {
  display: block;
}

.service .imgBoxPhone {
  display: none;
}

.service .imgBox img {
  width: 100%;
  height: 100%;
}

@media (min-width: 640px) and (max-width: 1139px) {
  .service {
    height: 640px;
  }

  .service>section {
    width: 100%;
    padding: 0 24px 0 48px;
  }

  .service .textBox {
    width: auto;
    flex: 1;
  }

  .service .textBox_left {
    margin-left: 28px;
  }

  .service .textBox_right {
    margin-right: 28px;
  }

  .service .imgBox {
    width: 270px;
    height: 270px;
  }

  .service .title {
    font-size: 32px;
    margin-top: 24px;
    font-weight: 400;
    line-height: normal;
  }

  .service .desc {
    font-size: 15px;
    margin-top: 8px;
  }
}

@media (min-width: 320px) and (max-width: 639px) {
  .service {
    width: 100vw;
    height: auto;
  }

  .service>section {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  .service .textBox {
    width: 100%;
    padding: 40px 24px 0;
    margin-bottom: 64px;
  }

  .service .imgBox {
    width: 375px;
    height: 375px;
    margin-bottom: 88px;
  }

  .service .imgBoxPC {
    display: none;
  }

  .service .imgBoxPhone {
    display: block;
  }

  .service .title {
    font-size: 32px;
    margin-top: 24px;
    line-height: normal;
  }

  .service .desc {
    font-size: 15px;
    margin-top: 8px;
  }
}

/*service*/