| Current Path : /home/zqegovsj/www/us3web.haibo.com.cn/beiresthetic/css/ |
| Current File : /home/zqegovsj/www/us3web.haibo.com.cn/beiresthetic/css/bootstrap-touch-slider.css |
/*******bootstrap-touch-slider********/
.slide_content{position:relative;z-index:555; overflow:hidden; width:100%; }
/* SVG wrap */
.bs-slider{
}
/*.bs-slider:hover {
cursor: -moz-grab;
cursor: -webkit-grab;
}
.bs-slider:active {
cursor: -moz-grabbing;
cursor: -webkit-grabbing;
}*/
.bs-slider .bs-slider-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.40);
}
.bs-slider > .carousel-inner > .item > img,
.bs-slider > .carousel-inner > .item > a > img {
margin: auto;
width: 100% !important;
}
/*************************Slide effect**********************/
.fade {
opacity: 1;
}
.fade .item {
top: 0;
z-index: 1;
opacity: 0;
width: 100%;
position: absolute;
left: 0 !important;
display: block !important;
-webkit-transition: opacity ease-in-out 1s;
-moz-transition: opacity ease-in-out 1s;
-ms-transition: opacity ease-in-out 1s;
-o-transition: opacity ease-in-out 1s;
transition: opacity ease-in-out 1s;
}
.fade .item:first-child {
top: auto;
position: relative;
}
.fade .item.active {
opacity: 1;
z-index: 2;
-webkit-transition: opacity ease-in-out 1s;
-moz-transition: opacity ease-in-out 1s;
-ms-transition: opacity ease-in-out 1s;
-o-transition: opacity ease-in-out 1s;
transition: opacity ease-in-out 1s;
}
/*---------- LEFT/RIGHT ROUND CONTROL ----------*/
.control-round .carousel-control {
top:auto;
bottom: 0;
z-index: 100;
color: #333;
display: block;
cursor: pointer;
overflow: hidden;
text-shadow: none;
position: absolute;
background: transparent;
right:200px;
left:auto;
top:45%;bottom:auto;right:auto;left:auto;filter:alpha(opacity=50);-moz-opacity:0.5;opacity:0.5;
}
.control-round .carousel-control.left{left:-80px;background: #999;-webkit-transition:all var(--transition-time,800ms);
-o-transition:all var(--transition-time,800ms);
transition:all var(--transition-time,800ms);}
.control-round .carousel-control.right{right:-80px;background: #999;-webkit-transition:all var(--transition-time,800ms);
-o-transition:all var(--transition-time,800ms);
transition:all var(--transition-time,800ms);}
.slide_content:hover .control-round .carousel-control.left{left:0;filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8;}
.slide_content:hover .control-round .carousel-control.right{right:0;filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8;}
.control-round .carousel-control.left:hover,
.control-round .carousel-control.right:hover{
border: 0px transparent;
}
.control-round .carousel-control.left{margin-right:81px;}
.control-round .carousel-control.left:before{font-family:FontAwesome;content:"\f177";color:#fff;}
.control-round .carousel-control.right:before{font-family:FontAwesome;content:"\f178";color:#fff;}
.control-round .carousel-control {
margin: 0 20px;
padding: 0; line-height:50px;
width: 50px;
height: 50px;
-webkit-transition: width 0.3s, background-color 0.3s;
transition: width 0.3s, background-color 0.3s;
opacity:0.6;
filter:alpha(opacity=60);
-moz-opacity:0.6;
border-radius:50%;
background: #999;
}
}
.carousel-control .icon-wrap {
position: absolute;
width: 32px;
}
.carousel-control.left .icon-wrap {
left: 15px;
}
.carousel-control.right .icon-wrap {
right: 15px;
}
.carousel-control h3 {
position: absolute;
top: 0;
margin: 0;
color: #000;
text-transform: uppercase;
white-space: nowrap;
font-size:16px;
line-height:42px;
opacity: 0;
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
color:#333;
}
.carousel-control.left h3 {
right: 50px;
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
.carousel-control.right h3 {
left: 50px;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
.control-round .carousel-control:hover {
opacity:1;
filter:alpha(opacity=100);
-moz-opacity:1;
}
.control-round .carousel-control.left:hover:before,.control-round .carousel-control.right:hover:before{color:#fff;}
.carousel-control:hover h3 {
opacity: 1;
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
-webkit-transform: translateX(0);
transform: translateX(0);
}
/*---------- INDICATORS CONTROL ----------*/
.indicators-line > .carousel-indicators{
left: 13%;
bottom: 20%;
width: auto;
max-width:1400px;
height: 40px;
font-size: 0;
overflow-x: auto;
text-align: right;
overflow-y: hidden;
padding-left: 10px;
padding-right: 10px;
padding-top: 1px;
white-space: nowrap;
margin-left:0;
}
.indicators-line > .carousel-indicators li{
color:#b2b2b2;
background:none;
margin:0 20px;
display:inline-block;
font-size:20px;
line-height:24px;
border:none;
width:auto;
height:auto;
}
.indicators-line > .carousel-indicators li:last-child{
margin-right: 0;
}
.indicators-line > .carousel-indicators .active{
color:#62a70f;
}
/*---------- SLIDE CAPTION ----------*/
.slide_style_left {
text-align: left !important;
}
.slide_style_right {
text-align: left !important;
}
.slide_style_center {
text-align: center !important;
}
.slide-text { position:absolute; top:26% ; left:0; width:100%}
.slide-text-m{ margin: auto;
text-align: center; position:relative;
padding:52px 55px 52px; background:rgba(0,0,0,0.35);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
width:100%; max-width:930px;}
.slide-text .slide-text-m{ text-align:center;}
.slide-text .slide-text-m h4{font-family: 'poppins-semibold'; color:#ffffff; font-size:40px;line-height:60px; position:relative;z-index:2;margin-bottom:20px; text-transform:capitalize; position:relative; padding: 0 52px;}
.slide-text .slide-text-m p{ color:#ffffff; font-size:20px;line-height:28px; max-height:56px; overflow:hidden; position:relative;z-index:2; position:relative}
.slide-bottom:before{content:"\f107";display:inline-block;font-family:'FontAwesome';position:absolute;left:50%;bottom:0;font-size:36px;color:#fff;margin-left:-15px;z-index:999;}
.slide_content .slide_main{background:#eb6100;background:rgba(0,185,242,0.8);padding:40px 60px;width:50%;max-width:750px;position:absolute;left:0;bottom:-20px;z-index:99999999;}
.slide_content .slide_main p{width:60%;float:right;color:#ffffff;font-size:30px;line-height:42px;text-align:left;}
/*------------------------------------------------------*/
/* RESPONSIVE
/*------------------------------------------------------*/
@media (max-width:1400px) {
.indicators-line > .carousel-indicators{left:20px;bottom:40px;}
}
@media (max-width: 1199px) {
.slide-text{ top:20%}
.slide-text .slide-text-m h4{ font-size:34px; line-height:50px; padding:0}
.slide-text .slide-text-m p{ font-size:16px; line-height:24px;max-height:48px;}
.slide-text-m:after{ display:none}
.slide-text-m{ max-width:730px; padding:40px 25px 40px}
}
@media (max-width:992px) {
.slide_content{overflow:hidden;}
.
.control-round .carousel-control{top:40%;width:30px;margin:0 20px;height:50px;}
.control-round .carousel-control.left:before,.control-round .carousel-control.right:before{line-height:50px;}
.control-round .carousel-control.left{left:-25px;border-radius:0;}
.control-round .carousel-control.right{right:-25px;border-radius:0;}
.slide-bottom:before{display:none;}
.indicators-line > .carousel-indicators{left:50%;margin-left:-50px;bottom:0;}
.indicators-line > .carousel-indicators li{font-size:16px;margin:0 18px;}
.slide_content > .line{height:60px;background-size:cover;}
}
@media (max-width:768px) {
.slide_content .waveWrapper{bottom:-80px;}
.slide-text-m{ padding:30px 15px 30px;max-width:500px; }
.slide-text{ top:10%}
.slide-text .slide-text-m h4{ font-size:24px; line-height:34px; padding:0}
.slide-text .slide-text-m p{ font-size:14px; }
}
@media (max-width:560px) {
.indicators-line > .carousel-indicators{margin-bottom:0;width:100%;}
.slide_content > .line{height:40px;}
.slide_content .waveWrapper{display:none;}
}
@media (max-width:440px) {
.slide-text { display:none}
}
.tp-mask-wrap{z-index:99999;left:50%;transform: translate(-50%, 0);-webkit-transform: translate(-50%,0);position: absolute;bottom:30px;display: block;overflow: hidden;}
.slider-scroll-button {position: relative;width: 57px;height: 57px;border-radius: 100%;display:inline-block;z-index: 5; visibility: inherit; transition: none 0s ease 0s; text-align: inherit; line-height: 14px; border-width: 0px; margin: 0px; padding: 0px; letter-spacing: 0px; font-weight: 400; font-size: 8px; white-space: nowrap; min-height: 0px; min-width: 0px; max-height: none; max-width: none; opacity: 1; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform-origin: 50% 50% 0px;}
.slider-scroll-button:before{
content:'';position:absolute;top:50%;left:49%;width:23px;height:34px;border:1px solid #999;border-radius:15px;transform:translate3d(-50%, -50%, 0);-webkit-transform:translate3d(-50%, -50%, 0);
}
.slider-scroll-button:after{
content:'';width:6px;height:10px;border-radius:10px;border:1px solid #999;position:absolute;top:19px;left:49%;transform:translate3d(-50%, 0, 0);-webkit-transform:translate3d(-50%, 0, 0);
-webkit-animation-name:sliderScrollButton;
animation-name:sliderScrollButton;
-webkit-animation-duration:2s;
animation-duration:2s;
-webkit-animation-iteration-count:infinite;
animation-iteration-count:infinite;
}
/* Slider Scroll Button Animation */
@-webkit-keyframes sliderScrollButton {
0% {
opacity: 1;
-webkit-transform: translate3d(-50%, 0, 0);
transform: translate3d(-50%, 0, 0);
}
70% {
opacity: 1;
-webkit-transform: translate3d(-50%, 10px, 0);
transform: translate3d(-50%, 10px, 0);
}
100% {
opacity: 0;
-webkit-transform: translate3d(-50%, 10px, 0);
transform: translate3d(-50%, 10px, 0);
}
}
@keyframes sliderScrollButton {
0% {
opacity: 1;
-webkit-transform: translate3d(-50%, 0, 0);
transform: translate3d(-50%, 0, 0);
}
70% {
opacity: 1;
-webkit-transform: translate3d(-50%, 10px, 0);
transform: translate3d(-50%, 10px, 0);
}
100% {
opacity: 0;
-webkit-transform: translate3d(-50%, 10px, 0);
transform: translate3d(-50%, 10px, 0);
}
}
@media only screen and (max-width: 992px) {
.tp-mask-wrap{display:none;}
}