@charset "UTF-8";
.pj-ttesport {
  background: url(bg.jpg) no-repeat center bottom;
  background-size: cover;
  color: #fff;
  display: flex; }
  .pj-ttesport .pj-detail {
    background: rgba(0, 0, 0, 0.65);
    z-index: 4; }
  .pj-ttesport .pj-name {
    color: #fff; }
    .pj-ttesport .pj-name img {
      display: inline-block;
      height: auto;
      margin: 0 .5em .25em 0;
      position: relative;
      top: -.325em;
      vertical-align: middle;
      width: 180px; }

.pj-ttesport-items {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
  animation: fadeinfirst 7s;
  animation-iteration-count: 1; }
  .pj-ttesport-items .item {
    position: absolute; }

@keyframes fadeinfirst {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
.pj-ttesport-hand {
  bottom: 0;
  height: auto;
  left: 80.859375%;
  margin-top: 0;
  transition: all .3s ease;
  width: 12.890625%;
  z-index: 2; }
  .pj-ttesport-hand.item-animate {
    animation: pjTtSportAnimateHand .3s infinite; }

.pj-ttesport-mouse {
  bottom: 0;
  height: auto;
  left: 82.03125%;
  margin-bottom: 10.5%;
  width: 9.21875%; }

.pj-ttesport-keyboard {
  bottom: 0;
  height: auto;
  left: 46.875%;
  transition: left .3s ease-in-out;
  margin-bottom: 10%;
  width: 50%; }
  .pj-ttesport-keyboard.item-animate {
    left: 30%; }

.pj-ttesport-ipad {
  bottom: 0;
  height: auto;
  left: 2.8125%;
  margin-bottom: 2.5%;
  width: 26.328125%; }
  .pj-ttesport-ipad .chart-bar-groups {
    align-items: flex-end;
    bottom: 8.8421052632%;
    display: flex;
    height: 54.3157894737%;
    justify-content: space-between;
    left: 23.7388724036%;
    position: absolute;
    width: 68.2492581602%; }
  .pj-ttesport-ipad .chart-bar {
    background: #289b9b;
    height: 0.3875968992%;
    width: 4.347826087%; }
    .pj-ttesport-ipad .chart-bar.chart-b {
      background: #fff; }
    .pj-ttesport-ipad .chart-bar.chart-c {
      background: #b6b8b8; }
  .pj-ttesport-ipad.item-animate .chart-a {
    animation: pjTtSportAnimateChartA 1.4s linear infinite alternate; }
  .pj-ttesport-ipad.item-animate .chart-b {
    animation: pjTtSportAnimateChartB 1s linear infinite alternate; }
  .pj-ttesport-ipad.item-animate .chart-c {
    animation: pjTtSportAnimateChartC .8s linear infinite alternate; }

.pj-ttesport-slogan {
  bottom: 0;
  height: auto;
  left: 34.375%;
  margin-bottom: 25%;
  width: 37.5%;
  z-index: 2; }

.pj-ttesport-dashboard {
  bottom: 0;
  left: 73.046875%;
  margin-bottom: 24%;
  width: 26.09375%; }
  .pj-ttesport-dashboard .db-meter {
    position: relative;
    height: auto;
    width: 100%;
    z-index: 1; }
  .pj-ttesport-dashboard .db-fire {
    height: auto;
    overflow: hidden;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; }
    .pj-ttesport-dashboard .db-fire img {
      height: auto;
      width: 300%; }
    .pj-ttesport-dashboard .db-fire.item-animate {
      opacity: .8;
      transition: opacity .3s ease-in-out; }
      .pj-ttesport-dashboard .db-fire.item-animate img {
        animation: pjTtSportAnimateFire 0.5s steps(1) infinite; }
  .pj-ttesport-dashboard .db-number {
    bottom: 12.5%;
    color: #616161;
    font-size: 15px;
    font-weight: 700;
    height: 10.5960264901%;
    left: 38.3233532934%;
    line-height: 1.1;
    position: absolute;
    text-align: center;
    width: 23.9520958084%;
    z-index: 1;
    overflow: hidden; }
  .pj-ttesport-dashboard .db-arrow {
    height: auto;
    left: 50%;
    margin-left: -7.1856287425%;
    margin-top: -31.7880794702%;
    position: absolute;
    top: 50%;
    transform: rotate(-133deg);
    transform-origin: 50% 86%;
    width: 12.5748502994%;
    z-index: 2; }
    .pj-ttesport-dashboard .db-arrow.item-animate {
      animation: pjTtSportAnimateArrow 1.5s linear 1 forwards; }

.pj-ttesport-ipad2 {
  bottom: 0;
  height: auto;
  left: 64.140625%;
  margin-bottom: 6%;
  width: 26.328125%;
  z-index: 3;
  opacity: 0; }

.pj-ttesport-iphone {
  bottom: 0;
  height: auto;
  left: 47.65625%;
  margin-bottom: 6%;
  width: 15.234375%;
  z-index: 3;
  opacity: 0; }

@keyframes pjTtSportAnimateHand {
  0% {
    margin-top: 0; }
  50% {
    margin-top: -.35%; }
  100% {
    margin-top: 0; } }
@keyframes pjTtSportAnimateChartA {
  0% {
    height: 15.503875969%; }
  50% {
    height: 71.7054263566%; }
  100% {
    height: 15.503875969%; } }
@keyframes pjTtSportAnimateChartB {
  0% {
    height: 15.503875969%; }
  50% {
    height: 44.5736434109%; }
  100% {
    height: 15.503875969%; } }
@keyframes pjTtSportAnimateChartC {
  0% {
    height: 15.503875969%; }
  50% {
    height: 29.0697674419%; }
  100% {
    height: 15.503875969%; } }
@keyframes pjTtSportAnimateArrow {
  0% {
    transform: rotate(-125deg); }
  15% {
    transform: rotate(0deg); }
  30% {
    transform: rotate(131deg); }
  70% {
    transform: rotate(131deg); }
  100% {
    transform: rotate(131deg); } }
@keyframes pjTtSportAnimateFire {
  0%,
    100% {
    margin-left: 0; }
  25% {
    margin-left: -102%; }
  50% {
    margin-left: -203%; }
  75% {
    margin-left: -102%; } }
@media (min-width: 1024px) {
  .pj-ttesport .pj-detail {
    width: 600px;
    background: transparent;
    box-shadow: none; } }
/* 手機版 */
@media (max-width: 1023px) {
  .pj-ttesport .pj-name img {
    display: block; }

  .pj-ttesport {
    background-size: auto 100%; }

  .pj-ttesport-dashboard .db-number {
    font-size: 12px; }

  .pj-ttesport-ipad2 {
    left: 39.61352657%;
    width: 55.5555555556%; }

  .pj-ttesport-iphone {
    left: 5.7971014493%;
    width: 32.1256038647%; } }

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