/* ======================= WIDTH 1600PX ======================= */
@media screen and (max-width:1600px) {

    /* ==================== HOME ==================== */  

    #banner.home {
        padding-bottom: 522px;
    }

    #energy-list .item-bg {
        height: 600px;
    }

    /* ==================== HOME ==================== */ 

    /* ==================== ABOUT ==================== */ 
    
    #banner-about {
        background-position-x: -222px;
    }

    #banner-about img {
        width: 100%;
        margin-top: 250px;
    }

    #banner-about .section-content-bottom {
        margin-top: 900px;
    }

    #banner-about .section-content-bottom .left {
        width: 78%;
    }
    
    /* ==================== ABOUT ==================== */ 

    /* ==================== THE BUSINESS ==================== */ 

    #the-business {
        background-position-x: -222px; 
    }

    #the-business .content-img img {
        margin-top: 250px;
    } 

    #the-business .section-content-bottom {
        margin-top: 900px;
    }

    #the-business .bottom-content .detail {
        width: 80%;
    }
 

    /* ==================== THE BUSINESS ==================== */ 

    
    /* ==================== CONTACT US ==================== */ 
    #contact-us {
        background-position-x: -222px; 
    }

    #contact-us .content-img img {
        margin-top: 250px;
    } 

    #contact-us .section-content-bottom {
        margin-top: 900px;
    }

    #contact-us .content-img iframe {
        height: 900px !important;
    }

    /* ==================== CONTACT US ==================== */ 
    
    
    /* ==================== NEWS DETAIL ==================== */ 

    #news-detail .news-content .text,  
    #news-detail .writter h6 {
        width: 39%; 
    }

    #news-detail .news-content .red-text {
        width: 54%;
    }
    
    #news-detail .slider-image .slider-arrow.arrow-l {
        right: 549px;
    }

    #news-detail .slider-image .slider-arrow.arrow-r {
        right: 481px;
    }

    #banner-news-detail .bg-detail { 
        height: 701px;
    }
    /* ==================== NEWS DETAIL ==================== */ 
}

/* ======================= WIDTH 1441PX ======================= */
@media screen and (max-width:1500px) {
    /* ======================= NEWS ======================= */
    #news-list .title h5 > *, #news-list .hov-title h5 > * {
        font-size: 20px;
    }
    /* ======================= NEWS ======================= */
}

/* ======================= WIDTH 1441PX ======================= */
@media screen and (max-width:1441px) {
    /* ==================== HOME ==================== */ 
    #banner.home {
        padding-bottom: 360px;
    } 
    
    #energy-list .bottom .det-text,
    #energy-list .body .text { 
        width: 80%;
    }

    #energy-list .top .short-desc {
        width: 65%;
    }

    #news-list .title h5 > *, #news-list .hov-title h5 > * {
        font-size: 19px;
        line-height: 26px;
    }

    #news-list .post-date { 
        font-size: 12px;
    }

    .btn-circle {
        font-size: 14px;
    }

    /* ==================== HOME ==================== */ 

    /* ==================== ABOUT ==================== */ 
    #banner-about {
        background-position-x: -268px;
    }

    #banner-about .section-content-bottom {
        margin-top: 800px;
    }

    #banner-about .bg-bottom {
        height: 350px;
    }

    #banner-about .section-content-bottom .left {
        width: 85%;
    }

    #banner-about .section-content-bottom .right {
        width: 81%;
    }
    
    #card-list-about .item-bg {
        height: 500px;
    }

    /* ==================== ABOUT ==================== */ 

    /* ==================== THE BUSINESS ==================== */ 
    #the-business {
        background-position-x: -268px;
    }

    #the-business .section-content-bottom {
        margin-top: 800px;
    }

    #the-business .bg-bottom {
        height: 350px;
    }

    #the-business .bottom-content .detail {
        width: 89%;
    }

    /* ==================== THE BUSINESS ==================== */ 

    /* ==================== NEWS ==================== */ 
    .news-list #news-list .body {
        height: 120px;
        max-height: 120px;
    }

    #instagram .bg-ig {
        height: 340px;
    }

    #news-list .body {
        padding: 15px 25px 30px;
    }

    #news-list .news-hover .news-hover-wrapper {
        padding: 6px 25px 30px;
    } 
    
    #news-detail .news-content .text,  
    #news-detail .writter h6 {
        width: 43%; 
    }

    #news-detail .news-content .red-text {
        width: 60%;
    }

    #news-detail .slider-image .slider-arrow.arrow-l {
        right: 479px;
    }

    #news-detail .slider-image .slider-arrow.arrow-r {
        right: 411px;
    }

    /* ==================== NEWS ==================== */ 

    /* ==================== CONTACT US ==================== */ 

    #contact-us {
        background-position-x: -268px;
    }

    #contact-us .section-content-bottom {
        margin-top: 800px;
    }

    #contact-us .bg-bottom {
        height: 350px;
    } 

    #contact-us .content-img iframe {
        height: 800px !important;
        margin-top: 305px;
    }


    /* ==================== CONTACT US ==================== */ 

      
}


