html {
    scroll-behavior: smooth;
}

@media (min-width: 1300px) {
    * {
        box-sizing: border-box;
        padding   : 0;
        margin    : 0;
    }

    body {
        font-family: 'Montserrat', sans-serif;
        font-size  : 12px;
        color      : #244066;
    }

    section {
        padding-top: 80px;
    }

    .banner-img img {
        width     : 100%;
        height    : 1869px;
        object-fit: cover;
    }

    .banner-title {
        position    : absolute;
        top         : 0px;
        left        : 0px;
        width       : 100%;
        height      : 1869px;
        background  : linear-gradient(90deg, rgba(36, 64, 102, 0.95) 53.69%, rgba(36, 64, 102, 0) 100%);
        padding-top : 191px;
        padding-left: 212px;
        font-family : Old Standard TT;
    }

    .banner-title ul li {
        padding-right : 10px;
        border-bottom : 2px solid #FCBB49;
        padding-bottom: 42px;
    }

    .banner-title ul li a {
        color          : white;
        text-decoration: none;
    }

    .banner-title i {
        width     : 800px;
        margin-top: 38px;
    }

    .banner {
        width   : 100%;
        position: relative;
    }

    .banner-title h1 {
        font-size: 52px;
        color    : white;
    }

    .banner-title ul {
        display    : flex;
        list-style : none;
        font-family: Montserrat;
        font-size  : 14px;
        font-weight: 400;
        line-height: 24px;
        text-align : left;
        margin-top : 22px;
        font-style : italic;
    }

    .banner-intro {
        max-width         : 891px;
        margin-top        : 38px;
        color             : white;
        overflow          : hidden;
        text-overflow     : ellipsis;
        display           : -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        font-size         : 20px;
    }

    .banner-info {
        position       : absolute;
        display        : block;
        width          : 1167px;
        background     : #ffffff;
        height         : 1276px;
        padding        : 80px 126px;
        justify-content: space-between;
        left           : 0;
        right          : 0;
        margin         : auto;
        top            : 490px;
    }

    .banner-info-img {
        width: 100%;
    }

    .banner-info-title {
        width         : 100%;
        color         : #244066;
        font-family   : Montserrat;
        font-size     : 14px;
        font-weight   : 400;
        line-height   : 26px;
        letter-spacing: 0em;
        text-align    : left;
        margin        : 41px 0px;
    }

    .banner-info-img img {
        width     : 100%;
        height    : 567px;
        object-fit: cover;
    }

    .banner-info-number {
        display   : flex;
        width     : 100%;
        text-align: center;
        margin    : auto;
    }

    .number-info {
        border-right: 1px solid black;
        padding     : 0px 40px;
    }

    .number-info:last-child {
        border-right: none;
    }

    .number-item {
        font-family   : Old Standard TT;
        font-size     : 56px;
        font-weight   : 700;
        line-height   : 69px;
        letter-spacing: 0em;
        text-align    : center;
    }

    .number-title {
        font-family: Montserrat;
        font-size  : 16px;
        font-weight: 400;
        line-height: 26px;
        text-align : center;
    }

    .logo-about {
        position: absolute;
        top     : 74px;
        left    : 125px;
        opacity : 0.1;
    }

    .about-chairperson {
        width   : 1000px;
        margin  : auto;
        position: relative;
        padding : 165px 0px 190px 0px;
        color   : #244066;
    }

    .about-chairperson img {
        position: absolute;
        top     : 34px;
    }

    .chairperson-info h2 {
        font-family: Old Standard TT;
        font-size  : 56px;
        font-weight: 700;
        line-height: 69px;
        text-align : center;
    }

    .chairperson-info p {
        width      : 919px;
        margin     : auto;
        padding    : 18px 0px 33px 0px;
        font-family: Montserrat;
        font-size  : 14px;
        font-weight: 400;
        line-height: 26px;
        text-align : left;
    }

    .chairperson-signature {
        float     : right;
        text-align: center;
    }

    .chairperson-info {
        border-bottom: 1px solid #244066;
        margin-bottom: 34px;
    }

    .section-img {
        width : 1000px;
        margin: auto;
    }

    .section-img img {
        height: 567px;
        margin: 69px 0px 102px 0px;
        width : 1000px;
    }

    .organizational-chart {
        height  : 815px;
        position: relative;
        color   : white;
    }

    .organizational-chart img {
        width     : 100%;
        height    : 815px;
        object-fit: cover;
        position  : relative;
    }

    .organizational-info {
        position  : absolute;
        top       : 0;
        width     : 100%;
        height    : 100%;
        background: #244066;
        opacity   : 0.9;
        padding   : 112px 0px 0px 212px;
        display   : flex;
    }

    .organizational-info h2 {
        font-family: Old Standard TT;
        font-size  : 56px;
        font-weight: 700;
        line-height: 69px;
    }

    .organizational-info p {
        font-family   : Montserrat;
        font-size     : 14px;
        font-weight   : 400;
        line-height   : 26px;
        letter-spacing: 0em;
        text-align    : left;
        width         : 570px;
        margin-top    : 29px;
    }

    .organizational-img {
        height: 671px;
        width : 40%;
    }

    .organizational-img img {
        width     : 100%;
        height    : 100%;
        object-fit: cover;
    }

    .organizational-title {
        margin: 156px 40px 0px 0px;
    }

    .organizational-title button {
        border       : 1px solid white;
        background   : #244066;
        color        : white;
        height       : 55px;
        width        : 211px;
        border-radius: 0px;
        margin-top   : 35px;
    }

    .history-date h2 {
        font-family   : Old Standard TT;
        font-size     : 56px;
        font-weight   : 700;
        line-height   : 69px;
        text-align    : center;
        border-bottom : 1px solid;
        margin-bottom : 20px;
        padding-bottom: 55px;
        margin-top    : 111px;
    }

    .history-date ul {
        display        : flex;
        list-style     : none;
        justify-content: space-around;
    }

    .history-date ul li {
        position: relative;
        cursor  : pointer;
    }

    .history-date ul li::after {
        content : url(../img/history.svg);
        position: absolute;
        top     : -27px;
        left    : 7px;
    }

    .history-date ul#test1 li:last-child::after {
        content   : url(../img/nextAbout.svg);
        position  : absolute;
        top       : -27px;
        left      : 7px;
        background: white;
    }

    .history-date ul#test2 li:first-child::after {
        content   : url(../img/nextAbout.svg);
        position  : absolute;
        top       : -30px;
        left      : 7px;
        transform : rotate(180deg);
        background: white;
    }

    .history-date ul li.active::after {
        content : url(../img/historyActive.svg);
        position: absolute;
        top     : -27px;
        left    : 7px;
    }

    .history-date ul li.active::before {
        content : url(../img/historyActiveBorder.svg);
        position: absolute;
        top     : -44px;
        left    : -10px;
    }

    .history-time {
        display   : flex;
        width     : 100%;
        margin-top: 65px;
    }

    .history-time-img img {
        height          : 445px;
        width           : 570px;
        /* left         : 215px; */
        /* top          : 3940px; */
        /* border-radius: 0px; */
    }

    .history-time-img {
        width             : 50%;
        /* justify-content: center; */
        /* text-align     : center; */
        /* margin         : unset; */
        text-align        : center;
    }

    .history-info {
        width: 50%;
    }

    .history-time-info {
        width         : 496px;
        font-family   : Montserrat;
        font-size     : 14px;
        font-weight   : 400;
        line-height   : 26px;
        letter-spacing: 0em;
        text-align    : left;
    }

    .history-time-info h3 {
        font-family  : Old Standard TT;
        font-size    : 30px;
        font-weight  : 700;
        line-height  : 37px;
        text-align   : left;
        margin-bottom: 9px;
    }

    .history-button {
        text-align: right;
        width     : 496px;
        margin-top: 40px;
    }

    .history-button button {
        width      : 44px;
        height     : 44px;
        background : #ffffff;
        border     : 1px solid #244066;
        margin-left: 22px;
    }

    .history-date {
        margin-bottom: 134px;
    }

    .desktop {
        display: block;
    }

    .mobile {
        display: none;
    }

    .leader-chart {
        height  : 1282px;
        position: relative;
        color   : white;
    }

    .leader-chart img {
        width     : 100%;
        height    : 1282px;
        object-fit: cover;
        position  : relative;
    }

    .leader-info {
        position  : absolute;
        top       : 0;
        width     : 100%;
        height    : 100%;
        background: #244066;
        opacity   : 0.9;
        padding   : 112px 0px 0px 212px;
    }

    .leader-content-info img {
        height       : 80px;
        width        : 80px;
        border-radius: 50%;
    }

    .leader-info h2 {
        font-family: Old Standard TT;
        font-size  : 56px;
        font-weight: 700;
        line-height: 69px;
    }

    .leader-info p {
        font-family   : Montserrat;
        font-size     : 14px;
        font-weight   : 400;
        line-height   : 26px;
        letter-spacing: 0em;
        text-align    : left;
        width         : 570px;
        margin-top    : 29px;
    }

    .leader {
        position: absolute;
        top     : 0;
        right   : 0;
        padding : 150px 212px 0px 0px;
    }

    .leader ul {
        display        : flex;
        list-style     : none;
        justify-content: right;
        font-family    : Montserrat;
        font-size      : 14px;
        /* font-weight : 600; */
        line-height    : 26px;
        letter-spacing : 0em;
        text-align     : center;
    }

    .leader ul li {
        border         : 1px solid white;
        display        : flex;
        align-items    : center;
        padding        : 0px 20px;
        background     : white;
        color          : #244066;
        /* font-weight : 700; */
        margin         : 0px 22px 70px 0px;
        text-align     : center;
        position       : relative;
        min-width      : 230px;
        justify-content: center;
        height         : 212px;
        width          : 196px;
        cursor         : pointer;
        border-radius  : 0px;
    }

    .leader ul li.leader-content-one::after {
        position: absolute;
        content : url("../img/contentOne.svg");
        bottom  : -72px;
        left    : 106px;
    }

    .leader ul li.leader-content-three::after {
        content : url("../img/contentThree.svg");
        position: absolute;
        left    : 237px;
        top     : 47px;
    }

    .leader ul li.leader-content-four::after {
        content : url("../img/leader1.svg");
        position: absolute;
        bottom  : 94px;
        left    : 125px;
    }

    .leader ul li.leader-content-five::after {
        content : url("../img/leader1.svg");
        position: absolute;
        bottom  : 213px;
        left    : 29px;
    }

    .leader ul li.leader-content-six::after {
        content : url("../img/leader2.svg");
        position: absolute;
        bottom  : 100px;
        left    : 107px;
    }

    .leader ul li.leader-content-six::after {
        content : url("../img/leader2.svg");
        position: absolute;
        bottom  : 213px;
        left    : 107px;
    }

    .leader ul li.leader-content-seven::after {
        content : url("../img/leader2.svg");
        position: absolute;
        bottom  : 212px;
        left    : 35px;
    }

    .leader ul li.leader-content-eight::after {
        content : url("../img/leader4.svg");
        position: absolute;
        bottom  : 211px;
        left    : 95px;
    }

    li.leader-content-three {
        left: 28px;
    }

    li.leader-content-four {
        left: 113px;
    }

    li.leader-content-five {
        left: 120px;
    }

    li.leader-content-seven {
        left: 138px;
    }

    li.leader-content-eight {
        left: 146px;
    }

    li.leader-content-six {
        left: 132px;
    }

    .partner {
        width         : 100%;
        text-align    : center;
        padding-bottom: 82px;
    }

    .partner h2 {
        font-family   : Old Standard TT;
        font-size     : 56px;
        font-weight   : 700;
        line-height   : 69px;
        letter-spacing: 0em;
        text-align    : center;
        margin        : 81px 0px 35px 0px;
    }

    .logo-partner {
        width : 80%;
        margin: auto;
    }

    .logo-partner img {
        height       : 127.02941131591797px;
        width        : 259.7297668457031px;
        left         : 820.6580810546875px;
        /* top       : 5961px; */
        border-radius: 8px;
        margin       : 10px;
        border       : 1px solid #E8E8E8;
    }

    .vision {
        position: relative;
    }

    .vision-banner {
        width : 100%;
        height: 628px;
    }

    .vision-banner img {
        width     : 100%;
        height    : 628px;
        object-fit: cover;
    }

    .vision-info {
        position  : absolute;
        top       : 0;
        width     : 100%;
        height    : 100%;
        background: linear-gradient(90deg, rgba(36, 64, 102, 0.95) 53.69%, rgba(36, 64, 102, 0) 100%);
        color     : white;
        text-align: center;
    }

    .vision-info h2 {
        font-family   : Old Standard TT;
        font-size     : 56px;
        font-weight   : 700;
        line-height   : 69px;
        letter-spacing: 0em;
        text-align    : center;
        margin        : 97px 0px 14px 0px;
    }

    .vision-info p {
        font-family   : Montserrat;
        font-size     : 14px;
        font-weight   : 400;
        line-height   : 26px;
        letter-spacing: 0em;
        text-align    : center;
        width         : 60%;
        margin        : auto;
    }

    .vision-img {
        position     : absolute;
        height       : 595px;
        width        : 80%;
        top          : 267px;
        border-radius: 0px;
        left         : 0;
        right        : 0;
        margin       : auto;
    }

    .vision-img img {
        height    : 595px;
        width     : 100%;
        object-fit: cover;
    }

    .mission {
        width : 80%;
        margin: 274px auto 0px;
    }

    .mission h2 {
        font-family   : Old Standard TT;
        font-size     : 56px;
        font-weight   : 700;
        line-height   : 69px;
        letter-spacing: 0em;
        text-align    : center;
    }

    .mission p {
        font-family   : Montserrat;
        font-size     : 14px;
        font-weight   : 500;
        line-height   : 26px;
        letter-spacing: 0em;
        text-align    : center;
        margin        : 8px 0px 32px 0px;
    }

    .mission-info {
        display        : flex;
        justify-content: space-around;
    }

    .mission-item {
        display: block;
        width  : 40%;
    }

    .mission-item-info li {
        font-family: Montserrat;
        font-size  : 14px;
        font-weight: 700;
        line-height: 26px;
        text-align : left;
    }

    .mission-item-info p {
        font-family   : Montserrat;
        font-size     : 14px;
        font-weight   : 400;
        line-height   : 26px;
        letter-spacing: 0em;
        text-align    : left;
    }

    .core-values {
        display: flex;
        width  : 80%;
        margin : auto;
    }

    .core-values-img {
        height  : 524px;
        width   : 50%;
        position: relative;
    }

    .core-values-img img {
        width     : 90%;
        height    : 100%;
        object-fit: cover;
        position  : absolute;
        top       : 86px;
        z-index   : 99;
    }

    .core-values-info {
        width     : 50%;
        margin-top: 74px;
    }

    .core-values-info h2 {
        font-family   : Old Standard TT;
        font-size     : 56px;
        font-weight   : 700;
        line-height   : 69px;
        letter-spacing: 0em;
        text-align    : left;
        margin        : 20px 0px 10px 0px;
    }

    .core-values-info p {
        font-family   : Montserrat;
        font-size     : 14px;
        font-weight   : 400;
        line-height   : 26px;
        letter-spacing: 0em;
        text-align    : left;
    }

    #test1 {
        display: none;
    }

    #test1.activeHis {
        display: flex;
    }

    #test2 {
        display: none;
    }

    #test2.activeHis {
        display: flex;
    }

    div#chart-view {
        display: none;
    }

    div#chart-view.activeChart {
        position   : fixed;
        z-index    : 9999;
        width      : 100%;
        height     : 100%;
        top        : 0;
        left       : 0;
        right      : 0;
        bottom     : 0;
        margin     : auto;
        background : #343434;
        align-items: center;
        display    : flex;
    }

    div#chart-view.activeChart img {
        width : 80%;
        height: 80%;
        margin: auto;
    }

    div#chart-view img {
        -webkit-animation-name    : zoom;
        -webkit-animation-duration: 0.6s;
        animation-name            : zoom;
        animation-duration        : 0.6s;
    }

    @-webkit-keyframes zoom {
        from {
            -webkit-transform: scale(0)
        }

        to {
            -webkit-transform: scale(1)
        }
    }

    @keyframes zoom {
        from {
            transform: scale(0)
        }

        to {
            transform: scale(1)
        }
    }

    .close-chart {
        color    : white;
        position : absolute;
        top      : 21px;
        right    : 49px;
        font-size: 33px;
        cursor   : pointer;
    }

    /* div#leader-view {
          display: none;
      }
      div#leader-view.activeleader {
          position: fixed;
          z-index: 9999;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          margin: auto;
          background: #343434;
          align-items: center;
          display: flex;
      }
      
      div#leader-view.activeleader img {
          width: 80%;
          height: 80%;
          margin: auto;
      }
      div#leader-view img {
          -webkit-animation-name: zoom;
          -webkit-animation-duration: 0.6s;
          animation-name: zoom;
          animation-duration: 0.6s;
      }
      @-webkit-keyframes zoom {
          from {-webkit-transform:scale(0)} 
          to {-webkit-transform:scale(1)}
      }
        
      @keyframes zoom {
          from {transform:scale(0)} 
          to {transform:scale(1)}
      } */
    .close-chart {
        color    : white;
        position : absolute;
        top      : 21px;
        right    : 49px;
        font-size: 33px;
        cursor   : pointer;
    }

    div#leader-view.activePopup {
        position  : fixed;
        z-index   : 9999;
        width     : 100%;
        height    : 100%;
        top       : 0;
        left      : 0;
        right     : 0;
        bottom    : 0;
        margin    : auto;
        background: #343434;
        display   : flex;
    }

    div#leader-view {
        display                   : none;
        -webkit-animation-name    : zoomLeader;
        -webkit-animation-duration: 0.6s;
        animation-name            : zoomLeader;
        animation-duration        : 0.6s;
    }

    @-webkit-keyframes zoomLeader {
        from {
            -webkit-transform: scale(0)
        }

        to {
            -webkit-transform: scale(1)
        }
    }

    @keyframes zoomLeader {
        from {
            transform: scale(0)
        }

        to {
            transform: scale(1)
        }
    }

    .popup-leader-img img {
        width        : 500px;
        height       : auto;
    }

    .popup-leader-img {
        /* display       : flex; */
        /* align-items   : center; */
        /* font-family   : Old Standard TT; */
        /* font-size     : 18px;
        line-height   : 26px;
        letter-spacing: 0em; */
        text-align    : center;
    }

    .popup-leader {
        overflow  : auto;
        padding   : 45px;
        background: white;
        color     : #244066;
        width     : 50%;
        margin    : auto;
    }

    .popup-leader-info {
        font-family   : Montserrat;
        font-size     : 14px;
        font-weight   : 400;
        line-height   : 36px;
        letter-spacing: 0em;
        text-align    : left;
    }

    .popup-leader-info ul {
        margin-left: 27px;
    }

    .popup-leader-job {
        font-family   : Montserrat;
        font-size     : 14px;
        font-weight   : 400;
        line-height   : 24px;
        letter-spacing: 0em;
        text-align    : left;
    }

    .popup-leader-job b {
        line-height: 5;
    }

    /* width */
    ::-webkit-scrollbar {
        width: 9px;
    }

    /* Track */
    ::-webkit-scrollbar-track {
        box-shadow   : inset 0 0 5px #E9E9E9;
        border-radius: 10px;
    }

    /* Handle */
    ::-webkit-scrollbar-thumb {
        background   : #CBCBCB;
        border-radius: 10px;
    }

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #8d8c8c;
    }
}

