/* .wrap{overflow-x: hidden;} */

/* .sub > .wrap_padding {padding: 200px 0;} */
.sub .header {top: 0; background-color: transparent;}
.sub .header > div {background-color: transparent;}
.sub .nav_wrap .depth01>li {color: #fff;}
.sub  .header.h_on {background-color: #fff;}
.sub .header.h_on .right_item{filter: invert(0);}
.sub.privacy .nav_wrap .depth01>li {color: #222;}

/* .sub.company .header.h_on .nav_wrap .depth01>li > a,
.sub.company .header.h_on .right_item > a,
.sub.company .header.h_on .nav_wrap .depth01>li > em{color: #fff;} */

/* .sub.recruit .header.h_on .nav_wrap .depth01>li > a,
.sub.recruit .header.h_on .right_item > a,
.sub.recruit .header.h_on .nav_wrap .depth01>li > em{color: #111;} */


/* .body.com_body {  height:100%; margin:0; border:0; padding:0; overflow: hidden;}
.company > .one_container {position:relative; top:0; width:100%;height:100%; transition: 0.5s;}
.company > .one_container > .container {width:100%; height:100vh; position: relative;}

.company .container::before{content: ''; position: absolute; width: 100%; height: 100%; background-color: #111111b5;}
.company .container:nth-child(1)::before{content: ''; position: absolute; width: 100%; height: 100%; background-color: #11111163;}
.company .container:nth-child(1){background: url(../img/sub/company01.png);}
.company .container:nth-child(2){background: url(../img/company/company_img02.png);}
.company .container:nth-child(3){background-color: yellow;}
.company .container:nth-child(4){background-color: red;}

.contain_txt_box {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 999; color: #fff;}
.contain_txt_box > h2{font-size: 65px; text-align: center;}
.contain_txt_box > p {font-size: 1.7em; font-weight: 400; text-align: center;} */

/*  ======== 회사소개 ========*/

.company_sec.company_sec01 > .subtit {width: 100%; display: flex; align-items: center; position: unset;}
.company_sec.company_sec01 > .subtit > h6 {width: 40%; font-weight: bold;}
.company_sec.company_sec01 > .subtit > h6 > b {color: #e30613; font-weight: 800;}
.company_sec.company_sec01 > .subtit > div {width: 60%; display: flex; flex-direction: column; gap: .8em;}
.company_sec.company_sec01 > .subtit > div > p {display: block; width: 100%; margin: 0; line-height: 160%; box-sizing: border-box; font-weight: 400; color: #666;}

.company_sec.value-bg {height: 520px;}
.company_sec .value-bg-wrap .bg {background-image: url(../img/sub/company01.png); filter: brightness(0.7);}
.company_sec03.con2.hr_2 {background-color: transparent; padding: 0;}
.company_sec03.con2.hr_2 .subtit {width: 100%;}
.company_sec03.con2.hr_2 .subtit > h6{font-weight: bold;}
.company_sec03.con2.hr_2 > div {flex-direction: column;}
.company_sec03.con2.hr_2 .company_sec03_content > .company_sec03_con {display: flex; align-items: center; gap: 80px; justify-content: space-between;}
.company_sec03.con2.hr_2 .company_sec03_content > .company_sec03_con + .company_sec03_con {margin-top: 150px;} 
.company_sec03.con2.hr_2 .company_sec03_content > .company_sec03_con > .top {width: 50%; display: block; position: relative; aspect-ratio: 2 / 1; border-radius: 20px; overflow: hidden; transition: all 0.5s;}
.company_sec03.con2.hr_2 .company_sec03_content > .company_sec03_con > .top > img {position: absolute; width: 100%; height: 100%; object-fit: cover; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.company_sec03.con2.hr_2 .company_sec03_content > .company_sec03_con > .bot {width: 40%; display: block; transition: all 0.5s;}
.company_sec03.con2.hr_2 .company_sec03_content > .company_sec03_con > .bot > i {display: block; font-size: 20px; color: #e30613;}
.company_sec03.con2.hr_2 .company_sec03_content > .company_sec03_con > .bot > h6 {display: block; font-size: 40px;}
.company_sec03.con2.hr_2 .company_sec03_content > .company_sec03_con > .bot > p {display: block; font-size: 20px; font-weight: 400; line-height: 150%; margin-top: 20px;}

.company_sec04 {margin-top: 250px;}
.company_sec04 h5 {text-align: center; font-size: 50px;}
.company_sec04 .txt_flow { display: flex; flex: 0 0 auto; white-space: nowrap; overflow: hidden; transition: 0.3s; color: var(--org); font-weight: 600; text-transform: uppercase; user-select: none; }
.company_sec04 .txt_flow p { animation: textLoop 30s linear infinite; padding-left: 0.5em; font-size: 5em; color: #e30613;}
@keyframes textLoop {
    0% {-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}
    100% {-webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0);}
}









/* ======== 채용공고 ======== */

.sub02 .wrap_padding {padding: 180px 0;}









/* ======== 직무 상세 ======== */
.company_list .com_box { width: 100%; display: flex ; align-items: flex-start;}
.company_list .com_box + .com_box {margin-top: 160px;}
.com_tit { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; width: 30%;}
.com_tit.subtit h6 {font-size: 35px;}
.job_box {width: 70%;}
.com_tit.sticky {position: sticky; top: 180px; padding-bottom: 8%;}
.company_list .btn_box {width: 200px; margin: 0 auto;}


.wrap.sub.cont_view .page_tit, .wrap.sub.management_view .page_tit, .wrap.sub.bulk_view .page_tit, .wrap.sub.it_view .page_tit {height: 80vh;}
.wrap.sub.cont_view .page_tit p, .wrap.sub.management_view .page_tit p, .wrap.sub.bulk_view .page_tit p, .wrap.sub.it_view .page_tit p {display: none;}
.wrap.sub.cont_view .page_title, .wrap.sub.management_view .page_title, .wrap.sub.bulk_view .page_title, .wrap.sub.it_view .page_title {padding-top: 0;}
.wrap.sub.cont_view .page_wrap, .wrap.sub.management_view .page_wrap, .wrap.sub.bulk_view .page_wrap, .wrap.sub.it_view .page_wrap {gap: 80px;}


/* 직무소개 */
.job_intro {display: flex; width: 100%; flex-direction: column; gap: 20px;}
.job_intro .img_box {width: 100%; aspect-ratio: 2.5 / 1; border-radius: 16px; overflow: hidden; border: 1px solid #ddd;}
.job_intro .img_box img {width: 100%; height: 100%; display: block; object-fit: cover;}
.job_intro .intro_main {font-size: clamp(18px, 2vw, 30px); line-height: 1.4; font-weight: 600; padding-top: 20px;}
.job_intro .intro_sub {font-size: clamp(16px, 1.4vw, 18px); font-weight: 400; line-height: 1.6;}



/* 채용절차 */
/* .guide.guide1 .con {display: flex;} */
/* .guide.guide1 .con > div.subtit {width: 30%;} */
/* .guide.guide1 .con > div.subcon {width: 70%;} */

.guide .tab_button_wrap {margin-top: 24px; display: flex; gap: 8px;}
.guide .tab_button {cursor: pointer; padding: 1em 1.1em; border: 1px solid #ddd; background-color: #f9f9f9; border-radius: 30px; color: #777;}
.guide .tab_button.on {color: #fff; background-color: #e30613; border: 1px solid transparent;}




/* 주요업무 */
.job_table {width: 100%; display: flex; flex-direction: column; border-top: 2px solid #e30613;;}
.job_table dl {display: flex; width: 100%; align-items: flex-start; padding: 40px 20px; border-bottom: 1px solid #ddd;}
.job_table dt {display: flex; gap: 10px; width: 35%; flex-direction: column; align-items: flex-start;}
.job_table span {font-size: clamp(18px, 1.4vw, 20px); font-weight: 600; line-height: 1;}
.job_table .eng {font-size: 16px; text-transform: capitalize; color: #999;}
.job_table dd {width: 65%; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.6; display: flex; flex-direction: column; align-items: flex-start;}

/* 필요역량 */
.job_skill {display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; width: 100%;}
.job_skill .skill_con {display: flex; align-items: center; gap: 20px; flex-direction: column;}
.skill_con .icon {width: 50%; aspect-ratio: 1; position: relative; border-radius: 100%; background: radial-gradient(#ffeeee, #ffffff);}
.skill_con .icon i {display: block; width: 35%; position: absolute; aspect-ratio: 1; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; min-width: 50px;}
.skill_con .icon i img {width: 100%; height: 100%; display: block; object-fit: contain;}
.skill_con .icon::before {content: ""; display: block; width: 85%; aspect-ratio: 1; border-radius: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: radial-gradient(#fdd8d8, #fff);}
.skill_con .icon::after {content: ""; display: block; width: 60%; aspect-ratio: 1; border-radius: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; box-shadow: 0 0 10px #e30613;}
.skill_con span {font-size: clamp(16px, 1.5vw, 18px); text-align: center; line-height: 1.4;}

/* 직무인터뷰 */
.job_interview {width: 100%; display: flex; flex-direction: column; gap: 30px;}
.job_interview .interview_img {width: 100%; aspect-ratio: 3 / 1; border-radius: 16px; border: 1px solid #ddd; overflow: hidden;}
.job_interview .interview_img img {width: 100%; height: 100%; display: block; object-fit: cover;}
.interview_con {display: flex; flex-direction: column; width: 100%; border-top: 2px solid #e30613;}
.interview_con dl {display: flex; flex-direction: column; width: 100%; gap: 20px; padding: 45px 20px; border-bottom: 1px solid #ddd;}
.interview_con dt {display: flex; align-items: center; gap: 25px; width: 100%;}
.interview_con dt span {position: relative; font-size: 16px; font-weight: bold; text-transform: uppercase; color: #fff;}
.interview_con dt span::after {content: ""; display: block; width: 40px; aspect-ratio: 1; border-radius: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #e30613;; z-index: -1;}
.interview_con dt p {font-size: clamp(18px, 1.6vw, 22px); line-height: 1.4;}
.interview_con dt p em {font-weight: 800;}
.interview_con dd {font-size: clamp(16px, 1.2vw, 18px); line-height: 1.5; padding-left: 45px; font-weight: 400; color: #444;}
.interview_con dd p + p {padding-top: 5px;}
.interview_con dd .part {display: flex; flex-direction: column; width: 100%; align-items: flex-start;}
.interview_con dd .part + .part {padding-top: 35px;}
.interview_con dd .part .name {font-weight: 600; padding-left: 15px; position: relative; line-height: 1; display: block; margin-bottom: 12px; color: #222;}
.interview_con dd .part .name::before {content: ""; display: block; width: 6px; aspect-ratio: 1; border-radius: 2px; background-color: #e30613; position: absolute; top: 1px; left: 0;}
.interview_con dd .part .name::after {content: ""; display: block; width: 6px; aspect-ratio: 1; border-radius: 2px; background-color: #8990b8; position: absolute; bottom: 1px; left: 0;}
.interview_con dd b + b {padding-left: 1%;}

.btn_box {padding-top: 60px;} 
.list_btn{width: 100%; color: #e30613; background: #ffffff; padding: 1em; font-size: 1.1em; border-radius: 3em; border: 1px solid  #e30613; transition: all 0.5s;}
.list_btn:hover {background-color: #e30613; color: #Fff; transition: all 0.5s;}






/* 개인정보처리방침 페이지 (privacy)*/
/* .sec{background-color: #111;} */
.privacy .service_title_box > div > h2{ color: #111; font-size: 45px; text-align: center; padding-top: 180px;}
.privacy .policy_box{width: 100vw; min-height: 450px; padding-bottom: 200px; padding-right: 16px; padding-left: 16px;}
.privacy .policy_box > div {height: 450px; overflow-y: auto; border: 1px solid #ddd; padding: 1.5em; border-radius: .5em;}
.privacy .bd-lg{padding-top: 30px; padding-bottom: 80px;}
.privacy .tit{font-size: 18px; font-weight: 400; color: #111;}
.privacy .box{width: 100%; margin-top: 20px; padding: 5px 5px 5px 5px; border: 1px solid #a7a7a7; background-color: rgba(217, 217, 217, 0.25); color: #fff; font-weight: 300; font-size: 16px;}
.privacy .group{color: #111; font-weight: 300; margin-top: 20px;}
.privacy .tit-sm{font-size: 25px; font-weight: 800; margin-bottom: 20px;}
.privacy .sec06>div{padding: 0;}
.privacy .pr_date_select {padding: 1em; border: 1px solid #ddd; border-radius: .5em;}
.privacy .pr_date_select:focus {outline: none;}







/* ======== edit all sub.css (반응형 수정 전체 sub에서 /index제외) ========= */


/* ********************************************* *
* 1440px
* ********************************************* */
@media screen and (max-width:1440px){

    .company_sec.company_sec01 > .subtit {flex-direction: column;}
    .company_sec.company_sec01 > .subtit > div,
    .company_sec.company_sec01 > .subtit > h6 {width: 100%;}
    .company_sec.company_sec01 > .subtit > div {margin-top: 1.4em;}

    .sub_hd_wrap h3{font-size: 45px;}
    .subtit h6 {font-size: 45px !important;}







}



/* ********************************************* *
* 1200px
* ********************************************* */
@media screen and (max-width:1200px){

            



}



/* ********************************************* *
* 1000px
* ********************************************* */
@media screen and (max-width:1000px){

            
    .subtit h6 {font-size: 45px !important;}

    .hr_wrap > ul {flex-wrap: wrap; justify-content: center !important;}
    .con2.hr_2 > div {flex-direction: column; gap: 60px !important;}
    .subtit {width: 100% !important; margin-bottom: 40px !important; text-align: center;}


}

/* ********************************************* *
* 980px
* ********************************************* */
@media screen and (max-width: 980px){

    .company_sec03.con2.hr_2 .company_sec03_content > .company_sec03_con > .bot > h6 {font-size: 35px;}
    .company_sec03.con2.hr_2 .company_sec03_content > .company_sec03_con > .bot > i {font-size: 17px;}
    .company_sec03.con2.hr_2 .company_sec03_content > .company_sec03_con > .bot > p {font-size: 18px;}    
    .company_sec03.con2.hr_2 .company_sec03_content > .company_sec03_con > .top {aspect-ratio: 1.1 / 1;}
    .company_sec03.con2.hr_2 .company_sec03_content > .company_sec03_con {gap: 40px;}

    .company_sec04 h5 {font-size: 42px;}
    .company_sec04 .txt_flow p {font-size: 3.5em;}
    .company_sec04 {margin-top: 200px;}

    .hr_wrap > ul {flex-direction:  column !important;}
    .hr_wrap > ul > li {width: 100% !important; aspect-ratio: 3 / 1 !important;}

    .hr_wrap > ul > li {gap: 25px !important;}
    .hr_wrap > ul > li > div {gap: 16px !important;}
    .hr_wrap .icon_box {width: 50px !important;}

    .value-con .value-sub-tit p > b {font-size: 30px !important; font-weight: 700 !important;}
    .value-con .value-sub-tit p {font-size: 28px !important;}
    .hr_wrap > ul > li strong {font-size: 25px !important;}
    


}

/* ********************************************* *
* 900px
* ********************************************* */
@media screen and (max-width: 900px){

    .subtit h6 {font-size: 36px !important;}
    .subtit p {font-size: 18px !important;}
    .company_sec.value-bg {height: 425px;}
    .con2.hr_2 > div {gap: unset !important;}

    .company_sec03.con2.hr_2 .company_sec03_content > .company_sec03_con {flex-direction: column;}
    .company_sec03.con2.hr_2 .company_sec03_content > .company_sec03_con:nth-child(2),
    .company_sec03.con2.hr_2 .company_sec03_content > .company_sec03_con:nth-child(4),
    .company_sec03.con2.hr_2 .company_sec03_content > .company_sec03_con:nth-child(6) {flex-direction: column-reverse;}
    .company_sec03.con2.hr_2 .company_sec03_content > .company_sec03_con > .top {width: 100%;}
    .company_sec03.con2.hr_2 .company_sec03_content > .company_sec03_con > .bot {width: 100%;}
    .company_sec03.con2.hr_2 .company_sec03_content > .company_sec03_con > .top {aspect-ratio: 2 / 1;}
    .company_sec03.con2.hr_2 .company_sec03_content > .company_sec03_con > .bot > h6 {font-size: 33px;}

    .sub_hd_wrap h3 {font-size: 40px;}
    .sub_hd_wrap p {font-size: 22px;}
    .sub_header {height: 570px;}
    .con2.hr_2 .hr_wrap.hr_wrap2 > ul > li:first-child {padding-right: 0 !important;}
    .con2.hr_2 .hr_wrap.hr_wrap2 > ul > li {padding: 50px 0 !important;}


}

/* ********************************************* *
* 700px
* ********************************************* */
@media screen and (max-width: 700px){

    .subtit h6 {font-size: 33px !important;}
    .subtit p {font-size: 17px !important;}
    .company_sec.value-bg {height: 325px;}

    .company_sec03.con2.hr_2 .company_sec03_content > .company_sec03_con > .bot > h6 {font-size: 30px;}
    .company_sec03.con2.hr_2 .company_sec03_content > .company_sec03_con > .bot > p {font-size: 17px;}

    .company_sec03.con2.hr_2 .company_sec03_content > .company_sec03_con {gap: 30px;}

    .company_sec04 h5 {font-size: 35px;}
    .company_sec04 .txt_flow p {font-size: 2.8em;}
    .con2.hr_2 > div {gap: 20px !important;} 

    .sub_hd_wrap h3 {font-size: 38px;} 
    .sub_hd_wrap p {font-size: 20px;}



}


/* ********************************************* *
* 680px
* ********************************************* */
@media screen and (max-width: 680px){

    .company_sec04 {margin-top: 160px;}
    .company_sec04 h5 {font-size: 30px;}
    .company_sec04 .txt_flow p {font-size: 2.2em;}
    .company_sec03.con2.hr_2 .company_sec03_content > .company_sec03_con > .bot > h6 {font-size: 28px;}

    .sub_tab_menu>li {height: 48px;}
    .sub_tab_title_box>span {line-height: 48px;}


    .sub02 .wrap_padding { padding: 100px 0;}



}