/* 匯入共用_有標題的多圖文.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 */
}

    .award_bg{
        position: relative;
    }



















/* =================================================================== */
/* 實質獎勵css */
/* =================================================================== */


.realRew_bg{
    display: flex;
    flex-direction: column;
    gap: 1.25rem; /*20*/
}

    .realRew_section{
        position: relative;        
    }
    .realRew_section:not(:last-of-type){
        
    }
    .realRew_section:not(:last-of-type)::before {
        
    }
    

        .realRew_bg .right_title3{
            
        }	
            .realRew_bg .right_title3 strong{
                
            }	
            .realRew_bg .right_title3 strong:before{
                
            }	


        .realRew_bg .text_area{
            
        }




        .realRew_section{
            
        }
            .realRew_section .wrap{
                display: flex;
                flex-direction: column;
                gap: 1.25rem; /*20*/
            }
            .realRew_section_full .wrap{
                
            }






            .realRew_area{
                margin: 0;
                padding: 0;
                list-style-type : none;
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                gap: 0.9375rem; /*15*/
            }
                .realRew_area li{
                    border-radius: 0.625rem;
                    background-color: #fff;
                    margin: 0;
                    padding: 0;
                    list-style-type : none;
                    display: grid;
                    grid-template-columns:  clamp(1.7743rem, 2.8646vw, 3.4375rem) auto; /* 28.39px , 2.8646vw , 55.00px */
                    gap: clamp(0.6452rem, 1.0417vw, 1.2500rem);  /* 10.32px , 1.0417vw , 20.00px */
                    padding:  clamp(1.2904rem, 2.0833vw, 2.5000rem); /* 20.65px , 2.0833vw , 40.00px */
                    width: calc(50% - (0.9375rem / 2));
                    box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
                }

                    .realRew_area .realRew_img{
                        position: relative;
                        aspect-ratio: 1;
                        display: block;
                        overflow: hidden;
                        width: 100%;
                    }
                        .realRew_area .realRew_img img{
                           width: 100%;
                           height: 100%;
                           object-fit: cover;
                           position: absolute;
                           top: 0;
                           left: 0;
                           bottom: 0;
                           right: 0;
                           float: none;
                           width: 100% !important;
                           height: 100% !important;
                           object-fit: cover;
                           transition: 0.3s ease all;
                        }


                    .realRew_bg .realRew_info{
                    }


                        .realRew_bg .realRew_info .right_title4{
                            /* width: 50%; */
                        }
                        

                        .realRew_bg .realRew_info .text_area{
                            
                        }




@media (max-width: 640px){

    .realRew_area{
        flex-direction: column;
        /*gap: 0.9375rem;*/ /*15*/
    }
        .realRew_area li{
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .realRew_area .realRew_img {
            max-width: 50px;
        }
        .realRew_bg .realRew_info .right_title4 ,
        .realRew_bg .realRew_info .text_area{
            text-align: center;
        }


}















/* =================================================================== */
/* 小組獎金 css */
/* =================================================================== */

.grpBonus_bg{

}

    .grpBonus_bg .realRew_area li{
        /* width: calc((100% / 3) - (0.9375rem / 1.5));         */
    }


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

    .grpBonus_bg .realRew_area li{
        width: calc((100% / 3) - (0.9375rem / 1.5));        
    } 

}


















/* =================================================================== */
/* 優惠回饋 css */
/* =================================================================== */

.dealBack_bg{

}

    .dealBack_bg .realRew_area li{
        /* width: calc((100% / 3) - (0.9375rem / 1.5));         */
    }


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

    .dealBack_bg .realRew_area li{
        width: 100%;        
    } 

}





/* =================================================================== */
/* 領導獎金 css */
/* =================================================================== */

.ldrBonus_bg{

}

    .ldrBonus_bg .realRew_area li{
        /* width: calc((100% / 3) - (0.9375rem / 1.5));         */
    }


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

    .ldrBonus_bg .realRew_area li{
        width: calc((100% / 3) - (0.9375rem / 1.5));        
    } 

}