﻿.swiper-container {
  width: calc(100% - 60px);
  height: 420px;
  text-align: center;
}

.swiper-container .swiper-slide {
  height: 380px;
  width: 580px;
  opacity: 0.4;
  -webkit-transition: 300ms;
  -moz-transition: 300ms;
  -ms-transition: 300ms;
  -o-transition: 300ms;
  transition: 300ms;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
  position: relative;
}

.swiper-container .swiper-slide .slide-bg {
  background: url(01-02-img-bg.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: 420px;
  width: 620px;
  position: absolute;
  top: -20px;
  left: -20px;
  z-index: 1;
  background: none\9;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='01-02-img-bg.png', sizingMethod='scale');
  -ms-filter: progid: DXImageTransform.Microsoft.AlphaImageLoader(src='01-02-img-bg.png', sizingMethod='scale');
}

.swiper-container .swiper-slide img {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2;
}

.swiper-container .swiper-slide-visible {
  opacity: 0.9;
  -webkit-transform: scale(0.88);
  -moz-transform: scale(0.88);
  -ms-transform: scale(0.88);
  -o-transform: scale(0.88);
  transform: scale(0.88);
  /* translateX(30px) */
}

.swiper-container .swiper-slide-active {
  top: 0;
  opacity: 1;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}

.swiper-container .swiper-slide .swiper-title {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 46px;
  /* background: rgba(26, 26, 26, 0.7); */
  background: url(01-01-desc-bg.png);
  color: #ffffff;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  line-height: 46px;
  z-index: 3;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.swiper-container .pagination {
  position: absolute;
  z-index: 20;
  left: 0px;
  width: 100%;
  text-align: center;
  bottom: -20px;
}

.swiper-container .swiper-pagination-switch {
  background-color: #DCDCDC;
}

.swiper-container .swiper-active-switch {
  background: #1E8DDE;
}
/* 
.swiper-view {
  display: none;
} */


.swiper-slide-shadow-left,
.swiper-slide-shadow-right {
  display: none;
}

@media screen and (max-width: 1200px) {
  .swiper-container {
    display: none;
  }

  /* .swiper-view {
    display: block;
    overflow: hidden;
  } */

  .swiper-container-2 {
    margin-top: 0.37rem;
    width: 6.94rem;
    height: 4.55rem;
    position: relative;
    overflow: hidden;
  }

  .swiper-container-2 .swiper-wrapper {
    /* height: 100% !important; */
    /* width: auto !important; */
    height: 100%;
    width: 100%;
    position: relative;
  }

  .swiper-container-2 .swiper-slide {
    /* width: 6.9rem !important; */
    /* height: 4.54rem !important; */
    position: relative;
  }
  .swiper-container-2 .swiper-slide img {
    /* width: 6.9rem;*/
    /* height: 100%;  */
    width: 6.94rem;
    height: 4.55rem;
  }


  .swiper-container-2 .swiper-slide .swiper-title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0.55rem;
    background: rgba(26, 26, 26, 0.7);
    color: #ffffff;
    text-align: center;
    font-size: 0.24rem;
    font-weight: 400;
    line-height: 0.55rem;
  }

  .swiper-left-btn {
    display: block;
    position: absolute;
    left: 0;
    top: 1.78rem;
    width: 0.51rem !important;
    height: 0.95rem !important;
  }

  .swiper-right-btn {
    display: block;
    position: absolute;
    right: 0;
    top: 1.78rem;
    width: 0.51rem !important;
    height: 0.95rem !important;
  }

  .swiper-view{ width:450px; height:230px; overflow:hidden; position:relative; border:1px solid #ddd;  }
		.swiper-view .swiper-container-2{ height:15px; overflow:hidden; position:absolute; right:5px; bottom:5px; z-index:1; }
		.swiper-view .swiper-container-2 ul{ overflow:hidden; zoom:1; float:left;  }
		.swiper-view .swiper-container-2 ul li{ float:left; margin-right:2px;  width:15px; height:15px; line-height:14px; text-align:center; background:#fff; cursor:pointer; }
		.swiper-view .swiper-container-2 ul li.on{ background:#f00; color:#fff; }
		.swiper-view .swiper-container-2{ position:relative; height:100%; z-index:0;   }
		.swiper-view .swiper-container-2 li{ zoom:1; vertical-align:middle; }
		.swiper-view .swiper-container-2 img{ width:450px; height:230px; display:block;  }
}