/* 인덱스페이지 스타일 css */

*{margin: 0; padding: 0; font-family:'pretendard';}
a{color: inherit; text-decoration: none;}
ul, li, ol{list-style: none;}

.index-wrap{width: 100%; height: 911px; background: url(/img/bg_index.jpg) center 65% no-repeat; overflow: hidden;}

.light-box{position: absolute; width: 100%; overflow: hidden;}
.light-box img{width: 100%; height: 100%; opacity: 0;}

.menu-wrap{position: relative; top: 51%; transform: translate(0, -50%); display: flex; justify-content: center;}

.menu-wrap .menu_yurt{position: relative; display: block; width: 258px; height: 172px;}
.menu-wrap .menu_yurt a img{width:100%; height:100%; object-fit:scale-down;}
.menu-wrap .menu_yurt:hover a img{filter: drop-shadow(0 0 2px black);}

.menu-wrap .menu_yurt_01{transform: translate(10%, 180%);}
.menu-wrap .menu_yurt_02{transform: translate(5%, 120%);}
.menu-wrap .menu_yurt_03{transform: translate(0, 60%);}
.menu-wrap .menu_yurt_center{width: 322px; height: 213px; margin: 0 10px;}
.menu-wrap .menu_yurt_05{transform: translate(0, 60%);}
.menu-wrap .menu_yurt_06{transform: translate(-5%, 120%);}
.menu-wrap .menu_yurt_07{transform: translate(-10%, 180%);}

.menu-wrap .menu_yurt a{position: relative; display: block; }
.menu-wrap .menu_yurt a p{position: absolute; top: 50%; left: 50%; display: inline-block; transform: translate(-50%, -50%); text-align:center; font-size:16px;}

@media (max-width:1920px){
	.index-wrap{height:100vh;}
}

@media (max-width:1820px){
	.menu-wrap{top:60%;}
    .menu-wrap .menu_yurt{width: 13.666%;}
    .menu-wrap .menu_yurt_center{width:18%;}
    .menu-wrap .menu_yurt a img{width: 100%;}
}

@media (max-width:1440px){
	.menu-wrap .menu_yurt a p{font-size:14px;}
}

@media (max-width:1024px){
	.menu-wrap .menu_yurt a p{line-height:16px;}
}

@media (max-width:500px){
	.index-wrap{overflow:auto;}

	.menu-wrap{top:14%; transform:translate(0,0); flex-wrap:wrap; gap:3%; row-gap: 20px;}
	.menu-wrap .menu_yurt{width:45%; height:auto;}
	.menu-wrap .menu_yurt_01{transform: translate(0, 0);}
	.menu-wrap .menu_yurt_02{transform: translate(0, 0);}
	.menu-wrap .menu_yurt_03{transform: translate(0, 0);}
	.menu-wrap .menu_yurt_center{transform: translate(0, 0); height:auto; margin:0;}
	.menu-wrap .menu_yurt_05{transform: translate(0, 0);}
	.menu-wrap .menu_yurt_06{transform: translate(0, 0);}
	.menu-wrap .menu_yurt_07{transform: translate(0, 0);}
}