@media (min-width: 1440px) {
    .main_visual { 
        height: 980px; 
        background: #f3f5f7; 
        position: relative; 
    }
    .typing { 
        position: absolute; 
        top: 50%;
        transform: translate(0, -50%); 
        letter-spacing: -1px; 
        padding-left: 5%; 
        display: flex;
        justify-content: center;
        align-items: flex-end;
    }
    .text {
        font-size: 90px; 
        font-weight: 500; 
        line-height:130px;
        margin:0;
    }
    .cursor {
        display: inline-block;
        margin-left: 5px;
        animation: blink 0.7s ease-in-out infinite;
        color: #333;
        font-weight: 200;
        font-size:100px;
        vertical-align: bottom;
    }
    @keyframes blink {
      0%, 100% { opacity: 1; }
      50% { opacity: 0; }
    }
    .section { 
        padding: 120px 5% 0; 
        clear: both;
        overflow: hidden;
    }
    .section .title {
        font-size:48px;
        line-height:62px;
        font-weight:700;
    }
    .section .ctt,.sub_txt {
        font-size:28px;
        line-height:44px;
        font-weight:400;
    }
    .sec1 > div {
        float:left;
        box-sizing: border-box;
        margin:0;
        vertical-align: middle;
    }
    .sec1 > .title {
        width:45%;
        padding-right:5%;
    }
    .sec1 > .ctt {
        width:50%;
    }
    .sec2 {
        position: relative;
        overflow: hidden;
        height:520px;
        background:#fff;
    }
    .img_box {
        overflow:hidden;
        margin:0 auto;
        position: relative;
        background: url('images/main_img.jpg') center no-repeat;
        background-size:cover;
        background-color: white;
    }
    .img_box::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: 100%;
        background-color: white; /* 또는 페이지 배경색과 동일하게 */
        transition: width 0.8s ease-in;
        z-index: 2;
    }

    .img_box.animate::before { 
        width: 0; 
    }

    .sec3 {
        padding:120px 0 0 5% !important;
    }
    .sec3 .title {
        float:left;
        width:50%;
        box-sizing: border-box;
        margin:0;
        vertical-align: middle;
    }
    .sec3 .title .sub_txt {
        padding-top:80px;
    }
    .serv_box_swiper {
        width: 50%;
        box-sizing: border-box;
    }
    .swiper-wrapper {
        display: flex;
        gap: 15px; /* ✅ 여기서 간격 조절 */
    }
    .swiper-slide {
        width:400px !important;
        height:350px !important;
        padding:40px 30px;
        color:#fff;
        display: flex !important;
        flex-direction: column;
        flex-shrink: 0;
    }
    .serv_cate {
        font-size:20px;
    }
    .serv_tit {
        font-size:30px;
        font-weight:600;
        padding-top:10px;
    }
    .serv_ctt {
        font-size:18px;
        font-weight:200;
        padding-right:20px;
        margin-top: auto;
    }
    .grbox1 {
        background:#9ec317;
    }
    .grbox2 {
        background:#72af2d;
    }
    .grbox3 {
        background:#324325;
    }
    .sec4 {
        padding-bottom:120px !important;
        background:#f3f5f7;
        margin-top:120px;
    }
    .sec4_box {
        display:grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 70px;
        margin-top:60px;
    }
    .sec4_div {
        background:#fff;
        padding:50px 30px;
        clear:both;
    }
    .sec4_div > a {
        display:block;
        color:#333;
    }
    .sec4_div > a > h3 {
        display:inline-block;
        margin:0;
        line-height:40px;
    }
    .sec4_div > a > span {
        float:right;
        display:inline-block;
    }
    .sec4_div > a:hover span {
         animation: shakeLeft 1s infinite;
    }
    @keyframes shakeLeft {
        0% { transform: translateX(0); }
        30% { transform: translateX(-10px); }
        60% { transform: translateX(0); }
        100% { transform: translateX(0); }
    }
}

