@charset "utf-8";
/* main.css */

#keyvisual { display: flex; justify-content: center; align-items: center; width: 100%; height: 600px; text-align: center; background: url(/interres/media/kv03.jpg) center; background-size: cover; }
#keyvisual p { font: normal 2rem/1 Gong; color: #FFF; padding-bottom: 80px;  }
#keyvisual p b { font: normal 3rem/1.6 GongB; }

#quickMenu { display: flex; justify-content: space-around; margin-top: -50px; box-sizing: border-box; background: #FFF; scale: 110%; padding: 0px 30px; border-radius: 30px; box-shadow: 1px 1px 6px rgba(0, 0, 0, .25); }
#quickMenu li { list-style: none; transition: 0.2s; }
#quickMenu li:hover { list-style: none; scale: 1.1; }
#quickMenu .quick-icon { width: 80px; height: 80px; background-repeat: no-repeat; background-position: center; }
#quickMenu ._1 {  background: url(/interres/media/iconMic.svg) no-repeat center }
#quickMenu ._2 {  background: url(/interres/media/iconYah.svg) no-repeat center }
#quickMenu ._3 {  background: url(/interres/media/iconMap.svg) no-repeat center }
#quickMenu .quick-title { font: normal 18px Wns; padding-bottom: 20px; text-align: center; }

@media screen and (max-width:991px) {
	#keyvisual { display: flex; justify-content: center; align-items: center; width: 100%; height: 0; padding: 60% 0 50%; text-align: center; background: url(/interres/media/kv03.jpg) center; background-size: cover; }
	#keyvisual p { font: normal 5vw/1.5 Gong; color: #FFF;  }
	#keyvisual p b { font: normal 6vw/1.6 GongB; }

	#quickMenu { display: flex; justify-content: space-around; scale: 99%; margin-top: -50px; background: #FFF; padding: 1.5%; box-sizing: border-box; border-radius: 20px; box-shadow: 1px 1px 6px rgba(0, 0, 0, .25); }
	#quickMenu .quick-menu { text-align: center;}
	#quickMenu li { list-style: none; }
	#quickMenu .quick-icon { width: 30px; height: 30px; background-size: contain; }
	#quickMenu .quick-title { font: normal 3.2vw/2 Wns; text-align: center; }

}



/* ----------갤러리-------------- */

#gallery { width: 100%; overflow:hidden; padding: 80px 0; text-align: center; }
#gallery h3 { font: normal calc(12px + 1vw)/2 Gong; padding-bottom: 2%; text-align: center; }
#gallery .pic-container { display: flex; width: 100%; justify-content: space-between; }
#gallery .pic-items { background: #FFF; text-align: left; }
#gallery .pic-items p:nth-child(2) { font: normal 1.2em/1.4 Wns; color: #999; padding-top: 10px; }
#gallery .pic-items p:nth-child(3) { font: normal 1.4em/1.4 Wns; color: #333; }
#gallery .pic { position: relative; width: 280px; height: auto; overflow:hidden; }

#gallery .pic img { position:absolute; top:50%; left:50%; filter: saturate(0.5); transform:translate(-50%, -50%); transition:0.2s; }
#gallery .pic img:hover { filter: saturate(1.2); }
#gallery button { margin:50px auto 0; }

@media screen and (max-width:991px) {
	#gallery { overflow:hidden; padding: 30px 0; }
	#gallery .pic-container { display: flex; flex-wrap: wrap;}
	#gallery .pic-items { width: 90%; background: #FFF; padding: 5%; margin: 2%; }
	#gallery .pic { position: relative; width: 100%; height: auto; overflow:hidden; }
	#gallery button { margin:30px auto 0; }

}

@media screen and (min-width:992px) {
	#gallery .pic-items { width: 32%; box-sizing: border-box; padding: 2%; }
}

/* 갤러리 끝 */



/* CSS Document */