@charset "UTF-8";

@font-face {
	font-family:'Poppins';font-style:normal;font-weight:100;src:url("/statics/fonts/poppins/poppins-v5-latin-100.eot");src:local("Poppins Thin"),local("Poppins-Thin"),url("/statics/fonts/poppins/poppins-v5-latin-100%EF%B9%96.eot#iefix") format("embedded-opentype"),url("/statics/fonts/poppins/poppins-v5-latin-100.woff2") format("woff2"),url("/statics/fonts/poppins/poppins-v5-latin-100.woff") format("woff"),url("/statics/fonts/poppins/poppins-v5-latin-100.ttf") format("truetype"),url("/statics/fonts/poppins/poppins-v5-latin-100.svg#Poppins") format("svg")
}

@font-face {
	font-family:'Poppins';font-style:italic;font-weight:100;src:url("/statics/fonts/poppins/poppins-v5-latin-100italic.eot");src:local("Poppins Thin Italic"),local("Poppins-ThinItalic"),url("/statics/fonts/poppins/poppins-v5-latin-100italic%EF%B9%96.eot#iefix") format("embedded-opentype"),url("/statics/fonts/poppins/poppins-v5-latin-100italic.woff2") format("woff2"),url("/statics/fonts/poppins/poppins-v5-latin-100italic.woff") format("woff"),url("/statics/fonts/poppins/poppins-v5-latin-100italic.ttf") format("truetype"),url("/statics/fonts/poppins/poppins-v5-latin-100italic.svg#Poppins") format("svg")
}

@font-face {
	font-family:'Poppins';font-style:normal;font-weight:200;src:url("/statics/fonts/poppins/poppins-v5-latin-200.eot");src:local("Poppins ExtraLight"),local("Poppins-ExtraLight"),url("/statics/fonts/poppins/poppins-v5-latin-200%EF%B9%96.eot#iefix") format("embedded-opentype"),url("/statics/fonts/poppins/poppins-v5-latin-200.woff2") format("woff2"),url("/statics/fonts/poppins/poppins-v5-latin-200.woff") format("woff"),url("/statics/fonts/poppins/poppins-v5-latin-200.ttf") format("truetype"),url("/statics/fonts/poppins/poppins-v5-latin-200.svg#Poppins") format("svg")
}

@font-face {
	font-family:'Poppins';font-style:italic;font-weight:300;src:url("/statics/fonts/poppins/poppins-v5-latin-300italic.eot");src:local("Poppins Light Italic"),local("Poppins-LightItalic"),url("/statics/fonts/poppins/poppins-v5-latin-300italic%EF%B9%96.eot#iefix") format("embedded-opentype"),url("/statics/fonts/poppins/poppins-v5-latin-300italic.woff2") format("woff2"),url("/statics/fonts/poppins/poppins-v5-latin-300italic.woff") format("woff"),url("/statics/fonts/poppins/poppins-v5-latin-300italic.ttf") format("truetype"),url("/statics/fonts/poppins/poppins-v5-latin-300italic.svg#Poppins") format("svg")
}

@font-face {
	font-family:'Poppins';font-style:normal;font-weight:300;src:url("/statics/fonts/poppins/poppins-v5-latin-300.eot");src:local("Poppins Light"),local("Poppins-Light"),url("/statics/fonts/poppins/poppins-v5-latin-300%EF%B9%96.eot#iefix") format("embedded-opentype"),url("/statics/fonts/poppins/poppins-v5-latin-300.woff2") format("woff2"),url("/statics/fonts/poppins/poppins-v5-latin-300.woff") format("woff"),url("/statics/fonts/poppins/poppins-v5-latin-300.ttf") format("truetype"),url("/statics/fonts/poppins/poppins-v5-latin-300.svg#Poppins") format("svg")
}

@font-face {
	font-family:'Poppins';font-style:normal;font-weight:400;src:url("/statics/fonts/poppins/poppins-v5-latin-regular.eot");src:local("Poppins Regular"),local("Poppins-Regular"),url("/statics/fonts/poppins/poppins-v5-latin-regular%EF%B9%96.eot#iefix") format("embedded-opentype"),url("/statics/fonts/poppins/poppins-v5-latin-regular.woff2") format("woff2"),url("/statics/fonts/poppins/poppins-v5-latin-regular.woff") format("woff"),url("/statics/fonts/poppins/poppins-v5-latin-regular.ttf") format("truetype"),url("/statics/fonts/poppins/poppins-v5-latin-regular.svg#Poppins") format("svg")
}

@font-face {
	font-family:'Poppins';font-style:italic;font-weight:400;src:url("/statics/fonts/poppins/poppins-v5-latin-italic.eot");src:local("Poppins Italic"),local("Poppins-Italic"),url("/statics/fonts/poppins/poppins-v5-latin-italic%EF%B9%96.eot#iefix") format("embedded-opentype"),url("/statics/fonts/poppins/poppins-v5-latin-italic.svg#Poppins") format("svg")
}

@font-face {
	font-family:'Poppins';font-style:italic;font-weight:200;src:url("/statics/fonts/poppins/poppins-v5-latin-200italic.eot");src:local("Poppins ExtraLight Italic"),local("Poppins-ExtraLightItalic"),url("/statics/fonts/poppins/poppins-v5-latin-200italic%EF%B9%96.eot#iefix") format("embedded-opentype"),url("/statics/fonts/poppins/poppins-v5-latin-200italic.woff2") format("woff2"),url("/statics/fonts/poppins/poppins-v5-latin-200italic.woff") format("woff"),url("/statics/fonts/poppins/poppins-v5-latin-200italic.ttf") format("truetype"),url("/statics/fonts/poppins/poppins-v5-latin-200italic.svg#Poppins") format("svg")
}

@font-face {
	font-family:'Poppins';font-style:normal;font-weight:500;src:url("/statics/fonts/poppins/poppins-v5-latin-500.eot");src:local("Poppins Medium"),local("Poppins-Medium"),url("/statics/fonts/poppins/poppins-v5-latin-500%EF%B9%96.eot#iefix") format("embedded-opentype"),url("/statics/fonts/poppins/poppins-v5-latin-500.woff2") format("woff2"),url("/statics/fonts/poppins/poppins-v5-latin-500.woff") format("woff"),url("/statics/fonts/poppins/poppins-v5-latin-500.ttf") format("truetype"),url("/statics/fonts/poppins/poppins-v5-latin-500.svg#Poppins") format("svg")
}

@font-face {
	font-family:'Poppins';font-style:italic;font-weight:500;src:url("/statics/fonts/poppins/poppins-v5-latin-500italic.eot");src:local("Poppins Medium Italic"),local("Poppins-MediumItalic"),url("/statics/fonts/poppins/poppins-v5-latin-500italic%EF%B9%96.eot#iefix") format("embedded-opentype"),url("/statics/fonts/poppins/poppins-v5-latin-500italic.woff2") format("woff2"),url("/statics/fonts/poppins/poppins-v5-latin-500italic.woff") format("woff"),url("/statics/fonts/poppins/poppins-v5-latin-500italic.ttf") format("truetype"),url("/statics/fonts/poppins/poppins-v5-latin-500italic.svg#Poppins") format("svg")
}

@font-face {
	font-family:'Poppins';font-style:italic;font-weight:600;src:url("/statics/fonts/poppins/poppins-v5-latin-600italic.eot");src:local("Poppins SemiBold Italic"),local("Poppins-SemiBoldItalic"),url("/statics/fonts/poppins/poppins-v5-latin-600italic%EF%B9%96.eot#iefix") format("embedded-opentype"),url("/statics/fonts/poppins/poppins-v5-latin-600italic.woff2") format("woff2"),url("/statics/fonts/poppins/poppins-v5-latin-600italic.woff") format("woff"),url("/statics/fonts/poppins/poppins-v5-latin-600italic.ttf") format("truetype"),url("/statics/fonts/poppins/poppins-v5-latin-600italic.svg#Poppins") format("svg")
}

