@charset "UTF-8";
.pj-HiLifeCalorie {
  background: url(bg.jpg) no-repeat center bottom;
  background-size: cover;
  display: flex; }
  .pj-HiLifeCalorie .pj-detail {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 16px 44px rgba(33, 33, 33, 0.1), 0 24px 12px rgba(33, 33, 33, 0.06);
    opacity: 0; }
    .pj-HiLifeCalorie .pj-detail.item-animate {
      transition: all .8s ease-in-out;
      opacity: 1; }

@media (min-width: 992px) {
  .pj-detail {
    left: 0; } }
@media (min-width: 1600px) {
  .pj-detail {
    margin-top: -10%;
    margin-left: -240px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); } }
.pj-hlc-phone {
  margin-top: 0;
  opacity: 0;
  position: absolute;
  right: 25%;
  width: 203px;
  z-index: 2;
  position: absolute;
  top: 50%; }
  .pj-hlc-phone img {
    width: 100%;
    height: auto;
    -webkit-user-select: none;
    /* Chrome all / Safari all */
    -moz-user-select: none;
    /* Firefox all */
    -ms-user-select: none;
    /* IE 10+ */
    user-select: none;
    /* Likely future */ }
  .pj-hlc-phone.item-animate {
    animation: pjHlcPhoneAnimate 1s forwards; }

@keyframes pjHlcPhoneAnimate {
  0% {
    margin-top: 10%;
    opacity: 0; }
  100% {
    margin-top: -10%;
    opacity: 1; } }
.pj-hlc-items {
  bottom: 0;
  position: absolute;
  top: 0;
  width: 100%; }
  .pj-hlc-items .item {
    position: absolute; }
    .pj-hlc-items .item img {
      width: 100%;
      height: auto;
      -webkit-user-select: none;
      /* Chrome all / Safari all */
      -moz-user-select: none;
      /* Firefox all */
      -ms-user-select: none;
      /* IE 10+ */
      user-select: none;
      /* Likely future */ }

.pj-hlc-cart {
  bottom: 0;
  left: 0;
  width: 19.2708333333%;
  z-index: 1; }
  .pj-hlc-cart.item-animate {
    animation: pjHlcCartAnimate 3s forwards; }

@keyframes pjHlcCartAnimate {
  0% {
    left: 0; }
  100% {
    left: 75%; } }
