.listBanner .item * {
  margin : 0;
  padding: 0;
}

/** Generated by FG **/
@font-face {
  font-family : "YenTu";
  src         : url("../fonts/UTM Yen Tu.eot");
  src         : url("../fonts/UTM Yen Tu.woff") format("woff"), url("../fonts/UTM Yen Tu.ttf") format("truetype"), url("../fonts/UTM Yen Tu.svg") format("svg");
  font-weight : normal;
  font-style  : normal;
  font-display: swap
}

/** Generated by FG **/
@font-face {
  font-family : "Conv_Lato-Light";
  src         : url("../fonts/Lato-Light.eot");
  src         : url("../fonts/Lato-Light.woff") format("woff"), url("../fonts/Lato-Light.ttf") format("truetype"), url("../fonts/Lato-Light.svg") format("svg");
  font-weight : normal;
  font-style  : normal;
  font-display: swap
}

@font-face {
  font-family : "Charlotte";
  src         : url("../fonts/UTM Charlotte.eot");
  src         : url("../fonts/UTM Charlotte.woff") format("woff"), url("../fonts/UTM Charlotte.ttf") format("truetype"), url("../fonts/UTM Charlotte.svg") format("svg");
  font-weight : normal;
  font-style  : normal;
  font-display: swap
}

/** Generated by FG **/
@font-face {
  font-family : "Lato";
  src         : url("../fonts/Lato-Bold_2.eot");
  src         : url("../fonts/Lato-Bold_2.woff") format("woff"), url("../fonts/Lato-Bold_2.ttf") format("truetype"), url("../fonts/Lato-Bold_2.svg") format("svg");
  font-weight : 700;
  font-style  : normal;
  font-display: swap
}

/** Generated by FG **/
@font-face {
  font-family : "Lato";
  src         : url("../fonts/Lato-Regular_2.eot");
  src         : url("../fonts/Lato-Regular_2.woff") format("woff"), url("../fonts/Lato-Regular_2.ttf") format("truetype"), url("../fonts/Lato-Regular_2.svg") format("svg");
  font-weight : 400;
  font-style  : normal;
  font-display: swap
}

