.swiper {
    position: relative;
    width: 100%;
    margin-top: 120px;
    margin-top: 6.3vw;
    font-size: 0;
}
.swiper-slide img {
    width: 95%;
}
/* 화살표 버튼 스타일 */
.swiper-button-prev, .swiper-button-next {
    position: absolute !important;
    bottom: 5% !important;
    transform: translateX(-50%) !important;
    top: unset !important;
    right: unset !important;
    height: unset !important;
}
.swiper-button-prev{
    left: 58% !important;
}
.swiper-button-next{
    left: 82% !important;
}
.swiper-button-prev:after,
.swiper-button-next:after{
    display: none;
}
/* 커스텀 슬라이드 바 스타일 */
.custom-pagination {
    position: absolute;
    bottom: 5%;
    left: 70%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    z-index: 999;
    gap: 30px; /* 숫자 간 간격 */
}
.slide-num-wrapper {
    display: flex;
    gap: 30px; /* 숫자 간격 */
    position: relative;
}
/* 슬라이드 번호 */
.slide-num {
    position: relative;
    cursor: pointer;
}
/* 현재 슬라이드일 때 막대 애니메이션 */
.slide-num.active {
    color: transparent;
    width: 270px;
    background-color: rgba(255, 255, 255, .3);
    height: 3px;
}
/* slide-num 아래의 막대 */
.slide-num.active::after {
    content: " ";
    position: absolute;
    bottom: 0px; /* 바가 숫자 아래에 위치 */
    left: 0;
    width: 0%; /* 초기값: 막대기 길이는 0% */
    height: 3px;
    background: white;
    animation: progressBar 8s linear forwards !important; /* 애니메이션을 통해 길이 증가 */
}
/* 프로그래스 바 애니메이션 */
@keyframes progressBar {
    from { width: 0%; }
    to { width: 100%; }
}
.swiper .txt_box{
    padding: 60px 0px 60px 300px;
    width: 55%;
    position: absolute;
    z-index: 999;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    background: linear-gradient(-113deg, rgba(26,42,111,0.8), rgba(0,57,115,0.8));
}
.swiper .txt_box :is(p,h1):first-child{
    color: #ffde8e;
    margin-bottom: 10px;
}
.swiper .txt_box :is(p,h1):nth-child(2) span{
    color: #ffde8e;
}
.swiper .txt_box :is(p,h1):last-child{
    margin-top: 40px;
    font-family: 'LaundryGothic_Regular', sans-serif;
    line-height: 1.5;
}
.swiper-slide-active .txt_box :is(p,h1){
    animation: txt_show 2s both;
}
@keyframes txt_show {
    0% {
        -webkit-filter: blur(12px);
                filter: blur(12px);
        opacity: 0;
      }
      100% {
        -webkit-filter: blur(0px);
                filter: blur(0px);
        opacity: 1;
    }
}

/* real_time */
.real_time{
    background-color: #d2eafe;
    padding: 21px 0;
}
.real_estimate{
    gap: 0 15px;
    width: 30%;
}
.real_estimate .txts{
    gap: 0 20px;
}
.real_estimate .txts p{
    gap: 0 5px;
}
.real_estimate span{
    color: #ff8b00;
    margin-bottom: 3px;
}
.r_t_slider{
    width: 63%;
}
.r_t_slider li{
    display: flex !important;
    gap: 0 9px;
    margin-right: 40px;
}
.r_t_slider .icons{
    width: 10%;
}
.r_t_slider .icons img{
    width: 100%;
}
.r_t_slider p{
    white-space: nowrap;
}

/* main_apply */
.main_apply{
    position: relative;
    padding: 40px 0;
}
.main_apply .blue_box{
    position: absolute;
    top: 0;
    right: 0;
    background-color: #0059a3;
    width: 95%;
    height: 100%;
    z-index: -1;
}
.main_apply .center2{
    position: relative;
    left: 0;
}
.main_apply ul{
    gap: 0 10px;
    width: 65%;
}
.main_apply li{
    width: calc((100% - 20px) / 3);
}
.main_apply li input{
    border: 0;
    border-radius: 10px;
    height: 50px;
    width: 100%;
}
.main_apply li input::placeholder{
    font-family: 'SUIT', sans-serif;
    font-weight: 400;
    color: #aaa;
    font-size: 0.833vw;
}
.m_a_box{
    width: 35%;
}
.m_a_chk{
    gap: 0 10px;
}
.m_a_chk p{
    white-space: nowrap;
}
.m_a_chk span{
    text-decoration: underline;
    text-underline-position: under;
}
.m_a_chk strong{
    font-weight:normal;
}
.m_a_submit input{
    border: 0;
    background-color: #ff8a00;
    padding: 11px 37.5px;
    border-radius: 50px;
}

