/*================================================================================================================================================================================
         for Features-Icon >> 添加 Class Name "first-four-Features"(加到 .certification 認證 Icon 內) (控制 .Features-Icon.first-four-Features 的布局) 

                          (https://www.aten.com/ext_libraries/css/Features-Icon_Optimization/Features-Icon_Optimization.css)
==================================================================================================================================================================================*/

/* 控制 .Features-Icon.first-four-Features 的布局 */
/*.single-product .certification,*/
.single-product .certification.with-Features-Icon {
    display: flex;
    flex-wrap: wrap; /* 若 items 過多就換行 */
    align-items: center;/* 項目垂直置中 */
}

/* order: 1 >> 非 .Features-Icon 元素保持在最前面 (控制 .Features-Icon.first-four-Features 的布局) */
/* .single-product .certification > div:not(.Features-Icon), */
.single-product .certification.with-Features-Icon > div:not(.Features-Icon) {
    order: 1; /* 非 .Features-Icon 排第一 */
}

/* order: 2 >> 確保(前四個) .Features-Icon  移至第二順位 (不要跟其他 Icon 混在一起排列) (控制 .Features-Icon.first-four-Features 的布局) */
.single-product .certification .Features-Icon.first-four-Features {
    width: 25%; /* 4 個一排布局 */
    order: 2; /* .Features-Icon (前四個) 排第二 */
}

/* 【沒包】 div.Features-Icon-Container >> .Add-Border-Top (前四個) >> 刪除分隔線 Top (除 .Features-Icon 沒有其它 Icon) (控制 .Features-Icon.first-four-Features 的布局) */
.single-product .certification .Features-Icon.first-four-Features.Add-Border-Top {
    border-top: 1px solid #eaeaea; /* 跟上方非 .Features-Icon 距離 (有線條區隔) */
}

/* 【沒包】 div.Features-Icon-Container >> .Add-Border-Top (前四個) >> 刪除分隔線 Top (除 .Features-Icon 沒有其它 Icon) (控制 .Features-Icon.first-four-Features 的布局) */
.single-product .certification .Features-Icon.first-four-Features.Add-Border-Top {
    padding-top: 1.5% !important; /* 跟上方非 .Features-Icon 距離 (第一排 .Features-Icon) */

    padding-top: 2.3% !important; /* 跟上方非 .Features-Icon 增加距離 (第一排 .Features-Icon) */
    margin-top: 2.5% !important;
}

/* 【包在】 div.Features-Icon-Container (新建 Div 將所有 Features-Icon 置入) >> 將分隔線加在 div.Features-Icon-Container */
.single-product .certification .Features-Icon-Container {
    border-top: 1px solid #eaeaea;
    padding-top: 2.3% !important;
    margin-top: 2.5% !important;

    width: 100%;
}

/* 【包在 >> 僅 Features-Icon 無其它 Icon】 div.Features-Icon-Container (新建 Div 將所有 Features-Icon 置入) >> 刪除 div.Features-Icon-Container 分隔線 */
.single-product .certification .Features-Icon-Container.No-Border-Top {
    border-top: unset !important;
    padding-top: unset !important;
    margin-top: unset !important;
}

/* 【包在】 div.Features-Icon-Container >> 將 .Add-Border-Top 分隔線 & 距離高度刪除 */
.single-product .certification .Features-Icon-Container .Features-Icon.first-four-Features.Add-Border-Top {
    border-top: none;
    padding-top: unset !important;
    margin-top: unset !important;
}


/* 三欄時【包在】 div.Features-Icon-Container (新建 Div 將所有 Features-Icon 置入) >> 將分隔線加在 div.Features-Icon-Container */
.single-product .col-md-4 .certification .Features-Icon-Container {
    margin-top: 4.5% !important;
}


/* order: 3 >> 確保(非前四個) .Features-Icon 移至最後 (控制 .Features-Icon.first-four-Features 的布局) */
.single-product .certification .Features-Icon:not(.first-four-Features) {
    order: 3;  /* .Features-Icon (非前四個) 排第三 */
}

