@charset "utf-8";
/*
@font-face {
	font-family: "plantc";
	src: url("../fonts/plantc.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
}*/
/*
@font-face {
	font-family: "honglei sim Regular";
	src: url('/font/hlbsjt.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}*/
@font-face {
	font-family: "WangWei";
	src: url("../font/wangwei-zxf.ttf");
	font-weight: normal;
	font-style: normal;
}

@font-face {
    font-family: "WangWei-h1";
    src: url("../font/WangWei-h1.eot"); /* IE9 */
    src: url("../font/WangWei-h1.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    
    url(data:application/x-font-ttf;charset=utf-8;base64,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) format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
    
    url("../font/WangWei-h1.svg#WangWei-h1") format("svg"); /* iOS 4.1- */
    font-style: normal;
    font-weight: normal;
}

:root {
	--color-font: #404040;
	--color-background: #fdfdfd;
	--view-minmax: calc((100vw - 500px) / (1920 - 500));
}
body {
	background: var(--color-background);
	font-family: "WangWei", serif;
	/*font-family: "honglei sim Regular", serif;*/
	color: var(--color-font);
    margin: 0;
    overflow-x: hidden;
    text-shadow: 3px 2px 4px rgb(99 99 99 / 40%);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/*-webkit-text-stroke: 0.2px #4776e6;*/
}
h1{
    font-family: "WangWei-h1", serif;
    background: linear-gradient(195deg, #98c700 0%, #073621 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 5px 5px 10px rgb(99 99 99 / 35%);
}
h2{
    font-family: "WangWei-h1", serif;
}
h1, h2, p {
	-webkit-margin-before: 0;
	-webkit-margin-after: 0;
	margin-block-start: 0;
	margin-block-end: 0;
	font-weight: normal;
}

a {
	color: #000;
	text-decoration: none;
}

section {
	padding: var(--padding);
	box-sizing: border-box;
}

section > p,
section .content p,
#more h2 {
	--size-p: calc(28px + (32 - 22) * var(--view-minmax));
	line-height: calc(var(--size-p) + 12px);
	font-size: var(--size-p);
	text-align: center;
	margin-bottom: 1em;
}


/*************
	Header
**************/

#intro {
	--size-h1: calc(42px + (88 - 42) * var(--view-minmax));
	--size-h2: calc(20px + (28 - 20) * var(--view-minmax));
	min-height: 110vh;
}

@media (min-width: 600px) {
	#intro {
		display: flex;
		width: 100vw;
		justify-content: center;
		align-items: center;
	}
}

#intro header {
	display: grid;
	grid-template-columns: minmax(20%, 330px) 75px minmax(max-content, 1fr) 75px minmax(20%, 300px);
	grid-template-rows: 176px 55px minmax(max-content, 1fr) 35px 175px;
	grid-template-areas:
		". . . . rs"
		"ls . . . rs"
		"ls . h1 . rs"
		"ls . h2 . rs"
		"ls . h2 . .";
	transform: translateY(-88px);
}

#intro h1 {
	grid-area: h1;
	line-height: calc(var(--size-h1) * 1.382);
	font-size: var(--size-h1);
	align-self: center;
	transform: translateZ(0);
}

#intro h2 {
	grid-area: h2;
	line-height: calc(var(--size-h2) + 10px);
	font-size: var(--size-h2);
	opacity: .8;
}
#intro h2:lang(zh) {
	--size-h2: calc(22px + (34 - 22) * var(--view-minmax));
}

.slice {
	width: 100%;
	height: 100%;
	border-radius: 1rem;
	background-image: url("../images/me.jpg");
	background-size: cover;
	background-position: center bottom;
	transform-origin: 50% 100%;
	box-shadow: 0 20px 90px 0 rgba(0, 0, 0, .08), 0 9px 30px 0 rgba(0, 0, 0, .1);
}
.slice.left {
	grid-area: ls;
	background-position: left;
}
.slice.right {
	grid-area: rs;
	background-position: right;
}

@media (max-width: 900px) {
	#intro header {
		grid-template-columns: 50px 110px 1fr 150px;
		grid-template-rows: 190px 16px 100px 180px 120px;
		grid-template-areas:
			". h1 h1 h1"
			". . . rs"
			". h2 h2 rs"
			"ls ls . rs"
			"ls ls . .";
		transform: translateY(10vh);
	}
	#intro h2 {
		grid-column-end: rs;
	}
}

