/* ==========================================================================
   현대오일터미널 인재상 반응형 CSS (800px 기준 상하 전환 완벽 고정 버전)
   ========================================================================== */

/* 메인 최외각 컨테이너 */
.talentDiv1 {
    width: 100%;
    background: url("/pc/common/images/obk/rec_0101_img1.jpg") no-repeat center 0;
    padding-bottom: 120px;
    box-sizing: border-box;
}

/* 상단 메인 타이틀 */
.talentDiv1 .mTit {
    font-size: 24px;
    color: #666;
    font-family: 'NotoSans-Bold', sans-serif;
    line-height: 1.4;
    padding: 180px 0 80px 0;
    text-align: center;
}
.talentDiv1 .mTit .blueTxt {
    color: #006eb7;
}

/* ==========================================================================
   [PC ~ 801px 구간] 가상 요소를 활용한 좌우 분할 및 정비례 축소 구조
   ========================================================================== */
.talentRow {
    width: 100%;
    height: 490px;
    margin-top: 100px;
    box-sizing: border-box;
    position: relative; /* 가상 요소 위치 제어의 기준점 */
    overflow: hidden;   /* 유연한 축소 시 이미지가 화면 밖으로 튀어나가지 않게 차단 */
}
.talentRow:first-of-type {/* margin-top: 30px; */}

/* 그라데이션 이미지를 가상 요소로 격리하여 퍼센트(%) 비율로 유연하게 제어 */
.talentRow::before {
    content: "";
    position: absolute;
    top: 0;
    width: 52%;          /* 텍스트 박스(max-width: 450px)와 부딪히지 않는 안전 폭 */
    height: 100%;
    background-repeat: no-repeat;
    background-size: contain; /* 브라우저가 줄어들면 이미지도 실시간으로 즉시 축소 */
    z-index: 1;
}

/* Type 1, 3 (PASSION, TRUST): 좌측 끝에서 출발 */
.talentRow.type1::before,
.talentRow.type3::before {
    left: 0;
    background-position: left center;
}
.talentRow.type1::before {
    background-image: url("/pc/common/images/otn/talentList_grd1.png");
}
.talentRow.type3::before {
    background-image: url("/pc/common/images/otn/talentList_grd3.png");
}

/* Type 2 (INNOVATION): 우측 끝에서 출발 */
.talentRow.type2::before {
    right: 0;
    background-position: right center;
    background-image: url("/pc/common/images/otn/talentList_grd2.png");
}

/* --------------------------------------------------------------------------
   내부 콘텐츠 1200px 중앙 정렬 영역 (이미지 위에 배치)
   -------------------------------------------------------------------------- */
.inner-1200 {
    width: 100%;
    max-width: 1200px;
    height: 100%;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 2; /* 가상 요소 이미지보다 위 레이어에 배치 */
}

/* 텍스트 박스를 이미지 반대편으로 밀착 시켜 겹침 원천 방지 */
.talentRow.type1 .inner-1200,
.talentRow.type3 .inner-1200 {
    justify-content: flex-end; 
}
.talentRow.type2 .inner-1200 {
    justify-content: flex-start;
}

/* 텍스트 스타일 */
.talentDiv1 .talentList {
    width: 100%;
    max-width: 450px; 
    box-sizing: border-box;
}
.talentRow.type2 .talentList {
    text-align: right; 
}

.talentDiv1 .talentList .mTxt {
    font-size: 50px;
    color: #333;
    line-height: 1.3;
    font-family: 'NotoSans-Thin', sans-serif;
    margin-bottom: 15px;
}
.talentDiv1 .talentList .subTxt {
    font-size: 16px;
    color: #666;
    line-height: 1.6;
}

/* ==========================================================================
   [★핵심 변환] 800px 이하 반응형 미디어 쿼리 (상하 구조 전환 포인트)
   ========================================================================== */