/* ======================= WIDTH 1366PX ======================= */
@media screen and (max-width:1366px) {
    /* ==================== HOME ==================== */ 
        #banner.home {
        padding-bottom: 131px;
    }
    
    #banner .bg-banner-home .bg-inner {
        height: 500px;
    }

    #banner.home h1 {
        font-size: 100px;
        line-height: 110px;
    }

    #banner .bg-banner-home .bg-inner h2 {
        font-size: 42px;
    }

    #energy-list .item-bg {
        height: 550px;
    }

    .title-48 {
        font-size: 44px;
        line-height: 55px;
    }

    #news-list .title h5 > *, #news-list .hov-title h5 > * {
        font-size: 16px;
        line-height: 22px;
    }

    menu #full-price .progress-bar-value.green {
        right: -32px;
    }

    menu #full-price .progress-value {
        font-size: 18px; 
    }

    menu #full-price .progress-recent {  
        font-size: 14px;
    }

    menu #full-price .progress-bar {
        padding: 10px 23px;
    }

    footer .logo {
        width: 250px;
    }

    footer .sosmed img {
        width: 40px;
    }
    /* ==================== HOME ==================== */ 
    
    /* ==================== ABOUT ==================== */ 
    #banner-about .section-content-bottom {
        margin-top: 750px;
    }

    #banner-about .section-content-bottom .right {
        width: 84%;
    } 
    
    /* ==================== ABOUT ==================== */ 

    /* ==================== THE BUSINESS ==================== */ 
    #the-business .section-content-bottom {
        margin-top: 750px;
    }

    #the-business .bottom-content .detail {
        width: 92%;
    }

    /* ==================== THE BUSINESS ==================== */  

    /* ==================== NEWS ==================== */ 
    .news-list #news-list .bg-news {
        height: 305px;
    }
    /* ==================== NEWS ==================== */ 

    /* ==================== NEWS DETAIL ==================== */ 
    
      #news-detail .news-content .text,  
      #news-detail .writter h6 {
          width: 46%; 
      }
  
        #news-detail .news-content .red-text {
            width: 53%;
        }

        #news-detail .slider-image .slider-arrow.arrow-r {
            right: 373px;
        }

        #news-detail .slider-image .slider-arrow.arrow-l {
            right: 438px;
        } 
  
      /* ==================== NEWS DETAIL ==================== */ 
    
}

/* ======================= WIDTH 1300PX ======================= */
@media screen and (max-width:1300px) {
    #company-info-list .title {
        font-size: 26px;
        margin-bottom: 10px;
    }

    #company-info-list .detail {
        font-size: 16px;
    }
    
}

/* ======================= WIDTH 1200PX ======================= */
@media screen and (max-width:1200px) {
    /* ==================== MENU ==================== */ 
    menu #full-price .progress-bar {
        padding: 8px 19px;
    }

    menu #full-price .progress-recent {
        font-size: 12px;
    }
   
    menu #full-price .progress-value {
        font-size: 16px;
    }

    menu #full-price .progress-bar-value.green {
        right: -45px;
    }

    menu .inner .left ul li a {
        font-size: 14px;
    }

    /* ==================== MENU ==================== */ 

    /* ==================== HOME ==================== */ 
    #banner .bg-banner-home .bg-inner {
        height: 400px;
    }
    
    #energy-list .item-bg {
        height: 500px;
    }
    
    #energy-list .body .text,
    #energy-list .bottom .det-text {
        font-size: 26px;
    }
    /* ==================== HOME ==================== */ 
    
    /* ==================== ABOUT ==================== */  
    .title-96 {
        font-size: 86px;
        line-height: 90px;
    }

    #banner-about .section-content-bottom {
        margin-top: 700px;
    }
    
    #banner-about .bg-bottom {
        height: 300px;
    }

    #card-list-about .item-bg {
        height: 450px;
    }
    /* ==================== ABOUT ==================== */ 

    /* ==================== THE BUSINESS ==================== */ 
    #the-business .section-content-bottom {
        margin-top: 700px;
    }
    
    #the-business .bg-bottom {
        height: 300px;
    }

    #the-business .bottom-content .detail {
        font-size: 28px;
        line-height: 38px; 
    }

    #company-list .navigation a {
        font-size: 28px;
    }

    /* ==================== THE BUSINESS ==================== */ 

    /* ==================== NEWS ==================== */ 
    .news-list #news-list .bg-news {
        height: 275px;
    }

    #instagram .bg-ig {
        height: 270px;
    }

    /* #banner-news-detail .banner-wrapper .inner {
        top: 180px;
    } */

    #news-detail .slider-image .slider-arrow.arrow-r {
        right: 285px;
    }

    #news-detail .slider-image .slider-arrow.arrow-l {
        right: 355px;
    }

    #news-detail .news-content .text, #news-detail .writter h6 {
        width: 52%;
    }

    #news-detail .news-content .red-text {
        width: 69%;
    }

    /* ==================== NEWS ==================== */ 

    /* ==================== ABOUT US ==================== */
    #banner-about .section-content-bottom .right {
        font-size: 40px;
        line-height: 50px;
    }

    #banner-about .section-content-bottom .left {
        font-size: 28px;
        line-height: 38px;
    }

    #banner-about .content-text {
        padding-bottom: 200px;
    }
    
    /* ==================== ABOUT US ==================== */ 
}


