body,
html { overflow: hidden;}

.sub_wrap { max-width: 168rem; padding: 0 4rem 0;}

.process-slide {
    display: flex;
    gap: 60px;
    position: relative;
    padding-bottom: 14rem;
}

.moveMenu {
    width: 30rem;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    z-index: 10;
    padding-left: unset;
    top: unset;
}
.moveMenu li { 
	margin-bottom: unset;
	background: unset;
}
.moveMenu li:not(:last-child) a::after {
	content: "";
    display: block;
    width: 1px;
    height: 4rem;
    border-left: 1px dashed rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 80%;
    left: 2rem;
    z-index: -1;
}
.swiper.mySwiper {
	width: 100% !important;
    flex: 1;
    min-width: 0;
    overflow: visible;
    padding-bottom: 5rem;
    clip-path: inset(0 -100vw 0 -30px);
}

.swiper-slide {
    width: 84rem;
    height: 55rem;
    align-self: flex-end;
    border-radius: 8px;
    overflow: hidden;
}
.swiper-slide:nth-child(1) {background: url(/static/imgs/menu1/process-slide1.jpg) no-repeat center / cover;}
.swiper-slide:nth-child(2) {background: url(/static/imgs/menu1/process-slide2.jpg) no-repeat center / cover;}
.swiper-slide:nth-child(3) {background: url(/static/imgs/menu1/process-slide3.jpg) no-repeat center / cover;}
.swiper-slide:nth-child(4) {background: url(/static/imgs/menu1/process-slide4.jpg) no-repeat center / cover;}

.swiper-slide:nth-child(4) .startup-progrem dd .step-box2 { background: rgba(255, 255, 255, 0.2);}

.swiper-slide-active { opacity: 1;}

.swiper-scrollbar {
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 2px !important;
    background: rgba(0, 0, 0, 0.1);
}

.swiper-scrollbar-drag {
    background: #000;
}

.card-content {
	height: 100%;
    display: flex;
    align-items: flex-end;
}
.card-content .img-box img {
    width: 100%;
    display: block;
}
.card-content .text-box {
    width: 100%;
}
.badge {
    background: #0055ff;
    color: #fff;
    padding: .5rem 1rem;
    font-size: 1.4rem;
    margin-bottom: 1rem;
    display: inline-block;
}

.programText { position: static; transform: unset;}

.sub_commonTop.sktch { padding: unset; display: flex; align-items: center;}
.programText h2.Accelerating { margin-bottom: 2.4rem; font-size: 4.8rem;}
.programText p { font-size: 1.8rem;}

