@import url('sub.css'); 

.header{position: absolute;}

.menu_wrap{position: sticky !important; top:0; z-index: 999999; transition:all .4s ease; background:var(--white); width: 100%;}
.menu_wrap::before{content:''; display: block; width: 100%; height: 1px; background:var(--border); position: absolute; left:0; bottom: 0;}
.menu_wrap .in_Layer {overflow: hidden;}
.menu_wrap .menu{justify-content: center; white-space: nowrap;}
.menu_wrap .menu li{width: auto; padding:0 15px;}
.menu_wrap .menu li a{display: block; font-size:1rem; letter-spacing:var(--letter-spacing-default); line-height: 120%; padding:26px 10px; box-sizing:border-box; position: relative; transition:all .3s linear;}
.menu_wrap .menu li a::after{content:''; display:block; width:0; height: 3px; background:var(--main); position: absolute; left:0; bottom: 0;}
.menu_wrap .menu li a:hover{color:var(--main);}
.menu_wrap .menu li.active a{color:var(--main); font-weight:700;}
.menu_wrap .menu li.active a::after{width: 100%;}



/**** S:: ä¿ëÁ¤º¸ ****/
.recruit_cont{overflow: hidden;}
.recruit_talent{}
.recruit_talent .subtitle{}
.recruit_talent .subtitle .fs22{padding: 15px 0 0;}
.recruit_talent .subtitle .fs20{padding: 5px 0 0; line-height: 150%;}

.talent_list{display: flex; gap:50px 30px; flex-wrap:wrap; justify-content: center;}
.talent_list dl{width: calc((100% - 60px)/3); text-align:center;}
.talent_list dl dt{}
.talent_list dl dt img{width: 100%; height: auto;}
.talent_list dl dd{padding: 30px 0 0;}
.talent_list dl dd .fs24{font-weight: 300; color:var(--black); line-height: 140%; font-family:var(--eng);}
.talent_list dl dd .fs24 b{font-weight:700; letter-spacing: inherit; line-height: inherit;}
.talent_list dl dd .fs20{padding: 5px 0 0; font-weight: 400; color:var(--basic);}
.talent_tit{margin-top: 70px; text-align:center;}
.talent_tit h3{display: inline-block; line-height: 140%; position: relative; padding: 0 115px; box-sizing:border-box; text-wrap: balance;}
.talent_tit h3 span{letter-spacing: inherit; line-height: inherit; text-wrap: balance;}
.talent_tit h3::before{content:''; display: block; width: 60px; height: 60px; background:url('/img/format_quote.png') no-repeat center/contain; position: absolute; left:0; top:0;}
.talent_tit h3::after{content:''; display: block; width: 60px; height: 60px; background:url('/img/format_quote.png') no-repeat center/contain; position: absolute; right:0; top:0; transform:rotate(180deg);}

.recruit_benefits{position: relative;}
.recruit_benefits::before{content:''; display: block; width: 100%; height:100%; background:url('/recruit/img/benefits_bg.jpg') no-repeat center/cover; position: absolute; left:0; top:0; z-index: -1;} 
.benefits_list{margin-bottom: 30px; position: relative; display:grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 190px 190px 190px 190px; gap: 30px;}
.benefits_list::before{content:''; display: block; width: 290px; aspect-ratio:1/1; background:url('/img/logo.svg') no-repeat center/contain; position: absolute; left:50%; top:50%; transform:translate(-50%,-50%);}
.benefits_list dl{display: flex; align-items:center; box-sizing:border-box; background:var(--white); padding:45px;}
.benefits_list dl:nth-child(1){grid-column: 1 / 2; grid-row: 1 / 2;}
.benefits_list dl:nth-child(2){grid-column: 2 / 3; grid-row: 1 / 2;}
.benefits_list dl:nth-child(3){grid-column: 3 / 4; grid-row: 1 / 2;}
.benefits_list dl:nth-child(4){grid-column: 1 / 2; grid-row: 2 / 3;}
.benefits_list dl:nth-child(5){grid-column: 3 / 4; grid-row: 2 / 3;}
.benefits_list dl:nth-child(6){grid-column: 1 / 2; grid-row: 3 / 4;}
.benefits_list dl:nth-child(7){grid-column: 3 / 4; grid-row: 3 / 4;}
.benefits_list dl:nth-child(8){grid-column: 1 / 2; grid-row: 4 / 5;}
.benefits_list dl:nth-child(9){grid-column: 2 / 3; grid-row: 4 / 5;}
.benefits_list dl:nth-child(10){grid-column: 3 / 4; grid-row: 4 / 5;}
.benefits_list dl dt{width: 80px;}
.benefits_list dl dt img{width: 100%; height: auto;}
.benefits_list dl dd{padding: 0 0 0 50px; width: calc(100% - 80px); box-sizing:border-box;}
.benefits_list dl dd .fs24{font-weight:700; color:var(--black); line-height: 140%; font-size:1.111rem;}
.benefits_list dl dd .fs18{padding:5px 0 0; line-height: 160%;}
/**** E:: ä¿ëÁ¤º¸ ****/


