:root {
  --theme-black: #242424;
  --theme-white: #fff;
  --theme-light-gray: #f2f2f2;
  --theme-gray: #787878;
  --theme-dark-gray: #313131;
  --theme-baige: #fad7aa;
  --theme-red: #eb4632;
  --theme-blue: #0869DB;
  --theme-green: #c8e6cd;
  --theme-grege: #dccdbe;
  --theme-main-text: var(--theme-black);
  --theme-sub-text: var(--theme-gray);
  --theme-main: var(--theme-baige);
  --theme-accent: var(--theme-red);
  --theme-base: var(--theme-white);
  --theme-base-light-gray: var(--theme-light-gray);
  --theme-base-dark-grey: #606060;
  --theme-base-black: var(--theme-black);
  --theme-border: var(--theme-dark-gray);
  --theme-icon: #ababab;
}

/* ===============================================
# MARK: swiper customize
=============================================== */

.p-topWorks__container,
.c-serviceWorksSection__container,
.p-worksSingleOther__worksInner {
  position: relative;
  z-index: 0;
  /* modifier */
  /* hover */
}

.p-topWorks__container .swiper-button-next.swiper-button-disabled,
.p-topWorks__container .swiper-button-prev.swiper-button-disabled,
.c-serviceWorksSection__container .swiper-button-next.swiper-button-disabled,
.c-serviceWorksSection__container .swiper-button-prev.swiper-button-disabled,
.p-worksSingleOther__worksInner .swiper-button-next.swiper-button-disabled,
.p-worksSingleOther__worksInner .swiper-button-prev.swiper-button-disabled {
  opacity: 1;
  color: var(--theme-icon);
}

.p-topWorks__container .swiper-button-prev,
.p-topWorks__container .swiper-button-next,
.c-serviceWorksSection__container .swiper-button-prev,
.c-serviceWorksSection__container .swiper-button-next,
.p-worksSingleOther__worksInner .swiper-button-prev,
.p-worksSingleOther__worksInner .swiper-button-next {
  position: absolute;
  z-index: 0;
  display: block;
  left: unset;
  right: unset;
  margin: 0;
  width: auto;
  height: auto;
  -webkit-transition: color var(--hover-transition), background-color var(--hover-transition), opacity var(--hover-transition);
  transition: color var(--hover-transition), background-color var(--hover-transition), opacity var(--hover-transition);
  color: var(--theme-main-text);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
}

.p-topWorks__container .swiper-button-prev span,
.p-topWorks__container .swiper-button-next span,
.c-serviceWorksSection__container .swiper-button-prev span,
.c-serviceWorksSection__container .swiper-button-next span,
.p-worksSingleOther__worksInner .swiper-button-prev span,
.p-worksSingleOther__worksInner .swiper-button-next span {
  display: block;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 0.0625rem solid currentColor;
  position: relative;
  z-index: 0;
  overflow: hidden;
  -webkit-transition: background-color var(--hover-transition);
  transition: background-color var(--hover-transition);
}

.p-topWorks__container .swiper-button-prev span::before,
.p-topWorks__container .swiper-button-prev span::after,
.p-topWorks__container .swiper-button-next span::before,
.p-topWorks__container .swiper-button-next span::after,
.c-serviceWorksSection__container .swiper-button-prev span::before,
.c-serviceWorksSection__container .swiper-button-prev span::after,
.c-serviceWorksSection__container .swiper-button-next span::before,
.c-serviceWorksSection__container .swiper-button-next span::after,
.p-worksSingleOther__worksInner .swiper-button-prev span::before,
.p-worksSingleOther__worksInner .swiper-button-prev span::after,
.p-worksSingleOther__worksInner .swiper-button-next span::before,
.p-worksSingleOther__worksInner .swiper-button-next span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 1;
  display: block;
  width: 1rem;
  height: 1rem;
  background-color: currentColor;
  -webkit-mask: url(icon_arrow.svg) no-repeat center/contain;
          mask: url(icon_arrow.svg) no-repeat center/contain;
  -webkit-transition: opacity var(--hover-transition), visibility var(--hover-transition), -webkit-transform var(--hover-transition);
  transition: opacity var(--hover-transition), visibility var(--hover-transition), -webkit-transform var(--hover-transition);
  transition: opacity var(--hover-transition), visibility var(--hover-transition), transform var(--hover-transition);
  transition: opacity var(--hover-transition), visibility var(--hover-transition), transform var(--hover-transition), -webkit-transform var(--hover-transition);
}

