

.solutionPageContent{
    padding-bottom: 0;
}

.solutionBg{
    display: flex;
    flex-direction: column;
    gap: 2.6042vw 0;  /*50px 0*/
    overflow: hidden;
    padding-top: 15px;
}



/* modify by peggy 20241023 */
.textBg{
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	/* align-items: center; */
	/* margin: 0px -5px 0px; */
	justify-content: center;
	width: 100%;
}
.textTitle{
    display: flex;
    flex-direction: column;
    align-items: center;    
}
.textTitle span{
    /* color: var(--primary_color);
    font-size: min(max(1.6667vw, 20px), 32px); 
	margin-bottom: 25px;
	font-weight: 700; */
}



.textBg .textTitle .text_area {
    /* display: flex; */  /*20241017*/
    /* text-align:center; */
    /* font-size: min(max(0.8333vw, 12px), 16px); */
    font-size: min(max(1.15vw, 16px), 21px);
    font-weight: 700;
    color: var(--third_color);
}


/* --------------列表區 ---------------- */
.solutionTitle{
    text-align: center;
    /* font-size: 24px;
    font-weight: 600;
    padding: 0px 0 20px 0px;
    color: var(--primary_color); */


    color: var(--primary_color);
    font-size: min(max(1.6667vw, 20px), 32px); /*字體大小 1.6667vw、最小值 20px、最大值 32px)*/
	/* font-size: 25px; */
	margin-bottom: 25px;
	font-weight: 700;
}
    .solutionArea2 {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content:center;
        margin: 0 -15px 0px;
        gap: 45px 0;
    }
        .solutionArea2 .solutionList {
            padding: 0 15px 0px;
            width: 50%;
            box-sizing: border-box;
        }
            .solutionImg{
                
            }
                .solutionImg a{
                    display: block;
                    position: relative;
                    padding-top: 39.3%;
                }
                .solutionImg a:hover{
                    opacity: 0.5;
                }
                .solutionImg img{
                    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;
                }