#content {
	--padding: 1.25em;
	padding-bottom: 220px;
	margin-bottom: -220px;
	overflow: hidden;
}

#globe {
	display: block;
	margin: 20vh auto;
	transform-origin: top;
}

@media (max-width: 36em) {
	#content p {
		text-align: left;
	}
	#content br {
		display: none;
	}
}

#photography {
	--padding: 1.25em;
	display: flex;
	flex-direction: column;
	width: 100vw;
	min-height: 100vh;
	margin: 8% 0 6%;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}
#photography img {
	width: 280px;
	height: 193.33px;
	margin: 16px;
	border: 10px solid #fff;
	border-radius: 0.55rem;
	box-sizing: border-box;
	box-shadow: 0 20px 90px 0 rgba(0, 0, 0, .08), 0 9px 30px 0 rgba(0, 0, 0, .1);
	will-change: transform;
}
#group {
	width: 645px;
	transform: rotateX(60deg) rotateY(0deg) rotateZ(45deg);
	will-change: transform;
}

@media (max-width: 600px) {
	#photography {
		margin: 100px 0;
	}
	#photography p:lang(en) {
		text-align: left;
	}
	#photography br:lang(en) {
		display: none;
	}
}

#programming {
	--padding: 0;
	display: flex;
	padding-top: 20vh;
	flex-direction: column;
	justify-content: center;
}
@media (min-width: 1920px) {
	#programming {
		align-items: center;
	}
}
@media (max-width: 536px) {
	#programming p {
		text-align: left;
		padding: 1.25em;
		word-break: break-all;
		-webkit-hyphens: auto;
		hyphens: auto;
	}
	#programming br {
		display: none;
	}
}
#nodes {
	margin: 20vh 0;
	overflow-x: auto;
	scrollbar-width: none;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: none;
}
#nodes::-webkit-scrollbar {
	width: 0;
	height: 0;
}
@media (max-width: 600px) {
	#nodes {
		margin: 10vh 0;
	}
}
#nodes svg {
	margin-top: -160px;
	background-color: #ddd6;
	padding: 50px 0;
}
#nodes text {
	/*font-family: Monaco, Consolas, "Lucida Console", monospace;*/
	font-size: 16px;
}
#nodes path {
	opacity: .3;
	stroke-dasharray: 1200;
}
#node-scroll-button {
	position: absolute;
	right: 20px;
	padding: 10px;
	margin-top: 300px;
	animation: bounce 2s infinite;
	cursor: pointer;
	transition: opacity .3s ease-in;
}
#nodes.reached #node-scroll-button {
	opacity: 0;
}
@media (min-width: 1800px) {
	#node-scroll-button {
		opacity: 0;
	}
}
@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {
		transform: translateX(0);
	}
	40% {
		transform: translateX(-30px);
	}
	60% {
		transform: translateX(-15px);
	}
}

#design {
	--padding: 1.25em;
	min-height: 68vh;
}
#design p + p {
	margin-top: 6em;
}
@media (max-width: 600px) {
	#design p {
		text-align: left;
	}
	#design br {
		display: none;
	}
}

