@charset "UTF-8";
/*タブレット*/
/*スマホ*/
* { /*全部*/
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  letter-spacing: 0.15em;
  line-height: 2;
}

html {
  width: 100%;
  height: auto;
  scroll-behavior: smooth; /* スクロール */
  font-size: 0.5208333333vw;
  scroll-behavior: smooth;
}
@media screen and (max-width: 1279px) {
  html {
    font-size: 0.5208333333vw;
  }
}
@media screen and (max-width: 599px) {
  html {
    font-size: 2.6666666667vw;
  }
}

body {
  width: 100%;
  height: auto;
}

a {
  text-decoration: none;
  cursor: pointer;
}

button {
  cursor: pointer;
}

img {
  width: 100%;
}

.area-normal-font {
  font-family: "area-normal", sans-serif;
}

.zen-kaku-gothic-new-font {
  font-family: "Zen Kaku Gothic New", sans-serif;
}

.scrollAnimationBox1 {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  /* 汎用アニメーションのベース */
}
.scrollAnimationBox1.in-view {
  opacity: 1;
  transform: translateY(0);
}
.scrollAnimationBox1.in-view .anotherAnimation::before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: #fff;
  position: absolute;
  left: 100%;
}
.scrollAnimationBox1 .anotherAnimation {
  position: relative;
  overflow: hidden;
}
.scrollAnimationBox1 .anotherAnimation::before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: #fff;
  position: absolute;
  left: 0;
  transition: left 0.5s ease 0.17s;
}

.scrollAnimationBox2 {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  /* 汎用アニメーションのベース */
}
.scrollAnimationBox2.in-view {
  opacity: 1;
  transform: translateY(0);
}
.scrollAnimationBox2.in-view .anotherAnimation::before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: #080808;
  position: absolute;
  left: 100%;
}
.scrollAnimationBox2 .anotherAnimation {
  position: relative;
  overflow: hidden;
}
.scrollAnimationBox2 .anotherAnimation::before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: #080808;
  position: absolute;
  left: 0;
  transition: left 0.5s ease 0.17s;
}

.fastKvHidden {
  overflow: hidden;
}

