html.color-html {
	font-size: calc(100 / 1600 * 100vw); /* 设计稿是1600px的，1rem是设计稿上的100px */
}

body.color-body {
	font-size: 0.14rem;
}

#color-intro {
	display: flex;
	position: relative;
	height: 100%;
}

#color-intro .part {
	display: flex;
	flex-direction: column;
	position: relative;
	overflow: hidden;
}

.color-intro-bar {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	overflow: hidden;
}

#color-intro-button {
	position: absolute;
	right: 0.25rem;
	top: 50%;
	width: 0.5rem;
	font-size: 0.5rem;
	transform: translateY(-50%);
}

#color-intro-main {
	display: flex;
	position: relative;
}

#color-intro-content {
	display: none;
	flex-direction: column;
	position: absolute;
	left: -100%;
	top: 0;
	width: 100%;
	height: 100%;
	padding: 0 9.38%;
	background-color: rgba(0, 0, 0, 0.5);
	box-sizing: border-box;
}

#color-intro-main:hover #color-intro-content {
	display: flex;
}

#color-intro-content h1 {
	font-size: 0.4rem;
	color: #fff;
}

#color-intro-content p {
	line-height: 2em;
	margin-top: 1em;
	font-size: 0.2rem;
	color: #fff;
	text-align: justify;
}

.color-intro-image .first,
.color-intro-image:hover .second {
	display: inline;
}

.color-intro-image .second,
.color-intro-image:hover .first {
	display: none;
}

#color-wucai-intro {
	display: flex;
	justify-content: space-between;
	height: 100%;
	background: url(../img/color/category-bg.jpg);
	background-size: auto 100%;
}

#color-wucai-intro .pc-image {
	display: inline;
}

#color-wucai-intro .m-image {
	display: none;
}

#color-wucai-intro-icon {
	position: absolute;
	right: 0.7rem;
	top: 0.4rem;
	width: 1.5rem;
}

#color-wucai-intro .button {
	position: absolute;
	right: 0.33rem;
	top: 50%;
	width: 0.5rem;
	transform: translateY(-50%);
	overflow: hidden;
}

#color-wucai-intro .button img {
	position: relative;
	animation: color-button-move 2.5s ease infinite;
}

#color-category {
	display: grid;
	grid-template-columns: 6.77rem 9.23rem;
	grid-template-rows: repeat(5, 20%);
	grid-template-areas:
		"left qing"
		"left huang"
		"left hong"
		"left bai"
		"left hei";
	height: 100%;
	background: url(../img/color/category-bg.jpg);
	background-size: auto 100%;
}

#color-category .item {
	position: relative;
	overflow: hidden;
}

#color-category .item.item0 {
	grid-area: left;
	display: flex;
}

#color-category .item.item1 {
	grid-area: qing;
	cursor: pointer;
}

#color-category .item.item2 {
	grid-area: huang;
	cursor: pointer;
}

#color-category .item.item3 {
	grid-area: hong;
	cursor: pointer;
}

#color-category .item.item4 {
	grid-area: bai;
	cursor: pointer;
}

#color-category .item.item5 {
	grid-area: hei;
	cursor: pointer;
}

#color-category .shadow {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
}

#color-category .icon {
	position: absolute;
	left: 0.3rem;
	top: 50%;
	width: 1rem;
	transform: translateY(-50%);
}

#color-category .title {
	position: absolute;
	right: 0.66rem;
	top: 50%;
	height: 90%;
	transform: translateY(-50%);
}

#color-category .button {
	display: none;
	position: absolute;
	right: 0.33rem;
	top: 50%;
	width: 0.4rem;
	/* width: 0.5rem; */
	transform: translateY(-50%);
	overflow: hidden;
}

#color-category .button img {
	position: relative;
	animation: color-button-move 2.5s ease infinite;
}

#color-category .cover {
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.6);
}

