@charset "UTF-8";

/* content */
.job-visual {background-image: url('../images/career/job-content.png');}
/* .job-visual:after {background-image: url('../images/career/job-content.png');} */

.job-content {padding-bottom: 100px;}
.job-role .inner {display: flex;}
.job-role .role-header {width:30%; color:#121212; font-size:40px; font-weight: 600;line-height: 1.2;padding-right:80px;}
.job-role .role-content {display: flex; flex-wrap: wrap; align-items: stretch; width: 70%;}
.job-role .role-content > div {width: 50%; padding: 0 10px 20px 10px;}
.job-role .role-content > div:nth-child(odd) {padding-left: 0;}
.job-role .role-content > div:nth-child(even) {padding-right: 0;}
.job-role .role-content .role-box {width: 100%; height: 100%; padding: 40px; border: 1px solid #aeaeae; border-radius: 5px;}
.job-role .role-content .role-box .main-text {font-size: 24px; font-weight: 600;}
.job-role .role-content .role-box p {font-weight: 400; margin-top: 20px;}
.job-role .role-content .role-box .keyword {margin-top: 20px;}
.job-role .role-content .role-box .keyword span {
    display: inline-block; 
    font-size: 13px; font-weight: 300; color: #fff; line-height: 1;  
    padding: 10px 15px; 
    border-radius: 15px; 
    background-color: #121212; 
    text-align: center; 
    margin: 0 2px 4px 0;
}

@media screen and (max-width: 1280px) { /* PC + Tablet 환경 */
    .job-content {padding-bottom: 0;}
    .job-role .inner {flex-direction: column; padding: 0;}
    .job-role .role-header {width: 100%; font-size: 32px; padding-right: inherit;}
    .job-role .role-content {width: 100%; margin-top: 40px;}
}

@media screen and (max-width: 450px) { /* Mobile 환경 */
    .job-role .role-header {font-size: 28px;}
    .job-role .role-content {margin-top: 20px;}
    .job-role .role-content > div {width: 100%;}
    .job-role .role-content > div {width: 100%; padding: 0 0 20px;}
    .job-role .role-content .role-box {padding: 28px;}
    .job-role .role-content .role-box .main-text {font-size: 20px;}
    .job-role .role-content .role-box p {font-size: 16px; margin-top: 12px;}
    .job-role .role-content .role-box .keyword span {font-size: 12px; padding: 8px 12px;}
}