#milestones h1 {
	 font-family: 'Open Sans', sans-serif;
	 font-weight: 300;
}
#milestones .row {
	display: flex;
    flex-direction: column;
}
#milestones .card .menu-content {
	 margin: 0;
	 padding: 0;
	 list-style-type: none;
}
#milestones .card .menu-content::before, .card .menu-content::after {
	 content: '';
	 display: table;
}
#milestones .card .menu-content::after {
	 clear: both;
}
#milestones .card .menu-content li {
	 display: inline-block;
}
#milestones .card .menu-content a {
	 color: #fff;
}
#milestones .card .menu-content span {
	 position: absolute;
	 left: 50%;
	 top: 0;
	 font-size: 15px;
	 font-weight: 700;
	 font-family: 'Open Sans';
	 transform: translate(-50%, 0);
}
#milestones .card .wrapper {
	border-radius: 25px;
	background-color: #fff;
	min-height: 540px;
	position: relative;
	overflow: hidden;
	box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.2);
}
#milestones .card .wrapper::before {
	content:"";
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
}
#milestones .card .wrapper.img1:hover .data {
	 transform: translateY(-1rem);
}
#milestones .card .wrapper.img2:hover .data {
	 transform: translateY(-7rem);
}
#milestones .card .wrapper.img3:hover .data {
	 transform: translateY(-4rem);
}
#milestones .card .wrapper.img4:hover .data {
	 transform: translateY(-9rem);
}
#milestones .card .data {
	 position: absolute;
	 bottom: 0;
	 width: 100%;
	 transform: translateY(calc(70px + 1em));
	 transition: transform 0.3s;
}
#milestones .card .data .content {
	 padding: 1em;
	 position: relative;
	 z-index: 1;
}
#milestones .card .author {
	 font-size: 15px;
}
#milestones .card .title {
	 margin-top: 10px;
}
#milestones .card .text {
	 height: 70px;
	 margin: 0;
}
#milestones .card input[type='checkbox'] {
	 display: none;
}
#milestones .card input[type='checkbox']:checked + .menu-content {
	 transform: translateY(-60px);
}
#milestones .milestonesbox {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 1em;
}
#milestones .milestonesbox .wrapper.img1{
	 background: url(http://www.onesite.kr/img/pf-milestones/1.png) center / cover no-repeat;
}
#milestones .milestonesbox .wrapper.img2{
	 background: url(http://www.onesite.kr/img/pf-milestones/2.png) center / cover no-repeat;
}
#milestones .milestonesbox .wrapper.img3{
	 background: url(http://www.onesite.kr/img/pf-milestones/3.png) center / cover no-repeat;
}
#milestones .milestonesbox .wrapper.img4{
	 background: url(http://www.onesite.kr/img/pf-milestones/4.png) center / cover no-repeat;
}
#milestones .milestonesbox .wrapper:hover .menu-content span {
	 transform: translate(-100%, -10px);
	 opacity: 1;
}
#milestones .milestonesbox .header {
	position:absolute;
	color: #fff;
	padding: 1em;
}
#milestones .milestonesbox .header::before, .milestonesbox .header::after {
	 content: '';
	 display: table;
}
#milestones .milestonesbox .header::after {
	 clear: both;
}
#milestones .milestonesbox .header .date {
	 float: left;
	 font-size: 15px;
}
#milestones .milestonesbox .menu-content {
	 float: right;
}
#milestones .milestonesbox .menu-content li {
	 margin: 0 5px;
	 position: relative;
}
#milestones .milestonesbox .menu-content span {
	 transition: all 0.3s;
	 opacity: 0;
}
#milestones .milestonesbox .data {
	 color: #fff;
	 transform: translateY(calc(70px + 3em));
}
#milestones .milestonesbox .title a {
	 color: #fff;
}
@media only screen and (max-width:1800px){
	#milestones .content,#milestones .milestonesbox .header .date ,#milestones .card .author {
		 font-size: 14px;
	}
}
@media only screen and (max-width:1240px){
	#milestones .milestonesbox  {grid-template-columns:1fr; grid-template-rows: 1fr 1fr 1fr 1fr;gap: 3em;}
	#milestones .content,#milestones .milestonesbox .header .date ,#milestones .card .author {
		 font-size: 14px;
	}
	#milestones .card .wrapper{
		min-height:450px;
	}

	
}