@charset "utf-8";
/* CSS Document */


 * { box-sizing: border-box; margin: 0; padding: 0; }
html, body {height: 100%;font-family: 'Apple SD Gothic Neo', sans-serif;/* overflow: hidden; */}

.intro_wrap {display: flex;width: 100%;height: 100vh;transition: all 0.5s ease;min-width: 1460px;}
.parking {flex: 1;display: flex;flex-direction: column;justify-content: center;align-items: center;background-size: cover;background-position: center;transition: flex 1s ease;animation: fadeIn 1s ease both;color: white;padding: 20px;position:relative;overflow:hidden;}
.parking:before{content:'';display:block;width:100%;height:100%;background: rgba(0,0,0,0.4);position:absolute;left:0;top:0}
.parking:hover {flex: 1.5;z-index: 1;}
.intro_wrap:hover .parking:not(:hover) {width: 10%;/* padding:0; */filter: brightness(50%);opacity: 0.5;}
.intro_wrap:hover .parking:not(:hover) .buttons{ }
.parking h2 {font-size: 24px;margin-bottom: 30px;text-shadow: 1px 1px 2px rgba(0,0,0,0.6);z-index: 1;display: flex;align-items: center;min-height: 100px;}
.parking h2 img{display:flex;}
.buttons {display: flex;/* flex-direction: column; */gap: 8px;width: 80%;max-width: 308px;justify-content: center;z-index: 1;}
.buttons a {text-decoration: none;padding: 10px 12px;border-radius: 7px;font-weight: 700;color: #fff;font-size: 16px;text-align: center;width: 100%;max-width: 180px;min-width: 135px;border: 1px solid #fff;background-color: transparent;transition: background 0.3s, transform 0.3s;}
.buttons a:before{content:''; background-repeat:no-repeat; background-position:50% 50%; background-size:cover;;display:inline-block;width: 18px;height: 18px;vertical-align: middle;margin: -3px 5px 0 0;}
.buttons a:after{content:'';display:inline-block;width: 0;height: 15px;background: url('../images/intro/ico_arrow.svg') 50% 50% / cover;vertical-align: middle;margin: -3px 0 0 10px;opacity:0;transition: all .3s ease-in-out;}
.buttons a:hover:after{width: 15px; opacity:1}
.site-btn {}
.site-btn:before{content:'';background-image: url('../images/intro/home.svg')}
.site-btn:hover { background-color: #03a9f4;border:1px solid #03a9f4}
.naver-btn { }
.naver-btn:before{content:'';background-image: url('../images/intro/ico_naver.svg')}
.naver-btn:hover{ background-color: #029e46;  border:1px solid #029e46}

.parking.soon:after{content:'Coming soon';display: flex;align-items: center;justify-content: center;width:100%;height:100%;background: rgba(1, 11, 28, 0.8);position:absolute;left:0;top:0;z-index: 2;font-size: 1.7rem;}

.bg1 {background: #97cae6 url('../images/intro/intro_Bg01.jpg?v') 50% 100% / cover;}
.bg2 { background:#4186bd url('../images/intro/intro_Bg02.jpg') 70% 100% / cover; }
.bg3 {background: #97cae6 url('../images/intro/intro_Bg03.jpg') 50% 50% / cover;}
.bg4 { background:#4186bd url('../images/intro/intro_Bg04.jpg') 40% 100% / cover;}
.bg1 h2 img{height: 60px;}
.bg2 h2 img{height: 50px; }
.bg3 h2 img{height: 50px; }
.bg4 h2 img{height: 90px;margin-bottom: 0;}


@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@media only screen and (max-width: 768px) {
  .intro_wrap {flex-wrap: wrap;min-width: inherit;padding: 20px;gap: 10px;background: #f2f8f8;height: auto;}
  .parking {height: 25%;min-height: 250px;width: 100%;padding-bottom: 50px;flex: none !important;border-radius: 20px;box-shadow: 0px 5px 8px rgba(0,0,0,0.1);}
	.parking h2{font-size:18px;margin-bottom: 0;min-height: inherit;}

	.bg1 h2 img{height: 45px;}
	.bg2 h2 img{height: 35px;}
	.bg3 h2 img{height: 35px;}
	.bg4 h2 img{height: 75px;}
	
	.parking:hover {flex:auto;z-index: 1;}
	.intro_wrap:hover .parking:not(:hover) {width: 100%;/* padding:0; */filter: none;opacity: 0.5;}
	.intro_wrap:hover .parking:not(:hover) .buttons{ display:flex;}	
  .bg1 {background-position: 50% 150%;}
  .bg2 {background-position :70% 100% ; }
  .bg3 {background-position : 50% 100% ;}
  .bg4 { background-position : 40% 100% ;}
  .buttons{position:absolute;bottom:0;left:0;max-width: inherit;width: 100%;gap: 0;}
  .buttons a{font-size:14px;padding: 14px 10px;max-width: inherit;border-radius: 0; min-width:inherit;}
  .site-btn{ background-color: #03a9f4 !important;border:1px solid #03a9f4 !important;}
  .naver-btn{ background-color: #029e46 !important;  border:1px solid #029e46 !important;}
}
@media only screen and (max-width: 480px) {  
  .intro_wrap .parking.bg1 {background-position: 50% 200%;}
  .intro_wrap .parking.bg2 {background-position :70% 200% ; }
  .intro_wrap .parking.bg3 {background-position : 50% 200% ;}
  .intro_wrap .parking.bg4 { background-position : 40% 200% ;}
}