.dj-theme .dj-theme_top{height:100px;cursor:pointer;position:relative}.dj-theme .dj-theme_top .dj-theme_top_close{position:absolute;right:50%;margin-right:-600px;text-align:center;width:16px;height:16px;font-size:16px;line-height:16px;cursor:pointer;margin-top:11px;color:rgba(255,255,255,0.6)}.dj-theme .dj-theme_left{position:fixed;top:255px;right:50%;z-index:1000;margin-right:620px;width:200px;height:460px;cursor:pointer}.dj-theme .dj-theme_right{position:fixed;top:258px;left:50%;z-index:1000;margin-left:660px;width:144px;height:460px;cursor:pointer}

/* html,
body {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  border-collapse: collapse;
} */
/* body {
  zoom: 0.5;
} */

.scale0_7 {
  position: absolute;
  right: -230px;
  bottom: -190px;
  -webkit-transform: scale(0.7);
  transform: scale(0.7);
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}

.bp-line {
  pointer-events: none;
  z-index: 1;
  position: relative;
  height: 100%;
  width: 6px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAQCAYAAAA1Qw7OAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjU0MTk3MERBQjBEMjExRTQ5NTM5QzExRDI5RENDODc4IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjU0MTk3MERCQjBEMjExRTQ5NTM5QzExRDI5RENDODc4Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTQxOTcwRDhCMEQyMTFFNDk1MzlDMTFEMjlEQ0M4NzgiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NTQxOTcwRDlCMEQyMTFFNDk1MzlDMTFEMjlEQ0M4NzgiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6hfvZKAAABJUlEQVR42hyQTU4DMQyFn+0knc6UoqpILJC4Altuw4IrcYsehhuwQagtTAtqqappEhsPi0jxs7/nH3p+aF8e78PT3SLO7Kjl52yvq7dhxadB86ZXqww0cyEzqD/jqpSPZ9XvY0VsyFXUrPA6QoUH277g4mo355jVlAmUp5Hz70mxP1RqOk7/RGTILJEKgPXWqYpQvE8IbpYCWfJPHpQ2fQ5RIMG9OAh46omTKXb7EsQ1FrdKkWSSCDedEAEMxegEEY/bKZlk0KIRi6yBmYhKMe6uBTECy5bHUc0B4HSufCmKq2XAJHF0G+OxuS8oX30ljoRuwTIOMxImRuFzX7Dz7eOEeTZxyq9gMZAOmfCxybhVWJsojQSx39SrkH3l93XRw1nxJ8AAXOGNjYocwDQAAAAASUVORK5CYII=) repeat-y center;
  -webkit-transform-origin: center top;
  transform-origin: center top;
  -webkit-transition: height 5s linear 0.5s;
  transition: height 5s linear 0.5s;
}

.bp-line.line-shake {
  -webkit-animation: lineShake 2s ease-in-out infinite alternate;
  animation: lineShake 2s ease-in-out infinite alternate;
}

.bp-line.hide::after {
  display: none;
}

.bp-line::after {
  position: absolute;
  bottom: -17px;
  margin-left: -12px;
  width: 30px;
  height: 34px;
  content: "";
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAiCAYAAABIiGl0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA1ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0iMDQzNTUwQTcyREJGMjY4RkI5RTM1M0E1NjAwMjZBMTEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RDMwN0NFQTdCMEQxMTFFNEJGNURCQkMxNDJERjg4MzEiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RDMwN0NFQTZCMEQxMTFFNEJGNURCQkMxNDJERjg4MzEiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoyQzAyRTQwN0NDQjBFNDExQkI1NkE2Q0FBRDU1QzJERSIgc3RSZWY6ZG9jdW1lbnRJRD0iMDQzNTUwQTcyREJGMjY4RkI5RTM1M0E1NjAwMjZBMTEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4g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) no-repeat;
  -webkit-animation: shining 1.2s cubic-bezier(0.14, 0.43, 0.87, 0.56) infinite;
  animation: shining 1.2s cubic-bezier(0.14, 0.43, 0.87, 0.56) infinite;
}

