@charset "utf-8";
/* CSS Document */

@import url("../../fonts/1. KB FONT_Bold(CI).otf");
@import url("../../fonts/KBFGDisplayL.ttf");
@import url("../../fonts/KBFGDisplayM.ttf");
@import url("../../fonts/KBFGDisplayMI.ttf");
@import url("../../fonts/KBFGTextL.ttf");
@import url("../../fonts/KBFGTextM.ttf");
@import url("../fontawesome/all.css");
@import url("../fontawesome/fontawesome.css");

@font-face {
  font-family: 'KBFG Text Light';
  src: url("../../fonts/KBFGTextL.ttf") format('truetype');
}
@font-face {
  font-family: 'KBFG Text Medium';
  src: url("../../fonts/KBFGTextM.ttf") format('truetype');
}
@font-face {
  font-family: 'KBFG Display Medium';
  src: url("../../fonts/KBFGDisplayM.ttf") format('truetype');
}
@font-face {
  font-family: 'KBFG Display Medium Italic';
  src: url("../../fonts/KBFGDisplayMI.ttf") format('truetype');
}
@font-face {
  font-family: 'KBFG Display Light';
  src: url("../../fonts/KBFGDisplayL.ttf") format('truetype');
}
@font-face {
  font-family: 'KB_Bold';
  src: url("../../fonts/1. KB FONT_Bold(CI).otf") format('opentype');
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/

/*--------------------------------
# Video Section
--------------------------------*/
.heroVideoSlideContainer {
  width: 100%;
}

.heroVideoSection {
  width: 100%;
  height: 120vh;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  overflow: hidden;
}

.heroVideoCover {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background-color: rgba(119, 108, 97, 0.75);
  background-blend-mode: multiply;
  mix-blend-mode: multiply;
  z-index: 1;
  border-bottom-left-radius: 3em;
  border-bottom-right-radius: 3em;
}

.heroVideoContainer {
  width: 100%;
  height: 100%;
  position: relative;
  display: block;
  overflow: hidden;
}

.heroVideoContainer video {
  width: 100%;
  height: 100%;
  position: absolute;
  display: block;
  object-fit: cover;
  background-size: cover;
  opacity: 1;
  top: 0;
  left: 0;
  right: 0;
  border-bottom-left-radius: 3em;
  border-bottom-right-radius: 3em;
}

.heroVideoHeadline {
  position: relative;
  top: 30vh;
  display: block;
  margin: 0 auto;
  z-index: 2;
}

.heroVideoHeadline h1 {
  font-family: "KBFG Text Medium";
  font-size: 600;
  text-align: center;
  text-transform: uppercase;
  margin: 0 auto;
  padding: 0.5em 0;
  display: block;
  color: rgba(255,255,255,1.00);
}

.heroVideoDivider {
  position: relative;
  display: block;
  height: 3px;
  background-color: #FFD643;
  top: 30vh;
  z-index: 2;
  margin: 0 auto;
}

/*--------------------------------
# Video Slide Section
--------------------------------*/
.heroSlideVideo {
  width: 100%;
  display: block;
  z-index: 2;
  position: absolute;
  top: 45vh;
  left: 0;
  right: 0;
  margin: 0 auto;
  margin-top: 0.5em;
  padding: 0.5em 0;
}

.heroVideoSlideItem {
  box-sizing: content-box;
  display: block;
  position: relative;
}

.heroVideoSlideItem .slideText {
  margin: 0 auto;
  position: relative;
  display: inline-block;
  align-content: center;
  align-items: center;
  text-align: center;
}

.heroVideoSlideItem .slideText p {
  font-family: "KBFG Text Medium";
  font-size: 500;
  text-align: center;
  color: rgba(255,255,255,1.00);
  margin: 0 auto;
  padding: 0.5em 0;
  transition: 0.15s ease;
}

.heroVideoSlideItem .slideText a {
  /*width: 8em;*/
  height: 2em;
  display: inline-block;
  position: relative;
  background-color: #FFD643;
  color: #776C61;
  margin: 1em auto;
  padding: 2px;
  border-radius: 1em;
  text-decoration: none;
  text-align: center;
  transition: 0.15s ease;
}

.heroVideoSlideItem .slideText a > span {
  font-size: 1em;
  line-height: 1.75em;
  text-decoration: none;
  font-weight: 600;
  padding: 1em 5em;
}

/*--------------------------------------------------------------
# Main Area Add On
--------------------------------------------------------------*/

/*--------------------------------
# Home Page Award
--------------------------------*/
#smallAward {
  position: relative;
  margin: 2em auto;
  margin-bottom: 6em;
  top: -5em;
}