@font-face {
	font-family:'Poppins';font-style:normal;font-weight:600;src:url("/statics/fonts/poppins/poppins-v5-latin-600.eot");src:local("Poppins SemiBold"),local("Poppins-SemiBold"),url("/statics/fonts/poppins/poppins-v5-latin-600%EF%B9%96.eot#iefix") format("embedded-opentype"),url("/statics/fonts/poppins/poppins-v5-latin-600.svg#Poppins") format("svg")
}

@font-face {
	font-family:'Poppins';font-style:normal;font-weight:700;src:url("/statics/fonts/poppins/poppins-v5-latin-700.eot");src:local("Poppins Bold"),local("Poppins-Bold"),url("/statics/fonts/poppins/poppins-v5-latin-700%EF%B9%96.eot#iefix") format("embedded-opentype"),url("/statics/fonts/poppins/poppins-v5-latin-700.woff2") format("woff2"),url("/statics/fonts/poppins/poppins-v5-latin-700.woff") format("woff"),url("/statics/fonts/poppins/poppins-v5-latin-700.ttf") format("truetype"),url("/statics/fonts/poppins/poppins-v5-latin-700.svg#Poppins") format("svg")
}

@font-face {
	font-family:'Poppins';font-style:italic;font-weight:700;src:url("/statics/fonts/poppins/poppins-v5-latin-700italic.eot");src:local("Poppins Bold Italic"),local("Poppins-BoldItalic"),url("/statics/fonts/poppins/poppins-v5-latin-700italic%EF%B9%96.eot#iefix") format("embedded-opentype"),url("/statics/fonts/poppins/poppins-v5-latin-700italic.woff2") format("woff2"),url("/statics/fonts/poppins/poppins-v5-latin-700italic.woff") format("woff"),url("/statics/fonts/poppins/poppins-v5-latin-700italic.ttf") format("truetype"),url("/statics/fonts/poppins/poppins-v5-latin-700italic.svg#Poppins") format("svg")
}

@font-face {
	font-family:'Poppins';font-style:normal;font-weight:800;src:url("/statics/fonts/poppins/poppins-v5-latin-800.eot");src:local("Poppins ExtraBold"),local("Poppins-ExtraBold"),url("/statics/fonts/poppins/poppins-v5-latin-800%EF%B9%96.eot#iefix") format("embedded-opentype"),url("/statics/fonts/poppins/poppins-v5-latin-800.woff2") format("woff2"),url("/statics/fonts/poppins/poppins-v5-latin-800.woff") format("woff"),url("/statics/fonts/poppins/poppins-v5-latin-800.ttf") format("truetype"),url("/statics/fonts/poppins/poppins-v5-latin-800.svg#Poppins") format("svg")
}

@font-face {
	font-family:'Poppins';font-style:italic;font-weight:800;src:url("/statics/fonts/poppins/poppins-v5-latin-800italic.eot");src:local("Poppins ExtraBold Italic"),local("Poppins-ExtraBoldItalic"),url("/statics/fonts/poppins/poppins-v5-latin-800italic%EF%B9%96.eot#iefix") format("embedded-opentype"),url("/statics/fonts/poppins/poppins-v5-latin-800italic.woff2") format("woff2"),url("/statics/fonts/poppins/poppins-v5-latin-800italic.woff") format("woff"),url("/statics/fonts/poppins/poppins-v5-latin-800italic.ttf") format("truetype"),url("/statics/fonts/poppins/poppins-v5-latin-800italic.svg#Poppins") format("svg")
}

@font-face {
	font-family:'Poppins';font-style:normal;font-weight:900;src:url("/statics/fonts/poppins/poppins-v5-latin-900.eot");src:local("Poppins Black"),local("Poppins-Black"),url("/statics/fonts/poppins/poppins-v5-latin-900%EF%B9%96.eot#iefix") format("embedded-opentype"),url("/statics/fonts/poppins/poppins-v5-latin-900.svg#Poppins") format("svg")
}

@font-face {
	font-family:'Poppins';font-style:italic;font-weight:900;src:url("/statics/fonts/poppins/poppins-v5-latin-900italic.eot");src:local("Poppins Black Italic"),local("Poppins-BlackItalic"),url("/statics/fonts/poppins/poppins-v5-latin-900italic%EF%B9%96.eot#iefix") format("embedded-opentype"),url("/statics/fonts/poppins/poppins-v5-latin-900italic.woff2") format("woff2"),url("/statics/fonts/poppins/poppins-v5-latin-900italic.woff") format("woff"),url("/statics/fonts/poppins/poppins-v5-latin-900italic.ttf") format("truetype"),url("/statics/fonts/poppins/poppins-v5-latin-900italic.svg#Poppins") format("svg")
}

h1,h2,h3,h4,h5 {
	/*font-family: 'Poppins',sans-serif;*/
	font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial,
	'PingFang SC', 'Hiragino Sans GB', STHeiti, 'Microsoft YaHei',
  	'Microsoft JhengHei', 'Source Han Sans SC', 'Noto Sans CJK SC',
  	'Source Han Sans CN', 'Source Han Sans TC', 'Noto Sans CJK TC',
  	'WenQuanYi Micro Hei', SimSun, sans-serif;
}

p {
	/*font-family: 'Poppins',sans-serif;*/
	font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial,
	'PingFang SC', 'Hiragino Sans GB', STHeiti, 'Microsoft YaHei',
  	'Microsoft JhengHei', 'Source Han Sans SC', 'Noto Sans CJK SC',
  	'Source Han Sans CN', 'Source Han Sans TC', 'Noto Sans CJK TC',
  	'WenQuanYi Micro Hei', SimSun, sans-serif;
	font-size: 15px;
	color: #5c5c5c;;
	line-height: 30px;
	letter-spacing: .5px
}

.article-title:hover {
	text-decoration: underline;
}

.article-link {
	color: #0A2742;
}

.article-link:hover {
	color: #0A2742;
}

.article-link:visited {
	color: #5c5c5c;
}

section {
	padding-top: 3%;
	padding-bottom: 100px
}

a:hover {
	text-decoration: none
}

#blog-content {
	background: #fff;
	background: rgba(255, 255, 255, 0.2); /* 半透明背景 */
    backdrop-filter: blur(10px);         /* 边缘模糊 */
    /*border-radius: 16px;                !* 圆角 *!*/
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); /* 外围阴影 */
	padding: 30px;
}

/* 容器样式 */
#blog-content {
  margin: 0 auto;
  padding: 20px;
  line-height: 1.6;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #333;
}

/* 核心：定义CSS变量便于调整 */
:root {
	--card-bg: #1c3b29; /* 深绿色背景 */
	--text-color: #e8f5e9; /* 浅绿色文字，确保在深色背景上可读 */
	--shadow-base-color: rgba(76, 175, 80, 0.25); /* 与卡片背景协调的绿色系阴影 */
	--shadow-spread: 15px; /* 阴影扩散范围 */
	--shadow-blur: 20px; /* 阴影模糊度 */
}

