/*
Content Index
- General
- Common Classes
- Header Area
- Nav Menu
- Index News Area
- Banner3
- Footer
- Service Page Title Banner
- Swiper
- Panel
- Collapse
*/
/*General*/
html, body { font-family: "Open Sans", sans-serif; }
a:hover { text-decoration: none; }
.new-well ul, ul.v-ul { margin:0; padding: 0; text-indent: 0; }
.new-well ul li, ul.v-ul { margin-left: 35px; margin-bottom: 5px; padding: 2px; text-indent: 0; list-style: none; }
.new-well ol li, ol.v-ol li { margin-bottom: 5px; padding: 2px; }
.v-no-list-style > li { list-style: none !important; transform: translateX(-15px); }
.v-list-style-disc > li { list-style: disc !important; }

.pagination-lg > li > a, .pagination-lg > li > span { margin: 0 .3rem; border-radius: .3rem; }
.pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover {
    background-color: #eee; color: #0053A0; border-radius: .3rem;
}
.pagination-lg > li:first-child > a, .pagination-lg > li:first-child > span { border-radius: .3rem; }
.pagination > li > a, .pagination > li > span {
    border: none;
}
/*Common Classes*/
.v-text-blue { color: #00539F !important; }
.v-text-orange { color: #F26522 !important; }
.v-text-italic { font-style: italic !important; }
.v-bg-blue { background-color: #00539F !important; }
.v-bg-orange { background-color: #F26522 !important; }
.v-flex-1 { display: flex !important; justify-content: left; align-items: center; }  /*left, middle*/
.v-flex-1-col { display: flex !important; justify-content: center; align-content: flex-start; flex-direction: column; }  /*left, middle*/
.v-flex-2 { display: flex !important; justify-content: center; align-items: center; }
.v-gap-1 { gap: 1rem; }
.v-gap-2 { gap: 1.5rem; }
.v-gap-3 { gap: 2rem; }
.v-padding-0 { padding: 0 !important; }
.v-button-2 { border-radius: 2rem; background-color: #F26522; color: #fff; font-weight: bold; padding-left: 2rem; padding-right: 2rem; display: inline-flex; justify-content: center; align-items: center; }
.v-button-2:hover, .v-button-2:focus { color: #fff; }
.v-button-secondary, .v-button-secondary:hover, .v-button-secondary:focus { color: #333; background-color: #ddd; }
.v-title-lg1 { font-size: 2.5rem; padding-right: 3rem; border-bottom: 2px solid #F26522; font-weight: bold; }
@media all and (max-width: 768px) {
    .v-title-lg1 { font-size: 1.9rem; padding-right: 2.4rem; }
}

/*header area*/
.v-phone-box, .v-phone-box:focus, .v-phone-box:hover { height: 3rem; border-radius: 1.5rem !important; border: 2px solid white; margin-top: 1rem; }
.v-phone-box:hover { background-color: #003667 !important; }
.v-phone-box-type2 { height: 4rem; border-radius: 1.5rem; border: 2px solid white; display: inline-flex;
    padding: 0 1.4rem; align-items: center; font-size: 1.6rem; font-weight: bold; }
.v-phone-box-type2:hover { background-color: #003667 !important; color: #fff; }
.v-phone-box-type3 { height: 5rem; border-radius: 1.5rem; border: 2px solid #00539F; display: inline-flex;
    padding: 0 2.5rem; align-items: center; font-size: 1.9rem; font-weight: bold; }

/*Nav Menu*/
.v-navbar { margin-bottom: 0; }
.v-nav-bottom { width: 100%; background-color: #F26522; color: #fff; display: flex; }
.v-nav-bottom > .item { width: 33.333%; border-right: 1px solid #00539F; }
.v-nav-bottom > .item:last-child { border-right: none; }
.v-nav-bottom > .item > a { display: flex; flex-direction: column; justify-content: center; align-items: center; }

/*Index top banner area*/
.swiper-slide-one {
    background-image: url('/assets/images/banner-top-2-left.jpg'), url('/assets/images/banner-top-2-right.jpg');
    background-repeat: no-repeat; background-size: 50% 100%; background-position: left top, right top; margin-bottom: -1px;
}
.swiper-slide-one-content { width: 100%; height: 300px; background-size: cover; background-position: center center; }
@media all and (min-width: 992px) {
    .swiper-slide-one-content { height: 400px; }
}
@media all and (min-width: 1200px) {
    .swiper-slide-one-content { height: 480px; }
}
@media all and (min-width: 1600px) {
    .swiper-slide-one-content { height: 520px; }
}
@media all and (min-width: 1920px) {
    .swiper-slide-one-content { height: 600px; }
}
@media all and (min-width: 2200px) {
    .swiper-slide-one-content { height: 800px; }
}
@media all and (min-width: 2800px) {
    .swiper-slide-one-content { height: 900px; }
}
h3 { margin: 10px 0 10px 0; font-size: 18px; }
.news-item img { max-height: 260px; }
@media (max-width:1200px) {
    .news-item img { max-height: 215px; }
}
@media (max-width:992px) {
    .news-item img { max-height: 170px;}
}
@media (max-width: 768px) and (min-width: 550px) {
    .navbar .navbar-collapse { min-height: 8vh; }
}

/*Index News Area*/
.v-news-item { width: 100%; height: 410px; background-color: #f2f2f2; margin-bottom: 2.5rem; position: relative;
    color: white; border-radius: .4rem; overflow: hidden; }
.v-news-item a { color: #fff; }
.v-news-item-bg { background-size: cover; background-position: center; background-repeat: no-repeat;
    height: 410px; width: 100%; }
.v-news-item-title-type { position: absolute; top: 1rem; left: 1.5rem; background-color: #00539F; border-radius: .3rem; padding: .3rem 1rem; }
.v-news-item-title-area { position: absolute; width: 100%; bottom: 0; left: 0; padding: .4rem 1.8rem; background: rgba(0,0,0,.5); }
.v-news-item-title-area .desc { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-height: 18px;
    max-height: 36px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.v-news-item2 { width: 100%; background-color: #fff; margin-bottom: 2.5rem; }
.v-news-item2-img { width: 100%; height: 200px; background-size: cover; background-repeat: no-repeat;
    border-radius: .4rem; }
.v-news-item2-title-area { padding: 1rem 0 0 0; line-height: 2em; }
.v-news-item2-title-area > .v-flex-1 { color: #444; }
@media all and (max-width: 1200px) {
    .v-news-item { height: 350px; }
    .v-news-item-bg { height: 350px; }
    .v-news-item2-img { height: 160px; }
}
@media all and (max-width: 992px) {
    .v-news-item2 { width: 75%; margin-right: auto; margin-left: auto; }
    .v-news-item2-img { height: 40vw; }
}
@media all and (max-width: 768px) {
    .v-news-item { height: 52vw; }
    .v-news-item-bg { height: 52vw; }
    .v-news-item-title-area { padding-top: 0; padding-bottom: 0; }
    .v-news-item-title-area h3 { font-size: 15px !important; }
    .v-news-item-title-area > .desc { display: none; }
    .v-news-item-title-area > p { font-size: 1.2rem; }
    .v-news-item2 { width: 100%; margin-right: auto; margin-left: auto; }
    .v-news-item2-img { height: 55vw; }
}

/*Index Active Projects Area*/
.v-project-item { border-radius: .4rem; overflow: hidden; overflow: hidden; display: flex; flex-direction: column; }
.v-project-item a { color: #fff; }
.v-project-item a:hover { text-decoration: none; }
.v-project-item > .img { background-repeat: no-repeat; background-size: contain; background-position: center;
    width: 100%; height: 200px; background-color: #eee; height: 60%; }
.v-project-item > .title-area { background-color: #00539F; color: #fff; padding: 1.5rem; text-align: left; height: 40%; }
.v-project-item > .title-area > .desc { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-height: 18px;
    max-height: 36px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/*Index Banner Bottom*/
.v-index-banner-bottom { padding: 1rem 2rem; background-color: #EDEEEF; margin: 2rem 0 4rem 0; }
.v-index-banner-bottom > :nth-child(1) > img { height: 90%; margin-top: 1.4rem; }
.v-index-banner-bottom > :nth-child(2) { color: #F26522; font-weight: bold; font-style: italic; font-size: 3rem;
    line-height: 1em; }
.v-index-banner-bottom > :nth-child(2) > img { width: 50%; max-width: 200px; }
.v-button-1 { border-radius: .4rem; color: #fff; background-color: #F26522; padding: 1rem 2rem; font-size: 1.8rem; }
.v-index-banner-bottom > div { height: 200px; }
@media all and (max-width: 992px) {
    .v-index-banner-bottom > div { height: 120px; }
    .v-index-banner-bottom > div:nth-child(2) { padding-top: 3rem; }
}
@media all and (max-width: 576px) {
    .v-index-banner-bottom > div:nth-child(2) { font-size: 2.2rem; }
    .v-index-banner-bottom > div:nth-child(2) > img { width: 120px; }
}

/*Banner3*/
.v-banner3 { width: calc(100vw - 10px); max-width: 100vw; overflow: hidden; margin-left: calc(50% - 50vw); margin-bottom: 2.5rem;
    background-size: 100% 100%; padding: 7rem 0rem; background-position: center center; background-repeat: no-repeat;
    background-image: url("/assets/images/banner-bg3.jpg"); }
.v-banner3 img { max-width: 400px; }
.v-banner3 > .row { max-width: 1200px; margin-right: auto; margin-left: auto; }
.v-banner3 > .row > div:nth-child(1) { text-align: right; font-size: 4rem; }
.v-banner3 > .row > div:nth-child(2) { text-align: left; }

@media all and (max-width: 1200px) {
    .v-banner3 > .row > div:nth-child(1) { font-size: 3.3rem; }
}
@media all and (max-width: 992px) {
    .v-banner3 > .row > div:nth-child(1) { text-align: center; font-size: 2.8rem; }
    .v-banner3 > .row > div:nth-child(2) { text-align: center; }
    .v-banner3 img { width: 70vw; max-width: 400px; }
}
@media all and (max-width: 768px) {
    .v-banner3 > .row > div:nth-child(1) { font-size: 2.3rem; }
}

.v-banner4 { width: calc(100vw - 10px); max-width: 100vw; margin-left: calc(50% - 50vw); background-color: #F5F5F5; padding: 2rem; text-align: center; margin-bottom: 4rem; margin-top: 4rem; }
.v-banner4-title { font-size: 5rem; border-bottom: 3px solid #F26522; padding-bottom: 1.1rem; }
.v-banner4-content { padding: 3rem 1rem; }
@media all and (max-width: 768px) {
    .v-banner4-title { font-size: 3rem; }
}

/*Footer*/
.footer > .middle-line > div { padding-bottom: 1.5rem; }
.footer > .middle-line > div:nth-child(1) > img { width: 100%; max-width: 160px; }
.footer > .middle-line .touch { display: flex; justify-content: left; align-items: center; }
.footer > .middle-line .touch > svg { margin-right: 2rem; }
.footer > .middle-line .touch > div > span { font-weight: bold; font-size: 1.2rem; }
.footer > .middle-line .touch > div > span:nth-child(1) { font-size: 2rem; }
.footer > .middle-line > div:nth-child(3) { display: flex; align-items: center; }
.bottom-line { background-color: #003667; padding: 1rem 1rem; font-weight: bold; color: #fff; }
.bottom-line > .container > .row > div { padding-left: 0; padding-right: 0; }
.bottom-line a { color: #fff; }
.bottom-line a > svg:hover { color: #F26522; }
.bottom-line > .container > .row > div:nth-child(2) { display: flex; justify-content: right; padding-right: 15rem; }
.bottom-line > .container > .row > div:nth-child(2) > a { margin-right: 1.25rem; margin-left: 1.25rem; }
.footer-menu-item {  }
.footer-menu-item:last-child { border-bottom: none; }
.footer-menu-item > h2 { display: flex; justify-content: space-between; align-items: center; }
.footer-menu-item > h2 > svg { display: none; }
.footer-menu-item > .list-group { font-weight: bold; }
@media all and (max-width: 992px) {
    .footer { padding: 2rem 2rem; }
    .footer-menu-item > .list-group { display: block; }
    .bottom-line > .container > .row { display: flex; flex-direction: column-reverse; }
    .bottom-line > .container > .row > div:nth-child(2) { justify-content: left; }
}
@media all and (max-width: 768px) {
    .footer-menu-item { border-bottom: 1px #003667 solid; padding: 20px; }
    .footer-menu-item > h2 { margin-bottom: 0; cursor: pointer; }
    .footer-menu-item > .list-group { display: none; margin-bottom: 0px; margin-top: 1rem; }
    .footer-menu-item > h2 > svg { display: inline-flex; }
    .footer-menu-item.expanded > h2 > svg { transform: rotate(180deg); }
    .footer-menu-item.expanded > .list-group { display: block; }
}
@media all and (min-width: 768px) {
    .footer-menu-item > .list-group { display: block; }
    .footer-menu-item { border-bottom: 0; }
    .footer-menu-item > h2 > svg { display: none; }
}
@media all and (max-width: 576px) {
    .footer > .middle-line > div:nth-child(3) { display: flex; flex-direction: column; align-items: flex-start; gap: 0rem; }
    .footer > .middle-line > div:nth-child(3) > .v-phone-box-type2 { margin: .6rem 0; }
    .footer > .middle-line .touch > svg { display: none; }
}

/*Service Page Title Banner*/
.service-title-banner { text-align: center; font-style: italic; font-weight: bold; margin: 2rem 0 4rem 0; }
.service-title-banner > .subtitle { color: #1C569E; font-size: 2rem; letter-spacing: 4px; }
.service-title-banner > .title { color: #4E5B6C; font-size: 4rem; line-height: 1.2em; }

/*Others*/
.form-bottom-talk-to-us { display: flex; justify-content: left; align-items: center; gap: 1.5rem; margin-bottom: 1.5rem; }
.form-bottom-talk-to-us > .icon { display: flex; justify-content: right; align-items: center; }
.form-bottom-talk-to-us > .desc { display: flex; flex-direction: column; justify-content: center; align-items: self-start;
    font-size: 2rem; font-weight: bold; color: #00539f; }
.form-bottom-talk-to-us > .desc > span { font-size: 55%; }

/*Swiper*/
.swiper-pagination { display: flex; flex-direction: row; justify-content: center; height: 60px; width: 300px;
    margin-left: calc(50% - 165px); margin-top: 1rem; }

/*Panel*/
.v-panel-item { border-bottom: 1px solid #AEB0B3; margin-right: -15px; margin-left: -15px; padding: 1.4rem 10rem; }
.v-panel-item:last-child { border-bottom: 0; }
@media all and (max-width: 768px) {
    .v-panel-item { padding: 1.2rem 2rem; }
}

/*Collapse*/
.v-collapse-item > .title { display: flex; align-items: center; cursor: pointer; }
.v-collapse-item > .title .t1 { font-size: 1.8rem; }
.v-collapse-item > .title > svg { color: #F26522; margin-right: 2.5rem; }
.v-collapse-item > .body { display: none; margin-top: 2.5rem; background-color: #fafafa; padding: .4rem; }
@media all and (max-width: 768px) {
    .v-collapse-item > .title { padding-left: .6rem; }
    .v-collapse-item > .title > svg { margin-right: 1rem; }
}

/*move to _main.scss after development*/
.nav {  }
.navbar-collapse { max-height: calc(100vh - 100px); }
.navbar-fixed-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse { max-height: calc(100vh - 100px); }

.swiper-button-next, .swiper-button-prev { background-image: none; }


/*Section Portal*/
.v-block1 { display: flex; justify-items: stretch; margin-bottom: 0;    }
.v-block-item1 { background: #00539F; border: 1px solid #F26522; border-radius: 1rem; padding: 1.5rem 2rem; display: flex; justify-content: center; color: #FFF; width: calc(50% - 2rem); margin: 1rem;    }
.v-block-item1 a, .v-block-item1 a:hover, .v-block-item1 a:visited, .v-block-item1 a:focus { color: #fff; }
.v-block-item1 > .icon { width: 30%; max-width: 145px; display: flex; justify-items: center; }
.v-block-item1 > .icon > img { width: 90%; align-self: center; }
.v-block-item1 > .links { flex-grow: 4; max-width: 600px; }
.v-block-item1 > .links > .title { font-size: 2.5rem; font-weight: bold; font-style: italic; border-bottom: 2px solid #F26522; margin-bottom: .7rem; }
.v-block-item1 li { list-style: none !important; margin-bottom: .3rem; margin-left: 0 !important; }
.v-block-item1 li::before { content: "\25b6"; color: #F26522; font-weight: 700; display: inline-block; width: .75em; margin-left: -1em; padding: .5rem 2rem .5rem 1rem; font-size: 1rem;  }
.v-block-item1-1 { width: 100%; display: flex; flex-direction: column; align-items: center; justify-items: stretch; padding-bottom: 3rem; }
.v-block-item1-1 > .title { font-size: 2.5rem; font-weight: bold; font-style: italic; border-bottom: 2px solid #F26522; margin-bottom: .7rem; width: 100%; text-align: center; max-width: 900px;  }
.v-block-item1-1 > .link-block { display: flex; margin-top: 1rem; gap: 2rem; width: 100%; max-width: 900px; }
.v-block-item1-1 > .link-block > .link-item { display: flex; flex-direction: row; align-items: center; width: 33%; gap: 3rem; }
.v-block-item1-1 > .link-block > .link-item img { width: 75px; }
.v-block-item1-2 { width: 100%; }

@media all and (max-width: 768px) {
    .v-block1 { flex-direction: column; }
    .v-block-item1 { width: calc(100% - 2rem); }
    .v-block-item1-1 > .link-block > .link-item img { width: 35px; }
    .v-block-item1-1 > .link-block > .link-item { gap: 1rem; flex-direction: column; }

}
/*Section Portal End*/

/* Business Portal */
.v-banner5 { background-image: url("/assets/images/banner-bg.png"); background-size: cover; height: 25vw; background-repeat: no-repeat; background-position: center center; }
.v-banner5 > .container { height: 100%; display: flex; justify-content: center; align-items: center; }
.v-banner5 > .container > img { width: 60%; }
.v-banner7 { display: flex; justify-content: center; align-items: center; padding: 4rem; }
.v-banner7 > a { width: 15%; margin-left: 2rem; margin-right: 2rem; }
.v-banner7 > a > img { width: 100%; }
@media all and (max-width: 992px) {
    .v-banner7 { padding: 3rem 0; }
    .v-banner7 > a { width: 18%; }
}
@media all and (max-width: 768px) {
    .v-banner5 { height: 50vw; background-size: cover; }
    .v-banner5 > .container > img { width: 85%; }
    .v-banner6 { height: 100px; width: 100%; background-color: #3D3D3D; }
    .v-banner7 { padding: 3rem 0; flex-wrap: wrap; justify-content: center }
    .v-banner7 > a { width: 25%; margin: 1rem .75rem; }
}
/* Business Portal end */

/* Projects page */
.v-block-1 { width: 100%; height: 400px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; background-color: #f2f2f2; margin-bottom: 4.5rem; border-radius: .7rem; overflow: hidden; background-size: cover; background-repeat: no-repeat; background-position: center center; }
.v-block-1 > .image { width: 100%; height: 75%; display: flex; justify-content: center; align-items: center; background-position: center center; background-size: contain; background-repeat: no-repeat; }
.v-block-1 > .title { width: 100%; height: 25%; padding: 1.6rem 2rem; background-color: #00539F; color: white; font-style: italic; }
.v-block-1 > .title > h2 { font-size: 3.6rem; line-height: 1.2em; margin: .3rem 0; }
.v-block-1 > .title > h2 > a { color: white; }
.v-block-1 > .title > .sub-title { font-size: 1.3rem; }
.v-section-title { margin: 3rem 0 5rem 0; }
.v-section-title > .title { font-size: 4rem; color: #F26522; font-style: italic; border-bottom: 3px solid #F26522; text-align: center; font-weight: 600; line-height: 1.2em; padding: 1rem; }
.v-section-title > .subtitle { text-align: center; font-weight: lighter; color: #404041; line-height: 1.8em; font-size: 2.5rem; margin-top: .6rem; }
@media all and (max-width: 992px) {
    .v-block-1 { height: 320px; }
    .v-block-1 { margin-bottom: 3rem; }
    .v-block-1 > .title { height: 32%; padding: .8rem 1.6rem; }
    .v-block-1 > .title > h2 { font-size: 2.4rem; margin-top: 0; }
}
@media all and (max-width: 768px) {
    .v-block-1 { height: 320px; }
    .v-block-1 > .title { height: 32%; }
}
@media all and (max-width: 576px) {
    .v-block-1 { height: 300px; }
    .v-block-1 > .image { height: 80%; }
    .v-block-1 > .title { height: auto; min-height: 20%; }
    .v-section-title { margin: 0 0 3rem 0; }
    .v-section-title > .title { font-size: 2.2rem; }
    .v-section-title > .subtitle { font-size: 1.6rem; }
}
/* Projects page end */

/*Business*/
.__banner1 { height: auto; min-height: 120px; width: 100%; background-color: #3D3D3D; display: flex; justify-content: center; align-items: center; }
.__banner1 > .title { width: 100%; max-width: 1200px; color: #FFF; text-align: center; font-size: 3.5rem; font-weight: 300; line-height: 1.2em; }
.__banner2 { height: auto; min-height: 200px; width: 100%; padding: 1rem 2rem; background-color: #FFF; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.__banner2 > .title { width: 100%; max-width: 1200px; color: #404041; text-align: center; font-size: 4rem; font-weight: 600; font-style: italic; line-height: 1.2em; }
.__banner2 > .subtitle { font-size: 2.4rem; font-weight: 300; }
@media all and (max-width: 1200px) {
}
@media all and (max-width: 992px) {
    .__banner1 > .title { font-size: 3rem; }
    .__banner1 > .title { font-size: 3rem; width: 90%; }
    .__banner2 > .title { font-size: 4rem; }
}
@media all and (max-width: 768px) {
    .__banner1 > .title { font-size: 2.5rem; width: 90%; }
    .__banner2 { min-height: 140px; }
    .__banner2 > .title { font-size: 2.5rem; }
    .__banner2 > .subtitle { font-size: 1.8rem; }
}

/* Request back msg section */
.v-response-msg { display: none; }
.v-response-msg > .body { width: 100%; display: flex; justify-content: center; align-items: center; gap: 2rem;
    background-image: url("/assets/images/repeatable-30of100.png"); background-color: #FEFEFE; padding: 7rem 3rem;
    margin-top: 3rem; }
.v-response-msg > .body > .icon > img { width: 80%; max-width: 200px; }
.v-response-msg > .body > .desc { max-width: 550px; }
.v-response-msg > .body > .desc > div:nth-child(1) { font-size: 5rem; font-weight: bold; font-style: italic; color: #F26522; line-height: 1.1em; }
.v-response-msg > .body > .desc > div:nth-child(2) { font-size: 5rem; font-weight: bold; font-style: italic; color: #00539f; line-height: 1.1em; }
.v-response-msg > .body > .desc > div:nth-child(3) { font-size: 1.8rem; font-weight: bold; }
.v-response-msg > .bottom { border-top: 3px solid #F26522; margin-top: 3rem; padding-top: 3rem; }
@media all and (max-width: 992px) {
    .v-response-msg > .body > .desc > div:nth-child(1) { font-size: 4rem; }
    .v-response-msg > .body > .desc > div:nth-child(2) { font-size: 4rem; }
    .v-response-msg > .body > .desc > div:nth-child(3) { font-size: 1.6rem; }
}
@media all and (max-width: 768px) {
    .v-response-msg > .body { flex-direction: column; text-align: center; }
    .v-response-msg > .body > .desc > div:nth-child(1) { font-size: 3.5rem; }
    .v-response-msg > .body > .desc > div:nth-child(2) { font-size: 3.5rem; }
    .v-response-msg > .body > .desc > div:nth-child(3) { font-size: 1.5rem; margin-top: 1rem; }
}