* {
    margin:0; padding:0
}
.tree-or .box {
    position: relative;
    width: auto;
    height: auto;
    margin-bottom: 250px;
}
/* .large_view {
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
} */
.tree_ {
    margin: 0 auto;
    width: 1153px;
    height: fit-content;
}
.tree_ ul {
    padding-top: 80px;
    position: relative
}
.tree_ li{
    position: relative;
    float: left; text-align: center;
    list-style-type:none;
    padding: 35px 5px 0 5px
}

  /*We will use ::before and ::after to draw the connectors*/
.tree_ li::before, .tree_ li::after{
    content: '';
    position: absolute; top: 0; right: 50%;
    border-top: 3px solid #ccc;
    width: 50%; height: 20px;
}
.tree_ li::after{
    right: auto; left: 50%;
    border-left: 3px solid #ccc;
}

/*We will use ::before and ::after to draw the connectors*/

.tree_ li::before, .tree_ li::after{
	content: '';
	position: absolute; top: 0; right: 50%;
	border-top: 3px solid #ccc;
	width: 50%; height: 32px;
}
.tree_ li::after{
	right: auto; left: 50%;
	border-left: 3px solid #ccc;
}

/*We need to remove left-right connectors from elements without
any siblings*/
.tree_ li:only-child::after, .tree_ li:only-child::before {
	display: none;
}

/*Remove space from the top of single children*/
.tree_ li:only-child{ padding-top: 0;}

/*Remove left connector from first child and
right connector from last child*/
.tree_ li:first-child::before, .tree_ li:last-child::after{
	border: 0 none;
}
/*Adding back the vertical connector to the last nodes*/
.tree_ li:last-child::before{
	border-right: 3px solid #ccc;
}

/*Time to add downward connectors from parents*/
.tree_  ul ul::before{
	content: '';
	position: absolute; top: 0; left: 50%;
	border-left: 3px solid #ccc;
	width: 0; height: 80px;
}

.tree_ .haed_topic {
    /* font-size:36px; */

    font-size:48px;
    font-weight: bold;
    color: #ffffff;
    margin: 0 auto;
    padding: 20px 105px;
    background-color: #0F2852;
}
.tree_ .sd_submenu {
    /* font-size: 24px; */
    font-size: 36px;
    color: #ffffff;
    padding: 15px 25px;
    background-color: #117FE7;
}
.tree_ .small {
    font-size: 26px;
    padding: 24.5px 10px;
}
.tree_ .smaller {
    font-size: 20px;
    padding: 32px 10px;
}
.tree_ .cent {
    margin-left: -446px;
}
.tree_ .cent::before, .tree_ .cent::after{
    width: 36%;
}
.tree_ .lef {
    margin-left: -202px;
}
.tree_ .lef::after{
    width: 45%
}
.tree_ .th_submenu{
    font-size: 36px;
    background-color: #DCE5EA;
    color: #263D62;
    padding: 20px 20px;
}
.tree_ .fth_submenu {
    color: #263D62;
    padding: 2em 0.5em 0 .5em;
}
.tree_ .fth_submenu ul{
    padding-top: 0;
}
.tree_ .fth_submenu > p{
    height: 80px;
}
.tree_ .one {
    padding: 20px;
    background: #f3f4f6;
    font-size: 28px;
}
.tree_ li p {
    text-align: center;
    font-size: 29px;
    display: inline-block;
    line-height: 1;
    margin-bottom: 0;
}
.test {
    margin-top: 0;
}

.test li{
    float: none; text-align: left;
    list-style-type:disc;
    padding: 5px;
}
.test li p {
    color: #77818c;
    text-align: left;
}
.tree_ .test li::before, .tree_ .test li::after{
    display: none;
}
.tree_ .test li:last-child::before{
    display: none;
}
.tree_ .fth_submenu ul::before {
    content: none;
}

.tree_ li p {
    font-size: 20px
}

