
.owl-carousel .owl-wrapper:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
/* display none until init */
.owl-carousel{

	position: relative;
	width: 100%;
	-ms-touch-action: pan-y;
}
.owl-carousel .owl-wrapper{
	display: none;
	position: relative;
	-webkit-transform: translate3d(0px, 0px, 0px);
}
.owl-carousel .owl-wrapper-outer{
	overflow: hidden;
	position: relative;
	width: 100%;
}
.owl-carousel .owl-wrapper-outer.autoHeight{
	-webkit-transition: height 500ms ease-in-out;
	-moz-transition: height 500ms ease-in-out;
	-ms-transition: height 500ms ease-in-out;
	-o-transition: height 500ms ease-in-out;
	transition: height 500ms ease-in-out;
}
	
.owl-carousel .owl-item{
	float: left;
}
.owl-controls .owl-page,
.owl-controls .owl-buttons div{
	cursor: pointer;
}
.owl-controls {
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* mouse grab icon */
.grabbing { 
    cursor:url(grabbing.png) 8 8, move;
}

/* fix */
.owl-carousel  .owl-wrapper,
.owl-carousel  .owl-item{
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility:    hidden;
	-ms-backface-visibility:     hidden;
  -webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
}
#owl-demo{position:relative;width:100%;height:530px;}
#owl-demo .item{ position:relative;display:block;}
#owl-demo img{display:block;width:100%;height:530px;}
#owl-demo b{position:absolute;left:0;bottom:0;width:100%;height:78px;background-color:#000;opacity:.5;filter:alpha(opacity=50);}
#owl-demo span{position:absolute;left:0;bottom:37px;width:100%;font:18px/32px "微软雅黑","黑体";color:#fff;text-align:center;}

.owl-pagination{position:absolute;left:0;bottom:10px;width:100%;height:22px;text-align:center;}
.owl-page{display:inline-block;width:10px;height:10px;margin:0 5px;background:url(../images/bg15.png);*display:inline;*zoom:1;}
.owl-pagination .active{width:25px;background:url(../images/bg16.png);}
.owl-buttons{display:none;}
.owl-buttons div{position:absolute;top:50%;width:40px;height:80px;margin-top:-40px;text-indent:-9999px;}
.owl-prev{left:0;background-image:url(images/bg17.png);}
.owl-next{right:0;background-image:url(images/bg18.png);}
.owl-prev:hover{background-image:url(images/bg19.png);}
.owl-next:hover{background-image:url(images/bg20.png);}








.container {
  display: flex;
  justify-content: center;
  align-items: center; 
  
}

.product_container {
  width:100%;
  height: 350px;
  position: relative;
}

.product {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: #fff;
  box-shadow: -3px 0px 10px -2px rgba(0, 0, 0, 0.14);
  opacity: 0;
  transition: all 1s ease .5s;
}
.product .title {
  font-size: 19px;
  padding-bottom: 10px;
  font-weight: bolder;
}
.product .price {
  font-size: 20px;
}
.product .image { width:100%; overflow:hidden

}

.product > * {
  transform: translateY(-50px);
  opacity: 0;
  transition: all .8s ease;
}

.product:target {
  opacity: 1;
  z-index: 7;
}
.product:target .title {
  transition-delay: 1.2s;
}
.product:target .price {
  transition-delay: .6s;
}
.product:target .image {
  transform: scale(1);
  transition-delay: .8s;
}
.product:target .color {
  transition-delay: 1s;
}

.product:target > * {
  transform: translateY(0px);
  opacity: 1;
  transition: all .8s ease;
}


.nav_btns {
  display: flex;
  z-index: 70;
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}
.nav_btns .link {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin: 5px;
  border: 1px solid white; background:#CCC
}