:root {
  --headerMenuColor: #ff6863;
  --underSlideColor: #50ba87;
  --boxProductHomePage: #282828;
  --LAColor: #e10404;
  --footerMenu: rgba(255, 255, 255, 0.6);
  --footerMenuHover: #a0d445;
  --footerIcon: #a0d445;
}

/* chart */

.pie-wrapper {
  height: 10em;
  width: 10em;
  float: left;
  margin: 15px;
  position: relative;
}
.pie-wrapper:nth-child(3n + 1) {
  clear: both;
}
.pie-wrapper .pie {
  height: 100%;
  width: 100%;
  clip: rect(0, 10em, 10em, 0.5em);
  left: 0;
  position: absolute;
  top: 0;
}
.pie-wrapper .pie .half-circle {
  height: 100%;
  width: 100%;
  border: 1em solid #3498db;
  border-radius: 50%;
  clip: rect(0, 5em, 10em, 0);
  left: 0;
  position: absolute;
  top: 0;
}
.pie-wrapper .label {
  background: #34495e;
  border-radius: 50%;
  bottom: 0.4em;
  color: #ecf0f1;
  cursor: default;
  display: block;
  font-size: 2.25em;
  left: 0.4em;
  line-height: 2.8em;
  position: absolute;
  right: 0.4em;
  text-align: center;
  top: 0.6em;
}
.pie-wrapper .label .smaller {
  color: #bdc3c7;
  font-size: 0.45em;
  padding-bottom: 20px;
  vertical-align: super;
}
.pie-wrapper .shadow {
  height: 100%;
  width: 100%;
  border: 1em solid #bdc3c7;
  border-radius: 50%;
}
.pie-wrapper.style-2 .label {
  background: none;
  color: #7f8c8d;
}
.pie-wrapper.style-2 .label .smaller {
  color: #bdc3c7;
}
.pie-wrapper.progress-30 .pie .half-circle {
  border-color: #3498db;
}
.pie-wrapper.progress-30 .pie .left-side {
  transform: rotate(108deg);
}
.pie-wrapper.progress-30 .pie .right-side {
  display: none;
}
.pie-wrapper.progress-60 .pie {
  clip: rect(auto, auto, auto, auto);
}
.pie-wrapper.progress-60 .pie .half-circle {
  border-color: #9b59b6;
}
.pie-wrapper.progress-60 .pie .left-side {
  transform: rotate(216deg);
}
.pie-wrapper.progress-60 .pie .right-side {
  transform: rotate(180deg);
}
.pie-wrapper.progress-90 .pie {
  clip: rect(auto, auto, auto, auto);
}
.pie-wrapper.progress-90 .pie .half-circle {
  border-color: #e67e22;
}
.pie-wrapper.progress-90 .pie .left-side {
  transform: rotate(324deg);
}
.pie-wrapper.progress-90 .pie .right-side {
  transform: rotate(180deg);
}
.pie-wrapper.progress-45 .pie .half-circle {
  border-color: #1abc9c;
}
.pie-wrapper.progress-45 .pie .left-side {
  transform: rotate(180deg);
}
.pie-wrapper.progress-45 .pie .right-side {
  display: none;
}
.pie-wrapper.progress-75 .pie {
  clip: rect(auto, auto, auto, auto);
}
.pie-wrapper.progress-75 .pie .half-circle {
  border-color: #8e44ad;
}
.pie-wrapper.progress-75 .pie .left-side {
  transform: rotate(270deg);
}
.pie-wrapper.progress-75 .pie .right-side {
  transform: rotate(180deg);
}
.pie-wrapper.progress-95 .pie {
  clip: rect(auto, auto, auto, auto);
}
.pie-wrapper.progress-95 .pie .half-circle {
  border-color: #e74c3c;
}
.pie-wrapper.progress-95 .pie .left-side {
  transform: rotate(342deg);
}
.pie-wrapper.progress-95 .pie .right-side {
  transform: rotate(180deg);
}

