@charset "utf-8";
/* 메인 반응형 */

@media screen and (max-width:1600px) {
    .leftBtn {display:none;}
}

@media screen and (max-width:1280px) {
    .section .inner {padding:0; text-align:center;}
    /* 26.09 : .vsSection .inner {padding:0} 삭제 → 메인비주얼 글자가 화면 끝에 붙던 원인 */
}

@media screen and (max-width:1020px) {

    .section .inner_cont .inner_txt h2 {line-height:1.1; word-break:keep-all; word-wrap:break-word; font-size:40px; letter-spacing:-1px; margin-top:10px;}

    #section001 .section_wp {width:100%;}
    #section001 .section_wp .innerSection .sectionTitle {padding:3% 0 0 3%;}
    #section001 .section_wp .fstSection .sectionImg img, #section001 .section_wp .seSection .sectionImg img {left:0;}
    #section001 .section_wp .innerSection .sectionImg {padding-top:100%;}

    .section p.subtit {word-break:keep-all; word-wrap:break-word;}

    .section2 .worksListWrapper .worksTableArea .worksListContent ul li {width:100%; margin:20px 2% 0%;}

    /* 26.09 : 앞줄에 있던 잘못된 "." 한 글자 때문에 아래 규칙이 무시되어 PC용·모바일용 SYSTEM 이 동시에 보이던 오류 수정 */
    .systemSectionCont {display:none;}
    .mobile_systemSectionCont {display:block;}

    /*===================== timeBar 스타일 =====================*/
    #timerBar {position:relative; max-width:260px; width:100%; height:1px; background:#000;}
    .blackBar {position:absolute; left:0; right:0; text-align:center; max-width:260px; width:100%; height:1px; background:#7b7b7b; margin:50px auto; z-index:1;}
    #timerBar.whiteBar {position:absolute; left:15%; width:320px; text-align:center; height:1px; background:#fff; margin:50px auto; z-index:2; animation:timerBarAnimation 15s ease;}
}

/*===================== 모바일(스마트폰)에서만 견적 폼 숨김 =====================*/
@media screen and (max-width:767px) {
    #estimate_section {display:none !important;}
}



/* =====================================================================
   26년 9월 : 메인비주얼 + 링크 버튼 반응형
   ===================================================================== */

/* ---------- 노트북 (1280px 이하) ---------- */
@media screen and (max-width:1280px) {
    .vsSection .inner.inner_cont {padding:0 40px;}
    .vsSection .inner_cont .inner_txt .vsRow {gap:28px;}
    .vsSection .inner_cont .inner_txt .subtitle1 {font-size:16px;}
}

/* ---------- 태블릿 (1024px 이하) ---------- */
@media screen and (max-width:1024px) {
    /* 글자 가독성 : 위쪽·아래쪽을 조금 더 어둡게 */
    .visualslider .pc .pcVideoBg {
        z-index:11;
        background:linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 45%, rgba(0,0,0,0.55) 100%);
    }

    .vsSection .inner.inner_cont {top:17%; padding:0 32px;}

    /* 큰 제목 4줄을 먼저, 서브문구는 맨 아래로 */
    .vsSection .inner_cont .inner_txt {display:flex; flex-direction:column; align-items:flex-start;}
    .vsSection .inner_cont .inner_txt .vsRow {display:contents;}
    .vsSection .inner_cont .inner_txt .vsRow h2 {margin-top:12px;}
    .vsSection .inner_cont .inner_txt .vsRow .subtxt {order:10; padding:22px 0 0 0;}

    .vsSection .inner_cont .inner_txt h2 {
        margin-top:12px;
        font-size:clamp(36px, min(7.4vw, 9vh), 80px);
        line-height:1.08;
        letter-spacing:-0.01em;
    }
    .vsSection .inner_cont .inner_txt .subtitle1 {padding-top:6px; font-size:15px; letter-spacing:0.3px;}

    /* 링크 버튼 : 글자와 같은 왼쪽 정렬 */
    #link_section {bottom:9%;}
    .link_login_box {padding:0 32px;}
    #link_section.link_align_right .linkBox_Wp,
    #link_section.link_align_center .linkBox_Wp {justify-content:flex-start;}
}

