/*================主體================*/
.carousel {
    position: relative;
    width: 100%;
    height: 440px;
}

.inner {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 404px;
    border-top: 2px solid #661f00;
    border-bottom: 2px solid #661f00;
}

.inner::after {
    display: block;
    clear: both;
    content: "";
}
/*===========================================*/

/*=============顯示區內的圖片=============*/
.innerpic {    
    width: 1000px;
}
.innercrbg {    
    width: 100%;
    height: 100%;
    background: url(../flexbox_card_bgw.png) repeat;
    background-size: 10%;
}

/*=========圖片下背景色=========*/
.carousel-item:nth-of-type(1) {
    background: linear-gradient( to right top, #406941 30%, #013d95 70%);
}
.carousel-item:nth-of-type(2) {
    background: linear-gradient( to right, #08151e 20%, #383e72 40%, #246daa 70%);
}
.carousel-item:nth-of-type(3) {
    background: linear-gradient( to right top, #ddf7e4 10%, #f7f7c6 90%);
}
.carousel-item:nth-of-type(4) {
    background: linear-gradient( to right, #259798 0%, #056087 100%);
}
.carousel-item:nth-of-type(5) {
    background: linear-gradient( to left top, #04081a 0%, #020d30 100%);/*010617+020206*/
}
.carousel-item:nth-of-type(6) {
    background: linear-gradient( to top, #efbf00 30%, #fff691 60%, #fff1a4 90%);
}
/*===============================*/
/*======================================*/

/*===================顯示區===================*/
.carousel-item {
    position: relative;
    display: none;
    float: left;
    width: 100%;
    height: 400px;
    margin-right: -100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: transform .6s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
    .carousel-item {
        transition: none;
    }
}

.carousel-item-next, .carousel-item-prev, .carousel-item.active {
    display: block;
}
.active.carousel-item-end, .carousel-item-next:not(.carousel-item-start) {
    transform: translateX(100%);
}
.active.carousel-item-start,.carousel-item-prev:not(.carousel-item-end) {
    transform: translateX(-100%);
}
/*===========================================*/

/*=================下方按鈕=================*/
.carousel-indicators {
    display: flex;
    width: 100%;
    height: 50px;
    padding: 12px 0px 0px 0px;
    position: absolute;
    bottom: -10px;
    justify-content: center;
    list-style: none;
    z-index: 2;
    /*background-color:  #056087;*/
}
.carousel-indicators [data-bs-target] {
    box-sizing: content-box;
    flex: 0 1 auto;
    width: 10px;
    height: 10px;
    margin-left: 10px;
    margin-right: 10px;
    cursor: pointer;
    border-radius: 50%;
    background-color: #ffffff;
    border: 2px solid #000000;
    opacity: .5;
    transition: opacity .6s ease;
}

.carousel-indicators .active {
    background-color: #e5ff00;
    opacity: 1;
}
/*===========================================*/

/*================左右按鈕================*/
.control_left, .control_right {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 8%;
    z-index: 3;
}
@media (prefers-reduced-motion: reduce) {
    .control_left, .control_right {
        transition: none;
    }
}

.control_left:focus, .control_left:hover, .control_right:focus, .control_right:hover {
    background-color: #ffffff85;
    text-decoration: none;
    outline: 0;
    opacity: .5;
    transition: opacity 1s ease;
}

.control_left { left: 0;}
.control_right { right: 0;}

.control_left_pic, .control_right_pic {
    width: 37px;
}
.control_left_pic img, .control_right_pic img {
    width: 100%;
}
/*=======================================*/


/*================變形================*/
@media (min-width: 1015px) and (max-width: 1290px) {
    .carousel {
        height: 430px;
    }
    .inner {
        height: 400px;
    }
    .innerpic {
        width: 95%;
    }
    .carousel-indicators {
    bottom: -15px;
    }
}
@media (min-width: 800px) and (max-width: 1015px) {
    .carousel {
        height: 370px;
    }
    .inner {
        height: 300px;
    }
    .innerpic {
        width: 95%;
    }
    .carousel-indicators {
        bottom: 5px;
    }
    .control_left, .control_right {
        align-items: flex-end;
        top: 300px;
        height: 70px;
    }
}
@media (min-width: 510px) and (max-width: 800px) {
    .carousel {
        height: 300px;
    }
    .inner {
        height: 260px;
    }
    .innerpic {
        width: 95%;
    }
    .carousel-indicators {
        bottom: -10px;
    }
    .control_left, .control_right {
        align-items: flex-end;
        top: 237px;
        height: 70px;
    }
    .control_left_pic, .control_right_pic {
        width: 27px;
    }
}
@media (max-width: 510px) {
    .carousel {
        height: 230px;
    }
    .inner {
        height: 216px;
    }
    .innerpic {
        width: 100%;
    }
    .carousel-indicators {
        bottom: 15px;
    }
    .control_left, .control_right {
        align-items: flex-end;
        top: 140px;
        height: 70px;
    }
}
/*=====================================*/