.edit_here
{
	/* TODO:edit here */

}

.si_bg
{
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 200px !important;
    padding: 0 5vw 10vh 5vw !important;
    z-index: 0 !important;
	transition: all 500ms ease-in-out !important;
}

@media screen and (max-width: 873px)
{
    .si_bg
    {
        height: 512px !important;
        padding: 5vh 5vw !important;
        transform: rotate(-30deg) !important;
    }
}

@media screen and (max-width: 661px)
{
    .si_bg
    {
        height: 443px !important;
    }
}

@media screen and (max-width: 565px)
{
    .si_bg
    {
        height: 356px !important;
    }
}

@media screen and (max-width: 425px)
{
	.si_bg
	{
		height: 310px !important;
	}
}

.process_bg
{
	position: relative !important;
	display: block !important;
	width: 100% !important;
	height: auto !important;
	min-height: 30vw !important;
	/* padding: 0 0 10vh 0 !important; */
}

@media screen and (max-width: 679px)
{
	.process_bg
	{
		min-height: 94vw !important;
	}
}

.si_h2
{
    width: 100% !important;
    height: auto !important;
    position: relative !important;
    display: block !important;
    margin: 0 auto !important;
    text-align: center !important;
    font-size: 54px !important;
    font-weight: bold !important;
    max-width: 944px !important;
    padding-bottom: 40px !important;
    transition: all 100ms ease-in-out !important;
}

@media screen and (max-width: 1024px)
{
    .si_h2{
        font-size: 36px !important;
        padding-bottom: 20px !important;
        max-width: 715px !important;
    }
}

@media screen and (max-width: 750px)
{
    .si_h2
    {
        font-size: 36px !important;
         max-width: 400px !important;
    }
}

@media screen and (max-width: 500px)
{
	.si_h2
	{
		font-size: 24px !important;
	}
}

.si_overview_out
{
    position: relative !important;
    display: block !important;
    width: 80% !important;
    height: 620px !important;
    border-radius: 50% / 50% !important;
    border-top: 2px solid #9366FB !important;
    border-right: 5px solid #9366FB !important;
    border-left: 5px solid #9366FB !important;
    border-bottom: 7px solid #9366FB !important;
    margin: 0 auto !important;
    background-color: rgba(147, 102, 251, 0.1) !important;
    box-shadow: rgb(0 0 0 / 8%) 0px 60px 50px 10px !important;
}

@media screen and (max-width: 1601px)
{
    .si_overview_out
    {
        height: 538px !important;
    }
}

@media screen and (max-width: 1377px)
{
    .si_overview_out
    {
        height: 480px !important;
    }
}

@media screen and (max-width: 1285px)
{
    .si_overview_out
    {
        width: 70% !important;
        height: 410px !important;
    }
}

@media screen and (max-width: 1024px)
{
    .si_overview_out
    {
        width: 70% !important;
        height: 325px !important;

        border-top: 1px solid #9366FB !important;
        border-right: 3px solid #9366FB !important;
        border-left: 3px solid #9366FB !important;
        border-bottom: 5px solid #9366FB !important;
    }
}

@media screen and (max-width: 873px)
{
    .si_overview_out
    {
        width: 87% !important;
        height: 290px !important;
    }
}

@media screen and (max-width: 661px)
{
    .si_overview_out
    {
        width: 77% !important;
        height: 265px !important;
    }
}

@media screen and (max-width: 565px)
{
    .si_overview_out
    {
        width: 77% !important;
        height: 188px !important;
    }
}

@media screen and (max-width: 564px)
{
    .si_overview_out
    {
        border-bottom: 4px solid #9366FB !important;
    }
}

@media screen and (max-width: 425px)
{
	.si_overview_out
	{
		width: 99% !important;
		height: 152px !important;
	}
}

.si_overview_middle
{
    position: relative !important;
    display: block !important;
    width: 80% !important;
    height: 75% !important;
    top: 6% !important;
    background-color: #fafafa !important;
    border-radius: 50% / 50% !important;
    margin: 0 auto !important;
}

.si_overview_in
{
    position: relative !important;
    display: block !important;
    width: 77% !important;
    height: 70% !important;
    top: 6% !important;
    background-color: rgba(147, 102, 251, 0.1) !important;
    border-radius: 50% / 50% !important;
    margin: 0 auto !important;
}

.si_overview_h1
{
    position: relative !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    color: #9C7CE3 !important;
    text-align: center !important;
    margin: 0 auto !important;
    top: 22% !important;
	transition: all 500ms ease-in-out !important;
}

@media screen and (max-width: 1024px)
{
    .si_overview_h1
    {
        font-size: 20px !important;
    }
}

