@font-face {
  font-family: Antonio;
  src: url(../fonts/Antonio-Regular.ttf) format("truetype"); }

@font-face {
  font-family: Helvethaica;
  src: url(../fonts/DB_Helvethaica_X_Li_v3.2.ttf) format("truetype"); }

a {
  color: #5d3312; }

p {
  font-size: 18px; }

* {
  font-family: Helvethaica; }

.cursor-pointer {
  cursor: pointer; }

.img-fluid {
  width: 100%;
  height: 100%; }

.color-orange {
  color: #fe9227; }

.font-big {
  font-weight: 900;
  font-size: 28px;
  margin-right: 5px; }

.font-bigger {
  font-weight: 900;
  font-size: 32px;
  margin-right: 5px; }

.banner .spm-logo {
  position: absolute;
  width: 11vw;
  height: 11vw;
  padding: 1vw; }

.banner .line {
  position: absolute;
  width: 4vw;
  height: 4vw;
  right: 2vw;
  top: 3vw;
  cursor: pointer;
  padding: 0.3vw; }

.banner .group {
  position: absolute; }
  .banner .group .title {
    margin-top: 5vw; }
  .banner .group .slogan {
    color: white;
    text-align: center;
    font-size: 2.4vw;
    margin-top: 6%; }
    @media screen and (max-width: 991px) {
      .banner .group .slogan {
        font-size: 4vw;
        margin-top: 30%; } }
  .banner .group .left {
    margin-top: 2vw;
    width: 100%;
    float: right; }
  .banner .group .right {
    margin-top: 2vw;
    width: 90%; }
  .banner .group .buynow {
    display: flex;
    justify-content: center;
    cursor: pointer;
    margin-top: 3vw; }
    .banner .group .buynow a {
      width: 54%;
      height: 54%; }
      @media screen and (max-width: 991px) {
        .banner .group .buynow a {
          width: 84%;
          height: 84%; } }
  .banner .group .coffee-mug {
    margin-top: 3vw;
    display: flex;
    justify-content: center; }
    @media screen and (max-width: 991px) {
      .banner .group .coffee-mug {
        margin-top: -15vw; } }
    .banner .group .coffee-mug img {
      width: 140%; }
      @media screen and (max-width: 991px) {
        .banner .group .coffee-mug img {
          width: 70%; } }

.banner .facebook {
  position: absolute;
  width: 4vw;
  height: 4vw;
  right: 6vw;
  top: 3vw;
  cursor: pointer;
  padding: 0.3vw; }

.introduce.bg {
  background-image: url(../images/backgrounds/bg5.png);
  background-size: contain; }

.introduce .text-group {
  text-align: center;
  font-size: 170%;
  margin-top: 6vw;
  margin-bottom: 4vw;
  font-weight: bold; }
  @media screen and (max-width: 768px) {
    .introduce .text-group {
      font-size: 120%; } }

.introduce .content {
  width: 100%; }
  .introduce .content .video {
    position: relative;
    padding-bottom: 56.3%;
    margin-bottom: 15px; }
    .introduce .content .video iframe {
      position: absolute;
      width: 100% !important;
      height: 100% !important; }

.introduce .coffee-result {
  margin-top: 7vw;
  margin-bottom: 7vw; }

.introduce .owl-carousel .item {
  cursor: pointer;
  position: relative;
  padding-bottom: 100%; }
  .introduce .owl-carousel .item .media-icon {
    display: flex;
    justify-content: center;
    flex-direction: column;
    height: 100%;
    width: 100%;
    position: absolute; }
    .introduce .owl-carousel .item .media-icon img {
      width: 100%; }

.articles .article {
  display: flex;
  margin-bottom: 25px; }
  .articles .article .image {
    width: 50%; }
  .articles .article .text {
    width: 50%;
    font-size: 28px;
    text-align: center;
    padding: 28px 10px 0px 10px;
    line-height: 24px; }

.carousel {
  height: 740px; }
  .carousel .carousel-item {
    width: 500px;
    height: 700px; }
    @media screen and (max-width: 991px) {
      .carousel .carousel-item {
        width: 200px;
        height: 300px; } }
  @media screen and (max-width: 991px) {
    .carousel {
      height: 400px; } }

.slider {
  padding-top: 100px;
  padding-bottom: 100px;
  background-image: url(../images/backgrounds/bg1.png);
  background-position: left;
  background-size: cover; }
  .slider .video-banner {
    position: relative;
    padding-bottom: 100%;
    margin-bottom: 15px; }
    .slider .video-banner iframe {
      position: absolute;
      width: 100%;
      height: 100%; }
  @media screen and (max-width: 991px) {
    .slider .col-12 {
      padding-left: 0px;
      padding-right: 0px; } }
  .slider .previous {
    cursor: pointer;
    user-select: none;
    position: absolute;
    height: 89%;
    z-index: 44;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition-duration: 300ms;
    transition-property: background-color; }
    .slider .previous:hover {
      background-color: rgba(254, 146, 39, 0.5); }
    .slider .previous img {
      width: 40px; }
      @media screen and (min-width: 1030px) {
        .slider .previous img {
          width: 70px;
          margin-left: -70px; } }
  .slider .next {
    cursor: pointer;
    user-select: none;
    position: absolute;
    right: 0px;
    height: 89%;
    z-index: 44;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition-duration: 300ms;
    transition-property: background-color; }
    .slider .next:hover {
      background-color: rgba(254, 146, 39, 0.5); }
    .slider .next img {
      width: 40px; }
      @media screen and (min-width: 1030px) {
        .slider .next img {
          width: 70px;
          margin-right: -70px; } }
  .slider .owl-carousel .owl-video-tn {
    background-size: cover; }
  .slider .owl-carousel .owl-dots.disabled {
    display: block; }
  .slider .owl-carousel .owl-dots .owl-dot.active span {
    background-color: orangered; }

.component .title {
  width: 450px;
  height: 100px;
  overflow: hidden; }
  .component .title img {
    width: 100%; }
  @media screen and (max-width: 991px) {
    .component .title {
      width: 320px;
      height: 80px; } }

.component .component-items {
  display: flex;
  justify-content: center; }
  .component .component-items img {
    width: 90%;
    height: 100%; }
  .component .component-items.item-2 img {
    width: 70%; }
    @media screen and (max-width: 991px) {
      .component .component-items.item-2 img {
        width: 90%; } }

.component-description {
  margin-top: 50px;
  margin-bottom: 50px;
  display: flex;
  justify-content: center; }
  .component-description .text {
    width: 840px;
    font-size: 24px;
    text-align: center; }

.feature {
  width: 50%;
  margin-left: 25%;
  margin-right: 25%;
  padding-bottom: 120px; }
  @media screen and (max-width: 991px) {
    .feature {
      width: 100%;
      margin-left: 0%;
      margin-right: 0%; } }
  .feature table {
    width: 100%;
    text-align: center;
    font-size: 24px;
    border-color: #95663c; }
    .feature table thead {
      color: #c1681a;
      background-color: #67310b; }
    .feature table tbody tr:nth-child(odd) {
      background-color: #fde7d3; }

.review-title {
  overflow: hidden; }
  .review-title .title {
    width: 40vw;
    margin-right: -70px;
    overflow: hidden;
    margin-left: auto;
    margin-bottom: 0px; }
    @media screen and (max-width: 991px) {
      .review-title .title {
        width: 80vw; } }

.review {
  border-image: url(../images/backgrounds/bg2.png) 30 round;
  background-position: center;
  margin-top: -60px;
  overflow: hidden;
  border-top: 30px solid #ffffff;
  font-size: 30px; }
  .review .bg-1 {
    background-color: #ffe5d3;
    padding-top: 4vw;
    padding-bottom: 4vw;
    color: black; }
  .review .bg-2 {
    background-color: #fe9227;
    padding-top: 4vw;
    padding-bottom: 4vw;
    color: white; }
  .review .title-1 {
    font-weight: bold;
    color: #fe9227; }
  .review .title-2 {
    font-weight: bold;
    color: white; }
  .review .content {
    width: 100%; }
    .review .content .video {
      position: relative;
      padding-bottom: 52%;
      margin-bottom: 15px; }
      .review .content .video iframe {
        position: absolute;
        width: 100% !important;
        height: 100% !important; }

.standard {
  z-index: 100;
  position: relative;
  width: 100%;
  margin-top: -130px; }
  .standard .bg {
    border-image: url(../images/backgrounds/bg3.png) 30 round; }
    .standard .bg img.title {
      position: relative;
      margin-top: -70px;
      width: 40vw;
      overflow: hidden;
      margin-bottom: -4vw;
      margin-left: -70px; }
      @media screen and (max-width: 991px) {
        .standard .bg img.title {
          width: 80vw;
          margin-bottom: -14vw; } }
    .standard .bg .content {
      margin-bottom: -100px; }
      @media screen and (max-width: 991px) {
        .standard .bg .content {
          margin-bottom: -25px; } }
      .standard .bg .content .gif {
        width: 23vw;
        position: absolute;
        right: 32px;
        top: 81px; }

.flowers {
  position: relative;
  z-index: 101;
  display: flex;
  margin-top: -13vw; }
  @media screen and (max-width: 991px) {
    .flowers {
      margin-top: -16vw; } }
  .flowers .flower-left {
    width: 25vw; }
  .flowers .flower-right {
    margin-left: auto;
    width: 25vw; }

.promotion {
  margin-top: -13vw;
  min-height: 77vw;
  position: relative;
  z-index: 100;
  background-image: url(../images/backgrounds/bg4.png);
  background-size: 100% auto; }
  @media screen and (max-width: 1440px) {
    .promotion {
      margin-top: -10vw; } }
  @media screen and (max-width: 991px) {
    .promotion {
      margin-top: -8vw;
      min-height: 117vw;
      background-size: cover; } }
  @media screen and (max-width: 420px) {
    .promotion {
      margin-top: -8vw; } }
  .promotion .title {
    position: absolute;
    margin-top: 0vw;
    text-align: center;
    width: 100%; }
    .promotion .title img {
      width: 30vw; }
      @media screen and (max-width: 991px) {
        .promotion .title img {
          width: 50vw; } }
  .promotion .content {
    margin-bottom: 100px; }
    @media screen and (max-width: 991px) {
      .promotion .content {
        margin-bottom: 50px; } }
    .promotion .content .coffee-box {
      margin-top: 20vw;
      margin-bottom: 15vw; }
    .promotion .content .btn-contact {
      margin-top: -12vw;
      text-align: center; }
      @media screen and (max-width: 991px) {
        .promotion .content .btn-contact img {
          width: 150px; } }

.footer {
  background-image: url(../images/backgrounds/bg4.png);
  background-position: bottom;
  background-size: cover;
  color: #5d3312;
  font-weight: bold;
  height: 41vw;
  padding-top: 10%; }
  @media screen and (max-width: 991px) {
    .footer {
      height: 81vw; } }
  .footer .phone-number {
    margin-left: 10px;
    font-size: 34px;
    padding-top: 6px;
    position: absolute; }
  .footer .social .social-icon {
    width: 44px;
    height: 44px;
    object-fit: cover;
    margin-right: 10px; }
  .footer .copy-right {
    min-height: 100px;
    font-size: 24px;
    width: 90%;
    height: 100%;
    position: absolute; }
    .footer .copy-right .text {
      width: 100%;
      position: absolute;
      bottom: 0;
      text-align: center; }

.add-line {
  position: fixed;
  bottom: 0px;
  right: 0px;
  z-index: 123; }
  @media screen and (max-width: 991px) {
    .add-line img {
      width: 170px; } }