body {
    background-color: #f4f4f4;
}

/* areaJobIntro */
.areaJobIntro {
    padding: 118px 0 246px;
}
.areaJobIntro .inner {
    max-width: 1017px;
}
.areaJobIntro .areaTitle {
    margin-bottom: 72px;
}
.areaJobIntro .jobIntroWrap {
    width: calc(100% - 60px);
    max-width: 1136px;
    margin: 0 auto;
    padding-top: 50px;
}
.areaJobIntro .jobIntroWrap .introWrapBox {
    width: 100%;
    color: #4d4d4d;
    border: 2px solid #3a9f36;
    background-color: #fff;
    padding: 0 30px 85px;

}
.areaJobIntro .jobIntroWrap:not(:last-child) {
    margin-bottom: 172px;
}
.areaJobIntro .jobIntroWrap .jobIntroName {
    display: inline-block;
    min-width: 476px;
    font-size: 24px;
    font-weight: 500;
    color: #fff;
    background-color: #1b5b0f;
    border-radius: 70px;
    padding: 21px 38px;
    margin: -47px 0 29px -2px;
    transform: translateY(-6px);
    letter-spacing: 3px;
}
.areaJobIntro .jobIntroWrap .jobIntroDes {
    font-size: 20px;
    margin-left: 9px;
    margin-bottom: 48px;
}
.areaJobIntro .jobIntroWrap .jobIntroFor {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-left: 2px;
    margin-bottom: 86px;
}
.areaJobIntro .jobIntroWrap .jobIntroFor .forWho {
    font-size: 24px;
    font-weight: 600;
    color: #3a9f36;
    border: 1px solid #3a9f36;
    padding: 8px 22px;
    margin-right: 58px;
    margin-top: 1px;
}
.areaJobIntro .jobIntroWrap .jobIntroFor .forSub {
    font-size: 20px;
    line-height: 1.75;
}
.areaJobIntro .jobIntroWrap .jobIntroBox {
    margin-bottom: 115px;
    margin-left: 7px;
}
.areaJobIntro .jobIntroWrap .jobIntroBox .boxName {
    font-size: 24px;
    font-weight: 600;
    color: #3a9f36;
    margin-bottom: 50px;
    margin-left: 14px;
}
.areaJobIntro .jobIntroWrap .jobIntroBox.jobInter .boxName {
    margin-bottom: 57px;
}
.areaJobIntro .jobIntroWrap .jobIntroBox .boxList li {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}
.areaJobIntro .jobIntroWrap .jobIntroBox .boxList li:not(:last-child) {
    margin-bottom: 89px;
}
.areaJobIntro .jobIntroWrap .jobIntroBox .boxList li .boxPhoto {
    width: 231px;
    margin-right: 54px;
}
.areaJobIntro .jobIntroWrap .jobIntroBox .boxList li .boxPhoto img {
    width: 100%;
    aspect-ratio: 23/15;
    object-fit: cover;
    object-position: center;
}
.areaJobIntro .jobIntroWrap .jobIntroBox .boxList li .boxDetail {
    width: calc(100% - 285px);
    margin-top: -6px;
}
.areaJobIntro .jobIntroWrap .jobIntroBox .boxList li .boxDetail .detailName {
    font-size: 24px;
    font-weight: 600;
    color: #1b5b0f;
    margin-bottom: 32px;
}
.areaJobIntro .jobIntroWrap .jobIntroBox .boxList li .boxDetail .detailSub {
    font-size: 20px;
    line-height: 1.75;
}
.areaJobIntro .jobIntroWrap .jobIntroBox .boxInterview a {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.areaJobIntro .jobIntroWrap .jobIntroBox .boxInterview .interPhoto {
    width: 230px;
    margin-right: 48px;
    overflow: hidden;
}
.areaJobIntro .jobIntroWrap .jobIntroBox .boxInterview .interPhoto img {
    width: 100%;
    aspect-ratio: 23/19;
    object-fit: cover;
    object-position: center;
    transition: all .3s;
}
.areaJobIntro .jobIntroWrap .jobIntroBox .boxInterview .interDetail {
    position: relative;
    max-width: calc(100% - 350px);
    color: #009c00;
    margin-top: -9px;
    padding-right: 40px;
}
.areaJobIntro .jobIntroWrap .jobIntroBox .boxInterview .interDetail::before {
    content: "";
    position: absolute;
    bottom: -15px;
    right: -76px;
    width: 54px;
    aspect-ratio: 1/1;
    background: url(../images/recruit/icon-arrow-green-02.svg)no-repeat top left/ 100%;
    transition: all .3s;
}
.areaJobIntro .jobIntroWrap .jobIntroBox .boxInterview .interDetail .interPosition {
    font-size: 35px;
    font-weight: 300;
    margin-bottom: 6px;
}
.areaJobIntro .jobIntroWrap .jobIntroBox .boxInterview .interDetail .interBox {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    margin-left: 6px;
}
.areaJobIntro .jobIntroWrap .jobIntroBox .boxInterview .interDetail .interBox .interNote {
    display: inline-block;
    font-size: 53px;
    font-weight: bold;
    line-height: 1;
    margin-right: 21px;
    margin-bottom: -3px;
}
.areaJobIntro .jobIntroWrap .jobIntroBox .boxInterview .interDetail .interBox .interOffice {
    display: inline-block;
    font-size: 18px;
    letter-spacing: 1px;
    margin-right: 14px;
}
.areaJobIntro .jobIntroWrap .jobIntroBox .boxInterview .interDetail .interBox .interTime {
    display: inline-block;
    font-size: 15px;
    transform: translateY(-1px);
    letter-spacing: 1px;
}
.areaJobIntro .jobIntroWrap .jobIntroBtn {
    width: 100%;
    margin-top: -53px;
}
.areaJobIntro .jobIntroWrap .jobIntroBtn a {
    position: relative;
    display: block;
    width: 100%;
    text-align: center;
    font-size: 19px;
    font-weight: 500;
    color: #fff;
    background-color: #ff6600;
    border-radius: 70px;
    padding: 24px 7px 24px 10px;
    letter-spacing: 2px;
}
.areaJobIntro .jobIntroWrap .jobIntroBtn a::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 17px;
    transform: translateY(-50%);
    width: 53px;
    aspect-ratio: 1/1;
    background: url(../images/recruit/icon-arrow-white.svg)no-repeat top left/ 100%;
    transition: all .3s;
}
/* areaJobIntro */

