/* mainpage1 */

.index_m{
    display: none;
}

/* 메인 슬라이더 전체 컨테이너 */
.main-slider {
    width: 100%;
    height: 100vh; /* 화면 전체 높이 */
}

.swiper {
    width: 100%;
    height: 100%;
    position: relative;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    color: #fff;
    background-size: cover;
    background-position: center;

    /* 슬라이드 내부 콘텐츠 정렬 */
    display: flex;
    justify-content: center;
    align-items: center;
}

.slide-video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 영상이 슬라이드에 꽉 차도록 설정 */
    z-index: -1; /* 텍스트보다 뒤에 있도록 설정 */
}

/* ▼ 각 슬라이드의 배경 이미지를 여기에 설정하세요 ▼ */

.swiper-slide.slide-2 {
    background-image: url('../img/index/main_img_01_2_p.webp'); /* 2번 슬라이드 배경 이미지 경로 */
}


/* 어두운 오버레이 추가 (텍스트가 잘 보이도록) */
.swiper-slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
}

.mainpage4 .swiper-slide::before{
    background-color: rgba(0, 0, 0, 0.0);
}

/* 슬라이드 위 텍스트 콘텐츠 */
.slide-content {
    position: absolute; /* 오버레이 위에 텍스트가 오도록 */
    z-index: 10;
    top: 50%; left: 50%;
    right: 30%; width: 70%;
    transform: translate(-50%, -50%);
    padding: 20px;
    text-align: left;
}

.slide-content .sub-title {
    font-size: 1.2rem;
    font-weight: 500;
}

.slide-content .main-title {
    font-size: 5rem;
    font-weight: 700;
    margin: 10px 0;
    color: #fff;
    letter-spacing: 4px;
}

.slide-content .main-title::after{
    content: '┐';
    color: #fff;
    position: absolute;
    top: -11px;
}

.slide-content .description {
    font-size: 2.2rem;
    line-height: 1.6;
}


/* Swiper 네비게이션 버튼 및 페이징 버튼 색상 변경 (기본은 파란색) */
.swiper-button-next,
.swiper-button-prev {
    color: #ffffff !important; /* 화살표 색상 */
}

.swiper-pagination-bullet-active {
    background: #ffffff !important; /* 현재 활성화된 동그라미 색상 */
}

















/* mainpage2 */
    
.mainpage2 .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; 
    min-height: 450px; 
    display: flex;
    flex-direction: column; 
    justify-content: flex-start; 
    width: 30%;
    color: #595959; font-size: 1.2rem;
}

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

.advantages-wrap .advantage-card .advantage-p h2 {
    margin-top: 15%; margin-bottom: 3%;
    color: #1a1a1a; font-size: 1.7rem;
    font-weight: 700;
}



/* mainpage3 */
.mainpage3{
    background-image: url('../img/index/index3_img_p.webp');
    background-size: cover; background-position: center; background-repeat: no-repeat; 
    position: relative;
    width: 100%;
    overflow: hidden;
}

.mainpage3 .section-title{
    display: none;
}



.mainpage3:hover #custom-cursor {
    border: 2px solid #fff !important;
}

