/***** Footer  *****/
  .footer-container{
    /* max-height: 700px; */
    /* -webkit-mask-clip: content;
    mask-clip: content;
    -webkit-mask-image: url(../img/footer-bg-clip.svg);
    mask-image: url(../img/footer-bg-clip.svg);
    mask-type: alpha;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 110%;
    mask-size: 110%;
    -webkit-mask-position: top;
    mask-position: top; */
    padding-top: 6em;
    background-color: white;
    overflow: hidden;
}

.color-banner{
    display: flex;
    flex-direction: row;
    height: 0.8em;
    width: 100%;
}

.color-banner .color-blocks{
    width: 25%;
    height: 100%;
}

.color-banner .color-blocks:nth-of-type(1){
    background-color: var(--jc-orange);
}
.color-banner .color-blocks:nth-of-type(2){
    background-color: var(--jc-red);
}
.color-banner .color-blocks:nth-of-type(3){
    background-color: var(--jc-green);
}
.color-banner .color-blocks:nth-of-type(4){
    background-color: var(--jc-blue);
}

  .footer-container .footer-bg-wrapper{
    background-color: white;
    margin-top: -1px;
  }

  .footer-container .footer-content{
    padding: 0% 0 1%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .footer-container .footer-content .footer-table{
    width: var(--custom-width-m);
  }

  .footer-container .footer-content .footer-table th{
    font-family: 'GenJyuu-bold', Arial, Helvetica, sans-serif;
    font-size: var(--dtp-fontsize-25, 25px);
    letter-spacing: var(--dtp-letterspacing-h3);
  }

  .footer-container .footer-content .footer-table th:last-of-type,
  .footer-container .footer-content .footer-table td:last-of-type{
    padding-left: 8%;
    width: 37%; /* for DTP */
  }

  .footer-container .footer-content .footer-table .footer-table-title{
    font-family: "MHeiHK-Medium";
    font-size: var(--custom-fontsize-s);
    font-weight: 100;
    margin-top: 2em;
  }

  .footer-links{
    display:block;
    /* margin-top: 2.5%; */
  }

  .footer-links:first-of-type{
        margin-top: 6em;
  }

  @media only screen and (min-width: 993px){
  .menu-footer-container .footer-links{
    display:block;
    margin-bottom: 1%;
    /* margin-left: -4%;
    margin-top: 4%; */
    margin-right: 0.5%;
    position: fixed;
    width: auto;
    bottom:0;
    right: 0;
  }

  }


  .footer-links:nth-of-type(2){
    margin-top: 0.7em;
    margin-bottom: 0.3em;
  }

  .footer-links ul{
    display:block;
    list-style:none;
    margin:0;
    padding:0;
  }

  .footer-links ul li{
    display:inline-block;
  }

  .footer-links ul li .footer-items,
  .footer-links ul li > a{
    font-family: "MHeiHK-Medium";
    line-height: 1em;
    font-size: var(--custom-fontsize-footer);
    color: black;
    display: inline-block;
    padding: 0;
    border: 0;
    letter-spacing: var(--custom-letterspacing-footer);

  }

  .footer-links ul li a:hover{
    color: inherit;
    cursor: pointer;
  }

  /* .menu-footer-container .footer-links ul li a:hover{
    color: black;
  } */

  .footer-links ul li .footer-items::after,
  .footer-links ul li > a::after{
    content: "|";
    color: inherit;
    padding-right: 0.3em;
    padding-left: 0.6em;
    /* font-size: var(--dtp-fontsize-25); */
  }

  .footer-links ul li:last-of-type .footer-items::after,
  .footer-links ul li:last-of-type > a::after{
    content:''
  }

  .copyright-container{
    color: white;
    background-color: var(--jc-orange);
    padding: 1.5% 0;
    letter-spacing: var(--custom-letterspacing-s);
    line-height: 1em;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .copyright-container p{
    color: white;
    font-family: "MHeiHK-Medium";
    line-height: 1em;
    font-size: var(--custom-fontsize-s);
    margin:0;
  }

  .footer-container .footer-content .footer-table .footer-images{
    width: 18em;
    margin-top: 2em;
  }


  .footer-images img{
    height: auto;
    max-width: 100%;
  }


  .social-icons{
    width: 3%;
    max-width: 50px;
  margin: 1.5% 1%;}

  @media only screen and (max-width: 992px){
  .footer-container .footer-bg-wrapper {
      background-color: white;
      margin-top: -1px;
      display: flex;
      justify-content: center;
      align-items: center;
  }

  .footer-container .footer-content .footer-table{
    display: flex;
  }

  .footer-container .footer-content .footer-table th:last-of-type, .footer-container .footer-content .footer-table td:last-of-type {
    padding-left: 0%;
  }

  }