@media screen and (max-width: 1024px) {
    .talentRow {
        margin-top: 0px;
    }
    .talentDiv1 .mTit {
        font-size: 20px;
        padding: 50px 20px 40px 20px;
    }
    
    .pc-only {
        display: none; /* 태블릿/모바일 가독성을 위해 고정 줄바꿈 제거 */
    }
    
    /* 800px 이하가 되면 높이 제한을 풀고 텍스트 패딩 확보 */
    .talentRow {
        height: auto;
        margin-top: 0px;
        padding: 0px 0px 0 0px;
    }

    /* [★핵심] 절대 위치(absolute)였던 이미지를 일반 블록으로 바꾸어 글자 밑으로 완벽히 격리 */
    .talentRow::before {
        position: relative;
        display: block;
        width: 100% !important;
        height: 240px;            /* 화면 크기에 부합하는 이미지 영역 높이 */
        margin-top: 30px;
        background-position: center center !important;
        background-size: contain !important;
        left: auto !important;
        right: auto !important;
    }
    
    /* 콘텐츠 박스를 화면 정중앙으로 통일 */
    .inner-1200 {
        justify-content: center !important; 
        height: auto;
        padding: 0;
    }
    
    .talentDiv1 .talentList {
        max-width: 100%;
        text-align: center !important;
        padding: 20px;
    }
    
    .talentDiv1 .talentList .mTxt {
        font-size: 34px;
        margin-bottom: 12px;
    }
    
    .talentDiv1 .talentList .subTxt {
        font-size: 14px;
        color: #666;
        line-height: 1.6;
        word-break: keep-all; /* 단어 흐름 유지 줄바꿈 */
        text-align: left;
    }
}