/* ======================= WIDTH 1140PX ======================= */
@media screen and (max-width:1140px) {
    /* ==================== MENU ==================== */ 
    menu .inner .left ul {
        padding-left: 46px;
    }

    menu .inner .left ul {
        gap: 36px;
    }
    /* ==================== MENU ==================== */ 
    
    /* ==================== NEWS ==================== */ 
    #news-detail .slider-image .slider-arrow.arrow-r ,
    #news-detail .slider-image .slider-arrow.arrow-l {
        display: none;
    }

    #news-detail .news-content .text, #news-detail .writter h6 {
        width: 61%;
    }
    /* ==================== NEWS ==================== */ 
}

/* ======================= WIDTH 1100PX ======================= */
@media screen and (max-width:1100px) {
    .res-mb60 {margin-bottom: 60px;}

    .res-ft-70 {
        font-size: 70px;
        line-height: 80px;
    }
    
    .res-pt150 {padding-top: 150px !important;}
    .res-pt205 {padding-top: 205px !important;}
    /* ==================== CONTACT ==================== */ 
    .contact-title-ftab, #contact-us .section-content-bottom .right * {
        font-size: 25px !important;
        line-height: 35px;
    }
    
    #contact-us .content-img iframe {
        margin-top: 205px;
    }

    #contact-us .bg-bottom {
        height: 180px;
    }

    #contact-us {
        padding-top: 150px;
    }
    /* ==================== CONTACT ==================== */ 
    
    /* ==================== NEWS ==================== */ 
    #instagram .bg-ig {
        height: 230px !important;
    }
    /* ==================== NEWS ==================== */ 

    /* ==================== ABOUT US ==================== */
    #card-list-about .top .short-desc {
        width: 100%;
    }
    /* ==================== ABOUT US ==================== */ 

    /* ==================== HOME ==================== */ 
    #energy-list .item-bg {
        height: 450px;
    }

    #news .section-inside-wrapper {
        width: 100%;
    }
    /* ==================== HOME ==================== */ 
}

/* ======================= WIDTH 1024px ======================= */
@media screen and (max-width:1024px) {

    .tab-only-1024 {
        display: block;    
    }

    .tab-lg-pt-120 {padding-top: 120px !important;}

    .tab-lg-pb-120 {padding-bottom: 120px !important;}

    .tab-lg-dnone {display: none !important;}

    /* ==================== NEWS ==================== */ 
    .news-list #news-list {
        grid-template-columns: repeat(2, 1fr);
    }

    /* REMOVE HOVER */
    #news-list .news-hover {
       display: none;
    }

    #banner-news-detail .banner-wrapper h1 {
        font-size: 54px;
        line-height: 70px;   
    }


    /* ==================== NEWS ==================== */ 

    /* ==================== THE BUSINESS ==================== */ 
    #the-business .section-content-bottom {
        margin-top: 600px;
    }

    #the-business .bottom-content .logo-list {
        gap: 60px;
    }
    /* ==================== THE BUSINESS ==================== */ 

    /* ==================== ABOUT US ==================== */ 
    #banner-about .section-content-bottom {
        margin-top: 600px;
    }
    
    #banner-about .section-content-bottom .right {
        font-size: 36px;
        line-height: 46px;
    }

    #banner-about .section-content-bottom .left {
        font-size: 24px;
        line-height: 34px;
    }

    #card-list-about .item-bg {
        height: 400px;
    }

    #company-info-list .detail {
        font-size: 14px;
    }
    /* ==================== ABOUT US ==================== */

    /* ==================== HOME ==================== */ 
    /* ==================== HOME ==================== */ 
}

