:root {
	--text-color: #F8F7F0;
	--primary-color: #B88C4F;
	--primary-bg-color: #28292B;
	--primary-bg-hover-color: #232323;
	--header-height: 160px;
	--action-5s: all ease 0.5s;
}
html {
	width: 100vw;
}
body {
	width: 100vw;
	background-color: var(--primary-bg-color);
	color: var(--text-color);
	font-size: 16px;
	font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
	overflow-x: hidden;
	overflow-y: auto;
}
a {
	color: var(--primary-color);
	text-decoration: none
}
html, body, div, p, ul, list, img, h1, h2, h3, button, input, img {
	margin: 0;
	padding: 0;
	outline: 0;
	border: none;
}
h1, h2, h3 {
	font-weight: normal;
}
.logo h1 {
	text-indent: -9999px;
	background-repeat: no-repeat;
	background-size: cover;
	cursor: pointer;
}
.mb-l {
	margin-bottom: 24px;
}
.tal { text-align: left }
.tar { text-align: right }
.tac { text-align: center }

.flex-align {
	justify-content: center;
}
.flex-valign {
	align-items: center;
}
.el-backtop {
	z-index: 9999!important;
	background: var(--primary-color);
	color: var(--text-color);
	box-shadow: 0 0 10px rbga(0,0,0,.6);
	font-size: 14px;
}
.top {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	line-height: 40px;
	text-align: center;
}
.top:hover {
	background: var(--primary-bg-hover-color);
}






