@charset "utf-8";

@import "jquery.fullPage.css"; /* fullpage */

#main-content {  }
#main-content > section { position:relative; overflow:hidden; background-size:100% auto; }
#main-content .content-title { margin:0 auto; text-align:center; }
#main-content .content-title img { display:block; margin:0 auto;}
#main-content .content-title + p { margin-top:10px; text-align:center; font-family:'Nanum Myeongjo'; font-weight:bold; font-size:1.5em; color:#fff; }


.main-intro { position:relative; padding-top:0 !important; }
.main-intro .intro-content h1 { padding-top:100px; }
.intro-slider {  }
.intro-content { position:absolute; top:220px; bottom:0; z-index:1; width:100%;  }
.main-intro .scroll-guide { position:absolute; bottom:30px; left:50%; margin-left:-86px; text-align:center; font-size:1.2em; color:#fff; }
.main-intro .scroll-guide img { display:block; margin:0 auto 15px auto; }
.main-gallery { background:url('../img/main/bg_gallery.jpg') 0 0 no-repeat; padding: 40px 0; }
.main-gallery .content-title { width:330px; }
.main-gallery .content-title img { width:100%; }
.main-gallery ul { width:1110px; overflow:hidden; margin:50px auto 0 auto; }
.main-gallery ul li { position:relative; float:left; width:370px; height:250px; overflow:hidden; }
.main-gallery ul li a { display:block; overflow:hidden; }
.main-gallery ul li a em { position:absolute; top:0; left:0; right:0; bottom:0; z-index:9; background:#000; opacity:0.5; transition:all 0.5s; -webkit-transition:all 0.5s; }
.main-gallery ul li a img { width:100%; height:auto; }
.main-gallery ul li a div { position:absolute; bottom:-100%; z-index:10; width:100%; padding:10px 0; background:#fff; text-align:center; color:#222; transition:all 0.4s; -webkit-transition:all 0.4s; }
.main-gallery ul li a div span { display:block; font-size:0.95em; }
.main-gallery ul li a div strong { font-size:1.5em; }
.main-gallery ul li a:hover em,
.main-gallery ul li a:focus em,
.main-gallery ul li a:active em { opacity:0; }
.main-gallery ul li a:hover div,
.main-gallery ul li a:focus div,
.main-gallery ul li a:active div { bottom:0; }
.main-location { background:url('../img/main/bg_location.jpg') 0 0 no-repeat; }
.main-location p { color:#4d4d4d !important; }
.main-location .map-wrap { width:1140px; height:435px; margin:50px auto 0 auto; }
.main-location .map-area { float:left; width:760px; height:435px; overflow:hidden; background:#fff; }
.main-location .map-area img { width:100%; }
.main-location .map-info { float:right; width:380px; height:435px; padding:50px 35px; background:#111; color:#fff; }
.main-location .map-info h2 { font-size:1.43em; }
.main-location .map-info ul { margin-top:40px; }
.main-location .map-info li { padding-left:30px; margin-bottom:20px; font-size:0.95em; background-position:0 5px; background-repeat:no-repeat; }
.main-location .map-info li.address { background-image:url('../img/main/ico_address.gif'); }
.main-location .map-info li.phone { background-image:url('../img/main/ico_phone.gif'); }
.main-location .map-info li.email { background-image:url('../img/main/ico_mail.gif'); }
.main-location .map-info li strong { display:block; font-size:1.14rem; font-weight:normal; }
.main-service .btn-scroll { display:none; }
.main-service .foot-service { margin-top:0; }








/* scroll event */
.main-intro.active .scroll-guide { -webkit-animation: ani-intro 2s infinite; -ms-animation: ani-intro 2s infinite; animation: ani-intro 2s infinite; }
.main-gallery.active ul li { -webkit-animation: ani-gallery 1s 1; -ms-animation: ani-gallery 1s 1; animation: ani-gallery 1s 1; }
.main-video.active .main-video_img img { -webkit-animation: ani-video 1s 1; -ms-animation: ani-gallery 1s 1; animation: ani-gallery 1s 1; }
.main-location.active .map-area { -webkit-animation: ani-mapArea 1.5s 1; -ms-animation: ani-mapArea 1.5s 1; animation: ani-mapArea 1.5s 1; }
.main-location.active .map-info { -webkit-animation: ani-mapInfo 1.5s 1; -ms-animation: ani-mapInfo 1.5s 1; animation: ani-mapInfo 1.5s 1; }

@keyframes ani-intro {
	0% { bottom:70px; }
	50% { bottom:30px; }
	100% { bottom:70px; }
}

@keyframes ani-gallery {
	0% { margin-top:100%; opacity:0; }
	100% { margin-top:0; opacity:1; }
}
@keyframes ani-video {
	0% { transform:translateY(100px); opacity:0; }
	100% { transform:translateY(0); opacity:1; }
}

@keyframes ani-mapArea {
	0% { transform:translateX(-300px); opacity:0; }
	100% { transform:translateX(0); opacity:1; }
}

@keyframes ani-mapInfo {
	0% { transform:translateX(300px); opacity:0; }
	100% { transform:translateX(0); opacity:1; }
}


/* media query */
@media all and (max-width:1280px) {
	#main-content section { height:auto; background-size:cover; padding: 40px 0; }

}

@media all and (max-width:1024px) {
	#main-content > section { background-size:auto; }
	#main-content .content-title + p { font-size:0.85em; }
	.main-intro { margin-top:75px; }
	.main-intro .intro-content { top:140px; }
	.main-intro .content-title img, .main-gallery .content-title img { width:100%; }
	.main-intro .content-title { width:220px; }
	.main-intro .scroll-guide { display:none; }
	.main-gallery { padding-top:45px; }
	.main-gallery .content-title { width:300px; }
	.main-gallery ul { width:auto; }
	.main-gallery ul li { width:50%; height:auto; }
	.main-gallery ul li a em { display:none; }
	.main-gallery ul li a div { bottom:0; }
	.main-location { padding:45px 15px 15px 15px; }
	.main-location .map-wrap { width:auto; height:auto; overflow:hidden; margin-top:20px; }
	.main-location .map-area { float:none; width:auto; height:auto; }
	.main-location .map-info { float:none; width:auto; height:auto; padding:20px; }
	.main-location .map-info h2 { font-size:1.43em; }
	.main-location .map-info ul { margin-top:20px; }
}

@media all and (max-width: 800px) {
	.main-intro .intro-content { top:40px; }
	.main-intro .intro-content h1 { padding-top:0; }
}

@media all and (max-width: 400px) {
	#main-content .content-title { padding:0 20px; }
	#main-content .content-title + p { padding:0 20px; }
	#main-content .content-title + p br { display:none; }
	
	.main-intro .intro-content {  }
	.main-gallery .content-title { width:220px; }
	.main-gallery ul li { float:none; width:100%; }
	.main-location .map-info { padding:10px; }
	.main-location .map-info ul { margin-top:20px; }
}

@media all and (max-width: 400px) {
	.main-intro { padding-top:120px; }
}




/*20220629_newCss ISY*/

@media (max-width: 800px){
    .main-intro .intro-content { top: 80px; }
}