@import url(style_funeral_services_in.css);
.right{
    border-left: 2px solid var(--fourth_color);
    padding-left: 5px;
}
/* 檔案下載區塊 */
.file_fixed{
    
}
.file_fixed .banner_btn_file{
        width: 100%;
        max-width:unset;
        padding: .625rem;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: .625rem;
        color:#fff;
        font-size: clamp(1rem,1.0417vw,1.25rem);
        aspect-ratio: 516 / 106;
        box-sizing: border-box;
        background-color:#604f47;
    
}
.file_fixed .banner_btn_file .banner_btn_icon{
        max-width: 1.875rem;
    
}

.banner_btn_file .banner_btn_num{
    text-align: center;
}
.banner_btn_file .banner_btn_num > span{
    display: inline-block;
    font-size: 1rem;
    margin-top: 5px;
}


.file_fixed.file_mb{
    display: none;
}

@media (max-width: 990px){
    .right{
        padding-left: 0;
        border-left:0px;
    }
    .file_fixed{
        display: none;
    }
    .file_fixed.file_mb{
        display: block;
    }
    .file_fixed.file_mb .banner_btn_file{
        font-size: 2.8125rem;
    }
    .file_fixed.file_mb .banner_btn_icon{
        max-width: 3.125rem;
    }
}


@media (max-width: 640px){
    .file_fixed.file_mb .banner_btn_file{
        font-size: 1.875rem;
    }
    .file_fixed.file_mb .banner_btn_icon{
        max-width: 2.5rem;
    }
}
@media (max-width: 510px){
    .file_fixed.file_mb .banner_btn_file{
        font-size: 1.25rem;
    }
    .file_fixed.file_mb .banner_btn_icon{
        max-width: 1.25rem;
    }
}
/* 手機區塊 */
.phone_fixed{
    
}
.phone_fixed .banner_btn_phone{
        width: 100%;
        max-width:unset;
        padding: .625rem;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: .625rem;
        color: var(--primary_color);
        font-size: clamp(1rem,1.0417vw,1.25rem);
        aspect-ratio: 516 / 106;
        box-sizing: border-box;
    
}
.banner_btn_phone{
    background-color: var(--fourth_color);
}
.banner_btn_icon{
    width: 100%;
    max-width: 50px;
}

/* 在螢幕放大150%且寬度大於991時，套用這裡的特定樣式 */ 
@media screen and (min-width: 991px) and (min-height: 500px) and 
(max-height: 1000px) and (-webkit-min-device-pixel-ratio: 1.5) and 
(-webkit-max-device-pixel-ratio: 1.74), only screen and (min-resolution: 150dpi) and 
(max-resolution: 174dpi) { 
    .banner_btn_icon{
        width: 100%;
        max-width: 25px;
    }

}

.banner_btn_icon span{
    position: relative;
    display: block;
    padding-top: 100%;
}
.banner_btn_icon span  img{
    width:100%;
    height:auto;
    transition: all 0.3s ease-out;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    float: none;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    transition: all 0.3s ease-out;
}


@media (max-width: 990px){
    .phone_fixed{
        display: none;
    }
}
/* 右側上方 */
.service_top{
    display: grid;
    grid-template-columns: 50% 50%;
    gap: 1.25rem;
    align-items: center;
    margin-bottom: clamp(.625rem,1.0417vw,1.25rem);
}
.service_img{
    
    width: 100%;
}
.service_img span{
    display: block;
    position: relative;
    padding-top: 133.3%;

}
.service_img span img{
    width:100%;
    height:auto;
    transition: all 0.3s ease-out;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    float: none;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    transition: all 0.3s ease-out;
}

.service_right .service_title{
    font-size: clamp(1.25rem,2.0833vw,2.5rem);
    padding-bottom: .625rem;
    border-bottom: 2px solid var(--fourth_color);
    color: var(--seventh_color);
    font-weight: 900;
}
.service_right .service_info{
    margin-top: clamp(.625rem,1.0417vw,1.25rem);
}
.service_price{
    
    width: 100%;
    max-width: 640px;
    margin-top: clamp(.625rem,1.0417vw,1.25rem);
    
}
.service_price_area{
    
    padding: clamp(.625rem,1.0417vw,1.25rem);
    background-color: var(--seventh_color);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    
}
.service_price_area .service_price_left{
    font-size: 1rem;
    color: #fff;
    width: 50%;
    border-right: 1px solid var(--fourth_color);
    line-height: 1.5;
}
.service_price_area .service_price_right_area{
    font-size: 1rem;
    color: var(--fourth_color);
    width: 50%;
    padding-left: 5px;
    
}
.service_price_area .service_price_right_area .sub_title{
    text-align: left;
    color: #fff;
    font-size: .875rem;
    margin-bottom: 10px;
    
}
.service_price_area .service_price_right_area .service_price_text{
    color: var(--fourth_color);
    font-size: clamp(1.25rem,2.0833vw,2.5rem);
    font-weight: 800;
}

@media (max-width: 990px){
    .service_top{
        display: grid;
        grid-template-columns: unset;
        gap: 20px;
        align-items: center;
    }
}

/* 右側下方大標 */
.service_bottom .right_title strong{
    background-color: #fff;
    color: var(--primary_color);
    font-size: clamp(1.25rem,2.0833vw,2.5rem);
}
/* 右側下方資訊區塊 */
.service_list_top{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .625rem;
}

.service_list_left,
.service_list_right{
    width: 50%;
}
.service_list_left .service_list_img{
    width: 100%;
    /* aspect-ratio: 568 / 378; */
}
.service_list_left .service_list_img span{
    position: relative;
    display: block;
    padding-top: 66.54%;
    
}
.service_list_left .service_list_img span img{
    width:100%;
    height:auto;
    transition: all 0.3s ease-out;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    float: none;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    transition: all 0.3s ease-out;
}

