/* ******************************
 *
 * RESPONSIVE MIXIN
 *
 * ****************************** */
/* ******************************
 *
 * FONT SETTINGS
 *
 * ****************************** */
@font-face {
  font-family: "tanpearl";
  src: url("../fonts/TAN-PEARL.otf") format("opentype"), url("../fonts/TAN-PEARL.ttf") format("truetype"), url("../fonts/TAN-PEARL.woff") format("woff"), url("../fonts/TAN-PEARL.woff2") format("woff2");
}
/* ******************************
 *
 * FONT SETTINGS
 *
 * ****************************** */
/* ******************************
 *
 * MIXIN
 *
 * ****************************** */
/* ******************************
 *
 * KEYFRAMES
 *
 * ****************************** */
@-webkit-keyframes loopCl {
  from {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}
@keyframes loopCl {
  from {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}
@-webkit-keyframes loopRotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes loopRotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.topCases {
  position: relative;
}
@media screen and (min-width: 320px) {
  .topCases {
    margin-top: 10rem;
  }
}
@media screen and (min-width: 600px) {
  .topCases {
    margin-top: 15rem;
  }
}
@media screen and (min-width: 1025px) {
  .topCases {
    margin-top: 25rem;
  }
}

.topCasesInner {
  margin: 0 auto;
}
@media screen and (min-width: 320px) {
  .topCasesInner {
    padding: 0 5vw;
    text-align: center;
  }
}
@media screen and (min-width: 600px) {
  .topCasesInner {
    padding: 0 5vw;
    text-align: left;
  }
}
@media screen and (min-width: 1025px) {
  .topCasesInner {
    padding: 0 5vw;
  }
}

.topCases h2 {
  color: #cc1637;
  font-family: "oswald", sans-serif;
  font-weight: 800;
}
@media screen and (min-width: 320px) {
  .topCases h2 {
    font-size: 8rem;
    line-height: 5.5rem;
  }
}
@media screen and (min-width: 600px) {
  .topCases h2 {
    font-size: 10rem;
    line-height: 12rem;
  }
}
@media screen and (min-width: 1025px) {
  .topCases h2 {
    font-size: 24rem;
    line-height: 12rem;
  }
}
.topCases h2 span {
  font-weight: 800;
  color: black;
}
@media screen and (min-width: 320px) {
  .topCases h2 span {
    font-size: 2.4rem;
    padding: 0 0 0 5vw;
  }
}
@media screen and (min-width: 600px) {
  .topCases h2 span {
    font-size: 4.4rem;
    padding: 0 0 0 5vw;
  }
}
@media screen and (min-width: 1025px) {
  .topCases h2 span {
    font-size: 5.4rem;
    padding: 0 0 0 5vw;
  }
}

.topCases p {
  font-weight: 800;
  line-height: 1.5;
}
@media screen and (min-width: 320px) {
  .topCases p {
    font-size: 2rem;
    padding: 2rem 0 0 5vw;
  }
}
@media screen and (min-width: 600px) {
  .topCases p {
    font-size: 2.5rem;
    padding: 3rem 0 0 5vw;
  }
}
@media screen and (min-width: 1025px) {
  .topCases p {
    font-size: 3rem;
    padding: 3rem 0 0 5vw;
  }
}

@media screen and (min-width: 320px) {
  .casesSlider {
    padding: 64px 0;
  }
}
@media screen and (min-width: 600px) {
  .casesSlider {
    padding: 64px 0;
  }
}

.casesSliderText {
  margin-top: 16px;
}
.casesSliderText .title, .casesSliderText .company {
  font-weight: 700;
}
@media screen and (min-width: 320px) {
  .casesSliderText .title {
    font-size: 2.4rem;
  }
}
@media screen and (min-width: 600px) {
  .casesSliderText .title {
    font-size: 2.4rem;
  }
}
.casesSliderText .company {
  margin-bottom: 8px;
}
@media screen and (min-width: 320px) {
  .casesSliderText .company {
    font-size: 1.8rem;
  }
}
@media screen and (min-width: 600px) {
  .casesSliderText .company {
    font-size: 1.8rem;
  }
}
.casesSliderText .content {
  opacity: 0.8;
}
@media screen and (min-width: 320px) {
  .casesSliderText .content {
    font-size: 1.6rem;
  }
}
@media screen and (min-width: 600px) {
  .casesSliderText .content {
    font-size: 1.6rem;
  }
}
.casesSliderText .tag {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
  margin-top: 24px;
  opacity: 0.6;
}
@media screen and (min-width: 320px) {
  .casesSliderText .tag {
    font-size: 1.4rem;
  }
}
@media screen and (min-width: 600px) {
  .casesSliderText .tag {
    font-size: 1.4rem;
  }
}
.casesSliderText .tag li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 4px;
}
.casesSliderText .tag li::before {
  content: "#";
}

.caseSliderPagenation {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media screen and (min-width: 320px) {
  .caseSliderPagenation {
    padding: 64px 0 0;
    gap: 16px;
  }
}
@media screen and (min-width: 600px) {
  .caseSliderPagenation {
    padding: 64px 0 0;
    gap: 16px;
  }
}
.caseSliderPagenation .swiper-pagination-bullet {
  position: relative;
  z-index: 1;
  font-family: "oswald", sans-serif;
  font-weight: 700;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: auto;
  height: auto;
  margin: 0 !important;
  background: transparent;
  -webkit-transition: -webkit-filter 400ms ease;
  transition: -webkit-filter 400ms ease;
  transition: filter 400ms ease;
  transition: filter 400ms ease, -webkit-filter 400ms ease;
}
@media screen and (min-width: 320px) {
  .caseSliderPagenation .swiper-pagination-bullet {
    font-size: 3.2rem;
  }
}
@media screen and (min-width: 600px) {
  .caseSliderPagenation .swiper-pagination-bullet {
    font-size: 3.2rem;
  }
}
.caseSliderPagenation .swiper-pagination-bullet.swiper-pagination-bullet-active {
  color: #cc1637;
  -webkit-filter: opacity(1) !important;
          filter: opacity(1) !important;
}
.caseSliderPagenation .swiper-pagination-bullet:hover {
  -webkit-filter: opacity(0.5);
          filter: opacity(0.5);
}

.caseSliderButtons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transform: translateY(-80%);
          transform: translateY(-80%);
}
@media screen and (min-width: 320px) {
  .caseSliderButtons {
    padding: 0 25%;
  }
}
@media screen and (min-width: 600px) {
  .caseSliderButtons {
    padding: 0 25%;
  }
}

.caseSliderButton {
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border: none;
  border-radius: 50%;
  background: #cc1637;
  outline: none;
  -webkit-transition: opacity 400ms ease;
  transition: opacity 400ms ease;
}
@media screen and (min-width: 320px) {
  .caseSliderButton {
    width: 5.4rem;
    height: 5.4rem;
  }
}
@media screen and (min-width: 600px) {
  .caseSliderButton {
    width: 5.4rem;
    height: 5.4rem;
  }
}
.caseSliderButton:hover {
  opacity: 0.6;
}
.caseSliderButton svg {
  display: block;
  width: 45%;
  height: 45%;
}/*# sourceMappingURL=case.css.map */