@charset "UTF-8";
/* 移动端页面设计稿宽度 */
/* 移动端页面设计稿dpr基准值 */
/*
    vw与px对应关系，100vw为视窗宽度，$vw即为$px对应占多宽

        $px        750            $vw   100%
    -------------    ===    ------------
    $design-width  30            100vw     x
*/
/* 单位px转化为vw */
/* 单位vw转化为px，可用于根据vw单位快速计算原px */
/**
 * 实现固定宽高比
 * @param  {string} $position: relative      定位方式
 * @param  {string} $width:    100%          容器宽度
 * @param  {string} $sub:      null          容器的目标子元素
 * @param  {number} $aspectX:  1             容器宽
 * @param  {number} $aspectY:  1             容器高
 */
/* 设置字体大小，不使用rem单位， 根据dpr值分段调整 */
/**
 * 获取边框某项对应的值
 * @example getBorderItemValue(10px, 2)
 * @param  {string|list}    $item  某一项或多个项的列表
 * @param  {number}         $index 下标
 * @return {string}                 项值
 */
/**
 * 判断是否为百分比
 * @param  {number} $value  值
 * @return {boolean}        是否为百分比
 */
/**
 * 边框圆角，支持单个值与多个值，在高清设备下px圆角加倍
 * @param  {number|list} $radius 圆角值
 * @param  {number}      $ratio  设备像素比
 */
/**
 * 元素边框
 * @param  {string|list} $direction: all           为all或列表时表示多个方向的边框，否则为单个边框
 * @param  {string|list} $size:      1px           边框尺寸，为列表时表将按照direction的顺序取值
 * @param  {string|list} $style:     solid         边框样式，高清设备下仅支持solid，同上
 * @param  {string|list} $color:     #ddd          边框颜色，同上
 * @param  {string}      $position:  relative      元素定位方式，一般为relative即可
 * @param  {string}      $radius:    0             边框圆角
 */
/* 实现1物理像素的单条边框线 */
/* 实现1物理像素的多条边框线 */
html,
body {
  margin: 0;
  padding: 0; }

body {
  background-color: #f5f5f5;
  font-size: 3.7333333333vw;
  font-family: "Microsoft YaHei"; }

body {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap; }

img {
  width: 100%;
  line-height: 0; }

#J_swiper1.swiper-container {
  width: 100vw; }

#J_swiper1 .swiper-pagination-bullet-active {
  opacity: 1;
  background: #c871f3; }

.swiper-container2 {
  width: 92vw;
  line-height: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center; }

.swiper-container3 {
  width: 100vw;
  line-height: 0; }

.swiper-button-prev,
.swiper-button-next {
  background: #333;
  opacity: .7;
  position: absolute;
  top: 50%;
  width: 4.6666666667vw;
  height: 8vw;
  margin-top: -4vw;
  z-index: 10;
  cursor: pointer;
  background-size: 2.1333333333vw 4vw;
  background-position: center;
  background-repeat: no-repeat; }

.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
  left: 0;
  right: auto; }

.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
  right: 0;
  left: auto; }

.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-container-horizontal > .swiper-pagination-bullets {
  bottom: 2.6666666667vw;
  left: 0;
  width: 100%; }

.swiper-container2-wrapper {
  padding: 0 4vw; }

.nop-block__fourteen {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
 }

.nop-block__top{
  line-height: 0;

}
.nop-block__eight{
  margin-top: 4vw;

}
.nop-block__eight0{
  margin-top: 2.6666vw;

}
.nop-block__nine {


}
.nop-block__fifteen3,nop-block__fifteen2{
  line-height: 0;


}
.nop-block__fifteen2{

}
.nop-block__ten {
  }

.nop-block__eleven {
  /*padding-bottom: 1.3333333333vw; */
}
.nop-block__seventeen{

  margin-top: 2.666vw;

}
.nop-block__fifteen {
  /*padding-bottom: 1.3333333333vw;*/
  /*margin-top: 1.333vw;*/


}

.nop-block__one {
}

.nop-block__background {
  line-height: 0;

  padding-bottom: 1.3333333333vw; }

/*# sourceMappingURL=index.css.map */
.nop-block__twelve{

  margin-top: 8vw;


}

.nop-block__thirteen{

  margin-top: 3.6666vw;
}
.nop-block__seven{
  background: #f5f5f5;

}

.nop-block__seven2{
  background: #f5f5f5;

}
.nop-block__eight2{

  line-height: 0;
}
.nop-block__eight3{

  line-height: 0;
}