/*
@font-face {
    font-family: "SourceHanSerifCN";
    src: url("../SourceHanSerifCN-VF.subset.woff2") format("woff2");
}*/

/* 小屏幕（平板，大于等于 768px） */
@media (min-width: 768px) {

}

/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: 992px) {

}

/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: 1200px) {

}

html, body {
    font-size: 15px;
    height: 100%;
    font-family: 'Noto Serif SC',"SourceHanSerifCN",-apple-system,"PingFang SC","Helvetica Neue",STHeiti,"Microsoft Yahei",Tahoma,Simsun,sans-serif;
    color: #828282;
}

.home-body {
    height: 100%;
}

h1, h2, h3, h4, h5 {
    color: #212121;
}

.dark {
    color: white;
    background-color: #252525;
}

.dark h1,
.dark h2,
.dark h3,
.dark h4,
.dark h5 {
    color: white;
}


.main-container {
    margin:0 auto;
    text-align: center;
    min-height: 100%;
    /* background: url('../img/bg3x.png') no-repeat top center / contain, linear-gradient(to bottom, #1C2244, #454E7E); */
    background-size: cover;
}

/* override the setting from grid.less */
.row {
    margin-left: 0px;
    margin-right: 0px;
}

.bg-img {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.heading-lg {
    font-size: 6vh;
    font-weight: 600;
}

.heading {
    font-size: 5vh;
    font-weight: 500;
}

.heading hr {
    /*width: 10vh;
    height: 5px;
    background-color: #F5B942;*/
    border: 1.7vh solid #7BA9BC;
    margin: -2vh 0 0 0;
}

p {
    font-size: 1.4rem;
}

/* 小屏幕（平板，大于等于 768px） */
@media (min-width: 768px) {
    .heading-text {
        font-size: 8vh!important;
    }
}

.heading-text {
    font-size: 4vh;
    display: inline-block;
    padding: 0 2vh;
}

.heading-button {
    border: 3px solid white;
    background-color: transparent;
    padding: 15px 40px;
    margin-top: 6vh;
}

.heading-button:hover {
    color: #eee;
    border-color: #eee;
}


/* 小屏幕（平板，大于等于 768px） */
@media (min-width: 768px) {

    .nav-bar {
        padding: 0px 18vw!important;
    }

    .nav-bar .logo {
        height: 7.5vh;
        display: block!important;
    }

    .nav-bar .menu {
        width: -webkit-fill-available!important;
    }
}

.nav-bar {
    position:fixed;
    width:100%;
    padding: 0px 0px;
    height: 10vh;
    z-index: 100;
    background-color: white;
    display: flex;
    align-items: center;
    box-shadow: 5px 0px 5px grey;
}

.nav-bar.top {
    padding: 30px;
    background-color: transparent;
}

.nav-bar .logo {
    display:none;
}

.nav-bar.top .logo {
    height: 90px;
}

.nav-bar .menu {
    display:flex; 
    justify-content:end; 
    height: 100%; 
    width: auto;
}

/* 小屏幕（平板，大于等于 768px） */
@media (min-width: 768px) {
    
}


/* 小屏幕（平板，大于等于 768px） */
@media (min-width: 768px) {
    .en .menu-item a {
        font-size: 1rem!important;
    }

    .menu-item a {
        font-size: 1.2rem!important;
    }
}


.menu-item {
    height: 100%;
    display: flex;
    align-items: center;
}

.en .menu-item  a {
    font-size: 0.5rem;
}

.menu-item a {
    /*display: inline-block;*/
    font-size: 0.6rem;
    /*height: 100%;*/
    color: black;
    padding: 0px 1rem;
}

.menu-item.active {
    background-color: #0B437B;
}

.menu-item.active a {
    color: white;
    /*border-bottom: 3px solid #F5B942;*/
}

.menu-item a:hover {
    text-decoration: none;
}

.menu-item a:hover:not(.active) {
    /*color: #eee;*/
}

.section.intro {
    background-image: url("../img2/bg.png");
    /*background-position: 0% 50%;*/
}

.section {
    /* height: 100vh; */
    min-height: 100vh;
    width: 100%;
}

.section > .header {
    min-height: 25vh;
    display: flex;
    justify-content:center;
}

.section > .header h1 {
    margin-top: 15vh;
    align-self: flex-start;
    /* display: inline-block; */
}


/* 小屏幕（平板，大于等于 768px） */
@media (min-width: 768px) {
    .section > .inner {
        padding: 0 18vw;
    }
}

.section > .inner {
    min-height: 55vh;
    /*padding: 0 6vw;*/
}

.section > .footer {
    /*padding: 0;*/
    /*margin: 0;*/
    padding-top:7vh;
    padding-bottom:7vh;
    min-height: 20vh;

    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.card {
    padding: 5vh 20px;
    height: 100%;
}

/* 小屏幕（平板，大于等于 768px） */
@media (min-width: 768px) {
    .section.about .footer-bg-color {
        margin: -15vh -18vw 0 -18vw!important;
    }
}

.section.about .footer-bg-color {
    background-color:#E2ECF4; 
    height: 15vh; 
    margin: -15vh -15px 0 -15px;
}

/* 小屏幕（平板，大于等于 768px） */
@media (min-width: 768px) {
    .quote {
        padding: 0 20px 20px 20px;
        max-width: 20%;
    }

    .quote-content {
        max-width: 60%;
    }
}

.quote {
    padding: 0 0 20px 0;
    max-width: 10%;
}

.quote img {
    width: 100%;
    max-width:100px;
}

.quote-content {
    max-width: 80%;
}

.orange {
    color: #F5B942;
}

.orange-bg {
    background-color: #F5B942;
}


.card > .inner {
    /*padding: 40px;*/
    /*margin-top:20%;*/
    height: 80%;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    /*box-shadow: 0 1px 12px rgba(0,0,0,.25);*/
    /*-webkit-box-shadow: 0 1px 12px rgba(0,0,0,.25);*/
}

/* 小屏幕（平板，大于等于 768px） */
@media (min-width: 768px) {

    /*.business .inner {
        padding: 0px;
    }*/

    .business .card {
        /*padding: 0px;*/
        padding: 5vh 20px!important; /* same as .card */
    }
}

.business .card {
    height: 75vh;
    padding: 0px;
}

.business .card .heading {
    font-size: 3vh;
    padding: 1.5vh 0;
    width: 100%;
    color: white;
    background-color: rgba(0, 0, 0, 0.3);
}

.business .icon {
    height: 30%;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.business .inner {
    /*padding: 0px;*/
}

.business .card .inner {
    background-size: cover;
    background-position: bottom;
}

.section.advantage > .header {
    background-image: url("../img2/advantage.png");
}


/* 小屏幕（平板，大于等于 768px） */
@media (min-width: 768px) {
    .advantage > .inner {
        padding-top: 5vh;
        padding-left: 15vw;
        padding-right: 15vw
    }
}

.advantage > .inner {
    padding-top: 5vh;
    padding-left: 5vw;
    padding-right: 5vw
}

/* 小屏幕（平板，大于等于 768px） */
@media (min-width: 768px) {
    .advantage .card {
        /*height: 35vh!important;*/
        padding:0 3vh 5vh 3vh!important;
    }
}

.advantage .card {
    height: auto;
    /*padding: 20px;*/
    padding: 0 0 5vh 0;
}

.advantage .text-box {
    /*min-height: 30vh; */
    border-radius: 7px; 
    background-color:#E2ECF4; 
    padding:25px; 
    text-align:left;
}

.advantage .text-box p {
    font-size: 1.1rem;
}

.section.advantage .card .inner {
    background-color: rgba(255, 255, 255, 0.1);
    text-align: left;
}

.section.advantage .card .inner .heading {
    font-size: 2rem;
    color: #F5B942;
    margin-bottom: 1rem;
}

/* 小屏幕（平板，大于等于 768px） */
@media (min-width: 768px) {
    .service .footer h3 {
        font-size: 36px; /* h1 font-size */
    }

    .footer .col-lg-6.left {
        padding-left: 0px!important;
        margin-bottom: 0px!important;
    }
}

.service .footer {
    flex-direction: row;
}

.footer .logo {
    width: 14.5rem;
    height:3.6rem;
}

.footer .col-lg-6.left {
    padding-left: calc((100% - 14.5rem) / 2); /* 14.5rem is the logo width in the case of logo height 3.6rem */
    margin-bottom: 1.5rem; /* margin above logo*/
}

.footer .text-box {
    display:flex;
    align-items: baseline;
}

.footer .text-box > img {
    width:1.1rem;
    height:100%;
    margin-right:15px;
}

.footer .text-box > span {
    text-align:left;
}


/* 小屏幕（平板，大于等于 768px） */
@media (min-width: 768px) {
    .office .location-arrow {
        display: block!important;
    }

    .office .inner {
        flex-direction: row!important;
    }

    .office .bg-img {
        height: 30vh!important; 
        flex-direction: row!important;
    }
}

.office .inner {
    flex-direction: column;
}

.office .location-arrow {
    display: none;
}

.office .office-info {
    padding:0 5vh; 
    height: 30vh; 
    text-align: left
}

.office .bg-img {
    padding:0 5vh; 
    height: 20vh; 
}

.office p {
    font-size: 1.1rem!important;
}

.section.office > .footer {
    background-color: #0B437B;
    display: flex;
    justify-content: center;
}

.section.office button {
    padding: 10px 30px;
}

.office .inner .card p {
    margin: 0px;
}