* {
	padding: 0px;
	margin: 0px;
	outline: 0;
	box-sizing: border-box;
}
body {
	background:rgba(2,2,2,1) !important;
	font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif
}
a {
	text-decoration: none!important;
}

/* Navigation - CSS */
.navigation-matting {
	position: fixed;
	top: 0px;
	background: rgba(0, 0, 0, 1);
	z-index: 1100;
}

/* Matting Example Component - CSS */
.matting-example-container {
	width: 1260px;
	height: 100%;
	margin: 100px auto 200px;
}
#matting-example-panel .instruction-item {
	position: relative;
	margin-bottom: 100px;
	width: 100%;
	height: auto;
	display: flex;
	justify-content: center;
	align-items: center;
}
#matting-example-panel .instruction-item .ins-item-info {
	position: relative;
	width: 438px;
	height: auto;
    box-sizing: border-box;
}
#matting-example-panel .instruction-item .ins-item-info .ins-item-title {
	position: relative;
	height: 60px;

	font-size: 44px;
	font-weight: 500;
	color: #FFFFFF;
	line-height: 60px;
	text-align: right;
}
#matting-example-panel .instruction-item .ins-item-info .ins-item-content {
	margin-top: 10px;

	font-size: 18px;
	font-weight: 400;
	color: #FFFFFF;
	line-height: 31px;
	text-align: right;
}
#matting-example-panel .instruction-item .ins-item-info .in-item-button {
	float: right;
	margin-top: 25px;
	width: 168px;
	height: 50px;
	background: #0443FD;
	box-shadow: 0px 19px 38px 0px rgba(0, 0, 0, 0.21);
	border: none;
	cursor: pointer;

	font-size: 20px;
	font-weight: 500;
	color: #FFFFFF;
	line-height: 50px;
}
#matting-example-panel .instruction-item .ins-item-info .in-item-button:hover {
	background: linear-gradient(180deg,rgba(12,121,255,1) 0%,rgba(5,68,255,1) 100%);
}
#matting-example-panel .instruction-item.reverse .ins-item-info {
	margin-left: 100px;
}
#matting-example-panel .instruction-item.reverse .ins-item-info .ins-item-title,
#matting-example-panel .instruction-item.reverse .ins-item-info .ins-item-content {
	text-align: left;
}
#matting-example-panel .instruction-item.reverse .ins-item-info .in-item-button {
	float: left;
}
#matting-example-panel .instruction-item .ins-item-display {
	position: relative;
	margin-left: 100px;
	width: 485px;
	height: auto;
	border-radius: 14px;
	box-sizing: border-box;
}
#matting-example-panel .instruction-item.reverse .ins-item-display {
	margin-left: 0px;
}
#matting-example-panel .instruction-item .ins-item-display .item-display-image {
	position: relative;
	width: 100%;
	height: 332px;
	display: flex;
	align-items: center;
}
.item-display-image .display-contain-rect {
	position: relative;
	max-width: 500px;
	max-height: 318px;
	width: 485px;
	height: 318px;
}
.item-display-image .display-transprency {
	background-color: #fff;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3LjkzNyA3LjkzOCIgaGVpZ2h0PSIzMCIgd2lkdGg9IjMwIj48cGF0aCBwYWludC1vcmRlcj0ic3Ryb2tlIGZpbGwgbWFya2VycyIgZD0iTS4wMTQuMDE0SDMuOTdWMy45N0guMDE0ek0zLjk3IDMuOTY4aDMuOTU0djMuOTU1SDMuOTd6IiBmaWxsPSIjZGNkZmUxIi8+PC9zdmc+);
    background-size: 25px;
}
.item-display-image .display-contain-rect .display-background {
	position: absolute;
	left: 0;
    top: 0;
    bottom: 0;
    right: 0;
	background-size: cover;
    background-position: 50%;
}
.item-display-image .display-contain-rect .display-background .display-matting-image {
	width: 100%;
    height: 100%;
	object-fit: contain;
}