.header {border-bottom: 4px; border-style: solid; border-image: linear-gradient(to right, #da7c3f, #508d8a) 1; border-left: 0; border-right: 0; border-top: 0; position: relative; z-index: 10;}
.top-header {padding: 10px 0; background-color: #242424;}
.top-header ul {display: flex; justify-content: flex-end;}
.top-header ul.mobile {display: none;}
.top-header ul li {display: flex; align-items: center; margin-left: 60px;}
.top-header ul li .img {margin-right: 10px; max-width: 27px;}
.top-header ul li .txt p {color: #7e878d;}
.top-header ul li .txt p:first-child {color: #4b4b4b; font-weight: 600; line-height: 17px;}

.nav-header {padding: 15px 0;}
.nav-header .center {display: flex; justify-content: space-between; align-items: center;}
.nav-header .logo {}
.nav-header .logo > a {display: inline-block;}
.nav-header .logo > a > img:first-child {max-height: 55px; margin-right: 15px;}
.nav-header .logo > a > img:nth-child(2) {height: 53px;}

.nav-header .menu-icon {font-size: 26px; line-height: 1; color: #508d8a; cursor: pointer; display: none;}
.nav-header .menu .close {display: none;}
.nav-header .menu ul {display: flex;}
.nav-header .menu li {padding: 0 20px;}
.nav-header .menu li:last-child {padding-right: 0;}
.nav-header .menu li a {font-weight: 600; color: #222222;}
.nav-header .menu li a:hover {color: #4b4b4b;}
.nav-header .menu li.active a {font-weight: 700;}

@media all and (max-width: 1024px){
	.nav-header .menu li {padding: 0 10px;}
}

@media all and (max-width: 940px){
	.nav-header .logo > a > img:first-child {max-height: 40px; margin-right: 5px;}
	.nav-header .logo > a > img:nth-child(2) {height: 40px;}
}

@media all and (max-width: 820px){
	.top-header ul {justify-content: space-between;}
	.top-header ul li {margin-left: 0; flex-direction: column; text-align: center;}
	.top-header ul li .img {margin: 0 0 5px;}
	.top-header ul li img {max-width: 20px; max-height: 20px;}
	.top-header ul li .txt p {font-size: 12px; line-height: 16px;}

	.header .menu ul {
		display: block; position: fixed; left: 0; top: 0; height: 100%; width: 100%; background: rgba(255, 255, 255, 0.9); z-index: 99; text-align: center; padding: 20px 0; overflow: auto;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		-webkit-transform: translateY(-100%);
		-moz-transform: translateY(-100%);
		-ms-transform: translateY(-100%);
		-o-transform: translateY(-100%);
		transform: translateY(-100%);
		-webkit-transition-property: -webkit-transform;
		-moz-transition-property: -moz-transform;
		transition-property: transform;
		-webkit-transition-duration: 0.4s;
		-moz-transition-duration: 0.4s;
		transition-duration: 0.4s;
	}
	.header .menu ul li,
	.header .menu ul li.close {width: 100%; display: block; padding: 15px !important;}
	.header .menu ul li a {font-size: 24px; border: none; padding: 0;}
	.header .menu.show ul {transform: translateY(0); -webkit-transform: translateY(0); display: block;}
	.header .menu-icon {display: block;}
}

@media all and (max-width: 480px){
	.top-header ul {display: none;}
	.top-header ul.mobile {display: flex; justify-content: flex-end;}
	.top-header ul li {flex-direction: row-reverse; text-align: right;}
	.top-header ul li .img {margin: 0 0 0 10px;}
	.top-header ul li img {max-width: 31px; max-height: 31px;}
}

@media all and (max-width: 360px){
	.nav-header .logo > a > img:first-child {max-height: 33px;}
	.nav-header .logo > a > img:nth-child(2) {height: 33px;}
}