.smallAwardContainer {
  position: relative;
  display: inline-block;
  width: 100%;
  white-space: nowrap;
}

.smallAwardContainer .awardImgContainer {
  position: relative;
  display: block;
  height: 29.85em;
  padding: 0.25em;
  margin: 0 auto;
  float: left;
}

.awardImgContainer img {
  object-fit: cover;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 1.5em;
  border: 2px solid rgba(119, 108, 97, 1);
}

@media (max-width: 575px) {
  #smallAward {
    top: -8em;
    margin: 1em auto;
    margin-bottom: 3em;
  }
  .smallAwardContainer .awardImgContainer {
    width: 100% !important;
    display: block !important;
    height: 43.5em !important;
    margin-bottom: 1.5em !important;
  }
}

/*@media (min-width: 768px), (max-width: 991px) {
  .smallAwardContainer {
    display: inline-block;
  }
  .smallAwardContainer .awardImgContainer {
    width: 50%;
    height: 38em;
    display: block;
    float: left;
    margin-bottom: 1em;
  }
}*/

@media (min-width: 1440px) {
  .smallAwardContainer .awardImgContainer {
    height: 34.72em;
  }
}

/*--------------------------------
# Home Daily Nav
--------------------------------*/
#dailyNav {
  width: 100%;
  position: relative;
  margin: 0 auto;
  padding-top: 3em;
  padding-bottom: 1em;
  background-color: rgba(119, 108, 97, 0.15);
}

.dailyNavContainer {
  width: 90%;
  display: block;
  position: relative;
  padding-bottom: 3em;
}

.dailyNavItemContainer {
  display: block;
  position: relative;
}

.dailyNavItemContainer a {
  position: relative;
  display: inline-flex;
  text-decoration: none;
}

.dailyNavItemContainer .dailyNavHead {
  position: relative;
  display: block;
  float: left;
}

.dailyNavItemContainer .dailyNavHead h5 {
  font-size: 1em;
  font-family: "KBFG Text Medium";
  font-weight: 600;
  float: left;
  color: rgba(119, 108, 97, 1);
  padding-right: 0.75em;
  display: block;
  position: relative;
  left: 0;
  margin: 0 auto;
}

.dailyNavItemContainer .dailyNavHead svg {
  font-size: 1em;
  padding-right: 2px;
  color: rgba(119, 108, 97, 1);
  display: inline-block;
  padding-bottom: 2px;
}

.dailyNavItemContainer .dailyNavHead span {
  font-size: 0.85em;
  font-family: "KBFG Text Medium";
  font-weight: 600;
  color: rgba(119, 108, 97, 1);
  display: inline-block;
}

.dailyNavItemContainer .dailyNavPrice {
  /*color: #FFD643;*/
  display: block;
  position: relative;
  text-align: right;
}

.dailyNavDivider {
  width: 100%;
  height: 2px;
  background-color: rgba(119, 108, 97, 1);
  position: relative;
  display: block;
}

.dailyNavDetail {
  display: flex;
  position: relative;
  margin: 0.5em auto;
}

.dailyNavDetail .dailyNavDate {
  font-family: "KBFG Text Medium";
  font-weight: 700;
  font-size: 1em;
  text-align: left;
  color: rgba(119, 108, 97, 1);
  display: block;
  position: relative;
}

.dailyNavDetail .dailyNavRateUp {
  font-family: "KBFG Text Medium";
  font-weight: 700;
  font-size: 1em;
  text-align: right;
  color: rgba(0,187,114,1.00);
  display: block;
  position: relative;
}

.dailyNavDetail .dailyNavRateDown {
  font-family: "KBFG Text Medium";
  font-weight: 700;
  font-size: 1em;
  text-align: right;
  color: rgba(190,0,10,1.00);
  display: block;
  position: relative;
}