/* 確保前四個 .Features-Icon 之後的元素另起一行 (控制 .Features-Icon.first-four-Features 的布局) */
.single-product .certification .Features-Icon.first-four-Features:nth-child(4n) {
    margin-right: auto; /* 製造斷點 */
}

/* 確保圖片在其容器內正確顯示 (控制 .Features-Icon.first-four-Features 的布局) */
.single-product .certification .Features-Icon img {
    width: 100%;
    height: auto;

    padding: 3.5% 3%; /* 原始圖片有縮邊 */
    padding: 4.5% 5%; /* 原始圖片無縮邊 */
}





/* 1300 以上 */
@media (min-width: 1300px) {

    /* 固定有線時的高度一致 >> 防止分隔線高低不同 (因為來源 img 圖片大小不同) */
    .single-product .certification .Features-Icon img {
    height: auto;
    height: 53px !important;/* 因為來源 img 圖片大小不統一 */
    height: 55px !important;/* 因為來源 img 圖片大小不統一 */
    }

    /* 【三欄時】 固定有線時的高度一致 >> 防止分隔線高低不同 (因為來源 img 圖片大小不同) */
    .single-product .col-md-4 .certification .Features-Icon img {
    height: auto;
    height: 43px !important;/* 因為來源 img 圖片大小不統一 */
    }

    /* 【三欄時】 三個一排 */
    .single-product .col-md-4 .certification .Features-Icon {
    width: 31% !important;
    }

    /* 【三欄時】 三個一排 */
    .single-product .col-md-4 .certification .Features-Icon img {
    height: 51px !important;
    height: 54px !important;
    }

    /* 【三欄時】 三個一排 */
    .single-product .col-md-4 .certification .Features-Icon.first-four-Features:nth-child(4n) {
    margin-right: unset !important;
    }

      

}


/* Bowei 筆電寬螢幕 */
@Media (min-width: 1281px) and (max-width: 1366px) {

    /* Icon 大小不同時 >> 會高高低低 (同比例也會) (排除 .Features-Icon) */
    .certification .vcenter img:not(.vcenter.Features-Icon img), 
    .certification .vcenter:not(.vcenter.Features-Icon) {
    max-height: 65px;
    }

    /* 5 個一排布局 (All .Features-Icon) */
    .single-product .certification .Features-Icon.after-four-Features,
    .single-product .certification .Features-Icon.first-four-Features
    .single-product .certification .Features-Icon {
    width: 20% !important;/* 4 列布局 */
    width: 25% !important;/* 5 列布局 */
    }


    /* 5 個一排布局 (前四個 .Features-Icon) >> 變第一排 
    .single-product .certification .Features-Icon.Features-1,
    .single-product .certification .Features-Icon.first-four-Features {
    padding-top: 2.3% !important;
    border-top: 1px solid #eaeaea;
    margin-top: 2.5%;
    }
    */

    /* 固定有線時的高度一致 >> 防止分隔線高低不同 (因為來源 img 圖片大小不同) */
    .single-product .certification .Features-Icon img {
    height: auto;
    height: 53px !important;/* 因為來源 img 圖片大小不統一 */
    height: 62px !important;/* 因為來源 img 圖片大小不統一 */
    }

    /* 【三欄時】 固定有線時的高度一致 >> 防止分隔線高低不同 (因為來源 img 圖片大小不同) */
    .single-product .col-md-4 .certification .Features-Icon img {
    height: auto;
    height: 42px !important;/* Width:25% >> 因為來源 img 圖片大小不統一 */
    }

    /* 【三欄時】 三個一排 */
    .single-product .col-md-4 .certification .Features-Icon img {
    height: 51px !important; /* width:31% */
    height: 53px !important; /* width:31% */
    }

}