/* ======================= WIDTH 991px ======================= */
/* ======================= NOTES : MOBILE MENU APPREAR ======================= */
@media screen and (max-width:991px) {
    #our-business .content-inner br {display: none;}

    /* menu#navbar {
        display: none;
    } */
    .tab-lg-done {display: none;}

    .mobile-only-991 {
        display: block !important;
    }
    
    /* ==================== MENU ==================== */ 
    menu#navbar-mobile {
        display: block;
    }

    menu#navbar {
        bottom: 0;
        z-index: 999;
        background: var(--main-red);
        top: 0 !important;
        display: none;
    }

    menu {
        transition: unset;
    }

    menu#navbar .container {
        width: 100%;
        position: relative;
        height: 100%;
    }

    menu#navbar #logo {
        display: none;
    }

    menu .inner,
    menu .inner .left,
    menu .inner .left ul { 
        display: block !important;
    }

    #header-menu-mobile { 
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        padding: 30px 0; 
        width: 91%;
        margin: 0 auto;
    }

    #header-menu-mobile #logo-mobile img {  
        width: 210px !important;
    }

    #header-menu-mobile #nav-open img   {  
        width: 60px !important;
    }

    menu .inner .left ul {
        padding-left: 0;
    }

    menu .inner .left ul li a {
        font-size: 30px;
        display: block;
        color: var(--white) !important;
        width: 91%;
        margin: 0 auto; 
        padding: 15px 0;
        margin-bottom: 20px;
    } 

    menu .inner .navigation-menu a {
        padding-bottom: 0 !important;
        font-size: 18px !important;
        padding-top: 40px !important;
    }
    
    menu #full-price {
        width: 91%;
        margin: 0 auto;
        position: absolute;
        bottom: 40px;
        left: 0;
        right: 0;
        display: none;
    }

    menu #full-price .progress-bar {
        width: 312px;
        margin: 0 auto;
    }
    
    menu #full-price .progress-recent {
        font-size: 16px;
    }

    menu #full-price .progress-bar {
        background: var(--white) !important; 
        color: var(--black) !important;
    }

    menu .inner .left ul li a::after {
        display: none !important;
    }

    menu .inner .left ul li a.active {
        border-bottom: unset !important;
        font-family: 'switzer-r';
    }
    
    menu .inner .left ul li.mobile-active {
        background: var(--white);
    }

    menu .inner .left ul li.mobile-active a {
        color: var(--main-red) !important;
    }

    /* menu.open  */

    /* ==================== MENU ==================== */ 

    /* ==================== THE BUSINESS ==================== */ 
    .company-list.active {
        row-gap: 40px;
    }

    .company-list img {
        width: 75%;
    }

    #the-business .section-content-bottom {
        margin-top: 500px;
    }

    /* ==================== THE BUSINESS ==================== */ 
    
    /* ==================== ABOUT US ==================== */ 
    .vimi-text { 
        font-size: 38px;
        line-height: 46px;
        margin-bottom: 50px;
    }
    
    #company-info-list ul {
        column-count: unset;
    }
    
    #vision-mission .content-wrapper {
        flex-wrap: wrap;
    }

    #vision-mission .section-title {
        width: 100%;
    }
      
    #vision-mission .section-content {
        width: 90%;
    }

    #banner-about .section-content-bottom .container {
        gap: 20px;
    }

    #banner-about .section-content-bottom .right {
        width: 100%;
    }
    
    #iso .iso-hover .title {
        font-size: 24px;
    }

    #iso .iso-hover .desc {
        font-size: 16px;
    }

    #iso .container {
        width: 100%;
    }

    #iso .container .section-title {
        width: 91%;
        margin: 0 auto;
    }
    

    /* #iso .container .section-content {
        width: 95%;
        margin-left: auto;
    } */
    
    /* ==================== ABOUT US ==================== */ 

    /* ==================== HOME ==================== */ 
    
    #energy-list {
        overflow-y: scroll;
        padding-left: 20px;
        padding-right: 20px;
    }

    #energy-list .item-bg {
        width: 350px;
    }

    #intro .container {
        width: 100%;
    }

    #intro .section-title {
        width: 91%;
        margin: 0 auto;
    }

    #intro .section-content {
        width: 100%; 
    }

    #banner.home h1 {
        font-size: 90px;
        line-height: 100px;
    }

    #banner .bg-banner-home .bg-inner h2 {
        font-size: 36px;
    }
    /* ==================== HOME ==================== */ 


}

/* ======================= WIDTH 850PX ======================= */
@media screen and (max-width:850px) {
    /* ==================== CONTACT ==================== */  

    #contact-us .content-img iframe {
        margin-top: 185px;
        height: 600px !important;
    }

    #contact-us .section-content-bottom {
        margin-top: 535px;
    }
    
    #contact-us .section-content-bottom .container {
        flex-wrap: wrap;
    }

    #contact-us .section-content-bottom .left {
        width: 100%;
    }

    #contact-us h2 {
        margin-bottom: 40px !important;
    }
    
    /* ==================== CONTACT ==================== */ 

    /* ==================== THE BUSINESS ==================== */  
    #operation-area #list-area .item {
        margin-bottom: 17px;
    }

    #banner-about .section-content-bottom .container {
        grid-template-columns: repeat(1, 1fr);
        gap: 40px;
    }

    #banner-about .bg-bottom {
        height: 200px;
    }
    
    #banner-about .content-text {
        padding-bottom: 120px;
    }

    /* ==================== THE BUSINESS ==================== */  
}

/* ======================= WIDTH 768PX ======================= */
@media screen and (max-width:768px) {
    
    .tab-ft-32 {font-size: 32px !important;}

    .tab-dnone {display: none !important;}

    .tab-text-center {text-align: center !important;}

    .tab-justify-center {justify-content: center !important;}

    .tab-content-p60 {padding: 60px 0;}

    .tab-pt-60 {padding-top: 60px !important;}

    .tab-pb-60 {padding-bottom: 60px !important;}

    .mobile-only-768 {
        display: block;
    }

    /* ==================== NEWS ==================== */ 
    banner-news-detail .banner-wrapper .date {
        font-size: 18px;
        margin-bottom: 15px; 
    }

    #banner-news-detail .banner-wrapper h1 {
        font-size: 44px;
        line-height: 60px;
    }

    #banner-news-detail .banner-wrapper .inner {
        top: 180px;
    }

    #banner-news-detail .bg-detail {
        height: 601px;
    }

    #news-detail .news-content .red-text {
        width: 90%;
    }

    #news-detail .news-content .text, #news-detail .writter h6 {
        width: 81%;
    }

    /* ==================== NEWS ==================== */ 

    /* ==================== MENU ==================== */ 
    menu#navbar-mobile .logo img {
        width: 160px;
    }

    #navbar-mobile {
        padding: 25px;
    }

    /* ==================== MENU ==================== */ 

    /* ==================== FOOTER ==================== */ 
    footer .inner {
        flex-wrap: wrap;
    }   

    footer .inner .right {
        width: 100%;
    }   
    
    footer .inner .right ul {
        padding-left: 0; 
        margin-top: 40px;
    }   
    
    footer .inner .bottom {
        margin-top: 40px;
        flex-wrap: wrap;
        justify-content: center;
        gap: 40px;
    }

    footer .inner .bottom .copyright {
        order: 2;
    }

    footer .sosmed ul {
        padding-left: 0;
    }
    
    /* ==================== FOOTER ==================== */ 

    /* ==================== ABOUT US ==================== */ 
    #iso-list { 
        overflow-y: hidden;
        padding-left: 20px;
        padding-right: 20px;
    }

    #iso-list > div { 
        width: 450px;
    }

    #banner-about .section-content-bottom {
        margin-top: 540px;
    }
    /* ==================== ABOUT US ==================== */ 
}