.products .content {
	width: 33.3%;
	padding: 3vw 5vw;
	/*padding-right: 0;*/
	box-sizing: border-box;
}
.products .content p {
	color: #fdfdfd;
	text-align: left;
}
.products .content p + span {
	font-size: 20px;
	color: var(--color-background);
}
.products .button {
	position: relative;
	display: inline-block;
	color: #fff;
	padding: .65em 2em .5em 1em;
	font-size: 26px;
}
.products .button::after {
	content: " ";
	background-image: url("../img/chevron.svg");
	position: absolute;
	width: 12px;
	height: 22px;
	top: .675em;
	right: .85em;
}
.products .button:lang(zh) {
	font-size: 22px;
	padding: 0.55em 2.5em .55em 1em;
}
.products .button:lang(zh)::after {
	top: .6em;
	right: 1em;
}
.products .app-store-badge {
	height: 60px;
}
.products .showcase {
	width: 50%;
}
#xiaowei p {
	--size-p: calc(18px + (26 - 18) * var(--view-minmax));
	color: #fdfdfd;
	text-align: left;
}
#xiaowei p span {
	color: #aaa;
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
	#xiaowei p span {
		padding-top: 6px;
		padding-bottom: 1px;
		color: transparent;
		-webkit-background-clip: text;
		background-clip: text;
	}
	#xiaowei p span.a {
		background-image: linear-gradient(to right, #24c6dc, #514a9d);
	}
	#xiaowei p span.b {
		background-image: linear-gradient(to right, #f3cd13, #f35858);
	}
	#xiaowei p span.c {
		background-image: linear-gradient(to right, #dd5e89, #f7bb97);
	}
	#xiaowei p span.d {
		background-image: linear-gradient(to right, #3ca55c, #b5ac49);
	}
	#xiaowei p span.e {
		background-image: linear-gradient(to right, #4cb8c4, #3cd3ad);
	}
	#xiaowei p span.f {
		background-image: linear-gradient(to right, #4776e6, #8e54e9);
	}
}
#xiaowei .content {
    width: 40%;
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255,255,255,0.5);
    border-left: 1px solid rgba(255,255,255,0.5);
    box-shadow: 20px 20px 50px rgb(0 0 0 / 30%);
    transform-style: preserve-3d;
    /* transform: perspective(800px); */
    border-radius: 15px;
    background-color: rgb(0 0 0 / 25%);
}
#xiaowei .button {
	background-image: linear-gradient(to right, #c04848 0%, #480048);
	transition: .5s ease-in;
}
#xiaowei .button:hover {
	box-shadow: 0 6px 90px 0 #c04848, 0 8px 60px 0 #480048;
	transform: scale(1.1);
}
#xiaowei .button,
#xiaowei-logo {
	opacity: 0;
	transition: .3s ease-out;
}
#xiaowei.active .button,
#xiaowei.active #xiaowei-logo {
	opacity: 1;
	border-radius: 0.35rem;
}
#xiaowei-logo {
	height: 60px;
}
#xiaowei .showcase {
	width: 0%;
	transition: width .6s ease-out;
}
#xiaowei.active .showcase {
	width: 700px;
}
#xiaowei .showcase .container {
	position: absolute;
	top: 0;
	right: 0;
	width: 1000px;
	height: 100%;
	overflow: hidden;
}
#xiaowei .showcase img {
	max-width: 1000px;
	position: absolute;
	right: -300px;
	transition: transform 1s ease-out;
	will-change: transform;
}
#xiaowei.active .showcase img {
	transform: translateY(0);
}
#xiaowei-showcase-a {
	top: 10%;
	transform: translateY(100%);
}
#xiaowei-showcase-b {
	top: 29%;
	transform: translateY(166%);
}
#xiaowei-showcase-c {
	top: 50%;
	transform: translateY(200%);
}
#backdrop {
	position: absolute;
	background-color: #000;
	background-image: url(../picture/xwblog.jpg);
	width: 100vw;
	height: 100%;
	bottom: 0;
	z-index: -1;
	background-size: 120% auto;
	background-position: center center;
	background-repeat: no-repeat;

	animation-name: likes;
	animation-direction: alternate;
	animation-timing-function: linear;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-duration: 15s;
}
@keyframes likes {
	 0%{
	      background-size: 120% auto;
	   }
	   25%{
	      background-size: 110% auto;
	   }
	   50%{
	      background-size: 100% auto;
	   }
	   75%{
	      background-size: 110% auto;
	   }
	   100%{
	      background-size: 120% auto;
	   }
}
.products {
	--padding: 1.25em;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 110vh;
	overflow: hidden;
}

