@charset "utf-8";
html,
body,
div,
span,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
a,
address,
em,
img,
q,
s,
small,
strike,
strong,
sub,
sup,
b,
u,
i,
dl,
dt,
dd,
ol,
ul,
li,
form,
label,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
footer,
header,
nav,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
article,
aside,
footer,
header,
nav,
section {
  display: block;
}
body {
  font-family: Arial, "微軟正黑體" !important;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
html {
  overflow-x: hidden;
}
html {
  height: 100%;
}
html.ie7 {
  overflow-x: hidden;
}
html.ie7 body {
  overflow-x: visible;
}
html.ie7 em {
  font-style: normal;
}
body {
  margin: 0;
  padding-top: 83px;
  background-repeat: no-repeat;
  font-size: 16px;
  line-height: 1.5;
  color: #000;
  background-color: #fff;
  overflow-x: hidden;
  overflow-y: hidden;
}
body img {
  display: block;
  width: auto;
  height: auto;
}
body a {
  color: #fff;
  text-decoration: none;
}
@media screen and (max-width: 800px) {
  [data-aos-delay] {
    transition-delay: 0s !important;
  }
}
a[href^="tel"] {
  color: inherit;
  /* Inherit text color of parent element. */
  text-decoration: none;
  /* Remove underline. */
  /* Additional css `propery: value;` pairs here */
}
* {
  box-sizing: border-box;
}
/* total width */
*::-webkit-scrollbar {
  background-color: #fff;
  width: 16px;
}
/* background of the scrollbar except button or resizer */
*::-webkit-scrollbar-track {
  background-color: #ffffff;
}
*::-webkit-scrollbar-track:hover {
  background-color: #f4f4f4;
}
/* scrollbar itself */
*::-webkit-scrollbar-thumb {
  background-color: #babac0;
  border-radius: 16px;
  border: 5px solid #ffffff;
}
*::-webkit-scrollbar-thumb:hover {
  background-color: #a0a0a5;
  border: 4px solid #f4f4f4;
}
.for-mobile {
  display: none;
}
@media all and (max-width: 800px) {
  .for-mobile {
    display: block;
  }
}
.for-desktop {
  display: block;
}
@media all and (max-width: 800px) {
  .for-desktop {
    display: none;
  }
}
.slick-prev {
  cursor: pointer;
  display: block;
  width: 53px;
  height: 53px;
  position: absolute;
  left: 10px;
  z-index: 2;
  outline: none;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../img/prev.png");
}
@media all and (max-width: 1200px) {
  .slick-prev {
    width: 35px;
    height: 35px;
  }
}
.slick-next {
  cursor: pointer;
  display: block;
  width: 53px;
  height: 53px;
  position: absolute;
  right: 10px;
  z-index: 2;
  outline: none;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../img/next.png");
}
@media all and (max-width: 1200px) {
  .slick-next {
    width: 35px;
    height: 35px;
  }
}
.page-slide-box {
  outline: none;
}
.jumpElement {
  cursor: pointer;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  -ms-transition: 0.5s;
  transition: 0.5s;
}
.jumpElement:active {
  transform: scaleX(0.9) scaleY(0.98);
}
.floatElement {
  transform-origin: top center;
}
.jumpElement.active {
  animation: peopleJump2 0.4s ease 2;
}
.floatElement.active {
  animation: peopleJump3 1s ease 2;
}
@keyframes peopleJump2 {
  0% {
    transform: translate3d(0, 0px, 0);
  }
  50% {
    transform: translate3d(0, -30px, 0);
  }
  100% {
    transform: translate3d(0, 0px, 0);
  }
}
@keyframes peopleJump3 {
  0% {
    transform: translate3d(0, 0px, 0);
  }
  25% {
    transform: translate3d(0, -33px, 0);
  }
  100% {
    transform: translate3d(0, 0px, 0);
  }
}
header {
  z-index: 1000;
  position: fixed;
  top: 0;
  width: 100%;
  height: 83px;
  background-color: #fff;
}
header > .bg-box {
  width: 100%;
  height: 12px;
  background-repeat-x: repeat;
  background-repeat-y: no-repeat;
  background-image: url("../img/_mode/header/header-bg.png");
}
header .logo-box {
  float: left;
  align-items: center;
  padding-top: 20px;
  padding-left: 100px;
}
@media all and (max-width: 1200px) {
  header .logo-box {
    padding-left: 30px;
  }
}
@media all and (max-width: 900px) {
  header .logo-box {
    padding-left: 20px;
  }
}
@media all and (max-width: 600px) {
  header .logo-box {
    width: 300px;
    padding-top: 22px;
  }
}
@media all and (max-width: 500px) {
  header .logo-box {
    padding-left: 10px;
  }
}
@media all and (max-width: 400px) {
  header .logo-box {
    width: 250px;
  }
}
header .logo-box a {
  display: block;
}
header .logo-box img {
  display: inline-block;
  width: 100%;
  margin-right: 10px;
  vertical-align: middle;
}
@media all and (max-width: 500px) {
  header .logo-box img {
    margin-right: 3px;
  }
}
header .logo-box span {
  font-size: 24px;
  font-weight: bold;
  color: #555555;
  vertical-align: bottom;
}
@media all and (max-width: 1200px) {
  header .logo-box span {
    font-size: 20px;
  }
}
@media all and (max-width: 500px) {
  header .logo-box span {
    font-size: 14px;
    vertical-align: bottom;
  }
}
header .icon-box {
  float: right;
  padding-right: 100px;
}
@media all and (max-width: 1200px) {
  header .icon-box {
    padding-right: 30px;
  }
}
@media all and (max-width: 900px) {
  header .icon-box {
    padding-right: 20px;
  }
}
@media all and (max-width: 500px) {
  header .icon-box {
    padding-right: 10px;
  }
}
@media all and (max-width: 1000px) {
  header .icon-box {
    display: none;
  }
}
header .icon-box li {
  float: left;
}
header .icon-box li a {
  display: block;
}
header .icon-box li.live {
  margin-right: 20px;
}
header .icon-box li.fb {
  cursor: pointer;
}
header .page-link-box {
  float: right;
  margin-right: 40px;
  margin-top: 24px;
}
@media all and (max-width: 1000px) {
  header .page-link-box {
    display: none;
  }
}
header .page-link-box li {
  float: left;
  font-size: 18px;
  color: #555;
  margin-right: 20px;
}
@media all and (max-width: 1200px) {
  header .page-link-box li {
    font-size: 10px;
  }
}
header .page-link-box li a {
  font-size: 18px;
  font-weight: bold;
  color: #555;
}
@media all and (max-width: 1200px) {
  header .page-link-box li a {
    font-size: 16px;
  }
}
header .page-link-box li:last-child {
  margin-right: 0;
}
header .menu-btn {
  display: none;
  cursor: pointer;
  position: absolute;
  top: 23px;
  right: 30px;
  font-size: 30px;
}
header .menu-btn i {
  font-size: 30px;
  color: #f77d09;
}
@media all and (max-width: 1000px) {
  header .menu-btn {
    display: block;
  }
}
@media all and (max-width: 500px) {
  header .menu-btn {
    right: 10px;
  }
}
header .mobile-menu-out-box.hide {
  opacity: 0;
  visibility: hidden;
}
header .mobile-menu-out-box.hide .bg-box {
  transform: translate3d(0, -100%, 0);
}
header .mobile-menu-out-box {
  opacity: 1;
  visibility: visible;
  z-index: 10000;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: 0.7s;
  -moz-transition: 0.7s;
  -o-transition: 0.7s;
  -ms-transition: 0.7s;
  transition: 0.7s;
}
header .mobile-menu-out-box .header {
  z-index: 1;
  position: absolute;
  top: 0;
  width: 100%;
  height: 12px;
  background-repeat: repeat;
  background-image: url("../img/_mode/header/header-bg.png");
}
header .mobile-menu-out-box .bg-box {
  width: 100%;
  height: 100%;
  background-color: #fff;
  transform: translate3d(0, 0, 0);
  -webkit-transition: 0.7s;
  -moz-transition: 0.7s;
  -o-transition: 0.7s;
  -ms-transition: 0.7s;
  transition: 0.7s;
}
header .mobile-menu-out-box .bg-box .close {
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 10px;
  font-size: 30px;
  padding: 0 10px;
  color: #f77d09;
}
header .mobile-menu-out-box .bg-box .bottom-bg {
  width: 100%;
  padding-bottom: 30%;
  position: absolute;
  bottom: 0;
  background-repeat: repeat;
  background-size: contain;
  background-image: url("../img/_mode/header/mobile-menu-bg.png");
}
header .mobile-menu-out-box .bg-box ul.link-menu {
  overflow: hidden;
  position: relative;
  top: 140px;
  margin: 0 auto;
}
header .mobile-menu-out-box .bg-box ul.link-menu li {
  opacity: 1;
  display: block;
  text-align: center;
  transform: translate3d(0, 0, 0);
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  -ms-transition: 0.5s;
  transition: 0.5s;
}
header .mobile-menu-out-box .bg-box ul.link-menu li a {
  display: block;
  padding: 10px 0;
  font-size: 25px;
  color: #555;
  background-color: #fff;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  -ms-transition: 0.5s;
  transition: 0.5s;
}
@media all and (max-width: 500px) {
  header .mobile-menu-out-box .bg-box ul.link-menu li a {
    font-size: 20px;
  }
}
header .mobile-menu-out-box .bg-box ul.link-menu li a:hover {
  color: #f77d09;
}
header .mobile-menu-out-box .bg-box ul.link-menu li.hide {
  opacity: 0;
  transform: translate3d(-150px, 0, 0);
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  -ms-transition: 0.5s;
  transition: 0.5s;
}
header .mobile-menu-out-box .bg-box ul.link-menu li.li4.hide {
  opacity: 0;
  transform: translate3d(-70px, 0, 0);
}
header .mobile-menu-out-box .bg-box ul.link-menu li.icon-box {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 20px;
  padding: 0;
}
header .mobile-menu-out-box .bg-box ul.link-menu li.icon-box a:hover {
  color: #555;
}
header .mobile-menu-out-box .bg-box ul.link-menu li.icon-box span {
  display: inline-block;
  font-size: 0;
}
header .mobile-menu-out-box .bg-box ul.link-menu li.icon-box span.wk-fb-share {
  padding: 10px 0;
  cursor: pointer;
}
body.index .page-link-box li.link1 a {
  color: #fe7901;
}
body.live .page-link-box li.link2 a {
  color: #fe7901;
}
body.sstandc .page-link-box li.link3 a {
  color: #fe7901;
}
body.quiz .page-link-box li.link4 a {
  color: #fe7901;
}
body.invite .page-link-box li.link5 a {
  color: #fe7901;
}
.gotop-outbox {
  opacity: 0;
  visibility: hidden;
  z-index: 10;
  position: fixed;
  bottom: 100px;
  right: 10px;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  -ms-transition: 0.5s;
  transition: 0.5s;
}
@media all and (max-width: 1600px) {
  .gotop-outbox {
    right: 20px;
  }
}
@media all and (max-width: 1200px) {
  .gotop-outbox {
    top: auto;
    bottom: 40px;
    right: 20px;
  }
}
@media all and (max-width: 800px) {
  .gotop-outbox {
    bottom: 30px;
    right: 10px;
  }
}
.gotop-outbox .gotop-box .gotop-circle {
  position: relative;
  cursor: pointer;
  width: 132px;
  height: 132px;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("../img/_mode/hintman/gotop.png");
}
@media all and (max-width: 1200px) {
  .gotop-outbox .gotop-box .gotop-circle {
    width: 100px;
    height: 100px;
  }
}
@media all and (max-width: 800px) {
  .gotop-outbox .gotop-box .gotop-circle {
    width: 70px;
    height: 70px;
  }
}
.gotop-outbox .gotop-box .gotop-arrow {
  cursor: pointer;
  width: 52px;
  height: 71px;
  position: absolute;
  top: 0px;
  right: 43px;
  background-image: url("../img/_mode/hintman/hintman-arrow.png");
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  -ms-transition: 0.5s;
  transition: 0.5s;
}
@media all and (max-width: 1200px) {
  .gotop-outbox .gotop-box .gotop-arrow {
    display: none;
  }
}
.gotop-outbox .gotop-box .text-box {
  position: absolute;
  top: 27px;
  right: 50px;
  width: 50px;
  height: 100px;
  overflow: hidden;
  border-radius: 60px 0px 0px 60px;
  background-color: #fff;
  z-index: -1;
  box-shadow: #0000002e 1px 1px 10px;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  -ms-transition: 0.5s;
  transition: 0.5s;
}
@media all and (max-width: 1200px) {
  .gotop-outbox .gotop-box .text-box {
    display: none;
  }
}
.gotop-outbox .gotop-box .text-box span {
  display: block;
  color: #000;
  width: max-content;
  width: -moz-max-content;
  font-size: 20px;
  position: absolute;
  top: 34px;
  left: 30px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.gotop-outbox .gotop-box:hover .text-box {
  width: 330px;
}
.gotop-outbox .gotop-box:hover .hintman-arrow {
  top: -60px;
}
.gotop-outbox.show {
  opacity: 1;
  visibility: visible;
  bottom: 80px;
}
.anchor-box {
  display: none;
  z-index: 10;
  position: fixed;
  width: 100%;
  height: 60px;
  bottom: 0;
  background-color: #fff;
}
@media all and (max-width: 800px) {
  .anchor-box {
    display: block;
  }
}
.anchor-box ul {
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: relative;
}
.anchor-box ul li {
  cursor: pointer;
  float: left;
  width: 25%;
  height: 100%;
  padding-top: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.anchor-box ul li img {
  margin: 0 auto;
}
.anchor-box ul li span {
  display: block;
  font-size: 12px;
  color: #fff;
  text-align: center;
}
.anchor-box ul li:nth-child(1) {
  background-color: #F5A623;
}
.anchor-box ul li:nth-child(2) {
  background-color: #d70500;
}
.anchor-box ul li:nth-child(3) {
  background-color: #579891;
}
.anchor-box ul li:nth-child(4) {
  background-color: #9b6a61;
}
.anchor-box ul li:nth-child(5) {
  background-color: #39579a;
}
* {
  touch-action: pan-y;
}
html {
  width: 100%;
  scroll-behavior: smooth;
}
body {
  padding-top: 0;
  background-color: #fff;
  scroll-behavior: smooth;
}
footer {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
  padding: 0 20px;
  text-align: center;
  color: #000;
  font-size: 12px;
  background-color: #c3cdae;
}
footer a {
  display: block;
  width: 100%;
  height: 100%;
  color: #304406;
  font-size: 12px;
}
.wrap {
  position: relative;
  width: 100%;
  margin: 0 auto;
  background-color: #000;
  overflow: hidden;
}
.wrap .mobile-show {
  display: none!important;
}
@media all and (max-width: 800px) {
  .wrap .mobile-show {
    display: block!important;
  }
}
.wrap .section {
  width: 100%;
  position: relative;
  background-color: #000;
  background-size: cover;
  background-position: center;
}
.wrap .section .section-wrap {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  padding-bottom: 200%;
}
.wrap .section .section-wrap .jumpElement {
  cursor: default;
}
.wrap .section .section-wrap .emotion {
  width: 40px;
  height: 40px;
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
}
@media all and (max-width: 800px) {
  .wrap .section .section-wrap .emotion {
    width: 24px;
    height: 24px;
  }
}
@keyframes emotionJump1 {
  0% {
    transform: scale(0) translate3d(0px, 40px, 0);
    opacity: 0;
  }
  5% {
    transform: scale(1) translate3d(0px, 0px, 0);
    opacity: 1;
  }
  40% {
    transform: scale(1) translate3d(0px, 0px, 0);
    opacity: 1;
  }
  50% {
    transform: scale(1) translate3d(0px, 0px, 0);
    opacity: 0;
  }
  100% {
    transform: scale(1) translate3d(0px, 0px, 0);
    opacity: 0;
  }
}
@keyframes emotionJump2 {
  0% {
    transform: scale(0) translate3d(0px, 40px, 0);
    opacity: 0;
  }
  3% {
    transform: scale(0) translate3d(0px, 40px, 0);
    opacity: 0;
  }
  8% {
    transform: scale(1) translate3d(0px, 0px, 0);
    opacity: 1;
  }
  43% {
    transform: scale(1) translate3d(0px, 0px, 0);
    opacity: 1;
  }
  53% {
    transform: scale(1) translate3d(0px, 0px, 0);
    opacity: 0;
  }
  100% {
    transform: scale(1) translate3d(0px, 0px, 0);
    opacity: 0;
  }
}
@keyframes emotionJump3 {
  0% {
    transform: scale(0) translate3d(0px, 40px, 0);
    opacity: 0;
  }
  45% {
    transform: scale(0) translate3d(0px, 40px, 0);
    opacity: 0;
  }
  50% {
    transform: scale(1) translate3d(0px, 0px, 0);
    opacity: 1;
  }
  90% {
    transform: scale(1) translate3d(0px, 0px, 0);
    opacity: 1;
  }
  100% {
    transform: scale(1) translate3d(0px, 0px, 0);
    opacity: 0;
  }
}
@keyframes emotionJump4 {
  0% {
    transform: scale(0) translate3d(0px, 40px, 0);
    opacity: 0;
  }
  25% {
    transform: scale(0) translate3d(0px, 40px, 0);
    opacity: 0;
  }
  30% {
    transform: scale(1) translate3d(0px, 0px, 0);
    opacity: 1;
  }
  70% {
    transform: scale(1) translate3d(0px, 0px, 0);
    opacity: 1;
  }
  80% {
    transform: scale(1) translate3d(0px, 0px, 0);
    opacity: 0;
  }
  100% {
    transform: scale(1) translate3d(0px, 0px, 0);
    opacity: 0;
  }
}
@keyframes emotionJump5 {
  0% {
    transform: scale(1) translate3d(0px, 0px, 0);
    opacity: 1;
  }
  10% {
    transform: scale(1) translate3d(0px, 0px, 0);
    opacity: 1;
  }
  15% {
    transform: scale(1) translate3d(0px, 0px, 0);
    opacity: 0;
  }
  40% {
    transform: scale(0) translate3d(0px, 40px, 0);
    opacity: 0;
  }
  65% {
    transform: scale(0) translate3d(0px, 40px, 0);
    opacity: 0;
  }
  70% {
    transform: scale(1) translate3d(0px, 0px, 0);
    opacity: 1;
  }
  100% {
    transform: scale(1) translate3d(0px, 0px, 0);
    opacity: 1;
  }
}
.wrap .section .section-wrap .wkpeople {
  position: absolute;
  width: 8.977%;
  padding-bottom: 16%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.wrap .section .section-wrap .title a {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
}
.wrap .section .section-wrap .box1 {
  z-index: 2;
  position: absolute;
  top: 10%;
  left: 20%;
  width: 10%;
  padding-bottom: 10%;
  background-color: #ff0;
}
.wrap .section .section-wrap .box2 {
  z-index: 2;
  position: absolute;
  top: 20%;
  right: 15%;
  width: 10%;
  padding-bottom: 10%;
  background-color: #ff0;
}
.wrap .section .section-wrap .box3 {
  z-index: 2;
  position: absolute;
  top: 30%;
  left: 30%;
  width: 10%;
  padding-bottom: 10%;
  background-color: #ff0;
}
.wrap .section .section-wrap .box4 {
  z-index: 2;
  position: absolute;
  top: 35%;
  right: 25%;
  width: 10%;
  padding-bottom: 10%;
  background-color: #ff0;
}
.wrap .section .section-wrap .box5 {
  z-index: 2;
  position: absolute;
  top: 50%;
  left: 15%;
  width: 10%;
  padding-bottom: 10%;
  background-color: #ff0;
}
.wrap .section .section-wrap .box6 {
  z-index: 2;
  position: absolute;
  top: 60%;
  right: 10%;
  width: 10%;
  padding-bottom: 10%;
  background-color: #ff0;
}
.wrap .section .section-wrap .box7 {
  z-index: 2;
  position: absolute;
  top: 70%;
  left: 25%;
  width: 10%;
  padding-bottom: 10%;
  background-color: #ff0;
}
.wrap .section .section-wrap .box8 {
  z-index: 2;
  position: absolute;
  top: 80%;
  right: 30%;
  width: 10%;
  padding-bottom: 10%;
  background-color: #ff0;
}
.wrap .section .section-wrap .road {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100px;
  height: 0%;
  margin-left: -50px;
  background-color: #bdbdbd;
}
@media all and (max-width: 800px) {
  .wrap .section .section-wrap .road {
    width: 13%;
    margin-left: -6.5%;
  }
}
.wrap .section .section-wrap .road .fresh-man {
  width: 45px;
  height: 90px;
  position: absolute;
  bottom: 50%;
  left: 50%;
  margin-left: -22px;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../img/page/wakeup/freshman.png");
}
@media all and (max-width: 800px) {
  .wrap .section .section-wrap .road .fresh-man {
    width: 60%;
    height: auto;
    margin-left: -30%;
    padding-bottom: 121%;
  }
}
.wrap .section .section-wrap .road .fresh-man.active {
  animation: freshmanJump 1s ease infinite;
}
@keyframes freshmanJump {
  0% {
    transform: translate3d(0, 0px, 0);
  }
  50% {
    transform: translate3d(0, -30px, 0);
  }
  100% {
    transform: translate3d(0, 0px, 0);
  }
}
.wrap .section.section1 {
  padding-bottom: 77%;
  background-color: #578fe6;
  overflow: hidden;
}
@media all and (max-width: 800px) {
  .wrap .section.section1 {
    padding-bottom: 148%;
    overflow: initial;
  }
}
.wrap .section.section1 .cloud-bg {
  width: 100%;
  padding-bottom: 21%;
  position: absolute;
  top: 6%;
  left: 50%;
  margin-left: -50%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../img/page/wakeup/section1-cloud-bg.png");
}
.wrap .section.section1 .item1 {
  width: 8.373%;
  padding-bottom: 21%;
  position: absolute;
  top: 14.5%;
  left: 50%;
  margin-left: -18.5%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../img/page/wakeup/section1-item1.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section1 .item1 {
    width: 11%;
    padding-bottom: 27%;
    top: 23%;
    margin-left: -17%;
  }
}
.wrap .section.section1 .item2 {
  width: 10.89%;
  padding-bottom: 31%;
  position: absolute;
  top: 15.9%;
  left: 50%;
  margin-left: -28.5%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../img/page/wakeup/section1-item2.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section1 .item2 {
    width: 14%;
    padding-bottom: 39%;
    top: 23.8%;
    margin-left: -30.5%;
  }
}
.wrap .section.section1 .item3 {
  width: 14.1%;
  padding-bottom: 41%;
  position: absolute;
  top: 18%;
  left: 50%;
  margin-left: -40.5%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../img/page/wakeup/section1-item3.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section1 .item3 {
    width: 18%;
    padding-bottom: 51%;
    top: 25%;
    margin-left: -46%;
  }
}
.wrap .section.section1 .item4 {
  width: 10.833%;
  padding-bottom: 31%;
  position: absolute;
  top: 13.2%;
  left: 50%;
  margin-left: 10%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../img/page/wakeup/section1-item4.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section1 .item4 {
    width: 14%;
    padding-bottom: 40%;
    top: 21.8%;
    margin-left: 11%;
  }
}
.wrap .section.section1 .item5 {
  width: 8.3285%;
  padding-bottom: 21%;
  position: absolute;
  top: 25.2%;
  left: 50%;
  margin-left: 20.2%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../img/page/wakeup/section1-item5.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section1 .item5 {
    width: 13%;
    padding-bottom: 33%;
    top: 31.5%;
    margin-left: 23.5%;
  }
}
.wrap .section.section1 .item6 {
  width: 8.2655%;
  padding-bottom: 21%;
  position: absolute;
  top: 34.2%;
  left: 50%;
  margin-left: 28%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../img/page/wakeup/section1-item6.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section1 .item6 {
    width: 10%;
    padding-bottom: 26%;
    top: 40%;
    margin-left: 35%;
  }
}
.wrap .section.section1 .item7 {
  width: 6.17%;
  padding-bottom: 10%;
  position: absolute;
  top: 14.7%;
  left: 50%;
  margin-left: 21.5%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../img/page/wakeup/section1-item7.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section1 .item7 {
    width: 12%;
    padding-bottom: 19%;
    top: 24.5%;
    margin-left: 23%;
  }
}
.wrap .section.section1 .item8 {
  width: 3.318%;
  padding-bottom: 5%;
  position: absolute;
  top: 31%;
  left: 50%;
  margin-left: 30.5%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../img/page/wakeup/section1-item8.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section1 .item8 {
    width: 5%;
    padding-bottom: 8%;
    top: 37.5%;
    margin-left: 37.5%;
  }
}
.wrap .section.section1 .wakeup-logo {
  z-index: 2;
  width: 11.002%;
  padding-bottom: 10%;
  position: absolute;
  top: 7%;
  left: 50%;
  margin-left: -5.5%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../img/page/wakeup/wakeup-logo.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section1 .wakeup-logo {
    width: 30%;
    padding-bottom: 27%;
    top: 4%;
    margin-left: -15%;
  }
}
.wrap .section.section1 .stairs-top {
  width: 33.246%;
  padding-bottom: 25%;
  position: absolute;
  top: 21.5%;
  left: 50%;
  margin-left: -16.623%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../img/page/wakeup/section1-stairs-top.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section1 .stairs-top {
    width: 52%;
    padding-bottom: 67%;
    top: 18.5%;
    margin-left: -26%;
  }
}
.wrap .section.section1 .tower {
  z-index: 1;
  width: 16.5895%;
  padding-bottom: 31%;
  position: absolute;
  top: 30.5%;
  left: 50%;
  margin-left: -8.2%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../img/page/wakeup/section1-tower.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section1 .tower {
    width: 21%;
    padding-bottom: 45%;
    top: 39%;
    margin-left: -10.5%;
  }
}
.wrap .section.section1 .stairs-bottom {
  z-index: 2;
  width: 60.61%;
  padding-bottom: 30%;
  position: absolute;
  top: 43.2%;
  left: 50%;
  margin-left: -30%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../img/page/wakeup/section1-stairs-bottom.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section1 .stairs-bottom {
    width: 94%;
    padding-bottom: 48%;
    top: 48.2%;
    margin-left: -47%;
  }
}
.wrap .section.section1 .tower-light {
  width: 30.778%;
  padding-bottom: 22%;
  position: absolute;
  top: 4.7%;
  left: 50%;
  margin-left: -14.3%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../img/page/wakeup/section1-tower-light.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section1 .tower-light {
    width: 50%;
    padding-bottom: 35%;
    top: 16.5%;
    margin-left: -23%;
  }
}
.wrap .section.section1 .wkpeople {
  z-index: 2;
  width: 3.887%;
  padding-bottom: 6%;
  position: absolute;
  left: 50%;
  background-size: contain;
  background-repeat: no-repeat;
}
@media all and (max-width: 800px) {
  .wrap .section.section1 .wkpeople {
    z-index: 2;
    width: 10%;
    padding-bottom: 13%;
  }
}
.wrap .section.section1 .wkpeople1 {
  top: 22%;
  margin-left: -5.7%;
  background-image: url("../img/page/wakeup/section1-wkpeople/wkpeople-1.png");
  animation: richFloat1 4s cubic-bezier(0.58, 0.2, 0.18, 1.01) infinite;
}
@media all and (max-width: 800px) {
  .wrap .section.section1 .wkpeople1 {
    top: 28%;
    margin-left: -13%;
  }
}
.wrap .section.section1 .wkpeople2 {
  top: 24%;
  margin-left: 2.1%;
  background-image: url("../img/page/wakeup/section1-wkpeople/wkpeople-2.png");
  animation: celineFloat2 5s cubic-bezier(0.58, 0.2, 0.18, 1.01) infinite;
}
@media all and (max-width: 800px) {
  .wrap .section.section1 .wkpeople2 {
    top: 29%;
    margin-left: 4%;
  }
}
.wrap .section.section1 .lala {
  width: 2.889%;
  padding-bottom: 3%;
  position: absolute;
  left: 50%;
  top: 26%;
  margin-left: -1.3%;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../img/page/wakeup/section1-wkpeople/lala.png");
  animation: lalaFloat3 6s cubic-bezier(0.58, 0.2, 0.18, 1.01) infinite;
  transform: translate3d(0, -15%, 0);
}
@media all and (max-width: 800px) {
  .wrap .section.section1 .lala {
    width: 9%;
    padding-bottom: 9%;
    top: 30%;
    margin-left: -3.5%;
  }
}
@keyframes richFloat1 {
  0% {
    transform: translate3d(0, 0px, 0);
  }
  50% {
    transform: translate3d(0, -30%, 0);
  }
  100% {
    transform: translate3d(0, 0px, 0);
  }
}
@keyframes celineFloat2 {
  0% {
    transform: translate3d(0, -30%, 0);
  }
  50% {
    transform: translate3d(0, 0%, 0);
  }
  100% {
    transform: translate3d(0, -30%, 0);
  }
}
@keyframes lalaFloat3 {
  0% {
    transform: translate3d(0, -5%, 0);
  }
  50% {
    transform: translate3d(0, -75%, 0);
  }
  100% {
    transform: translate3d(0, -5%, 0);
  }
}
.wrap .section.section1 .wkpeople3 {
  top: 31.5%;
  margin-left: -11.1%;
  background-image: url("../img/page/wakeup/section1-wkpeople/wkpeople-3.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section1 .wkpeople3 {
    top: 33%;
    margin-left: -20%;
  }
}
.wrap .section.section1 .wkpeople4 {
  top: 34.5%;
  margin-left: -14.1%;
  background-image: url("../img/page/wakeup/section1-wkpeople/wkpeople-4.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section1 .wkpeople4 {
    top: 36%;
    margin-left: -24%;
  }
}
.wrap .section.section1 .wkpeople5 {
  top: 37.5%;
  margin-left: -10.5%;
  background-image: url("../img/page/wakeup/section1-wkpeople/wkpeople-5.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section1 .wkpeople5 {
    top: 40.8%;
    margin-left: -23%;
  }
}
.wrap .section.section1 .wkpeople6 {
  top: 47.3%;
  margin-left: -26%;
  background-image: url("../img/page/wakeup/section1-wkpeople/wkpeople-6.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section1 .wkpeople6 {
    display: none;
  }
}
.wrap .section.section1 .wkpeople7 {
  top: 42.5%;
  margin-left: -23%;
  background-image: url("../img/page/wakeup/section1-wkpeople/wkpeople-7.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section1 .wkpeople7 {
    display: none;
  }
}
.wrap .section.section1 .wkpeople8 {
  top: 43%;
  margin-left: -20.5%;
  background-image: url("../img/page/wakeup/section1-wkpeople/wkpeople-8.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section1 .wkpeople8 {
    top: 45.5%;
    margin-left: -43%;
  }
}
.wrap .section.section1 .wkpeople9 {
  top: 49.3%;
  margin-left: -21.5%;
  background-image: url("../img/page/wakeup/section1-wkpeople/wkpeople-9.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section1 .wkpeople9 {
    display: none;
  }
}
.wrap .section.section1 .wkpeople10 {
  top: 47.3%;
  margin-left: -17.5%;
  background-image: url("../img/page/wakeup/section1-wkpeople/wkpeople-10.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section1 .wkpeople10 {
    top: 51%;
    margin-left: -39%;
  }
}
.wrap .section.section1 .wkpeople11 {
  top: 45.6%;
  margin-left: -14.9%;
  background-image: url("../img/page/wakeup/section1-wkpeople/wkpeople-11.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section1 .wkpeople11 {
    top: 46.7%;
    margin-left: -31.5%;
  }
}
.wrap .section.section1 .wkpeople12 {
  top: 53.3%;
  margin-left: -14.9%;
  background-image: url("../img/page/wakeup/section1-wkpeople/wkpeople-12.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section1 .wkpeople12 {
    top: 54%;
    margin-left: -26%;
  }
}
.wrap .section.section1 .wkpeople13 {
  top: 51.1%;
  margin-left: -11.9%;
  background-image: url("../img/page/wakeup/section1-wkpeople/wkpeople-13.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section1 .wkpeople13 {
    top: 54%;
    margin-left: -18%;
  }
}
.wrap .section.section1 .wkpeople14 {
  top: 57.6%;
  margin-left: -7.5%;
  background-image: url("../img/page/wakeup/section1-wkpeople/wkpeople-14.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section1 .wkpeople14 {
    top: 59%;
    margin-left: -19%;
  }
}
.wrap .section.section1 .wkpeople15 {
  top: 32.1%;
  margin-left: 6.8%;
  background-image: url("../img/page/wakeup/section1-wkpeople/wkpeople-15.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section1 .wkpeople15 {
    top: 33%;
    margin-left: 10%;
  }
}
.wrap .section.section1 .wkpeople16 {
  top: 40.1%;
  margin-left: 9%;
  background-image: url("../img/page/wakeup/section1-wkpeople/wkpeople-16.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section1 .wkpeople16 {
    top: 40.5%;
    margin-left: 11.5%;
  }
}
.wrap .section.section1 .wkpeople17 {
  top: 37.8%;
  margin-left: 12%;
  background-image: url("../img/page/wakeup/section1-wkpeople/wkpeople-17.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section1 .wkpeople17 {
    top: 38%;
    margin-left: 17%;
  }
}
.wrap .section.section1 .wkpeople18 {
  top: 42.5%;
  margin-left: 15%;
  background-image: url("../img/page/wakeup/section1-wkpeople/wkpeople-18.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section1 .wkpeople18 {
    top: 45%;
    margin-left: 24.5%;
  }
}
.wrap .section.section1 .wkpeople19 {
  top: 41.5%;
  margin-left: 18.3%;
  background-image: url("../img/page/wakeup/section1-wkpeople/wkpeople-19.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section1 .wkpeople19 {
    display: none;
  }
}
.wrap .section.section1 .wkpeople20 {
  top: 43.5%;
  margin-left: 21.3%;
  background-image: url("../img/page/wakeup/section1-wkpeople/wkpeople-20.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section1 .wkpeople20 {
    display: none;
  }
}
.wrap .section.section1 .wkpeople21 {
  top: 45.8%;
  margin-left: 13.5%;
  background-image: url("../img/page/wakeup/section1-wkpeople/wkpeople-21.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section1 .wkpeople21 {
    top: 49.3%;
    margin-left: 19.5%;
  }
}
.wrap .section.section1 .wkpeople22 {
  top: 49%;
  margin-left: 16.5%;
  background-image: url("../img/page/wakeup/section1-wkpeople/wkpeople-22.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section1 .wkpeople22 {
    top: 51%;
    margin-left: 28%;
  }
}
.wrap .section.section1 .wkpeople23 {
  top: 48%;
  margin-left: 19.7%;
  background-image: url("../img/page/wakeup/section1-wkpeople/wkpeople-23.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section1 .wkpeople23 {
    display: none;
  }
}
.wrap .section.section1 .wkpeople24 {
  top: 53%;
  margin-left: 10.5%;
  background-image: url("../img/page/wakeup/section1-wkpeople/wkpeople-24.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section1 .wkpeople24 {
    top: 57%;
    margin-left: 12.5%;
  }
}
.wrap .section.section1 .wkpeople25 {
  top: 56.5%;
  margin-left: 7.5%;
  background-image: url("../img/page/wakeup/section1-wkpeople/wkpeople-25.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section1 .wkpeople25 {
    top: 58%;
    margin-left: 3.5%;
  }
}
.wrap .section.section1 .wkpeople26 {
  top: 5%;
  margin-left: 14%;
  width: 7.406%;
  padding-bottom: 12%;
  background-image: url("../img/page/wakeup/section1-wkpeople/wkpeople-26.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section1 .wkpeople26 {
    display: none!important;
    top: 40%;
    margin-left: 50%;
    width: 28%;
    padding-bottom: 44%;
  }
}
.wrap .section.section1 .wkpeople26-m {
  z-index: 10;
  display: none!important;
  top: 5%;
  margin-left: 14%;
  width: 7.406%;
  padding-bottom: 12%;
  background-image: url("../img/page/wakeup/section1-wkpeople/wkpeople-26.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section1 .wkpeople26-m {
    display: block!important;
    top: 80%;
    margin-left: 81%;
    width: 28%;
    padding-bottom: 44%;
  }
}
.wrap .section.section1 .wk-fresh-man {
  z-index: 2;
  width: 2.364%;
  padding-bottom: 5%;
  position: absolute;
  left: 50%;
  top: 60%;
  margin-left: -1.2%;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../img/page/wakeup/section1-wkpeople/wk-freshman.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section1 .wk-fresh-man {
    display: none;
    z-index: 2;
    width: 8%;
    padding-bottom: 16%;
    top: 49%;
    margin-left: -4%;
  }
}
.wrap .section.section1 .wk-fresh-man-m {
  z-index: 2;
  width: 2.364%;
  padding-bottom: 5%;
  position: absolute;
  left: 50%;
  top: 60%;
  margin-left: -1.2%;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../img/page/wakeup/section1-wkpeople/wk-freshman.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section1 .wk-fresh-man-m {
    z-index: 2;
    width: 8%;
    padding-bottom: 16%;
    top: 63%;
    margin-left: -4%;
  }
}
.wrap .section.section1 .cloud-left-box {
  z-index: 2;
  width: 60.61%;
  padding-bottom: 19.44%;
  position: absolute;
  bottom: -1%;
  left: 50%;
  margin-left: -38%;
}
@media all and (max-width: 800px) {
  .wrap .section.section1 .cloud-left-box {
    width: 76%;
    padding-bottom: 25%;
    margin-left: -48%;
  }
}
.wrap .section.section1 .cloud-left-box .cloud1 {
  width: 100%;
  height: 100%;
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../img/page/wakeup/section1-cloud1.png");
}
.wrap .section.section1 .cloud-left-box .cloud2 {
  width: 100%;
  height: 100%;
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../img/page/wakeup/section1-cloud2.png");
}
.wrap .section.section1 .cloud-left-box .cloud3 {
  width: 100%;
  height: 100%;
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../img/page/wakeup/section1-cloud3.png");
}
.wrap .section.section1 .cloud-right-box {
  width: 75%;
  padding-bottom: 23.4%;
  position: absolute;
  bottom: -1%;
  left: 50%;
  margin-left: -23%;
}
@media all and (max-width: 800px) {
  .wrap .section.section1 .cloud-right-box {
    width: 100%;
    padding-bottom: 33%;
    margin-left: -19%;
  }
}
.wrap .section.section1 .cloud-right-box .cloud4 {
  width: 100%;
  height: 100%;
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../img/page/wakeup/section1-cloud4.png");
}
.wrap .section.section1 .cloud-right-box .cloud5 {
  width: 100%;
  height: 100%;
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../img/page/wakeup/section1-cloud5.png");
}
.wrap .section.section1 .cloud-right-box .cloud6 {
  width: 100%;
  height: 100%;
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../img/page/wakeup/section1-cloud6.png");
}
.wrap .section.section2 {
  background-color: #f6f6f6;
  background-image: url("../img/page/wakeup/section2-bg.png");
}
.wrap .section.section2 .section-wrap {
  padding-bottom: 105%;
}
@media all and (max-width: 1600px) {
  .wrap .section.section2 .section-wrap {
    padding-bottom: 120%;
  }
}
@media all and (max-width: 1200px) {
  .wrap .section.section2 .section-wrap {
    padding-bottom: 160%;
  }
}
@media all and (max-width: 800px) {
  .wrap .section.section2 .section-wrap {
    padding-bottom: 350%;
  }
}
.wrap .section.section2 .section-wrap .title {
  width: 35.5%;
  padding-bottom: 21%;
  position: absolute;
  top: 2%;
  left: 3%;
  -webkit-background-size: contain;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../img/page/wakeup/section2-title.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section2 .section-wrap .title {
    z-index: 1;
    width: 426px;
    padding-bottom: 35%;
    top: 2%;
    left: 50%;
    margin-left: -213px;
    background-position: center;
    background-image: url("../img/page/wakeup/section2-title-m.png");
  }
}
@media all and (max-width: 500px) {
  .wrap .section.section2 .section-wrap .title {
    z-index: 1;
    width: 80%;
    padding-bottom: 51%;
    top: 2%;
    left: 50%;
    margin-left: -40%;
    background-image: url("../img/page/wakeup/section2-title-m.png");
  }
}
.wrap .section.section2 .section-wrap .item1 {
  width: 31.584%;
  padding-bottom: 35%;
  position: absolute;
  top: 3%;
  right: 16%;
  -webkit-background-size: contain;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../img/page/wakeup/section2-item1.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section2 .section-wrap .item1 {
    width: 50%;
    padding-bottom: 56%;
    top: 9.5%;
    right: 0%;
  }
}
.wrap .section.section2 .section-wrap .item1 .wkpeople {
  width: 13.195%;
  padding-bottom: 24%;
}
.wrap .section.section2 .section-wrap .item1 .wkpeople1 {
  top: 53%;
  left: 10%;
  background-image: url("../img/page/wakeup/section2-wkpeople/wkpeople-1.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section2 .section-wrap .item1 .wkpeople1 {
    top: 57%;
    left: 15%;
  }
}
.wrap .section.section2 .section-wrap .item1 .wkpeople2 {
  top: 55%;
  right: -10%;
  background-image: url("../img/page/wakeup/section2-wkpeople/wkpeople-2.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section2 .section-wrap .item1 .wkpeople2 {
    top: 70%;
    right: 11%;
  }
}
.wrap .section.section2 .section-wrap .item1 .wkpeople2 .emotion {
  top: -10px;
  right: -25px;
  background-image: url("../img/page/wakeup/emotion-icon/emotion9-r.png");
  animation: emotionJump3 5s linear infinite;
}
@media all and (max-width: 800px) {
  .wrap .section.section2 .section-wrap .item1 .wkpeople2 .emotion {
    right: -18px;
  }
}
.wrap .section.section2 .section-wrap .item2 {
  width: 46.417%;
  padding-bottom: 30%;
  position: absolute;
  top: 16%;
  left: 4%;
  -webkit-background-size: contain;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../img/page/wakeup/section2-item2.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section2 .section-wrap .item2 {
    width: 55%;
    padding-bottom: 35%;
    top: 17%;
    left: -2%;
  }
}
.wrap .section.section2 .section-wrap .item2 .wkpeople {
  width: 8.977%;
  padding-bottom: 17%;
}
@media all and (max-width: 800px) {
  .wrap .section.section2 .section-wrap .item2 .wkpeople {
    width: 13%;
    padding-bottom: 24%;
  }
}
.wrap .section.section2 .section-wrap .item2 .wkpeople3 {
  top: 0%;
  left: 41%;
  background-image: url("../img/page/wakeup/section2-wkpeople/wkpeople-3.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section2 .section-wrap .item2 .wkpeople3 {
    top: -14%;
    left: 39%;
  }
}
.wrap .section.section2 .section-wrap .item2 .wkpeople4 {
  top: 55%;
  left: 20%;
  background-image: url("../img/page/wakeup/section2-wkpeople/wkpeople-4.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section2 .section-wrap .item2 .wkpeople4 {
    top: 62%;
    left: 21%;
  }
}
.wrap .section.section2 .section-wrap .item2 .wkpeople4 .emotion {
  top: -10px;
  left: -25px;
  background-image: url("../img/page/wakeup/emotion-icon/emotion4-l.png");
  animation: emotionJump1 5s linear infinite;
}
@media all and (max-width: 800px) {
  .wrap .section.section2 .section-wrap .item2 .wkpeople4 .emotion {
    left: -18px;
  }
}
.wrap .section.section2 .section-wrap .item2 .wkpeople5 {
  top: 39%;
  left: 40%;
  background-image: url("../img/page/wakeup/section2-wkpeople/wkpeople-5.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section2 .section-wrap .item2 .wkpeople5 {
    top: 28%;
    left: 39%;
  }
}
.wrap .section.section2 .section-wrap .item2 .wkpeople5 .emotion {
  top: -10px;
  right: -25px;
  background-image: url("../img/page/wakeup/emotion-icon/emotion4-r.png");
  animation: emotionJump2 5s linear infinite;
}
@media all and (max-width: 800px) {
  .wrap .section.section2 .section-wrap .item2 .wkpeople5 .emotion {
    right: -18px;
  }
}
.wrap .section.section2 .section-wrap .item2 .wkpeople6 {
  top: 42%;
  right: 20%;
  background-image: url("../img/page/wakeup/section2-wkpeople/wkpeople-6.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section2 .section-wrap .item2 .wkpeople6 {
    top: 29%;
    right: 18%;
  }
}
.wrap .section.section2 .section-wrap .item3 {
  width: 21.75%;
  padding-bottom: 15%;
  position: absolute;
  top: 37%;
  left: 10%;
  -webkit-background-size: contain;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../img/page/wakeup/section2-item3.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section2 .section-wrap .item3 {
    width: 25%;
    padding-bottom: 18%;
    top: 29%;
    left: 13%;
  }
}
.wrap .section.section2 .section-wrap .item4 {
  width: 4.834%;
  padding-bottom: 15%;
  position: absolute;
  top: 37.5%;
  left: 34%;
  -webkit-background-size: contain;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../img/page/wakeup/section2-item4.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section2 .section-wrap .item4 {
    width: 6%;
    padding-bottom: 17%;
    top: 29%;
    right: 23%;
    left: auto;
  }
}
.wrap .section.section2 .section-wrap .text1 {
  z-index: 1;
  width: 37.25%;
  padding-bottom: 16%;
  position: absolute;
  top: 30%;
  right: 3%;
  -webkit-background-size: contain;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../img/page/wakeup/section2-text1.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section2 .section-wrap .text1 {
    width: 488px;
    padding-bottom: 32%;
    top: 35%;
    left: 50%;
    margin-left: -244px;
    background-position: center;
    background-image: url("../img/page/wakeup/section2-text1-m.png");
  }
}
@media all and (max-width: 500px) {
  .wrap .section.section2 .section-wrap .text1 {
    z-index: 1;
    width: 80%;
    padding-bottom: 51%;
    margin-left: -40%;
  }
}
.wrap .section.section2 .section-wrap .text2 {
  z-index: 1;
  width: 37.25%;
  padding-bottom: 16%;
  position: absolute;
  top: 49%;
  left: 3%;
  -webkit-background-size: contain;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../img/page/wakeup/section2-text2.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section2 .section-wrap .text2 {
    width: 488px;
    padding-bottom: 32%;
    top: 60%;
    left: 50%;
    margin-left: -244px;
    background-position: center;
    background-image: url("../img/page/wakeup/section2-text2-m.png");
  }
}
@media all and (max-width: 500px) {
  .wrap .section.section2 .section-wrap .text2 {
    z-index: 1;
    width: 80%;
    padding-bottom: 51%;
    margin-left: -40%;
  }
}
.wrap .section.section2 .section-wrap .item5 {
  z-index: 3;
  width: 36.5%;
  padding-bottom: 38%;
  position: absolute;
  top: 42%;
  right: 4%;
  -webkit-background-size: contain;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../img/page/wakeup/section2-item5.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section2 .section-wrap .item5 {
    width: 98%;
    padding-bottom: 44%;
    position: absolute;
    top: 46%;
    right: 0%;
    background-image: url("../img/page/wakeup/section2-item5-m.png");
  }
}
.wrap .section.section2 .section-wrap .item5 .wkpeople {
  width: 11.417%;
  padding-bottom: 21%;
}
@media all and (max-width: 800px) {
  .wrap .section.section2 .section-wrap .item5 .wkpeople {
    width: 6.5%;
    padding-bottom: 12%;
  }
}
.wrap .section.section2 .section-wrap .item5 .wkpeople7 {
  top: 40%;
  left: 34%;
  background-image: url("../img/page/wakeup/section2-wkpeople/wkpeople-7.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section2 .section-wrap .item5 .wkpeople7 {
    top: 25%;
    left: 69.3%;
  }
}
.wrap .section.section2 .section-wrap .item5 .wkpeople8 {
  top: 69%;
  left: 14%;
  background-image: url("../img/page/wakeup/section2-wkpeople/wkpeople-8.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section2 .section-wrap .item5 .wkpeople8 {
    top: 66%;
    left: 60%;
  }
}
.wrap .section.section2 .section-wrap .item5 .wkpeople8 .emotion {
  top: -10px;
  left: -25px;
  background-image: url("../img/page/wakeup/emotion-icon/emotion11-l.png");
  animation: emotionJump4 5s linear infinite;
}
@media all and (max-width: 800px) {
  .wrap .section.section2 .section-wrap .item5 .wkpeople8 .emotion {
    left: -18px;
  }
}
.wrap .section.section2 .section-wrap .item5 .wkpeople9 {
  top: 80%;
  left: 45%;
  background-image: url("../img/page/wakeup/section2-wkpeople/wkpeople-9.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section2 .section-wrap .item5 .wkpeople9 {
    top: 83%;
    left: 77%;
  }
}
.wrap .section.section2 .section-wrap .item5 .wkpeople9 .emotion {
  top: -10px;
  right: -25px;
  background-image: url("../img/page/wakeup/emotion-icon/emotion10-r.png");
  animation: emotionJump1 5s linear infinite;
}
@media all and (max-width: 800px) {
  .wrap .section.section2 .section-wrap .item5 .wkpeople9 .emotion {
    right: -18px;
  }
}
.wrap .section.section2 .section-wrap .item5 .wkpeoplem1 {
  top: 80%;
  left: 45%;
  background-image: url("../img/page/wakeup/section2-wkpeople/wkpeople-m1.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section2 .section-wrap .item5 .wkpeoplem1 {
    top: 19%;
    left: 13%;
  }
}
.wrap .section.section2 .section-wrap .item5 .wkpeoplem2 {
  top: 80%;
  left: 45%;
  background-image: url("../img/page/wakeup/section2-wkpeople/wkpeople-m2.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section2 .section-wrap .item5 .wkpeoplem2 {
    top: 70%;
    left: 24%;
  }
}
.wrap .section.section2 .section-wrap .item6 {
  width: 37%;
  padding-bottom: 31%;
  position: absolute;
  top: 60%;
  left: 3%;
  -webkit-background-size: contain;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../img/page/wakeup/section2-item6.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section2 .section-wrap .item6 {
    width: 41%;
    padding-bottom: 34%;
    top: 71.5%;
    left: 1%;
  }
}
.wrap .section.section2 .section-wrap .item6 .wkpeople {
  width: 11.262%;
  padding-bottom: 21%;
}
@media all and (max-width: 800px) {
  .wrap .section.section2 .section-wrap .item6 .wkpeople {
    width: 16%;
    padding-bottom: 30%;
  }
}
.wrap .section.section2 .section-wrap .item6 .wkpeople10 {
  top: 60%;
  left: 34%;
  background-image: url("../img/page/wakeup/section2-wkpeople/wkpeople-10.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section2 .section-wrap .item6 .wkpeople10 {
    top: 48%;
    left: 10%;
  }
}
.wrap .section.section2 .section-wrap .item6 .wkpeople10 .emotion {
  top: -10px;
  left: -25px;
  background-image: url("../img/page/wakeup/emotion-icon/emotion4-l.png");
  animation: emotionJump1 5s linear infinite;
}
@media all and (max-width: 800px) {
  .wrap .section.section2 .section-wrap .item6 .wkpeople10 .emotion {
    left: -18px;
  }
}
.wrap .section.section2 .section-wrap .item6 .wkpeople11 {
  top: 35%;
  left: 87%;
  background-image: url("../img/page/wakeup/section2-wkpeople/wkpeople-11.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section2 .section-wrap .item6 .wkpeople11 {
    top: 21%;
    left: 77%;
  }
}
.wrap .section.section2 .section-wrap .item6 .wkpeople11 .emotion {
  top: -10px;
  right: -25px;
  background-image: url("../img/page/wakeup/emotion-icon/emotion8-r.png");
  animation: emotionJump2 5s linear infinite;
}
@media all and (max-width: 800px) {
  .wrap .section.section2 .section-wrap .item6 .wkpeople11 .emotion {
    right: -18px;
  }
}
.wrap .section.section2 .section-wrap .item7-box {
  z-index: 2;
  position: absolute;
  top: 57.8%;
  right: -30%;
  width: 88.75%;
}
@media all and (max-width: 1600px) {
  .wrap .section.section2 .section-wrap .item7-box {
    right: 0;
  }
}
@media all and (max-width: 800px) {
  .wrap .section.section2 .section-wrap .item7-box {
    top: 74%;
    width: 100%;
  }
}
.wrap .section.section2 .section-wrap .item7-box .light {
  opacity: 0;
  width: 100%;
  padding-bottom: 58%;
  position: absolute;
  -webkit-background-size: contain;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../img/page/wakeup/section2-item7-light.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section2 .section-wrap .item7-box .light {
    background-image: url("../img/page/wakeup/section2-item7-light-m.png");
  }
}
.wrap .section.section2 .section-wrap .item7-box .item7 {
  width: 100%;
  padding-bottom: 58%;
  -webkit-background-size: contain;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../img/page/wakeup/section2-item7.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section2 .section-wrap .item7-box .item7 {
    background-image: url("../img/page/wakeup/section2-item7-m.png");
  }
}
@keyframes light {
  20% {
    opacity: 0;
  }
  24% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  27.5% {
    opacity: 0.5;
  }
  30% {
    opacity: 1;
  }
  39% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
  45% {
    opacity: 1;
  }
  47.5% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
  51% {
    opacity: 0;
  }
  55% {
    opacity: 1;
  }
  57.5% {
    opacity: 0.5;
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
.wrap .section.section2 .section-wrap .plain1-box {
  z-index: 2;
  position: absolute;
  top: 78%;
  right: 0%;
  width: 88.75%;
  animation: plainfly1 40s linear infinite;
}
@media all and (max-width: 800px) {
  .wrap .section.section2 .section-wrap .plain1-box {
    top: auto;
    bottom: 16%;
  }
}
.wrap .section.section2 .section-wrap .plain1-box .plain1 {
  opacity: 0.95;
  width: 100%;
  padding-bottom: 12%;
  position: absolute;
  -webkit-background-size: contain;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../img/page/wakeup/section2-plain1.png");
  animation: plainfloat 4s linear infinite;
}
@media all and (max-width: 800px) {
  .wrap .section.section2 .section-wrap .plain1-box .plain1 {
    width: 130%;
    padding-bottom: 15%;
  }
}
.wrap .section.section2 .section-wrap .plain2-box {
  z-index: 2;
  position: absolute;
  top: 86%;
  left: 0%;
  width: 88.75%;
  animation: plainfly2 40s linear infinite;
}
@media all and (max-width: 800px) {
  .wrap .section.section2 .section-wrap .plain2-box {
    top: auto;
    bottom: 11%;
  }
}
.wrap .section.section2 .section-wrap .plain2-box .plain2 {
  opacity: 0.95;
  width: 100%;
  padding-bottom: 12%;
  position: absolute;
  -webkit-background-size: contain;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../img/page/wakeup/section2-plain2.png");
  animation: plainfloat 4s linear infinite;
}
@media all and (max-width: 800px) {
  .wrap .section.section2 .section-wrap .plain2-box .plain2 {
    width: 130%;
    padding-bottom: 16%;
  }
}
@keyframes plainfly1 {
  0% {
    transform: translate3d(150%, 0, 0);
  }
  70% {
    transform: translate3d(-150%, 0, 0);
  }
  100% {
    transform: translate3d(-150%, 0, 0);
  }
}
@keyframes plainfly2 {
  0% {
    transform: translate3d(-150%, 0, 0);
  }
  30% {
    transform: translate3d(-150%, 0, 0);
  }
  100% {
    transform: translate3d(150%, 0, 0);
  }
}
@keyframes plainfloat {
  0% {
    transform: translate3d(0, 0px, 0);
  }
  55% {
    transform: translate3d(0, 5%, 0);
  }
  100% {
    transform: translate3d(0, 0px, 0);
  }
}
.wrap .section.section2 .section-wrap .road {
  background-color: #578fe6;
}
.wrap .section.section2 .wall-box {
  z-index: 3;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 78px;
}
.wrap .section.section2 .wall-box .wall-left {
  float: left;
  width: calc(50% - 49px);
  height: 78px;
  background-repeat: repeat;
  background-image: url("../img/page/wakeup/section2-wall.png");
}
.wrap .section.section2 .wall-box .wall-right {
  float: right;
  width: calc(50% - 49px);
  height: 78px;
  background-repeat: repeat;
  background-image: url("../img/page/wakeup/section2-wall.png");
}
.wrap .section.section2 .wall-box .door {
  float: left;
  width: 98px;
  height: 78px;
  background-repeat: repeat;
  background-image: url("../img/page/wakeup/section2-door.png");
}
.wrap .section.section3 {
  background-color: #a46f43;
  background-image: url("../img/page/wakeup/section3-bg.png");
}
.wrap .section.section3 .section-wrap {
  padding-bottom: 100%;
}
@media all and (max-width: 1600px) {
  .wrap .section.section3 .section-wrap {
    padding-bottom: 120%;
  }
}
@media all and (max-width: 1200px) {
  .wrap .section.section3 .section-wrap {
    padding-bottom: 160%;
  }
}
@media all and (max-width: 800px) {
  .wrap .section.section3 .section-wrap {
    padding-bottom: 460%;
  }
}
.wrap .section.section3 .section-wrap .item1 {
  width: 35.75%;
  padding-bottom: 33%;
  position: absolute;
  top: 3%;
  left: 1%;
  -webkit-background-size: contain;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../img/page/wakeup/section3-item1.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section3 .section-wrap .item1 {
    width: 90%;
    padding-bottom: 44%;
    top: 14%;
    left: 3%;
    background-image: url("../img/page/wakeup/section3-item1-m.png");
  }
}
@media all and (max-width: 500px) {
  .wrap .section.section3 .section-wrap .item1 {
    top: 12%;
  }
}
.wrap .section.section3 .section-wrap .item1 .camera-light {
  pointer-events: none;
  z-index: 1;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  padding-bottom: 100%;
  -webkit-background-size: contain;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../img/page/wakeup/section3-item1-light.png");
  animation: cameraLight 5s linear infinite;
}
@media all and (max-width: 800px) {
  .wrap .section.section3 .section-wrap .item1 .camera-light {
    top: -63%;
    left: -20%;
  }
}
@keyframes cameraLight {
  0% {
    opacity: 0;
  }
  2% {
    opacity: 1;
  }
  4% {
    opacity: 0;
  }
  6% {
    opacity: 1;
  }
  8% {
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
  22% {
    opacity: 1;
  }
  24% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.wrap .section.section3 .section-wrap .item1 .wkpeople {
  width: 11.656%;
  padding-bottom: 21%;
}
@media all and (max-width: 800px) {
  .wrap .section.section3 .section-wrap .item1 .wkpeople {
    width: 7%;
    padding-bottom: 13%;
  }
}
.wrap .section.section3 .section-wrap .item1 .wkpeople1 {
  top: 52%;
  left: 49.5%;
  background-image: url("../img/page/wakeup/section3-wkpeople/wkpeople-1.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section3 .section-wrap .item1 .wkpeople1 {
    top: 49%;
    left: 24%;
  }
}
.wrap .section.section3 .section-wrap .item1 .wkpeople2 {
  top: 54.5%;
  left: 43%;
  background-image: url("../img/page/wakeup/section3-wkpeople/wkpeople-2.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section3 .section-wrap .item1 .wkpeople2 {
    top: 53%;
    left: 19%;
  }
}
.wrap .section.section3 .section-wrap .item1 .wkpeople3 {
  top: 57%;
  left: 36%;
  background-image: url("../img/page/wakeup/section3-wkpeople/wkpeople-3.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section3 .section-wrap .item1 .wkpeople3 {
    top: 57%;
    left: 13%;
  }
}
.wrap .section.section3 .section-wrap .item1 .wkpeople4 {
  top: 56%;
  right: -3%;
  background-image: url("../img/page/wakeup/section3-wkpeople/wkpeople-4.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section3 .section-wrap .item1 .wkpeople4 {
    top: 52%;
    right: 21%;
  }
}
.wrap .section.section3 .section-wrap .item1 .wkpeople4 .emotion {
  top: -10px;
  right: -25px;
  background-image: url("../img/page/wakeup/emotion-icon/emotion1-r.png");
  animation: emotionJump3 5s linear infinite;
}
@media all and (max-width: 800px) {
  .wrap .section.section3 .section-wrap .item1 .wkpeople4 .emotion {
    right: -18px;
  }
}
.wrap .section.section3 .section-wrap .title {
  width: 35.5%;
  padding-bottom: 20%;
  position: absolute;
  top: 3%;
  right: 5%;
  -webkit-background-size: contain;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../img/page/wakeup/section3-title.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section3 .section-wrap .title {
    z-index: 1;
    width: 426px;
    padding-bottom: 49%;
    top: 2%;
    left: 50%;
    margin-left: -213px;
    background-position: center;
    background-image: url("../img/page/wakeup/section3-title-m.png");
  }
}
@media all and (max-width: 500px) {
  .wrap .section.section3 .section-wrap .title {
    z-index: 1;
    width: 80%;
    padding-bottom: 51%;
    top: 2%;
    left: 50%;
    margin-left: -40%;
  }
}
.wrap .section.section3 .section-wrap .text1 {
  width: 37.334%;
  padding-bottom: 14%;
  position: absolute;
  top: 27%;
  left: 2%;
  -webkit-background-size: contain;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../img/page/wakeup/section3-text1.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section3 .section-wrap .text1 {
    z-index: 1;
    width: 70%;
    padding-bottom: 33%;
    top: 24%;
    left: 50%;
    margin-left: -35%;
    background-position: center;
    background-image: url("../img/page/wakeup/section3-text1-m.png");
  }
}
@media all and (max-width: 500px) {
  .wrap .section.section3 .section-wrap .text1 {
    z-index: 1;
    width: 80%;
    padding-bottom: 43%;
    top: 22%;
    left: 50%;
    margin-left: -40%;
  }
}
.wrap .section.section3 .section-wrap .item2 {
  z-index: 1;
  width: 35.75%;
  padding-bottom: 33%;
  position: absolute;
  top: 19%;
  right: 4%;
  -webkit-background-size: contain;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../img/page/wakeup/section3-item2.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section3 .section-wrap .item2 {
    width: 42%;
    padding-bottom: 38%;
    top: 34%;
    right: -1%;
  }
}
.wrap .section.section3 .section-wrap .item2 .item2-mask {
  z-index: 1;
  width: 100%;
  padding-bottom: 92%;
  position: absolute;
  -webkit-background-size: contain;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../img/page/wakeup/section3-item2-mask.png");
}
.wrap .section.section3 .section-wrap .item2 .wkpeople5-box {
  top: 26%;
  left: 14%;
  width: 12%;
  padding-bottom: 21%;
  animation: bartender 8s linear infinite;
}
@media all and (max-width: 800px) {
  .wrap .section.section3 .section-wrap .item2 .wkpeople5-box {
    top: 15%;
    left: 8%;
    width: 17%!important;
    padding-bottom: 30%!important;
    animation: bartenderM 8s linear infinite;
  }
}
.wrap .section.section3 .section-wrap .item2 .wkpeople5-box .wkpeople5 {
  z-index: 1;
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-background-size: contain;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../img/page/wakeup/section3-wkpeople/wkpeople-5.png");
}
.wrap .section.section3 .section-wrap .item2 .wkpeople5-box .wine1 {
  z-index: 1;
  width: 58%;
  padding-bottom: 84%;
  position: absolute;
  top: 30%;
  left: -20%;
  -webkit-background-size: contain;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../img/page/wakeup/section3-wkpeople/wkpeople-5-wine1.png");
  animation: wine1 12s linear infinite;
}
.wrap .section.section3 .section-wrap .item2 .wkpeople5-box .wine2 {
  z-index: 1;
  width: 58%;
  padding-bottom: 84%;
  position: absolute;
  top: 28%;
  left: 59%;
  -webkit-background-size: contain;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../img/page/wakeup/section3-wkpeople/wkpeople-5-wine2.png");
  animation: wine2 16s linear infinite;
}
@keyframes bartender {
  0% {
    transform: translate3d(0%, 0%, 0);
  }
  4% {
    transform: translate3d(320%, 94%, 0);
  }
  30% {
    transform: translate3d(320%, 94%, 0);
  }
  33% {
    transform: translate3d(120%, 40%, 0px);
  }
  60% {
    transform: translate3d(120%, 40%, 0px);
  }
  62% {
    transform: translate3d(0%, 0%, 0);
  }
  100% {
    transform: translate3d(0%, 0%, 0);
  }
}
@keyframes bartenderM {
  0% {
    transform: translate3d(0%, 0%, 0);
  }
  4% {
    transform: translate3d(242%, 80%, 0);
  }
  30% {
    transform: translate3d(242%, 80%, 0);
  }
  33% {
    transform: translate3d(120%, 40%, 0px);
  }
  60% {
    transform: translate3d(120%, 40%, 0px);
  }
  62% {
    transform: translate3d(0%, 0%, 0);
  }
  100% {
    transform: translate3d(0%, 0%, 0);
  }
}
@keyframes wine1 {
  0% {
    transform: translate3d(0%, 0%, 0) rotate(0deg);
  }
  4% {
    transform: translate3d(0%, -150%, 0) rotate(900deg);
  }
  10% {
    transform: translate3d(0%, 0%, 0) rotate(2700deg);
  }
  10.1% {
    transform: translate3d(0%, 0%, 0) rotate(0deg);
  }
  100% {
    transform: translate3d(0%, 0%, 0) rotate(0deg);
  }
}
@keyframes wine2 {
  0% {
    transform: translate3d(0%, 0%, 0) rotate(0deg);
  }
  43.9% {
    transform: translate3d(0%, 0%, 0) rotate(0deg);
  }
  44% {
    transform: translate3d(0%, -150%, 0) rotate(900deg);
  }
  50% {
    transform: translate3d(0%, 0%, 0) rotate(2700deg);
  }
  50.1% {
    transform: translate3d(0%, 0%, 0) rotate(0deg);
  }
  100% {
    transform: translate3d(0%, 0%, 0) rotate(0deg);
  }
}
.wrap .section.section3 .section-wrap .item2 .wkpeople {
  width: 11.656%;
  padding-bottom: 21%;
}
@media all and (max-width: 800px) {
  .wrap .section.section3 .section-wrap .item2 .wkpeople {
    width: 15%;
    padding-bottom: 27%;
  }
}
.wrap .section.section3 .section-wrap .item2 .wkpeople6 {
  z-index: 1;
  top: 41%;
  left: -2%;
  background-image: url("../img/page/wakeup/section3-wkpeople/wkpeople-6.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section3 .section-wrap .item2 .wkpeople6 {
    top: 33%;
    left: -4%;
  }
}
.wrap .section.section3 .section-wrap .item2 .wkpeople6 .emotion {
  top: -10px;
  left: -25px;
  background-image: url("../img/page/wakeup/emotion-icon/emotion7-l.png");
  animation: emotionJump3 5s linear infinite;
}
@media all and (max-width: 800px) {
  .wrap .section.section3 .section-wrap .item2 .wkpeople6 .emotion {
    left: -18px;
  }
}
.wrap .section.section3 .section-wrap .item2 .wkpeople7 {
  z-index: 1;
  top: 55%;
  left: 28.3%;
  background-image: url("../img/page/wakeup/section3-wkpeople/wkpeople-7.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section3 .section-wrap .item2 .wkpeople7 {
    top: 53%;
    left: 36%;
  }
}
.wrap .section.section3 .section-wrap .item2 .wkpeople7 .emotion {
  top: -10px;
  left: -25px;
  background-image: url("../img/page/wakeup/emotion-icon/emotion7-l.png");
  animation: emotionJump5 5s linear infinite;
}
@media all and (max-width: 800px) {
  .wrap .section.section3 .section-wrap .item2 .wkpeople7 .emotion {
    left: -18px;
  }
}
.wrap .section.section3 .section-wrap .item2 .wkpeople8 {
  z-index: 1;
  top: 60%;
  left: 38.5%;
  background-image: url("../img/page/wakeup/section3-wkpeople/wkpeople-8.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section3 .section-wrap .item2 .wkpeople8 {
    top: 50%;
    left: 75.5%;
  }
}
.wrap .section.section3 .section-wrap .item2 .wkpeople8 .emotion {
  top: -10px;
  right: -25px;
  background-image: url("../img/page/wakeup/emotion-icon/emotion7-r.png");
  animation: emotionJump4 5s linear infinite;
}
@media all and (max-width: 800px) {
  .wrap .section.section3 .section-wrap .item2 .wkpeople8 .emotion {
    right: -18px;
  }
}
.wrap .section.section3 .section-wrap .item3 {
  z-index: 1;
  width: 36.167%;
  padding-bottom: 26%;
  position: absolute;
  top: 39%;
  left: 3%;
  -webkit-background-size: contain;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../img/page/wakeup/section3-item3.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section3 .section-wrap .item3 {
    width: 33%;
    padding-bottom: 43%;
    position: absolute;
    top: 36%;
    left: 6%;
    background-image: url("../img/page/wakeup/section3-item3-m.png");
  }
}
.wrap .section.section3 .section-wrap .item3 .wkpeople {
  width: 11.524%;
  padding-bottom: 21%;
}
@media all and (max-width: 800px) {
  .wrap .section.section3 .section-wrap .item3 .wkpeople {
    width: 20%;
    padding-bottom: 36%;
  }
}
.wrap .section.section3 .section-wrap .item3 .wkpeople9 {
  top: 46%;
  left: -8%;
  background-image: url("../img/page/wakeup/section3-wkpeople/wkpeople-9.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section3 .section-wrap .item3 .wkpeople9 {
    z-index: 1;
    top: 31%;
    left: 5%;
  }
}
.wrap .section.section3 .section-wrap .item3 .wkpeople9 .emotion {
  top: -16px;
  left: -27px;
  background-image: url("../img/page/wakeup/emotion-icon/emotion2-l.png");
  animation: emotionJump2 5s linear infinite;
}
@media all and (max-width: 800px) {
  .wrap .section.section3 .section-wrap .item3 .wkpeople9 .emotion {
    left: -24px;
  }
}
.wrap .section.section3 .section-wrap .item3 .wkpeople10 {
  top: 23%;
  left: 4%;
  width: 11.524%;
  padding-bottom: 21%;
  background-image: url("../img/page/wakeup/section3-wkpeople/wkpeople-10.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section3 .section-wrap .item3 .wkpeople10 {
    z-index: 1;
    top: 32%;
    left: 36%;
    width: 23%;
    padding-bottom: 34%;
    background-image: url("../img/page/wakeup/section3-wkpeople/wkpeople-10-m.png");
  }
}
.wrap .section.section3 .section-wrap .item3 .wkpeople10 .emotion {
  top: -16px;
  left: -27px;
  background-image: url("../img/page/wakeup/emotion-icon/emotion11-l.png");
  animation: emotionJump2 5s linear infinite;
}
@media all and (max-width: 800px) {
  .wrap .section.section3 .section-wrap .item3 .wkpeople10 .emotion {
    left: -24px;
  }
}
.wrap .section.section3 .section-wrap .item3 .wkpeople11 {
  top: -6%;
  left: 16%;
  background-image: url("../img/page/wakeup/section3-wkpeople/wkpeople-11.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section3 .section-wrap .item3 .wkpeople11 {
    top: -7%;
    left: 42%;
  }
}
.wrap .section.section3 .section-wrap .item3 .wkpeople11 .emotion {
  top: -16px;
  left: -27px;
  background-image: url("../img/page/wakeup/emotion-icon/emotion2-l.png");
  animation: emotionJump2 5s linear infinite;
}
@media all and (max-width: 800px) {
  .wrap .section.section3 .section-wrap .item3 .wkpeople11 .emotion {
    left: -24px;
  }
}
.wrap .section.section3 .section-wrap .item3 .wkpeople12 {
  top: -10%;
  left: 37%;
  background-image: url("../img/page/wakeup/section3-wkpeople/wkpeople-12.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section3 .section-wrap .item3 .wkpeople12 {
    top: -2%;
    left: 68%;
  }
}
.wrap .section.section3 .section-wrap .item3 .wkpeople12 .emotion {
  top: -10px;
  right: -25px;
  background-image: url("../img/page/wakeup/emotion-icon/emotion2-r.png");
  animation: emotionJump2 5s linear infinite;
}
@media all and (max-width: 800px) {
  .wrap .section.section3 .section-wrap .item3 .wkpeople12 .emotion {
    right: -18px;
  }
}
.wrap .section.section3 .section-wrap .item3 .wkpeople13 {
  top: 47%;
  left: 27%;
  background-image: url("../img/page/wakeup/section3-wkpeople/wkpeople-13.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section3 .section-wrap .item3 .wkpeople13 {
    display: none;
  }
}
.wrap .section.section3 .section-wrap .item3 .wkpeople14 {
  z-index: 1;
  top: 62%;
  left: 39%;
  background-image: url("../img/page/wakeup/section3-wkpeople/wkpeople-14.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section3 .section-wrap .item3 .wkpeople14 {
    display: none;
  }
}
.wrap .section.section3 .section-wrap .item3 .wkpeople14 .emotion {
  top: -10px;
  right: -25px;
  background-image: url("../img/page/wakeup/emotion-icon/emotion2-r.png");
  animation: emotionJump2 5s linear infinite;
}
@media all and (max-width: 800px) {
  .wrap .section.section3 .section-wrap .item3 .wkpeople14 .emotion {
    right: -18px;
  }
}
.wrap .section.section3 .section-wrap .item3 .wkpeople15 {
  top: 48%;
  left: 50%;
  background-image: url("../img/page/wakeup/section3-wkpeople/wkpeople-15.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section3 .section-wrap .item3 .wkpeople15 {
    display: none;
  }
}
.wrap .section.section3 .section-wrap .item3 .wkpeople15 .emotion {
  top: -10px;
  right: -25px;
  background-image: url("../img/page/wakeup/emotion-icon/emotion2-r.png");
  animation: emotionJump2 5s linear infinite;
}
@media all and (max-width: 800px) {
  .wrap .section.section3 .section-wrap .item3 .wkpeople15 .emotion {
    right: -18px;
  }
}
.wrap .section.section3 .section-wrap .item3 .lala {
  position: absolute;
  top: 60%;
  left: 12%;
  width: 10.1%;
  padding-bottom: 14%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../img/page/wakeup/section3-wkpeople/lala.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section3 .section-wrap .item3 .lala {
    z-index: 1;
    top: 60%;
    left: 56.5%;
    width: 15%;
    padding-bottom: 20%;
  }
}
.wrap .section.section3 .section-wrap .item3 .lala .emotion {
  top: -16px;
  left: -27px;
  background-image: url("../img/page/wakeup/emotion-icon/emotion8-l.png");
  animation: emotionJump1 5s linear infinite;
}
@media all and (max-width: 800px) {
  .wrap .section.section3 .section-wrap .item3 .lala .emotion {
    left: -24px;
  }
}
.wrap .section.section3 .section-wrap .text2 {
  width: 37.334%;
  padding-bottom: 19%;
  position: absolute;
  top: 44%;
  right: 1%;
  -webkit-background-size: contain;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../img/page/wakeup/section3-text2.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section3 .section-wrap .text2 {
    z-index: 1;
    width: 70%;
    padding-bottom: 33%;
    top: 44%;
    left: 50%;
    margin-left: -35%;
    background-image: url("../img/page/wakeup/section3-text2-m.png");
  }
}
@media all and (max-width: 500px) {
  .wrap .section.section3 .section-wrap .text2 {
    z-index: 1;
    width: 80%;
    padding-bottom: 36%;
    top: 44%;
    left: 50%;
    margin-left: -40%;
  }
}
.wrap .section.section3 .section-wrap .item4 {
  width: 43.917%;
  padding-bottom: 39%;
  position: absolute;
  top: 57%;
  left: 0%;
  -webkit-background-size: contain;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../img/page/wakeup/section3-item4.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section3 .section-wrap .item4 {
    z-index: 1;
    width: 96%;
    padding-bottom: 50%;
    top: 51%;
    left: 4%;
    background-image: url("../img/page/wakeup/section3-item4-m.png");
  }
}
@media all and (max-width: 500px) {
  .wrap .section.section3 .section-wrap .item4 {
    top: 53%;
  }
}
.wrap .section.section3 .section-wrap .item4 .car {
  width: 23.15%;
  padding-bottom: 12%;
  position: absolute;
  top: 26.5%;
  left: 16%;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../img/page/wakeup/section3-item4-car.png");
  animation: carFly 1.6s linear infinite;
}
@media all and (max-width: 800px) {
  .wrap .section.section3 .section-wrap .item4 .car {
    display: none;
  }
}
@keyframes carFly {
  0% {
    transform: translate3d(0, 0, 0);
  }
  25% {
    transform: translate3d(0, -10%, 0);
  }
  75% {
    transform: translate3d(0, 10%, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
.wrap .section.section3 .section-wrap .item4 .wkpeople {
  width: 9.49%;
  padding-bottom: 18%;
}
@media all and (max-width: 800px) {
  .wrap .section.section3 .section-wrap .item4 .wkpeople {
    width: 6.5%;
    padding-bottom: 12%;
  }
}
.wrap .section.section3 .section-wrap .item4 .wkpeople17 {
  top: 32%;
  left: 58%;
  background-image: url("../img/page/wakeup/section3-wkpeople/wkpeople-17.png");
  animation: celineJump 1.6s ease infinite;
}
@media all and (max-width: 800px) {
  .wrap .section.section3 .section-wrap .item4 .wkpeople17 {
    top: 50%;
    left: 28%;
  }
}
.wrap .section.section3 .section-wrap .item4 .wkpeople17 .emotion {
  top: -10px;
  right: -25px;
  background-image: url("../img/page/wakeup/emotion-icon/emotion2-r.png");
  animation: emotionJump2 5s linear infinite;
}
@media all and (max-width: 800px) {
  .wrap .section.section3 .section-wrap .item4 .wkpeople17 .emotion {
    right: -18px;
  }
}
@keyframes celineJump {
  0% {
    transform: translate3d(0, 0px, 0);
  }
  12.5% {
    transform: translate3d(0, -30px, 0);
  }
  25% {
    transform: translate3d(0, 0px, 0);
  }
  37.5% {
    transform: translate3d(0, -30px, 0);
  }
  50% {
    transform: translate3d(0, 0px, 0);
  }
  100% {
    transform: translate3d(0, 0px, 0);
  }
}
.wrap .section.section3 .section-wrap .item4 .wkpeople18 {
  top: 54%;
  left: 28%;
  background-image: url("../img/page/wakeup/section3-wkpeople/wkpeople-18.png");
  animation: celineJump2 1.6s ease infinite;
}
@media all and (max-width: 800px) {
  .wrap .section.section3 .section-wrap .item4 .wkpeople18 {
    top: 66%;
    left: 16%;
  }
}
@keyframes celineJump2 {
  0% {
    transform: translate3d(0, 0px, 0);
  }
  10% {
    transform: translate3d(0, 0px, 0);
  }
  22.5% {
    transform: translate3d(0, -30px, 0);
  }
  35% {
    transform: translate3d(0, 0px, 0);
  }
  47.5% {
    transform: translate3d(0, -30px, 0);
  }
  60% {
    transform: translate3d(0, 0px, 0);
  }
  100% {
    transform: translate3d(0, 0px, 0);
  }
}
.wrap .section.section3 .section-wrap .item4 .wkpeople19 {
  top: 48%;
  left: 70%;
  background-image: url("../img/page/wakeup/section3-wkpeople/wkpeople-19.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section3 .section-wrap .item4 .wkpeople19 {
    top: 46.5%;
    left: 84.5%;
  }
}
.wrap .section.section3 .section-wrap .item4 .wkpeople20 {
  top: 53.5%;
  left: 61%;
  background-image: url("../img/page/wakeup/section3-wkpeople/wkpeople-20.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section3 .section-wrap .item4 .wkpeople20 {
    top: 54.5%;
    left: 78%;
  }
}
.wrap .section.section3 .section-wrap .item4 .wkpeople21-box {
  top: 56%;
  left: 17%;
  position: absolute;
  width: 9.49%;
  padding-bottom: 18%;
  background-repeat: no-repeat;
  transform-origin: bottom center;
}
@media all and (max-width: 800px) {
  .wrap .section.section3 .section-wrap .item4 .wkpeople21-box {
    width: 6.5%;
    padding-bottom: 12%;
    top: 52%;
    left: 59%;
  }
}
.wrap .section.section3 .section-wrap .item4 .wkpeople21-box .wkpeople21 {
  width: 100%;
  height: 100%;
  padding-bottom: 0;
  transform-origin: bottom center;
  background-image: url("../img/page/wakeup/section3-wkpeople/wkpeople-21.png");
  animation: jamesRotate 4s linear infinite;
}
.wrap .section.section3 .section-wrap .item4 .wkpeople21-box .wkpeople21 .emotion {
  top: -20px;
  left: -35px;
  background-image: url("../img/page/wakeup/emotion-icon/emotion6-l.png");
  animation: emotionJump3 5s linear infinite;
}
@media all and (max-width: 800px) {
  .wrap .section.section3 .section-wrap .item4 .wkpeople21-box .wkpeople21 .emotion {
    left: -28px;
  }
}
.wrap .section.section3 .section-wrap .item4 .wkpeople21-box.wkactive {
  transform: rotate(110deg) !important;
  transition: all 0.5s cubic-bezier(1, -0.42, 0.33, 1.4) !important;
}
.wrap .section.section3 .section-wrap .item4 .wkpeople21-box.wkactive .wkpeople21 {
  animation: none;
}
@keyframes jamesRotate {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(5deg);
  }
  75% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.wrap .section.section3 .section-wrap .item4 .wkpeopleM1 {
  top: 53.5%;
  left: 61%;
  background-image: url("../img/page/wakeup/section3-wkpeople/wkpeople-13.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section3 .section-wrap .item4 .wkpeopleM1 {
    top: 22%;
    left: 61%;
  }
}
.wrap .section.section3 .section-wrap .item4 .wkpeopleM2 {
  top: 53.5%;
  left: 61%;
  background-image: url("../img/page/wakeup/section3-wkpeople/wkpeople-14.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section3 .section-wrap .item4 .wkpeopleM2 {
    top: 33.5%;
    left: 68%;
  }
}
.wrap .section.section3 .section-wrap .item4 .wkpeopleM3 {
  top: 53.5%;
  left: 61%;
  background-image: url("../img/page/wakeup/section3-wkpeople/wkpeople-15.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section3 .section-wrap .item4 .wkpeopleM3 {
    top: 22%;
    left: 74%;
  }
}
.wrap .section.section3 .section-wrap .text4 {
  display: none!important;
  width: 37.334%;
  padding-bottom: 19%;
  position: absolute;
  top: 44%;
  right: 1%;
  -webkit-background-size: contain;
  background-size: contain;
  background-repeat: no-repeat;
}
@media all and (max-width: 800px) {
  .wrap .section.section3 .section-wrap .text4 {
    display: block!important;
    z-index: 1;
    width: 70%;
    padding-bottom: 29%;
    top: 66%;
    left: 50%;
    margin-left: -35%;
    background-position: center;
    background-image: url("../img/page/wakeup/section3-text4-m.png");
  }
}
@media all and (max-width: 500px) {
  .wrap .section.section3 .section-wrap .text4 {
    z-index: 1;
    width: 80%;
    padding-bottom: 33%;
    top: 66%;
    left: 50%;
    margin-left: -40%;
  }
}
.wrap .section.section3 .section-wrap .item5 {
  z-index: 1;
  width: 37.334%;
  padding-bottom: 26%;
  position: absolute;
  top: 60%;
  right: 2%;
  -webkit-background-size: contain;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../img/page/wakeup/section3-item5.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section3 .section-wrap .item5 {
    width: 90%;
    padding-bottom: 50%;
    top: 72%;
    background-image: url("../img/page/wakeup/section3-item5-m.png");
  }
}
@media all and (max-width: 500px) {
  .wrap .section.section3 .section-wrap .item5 {
    top: 74%;
  }
}
.wrap .section.section3 .section-wrap .item5 .cash {
  z-index: 1;
  position: absolute;
  top: 53%;
  left: -3%;
  width: 100%;
  padding-bottom: 71%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../img/page/wakeup/section3-wkpeople/lala.png");
}
.wrap .section.section3 .section-wrap .item5 .cash1 {
  background-image: url("../img/page/wakeup/section3-cash1.png");
  animation: cashFloat1 8s linear infinite;
}
.wrap .section.section3 .section-wrap .item5 .cash2 {
  background-image: url("../img/page/wakeup/section3-cash2.png");
}
.wrap .section.section3 .section-wrap .item5 .cash3 {
  background-image: url("../img/page/wakeup/section3-cash3.png");
  animation: cashFloat2 12s linear infinite;
}
@keyframes cashFloat1 {
  0% {
    transform: translate3d(0px, 0%, 0px);
  }
  25% {
    transform: translate3d(0px, -5%, 0px);
  }
  75% {
    transform: translate3d(0px, 5%, 0px);
  }
  100% {
    transform: translate3d(0px, 0%, 0px);
  }
}
@keyframes cashFloat2 {
  0% {
    transform: translate3d(0px, 0%, 0px);
  }
  25% {
    transform: translate3d(0px, 5%, 0px);
  }
  75% {
    transform: translate3d(0px, -5%, 0px);
  }
  100% {
    transform: translate3d(0px, 0%, 0px);
  }
}
.wrap .section.section3 .section-wrap .item5 .wkpeople {
  width: 11.161%;
  padding-bottom: 20%;
}
@media all and (max-width: 800px) {
  .wrap .section.section3 .section-wrap .item5 .wkpeople {
    width: 7%;
    padding-bottom: 13%;
  }
}
.wrap .section.section3 .section-wrap .item5 .wkpeople22 {
  top: 41%;
  left: 62%;
  background-image: url("../img/page/wakeup/section3-wkpeople/wkpeople-22.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section3 .section-wrap .item5 .wkpeople22 {
    top: 25%;
    left: 76%;
  }
}
.wrap .section.section3 .section-wrap .item5 .wkpeople23 {
  top: 77%;
  left: 5%;
  background-image: url("../img/page/wakeup/section3-wkpeople/wkpeople-23.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section3 .section-wrap .item5 .wkpeople23 {
    top: 95%;
  }
}
.wrap .section.section3 .section-wrap .item5 .wkpeople23 .emotion {
  top: -10px;
  left: -25px;
  background-image: url("../img/page/wakeup/emotion-icon/emotion11-l.png");
  animation: emotionJump1 5s linear infinite;
}
@media all and (max-width: 800px) {
  .wrap .section.section3 .section-wrap .item5 .wkpeople23 .emotion {
    left: -18px;
  }
}
.wrap .section.section3 .section-wrap .item5 .wkpeople24 {
  top: 69%;
  left: 34%;
  background-image: url("../img/page/wakeup/section3-wkpeople/wkpeople-24.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section3 .section-wrap .item5 .wkpeople24 {
    top: 92%;
    left: 19%;
  }
}
.wrap .section.section3 .section-wrap .item5 .wkpeople24 .emotion {
  top: -10px;
  left: -25px;
  background-image: url("../img/page/wakeup/emotion-icon/emotion11-l.png");
  animation: emotionJump3 5s linear infinite;
}
@media all and (max-width: 800px) {
  .wrap .section.section3 .section-wrap .item5 .wkpeople24 .emotion {
    left: -18px;
  }
}
.wrap .section.section3 .section-wrap .item5 .wkpeople25 {
  top: 85%;
  left: 63%;
  background-image: url("../img/page/wakeup/section3-wkpeople/wkpeople-25.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section3 .section-wrap .item5 .wkpeople25 {
    left: 61%;
  }
}
.wrap .section.section3 .section-wrap .item5 .wkpeople25 .emotion {
  top: -10px;
  right: -25px;
  background-image: url("../img/page/wakeup/emotion-icon/emotion11-r.png");
  animation: emotionJump2 5s linear infinite;
}
@media all and (max-width: 800px) {
  .wrap .section.section3 .section-wrap .item5 .wkpeople25 .emotion {
    right: -18px;
  }
}
.wrap .section.section3 .section-wrap .item5 .wkpeople26 {
  top: 87%;
  left: 90%;
  background-image: url("../img/page/wakeup/section3-wkpeople/wkpeople-26.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section3 .section-wrap .item5 .wkpeople26 {
    left: 82%;
  }
}
.wrap .section.section3 .section-wrap .item5 .wkpeople26 .emotion {
  top: -10px;
  right: -25px;
  background-image: url("../img/page/wakeup/emotion-icon/emotion11-r.png");
  animation: emotionJump5 5s linear infinite;
}
@media all and (max-width: 800px) {
  .wrap .section.section3 .section-wrap .item5 .wkpeople26 .emotion {
    right: -18px;
  }
}
.wrap .section.section3 .section-wrap .item5 .wkpeople27 {
  top: 125%;
  left: 12%;
  background-image: url("../img/page/wakeup/section3-wkpeople/wkpeople-27.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section3 .section-wrap .item5 .wkpeople27 {
    top: 155%;
  }
}
.wrap .section.section3 .section-wrap .item5 .wkpeople27 .emotion {
  top: -10px;
  left: -25px;
  background-image: url("../img/page/wakeup/emotion-icon/emotion11-l.png");
  animation: emotionJump2 5s linear infinite;
}
@media all and (max-width: 800px) {
  .wrap .section.section3 .section-wrap .item5 .wkpeople27 .emotion {
    left: -18px;
  }
}
.wrap .section.section3 .section-wrap .item5 .wkpeople28 {
  top: 124%;
  left: 41%;
  background-image: url("../img/page/wakeup/section3-wkpeople/wkpeople-28.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section3 .section-wrap .item5 .wkpeople28 {
    top: 145%;
    left: 64%;
  }
}
.wrap .section.section3 .section-wrap .item5 .wkpeople28 .emotion {
  top: -10px;
  right: -25px;
  background-image: url("../img/page/wakeup/emotion-icon/emotion11-r.png");
  animation: emotionJump5 5s linear infinite;
}
@media all and (max-width: 800px) {
  .wrap .section.section3 .section-wrap .item5 .wkpeople28 .emotion {
    right: -18px;
  }
}
.wrap .section.section3 .section-wrap .road {
  background-color: #d1c4b1;
}
@media all and (max-width: 800px) {
  .wrap .section.section3 .section-wrap .road .fresh-man {
    display: none;
  }
}
.wrap .section.section3 .wall-box {
  z-index: 3;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 72px;
}
.wrap .section.section3 .wall-box .wall-left {
  float: left;
  width: calc(50% - 49px);
  height: 72px;
  background-repeat: repeat;
  background-position: right top;
  background-image: url("../img/page/wakeup/section3-wall.png");
}
.wrap .section.section3 .wall-box .wall-right {
  float: right;
  width: calc(50% - 49px);
  height: 72px;
  background-repeat: repeat;
  background-position: left top;
  background-image: url("../img/page/wakeup/section3-wall.png");
}
.wrap .section.section4 {
  background-color: #263066;
  background-image: url("../img/page/wakeup/section4-bg.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section4 {
    background-image: url("../img/page/wakeup/section4-bg-m.png");
  }
}
.wrap .section.section4 .section-wrap {
  padding-bottom: 50%;
}
@media all and (max-width: 1600px) {
  .wrap .section.section4 .section-wrap {
    padding-bottom: 60%;
  }
}
@media all and (max-width: 1200px) {
  .wrap .section.section4 .section-wrap {
    padding-bottom: 80%;
  }
}
@media all and (max-width: 800px) {
  .wrap .section.section4 .section-wrap {
    padding-bottom: 170%;
  }
}
.wrap .section.section4 .section-wrap .diamond {
  opacity: 0;
  width: 166%;
  padding-bottom: 160%;
  position: absolute;
  top: -45%;
  left: -35%;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("../img/page/wakeup/section4-diamond.png");
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transform: scale(0) translate3d(0%, 0%, 0);
}
.wrap .section.section4 .section-wrap .diamondA0 {
  animation: diamondFloat0 0.5s linear infinite;
}
.wrap .section.section4 .section-wrap .diamondA1 {
  animation: diamondFloatA1 0.5s linear 1;
}
.wrap .section.section4 .section-wrap .diamondA2 {
  animation: diamondFloatA2 0.5s linear 1;
}
.wrap .section.section4 .section-wrap .diamondA3 {
  animation: diamondFloatA3 0.5s linear 1;
}
.wrap .section.section4 .section-wrap .diamondA4 {
  animation: diamondFloatA4 0.5s linear 1;
}
.wrap .section.section4 .section-wrap .diamondA5 {
  animation: diamondFloatA5 0.5s linear 1;
}
.wrap .section.section4 .section-wrap .diamondA6 {
  animation: diamondFloatA6 0.5s linear 1;
}
.wrap .section.section4 .section-wrap .diamondA7 {
  animation: diamondFloatA7 0.5s linear 1;
}
.wrap .section.section4 .section-wrap .diamondA8 {
  animation: diamondFloatA8 0.5s linear 1;
}
.wrap .section.section4 .section-wrap .diamondA9 {
  animation: diamondFloatA9 0.5s linear 1;
}
.wrap .section.section4 .section-wrap .diamondB0 {
  background-image: url('../img/page/wakeup/section4-icon2.png');
  animation: diamondFloat0 0.5s linear infinite;
}
.wrap .section.section4 .section-wrap .diamondB1 {
  background-image: url("../img/page/wakeup/section4-icon1.png");
  animation: diamondFloatB1 0.5s linear 1;
}
.wrap .section.section4 .section-wrap .diamondB2 {
  background-image: url("../img/page/wakeup/section4-icon2.png");
  animation: diamondFloatB2 0.5s linear 1;
}
.wrap .section.section4 .section-wrap .diamondB3 {
  background-image: url("../img/page/wakeup/section4-icon3.png");
  animation: diamondFloatB3 0.5s linear 1;
}
.wrap .section.section4 .section-wrap .diamondB4 {
  background-image: url("../img/page/wakeup/section4-icon4.png");
  animation: diamondFloatB4 0.5s linear 1;
}
.wrap .section.section4 .section-wrap .diamondB5 {
  background-image: url("../img/page/wakeup/section4-icon5.png");
  animation: diamondFloatB5 0.5s linear 1;
}
.wrap .section.section4 .section-wrap .diamondB6 {
  background-image: url("../img/page/wakeup/section4-icon6.png");
  animation: diamondFloatB6 0.5s linear 1;
}
.wrap .section.section4 .section-wrap .diamondB7 {
  background-image: url("../img/page/wakeup/section4-icon7.png");
  animation: diamondFloatB7 0.5s linear 1;
}
.wrap .section.section4 .section-wrap .diamondB8 {
  background-image: url("../img/page/wakeup/section4-icon8.png");
  animation: diamondFloatB8 0.5s linear 1;
}
@keyframes diamondFloat0 {
  0% {
    transform: scale(0) translate3d(0%, 0%, 0);
  }
  50% {
    transform: scale(1) translate3d(0%, -60%, 0);
    opacity: 1;
  }
  80% {
    transform: scale(1) translate3d(0%, -96%, 0);
    opacity: 1;
  }
  100% {
    transform: scale(1) translate3d(0%, -120%, 0);
    opacity: 0;
  }
}
@keyframes diamondFloatA1 {
  0% {
    transform: scale(0) translate3d(0%, 0%, 0);
  }
  45% {
    transform: scale(1) translate3d(30%, -60%, 0);
    opacity: 1;
  }
  80% {
    transform: scale(1) translate3d(48%, -96%, 0);
    opacity: 1;
  }
  100% {
    transform: scale(1) translate3d(60%, -120%, 0);
    opacity: 0;
  }
}
@keyframes diamondFloatA2 {
  0% {
    transform: scale(0) translate3d(0%, 0%, 0);
  }
  45% {
    transform: scale(1) translate3d(25%, -55%, 0);
    opacity: 1;
  }
  80% {
    transform: scale(1) translate3d(40%, -88%, 0);
    opacity: 1;
  }
  100% {
    transform: scale(1) translate3d(50%, -110%, 0);
    opacity: 0;
  }
}
@keyframes diamondFloatA3 {
  0% {
    transform: scale(0) translate3d(0%, 0%, 0);
  }
  45% {
    transform: scale(1) translate3d(15%, -50%, 0);
    opacity: 1;
  }
  80% {
    transform: scale(1) translate3d(24%, -80%, 0);
    opacity: 1;
  }
  100% {
    transform: scale(1) translate3d(30%, -100%, 0);
    opacity: 0;
  }
}
@keyframes diamondFloatA4 {
  0% {
    transform: scale(0) translate3d(0%, 0%, 0);
  }
  45% {
    transform: scale(1) translate3d(10%, -50%, 0);
    opacity: 1;
  }
  80% {
    transform: scale(1) translate3d(16%, -80%, 0);
    opacity: 1;
  }
  100% {
    transform: scale(1) translate3d(20%, -100%, 0);
    opacity: 0;
  }
}
@keyframes diamondFloatA5 {
  0% {
    transform: scale(0) translate3d(0%, 0%, 0);
  }
  45% {
    transform: scale(1) translate3d(0%, -50%, 0);
    opacity: 1;
  }
  80% {
    transform: scale(1) translate3d(0%, -80%, 0);
    opacity: 1;
  }
  100% {
    transform: scale(1) translate3d(0%, -100%, 0);
    opacity: 0;
  }
}
@keyframes diamondFloatA6 {
  0% {
    transform: scale(0) translate3d(0%, 0%, 0);
  }
  45% {
    transform: scale(1) translate3d(-10%, -50%, 0);
    opacity: 1;
  }
  80% {
    transform: scale(1) translate3d(-16%, -80%, 0);
    opacity: 1;
  }
  100% {
    transform: scale(1) translate3d(-20%, -100%, 0);
    opacity: 0;
  }
}
@keyframes diamondFloatA7 {
  0% {
    transform: scale(0) translate3d(0%, 0%, 0);
  }
  45% {
    transform: scale(1) translate3d(-15%, -50%, 0);
    opacity: 1;
  }
  80% {
    transform: scale(1) translate3d(-24%, -80%, 0);
    opacity: 1;
  }
  100% {
    transform: scale(1) translate3d(-30%, -100%, 0);
    opacity: 0;
  }
}
@keyframes diamondFloatA8 {
  0% {
    transform: scale(0) translate3d(0%, 0%, 0);
  }
  45% {
    transform: scale(1) translate3d(-25%, -50%, 0);
    opacity: 1;
  }
  80% {
    transform: scale(1) translate3d(-40%, -80%, 0);
    opacity: 1;
  }
  100% {
    transform: scale(1) translate3d(-50%, -100%, 0);
    opacity: 0;
  }
}
@keyframes diamondFloatA9 {
  0% {
    transform: scale(0) translate3d(0%, 0%, 0);
  }
  45% {
    transform: scale(1) translate3d(-30%, -60%, 0);
    opacity: 1;
  }
  80% {
    transform: scale(1) translate3d(-48%, -96%, 0);
    opacity: 1;
  }
  100% {
    transform: scale(1) translate3d(-60%, -120%, 0);
    opacity: 0;
  }
}
@keyframes diamondFloatB1 {
  0% {
    transform: scale(0) translate3d(0%, 0%, 0);
  }
  45% {
    transform: scale(1) translate3d(45%, -90%, 0);
    opacity: 1;
  }
  80% {
    transform: scale(1) translate3d(72%, -144%, 0);
    opacity: 1;
  }
  100% {
    transform: scale(1) translate3d(90%, -180%, 0);
    opacity: 0;
  }
}
@keyframes diamondFloatB2 {
  0% {
    transform: scale(0) translate3d(0%, 0%, 0);
  }
  45% {
    transform: scale(1) translate3d(40%, -80%, 0);
    opacity: 1;
  }
  80% {
    transform: scale(1) translate3d(64%, -128%, 0);
    opacity: 1;
  }
  100% {
    transform: scale(1) translate3d(80%, -160%, 0);
    opacity: 0;
  }
}
@keyframes diamondFloatB3 {
  0% {
    transform: scale(0) translate3d(0%, 0%, 0);
  }
  45% {
    transform: scale(1) translate3d(35%, -70%, 0);
    opacity: 1;
  }
  80% {
    transform: scale(1) translate3d(56%, -112%, 0);
    opacity: 1;
  }
  100% {
    transform: scale(1) translate3d(70%, -140%, 0);
    opacity: 0;
  }
}
@keyframes diamondFloatB4 {
  0% {
    transform: scale(0) translate3d(0%, 0%, 0);
  }
  45% {
    transform: scale(1) translate3d(25%, -60%, 0);
    opacity: 1;
  }
  80% {
    transform: scale(1) translate3d(40%, -96%, 0);
    opacity: 1;
  }
  100% {
    transform: scale(1) translate3d(50%, -120%, 0);
    opacity: 0;
  }
}
@keyframes diamondFloatB5 {
  0% {
    transform: scale(0) translate3d(0%, 0%, 0);
  }
  45% {
    transform: scale(1) translate3d(0%, -50%, 0);
    opacity: 1;
  }
  80% {
    transform: scale(1) translate3d(0%, -80%, 0);
    opacity: 1;
  }
  100% {
    transform: scale(1) translate3d(0%, -100%, 0);
    opacity: 0;
  }
}
@keyframes diamondFloatB6 {
  0% {
    transform: scale(0) translate3d(0%, 0%, 0);
  }
  45% {
    transform: scale(1) translate3d(-20%, -65%, 0);
    opacity: 1;
  }
  80% {
    transform: scale(1) translate3d(-32%, -104%, 0);
    opacity: 1;
  }
  100% {
    transform: scale(1) translate3d(-40%, -130%, 0);
    opacity: 0;
  }
}
@keyframes diamondFloatB7 {
  0% {
    transform: scale(0) translate3d(0%, 0%, 0);
  }
  45% {
    transform: scale(1) translate3d(-30%, -80%, 0);
    opacity: 1;
  }
  80% {
    transform: scale(1) translate3d(-48%, -128%, 0);
    opacity: 1;
  }
  100% {
    transform: scale(1) translate3d(-60%, -160%, 0);
    opacity: 0;
  }
}
@keyframes diamondFloatB8 {
  0% {
    transform: scale(0) translate3d(0%, 0%, 0);
  }
  45% {
    transform: scale(1) translate3d(-40%, -95%, 0);
    opacity: 1;
  }
  80% {
    transform: scale(1) translate3d(-64%, -152%, 0);
    opacity: 1;
  }
  100% {
    transform: scale(1) translate3d(-80%, -190%, 0);
    opacity: 0;
  }
}
.wrap .section.section4 .section-wrap .title {
  width: 35.5%;
  padding-bottom: 25%;
  position: absolute;
  top: 7%;
  right: 6%;
  -webkit-background-size: contain;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../img/page/wakeup/section4-title.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section4 .section-wrap .title {
    z-index: 1;
    width: 458px;
    padding-bottom: 57%;
    top: 4%;
    left: 50%;
    margin-left: -229px;
    background-position: center;
    background-image: url("../img/page/wakeup/section4-title-m.png");
  }
}
@media all and (max-width: 500px) {
  .wrap .section.section4 .section-wrap .title {
    z-index: 1;
    width: 80%;
    padding-bottom: 57%;
    top: 2%;
    left: 50%;
    margin-left: -40%;
  }
}
.wrap .section.section4 .section-wrap .item1 {
  cursor: pointer;
  width: 39%;
  padding-bottom: 40%;
  position: absolute;
  top: 24%;
  left: 0%;
  -webkit-background-size: contain;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../img/page/wakeup/section4-item1.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section4 .section-wrap .item1 {
    top: 43%;
    width: 43%;
    padding-bottom: 73%;
    background-image: url("../img/page/wakeup/section4-item1-m.png");
  }
}
.wrap .section.section4 .section-wrap .item1 .item1-light {
  pointer-events: none;
  z-index: 1;
  width: 100%;
  height: 100%;
  position: absolute;
  top: -6%;
  background-image: url("../img/page/wakeup/section4-item1-light.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section4 .section-wrap .item1 .item1-light {
    top: -9.5%;
    left: 46%;
    width: 24%;
    padding-bottom: 131%;
    height: auto;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("../img/page/wakeup/section4-item1-light-m.png");
  }
}
.wrap .section.section4 .section-wrap .item1 .wkpeople {
  width: 10.685%;
  padding-bottom: 20%;
}
@media all and (max-width: 800px) {
  .wrap .section.section4 .section-wrap .item1 .wkpeople {
    width: 14%;
    padding-bottom: 27%;
  }
}
.wrap .section.section4 .section-wrap .item1 .wkpeople1 {
  top: 43%;
  left: 16%;
  background-image: url("../img/page/wakeup/section4-wkpeople/wkpeople-1.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section4 .section-wrap .item1 .wkpeople1 {
    display: none;
  }
}
.wrap .section.section4 .section-wrap .item1 .wkpeople1 .emotion {
  top: -16px;
  left: -27px;
  background-image: url("../img/page/wakeup/emotion-icon/emotion10-l.png");
  animation: emotionJump3 5s linear infinite;
}
@media all and (max-width: 800px) {
  .wrap .section.section4 .section-wrap .item1 .wkpeople1 .emotion {
    left: -24px;
  }
}
.wrap .section.section4 .section-wrap .item1 .wkpeople2 {
  top: 1%;
  left: 48%;
  background-image: url("../img/page/wakeup/section4-wkpeople/wkpeople-2.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section4 .section-wrap .item1 .wkpeople2 {
    top: -4%;
    left: 71%;
  }
}
.wrap .section.section4 .section-wrap .item1 .wkpeople3 {
  top: 40%;
  left: 71%;
  background-image: url("../img/page/wakeup/section4-wkpeople/wkpeople-3.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section4 .section-wrap .item1 .wkpeople3 {
    top: 48%;
    left: 59%;
  }
}
.wrap .section.section4 .section-wrap .item1 .wkpeople3 .emotion {
  top: -25px;
  right: -25px;
  background-image: url("../img/page/wakeup/emotion-icon/emotion10-r.png");
  animation: emotionJump4 5s linear infinite;
}
@media all and (max-width: 800px) {
  .wrap .section.section4 .section-wrap .item1 .wkpeople3 .emotion {
    right: -18px;
  }
}
.wrap .section.section4 .section-wrap .item1 .icon {
  position: absolute;
  width: 8%;
  padding-bottom: 12%;
  background-size: contain;
  background-repeat: no-repeat;
  animation: iconFloat1 4s linear infinite;
}
@media all and (max-width: 800px) {
  .wrap .section.section4 .section-wrap .item1 .icon {
    width: 9%;
    padding-bottom: 17%;
  }
}
@keyframes iconFloat1 {
  0% {
    transform: translate3d(0px, 0%, 0px);
  }
  50% {
    transform: translate3d(0px, 20%, 0px);
  }
  100% {
    transform: translate3d(0px, 0%, 0px);
  }
}
@keyframes iconFloat2 {
  0% {
    transform: translate3d(0px, -25%, 0px);
  }
  50% {
    transform: translate3d(0px, 0%, 0px);
  }
  100% {
    transform: translate3d(0px, -25%, 0px);
  }
}
.wrap .section.section4 .section-wrap .item1 .icon1 {
  top: -7%;
  left: 14%;
  background-image: url("../img/page/wakeup/section4-icon1.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section4 .section-wrap .item1 .icon1 {
    top: -12%;
    left: 25%;
  }
}
.wrap .section.section4 .section-wrap .item1 .icon2 {
  top: 1%;
  left: 25%;
  background-image: url("../img/page/wakeup/section4-icon2.png");
  animation: iconFloat2 5s linear infinite;
}
@media all and (max-width: 800px) {
  .wrap .section.section4 .section-wrap .item1 .icon2 {
    top: -1%;
    left: 40%;
  }
}
.wrap .section.section4 .section-wrap .item1 .icon3 {
  top: 6%;
  left: 73%;
  background-image: url("../img/page/wakeup/section4-icon3.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section4 .section-wrap .item1 .icon3 {
    top: 32%;
    left: 66%;
  }
}
.wrap .section.section4 .section-wrap .item1 .icon4 {
  top: 18%;
  left: 92%;
  background-image: url("../img/page/wakeup/section4-icon4.png");
  animation: iconFloat2 5s linear infinite;
}
@media all and (max-width: 800px) {
  .wrap .section.section4 .section-wrap .item1 .icon4 {
    top: 46%;
    left: 88.5%;
  }
}
.wrap .section.section4 .section-wrap .item1 .icon5 {
  top: 46%;
  left: 1%;
  background-image: url("../img/page/wakeup/section4-icon5.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section4 .section-wrap .item1 .icon5 {
    top: 33%;
    left: 4%;
  }
}
.wrap .section.section4 .section-wrap .item1 .icon6 {
  top: 62%;
  left: 10%;
  background-image: url("../img/page/wakeup/section4-icon6.png");
  animation: iconFloat2 5s linear infinite;
}
@media all and (max-width: 800px) {
  .wrap .section.section4 .section-wrap .item1 .icon6 {
    top: 48%;
    left: 17%;
  }
}
.wrap .section.section4 .section-wrap .item1 .icon7 {
  top: 72.5%;
  left: 54%;
  background-image: url("../img/page/wakeup/section4-icon7.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section4 .section-wrap .item1 .icon7 {
    top: 72.5%;
    left: 24%;
  }
}
.wrap .section.section4 .section-wrap .item1 .icon8 {
  top: 38%;
  left: 86%;
  background-image: url("../img/page/wakeup/section4-icon8.png");
  animation: iconFloat2 5s linear infinite;
}
@media all and (max-width: 800px) {
  .wrap .section.section4 .section-wrap .item1 .icon8 {
    top: 66%;
    left: 81%;
  }
}
.wrap .section.section4 .section-wrap .item2 {
  cursor: pointer;
  width: 41.917%;
  padding-bottom: 32%;
  position: absolute;
  top: 43%;
  left: 61%;
  -webkit-background-size: contain;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../img/page/wakeup/section4-item2.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section4 .section-wrap .item2 {
    width: 58%;
    padding-bottom: 52%;
    top: 45%;
    left: 47%;
  }
}
.wrap .section.section4 .section-wrap .item2 .wkpeople {
  width: 9.943%;
  padding-bottom: 18%;
}
@media all and (max-width: 800px) {
  .wrap .section.section4 .section-wrap .item2 .wkpeople {
    width: 10%;
    padding-bottom: 20%;
  }
}
.wrap .section.section4 .section-wrap .item2 .wkpeople4 {
  top: 45%;
  left: 32%;
  background-image: url("../img/page/wakeup/section4-wkpeople/wkpeople-4.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section4 .section-wrap .item2 .wkpeople4 {
    top: 32%;
    left: 30%;
  }
}
.wrap .section.section4 .section-wrap .item2 .wkpeople4 .emotion {
  top: -16px;
  left: -27px;
  background-image: url("../img/page/wakeup/emotion-icon/emotion3-l.png");
  animation: emotionJump5 5s linear infinite;
}
@media all and (max-width: 800px) {
  .wrap .section.section4 .section-wrap .item2 .wkpeople4 .emotion {
    left: -24px;
  }
}
.wrap .section.section4 .section-wrap .item2 .wkpeople5 {
  top: 44%;
  left: 61%;
  background-image: url("../img/page/wakeup/section4-wkpeople/wkpeople-5.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section4 .section-wrap .item2 .wkpeople5 {
    top: 35%;
    left: 60%;
  }
}
.wrap .section.section4 .section-wrap .item2 .wkpeople5 .diamond {
  width: 70%;
  padding-bottom: 100%;
  top: -50%;
  left: 10%;
}
.wrap .section.section4 .section-wrap .road {
  background-color: #4e6ae8;
}
@media all and (max-width: 800px) {
  .wrap .section.section4 .section-wrap .road .fresh-man {
    display: none;
  }
}
.wrap .section.section4 .wall-box {
  z-index: 3;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 78px;
}
.wrap .section.section4 .wall-box .wall-left {
  float: left;
  width: calc(50% - 49px);
  height: 78px;
  background-repeat: repeat;
  background-image: url("../img/page/wakeup/section2-wall.png");
}
.wrap .section.section4 .wall-box .wall-right {
  float: right;
  width: calc(50% - 49px);
  height: 78px;
  background-repeat: repeat;
  background-image: url("../img/page/wakeup/section2-wall.png");
}
.wrap .section.section4 .wall-box .door {
  float: left;
  width: 98px;
  height: 78px;
  background-repeat: repeat;
  background-image: url("../img/page/wakeup/section2-door.png");
}
.wrap .section.section5 {
  background-color: #006215;
  background-image: url("../img/page/wakeup/section5-bg.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section5 {
    background-image: url("../img/page/wakeup/section5-bg-m.png");
  }
}
.wrap .section.section5 .dot-dec {
  pointer-events: none;
  position: absolute;
  width: calc(100% - 40px);
  height: calc(100% - 40px);
  margin: 20px;
  background-repeat: repeat;
}
.wrap .section.section5 .dot-dec1 {
  background-image: url("../img/page/wakeup/section5-dot1.png");
}
.wrap .section.section5 .dot-dec2 {
  background-image: url("../img/page/wakeup/section5-dot2.png");
}
.wrap .section.section5 .dot-dec3 {
  background-image: url("../img/page/wakeup/section5-dot3.png");
}
.wrap .section.section5 .section-wrap {
  padding-bottom: 66%;
}
@media all and (max-width: 1600px) {
  .wrap .section.section5 .section-wrap {
    padding-bottom: 80%;
  }
}
@media all and (max-width: 1200px) {
  .wrap .section.section5 .section-wrap {
    padding-bottom: 100%;
  }
}
@media all and (max-width: 800px) {
  .wrap .section.section5 .section-wrap {
    padding-bottom: 170%;
  }
}
.wrap .section.section5 .section-wrap .title {
  width: 35.5%;
  padding-bottom: 25%;
  position: absolute;
  top: 6%;
  right: 6%;
  -webkit-background-size: contain;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../img/page/wakeup/section5-title.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section5 .section-wrap .title {
    z-index: 1;
    width: 426px;
    padding-bottom: 36%;
    top: 8%;
    left: 50%;
    margin-left: -213px;
    background-position: center;
    background-image: url("../img/page/wakeup/section5-title-m.png");
  }
}
@media all and (max-width: 500px) {
  .wrap .section.section5 .section-wrap .title {
    z-index: 1;
    width: 70%;
    padding-bottom: 46%;
    top: 2%;
    left: 50%;
    margin-left: -35%;
  }
}
.wrap .section.section5 .section-wrap .item1 {
  width: 35%;
  padding-bottom: 27%;
  position: absolute;
  top: 24%;
  left: 4%;
  -webkit-background-size: contain;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../img/page/wakeup/section5-item1.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section5 .section-wrap .item1 {
    width: 53%;
    padding-bottom: 41%;
    top: 33.5%;
    left: -11%;
  }
}
.wrap .section.section5 .section-wrap .item1 .wkpeople {
  width: 11.905%;
  padding-bottom: 23%;
}
@media all and (max-width: 800px) {
  .wrap .section.section5 .section-wrap .item1 .wkpeople {
    width: 12%;
  }
}
.wrap .section.section5 .section-wrap .item1 .wkpeople1 {
  top: -27%;
  left: 52%;
  background-image: url("../img/page/wakeup/section5-wkpeople/wkpeople-1.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section5 .section-wrap .item1 .wkpeople1 {
    top: -105%;
    left: 30%;
  }
}
@media all and (max-width: 650px) {
  .wrap .section.section5 .section-wrap .item1 .wkpeople1 {
    left: 25%;
  }
}
@media all and (max-width: 500px) {
  .wrap .section.section5 .section-wrap .item1 .wkpeople1 {
    left: 30%;
  }
}
.wrap .section.section5 .section-wrap .item1 .wkpeople1 .emotion {
  top: -16px;
  left: -27px;
  background-image: url("../img/page/wakeup/emotion-icon/emotion5-l.png");
  animation: emotionJump1 5s linear infinite;
}
@media all and (max-width: 800px) {
  .wrap .section.section5 .section-wrap .item1 .wkpeople1 .emotion {
    left: -24px;
  }
}
.wrap .section.section5 .section-wrap .item1 .wkpeople2 {
  top: -35%;
  left: 80%;
  background-image: url("../img/page/wakeup/section5-wkpeople/wkpeople-2.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section5 .section-wrap .item1 .wkpeople2 {
    width: 14%;
    padding-bottom: 20%;
    top: -113%;
    left: 177%;
    background-image: url("../img/page/wakeup/section5-wkpeople/wkpeople-2-m.png");
  }
}
@media all and (max-width: 500px) {
  .wrap .section.section5 .section-wrap .item1 .wkpeople2 {
    left: 185%;
  }
}
.wrap .section.section5 .section-wrap .item1 .wkpeople2 .emotion {
  top: -10px;
  right: -25px;
  background-image: url("../img/page/wakeup/emotion-icon/emotion8-r.png");
  animation: emotionJump2 5s linear infinite;
}
@media all and (max-width: 800px) {
  .wrap .section.section5 .section-wrap .item1 .wkpeople2 .emotion {
    right: -18px;
  }
}
.wrap .section.section5 .section-wrap .item1 .wkpeople3 {
  top: -10%;
  left: 90%;
  background-image: url("../img/page/wakeup/section5-wkpeople/wkpeople-3.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section5 .section-wrap .item1 .wkpeople3 {
    top: -90%;
    left: 186%;
  }
}
@media all and (max-width: 500px) {
  .wrap .section.section5 .section-wrap .item1 .wkpeople3 {
    left: 194%;
  }
}
.wrap .section.section5 .section-wrap .item1 .wkpeople3 .emotion {
  top: -10px;
  right: -25px;
  background-image: url("../img/page/wakeup/emotion-icon/emotion11-r.png");
  animation: emotionJump2 5s linear infinite;
}
@media all and (max-width: 800px) {
  .wrap .section.section5 .section-wrap .item1 .wkpeople3 .emotion {
    right: -18px;
  }
}
.wrap .section.section5 .section-wrap .item1 .lala {
  position: absolute;
  top: 87%;
  left: 80%;
  width: 10.477%;
  padding-bottom: 14%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../img/page/wakeup/section5-wkpeople/lala.png");
}
.wrap .section.section5 .section-wrap .item2 {
  z-index: 1;
  width: 35%;
  padding-bottom: 27%;
  position: absolute;
  top: 56%;
  left: 6%;
  -webkit-background-size: contain;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../img/page/wakeup/section5-item2.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section5 .section-wrap .item2 {
    width: 51%;
    padding-bottom: 42%;
    top: 66%;
    left: -10%;
  }
}
.wrap .section.section5 .section-wrap .item2 .wkpeople {
  width: 11.905%;
  padding-bottom: 23%;
}
@media all and (max-width: 800px) {
  .wrap .section.section5 .section-wrap .item2 .wkpeople {
    width: 12%;
    padding-bottom: 22%;
  }
}
.wrap .section.section5 .section-wrap .item2 .wkpeople4 {
  top: -25%;
  left: 0%;
  background-image: url("../img/page/wakeup/section5-wkpeople/wkpeople-4.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section5 .section-wrap .item2 .wkpeople4 {
    top: -160%;
    left: 43%;
  }
}
.wrap .section.section5 .section-wrap .item2 .wkpeople4 .emotion {
  top: -16px;
  left: -27px;
  background-image: url("../img/page/wakeup/emotion-icon/emotion3-l.png");
  animation: emotionJump5 5s linear infinite;
}
@media all and (max-width: 800px) {
  .wrap .section.section5 .section-wrap .item2 .wkpeople4 .emotion {
    left: -24px;
  }
}
.wrap .section.section5 .section-wrap .item2 .wkpeople5-box {
  top: -60%;
  left: 97%;
}
@media all and (max-width: 800px) {
  .wrap .section.section5 .section-wrap .item2 .wkpeople5-box {
    display: none;
    top: -17%;
    left: 58%;
  }
}
.wrap .section.section5 .section-wrap .item2 .wkpeople5-box .wkpeople5 {
  width: 100%;
  height: 100%;
  padding-bottom: 0;
  background-position: bottom center;
  background-image: url("../img/page/wakeup/section5-wkpeople/wkpeople-5.png");
  animation: chingRotate 0.3s linear infinite;
  transform-origin: bottom center;
}
@media all and (max-width: 800px) {
  .wrap .section.section5 .section-wrap .item2 .wkpeople5-box .wkpeople5 {
    display: none;
    top: -17%;
    left: 58%;
  }
}
@keyframes chingRotate {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(4deg);
  }
  75% {
    transform: rotate(-4deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.wrap .section.section5 .section-wrap .item2 .wkpeople5-box .emotion {
  top: -24px;
  right: -40px;
  background-image: url("../img/page/wakeup/emotion-icon/emotion8-r.png");
  animation: emotionJump10 0.35s linear infinite;
}
@media all and (max-width: 800px) {
  .wrap .section.section5 .section-wrap .item2 .wkpeople5-box .emotion {
    top: -20px;
    right: -25px;
  }
}
@keyframes emotionJump10 {
  0% {
    transform: translate3d(0px, 0px, 0);
  }
  40% {
    transform: translate3d(0px, -20px, 0);
  }
  90% {
    transform: translate3d(0px, 7px, 0);
  }
  100% {
    transform: translate3d(0px, 0px, 0);
  }
}
.wrap .section.section5 .section-wrap .item2 .wkpeople5-m {
  top: -60%;
  left: 97%;
  background-image: url("../img/page/wakeup/section5-wkpeople/wkpeople-5.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section5 .section-wrap .item2 .wkpeople5-m {
    top: -17%;
    left: 58%;
  }
}
.wrap .section.section5 .section-wrap .item3 {
  z-index: 1;
  width: 35%;
  padding-bottom: 27%;
  position: absolute;
  top: 32%;
  right: 4%;
  -webkit-background-size: contain;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../img/page/wakeup/section5-item3.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section5 .section-wrap .item3 {
    width: 25%;
    padding-bottom: 32%;
    top: 30.5%;
    right: 16%;
    background-image: url("../img/page/wakeup/section5-item3-m.png");
  }
}
.wrap .section.section5 .section-wrap .item3 .wkpeople {
  width: 11.905%;
  padding-bottom: 23%;
}
@media all and (max-width: 800px) {
  .wrap .section.section5 .section-wrap .item3 .wkpeople {
    width: 24%;
    padding-bottom: 45%;
  }
}
.wrap .section.section5 .section-wrap .item3 .wkpeople6 {
  top: 91%;
  left: -1%;
  background-image: url("../img/page/wakeup/section5-wkpeople/wkpeople-6.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section5 .section-wrap .item3 .wkpeople6 {
    top: 90%;
    left: 50%;
  }
}
.wrap .section.section5 .section-wrap .item3 .wkpeople6 .emotion {
  top: -10px;
  left: -25px;
  background-image: url("../img/page/wakeup/emotion-icon/emotion4-l.png");
  animation: emotionJump3 5s linear infinite;
}
@media all and (max-width: 800px) {
  .wrap .section.section5 .section-wrap .item3 .wkpeople6 .emotion {
    left: -18px;
  }
}
.wrap .section.section5 .section-wrap .item3 .wkpeople7 {
  z-index: 1;
  top: 55%;
  left: 34%;
  background-image: url("../img/page/wakeup/section5-wkpeople/wkpeople-7.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section5 .section-wrap .item3 .wkpeople7 {
    top: 79%;
    left: 106%;
  }
}
.wrap .section.section5 .section-wrap .item3 .wkpeople7 .emotion {
  top: -10px;
  right: -25px;
  background-image: url("../img/page/wakeup/emotion-icon/emotion4-r.png");
  animation: emotionJump4 5s linear infinite;
}
@media all and (max-width: 800px) {
  .wrap .section.section5 .section-wrap .item3 .wkpeople7 .emotion {
    right: -18px;
  }
}
.wrap .section.section5 .section-wrap .item4 {
  width: 19.667%;
  padding-bottom: 23%;
  position: absolute;
  top: 35%;
  right: 3.5%;
  -webkit-background-size: contain;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../img/page/wakeup/section5-item4.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section5 .section-wrap .item4 {
    width: 27%;
    padding-bottom: 32%;
    top: 32%;
    right: -13%;
  }
}
.wrap .section.section5 .section-wrap .item5 {
  width: 30.167%;
  padding-bottom: 24%;
  position: absolute;
  top: 50.5%;
  right: 1%;
  -webkit-background-size: contain;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../img/page/wakeup/section5-item5.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section5 .section-wrap .item5 {
    width: 46%;
    padding-bottom: 53%;
    position: absolute;
    top: 53%;
    right: 0%;
    background-image: url("../img/page/wakeup/section5-item5-m.png");
  }
}
.wrap .section.section5 .section-wrap .road {
  background-color: #fff;
}
@media all and (max-width: 800px) {
  .wrap .section.section5 .section-wrap .road .fresh-man {
    display: none;
  }
}
.wrap .section.section5 .wall-box {
  z-index: 3;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 74px;
}
.wrap .section.section5 .wall-box .wall-left {
  float: left;
  width: calc(50% - 49px);
  height: 74px;
  background-repeat: repeat;
  background-position: right top;
  background-image: url("../img/page/wakeup/section5-wall1.png");
}
.wrap .section.section5 .wall-box .wall-right {
  float: right;
  width: calc(50% - 49px);
  height: 74px;
  background-repeat: repeat;
  background-position: left top;
  background-image: url("../img/page/wakeup/section5-wall2.png");
}
.wrap .section.section6 {
  background-color: #ecead5;
  background-image: url("../img/page/wakeup/section6-bg.png");
}
.wrap .section.section6 .section-wrap {
  padding-bottom: 60%;
}
@media all and (max-width: 1600px) {
  .wrap .section.section6 .section-wrap {
    padding-bottom: 72%;
  }
}
@media all and (max-width: 1400px) {
  .wrap .section.section6 .section-wrap {
    padding-bottom: 80%;
  }
}
@media all and (max-width: 1200px) {
  .wrap .section.section6 .section-wrap {
    padding-bottom: 92%;
  }
}
@media all and (max-width: 800px) {
  .wrap .section.section6 .section-wrap {
    padding-bottom: 180%;
  }
}
.wrap .section.section6 .section-wrap .title {
  width: 35.5%;
  padding-bottom: 25%;
  position: absolute;
  top: 4%;
  left: 7%;
  -webkit-background-size: contain;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../img/page/wakeup/section6-title.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section6 .section-wrap .title {
    z-index: 2;
    width: 426px;
    padding-bottom: 45%;
    top: 4%;
    left: 50%;
    margin-left: -213px;
    background-position: center;
    background-image: url("../img/page/wakeup/section6-title-m.png");
  }
}
@media all and (max-width: 500px) {
  .wrap .section.section6 .section-wrap .title {
    z-index: 1;
    width: 70%;
    padding-bottom: 46%;
    top: 2%;
    left: 50%;
    margin-left: -35%;
  }
}
.wrap .section.section6 .section-wrap .item1 {
  width: 11.667%;
  padding-bottom: 19%;
  position: absolute;
  top: 53%;
  left: 7%;
  -webkit-background-size: contain;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../img/page/wakeup/section6-item1.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section6 .section-wrap .item1 {
    width: 16%;
    padding-bottom: 40%;
    top: 29%;
    left: 25%;
  }
}
.wrap .section.section6 .section-wrap .item2 {
  width: 13.584%;
  padding-bottom: 23%;
  position: absolute;
  top: 38%;
  left: 27%;
  -webkit-background-size: contain;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../img/page/wakeup/section6-item2.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section6 .section-wrap .item2 {
    top: 41%;
    left: 10%;
    width: 23%;
    padding-bottom: 38%;
  }
}
.wrap .section.section6 .section-wrap .item3 {
  z-index: 1;
  width: 13.584%;
  padding-bottom: 23%;
  position: absolute;
  top: 38%;
  left: 27%;
  -webkit-background-size: contain;
  background-size: contain;
  background-repeat: no-repeat;
  transform-origin: bottom center;
  background-image: url("../img/page/wakeup/section6-item3.png");
  animation: loggingTree 8s linear infinite;
}
@media all and (max-width: 800px) {
  .wrap .section.section6 .section-wrap .item3 {
    top: 41%;
    left: 10%;
    width: 23%;
    padding-bottom: 38%;
  }
}
@keyframes loggingTree {
  0% {
    transform: rotate(0deg);
  }
  1% {
    transform: rotate(1deg);
  }
  2% {
    transform: rotate(-1deg);
  }
  3% {
    transform: rotate(1deg);
  }
  4% {
    transform: rotate(-1deg);
  }
  5% {
    transform: rotate(1deg);
  }
  6% {
    transform: rotate(-1deg);
  }
  7% {
    transform: rotate(1deg);
  }
  8% {
    transform: rotate(-1deg);
  }
  9% {
    transform: rotate(2deg);
  }
  10% {
    transform: rotate(-2deg);
  }
  11% {
    transform: rotate(1deg);
  }
  12% {
    transform: rotate(0deg);
  }
}
.wrap .section.section6 .section-wrap .item4 {
  width: 7.75%;
  padding-bottom: 7%;
  position: absolute;
  top: 80%;
  left: 14%;
  -webkit-background-size: contain;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../img/page/wakeup/section6-item4.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section6 .section-wrap .item4 {
    width: 12%;
    padding-bottom: 20%;
    top: 67%;
    left: 4%;
  }
}
.wrap .section.section6 .section-wrap .item5 {
  z-index: 1;
  width: 8.584%;
  padding-bottom: 14%;
  position: absolute;
  top: 69%;
  left: 27%;
  -webkit-background-size: contain;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../img/page/wakeup/section6-item5.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section6 .section-wrap .item5 {
    width: 15%;
    padding-bottom: 24%;
    top: 72%;
    left: 16%;
  }
}
.wrap .section.section6 .section-wrap .item6 {
  z-index: 1;
  width: 9.417%;
  padding-bottom: 15%;
  position: absolute;
  top: 64%;
  left: 33.5%;
  -webkit-background-size: contain;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../img/page/wakeup/section6-item6.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section6 .section-wrap .item6 {
    width: 14%;
    padding-bottom: 25%;
    top: 70%;
    left: 27.5%;
  }
}
.wrap .section.section6 .section-wrap .item7 {
  width: 6.75%;
  padding-bottom: 9%;
  position: absolute;
  top: 64%;
  left: 28.5%;
  -webkit-background-size: contain;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../img/page/wakeup/section6-item7.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section6 .section-wrap .item7 {
    width: 12%;
    padding-bottom: 16%;
    top: 68.5%;
    left: 18%;
  }
}
.wrap .section.section6 .section-wrap .item8 {
  width: 5%;
  padding-bottom: 6%;
  position: absolute;
  top: 36%;
  left: 24%;
  -webkit-background-size: contain;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../img/page/wakeup/section6-item8.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section6 .section-wrap .item8 {
    width: 8%;
    padding-bottom: 10%;
    top: 41%;
    left: 4%;
    background-image: url("../img/page/wakeup/section6-item8-m.png");
  }
}
.wrap .section.section6 .section-wrap .item9 {
  width: 16.084%;
  padding-bottom: 11%;
  position: absolute;
  top: 50%;
  left: 26%;
  -webkit-background-size: contain;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../img/page/wakeup/section6-item9.png");
  animation: logging 8s linear infinite;
}
@media all and (max-width: 800px) {
  .wrap .section.section6 .section-wrap .item9 {
    width: 27%;
    padding-bottom: 18%;
    top: 50.5%;
    left: 10%;
  }
}
.wrap .section.section6 .section-wrap .item9 .e1 {
  top: -28px;
  left: -35px;
  background-image: url("../img/page/wakeup/emotion-icon/emotion7-l.png");
  animation: emotionJump1 5s linear infinite;
}
@media all and (max-width: 800px) {
  .wrap .section.section6 .section-wrap .item9 .e1 {
    top: -18px;
    left: -23px;
  }
}
.wrap .section.section6 .section-wrap .item9 .e2 {
  top: 20px;
  right: -30px;
  background-image: url("../img/page/wakeup/emotion-icon/emotion7-r.png");
  animation: emotionJump1 5s linear infinite;
}
@media all and (max-width: 800px) {
  .wrap .section.section6 .section-wrap .item9 .e2 {
    top: 12px;
    right: -20px;
  }
}
@keyframes logging {
  0% {
    transform: translate3d(0, 0, 0);
  }
  1% {
    transform: translate3d(-10%, -10%, 0);
  }
  2% {
    transform: translate3d(10%, 10%, 0);
  }
  3% {
    transform: translate3d(-10%, -10%, 0);
  }
  4% {
    transform: translate3d(10%, 10%, 0);
  }
  5% {
    transform: translate3d(-10%, -10%, 0);
  }
  6% {
    transform: translate3d(10%, 10%, 0);
  }
  7% {
    transform: translate3d(-10%, -10%, 0);
  }
  8% {
    transform: translate3d(10%, 10%, 0);
  }
  9% {
    transform: translate3d(-10%, -10%, 0);
  }
  10% {
    transform: translate3d(10%, 10%, 0);
  }
  11% {
    transform: translate3d(0, 0, 0);
  }
}
.wrap .section.section6 .section-wrap .item10 {
  width: 6.167%;
  padding-bottom: 8%;
  position: absolute;
  top: 34%;
  left: 17%;
  -webkit-background-size: contain;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../img/page/wakeup/section6-item10.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section6 .section-wrap .item10 {
    width: 29%;
    padding-bottom: 63%;
    top: 7%;
    left: -2%;
    background-image: url("../img/page/wakeup/section6-item10-m.png");
  }
}
.wrap .section.section6 .section-wrap .item10 .emotion {
  top: -22px;
  left: -17px;
  background-image: url("../img/page/wakeup/emotion-icon/emotion2-l.png");
  animation: emotionJump1 5s linear infinite;
}
@media all and (max-width: 800px) {
  .wrap .section.section6 .section-wrap .item10 .emotion {
    left: -30px;
  }
}
.wrap .section.section6 .section-wrap .item11 {
  width: 42.584%;
  padding-bottom: 63%;
  position: absolute;
  top: 10%;
  right: 0%;
  -webkit-background-size: contain;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../img/page/wakeup/section6-item11.png");
  animation: shake 6s linear infinite;
}
@media all and (max-width: 800px) {
  .wrap .section.section6 .section-wrap .item11 {
    width: 70%;
    padding-bottom: 104%;
    position: absolute;
    top: 23%;
    right: -28%;
  }
}
.wrap .section.section6 .section-wrap .item11 .wkpeople {
  opacity: 0;
  width: 9.785%;
  padding-bottom: 19%;
}
.wrap .section.section6 .section-wrap .item11 .wkpeople1 {
  top: 31%;
  right: 13%;
  background-image: url("../img/page/wakeup/section6-wkpeople/wkpeople-1.png");
}
.wrap .section.section6 .section-wrap .item11 .wkpeople2 {
  opacity: 1;
  cursor: pointer;
  top: 49%;
  right: 69.5%;
  background-image: url("../img/page/wakeup/section6-wkpeople/wkpeople-2.png");
  transform: translate3d(0%, 0%, 0) rotateY(0deg);
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  -ms-transition: 0.5s;
  transition: 0.5s;
}
.wrap .section.section6 .section-wrap .item11 .wkpeople2.wkactive {
  opacity: 0!important;
  transform: translate3d(0%, 0%, 0) rotateY(1080deg) !important;
}
.wrap .section.section6 .section-wrap .item11 .wkpeople2-light {
  opacity: 0;
  cursor: pointer;
  top: 49.5%;
  right: 69.5%;
  background-image: url("../img/page/wakeup/section6-wkpeople/wkpeople-2-light.png");
  transform: translate3d(0%, 0%, 0) rotateY(1080deg);
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  -ms-transition: 0.5s;
  transition: 0.5s;
}
.wrap .section.section6 .section-wrap .item11 .wkpeople2-light.wkactive {
  opacity: 1!important;
  transform: translate3d(0%, 0%, 0) rotateY(0deg) !important;
}
.wrap .section.section6 .section-wrap .item11 .wkpeople3 {
  opacity: 1;
  cursor: pointer;
  top: 54%;
  right: 9%;
  width: 11.547%;
  padding-bottom: 16%;
  background-image: url("../img/page/wakeup/section6-wkpeople/wkpeople-3.png");
  transform: translate3d(0%, 0%, 0) rotateY(0deg);
  animation: handhandRotate2 0.5s linear 1;
}
.wrap .section.section6 .section-wrap .item11 .wkpeople3.wkactive {
  opacity: 0;
  animation: handhandRotate1 0.5s linear 1;
}
.wrap .section.section6 .section-wrap .item11 .wkpeople3-light {
  opacity: 0;
  cursor: pointer;
  top: 54%;
  right: 9%;
  width: 11.547%;
  padding-bottom: 16%;
  background-image: url("../img/page/wakeup/section6-wkpeople/wkpeople-3-light.png");
  transform: translate3d(0%, 0%, 0) rotateY(1080deg);
  animation: handhandRotate1 0.45s linear 1;
}
.wrap .section.section6 .section-wrap .item11 .wkpeople3-light.wkactive {
  opacity: 1;
  animation: handhandRotate2 0.45s linear 1;
}
@keyframes handhandRotate1 {
  0% {
    opacity: 1;
    transform: translate3d(0px, 0px, 0) rotateY(0deg);
  }
  50% {
    opacity: 0.5;
    transform: translate3d(0px, -30px, 0) rotateY(540deg);
  }
  100% {
    opacity: 0;
    transform: translate3d(0px, 0px, 0) rotateY(1080deg);
  }
}
@keyframes handhandRotate2 {
  0% {
    opacity: 0;
    transform: translate3d(0%, 0%, 0) rotateY(1080deg);
  }
  50% {
    opacity: 0.5;
    transform: translate3d(0px, -30px, 0) rotateY(540deg);
  }
  100% {
    opacity: 1;
    transform: translate3d(0%, 0%, 0) rotateY(0deg);
  }
}
.wrap .section.section6 .section-wrap .item11 .wkpeople4 {
  top: 42%;
  right: 82%;
  animation: eddieJump 12s linear infinite;
  transform: translate3d(0px, 0px, 0);
}
@media all and (max-width: 800px) {
  .wrap .section.section6 .section-wrap .item11 .wkpeople4 {
    top: 37%;
    right: 74%;
  }
}
.wrap .section.section6 .section-wrap .item11 .wkpeople4 .axe {
  width: 146%;
  padding-bottom: 136%;
  position: absolute;
  top: 24%;
  left: -70%;
  -webkit-background-size: contain;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../img/page/wakeup/section6-item16.png");
  animation: axe 12s linear infinite;
}
.wrap .section.section6 .section-wrap .item11 .wkpeople4 .eddie {
  width: 100%;
  padding-bottom: 180%;
  position: absolute;
  -webkit-background-size: contain;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../img/page/wakeup/section6-wkpeople/wkpeople-4.png");
}
.wrap .section.section6 .section-wrap .item11 .wkpeople4 .eddie .emotion {
  top: -15px;
  right: -25px;
  background-image: url("../img/page/wakeup/emotion-icon/emotion2-r.png");
  animation: emotionJump4 5s linear infinite;
}
@media all and (max-width: 800px) {
  .wrap .section.section6 .section-wrap .item11 .wkpeople4 .eddie .emotion {
    right: -18px;
  }
}
@keyframes axe {
  0% {
    transform: translate3d(0%, 0%, 0) rotate(0deg);
  }
  4% {
    transform: translate3d(0%, -150%, 0) rotate(900deg);
  }
  10% {
    transform: translate3d(0%, 0%, 0) rotate(2700deg);
  }
  10.1% {
    transform: translate3d(0%, 0%, 0) rotate(0deg);
  }
  100% {
    transform: translate3d(0%, 0%, 0) rotate(0deg);
  }
}
@keyframes eddieJump {
  0% {
    transform: translate3d(0%, 0px, 0);
  }
  10% {
    transform: translate3d(0%, 0px, 0);
  }
  11.5% {
    transform: translate3d(0%, -30px, 0);
  }
  13% {
    transform: translate3d(0%, 0px, 0);
  }
  14.5% {
    transform: translate3d(0%, -30px, 0);
  }
  16% {
    transform: translate3d(0%, 0px, 0);
  }
  100% {
    transform: translate3d(0%, 0px, 0);
  }
}
.wrap .section.section6 .section-wrap .item11 .clothes {
  opacity: 0;
  width: 9.983%;
  padding-bottom: 9%;
  position: absolute;
  top: 18%;
  left: 18%;
  transform: translate3d(0, 0, 0);
  background-repeat: no-repeat;
  background-size: contain;
}
.wrap .section.section6 .section-wrap .item11 .clothes.active {
  animation: track1 5s linear infinite;
}
.wrap .section.section6 .section-wrap .item11 .clothes1 {
  background-image: url("../img/page/wakeup/section6-wkpeople/clothes1.png");
}
.wrap .section.section6 .section-wrap .item11 .clothes2 {
  background-image: url("../img/page/wakeup/section6-wkpeople/clothes2.png");
}
.wrap .section.section6 .section-wrap .item11 .clothes3 {
  background-image: url("../img/page/wakeup/section6-wkpeople/clothes3.png");
}
.wrap .section.section6 .section-wrap .item11 .clothes4 {
  background-image: url("../img/page/wakeup/section6-wkpeople/clothes4.png");
}
@keyframes track1 {
  0% {
    opacity: 0;
    transform: translate3d(0px, 0, 0);
  }
  10% {
    opacity: 1;
    transform: translate3d(37%, 24.6%, 0);
  }
  50% {
    opacity: 1;
    transform: translate3d(185%, 123%, 0);
  }
  90% {
    opacity: 1;
    transform: translate3d(333%, 221.4%, 0);
  }
  100% {
    opacity: 0;
    transform: translate3d(370%, 246%, 0);
  }
}
.wrap .section.section6 .section-wrap .item11 .head {
  opacity: 0;
  width: 9.983%;
  padding-bottom: 9%;
  position: absolute;
  top: 66.2%;
  left: 39%;
  transform: translate3d(0, 0, 0);
  background-repeat: no-repeat;
  background-size: contain;
}
.wrap .section.section6 .section-wrap .item11 .head.active {
  animation: track2 5s linear infinite;
}
.wrap .section.section6 .section-wrap .item11 .head1 {
  background-image: url("../img/page/wakeup/section6-wkpeople/head1.png");
}
.wrap .section.section6 .section-wrap .item11 .head2 {
  background-image: url("../img/page/wakeup/section6-wkpeople/head2.png");
}
.wrap .section.section6 .section-wrap .item11 .head3 {
  background-image: url("../img/page/wakeup/section6-wkpeople/head3.png");
}
.wrap .section.section6 .section-wrap .item11 .head4 {
  background-image: url("../img/page/wakeup/section6-wkpeople/head4.png");
}
@keyframes track2 {
  0% {
    opacity: 0;
    transform: translate3d(0px, 0, 0);
  }
  10% {
    opacity: 1;
    transform: translate3d(42%, 27%, 0);
  }
  50% {
    opacity: 1;
    transform: translate3d(210%, 135%, 0);
  }
  90% {
    opacity: 1;
    transform: translate3d(378%, 243%, 0);
  }
  100% {
    opacity: 0;
    transform: translate3d(420%, 270%, 0);
  }
}
@keyframes shake {
  0% {
    transform: translate3d(0, 0, 0);
  }
  1% {
    transform: translate3d(1px, 1px, 0px);
  }
  2% {
    transform: translate3d(0, 0, 0);
  }
  3% {
    transform: translate3d(1px, 1px, 0px);
  }
  4% {
    transform: translate3d(0, 0, 0);
  }
  5% {
    transform: translate3d(1px, 1px, 0px);
  }
  6% {
    transform: translate3d(0, 0, 0);
  }
  7% {
    transform: translate3d(1px, 1px, 0px);
  }
  8% {
    transform: translate3d(0, 0, 0);
  }
  9% {
    transform: translate3d(1px, 1px, 0px);
  }
  10% {
    transform: translate3d(0, 0, 0);
  }
  11% {
    transform: translate3d(1px, 1px, 0px);
  }
  12% {
    transform: translate3d(0, 0, 0);
  }
  13% {
    transform: translate3d(1px, 1px, 0px);
  }
  14% {
    transform: translate3d(0, 0, 0);
  }
  15% {
    transform: translate3d(1px, 1px, 0px);
  }
  16% {
    transform: translate3d(0, 0, 0);
  }
  17% {
    transform: translate3d(1px, 1px, 0px);
  }
  18% {
    transform: translate3d(0, 0, 0);
  }
  19% {
    transform: translate3d(1px, 1px, 0px);
  }
  20% {
    transform: translate3d(0, 0, 0);
  }
  31% {
    transform: translate3d(1px, 1px, 0px);
  }
  32% {
    transform: translate3d(0, 0, 0);
  }
  33% {
    transform: translate3d(1px, 1px, 0px);
  }
  34% {
    transform: translate3d(0, 0, 0);
  }
  35% {
    transform: translate3d(1px, 1px, 0px);
  }
  36% {
    transform: translate3d(0, 0, 0);
  }
  37% {
    transform: translate3d(1px, 1px, 0px);
  }
  38% {
    transform: translate3d(0, 0, 0);
  }
  39% {
    transform: translate3d(1px, 1px, 0px);
  }
  40% {
    transform: translate3d(0, 0, 0);
  }
  41% {
    transform: translate3d(1px, 1px, 0px);
  }
  42% {
    transform: translate3d(0, 0, 0);
  }
  43% {
    transform: translate3d(1px, 1px, 0px);
  }
  44% {
    transform: translate3d(0, 0, 0);
  }
  45% {
    transform: translate3d(1px, 1px, 0px);
  }
  46% {
    transform: translate3d(0, 0, 0);
  }
  47% {
    transform: translate3d(1px, 1px, 0px);
  }
  48% {
    transform: translate3d(0, 0, 0);
  }
  49% {
    transform: translate3d(1px, 1px, 0px);
  }
  50% {
    transform: translate3d(0, 0, 0);
  }
  51% {
    transform: translate3d(0, 0, 0);
  }
}
.wrap .section.section6 .section-wrap .item12 {
  width: 12.417%;
  padding-bottom: 13%;
  position: absolute;
  top: 64%;
  right: 31%;
  -webkit-background-size: contain;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../img/page/wakeup/section6-item12.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section6 .section-wrap .item12 {
    top: 71%;
    right: 19%;
    width: 22%;
    padding-bottom: 23%;
  }
}
.wrap .section.section6 .section-wrap .item13 {
  width: 16.667%;
  padding-bottom: 9%;
  position: absolute;
  top: 77%;
  right: 16%;
  -webkit-background-size: contain;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../img/page/wakeup/section6-item13.png");
  animation: alignment 3s linear infinite;
  transform-origin: bottom right;
  transform: translate3d(0px, 0, 0) rotate(-5deg);
}
@media all and (max-width: 800px) {
  .wrap .section.section6 .section-wrap .item13 {
    top: 81.5%;
    right: 0%;
    width: 25%;
    padding-bottom: 15%;
    animation: alignmentM 3s linear infinite;
  }
}
.wrap .section.section6 .section-wrap .item13 .emotion {
  top: -10px;
  right: -25px;
  background-image: url("../img/page/wakeup/emotion-icon/emotion5-r.png");
  animation: emotionJump4 5s linear infinite;
}
@media all and (max-width: 800px) {
  .wrap .section.section6 .section-wrap .item13 .emotion {
    right: -18px;
  }
}
@keyframes alignment {
  0% {
    transform: translate3d(0px, 0, 0) rotate(0deg);
  }
  12.5% {
    transform: translate3d(-30%, -20%, 0) rotate(0deg);
  }
  25% {
    transform: translate3d(0px, 0, 0) rotate(0deg);
  }
  37% {
    transform: translate3d(-10%, -20%, 0) rotate(4deg);
  }
  50% {
    transform: translate3d(0px, 0, 0) rotate(0deg);
  }
  100% {
    transform: translate3d(0px, 0, 0) rotate(0deg);
  }
}
@keyframes alignmentM {
  0% {
    transform: translate3d(0px, 0, 0) rotate(0deg);
  }
  12.5% {
    transform: translate3d(-15%, -8%, 0) rotate(-2deg);
  }
  25% {
    transform: translate3d(0px, 0, 0) rotate(0deg);
  }
  37% {
    transform: translate3d(-6%, -7%, 0) rotate(6deg);
  }
  50% {
    transform: translate3d(0px, 0, 0) rotate(0deg);
  }
  100% {
    transform: translate3d(0px, 0, 0) rotate(0deg);
  }
}
.wrap .section.section6 .section-wrap .item14 {
  width: 9.417%;
  padding-bottom: 15%;
  position: absolute;
  top: 2.5%;
  right: 4%;
  -webkit-background-size: contain;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../img/page/wakeup/section6-item14.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section6 .section-wrap .item14 {
    width: 37%;
    padding-bottom: 38%;
    top: 1.5%;
    right: 0%;
    background-image: url("../img/page/wakeup/section6-item14-m.png");
  }
}
.wrap .section.section6 .section-wrap .item15 {
  width: 8.584%;
  padding-bottom: 14%;
  position: absolute;
  top: 4.5%;
  right: 10%;
  -webkit-background-size: contain;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../img/page/wakeup/section6-item15.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section6 .section-wrap .item15 {
    display: none;
  }
}
.wrap .section.section6 .section-wrap .join-btn {
  cursor: pointer;
  z-index: 11;
  position: absolute;
  bottom: 10%;
  left: 50%;
  margin-left: -130px;
  width: 260px;
  border-radius: 10px;
  font-size: 22px;
  line-height: 1;
  letter-spacing: 1px;
  color: #fff;
  text-align: center;
  border-bottom: solid 7px #437ebe;
  background-color: #40b6f1;
  -webkit-transition: 0.2s;
  -moz-transition: 0.2s;
  -o-transition: 0.2s;
  -ms-transition: 0.2s;
  transition: 0.2s;
}
.wrap .section.section6 .section-wrap .join-btn:hover {
  border-bottom: solid 3px #437ebe;
  background-color: #56c0f5;
}
.wrap .section.section6 .section-wrap .join-btn a {
  display: block;
  padding: 15px 20px;
}
@media all and (max-width: 600px) {
  .wrap .section.section6 .section-wrap .join-btn {
    bottom: 5%;
    margin-left: -20%;
    width: 40%;
    font-size: 18px;
    border-bottom: solid 5px #437ebe;
  }
  .wrap .section.section6 .section-wrap .join-btn:hover {
    border-bottom: solid 3px #437ebe;
    background-color: #56c0f5;
  }
  .wrap .section.section6 .section-wrap .join-btn a {
    padding: 10px 20px;
  }
}
.wrap .section.section6 .section-wrap .road {
  background-color: #fff;
  background-image: url("../img/page/wakeup/section6-road.png");
}
@media all and (max-width: 800px) {
  .wrap .section.section6 .section-wrap .road .fresh-man {
    display: none;
  }
}
.wrap .mid-road-box {
  position: fixed;
  top: 0;
  left: 50%;
  width: 8%;
  height: 100%;
  margin-left: -4%;
  background-color: #bdbdbd;
}
@media all and (max-width: 800px) {
  body {
    width: 100%;
    height: 100%!important;
    padding: 0;
    margin: 0;
    overflow-x: hidden;
  }
}