@charset "UTF-8";
/* 有些地方 圓形時可能需要 */
img.fit-cover {
    position: relative;
    width: 100%;
    height: 100.5%;
    object-fit: cover;
}

.con__mtitle {
    display: flex;
    flex-direction: column;
    color: #fff;
    margin: 0 auto 6% auto;

    width: var(--main-width);
    max-width: var(--main-max-width);
    padding: 0 0;
}

.con__mtitle .mtitle__title {
    position: relative;
    display: flex;
    flex-direction: row;
    /* align-items: center; */
    align-items: flex-start;
}

.con__mtitle .mtitle__detail {
    margin-top: calc(var(--fsize) * 1.5);
}

.con__mtitle .mtitle__title > img {
    width: calc(var(--fsize) * 1.6);
    margin-right: calc(var(--fsize) * 0.3);
}

.box__events {
    padding:  var(--section-vside) 0 calc(var(--section-vside) * 2) 0;
}

.box__events.is-two {
    margin-top: calc(var(--section-vside) * -1 );
    padding:  calc(var(--section-vside) * 2) 0 calc(var(--section-vside) * 3.5) 0;
}

.box__events.is-three {
    margin-top: calc(var(--section-vside) * -2.5 );
    padding:  calc(var(--section-vside) * 4.5) 0 calc(var(--section-vside) * 3) 0;
}


.box__events .box__container {
    /* padding: 0 var(--extra-side); */
    width: var(--main-width);
    max-width: initial;
    padding: 0 0;
}

.box__events .box__container .box__body .body__mtitle {
    display: none;
}