.startup-progrem dd .step-box1 { display: inline-block; padding: 1.5rem 4rem; border-top-right-radius: 26px;}
.startup-progrem dd .step-box1 { background: #0052D4;}
.startup-progrem dd .step-box2 { display: flex; padding: 2.8rem 4rem 3.2rem; min-height: 17.1rem; background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(64px); justify-content: space-between;border: 1px solid #D7D8D9; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; border-top: unset;}
.startup-progrem .step-box2 strong { color: #00C39F !important; font-size: clamp(2rem, 0.5128vw + 1.8154rem, 2.8rem);}
.startup-progrem dd .step-box2 > ul li { margin-bottom: 1.2rem; font-size: clamp(1.2rem, 0.7692vw + 0.9231rem, 2.4rem);}
.startup-progrem dd .step-box2 > ul li:last-child {margin-bottom: 0;}
.startup-progrem dd .step-box2 > ul li::before { content: "1"; display: inline-block; font-family: "Daeojamjil"; font-weight: 400; color: #fff; background: #000; border-radius: 50%; width: 1.8rem; line-height: 1.8rem; text-align: center; font-size: 1.2rem; vertical-align: middle; margin-right: .8rem;}
.startup-progrem dd .step-box2 > ul li:nth-child(1)::before { content: "1";}
.startup-progrem dd .step-box2 > ul li:nth-child(2)::before { content: "2";}
.startup-progrem dd .step-box2 > ul li:nth-child(3)::before { content: "3";}

/* ============= */
/* 스크롤 트리거 */
/* ============= */

.subTit.padding { margin-bottom: 8rem;}
/* 1. 전체 레이아웃 & 고정 영역 */
.care {
	padding: 8rem 0 28rem;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.pin-wrap {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.left-area {
    display: flex;
    justify-content: center;
    align-items: center;
}

.circle-container {
    position: relative;
    width: 56rem;
    height: 56rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.rotate-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform-origin: center center;
}

.center-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-weight: bold;
    font-size: clamp(2.2rem, 1.1538vw + 1.7846rem, 4rem);
    color: #0055ff;
    z-index: 2;
	font-family: "Daeojamjil";
    line-height: 1.4;
    border-radius: 50%;
}

.right-area {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.right-area h2 {
    font-size: 40px;
    line-height: 1.3;
    margin-bottom: 40px;
    color: #222;
}

.step-list {
    display: grid; 
    grid-template-columns: 1fr; 
    grid-template-rows: 1fr;
}
.step {
    grid-area: 1 / 1 / 2 / 2;
    opacity: 0; 
    visibility: hidden; 
    transform: translateY(30px);
    display: flex;
    align-items: center;
    width: 78.4rem;
    position: relative;
}

.step-badge {
	padding-left: 4rem;
    margin-bottom: 1.2rem;
    font-size: 3.2rem;
    font-weight: bold;
    position: relative;
}

.step-badge::after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: #ccc;
    margin-top: 1.2rem;
}

.desc {
    font-size: 18px;
    color: #666;
    line-height: 1.6;
}

.step figure {
    width: 32rem;
    height: 40rem;
    box-shadow: 4px 4px 16px 0px #00000033;
    border-radius: 8px;
    overflow: hidden;
}
.step figcaption {
    flex: 1;
}
.step figcaption ul {
	padding-left: 4rem;
    padding-top: 1.6rem;
}
.step figcaption ul li:last-child {	margin-bottom: unset;}
.step figcaption ul li {
	margin-bottom: 1.2rem;
    font-size: 2rem;
}
.step figcaption ul li::before { content: "·"; display: inline-block; margin-right: .8rem;}
.step-list .step:nth-child(1) figure { border-left: 12px solid #0052D4;}
.step-list .step:nth-child(2) figure { border-left: 12px solid #FA8D29;}
.step-list .step:nth-child(3) figure { border-left: 12px solid #00C39F;}

.step figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* 도트 애니메이션 */
.connect-box {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -30.6rem;
    width: 30.6rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    pointer-events: none; 
}

.line {
    width: 0%; 
    height: 2px;
    background-color: #1a1a1a;
    display: block;
}

.dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #ccc;
    transform: scale(0);
    flex-shrink: 0;
    margin-right: -1px;
}

.step-list li:nth-child(1) .dot { background-color: #0055ff; }
.step-list li:nth-child(2) .dot { background-color: #ff9900; }
.step-list li:nth-child(3) .dot { background-color: #00cc99; }


@media screen and (max-width: 1023px) { 
	.common { padding: unset;}
	.sub_wrap.trigger { padding: 6rem 2rem 0; background: #fff;}
    .process-slide { flex-direction: column;}
	.moveMenu { flex-direction: row; width: unset;}
	.moveMenu li:not(:last-child) a::after { display: none;}
	.swiper.mySwiper { clip-path: unset;}
    .swiper-slide { width: 100% !important; max-width: 100% !important;}
    .swiper-wrapper { gap: 0 !important;}
    .swiper-slide { margin-right: 16px !important;}
    .subTit.padding { padding: 0;}
    
    .sub_wrap { padding: 10rem 2rem 0;}
    
    /* 모바일버젼 스크롤 부분 */
    .circle-container { width: auto; height: auto;}
        
    .pin-wrap { flex-direction: column; align-items: self-start;}
    .onestop { margin-top: 6rem; padding-left: 2rem;}
    .onestop ul li:not(:last-child) { margin-bottom: 2.4rem;}
    .onestop ul li span { position: relative; margin-bottom: 1.2rem; font-size: 1.6rem; display: inline-block; padding: .7rem 1.6rem .7rem 3.8rem; border-radius: 4px; color: #fff;}
    .onestop ul li:nth-child(1) span { background: #0052D4;}
    .onestop ul li:nth-child(2) span { background: #FA8D29;}
    .onestop ul li:nth-child(3) span { background: #00C39F;}
    .onestop ul li span::before {
    	content: "";
    	display: block;
    	width: 1.6rem;
    	line-height: 1.6rem;
    	border-radius: 50%;
    	background: #fff;
    	position: absolute;
    	left: 1.2rem;
    	top: 50%;
    	transform: translateY(-50%);
    	text-align: center;
    	font-size: 1.2rem;
    	font-family: 'Daeojamjil';
    	font-weight: 600;
    }
    .onestop ul li:nth-child(1) span::before {
    	content: "1";
    	color: #0052D4;
    }
    .onestop ul li:nth-child(2) span::before {
    	content: "2";
    	color: #FA8D29;
    }
    .onestop ul li:nth-child(3) span::before {
    	content: "3";
    	color: #00C39F;
    }
    
    .onestop ul li p { font-size: 1.4rem; margin-bottom: .6rem;}
    .onestop ul li p:last-child { margin-bottom: 0;}
}
@media screen and (max-width: 580px) {
	.sub_commonTop.sktch { height: 14rem;}
    .programText p em { margin-top: -2px; font-size: 1.1rem;}
    .programText h2.Accelerating > img { margin-top: unset; height: 3.2rem; vertical-align: middle;}
    .programText h2, .programText h2.Accelerating { margin-bottom: 1.2rem; font-size: 2.8rem;}
    .programText p { font-size: 1.4rem;}
    
    .care { padding: 2rem 0 10rem;}
    
    .subTit.padding { margin-bottom: 2.8rem; line-height: 1.4;}
    .moveMenu { flex-wrap: wrap; gap: 12px;}
	.moveMenu li { width: calc(50% - 12px); height: 3.8rem;}
	
	.process-slide { gap: 35px; padding-bottom: 8rem;}
	.startup-progrem dd .step-box1 { padding: .9rem 2rem;}
	.startup-progrem dd .step-box2 { padding: 1.2rem 2rem; min-height: auto; flex-direction: column; gap: 12px;}
	.startup-progrem .step-box2 strong { line-height: 1.5;}
	.startup-progrem dd .step-box2 > ul li { margin-bottom: .6rem;}
	.startup-progrem dd .step-box2 > ul li::before { width: 1.2rem; line-height: 1.2rem; font-size: .9rem; margin-right: .4rem;}
	
	.swiper-slide { height: 32rem;}
	
	.moveMenu li::before { width: 1.4rem; height: 1.4rem;}
	.moveMenu li a { padding-left: 3rem;}
	.moveMenu li.on::after { width: .8rem; height: .8rem; left: 1.4rem;}
}