/* ===== Title ===== */
.title-l {
    font-weight: bold !important;
    margin-bottom: 1rem;
}

.title-m {
    font-weight: bold !important;
    margin-bottom: 0.75rem;
}

.title-s {
    font-weight: bold !important;
    margin-bottom: 0.5rem;
}

.title-img {
    font-weight: bold;
    position: relative;
    margin-bottom: 1rem;
}

/* ===== 距離 ===== */
.dis-btm-4 {
    margin-bottom: 4rem !important;
}

.dis-btm-2 {
    margin-bottom: 2.5rem !important;
}

.head-block {
    margin-bottom: 6rem
}

.content-block {
    margin-bottom: 8rem
}

/* ===== Banner ===== */
.banner-block {
    margin: 6.5rem 0 4rem 0;
}

/* ===== Head ===== */
.tag {
    font-size: 1.2rem;
    font-weight: 400;
}

.tag span {
    display: inline-block;
    margin-right: 12px;
    margin-bottom: 1.5rem;
    border: 1px solid var(--border-color);
    padding: 3px 8px;
    position: relative;
}

.work-name {
    margin-bottom: 2.5rem;
}

.work-name p {
    margin-top: 0.5rem;
    line-height: 2.2rem;
}

.info-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    padding: 2.5rem 0;
    gap: 2.5rem;
}

.info-item {
    width: 32%;
}

/* ===== Impact ===== */

/* Style-A:Default */
.work-bnumber-block {
    display: flex;
    justify-content: space-between;
    align-items: start;
    flex-wrap: wrap;
    gap: 4rem 0;
}

.work-bnumber-item {
    width: 48.5%;
}

.work-bnumber-item div:first-child {
    font-size: 5rem;
    font-weight: 500;
    color: var(--green-color);
    line-height: 5rem;
}

.work-bnumber-item span {
    font-size: 2.6rem;
    display: inline-block;
    padding-left: 0.5rem;
}

/* Style-B:滿版 */
.work-bnumber-item-100 {
    width: 100%;
}

/* Style-C:圖片 */
.work-bnumber-item img {
    width: 8rem;
    height: 8rem;
    object-fit: contain;
}

.work-bnumber-item.img h5 {
    margin: 1rem 0 0.25rem;
}

/* ===== 各個功能 ===== */

/* 黑背景圖 & 圖片下方文字 */
.bk-img-item p {
    font-size: 1.4rem;
    line-height: 2.2rem;
}

.bk-img-item p {
    color: rgba(255, 255, 255, 0.9);
}

.image-item img {
    margin-bottom: 1rem;
}

.image-item p {
    font-size: 1.4rem;
    line-height: 2.2rem;
}

.goal-group {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
}

.goal-group-3 .bk-img-item {
    width: 32%;
    display: flex;
    flex-direction: column;
    padding: 2.5rem 2rem;
    background-position: center;
    background-size: cover;
}

.goal-group-ver {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.goal-group-ver .bk-img-item {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    padding: 2.5rem;
    background-position: center;
    background-size: cover;
}

.goal-group-square {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
}

.goal-group-square .bk-img-item {
    /* aspect-ratio: 1 / 1; */
    width: 32%;
    object-fit: cover;
    object-position: center;
    height: auto;
    padding: 2.5rem;
}

/* 色塊訊息框 */

/* 如果需要50 50分時使用下方兩組 */
.colorblock-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.colorblock.w50 {
    width: 48.5%;
}

.colorblock {
    display: flex;
    align-items: center;
    padding: 2.5rem;
}

.colorblock img {
    width: 4rem;
    margin-right: 2rem;
}

.colorblock.red {
    background: var(--light-red-color);
}

.colorblock.red p {
    color: var(--one-color);
}

.colorblock.green {
    background: var(--light-green-color);
}

.colorblock.green p {
    color: var(--green-color);
}

.colorblock.yellow {
    background: #F2D948;
}

.colorblock.yellow p {
    color: #222222;
}

.colorblock.blue {
    background: #DFF3FC;
}

.colorblock-wline {
    padding: 3rem 2.5rem;
}

.colorblock-wline.red {
    border: 1px solid var(--one-color);
}

.colorblock-wline-group {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
}

.colorblock-wline-group .colorblock-wline-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
    text-align: center;
}