@media screen and (max-width: 640px) {
    .talentDiv1  {background: none;}
    .talentRow::before {
        /* height: 180px; */ /* 작은 모바일 화면에 맞춰 이미지 높이 소폭 축소 */
    }
    .talentDiv1 .talentList .mTxt {
        font-size: 28px;
        margin-top: 30px;
        text-align: left;
    }
}
.personalDiv .mTit{font-size:24px; color:#222; font-family:'NotoSans-Light'; line-height:1.3; padding:120px 0;}
.personalList{width:100%; box-sizing:border-box; padding:70px 0;overflow:hidden;border-bottom:3px solid #e8e8e8;}
.personalList li{box-sizing:border-box; float:left; text-align:center;}
.personalList li .txt{display:block;padding-top:20px; font-family:'NotoSans-Light';}

.personalTxt{margin:70px 0;}
.personalTxt.type2{margin-bottom:100px;} 
.personalTxt .tit{font-size:22px; font-family:'NotoSans-Bold'; color:#333; padding-bottom:18px; background:url("/pc/common/images/otn/rec_0201_bar.gif") no-repeat 0 100%;}
.personalTxt .txt{margin-top:16px; font-family:'NotoSans-Light'; line-height:1.5}
.personalSub{width:100%; height:330px; box-sizing:border-box; }
.personalSub .subTxt{font-size:50px; font-family:'NotoSans-Medium'; color:#fff;padding:120px 0 0 50px;}
.personalSub.type1{background:url("/pc/common/images/otn/rec_0201_img1.png") no-repeat 0 0; background-size:100%; }
.personalSub.type2{background:url("/pc/common/images/otn/rec_0201_img2.png") no-repeat 0 0; background-size:100%; }
.personalSub.type3{background:url("/pc/common/images/otn/rec_0201_img3.png") no-repeat 0 0; background-size:100%; }
.personalSub.type4{background:url("/pc/common/images/otn/rec_0201_img4.png") no-repeat 0 0; background-size:100%; }

@media screen and (max-width: 1024px) {
    .personalDiv { padding: 0 20px;}
    .personalDiv .mTit {
        font-size: 20px;
    }
}
@media screen and (max-width: 640px) {
    .personalDiv .mTit {
        padding: 50px 0;
    }

    .personalSub {
        height: 150px;
    }
    .personalSub .subTxt {
        font-size: 30px;
        padding: 50px 0 0 50px;
    }
}

/* 기본 레이아웃 (PC verson - 최대 1920px 기준 배포) */
.benefitDiv {
    width: 100%;
    margin: 100px auto;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 1920px auto;
    max-width: 1600px;
}
.benefitDiv:last-child { margin-bottom: 0; }

.benefitDiv.type1 { background-image: url("/pc/common/images/otn/rec_0202_img1.jpg"); }
.benefitDiv.type2 { background-image: url("/pc/common/images/otn/rec_0202_img2.jpg"); }
.benefitDiv.type3 { background-image: url("/pc/common/images/otn/rec_0202_img3.jpg"); }
.benefitDiv.type4 { background-image: url("/pc/common/images/otn/rec_0202_img4.jpg"); }

/* 내부 콘텐츠 영역 (흰색 박스 포함 최대 1200px grid) */
.benefitDiv .inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px; /* 화면이 줄어들 때 좌우 최소 여백 확보 */
    box-sizing: border-box;
}

/* 대타이틀 스타일 */
.benefitDiv .mTit {
    font-size: 56px;
    font-family: 'NotoSans-Thin', sans-serif;
    color: #333;
    padding: 115px 0;
}
.benefitDiv.type1 .mTit, 
.benefitDiv.type4 .mTit { 
    color: #fff; 
}

/* 본문 흰색 불투명 박스 */
.benefitDiv .txtBox {
    background: rgba(255, 255, 255, 0.9);
    padding: 70px;
    box-sizing: border-box;
}
.benefitDiv .txtBox .tit {
    font-size: 30px;
    color: #222;
}
.benefitDiv .txtBox .txt {
    font-size: 15px;
    color: #666;
    font-family: 'NotoSans-Light', sans-serif;
    line-height: 1.6;
    text-align: justify;
}

/* -------------------------------------------------------------
   반응형 미디어 쿼리 (Tablet & Mobile)
------------------------------------------------------------- */

/* 태블릿 및 작은 모니터 환경 (1200px 이하) */
@media screen and (max-width: 1200px) {
    .benefitDiv {
        background-size: cover; 
        margin: 50px auto;
    }
    .benefitDiv .mTit {
        font-size: 44px;
        padding: 80px 0 50px 0;
    }
    .benefitDiv .txtBox {
        padding: 50px;
    }
}

/* 모바일 환경 (768px 이하) */
@media screen and (max-width: 768px) {
    .benefitDiv {
        margin-bottom: 50px;
    }
    .benefitDiv .mTit {
        font-size: 32px;
        padding: 40px 0 20px 0;
        text-align: center;
        /* 모바일에서 배경 이미지와 겹쳐 글씨가 안보이는 것을 방지하기 위해 컬러 통일 */
        color: #222 !important; 
    }
    .benefitDiv .txtBox {
        padding: 30px 20px;
        background: rgba(255, 255, 255, 0.95); /* 가독성을 위해 흰색 배경 투명도 상향 */
    }
    .benefitDiv .txtBox .tit {
        font-size: 20px;
    }
    .benefitDiv .txtBox .txt {
        font-size: 14px;
        line-height: 1.5;
    }
    
    /* 모바일 여백 최적화 */
    .mt30, .mt35 { margin-top: 15px; }
    .mt50 { margin-top: 35px; }
}

.jobList{overflow:hidden;padding:100px 0; height:1000px; background:url("/pc/common/images/otn/rec_0203_bg.gif") repeat-x 0 268px; }
.jobList .tab{width:227px; display:block; float:left; text-align:center; font-family:'NotoSans-Light';}
.jobList .tab:nth-of-type(1){margin-left:95px;}
.jobList .tab.on{color:#006eb7; font-family:'NotoSans-Bold';}
.jobList .tab .tabTxt{display:block; margin-top:15px;}
.jobList .tabCon{position:absolute;top:140px;left:0; width:100%;}
.jobList .tabCon .mTit{font-size:36px; font-family:'NotoSans-Bold'; color:#006eb7; background:url("/pc/common/images/otn/rec_0203_icon8.png") no-repeat center 0; padding-top:85px; text-align:center;}

.jobList .tabCon .txtBox{background:#f7f7f7; padding:70px;}
.jobList .tabCon .txtBox .jobC{margin-bottom:77px; overflow:hidden;}
.jobList .tabCon .txtBox .jobC .tit{background:url("/pc/common/images/otn/rec_0203_bar.gif") no-repeat 0 0; width:225px; font-size:24px; font-family:'NotoSans-Bold'; line-height:1.5; color:#333; padding:22px 50px 0 0;box-sizing:border-box; float:left;}
.jobList .tabCon .txtBox .jobC .txt{width:735px;font-size:16px; font-family:'NotoSans-Light'; line-height:1.5; color:#666; padding-top:22px; float:left;}

.stoty_cardType{width:100%;}
.stoty_cardType a{display:block; float:left; width:350px; height:470px; margin:0 25px 25px 0;position:relative; color:#fff;}
.stoty_cardType a:nth-of-type(3n){margin-right:0}
.stoty_cardType a .txtType{position:absolute;top:0;left:0; width:100%; height:100%; padding:30px; box-sizing:border-box; }
.stoty_cardType a .txtType.type1{background:#f7f7f7 url("/pc/common/images/otn/rec_0302_bg1.png") no-repeat 0 0;}
.stoty_cardType a .txtType.type2{background:#f7f7f7 url("/pc/common/images/otn/rec_0302_bg2.png") no-repeat 0 0;}
.stoty_cardType a .txtType.type3{background:#f7f7f7 url("/pc/common/images/otn/rec_0302_bg3.png") no-repeat 0 0;}
.stoty_cardType a .txtType.type4{background:#f7f7f7 url("/pc/common/images/otn/rec_0302_bg4.png") no-repeat 0 0;}
.stoty_cardType a .txtType.type5{background:#f7f7f7 url("/pc/common/images/otn/rec_0302_bg5.png") no-repeat 0 0;}
.stoty_cardType a .txtType.type6{background:#f7f7f7 url("/pc/common/images/otn/rec_0302_bg6.png") no-repeat 0 0;}

.stoty_cardType a .txtType .partTxt{border:1px solid #333; font-size:14px; color:#333; display:inline-block; padding:10px; margin-bottom:50px;}
.stoty_cardType a .txtType .promiseTxt{font-size:26px; color:#333;margin-bottom:25px; line-height:1.5}
.stoty_cardType a .txtType .nameTxt{font-size:16px; color:#666; font-family:'NotoSans-Light';}
.stoty_cardType a .txtType .nameTxt strong{font-family:'NotoSans-Bold';}

.stoty_cardType a .grd_bg3{opacity:0; transition:all 0.3s ease; -webkit-transition:all 0.3s ease; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);}
.stoty_cardType a:hover .grd_bg3{opacity:1; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);}
.stoty_cardType a:hover .txtType{z-index:2; background-color:transparent}
.stoty_cardType a:hover .txtType .partTxt{color:#fff; border-color:#fff;}
.stoty_cardType a:hover .txtType .promiseTxt{color:#fff;}
.stoty_cardType a:hover .txtType .nameTxt{color:#fff;}

.storyDiv1{background:url("/pc/common/images/otn/story_con1_bg.gif") repeat-x 0 0; background-size:auto 100%; padding:120px 0 100px;}
.storyDiv1 .mTit{margin-top:120px; font-size:50PX; font-family:'NotoSans-Light'; color:#333;}
.storyDiv1 .nameTxt{font-size:26px; font-family:'NotoSans-Light';color:#666;}
.storyDiv1 .nameTxt strong{font-family:'NotoSans-Bold';}
.storyDiv1 .storyQ{}
.storyDiv1 .storyQ .qTit{font-size:30px; color:#333; line-height:43px; background:url("/pc/common/images/otn/rec_icon_q.png") no-repeat 0 center; padding-left:55px;}
.storyDiv1 .storyQ .qTxt{font-size:16px; color:#666; line-height:1.5; font-family:'NotoSans-Light';}
.storyView .viewPaging{position:relative; margin:50px 0 0 0; height:60px; text-align:center;}
.storyView .viewPaging .prev{position:absolute; top:18px; left:0; width:91px; height:26px; font-size:18px; font-family:'NotoSans-Light'; text-align:right; background:url("/pc/common/images/otn/icon_viewPagePrev.png") no-repeat 0 bottom;}
.storyView .viewPaging .next{position:absolute; top:18px; right:0; width:91px; height:26px; font-size:18px; font-family:'NotoSans-Light'; text-align:left; background:url("/pc/common/images/otn/icon_viewPageNext.png") no-repeat 0 bottom;}
.storyView .viewPaging a.off{opacity:0.2;}


.stotyRolling-container {height:525px; margin:0 auto;height: 100%; position:relative; overflow:hidden;margin:0 auto;box-sizing:border-box;}
.stotyRolling-container .swiper-slide {position:relative; width:350px !important; height:470px; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center;}
.stotyRolling-container .swiper-slide.dimd:after {content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(255,255,255,0.5);}
.stotyRolling-container .swiper-pagination{bottom:0 !important;}
.stotyRolling-container .swiper-pagination-bullet{width:50px; height:5px; background:#ddd; border-radius:0;opacity:1;}
.stotyRolling-container .swiper-pagination-bullet.swiper-pagination-bullet-active{width:50px; height:5px; background:#006eb7; border-radius:0;} 

.storyRolling_bg .bg_left{width:350px;height:470px; float:left; background:rgba(255,255,255,0.5);position:absolute;top:0;left:50%; margin-left:585px; z-index:20}
.storyRolling_bg .bg_right{width:350px;height:470px; float:right; background:rgba(255,255,255,0.5);position:absolute;top:0;right:50%; margin-right:585px; z-index:20 }

.stotyRolling_cardType{width:100%;height:525px; position:relative;overflow:hidden;}
.stotyRolling_cardType a{display:block; width:350px; height:470px;}
.stotyRolling_cardType a .txtType{position:absolute;top:0;left:0; width:100%; height:100%; padding:30px; box-sizing:border-box; }
.stotyRolling_cardType a .txtType.type1{background:#f7f7f7 url("/pc/common/images/otn/rec_0302_bg2.png") no-repeat 0 0;}
.stotyRolling_cardType a .txtType.type2{background:#f7f7f7 url("/pc/common/images/otn/rec_0302_bg3.png") no-repeat 0 0;}
.stotyRolling_cardType a .txtType.type3{background:#f7f7f7 url("/pc/common/images/otn/rec_0302_bg4.png") no-repeat 0 0;}
.stotyRolling_cardType a .txtType.type4{background:#f7f7f7 url("/pc/common/images/otn/rec_0302_bg5.png") no-repeat 0 0;}
.stotyRolling_cardType a .txtType.type5{background:#f7f7f7 url("/pc/common/images/otn/rec_0302_bg6.png") no-repeat 0 0;}

.stotyRolling_cardType a .txtType .partTxt{border:1px solid #333; font-size:14px; color:#333; display:inline-block; padding:10px; margin-bottom:50px;}
.stotyRolling_cardType a .txtType .promiseTxt{font-size:26px; color:#333;margin-bottom:25px; line-height:1.5}
.stotyRolling_cardType a .txtType .nameTxt{font-size:16px; color:#666; font-family:'NotoSans-Light';}
.stotyRolling_cardType a .txtType .nameTxt strong{font-family:'NotoSans-Bold';}

.stotyRolling_cardType a .grd_bg3{opacity:0; transition:all 0.3s ease; -webkit-transition:all 0.3s ease; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);}
.stotyRolling_cardType a:not(.dimd):hover .grd_bg3{opacity:1; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);}
.stotyRolling_cardType a:not(.dimd):hover .txtType{z-index:2; background-color:transparent}
.stotyRolling_cardType a:not(.dimd):hover .txtType .partTxt{color:#fff; border-color:#fff;}
.stotyRolling_cardType a:not(.dimd):hover .txtType .promiseTxt{color:#fff;}
.stotyRolling_cardType a:not(.dimd):hover .txtType .nameTxt{color:#fff;}


.storyDiv2{background:url("/pc/common/images/otn/story_con2_bg.gif") repeat-x 0 0; background-size:auto 100%;padding-bottom:100px;}
.storyDiv2 .storyDiv2_1{background:url("/pc/common/images/otn/story_cont2_1.jpg") no-repeat 0 0;padding-top:120px;}
.storyDiv2 .storyDiv2_1 .mTit{margin-top:120px;font-size:50px; font-family:'NotoSans-Light'; color:#333;}
.storyDiv2 .storyDiv2_1 .nameTxt{font-size:26px; font-family:'NotoSans-Light'; color:#666;}
.storyDiv2 .storyDiv2_1 .nameTxt strong{font-family:'NotoSans-Bold';}
.storyDiv2 .storyDiv2_1 .storyQ{background:#fff; padding:70px;}
.storyDiv2 .storyDiv2_1 .storyQ .qTit{font-size:30px; color:#333; line-height:43px; background:url("/pc/common/images/otn/rec_icon_q.png") no-repeat 0 center; padding-left:55px;}
.storyDiv2 .storyDiv2_1 .storyQ .qTxt{font-size:16px; color:#666; line-height:1.5; font-family:'NotoSans-Light';}

.storyDiv3{padding-top:120px;}
.storyDiv3 .mTit{padding-top:120px;font-size:50px; font-family:'NotoSans-Light'; color:#333;background:url("/pc/common/images/otn/story_bar1.gif") no-repeat center 0;}
.storyDiv3 .nameTxt{font-size:26px; font-family:'NotoSans-Light'; color:#666;}
.storyDiv3 .nameTxt strong{font-family:'NotoSans-Bold';}
.storyDiv3 .storyQ{overflow:hidden;}
.storyDiv3 .storyQ .txtW,.storyDiv3 .storyQ .storyImg{float:left;width:550px; box-sizing:border-box;}
.storyDiv3 .storyQ .txtW.typeL{padding-right:70px;}
.storyDiv3 .storyQ .txtW.typeR{padding-left:70px;}
.storyDiv3 .storyQ .qTit{font-size:30px; color:#333; line-height:43px; background:url("/pc/common/images/otn/rec_icon_q.png") no-repeat 0 0; padding-left:55px;}
.storyDiv3 .storyQ .qTxt{font-size:16px; color:#666; line-height:1.5; font-family:'NotoSans-Light';}


.storyDiv4{padding-top:120px;}
.storyDiv4 .mTit{padding-top:120px;font-size:50px; font-family:'NotoSans-Light'; color:#333;background:url("/pc/common/images/otn/story_bar1.gif") no-repeat center 0;}
.storyDiv4 .nameTxt{font-size:26px; font-family:'NotoSans-Light'; color:#666;}
.storyDiv4 .nameTxt strong{font-family:'NotoSans-Bold';}
.storyDiv4 .storyQ{overflow:hidden;padding-top:120px;border-top:3px solid #5d5d5d}
.storyDiv4 .storyQ .qTit{font-size:30px; color:#333; line-height:43px; background:url("/pc/common/images/otn/rec_icon_q.png") no-repeat 0 0; padding-left:55px;}
.storyDiv4 .storyQ .qTxt{font-size:16px; color:#666; line-height:1.5; font-family:'NotoSans-Light'; padding:0 55px;}
.storyDiv4 .txtW{float:left;width:550px; box-sizing:border-box;}
.storyDiv4 .storyImg{margin-top:120px;}

.storyDiv5{padding:120px 0 70px; background:url("/pc/common/images/otn/story5_bg.jpg") no-repeat center 0; background-size:cover}
.storyDiv5 .mTit{padding-top:120px;font-size:50px; font-family:'NotoSans-Light'; color:#fff;background:url("/pc/common/images/otn/story_bar3.gif") no-repeat center 0;}
.storyDiv5 .nameTxt{font-size:26px; font-family:'NotoSans-Light'; color:#fff;}
.storyDiv5 .nameTxt strong{font-family:'NotoSans-Bold';}
.storyDiv5_1 .inner{padding-bottom:100px; border-bottom:1px solid #e8e8e8}
.storyDiv5_1 .storyQ .qTit{font-size:30px; color:#333; line-height:43px; background:url("/pc/common/images/otn/rec_icon_q.png") no-repeat 0 0; padding-left:55px;}
.storyDiv5_1 .storyQ .qTxt{font-size:16px; color:#666; line-height:1.5; font-family:'NotoSans-Light';}
.storyDiv5_1 .storyQ.type2{overflow:hidden;}
.storyDiv5_1 .storyQ.type2 .storyImg,.storyDiv5_1 .storyQ.type2 .txtW{width:550px; float:left; box-sizing:border-box;}
.storyDiv5_1 .storyQ.type2 .txtW{padding-right:55px;}
.storyDiv5_1 .storyQ.type2 .qTit{font-size:30px; color:#333; line-height:43px; background:url("/pc/common/images/otn/rec_icon_q.png") no-repeat 0 0; padding-left:55px;}
.storyDiv5_1 .storyQ.type2 .qTxt{font-size:16px; color:#666; line-height:1.5; font-family:'NotoSans-Light';}

.faqCon{}
.faqCon .faqAco{margin-top:20px;}
.faqCon .faqAco .faq_open{display:table; width:100%; box-sizing:border-box; padding:30px 95px 30px 60px; font-size:18px; color:#333; border:1px solid #e8e8e8; background: #f6f6f6 url("/pc/common/images/otn/faq_more_icon.png") no-repeat 1030px center;}
.faqCon .faqAco .faq_open .txt{display:table-cell; vertical-align:middle; padding:8px 0 8px 60px; line-height:1.5; background:url("/pc/common/images/otn/faq_icon.png") no-repeat 0 center; font-family:'NotoSans-Light';}
.faqCon .faqAco .faq_info{padding:60px; border:1px solid #e8e8e8; border-top:0; background:#fdfdfd;}
.faqCon .faqAco .faq_info .txt{background:#fdfdfd; line-height:1.5; font-family:'NotoSans-Light'; color:#666; font-size:16px;}
.faqCon .faqAco .faq_open.on{background:url("/pc/common/images/otn/network_jisa_upArrow.gif") no-repeat 1030px 42px #f6f6f6;}
.faqCon .faqAco .faq_open.on .txt{font-family:'NotoSans-Bold'; }


.career_cont{}
.career_cont .tableType1 td{padding:22px 0;}
.career_cont .tableType1 td:first-child{padding-left:30px;}
.career_cont .tableType1 td:first-child{padding-left:30px;}
.career_cont .tableType1 td .red{color:#ed4214; font-family:'NotoSans-Bold';}
.career_cont .tableType1 td .gray{color:#999; font-family:'NotoSans-Bold';}

.rewardDiv{margin-bottom:100px;}
.rewardDiv .tit{font-size:30px; font-family:'NotoSans-Medium'; color:#333; margin-bottom:20px;}
.rewardDiv .txt{font-size:16px; font-family:'NotoSans-Light'; color:#666; line-height:1.5; word-break:keep-all;}
.rewardDiv .imgBox{border:1px solid #e8e8e8; padding:50px;margin-top:35px;}
.rewardDiv .imgBox .tit{font-size:22px; font-family:'NotoSans-Bold'; color:#333; margin-bottom:0;}
.rewardDiv .imgBox .tit:after{content:""; display:block; width:40px; height:4px; background:#333; margin:15px 0 30px;}
.rewardDiv .imgBox .txt{font-size:16px; font-family:'NotoSans-Light'; color:#666; }
.rewardDiv .imgBox.type2:after{content:""; display:block; clear:both;}
.rewardDiv .imgBox.type2 .img{width:499px; height:130px; float:left; padding-left:155px; box-sizing:border-box;}
.rewardDiv .imgBox.type2 .img:nth-of-type(1){background:url("/pc/common/images/sbo/reward_img1.png") no-repeat 0 0;}
.rewardDiv .imgBox.type2 .img:nth-of-type(2){background:url("/pc/common/images/sbo/reward_img2.png") no-repeat 0 0;}
.rewardDiv .imgBox .tableDiv{display:table; width:100%;height:110px;border-radius:55px;overflow:hidden;}
.rewardDiv .imgBox .tableDiv p{display:table-cell; width:166px; color:#fff;font-size:18px; font-family:'NotoSans-Bold'; vertical-align:middle; text-align:center;}
.rewardDiv .imgBox .tableDiv p .yearT{font-size:15px; font-family:'NotoSans-Light'; display:block;margin-top:10px;}
.rewardDiv .imgBox .tableDiv p:nth-of-type(1){background:#8ebfe0}
.rewardDiv .imgBox .tableDiv p:nth-of-type(2){background:#7fb6db}
.rewardDiv .imgBox .tableDiv p:nth-of-type(3){background:#5fa3d1}
.rewardDiv .imgBox .tableDiv p:nth-of-type(4){background:#338bc5}
.rewardDiv .imgBox .tableDiv p:nth-of-type(5){background:#197cbe}
.rewardDiv .imgBox .tableDiv p:nth-of-type(6){background:#006eb7}

.rewardDiv .imgBox .tableDiv.type2 p:nth-of-type(1){background:#9fc886}
.rewardDiv .imgBox .tableDiv.type2 p:nth-of-type(2){background:#95c379}
.rewardDiv .imgBox .tableDiv.type2 p:nth-of-type(3){background:#87bb68}
.rewardDiv .imgBox .tableDiv.type2 p:nth-of-type(4){background:#7ab458}
.rewardDiv .imgBox .tableDiv.type2 p:nth-of-type(5){background:#61ab36}
.rewardDiv .imgBox .tableDiv.type2 p:nth-of-type(6){background:#55a227} 

/* 기본 레이아웃 및 여백 정의 */
.recruitDiv {
    border-bottom: 8px solid #eee; 
    padding: 70px 0;
}
.recruitDiv:last-child {
    border-bottom: none;
}
.recruitDiv .tit {
    font-size: 30px; 
    font-family: 'NotoSans-Medium', sans-serif; 
    color: #333;
    margin-bottom: 40px;
}

/* Flexbox 정렬: 무조건 왼쪽 정렬로 위아래 칸을 일치시킴 */
.recruitDiv .recruitList {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; 
    padding: 0;
    margin: 0;
    list-style: none;
}

/* [PC 버전] 전체 1200px 안에서 '무조건 7개 기준'으로 칼같이 맞추는 수식
  - 원형 크기를 150px 고정으로 잡고, 남는 여백을 7개 기준 간격으로 자동 계산합니다.
*/
.recruitDiv .recruitList li {
    display: flex;
    justify-content: center;
    width: 150px;
    /* 100% 폭에서 원 7개 분량(150px * 7 = 1050px)을 뺀 나머지를 간격 6개로 균등 분할 */
    margin-right: calc((100% - 1050px) / 6); 
}

/* 7번째 자리(7의 배수)에 오는 아이템은 우측 마진을 제외 */
.recruitDiv .recruitList li:nth-child(7n) {
    margin-right: 0;
}

/* 동그라미 기본 스타일 (글자 정중앙 정렬) */
.recruitDiv .recruitList li .round {
    width: 150px; 
    height: 150px; 
    background: #f2f2f2; 
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box; 
    font-size: 18px; 
    font-family: 'NotoSans-Regular', sans-serif; 
    color: #333;
    text-align: center;
}

.recruitDiv .recruitList li .round .stepT {
    display: block; 
    font-size: 14px; 
    font-family: 'NotoSans-Light', sans-serif; 
    color: #777; 
    margin-bottom: 8px;
}

/* 최종 합격 공통 (글자색 반전) */
.recruitDiv .recruitList li .round.blueGrd,
.recruitDiv .recruitList li .round.yellowGrd,
.recruitDiv .recruitList li .round.grayGrd {
    color: #fff;
}
.recruitDiv .recruitList li .round.blueGrd .stepT,
.recruitDiv .recruitList li .round.yellowGrd .stepT,
.recruitDiv .recruitList li .round.grayGrd .stepT {
    color: #fff;
}

/* 배경 그라데이션 - CSS 구현 */
.recruitDiv .recruitList li .round.blueGrd {
    background: linear-gradient(135deg, #53b479, #375bac);
}
.recruitDiv .recruitList li .round.yellowGrd {
    background: linear-gradient(135deg, #e9c148, #f38b64);
}


/* -------------------------------------------------------------
   반응형 미디어 쿼리 (Tablet & Mobile)
------------------------------------------------------------- */

/* 태블릿 구간 (화면 폭 1200px 이하) */
@media screen and (max-width: 1200px) {
    .recruitDiv { padding: 50px 0; }
    .recruitDiv .tit { font-size: 26px; }
    
    /* 화면 폭이 좁아지면 가로 7개 고정을 해제하고, 깔끔하게 중앙 정렬 리사이징 모드로 전환 */
    .recruitDiv .recruitList {
        justify-content: center;
        gap: 15px;
    }
    .recruitDiv .recruitList li {
        width: auto;
        margin-right: 0 !important;
    }
    .recruitDiv .recruitList li .round {
        width: 120px;
        height: 120px;
        font-size: 15px;
    }
    .recruitDiv .recruitList li .round .stepT {
        font-size: 12px;
        margin-bottom: 4px;
    }
}

/* 모바일 구간 (화면 폭 768px 이하) */
@media screen and (max-width: 768px) {
    .recruitDiv { padding: 40px 0; }
    .recruitDiv .tit { font-size: 22px; text-align: center; }
    
    .recruitDiv .recruitList {
        gap: 15px 10px;
    }
    .recruitDiv .recruitList li {
        width: calc(33.333% - 10px); /* 화면 폭 기준 한 줄에 고르게 3개씩 분할 */
    }
    .recruitDiv .recruitList li .round {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1; 
        font-size: 14px;
    }
    .recruitDiv .recruitList li .round .stepT {
        font-size: 11px;
        margin-bottom: 2px;
    }
}

/* 초소형 모바일 구간 (화면 폭 450px 이하) */
@media screen and (max-width: 450px) {
    .recruitDiv { padding: 30px 0; }
    .recruitDiv .recruitList li {
        width: calc(50% - 10px); /* 화면이 매우 작아지면 한 줄에 2개씩 분할 */
    }
    .recruitDiv .recruitList li .round {
        font-size: 13px;
    }
}