﻿.carousel_wrap { height:auto; position:relative; margin-bottom:30px; width:90%; margin:0 auto;}
/*--water_whjeel_carousel--*/
#carousel img{opacity:1; width:395px; height:330px; max-width:395px!important;}
#carousel{max-width:auto; margin:0px auto; margin-top:15px; height:350px; position:relative; clear:both; overflow:hidden;}
#carousel > div {visibility:hidden; cursor:pointer;
-webkit-box-shadow: 0px 0px 8px 0px rgba(102,102,102,1);
-moz-box-shadow: 0px 0px 8px 0px rgba(102,102,102,1);
box-shadow: 0px 0px 8px 0px rgba(102,102,102,1);}
#carousel .caption {position: absolute; /*background-color:#FFF;*/ top:0px; left:0px; height:100%;width:100%;}
.carous_item {position:absolute; height:100%; width:100%;/*padding:0px 15px;*/ padding:0px; box-sizing:border-box; display:block;}
.carous_desc {position:absolute; display:block; text-align:center; font-size:14px; height:100%; font-weight:400; line-height:16px; padding:0px 15px;padding-left:0px;color:#8A8A8A;margin-bottom:15px;top:0px;}
.carousel_wrap .nav_button {position:absolute; left:0px; top:50%; margin-top:-30px; height:60px; width:30px; right:0px; font-size:40px;font-weight:600;color:#F00;cursor:pointer;display:inline-block;background-position:center center;background-repeat:no-repeat;background-size:cover;transition:all 0.3s ease;}
.carousel_wrap .nav_button.prev_button {left:-20px;}
.carousel_wrap .nav_button.next_button {left:auto; right:-20px;}
.topselarea1 {overflow:auto; background:#fff; border-radius:5px; box-shadow:0px 0px 1px; margin:0em .3em!important;}

@media only screen and (max-width: 1024px){
.carousel_wrap .nav_button.prev_button{left:-40px;}
.carousel_wrap .nav_button.next_button{left:auto; right:-40px;}
.topselarea1 {overflow: auto; background: #fff; border-radius: 5px; box-shadow: 0px 0px 1px; margin: 0.5em .3em!important;}
.controw1 {margin-top: 27em !important;}
.topselarea1 {margin: 0.5em .3em!important;}
}


@media only screen and (max-width: 1440px){
.controw1 {margin-top: 30em !important; margin: 0;}
topselarea1 {overflow: auto; background: #fff; border-radius: 5px; box-shadow: 0px 0px 1px; margin: -0.5em .3em!important;}
}

@media only screen and (max-width: 1360px){
.controw1 {margin-top: 29em !important;}
.controw4 {margin-top: 1em !important;}
}


@media only screen and (max-width: 1280px){
.controw1 {margin-top: 29em;}
}

@media only screen and (max-width: 960px){
.topselarea1 {margin:0.5em .3em!important}
.controw1 {margin-top: 29em !important;}
}
@media only screen and (max-width: 800px){
.topselarea1 {margin:20em .3em!important;}
.carousel_wrap .nav_button.prev_button{left:-32px;}
.carousel_wrap .nav_button.next_button{left:auto; right:-32px;}
.controw1 {margin-top: 7.5em !important;}
}
@media only screen and (max-width: 768px){
.carousel_wrap .nav_button.prev_button{left:-33px;}
.carousel_wrap .nav_button.next_button{left:auto; right:-33px;}
.topselarea1 {margin:0.5em .3em!important;}
.controw1 {margin-top: 26.2em !important;}
}
@media only screen and (max-width: 640px){
.topselarea1 {margin:1em .3em!important;}
.carousel_wrap .nav_button.prev_button{left:-27px;}
.carousel_wrap .nav_button.next_button{left:auto; right:-30px;}
.controw1 {margin-top: 25em !important;}
}
@media only screen and (max-width: 600px){
.topselarea1 {margin:1em .3em!important;}
}
@media screen and (max-width: 480px) {
#carousel img{width:360px; height:290px;}
#carousel{margin-top:0px; height:330px;}
#prev{display:none;}
#next{display:none;}
.controw1 {margin-top: 22em !important;}
}
@media screen and (max-width: 425px) {
#carousel img{width:340px; height:270px;}
#carousel {margin-top: 4px; height: 294px;}
.topselarea1 {margin:1em .3em!important;}
.controw1 {margin-top: 19.5em !important;}
}
@media screen and (max-width: 414px) {
#carousel img{width:320px; height:265px;}
.controw1 {margin-top: 19.5em !important;}
}
@media screen and (max-width: 375px) {
#carousel img{width:320px; height:270px;}
#carousel > div{top:0px!important;}
#carousel {margin-top: 15px; height: 271px;}
.controw1 {margin-top: 19.5em !important;}

}
@media screen and (max-width: 360px) {
#carousel img{width:280px; height:260px;} 
#carousel{margin-top:20px; height:280px;}
.topselarea1{margin:0.5em .3em!important;}
.controw1 {margin-top: 23em !important;}
}
@media screen and (max-width: 360px) {
#carousel img{width:288px; height:223px;}
#carousel{margin-top:13px; height:239px;}
}
@media screen and (max-width: 320px) {
.controw1 {margin-top: 19em!important;}
#carousel img{width:267px; height:215px;} 
#carousel{margin-top:13px; height:230px;}
.controw1 {margin-top: 22.5em !important;}
}