:root {

  --tp-common-px-white: #FFFFFF;
  --tp-common-px-black: #0A0A0A;
  --tp-common-px-black-2: #1E1E1E;
  --tp-common-px-red: #E11010;
  --tp-common-px-orange: #FF471D;
  --tp-common-px-orange-dark: #FF572D;
  --tp-grey-px-1: #F6F7F9;
  --tp-text-px-body: #6D6868;
  --tp-theme-px-1: #FF5E00;
  --tp-border-px-1: #EAEBED;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


/*---------------------------------
    1.2 Common Classes
---------------------------------*/
.w-img img {
  width: 100%;
}

.m-img img {
  max-width: 100%;
}

.fix {
  overflow: hidden;
}

.clear {
  clear: both;
}

.z-index-1 {
  position: relative;
  z-index: 1;
}

.z-index-2 {
  position: relative;
  z-index: 2;
}

.z-index-3 {
  position: relative;
  z-index: 3;
}

.z-index-4 {
  position: relative;
  z-index: 4;
}

.z-index-5 {
  position: relative;
  z-index: 5;
}

.z-index-6 {
  position: relative;
  z-index: 6;
}

.z-index-7 {
  position: relative;
  z-index: 7;
}

.z-index-8 {
  position: relative;
  z-index: 8;
}

.z-index-9 {
  position: relative;
  z-index: 9;
}

.z-index-10 {
  position: relative;
  z-index: 10;
}

.gx-5 {
  --bs-gutter-x: 5px;
}

.gx-10 {
  --bs-gutter-x: 10px;
}

.gx-20 {
  --bs-gutter-x: 20px;
}

.gx-30 {
  --bs-gutter-x: 30px;
}

.gx-40 {
  --bs-gutter-x: 40px;
}

.gx-45 {
  --bs-gutter-x: 45px;
}

.gx-50 {
  --bs-gutter-x: 50px;
}

.gx-60 {
  --bs-gutter-x: 60px;
}

.gx-70 {
  --bs-gutter-x: 70px;
}

.gx-80 {
  --bs-gutter-x: 80px;
}

.gx-90 {
  --bs-gutter-x: 90px;
}

.gx-100 {
  --bs-gutter-x: 100px;
}

.overflow-y-visible {
  overflow-x: hidden;
  overflow-y: visible;
}

.p-relative {
  position: relative;
}

.p-absolute {
  position: absolute;
}

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

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .mx-show2-area {
    padding-top: 40px;
  }
}
.mx-show2-title {
  font-size: 100px;
  font-weight: 600;
  margin-bottom: 0;
  color: #d3d3d3;
  transition: 0.3s;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  padding: 10px 0px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .mx-show2-title {
    font-size: 90px;
  }
}
@media (max-width: 767px) {
  .mx-show2-title {
    font-size: 65px;
  }
}
.mx-show2-content span {
  padding-top: 15px;
  padding-right: 10px;
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  transition: 0.3s;
  color: #d3d3d3;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.mx-show2-content p {
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
  color: #d3d3d3;
  transition: 0.3s;
  letter-spacing: -0.01em;
}
.mx-show2-item {
  padding: 70px 0 30px 0;
  border-bottom: 1px dashed rgba(30, 30, 30, 0.09);
}
.mx-show2-item.is-active .mx-show2-content span, .mx-show2-item.is-active .mx-show2-content p {
  color: var(--tp-common-px-black);
}
.mx-show2-item.is-active .mx-show2-title {
  color: var(--tp-common-px-black);
}
.mx-show2-item.is-active .px-project-inner-wrap-content span {
  color: var(--tp-common-px-black);
}
.mx-show2-img-wrap {
  width: 330px;
  height: 330px;
  opacity: 0;
  position: absolute;
  overflow: hidden;
  transform: translate(-50%, -50%);
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 3;
}
.mx-show2-img-slider {
  display: flex;
  flex-direction: column;
}
.mx-show2-img-slider img {
  width: 330px;
  height: 330px;
  object-fit: cover;
  object-position: center;
}