:root {
  --color-gradient: linear-gradient(180deg, #82861d 0%, #ae9813 100%, #aa9100 100%);
  --color-theme   : rgba(248, 195, 97, 1);
  --color-title   : rgba(45, 62, 79, 1);
  --color-frame   : #e1aa50;
  --color-yellow  : #ffe682;

  --color-dark  : #252f38;
  --color-green : #2ebca0;
  --color-navy  : #10648e;
  --color-blue  : #002e5d;
  --color-purple: #65306d;
  --color-pink  : #c2366f;
  --color-red   : #fd5c63;

  --color-light             : #efeff4;
  --container-width         : 1140px;
  /*     --color-grad-gold  : linear-gradient(98deg, #fff5e5, #eddabc 21%, #ccad6a 51%, #bc9e6c 74%, #dec8a6 100%); */
  --color-grad-gold         : #c0a26b;
  --color-grad-green        : linear-gradient(100deg, #0a87ac, #04425e 13%, #032b44 45%, #369852);
  --color-grad-green-inverse: linear-gradient(215deg, #369852, #032b44 100%, #0a87ac 0%);
  --font-lato               : "Lato";
  --font-charlot            : "Charlotte";
  --font-yentu              : "YenTu";
  --color-grad              : linear-gradient(135deg, rgba(124, 203, 190, 1) 0%, rgba(23, 165, 193, 1) 50%, rgba(209, 118, 176, 1) 80%);
  --transition-smooth       : all 0.5s cubic-bezier(0.04, 1, 0.6, 0.97);
  --transition-smooth-2     : all 1.5s cubic-bezier(0.04, 1, 0.6, 0.97);
}

/* ============================== Main =============================== */
html {
  overflow-x: hidden;
}

body {
  color      : var(--color-title);
  border     : 0;
  margin     : 0;
  box-sizing : border-box;
  outline    : none !important;
  font-family: var(--font-lato);
  overflow   : hidden;
  background : #fff;
  padding    : 0 !important;
}

button:forcus,
input:focus {
  outline      : none !important;
  background   : none !important;
  box-shadow   : unset !important;
  border-bottom: 1px solid #fff !important;
}

.m-shown {
  display: none !important;
}

.m-hidden {}

a:focus {
  border: none !important;
}

.font-lato {
  font-family: var(--font-lato);
}

.font-yentu {
  font-family: var(--font-yentu);
}

.font-charlot {
  font-family: var(--font-charlot);
}

.txt--gradient {
  background             : linear-gradient(248.59deg, #f9cb11 -30.54%, #5b6e24 43.04%, #315629 78.14%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bg--fill {
  background-size    : cover;
  background-position: center;
  background-repeat  : no-repeat;
}

.segTitle h3 {
  font-size: 3rem;
}

div:focus {
  outline: none;
  border : none;
}

.btnTheme {
  width   : 40%;
  position: relative;
}

.btnTheme {
  /* animation: example; */
  /* animation-duration: 4s; */
  position: relative;
}

/* @keyframes example{
    0%{margin-left:0}
    50%{ margin-left: -1rem
    }
    0%{margin-left:0}
} */
.btnTheme .vector {
  margin-left: 2.2rem;
}

.btnTheme:hover .oval {
  /* fill: #9d951c; */
  /* opacity: .4; */
  /* z-index: -1; */
  /* border: 3px solid #667423; */
  /* border-radius: 50%; */
}

.btnTheme .oval {
  position  : absolute;
  top       : -2px;
  right     : 0.5rem;
  transition: var(--transition-smooth);
}

button:focus {
  outline   : none !important;
  /* border : none !important; */
  box-shadow: none !important;
}

ul {
  padding-inline-start: 0px;
}

a {
  transition: all 0.3s;
  cursor    : pointer;
  color     : var(--color-yellow);
}

a:hover {
  color: var(--color-theme);
}

a,
a:hover,
a:focus {
  text-decoration: none;
}

a:active,
a:focus,
a:hover {
  outline: 0;
}

.main {
  position: relative;
  height  : 100vh;
  width   : 100vw;
}

.home {}

.home .--pjImg {
  position           : absolute;
  right              : 0;
  top                : 0;
  height             : 100%;
  width              : 66%;
  background-size    : cover;
  background-position: center;
  animation-name     : effectZoom;
  animation-duration : 4s;
}

@keyframes effectZoom {
  from {
    width : 75%;
    height: 110%;
  }

  to {
    width : 66%;
    height: 100%;
  }
}

.home .--rightImg {
  position           : absolute;
  right              : 0;
  bottom             : 0;
  width              : 240px;
  height             : 100vh;
  background-size    : auto 100%;
  background-repeat  : no-repeat;
  background-position: right;
}

.home .--content {
  position           : absolute;
  left               : 0;
  background-size    : auto 100%;
  height             : 100%;
  width              : 68%;
  background-repeat  : no-repeat;
  /* z-index         : 4; */
  background-position: left top;
  display            : flex;
  flex-flow          : column;
  align-items        : flex-start;
  justify-content    : center;
  text-align         : left;
  padding-left       : 7%;
}

.home .--content .logo {
  /* padding: 4% 0 4% 2%; */
  margin    : 0 0 2rem -16px;
  opacity   : 0;
  transition: all 0.5s ease-out;
}

.home .--content .txt {
  display       : flex;
  display       : block;
  position      : relative;
  padding-bottom: 17px;
  opacity       : 0;
  transition    : all 0.5s ease-out;
}

.active {
  opacity: 1 !important;
}

.home .--content .txt p {
  position        : absolute;
  color           : #fff;
  top             : 17%;
  left            : 0;
  margin-left     : -3rem;
  opacity         : 0.8;
  transform-origin: 0 0;
  transform       : rotate(90deg);
  font-size       : 11px;
  letter-spacing  : 0.2rem;
  font-family     : var(--font-lato);
}

.home .--content .logo img {
  width: 26%;
}

.home .--content .bg-left {
  width: 70%;
}

.modal-backdrop.show {
  /*     display: none; */
  z-index: 3;
}

.modal-header {
  border           : none;
  /* padding-bottom: 0; */
}

.modal-footer {
  border: none;
}

.main .modal {
  /* position: absolute; */
  top      : 56%;
  left     : 50%;
  bottom   : 0;
  transform: translate(-50%, -50%);
}

.form-group button {
  width         : 50%;
  /* background : linear-gradient(89.5deg, #4B6526 0.64%, #B6A419 95.04%); */
  border        : none;
  text-transform: uppercase;
  height        : 45px;
  border-radius : 20px 0;
  transition    : var(--transition-smooth);
}

.form-group button:hover {
  color     : var(--color-yellow);
  background: var(--color-gradient);
}

.form-group button {
  background: var(--color-gradient);
}

.form-group input {
  border       : none;
  background   : #ddd;
  border-radius: 0;
  height       : 45px;
}

.modal-footer {
  display: none;
}

.modal-body {
  display        : flex;
  flex-flow      : column;
  justify-content: space-around;
  justify-content: center;
  /* align-items : center; */
  padding-top    : 0;
  margin-top     : -25px;
}

.modal-body h2 {
  text-transform: uppercase;
  font-size     : 24px;
  text-align    : center;
  line-height   : 2rem;
  font-family   : var(--font-lato);
}

.modal-content {
  padding      : 5%;
  border-radius: 0;
}

.modal-body img {
  width         : 50%;
  margin        : auto;
  padding-bottom: 20px;
}

.form-group button:hover {
  /* background: red; */
  /* transition: auto; */
  transform: scale(0.95);
}

.btnRegister:hover {
  color     : #fff;
  border    : 1px solid #ffe682;
  transform : scale(0.9);
  background: linear-gradient(89.5deg, #4b6526 0.64%, #b6a419 95.04%);
}

.modal-dialog {
  border: 5px solid #eee;
}

.modal-header .close {
  position: absolute;
  right   : 17px;
  top     : 13px;
}

.form-group input:focus {
  border    : none;
  outline   : none;
  box-shadow: none;
  background: #ccc;
}

.btnRegister:focus {
  border: 1px solid #ffe682;
}

.main .txt .brush-1 {
  position : absolute;
  left     : 33%;
  top      : 7%;
  transform: scale(0.7);
}

.main .txt .brush-2 {
  position : absolute;
  bottom   : 38%;
  left     : 1%;
  transform: scaleX(1.8);
}

.btnRegister {
  background    : none;
  border        : 0;
  box-sizing    : border-box;
  box-shadow    : inset 0 0 0 2px #82861d;
  font-size     : inherit;
  font-weight   : 700;
  margin        : 2em 0;
  padding       : 0.5rem 1.2em;
  text-align    : center;
  vertical-align: middle;
  text-transform: uppercase;
  color         : #ffe682;
  transition    : var(--transition-smooth);
  border-radius : 0;
  font-family   : var(--font-charlot);
  letter-spacing: 0.2rem;
  /* overflow   : hidden; */
  opacity       : 1;
  position      : relative;
}

.btnRegister::before,
.btnRegister::after {
  content   : "";
  box-sizing: border-box;
  position  : absolute;
  border    : 1px solid transparent;
  width     : 0;
  height    : 0;
}

.btnRegister::before {
  top               : 0;
  left              : 0;
  border-top-color  : #ffe682;
  border-right-color: #ffe682;
  animation         : border 1s infinite;
}

.btnRegister::after {
  bottom   : 0;
  right    : 0;
  animation: border 1s 1s infinite, borderColor 1s 1s infinite;
}

.btnRegister:hover::after,
.btnRegister:hover::before {
  animation: none;
}

@keyframes border {
  0% {
    width : 0;
    height: 0;
  }

  25% {
    width : 100%;
    height: 0;
  }

  50% {
    width : 100%;
    height: 100%;
  }

  100% {
    width : 100%;
    height: 100%;
  }
}

@keyframes borderColor {
  0% {
    border-bottom-color: #ffe682;
    border-left-color  : #ffe682;
  }

  50% {
    border-bottom-color: #ffe682;
    border-left-color  : #ffe682;
  }

  51% {
    border-bottom-color: transparent;
    border-left-color  : transparent;
  }

  100% {
    border-bottom-color: transparent;
    border-left-color  : transparent;
  }
}

.hotline-phone-ring-wrap {
  /* position: fixed; */
  bottom : 0;
  right  : 0;
  z-index: 999999;
}

.hotline-phone-ring {
  position                   : relative;
  visibility                 : visible;
  background-color           : transparent;
  width                      : 110px;
  height                     : 110px;
  cursor                     : pointer;
  z-index                    : 11;
  -webkit-backface-visibility: hidden;
  -webkit-transform          : translateZ(0);
  transition                 : visibility 0.5s;
  left                       : 0;
  bottom                     : 0;
  display                    : block;
}

.hotline-phone-ring-circle {
  width                   : 85px;
  height                  : 85px;
  top                     : 10px;
  left                    : 10px;
  position                : absolute;
  background-color        : transparent;
  border-radius           : 100%;
  border                  : 2px solid #405f27;
  -webkit-animation       : phonering-alo-circle-anim 1.2s infinite ease-in-out;
  animation               : phonering-alo-circle-anim 1.2s infinite ease-in-out;
  transition              : all 0.5s;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin    : 50% 50%;
  transform-origin        : 50% 50%;
  opacity                 : 0.5;
}

.hotline-phone-ring-circle-fill {
  width                   : 55px;
  height                  : 55px;
  top                     : 25px;
  left                    : 25px;
  position                : absolute;
  background-color        : rgb(157 149 28);
  border-radius           : 100%;
  border                  : 2px solid transparent;
  -webkit-animation       : phonering-alo-circle-fill-anim 2.3s infinite ease-in-out;
  animation               : phonering-alo-circle-fill-anim 2.3s infinite ease-in-out;
  transition              : all 0.5s;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin    : 50% 50%;
  transform-origin        : 50% 50%;
}

.hotline-phone-ring-img-circle {
  background-color        : #e4bf14;
  width                   : 33px;
  height                  : 33px;
  top                     : 36px;
  left                    : 36px;
  position                : absolute;
  background-size         : 20px;
  border-radius           : 100%;
  border                  : 2px solid transparent;
  -webkit-animation       : phonering-alo-circle-img-anim 1s infinite ease-in-out;
  animation               : phonering-alo-circle-img-anim 1s infinite ease-in-out;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin    : 50% 50%;
  transform-origin        : 50% 50%;
  display                 : -webkit-box;
  display                 : -webkit-flex;
  display                 : -ms-flexbox;
  display                 : flex;
  align-items             : center;
  justify-content         : center;
}

.hotline-phone-ring-img-circle .pps-btn-img {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.hotline-phone-ring-img-circle .pps-btn-img img {
  width : 20px;
  height: 20px;
}

.hotline-phone-ring i {
  color: #fff;
}

@-webkit-keyframes phonering-alo-circle-anim {
  0% {
    -webkit-transform: rotate(0) scale(0.5) skew(1deg);
    -webkit-opacity  : 0.1;
  }

  30% {
    -webkit-transform: rotate(0) scale(0.7) skew(1deg);
    -webkit-opacity  : 0.5;
  }

  100% {
    -webkit-transform: rotate(0) scale(1) skew(1deg);
    -webkit-opacity  : 0.1;
  }
}

@-webkit-keyframes phonering-alo-circle-fill-anim {
  0% {
    -webkit-transform: rotate(0) scale(0.7) skew(1deg);
    opacity          : 0.6;
  }

  50% {
    -webkit-transform: rotate(0) scale(1) skew(1deg);
    opacity          : 0.6;
  }

  100% {
    -webkit-transform: rotate(0) scale(0.7) skew(1deg);
    opacity          : 0.6;
  }
}

@-webkit-keyframes phonering-alo-circle-img-anim {
  0% {
    -webkit-transform: rotate(0) scale(1) skew(1deg);
  }

  10% {
    -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
  }

  20% {
    -webkit-transform: rotate(25deg) scale(1) skew(1deg);
  }

  30% {
    -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
  }

  40% {
    -webkit-transform: rotate(25deg) scale(1) skew(1deg);
  }

  50% {
    -webkit-transform: rotate(0) scale(1) skew(1deg);
  }

  100% {
    -webkit-transform: rotate(0) scale(1) skew(1deg);
  }
}

/*@media (max-width: 768px) {
  .hotline-bar {
    display: none;
  }
}*/
.menumobile {
  display: none;
}

body {
  /* background-blend-mode: multiply; */
  /* background-color: #0707079e; */
}

.blendMode {
  position             : fixed;
  height               : 100%;
  width                : 100%;
  background           : #000000a3;
  background-blend-mode: multiply;
  z-index              : 9999;
  opacity              : 0;
  pointer-events       : none;
}

.blendMode.hide {
  display       : none;
  background    : none;
  pointer-events: none;
  z-index       : -1;
}

.homeBanner {
  height  : 100vh;
  position: relative;
}

.listBanner {
  height  : 100%;
  position: absolute;
  top     : 0;
  width   : 100%;
}

/*.listBanner .item {
    animation-name: effectZoom;
    animation-duration: 6s;
}
@keyframes effectZoom {
    from {width: 110%; height: 110%; }
    to {width: 100%; height: 100%;}
}*/
/*.homePopup{
    position:absolute;
    top: 17%;
    z-index: 9999;
    height: 83%;
    width: 100%;
}
.homePopup.hide{
    position: unset;
    display: none;
}*/
.imgPopup img {
  max-width: 70%;
  margin   : auto;
  width    : 100%;
  display  : block;
  height   : auto;
  position : relative;
  top      : 50%;
  transform: translateY(-50%);
}

.imgPopafter {
  display        : none;
  position       : fixed;
  bottom         : 0;
  height         : 200px;
  width          : 100%;
  z-index        : 999;
  align-items    : center;
  justify-content: center;
  pointer-events : none;
}

.imgPopafter i {
  position   : absolute;
  top        : 4%;
  right      : 8%;
  cursor     : pointer;
  color      : #fff;
  font-weight: 200;
  font-size  : 30px;
  transition : all 0.2s ease-out;
  opacity    : 0;
}

.hidden_css {
  display: none !important;
}

.vs_css {
  display: block !important;
}

.imgPopafter img {
  height   : 100%;
  display  : block;
  width    : auto;
  margin   : auto;
  transform: translate(-25%, 0);
}

.imgPopup {
  /* display: flex; */
  /* align-items: center; */
  justify-content: center;
  color          : #fff;
  position       : fixed;
  z-index        : 9999;
  top            : 0;
  height         : 100%;
}

.imgPopup i {
  position   : absolute;
  top        : 12px;
  right      : 12px;
  font-size  : 30px;
  font-weight: 100;
  transition : all 0.2s ease-out;
  cursor     : pointer;
}

.imgPopup i:hover,
.imgPopafter i:hover {
  transform: rotate(90deg);
}

.listBanner .item {
  height                 : 100%;
  /*background-blend-mode: multiply;*/
  /*background           : linear-gradient(180deg, #F9CB11 -86.1%, #5B6E24 30.06%, #315629 100%);*/
  background             : rgba(0, 0, 0, 40%);
  background-repeat      : no-repeat;
  background-size        : cover;
  background-position    : center;
  background-attachment  : fixed;
  width                  : 100%;
  transition             : all 2s ease-out;
  transform              : scale(1.2);
}

.listBanner .item.active {
  transform: scale(1);
}

.listBanner .item .content {
  height         : 100%;
  display        : flex;
  flex-flow      : column;
  justify-content: flex-end;
}

.listBanner .item .header {
  display        : flex;
  justify-content: space-between;
  padding-top    : 5rem;
}

.listBanner .item .desc h1 {
  font-size: 50px;
}

.listBanner .item .desc {
  display        : flex;
  flex-flow      : column;
  align-items    : center;
  color          : #fff;
  text-align     : center;
  font-family    : var(--font-lato);
  transition     : all 1s ease-out;
  height         : 100%;
  justify-content: center;
  padding-top    : 4rem;
}

.listBanner .item .desc.active {
  text-align     : left;
  justify-content: center;
  align-items    : baseline;
  width          : 56%;
  display        : flex;
  padding-right  : 15px;
}

.listBanner .item .desc.active h1 {
  font-size: 37px;
}

.listBanner .item .descbot {
  text-align   : right;
  color        : #fff;
  font-size    : 27px;
  margin-bottom: 1.5rem;
}

.listBanner .deco {
  position: absolute;
  bottom  : -4rem;
  left    : -5rem;
  width   : 300px;
  height  : 300px;
}

.listBanner .deco img {
  height: auto;
  width : 100%;
}

.homePosition .left {
  padding-left: 4rem;
  margin-top  : 7rem;
}

.homePosition .left article {
  margin-top: 3rem;
  font-size : 16px;
}

.homePosition h3 {
  font-size: 2.5rem;
}

.homePosition .center {
  /* padding: 0; */
  /* position: relative; */
}

.homePosition .right {
  height: auto;
}

.homePosition .center .listmarker {
  /*   position: absolute; */
}

.homePosition .center .listmarker .item {
  display  : flex;
  flex-flow: column;
  position : absolute;
}

.homePosition .center .listmarker .item span {
  font-size     : 4px;
  line-height   : 6px;
  width         : 100%;
  text-align    : center;
  text-transform: uppercase;
  font-weight   : 600;
}

.homePosition .center img {
  width          : auto;
  object-fit     : contain;
  height         : 100vh;
  object-position: center;
  margin-left    : auto;
  display        : flex;
}

.homePosition .listing ul {
  list-style: none;
  margin    : 0;
}

.segTitle h1 {
  text-transform: uppercase;
  font-size     : 2.25rem;
}

.homePosition .right {
  background     : linear-gradient(0deg, #f9cb11 -84%, #5b6e24, #315629 100%);
  position       : relative;
  display        : flex;
  flex-flow      : column;
  align-items    : center;
  justify-content: space-around;
  color          : #fff;
  padding-left   : 2rem;
  padding-right  : 1rem;
  /*height       : auto;*/
  height         : 100vh;
}

.homePosition .right .images {
  position: absolute;
  bottom  : 0;
  right   : 0;
}

.homePosition .right .images img {
  width: 10rem;
}

.homePosition .right .content {
  width             : 100%;
  /*height          : 50px;*/
  display           : flex;
  align-items       : center;
  /* justify-content: center; */
}

.homePosition .right .content img {
  max-width: 80%;
  margin   : auto;
}

.homePosition .right .listing {
  width          : 100%;
  /* padding-left: 2rem; */
  position       : relative;
  /* top         : -20px; */
}

.homePosition .listing ul li {
  /* height: 35px; */
  padding: 0.25rem 0;
}

.homePosition .listing ul li img {
  margin-right: 1rem;
}

.totalGround {
  /* margin-bottom: 7rem; */
  /* position: relative; */
  /* margin-top: 5rem; */
}

.totalGround .container {
  position : relative;
  display  : flex;
  flex-flow: column;
  height   : 100vh;
}

.totalGround .thumbnail {
  position: absolute;
  top     : 0;
  left    : 0;
  z-index : 1;
}

.totalGround .thumbnail img {
  max-width: 65%;
  opacity  : 0.75;
}

.totalGround .images {
  width          : 100%;
  padding        : 2rem 0 0 0;
  display        : flex;
  justify-content: center;
  flex-grow      : 1;
  overflow       : hidden;
}

.totalGround .texted {
  position: absolute;
  top     : 0;
  right   : 0;
  z-index : 1;
}

.totalGround .texted img {
  width: 150px;
}

.totalGround .texted .segTitle {
  display           : flex;
  flex-flow         : column;
  /* justify-content: flex-end; */
  align-items       : flex-end;
}

.totalGround .texted .txt {
  margin       : 1.5rem 0;
  /* background: linear-gradient(180deg, #F9CB11 -86.1%, #5B6E24 30.06%, #315629 100%); */
  border-radius: 20px 0;
  padding      : 4px;
}

.totalGround .texted h3 {
  font-size  : 30px;
  color      : #000;
  padding    : 0 10px;
  font-family: var(--font-yentu);
}

.totalGround .text {
  width: 100%;
}

.totalGround .images img {
  width     : 85%;
  max-height: 93%;
  object-fit: contain;
  margin    : 0 auto;
  height    : calc(100vh - 120px) !important;
}

.totalGround .text .type_prod {
  position      : relative;
  padding-bottom: 0.5rem;
  font-size     : 25px;
  /* margin     : 0 0 4rem 0; */
}

.totalGround .text .type_prod::after {
  content      : "";
  position     : absolute;
  border-bottom: 1px solid #94be00;
  width        : 50%;
  left         : 0;
  bottom       : 0;
}

.totalGround .text {
  /*position: absolute;bottom: -6rem;*/
}

.totalGround .text h3 {
  font-size: 36px;
}

.totalGround .text .overview ul {
  list-style: none;
  display   : flex;
  margin    : 1rem 0 0.5rem;
  border-top: 1px solid #94be00;
  width     : max-content;
}

.totalGround .text .overview ul li {
  display       : flex;
  align-items   : center;
  padding       : 0.5rem 0;
  font-weight   : 700;
  margin-right  : 2rem;
  text-transform: uppercase;
  font-size     : 1rem;
  line-height   : 1.2rem;
}

.totalGround .text .overview ul li div {
  width        : 2rem;
  height       : 2rem;
  border-radius: 12px 0;
  margin-right : 0.75rem;
}

.totalGround .text .overview ul li:nth-child(1) .color-1 {
  background: #f9d760;
}

.totalGround .text .overview ul li:nth-child(2) .color-1 {
  background: #94be00;
}

.totalGround .text .overview ul li:nth-child(3) .color-1 {
  background: #b43852;
}

.homeProduct .listing {
  display        : flex;
  width          : 100%;
  justify-content: space-between;
}

.homeProduct .listing .frames .segLine {
  display        : flex;
  align-items    : center;
  justify-content: center;
  padding        : 2rem 0;
}

.homeProduct .listing .frames .segLine img {
  width: 50px;
}

.homeProduct .listing .frames {
  display  : flex;
  flex-flow: column;
}

.homeProduct .listing .frames:nth-child(odd) {
  flex-flow: column-reverse;
  padding  : 0;
}

.homeProduct .listing .frames:nth-child(3) .inner {
  /* left: -7rem !important; */
}

.homeProduct .listing .frames:nth-child(odd) .inner {
  /* bottom: 15rem !important; */
}

.homeProduct .listing .frames:nth-child(even) .inner {
  /* left: -7rem !important; */
}

.homeProduct .listing .frames:nth-child(even) .segLine {
  transform: rotate(180deg);
}

.homeProduct .listing .frames {
  height    : 100vh;
  width     : 100%;
  padding   : 1rem;
  color     : #fff;
  position  : relative;
  transition: var(--transition-smooth);
}

.homeProduct .listing .frames a {
  height: 100%;
}

.homeProduct .listing .frames .item {
  height             : 100%;
  border-radius      : 4rem 0;
  background-repeat  : no-repeat !important;
  background-size    : cover !important;
  background-position: center !important;
  position           : relative;
  overflow           : hidden;
  color              : #fff;
}

.homeProduct .listing .frames:hover {
  width         : 200%;
  /* margin-left: .5rem; */
  /*margin-right: 1rem;*/
}

/*.homeProduct .listing .item:hover + .item{
  width: 150px;
}*/
.homeProduct .listing .frames:hover .icon,
.homeProduct .listing .frames:hover h2 {
  /*opacity: 0;*/
}

.homeProduct .listing .frames:hover .content .inner {
  /*transform: unset;*/
}

.homeProduct .listing .item .content .inner {
  position          : absolute;
  bottom            : 12.5rem;
  display           : flex;
  align-items       : center;
  transform         : rotate(-90deg);
  left              : -6.5rem;
  flex-wrap         : nowrap;
  /* justify-content: space-between; */
  /* transition     : all .5s ease-out; */
  height            : 40px;
  width             : 360px;
}

.homeProduct .listing .item .text {
  /* height: 100%; */
  /* display: flex; */
  /* align-items: flex-end; */
  /* justify-content: flex-end; */
}

.homeProduct .listing .item article {
  /* opacity: 0; */
  /* width: 273px; */
  /* transition: all .5s ease-out; */
  /* display: flex; */
  /* align-items: flex-end; */
  /* justify-content: flex-end; */
}

.homeProduct .listing .frames:hover .text {
  /*display: flex;
    align-items: flex-end;
    text-align: center;*/
}

.homeProduct .listing .frames:hover article {
  /* opacity: 1;
     width: 300px;
     padding: 15px;
     text-align: center;*/
}

.homeProduct .listing .frames .content h2 {
  font-size    : 1.5rem;
  white-space  : nowrap;
  /* transition: all .1s ease-out; */
}

.homeProduct .listing .frames .content a {
  color: #fff;
}

.homeProduct .listing .item .content .icon {
  width          : 40px;
  height         : 40px;
  border-radius  : 50%;
  border         : 1px solid;
  display        : flex;
  align-items    : center;
  justify-content: center;
  margin-right   : 1rem;
}

.homeProduct .listing .item .content .icon img {
  transform: rotate(90deg);
}

.homeProduct .summary {
  /* padding-left: 5rem; */
  /* display: flex; */
  /* flex-flow: column; */
  /* justify-content: initial; */
  /* align-items: center; */
  /* padding-top: 4rem; */
  height         : calc(100vh - 74px);
  display        : flex;
  flex-flow      : column;
  justify-content: space-between;
  padding-top    : 68px;
}

.homeProduct .summary .--content {
  position: relative;
}

.homeProduct .summary .--content>* {
  position  : absolute;
  bottom    : 0;
  left      : 0;
  opacity   : 0;
  transition: all 0.15s ease-out;
}

.homeProduct .summary .--content>*.active {
  opacity: 1;
}

.homeProduct .summary .btnTheme {
  /* opacity: 0; */
  /* position: absolute; */
  /* bottom: 20%; */
  width: 50%;
}

.homeProduct .summary .btnTheme.active {
  opacity: 1;
}

.homeProduct .summary article {
  /* opacity: 0; */
}

.homeProduct .summary article.active {
  opacity: 1;
}

.homeProduct .listing .frames:hover {}

.homeProduct .summary h3 {
  font-size: 36px;
}

.homeProduct .summary article {
  /* padding-top: 4rem; */
  /* position: absolute; */
  /* transition: all .5s ease-out; */
  text-align      : justify;
  /* padding-right: 3rem; */
  /* top          : 30%; */
  margin-bottom   : 3rem;
}

.homeProduct {
  /* margin-bottom: 5rem; */
}

.homeProduct .container {
  position: relative;
}

.homeUtilities {
  /* height: 100vh; */
}

.homeUtilities .segTitle {
  margin-bottom: 1rem;
}

.homeUtilities .segTitle h3 {
  /* margin: 2rem 0; */
  /* margin: 0; */
}

.homeUtilities .deco {
  /* width: 100%; */
}

.homeUtilities .rowUti {
  position: relative;
}

.homeUtilities .rowUti .description {
  /* position: absolute; */
  /* top: 0; */
  width    : 100%;
  /* height: 100%; */
}

.homeUtilities .rowUti .description .right {
  padding-top   : 1rem;
  padding-bottom: 1rem;
  height        : 100%;
}

.homeUtilities .rowUti .left img {
  width     : 100%;
  height    : 100%;
  object-fit: cover;
}

.homeUtilities .deco img {
  width  : 100%;
  opacity: 0.1;
  height : 48vw;
}

.listUti .item .titleTop {
  display: flex;
}

.listUti .item .titleTop span {
  background    : linear-gradient(90deg, #315629 0%, #486326 55%, #9c941c 100%);
  color         : #fff;
  /* width      : 232px; */
  text-align    : center;
  margin-left   : -0.7rem;
  height        : 23px;
  font-size     : 10px;
  line-height   : 20px;
  margin-top    : 0.6px;
  border-radius : 0px 100px 100px 0px;
  text-transform: uppercase;
  font-weight   : bold;
  padding       : 0 15px;
  padding-top   : 3px;
  font-family   : var(--font-lato);
}

.listUti .item .symbol {
  display: flex;
}

.listUti .item .symbol .icon {
  width           : 25px;
  height          : 25px;
  border          : 3px solid #31661d;
  border-radius   : 50%;
  display         : flex;
  align-items     : center;
  justify-content : center;
  font-weight     : bold;
  font-size       : 17px;
  background-color: #fff;
  z-index         : 2;
}

.listUti .item .content h2 {
  /* padding-top: 20px; */
  font-family : var(--font-charlot);
  font-size   : 20px;
  padding-left: 1rem;
  padding-top : 0.4rem;
}

.listUti .item .content ul {
  /* list-style-type: decimal; */
  font-family : "Lato";
  /* padding  : 1rem 2rem; */
  list-style  : none;
  padding-left: 1rem;
  font-size   : 12px;
}

.listUti .item .content li {
  white-space  : nowrap;
  overflow     : hidden;
  text-overflow: ellipsis;
}

.homeLibrary .segTitle {
  text-align: center;
}

.homeLibrary .listTab ul {
  border         : none;
  text-align     : center;
  align-items    : center;
  display        : flex;
  justify-content: center;
  font-size      : 35px;
  margin-bottom  : 1.5rem;
}

.homeLibrary .listTab ul li {
  font-family   : var(--font-charlot);
  text-transform: uppercase;
  outline       : none;
}

.homeLibrary .listTab ul li .nav-link {
  outline: none;
  border : none;
  color  : #fff;
  opacity: 0.5;
}

.homeLibrary {
  position  : relative;
  color     : #fff;
  /* padding: 3rem; */
  background: linear-gradient(235.54deg, #f9cb11 -15.83%, #5b6e24 58.56%, #315629 100.81%);
  height    : 100vh !important;
}

.homeLibrary .fp-tableCell {
  height : 100vh !important;
  padding: 0;
  display: block;
}

.homeLibrary .tab-content {
  position: relative;
}

.homeLibrary .listTab ul .nav-item .nav-link.active {
  background: none !important;
  color     : var(--color-yellow);
  border    : none;
}

.homeLibrary .listTab ul .nav-item .nav-link:hover {
  border : none;
  outline: none;
}

.homeLibrary .tab-pane {
  display       : block !important;
  opacity       : 0;
  pointer-events: none;
  position      : absolute;
  top           : 0;
}

.homeLibrary .tab-pane .listimg {
  position: absolute;
  height  : 200px;
  bottom  : 0;
  width   : 100%;
}

.homeLibrary .tab-pane.active {
  opacity       : 1;
  pointer-events: auto;
}

.homeLibrary .deco {
  position: absolute;
  top     : 0;
  left    : -4rem;
  width   : 350px;
  height  : 350px;
}

.homeLibrary .deco img {
  width : 100%;
  height: auto;
}

.homeLibrary .tab-content .future {
  border-radius      : 60px 0;
  height             : 450px;
  background-size    : cover;
  background-position: center;
  background-repeat  : no-repeat;
}

.homeLibrary .tab-content .listVideo .video,
.homeLibrary .tab-content .future .video {
  /*    width: 100%;
    height: 100%;*/
  position      : relative;
  padding-bottom: 56.25%;
  height        : 0;
}

.homeLibrary .tab-content .listVideo .video iframe,
.homeLibrary .tab-content .future .video iframe {
  height   : 100%;
  max-width: 100%;
  position : absolute;
  top      : 50%;
  left     : 50%;
  transform: translate(-50%, -50%);
}

.homeLibrary .listVideo .embedVideo {
  position      : relative;
  padding-bottom: 56.25%;
  height        : 0;
  margin-top    : 2rem;
}

.homeLibrary .listVideo .embedVideo iframe {
  height   : 100%;
  max-width: 100%;
  position : absolute;
  top      : 50%;
  left     : 50%;
  transform: translate(-50%, -50%);
}

.homeLibrary .tab-content .future img {
  width        : 100%;
  height       : 100%;
  object-fit   : cover;
  border-radius: 40px 0;
}

.homeLibrary .tab-content .listimg {
  display: flex;
}

.homeLibrary .tab-content .listVideo {
  /*display: flex;*/
  /* margin-top: 2rem; */
}

.active_video {
  opacity: 0;
}

.btnDoc,
.btnVideo {
  width      : 100%;
  display    : flex;
  align-items: center;
  margin-top : 2rem;
}

.btnDoc .oval,
.btnVideo .oval {
  position: absolute;
  left    : 100px;
}

.homeLibrary .tab-content .listimg .img iframe {
  width : 100%;
  height: 100%;
}

.homeLibrary .tab-content .listimg .slideNav-next {
  opacity: 0;
}

.homeLibrary .tab-content .listimg .img {
  margin: 0 15px;
  height: 150px;
  width : 200px;
}

.homeLibrary .tab-content .listimg .img img {
  border-radius: 30px 0;
  width        : 100%;
  height       : 100%;
  object-fit   : cover;
}

.homeLibrary .tab-content .over {
  position   : relative;
  margin-left: 3rem;
  font-family: var(--font-lato);
}

.homeLibrary .tab-content .over article {
  font-size : 15px;
  margin-top: 2rem;
}

.homeLibrary .tab-content .over:after {
  content    : "";
  position   : absolute;
  border-left: 2px solid #fff;
  top        : 0;
  left       : -2rem;
  height     : 100%;
}

.homeLibrary .tab-content .right {
  display           : flex;
  flex-flow         : column;
  /* justify-content: space-between; */
}

.homeLibrary .tab-content .right .btn {
  height: 50px;
}

.homeLibrary .listdoc {
  display : flex;
  position: absolute;
  height  : 200px;
  bottom  : -20px;
  width   : 100%;
}

.homeLibrary .listdoc .doc {
  width : 150px;
  margin: 0 0px;
  height: 150px;
}

.homeLibrary .listdoc .doc img {
  border-radius: 30px 0;
  width        : 90%;
  height       : 100%;
  object-fit   : cover;
}

.homeBanner .fp-tableCell {
  /*height: 100% !important;*/
  display : block !important;
  position: relative;
}

.homePosition {
  height    : 100vh;
  /* display: block !important; */
}

.homePosition .fp-tableCell {
  height : 100% !important;
  padding: 0;
}

.homeLibrary .tab-content .fp-tableCell {
  padding: 0 !important;
  height : 90% !important;
}

.homeLibrary .fp-controlArrow {
  display: none !important;
  opacity: 0;
}

.homeUtilities {
  height: 100% !important;
}

.homeUtilities .fp-tableCell {
  /* height: 100% !important; */
  /* padding: 0 !important; */
}

#carousel-thumb {
  margin: 15px;
}

.homeNews {
  height : 100% !important;
  padding: 0;
}

.homeNews .holder {
  display    : flex;
  align-items: center;
}

.homeNews .holder a {
  display        : flex;
  width          : 2.5rem;
  height         : 2.5rem;
  margin         : 0.6rem;
  color          : #315629;
  background     : transparent;
  transition     : all 0.15s ease-out;
  justify-content: center;
  align-items    : center;
  border-radius  : 50%;
  border         : 1px solid #787f20;
}

.homeNews .holder a:hover {
  color     : var(--color-yellow);
  background: #787f20;
}

.homeNews .holder a.jp-current {
  color     : var(--color-yellow);
  background: #787f20;
}

.facebook {}

.floating.facebook a {
  color : #fff;
  margin: auto;
}

.floating .facebook:hover {
  transform: scale(1.2);
}

.floating .facebook {
  display      : none;
  /* position  : fixed; */
  /* bottom    : 6.5rem; */
  /* right     : 2.4rem; */
  width        : 35px;
  height       : 35px;
  background   : #e4bf14;
  border-radius: 50%;
  /* display   : flex; */
  box-shadow   : 2px 2px 8px rgb(158 145 72);
  transition   : all 0.2s ease-out;
  z-index      : 999;
  margin-right : 0.5rem;
}

.floating .facebook a {
  color : #fff;
  margin: auto;
}

.floating .facebook:hover {
  transform: scale(1.2);
}

.homePosition .center img {
  opacity         : 0;
  transition      : all 0.5s ease-in-out;
  transition-delay: 0.5s;
}

.homePosition .right .content {
  opacity         : 0;
  transition      : all 0.5s cubic-bezier(0.42, 0, 0.45, 1);
  transition-delay: 0.8s;
}

.homePosition .listing ul li {
  opacity         : 0;
  transition      : all 0.5s cubic-bezier(0.15, 0.75, 1, 1);
  transition-delay: 0.3s;
  transform       : translate(350px, 0);
}

.totalGround .texted,
.totalGround .thumbnail,
.totalGround .images {
  opacity         : 0;
  transition      : var(--transition-smooth-2);
  transition-delay: 0.5s;
}

.totalGround .text {
  display    : block;
  opacity    : 1;
  transform  : none;
  transition : none;
  flex-shrink: 0;
}

#image-map-pro-3655 {
  max-height: 80%;
}



.totalGround.active .texted,
.totalGround.active .thumbnail,
.totalGround.active .images,
.homeProduct.active .segTitle,
.homePosition.active .listing ul li,
.homePosition.active .right .content,
.homePosition.active .center img,
.homeUtilities.active .segTitle,
.homeUtilities .listUti {
  opacity  : 1;
  transform: none;
}

.homeProduct .segTitle {
  opacity         : 0;
  transition      : var(--transition-smooth-2);
  transform       : translate(-600px, 0);
  transition-delay: 0.5s;
}

.homeUtilities .segTitle {
  opacity         : 0;
  transition      : var(--transition-smooth-2);
  transform       : translate(400px, 0);
  transition-delay: 0.6s;
}

/* .homeUtilities .listUti{
    opacity: 0;
    transition: var(--transition-smooth-2);
    transition-delay: .6s;
} */
.aboutFooter .content article {
  margin-top: 2rem;
}

.aboutFooter .images {
  width        : 132px;
  padding-right: 2.5rem;
  display      : flex;
}

.aboutFooter .images img {
  max-width: 80%;
}

.homeNews {
  padding: 3rem;
}

.homeNews .segTitle a {
  color: var(--color-title);
}

.homeNews .listing .item {
  margin: 0.6rem 0;
}

.homeNews .segTitle {
  margin: 2rem 0;
}

.homeNews .container {
  position: relative;
}

.homeNews .viewAll {
  margin         : 2rem 0;
  position       : absolute;
  /* width       : 100%; */
  display        : flex;
  align-items    : flex-end;
  justify-content: flex-end;
  right          : calc((100% - 1140px) / 2);
  top            : 0;
}

.homeNews .viewAll .btnTheme {
  width: 190px;
}

.homeNews .viewAll .btnTheme .vector {
  /* margin-left: 0; */
}

.homeNews .viewAll span {
  font-size     : 25px;
  text-transform: uppercase;
}

.homeNews .--btn-viewAll line,
.homeNews .--btn-viewAll .oval circle {
  stroke: #355828;
}

.homeNews .--btn-viewAll path {
  fill: #355828;
}

.homeNews .--btn-viewAll {
  margin: 2rem auto;
}

.homeNews .content {
  display    : flex;
  margin     : 1rem 0;
  font-family: var(--font-lato);
}

.homeNews .content .urlimg {
  flex        : 0 0 50%;
  height      : 200px;
  margin-right: 1rem;
}

.homeNews .content .--img {
  width              : 218px;
  height             : 162px;
  display            : block;
  flex               : 0 0 auto;
  background-size    : cover;
  background-position: center;
  margin-right       : 1rem;
  border-radius      : 40px 0;
}

.homeNews .content img {
  width        : 100%;
  border-radius: 40px 0;
  height       : 100%;
  object-fit   : cover;
}

.homeNews .content .excerpt h3 {
  font-size  : 18px;
  font-weight: bold;
  color      : #000;
  opacity    : 0.8;
}

.homeNews .content .excerpt h3 a {
  color: #2d3e4f;
}

.homeNews .content .excerpt {
  display        : flex;
  flex-flow      : column;
  justify-content: space-around;
}

.homeNews .content .excerpt span {
  color         : #828282;
  position      : relative;
  padding-bottom: 0.4rem;
  font-size     : 0.9rem;
}

.homeNews .content .excerpt span:after {
  content      : "";
  position     : absolute;
  border-bottom: 2px solid #ccc;
  width        : 20%;
  bottom       : 0;
  left         : 0;
}

.homeNews .content .excerpt article {
  position          : relative;
  text-align        : justify;
  font-size         : 16px;
  /* width          : 500px; */
  overflow          : hidden;
  text-overflow     : ellipsis;
  line-height       : 25px;
  -webkit-line-clamp: 2;
  /* height         : 75px; */
  display           : -webkit-box;
  -webkit-box-orient: vertical;
}

.homeNews .content .excerpt article p {
  font-size: 16px;
}

.homeFooter {
  /* height: 50vh; */
  color            : #fff;
  /* padding-top   : 3rem; */
  background-repeat: no-repeat !important;
  background-size  : cover !important;
  height           : calc(100% - 312px);
}

.homeFooter .segTitle {
  padding-bottom: 3rem;
}

.homeFooter .segTitle h3 {
  text-align: center;
}

.homeFooter .form-group input {
  background      : none;
  border-bottom   : 1px solid #ddd;
  /* border-radius: 5px; */
  padding         : 6px 0;
  color           : #fff;
}

.homeFooter .form-group input::placeholder {
  color: #b9b6b6;
}

.btnSent {
  background   : linear-gradient(180deg, #f9cb11 -36.72%, #5b6e24 142.61%, #315629 269.57%);
  border-radius: 20px 0px;
  color        : #fff;
}

.homeFooter .bot {
  /* display: flex; */
  /* justify-content: space-around; */
  padding: 2rem;
}

.homeFooter .bot .form-group .form-check {
  /* display: flex; */
  /* align-items: flex-start; */
  /* justify-content: flex-start; */
  /* padding: 0; */
}

.homeFooter .bot .form-group .form-check .form-check-input {
  height  : auto;
  position: absolute;
  top     : 4px;
}

.homeFooter .bot .form-group .form-check label {
  margin-left: 0.3rem;
}

.footerIndex {
  background             : linear-gradient(180deg, #f9cb11 -86.1%, #5b6e24 30.06%, #315629 100%);
  backdrop-filter        : blur(70px);
  -webkit-backdrop-filter: blur(70px);
  color                  : #fff;
  padding                : 2.5rem 0;
  height                 : 312px;
}

.footerIndex .logo img {
  margin       : 0 auto;
  margin-bottom: 2rem;
}

.footerIndex .logo {
  display           : flex;
  flex-flow         : column;
  /* justify-content: space-around; */
  height            : 100%;
  margin-top        : -8px;
  text-align        : center;
}

.footerIndex .logo p {
  position   : relative;
  font-size  : 13px;
  margin     : 0;
  line-height: 22px;
}

/* .footerIndex .logo p:after{
    content: '';
    position: absolute;
    border-left: 1px solid #fff;
    height: 100%;
    top: -2.5rem;
    left: 50%;
} */
.footerIndex .listinfo ul {
  display   : flex;
  list-style: none;
  margin    : 0 auto;
}

.footerIndex .listinfo ul li {
  width          : 40px;
  height         : 40px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  margin         : 0 10px;
}

.footerIndex .listinfo ul li a {
  width          : 100%;
  height         : 100%;
  background     : linear-gradient(180deg, #f9cb11 -36.72%, #5b6e24 68.82%, #315629 132.35%);
  border-radius  : 500%;
  display        : flex;
  align-items    : center;
  justify-content: center;
}

.footerIndex .logo ul li a img {
  max-width : 80%;
  max-height: 80%;
}

.footerIndex h2 {
  font-family   : var(--font-lato);
  text-transform: uppercase;
  position      : relative;
  font-size     : 20px;
}

.footerIndex h2:after {
  content      : "";
  position     : absolute;
  border-bottom: 1px solid #fff;
  width        : 13%;
  bottom       : -1rem;
  left         : 0;
}

.footerIndex .listcont {
  padding-top    : 2rem;
  height         : 100%;
  display        : flex;
  flex-flow      : column;
  justify-content: flex-start;
}

.footerIndex .listcont p {
  font-size: 13px;
}

.footerIndex .listcont .item {
  display        : flex;
  align-items    : center;
  justify-content: center;
  margin         : 10px 0;
}

.footerIndex .listcont .item .icon {
  /* flex-basis: 20%; */
  width           : 35px;
  height          : 35px;
  display         : flex;
  align-items     : center;
  justify-content : center;
  border-radius   : 50%;
  background-color: #aaaaaa3d;
  margin-right    : 0.5rem;
}

.form-check-input {
  margin-top: 0;
}

.footerIndex .listcont .item p {
  flex     : 1;
  font-size: 13px;
  margin   : 0;
  color    : #fff;
}

.footerIndex .contact {
  height: 100%;
}

.footerIndex .listinfo {
  padding-top: 2.5rem;
}

.footerIndex .listinfo p {
  font-size  : 11px;
  margin     : 0;
  padding-top: 1rem;
  opacity    : 0.8;
  font-family: "Conv_Lato-Light";
}

.footerIndex .listinfo ul {
  /* list-style: none; */
  /* display: flex; */
}

.footerIndex .listinfo ul li a {
  color    : #fff;
  font-size: 14px;
}

.footerIndex .listinfo .item {
  display        : flex;
  font-size      : 14px;
  margin-top     : 10px;
  justify-content: space-between;
}

#toggle,
#close_menu {
  /* display: block; */
  /* width: 28px; */
  /* height: 30px; */
  /* margin: 30px auto 10px; */
  /* display: flex; */
  /* justify-content: right; */
  /* align-items: flex-end; */
  /* float: right; */
  background        : linear-gradient(45deg, #f9cb11 5%, #5b6e23 68%, #315629);
  /* backdrop-filter: blur(70px); */
  width             : 4rem;
  height            : 4rem;
  border-radius     : 1rem 0;
  padding           : 0 0.75rem;
  display           : flex;
  justify-content   : space-around;
  align-items       : center;
  position          : relative;
}

#toggle img,
#close_menu img {
  /* position: absolute; */
  transition: var(--transition-smooth);
  width     : 2px;
  height    : 42px;
}

#toggle:hover img:nth-child(1),
#close_menu:hover img:nth-child(1) {
  height: 36px;
}

#toggle:hover img:nth-child(3),
#close_menu:hover img:nth-child(3) {
  height: 36px;
}

#toggle img:nth-child(1) {
  height: 20px;
}

#toggle img:nth-child(3) {
  height: 20px;
}

#close_menu img:nth-child(1) {
  height: 20px;
  left  : 1rem;
  top   : 0.85rem;
  width : 3px;
}

#close_menu img:nth-child(3) {
  height: 20px;
  right : 1rem;
  top   : 0.85rem;
  width : 3px;
}

#toggle span:after,
#toggle span:before {
  content : "";
  position: absolute;
  left    : 0;
  top     : -9px;
}

#toggle span:after {
  top: 9px;
}

#toggle span {
  position: relative;
  display : block;
}