.bp {
  position: relative;
  width: 30px;
  height: 60px;
  font-family: "microsoft yahei";
  background: #8f0006;
  /* Old browsers */
  /* Chrome10+,Safari5.1+ */
  /* IE10+ */
  background: -webkit-gradient(linear, left top, right top, from(#8f0006), color-stop(60%, #f37c5e), to(#bf0f1a));
  background: linear-gradient(to right, #8f0006 0%, #f37c5e 60%, #bf0f1a 100%);
  /* W3C */
}

.bp-left,
.bp-left .bp {
  -webkit-transform-origin: 100% -10%;
  transform-origin: 100% -10%;
}

.bp-right,
.bp-right .bp {
  -webkit-transform-origin: 0 -10%;
  transform-origin: 0 -10%;
}

.bp-left,
.bp-right {
  position: absolute;
  -webkit-animation: 2s ease-in-out infinite alternate;
  animation: 2s ease-in-out infinite alternate;
}

.bg-ani-name1 {
  -webkit-animation-name: shake1;
  animation-name: shake1;
}

.bg-ani-name2 {
  -webkit-animation-name: shake2;
  animation-name: shake2;
}

.bg-delay0 {
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
}

.bg-delay1 {
  -webkit-animation-duration: 1.6s;
  animation-duration: 1.6s;
}

.bg-delay2 {
  -webkit-animation-duration: 1.7s;
  animation-duration: 1.7s;
}

.bg-delay3 {
  -webkit-animation-duration: 1.8s;
  animation-duration: 1.8s;
}

.bg-delay4 {
  -webkit-animation-duration: 1.9s;
  animation-duration: 1.9s;
}

.bg-delay5 {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.bp-item {
  opacity: 1;
}

.bp-wrap {
  position: relative;
}

.bang {
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150px;
  height: 150px;
  margin-left: -75px;
  margin-top: -90px;
  /* FF3.6+ */
  /* Chrome10+,Safari5.1+ */
  /* IE10+ */
  background: radial-gradient(
    ellipse at center,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 1) 15%,
    rgba(231, 179, 80, 1) 45%,
    rgba(231, 179, 80, 1) 45%,
    rgba(255, 255, 255, 0) 75%
  );
  /* W3C */
}

.bp-left .bang {
  left: 25%;
}

.bp-right .bang {
  left: 75%;
}

.bp-left .top {
  top: -12px;
}

.bp-left .bottom {
  bottom: -10.5px;
  border-bottom-left-radius: 50% 100%;
  border-bottom-right-radius: 50% 100%;
}

.bp-left .side {
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
}

.bp-left .side i {
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
}

.bp-left .side i {
  top: -35%;
}

.bp-left .down1 i {
  top: -30%;
}

.bp-left .down2 i {
  top: -15%;
}

.bp-left .text {
  top: 62%;
  z-index: 1;
}

.bp-left .up {
  top: 5px;
  z-index: 1;
}

.bp-left .down1 {
  bottom: -3px;
  z-index: 1;
}

.bp-left .down2 {
  bottom: 5px;
  z-index: 1;
}

.bp-right .top {
  bottom: -10.5px;
}

.bp-right .bottom {
  top: -10.5px;
  border-top-left-radius: 50% 100%;
  border-top-right-radius: 50% 100%;
}

.bp-right .side {
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
}

.bp-right .side i {
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
}

.bp-right .side i {
  top: 35%;
}

.bp-right .down1 i {
  top: 30%;
}

.bp-right .down2 i {
  top: 15%;
}

.bp-right .text {
  bottom: 55%;
  z-index: 1;
}

.bp-right .up {
  top: -4px;
  z-index: 1;
}

.bp-right .down1 {
  bottom: 6px;
  z-index: 1;
}

.bp-right .down2 {
  bottom: 11px;
}

.bp .top {
  position: absolute;
  left: 0;
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 3px;
  border-radius: 50%;
  z-index: 2;
  background: #cd1922;
  /* Old browsers */
  /* Chrome10+,Safari5.1+ */
  /* IE10+ */
  background: -webkit-gradient(linear, left top, right top, from(#cd1922), to(#b40709));
  background: linear-gradient(to right, #cd1922 0%, #b40709 100%);
  /* W3C */
}

.bp .top i {
  display: block;
  height: 15px;
  border-radius: 50%;
  background: #8d060a;
  /* Old browsers */
  /* Chrome10+,Safari5.1+ */
  /* IE10+ */
  background: -webkit-gradient(linear, left top, right top, from(#8d060a), to(#e92322));
  background: linear-gradient(to right, #8d060a 0%, #e92322 100%);
  /* W3C */
}

.bp .side {
  position: absolute;
  width: 100%;
  height: 15px;
  overflow: hidden;
  background: #989007;
  /* Old browsers */
  /* Chrome10+,Safari5.1+ */
  /* IE10+ */
  background: -webkit-gradient(linear, left top, right top, from(#989007), color-stop(60%, #feff7d), to(#d0c801));
  background: linear-gradient(to right, #989007 0%, #feff7d 60%, #d0c801 100%);
  /* W3C */
}

.bp .side i {
  position: relative;
  display: block;
  height: 100%;
  background: #8f0006;
  /* Old browsers */
  /* Chrome10+,Safari5.1+ */
  /* IE10+ */
  background: -webkit-gradient(linear, left top, right top, from(#8f0006), color-stop(60%, #f37c5e), to(#bf0f1a));
  background: linear-gradient(to right, #8f0006 0%, #f37c5e 60%, #bf0f1a 100%);
  /* W3C */
}

.bp .bottom {
  position: absolute;
  width: 100%;
  height: 10.5px;
  background: #8f0006;
  /* Old browsers */
  /* Chrome10+,Safari5.1+ */
  /* IE10+ */
  background: -webkit-gradient(linear, left top, right top, from(#8f0006), color-stop(60%, #f37c5e), to(#bf0f1a));
  background: linear-gradient(to right, #8f0006 0%, #f37c5e 60%, #bf0f1a 100%);
  /* W3C */
}

.bp .text {
  position: absolute;
  left: 50%;
  width: 13px;
  height: 13px;
  margin-top: -9px;
  margin-left: -9px;
  text-align: center;
  font-size: 12px;
  padding: 2px;
  font-weight: bold;
}

.bp .text .out {
  position: absolute;
  top: -2px;
  left: -2px;
  width: 100%;
  height: 100%;
  border: 2px #e42021 solid;
  background-color: #fbee01;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

.bp .text .mid {
  display: block;
  height: 13px;
  padding: 2px;
}

.bp .text .in {
  display: block;
  height: 13px;
  background-color: #f62022;
}

.bp .text span {
  position: relative;
  display: block;
  line-height: 1;
  z-index: 1;
  color: #000;
}

.hold-forwards {
  -webkit-animation-fill-mode: forwards !important;
  animation-fill-mode: forwards !important;
}

.bp-fly {
  -webkit-animation: flying 0.4s ease-out 0.4s;
  animation: flying 0.4s ease-out 0.4s;
}

.on.bp-item {
  z-index: 1;
}

.on .bp {
  -webkit-animation: easeOut 0.2s ease-in;
  animation: easeOut 0.2s ease-in;
}

.on .bang1 {
  -webkit-animation: bang1 0.4s ease-out;
  animation: bang1 0.4s ease-out;
}

.on .bang2 {
  -webkit-animation: bang2 0.4s ease-out;
  animation: bang2 0.4s ease-out;
}

.on .bang3 {
  -webkit-animation: bang3 0.4s ease-out;
  animation: bang3 0.4s ease-out;
}

.on .bang4 {
  -webkit-animation: bang4 0.4s ease-out;
  animation: bang4 0.4s ease-out;
}

.dear-joy {
  position: absolute;
  right: 40px;
  bottom: 25px;
  z-index: 5002;
}

.dear-joy2 {
  position: absolute;
  right: 20px;
  bottom: 30px;
  z-index: 8;
  opacity: 0;
  pointer-events: none;
}

.dear-joy2.fadeIn {
  -webkit-animation: fadeIn 1s linear 1s;
  animation: fadeIn 1s linear 1s;
}

.dear-joy .joy-wrap {
  position: relative;
}

.dear-joy .body {
  position: relative;
  width: 140px;
  height: 273px;
  background: url(/61190776f29c0b60ada3830f3ad23e64.png) no-repeat;
  z-index: 1;
}

.dear-joy2 .body {
  position: relative;
  width: 140px;
  height: 273px;
  background: url(/61190776f29c0b60ada3830f3ad23e64.png) no-repeat;
  z-index: 1;
}

.dear-joy .left-ear {
  position: absolute;
  left: -34px;
  top: 33px;
  width: 44px;
  height: 38px;
  background: none /*url(../images/erduo2.png) no-repeat*/;
  -webkit-transform-origin: right;
  transform-origin: right;
}

.dear-joy .right-ear {
  position: absolute;
  left: 124px;
  top: 23px;
  width: 54px;
  height: 41px;
  background: none /*url(../images/erduo1.png) no-repeat*/;
  -webkit-transform-origin: left;
  transform-origin: left;
}

.dear-joy .left-hand {
  position: absolute;
  left: -32px;
  top: 130px;
  width: 88px;
  height: 38px;
  background: none /*url(../images/shou2.png) no-repeat*/;
  -webkit-transform-origin: right;
  transform-origin: right;
}

.dear-joy .right-hand {
  position: absolute;
  left: 87px;
  top: 119px;
  width: 75px;
  height: 51px;
  background: none /*url(../images/shou1.png) no-repeat*/;
  -webkit-transform-origin: left;
  transform-origin: left;
}

.dear-joy .sticks {
  position: absolute;
  left: -52px;
  top: 6px;
  width: 60px;
  height: 4px;
  background-color: #4c290d;
  border-radius: 4px;
  -webkit-transform-origin: right;
  transform-origin: right;
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
}

.dear-joy .sticks::after {
  position: absolute;
  bottom: -12px;
  margin-left: -12px;
  width: 30px;
  height: 34px;
  content: "";
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAiCAYAAABIiGl0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA1ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0iMDQzNTUwQTcyREJGMjY4RkI5RTM1M0E1NjAwMjZBMTEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RDMwN0NFQTdCMEQxMTFFNEJGNURCQkMxNDJERjg4MzEiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RDMwN0NFQTZCMEQxMTFFNEJGNURCQkMxNDJERjg4MzEiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoyQzAyRTQwN0NDQjBFNDExQkI1NkE2Q0FBRDU1QzJERSIgc3RSZWY6ZG9jdW1lbnRJRD0iMDQzNTUwQTcyREJGMjY4RkI5RTM1M0E1NjAwMjZBMTEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4g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) no-repeat;
  -webkit-animation: shining 1.2s cubic-bezier(0.14, 0.43, 0.87, 0.56) infinite;
  animation: shining 1.2s cubic-bezier(0.14, 0.43, 0.87, 0.56) infinite;
}

.dear-joy .shadow,
.dear-joy2 .shadow {
  position: absolute;
  left: 18px;
  bottom: -11px;
  width: 100px;
  height: 32px;
  background-color: #000;
  border-radius: 50%;
  opacity: 0.5;
}

.dear-joy2 .shadow {
  left: 38px;
}

.dear-joy .click-title {
  position: absolute;
  top: -75px;
  left: 5px;
  width: 95px;
  height: 71px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAF8AAABHCAYAAABhyZsDAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA1ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0iOUEzQTk1QjUwNTFEODM0MjVBRTdBMDBCMEQxQTkxOTEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RjNDNzIwREJCMjhCMTFFNDk2N0E4MkY4RDZDMjA2MzIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RjNDNzIwREFCMjhCMTFFNDk2N0E4MkY4RDZDMjA2MzIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3QkM2QjE0OTYwQjJFNDExOTIwMUMxMDc3NjI1RkU1NCIgc3RSZWY6ZG9jdW1lbnRJRD0iOUEzQTk1QjUwNTFEODM0MjVBRTdBMDBCMEQxQTkxOTEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4g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) no-repeat;
}

.dear-joy.jump .joy-wrap {
  -webkit-animation: jumpUp 0.5s cubic-bezier(0, 0.26, 0.4, 1) infinite
    alternate;
  animation: jumpUp 0.5s cubic-bezier(0, 0.26, 0.4, 1) infinite alternate;
}

.dear-joy.jump .shadow {
  -webkit-animation: shadow 0.5s cubic-bezier(0, 0.26, 0.4, 1) infinite
    alternate;
  animation: shadow 0.5s cubic-bezier(0, 0.26, 0.4, 1) infinite alternate;
}

.dear-joy.jump .left-ear {
  -webkit-animation: leftRotate 0.5s cubic-bezier(0, 0.26, 0.4, 1) infinite
    alternate;
  animation: leftRotate 0.5s cubic-bezier(0, 0.26, 0.4, 1) infinite alternate;
}

.dear-joy.jump .right-ear {
  -webkit-animation: rightRotate 0.5s cubic-bezier(0, 0.26, 0.4, 1) infinite
    alternate;
  animation: rightRotate 0.5s cubic-bezier(0, 0.26, 0.4, 1) infinite alternate;
}

.dear-joy.jump .left-hand {
  -webkit-animation: leftRotate2 0.5s cubic-bezier(0, 0.26, 0.4, 1) infinite
    alternate;
  animation: leftRotate2 0.5s cubic-bezier(0, 0.26, 0.4, 1) infinite alternate;
}

.dear-joy.jump .right-hand {
  -webkit-animation: rightRotate2 0.5s cubic-bezier(0, 0.26, 0.4, 1) infinite
    alternate;
  animation: rightRotate2 0.5s cubic-bezier(0, 0.26, 0.4, 1) infinite alternate;
}

.dear-joy.dian {
  -webkit-animation: dian 1s ease-in;
  animation: dian 1s ease-in;
  -webkit-animation-fill-mode: forwards !important;
  animation-fill-mode: forwards !important;
}

.dear-joy.dian .shadow {
  -webkit-animation: shadowMove 0.5s ease-in;
  animation: shadowMove 0.5s ease-in;
  -webkit-animation-fill-mode: forwards !important;
  animation-fill-mode: forwards !important;
}

@-webkit-keyframes slideDown {
  0% {
    -webkit-transform: translate3d(0px, -640px, 0px);
  }

  50% {
    -webkit-transform: translate3d(0px, 0px, 0px);
  }

  75% {
    -webkit-transform: translate3d(0px, -30px, 0px);
  }

  100% {
    -webkit-transform: translate3d(0px, 0px, 0px);
  }
}

@keyframes slideDown {
  0% {
    -webkit-transform: translate3d(0px, -640px, 0px);
            transform: translate3d(0px, -640px, 0px);
  }

  50% {
    -webkit-transform: translate3d(0px, 0px, 0px);
            transform: translate3d(0px, 0px, 0px);
  }

  75% {
    -webkit-transform: translate3d(0px, -30px, 0px);
            transform: translate3d(0px, -30px, 0px);
  }

  100% {
    -webkit-transform: translate3d(0px, 0px, 0px);
            transform: translate3d(0px, 0px, 0px);
  }
}

@-webkit-keyframes easeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes easeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@-webkit-keyframes shining {
  0% {
    -webkit-transform: scale(0.7);
  }

  50% {
    -webkit-transform: scale(1.1);
  }

  100% {
    -webkit-transform: scale(0.7);
  }
}

@keyframes shining {
  0% {
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
  }

  50% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }

  100% {
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
  }
}

@-webkit-keyframes lineShake /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(-3deg);
  }

  to {
    -webkit-transform: rotate(3deg);
  }
}

@keyframes lineShake /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(-3deg);
            transform: rotate(-3deg);
  }

  to {
    -webkit-transform: rotate(3deg);
            transform: rotate(3deg);
  }
}

@-webkit-keyframes shake1 /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(-5deg);
  }

  to {
    -webkit-transform: rotate(5deg);
  }
}

@keyframes shake1 /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
  }

  to {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
  }
}

@-webkit-keyframes shake2 /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(5deg);
  }

  to {
    -webkit-transform: rotate(-5deg);
  }
}

@keyframes shake2 /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
  }

  to {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
  }
}

@-webkit-keyframes bang1 {
  0% {
    -webkit-transform: scale(0);
    opacity: 0;
  }

  50% {
    -webkit-transform: scale(0.4);
    opacity: 1;
  }

  100% {
    -webkit-transform: scale(0.8);
    opacity: 1;
  }
}

@keyframes bang1 {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0;
  }

  50% {
    -webkit-transform: scale(0.4);
            transform: scale(0.4);
    opacity: 1;
  }

  100% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
    opacity: 1;
  }
}

@-webkit-keyframes bang5 {
  0% {
    -webkit-transform: scale(0);
    opacity: 0;
  }

  50% {
    -webkit-transform: scale(0.5);
    opacity: 1;
  }

  100% {
    -webkit-transform: scale(1);
    opacity: 1;
  }
}

@keyframes bang5 {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0;
  }

  50% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
    opacity: 1;
  }

  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}

