@charset "UTF-8";
@import url(../common.css);
@import url(./style2.css);
@import url(./style3.css);
@import url(./style4.css);

.subTit{font-size:30px; color:#222; padding:100px 0 30px; font-family:'NotoSans-Medium';}
.subTit.xPaddingT{padding-top: 0;}
.subTit2{font-size:26px; color:#222; font-family:'NotoSans-Light';}
.subTit3{font-size:30px; color:#222; padding:100px 0 20px; font-family:'NotoSans-Medium';}
.letterTxt{font-family:'NotoSans-Light'; line-height:24px; letter-spacing:-0.3px}
.letterTxt2{font-family:'NotoSans-Light'; line-height:24px; letter-spacing:-0.1px}
.subTxt{font-family:'NotoSans-Light'; line-height:26px; color:#666; font-size:16px}
.subTxt2{font-family:'NotoSans-Light'; line-height:26px; color:#333; font-size:16px}
.graphType1{width:1100px; height:100%; border:1px solid #e8e8e8; box-sizing:border-box; padding:80px; overflow:hidden;}
.graphType1 .graph{width:260px; margin-right:28px; padding-right:40px; border-right:2px solid #f3f3f3; float:left;}
.graphType1 .graph:last-child{margin-right:0; border-right:none; padding-right:0;}
.graphType2{width:1100px; height:100%; border:1px solid #e8e8e8; box-sizing:border-box; padding:50px 100px 75px; overflow:hidden;}
.graphType2 .graph{width:270px; margin-right:44px; float:left;}
.graphType2 .graph:last-child{margin-right:0;}
.graphType3{width:1100px; height:100%; border:1px solid #e8e8e8; box-sizing:border-box; overflow:hidden;}

.ft14{color:#777; font-size:14px; font-family:'NotoSans-Regular';}
.investDiv{margin-top:100px; width:100%; height:674px; box-sizing:border-box; padding:83px 0 42px}
.investList{ overflow:hidden; width:1100px}
.investList .invest{float:left; display:block; position:relative; width:357px; height:242px; margin-right:29px; padding-right:30px; border-right:1px solid #e1e1e1; box-sizing:border-box}
.investList .invest:nth-child(5n-2){margin-right:0; width:327px; border-right:none}
.investList .invest img.on{position:absolute; top:0; left:0; opacity:0}
.investList .invest .imgBtn:hover img.on{opacity:1}
.investList .invest .tit{text-align:center; margin-top:20px; font-size:18px; color:#333; font-family:'NotoSans-Bold';}

.downBox{border:1px solid #e8e8e8; padding:50px 40px; position:relative;}
.downBox .txt{font-size:16px; font-family:'NotoSans-Medium'; color:#666;}
.downBox .download{position:absolute;top:30px; right:40px;}

.summaryDiv {
    width: 100%;
    /* PC 고정 높이 대신 내부 flex 요소들의 간격(padding)으로 원본 높이감을 유지합니다 */
    padding: 200px 0 230px 0; 
    background: url("/pc/common/images/otn/com0101_img1.jpg") no-repeat center 0 / cover;
    box-sizing: border-box;
}

.summaryDiv .inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    /* absolute 대신 요소 간의 수직 간격을 flex gap으로 제어하여 절대 깨지지 않습니다 */
    gap: 120px; 
}

/* 1. 상단 텍스트 영역 */
.summaryDiv .summaryTxt1 {
    width: 100%;
    color: #555;
    font-size: 18px;
    line-height: 1.5;
    font-family: 'NotoSans-Light';
}

.summaryDiv .summaryTxt1 .tit {
    color: #fff;
    font-size: 50px;
    line-height: 1.3;
    margin-bottom: 35px;
}

.summaryDiv .summaryTxt1 .txt {
    color: #fff;
}

/* 2. 중간 이미지 카드 영역 (flex 및 % 적용) */
.summaryDiv .summaryImg1 {
    width: 100%;
    display: flex;
    flex-direction: row; /* 기본 가로 배치 */
    justify-content: space-between;
}

.summaryDiv .summaryImg1 .txtW {
    width: 49.09%; /* 1100px 중 540px 비율 반영 */
    height: 620px;
    padding: 90px 70px;
    box-sizing: border-box;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.summaryDiv .summaryImg1 .txtW:first-child {
    background: url("/pc/common/images/otn/summaryImg1_img1.jpg") no-repeat center center / cover;
}

.summaryDiv .summaryImg1 .txtW:last-child {
    background: url("/pc/common/images/otn/summaryImg1_img2.jpg") no-repeat center center / cover;
}

.summaryDiv .summaryImg1 .txtW .num {
    font-size: 50px;
    font-family: 'Montserrat';
    font-weight: 700;
    padding-bottom: 12px;
    border-bottom: 2px solid #fff;
    align-self: flex-start;
}

.summaryDiv .summaryImg1 .txtW .txt {
    font-size: 18px;
    font-family: 'NotoSans-Light';
    line-height: 1.5;
}

/* 3. 하단 텍스트 영역 */
.summaryDiv .summaryTxt2 {
    font-family: 'NotoSans-Light';
    color: #444;
    font-size: 24px;
    line-height: 34px;
    width: 100%;
    text-align: center;
}

.summaryDiv .summaryTxt2 .txt {
    color: #fff;
}

.visionDiv .tit{font-size:30px; font-family:'NotoSans-Medium'; color:#222;margin-top:100px;}
.visionDiv .imgDiv{text-align:center;}
.visionDiv .imgDiv .txt{font-size:40px; font-family:'NotoSans-Light'; color:#333; line-height:1.3}
.visionDiv .imgDiv .txt .boldT{font-family:'NotoSans-Bold'; color:#333; display:block;}
.visionDiv .visionList:after{content:""; display:block; clear:both;}
.visionList {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
}
.visionDiv .visionList li{width: calc((100% - 40px) /3); padding:40px; box-sizing:border-box; background:#e8e8e8; position:relative; font-size:14.5px; font-family:'NotoSans-Light'; color:#666; line-height:1.5;} /* 2022-02-07 수정 */
.visionDiv .visionList li .num{position:absolute;top:0;right:0; width:40px; height:40px;line-height:40px; font-size:20px; font-family:"Montserrat", "Noto Sans KR", "Malgun Gothic"; color:#fff; font-family:'NotoSans-Medium'; text-align:center; background:#9cacba;}

.visionDiv .ciLogo {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2rem;
}
.visionDiv .ciLogo:after{content:"";display:block; clear:both;}
.visionDiv .ciLogo p{width:calc((100% - 2rem) /2); }
/* .visionDiv .ciLogo p:nth-of-type(2n){margin-left:40px;} */
.visionCon img {width: 100%; max-width: fit-content;}

.history_sec1{padding-top:100px; width:100%; height:1100px; background:url("/pc/common/images/otn/com0104_img1.png") no-repeat center bottom;} /* 2022-02-07 수정 */
.his_2011{position:relative;}
.his_2011 .year_txt{font-size:70px; color:#333; font-weight:700}
.his_2011 .year_txt .since_txt{font-size:30px; color:#333; font-weight:300;}
.his_2011 .year_box{box-sizing:border-box; padding:60px 20px 60px 60px; width:550px; background:#006eb7; margin-top:30px;}
.history_cont .year_box .list{padding-top:27px; overflow:hidden; color:#fff; font-size:15px;}
.history_cont .year_box .list:first-child{padding-top:0;}
.history_cont .year_box .list .month_cont{float:left; padding-top:15px; width:370px;}
.history_cont .year_box .list .month_cont:nth-child(2){padding-top:0;}
.history_cont .year_box .list .year{float:left; width:80px; font-size:20px; font-weight:300; }
.history_cont .year_box .list .month{float:left; padding-right:5px; font-weight:700; line-height:1.3}
.history_cont .year_box .list .detail_txt{float:left; font-family:'NotoSans-Light';}
.history_cont .year_box .list .detail_txt p{padding-top:10px; letter-spacing:-0.5px; font-size:15px; line-height:1.3}
.history_cont .year_box .list .detail_txt p:first-child{padding-top:0;}
.ceoGreeting_cont{margin-top:100px; min-height:550px; background:url("/pc/common/images/otn/com0105_img1.gif") no-repeat center bottom;}
.ceoGreeting_cont .inner{background:url("/pc/common/images/otn/obk_ceo_img1.png") no-repeat 0 0;}
.ceoGreeting_cont .greet_txt{padding-top:62px;}
.ceoGreeting_cont .txt{padding-top:40px; font-family:'NotoSans-Light'; line-height:28px;}
.ceoGreeting_cont .txt .ceo_info1{padding-top:4px; color:#333; line-height:1;} /* 2022-02-07 수정 */
.ceoGreeting_cont .txt .ceo_info2{padding:10px 0 120px; color:#333; font-size:22px; font-family:'NotoSans-Bold'; line-height:1;}
.network_map{padding-top:100px;}
.network_map .map_list{margin-top:20px;}
.network_map .map_list:first-child{margin-top:0;}
.network_map .map_list_addr{display:table; box-sizing:border-box; padding:40px 40px 80px; width:100%; height:auto; border:1px solid #e8e8e8;}
.network_map .agency_info{display:table-cell; vertical-align:middle; position:relative; width:820px; font-family:'NotoSans-Light';}
.network_map .agency_info .agency_name{font-size:22px; color:#333; font-family:'NotoSans-Bold';}
.network_map .agency_info .agency_name:after{content:""; display:block; margin-top:15px; width:40px; height:3px; background:#333;}
.network_map .agency_info .subj{display:inline-block; padding-right:10px; width:65px; font-size:14px; color:#333; font-weight:700}
.network_map .agency_info .map_open{position:absolute; top:0px; right:0; width:130px; height:130px; background:url("/pc/common/images/otn/network_mapBtn_s1.gif") no-repeat 0 0;}
.network_map .agency_info .map_open:hover{background:url("/pc/common/images/otn/network_mapBtn_s2.gif") no-repeat 0 0;}
.network_map .agency_info .map_open.open{background:url("/pc/common/images/otn/network_mapBtn_s3.gif") no-repeat 0 0;}
.network_map .map_open_cont{border:1px solid #e8e8e8; border-top:0;}
.network_jisa_cont .network_jisa{margin-top:20px;}
.network_jisa_cont .network_jisa .jisa_open{display:block; box-sizing:border-box; padding:40px 60px; /*height:100px;*/ font-size:18px; color:#333; font-family:'NotoSans-Bold'; border:1px solid #e8e8e8; background:url("/pc/common/images/otn/network_jisa_downArrow.gif") no-repeat 95% center #f6f6f6;}
.network_jisa_cont .network_jisa .jisa_info{padding:70px; border:1px solid #e8e8e8; border-top:0; background:#fdfdfd;}
.network_jisa_cont .network_jisa .jisa_info2{padding:40px 60px; font-size:16px; color:#666; line-height:26px; font-family:'NotoSans-Light'; border:1px solid #e8e8e8; border-top:0; background:#fdfdfd; height:88px; overflow-y:scroll;}
.network_jisa_cont .network_jisa .jisa_open.on{background:url("/pc/common/images/otn/network_jisa_upArrow.gif") no-repeat 95% center #f6f6f6;}
.network_jisa_cont .network_jisa .jisa_info .tit{color:#333; font-size:18px; font-family:'NotoSans-Bold';}
.network_jisa_cont .addr_cont{position:relative; text-align:left;}
.network_jisa_cont .addr_cont .addr{padding:0 60px 0 20px;}
.network_jisa_cont .addr_cont .map_btn{position:absolute; top:50%; right:10px; transform:translate(0, -50%);}
.find_petrolStation{margin-top:100px; height:400px; text-align:center; background:url("/pc/common/images/otn/com0201_bg.jpg") no-repeat center 0;}
.find_petrolStation .txt1{padding-top:110px; font-size:60px; color:#fff; font-family:'NotoSans-Thin';}
.find_petrolStation .txt2{padding:12px 0 40px; font-size:30px; color:#fff; font-family:'NotoSans-Thin';}
.globalNetwork_bg{margin-top:100px; width:1100px; height:520px; background:url("/pc/common/images/otn/globalNetwork_bg.gif") no-repeat 0 0;}
.globalNetwork_cont .nation{position:relative; float:left; box-sizing:border-box; margin-bottom:20px; padding:70px 20px 70px 60px; width:540px; height:310px; border:1px solid #e8e8e8;}
.globalNetwork_cont .nation:nth-child(2n-2){margin-left:20px;}
.globalNetwork_cont .nation .img_cont{position:absolute; top:31px; left:389px;}
.globalNetwork_cont .nation .agency_name{padding-bottom:20px; font-size:22px; color:#333; font-family:'NotoSans-Bold';}
.globalNetwork_cont .nation .agency_name:after{content:""; display:block; margin-top:15px; width:40px; height:3px; background:#333;}
.globalNetwork_cont .nation .addr_txt{margin-top:27px;}
.globalNetwork_cont .nation .addr_txt .subj{width:75px; font-size:14px; color:#333; font-family:'NotoSans-Bold';}
.globalNetwork_cont .nation .addr_txt .addr{width:365px; font-family:'NotoSans-Light'; line-height:1.3;}
.ethics1{padding-top:100px; font-family:'NotoSans-Light'; line-height:1.5;}
.ethics2{box-sizing:border-box; padding:120px 0 100px; margin:80px auto 0; width:1550px; height:auto; text-align:center; background:url("/pc/common/images/otn/ethics_img1.gif") no-repeat center 0;background-size: cover;}
.ethics2 .txt{padding-top:19px; font-family:'NotoSans-Thin'; color:#555; font-size:30px;}
.ethics2 .list_cont{width: 100%;padding-top:50px; text-align:left; font-family:'NotoSans-Light';
display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem;}
.ethics2 .list_cont .listBox{padding:30px 0 0 0; width:calc((100% - 6rem) /4); background:url("/pc/common/images/otn/ico_triangle.png") no-repeat 0 0;}
.ethics2 .list_cont .subj{padding-bottom:20px; font-size:20px; color:#222;}
.ethics2 .list_cont .list_txt{padding-bottom:12px;}
.ethics3{width: 100%;padding:120px 0 470px; margin-bottom:120px; font-family:'NotoSans-Light'; line-height:1.5; background:url("/pc/common/images/otn/ethics_img3.gif") no-repeat center bottom; background-size: auto;} 
.ethics4{margin-top:100px; height:400px; text-align:center; background:url("/pc/common/images/otn/ethics_img4.jpg") no-repeat center center;}
.ethics4 .txt1{padding:105px 0 30px; font-family:'NotoSans-Thin'; font-size:30px; color:#fff; line-height:1.3;}

.line_tit:after{content:""; display:block; margin-top:13px; width:40px; height:3px; background:#333;}

.biz0104_div1{width:100%; height:710px; background:url("/pc/common/images/otn/biz0104_img1.jpg") no-repeat center center;}
.biz0105_div1{width:100%; height:710px; background:url("/pc/common/images/otn/biz0105_img1.jpg") no-repeat center center;}
.biz0106_div1{width:100%; height:710px; background:url("/pc/common/images/otn/biz0106_img1.jpg") no-repeat center center;}
.biz0107_div1{width:100%; height:710px; background:url("/pc/common/images/otn/biz0107_img1.jpg") no-repeat center center;}
.biz0107_div2{padding-top:130px; font-size:16px; color:#666; font-family:'NotoSans-Light'; line-height:24px;}
.biz0107_div2 .gasStation_box{background:url("/pc/common/images/otn/biz0107_img4.jpg") no-repeat center center; width:1100px; height:727px;}
.biz0107_div2 .inner .txt1.font_mont{color:#333; font-size:50px; font-weight:bold; margin-bottom:28px;}
.biz0107_div2 .inner .network_jisa_cont .network_jisa .jisa_info .subTit:nth-child(1){padding:0 0 30px;}
.biz0107_div2 .inner .blu_btn{font-family:'NotoSans-Medium';}
.network_jisa .jisa_info .processDiv .process_con{width:960px; height:182px; position:relative;}
.network_jisa .jisa_info .processDiv .process_con .process_step{display:table; text-align:center; border-radius:100px; width:152px; height:152px; color:#fff; font-size:17px; font-family:'NotoSans-Bold'; line-height:22px; background:#0061a6; position:absolute; top:0; left:0;}
.network_jisa .jisa_info .processDiv .process_con .disTable{display:table-cell; vertical-align:middle;}
.network_jisa .jisa_info .processDiv .process_con .process_txt{color:#666; font-size:16px; font-family:'NotoSans-Light'; line-height:26px; box-sizing:border-box; padding:0 30px; width:792px; height:152px; border:1px solid #e8e8e8; background:#fff; position:absolute; top:0; right:0; display:table;}
.network_jisa .jisa_info .processDiv .process_con .process_txt .txt{margin-top:;}
.network_jisa .jisa_info .processDiv .process_con .process_arrow1{position:absolute; top:76px; left:152px; width:16px; height:1px;}
.network_jisa .jisa_info .processDiv .process_con .process_arrow2{position:absolute; bottom:0; left:57px; width:30px; height:30px;}
.network_jisa .jisa_info .processDiv .process_con:nth-child(2n) .process_step{background:#7ab458;}
.network_jisa .jisa_info .processDiv .process_con.last{height:152px;}
.network_jisa .jisa_info .processDiv .process_con.last .process_step{box-sizing:border-box; border:4px solid #0061a6; background:#fff; color:#333; font-size:22px; line-height:26px; font-family:'NotoSans-Bold';}
.network_jisa .jisa_info .processDiv .process_con .process_date{color:#333; width:76px; height:76px; background:#eee; text-align:center; border-radius:100px; display:table; position:absolute; top:38px; right:31px;}
.network_jisa .jisa_info .processDiv .process_con .process_date.fir{top:22px; height:290px; z-index:5;}
.biz0107_div2 .inner .biz0107List{width:960px;}
.biz0107_div2 .inner .biz0107List .list{width:960px; line-height:30px; font-family:'NotoSans-Light';}
.biz0107_div2 .inner .biz0107List .list .txt1{background:url("/pc/common/images/otn/com0503_icon.gif") no-repeat 0 0; line-height:26px; color:#333; font-size:22px; padding-top:10px; margin-bottom:7px}
.biz0107List .list .safeDiv{width:960px; height:156px; padding:24px 30px 0; border:1px solid #e8e8e8; background:#fff; box-sizing:border-box; line-height:26px; color:#666; font-size:16px;}

.network_jisa .jisa_info .biz_txt1{color:#222; font-size:30px; font-family:'NotoSans-Medium';}
.network_jisa .jisa_info .biz_txt2{color:#666; font-size:16px; font-family:'NotoSans-Light'; line-height:24px;}
.network_jisa .jisa_info .mdsdDiv{width:960px; height:89px; background:#efefef; box-sizing:border-box; font-size:14px; color:#888; font-family:'NotoSans-Light'; line-height:24px; padding:20px 25px; margin-top:17px;}
.mdsd_tabDiv{width:960px; height:493px; position:relative; border-top:1px solid #ddd; box-sizing:border-box;}
.mdsd_tabDiv .tab{float:left; width:240px; color:#333; font-family:'NotoSans-Medium'; height:51px; box-sizing:border-box; border-left:1px solid #ddd; border-bottom:1px solid #ddd; text-align:center; line-height:50px; position:relative;}
.mdsd_tabDiv .tab:nth-of-type(4n) {border-right:1px solid #ddd;}
.mdsd_tabDiv .tab .on_bg{width:240px; height:52px; position:absolute; top:-1px; left:-1px; background:#006eb7; border:1px solid #005994; box-sizing:border-box; z-index:5; opacity:0;}
.mdsd_tabDiv .tab.on .on_bg{opacity:1; color:#fff; font-family:'NotoSans-Bold';}
.mdsd_tabDiv .tableType3{position:absolute; top:133px; left:0; width:100%;}
.sitemap_box{width:100%; background:url("/pc/common/images/otn/etc0103_img1.jpg") no-repeat center bottom; margin-top:100px;}
.sitemap_box .sitemap li{border-top:1px solid #f2f2f2; overflow:hidden; padding:40px 0; height:322px; box-sizing:border-box;}
.sitemap_box .sitemap li:nth-child(1){border-top:none; padding:0 0 40px; height:249px}
.sitemap_box .sitemap li:nth-child(3){padding:40px 0 0; height:280px}
.sitemap li .site_tit{float:left; color:#000; font-size:30px; font-family:'NotoSans-Thin'; width:220px}
.sitemap li .site_tit:after{content:""; display:block; margin-top:15px; width:50px; height:4px; background:#000;}
.sitemap li .site_list{float:left; width:880px; overflow:hidden;}
.sitemap li .site_list dl.list{float:left; width:190px;}
.sitemap li .site_list dl.list:nth-child(5){width:120px;}
.sitemap li .site_list dl.list dt a{color:#555; font-size:16px; font-family:'NotoSans-Bold'; margin-bottom:30px; display:block;}
.sitemap li .site_list dl.list dd a{color:#666; font-size:15px; font-family:'NotoSans-Light'; margin-bottom:13px; display:inline-block; height:17px}
.sitemap li .site_list dl.list dd:last-child{margin-bottom:0;}
.sitemap li .site_list dl.list dd a:hover{border-bottom:1px solid #555; height:16px}
.gray_box{width:1000px; padding:50px; background:#f7f7f7; font-size:16px; color:#666; font-family:'NotoSans-Light'; line-height:26px; letter-spacing:-0.9px;}
.gray_box .date{color:#333;}
.personal_info{color:#666; font-size:16px; font-family:'NotoSans-Light'; line-height:24px; letter-spacing:-0.8px;}
.personal_info .infoTit{margin:70px 0 30px; color:#000; font-size:20px; font-family:'NotoSans-Medium'; letter-spacing:0;}
.personal_info .infoTit:first-child{margin:45px 0 30px;}
.error_box{width:100%; height:530px; position:relative; padding-top:450px; background:url("/pc/common/images/otn/etc0101_img1.jpg") no-repeat center center; color:#fff; font-size:16px; font-family:'NotoSans-Light'; line-height:24px;}
.error_box h1.logo{position:absolute; top:72px; left:0; width:100%;}
.error_box .txt1{font-size:36px; font-family:'NotoSans-Bold'; margin-bottom:30px;}
.error_box .go_home_btn a{display:inline-block; font-family:'NotoSans-Medium'; width:210px; height:60px; box-sizing:border-box; border:1px solid #fff; color:#fff; font-size:20px; padding:18px 0; background:rgba(0, 0, 0, 0.5);}

.organiDiv{background:url("/pc/common/images/otn/organiDiv_bg.png?ver=20260630") no-repeat center 0; width:100%; height:655px; margin-top:100px;} 

.com0201Div1 { }
.com0201Div1 .img{padding:75px 20px; text-align:center; border:1px solid #e8e8e8;}
.com0201Div1 .img img{width: 100%; max-width: fit-content;}
.com0201Div2 .tableType2 .sum th,.com0201Div2 .tableType2 .sum td{font-family:'NotoSans-Bold'; color:#333;}


.partner {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 10px;
}
.partner li {
    /* border: 1px solid #e8e8e8; */
    padding: 20px;
}
.pc_hidden { display: none;}
.m_hidden { display: block;}

@media screen and (max-width: 1550px) {
/* -----------------------  main visual/header/footer ----------------------*/
.ethics2 {
        width: 100%;
        padding: 70px 20px;
    }
}