section.main-content-list {
	margin-top: -150px;

	@media (max-width: 576px) {
		margin-top: -5px;
	}

	& .list-cover {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 30px;
		margin: 0;

		@media (max-width: 576px) {
			grid-template-columns: repeat(2, 1fr);
			margin: 0;
			gap: 10px;
		}

		& .list-item-cover {
			box-shadow: 0px 0px 30px 0px #00000026;
			background-color: var(--white);
			border-radius: 10px;

			& .list-item {
				padding: 20px 30px;
				position: relative;
				height: 100%;

				@media (max-width: 576px) {
					padding: 15px 10px 20px 20px;
				}

  				 & p {
   					 font-size: 17px;

  						  @media (max-width: 576px) {
       							 font-size: 13px;
    }

 						   &.title {
      						  font-weight: 700;
     					      font-size: 20px;

  					      @media (max-width: 576px) {
          					  font-size: 16px;
        }
    }
}
				}
				& ul {
					list-style-type: disc;
					padding-left: 30px;
					padding-top: 10px;

					@media (max-width: 576px) {
						list-style-type: disc;
						padding-left: 20px;
						padding-top: 5px;
					}

					& li {
						margin: 0;
						padding: 0;
						line-height: 130%;
						&:last-child {
							max-width: 85%;
						}
					}
				}
				& a.bottom {
					position: absolute;
					width: 29px;
					height: 29px;
					background: url(images/detail-link-bg.png) center no-repeat;
					bottom: 28px;
					right: 32px;

					@media (max-width: 576px) {
						width: 18px;
						height: 18px;
						background-size: contain;
						bottom: 9px;
						right: 12px;
					}
				}
			}
		}
	}

	& .list-bottom-cover {
		margin-top: -290px;
		@media (max-width: 576px) {
			flex-direction: column;
			display: flex;
		}

		& .list-bottom-one {
			background-color: var(--primary);
			font-family: Golos;
			font-weight: 500;
			font-size: 60px;
			line-height: 68px;
			letter-spacing: -2px;
			color: var(--black);
			width: calc((100% - 60px)/3*2 + 30px);
			margin-left: calc((100% - 60px)/3 + 30px) ;
			padding: 40px;
			padding-bottom: 0;
			border-radius: 10px 10px 0px 0px;
			position: relative;

			@media (max-width: 576px) {
				width: 49%;
				height: 300px;
				margin-left: 51%;
				font-size: 25px;
				padding: 55px 10px 10px 20px;
				line-height: normal;
				border-radius: 10px 10px 0px 0px;
				position: relative;
				letter-spacing: -1px;
				&:after {
					display: none;
				}
				&:before {
					display: none;
				}
			}

			&:after {
				content: "";
				position: absolute;
				width: 10px;
				height: 10px;
				background-color: var(--white);
				border-radius: 0 0 10px 0;
				left: -10px;
				bottom: 0;
			}
			&:before {
				content: "";
				position: absolute;
				width: 10px;
				height: 10px;
				background-color: var(--primary);
				left: -10px;
				bottom: 0;
			}
		}

		& .list-bottom-two {
			display: flex;
			background-color: var(--primary);
			padding: 30px 50px 50px;
			margin: 0;
			border-radius: 10px 0 10px 10px;
			font-weight: 700;
			gap: 60px;

			& div {
				min-width: 200px;
				font-size:17px;
				@media (max-width: 576px) {
					min-width: auto;
					font-size: 10px;
				}

				& span.num {
					font-weight: 500;
					font-size: 60px;
					display: inline-block;
					width: 100%;
					@media (max-width: 576px) {
						font-size: 27px;
					}
				}
			}

			@media (max-width: 576px) {
				display: grid;
				grid-template-columns: repeat(4, 1fr);
				font-size: 10px;
				width: 100%;
				margin-left: 0%;
				padding: 10px;
				gap: 30px;
				line-height: normal;
				border-radius: 10px 0px 10px 10px;
				position: relative;
				&:after {
					content: "";
					position: absolute;
					width: 10px;
					height: 10px;
					background-color: var(--primary);
					border-radius: 0 0 10px 0;
					left: 228px;
					bottom: 88px;
				}
				&:before {
					content: "";
					position: absolute;
					width: 10px;
					height: 10px;
					background-color: var(--primary);
					left: 228px;
					bottom: 88px;
				}
			}
		}
	}
}