@charset "UTF-8";

.title0301 {
	font-size: 26px;
	line-height: 130%;
	color: #222229;
	padding-bottom: 20px;
	border-bottom: 2px solid #111111;
}
.icon-info-box {
	padding: 28px 58px;
	background-color: #f2f5fa;
	display: flex;
	align-items: center;
	gap: 45px;
	margin-bottom: 75px;
	border-radius: 10px;
}
.icon-info-box .icon{
	flex: 0 0 130px;
	position: relative;
	width: 130px;
	height: 130px;
	display: flex;
	align-items: center;
	justify-content: center;	
	background-color: #fff;
	border-radius: 100%;
}
.icon-info-box .icon img{
	width: 75px;
	height: 75px;	
}
.icon-info-box .desc {
	font-size: 19px;
	line-height: 140%;
	color: #444449;
}
.contact {
	display: block;
	padding-top: 25px;
}
.check-list {
	display: flex;
	padding: 40px 20px 38px 20px;
	gap: 20px;
	border-bottom: 1px solid #e9e9ea;
}
.check-list dt {
	position: relative;
	flex: 0 0 300px;
	color: #111119;
	font-weight: 700;
	padding-left: 42px;
	line-height: 180%;
}
.check-list dt::before{
	content: '';
	position: absolute;
	left: 0;
	top: 4px;
	width: 24px;
	height: 24px;
	background-image: url(/_res/ctl/img/icon/icon_check02.png);
	background-size: 100%;
}
.check-list dd {
	line-height: 150%;
	word-break: keep-all;
	margin-bottom: 0;
}
.info-list,
.info-ol-list > li {
	display: flex;
	padding: 25px 20px 22px 20px;
	gap: 20px;
	border-bottom: 1px solid #e9e9ea;
	font-size: 1.208rem;
}
.info-list dt {
	flex: 0 0 170px;
	color: #111119;
	font-weight: 700;
	line-height: 150%;
}
.info-list dd {
	line-height: 150%;
	word-break: keep-all;
	margin-bottom: 0;
	line-height: 150%;
}
.info-ol-list > li .num {
	flex: 0 0 55px;
	color: #111119;
	font-weight: 700;
}	
.process-wrapper {    
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    margin: 38px 0 15px 0;
}
.process-box {
    position: relative;
    min-height: 125px;
    flex: 1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    font-size: 1.083rem;
    line-height: 140%;
    color: #555;
    font-weight: 400;
	word-break: keep-all;
    border-radius: 10px;
	background-color: #f7f9fb;
	
}
.process-box:after {
    content: '';
    position: absolute;
    top: 50%;
    right: -28px; /* ➜ 박스 간 화살표 여백 고려한 고정값 */
    transform: translateY(-50%);
    width: 13px;
    height: 21px;
    background: url(/_res/ctl/img/icon/icon_arrow01.png) no-repeat center;
    background-size: contain;
}
.process-box:nth-child(4n):after,
.process-box:last-child:after{
	display: none;
}
.process-box .process-header {
	position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
	height: 40px;
    background-color: #39b7ec;
    text-align: center;
    color: #ffffff;
	font-size: 16px;
    font-weight: 700;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.process-box .process-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
	height: 80px;
    background-color: #f7f9fb;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    text-align: center;	
    font-weight: 600;
}
.process02 {	
    grid-template-columns: repeat(3, 1fr);
}
.process02 .process-box .process-content{
	height: 137px;
	gap: 10px;
}
.process02 .process-box .process-content > strong{
	color: #222229;
	font-weight: 600 !important;
}
.process02 .process-box .process-content > span{
	font-weight: 500 !important;
}


@media only all and (max-width: 1023px) {
	.title0301 {
		font-size: 1.5rem;
		padding-bottom: 1.458rem;
	}
	.icon-info-box {
		flex-direction: column;
		padding: 2.5rem;
		gap: 2.083rem;
		margin-bottom: 3.542rem;
		border-radius: 0.5rem;
	}
	.icon-info-box .icon{
		flex: 0 0 auto;
		width: 7.583rem;
		height: 7.583rem;
	}
	.icon-info-box .icon img{
		width: 4.375rem;
		height: 4.375rem;	
	}
	.icon-info-box .desc {
		width: 100%;
		font-size: 1.208rem;
	}
	.contact {
		padding-top: 1.667rem;
	}
	.check-list {
		flex-direction: column;
		padding: 2.5rem 0;
		gap: 1.042rem;
	}
	.check-list dt {
		flex: 0 0 auto;
		font-size: 1.208rem;
		padding-left: 2rem;
	}
	.check-list dt::before{
		top: 4px;
		width: 1.5rem;
		height: 1.5rem;
		background-repeat: no-repeat;
	}
	.check-list dd {
		font-size: 1.208rem;
	}
	.info-list {
		flex-direction: column;
		padding: 1.25rem 0;
		gap: 1.042rem;
	}
	.info-list dt {
		flex: 0 0 auto;
		font-size: 1.208rem;
	}
	.info-list dd {
		font-size: 1.208rem;
	}
	.info-ol-list > li {
		padding: 1.25rem 0;
		gap: 1.042rem;
		line-height: 150%;
	}
	.info-ol-list > li .num {
		flex: 0 0 auto;
	}	
	.process-wrapper {    
		grid-template-columns: repeat(1, 1fr);
		gap: 2.083rem;
		margin: 2.625rem 0 15px 0;
	}
	.process-box {
		min-height: 7.5rem;
		font-size: 1.208rem;
		border-radius: 0.5rem;
	}
	.process-box:after {		
		top: auto;
		right: auto;
		left: 50%;
		bottom: -1.5rem;
		width: 1.375rem;
		height: 0.875rem;
		transform: rotate(90deg) translate(0, 50%);
	}
	.process-box:nth-child(4n):after {
		display: block;
	}
	.process-box:last-child:after {
		display: none;
	}
	.process-box .process-header {
		height: 2.542rem;
		font-size: 1.083rem;
		border-top-left-radius: 0.5rem;
		border-top-right-radius: 0.5rem;
	}
	.process-box .process-content {
		height: 5.042rem;
		border-bottom-left-radius: 0.5rem;
		border-bottom-right-radius: 0.5rem;
	}
	.process02 {	
		grid-template-columns: repeat(1, 1fr);
	}
	.process02 .process-box .process-content{
		height: 6.833rem;
		gap: 0.417rem;
	}
	.mt50 {
		margin-top: 2.083rem !important;
	}
}