.slider-group {
  float: left;
  width: 100%;
  text-align: center;
  margin-top: 40px;
  margin-bottom: 80px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.slider {
  position: relative;
  overflow: hidden;
}

.reference {
  width: 100%;
}

.sd-img {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.sd-left span, .sd-right span {
  background-image: url("../image/icon/arrow.png");
}

.img_right, .img_left {
  position: absolute;
  width: 50%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.img_left {
  left: 0;
}

.img_right {
  right: 0;
}

.layout_img {
  height: 550px;
  position: relative;
}

.quote {
  height: 500px;
  background-color: #f2f2f2;
}

.sd-img {
  cursor: default;
}

/*.sd-left span, .sd-right span{
	background-image: none;
}*/
.sd-left, .sd-right {
  width: 80px;
  height: 100%;
  position: absolute;
  top: 0;
  right: 5px;
  cursor: pointer;
  overflow: hidden;
  z-index: 7;
}

.sd-left {
  left: 5px;
  right: auto;
}

.sd-left span, .sd-right span {
  height: 48px;
  width: 28px;
  left: 15px;
  top: 0px;
  bottom: 0px;
  margin: auto;
  position: absolute;
  background-position: left 0px;
  background-repeat: no-repeat;
}

.sd-right span {
  background-position: right 0px;
  left: auto;
  right: 15px;
}

.slider:hover .sd-left span, .slider:hover .sd-right span {
  opacity: 0.8;
}

.slider:hover .sd-left:hover span, .slider:hover .sd-right:hover span {
  opacity: 1;
}

.sd-left span, .sd-right span, .slider:hover .sd-left span, .slider:hover .sd-right span,
.sd-left:hover span, .sd-right:hover span, .video_recent li:hover div, .video_recent li div {
  -webkit-transition: opacity 0.25s ease-in-out;
  -moz-transition: opacity 0.25s ease-in-out;
  -ms-transition: opacity 0.25s ease-in-out;
  -o-transition: opacity 0.25s ease-in-out;
  transition: opacity 0.25s ease-in-out;
}

@media screen and (max-width: 550px) {
  .slider-group {
    margin-bottom: 30px;
  }
}