@charset "UTF-8";
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

body * {
  font-family: "微軟正黑體", Helvetica, Arial, sans-serif;
}

.bgSky .moon, .bgSky .mars, .bgSky .sun, .bgSky .galaxy, .bgSky .dipperstar, .bgSky .ufo, .bgSky .meteor, .bgSky .xmasman, .content .soks, .content .bell, .content .bigStar, .content .cloud, .content .airplane, .content .airballoon, .content .snow, .content .angry, .content .haha, .content .like, .content .love, .content .sad, .content .wow, .snowground .shadowtree, .snowground .xmastree.bottom, .snowground .bgtree, .snowground .snowman, .snowground .snowbg, .snowground .giftbox .gift, #lightbox .lightbox::before {
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}

.bgSky, .content, .content .xmastree, .content .readingbox .img, .snowground, .snowground .giftbox, .btnline {
  position: relative;
}

.bgSky .moon, .bgSky .mars, .bgSky .sun, .bgSky .galaxy, .bgSky .dipperstar, .bgSky .ufo, .bgSky .meteor, .bgSky .xmasman, .content .xmastree:first-child::after, .content .msg, .content .msg::before, .content .readingbox, .content .soks, .content .bell, .content .bigStar, .content .cloud, .content .airplane, .content .airballoon, .content .snow, .content .angry, .content .haha, .content .like, .content .love, .content .sad, .content .wow, .snowground .shadowtree, .snowground .xmastree.bottom, .snowground .bgtree, .snowground .snowman, .snowground .snowbg, .snowground .giftbox .gift, .snowground .shadowground, #lightbox .lightbox::before {
  position: absolute;
}

.bgSky .moon, .bgSky .mars, .bgSky .sun, .bgSky .galaxy, .bgSky .dipperstar, .bgSky .ufo, .bgSky .meteor, .bgSky .xmasman, .content .xmastree, .content .xmastree:first-child::after, .content .soks, .content .bell, .content .bigStar, .content .cloud, .content .airplane, .content .airballoon, .content .snow, .content .angry, .content .haha, .content .like, .content .love, .content .sad, .content .wow, .snowground .shadowtree, .snowground .xmastree.bottom, .snowground .bgtree, .snowground .snowman, .snowground .snowbg, .snowground .giftbox .gift, #lightbox .lightbox::before {
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: scroll;
  background-color: transparent;
  background-size: contain;
}

html {
  font-size: 62.5%;
}

#header {
  z-index: 1000;
}

.Container {
  width: 100vw;
  overflow: hidden;
}

