:root {
	--main: #294d37;
	--deputy: #333;
	--width: 1600px;
	--font: 'Jost';
}
	
	.layout {
		overflow: hidden;
	}
	
	.layout-bg {
		box-sizing: border-box;
		width: var(--width);
		max-width: 100%;
		margin: auto;
		overflow: visible;
	}
	
	.clear {
		display: none;
	}
	
	.page-layout .mod {
		display: none !important;
	}
	
	.page-layout .layout {
		position: static !important;
	}
	
	.page-layout .layout-bg {
		flex-direction: inherit !important;
		align-items: inherit !important;
	}
	
	.main {
		position: relative;
	}
	
	.page-body .main {
		position: static !important;
	}
	
	.page-layout .left .left-bottom-bg {
		display: block;
		padding: inherit !important;
	}
	
	.page-layout .layout-foot .left .left-bottom-right {
		padding: inherit !important;
	}
	
	.layout-sys2 .left,
	.layout-sys2 .right,
	.layout-sys3 .left,
	.layout-sys3 .center,
	.layout-sys3 .right,
	.layout-sys4 .left,
	.layout-sys4 .centerleft,
	.layout-sys4 .centerright,
	.layout-sys4 .right,
	.layout-sys4-1 .left,
	.layout-sys4-1 .right,
	.layout-sys4-1 .right .right-top,
	.layout-sys4-1 .right .right-bottom,
	.layout-sys4-1 .right .right-bottom-left,
	.layout-sys4-1 .right .right-bottom-right,
	.layout-sys4-2 .left,
	.layout-sys4-2 .right,
	.layout-sys4-1 .right .right-top,
	.layout-sys4-1 .right .right-bottom,
	.layout-sys4-2 .right .right-top-left,
	.layout-sys4-2 .right .right-top-right,
	.layout-sys4-3 .left,
	.layout-sys4-1 .left .left-top,
	.layout-sys4-1 .left .left-bottom,
	.layout-sys4-3 .left .left-top-left,
	.layout-sys4-3 .left .left-top-right,
	.layout-sys4-3 .right,
	.layout-sys4-4 .left,
	.layout-sys4-1 .left .left-top,
	.layout-sys4-1 .left .left-bottom,
	.layout-sys4-4 .left .left-bottom-left,
	.layout-sys4-4 .left .left-bottom-right,
	.layout-sys4-4 .right {
		width: auto;
	}
	
	input[type="text"],
	input[type="password"],
	input[type="email"],
	textarea {
		-webkit-appearance: none;
		font-family: inherit;
	}
	
	input:focus {
		outline: none;
	}
	
	textarea:focus {
		outline: none;
	}
	
	.mod h1,
	.mod h2,
	.mod h3,
	.mod h4,
	button {
		font-size: inherit;
		font-weight: inherit;
		font-family: var(--font);
	}
	
	.mod-content .content-bg {
		overflow: hidden;
	}
	
	button:hover {
		opacity: 1 !important;
	}
	
	.mod a {
		display: inline-block;
		color: inherit;
		transition: All 0.3s ease-in-out;
	}
	
	.mod {
		color: #333;
		font-size: calc(0.2vw + 12px);
		line-height: calc(0.25vw + 20px);
		font-family: 'Roboto', 'Arial', sans-serif;
		font-weight: 400;
	}
	
	.mod-color .mod-content img {
		display: block;
		max-width: 100%;
		margin: auto;
		transition: All 0.3s ease-in-out;
	}
	
	*:disabled {
		cursor: not-allowed !important;
	}
	
	.disabled {
		cursor: not-allowed !important;
	}
	
	*:before,
	*:after {
		transition: All 0.3s ease-in-out;
	}
	
	.layout-page {
		padding: calc(2% + 20px) 0;
	}
	
	.layout-page .left {
		width: calc(77.5% - 1vw - 10px);
	}
	
	.layout-page .right {
		width: 22.5%;
	}
	
	.layout-page .mod-color+.mod-color {
		margin-top: calc(1vw + 20px);
	}
	
	.layout-page .mod-color .mod-title {
		padding-bottom: calc(0.5vw + 10px);
	}
	
	.layout-page .mod-color .title-left {
		font-size: calc(0.3vw + 16px);
		line-height: calc(0.35vw + 20px);
		color: #000;
		font-weight: 600;
	}
	
	.layout-pagecontact {
		padding: calc(2% + 20px) 0;
	}
	
	.layout-pagecontact .layout-bg {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		align-items: start;
	}
	
	.layout-pagecontact .left,
	.layout-pagecontact .right {
		width: calc(50% - 1vw - 10px);
	}
	
	.layout-pagecontact .mod-color .mod-title {
		padding-bottom: calc(0.5vw + 10px);
	}
	
	.layout-pagecontact .mod-color .title-left {
		font-size: calc(0.3vw + 16px);
		line-height: calc(0.35vw + 20px);
		color: #000;
		font-weight: 600;
	}
	
	.layout-nav {
		transition: All 0.3s ease-in-out;
		overflow: visible;
		position: sticky;
		top: 0;
		z-index: 8;
		background: #fff;
		box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
	}
	
	.layout-nav .layout-bg {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.layout-share {
		background: #ddd4c4;
		padding: calc(1% + 10px) 0;
	}
	
	.layout-share .layout-bg {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	
	.layout-foot {
		background:#000000;
		border-bottom: 1px solid #2c2c2c;
	}
	
	.layout-foot .layout-bg {
		display: flex;
		align-items: start;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: calc(2% + 20px) 0;
	}
	
	@media(max-width:1700px) {
		.layout-bg {
			width: calc(100% - 4vw - 40px);
		}
	}
	
	@media(max-width:1600px) {
		.layout-bg {
			width: calc(100% - 2vw - 20px);
		}
	}
	
	@media(min-width:769px) {
		.mod .title-left {
			float: none;
		}
		.mod .title-right {
			float: none;
		}
		.layout-nav .center {
			flex: 1 1 0;
		}
		.layout-foot .left {
			width: calc(75% - 1vw - 10px);
		}
		.layout-foot .right {
			width: calc(25% - 1vw - 10px);
		}
	}
	
	@media(max-width:768px) {
		.mod-othercontent01 .mod-content img {
			max-width: inherit;
			width: 100%;
		}
		.layout {
			min-width: 320px;
		}
		.layout-bg {
			width: calc(100% - 2vw - 20px);
		}
		.layout-pagecontact .layout-bg>div {
			width: 100%;
			padding: 10px 0;
		}
		.layout-page .layout-bg>.left {
			width: 100%;
		}
		.layout-page .layout-bg>.right {
			width: 100%;
			padding-top: 20px;
		}
		.layout-top {
			position: sticky;
			top: 0;
			z-index: 9;
		}
		.layout-nav {
			height: 50px;
			top: 40px;
			z-index: 8;
			padding: 10px 0;
		}
		.layout-nav .left {
			order: 2;
			flex: auto;
		}
		.layout-nav .center {
			order: 1;
		}
		.layout-nav .right {
			order: 3;
		}
		.layout-share .layout-bg>div {
			width: 100%;
			padding: 10px 0;
		}
		.layout-foot .layout-bg>div {
			width: 100%;
			padding: 10px 0;
		}
	}
	
	.mod .pagination {
		padding: 5px 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.mod .pagination .pagination-nav li {
		float: left;
		margin: 2px;
	}
	
	.mod .pagination .pagination-nav li a {
		text-align: center;
		background: #f0f0f0;
		display: block;
		line-height: 30px;
		overflow: hidden;
		color: #333;
		border-radius: 3px;
		font-size: 14px;
		padding: 0 5px;
		min-width: 20px;
		cursor: pointer;
		text-transform: uppercase;
	}
	
	.mod .pagination .pagination-link:hover {
		background: var(--main);
		color: #fff;
	}
	
	.mod .pagination .pagination-nav .pagination-active .pagination-link {
		cursor: not-allowed;
		color: #aaa;
		background: transparent;
	}
	
	.mod .pagination .pagination-nav .pagination-disabled a {
		cursor: not-allowed;
		background: transparent;
		color: #ccc !important;
	}
	
	.mod .pagination .page-goto {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.mod .pagination .page-goto>* {
		margin: 2px;
	}
	
	.mod .pagination .page-goto .pager-label {
		line-height: 30px;
		padding: 0 5px;
		color: #fff;
	}
	
	.mod .pagination .page-goto .textfield-normal {
		height: 20px;
		min-width: 40px;
		line-height: 20px;
		background: #f0f0f0;
		color: #333;
		font-size: 14px;
		padding: 5px;
		border-radius: 50vw;
		margin: 0 5px;
		border: none;
		text-align: center;
	}
	
	.mod .pagination .page-goto .pager-button {
		background: #f0f0f0;
		display: block;
		padding: 1px 10px;
		line-height: 30px;
		color: #333;
		font-size: 14px;
		border-radius: 3px;
	}
	
	.mod .pagination .page-goto .pager-button:hover {
		background: var(--main);
		color: #fff;
	}
	
	@media(max-width:480px) {
		.mod .pagination .pagination-nav li {
			display: none;
		}
		.mod .pagination .pagination-nav li:first-of-type,
		.mod .pagination .pagination-nav li:last-of-type {
			display: block;
		}
	}
	
	.mod-detail .bottom-bg {
		line-height: 20px;
		color: #333;
	}
	
	.mod-detail .bottom-bg>div {
		display: flex;
		align-items: center;
	}
	
	.mod-detail .bottom-bg a {
		flex: 1 2 0;
		display: block;
		text-overflow: ellipsis;
		white-space: pre;
		overflow: hidden;
		color: #333;
	}
	
	.mod-detail .mod-bottom span:after {
		content: ":";
		padding: 0 3px;
	}
	
	.mod-detail .mod-bottom a {
		color: var(--main);
	}
	
	.mod-detail .mod-bottom a:hover {
		text-decoration: underline;
	}