/* 노트북/기본 PC */
@media (min-width: 1024px) and (max-width: 1439px) {
    .main_visual { 
        min-height: 95vh; 
        background: #f3f5f7; 
        position: relative; 
    }
    .typing { 
        position: absolute; 
        top: 50%;
        transform: translate(0, -50%); 
        letter-spacing: -1px; 
        padding-left: 5%; 
        display: flex;
        justify-content: center;
        align-items: flex-end;
    }
    .text {
        font-size: 8rem; 
        font-weight: 500; 
        line-height:12rem;
        margin:0;
    }
    @keyframes blink {
      0%, 100% { opacity: 1; }
      50% { opacity: 0; }
    }
    .section { 
        padding: 100px 5% 0; 
        clear: both;
        overflow: hidden;
    }
    .section .title {
        font-size:48px;
        line-height:62px;
        font-weight:700;
    }
    .section .ctt,.sub_txt {
        font-size:28px;
        line-height:44px;
        font-weight:400;
    }
    .sec1 > div {
        float:left;
        box-sizing: border-box;
        margin:0;
        vertical-align: middle;
    }
    .sec1 > .title {
        width:45%;
        padding-right:5%;
    }
    .sec1 > .ctt {
        width:50%;
        font-size:2.5rem;
        line-height:3.8rem;
    }
    .sec2 {
        position: relative;
        overflow: hidden;
        height:auto;
        background:#fff;
    }
    .img_box {
        overflow:hidden;
        margin:0 auto;
        position: relative;
        background: url('images/main_img.jpg') center no-repeat;
        background-size:cover;
        background-color: white;
    }
    .img_box::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: 100%;
        background-color: white; /* 또는 페이지 배경색과 동일하게 */
        transition: width 0.8s ease-in;
        z-index: 2;
    }
    .img_box.animate::before { 
        width: 0; 
    }
    .sec3 {
        padding:100px 0 0 5% !important;
    }
    .sec3 .title {
        float:left;
        width:50%;
        box-sizing: border-box;
        margin:0;
        vertical-align: middle;
    }
    .sec3 .title .sub_txt {
        padding-top:60px;
        font-size:2.5rem;
        line-height:3.8rem;
    }
    .serv_box_swiper {
        width: 50%;
        box-sizing: border-box;
    }
    .swiper-wrapper {
        display: flex;
        gap: 15px; /* ✅ 여기서 간격 조절 */
    }
    .swiper-slide {
        width:350px !important;
        height:320px !important;
        padding:30px 25px;
        color:#fff;
        display: flex !important;
        flex-direction: column;
        flex-shrink: 0;
    }
    .serv_cate {
        font-size:20px;
    }
    .serv_tit {
        font-size:30px;
        font-weight:600;
        padding-top:10px;
    }
    .serv_ctt {
        font-size:18px;
        font-weight:200;
        padding-right:20px;
        margin-top: auto;
    }
    .grbox1 {
        background:#9ec317;
    }
    .grbox2 {
        background:#72af2d;
    }
    .grbox3 {
        background:#324325;
    }
    .sec4 {
        padding-bottom:100px !important;
        background:#f3f5f7;
        margin-top:100px;
    }
    .sec4_box {
        display:grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 30px;
        margin-top:60px;
    }
    .sec4_div {
        background:#fff;
        padding:50px 30px;
        clear:both;
    }
    .sec4_div > a {
        display:block;
        color:#333;
    }
    .sec4_div > a > h3 {
        display:inline-block;
        margin:0;
        line-height:40px;
    }
    .sec4_div > a > span {
        float:right;
        display:inline-block;
    }
    .sec4_div > a:hover span {
         animation: shakeLeft 1s infinite;
    }
    @keyframes shakeLeft {
        0% { transform: translateX(0); }
        30% { transform: translateX(-10px); }
        60% { transform: translateX(0); }
        100% { transform: translateX(0); }
    }
}

