@media only screen and (max-width: 1920px) {
}


@media only screen and (max-width: 1600px) {
    .mainBr{
        font-size: 35pt;
    }
    .mainBr02{
        font-size: 30pt;
    }
}


@media only screen and (max-width: 1440px) {
    .h2, h2 {font-size: 1.30rem;}
    h2.title{font-size: 1.50rem;}
    .h3, h3 {font-size: 1.20rem;}
    h3.subTitle{font-size: 1.35rem;}
    .h4, h4 {font-size: 1.15rem;}
    .h5, h5 {font-size: 1rem;}


    .customBlock{
        padding-top: 50px;
        padding-bottom: 50px;
    }
    main{
        padding-top: 78px !important;
    }
    .orgBig{
        font-size: 50px;
    }
    .viewMoreBtn{
        font-size: 10pt;
        padding: 10px 27px;
    }
    p,
    .customList li{
        font-size: 14px;
    }
    .customList li:before{
        height: 12px;
        width: 13px;
        top: 4px;
    }

    .logo {
        width: 200px;
    }
    .midCont .big{
        font-size: 16pt;
    }
    .midCont .large {
        font-size: 30px;
    }
    .midCont {
        width: calc(100% - (200px + 70px));
    }
    .site_menu {
        width: 70px;
        height: 36px;
        overflow: hidden;
    }
    .bar_01 {
        width: 40px;
    }
    .bar_02 {
        width: 25px;
    }
    .bar_03 {
        width: 10px;
    }
    .menu_close .bar_01,
    .menu_close .bar_02{
        width: 40px;
    }
    
    .mainNav{
        padding: 60px 0px 30px;
    }
    .menu_close {
        width: 40px;
        height: 40px;
        font-size: 20px;
        line-height: 44px;
    }
    .titleMenu{
        top: -46px;
        font-size: 20pt !important;
    }
    
    nav > ul > li > a {
        font-size: 13pt !important;
    }
    nav > ul > li{}
    .titleLink{
        padding: 8px 40px 8px 15px;
    }
    .titleLink + ul li a{
        font-size: 11pt;
    }

    /* -----------Banner */
    .navLinkDot{
        right: 40px;
    }
    .navLinkDot ul li{
        margin: 8px 0; 
    }
    .navLinkDot ul li a{
        width: 10px;
        height: 10px;
    }
    .titleA{
        left: -150px;
        width: 140px;
        font-size: 12px;
        padding: 2px 10px;
    }

    .downloadNow {
        right: -75px;
        height: 40px;
        width: 190px;
        line-height: 20px;
    }
    .downloadNow span{
        font-size: 14px;
        line-height: 1;
        margin: 0 0 0 5px;
    }
    .downloadNow img{
        width: 20px;
    }

    .metro_main{
        height: calc(100vh - 78px);
        padding-top: 0;
    }

    .arrowDown{
        bottom: 30px;
        width: 220px;
    }
    .arrowDown img{
        width: 28px;
    }
    .arrowDown span{
        font-size: 20px;
        letter-spacing: 3px;
    }

    .titleBox .mainTitle{
        font-size: 62px;
    }
    .titleBox .mainSubTitle{
        font-size: 40px;
    }

    .topChain{
        /* width: 250px;
        left: 30%;
        top: -100px; */
        width: 360px;
        left: 21%;
        top: -140px;
    }
    .botChain{
        /* width: 250px;
        right: 24%;
        bottom: -100px; */
        width: 330px;
        right: 16%;
        bottom: -100px;
    }



    .animeChain{
        width: 360px;
    }
    .readMoreBtn {
        font-size: 14px;
        padding: 10px 35px;
    }
    .readMoreBtn:before{
        left: -15%;
        width: 100%;
        height: 120px;
    }
    .readMoreBtn:after{
        right: -15%;
        width: 100%;
        height: 120px;
    }
    .mb_50 {
        margin-bottom: 30px;
    }
    .pb_50{
        padding-bottom: 25px;
    }

    h2.mb_40 {
        margin-bottom: 20px;
    }
    
    
    .valuesWrap .imgCont .m-v-o-wrap ul.mvoList li {
        width: 150px;
        height: 150px;
        margin-right: 60px;
    }
    .valuesWrap .imgCont .m-v-o-wrap ul.mvoList li .animeImg {
        width: 100%;
    }
    .valuesWrap .imgCont .m-v-o-wrap ul.mvoList li span {
        font-size: 18px;
    }
    .socialLinkList .icon svg {
        width: 20px;
        height: 20px;
    }
    
    .socialLinkList .socialName{
        font-size: 20pt;
    }
    .socialLinkList .icon{
        margin-right: 15px;
        height: 40px;
        width: 40px;
    }


    /* Breadcrumb Navigation */
    .breadCrumbNav ul li a,
    .breadCrumbNav ul li span{
        text-transform: uppercase;
        font-size: 16px;
    }
    
    
    /* -----------About Report */
    .breakTheChainImgBox{
        top: 30px;
    }
    .heighlightImgBox video {
        left: -65px;
        width: 340px !important;
    }
    .manImg {
        right: 65px;
        height: 500px !important;
    }

    /* -----------Board's Messgae */
    .msgRow .eachMsgBlock .imgBox {
        width: 290px;
    }
    .msgRow .eachMsgBlock .imgCont{
        top: -35px;
        width: calc(100% - 290px);
    }
    .msgRow .eachMsgBlock .imgCont p,
    .msgBlock .imgBox .imgBoxCont p{
        font-size: 15px;
    }
    .msgRow .msgBlockWrap .readMoreBtn{
        max-width: 155px;
    }


    /* -----------Year highlight */
    .heighlight.wid_60{
        width: 65%;
    }
    .bigText{
        font-size: 30px;
    }
    .small_tile span {
        font-size: 13px;
    }
    .yearSection ul li{
        font-size: 13px;
        margin-bottom: 25px;
        padding-right: 45px;
    }
    .yearSection ul li .strong{
        font-size: 13px;
    }

    .yearBox_01 {
        width: 220px;
        height: 80px;
    }
    .yearBox_02 {
        width: 180px;
        height: 80px;
    }
    .yearBox_03 {
        width: 220px;
        height: 80px;
    }
    .yearBox_04 {
        width: 210px;
        height: 80px;
    }
    .yearBox_05 {
        width: 160px;
        height: 74px;
    }
    .yearBox_06 {
        width: 170px;
        height: 80px;
        padding: 26px 10px 20px 20px;
    }
    .yellowBr:after,
    .greenBr:after{
        height: 2px;
    }
    

    /* -----------Values */
    h2.mb_20 {
        margin-bottom: 10px;
    }
    h3.mb_40 {
        margin-bottom: 25px;
    }
    .processesWrap .eachBlock > div, .intellectualWrap .eachBlock > div, .socialWrap .eachBlock > div{
        height: 200px;
    }
    .processesWrap .eachBlock .tag{
        left: -35px;
        top: 60px;
        width: 75px;
        height: 75px;
    }
    .valuebox ul li:not(last-child) {
        margin-bottom: 18px;
    }
    .valuebox ul li span {
        width: 90px;
        font-size: 16px;
    }
    .valuebox ul li figure{
        width: 24px;
    }
    .valuebox ul li figure img{
        width: 100%;
    }
    .capitalBoxWrap .eachCapitalBox .imgBox{
        max-width: 215px;
    }
    .m-v-o-wrap ul.mvoList li{
        width: 220px;
        height: 218px;
    }
    .m-v-o-wrap ul.mvoList li:not(:last-child) {
        margin-right: 100px;
    }
    .m-v-o-wrap ul.mvoList li .animeImg{
        width: 100%;
        height: 100%;
    }
    .m-v-o-wrap ul.mvoList li span {
        font-size: 24px;
    }


    /* -----------Testimonials */
    .testimonialWrap .eachTestiBox .eachBox{
        height: 255px;
    }


    /* -----------Leadership */
    h2.mb_60{
        margin-bottom: 30px;
    }
    .testimonialWrap .eachTestiBox .eachBox .greenText,
    .leadershipWrap .eachLeaderBox .eachBox span{
        font-size: 18px;
    }
    .leadershipWrap .eachLeaderBox .eachBox strong{
        font-size: 12px;
    }


    footer{
        padding: 40px 0 140px;
    }
    footer .col-lg-5 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
    footer .col-lg-7 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }
    footer .footerChain {
        width: 520px;
    }
    .footerLogo{
        width: 250px;
    }
    footer p{
        font-size: 16px;
    }

    .maxW_225{
        max-width: 170px !important;
    }


    /* -------INNER PAGES-------------- */

    .checkList li {
        padding-left: 35px;
    }
    .checkList li:before {
        height: 20px;
        width: 20px;
        top: 0px;
    }

    .certifiedWrap ul li{
        min-height: 120px;
    }
    
    
    .commonListWrap.informationListWrap.mb_50 .commonBox.informationBox{
        height: 120px;
    }


    .arrowAnimeV img{
        width: 60px;
        display: inline-block;
        transform: rotate(90deg);
    }


    /* service capital */
    .page-service-capital .rightBlock .yearBox {
        width: 170px;
        height: 80px;
    }
    .page-service-capital .rightBlock .yearBox.yearBox_01 {
        background-image: url(../images/service-capital/bg_01.png);
        width: 230px;
        height: 120px;
    }


    /* intellectual capital */
    .qualityWrap .checkList li:nth-child(3),
    .qualityWrap .checkList li:nth-child(4){
        margin-bottom: 0 !important;
    }
    .intellectualImgBox{
        height: 580px;
    }


    /* natural capital */
    .naturalImgBox{
        height: 480px;
    }
    .naturalImgBoxImg{
        width: 390px;
        height: 375px;
    }

    
    /* social capital */
    .socialImgBox{
        height: 500px;
    }


    /* human capital */
    .page-human-capital .row_02 .yearSection ul li{
        margin-bottom: 25px;
    }
    .page-human-capital .row_03 .yearSection ul li {
        padding-right: 15px;
    }
    .humanImgBox {
        height: 550px;
    }


    .commonListWrap .addressHolder ul li .informationBox{
        min-height: 240px
    }

    /* ----Quick Links----------------- */
    .quickLinks a {
        padding: 15px 30px;
        font-size: 20px;
    }
    a.leftLink .linkIco,
    a.rightLink .linkIco{
        animation-duration: 2s;
    }
    @keyframes slideHL {
    	0% {transform: rotate(0) translate(20px, -50%);}
    	100% {transform: rotate(0) translate(0, -50%);}
    }
    
    @keyframes slideHR {
    	0% {transform: translate(-20px, -50%);}
    	100% {transform: translate(0, -50%);}
    }
}


