/*輪播畫面*/
.bacarousel ol {
    bottom: 2%;
    left: 20%;
}

.carousel-indicators li {
    width: 12px;
    height: 12px;
    margin: 1px 3px;
}

.carousel-indicators .active {
    margin: 1px 3px;
}

/*產品介紹*/
.ProductsArea {
    position: relative;
    text-align: center;
}

    .ProductsArea p {
        font-size: 2.4em;
        font-weight: bold;
        color: #6A6A6A;
        margin: 3% 0px;
    }

    .ProductsArea div {
        padding: 0px;
        margin: 0px;
    }

        .ProductsArea div div {
            position: relative;
            min-height: 100px;
            padding: 0px;
            margin: 0px;
        }

            .ProductsArea div div img {
                width: 100%;
            }

    .ProductsArea .title {
        position: absolute;
        top: 30%;
        left: 10%;
        width: 80%;
        font-weight: bold;
        font-size: 1.4em;
        color: #950000;
    }

    .ProductsArea .description {
        position: absolute;
        top: 80%;
        left: 10%;
        width: 80%;
        font-size: 1em;
        color: #000000;
    }

@media (max-width: 1200px) {
    .ProductsArea .title {
        position: absolute;
        top: 15%;
        left: 5%;
        width: 90%;
        font-size: 1.4em;
    }

    .ProductsArea .description {
        position: absolute;
        top: 60%;
        left: 5%;
        width: 90%;
        font-size: 0.925em;
    }
}

@media (max-width: 991px) {
    .ProductsArea div div {
        position: relative;
        min-height: 50px;
        padding: 0px;
        margin: 1% 0px;
    }

        .ProductsArea div div img {
            width: 70%;
        }

    .ProductsArea .title {
        position: unset;
        font-size: 1.4em;
        width: 100%;
        margin: 0px;
        padding: 0% 3%;
    }

    .ProductsArea .description {
        position: unset;
        font-size: 1em;
        width: 100%;
        margin: 0px;
        padding: 1% 3%;
    }
}

@media (max-width: 768px) {
    .ProductsArea p {
        font-size: 1.8em;
    }

    .ProductsArea div div {
        min-height: 50px;
        padding: 0px;
        margin: 1% 0px;
    }

        .ProductsArea div div img {
            width: 70%;
        }

    .ProductsArea .title {
        position: unset;
        font-size: 1.2em;
        width: 100%;
        margin: 0px;
        padding: 0% 3%;
    }

    .ProductsArea .description {
        position: unset;
        font-size: 1em;
        width: 100%;
        margin: 0px;
        padding: 1% 3%;
    }
}

/*統計區塊*/
.StatisticsArea {
    position: relative;
    text-align: center;
    background-color: #000000;
    padding: 2% 0px;
}

    .StatisticsArea div {
        margin: 0% 25%;
    }

        .StatisticsArea div div {
            margin: 0%;
            padding: 0%;
        }

            .StatisticsArea div div div {
                margin: 0%;
                padding: 0%;
            }

                .StatisticsArea div div div:first-child {
                    border-right: 2px solid #fff;
                }

    .StatisticsArea .title {
        font-weight: bold;
        font-size: 2.4em;
        color: white;
    }

    .StatisticsArea .description {
        font-weight: bold;
        font-size: 1.4em;
        color: #FF6464;
    }

@media (max-width: 1200px) {
    .StatisticsArea div {
        margin: 0% 20%;
    }
}

@media (max-width: 991px) {
    .StatisticsArea div {
        margin: 0%;
    }

        .StatisticsArea div div div:first-child {
            border-right: 0px solid #fff;
        }
}

@media (max-width: 768px) {
    .StatisticsArea div {
        margin: 0%;
    }

    .StatisticsArea .title {
        font-size: 1.8em;
        color: white;
    }

    .StatisticsArea .description {
        font-weight: bold;
        font-size: 1.2em;
        color: #FF6464;
    }
}

/*客戶群*/
.ClientArea {
    position: relative;
    text-align: center;
    padding: 3%;
}

    .ClientArea p {
        font-size: 2.4em;
        font-weight: bold;
        color: #6A6A6A;
        padding: 2% 0px;
    }

    .ClientArea div div img {
        width: 100%;
        margin: 5%;
    }

@media (max-width: 768px) {
    .ClientArea p {
        font-size: 1.8em;
    }
}

/*影片*/
.VideoArea {
    position: relative;
    text-align: center;
    background-color: #000000;
    padding: 2%;
}

    .VideoArea div {
        padding: 2%;
    }

        .VideoArea div p {
            font-size: 1.2em;
            color: white;
            padding: 2%;
        }

        .VideoArea div img {
            width: 100%;
        }

.modal-dialog {
    width: 80%;
    height: 80%;
}

