#bonpromotion {
  margin-bottom: 50px;
  overflow: hidden;
  position: relative;
  width: 100%;
}

#bonpromotion ul {
  margin-bottom: 0;
}

#bonpromotion ul,
#bonpromotion li {
  min-height: inherit;
}

#bonpromotion .box-promotion {
  padding: 10px;
  text-align: center;
  min-height: inherit;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#bonpromotion .box-promotion .box-promotion-desc h4 {
  font-weight: normal;
  line-height: 150%;
}

#bonpromotion .box-promotion .box-promotion-desc h3 {
  line-height: 150%;
  margin-bottom: 0;
}

#bonpromotion .box-promotion .box-promotion-desc h3 span {
  color: #ff4c4c;
}

#bonpromotion .box-promotion-desc {
  margin-bottom: 21px;
}

#bonpromotion .bonpromotion-countdown>span {
  color: #777;
  font-weight: 300;
  line-height: 1;
  background-color: #fff;
  box-shadow: 0.5px 0.5px 4px 0px #00000040;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
}

#bonpromotion .bonpromotion-countdown>span span {
  color: #3a3a3a;
  display: block;
}

#bonpromotion .btn-primary {
  padding-left: 10px;
  padding-right: 10px;
}

#bonpromotion ul li a:focus,
#bonpromotion ul li a:active {
  outline: none;
}

#bonpromotion .link-promotion {
  display: block;
  perspective: 1px;
  overflow-x: hidden;
  overflow-y: auto;
  background-size: cover !important;
  min-height: inherit;
}


@media screen and (min-width: 1881px) {
  #bonpromotion {
    min-height: 460px;
  }

  #bonpromotion .box-promotion .box-promotion-desc h4 {
    font-size: 35px;
    margin-bottom: 23px;
  }

  #bonpromotion .box-promotion .box-promotion-desc h3 {
    font-size: 25px;
  }

  #bonpromotion .bonpromotion-countdown {
    margin-bottom: 50px;
  }

  #bonpromotion .bonpromotion-countdown>span {
    margin-left: 11px;
    margin-right: 11px;
    min-width: 78px;
    min-height: 78px;
  }

  #bonpromotion .bonpromotion-countdown>span {
    font-size: 18px;
  }

  #bonpromotion .bonpromotion-countdown>span span {
    font-size: 40px;
  }

  #bonpromotion .btn-primary {
    min-width: 149px;
    padding-top: 16px;
    padding-bottom: 16px;
  }
}

@media screen and (max-width: 1880px) {
  #bonpromotion {
    min-height: calc(360px + (460 - 360) * ((100vw - 320px) / (1880 - 320)));
  }

  #bonpromotion .box-promotion .box-promotion-desc h4 {
    font-size: calc(25px + (35 - 25) * ((100vw - 320px) / (1880 - 320)));
    margin-bottom: calc(10px + (23 - 10) * ((100vw - 320px) / (1880 - 320)));
  }

  #bonpromotion .box-promotion .box-promotion-desc h3 {
    font-size: calc(15px + (25 - 15) * ((100vw - 320px) / (1880 - 320)));
  }

  #bonpromotion .bonpromotion-countdown {
    margin-bottom: calc(30px + (50 - 30) * ((100vw - 320px) / (1880 - 320)));
  }

  #bonpromotion .bonpromotion-countdown>span {
    margin-left: calc(5px + (11 - 5) * ((100vw - 320px) / (1880 - 320)));
    margin-right: calc(5px + (11 - 5) * ((100vw - 320px) / (1880 - 320)));
    min-width: calc(65px + (78 - 65) * ((100vw - 320px) / (1880 - 320)));
    min-height: calc(65px + (78 - 65) * ((100vw - 320px) / (1880 - 320)));
  }

  #bonpromotion .bonpromotion-countdown>span {
    font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (1880 - 320)));
  }

  #bonpromotion .bonpromotion-countdown>span span {
    font-size: calc(20px + (40 - 20) * ((100vw - 320px) / (1880 - 320)));
  }

  #bonpromotion .btn-primary {
    min-width: calc(100px + (149 - 100) * ((100vw - 320px) / (1880 - 320)));
    padding-top: calc(10px + (16 - 10) * ((100vw - 320px) / (1880 - 320)));
    padding-bottom: calc(10px + (16 - 10) * ((100vw - 320px) / (1880 - 320)));
  }
}