/* main_section1 */
.main_section1{
    padding: 140px 0 150px;
}
.main_section1 .title{
    gap: 5px 0;
}
.main_section1 ul{
    margin-top: 80px;
    gap: 80px 0;
}
.main_section1 li{
    gap: 0 50px;
}
.main_section1 li:nth-child(odd){
    text-align: right;
    justify-content: flex-end;
}
.main_section1 li .imgs{
    width: 55%;
}
.main_section1 li .imgs img{
    width: 100%;
}
.main_section1 li .txts{
    gap: 40px 0;
}
.main_section1 li .txts p:last-child{
    line-height: 1.5;
}

/* main_section2 */
.main_section2{
    padding: 120px 0 125px;
    background-color: #0059a3;
}
.main_section2 .title{
    gap: 25px 0;
}
.main_section2 .title span{
    box-shadow: inset 0px -0.5em 0 0 #ff8b00;
}
.ms2_con{
    margin: auto;
    margin-top: 40px;
    padding: 40px 80px;
    background-color: #fff;
    border-radius: 10px;
    width: 62%;
}
.ms2_title{
    background-color: #253579;
    border-radius: 10px;
    padding: 16px 0;
}
.ms2_title p{
    width: 25%;
}
.ms2_slider li{
    border-bottom: 1px solid #d7d7d7 !important;
    box-sizing: border-box;
    padding: 14px 0;
    display: flex !important;
}
.ms2_slider li p{
    width: 25%;
}