/* ======================= WIDTH 700PX ======================= */
@media screen and (max-width:700px) {
    .tab-sm-mb40 {margin-bottom: 40px !important;}

    .tab-mob-ft-32 {font-size: 32px !important;}

    /* ==================== THE BUSINESS ==================== */ 
    
    #the-business .bg-bottom {
        height: 250px;
    }

    #the-business .section-content-bottom {
        margin-top: 400px;
    }

    #the-business .bottom-content .logo-list {
        grid-template-columns: repeat(2, 1fr); 
        gap: 40px;
    }

    #the-business .bottom-content .logo-list img { 
        width: 200px;
        margin: 0 auto;
    }

    /* ==================== THE BUSINESS ==================== */ 
    /* ==================== HOME ==================== */ 
    /* ==================== HOME ==================== */ 
} 


/* ======================= WIDTH 600PX ======================= */
@media screen and (max-width:700px) {
    /* ==================== ABOUT US ==================== */ 
    
    #oil-specification .btn-circle {
        width: 224px;
        font-size: 18px;
    }

    #oil-spec .question .title,
    #oil-spec .question .position {
        font-size: 26px;
        line-height: 30px;
    }

    #oil-spec .answer img {
        width: 100%;
    }

    #oil-spec .answer .accordion-body__contents {
        display: grid;
        grid-template-columns: repeat(1, 1fr); 
    }
    
    #oil-spec .answer .accordion-body__contents .acc-image {
        margin-bottom: 40px;
    }
 
    /* ==================== ABOUT US ==================== */ 
}

