@charset "utf-8";
/* CSS Job Document */
.job-company-temp1{
    position: relative;
}
.job-company-temp1 .inner {
    max-width: 1110px;
    margin: auto;
}
.job-company-temp1 .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #E795B3, #B81C22);
    -webkit-clip-path: polygon(0 0, 0% 100%, 100% 0);
    width: 60%;
    max-height: 520px;
}
/* HERO */
.job-company-temp1 .hero .inner {
    position: relative;
    padding: 40px;
}
.job-company-temp1 .hero {
    display: flex;
    border-radius: 0 0 40px 40px;
    color: #fff;
}
.job-company-temp1 .hero-text {
    position: absolute;
    bottom: 10px;
    left: 0;
}
.job-company-temp1 .hero-catch-small {
    background: #B81C22;
    display: inline-block;
    padding: 15px 20px;
    margin-bottom: 10px;
    font-size: 40px;
    font-weight: bold;
}
.job-company-temp1 .hero-catch-large {
    background: #B81C22;
    padding: 15px 20px;
    font-size: 40px;
}
.job-company-temp1 .hero-catch-large span {
    color: #FEE1A1;
}
.job-company-temp1 .hero-image img {
    border-radius: 20px;
    width: 100%;
}
/* SECTION TITLE */
.job-company-temp1 .section-title {
    text-align: center;
    margin: 50px auto 40px;
    font-size: 28px;
    position: relative;
    width: fit-content;
}
.job-company-temp1 .section-title::before {
    content: "";
    position: absolute;
    top: 12px;
    left: -40px;
    width: 25px;
    height: 2px;
    background: #333;
    transform: rotate(55deg);
    transform-origin: left top;
}
.job-company-temp1 .section-title::after {
    content: "";
    position: absolute;
    top: 12px;
    right: -40px;
    width: 25px;
    height: 2px;
    background: #333;
    transform: rotate(-55deg);
    transform-origin: right top;
}
.job-company-temp1 .section-title span {
    color: #B81C22;
}
/* MERIT */
.job-company-temp1 .merit-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 0 auto;
    max-width: 700px;
}
.job-company-temp1 .merit-item {
    border: 3px solid #B81C22;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    background: #fff;
}
.job-company-temp1 .merit-grid .merit-item:first-of-type:before {
    content: "";
    width: 80px;
    height: 80px;
    background-image: url(/themes/custom/builjob_front/img/job/job-calendar.webp);
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin: 0 auto;
}
.job-company-temp1 .merit-grid .merit-item:nth-of-type(2):before {
    content: "";
    width: 80px;
    height: 80px;
    background-image: url(/themes/custom/builjob_front/img/job/job-benefits.webp);
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin: 0 auto;
}
.job-company-temp1 .merit-grid .merit-item:nth-of-type(3):before {
    content: "";
    width: 80px;
    height: 80px;
    background-image: url(/themes/custom/builjob_front/img/job/job-training.webp);
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin: 0 auto;
}
.job-company-temp1 .merit-grid .merit-item:nth-of-type(4):before {
    content: "";
    width: 80px;
    height: 80px;
    background-image: url(/themes/custom/builjob_front/img/job/job-license.webp);
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin: 0 auto;
}
.job-company-temp1 .merit-grid .merit-item:nth-of-type(5):before {
    content: "";
    width: 80px;
    height: 80px;
    background-image: url(/themes/custom/builjob_front/img/job/job-rent.webp);
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin: 0 auto;
}
.job-company-temp1 .merit-grid .merit-item:nth-of-type(6):before {
    content: "";
    width: 80px;
    height: 80px;
    background-image: url(/themes/custom/builjob_front/img/job/job-bonus.webp);
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin: 0 auto;
}
.job-company-temp1 .merit-item.red {
    background: #B81C22;
    color: #fff;
}
.job-company-temp1 .merit-title,
.merit-text {
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 1px;
}
.job-company-temp1 .merit-note {
    text-align: center;
    margin: 30px auto;
    font-size: 20px;
}
/* MESSAGE */
.job-company-temp1 .message {
    background: linear-gradient(135deg, #E795B3, #B81C22);
    padding: 20px 20px 30px;
    color: #fff;
}
.job-company-temp1 .message-title {
    font-size: 48px;
    opacity: 0.3;
    line-height: 1;
    margin: auto;
    color: transparent;
    -webkit-text-stroke: 1px #fff;
    position: relative;
    top: 5px;
}
.job-company-temp1 .message-box {
    background: #fff;
    color: #333;
    border-radius: 0px 30px;
    padding: 30px 60px;
    margin: 0 auto;
    font-size: 20px;
}
/* FOOTER */
.job-company-temp1 .footer {
    text-align: center;
    padding: 30px;
}
.job-company-temp1 .footer img {
    width: 20%;
}

@media only screen and (max-width : 1199px ) { 

    .job-company-temp1 .hero::before{
         max-height: 420px;
    }

}

@media only screen and (max-width : 992px ) { 
    .job-company-temp1 .hero .inner{
        padding: 20px;
    }
    .job-company-temp1 .hero::before{
         max-height: 250px;
    }
    .job-company-temp1 .hero-catch-small{
        font-size: 18px;
    }
    .job-company-temp1 .hero-catch-large{
        font-size: 20px;
    }
    .job-company-temp1 .merit-item{
        padding:10px;
    }
    .job-company-temp1 .section-title{
        font-size: 18px;
    }
    .job-company-temp1 .merit-grid .merit-item:nth-of-type(1):before,
    .job-company-temp1 .merit-grid .merit-item:nth-of-type(2):before,
    .job-company-temp1 .merit-grid .merit-item:nth-of-type(3):before,
    .job-company-temp1 .merit-grid .merit-item:nth-of-type(4):before,
    .job-company-temp1 .merit-grid .merit-item:nth-of-type(5):before,
    .job-company-temp1 .merit-grid .merit-item:nth-of-type(6):before{
        width:40px;
        height: 40px;
    }
    .job-company-temp1 .merit-title, .merit-text{
        font-size:14px;
    }
    .job-company-temp1 .merit-note{
        font-size: 16px;
    }
    .job-company-temp1 .message-box{
            padding: 15px 30px;
    }
    .job-company-temp1 .message-box p{
        font-size: 14px;
    }
    .job-company-temp1 .footer{
        padding: 10px;
    }
    .job-company-temp1 .footer img{
        width: 50%;
    }
}



/**  JOB3 *************/
.job-company-temp3 {
    position: relative;
}
.job-company-temp3 .inner {
    max-width: 1110px;
    margin: auto;
}
.job-company-temp3 .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #F8BFA1, #ee5a0d);
    -webkit-clip-path: polygon(0 0, 0% 100%, 100% 0);
    width: 60%;
    max-height: 520px;
}
/* HERO */
.job-company-temp3 .hero .inner {
    position: relative;
    padding: 40px;
}
.job-company-temp3 .hero {
    display: flex;
    border-radius: 0 0 40px 40px;
    color: #fff;
}
.job-company-temp3 .hero-text {
    position: absolute;
    bottom: 10px;
    left: 0;
}
.job-company-temp3 .hero-catch-small {
    background: #ee5a0d;
    display: inline-block;
    padding: 15px 20px;
    margin-bottom: 10px;
    font-size: 40px;
    font-weight: bold;
}
.job-company-temp3 .hero-catch-large {
    background: #ee5a0d;
    padding: 15px 20px;
    font-size: 40px;
}
.job-company-temp3 .hero-catch-large span {
    color: #FEE1A1;
}
.job-company-temp3 .hero-image img {
    border-radius: 20px;
    width: 100%;
}
/* SECTION TITLE */
.job-company-temp3 .section-title {
    text-align: center;
    margin: 50px auto 40px;
    font-size: 28px;
    position: relative;
    width: fit-content;
}
.job-company-temp3 .section-title::before {
    content: "";
    position: absolute;
    top: 12px;
    left: -40px;
    width: 25px;
    height: 2px;
    background: #333;
    transform: rotate(55deg);
    transform-origin: left top;
}
.job-company-temp3 .section-title::after {
    content: "";
    position: absolute;
    top: 12px;
    right: -40px;
    width: 25px;
    height: 2px;
    background: #333;
    transform: rotate(-55deg);
    transform-origin: right top;
}
.job-company-temp3 .section-title span {
    color: #ee5a0d;
}
/* MERIT */
.job-company-temp3 .merit-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 0 auto;
    max-width: 700px;
}
.job-company-temp3 .merit-item {
    border: 3px solid #ee5a0d;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    background: #fff;
}
.job-company-temp3 .merit-grid .merit-item:first-of-type:before {
    content: "";
    width: 80px;
    height: 80px;
    background-image: url(/themes/custom/builjob_front/img/job/job-calendar.webp);
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin: 0 auto;
}
.job-company-temp3 .merit-grid .merit-item:nth-of-type(2):before {
    content: "";
    width: 80px;
    height: 80px;
    background-image: url(/themes/custom/builjob_front/img/job/job-benefits.webp);
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin: 0 auto;
}
.job-company-temp3 .merit-grid .merit-item:nth-of-type(3):before {
    content: "";
    width: 80px;
    height: 80px;
    background-image: url(/themes/custom/builjob_front/img/job/job-training.webp);
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin: 0 auto;
}
.job-company-temp3 .merit-grid .merit-item:nth-of-type(4):before {
    content: "";
    width: 80px;
    height: 80px;
    background-image: url(/themes/custom/builjob_front/img/job/job-license.webp);
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin: 0 auto;
}
.job-company-temp3 .merit-grid .merit-item:nth-of-type(5):before {
    content: "";
    width: 80px;
    height: 80px;
    background-image: url(/themes/custom/builjob_front/img/job/job-rent.webp);
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin: 0 auto;
}
.job-company-temp3 .merit-grid .merit-item:nth-of-type(6):before {
    content: "";
    width: 80px;
    height: 80px;
    background-image: url(/themes/custom/builjob_front/img/job/job-bonus.webp);
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin: 0 auto;
}
.job-company-temp3 .merit-item.red {
    background: #ee5a0d;
    color: #fff;
}
.job-company-temp3 .merit-title,
.merit-text {
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 1px;
}
.job-company-temp3 .merit-note {
    text-align: center;
    margin: 30px auto;
    font-size: 20px;
}
/* MESSAGE */
.job-company-temp3 .message {
    background: linear-gradient(135deg, #F8BFA1, #ee5a0d);
    padding: 20px 20px 30px;
    color: #fff;
}
.job-company-temp3 .message-title {
    font-size: 48px;
    opacity: 0.3;
    line-height: 1;
    margin: auto;
    color: transparent;
    -webkit-text-stroke: 1px #fff;
    position: relative;
    top: 5px;
}
.job-company-temp3 .message-box {
    background: #fff;
    color: #333;
    border-radius: 0px 30px;
    padding: 30px 60px;
    margin: 0 auto;
    font-size: 20px;
}
/* FOOTER */
.job-company-temp3 .footer {
    text-align: center;
    padding: 30px;
}
.job-company-temp3 .footer img {
    width: 20%;
}
@media only screen and (max-width: 1199px) {
    .job-company-temp3 .hero::before {
        max-height: 420px;
    }
}
@media only screen and (max-width: 992px) {
    .job-company-temp3 .hero .inner {
        padding: 20px;
    }
    .job-company-temp3 .hero::before {
        max-height: 250px;
    }
    .job-company-temp3 .hero-catch-small {
        font-size: 18px;
    }
    .job-company-temp3 .hero-catch-large {
        font-size: 20px;
    }
    .job-company-temp3 .merit-item {
        padding: 10px;
    }
    .job-company-temp3 .section-title {
        font-size: 18px;
    }
    .job-company-temp3 .merit-grid .merit-item:nth-of-type(1):before,
    .job-company-temp3 .merit-grid .merit-item:nth-of-type(2):before,
    .job-company-temp3 .merit-grid .merit-item:nth-of-type(3):before,
    .job-company-temp3 .merit-grid .merit-item:nth-of-type(4):before,
    .job-company-temp3 .merit-grid .merit-item:nth-of-type(5):before,
    .job-company-temp3 .merit-grid .merit-item:nth-of-type(6):before {
        width: 40px;
        height: 40px;
    }
    .job-company-temp3 .merit-title,
    .merit-text {
        font-size: 14px;
    }
    .job-company-temp3 .merit-note {
        font-size: 16px;
    }
    .job-company-temp3 .message-box {
        padding: 15px 30px;
    }
    .job-company-temp3 .message-box p {
        font-size: 14px;
    }
    .job-company-temp3 .footer {
        padding: 10px;
    }
    .job-company-temp3 .footer img {
        width: 50%;
    }
}