/* main_section3 */
.main_section3{
    padding: 120px 0 85px;
}
.ms3_con ul{
    margin-top: 60px;
    gap: 40px 0;
}
.ms3_con li{
    border: 1px solid #e1e1e1;
    box-sizing: border-box;
    border-radius: 10px;
    width: 22%;
    height: 105px;
}
.ms3_con li img{
    max-width: 100%;
}
.ms3_con div{
    gap: 15px 0;
    margin-top: 30px;
}
.ms3_con div p{
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.ms3_con .cc1{
    background-color: #111;
}
.ms3_con .cc2{
    background-color: rgba(17,17,17,0.5);
}
.ms3_con .cc3{
    background-color: rgba(17,17,17,0.2);
}

/* main_section4 */
.main_section4{
    background-image: url(../img/ms4_bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    padding: 140px 0 100px;
}
.ms4_slider{
    margin-top: 95px;
}
.ms4_slider .slick-slide {
    transition: transform 0.5s ease, opacity 0.5s ease;
    transform: scale(0.5);
}
.ms4_slider .slick-center {
    transform: scale(0.8);
}
.ms4_slider .slick-prev, 
.ms4_slider .slick-next{
    bottom: 50%;
}
.ms4_slider .slick-prev {
    left: 30%;
}
.ms4_slider .slick-next {
    right: 30%;
}
.ms4_slider .slick-prev:before, 
.ms4_slider .slick-next:before {
    opacity: .3;
    font-size: 30px;
}

/* main_section5 */
.main_section5{
    background-image: url(../img/ms5_bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    padding: 120px 0;
}
.main_section5 .title{
    gap: 20px 0;
}
.main_section5 .title p{
    color: transparent;
	background: linear-gradient(120deg, #fed8a9, #ce934b);
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.ms5_img {
    margin-top: 60px;
    gap: 0 50px;
}
.ms5_img img {
    max-width: 100%;
}
.ms5_txt{
    margin-top: 50px;
}
.ms5_txt span{
    color: #ff8b00;
}

/* main_section6 */
.main_section6{
    padding: 120px 0;
}
.ms6_con{
    margin-top: 70px;
    gap: 0 50px;
}
.ms6_con li{
    gap: 40px 0;
}
.ms6_con li:first-child img{
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
.ms6_img{
    gap: 0 45px;
}
.ms6_img_wrap{
    width: 50%;
}
.ms6_img img{
    width: 100%;
}
.ms6_txt{
    gap: 30px 0;
}
/* (PC 전용) main_section6: 좌/우 컬럼 사이 회색 점선(구분선) */
@media screen and (min-width: 1025px){
    .ms6_con li:nth-child(2){
        position: relative;
    }
    .ms6_con li:nth-child(2)::before{
        content: "";
        position: absolute;
        left: -25px;            /* .ms6_con gap(50px)의 절반: 점선을 가운데로 */
        top: 0;
        bottom: 0;
        border-left: 1px dashed #cfcfcf; /* 회색 점선 */
        pointer-events: none;
    }
}
/* PC 전용: main_section6 오른쪽(3번째 이미지)만 폭 줄이기 */
@media screen and (min-width: 1025px){
    .ms6_con li:nth-child(2) .ms6_img{
        width: 95%;      /* 1,2번 인증서 한 장과 같은 폭(50%) */
        margin: 0 auto;  /* 가운데 정렬 */
    }
}

/* .main_section7 */
.ms7_slider li{
    position: relative;
}
.ms7_slider li .center2{
    position: absolute;
    z-index: 999;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    gap: 30px 0;
}
.ms7_slider .slick-prev, 
.ms7_slider .slick-next{
    bottom: 50%;
}
.ms7_slider .slick-prev {
    left: 10%;
}
.ms7_slider .slick-next {
    right: 10%;
}
.ms7_slider .slick-prev:before, 
.ms7_slider .slick-next:before {
    opacity: .3;
    font-size: 40px;
}

/* main_section8 */
.main_section8{
    padding: 120px 0;
}
.main_section8 .title{
    gap: 25px 0;
}
.ms8_con{
    margin-top: 60px;
}
.ms8_con li{
    gap: 30px 0;
    width: 32%;
}
.ms8_img{
    width: 100%;
}
.ms8_img img{
    width: 100%;
}
.ms8_txt{
    gap: 10px 0;
}
.ms8_txt p:nth-child(2){
    color: #0059a3;
}

/* main_section9 */
.main_section9{
    padding: 120px 0;
    padding: 6.5vw 0;
    background-color: #eaeef2;
    position: relative;
}
/*
.ms9_img{
    position: absolute;
    bottom: 0;
    right: 15%;
    font-size: 0;
}
.ms9_img img{
    width: 100%;
}
*/
.ms9_con1{
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    border-radius: 10px;
    padding: 65px 50px;
    width: 44%;
}
.ms9_con1 ul{
    margin-top: 45px;
    gap: 15px 0;
}
.ms9_con1 li p{
    width: 20%;
}
.ms9_con1 li input{
    width: 80%;
    border: 1px solid #ebebeb;
    box-sizing: border-box;
    height: 50px;
    border-radius: 10px;
}
.ms9_con1 input::placeholder{
    font-family: 'SUIT', sans-serif;
    font-weight: 400;
    color: #ccc;
    font-size: 0.833vw;
}
.ms9_btns{
    margin-top: 70px;
    justify-content: flex-end;
    gap: 0 20px;
}
.ms9_chk{
    gap: 0 10px;
}
.ms9_chk span{
    text-decoration: underline;
    text-underline-position: under;
}
.ms9_chk strong{
    font-weight: normal;
}
.ms9_apply input{
    border: 0;
    background-color: #ff8b00;
    padding: 16px 55px;
    border-radius: 50px;
}
.ms9_con2{
    width: 43%;    
    position: absolute;
    right: 1%;
    bottom: 0;
    gap: 3.5vw 0;
    font-size: 0;
}
.ms9_con2 .txts{
    gap: 40px 0;
}

/* .main_section10 */
.main_section10{
    padding: 30px 0;
}
.ms10_con span{
    color: #ff8b00;
}
.ms10_con strong{
    color: #0059a3;
}
.ms10_call{
    gap: 0 30px;
    border-right: 1px solid #e1e1e1;
    padding-right: 40px;
}
.ms10_call>div{
    gap: 10px 0;
}
.ms10_call>p{
    line-height: 1.5;
}
.ms10_account{
    padding-left: 35px;
    gap: 15px 0;
}
.ms10_account>div{
    gap: 0 15px;
    align-items: baseline;
}
input[type="checkbox"]{
    width: 20px;
    height: 20px;
}
/* PC 견적폼: 주소 입력란과 개인정보 동의 영역 간격 */
@media screen and (min-width: 1025px) {
    .m_a_container {
        column-gap: 20px;
    }

    .main_apply ul {
        width: auto;
        flex: 1;
    }

    .m_a_box {
        flex-shrink: 0;
    }
}
/* mobile */
@media screen and (max-width: 767px){ 
    .swiper{
        margin-top: 80px;
    }
    .swiper-slide{
        height: clamp(420px, 70vh, 500px) !important;
    }
    .swiper-slide img {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
    .swiper .txt_box{
        padding: 40px 100px 40px 20px;
    }
    .swiper .txt_box :is(p,h1){
        white-space: nowrap;
    }
    .swiper .txt_box :is(p,h1):first-child {
        margin-bottom: 10px;
    }
    .swiper .txt_box :is(p,h1):last-child {
        margin-top: 25px;
    }
    .custom-pagination{
        display: none;
    }
    .swiper-button-next, .swiper-button-prev{
        display: none !important;
    }

    /* real_time */
    .real_time .center2{
        flex-direction: column;
        gap: 15px 0;
        align-items: flex-start;
    }
    .real_estimate{
        width: 100%;
        gap: 0 10px;
    }
    .real_estimate .icons{
        width: 20px;
    }
    .real_estimate .icons img{
        width: 100%;
    }
    .real_estimate .txts {
        gap: 0 10px;
    }
    .real_estimate span{
        margin-bottom: 0;
    }
    .r_t_slider {
        width: 100%;
    }
    .r_t_slider li{
        margin-right: 20px;
    }

    /* main_apply */
    .main_apply {
        padding: 30px 0;
    }
    .main_apply .blue_box{
        width: 100%;
    }
    .m_a_container{
        flex-direction: column;
        gap: 20px 0;
    }
    .main_apply ul{
        flex-wrap: wrap;
        gap: 10px 0;
        justify-content: space-between;
        width: 100%;
    }
    .main_apply li{
        width: 48%;
    }
    .main_apply li:last-child{
    width: 100%;
    }
    .main_apply li input{
        height: 45px;
    }
    .main_apply li input::placeholder{
        font-size: 3.433vw;
    }
    .m_a_box{
        width: 100%;
    }
    
    /* 26.02.26 주석처리함. 무료 견적신청 버튼 관련 설정
    .m_a_submit input{
        height: 20px !important;
        width: 50px !important;

        box-sizing: border-box !important;  /* 모바일에서 padding 때문에 커지는 것 방지 
        padding: 0 12px !important;          /* 좌우 여백만 적당히, 위아래는 0 

        /* 글씨도 같이 조금 줄이면 버튼이 덜 커보임 
        --fs: 14px;  /* input에 fs-22가 붙어있어서, 변수로 덮는 게 깔끔함 
    }*/
    /* 26.02.26 모바일 '간편견적신청' 하기 버튼 패딩값 화면 크기에 맞게 축소 추가 */
    .m_a_submit input{
        height: clamp(38px, 9.5vw, 45px);
        width: clamp(118px, 32vw, 150px);

        padding: 0 10px !important; /* '0: 상하여백, 8: 좌우여백) */
        --fs: clamp(13px, 3.4vw, 16px); /* 스마트폰 화면 크기에 맞춰 글자 크기를 유연하게 조절. clamp (최소값,권장비율,최대값)*/
    }
    /* main_section1 */
    .main_section1{
        padding: 80px 0 100px;
    }
    .main_section1 ul {
        margin-top: 40px;
        gap: 40px 0;
    }
    .main_section1 li{
        flex-direction: column;
        gap: 20px 0;
        align-items: flex-start;
    }
    .main_section1 li:nth-child(odd){
        flex-direction: column-reverse;
    }
    .main_section1 li .imgs{
        width: unset;
    }
    .main_section1 .imgs img{
        width: 100%;
    }
    .main_section1 li .txts {
        gap: 20px 0;
        width: 100%;
    }

    /* main_section2 */
    .main_section2 {
        padding: 80px 0;
    }
    .main_section2 .title {
        gap: 15px 0;
    }
    .ms2_con{
        padding: 20px 10px;
        width: 90%;
    }

    /* main_section3 */
    /* === 26.02.26 main_section3: 모바일에서만 거래처 로고 슬라이드 캐러셀(slick) 적용 === */
    
    /* main_section3 */
    .main_section3 {
        padding: 50px 0 70px !important; 
    }
    
    /* 1. 텍스트 아래 간격 축소 */
    .main_section3 .center2 > p {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    
    .ms3_con ul.ms3_logo_list {
        margin-top: 45px !important; /* 텍스트와 슬라이더 사이 간격 제어 */
        padding: 0 10px !important;  /* 전체 슬라이더 좌우 패딩: 우측 테두리 잘림 완벽 방지 */
        box-sizing: border-box !important;
    }

    /* ★ 핵심 해결 1: PC버전 여백(30px)이 슬라이더 내부의 모든 div에 중복 적용되어 거대한 공백을 만드는 버그 완벽 차단 */
    .ms3_con ul.ms3_logo_list div {
        margin-top: 0 !important;
        gap: 0 !important;
    }

    /* ★ 핵심 해결 2: 세로로 떨어지는 현상 방지. Slick 한 줄(Row) 컨테이너를 가로 강제 배열(Flex)로 변경 */
    .ms3_con ul.ms3_logo_list.slick-initialized .slick-slide > div {
        display: flex !important; 
        flex-direction: row !important;
        justify-content: space-between !important; 
        gap: 16px !important; /* ★ 이 수치(gap)를 조절하세요! 숫자를 키울수록 두 로고 사이 간격이 시원하게 벌어집니다 (예: 20px, 24px 등) */
        margin-bottom: 23px !important; 
        width: 100% !important;
    }

    /* Slick 개별 로고 래퍼 */
    .ms3_con ul.ms3_logo_list.slick-initialized .slick-slide > div > div {
        flex: 1 !important; /* ★ % 수치 대신, 간격을 제외한 나머지 빈 공간을 두 로고가 똑같이 반반씩 나눠가지도록 강제 설정 */
        width: auto !important; 
        display: block !important;
        padding: 0 !important; 
        box-sizing: border-box !important;
    }

    /* 실제 로고 박스 스타일 */
    .ms3_con ul.ms3_logo_list.slick-initialized .slick-slide li {
        width: calc(100% - 3px) !important; /* 100%에서 3px을 빼서 짤림 영역을 원천 회피 */
        height: 75px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 3px solid #e1e1e1 !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
        margin: 0 auto !important; /* 줄어든 만큼 중앙 정렬하여 우측 테두리를 벽에서 완전히 빼냄 */
    }

    /* 로고 이미지 크기 최적화 */
    .ms3_con ul.ms3_logo_list.slick-initialized .slick-slide li img {
        max-width: 80% !important;
        max-height: 40px !important;
        object-fit: contain !important;
        margin: auto !important;
    }

    /* 하단 점(dots) 위치 교정 및 기존 정적 점 숨김 */
    .ms3_con .ms3_static_dots {
        display: none !important;
    }
    .ms3_con ul.ms3_logo_list.slick-initialized {
        margin-bottom: 50px !important;
    }
    .ms3_con ul.ms3_logo_list.slick-initialized .slick-dots {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 10px !important;
        position: absolute !important;
        bottom: -35px !important;
        width: 100% !important;
        padding: 0 !important;
    }
    .ms3_con ul.ms3_logo_list.slick-initialized .slick-dots li {
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        border: none !important;
    }
    .ms3_con ul.ms3_logo_list.slick-initialized .slick-dots button {
        width: 10px !important;
        height: 10px !important;
        background-color: rgba(17,17,17,0.2) !important;
        border-radius: 50% !important;
        padding: 0 !important;
        border: none !important;
        font-size: 0;
    }
    .ms3_con ul.ms3_logo_list.slick-initialized .slick-dots button:before {
        display: none !important;
    }
    .ms3_con ul.ms3_logo_list.slick-initialized .slick-dots li.slick-active button {
        background-color: #ff8b00 !important;
        width: 24px !important;
        border-radius: 10px !important;
    }


    /* =========================================
       섹션 4 (main_section4) 수정
       ========================================= */
    .main_section4 {
        padding: 80px 0;
    }
    .ms4_slider {
        margin-top: 20px;
        margin-bottom: 50px !important; /* 점이 들어갈 하단 공간을 미리 확보 */
    }
    
    .ms4_slider .slick-dots {
        display: flex !important;
        justify-content: center;
        align-items: center;
        gap: 15px !important; 
        position: absolute !important; /* Slick의 강제 위치 설정을 제어 */
        bottom: -10px !important; /* ★ 이 수치를 조절하세요! 마이너스(-) 숫자가 커질수록 점이 더 아래로 내려갑니다 (예: -50px, -60px) */
        margin: 0 !important; /* 안 먹히던 margin-top은 제거 */
        padding: 0 !important;
        list-style: none;
        width: 100% !important;
    }
    .ms4_slider .slick-dots li {
        margin: 0 !important; 
        padding: 0 !important;
        width: auto !important;
        height: auto !important;
        border: none !important;
    }
    
    /* 3. 섹션4의 점 배경을 완전한 흰색으로 변경 */
    .ms4_slider .slick-dots button {
        width: 10px !important; 
        height: 10px !important;
        border-radius: 50% !important;
        background-color: rgba(247, 241, 241, 0.938) !important;
        border: none !important;
        font-size: 0 !important; 
        padding: 0 !important;
        /*cursor: pointer;*/
    }
    .ms4_slider .slick-dots button:before {
        display: none !important; 
    }
    .ms4_slider .slick-dots li.slick-active button {
        background-color: #ff8b00 !important; 
        width: 24px !important; 
        border-radius: 10px !important;
    }



    /* main_section5 */
    .main_section5{
        padding: 80px 0;
    }
    
    /* 1. Brand Awards 와 소제목 사이 간격 줄이기 */
    .main_section5 .title {
        gap: 5px 0; /* 기존 15px에서 원하는 만큼 숫자를 줄이세요 */
    }
    .main_section5 .title p:first-child{
        font-size: 30px;
    }
    .main_section5 .title p:last-child{
        font-size: 16px;
    }

    /* 2. 첫번째 이미지는 단독(100%), 두번째/세번째는 나란히(48%) 배치 */
    .ms5_img{
        flex-direction: row; /* 기존 column에서 row로 변경 */
        flex-wrap: wrap;     /* 가로 공간이 부족하면 밑으로 떨어지도록 설정 */
        justify-content: space-between; /* 좌우로 예쁘게 벌림 */
        gap: 20px 0;
    }
    .ms5_img img {
        width: 48%; /* 기본적으로 이미지 가로 너비를 48%로 설정 (2, 3번째 이미지에 적용됨) */
    }
    .ms5_img img:first-child {
        width: 100%; /* 첫 번째 이미지만 100%로 강제 설정하여 혼자 한 줄을 다 쓰게 만듦 */
    }

    /* 3. 고객만족도 1위 텍스트 줄간격 수정 (모바일에만 새로 추가) */
    .ms5_txt p {
        line-height: 1.6; /* 줄간격 조절. 더 벌리려면 1.8, 좁히려면 1.4 등으로 조절하세요 */
    }

    /* 2. 첫 번째 이미지는 단독(작고 여백 있게), 두 번째/세 번째는 나란히(동일한 크기) 배치 */
    .ms5_img {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center; /* 전체 이미지를 가운데 정렬 */
        gap: 30px 6%; /* 세로 간격 30px, 두 이미지 사이 가로 공백 6% (원하는 대로 조절 가능) */
    }
  
    /* 두 번째, 세 번째 이미지 공통 설정 */
    .ms5_img img {
        width: 42%; /* 기존 48%에서 42%로 줄여서 반응형으로 조금 더 작게 만듦 */
        aspect-ratio: 4 / 5.5; /* 두 이미지의 비율을 강제로 똑같이 맞춤 (세로가 살짝 긴 형태) */
        object-fit: cover; /* 이미지가 찌그러지지 않게 꽉 채워서 예쁘게 자름 */
        border-radius: 8px; /* (선택사항) 모서리를 살짝 둥글게 하여 부드러운 느낌 추가 */
    }

    /* 첫 번째 이미지 단독 설정. 태그 위치 순서 바꾸면 안됨*/
    .ms5_img img:first-child {
        width: 75%; /* 가로 전체(100%)를 쓰지 않고 75%로 줄여 양옆 여백을 넉넉히 줌 */
        aspect-ratio: auto; /* 첫 번째 이미지는 원본 비율 그대로 유지 */
        object-fit: contain; 
        margin-bottom: 10px; /* 아래 나란한 두 이미지와의 간격을 조금 더 띄움 */
        border-radius: 0; /* 첫 번째 이미지는 둥글기 효과 제외 */
   
    }

    /* 3. 고객만족도 1위 텍스트 짤림 방지 및 줄간격 수정 */
    .ms5_txt {
        display: block !important; /* 가려진 영역 강제 노출 */
        width: 100%;
        margin-top: 30px !important; /* 이미지와의 간격 확보 */
    }
    .ms5_txt p {
        display: block !important;
        opacity: 1 !important; /* AOS 애니메이션 충돌로 투명해진 텍스트 강제 노출 */
        transform: none !important; /* 애니메이션 위치 틀어짐 방지 */
        line-height: 1.6; 
        font-size: 16px !important; /* 모바일에 맞는 적절한 폰트 크기 강제 */
        word-break: keep-all; /* 단어 단위로 줄바꿈 되도록 설정 */
    }
    
    
    /* main_section6 */
    .main_section6{
        padding: 80px 0;
    }
    .ms6_con{
        flex-direction: column;
        gap: 30px 0;
    }
    .ms6_con li {
        gap: 20px 0;
    }
    .ms6_txt {
        gap: 10px 0;
    }
    .ms6_img{
        gap: 0;
        justify-content: space-between;
    }
    .ms6_con li:first-child .ms6_img_wrap{
    width: 48%;
    }

    /* (모바일 전용) main_section6 두번째 항목 텍스트 위 공백 추가 */
    .ms6_con li:nth-child(2) .ms6_txt{
        margin-top: 40px;
    }
    /* (모바일 전용) main_section6: 3번째 이미지 95%로 축소 */
    @media screen and (max-width: 767px){
    .ms6_con li:nth-child(2) .ms6_img img{
        width: 97%;
        display: block;
        margin: 0 auto;
    }
    }

    /* main_section7 */
    .ms7_slider li{
        height: 300px;
    }
    .ms7_slider img{
        height: 100%;
        object-fit: cover;
    }

    /* main_section8 */
    .main_section8{
        padding: 80px 0;
    }
    .main_section8 .title {
        gap: 10px 0;
    }
    .ms8_con{
        margin-top: 50px;
        flex-direction: column;
        gap: 30px 0;
    }
    .ms8_con li {
        gap: 15px 0;
        width: 100%;
    }
    .ms8_img img{
        width: 100%;
    }
    .ms8_txt {
        gap: 10px 0;
    }

    /* main_section9 */
    .main_section9{
        padding: 80px 0 0;
    }
    .main_section9 .center2{
        flex-direction: column;
        gap: 30px 0;
    }
    .ms9_con1{
        width: 90%;   
        padding: 30px 20px;
    }
    .ms9_con1 ul {
        margin-top: 25px;
    }
    .ms9_con1 li{
        flex-direction: column;
        gap: 10px 0;
        align-items: flex-start;
    }
    .ms9_con1 li p {
        width: 100%;
    }
    .ms9_con1 li input{
        width: 100%;
        height: 45px;
    }
    .ms9_con1 li input::placeholder{
        font-size: 3.433vw;
    }
    .ms9_btns {
        margin-top: 35px;
        flex-direction: column;
        gap: 20px 0;
    }
    .ms9_apply input{
        padding: 12px 40px;
    }
    .ms9_con2{
        width: 100%;
        position: unset;
    }
    .ms9_con2 .txts {
        gap: 20px 0;
    }
    .ms9_img{
        margin-top: 40px;
        margin-left: 180px;
        position: unset;
        width: 50%;
        justify-content: flex-start;
    }
    .ms9_img img{
        width: 100%;
    }

    /* main_section10 */
    .ms10_con{
        flex-direction: column;
        gap: 20px 0;
        align-items: flex-start !important;
    }
    .ms10_call{
        gap: 10px 0;
        align-items: flex-start !important;
        flex-direction: column;
        border-right: 0;
        padding-right: 0;
    }
    .ms10_call>div {
        gap: 5px 0;
    }
    .ms10_account{
        padding-left: 0;
        gap: 10px 0;
    }
    .ms10_account>div{
        gap: 5px 0;
        align-items: flex-start;
        flex-direction: column;
    }
}

/* tablet */
@media screen and (min-width: 768px) and (max-width: 1024px){
    .swiper{
        margin-top: 100px;
    }

    .swiper-slide{
        height: clamp(480px, 70vh, 620px) !important;
    }
    .swiper-slide img {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
    .swiper .txt_box{
        padding: 50px 150px 50px 40px;
    }
    .swiper .txt_box :is(p,h1){
        white-space: nowrap;
    }
    .swiper .txt_box :is(p,h1):first-child {
        margin-bottom: 15px;
    }
    .swiper .txt_box :is(p,h1):last-child {
        margin-top: 30px;
    }
    .custom-pagination{
        display: none;
    }
    .swiper-button-next, .swiper-button-prev{
        display: none !important;
    }

    /* real_time */
    .real_time .center2{
        flex-direction: column;
        gap: 20px 0;
        align-items: flex-start;
    }
    .real_estimate{
        width: 100%;
        gap: 0 15px;
    }
    .real_estimate .icons{
        width: 25px;
    }
    .real_estimate .icons img{
        width: 100%;
    }
    .real_estimate .txts {
        gap: 0 15px;
    }
    .real_estimate span{
        margin-bottom: 0;
    }
    .r_t_slider {
        width: 100%;
    }
    .r_t_slider li{
        margin-right: 25px;
    }

    /* main_apply */
    .main_apply {
        padding: 30px 0;
    }
    .main_apply .blue_box{
        width: 100%;
    }
    .m_a_container{
        flex-direction: column;
        gap: 20px 0;
    }
    .main_apply ul{
        justify-content: space-between;
        width: 100%;
    }
    .main_apply li input{
        height: 45px;
    }
    .main_apply li input::placeholder{
        font-size: 1.4vw;
    }
    .m_a_box{
        width: 100%;
    }
    
    /* main_section1 */
    .main_section1{
        padding: 90px 0 100px;
    }
    .main_section1 ul {
        margin-top: 45px;
        gap: 45px 0;
    }
    .main_section1 li{
        flex-direction: column;
        gap: 25px 0;
        align-items: center;
        text-align: center;
    }
    .main_section1 li:nth-child(odd){
        flex-direction: column-reverse;
        text-align: center;
    }
    .main_section1 .imgs img{
        width: 100%;
    }
    .main_section1 li .txts {
        gap: 25px 0;
    }

    /* main_section2 */
    .main_section2 {
        padding: 90px 0;
    }
    .main_section2 .title {
        gap: 20px 0;
    }
    .ms2_con{
        padding: 25px 15px;
        width: 90%;
    }

    /* main_section3 */
    .main_section3 {
        padding: 90px 0 95px;
    }
    .ms3_con ul{
        margin-top: 45px;
        gap: 25px 0;
    }

    /* main_section4 */
    .main_section4{
        padding: 90px 0;
    }
    .ms4_slider {
        margin-top: 50px;
    }

    /* main_section5 */
    .main_section5{
        padding: 90px 0;
    }
    .main_section5 .title {
        gap: 20px 0;
    }

    /* main_section6 */
    .main_section6{
        padding: 90px 0;
    }
    .ms6_con{
        flex-direction: column;
        gap: 35px 0;
    }
    .ms6_con li {
        gap: 25px 0;
    }
    .ms6_txt {
        gap: 15px 0;
    }
    .ms6_img{
        gap: 0;
        justify-content: space-between;
    }
    .ms6_con li:first-child .ms6_img_wrap{
        width: 48%;
    }

    /* main_section7 */
    .ms7_slider li{
        height: 500px;
    }
    .ms7_slider img{
        height: 100%;
        object-fit: cover;
    }
    .ms7_slider .slick-prev, 
    .ms7_slider .slick-next{
        display: none !important;
    }

    /* main_section8 */
    .main_section8{
        padding: 90px 0;
    }
    .main_section8 .title {
        gap: 15px 0;
    }
    .ms8_con{
        margin-top: 55px;
    }
    .ms8_con li {
        gap: 20px 0; 
    }
    .ms8_img{
        margin: auto;
    }
    .ms8_txt {
        gap: 15px 0;
    }

    /* main_section9 */
    .main_section9{
        padding: 90px 0 0;
    }
    .main_section9 .center2{
        flex-direction: column;
        gap: 35px 0;
    }
    .ms9_con1{
        width: 90%;   
        padding: 35px 25px;
    }
    .ms9_con1 ul {
        margin-top: 30px;
    }
    .ms9_con1 li{
        flex-direction: column;
        gap: 15px 0;
        align-items: flex-start;
    }
    .ms9_con1 li p {
        width: 100%;
    }
    .ms9_con1 li input{
        width: 100%;
        height: 50px;
    }
    .ms9_con1 li input::placeholder{
        font-size: 1.4vw;
    }
    .ms9_btns {
        margin-top: 40px;
        flex-direction: column;
        gap: 25px 0;
    }
    .ms9_apply input{
        padding: 14px 45px;
    }
    .ms9_con2{
        width: 100%;
        position: unset;
    }
    .ms9_con2 .txts {
        gap: 25px 0;
    }
    .ms9_img{
        margin-top: 45px;
        position: unset;
        width: 50%;
        justify-content: flex-start;
    }
    .ms9_img img{
        width: 100%;
    }

    /* main_section10 */
    .ms10_con{
        justify-content: space-between;
        gap: 0;
    }
    .ms10_call{
        gap: 15px 0;
        align-items: flex-start !important;
        flex-direction: column;
        padding-right: 0;
        width: 48%;
    }
    .ms10_call>div {
        gap: 10px 0;
    }
    .ms10_account{
        width: 48%;
        padding-left: 0;
        gap: 15px 0;
    }
    .ms10_account>div{
        gap: 10px 0;
        align-items: flex-start;
        flex-direction: column;
    }
}

/* === 26.02.26 모바일 하단 고정 플로팅 버튼 === */
#mobile-bottom-bar.mobile-floating-btns {
    display: none; /* PC에서는 무조건 숨김 */
}

@media screen and (max-width: 767px) {
    #mobile-bottom-bar.mobile-floating-btns {
        display: flex !important;      
        position: fixed !important;    
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 999999 !important;    
        box-shadow: 0 -3px 10px rgba(0,0,0,0.15) !important;
        background-color: #eada67 !important; /* 플로팅 메뉴의 컬러. 노란색 */
        margin: 0 !important;
        padding: 0 !important;
    }
    #mobile-bottom-bar.mobile-floating-btns a {
        flex: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 60px !important;
        color: #111 !important;
        font-size: 16px !important;
        font-weight: 800 !important;
        text-decoration: none !important;
    }
    #mobile-bottom-bar.mobile-floating-btns .btn-call {
        border-right: 1px solid rgba(0,0,0,0.1) !important;
    }
    /* 무료 견적신청 클릭 시 위로 이동하는 스크롤 위치 여백 조정 더 위로 하고 싶으면 숫자 키우면 됨*/
    html, body {
        scroll-behavior: smooth;
    }
    form#insertFrmTop, div.main_apply {
        scroll-margin-top: 100px !important; 
    }
    
    /* 플로팅 버튼이 푸터 가림 방지 여백 */
    #wrap, body {
        padding-bottom: 60px !important; 
    }
}

/* 26.02.26 make your space bright. PC에서는 최대 70px, 모바일에서는 화면에 맞춰 자연스럽게 줄어드는 반응형 대형 폰트 */
.fs-responsive-large {
    font-size: clamp(28px, 4vw, 65px) !important;
    white-space: nowrap !important; /* 글씨가 아무리 커도 무조건 한 줄로 나오게 강제 고정 */
}