.dailyNavContainer .swiper-pagination {
  top: 5em;
}

.swiper-pagination .swiper-pagination-bullet-active {
  background-color: #FFD643;
}

@media (max-width: 575px) {
  .dailyNavContainer {
    width: 90%;
    padding: 0 0.5em;
    padding-bottom: 3em;
  }
  
  .dailyNavItemContainer .dailyNavPrice {
    position: relative;
    margin: 0 auto;
    padding: 0;
  }
  
  .dailyNavDetail .dailyNavDate,
  .dailyNavDetail .dailyNavRateUp {
    font-size: 0.8em;
  }
  
  .swiper-wrapper .swiper-slide {
    padding: 0 !important;
  }
}

@media (min-width: 768px), (max-width: 991px) {
  .swiper-wrapper .swiper-slide {
    padding: 0 0.5em;
  }
}

/*--------------------------------------------------------------
# Investment Chart & Calculator
--------------------------------------------------------------*/
/*--------------------------------
# Home Investment Calculator Chart
--------------------------------*/
#investCalc {
  width: 100%;
  display: block;
  margin: 0 auto;
  margin-bottom: 3.5em;
  position: relative;
}

.investCalcHead {
  position: relative;
  display: block;
  margin: 1em auto;
  font-family: "KBFG Text Medium";
}

.investCalcHead h2 {
  font-family: "KBFG Text Medium";
  font-weight: 600;
  text-align: center;
  color: rgba(119, 108, 97, 1);
}

.investCalcHead h5 {
  font-family: "KBFG Text Medium";
  font-weight: 400;
  text-align: center;
  color: rgba(119, 108, 97, .75);
}

@media (max-width: 575px) {
  #investCalc {
    margin-bottom: 2.5em;
  }
}

/*===== Invest Chart =====*/

.investCalcChart {
  display: flex;
  margin: 0 auto;
  padding: 0;
  position: relative;
}

.investChart {
  display: block;
  position: relative;
  padding: 0 15px;
}

.investChart > .investGraphicChart {
  display: block;
}

.investChart > .investGraphicChart .chartHead h4 {
  font-family: "KBFG Text Medium";
  font-weight: 600;
  text-align: center;
  color: rgba(119, 108, 97, 1);
  margin: 1em auto;
  margin-bottom: 1em;
}

.investChart > .investGraphicChart .chartFoot p {
  font-family: "KBFG Text Medium";
  font-weight: 400;
  font-size: 1em;
  text-align: center;
  color: rgba(119, 108, 97, 1);
  margin: 0.5em auto;
}

#investChartContainer {
  position: relative;
  height: 30em;
}

#investChartContainer > .highcharts-container {
  position: relative;
}

#investChartContainer > .highcharts-container .highcharts-credits {
  display: none;
  visibility: hidden;
  opacity: 0;
}

.investChart .highcharts-title {
  font-family: "KBFG Text Medium";
  font-weight: 500;
  text-align: center;
  color: rgba(119, 108, 97, 1);
  fill: rgba(119, 108, 97, 1) !important;
}

.investChart .highcharts-graph {
  stroke-width: 1px;
}

@media (max-width: 575px) {
  .investCalcChart {
    display: block;
  }
  
  .investChart {
    margin-bottom: 2em;
    padding-bottom: 1em;
    border-bottom: 1px solid rgba(119, 108, 97, 0.75);
  }
  
  .investChart > .investGraphicChart .chartHead h4 {
    margin-bottom: 0.5em;
  }
}

/*--------------------------------------------------------------
# Investment Calculator
--------------------------------------------------------------*/
/*===== Investment Calculator =====*/

.investCalc {
  /*height: 35em;*/
  display: block;
  position: relative;
  margin: 0 auto;
  /*overflow: hidden;*/
  padding: 0 15px;
}

.investCalc > .investCalcHead {
  position: relative;
  display: block;
}

.investCalc > .investCalcHead h3 {
  font-family: "KBFG Text Medium";
  font-weight: 600;
  text-align: center;
  background-color: rgba(119, 108, 97, 1);
  color: #FFFFFF;
  padding: 0.25em 0;
}