.pie-wrapper--solid {
  border-radius: 50%;
  overflow: hidden;
}
.pie-wrapper--solid:before {
  border-radius: 0 100% 100% 0/50%;
  content: "";
  display: block;
  height: 100%;
  margin-left: 50%;
  transform-origin: left;
}
.pie-wrapper--solid .label {
  background: transparent;
}
.pie-wrapper--solid.progress-65 {
  background: linear-gradient(to right, #e67e22 50%, #34495e 50%);
}
.pie-wrapper--solid.progress-65:before {
  background: #e67e22;
  transform: rotate(126deg);
}
.pie-wrapper--solid.progress-25 {
  background: linear-gradient(to right, #9b59b6 50%, #34495e 50%);
}
.pie-wrapper--solid.progress-25:before {
  background: #34495e;
  transform: rotate(-270deg);
}
.pie-wrapper--solid.progress-88 {
  background: linear-gradient(to right, #3498db 50%, #34495e 50%);
}
.pie-wrapper--solid.progress-88:before {
  background: #3498db;
  transform: rotate(43.2deg);
}

/* chart (end) */

/* New Chart */

@keyframes growProgressBar {
  0%,
  33% {
    --pgPercentage: 0;
  }
  100% {
    --pgPercentage: var(--value);
  }
}

@property --pgPercentage {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

div[role="progressbar"] {
  --size: 12rem;
  --fg: #369;
  --bg: #def;
  --pgPercentage: var(--value);
  animation: growProgressBar 3s 1 forwards;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(
      closest-side,
      white 80%,
      transparent 0 99.9%,
      white 0
    ),
    conic-gradient(var(--fg) calc(var(--pgPercentage) * 1%), var(--bg) 0);
  font-family: Helvetica, Arial, sans-serif;
  font-size: calc(var(--size) / 5);
  color: var(--fg);
}

div[role="progressbar"]::before {
  counter-reset: percentage var(--value);
  content: counter(percentage) "%";
}

/* New Chart (END) */

/* Header */

#headerMenuTool {
  width: 100%;
  /* position: absolute; */
  transition: all 0.5s ease;
  margin-bottom: 0;
}

#headerMenuTool .menu {
  transition: all 0.5s ease-in;
}

#headerMenuTool .container {
  display: flex;
  align-items: center;
  transition: all 0.5s ease;
}

.stickyMenu {
  position: fixed !important;
  z-index: 9999;
  top: 0;
  width: 100%;
}

.stickyMenu .container {
  width: 100%;
}

.HeaderSearchIcon {
  cursor: pointer;
  transition: all 0.5s ease;
}

.HeaderSearchIcon:hover {
  color: var(--headerMenuColor);
}

.searchHeaderTool {
  width: 100%;
  height: 100%;
  background-color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  position: fixed;
  z-index: 9999;
  top: 0;
  right: 0;
}

.mainSearchBoxShow {
  width: 60%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.closeSearchBTN {
  width: 50px;
  height: 50px;
  background-color: var(--headerMenuColor);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: absolute;
  right: 30px;
  top: 30px;
  transition: all 0.5s ease;
  /* margin-bottom: 25px; */
}

.closeSearchBTN:hover {
  background-color: #222;
}

/* (END) Header */

.resMenuBTN {
  display: none;
  font-size: 30px;
  color: #000;
  cursor: pointer;
}

.menuClass1 img,
.menuClass1 .menuTooltipe {
  display: none;
}

.menuClass1 ul {
  display: none;
}

.menuClass1 > a {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
}

.menuClass1:hover > ul {
  display: block;
}

/* Side Nav */

.sidenav {
  width: 0;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9999999999;
  background-color: #000;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 19px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  left: 0px;
  font-size: 36px;
  margin-left: 0px;
}

@media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 15px;
  }
  .sidenav a {
    font-size: 18px;
  }
}

/* Side Nav (END) */

/* slider */

#slider {
  overflow: hidden;
  min-height: 31.51042vw;
}

#slider .owl-stage-outer {
  width: 100%;
  float: right;
  display: flex;
}

#slider .owl-stage-outer .owl-stage {
  display: flex;
}

.itemSlider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.itemSliderCaption {
  width: 300px;
  height: 100%;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.5s ease;
  opacity: 0;
  padding: 0 50px 0 30px;
}

.ISC-title {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.5;
  margin: 30px 0;
  margin-bottom: 50px;
}

.ISC-text {
  line-height: 1.5;
  margin-bottom: 10px;
}