/* 태블릿 */
@media (min-width: 768px) and (max-width: 1023px) {
    .main_visual { 
        min-height: 85vh; 
        background: #f3f5f7; 
        position: relative; 
    }
    .typing { 
        position: absolute; 
        top: 50%;
        transform: translate(0, -50%); 
        letter-spacing: -1px; 
        padding-left: 3%; 
        display: flex;
        justify-content: center;
        align-items: flex-end;
    }
    .text {
        font-size: 7rem; 
        font-weight: 500; 
        line-height:10rem;
        margin:0;
    }
    @keyframes blink {
      0%, 100% { opacity: 1; }
      50% { opacity: 0; }
    }
    .section { 
        padding: 10vh 3% 0; 
        clear: both;
        overflow: hidden;
    }
    .section .title {
        font-size:4rem;
        line-height:6rem;
        font-weight:700;
    }
    .section .ctt,.sub_txt {
        font-size:28px;
        line-height:44px;
        font-weight:400;
    }
    .sec1 > div {
        float:left;
        box-sizing: border-box;
        margin:0;
        vertical-align: middle;
    }
    .sec1 > .title {
        width:50%;
        padding-right:3%;
    }
    .sec1 > .ctt {
        width:50%;
        font-size:2rem;
        line-height:3rem;
    }
    .sec2 {
        position: relative;
        overflow: hidden;
        height:auto;
        background:#fff;
    }
    .img_box {
        overflow:hidden;
        margin:0 auto;
        position: relative;
        background: url('images/main_img.jpg') center no-repeat;
        background-size:cover;
        background-color: white;
    }
    .img_box::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: 100%;
        background-color: white; /* 또는 페이지 배경색과 동일하게 */
        transition: width 0.8s ease-in;
        z-index: 2;
    }
    .img_box.animate::before { 
        width: 0; 
    }
    .sec3 {
        padding:10vh 0 0 5% !important;
    }
    .sec3 .title {
        float:left;
        width:50%;
        box-sizing: border-box;
        margin:0;
        vertical-align: middle;
    }
    .sec3 .title .sub_txt {
        padding-top:5vh;
        font-size:2rem;
        line-height:3rem;
        padding-right:2%;
    }
    .serv_box_swiper {
        width: 50%;
        box-sizing: border-box;
    }
    .swiper-wrapper {
        display: flex;
        gap: 15px; /* ✅ 여기서 간격 조절 */
    }
    .swiper-slide {
        width:280px !important;
        height:250px !important;
        padding:20px;
        color:#fff;
        display: flex !important;
        flex-direction: column;
        flex-shrink: 0;
    }
    .serv_cate {
        font-size:18px;
    }
    .serv_tit {
        font-size:22px;
        font-weight:600;
        padding-top:5px;
    }
    .serv_ctt {
        font-size:16px;
        font-weight:200;
        padding-right:20px;
        margin-top: auto;
    }
    .grbox1 {
        background:#9ec317;
    }
    .grbox2 {
        background:#72af2d;
    }
    .grbox3 {
        background:#324325;
    }
    .sec4 {
        padding-bottom:100px !important;
        background:#f3f5f7;
        margin-top:10vh;
    }
    .sec4_box {
        display:grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 30px;
        margin-top:5vh;
    }
    .sec4_div {
        background:#fff;
        padding:50px 30px;
        clear:both;
    }
    .sec4_div > a {
        display:block;
        color:#333;
    }
    .sec4_div > a > h3 {
        display:inline-block;
        margin:0;
        line-height:40px;
        font-size:2rem;
    }
    .sec4_div > a > span {
        float:right;
        display:inline-block;
    }
    .sec4_div > a:hover span {
         animation: shakeLeft 1s infinite;
    }
    @keyframes shakeLeft {
        0% { transform: translateX(0); }
        30% { transform: translateX(-10px); }
        60% { transform: translateX(0); }
        100% { transform: translateX(0); }
    }
}

