.step-group {width: 100%;}

.step-lists {display: flex;justify-content: flex-start;flex-wrap: wrap;gap: 36px;}
.step-lists > li {flex: 1;position: relative;height: max-content;min-height: 298px;background: #D7E1E966;padding: 32px 32px 32px 36px;box-sizing: border-box;position: relative;border-radius: 20px;height: 100%;}  
.step-lists > li .box-item {position: relative;}
.step-lists > li:before {content: "";position: absolute;background: url(../img/common/ico-step.png)no-repeat;background-size: cover;width: 24px;height: 24px;top: 50%;right: -44px;transform: translate(-50%, -50%);} 
.step-lists > li:last-child:before {display: none;}
.step-lists > li .num {font-weight: 800;font-size: 32px;line-height: 1.5;letter-spacing: -0.02em;text-transform: unset;color: #0B5DCF;padding: 0 0 16px;display: block;}
.step-lists > li .txt {min-height: 104px;margin-bottom: 9px;} 
.step-lists > li .txt:not(:has(.desc)) .tit {padding: 0;}
.step-lists > li .txt .tit {font-weight: 600;font-size: 20px;line-height: 150%;letter-spacing: -0.02em;text-transform: uppercase;color: #111;margin-bottom: 8px;}
.step-lists > li .ico {text-align: right;margin-right: 2px;}
.step-lists > li .txt-min {font-size: 14px;font-weight: 400;line-height: 1.5;color: #666;margin-top: -2px;}  

.ul-type04 > li {position: relative;padding: 0 0 0px 10px;line-height: 150%;font-size: 14px;font-weight: 400;color: #666;letter-spacing: -0.02em;margin-bottom: 4px;}
.ul-type04 > li:before {content: '';position: absolute;top: 9px;left: 0;width: 5px;height: 1.5px;background-color: #666;}

@media (max-width: 1300px) { 
	.step-lists > li .txt {min-height: 133px;}
}

@media (max-width: 1024px) { 
	.step-lists > li {padding: 26px 20px;}
} 


@media (max-width: 768px) { 
	.step-lists {flex-direction: column;gap: 30px;}
	.step-lists > li {padding: 20px 20px;min-height: 100%;}
	.step-lists > li .num {font-size: 26px;}
	.step-lists > li .txt {min-height: 100%;}
	.step-lists > li:before {top: unset;right: unset;transform: translate(-50%, -50%) rotate(90deg);left: 50%;bottom: -40px;}
}


.bg-top {width: 100%;margin: 0 auto;border-radius: 20px;overflow: hidden;margin: 0 0 120px;}
.list-pride {width: 100vw;margin-left: calc(50% - 50vw);margin-right: calc(50% - 50vw);}
.list-pride .item {position: relative;}
.list-pride .item .banner{position: relative;}
.list-pride .item .banner:before {content: "";position: absolute;width: 100%;height: 100%;top:0 ;left: 0;background: #00000080;}
.list-pride .item .banner img {width: 100%;height: 100%;object-fit: cover;}
.list-pride .item:nth-child(2) .banner:before {background: #0000004D;}
.list-pride .item:nth-child(3) .banner:before {background: transparent;}
.list-pride .content {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);max-width: 1200px;width: 100%;}

.vision-wrap {position: relative;width: 600px;height: 600px;margin: 0 auto;}

@media (min-width:769px) and (max-width:1520px) {
	.list-pride .content .kr {font-size:calc(48/1920*100vw);}
}
@media (max-width: 768px) {
	.bg-top {margin: 0 0 60px;}
	.list-pride .content {width:calc(100% - 32px);}
	.list-pride .item .banner img {height: calc(750 / 750 * 100vw);object-position: center;}
}





/*미션*/
.vision_01 .cover{position:absolute;top:0;left:0;width:100vw;height:100vh;z-index:3;display:block;background:rgba(0,0,0,0.6);}
.vision .vision_inner {position:absolute;top:0%;left:0%;width:100%;height:100%;max-width:100%;max-height:100vh;display:flex;justify-content: center;align-items: center;overflow:hidden;}
.vision .vision_inner .thumb { position:absolute; top:0; left:0; width:100%; height:100%; width:100vw; height:100vh; display:block; z-index:2; overflow:hidden ; }
.vision .vision_inner .thumb:before {content: "";position: absolute;width: 100%;height: 100%;top:0 ;left: 0;background: #000000;opacity: 0.3}
.vision .vision_inner .thumb img{ width:100%; height:100%; object-fit: cover;}
.vision .text_box{ position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); z-index:4; color: #fff; display:flex; flex-direction: column; align-items: center;width: 1500px;}
.vision .text_box .txt {font-weight: 500;font-size: 28px;line-height: 150%;letter-spacing: -0.2px;text-align: center;vertical-align: middle;padding: 0 0 64px;}
.vision .text_box .vision-btn > a {font-weight: 600;font-size: 16px;line-height: 20px;letter-spacing: 0.3px;text-align: center;color: #fff;padding: 14px 24px;position: relative;display: flex;align-items: center;gap: 10px;backdrop-filter: blur(4px);border-radius: 40px;}
.vision .text_box .vision-btn > a:after {content: "";background: url(/_res/yonsei_ysb/ysb/img/common/ico-fundraising.png)no-repeat;background-size: cover;display: inline-block;width: 24px;height: 24px;}
.vision .text_box .vision-btn > a:before{content: "";position: absolute;inset: 0;padding: 1px;border-radius: 24px;background: linear-gradient(138.93deg, #FFFFFF -30.41%, rgba(255, 255, 255, 0) 66.03%);-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;mask-composite: exclude;pointer-events: none;}



.vision_box { position:relative; height:1200vh;width: 100vw;margin-left: calc(50% - 50vw);margin-right: calc(50% - 50vw); overflow:hidden; display:flex; flex-direction:column; justify-content:flex-start; align-items:center;}
.vision{ position:relative; width:100%; height:100vh; max-width:100vw; min-height:100vh; max-height:100vh; overflow: hidden;}
.vision .guide_text{ font-family: Paperlogy;font-weight: 700;font-size: 32px;line-height: 150%;letter-spacing: -0.2px;text-align: center;vertical-align: middle;color: #ffffff;padding: 0 0 32px;}
.vision .title{font-weight: 700;font-size: 52px;line-height: 150%;letter-spacing: -0.2px;text-align: center;vertical-align: middle;color: #fff;}
.vision .title02 {font-weight: 700;font-size: 48px;line-height: 150%;letter-spacing: -0.2px;text-align: center;vertical-align: middle;color: #fff;}


.vision.vision_02{ z-index:4}
.vision.vision_03{ z-index:5;background: #FFF;}
.vision.vision_03 .vision_inner .participate{width: 100%;;max-width: 1520px;display: flex;gap: 20px 109px;}
.vision.vision_03 .vision_inner .participate .h5-tit01 {width: 200px;}
.vision.vision_03 .vision_inner .participate .step-group {flex: 1;}
.vision.vision_04 { z-index:6}
.vision.vision_05 { z-index:7}
.vision.vision_06 { z-index:8}
.vision.vision_07 { z-index:9}
.vision.vision_08 { z-index:10}

.vision.vision_02,
.vision.vision_03,
.vision.vision_04,
.vision.vision_05,
.vision.vision_06,
.vision.vision_07, 
.vision.vision_08{  position: absolute;  top: 0;  left: 0;   width: 100%; height:100% }


.btn-box02{display: flex;justify-content: center;margin-bottom: 28px;}
.btn-box02 a{background: rgba(255, 255, 255, 0.1);border: 1px solid #FFFFFF;backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px);border-radius: 40px;padding: 15px 24px;font-weight: 600;font-size: 20px;line-height: 20px;letter-spacing: 0.3px;color: #FFFFFF;}
.btn-box02 a[href="#"]{pointer-events: none;}
@media (max-width: 1024px){

	.vision.vision_03 .vision_inner .participate {flex-direction: column;padding: 0 16px;}
	.vision.vision_03 .vision_inner .participate .h5-tit01 {width: 100%;}
	.vision.vision_03 .vision_inner {}
	.vision.vision_03 {height: auto!important;}


	.vision_box{ overflow: visible; height:auto; }
	.vision.vision_03{ height:auto; max-height:none; overflow:visible; }
	.vision.vision_03 .vision_inner{ height:auto; max-height:none; overflow:visible; }

	.pin-spacer {padding: 0!important;}
	.vision_box { height:auto!important; }
	.vision .text_box{ width:calc(100% - 2.4rem)}
	.vision_01 .cover {display: none;}

	.vision{ position:relative; width:100%; height:100vh; max-width:100vw; max-height:100vh; overflow: visible;}
	.vision .vision_inner{overflow: visible;}
	.vision .guide_text{font-size:18px;padding:0 0 10px;}
	.vision .title{font-size:32px;}
	.vision .title02{font-size:22px;}
	.vision .text_box .txt {font-size: 20px;padding: 0 0 15px;}
	
	.vision .vision_inner .thumb{height:200vh;}
	
	

	.vision.vision_02,
	.vision.vision_03,
	.vision.vision_04,
	.vision.vision_05,
	.vision.vision_06,
	.vision.vision_07,
	.vision.vision_08{  position: relative }
}