.calcSimul {
  position: relative;
  display: block;
}

.calcSimul .nav-tabs {
  justify-content: space-between;
}

.calcSimul .nav-tabs .nav-link {
  padding: 0.5rem 0.85rem;
}

.calcSimul .nav-tabs .nav-link.active {
  color: #FFFFFF;
  background-color: rgba(119, 108, 97, 1);
  border-color: rgba(119, 108, 97, 1) rgba(119, 108, 97, 1) transparent;
}

.calcSimul .nav-tabs .nav-tabs .nav-item.show .nav-link {
  color: rgba(119, 108, 97, 1);
  background-color: #fff;
  border-color: #dee2e6 #dee2e6 #fff;
}

.calcSimul .nav-link {
  color: rgba(119, 108, 97, 1);
}

.calcSimul .tab-content {
  box-sizing: border-box;
  border: 1px solid rgba(119, 108, 97, 1);
  border-bottom-left-radius: 0.25em;
  border-bottom-right-radius: 0.25em;
  padding: 1em;
}

@media (max-width: 575px) {
  .calcSimul .nav-tabs .nav-link {
    color: rgba(255,255,255,1.00);
    background-color: rgba(119, 108, 97, .5);
  }
  
  .calcSimul .nav-tabs .nav-link.active {
    font-weight: 600;
  }
  
  .calcSimul .nav-tabs .nav-link {
    padding: 1rem 0.25rem 1rem 0.75rem;
    width: 100%;
    text-align: left;
    border-bottom: 1px solid rgba(119, 108, 97, 1);
  }
}

@media (max-width: 1280px) {
  .calcSimul .nav-tabs .nav-link {
    font-size: 0.75em;
  }
}

/*===== Calculator =====*/

.calcSimul .calcFieldContainer {
  display: flex;
  position: relative;
  margin: 1em auto;
}

.calcSimul .calcFieldContainer .fieldName {
  font-family: "KBFG Text Medium";
  font-weight: 400;
  text-align: left;
  color: rgba(119, 108, 97, 1);
  font-size: 1em;
  display: block;
  position: relative;
  align-self: center;
}

.calcSimul .calcFieldContainer .fieldNameEnd {
  font-family: "KBFG Text Medium";
  font-weight: 400;
  text-align: left;
  color: rgba(119, 108, 97, 1);
  font-size: 1em;
  display: block;
  position: relative;
  line-height: 2.5;
  padding-left: 0.5em;
}

.calcFieldInput {
  display: block;
  position: relative;
}

.calcFieldInput .input-group-text {
  font-family: "KBFG Text Medium";
  font-weight: 600;
  color: #ffffff;
  background-color: rgba(119, 108, 97, 1);
  border: 1px solid rgba(119, 108, 97, 1);
}

.calcFieldInput .form-control {
  border: 1px solid rgba(119, 108, 97, 1);
}

.calcFieldInput .form-control:focus {
  box-shadow: 0 0 0 0.15rem #FFD643;
}

.calcFieldInput .form-check-input:checked {
  background-color: #FFD643;
  border-color: #FFD643;
}

.calcDivider {
  width: 100%;
  height: 1px;
  background-color: rgba(119, 108, 97, 1);
  position: relative;
  display: block;
}

.calcButton {
  margin: 1em auto;
  padding: 5px;
  display: block;
  position: relative;
  justify-content: center;
}

.calcButton > .btnCalc {
  width: 100%;
  text-align: center;
  font-family: "KBFG Text Medium";
  font-weight: 600;
  color: #ffffff;
  background-color: rgba(119, 108, 97, 1);
  justify-content: center;
}

.calcButton .btn:focus {
  box-shadow: 0 0 0 0.15rem #FFD643;
}

@media (max-width: 1280px) {
  .calcSimul .calcFieldContainer .fieldName {
    font-size: 0.8em;
  }
  
  .calcSimul .calcFieldContainer .fieldNameEnd {
    font-size: 0.8em;
  }
  
  .calcFieldInput .input-group-text,
  .calcFieldInput .form-control,
  .calcFieldInput .form-check-label {
    font-size: 0.8em;
  }
  
  .calcFieldInput .form-check-inline {
    margin-right: 0.75rem;
  }
}


