@charset "UTF-8";
.blog {
	position: relative;
	color: #fff;
	background: linear-gradient(180deg, #000 70px, #9466f9 25%);
	padding: calc(70px + 40px) 30px 40px;
}

.blog > * {
	position: relative;
	z-index: 2;
}

.blog > .intro {
	margin-bottom: 40px;
}

.blog > .list {
	margin: -20px -10px;
}

.blog > .list > .list-item {
	padding: 20px 10px;
}

.blog > .pagination {
	margin-top: 40px;
}

.blog > .diamond {
	position: absolute;
	z-index: 1;
}

.blog > .diamond.no-1 {
	top: -300px;
	left: -200px;
}

.blog > .diamond.no-2 {
	top: 100px;
	left: -350px;
}

.blog > .diamond.no-3 {
	right: -350px;
	bottom: 0;
}

@media (min-width: 600px) {
	.blog > .intro {
		position: absolute;
		top: calc(70px + 40px);
		left: 30px;
		width: calc(50% - 20px);
		margin-bottom: 0;
		padding: 0 20px;
	}
	.blog > .list {
		flex-direction: row;
	}
	.blog > .list > .list-item {
		width: 50%;
	}
	.blog > .list > .list-item:first-child {
		margin-left: 50%;
	}
}

@media (min-width: 800px) {
	.blog {
		padding: calc(70px + 60px) 45px 60px;
	}
	.blog > .intro {
		top: calc(70px + 60px);
		left: 45px;
		width: calc(50% - 30px);
		padding: 0 25px;
	}
	.blog > .list {
		margin: -25px -12.5px;
	}
	.blog > .list > .list-item {
		padding: 25px 12.5px;
	}
	.blog > .pagination {
		margin-top: 50px;
	}
}

@media (min-width: 1000px) {
	.blog > .list > .list-item > .card > .card-header > .img {
		height: 390px;
	}
}

@media (min-width: 1200px) {
	.blog {
		padding: calc(70px + 80px) 60px 80px;
	}
	.blog > .intro {
		top: calc(70px + 80px);
		left: 60px;
		width: calc(33.33333% - 30px);
		padding: 0 30px;
	}
	.blog > .list {
		margin: -30px -15px;
	}
	.blog > .list > .list-item {
		width: 33.33333%;
		padding: 30px 15px;
	}
	.blog > .list > .list-item:first-child {
		margin-left: 33.33333%;
	}
	.blog > .list > .list-item > .card > .card-header > .img {
		height: 430px;
	}
	.blog > .pagination {
		margin-top: 60px;
	}
}

@media (min-width: 1400px) {
	.blog > .list > .list-item > .card > .card-header > .img {
		height: 480px;
	}
}

.article {
	position: relative;
	overflow: hidden;
	color: #555;
	background: #fff;
	padding: calc(70px + 40px) 30px 40px;
}

.article > * {
	position: relative;
	z-index: 2;
}

.article-header {
	margin-bottom: 30px;
}

.article-header > .title {
	color: #9466f9;
	font-weight: 500;
}

.article-header > .title > * {
	margin-top: 10px;
}

.article-header > .title > .text {
	color: #555;
	font-size: 14px;
	line-height: 1.25;
}

.article-header > .title > .badge {
	color: #fff;
	background: #9466f9;
}

.article > .img {
	background: #000;
	border-radius: 10px;
	height: 320px;
	object-fit: cover;
}

.article-share {
	padding: 30px;
}

.article-share > .text {
	color: #9466f9;
}

.article-share > .text:last-child {
	font-style: italic;
}

.article-share > .list {
	gap: 10px;
	margin: 20px 0;
}

.article-share > .list > .list-item > .link {
	padding: 5px;
	margin: -5px;
}

.article-summary {
	padding: 30px;
	margin-bottom: 40px;
	background: #eee;
	border-radius: 20px;
}

.article-summary > .title {
	display: flex;
	align-items: center;
	margin-bottom: 20px;
}

.article-summary > .title > .sprite {
	margin-right: 10px;
}

.article-summary > .list {
	gap: 15px;
}

.article-summary > .list > .list-item {
	position: relative;
	align-items: flex-start;
	padding-left: 20px;
}

.article-summary > .list > .list-item::after {
	content: "•";
	position: absolute;
	top: 0;
	left: 0;
}

.article-summary > .list > .list-item > .link {
	font-size: 15px;
	color: #9466f9;
}

.article-summary > .list > .list-item > .link:hover, .article-summary > .list > .list-item > .link:active {
	color: #b39fea;
}

.article > .wrapper > .content {
	margin-bottom: 30px;
}

.article > .wrapper > .content > blockquote {
	color: #9466f9;
	font-size: 28px;
	line-height: 1.25;
	padding-left: 20px;
	border-left: 2px solid;
}

.article-author {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 40px;
}

.article-author-image {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.article-author-image > .diamond {
	width: 120px;
	height: 188px;
	margin-right: -100px;
}

.article-author-image > .img {
	position: relative;
	z-index: 1;
	width: 120px;
	height: auto;
}

.article-author-content {
	padding-left: 30px;
}

.article-author-content > .text {
	font-size: 15px;
}

.article-author-content > .text.no-1 {
	margin-bottom: 5px;
	color: #9466f9;
}

.article-author-content > .text.no-2 {
	font-weight: 600;
}

.article-author-content > .title {
	font-weight: 600;
}

.article-related {
	position: relative;
	overflow: hidden;
	padding: 20px 30px;
	border: 1px solid #9466f9;
	border-radius: 30px;
	transition: background-color 0.25s;
}

.article-related > .title {
	color: #9466f9;
	margin-bottom: 5px;
}

.article-related > .text {
	margin-bottom: 10px;
}

.article-related > .button {
	position: relative;
	display: inline-flex;
}

.article-related > .button::after {
	top: -999px;
	right: -999px;
	bottom: -999px;
	left: -999px;
	pointer-events: auto;
}

.article-related:hover, .article-related:active {
	background: #eee;
}

.article > .diamond {
	position: absolute;
	z-index: 1;
}

.article > .diamond.no-1, .article > .diamond.no-2, .article > .diamond.no-4 {
	opacity: 0.5;
}

.article > .diamond.no-1 {
	left: -600px;
	top: -300px;
}

.article > .diamond.no-2 {
	left: -650px;
	top: 0;
}

.article > .diamond.no-3 {
	top: -250px;
	right: -100px;
}

.article > .diamond.no-4 {
	top: 100px;
	right: -400px;
}

.article > .diamond.no-5 {
	top: 200px;
	right: -425px;
}

@media (min-width: 400px) {
	.article > .img {
		height: 320px;
	}
}

@media (min-width: 600px) {
	.article > .img {
		height: 340px;
	}
}

@media (min-width: 800px) {
	.article {
		padding: calc(70px + 60px) 10% 60px;
	}
	.article-header > .title > * {
		display: inline-block;
		vertical-align: middle;
		margin: 0 0 0 20px;
	}
	.article > .img {
		border-radius: 15px;
		height: 360px;
	}
	.article > .wrapper {
		padding: 0 60px;
	}
	.article-share {
		padding: 30px 40px;
	}
	.article > .wrapper > .content {
		margin-bottom: 40px;
	}
	.article > .wrapper > .content > blockquote {
		font-size: 32px;
	}
	.article-author {
		margin-bottom: 50px;
	}
	.article-related {
		padding: 30px 300px 30px 35px;
	}
	.article-related > .title,
	.article-related > .text {
		display: inline;
	}
	.article-related > .title {
		margin-right: 10px;
	}
	.article-related > .button {
		position: absolute;
		top: 30px;
		right: 35px;
		margin-top: 0;
	}
	.article > .diamond.no-1, .article > .diamond.no-2, .article > .diamond.no-4 {
		opacity: 1;
	}
	.article > .diamond.no-3 {
		right: 0;
	}
	.article > .diamond.no-4 {
		right: -375px;
	}
	.article > .diamond.no-5 {
		right: -400px;
	}
}

@media (min-width: 1000px) {
	.article > .img {
		height: 390px;
	}
}

@media (min-width: 1200px) {
	.article {
		padding: calc(70px + 80px) 20% 80px;
	}
	.article > .img {
		border-radius: 20px;
		height: 430px;
	}
	.article > .wrapper {
		padding: 0 80px;
	}
	.article-share {
		padding: 30px 60px;
	}
	.article > .wrapper > .content {
		margin-bottom: 50px;
	}
	.article > .wrapper > .content > blockquote {
		font-size: 38px;
	}
	.article-author {
		margin-bottom: 60px;
	}
	.article-related {
		padding: 30px 320px 30px 40px;
	}
	.article-related > .button {
		right: 40px;
	}
	.article > .diamond.no-3 {
		right: 100px;
	}
	.article > .diamond.no-4 {
		right: -350px;
	}
	.article > .diamond.no-5 {
		right: -375px;
	}
}

@media (min-width: 1400px) {
	.article > .img {
		height: 480px;
	}
}