html,body { margin: 0px; padding: 0px; font-size: 16px; color: #677788;}
a { text-decoration: none; }
a:hover { text-decoration: none; }

.layout-page {width: 1920px; margin: auto;}
.clear { clear: both; }

.web-header {
	height: 102px;
	background-color: #FFF;
	display: flex;
}
.web-header .logo { width: 420px; display: flex; flex-direction: row; align-items: center;}
.web-header .logo img { width: 280px; margin: auto; }

.web-header .other { width: 420px; display: flex; align-items: center;}
.web-header .other .other-stock { width: 100px; text-align: center; color: #A47C45; border-right: solid 1px #EEEFF0;}
.web-header .other .other-version { 
	position: relative;
	width: 140px; 
	height: 102px;
	line-height: 102px;
	text-align: center; 
	border-right: solid 1px #EEEFF0; 
	display: flex; 
	flex-direction: column; 
	align-items: center;
	z-index: 100;
}
.other-version div.current { display: flex; align-items: center; cursor: pointer;}
.other-version .current img { width: 20px; height: 20px;}
.other-version .current span { padding: 0px 5px 0px 10px; }
.other-version:hover .current span { color: #A47C45;}
.other-version .submenu { 
	display: none;
	position: absolute;
	top:  102px;
	left: 0px;
	padding: 10px 0px;
	overflow: hidden;
}
.other-version:hover .submenu{ display: block; animation-name: animationSubMenu; animation-duration: 0.2s;}
.other-version .submenu:before {
	display: block;
	width: 100%;
	height: 100%;
	content: '';
	position: absolute;
	top: 0px;
	left: 0px;
	background-color: #FFF;
	opacity: 0.7;
	z-index: 1;
}
.other-version .submenu div { position: relative; height: 40px; line-height: 40px; z-index: 2;}
.other-version .submenu div:hover { background-color: #FFF; }
.other-version .submenu div a { display: block; color: #677788; padding: 0px 30px; white-space: nowrap;}
.other-version .submenu div:hover a{ color: #A47C45; }

.web-header .other .other-search { flex-grow: 1; display: flex; align-items: center; padding-left: 15px; box-sizing: border-box;}
.other-search img { width: 20px; height: 20px; padding-right: 5px; cursor:pointer;}
.other-search input { border: none; outline:none; font-size: 16px; color: #BCBDC0; font-weight: 400;}
.other-search  input::placeholder{ color: #BCBDC0; font-weight: 400;}       
.other-mobile-nav-btn { display: none; }

.web-header .nav-menu { flex-grow: 1; display: flex; align-items: center; position: relative; z-index: 100;}
.nav-menu .menu-item {
 	text-align: center;
 	padding: 0px 20px;
 	position: relative;
 	height: 102px;
 	line-height: 102px;
 }
.nav-menu .menu-item>a { display: block; height: 102px; line-height: 102px; color: #677788; text-decoration: none;}
.nav-menu .menu-item>a.active { color: #A47C45 !important; }
.nav-menu .menu-item>a:hover { color: #A47C45; }
.nav-menu .menu-item .submenu { 
	display: none; 
	position: absolute;
	left: 0px;
	top:  100px;
	padding: 10px 0px;
	overflow: hidden;
	box-sizing: border-box;
}
@keyframes animationSubMenu {
    from {
        height: 0px;
    }
    to {
        height: 100%;
    }
}
.nav-menu .menu-item:hover .submenu { display: block; animation-name: animationSubMenu; animation-duration: 0.2s;}
.nav-menu .menu-item .submenu:before {
	display: block;
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
	background-color: #FFF;
	opacity: 0.7;
	top: 0px;
	left: 0px;
}
.nav-menu .menu-item .submenu>div {
	position: relative;
	height: 40px;
	line-height: 40px;
	text-align: left;
	z-index: 2;
	cursor: pointer;
}
.nav-menu .menu-item .submenu>div:hover { background-color: #FFF; }
.nav-menu .menu-item .submenu>div a { display: block; color: #677788; padding: 0px 30px; white-space: nowrap;}
.nav-menu .menu-item .submenu>div:hover a{ color: #A47C45; }


.web-footer {
	background: linear-gradient(39deg, #F1E6CE -13%, #F6F4EF 97%);
	padding: 60px 0px 0px 0px;
}
.web-footer .body {
	width: 1600px;
	margin: auto;
	display: flex;
}
.footer-menus {
	width: 1380px;
	display: flex;
	padding-bottom: 30px;
}
.footer-menus .menu-item {width: 230px;}
.footer-menus .menu-item .title { margin-bottom: 30px; }
.footer-menus .menu-item .title  a {color: #524020;}
.footer-menus .menu-item .title  a:hover { text-decoration: underline; }
.footer-menus .menu-item .submenu { line-height: 20px; margin-bottom: 15px; }
.footer-menus .menu-item .submenu a { color: #A18645; font-size: 14px; }
.footer-menus .menu-item .submenu a:hover { text-decoration: none; color: #524020; }

.footer-contact { width: 220px; display: flex; flex-direction: column; padding-bottom: 30px;}
.footer-contact-mobile { display: none; }
.footer-contact label { color: #524020; margin-bottom: 30px; }
.footer-contact img { width: 100px; height: 100px; margin-bottom: 10px; }
.footer-contact p { color: #524020; font-weight: 600; margin: 0px; margin-bottom: 15px;}
.footer-contact a.more { width: 148px; height: 50px; line-height: 50px; background-color: #C9A569; font-size: 14px; color: #FFF; text-align: center; }
.footer-contact a.more:hover { opacity: 0.8; }

.footer-bottom { height: 40px; line-height: 40px; background-color: #EEDFC5; text-align: center; color: #3D3D3D; font-size: 12px; }
.footer-bottom-mobile { display: none; }
.mobile-nav { display: none; }

@media(max-width:1600px){
	html,body { margin: 0px; padding: 0px; font-size: 14px; color: #677788;}
	a { text-decoration: none; }
	a:hover { text-decoration: none; }

	.layout-page {width: 1400px; margin: auto;}
	.clear { clear: both; }

	.web-header {
		height: 102px;
		background-color: #FFF;
		display: flex;
	}
	.web-header .logo { width: 360px; display: flex; flex-direction: row; align-items: center;}
	.web-header .logo img { margin: auto; }

	.web-header .other { width: 360px; display: flex; align-items: center;}
	.web-header .other .other-stock { width: 100px; text-align: center; color: #A47C45; border-right: solid 1px #EEEFF0;}
	.web-header .other .other-version { 
		position: relative;
		width: 140px; 
		height: 102px;
		line-height: 102px;
		text-align: center; 
		border-right: solid 1px #EEEFF0; 
		display: flex; 
		flex-direction: column; 
		align-items: center;
		z-index: 100;
	}
	.other-version div.current { display: flex; align-items: center; cursor: pointer;}
	.other-version .current img { width: 20px; height: 20px;}
	.other-version .current span { padding: 0px 5px 0px 10px; }
	.other-version:hover .current span { color: #A47C45;}
	.other-version .submenu { 
		display: none;
		width:  100%;
		position: absolute;
		top:  102px;
		left: 0px;
		padding: 10px 0px;
		overflow: hidden;
	}
	.other-version:hover .submenu{ display: block; animation-name: animationSubMenu; animation-duration: 0.2s;}
	.other-version .submenu:before {
		display: block;
		width: 100%;
		height: 100%;
		content: '';
		position: absolute;
		top: 0px;
		left: 0px;
		background-color: #FFF;
		opacity: 0.7;
		z-index: 1;
	}
	.other-version .submenu div { position: relative; height: 40px; line-height: 40px; z-index: 2;}
	.other-version .submenu div:hover { background-color: #FFF; }
	.other-version .submenu div a { display: block; color: #677788; padding: 0px 30px; white-space: nowrap;}
	.other-version .submenu div:hover a{ color: #A47C45; }

	.web-header .other .other-search { width: 120px; display: flex; align-items: center; padding-left: 15px; box-sizing: border-box;}
	.other-search img { width: 20px; height: 20px; padding-right: 5px; cursor:pointer;}
	.other-search input { width: 100%; border: none; outline:none; font-size: 16px; color: #BCBDC0; font-weight: 400;}
	.other-search  input::placeholder{ color: #BCBDC0; font-weight: 400;}       
	.other-mobile-nav-btn { display: none; }

	.web-header .nav-menu { flex-grow: 1; display: flex; align-items: center; position: relative; z-index: 100; padding-left: 20px;}
	.nav-menu .menu-item {
	 	text-align: center;
	 	padding: 0px 12px;
	 	position: relative;
	 	height: 102px;
	 	line-height: 102px;
		font-size: 12px;
	 }
	.nav-menu .menu-item>a { display: block; height: 102px; line-height: 102px; color: #677788; text-decoration: none;}
	.nav-menu .menu-item>a.active { color: #A47C45 !important; }
	.nav-menu .menu-item>a:hover { color: #A47C45; }
	.nav-menu .menu-item .submenu { 
		display: none; 
		position: absolute;
		left: 0px;
		top:  100px;
		padding: 10px 0px;
		overflow: hidden;
		box-sizing: border-box;
	}
	@keyframes animationSubMenu {
	    from {
	        height: 0px;
	    }
	    to {
	        height: 100%;
	    }
	}
	.nav-menu .menu-item:hover .submenu { display: block; animation-name: animationSubMenu; animation-duration: 0.2s;}
	.nav-menu .menu-item .submenu:before {
		display: block;
		content: '';
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: 1;
		background-color: #FFF;
		opacity: 0.7;
		top: 0px;
		left: 0px;
	}
	.nav-menu .menu-item .submenu>div {
		position: relative;
		height: 40px;
		line-height: 40px;
		text-align: left;
		z-index: 2;
		cursor: pointer;
	}
	.nav-menu .menu-item .submenu>div:hover { background-color: #FFF; }
	.nav-menu .menu-item .submenu>div a { display: block; color: #677788; padding: 0px 30px; white-space: nowrap;}
	.nav-menu .menu-item .submenu>div:hover a{ color: #A47C45; }


	.web-footer {
		background: linear-gradient(39deg, #F1E6CE -13%, #F6F4EF 97%);
		padding: 60px 0px 0px 0px;
	}
	.web-footer .body {
		width: 1400px;
		margin: auto;
		display: flex;
	}
	.footer-menus {
		width: 1170px;
		display: flex;
		padding-bottom: 30px;
	}
	.footer-menus .menu-item {width: 195px; padding-left: 40px;}
	.footer-menus .menu-item .title { margin-bottom: 30px; }
	.footer-menus .menu-item .title  a {color: #524020;}
	.footer-menus .menu-item .title  a:hover { text-decoration: underline; }
	.footer-menus .menu-item .submenu { line-height: 20px; margin-bottom: 15px; }
	.footer-menus .menu-item .submenu a { color: #A18645; font-size: 14px; }
	.footer-menus .menu-item .submenu a:hover { text-decoration: none; color: #524020; }

	.footer-contact { width: 220px; display: flex; flex-direction: column; padding-bottom: 30px;}
	.footer-contact-mobile { display: none; }
	.footer-contact label { color: #524020; margin-bottom: 30px; }
	.footer-contact img { width: 100px; height: 100px; margin-bottom: 10px; }
	.footer-contact p { color: #524020; font-weight: 600; margin: 0px; margin-bottom: 15px;}
	.footer-contact a.more { width: 148px; height: 50px; line-height: 50px; background-color: #C9A569; font-size: 14px; color: #FFF; text-align: center; }
	.footer-contact a.more:hover { opacity: 0.8; }

	.footer-bottom { height: 40px; line-height: 40px; background-color: #EEDFC5; text-align: center; color: #3D3D3D; font-size: 12px; }
	.footer-bottom-mobile { display: none; }
	.mobile-nav { display: none; }
}


@media(max-width:640px){
	html,body { margin: 0px; padding: 0px; font-size: 14px; color: #677788;}

	.layout-page {width: 100%; margin: auto; height: 100%; overflow-y: auto; }

	.web-header {
		height: 52px;
		background-color: #FFF;
		display: flex;
	}

	.web-header .logo { width: 180px; display: flex; flex-direction: row; align-items: center; padding: 0px 10px;}
	.web-header .logo img { width: 150px; margin: auto; }

	.web-header .nav-menu { display: none; }

	.web-header .other { flex-grow: 1; display: flex; align-items: center; flex-direction: row-reverse;}
	.web-header .other .other-stock { width: 80px; text-align: center; color: #A47C45; border-right: solid 1px #EEEFF0;}
	.web-header .other .other-version { display: none; }
	.web-header .other .other-search { display: none; }
	.web-header .other .other-mobile-nav-btn { display: block; width: 24px; height: 24px; padding: 6px 4px 0px 4px; margin: 0px 4px;}
	.web-header .other .other-mobile-nav-btn span {
		display: block;
		width: 100%;
		height: 1px;
		background-color: #677788;
		border: none;
		margin-bottom: 4px;
	}
	.web-header .other .other-mobile-nav-btn img { display: none; }
	.web-header .other .show span { display: none; }
	.web-header .other .show img { display: block; width: 16px; height: 16px;}

	.web-footer {
		background: linear-gradient(39deg, #F1E6CE -13%, #F6F4EF 97%);
		padding: 20px 0px 0px 0px;
	}
	.web-footer .body {
		width: 1600px;
		margin: auto;
		display: flex;
	}
	.footer-menus { display: none;}
	.footer-contact { display: none;}
	.footer-bottom { display: none;}

	.footer-contact-mobile { display: flex; flex-direction: column; align-items: center; padding-bottom: 20px;}
	.footer-contact-mobile label { color: #524020; font-size: 14px; margin-bottom: 20px;}
	.footer-contact-mobile img { width: 64px; margin-bottom: 10px; }
	.footer-contact-mobile p { margin: 0px; color: #524020; font-weight: 600; margin-bottom: 5px;}
	.footer-contact-mobile .more { display: block; width: 148px; height: 38px; line-height: 38px; text-align: center; background-color: #C9A569; color: #FFF; margin-top: 10px;}

	.footer-bottom-mobile { text-align: center; background-color: #EEDFC5; padding: 10px;}
	.footer-bottom-mobile span { display: block; font-size: 12px; color: #3D3D3D; }

	.mobile-nav {
		display: none;
		position: fixed;
		width: 100%;
		height: calc(100% - 52px);
		top: 52px;
		left: 0px;
		z-index: 1000;
	}
	.mobile-nav .bg {
		display: block;
		content: '';
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0px;
		left: 0px;
		background-color: #000;
		opacity: 0.5;
		z-index: 1;
	}
	@keyframes animationMobileNavBody{
		from { width: 0%; }
		to { width: 70%;}
	}
	.mobile-nav .mobile-nav-body{
		position: absolute;
		width: 70%;
		height: 100%;
		right: -1px;
		background-color: #FFF;
		z-index: 2;
		border-top: solid 1px #F3F4F5;
		overflow: hidden;
		animation-name: animationMobileNavBody; 
		animation-duration: 0.5s;
	}
	.mobile-nav-body .version {
		text-align: center;
		padding: 20px 0px 10px 0px;
	}
	.mobile-nav-body .version a {
		display: inline-block;
		color: #677788;
		font-size: 14px;
		padding: 0px 10px;
		font-weight: normal;
		border-right: solid 1px #EEEFF0;
	}
	.mobile-nav-body .version a:last-child { border-right: none; }
	.mobile-nav-body .version a.active { color: #A47C45; }

	.mobile-nav-body .search { padding: 5px 20px; }
	.mobile-nav-body .search>div { height: 36px; background-color: #F7F7F7; border: solid 1px #F7F7F7; border-radius: 18px; display: flex; align-items: center; }
	.mobile-nav-body .search>div img { width: 12px; height: 12px; padding: 0px 5px 0px 10px; box-sizing: unset;}
	.mobile-nav-body .search>div input { height: 34px; line-height: 34px; border:none; background-color: #F7F7F7; outline: none; font-size: 12px; }
	.mobile-nav-body .search>div input::placeholder { font-size: 12px; color: #BCBDC0; }

	.mobile-nav-body .menus{ margin-top: 10px; height: calc(100% - 50px - 46px - 10px); overflow: auto;}
	.mobile-nav-body .menus .menu-item {
		border-bottom: solid 1px #F3F4F5;
		min-height: 46px;
	}
	.mobile-nav-body .menus .menu-item .menu-item-label { display: flex; align-items: center; }
	.mobile-nav-body .menus .menu-item .menu-item-label a { flex-grow: 1; line-height: 46px; color: #262B33; font-size: 14px; font-weight: normal; padding-left: 20px;}
	.mobile-nav-body .menus .menu-item .menu-item-label span { width: 50px; height: 20px; text-align: center; display: flex; flex-direction: column; align-items: center; }
	.mobile-nav-body .menus .menu-item .menu-item-label span img { width: 10px; height: 10px; margin: auto; }
	.mobile-nav-body .menus .menu-item .submenu { display: none;}
	@keyframes animationMobileSubMenu{
		from { height: 0%; }
		to { height: 100%; }
	}
	/**.mobile-nav-body .menus .menu-item .active { display: block; animation-name: animationMobileSubMenu; animation-duration: 0.3s;}**/
	.mobile-nav-body .menus .menu-item .submenu div {  border-top: solid 1px #F3F4F5; min-height: 46px;}
	.mobile-nav-body .menus .menu-item .submenu div a { display: block; width: 100%; height: 46px; line-height: 46px; text-align: left; color: #5B5F66; padding-left: 40px; }


}