.service_list_right{
    
}
.service_list_right .service_list_title{
    font-size: clamp(1rem,1.5625vw,1.875rem);
    color: var(--seventh_color);
    border-top: 2px solid var(--fourth_color);
    padding: .625rem 0;
}
/* table區 */

.service_list_bottom {
    margin: .625rem 0;
    max-width: 93.75rem;
    overflow-x: auto;
    
}
.service_list_bottom table{
    table-layout: fixed;
    min-width: clamp(21.875rem,36.4583vw,43.75rem);
    box-sizing: border-box;
}
.service_list_bottom table tr {
    width: 100%;
    
}
.service_list_bottom table tr td{
    background-color: #fcebe4;
    padding: clamp(.625rem,1.0417vw,1.25rem);
    border-bottom: 5px solid #fff;
    font-size: .875rem;
    
}
.service_list_bottom table tr td.price{
    color: var(--sixth_color);
    text-align: center;
    font-size: .875rem;
}
.service_list_bottom table tr td.name,
.service_list_bottom table tr td.num{
    width: 10%;
    text-align: center;
}
.service_list_bottom table tr td.name{
   font-size: clamp(1rem,1.0417vw,1.25rem);
}
.service_list_bottom table tr td.price{
    width: 15%;
}

/* 在螢幕放大150%且寬度大於991時，套用這裡的特定樣式 */ 
@media screen and (min-width: 991px) and (min-height: 500px) and 
(max-height: 1000px) and (-webkit-min-device-pixel-ratio: 1.5) and 
(-webkit-max-device-pixel-ratio: 1.74), only screen and (min-resolution: 150dpi) and 
(max-resolution: 174dpi) { 
    .service_list_bottom table tr td.name,
    .service_list_bottom table tr td.num{
        width: 8%;
        
    }
    .service_list_bottom table tr td.price{
        width: 10%;
    }
}

@media (max-width: 990px){

}
/* 服務流程 */
.service_flow_bg{
    background-color: var(--fourth_color);
    padding: .625rem 0; 
    position: relative;
}
.service_flow_bg .flow_title{
    color: #fff;
    font-size: clamp(1rem, 1.5625vw, 1.875rem);
    text-align: center;
    font-weight: 600;

}
.sub_flow_title{
    color: var(--seventh_color);
    font-size: clamp(1rem, 1.5625vw, 1.5625rem);
    margin-bottom: .625rem;
    text-align: center;
    font-weight: 600;
}
.service_flow_area{
    margin: clamp(.625rem,1.0417vw,1.25rem) clamp(1.25rem,2.0833vw,2.5rem);
}
/* 輪播箭頭 */
.service_flow_area .swiper-button-next,
.service_flow_area .swiper-button-prev{
   position: relative;
   top: unset;
   left: unset;
   transform: unset;
}
/* 輪播箭頭 */
.service_flow_area .swiper-button-prev{
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   left: 10px;
}
.service_flow_area .swiper-button-next{
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translate(-50%) rotate(180deg);
    
    

}
.service_flow_area .swiper-pagination .swiper-pagination-bullet-active{
    background: #fff;
}


@media (max-width: 990px){
    /* 輪播箭頭 */
    .service_flow_area .swiper-button-next,
    .service_flow_area .swiper-button-prev{
        display: block;
    }
    .service_flow_area .swiper-button-next{
        right: 0;
    }
    .service_flow_area .swiper-button-prev{
        left: 0;
    }
}

/* 下方網編 */
.service_page_bottom{
    padding: clamp(.625rem,1.0417vw,1.25rem) 0;
}
.service_page_bottom .service_list_top{
    display: block;
}
.service_page_bottom .service_list_title{
    font-size: clamp(1.25rem, 2.0833vw, 2.5rem);
    padding-bottom: .625rem;
    border-bottom: 2px solid var(--fourth_color);
    color: var(--seventh_color);
    font-weight: 900;
    text-align: center;
    margin-bottom: clamp(.625rem,1.0417vw,1.25rem);
}
.bottom_btn_area{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 5px;
}
.bottom_btn_area .bottom_btn{
    width: 48%;
    flex: 1;
    
    
}
.bottom_btn_area .bottom_btn img{
    width: 100%;
    /* max-width: 31.25rem; */
    height: auto;
    aspect-ratio: 520 / 105;
}
.service_list_bottom .service_list_title{
        font-size: clamp(1.25rem, 2.0833vw, 2.5rem);
        border-bottom: none;
        color: var(--primary_color);
        font-weight: 900;
        text-align: center;
        margin-bottom: clamp(.625rem,1.0417vw,1.25rem);
        margin-top: 5px;
}
.service_list_bottom .service_price{
    margin: 0 auto;
    margin-top: 10px;
    max-width: unset;
    
}

@media (max-width: 640px){
    .bottom_btn_area{
        flex-direction: column;
        
    }
    .service_price_area{
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: .625rem;
    }
    .service_price_area .service_price_left{
        border-right: none;
        border-bottom: 1px solid var(--fourth_color);
        width: 100%;
        padding-bottom: 10px;
    }
    .service_price_area .service_price_right_area{
        width: 100%;
        display: flex;
        align-items: center;
        gap: .3125rem;
    }
    .service_price_area .service_price_right_area .sub_title{
        text-align: left;
        margin-bottom: 0;
    }
    .bottom_btn_area .bottom_btn{
        width: 100%;

    }
}