/* 网站卡片样式 */
.website-card {
	background: #1c3b29;
	backdrop-filter: blur(10px);
	border-radius: 20px;
	overflow: hidden;
	/*transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);*/
	/*border: 1px solid rgba(255, 255, 255, 0.1);*/
	height: 100%;
	position: relative;
	z-index: 1;
	/* 核心：360度发散渐变阴影效果
	   通过设置多个不同方向的阴影层，颜色从中心向外逐渐变淡，
	   创造柔和、融洽的发光效果。 */
	/*box-shadow:*/
	/*	!* 中心基础发光层 *!*/
	/*	0 0 var(--shadow-blur) calc(var(--shadow-spread) * 0.3) var(--shadow-base-color),*/

	/*	!* 主方向阴影层 *!*/
	/*	0 12px var(--shadow-blur) calc(var(--shadow-spread) * 0.8) rgba(76, 175, 80, 0.1),*/
	/*	0 -12px var(--shadow-blur) calc(var(--shadow-spread) * 0.8) rgba(76, 175, 80, 0.08),*/
	/*	12px 0 var(--shadow-blur) calc(var(--shadow-spread) * 0.8) rgba(68, 160, 72, 0.05),*/
	/*	-12px 0 var(--shadow-blur) calc(var(--shadow-spread) * 0.8) rgba(84, 190, 88, 0.02),*/

	/*	!* 对角线方向阴影层 *!*/
	/*	10px 10px var(--shadow-blur) var(--shadow-spread) rgba(76, 175, 80, 0.12),*/
	/*	-10px 10px var(--shadow-blur) var(--shadow-spread) rgba(76, 175, 80, 0.12),*/
	/*	10px -10px var(--shadow-blur) var(--shadow-spread) rgba(76, 175, 80, 0.12),*/
	/*	-10px -10px var(--shadow-blur) var(--shadow-spread) rgba(76, 175, 80, 0.12),*/

	/*	!* 外边缘柔和过渡层 *!*/
	/*	0 0 60px 5px rgba(76, 175, 80, 0.08);*/

	transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);

	/* 添加一个微妙的内部高光，增强立体感 */
	/*border: 1px solid rgba(255, 255, 255, 0.05);*/
}

.website-card:hover {
	/*transform: translateY(-15px) scale(1.03);*/
	box-shadow:
			0 25px 50px rgba(0, 0, 0, 0.3),
			0 50px 75px rgba(0, 0, 0, 0.3);
	/*border-color: rgba(255, 255, 255, 0.3);*/
	transform: translateY(-8px) scale(1.02);
	/*--shadow-spread: 32px;*/
	/*--shadow-blur: 40px;*/
	/*box-shadow:*/
	/*	0 0 calc(var(--shadow-blur) * 1.2) calc(var(--shadow-spread) * 0.4) rgba(76, 175, 80, 0.3),*/
	/*	0 15px var(--shadow-blur) calc(var(--shadow-spread) * 1) rgba(76, 175, 80, 0.22),*/
	/*	0 -15px var(--shadow-blur) calc(var(--shadow-spread) * 1) rgba(76, 175, 80, 0.22),*/
	/*	15px 0 var(--shadow-blur) calc(var(--shadow-spread) * 1) rgba(68, 160, 72, 0.18),*/
	/*	-15px 0 var(--shadow-blur) calc(var(--shadow-spread) * 1) rgba(84, 190, 88, 0.18),*/
	/*	12px 12px var(--shadow-blur) calc(var(--shadow-spread) * 1.2) rgba(76, 175, 80, 0.15),*/
	/*	-12px 12px var(--shadow-blur) calc(var(--shadow-spread) * 1.2) rgba(76, 175, 80, 0.15),*/
	/*	12px -12px var(--shadow-blur) calc(var(--shadow-spread) * 1.2) rgba(76, 175, 80, 0.15),*/
	/*	-12px -12px var(--shadow-blur) calc(var(--shadow-spread) * 1.2) rgba(76, 175, 80, 0.15),*/
	/*	0 0 80px 10px rgba(76, 175, 80, 0.1);*/
}

.website-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 5px;
	z-index: 2;
}

.card-primary::before { background: var(--primary-gradient); }
.card-secondary::before { background: var(--secondary-gradient); }
.card-dark::before { background: var(--dark-gradient); }
.card-success::before { background: var(--success-gradient); }
.card-warning::before { background: var(--warning-gradient); }
.card-info::before { background: var(--info-gradient); }

.card-icon {
	width: 70px;
	height: 70px;
	border-radius: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
	margin-bottom: 20px;
	color: white;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/*.icon-primary { background: var(--primary-gradient); }*/
/*.icon-secondary { background: var(--secondary-gradient); }*/
/*.icon-dark { background: var(--dark-gradient); }*/
/*.icon-success { background: var(--success-gradient); }*/
/*.icon-warning { background: var(--warning-gradient); }*/
/*.icon-info { background: var(--info-gradient); }*/

.website-card h3 {
	font-size: 1.5rem;
	font-weight: 700;
	margin-bottom: 10px;
	color: #d4af37;
}

.website-card p {
	color: #b7d1c1;
	font-size: 0.95rem;
	line-height: 1.5;
	margin: 1rem 0;
}

.card-title {
	margin-left: 1.5rem;
	color: #b7d1c1;
}

.card-content {
	padding: 1rem;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.card-footnote {
	display: flex;
	align-items: flex-start;
}

/*.card-view {*/
/*	position: absolute;*/
/*	right: 0.5rem;*/
/*	bottom: 0.5rem;*/
/*	color: lightblue;*/
/*}*/

.visit-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 0.5rem 0;
	border-radius: 50px;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.3s ease;
	border: 2px solid #d4af37;
	background: rgba(255, 255, 255, 0.1);
	color: #d4af37;
	position: relative;
	overflow: hidden;
}

.visit-btn:hover {
	background: #d4af37;
	/*transform: translateY(-3px);*/
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
	color: #0f2c1d;
	border: 2px solid #d4af37;
}

.visit-btn i {
	margin-right: 8px;
}

/* 标题 */
#blog-content h1 {
	font-size: 1.4em;
}

#blog-content h2 {
	font-size: 1.2em;
}

#blog-content h3 {
	font-size: 1em;
}

#blog-content p {
	font-size: 14px;
}

#blog-content code {
	font-size: 14px;
}

#blog-content ul {
	list-style: none;
}


#blog-content ul li {
	font-size: 14px;
	position: relative;
	padding-left: 15px;   /* 留出符号空间 */
	margin-bottom: 8px;
}

#blog-content ul li:before {
	content: "•";        /* 自定义符号（Unicode 字符或 emoji） */
	position: absolute;
	left: 0;
	color: black;      /* 符号颜色 */
	font-weight: bold;
}

#blog-content ol {
	margin: 0;          /* 清除默认外边距 */
	padding: 0;         /* 清除默认内边距 */
	list-style: none;   /* 移除默认数字序号 */
	counter-reset: list-counter; /* 初始化计数器 */
}

#blog-content ol li {
	font-size: 14px;
	counter-increment: list-counter; /* 递增计数器 */
	position: relative;
	padding-left: 15px;
	margin-bottom: 8px;
}

#blog-content ol li::before {
      content: counter(list-counter) ".";
      position: absolute;
      left: 0;
      color: black;
      font-weight: bold;
    }


/* 代码块 */
#blog-content pre {
  border-radius: 6px;
  /*overflow: auto;*/
}

/* 表格 */
#blog-content table {
  border-collapse: collapse;
  width: 100%;
}
#blog-content th {
  background: #f5f5f5;
}
#blog-content th, 
#blog-content td {
  border: 1px solid #ddd;
  padding: 8px;
}

/* 链接 */
#blog-content a {
  color: #0366d6;
  text-decoration: none;
}
#blog-content a:hover {
  text-decoration: underline;
}

