@media screen and (max-width: 1199px) {
   .pc-only {display: none;}
    .summaryDiv {
        padding: 100px 20px; /* 좌우 여백을 주어 화면 끝에 붙지 않게 보호 */
    }
    
    .summaryDiv .inner {
        max-width: 100%;
        gap: 80px;
    }
    
    /* 가로 배치는 유지하되 안쪽 패딩을 부드럽게 축소 */
    .summaryDiv .summaryImg1 .txtW {
        padding: 60px 40px;
        height: 520px;
    }
    .comDiv .comList li {
        width: calc((100% - 20px) / 3);
    }
    .network_map .agency_info .map_open {
        top: inherit;
        bottom: -60px;
        left: 0;
        right: inherit;
        width: 100%;
        height: 30px;
        background: url(/pc/common/images/otn/network_jisa_downArrow.gif) no-repeat center 10px #f6f6f6;
            background-size: 16px;
    }
    .network_map .agency_info .map_open:hover {
        top: inherit;
        bottom: -60px;
        left: 0;
        right: inherit;
        width: 100%;
        height: 30px;
        background: url(/pc/common/images/otn/network_jisa_downArrow.gif) no-repeat center 10px #f6f6f6;
            background-size: 16px;
    }
    .network_jisa_cont .network_jisa .jisa_open {    padding: 30px;    }
    .network_jisa_cont .network_jisa .jisa_info {  padding: 30px;}
    .ethics1 {padding: 20px;}
    .ethics2 {margin: 0 auto 0px; padding: 50px 20px;}
    .ethics2 .txt {
        font-size: 20px;
    }
    .ethics2 .list_cont .listBox {
        width: calc((100% - 2rem) / 2);
    }
    .ethics3 {
        padding: 0px 20px 400px;
        width: calc(100% - 40px);
        margin: 0 auto 50px;
        box-sizing: border-box;
        background-size: contain;
    }
    .biz0101_div1 .bizTopCon .blueBox .txt br {display: none;}
    .biz0101_div1 .bizTopCon .table .tableCon .txt {font-size: 16px;    }
    .biz0101_div1 .bizTopCon .table .tableCon.small .txt {font-size: 16px;    }
    .inner.padding {
        padding: 50px 20px 60px;
    }
    .biz0101_div2 {
        margin-top: 60px;
        padding-bottom: 60px;
    }
    .biz0102_div1 .txtArea .tit {
        font-size: 30px;
    }
    .biz0102_div1 {padding: 20px;}
    .biz0102_div2 {
        padding: 20px;
    }
    .biz0103_wrap {
        margin: 50px 0 60px;
    }
    .biz0201_div1 {
        padding: 0 20px;
    }
    .biz0202_div1 .tit {
        font-size: 24px;
    }
    .biz0203_div1 .bizCon {margin-bottom: 50px; padding: 0 20px;   }
    .biz03_div1.manage {padding: 0 20px 380px;}
    .biz03_div1.natural .bizCon_wrap {padding: 0 20px;}
    .biz03_div1 .bizCon_wrap.conBot .naturalCon {
        padding: 40px 106px 40px 40px;
    }
    .biz03_div1 .naturalCon:nth-child(1) {
        background-size: 80px;
    }
    .biz03_div1 .naturalCon:nth-child(2) {
        background-size: 80px;
    }
    .biz03_div1 .naturalCon:nth-child(3) {
        background-size: 80px;
    }
    .biz03_div1 .naturalCon:nth-child(4) {
        background-size: 80px;
    }
    .biz0303_div1 .bizCon .cycle {
        height: 600px;
        background-size: 100%;
    }
    .career_cont {padding: 20px;}
}
@media screen and (max-width: 1030px) {
    .organiDiv {
        background-size: contain;
    }
}
/* ==========================================================================
   📱 [구간 2] - ★ 화면 가로폭이 800px 이하일 때 (모바일 세로 전환)
   ========================================================================== */
@media screen and (max-width: 800px) {
.biz0101_div1 {
    padding: 0 20px;
    box-sizing: border-box;
}
.biz0101_div1 .bizTopCon {
    margin-top: 33px;
    width: 100%;
}
.biz0101_div2 {
    flex-direction: column-reverse;
}
.biz0101_div2 > .div2Title {
    width: 100%;
    background-size: cover;
}
.biz0101_div2 > .div2Txt {
    width: 100%;
    margin-top: 50px;
    padding: 0 20px;
    box-sizing: border-box;
}
.biz0101_div2 .div2Txt .font_mont {
    font-size: 20px;
}
.biz0101_div2 .div2Txt > p {
    margin-bottom: 20px;
    font-size: 16px;
}
.biz0201_div1 .bizCon .tit {font-size: 30px;}
.biz0201_div1 .bizCon .txt {
    font-size: 16px;line-height: 26px;
}
.biz0202_div1 .order {
    display: table;
    box-sizing: border-box;
    width: 100%;
    padding-right: 0px;
    padding-bottom: 30px;
}
.biz0202_div1 .order{background:url("/pc/common/images/otn/biz0202_arrow_icon_m.png") no-repeat bottom;}
.biz0202_div1 .order:last-child{padding-bottom: 0;}
.biz0202_div1 .orderWrap:nth-of-type(2) {
    margin-bottom: 50px;
}
.biz0203_div1 .bizCon .tit{width:100%;margin-bottom: 20px; }
.biz0203_div1 .bizCon .imgWrap{width:100%; }
.biz03_div1 .bizCon {width:100%; }

}