.tree_ .th_submenu {
    font-size: 28px
}
.tree_ .sd_submenu {
    font-size: 30px;
}
.tree_ .small {
    font-size: 23px;
    padding: 21.5px 10px;
}
.tree_ .smaller {
    font-size: 18px;
    padding: 27px 10px;
}
.tree_ .haed_topic {
    font-size: 40px;
    font-weight: bold;
}
.tree_ .cent {
    margin-left: -454px;
}
.tree_ .cent::before, .tree_ .cent::after {
    width: 42%;
}
.tree_ .lef {
    margin-left: -182px;
}
.tree_ .blue_1 {
    margin: 0 75px;
}
@media screen and (max-width:1200px){
    .tree_ .haed_topic {
        font-size: 38px;
    }
    .tree_ li p {
        font-size: 16.5px;
    }
    .tree_ .th_submenu {
        font-size: 25px;
    }
    .tree_ .one {
        font-size: 25px;
    }
    .tree_ .sd_submenu {
        font-size: 28px;
    }
    .tree_ .small {
        font-size: 21px;
        padding: 21.5px 10px;
    }
    .tree_ .smaller {
        font-size: 17px;
        padding: 27px 10px;
    }
    .tree_ .cent::before, .tree_ .cent::after {
        width: 35%;
    }
    .tree_ .blue_1 {
        margin: 0 31px;
    }
    .tree_ .cent {
        margin-left: -383px;
    }
    .tree_ .lef {
        margin-left: -200px;
    }
}

/* A2 MESSAGE FROM CHAIRMAN */

.about_message {
    margin-top: 50px;
    margin-bottom: 100px;
}
.about_message .col p {
    line-height: 1;
    color: #2851A0;
    font-size: 29px;
    font-weight: 300;
}
.about_message .col h2 {
    color: #2851A0;
    font-size: 30px;
}
.about_message .btn_about_message {
    color: #ffffff;
    position: absolute;
    background-color: #2851A0 !important;
    width: 657px;
    height: 90px;
    font-size: 40px;
    font-size: 50px;
    top: 40px;
    left: 85%;
}
.about_message .btn_about_message:hover {
    color: #ffffff;
}
.about_message .row {
    align-items: center;

}
.about_message .col {
    padding: 120px 60px 0 60px;
    width: auto;
    height: auto;
    /* background: aquamarine; */
}
.about_message .col {
    padding: 120px 205px 0 60px;
}
@media screen and (min-width: 1200px) {
    .about_message {
        padding-left: 98px;
    }
}

@media screen and (max-width: 1199px) {
    .about_message .btn_about_message {
        width: 605px;
    }
    .about_message .col {
        padding: 163px 60px 0 60px;
    }
}
@media screen and (max-width: 992px) {
    .about_message .btn_about_message {
       width: 500px;;
    }
}
@media screen and (max-width: 934px) {
    .about_message .btn_about_message {
        width: 100%;
        position: initial;
        top: initial;
        left: initial;
    }
    .message_head {
        padding: 0 81px;
    }
    .about_message .row {
        flex-direction: column;
    }
    .about_message .col {
        padding: 70px 60px 0px 60px;
    }
    .message_head img {
        padding: 60px 145px 0 145px;
    }
}
@media screen and (max-width: 768px) {
    .message_head img {
        padding: 60px 63px 0 63px;
    }
}
@media screen and (max-width: 576px) {
    .about_message .btn_about_message {
        font-size: 35px;
        width: 100%;
        font-size: 40px;
        line-height: 1;
    }
    .message_head {
        padding: 0 50px;
    }
    .message_head img {
        padding: 60px 0px 0 0px;
    }
    .about_message .col {
        padding: 60px 50px 0px 50px;
    }
    .message_head .col p {
        font-size: 24px;
    }
}

/* A2 MESSAGE FROM CHAIRMAN */