@-webkit-keyframes bang2 {
  0% {
    -webkit-transform: scale(0);
    opacity: 0;
  }

  50% {
    -webkit-transform: scale(0.6);
    opacity: 1;
  }

  100% {
    -webkit-transform: scale(1.2);
    opacity: 1;
  }
}

@keyframes bang2 {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0;
  }

  50% {
    -webkit-transform: scale(0.6);
            transform: scale(0.6);
    opacity: 1;
  }

  100% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
    opacity: 1;
  }
}

@-webkit-keyframes bang3 {
  0% {
    -webkit-transform: scale(0);
    opacity: 0;
  }

  50% {
    -webkit-transform: scale(0.7);
    opacity: 1;
  }

  100% {
    -webkit-transform: scale(1.4);
    opacity: 1;
  }
}

@keyframes bang3 {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0;
  }

  50% {
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
    opacity: 1;
  }

  100% {
    -webkit-transform: scale(1.4);
            transform: scale(1.4);
    opacity: 1;
  }
}

@-webkit-keyframes bang4 {
  0% {
    -webkit-transform: scale(0);
    opacity: 0;
  }

  50% {
    -webkit-transform: scale(0.3);
    opacity: 1;
  }

  100% {
    -webkit-transform: scale(0.6);
    opacity: 1;
  }
}

