:root {
	--mainColor: #222222;
	--mainColor-rgb: 34, 34, 34;
	--subColor: #D6995C;
	--subColor-rgb: 214, 153, 92;
	--thirdColor: #f6f6f6;
	--thirdColor-rgb: 246, 246, 246;
	--swiper-theme-color: var(--subColor);
	--swiper-pagination-color: var(--subColor);
	--swiper-navigation-size: 30px;
	--footer-bg:#15262A;
	--footer-color:rgba(255,255,255,0.3);
}
.bg-third {
	background-color: #f6f6f6
}
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0
}
.vr {
	display: inline-block;
	align-self: stretch;
	width: 1px;
	min-height: 1em;
	opacity: .25;
	background-color: currentColor
}
a {
	text-decoration: none;
	color: inherit
}
a:hover {
	text-decoration: none;
	color: inherit
}
body {
	font-size: 16px;
	line-height: 1;
	overflow-x: hidden;
	width: 100%
}
ul, ol, li {
	margin-bottom: 0;
	padding-left: 0;
	list-style: none
}
img {
	max-width: 100%;
	max-height: 100%
}
.cover-img {
	width: 100%;
	height: 100%;
	object-fit: cover
}
.py, .new_pro {
	padding-top: 120px;
	padding-bottom: 120px
}
.fs-12 {
	font-size: 12px
}
.fs-14 {
	font-size: 14px
}
.pt, .moreContent {
	padding-top: 120px
}
.pb, .news_box {
	padding-bottom: 120px
}
input::-webkit-input-placeholder {
	font-size: 13px
}
input::-moz-placeholder {
	font-size: 13px
}
input:-moz-placeholder {
	font-size: 13px
}
input:-ms-input-placeholder {
	font-size: 13px
}
@media (min-width: 1860px) {
	.container {
		position: relative;
		max-width: 1680px;
		margin: auto
	}
}
#search-offcanvas {
	height: 100%;
	border: 0;
	width: 100%;
	background: transparent
}
#search-offcanvas .st_main {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	width: 48%;
	padding-bottom: 10px;
	transform: translate(-50%, -50%);
	border-bottom: 2px solid #ffffff;
	justify-content: space-between
}
#search-offcanvas .st_main .search_input {
	font-size: 20px;
	line-height: 30px;
	overflow: hidden;
	width: calc(100% - 60px);
	height: 30px;
	padding: 0 20px;
	color: #f5f5f5;
	border: none;
	background: transparent;
	outline: none !important
}
#search-offcanvas .st_main .search_input::-webkit-input-placeholder {
	color: inherit
}
#search-offcanvas .st_main .search_bottom {
	font-size: 30px;
	line-height: 30px;
	overflow: hidden;
	height: 30px;
	color: #ffffff;
	border: none;
	background: transparent
}
#search-offcanvas .search_close {
	font-size: 30px;
	font-weight: bold;
	position: absolute;
	top: 20px;
	right: 20px;
	cursor: pointer;
	color: #ffffff
}
@media (max-width: 991.8px) {
	#search-offcanvas .st_main {
		width: 70%
	}
}
@media (max-width: 551.8px) {
	#search-offcanvas .st_main {
		width: 80%;
		padding-bottom: 0
	}
	#search-offcanvas .st_main .search_input {
		font-size: 16px;
		width: 82%;
		padding: 0
	}
	#search-offcanvas .st_main .search_bottom {
		font-size: 18px
	}
}
header {
	position: fixed;
	z-index: 999;
	top: 0;
	left: 0;
	width: 100%;
	padding: 0 3%;
	background: #222B30
}
header .header-box {
	display: flex;
	align-items: center;
	/*max-width: 1920px;*/
	height: 90px;
	margin: 0 auto
}
header .header-box .logo {
	padding: 20px 0
}
header .header-box .logo img {
	height: 50px
}
header .header-box .menu {
	display: flex;
	align-items: center;
	margin-left: auto
}
header .header-box .menu > li {
	position: relative;
	color: #fff;
	padding: 0 12px;
}
header .header-box .menu > li.active{
	color: #d6995c
}
header .header-box .menu > li > a {
	font-size: 14px;
	line-height: 90px;
	position: relative;
	display: block;
	overflow: hidden;
	padding: 0 12px;
	color: inherit;
}
header .header-box .menu > li > a:after {
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 0;
	content: "";
	transition: all .5s;
	transform: translateX(-50%);
	border-top: 2px solid #d6995c
}
header .header-box .menu > li ul {
	position: absolute;
	top: 100%;
	left: 0;
	display: none;
	min-width: 200px;
	padding: 1rem 0;
	background: #fff
}
header .header-box .menu > li ul li {
	padding: 0 24px;
	transition: background-color .5s;
	color: #222B30 ;
}
header .header-box .menu > li ul li a {
	font-size: 15px;
	line-height: 2.5;
	display: inline-block;
	width: 100%;
	color: inherit;
}
header .header-box .menu > li ul li a:before {
	display: inline-block;
	width: 5px;
	height: 5px;
	margin-right: 10px;
	content: "";
	vertical-align: middle;
	border-radius: 100%;
	background: #222B30
}
header .header-box .menu > li ul li:hover {
	background: rgba(0, 0, 0, 0.08)
}
header .header-box .menu > li.active > a:after, header .header-box .menu > li:hover > a:after {
	width: 100%
}
header .header-box .infoBox {
	display: flex;
	align-items: center;
	height: 100%
}
header .header-box .infoBox .phone{
	background: #BFC3C6;
	color: #000;
	padding: 8px 12px;
	cursor: pointer;
}
header .header-box .infoBox .phone:hover{
	background: var(--subColor);
	color: #fff;
}
header .header-box .infoBox .search {
	font-size: 22px
}
header .nav-button {
	width: 30px
}
header .nav-button .menu_btn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%)
}
header .nav-button .menu_btn .line {
	display: block;
	width: 24px;
	height: 2px;
	margin-top: 6px;
	margin-bottom: 6px;
	background-color: var(--subColor)
}
header .nav-button .menu_btn .line:nth-of-type(2) {
	width: 14px
}
header + .inlineH {
	height: 90px
}
@media (max-width: 991.8px) {
	header .header-box,
	header + .inlineH{
		height: 60px;
	}
	header .header-box .logo{
		padding: 10px 0;
	}
	header .header-box .logo img{
		height: 40px;
	}
}
#mobile_menu {
	max-width: 260px
}
#mobile_menu .level1 > li > a {
	line-height: 45px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%
}
#mobile_menu .level1 > li > a span {
	font-size: 22px
}
#mobile_menu .level1 > li > a span i {
	transition: all .36s
}
#mobile_menu .level1 > li.active > a {
	color: #D6995C
}
#mobile_menu .level1 > li.active > a span i {
	transform: rotate(90deg)
}
#mobile_menu .level1 .level2 {
	display: none;
	padding-left: 1.5rem
}
#mobile_menu .level1 .level2 li {
	list-style: circle;
	color: #8d8d8d
}
#mobile_menu .level1 .level2 li a {
	font-size: 14px;
	line-height: 36px;
	display: block;
	width: 100%
}
@font-face {
	font-family: "Square";
	src: url("../font/Square.woff") format("woff"), url("../font/Square.ttf") format("truetype"), url("../font/Square.eot") format("embedded-opentype");
	font-weight: normal;
	font-style: normal
}