.modal-transparent .modal-content {
    background: transparent;
    border: 0;
    box-shadow: none;
    height: 100%;
}

    .modal-transparent .modal-content .modal-body {
        height: 90%;
    }

        .modal-transparent .modal-content .modal-body iframe {
            width: 100%;
            height: 100%;
        }

    .modal-transparent .modal-content .modal-header {
        border: 0;
        padding: 0;
        height: 10%;
    }

        .modal-transparent .modal-content .modal-header .close {
            font-size: 3em;
            font-weight: 100;
            color: white;
            opacity: 1;
            margin: 0;
            position: absolute;
            top: 0;
            right: 0;
            transform: translateX(100%);
            z-index: 10;
        }

/*縱向 css*/
@media (max-width: 1200px) and (orientation: portrait), (max-width: 768px) and (orientation: portrait) {
    /*螢幕縱向時影片垂直置中*/
    .modal-dialog {
        top: 50%;
        transform: translateY(-50%) !important;
        margin: 0;
        width: auto;
        height: auto;
    }

    .modal-transparent .modal-content .modal-header .close {
        transform: translateY(-100%);
    }
}

/*橫向 css*/
@media (max-width: 1200px) and (orientation: landscape), (max-width: 768px) and (orientation: landscape) {
    /*螢幕橫向時影片填滿整個畫面*/
    .modal-dialog {
        margin: 0;
        width: 100%;
        height: 100%;
    }

    .modal-transparent .modal-content .modal-header .close {
        transform: none;
    }
}

@media (max-width: 1200px), (max-width: 768px) {
    .modal-transparent .modal-content .modal-header .close {
        font-size: 2em;
        top: 10px;
        right: 10px;
    }
}

@media (max-width: 1200px) {
    .videoArea div p {
        font-size: 1.4em;
        line-height: 1.8em;
    }
}

@media (max-width: 768px) {
    .videoArea {
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
    }

        .videoArea div {
            flex: 1 0 100%;
        }

            .videoArea div p {
                font-size: 1.2em;
                line-height: 1.5em;
            }
}

/*技術支援*/
.QRcodeArea {
    position: relative;
    text-align: center;
    background-color: #DEDEDE;
    padding: 3% 25%;
}

    .QRcodeArea p {
        font-size: 2.4em;
        font-weight: bold;
        color: #6A6A6A;
        padding: 2% 0px;
    }

    .QRcodeArea div div img {
        width: 100%;
        margin-top: 12%;
        padding: 0% 2%;
    }

    .QRcodeArea div div p {
        font-size: 1.4em;
        font-weight: normal;
        color: #303030;
        padding: 4% 0px;
    }

@media (max-width: 768px) {
    .QRcodeArea p {
        font-size: 1.8em;
    }

    .QRcodeArea div div p {
        font-size: 1.2em;
    }
}

.OnlineLearningArea {
    text-align: center;
    position: relative;
    background-color: #DEDEDE;
}

    .OnlineLearningArea a {
        color: #000000;
    }

    .OnlineLearningArea div {
        padding: 0px;
        min-height: 300px;
    }

        .OnlineLearningArea div div img {
            width: 100%;
        }

        .OnlineLearningArea div div span {
            position: absolute;
            z-index: 2;
            width: 83%;
            top: 13%;
            left: 10%;
            text-align: left;
            font-size: 2.4em;
            font-weight: bold;
            color: #6A6A6A;
        }

        .OnlineLearningArea div div p {
            position: absolute;
            z-index: 2;
            width: 83%;
            top: 40%;
            left: 8%;
            text-align: left;
            font-size: 1.4em;
            color: #303030;
        }

        .OnlineLearningArea div div div p {
            position: absolute;
            z-index: 2;
            width: 20%;
            top: 75%;
            left: 68%;
            font-size: 1em;
            padding:1%;
            text-align: center;    
        }

@media (max-width: 1200px) {
    .OnlineLearningArea div {
        min-height: 230px;
    }

        .OnlineLearningArea div div span {
            top: 10%;
        }

        .OnlineLearningArea div div p {
            top: 38%;
        }

        .OnlineLearningArea div div div p {
            top: 80%;
        }
}

@media (max-width: 991px) {
    .OnlineLearningArea div {
        min-height: 300px;
    }

        .OnlineLearningArea div div span {
            top: 10%;
            left: 12%;
            width: 50%;
        }

        .OnlineLearningArea div div p {
            top: 38%;
            left: 10%;
            width: 80%;
        }

        .OnlineLearningArea div div div p {
            top: 75%;
        }
}

@media (max-width: 768px) {
    .OnlineLearningArea div {
        min-height: 230px;
    }

        .OnlineLearningArea div div span {
            top: 5%;
            left: 10%;
            font-size: 1.8em;
            width: 70%;
        }

        .OnlineLearningArea div div p {
            top: 30%;
            left: 8%;
            font-size: 1.2em;
            width: 84%;
        }

        .OnlineLearningArea div div div p {
            top: 78%;
            left: 70%;
        }

        .OnlineLearningArea div div img {
            padding-top: 15%;
        }
}

.InfoBtn {
    width: 10%;
    border: 0px solid #FFD800;
    background-color: #FFD800;
    border-radius: 17px;
}