* {margin:0;padding:0;  font-family: 'NanumSquare', sans-serif;}
body { font-family: 'NanumSquare', sans-serif; height:100%;};
html { height:100%; }
a{text-decoration: none !important; color:#000;}
a:link {text-decoration: none !important; color:#000;}
a:visited {text-decoration: none !important; color:#000;}
a:active {text-decoration: none !important; color:#000;}
a:hover {text-decoration: none !important; color:#000;}
li{ list-style:none; }

.main{
	width:100%;
	text-align:center;
	padding-top:30px;
	padding-bottom:30px;
	float:left;
}
.main img{
	width:180px;
}
.grid-item{
	width:100%;
	height:100%;
	float:left;
	z-index:1;
	background-color:#000;
	position:relative;
}
.main_img{
	width:100%;
	height: calc(100vh - 115px);
	display:flex;
	background-repeat:no-repeat;
 justify-content: center;
            align-items: center;
	
}
.ment{
	color:#fff;
	font-size:50px;
	width:100%;
	text-align:center;
	line-height:62px;
	letter-spacing:-2px;
	font-weight:800;
	display:none;
	cursor:pointer;
}
.btn{
	padding:4px 14px 4px 14px;
	border:1px solid white;
	color:#fff;
	letter-spacing:-0.8px;
	font-size:20px;
	width:164px;
	margin:0 auto;
	line-height:38px;
	height:40px;
	border-radius:3px;
	font-weight:300;
	cursor:pointer;
}
.main_img:hover{
	/*
	cursor:pointer;
	display:block; 
	*/
}
.main_img:hover > .ment{
	display:block;
	cursor:pointer;
	background-color:rgba(0,0,0,0.5);
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center; /* 가로 중앙 정렬 */
	align-items: center; /* 세로 중앙 정렬 */
	text-align: center; /* 여러 줄 텍스트의 경우 가로 중앙 정렬 유지 */
	flex-direction:column;
	
}


/* 모바일 스타일 (최대 너비 767px) */

@media (max-width: 767px) {
	.sub{display:none;}  
   .grid-item{
		width:100%;
	}
	.ment{display:block;}
	.five{    background-position: center}
}

/* 태블릿 스타일 (768px ~ 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  	.five{    background-position: center}

	.ment{display:block;}
	.grid-item{
		width:100%;
	}
}