/* ---------- 스마트폰 (767px 이하) ---------- */
@media screen and (max-width:767px) {
    .vsSection .inner.inner_cont {top:calc(70px + 6vh); padding:0 20px;}

    .vsSection .inner_cont .inner_txt h2,
    .vsSection .inner_cont .inner_txt .vsRow h2 {
        margin-top:6px;
        font-size:clamp(28px, 8.6vw, 44px);
        line-height:1.15;
        letter-spacing:-0.03em;
        text-wrap:balance; /* 줄이 넘칠 때 한 단어만 남는 줄 방지 */
    }
    .vsSection .inner_cont .inner_txt .vsRow .subtxt {padding-top:16px;}
    .vsSection .inner_cont .inner_txt .subtitle1 {padding-top:4px; font-size:13px; letter-spacing:0; opacity:0.9;}

    /* 스크롤 아이콘 위로 버튼 3개를 한 줄 같은 너비로 */
    #link_section {bottom:100px;}
    .link_login_box {padding:0 20px;}
    .link_login_box .linkBox_Wp {flex-wrap:nowrap; gap:6px;}
    .link_login_box .linkBox_Wp .linkBox {flex:1 1 0; min-width:0;}
    .link_login_box .linkBox_Wp .linkBox a {justify-content:center; gap:0; height:44px; padding:0 6px;}
    .link_login_box .linkBox_Wp .linkBox a em {font-size:12.5px; letter-spacing:-0.4px;}
    .link_login_box .linkBox_Wp .linkBox a .arrow {display:none;}

    /* 견적문의 호버 원 : 화살표가 없으니 가운데에서 퍼지게 */
    .link_login_box .linkBox_Wp .linkBox.contactLink a::before {right:50%;}
    .link_login_box .linkBox_Wp .linkBox.contactLink a:hover::before {transform:scale(8);}
}

/* ---------- 작은 스마트폰 (360px 이하) ---------- */
@media screen and (max-width:360px) {
    .link_login_box .linkBox_Wp .linkBox a em {font-size:11.5px; letter-spacing:-0.6px;}
}

/* ---------- 스마트폰 가로 모드 (높이가 낮은 화면) ---------- */
@media screen and (max-width:1024px) and (max-height:520px) and (orientation:landscape) {
    .vsSection .inner.inner_cont {top:64px;}
    .vsSection .inner_cont .inner_txt h2,
    .vsSection .inner_cont .inner_txt .vsRow h2 {margin-top:2px; font-size:clamp(22px, 8.4vh, 40px); line-height:1.1;}
    .vsSection .inner_cont .inner_txt .vsRow .subtxt {display:none;}

    #link_section {bottom:18px;}
    #link_section.link_align_right .linkBox_Wp,
    #link_section.link_align_center .linkBox_Wp {justify-content:flex-start;} /* 오른쪽 아래 TOP 버튼과 겹치지 않게 */
    .link_login_box .linkBox_Wp .linkBox {flex:0 0 auto;}
    .link_login_box .linkBox_Wp .linkBox a {height:38px; padding:0 16px;}
    .scrollMouse_wp {display:none;}
}

/* ---------- 움직임 줄이기 설정 사용자 ---------- */
@media (prefers-reduced-motion:reduce) {
    .link_login_box .linkBox_Wp .linkBox a,
    .link_login_box .linkBox_Wp .linkBox a .arrow,
    .link_login_box .linkBox_Wp .linkBox a .arrow img,
    .link_login_box .linkBox_Wp .linkBox.contactLink a::before {transition:none;}
    .link_login_box .linkBox_Wp .linkBox.contactLink a,
    .link_login_box .linkBox_Wp .linkBox.contactLink a:hover .arrow img {animation:none;}
}