figcaption {
    letter-spacing: 2px;
    top: 15%;
    /* left: 0; */
    width: 100%;
    /* transform: translateX(-50%); */
}
    figcaption h1 { color: #1d327c; }
    figcaption h4 { color: #0054a6; }

    figcaption::after {
        clear: both;
        content: "";
        display: table;
    }
        @media (min-width: 768px) {
            figcaption h1 { font-size: 4.5rem; }
            figcaption h4 { font-size: 2.0rem; }
        }


#service-page h2 {
    background-color: #ffde00;
    color: #1d327c;
}
#service-page .our-service {
    background-image: url("../../_template/img/S-bg.png");
    background-position: top 10px right -170px;
    background-repeat: no-repeat;
    background-size: 380px auto;
}
#service-page #service-detail .carousel-indicators {
    position: unset;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 15;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    padding-left: 0;
    margin-right: 0;
    margin-left: 0;
    list-style: none;

    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
@media (min-width: 576px) {
    #service-page #service-detail .carousel-indicators {
        -ms-flex-wrap: unset;
        flex-wrap: unset;
    }
}
    #service-page #service-detail .carousel-indicators li {
        box-sizing: content-box;
        -ms-flex: none;
        flex: auto;
        width: auto;
        height: auto;
        margin-right: 0;
        margin-left: 0;
        text-indent: 0;
        cursor: pointer;
        /* background-color: #fff; */
        background-clip: padding-box;
        border-top: none;
        border-bottom: none;
        opacity: 1;
        transition: opacity .6s ease;
        
        background-color: transparent;
        text-align: center;
    }
    
        @media (min-width: 576px) {
            #service-page #service-detail .carousel-indicators li {
                padding-left: 15px; padding-right: 15px;
            }
        }
        @media (min-width: 768px) {
            #service-page #service-detail .carousel-indicators li {
                padding-left: 30px; padding-right: 30px;
            }
        }
        @media (min-width: 992px) {
            #service-page #service-detail .carousel-indicators li {
                padding-left: 76px; padding-right: 76px;
            }
        }
    #service-page #service-detail .carousel-indicators > li.active {
        background-color: transparent;
    }
    #service-page #service-detail .carousel-indicators li .fa-circle { color: #2162ad; }
    #service-page #service-detail .carousel-indicators li .symbol { color: #FFF; }

    #service-page #service-detail .carousel-indicators li:hover .fa-circle { color: #1b7bdb; }

    #service-page #service-detail .carousel-indicators li.active .fa-circle { color: #ffde00; }
    #service-page #service-detail .carousel-indicators li.active .symbol { color: #636466; }

#service-page #service-detail .carousel-inner {
    background-image: url("../../service/img/service-detail-bg.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    padding-bottom: 40px;
}
#service-detail .carousel-inner .carousel-item {
    opacity: 0;
    transition: ease-in .4s;
}
#service-detail .carousel-inner .carousel-item.active {
    opacity: 1;
}
#service-detail .carousel-inner .carousel-item .rounded {
    border-radius: .5rem!important;
    box-shadow: 5px 5px 12px rgba(0, 0, 0, .5);
}


#service-detail .carousel-control-next, 
#service-detail .carousel-control-prev {
    position: absolute;
    top: auto;
    bottom: 15px;
    z-index: 1;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: 18px;
    border: 2px #ffde00 solid;
    color: transparent;
    background-color: #ffde00;
    text-align: center;
    opacity: 1;
    transition: .2s ease;
}
#service-detail .carousel-control-next { right: 50%; transform: translateX(45px); }
#service-detail .carousel-control-prev { left: 50%; transform: translateX(-45px); }

#service-detail .carousel-control-next:hover, 
#service-detail .carousel-control-prev:hover {
    background-color: #FFF;
}
/* #service-detail [class*="-icon"] { color: #000; } */