.ISC-btn {
  width: 85%;
  height: 75px;
  display: flex;
  justify-content: space-between;
  text-align: center;
  background-color: #3f4651;
  color: #fff;
  transition: all 0.5s ease;
  padding: 0;
}

.ISC-btnTitle {
  display: flex;
  align-items: center;
  padding-right: 25px;
}

.ISC-btnImage {
  width: 25%;
  background-color: #4f5763;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.5s ease;
}

.ISC-btnImage i {
  transition: all 0.5s ease;
}

.ISC-btn:hover {
  background-color: #4f5763;
}

.ISC-btn:hover .ISC-btnImage {
  background-color: #3f4651;
}

.ISC-btn:hover .ISC-btnImage i {
  transform: translateX(-10px);
}

.ISC-date {
  color: #eea660;
  font-size: 20px;
  margin-bottom: 45px;
}

.swiper-slide-active .itemSliderCaption {
  animation: sliderCaption 1.2s;
  opacity: 1;
}

@keyframes sliderCaption {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}

.swiper-button-next::after,
.swiper-button-prev::after {
  content: unset !important;
}

.swiper-navigation__module {
  width: 200px;
  height: 75px;
  position: absolute;
  /* top: -100%; */
  background-color: #fff;

  display: flex;
  align-items: center;
  z-index: 9;
  padding: 15px;
  margin-top: -75px;
}

.swiper-button-next,
.swiper-button-prev {
  width: 40px;
  height: 40px;
  position: static;
  color: #111;
  border-radius: 50%;
  border: 1px solid #111;
  transition: all 0.5s ease;
  margin: 0 7px;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
  color: #9b042c;
  border-color: #9b042c;
}

.swiper-pagination__fraction {
  font-size: 25px;
}

.swiper-pagination__fraction-count,
.swiper-pagination__fraction-divider {
  color: #eea660;
}

.swiper-pagination__fraction-index {
  color: rgba(21, 21, 21, 0.21);
}

/* (END) slider */

/* UnderSliderBox */

.US_LBT {
  display: none;
}

.US-LeftBoxTab2 {
  display: flex;
  /* flex-wrap: wrap; */
  align-items: center;
  justify-content: space-between;
}