.big_title {
	padding-bottom: 80px
}
.big_title .en {
	font-family: Didot,"Square", sans-serif;
	font-size: 36px;
	line-height: 1;
	margin-bottom: .25em;
	position: relative;
	z-index: 9;
	display: block;
	text-transform: uppercase
}
.big_title .cn {
	font-size: 30px;
	position: relative;
	z-index: 9;
	display: inline-block;
	padding: 0 5px;
}
.big_title .cn::after {
	position: absolute;
	z-index: -1;
	bottom: -2px;
	left: 0;
	display: block;
	width: 100%;
	height: 15px;
	content: "";
	background: var(--subColor,#D6995C)
}
.view_title .en {
	padding-bottom: 5vw
}
.view_title .en h2 {
	font-family: "Square";
	font-size: 48px;
	position: relative;
	display: inline-block
}
.view_title .cn {
	font-size: 28px
}
.view_title .cn:after {
	display: block;
	width: 22px;
	height: 0;
	margin: 20px 0;
	content: "";
	border-top: 5px solid #b59780
}
.more {
	font-size: 14px
}
.more .btn {
	padding: 15px 30px;
	transition: all .36s;
	color: #ffffff;
	border-radius: 0;
	background-color: #222222
}
.more .btn:hover {
	background-color: #D6995C
}
.ratio {
	overflow: hidden
}
.tit {
	color: inherit
}
.tit .en {
	font-family: "Square", sans-serif;
	font-size: 24px;
	letter-spacing: 2px;
	text-transform: uppercase
}
.tit .ch {
	font-size: 60px
}
.tit:after {
	display: block;
	width: 23%;
	height: 3px;
	margin-top: 20px;
	content: "";
	background: #ffffff
}
.titbox {
	font-size: 14px;
	line-height: 1.75;
	color: #666666
}
.titbox .title {
	padding-bottom: 5px
}
/**************************/
footer {
	text-align: center;
	background-color: var(--footer-bg);
	color: var(--footer-color);
}
footer ul {
	display: flex;
	align-items: center
}
footer ul li + li {
	font-size: 16px;
	margin-left: 50px
}
footer .up-btn {
	position: relative;
	display: inline-block;
	padding: 25px;
	cursor: pointer;
	transition: all .3s;
	border: 1px solid var(--footer-color)
}
footer .up-btn::before {
	position: absolute;
	top: 15px;
	left: 50%;
	width: 1px;
	height: 0;
	content: "";
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
	-webkot-transform-origin: top center;
	transform-origin: top center;
	background-color: #fff
}
footer .up-btn::after {
	position: absolute;
	top: -10px;
	left: 50%;
	width: 1px;
	height: 25px;
	content: "";
	background-color: var(--footer-color)
}
footer .up-btn:hover {
	transition-delay: .3s;
	color: #fff
}
footer .up-btn:hover::before {
	height: 25px;
	transition: all .3s;
	transition-delay: .3s
}
footer .up-btn:hover::after {
	height: 0;
	transition: all .3s
}
footer .add-box {
	font-size: 15px
}
.copyright_box {
	font-size: 14px;
	padding: 18px 0;
	color: var(--footer-color);
	background: rgba(0,0,0,.1);
}
/*****************************/
.over-img {
	position: relative;
	display: block
}
.over-img:before, .over-img:after {
	position: absolute;
	display: block;
	content: "";
	transition: all .36s
}
.over-img:before {
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	opacity: 0;
	background-color: #D6995C
}
.over-img:after {
	z-index: 2;
	top: 20px;
	right: 20px;
	bottom: 20px;
	left: 20px;
	border: 1px solid #ffffff;
	background: transparent
}
.over-img .text-box {
	position: absolute;
	z-index: 3;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	color: #ffffff
}
.over-img .text-box .title {
	font-size: 20px;
	line-height: 1em
}
.over-img .text-box .note {
	font-size: 28px;
	line-height: 1em;
	margin-top: 20px
}
.over-img .text-box .pic {
	max-width: 40px;
	margin: 0 auto 15px
}
.over-img .text-box p {
	font-size: 14px;
	line-height: 1.75;
	margin-top: 1rem;
	margin-bottom: 0;
	white-space: nowrap
}
.over-img:hover:before {
	opacity: .6
}
@media (max-width: 99.18px) {
	.over-img .text-box .note {
		font-size: 26px
	}
}
@media (max-width: 551.8px) {
	.over-img .text-box p {
		margin-top: .5rem
	}
}
@media (max-width: 991.8px) {
	.py, .new_pro {
		padding-top: 60px;
		padding-bottom: 60px
	}
	.pt, .moreContent {
		padding-top: 60px
	}
	.pb, .news_box {
		padding-bottom: 60px
	}
	.big_title {
		padding-bottom: 50px
	}
	.big_title .en {
		font-size: 38px
	}
	.big_title .cn {
		font-size: 28px;
		padding-top: 5px
	}
	.big_title .cn::after {
		height: 12px
	}
	.view_title .en {
		padding-bottom: 15px
	}
	.view_title .en h2 {
		font-size: 38px
	}
	.tit .ch {
		font-size: 40px;
		padding-top: 12px
	}
	.titbox {
		font-size: 12px;
		padding-bottom: 30px
	}
}
@media (max-width: 551.8px) {
	.more .btn {
		padding: 12px 30px
	}
	.py, .new_pro {
		padding-top: 30px;
		padding-bottom: 30px
	}
	.pt, .moreContent {
		padding-top: 30px
	}
	.pb, .news_box {
		padding-bottom: 30px
	}
	.big_title {
		padding-bottom: 24px;
		text-align: center
	}
	.big_title .en {
		font-size: 30px
	}
	.big_title .cn {
		font-size: 26px;
		padding: 5px 5px 0
	}
	.big_title .cn::after {
		height: 10px
	}
	.view_title .en {
		padding-bottom: 0
	}
	.view_title .en h2 {
		font-size: 20px
	}
	.view_title .cn {
		font-size: 24px
	}
	.tit .ch {
		font-size: 30px;
		padding-top: 12px
	}
	.tit:after {
		background-color: #D6995C
	}
	.titbox {
		font-size: 12px;
		padding-bottom: 30px
	}
}
@font-face {
	font-family: "Didot";
	src: url("../font/Didot.woff") format("woff"),url("../font/Didot.ttf") format("truetype");
	font-weight: normal;
	font-style: normal
}
.titleM-1{
	position: relative;
	line-height: initial;
}
.titleM-1:after {
	display: block;
	content: "";
	background: var(--after-bg,#000);
	width: 18px;
	height: 3px;
	margin-top: 36px;
	margin-bottom: 50px;
}
.titleM-1.text-center:after{
	margin-left: auto;
	margin-right: auto;
}
.titleM-1 .en {
	text-transform: uppercase;
	font-size: 35px;
	font-family: Didot, sans-serif;
	color: #000;
}
.titleM-1 .cn {
	font-size: 32px;
	color: #000;
}

@media (max-width: 991.8px) {
	.titleM-1 .en,
	.titleM-1 .cn {
		font-size: 24px;
	}
	.titleM-1:after{
		margin-bottom: 38px;
		margin-top: 20px;
	}
}
@media (max-width: 551.8px) {
	.titleM-1:after {
		margin-bottom: 25px;
		margin-top: 18px;
	}
}