/*******************************************************************************
    @media 1740px
*******************************************************************************/
@media all and (max-width:1740px){

/**** S:: ä¿ëÁ¤º¸ ****/
.benefits_list{grid-template-rows: 240px 240px 240px 240px;}
.benefits_list dl{padding:30px;}
.benefits_list dl dd{padding: 0 0 0 30px;}
/**** E:: ä¿ëÁ¤º¸ ****/

}
/*******************************************************************************
    @media 1500px
*******************************************************************************/
@media all and (max-width:1500px){




}
/*******************************************************************************
    @media ~1300px
*******************************************************************************/
@media all and (max-width:1300px){

/**** S:: ä¿ëÁ¤º¸ ****/

.benefits_list{grid-template-rows: 280px 280px 280px 280px; gap: 20px;}
.benefits_list::before{width: 200px;}
.benefits_list dl{padding:20px;}
.benefits_list dl dt{width: 60px;}
.benefits_list dl dd{padding: 0 0 0 20px; width: calc(100% - 60px);}
/**** E:: ä¿ëÁ¤º¸ ****/

}

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


.menu_wrap{}
.menu_wrap .menu{}
.menu_wrap .menu li{padding:0 10px;}
.menu_wrap .menu li a{padding:20px 5px;}


/**** S:: ä¿ëÁ¤º¸ ****/
.recruit_talent{}
.recruit_talent .subtitle{}
.recruit_talent .subtitle .fs22{padding: 10px 0 0;}
.recruit_talent .subtitle .fs20{padding: 2px 0 0;}

.talent_list{gap:40px 20px;}
.talent_list dl{width: calc((100% - 20px)/2);}
.talent_list dl dd{padding: 20px 0 0;}
.talent_list dl dd .fs20{padding: 2px 0 0;}
.talent_tit{margin-top: 50px;}
.talent_tit h3{padding: 0 80px;}
.talent_tit h3::before{width: 50px; height: 50px;}
.talent_tit h3::after{width: 50px; height: 50px;}


.benefits_list{margin-bottom: 20px; gap: 10px; grid-template-rows: 300px 300px 300px 300px;}
.benefits_list::before{width: 150px;}
.benefits_list dl{padding:20px; display: flex; flex-direction: column;  justify-content: center; text-align:center;}
.benefits_list dl dt{width: 50px; margin: 0 auto;}
.benefits_list dl dd{padding: 10px 0 0; width: 100%;}
.benefits_list dl dd .fs24{font-size:1.111rem;}
/**** E:: ä¿ëÁ¤º¸ ****/



}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){



.menu_wrap{padding:0 10px; box-sizing:border-box; overflow: hidden;}
.menu_wrap .menu{display: block; font-size:0; white-space: nowrap; text-align:center;}
.menu_wrap .menu li{padding:0; margin: 0; display: inline-block;}
.menu_wrap .menu li a{padding:15px 10px;}
.menu_wrap .menu li a::after{left: 50%; transform:translateX(-50%);}
.menu_wrap .menu li.active a::after{width: calc(100% - 20px);}

/**** S:: ä¿ëÁ¤º¸ ****/
.talent_list{gap:20px;}
.talent_list dl{width: 100%;}
.talent_list dl dd{padding: 15px 0 0;}
.talent_tit{margin-top: 30px;}
.talent_tit h3{padding: 0 40px;}
.talent_tit h3::before{width: 30px; height: 30px;}
.talent_tit h3::after{width: 30px; height: 30px;}

.benefits_list{margin-bottom: 10px; display: flex; gap:10px; flex-wrap:wrap;}
.benefits_list::before{display: none;}
.benefits_list dl{padding:20px; width: calc((100% - 10px)/2);}
.benefits_list dl dt{width: 40px;}
.benefits_list dl dd .fs18{padding:3px 0 0;}
/**** E:: ä¿ëÁ¤º¸ ****/

}