.blog-head {
	position: relative;
}

.blog-head img {
	width: 100%;
	height: auto;
	/*background-image: url("https://blog-imgfi.oss-cn-hangzhou.aliyuncs.com/202506/01.jpg");*/
}

.head-mask {
	position: absolute;
	bottom: 0;
	padding: 20px;
	border-radius: 20px;
	color: white;
	/*background: rgb(76, 75, 75, 0.7); !* 深色遮罩 *!*/
  /* 或 background: rgba(255, 255, 255, 0.3); 浅色遮罩 */
}

.head-img-describe {
	/*position: relative;*/
	text-align: right;
	/*top: 0;*/
	/*right: 0;*/
	padding-right: 10px;
	color: #5c5c5c;
	/*border-radius: 10px 10px 0 0;*/
	background: rgba(255, 255, 255, 0.9);
	/*box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.3); !* 外围阴影 *!*/
}

.head-img-content {
	color: black;
}

.head-img-source {
	padding: 0 5px 10px 0;
}

.head-mask h1 {
	overflow-wrap: break-word;
	font-size: 2em;
	text-shadow:
    1px 1px 3px black,
    -1px -1px 3px black; /* 多重阴影描边 */
}

.head-mask span {
	font-size: 1em;
}

.over-all {
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 90;
	background: #000;
	mix-blend-mode: color;
	pointer-events: none;
	opacity: 0
}

.preloader {
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	opacity: 1
}

.spinning {
	width: 100px;
	height: 100px;
	background: url("/statics/img/wait.svg") no-repeat center center;
	border: 0;
	-webkit-animation-name: spin;
	animation-name: spin;
	-webkit-animation-duration: 10s;
	animation-duration: 10s;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	margin-left: -50px;
	margin-top: -50px;
	mix-blend-mode: normal
}

.block-1 {
	width: 100%;
	height: 100vh;
	bottom: 0;
	left: 0;
	background: #000;
	position: fixed;
	z-index: 998
}

.block-2 {
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
	background: #000;
	position: fixed;
	z-index: 999
}

.logo-load {
	position: fixed;
	transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	-o-transform: translate(-50%,-50%);
	left: 50%;
	top: 50%;
	mix-blend-mode: difference;
	z-index: 9999
}

* {
	padding: 0;
	margin: 0;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	/*font-family: 'Poppins',sans-serif;*/
	font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial,
	'PingFang SC', 'Hiragino Sans GB', STHeiti, 'Microsoft YaHei',
  	'Microsoft JhengHei', 'Source Han Sans SC', 'Noto Sans CJK SC',
  	'Source Han Sans CN', 'Source Han Sans TC', 'Noto Sans CJK TC',
  	'WenQuanYi Micro Hei', SimSun, sans-serif;
}

.centered {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center
}

.between {
	padding-top: 16vh;
	/*padding-bottom: 100px*/
}

.mt-half {
	margin-top: 90vh!important
}

.mt-0 {
	margin-top: 0!important
}

.mt-10 {
	margin-top: 10px!important
}

.mt-20 {
	margin-top: 20px!important
}

.mt-30 {
	margin-top: 30px!important
}

.mt-40 {
	margin-top: 40px!important
}

.mt-50 {
	margin-top: 50px!important
}

.mt-60 {
	margin-top: 60px!important
}

.mt-70 {
	margin-top: 70px!important
}

.mt-70 {
	margin-top: 70px!important
}

.mt-80 {
	margin-top: 80px!important
}

.mt-90 {
	margin-top: 90px!important
}

.mt-100 {
	margin-top: 100px!important
}

.mt-200 {
	padding-top: 200px!important
}

.mb-0 {
	margin-bottom: 0!important
}

.mb-10 {
	margin-bottom: 10px!important
}

.mb-20 {
	margin-bottom: 20px!important
}

.mb-30 {
	margin-bottom: 30px!important
}

.mb-40 {
	margin-bottom: 40px!important
}

.mb-50 {
	margin-bottom: 50px!important
}

.mb-60 {
	margin-bottom: 60px!important
}

.mb-70 {
	margin-bottom: 70px!important
}

.mb-70 {
	margin-bottom: 70px!important
}

.mb-80 {
	margin-bottom: 80px!important
}

.mb-90 {
	margin-bottom: 90px!important
}

.mb-100 {
	margin-bottom: 100px!important
}

.bg-darks {
	background: #000
}

::-moz-selection {
	color: #000
}

::selection {
	color: #000
}

::-moz-selection {
	color: #000
}

::selection {
	background-color: #5c5c5c;
}

::-moz-selection {
	background-color: #5c5c5c;
}

mark {
	color: #212121
}

body {
	background: #fff
}

.copyright-top {
	position: fixed;
	top: 88vh;
	left: 9%;
	z-index: 10
}

.copyright-top p {
	font-size: 12px;
	margin: 10px 0 0 0;
	color: #5c5c5c;;
	font-weight: 700
}

.socials {
	position: fixed;
	top: 88vh;
	right: 9%;
	z-index: 10
}

.socials ul {
	list-style: none
}

.socials ul li {
	display: inline;
	margin-left: 15px
}

.socials ul li a {
	font-size: 11px;
	color: #5c5c5c;;
	font-weight: 700
}

.socials ul li a:hover {
	text-decoration: none
}

.toggle-btn {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	position: fixed;
	margin-top: 10vh;
	width: 50px;
	height: 50px;
	right: 4%;
	mix-blend-mode: difference;
	z-index: 99!important
}

nav .container {
	position: relative
}

.logo {
	position: fixed;
	margin-top: 6vh;
	width: 50px;
	height: 50px;
	left: 4%;
	/*背景色混合效果*/
	/*mix-blend-mode: difference;*/
	z-index: 99!important
}

.toggle-btn::before {
	content: '导 航';
	position: absolute;
	width: 80px;
	font-size: 15px;
	letter-spacing: 2px;
	color: #fff;
	right: 0;
	font-weight: 500
}

.one {
	display: block;
	position: relative;
	width: 30px;
	height: 2px;
	background: #fff
}

.two {
	display: block;
	position: relative;
	width: 30px;
	height: 2px;
	background: #fff;
	margin-top: 4px
}

.tre {
	display: block;
	position: relative;
	width: 30px;
	height: 2px;
	background: #fff;
	margin-top: 4px
}

.bg-nav {
	position: fixed;
	top: 0;
	z-index: 97;
	height: 100vh;
	width: 100%;
	background: #000;
	opacity: 0;
	pointer-events: none
}

.menu {
	opacity: 0;
	position: fixed;
	top: 0;
	z-index: 98;
	height: 100vh;
	width: 100%;
	/*background-color: #fff;*/
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-backdrop-filter: blur(40px);
	backdrop-filter: blur(40px)
}

.menu-text p {
	font-weight: 300;
	line-height: 30px;
	color: #5c5c5c;
}

#homepage-menu {
	white-space: nowrap;
}

.data {
	text-align: left
}

.data ul {
	padding: 0
}

ul {
	list-style: none;
	padding: 0
}

.menu li {
	color: black;
}

.menu li p {
	position: absolute;
	color: black;
	opacity: .5;
	margin-top: 20px;
	left: -10px
}

a.menu-link {
	font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial,
	'PingFang SC', 'Hiragino Sans GB', STHeiti, 'Microsoft YaHei',
  	'Microsoft JhengHei', 'Source Han Sans SC', 'Noto Sans CJK SC',
  	'Source Han Sans CN', 'Source Han Sans TC', 'Noto Sans CJK TC',
  	'WenQuanYi Micro Hei', SimSun, sans-serif;
	display: inline-block;
	text-decoration: none;
	color: black;
	/*color: #5c5c5c;*/
	opacity: .7;
	/*-webkit-text-stroke: 1px #fff;*/
	font-size: 40px;
	font-weight: 400;
	margin: 0 20px;
	overflow: hidden;
	-webkit-transition: all .4s ease;
	transition: all .4s ease
}

