@charset "utf-8";

/*
#mainFloating { display: none; }
*/

/* 플로팅 배너 */
#mainFloating { position: fixed; z-index: -1; left: 0; bottom: 0; margin: 0 0 6px 39px; opacity: 0; }
#mainFloating.is-sibling-sticky { bottom: 99px; }

#mainFloating.is-loaded { visibility: visible; z-index: 1100; opacity: 1; }
.is-visual #mainFloating.is-loaded { visibility: hidden; z-index: -1; opacity: 0; }
.is-visual.is-visual-scroll-downed #mainFloating.is-loaded { visibility: visible; z-index: 1100; opacity: 1; }

/* visible */
#mainFloating.is-loaded { transition: visibility 0s linear 0s, z-index 0s linear 0s, opacity .2s ease-in-out 0s;  }

/* hidden */
.is-visual #mainFloating.is-loaded { transition: visibility 0s linear .2s, z-index 0s linear .2s, opacity .2s ease-in-out 0s; }

/* visible */
.is-visual.is-visual-scroll-downed #mainFloating.is-loaded { transition: visibility 0s linear 0s, z-index 0s linear 0s, opacity .2s ease-in-out 0s; }

#mainFloating.is-anim { animation: animBounce 4s cubic-bezier(0.70, 0, 0.30, 1) 0s infinite; }
#mainFloating.hover { animation-play-state: paused; }
#mainFloating img { max-width: none; }
#mainFloating .holder { position: relative; }
#mainFloating .pic { display: block; overflow: hidden; border-radius: 40px; }
#mainFloating .thumbs, #mainFloating .pics { position: absolute; left: 0; bottom: 0; }
#mainFloating .thumbs, #mainFloating .thumbs img { width: 150px; height: 150px; }
#mainFloating .thumbs {
	opacity: 1;
	transform: scale(1); 
	transition: 
		opacity .3s ease-out 0s, 
		transform .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
}
#mainFloating .pics img { margin-left: -150px; width: 300px; height: 150px; transition: all .5s cubic-bezier(0.165, 0.84, 0.44, 1) 0s; }
#mainFloating .pics {
	visibility: hidden;
	z-index: -1; 
	opacity: 0; 
	transform-origin: 0 100%; 
	transition: 
		visibility 0s linear .6s,
		z-index 0s linear .6s,
		opacity .4s ease-out  0s,
		transform .6s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
}

/* hover */
#mainFloating.hover .thumbs { opacity: 0; transform: scale(.2);
	transition: 
		opacity .4s ease-in-out 0s, 
		transform .4s ease-in-out 0s;
}
#mainFloating.hover .pics {
	visibility: visible;  
	z-index: 1101;
	opacity: 1; 
	transition: 
		visibility 0s linear 0s,
		z-index 0s linear 0s,
		opacity .1s cubic-bezier(0.165, 0.84, 0.44, 1)  0s,
		transform .4s cubic-bezier(0.165, 0.84, 0.44, 1)  0s;
}
#mainFloating.hover .pics img { margin: 0; width: 480px;  height: 240px; }
@keyframes animBounce {
	0% {
		transform: translate(0, 5px);
	}
	50% {
		transform: translate(0, -5px);
	}
	100% {
		transform: translate(0, 5px);
	}
}