#toggle span,
#toggle span:after,
#toggle span:before {
  width              : 100%;
  height             : 5px;
  background-color   : #888;
  transition         : all 0.3s;
  backface-visibility: hidden;
  border-radius      : 2px;
}

/* on activation */
#toggle.on span {
  background-color: transparent;
}

#toggle.on span:before {
  transform: rotate(45deg) translate(5px, 5px);
}

#toggle.on span:after {
  transform: rotate(-45deg) translate(7px, -8px);
}

#toggle.on+#menu {
  /* display: block; */
  visibility: visible;
  position  : absolute;
  opacity   : 1;
}

/* menu appearance*/
#menu {
  position               : absolute;
  color                  : #999;
  /* text-align          : center; */
  box-shadow             : 0 1px 8px rgba(0, 0, 0, 0.05);
  /* just for this demo */
  /* display             : none; */
  opacity                : 0;
  visibility             : hidden;
  height                 : 100vh;
  top                    : 0;
  right                  : 0;
  background             : linear-gradient(241.96deg, rgba(249, 203, 17, 0.7) -31.05%, rgba(131, 134, 31, 0.7) 5.72%, rgba(91, 110, 36, 0.7) 52.19%, rgba(49, 86, 41, 0.7) 85.78%);
  backdrop-filter        : blur(15px);
  -webkit-backdrop-filter: blur(15px);
  width                  : 45vw;
  padding                : 5rem;
  -webkit-transition     : opacity 600ms, visibility 600ms;
  transition             : opacity 0.5s, visibility 0.5s;
}