/* ======================= WIDTH 600PX ======================= */
@media screen and (max-width:600px) {
    menu#navbar-mobile .nav-button .back-btn {
        width: 27px;
    }
    
    menu#navbar-mobile .nav-button .hamburger-button img {
        width: 22px;
    }

    menu#navbar-mobile .nav-button .hamburger-button .ham-wrap-white,
    menu#navbar-mobile .nav-button .hamburger-button .ham-wrap-black,
    menu#navbar-mobile .nav-button .back-btn-wrapper {
        width: 40px;
        height: 40px;
    }

    /* ==================== MENU ==================== */ 
    menu#navbar-mobile .logo img {
        width: 110px;
    }

    #navbar-mobile {
        padding: 20px;
    }
    
    #navbar-mobile.scroll {
        padding: 15px 0;
    }
    /* ==================== MENU ==================== */ 
    
    /* ==================== FOOTER ==================== */ 
    footer .logo {
        width: 144px;
    }

    footer .inner .left {
        width: 100%;
    } 

    footer .address {
        width: 100%;
        font-size: 14px;
    } 

    footer .contact { 
        margin-top: 22px;
    }

    footer .inner {
        padding-top: 33px;
        padding-bottom: 55px; 
    }

    footer .inner .right ul {
        margin-top: 27px;
    }

    footer .inner .right ul li a {
        font-size: 14px;
    }
    
    .br-mobile-only {
        display: block !important;
    }

    footer .inner .bottom .copyright { 
        font-size: 14px;
        text-align: center;
    }

    footer .inner .bottom {
        margin-top: 30px;
    }
    /* ==================== FOOTER ==================== */ 

    /* ==================== CONTACT ==================== */ 
    #contact-us .content-img iframe {
        margin-top: 160px;
        height: 500px !important;
    }

    #contact-us .section-content-bottom .container {
        padding-top: 10px;
    }

    #contact-us .section-content-bottom .right *  {
        font-size: 14px !important;
        line-height: 18px !important;
    }

    #contact-us .section-content-bottom {
        margin-top: 530px;
    }

    #contact-us .content-text {
        padding-bottom: 70px;
    }
    
    #contact-us h2 {
        margin-bottom: 30px !important;
    }

    #contact-us {
        background-position-x: -1181px;
        background-position-y: 22px;
    }
    /* ==================== CONTACT ==================== */ 

    /* ==================== NEWS ==================== */ 
    
    #news #news-list,
    .news-list #news-list {
        display: grid; 
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
    }

    #news #news-list .box a,
    .news-list .box a {
        display: flex;
    }

    #news #news-list .bg-news,
    .news-list #news-list .bg-news {
        height: 125px;
        width: 125px;
        border-radius: 9px;
    }

    #news #news-list .body,  
    #news-list .body {
        border-radius: 0px;
        background: none;
    }

    #news #news-list .box,
    .news-list #news-list .box { 
        background: var(--white);
        border-radius: 15px;
        padding: 8px;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
    }

    #news #news-list .body,
     .news-list #news-list .body {
        background: none;
        display: grid;
        padding-bottom: 0;
        padding-top: 0;
        padding-right: 5px;
    }

    #news .post-date, 
    #news-list .post-date {
        display: grid;
        align-items: end;
    }

    /* news home */
    #news #news-list .body {
        width: 55%;
    }
    
    #news-list .body {
        min-height: 125px;
        max-height: 125px;
    }
    #news .section-inside-wrapper .news-top {
        padding: 0 !important;
    }

    #news .section-title {
        display: flex;
        justify-content: space-between;
        align-items: end;
    }

    .view-all-news {
        text-decoration: none;
        color: var(--main-red);
        font-size: 14px;
        font-family: 'switzer-r' !important;
    }

    section#news {
        padding: 30px 0 80px;
    }
    
    #news-list .box {
        width: 100% !important;
    }

    /* news home */

    #pagination ul li a.btn-page, 
    #pagination ul li a {
        font-size: 14px; 
    }

    #pagination ul {
        gap: 20px;
    }

    #pagination ul li a.active {
        width: 40px;
        height: 40px;
    }
    
    section#news.news-list {
        padding: 150px 0 40px !important;
    }

    #search-box input {
        height: 40px;
        font-size: 14px;
        background-position-x: 16px;
        padding-left: 51px;
    }

    #pagination ul {
        margin-top: 50px;
    }

    #pagination ul li a.btn-page, #pagination ul li a{
        font-size: 12px;
    } 
    
    #pagination ul li a.btn-page {
        padding: 9px 17px 8px;
    }

    #banner-news-detail .banner-wrapper h1 {
        font-size: 26px;
        line-height: 34px;
    }

    #banner-news-detail .banner-wrapper .date {
        font-size: 14px;
        margin-bottom: 10px;
    }

    #banner-news-detail .bg-detail {
        height: 350px !important;
    }

    #banner-news-detail .banner-wrapper .inner {
        top: 100px !important;
    }
    

    #news-detail .news-content .text {
        font-size: 14px;
        line-height: 18px;
    }

    #news-detail .news-content .red-text {
        font-size: 22px;
        line-height: 29px;
    }

    #news-detail .news-content .red-text {
        width: 84%;
    }

    #news-detail .news-content .item img {
        width: 96%;
        border-radius: 15px;
    }

    #news-detail .news-content .image {
        width: 96%;
        margin-right: 0;
    }
    
    #news-detail .news-content .text, #news-detail .writter h6 {
        width: 91%;
    }

    #news-detail .slider-image .slick-active .slider-text {
        opacity: 1;
    }

    #news-detail .slider-image .slider-text {
        padding-left: 0;
        width: 91%;
        margin: 0 auto;
        padding-top: 15px;
        font-size: 16px;
    }

    #news-detail .news-padding-start {
        padding-top: 40px;
    }

    #news-detail .news-padding {
        padding-top: 55px;
    }
    
    #news-detail .news-padding-end {
        padding-bottom: 45px;
    }
    
    #news-detail .writter h6 {
        margin-bottom: 50px;
        font-size: 14px;
    }

    #news-list .body {
        padding: 15px 21px 30px;
    }

    /* ==================== NEWS ==================== */ 
   
    /* ==================== THE BUSINESS ==================== */ 
    #the-business .content-img img {
        margin-top: 160px;
    }

    #the-business .section-content-bottom {
        margin-top: 520px;
    }

    #the-business .bg-bottom {
        height: 130px;
    }
 
    #the-business .bottom-content .logo-list img {
        width: 100px; 
    }

    #the-business .bottom-content .logo-list { 
        row-gap: 30px;
        column-gap: 20px;
    }

    #the-business .bottom-content .logo-list .odd img {
        margin-left: auto;
        margin-right: 0;
    }

    #the-business .bottom-content .logo-list .even img {
        margin-right: auto;
        margin-left: 0;
    }

    #the-business .bottom-content .detail {
        margin-top: 30px;
    }

    #the-business .content-text {
        padding-bottom: 70px;
    }

    #zoom-in {
        width: 14px; 
    }

    .operation-title-mobile {
        padding: 40px 0 22px;
        text-align: center;
    }

    #operation-area .top-img {
        padding-bottom: 30px;
    }

    #operation-area .body-content .right {
        order: 1;
        width: 100%;
    }

    #operation-area .body-content .left {
        order: 2;
        width: 100%;
    }

    #operation-area .body-content .container {
        flex-wrap: wrap;
    }

    .area-icon {
        margin: 0 auto;
        width: 131px;
    }
    
    #operation-area #list-area .item{
        display: block;
        width: 48%;
        margin: 0;
    }

    
    #operation-area #list-area .item a{
        font-size: 14px;
    }

    #list-area {
        display: flex;
        flex-wrap: wrap;
        gap: 11px; 
        margin-top: 20px;
        text-align: center;
    }

    #operation-area .body-content {
        padding-top: 25px;
        padding-bottom: 30px;
    }

    #operation-area #list-area .item.first { 
        width: 100% !important;
        order: 7; 
    }

    #company-list .navigation a {
        font-size: 22px;
        line-height: 24px;
        padding-bottom: 15px;
    }

    #company-list .navigation a:hover::after {
      opacity: 0 !important;
    }

    #company-list { 
        padding: 55px 0 80px !important;
    }

    .company-list.active {
        
        grid-template-columns: repeat(2, 1fr);
    }

    .company-list img {
        width: 66%; 
    } 

    #the-business {
        background-position-x: -1181px;
        background-position-y: 22px;
    }
    /* ==================== THE BUSINESS ==================== */ 
    
    /* ==================== ABOUT US ==================== */ 
    
    #banner-about {
        background-position-x: -1181px;
        background-position-y: 22px;
    }

    #banner-about img {
        margin-top: 160px;
    }

    #banner-about .section-content-bottom .left {
        width: 100%;
        font-size: 14px;
        line-height: 18px;
    }

    #banner-about .section-content-bottom {
        margin-top: 510px;
    }

    #banner-about .section-content-bottom .right {
        font-size: 22px;
        line-height: 29px;
        width: 82%;
    }

    #banner-about .content-text {
        padding-bottom: 60px;
    }

    #card-list-about .item-bg { 
        width: 300px;
    }

    #card-list-about { 
        overflow-y: scroll; 
        padding-right: 20px;
    }

    #vision-mission .container {
        width: 100% !important;
    }

    #vision-mission .section-title {
        width: 91% !important;
        margin: 0 auto;
    }

    #vision-mission .section-content {
        width: 94%;
        margin-right: 0;
        margin-left: auto;
    }

    #vision-mission {
        padding: 50px 0 70px;
    }

    #card-list-about .top .short-desc {
        font-size: 14px;
        line-height: 18px; 
    }

    #card-list-about .bottom .det-text, #card-list-about .body .text {
        font-size: 22px !important;
    }

    #card-list-about .body, 
    #card-list-about .item-bg .item-hover {
        padding: 18px 24px 18px;
        border-radius: 15px;
    }

    #company-info-list .title {
        font-size: 22px;
    }

    #company-information {
        padding: 55px 0 35px;
    }

    .last-item-ci {
        border-bottom: unset !important; 
    }
    
    #iso-list > div {
        width: 300px;
    }
    
    #iso-list > div img {
        border-radius: 15px;
        overflow: hidden;
    }

    #iso {
        padding-top: 70px;
        padding-bottom: 25px;
    }

    #iso .iso-hover .inner {
        text-align: left !important;
    }

    #iso .iso-hover .title {
        font-size: 22px;
    }

    #iso .iso-hover .desc {
        font-size: 12px;
    }

    #iso .iso-hover {  
        bottom: -96px;
        height: 110px;
        z-index: -1;
        justify-content: start;
        padding-left: 25px;
        background: unset;
        border-bottom-left-radius: 15px;
        border-bottom-right-radius: 15px;
        background-color: var(--main-red);
    }

    #iso a {
        display: block;
        margin-bottom: 133px;
        z-index: 2;
    }

    #oil-specification {
        text-align: center;
    }

    #oil-specification {
        text-align: center;
        padding-top: 50px;
        padding-bottom: 65px;
    }

    #oil-spec .question .title,
    #oil-spec .question .position {
        font-size: 14px;
        line-height: 18px;
    }
    
    #oil-spec .question .position {
        text-align: right;
        padding-right: 25px;
        padding-left: 55px;
    }

    #oil-spec .question {
        padding: 28px 0 20px;
    }

    .accordion__item > .accordion-header:after {    
        width: 40px !important;
        height: 40px !important;
        background-size: 11px !important;
    }


    #oil-spec .answer p {
        font-size: 14px;
        line-height: 18px;
    }

    #oil-spec .answer .accordion-body__contents .acc-image {
        margin-bottom: 30px;
    }

    #oil-spec .answer {
        padding-right: 0;
    }

    #profile-of-genco .section-title {
        text-align: center !important;
    }

    #company-info-list li {
        padding: 19px 0;
    }

    /* ==================== ABOUT US ==================== */ 
    
    /* ==================== MENU ==================== */ 
    #header-menu-mobile #logo-mobile img {  
        width: 110px !important;
    }

    #header-menu-mobile #nav-open img   {  
        width: 40px !important;
    }

    menu .inner .left ul li a {
        font-size: 26px;
        padding: 8px 0;
        margin-bottom: 16px;
    }

    menu .inner .navigation-menu a {
        font-size: 14px !important;
        padding-top: 30px !important;
    }

    /* ==================== MENU ==================== */
    
    .mob-mauto {
        margin: 0 auto;
    }

    .mob-w100 {width: 100%;}
    
    .mob-dnone {display: none !important;}

    .mob-ft-48 {
        font-size: 48px !important;
        line-height: 50px !important;
    }

    .mob-fs-26 {
        font-size: 26px !important;
        line-height: 32px;
    }

    .mob-ft-26 {
        font-size: 26px !important;
        line-height: 34px;
    }

    .mob-fd-14 {
        font-size: 14px !important;
        line-height: 18px !important;
    }

    .mob-pt-30 {padding-top: 30px !important;}
    .mob-pt-50 {padding-top: 50px !important;}
    .mob-pt-60 {padding-top: 60px !important;}
    .mob-pt-70 {padding-top: 70px !important;}
    .mob-pt-80 {padding-top: 80px !important;}
    .mob-pt-120 {padding-top: 120px !important;}

    .mob-mb-25 {margin-bottom: 25px !important;}
    .mob-mb-30 {margin-bottom: 30px !important;}
    .mob-mb-35 {margin-bottom: 35px !important;}
    .mob-mb-45 {margin-bottom: 45px !important;}
    .mob-mb-50 {margin-bottom: 50px !important;}
    .mob-mb-75 {margin-bottom: 75px !important;}
 
    .mob-content-p30 {padding: 30px 0;}
  
    .mob-pb-25 {padding-bottom: 25px !important;}
    .mob-pb-30 {padding-bottom: 30px !important;}
    .mob-pb-35 {padding-bottom: 35px !important;}
    .mob-pb-45 {padding-bottom: 45px !important;}
    .mob-pb-50 {padding-bottom: 50px !important;}
    .mob-pb-60 {padding-bottom: 60px !important;}
    .mob-pb-70 {padding-bottom: 70px !important;}

        
    .mobile-only-600 {
        display: block;
    }

    section#news.news-list.news-other-detail {
        padding: 45px 0 60px !important;
    }

}