.colorblock-wline-item img {
    width: 2rem;
    height: 2rem;
    object-fit: contain;
    display: inline-block;
    margin-bottom: 1rem;
}

.colorblock-wline-group.red {
    border: 1px solid var(--one-color);
}

.colorblock-wline-group.red .colorblock-wline-item {
    border-right: 1px solid var(--one-color);
}

.colorblock-wline-group.red .colorblock-wline-item:last-child {
    border-right: 0;
}

.colorblock-wline-group.green {
    border: 1px solid var(--green-color);
}

.colorblock-wline-group.green .colorblock-wline-item {
    border-right: 1px solid var(--green-color);
}

.colorblock-wline-group.green .colorblock-wline-item:last-child {
    border-right: 0;
}

.colorblock-wline-group-3 .colorblock-wline-item {
    width: 33.3%;
}

.colorblock-wline-group-2 .colorblock-wline-item {
    width: 50%;
}

/* 展示圖片 */
.image-block {
    width: 100%;
    overflow-x: auto;
}

.image-group {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
}

.image-group.image-3 .image-item {
    width: 32%;
}

.image-group.image-2 .image-item {
    width: 48.5%;
}

.image-group.image-1 .image-item {
    width: 100%;
}

.image-group.image-2.styly-b,
.image-group.image-1.styly-b {
    justify-content: space-around;
}

.image-group.image-2.styly-b .image-item,
.image-group.image-1.styly-b .image-item {
    width: 48.5%;
}

.image-group-end {
    margin-bottom: 0;
}

/* 方塊說明 */
.squareex-group {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    margin-bottom: 2.5rem;
}

.squareex-group p {
    font-size: 1.4rem;
    line-height: 2.2rem;
}

.squareex-group li {
    font-size: 1.4rem;
    line-height: 2.2rem;
}

.squareex-item {
    border: 1px solid var(--border-color);
    padding: 2rem;
}

/* 有線框-default */
.squareex-group.squareex-4 .squareex-item {
    width: 24%;
}

.squareex-group.squareex-3 .squareex-item {
    width: 32%;
}

.squareex-group.squareex-2 .squareex-item,
.squareex-group.squareex-2 .squareex-item-nb {
    width: 48.5%;
}

/* 無線框 */
.squareex-item-nb {
    border: transparent;
    padding: 0;
}

.squareex-item-image {
    border-radius: 5px;
    padding: 1rem;
    display: inline-block;
    margin-bottom: 1rem;
}

.squareex-item-image.red {
    background: var(--light-red-color);
}

.squareex-item-image.green {
    background: var(--light-green-color);
}

.squareex-item img {
    width: 2rem;
    height: 2rem;
    object-fit: contain;
    display: inline-block;
}

/* Icon & 文字說明 */
.stwimg-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.stwimg-group-v {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
}

.stwimg-group-v .stwimg-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stwimg-group.stwimg-group-4 .stwimg-item {
    width: 24%;
}

.stwimg-group.stwimg-group-3 .stwimg-item {
    width: 32%;
}

.stwimg-group-2 {
    gap: 4rem 0;
}

.stwimg-group.stwimg-group-2 .stwimg-item {
    width: 40%;
}

.stwimg-item {
    position: relative;
    display: flex;
    align-items: center;
}

.stwimg-item img {
    width: 4rem;
    height: 4rem;
    object-fit: contain;
    margin-right: 1rem;
}

.stwimg-group-v .stwimg-item img {
    width: 15rem;
    height: 15rem;
    object-fit: contain;
    margin: 0 0 1rem 0;
}

.stwimg-group-v .stwimg-item div {
    text-align: center;
}

/* work-tab */
.work-tab .nav-pills .nav-link {
    border-radius: 0rem;
    margin-right: 0rem;
    color: var(--font-color);
    background-color: var(--first-color);
    border: 1px solid var(--border-color);
    padding: 1rem 0rem;
    width: 100%;
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    color: var(--one-color);
    background-color: var(--light-red-color);
}