.box__events .box__container .box__body .body__item {
    position: relative;
    width: var(--main-width);
    max-width: var(--main-max-width);
    padding: 0 calc(var(--main-padding-side) * 2) 0 var(--main-padding-side);
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.box__events .box__container .box__body .body__item .item__pic {
    width: 46%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;

    margin: 0 4%;

    display: flex;
    justify-content: center;
    align-items: center;
}

.box__events .box__container .box__body .body__item .item__pic::before {
    content: "";
    position: absolute;
    width: 105%;
    top: 0%;
    left: -54%;
    aspect-ratio: 1567 / 1137;
    background: url(../images/service/service-events-bg-deco.svg) no-repeat;
    background-position: center;
    background-size: 100%;

    transform: translateY(-50%);
}

.box__events.is-two .box__container .box__body .body__item {
    flex-direction: row-reverse;
    padding: 0 calc(var(--main-padding-side) * 1) 0 calc(var(--main-padding-side) * 2);
}

.box__events.is-two .box__container .box__body .body__item .item__pic::before {
    top: 68%;
    left: 56%;
}

.box__events.is-three .box__container .box__body .body__item .item__pic::before {
    top: 27%;
    left: -55%;
}

.box__events .box__container .box__body .body__item .item__con {
    flex: 1;
    z-index: 1;
}

.box__events .box__container .box__body .body__item .item__con .con__list .list__cell:not(:first-child) {
    margin-top: 4%;
}

.box__events .box__container .box__body .body__item .item__con .con__list .list__cell .cell__text {
    margin-top: calc(var(--fsize) * 0.8);
}

/* ----------------------------------------------------------------- */
/* ----------------------------------------------------------------- */
@media screen and (min-width:320px) {
    .box__events .box__container .box__body .body__mtitle {
        display: flex;
        margin: var(--title-vside) auto calc(var(--title-vside) * 1.7) auto;
    }

    .box__events.is-two .box__container .box__body .body__mtitle {
        margin: var(--title-vside) auto calc(var(--title-vside) * 1.5) auto;
    }

    .box__events.is-three .box__container .box__body .body__mtitle {
        margin: var(--title-vside) auto calc(var(--title-vside) * 2.5) auto;
    }

    .box__events.is-two {
        margin-top: calc(var(--section-vside) * -3);
    }

    .box__events.is-three {
        margin-top: calc(var(--section-vside) * -6.5);
    }

    .con__mtitle {
        display: none;
    }
    /* ---------------------------------------------------------------------------- */
    .box__events .box__container .box__body .body__item {
        padding: 0 calc(var(--main-padding-side)) 0 var(--main-padding-side);
        flex-direction: column;
        justify-content: initial;
    }

    .box__events.is-two .box__container .box__body .body__item {
        flex-direction: column;
        padding: 0 calc(var(--main-padding-side)) 0 var(--main-padding-side);
    }

    .box__events .box__container .box__body .body__item .item__pic {
        width: 95%;
        margin: 0 0%;

    }

    .box__events .box__container .box__body .body__item .item__pic::before {
        width: 185%;
        top: 19%;
        left: -90%;
    }

    .box__events.is-two .box__container .box__body .body__item .item__pic::before {
        top: 28%;
        left: 15%;
    }
    
    .box__events.is-three .box__container .box__body .body__item .item__pic::before {
        top: 16%;
        left: -96%;
    }

    .box__events .box__container .box__body .body__item .item__con {
        margin-top: 15%;
    }
}
@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__events .box__container .box__body .body__mtitle {
        margin: var(--title-vside) auto calc(var(--title-vside) * 3) auto;
    }

    .box__events.is-two .box__container .box__body .body__mtitle {
        margin: var(--title-vside) auto calc(var(--title-vside) * 2.5) auto;
    }

    .box__events.is-three .box__container .box__body .body__mtitle {
        margin: var(--title-vside) auto calc(var(--title-vside) * 3.5) auto;
    }

    .box__events.is-two {
        margin-top: calc(var(--section-vside) * -1);
    }

    .box__events.is-three {
        margin-top: calc(var(--section-vside) * -4.5);
    }

    /* ---------------------------------------------------------------------------- */
    .box__events .box__container .box__body .body__item .item__pic::before {
        width: 175%;
        top: 25%;
        left: -80%;
    }

    .box__events.is-two .box__container .box__body .body__item .item__pic::before {
        top: 39%;
        left: 26%;
    }

    .box__events.is-three .box__container .box__body .body__item .item__pic::before {
        top: 20%;
        left: -98%;
    }
}
@media screen and (min-width:1024px) {
    .box__events .box__container .box__body .body__mtitle {
        display: none;
    }

    .box__events.is-two {
        margin-top: calc(var(--section-vside) * -1);
    }

    .box__events.is-three {
        margin-top: calc(var(--section-vside) * -2.5);
    }

    .con__mtitle {
        display: flex;
    }
    /* ---------------------------------------------------------------------------- */
    .box__events .box__container .box__body .body__item {
        padding: 0 calc(var(--main-padding-side) * 2) 0 var(--main-padding-side);
        flex-direction: row;
        justify-content: center;
    }

    .box__events.is-two .box__container .box__body .body__item {
        flex-direction: row-reverse;
        padding: 0 calc(var(--main-padding-side)) 0 calc(var(--main-padding-side) * 2);
    }

    .box__events .box__container .box__body .body__item .item__pic {
        width: 46%;
        margin: 0 4%;
    }

    .box__events .box__container .box__body .body__item .item__pic::before {
        width: 105%;
        top: 0%;
        left: -54%;
    }

    .box__events.is-two .box__container .box__body .body__item .item__pic::before {
        top: 68%;
        left: 56%;
    }
    
    .box__events.is-three .box__container .box__body .body__item .item__pic::before {
        top: 27%;
        left: -55%;
    }

    .box__events .box__container .box__body .body__item .item__con {
        margin-top: 0%;
    }
}
@media screen and (min-width:1280px) {}
@media screen and (min-width: 1440px) {}
@media screen and (min-width: 1680px) {}
@media screen and (min-width: 1920px) {}
@media screen and (min-width: 2560px) {}