body {
    font-size: 15px !important; color: #777777;font-weight: 400;
    font-family: 'Open Sans', sans-serif;;
}

::-webkit-scrollbar{width: 7px;height: 7px;}
::-webkit-scrollbar-thumb{background: #BDBDBD;border-radius: 10px;}
::-webkit-scrollbar-thumb:hover{background: #9C9C9C;}
::-webkit-scrollbar-track{background: #FFFFFF;border-radius: 10px;box-shadow: inset 7px 10px 12px 0px #F0F0F0;}

.mbr-iconfont.mbr-2x {font-size: 200%;}
.mbr-iconfont.mbr-3x {font-size: 300%;}
.mbr-iconfont.mbr-4x {font-size: 400%;}

a {
    transition: all ease-in-out .25s;text-decoration: none;
}

a.hover-white-50:hover {
    color: #ffffff50 !important;
}

a.hover-white:hover {
    color: #ffffff !important;
}

h3, h5 {color: #1a1a1a;}

#pageNavigation .navbar-nav > .nav-item > .nav-link {color:#777777; font-size: 1.1rem;}
#pageNavigation .navbar-nav > .nav-item > .nav-link:hover {color: #444444;}
#pageNavigation .navbar-nav > .nav-item .dropdown-item:hover {color:#ffffff; background-color: #909291 !important;}

#functionSliders h5 {
    margin-bottom: 1.5rem;
}
#functionSliders ul li {
    margin-bottom: 1rem;
}

.carousel-control-next-icon,
.carousel-control-prev-icon {
    background-image: none;
}

.pageBanner {
    padding-top: 4rem;padding-bottom: 4rem;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

.bg-home {
    background-image: url("/public/img/home/home-bg-3.png");
}
.bg-about-us {
    background-image: url("/public/img/about-us-banner-bg.png");
}
.bg-iagent-system {
    background-image: url("/public/img/iagent-system-banner-3.jpg");
}
.bg-contact-us {
    background-image: url("/public/img/contact-us-banner-bg.jpg");
}
.bg-solution {
    background-image: url("/public/img/solution-banner-2.png");
}

.bg-parallax {
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#myBtn2 {
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 99;
    border: none;
    outline: none;
    color: white;
    cursor: pointer;
    border-radius: 30px;
    background-color: #00cc00;
    width: 60px;
    height: 60px;
    padding: 10px;
    opacity: 0.9;
}

#myBtn2:hover {
    background-color: #555;
}

.indexFeatures {
    background-image: url('/public/img/home/value-bg.png');
    background-position: center;
    background-size: cover;
}
.indexReasons {
    background-image: url('/public/img/home/reason-bg.jpg');
    background-position: center;
    background-size: cover;
}

h1, .h1 {
    font-size: calc( 1.91rem + (3.6 - 1.91) * ((100vw - 20rem) / (48 - 20)));
    line-height: calc( 1.1 * (1.91rem + (3.6 - 1.91) * ((100vw - 20rem) / (48 - 20))));
}


.x_panel {
    position: relative;
    width: 100%;
    margin-bottom: 10px;
    padding: 10px 17px;
    display: inline-block;
    background: #fff;
    border: 1px solid #E6E9ED;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
    opacity: 1;
    transition: all .2s ease;
}


.x_title {
    border-bottom: 2px solid #E6E9ED;
    padding: 1px 5px 6px;
    margin-bottom: 10px;
    font-size: 20px !important;
    font-weight: bold;
    color: #1a1a1a;
}

.x_title .filter {
    width: 40%;
    float: right;
}

.x_title h2 {
    margin: 5px 0 6px;
    float: left;
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.x_title h2 small {
    margin-left: 10px;
}

.x_title span {
    color: #BDBDBD;
}

.x_content {
    position: relative;
    width: 100%;
    float: left;
    clear: both;
    margin-top: 5px;
    color: #1a1a1a;
}

.x_magin {
    margin-bottom: 5px;
}

.x_magin_long {
    margin-bottom: 12px;
}

.x_content h4 {
    font-size: 16px;
    font-weight: 500;
}


.sectionBg {
    padding-top: 3rem;padding-bottom: 3rem;
    background-color: #F7F7F7;
}

.sectionTitle {
    color: rgb(20, 152, 213);
    text-align: center;
    font-size: calc( 1.5rem + (2.5 - 1.5) * ((100vw - 20rem) / (48 - 20)));
    line-height: calc( 1.3 * (1.525rem + (2.5 - 1.525) * ((100vw - 20rem) / (48 - 20))));
}
.sectionDesc {
    font-size: calc( 1.28rem + (1.8 - 1.28) * ((100vw - 20rem) / (48 - 20)));
    line-height: calc( 1.4 * (1.28rem + (1.8 - 1.28) * ((100vw - 20rem) / (48 - 20))));
}

.partnerBox .detailButton {
    visibility: hidden!important;
}
.partnerBox .detailButton.view {
    visibility: visible!important;
}
.partnerBox .partnerLogo {
    max-width: 253px;
}

.ratio-square {aspect-ratio: 1/1;}

.btn-blue {
    color: #fff;
    background-color: #1498d5;
    border-color: #1498d5;
}
.btn-blue:hover {
    color: #fff;
    background-color: #0d5f86;
    border-color: #0d5f86;
}
.btn-check:focus + .btn-blue, .btn-blue:focus {
    color: #fff;
    background-color: #0d5f86;
    border-color: #0d5f86;
    box-shadow: 0 0 0 0.25rem rgba(13, 95, 134, 0.5);
}
.btn-check:checked + .btn-blue, .btn-check:active + .btn-blue, .btn-blue:active, .btn-blue.active, .show > .btn-blue.dropdown-toggle {
    color: #fff;
    background-color: #0d5f86;
    border-color: #0d5f86;
}
.btn-check:checked + .btn-blue:focus, .btn-check:active + .btn-blue:focus, .btn-blue:active:focus, .btn-blue.active:focus, .show > .btn-blue.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.25rem rgba(13, 95, 134, 0.5);
}
.btn-blue:disabled, .btn-blue.disabled {
    color: #fff;
    background-color: #1498d5;
    border-color: #1498d5;
}

#pageFooter a {
    color: #777777;
}
#pageFooter a:hover {
    color: rgba(20, 152, 213, 1);
}

.text-blue-50 {color: rgba(20, 152, 213, .5)!important;}
.text-blue-50:hover {color: rgba(20, 152, 213, 1)!important;}

/* X-Small devices (portrait phones, less than 576px) */
@media (min-width: 576px) {  }

/* Small devices (landscape phones, less than 768px) */
@media (min-width: 768px) {
    h1, .h1 { line-height: 1.1;}
}

/* Medium devices (tablets, less than 992px) */
@media (min-width: 992px) {
    body {font-size: 1rem;}

    .mbr-iconfont {height: 1.2rem; width: 1.2rem;}

    .pageBanner {padding-top: 8rem;padding-bottom: 8rem;}
    .indexFeatures {padding-top: 5rem;padding-bottom: 5rem;}

    h1, .h1 {font-size: 3.6rem; line-height: 1.1;}

    .sectionBg {padding-top: 5rem;padding-bottom: 5rem;}
    .sectionTitle {font-size: 2.5rem; line-height: 1.1;}
    .sectionDesc {font-size: 1.8rem;line-height: 1.5;}

    .w-md-75 {
        width: 75%!important;
    }
}

/* Large devices (desktops, less than 1200px) */
@media (min-width: 1200px) {  }

/* X-Large devices (large desktops, less than 1400px) */
@media (min-width: 1400px) {  }