@charset "UTF-8";

/* visual */
.talent-visual {background-image:url('../images/career/talent-visual.jpg');}
/* .talent-visual:after {background-image:url('../images/career/talent-visual.jpg');} */

.talent-content .slogan {padding: 240px 0;}

/*talent*/
.talent-type{background-color:#121212; /*height:550px;*/width:100%; background-image:url('../images/career/talent-type.jpg'); background-repeat: no-repeat;background-position: center right; background-size: cover;}
.talent-type .type-body {display: flex; justify-content: space-between; }
.talent-type .type-body li { padding:400px 80px 60px;width:33.33%; height:100%; border-right:rgba(255, 255, 255, .25) 1px solid;}
.talent-type li:first-child {border-left:rgba(255, 255, 255, .25) 1px solid;}
.talent-type .type-body .type-title{color:#fff; font-size:28px; font-weight:500;}
.talent-type .type-body p{color:#fff; font-size:22px; font-weight:300;padding-top:20px;}

/*value*/
.talent-value .inner{padding:160px 0;}
.talent-value .value-header{color:#121212; font-size:50px; font-weight: 700;padding-bottom:40px;}
.talent-value .value-text {font-size: 24px; line-height: 1.5; margin-bottom: 80px;}
.talent-value .value-body {position: relative; display: flex; justify-content: space-between;}
.talent-value .value-body li {position: relative; z-index:1; min-width: 220px; border:#acacac 1px solid; padding:40px; background-color: #fff;}
.talent-value .value-body li:after {content: ''; position: absolute; top: calc(50% - 4px); right: -4px; width: 8px; height: 8px; background-color: #acacac; border-radius: 50%;}
.talent-value .value-body li:before {content: ''; position: absolute; top: calc(50% - 4px); left: -4px; width: 8px; height: 8px; background-color: #acacac; border-radius: 50%;}
.talent-value .value-body li:last-child:after,
.talent-value .value-body li:first-child:before{display:none;}
.talent-value .value-body:after {content: ''; width: 100%; position: absolute; top:50%; border-bottom:solid 1px #acacac;z-index: 0;}
.talent-value .value-body li .value-category{color:#121212; font-size:24px; font-weight:600;text-align: center;}
.talent-value .value-body li p {color:#121212; font-size:18px; font-weight:300;text-align: center;padding-top:20px;}

@media screen and (max-width: 1280px) { /* PC + Tablet 환경 */
    .talent-type{background-position: center bottom;}
    .talent-type .type-body li { padding: 200px 0 20px;width:33.33%; height:100%; border: none;}
    .talent-type .type-body .type-title {font-size:24px;}
    .talent-type .type-body p {width: 80%; font-size:18px; padding-top:20px;}

    .talent-value .inner{padding: 100px 40px 40px;}
    .talent-value .value-header{font-size:40px; padding-bottom:20px;}
    .talent-value .value-text {font-size: 20px; margin-bottom: 40px;}
    .talent-value .value-body li {width: 20%; min-width: inherit; padding:20px;}
    .talent-value .value-body li:after {content: ''; position: absolute; top: calc(50% - 3px); right: -3px; width: 6px; height: 6px; background-color: #acacac; border-radius: 50%;}
    .talent-value .value-body li:before {content: ''; position: absolute; top: calc(50% - 3px); left: -3px; width: 6px; height: 6px; background-color: #acacac; border-radius: 50%;}
    .talent-value .value-body li:last-child:after,
    .talent-value .value-body li:first-child:before{display:none;}
    .talent-value .value-body:after {content: ''; width: 100%; position: absolute; top:50%; border-bottom:solid 1px #acacac;z-index: 0;}
    .talent-value .value-body li .value-category{font-size:20px;}
    .talent-value .value-body li p {font-size:14px; padding-top:10px;}
}

@media screen and (max-width: 450px) { /* Mobile 환경 */
    .talent-type .type-body {flex-direction: column; padding: 40px 0;}
    .talent-type .type-body li {display: flex; align-items: center; padding: 20px 0; width:100%; height:inherit;}
    .talent-type .type-body .type-title {display: flex; align-items: center; width: 120px; height: 120px; font-size:22px; text-align: center; line-height: 1.25; border: 1px solid #fff; border-radius: 120px; padding: 0;}
    .talent-type .type-body p {width: 50%; font-size:16px; padding-top:0; padding-left: 20px;}

    .talent-value .value-header{font-size: 36px; padding-bottom: 16px;}
    .talent-value .value-text {font-size: 18px;}
    .talent-value .value-body {flex-direction: column; justify-content: space-between;}
    .talent-value .value-body li {width: 100%; min-width: inherit; padding:20px;}
    .talent-value .value-body li:after {top: inherit; bottom: -2px ; right: calc(50% - 2px); left: inherit; width: 4px; height: 4px;}
    .talent-value .value-body li:before {top: inherit; top: -2px ; right: calc(50% - 2px); left: inherit; width: 4px; height: 4px;}
    .talent-value .value-body li:last-child:after,
    .talent-value .value-body li:first-child:before{display:none;}
    .talent-value .value-body:after {content: ''; width: 100%; position: absolute; top:50%; border-bottom:solid 1px #acacac;z-index: 0;}
    .talent-value .value-body li .value-category{font-size:20px;}
    .talent-value .value-body li p {font-size:14px; padding-top:10px;}
}