#menu ul {
  list-style: none;
}

#menu .left ul li {
  /*height: 60px;*/
  margin-bottom: 1.5rem;
  display      : flex;
  align-items  : center;
}

#menu .left ul li a {
  color         : #fff;
  text-transform: uppercase;
  font-size     : 24px;
}

#menu .right {
  display        : flex;
  flex-flow      : column;
  justify-content: space-between;
  align-items    : center;
}

#menu .right ul li {
  height         : 40px;
  width          : 40px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  border-radius  : 50%;
  background     : linear-gradient(180deg, #f9cb11 -36.72%, #5b6e24 68.82%, #315629 132.35%);
  margin         : 1rem 0;
}

.aboutInfo {
  margin: 3rem 0;
}

.aboutInfo .text article {
  font-family: var(--font-lato);
  text-align : justify;
  width      : 88%;
}

.aboutInfo .listParam .item .param {
  display: flex;
}

.aboutInfo .listParam .item .param .text {
  width: 70%;
}

.aboutInfo .listParam .item .param span {
  font-weight: bold;
  font-size  : 20px;
  font-size  : 18px;
}

.aboutInfo .listParam .item .param h1 {
  font-size     : 17px;
  text-transform: uppercase;
  font-family   : var(--font-charlot);
  color         : #828282;
  /* margin-top : .3rem; */
}

