/* 1. 기본 스타일 (모바일 및 공통) */
.vision-wrap .con-p01 img {
    width: 100%;       /* 모바일에서는 화면 너비에 맞춤 */
    height: auto;      /* 이미지 비율 유지 */
    display: block;
    margin: 15px auto; /* 이미지 위아래 적당한 간격 */
    border: 1px solid #eee; /* 이미지 경계가 모호할 경우를 대비한 연한 테두리 (선택사항) */
}

/* 2. PC(데스크톱) 전용 상세 조정 (1025px 이상) */
@media screen and (min-width: 1025px) {
    /* 이미지를 더 크게 강조하고 싶을 때 */
    .vision-wrap .con-p01 img {
        max-width: 1100px;  /* 이미지 최대 너비를 넓게 설정 */
        width: 100%;        /* 부모 박스 크기에 맞춰 확장 */
        margin: 40px auto;  /* PC에서는 위아래 간격을 더 넓게 주어 가독성 향상 */
        
        /* 약간의 입체감을 주고 싶다면 아래 그림자 효과를 사용하세요 */
        box-shadow: 0 4px 15px rgba(0,0,0,0.05); 
    }

    /* 제목(h4)과 이미지 사이의 간격 추가 조정 */
    .vision-wrap .h4-tit01 {
        margin-top: 50px;
        margin-bottom: 20px;
    }
}

/* 3. 태블릿용 (768px 이하) */
@media screen and (max-width: 768px) {
    .vision-wrap .con-p01 img {
        width: 100%;
        margin: 20px 0;
    }
}