@charset "utf-8";
/* 기본설정 */
/* @import "default.css"; */
/* .mo {display: none !important;} */
.contents {
  position: relative;
  z-index: 1;
}
.mainslide{
    height: 100%;
    position: relative;
}
.mainslide img{
    width: 100%;
    height: 100%;
    max-height: 100vh;
    object-fit: cover;
}

body.haru-body { 
  margin: 0; padding: 0;
  background-color: #ECE9E5;
}
body.scroll-lock {
  overflow: hidden;
}
h2 {
  font-size: clamp(28px, 4vw, 63px);
  letter-spacing: 1.89px;
}


/****  main-section01 ****/

.about-section {
  padding: 200px 10vw 400px;
}
.about-inner {
  display: flex;
  gap: 80px;
  align-items: flex-start;
  margin: 0 auto 100px;
}

/* 좌측 큰 이미지 */
.about-image-left {
  max-width: 590px;
  width: 30.72vw;
  overflow: hidden;
}

.about-image-left img {
  width: 100%;
  display: block;
  border-radius: 20px;
  animation: subtleZoom 8s ease-in-out infinite;
}
@keyframes subtleZoom {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

/* 우측 영역 */
.about-content {
  display: flex;
  gap: 50px;
  margin-top: 50px;
}

.about-sub {
  display: block;
  text-align: center;
  letter-spacing: 4px;
  font-size: 14px;
  margin-bottom: 40px;
  color: #333;
}

.about-title {
  font-size: 25px;
  letter-spacing: 9px;
  margin-bottom: 30px;
  color: #b18b5a;
  writing-mode: vertical-lr;
}

.about-text {
  font-size: 17px;
  line-height: 1.5;
  color: #555;
  margin-bottom: 24px;
}

/* 우측 하단 이미지 2개 */

.img-sec01 { /* 공통 */
  max-width: 246px;
  width: 12.8vw;
  border-radius: 20px;
  overflow: hidden;
  display: block;
}
.sec01_02 {
  position: absolute;
  bottom: 20%;
  right: 27%;
} 
.sec01_03 {
  position: absolute;
  bottom: 33%;
  right: 11%;
} 

@media(max-width:1400px){
  .about-section {
    padding: 200px 10vw 21vw;
  }
  .about-inner {
    margin: 0 auto 100px;
  }
  .about-text {
    font-size: 14px;
  }
  .sec01_02 {
    bottom: 10%;
    right: 27%;
  } 
  .sec01_03 {
    bottom: 27%;
    right: 11%;
  } 
}
@media(max-width:1200px){
  .sec01_02 {
    bottom: 8%;
    right: 23%;
  }
  .sec01_03 {
    bottom: 21%;
    right: 6%;
  }
  .imgbox-sec01 {
    display: flex;
    justify-content: center;
    gap: 40px;
    padding: 40px 0;
  }
  .img-sec01 { /* 이미지 공통 */
    max-width: 246px;
    width: 40vw;
    border-radius: 15px;
    height: max-content;
  }
  .sec01_02, .sec01_03 {
    position: static;
  }
  .sec01_02 { margin-top: 80px;}

}
@media(max-width:768px){
  .about-section {
    padding: 70px 10vw 55px;
  }

  .section-head { margin: 0 auto 30px;}
  
  .about-content { 
    margin: 0 auto;
    padding: 0 5px;
    gap: 25px;
  }
  .about-inner {
    margin: 0 auto;
    flex-direction: column;
    gap: 30px;
  }
  .about-image-left { 
    width: 80vw;
    margin: 0 auto;
  }

  .imgbox-sec01 {
    display: flex;
    justify-content: center;
    gap: 40px;
    padding: 40px 0;
  }
  .img-sec01 { /* 이미지 공통 */
    max-width: 246px;
    width: 40vw;
    border-radius: 15px;
    height: max-content;
  }
  .sec01_02, .sec01_03 {
    position: static;
  }
  .sec01_02 { margin-top: 80px;}
 
}

@media(max-width:500px){

  .about-image-left { 
    width: 88vw;
  }
  .about-section {
    padding: 70px 20px 55px;
  }
}

/* 메인 2번째 섹션 */
.main-sec02 {
  width: 100%;
  height: 34.06vw;
  background: url('/html/images/haru/sec02_01.jpg') no-repeat center;
  background-size: cover;
  animation: bright 4s ease-in-out infinite;
}
@keyframes bright {
    0% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(0.7);
    }
    100% {
        filter: brightness(1);
    }
}
.main-sec02 .inner { 
  width: 100%; height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  /* flex-direction: column; */
  gap: 7px;
  padding-right: 11vw;
}
.main-sec02 .inner p {
  color: #fff;
  font-size: 20px;
  letter-spacing: 0.4em;
  font-weight: bold;
  writing-mode: vertical-lr;
  white-space: nowrap;
}
/* 글자 단위 */
.main-sec02 .inner p span {
  display: inline-block;
  opacity: 0.6;
  transition: opacity 0.5s ease;
  text-shadow: 0px 0px 10px #000000;
}

/* 스크롤 감지 후 */
.main-sec02 .inner p.on span {
  opacity: 1;
  text-shadow: none;
}

@media(min-width:1201px){
  .main-sec02 .inner p:nth-of-type(2) { margin-right: 60px;}
  .main-sec02 .inner p:nth-of-type(3) { margin-top: 40px;}
}

@media(max-width:1200px){
  .main-sec02 .inner {
    justify-content: center;
    flex-direction: column;
    padding-right: 0;
  }
  .main-sec02 .inner p {
    writing-mode: horizontal-tb;
    letter-spacing: 0.04em;
  }
}

@media(max-width:768px){
  .main-sec02 {
    width: 100%;
    height: 70vw;
    background: url('/html/images/haru/m/sec02_01.jpg') no-repeat center;
    background-size: cover;
  }
  .main-sec02 .inner p {
    font-size: 10px;
  }
}