.bgSky {
  width: 100%;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzA1MDcxMiIvPjxzdG9wIG9mZnNldD0iMTAlIiBzdG9wLWNvbG9yPSIjMTUxZTQzIi8+PHN0b3Agb2Zmc2V0PSIzMCUiIHN0b3AtY29sb3I9IiMxNTFlNDMiLz48c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzI4YjlmMCIvPjxzdG9wIG9mZnNldD0iNzUlIiBzdG9wLWNvbG9yPSIjN2ZkY2ZmIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZjRmY2ZmIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #050712), color-stop(10%, #151e43), color-stop(30%, #151e43), color-stop(50%, #28b9f0), color-stop(75%, #7fdcff), color-stop(100%, #f4fcff));
  background-image: -moz-linear-gradient(#050712, #151e43 10%, #151e43 30%, #28b9f0 50%, #7fdcff 75%, #f4fcff);
  background-image: -webkit-linear-gradient(#050712, #151e43 10%, #151e43 30%, #28b9f0 50%, #7fdcff 75%, #f4fcff);
  background-image: linear-gradient(#050712, #151e43 10%, #151e43 30%, #28b9f0 50%, #7fdcff 75%, #f4fcff);
}
.bgSky .moon {
  background-image: url("../images/moon.svg");
  width: 604.8px;
  height: 612px;
  right: -40px;
  top: -210px;
}
@media screen and (max-width: 768px) {
  .bgSky .moon {
    width: 378px;
    height: 382.5px;
    top: -80px;
  }
}
@media screen and (max-width: 414px) {
  .bgSky .moon {
    width: 252px;
    height: 255px;
    top: -80px;
  }
}
.bgSky .mars {
  background-image: url("../images/mars.svg");
  width: 59px;
  height: 59px;
  left: 30%;
  top: 156px;
}
@media screen and (max-width: 768px) {
  .bgSky .mars {
    width: 35.4px;
    height: 35.4px;
    top: 93.6px;
  }
}
@media screen and (max-width: 414px) {
  .bgSky .mars {
    width: 20.65px;
    height: 20.65px;
    top: 40.56px;
  }
}
.bgSky .sun {
  background-image: url("../images/sun.svg");
  width: 150px;
  height: 150px;
  left: 14%;
  top: 40px;
}
@media screen and (max-width: 768px) {
  .bgSky .sun {
    width: 90px;
    height: 90px;
    top: 24px;
  }
}
@media screen and (max-width: 414px) {
  .bgSky .sun {
    width: 52.5px;
    height: 52.5px;
    top: 10.4px;
  }
}
.bgSky .galaxy {
  background-image: url("../images/starall.svg");
  width: 1440px;
  height: 912px;
  left: 0;
  top: 0;
}
@media screen and (max-width: 768px) {
  .bgSky .galaxy {
    width: 100vw;
    height: 547.2px;
  }
}
@media screen and (max-width: 414px) {
  .bgSky .galaxy {
    width: 100vw;
    height: 237.12px;
  }
}
.bgSky .dipperstar {
  background-image: url("../images/star_seven.svg");
  width: 383px;
  height: 292px;
  left: 8%;
  top: 206px;
}
@media screen and (max-width: 768px) {
  .bgSky .dipperstar {
    width: 229.8px;
    height: 175.2px;
    top: 123.6px;
  }
}
@media screen and (max-width: 414px) {
  .bgSky .dipperstar {
    width: 114.9px;
    height: 87.6px;
    top: 61.8px;
  }
}
.bgSky .ufo {
  background-image: url("../images/ufo.svg");
  width: 180px;
  height: 97px;
  left: 16%;
  top: 558px;
  -moz-animation: ufo-move 5s ease-in-out 2s infinite;
  -webkit-animation: ufo-move 5s ease-in-out 2s infinite;
  animation: ufo-move 5s ease-in-out 2s infinite;
}
@-moz-keyframes ufo-move {
  0% {
    -moz-transform: rotate(10deg);
    transform: rotate(10deg);
  }
  25% {
    -moz-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  50% {
    -moz-transform: rotate(10deg);
    transform: rotate(10deg);
  }
  75% {
    -moz-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  100% {
    -moz-transform: rotate(10deg);
    transform: rotate(10deg);
  }
}
@-webkit-keyframes ufo-move {
  0% {
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
  }
  25% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  50% {
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
  }
  75% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  100% {
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
  }
}
@keyframes ufo-move {
  0% {
    -moz-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
  }
  25% {
    -moz-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  50% {
    -moz-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
  }
  75% {
    -moz-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  100% {
    -moz-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
  }
}
@media screen and (max-width: 768px) {
  .bgSky .ufo {
    width: 108px;
    height: 58.2px;
    top: 334.8px;
  }
}
@media screen and (max-width: 414px) {
  .bgSky .ufo {
    width: 63px;
    height: 33.95px;
    top: 195.3px;
  }
}
.bgSky .meteor {
  background-image: url("../images/meteor.svg");
  width: 190px;
  height: 115px;
  left: 46%;
  top: 41px;
  opacity: 0;
  -moz-animation: meteor-move 8s linear 3s infinite;
  -webkit-animation: meteor-move 8s linear 3s infinite;
  animation: meteor-move 8s linear 3s infinite;
}
@-moz-keyframes meteor-move {
  0% {
    -moz-transform: scale(0.1);
    transform: scale(0.1);
    opacity: 0;
    left: 55%;
    top: 0;
  }
  12% {
    -moz-transform: scale(1.5);
    transform: scale(1.5);
    opacity: 1;
    left: -20%;
    top: 30%;
  }
  20% {
    -moz-transform: scale(1.5);
    transform: scale(1.5);
    opacity: 0;
  }
  100% {
    -moz-transform: scale(1.5);
    transform: scale(1.5);
    opacity: 0;
  }
}
@-webkit-keyframes meteor-move {
  0% {
    -webkit-transform: scale(0.1);
    transform: scale(0.1);
    opacity: 0;
    left: 55%;
    top: 0;
  }
  12% {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
    opacity: 1;
    left: -20%;
    top: 30%;
  }
  20% {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
    opacity: 0;
  }
}
@keyframes meteor-move {
  0% {
    -moz-transform: scale(0.1);
    -webkit-transform: scale(0.1);
    transform: scale(0.1);
    opacity: 0;
    left: 55%;
    top: 0;
  }
  12% {
    -moz-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
    opacity: 1;
    left: -20%;
    top: 30%;
  }
  20% {
    -moz-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
    opacity: 0;
  }
  100% {
    -moz-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
    opacity: 0;
  }
}
@media screen and (max-width: 768px) {
  .bgSky .meteor {
    width: 114px;
    height: 69px;
    top: 24.6px;
  }
}
@media screen and (max-width: 414px) {
  .bgSky .meteor {
    width: 49.4px;
    height: 29.9px;
    top: 10.66px;
  }
}
.bgSky .xmasman {
  background-image: url("../images/xmasman.svg");
  width: 302px;
  height: 527px;
  left: 86%;
  top: 80px;
  -moz-animation: xmasman-move 10s Linear infinite alternate;
  -webkit-animation: xmasman-move 10s Linear infinite alternate;
  animation: xmasman-move 10s Linear infinite alternate;
}
@-moz-keyframes xmasman-move {
  0% {
    left: 86%;
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    left: 57%;
    -moz-transform: rotate(-30deg);
    transform: rotate(-30deg);
  }
}
@-webkit-keyframes xmasman-move {
  0% {
    left: 86%;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    left: 57%;
    -webkit-transform: rotate(-30deg);
    transform: rotate(-30deg);
  }
}
@keyframes xmasman-move {
  0% {
    left: 86%;
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    left: 57%;
    -moz-transform: rotate(-30deg);
    -ms-transform: rotate(-30deg);
    -webkit-transform: rotate(-30deg);
    transform: rotate(-30deg);
  }
}
@media screen and (max-width: 768px) {
  .bgSky .xmasman {
    width: 181.2px;
    height: 316.2px;
    top: 48px;
  }
}
@media screen and (max-width: 414px) {
  .bgSky .xmasman {
    width: 151px;
    height: 263.5px;
    top: 20.8px;
  }
}

.content {
  width: 1140px;
  margin: 0 auto;
  padding: 400px 0 0;
  z-index: 2;
}
@media screen and (max-width: 414px) {
  .content {
    width: 100vw;
    padding: 260px 0 0;
  }
}
@media screen and (max-width: 768px) {
  .content {
    width: 100vw;
  }
}
.content .xmastree {
  background-image: url("../images/tree.svg");
  width: 789px;
  height: 350px;
  margin: -20px auto 0;
  z-index: 2;
  -moz-animation: show-xmastree 1s linear;
  -webkit-animation: show-xmastree 1s linear;
  animation: show-xmastree 1s linear;
}
@-moz-keyframes show-xmastree {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes show-xmastree {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes show-xmastree {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@media screen and (max-width: 768px) {
  .content .xmastree {
    width: 710.1px;
    height: 315px;
  }
}
@media screen and (max-width: 414px) {
  .content .xmastree {
    width: 315.6px;
    height: 140px;
    margin-top: -8px;
  }
}
.content .xmastree:first-child {
  background-image: url("../images/treetop.svg");
  width: 668px;
  height: 594px;
  margin-top: 0;
}
@media screen and (max-width: 768px) {
  .content .xmastree:first-child {
    width: 601.2px;
    height: 534.6px;
  }
}
@media screen and (max-width: 414px) {
  .content .xmastree:first-child {
    width: 267.2px;
    height: 237.6px;
  }
}
.content .xmastree:first-child::after {
  content: '';
  background-image: url("../images/star-shine.svg");
  width: 397.8px;
  height: 377.4px;
  margin-left: -198.9px;
  left: 50%;
  top: -188.7px;
  -moz-animation: star-shine 3s ease infinite;
  -webkit-animation: star-shine 3s ease infinite;
  animation: star-shine 3s ease infinite;
}
@-moz-keyframes star-shine {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes star-shine {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes star-shine {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@media screen and (max-width: 414px) {
  .content .xmastree:first-child::after {
    width: 103.428px;
    height: 98.124px;
    margin-left: -51.714px;
    top: -49.062px;
  }
}
.content .xmastree:nth-child(2) {
  margin-top: -19px;
}
@media screen and (max-width: 414px) {
  .content .xmastree:nth-child(2) {
    margin-top: -8px;
  }
}
.content .xmastree.bottom {
  width: 40px;
  height: 104px;
  z-index: 1;
}
.content .msg {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
  max-width: 50%;
  background-color: #FFF8CE;
  color: #524A0D;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.4;
  padding: 8px 15px;
  z-index: 3;
  -moz-animation: show-msg 1.5s linear;
  -webkit-animation: show-msg 1.5s linear;
  animation: show-msg 1.5s linear;
}
@-moz-keyframes show-msg {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes show-msg {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes show-msg {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@media screen and (max-width: 414px) {
  .content .msg {
    max-width: 60%;
  }
}
.content .msg::before {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 20px;
  border-color: transparent transparent transparent #FFF8CE;
  margin-top: -5px;
  top: 50%;
}
.content .msg.r-m {
  text-align: left;
}
.content .msg.r-m::before {
  left: 99%;
}
.content .msg.r-m:first-child {
  right: 210px;
  bottom: 275px;
}
.top .content .msg.r-m:first-child {
  top: 50%;
}
@media screen and (max-width: 414px) {
  .content .msg.r-m:first-child {
    right: 85px;
    bottom: 72px;
    top: initial;
  }
}
.content .msg.r-m:nth-child(2) {
  right: 180px;
  bottom: 210px;
}
@media screen and (max-width: 414px) {
  .content .msg.r-m:nth-child(2) {
    right: 54px;
    bottom: 7.5px;
    top: initial;
  }
}
.content .msg.r-m:nth-child(3) {
  right: 150px;
  bottom: 145px;
}
@media screen and (max-width: 414px) {
  .content .msg.r-m:nth-child(3) {
    display: none;
  }
}
.content .msg.r-m:nth-child(4) {
  right: 120px;
  bottom: 80px;
}
@media screen and (max-width: 414px) {
  .content .msg.r-m:nth-child(4) {
    display: none;
  }
}
.content .msg.r-m:nth-child(5) {
  right: 100px;
  bottom: 35px;
}
@media screen and (max-width: 414px) {
  .content .msg.r-m:nth-child(5) {
    display: none;
  }
}
.content .msg.l-m {
  text-align: left;
}
.content .msg.l-m::before {
  right: 99%;
  -moz-transform: scaleX(-1);
  -ms-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}
.content .msg.l-m:first-child {
  left: 210px;
  bottom: 275px;
}
@media screen and (max-width: 414px) {
  .content .msg.l-m:first-child {
    left: 85px;
    bottom: 72px;
    top: initial;
  }
}
.content .msg.l-m:nth-child(2) {
  left: 180px;
  bottom: 210px;
}
@media screen and (max-width: 414px) {
  .content .msg.l-m:nth-child(2) {
    left: 54px;
    bottom: 7.5px;
    top: initial;
  }
}
.content .msg.l-m:nth-child(3) {
  left: 150px;
  bottom: 145px;
}
@media screen and (max-width: 414px) {
  .content .msg.l-m:nth-child(3) {
    display: none;
  }
}
.content .msg.l-m:nth-child(4) {
  left: 120px;
  bottom: 80px;
}
@media screen and (max-width: 414px) {
  .content .msg.l-m:nth-child(4) {
    display: none;
  }
}
.content .msg.l-m:nth-child(5) {
  left: 100px;
  bottom: 35px;
}
@media screen and (max-width: 414px) {
  .content .msg.l-m:nth-child(5) {
    display: none;
  }
}
.content .msg span {
  max-height: 3em;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.content .readingbox {
  background-color: #fff;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  -moz-box-shadow: 0 5px 0 #8B572A inset, 0 4px 5px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0 5px 0 #8B572A inset, 0 4px 5px rgba(0, 0, 0, 0.3);
  box-shadow: 0 5px 0 #8B572A inset, 0 4px 5px rgba(0, 0, 0, 0.3);
  width: 50%;
  height: 250px;
  margin-left: -25%;
  padding: 12px 10px 5px;
  z-index: 4;
  left: 50%;
  top: 40px;
}
@media screen and (max-width: 414px) {
  .content .readingbox {
    width: 70%;
    height: 110px;
    margin-left: -35%;
    top: 10.4px;
    display: flex;
    flex: 2;
  }
}
.content .readingbox .img {
  width: 100%;
  height: 160px;
  margin: 0 0px 12px 0;
  overflow: hidden;
}
@media screen and (max-width: 414px) {
  .content .readingbox .img {
    height: 90px;
    margin: 0 8px 0 0;
  }
}
.content .readingbox .img img {
  max-width: initial;
  height: 100%;
}
@media screen and (max-width: 414px) {
  .content .readingbox .img img {
    width: 172.5px;
    height: 90px;
    position: absolute;
  }
}
.content .readingbox .title {
  color: #333;
  font-size: 17px;
  font-weight: bold;
}
.content .readingbox .btn {
  text-align: center;
}
.content .readingbox .btn a {
  color: #05d;
  display: block;
  font-size: 15px;
  font-weight: bold;
  padding: 8px 0;
}
.content .soks {
  background-image: url("../images/socks.svg");
  width: 47px;
  height: 54px;
  z-index: 2;
  right: 1%;
  top: 86%;
  -moz-animation: soks-ro 1s ease-in-out infinite alternate;
  -webkit-animation: soks-ro 1s ease-in-out infinite alternate;
  animation: soks-ro 1s ease-in-out infinite alternate;
}
@-moz-keyframes soks-ro {
  0% {
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  25% {
    -moz-transform: rotate(10deg);
    transform: rotate(10deg);
  }
  50% {
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  75% {
    -moz-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  100% {
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
@-webkit-keyframes soks-ro {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
  }
  50% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  75% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
@keyframes soks-ro {
  0% {
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  25% {
    -moz-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
  }
  50% {
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  75% {
    -moz-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  100% {
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
@media screen and (max-width: 414px) {
  .content .soks {
    width: 23.5px;
    height: 27px;
  }
}
.content .bell {
  background-image: url("../images/bell.svg");
  width: 40px;
  height: 56px;
  z-index: 1;
  left: 11%;
  bottom: 27%;
  -moz-animation: bell-ro 1.5s ease-in-out infinite alternate;
  -webkit-animation: bell-ro 1.5s ease-in-out infinite alternate;
  animation: bell-ro 1.5s ease-in-out infinite alternate;
}
@-moz-keyframes bell-ro {
  0% {
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  25% {
    -moz-transform: rotate(10deg);
    transform: rotate(10deg);
  }
  50% {
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  75% {
    -moz-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  100% {
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
@-webkit-keyframes bell-ro {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
  }
  50% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  75% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
@keyframes bell-ro {
  0% {
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  25% {
    -moz-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
  }
  50% {
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  75% {
    -moz-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  100% {
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
@media screen and (max-width: 414px) {
  .content .bell {
    width: 20px;
    height: 28px;
  }
}
.content .bigStar {
  background-image: url("../images/star.svg");
  width: 234px;
  height: 222px;
  margin-left: -117px;
  left: 50%;
  top: 289px;
  z-index: 8;
}
@media screen and (max-width: 414px) {
  .content .bigStar {
    width: 60.84px;
    height: 57.72px;
    margin-left: -30.42px;
    top: 231px;
  }
}
.content .cloud {
  background-image: url("../images/cloud.svg");
  width: 187px;
  height: 115px;
  z-index: 5;
}
.content .cloud.swim-1 {
  top: 60%;
  -moz-animation: swim-1 5s ease-in-out infinite alternate;
  -webkit-animation: swim-1 5s ease-in-out infinite alternate;
  animation: swim-1 5s ease-in-out infinite alternate;
}
@-moz-keyframes swim-1 {
  0% {
    left: -20%;
  }
  100% {
    left: 10%;
  }
}
@-webkit-keyframes swim-1 {
  0% {
    left: -20%;
  }
  100% {
    left: 10%;
  }
}
@keyframes swim-1 {
  0% {
    left: -20%;
  }
  100% {
    left: 10%;
  }
}
@media screen and (max-width: 414px) {
  .content .cloud.swim-1 {
    width: 74.8px;
    height: 46px;
  }
}
.content .cloud.swim-2 {
  top: 45%;
  -moz-animation: swim-2 7s ease-in-out infinite alternate;
  -webkit-animation: swim-2 7s ease-in-out infinite alternate;
  animation: swim-2 7s ease-in-out infinite alternate;
}
@-moz-keyframes swim-2 {
  0% {
    right: -20%;
  }
  100% {
    right: 20%;
  }
}
@-webkit-keyframes swim-2 {
  0% {
    right: -20%;
  }
  100% {
    right: 20%;
  }
}
@keyframes swim-2 {
  0% {
    right: -20%;
  }
  100% {
    right: 20%;
  }
}
@media screen and (max-width: 414px) {
  .content .cloud.swim-2 {
    width: 56.1px;
    height: 34.5px;
  }
}
.content .cloud.swim-3 {
  top: 60%;
  right: -10%;
  -moz-animation: swim-3 10s ease-in-out 3s infinite alternate;
  -webkit-animation: swim-3 10s ease-in-out 3s infinite alternate;
  animation: swim-3 10s ease-in-out 3s infinite alternate;
}
@-moz-keyframes swim-3 {
  0% {
    right: -10%;
  }
  100% {
    right: 30%;
  }
}
@-webkit-keyframes swim-3 {
  0% {
    right: -10%;
  }
  100% {
    right: 30%;
  }
}
@keyframes swim-3 {
  0% {
    right: -10%;
  }
  100% {
    right: 30%;
  }
}
@media screen and (max-width: 414px) {
  .content .cloud.swim-3 {
    width: 93.5px;
    height: 57.5px;
  }
}
.content .cloud.swim-4 {
  top: 72%;
  -moz-animation: swim-4 10s ease-in-out infinite alternate;
  -webkit-animation: swim-4 10s ease-in-out infinite alternate;
  animation: swim-4 10s ease-in-out infinite alternate;
}
@-moz-keyframes swim-4 {
  0% {
    left: 5%;
  }
  100% {
    left: 25%;
  }
}
@-webkit-keyframes swim-4 {
  0% {
    left: 5%;
  }
  100% {
    left: 25%;
  }
}
@keyframes swim-4 {
  0% {
    left: 5%;
  }
  100% {
    left: 25%;
  }
}
@media screen and (max-width: 414px) {
  .content .cloud.swim-4 {
    width: 65.45px;
    height: 40.25px;
  }
}
.content .cloud.swim-5 {
  top: 78%;
  -moz-animation: swim-5 25s ease-in-out infinite alternate;
  -webkit-animation: swim-5 25s ease-in-out infinite alternate;
  animation: swim-5 25s ease-in-out infinite alternate;
}
@-moz-keyframes swim-5 {
  0% {
    left: 10%;
  }
  100% {
    left: 35%;
  }
}
@-webkit-keyframes swim-5 {
  0% {
    left: 10%;
  }
  100% {
    left: 35%;
  }
}
@keyframes swim-5 {
  0% {
    left: 10%;
  }
  100% {
    left: 35%;
  }
}
@media screen and (max-width: 414px) {
  .content .cloud.swim-5 {
    width: 56.1px;
    height: 34.5px;
  }
}
.content .airplane {
  background-image: url("../images/airplane.svg");
  width: 322px;
  height: 122px;
  z-index: 6;
  top: 45%;
  right: -40%;
  -moz-animation: airplane-move 35s ease-in-out 10s infinite;
  -webkit-animation: airplane-move 35s ease-in-out 10s infinite;
  animation: airplane-move 35s ease-in-out 10s infinite;
}
@-moz-keyframes airplane-move {
  0% {
    right: -40%;
  }
  50% {
    right: 130%;
  }
  100% {
    right: 130%;
  }
}
@-webkit-keyframes airplane-move {
  0% {
    right: -40%;
  }
  50% {
    right: 130%;
  }
  100% {
    right: 130%;
  }
}
@keyframes airplane-move {
  0% {
    right: -40%;
  }
  50% {
    right: 130%;
  }
  100% {
    right: 130%;
  }
}
@media screen and (max-width: 414px) {
  .content .airplane {
    width: 112.7px;
    height: 42.7px;
  }
}
.content .airballoon {
  background-image: url("../images/airballoon.svg");
  width: 163px;
  height: 276px;
  z-index: 7;
  top: 80%;
  -moz-animation: airballoon-move 10s ease-in-out 0s infinite alternate;
  -webkit-animation: airballoon-move 10s ease-in-out 0s infinite alternate;
  animation: airballoon-move 10s ease-in-out 0s infinite alternate;
}
@-moz-keyframes airballoon-move {
  0% {
    right: 5%;
    top: 80%;
    -moz-transform: rotate(10deg);
    transform: rotate(10deg);
  }
  25% {
    right: 10%;
    top: 83%;
    -moz-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  50% {
    right: 13%;
    top: 78%;
    -moz-transform: rotate(7deg);
    transform: rotate(7deg);
  }
  75% {
    right: 10%;
    top: 83%;
    -moz-transform: rotate(-15deg);
    transform: rotate(-15deg);
  }
  100% {
    right: 2%;
    top: 80%;
    -moz-transform: rotate(8deg);
    transform: rotate(8deg);
  }
}
@-webkit-keyframes airballoon-move {
  0% {
    right: 5%;
    top: 80%;
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
  }
  25% {
    right: 10%;
    top: 83%;
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  50% {
    right: 13%;
    top: 78%;
    -webkit-transform: rotate(7deg);
    transform: rotate(7deg);
  }
  75% {
    right: 10%;
    top: 83%;
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg);
  }
  100% {
    right: 2%;
    top: 80%;
    -webkit-transform: rotate(8deg);
    transform: rotate(8deg);
  }
}
@keyframes airballoon-move {
  0% {
    right: 5%;
    top: 80%;
    -moz-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
  }
  25% {
    right: 10%;
    top: 83%;
    -moz-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  50% {
    right: 13%;
    top: 78%;
    -moz-transform: rotate(7deg);
    -ms-transform: rotate(7deg);
    -webkit-transform: rotate(7deg);
    transform: rotate(7deg);
  }
  75% {
    right: 10%;
    top: 83%;
    -moz-transform: rotate(-15deg);
    -ms-transform: rotate(-15deg);
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg);
  }
  100% {
    right: 2%;
    top: 80%;
    -moz-transform: rotate(8deg);
    -ms-transform: rotate(8deg);
    -webkit-transform: rotate(8deg);
    transform: rotate(8deg);
  }
}
@media screen and (max-width: 414px) {
  .content .airballoon {
    width: 48.9px;
    height: 82.8px;
  }
}
.content .snow {
  background-image: url("../images/snow.svg");
  width: 31px;
  height: 30px;
  z-index: 9;
}
.content .snow.swim-1 {
  opacity: 0;
  left: 5%;
  top: 30%;
  -moz-transform: scale(0.5);
  -ms-transform: scale(0.5);
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -moz-animation: snow-1 20s linear infinite;
  -webkit-animation: snow-1 20s linear infinite;
  animation: snow-1 20s linear infinite;
}
@-moz-keyframes snow-1 {
  0% {
    opacity: 0;
    left: 5%;
    top: 30%;
  }
  15% {
    opacity: 1;
    left: 30%;
    top: 50%;
  }
  30% {
    opacity: 1;
    left: 5%;
    top: 70%;
  }
  45% {
    opacity: 1;
    left: 15%;
    top: 100%;
  }
  100% {
    opacity: 0;
    left: 5%;
    top: 120%;
  }
}
@-webkit-keyframes snow-1 {
  0% {
    opacity: 0;
    left: 5%;
    top: 30%;
  }
  15% {
    opacity: 1;
    left: 30%;
    top: 50%;
  }
  30% {
    opacity: 1;
    left: 5%;
    top: 70%;
  }
  45% {
    opacity: 1;
    left: 15%;
    top: 100%;
  }
  100% {
    opacity: 0;
    left: 5%;
    top: 120%;
  }
}
@keyframes snow-1 {
  0% {
    opacity: 0;
    left: 5%;
    top: 30%;
  }
  15% {
    opacity: 1;
    left: 30%;
    top: 50%;
  }
  30% {
    opacity: 1;
    left: 5%;
    top: 70%;
  }
  45% {
    opacity: 1;
    left: 15%;
    top: 100%;
  }
  100% {
    opacity: 0;
    left: 5%;
    top: 120%;
  }
}
.content .snow.swim-2 {
  opacity: 0;
  left: 35%;
  top: 30%;
  -moz-transform: scale(0.81);
  -ms-transform: scale(0.81);
  -webkit-transform: scale(0.81);
  transform: scale(0.81);
  -moz-animation: snow-2 19s linear 2s infinite;
  -webkit-animation: snow-2 19s linear 2s infinite;
  animation: snow-2 19s linear 2s infinite;
}
@-moz-keyframes snow-2 {
  0% {
    opacity: 0;
    left: 35%;
    top: 30%;
  }
  22% {
    opacity: 1;
    left: 5%;
    top: 50%;
  }
  55% {
    opacity: 1;
    left: 30%;
    top: 70%;
  }
  77% {
    opacity: 1;
    left: 20%;
    top: 100%;
  }
  100% {
    opacity: 0;
    left: 20%;
    top: 120%;
  }
}
@-webkit-keyframes snow-2 {
  0% {
    opacity: 0;
    left: 35%;
    top: 30%;
  }
  22% {
    opacity: 1;
    left: 5%;
    top: 50%;
  }
  55% {
    opacity: 1;
    left: 30%;
    top: 70%;
  }
  77% {
    opacity: 1;
    left: 20%;
    top: 100%;
  }
  100% {
    opacity: 0;
    left: 20%;
    top: 120%;
  }
}
@keyframes snow-2 {
  0% {
    opacity: 0;
    left: 35%;
    top: 30%;
  }
  22% {
    opacity: 1;
    left: 5%;
    top: 50%;
  }
  55% {
    opacity: 1;
    left: 30%;
    top: 70%;
  }
  77% {
    opacity: 1;
    left: 20%;
    top: 100%;
  }
  100% {
    opacity: 0;
    left: 20%;
    top: 120%;
  }
}
.content .snow.swim-3 {
  opacity: 0;
  left: 33%;
  top: 30%;
  -moz-animation: snow-3 16s linear infinite;
  -webkit-animation: snow-3 16s linear infinite;
  animation: snow-3 16s linear infinite;
}
@-moz-keyframes snow-3 {
  0% {
    opacity: 0;
    left: 33%;
    top: 30%;
  }
  15% {
    opacity: 1;
    left: 21%;
    top: 50%;
  }
  30% {
    opacity: 1;
    left: 30%;
    top: 70%;
  }
  45% {
    opacity: 1;
    left: 23%;
    top: 100%;
  }
  100% {
    opacity: 0;
    left: 23%;
    top: 120%;
  }
}
@-webkit-keyframes snow-3 {
  0% {
    opacity: 0;
    left: 33%;
    top: 30%;
  }
  15% {
    opacity: 1;
    left: 21%;
    top: 50%;
  }
  30% {
    opacity: 1;
    left: 30%;
    top: 70%;
  }
  45% {
    opacity: 1;
    left: 23%;
    top: 100%;
  }
  100% {
    opacity: 0;
    left: 23%;
    top: 120%;
  }
}
@keyframes snow-3 {
  0% {
    opacity: 0;
    left: 33%;
    top: 30%;
  }
  15% {
    opacity: 1;
    left: 21%;
    top: 50%;
  }
  30% {
    opacity: 1;
    left: 30%;
    top: 70%;
  }
  45% {
    opacity: 1;
    left: 23%;
    top: 100%;
  }
  100% {
    opacity: 0;
    left: 23%;
    top: 120%;
  }
}
.content .snow.swim-4 {
  opacity: 0;
  left: 65%;
  top: 30%;
  -moz-transform: scale(0.65);
  -ms-transform: scale(0.65);
  -webkit-transform: scale(0.65);
  transform: scale(0.65);
  -moz-animation: snow-4 15s linear 1s infinite;
  -webkit-animation: snow-4 15s linear 1s infinite;
  animation: snow-4 15s linear 1s infinite;
}
@-moz-keyframes snow-4 {
  0% {
    opacity: 0;
    left: 65%;
    top: 30%;
  }
  25% {
    opacity: 1;
    left: 35%;
    top: 50%;
  }
  50% {
    opacity: 1;
    left: 60%;
    top: 70%;
  }
  75% {
    opacity: 1;
    left: 30%;
    top: 100%;
  }
  100% {
    opacity: 0;
    left: 30%;
    top: 120%;
  }
}
@-webkit-keyframes snow-4 {
  0% {
    opacity: 0;
    left: 65%;
    top: 30%;
  }
  25% {
    opacity: 1;
    left: 35%;
    top: 50%;
  }
  50% {
    opacity: 1;
    left: 60%;
    top: 70%;
  }
  75% {
    opacity: 1;
    left: 30%;
    top: 100%;
  }
  100% {
    opacity: 0;
    left: 30%;
    top: 120%;
  }
}
@keyframes snow-4 {
  0% {
    opacity: 0;
    left: 65%;
    top: 30%;
  }
  25% {
    opacity: 1;
    left: 35%;
    top: 50%;
  }
  50% {
    opacity: 1;
    left: 60%;
    top: 70%;
  }
  75% {
    opacity: 1;
    left: 30%;
    top: 100%;
  }
  100% {
    opacity: 0;
    left: 30%;
    top: 120%;
  }
}
.content .snow.swim-5 {
  opacity: 0;
  left: 60%;
  top: 30%;
  -moz-animation: snow-5 14s linear infinite;
  -webkit-animation: snow-5 14s linear infinite;
  animation: snow-5 14s linear infinite;
}
@-moz-keyframes snow-5 {
  0% {
    opacity: 0;
    left: 60%;
    top: 30%;
  }
  22% {
    opacity: 1;
    left: 78%;
    top: 50%;
  }
  55% {
    opacity: 1;
    left: 63%;
    top: 70%;
  }
  77% {
    opacity: 1;
    left: 75%;
    top: 100%;
  }
  100% {
    opacity: 0;
    left: 75%;
    top: 120%;
  }
}
@-webkit-keyframes snow-5 {
  0% {
    opacity: 0;
    left: 60%;
    top: 30%;
  }
  22% {
    opacity: 1;
    left: 78%;
    top: 50%;
  }
  55% {
    opacity: 1;
    left: 63%;
    top: 70%;
  }
  77% {
    opacity: 1;
    left: 75%;
    top: 100%;
  }
  100% {
    opacity: 0;
    left: 75%;
    top: 120%;
  }
}
@keyframes snow-5 {
  0% {
    opacity: 0;
    left: 60%;
    top: 30%;
  }
  22% {
    opacity: 1;
    left: 78%;
    top: 50%;
  }
  55% {
    opacity: 1;
    left: 63%;
    top: 70%;
  }
  77% {
    opacity: 1;
    left: 75%;
    top: 100%;
  }
  100% {
    opacity: 0;
    left: 75%;
    top: 120%;
  }
}
.content .snow.swim-6 {
  opacity: 0;
  left: 85%;
  top: 30%;
  -moz-transform: scale(0.43);
  -ms-transform: scale(0.43);
  -webkit-transform: scale(0.43);
  transform: scale(0.43);
  -moz-animation: snow-6 20s linear infinite;
  -webkit-animation: snow-6 20s linear infinite;
  animation: snow-6 20s linear infinite;
}
@-moz-keyframes snow-6 {
  0% {
    opacity: 0;
    left: 85%;
    top: 30%;
  }
  20% {
    opacity: 1;
    left: 65%;
    top: 50%;
  }
  40% {
    opacity: 1;
    left: 88%;
    top: 70%;
  }
  65% {
    opacity: 1;
    left: 70%;
    top: 100%;
  }
  100% {
    opacity: 0;
    left: 70%;
    top: 120%;
  }
}
@-webkit-keyframes snow-6 {
  0% {
    opacity: 0;
    left: 85%;
    top: 30%;
  }
  20% {
    opacity: 1;
    left: 65%;
    top: 50%;
  }
  40% {
    opacity: 1;
    left: 88%;
    top: 70%;
  }
  65% {
    opacity: 1;
    left: 70%;
    top: 100%;
  }
  100% {
    opacity: 0;
    left: 70%;
    top: 120%;
  }
}
@keyframes snow-6 {
  0% {
    opacity: 0;
    left: 85%;
    top: 30%;
  }
  20% {
    opacity: 1;
    left: 65%;
    top: 50%;
  }
  40% {
    opacity: 1;
    left: 88%;
    top: 70%;
  }
  65% {
    opacity: 1;
    left: 70%;
    top: 100%;
  }
  100% {
    opacity: 0;
    left: 70%;
    top: 120%;
  }
}
.content .snow.swim-7 {
  opacity: 0;
  left: 73%;
  top: 30%;
  -moz-animation: snow-7 18s linear 3s infinite;
  -webkit-animation: snow-7 18s linear 3s infinite;
  animation: snow-7 18s linear 3s infinite;
}
@-moz-keyframes snow-7 {
  0% {
    opacity: 0;
    left: 73%;
    top: 30%;
  }
  30% {
    opacity: 1;
    left: 48%;
    top: 50%;
  }
  60% {
    opacity: 1;
    left: 69%;
    top: 70%;
  }
  90% {
    opacity: 1;
    left: 45%;
    top: 100%;
  }
  100% {
    opacity: 0;
    left: 45%;
    top: 120%;
  }
}
@-webkit-keyframes snow-7 {
  0% {
    opacity: 0;
    left: 73%;
    top: 30%;
  }
  30% {
    opacity: 1;
    left: 48%;
    top: 50%;
  }
  60% {
    opacity: 1;
    left: 69%;
    top: 70%;
  }
  90% {
    opacity: 1;
    left: 45%;
    top: 100%;
  }
  100% {
    opacity: 0;
    left: 45%;
    top: 120%;
  }
}
@keyframes snow-7 {
  0% {
    opacity: 0;
    left: 73%;
    top: 30%;
  }
  30% {
    opacity: 1;
    left: 48%;
    top: 50%;
  }
  60% {
    opacity: 1;
    left: 69%;
    top: 70%;
  }
  90% {
    opacity: 1;
    left: 45%;
    top: 100%;
  }
  100% {
    opacity: 0;
    left: 45%;
    top: 120%;
  }
}
.content .snow.swim-8 {
  opacity: 0;
  left: 44%;
  top: 30%;
  -moz-transform: scale(0.88);
  -ms-transform: scale(0.88);
  -webkit-transform: scale(0.88);
  transform: scale(0.88);
  -moz-animation: snow-8 17s linear 3s infinite;
  -webkit-animation: snow-8 17s linear 3s infinite;
  animation: snow-8 17s linear 3s infinite;
}
@-moz-keyframes snow-8 {
  0% {
    opacity: 0;
    left: 64%;
    top: 30%;
  }
  15% {
    opacity: 1;
    left: 40%;
    top: 50%;
  }
  30% {
    opacity: 1;
    left: 58%;
    top: 70%;
  }
  45% {
    opacity: 1;
    left: 38%;
    top: 100%;
  }
  100% {
    opacity: 0;
    left: 38%;
    top: 120%;
  }
}
@-webkit-keyframes snow-8 {
  0% {
    opacity: 0;
    left: 64%;
    top: 30%;
  }
  15% {
    opacity: 1;
    left: 40%;
    top: 50%;
  }
  30% {
    opacity: 1;
    left: 58%;
    top: 70%;
  }
  45% {
    opacity: 1;
    left: 38%;
    top: 100%;
  }
  100% {
    opacity: 0;
    left: 38%;
    top: 120%;
  }
}
@keyframes snow-8 {
  0% {
    opacity: 0;
    left: 64%;
    top: 30%;
  }
  15% {
    opacity: 1;
    left: 40%;
    top: 50%;
  }
  30% {
    opacity: 1;
    left: 58%;
    top: 70%;
  }
  45% {
    opacity: 1;
    left: 38%;
    top: 100%;
  }
  100% {
    opacity: 0;
    left: 38%;
    top: 120%;
  }
}
.content .snow.swim-9 {
  opacity: 0;
  left: 110%;
  top: 30%;
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
  -moz-animation: snow-9 15s linear 2s infinite;
  -webkit-animation: snow-9 15s linear 2s infinite;
  animation: snow-9 15s linear 2s infinite;
}
@-moz-keyframes snow-9 {
  0% {
    opacity: 0;
    left: 110%;
    top: 30%;
  }
  24% {
    opacity: 1;
    left: 90%;
    top: 50%;
  }
  48% {
    opacity: 1;
    left: 102%;
    top: 70%;
  }
  88% {
    opacity: 1;
    left: 85%;
    top: 100%;
  }
  100% {
    opacity: 0;
    left: 85%;
    top: 120%;
  }
}
@-webkit-keyframes snow-9 {
  0% {
    opacity: 0;
    left: 110%;
    top: 30%;
  }
  24% {
    opacity: 1;
    left: 90%;
    top: 50%;
  }
  48% {
    opacity: 1;
    left: 102%;
    top: 70%;
  }
  88% {
    opacity: 1;
    left: 85%;
    top: 100%;
  }
  100% {
    opacity: 0;
    left: 85%;
    top: 120%;
  }
}
@keyframes snow-9 {
  0% {
    opacity: 0;
    left: 110%;
    top: 30%;
  }
  24% {
    opacity: 1;
    left: 90%;
    top: 50%;
  }
  48% {
    opacity: 1;
    left: 102%;
    top: 70%;
  }
  88% {
    opacity: 1;
    left: 85%;
    top: 100%;
  }
  100% {
    opacity: 0;
    left: 85%;
    top: 120%;
  }
}
.content .snow.swim-10 {
  opacity: 0;
  left: 81%;
  top: 30%;
  -moz-transform: scale(0.35);
  -ms-transform: scale(0.35);
  -webkit-transform: scale(0.35);
  transform: scale(0.35);
  -moz-animation: snow-10 16s linear 4s infinite;
  -webkit-animation: snow-10 16s linear 4s infinite;
  animation: snow-10 16s linear 4s infinite;
}
@-moz-keyframes snow-10 {
  0% {
    opacity: 0;
    left: 81%;
    top: 30%;
  }
  15% {
    opacity: 1;
    left: 96%;
    top: 50%;
  }
  30% {
    opacity: 1;
    left: 82%;
    top: 70%;
  }
  45% {
    opacity: 1;
    left: 94%;
    top: 100%;
  }
  100% {
    opacity: 0;
    left: 78%;
    top: 120%;
  }
}
@-webkit-keyframes snow-10 {
  0% {
    opacity: 0;
    left: 81%;
    top: 30%;
  }
  15% {
    opacity: 1;
    left: 96%;
    top: 50%;
  }
  30% {
    opacity: 1;
    left: 82%;
    top: 70%;
  }
  45% {
    opacity: 1;
    left: 94%;
    top: 100%;
  }
  100% {
    opacity: 0;
    left: 78%;
    top: 120%;
  }
}
@keyframes snow-10 {
  0% {
    opacity: 0;
    left: 81%;
    top: 30%;
  }
  15% {
    opacity: 1;
    left: 96%;
    top: 50%;
  }
  30% {
    opacity: 1;
    left: 82%;
    top: 70%;
  }
  45% {
    opacity: 1;
    left: 94%;
    top: 100%;
  }
  100% {
    opacity: 0;
    left: 78%;
    top: 120%;
  }
}
.content .angry {
  background-image: url("../images/angry.gif");
  width: 60px;
  height: 57.5px;
}
@media screen and (max-width: 414px) {
  .content .angry {
    width: 40px;
    height: 38.33333px;
  }
}
.content .haha {
  background-image: url("../images/haha.gif");
  width: 58px;
  height: 57.5px;
}
@media screen and (max-width: 414px) {
  .content .haha {
    width: 38.66667px;
    height: 38.33333px;
  }
}
.content .like {
  background-image: url("../images/like.gif");
  width: 57.5px;
  height: 57.5px;
}
@media screen and (max-width: 414px) {
  .content .like {
    width: 38.33333px;
    height: 38.33333px;
  }
}
.content .love {
  background-image: url("../images/love.gif");
  width: 57.5px;
  height: 57.5px;
}
@media screen and (max-width: 414px) {
  .content .love {
    width: 38.33333px;
    height: 38.33333px;
  }
}
.content .sad {
  background-image: url("../images/sad.gif");
  width: 60px;
  height: 57.5px;
}
@media screen and (max-width: 414px) {
  .content .sad {
    width: 40px;
    height: 38.33333px;
  }
}
.content .wow {
  background-image: url("../images/wow.gif");
  width: 58.5px;
  height: 57.5px;
}
@media screen and (max-width: 414px) {
  .content .wow {
    width: 39px;
    height: 38.33333px;
  }
}

.snowground {
  height: 300px;
  margin-top: -70px;
  z-index: 1;
}
@media screen and (max-width: 414px) {
  .snowground {
    height: 78px;
    margin-top: -18.2px;
  }
}
.snowground .shadowtree {
  background-image: url("../images/shadowtree.svg");
  width: 1440px;
  height: 304px;
  left: 0;
  bottom: 100px;
}
@media screen and (max-width: 414px) {
  .snowground .shadowtree {
    width: 100vw;
    height: 79.04px;
    bottom: 26px;
  }
}
.snowground .xmastree.bottom {
  background-color: #725E4B;
  width: 91px;
  height: 235px;
  -moz-box-shadow: 0 78.33333px 0 #685444 inset;
  -webkit-box-shadow: 0 78.33333px 0 #685444 inset;
  box-shadow: 0 78.33333px 0 #685444 inset;
  margin-left: -45.5px;
  left: 50%;
  z-index: 2;
}
@media screen and (max-width: 414px) {
  .snowground .xmastree.bottom {
    width: 23.66px;
    height: 61.1px;
    -moz-box-shadow: 0 30.55px 0 #685444 inset;
    -webkit-box-shadow: 0 30.55px 0 #685444 inset;
    box-shadow: 0 30.55px 0 #685444 inset;
    margin-left: -11.83px;
  }
}
.snowground .bgtree {
  background-image: url("../images/tree_single.svg");
  width: 36px;
  height: 47px;
  left: 50%;
}
@media screen and (max-width: 414px) {
  .snowground .bgtree {
    width: 9.36px;
    height: 12.22px;
  }
}
.snowground .snowman {
  background-image: url("../images/snowman.svg");
  width: 370px;
  height: 251px;
  left: 9%;
  bottom: 5px;
  z-index: 6;
}
@media screen and (max-width: 768px) {
  .snowground .snowman {
    width: 235px;
    left: 0;
  }
}
@media screen and (max-width: 414px) {
  .snowground .snowman {
    width: 96.2px;
    height: 65.26px;
  }
}
.snowground .snowbg {
  background-image: url("../images/snowground.png");
  width: 100%;
  height: 100%;
  background-position: center bottom;
  background-size: cover;
}
@media screen and (max-width: 414px) {
  .snowground .snowbg {
    width: 100vw;
  }
}
.snowground .giftbox {
  width: 100%;
  z-index: 5;
}
.snowground .giftbox .gift {
  left: 50%;
  top: 130px;
  z-index: 2;
}
.snowground .giftbox .gift:nth-child(1) {
  left: 25%;
  top: 95px;
  -moz-transform: scale(0.85);
  -ms-transform: scale(0.85);
  -webkit-transform: scale(0.85);
  transform: scale(0.85);
}
@media screen and (max-width: 414px) {
  .snowground .giftbox .gift:nth-child(1) {
    top: 24.7px;
  }
}
.snowground .giftbox .gift:nth-child(2) {
  left: 30%;
  top: 120px;
}
@media screen and (max-width: 414px) {
  .snowground .giftbox .gift:nth-child(2) {
    top: 31.2px;
  }
}
.snowground .giftbox .gift:nth-child(3) {
  left: 38%;
  top: 120px;
}
@media screen and (max-width: 414px) {
  .snowground .giftbox .gift:nth-child(3) {
    top: 31.2px;
  }
}
.snowground .giftbox .gift:nth-child(4) {
  left: 43%;
  top: 125px;
}
@media screen and (max-width: 414px) {
  .snowground .giftbox .gift:nth-child(4) {
    top: 32.5px;
  }
}
.snowground .giftbox .gift:nth-child(5) {
  left: 55%;
  top: 108px;
}
@media screen and (max-width: 414px) {
  .snowground .giftbox .gift:nth-child(5) {
    top: 28.08px;
  }
}
.snowground .giftbox .gift:nth-child(6) {
  left: 65%;
  top: 100px;
}
@media screen and (max-width: 414px) {
  .snowground .giftbox .gift:nth-child(6) {
    top: 26px;
  }
}
.snowground .giftbox .gift:nth-child(7) {
  left: 69%;
  top: 122px;
  -moz-transform: scale(0.75);
  -ms-transform: scale(0.75);
  -webkit-transform: scale(0.75);
  transform: scale(0.75);
}
@media screen and (max-width: 414px) {
  .snowground .giftbox .gift:nth-child(7) {
    top: 31.72px;
  }
}
.snowground .giftbox .gift:nth-child(8) {
  left: 60%;
  top: 127px;
}
@media screen and (max-width: 414px) {
  .snowground .giftbox .gift:nth-child(8) {
    top: 33.02px;
  }
}
.snowground .giftbox .gift:nth-child(9) {
  left: 49%;
  top: 120px;
  -moz-transform: scale(1.3);
  -ms-transform: scale(1.3);
  -webkit-transform: scale(1.3);
  transform: scale(1.3);
}
@media screen and (max-width: 414px) {
  .snowground .giftbox .gift:nth-child(9) {
    top: 31.2px;
  }
}
.snowground .giftbox .giftred {
  background-image: url("../images/gift_red.svg");
  width: 114px;
  height: 137px;
}
@media screen and (max-width: 414px) {
  .snowground .giftbox .giftred {
    width: 29.64px;
    height: 35.62px;
  }
}
.snowground .giftbox .giftgreen {
  background-image: url("../images/gift_green.svg");
  width: 108px;
  height: 130px;
}
@media screen and (max-width: 414px) {
  .snowground .giftbox .giftgreen {
    width: 28.08px;
    height: 33.8px;
  }
}
.snowground .shadowground {
  width: 789px;
  height: 110px;
  background-color: #E8E8E8;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  border-radius: 100%;
  margin-left: -394.5px;
  left: 50%;
  top: 170px;
  z-index: 1;
}
@media screen and (max-width: 414px) {
  .snowground .shadowground {
    width: 205.14px;
    height: 28.6px;
    margin-left: -102.57px;
    top: 44.2px;
  }
}

.btnline {
  background-color: #fff;
  width: 100%;
  margin: -2px 0 0;
  padding: 10px 30px 10px;
  position: fixed;
  bottom: 0;
  z-index: 999;
  -moz-box-shadow: 0 -5px 3px rgba(0, 0, 0, 0.25);
  -webkit-box-shadow: 0 -5px 3px rgba(0, 0, 0, 0.25);
  box-shadow: 0 -5px 3px rgba(0, 0, 0, 0.25);
}
.btnline a {
  width: 100%;
  background-color: #004a9a;
  -moz-box-shadow: 0 -4px 0 rgba(0, 0, 0, 0.26) inset;
  -webkit-box-shadow: 0 -4px 0 rgba(0, 0, 0, 0.26) inset;
  box-shadow: 0 -4px 0 rgba(0, 0, 0, 0.26) inset;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  color: #fff;
  font-size: 2.6rem;
  font-weight: bold;
  display: block;
  padding: 20px 0;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .btnline a {
    font-size: 1.7rem;
  }
}

#lightbox {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  position: fixed;
  top: 0;
  z-index: 9999;
}
#lightbox .lightbox {
  background: url("../images/gift-ground.png") no-repeat center right scroll #FFFFF9;
  border: 5px solid #C3EDC6;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  width: 30%;
  min-height: 45%;
  padding: 30px 25px;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  position: relative;
  left: 50%;
  top: 50%;
}
#lightbox .lightbox::before {
  content: '';
  background-image: url("../images/hat.png");
  width: 78px;
  height: 72px;
  left: -36px;
  top: -48px;
}
@media screen and (max-width: 768px) {
  #lightbox .lightbox {
    width: 50%;
    min-height: 24%;
    max-height: 75%;
  }
}
@media screen and (max-width: 414px) {
  #lightbox .lightbox {
    width: 85%;
  }
}
#lightbox .lightbox .detail {
  max-height: 400px;
  overflow: scroll;
}
#lightbox .lightbox .name {
  color: #0F62C4;
  font-size: 1.8rem;
  margin-bottom: 20px;
}
#lightbox .lightbox .info {
  color: #FF1851;
  font-size: 1.7rem;
  line-height: 1.6;
  padding-right: 85px;
}
#lightbox .lightbox .info .fa {
  display: none;
}
#lightbox.hidden {
  display: none;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -moz-transition: all 3s;
  -o-transition: all 3s;
  -webkit-transition: all 3s;
  transition: all 3s;
}
#lightbox .closebtn {
  color: #444;
  position: absolute;
  right: 15px;
  top: 10px;
}
#lightbox .closebtn .fa {
  font-size: 26px;
}