/* ********************** */
/* PROFESSIONAL SERIES SECTION */
/* ********************** */
.professional-series {
  padding-top: calc(100vw * 266 / 1920);
  gap: calc(100vw * 43 / 1920);
}

.professional-series-box {
  gap: calc(100vw * 66 / 1920);
}

.professional-content-box {
  width: 100%;
}

.professional-content {
  width: calc(100vw * 807 / 1920);
  font-size: calc(100vw * 16 / 1920);
  letter-spacing: calc(100vw * 1 / 1920);
    line-height: calc(100vw * 28 / 1920);
}

.professional-container {
    position: relative;
}

.professional-img-box {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.professional-img-container {
    height: calc(100vw * 552 / 1920);
    gap: calc(100vw * 72 / 1920);
    position: relative;
    transition: left 0.6s;
    left: 0;
}

.professional-img {
  width: calc(100vw * 368 / 1920);
  cursor: url("../img/logo/zoom-in-regular-24.png"), zoom-in;
}

.professinal-btn {
  position: absolute;
  width: calc(100vw * 44 / 1920);
  top: 50%;
  cursor: pointer;
}

/* ********************** */
/* UNIFORM SERIES SECTION */
/* ********************** */
.uniform-series {
  margin-top: calc(100vw * 148 / 1920);
  gap: calc(100vw * 43 / 1920);
}

.uniform-series-box {
  gap: calc(100vw * 66 / 1920);
}

.uniform-content-box {
  width: 100%;
}

.uniform-content {
  width: calc(100vw * 807 / 1920);
  font-size: calc(100vw * 16 / 1920);
  letter-spacing: calc(100vw * 1 / 1920);
    line-height: calc(100vw * 28 / 1920);
}

.uniform-container {
    position: relative;
}

.uniform-img-box {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.uniform-img-container {
    height: calc(100vw * 572 / 1920);
    gap: calc(100vw * 72 / 1920);
    position: relative;
    transition: left 0.6s;
    left: 0;
}

.uniform-img {
  width: calc(100vw * 368 / 1920);
  cursor: url("../img/logo/zoom-in-regular-24.png"), zoom-in;
}

.uniform-btn {
  position: absolute;
  width: calc(100vw * 44 / 1920);
  top: 50%;
  cursor: pointer;
}

/* ********************** */
/* THE SUITY 3 SECTION */
/* ********************** */
.suity-3 {
  margin-top: calc(100vw * 129 / 1920);
  gap: calc(100vw * 43 / 1920);
}

.container-header.suity-3-header {
  height: calc(100vw * 126 / 1920);
}

.suity-3-logo {
  height: 100%;
}

.suity-box {
  gap: calc(100vw * 66 / 1920);
}

.suity-content-box {
  width: 100%;
}

.suity-content {
  width: calc(100vw * 807 / 1920);
  font-size: calc(100vw * 16 / 1920);
  line-height: calc(100vw * 28 / 1920);
}

.suity-content-gap {
  margin-top: calc(100vw * 20 / 1920);
}

.suity-container {
    position: relative;
}

.suity-img-box {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.suity-img-container {
    height: calc(100vw * 572 / 1920);
    gap: calc(100vw * 72 / 1920);
    position: relative;
    transition: left 0.6s;
    left: 0;
}
.suity-img {
  width: calc(100vw * 368 / 1920);
  cursor: url("../img/logo/zoom-in-regular-24.png"), zoom-in;
}

.suity-btn {
  position: absolute;
  width: calc(100vw * 44 / 1920);
  top: 50%;
  cursor: pointer;
}

/* ********************** */
/* RETAIL SERIES SECTION */
/* ********************** */
.retail-series {
  margin-top: calc(100vw * 138 / 1920);
  margin-bottom: calc(100vw * 100 / 1920);
  gap: calc(100vw * 43 / 1920);
}

.retail-series-box {
  gap: calc(100vw * 66 / 1920);
}

.retail-content-box {
  width: 100%;
}

.retail-content {
  width: calc(100vw * 807 / 1920);
  font-size: calc(100vw * 16 / 1920);
  letter-spacing: calc(100vw * 1 / 1920);
    line-height: calc(100vw * 28 / 1920);
}

.retail-container {
    position: relative;
}

.retail-img-box {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.retail-img-container {
    height: calc(100vw * 539 / 1920);
    gap: calc(100vw * 72 / 1920);
    position: relative;
    transition: left 0.6s;
    left: 0;
}

.retail-img {
  width: calc(100vw * 368 / 1920);
  cursor: url("../img/logo/zoom-in-regular-24.png"), zoom-in;
}

.retail-btn {
  position: absolute;
  width: calc(100vw * 44 / 1920);
  top: 50%;
  cursor: pointer;
}

/* ********************** */
/* IMAGE MASK */
/* ********************** */
.image-mask {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    left: 0;
    top: 0;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all 1s;
}

.image-mask.active {
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 1;
    visibility: visible;
}

.animated-image-container {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: all 1s;
}

.animated-image-container.active {
    transform: translate(-50%, -50%) scale(1);
}

.animated-image {
    height: 80vh;
}

.image-mask svg {
    position: absolute;
    stroke: #fff;
    cursor: pointer;
    width: calc(100vw * 36 / 1920);
    height: calc(100vw * 36 / 1920);
    right: calc(100vw * -36 / 1920);
    top: calc(100vw * -36 / 1920);
}