/* 小屏幕適配 */
@media (max-width: 767px) {

    /* 2 個一排布局 (All .Features-Icon) */
    .single-product .certification .Features-Icon.after-four-Features,
    .single-product .certification .Features-Icon.first-four-Features,
    .single-product .certification .Features-Icon {
    width: 50% !important;/* 4 列布局 */
    }


    /* 【沒包 + 包】 order: 2 >> 確保(前四個) .Features-Icon 刪除分隔線 + 距離高度 */
    .single-product .certification .Features-Icon-Container .Features-Icon.first-four-Features.Add-Border-Top/*【包在】*/, 
    .single-product .certification.with-Features-Icon .Features-Icon-Container .Features-Icon.first-four-Features.Add-Border-Top/*【包在】*/,
    .single-product .certification.with-Features-Icon .Features-Icon-Container .Features-Icon.Add-Border-Top/*【包在】*/,
    .single-product .certification .Features-Icon-Container .Features-Icon.first-four-Features.Add-Border-Top/*【包在】*/, 
    .single-product .certification .Features-Icon-Container .Features-Icon.Add-Border-Top/*【包在】*/,

    .single-product .certification .Features-Icon.first-four-Features.Add-Border-Top/*【沒包】*/, 
    .single-product .certification.with-Features-Icon .Features-Icon.first-four-Features.Add-Border-Top/*【沒包】*/,
    .single-product .certification.with-Features-Icon .Features-Icon.Add-Border-Top/*【沒包】*/,
    .single-product .certification .Features-Icon.first-four-Features.Add-Border-Top/*【沒包】*/, 
    .single-product .certification .Features-Icon.Add-Border-Top/*【沒包】*/ {
    border-top: unset !important; /* 前四個 >> 變成 2 個一排布局 */
    padding-top: unset !important;
    margin-top: unset !important;
    }

    /* 【沒包】 div.Features-Icon-Container >>  2 個一排布局 (前 2 個 .Features-Icon) >> 變第一排 */
    .single-product .certification.with-Features-Icon .Features-Icon-Container, 
    .single-product .certification .Features-Icon-Container, 

    .single-product .certification .Features-Icon.first-four-Features.Add-Border-Top, 

    .single-product .certification.with-Features-Icon .Features-Icon.Features-2.Add-Border-Top, 
    .single-product .certification.with-Features-Icon .Features-Icon.Features-1.Add-Border-Top, 
    .single-product .certification .Features-Icon.Features-2.Add-Border-Top, 
    .single-product .certification .Features-Icon.Features-1.Add-Border-Top {
    border-top: 1px solid #eaeaea !important;/* 跟上方非 .Features-Icon 距離 (有線條區隔) */
    }

    /* 【沒包】 div.Features-Icon-Container >>  2 個一排布局 (前 2 個 .Features-Icon) >> 變第一排 */
    .single-product .certification .Features-Icon.first-four-Features.Add-Border-Top, 

    .single-product .certification.with-Features-Icon .Features-Icon.Features-2.Add-Border-Top, 
    .single-product .certification.with-Features-Icon .Features-Icon.Features-1.Add-Border-Top, 
    .single-product .certification .Features-Icon.Features-2.Add-Border-Top, 
    .single-product .certification .Features-Icon.Features-1.Add-Border-Top {
    padding-top: 2.3% !important;
    margin-top: 2.5%;
    }

    /* 【包在】 div.Features-Icon-Container >>  2 個一排布局 (前 2 個 .Features-Icon) >> 變第一排 */
    .single-product .certification.with-Features-Icon .Features-Icon-Container, 
    .single-product .certification .Features-Icon-Container {
    border-top: 1px solid #eaeaea !important;/* 跟上方非 .Features-Icon 距離 (有線條區隔) */
    }


    /* 【包在】 div.Features-Icon-Container >>  2 個一排布局 (前 2 個 .Features-Icon) >> 變第一排 */
    .single-product .certification .Features-Icon-Container .Features-Icon.first-four-Features.Add-Border-Top, 
    .single-product .certification.with-Features-Icon .Features-Icon-Container .Features-Icon.first-four-Features.Add-Border-Top,
    .single-product .certification.with-Features-Icon .Features-Icon-Container .Features-Icon.Add-Border-Top,
    .single-product .certification .Features-Icon-Container .Features-Icon.first-four-Features.Add-Border-Top, 
    .single-product .certification .Features-Icon-Container .Features-Icon.Add-Border-Top {
    border-top: unset !important; /* 前四個 >> 變成 2 個一排布局 */
    padding-top: unset !important;
    margin-top: unset !important;
    }

}