@media screen and (max-width:460px) { 
    /* ==================== NEWS ==================== */ 
    #news-list .title h5 > *, #news-list .hov-title h5 > * {
        font-size: 14px;
        line-height: 18px;
    }
    
    #instagram .bg-ig {
        height: 130px !important;
    }
    
    #pagination ul li a.btn-page, #pagination ul li a{
        font-size: 12px;
    } 

    #pagination ul li a.btn-page {
        padding: 9px 17px 8px;
    }
    .news-list #news-list .bg-news {
        width: 100px;
        height: 100px;
    }

    .news-list #news-list .body {
        height: 100px !important;
    }
    /* ==================== NEWS ==================== */ 

    /* ==================== HOME ==================== */ 
    #banner.home .inner { 
        margin-top: 120px;
    }

    #banner .bg-banner-home .bg-inner {
        height: 235px !important;
    }

    #banner .bg-home {
        height: 848px !important;
    }

    #banner .bg-banner-home .bg-inner h2 {
        margin-top: 25px;
    }

    #energy-list .item-bg {
        height: 440px;
        width: 300px;
    }

    #energy-list .top .short-desc {
        font-size: 14px;
        line-height: 18px;
    }
    
    #energy-list .body .text {
        margin-top: 6px;
    }

    #energy-list .bottom .det-text {
        margin-top: 1px;
    }

    #energy-list .body .text, #energy-list .bottom .det-text {
        font-size: 22px;
        line-height: 29px; 
    }

    #energy-list .bottom .det-number, #energy-list .body .number {
        font-size: 14px;
    }

    #intro {
        padding: 40px 0 70px;
    }

    #our-business .content-inner {
        font-size: 22px;
        line-height: 29px;
    }

    section#our-business {
        padding: 60px 0 200px;
    }

    #our-business .content-inner {
        margin-top: 40px;
        margin-bottom: 50px;
    }

    #news .section-inside-wrapper {
        background: unset !important;
    }
    
    #news .section-inside-wrapper .news-mid {
        padding-left: 0 !important;
    }

    #news .section-inside-wrapper h2 {
        color: var(--black) !important;
    }

    /* ==================== HOME ==================== */ 
}