@media screen and (max-width: 873px)
{
    .si_overview_h1
    {
        transform: rotate(30deg) !important;
        left: 20px !important;
        top: 28% !important;
    }
}

@media screen and (max-width: 565px)
{
    .si_overview_h1
    {
        font-size: 14px !important;
        left: 13px !important;
        top: 21% !important;
    }
}

@media screen and (max-width: 500px)
{
    .si_overview_h1
    {
        font-size: 16px !important; 
    }
}

@media screen and (max-width: 425px)
{
    .si_overview_h1
    {
        left: 9px !important;
        top: 17% !important;
    }
}

.si_overview_h2
{
    position: relative !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    font-size: 74px !important;
    font-weight: 900 !important;
    color: #7c44fe !important;
    text-align: center !important;
    margin: 0 auto !important;
    top: 25% !important;
	transition: all 500ms ease-in-out !important;
}

@media screen and (max-width: 1024px)
{
    .si_overview_h2
    {
        font-size: 54px !important;
    }
}

@media screen and (max-width: 873px)
{
    .si_overview_h2
    {
        font-size: 36px !important;
        transform: rotate(30deg) !important;
    }
}

@media screen and (max-width: 565px)
{
    .si_overview_h2
    {
        font-size: 24px !important;
        left: 1px !important;
        top: 13px !important;
    }
}

@media screen and (max-width: 425px)
{
	.si_overview_h2
	{
		left: -5px !important;
		top: 3px !important;
	}
}