.aboutInfo .listParam .item {
  margin : 1rem 0;
  padding: 0;
}

.aboutInfo .listParam .item .param .icon {
  width          : 50px;
  height         : 50px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  border-radius  : 500%;
  border         : 1px solid #928f1a;
  margin-right   : 1rem;
}

.aboutInfo .listParam .item .param .icon img {
  width : 30px;
  height: 30px;
}

.aboutInfo .list {
  position  : relative;
  margin-top: 3rem;
}

.aboutInfo .decor {
  position: absolute;
  bottom  : 0;
  left    : -2%;
}

.aboutDesign {
  position: relative;
  height  : 80vh;
}

.aboutDesign .bg-images {
  display        : flex;
  justify-content: flex-end;
  position       : absolute;
  right          : -8%;
  bottom         : 0;
}

.aboutDesign .bg-images img {
  width: 400px;
}

.aboutInfo .decor img {
  width : 600px;
  height: 600px;
}

.aboutDesign .right {
  display        : flex;
  flex-flow      : column;
  justify-content: flex-end;
  position       : relative;
}

.aboutDesign .right article {
  margin-top: 1rem;
  text-align: justify;
}

.logoinvestor {
  width : 200px;
  height: 82px;
  margin: 1rem 0;
}

.logoinvestor img {
  max-width : 100%;
  max-height: 80%;
}

.aboutInvestor article {
  margin-top: 1rem;
  text-align: justify;
}

.aboutInfo .list .square {
  width   : 315px;
  height  : 300px;
  position: absolute;
  border  : 2px solid var(--color-grad-gold);
  left    : 16%;
  top     : 12%;
  z-index : -1;
}

.aboutInfo .list .img1 img {
  border-radius: 0px 0px 200px 0px;
  width        : 270px;
  height       : 270px;
  object-fit   : cover;
  border       : 1px solid #ccc;
}

.aboutInfo .list .img1 {
  display        : flex;
  justify-content: flex-end;
  margin-right   : 4rem;
  margin-bottom  : 4rem;
}

.aboutInfo .list .img2 {
  position: absolute;
  z-index : -1;
  top     : 28%;
}

.aboutInfo .list .img2 img {
  border-radius: 0px 0px 0px 200px;
  width        : 350px;
  height       : 350px;
  object-fit   : cover;
}

.aboutInvestor .listimg {
  position: relative;
}

.aboutInvestor .listimg .bird {
  pointer-events: none;
}

.aboutInvestor .listimg .square1 {
  width        : 250px;
  height       : 139px;
  border       : 2px solid var(--color-frame);
  position     : absolute;
  top          : 10%;
  border-radius: 0px 100px 0px 0px;
  right        : 9%;
  z-index      : -2;
}

.aboutInvestor .listimg .square2 {
  width        : 250px;
  height       : 220px;
  border       : 2px solid var(--color-frame);
  position     : absolute;
  top          : 27%;
  left         : 30%;
  border-radius: 100px 0px 0px 0px;
  z-index      : -2;
}

.aboutInvestor .listimg .image1 {
  position        : absolute;
  top             : 0;
  left            : 32%;
  /* border       : 1px solid #ccc; */
  /* border-radius: 0px 0px 0px 200px; */
}

.aboutInvestor .listimg .image1 img {
  border-radius: 0px 0px 0px 200px;
  height       : 250px;
  width        : 285px;
  object-fit   : cover;
  border       : 1px solid #ccc;
}

.aboutInvestor .listimg .image2 {
  position: absolute;
  right   : 0;
  top     : 20%;
  z-index : -1;
}

.aboutInvestor .listimg .image2 img {
  border-radius: 0px 0px 200px 0px;
  width        : 347px;
  height       : 385px;
  object-fit   : cover;
}

.aboutInvestor .listimg .image3 {
  position: absolute;
  top     : 42%;
  left    : 11%;
  z-index : 1;
}

.aboutInvestor .listimg .image3 img {
  border-radius: 80px 0;
  width        : 280px;
  height       : 250px;
  object-fit   : cover;
}

.aboutInvestor .listimg .bird img {
  width  : 600px;
  z-index: 0;
}

.aboutFooter .segTitle {
  padding: 0;
}

.aboutFooter .segTitle h3 {
  text-align: left;
}

.aboutFooter {
  padding: 2rem 0;
}

.aboutFooter .images {
  position: relative;
}

.aboutFooter .images:after {
  content     : "";
  position    : absolute;
  border-right: 1px solid #fff;
  height      : 100%;
  right       : 0;
}

.prodList {
  position             : relative;
  /* height            : 100vh; */
  padding-top          : 3rem;
  overflow             : hidden;
  background-repeat-x  : no-repeat;
  background-size      : 100% 100%;
  background-attachment: fixed;
  background-position  : bottom right;
}

.prodList .decor {
  position: absolute;
  top     : -3rem;
  right   : 0;
  width   : 300px;
  height  : 300px;
}

.prodList .decor img {
  width : 100%;
  height: auto;
}

.prodList .images {
  width : 100%;
  height: auto;
}

.prodList .images img {
  box-shadow   : 10px 15px 100px rgba(0, 0, 0, 0.2);
  border-radius: 60px 0px;
  width        : 100%;
  height       : 100%;
  z-index      : 3;
  object-fit   : cover;
}

.prodList .content .overview .param {
  display    : flex;
  /* margin  : 0 1rem; */
  width      : 50%;
  padding    : 0;
  align-items: center;
}

.prodList .content .overview .param .unit span {
  font-weight: bold;
}

.prodList .content .overview .param .icon {
  width          : 50px;
  height         : 50px;
  border-radius  : 50%;
  border         : 1px solid #4d6626;
  display        : flex;
  align-items    : center;
  justify-content: center;
  /* margin-right: 1rem; */
  margin         : 0.7rem;
  flex           : 0 0 auto;
}

.prodList .content .overview {
  display: flex;
  margin : 2.5rem 0;
  width  : 100%;
}

.prodList .content .overview .param .icon img {
  width: 50%;
}

.prodList .future {
  position : absolute;
  bottom   : 46%;
  left     : -3rem;
  width    : 300px;
  /* height: 300px; */
  z-index  : 0;
}

.prodList .content .overview .param .unit h1 {
  font-size: 19px;
  margin   : 0;
}

.prodList .listing {
  padding-top: 2rem;
}

.prodList .content .button .fancybox {
  font-size     : 22px;
  text-transform: uppercase;
}

.prodList .content {
  height         : 100%;
  display        : flex;
  flex-flow      : column;
  align-items    : flex-start;
  justify-content: space-between;
  /* padding     : 0 2rem; */
}

.prodList .content .button {
  /* text-align: left; */
  display: flex;
  width  : 100%;
  margin : 1rem 0;
}

.prodList .content .button span {
  font-size  : 20px;
  margin-left: 1rem;
  padding-top: 4px;
}

.prodList .content .button .btn {
  width           : max-content;
  /* padding-right: 2rem; */
}

.prodList .content .button .btn .oval {
  right: 0;
}

.prodList .content .button .vector {
  margin: 0;
}

.prodList .content .prodTitle {
  position    : relative;
  padding-left: 2rem;
}

.prodList .content .prodTitle article p {
  font-size  : 15px;
  font-family: var(--font-lato);
  text-align : justify;
}

.prodList .content .prodTitle article {
  margin-top: 1rem;
}

.prodList .content .prodTitle:after {
  content     : "";
  position    : absolute;
  border-right: 1px solid #928f1a;
  height      : 100%;
  top         : 0;
  left        : 0;
}

.prodList .lixstbox:nth-child(even) .listing {
  flex-flow: row-reverse;
}

.prodList .lixstbox {
  z-index: 2;
  margin : 7rem 0;
}

.prodList .lixstbox .segTitle {
  display  : flex;
  flex-flow: column;
}

.prodList .lixstbox .segTitle img {
  width: 150px;
}

.prodList .lixstbox:nth-child(even) .segTitle {
  flex        : 0 0 50%;
  max-width   : 50%;
  margin-left : 50%;
  padding-left: 15px;
}

.detailPost {
  margin: 4rem 0;
}

.detailPost .content a {
  color: #000;
}

.prodList .lixstbox:nth-child(even) .content {
  padding-right: 2rem;
}

.prodList .lixstbox:nth-child(odd) .content {
  padding-left: 2rem;
}

.titleDetail h4 {
  font-family: var(--font-lato);
  font-weight: bold;
}

.shareicon span {
  color         : #ccc;
  position      : relative;
  padding-bottom: 1rem;
  font-size     : 15px;
}

.shareicon span:after {
  content      : "";
  position     : absolute;
  border-bottom: 2px solid #ccc;
  width        : 50%;
  bottom       : 0;
  left         : 0;
}

.shareicon {
  display        : flex;
  justify-content: space-between;
  align-items    : center;
}

.share p {
  color        : #ccc;
  padding-right: 1rem;
}

.detailPost .share {
  display        : flex;
  justify-content: flex-end;
  margin         : 15px 0;
}

.detailPost .share .icon {
  display: flex;
}

.detailPost h2 {
  font-size: 16px;
}

.detailPost .share span {
  font-size      : 15px;
  color          : #ccc;
  margin         : 0 2rem;
  display        : flex;
  align-items    : center;
  justify-content: center;
}

.detailPost .share .icon .item {
  width          : 30px;
  height         : 30px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  background     : #f6f6f6;
  border-radius  : 50%;
  margin         : 0 0.5rem;
}

.detailPost .share .icon .item .fa-facebook-f {
  color: #3a5897;
}

.fa-twitter {
  color: #06aae1;
}

.fa-linkedin-in {
  color: #007ab5;
}

.detailPost .share .icon .item .fa-envelope {
  color: #eb5757;
}

.fa-instagram {
  color: #e6303a;
}

.detailPost .content {
  text-align: justify;
}

.detailPost .content img {
  border-radius: 50px 0px;
  margin       : 0.5rem 0;
  width        : 100%;
  object-fit   : cover;
}

.detailPost .right {
  border-left: 1px solid #ccc;
  padding    : 0 0 0 2rem;
}

.detailPost .left {
  padding: 0 3rem 0 0;
}

.detailPost .right h4 {
  font-size    : 1.5rem;
  font-weight  : bold;
  margin-bottom: 2rem;
}

.detailPost .right .param .item {
  display       : flex;
  border-bottom : 1px solid #ccc;
  margin-bottom : 2rem;
  padding-bottom: 1rem;
  font-family   : var(--font-lato);
}

.detailPost .right .param .item:last-child {
  border: none;
}

.detailPost .right .param .item img {
  width        : 120px;
  height       : 120px;
  border-radius: 25px 0;
  margin-right : 1rem;
  object-fit   : cover;
}

.detailPost .right .param .item h5 a {
  color  : #000;
  opacity: 0.8;
}

.detailPost .right .param .item h5 {
  font-size  : 1rem;
  font-weight: bold;
}

.detailPost .right .param .item span {
  font-size     : 14px;
  color         : #ccc;
  position      : relative;
  padding-bottom: 0.5rem;
  margin-bottom : 2rem;
}

.detailPost .right .param .item span:after {
  content      : "";
  position     : absolute;
  border-bottom: 1px solid #ccc;
  width        : 50%;
  bottom       : 0;
  left         : 0;
}

.detailPost .right .param .item article {
  opacity   : 0.8;
  margin-top: 0.5rem;
  font-size : 15px;
}

.archivePost {
  position             : relative;
  height               : 100vh;
  background-blend-mode: multiply;
  /* background-color  : rgba(0,0,0,30%); */
}

.archivePost .listCate .btnTheme {
  display: flex;
  width  : 100%;
}

.archivePost .listCate .btnTheme .oval {
  right: -0.4rem;
  top  : -7px;
}

.archivePost .containered .header {
  /* display: flex; */
  /* width: 100%; */
  /* align-items: center; */
  /* justify-content: space-between; */
}

.archivePost .listCate .item {
  position              : relative;
  /* background-size    : cover !important; */
  /* background-position: center !important; */
  /* background-repeat  : no-repeat !important; */
}

.archivePost .listCate {
  width                : 100%;
  margin               : 0;
  position             : absolute;
  top                  : 0;
  background-blend-mode: multiply;
  background-color     : rgba(0, 0, 0, 30%);
  height               : 100%;
}

.archivePost .listCate .item:hover img {
  transform: scale(1.1);
}

