.padding-none{
padding-left:0;
padding-right:0;
}
.padding-half{
padding-left:7px;
padding-right:7px;
}
.text-small{
font-size:20px;
}
.text-large{
font-size:60px;
}
.left{
float: left;
}
.right{
float:right;
}
div[class*='col-']{
position: relative;
}
/* END GENERAL CLASSES */
/* 2. LOADER */
#loader{
background: linear-gradient(to bottom, rgb(14, 81, 133) 0%, rgb(26, 139, 178) 60%, rgb(33, 159, 193) 100%);
position:fixed;
overflow:hidden;
left:0;
top:0;
width: 100%;
height: 100%;
z-index: 99;
}
#loader::after{
content:'';
background:url('/home/images/intro.png');
background-repeat: no-repeat;
background-size:contain;
width:70px;
height: 70px;
position: absolute;
margin-left:-35px;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-animation: snowflake-rotate 2s linear infinite;
animation:         snowflake-rotate 2s linear infinite;
}
@-webkit-keyframes snowflake-rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(180deg);
}
}
@keyframes snowflake-rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(180deg);
}
}
/* END LOADER */
/* 3. PARALLAX CONTAINER */
#container.parallax-container {
position: relative;
width:100%;
margin: 0 auto;
overflow: hidden;
background: linear-gradient(to bottom, rgb(14, 81, 133) 0%, rgb(26, 139, 178) 60%, rgb(33, 159, 193) 100%);
}
#container .christmas-scene{
padding: 0;
margin: 0;
}
#container .christmas-scene::before {
content:'';
background:url("/home/images/top-snow-pattern.png");
background-repeat: repeat-x;
width: 100%;
height:35px;
position: absolute;
z-index: 10;
left:0;
top:0;
}
/* END PARALLAX CONTAINER */
/* 4. PARALLAX PHOTOS */
#christmas_scene .layer{
width: 100%;
}
#christmas_scene .layer-photo {
background-position: bottom center;
background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: 900px;
padding: 0;
margin: 0;
}
#christmas_scene .layer-photo.photo-zoom{
transform: scale(1.05);
}
#christmas_scene .layer-1 {
background-image: url("/home/images/layer1.png");
background-position: 40% bottom;
}
#christmas_scene .layer-2 {
background-image: url("/home/images/layer2.png");
background-position: center bottom;
}
#christmas_scene .layer-3 {
background-image: url("/home/images/layer3.png");
background-position: center bottom;
}
#christmas_scene .layer-4 {
background-image: url("/home/images/layer4.png");
background-position: center bottom;
margin-left:-10px;
}
#christmas_scene .layer-5 {
background-image: url("/home/images/layer5.png");
background-position: center bottom;
margin-left:-20px;
}
/* END PARALLAX PHOTOS */
/* 5. CHRISTMAS TREE */
#container #christmas_tree{
position: absolute;
bottom: 35px;
left: 50%;
}
/* END CHRISTMAS TREE */
/* 6. POLE */
#container #mail_pole{
position: absolute;
margin-left:-250px;
left:53%;
bottom:50px;
z-index: 10;
cursor: pointer;
}
#container #mail_pole img{
width: 100px;
}
/* END POLE */
#countdown_container{
transform: scale(0.8);
transform-origin: top left;
z-index: 3;
}
/* 7. COUNTDOWN CONTAINER */
#container #countdown_container{
font-family: 'Parisienne', cursive;
width:600px;
position: absolute;
margin-left:-300px;
left:50%;
top:0;
text-align: center;
font-size:40px;
color:#FFF;
text-shadow: 1px 1px 2px rgba(0,0,0,0.9);
}
#container #countdown_container .countdown-globe{
height: 200px;
text-align: center;
line-height: 1.35;
z-index: 3;
Position: relative;
top:50px;
}
#container #countdown_container .countdown-globe div{
font-size:20px;
Position: relative;
top:-10px;
}
#container #countdown_container .countdown-globe::after{
content:'';
background: url('/home/images/countdown-globe.png');
background-repeat: no-repeat;
background-size: contain;
width: 100%;
height: 100%;
position: absolute;
left:50%;
margin-left:-55px;
top:-50px;
z-index: 2;
}
/* END COUNTDOWN CONTAINER */
/* 8. MERRY CHRISTMAS TEXT */
#container .merry-christmas-text{
font-family: 'Parisienne', cursive;
position: absolute;
top: 150px;
width: 100%;
text-align: center;
font-size:80px;
color:#FFF;
}
/* END MERRY CHRISTMAS TEXT */
/* 9. HAPPY NEW YEAR PHOTO */
#container .happy-new-year{
background:url('/home/images/new-year-2025.png');
background-repeat: no-repeat;
background-size:contain;
width: 400px;
height: 100%;
position: absolute;
margin-left:-200px;
top: 265px;
left: 50%;
z-index: 2;
}
/* END HAPPY NEW YEAR PHOTO */
/* 11. SOCIAL ICONS */
.icons-container{
width:260px;
position: absolute;
z-index: 10;
right:100px;
bottom:15px;
}
.icons-container img{
width:36px;
}
/* END SOCIAL ICONS */
/* MEDIA QUERIES */
@media (max-width: 1024px) {
#christmas_scene .layer-1 {
background-image: url("/home/images/layer1m.png");
background-position: 36% bottom;
}
#christmas_scene .layer-2 {
background-image: url("/home/images/layer2m.png");
background-position: center bottom;
}
#christmas_scene .layer-3 {
background-image: url("/home/images/layer3m.png");
background-position: center bottom;
}
#christmas_scene .layer-4 {
background-image: url("/home/images/layer4m.png");
background-position: center bottom;
}
#christmas_scene .layer-5 {
background-image: url("/home/images/layer5m.png");
background-position: center bottom;
}
}