.work-tab .nav.nav-pills {
    display: flex;
    gap: 0 1%;
    margin: 0;
}

.work-tab li {
    width: 18.5%;
}

.work-tab li.nav-item {
    padding-left: 0;
    font-size: 1.6rem;
    margin-bottom: 1rem;
}

.work-tab ul li img {
    width: 2rem;
    height: 2rem;
    object-fit: contain;
    margin-right: 0.5rem;
}

.work-tab li.nav-item {
    border: transparent;
}

/* People */
.people-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4rem;
}

.people-group-4 .people-item {
    width: 20%;
    text-align: center;
}

.people-info h5 {
    margin: 1.5rem 0 0rem;
}

.people-info p {
    line-height: 2.4rem;
}

.speople-group {
    display: flex;
}

.speople-item {
    width: 5rem;
    height: 5rem;
}

.speople-op-group {
    display: flex;
}

.speople-op-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.speople-op-item p {
    width: calc(100% - 15rem);
}

.speople-group {
    position: relative;
    display: flex;
    width: 15rem;
}

.speople-item:nth-child(2) {
    position: absolute;
    left: 3rem;
    z-index: 99;
}

.speople-item:nth-child(3) {
    position: absolute;
    left: 6rem;
    z-index: 999;
}

/* ===== Reflection ===== */
.reflection-group li {
    margin-bottom: 2.5rem;
}

.reflection-group li.sp {
    margin-bottom: 0rem;
}

/* ===== About ===== */
.about-bk {
    height: calc(100vh - 60px);
}

.about-group {
    position: absolute;
    left: 50%;
    top: 50%;
    display: flex;
    justify-content: space-between;
    align-items: self-start;
    transform: translate(-50%, -50%);
    width: 90%;
}

.about-item:first-child {
    width: 20%;
}

.about-item:last-child {
    width: 75%;
}

.about-img {
    width: 30rem;
    height: 30rem;
    border-radius: 99rem;
}

.about-link {
    margin: 6rem 0 0 0;
}

.about-link a {
    font-size: 1.6rem;
    padding-right: 3rem;
}

.about-link a i {
    padding-right: 1rem;
}

video {
    width: 100%;
}

.video-frame {
    position: relative;
    padding-bottom: 70.83%;
    height: 0;
    overflow: hidden;
}

/* ===== SP ===== */
.sp-1 {
    font-size: 4.2rem;
    font-weight: 500;
}

.sp-3 {
    position: absolute;
    display: inline-block;
    top: 7px;
    padding-left: 0.5rem;
}

/*================================================== RWD ==================================================*/
@media(max-width:1450px) {

    /*==================================================================================================== 1450px*/
    /* ===== About ===== */
    .about-link {
        margin: 4rem 0 0 0;
    }

    .about-item:first-child {
        width: 20%;
    }

    .about-item:last-child {
        width: 75%;
    }

    .about-img {
        width: 100%;
        height: 100%;
    }
}

@media(max-width:1200px) {

    /*==================================================================================================== 1200px*/
    /* work-tab */
    .work-tab li.nav-item {
        padding: 0;
    }

    /* ===== About ===== */
    .about-bk {
        height: auto;
    }

    .about-section {
        padding: 10rem 0;
    }

    .about-group {
        flex-direction: column;
        align-items: center;
        position: relative;
        left: auto;
        top: auto;
        transform: translate(0, 0);
        width: 100%;
    }

    .about-img {
        width: 100%;
        height: 100%;
        margin-bottom: 4rem;
    }

    .about-item:first-child {
        width: 35%;
    }

    .about-item:last-child {
        width: 100%;
    }
}

@media(max-width:992px) {

    /*==================================================================================================== 992px*/
    /* ===== Banner ===== */
    .banner-block {
        margin: 2.5rem 0 4rem 0;
    }

    /* 展示圖片 */

    .image-group.image-over-s {
        flex-wrap: nowrap;
    }

    .image-group.image-over-s .image-item {
        min-width: 250px;
    }
}