#markly {
	background-color: #2e2e2e;
	overflow: hidden;
}
#vary {
	background-color: #3d3d4a;
	overflow: hidden;
}
#markly-logo,
#vary-logo {
	height: 60px;
	border-radius: 60px;
	box-shadow: 0 16px 22px 0 rgba(0, 0, 0, .3);
	margin-bottom: 2em;
}
#markly .showcase {
	min-height: 580px;
}
#markly .showcase img {
	position: absolute;
	max-width: 900px;
	min-width: 700px;
	width: 50vw;
}
#markly-showcase-a {
	top: 0;
	right: 0;
}
#markly-showcase-b {
	top: 20vw;
	right: 5%;
}
#vary .showcase {
	min-height: 660px;
}
#vary .showcase img {
	position: absolute;
	max-width: 700px;
	min-width: 400px;
	width: 38.2vw;
}
#vary-showcase-a {
	top: 5%;
	right: 0;
}
#vary-showcase-b {
	top: 10%;
	right: 10%;
}
#vary-showcase-c {
	top: 15%;
	right: 20%;
}
@media (min-width: 2400px) {
	#xiaowei .showcase img {
		right: -100px;
	}
}
@media (min-width: 2800px) {
	#xiaowei .showcase img {
		right: 100px;
	}
	#xiaowei .showcase .container,
	#xiaowei.active .showcase {
		width: 1100px;
	}
}
@media (max-width: 1500px) {
	#markly-showcase-a {
		top: 10%;
	}
}
@media (max-width: 1500px) {
	#markly-showcase-a {
		right: -10%;
	}
	#markly-showcase-b {
		right: -15%;
	}
}
@media (max-width: 1440px) {
	.products {
		flex-direction: column;
		justify-content: start;
	}
	.products .content {
		padding-top: 5em;
		width: 100%;
		max-width: 800px;
	}
	.products .showcase {
		position: relative;
		width: 50%;
	}
	#xiaowei .content {
		padding-top: 38.2vh;
		padding-bottom: 3.75em;
		width: 100%;
	}
	#xiaowei-logo {
		height: 40px;
	}
	#xiaowei .showcase,
	#xiaowei.active .showcase {
		position: relative;
		max-width: 800px;
		width: 100%;
		height: 620px;
		margin-bottom: calc(0em - var(--padding));
		margin-right: calc(0em - var(--padding) * 2);
	}
	#xiaowei .showcase .container {
		position: relative;
		width: 100%;
	}
	#xiaowei .showcase img {
		max-width: 800px;
		right: auto;
		transform: translateY(0);
	}
	#xiaowei-showcase-a {
		top: 0;
	}
	#xiaowei-showcase-b {
		top: 19%;
	}
	#xiaowei-showcase-c {
		top: 38%;
	}
	#markly-showcase-a {
		top: 0;
		right: auto;
	}
	#markly-showcase-b {
		right: auto;
	}
	#vary-showcase-a {
		right: -10%;
	}
	#vary-showcase-b {
		top: 50px;
		right: 10%;
	}
	#vary-showcase-c {
		top: 100px;
		right: 30%;
	}
}
@media (max-width: 1200px) {
	.products .button {
		padding: .65em 2em .5em 1em;
		font-size: 22px;
	}
	.products .button::after {
		top: .6em;
	}
	.products .button:lang(zh) {
		font-size: 18px;
	}
}
@media (max-width: 650px) {
	.products .showcase {
		width: 100%;
	}
	#markly-logo,
	#vary-logo,
	.products .app-store-badge {
		height: 50px;
	}
	#vary-showcase-a {
		right: -50px;
	}
	#vary-showcase-b {
		right: 50px;
	}
	#vary-showcase-c {
		right: 150px;
	}
}
@media (max-width: 500px) {
	#markly-showcase-a {
		right: -20vw;
	}
	#markly-showcase-b {
		top: 33vh;
		right: -30vw;
	}
}
#more {
	padding: 10vh 1.25em 6vh;
}
#more h2 {
	--size-p: 26px;
	text-align: left;
	margin-bottom: .35em;
}
#more .container {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	max-width: 960px;
	margin: 6vh auto;
}
#more .item {
	flex-basis: 320px;
	padding: 0 1.75em;
	margin-top: 3.75em;
	box-sizing: border-box;
}
#social-media .tag {
	display: block;
	padding: 1em 0;
	transition: .2s ease-out;
}
#social-media .tag + .tag {
	border-top: 1px solid #ddd;
}
#social-media .tag:hover {
	padding-left: 1em;
	background-color: #fff;
	box-shadow: 0 16px 60px 0 rgba(0, 0, 0, .08), 0 6px 12px 0 rgba(0, 0, 0, .1);
}
#social-media .tag + .tag:hover {
	border-top: 1px solid #fff;
}
#talk img {
	width: 100%;
	margin-bottom: 1em;
	float: left;
	border-radius: 2px;
}
#talk p {
	line-height: 20px;
	margin-bottom: 1em;
}
#talk p a {
	display: inline-block;
	position: relative;
}
#talk p a::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 2px;
	bottom: 0;
	left: 0;
	transform: scaleX(0);
	transform-origin: bottom right;
	
	transition: transform .3s ease-in-out;
}
#talk p a:first-child::after {
	color: #f00;;
	background-color: #f00;
}
#talk p a:last-child::after {
	color: #2593ff;
	background-color: #2593ff;
}
#talk p a:hover::after {
	transform: scaleX(1);
	transform-origin: bottom left;
}

