.mobile-menu-btn{
    display: none;
    z-index: 9999;
}

.mobile-menu-btn i{
    color: white;
    cursor: pointer;
}

.opened{
    overflow: hidden;
}

@media screen and (max-width: 1600px) {
    .navbar-area>ul>li{
        padding-left: 60px;
    }
}

@media screen and (max-width: 1400px) {
    .navbar-area>ul>li{
        padding-left: 40px;
    }

    .banner-slogon .section-title h4, .vs-title {
        font-size: 32px!important;
        margin-left: 10px;
        margin-right: 10px;
    }
    
    .banner-slogon .section-slogan2, .banner-slogon .section-sub-slogan2 span, .section-slogan2-iep, .vs-sub-title{
        font-size: 20px!important;
    }
}

@media screen and (max-width: 1199px) {
    .lang-drop {
        right: 15px;
    }
    
    .p-line, .p-long-line, .p-long-line-group, .p-short-line, .p-long-line2, .p-line3, .p-line2{
        display: none;
    }

    #ManagementDiv .team-second:nth-child(2n) .team-label, 
    #ManagementDiv .team-second:nth-child(4n) .team-label{
        display: none;
    }

    .iep-section-row:first-child{
        margin-bottom: 3rem;
    }
    .lang-row a{
        font-size: 14px;
        padding: 0 10px;
    }

    .lang-area img{
        max-width: 18px;
    }

    .mobile-button-toggle{
        display: none;
    }

    .mobile-menu-btn{
        display: flex;
        min-width: 108px;
    }

    .master-header{
        padding: 20px;
    }

    .navbar-area{
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba(0,0,0,0.75);
        width: 100%;
        height: 100vh;
    }
    
    .navbar-area > ul{
        overflow-y: auto;
        height: 100%;
        display: flex;
        flex-direction: column;
        padding: 80px 40px 0;
    }

    .navbar-area>ul>li{
        align-items: center;
        flex-direction: column;
        padding: 0;
        margin:0 0 40px;
        text-align: center;
        transition: all .5s ease-in-out;
    }

    

    .navbar-area>ul>li:last-child{
        margin: 0;
    }

    .hover-menu{
        top:0;
        position: relative;
        background-color: transparent;
        margin-top: 20px;
        padding: 10px 0;
        align-items: center;
        transition: all .5s ease-in-out;
        box-shadow: none;
    }

    .hover-menu li{
        margin-bottom: 20px;
    }

    .hover-menu li:last-child{
        margin-bottom: 0;
    }

    .hover-menu-text{
        color: white!important;
    }

    .menu > a{
        font-size: 18px;
        font-weight: bold;
    }

    .section-number-box{
        flex-direction: column;
    }

    .section-item .box{
        padding: 0 20px;
    }

    .section-title h4{
        font-size: 28px;
    }

    .section-sub-slogan2{
        margin: 10px 10px;
        font-size: 14px;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .arrow-right-img{
        margin: 0 10px 0 10px;
    }

    .card-box{
        flex-direction: column;
    }
    
    .green-card-item{
        transform: none;
        box-shadow: none;
        margin-bottom: 20px;
    }

    .green-card-item:hover{
        margin: 0 0 20px;
        transform: none;
    }

    .am-arrow-right-img{
        display: none;
    }

    p{
        text-align: justify!important;
    }

    .iep-master-box{
        flex-direction: column;
    }

    .iep-label-line{
        width: 100px;
    }

    .section-slogan2-iep{
        font-size: 16px;
        margin:0 10px;
    }
    
    #IEPCardDiv .green-card-item{
        box-shadow: none;
        background-color: rgba(197, 197, 197, 0.85);
    }
    
    #IEPCardDiv .green-card-item:hover{
        background-color: white;
    }

    #AllEventListDiv{
        margin-top: 30px;
    }

    .news-container{
        grid-template-columns: 1fr 1fr;
    }

    .team-second{
        margin-top: 20px;
        flex: 1;
    }

    .team-flex3 .team-people{
    }

    #ManagementDiv .team-second:nth-child(1n){
        margin-bottom: 0;
    }

    .p-line, .p-long-line, .p-long-line-group, .p-short-line, .p-long-line2, .p-line3, .p-line2{
        display: none;
    }

    .team-lead, #ManagementDiv{
        display: flex!important;
        flex-direction: column!important;
        align-items: center!important;
    }

    .team-label{
        margin-bottom: 1rem!important;
    }

    .team-second{
        margin-bottom: 20px;
        max-width: initial!important;
    }

    .ship-link{
        display: flex;
        flex-direction: column;
    }
}