.pj-hlc-bar {
  bottom: 0;
  left: 0;
  opacity: .5;
  width: 100%; }
  .pj-hlc-bar [class^="bar"] {
    bottom: 0;
    height: 0;
    left: 0;
    position: absolute;
    right: 0;
    z-index: 1; }
  .pj-hlc-bar [class^="bar-1"] {
    margin-bottom: 37.2916666667%; }
  .pj-hlc-bar [class^="bar-2"] {
    margin-bottom: 31.0416666667%; }
  .pj-hlc-bar [class^="bar-3"] {
    margin-bottom: 24.7916666667%; }
  .pj-hlc-bar [class^="bar-4"] {
    margin-bottom: 18.5416666667%; }
  .pj-hlc-bar [class^="bar-5"] {
    margin-bottom: 12.2916666667%; }
  .pj-hlc-bar.item-animate [class^="bar"] {
    height: 69px;
    transition-property: height;
    transition-duration: .5s;
    transition-timing-function: ease-in-out; }
  .pj-hlc-bar.item-animate .bar-1-1 {
    background: url("bar-1-143fd.png") 12% 50% repeat-x;
    transition-delay: 1.2s; }
  .pj-hlc-bar.item-animate .bar-1-2 {
    background: url("bar-1-243fd.png") 12% 50% repeat-x;
    transition-delay: 2.61s; }
  .pj-hlc-bar.item-animate .bar-1-3 {
    background: url("bar-1-343fd.png") 12% 50% repeat-x;
    transition-delay: 1.02s; }
  .pj-hlc-bar.item-animate .bar-1-4 {
    background: url("bar-1-443fd.png") 12% 50% repeat-x;
    transition-delay: 2.86s; }
  .pj-hlc-bar.item-animate .bar-2-1 {
    background: url("bar-0-143fd.png") 24% 50% repeat-x;
    transition-delay: 1.49s; }
  .pj-hlc-bar.item-animate .bar-2-2 {
    background: url("bar-0-243fd.png") 24% 50% repeat-x;
    transition-delay: 1.41s; }
  .pj-hlc-bar.item-animate .bar-2-3 {
    background: url("bar-0-343fd.png") 24% 50% repeat-x;
    transition-delay: 1.71s; }
  .pj-hlc-bar.item-animate .bar-2-4 {
    background: url("bar-0-443fd.png") 24% 50% repeat-x;
    transition-delay: 2.22s; }
  .pj-hlc-bar.item-animate .bar-3-1 {
    background: url("bar-1-143fd.png") 36% 50% repeat-x;
    transition-delay: 1.8s; }
  .pj-hlc-bar.item-animate .bar-3-2 {
    background: url("bar-1-243fd.png") 36% 50% repeat-x;
    transition-delay: 2.82s; }
  .pj-hlc-bar.item-animate .bar-3-3 {
    background: url("bar-1-343fd.png") 36% 50% repeat-x;
    transition-delay: 2.49s; }
  .pj-hlc-bar.item-animate .bar-3-4 {
    background: url("bar-1-443fd.png") 36% 50% repeat-x;
    transition-delay: 2.6s; }
  .pj-hlc-bar.item-animate .bar-4-1 {
    background: url("bar-0-143fd.png") 48% 50% repeat-x;
    transition-delay: 1.24s; }
  .pj-hlc-bar.item-animate .bar-4-2 {
    background: url("bar-0-243fd.png") 48% 50% repeat-x;
    transition-delay: 1.28s; }
  .pj-hlc-bar.item-animate .bar-4-3 {
    background: url("bar-0-343fd.png") 48% 50% repeat-x;
    transition-delay: 2s; }
  .pj-hlc-bar.item-animate .bar-4-4 {
    background: url("bar-0-443fd.png") 48% 50% repeat-x;
    transition-delay: 1.85s; }
  .pj-hlc-bar.item-animate .bar-5-1 {
    background: url("bar-1-143fd.png") 60% 50% repeat-x;
    transition-delay: 2.6s; }
  .pj-hlc-bar.item-animate .bar-5-2 {
    background: url("bar-1-243fd.png") 60% 50% repeat-x;
    transition-delay: 2.05s; }
  .pj-hlc-bar.item-animate .bar-5-3 {
    background: url("bar-1-343fd.png") 60% 50% repeat-x;
    transition-delay: 2.03s; }
  .pj-hlc-bar.item-animate .bar-5-4 {
    background: url("bar-1-443fd.png") 60% 50% repeat-x;
    transition-delay: 2.53s; }

/* 手機版 */
@media (max-width: 1023px) {
  .pj-HiLifeCalorie {
    background-size: auto 100%; }

  .pj-hlc-phone {
    margin-top: 0;
    bottom: -25%;
    top: auto;
    position: absolute;
    left: 50%;
    transform: translateX(-50%); }
    .pj-hlc-phone.item-animate {
      animation: pjHlcPhoneAnimatePhone 1s forwards; }

  .pj-hlc-cart {
    width: 220px; }
    .pj-hlc-cart.item-animate {
      animation: pjHlcCartAnimatePhone 2s forwards; }

  .pj-hlc-bar [class^="bar-1"] {
    margin-bottom: 68.25vh; }
  .pj-hlc-bar [class^="bar-2"] {
    margin-bottom: 56.55vh; }
  .pj-hlc-bar [class^="bar-3"] {
    margin-bottom: 44.85vh; }
  .pj-hlc-bar [class^="bar-4"] {
    margin-bottom: 33.15vh; }
  .pj-hlc-bar [class^="bar-5"] {
    margin-bottom: 21.45vh; } }
@keyframes pjHlcPhoneAnimatePhone {
  0% {
    bottom: -30%;
    opacity: 0; }
  100% {
    bottom: -25%;
    opacity: 1; } }
@keyframes pjHlcCartAnimatePhone {
  0% {
    left: 0; }
  100% {
    left: 100%; } }

/*# sourceMappingURL=HiLifeCalorie.css.map */