#market .bg-yellow {
  position: absolute;
  width: 30vw;
  height: 30vw;
  background-image: linear-gradient(to top, #Db7e1b 45%, #fdc300 80%);
  border-radius: 50%;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
  transition: all 3s ease;
  mix-blend-mode: lighten;
  mix-blend-mode: difference;
}

#market.active .bg-yellow {transform: translateX(-50%) scale(5);}

#market .text-head {
  color: #000;
  transition: color 0.6s ease;
}

#market.active .text-head {color: #fff;}

#market .cont {
  width: 100%;
  bottom: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
}

#market .cont img {
  width: 100%;
  max-width: 2000px;
  margin-inline: auto;
}

#market .map {transition-delay: 1s;}

#market .logo-inmap {transition-delay: 1.5s;}

/* add 10-03-26 */
#market .logo-inmap img {animation: logoMarket 1s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;}

@keyframes logoMarket {
20% {transform: translateY(0);}
70% {transform: translateY(-15px) translateX(-1%) scale(1.05);}
}

#market .loca {transition-delay: 2s;}

#market .run-number {transition-delay: 2.3s;}

@media screen and (max-width:1280px) {
  #market .run-number {margin-top: 0;}
}

#market.active .map,
#market.active .logo-inmap,
#market.active .loca,
#market.active .run-number {
  opacity: 1;
}

/* run number*/
@property --num-year {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}

@property --num-export {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}

@property --numSKU {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}

.year {
  counter-reset: num-year var(--num-year);
  --num-export: 0;
  font-size: 5rem;
}

.year::after {content: counter(num-year);}

@keyframes counter-year {
  0%,50% {--num-year: 0;}
  100% {--num-year: 50;}
}

.export {
  counter-reset: num-export var(--num-export);
  --num-export: 0;
  font-size: 2rem;
  display: flex;
  flex-direction: row-reverse;
}

.export::after {
  content: counter(num-export);
  font-size: 5rem;
}

@keyframes counter-export {
  0%,50% {--num-export: 0;}
  100% {--num-export: 70;}
}

.SKU {
  counter-reset: numSKU var(--numSKU);
  --numSKU: 0;
  font-size: 2rem;
  display: flex;
  flex-direction: row-reverse;
}

.SKU::after {
  content: counter(numSKU);
  font-size: 5rem;
}

@keyframes counterSKU {
  0%,50% {--numSKU: 0;}
  100% {--numSKU: 737;}
}

#market.active .run-number .year {
  animation: counter-year 6s alternate ease-in-out;
  --num-year: 50;
}

#market.active .run-number .export {
  animation: counter-export 6s alternate ease-in-out;
  --num-export: 70;
}

#market.active .run-number .SKU {
  animation: counterSKU 6s alternate ease-in-out;
  --numSKU: 700;
}

@media screen and (min-width: 3580px) {
  #market .container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #market .run-number {width: 80vw;}

  #market .cont img {max-width: 90vw;}

  .year,
  .export,
  .SKU {
    font-size: 3vw;
    line-height: 5vw;
  }

  .year::after,
  .export::after,
  .SKU::after {font-size: 6vw;}

  #market .run-number .run {
    width: auto;
    height: auto;
  }

  #market .run-number p {
    font-size: 2.2vw;
    line-height: 2vw;
  }
}

@media screen and (max-width: 1700px) {
  #market .cont img {width: 80%;}
}