.mainpage3 .br-img{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse;
    width: 80%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.mainpage3 .image-section{
    width: 47%;
}

.mainpage3 .image-section img{
    border-radius: 30px;
}

.mainpage3 .image-container{
    display: none;
}

.mainpage3 .text-section{
    display: flex;
    flex-direction: column;
    width: 100%;
}

.mainpage3 .text-section .text-container{
    display: flex;
    flex-direction: column;
}

.text-section{
    display: flex;
    justify-content: space-between;
    align-items:center;
    align-items: flex-start;
}

.text-section .text-container{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    position: relative;
}

.mainpage3 .text-section .text-container h1{
    font-size: 1.5rem;
    font-weight: 900;
    color: #61B3E6;
    margin-bottom: 10px;
    position: relative;
}

.mainpage3 .text-section .text-container h1::after{
    content: '┐';
    color: #61B3E6;
    position: absolute;
    top: -11px;
}

.mainpage3 .text-section .text-container h2{
    font-size: 2.2rem;
    font-weight: 600;
    font-family: 'Pretendard', sans-serif;
    color: #222;
    margin: 0;
    line-height: 1.3;
}

.mainpage3 .text-container span{
    width: 30px;
    height: 4px;
    background: #222;
    position: absolute;
}

.mainpage3 .text-container span:nth-child(1){
    transform: rotate(90deg);
}

.mainpage3 .text-container span:nth-child(1){
    top: 1px;
    right: 0px;
}

.mainpage3 .text-container span:nth-child(2){
    top: -13px;
    right: 13px;
}

.text-section .text-container p{
    font-weight: 300;
    margin:0;
    padding-top: 6%;
}


.link-section{
    color: #fff;
    margin-top: 5%;
    font-size: 1.2em;
    cursor: pointer;
    display: flex;
    width: 50%;
}


.link-hc{
    padding: 1.5% 5%;
    background-color: #222;
    margin-right: 9%;
    transition: background-color 0.5s ease;
}

.link-hc:hover{
    background-color: #222222b5
}

.button_section{
    padding: 1.5% 5%;transition: background-color 0.5s ease;
    background-color: #222;
}

.button_section button{
    background-color: #22222200;
    border: 0px;
    font-size: 1.2rem;
    color: #fff;
    height: 100%;
}

.button_section:hover{
    background-color: #222222b5
}



/* mainpage4 */

.mainpage4{
    position: relative;
    background-color: #fff;
}

.mainpage4 .section-title{
    display: none;
}

.mainpage4 .page-section-wrapper div:nth-child(2) img{
    border-radius: 30px;
    width: 100%;
}


.mainpage4 .page-section-wrapper .pcp{
    font-size: 2.2rem;
    font-weight: 600;
    color: #222;
    position: relative;
    margin-bottom: 8%;
}


.mainpage4 .mx-auto{ 
    padding-top: 0% !important;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}

.mainpage4 .page4div div:nth-child(1){
    width: 40%;
}

.mainpage4 .page4div div:nth-child(2){
    width: 54%;
}

.mainpage4 .page-section-wrapper div:nth-child(2) div{
    font-size: 1.4rem;
    color: #5a5a5a;
    height: 40%;
    border-radius: 30px;
}

.mainpage4 .page4div{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}


.mainpage4 .main-text-section p{
    font-size: 1.5rem;

}

.mainpage4 .main-text-section{
    font-family: 'Unageo', 'Pretendard', sans-serif;
    position: absolute;
    bottom: 0%;
    left: 50%;
    transform: translate(-50%, -25%);
    width: 80%;
    font-size: 3.3rem;
    font-weight: 200;
    color: #5a5a5a;
}

.mainpage4 .main-text-section p{
    font-size: 3rem;
}

.text-bs{
    color: #61B3E6 ;
    font-weight: 900 ;
    position: relative;
    margin-bottom: 1%;
    font-size: 1.5rem;
}

.text-bs::after{
    content: '┐';
    color: #61B3E6;
    position: absolute;
    top: -21px;
}

/* 네비게이션 버튼 스타일링 */
.swiper-button-next, .swiper-button-prev {
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.2);
    width: 44px !important;
    height: 44px !important;
    border-radius: 50%;
    transition: background-color 0.3s;
}
.swiper-button-next:hover, .swiper-button-prev:hover {
    background-color: rgba(0, 0, 0, 0.4);
}
.swiper-button-next:after, .swiper-button-prev:after {
    font-size: 20px !important;
    font-weight: bold;
}
/* 페이지네이션(점) 스타일링 */

.swiper-pagination{
    height: 30px !important;
}
.swiper-pagination-bullet {
    background: #ffffff;
    opacity: 0.7;
}
.swiper-pagination-bullet-active {
    background: #34d399; /* 활성 색상 (Tailwind Green 400) */
    opacity: 1;
}




.mt-12 form{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
}

.mt-12 form input{
    width: 100%; border-radius: 8px;
    min-height: 80px;
    border: 1.5px solid #fff;
    background-color: #ffffff8b;
}

.mt-12 form textarea{
    width: 100%;
    border-radius: 8px;
    min-height: 250px;
    border: 1.5px solid #fff;
    background-color: #ffffff8b;;
}




/* AI Q&A 섹션을 위한 추가 스타일 */
.loader {
    border: 4px solid #f3f3f3;
    border-radius: 50%;
    border-top: 4px solid #3498db;
    width: 40px;
    height: 40px;
    animation: spin 2s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
#ai-answer-container {
    text-align: left;
    line-height: 1.8;
}


.mt-5{
    display: block;
}



.mainpage5{
    background-color: #f8fafc; /* 배경색 */

}

.mainpage5 .section-title{
    margin-bottom: 0.3%;
    text-align: center;
}

/* 전체를 감싸는 컨테이너 */
.qa-container {
    height: 100%; margin: auto;
}

/* 설명 */
.qa-description {
  color: #5a5a5a; /* 회색 */
  text-align: center;
  margin-bottom: 3%;
}

/* 입력 폼 */
.qa-form {
  width: 50%;
  margin: auto;
}