@media (max-height: 768px ) {
#christmas_scene .layer-1 {
background-image: url("/home/images/layer1m.png");
background-position: 36% bottom;
}
#christmas_scene .layer-2 {
background-image: url("/home/images/layer2m.png");
background-position: center bottom;
}
#christmas_scene .layer-3 {
background-image: url("/home/images/layer3m.png");
background-position: center bottom;
}
#christmas_scene .layer-4 {
background-image: url("/home/images/layer4m.png");
background-position: center bottom;
}
#christmas_scene .layer-5 {
background-image: url("/home/images/layer5m.png");
background-position: center bottom;
}
}
/*orientation: landscape (가로 모드)*//*orientation: portrait (세로 모드)*/
@media (max-width: 1024px) and (orientation:portrait){
#container #mail_pole{
margin-left:-190px;
}
}
@media (max-width:565px) and (orientation: portrait){
#container #countdown_container{
width: 100%;
margin-left:0;
left:unset;
font-size:30px;
text-align: center;
}
#container #countdown_container .countdown-globe::after{
display: none;
}
#container #countdown_container .countdown-globe{
padding-top:45px;
padding-left:0;
padding-right:0;
}
#container .merry-christmas-text{
top:100px;
font-size:55px;
}
#container .happy-new-year{
top:180px;
width: 300px;
margin-left:-150px;
}
#container #christmas_tree{
bottom:55px;
}
#container .icons-container {
right:50%;
margin-right:-160px;
}
form textarea{
min-width: unset;
}
}
@media (max-width: 420px) and (orientation:portrait){
#container #countdown_container .countdown-globe{
padding-top:30px;
}
#container .merry-christmas-text{
font-size:40px;
}
#container #mail_pole {
margin-left: -160px;
}
#christmas_scene .layer-4, #christmas_scene .layer-5 {
margin-left:0px;
}
}
@media (max-height:768px) and (orientation:landscape){
#container #countdown_container{
font-size:30px;
}
#container #countdown_container .countdown-globe{
height:180px;
padding-top:55px;
}
#container #countdown_container .countdown-globe::after{
margin-left:-50px;
}
#container .merry-christmas-text{
top:130px;
font-size:65px;
}
#container .happy-new-year{
width: 300px;
top:225px;
margin-left:-150px;
}
}
@media(max-height: 600px) and (orientation:landscape){
#container #countdown_container{
font-size:20px;
}
#container #countdown_container .countdown-globe{
height:165px;
padding-top:55px;
}
#container #countdown_container .countdown-globe::after{
margin-left:-46px;
}
#container .merry-christmas-text{
top:115px;
font-size:55px;
}
#container .happy-new-year{
width: 200px;
top: 195px;
margin-left: -100px;
}
}
@media (max-height:400px) and (orientation:landscape){
#container #countdown_container{
width: 300px;
margin-left:0;
left:unset;
font-size:30px;
text-align: center;
}
#container #countdown_container .countdown-globe::after{
display: none;
}
#container #countdown_container .countdown-globe{
padding-top:25px;
padding-left:0;
padding-right:0;
}
#container #christmas_tree{
bottom:10px;
}
#container #mail_pole{
bottom:10px;
}
#container .icons-container{
width: 220px;
right:10px;
}
#container .icons-container img {
width: 30px;
}
#container .merry-christmas-text{
font-size: 35px;
padding-right: 10px;
text-align: right;
top: 25px;
}
#container .happy-new-year{
display: none;
top:25%;
width: 300px;
margin-left:-150px;
}
}
/* END MEDIA QUERIES */
.swing {
width: 200px; /* 이미지 크기 조정 */
height: auto;
transform-origin: bottom center; /* 하단 고정 */
animation: swing 2s infinite ease-in-out; /* 애니메이션 */
}
@keyframes swing {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(5deg);
}
50% {
transform: rotate(0deg);
}
75% {
transform: rotate(-5deg);
}
100% {
transform: rotate(0deg);
}
}
/********bird**********/
.bird-animated {
z-index: 1;
position: fixed;
top:0;
left:0;
width: 100%;
height: 100vh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
min-height: 35rem;
padding: 2rem;
}
.bird {
background-image: url('/home/images/bird-cells-new.svg');
background-size: auto 100%;
width: 88px;
height: 125px;
will-change: background-position;
-webkit-animation-name: fly-cycle;
animation-name: fly-cycle;
-webkit-animation-timing-function: steps(10);
animation-timing-function: steps(10);
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.bird--one {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-delay: -0.5s;
animation-delay: -0.5s;
}
.bird--two {
-webkit-animation-duration: 0.9s;
animation-duration: 0.9s;
-webkit-animation-delay: -0.75s;
animation-delay: -0.75s;
}
.bird--three {
-webkit-animation-duration: 1.25s;
animation-duration: 1.25s;
-webkit-animation-delay: -0.25s;
animation-delay: -0.25s;
}
.bird--four {
-webkit-animation-duration: 1.1s;
animation-duration: 1.1s;
-webkit-animation-delay: -0.5s;
animation-delay: -0.5s;
}

.bird-container {
position: absolute;
top: 20%;
left: -10%;
transform: scale(0) translateX(-10vw);
will-change: transform;
-webkit-animation-name: fly-right-one;
animation-name: fly-right-one;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.bird-container--one {
-webkit-animation-duration: 15s;
animation-duration: 15s;
-webkit-animation-delay: 0;
animation-delay: 0;
}
.bird-container--two {
-webkit-animation-duration: 16s;
animation-duration: 16s;
-webkit-animation-delay: 1s;
animion-delay: 1s;
}
.bird-container--three {
-webkit-animation-duration: 14.6s;
animation-duration: 14.6s;
-webkit-animation-delay: 9.5s;
animation-delay: 9.5s;
}
.bird-container--four {
-webkit-animation-duration: 16s;
animation-duration: 16s;
-webkit-animation-delay: 10.25s;
animation-delay: 10.25s;
}

@-webkit-keyframes fly-cycle {
100% {
background-position: -900px 0;
}
}

@keyframes fly-cycle {
100% {
background-position: -900px 0;
}
}
@-webkit-keyframes fly-right-one {
0% {
transform: scale(0.3) translateX(-10vw);
}
10% {
transform: translateY(2vh) translateX(10vw) scale(0.4);
}
20% {
transform: translateY(0vh) translateX(30vw) scale(0.5);
}
30% {
transform: translateY(4vh) translateX(50vw) scale(0.6);
}
40% {
transform: translateY(2vh) translateX(70vw) scale(0.6);
}
50% {
transform: translateY(0vh) translateX(90vw) scale(0.6);
}
60% {
transform: translateY(0vh) translateX(110vw) scale(0.6);
}
100% {
transform: translateY(0vh) translateX(110vw) scale(0.6);
}
}
@keyframes fly-right-one {
0% {
transform: scale(0.3) translateX(-10vw);
}
10% {
transform: translateY(2vh) translateX(10vw) scale(0.4);
}
20% {
transform: translateY(0vh) translateX(30vw) scale(0.5);
}
30% {
transform: translateY(4vh) translateX(50vw) scale(0.6);
}
40% {
transform: translateY(2vh) translateX(70vw) scale(0.6);
}
50% {
transform: translateY(0vh) translateX(90vw) scale(0.6);
}
60% {
transform: translateY(0vh) translateX(110vw) scale(0.6);
}
100% {
transform: translateY(0vh) translateX(110vw) scale(0.6);
}
}
@-webkit-keyframes fly-right-two {
0% {
transform: translateY(-2vh) translateX(-10vw) scale(0.5);
}
10% {
transform: translateY(0vh) translateX(10vw) scale(0.4);
}
20% {
transform: translateY(-4vh) translateX(30vw) scale(0.6);
}
30% {
transform: translateY(1vh) translateX(50vw) scale(0.45);
}
40% {
transform: translateY(-2.5vh) translateX(70vw) scale(0.5);
}
50% {
transform: translateY(0vh) translateX(90vw) scale(0.45);
}
51% {
transform: translateY(0vh) translateX(110vw) scale(0.45);
}
100% {
transform: translateY(0vh) translateX(110vw) scale(0.45);
}
}
@keyframes fly-right-two {
0% {
transform: translateY(-2vh) translateX(-10vw) scale(0.5);
}
10% {
transform: translateY(0vh) translateX(10vw) scale(0.4);
}
20% {
transform: translateY(-4vh) translateX(30vw) scale(0.6);
}
30% {
transform: translateY(1vh) translateX(50vw) scale(0.45);
}
40% {
transform: translateY(-2.5vh) translateX(70vw) scale(0.5);
}
50% {
transform: translateY(0vh) translateX(90vw) scale(0.45);
}
51% {
transform: translateY(0vh) translateX(110vw) scale(0.45);
}
100% {
transform: translateY(0vh) translateX(110vw) scale(0.45);
}
}
/****************Fox*****************/
.fox {
position: absolute;
bottom:-130px;
left:10vw;
width: 470px;
height: 335px;
min-width: 470px;
min-height: 335px;
transform: scale(0.2);
transform-origin: top left; /* 축소 기준점을 설정 (원하는 위치로 변경 가능) */
}
.fox * {
position: absolute;
}
@-webkit-keyframes log {
from, to {
transform: rotate(-30deg);
}
50% {
transform: rotate(25deg);
}
}

@keyframes log {
from, to {
transform: rotate(-30deg);
}
50% {
transform: rotate(25deg);
}
}
@-webkit-keyframes log-inner {
from, to {
transform: rotate(15deg);
}
50% {
transform: rotate(-15deg);
}
}
@keyframes log-inner {
from, to {
transform: rotate(15deg);
}
50% {
transform: rotate(-15deg);
}
}
@-webkit-keyframes hind-log {
from, to {
transform: rotate(-20deg);
}
50% {
transform: rotate(15deg);
}
}
@keyframes hind-log {
from, to {
transform: rotate(-20deg);
}
50% {
transform: rotate(15deg);
}
}
@-webkit-keyframes hind-log-inner {
from, to {
transform: rotate(50deg);
}
50% {
transform: rotate(30deg);
}
}
@keyframes hind-log-inner {
from, to {
transform: rotate(50deg);
}
50% {
transform: rotate(30deg);
}
}
.leg-outer {
bottom: 0;
right: 127px;
-webkit-animation: leg-outer 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
animation: leg-outer 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
z-index: 1;
}
@-webkit-keyframes leg-outer {
0%, 100% {
transform: translateX(0);
}
50% {
transform: translateX(-76px);
}
}
@keyframes leg-outer {
0%, 100% {
transform: translateX(0);
}
50% {
transform: translateX(-76px);
}
}
.hind-leg-outer {
bottom: 0;
right: 263px;
-webkit-animation: leg-outer 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
animation: leg-outer 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
-webkit-animation-delay: -0.225s;
animation-delay: -0.225s;
z-index: 1;
}

.leg {
bottom: 0;
-webkit-animation: leg 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
animation: leg 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
}
@-webkit-keyframes leg {
75% {
transform: translateY(-20px);
}
from, 40%, to {
transform: translateY(0);
}
}
@keyframes leg {
75% {
transform: translateY(-20px);
}
from, 40%, to {
transform: translateY(0);
}
}
.hind-leg-outer2 {
bottom: 0;
-webkit-animation: leg 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
animation: leg 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
-webkit-animation-delay: -0.225s;
animation-delay: -0.225s;
}

.paw, .hind-paw {
bottom: 100%;
width: 10px;
height: 12px;
transform-origin: bottom center;
border-radius: 5px;
background: #000;
}
.paw:after, .hind-paw:after {
-webkit-animation: paw 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
animation: paw 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
content: '';
position: absolute;
display: block;
left: 0;
bottom: 0;
height: 100%;
width: 200%;
background: #000;
border-radius: 100px;
transform-origin: 5px center;
}
@-webkit-keyframes paw {
10%, to {
transform: rotate(10deg);
}
20%, 40% {
transform: rotate(10deg);
}
70% {
transform: rotate(120deg);
}
}
@keyframes paw {
10%, to {
transform: rotate(10deg);
}
20%, 40% {
transform: rotate(10deg);
}
70% {
transform: rotate(120deg);
}
}
.hind-paw {
-webkit-animation-delay: -0.225s;
animation-delay: -0.225s;
}

.log, .hind-log {
bottom: calc(100% - 5px);
width: 10px;
height: 44px;
transform-origin: bottom center;
transform: rotate(5deg);
background: black;
border-bottom-right-radius: 50% 100%;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}
.log:after, .hind-log:after {
content: '';
display: block;
position: absolute;
height: 100%;
width: 75%;
right: 0;
background: black;
transform-origin: right bottom;
transform: rotate(9deg);
border-top-right-radius: 8px;
}

.log {
-webkit-animation: log 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
animation: log 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
}

.hind-log {
-webkit-animation: hind-log 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
animation: hind-log 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
-webkit-animation-delay: -0.225s;
animation-delay: -0.225s;
}

.log-inner, .hind-log-inner {
z-index: 1;
}

.log-inner {
bottom: calc(100% - 8px);
width: 15px;
height: 65px;
transform-origin: bottom center;
-webkit-animation: log-inner 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
animation: log-inner 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
background-color: #E2DEE8;
background-image: linear-gradient(to top, #000000, #000000 10px, rgba(0, 0, 0, 0) 11px, rgba(0, 0, 0, 0));
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
.leg-outer + .leg-outer .log-inner, .leg-outer + .leg-outer .log-inner:after {
background-color: #C7C3D0;
}
.leg-outer + .leg-outer .log-inner:before {
background: radial-gradient(farthest-side at bottom left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 99%, #c7c3d0);
}
.log-inner:before, .log-inner:after {
content: '';
display: block;
position: absolute;
}
.log-inner:before {
right: 100%;
background: radial-gradient(farthest-side at bottom left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 99%, #e2dee8);
height: 90%;
bottom: 0;
width: 240%;
border-top-left-radius: 100%;
}
.log-inner:after {
right: 0;
bottom: 0;
height: 100%;
width: 100%;
background-color: #E2DEE8;
transform-origin: bottom right;
transform: rotate(15deg);
border-bottom-left-radius: 50% 100%;
border-bottom-right-radius: 5px;
background-image: linear-gradient(-15deg, #000000, #000000 9.5px, rgba(0, 0, 0, 0) 9.5px, rgba(0, 0, 0, 0));
}

.hind-log-inner {
bottom: calc(100% - 7px);
width: 15px;
left: -1px;
height: 80px;
transform-origin: bottom center;
-webkit-animation: hind-log-inner 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
animation: hind-log-inner 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
-webkit-animation-delay: -0.225s;
animation-delay: -0.225s;
background-color: #E2DEE8;
background-image: linear-gradient(to top, #000000, #000000 12px, rgba(0, 0, 0, 0) 12px, rgba(0, 0, 0, 0));
}
.hind-log-inner:before, .hind-log-inner:after {
content: '';
display: block;
position: absolute;
}
.hind-log-inner:before {
right: 100%;
background: radial-gradient(farthest-side at bottom left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 99%, #e2dee8);
height: 90%;
bottom: 0;
width: 240%;
border-top-left-radius: 100%;
}
.hind-log-inner:after {
left: 100%;
left: 100%;
height: 100%;
width: 34px;
background-color: #E2DEE8;
border-bottom-right-radius: 100% 100%;
transform-origin: bottom left;
transform: skewY(-38deg);
background-image: linear-gradient(38deg, #000000, #000000 10px, rgba(0, 0, 0, 0) 10px, rgba(0, 0, 0, 0));
}
.hind-leg-outer + .hind-leg-outer .hind-log-inner:before {
background: radial-gradient(farthest-side at bottom left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 99%, #c7c3d0);
}

.leg-outer + .leg-outer {
z-index: 0;
}
.leg-outer + .leg-outer, .leg-outer + .leg-outer *, .leg-outer + .leg-outer *:after {
-webkit-animation-delay: -0.45s !important;
animation-delay: -0.45s !important;
}

.hind-paw:after {
-webkit-animation-delay: -0.225s;
animation-delay: -0.225s;
}

.hind-leg-outer + .hind-leg-outer {
z-index: 0;
}
.hind-leg-outer + .hind-leg-outer, .hind-leg-outer + .hind-leg-outer *, .hind-leg-outer + .hind-leg-outer *:after {
-webkit-animation-delay: -0.675s;
animation-delay: -0.675s;
}
.hind-leg-outer + .hind-leg-outer .hind-log-inner, .hind-leg-outer + .hind-leg-outer .hind-log-inner:after {
background-color: #C7C3D0;
}

.foxbody {
top: 50%;
left: 170px;
height: 90px;
width: 173px;
background: #E2DEE8;
border-top-left-radius: 25% 50%;
border-bottom-left-radius: 25% 50%;
border-bottom-right-radius: 25% 50%;
transform-origin: right center;
-webkit-animation: body 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
animation: body 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
-webkit-animation-duration: 0.45s;
animation-duration: 0.45s;
-webkit-animation-delay: -0.225s;
animation-delay: -0.225s;
}
@-webkit-keyframes body {
from, to {
transform: rotate(-1deg);
}
50% {
transform: rotate(1deg);
}
}
@keyframes body {
from, to {
transform: rotate(-1deg);
}
50% {
transform: rotate(1deg);
}
}
.foxbody:before {
content: '';
display: block;
position: absolute;
height: 50px;
width: 50px;
background: #E2DEE8;
z-index: 1;
border-top-right-radius: 10px;
right: 3px;
top: -3px;
transform: rotate(15deg);
}

.head {
position: absolute;
height: 87px;
width: 112px;
bottom: 89%;
left: 65%;
border-top-left-radius: 40% 60%;
border-top-right-radius: 60% 20%;
background: #E2DEE8;
-webkit-animation: head 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
animation: head 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
-webkit-animation-duration: 0.45s;
animation-duration: 0.45s;
-webkit-animation-delay: -0.225s;
animation-delay: -0.225s;
transform-origin: center bottom;
z-index: 0;
transform-style: preserve-3d;
}
@-webkit-keyframes head {
from, to {
transform: rotate(0);
}
50% {
transform: translateY(2px) rotate(-2deg);
}
}
@keyframes head {
from, to {
transform: rotate(0);
}
50% {
transform: translateY(2px) rotate(-2deg);
}
}
.head:before, .head:after {
content: '';
display: block;
position: absolute;
}
.head:before {
width: 15px;
height: 15px;
right: 100%;
bottom: 9px;
background-image: radial-gradient(ellipse farthest-side at top left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 99%, #e2dee8 99.1%);
}
.head:after {
width: 50px;
height: 40px;
top: calc(100% - 1px);
left: 50%;
background-image: radial-gradient(ellipse farthest-side at bottom right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 99%, #f0e9ec 99.1%);
}

.face {
width: 84px;
height: 72px;
bottom: 0;
right: 5px;
background: #F0E9EC;
border-top-left-radius: 60% 100%;
border-top-right-radius: 40% 10%;
z-index: 2;
-webkit-animation: face 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
animation: face 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
}
@-webkit-keyframes face {
from, to {
transform: translateX(0);
}
50% {
transform: translateX(-2px);
}
}
@keyframes face {
from, to {
transform: translateX(0);
}
50% {
transform: translateX(-2px);
}
}
.face:before, .face:after {
content: '';
display: block;
position: absolute;
background: black;
-webkit-animation: eye 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
animation: eye 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
}
@-webkit-keyframes eye {
from, to {
transform: rotate(-12deg);
}
50% {
transform: translateX(-2px) rotate(-12deg);
}
}
@keyframes eye {
from, to {
transform: rotate(-12deg);
}
50% {
transform: translateX(-2px) rotate(-12deg);
}
}
.face:before {
height: 4px;
width: 25px;
border-radius: 2px;
top: 13px;
right: 10px;
}
.face:after {
height: 10px;
width: 10px;
border-radius: 50%;
top: 23px;
right: 15px;
}

.snout {
width: 36px;
height: 24px;
left: calc(100% - 5px);
bottom: 0;
border-bottom-right-radius: 100%;
background-color: #F0E9EC;
background-image: radial-gradient(circle 6px at top right, #000000, #000000 99%, rgba(0, 0, 0, 0) 99%);
transform-origin: right;
-webkit-animation: snout 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
animation: snout 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
}
@-webkit-keyframes snout {
from, to {
transform: scale(1);
}
50% {
transform: scaleX(1.05);
}
}
@keyframes snout {
from, to {
transform: scale(1);
}
50% {
transform: scaleX(1.05);
}
}
.snout:before, .snout:after {
content: '';
display: block;
position: absolute;
bottom: 100%;
left: 5px;
width: calc(100% - 5px);
height: 40px;
background-image: radial-gradient(ellipse farthest-side at top right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 99%, #e2dee8 99.1%);
}
.snout:before {
-webkit-animation: snout-outer 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
animation: snout-outer 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
}
@-webkit-keyframes snout-outer {
50% {
transform: scaleX(0.93);
}
}
@keyframes snout-outer {
50% {
transform: scaleX(0.93);
}
}
.snout:after {
background-image: radial-gradient(ellipse farthest-side at top right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 99%, #f0e9ec 99.1%);
left: 0;
}

.tail {
border-radius: 50%;
background: #E2DEE8;
width: 1rem;
height: 1rem;
}

.foxbody > .tail {
height: 20;
width: 20;
left: 10px;
transform: rotate(58deg);
}
.foxbody > .tail .tail {
right: 100%;
border-color: green;
z-index: -1;
}
.foxbody > .tail > .tail {
height: 36px;
width: 36px;
top: -8px;
-webkit-animation: tail-2 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
animation: tail-2 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
-webkit-animation-delay: -0.225s;
animation-delay: -0.225s;
transform-origin: calc(100% + 10px);
transform: rotate(0);
}
@-webkit-keyframes tail-2 {
from, to {
transform: rotate(0);
}
50% {
transform: rotate(0);
}
}
@keyframes tail-2 {
from, to {
transform: rotate(0);
}
50% {
transform: rotate(0);
}
}
.foxbody > .tail > .tail:before, .foxbody > .tail > .tail:after {
content: '';
left: 50%;
position: absolute;
height: 50%;
width: 26.83282px;
display: block;
background: #E2DEE8;
}
.foxbody > .tail > .tail:after {
bottom: 0;
transform-origin: top left;
transform: rotate(-16.60156deg);
}
.foxbody > .tail > .tail:before {
transform-origin: bottom left;
transform: rotate(16.60156deg);
}
.foxbody > .tail > .tail2 > .tail {
height: 70px;
width: 70px;
top: -25px;
-webkit-animation: tail2-2 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
animation: tail2-2 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
-webkit-animation-delay: -0.225s;
animation-delay: -0.225s;
transform-origin: calc(100% + 10px);
transform: rotate(-30deg);
}
@-webkit-keyframes tail2-2 {
from, to {
transform: rotate(-33deg);
}
50% {
transform: rotate(-30deg);
}
}
@keyframes tail2-2 {
from, to {
transform: rotate(-33deg);
}
50% {
transform: rotate(-30deg);
}
}
.foxbody > .tail > .tail2 > .tail:before, .foxbody > .tail > .tail2 > .tail:after {
content: '';
left: 50%;
position: absolute;
height: 50%;
width: 37.41657px;
display: block;
background: #E2DEE8;
}
.foxbody > .tail > .tail2 > .tail:after {
bottom: 0;
transform-origin: top left;
transform: rotate(-33.74902deg);
}
.foxbody > .tail > .tail2 > .tail:before {
transform-origin: bottom left;
transform: rotate(33.74902deg);
}
.foxbody > .tail > .tail > .tail {
height: 93px;
width: 93px;
top: -28.5px;
-webkit-animation: tail-3 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
animation: tail-3 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
-webkit-animation-delay: -0.225s;
animation-delay: -0.225s;
transform-origin: calc(100% + 18px);
transform: rotate(-24deg);
}
@-webkit-keyframes tail-3 {
from, to {
transform: rotate(-30deg);
}
50% {
transform: rotate(-24deg);
}
}
@keyframes tail-3 {
from, to {
transform: rotate(-30deg);
}
50% {
transform: rotate(-24deg);
}
}
.foxbody > .tail > .tail > .tail:before, .foxbody > .tail > .tail > .tail:after {
content: '';
left: 50%;
position: absolute;
height: 50%;
width: 57.8619px;
display: block;
background: #E2DEE8;
}
.foxbody > .tail > .tail > .tail:after {
bottom: 0;
transform-origin: top left;
transform: rotate(-26.22267deg);
}
.foxbody > .tail > .tail > .tail:before {
transform-origin: bottom left;
transform: rotate(26.22267deg);
}
.foxbody > .tail > .tail2 > .tail > .tail {
height: 120px;
width: 120px;
top: -25px;
-webkit-animation: tail2-3 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
animation: tail2-3 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
-webkit-animation-delay: -425ms;
animation-delay: -425ms;
background: linear-gradient(45deg, #f0e9ec 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(135deg, #f0e9ec 25%, rgba(0, 0, 0, 0) 25%) 0 0, linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 66%, #f0e9ec 66%);
background-size: 40px 40px, 40px 40px, 100%;
background-position: center;
background-color: #E2DEE8;
background-repeat: repeat-y;
transform-origin: calc(100% + 35px);
transform: rotate(-30deg);
}
@-webkit-keyframes tail2-3 {
from, to {
transform: rotate(-35deg);
}
50% {
transform: rotate(-30deg);
}
}
@keyframes tail2-3 {
from, to {
transform: rotate(-35deg);
}
50% {
transform: rotate(-30deg);
}
}
.foxbody > .tail > .tail2 > .tail > .tail:before, .foxbody > .tail > .tail2 > .tail > .tail:after {
content: '';
left: 50%;
position: absolute;
height: 50%;
width: 91.65151px;
display: block;
background: #E2DEE8;
}
.foxbody > .tail > .tail2 > .tail > .tail:after {
bottom: 0;
transform-origin: top left;
transform: rotate(-15.25754deg);
}
.foxbody > .tail > .tail2 > .tail > .tail:before {
transform-origin: bottom left;
transform: rotate(15.25754deg);
}
.foxbody > .tail > .tail > .tail > .tail {
height: 98px;
width: 98px;
top: -2.5px;
-webkit-animation: tail-4 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
animation: tail-4 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
-webkit-animation-delay: -425ms;
animation-delay: -425ms;
background: #F0E9EC !important;
transform-origin: calc(100% + 46.5px);
transform: rotate(-17deg);
}
.foxbody > .tail > .tail > .tail > .tail:before {
background: linear-gradient(to right, #f0e9ec, #e2dee8) !important;
}
@-webkit-keyframes tail-4 {
from, to {
transform: rotate(-24deg);
}
50% {
transform: rotate(-17deg);
}
}
@keyframes tail-4 {
from, to {
transform: rotate(-24deg);
}
50% {
transform: rotate(-17deg);
}
}
.foxbody > .tail > .tail > .tail > .tail:before, .foxbody > .tail > .tail > .tail > .tail:after {
content: '';
left: 50%;
position: absolute;
height: 50%;
width: 95.46727px;
display: block;
background: #E2DEE8;
}
.foxbody > .tail > .tail > .tail > .tail:after {
bottom: 0;
transform-origin: top left;
transform: rotate(-1.50006deg);
}
.foxbody > .tail > .tail > .tail > .tail:before {
transform-origin: bottom left;
transform: rotate(1.50006deg);
}
.foxbody > .tail > .tail2 > .tail > .tail > .tail {
height: 50px;
width: 50px;
top: 35px;
-webkit-animation: tail2-4 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
animation: tail2-4 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
-webkit-animation-delay: -0.225s;
animation-delay: -0.225s;
transform-origin: calc(100% + 60px);
transform: rotate(27deg);
}
.foxbody > .tail > .tail2 > .tail > .tail > .tail:before {
display: none !important;
}
.foxbody > .tail > .tail2 > .tail > .tail > .tail, .foxbody > .tail > .tail2 > .tail > .tail > .tail:before, .foxbody > .tail > .tail2 > .tail > .tail > .tail:after {
background: #F0E9EC !important;
}
@-webkit-keyframes tail2-4 {
from, to {
transform: rotate(5deg);
}
50% {
transform: rotate(27deg);
}
}
@keyframes tail2-4 {
from, to {
transform: rotate(5deg);
}
50% {
transform: rotate(27deg);
}
}
.foxbody > .tail > .tail2 > .tail > .tail > .tail:before, .foxbody > .tail > .tail2 > .tail > .tail > .tail:after {
content: '';
left: 50%;
position: absolute;
height: 50%;
width: 77.45967px;
display: block;
background: #E2DEE8;
}
.foxbody > .tail > .tail2 > .tail > .tail > .tail:after {
bottom: 0;
transform-origin: top left;
transform: rotate(24.31576deg);
}
.foxbody > .tail > .tail2 > .tail > .tail > .tail:before {
transform-origin: bottom left;
transform: rotate(-24.31576deg);
}
.foxbody > .tail > .tail > .tail > .tail > .tail {
height: 36px;
width: 36px;
top: 31px;
-webkit-animation: tail-5 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
animation: tail-5 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
-webkit-animation-delay: -0.225s;
animation-delay: -0.225s;
transform-origin: calc(100% + 49px);
transform: rotate(41deg);
}
.foxbody > .tail > .tail > .tail > .tail > .tail, .foxbody > .tail > .tail > .tail > .tail > .tail:before, .foxbody > .tail > .tail > .tail > .tail > .tail:after {
background: #F0E9EC !important;
}
@-webkit-keyframes tail-5 {
from, to {
transform: rotate(10deg);
}
50% {
transform: rotate(41deg);
}
}
@keyframes tail-5 {
from, to {
transform: rotate(10deg);
}
50% {
transform: rotate(41deg);
}
}
.foxbody > .tail > .tail > .tail > .tail > .tail:before, .foxbody > .tail > .tail > .tail > .tail > .tail:after {
content: '';
left: 50%;
position: absolute;
height: 50%;
width: 59.39697px;
display: block;
background: #E2DEE8;
}
.foxbody > .tail > .tail > .tail > .tail > .tail:after {
bottom: 0;
transform-origin: top left;
transform: rotate(27.56063deg);
}
.foxbody > .tail > .tail > .tail > .tail > .tail:before {
transform-origin: bottom left;
transform: rotate(-27.56063deg);
}
.foxbody > .tail > .tail2 > .tail > .tail > .tail > .tail {
height: 20px;
width: 20px;
top: 15px;
-webkit-animation: tail2-5 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
animation: tail2-5 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
-webkit-animation-delay: -0.225s;
animation-delay: -0.225s;
transform-origin: calc(100% + 25px);
transform: rotate(23deg);
}
.foxbody > .tail > .tail2 > .tail > .tail > .tail > .tail, .foxbody > .tail > .tail2 > .tail > .tail > .tail > .tail:before, .foxbody > .tail > .tail2 > .tail > .tail > .tail > .tail:after {
background: #F0E9EC !important;
}
@-webkit-keyframes tail2-5 {
from, to {
transform: rotate(0deg);
}
50% {
transform: rotate(23deg);
}
}
@keyframes tail2-5 {
from, to {
transform: rotate(0deg);
}
50% {
transform: rotate(23deg);
}
}
.foxbody > .tail > .tail2 > .tail > .tail > .tail > .tail:before, .foxbody > .tail > .tail2 > .tail > .tail > .tail > .tail:after {
content: '';
left: 50%;
position: absolute;
height: 50%;
width: 31.62278px;
display: block;
background: #E2DEE8;
}
.foxbody > .tail > .tail2 > .tail > .tail > .tail > .tail:after {
bottom: 0;
transform-origin: top left;
transform: rotate(25.37695deg);
}
.foxbody > .tail > .tail2 > .tail > .tail > .tail > .tail:before {
transform-origin: bottom left;
transform: rotate(-25.37695deg);
}
.foxbody > .tail > .tail > .tail > .tail > .tail > .tail {
height: 15px;
width: 15px;
top: 10.5px;
-webkit-animation: tail-6 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
animation: tail-6 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
-webkit-animation-delay: -0.225s;
animation-delay: -0.225s;
transform-origin: calc(100% + 18px);
transform: rotate(10deg);
}
.foxbody > .tail > .tail > .tail > .tail > .tail > .tail, .foxbody > .tail > .tail > .tail > .tail > .tail > .tail:before, .foxbody > .tail > .tail > .tail > .tail > .tail > .tail:after {
background: #F0E9EC !important;
}
@-webkit-keyframes tail-6 {
from, to {
transform: rotate(0deg);
}
50% {
transform: rotate(10deg);
}
}
@keyframes tail-6 {
from, to {
transform: rotate(0deg);
}
50% {
transform: rotate(10deg);
}
}
.foxbody > .tail > .tail > .tail > .tail > .tail > .tail:before, .foxbody > .tail > .tail > .tail > .tail > .tail > .tail:after {
content: '';
left: 50%;
position: absolute;
height: 50%;
width: 23.2379px;
display: block;
background: #E2DEE8;
}
.foxbody > .tail > .tail > .tail > .tail > .tail > .tail:after {
bottom: 0;
transform-origin: top left;
transform: rotate(24.31576deg);
}
.foxbody > .tail > .tail > .tail > .tail > .tail > .tail:before {
transform-origin: bottom left;
transform: rotate(-24.31576deg);
}
.foxbody > .tail > .tail2 > .tail > .tail > .tail > .tail > .tail {
height: 10px;
width: 10px;
top: 5px;
-webkit-animation: tail2-6 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
animation: tail2-6 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
-webkit-animation-delay: -0.225s;
animation-delay: -0.225s;
transform-origin: calc(100% + 10px);
transform: rotate(10deg);
}
.foxbody > .tail > .tail2 > .tail > .tail > .tail > .tail > .tail, .foxbody > .tail > .tail2 > .tail > .tail > .tail > .tail > .tail:before, .foxbody > .tail > .tail2 > .tail > .tail > .tail > .tail > .tail:after {
background: #F0E9EC !important;
}
@-webkit-keyframes tail2-6 {
from, to {
transform: rotate(3deg);
}
50% {
transform: rotate(10deg);
}
}
@keyframes tail2-6 {
from, to {
transform: rotate(3deg);
}
50% {
transform: rotate(10deg);
}
}
.foxbody > .tail > .tail2 > .tail > .tail > .tail > .tail > .tail:before, .foxbody > .tail > .tail2 > .tail > .tail > .tail > .tail > .tail:after {
content: '';
left: 50%;
position: absolute;
height: 50%;
width: 14.14214px;
display: block;
background: #E2DEE8;
}
.foxbody > .tail > .tail2 > .tail > .tail > .tail > .tail > .tail:after {
bottom: 0;
transform-origin: top left;
transform: rotate(19.47124deg);
}
.foxbody > .tail > .tail2 > .tail > .tail > .tail > .tail > .tail:before {
transform-origin: bottom left;
transform: rotate(-19.47124deg);
}
.foxbody > .tail > .tail2 {
height: 20px;
width: 20px;
border-radius: 50%;
position: absolute;
right: 50%;
transform-origin: right center;
transform: rotate(18deg);
}
.foxbody > .tail > .tail2 .tail {
border-color: blue;
z-index: -1;
}

.ears {
top: 10px;
left: 35px;
width: 60px;
transform: rotateY(20deg);
transform-origin: bottom left;
}
.ears:before {
content: '';
display: block;
position: absolute;
width: 60px;
height: 40px;
background: #E2DEE8;
border-top-left-radius: 100%;
left: -36px;
top: -16px;
transform: rotate(-18deg) skewX(-20deg);
}

.ear {
width: 40px;
height: 46px;
bottom: 0;
transform: skewY(-10deg);
transform-origin: right bottom;
}
.ear:before, .ear:after {
content: '';
display: block;
position: absolute;
height: 100%;
width: 100%;
border-top-left-radius: 100%;
}
.ear:before {
background: #E2DEE8;
}
.ear:after {
background: #D5D1DC;
width: 60%;
right: 0;
-webkit-animation: ear-inner 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
animation: ear-inner 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
-webkit-animation-delay: -0.45s;
animation-delay: -0.45s;
transform-origin: right;
}
@-webkit-keyframes ear-inner {
50% {
transform: scaleX(0.9);
}
}
@keyframes ear-inner {
50% {
transform: scaleX(0.9);
}
}
.ear:nth-child(1) {
right: 0;
-webkit-animation: ear-back 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
animation: ear-back 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
}
@-webkit-keyframes ear-back {
from, to {
transform: rotate(5deg) skewY(-10deg);
}
50% {
transform: translateX(-1px) rotate(5deg) skewY(-10deg);
}
}
@keyframes ear-back {
from, to {
transform: rotate(5deg) skewY(-10deg);
}
50% {
transform: translateX(-1px) rotate(5deg) skewY(-10deg);
}
}
.ear:nth-child(2) {
left: 0;
transform: skewY(-10deg);
}

@media (max-width: 1379px){
.fox {
position: absolute;
bottom:-150px;
left:7vw;
}
}
@media (max-width: 768px){
.fox {
position: absolute;
bottom:-180px;
left:5vw;
}
#countdown_container{
display:none;
}
#container .merry-christmas-text{
top:150px;
font-size:55px;
}
#container .happy-new-year{
top:230px;
width: 300px;
margin-left:-150px;
}
}
@media (max-width: 600px){
.fox{
display:none;
}
}
@media (max-height:400px) and (orientation:landscape){
.fox{
position: absolute;
bottom:-220px;
left:10vw;
}
#countdown_container{
display:none;
}
}