.main {
  position: relative;
}
.main .kvLinkDateHover {
  width: 167rem;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(100vh - 11.1rem);
  color: #fff;
  z-index: 10;
  opacity: 0.8;
  display: none;
  font-size: max(17px, 1.7rem);
  padding: 0 0 0 1.6rem;
  overflow: hidden;
}
@media screen and (max-width: 1600px) {
  .main .kvLinkDateHover {
    font-size: 1.7rem;
  }
}
@media screen and (max-width: 599px) {
  .main .kvLinkDateHover {
    display: none;
  }
}
.main .kvLinkDateHover a {
  width: -moz-fit-content;
  width: fit-content;
  display: inline-block;
  opacity: 0;
}
.main .kvLinkDateHover a .inner {
  display: block;
  width: 100%;
  height: 6rem;
  position: relative;
}
.main .kvScrollImgHover {
  width: 2rem;
  height: 17rem;
  position: absolute;
  top: calc(100vh - 19rem);
  right: 5.9rem;
  z-index: 10;
  display: none;
}
@media screen and (max-width: 599px) {
  .main .kvScrollImgHover {
    /*width: 1rem;
    height: auto;
    right: 1.2rem;
    bottom: .8rem;*/
  }
}
.main .kvScrollImgHover:hover ~ .kvSticky .kv__scroll {
  opacity: 0.5;
}
.main .kvSticky__video {
  width: 100%;
  height: 100dvh;
  position: sticky;
  top: 0;
  z-index: -50;
  background-color: #242423;
}
.main .kvSticky__video video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.main .kvSticky .kv {
  width: 100%;
  height: 100dvh;
  z-index: -50;
  overflow: hidden;
  position: absolute;
  top: 0;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.main .kvSticky .kv .loading {
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 15;
  animation: fadeIn 2s ease-in-out;
}
.main .kvSticky .kv .loading h1 {
  width: -moz-fit-content;
  width: fit-content;
  display: flex;
  flex-flow: column;
  margin: 0 1.6rem;
}
.main .kvSticky .kv .loading h1 span {
  width: auto;
  color: #717171;
  display: block;
}
@keyframes loading {
  0% {
    left: 0;
  }
  100% {
    left: 100%;
  }
}
@keyframes loadingOpacity {
  0% {
    opacity: 0;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.main .kvSticky .kv .loading h1 .text1 {
  font-size: 2.55rem;
  font-weight: 900;
  animation: loadingOpacity forwards 3s ease-in-out;
  color: #fff;
  opacity: 0;
}
@media screen and (max-width: 599px) {
  .main .kvSticky .kv .loading h1 .text1 {
    font-size: 1.5rem;
  }
}
.main .kvSticky .kv .loading h1 .text2 {
  font-size: 8.5rem;
  font-weight: 900;
  font-style: italic;
  line-height: 1.2;
  position: relative;
  overflow: hidden;
}
@media screen and (max-width: 599px) {
  .main .kvSticky .kv .loading h1 .text2 {
    display: none;
    font-size: 4.4rem;
    padding: 0;
  }
}
.main .kvSticky .kv .loading h1 .text2::before {
  content: "With All Your Heart."; /* 同じ文字列をコピー */
  position: absolute;
  inset: 0; /* 上下左右 0 = ピッタリ重ねる */
  color: transparent; /* 文字自体は透明 */
  opacity: 0;
  background: linear-gradient(90deg, #fff 0%, #fff 100%);
  background-clip: text;
  -webkit-background-clip: text; /* Safari 用 */
  white-space: nowrap; /* 折り返しを防ぐ */
  width: 0; /* ← ここが鍵！最初は幅 0 */
  animation: reveal 1.5s forwards ease-in-out 0.5s; /* 3 秒かけて左→右へ */
}
@media screen and (max-width: 599px) {
  .main .kvSticky .kv .loading h1 .text2::before {
    white-space: normal;
  }
}
@keyframes reveal {
  to {
    width: 100%;
    opacity: 1;
  }
}
.main .kvSticky .kv .loading h1 .text2_sp .element1 {
  display: flex;
}
.main .kvSticky .kv .loading h1 .text2_sp .item1 {
  font-size: 10.2rem;
  font-weight: 900;
  font-style: italic;
  line-height: 1.2;
  position: relative;
  overflow: hidden;
  display: none;
}
@media screen and (max-width: 599px) {
  .main .kvSticky .kv .loading h1 .text2_sp .item1 {
    display: block;
    font-size: 4.4rem;
    padding: 0;
  }
}
.main .kvSticky .kv .loading h1 .text2_sp .item1.item1::before {
  content: "With"; /* 同じ文字列をコピー */
  position: absolute;
  inset: 0; /* 上下左右 0 = ピッタリ重ねる */
  color: transparent; /* 文字自体は透明 */
  opacity: 0;
  background: linear-gradient(90deg, #fff 0%, #fff 100%);
  background-clip: text;
  -webkit-background-clip: text; /* Safari 用 */
  white-space: nowrap; /* 折り返しを防ぐ */
  width: 0; /* ← ここが鍵！最初は幅 0 */
  animation: reveal 1s forwards ease-in-out 0.5s; /* 3 秒かけて左→右へ */
}
@media screen and (max-width: 599px) {
  .main .kvSticky .kv .loading h1 .text2_sp .item1.item1::before {
    white-space: normal;
    animation: reveal 0.5s forwards ease-in-out 0.5s;
  }
}
.main .kvSticky .kv .loading h1 .text2_sp .item2 {
  font-size: 10.2rem;
  font-weight: 900;
  font-style: italic;
  line-height: 1.2;
  position: relative;
  overflow: hidden;
  display: none;
}
@media screen and (max-width: 599px) {
  .main .kvSticky .kv .loading h1 .text2_sp .item2 {
    display: block;
    font-size: 4.4rem;
    padding: 0 0 0 1rem;
  }
}
.main .kvSticky .kv .loading h1 .text2_sp .item2.item2::before {
  content: "All"; /* 同じ文字列をコピー */
  position: absolute;
  inset: 0; /* 上下左右 0 = ピッタリ重ねる */
  color: transparent; /* 文字自体は透明 */
  opacity: 0;
  background: linear-gradient(90deg, #fff 0%, #fff 100%);
  background-clip: text;
  -webkit-background-clip: text; /* Safari 用 */
  white-space: nowrap; /* 折り返しを防ぐ */
  width: 0; /* ← ここが鍵！最初は幅 0 */
  animation: reveal 1s forwards ease-in-out 1s;
}
@media screen and (max-width: 599px) {
  .main .kvSticky .kv .loading h1 .text2_sp .item2.item2::before {
    white-space: normal;
    padding: 0 0 0 1rem;
    animation: reveal 0.5s forwards ease-in-out 0.75s;
  }
}
@keyframes reveal {
  to {
    width: 100%;
    opacity: 1;
  }
}
.main .kvSticky .kv .loading h1 .text2_sp .element2 {
  display: flex;
}
.main .kvSticky .kv .loading h1 .text2_sp .item3 {
  font-size: 10.2rem;
  font-weight: 900;
  font-style: italic;
  line-height: 1.2;
  position: relative;
  overflow: hidden;
  display: none;
}
@media screen and (max-width: 599px) {
  .main .kvSticky .kv .loading h1 .text2_sp .item3 {
    display: block;
    font-size: 4.4rem;
    padding: 0;
  }
}
.main .kvSticky .kv .loading h1 .text2_sp .item3.item3::before {
  content: "Your"; /* 同じ文字列をコピー */
  position: absolute;
  inset: 0; /* 上下左右 0 = ピッタリ重ねる */
  color: transparent; /* 文字自体は透明 */
  opacity: 0;
  background: linear-gradient(90deg, #fff 0%, #fff 100%);
  background-clip: text;
  -webkit-background-clip: text; /* Safari 用 */
  white-space: nowrap; /* 折り返しを防ぐ */
  width: 0; /* ← ここが鍵！最初は幅 0 */
  animation: reveal 0.5s forwards ease-in-out 1s;
}
@media screen and (max-width: 599px) {
  .main .kvSticky .kv .loading h1 .text2_sp .item3.item3::before {
    white-space: normal;
  }
}
@keyframes reveal {
  to {
    width: 100%;
    opacity: 1;
  }
}
.main .kvSticky .kv .loading h1 .text2_sp .item4 {
  font-size: 10.2rem;
  font-weight: 900;
  font-style: italic;
  line-height: 1.2;
  position: relative;
  overflow: hidden;
  display: none;
}
@media screen and (max-width: 599px) {
  .main .kvSticky .kv .loading h1 .text2_sp .item4 {
    display: block;
    font-size: 4.4rem;
    padding: 0 0 0 1rem;
  }
}
.main .kvSticky .kv .loading h1 .text2_sp .item4.item4::before {
  content: "Heart."; /* 同じ文字列をコピー */
  position: absolute;
  inset: 0; /* 上下左右 0 = ピッタリ重ねる */
  color: transparent; /* 文字自体は透明 */
  opacity: 0;
  background: linear-gradient(90deg, #fff 0%, #fff 100%);
  background-clip: text;
  -webkit-background-clip: text; /* Safari 用 */
  white-space: nowrap; /* 折り返しを防ぐ */
  width: 0; /* ← ここが鍵！最初は幅 0 */
  animation: reveal 1.5s forwards ease-in-out 2s;
}
@media screen and (max-width: 599px) {
  .main .kvSticky .kv .loading h1 .text2_sp .item4.item4::before {
    white-space: normal;
    padding: 0 0 0 1rem;
    animation: reveal 0.5s forwards ease-in-out 1.25s;
  }
}
@keyframes reveal {
  to {
    width: 100%;
    opacity: 1;
  }
}
.main .kvSticky .kv .loading h1 .text3 {
  width: -moz-fit-content;
  width: fit-content;
  margin: auto;
  font-size: 3.4rem;
  font-weight: bold;
  text-align: center;
  position: relative;
  overflow: hidden;
}
@media screen and (max-width: 599px) {
  .main .kvSticky .kv .loading h1 .text3 {
    font-size: 1.7rem;
    text-align: left;
    margin: 0 auto 0 0;
  }
}
.main .kvSticky .kv .loading h1 .text3::before {
  content: "ここにある”こころ”と向き合う"; /* 同じ文字列をコピー */
  position: absolute;
  inset: 0; /* 上下左右 0 = ピッタリ重ねる */
  color: transparent; /* 文字自体は透明 */
  opacity: 0;
  background: linear-gradient(90deg, #fff 0%, #fff 100%);
  background-clip: text;
  -webkit-background-clip: text; /* Safari 用 */
  white-space: nowrap; /* 折り返しを防ぐ */
  width: 0; /* ← ここが鍵！最初は幅 0 */
  animation: reveal 1.5s forwards ease-in-out 0.5s;
}
@media screen and (max-width: 599px) {
  .main .kvSticky .kv .loading h1 .text3::before {
    animation: reveal 0.5s forwards ease-in-out 1.75s;
  }
}
.main .kvSticky .kv .loading__bg {
  width: 100%;
  height: 100dvh;
  background-color: #080808;
  position: fixed;
  opacity: 0;
  animation: kv 4s ease-in;
}
@keyframes kv {
  0% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.main .kvSticky .kv__mapImg {
  width: 100%;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -40;
}
@media screen and (max-width: 599px) {
  .main .kvSticky .kv__mapImg {
    height: 100%;
  }
}
@media screen and (max-width: 599px) {
  .main .kvSticky .kv__mapImg img {
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
}
.main .kvSticky .kv__background {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -30;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
}
.main .kvSticky .kv__paint1 {
  width: 66.845rem;
  height: auto;
  position: absolute;
  top: -34rem;
  right: -55.7rem;
  z-index: -20;
}
@media screen and (max-width: 599px) {
  .main .kvSticky .kv__paint1 {
    width: 34.941rem;
    top: -13rem;
    right: -30.9rem;
  }
}
.main .kvSticky .kv__paint2 {
  width: 31.657rem;
  height: auto;
  position: absolute;
  left: calc(50% + 22.4479166667vw);
  top: 50%;
  z-index: -20;
}
@media screen and (max-width: 599px) {
  .main .kvSticky .kv__paint2 {
    width: 10.657rem;
    top: 34.95rem;
    left: calc(50% + 18.9333333333vw);
  }
}
.main .kvSticky .kv__paint3 {
  width: 41.803rem;
  height: auto;
  right: calc(50% + 26.9791666667vw);
  top: calc(50% - 0.9259259259vh);
  z-index: -20;
  position: absolute;
}
@media screen and (max-width: 599px) {
  .main .kvSticky .kv__paint3 {
    width: 7.594rem;
    top: calc(50% - 1.6vh);
    right: calc(50% + 34.1066666667vw);
  }
}
.main .kvSticky .kv__paint4 {
  width: 16rem;
  height: auto;
  z-index: -20;
  left: 0;
  bottom: 0;
  position: absolute;
}
@media screen and (max-width: 599px) {
  .main .kvSticky .kv__paint4 {
    width: 7.3rem;
    height: auto;
  }
}
@keyframes kvScrollIcon {
  0% {
    bottom: 4rem;
  }
  5% {
    bottom: 2.6rem;
  }
  10% {
    bottom: 4rem;
  }
  15% {
    bottom: 2.3rem;
  }
  20% {
    bottom: 4rem;
  }
  100% {
    bottom: 4rem;
  }
}
.main .kvSticky .kv__scroll {
  width: 2rem;
  height: auto;
  position: absolute;
  bottom: 4rem;
  right: 5.9rem;
  z-index: -20;
  animation: kvScrollIcon 5s ease-out infinite;
  transition: opacity 0.3s ease;
}
@media screen and (max-width: 599px) {
  .main .kvSticky .kv__scroll {
    width: 1rem;
    height: auto;
    right: 1.2rem;
    bottom: 0.8rem;
    display: none;
  }
}
@keyframes loadingDate {
  0% {
    top: 100%;
  }
  85% {
    top: 100%;
  }
  100% {
    top: 0;
  }
}
.main .kvSticky .kv .date {
  width: 167rem;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 5.1rem;
  color: #fff;
  z-index: -20;
  opacity: 0.8;
  display: inline-block;
  font-size: max(17px, 1.7rem);
  padding: 0 0 0 1.6rem;
  overflow: hidden;
  transition: opacity 0.3s ease;
}
@media screen and (max-width: 1600px) {
  .main .kvSticky .kv .date {
    font-size: 1.7rem;
  }
}
@media screen and (max-width: 599px) {
  .main .kvSticky .kv .date {
    display: none;
  }
}
.main .kvSticky .kv .date .inner {
  display: block;
  width: 100%;
  height: 6rem;
  position: relative;
}
.main .kvSticky .kv .date .inner span {
  display: block;
  position: absolute;
  animation: loadingDate 5s forwards ease-in-out;
}
.main .kvSticky .about {
  width: 100%;
  height: 115.7rem;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.8) 20%, rgba(0, 0, 0, 0.85) 100%);
}
@media screen and (max-width: 599px) {
  .main .kvSticky .about {
    display: none;
  }
}
.main .kvSticky .about .inner h2 {
  font-size: 3.2rem;
  font-weight: 500;
  color: #fff;
}
.main .kvSticky .about .inner h2 span {
  opacity: 0;
  transition: opacity 1.2s ease;
}
.main .kvSticky .about .inner a {
  width: 40rem;
  height: 6.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  border: 0.1rem solid #fff;
  padding-bottom: 0.1rem;
  margin-top: 10rem;
  overflow: hidden;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.main .kvSticky .about .inner a::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 0;
  background-color: #fff;
  right: 100%;
  top: 0;
  transition: 0.3s right ease;
}
.main .kvSticky .about .inner a span {
  color: #fff;
  display: inline-block;
  font-size: 2.4rem;
  padding-bottom: 0.1rem;
  position: absolute;
  z-index: 1;
}
.main .kvSticky .about .inner a i {
  width: 4rem;
  position: absolute;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}
.main .kvSticky .about .inner a:hover::before {
  right: 0;
}
.main .kvSticky .about .inner a:hover span {
  color: #080808;
}
.main .kvSticky .about .inner a:hover i img {
  filter: brightness(0) saturate(100%) invert(0%) sepia(1%) saturate(2076%) hue-rotate(157deg) brightness(106%) contrast(94%);
}
.main .kvSticky .about.animate .inner h2 span {
  opacity: 1;
}
.main .kvSticky .about.animate .inner h2 span:nth-of-type(1) {
  transition-delay: 0s;
}
.main .kvSticky .about.animate .inner h2 span:nth-of-type(2) {
  transition-delay: 0.32s;
}
.main .kvSticky .about.animate .inner h2 span:nth-of-type(3) {
  transition-delay: 0.64s;
}
.main .kvSticky .about.animate .inner h2 span:nth-of-type(4) {
  transition-delay: 0.96s;
}
.main .kvSticky .about.animate .inner h2 span:nth-of-type(5) {
  transition-delay: 1.28s;
}
.main .kvSticky .about.animate .inner h2 span:nth-of-type(6) {
  transition-delay: 1.6s;
}
.main .kvSticky .about.animate .inner h2 span:nth-of-type(7) {
  transition-delay: 1.92s;
}
.main .kvSticky .about.animate a {
  transition-delay: 1.92s;
  opacity: 1;
}
.main .kvSticky .about-sp {
  display: none;
}
@media screen and (max-width: 599px) {
  .main .kvSticky .about-sp {
    width: 100%;
    height: 100vh;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.8) 20%, rgba(0, 0, 0, 0.85) 100%);
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.main .kvSticky .about-sp .inner {
  width: 33rem;
}
.main .kvSticky .about-sp .inner h2 {
  font-size: 1.4rem;
  font-weight: 500;
  color: #fff;
}
.main .kvSticky .about-sp .inner a {
  width: 22rem;
  padding: 1.78rem 0;
  border: #fff 0.1rem solid;
  position: relative;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 3rem;
}
.main .kvSticky .about-sp .inner a span {
  font-size: 1.2rem;
  font-weight: bold;
  position: absolute;
}
.main .kvSticky .about-sp .inner a i {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 3rem;
  height: auto;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 1.2rem;
}
.main .standOut {
  width: 100%;
  height: auto;
  background-color: #080808;
}
.main .standOut__slick {
  width: 100%;
  height: auto;
}
.main .standOut__slick--item {
  padding: 0 0.8rem;
}
.main .standOut__slick--item--img {
  width: 100%;
  height: 100%;
}
.main .standOut__slick--item--img img {
  width: 100%;
  height: 100%;
}
.main .service {
  width: 100%;
  background-color: #080808;
  padding: 25rem 0 0 0;
  position: relative;
}
@media screen and (max-width: 599px) {
  .main .service {
    padding: 9.1rem 0 0 0;
  }
}
.main .service__bg {
  width: 100%;
  max-width: 59.0255208333vw;
  position: absolute;
  top: 15.94rem;
  left: calc(50% - 10.4166666667vw);
}
@media screen and (max-width: 599px) {
  .main .service__bg {
    max-width: 94.6666666667vw;
    top: 0.9rem;
    left: auto;
    right: 0;
  }
}
.main .service .inner {
  max-width: 157rem;
  width: 100%;
  margin: auto;
}
@media screen and (max-width: 599px) {
  .main .service .inner {
    max-width: 33rem;
  }
}
.main .service .inner h2 {
  color: #fff;
}
.main .service .inner h2 big {
  width: -moz-fit-content;
  width: fit-content;
}
.main .service .inner h2 small {
  width: -moz-fit-content;
  width: fit-content;
  font-size: max(17px, 1.8rem);
  display: block;
  margin: 0 0 1.5rem 0;
  line-height: 1;
}
@media screen and (max-width: 1600px) {
  .main .service .inner h2 small {
    font-size: 1.8rem;
  }
}
@media screen and (max-width: 599px) {
  .main .service .inner h2 small {
    font-size: 1.3rem;
    margin: 0;
  }
}
.main .service .inner h2 span {
  width: -moz-fit-content;
  width: fit-content;
  font-size: max(55px, 6rem);
  font-weight: 900;
  font-style: italic;
  display: block;
  line-height: 1;
}
@media screen and (max-width: 1600px) {
  .main .service .inner h2 span {
    font-size: 6rem;
  }
}
@media screen and (max-width: 599px) {
  .main .service .inner h2 span {
    font-size: 3rem;
  }
}
.main .service .inner .subtext {
  color: #fff;
  font-size: max(27px, 3rem);
  font-weight: bold;
  padding-top: 6.8rem;
  padding-bottom: 10rem;
}
@media screen and (max-width: 1600px) {
  .main .service .inner .subtext {
    font-size: 3rem;
  }
}
@media screen and (max-width: 599px) {
  .main .service .inner .subtext {
    font-size: 1.2rem;
    padding: 0.7rem 0 3.2rem;
  }
}
@media screen and (max-width: 599px) {
  .main .service .inner .subtext br {
    display: none;
  }
}
.main .service .inner .service__content {
  display: flex;
  margin: 0 0 11.5rem 0;
}
@media screen and (max-width: 599px) {
  .main .service .inner .service__content {
    flex-flow: column;
    margin: 0 0 2.8rem 0;
  }
}
.main .service .inner .service__content--img {
  width: 68.948rem;
}
@media screen and (max-width: 599px) {
  .main .service .inner .service__content--img {
    width: 33rem;
  }
}
.main .service .inner .service__content--texts {
  max-width: 83.8rem;
  width: 100%;
  color: #fff;
  padding: 0 0 0 4.2rem;
}
@media screen and (max-width: 599px) {
  .main .service .inner .service__content--texts {
    padding: 0;
  }
}
.main .service .inner .service__content--texts h3 {
  font-size: max(32px, 3.5rem);
  font-weight: bold;
  line-height: 1;
  padding-bottom: 5rem;
}
@media screen and (max-width: 1600px) {
  .main .service .inner .service__content--texts h3 {
    font-size: 3.5rem;
  }
}
@media screen and (max-width: 599px) {
  .main .service .inner .service__content--texts h3 {
    font-size: 1.7rem;
    padding: 1.6rem 0;
  }
}
.main .service .inner .service__content--texts p {
  font-size: max(17px, 1.8rem);
  font-weight: 500;
}
@media screen and (max-width: 1600px) {
  .main .service .inner .service__content--texts p {
    font-size: 1.8rem;
  }
}
@media screen and (max-width: 599px) {
  .main .service .inner .service__content--texts p {
    font-size: 1.1rem;
  }
}
.main .service .inner .service__content--texts a {
  width: max(224px, 22.4rem);
  height: max(35px, 3.5rem);
  border: 0.1rem solid #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 10;
  color: #fff;
  font-size: max(12px, 1.2rem);
  font-weight: 700;
  padding-bottom: 0.1rem;
  margin: 4rem 0 0 0;
  overflow: hidden;
}
@media screen and (max-width: 1600px) {
  .main .service .inner .service__content--texts a {
    width: 22.4rem;
    height: 3.5rem;
    font-size: 1.2rem;
  }
}
@media screen and (max-width: 599px) {
  .main .service .inner .service__content--texts a {
    width: 11rem;
    height: 2.55rem;
    font-size: 0.8rem;
    margin: 1.6rem 0 0 0;
  }
}
.main .service .inner .service__content--texts a::before {
  content: "";
  width: 100%;
  height: max(35px, 3.5rem);
  position: absolute;
  top: 0;
  z-index: -1;
  transition: transform ease 0.3s;
  right: 0;
  background-color: #fff;
  transform: translateX(-100%);
}
@media screen and (max-width: 1600px) {
  .main .service .inner .service__content--texts a::before {
    height: 3.5rem;
  }
}
.main .service .inner .service__content--texts a:hover {
  color: #333;
}
.main .service .inner .service__content--texts a:hover::before {
  transform: translateX(0%);
}
.main .service .inner .service__content--texts a .icon {
  width: max(28.96px, 2.896rem);
  display: flex;
  align-items: center;
  position: absolute;
  right: 1.4rem;
  top: 50%;
  transform: translateY(-50%);
}
@media screen and (max-width: 1600px) {
  .main .service .inner .service__content--texts a .icon {
    width: 2.896rem;
  }
}
@media screen and (max-width: 599px) {
  .main .service .inner .service__content--texts a .icon {
    width: 1.196rem;
    right: 0.45rem;
  }
}
.main .service .inner .service__content--texts a .icon img {
  filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(22%) hue-rotate(318deg) brightness(104%) contrast(107%);
}
.main .service .inner .service__content--texts a:hover .icon img {
  filter: brightness(0) saturate(100%) invert(0%) sepia(85%) saturate(7441%) hue-rotate(188deg) brightness(89%) contrast(113%);
}
.main .service .inner .service__content:last-child .service__content--texts h3 {
  padding-bottom: 4rem;
}
@media screen and (max-width: 599px) {
  .main .service .inner .service__content:last-child .service__content--texts h3 {
    padding-bottom: 1.6rem;
  }
}
.main .service .serviceListButtonCenterContenar {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0 0 12.8rem 0;
}
@media screen and (max-width: 599px) {
  .main .service .serviceListButtonCenterContenar {
    padding: 0 0 3.3rem 0;
  }
}
.main .service .serviceListButtonCenterContenar .serviceListButton {
  width: max(337px, 33.7rem);
  height: max(64.5px, 6.45rem);
  background-color: #3E3E3E;
  font-size: max(20px, 2.1rem);
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  margin: auto;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
@media screen and (max-width: 1600px) {
  .main .service .serviceListButtonCenterContenar .serviceListButton {
    width: 33.7rem;
    height: 6.45rem;
    font-size: 2.1rem;
  }
}
@media screen and (max-width: 599px) {
  .main .service .serviceListButtonCenterContenar .serviceListButton {
    width: 88vw;
    height: auto;
    font-size: 1.2rem;
    padding: 2rem 0;
    text-align: center;
    margin: 1.45rem 0 0 0;
  }
}
.main .service .serviceListButtonCenterContenar .serviceListButton::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 0;
  right: 100%;
  top: 0;
  background-color: #fff;
  display: inline-block;
  transition: all 0.3s ease;
}
.main .service .serviceListButtonCenterContenar .serviceListButton .text {
  position: absolute;
}
.main .service .serviceListButtonCenterContenar .serviceListButton:hover {
  color: #3E3E3E;
}
.main .service .serviceListButtonCenterContenar .serviceListButton:hover::before {
  right: 0;
}
.main .caseStudy {
  width: 100%;
  padding: 7.6rem 0 11.5rem 0;
  background-color: #ffffff;
  overflow: hidden;
}
@media screen and (max-width: 599px) {
  .main .caseStudy {
    padding: 2.5rem 0 6.8rem 0;
  }
}
.main .caseStudy__container {
  width: 167rem;
  margin: 0 auto 7.4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media screen and (max-width: 1279px) {
  .main .caseStudy__container {
    flex-flow: column;
    align-items: flex-start;
  }
}
@media screen and (max-width: 599px) {
  .main .caseStudy__container {
    width: 88vw;
    flex-flow: column;
    align-items: flex-start;
    margin: 0 auto 2.3rem;
  }
}
.main .caseStudy__container h2 {
  color: #080808;
}
@media screen and (max-width: 1279px) {
  .main .caseStudy__container h2 {
    padding-bottom: max(28px, 2.8rem);
  }
}
@media screen and (max-width: 599px) {
  .main .caseStudy__container h2 {
    padding: 0;
  }
}
.main .caseStudy__container h2 big {
  width: -moz-fit-content;
  width: fit-content;
}
.main .caseStudy__container h2 small {
  width: -moz-fit-content;
  width: fit-content;
  font-size: max(17px, 1.8rem);
  font-weight: 700;
  display: block;
  padding: 0 0 0 0.5rem;
  line-height: 1;
}
@media screen and (max-width: 1600px) {
  .main .caseStudy__container h2 small {
    font-size: 1.8rem;
  }
}
@media screen and (max-width: 599px) {
  .main .caseStudy__container h2 small {
    font-size: 1.3rem;
    padding: 0 0 0.5rem 0;
  }
}
.main .caseStudy__container h2 big {
  font-size: max(55px, 6rem);
  font-weight: 900;
  font-style: italic;
  line-height: 1;
  padding-top: max(16px, 1.6rem);
  padding-bottom: 2rem;
  display: block;
}
@media screen and (max-width: 1600px) {
  .main .caseStudy__container h2 big {
    font-size: 6rem;
    padding-top: 1.6rem;
  }
}
@media screen and (max-width: 599px) {
  .main .caseStudy__container h2 big {
    font-size: 3rem;
  }
}
.main .caseStudy__container .link {
  width: max(337px, 33.7rem);
  height: max(64.5px, 6.45rem);
  font-size: max(17px, 1.8rem);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: solid 0.15rem #080808;
  position: relative;
  background-color: transparent;
  overflow: hidden;
  color: #080808;
}
@media screen and (max-width: 1600px) {
  .main .caseStudy__container .link {
    width: 33.7rem;
    height: 6.45rem;
    font-size: 1.8rem;
  }
}
@media screen and (max-width: 599px) {
  .main .caseStudy__container .link {
    width: 11rem;
    height: 2.45rem;
    font-size: 0.8rem;
    margin-top: 1rem;
    border: solid 0.1rem #080808;
  }
}
.main .caseStudy__container .link::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 0;
  right: 100%;
  top: 0;
  background-color: #080808;
  display: inline-block;
  transition: all 0.3s ease;
}
.main .caseStudy__container .link .text {
  position: absolute;
}
.main .caseStudy__container .link .icon {
  width: max(28px, 2.8rem);
  display: flex;
  align-items: center;
  position: absolute;
  z-index: 1;
  right: 1.5rem;
}
@media screen and (max-width: 1600px) {
  .main .caseStudy__container .link .icon {
    width: 2.8rem;
  }
}
@media screen and (max-width: 599px) {
  .main .caseStudy__container .link .icon {
    width: 1.196rem;
    right: 0.45rem;
  }
}
.main .caseStudy__container .link:hover {
  color: #fff;
}
.main .caseStudy__container .link:hover::before {
  right: 0;
}
.main .caseStudy__container .link:hover .icon img {
  filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);
}
.main .caseStudy__slick {
  width: 100%;
  height: 100%;
}
.main .caseStudy__slick--list.slick-dotted.slick-slider {
  margin: 0 0 0 0;
}
.main .caseStudy__slick--list--card {
  width: 42.2rem;
  display: inline-block;
  padding: 0 3.7rem;
  position: relative;
}
@media screen and (max-width: 599px) {
  .main .caseStudy__slick--list--card {
    padding: 0 2rem;
  }
}
.main .caseStudy__slick--list--card .hoverImage {
  width: calc(100% - 7.3999rem);
  height: 100%;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 3.7rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}
@media screen and (max-width: 599px) {
  .main .caseStudy__slick--list--card .hoverImage {
    width: calc(100% - 4rem);
    left: 2rem;
  }
}
.main .caseStudy__slick--list--card .hoverImage .viewAchievements {
  width: max(224px, 22.4rem);
  height: max(35px, 3.5rem);
  color: #fff;
  font-size: max(12px, 1.2rem);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: #fff 0.1rem solid;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.3s ease;
}
@media screen and (max-width: 1600px) {
  .main .caseStudy__slick--list--card .hoverImage .viewAchievements {
    width: 22.4rem;
    height: 3.5rem;
    font-size: 1.2rem;
  }
}
.main .caseStudy__slick--list--card .hoverImage .viewAchievements .icon {
  width: max(28.96px, 2.896rem);
  display: flex;
  align-items: center;
  top: 50%;
  transform: translateY(-50%);
  right: 1.4rem;
  position: absolute;
}
@media screen and (max-width: 1600px) {
  .main .caseStudy__slick--list--card .hoverImage .viewAchievements .icon {
    width: 2.896rem;
  }
}
.main .caseStudy__slick--list--card .hoverImage .bg {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.65);
}
.main .caseStudy__slick--list--card .hoverImage:hover {
  opacity: 1;
}
.main .caseStudy__slick--list--card .hoverImage:hover .viewAchievements {
  opacity: 1;
}
.main .caseStudy__slick--list--card--img {
  width: 100%;
  height: 38.7rem;
}
@media screen and (max-width: 599px) {
  .main .caseStudy__slick--list--card--img {
    height: 23.7rem;
  }
}
.main .caseStudy__slick--list--card--img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.main .caseStudy__slick--list--card--text {
  width: 100%;
  padding: 2.4rem 1.8rem 1.3rem 1.6rem;
}
.main .caseStudy__slick--list--card--text--item .top {
  display: flex;
  align-items: center;
}
.main .caseStudy__slick--list--card--text--item .top .icon {
  width: max(17px, 1.7rem);
  height: max(17px, 1.7rem);
  background-color: #080808;
  position: relative;
  margin: 0 1.4rem 0 0;
}
@media screen and (max-width: 1600px) {
  .main .caseStudy__slick--list--card--text--item .top .icon {
    width: 1.7rem;
    height: 1.7rem;
  }
}
@media screen and (max-width: 599px) {
  .main .caseStudy__slick--list--card--text--item .top .icon {
    width: 1.2rem;
    height: 1.2rem;
  }
}
.main .caseStudy__slick--list--card--text--item .top .icon .greenArea {
  width: max(7px, 0.7rem);
  height: max(7px, 0.7rem);
  background-color: #FF8237;
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
}
@media screen and (max-width: 1600px) {
  .main .caseStudy__slick--list--card--text--item .top .icon .greenArea {
    width: 0.7rem;
    height: 0.7rem;
  }
}
@media screen and (max-width: 599px) {
  .main .caseStudy__slick--list--card--text--item .top .icon .greenArea {
    width: 0.4rem;
    height: 0.4rem;
  }
}
.main .caseStudy__slick--list--card--text--item .top h3 {
  font-size: max(14px, 1.4rem);
  font-weight: 500;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 1600px) {
  .main .caseStudy__slick--list--card--text--item .top h3 {
    font-size: 1.4rem;
  }
}
@media screen and (max-width: 599px) {
  .main .caseStudy__slick--list--card--text--item .top h3 {
    font-size: 1.2rem;
  }
}
.main .caseStudy__slick--list--card--text--item p {
  font-size: max(15px, 1.5rem);
  font-weight: 700;
  letter-spacing: 0.15em;
  margin: 2.2rem 0 2.7rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
@media screen and (max-width: 1600px) {
  .main .caseStudy__slick--list--card--text--item p {
    font-size: max(15px, 1.5rem);
  }
}
@media screen and (max-width: 599px) {
  .main .caseStudy__slick--list--card--text--item p {
    font-size: 1.3rem;
    font-weight: 500;
  }
}
.main .caseStudy__slick--list--card--text--item--bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.main .caseStudy__slick--list--card--text--item--bottom--tag {
  width: auto;
  display: flex;
  padding: 0.6rem 5rem;
  background-color: #080808;
  color: #fff;
  font-size: max(14px, 1.5rem);
}
@media screen and (max-width: 1600px) {
  .main .caseStudy__slick--list--card--text--item--bottom--tag {
    font-size: 1.5rem;
  }
}
@media screen and (max-width: 599px) {
  .main .caseStudy__slick--list--card--text--item--bottom--tag {
    padding: 0.4rem 1.8rem;
  }
}
.main .caseStudy__slick .dots-wrap {
  display: flex;
  justify-content: center;
  margin: 6.4rem 0 0 0;
}
@media screen and (max-width: 599px) {
  .main .caseStudy__slick .dots-wrap {
    margin: 2.9rem 0 0 0;
  }
}
.main .caseStudy__slick .dots-wrap li {
  width: 10px;
  height: 10px;
  margin: 0 1.85rem;
  background: #fff;
  border-radius: 100%;
  cursor: pointer;
  border: #707070 solid 0.3rem;
}
@media screen and (max-width: 599px) {
  .main .caseStudy__slick .dots-wrap li {
    margin: 0 0.45rem;
    border: #707070 solid 0.1rem;
  }
}
.main .caseStudy__slick .dots-wrap li.slick-active {
  background: #080808;
  border: #080808 solid 0.3rem;
}
@media screen and (max-width: 599px) {
  .main .caseStudy__slick .dots-wrap li.slick-active {
    border: #080808 solid 0.1rem;
  }
}
.main .caseStudy__slick .dots-wrap li button {
  display: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  padding: 0;
  border: none;
  background-color: transparent;
}
.main .caseStudy__slick .arrow_box_case_study {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2rem 0 0;
  position: relative;
}
.main .caseStudy__slick .arrow_box_case_study .prev-arrow, .main .caseStudy__slick .arrow_box_case_study .next-arrow {
  display: block;
  width: 4rem;
  height: 4rem;
  background: #080808;
  border-radius: 50%;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
}
.main .caseStudy__slick .arrow_box_case_study .prev-arrow {
  transform: rotate(180deg);
  margin-right: 2rem;
}
.main .caseStudy__slick .arrow_box_case_study .prev-arrow::before, .main .caseStudy__slick .arrow_box_case_study .next-arrow::before {
  position: absolute;
  content: "";
  width: 1rem;
  height: 1rem;
  border-right: 0.2rem solid #FFF;
  border-top: 0.2rem solid #FFF;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0.2rem;
  margin: auto;
  transform: rotate(45deg);
}
.main .document {
  width: 100%;
  padding: 7.6rem 0 11.5rem 0;
  background-color: #242424;
  overflow: hidden;
}
@media screen and (max-width: 599px) {
  .main .document {
    padding: 2.5rem 0 6.8rem;
  }
}
.main .document__container {
  width: 167rem;
  margin: 0 auto 7.4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media screen and (max-width: 1279px) {
  .main .document__container {
    flex-flow: column;
    align-items: flex-start;
  }
}
@media screen and (max-width: 599px) {
  .main .document__container {
    width: 33rem;
    flex-flow: column;
    align-items: flex-start;
    margin: 0 auto 2.5rem;
  }
}
.main .document__container h2 {
  color: #fff;
}
@media screen and (max-width: 1279px) {
  .main .document__container h2 {
    padding-bottom: max(28px, 2.8rem);
  }
}
@media screen and (max-width: 599px) {
  .main .document__container h2 {
    padding-bottom: 0;
  }
}
.main .document__container h2 big {
  width: -moz-fit-content;
  width: fit-content;
}
.main .document__container h2 small {
  width: -moz-fit-content;
  width: fit-content;
  font-size: max(17px, 1.8rem);
  font-weight: 700;
  display: block;
  padding: 0 0 0 0.5rem;
  line-height: 1;
}
@media screen and (max-width: 1600px) {
  .main .document__container h2 small {
    font-size: 1.8rem;
  }
}
@media screen and (max-width: 599px) {
  .main .document__container h2 small {
    font-size: 1.3rem;
  }
}
.main .document__container h2 big {
  font-size: max(55px, 6rem);
  font-weight: 900;
  font-style: italic;
  display: block;
  line-height: 1;
  padding: max(16px, 1.6rem) 0;
}
@media screen and (max-width: 1600px) {
  .main .document__container h2 big {
    font-size: 6rem;
    padding: 1.6rem 0;
  }
}
@media screen and (max-width: 599px) {
  .main .document__container h2 big {
    font-size: 3rem;
  }
}
.main .document__container .link {
  width: max(337px, 33.7rem);
  height: max(64.5px, 6.45rem);
  font-size: max(17px, 1.8rem);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: solid 0.15rem #fff;
  position: relative;
  color: #fff;
  overflow: hidden;
}
@media screen and (max-width: 1600px) {
  .main .document__container .link {
    width: 33.7rem;
    height: 6.45rem;
    font-size: 1.8rem;
  }
}
@media screen and (max-width: 599px) {
  .main .document__container .link {
    width: 11rem;
    height: 2.45rem;
    font-size: 0.8rem;
    font-weight: 700;
    margin-top: 1rem;
    border: solid 0.1rem #fff;
  }
}
.main .document__container .link::before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: #fff;
  position: absolute;
  right: 100%;
  top: 0;
  transition: 0.3s all ease;
}
.main .document__container .link .text {
  position: absolute;
}
.main .document__container .link .icon {
  width: max(28.96px, 2.896rem);
  display: flex;
  align-items: center;
  position: absolute;
  right: 1.5rem;
}
@media screen and (max-width: 1600px) {
  .main .document__container .link .icon {
    width: 2.896rem;
  }
}
@media screen and (max-width: 599px) {
  .main .document__container .link .icon {
    width: 1.196rem;
    right: 0.45rem;
  }
}
.main .document__container .link:hover {
  color: #080808;
}
.main .document__container .link:hover::before {
  right: 0;
}
.main .document__container .link:hover .icon img {
  filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(2%) hue-rotate(78deg) brightness(101%) contrast(99%);
}
.main .document__slick {
  width: 100%;
  height: 100%;
  margin: 0;
}
.main .document__slick--list {
  margin: 0;
}
.main .document__slick--list--card {
  width: 42.2rem;
  height: 48rem;
  display: inline-block;
  padding: 0 3.7rem;
  position: relative;
}
@media screen and (max-width: 599px) {
  .main .document__slick--list--card {
    width: 100%;
    height: auto;
    padding: 0 2rem;
  }
}
.main .document__slick--list--card .hoverImage {
  width: calc(100% - 7.3999rem);
  height: 100%;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 3.7rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}
@media screen and (max-width: 599px) {
  .main .document__slick--list--card .hoverImage {
    width: calc(100% - 4rem);
    left: 2rem;
  }
}
.main .document__slick--list--card .hoverImage .viewAchievements {
  width: max(224px, 22.4rem);
  height: max(35px, 3.5rem);
  color: #fff;
  font-size: max(12px, 1.2rem);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: #fff 0.1rem solid;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.3s ease;
}
@media screen and (max-width: 1600px) {
  .main .document__slick--list--card .hoverImage .viewAchievements {
    width: 22.4rem;
    height: 3.5rem;
    font-size: 1.2rem;
  }
}
.main .document__slick--list--card .hoverImage .viewAchievements .icon {
  width: max(28.96px, 2.896rem);
  display: flex;
  align-items: center;
  top: 50%;
  transform: translateY(-50%);
  right: 1.4rem;
  position: absolute;
}
@media screen and (max-width: 1600px) {
  .main .document__slick--list--card .hoverImage .viewAchievements .icon {
    width: 2.896rem;
  }
}
.main .document__slick--list--card .hoverImage .bg {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.65);
}
.main .document__slick--list--card .hoverImage:hover {
  opacity: 1;
}
.main .document__slick--list--card .hoverImage:hover .viewAchievements {
  opacity: 1;
}
.main .document__slick--list--card--img {
  width: 100%;
}
.main .document__slick--list--card--text {
  width: 100%;
  padding: 2.6rem 1.8rem 1.3rem 1.6rem;
  color: #fff;
}
.main .document__slick--list--card--text--item p {
  font-size: max(17px, 1.8rem);
  font-weight: 700;
  letter-spacing: 0.15em;
  margin: 0 0 2.7rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
@media screen and (max-width: 1600px) {
  .main .document__slick--list--card--text--item p {
    font-size: 1.8rem;
  }
}
@media screen and (max-width: 599px) {
  .main .document__slick--list--card--text--item p {
    font-size: 1.3rem;
    font-weight: 500;
  }
}
.main .document__slick--list--card--text--item--bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.main .document__slick--list--card--text--item--bottom--tag {
  width: auto;
  display: flex;
  padding: 0.6rem 5rem;
  background-color: #080808;
  color: #fff;
  font-size: max(15px, 1.6rem);
}
@media screen and (max-width: 1600px) {
  .main .document__slick--list--card--text--item--bottom--tag {
    font-size: 1.6rem;
  }
}
@media screen and (max-width: 599px) {
  .main .document__slick--list--card--text--item--bottom--tag {
    background-color: #3E3E3E;
    padding: 0.4rem 1.8rem;
  }
}
.main .document__slick .dots-wrap {
  display: flex;
  justify-content: center;
  margin: 7.8rem 0 0 0;
}
@media screen and (max-width: 599px) {
  .main .document__slick .dots-wrap {
    margin: 2.9rem 0 0 0;
  }
}
.main .document__slick .dots-wrap li {
  width: 10px;
  height: 10px;
  margin: 0 1.85rem;
  background: #242424;
  border-radius: 100%;
  cursor: pointer;
  border: #707070 solid 0.3rem;
}
@media screen and (max-width: 599px) {
  .main .document__slick .dots-wrap li {
    margin: 0 0.45rem;
    border: #707070 solid 0.1rem;
  }
}
.main .document__slick .dots-wrap li.slick-active {
  background: #fff;
  border: #fff solid 0.3rem;
}
@media screen and (max-width: 599px) {
  .main .document__slick .dots-wrap li.slick-active {
    border: #fff solid 0.1rem;
  }
}
.main .document__slick .dots-wrap li button {
  display: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  padding: 0;
  border: none;
  background-color: transparent;
}
.main .document__slick .arrow_box_document {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  position: relative;
}
.main .document__slick .arrow_box_document .prev-arrow, .main .document__slick .arrow_box_document .next-arrow {
  display: block;
  width: 4rem;
  height: 4rem;
  background: #fff;
  border-radius: 50%;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
}
.main .document__slick .arrow_box_document .prev-arrow {
  transform: rotate(180deg);
  margin-right: 2rem;
}
.main .document__slick .arrow_box_document .prev-arrow::before, .main .document__slick .arrow_box_document .next-arrow::before {
  position: absolute;
  content: "";
  width: 1rem;
  height: 1rem;
  border-right: 0.2rem solid #080808;
  border-top: 0.2rem solid #080808;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0.2rem;
  margin: auto;
  transform: rotate(45deg);
}
.main .client {
  width: 100%;
}
.main .client .title {
  width: 167rem;
  display: flex;
  align-items: center;
  flex-flow: column;
  margin: auto;
}
@media screen and (max-width: 599px) {
  .main .client .title {
    width: 33rem;
    align-items: flex-start;
  }
}
.main .client .title h2 {
  width: -moz-fit-content;
  width: fit-content;
  max-width: 167rem;
  margin: 16rem auto 7.8rem 0;
  padding: 0 1.6rem;
  display: block;
  line-height: 0;
  color: #080808;
}
@media screen and (max-width: 599px) {
  .main .client .title h2 {
    margin: 3.2rem 0 2.4rem;
    padding: 0;
  }
}
.main .client .title h2 big {
  width: -moz-fit-content;
  width: fit-content;
  font-size: max(17px, 1.8rem);
  font-weight: 700;
  display: block;
  line-height: 1;
}
@media screen and (max-width: 1600px) {
  .main .client .title h2 big {
    font-size: 1.8rem;
  }
}
@media screen and (max-width: 599px) {
  .main .client .title h2 big {
    font-size: 1.3rem;
  }
}
.main .client .title h2 small {
  width: -moz-fit-content;
  width: fit-content;
  font-size: max(55px, 6rem);
  font-weight: 900;
  font-style: italic;
  display: block;
  line-height: 1;
  padding-top: max(16px, 1.6rem);
}
@media screen and (max-width: 1600px) {
  .main .client .title h2 small {
    font-size: 6rem;
    padding-top: 1.6rem;
  }
}
@media screen and (max-width: 599px) {
  .main .client .title h2 small {
    font-size: 3rem;
  }
}
.main .client__company {
  max-width: 167rem;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  gap: 1rem;
  margin: auto;
  justify-content: center;
}
@media screen and (max-width: 599px) {
  .main .client__company {
    max-width: 33rem;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 0.5rem;
  }
}
.main .client__company .img {
  max-width: 100%;
  width: 100%;
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.16);
}
.main .serviceSlide {
  overflow: hidden;
  margin: 0 0 11.5rem;
}
@media screen and (max-width: 599px) {
  .main .serviceSlide {
    margin: 0 0 5rem;
  }
}
.main .serviceSlide .card {
  margin: 16rem 0 3.8rem;
  padding: 0 3.7rem;
}
@media screen and (max-width: 599px) {
  .main .serviceSlide .card {
    margin: 5rem 0;
  }
}
.main .serviceSlide .card .inner {
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.16);
  position: relative;
  display: inline-block;
}
.main .serviceSlide .card .inner .bg {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.65);
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: 0.3s all ease;
}
.main .serviceSlide .card .inner .bg strong {
  width: max(224px, 22.4rem);
  height: max(35px, 3.5rem);
  color: #fff;
  font-weight: 400;
  font-size: max(12px, 1.2rem);
  border: #fff solid 0.1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
@media screen and (max-width: 1600px) {
  .main .serviceSlide .card .inner .bg strong {
    width: 22.4rem;
    height: 3.5rem;
    font-size: 1.2rem;
  }
}
.main .serviceSlide .card .inner .bg strong i {
  width: max(28.96px, 2.896rem);
  display: flex;
  align-items: center;
  position: absolute;
  right: 1.4rem;
  top: 50%;
  transform: translateY(-50%);
  font-style: normal;
  filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(32deg) brightness(105%) contrast(102%);
}
@media screen and (max-width: 1600px) {
  .main .serviceSlide .card .inner .bg strong i {
    width: 2.896rem;
  }
}
.main .serviceSlide .card .inner .img {
  width: 100%;
}
.main .serviceSlide .card .inner .content {
  display: flex;
  flex-flow: column;
  align-items: center;
}
.main .serviceSlide .card .inner .content .logo {
  width: 100%;
  margin: 0;
}
@media screen and (max-width: 599px) {
  .main .serviceSlide .card .inner .content .logo {
    margin: 1rem 0 0.2rem;
  }
}
.main .serviceSlide .card .inner .content p {
  font-size: max(14px, 1.5rem);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin: 0 3rem 3.6rem 3rem;
}
@media screen and (max-width: 1600px) {
  .main .serviceSlide .card .inner .content p {
    font-size: max(14px, 1.5rem);
  }
}
@media screen and (max-width: 599px) {
  .main .serviceSlide .card .inner .content p {
    font-size: 1.2rem;
    font-weight: 500;
    margin: 1.4rem 1rem 1.4rem 1.35rem;
    -webkit-line-clamp: 4;
  }
}
.main .serviceSlide .card .inner:hover .bg {
  opacity: 1;
}
.main .dots-wrap {
  display: flex;
  justify-content: center;
  margin: 7.8rem 0 0 0;
}
@media screen and (max-width: 599px) {
  .main .dots-wrap {
    margin: 0;
  }
}
.main .dots-wrap li {
  width: 10px;
  height: 10px;
  margin: 0 1.85rem;
  background: #fff;
  border-radius: 100%;
  cursor: pointer;
  background: #fff;
  border: #707070 solid 0.3rem;
}
@media screen and (max-width: 599px) {
  .main .dots-wrap li {
    margin: 0 0.45rem;
    border: #707070 solid 0.1rem;
  }
}
.main .dots-wrap li.slick-active {
  background: #242424;
}
@media screen and (max-width: 599px) {
  .main .dots-wrap li.slick-active {
    border: #707070 solid 0.1rem;
  }
}
.main .dots-wrap li button {
  display: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  padding: 0;
  border: none;
  background-color: transparent;
}/*# sourceMappingURL=style.css.map */