@import url('sub.css'); 


.esg_top .esg_bg.benefits_bg {background:url("/resources/career/img/benefits_bg.jpg")no-repeat center / cover;}
.esg_top .esg_bg.career_bg {background:url("/resources/career/img/career_bg.jpg")no-repeat center / cover;}
.esg_top p {color:rgba(255,255,255,0.8);}

.benefits_list {display: grid;  grid-template-columns: repeat(3, 1fr);  gap:30px;}
.benefits_list li {border:1px solid var(--border); box-sizing:border-box; padding:40px; min-height:300px;}
.benefits_list li i {display:flex; flex-wrap:wrap; align-items:center;  height:75px;}
.benefits_list li h4 {color: var(--black); font-size: 1.22rem; font-weight: 600; line-height: 154.545%; letter-spacing: -0.88px; margin:7px 0 14px;}
.benefits_list li .dots, .benefits_list li .stxt {font-size:0.88rem; line-height:1.5; letter-spacing: -0.64px;}
.benefits_list li .dots::before {top:10px;}
.benefits_list li .sm_table {padding-left:100px; box-sizing:Border-box; position:relative;}
.benefits_list li .sm_table h5 {font-size:1rem; color: var(--black); font-weight: 600; line-height:  144.444%; letter-spacing: -0.72px; position:absolute; top:0; left:0;}


.checkBox {margin:0;}


.value_list {}
.value_list dl {display:flex; flex-wrap:wrap; align-items:center;}
.value_list dl+dl {margin:20px 0 0;}
.value_list dl dt {position:relative; display:flex; flex-wrap:wrap; align-content:center; justify-content:Center; width:190px; aspect-ratio: 3 / 3; background:Var(--main); border-radius:100%; text-align:center;}
.value_list dl:nth-of-type(2) dt {background:var(--blue2);}
.value_list dl:nth-of-type(3) dt {background:var(--blue3);}
.value_list dl dt::after {content:''; width:calc(100% - 20px); height:calc(100% - 20px); border:1px dashed rgba(255,255,255,0.3); border-radius:100%; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);}
.value_list dl dt i {display:block; margin:0 0 9px;}
.value_list dl dt .fs22 {width:100%; color: var(--white); font-weight: 600;}
.value_list dl dt .fs22 span {display:block; color: rgba(255,255,255,0.5); font-family: var(--eng); font-size: 0.77rem; font-weight: 700; line-height: 111.429%; letter-spacing: 0.7px; text-transform: uppercase;}
.value_list dl dd {width:calc(100% - 190px); padding-left:40px; box-sizing:border-box;}
.value_list dl dd .fs20 {color: var(--black); font-size: 1.11rem; font-weight: 600; line-height: 160%; letter-spacing: -0.8px; margin:0 0 5px;}
.value_list dl dd .fs20.eng {letter-spacing:0;}
.value_list dl dd .stxt {}



.career_list {display: grid;  grid-template-columns: repeat(3, 1fr);  gap:30px;}
.career_list dl {}
.career_list dl dt {position:relative; }
.career_list dl dt img {width:100%;}
.career_list dl dt .num {position:absolute; top:10px; right:10px; width:40px; height:40px; line-height:40px; text-align:center; font-style:normal; background:var(--main); border-radius:100%; display:block; color:var(--white); font-family: var(--eng); font-size: 0.88rem; font-weight: 600;}
.career_list dl dd {padding:27px 0 0;}
.career_list dl dd .sm_tit {color: var(--main); font-family: var(--eng); font-size: 0.77rem; font-weight: 700; line-height:171.429%; letter-spacing: 0.7px; text-transform: uppercase; display:block;}
.career_list dl dd .fs22 {margin:1px 0 10px;}
.career_list dl dd .stxt {font-size:0.88rem;}
.career_list dl dd .dots {font-size:0.88rem; line-height:1.5; letter-spacing: -0.64px;}
.career_list dl dd .dots::before {top:10px;}
.career_list.color_ver2 {}
.career_list.color_ver2 dl dt .num {background:var(--blue2);}
.career_list.color_ver2 dl dd .sm_tit {color: var(--blue2);}



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


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


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


.benefits_list {display: grid;  grid-template-columns: repeat(2, 1fr);  gap:20px;}
.benefits_list li {padding:30px 30px 40px; min-height:auto;}
.benefits_list li .dots::before {top:8px;}
.benefits_list li .sm_table {padding-left:70px;}

.career_list {display: grid;  grid-template-columns: repeat(3, 1fr);  gap:15px;}
.career_list dl dd .dots::before {top:8px;}

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



.benefits_list {display: grid;  grid-template-columns: repeat(1, 1fr);  gap:15px;}
.benefits_list li {padding:20px 20px 30px; min-height:auto;}
.benefits_list li i {height:auto;}
.benefits_list li i img {max-height:40px; width:auto;}
.benefits_list li h4 {margin:12px 0 8px; font-size:1.15rem;}
.benefits_list li .dots::before {top:7px;}
.benefits_list li .sm_table {padding-left:55px;}


.value_list dl+dl {margin:10px 0 0;}
.value_list dl dt {width:130px;}
.value_list dl dt::after {width: calc(100% - 10px); height: calc(100% - 10px);}
.value_list dl dt i img {max-height:36px;}
.value_list dl dd {width:calc(100% - 130px); padding-left:20px;}

.career_list {grid-template-columns: repeat(1, 1fr); gap:30px;}
.career_list dl dt .num {width:30px; height:30px; line-height:30px;}
.career_list dl dd {padding:15px 0 0}
.career_list dl dd .fs22 {margin:0 0 5px;}
.career_list dl dd .dots::before {top:7px;}



}