@charset "UTF-8";
section {
    padding: 0 0 calc(var(--section-vside) * 0.5) 0;
}

section .box__container .box__body .body__mtitle {
    color: var(--color-gray-dark2);
    padding: 0 0;
}


/* ---------- */
.box__banner {
    padding: 0 0 calc(var(--section-vside) * 0.5) 0;
}

.box__banner .box__container .box__body {
    --cover-w: 64%;
    --con-w: calc(100% - var(--cover-w));
    display: flex;
    flex-direction: row;
    align-items: stretch;

    border-radius: 0 0 var(--border-radius-m) var(--border-radius-m);
    overflow: hidden;
    box-shadow: var(--box-shadows2);
}

.box__banner .box__container .box__body .body__cover {
    position: relative;
    width: var(--cover-w);
    aspect-ratio: 16 / 9;
}

.box__banner .box__container .box__body .body__con {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: calc(var(--fsize) * 1.5);
    background-color: #fff;
}

.box__banner .box__container .box__body .body__con .con__data {
    position: relative;
    display: flex;
    flex-direction: column;    
}

.box__banner .box__container .box__body .body__con .con__data .data__logo {
    position: relative;
    width: 40%;
}

.box__banner .box__container .box__body .body__con .con__data .data__logo > img {
    border: 1px solid var(--color-gray-light3);
    box-sizing: border-box;
    aspect-ratio: 1/1;
    overflow: hidden;
    border-radius: var(--border-radius-ss);
}

.box__banner .box__container .box__body .body__con .con__data .data__logo::before {
    --fsize2: calc(var(--fsize) * 0.75);
    content: attr(data-cnum);
    position: absolute;
    right: calc(var(--fsize2) * -0.5);
    bottom: 3px;
    transform: translateX(100%);
    
    font-size: var(--fsize2);
    line-height: calc(var(--fsize2) * 1.3);
}

.box__banner .box__container .box__body .body__con .con__data .data__title {
    margin-top: calc(var(--fsize));
    font-weight: 500;
}

.box__banner .box__container .box__body .body__con .con__data .data__title .title__en {
    --fsize2: calc(var(--fsize) * 0.85);
    font-size: var(--fsize2);
    line-height: calc(var(--fsize2) * 1.3);
}

.box__banner .box__container .box__body .body__con .con__action {
    margin-top: calc(var(--fsize) * 2);
    position: relative;
    width: 100%;
}

.box__work .box__container .box__body .body__con .con__item .item__action .action__btn,
.box__jobs .box__container .box__body .body__con .con__action .action__btn,
.box__banner .box__container .box__body .body__con .con__action .action__btn {
    pointer-events: auto;
    cursor: pointer;
    --fsize2: calc(var(--fsize) * 0.9);
    font-size: var(--fsize2);
    position: relative;
    padding: calc(var(--fsize2) * 0.45);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--border-radius-sm);
    background-color: var(--color-purple);
    color: #fff;
}

.box__work .box__container .box__body .body__con .con__item .item__action .action__btn,
.box__jobs .box__container .box__body .body__con .con__action .action__btn {
    background-color: initial;
    border: 1px solid var(--color-gray-dark);
    color: var(--color-gray-dark);
    width: 300px;
}


.box__banner .box__container .box__body.is-tips {
    border-radius: initial;
    overflow: initial;
    box-shadow: initial;
}

.box__banner .box__container .box__body.is-tips .body__cover {
    flex: 1;
    width: initial;
    aspect-ratio: initial;
}

.box__banner .box__container .box__body.is-tips .body__con {
    --fsize2: calc(var(--fsize) * 0.85);
    margin-top: calc(var(--fsize2) * 1.5);
    font-size: var(--fsize2);
    line-height: calc(var(--fsize2) * 1.3);    

    flex: 0 0 auto;
    background-color: initial;
    padding: 0;

    padding: calc(var(--fsize2) * 0.75) calc(var(--fsize2) * 1.5);
    border-radius: var(--border-radius-sm);
    box-shadow: var(--box-shadows2);
    background-color: #fff;
}