@media(max-width:768px) {

    /*==================================================================================================== 768 px*/
    /* ===== Title ===== */
    .title-l {
        margin-bottom: 0.5rem;
    }

    .title-m {
        margin-bottom: 0.4rem;
    }

    .title-s {
        margin-bottom: 0.2rem;
    }

    /* ===== 距離 ===== */
    .dis-btm-4 {
        margin-bottom: 3rem !important;
    }

    .dis-btm-2 {
        margin-bottom: 2rem !important;
    }

    .head-block {
        margin-bottom: 4.5rem;
    }

    .content-block {
        margin-bottom: 6rem;
    }

    /* ===== Head ===== */
    .tag {
        margin-bottom: 0rem;
    }

    .work-name {
        margin-bottom: 2rem;
    }

    .work-name p {
        margin-top: 1rem;
        line-height: 2.2rem;
    }

    .info-group {
        flex-direction: column;
        padding: 2rem 0;
        gap: 2rem;
    }

    .info-item {
        width: 100%;
    }

    /* work-tab */
    .work-tab .nav.nav-pills {
        display: flex;
        justify-content: flex-start;
    }

    .work-tab li {
        width: 22.5%;
    }

    .work-tab .nav-pills .nav-link {
        font-size: 1.4rem;
    }

    /* ===== Impact ===== */
    .work-bnumber-item div:first-child {
        font-size: 3rem;
    }

    .work-bnumber-item-withinnering {
        flex-direction: column;
        align-items: flex-start;
    }

    .work-bnumber-item-withinnering img {
        height: 6rem;
    }

    .goal-group-3 .bk-img-item {
        border-bottom: 1px solid #ffffff50;
    }

    .goal-group {
        flex-direction: column;
    }

    .goal-group-square .bk-img-item {
        aspect-ratio: inherit;
    }

    .goal-group-3 .bk-img-item {
        width: 100%;
        height: auto;
        padding: 2.5rem !important;
    }

    /* 色塊訊息框 */
    .colorblock {
        flex-direction: column;
        padding: 3rem 2.5rem;
        align-items: baseline;
    }

    .colorblock img {
        margin: 0 0 1rem 0;
    }

    /* 方塊說明 */
    .squareex-group {
        margin-bottom: 2rem;
    }

    .squareex-group.squareex-4,
    .squareex-group.squareex-3,
    .squareex-group.squareex-2 {
        flex-direction: column;
        gap: 2rem;
    }

    .squareex-group.squareex-4 .squareex-item,
    .squareex-group.squareex-3 .squareex-item,
    .squareex-group.squareex-2 .squareex-item {
        width: 100%;
    }

    .squareex-group.squareex-2 .squareex-item-nb {
        width: 100%;
    }

    .squareex-group.squareex-4 {
        flex-wrap: wrap;
    }

    /* 展示圖片 */
    .image-item img {
        margin-bottom: 0.5rem;
    }

    /* People */
    .people-group {
        flex-wrap: wrap;
        justify-content: space-around;
        gap: 3rem;
        margin-bottom: 3rem;
    }

    .people-group-4 .people-item {
        width: 32%;
        margin-bottom: 0rem;
    }

    /* ===== Reflection ===== */
    .reflection-group li {
        margin-bottom: 2rem;
    }

    /* ===== About ===== */
    .about-item:first-child {
        width: 50%;
    }

    /* ===== SP ===== */
    .sp-1 {
        font-size: 3rem;
        line-height: 5.2rem;
    }
}

@media(max-width:600px) {

    /*==================================================================================================== 600px*/
    /* ===== Banner ===== */
    .banner-block {
        margin: 2rem 0 3rem 0;
    }

    /* work-tab */
    .work-tab .nav.nav-pills {
        justify-content: space-between;
    }

    .work-tab li {
        width: 32%;
    }
}

