/* 使用到的 */

.d-flex {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex-wrap: wrap;
}

.d-flex li {
    width: 25%;
}

.d-flex li:nth-child(1) {
    margin-left: 25%;
}

.d-flex li:nth-child(2) {
    margin-right: 25%;
}

.imgChange {
    width: 100%;
    cursor: pointer;
    /* filter: grayscale(1); */
    opacity: 0.8;
    scale: 0.8;
    transition: all 0.3s;
    /* border: 1px solid #000; */
}

.imgChange:hover {
    scale: 1;
    /* filter: grayscale(0); */
    opacity: 1;
}

.active {
    scale: 1;
    /* filter: grayscale(0); */
    opacity: 1;
}

.imgShow {
    margin: 0 auto;
    object-fit: contain;
    width: 100%;
    /* height: 50%; */
}


/* 圖片顯示定位 */

.imgShowControl_01 {
       width: 100%;
    left: 50%;
    transform: translateX(-50%);
    top: 0%;
    z-index: 1;
}




/* 圖片列表定位 */

.imgShowItem_01 {
       width: 95%;
    left: 50%;
    transform: translateX(-50%);
    top: 8%;
    justify-content: space-between;
    z-index: 1;
}


.sliderBox {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.fingerControl {
    width: 84%;
    left: 55%;
    transform: translateX(-50%);
    bottom: -1%;
    z-index: 1;
    justify-content: space-around;
}

.fingerControl img {
    width: 70%;
}

.Box1 {
    background-image: url(../images/sliderShow/thing_A_small_01.png);
}

.Box1:hover {
    background-image: url(../images/sliderShow/thing_A_small_02.png);
}

.Box2 {
    background-image: url(../images/sliderShow/thing_B_small_01.png);
}

.Box2:hover {
    background-image: url(../images/sliderShow/thing_B_small_02.png);
}

.Box3 {
    background-image: url(../images/sliderShow/thing_C_small_01.png);
}

.Box3:hover {
    background-image: url(../images/sliderShow/thing_C_small_02.png);
}

.Box4 {
    background-image: url(../images/sliderShow/thing_D_small_01.png);
}

.Box4:hover {
    background-image: url(../images/sliderShow/thing_D_small_02.png);
}

.Box5 {
    background-image: url(../images/sliderShow/thing_E_small_01.png);
}

.Box5:hover {
    background-image: url(../images/sliderShow/thing_E_small_02.png);
}

.Box6 {
    background-image: url(../images/sliderShow/thing_F_small_01.png);
}

.Box6:hover {
    background-image: url(../images/sliderShow/thing_F_small_02.png);
}