#color-category.qing .item.item1 .shadow,
#color-category.qing .item.item1 .icon,
#color-category.qing .item.item1 .title,
#color-category.huang .item.item2 .shadow,
#color-category.huang .item.item2 .icon,
#color-category.huang .item.item2 .title,
#color-category.hong .item.item3 .shadow,
#color-category.hong .item.item3 .icon,
#color-category.hong .item.item3 .title,
#color-category.bai .item.item4 .shadow,
#color-category.bai .item.item4 .icon,
#color-category.bai .item.item4 .title,
#color-category.hei .item.item5 .shadow,
#color-category.hei .item.item5 .icon,
#color-category.hei .item.item5 .title {
	display: none;
}

#color-category.qing .item.item1 .button,
#color-category.huang .item.item2 .button,
#color-category.hong .item.item3 .button,
#color-category.bai .item.item4 .button,
#color-category.hei .item.item5 .button {
	display: block;
}

#color-category.qing .cover,
#color-category.huang .cover,
#color-category.hong .cover,
#color-category.bai .cover,
#color-category.hei .cover {
	display: block;
}

#color-category.qing .item.item1 .cover,
#color-category.huang .item.item2 .cover,
#color-category.hong .item.item3 .cover,
#color-category.bai .item.item4 .cover,
#color-category.hei .item.item5 .cover {
	display: none;
}

#color-category-button {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 0.5rem;
	transform: translate(-50%, -50%);
}

.color-button {
	display: block;
	color: #eceaea;
	overflow: hidden;
}

.color-button:hover {
	color: #eceaea;
}

.color-button.color-button-yellow {
	color: #e6cb94;
}

.color-button.color-button-yellow:hover {
	color: #e6cb94;
}

.color-button .layui-icon {
	position: absolute;
	top: 50%;
	font-size: inherit;
	color: inherit;
	transform: translateY(-50%);
	animation: color-button-move 2.5s ease infinite;
}

.color-button.color-button-back .layui-icon {
	animation: color-button-move-back 2.5s ease infinite;
}

@keyframes color-button-move {
	0% {
		right: 100%;
	}
	
	100% {
		right: -100%;
	}
}

@keyframes color-button-move-back {
	0% {
		right: -100%;
	}
	
	100% {
		right: 100%;
	}
}

#color-category-main {
	display: flex;
	flex-direction: column;
	padding: 0 0.5rem;
}

#color-category-main-title img {
	width: 50%;
}

#color-category-main p,
#color-category-main .p {
	line-height: 2em;
	margin-top: 0.5rem;
	font-size: 0.18rem;
	color: #e6cb94;
	text-align: justify;
}

#color-category-bottom {
	display: flex;
	justify-content: space-between;
	margin: 0.5rem 0;
}

#color-category-bottom a {
	width: 1rem;
}

.color-category-sub {
	display: none;
	flex-direction: column;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	padding: 0 0.5rem;
}

.color-category-sub .top {
	display: flex;
	align-items: flex-end;
	position: relative;
}

.color-category-sub .top .left {
	flex: 1.5;
	padding-right: 0.3rem;
}

.color-category-sub .top .top-close {
	position: absolute;
	left: 0;
	top: 0;
	width: 0.3rem;
}

.color-category-sub .middle {
	display: flex;
	position: relative;
}

.color-category-sub .middle .left {
	flex: 1.5;
	max-height: 50vh;
	padding-right: 0.3rem;
	overflow: auto;
}

#color-category-main .color-category-sub .middle p {
	margin-top: 0.25rem;
	color: #fff;
}

.color-category-sub .top .middle-icon {
	position: absolute;
	right: 0.1rem;
	top: calc(100% + 0.8rem);
	width: 1rem;
}

.color-category-sub.qing {
	background-color: #528d9f;
}

.color-category-sub.huang {
	background-color: #d6ab04;
}

.color-category-sub.hong {
	background-color: #6b0b0c;
}

.color-category-sub.bai {
	background-color: #c4c9c5;
}

.color-category-sub.hei {
	background-color: #101010;
}

