.list--1 {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	padding-inline: var(--pd);
	& .list {
		display: flex;
		flex-wrap: wrap;
		gap: 2rem;
		& .item {
			flex: 1 0 calc(100% / 3 - 2rem * 2 / 3);
			border-radius: var(--r3);
			position: relative;
			overflow: hidden;
			display: flex;

			@media (max-width: 991px) {flex: 0 0 calc(100% / 2 - 2rem * 1 / 2);}
			@media (max-width: 450px) {flex: 0 0 100%;}
			& .bg {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				z-index: 1;
				border-radius: var(--r3);
				overflow: hidden;
				& img {
					position: relative;
					z-index: 1;
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
				&::before {
					content: "";
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					background-color: var(--g6);
					opacity: .6;
					z-index: 2;
				}
			}
			& .cont {
				position: relative;
				width: 100%;
				z-index: 2;
				padding: 2rem;
				display: flex;
				flex-direction: column;
				gap: 1rem;
				& > .ttl {
					color: var(--bg);
					font-weight: 700;
					& span {
						color: var(--main);
						display: inline;
						border-bottom: var(--px) dashed var(--main);
					}
					font-size: 1.4rem;
				}
				& .txt {
					flex-grow: 1;
					color: var(--bg);
					& ul {
						list-style:url(svg/plus-b.svg);
						display: flex;
						flex-direction: column;
						gap: .5rem;
						& li {
							padding: 0;
							font-size: .8rem;
							& a {
								text-decoration: none;
								display: inline-block;
								padding-bottom: .1rem;
								color: var(--bg);
								border-bottom: var(--px) dashed var(--main);
								&:hover {
									border-color: transparent;
								}
							}
						}
					}
				}
				& .btns {
					display: flex;
					& .btn {
						text-decoration: none;
						background-color: var(--main);
						display: flex;
						align-items: center;
						gap: .5rem;
						padding: .5rem 1rem;
						font-size: .8rem;
						border-radius: var(--r2);
						& svg {
							height: .6rem;
							fill: var(--bg);
						}
						& span {
							color: var(--bg);
						}
						&:hover {
							opacity: .8;
						}
						&[href=""] {
							display: none;
						}
					}
				}
			}
			&:nth-child(2n) {
				& .bg {
					&:before {
						background-color: var(--bg);
						opacity: .7;
					}
				}
				& .cont {
					& > .ttl {
						color: var(--g6);
					}
					& .txt {
						color: var(--g6);
						& ul {
							& li {
								& a {
									color: var(--g6);
								}
							}
						}
					}
				}
			}
		}
	}
}