main.row{
	display: grid;
	grid-column-gap: 20px;
}
.col header.title{
	font-family: helvetica;
	color: #11a372;
	padding: 0px 0px 20px 30px;
}
.col .contents{
	padding: 0px 30px;
	border-left: 2px solid #bababa;
}
.col .contents .box{
	position: relative;
	padding: 20px;
	border: 1px solid #fff;
	background-color: #ffff;
	cursor: pointer;
	transition: all 0.4s;
	margin-bottom: 20px;
}
.col .contents .box:hover{
	box-shadow: 0px 3px 12px 0px hsl(274, 76%, 87%);
	border: 1px solid transparent;
}
.col .contents .box::before{
	content: '';
	position: absolute;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	right: calc(100% + 22px);
	top: 0;
	background-color: hsl(274, 76%, 87%);
	border: 2px solid white;
}
.box h4{
	position: relative;
	color: #000000;
}
.box h3{
	font-size: 19px;
	padding: 10px 0px 6px;
	font-family: helvetica;
	color: #000000;
}
.box p{
	line-height: 1.2;
	color: #000000;
	font-size: 17px;
}
@media(max-width: 768px){
	main.row{
		grid-template-columns: 1fr;
	}
	.row .col:nth-child(2){
		margin-top: 30px;
	}
}