#color-category.qing .color-category-sub.qing,
#color-category.huang .color-category-sub.huang,
#color-category.hong .color-category-sub.hong,
#color-category.bai .color-category-sub.bai,
#color-category.hei .color-category-sub.hei {
	display: flex;
}

.color-outer-banner {
	display: flex;
	position: fixed;
	left: 0.2rem;
	top: 0;
	bottom: 0;
	opacity: 0.9;
}

.color-band {
	display: flex;
	flex-direction: column;
}

.color-banner {
	display: flex;
	flex-direction: column;
	width: 1.4rem;
	padding: 0 0.1rem;
}

.color-banner.qing {
	background-color: #2d587a;
}

.color-banner.huang {
	background-color: #d09e0b;
}

.color-banner.hong {
	background-color: #6b0b0c;
}

.color-banner.bai {
	background-color: #c2c4c3;
}

.color-banner.hei {
	background-color: #151515;
}

.color-banner.wucai {
	background-color: #d84c31;
}

.color-banner.shuimo {
	background-color: #65655d;
}

.color-banner .icon {
	margin-top: 0.2rem;
	padding-right: 0.1rem;
	text-align: right;
}

.color-banner .icon img {
	width: 55%;
}

.color-banner .bottom {
	margin: 0.5rem 0;
	font-size: 0.2rem;
	text-align: center;
}

.color-banner .bottom a {
	color: #fff;
}

.color-banner .bottom a img {
	height: 1em;
	transform: rotate(-90deg);
}

.color-banner .bottom .color-button {
	display: inline-block;
	width: 0.3rem;
	font-size: 0.24rem;
	vertical-align: middle;
}

.color-pc-html .color-outer-wrapper {
	position: absolute;
	width: 100vh;
	height: 100vw;
	transform-origin: left top;
	transform: rotate(-90deg) translateX(-100vh);
	overflow-x: hidden;
	overflow-y: scroll;
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* IE family */
}

/* Chrome, Safari */
.color-pc-html .color-outer-wrapper::-webkit-scrollbar {
	display: none;
}

.color-m-html .color-outer-wrapper {
	position: absolute;
	width: 100vw;
	height: 100vh;
	overflow-x: scroll;
	overflow-y: hidden;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.color-m-html .color-outer-wrapper::-webkit-scrollbar {
	display: none;
}

.color-outer-wrapper.qing {
	background-color: #c1dff7;
}

.color-outer-wrapper.huang {
	background-color: #fef0c3;
}

.color-outer-wrapper.hong {
	background-color: #d8c4ac;
}

.color-outer-wrapper.bai {
	background-color: #e7e7e7;
}

.color-outer-wrapper.hei {
	background-color: #818181;
}

.color-outer-wrapper.wucai {
	background-color: #fff;
}

.color-outer-wrapper.shuimo {
	background-color: #fff;
	opacity: 0.7;
}

.color-wrapper {
	display: flex;
	max-width: 3000vw;
	height: 100vh;
	padding-left: 2.2rem;
}

.color-pc-html .color-wrapper {
	transform-origin: left top;
	transform: rotate(90deg) translateY(-100vh);
}

.color-part {
	display: flex;
	flex-direction: column;
	position: relative;
	height: 100%;
	visibility: hidden;
}

.color-images-loaded .color-part {
	visibility: visible;
}

.color-vertical-text {
	display: none;
	font-size: 0.2rem;
	writing-mode: vertical-rl;
	white-space: nowrap;
}

.color-show-vertical-text .color-vertical-text {
	display: block;
}

.color-vertical-text.qing {
	color: #1e4a6d;
}

.color-vertical-text.huang {
	color: #c99100;
}

.color-vertical-text.hong {
	color: #812c29;
}

.color-vertical-text.bai {
	color: #8e8e8e;
}

.color-vertical-text.hei {
	color: #000;
}

.color-vertical-text.shuimo {
	color: #65655d;
}

.color-vertical-text.wucai {
	color: #777;
}

.color-vertical-text .age {
	padding-bottom: 0.1rem;
	border-bottom-width: 0.01rem;
	border-bottom-style: solid;
	border-bottom-color: inherit;
	margin-bottom: 0.1rem;
}

.color-circle {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: absolute;
}

.color-circle .color-antique-link {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background-color: rgba(101, 101, 93, 0.3);
	box-shadow: 0 0 0 0 rgba(101, 101, 93, 1);
	animation: color-pulse 2s infinite;
}

@keyframes color-pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(101, 101, 93, 0.3);
		transform: scale(0.95);
	}
	
	70% {
		box-shadow: 0 0 0 16px rgba(101, 101, 93, 0);
		transform: scale(1);
	}
	
	100% {
		box-shadow: 0 0 0 0 rgba(101, 101, 93, 0);
		transform: scale(0.95);
	}
}