a.menu-link:hover {
	opacity: 1;
	-webkit-text-fill-color:#fff;
	-webkit-text-stroke: 0.4px var(--red);
	animation: animate 0.5s linear infinite;
}
@keyframes animate {
  0%, 100% {
    text-shadow: -1.5px -1.5px 0 #0ff, 1.5px 1.5px 0 #f00;
  }
  25% {
    text-shadow: 1.5px 1.5px 0 #0ff, -1.5px -1.5px 0 #f00;
  }
  50% {
    text-shadow: 1.5px -1.5px 0 #0ff, 1.5px -1.5px 0 #f00;
  }
  75% {
    text-shadow: -1.5px 1.5px 0 #0ff, -1.5px 1.5px 0 #f00;
  }
}
a.menu-link.active {
	opacity: 1
}

.toggle-btn:hover {
	cursor: pointer
}

.address-menu h3 {
	font-size: 20px;
	color: #5c5c5c;
	font-weight: 400
}

.address-menu h4 {
	color: #5c5c5c;
	font-size: 12px;
	opacity: .5;
}

a {
	cursor: pointer;
}

.cursor,.cursor1 {
	pointer-events: none;
	position: fixed;
	top: 0;
	left: 0;
	border-radius: 50%;
	opacity: 0;
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	-webkit-transition: opacity .3s ease-in-out,-webkit-transform .3s ease-in-out;
	transition: opacity .3s ease-in-out,-webkit-transform .3s ease-in-out;
	transition: opacity .3s ease-in-out,transform .3s ease-in-out;
	transition: opacity .3s ease-in-out,transform .3s ease-in-out,-webkit-transform .3s ease-in-out;
	z-index: 9999999
}

.cursor {
	width: 7px;
	height: 7px;
	background-color: #5c5c5c;;
	mix-blend-mode: difference
}

.cursor1 {
	width: 30px;
	height: 30px;
	border: 1px solid #fff;
	mix-blend-mode: difference
}

.cursor1.expand {
	background-color: #5c5c5c;;
	border: 0;
	mix-blend-mode: difference;
	transform: translate(-50%,-50%) scale(1.6);
	-webkit-transform: translate(-50%,-50%) scale(1.6);
	-moz-transform: translate(-50%,-50%) scale(1.6);
	-ms-transform: translate(-50%,-50%) scale(1.6);
	-o-transform: translate(-50%,-50%) scale(1.6)
}

.cursor1.drag::before,.cursor1.drag::after {
	color: #000;
	font-family: 'fonticons';
	font-size: .6rem;
	margin-top: -.6rem;
	position: absolute;
	top: 50%
}

.cursor1.drag::before {
	content: '\e801';
	left: -10px
}

.cursor1.drag::after {
	content: '\e803';
	right: -10px
}

.cursorDrag {
	cursor: none!important
}

.cursor1.explore {
	width: 100px;
	height: 100px;
	background: url("../img/click.svg") no-repeat center center;
	border: 0;
	-webkit-animation-name: spin;
	animation-name: spin;
	-webkit-animation-duration: 10s;
	animation-duration: 10s;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	margin-left: -50px;
	margin-top: -50px;
	mix-blend-mode: normal
}

.cursor1.zoom {
	width: 100px;
	height: 100px;
	background: url("../img/zoom.svg") no-repeat center center;
	border: 0;
	-webkit-animation-name: spin;
	animation-name: spin;
	-webkit-animation-duration: 10s;
	animation-duration: 10s;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	margin-left: -50px;
	margin-top: -50px;
	mix-blend-mode: normal
}

.cursor1.next {
	width: 100px;
	height: 100px;
	background: url("../img/next.svg") no-repeat center center;
	border: 0;
	-webkit-animation-name: spin;
	animation-name: spin;
	-webkit-animation-duration: 10s;
	animation-duration: 10s;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	margin-left: -50px;
	margin-top: -50px;
	mix-blend-mode: normal
}

.cursor1.prev {
	width: 100px;
	height: 100px;
	background: url("../img/prev.svg") no-repeat center center;
	border: 0;
	-webkit-animation-name: spin;
	animation-name: spin;
	-webkit-animation-duration: 10s;
	animation-duration: 10s;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	margin-left: -50px;
	margin-top: -50px;
	mix-blend-mode: normal
}

.scrolls {
	z-index: 10;
	position: absolute;
	top: calc(90vh - 50px);
	left: calc(50% - 50px);
	-webkit-animation-name: spin;
	animation-name: spin;
	-webkit-animation-duration: 20s;
	animation-duration: 20s;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	animation-timing-function: linear
}

/*取消旧版遮罩层*/
./*bg-right {
	background: var(--red);
	z-index: 3;
	position: fixed;
	transform: translate(-50%,-50%) skew(20deg);
	-webkit-transform: translate(-50%,-50%) skew(20deg);
	-moz-transform: translate(-50%,-50%) skew(20deg);
	-ms-transform: translate(-50%,-50%) skew(20deg);
	-o-transform: translate(-50%,-50%) skew(20deg);
	text-align: center;
	left: 50%;
	height: 80vh;
	width: 20vw;
	top: 50vh
}*/

.bg-3 {
	background: url("../img/home.jpg") center no-repeat;
	background-size: cover;
	z-index: 3;
	position: fixed;
	transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	-o-transform: translate(-50%,-50%);
	text-align: center;
	left: 50%;
	height: 60vh;
	width: 40vw;
	top: 50vh
}

.heading-text-front {
	position: absolute;
	transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	-o-transform: translate(-50%,-50%);
	/*text-align: left;*/
	left: 50%;
	width: 90%;
	top: 50%;
	z-index: 4
}

.heading-text-front h1 {
	font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial,
	'PingFang SC', 'Hiragino Sans GB', STHeiti, 'Microsoft YaHei',
  	'Microsoft JhengHei', 'Source Han Sans SC', 'Noto Sans CJK SC',
  	'Source Han Sans CN', 'Source Han Sans TC', 'Noto Sans CJK TC',
  	'WenQuanYi Micro Hei', SimSun, sans-serif;
	text-transform: uppercase;
	text-align: left;
	color: transparent;
	/*color: #5c5c5c;*/
	font-weight: 900;
	font-size: 50px;
	/*-webkit-text-stroke: 1px var(--grey);*/
	letter-spacing: 1px
}

.heading-text-front h2 {
	text-align: right;
	color: transparent;
	-webkit-text-stroke: 1px #fff;
}

.heading-text-front h5 {
	text-align: right;
	color: transparent;
	/*-webkit-text-stroke: 1px #fff;*/
}

.heading-text-front h6 {
	font-weight: bold;
	color: transparent;
	/*margin-top: 10vh;*/
	/*-webkit-text-stroke: 1px var(--color-background);*/
}

.heading-text-front h6 span {
	font-size:30px;
	font-weight: bold;
	color: transparent;
	/*-webkit-text-stroke: 1px #fff;*/
}

.heading-text-back {
	position: absolute;
	transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	-o-transform: translate(-50%,-50%);
	/*text-align: right;*/
	left: 50%;
	width: 90%;
	top: 50%;
	z-index: -1
}

