﻿.bs-slider{overflow: hidden; max-height:680px;  position: relative; width:100%;}
.bs-slider .bs-slider-overlay { position: absolute; top: 0; left: 0;  width: 100%;  height: 100%;}
.bs-slider > .carousel-inner > .item > img,.bs-slider > .carousel-inner > .item > a > img { margin: auto; width: 100% !important;}
.slide-image{ width:100%; height:680px;}

/********************
*****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;
}
.control-round .carousel-control {top: 47%; opacity: 0; width: 50px; height: 50px; z-index: 100; color: #fff; display: block; font-size: 24px; cursor: pointer; overflow: hidden; line-height: 50px; text-shadow: none; position: absolute; font-weight: normal; background: transparent;   -webkit-border-radius: 50%;  border-radius:50%;}
.control-round .carousel-control{opacity: 1;}
.control-round .carousel-control.left { left: 1%;}
.control-round .carousel-control.right {right: 1%;}
.control-round .carousel-control.left,.control-round .carousel-control.right{color: #fff; background: rgba(0, 0, 0, 0.5); border: 0px transparent; text-align:center; line-height:50px;}
.control-round .carousel-control.left>span:nth-child(1){ left: 45%;line-height: 50px; height:50px;}
.control-round .carousel-control.right>span:nth-child(1){ right: 45%;line-height: 50px; height:50px;}
.indicators-line > .carousel-indicators{ position:absolute; width:100%; bottom:25px; height: 20px; text-align:center;}
.indicators-line > .carousel-indicators li{ width:60px; height:3px; overflow: hidden;position: relative; background: rgb(255, 255, 255); z-index: 10;display:inline-block; cursor:pointer; margin:0 2px;}
.indicators-line > .carousel-indicators li:last-child{ margin-right: 0;}
.indicators-line > .carousel-indicators .active{margin: 0px 2px; background: rgb(245, 0, 23);position: relative;
    -webkit-transition: box-shadow 0.3s ease;
    -moz-transition: box-shadow 0.3s ease;
    -o-transition: box-shadow 0.3s ease;
    transition: box-shadow 0.3s ease;
    -webkit-transition: background-color 0.3s ease;
    -moz-transition: background-color 0.3s ease;
    -o-transition: background-color 0.3s ease;
    transition: background-color 0.3s ease;

}


/*---------- SLIDE CAPTION ----------*/
.slide_style_left { text-align: left !important;}
.slide_style_right {text-align: right !important;}
.slide_style_center {text-align: center !important;}
.slide-text {position: relative; margin-top:-680px; width:1300px; max-width:98%; height:680px;}
.slide-text > h1 {padding: 0;color: #fff;font-size: 70px;font-style: normal;line-height: 84px;margin-bottom: 30px;letter-spacing: 1px;display: inline-block;-webkit-animation-delay: 0.7s;animation-delay: 0.7s;}
.slide-text > p {padding: 0;color: #ffffff;font-size: 20px;line-height: 24px;font-weight: 300;margin-bottom: 40px;letter-spacing: 1px;-webkit-animation-delay: 1.1s;animation-delay: 1.1s;}
.slide-text > a.btn-default{color: #000;font-weight: 400;font-size: 13px;line-height: 15px;margin-right: 10px;text-align: center;padding: 17px 30px;white-space: nowrap;letter-spacing: 1px;display: inline-block;border: none;text-transform: uppercase;-webkit-animation-delay: 2s;animation-delay: 2s;
-webkit-transition: background 0.3s ease-in-out, color 0.3s ease-in-out;transition: background 0.3s ease-in-out, color 0.3s ease-in-out;}
.slide-text > a.btn-primary{
    color: #ffffff;
    cursor: pointer;
    font-weight: 400;
    font-size: 13px;
    line-height: 15px;
    margin-left: 10px;
    text-align: center;
    padding: 17px 30px;
    white-space: nowrap;
    letter-spacing: 1px;
    background: #00bfff;
    display: inline-block;
    text-decoration: none;
    text-transform: uppercase;
    border: none;
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
    -webkit-transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
    transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
}
.slide-text > a:hover,
.slide-text > a:active {
    color: #ffffff;
    background: #222222;
    -webkit-transition: background 0.5s ease-in-out, color 0.5s ease-in-out;
    transition: background 0.5s ease-in-out, color 0.5s ease-in-out;
}


.container{ width:1300px; max-width:98%; margin:0 auto; height:680px;}
.bana_a{ position:absolute; top:189px; width:100%; text-align:center;}
.banb_a{ position:absolute; top:182px; left:0px; z-index:9;}
.banb_b{ position:absolute; bottom:0; right:0px;}
.banc_a{ position:absolute; top:182px; right:0px;}
@media screen and (max-width:1024px){
.bs-slider{overflow: hidden; max-height:500px; position:relative; width:100%;}
.slide-image{ width:100%; height:500px; background-size:auto 500px !important;}
.container{ width:100%; margin:0 auto; height:500px;}
.slide-text{ width:100%; height:500px; margin-top:-500px;}
.control-round .carousel-control{ display:none;}
.bana_a{top:120px;}
.banb_a{top:110px; width:60%;}
.banb_a img{ width:100%;}
.banb_b{bottom:50px; width:50%;}
.banb_b img{ width:100%;}
.banc_a{top:132px;}
}
.slide-image img{ display:none;}
@media screen and (max-width:768px){
.bana_a{top:150px; text-align:center;}
.bana_a img{ max-width:100%;}
.banb_a{top:60px; width:100%;}
.banb_b{width:100%;}
.banc_a{top:132px;}
.banc_a img{ width:100%;}
}


.bg-bubbles li {
    position: absolute;
    list-style: none;
    display: block;
    width: 40px;
    height: 40px;
    background-color: rgba(255,255,255,.15);
    bottom: -160px;
    -webkit-animation: square 25s infinite;
    animation: square 25s infinite;
    -webkit-transition-timing-function: linear;
    transition-timing-function: linear;
}
.bg-bubbles li:nth-child(1) {
	left: 10%
}

.bg-bubbles li:nth-child(2) {
	left: 20%;
	width: 80px;
	height: 80px;
	-webkit-animation-delay: 200ms;
	animation-delay: 200ms;
	-webkit-animation-duration: 17s;
	animation-duration: 17s
}

.bg-bubbles li:nth-child(3) {
	left: 25%;
	-webkit-animation-delay: 400ms;
	animation-delay: 400ms
}

.bg-bubbles li:nth-child(4) {
	left: 40%;
	width: 60px;
	height: 60px;
	-webkit-animation-duration: 10s;
	animation-duration: 10s;
	background-color: rgba(255, 255, 255, .25)
}

.bg-bubbles li:nth-child(5) {
	left: 70%
}

.bg-bubbles li:nth-child(6) {
	left: 80%;
	width: 120px;
	height: 120px;
	-webkit-animation-delay: 3s;
	animation-delay: 3s;
	background-color: rgba(255, 255, 255, .2)
}

.bg-bubbles li:nth-child(7) {
	left: 32%;
	width: 100px;
	height: 100px;
	-webkit-animation-delay: 7s;
	animation-delay: 7s
}

.bg-bubbles li:nth-child(8) {
	left: 55%;
	width: 20px;
	height: 20px;
	-webkit-animation-delay: 15s;
	animation-delay: 15s;
	-webkit-animation-duration: 40s;
	animation-duration: 40s
}

.bg-bubbles li:nth-child(9) {
	left: 25%;
	width: 10px;
	height: 10px;
	-webkit-animation-delay: 2s;
	animation-delay: 2s;
	-webkit-animation-duration: 40s;
	animation-duration: 40s;
	background-color: rgba(255, 255, 255, .3)
}

.bg-bubbles li:nth-child(10) {
	left: 90%;
	width: 120px;
	height: 120px;
	-webkit-animation-delay: 11s;
	animation-delay: 11s
}

@-webkit-keyframes square {
	0% {
		-webkit-transform: translateY(0);
		transform: translateY(0)
	}

	100% {
		-webkit-transform: translateY(-700px) rotate(600deg);
		transform: translateY(-700px) rotate(600deg)
	}

}

@keyframes square {
	0% {
		-webkit-transform: translateY(0);
		transform: translateY(0)
	}

	100% {
		-webkit-transform: translateY(-700px) rotate(600deg);
		transform: translateY(-700px) rotate(600deg)
	}

} 