.color-circle .color-vertical-text {
	display: block;
	visibility: hidden;
}

.color-images-loaded .color-circle.on .color-vertical-text {
	visibility: visible;
}

.color-images-loaded.color-show-vertical-text .color-circle .color-vertical-text {
	visibility: visible;
}

.color-xcenter {
	transform: translateX(-50%);
}

.color-ycenter {
	transform: translateY(-50%);
}

.color-center {
	transform: translate(-50%, -50%);
}

/* parallax scroll settings */
.color-outer-wrapper.parallax {
	-moz-perspective: 2rem;
	-webkit-perspective: 2rem;
	perspective: 2rem;
}

.color-outer-wrapper.parallax .color-wrapper,
.color-outer-wrapper.parallax .color-part,
.color-outer-wrapper.parallax .color-sub-part {
	-moz-transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.color-outer-wrapper.parallax .color-fg1 {
	transform: translateZ(1rem) scale(0.5);
}

.color-outer-wrapper.parallax .color-fg1.color-xcenter {
	transform: translateZ(1rem) scale(0.5) translateX(-50%);
}

.color-outer-wrapper.parallax .color-fg1.color-ycenter {
	transform: translateZ(1rem) scale(0.5) translateY(-50%);
}

.color-outer-wrapper.parallax .color-fg1.color-center {
	transform: translateZ(1rem) scale(0.5) translate(-50%, -50%);
}

.color-outer-wrapper.parallax .color-fg2 {
	transform: translateZ(0.5rem) scale(0.75);
}

.color-outer-wrapper.parallax .color-fg2.color-xcenter {
	transform: translateZ(0.5rem) scale(0.75) translateX(-50%);
}

.color-outer-wrapper.parallax .color-fg2.color-ycenter {
	transform: translateZ(0.5rem) scale(0.75) translateY(-50%);
}

.color-outer-wrapper.parallax .color-fg2.color-center {
	transform: translateZ(0.5rem) scale(0.75) translate(-50%, -50%);
}

.color-outer-wrapper.parallax .color-fg-min {
	transform: translateZ(0.01rem) scale(0.995);
}

.color-outer-wrapper.parallax .color-fg-min.color-xcenter {
	transform: translateZ(0.01rem) scale(0.995) translateX(-50%);
}

.color-outer-wrapper.parallax .color-fg-min.color-ycenter {
	transform: translateZ(0.01rem) scale(0.995) translateY(-50%);
}

.color-outer-wrapper.parallax .color-fg-min.color-center {
	transform: translateZ(0.01rem) scale(0.995) translate(-50%, -50%);
}

.color-outer-wrapper.parallax .color-bg {
	transform: translateZ(-1rem) scale(1.5);
}

.color-outer-wrapper.parallax .color-bg.color-xcenter {
	transform: translateZ(-1rem) scale(1.5) translateX(-50%);
}

.color-outer-wrapper.parallax .color-bg.color-ycenter {
	transform: translateZ(-1rem) scale(1.5) translateY(-50%);
}

.color-outer-wrapper.parallax .color-bg.color-center {
	transform: translateZ(-1rem) scale(1.5) translate(-50%, -50%);
}

.color-outer-wrapper.parallax .color-bg2 {
	transform: translateZ(-2rem) scale(2);
}

.color-outer-wrapper.parallax .color-bg2.color-xcenter {
	transform: translateZ(-2rem) scale(2) translateX(-50%);
}

.color-outer-wrapper.parallax .color-bg2.color-ycenter {
	transform: translateZ(-2rem) scale(2) translateY(-50%);
}

.color-outer-wrapper.parallax .color-bg2.color-center {
	transform: translateZ(-2rem) scale(2) translate(-50%, -50%);
}

.color-outer-wrapper.parallax .color-adjustment.color-adjustment-wucai-04 {
	margin-left: -0.6rem;
}

.color-outer-wrapper.parallax .color-adjustment.color-adjustment-wucai-07 {
	margin-left: -3.5rem;
}

.color-outer-wrapper.parallax .color-adjustment.color-adjustment-wucai-10 {
	margin-left: -1.6rem;
}

.color-outer-wrapper.parallax .color-adjustment.color-adjustment-wucai-13 {
	margin-left: -1.8rem;
}

.color-outer-wrapper.parallax .color-adjustment.color-adjustment-wucai-17 {
	margin-left: -3.8rem;
}

.color-outer-wrapper.parallax .color-adjustment.color-adjustment-wucai-22 {
	margin-left: -6.6rem;
}

.color-outer-wrapper.parallax .color-adjustment.color-adjustment-wucai-28 {
	margin-left: -9.2rem;
}

.color-outer-wrapper.parallax .color-adjustment.color-adjustment-wucai-30 {
	margin-left: -2.8rem;
}

.color-fill {
	display: flex;
	height: 100%;
	background-color: #65655d;
	overflow: hidden;
}

.color-fill-main {
	flex: 1;
	display: flex;
	flex-direction: column;
	position: relative;
	align-items: center;
	padding-top: 0.2rem;
}

.color-picture {
	flex: 1;
	position: relative;
	width: 100%;
	overflow: hidden;
}

.color-picture .panzoom.old {
	position: absolute;
	left: 25%;
	top: 0;
	width: 50%;
	height: 100%;
	transform: translateX(-50%);
	visibility: hidden;
}

.color-picture .panzoom.new {
	position: absolute;
	left: 50%;
	top: 0;
	width: 50%;
	height: 100%;
	transform: translateX(-50%);
}

.color-picture.on .panzoom.old {
	border-right: 1px dotted #65655d;
	visibility: visible;
}

.color-picture.on .panzoom.new {
	left: 75%;
	border-left: 1px dotted #65655d;
}

.color-picture svg {
	width: auto;
	height: 100%;
}

.color-picture-title {
	padding: 0.1rem 0;
	font-size: 0.18rem;
	color: #c9bea8;
	z-index: 100;
}

.color-fill-toolbar {
	padding: 0.2rem 0;
}

.color-fill-toolbar .tool {
	display: inline-block;
	position: relative;
	width: 0.6rem;
	padding: 0.05rem 0.1rem;
	margin-right: 0.6rem;
	font-size: 0.12rem;
	color: #111;
	text-align: center;
}

.color-fill-toolbar .tool:last-child {
	margin-right: 0;
}

.color-fill-toolbar .tool.on {
	background-color: rgba(208, 201, 183, 0.2);
}

.color-fill-toolbar .tool.share {
	cursor: pointer;
}

.color-share-dialog {
	display: none;
	position: absolute;
	left: 50%;
	bottom: 100%;
	transform: translateX(-50%);
}

.color-fill-toolbar .tool.share.in .color-share-dialog {
	display: block;
}

.color-share-dialog .content canvas {
	width: 1.8rem;
	height: 1.8rem;
}

.color-share-dialog .title {
	line-height: 2em;
	font-size: 0.14rem;
	text-align: center;
}

.color-fill-list {
	display: none;
	position: absolute;
	left: 0;
	top: 0.2rem;
	font-size: 0.18rem;
	color: #c9bea8;
}

.color-fill-list.on {
	display: block;
}

.color-fill-list li {
	margin: 0.05rem 0.1rem;
}

.color-fill-list .fas.fa-circle {
	font-size: 0.5em;
	visibility: hidden;
}

.color-fill-list.type1 .fas.fa-circle.type1 {
	visibility: visible;
}

.color-fill-list.type2 .fas.fa-circle.type2 {
	visibility: visible;
}

.color-fill-list.type3 .fas.fa-circle.type3 {
	visibility: visible;
}

.color-fill-list a {
	color: inherit;
}

.color-pen {
	display: flex;
	flex-direction: column;
	width: 0.3rem;
	padding: 0 0.1rem;
}

.color-pen svg {
	width: 100%;
	height: auto;
}

.color-palette {
	position: relative;
	width: 3.6rem;
	padding: 0.2rem;
	margin-right: -4rem;
	background-color: #c9bea8;
	transition: margin-right 500ms;
}

.color-palette.on {
	margin-right: 0;
}

.color-instruction-open {
	position: absolute;
	left: 0.2rem;
	top: 0.2rem;
}

.color-instruction-open i {
	font-size: 0.3rem;
}

.color-palette-close {
	position: absolute;
	right: 0.2rem;
	top: 0.2rem;
	width: 0.3rem;
}

.color-palette .title {
	padding-top: 0.1rem;
	padding-bottom: 0.3rem;
	font-size: 0.2rem;
	text-align: center;
}

.color-instruction {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	padding: 0.6rem 0.4rem 0.4rem 0.4rem;
	background-color: inherit;
	z-index: 1000;
}

.color-instruction p {
	line-height: 2em;
	margin: 1.5em 0;
	font-size: 0.2rem;
	text-align: justify;
}

.color-loader {
	position: fixed;
	left: 50%;
	top: 50%;
	width: 250px;
	height: 24px;
	transform: translate(-50%, -50%);
}

.color-loader-dot {
	position: absolute;
	left: 0;
	top: 0;
	width: 20px;
	height: 20px;
	border: 2px solid transparent;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.05);
	animation: color-loader-dot-move 3s ease-in-out infinite;
}