#mpwx img {
	width: 80px;
}
#mpwx .item-content div:first-child {
	margin-bottom: 2em;
}
#messages > a {
	display: block;
	text-align: center;
	transition: color .2s ease-in;
}
#messages > a:hover {
	color: #df5f5f;
}
#messages:not(.fetched) h2,
#messages:not(.fetched) a {
	display: none;
}
#messages.item {
	flex-basis: 960px;
	border-left: none!important;
}
#messages .item-content {
	column-count: 3;
	column-gap: 2em;
}
@media (max-width: 600px) {
	#messages .item-content {
		column-count: 2;
	}
}
@media (max-width: 450px) {
	#messages .item-content {
		column-count: 1;
	}
}
#messages .message {
	margin-bottom: 1.75em;
	font-family: -apple-system, BlinkMacSystemFont, "Microsoft YaHei", "Helvetica Neue", sans-serif;
	break-inside: avoid;
}
#messages .message header {
	margin-bottom: .33em;
}
#messages .message header img {
	display: inline-block;
	vertical-align: middle;
	width: 26px;
	height: 26px;
	margin-right: .33em;
	border-radius: 100%;
}
#messages .message header h3 {
	display: inline-block;
	vertical-align: middle;
	margin-block-start: 0;
	margin-block-end: 0;
	font-size: 16px;
}
#messages .message-content {
	font-size: 14px;
	line-height: 1.6;
	letter-spacing: .5px;
}
#guestbook {
	flex-basis: 640px!important;
	border-left: none!important;
}
#guestbook .inner-container {
	display: flex;
	flex-direction: column;
}
#guestbook textarea {
	height: 8em;
	min-height: 6em;
	padding: 1em;
	margin-bottom: .5em;
	resize: vertical;
	border: 1px solid #ddd;
	border-radius: 5px;
	font-size: 20px;
	line-height: 24px;
}
#guestbook label {
	font-size: 18px;
	margin-bottom: .5em;
}
#guestbook input {
	font-size: 18px;
	border: 1px solid #ddd;
	border-radius: 5px;
	padding: .5em;
	margin-bottom: .5em;
}
#guestbook input + p,
#guestbook textarea + p {
	color: #666;
	margin-bottom: 1.75em;
}
#guestbook button {
	margin: 1em auto;
	padding: .75em 1.5em;
	font-size: 18px;
	color: var(--color-background);
	background-color: var(--color-font);
	border: none;
	border-radius: 99px;
	cursor: pointer;
	transition: opacity .5s ease-out;
}
#guestbook button.inactive {
	opacity: .1;
	cursor: default;
	pointer-events: none;
}
#guestbook button.posting {
	background-color: var(--color-background);
	pointer-events: none;
}
#guestbook button.posting::after {
	content: "";
	display: inline-block;
	border: 4px solid rgba(0, 0, 0, 0.1);
	border-left-color: var(--color-font);
	border-radius: 50%;
	width: 30px;
	height: 30px;
	animation: donut-spin 1.2s linear infinite;
}
@keyframes donut-spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
#guestbook textarea:focus,
#guestbook button:focus {
	outline: none;
}
#guestbook #step-2,
#guestbook #step-3,
#guestbook .second-step #step-1,
#guestbook .third-step #step-1,
#guestbook .third-step #step-2 {
	display: none;
}
#guestbook .second-step #step-2,
#guestbook .third-step #step-3 {
	display: flex;
}
@media (min-width: 999px) {
	#more .item + .item {
		border-left: 1px solid #ddd;
	}
}
@media (max-width: 480px) {
	#more .item {
		flex-basis: 100%;
	}
}
footer {
	padding-bottom: 2em;
}
footer p {
	text-align: center;
}
footer p.weak {
	font-size: 14px;
	opacity: .6;
}

#switch-language {
	position: absolute;
	background-color: var(--color-background);
	top: 1em;
	right: 1em;
	border: none;
	font-size: 12px;
	cursor: pointer;
}