.career-page {
padding: 100px 0;
background: linear-gradient(to bottom, #0D1731, #000F24);
}
.career-page .career-list {
display: flex;
align-items: center;
flex-wrap: wrap;
margin-top: 100px;
}
.career_message {
margin-bottom: 100px;
font-size: 20px;
text-align: center;
margin-left: auto;
margin-right: auto;
width: fit-content;
}
.career-page .career-list li {
width: 49%;
margin-right: 22px;
margin-bottom: 20px;
border-radius: 30px;
padding: 35px;
border: 1px solid var(--card-border-color);
position: relative;
transition: all 0.3s ease-out;
}
.career-page .career-link li:hover {
transition: all 0.3s ease-out;
}
.career-page .career-list li:nth-child(2n+0) {
margin-right: 0;
}
.career-page .career-list li .no {
width: 60px;
height: 60px;
padding: 15px;
border-radius: 50px;
margin-bottom: 50px;
color: var(--txt-soft-color);
background-color: #353D51;
}
.career-page .career-list li .date {
display: block;
color: var(--txt-soft-color);
}
.career-page .career-list li h4 {
color: var(--txt-soft-color);
margin-top: 10px;
margin-bottom: 50px;
}
.career-page .career-list li:hover .no, 
.career-page .career-list li:hover .date,
.career-page .career-list li:hover h4 {
color: var(--txt-primary-color);
transition: all 0.3s ease-out;
}
.career-page .career-list li .career-link {
display: block;
color: var(--primary-color);
font-size: 16px;
font-weight: 400;
overflow: hidden;
opacity: 0;
transform: translateY(5px);
transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}
.career-page .career-list li:hover .career-link {
opacity: 1;
transform: translateY(0);
}
.career-page .career-list li .career-link img {
width: 20px;
height: 20px;
transform: rotate(-45deg);
filter: brightness(0) saturate(100%) invert(74%) sepia(93%) saturate(526%) hue-rotate(-17deg);
} @media only screen and (min-width:768px) and (max-width:1280px) {
.career-page {
padding: 7.813vw 0;
}
.career-page .career-list {
margin-top: 7.813vw;
}
.career-page .career-list li {
margin-right: 1.016vw;
margin-bottom: 1.563vw;
border-radius: 2.344vw;
padding: 2.734vw;
}
.career-page .career-list li .no {
width: 4.688vw;
height: 4.688vw;
padding: 1.172vw;
border-radius: 3.906vw;
margin-bottom: 3.906vw;
}
.career-page .career-list li h4 {
margin-top: 0.781vw;
margin-bottom: 3.906vw;
}
.career-page .career-list li .career-link {
font-size: 1.25vw;
}
.career-page .career-list li .career-link img {
width: 1.563vw;
height: 1.563vw;
}
} @media all and (max-width:767.9px) {
.career-page {
padding: 26.667vw 0;
}
.career-page .career-list {
flex-direction: column;
margin-top: 13.333vw;
}
.career-page .career-list li {
width: 100%;
margin-right: 0;
margin-bottom: 5.333vw;
border-radius: 8vw;
padding: 9.333vw;
}
.career-page .career-list li .no {
color: var(--txt-primary-color);
width: 13.333vw;
height: 13.333vw;
padding: 4vw;
border-radius: 13.333vw;
margin-bottom: 13.333vw;
}
.career-page .career-list li .date {
color: var(--txt-primary-color);
}
.career-page .career-list li h4 {
color: var(--txt-primary-color);
margin-top: 2.667vw;
margin-bottom: 8vw;
}
.career-page .career-list li .career-link {
font-size: 3.733vw;
opacity: 1;
}
.career-page .career-list li .career-link img {
width: 4.8vw;
height: 4.8vw;
}
}