.solutionArea2  .solutionBottom {
    padding: 10px 0 0;
}

    .solutionArea2  .solutionTit {
        font-weight: bold;
        line-height: 1.2;
        /* font-size: 20px; */

        font-size: min(max(1.3021vw, 18px), 25px); /*字體大小 1.6667vw、最小值 20px、最大值 32px)*/
        /* font-size: 25px; */

        color: var(--third_color);
        font-weight: 600;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
    .solutionArea2 .solution_remark{
        display: block;
        text-decoration: none;
       
        /* font-size: min(max(0.8333vw, 12px), 16px); */
        font-size: min(max(1.15vw, 16px), 21px);
        line-height: 1.5;
        /* font-size: 16px; */
        color: var(--third_color);

        padding: 0px 0px 0px;
        margin: 5px 0 15px;
        display: -webkit-box;
        -webkit-box-orient: vertical;	
        -webkit-line-clamp: 4;	
        overflow: hidden; /* modify by Judy 20241025  */
    }



/* .solution_remark1 {
    font-size: min(max(1.15vw, 16px), 21px);
    line-height: 1.3;
    margin: 8px 0 0;
    color: #646464;
    font-weight: 600;
} */
.solutionArea2 .more{
    font-size: min(max(0.9375vw, 16px), 18px); /*字體大小 2.5vw、最小值 12px、最大值 18px*/
    display: flex;
    /* justify-content: flex-end; */
    justify-content: center;
}
.solutionArea2 .more a{
    font-size: inherit;
    /* float: right; */
    display: inline-block;
    background-color: var(--primary_color);
    color:white;
    border: none;
    line-height: 1.5;
    border-radius: 3px;
    padding: 0 5px;
    min-width: 120px;
    line-height: 42px;
    text-align: center;
    font-family: var(--foreign_font);
}
    .more a:hover{
        text-decoration: none;
        background-color: var(--third_color);
    }



@media (max-width: 990px){

    .solutionBg{
        gap: 25px 0; 
    }
    
    .solutionArea2 .solutionList {
        width: 100%;
    }

        /* .textTitle span ,  */
        .solutionTitle{
            margin-bottom: 10px;
            font-size: 34px;
        }

        /* .solutionArea2 .more{
            justify-content: center;
        }
            .solutionArea2 .more a{
            display: block;
            } */

            .solutionTitle {
                font-size: 32px; /*20241118*/
            }
            .textTitle span{
                font-size: 32px; /*20241118*/
            }
            
}	



@media (max-width: 768px){

    .solutionArea2 .more{
        justify-content: center;
    }
        .solutionArea2 .more a{
            display: block;
            width: 100%;
        }



        

}

@media (max-width: 400px){

    .solutionTitle { /*20241118*/
        /*font-size: clamp(24px, 4.03vw, 31px);*/  /*字體 最小值 24px、大小約 4.03vw、最大值 31px*/
        font-size: clamp(24px, 8.2vw, 32px);  /*字體 最小值 24px、大小約 8.2vw、最大值 31px*/
    }
    .textTitle span{ /*20241118*/
        font-size: clamp(24px, 8.2vw, 32px);  /*字體 最小值 24px、大小約 8.2vw、最大值 31px*/
    }

}

/*-------------solution產品列表----------- */
.solutionList_area{
    width: 100%;
    margin: 0 0px 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap:1.0417vw; /*25px*/
    /* padding: 30px 0 45px; */
}
.solutionProduct{
    vertical-align: top;
    position: relative;
    /* padding: 0px 0px 20px; */
    box-sizing: border-box;
}
.solutionProduct a{
    display: block;
    text-decoration: none;
}
.solutionProduct a:hover{
   opacity: 0.5;
}

.solutionProduct_img{
    position: relative;
    display: block;
    padding-top: 50%;
    border: #CDCDCD solid 1px;
}   
.solutionProduct_img img{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    float: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.solutionProduct_name{
    text-align: center;
    padding-top: 10px;
	font-size: min(max(1.0417vw, 16px), 20px); /*字體大小 1.6667vw、最小值 20px、最大值 32px)*/
	/* font-size: 25px; */
	color: var(--third_color);
	font-weight: 600;
}
/*------------solution介紹------------- */
.introdution_area{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 60px 0;
    margin-bottom: 2.6042vw;
}
    .solutionIntroduction{
        width: 100%;
        display: flex;
        justify-content: space-between;
        gap: 30px 0;
        /* margin: 0  1.5625vw; */  /* 0 -30px */
        /* margin-bottom: 60px; */

		
        display: grid; /*20241017*/
        grid-template-columns: repeat(2 , 1fr);
        gap: 30px 3.125vw;
    }
    .solutionIntroduction:nth-child(2n){
        flex-direction: row-reverse;
    }



.introduction_left{
    /* width: 50%; */ /*20241017*/
    display: flex;
    flex-direction: column;
    align-items:flex-start;
    justify-content: center;
   }
.introduction_right{
    /* width: 50%; */
    display: flex;
    flex-direction: column;
    align-items:flex-start;
    justify-content: center;
}

.introduction_left ,.introduction_right{
	 /* width: 50%; */
	 /* padding: 0 1.5625vw; */  /*0 30px*/
}
.introductionTitle{
    /* font-size: 24px; */
    font-weight: 600;
    /* padding: 35px 0 20px 0px; */
    /* color: #6F6F6F; */
    margin-bottom: 25px;
    color: var(--third_color);
    font-size: min(max(1.6667vw, 20px), 32px); /*字體大小 1.6667vw、最小值 20px、最大值 32px)*/


    color: var(--primary_color); /*20241017*/
}
.introdcution_in{
    /* font-size: min(max(1.15vw, 16px), 21px);
    font-weight: 600;
    color: var(--third_color);*/
    line-height: 1.5; 
}
.introduction_img{
    position: relative;
    padding-top: 67%;
    width: 100%;
    /* border-radius: 10px; */
    display: block;
    overflow: hidden;
}
.introduction_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;
}






@media (max-width: 990px) { 

    .introductionTitle{
        margin-bottom:10px;
    }

}

@media (max-width: 768px) {    
    .solutionList_area {    
        gap:10px;   
        grid-template-columns: repeat(2, 1fr);
    }
    .solutionIntroduction.list{
        display: flex;
        flex-direction: column;
    }
    .solutionIntroduction.list2{
        display: flex;
        flex-direction: column-reverse !important;
    }
   /*  .introduction_right {
        width: calc(100% - 15px);
    }
    .introduction_left {
        width: calc(100% - 15px);
    } */

    .introdution_area {
        gap: 30px 0;
        margin-bottom: 30PX;
    }
        .solutionIntroduction ,
        .solutionIntroduction:nth-child(2n){
            flex-direction: column;
            /* flex-direction: column-reverse; */
            justify-content: unset;
            gap: 20px 0;
            margin: 0  0; 

            display: flex; /*20241017*/
        }    
            .introduction_left, .introduction_right {
                width: 100%;
                padding: 0 0;
            }

}