@media screen and (max-width: 991px) {
    .logo-area{
        display: none;
    }

    .section-banner-text h3{
        font-size: 30px;
    }

    .section-banner-text h5{
        font-size: 20px;
    }

    .list-item{
        flex-direction: column;
        align-content: center;
    }
    
    .text-list-item{
        font-size: 16px;
        min-width: auto;
        text-align: center;
    }

    .text-list-item:last-child{
        margin: 0;
    }

    .banner-section-item{
        padding: 60px 0;
    }

    .section-card-box{
        margin: 30px 0 0;
        flex-direction: column;
        align-items: center;
    }

    .s-card{
        margin: 0 0 20px;
        max-width: 411px;
    }

    .s-card img{
        margin-top: 0;
    }

    .news-card-box{
        justify-content: space-evenly;
    }

    .news-card{
        width: 45%;
    }

    .partner-card-box{
        justify-content: space-evenly;
    }

    .pc-item{
        width: calc(100% / 5);
    }

    #HonorSwiperDiv img{
        max-width: 250px;
    }

    .honor-item{
        display: flex!important;
        justify-content: center;
    }

    .slick-prev{
        left: 20px;
    }

    .slick-next{
        right: 20px;
    }

    #FooterLogoDiv{
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #FooterContactDiv{
        padding: 0;
    }

    #FooterContentDiv{
    }

    #FooterQRDiv{
        margin-top: 20px;
    }

    .footer-content > .row{
        padding: 0 20px;
    }

    .footer-content .row .col-12{
        width: 100%;
        max-width: 100%;
        margin-bottom: 1rem;
    }

    .footer-nav{
        flex-direction: column;
    }

    .footer-nav a{
        margin-bottom: 3px;
    }

    .footer-nav a:last-child{
        margin-bottom: 0;
    }
    
    .footer-bottom-box{
        padding: 0 20px;
        flex-direction: column;
        align-items: center;
    }

    .footer-bottom-box div{
       /* margin-bottom: 10px; */
    }

    #CmSwiperMasterDiv img{
    }

    .cm-list-item{
        padding: 0;
    }

    #CmListItemDiv{
        margin-top: 20px;
    }

    .cm-box{
        padding: 0;
    }

    .cm-list-item h5{
        font-size: 14px;
    }

    .section-cm-content p{
        max-width: 100%;
    }

    .cm-list-item img{
        margin-right: 10px;
        max-width: 20px;
    }

    .ai-label-box{
        display: none!important;
    }

    .annnouncemnt-item{
        padding: 20px 0!important;
        flex-direction: column!important;
    }

    .annnouncemnt-item div{
        width: 100%;
        line-height: 2;
    }

    .ai-title{
        line-height: 20px!important;
    }

    .ai-download{
        margin-top: 20px;
    }

    .report-thumbnail {
        max-width: 180px!important;
    }

    .milestone-box{
        max-width: 80%;
    }

    #MilestoneMasterDiv{
        padding: 20px;
    }
    
    .ms-nav-button{
        max-width: 95%;
    }

    .contact-left{
        padding: 20px!important;
        border-radius: 0;
    }

    .contact-right img{
        border-radius: 0;
    }

    .contact-row{
        padding: 0;
    }

    .c-address{
        margin-top: 0;
    }

    .media-navbar{
        flex-direction: column-reverse;
        align-items: flex-start;
    }

    .year-box {
        width: 100%;
        overflow-x: auto;
    }

    .media-year-box{
        width: 100%;
        margin: 30px 0 10px;
        overflow-x: auto;
    }
    
    #MediaLabelDiv{
        display: none;
    }

    .media-item{
        padding: 20px 10px!important;
    }

    .mc-title{
        margin-top: 5px;
        line-height: 24px;
    }

    .media-label{
        width: 100%;
        margin-right: 0;
        margin-bottom: 10px;
    }

    .media-row{
        width: 100%;
        flex-direction: column;
        margin-bottom: 20px;
        margin-right: 0;
    }
    
    .media-right{
        width: 100%;
        flex-direction: column;
        align-items: end;
    }

    #DateFromDiv, #DateToDiv, #SearchTitleDiv{
        width: 100%!important;
    }

    #SearchTitleDiv{
        margin-right: 0!important;
        margin-bottom: 20px;
    }
    
    .slick-prev, .slick-next{
        z-index: 999;
    }

    .esg-item{
        flex-direction: column!important;
        margin-bottom: 40px;
    }

    .esg-detail-item{
        flex-direction: column!important;
        padding: 20px 0!important;
    }

    .esg-date{
        line-height: 2;
    }

    .esg-download {    
        margin-top: 20px!important;
        width: 100%!important;
        line-height: 2;
        display: flex!important;
        justify-content: center!important;
    }

    .esg-line{
        width: 57px!important;
        height: 3px!important;
        margin: 10px 0!important;
    }

    .cm-master-box{
        flex-direction: column!important;
    }

    .cm-item, .cm-star{
        margin-bottom: 40px;
    }
}