@media (min-width: 0px) and (max-width: 1300px) {

    * {
        box-sizing: border-box;
        padding   : 0;
        margin    : 0;
    }

    body {
        font-family: 'Montserrat', sans-serif;
        font-size  : 12px;
        color      : #244066;
    }

    .logo-about img {
        width: 100%;
    }

    section {
        padding-top: 80px;
    }

    .banner-img img {
        width     : 100%;
        height    : 584px;
        object-fit: cover;
    }

    .banner-title {
        position    : absolute;
        top         : 0px;
        left        : 0px;
        width       : 100%;
        height      : 584px;
        background  : linear-gradient(90deg, rgba(36, 64, 102, 0.95) 53.69%, rgba(36, 64, 102, 0) 100%);
        padding-top : 81px;
        padding-left: 14px;
        font-family : Old Standard TT;
    }

    .banner-title ul li {
        padding-right : 10px;
        border-bottom : 2px solid #FCBB49;
        padding-bottom: 24px;
    }

    .banner-title ul li a {
        color          : white;
        text-decoration: none;
    }

    .banner-title i {
        width     : 800px;
        margin-top: 38px;
    }

    .banner {
        width   : 100%;
        position: relative;
    }

    .banner-title h1 {
        font-size: 44px;
        color    : white;
    }

    .banner-title ul {
        display    : flex;
        list-style : none;
        font-family: Montserrat;
        font-size  : 12px;
        font-weight: 400;
        line-height: 24px;
        text-align : left;
        margin-top : 12px;
        font-style : italic;
    }

    .banner-intro {
        max-width         : 90%;
        margin-top        : 22px;
        color             : white;
        overflow          : hidden;
        text-overflow     : ellipsis;
        display           : -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        font-size         : 16px;
        line-height       : 24px;
    }

    .banner-info {
        background: #ffffff;
        left      : 0;
        right     : 0;
        margin    : auto;
        position  : relative;
        padding   : 0px 20px;
    }

    .banner-info-title {
        color         : #244066;
        font-family   : Montserrat;
        font-size     : 14px;
        font-weight   : 400;
        line-height   : 26px;
        letter-spacing: 0em;
        text-align    : justify;
        padding-top   : 200px;
    }

    .banner-info-img img {
        height       : 437px;
        width        : 100%;
        border-radius: 0px;
        position     : absolute;
        top          : -261px;
        left         : 0;
        right        : 0;
        margin       : auto;
        object-fit   : cover;
        padding      : 0px 20px;
    }

    .logo-about {
        position: absolute;
        top     : 74px;
        left    : 0px;
        opacity : 0.1;
    }

    .about-chairperson {
        margin    : auto;
        position  : relative;
        color     : #244066;
        padding   : 0px 20px;
        margin-top: 30px;
    }

    .about-chairperson img {
        height       : 117px;
        width        : 117px;
        left         : 20px;
        top          : 1519px;
        border-radius: 0px;
    }

    .chairperson-info h2 {
        font-family: Old Standard TT;
        font-size  : 36px;
        font-weight: 700;
        line-height: 44px;
        text-align : center;
        position   : absolute;
        top        : -3px;
        left       : 130px;
        padding    : 0px 28px;
    }

    .chairperson-info p {
        /* width: 919px; */
        margin     : auto;
        padding    : 17px 0px 9px 0px;
        font-family: Montserrat;
        font-size  : 14px;
        font-weight: 400;
        line-height: 26px;
        text-align : justify;
    }

    .chairperson-signature {
        text-align: center;
    }

    .chairperson-info {
        border-bottom: 1px solid #244066;
        margin-bottom: 13px;
    }

    .section-img {
        margin: auto;
    }

    .section-img img {
        height       : 228px;
        padding      : 31px 20px 23px 20px;
        width        : 100%;
        object-fit   : cover;
        border-radius: 0px;
    }

    .organizational-chart {
        height  : 586px;
        position: relative;
        color   : white;
    }

    .organizational-chart img {
        width     : 100%;
        height    : 586px;
        object-fit: cover;
        position  : relative;
    }

    .organizational-info {
        position  : absolute;
        top       : 0;
        width     : 100%;
        height    : 100%;
        background: #244066;
        opacity   : 0.9;
        padding   : 70px 20px 0px 20px;
    }

    .organizational-info h2 {
        font-family: Old Standard TT;
        font-size  : 36px;
        font-weight: 700;
        line-height: 44px;
    }

    .organizational-info p {
        font-family       : Montserrat;
        font-size         : 14px;
        font-weight       : 400;
        line-height       : 26px;
        letter-spacing    : 0em;
        text-align        : left;
        margin-top        : 29px;
        overflow          : hidden;
        text-overflow     : ellipsis;
        display           : -webkit-box;
        -webkit-line-clamp: 11;
        -webkit-box-orient: vertical;
    }

    .chart {
        position       : absolute;
        top            : 450px;
        left           : 0;
        right          : 0;
        margin         : auto;
        justify-content: center;
        width          : 100%;
    }

    .chart ul {
        list-style    : none;
        font-family   : Montserrat;
        font-size     : 14px;
        font-weight   : 600;
        line-height   : 26px;
        letter-spacing: 0em;
        border-radius : 0px;
        margin        : 0px auto 73px;
    }

    .chart ul li {
        border         : 1px solid white;
        display        : flex;
        align-items    : center;
        padding        : 3px 10px;
        background     : white;
        color          : #244066;
        font-weight    : 700;
        margin         : 10px auto;
        text-align     : center;
        position       : relative;
        width          : 123px;
        justify-content: center;
    }

    .chart ul li.content-one::after {
        position: absolute;
        content : url("../img/contentOne.svg");
        bottom  : -74px;
        left    : 56px;
    }

    .chart ul li.content-two::after {
        content : url("../img/contentReponLeft.svg");
        position: absolute;
        left    : -48px;
        top     : 39px;
    }

    .chart ul li.content-four::after {
        content : url("../img/contentReponRight.svg");
        position: absolute;
        bottom  : 54px;
        left    : 42px;
    }

    .chart ul li.content-five::after {
        content : url("../img/contentFive.svg");
        position: absolute;
        bottom  : 100px;
        left    : 83px;
        display : none;
    }

    .chart ul li.content-six::after {
        content : url("../img/contentOne.svg");
        position: absolute;
        bottom  : 181px;
        left    : 42px;
    }

    .chart ul li.content-eight::after {
        content : url("../img/contentOne.svg");
        position: absolute;
        bottom  : 89px;
        left    : 73px;
    }

    li.content-three {
        right: 8px;
    }

    li.content-five {
        right: 90px;
    }

    li.content-seven {
        right: 90px;
    }

    li.content-eight {
        left  : 81px;
        bottom: 261px;
    }

    li.content-six {
        right: 90px;
    }

    .history-date h2 {
        font-family  : Old Standard TT;
        font-size    : 36px;
        font-weight  : 700;
        line-height  : 44px;
        text-align   : left;
        border-bottom: 1px solid;
        margin-bottom: 20px;
        margin-top   : 60px;
        padding      : 0px 20px 24px 20px;
    }

    .history-date ul {
        display        : flex;
        list-style     : none;
        justify-content: space-around;
    }

    .history-date ul li {
        position: relative;
        cursor  : pointer;
    }

    .history-date ul li::after {
        content : url(../img/history.svg);
        position: absolute;
        top     : -27px;
        left    : 7px;
    }

    .history-date ul li.active::after {
        content : url(../img/historyActive.svg);
        position: absolute;
        top     : -27px;
        left    : 7px;
    }

    .history-date ul li.active::before {
        content : url(../img/historyActiveBorder.svg);
        position: absolute;
        top     : -44px;
        left    : -10px;
    }

    .history-time {
        display   : flex;
        width     : 100%;
        margin-top: 20px;
        flex-wrap : wrap;
    }

    .history-time-img img {
        height    : 100%;
        width     : 100%;
        object-fit: cover;
    }

    .history-time-img {
        height       : 200px;
        margin-bottom: 13px;
        /* position  : absolute; */
        width        : 100%;
    }

    .history-info {
        padding : 0px 20px;
        position: relative;
    }

    .history-time-info {
        font-family   : Montserrat;
        font-size     : 14px;
        font-weight   : 400;
        line-height   : 26px;
        letter-spacing: 0em;
        text-align    : justify;
    }

    .history-time-info h3 {
        font-family  : Old Standard TT;
        font-size    : 30px;
        font-weight  : 700;
        line-height  : 37px;
        text-align   : left;
        margin-bottom: 9px;
    }

    .history-button {
        text-align   : right;
        position     : absolute;
        top          : 0;
        right        : 0;
        padding-right: 20px;
        padding-top  : 4px;
    }

    .history-button button {
        background : #ffffff;
        border     : 1px solid #244066;
        margin-left: 15px;
        height     : 30px;
        width      : 30px;
        left       : 281px;
        top        : 3873px;
    }

    ul.chart-three {
        display        : flex;
        justify-content: space-between;
        width          : 330px;
    }

    ul.chart-five {
        width             : 330px;
        /* justify-content: left; */
        /* text-align     : left; */
    }

    .desktop {
        display: none;
    }

    .mobile {
        display      : block;
        margin-bottom: 30px;
    }

    .banner-info-number {
        display   : flex;
        flex-wrap : wrap;
        text-align: center;
        margin    : 30px 10px;
    }

    .number-info {
        width  : 50%;
        border : 1px solid;
        padding: 15px 0px;
    }

    .number-item {
        font-family   : Old Standard TT;
        font-size     : 30px;
        font-weight   : 700;
        line-height   : 37px;
        letter-spacing: 0em;
        text-align    : center;
    }

    .number-title {
        font-family   : Montserrat;
        font-size     : 14px;
        font-weight   : 400;
        line-height   : 17px;
        letter-spacing: 0em;
        text-align    : center;
    }

    .vision {
        position  : relative;
        margin-top: 44px;
    }

    .vision-banner {
        width : 100%;
        height: 436px;
    }

    .vision-banner img {
        width     : 100%;
        height    : 436px;
        object-fit: cover;
    }

    .vision-info {
        position  : absolute;
        top       : 0;
        width     : 100%;
        height    : 100%;
        background: linear-gradient(90deg, rgba(36, 64, 102, 0.95) 53.69%, rgba(36, 64, 102, 0) 100%);
        color     : white;
        text-align: center;
    }

    .vision-info h2 {
        font-family   : Old Standard TT;
        font-size     : 56px;
        font-weight   : 700;
        line-height   : 69px;
        letter-spacing: 0em;
        text-align    : center;
        font-family   : Old Standard TT;
        font-size     : 36px;
        font-weight   : 700;
        line-height   : 44px;
        letter-spacing: 0em;
        text-align    : center;
        margin        : 56px 0px 6px 0px;
    }

    .vision-info p {
        font-family   : Montserrat;
        font-size     : 14px;
        font-weight   : 400;
        line-height   : 26px;
        letter-spacing: 0em;
        text-align    : center;
        width         : 80%;
        margin        : auto;
        font-family   : Montserrat;
        font-size     : 14px;
        font-weight   : 400;
        line-height   : 26px;
        letter-spacing: 0em;
        text-align    : center;
    }

    .vision-img {
        position     : absolute;
        height       : 217px;
        width        : 80%;
        top          : 267px;
        border-radius: 0px;
        left         : 0;
        right        : 0;
        margin       : auto;
    }

    .vision-img img {
        height    : 100%;
        width     : 100%;
        object-fit: cover;
    }

    .mission {
        width : 80%;
        margin: 100px auto 0px;
    }

    .mission h2 {
        font-family   : Old Standard TT;
        font-size     : 56px;
        font-weight   : 700;
        line-height   : 69px;
        letter-spacing: 0em;
        text-align    : center;
        font-family   : Old Standard TT;
        font-size     : 36px;
        font-weight   : 700;
        line-height   : 44px;
        letter-spacing: 0em;
        text-align    : center;
    }

    .mission p {
        font-family   : Montserrat;
        font-size     : 14px;
        font-weight   : 500;
        line-height   : 26px;
        letter-spacing: 0em;
        text-align    : center;
        margin        : 8px 0px 32px 0px;
        font-family   : Montserrat;
        font-size     : 14px;
        font-weight   : 500;
        line-height   : 26px;
        letter-spacing: 0em;
        text-align    : center;
    }

    .mission-info {
        display        : block;
        justify-content: center;
    }

    .mission-item {
        display: block;
        width  : 100%;
    }

    .mission-item-info li {
        font-family: Montserrat;
        font-size  : 14px;
        font-weight: 700;
        line-height: 26px;
        text-align : center;
    }

    .mission-item-info p {
        font-family   : Montserrat;
        font-size     : 14px;
        font-weight   : 400;
        line-height   : 26px;
        letter-spacing: 0em;
        text-align    : center;
    }

    .core-values {
        display: block;
        width  : 80%;
        margin : auto;
    }

    .core-values-img {
        height     : 217px;
        width      : 100%;
        /* position: relative; */
    }

    .core-values-img img {
        width      : 100%;
        height     : 100%;
        object-fit : cover;
        /* position: relative; */
        /* top     : 86px; */
        /* z-index : 99; */
    }

    .core-values-info {
        width     : 100%;
        margin-top: 30px;
    }

    .core-values-info h2 {
        font-family   : Old Standard TT;
        font-size     : 56px;
        font-weight   : 700;
        line-height   : 69px;
        letter-spacing: 0em;
        text-align    : left;
        margin        : 20px 0px 10px 0px;
        font-family   : Old Standard TT;
        font-size     : 36px;
        font-weight   : 700;
        line-height   : 44px;
        letter-spacing: 0em;
        text-align    : center;
    }

    .core-values-info p {
        font-family   : Montserrat;
        font-size     : 14px;
        font-weight   : 400;
        line-height   : 26px;
        letter-spacing: 0em;
        text-align    : justify;
        margin-bottom : 30px;
    }

    .organizational-title button {
        border       : 1px solid white;
        background   : #244066;
        color        : white;
        height       : 55px;
        width        : 211px;
        border-radius: 0px;
        margin-top   : 35px;
    }

    .organizational-img {
        display: none;
    }

    .leader-chart {
        height         : 1350px;
        position       : relative;
        color          : white;
        width          : 100%;
        text-align     : center;
        justify-content: center;
        display        : flex;
    }

    .leader-chart img {
        width     : 100%;
        height    : 100%;
        object-fit: cover;
        position  : relative;
    }

    .leader-info {
        position  : absolute;
        top       : 0;
        width     : 100%;
        height    : 100%;
        background: #244066;
        opacity   : 0.9;
        padding   : 24px;
    }

    .leader-content-info img {
        height       : 80px;
        width        : 80px;
        border-radius: 50%;
    }

    .leader-info h2 {
        font-family   : Old Standard TT;
        font-size     : 56px;
        font-weight   : 700;
        line-height   : 69px;
        font-family   : Old Standard TT;
        font-size     : 36px;
        font-weight   : 700;
        line-height   : 44px;
        letter-spacing: 0em;
        text-align    : left;
    }

    .leader-info p {
        font-family       : Montserrat;
        font-size         : 14px;
        font-weight       : 400;
        line-height       : 26px;
        letter-spacing    : 0em;
        text-align        : left;
        /* width          : 570px; */
        margin-top        : 29px;
        overflow          : hidden;
        text-overflow     : ellipsis;
        display           : -webkit-box;
        -webkit-line-clamp: 9;
        -webkit-box-orient: vertical;
    }

    .leader {
        position          : absolute;
        top               : 380px;
        width             : 100%;
        margin            : auto;
        /* padding        : 0px; */
        /* right          : 0; */
        /* left           : 0; */
        /* margin         : auto; */
        text-align        : center;
        /* justify-content: center; */
        /* text-align     : center; */
    }

    .leader ul {
        display           : block;
        list-style        : none;
        /* justify-content: right; */
        font-family       : Montserrat;
        font-size         : 14px;
        /* font-weight    : 600; */
        line-height       : 26px;
        letter-spacing    : 0em;
        text-align        : left;
    }

    ul.leader-five {
        display  : flex;
        position : absolute;
        overflow : auto;
        max-width: 100%;
        left     : 0;
        right    : 0;
    }

    ul.leader-five li {
        margin    : 10px;
        /* width  : 220px !important; */
        /* padding: 49px; */
    }

    ul.leader-five .leader-content-info {
        width: 170px;
    }

    .leader ul li {
        border         : -11px solid white;
        display        : flex;
        align-items    : center;
        /* padding     : 0px 20px; */
        background     : white;
        color          : #244066;
        /* font-weight : 700; */
        margin         : 0px 35px 70px 35px;
        text-align     : center;
        position       : relative;
        /* min-width   : 230px; */
        justify-content: center;
        height         : 219px;
        width          : auto;
        border-radius  : 0px;
        padding        : 0px 10px;
        cursor         : pointer;
        /* margin      : auto; */
    }

    .leader ul li.leader-content-one::after {
        position: absolute;
        content : url("../img/contentOne.svg");
        bottom  : -72px;
        /* left : 141px; */
    }

    .leader ul li.leader-content-two::after {
        content : url("../img/contentOne.svg");
        position: absolute;
        /* left : 142px; */
        top     : 230px;
    }

    .leader ul li.leader-content-four::after {
        content : url("../img/contentOne.svg");
        position: absolute;
        bottom  : 94px;
        left    : 125px;
    }

    .leader ul li.leader-content-five::after {
        content : url("../img/contentOne.svg");
        position: absolute;
        bottom  : 213px;
        left    : 29px;
        display : none;
    }

    ul.leader-five li {
        margin-bottom: 15px;
        margin       : 10px !important;
    }

    .partner {
        width         : 100%;
        text-align    : center;
        padding-bottom: 82px;
    }

    .partner h2 {
        font-family   : Old Standard TT;
        font-size     : 56px;
        font-weight   : 700;
        line-height   : 69px;
        letter-spacing: 0em;
        text-align    : center;
        margin        : 40px 0px 15px 0px;
        font-family   : Old Standard TT;
        font-size     : 36px;
        font-weight   : 700;
        line-height   : 44px;
        letter-spacing: 0em;
        text-align    : center;
    }

    .logo-partner {
        width : 80%;
        margin: auto;
    }

    .logo-partner img {
        height       : 127.02941131591797px;
        width        : 259.7297668457031px;
        left         : 820.6580810546875px;
        /* top       : 5961px; */
        border-radius: 8px;
        margin       : 6px;
        height       : 75.80786895751953px;
        width        : 105px;
        left         : 28px;
        top          : 8568.7890625px;
        object-fit   : cover;
        border-radius: 8px;
        border       : 1px solid #E8E8E8;
    }

    /*  */
    div#chart-view {
        display: none;
    }

    div#chart-view.activeChart {
        position   : fixed;
        z-index    : 9999;
        width      : 100%;
        height     : 100%;
        top        : 0;
        left       : 0;
        right      : 0;
        bottom     : 0;
        margin     : auto;
        background : #343434;
        align-items: center;
        display    : flex;
    }

    div#chart-view.activeChart img {
        width : 80%;
        height: 80%;
        margin: auto;
    }

    div#chart-view img {
        -webkit-animation-name    : zoom;
        -webkit-animation-duration: 0.6s;
        animation-name            : zoom;
        animation-duration        : 0.6s;
    }

    @-webkit-keyframes zoom {
        from {
            -webkit-transform: scale(0)
        }

        to {
            -webkit-transform: scale(1)
        }
    }

    @keyframes zoom {
        from {
            transform: scale(0)
        }

        to {
            transform: scale(1)
        }
    }

    .close-chart {
        color    : white;
        position : absolute;
        top      : 21px;
        right    : 49px;
        font-size: 33px;
        cursor   : pointer;
    }

    /*  */
    div#leader-view.activePopup {
        position  : fixed;
        z-index   : 9999;
        width     : 100%;
        height    : 100%;
        top       : 0;
        left      : 0;
        right     : 0;
        bottom    : 0;
        margin    : auto;
        background: #343434;
        display   : flex;
    }

    div#leader-view {
        display                   : none;
        -webkit-animation-name    : zoomLeader;
        -webkit-animation-duration: 0.6s;
        animation-name            : zoomLeader;
        animation-duration        : 0.6s;
    }

    @-webkit-keyframes zoomLeader {
        from {
            -webkit-transform: scale(0)
        }

        to {
            -webkit-transform: scale(1)
        }
    }

    @keyframes zoomLeader {
        from {
            transform: scale(0)
        }

        to {
            transform: scale(1)
        }
    }

    .popup-leader-img img {
        width        : 70px;
        height       : 70px;
        height       : 80px;
        width        : 80px;
        border-radius: 50%;
        object-fit   : cover;
        margin-right : 12px;
    }

    .popup-leader-img {
        display       : flex;
        align-items   : center;
        font-family   : Old Standard TT;
        font-size     : 15px;
        line-height   : 26px;
        letter-spacing: 0em;
        text-align    : left;
        margin-bottom : 17px;
    }

    .popup-leader {
        overflow  : auto;
        max-height: 80%;
        padding   : 35px;
        background: white;
        color     : #244066;
        width     : 80%;
        margin    : auto;
    }

    .popup-leader-info {
        font-family   : Montserrat;
        font-size     : 13px;
        font-weight   : 400;
        line-height   : 30px;
        letter-spacing: 0em;
        text-align    : left;
    }

    .popup-leader-info ul {
        margin-left: 27px;
    }

    .popup-leader-job {
        font-family   : Montserrat;
        font-size     : 13px;
        font-weight   : 400;
        line-height   : 24px;
        letter-spacing: 0em;
        text-align    : left;
    }

    .popup-leader-job b {
        line-height: 3;
    }

    /* width */
    ::-webkit-scrollbar {
        width: 0px;
    }

    /* Track */
    ::-webkit-scrollbar-track {
        box-shadow   : none;
        border-radius: 0px;
    }

    /* Handle */
    ::-webkit-scrollbar-thumb {
        background   : none;
        border-radius: 0px;
    }

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: none;
    }
}