@media(max-width:576px) {

    /*==================================================================================================== 576 px*/
    /* ===== 距離 ===== */
    .head-block,
    .content-block {
        margin-bottom: 4rem;
    }

    .dis-576-mp-3 {
        margin-top: 3rem;
    }

    .dis-576-mb-3 {
        margin-bottom: 3rem;
    }

    .dis-576-mp-2 {
        margin-top: 2rem;
    }

    .dis-576-mb-2 {
        margin-bottom: 2rem;
    }

    /* ===== Head ===== */
    .tag span {
        margin-right: 5px;
        margin-bottom: 1rem;
        font-size: 1.2rem;
        padding: 0 8px;
    }

    /* ===== Impact ===== */
    .work-bnumber-block {
        gap: 2rem 0;
        flex-direction: column;
    }

    .work-bnumber-item {
        width: 100%;
    }

    .work-bnumber-item div:first-child {
        font-size: 3rem;
        line-height: 4.5rem;
    }

    .work-bnumber-item img {
        width: 6rem;
        height: 6rem;
    }

    .work-bnumber-item-withinnering img {
        width: 4rem;
        height: 6rem;
    }

    /* 展示圖片 */
    /* .image-group {
        flex-direction: column;
    } */

    /* .image-group.image-3 .image-item {
        width: 100%;
    } */
    .image-group {
        justify-content: space-evenly;
    }

    .image-group.image-3 .image-item,
    .image-group.image-2 .image-item {
        width: 28%;
    }

    /* .image-group .image-item {
        margin-bottom: 2rem;
    } */

    .image-group .image-item:last-child {
        margin-bottom: 0rem;
    }

    /* 方塊說明 */
    .squareex-group {
        margin-bottom: 2rem;
    }

    /* 色塊訊息框 */
    .colorblock-wline-group {
        flex-direction: column;
    }

    .colorblock-wline-group-3 .colorblock-wline-item,
    .colorblock-wline-group-2 .colorblock-wline-item {
        width: 100%;
    }

    .colorblock-wline-group .colorblock-wline-item {
        align-items: flex-start;
        text-align: left;
    }

    .colorblock-wline-group-3.colorblock-wline-group.red .colorblock-wline-item {
        border-right: none;
        border-bottom: 1px solid var(--one-color);
    }

    .colorblock-wline-group-3.colorblock-wline-group.red .colorblock-wline-item:last-child {
        border-bottom: none;
    }

    /* Icon & 文字說明 */
    .stwimg-group.stwimg-group-3 {
        flex-direction: column;
        align-items: center;
        gap: 2rem 0;
    }

    .stwimg-group.stwimg-group-3 .stwimg-item {
        width: 100%;
    }

    .stwimg-group.stwimg-group-2 .stwimg-item {
        width: 48.5%;
    }

    .stwimg-group-v .stwimg-item img {
        width: 10rem;
        height: 10rem;
    }

    /* ===== About ===== */
    .about-link {
        margin: 4rem 0 0 0;
        display: flex;
        flex-direction: column;
        align-items: baseline;
    }

    .about-link a {
        margin-bottom: 2rem;
    }

    /* ===== SP ===== */
    .sp-1 {
        margin: 0 !important;
    }

    .about-sp-1 {

        height: calc(100vh - 60px);
    }
}

@media(max-width:480px) {

    /*==================================================================================================== 480px*/
    /* ===== Impact ===== */
    .work-bnumber-item div:first-child {
        font-size: 2.6rem;
        line-height: 3.2rem;
    }

    /* work-tab */
    .work-tab li {
        width: 48.5%;
    }

    /* 色塊訊息框 */
    .colorblock.w50 {
        width: 100%;
    }

    /* ===== About ===== */
    .about-link {
        margin: 4rem 0 0 0;
        display: flex;
        flex-direction: column;
    }

    .about-link a {
        font-size: 1.6rem;
        display: inline-block;
        margin-bottom: 1.5rem;
    }

    /* ===== SP ===== */
    .sp-1 {
        font-size: 2.6rem;
        line-height: 3.2rem;
    }
}

@media(max-width:420px) {

    /*==================================================================================================== 420px*/
    /* ===== Impact ===== */
    .goal-group-3 .bk-img-item {
        padding: 2rem;
    }

    /* 展示圖片 */
    .image-group.image-3 .image-item,
    .image-group.image-2 .image-item {
        width: 25%;
    }

    /* 色塊訊息框 */
    .colorblock {
        padding: 2rem;
    }

    .colorblock-wline {
        padding: 2rem;
    }

}