/* =========================================
            2024 kangnam trial test
========================================= */

/* ==============================================================
본 페이지는 웹폰트 불가 이슈로 이미지텍스트를 사용했으며, 반응형을 위해
device width 721 이상인 경우 px 작업,
device width 720 이하인 경우 vw로 변환해 작업했습니다.
- UIUX
============================================================== */

html, body{
    margin: 0;
    padding: 0;
}
body.ofh{
    overflow: hidden;
}

.ds_2024_contents img{
	max-width: 100%;
}
.ds_2024_contents *{
	font-size: 0;
}
.mob_inner{
	max-width: 720px;
	margin: 0 auto;
	padding-left: 20px;
	padding-right: 20px;
	box-sizing: border-box;
}

/* main */
.ds_main_sec img{
	width: 100%;
}

/* section 1 */
.ds_sec_01{
	background-color: #bdb2ff;
}

/* section 2 */
.ds_sec_02{
	background-color: #1c1c1c;
}
.ds_sec_02 .img_wrap{
	position: relative;
}
.ds_sec_02 .btn_pop{
	display: block;
	position: absolute;
	bottom: 60px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	width: 610px;
	height: 100px;
}
.ds_sec_02 .btn_link{
	display: block;
	position: absolute;
	top: 380px;
	left: 225px;
	width: 190px;
	height: 50px;
}

/* section 3 */
.ds_sec_03{
	padding-bottom: 120px;
	background-color: #bdb2ff;
}
.ds_sec_03 .img_wrap{
	position: relative;
}
.con_swiper{
	position: absolute;
	bottom: 40px;
	left: 0;
	width: calc(100% - 80px);
	height: 186px;
	margin-left: 40px;
	margin-right: 40px;
	box-sizing: border-box;
}
.con_list{
	display: flex;
	height: 185px;
}
.con_list .con_item{

}
.con_list .con_item img{
	max-width: 100%;
}
.ds_sec_03 .btn_wrap{
	margin-top: 70px;
}
.ds_sec_03 .btn_link{
	display: inline-block;
	width: 100%;
	padding: 40px;
	background-color: #1c1c1c;
	border-radius: 10px;
	font-size: 32px;
	font-weight: 600;
	color: #fff;
	text-align: center;
	box-sizing: border-box;
}



/* modal */
body.ofh{
    overflow-y: hidden;
}
#dim{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8);
}
#dim.on{
	display: block;
}
.modal_container{
    display: none;
    position: fixed;
    top: calc(50% + 80px);
    left: 50%;
    z-index: 10;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.modal_wrap{
	overflow-y: auto;
	position: relative;
	width: 75vw;
    max-width: 720px;
	height: 90vh;
	max-height: 400px;
	padding: 60px 50px;
	background-color: #1c1c1c;
	border: 3px solid #15f5dd;
}
.btn_pop_close{
	position: absolute;
	padding-bottom: 20px;
	background-color: transparent;
	top: -65px;
	right: 0;
	color: #fff;
	font-size: 32px;
	font-weight: 800;
}
.modal_wrap img{
	max-width: 100%;
}




@media screen and (max-width: 860px){
	.ds_sec_02 .btn_pop{
		bottom: 6.9767vw;
		width: 70.9302vw;
		height: 11.6279vw;
	}
	.ds_sec_02 .btn_link{
		top: 51.186vw;
		left: 30.1628vw;
		width: 22.0930vw;
		height: 5.8140vw;
	}
	
	/* section 3 */
	.ds_sec_03{
		padding-bottom: 13.9535vw;
	}
	.con_swiper{
		bottom: 4.6512vw;
		width: calc(100% - 9.3023vw);
		height: 21.6279vw;
		margin-left: 4.6512vw;
		margin-right: 4.6512vw;
	}
	.con_list{
		height: 21.5116vw;
	}
	.ds_sec_03 .btn_wrap{
		margin-top: 8.1395vw;
	}
	.ds_sec_03 .btn_link{
		padding: 4.6512vw;
		border-radius: 1.1628vw;
		font-size: 3.7209vw;
	}
	
	/* modal */
	.modal_container{
		top: calc(50% + 9.3023vw);
	}
	.modal_wrap{
		padding: 6.9767vw 5.8140vw;
	}
	.btn_pop_close{
		padding-bottom: 2.3256vw;
		top: -7.5581vw;
		font-size: 3.7209vw;
	}
}