/*雲端智慧交通控制主題*/
.ThemeArea {
    position: relative;
}

    .ThemeArea img {
        width: 100%;
    }

    .ThemeArea hr {
        margin: 0px;
        height: 0.2em;
        border: none;
        border-top: none;
    }

    .ThemeArea .content {
        position: absolute;
        top: 38%;
        left: 6%;
    }

        .ThemeArea .content p {
            text-align: center;
            color: #FFFFFF;
            font-weight: bold;
            font-size: 2em;
            margin: 0px;
        }

        .ThemeArea .content div {
            text-align: center;
            color: #FFFFFF;
            background-color: rgba(35, 46, 46, 0.77);
            font-size: 1.2em;
            padding: 1% 0px 3% 0px;
        }

@media (max-width: 1200px) {
    .ThemeArea .content {
        width: 40%
    }
}

@media (max-width: 991px) {
    .ThemeArea .content {
        width: 44%
    }
}

@media (max-width: 768px) {
    .ThemeArea .content {
        width: 100%;
        left: 0px;
    }

        .ThemeArea .content p {
            font-size: 1.4em;
        }

        .ThemeArea .content div {
            font-size: 1em;
        }
}

/*智慧化動態號誌解決方案*/
.SolutionArea {
    position: relative;
    padding: 4% 2%;
    background-image: url(/Content/images/trafficControl/background.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
}

    .SolutionArea .title {
        width: 90%;
        font-size: 2em;
        font-weight: bold;
        color: #FFFFFF;
        padding: 28% 0px 0px 10%;
    }

    .SolutionArea .description {
        width: 90%;
        font-size: 1.125em;
        font-weight: normal;
        color: #FFFFFF;
        padding: 3% 0px 0px 10%;
    }

@media (max-width: 1200px) {
    .SolutionArea .title {
        padding: 15% 0px 0px 10%;
    }
}

@media (max-width: 991px) {
    .SolutionArea {
        padding: 4%;
        background-image: url(/Content/images/trafficControl/background_xs.jpg);
    }

        .SolutionArea .title {
            width: 100%;
            padding: 5% 5% 0px 5%;
        }

        .SolutionArea .description {
            width: 100%;
            padding: 0px 5% 5% 5%;
        }
}

@media (max-width: 768px) {
    .SolutionArea {
        padding: 6% 1%;
    }

        .SolutionArea .title {
            font-size: 1.4em;
        }

        .SolutionArea .description {
            font-size: 1em;
        }
}

/*智慧動態號誌策略計劃*/
.StragetyArea {
    text-align: center;
    position: relative;
    padding: 4% 0px;
    background-image: url(/Content/images/trafficControl/stragety/background.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
}

    .StragetyArea div div p {
        font-weight: bold;
        font-size: 1.8em;
        color: #FFFFFF;
    }

    .StragetyArea div div hr {
        margin: 0px;
        height: 0.2em;
        border: none;
        border-top: none;
        margin: 0px 20%;
    }

    .StragetyArea div div img {
        padding: 2% 5%;
    }

    .StragetyArea .squareArea {
        width: 40%;
        min-height: 220px;
        padding: 2% 3%;
        margin: 3%;
        background-color: rgba(41, 41, 41, 0.83);
    }


    .StragetyArea .title {
        text-align: left;
        font-weight: bold;
        font-size: 1.4em;
        color: #17B2A2;
    }

    .StragetyArea .index {
        margin-top: 22%;
        text-align: left;
        font-weight: bold;
        font-size: 2.4em;
        color: #00DBC5;
    }

    .StragetyArea .description {
        text-align: left;
        font-weight: bold;
        font-size: 1.4em;
        color: #00DBC5;
    }

    .StragetyArea .unit {
        text-align: left;
        font-weight: bold;
        font-size: 1em;
        color: #00DBC5;
    }

    .StragetyArea .Borderless {
        margin: 0px;
    }

    .StragetyArea .Boundary {
        margin-bottom: 15%;
    }

@media (max-width: 1200px) {
    .StragetyArea .squareArea {
        width: 46%;
        padding: 2%;
        margin: 2%;
    }
}

@media (max-width: 991px) {
    .StragetyArea {
        padding: 4% 0px;
        background-image: url(/Content/images/trafficControl/stragety/background_xs.jpg);
    }

        .StragetyArea .index {
            margin-top: 13%;
        }

        .StragetyArea .Boundary {
            margin-bottom: 12%;
        }
}

@media (max-width: 768px) {
    .StragetyArea div div p {
        font-size: 1.2em;
    }

    .StragetyArea div div img {
        width: 100%;
        padding: 5% 10%;
    }

    .StragetyArea .squareArea {
        min-height: 200px;
        padding: 3%;
    }


    .StragetyArea .title {
        font-size: 1em;
    }

    .StragetyArea .index {
        font-size: 1.8em;
    }

    .StragetyArea .description {
        font-size: 1em;
    }

    .StragetyArea .unit {
        font-size: 0.8em;
    }

    .StragetyArea .Borderless {
        margin: 0px;
    }

    .StragetyArea .Boundary {
        margin-bottom: 15%;
    }
}

/*系統架構*/
.ArchitectureArea {
    position: relative;
    padding: 4% 0px;
    background-image: url(/Content/images/trafficControl/background.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
}

    .ArchitectureArea div img {
        width: 100%;
        padding: 2% 18% 4% 18%;
    }

    .ArchitectureArea .title {
        font-size: 2em;
        font-weight: bold;
        color: #FCFFAB;
        padding: 0px 19%;
    }

    .ArchitectureArea .description {
        font-size: 1.2em;
        color: #FFFFFF;
        padding: 0px 19%;
    }

@media (max-width: 991px) {
    .ArchitectureArea {
        padding: 4% 0px;
        background-image: url(/Content/images/trafficControl/background_xs.jpg);
    }
}

@media (max-width: 768px) {
    .ArchitectureArea div img {
        padding: 4%;
    }

    .ArchitectureArea .title {
        font-size: 1.4em;
        padding: 0px 9%;
    }

    .ArchitectureArea .description {
        font-size: 1em;
        color: #FFFFFF;
        padding: 0px 9%;
    }
}

/*六功格*/
.FeatureArea {
    position: relative;
    padding: 4%;
    background-image: url(/Content/images/trafficControl/background.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
}

    .FeatureArea div {
        padding: 0px;
    }

        .FeatureArea div img {
            width: 100%;
            padding: 3%;
        }


    .FeatureArea .title {
        font-size: 2em;
        font-weight: bold;
        color: #FCFFAB;
        padding: 15% 5% 0px 5%;
    }

    .FeatureArea .description {
        font-size: 1.2em;
        font-weight: bold;
        color: #FFFFFF;
        padding: 3% 5% 0px 5%;
    }

@media (max-width: 991px) {
    .FeatureArea {
        background-image: url(/Content/images/trafficControl/background_xs.jpg);
    }

        .FeatureArea .title {
            padding: 5% 5% 0px 5%;
        }

        .FeatureArea .description {
            font-size: 1.2em;
            font-weight: bold;
            color: #FFFFFF;
            padding: 0px 5% 5% 5%;
        }
}

@media (max-width: 768px) {
    .FeatureArea div img {
        padding: 4%;
    }

    .FeatureArea .title {
        font-size: 1.4em;
    }

    .FeatureArea .description {
        font-size: 1em;
    }
}


/*OPTIMA & BALANCE*/
.OptemaArea {
    text-align: center;
    position: relative;
    padding: 4%;
    background-image: url(/Content/images/trafficControl/background.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
}

    .OptemaArea div div img {
        width: 100%;
        padding: 5%;
        border-radius: 50px;
    }

    .OptemaArea .title {
        font-size: 2em;
        font-weight: bold;
        color: #FCFFAB;
        padding-top: 5%;
    }

    .OptemaArea .subTitle {
        font-size: 1.8em;
        font-weight: bold;
        color: #FFFFFF;
    }

    .OptemaArea .description {
        font-size: 0.95em;
        font-weight: normal;
        color: #FFFFFF;
        padding-bottom: 5%;
    }

@media (max-width: 991px) {
    .OptemaArea {
        background-image: url(/Content/images/trafficControl/background_xs.jpg);
    }
}

@media (max-width: 768px) {
    .OptemaArea .title {
        font-size: 1.4em;
    }

    .OptemaArea .subTitle {
        font-size: 1.2em;
    }

    .OptemaArea .description {
        font-size: 0.8em;
    }
}