.archivePost .listCate .item img {
  width     : 100%;
  object-fit: cover;
  height    : 100%;
  transition: all 2s ease-out;
  filter    : brightness(0.6);
}

.archivePost .listCate .item .content {
  position   : absolute;
  bottom     : 20%;
  color      : #fff;
  font-family: var(--font-charlot);
  display    : flex;
  padding    : 0 5rem;
  width      : 100%;
  align-items: center;
}

.archivePost .listCate .col-md-6 {
  padding : 0;
  /* width: 100%; */
}

.archivePost .listCate .item .content h3 {
  font-size     : 35px;
  text-shadow   : 2px 3px 5px #09090900;
  text-transform: uppercase;
}

.archivePost .listCate .left .item {
  height                  : 100%;
  overflow                : hidden;
  /* background-blend-mode: multiply; */
  /* overflow             : hidden; */
  /* background-color     : rgb(219 35 35); */
}

.archivePost .listCate .left .item img {
  transition: all 2s ease-out;
}

.archivePost .listCate .left .item:hover img {
  transform: scale(1.1);
}

.archivePost .listCate .right .item {
  height             : 50vh;
  background-repeat  : no-repeat !important;
  background-size    : cover !important;
  background-position: center !important;
  overflow           : hidden;
}

.archivePost .listCate .left .item img {
  height: 100%;
  filter: brightness(0.6);
}

.postcategory .title .segTitle {
  display        : flex;
  flex-flow      : column;
  align-items    : center;
  justify-content: center;
}

/*.postcategory{
    padding-top: 4rem;
}*/
.postcategory .title .segTitle h3 {
  font-size: 50px;
  margin   : 2rem 0;
}

.postcategory .category ul {
  display        : flex;
  align-items    : center;
  justify-content: center;
  margin-bottom  : 2rem;
  border         : none;
}

.postcategory .category ul li {
  border-right: 1px solid #ccc;
}

.postcategory .category ul li:last-child {
  border: none;
}

.postcategory .category ul li a {
  border   : none;
  color    : #ccc;
  font-size: 20px;
}

.postcategory .category ul li a.active {
  background             : linear-gradient(248.59deg, #f9cb11 -30.54%, #5b6e24 43.04%, #315629 78.14%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.postcategory .category .tab-content img {
  width        : 100%;
  height       : 400px;
  border-radius: 50px 0;
  object-fit   : cover;
}

.postcategory .category .left {}

.postcategory .category .text {
  padding-top: 2rem;
}

.postcategory .category h4 {
  color      : #325629;
  font-size  : 22px;
  font-weight: bold;
  font-family: var(--font-lato);
}

.postcategory .category span {
  position      : relative;
  color         : #ccc;
  padding-bottom: 0.5rem;
  font-family   : var(--font-lato);
}

.postcategory .category span:after {
  content      : "";
  position     : absolute;
  border-bottom: 1px solid #ccc;
  width        : 10%;
  bottom       : 0;
  left         : 0;
}

.postcategory .category article {
  padding-top: 1rem;
  font-family: var(--font-lato);
}

.postcategory .category .right article {
  color  : #fff;
  opacity: 0.7;
}

.postcategory .category .right h4 {
  color    : #fff;
  font-size: 18px;
}

.postcategory .category .right .item {
  border-radius      : 50px 0;
  height             : 100%;
  margin-bottom      : 1rem;
  background-size    : cover !important;
  background-position: center !important;
}

.postcategory .category .right .item .text {
  padding        : 15px;
  display        : flex;
  flex-flow      : column;
  justify-content: flex-end;
  height         : 100%;
}

.postcategory .category .right {
  display        : flex;
  flex-flow      : column;
  justify-content: space-between;
}

.otherPost h1 {
  position   : relative;
  display    : flex;
  align-items: center;
}

.otherPost h1:after {
  content      : "";
  position     : absolute;
  border-bottom: 1px solid #325629;
  width        : 75%;
  right        : 0;
}

.header {
  /* position: absolute; */
  top            : 0;
  z-index        : 999;
  width          : 100%;
  display        : flex;
  justify-content: space-between;
  /* padding     : 4rem 5rem; */
}

.homeBanner .contaiHead {
  height     : auto;
  width      : 100%;
  padding-top: 4rem;
}

.homeBanner .listBanner .slick-list {
  height: 100%;
  width : 100%;
}

.homeBanner .listBanner .slick-list .slick-track {
  height: 100%;
  width : 100% !important;
}

.homeBanner .deco img {
  max-width: 85%;
  height   : auto;
  display  : block;
}

.homeBanner .deco {
  position      : absolute;
  bottom        : 0px;
  z-index       : 4;
  left          : -2rem;
  width         : 320px;
  pointer-events: none;
}

#one img {
  width : 1000px;
  height: 100vh;
}

#one {
  width   : 100%;
  overflow: hidden;
}

.homeBanner .brush {
  position           : absolute;
  z-index            : 1;
  width              : 100%;
  height             : 100%;
  background-size    : 100% 100%;
  background-repeat  : no-repeat;
  top                : 0;
  left               : 0;
  background-position: top left;
}

.homeBanner .brush>.container {
  position: relative;
  height  : 100%;
}

.homeBanner .brush .text {
  position : absolute;
  top      : 50%;
  transform: translateY(-50%);
  /* left  : 10%; */
  color    : #fff;
}

.homeBanner .brush .text h3 {
  font-family  : var(--font-yentu);
  font-size    : 3.25rem;
  opacity      : 0;
  transition   : all 1s ease-out;
  transform    : translate(-500px, 0);
  /* text-align: center; */
}

.homeBanner .brush button {
  transform : translate(-500px, 0);
  opacity   : 0;
  transition: all 1s ease-out;
}

.homeBanner .brush button.active {
  transform: none;
  opacity  : 1;
}


.homeBanner .brush .text h1 {
  opacity       : 0;
  font-family   : var(--font-charlot);
  color         : #f4e872;
  text-transform: uppercase;
  font-size     : 68px;
  font-size     : 4rem;
  text-align    : center;
  line-height   : 3.5rem;
  transform     : translate(-500px, 0);
  transition    : all 1s ease-out;
}

.homeBanner .brush .text .title1.active,
.homeBanner .brush .text .title2.active,
.homeBanner .brush .text h1.active {
  opacity  : 1;
  transform: none;
}

.homeBanner .brush .text h1 span {
  color    : #fff;
  font-size: inherit;
}

/*
*/
.homeBanner .brush_mobile {
  position           : absolute;
  z-index            : 1;
  width              : 100% !important;
  height             : 100% !important;
  /*background-size  : auto 100%;*/
  background-size    : cover;
  background-repeat  : no-repeat;
  top                : 0;
  left               : 0;
  background-position: top left;
  display            : none;
}

.homeBanner .brush_mobile .text {
  /* height: 100%; */
  /* width: 284px; */
  position: absolute;
  top     : 50%;
  left    : 20%;
}

.homeBanner .brush_mobile .text h3 {
  font-family: var(--font-yentu);
  color      : #fff;
  font-size  : 43px;
  text-align : center;
}

.homeBanner .brush_mobile .text h1 {
  font-family   : var(--font-charlot);
  color         : #f4e872;
  text-transform: uppercase;
  font-size     : 55px;
  text-align    : center;
  line-height   : 3rem;
}

.homeBanner .brush_mobile .text h1 span {
  color    : #fff;
  font-size: 50px;
}

.homeBanner .text_small {
  position    : absolute;
  right       : calc((100vw - 1100px) / 2);
  bottom      : 1.25rem;
  /*     width: 80px;
    height    : 52px; */
  z-index     : 2;
  display     : flex;
  align-items : center;
  color       : #fff;
  font-family : var(--font-lato);
  opacity     : 0;
  transform   : translate(500px, 0);
  transition  : all 1s ease-in-out;

}

.homeBanner .text_small.active {
  transform: none;
  opacity  : 1;
}

.homeBanner .text_small img {
  width       : 84px;
  height      : auto;
  margin-right: 1rem;
}

.homeBanner .text_small .txt {
  /* display: flex; */
  /* flex-flow: column; */
  /* justify-content: center; */
}

.homeBanner .text_small .txt span {
  font-size: 0.9rem;
  opacity  : 0.8;
}

.homeBanner .text_small .txt p {
  /* font-size: 15px; */
  margin: 0;
}

.txt-up {
  text-transform: uppercase;
}

.homeUtilities .rowUti .description .left {
  position: relative;
}

.markerUti {
  position: absolute;
  width   : 100%;
  height  : 100%;
  top     : 0;
}

.markerUti .item {
  position       : absolute;
  width          : 30px;
  height         : 30px;
  border         : 2px solid #36592d;
  border-radius  : 50%;
  background     : #fff;
  color          : #36592d;
  font-weight    : bold;
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : 20px;
  transition     : var(--transition-smooth);
  transform      : scale(0.8);
  z-index        : 1;
}

.markerUti .item:nth-child(1) {
  top : 66.5%;
  left: 36.8%;
}

.markerUti .item:nth-child(2) {
  bottom: 33%;
  left  : 63.2%;
}

.markerUti .item:nth-child(3) {
  top : 37.6%;
  left: 49.78%;
}

.markerUti .item:nth-child(4) {
  top : 36.5%;
  left: 26.5%;
}

.markerUti .item:nth-child(5) {
  top : 7%;
  left: 63.8%;
}

.markerUti .item:nth-child(6) {
  top : 3.2%;
  left: 1.3%;
}

.markerUti .item:nth-child(7) {
  display: none;
}

.markerUti .item:nth-child(6):hover .tooltip {
  top : 98px;
  left: 43px;
}

.markerUti .item:nth-child(6):hover .tooltip:after {
  top      : -89px;
  left     : -19px;
  transform: translate(50%, 0) rotate(90deg);
}

.markerUti .item:nth-child(5):hover .tooltip {
  top : 80px;
  left: -211px;
}

.markerUti .item:nth-child(5):hover .tooltip:after {
  top      : -73px;
  left     : 195px;
  transform: translate(50%, 0) rotate(270deg);
}

.markerUti .item:hover {
  transform: scale(1);
  z-index  : 2;
}

.markerUti .item .tooltip {
  opacity        : 0;
  pointer-events : none;
  background     : var(--color-gradient);
  display        : flex;
  flex-flow      : column;
  justify-content: center;
  align-items    : center;
  height         : 100%;
  width          : 200px;
  position       : absolute;
  color          : #fff;
  font-size      : initial;
  text-transform : uppercase;
  border-radius  : 0 0 12px 0;
  transition     : all 0.15s ease-out;
  /* padding     : 0 2px; */
  top            : -70px;
  height         : 55px;
  text-align     : center;
}

.markerUti .item .tooltip .image {
  width   : initial;
  position: absolute;
  bottom  : 100%;
}

.markerUti .item .tooltip .image img {
  border-radius: 10px 0 0;
}

.markerUti .item:hover .tooltip {
  opacity: 1;
}

.markerUti .item:hover .tooltip:after {
  top             : 100%;
  left            : 50%;
  transform       : translateX(-50%);
  border          : solid #ffffff;
  content         : " ";
  /* height       : 0; */
  /* width        : 0; */
  position        : absolute;
  pointer-events  : none;
  border-color    : rgb(255 255 255 / 0%);
  border-top-color: #aa9614;
  border-width    : 6px;
}

.prodList .listing .content button {
  background: transparent;
  border    : none;
  outline   : none;
}

#modalProduct {
  width : 100%;
  height: auto;
  margin: auto;
}

#modalProduct .slick-track {
  /*width: 100% !important;*/
}

#modalProduct .slick-track img {
  /*width: 100% !important;*/
}

#modalProduct .slick-track img:focus {
  outline: none;
}

.listUti .symbol {
  transition: var(--transition-smooth);
}

.listUti .symbol.active {
  transform: scale(1.3);
}

.footerIndex .infocnt {
  padding: 0;
}

#myVideo {
  object-fit: cover;
  width     : 100vw;
  height    : 100vh;
  top       : 0;
  left      : 0;
}

.round {
  position: relative;
  display : flex;
}

#exampleModal .round {
  margin-left: 1rem;
}

#exampleModal .round label {
  border: 1px solid #87881c;
}

#exampleModal .round label:after {
  /* border: 2px solid #87881c; */
}

#exampleModal .form-group button {
  width: 100%;
}

#exampleModal .round input[type="checkbox"] {
  position  : absolute;
  left      : 0;
  z-index   : 1;
  opacity   : 0;
  visibility: inherit;
}

.round label {
  background-color: transparent;
  border          : 1px solid #fff;
  border-radius   : 7px 0;
  cursor          : pointer;
  height          : 20px;
  left            : 0;
  position        : absolute;
  top             : 0;
  width           : 20px;
}

.round label:after {
  border      : 2px solid #fff;
  border-top  : none;
  border-right: none;
  content     : "";
  height      : 6px;
  left        : 4px;
  opacity     : 0;
  position    : absolute;
  top         : 4px;
  transform   : rotate(-45deg);
  width       : 12px;
}

.round input[type="checkbox"] {
  visibility: hidden;
}

.round input[type="checkbox"]:checked~label {
  background-color: #66bb6a;
  border-color    : #66bb6a;
}

.round input[type="checkbox"]:checked~label:after {
  opacity: 1;
}

