@charset "utf-8";

.pc { display: block; }
.mo { display: none; }

/* ww > 1921 */
@media all and (min-width:1921px) {

    /* sec_01 */
    #sec_01::after { left: 40%; transform: translate(-50%,0); }

    /* sec_04 */
    #sec_04 { padding: 100px 0; }
    #sec_04:before { display: none; }
    #sec_04 .container { position: relative; }
    #sec_04 .dump { top: -270px; left: -480px; width: 650px; height: 420px; }
    #sec_04 .container:before { right: 60px; }
    #sec_04 .container::after { top: 130px; left: 20px; }

    /* btn_fix */
    #btn_fix { right: 50%; transform: translate(885px,0); }

}


/* ww <= 1520px*/
@media all and (max-width:1520px) {

    /* terms */
    #terms .terms_con { height: 300px; }

}


/* ww <= 1200 */
@media all and (max-width:1200px) {

    /* header */
    #header h1 { margin-top: 30px; height: 20px; }
    #header h1 > img { height: 100%; object-fit: contain; }

    /* sec_03 */
    #sec_03 p { font-size: 32px; }

    /* sec_04 */
    #sec_04 .dump { top: -300px; left: -80px; height: 280px; }
    #sec_04 ul { margin-top: 50px; max-width: 700px; }
    #sec_04 ul > li > .ico_wrap { width: 60px; height: 60px; }
    #sec_04 ul > li > .ico_wrap > img { width: 25px; }
    #sec_04 ul > li > p { margin-left: 20px; font-size: 22px; }
    

    /* pop */
    .pop_con { padding: 20px; }

    /* terms */
    #terms .top .title { font-size: 17px; line-height: 100%; }
    #terms .top .text { margin: 10px 0 40px; font-size: 15px; line-height: 100%; }
    #terms .terms_con { margin-bottom: 30px; height: 250px; }
    #terms .terms_con > div { margin-bottom: 20px; }
    #terms .terms_con > div > h2 { margin-bottom: 5px; font-size: 14px; line-height: 100%; }
    #terms .terms_con > div > h3 { margin-bottom: 5px; font-size: 14px; line-height: 100%; }
    #terms .terms_con > div > p { margin-bottom: 15px; }
    
}


/* ww <= 1000px*/
@media all and (max-width:1000px) {

    /* header */
    #header h1 { margin-top: 25px; }

    /* sec_01 */
    #sec_01 .top { right: 20px; }
    #sec_01 .mid { padding-top: 160px; }
    #sec_01 .mid > .text { font-size: 90px; line-height: 90px; }

    #sec_05 .products{ grid-template-columns: repeat(2, 1fr); }

}
 

