@charset "utf-8";
/* 기본설정 */
@import "default.css";

.aboutslide{
    position: relative;
}
.aboutslide img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

section.about-sec01 {
    padding: 0 0 100px;
}

/* 전체 레이아웃 */
.about-wrap {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
}

/* LEFT */
.about-left {
  width: 55.7%;
  max-width: 1070px;
  position: relative;
}
.about-left .text {
  position: absolute;
  bottom: 47px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  width: 90%;
}
.about-left .text h2 {
    color: #fff;
    font-size: 69px;
    margin-bottom: 10px;
}
.about-left .text p {
    color: #fff;
    font-size: 14px;
}



/* RIGHT 이미지, 텍스트 */

.about-img img, .about-img video {
  width: 100%;
  max-width: 1070px;
  display: block;
  object-fit: cover;
}



.about-right {
  width: 44.3%;
  background: #EBEAE7;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* 로고 */
.about-logo {
  display: block;
  width: 114px;
  margin-bottom: 70px;
  
}
/* 텍스트 */
.about-title {
  font-size: 32px;
  margin-bottom: 28px;
}

.about-text {
  line-height: 1.7;
}


/* 반응형 */

@media(max-width:1024px){
   .about-wrap {
        flex-direction: column-reverse;
   } 
   .about-left, .about-right {
        width: 100%;
   }
   .about-right {
        padding: 70px 0;
   }
   .about-logo {
        width: 94px;
        margin-bottom: 40px;
    }

    /* 텍스트 */
    .about-title {
        font-size: 22px;
        margin-bottom: 20px;
    }
}

@media(max-width:768px){
    .about-left .text {
        bottom: 15px;
    }
    .about-left .text h2 {
        font-size: 25px;
        margin-bottom: 5px;
    }
    .about-left .text p {
        font-size: 7px;
    }
}

@media (max-width: 500px) {
   
}
/* about-sec01 끝 */


/* about-sec02 시작*/

.about-sec02 {
    padding: 200px 10.41vw 150px;
}

.about-sec02-container {
    
    margin: 0 auto;
}

.about-sec02-images {
    display: flex;
    gap: 50px;
    margin-bottom: 120px;
}

.about-sec02-image {
    flex: 1;
    overflow: hidden;
    position: relative;
    /* transition: all 1s ease-out; */
}
.about-sec02-image img {
    width: 100%;
    object-fit: cover;
    display: block;
}
/* .about-sec02-image.right {
    clip-path: ellipse(100% 109% at 12% 23%);
}
.about-sec02-image.right.on {
    clip-path: ellipse(100% 109% at 34% 20%)
} */

/* .about-sec02-image.right {
    position: relative;
    overflow: hidden;

   
    clip-path: polygon(0 0, 100% 0, 100% 67%, 83% 100%, 0 100%);

    transition: clip-path 1.2s cubic-bezier(.22,.61,.36,1);
}


.about-sec02-image.right.on {
    clip-path: polygon(
        0 0,
        100% 0,
        100% 100%,
        100% 100%,
        0 100%
    );
}
.about-sec02-image.right::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;

    width: 120px;
    height: 120px;

    background: linear-gradient(135deg, rgba(0, 0, 0, 0.95), rgba(255, 255, 255, 0.8));
    clip-path: polygon(0 0, 100% 0%, 0% 100%);

    opacity: 1;
    transform-origin: right bottom;
    transform:
        perspective(800px)
        rotateX(0deg)
        rotateY(0deg)
        scale(1);

    filter: drop-shadow(-8px -8px 12px rgba(0,0,0,0.25));

    transition:
        opacity 0.7s ease,
        transform 1.2s cubic-bezier(.22,.61,.36,1),
        filter 1.2s ease;

    pointer-events: none;
}


.about-sec02-image.right.on::after {
    opacity: 0;
    transform:
        perspective(800px)
        rotateX(65deg)
        rotateY(-65deg)
        scale(0.6);

    filter: drop-shadow(0 0 0 rgba(0,0,0,0));
} */


/* 접힌 페이지 */
.about-sec02-image.right::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 150px;
    height: 150px;
    background: linear-gradient(135deg, 
        rgba(130, 130, 130, 0.7) 0%, 
        rgba(230, 230, 230, 0.7) 30%, 
        rgba(255, 255, 255, 1) 100%);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    box-shadow: -5px 5px 15px rgba(0, 0, 0, 0.2);
    transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: 1s;
    transform-origin: bottom right;
    pointer-events: none;
}

/* 접힌 부분 안쪽 그림자 */
.about-sec02-image.right::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 150px;
    height: 150px;
    background: linear-gradient(135deg, 
        transparent 0%, 
        rgba(0, 0, 0, 0.0) 50%, 
        rgba(0, 0, 0, 0.0) 100%);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: 1s;
    transform-origin: bottom right;
    z-index: 2;
    pointer-events: none;
}

/* on 클래스 - 펴지는 애니메이션 */
.about-sec02-image.right.on::after {
    width: 0;
    height: 0;
    box-shadow: none;
}

.about-sec02-image.right.on::before {
    width: 0;
    height: 0;
}

/* 이미지 클리핑 (선택사항) */
.about-sec02-image.right img {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 150px), calc(100% - 150px) 100%, 0 100%);
    transition: clip-path 1s cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: 1s;
}

.about-sec02-image.right.on img {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%, 0 100%);
}
















.about-sec02-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.about-sec02-title {
    font-size: 32px;
    margin-bottom: 35px;
}

.about-sec02-desc {
    line-height: 1.8;
    margin-bottom: 5px;
}

.about-sec02-desc:last-child {
    margin-bottom: 0;
}

/* 768px 이하 반응형 */
@media (max-width: 768px) {
    .about-sec02 {
        padding: 50px 5vw;
    }
    
    .about-sec02-images {
        flex-direction: column;
        gap: 22px;
        margin-bottom: 40px;
    }
    
    .about-sec02-image img {
        
    }
    
    .about-sec02-title {
        font-size: 22px;
        margin-bottom: 20px;
    }
    
    .about-sec02-desc {
        width: 94%;
        margin: 0 auto;
    }
}


/* about-sec02 끝 */


/* about - map section */

section.aboutmap {
    margin-top: 150px;
    padding: 150px 10.41vw;
    background: url(/html/images/about/bg01.jpg) no-repeat center / cover;
    background-size: 100% auto;
}

@media (max-width: 1200px) {
    
    section.aboutmap {
        margin-top: 50px;
    }
    .mapbox{
        width: 85%;
        margin: 0 auto;
        max-height: 750px;
        margin-bottom: 5%;
    }
    .mapbox img{
        width: 100%;
        max-height: 750px;
    }
}

@media (max-width:768px) {
   section.aboutmap {
    padding: 50px 5vw;
    background: url(/html/images/about/m/bg01.jpg) no-repeat center / cover;
} 
}




/*메인 이외 탑슬라이드 */
/* 초기 상태 */
.topslide .swiper-slide:first-child .slide-caption h2,
.topslide .swiper-slide:first-child .slide-caption p,
.topslide .swiper-slide:first-child .slide-caption .view-more-button {
  opacity: 0;
  transform: translateY(45px);
}

/* 애니메이션 클래스 적용 시 */
.topslide .swiper-slide:first-child .slide-caption.animate h2 {
  transition: all 1s ease;
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s;
}

.topslide .swiper-slide:first-child .slide-caption.animate p {
  transition: all 1s ease;
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.4s;
}