/* 질문 입력창 */
.qa-input {
  box-sizing: border-box; /* 패딩과 테두리를 너비에 포함 */
  width: 100%;
  border: 1px solid #cbd5e1; /* 테두리 색 */
  border-radius: 0.5rem; /* 모서리 둥글게 */
  padding: 0.75rem 1rem; /* 내부 여백 */
  font-size: 1em; 
}
.qa-input::placeholder {
  color: #94a3b8; /* placeholder 색상 */
}
.qa-input:focus {
  outline: none; /* 기본 포커스 아웃라인 제거 */
  box-shadow: 0 0 0 2px #61B3E6; /* 파란색 포커스 링 */
}

/* 질문하기 버튼 */
.qa-button {
  margin : 1rem 0;
  width: 100%;
  border-radius: 0.5rem;
  background-color: #61B3E6; /* 어두운 배경색 */
  padding: 0.75rem 1rem;
  font-size: 1.125rem;
  font-weight: 700;
  color: white; /* 흰색 글자 */
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}
.qa-button:hover {
  background-color: #334155; /* 마우스 올렸을 때 색 */
}
.qa-button:active {
  background-color: #0f172a; /* 클릭했을 때 색 */
}

/* AI 답변 컨테이너 스타일 */
.qa-answer {
  padding: 1.5rem; /* 24px */
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem; /* 8px */
  background-color: #ffffff;
  color: #334155;
  line-height: 1.6;
  width: 50%; margin:auto;
}

/* 자바스크립트가 제어할 'hidden' 클래스 */
.hidden {
  display: none;
}

















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

.mainpage1 {
    background-image: url('../img/index/main_img_01_m.webp'); 
    background-position: center; /* 모바일에서 시작 위치를 오른쪽으로 설정 */
}

.index_p{
    display: none;
}

.index_m{
    display: block;
}


.swiper-slide.slide-2 {
    background-image: url('../img/index/main_img_01_2_m.webp'); /* 2번 슬라이드 배경 이미지 경로 */
}


.slide-content .main-title{
    font-size: 3rem;
    letter-spacing:2px;
}

.slide-content .description{
    font-size: 1.2rem;
    width: 77%; margin: auto;
}

.slide-content{
    top: 75%;
    text-align: center;
    width: 100%;
}

.mainpage1 div{
    width: 75%;
    top:78%;
    text-align: center;
    color: #fff;
}

.mainpage1 div h1{
    font-size: 3rem;
    line-height: 3rem;
    margin-bottom: 7%;
    color:#fff;
}

.mainpage1 div p{
    font-size: 1.3rem;
}

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

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

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

.advantages-wrap .advantage-card .icon-wrap{
    margin: 0;
}

.advantages-wrap .advantage-card:nth-child(1) img{
    width: 30%;
}
.advantages-wrap .advantage-card:nth-child(2) img{
    width: 23%;
}
.advantages-wrap .advantage-card:nth-child(3) img{
    width: 23%;
}

.advantages-wrap .advantage-card .advantage-p h2{
    font-size: 1.4rem;
    margin-top: 17%;
    margin-bottom: 5%;
    display: block;
}

.mainpage3{
    background-image: none;
    background-color: rgb(255, 249, 243);
}

.mainpage3 .section-title{
    display: block;
    position: relative;
}

.mainpage3 .section-title h1{
    color: #222;
}

.mainpage3 .section-title h1::after{
    color: #222;
}


.mainpage3 .section-title span{
    width: 25px;
    height: 4px;
    background-color: #222;
    position: absolute;
}

.mainpage3 .section-title span:nth-child(1){
    transform: rotate(90deg);
    top: -13px;
    right: -15px;
}

.mainpage3 .section-title span:nth-child(2){
    top: -24px;
    right: -4px;
}

.mainpage3 .section-title h3{
    font-size: 1.5rem;
    color: #222;
    font-weight: 600;
    font-family: 'Pretendard', sans-serif;
    letter-spacing: 0px;
}

.mainpage3 .br-img{
    flex-direction: column;
    position: static;
    transform: translate(0px, 0px);
    width: 100%;
}

.mainpage3 .image-section{
    width: 100%;
    padding: 3% 0 6%;
}

.mainpage3 .image-container{
    display: block;
}

.mainpage3 .image-section{
    flex-direction: column;
    align-items: center;
}

.mainpage3 .text-section{
    align-items: center;
    padding: 2% 0;
}

.mainpage3 .text-section .text-container p{
    width: 100%;
}

.mainpage3 .text-section .text-container{
    flex-direction: column;
    width: 100%;
    align-items: center;
}

.mainpage3 .text-section .text-container span{
    display: none;

}

.mainpage3 .text-section .text-container h1,h2{
    display: none;
}