@keyframes bang4 {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0;
  }

  50% {
    -webkit-transform: scale(0.3);
            transform: scale(0.3);
    opacity: 1;
  }

  100% {
    -webkit-transform: scale(0.6);
            transform: scale(0.6);
    opacity: 1;
  }
}

@-webkit-keyframes flying {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-webkit-keyframes shadowMove {
  from {
    -webkit-transform: translate3d(0px, 0px, 0px) scale(1);
  }

  to {
    -webkit-transform: translate3d(0px, 60px, 0px) scale(0.5);
  }
}

@-webkit-keyframes dian {
  0% {
    -webkit-transform: translate3d(0px, 0px, 0px);
  }

  20% {
    -webkit-transform: translate3d(-103px, -76px, 0px);
    opacity: 1;
  }

  100% {
    -webkit-transform: translate3d(-103px, -76px, 0px);
    opacity: 0;
  }
}

@-webkit-keyframes jumpUp {
  from {
    -webkit-transform: translate3d(0px, 0px, 0px);
  }

  to {
    -webkit-transform: translate3d(0px, -40px, 0px);
  }
}

@-webkit-keyframes leftRotate {
  from {
    -webkit-transform: rotate(-20deg);
  }

  to {
    -webkit-transform: rotate(20deg);
  }
}

@-webkit-keyframes rightRotate {
  from {
    -webkit-transform: rotate(20deg);
  }

  to {
    -webkit-transform: rotate(-20deg);
  }
}

@-webkit-keyframes leftRotate2 {
  from {
    -webkit-transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(20deg);
  }
}

@-webkit-keyframes rightRotate2 {
  from {
    -webkit-transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(-20deg);
  }
}

@-webkit-keyframes shadow {
  from {
    -webkit-transform: scale(1);
  }

  to {
    -webkit-transform: scale(0.8);
  }
}

@keyframes flying {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes shadowMove {
  from {
    -webkit-transform: translate3d(0px, 0px, 0px) scale(1);
            transform: translate3d(0px, 0px, 0px) scale(1);
  }

  to {
    -webkit-transform: translate3d(0px, 60px, 0px) scale(0.5);
            transform: translate3d(0px, 60px, 0px) scale(0.5);
  }
}

@keyframes dian {
  0% {
    -webkit-transform: translate3d(0px, 0px, 0px);
            transform: translate3d(0px, 0px, 0px);
  }

  20% {
    -webkit-transform: translate3d(-103px, -76px, 0px);
            transform: translate3d(-103px, -76px, 0px);
    opacity: 1;
  }

  100% {
    -webkit-transform: translate3d(-103px, -76px, 0px);
            transform: translate3d(-103px, -76px, 0px);
    opacity: 0;
  }
}

@keyframes jumpUp {
  from {
    -webkit-transform: translate3d(0px, 0px, 0px);
            transform: translate3d(0px, 0px, 0px);
  }

  to {
    -webkit-transform: translate3d(0px, -40px, 0px);
            transform: translate3d(0px, -40px, 0px);
  }
}

@keyframes leftRotate {
  from {
    -webkit-transform: rotate(-20deg);
            transform: rotate(-20deg);
  }

  to {
    -webkit-transform: rotate(20deg);
            transform: rotate(20deg);
  }
}

@keyframes rightRotate {
  from {
    -webkit-transform: rotate(20deg);
            transform: rotate(20deg);
  }

  to {
    -webkit-transform: rotate(-20deg);
            transform: rotate(-20deg);
  }
}

@keyframes leftRotate2 {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(20deg);
            transform: rotate(20deg);
  }
}

@keyframes rightRotate2 {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(-20deg);
            transform: rotate(-20deg);
  }
}

@keyframes shadow {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
  }

  to {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
}

/* 根据屏幕宽度适配缩放规则 */

@media screen and (min-width: 1024px) {
  .d-layout-area {
    zoom: 0.5 !important;
  }
}

@media screen and (min-width: 1280px) {
  .d-layout-area {
    zoom: 0.55 !important;
  }
}

@media screen and (min-width: 1366px) {
  .d-layout-area {
    zoom: 0.6 !important;
  }
}

@media screen and (min-width: 1440px) {
  .d-layout-area {
    zoom: 0.65 !important;
  }
}

@media screen and (min-width: 1680px) {
  .d-layout-area {
    zoom: 0.65 !important;
  }
}

@media screen and (min-width: 1920px) {
  .d-layout-area {
    zoom: 0.7 !important;
  }
}