.checkboxbot {
  justify-content: space-between;
  display        : flex;
  align-items    : flex-end;
  padding        : 2rem 0;
}

.boxbtn {
  display        : flex;
  justify-content: flex-end;
}

.boxbtn .btn {
  width  : auto;
  padding: 0 35px;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: brightness(0.5);
}

.homeLibrary .carousel-indicators {
  position: relative;
  margin  : 0;
}

.carousel-indicators li {
  width     : 200px;
  height    : 180px;
  background: transparent;
  opacity   : 1;
}

.carousel-indicators li img {
  height       : 100%;
  object-fit   : cover;
  border-radius: 45px 0;
  padding      : 0 10px;
}

.active_library {
  opacity : 0 !important;
  position: absolute;
  top     : 0;
}

#carousel-thumb .carousel-item {
  height: 100%;
}

#carousel-thumb .carousel-item img {
  border-radius: 45px 0;
  height       : 445px;
  object-fit   : cover;
}

.carousel-indicators li:focus {
  outline: none;
}

.homeLibrary .right .btnTheme {
  margin: 1rem 0;
}

.homeLibrary .right .btnTheme .vector {
  margin-left: 0;
}

.homeLibrary .right .btnTheme .oval {
  right: 2rem;
}

.wpcf7 form .wpcf7-response-output {
  margin : 0;
  padding: 15px;
}

.wpcf7-not-valid-tip {
  color: #761717;
}

.fancybox-thumbs__list a:before {
  border: 6px solid #377f25 !important;
}

.floating {
  position       : fixed;
  bottom         : 10%;
  right          : 0;
  display        : flex;
  flex-flow      : column;
  align-items    : center;
  justify-content: center;
  z-index        : 99999;
}

.floating .backtotop {
  display         : flex;
  align-items     : center;
  justify-content : center;
  margin-right    : 0.5rem;
  /* margin-bottom: 1rem; */
  /* border       : 1px solid #e4bf14; */
  /* border-radius: 50%; */
}

.floating .backtotop button {
  border         : none;
  background     : none;
  display        : flex;
  align-items    : center;
  justify-content: center;
  z-index        : 9999999999;
  border         : 1px solid #e4bf14;
  border-radius  : 50%;
  width          : 35px;
  height         : 35px;
  padding        : 0;
}

.floating .backtotop button i {
  color       : #e4bf14;
  /* font-size: 20px; */
  margin      : auto;
}

@media (max-width: 640px) {
  #fb-root {
    display: none;
  }

  .floating {
    bottom: 0;
  }

  .imgPopafter {
    display: none !important;
  }

  .totalGround .images img {
    height: auto !important;
  }

  .totalGround .container {
    height: auto;
  }

  .unitInvest {
    margin: 0;
    height: 123vh;
  }

  .imp-fullscreen-tooltip {
    display: none !important;
  }

  .imgPopafter i {
    right: unset;
    left : 5%;
  }

  .imgPopup i {
    /* top: -17%; */
    /* right: 5%; */
  }

  .imgPopup a {
    height : 100%;
    display: block;
    /* top : 30%; */
  }

  .imgPopup img {
    max-width: 90%;
  }

  .homeNews .viewAll {
    display: none;
  }

  .pagedetailPost {
    height: 100vh !important;
  }

  .homeBanner .btnRegister {
    display: none;
  }

  .modal-dialog {
    top: 30%;
  }

  .aboutInvestor .listimg .image2 {
    top      : 5%;
    z-index  : 1;
    /* border: 1px solid #ccc; */
  }

  .aboutInvestor .listimg .image2 img {
    width : 250px;
    height: 250px;
    border: 1px solid #ccc;
  }

  .aboutInvestor .listimg .image1 {
    display: none;
  }

  .logoinvestor {
    /* margin: auto; */
  }

  .m-shown {
    display: block !important;
  }

  .btnTheme .oval {
    right: 1.5rem;
  }

  .m-hidden {
    display: none !important;
  }

  .menumobile {
    display: block;
  }

  .menudesktop {
    display: none;
  }

  .prodList .lixstbox:nth-child(even) .content {
    padding: 0;
  }

  .prodList .future {
    display: none;
  }

  .prodList .content .overview .icon {
    flex: 0 0 30%;
  }

  .prodList .content .overview {
    margin     : 0;
    width      : 100%;
    flex-flow  : column;
    align-items: center;
  }

  .prodList .content .overview .param .unit span {
    /* font-size: 15px; */
  }

  .prodList .content .overview .param .unit {
    width: 114px;
  }

  .prodList .content .overview .param .unit h1 {
    /* font-size: 16px !important; */
  }

  .aboutFooter {
    /* margin-top: 6rem; */
  }

  .aboutInvestor .listimg .image3 {
    /* bottom: -13%; */
    /* top: unset; */
    left   : 0;
    top    : 30%;
    z-index: 0;
  }

  .aboutInvestor .listimg .image3 img {
    width        : 300px;
    height       : 300px;
    border-radius: 0 0 0 200px;
  }

  .aboutFooter .segTitle h3 {
    text-align: center;
  }

  .aboutInvestor {
    padding-top: 3rem;
  }

  .footerIndex {
    padding: 15px;
    height : auto;
  }

  .footerIndex .logo p {
    display: none;
  }

  .homeProduct .summary .btnTheme .oval {
    right: 2rem;
  }

  .totalGround .images {
    height: auto;
    margin: 0;
  }

  .totalGround .images img {
    width : 100%;
    height: auto;
  }

  .aboutInfo .text article {
    width: 100%;
  }

  .homeBanner .deco img {
    width: 50%;
  }

  #menu {
    width  : 100%;
    padding: 3rem;
  }

  #menu .right {
    position   : absolute;
    right      : 0;
    align-items: flex-end;
    width      : auto;
  }

  .header {
    padding   : 1rem 1rem 5rem 0;
    background: linear-gradient(0deg, #f9cb1100 5%, #5b6e23 68%, #315629);
    position  : fixed;
    top       : 0;
    width     : 100%;
  }

  .header .logo img {
    max-width: 80%;
  }

  #toggle,
  #close_menu {
    width : 50px;
    height: 50px;
  }

  #toggle img:nth-child(3),
  #toggle img:nth-child(1) {
    bottom: 0.4rem;
  }

  #close_menu img:nth-child(1),
  #close_menu img:nth-child(3) {
    top: 0.5rem;
  }

  .brush .container,
  .brush .container .row {
    height: 100%;
  }

  .homeBanner .brush .text {
    /* display: flex; */
    /* flex-flow: column; */
    /* justify-content: center; */
    /* align-items: center; */
    /* position: relative; */
    /* width: 100%; */
    /* height: 100%; */
    /* top: 0; */
    background: linear-gradient(200deg, #f9cb1100 5%, #5b6e23 68%, #315629);
    padding   : 2rem 0 4rem;
    top       : initial;
    bottom    : 0;
    transform : none;
  }

  .homeBanner .brush .text h3 {
    font-size: 2.5rem;
    margin   : 0;
  }

  .homeBanner .brush .text h1 {
    font-size: 3rem;
    margin   : -0.5rem 0;
  }

  .totalGround .texted {
    position       : relative;
    display        : flex;
    align-items    : center;
    width          : 100%;
    justify-content: center;
    right          : unset;
    top            : unset;
  }

  .totalGround .texted .segTitle {
    width      : 100%;
    align-items: center;
  }

  .totalGround .texted img {
    display: none;
  }

  .totalGround {
    /* margin-top: 13rem; */
    margin-bottom: 0;
  }

  .totalGround .thumbnail {
    position       : relative;
    width          : 100%;
    left           : 0;
    top            : 0;
    display        : flex;
    align-items    : center;
    justify-content: center;
  }

  .totalGround .text .overview ul {
    flex-flow: column;
    margin   : 0 3rem;
  }

  .totalGround .text .type_prod::after {
    left: 3rem;
  }

  .homeProduct .summary {
    height : auto;
    padding: 1rem;
  }

  .homeProduct .summary .--content {
    display: none;
  }

  .homeProduct .summary article {
    padding-right: 15px;
    top          : 34%;
  }

  .homeProduct {
    padding: 0;
  }

  .homeProduct .listing {
    flex-flow: column;
  }

  .homeUtilities {
    height: auto;
  }

  .homeUtilities .rowUti .description .left {
    height : auto !important;
    order  : 2;
    padding: 0;
  }

  .homeProduct .listing .frames {
    height       : 75vh;
    height       : 200px;
    padding      : 0;
    margin-bottom: 1rem;
  }

  .homeProduct .listing .frames .segLine {
    display: none;
  }

  .homeProduct .listing .frames:hover {
    width: 100%;
  }

  .homeProduct .listing .item .content .inner {
    transform : none;
    bottom    : 0;
    left      : 0;
    flex-flow : column;
    height    : auto;
    width     : 100%;
    padding   : 0 0.5rem;
    background: linear-gradient(180deg, #f9cb1100 5%, #5b6e23 68%, #315629);
    padding   : 1rem 0;
  }

  .homeProduct .listing .item .content .inner .icon {
    flex: 0 0 auto;
  }

  .homeUtilities .rowUti .description {
    margin: 0;
  }

  .listUti .col-md-6 {
    width: 50%;
  }

  .homeLibrary {
    padding: 2rem 0;
    height : 120vh !important;
  }

  .homeLibrary .listTab ul {
    font-size: 1.5rem;
  }

  .homeLibrary .tab-pane {
    padding: 0;
  }

  .homeLibrary .tab-content .over {
    margin-left: unset;
    margin-top : 2rem;
  }

  .homeLibrary .tab-content .over:after {
    /*left: -1rem;*/
    display: none;
  }

  .homeLibrary .right .btnTheme .oval {
    right: 1rem;
  }

  .btnTheme .vector {
    margin-left: -1.8rem;
  }

  .homeLibrary .tab-content .right .btnTheme {
    margin : 2rem 0;
    width  : 60%;
    display: none;
  }

  .homeLibrary .tab-content .listimg {
    display: none;
    top    : 109%;
    left   : 0;
  }

  .homeLibrary .tab-content .right .btnTheme.oval {}

  .homeNews {
    padding    : unset;
    height     : auto;
    margin-top : -1rem;
    padding-top: 3rem;
  }

  .homecontact {}

  .homeFooter {
    height : auto;
    padding: 2rem 0;
  }

  .homeNews .content .--img {
    width : 140px;
    height: 100px;
  }

  .homeNews .content .excerpt {
    justify-content: ii;
  }

  .homeNews .content .urlimg {
    height: 150px;
  }

  .homeNews .content img {
    /* width: 130px; */
    /* height: 130px; */
    border-radius: 35px 0;
  }

  .footerIndex .infocnt {
    padding: 15px;
  }

  .footerIndex .listcont,
  .footerIndex .listinfo {
    padding-top: 1rem;
  }

  .checkboxbot {
    padding: 0 15px;
  }

  .checkboxbot .col-md-3 {
    padding: 0;
  }

  .boxbtn {
    justify-content: center;
  }

  .aboutInfo .listParam .item {
    padding: 0 4rem;
  }

  .aboutFooter .images:after {
    border-bottom: 1px solid #fff;
    width        : 100%;
    right        : 0;
    bottom       : 0px;
    border-right : none;
  }

  .aboutFooter .images img {
    padding-bottom: 1rem;
  }

  .aboutInfo .text article br {
    display: none;
  }

  .detailPost .left,
  .detailPost .right {
    padding: 15px;
  }

  .archivePost .listCate .item .content {
    flex-flow: column;
  }

  .archivePost .btnTheme {
    width: 100%;
  }

  .archivePost .btnTheme .oval {
    right: 4rem;
  }

  .aboutInfo .list .img1 {
    margin-right: 0;
  }

  .aboutInfo .list .img1 img {
    width : 250px;
    height: 250px;
  }

  .aboutInfo .list .img2 img {
    width : 300px;
    height: 300px;
  }

  .aboutDesign .bg-images {
    display: none;
  }

  .aboutDesign {
    height: auto;
  }

  .aboutDesign .right {
    margin-top: 1rem;
  }

  .otherPost h1:after {
    bottom: 0;
    left  : 0;
  }

  .homeNews .segTitle {
    margin: 1rem 0;
  }

  .postcategory .category .right .item {
    height: 300px;
  }

  .postcategory .category .left {
    margin-bottom: 2rem;
  }

  .shareicon {
    flex-flow  : column;
    align-items: flex-start;
  }

  .homeBanner .contaiHead {
    padding-top: 0;
  }

  .aboutFooter .images {
    display        : flex;
    align-items    : center;
    justify-content: center;
    margin         : auto;
    width          : 100% !important;
  }

  .homeFooter .content {
    text-align: center;
    margin-top: 1em;
  }

  .segTitle h3 {
    font-size: 38px;
  }

  .prodList {
    background-size: auto;
  }

  .prodList .lixstbox:nth-child(odd) .content {
    padding-left: 0;
  }

  .prodList .content {
    margin-top: 2rem;
  }

  .prodList .lixstbox:nth-child(even) .segTitle {
    max-width  : 100%;
    margin-left: 0;
  }

  .prodList .lixstbox:nth-child(even) .listing {
    flex-flow: column;
  }

  .prodList .lixstbox {
    margin: 3rem 0;
  }

  .archivePost .listCate .left .item {
    height: 30vh;
  }

  .archivePost {
    height: 90vh;
  }

  .homePosition .right .listing {
    /* padding-top: 5rem; */
  }

  .homePosition .listing ul {
    display        : flex;
    flex-wrap      : wrap;
    justify-content: space-between;
  }

  .homePosition .listing ul li {
    width          : 46%;
    white-space    : nowrap;
    /* overflow    : hidden; */
    text-overflow  : ellipsis;
    /* margin-right: .5rem; */
  }

  .homePosition .listing ul li img {
    transform   : scale(0.8);
    margin-right: 0;
  }

  .homePosition .right {
    padding: 2rem 0.5rem;
    height : auto;
  }

  .homePosition .segTitle {
    margin-bottom: 2rem;
  }

  .homeNews .listing .item {
    margin: 0;
  }

  .homeNews .listing .item:nth-child(n + 3) {
    display: none;
  }

  .detailPost {
    margin: 2rem 0 0 0;
  }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .homePosition .right {
    padding-left: 1rem;
  }

  .homePosition .right .listing {
    padding-top: 5rem;
  }

  .homePosition .col-md-9 {
    max-width: 70%;
  }

  .homePosition .col-md-3 {
    max-width: 30%;
    flex     : 0 0 30%;
  }

  .totalGround .texted img {
    width: 150px;
  }

  .totalGround .texted {
    right: 5%;
  }

  .homeProduct .listing .frames {
    height: 60vh;
  }

  /*   .homeUtilities .rowUti .description .left{
          flex: 0 0 100%;
          max-width: 100%;

          padding: 0
      }
  */
  .homeUtilities .rowUti .description {
    margin: 0;
  }

  .homeUtilities .segTitle {
    margin-bottom: 0;
  }

  .homeUtilities .rowUti .left img {
    object-fit: cover;
  }

  .homeLibrary .right .btnTheme .oval {
    right: 1rem;
  }

  .aboutInfo .decor {
    bottom: 0%;
    left  : -25%;
  }

  .aboutDesign {
    height: 40vh;
  }

  .aboutInfo .list .img1 {
    margin-right: 0;
  }

  .aboutInfo .list .img1 img {
    width : 250px;
    height: 250px;
  }

  .aboutInfo .list {
    margin-top: 1rem;
  }

  .aboutInfo .list .img2 img {
    width : 300px;
    height: 300px;
  }

  .aboutInfo .list .square {
    width : 270px;
    height: 250px;
  }

  .aboutInvestor .listimg .image2 img {
    height: 300px;
    width : 300px;
  }

  .aboutInvestor .listimg .image3 img {
    height       : 200px;
    width        : 200px;
    border-radius: 40px 0;
  }

  .aboutInvestor .listimg .image2 {
    top: 30%;
  }

  .otherPost h1:after {
    width: 75%;
  }
}

@media (min-width: 1920px) {
  #image-map-pro-3655 {
    max-width: 100%;
  }

  .markerUti .item:nth-child(4) {
    top : 37.3%;
    left: 28.5%;
  }
}