.mainpage3 .link-section{
    width: 100%;
    font-size: 0.8rem;
    text-align: center;
    margin-top: 9%;
    justify-content: space-between;
}

.mainpage3 .link-hc,.mainpage3 .button_section{
    padding: 2.4% 4%;
    margin: 0;
}

.mainpage3 .button_section button{
    font-size: 0.8rem;

}

.mainpage4 .section-title{
    position: relative;
    display: block;
    margin-top: 4%;
}

.mainpage4 .pcp{
    display: none;
}

.leading-relaxed{
    line-height: 1.4 !important;
}

.text-gray-600 .text-blue-500{
    display: none;
}

.mainpage4 .page-section-wrapper div:nth-child(2) img{
    border-radius: 30px;
    width: 100%;
}  

.mainpage4 .page4div div:nth-child(2){
    width: 100%;
}

.mainpage4 .page4div div:nth-child(1){
    width: 100%;
}

.mainpage4 .page-section-wrapper div:nth-child(2) div{
    font-size: 1.4rem;
    color: #5a5a5a;
    border-radius: 30px;
}

.mainpage4 .page4div{
    flex-direction: column;
    margin-top: 0;
}

.mainpage4 .text-left{
    margin-top: 30px;
}

.mainpage4 .text-left .text-bs{
    display: none;
}

.mainpage4 .main-text-section p{
    font-size: 1.5rem;

}

.mainpage5 .section-title{
    text-align: left;
    margin-bottom: 1.6%;
}

.qa-description{
    text-align: left;
    margin-bottom: 10%;
}

.qa-form{
    width: 100%;
}

.qa-answer{
    width: 100%;
}


}










































/* -------------------- 태블릿 반응형 (max-width: 1024px) -------------------- */
@media screen and (min-width: 721px) and (max-width: 1024px) {


    
    /* mainpage1 */
    

.slide-content .main-title {
    font-size: 3rem;
    font-weight: 700;
    margin: 10px 0;
    color: #fff;
    letter-spacing: 4px;
}

.slide-content .main-title::after{
    content: '┐';
    color: #fff;
    position: absolute;
    top: -11px;
}

.slide-content .description {
    font-size: 1.7rem;
    line-height: 1.6;
}





    /* mainpage2 */
    .mainpage2 .advantages-wrap {
        align-items: center;
        gap: 30px;
    }

    .advantages-wrap .advantage-card {
        width: 100%; /* 태블릿에서 카드 너비 조정 */
        min-height: 340px; /* 최소 높이 해제 */
        padding: 5% 4%;
        text-align: left;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
    }

    .advantages-wrap .advantage-card .advantage-p h2 {
        margin-top: 14%; /* 태블릿에서 제목 상단 마진 조정 */
        font-size: 1.2rem;
    }

    .advantages-wrap .advantage-card .icon-wrap{
        width: 100%;
        margin: 0 8% 0 5%;
    }

    .advantages-wrap .advantage-card:nth-child(1) img{
    width: 30%;
}
.advantages-wrap .advantage-card:nth-child(2) img{
    width: 23%;
}
.advantages-wrap .advantage-card:nth-child(3) img{
    width: 23%;
}

    /* mainpage3 */
    .mainpage3 .slide {
        width: 80%; /* 태블릿에서 슬라이드 너비 조정 */
        gap: 20px;
        padding: 10% 0 0;
    }

    .mainpage3 .image-section {
        flex-direction: row; 
        align-items: center;
        gap: 20px;
    }

 

    .mainpage3 .text-section {
        padding:0% 1% 0 1%;
        align-items: flex-start;
    }

    .text-section .text-container {
        flex-direction: column;
        width: 100%;
        margin-bottom: 20px;
    }

    .text-section .button_section{
        width: 20%;
    }

    .text-section .button_section a{
        font-size: 0.8rem;
    }

    .text-section .text-container h1 {
        padding-right: 0;
        font-size: 2em;
    }

    .button_section button {
        font-size: 1.2em;
        margin-top: 20%;
        padding: 12px 25px;
    }

    .slider-button {
        font-size: 1em;
        padding: 7px 12px;
    }

    /* mainpage4 */
    .mainpage4 .page-section-wrapper img {
        display: block;
        margin: 0 auto;
        width: 10%; /* 태블릿에서 로고 크기 조정 */
    }

    .mainpage4 .main-text-section {
        position: static; /* 태블릿에서 위치 고정 해제 */
        transform: none;
        width: 80%;
        margin: 25% auto 0;
        font-size: 2.3rem;
    }

    .mainpage4 .main-text-section p {
        font-size: 2rem;
    }


}



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


.mainpage4 .main-text-section p{
    font-size: 4rem;
}


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



}