/* 横屏 */
@media screen and (orientation: landscape) {
	.main-flex {
		display: flex;
	}
	.header {
		width: 100%;
		height: var(--header-height);
		/* overflow: hidden; */
		/* padding: 30px 48px; */
		background-color: var(--primary-bg-color);
		box-shadow: 0 0 16px rgba(0,0,0,.2);
		position: fixed;
		z-index: 1999;
		box-sizing: border-box;
	}
	.header:after {
		clear: both;
		content: '';
		height: 0;
	}
	.logo {
		width: 16%;
		float: left;
	}
	.logo h1 {
		
		width: 200px;
		height: 95px;
		margin-top: 30px;
		margin-left: 48px;
	}
	.nav-icon, 
	.close-btn,
	.video-h { 
		display: none; 
	}
	.nav-bar {
		width: 68%;
		height: var(--header-height);
		float: right;
		font-size: 20px;
		letter-spacing: .2em;
		box-sizing: border-box;
		padding-left: 60px
	}
	.lang-bar {
		width: 14%;
		float: right;
		text-align: right;
		margin-top: 76px;
		padding-right: 48px;
		box-sizing: border-box;
	}
	.lang-bar a {
		padding: 8px 24px;
		background: var(--primary-bg-hover-color);
		border: 1px solid #212121;
		border-radius: 4px;
		transition: var(--action-5s);
	}
	.lang-bar a:hover {
		background: var(--primary-color);
		color: var(--primary-bg-hover-color);
		transition: var(--action-5s);
	}
	.nav-item {
		padding: 72px 24px 0 24px;
		margin: 0 8px;
		min-height: 88px;
		float: left;
		cursor: pointer;
		text-shadow: 1px 1px 1px #000;
		
	}
	.nav-item:hover {
		/* background: var(--primary-bg-hover-color); */
		background-image: linear-gradient(rgba(35,35,35,1) 38%, rgba(0,0,0,0.6) 85%, rgba(0,0,0,0) 100%);
		color: var(--primary-color);
		/* box-shadow: 0 0 8px rgba(0,0,0,.1); */
	}
	.nav-item .nav-child {
		max-height: 0;
		overflow: hidden;
		/* transition: var(--action-5s); */
	}
	.nav-item:hover .nav-child {
		max-height: 360px;
		
		transition: var(--action-5s);
	}
	.nav-item .nav-child-arrow {
		transform: rotate(0deg);
		transition: var(--action-5s);
	}
	.nav-item:hover .nav-child-arrow {
		transform: rotate(180deg);
		transition: var(--action-5s);
	}
	.nav-child-arrow {
		display: inline-block;
		width: 16px;
		height: 16px;
		line-height: 16px;
		text-align: center;
	}
	.nav-child {
		margin: 24px 0;
		color: var(--text-color);
		font-size: 18px;
	}
	.nav-child-item {
		padding: 16px 0;
	}
	.nav-child-item:hover {
		color: var(--primary-color);
	}
	.nav-item a,
	.nav-child-item a {
		color: var(--text-color);
		transition: var(--action-5s);
	}
	.nav-item a:hover,
	.nav-child-item a:hover {
		color: var(--primary-color);
		transition: var(--action-5s);
	}
	.main {
		width: 100vw;
		padding-top: var(--header-height);
		min-height: 600px;
		box-sizing: border-box;
		position: relative;
		z-index: 10;
	}
	.main-block {
		width: 100%;
		position: relative;
		z-index: 11;
	}
	.main-white-block {
		width: 100%;
		padding: 36px 0;
		position: relative;
		z-index: 11;
		background: #FFF;
	}
	
	.slider-wrap {
		width: 76vw;
		height: 38vw;
		position: relative;
		z-index: 99;
		border-top-right-radius: 32px;
		border-bottom-right-radius: 32px;
		overflow: hidden;
	}
	.slider-item {
		width: 0;
		height: inherit;
		padding-top: 12vw;
		text-indent: 12vw;
		background-repeat: no-repeat;
		background-size: cover;
		position: absolute;
		top: 0;
		left: 0;
		font-size: 72px;
		letter-spacing: .2em;
		text-shadow: 1px 1px 1px #FFF;
		color: var(--primary-color);
		font-weight: bold;
		overflow: hidden;
		box-sizing: border-box;
		transition: width .6s;
		user-select: none;
	}
	.slider-item:first-child {
		width: 100%;
	}
	
	.quick-wrap {
		width: 23vw;
		margin-left: 1vw;
		/* position: absolute;
		z-index:150;
		top: 0;
		right: 0; */
		box-sizing: border-box;
		border-top-left-radius: 32px;
		border-bottom-left-radius: 32px;
		overflow: hidden;
	}
	.quick-item {
		background-repeat: no-repeat;
		background-size: cover;
		margin-bottom: 1vw;
		height: 12vw;
		line-height: 12vw;
		font-size: 30px;
		text-align: center;
		color: #EEE;
		text-shadow: 1px 1px 1px rgba(0,0,0,.5);
		display: block;
		position: relative;
		z-index: 40;
	}
	.quick-mask {
		display: inline-block;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,.4);
		position: absolute;
		z-index: 41;
		top: 0;
		left: 0;
		transition: var(--action-5s);
	}
	.quick-item:hover .quick-mask {
		background: rgba(0,0,0,.8);
		transition: var(--action-5s);
	}
	.quick-icon { display: none; }
	.quick-item:hover .quick-icon { display: inline-block; }
	.quick-link {
		display: inline-block;
		width: 100%;
		height: 100%;
		color: #EEE;
		position: absolute;
		z-index: 42;
		top: 0;
		left: 0;
		transition: var(--action-5s);
	}
	.quick-link:hover {
		color: var(--primary-color);
		transition: var(--action-5s);
	}
	.quick-item:last-child {
		margin: 0;
	}
	.down-arrow {
		width: 20vw;
		height: 2vw;
		margin: 0 auto 36px auto;
		background-image: url('images/flower-line.png');
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center center;
	}
	.about-text {
		width: 100vw;
		padding: 6vw 0;
		text-align: center;
		
	}
	.about-text h2,
	.main-title {
		color: var(--primary-color);
		font-size: 40px;
		margin-bottom: 24px;
	}
	.main-title {
		text-align: center;
		margin-top: 60px;
	}
	.about-text p {
		display: inline-block;
		width: 60vw;
		color: var(--text-color);
		line-height: 180%;
		font-size: 18px;
	}
	.horizontal-video {
		width: 100vw;
		height: 56vw;
		position: relative;
		z-index: 50;
	}
	.video-w {
		width: inherit;
		height: inherit;
		position: absolute;
		z-index:51;
		top: 0;
		left: 0;
	}
	.video-mask {
		width: inherit;
		height: inherit;
		position: absolute;
		z-index:52;
		top: 0;
		left: 0;
		/* background: url('/assets/images/bg-point.png'); */
		background: rgba(0,0,0,.6);
	}
	.video-slogan-box {
		display: flex;
		width: inherit;
		height: 36vw;
		position: absolute;
		z-index: 53;
		top: 10vw;
		left: 0;
		justify-content: center;
		align-items: center;
	}
	.video-slogan {
		width: 18vw;
		height: 36vw;
		
		margin-right: 5vw;
		box-sizing: border-box;
		padding-top: 8vw;
	}
	.video-slogan:last-child {
		margin: 0;
	}
	.video-slogan h3, .video-slogan p {
		width: 100%;
		text-align: center;
		text-shadow: 1px 1px 1px rgba(0,0,0,.8);
		
	}
	.video-slogan h3 {
		font-size: 36px;
		color: var(--primary-color);
		margin-bottom: 48px;
	}
	.video-slogan-info {
		width: 18vw;
		height: 18vw;
		border-radius: 9vw;
		background: rgba(184, 140, 79, .6);
		border: 2px solid rgba(184, 140, 79, .8);
		box-shadow: 0 0 16px rgba(0,0,0,.2);
		box-sizing: border-box;
		padding-top: 6vw;
	}
	.video-slogan p {
		font-size: 24px;
		color: var(--text-color);
		margin-bottom: 24px;
	}
	.video-slogan p:last-child {
		margin: 0;
	}
	.more {
		margin: 48px 0;
		text-align: center;
		font-size: 24px;
	}
	.more a {
		display: inline-block;
		padding: 16px 32px;
		background: var(--primary-bg-hover-color);
		color: var(--primary-color);
		transition: var(--action-5s);
	}
	.more a:hover {
		background: var(--primary-color);
		color: var(--primary-bg-hover-color);
		transition: var(--action-5s);
		box-shadow: 0 0 16px rgba(0,0,0,.2);
	}
	.product-list {
		width: 80vw;
		min-height: 12vw;
		display: flex;
		flex-flow: wrap;
		margin: 48px auto;
	}
	.product-item {
		width: 16vw;
		height: 12vw;
		background-repeat: no-repeat;
		background-size: cover;
		margin: 2vw;
		box-shadow: 0 0 10px rgba(0,0,0,.6);
		box-sizing: border-box;
		border: 2px solid var(--primary-color);
		position: relative;
		z-index: 60;
	}
	.product-item a {
		display: inline-block;
		width: 100%;
		height: 100%;
		line-height: 12vw;
		text-align: center;
		font-size: 20px;
		text-shadow: 1px 1px 1px #000;
		color: var(--text-color);
		position: absolute;
		z-index: 62;
		top: 0;
		left: 0;
		transition: var(--action-5s);
	}
	.product-icon {
		display: none;
		margin-left: 8px;
	}
	.product-item:hover .product-item-mask {
		background: rgba(0,0,0,.8);
		transition: var(--action-5s);
	}
	.product-item a:hover {
		color: var(--primary-color);
		transition: var(--action-5s);
	}
	.product-item a:hover .product-icon {
		display: inline-block;
	}
	.product-item-mask {
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: 61;
		top: 0;
		left: 0;
		background: rgba(0,0,0,.4);
		transition: var(--action-5s);
	}
	.honour-ch-list,
	.honour-h-list {
		display: none
	}
	.honour-w-list {
		width: 60vw;
		margin: 0 auto;
		display: flex;
		flex-flow: wrap;
	}
	.honour-item {
		width: 16vw;
		height: 16vw;
		margin: 2vw;
		box-sizing: border-box;
		padding: 2px;
		border: 1px solid #DDD;
	}
	.honour-item-image {
		width: 100%;
		height: 100%;
		
	}
	.honour-item img {
		cursor: zoom-in!important;
	}
	.news-wrap {
		width: 88vw;
		margin: 48px auto;
		display: flex;
		flex-flow: wrap;
	}
	.news-top, 
	.news-list {
		width: 40vw;
		height: 40vw;
		margin: 0 2vw;
		overflow: hidden;
	}
	.news-list {
		
	}
	.news-item {
		margin-bottom: 24px;
		padding-bottom: 16px;
		border-bottom: 1px solid var(--primary-color);
	}
	.news-item:last-child {
		border: none;
	}
	.news-item a {
		color: #CCC;
		transition: var(--action-5s);
		font-size: 20px;
		text-shadow: 1px 1px 1px #333;
	}
	.news-item a:hover {
		color: var(--primary-color);
		transition: var(--action-5s);
	}
	.news-item-time {
		color: #666;
		margin-top: 8px;
	}
	.news-top-image {
		width: 40vw;
		height: 30vw;
		background: #121212;
		
	}
	.news-top-image img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}
	.news-top-title {
		width: 100%;
		max-height: 80px;
		margin: 16px 0;
		line-height: 180%;
		
		font-size: 24px;
		overflow: hidden;
	}
	.news-top-title a {
		text-shadow: 1px 1px 1px #000;
		color: var(--text-color);
		transition: var(--action-5s);
	}
	.news-top-title a:hover {
		color: var(--primary-color);
		transition: var(--action-5s);
	}
	.news-top-time {
		margin-bottom: 16px;
		color: #666;
	}
	.news-top-description {
		max-height: 45px;
		line-height: 150%;
		width: 100%;
		color: #999;
		overflow: hidden;
	}
	.footer {
		width: 100%;
		padding: 48px;
		box-sizing: border-box;
		min-height: 20vw;
		background: #FFF;
		display: flex;
	}
	.footer-item {
		color: var(--primary-bg-color);
		width: 33%;
		margin: 0 24px;
	}
	.footer-title {
		color: var(--primary-color);
		font-size: 24px;
		margin-bottom: 24px;
	}
	.footer-content {
		color: #999;
		font-size: 18px;
	}
	.footer-content p {
		margin-bottom: 16px;
	}
	.footer-qrcode {
		width: 200px;
		height: 200px;
	}
	.footer-input,
	.footer-button	{
		margin-bottom: 16px;
	}
	.footer-input input,
	.footer-button button {
		width: 100%;
		height: 48px;
		font-size: 16px;
		text-align: center;
	}
	.footer-input input {
		background: var(--primary-bg-color);
		color: var(--text-color);
	}
	.footer-button button {
		cursor: pointer;
		background: var(--primary-color);
		color: var(--text-color);
		transition: var(--action-5s);
	}
	.footer-button button:hover {
		background: var(--primary-bg-color);
		transition: var(--action-5s);
	}
	.footer-toast {
		text-align: center;
		color: var(--primary-color);
	}
	.category-top {
		width: 100vw;
		height: 12vw;
		position: relative;
		z-index: 100;
		background-repeat: no-repeat;
		background-size: cover;
	}
	.category-top-title,
	.category-top-mask {
		width: 100vw;
		height: 12vw;
		position: absolute;
		top: 0;
		left: 0;
	}
	.category-top-mask {
		z-index: 101;
		background: rgba(0,0,0,.6);
	}
	.category-top-title {
		z-index: 102;
	}
	.category-list {
		padding: 120px 0;
	}
	.category-item {
		
	}
	
	.category-page, 
	.left-right-list {
		width: 90vw;
		margin: 0 auto;
	}
	.content-item {
		overflow: hidden;
		
	}
	.left-right-list .content-item {
		background: var(--primary-color);
	}
	.content-item:after {
		clear: both;
		content: '';
		height: 0;
	}
	.left-right-list .content-item {
		
	}
	.category-page .content-image,
	.left-right-list .content-image	{
		display: inline-block;
		width: 45vw;
	}
	.category-page .content-image img,
	.left-right-list .content-image img {
		width: 100%;
	}
	.category-page .content-info,
	.left-right-list .content-info {
		display: inline-block;
		width: 45vw;
		box-sizing: border-box;
	}
	.category-page .content-image, 
	.left-right-list .content-item:nth-of-type(odd) .content-image {
		float: right;
	}
	.category-page .content-info, 
	.left-right-list .content-item:nth-of-type(odd) .content-info {
		padding-right: 4vw;
	}
	.category-page .content-info,
	.left-right-list .content-item:nth-of-type(even) .content-image {
		float: left;
	}
	.left-right-list .content-item:nth-of-type(even) .content-info {
		padding-left: 4vw;
	}
	.left-right-list .content-info {
		text-align: center;
		padding-top: 100px;
	}
	.left-right-list .content-info-title {
		font-size: 40px;
		color: var(--primary-bg-color);
		margin: 48px 0;
		font-weight: bold;
	}
	.category-page .content-info-title {
		font-size: 30px;
		color: var(--primary-color);
		margin: 48px 0;
		text-shadow: 1px 1px 1px rgba(0,0,0,1);
	}
	.content-info-title a {
		color: var(--primary-color);
		transition: var(--action-5s);
	}
	.content-info-title a:hover {
		color: var(--text-color);
		transition: var(--action-5s);
	}
	
	.category-page .content-info-content {
		font-size: 16px;
		line-height: 200%;
		text-align: justify;
	}
	.category-page .content-info-content p {
		text-align: justify!important;
		margin-bottom: 24px;
		text-shadow: 1px 1px 1px rgba(0,0,0,1);
	}
	.left-right-list .content-info-content p {
		font-size: 20px;
	}
	
	.logo-list {
		width: 90vw;
		margin: 0 auto;
		text-align: center;
	}
	.logo-item {
		display: inline-block;
		width: 256px;
		height: 256px;
		padding: 16px;
		overflow: hidden;
		background: #FFF;
		margin: 12px;
		border-radius: 24px;
		box-sizing: border-box;
		box-shadow: 0 0 24px rgba(0,0,0,1);
	}
	.case-h-preview {
		display: none;
	}
	.case-list,
	.case-preview,
	.case-content	{
		width: 80vw;
		margin: 0 auto;
	}
	.case-preview,
	.case-content {
		margin-top: 48px;
	}
	.case-content p {
		line-height: 200%;
		margin-bottom: 24px;
	}
	.case-preview .is-active {
		box-shadow: 0 0 24px rgba(0,0,0,.4);
	}
	.case-preview-item {
		border-radius: 8px;
		background: #121212;
	}
	.case-image {
		min-width: 100%;
		min-height: 100%;
		vertical-align: middle;
	}
	.case-preview .case-image {
		opacity: 0.2;
	}
	.case-preview .is-active .case-image {
		opacity: 1;
	}
	.case-item {
		display: inline-block;
		margin: 8px;
		padding: 16px 24px;
		border-radius: 8px;
		font-size: 14px;
		cursor: pointer;
		transition: var(--action-5s);
	}
	.case-item-inactive {
		color: var(--text-color);
		background: var(--primary-bg-hover-color);
	}
	.case-item:hover,
	.case-item-active {
		color: var(--primary-bg-hover-color);
		background: var(--primary-color);
	}
	
	.content-detail {
		padding: 5vw 10vw;
		background: #FFF;
		color: var(--primary-bg-hover-color);
		min-height: 480px;
		box-sizing: border-box;
	}
	
	.content-wrap {
		width: 58vw;
		margin-right: 2vw;
	}
	.side-wrap {
		width: 20vw;
		margin-bottom: 40px;
	}
	.side-title {
		padding: 16px 0;
		color: var(--primary-color);
		border-bottom: 2px solid var(--primary-color);
		font-size: 24px;
	}
	.side-item {
		padding: 16px 0;
		border-bottom: 1px solid #DDD;
	}
	.side-item:last-child {
		border: none;
	}
	.side-item a {
		color: var(--primary-bg-color);
	}
	.side-item a:hover {
		color: var(--primary-color);
	}
	.side-empty {
		padding: 24px 0;
		text-align: center;
		color: #999;
	}
	
	.content-wrap .content-info {
		margin: 24px 0;
		color: #999;
	}
	.content-wrap .content-descrition {
		background: #EEE;
		color: #666;
		padding: 24px;
		box-sizing: border-box;
		border: 1px solid #DEDEDE;
		margin-bottom: 24px;
	}
	.content-wrap .content-descrition strong {
		color: var(--primary-color);
	}
	.content-wrap .content-body {
		line-height: 150%!important;
	}
	.content-wrap .content-body img {
		max-width: 100%!important;
	}
	.content-wrap .content-body p {
		margin-bottom: 16px!important;
	}
	.content-wrap .content-end {
		margin-top: 48px;
		text-align: center;
		color: var(--primary-color);
		font-size: 14px;
		line-height: 150%;
	}
	
	
	.join-list {
		width: 62vw;
		margin: 0 auto;
	}
	.join-info {
		line-height: 180%;
		font-size: 18px;
		margin-bottom: 48px;
	}
	.join-item {
		padding: 36px 0;
		border-bottom: 1px solid var(--primary-color);
	}
	.join-item-title {
		font-size: 24px;
		color: var(--primary-color);
	}
	.join-item-dataset {
		margin-top: 24px;
	}
	.join-item:last-child {
		border: none;
	}
	.join-dataset-col {
		display: inline-block;
		width: 48%;
		margin-bottom: 16px;
	}
	
	.timeline-list {
		width: 90vw;
		margin: 0 auto;
		overflow: hidden;
		background-image: url('images/primary-dashed.png');
		background-repeat: repeat-y;
		background-position: 50% 50%;
	}
	.timeline-list:after {
		clear: both
	}
	.timeline-item {
		width: 43vw;
		margin-top: 60px;
		background-repeat: no-repeat;
	}
	.timeline-item img {
		width: 64px;
		height: 64px;
		margin: 0 8px;
		vertical-align: middle;
		border-radius: 34px;
		border: 2px solid var(--primary-color);
		box-shadow: 0 0 8px rgba(0,0,0,.6);
	}
	.timeline-title,
	.timeline-year {
		display: inline-block;
		
		text-shadow: 1px 1px 1px rgba(0,0,0,.8);
		font-size: 18px;
	}
	.timeline-title {
		width: 35vw;
		padding-top: 20px;
		box-sizing: border-box;
	}
	.timeline-year {
		height: 68px;
		line-height: 68px;
		color: var(--primary-color);
		font-weight: bold;
	}
	.timeline-item:nth-of-type(odd) {
		float: left;
		/* padding-right: 3vw; */
		padding-right: 58px;
		margin-right: 3vw;
		text-align: right;
		background-image: url('images/timeline-right-point.png');
		background-position: 100% 50%;
	}
	.timeline-item:nth-of-type(even) {
		float: right;
		/* padding-left: 3vw; */
		padding-left: 58px;
		margin-left: 3vw;
		background-image: url('images/timeline-left-point.png');
		background-position: 0 50%;
	}
	.timeline-item:nth-of-type(even) .timeline-image {
		float: left;
	}
	.timeline-item:nth-of-type(even) .timeline-year {
		float: left;
	}
	.timeline-item:nth-of-type(even) .timeline-title {
		padding-left: 12px;
	}
	.timeline-item:nth-of-type(odd) .timeline-title {
		float: left;
		text-align: right
	}
	.timeline-item:nth-of-type(odd) .timeline-year {
		float: right;
	}
	
	.waterfall-list {
		width: 80vw;
		height: auto;
		margin: 0 auto;
		z-index: 0;
	}
	.waterfall-item {
		height: auto;
		background: var(--primary-color);
		z-index: 1;
		padding: 16px;
		box-sizing: border-box;
		color: var(--text-color);
		border-radius: 2px;
		box-shadow: 0 0 10px rgba(0,0,0,.4);
	}
	.waterfall-image {
		margin-bottom: 16px;
	}
	.waterfall-image img {
		width: 100%;
	}
	.waterfall-info {
		margin-bottom: 16px;
	}
	.waterfall-info-title {
		font-size: 24px;
		font-weight: bold;
		margin-bottom: 24px;
	}
	.waterfall-info-title a {
		color: var(--text-color);
		transition: var(--action-5s);
		text-shadow: 1px 1px 1px rgba(0,0,0,.6);
	}
	.waterfall-info-title a:hover {
		color: var(--primary-bg-color);
		transition: var(--action-5s);
		text-shadow: none;
	}
	
}
/* 竖屏 */
@media screen and (orientation: portrait) {
	#page {
		width: 100vw;
		overflow-x: hidden;
	}
	.logo {
		display: none;
	}
	.scroll-stop {
		width: 100vw!important;
		height: 100vh!important;
		overflow: hidden!important;
	}
	.nav-bar,
	.nav-child-arrow	{
		display: none
	}
	.nav-side,
	.nav-side .close-btn {
		display: block!important;
		position: fixed;
		z-index: 99;
		background: rgba(0,0,0,.9);
		border-top-right-radius: 24px;
		border-bottom-right-radius: 24px;
		box-shadow: 0 0 10px rgba(0,0,0,.4);
	}
	.nav-side {
		width: 70vw;
		height: 100vh;
		top: 0;
		left: 0;
		box-sizing: border-box;
		padding: 24px;
	}
	.nav-side .close-btn {
		width: 5vw;
		height: 10vh;
		line-height: 10vh;
		top: 45vh;
		left: 70vw;
		font-size: 14px;
	}
	.nav-icon {
		width: 50vw;
		color: var(--primary-color);
		font-size: 20px;
	}
	.nav-item {
		font-size: 18px;
		padding-bottom: 16px;
		margin-bottom: 16px;
		border-bottom: 1px solid var(--primary-color);
	}
	.nav-item:last-child {
		padding-bottom: 0;
		margin-bottom: 0;
		border-bottom: none;
	}
	.nav-child-item {
		padding-top: 12px;
		font-size: 14px;
		text-indent: 18px;
	}
	.nav-item a {
		color: var(--text-color);
	}
	.lang-bar {
		width: 50vw;
		text-align: right;
	}
	.header {
		width: 100%;
		padding: 16px;
		display: flex;
		box-sizing: border-box;
	}
	
	.slider-wrap {
		width: 100vw;
		height: 50vw;
		overflow: hidden;
		margin-bottom: 24px;
		border-bottom-left-radius: 24px;
		border-bottom-right-radius: 24px;
	}
	.slider-item {
		height: 50vw;
		padding-top: 16vw;
		color: var(--primary-color);
		text-align: center;
		text-shadow: 1px 1px 1px rgba(255,255,255,.6);
		font-size: 30px;
		box-sizing: border-box;
		background-repeat: no-repeat;
		background-size: cover;
	}
	
	.quick-wrap {
		width: 100vw;
		min-height: 50vw;
		overflow: hidden;
		border-radius: 24px;
		
	}
	.quick-item {
		width: 100vw;
		height: 50vw;
		margin-bottom: 16px;
		position: relative;
		z-index: 10;
	}
	.quick-mask {
		display: block;
		width: 100vw;
		height: 50vw;
		position: absolute;
		z-index: 11;
		top: 0;
		left: 0;
		background: rgba(0,0,0,.6);
	}
	.quick-link {
		display: block;
		width: 100vw;
		height: 50vw;
		line-height: 50vw;
		text-align: center;
		position: absolute;
		z-index: 12;
		top: 0;
		left: 0;
		color: var(--text-color);
		text-shadow: 1px 1px 1px rgba(0,0,0,.8);
		font-size: 20px;
	}
	.quick-link .quick-icon {
		display: none;
	}
	.main-block {
		width: 100vw;
		min-height: 50vw;
		padding: 24px 0;
		box-sizing: border-box;
	}
	.main-title,
	.main-block h2 {
		font-size: 24px;
		text-align: center;
		color: var(--primary-color);
		margin-bottom: 16px;
	}
	.down-arrow {
		width: 60vw;
		height: 6vw;
		margin: 0 auto 36px auto;
		background-image: url('images/flower-line.png');
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center center;
	}
	.about-text {
		line-height: 150%;
		margin: 0 10vw 48px 10vw;
	}
	.horizontal-video {
		width: 100vw;
		min-height: 178vw;
		position: relative;
		z-index: 50;
		background-image: url('/assets/dist/page/images/video-bg.png');
		background-repeat: no-repeat;
		background-size: cover;
	}
	.video-w {
		display: none;
	}
	.video-h {
		width: inherit;
		height: inherit;
		position: absolute;
		z-index:51;
		top: 0;
		left: 0;
	}
	.video-mask {
		width: inherit;
		min-height: inherit;
		position: absolute;
		z-index:52;
		top: 0;
		left: 0;
		/* background: url('/assets/images/bg-point.png'); */
		background: rgba(0,0,0,.6);
	}
	.video-slogan-box {
		width: 100vw;
		min-height: 170vw;
		position: absolute;
		z-index: 53;
		top: 8vw;
		left: 0;
		justify-content: center;
		align-items: center;
	}
	.video-slogan {
		width: inherit;
		margin-bottom: 24px;
		box-sizing: border-box;
	}
	.video-slogan:last-child {
		margin: 0;
	}
	.video-slogan h3, .video-slogan p {
		width: 100%;
		text-align: center;
		text-shadow: 1px 1px 1px rgba(0,0,0,.8);
		
	}
	.video-slogan h3 {
		font-size: 20px;
		color: var(--text-color);
	}
	.video-slogan-info {
		width: 80vw;
		margin: 16px auto;
		background: rgba(184, 140, 79, .6);
		border: 1px solid rgba(184, 140, 79, .8);
		border-radius: 4px;
		box-shadow: 0 0 16px rgba(0,0,0,.2);
		box-sizing: border-box;
		padding: 16px 24px;
	}
	.video-slogan p {
		font-size: 14px;
		color: var(--text-color);
		margin-bottom: 16px;
	}
	.video-slogan p:last-child {
		margin: 0;
	}
	
	
	.product-list {
		width: 88vw;
		margin: 0 auto;
	}
	.product-item {
		width: inherit;
		height: 66vw;
		border: 2px solid var(--primary-color);
		box-shadow: 0 0 16px rgba(0,0,0,.6);
		margin-bottom: 16px;
		background-repeat: no-repeat;
		background-size: cover;
	}
	.product-item a {
		display: inline-block;
		width: inherit;
		height: 66vw;
		line-height: 66vw;
		text-align: center;
		font-size: 20px;
		color: var(--text-color);
		text-shadow: 1px 1px 1px rgba(0,0,0,.8);
	}
	.more {
		width: 88vw;
		padding: 16px 0;
		margin: 24px auto;
		text-align: center;
		background: var(--primary-bg-hover-color);
		box-shadow: 0 0 16px rgba(0,0,0,.6);
	}
	
	.honour-w-list {
		display: none
	}
	.honour-h-list {
		width: 100vw;
		height: 100vw;
		overflow: hidden;
		margin-bottom: 24px;
	}
	.honour-ch-list {
		width: 88vw;
		margin: 24px auto;
	}
	.news-wrap {
		width: 88vw;
		margin: 0 auto;
		
	}
	.news-top,
	.news-item {
		padding-bottom: 16px;
		margin-bottom: 16px;
		border-bottom: 1px solid var(--primary-color);
	}
	.news-item:last-child {
		padding-bottom: 0;
		margin-bottom: 0;
		border-bottom: none;
	}
	.news-item a {
		display: block;
		margin-bottom: 8px;
	}
	.news-top-image {
		margin-bottom: 16px;
	}
	.news-top-image img {
		width: 100%;
	}
	.news-top-title {
		font-size: 18px;
		margin-bottom: 8px;
	}
	.news-top-time,
	.news-top-description,
	.news-item-time {
		color: #787878;
		font-size: 14px;
		margin-bottom: 8px;
	}
	
	.category-top {
		width: 100vw;
		height: 12vw;
		position: relative;
		z-index: 20;
		margin-bottom: 24px;
		background-repeat: no-repeat;
		background-size: cover;
	}
	.category-top .down-arrow {
		display: none;
	}
	.category-top-title,
	.category-top-mask {
		width: 100vw;
		height: 12vw;
		position: absolute;
		top: 0;
		left: 0;
	}
	.category-top-mask {
		z-index: 21;
		background: rgba(0,0,0,.6);
	}
	.category-top-title .main-title {
		font-size: 18px!important;
		color: var(--text-color)!important;
	}
	.category-top-title {
		z-index: 22;
		line-height: 12vw;
	}
	
	.case-preview {
		display: none;
	}
	.case-h-preview {
		width: 88vw;
		margin: 0 auto;
		overflow: hidden;
		margin-bottom: 24px;
	}
	.case-image {
		width: 88vw;
		height: 66vw;
		box-shadow: 0 0 10px rgba(0,0,0,.6);
		background: var(--primary-bg-hover-color);
	}
	.case-content {
		color: #999;
		font-size: 14px;
		line-height: 180%;
		margin-top: 16px;
	}
 	.case-list {
		width: 88vw;
		margin: 16px auto;
	}
	.case-item {
		display: inline-block;
		margin-bottom: 8px;
		width: 100%;
		padding: 12px 0;
		text-align: center;
		border-radius: 8px;
		font-size: 14px;
		cursor: pointer;
		transition: var(--action-5s);
	}
	.case-item-inactive {
		color: var(--text-color);
		background: var(--primary-bg-hover-color);
	}
	.case-item-active {
		color: var(--primary-bg-hover-color);
		background: var(--primary-color);
	}
	
	.logo-list {
		width: 88vw;
		margin: 0 auto;
		text-align: center;
	}
	.logo-item {
		display: inline-block;
		width: 128px;
		height: 128px;
		padding: 16px;
		overflow: hidden;
		background: #FFF;
		margin: 12px;
		border-radius: 16px;
		box-sizing: border-box;
		box-shadow: 0 0 24px rgba(0,0,0,1);
	}
	
	.waterfall-list {
		width: 100vw;
		height: auto;
		padding: 24px 0;
		margin: 0 auto;
		z-index: 0;
	}
	.waterfall-item {
		height: auto;
		background: var(--primary-color);
		z-index: 1;
		padding: 8px;
		box-sizing: border-box;
		color: var(--text-color);
		border-radius: 2px;
		box-shadow: 0 0 10px rgba(0,0,0,.4);
	}
	.waterfall-image {
		margin-bottom: 8px;
	}
	.waterfall-image img {
		width: 100%;
	}
	.waterfall-info {
		margin-bottom: 8px;
	}
	.waterfall-info-title {
		font-size: 14px;
		font-weight: bold;
		margin-bottom: 8px;
	}
	.waterfall-info-title a {
		color: var(--text-color);
	}
	.waterfall-info-description {
		font-size: 12px;
		color: #CCC;
	}
	
	.left-right-list, 
	.category-list .honour-list,
	.category-page {
		width: 88vw;
		margin: 48px auto;
	}
	.category-page .content-info-title {
		font-size: 24px;
		margin-bottom: 16px;
		color: var(--primary-color);
	}
	.category-page .content-info-content {
		color: var(--text-color);
		font-size: 14px;
	}
	.category-page .content-info-content p {
		line-height: 150%;
		margin-bottom: 16px;
	}
	.category-page .content-image {
		margin-bottom: 24px;
	}
	.category-page .content-image img {
		width: 100%;
	}
	.left-right-list .content-item {
		width: 100%;
	}
	.left-right-list .content-info {
		width: 100%;
		height: 50vw;
		background: var(--primary-color);
		text-align: center;
	}
	.left-right-list .content-info-title {
		font-size: 20px;
		color: var(--primary-bg-color);
		font-weight: bold;
		padding-top: 18vw;
		padding-bottom: 2vw;
	}
	.left-right-list .content-image img {
		width: 100%;
		display: block;
	}
	
	.join-list {
		width: 88vw;
		margin: 48px auto;
	}
	.join-info {
		line-height: 180%;
		font-size: 16px;
		margin-bottom: 24px;
	}
	.join-item {
		padding: 16px 0;
		border-bottom: 1px solid var(--primary-color);
	}
	.join-item-title {
		font-size: 18px;
		color: var(--primary-color);
	}
	.join-item-dataset {
		margin-top: 24px;
	}
	.join-item:last-child {
		border: none;
	}
	.join-dataset-col {
		display: inline-block;
		width: 100%;
		margin-bottom: 8px;
	}
	
	.timeline-list {
		width: 88vw;
		margin: 48px auto;
		overflow: hidden;
		background-image: url('images/primary-dashed.png');
		background-repeat: repeat-y;
		background-position: 32px 0;
	}
	.timeline-item {
		margin-top: 60px;
		padding-left: 56px;
		margin-left: 3vw;
		background-repeat: no-repeat;
		background-image: url('images/timeline-left-point.png');
		background-position: 0 4px;
	}
	.timeline-item img {
		display: none;
		width: 64px;
		height: 64px;
		margin: 0 8px;
		vertical-align: middle;
		border-radius: 34px;
		border: 2px solid var(--primary-color);
		box-shadow: 0 0 8px rgba(0,0,0,.6);
	}
	.timeline-title,
	.timeline-year {
		display: block;
		
		text-shadow: 1px 1px 1px rgba(0,0,0,.8);
		font-size: 18px;
	}
	.timeline-title {
		box-sizing: border-box;
		font-size: 14px;
		
	}
	.timeline-year {
		color: var(--primary-color);
		font-weight: bold;
		margin-bottom: 8px
	}
	
	.content-detail {
		background: #FFF;
		color: var(--primary-bg-color);
	}
	.content-detail .main-flex {
		width: 88vw;
		margin: 0 auto;
	}
	.content-wrap h1 {
		font-size: 24px;
		padding-top: 48px;
	}
	.content-wrap .content-info {
		font-size: 14px;
		margin: 16px 0;
		color: #999;
	}
	.content-wrap .content-descrition {
		background: #EEE;
		color: #666;
		padding: 24px;
		font-size: 14px;
		box-sizing: border-box;
		border: 1px solid #DEDEDE;
		margin-bottom: 24px;
	}
	.content-wrap .content-descrition strong {
		color: var(--primary-color);
	}
	.content-wrap .content-body {
		line-height: 150%!important;
	}
	.content-wrap .content-body img {
		max-width: 100%!important;
	}
	.content-wrap .content-body p {
		margin-bottom: 16px!important;
	}
	.content-wrap .content-end {
		margin-top: 48px;
		text-align: center;
		color: var(--primary-color);
		font-size: 14px;
		line-height: 150%;
	}
	.side-wrap {
		width: 100%;
		padding: 48px 0;
	}
	.side-title {
		padding: 16px 0;
		color: var(--primary-color);
		border-bottom: 2px solid var(--primary-color);
		font-size: 20px;
	}
	.side-item {
		padding: 16px 0;
		border-bottom: 1px solid #DDD;
	}
	.side-item:last-child {
		border: none;
	}
	.side-item a {
		color: var(--primary-bg-color);
	}
	.side-empty {
		padding: 24px 0;
		text-align: center;
		color: #999;
	}
	
	.footer {
		background: #FFF;
		color: var(--primary-bg-color);
		padding: 12vw 6vw;
	}
	.footer-item {
		margin-bottom: 24px;
	}
	.footer-title {
		color: var(--primary-color);
		font-size: 18px;
		margin-bottom: 16px;
	}
	.footer-content {
		font-size: 14px;
		color: #666;
	}
	.footer-input {
		margin: 16px 0;
	}
	.footer-input input {
		width: 100%;
		height: 40px;
		color: var(--primary-color);
		background: var(--primary-bg-hover-color);
		text-align: center;
	}
	.footer-button button {
		width: 100%;
		height: 40px;
		color: var(--text-color);
		background: var(--primary-color);
	}
	.footer-toast {
		margin-top: 16px;
		color: var(--primary-color);
		font-size: 14px;
		text-align: center;
	}
}