@media(max-width: 950px) and (min-width: 769px) {
    .areaJobIntro .jobIntroWrap .introWrapBox {
        padding: 0 0 60px;
    }
}
@media(min-width: 769px) {
    
    .areaJobIntro .jobIntroWrap .jobIntroBox .boxInterview a:hover .interDetail::before {
        right: -94px;
    } 
    .areaJobIntro .jobIntroWrap .jobIntroBtn a:hover {
        background-color: #1b5b0f;
    }
    .areaJobIntro .jobIntroWrap .jobIntroBtn a:hover:before {
        right: 7px;
    }
    .areaJobIntro .jobIntroWrap .jobIntroBox .boxInterview a:hover .interPosition,
    .areaJobIntro .jobIntroWrap .jobIntroBox .boxInterview a:hover .interDetail .interBox .interNote,
    .areaJobIntro .jobIntroWrap .jobIntroBox .boxInterview a:hover .interDetail .interBox .interOffice,
    .areaJobIntro .jobIntroWrap .jobIntroBox .boxInterview a:hover .interDetail .interBox .interTime {
        color: #ff6600;
    }
    .areaJobIntro .jobIntroWrap .jobIntroBox .boxInterview a:hover .interPhoto img{
        transform: scale(1.05);
    }
}
@media(max-width: 768px) {
    .areaJobIntro {
        padding: 10vw 0;
    }
    .areaJobIntro .areaTitle {
        margin-bottom: 15vw;
    }
    .areaJobIntro .jobIntroWrap {
        width: 88%;
    }
    .areaJobIntro .jobIntroWrap .introWrapBox {
        padding: 0 4vw 10vw;
    }
    .areaJobIntro .jobIntroWrap:not(:last-child) {
        margin-bottom: 20vw;
    }
    .areaJobIntro .jobIntroWrap .inner {
        padding: 0;
    }
    .areaJobIntro .jobIntroWrap .jobIntroName {
        min-width: 100%;
        font-size: clamp(20px, 4.7vw, 30px);
        padding: 15px 20px;
        transform: translateY(-0.6vw);
        margin-bottom: 5vw;
        margin-top: -10vw;
    }
    .areaJobIntro .jobIntroWrap .jobIntroDes {
        font-size: clamp(16px, 3.5vw, 20px);
        margin-bottom: 7vw;
    }
    .areaJobIntro .jobIntroWrap .jobIntroFor {
        margin-bottom: 10vw;
    }
    .areaJobIntro .jobIntroWrap .jobIntroFor .forWho {
        font-size: clamp(20px, 3.9vw, 26px);
        padding: 1vw 4vw;
        margin-right: 2vw;
    }
    .areaJobIntro .jobIntroWrap .jobIntroBox .boxList li .boxPhoto {
        width: 35%;
        margin-right: 5%;
    }
    .areaJobIntro .jobIntroWrap .jobIntroBox .boxList li .boxDetail {
        width: 60%;
    }
    .areaJobIntro .jobIntroWrap .jobIntroFor .forSub {
        font-size: clamp(16px, 3.5vw, 20px);
    }
    .areaJobIntro .jobIntroWrap .jobIntroBox .boxName {
        font-size: clamp(20px, 3.9vw, 26px);
        margin: 0 0 7vw 3vw;
    }
    .areaJobIntro .jobIntroWrap .jobIntroBox.jobInter .boxName {
        margin-bottom: 6vw;
    }
    .areaJobIntro .jobIntroWrap .jobIntroBox {
        margin: 0 0 15vw;
    }
    .areaJobIntro .jobIntroWrap .jobIntroBox .boxList li:not(:last-child) {
        margin-bottom: 10vw;
    }
    .areaJobIntro .jobIntroWrap .jobIntroBox .boxInterview .interPhoto {
        width: 35%;
        margin-right: 5%;
    }
    .areaJobIntro .jobIntroWrap .jobIntroBox .boxInterview .interDetail {
        width: 60%;
        max-width: none;
        padding-right: 7vw;
    }
    .areaJobIntro .jobIntroWrap .jobIntroBox .boxInterview .interDetail::before {
        bottom: -2vw;
        right: -7px;
        width: 7vw;
    }
    .areaJobIntro .jobIntroWrap .jobIntroBox .boxList li .boxDetail .detailName {
        font-size: clamp(20px, 3.9vw, 26px);
        margin: 0 0 4vw;
    }
    .areaJobIntro .jobIntroWrap .jobIntroBox .boxList li .boxDetail .detailSub {
        font-size: clamp(16px, 3.5vw, 20px);
    }

    .areaJobIntro .jobIntroWrap .jobIntroBox .boxInterview .interDetail .interPosition {
        font-size: clamp(22px, 5vw,35px);
    }
    .areaJobIntro .jobIntroWrap .jobIntroBox .boxInterview .interDetail .interBox .interNote {
        font-size: clamp(35px, 6vw,48px);
    }
    .areaJobIntro .jobIntroWrap .jobIntroBox .boxInterview .interDetail .interBox .interOffice {
        font-size: clamp(14px, 3.2vw, 18px);
    }
    .areaJobIntro .jobIntroWrap .jobIntroBox .boxInterview .interDetail .interBox .interTime {
        font-size: clamp(13px, 3vw, 15px);
    }
    .areaJobIntro .jobIntroWrap .jobIntroBtn {
        margin-top: -5vw;
    }
    .areaJobIntro .jobIntroWrap .jobIntroBtn a {
        font-size: clamp(20px, 3.9vw, 26px);
        padding: 3vw 5vw 3vw 1vw
    }
    .areaJobIntro .jobIntroWrap .jobIntroBtn a::before {
        right: 2vw;
        width: 7vw;
    }
    #footer {
        padding-top: 15vw;
    }
}
@media(max-width: 430px) {
    .areaJobIntro {
        padding: 20vw 0;
    }
    
    .areaJobIntro .jobIntroWrap .jobIntroName {
        transform: translateY(-2vw);
        margin-bottom: 5vw;
    }
    .areaJobIntro .jobIntroWrap .jobIntroFor .forWho {
        margin: 0 0 2vw;
    }
    .areaJobIntro .jobIntroWrap .jobIntroBox .boxList li .boxPhoto {
        width: 100%;
        margin: 0 0 4vw;
    }
    .areaJobIntro .jobIntroWrap .jobIntroBox .boxList li .boxDetail {
        width: 100%;
        margin: 0;
    }
    .areaJobIntro .jobIntroWrap .jobIntroBox .boxInterview .interPhoto {
        width: 100%;
        margin: 0 0 4vw;
    }
    .areaJobIntro .jobIntroWrap .jobIntroBox .boxInterview .interDetail {
        width: 100%;
        max-width: none;
        padding-right: 10vw;
        margin: 0;
    }
    .areaJobIntro .jobIntroWrap .jobIntroBox .boxInterview .interDetail::before {        
        width: 10vw;
        bottom: -2vw;
        right: 0;
    }
    .areaJobIntro .jobIntroWrap .jobIntroBtn a {
        font-size: clamp(16px, 4.8vw, 26px);
        padding: 4vw 5vw 4vw 1vw;
    }
    .areaJobIntro .jobIntroWrap .jobIntroBtn a::before {
        right: 2vw;
        width: 10vw;
    }
}