@charset "utf-8";
section,footer{
  background-color: #fff;
}
#main_visual{
  width: 100%; 
  position: fixed; 
  top: 0; left: 0;
  z-index: -1;
}
.main_visual_wrap{
  width: 100%; height: 940px;
  position: relative;
}
/*  */
.swiper.mainbg{
  width: 100%; height: 100%;
  position: relative;
}
.swiper.mainbg .swiper-slide.swiper-slide-active .hero_img img{
  transform: scale3d(1, 1, 1);
}
.hero_img{
  width: 100%; height: 100%;
  overflow: hidden;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none
}
.hero_img img{
  width: 100%; height: 100%;
  transform: scale3d(1.2, 1.2, 1);
  transition: transform 7s ease;
  object-fit: cover;
}

/*  */
.main_visual_text{
  width: 100%; 
  position: absolute;
  top: 50%; left: 0;
  z-index: 1;
  transform: translateY(-50%);
  padding: 0 var(--container);
}
.main_visual_text h1{
  font-size: 5.5rem;
  font-weight: 700;
  color: var(--font-white);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
.main_visual_text h1 .char {
  transform: translateY(100%);
  opacity: 0;
  animation: slide-up 0.6s cubic-bezier(.3, 0, .7, 1) both;
  animation-delay: calc(50ms * var(--char-index));
}
.main_visual_text h1 b{
  position: relative;
}
.main_visual_text h1 b::after{
  content: '';
  width: 100%; height: 100%;
  position: absolute;
  bottom: 0; left: 0;
  z-index: -1;
  background: url(../img/brush.svg) center left no-repeat;
  background-size: 100%;
  transform: scale3d(1.5,1.3,1);
  clip-path: polygon(0 0, 0% 0, 0% 100%, 0% 100%);
  animation: blockLeft 0.6s cubic-bezier(.36,.95,.5,1) forwards;
  animation-delay: 1.2s;
}
.main_visual_text h1 b#bru02::after{
  background: url(../img/brush02.svg) center left no-repeat;
  animation-delay: 1.6s;
}
@keyframes slide-up {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes blockLeft{
  to{
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
}

/*  */
#main_text{
  width: 100%;
  background-color: var(--lightgray);
  margin-top: 940px;
}
.main_text_wrap{
  width: 100%; 
  padding: 11.25rem 10%;
}
.main_text_wrap>div{
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
.main_text_wrap h2{
  width: 100%;
  font-size: 2.9rem; font-weight: 700;
  line-height: 1.4;
  white-space: nowrap; text-align: center;
}
.main_text_wrap p{
  font-size: 1.375rem; 
  text-align: center;
  margin-top: 50px;
}
/*  */
.main_contents_wrap{
  width: 100%; 
  padding: 15rem 0 ;
}
.work_con_wrap{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.work_con{
  width: 49%; height: 30vw;
  /* min-height: 390px; */
  margin: 1vw 0;
  border-radius: 12px;
  background-color: #fff;
  position: relative;
  overflow: hidden;
  font-size: 0.694vw;

  background-image: linear-gradient(
    30deg,
    hsl(228, 58%, 22%) 0%,
    hsl(218, 73%, 32%) 65%,
    hsl(213, 65%, 40%) 100%
  );
}
.work_con#sub04bg{
  background-image: linear-gradient(
    30deg,
    hsl(209, 62%, 36%) 0%,
    hsl(209, 60%, 47%) 50%,
    hsl(194, 56%, 52%) 100%
  );
}
.work_con#sub05bg{
  background-image: linear-gradient(
    30deg,
    hsl(199, 70%, 34%) 0%,
    hsl(197, 59%, 51%) 65%,
    hsl(185, 59%, 61%) 100%
  );
}
.work_con img{
  width: 100%; height: 100%;
  object-fit: cover;
  transition: all 0.6s;
}
.work_con_tit{
  width: 100%;
  position: absolute;
  bottom: 7%; left: 0;
  padding: 0 5%;
}
.work_con_tit>h3{
  font-size: clamp( 28px ,2.6em ,2.6em) ;
  font-weight: 700;
  color: var(--font-white);
}
.work_con_tit>p{
  font-size: clamp(18px, 2.1em, 2.1em);
  font-weight: 300;
  color: var(--lightgray);
}
/* worksub */
.worksub_con_wrap{
  width: 100%;
  margin-top: 10rem;
  position: relative;
  overflow: hidden;
}
.worksub_con{
  width: 100%;
  padding: 4rem 5%;
  border-radius: 8px;
  background-color: #fff;
  border: 1px solid #e9e9e9;
  font-size: 0.694vw;
  /* text-align: center; */
  /* transform: rotateX(0deg); */
  transform-origin: top center;
  transition: all 0.6s;
  opacity: 1;
}
.worksub_con a{
  display: flex; align-items: center; justify-content: space-between; 
}
.worksub_con.back{
  position: absolute; top: 0; left: 0;
  background-color: #000;
  /* transform: rotateX(180deg); */
  transform-origin: bottom center;
  opacity: 0;
}

.worksub_con_tit>h3{
  font-size: clamp( 28px ,2.6em ,2.6em);
  /* font-size: clamp( 20px ,2em, 2em ); */
  font-weight: 700;
}
.worksub_con_txt{
  width: 50%;
  min-width: 560px;
  display: flex; align-items: center; justify-content: space-between;
}
.worksub_con_txt p{
  font-size: clamp(18px, 2.1em, 2.1em);
  text-align: center;
  /* font-size: clamp( 18px ,1.6em, 1.6em ); */
  color: var(--darkgray);
  margin-top: 30px;
}
.worksub_con.back .worksub_con_txt p,.worksub_con.back .worksub_con_tit>h3{
  color : #fff;
}
.worksub_con_txt>div{
  width: 25%;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
.worksub_con_txt>div:nth-child(2){
  border-left: 1px solid #e9e9e9;
  border-right: 1px solid #e9e9e9;
}
.worksub_con_txt>div:nth-child(4){
  padding-left: 50px;
}
.worksub_con_txt>div>i{
  width: 100%;
}
.worksub_con_txt>div>i>img{
  width: 60px;
  margin: 0 auto;
}
.link--arrowed {
  display: inline-block;
  height: 100%;
}
.link--arrowed .arrow-icon {
  position: relative;
  top: -1px;
  transition: transform 0.3s ease;
  vertical-align: middle;
}
.link--arrowed .arrow-icon--circle {
  transition: stroke-dashoffset 0.3s ease;
  stroke-dasharray: 95;
  stroke-dashoffset: 95;
}


@media all and ( min-width : 501px ){

  /* hover */
  .work_con:hover img{
    transform: scale3d(1.2,1.2,1);
  }
  .shimmer-div {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(120deg,
    rgba(255, 255, 0, 0) 30%,
    rgba(222, 255, 248, 0.18) 65%,
    rgba(255, 0, 255, 0) 80%);
    transform: translateX(-100%);
    mix-blend-mode: overlay;
  }
  @keyframes shimmer {
    to {transform: translateX(330%);}
  }
  .work_con:hover .shimmer-div{
    animation: shimmer 2s none ease-in-out;
  }
  /* .worksub_con_wrap:hover .worksub_con.front{
    transform: rotateX(180deg);
  }
  .worksub_con_wrap:hover .worksub_con.back{
    transform: rotateX(0deg);
  } */
  .worksub_con_wrap:hover .worksub_con.front{
    opacity: 0;
  }
  .worksub_con_wrap:hover .worksub_con.back{
    opacity: 1;
  }
  .worksub_con_wrap:hover .arrow-icon {
    transform: translate3d(15px, 0, 0);
  }
  .worksub_con_wrap:hover .arrow-icon--circle {
    stroke-dashoffset: 0;
  }

}

@media all and ( max-width : 1024px){
  .main_text_wrap{
    padding: 11.25rem 3%;
  }
  .main_text_wrap h2{
    font-size: 4vw; 
  }
  .main_text_wrap p{
    font-size: 1.25rem;
  }

  /* worksub */

  .worksub_con{
    padding: 4rem 1rem;
  }
  .worksub_con a{
    flex-direction: column;
  }
  .worksub_con_tit>h3{
    font-size: 2rem;
  }
  .worksub_con_txt{
    width: 100%;
    min-width: initial;
    margin-top: 4rem;
  }
  .worksub_con_txt p{
    font-size: 1.25rem;
    margin-top: 10px;
  }
  .worksub_con_txt>div{
    width: 25%;
  }
  .worksub_con_txt>div:nth-child(4){
    padding-left: 10%;
    padding-right: 3%;
    /* width: 19%; */
    display: flex;
    justify-content: center;
  }
  .worksub_con_txt>div>i>img{
    width: 50px;
  }
  .link--arrowed .arrow-icon {
    position: relative;
    top: -1px;
    width: 50px;
  }

}

@media all and ( max-width : 500px ){

  .main_visual_wrap{
    width: 100%; height: 785px;
  }
  /*  */
  .swiper.mainbg{
    width: 100%; height: 100%;
    position: relative;
  }
  .swiper.mainbg::after{
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.12);
    mix-blend-mode: multiply;
    position: absolute;
    top: 0; left: 0;
    z-index: 1;
  }
  .hero_img img{
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: 40% center;
  }
  
  /*  */
  .main_visual_text h1{
    font-size: 14.5vw;
  }

  /*  */
  #main_text{
    width: 100%;
    background-color: var(--lightgray);
    margin-top: 785px;
  }
  .main_text_wrap{
    width: 100%; 
    padding: 11.25rem 3%;
  }
  .main_text_wrap>div{
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
  .main_text_wrap h2{
    width: 100%;
    font-size: 7vw; font-weight: 700;
    line-height: 1.4;
    white-space: initial; text-align: center;
    word-break: keep-all;
  }
  .main_text_wrap p{
    font-size: 1.25rem; 
    text-align: center;
    margin-top: 50px;
  }
  /*  */
  .main_contents_wrap{
    width: 100%; 
    padding: 15rem 0 ;
  }
  .work_con_wrap{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .work_con{
    width: 100%; 
    height: auto;
    min-height: initial;
    margin: 1rem 0;
    border-radius: 10px;
  }
  .work_con img{
    width: 100%; height: 100%;
    object-fit: cover;
    transition: all 0.6s;
  }
  .work_con_tit{
    width: 100%;
    position: absolute;
    bottom: 5%; left: 0;
    padding: 0 3%;
  }
  .work_con_tit>h3{
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--font-white);
  }
  .work_con_tit>p{
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--lightgray);
  }
  /* worksub */
  .worksub_con_wrap{
    width: 100%;
    margin-top: 5rem;
  }
  .worksub_con{
    width: 100%;
    padding: 3rem 0.25rem;
    border-radius: 10px;
  }
  .worksub_con a{
    flex-direction: column;
  }
  .worksub_con.back{
    opacity: 1;
  }
  .worksub_con_tit>h3{
    font-size: 2rem;
  }
  .worksub_con_txt{
    margin-top: 3rem;
  }
  .worksub_con_txt>div{
    width: 27%;
  }
  .worksub_con_txt>div:nth-child(4){
    padding-left: 0;
    padding-right: 3%;
    width: 19%;
    justify-content: flex-end;
  }
  .link--arrowed .arrow-icon {
    position: relative;
    top: -1px;
    width: 42px;
  }
  .link--arrowed .arrow-icon--circle {
    stroke-dasharray: 95;
    stroke-dashoffset: 0;
  }


}