.box__banner .box__container .box__body.is-tips .body__con::after {
    content: '';
    position: absolute;
    top: -50%;
    right: min(14dvw, 35%);
    width: 0;
    height: 0;
    border: 0.75em solid transparent;
    border-top-color: #fff;

    transform: translateX(-50%) rotate(180deg);

}
/* box__jobs */
.box__work .box__container .box__body .body__con,
.box__publish .box__container .box__body .body__con,
.box__jobs .box__container .box__body .body__con {
    position: relative;
    width: 100%;
    border-radius: var(--border-radius-m);
    overflow: hidden;
    box-shadow: var(--box-shadows2);
    background-color: #fff;

    display: flex;
    flex-direction: column;

    padding: calc(var(--fsize) * 3) calc(var(--fsize) * 2);
}

.box__publish .box__container .box__body .body__con .con__item,
.box__jobs .box__container .box__body .body__con .con__item {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.box__jobs .box__container .box__body .body__con .con__init {
    display: flex;
    justify-content: center;
    margin: calc(var(--fsize) * 1.5) 0;
    padding: 0 calc(var(--fsize) * 2);
    text-align: center;
}

.box__jobs .box__container .box__body .body__con .con__init.is-none {
    display: none;
}

.box__jobs .box__container .box__body .body__con .con__item.is-none {
    display: none;
}

.box__work .box__container .box__body .body__con .con__item .item__list.is-title,
.box__publish .box__container .box__body .body__con .con__item.is-title,
.box__jobs .box__container .box__body .body__con .con__item.is-title {
    background-color: var(--color-aqua-light2);
}


.box__work .box__container .box__body .body__con .con__item .item__list:not(:first-child):not(:nth-child(2)),
.box__publish .box__container .box__body .body__con .con__item:not(:first-child):not(:nth-child(2)),
.box__jobs .box__container .box__body .body__con .con__item:not(:first-child):not(:nth-child(2)):not(:nth-child(3)) {
    border-top: 1px solid var(--color-gray-light3);
    box-sizing: border-box;
}

.box__work .box__container .box__body .body__con .con__item .item__list .list__cell,
.box__publish .box__container .box__body .body__con .con__item .item__cell,
.box__jobs .box__container .box__body .body__con .con__item .item__cell {
    padding: calc(var(--fsize) * 0.75) calc(var(--fsize) * 1);
}

.box__work .box__container .box__body .body__con .con__item .item__list.is-title .list__cell,
.box__publish .box__container .box__body .body__con .con__item.is-title .item__cell,
.box__jobs .box__container .box__body .body__con .con__item.is-title .item__cell {
    padding: calc(var(--fsize) * 0.5) calc(var(--fsize) * 1);
}

.box__publish .box__container .box__body .body__con .con__item .item__cell:nth-child(1),
.box__jobs .box__container .box__body .body__con .con__item .item__cell:nth-child(1) {
    flex: 1;
}

.box__jobs .box__container .box__body .body__con .con__item .item__cell:nth-child(3),
.box__jobs .box__container .box__body .body__con .con__item .item__cell:nth-child(2) {
    flex: 0 0 auto;
    width: calc(var(--fsize) * 8);
    text-align: center;
    /* margin: 0 calc(var(--fsize)); */
}

.box__jobs .box__container .box__body .body__con .con__action {
    margin-top: calc(var(--fsize) * 2);
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
}
/* box__publish */
.box__publish .box__container .box__body .body__con .con__item .item__cell:nth-child(4),
.box__publish .box__container .box__body .body__con .con__item .item__cell:nth-child(3),
.box__publish .box__container .box__body .body__con .con__item .item__cell:nth-child(2) {
    flex: 0 0 auto;
    position: relative;
    width: calc(var(--fsize) * 6);
    text-align: center;
}

/* box__work */
.box__work .box__container .box__body .body__con .con__item {
    position: relative;
    display: flex;
    flex-direction: column;
}

.box__work .box__container .box__body .body__con .con__item:not(:first-child) {
    margin-top: calc(var(--fsize) * 2);
}

.box__work .box__container .box__body .body__con .con__item .item__list {
    position: relative;
    display: flex;
    flex-direction: row;
}

/* .box__work .box__container .box__body .body__con .con__item .item__list:not(:nth) */

.box__work .box__container .box__body .body__con .con__item .item__list .list__cell:nth-child(1) {
    flex: 1;
}

.box__work .box__container .box__body .body__con .con__item .item__list .list__cell:nth-child(2) {
    flex: 0 0 auto;
    position: relative;
    width: calc(var(--fsize) * 4);
    text-align: center;
}

.box__work .box__container .box__body .body__con .con__item .item__action {
    margin-top: calc(var(--fsize) * 1.5);
    position: relative;
    display: flex;
    justify-content: center;
}
/* ----------------------------------------------------------------- */
/* ----------------------------------------------------------------- */
@media screen and (min-width:320px) {
    .box__banner .box__container {
        padding: 0 0;
    }

    .box__banner .box__container .box__body {
        flex-direction: column;
        align-items: initial;
        border-radius: 0;
    }

    .box__banner .box__container .box__body .body__cover {
        width: 100%;
    }

    .box__banner .box__container .box__body .body__con {
        padding: calc(var(--fsize) * 1) var(--main-padding-side);
    }

    .box__banner .box__container .box__body .body__con .con__data {
        flex-direction: row;
    }

    .box__banner .box__container .box__body .body__con .con__data .data__title {
        margin-top: 0;
        flex: 1;
        --fsize2: calc(var(--fsize) * 0.75);
        font-size: var(--fsize2);
        line-height: calc(var(--fsize2) * 1.3);

        padding-left: calc(var(--fsize) * 0.75 * 0.5);
        padding-top: 3px;
    }

    .box__banner .box__container .box__body .body__con .con__data .data__title .title__en {
        --fsize3: calc(var(--fsize2) * 0.85);
        font-size: var(--fsize3);
        line-height: calc(var(--fsize3) * 1.3);
    }

    .box__banner .box__container .box__body .body__con .con__data .data__logo {
        width: 85px;
    }

    .box__banner .box__container .box__body .body__con .con__data .data__logo::before {
        --fsize2: calc(var(--fsize) * 0.65);
    }

    .box__banner .box__container .box__body .body__con .con__action {
        margin-top: calc(var(--fsize) * 2);
    }

    .box__banner .box__container .box__body.is-tips .body__con {
        margin: calc(var(--fsize2) * 1.5) var(--main-padding-side) 0 var(--main-padding-side);
    }

    .box__banner .box__container .box__body.is-tips .body__con::after {
        top: -35%;
        right: 45%;
    }

    .box__work .box__container .box__body .body__con, 
    .box__publish .box__container .box__body .body__con, 
    .box__jobs .box__container .box__body .body__con {
        padding: calc(var(--fsize) * 3) calc(var(--fsize) * 1);
    }

    .box__work .box__container .box__body .body__con .con__item .item__list .list__cell, 
    .box__publish .box__container .box__body .body__con .con__item .item__cell, 
    .box__jobs .box__container .box__body .body__con .con__item .item__cell {
        padding: calc(var(--fsize) * 0.75) calc(var(--fsize) * 0.5);
    }

    .box__work .box__container .box__body .body__con .con__item .item__list.is-title .list__cell, 
    .box__publish .box__container .box__body .body__con .con__item.is-title .item__cell, 
    .box__jobs .box__container .box__body .body__con .con__item.is-title .item__cell {
        padding: calc(var(--fsize) * 0.5) calc(var(--fsize) * 0.5);
    }

    .box__jobs .box__container .box__body .body__con .con__item .item__cell:nth-child(2) {
        width: calc(var(--fsize) * 7);
    }

    .box__jobs .box__container .box__body .body__con .con__item .item__cell:nth-child(3) {
        width: calc(var(--fsize) * 5);
    }

}
@media screen and (min-width:360px) {}
@media screen and (min-width:390px) {}
@media screen and (min-width:414px) {}
@media screen and (min-width:500px) {}
@media screen and (min-width:600px) {
    .box__banner .box__container .box__body.is-tips .body__con::after {
        top: -48%;
        right: 47%;
    }
}
@media screen and (min-width:1024px) {
    .box__banner .box__container {
        padding: 0 var(--main-padding-side);
    }

    .box__banner .box__container .box__body {
        flex-direction: row;
        align-items: stretch;
        border-radius: 0 0 var(--border-radius-m) var(--border-radius-m);
    }

    .box__banner .box__container .box__body .body__cover {
        width: var(--cover-w);
    }

    .box__banner .box__container .box__body .body__con {
        padding: calc(var(--fsize) * 1.5);
    }

    .box__banner .box__container .box__body .body__con .con__data {
        flex-direction: column;
    }

    .box__banner .box__container .box__body .body__con .con__data .data__title {
        margin-top: calc(var(--fsize));
        flex: initial;
        font-size: var(--fsize);
        line-height: calc(var(--fsize) * 1.3);
        padding-left: 0;
        padding-top: 0px;
    }

    .box__banner .box__container .box__body .body__con .con__data .data__title .title__en {
        --fsize2: calc(var(--fsize) * 0.85);
        font-size: var(--fsize2);
        line-height: calc(var(--fsize2) * 1.3);
    }

    .box__banner .box__container .box__body .body__con .con__data .data__logo {
        width: 40%;
    }

    .box__banner .box__container .box__body .body__con .con__data .data__logo::before {
        --fsize2: calc(var(--fsize) * 0.75);
    }

    .box__banner .box__container .box__body .body__con .con__action {
        margin-top: calc(var(--fsize) * 2);
    }

    .box__banner .box__container .box__body.is-tips .body__con {
        margin: calc(var(--fsize2) * 1.5) 0 0 0;
    }

    .box__banner .box__container .box__body.is-tips .body__con::after {
        top: -50%;
        right: min(14dvw, 35%);
    }

    .box__work .box__container .box__body .body__con, 
    .box__publish .box__container .box__body .body__con, 
    .box__jobs .box__container .box__body .body__con {
        padding: calc(var(--fsize) * 3) calc(var(--fsize) * 2);
    }

    .box__work .box__container .box__body .body__con .con__item .item__list .list__cell, 
    .box__publish .box__container .box__body .body__con .con__item .item__cell, 
    .box__jobs .box__container .box__body .body__con .con__item .item__cell {
        padding: calc(var(--fsize) * 0.75) calc(var(--fsize) * 1);
    }

    .box__work .box__container .box__body .body__con .con__item .item__list.is-title .list__cell, 
    .box__publish .box__container .box__body .body__con .con__item.is-title .item__cell, 
    .box__jobs .box__container .box__body .body__con .con__item.is-title .item__cell {
        padding: calc(var(--fsize) * 0.5) calc(var(--fsize) * 1);
    }

    .box__jobs .box__container .box__body .body__con .con__item .item__cell:nth-child(2),
    .box__jobs .box__container .box__body .body__con .con__item .item__cell:nth-child(3) {
        width: calc(var(--fsize) * 8);
    }
}
@media screen and (min-width:1280px) {}
@media screen and (min-width:1366px) {}
@media screen and (min-width: 1440px) {}
@media screen and (min-width: 1680px) {}
@media screen and (min-width: 1920px) {}
@media screen and (min-width: 2560px) {}