.color-loader-dot:nth-child(1) {
	animation-delay: 0.5s;
}

.color-loader-dot:nth-child(2) {
	animation-delay: 0.4s;
}

.color-loader-dot:nth-child(3) {
	animation-delay: 0.3s;
}

.color-loader-dot:nth-child(4) {
	animation-delay: 0.2s;
}

.color-loader-dot:nth-child(5) {
	animation-delay: 0.1s;
}

.color-loader-dot:nth-child(6) {
	animation-delay: 0s;
}

.color-loader-text {
	position: absolute;
	left: 50%;
	top: 150%;
	width: 48px;
	font-size: 16px;
	white-space: nowrap;
	transform: translateX(-50%);
}

.color-loader-text:after {
	content: "加载中";
	animation: color-loading-text 3s infinite;
}

@keyframes color-loader-dot-move {
	15% {
		transform: translateX(0);
	}
	
	45% {
		transform: translateX(226px);
	}
	
	65% {
		transform: translateX(226px);
	}
	
	95% {
		transform: translateX(0);
	}
}

@keyframes color-loading-text {
	0% {
		content: "加载中";
	}
	
	25% {
		content: "加载中.";
	}
	
	50% {
		content: "加载中..";
	}
	
	75% {
		content: "加载中...";
	}
}

.color-mask {
	display: none;
	position: absolute;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	background-color: #000;
	overflow: hidden;
	z-index: 1000000;
}

.color-mask .child {
	width: 80%;
	margin: auto;
}

.color-mask .child img {
	width: 100%;
}

.color-mask .child .text {
	font-size: 20px;
	color: #fff;
	text-align: center;
}