#site-header{
	z-index: 999;
	-webkit-transition: 0.4s ease;
	transition: 0.4s all;
	background: #fff;

	display: block;
	width: 100%;

	box-shadow: -1px 0px 20px 5px rgb(0 0 0 / 4%);
}

#site-header.sticky {
	top: 0;
	left: 0;
	position: fixed;
	margin-top: 0!important;
	display: block;
	width: 100%;
}

#logo-header > div > div > a > img {
	width: 100px;
	transition: 0.4s ease;
}

#site-header.sticky #logo-header > div > div > a > img {
	width: 80px;
}

#site-header nav > ul > li > a {
	cursor: pointer;
}



/*RESPONSIVE*/

/*phone*/
@media (max-width: 767px) {
	#site-header {
		padding: 0 2%;
	}
}

/*tablet*/
@media (min-width: 768px) and (max-width: 1024px) {
	#site-header {
		padding: 0 1%;
	}


}

/*mobile and tablet*/
@media (max-width: 1024px) {
	#site-header nav {
		border: none;
	}

	#site-header nav  {
		top: 30px !important;
	}

	#site-header.sticky nav  {
		top: 25px !important;
	}

	#site-header > div > div > div > div > div > div > div > div,
	#site-header > div > div > div > div > div > div > div > div:focus {
		border: none!important;
		outline: none!important;
	}
}

/*desktop*/
@media (min-width: 1025px) {
	#site-header {
		padding: 0 10%;
	}

	#site-header .sub-menu  {
		margin-top: 35px !important;
	}

	#site-header.sticky .sub-menu  {
		margin-top: 26px !important;
	}

	#site-header nav ul.sub-menu {
		min-width: 100%!important;
	}

	.menu-btn {
		background-color: #6BBE5B;
	}

	.menu-btn a {
		color: #ffffff!important;
	}

}

/*pc portable*/
@media (min-width: 1025px) and (max-width: 1700px) {
	#site-header {
		padding: 0 5%;
	}

	#site-header nav > ul > li > a {
		padding: 13px 12px;
		font-size: 10px;
	}

	#site-header .sub-menu  {
		margin-top: 36px !important;
	}

	#site-header.sticky .sub-menu  {
		margin-top: 25px !important;
	}
}



/*RESPONSIVE*/