/* BUSINESS STRUCTURE */
.about-bis {
    width: initial;
}
.topic-bis {
    margin: 0 auto;
}
.about-bis .line-sub {
    margin: 0px;
    padding: 0 114px;
}
@media screen and (max-width: 1200px) {
    .about-bis .element-bis ul li {
        padding: 44px 21px;
    }
    .about-bis .element-bis {
        margin: 0 70px;
    }
}
@media screen and (max-width: 1199px) {
    .about-bis .element-bis .ele-txt h2 {
        font-size: 25px;
    }
    .about-bis .element-bis .ele-txt p {
        font-size: 22px;
    }
    .about-bis .element-bis .ele-01, .about-bis .element-bis .ele-02, .about-bis .element-bis .ele-03, .about-bis .element-bis .ele-04 {
        background-size: cover;
        width: 180px;
        height: 180px;
    }
    .about-bis .element-bis .sub-ele {
        margin: -31px 0px 0px 85px;
    }
    .about-bis .element-bis ul li:first-child {
        padding-left: 0;
    }
}

@media screen and (max-width: 992px) {
    .about-bis .line-sub {
        display: none;
    }
    .about-bis .element-bis ul {
        display: grid;
        grid-template-columns: auto auto;
    }
    .about-bis .element-bis {
        width: initial;
    }
    .about-bis .element-bis .ele-01, .about-bis .element-bis .ele-02, .about-bis .element-bis .ele-03, .about-bis .element-bis .ele-04 {
        width: 215px;
        height: 215px;
        margin: 0 auto;
    }
    .about-bis .element-bis ul li:first-child {
        padding-left: 44px;
    }
    .about-bis .element-bis ul {
        margin: 0px;
        padding: 30px 0 65px 0;
    }
    .about-bis .element-bis .ele-txt h2 {
        font-size: 30px;
    }
    .about-bis .element-bis .ele-txt p {
        font-size: 25px;
    }
    .about-bis .element-bis .sub-ele {
        margin: -31px 0px 0px 170px;
    }
    .about-bis .element-bis ul li {
        padding: 44px 44px 0 44px;
    }
    .about-bis {
        height: auto;
        background-size: contain;
        background-position: bottom;
        background-image: url(http://wewebcloud.com/dev21-a2/front/template/default//assets/img/static/aboutuspage/bis/bg-bis);
        background-repeat: no-repeat;
    }
}
@media screen and (max-width: 768px) {
    .about-bis .element-bis ul li:first-child {
        padding-left: 35px;
    }
    .about-bis .element-bis ul li {
        padding: 35px;
    }
    .about-bis .element-bis .sub-ele {
        margin: -31px 0px 0px 129px;
    }
}
@media screen and (max-width: 576px) {
    .about-bis .element-bis ul {
        grid-template-columns: auto;
    }
    .about-bis .element-bis .sub-ele {
        margin: -31px 0px 0px 184px;
    }
    .topic-bis {
        width: 470px;
    }
    .topic-bis img {
        height: 50px;
    }
}
@media screen and (max-width: 444px) {
    .topic-bis {
        width: 346px;
    }
    .about-bis .element-bis .sub-ele {
        margin: -31px 0px 0px 126px;
    }
}
@media screen and (max-width: 412px) {
    .topic-bis {
        width: 346px;
    }
    .about-bis .element-bis .sub-ele {
        margin: -31px 0px 0px 116px;
    }
    .about-bis .element-bis ul {
        margin-left: -22px;
    }
}
@media screen and (max-width: 376px) {
    .about-bis .element-bis ul {
        margin-left: -42px;
    }
    .topic-bis img {
        height: 35px;
    }
    .topic-bis {
        width: 300px;
    }
}
@media screen and (max-width: 320px) {
    .about-bis .element-bis ul {
        margin-left: -66px;
    }
    .topic-bis {
        width: 288px;
    }
}

/* BUSINESS STRUCTURE */

/* 15/12/2021 */
.test li p {
    display: block;
}

/* 16/12/2021 */
/* New leaves */
.tree_ .cent::before, .tree_ .cent::after {
    width: 36%;
}
.orc-subline2 {
    position: absolute;
    top: 59%;
    right: 402px;
    width: 116px;
}
.orc-subline3 {
    position: absolute;
    top: 75%;
    /* right: 268px; */
    right: 311px;
}
.tree-or .orc-subline3 h1{
    margin: 0;
    color: #263D62;
    font-size: 24px;
    font-weight: 300;
}
.tree-or .orc-subline2 h1 {
    margin: 0;
    color: #707070;
    font-size: 26px;
    font-weight: 300;
}
.tree-or .orc-subline3 h1:after {
    width: 60px;
    left: 147px;
}
.tree-or .orc-subline2 h1:before {
    left: -156px;

}
.tree-or .orc-line02 .orc-inline {
    width: 30%;
    height: auto;
    margin: 0;
    font-size: 28px;
    position: absolute;
    top: 777px;
    left: 109px;
}
.tree-or .orc-line02 .orc-inline:after {
    width: 50%;
}
.tree-or .orc-inline2 {
    position: absolute;
    font-size: 29px;
    color: #707070;
    top: 777px;
    right: 466px;
}
.tree-or .orc-line02 .orc-inline h3, .tree-or .orc-line02 .orc-inline2 h3{
    color: #263D62;
    font-size: 24px;
    font-weight: 300;
}
.tree-or .orc-line {
    width: 20%;
    height: auto;
    top: 172px;
    left: 234px;
    margin: 0;
    font-size: 28px;
    position: absolute;
}
.tree-or .orc-line h3 {
    font-weight: 300;
    font-size: 24px;
    padding: 10px 20px;
}
@media screen and (max-width: 1440px) {
    .tree-or .orc-line {
        left: 214px;
    }
    .orc-subline2 {
        right: 368px;
    }
    .orc-subline3 {
        right: 278px;
    }
}
@media screen and (max-width: 1024px) {
    .tree-or .orc-line {
        left: 141px;
    }
    .orc-subline2 {
        right: 250px;
    }
    .tree-or .orc-line02 .orc-inline {
        top: 760px;
        left: 54px;
    }
    .tree-or .orc-line02 .orc-inline:after {
        width: 46%;
    }
    .tree-or .orc-inline2 {
        top: 759px;
        right: 580px;
    }
    .orc-subline3 {
        right: 210px;
        top: 75.5%;
    }
}
@media screen and (max-width: 991px) {
    .tree-or .orc-line {
        left: 135px;
    }
    .orc-subline2 {
        right: 269px;
    }
    .orc-subline3 {
        right: 232px;
    }
}
@media screen and (max-width: 768px) {
    .tree-or .orc-line {
        left: 178px;
    }
    .orc-subline2 {
        right: 46px;
    }
    .orc-subline3 {
        right: 8px;
    }
}
/* New leaves */

/* 17/12/2021 */
/* scroll max-widtd:1200px */
@media screen and (max-width:1200px) {
    .tree-or .box {
        overflow: scroll;
    }
}

/* New leaves */
@media screen and (max-width: 576px) {
    .tree-or .orc-line h3 {
        width: max-content;
    }
    .tree-or .orc-line {
        width: 28%;
    }
    .tree-or .orc-line:after {
        left: 139px;
    }
    .orc-subline2 {
        right: -144px;
    }
    .orc-subline3 {
        right: -183px;
    }
}
@media screen and (max-width: 415px) {
    .tree-or .orc-line:after {
        left: 142px;
    }
    .tree-or .orc-line {
        width: 39%;
    }
    .orc-subline2 {
        right: -320px;
    }
    .orc-subline3 {
        right: -344px;
    }
}
@media screen and (max-width: 376px) {
    .tree-or .orc-line {
        width: 43%;
    }
    .orc-subline2 {
        right: -343px;
    }
    .orc-subline3 {
        right: -382px;
    }
}
@media screen and (max-width: 360px) {
    .tree-or .orc-line {
        width: 46%;
    }
    .tree-or .orc-line:after {
        left: 138px;
    }
    .orc-subline2 {
        right: -370px;
    }
    .orc-subline3 {
        right: -398px;
    }
}
@media screen and (max-width: 320px) {
    .tree-or .orc-line {
        width: 53%;
    }
    .orc-subline2 {
        right: -401px;
    }
    .orc-subline3 {
        right: -438px;
    }
}
/* New leaves */