@media (max-width: 768px) {
  .brush {
    /* display: none; */
  }

  .homeBanner .brush {}

  .homeBanner {
    /* height: auto; */
    /* padding-top: 82px; */
  }

  .listBanner {
    height          : 100vh;
    position        : relative;
    top             : initial;
    background-color: #506825;
  }

  .homeNews .listing .content .excerpt article {
    display: none;
  }

  .homeNews .content .excerpt span:after {
    display: none;
  }

  .listBanner .item {
    height               : 100%;
    background           : rgba(0, 0, 0, 40%);
    background-repeat    : no-repeat;
    background-size      : cover;
    background-position  : bottom center;
    width                : 100%;
    background-blend-mode: initial !important;
  }

  .listBanner .item .desc {
    /* background: linear-gradient(200deg, #f9cb1100 5% , #5B6E23 68%, #315629); */
    height             : 350px;
    padding-left       : 1rem;
    padding-right      : 1rem;
    background-image   : url("https://symphonygarden.vn/wp-content/uploads/2020/11/anh-1.png");
    background-repeat  : no-repeat;
    background-size    : 100% auto;
    background-position: top center;
  }

  .listBanner .item .content {
    padding: 0;
  }

  .listBanner .item .desc h1 {
    font-size: 2.5rem;
  }

  .homeBanner .text_small img {
    width       : 55px;
    height      : 55px;
    margin-right: 5px;
  }

  .homeBanner .text_small .txt span {
    font-size: 12px;
    opacity  : 0.8;
    height   : 15px;
  }

  .homeBanner .text_small .txt p {
    font-size: 10px;
    margin   : 0;
  }

  .totalGround .texted {
    position       : relative;
    display        : flex;
    align-items    : center;
    width          : 50%;
    justify-content: center;
    right          : unset;
    top            : unset;
  }

  .totalGround .texted .txt {
    /* margin: 0.6rem 0; */
    background      : none;
    /* border-radius: 20px 0; */
    /* padding      : 4px; */
  }

  .totalGround .texted h3 {
    font-size : 2rem;
    color     : #335728;
    width     : max-content;
    padding   : 0;
    margin-top: -1rem;
  }

  .totalGround .thumbnail {
    position          : absolute;
    width             : 140px;
    right             : 0;
    left              : initial;
    /* top            : 0; */
    display           : flex;
    /* align-items    : center; */
    /* justify-content: center; */
  }

  .totalGround {
    margin-top: 2rem;
  }

  .totalGround .text .overview ul {
    margin   : 0 0.3rem;
    flex-flow: column;
  }

  .totalGround .text .overview ul li {
    font-size: 0.9rem;
    margin   : 0;
    padding  : 0;
  }

  .totalGround .text .overview ul li .color-1 {
    margin: 0.5rem;
  }

  .totalGround .text .type_prod::after {
    left: 1.5rem;
  }
}

@media (max-width: 640px) {
  .imgPopafter {
    height: 200px;
  }

  .imgPopafter img {
    object-fit: contain;
  }

  .homeBanner .brush {
    /*background: none;
        z-index: 4;*/
    /* display: none; */
    background-image: none !important;
  }

  .archivePost .listCate .right .item {
    height: 30vh;
  }

  .archiveProd {
    /* height:70vh; */
  }

  #myVideo {
    /* height: 70vh; */
  }

  .footerIndex .logo {
    margin-top: 1rem;
  }

  .homeProduct .summary .btnTheme {
    bottom: 5% !important;
  }

  .homePosition {
    height: auto;
  }

  .homePosition .center {
    /* justify-content: center; */
    position: relative;
  }

  .homePosition .center img {
    width    : 180%;
    height   : auto;
    position : relative;
    left     : 50%;
    transform: translateX(-50%) !important;
  }

  .aboutDesign .row {
    flex-flow: column-reverse;
  }

  .homeLibrary .tab-content .future {
    height: auto !important;
  }

  .homeLibrary .tab-content .future img {
    /*         max-height: 70%; */
  }

  .footerIndex .col-md-3 {
    margin-bottom: 1rem;
  }

  .main {
    display: none;
  }

  .mobile {
    position           : relative;
    display            : flex;
    flex-flow          : column;
    justify-content    : flex-end;
    height             : 100vh;
    background-size    : contain;
    background-position: no-repeat;
  }

  .mobile .--topImg {
    position         : absolute;
    top              : 0;
    width            : 100%;
    height           : 16%;
    background-size  : contain;
    background-repeat: no-repeat;
  }

  .mobile .--botImg {
    background-size        : cover;
    background-repeat      : no-repeat;
    /*height               : 70%;
        background-position: top center;*/
    height                 : 70%;
    position               : relative;
  }

  .mobile .--botImg .content {
    display        : flex;
    flex-flow      : column;
    justify-content: flex-end;
    /* align-items : center; */
    position       : absolute;
    bottom         : 0;
    margin-left    : 3rem;
    padding-bottom : 1.5rem;
  }

  .mobile .--botImg .logo {}

  .mobile .--botImg .logo img {
    width        : 52%;
    margin-left  : -0.5rem;
    margin-bottom: 1rem;
  }

  .mobile .--botImg .txt {}

  .mobile .--botImg .txt img {
    width: 61%;
  }

  .mobile .--botImg .btnRegister {
    opacity    : 1;
    width      : 62%;
    height     : 50px;
    font-size  : 15px;
    white-space: nowrap;
    padding    : 5px 0;
  }
}

.modal {
  /* top: 10%; */
}

@media (min-width: 768px) {
  .mobile {
    display: none;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .home .--content {
    width          : 59%;
    background-size: 100% 100%;
  }

  .home .--rightImg {
    width: 277px;
  }

  .home .--pjImg {}
}

/*.homeLibrary .tab-content .listimg .slick-list{
    width: 100%;
}
.homeLibrary .tab-content .listimg .slick-list .slick-track{
    width: 100% !important;
}
.homeLibrary .tab-content .listimg .video{
    width: 100%;
}*/
/*.homeLibrary .tab-content .right .listvideo {
    display: flex;
}*/

.pagedetailPost {
  height: 50vh;
}

.error-container {
  text-align : center;
  font-size  : 180px;
  font-family: "Catamaran", sans-serif;
  font-weight: 800;
  margin     : 20px 15px;
}

.error-container>span {
  display    : inline-block;
  line-height: 0.7;
  position   : relative;

  color: #22e04b;
}

.error-container>span {
  display       : inline-block;
  position      : relative;
  vertical-align: middle;
}

.error-container>span:nth-of-type(1) {
  color    : #d1f2a5;
  animation: colordancing 4s infinite;
}

.error-container>span:nth-of-type(3) {
  color    : #e4bf14bd;
  animation: colordancing2 4s infinite;
}

.error-container>span:nth-of-type(2) {
  width        : 120px;
  height       : 120px;
  border-radius: 999px;
}

.error-container>span:nth-of-type(2):before,
.error-container>span:nth-of-type(2):after {
  border-radius: 0%;
  content      : "";
  position     : absolute;
  top          : 0;
  left         : 0;
  width        : inherit;
  height       : inherit;
  border-radius: 999px;
  box-shadow   : inset 30px 0 0 rgba(209, 242, 165, 0.4), inset 0 30px 0 rgba(239, 250, 180, 0.4), inset -30px 0 0 rgb(228 191 20), inset 0 -30px 0 rgb(47 177 31 / 40%);
  animation    : shadowsdancing 4s infinite;
}

.error-container>span:nth-of-type(2):before {
  -webkit-transform: rotate(45deg);
  -moz-transform   : rotate(45deg);
  transform        : rotate(45deg);
}

.screen-reader-text {
  position: absolute;
  top     : -9999em;
  left    : -9999em;
}

@keyframes shadowsdancing {
  0% {
    box-shadow: inset 30px 0 0 rgba(209, 242, 165, 0.4), inset 0 30px 0 rgba(239, 250, 180, 0.4), inset -30px 0 0 rgba(255, 196, 140, 0.4), inset 0 -30px 0 #c19f15d9;
  }

  25% {
    box-shadow: inset 30px 0 0 #a5bf59b8, inset 0 30px 0 rgba(209, 242, 165, 0.4), inset -30px 0 0 rgba(239, 250, 180, 0.4), inset 0 -30px 0 rgba(255, 196, 140, 0.4);
  }

  50% {
    box-shadow: inset 30px 0 0 rgba(255, 196, 140, 0.4), inset 0 30px 0 #a4ca38ab, inset -30px 0 0 rgba(209, 242, 165, 0.4), inset 0 -30px 0 rgba(239, 250, 180, 0.4);
  }

  75% {
    box-shadow: inset 30px 0 0 rgba(239, 250, 180, 0.4), inset 0 30px 0 rgba(255, 196, 140, 0.4), inset -30px 0 0 #ffe682, inset 0 -30px 0 rgba(209, 242, 165, 0.4);
  }

  100% {
    box-shadow: inset 30px 0 0 rgba(209, 242, 165, 0.4), inset 0 30px 0 rgba(239, 250, 180, 0.4), inset -30px 0 0 rgba(255, 196, 140, 0.4), inset 0 -30px 0 #6ace54db;
  }
}

@keyframes colordancing {
  0% {
    color: #987f32cc;
  }

  25% {
    color: #d6b819c4;
  }

  50% {
    color: #528012ba;
  }

  75% {
    color: #a5c110c2;
  }

  100% {
    color: #49691eba;
  }
}

@keyframes colordancing2 {
  0% {
    color: #285d1d;
  }

  25% {
    color: #cce835;
  }

  50% {
    color: #ffc107c4;
  }

  75% {
    color: #e4bf14ad;
  }

  100% {
    color: #91e23770;
  }
}

/* demo stuff */
.zoom-area {
  max-width : 490px;
  margin    : 30px auto 30px;
  font-size : 19px;
  text-align: center;
}

.link-container {
  text-align: center;
}

.link-container a.more-link {
  text-transform  : uppercase;
  font-size       : 13px;
  background-color: #297117b3;
  padding         : 10px 15px;
  border-radius   : 0;
  /*     color    : #416475; */
  display         : inline-block;
  margin-right    : 5px;
  margin-bottom   : 5px;
  line-height     : 1.5;
  text-decoration : none;
  margin-top      : 50px;
  letter-spacing  : 1px;
}

.tesxterror {
  text-align : center;
  font-size  : 50px;
  font-family: var(--font-yentu);
  color      : #e4bf14;
}

.active_doc {
  opacity: 0;
}