@media screen and (max-width: 767px) {
   
    #AboutUsContentDiv{
        margin-top: 30px;
    }

    .aboutus-section{
        padding: 0;
    }

    .team-logo, .p-line, .p-long-line, .p-long-line-group, .p-text-group, .h-line, .p-line2, .p-long-line2, .p-line3, .team-group-label {
        display: none;
    }

    .team-lead, .team-flex3 .row {
        margin: 0!important;
    }

    .team-lead, .team-flex3 .row{
        display: flex!important;
        flex-direction: column!important;
        align-items: center!important;
    }

   

    .ms-swiper-button-prev, .ms-swiper-button-next{
        width: 35px;
        height: 35px;
    }

    .aboutus-section .col-md-6{
        margin-top: 20px;
        height: initial!important;
    }

    .aboutus-section img{
        object-fit: contain!important;
    }

    .aboutus-content{
        padding: 0;
    }
}

@media screen and (max-width: 640px) {
    .news-card{
        width: 100%;
    }
    .pc-item{
        width: calc(100% / 3);
    }
    .logo-area img{
        max-width: 80px;
    }

    .lang-area img{
        display: none;
    }
    .mobile-menu-btn{
        min-width: 90px;
    }

    #HomeBannerDiv img{
        object-fit: cover;
    }

    .slick-prev, .slick-next {
        width: auto;
        height: auto;
    }

    .news-container {
        grid-template-columns: 1fr;
    }

    .news-content-title{
        font-size: 20px;
        line-height: 24px;
    }
    
    .flip-items img{
        max-width: 280px!important;
    }

    .job-box{
        padding: 30px 20px;
    }
    
    .job-content li{
        margin-bottom: 10px;
        font-size: 14px;
    }

    .job-content ul li:first-child{
        font-weight: bold;
    }

    #index-video{
        width: 100%;
        height: 100%;
    }

    .section-slogan span{
        font-size: 16px;
    }

    .slogan-linear-line-left {
        width: 60px;
        height: 6px;
    }

    .slogan-linear-line-right {
        width: 60px;
        height: 6px;
    }

    .vs-title{
        font-size: 20px!important;
    }

    .vs-sub-title{
        font-size: 16px!important;
        margin-top: 1rem!important;
    }
}

@media only screen and (max-width:555px){
    .footer-content{
        padding:15px 0;
    }
    #FooterContactDiv{
        margin-bottom: 0rem!important;
    }
    .footer-bottom-box{
        font-size: 12px;
    }
    .banner-slogon .section-slogan2{
        margin-top :15px;
    }

    .banner-slogon .section-title h4, .vs-title {
        margin-top:25px
    }
    .section-slogan2-iep{
        margin-top : 15px !important;
        text-align: center;
    }

}

@media screen and (max-width: 414px) {
    .gallery-box{
        padding: 0 20px;
        margin: 20px 0;
    }

    .flipster__item__content{
        -webkit-box-reflect: initial!important;
    }

    #HonorSwiperDiv img{
        max-width: 180px;
    }

    .slick-next:before, .slick-prev:before{
        background-size: 10px 15px;
    }
    
}

@media screen and (max-width: 375px){
    .section-title h4{
        font-size: 24px;

    }
    .section-slogan2-iep {
        font-size: 14px;
    }

    #GCI0:hover, #GCI1:hover, #GCI2:hover, #GCI4:hover{
        margin: 0 10px!important;
    }
}