.owl-carousel .owl-wrapper:after{content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;} /* display none until init*/ .owl-carousel{display: none;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%;display:block; padding:0px; margin:0px;} .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(../images/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-theme .owl-controls{margin-top: 0px;text-align: center; } .owl-theme .owl-controls .owl-buttons{ height:0px;} .owl-theme .owl-controls .owl-buttons div{display: inline-block;zoom: 1;*display: inline;/*IE7 life-saver*/margin: 0px;padding:0px;background: #869791;} .owl-theme .owl-controls.clickable{display:block; padding:0px; width:auto; margin:0px auto;} .owl-theme .owl-controls.clickable .owl-buttons div:hover{ } .owl-theme .owl-controls .owl-page{display: inline-block;zoom: 1;*display: inline;/*IE7 life-saver*/} .owl-theme .owl-controls .owl-page span{display: block;width: 12px;height: 12px;margin: 5px 7px;filter: Alpha(Opacity=100);/*IE7 fix*/opacity: 1;-webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;background: #000;} .owl-theme .owl-controls .owl-page.active span, .owl-theme .owl-controls.clickable .owl-page:hover span{} .owl-theme .owl-controls.clickable .owl-buttons div.owl-more{ background:none} .owl-theme .owl-controls.clickable .owl-buttons div.owl-more:hover{ background:none} .owl-theme .owl-controls.clickable .owl-buttons div.owl-more a{ display:inline-block; width:20px; height:10px; background:#F00} .owl-theme .owl-controls.clickable .owl-buttons div.owl-more a:hover{ background:#000} .owl-theme .owl-controls .owl-page span.owl-numbers{height: auto;width: auto;color: #FFF;padding: 2px 10px;font-size: 12px;-webkit-border-radius: 30px;-moz-border-radius: 30px;border-radius: 30px;} /* preloading images*/ .owl-item.loading{min-height: 150px;background: url(../images/AjaxLoader.gif) no-repeat center center} .owl-theme .owl-pagination{ height:0px; margin:0px; padding:0px;} #owl-hdp .item{ margin: 0px;} #owl-hdp .item img{ display: block; width: 100%;height: auto;} #owl-hdp{ text-align:center; } #owl-hdp .owl-wrapper-outer{ display:block; padding:0px; margin:0px} #owl-hdp .owl-controls.clickable{ display:block; padding:0px; width:auto; margin:0px auto; } #owl-hdp .owl-controls .owl-buttons{ height:0px;} #owl-hdp .owl-controls .owl-buttons div{margin: 0px;padding: 0px;} #owl-hdp .owl-controls{ margin-top:0px; } #owl-hdp .owl-pagination{ height:0px; margin:0px; padding:0px;} #owl-hdp .owl-controls{ /*float:right; margin-right:30px;*/} #owl-hdp .owl-controls.clickable{ /*padding-right:30px;*/} #owl-hdp .owl-controls .owl-buttons div.owl-prev{ position:absolute; left:10px; top:50%; margin:0px; padding:0px; display:block; width:57px; height:99px; background:url(../../images/arrow-left_3.png) 0px center no-repeat; margin-top:-49px; } #owl-hdp .owl-controls .owl-buttons div.owl-next{ position:absolute; right:10px; top:50%;margin:0px; padding:0px; display:block; width:57px; height:99px; background:url(../../images/arrow-right_3.png) right center no-repeat; margin-top:-49px;} #owl-hdp .owl-controls .owl-buttons div.owl-prev:hover{} #owl-hdp .owl-controls .owl-buttons div.owl-next:hover{} #owl-hdp .owl-controls .owl-page{ position:relative; top:-40px; } #owl-hdp .owl-controls .owl-page span{margin:0px 7px; width: 14px; border-radius:14px; height: 14px; background: #fff; opacity: .8; margin: 0 8px;} #owl-hdp .owl-controls .owl-page.active span, #owl-hdp .owl-controls.clickable .owl-page:hover span{background:#DD751F} #owl-hdp .owl-controls.clickable .owl-buttons div.owl-more{ display:none} #owl-hdp .owl-controls.clickable .owl-buttons div.owl-more:hover{} #owl-hdp .owl-controls.clickable .owl-buttons div.owl-more a{} #owl-hdp .owl-controls.clickable .owl-buttons div.owl-more a:hover{} #owl-demo{ display:block; margin:auto; overflow-y:visible!important; } #owl-demo .item{margin: 0px 0px; position:relative;overflow-y:visible!important;} #owl-demo .owl-controls .owl-buttons div.owl-prev{ position:absolute; left:10px; top:50%; margin:0px; padding:0px; display:block; width:40px; height:74px; background:url(../../images/hdp/l.png) no-repeat; margin-top:-37px; display:none} #owl-demo .owl-controls .owl-buttons div.owl-next{ position:absolute; right:10px; top:50%;margin:0px; padding:0px; display:block; width:40px; height:74px; background:url(../../images/hdp/r.png) no-repeat; margin-top:-37px; display:none} #owl-demo .owl-controls .owl-buttons div.owl-prev:hover{background:url(../../images/hdp/ll.png) no-repeat;} #owl-demo .owl-controls .owl-buttons div.owl-next:hover{background:url(../../images/hdp/rr.png) no-repeat;} #owl-demo .owl-controls .owl-page{ position:relative; bottom:40px; } #owl-demo .owl-controls .owl-page span{margin:0px 7px; width: 14px; border-radius:14px; height: 14px; background: #ccc; opacity: .8; margin: 0 8px;} #owl-demo .owl-controls .owl-page.active span, #owl-demo .owl-controls.clickable .owl-page:hover span{background:#DD751F} #owl-demo .owl-controls.clickable .owl-buttons div.owl-more{ display:none} #owl-demo .owl-controls.clickable .owl-buttons div.owl-more:hover{} #owl-demo .owl-controls.clickable .owl-buttons div.owl-more a{} #owl-demo .owl-controls.clickable .owl-buttons div.owl-more a:hover{} #owl-demo .owl-controls.clickable .owl-buttons div.owl-more{ position:relative; padding:0px; margin:0px; display:none} #owl-demo .owl-controls.clickable .owl-buttons div.owl-more:hover{} #owl-demo .owl-controls.clickable .owl-buttons div.owl-more a{} #owl-demo .owl-controls.clickable .owl-buttons div.owl-more a:hover{} .products .swiper-slide .text .cell b{ width:18px; display:block; padding-left:76px; float:left} .products .swiper-slide .text .cell span{width:18px; display:block; float:left} .owl-demo-common{} .owl-demo-common .item{margin: 3px;} .owl-demo-common .item img{display: block;width: 100%;height: auto;} /*单独控制上一个下一个按钮*/ .owl-demo-common .owl-controls .owl-buttons div.owl-prev{ transition:All 0.4s ease;-webkit-transition:All 0.4s ease;-moz-transition:All 0.4s ease;-o-transition:All 0.4s ease; background-image: url(../../images/lll.png); background-repeat:no-repeat; left: 0px; position: absolute; width: 26px; height: 30px; top: 50%; margin-top:-13px; font-size: 0; z-index: 5; background-position: center center; -webkit-background-size: cover; background-size: auto auto;background-size:cover; background-color: transparent; /* display: none; */ -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s; } .owl-demo-common .owl-controls .owl-buttons div.owl-next{ transition:All 0.4s ease;-webkit-transition:All 0.4s ease;-moz-transition:All 0.4s ease;-o-transition:All 0.4s ease; background-image: url(../../images/rrr.png);background-repeat:no-repeat; right: 0px; position: absolute; width: 26px; height: 30px; top: 50%; margin-top:-13px; font-size: 0; z-index: 5; background-position: center center; -webkit-background-size: cover; background-size: auto auto;background-size:cover; background-color: transparent; /* display: none; */ -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s; } .owl-demo-common .owl-controls .owl-buttons div.owl-next:hover,.owl-demo-common .owl-controls .owl-buttons div.owl-prev:hover{ -webkit-border-radius:3px; -o-border-radius:3px;border-radius:3px; transform: rotate(0deg) scale(1.1); -webkit-transform: rotate(0deg) scale(1.1); -moz-transform: rotate(0deg) scale(1.1); -o-transform: rotate(0deg) scale(1.1); -ms-transform: rotate(0deg) scale(1.1); } /*单独控制小球按钮*/ .owl-demo-common .owl-controls .owl-page{position:relative;display:none; } .owl-demo-common .owl-controls .owl-page span{} .owl-demo-common .owl-controls .owl-page.active span, .owl-demo-common .owl-controls.clickable .owl-page:hover span{} /*单独更多按钮样式和鼠标滑过及单击公共样式*/ .owl-demo-common .owl-controls.clickable .owl-buttons div.owl-more{display:none; position:relative; padding:0px; margin:0px;}/*可以改变位置的或是否显示*/ .owl-demo-common .owl-controls.clickable .owl-buttons div.owl-more:hover{}/*不要动*/ .owl-demo-common .owl-controls.clickable .owl-buttons div.owl-more a{} .owl-demo-common .owl-controls.clickable .owl-buttons div.owl-more a:hover{} @media only screen and (max-width:767px){ #owl-hdp .owl-controls .owl-buttons div.owl-prev{ position:absolute; left:10px; top:50%; margin:0px; padding:0px; display:block; margin-top:-14px;width:16px; height:27px; background:url(../../images/l.png) 0px center no-repeat; } #owl-hdp .owl-controls .owl-buttons div.owl-next{ position:absolute; right:10px; top:50%; margin:0px; padding:0px;margin-top:-14px; display:block; width:16px; height:27px; background:url(../../images/r.png) right center no-repeat; } } @media only screen and (max-width:500px){ .products .swiper-slide .text .cell b{ padding-left:50px; float:left; text-align:center} .products .swiper-slide .text .cell span{ display:block; padding-right:56px; float:right; text-align:center} } @media only screen and (max-width:330px){ .products .swiper-slide .text .cell b{ padding-left:40px; } .products .swiper-slide .text .cell span{ padding-right:46px; } }