#header #header-wrap #logo a>img {
    vertical-align: inherit;
    transition: all .4s ease-in-out;
    height: 120px;
    width: auto;
}
.slide-caption{
	top: 34%;
	bottom: initial;
}
.owl-carousel .owl-controls .owl-dots {
    margin-bottom: -34px;
    margin-top: 20px;
    position: relative;
}
.slide-caption .htitle, 
.banner-caption .htitle{ 
	color: #fff; 
	font-size: 5rem; 
	font-weight: 700;
}
.slide-caption .htitle span, 
.banner-caption .htitle span{ 
	padding: 0 30px; 
	color: #0e1014;
	background-color: var(--main-bg-color);
}
.slide-caption .btn, 
.banner-caption .btn{
	display: inline-block;
	border: 2px solid #000;
	line-height: 60px;
	font-size: 2rem;
	padding: 0 30px;
	color: #000;
	background: transparent;
}
.slide-caption .btn:hover, 
.banner-caption .btn:hover{
	background-color: var(--main-bg-color);
	color: #ffffff;
	z-index: 1;
}
.slide-caption .btn:hover:before{ display: none;}


@media(max-width: 1112px){
	.slide-caption{ width: 80%;}
}
@media(max-width: 768px){
	.slide-caption .htitle{ font-size: 3.5rem;}
}
@media(max-width: 480px){
    #header #logo>a {
        display: inline-block;
        left: -38%;
        position: relative;
        top: -5px;
    }
    .slide-caption p {
    font-size: 9px;
}

		#header #header-wrap #logo a>img {
    vertical-align: inherit;
    transition: all .4s ease-in-out;
    height: 60px;
    width: auto;
}
	#header.header-transparent #header-wrap #logo{ top: 5px;}
	.slide-caption .htitle{ font-size: 1.5em;}
	.slide-caption{ top: 35%;}
	.slide-caption .btn{ line-height: 24px; font-size: 1rem;}
	.slide-caption .htitle span{ padding: 0 10px;}
}
@media(max-width: 320px){
	.slide-caption .btn{ font-size: 1rem; padding: 0 15px;}
}
#suop--ele___headBanner {
    position: relative;
    top: -80px;
    margin-bottom: -80px;
}