/* AMS 홈페이지 반응형 CSS — PC 그대로, 모바일만 재배치 */
/* 원칙: PC 디자인(ams88.com) 100% 유지, @media 안에서만 모바일 처리 */

/* ===== 태블릿 (768px ~ 1199px) ===== */
@media screen and (max-width: 1199px) {
    body { min-width: 0 !important; overflow-x: hidden !important; }
    #__01 { width: 100% !important; }
    .bottomokoktop { width: 100% !important; min-width: 0 !important; }
    .pk1 { width: 100% !important; background-size: cover !important; }
    .logo20230221 { width: 100% !important; }
    .pgwMenu { width: 100% !important; }
    .beitone_banner_page,
    .beitone_banner_page_index20240114 { width: 100% !important; }
    .top { min-width: 0 !important; }
}

/* ===== 모바일 (767px 이하) ===== */
@media screen and (max-width: 767px) {

    /* --- 전체 리셋 (1200px 하드코딩 전부 100%로) --- */
    html { overflow-x: hidden !important; }
    body { min-width: 0 !important; overflow-x: hidden !important; margin: 0 !important; max-width: 100vw !important; }
    .top { min-width: 0 !important; width: 100% !important; }
    .topcter,
    .logo,
    .daohang1200100,
    .pic_2, .pic_2 h3, .pic_2 h2,
    .pic_2_2, .pic_2_2 h2,
    .pimva,
    .index_kongge_4_top20230209,
    .index_kongge_4_top20230206 {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* --- 공지바 --- */
    .pgwMenulogo { width: 100% !important; overflow: hidden !important; }
    .pgwMenulogo em span { font-size: 14px !important; }

    /* --- 로고 영역 --- */
    .logo20230221 {
        width: 100% !important;
        height: auto !important;
        padding: 8px 12px !important;
    }
    .logo20230221 ul {
        display: flex !important;
        align-items: center !important;
        height: auto !important;
    }
    .logo20230221 ul li {
        height: auto !important;
        display: flex !important;
        align-items: center !important;
    }
    .logo20230221 .biaoyilogo img { width: 260px !important; max-width: 260px !important; height: auto !important; }

    /* --- 네비게이션 (가로 스크롤) --- */
    .pgwMenu {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch;
    }
    .pgwMenu .clearfix {
        display: flex !important;
        flex-wrap: nowrap !important;
        height: auto !important;
    }
    .pgwMenu .clearfix a {
        font-size: 14px !important;
        padding: 10px 12px !important;
        white-space: nowrap !important;
    }

    /* --- 배너 슬라이더 --- */
    .beitone_banner_page {
        width: 100% !important;
        max-width: 100vw !important;
        height: auto !important;
        min-height: 150px !important;
        overflow: hidden !important;
    }
    .beitone_banner {
        width: 100% !important;
        max-width: 100% !important;
        height: 200px !important;
        overflow: hidden !important;
    }
    .beitone_banner * { max-width: 100% !important; }
    .beitone_banner .img,
    .beitone_banner .img ul,
    .beitone_banner .img ul ul {
        width: 100% !important;
        height: 200px !important;
    }
    .beitone_banner .img li {
        width: 100% !important;
        height: 200px !important;
        background-size: cover !important;
        background-position: center center !important;
    }
    .beitone_banner .img li a {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* --- 정적 배너 --- */
    .beitone_banner_page_index20240114 { width: 100% !important; }
    .beitone_banner_page img,
    .beitone_banner_page_index20240114 img,
    .espcms_page_bannpic img { width: 100% !important; height: auto !important; }

    /* --- 배너 간격 --- */
    .index_kongge_4_top20230209 { height: 5px !important; }

    /* --- ★ table#__01 핵심 재배치 --- */
    #__01 {
        display: block !important;
        width: 100% !important;
        height: auto !important;
    }
    #__01 > tbody {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }
    #__01 > tbody > tr {
        display: flex !important;
        flex-wrap: wrap !important;
        width: 100% !important;
    }
    #__01 > tbody > tr > td {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        box-sizing: border-box !important;
    }

    /* AMS 제품 세로 카드 → 가로 배너로 변환 */
    .ams-prod-card {
        width: 100% !important;
        height: auto !important;
        padding: 15px 20px !important;
        flex-direction: row !important;
        justify-content: center !important;
        border-radius: 8px !important;
        margin-bottom: 8px !important;
    }
    .ams-prod-card .prod-title { font-size: 22px !important; }

    /* 4개 카테고리 박스 → 2열 그리드 */
    .ams-cat-box {
        width: 100% !important;
        height: auto !important;
        min-height: 70px !important;
        margin-bottom: 6px !important;
        padding: 10px 12px !important;
        border-radius: 8px !important;
    }
    .ams-cat-box .cat-title { font-size: 18px !important; }
    .ams-cat-box .cat-sub { font-size: 14px !important; }

    /* 원형 휠 이미지 */
    #__01 img[usemap] {
        width: 100% !important;
        height: auto !important;
        max-width: 400px !important;
        display: block !important;
        margin: 10px auto !important;
    }

    /* 제품 이미지 그리드 → 2열 */
    .box20230205 { width: 100% !important; }
    .box20230205 ul {
        display: flex !important;
        flex-wrap: wrap !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .box20230205 ul li {
        width: 50% !important;
        height: auto !important;
        box-sizing: border-box !important;
        padding: 3px !important;
    }
    .box20230205 ul li img {
        width: 100% !important;
        height: auto !important;
    }

    /* --- 간격 --- */
    .index_kongge_4_top20230206 { height: 10px !important; }

    /* --- 다크배너 --- */
    .bottomokoktop {
        width: 100% !important;
        height: auto !important;
        min-width: 0 !important;
    }
    .bottomokoktop img { width: 100% !important; height: auto !important; }
    .ams-dark-banner {
        width: 100% !important;
        height: auto !important;
        padding: 15px 10px !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 10px !important;
    }
    .ams-dark-banner .db-product {
        width: 100% !important;
        height: auto !important;
        margin-left: 0 !important;
        justify-content: center !important;
    }
    .ams-dark-banner .db-product img {
        max-width: 80% !important;
        height: auto !important;
    }
    .ams-dark-banner .db-main { font-size: 16px !important; }
    .ams-dark-banner .db-sub { font-size: 14px !important; }
    .ams-dark-banner .db-brand { font-size: 28px !important; }
    .ams-dark-banner .db-divider { width: 40px !important; height: 2px !important; }

    /* --- 뉴스 / 기술자료 --- */
    .pk1 {
        width: 100% !important;
        height: auto !important;
        padding: 15px 12px !important;
        background-size: cover !important;
        min-width: 0 !important;
    }
    .pk_left {
        width: 100% !important;
        float: none !important;
        margin-bottom: 15px !important;
    }
    .pk_left ul { width: 100% !important; }
    .pk_left li { width: 100% !important; }
    .pk_left li a { font-size: 14px !important; line-height: 1.6 !important; }
    .pk_left h3 { font-size: 16px !important; width: 100% !important; max-width: 100% !important; }
    .pk_left1 { width: 100% !important; }

    /* iframe 뉴스/기술자료 */
    iframe { width: 100% !important; }

    /* --- 푸터 --- */
    div.top[style*="background-color:#363636"],
    div.top[style*="#363636"] {
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        min-height: auto !important;
    }
    .chenrd_page_liucheng {
        flex-direction: column !important;
        padding: 15px 10px !important;
    }
    .chenrd_page_left_liucheng_index,
    .chenrd_page_right_liucheng_index {
        width: 100% !important;
        text-align: center !important;
    }
    .chenrd_page_left_liucheng_index li,
    .chenrd_page_right_liucheng_index li {
        font-size: 14px !important;
        line-height: 1.8 !important;
    }

    /* --- 터치 타겟 --- */
    a, button { min-height: 40px; }

    /* --- 기타 overflow 방지 --- */
    img { max-width: 100% !important; height: auto !important; }
    table { max-width: 100% !important; }

    /* 위챗/카카오 플로팅 버튼 */
    #lrtk { display: none !important; }
}

/* ===== 소형 모바일 (375px 이하) ===== */
@media screen and (max-width: 375px) {
    .logo20230221 .biaoyilogo img { width: 210px !important; }
    .pgwMenu .clearfix a { font-size: 14px !important; padding: 8px 8px !important; }
    .ams-cat-box .cat-title { font-size: 16px !important; }
    .ams-prod-card .prod-title { font-size: 18px !important; }
    .box20230205 ul li { width: 100% !important; }
}