.heading-text-back h1 {
	font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial,
	'PingFang SC', 'Hiragino Sans GB', STHeiti, 'Microsoft YaHei',
  	'Microsoft JhengHei', 'Source Han Sans SC', 'Noto Sans CJK SC',
  	'Source Han Sans CN', 'Source Han Sans TC', 'Noto Sans CJK TC',
  	'WenQuanYi Micro Hei', SimSun, sans-serif;
	text-transform: uppercase;
	text-align: left;
	color: #5c5c5c;
	font-weight: 900;
	font-size: 50px;
	/*-webkit-text-stroke: 1px var(--grey);*/
	letter-spacing: 1px
}

.heading-text-back h2 {
	text-align: right;
	color: #5c5c5c;
	-webkit-text-stroke: 0 #fff;
}

.heading-text-back h5 {
	text-align: right;
	color: #5c5c5c;
	/*-webkit-text-stroke: 0 #fff;*/
}

.heading-text-back h6 {
	font-weight: bold;
	color: black;
	/*-webkit-text-stroke: 1px var(--grey);*/
}

.heading-text-back h6 span {
	font-size:30px;
	font-weight: bold;
	color: var(--red);
	/*-webkit-text-stroke: 1px var(--grey);*/
}

/*.preview-video {
  object-fit: cover;
  width: 100%;
  height: 100%;
}*/
.preview-overlay {
  position: absolute;
  bottom: -1px;
  left: -100vw;
  right: 0;
  z-index: 3;
  filter: drop-shadow(var(--gray) 100vw 0px);
}
.preview-overlay .preview-waves {
  position: relative;
  width: 100%;
  height: 25vh;
  margin-bottom: -7px;
  min-height: 5vh;
  max-height: 25vh;
}
@media (max-width: 768px) {
  .preview-overlay .preview-waves {
    height: 150px;
    min-height: 80px;
  }
}
.preview-overlay .preview-parallax > use {
  /*animation: move-forever 25s cubic-bezier(1, 0.8, 0.6, ) infinite;*/
  animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
}
.preview-overlay .preview-parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 10s;
}
.preview-overlay .preview-parallax > use:nth-child(2) {
  animation-delay: -4s;
  animation-duration: 13s;
}
.preview-overlay .preview-parallax > use:nth-child(3) {
  animation-delay: -6s;
  animation-duration: 16s;
}
.preview-overlay .preview-parallax > use:nth-child(4) {
  animation-delay: -8s;
  animation-duration: 23s;
}

@keyframes move-forever {
    0% {
        transform: translate3d(-90px, 0, 0);
    }
    100% {
        transform: translate3d(85px, 0, 0);
    }
}

.main-head {
	position: relative;
	height: 100vh;
	overflow: hidden;
	z-index: -1
}

.main-head .container {
	position: relative
}

h1.title {
	font-size: 90px
}

@-webkit-keyframes spin {
	from {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	to {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg)
	}
}

@keyframes spin {
	from {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	to {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg)
	}
}

.main-title::before {
	position: absolute;
	width: 70px;
	height: 2px;
	background: #eeeeee;
	content: '';
	bottom: -10px;
	left: calc(50% - 35px)
}

.main-title h2 {
	text-transform: uppercase;
	color: #5c5c5c;;
	font-size: 40px;
	font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial,
	'PingFang SC', 'Hiragino Sans GB', STHeiti, 'Microsoft YaHei',
  	'Microsoft JhengHei', 'Source Han Sans SC', 'Noto Sans CJK SC',
  	'Source Han Sans CN', 'Source Han Sans TC', 'Noto Sans CJK TC',
  	'WenQuanYi Micro Hei', SimSun, sans-serif;
	font-weight: 900
}

.main-title h2 span {
	-webkit-text-stroke: 1px #fff;
	color: #5c5c5c;
	font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial,
	'PingFang SC', 'Hiragino Sans GB', STHeiti, 'Microsoft YaHei',
  	'Microsoft JhengHei', 'Source Han Sans SC', 'Noto Sans CJK SC',
  	'Source Han Sans CN', 'Source Han Sans TC', 'Noto Sans CJK TC',
  	'WenQuanYi Micro Hei', SimSun, sans-serif;
	font-weight: 900
}

.main-title h3 {
	text-transform: uppercase;
	color: lightslategray;;
	font-size: 20px;
	font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial,
	'PingFang SC', 'Hiragino Sans GB', STHeiti, 'Microsoft YaHei',
  	'Microsoft JhengHei', 'Source Han Sans SC', 'Noto Sans CJK SC',
  	'Source Han Sans CN', 'Source Han Sans TC', 'Noto Sans CJK TC',
  	'WenQuanYi Micro Hei', SimSun, sans-serif;
	font-weight: 300
}

.folio-content {
	background: #eeeeee
}

.folio-content .folio-item {
	margin-top: 100px;
	position: relative;
	padding: 0 20px
}

.folio-content .folio-item .img-folio {
	z-index: 2;
	position: relative
}

.folio-content .folio-item .img-folio a {
	cursor: none
}

.folio-content .folio-item .img-folio img {
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%)
}

.folio-content .folio-item .img-folio:hover img {
	-webkit-filter: grayscale(0%);
	filter: grayscale(0%)
}

.folio-content .folio-item .text-folio h2.text-1 {
	position: absolute;
	font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial,
	'PingFang SC', 'Hiragino Sans GB', STHeiti, 'Microsoft YaHei',
  	'Microsoft JhengHei', 'Source Han Sans SC', 'Noto Sans CJK SC',
  	'Source Han Sans CN', 'Source Han Sans TC', 'Noto Sans CJK TC',
  	'WenQuanYi Micro Hei', SimSun, sans-serif;
	color: #5c5c5c;
	font-weight: 900;
	font-size: 40px;
	letter-spacing: 2px;
	-webkit-text-stroke: 1px #fff;
	z-index: 4;
	left: 50%;
	bottom: 1px;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%)
}

.folio-content .folio-item .text-folio h2.text-2 {
	position: absolute;
	font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial,
	'PingFang SC', 'Hiragino Sans GB', STHeiti, 'Microsoft YaHei',
  	'Microsoft JhengHei', 'Source Han Sans SC', 'Noto Sans CJK SC',
  	'Source Han Sans CN', 'Source Han Sans TC', 'Noto Sans CJK TC',
  	'WenQuanYi Micro Hei', SimSun, sans-serif;
	color: #5c5c5c;;
	font-weight: 900;
	font-size: 40px;
	letter-spacing: 2px;
	z-index: 1;
	left: 50%;
	bottom: 1px;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%)
}

.bg-about {
	background: url("../img/about-1.jpg") center no-repeat;
	z-index: 3;
	position: fixed;
	text-align: center;
	left: 50%;
	height: 30vh;
	width: 40vw;
	top: 20vh
}

.bg-about-2 {
	background: url("../img/about-2.jpg") center no-repeat;
	z-index: 3;
	position: fixed;
	text-align: center;
	left: 10vw;
	height: 50vh;
	width: 30vw;
	top: 30vh
}

.about {
	background: #eeeeee
}

.about-page {
	background: #000
}

#img-about {
	position: relative
}

.img-mask {
	position: absolute;
	width: 120%;
	height: 120%;
	left: 0;
	top: 0;
	z-index: 2;
	background: #000
}

.about-text h3 {
	font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial,
	'PingFang SC', 'Hiragino Sans GB', STHeiti, 'Microsoft YaHei',
  	'Microsoft JhengHei', 'Source Han Sans SC', 'Noto Sans CJK SC',
  	'Source Han Sans CN', 'Source Han Sans TC', 'Noto Sans CJK TC',
  	'WenQuanYi Micro Hei', SimSun, sans-serif;
	margin-bottom: 20px;
	color: #5c5c5c;;
	font-weight: 800
}

