#header #header-wrap{ border: none;    box-shadow: 0 12px 6px rgba(0,0,0,.06);}
#header #header-wrap #logo a>img{ padding: 8px 0;}

#mainMenu nav>ul>li{ margin-left: 30px;}
#mainMenu nav>ul>li>a {
    font-size: 18px;
    font-weight: bold;
    padding: 0;
    letter-spacing: 0px;
    line-height: 80px;
    display: inline-block;
    font-family: 'Kanit';
    color: #00000a;
}
#mainMenu nav>ul>li.active>a, #mainMenu nav>ul>li.current>a, #mainMenu nav>ul>li.current>span, #mainMenu nav>ul>li.hover-active>a, #mainMenu nav>ul>li.hover-active>span, #mainMenu nav>ul>li:focus>a, #mainMenu nav>ul>li:focus>span, #mainMenu nav>ul>li:hover>a, #mainMenu nav>ul>li:hover>span{
	color: var(--main-text-color);
	background: transparent;
	box-shadow: inset 0px -3px 0px var(--main-code-color);
}
.slide-caption {
    text-align: left;
    width: 50%;
    left: 53%;
    padding-right: 5%;
    bottom: initial;
    top: 37%;
    font-size: 4rem;
}
.slide-caption .htitle {
    margin-bottom: 15px;
    color: #202020;
    font-weight: 800;
    letter-spacing: 0;
    font-size: 50px;
    font-family: kanit;
    font-weight: 400;
}
.slide-caption .stitle{ font-size: 4rem; margin: 0; line-height: 1; font-weight: 400;}
.slide-caption p {
    font-size: 1.45rem;
    font-family: kanit;
    text-align: center;
}

a.btn.btn-plain { font-family: kanit;}

@media screen and (min-width: 1024px) and (max-width: 1279px) {
    .slide-caption .htitle {
    margin-bottom: 15px;
    color: #202020;
    font-weight: 800;
    letter-spacing: 0;
    font-size: 33px;
    font-family: kanit;
    font-weight: 400;margin-bottom: 0px;
}
.slide-caption p {
    font-size: 14px;
    font-family: kanit;
    text-align: center;
}



}

@media(max-width: 991px){
	#header +.fullscreen{ 
		top: 0px !important; 
		margin-bottom: 0px !important;
		padding: 0 !important;
		height: auto !important;
	}
	#header.header-transparent #header-wrap #logo{ top: 0;}
	#header #mainMenu-trigger{ width: -webkit-fit-content;}
	#header #mainMenu-trigger button{ float: left;}
	#header #logo>a{height: -webkit-fill-available;}

	#header #mainMenu:not(.menu-overlay) nav>ul>li>a{ padding: 0; line-height: 40px;}

}
@media(max-width: 768px){
	.slide-caption {
    top: 34%;
    width: 49%;
}
	.slide-caption .htitle{ font-size: 2.25rem;}
	.slide-caption p{ font-size: 1.25em;}
}
@media(max-width: 480px){
	.slide-caption .htitle {
    font-size: 12px;
    font-weight: bold;    margin-bottom: 0px;
}
section.block-slider .slide-detail {
    padding: 20px 0px!important;
}
.slide-caption p {
    font-size: 6px;
}
.slide-caption .btn {
    font-size: 10px;
    line-height: 22px;
    letter-spacing: 0;
    padding: 0px 18px;
    left: 23%;
    top: -9px;
}
}
@media(max-width: 320px){
	.slide-caption{ top: 10%; width: 60%;}
	.slide-caption .htitle{ font-size: 1.2rem; margin-bottom: 10px;}
	.slide-caption .btn{ font-size: .9rem; line-height: 32px;letter-spacing: 0; padding: 0 20px;}
}
#suop--ele___headBanner {
    clear: both;
}