/*--- Calc Goals ---*/

.calcGoalsDividerContainer {
  position: relative;
  display: flex;
  margin: 0.5em auto;
  margin-bottom: 1.5em;
}

.calcGoalsDividerContainer .calcGoalsDivider {
  height: 1px;
  background-color: rgba(119, 108, 97, 1);
  position: relative;
  display: block;
  margin-top: 0.5em;
}

.calcGoalsDividerContainer .calcDividerText {
  font-family: "KBFG Text Medium";
  font-weight: 600;
  color: rgba(119, 108, 97, 1);
  text-align: center;
  line-height: 1;
  position: relative;
  display: block;
}

.calclGoalsFooter {
  position: relative;
  display: block;
}

.calclGoalsFooter p {
  font-family: "KBFG Text Medium";
  font-weight: 400;
  font-size: 0.8em;
  text-align: justify;
  text-align-last: left;
  color: rgba(119, 108, 97, 1);
  margin: 0.5em auto;
}

.chartLegend .highcharts-legend-item > text {
  font-family: "KBFG Text Medium";
  font-weight: 500;
}

@media (max-width: 575px) {
  .calcSimul .calcFieldContainer {
    font-size: 0.8em;
  }
  
  .calcFieldInput .input-group-text,
  .calcFieldInput .form-control {
    font-size: .85em;
  }
  
  .calcFieldInput .form-check-inline {
    margin-right: 0;
  }
  
  .calcFieldInput .form-check-inline.form-switch {
    font-size: 0.9rem;
  }
  
  .calcGoalsDividerContainer .calcGoalsDivider {
    margin-top: 0.35em;
  }
  
  .calcGoalsDividerContainer .calcDividerText {
    font-size: 0.9rem;
  }
  
  .calclGoalsFooter p {
    font-size: 0.7rem;
  }
}

/*--------------------------------------------------------------
# POPUp ADS
--------------------------------------------------------------*/
.js-popup-load {
  visibility: hidden;
  opacity: 0;
  position: absolute;
}

body .mfp-bg {
  height: 100vh;
}

body .mfp-wrap {
  height: 100vh;
}

body .mfp-container::before {
  display: inline;
}

body .mfp-container > .mfp-content {
  top: 0;
  text-align: center;
  height: 100%;
  display: block;
}

.white-popup {
  position: relative;
  width: 100%;
  /*max-width: 780px;*/
  margin: 0 auto;
}

.white-popup .popup-wrapper {
  background: transparent;
  padding: 25px;
  width: 100%;
  margin: 0 auto;
  border-radius: 15px;
  -webkit-box-shadow: 0 6px 24px #00000082;
  box-shadow: 0 6px 24px #00000082;
}

.white-popup .mfp-close {
  width: 20px;
  height: 20px;
  line-height: 20px;
  top: -20px;
  /*right: -20px;*/
  right: 0;
  color: #fff !important;
  font-size: 35px;
}

.popup-image {
  max-width: 90%;
  height: 90vh;
  /*display: flex;*/
  position: absolute;
  top: 3em;
  right: 0;
  left: 0;
  width: 1080px;
}

.popup-image .popup-wrapper {
  padding: 0 !important;
  /*max-width: calc(100vh - 60px);*/
  max-width: 100%;
  height: 100%;
  box-sizing: border-box;
  min-width: 568px;
  /*width: 568px;*/
  display: block;
  margin: 0 auto;
}

.popup-image .img-thumb {
  display: block;
  width: 100%;
  /*padding-top: 100%;*/
  position: relative;
  border-radius: 15px;
  overflow: hidden;
  height: 100%;
  margin: 0 auto;
}

.popup-image .img-thumb img {
  /*width: 100%;*/
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  position: absolute;
  -o-object-fit: cover;
  object-fit: cover;
  margin: 0 auto;
  border-radius: 15px;
}

@media (max-width: 575px) {
  .white-popup .mfp-close {
    top: -30px;
    right: 0;
  }
  
  .popup-image {
    width: 568px !important;
  }
  
  .popup-image .popup-wrapper {
    display: block;
    width: 568px;
    min-width: 0;
    height: 21em;
  }
}