.US-LeftBoxTab2Card {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.US-LeftBoxTab2Card div:first-child {
  margin-bottom: 15px;
}

.UnderSliderBox {
  margin: 25px 0;
}

.UnderSliderBox .container {
  display: flex;
}

.US-RightBox {
  flex: 1 1 40%;
}

.US-RightBox img {
  width: 100%;
}

.US-LeftBox {
  flex: 1 1 60%;
  padding: 10px 2%;
}

.US-LeftBoxHeader {
  color: #9b042c;
  font-size: 40px;
  margin-bottom: 30px;
}

.US-LeftBoxTabs {
  display: flex;
  justify-content: space-between;
  border-bottom: 3px solid #e1e1e1;
  margin: 15px 0;
}

.US-LeftBoxTabsTitle {
  color: #797979;
  position: relative;
  cursor: pointer;
  padding-bottom: 15px;
}

.US-LeftBoxTabsTitle.activeTT {
  color: var(--underSlideColor);
}

.US-LeftBoxTabsTitle::after {
  content: "";
  width: 0%;
  height: 3px;
  display: block;
  background-color: var(--underSlideColor);
  transition: all 0.5s ease;
  position: absolute;
  bottom: -3px;
}

.US-LeftBoxTabsTitle.activeTT::after {
  width: 100%;
}

.US-LeftBoxTab1 {
  margin-top: 15px;
}

.US-LeftBoxTab1Text,
.US-LeftBoxTab3Text {
  line-height: 1.5;
}

.US-LeftBoxTab1ProgressBar {
  margin: 10px 0;
}

.US-LeftBoxTab1ProgressBarTitle {
  margin-bottom: 15px;
}

.ProSAUHome {
  height: 0.5rem;
  /* overflow: hidden; */
  font-size: 0.75rem;
  background-color: #e9ecef;
  border-radius: 0;
  transform-origin: right bottom;
  margin: 0 0px 0 10px;
  position: relative;
}

.InnerProAUHome {
  height: inherit;
  position: absolute;
  transform-origin: right bottom;
  margin-left: -10px;
  background-color: #ec7575;
  background-size: 1rem 1rem;
  transition: all 0.5s ease;
}

.InnerProAUHome::after {
  content: " ";
  width: 22px;
  height: 22px;
  position: absolute;
  top: -100%;
  left: -2px;
  background: inherit;
  border: 7px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 2px 3px rgba(0, 0, 0, 0.1);
}

.US-LeftBoxTab1ProgressBar:nth-child(3) .InnerProAUHome {
  background-color: #e7a855;
}

.US-LeftBoxTab1ProgressBar:nth-child(4) .InnerProAUHome {
  background-color: #50ba87;
}

.US-LeftBoxTab3Ul {
  display: flex;
  flex-wrap: wrap;
  list-style: square;
}

.US-LeftBoxTab3Ul li {
  flex: 1 1 30%;
  color: #0a55ab;
  line-height: 1.5;
  text-align: justify;
  transition: all 0.5s ease;
  margin-bottom: 10px;
  margin-left: 2%;
}

.US-LeftBoxTab3Ul li:hover {
  color: #000;
}

/* UnderSliderBox (END) */

/* Home Product */

.productSliderHomeMainRow {
  background-color: #f5f5f5;
  padding-top: 30px;
  padding-bottom: 30px;
}

.productSliderHomeHeader {
  width: 90%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid #c4956a;
  line-height: 1.5;
  margin-left: 10%;
  padding-right: 10px;
  padding-bottom: 30px;
}

.PSHH-maintitle {
  font-size: 30px;
}

.PSHH-maintext {
  width: 50%;
  /* margin-right: 20%; */
  font-size: 16px;
}

.productSliderHome {
  margin: 30px 0;
}

.latestArticleMainBox .owl-stage-outer,
.productSliderHome .owl-stage-outer {
  width: 100%;
  float: right;
  display: flex;
}

.latestArticleMainBox .owl-stage-outer .owl-stage,
.productSliderHome .owl-stage-outer .owl-stage {
  display: flex;
}

.productSliderHome .owl-nav {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  position: absolute;
  top: 50%;
  right: 5%;
}

.productSliderHome .owl-nav .owl-prev,
.productSliderHome .owl-nav .owl-next {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #ccc;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.5s ease;
  margin-bottom: 15px;
}

.latestArticleMainBox .owl-nav {
  width: 100%;
  display: flex;
  justify-content: center;
}

.latestArticleMainBox .owl-nav .owl-prev,
.latestArticleMainBox .owl-nav .owl-next {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  color: #111;
  border: 2px solid #ccc;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.5s ease;
  margin-bottom: 15px;
}

.productSliderHome .owl-nav .owl-prev:hover,
.productSliderHome .owl-nav .owl-next:hover {
  color: #c4956a;
}

.CC-bodyBox .owl-nav {
  width: 100%;
  position: static;
  flex-direction: row;
}

.CC-bodyBox .owl-nav .owl-prev {
  margin-left: 20px;
}

.pr_itm {
  width: 100%;
  float: right;
  position: relative;
}

.productCardHome {
  padding-right: 13%;
  padding-left: 20.7%;
}

.PCH-image {
  position: relative;
  overflow: hidden;
}

.PCH-image img {
  width: 100%;
}

.productSliderHome .owl-item.active .PCH-image img {
  box-shadow: -20px 30px 30px rgba(0, 0, 0, 0.15);
}

.PCH-BodyBox {
  width: 27%;
  /* min-height: 45%; */
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 3%;
  transform: translate3d(0, -50%, 0);
  transition: all 0.5s ease;
  border: 1px solid rgba(76, 76, 76, 0.5);
  opacity: 0;
  border-radius: 8px;
  padding: 45px 30px;
}

.PCH-BBDate {
  color: #111;
  margin-bottom: 15px;
}

.PCH-BBTitle {
  font-size: 18px;
  font-weight: bold;
  color: #12416f;
}

.PCH-BBText {
  line-height: 1.5;
  color: rgba(76, 76, 76, 0.5);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 15px;
}

.ProHomeMember .owl-stage {
  /* padding: 0 300px; */
}

.ProHomeMember .owl-item {
  filter: grayscale(100);
}

.ProHomeMember .owl-item.active {
  filter: grayscale(0);
}

.active .PCH-BodyBox {
  opacity: 1;
}

/* END Home Product */

/* ads section */

.adsSectionHome {
  background-image: url("../../upload/ads_bg.png");
  background-size: cover;
  background-attachment: fixed;
  padding-top: 30px;
  padding-bottom: 30px;
}

.adsSectionHome .container {
  display: flex;
  align-items: center;
  line-height: 1.5;
}

.adsSectionHomeRight img {
  transition: all 0.5s ease;
}

.adsSectionHomeRight:hover img {
  transform: rotate(15deg);
}

.ASH-leftTopHeader {
  font-size: 15px;
}

.ASH-leftHeader {
  font-weight: bold;
  font-size: 30px;
  margin: 20px 0;
}

.ASH-leftHeader div:nth-child(2) {
  color: red;
}

.ASH-leftMainText {
  font-size: 16px;
}

/* ads section (END) */

/* what says customers */

.WSC-cardHeader {
  width: 100%;
  float: right;
  position: relative;
  overflow: hidden;
  padding-top: 12px;
  padding-bottom: 32px;
}

.WSC-cardHeader img {
  width: 118px;
  height: 118px;
  border-radius: 50%;
  border: 0;
  transition: all 0.5s ease;
  margin: auto;
}

.WSC-cardHeader svg {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate3d(-50%, 0, 0);
}

.WSC-cardBody {
  width: 100%;
  float: right;
  text-align: center;
  background-color: #f7f7f7;
}

.WSC-cardBodyName {
  color: #4eb986;
}

/* what says customers (END) */

/* Accordion */
.tr-180deg {
  transform: rotate(180deg);
}

.accordionInHomePage {
  width: calc(100% + 30px);
  background-color: #f7f7f7;
  padding-top: 50px;
  padding-bottom: 50px;
  margin-top: 70px;
}

.accordionInHomePage-Title {
  text-align: center;
  font-size: 22px;
  margin: 20px 0;
}

.accordionInHomePage-Title img {
  margin-top: 20px;
}

.ACIP-Box {
  width: 100%;
  float: right;
  border: 1px solid #ebebeb;
  background-color: #fff;
  padding: 10px;
  margin-bottom: 10px;
}

.ACIP-Box:hover .ACIP-BoxHeader div:nth-child(1) {
  color: #cc6b7c;
}

.ACIP-BoxHeader {
  display: flex;
  justify-content: space-between;
  cursor: pointer;
  padding: 10px;
}

.ACIP-BoxHeader div:nth-child(1) {
  transition: all 0.5s ease;
}

.ACIP-BoxHeader div:nth-child(2) {
  transition: all 0.5s ease;
  color: #cc6b7c;
}

.ACIP-BoxBody {
  display: none;
  padding: 0 10px;
  margin-top: 20px;
}

.ACIP-BoxBody.active {
  display: block;
}

.ACIP-BoxBodyRight {
  width: 40%;
  float: right;
}

.ACIP-BoxBodyRight img {
  width: 100%;
}

.ACIP-BoxBodyLeft {
  width: 60%;
  float: right;
  line-height: 1.5;
  padding-right: 10px;
}

.ACIP-BoxBodyLeftText {
  text-align: justify;
}

.ACIP-BoxBodyLeftDetail {
  margin: 15px 0 25px 0;
}

.ACIP-BoxBodyLeftDetailMenu span:nth-child(1) {
  color: #cc6b7c;
}

.ACIP-BoxBodyLeftBtn {
  width: 150px;
  background-color: #cc6b7c;
  color: #fff;
  cursor: pointer;
  text-align: center;
  transition: all 0.5s ease;
  padding: 11px 22px;
}

.ACIP-BoxBodyLeftBtn:hover {
  background-color: #c1a091;
  border-color: #c1a091;
}

/* END Accordion */

/* Latest Article */

.LA-MainBox {
  width: 100% !important;
}

.LA-headerBox {
  width: 100%;
  float: right;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #000;
  padding: 20px 0;
  margin: 40px 0 20px;
}

.LA-headerBox::before {
  content: "";
  width: 30px;
  height: 2px;
  background-color: var(--LAColor);
  position: absolute;
  top: 0;
}

.LA-headerBoxTitle {
  font-size: 22px;
}

.LA-cardBox {
  min-height: 420px;
  margin-bottom: 15px;
}

.LA-cardBox .leftBoxLatest .abstract {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.LA-Image {
  width: 100%;
  float: right;
  overflow: hidden;
}

.LA-Image img {
  width: 100%;
  transition: all 0.5s ease;
}

.LA-cardBox:hover img {
  transform: scale(1.1);
}

.LA-title {
  width: 100%;
  float: right;
  font-weight: 900;
  font-size: 25px;
  line-height: 1.5;
  color: #000;
  transition: all 0.5s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 15px 0;
}

.LA-title:hover {
  color: var(--LAColor);
}

.LA-btnShowOtherMain {
  width: 100%;
  float: right;
}

.LA-btnShowOther {
  width: 190px;
  color: #fff;
  background-color: #222931;
  transition: all 0.5s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 22px;
  margin: 20px auto;
}

.LA-btnShowOther span:nth-child(2) {
  color: var(--LAColor);
  font-size: 15px;
  transition: all 0.5s ease;
  margin-right: 10px;
}

.LA-btnShowOther:hover {
  background-color: var(--LAColor);
}

.LA-btnShowOther:hover span:nth-child(2) {
  color: #fff;
}

.LA-cardBox p.date {
  float: right;
}

.LA-readMorebtn {
  float: left;
  color: var(--LAColor);
}

/* END Latest Artivle */

/* customer comment */

.customerComment {
  margin-top: 30px;
}

.CC-headerBox {
  width: 100%;
  float: right;
  text-align: center;
  font-size: 25px;
  margin: 20px 0 100px 0;
}

.CC-bodyBox {
  margin-top: 60px;
}

/* .CC-bodyBox .owl-item.active{
    filter: grayscale(100);
}

.CC-bodyBox .owl-item{
    filter: grayscale(0);
} */

.CC-bodyBox .slick-list {
  width: 100%;
  float: right;
  position: sticky;
}

.CC-cardBox {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  /* border: 3px solid #f2f3f8; */
  background-color: #fff;
  line-height: 1.5;
  padding: 15px;
  margin: 0 0.5%;
}

.CC-cardBoxChild {
  width: 100%;
  border: 3px solid #f2f3f8;
  transition: all 0.5s ease;
  padding: 25px;
}

.CC-cardBoxImage {
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  /* position: absolute; */
  /* top: -60px; */
}
/* 
.CC-cardBoxImage::before{
    content: "";
    width: 35%;
    height: 3px;
    position: absolute;
    top: 65%;
    right: 0;
    background-color: #f2f3f8;
    transition: all .5s ease;
}

.CC-cardBoxImage::after{
    content: "";
    width: 35%;
    height: 3px;
    position: absolute;
    top: 65%;
    left: 0;
    background-color: #f2f3f8;
    transition: all .5s ease;
} */

.CC-cardBoxImage img {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  position: relative;
  z-index: 2;
  box-shadow: 0 4px 7px 0 rgba(0, 0, 0, 0.09);
}

.CC-cardBoxExplain {
  color: #c4c4c4;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 20px 0;
}

.CC-cardBoxFooter {
  width: 100%;
  text-align: center;
}

.CC-cardBox:hover .CC-cardBoxImage::before,
.CC-cardBox:hover .CC-cardBoxImage::after {
  width: 50%;
}

.CC-cardBoxChild:hover {
  background-color: rgb(22, 21, 21);
}

.CC-cardBoxChild:hover .CC-cardBoxFooterName {
  color: #fff;
}

/* END customer comment */

/* Footer */

.titleInFooter,
.titleInFooter a {
  color: #fff;
}

.addressInFooter,
.callInFooter,
.emailInFooter {
  display: flex;
  align-items: center;
  line-height: 1.5;
  color: var(--footerMenu);
  margin-top: 10px;
}

.callInFooter a,
.emailInFooter a {
  color: var(--footerMenu);
}

.addressInFooter i,
.callInFooter i,
.emailInFooter i {
  color: var(--footerIcon);
  margin-left: 10px;
}

.socialInFooterMain {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
}

.socialInFooterMain hr {
  width: 100%;
  border-bottom: 1px solid var(--footerMenu);
}

.socialInFooter {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.socialDivInFooter {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.3);
  color: var(--footerMenu);
  border-radius: 50%;
  transition: all 0.5s ease;
  margin-right: 10px;
}

.socialDivInFooter a {
  color: var(--footerMenu);
}

.socialDivInFooter:hover {
  background-color: var(--footerMenuHover);
}

/* END Footer */

/* Responsive */

@media screen and (max-width: 999px) {
  #headerMenuTool {
    width: calc(100% + 30px);
  }

  #headerMenuTool.stickyMenu {
    width: 100%;
  }
  li.menuClass1:hover > ul {
    display: none;
  }

  #mySidenav ul .menuClass1 ul {
    background-color: #fff;
  }

  #mySidenav ul .menuClass1 ul a {
    background-color: #fff;
    font-size: 15;
    color: #000;
    font-weight: 100;
  }

  #mySidenav ul .menuClass1 ul li {
    border-bottom: 1px solid #ccc;
    transition: all 0.5s ease;
    padding-right: 10px;
  }

  #mySidenav ul .menuClass1 ul li:hover {
    background-color: #ccc;
  }
  .resMenuBTN {
    display: block;
  }

  .adsSectionHome .container {
    flex-direction: column-reverse;
  }

  .adsSectionHomeLeft {
    margin-bottom: 20px;
  }

  .mainSearchBoxShow {
    width: 100%;
  }

  #headerMenuTool .container {
    justify-content: space-between;
  }

  #headerMenuTool .container::before,
  #headerMenuTool .container::after {
    content: unset;
  }

  .UnderSliderBox .container {
    flex-direction: column;
    margin: 0 -30px;
  }

  .US-LeftBoxTab2 {
    flex-direction: column;
  }

  .US-LeftBoxTab2Card {
    margin-bottom: 30px;
  }

  .US-LeftBoxTab3Ul {
    flex-direction: column;
  }

  .productSliderHomeHeader {
    flex-direction: column;
  }

  .PSHH-maintext {
    width: 100%;
  }

  .ACIP-BoxBodyRight {
    width: 100%;
  }

  .ACIP-BoxBodyLeft {
    width: 100%;
    padding-right: 0;
    margin-top: 20px;
  }

  .CC-cardBox {
    width: 100%;
    /* margin: 0 0 90px 0; */
  }

  .LA-cardBox {
    margin-bottom: 20px;
  }

  .productCardHome {
    padding: 0;
  }

  .PCH-BodyBox {
    width: 100%;
    position: static;
    transform: unset;
    border-radius: 0;
    opacity: 1;
  }

  .productSliderHome .owl-nav {
    display: none;
  }

  .CC-bodyBox .owl-nav {
    display: flex;
  }

  .productSliderHome .owl-dots {
    width: 100%;
    float: right;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0;
  }

  .productSliderHome .owl-dot {
    width: 15px;
    height: 15px;
    position: relative;
    background-color: #ccc;
    border-radius: 50%;
    transition: all 0.5s ease;
    margin: 0 5px;
  }

  .productSliderHome .owl-dot.active {
    background-color: #c4956a;
  }

  .CC-bodyBox .owl-dots {
    display: none;
  }

  .navigation {
    margin-bottom: 20px;
  }

  .navigation ul li {
    width: 100%;
  }

  .navigation ul li a span {
    border-bottom: 1px solid;
    border-radius: 0;
  }

  #slider {
    height: 550px;
    overflow: unset;
  }

  .swiper-navigation__module {
    display: none;
  }

  .itemSlider {
    height: auto;
  }

  .itemSlider img {
    height: auto;
  }

  .itemSliderCaption {
    width: 100%;
    height: auto;
    position: static;
    padding-top: 25px;
  }

  .footerBox {
    margin-bottom: 30px;
  }

  .socialInFooterMain {
    margin: 20px 0;
  }

  .socialInFooter a:last-child .socialDivInFooter {
    margin-left: 10px;
  }

  .rvkp {
    text-align: center;
    margin: 20px 0;
  }
}

/* END Responsive */