.about-title{
    width: 80%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.about-title p{
    font-weight: 600;
}



/* aboutpage1 */

.aboutpage1 {
    background-color: #fff;
    background-size: cover; background-position: center; background-repeat: no-repeat; 
    position: relative;
}

.aboutimg-section{
    width: 25%;
    left: 70%; top: 50%;
    transform: translate(-50%,-50%);
    position: relative;
}


/* aboutpage2 */
.aboutpage2 {
    position: relative;
    overflow: hidden;
    background-color: #f9f9f9;
}

.for-mobile{
    width: 35%;
    left: 70%; top: 50%;
    transform: translate(-50%,-50%);
    position: relative;
}

.for-mobile img{
    width: 100%;
    border-radius: 40px;
}



/* aboutpage3 */

.aboutpage3 {
    background-color: #fff;
    background-size: cover; background-position: center; background-repeat: no-repeat;
    position: relative; 
}


/* aboutpage4 */

.aboutpage4 {
    position: relative;
}

.advantages-wrap{
    display: flex;
    gap: 30px;
    justify-content: space-between;
}

.advantages-wrap .advantage-card {
    background-color: #f9f9f9;
    padding:4%;
    border-radius: 30px;
    text-align: left; 
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
    min-height: 450px; 
    display: flex;
    flex-direction: column; 
    justify-content: flex-start; 
    width: 30%; align-items: center;
    text-align: center;
    color: #595959; font-size: 1.2rem;
}

.advantages-wrap .advantage-card:hover {
    transform: translateY(-5px); /* 호버 시 살짝 위로 이동 */
}
.advantages-wrap .advantage-card .icon-wrap{
    margin-top: 7%;
}

.advantages-wrap .advantage-card .advantage-p h2 {
    margin-top: 23%; margin-bottom: 3%;
    color: #61B3E6; font-size: 1.2rem;
    font-weight: 900;
}

.advantages-wrap .advantage-card .advantage-p p{
    font-size:1.7rem;
    font-weight: 500;
}


/* aboutpage5 */

.aboutpage5 {
    background-color: #fff; position: relative;
    background-image: url('../img/about/about5_img_02_p.webp');
    background-repeat: no-repeat;
    background-size: cover;

}

.aboutpage5 .section-title h1{
    color: #61B3E6;
}

.aboutpage5 .section-title h1::after{
    color: #61B3E6;
} 

.aboutpage5 .section-title p{
    color: #222;
}



















/* -------------------- 모바일 반응형 -------------------- */
@media screen and (max-width: 720px) {

.about-title{
    top:30%; width: 82%;
    z-index: 1;
}

.aboutimg-section{
    width: 65%;
    left: 40%;
    top: 65%;
}

.aboutpage1 .aboutimg-section{
    background-color: #fff; border-radius: 20px;
    background-image: url('../img/about/about_img_01_p.webp');
    height: 35%; width: 80%; left: 50%;
    background-position: center; background-repeat: no-repeat; 
    background-size: contain;
}

.aboutpage1 .aboutimg-section img{
    display: none;
}

.aboutpage2{
    min-height: 800px;
}


.aboutpage2 .for-desktop {
    display: none;
}


.aboutpage2 .about-title{
    top:28%
}

.aboutpage2 .aboutimg-section{
    width: 42%;
    top:60%;
}

/* 2. 모바일 슬라이더를 모바일에서 보여주기 및 스타일링 */
    .aboutpage2 .for-mobile {
        display: block;
        position: absolute;
        width: 80%; /* 슬라이더 너비 */
        height: 35%; /* 슬라이더 높이 */
        top: 64%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .aboutpage2 .for-mobile .swiper {
        width: 100%;
        height: 100%;
        border-radius: 10px;
    }

    .aboutpage2 .for-mobile .swiper-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* 이미지가 비율에 맞게 꽉 차도록 */
    }
    
    .aboutpage2 .swiper-pagination-bullet-active {
      background-color: #61B3E6; /* 페이지네이션 활성 색상 */
    }


.page-section-wrapper{
    padding-top: 28%;
}


.aboutpage5{
    background-image: url('../img/about/about5_img_02_m.webp');
}

.advantages-wrap{
    flex-direction: column;
    align-items: center;;
}

.advantages-wrap .advantage-card{
    width: 100%;
    min-height: auto;
    padding: 14% 7%;

}

.advantages-wrap .advantage-card .icon-wrap{
    margin-top: 0;
    width: 27%;;
}

.advantages-wrap .advantage-card .advantage-p h2{
    margin: 0 0 0 0;
    padding-top: 10%;

}

.advantages-wrap .advantage-card .advantage-p p{
    font-size: 1.3rem;
}
























    
}












/* -------------------- 태블릿 반응형 (max-width: 1024px) -------------------- */
@media screen and (min-width: 721px) and (max-width: 1024px) {
    .about-title {
        width: 80%; /* 태블릿에서 제목 너비 조정 */
    }

   

    /* aboutpage3 */
   

    /* aboutpage4 */
    .aboutpage4 .advantages-wrap {
        flex-direction: column; /* 태블릿에서 카드 세로로 정렬 */
        align-items: center;
        gap: 30px;
    }

    .advantages-wrap .advantage-card {
        width: 100%; /* 태블릿에서 카드 너비 조정 */
        min-height: auto;
        padding: 6% 5%;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        text-align: left;
    }

    .advantages-wrap .advantage-card .advantage-p h2 {
        margin-top: 0%;
        font-size: 1.1rem;
    }

    .advantages-wrap .advantage-card .advantage-p p {
        font-size: 1.3rem;
    }

    .advantages-wrap .advantage-card .icon-wrap{
        margin-top: 0;
        width: 14%;
    }
    .advantages-wrap .advantage-card .advantage-p{
        width: 50%;
    }

    /* aboutpage5 */

}





























/* -------------------- 대형 모니터 반응형 -------------------- */
@media screen and (min-width: 1921px) {

.about-title p{
    font-size: 2.5rem;
}

.section-title p{
    font-size: 2.5rem;
}

.advantages-wrap .advantage-card .advantage-p h2{
    font-size: 1.4rem;
}

.advantages-wrap .advantage-card .advantage-p p{
    font-size: 2.1rem;
}

}