@media only screen and (max-width: 1366px) {
    .titleLink {
        padding: 8px 20px 8px 10px;
    }
    .subChild .menu-indicator{
        right: 0;
        font-size: 20px !important;
    }

    .msgRow .eachMsgBlock .imgCont p{
        font-size: 14px;
    }
    
    
    
    
    .intellectualWrap .eachBlock > div{
        min-height: 250px;
        padding: 30px 15px;
    }
    
    
    .page-human-capital .row_02 .yearSection ul li, .page-human-capital .row_02 .yearSection ul li:nth-child(3n){
        padding-right: 30px;
    }
    .page-human-capital .row_03 .yearSection ul li, .page-human-capital .row_03 .yearSection ul li:nth-child(3n) {
        padding-right: 30px;
    }
}


@media only screen and (max-width: 1280px){
    .mainNav{
        height: 50px;
    }
    .titleMenu {
        top: -44px;
        font-size: 18pt !important;
    }
    .titleLink + ul li a {
        font-size: 10pt;
    }
    nav > ul > li > a {
        font-size: 11pt !important;
    }
    
    .topChain {
        left: 21%;
        top: -100px;
    }
    .botChain {
        right: 15%;
        bottom: -100px;
    }
    
    
    .msgRow .eachMsgBlock .imgBox figure {
        height: 445px;
    }
    .msgRow .eachMsgBlock .imgCont{
        top: inherit;
        bottom: -18px;
    }
    
    .msgRow .eachMsgBlock:nth-child(2n) .imgCont{
        bottom: 35px;
    }
    
    
    .linkIco img{
        width: 24px;
    }
    a.leftLink .linkIco{
        left: -70px;
        width: 50px;
        height: 30px;
    }
    a.rightLink .linkIco{
        right: -70px;
        width: 50px;
        height: 30px;
    }
    
}


