.list-procedure {display: flex;flex-wrap: wrap;justify-content: flex-start;gap: 8rem;row-gap: 4rem;}
.list-procedure > li {width: calc(100% / 4 - 6rem);border: 1px solid #CCCCCC;box-sizing: border-box;position: relative;}
.list-procedure > li:before {content: "";position: absolute;background: url(../img/content/ico-right.png)no-repeat;background-size: cover;width: 1.1rem;height: 1.8rem;top:calc(50% - 0.9rem);left:calc(100% + (8rem / 2) - (0.55rem / 2));}
.list-procedure > li:nth-child(4n):before, .list-procedure > li:last-child:before{display: none;} 
.list-procedure > li div {padding: 3.2rem 2.8rem;transition: all .3s;}
.list-procedure > li div .num{font-weight: 700;font-size: 2rem;line-height: 2.8rem;letter-spacing: 0%;color: #217EFF;margin: 0 0 1.6rem;}
.list-procedure > li div .txt01{font-weight: 500;font-size: 2.4rem;line-height: 3.2rem;letter-spacing: 0%;color: #121212;min-height: 6.4rem;text-overflow: ellipsis;white-space: normal;overflow: hidden;word-wrap: break-word;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;margin: 0 0 2rem;}
.list-procedure > li div .txt02{font-weight: 400;font-size: 1.6rem;line-height: 2.4rem;letter-spacing: 0%;color: #121212;padding: 2rem 0 0;text-overflow: ellipsis;white-space: normal;overflow: hidden;word-wrap: break-word;-webkit-line-clamp: 1;-webkit-box-orient: vertical;display: -webkit-box;border-top: 1px solid #CCCCCC;}
.list-procedure > li div:hover{background-color:#217eff;}
.list-procedure> li div:hover p{color:#fff}


@media screen and (max-width:1280px){
	.list-procedure {gap: 9rem;row-gap: 4rem;}
	.list-procedure > li{width: calc(100% / 3 - 6rem)}
	.list-procedure > li:nth-child(3n):before{display: none;} 
	.list-procedure > li:nth-child(4n):before{display: block;} 
	.list-procedure > li:last-child:before{display: none;} 
	.list-procedure > li:before{right: -5rem;}
}

@media screen and (max-width:1024px){
	.list-procedure {gap: 10rem;row-gap: 4rem;}
	.list-procedure > li{width: calc(100% / 2 - 5rem)}
	.list-procedure > li:nth-child(2n):before{display: none;} 
	.list-procedure > li:nth-child(3):before{display: block;} 
	.list-procedure > li:last-child:before{display: none;} 
	.list-procedure > li:before{right: -5rem;}
}

@media screen and (max-width:768px){
	.list-procedure {gap: 6rem}
	.list-procedure > li{width: 100%;}
	.list-procedure > li div {padding: 1.5rem;}
	.list-procedure > li div .num {font-size: 1.8rem;line-height: 2.6rem;margin: 0 0 1rem;}
	.list-procedure > li div .txt01 {min-height: auto;font-size: 2rem;line-height: 2.8rem;margin: 0 0 1rem;}
	.list-procedure > li div .txt02 {padding: 1rem 0 0;}
	.list-procedure > li:nth-child(2n):before{display: block;} 
	.list-procedure > li:nth-child(3):before{display: block;} 
	.list-procedure > li:last-child:before{display: none;} 
	.list-procedure > li:before{right: 50%;transform: rotate(90deg);bottom: -4rem;top: auto;}
}