.abt-text {
	margin-left: -200px;
	background: #fff;
	padding: 40px 40px
}

.abt-text a {
	font-size: 14px;
	color: #5c5c5c;
	font-weight: 900;
	position: relative
}

.abt-text a::after {
	width: 40px;
	height: 2px;
	position: absolute;
	content: '';
	top: 10px;
	margin-left: 5px;
	background: #5c5c5c;
	transition: all ease-in-out .3s;
	-webkit-transition: all ease-in-out .3s;
	-moz-transition: all ease-in-out .3s;
	-ms-transition: all ease-in-out .3s;
	-o-transition: all ease-in-out .3s
}

.abt-text a:hover {
	text-decoration: none
}

.abt-text a:hover::after {
	margin-left: 15px
}

.sub-abt {
	position: absolute;
	right: 0;
	top: 50%;
	transform: rotate(90deg) translateY(-50%) translateX(-50%);
	-webkit-transform: rotate(90deg) translateY(-50%) translateX(-50%);
	-moz-transform: rotate(90deg) translateY(-50%) translateX(-50%);
	-ms-transform: rotate(90deg) translateY(-50%) translateX(-50%);
	-o-transform: rotate(90deg) translateY(-50%) translateX(-50%)
}

.sub-abt p {
	text-align: center;
	margin: 0;
	font-weight: 700
}

.footer {
	z-index: -2;
	/*padding: 0 0 50px 0*/
	padding-bottom: 20px;
	/*position: relative;*/
	/*top: 10vh;*/
	background: #eeeeee;
}

.footer .logo-foot {
	mix-blend-mode: difference
}

.footer a {
	font-size: 14px
}

.footer a:hover {
	text-decoration: none
}

.footer .sosmed ul {
	list-style: none
}

.footer .sosmed ul li {
	display: inline;
	margin-left: 10px
}

.footer .sosmed ul li a {
	font-size: 12px;
	color: #5c5c5c;;
	font-weight: 600
}

.footer .sosmed ul li a:hover {
	text-decoration: none
}

.footer .mail a {
	font-size: 12px;
	color: #5c5c5c;;
	font-weight: 600
}

.footer .copyright p {
	line-height: normal;
	font-size: 12px;
	margin: 5px 0 0 0;
	color: #5c5c5c
}

.service-item {
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
	padding: 30px 30px;
	overflow: hidden;
	background: #050505
}

.front {
	z-index: 3
}

.service-icon {
	margin: 20px 0
}

.service-icon img {
	width: 70px
}

.service-text {
	padding: 20px 0
}

.service-text h3 {
	color: #5c5c5c;;
	text-align: left;
	font-size: 20px;
	font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial,
	'PingFang SC', 'Hiragino Sans GB', STHeiti, 'Microsoft YaHei',
  	'Microsoft JhengHei', 'Source Han Sans SC', 'Noto Sans CJK SC',
  	'Source Han Sans CN', 'Source Han Sans TC', 'Noto Sans CJK TC',
  	'WenQuanYi Micro Hei', SimSun, sans-serif;
	font-weight: 700
}

.service-text p {
	margin-top: 20px
}

.service-list {
	padding: 0;
	margin-top: 20px
}

.service-line {
	margin-top: 60px;
	width: 80px;
	height: 3px;
	background: #fff
}

.service-list li {
	display: block;
	color: #5c5c5c;;
	margin: 10px 0
}

.partner {
	padding-left: 40px;
	padding-right: 40px
}

.partner-list {
	border: 1px solid #5c5c5c
}

.partner-list img {
	padding: 30px
}

.blog-img:hover img {
	transform: scale(0.98);
	-webkit-transform: scale(0.98);
	-moz-transform: scale(0.98);
	-ms-transform: scale(0.98);
	-o-transform: scale(0.98)
}

.blog-img img {
	transition: all .5s ease-in-out;
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out
}

.blog-text {
	padding: 0 10px 0 0
}

.blog-text h3 {
	color: #5c5c5c;;
	font-size: 1rem;
	margin-top: 20px;
	/*margin-bottom: 10px;*/
	/*font-weight: 700*/
}

.blog-text > span {
	font-size: 0.8rem;
}
.blog-text > p {
	font-size: 0.8rem;
}

.blog-text > p {
	color: #8f8f8f
}

.timeMaker {
		font-size: 0.6rem;
	}

.bg-detail-blog {
	background: url("../img/blog/detail.jpg") center no-repeat;
	background-size: cover;
	z-index: -1;
	position: absolute;
	text-align: center;
	left: 0;
	height: 100vh;
	width: 100vw;
	top: 0
}

h3.detail-title {
	color: #5c5c5c;;
	text-transform: uppercase;
	font-weight: 900;
	font-size: 40px
}

.article {
	color: #5c5c5c;
}

.article h3 {
	font-size: 24px;
	font-weight: 700
}

.article p {
	margin-top: 20px;
	color: #8f8f8f
}

.article .quote p {
	font-weight: 500;
	font-size: 20px;
	text-align: center;
	margin: 50px 0;
	color: #c3c3c3
}

.article .author p {
	margin-bottom: 20px
}

.line {
	height: 1px;
	margin-top: 40px;
	width: 100px;
	background: #fff;
	position: absolute;
	left: calc(50% - 50px)
}

.bg-work {
	background: url("https://travel-imgfi.oss-cn-shenzhen.aliyuncs.com/home/homepage_2.jpg") center no-repeat;
	z-index: 3;
	position: fixed;
	text-align: center;
	left: 50%;
	height: 30vh;
	width: 40vw;
	top: 20vh
}

.bg-work-2 {
	background: url("https://travel-imgfi.oss-cn-shenzhen.aliyuncs.com/home/homepage_1.jpg") center no-repeat;
	z-index: 3;
	position: fixed;
	text-align: center;
	left: 10vw;
	height: 50vh;
	width: 30vw;
	top: 30vh
}

.smooth-scroll {
	z-index: 9;
	position: fixed;
	text-align: center;
	left: 0;
	height: 10vh;
	width: 100%;
	top: 90vh;
}
.smooth-scroll a {
	font-size: 50px;
	color: var(--blue);
	line-height: normal;
}

.bg-detail-work {
	background: url("../img/detail-work/1/1.jpg") center no-repeat;
	background-size: cover;
	z-index: -1;
	position: fixed;
	left: 0;
	height: 50vh;
	width: 50vw;
	left: 25%;
	top: 25vh
}

.bg-detail-work-2 {
	background: url("../img/detail-work/2/3.jpg") center no-repeat;
	background-size: cover;
	z-index: -1;
	position: fixed;
	left: 0;
	height: 50vh;
	width: 50vw;
	left: 25%;
	top: 25vh
}

.about-work h3 {
	color: #5c5c5c;;
	font-size: 17px;
	font-weight: 700
}

.about-work p {
	color: #c3c3c3;
	font-size: 14px;
	margin: 0
}

.about-work a {
	font-size: 12px;
	color: #5c5c5c;
}

.next-project {
	color: #5c5c5c;;
	margin-top: 100px;
	background-size: cover
}

.next-project p {
	margin: 0
}

.next-project h3 {
	font-weight: 900;
	color: transparent;
	/*color: #5c5c5c;*/
	font-size: 40px;
	-webkit-text-stroke: 1px #5c5c5c;
	transition: ease-in-out .3s all;
	-webkit-transition: ease-in-out .3s all;
	-moz-transition: ease-in-out .3s all;
	-ms-transition: ease-in-out .3s all;
	-o-transition: ease-in-out .3s all
}

