/* =============================== */
/* 動畫效果 */
/* =============================== */
@keyframes about_move_1 {
    0%   {transform: translateX(0px);}
    50%   {transform: translateX(-50px);}
    100% {transform: translateX(0px);}
}
@keyframes about_move_2 {
    0%   {transform: translateX(0px);}
    50%   {transform: translateX(50px);}
    100% {transform: translateX(0px);}
}
@keyframes about_move_3 {
    0%   {transform: translateX(-5px);}
    50%   {transform: translateX(50px);}
    100% {transform: translateX(0px);}
}

.pageContent {
    padding-bottom: 0;
}
.pageContent .wrap{
    margin: 0;
    max-width: unset;
    width: 100%;
    overflow: hidden;
}
.pageContent_topArea{
    display: none;
}

.pageContent_in{
    padding-top: 0;
}


.about_area1{
    background-image: url(../../../images/bg_img.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    padding-bottom: clamp(5.4375rem,9.1146vw,10.9375rem);
}
.about_area1 .about_top{
    display: grid;
    grid-template-columns: 30% 40% 30%;
    gap: .625rem;
    align-items: flex-end;
}
.about_area1 .about_top .deco_left{
    width: 100%;
    left: 0;
    animation: about_move_1 30s linear infinite;
}
.about_area1 .about_top .deco_right{
    width: 100%;
    right: 0;
    animation: about_move_2 30s linear infinite;
}
.about_area1 .about_top .deco_left img,
.about_area1 .about_top .about_logo img,
.about_area1 .about_top .deco_right img{
    width: 100%;
    height: auto;

}
.about_area1 .about_area_wrap{
    width: 90%;
    max-width: 80rem;
    margin: 0 auto;
    margin-top: clamp(1.875rem,3.125vw,3.75rem);
}
.about_area1 .about_area_wrap .text_area {
    text-align: center;
    font-size: clamp(1rem,1.0417vw,1.25rem);
    

}
.about_area1 .about_area_wrap .text_area strong{
    font-size: clamp(1.0625rem,1.8229vw,2.1875rem);
    display: inline-block;
    

}
.about_img_area{
    margin-top: clamp(5rem,8.3333vw,10rem);
    display: grid;
    grid-template-columns: repeat(4,1fr);
    
    gap: 1.875rem;
    width: 90%;
    margin: 0 auto;
    margin-top: clamp(1.875rem,8.3333vw,10rem);
}
.about_img_area img{
    width: 100%;
    height: auto;
}


@media (max-width: 768px){
    .about_img_area{
        
        grid-template-columns: repeat(2,1fr);
    }
}

/* 關於我們下方 */
.about_area2{
    padding-top: clamp(2.1875rem,3.6458vw,4.375rem);
    width: 95%;
}
.about_area2 .about_area_wrap{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.about_area2 .about_area_wrap .about_left{
    width: 40%;
    left: 0;
    animation: about_move_3 60s linear infinite;
    
}
.about_area2 .about_area_wrap .about_right{
    width: 58%;
    
}

.about_area2 .about_area_wrap .about_left img{
    width: 100%;
    height: auto;

}
.about_area2 .about_area_wrap .about_right .text_area {
    text-align: center;
    font-size: clamp(1rem,1.0417vw,1.25rem);
    
    
}
.about_area2 .about_area_wrap .about_right .text_area strong{
    font-size: clamp(1.0625rem,1.8229vw,2.1875rem);
    display: inline-block;
    color: var(--seventh_color);
    
    
}



@media (max-width: 990px){
    .about_area2 .about_area_wrap .about_left,
    .about_area2 .about_area_wrap .about_right{
        width: 95%;
       
        
    }

    .about_area2 .about_area_wrap{
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
    }
    .about_area2 .about_area_wrap .about_right{
        margin-top: 1.875rem;
       
        
    }
}