/* 匯入共用_有標題的多圖文.css */
@import url("../../style_nav/style_about/style_articles.css");

/* ======================================================= */
/* 事業優勢區塊css */
/* ======================================================= */


.cause_bg{
    display: flex;
    flex-direction: column;
    gap: clamp(3.3872rem, 5.4688vw, 6.5625rem) 0; /* 54.20px , 5.4688vw , 105.00px */
}

    .advantages_bg{
        position: relative;
    }


















/* ======================================================= */
/* 經營威望五步css */
/* ======================================================= */

.bizStep_bg{

}

    .bizStep_bg .wrap{
        /* max-width: 700px; */
    }

        .bizStep_content{
            display: flex;
            flex-direction: column;
            row-gap: 0.9375rem; /*15*/
        }


        .bizStep_content .text_area{

        }




        .bizStep_area{
            margin: 0;
            padding: 0;
            list-style-type : none;
            display: flex;
            flex-direction: row;
            gap:  clamp(0.8065rem, 1.3021vw, 1.5625rem); /* 12.90px , 1.3021vw , 25.00px */
           
            column-gap: clamp(2.4194rem, 3.9063vw, 4.6875rem); /* 38.71px , 3.9063vw , 75.00px */
            display: grid;
            grid-template-columns: repeat(5 , 1fr);
            align-items: flex-start;
        }

            .bizStep_area li{
                margin: 0;
                padding: 0;
                list-style-type : none;
                /* display: grid; */
                /* grid-template-columns: repeat(2 , 1fr); */
                align-items: center;
                gap: inherit;
                display: flex;
                flex-direction: column-reverse;
            }
            
                .bizStep_area .bizStep_l{
                    
                }
                
                .bizStep_area .bizStep_r{
                    
                }

                    
                    .bizStep_area .right_title4{         
                        color: var(--dark_color);
                        font-size: clamp(1.2500rem, 1.3021vw, 1.5625rem); /* 20.00px , 1.3021vw , 25.00px */
                        font-weight: 700;
                        line-height: 1.26;
                        letter-spacing: 0.1875rem; /*3*/
                        text-align: center;
                        margin-bottom: clamp(0.6452rem, 1.0417vw, 1.2500rem); /* 10.32px , 1.0417vw , 20.00px */
                    }


                    .bizStep_area .description{
                        text-align: center;
                        font-size: 1rem;
                        line-height: 1.5;
                        color: var(--dark_color);
                    }

                    
                    
                    .bizStep_area .step{
                        position: relative;
                        font-weight: bold;
                       
                        /* background-image: url('https://picsum.photos/id/1015/800/600'); */

                        /*background-image: url('../../../cause/images/demo_1.webp');
                        background-size: cover;
                        background-position: center;
                        -webkit-background-clip: text;
                        background-clip: text;
                        color: transparent;
                        -webkit-text-fill-color: transparent; */

                        background-image:none;
                        text-align: center;
                        font-size: clamp(2.8388rem, 4.5833vw, 5.5000rem); /* 45.42px , 4.5833vw , 88.00px */

                        color:var(--primary_color);
                    }
                    
                        .bizStep_area .step strong{
                            font-size: inherit;
                            font-family: var(--foreign_font);
                            font-weight: 700;
                        }
                        .bizStep_area .step strong::before{
                            content: attr(data-step);
                            font-size: inherit;
                            font-family: var(--foreign_font);
                            font-weight: 700;
                            color: #ffffff00;
                            /* text-shadow: 6px 3px 13px rgba(0, 0, 0, 0.3); */
                            text-shadow: 5px 3px 0px rgb(203 209 208);
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50% , -50%);
                            z-index: -1;

                            display: none;
                        }
                        
                        




/* 在螢幕寬度大於991時，套用這裡的特定樣式 */
@media screen and (min-width: 991px) {

    .bizStep_area li:nth-of-type(2n) .bizStep_r{
        /* order: -1; */
    }


}

@media  (max-width: 990px) {

    .bizStep_area{
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: center;
        grid-template-columns: unset;
        column-gap: 1.875rem; /* 30px */
    }

        .bizStep_area li{
           width: calc(100% / 3 - (1.875rem / 1));
        }
        .bizStep_area .step strong::before{
            opacity: 0;
        }

}

@media  (max-width: 510px) {

    .bizStep_area{
        flex-direction: column;
        gap: 2.8125rem; /*45*/
    }

        .bizStep_area li{
           width: 100%;
           gap: clamp(0.6452rem, 1.0417vw, 1.2500rem); /* 10.32px , 1.0417vw , 20.00px */
        }
        

}