.p-topWorks__container .swiper-button-prev span::after,
.p-topWorks__container .swiper-button-next span::after,
.c-serviceWorksSection__container .swiper-button-prev span::after,
.c-serviceWorksSection__container .swiper-button-next span::after,
.p-worksSingleOther__worksInner .swiper-button-prev span::after,
.p-worksSingleOther__worksInner .swiper-button-next span::after {
  background-color: var(--theme-main);
  -webkit-transform: translate(calc(-50% - 2.25rem), -50%);
          transform: translate(calc(-50% - 2.25rem), -50%);
}

.p-topWorks__container .swiper-button-prev::after,
.p-topWorks__container .swiper-button-next::after,
.c-serviceWorksSection__container .swiper-button-prev::after,
.c-serviceWorksSection__container .swiper-button-next::after,
.p-worksSingleOther__worksInner .swiper-button-prev::after,
.p-worksSingleOther__worksInner .swiper-button-next::after {
  content: "";
  display: none;
}

.p-topWorks__container .swiper-button-prev,
.c-serviceWorksSection__container .swiper-button-prev,
.p-worksSingleOther__worksInner .swiper-button-prev {
  right: 3.375rem;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}

.p-topWorks__container .swiper-button-prev span,
.c-serviceWorksSection__container .swiper-button-prev span,
.p-worksSingleOther__worksInner .swiper-button-prev span {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.p-topWorks__container .swiper-button-next,
.c-serviceWorksSection__container .swiper-button-next,
.p-worksSingleOther__worksInner .swiper-button-next {
  right: 0;
}

.p-topWorks__container .swiper {
  overflow: visible;
}

.p-topWorks__container .swiper-button-prev,
.p-topWorks__container .swiper-button-next {
  top: 2.5rem;
}

.c-serviceWorksSection__container.swiper {
  overflow: visible;
}

.c-serviceWorksSection__container .swiper-button-prev,
.c-serviceWorksSection__container .swiper-button-next {
  top: 6.75rem;
}

.p-worksSingleOther__worksInner.swiper {
  overflow: visible;
}

.p-worksSingleOther__worksInner .swiper-button-prev {
  top: 3.25rem;
  right: unset;
  left: 20px;
}

.p-worksSingleOther__worksInner .swiper-button-next {
  top: 3.25rem;
  right: 20px;
}

@media screen and (min-width: 768px) {
  .p-topWorks__container .swiper-button-prev,
  .p-topWorks__container .swiper-button-next {
    top: 1.25rem;
  }
}

@media (hover: hover) {
  .p-topWorks__container .swiper-button-prev:hover span,
  .p-topWorks__container .swiper-button-next:hover span,
  .c-serviceWorksSection__container .swiper-button-prev:hover span,
  .c-serviceWorksSection__container .swiper-button-next:hover span,
  .p-worksSingleOther__worksInner .swiper-button-prev:hover span,
  .p-worksSingleOther__worksInner .swiper-button-next:hover span {
    background-color: var(--theme-black);
  }

  .p-topWorks__container .swiper-button-prev:hover span::before,
  .p-topWorks__container .swiper-button-next:hover span::before,
  .c-serviceWorksSection__container .swiper-button-prev:hover span::before,
  .c-serviceWorksSection__container .swiper-button-next:hover span::before,
  .p-worksSingleOther__worksInner .swiper-button-prev:hover span::before,
  .p-worksSingleOther__worksInner .swiper-button-next:hover span::before {
    -webkit-transform: translate(calc(-50% + 2.25rem), -50%);
            transform: translate(calc(-50% + 2.25rem), -50%);
  }

  .p-topWorks__container .swiper-button-prev:hover span::after,
  .p-topWorks__container .swiper-button-next:hover span::after,
  .c-serviceWorksSection__container .swiper-button-prev:hover span::after,
  .c-serviceWorksSection__container .swiper-button-next:hover span::after,
  .p-worksSingleOther__worksInner .swiper-button-prev:hover span::after,
  .p-worksSingleOther__worksInner .swiper-button-next:hover span::after {
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
}