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

/*기본로고*/
.top-logo {	position: absolute;width: 300px; height: 77px; top: 40px !important; margin-left: -21px !important; overflow: hidden;}

.top-logo .ani-logo {position: relative; width: 100%; height: 100%;}
.top-logo .ani-logo img {position: absolute;}

/*우측*/
.summer-img1  {z-index: 5; bottom: 0; right: 20px; } /*작은풀*/
.summer-img2  {z-index: 4; bottom: 0; right: 34px; animation:tree-sm 6s ease 0s infinite normal;transform-origin:bottom;} /*작은야자수*/
.summer-img3  {z-index: 3; bottom: 0; right: 0; animation:tree-big 5s ease 0s infinite normal;transform-origin:bottom;} /*큰야자수*/
.summer-img4  {z-index: 1; top: 10px; right: 0; } /*작은구름*/
.summer-img5  {z-index: 2; bottom: 0; right: 6px; } /*작은모래*/ 
/*좌측*/
.summer-img6  {z-index: 3; bottom: 0; left: 0; } /*선배드*/
.summer-img7  {z-index: 2; bottom: -2px; left: 18px; animation:parasol 5s ease 0s infinite linear;transform-origin:bottom;} /*파라솔*/
.summer-img8  {z-index: 1; top: 20px; left: 5px; } /*큰구름*/

.summer-img9  {
	position: absolute;z-index: 1;bottom: -2px;left: 83px;width: 181px;height: 9px;overflow: hidden;
	background: url("/img/ani-logo/summer/summer-logo_33.png") repeat-x;
	animation:sea-front 5s ease 0s infinite normal;transform-origin:bottom;
} /*바다앞*/
.summer-img10 {
	position: absolute;z-index: 0;bottom:3px;left: 84px;width: 181px;height: 12px;overflow: hidden; 
	background: url("/img/ani-logo/summer/summer-logo_32.png") repeat-x;
	animation:sea-back 7s ease 0s infinite normal;transform-origin:bottom;
} /*바다뒤*/
/*로고*/
.summer_logo {z-index: 1;left: 46px;top: 5px;}


.summer-img9 {	animation:sea-front 5s ease 0s infinite normal;transform-origin:bottom;}/*바다앞*/
.summer-img10 { animation:sea-back 7s ease 0s infinite normal;transform-origin:bottom;}/*바다뒤*/


.summer-img7 {animation:parasol 5s infinite linear;transform-origin:bottom;}

.animated {
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

@keyframes sea-front {
	0%{-webkit-background-position: 0;; background-position: 0;}
	50%{-webkit-background-position: 20px;background-position: 20px; }
	100%{-webkit-background-position: 0;; background-position: 0;}
}
@keyframes sea-back {
	0%{-webkit-background-position: 0;; background-position: 0;}
	50%{-webkit-background-position: -20px;background-position: -20px;}
	100%{-webkit-background-position: 0;; background-position: 0;}
}

@keyframes tree-sm {
	0%{-webkit-transform:rotate(-2deg);transform:rotate(-2deg)}
	60%{-webkit-transform:rotate(7deg);transform:rotate(7deg)}
	100%{-webkit-transform:rotate(-2deg);transform:rotate(-2deg)}
}
@keyframes tree-big {
	00%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
	60%{-webkit-transform:rotate(-6deg);transform:rotate(-6deg)}
	100%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
}

@keyframes parasol {
	0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
	30%{-webkit-transform:rotate(7deg) translate(0, 2px);transform:rotate(7deg) translate(0, 2px)}
	100%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
}