@media only screen and (max-width: 1100px){
}


@media only screen and (max-width: 1024px){
    *{
        animation: none !important;
    }
    
    
    
    footer {
        padding: 40px 0 110px;
    }
    nav > ul > li{
        padding: 8px 5px;
    }
    nav > ul > li > a {
        font-size: 10pt !important;
    }
    .titleMenu {
        top: -39px;
        font-size: 14pt !important;
    }
    .titleLink {
        padding: 8px 15px 8px 10px;
    }
    .titleLink + ul li a {
        font-size: 9pt;
        padding: 8px 8px;
    }
    .subChild .menu-indicator{
        width: 13px;
        height: 8px;
        font-size: 14px !important;
    }
    
    
    
    .topChain {
        left: 15%;
    }
    .botChain {
        right: 11%;
        bottom: -70px;
    }
    .titleBox .mainTitle {
        font-size: 50px;
    }
    .titleBox .mainSubTitle {
        font-size: 32px;
    }

    .metro_main{
        padding-top: 0;
    }
    
    
    .msgRow .eachMsgBlock .imgBox figure {
        height: 380px;
    }
    .msgRow .eachMsgBlock .msgBlockWrap{
        flex-direction: column;
    }
    .msgRow .eachMsgBlock .imgBox{
        width: 100%;
    }
    
    .msgRow .eachMsgBlock .imgCont,
    .msgRow .eachMsgBlock:nth-child(2n) .imgCont{
        bottom: 0;
    }
    .msgRow .eachMsgBlock .imgCont{
        width: 100%;
    }
    
    
    .deskView{
        display: none !important;
    }
    .mobView{
        display: inline-block !important;
    }
    
    .vdoImg video{
        display: none;
    }
    .vdoImg figure{
        display: block;
    }
    .vdoImg figure img{
        width: 100%;
        display: block;
    }
    
    
    .msgRow .eachMsgBlock .imgCont p {
        height: 200px;
    }
    
    
    
    .greenLftBr br{
        display: none;
    }
    .ZI_3{
        display: flex;
        flex-wrap: wrap;
        flex-direction: column-reverse;
    }
    .heighlightImgBox{
        width: 100%;
        position: static;
    }
    .heighlightImgBox figure{
        display: block;
        left: 35%;
        bottom: -75px;
        width: 280px !important;
        transform: translateX(-50%);
    }
    .heighlightImgBox video{
    	display: none;
    }
    .manImg {
        right: 35%;
        bottom: -50px;
        height: 440px !important;
        transform: translateX(50%);
    }
    .heighlight.wid_60 {
        width: 100%;
    }
    .heighlight .yearSection.mobView{
        display: block !important;
    }
    .heighlight .yearSection ul{
        flex-direction: row;
        justify-content: center;
    }
    .heighlight .yearSection ul li,
    .heighlight .yearSection ul li:nth-child(3n){
        padding-right: 15px;
    }
    .heighlight .readMoreBtn {
        float: none;
        width: 160px;
        margin: 0 auto;
        display: block;
        text-align: center;
        
    }
    
    
    
    .capitalBoxWrap .eachCapitalBox{
        padding-top: 30px;
        padding-bottom: 30px;
        flex-direction: column-reverse;
    }
    .capitalBoxWrap .eachCapitalBox strong{
        margin-bottom: 25px;
    }
    .capitalBoxWrap .eachCapitalBox h4{
        margin-bottom: 20px;
    }
    .capitalBoxWrap .eachCapitalBox .imgBox{
        position: static;
        margin: 0 auto 25px;
    }
    
    footer .footerChain {
        width: 410px;
    }
    .footerLogo {
        width: 200px;
        margin-bottom: 20px;
    }
    .socialLinkList li{
        width: calc(20% - 5px);
    }
    .socialLinkList .icon {
        margin-right: 5px;
    }
    .socialLinkList .socialName {
        font-size: 14pt;
    }
    
    
    [data-aos^=fade][data-aos^=fade],
    [data-aos^=zoom][data-aos^=zoom]{
        opacity: 1;
    }
    [data-aos=flip-up],
    [data-aos=fade-up],
    [data-aos=fade-down],
    [data-aos=fade-left],
    [data-aos=fade-right],
    [data-aos=zoom-in],
    [data-aos=zoom-in-up],
    [data-aos=zoom-in-down],
    [data-aos=zoom-in-left],
    [data-aos=zoom-in-right],
    [data-aos=zoom-out-right],
    [data-aos=zoom-out-left]{
        transform: translate(0) !important;
    }
    
    [data-aos^=fade][data-aos^=fade].aos-animate,
    [data-aos^=zoom][data-aos^=zoom].aos-animate{
        transform: translate(0) !important;
    }
    
    
    .block_04 .valuesWrap .row{
        flex-direction: column-reverse;
    }
    .block_04 .valuesWrap h2,
    .block_04 .valuesWrap h3{
        text-align: center;
    }
    .block_04 .valuesWrap .imgCont{
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    .block_04 .valuesWrap .imgBox{
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 30px;
    }
    .block_04 .valuesWrap .imgBox figure{
        margin: 0 auto;
        max-width: 400px;
    }
    .m-v-o-wrap ul.mvoList li{
        transform: scale(1);
    }
    .block_04 .valuesWrap .readMoreBtn{
        width: 160px;
        margin: 0 auto;
        display: block;
        text-align: center;
    }
    
    .msgWrap .imgBox {
        width: 380px;
        margin-bottom: 20px;
    }
    
    
    .quickLinks a {
        padding: 10px 15px;
        font-size: 16px;
    }
    a.leftLink .linkIco{
        left: -50px;
    }
    a.rightLink .linkIco{
        right: -50px;
    }
    
    .go2TOp{
        right: 20px;
        bottom: 20px;
        padding: 15px;
        line-height: 20px;
    }
    
    
    .certifiedWrap ul li{
        font-size: 14px;
    }
    
    .visionWrap figure, .missionWrap figure, .valuesWrapInner figure {
        width: 60px;
    }
    .visionWrap p, .missionWrap p, .valuesWrapInner .contP {
        width: calc(100% - 20px);
        padding-left: 20px;
    }
    
    
    .page-values .processesWrap .inputContBox{
        margin-bottom: 0;
    }
    .page-values .processesWrap .arrowAnimeV{
        margin-bottom: 30px !important;
    }
    
    .page-values .processesWrap .arrowAnimeV img {
        width: 40px;
    }
    .m-v-o-wrap ul.mvoList li {
        width: 180px;
        height: 182px;
    }
    
    
    .processesWrap .eachBlock, .intellectualWrap .eachBlock, .socialWrap .eachBlock{
        width: calc((100% / 2) - 30px);
    }
    .processesWrap .eachBlock > div, .intellectualWrap .eachBlock > div, .socialWrap .eachBlock > div {
        height: 170px;
        padding: 30px 30px 30px 30px;
    }
    .processesWrap .eachBlock .tag {
        left: -28px;
        width: 60px;
        height: 60px;
    }
    
    .page-financial-capital .row_02 ul li {
        width: calc(33.33% - 30px);
    }
    
    .page-service-capital .row_03{
        flex-direction: column;
    }
    .page-service-capital .row_03 .leftBlock{
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 30px;
    }
    .page-service-capital .row_03 .rightBlock{
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    .page-service-capital .row_04 .checkList{
        flex-direction: column;
    }
    .page-service-capital .row_04 .checkList li:not(:last-child){
        margin-bottom: 20px !important;
    }
    
    .page-service-capital .row_04 .checkList li{
        width: 100%;
    }
    
    .page-service-capital .row_05 .leftBlock{
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 30px;
    }
    .page-service-capital .row_05 .rightBlock{
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    .page-service-capital .row_05 .rightBlock ul li {
        width: 33.33%;
    }
    
    .intellectualWrap{
        flex-direction: column;
    }
    .intellectualWrap .eachBlock {
        width: 100%;
    }
    .processesWrap .eachBlock > div, .intellectualWrap .eachBlock > div, .socialWrap .eachBlock > div {
        height: 180px;
        min-height: inherit;
        padding: 30px 30px 30px 30px;
    }
    
    .qualityWrap ul{
        flex-direction: column;
    }
    .qualityWrap ul li{
        width: 100%;
    }
    .qualityWrap ul li {
        margin-bottom: 20px !important;
    }
    .qualityWrap .checkList li:nth-child(3), .qualityWrap .checkList li:nth-child(4) {
        margin-bottom: 20px !important;
    }
    
    .yearSection ul{
        flex-wrap: wrap;
        flex-direction: column;
    }
    .page-human-capital .row_02 .yearSection ul li, .page-human-capital .row_02 .yearSection ul li:nth-child(3n) {
        padding-right: 6px;
    }
    
    .page-heighlight .yearSection ul{
        flex-direction: row;
    }
    
    .socialWrap .eachBlock {
        width: calc((100% / 2) - 30px);
    }
    
    .commonListWrap ul li {
        width: 50%;
    }
    .commonListHolder.flexBox > div {
        width: 50%;
    }
    
    .page-service-capital .yearSection ul{
        flex-direction: row;
    }    
    
    .page-human-capital .yearSection ul{
        flex-direction: row;
    }

    .naturalImgBox {
        height: 400px;
    }
    .naturalImgBoxImg {
        width: 340px;
        height: 330px;
    }
}


@media only screen and (max-width: 1023px){
    .mainNav{
        width: 450px;
        height: 100vh;
    }
    .titleMenu{
        top: 0;
        padding: 0;
        position: static;
        text-decoration: none;
        font-size: 18pt !important;
    }
    .titleMenu span{
        height: 70px;
        display: block;
        border-radius: 0;
        line-height: 50px;
        padding: 10px 15px;
    }
    nav{
        overflow-y: scroll;
    }
    nav > ul{
        position: static;
        flex-direction: column;
    }
    nav > ul > li{
        width: 100%;
        padding: 10px 0px;
    }
    nav > ul > li > a {
        font-size: 16pt !important;
    }
    .subChild ul{
        position: static;
        transform: translateY(0%);
    }
    .titleLink {
        padding: 8px 25px 8px 10px;
    }
    .titleLink + ul li a {
        font-size: 12pt;
        padding: 8px 15px;
    }
    .subChild ul{
        border-radius: 0;
    }
    .subChild .menu-indicator {
        right: 5px;
        width: 15px;
        height: 12px;
        font-size: 18px !important;
    }
    
}


@media only screen and (max-width: 991px){
    .downloadNow {
        height: 30px;
        width: 180px;
        line-height: 13px;
    }
    .navLinkDot {
        width: 20px;
        right: 37px;
    }
    
    .block_01:after{
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
        content: '';
        position: absolute;
        background: rgba(255, 255, 255, 0.7);
    }
    
    
    .block_03 .chain_01{
        left: 62%;
    }
    .breakTheChain{
        width: 100%;
    }
    .breakTheChain h2 br{
        display: none;
    }
    .breakTheChain p{
        font-weight: 600;
    }
    .breakTheChainImgBox {
        top: 0;
        width: 100%;
    }
    
    .msgRow .eachMsgBlock{
        margin-bottom: 30px;
    }
    .msgRow .eachMsgBlock .msgBlockWrap{
        flex-direction: row;
        margin-bottom: 20px;
    }
    .msgRow .eachMsgBlock .imgBox{
        width: 340px;
    }
    .msgRow .eachMsgBlock .imgBox figure {
        margin: 0;
        width: 100%;
        height: 380px;
    }
    .msgRow .eachMsgBlock .imgCont {
        width: calc(100% - 350px);
    }
    
    .capitalBoxWrap > .row{
        background: transparent !important;
    }
    .capitalBoxWrap .eachCapitalBox:nth-child(odd){
        background: rgba(201,221,182,1);
    }
    .capitalBoxWrap .eachCapitalBox:nth-child(even){
        background: rgba(255,234,155,1);
    }
    .capitalBoxWrap .eachCapitalBox{
        flex-direction: row;
    }
    .capitalBoxWrap .eachCapitalBox .imgBox{
        margin: inherit;
    }
    
    .socialLinkList{
        flex-wrap: wrap;
        justify-content: center !important;
    }
    .socialLinkList li {
        width: calc(33.33% - 5px);
        margin-bottom: 15px;
    }
    
    /*----------inner pages---------------*/
    .page-heighlight .rowWrap_02 .eachBlock{
        -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
    .page-heighlight .yearSection ul li{
        padding-right: 15px;
    }
    
    
    .certifiedWrap ul{
        flex-wrap: wrap;
    }
    .certifiedWrap ul li{
        width: calc(50% - 10px);
        margin-bottom: 5px;
    }
    
    .visionWrap figure, .missionWrap figure, .valuesWrapInner figure {
        width: 100px;
    }
    .visionWrap p, .missionWrap p, .valuesWrapInner .contP {
        width: calc(100% - 100px);
    }
    .page-heighlight .rowWrap_04 .rightMVO{
        margin-bottom: 50px;
    }
    .page-heighlight .rowWrap_04 .rightMVO .row.mb_40 {
        margin-bottom: 30px;
    }
    .page-heighlight .rowWrap_04 .visionWrap:not(:last-child){
        margin-bottom: 30px;
    }
    
    
    .mapCont ul li {
        width: 25%;
    }


    .page-intellectual-capital .container_02 .contentWrap{
        width: 100%;
        margin: 0 0 30px;
    }
    .intellectualImgBox {
        display: none;
    }
    .intellectualImgBoxImg{
        width: 100%;
        display: block !important;
        position: static;
        height: auto;
    }

    .page-human-capital .container_02 .contentWrap{
        width: 100%;
        margin-bottom: 30px;
    }
    .humanImgBox{
        display: none;
    }
    .humanImgBoxImg {
        width: 100%;
        display: block !important;
        position: static;
        height: auto;
    }
    .page-human-capital .row_02 .welbeingWrap{
        margin-bottom: 30px;
    }

    .page-social-capital .container_02 .contentWrap{
        width: 100%;
        margin-bottom: 30px;
    }
    .socialImgBox {
        width: 100%;
        display: block !important;
        position: static;
        height: auto;
    }

    .page-natural-capital .contentWrap{
        width: 100%;
        margin-bottom: 30px;
    }
    .naturalImgBox {
        display: none;
    }
    .naturalImgBoxImg {
        width: 100%;
        display: block !important;
        position: static;
        height: auto;
    }

}


@media only screen and (max-width: 900px){
    .page-service-capital .row_05 .rightBlock ul li {
        width: 50%;
    }

    .commonListWrap .addressHolder ul li {
        width: 100%;
    }
}


@media only screen and (max-width: 768px){
    .topChain {
        left: 5%;
        top: -45px;
    }
    .botChain {
        right: -3%;
        bottom: 0px;
    }
    
    .msgRow .eachMsgBlock .imgBox {
        width: 400px;
        padding-right: 0;
        margin: 0 auto 20px;
    }
    .msgRow .eachMsgBlock .imgCont {
        width: 100%;
    }
    .msgRow .eachMsgBlock .imgCont p {
        height: auto;
        padding: 30px;
        line-height: 2;
    }
    
    
    .heighlight .yearSection ul li, .heighlight .yearSection ul li:nth-child(3n) {
        padding-right: 10px;
    }
    
    
    .watermark{
        width: 140px;
    }
    .whyUsCont ul {
        width: calc(100% - 155px);
    }
    
    
    .page-financial-capital .row_02 ul li {
        width: calc(50% - 30px);
    }
}


@media only screen and (max-width: 767px){
    .logo {
        width: 140px;
    }
    .midCont {
        width: calc(100% - (140px + 60px));
    }
    .midCont .big {
        font-size: 13pt;
    }
    .midCont .large {
        font-size: 26px;
    }
    .site_menu {
        width: 60px;
        height: 22px;
    }
    .site_menu .icon-bar:not(:first-child) {
        margin-top: 7px;
    }
    .site_menu .icon-bar {
        height: 2px;
    }
    .bar_01 {
        width: 30px;
    }
    .bar_02 {
        width: 20px;
    }
    .bar_03 {
        width: 10px;
    }
    .menu_close .bar_01, .menu_close .bar_01,
    .menu_close .bar_01, .menu_close .bar_02 {
        width: 30px;
    }
    .menu_close {
        width: 20px;
        height: 30px;
        font-size: 5px;
        line-height: 30px;
        overflow: hidden;
        display: block;
    }
    
    .mainNav{
        top: 0;
        width: 290px;
    }
    
    .downloadNow{
        left: -75px;
        right: inherit;
        padding: 6px 10px;
        border-radius: 0 0 15px 15px;
    }
    .navLinkDot{
        right: 4px;
    }
    
    .arrowDown span {
        font-size: 12px;
    }
    
    
    .deskView{
        display: none;
    }
    .mobView{
        display: inline-block;
    }

    .titleMenu {
        font-size: 15pt;
    }
    
    .animeChain {
        width: 270px;
    }
    
    
    main {
        padding-top: 70px !important;
    }
    .metro_main {
        height: calc(100vh - 70px);
    }
    
    .capitalBoxWrap .eachCapitalBox{
        flex-direction: column-reverse;
    }
    .capitalBoxWrap .eachCapitalBox .imgBox{
        margin: 0 auto 20px;
    }
    .capitalBoxWrap .eachCapitalBox .imgCont{
        text-align: center;
    }
    
    .block_06 .subTitle{
        margin-bottom: 30px;
    }
    .testimonialWrap .eachTestiBox .eachBox{
        height: auto;
        overflow-y: visible;
    }
    
    .leadershipWrap .eachLeaderBox figure {
        width: 215px;
    }
    .leadershipWrap .eachLeaderBox .eachBox {
        width: calc(100% - 215px);
    }
    .testimonialWrap .eachTestiBox .eachBox .greenText, .leadershipWrap .eachLeaderBox .eachBox span {
        font-size: 22px;
    }
    .leadershipWrap .eachLeaderBox .eachBox strong {
        font-size: 16px;
    }
    
    
    .eachTesti{
        flex-direction: column;
    }
    .eachTesti:before{
        top: 0;
        left: 0;
    }
    .testimonialWrap .eachTestiBox figure{
        width: 250px;
        margin: 0 auto 20px;
    }
    .testimonialWrap .eachTestiBox .eachBox{
        width: 100%;
    }
    
    
    .msgWrap .imgBox {
        width: 100%;
        float: none;
        margin-bottom: 20px;
    }
    
    a.leftLink .linkIco, a.rightLink .linkIco{
        display: none;
    }
    
    .processesWrap .eachBlock, .intellectualWrap .eachBlock, .socialWrap .eachBlock{
        width: 100%;
    }
    .m-v-o-wrap ul.mvoList li.list_01:after,
    .m-v-o-wrap ul.mvoList li.list_02:after{
        animation-name: none;
    }
    .m-v-o-wrap ul.mvoList li:not(:last-child) {
        margin-right: 70px;
    }
    .m-v-o-wrap ul.mvoList li:not(:last-child):after{
        right: -52px;
        width: 30px;
        height: 25px;
    }
    .m-v-o-wrap ul.mvoList li {
        width: 140px;
        height: 142px;
    }
    .m-v-o-wrap ul.mvoList li span {
        font-size: 18px;
    }
    
    
    .mapCont ul li {
        width: 50%;
    }
    
    .commonListHolder.flexBox > div {
        width: 100%;
    }
    
}


@media only screen and (max-width: 750px){
}


@media only screen and (max-width: 640px){
    nav > ul > li > a {
        font-size: 13pt !important;
    }
    .titleLink + ul li a {
        font-size: 11pt;
    }
    
    .ligntBand p{
        flex-direction: column;
    }
    .ligntBand p span{
        padding: 3px 0;
        display: inline-block;
    }
    
    
    footer .footerChain{
        display: none;
    }
    
    
    .whyUsCont > div{
        flex-direction: column;
    }
    .watermark{
        width: 140px;
    }
    .whyUsCont ul {
        width: 100%;
    }
    
    
    .page-heighlight .rowWrap_02 .eachBlock{
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    .page-heighlight .rowWrap_02 .eachBlock:not(:last-child){
        margin-bottom: 20px;
    }
    
    .certifiedWrap ul li {
        width: 100%;
        min-height: 60px;
    }
    
    
    .page-service-capital .row_02 ul{
        flex-wrap: wrap;
    }
    .page-service-capital .row_02 ul li {
        width: 100%;
        margin-bottom: 5px;
    }
    
    
    .page-service-capital .row_05 .rightBlock ul li {
        width: 100%;
    }

    .commonListWrap ul li {
        width: 100%;
    }
}


@media only screen and (max-width: 540px){
    
    .topChain {
        width: 40%;
    }
    .botChain{
        width: 40%;
    }
    .titleBox .mainTitle {
        font-size: 40px;
    }
    .titleBox .mainSubTitle {
        font-size: 26px;
    }
    
    
    
    .msgRow .eachMsgBlock .imgBox{
        width: 300px;
    }
    .msgRow .eachMsgBlock .imgBox figure{
        height: 300px;
    }
    
    .heighlightImgBox video {
        left: 30%;
    }
    .manImg {
        right: 30%;
    }
    
    .valuesWrap .imgCont .m-v-o-wrap ul.mvoList li {
        width: 120px;
        height: 121px;
        margin-right: 35px;
    }
    .valuesWrap .imgCont .m-v-o-wrap ul.mvoList li:not(:last-child):after {
        width: 20px;
        height: 18px;
    }
    .valuesWrap .imgCont .m-v-o-wrap ul.mvoList li.list_01:after,
    .valuesWrap .imgCont .m-v-o-wrap ul.mvoList li.list_02:after{
        animation-name: none;
        right: -28px;
    }
    
    
    .block_07 .title{
        text-align: center;
    }
    .leadershipWrap .eachLeaderBox{
        flex-direction: column;
    }
    .leadershipWrap .eachLeaderBox figure{
        margin: 0 auto 20px;
    }
    .leadershipWrap .eachLeaderBox .eachBox{
        width: 100%;
        padding-left: 0;
        text-align: center;
    }
    .leadershipWrap .eachLeaderBox .eachBox .greenBr:after{
        margin: auto;
    }
    
    
    .quickLinks{
        flex-direction: column;
    }
    .quickLinks a.leftLink{
        margin-bottom: 20px;
    }
    
    
    
    .socialLinkList li {
        width: calc(50% - 5px);
    }
    
    .page-heighlight .col_wrap_right .yearSection ul li .yearBox {
        width: 230px !important;
        padding: 35px 30px 30px 25px !important;
    }
    
    
    .processContainer .focusArea {
        padding: 30px 15px !important;
    }
    .focusArea .col_count_02 li {
        width: 100%;
        display: block;
    }
    
    
    .m-v-o-wrap ul.mvoList {
        flex-direction: column;
    }
    
    .valuesWrap .imgCont .m-v-o-wrap ul.mvoList li {
        width: 200px;
        height: 198px;
        margin-right: 0;
        margin-bottom: 45px;
    }
    .valuesWrap .imgCont .m-v-o-wrap ul.mvoList li:last-child{
        margin-bottom: 0;
    }
    .valuesWrap .imgCont .m-v-o-wrap ul.mvoList li.list_01:after,
    .valuesWrap .imgCont .m-v-o-wrap ul.mvoList li.list_02:after{
        animation-name: none;
        right: inherit;
        top: calc(100% + 12px);
        transform: translateY(0) rotate(90deg);
    }
    
    .m-v-o-wrap ul.mvoList li {
        width: 200px;
        height: 198px;
        margin-right: 0;
        margin-bottom: 45px;
    }
    .m-v-o-wrap ul.mvoList li:not(:last-child){
        margin-right: 0;
    }
    .m-v-o-wrap ul.mvoList li:not(:last-child):after {
        right: inherit;
        top: calc(100% + 12px);
        transform: translateY(0) rotate( 90deg );
    }
    
    
    .page-intellectual-capital .container_02 .row_03 .col-lg-12 .qualityWrap{
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    
}


@media only screen and (max-width: 500px){
    .page-financial-capital .row_02 ul li {
        width: 100%;
    }
    .performanceList li{
        margin-bottom: 20px;
    }
    .performanceList li:not(:last-child){
        margin-right: 0;
    }
    .performanceList li.splList > .yearBox{
        height: 230px;
    }
}


@media only screen and (max-width: 480px){
    .mainNav{
        top: 0;
    }
    .titleMenu span {
        height: 66px;
        line-height: 46px;
    }
    main {
        padding-top: 66px !important;
    }
    .metro_main {
        height: calc(100vh - 66px);
    }

    .midCont .big {
        font-size: 10pt;
    }
    .midCont .big {
        font-size: 10pt;
    }

    .topChain {
        width: 35%;
    }
    .botChain {
        width: 35%;
    }
    
    .bigText {
        font-size: 24px;
    }
    .yearBox_01 {
        width: 200px;
        padding: 20px 5px 20px 15px;
    }
    .yearBox_02 {
        width: 160px;
        padding: 20px 5px 20px 15px;
    }
    .yearBox_03 {
        width: 185px;
        padding: 20px 5px 20px 15px;
    }
    .yearBox_04{
        width: 170px;
        padding: 20px 5px 20px 15px;
    }
    .yearBox_05 {
        width: 145px;
        padding: 20px 5px 20px 15px;
    }
    .yearBox_06 {
        width: 145px;
        padding: 26px 5px 20px 15px;
    }
    
    
    .manImg {
        right: -70px;
        height: 400px !important;
        transform: translateX(0%);
    }
    .heighlightImgBox video {
        left: -30px;
        width: 240px !important;
        transform: translateX(0%);
    }
    
    .visionWrap figure, .missionWrap figure, .valuesWrapInner figure{
        display: none;
    }
    .visionWrap p, .missionWrap p, .valuesWrapInner .contP {
        width: 100%;
        padding-left: 0;
    }
    .valuesWrapInner .contP figure img {
        width: 100%;
    }
    
}


@media only screen and (max-width: 450px){
    .yearSection ul li .yearBox{
        padding: 31px 30px 30px 25px !important;
        width: 300px !important;
        height: 106px;
        margin: 0 auto;
        display: block;
    }
    .yearSection ul li .yearBox.yearBox_05,
    .yearSection ul li .yearBox.yearBox_06{
        width: 220px !important;
    }
    
    .block_03{
        padding-bottom: 0;
    }
    .heighlightImgBox img{
        display: none;
    }
    .heighlightImgBox figure{
        left: 0;
        right: 0;
        margin: auto;
        width: 290px !important;
        transform: translateX(0%);
    }
    .heighlightImgBox figure img{
        display: block;
    }
    .heighlightImgBox video{
    	display: none;
    }
}


@media only screen and (max-width: 360px){
    .socialLinkList li {
        width: 100%;
    }
}




@media only screen and (max-width: 568px) and (min-width: 320px) and (orientation: portrait) {
    .logo {
        width: 130px;
    }
    .midCont {
        width: calc(100% - (130px + 60px));
    }
    .midCont .big {
        font-size: 8pt;
    }
    .midCont .large {
        font-size: 20px;
    }
    
    main {
        padding-top: 57px !important;
    }
    .metro_main{
        height: 450px;
    }
    .topChain {
        width: 150px !important;
        left: -5px !important;
        top: -10px !important;
    }
    .botChain {
        bottom: 0px !important;
        width: 150px !important;
        right: -35px !important;
    }
    
    .titleBox .mainTitle {
        font-size: 34px;
    }
    .titleBox .mainSubTitle {
        font-size: 22px;
    }
}


@media only screen and (max-width: 640px) and (min-width: 360px) and (orientation: portrait) {
    .metro_main{
        height: 450px;
    }
    .topChain {
        width: 170px !important;
        left: -10px !important;
        top: -25px !important;
    }
    .botChain {
        bottom: -25px !important;
        width: 170px !important;
        right: -40px !important;
    }
}


@media only screen and (max-width: 667px) and (min-width: 375px) and (orientation: portrait) {
    .metro_main{
        height: 450px;
    }
    .topChain {
        width: 170px !important;
        left: -5px !important;
        top: -25px !important;
    }
    .botChain {
        bottom: -25px !important;
        width: 170px !important;
        right: -40px !important;
    }
}


@media only screen and (max-width: 736px) and (min-width: 414px) and (orientation: portrait) {
    .metro_main{
        height: 450px;
    }
    .topChain {
        width: 170px !important;
        left: 20px !important;
        top: -25px !important;
    }
    .botChain {
        bottom: -45px !important;
        width: 170px !important;
        right: -10px !important;
    }
}


@media only screen and (max-width: 812px) and (min-width: 375px) and (orientation: portrait) {
    .metro_main{
        height: 450px;
    }
    .topChain {
        width: 170px;
        top: -25px;
        left: 0;
    }
    .botChain {
        bottom: -25px;
        width: 170px;
        right: -30px;
    }
}