/* 모바일 이하 */
@media (max-width: 767px) {
    .main_visual { 
        height: 85vh; 
        background: #f3f5f7; 
        position: relative; 
    }
    .typing { 
        position: absolute; 
        top: 50%;
        transform: translate(0, -50%); 
        letter-spacing: -1px; 
        padding: 0 4%; 
        display: flex;
        justify-content: center;
        align-items: flex-end;
    }
    .text {
        font-size: 3.7rem; 
        font-weight: 500; 
        line-height:6rem;
        margin:0;
        padding-right:3%;
    }
    @keyframes blink {
      0%, 100% { opacity: 1; }
      50% { opacity: 0; }
    }
    .section { 
        padding: 8vh 4% 0; 
        clear: both;
        overflow: hidden;
    }
    .section .title {
        font-size:3rem;
        line-height:4.5rem;
        font-weight:700;
        padding-bottom:2vh;
    }
    .section .ctt,.sub_txt {
        font-size:1.6rem;
        line-height:2.4rem;
        font-weight:400;
    }
    .sec1 > div {
        box-sizing: border-box;
        margin:0;
        vertical-align: middle;
        width:100%;
    }
    .sec1 > .ctt {
        font-size:1.6rem;
        line-height:2.4rem;
    }
    .sec2 {
        position: relative;
        overflow: hidden;
        height:auto;
        background:#fff;
    }
    .img_box {
        overflow:hidden;
        margin:0 auto;
        position: relative;
        background: url('images/main_img.jpg') center no-repeat;
        background-size:cover;
        background-color: white;
    }
    .img_box::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: 100%;
        background-color: white; /* 또는 페이지 배경색과 동일하게 */
        transition: width 0.8s ease-in;
        z-index: 2;
    }
    .img_box.animate::before { 
        width: 0; 
    }
    .sec3 {
        padding:10vh 0 0 3% !important;
    }
    .sec3 .title {
        float:left;
        width:100%;
        box-sizing: border-box;
        margin:0;
        vertical-align: middle;
    }
    .sec3 .title .sub_txt {
        padding:2vh 0;
        font-size:1.6rem;
        line-height:2.4rem;
    }
    .serv_box_swiper {
        width: 100%;
        box-sizing: border-box;
    }
    .swiper-wrapper {
        display: flex;
        gap: 15px; /* ✅ 여기서 간격 조절 */
    }
    .swiper-slide {
        width:280px !important;
        height:30vh !important;
        padding:20px;
        color:#fff;
        display: flex !important;
        flex-direction: column;
        flex-shrink: 0;
    }
    .serv_cate {
        font-size:1.5rem;
    }
    .serv_tit {
        font-size:2.2rem;
        font-weight:600;
        padding-top:5px;
    }
    .serv_ctt {
        font-size:1.4rem;
        font-weight:200;
        padding-right:10px;
        margin-top: auto;
    }
    .grbox1 {
        background:#9ec317;
    }
    .grbox2 {
        background:#72af2d;
    }
    .grbox3 {
        background:#324325;
    }
    .sec4 {
        padding-bottom:8vh !important;
        background:#f3f5f7;
        margin-top:10vh;
    }
    .sec4_box {
        display:grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 10px;
        margin-top:3vh;
    }
    .sec4_div {
        background:#fff;
        padding:30px 20px;
        clear:both;
    }
    .sec4_div > a {
        display:block;
        color:#333;
    }
    .sec4_div > a > h3 {
        display:inline-block;
        margin:0;
        font-size:1.8rem;
    }
    .sec4_div > a > span {
        float:right;
        display:inline-block;
    }
    .sec4_div > a > span img {
        width:75%;
    }
    .sec4_div > a:hover span {
         animation: shakeLeft 1s infinite;
    }
    @keyframes shakeLeft {
        0% { transform: translateX(0); }
        30% { transform: translateX(-10px); }
        60% { transform: translateX(0); }
        100% { transform: translateX(0); }
    }
}