/* ww <= 767*/
@media all and (max-width:767px) {

    .pc { display: none; }
    .mo { display: block; }

    /* header */
    #header h1 { margin-top: 20px; height: 20px; }

    /* 상단 뱃지: 크기/위치 축소 */
    #sec_01 .top{
        top: 12px;
        right: 12px;
        width: 76px;
        height: 76px;
        border-radius: 999px 999px 999px 10px;
    }

    /* mid: 가로 배치 -> 세로 스택 */
    #sec_01 .mid{
        padding: 88px 0 60px;
        max-width: 100%;
        display: block;        /* flex 해제 */
        text-align: center;
    }

    /* absolute 텍스트들: 모바일에서는 absolute 해제해서 겹침 방지 */
    #sec_01 .mid > .text_info02,
    #sec_01 .mid > .text_info03{
        position: static;
    }

    /* 타이포 스케일(모바일) */
    #sec_01 .mid > .text_info01 {
        font-size: clamp(22px, 5.2vw, 34px);
        line-height: 1.12;
        position: absolute;
        top: 88%;
    }
    #sec_01 .mid > .text_info02 {
        font-size: clamp(22px, 5.2vw, 34px);
        line-height: 1.12;
        position: absolute;
        top: 88%;
        font-weight: 600;
        left: 30%;
    }
    #sec_01 .mid > .text_info03 {
        font-size: clamp(22px, 5.2vw, 34px);
        line-height: 1.12;
        position: absolute;
        top: 88%;
        left: 40%;
    }
    #sec_01 .mid > .text_info04 {
        font-size: clamp(22px, 5.2vw, 34px);
        line-height: 1.12;
        position: absolute;
        top: 88%;
        right: 0;
        font-weight: 600;
    }

    /* 트럭 이미지: 가운데 + 폭 제한 */
    #sec_01 .mid > .dump{
        display: block;
        width: min(86vw, 265px);
        margin: 16px auto 0;
        transform: scaleX(-1);
    }

    /* 하단 큰 박스: 모바일에 맞게 축소 */
    #sec_01 .btm {
        width: min(82vw, 520px);
        margin-left: 50%;
        padding: 20px 16px 6px;
        font-size: clamp(26px, 7.5vw, 44px);
        line-height: 1.3;
        border-width: 2px;
        border-radius: 14px 14px 0 0;
    }

    /* 장식 이미지: 모바일에서 크기 줄이고, 화면 침범 최소화 */
    #sec_01 .container:before{
        top: 10px;
        width: 160px;
        height: 160px;
        opacity: 0.55;
    }
    #sec_01 .container::after{
        right: -180px;
        width: 160px;
        height: 130px;
        opacity: 0.55;
    }
    #sec_01::after{
        bottom: -12px;
        width: 70px;
        height: 60px;
        opacity: 0.75;
    }

    /* sec_02 */
    #sec_02 { padding-bottom: 45px; }
    #sec_02 ul { flex-direction: column; justify-content: space-between; align-items: stretch; }
    #sec_02 ul > li { width: 100%; max-width: 100%; margin: 7px 0; padding: 20px 30px; display: flex; justify-content: flex-start; align-items: center; background: #191a24; }
    #sec_02 ul > li > .img_wrap { flex-shrink: 0; width: 100px; height: 100px; margin-bottom: 0px; }
    #sec_02 ul > li > p { margin-left: 20px; font-size: 16px; text-align: left; }

    /* sec_03 */
    #sec_03 { padding: 40px 0; }
    #sec_03 p { font-size: 20px; }

    /* sec_04 */
    #sec_04 .dump { top: -220px; left: -80px; width: 380px; height: 180px; }
    #sec_04 .top > .text { margin-top: 10px; font-size: 15px; }
    #sec_04 ul { margin-top: 40px; max-width: 330px; }
    #sec_04 ul > li { width: 100%; margin: 0 0 10px 0; }
    #sec_04 ul > li > .ico_wrap { width: 40px; height: 40px; }
    #sec_04 ul > li > .ico_wrap > img { width: 18px; }
    #sec_04 ul > li > p { margin-left: 20px; font-size: 20px; }
    #sec_04 .refer { text-align: center; }

    /* sec_05 */
    #sec_05 .title { font-size: 20px; }
    #sec_05 .products{ grid-template-columns: repeat(2, 1fr); gap: 14px; }
    #sec_05 .p-thumb img{ height: 150px; }
    #sec_05 .p-name{ font-size: 14px; }
    #sec_05 .p-year,
    #sec_05 .p-sold-text{ font-size: 13px; }

    /* sec_06 */
    #sec_06 { padding: 40px 0; text-align: center;}
    #sec_06 .call.mo  { display: inline-block; padding: 17px 24px 13px 30px; }
    #sec_06 .call p { padding-right: 30px; }
    #sec_06 .call p::after { top: -5px; width: 22px; height: 22px; }
    #sec_06 .call.pc { display: none; }

    /* footer */
    #footer { padding: 40px 0px; }
    #footer .ico_wrap { bottom: inherit; top: -5px; right: 0; margin-right: -5px; }
    #footer .ico_wrap > li { margin: 0 5px; width: 34px; height: 34px; }
    #footer .ico_wrap > li > a > img { width: 20px; }

    /* btn_fix */
    #btn_fix { bottom: 30px; right: 20px; height: 140px; }
    #btn_fix > li { margin-top: 5px; width: 40px; height: 40px; }

    /* pop_con */
    .pop_con { padding: 15px; }
    .pop_con > .top { margin-bottom: 10px; }
    .pop_con .close { width: 20px; }
    .pop_con .btn_ok { padding-top: 2px; height: 40px; font-size: 15px; }

    /* terms */
    #terms .top .title { font-size: 15px; }
    #terms .top .text { margin: 10px 0 30px; font-size: 13px; }
    #terms .terms_con { margin-bottom: 20px; height: 200px; }
    #terms .terms_con > div { margin-bottom: 20px; }
    #terms .terms_con > div > h2 { font-size: 13px; }
    #terms .terms_con > div > h3 { font-size: 13px; }
    #terms .terms_con > div > p { font-size: 12px; }

}


/* ww <= 500 */
@media all and (max-width:500px) {

    /* sec_01 */
    #sec_01 .top { width: 90px; height: 90px; }
    #sec_01 .mid > .text { font-size: 50px; line-height: 55px; }

    /* sec_02 */
    #sec_02 ul > li { padding: 15px 20px; }
    #sec_02 ul > li > .img_wrap { width: 90px; height: 90px; }
    #sec_02 ul > li > p { margin-left: 15px; font-size: 15px; }

    /* sec_04 */
    #sec_04 ul > li > .ico_wrap { width: 40px; height: 40px; }
    #sec_04 ul > li > .ico_wrap > img { width: 20px; }
    #sec_04 ul > li > p { margin-left: 15px; font-size: 17px; }
    #sec_04 .dump { top: -170px; left: -100px; width: 340px; height: 140px; }
    #sec_04 .container:before { top: -90px; right: 0; height: 70px; }
    #sec_04 .container::after { left: -15px; height: 50px; }

}