@charset "utf-8";
html,
body {
    height: 100%;
    /*宣告高支援100%*/
}

.carousel {
    height: 100%;
}

.item,
.active,
.carousel-inner {
    height: 100%;
}


/* 
寬度固定 */

.fixed-width-carousel .carousel {
    height: 755px;
}

.half {
    /* 矮版 */
    /* height: 375px; */
    height: 650px;
}

.fixed-width {
    /* 寬度固定 */
    max-width: 1140px;
    max-height: 755px;
    margin: 0 auto;
}

@media (max-width:1200px) {
    .fixed-width-carousel .carousel {
        height: 600px;
    }
}


/* 
寬度滿版 */

.fill {
    width: 100%;
    height: 100%;
    background-position: center center;
    background-size: cover;
}

.carousel-item {
    height: 100%;
    /*高度需設100%輪播圖滾動才會連續, 設vh背景圖無法等比例縮放*/
    min-height: 350px;
    background: no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#carousel1 .left.carousel-control img,
#carousel1 .right.carousel-control img {
    position: absolute;
    top: 45%;
}

#carousel1 .left.carousel-control img {
    right: 50%;
}

#carousel1 .right.carousel-control img {
    left: 50%;
}

@media (max-width:1400px) {
    .carousel {
        height: 600px;
        /*margin-top: 70px;*/
    }
    .half {
        height: 300px;
    }
}

@media (max-width:992px) {
    .carousel,
    .fixed-width-carousel .carousel {
        height: 550px;
    }
    .half {
        height: 275px;
    }
    #carousel1 .left.carousel-control img,
    #carousel1 .right.carousel-control img {
        transform: scale(0.8);
    }
    #carousel1 .left.carousel-control img {
        right: 30%;
    }
    #carousel1 .right.carousel-control img {
        left: 30%;
    }
}

@media (max-width:768px) {
    .carousel,
    .fixed-width-carousel .carousel {
        height: 450px;
    }
    .half {
        /* height: 225px; */
        height: 350px;
    }
    #carousel1 .left.carousel-control img,
    #carousel1 .right.carousel-control img {
        transform: scale(0.6);
    }
    #carousel1 .left.carousel-control img {
        right: 20%;
    }
    #carousel1 .right.carousel-control img {
        left: 20%;
    }
}

@media (max-width:560px) {
    .half {
        /* height: 180px; */
        height: 250px;
    }
    .half .carousel-item {
        min-height: 180px;
    }
}