.next-project h3:hover {
	color: #5c5c5c;
}

.right-over-next {
	position: absolute;
	width: 50%;
	height: 100%;
	right: 0;
	top: 0;
	z-index: 10
}

.right-over-prev {
	position: absolute;
	width: 50%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 11
}

.bg-error {
	background: url("../img/error/1.jpg") center no-repeat;
	z-index: -1;
	position: fixed;
	text-align: center;
	left: 25%;
	height: 50vh;
	width: 50vw;
	top: 25vh
}

.error-page {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 99;
	transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	-o-transform: translate(-50%,-50%)
}

.error-page h2 {
	font-size: 120px;
	-webkit-text-stroke: 1px #fff;
	color: #5c5c5c
	/*color: transparent*/
}

.error-page p {
	color: #5c5c5c;
}

.error-page a {
	color: #adadad
}

#menu__toggler {
	display: none;/*临时禁止显示*/
}

.menu__toggler {
	position: fixed;
	bottom: 20px;
	left: 20px;
	border-radius: 100%;
	-webkit-border-radius: 100%;
	-moz-border-radius: 100%;
	-ms-border-radius: 100%;
	-o-border-radius: 100%;
	-webkit-text-stroke: 1px var(--red);
	z-index: 102;
	height: 50px;
	width: 50px;
	outline: 0;
	cursor: pointer;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	background: #fff
}

.menu__toggler span,.menu__toggler span::before,.menu__toggler span::after {
	position: absolute;
	content: '';
	width: 25px;
	height: 2.5px;
	background: var(--red);
	border-radius: 20px;
	left: 12px;
	-webkit-transition: 500ms cubic-bezier(0.77,0,0.175,1);
	transition: 500ms cubic-bezier(0.77,0,0.175,1)
}

.menu__toggler span::before {
	top: -8px;
	left: 0
}

.menu__toggler span::after {
	top: 8px;
	left: 0
}

.menu__toggler.activez>span {
	background: transparent
}

.menu__toggler.activez>span::before,.menu__toggler.activez>span::after {
	background: #000;
	top: 0
}

.menu__toggler.activez>span::before {
	-webkit-transform: rotate(-225deg);
	transform: rotate(-225deg)
}

.menu__toggler.activez>span::after {
	-webkit-transform: rotate(225deg);
	transform: rotate(225deg)
}

.menus {
	position: fixed;
	left: -30%;
	z-index: 101;
	color: #000;
	background: #ffff;
	-webkit-clip-path: polygon(0 0,100% 0,85% 100%,0% 100%);
	clip-path: polygon(0 0,100% 0,85% 100%,0% 100%);
	width: 30%;
	height: 100%;
	padding: 100px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-transition: 300ms left cubic-bezier(0.77,0,0.175,1);
	transition: 300ms left cubic-bezier(0.77,0,0.175,1)
}

@media only screen and (max-width:600px) {
	.menus {
		width: 250px;
		left: -250px;
		padding: 50px
	}
}

.menus.activez {
	left: 0
}

.menus a {
	font-size: 30px;
	margin-bottom: 1rem;
	color: #000
}

.menus a:hover {
	opacity: .5;
	color: red;
	/*transform: scale(2);*/
	animation: animate 0.5s linear infinite;
}
@keyframes animate {
  0%, 100% {
    text-shadow: -1.5px -1.5px 0 #0ff, 1.5px 1.5px 0 #f00;
  }
  25% {
    text-shadow: 1.5px 1.5px 0 #0ff, -1.5px -1.5px 0 #f00;
  }
  50% {
    text-shadow: 1.5px -1.5px 0 #0ff, 1.5px -1.5px 0 #f00;
  }
  75% {
    text-shadow: -1.5px 1.5px 0 #0ff, -1.5px 1.5px 0 #f00;
  }
}

.full-page {
	height: 100vh;
	width: 100vw;
	overflow: hidden
}

.swiper-slide {
	height: 100vh
}

.img-slide {
	width: 100%;
	position: absolute;
	z-index: 3;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	-o-transform: translate(-50%,-50%)
}

.img-slide img {
	width: 100%
}

.text-slide {
	height: 60px;
	position: relative;
	overflow: hidden;
	position: absolute;
	top: 40%;
	left: 10%;
	width: 100%
}

.text-slide h2.text-1 {
	position: absolute;
	font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial,
	'PingFang SC', 'Hiragino Sans GB', STHeiti, 'Microsoft YaHei',
  	'Microsoft JhengHei', 'Source Han Sans SC', 'Noto Sans CJK SC',
  	'Source Han Sans CN', 'Source Han Sans TC', 'Noto Sans CJK TC',
  	'WenQuanYi Micro Hei', SimSun, sans-serif;
	color: #5c5c5c;
	/*color: #5c5c5c;*/
	font-weight: 900;
	font-size: 60px;
	letter-spacing: 2px;
	-webkit-text-stroke: 1px #fff;
	z-index: 4;
	pointer-events: none
}

.text-slide h2.text-2 {
	position: absolute;
	font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial,
	'PingFang SC', 'Hiragino Sans GB', STHeiti, 'Microsoft YaHei',
  	'Microsoft JhengHei', 'Source Han Sans SC', 'Noto Sans CJK SC',
  	'Source Han Sans CN', 'Source Han Sans TC', 'Noto Sans CJK TC',
  	'WenQuanYi Micro Hei', SimSun, sans-serif;
	color: #5c5c5c;;
	font-weight: 900;
	font-size: 60px;
	letter-spacing: 2px;
	z-index: 1;
	left: 0;
	pointer-events: none
}

.swiper-slide {
	-webkit-transition-delay: 2s;
	transition-delay: 2s;
	transition: .2s ease all;
	-webkit-transition: .2s ease all;
	-moz-transition: .2s ease all;
	-ms-transition: .2s ease all;
	-o-transition: .2s ease all
}

.swiper-slide-next .img-slide img {
	filter: grayscale(100%);
	-webkit-filter: grayscale(100%)
}

.swiper-slide-prev .img-slide img {
	filter: grayscale(100%);
	-webkit-filter: grayscale(100%)
}

.swiper-wrapper {
	-webkit-transition-delay: .2s;
	transition-delay: .2s
}

.swiper-container-horizontal>.swiper-pagination-progressbar,.swiper-container-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
	width: 40%;
	height: 2px;
	left: 30%;
	top: auto;
	bottom: 10%
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
	background: #ffff;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	-webkit-transform: scale(0);
	transform: scale(0);
	-webkit-transform-origin: left top;
	transform-origin: left top
}

.swiper-pagination-progressbar {
	position: absolute;
	background: rgba(218,213,213,0.25)
}

.bg-half {
	position: fixed;
	width: 50%;
	height: 100vh;
	background: #ececec;
	right: 0;
	top: 0
}

.bg-half-l {
	position: fixed;
	width: 50%;
	height: 100vh;
	background: #111;
	left: 0;
	top: 0
}

.intro {
	position: relative;
	margin: 30px;
	overflow: hidden
}

.intro:hover .over-intro {
	height: 100%
}

.intro .over-intro {
	position: absolute;
	pointer-events: none;
	width: 100%;
	height: 0;
	background: #050505;
	z-index: 2;
	bottom: 0;
	left: 0;
	opacity: .5;
	transition: all ease .3s;
	-webkit-transition: all ease .3s;
	-moz-transition: all ease .3s;
	-ms-transition: all ease .3s;
	-o-transition: all ease .3s
}

h3.glp {
	color: #5c5c5c;
}

h3.lght {
	color: #f0353c
}