@media screen and (max-width:375px) { 
    /* ==================== NEWS ==================== */ 
    #instagram .bg-ig {
        height: 110px !important;
    }
    /* ==================== NEWS ==================== */ 
    
    /* ==================== ABOUT US  ==================== */ 
    #banner-about .section-content-bottom {
        margin-top: 450px;
    }

    #card-list-about .item-bg {
        width: 228px;
        height: 300px;
    }
    /* ==================== ABOUT US  ==================== */ 
    
    /* ==================== THE BUSINESS  ==================== */ 
    #the-business .section-content-bottom {
        margin-top: 480px;
    }
    /* ==================== THE BUSINESS  ==================== */ 

    /* ==================== HOME  ==================== */ 
    #energy-list .item-bg {
        height: 400px;
        width: 250px;
    }

    #energy-list .bottom .det-text, #energy-list .body .text {
        width: 100%;
    }

    #energy-list .item-bg .item-hover {
        padding: 22px 19px;
    }
    /* ==================== HOME  ==================== */ 
}

@media screen and (max-width:360px) { 
    /* ==================== NEWS ==================== */ 
    #pagination ul {
        flex-wrap: wrap;
    }
    /* ==================== NEWS ==================== */ 
}
@media screen and (max-width:340px) {
    /* ==================== NEWS ==================== */ 
    #banner-news-detail .banner-wrapper h1 {
        font-size: 22px;
        line-height: 30px;
    }
    /* ==================== NEWS ==================== */ 

    /* ==================== THE BUSINESS ==================== */ 
    #the-business .section-content-bottom {
        margin-top: 420px;
    }
    /* ==================== THE BUSINESS ==================== */ 

    /* ==================== ABOUT US ==================== */ 
    #banner-about .section-content-bottom {
        margin-top: 380px;
    }
    /* ==================== ABOUT US ==================== */ 
}

@media screen and (max-width:320px) {
    .mob-sm-ft-21 {font-size: 21px !important;}
    /* ==================== NEWS ==================== */ 

    #instagram .bg-ig {
        height: 100px !important;
    }

    #news-list .title h5 > *, #news-list .hov-title h5 > * {
        font-size: 12px;
        line-height: 16px;
    }
    /* ==================== NEWS ==================== */ 
}