@charset "utf-8";
/* -----------------------------------------------
	* 대문 스타일 정의
--------------------------------------------------
	- 최초 작성일 : 2021.08.15
	- 최초 작성자 : 아보카도
	- 최종 수정일 : 
	- 최종 수정자 : 
--------------------------------------------------*/


/*********************************
	인트로 스타일 정의
**********************************/

html, body {height:100%; margin:0; padding:0; overflow-x: hidden;      background-repeat: no-repeat;    background-size: cover;}

.wrapper {display:block; width:100%; height:100%; position:relative; z-index:1;    overflow: hidden;}
.wrapper > .inner {display:table-cell; vertical-align:middle; text-align:center;  }

.index-logo {display:block; padding:10px; margin-top:-80px; word-break:keep-all; text-align:center; font-size:14px; padding-bottom:23px;}
.index-logo img {max-width:70%; }
.index-logo p {padding:10px 0;}

.index-logo a {display:inline-block; text-decoration:none;}

@media all and (max-width:640px) { .index-logo {font-size:14px;} }
@media all and (max-width:480px) { .index-logo {font-size:13px;} }
@media all and (max-width:380px) { .index-logo {font-size:12px;} }

/* 커스텀 */
.intro_img {position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%);    height: 80%; width: 100%; opacity: 0; animation: focus 1.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;   display: flex; justify-content: center; }
.intro_img img {height: 100%; width: auto; object-fit: cover;}

@keyframes focus {0% {-webkit-filter: blur(12px);filter: blur(12px);opacity: 0;}  100% {-webkit-filter: blur(0px);filter: blur(0px);opacity: 1;}}


.intro_bg {position: fixed; z-index: -1; width: 100%; height: 100%;    top: 50%;
    left: 50%;    pointer-events: none;    min-width: 1441px;    transform: translate(-50%, -50%);    min-height: 850px;}
.intro_bg::before, 
.intro_bg::after {content: '';  top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 1; display: block; background-position: center; background-size: contain;}

.intro_bg::before {position: relative; width: auto; height: 100%;  background-image: url(https://balamilda2025.mycafe24.com/img/bg/bg02.png); background-repeat: no-repeat; background-size: contain; top: 50.5%; left: 50.5%;}

.intro_bg::after {position: absolute;  width: 50%; height: 77.5%;  background-image: url(https://balamilda2025.mycafe24.com/img/bg/bg03.png); background-repeat: no-repeat; animation: infinite-spinning 60s infinite linear;}

.intro_bg span {position: absolute;	top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 1; width: 15%; height: 35%; display: block; background-image: url(https://balamilda2025.mycafe24.com/img/bg/bg05.png); background-repeat: no-repeat; background-position: center; animation: infinite-spinning2 48s infinite linear; min-width: 294px;  background-size: contain;}

@keyframes infinite-spinning {
	from {
		transform: translate(-50%,-50%) rotate(0deg);
	}
	to {
		transform: translate(-50%,-50%) rotate(360deg);
	}
}
@keyframes infinite-spinning2 {
	from {
		transform: translate(-50%,-50%) rotate(360deg);
	}
	to {
		
		transform: translate(-50%,-50%) rotate(0deg);
	}
}