html, .scrollbar { scrollbar-color: #afafaf #fafbfb; scrollbar-width: thin; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); border-radius: 5px; background: #fafbfb; }
::-webkit-scrollbar-thumb { border-radius: 5px; -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background: #afafaf; }

.container-sctt { width: 100%; padding:0 15px }
.mo-show { display: none !important; }
.pc-show { display: block !important; }

.bg-sctt { background-color: #0084F4 !important; }
.nav-brand-sctt { position: fixed; width:100%; z-index: 99; background-color: rgb(0,0,0,.1); }
.nav-brand-sctt .navbar-brand { font-size: 2.125rem; font-weight:bolder; }
.navbar-sctt { justify-content: space-between; display: flex; }
.about-banner { padding: 4rem 0; background-size: cover; background-repeat: no-repeat; background-position: center center; -webkit-background-size: cover; }
.footer-sctt { padding: 1rem 0; }
.box-680 { width: 960px; margin: 0 auto; }
.box-640 { width: 640px; margin: 0 auto; }
.box-460 { width: 460px; margin: 0 auto; }
.a-no-decoration:hover { text-decoration: none !important; }
.opacity-05 { opacity: 0.5; }
.title-div { padding-bottom:5px; border-bottom: 3px solid #0084F4; display: inline-block; }/* color: #0084F4;*/
.carousel-caption { top: 30%; }

.carousel .badge { padding-left: 2rem !important; padding-right: 2rem !important; }

.carousel-caption p { font-size: 1.25rem; margin-bottom: 1rem; }
.carousel-caption h2 { font-size: 4rem; margin-bottom: 0.5rem; font-weight: bolder; }
.carousel-caption div { margin-top: 2rem; }

.navbar-offcanvas .nav-bottom { position: absolute; bottom: 0; width: 100%; z-index: 1030; }

.container-sctt {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    align-items: center;
    /*
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;*/
}


@media (max-width: 767px) { 
    .mo-show { display: block !important; }
    .pc-show { display: none !important; }
    /*.nav-brand-sctt .navbar-brand { color: #007bff !important; }*/
    .box-680, .box-460, .box-640 { width: 100%; }
    .nav-brand-sctt { background-color: #0084F4; }
    .carousel { top:61px; }
    .carousel-caption { top: 10%; }
    .carousel .h2 { font-size: 1.75rem; }
    .carousel .badge { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
    .carousel .carousel-indicators { display: none !important; }

    .carousel-caption p { font-size: 1rem; margin-bottom: 0.5rem; }
    .carousel-caption h2 { font-size: 1.75rem; line-height: 1.2; margin-bottom: 1rem; }
    .carousel-caption div { margin-top: 0.5rem; }

}





@media (min-width: 960px) {/* ³¬¹ý960 */
    .container-sctt { max-width: 960px; }



}

.input-validation-error {
    border: 1px solid #dc3545 !important;
}

    .input-validation-error:focus {
        background-color: #fff;
        border-color: #86b7fe;
        outline: 0;
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgb(255 62 0);
    }

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
.loader {
    width: 48px;
    height: 48px;
    border-width: 3px;
    border-style: dashed solid solid dotted;
    border-color: #FF3D00 #FF3D00 transparent #FF3D00;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    -webkit-animation: rotation 1s linear infinite;
    animation: rotation 1s linear infinite;
}

    .loader:after {
        content: "";
        position: absolute;
        left: 20px;
        top: 31px;
        border: 10px solid transparent;
        border-right-color: #FF3D00;
        transform: rotate(-40deg);
    }


.nav-brand-sctt {
    background-color: #0084F4 !important;
}