@media screen and (min-width:360px) and (max-width: 649px) {

    .main-top { padding: 30px 0 10px 0; }
    .main-top .logo { max-width: 135px; top:-10px;}
    .main-top .logo a {background-size: auto 70%;}
    .main-top .inner .Gnb { display: none; }
    .mobileGnb { display: block !important; }
	
	.section1 .main-bottom .caption p span { display:block;}
	
    .section2 .bottom .rollingTxt p { display: inline-block; padding-right: 42px; color: var( --color-black ); font-size: 4rem; font-weight: var( --bold-font-400); opacity: 0.07;  white-space: nowrap;}
    /* 2025.03.05 송인호 p태그 롤링 기능 추가 */
    .section2 .bottom .rollingTxt .rollingWrapper { display: flex; min-width: 200dvh; animation: rolling 20s linear infinite; width: max-content;}
    @keyframes rolling {
        from { transform: translateX(0%); }
        to { transform: translateX(-50%); }
    }

    .section3 .inner h2.sec-h2, .section4 .inner h2.sec-h2, .section5 .inner h2.sec-h2, .map-content .inner h2.sec-h2 { font-size: 2.5em;}
    .section3 .inner h2.sec-h2::after, .section4 .inner h2.sec-h2::after, .section5 .inner h2.sec-h2::after, .map-content .inner h2.sec-h2::after { content: ''; position: absolute; background: url('../images/colon.png') no-repeat; background-size: contain; display: inline-block; width: 9px; height: 100%; top:13px; margin-left: 15px;}
    .section3 .inner h3 { font-size: 1.2em; padding-top: 3%; padding-bottom: 1.5%; font-weight: var(--bold-font-400);}

    .section3 .inner { flex-direction: column; padding-left: 1rem; padding-right: 1rem; padding-top: 15%; height: 95%;}
    .section3 .inner .left-tit { width: 100%; height: auto; padding-bottom: 5%; top: 0;}
    .section3 .inner .left-tit .comment { /*font-size: 16px;*/ font-size: 75%; }
    .section3 .inner .right-cont { height: 100%; top:0%; justify-content: space-around;}
    .section3 .inner .right-cont .thumb { width: 45%; height: 50%; min-height: 30%;}
    .section3 .inner .right-cont .thumb:nth-child(1), .section3 .inner .right-cont .thumb:nth-child(3) { top: 5%;}
    .section3 .inner .right-cont .img01, .section3 .inner .right-cont .img02, .section3 .inner .right-cont .img03, .section3 .inner .right-cont .img04 { height: 70%; min-height: 30%;}
    .section3 .inner .biz_tit h4 { color: var( --color-gray); font-size: clamp(14px, 1vw, 18px); }
    .section3 .inner .right-cont .cont { position: absolute; width: 100%;  opacity: 0; transition:  0.6s ease; background-color:#000000; border-radius: 10px; height:100%; /* max-height:388px; */ position:relative;}
    .section3 .inner .right-cont .cont ul { position: relative; top: 5%; height: auto;}
    .section3 .inner .right-cont .cont ul li { color: var( --color-white); padding-left: 20%;  padding-top: 4%; padding-bottom: 4%; font-size: clamp(70%, 1vw, 75%);}
    .section3 .inner .right-cont .cont ul li::before { content: '\25B8'; width: 100%; height: 100%; position: absolute; left: 10%; }

    .section4 .inner { padding-top: 15%; height: 95%;}
    .section4 .inner h2 { padding-bottom: 3%;}
    .section4 .inner .comment { font-size:16px; /*font-size: 85%;*/ }
    .section4 .left-his { flex-direction: row; width:100%; padding-top: 1rem;}
    .section4 .left-his::before { width: 100%; height: 1px; left: 0; }
    .section4 .left-his .left-year { padding-top: 1.2rem; text-align:center; padding-right: 0;}
    .section4 .left-his .left-year::before { top: -7px !important; left: 52px !important; }
    .section4 .left-his .left-year.On { padding-top: 1rem; padding-bottom: 0; font-size:1.4rem;}
    .section4 .left-his .left-year.On::before { top: -10px !important; left: 50px !important; }
    .section4 .history { flex-direction: column; height: 100%; display: flex;}
    .section4 .right-his { padding-left: 0; height: 70%; overflow-y: hidden; position: relative;}
    .section4 .right-his .history-cont { padding-left: 0; padding-top: 2rem; height: 50%; display: none; opacity: 0; transform: translateY(30px); transition: opacity 0.4s ease, transform 0.4s ease;}
    .section4 .right-his .history-cont.active {height: 97%; position: absolute; width: 100%; display: block; opacity: 1; transform: translateY(0); padding-bottom: 1rem; overflow-y: auto;}
    .section4 .right-his .history-cont dl ul li div p:first-child { min-width: auto; padding-bottom: 10px;}
    .section4 .right-his .history-cont dl ul li div { flex-direction: column;  }
    .section4 .right-his .history-cont dl dt { font-size: 2rem; }

    .section5 .inner { padding-top: 20%; }
    .section5 .inner .comment { font-size:16px;/*font-size: 85%;*/ }
    .section5 .inner .clientList { padding-top: 10%; padding-bottom: 1%; display: flex; flex-wrap: wrap; width: 100%; height: 70%; flex-direction: row; align-content: flex-start;}
    .section5 .inner .clientList li { width: 50%; height: 20%;}
    .section5 .inner .clientList li a { display: block; width: 100%; height: 100% !important; background-size:contain !important}

    .footer { height: ; }
    .footer .inner { padding-top: 5%;}
    .footer .inner > div { flex-direction: column; }
    .footer .footLogo { order: 2; }
    .footer .right-cont { float: right; order: 1; flex-basis: 0; justify-content: flex-end; padding-bottom: 5%; }
    .footer .right-cont button { padding-right: 3%; font-size: 16px; }
    .footer .footBt { font-size: clamp(14px, 1vw, 18px); }
    .footer .footBt ul li strong { min-width:80px; }

    .map-content {display: none; position: fixed; z-index: 9999; width: 90%; height: 86%; top: 10%; left: 5%; margin: 0 auto; background-color: #fefefe; padding: 1rem; }
    .map-content .inner { padding: 0;}
    .map-content .inner { position: relative; width: 100%;}
    .map-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 2%;}
    .map-content .inner h2.sec-h2 { font-size: 2rem;}
    .map-content .inner .close-btn { position: absolute; right: 2dvh; font-size: 1.4rem; font-weight: bold; color: var(--color-blue2); background: transparent; border: none; cursor: pointer; transition: color 0.3s ease; }
    .map-content .inner h2.sec-h2 { padding-bottom: ; font-size: 2rem;}
    .map-content .inner h2.sec-h2::after { content: ''; position: absolute; background: url('../images/colon.png') no-repeat; background-size: contain; display: inline-block; width: 10px; height: 60%; top: 15%; margin-left: 15%;}
    .map-content .content { }
    .map-content .content .map { border-radius: 25px; width:100%; height: 48dvh;}
    .map-content .content .info { display: flex; padding-top: 3%; height: 90%;}
    .map-content .content .info p { font-size: 1.5rem; width: 30%; padding-top: 8%; }
    .map-content .content .info ul { width: 100%; height: 100%; }
    .map-content .content .info ul li:nth-child(1) { border-bottom: 1px solid var(--color-gray3); padding-top: 10%; padding-bottom: 5%; }
    .map-content .content .info ul li:nth-child(2) { border-bottom: 1px solid var(--color-gray3); padding-top: 5%; padding-bottom: 5%; }
    .map-content .content .info ul li:nth-child(3) { border-bottom: 1px solid var(--color-gray3); padding-top: 5%; }
    .map-content .content .info ul li:last-child { border-bottom: none; }
    .map-content .content .info ul li strong {  width:20%; display: inline-block; position:relative; padding-left: 2dvh; font-size: 90%;}
    .map-content .content .info ul li strong::before { content: ''; position: absolute; width:  10px; border-radius: 10px; height: 10px; background-color: var(--color-blue2); top: 7px; left: 0;  }
    .map-content .content .info ul li span { font-size: 0.8rem;}
}

@media screen and (min-width:650px) and (max-width: 960px) {

    .main-top .logo { max-width: 155px; border:}
    .main-top .logo a { background-size: auto 70%; background-position: 0 3px;}
    .main-top .inner .Gnb { float: right; width: 70%;}
    .main-top .inner .Gnb a { font-size: clamp(15px, 2vw, 18px); }

    .section3 .inner h2.sec-h2, .section4 .inner h2.sec-h2, .section5 .inner h2.sec-h2 { font-size: 2.8em;}
    .section3 .inner h2.sec-h2::after, .section4 .inner h2.sec-h2::after, .section5 .inner h2.sec-h2::after { content: ''; position: absolute; background: url('../images/colon.png') no-repeat; background-size: contain; display: inline-block; width: 10px; height: 100%; top:17px; margin-left: 15px;}

    .section3 .inner { flex-direction: column; padding-left: 1rem; padding-right: 1rem; }
    .section3 .inner .right-cont {  height: auto; max-width: auto; top:0%}
    .section3 .inner .right-cont .thumb { width: 45%; }
    .section3 .inner .left-tit { width: 100%; height: auto; padding-bottom: 5%; top: 0; }

    .section4 .inner { padding-top: 0; }
    .section4 .history { flex-direction: column}
    .section4 .left-his { flex-direction: row; width:100%; padding-top:2rem;}
    .section4 .left-his::before { width: 100%; height: 1px; left: 0; }
    .section4 .left-his .left-year { padding-top: 1.2rem; text-align:center; padding-right: 0;}
    .section4 .left-his .left-year::before { top: -7px !important; left: 75px !important; }
    .section4 .left-his .left-year.On { padding-top: 1rem; padding-bottom: 0; }
    .section4 .left-his .left-year.On::before { top: -10px !important; left: 73px !important; }
    .section4 .right-his { padding-left: 0;  }
    .section4 .right-his .history-cont { padding-left: 0; }
    .section4 .right-his .history-cont dl ul li div p:first-child { min-width: auto; padding-bottom: 10px;}
    .section4 .right-his .history-cont dl ul li div { flex-direction: column;  }

    .section5 .inner { padding-top: 115px; }
    .section5 .inner .clientList { padding-top: 10%; padding-bottom: 3%; display: flex; flex-wrap: wrap;}
    .section5 .inner .clientList li { width: 33%;}
    .section5 .inner .clientList li a { display: block; width: 100%; height: 70px !important; background-size: contain !important}

    .footer .inner { padding-top: 5%; }

}

@media screen and (min-width:961px) and (max-width: 1200px) {

    .main-top .logo { width: auto;}
    .main-top .inner .Gnb { float: right; width: 70%;}

    .section3 .inner h2.sec-h2, .section4 .inner h2.sec-h2, .section5 .inner h2.sec-h2, .map-content .inner h2.sec-h2 { font-size: 3em;}
    .section3 .inner h2.sec-h2::after, .section4 .inner h2.sec-h2::after, .section5 .inner h2.sec-h2::after, .map-content .inner h2.sec-h2::after { content: ''; position: absolute; background: url('../images/colon.png') no-repeat; background-size: contain; display: inline-block; width: 10px; height: 100%; top:18px; margin-left: 15px;}

    /* .section3 .inner, .section4 .inner, .section5 .inner, .footer .inner  { border: solid 1px green; } */
    .section3 .inner { flex-direction: column; padding-left: 1rem; padding-right: 1rem; }
    /* .section3 .inner .right-cont { justify-content: space-around; height: auto; border: solid 1px red; top:0%} */
    .section3 .inner .right-cont .cont {}
    /* .section3 .inner .left-tit { width: 100%; height: auto; padding-bottom: 5%; top: 0; border:solid 1px red;} */
    .section3 .inner .right-cont .thumb:nth-child(1), .section3 .inner .right-cont .thumb:nth-child(3) { top: 0%; }
    .section3 .inner .right-cont .thumb:nth-child(2), .section3 .inner .right-cont .thumb:nth-child(4) { padding-left: 0px; }
    .section3 .inner .right-cont .thumb:nth-child(4) { padding-right: 0px;}

    .section3 .inner .right-cont .cont ul { position:relative; top:10%}
    .section3 .inner .right-cont .cont ul li { padding-right: 40px; }

    /* .section4 .inner { padding-top: 0 !important; border:solid 1px red;} */

.section5 .inner .clientList li { width: 25%;}
.section5 .inner .clientList li a { width: 100%; height:85px !important;}

}

@media screen and (min-width:1201px) and (max-width: 1600px) {

    .section3 .inner h2.sec-h2, .section4 .inner h2.sec-h2, .section5 .inner h2.sec-h2, .map-content .inner h2.sec-h2 { font-size: 3.3em;}
    .section3 .inner h3 { font-size: 2em;}

    .section3 .inner .left-tit { padding-right: 1rem;  width:65%}
    .section3 .inner .right-cont .cont {}
    /* .section3 .inner, .section4 .inner, .section5 .inner, .footer .inner  { border: solid 1px red; padding-left: 1rem; padding-right: 1rem;} */

    .section3 .inner .right-cont .thumb:nth-child(1), .section3 .inner .right-cont .thumb:nth-child(3) { top: 0%; padding-right: 20px;}
    .section3 .inner .right-cont .thumb:nth-child(2), .section3 .inner .right-cont .thumb:nth-child(4) { padding-left: 20px;}


.section5 .inner .clientList li { width: 20%;}

}

@media screen and (min-width:1601px) {

.section5 .inner .clientList li { width: 20%;}
    /* .section3 .inner, .section4 .inner, .section5 .inner, .footer .inner  { border: solid 1px orange; } */
/*     .section5 .inner .clientList li:nth-child(1)  { padding-left: 1rem; } */



}