/* ==========================================================================
   📱 [구간 2] - ★ 화면 가로폭이 640px 이하일 때 (모바일 세로 전환)
   ========================================================================== */
@media screen and (max-width: 640px) {
    .summaryDiv {
        padding: 60px 20px;
    }

    .summaryDiv .inner {
        gap: 50px;
    }

    /* 1. 상단 텍스트 반응형 축소 */
    .summaryDiv .summaryTxt1 {
        font-size: 15px;
    }

    .summaryDiv .summaryTxt1 .tit {
        font-size: 28px; /* 모바일 크기에 맞춤 */
        line-height: 1.4;
        margin-bottom: 20px;
    }
    
    .summaryDiv .summaryTxt1 .txt {
        word-break: keep-all; /* 한글 단어 단위 예쁜 줄바꿈 */
    }

    /* 2. 중간 카드 영역 ★세로 정렬 전환★ */
    .summaryDiv .summaryImg1 {
        flex-direction: column; /* 세로 배치로 변경 */
        gap: 16px;
    }

    .summaryDiv .summaryImg1 .txtW {
        width: 100%; /* 세로 배정 시 가로폭 꽉 채움 */
        height: auto;
        min-height: 320px; /* 모바일에서 보기 좋은 최소 높이 */
        padding: 40px 24px;
    }

    .summaryDiv .summaryImg1 .txtW .num {
        font-size: 36px;
        padding-bottom: 6px;
    }

    .summaryDiv .summaryImg1 .txtW .txt {
        font-size: 15px;
        margin-top: 40px; /* 세로형 오토 레이아웃 간격 조정 */
        word-break: keep-all;
    }

    /* 3. 하단 텍스트 반응형 축소 */
    .summaryDiv .summaryTxt2 {
        font-size: 18px;
        line-height: 1.5;
        text-align: left; /* 모바일 환경 가독성을 위해 좌측 정렬 권장 (원하시면 center 유지 가능) */
        word-break: keep-all;
    }
    .environment1 {
        padding: 20px 20px 100px 20px;
        box-sizing: border-box;
        height: auto;
        }
    .environmentList .list{ width:100%;}
    .his_2011 .year_box {
        width: 100%;
        padding: 30px;
    }
    .history_sec1 {
        padding: 20px 20px 100px 20px;
        box-sizing: border-box;
        height: auto;
    }
    .his_2011 .year_txt {
        font-size: 40px;
    }
    .visionDiv .visionList li{width: 100%;}
    .visionDiv .ciLogo p{width:100%; }
    .comDiv{background:url("/pc/common/images/otn/comDiv_bg.jpg") no-repeat center bottom;}
    .comDiv .comList li{width:100%; padding: 20px;box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);    border: 1px solid rgba(0, 0, 0, 0.1);}
    .comDiv .comList li .tit { margin: 10px 0 10px;}
    .comDiv .comList li .txt { font-size: 15px;}
    .comDiv .grayBox {    padding: 30px;}
    .comDiv .grayBox .tit {    float: inherit;}
    .comDiv .grayBox .txt {
        font-size: 15px;
        margin-left: 0;
        margin-top: 10px;
    }
    .com0201Div1 .img {padding: 30px;}
    .ethics3 {
        padding: 0px 0px 250px;
        background-size: contain;
    }
    .ethics2 .list_cont .listBox {
        width: 100%;
    }
    .oil_business_wrap {
        margin: 50px auto 0;
    }
    .biz0102_div2 .txtArea .caption {
        text-align: left;
        padding: 20px 0;
    }
    .biz0201_div1 .bizCon {width: 100%; padding: 50px;}
    .biz0201_div1 .bizCon .tit{margin-bottom: 20px;}
    .biz0203_div1 .bizCon .imgWrap .imgCon {width: 100%;}
    .biz03_div1 .bizCon {width: 100%;}
    .biz03_div1 .bizCon_wrap.conBot .naturalCon {width: 100%;}
    .biz03_div1 .naturalCon:nth-child(1) {
        border-right: 1px solid #e8e8e8;
    }
    .biz03_div1 .naturalCon:nth-child(3) {
        border-right: 1px solid #e8e8e8;
        border-bottom: none;
    }
    .biz0303_div1 .bizCon .cycle {
        height: 770px;
        background: url(/pc/common/images/otn/biz0303_img_m.jpg) no-repeat center center;
        background-size: 90%;
    }
    .biz0303_div1 .bizCon .con {
        width: 100%;
    }
}