/* color */
/* font */
/* transition */
.serviceItem .textBox, .serviceList.album .serviceItem .imgBox:after, .serviceList.album .serviceItem .imgBox:before, .photoViewer, .photoViewer .closeBtn, .photoViewer .swiper-button-prev,
.photoViewer .swiper-button-next {
  transition: all 0.5s ease-in-out; }

@keyframes rotate {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

.serviceItem {
  position: relative;
  width: calc((100% - 40px) / 3);
  margin-bottom: 20px; }
  @media (max-width: 640px) {
    .serviceItem {
      width: 100%; } }
  @media (min-width: 1181px) {
    .serviceItem:hover .textBox {
      opacity: 1; } }
  .serviceItem .link {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1; }
  .serviceItem .imgBox {
    font-size: 0; }
    .serviceItem .imgBox img {
      width: 100%;
      height: auto;
      display: block; }
  .serviceItem .textBox {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50%;
    background: rgba(241, 232, 216, 0.8);
    opacity: 0; }
    @media (max-width: 1180px) {
      .serviceItem .textBox {
        opacity: 1; } }
    .serviceItem .textBox:before {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      pointer-events: none;
      background-image: url("../assets/images/service-top.png");
      background-position: left top;
      background-repeat: no-repeat;
      background-size: 78px;
      left: 0;
      top: 0; }
      @media (max-width: 1024px) {
        .serviceItem .textBox:before {
          display: none; } }
    .serviceItem .textBox:after {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      pointer-events: none;
      background-image: url("../assets/images/service-bottom.png");
      background-position: right bottom;
      background-repeat: no-repeat;
      background-size: 66px;
      left: 0;
      top: 0; }
      @media (max-width: 1024px) {
        .serviceItem .textBox:after {
          display: none; } }
    .serviceItem .textBox .title {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      color: #6f2517;
      font-weight: 700; }
      @media (max-width: 1024px) {
        .serviceItem .textBox .title {
          font-size: 18px; } }

.topBox {
  margin-bottom: 50px; }
  .topBox .title {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 2.88px;
    color: #6f2517;
    margin-bottom: 20px; }

.serviceList.album .serviceItem {
  cursor: pointer; }
  @media (min-width: 1181px) {
    .serviceList.album .serviceItem:hover .imgBox:before {
      content: "";
      position: absolute;
      opacity: 1; }
    .serviceList.album .serviceItem:hover .imgBox:after {
      content: "";
      position: absolute;
      opacity: 1; } }
  .serviceList.album .serviceItem .imgBox:after {
    content: "";
    position: absolute;
    width: calc(100% - 40px);
    height: calc(100% - 40px);
    background: rgba(241, 232, 216, 0.8);
    left: 20px;
    top: 20px;
    z-index: 1;
    opacity: 0;
    pointer-events: none; }
  .serviceList.album .serviceItem .imgBox:before {
    content: "";
    position: absolute;
    width: 40px;
    height: 40px;
    background-image: url("../assets/images/icon-zoom.png");
    background-size: contain;
    background-repeat: no-repeat;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    opacity: 0;
    pointer-events: none; }

.photoViewer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(241, 232, 216, 0.9);
  z-index: 98;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden; }
  .photoViewer.active {
    opacity: 1;
    visibility: visible; }
  .photoViewer .viewerBox {
    position: relative;
    width: 90%;
    max-width: 900px;
    height: 80%;
    display: flex;
    align-items: center;
    justify-content: center; }
  .photoViewer .closeBtn {
    position: absolute;
    top: 30px;
    right: 0;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 10; }
    .photoViewer .closeBtn:hover {
      transform: rotate(90deg); }
    .photoViewer .closeBtn img {
      width: 100%;
      height: 100%;
      object-fit: contain; }
  .photoViewer .viewerSwiper {
    width: 100%;
    height: 100%; }
    .photoViewer .viewerSwiper .swiper-slide {
      display: flex;
      align-items: center;
      justify-content: center; }
    .photoViewer .viewerSwiper .slideImgBox {
      max-width: 100%;
      max-height: 100%;
      display: flex;
      align-items: center;
      justify-content: center; }
      .photoViewer .viewerSwiper .slideImgBox img {
        max-width: 100%;
        max-height: 80vh;
        object-fit: contain;
        border-radius: 4px; }
  .photoViewer .swiper-button-prev,
  .photoViewer .swiper-button-next {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%; }
    .photoViewer .swiper-button-prev:hover,
    .photoViewer .swiper-button-next:hover {
      background: rgba(255, 255, 255, 0.4); }
    .photoViewer .swiper-button-prev::after,
    .photoViewer .swiper-button-next::after {
      font-size: 20px;
      color: #6f2517;
      font-weight: bold; }
  .photoViewer .swiper-button-prev {
    left: -60px; }
    @media (max-width: 1200px) {
      .photoViewer .swiper-button-prev {
        left: 10px; } }
  .photoViewer .swiper-button-next {
    right: -60px; }
    @media (max-width: 1200px) {
      .photoViewer .swiper-button-next {
        right: 10px; } }
  .photoViewer .swiper-button-disabled {
    opacity: 0.3;
    cursor: not-allowed; }
    .photoViewer .swiper-button-disabled:hover {
      background: rgba(255, 255, 255, 0.2); }

.btnBox {
  margin-top: 85px;
  text-align: center; }