.si_overview_dot
{
    position: absolute !important;
    display: inline-block !important;
    width: 26px !important;
    height: 26px !important;
    /* background: #9366fb !important; */
    border-radius: 50px !important;
    background: radial-gradient(circle at 40% 40%, #b18bff, #7a4fe7) !important;
    box-shadow: 0 0 30px rgba(123, 86, 204, 0.5) !important;
	transition: all 500ms ease-in-out !important;
}

@media screen and (max-width: 1286px)
{
    .si_overview_dot
    {
        width: 20px !important;
        height: 20px !important;
    }
}

@media screen and (max-width: 564px)
{
    .si_overview_dot
    {
        width: 10px !important;
        height: 10px !important;
    }
}

.dot1
{
    left: -0.2% !important;
    top: 58% !important;
	transition: all 500ms ease-in-out !important;
}

.dot1::before
{
    content:'시스템 연계' !important;
    position: absolute !important;
    display: inline-block !important;
    width: 153px !important;
    height: auto !important;
    left: -157px !important;
    top: -5px !important;
    font-size: 32px !important;
    font-weight: 600 !important;
	transition: all 500ms ease-in-out !important;
}

@media screen and (max-width: 1286px)
{
    .dot2
    {
        left: -0.4% !important;
    }
}

@media screen and (max-width: 1024px)
{
    .dot1::before
    {
        font-size: 24px !important;
    width: 116px !important;
    left: auto !important;
    right: 23px !important;
    }
    
    .dot1
    {
        left: -0.7% !important;
        top: 58% !important;
    }
}

@media screen and (max-width: 873px)
{
    .dot1::before
    {
        left: -90px !important;
        top: -29px !important;
        width: 95px !important;
        text-align: center !important;
        transform: rotate(30deg) !important;
    }
}

@media screen and (max-width: 750px)
{
    .dot1::before
    {
        font-size: 22px !important;
    }
}

@media screen and (max-width: 564px)
{
    .dot1::before
    {
        font-size: 16px !important;
		width: 72px !important;
		left: -53px !important;
		top: 13px !important;
    }
}

@media screen and (max-width: 425px)
{
    .dot1::before
    {
		font-size: 13px !important;
		width: 59px !important;
		left: -47px !important;
		top: 10px !important;
    }
}

.dot2
{
    left: auto !important;
    right: 0% !important;
    top: 58% !important;
	transition: all 500ms ease-in-out !important;
}

.dot2::before
{
    content: '플랫폼 기반화' !important;
    position: absolute !important;
    display: inline-block !important;
    width: 176px !important;
    height: auto !important;
    top: -5px !important;
    left: auto !important;
    right: -186px !important;
    font-size: 32px !important;
    font-weight: 600 !important;
	transition: all 500ms ease-in-out !important;
}

@media screen and (max-width: 1286px)
{
    .dot2
    {
        right: -0.4% !important;
    }
}

@media screen and (max-width: 1024px)
{
    .dot2::before
    {
        font-size: 24px !important;
    }

    .dot2
    {
        right: -0.7% !important;
    }
}

@media screen and (max-width: 873px)
{
    .dot2::before
    {
        left: 12px !important;
        top: 28px !important;
        width: 100px !important;
        transform: rotate(30deg) !important;
    }
}

@media screen and (max-width: 750px)
{
    .dot2::before
    {
        font-size: 22px !important;
    }
}

@media screen and (max-width: 564px)
{
    .dot2::before
    {
        font-size: 16px !important;
		width: 86px !important;
		left: 13px !important;
		top: 28px !important;
    }
}

@media screen and (max-width: 425px)
{
	.dot2::before
	{
		font-size: 13px !important;
		width: 70px !important;
		left: -8px !important;
		top: 31px !important;
	}
}

.dot3
{
    left: 20% !important;
    top: 89.5% !important;
	transition: all 500ms ease-in-out !important;
}

.dot3::before
{
    content: '데이터 통합' !important;
    position: absolute !important;
    display: inline-block !important;
    width: 150px !important;
    height: auto !important;
    top: 33px !important;
    left: -122px !important;
    font-size: 32px !important;
    font-weight: 600 !important;
	transition: all 500ms ease-in-out !important;
}

@media screen and (max-width: 1024px)
{
    .dot3::before
    {
        font-size: 24px !important;
    }

    .dot3
    {
        top: 88% !important;
    }
}

@media screen and (max-width: 873px)
{
    .dot3::before
    {
        left: 6px !important;
        top: 31px !important;
        width: 64px !important;
        text-align: left !important;
        transform: rotate(30deg) !important;
    }
}

@media screen and (max-width: 750px)
{
    .dot3::before
    {
        font-size: 22px !important;
    }
}

@media screen and (max-width: 564px)
{
    .dot3::before
    {
        font-size: 16px !important;
    }
	
	.dot3
	{
		top: 89% !important;
	}
}

@media screen and (max-width: 425px)
{
	.dot3::before
	{
		font-size: 13px !important;
		width: 58px !important;
		left: -3px !important;
		top: 24px !important;
	}
}

.dot4
{
    left: 80% !important;
    top: 87.5% !important;
	transition: all 500ms ease-in-out !important;
}

.dot4::before
{
    content: '기술 커스터마이징' !important;
    position: absolute !important;
    display: inline-block !important;
    width: 230px !important;
    height: auto !important;
    top: 30px !important;
    left: 0px !important;
    font-size: 32px !important;
    font-weight: 600 !important;
	transition: all 500ms ease-in-out !important;
}

@media screen and (max-width: 1024px)
{
    .dot4::before
    {
        font-size: 24px !important;
    }

    .dot4
    {
        top: 85% !important;
    }
}

@media screen and (max-width: 873px)
{
    .dot4::before
    {
        left: 11px !important;
        top: 31px !important;
        width: 100px !important;
        transform: rotate(30deg) !important;
    }
}

@media screen and (max-width: 750px)
{
    .dot4::before
    {
        font-size: 22px !important;
    }
}

@media screen and (max-width: 564px)
{
    .dot4::before
    {
        font-size: 16px !important;
    }

	.dot4
	{
		top: 87% !important;
	}
}

@media screen and (max-width: 425px)
{
    .dot4::before
    {
		font-size: 13px !important;
		width: 90px !important;
        left: -4px !important;
    }
}

.dot5
{
    left: 50% !important;
    top: 98% !important;
	transition: all 500ms ease-in-out !important;
}

.dot5::before
{
    content: '업무 프로세스 정렬' !important;
    position: absolute !important;
    display: inline-block !important;
    width: 244px !important;
    height: auto !important;
    top: 30px !important;
    left: -100px !important;
    font-size: 32px !important;
    font-weight: 600 !important;
	transition: all 500ms ease-in-out !important;
}

@media screen and (max-width: 1024px)
{
    .dot5::before
    {
        font-size: 24px !important;
    }

    .dot5
    {
        top: 97% !important;
    }
}

@media screen and (max-width: 873px)
{
    .dot5::before
    {
        left: 6px !important;
        top: 47px !important;
        width: 132px !important;
        transform: rotate(29deg) !important;
    }
}

@media screen and (max-width: 750px)
{
    .dot5::before
    {
        font-size: 22px !important;
    }
}

@media screen and (max-width: 564px)
{
    .dot5::before
    {
        font-size: 16px !important;
		width: 117px !important;
		left: 10px !important;
		top: 38px !important;
    }

	.dot5
	{
		top: 98% !important;
	}
}

@media screen and (max-width: 425px)
{
    .dot5::before
    {
		font-size: 13px !important;
		width: 95px !important;
        left: -2px !important;
		top: 31px !important;
    }
}

.si_overview_gradient
{
    position: absolute !important;
    display: inline-block !important;
    width: 100% !important;
    height: 50% !important;
    top: -5px !important;
    background: linear-gradient(to bottom, #ffffff 24%, transparent) !important;
}

.si_overview_title_container
{
	z-index: 1 !important;
}

@media screen and (max-width: 873px)
{
    .si_overview_title_container
    {
        padding-bottom: 0 !important;
    }
}

.top_container
{
	overflow-x: hidden !important;
}

.process_border_bg {
	position: absolute !important;
	display: inline-block !important;
    width: 100% !important;
  	height: 30vw !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
}

.h2_view
{
	padding-bottom: 0 !important;
}

.process_inner_item
{
	position: relative !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	z-index: 1 !important;
	border-right: 2px dashed #bea4e8 !important;
}

.process_inner_item_last
{
	border: none !important;
}

@media screen and (max-width: 679px)
{
    .process_inner_item
    {
        border: none !important;
		height: 108px !important;
			min-width: 545.6px !important;
    }
}

.process_inner_view
{
	position: relative !important;
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	width: 100% !important;
	height: 37vw !important;
    /* transition: all 500ms ease-in-out !important; */
}

@media screen and (max-width: 679px)
{
	.process_inner_view
	{
		flex-direction: column !important;
		height: 100% !important;
	}
}

.process_h1
{
	position: relative !important;
	display: block !important;
	width: 40px !important;
	height: 40px !important;
	border-radius: 50px !important;
	background-color: rgba(124, 67, 254, 0.1) !important;
	margin: 10px auto !important;
	font-size: 32px !important;
	line-height: 40px !important;
	color: #A789EF !important;
	text-align: center !important;
}

.process_h1_2
{
	font-size: 30px !important;

	width: 38px !important;
	height: 38px !important;
	line-height: 38px !important;
}

.process_h1_3
{
	font-size: 28px !important;

	width: 36px !important;
	height: 36px !important;
	line-height: 36px !important;
}

.process_h1_4
{
	font-size: 26px !important;
	width: 34px !important;
	height: 34px !important;
	line-height: 34px !important;
}

.process_h1_5
{
	font-size: 24px !important;
	width: 32px !important;
	height: 32px !important;
	line-height: 32px !important;
}

@media screen and (max-width: 1400px)
{
	.process_h1
	{
		font-size: 24px !important;
		width: 32px !important;
		height: 32px !important;
		line-height: 32px !important;
	}

	.process_h1_2
	{
		font-size: 22px !important;
		width: 30px !important;
		height: 30px !important;
		line-height: 30px !important;
	}

	.process_h1_3
	{
		font-size: 20px !important;
		width: 28px !important;
		height: 28px !important;
		line-height: 28px !important;
	}

	.process_h1_4
	{
		font-size: 18px !important;
		width: 26px !important;
		height: 26px !important;
		line-height: 26px !important;
	}

	.process_h1_5
	{
		font-size: 16px !important;
		width: 24px !important;
		height: 24px !important;
		line-height: 24px !important;
	}
}

@media screen and (max-width: 980px)
{
	.process_h1
	{
		font-size: 23px !important;
		width: 30px !important;
		height: 30px !important;
		line-height: 30px !important;
	}

	.process_h1_2
	{
		font-size: 20px !important;
		width: 28px !important;
		height: 28px !important;
		line-height: 28px !important;
	}

	.process_h1_3
	{
		font-size: 18px !important;
		width: 26px !important;
		height: 26px !important;
		line-height: 26px !important;
	}

	.process_h1_4
	{
		font-size: 16px !important;
		width: 24px !important;
		height: 24px !important;
		line-height: 24px !important;
	}

	.process_h1_5
	{
		font-size: 14px !important;
		width: 22px !important;
		height: 22px !important;
		line-height: 22px !important;
	}
}

/* @media screen and (max-width: 780px)
{
	.process_h1
	{
		font-size: 20px !important;
		width: 27px !important;
		height: 27px !important;
		line-height: 27px !important;
	}

	.process_h1_2
	{
		font-size: 17px !important;
		width: 25px !important;
		height: 25px !important;
		line-height: 25px !important;
	}

	.process_h1_3
	{
		font-size: 15px !important;
		width: 21px !important;
		height: 21px !important;
		line-height: 21px !important;
	}

	.process_h1_4
	{
		font-size: 11px !important;
		width: 19px !important;
		height: 19px !important;
		line-height: 19px !important;
	}

	.process_h1_5
	{
		font-size: 9px !important;
		width: 17px !important;
		height: 17px !important;
		line-height: 17px !important;
	}
} */

@media screen and (max-width: 451px)
{
	.process_h1
	{
		font-size: 16px !important;
		width: 23px !important;
		height: 23px !important;
		line-height: 23px !important;
		margin: 6px auto !important;
	}

	.process_h1_2
	{
		font-size: 14px !important;
		width: 21px !important;
		height: 21px !important;
		line-height: 21px !important;
	}


	.process_h1_3
	{
		font-size: 13px !important;
		width: 18px !important;
		height: 18px !important;
		line-height: 18px !important;
	}

	.process_h1_4
	{
		font-size: 9px !important;
		width: 17px !important;
		height: 17px !important;
		line-height: 17px !important;
	}

	.process_h1_5
	{
		font-size: 8px !important;
		width: 16px !important;
		height: 16px !important;
		line-height: 16px !important;
	}
}

.process_h2
{
	position: relative !important;
	display: block !important;
	width: 100% !important;
	height: auto !important;
	font-size: 32px !important;
	font-weight: 900 !important;
	color: #A789EF !important;
	text-align: center !important;

}

.process_h2_2
{
	font-size: 30px !important;
}

.process_h2_3
{
	font-size: 28px !important;
	color: #9f77ff !important;
}

.process_h2_4
{
	font-size: 26px !important;
}

.process_h2_5
{
	font-size: 24px !important;
}

@media screen and (max-width: 1400px)
{
	.process_h2
	{
		font-size: 30px !important;
	}
}

@media screen and (max-width: 1400px)
{
	.process_h2_2
	{
		font-size: 24px !important;
	}

	.process_h2_2
	{
		font-size: 22px !important;
	}

	.process_h2_3
	{
		font-size: 20px !important;
	}

	.process_h2_4
	{
		font-size: 18px !important;
	}

	.process_h2_5
	{
		font-size: 16px !important;
	}
}

@media screen and (max-width: 980px)
{
	.process_h2_2
	{
		font-size: 22px !important;
	}

	.process_h2_2
	{
		font-size: 20px !important;
	}

	.process_h2_3
	{
		font-size: 18px !important;
	}

	.process_h2_4
	{
		font-size: 16px !important;
	}

	.process_h2_5
	{
		font-size: 14px !important;
	}
}

@media screen and (max-width: 980px)
{
	.process_h2
	{
		font-size: 22px !important;
	}

	.process_h2_2
	{
		font-size: 20px !important;
	}

	.process_h2_3
	{
		font-size: 18px !important;
	}

	.process_h2_4
	{
		font-size: 16px !important;
	}

	.process_h2_5
	{
		font-size: 14px !important;
	}
}

/* @media screen and (max-width: 780px)
{
	.process_h2
	{
		font-size: 17px !important;
	}

	.process_h2_2
	{
		font-size: 15px !important;
	}

	.process_h2_3
	{
		font-size: 13px !important;
	}

	.process_h2_4
	{
		font-size: 11px !important;
	}

	.process_h2_5
	{
		font-size: 9px !important;
	}
} */

/* @media screen and (max-width: 541px)
{
	.process_h2
	{
		font-size: 17px !important;
	}

	.process_h2_2
	{
		font-size: 15px !important;
	}

	.process_h2_3
	{
		font-size: 13px !important;
	}

	.process_h2_4
	{
		font-size: 11px !important;
	}

	.process_h2_5
	{
		font-size: 9px !important;
	}
}

@media screen and (max-width: 451px)
{
	.process_h2
	{
		font-size: 15px !important;
	}

	.process_h2_2
	{
		font-size: 13px !important;
	}

	.process_h2_3
	{
		font-size: 11px !important;
	}

	
	.process_h2_4
	{
		font-size: 11px !important;
	}

	.process_h2_5
	{
		font-size: 9px !important;
	}
} */

.process_inner_container
{
	position: relative !important;
	display: block !important;
	width: auto !important;
	height: auto !important;
	margin: 0 auto !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
}

@media screen and (max-width: 585px)
{
	.process_inner_container
	{
		top: 47% !important;
	}
}

.process_bottom_text
{
	position: absolute !important;
	display: inline-block !important;
	width: auto !important;
	height: auto !important;
	padding: 10px 20px !important;
	font-size: 20px !important;
	border-radius: 50px !important;
	text-align: center !important;
	margin: 0 auto !important;
	color: #b7b7b7 !important;
	background-color: #f1f1f1 !important;
	border: 1.5px dashed #dbdbdb !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
}

@media screen and (max-width: 1400px)
{
	.process_bottom_text
	{
		font-size: 16px !important;
		padding: 6px 13px !important;
	}
}

@media screen and (max-width: 980px)
{
	.process_bottom_text
	{
		font-size: 16px !important;
		padding: 4px 5px !important;
	}
}

@media screen and (max-width: 780px)
{
	.process_bottom_text
	{
		display: none !important;
	}
}

.process_svg
{
	position: absolute !important;
	display: inline-block !important;
	width: 100% !important;
	height: auto !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
    transition: all 500ms ease-in-out !important;
	/* justify-content: center !important;
	align-items: center !important; */
}

@media screen and (max-width: 679px)
{
    .process_svg
    {
		transform: translate(-50%, -50%) rotate(90deg) !important;
		height: 150% !important;
		min-width: 678px !important;
		min-height: 245.5px !important;
		margin: 0 auto !important;
		left: 50% !important;
    }
}

.process_dot
{
	position: absolute !important;
	display: inline-block !important;
	width: 14px !important;
	height: 14px !important;
	left: auto !important;
	border-radius: 50px !important;
	background-color: #7c43fe
}

.process_dot0
{
	right: -5% !important;
	top: 12.8% !important;
}

.process_dot1
{
	right: -2% !important;
	top: 20.5% !important;
}

.process_dot2
{
	right: -2% !important;
	top: 26% !important;
}

.process_dot3
{
	right: -2% !important;
	top: 29.5% !important;
}

.process_dot4
{
	right: -2% !important;
	top: 30% !important;
}

.process_dot0::before
{
	content: '' !important;
	position: absolute !important;
	display: inline-block !important;
	top: -120% !important;
	left: auto !important;
	right: -1961% !important;
	width: 2000% !important;
    height: 20px !important;
    border-left: 4px solid #C29CFF !important;
    border-top: 3px solid #C29CFF !important;
    transform: skewX(-45deg) !important;
    transform-origin: left bottom !important;
	z-index: -1 !important;
	transition: all 300ms ease-in-out !important;
}

.process_dot1::before
{
	content: '' !important;
	position: absolute !important;
	display: inline-block !important;
	top: -120% !important;
	left: auto !important;
	right: -1961% !important;
	width: 2000% !important;
    height: 20px !important;
    border-left: 4px solid #C29CFF !important;
    border-top: 3px solid #C29CFF !important;
    transform: skewX(-45deg) !important;
    transform-origin: left bottom !important;
	z-index: -1 !important;
	transition: all 300ms ease-in-out !important;
}

.process_dot2::before
{
	content: '' !important;
	position: absolute !important;
	display: inline-block !important;
	top: -120% !important;
	left: auto !important;
	right: -1961% !important;
	width: 2000% !important;
    height: 20px !important;
    border-left: 4px solid #C29CFF !important;
    border-top: 3px solid #C29CFF !important;
    transform: skewX(-45deg) !important;
    transform-origin: left bottom !important;
	z-index: -1 !important;
	transition: all 300ms ease-in-out !important;
}

.process_dot3::before
{
	content: '' !important;
	position: absolute !important;
	display: inline-block !important;
	top: -120% !important;
	left: auto !important;
	right: -1961% !important;
	width: 2000% !important;
    height: 20px !important;
    border-left: 4px solid #C29CFF !important;
    border-top: 3px solid #C29CFF !important;
    transform: skewX(-45deg) !important;
    transform-origin: left bottom !important;
	z-index: -1 !important;
	transition: all 300ms ease-in-out !important;
}

.process_dot4::before
{
	content: '' !important;
	position: absolute !important;
	display: inline-block !important;
	top: -120% !important;
	left: auto !important;
	right: -1961% !important;
	width: 2000% !important;
    height: 20px !important;
    border-left: 4px solid #C29CFF !important;
    border-top: 3px solid #C29CFF !important;
    transform: skewX(-45deg) !important;
    transform-origin: left bottom !important;
	z-index: -1 !important;
	transition: all 300ms ease-in-out !important;
}

.process_dot0::after
{
	content: '업무 흐름과 데이터 구조를 정밀하게 파악해 SI의 기반을 마련합니다.' !important;
	position: absolute !important;
	display: inline-block !important;
	width: 284px !important;
	top: -806% !important;
	left: auto !important;
	right: -2161% !important;
	font-size: 24px !important;
	color: #9f7cef !important;
	transition: all 300ms ease-in-out !important;
}

.process_dot1::after
{
	content: '요구사항을 기능으로 정확히 전환하여 신뢰할 수 있는 시스템을 개발합니다.' !important;
	position: absolute !important;
	display: inline-block !important;
	width: 284px !important;
	top: -806% !important;
	left: auto !important;
	right: -2161% !important;
	font-size: 24px !important;
	color: #9f7cef !important;
	transition: all 300ms ease-in-out !important;
}

.process_dot2::after
{
	content: '기능과 흐름 전반을 검증하여 사전 리스크를 차단하고 품질을 확보합니다.' !important;
	position: absolute !important;
	display: inline-block !important;
	width: 352px !important;
	top: -788% !important;
	left: auto !important;
	right: -2638% !important;
	font-size: 24px !important;
	color: #9f7cef !important;
	transition: all 300ms ease-in-out !important;
}

.process_dot3::after
{
	content: '운영 환경에서 수집된 피드백을 기반으로 실질적 개선을 적용합니다.' !important;
	position: absolute !important;
	display: inline-block !important;
	width: 284px !important;
	top: -806% !important;
	left: auto !important;
	right: -2161% !important;
	font-size: 24px !important;
	color: #9f7cef !important;
	transition: all 300ms ease-in-out !important;
}

.process_dot4::after
{
	content: '지속 가능한 유지보수 체계를 통해 안정성과 확장성을 보장합니다.' !important;
	position: absolute !important;
	display: inline-block !important;
	width: 284px !important;
	top: -806% !important;
	left: auto !important;
	right: -2161% !important;
	font-size: 24px !important;
	color: #9f7cef !important;
	transition: all 300ms ease-in-out !important;
}

@media screen and (max-width: 1900px)
{
	.process_dot0::after,
	.process_dot1::after,
	.process_dot2::after,
	.process_dot3::after,
	.process_dot4::after
	{
		font-size: 22px !important;
		top: -769% !important;
		width: 284px !important;
		right: -2161% !important;
	}
}

@media screen and (max-width: 1661px)
{
	/* .process_dot0::after,
	.process_dot1::after,
	.process_dot2::after,
	.process_dot3::after,
	.process_dot4::after
	{
		width: 200px !important;
		top: -641% !important;
		right: -1550% !important;
	} */
	.process_dot0::before,
	.process_dot1::before,
	.process_dot2::before,
	.process_dot3::before,
	.process_dot4::before
	{
		width: 1552% !important;
		right: -1521% !important;
	}
	.process_dot2
	{
		right: -2% !important;
	} 
	.process_dot3 
	{
		right: -3% !important;
		top: 29% !important;
	}
}

@media screen and (max-width: 1581px)
{
	.process_dot0::after,
	.process_dot1::after,
	.process_dot2::after,
	.process_dot3::after,
	.process_dot4::after
	{
		font-size: 20px !important;
		width: 230px !important;
		right: -1793% !important;
	}

	.process_dot0::before,
	.process_dot1::before,
	.process_dot2::before,
	.process_dot3::before,
	.process_dot4::before
	{
		width: 1000% !important;
		right: -966% !important;
	}
}

@media screen and (max-width: 1366px)
{
	.process_dot0::after,
	.process_dot1::after,
	.process_dot2::after,
	.process_dot3::after,
	.process_dot4::after
	{
		font-size: 16px !important;
		width: 179px !important;
		right: -1403% !important;
		top: -593% !important;
	}

	.process_dot0 
	{
		right: -8% !important;
		top: 12.4% !important;
	}
	.process_dot1 
	{
		right: -3% !important;
		top: 20% !important;
	}

	.process_dot2 
	{
		right: -3% !important;
		top: 25.5% !important;
	}

	/* .process_dot0::before,
	.process_dot1::before,
	.process_dot2::before,
	.process_dot3::before,
	.process_dot4::before
	{
		width: 1000% !important;
		right: -966% !important;
	} */
}

@media screen and (max-width: 1136px)
{
	.process_dot0::after,
	.process_dot1::after,
	.process_dot2::after,
	.process_dot3::after,
	.process_dot4::after
	{
		width: 105px !important;
		top: -877% !important;
		right: -892% !important;
	}

	.process_dot0::before,
	.process_dot1::before,
	.process_dot2::before,
	.process_dot3::before,
	.process_dot4::before
	{
		width: 600% !important;
		right: -566% !important;
	}

	.process_dot0
	{
		right: -9% !important;
		top: 12% !important;
	}

	.process_dot1
	{
		right: -4% !important;
		top: 20% !important;
	}

	.process_dot2
	{
		right: -4% !important;
		top: 25.5% !important;
	}

	.process_dot3
	{
		right: -4% !important;
		top: 28.5% !important;
	}

	.process_dot4
	{
		right: -4% !important;
		top: 29.5% !important;
	}
}

@media screen and (max-width: 780px)
{
	.process_dot0
	{
		right: -13% !important;
		top: 11.5% !important;
	}

	 .process_dot1
	{
		right: -6% !important;
		top: 77% !important;
	}

	.process_dot2
	{
		right: -6% !important;
		top: 24% !important;
	}

	.process_dot3
	{
		right: -6% !important;
		top: 68.5% !important;
	}

	/* .process_dot4
	{
		right: -5% !important;
		top: 41% !important;
	} */

	.process_dot0::before,
	.process_dot1::before,
	.process_dot2::before,
	.process_dot3::before,
	.process_dot4::before
	{
		display: none !important;
	}

	.process_dot0::after,
	.process_dot2::after,
	.process_dot4::after
	{
		width: 116px !important;
		top: -479% !important;
		right: -863% !important;
		font-size: 14px !important;
	}

	.process_dot1::after,
	.process_dot3::after
	{
		width: 116px !important;
		top: 87% !important;
		right: -863% !important;
		font-size: 14px !important;
	}
}

@media screen and (max-width: 679px)
{
	.process_dot0,
	.process_dot1,
	.process_dot2,
	.process_dot3,
	.process_dot4
	{
		width: 10px !important;
		height: 10px !important;
	}

	.process_dot0
	{
		right: -36% !important;
		top: 72.5% !important;
	}

	.process_dot1
	{
		right: 66% !important;
		top: 100% !important;
	}

	.process_dot2
	{
		right: 36% !important;
		top: 100% !important;
	}

	.process_dot3 
	{
		right: 61.8% !important;
		top: 100% !important;
	}

	.process_dot4 
	{
		right: 38.8% !important;
		top: 100% !important;
	}

	.process_dot0::after,
	.process_dot2::after,
	.process_dot4::after
	{
		width: 178px !important;
		top: 100% !important;
		right: -1800% !important;
	}

	.process_dot1::after,
	.process_dot3::after
	{
		width: 178px !important;
		top: 108% !important;
		right: 159% !important;
		text-align: right !important;
	}
}

/* @media screen and (max-width: 565px)
{
	.process_dot4
	{
		right: 2% !important;
	}
}

@media screen and (max-width: 451px)
{
	.process_dot0
	{
		right: -39% !important;
    	top: 2.5% !important;
	}
	.process_dot1{
		top: 83.8% !important;
	}
	.process_dot2
	{
		top: 18% !important;
	}

	.process_dot3
	{
		right: 7% !important;
		top: 73.5% !important;
	}

	.process_dot4
	{
		top: 24% !important;
	}

	.process_dot0::after,
	.process_dot2::after,
	.process_dot4::after
	{
		width: 96px !important;
	}

	.process_dot0::after
	{
		top: -508% !important;
		right: -1032% !important;
	}

	.process_dot2::after
	{
		top: -579% !important;
		right: -993% !important;
	}

	.process_dot4:after
	{
		top: -734% !important;
		right: -1000% !important;
	}
} */

@media screen and (max-width: 598px)
{
	.process_dot0
	{
		right: -34% !important;
	}

	.process_dot1
	{
		right: 65.3% !important;
	}

	.process_dot2
	{
		right: 36.5% !important;
	}

	.process_dot3
	{
		right: 61.5% !important;
	}
}

@media screen and (max-width: 598px)
{
	.process_dot0::after,
	.process_dot2::after,
	.process_dot4::after
	{
		width: 90px !important;
		top: 100% !important;
		right: -950% !important;
	}

	.process_dot1::after,
	.process_dot3::after
	{
		width: 108px !important;
		top: 108% !important;
		right: 159% !important;
		text-align: right !important;
	}
}

@media screen and (max-width: 420px)
{
	.process_dot0::after,
	.process_dot2::after,
	.process_dot4::after
	{
		width: 81px !important;
		top: 100% !important;
		right: -800% !important;
	}

	.process_dot1::after,
	.process_dot3::after
	{
		width: 78px !important;
		top: 108% !important;
		right: 100% !important;
		text-align: right !important;
	}
}


/* @media screen and (max-width: 545px)
{
	.process_dot0
	{
		right: -36% !important;
		top: 72.5% !important;
	}

	.process_dot1
	{
		right: 66% !important;
		top: 100% !important;
	}

	.process_dot2
	{
		right: 36% !important;
		top: 100% !important;
	}

	.process_dot3 
	{
		right: 61.8% !important;
		top: 100% !important;
	}

	.process_dot4 
	{
		right: 38.8% !important;
		top: 100% !important;
	}

	.process_dot0::after,
	.process_dot2::after,
	.process_dot4::after
	{
		width: 178px !important;
		top: 100% !important;
		right: -1800% !important;
	}

	.process_dot1::after,
	.process_dot3::after
	{
		width: 178px !important;
		top: 108% !important;
		right: 159% !important;
		text-align: right !important;
	}
} */

.process_top_container
{
	padding: 10vh 0 !important;
}

@media screen and (max-width: 781px)
{
	.process_top_container
	{
		padding: 5vh 0 !important;	
	}
}

@media screen and (max-width: 679px)
{
    .process_top_container
	{
		padding: 59px 0 !important;
	}
}

.si_overflow
{
	overflow-x: hidden !important;
}

.first_view
{
	transition: all 100ms ease-in-out !important;
	width: 44% !important;
}

@media screen and (max-width: 679px)
{
	.first_view
	{
		width: 24% !important;
		min-width: 127.94px !important;
		height: 29px !important;
	}
}

/* @media screen and (max-width: 541px)
{
	.first_view
	{
		width: 2% !important;
	}
} */

.showCase_hover
{
}