:root {
    --white : #ffffff;
    --black : #000000;
    --main-red : #D22016;
    --old-red : #550C00;
    --main-green : #00A14D;
    --grey-1 : #808080; 
    --grey-2 : #CCCCCC; 
    --grey-3 : #F5F5F5; 
}
body {
    font-family: 'sora-r';
}

/* --------------- MAIN COPM ---------------- */

.container {
    width: 91%;
    margin: 0 auto;
    max-width: 1920px;
}

.mt20 {margin-top: 20px;}
.mt25 {margin-top: 25px;}
.mt30 {margin-top: 30px;}
.mt35 {margin-top: 35px;}
.mt40 {margin-top: 40px;}
.mt45 {margin-top: 45px;}
.mt50 {margin-top: 50px;}
.mt55 {margin-top: 55px;}
.mt60 {margin-top: 60px;}
.mt65 {margin-top: 65px;}
.mt70 {margin-top: 70px;}
.mt75 {margin-top: 75px;}
.mt80 {margin-top: 80px;}
.mt85 {margin-top: 85px;}
.mt90 {margin-top: 90px;}
.mt95 {margin-top: 95px;}
.mt100 {margin-top: 100px;}

.mb60 {margin-bottom: 60px;}
.mb80 {margin-bottom: 80px;}
.mb100 {margin-bottom: 100px;}
.mb120 {margin-bottom: 120px;}

.pt80 {padding-top: 80px;}
.pt100 {padding-top: 100px;}
.pt120 {padding-top: 120px;}
.pt130 {padding-top: 130px;}
.pt140 {padding-top: 140px;}
.pt150 {padding-top: 150px;}
.pt190 {padding-top: 190px;}

.pb40 {padding-bottom: 70px;}
.pb60 {padding-bottom: 60px;}
.pb70 {padding-bottom: 70px;}
.pb80 {padding-bottom: 80px;}
.pb90 {padding-bottom: 90px;}
.pb100 {padding-bottom: 100px;}
.pb120 {padding-bottom: 120px;}
.pb150 {padding-bottom: 150px;}
.pb200 {padding-bottom: 200px;}
.pb250 {padding-bottom: 250px;}

.f-sora-l {font-family: 'sora-l' !important; font-weight: normal;}
.f-sora-r {font-family: 'sora-r' !important; font-weight: normal;}
.f-sora-b {font-family: 'sora-b' !important; font-weight: normal;}

.f-switzer-l {font-family: 'switzer-l' !important; font-weight: normal; }
.f-switzer-r {font-family: 'switzer-r' !important; font-weight: normal; }
.f-switzer-b {font-family: 'switzer-b' !important; font-weight: normal; }

.text-left {text-align: left;}
.text-center {text-align: center;}
.text-right {text-align: left;}
.text-justify {text-align: left;}

.c-white {color: var(--white) !important;}

.title-32 {
    font-size: 32px;
    line-height: 42px;
}

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

.title-96 {
    font-size: 96px;
    line-height: 106px; 
}

.desc-16 {
    font-size: 16px;
    line-height: 21px;
}

.desc-32 {
    font-size: 32px;
    line-height: 42px;
}

.btn-hover-opacity:hover {
    opacity: .5;
    transition: .3s ease all;
}
 
.btn-circle {
    text-decoration: none;
    padding: 12px 29px;
    display: block;
    width: max-content;
    border-radius: 27px;
    font-size: 18px;
    font-family: 'switzer-r';
}

.btn-circle.white {
    border: 1px solid var(--white);
    color: var(--white); 
}

.btn-hover-bgred:hover {
    color: var(--white) !important;
    background: var(--main-red) !important;
    transition: .3s ease all;
    border: 1px solid var(--main-red) !important; 
}

.btn-hover-bgwhite:hover {
    color: var(--black) !important;
    background: var(--white) !important;
    transition: .3s ease all;
    border: 1px solid var(--main-red) !important;
}
 
.btn-hover-bgwhite-brwhite:hover {
    color: var(--black) !important;
    background: var(--white) !important;
    transition: .3s ease all;
    border: 1px solid var(--white) !important;
}
 
.btn-hover-bgred-brred:hover {
    color: var(--white) !important;
    background: var(--main-red) !important;
    transition: .3s ease all;
    border: 1px solid var(--main-red) !important;
}
 
.btn-circle.red {
    background: var(--main-red);
    color: var(--white); 
}

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

/* #instagram .section-content {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
} */

#instagram .bg-ig {
    width: 95%;
    height: 400px;
    background-position: center !important;
    background-size: cover !important;
    margin: 0 auto;
}

.br-mobile-only,
.mobile-only-600,
.mobile-only-768,
.mobile-only-991,
.tab-only-1024 {
    display: none;
}
 



/* --------------- MAIN COPM ---------------- */

/* --------------- MENU ---------------- */

menu {
    padding: 0;
    border-bottom: 1px solid var(--white); 
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    z-index: 99;
    transition: .5s ease all;
}

menu.scroll-top { 
    top: -100% !important;
}

menu.scroll-bottom { 
    top: 0 !important;
}


/* ON SCROLL MENU */


menu.scroll,
#navbar-mobile.scroll  {
    background: var(--white);  
    border-bottom: 1px solid var(--black);
}

menu.scroll .inner .left ul li a,
#navbar-mobile.scroll .inner .left ul li a {
    color: var(--black);
}

menu.scroll .inner .left ul li a.active,
#navbar-mobile.scroll .inner .left ul li a.active{
    color: var(--main-red);
    border-bottom: 4px solid var(--black);
}

menu.scroll #full-price .progress-bar,
#navbar-mobile.scroll #full-price .progress-bar {
    background: var(--black);
    color: var(--white);
}

menu.scroll .inner .left ul li a::after,
#navbar-mobile.scroll .inner .left ul li a::after { 
    background: var(--black);
}

logo-red {
    display: none;
}

/* ON SCROLL MENU */

menu .inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

menu .inner .left {
    display: flex; 
    align-items: center;
}

menu .inner .left img {
    width: 110px;
}

menu .inner .left ul {
    display: flex; 
    align-items: center;
    list-style-type: none;
    gap: 53px;
    padding-left: 96px;
}

menu .inner .left ul li a{
    color: var(--white);
    text-decoration: none;
    font-size: 16px;
    display: block;
    padding: 38px 0;
    font-family: 'switzer-r';
    position: relative;
}

menu .inner .left ul li a::after {
    content: '';
    width: 100%;
    height: 4px;
    background: var(--white);
    position: absolute;
    bottom: -2px;
    left: 0;
    opacity: 0;
}

menu .inner .left ul li a.active {
    font-family: 'switzer-sb';
    border-bottom: 4px solid var(--white);
}

menu .inner .left ul li a:hover::after {
    opacity: 1;
    transition: .3s ease all;
    /* border-bottom: 4px solid var(--main-red); */
}

menu #full-price .progress-bar {
    display: flex;
    background: var(--white);
    font-size: 16px;
    padding: 14px 25px;
    border-radius: 34px;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    align-items: center;
} 

menu #full-price .progress-recent {
    padding-right: 25px; 
    font-size: 16px;
}

menu #full-price .progress-recent,
menu #full-price .progress-value
{
    z-index: 99;
    font-family: 'switzer-r';
}

menu #full-price .progress-bar-value.green {
    background: url('../../img/static/bg-green.svg') no-repeat;
    position: absolute;
    width: 192px;
    height: 100%;
    top: 0;
    top: 0px;
    right: -19px;
    background-size: contain;
}


menu #full-price .progress-value span {
    color: var(--white);
    font-family: 'switzer-sb';
    font-size: 20px;
}

menu #full-price .progress-value {
    font-size: 20px; 
    color: var(--white);
}

footer {
    background: var(--main-red);
}

footer .address {
    font-family: 'switzer-r';
}

footer .contact a {
    font-family: 'switzer-r';
    text-decoration: none;
}

footer .inner {
    padding-top: 55px;
    padding-bottom: 40px;
    display: flex;
    flex-wrap: wrap;
    color: var(--white);
}

footer .inner a {
    color: var(--white);
}

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

footer .inner .right {
    width: 45%;
}

footer .inner .bottom {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 100px;
}

footer .sosmed ul {
    display: flex;
    list-style-type: none;
    gap: 16px;
}

footer .link ul {
    list-style-type: none;
}

footer .link ul a {
    list-style-type: none;
    font-family: 'switzer-r';
    font-size: 20px;
    text-decoration: none;
    display: block;
    margin-bottom: 12px;
    font-weight: normal;
}

footer a:hover {
    opacity: .5;
    transition: .3s ease all;
}

menu#navbar-mobile {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    z-index: 99;
    background: none;
    border-bottom: unset !important;
    padding: 30px 0;
}

menu#navbar-mobile .logo img {
    width: 210px;
}

menu#navbar-mobile .nav-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

menu#navbar-mobile .nav-button .back-btn {
    width: 54px;
}

menu#navbar-mobile .nav-button .hamburger-button img {
    width: 40px;
}

menu#navbar-mobile .nav-button .hamburger-button .ham-wrap-white,
menu#navbar-mobile .nav-button .back-btn-wrapper {
    background: rgba(255, 255, 255, 0.3); 
    width: 60px;
    height: 60px;
    display: grid;
    align-items: center;
    justify-content: center;
    border-radius: 60px;
}


menu#navbar-mobile .nav-button .hamburger-button .ham-wrap-black {
    background: var(--white); 
    width: 60px;
    height: 60px;
    display: grid;
    align-items: center;
    justify-content: center;
    border-radius: 60px;
}

menu#navbar-mobile .nav-button .hamburger-button .ham-wrap-white.grey {
    background: var(--grey-2) !important;
}

/* --------------- MENU ---------------- */

/* --------------- HOME ---------------- */

#banner.home {
    position: relative;
    padding-bottom: 510px;
    
}

#banner .bg-home {
    width: 100%;
    position: relative;
    height: 920px;
    background-position: center !important;
    background-size: cover !important;
}


#banner .bg-banner-home {
    position: absolute; 
    left: 0;
    right: 0; 
    bottom: 20px;
}

#banner .bg-banner-home .bg-inner { 
    background: url('../../img/static/home/bg-banner-home.svg') no-repeat;
    background-size: cover;
    background-position: top;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 600px;
}
  

#banner .bg-banner-home .bg-inner h2 {
    color: var(--white);
    font-size: 48px;
    text-align: center;
    font-family: 'sora-r' !important;
    font-weight: normal;
}

#banner.home .banner-wrapper {
    position: relative;
}

#banner.home .inner {
    margin-top: 170px;
    position: absolute;
    z-index: 50;
    width: 100%; 
}

#banner.home img {
    width: 100%;
}

#banner.home h1 {
    font-size: 120px;
    line-height: 130px;
    color: var(--white); 
    font-weight: normal;
}

#energy-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 21px;
}

#energy-list .item-bg {
    width: 100%;
    height: 750px;
    background-position: center !important;
    background-size: cover !important;
    border-radius: 15px;
    position: relative;
    overflow: hidden;
}

#energy-list .item-bg .item-hover {
    position: absolute;
    background: var(--main-red);
    z-index: 50;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    opacity: 0;
    display: grid;
    height: 100%;
    padding: 27px 24px;
    color: var(--white);
}

#energy-list .item-bg .item-hover .bottom {
    align-items: end;
    display: flex;
}

#energy-list .item-bg:hover .item-hover {
    opacity: 1;
    transition: .3s ease all;
}

#energy-list .body {
    color: var(--white);
    font-family: 'sora-r'; 
}

#energy-list .body .number {
    font-size: 24px; 
    font-family: 'switzer-r';
}

#energy-list .body .text {
    font-size: 32px;
    min-height: 80px;
    width: 65%;
    display: flex;
    align-items: end;
    line-height: 37px;
    margin-top: 17px;
}

#energy-list .body {
    display: grid;
    align-items: end;
    height: 100%;
    padding: 27px 24px;
}

#energy-list .top .short-desc {
    font-size: 20px;
    line-height: 26px;
    width: 55%;
    font-family: 'switzer-r';
}

#energy-list .bottom .detail {
    width: 100%;
}

#energy-list .bottom .det-number {
    font-size: 24px;
    line-height: 31px;
    font-family: 'switzer-r';
}

#energy-list .bottom .det-text {
    font-size: 32px;
    line-height: 37px;  
    min-height: 80px;
    display: flex;
    align-items: end;
    margin-top: 19px;
    width: 65%; 
}

section#our-business {
    background: url('../../img/static/home/our-business.jpg') no-repeat;
    background-size: cover !important;
    background-position: center !important;
}

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

section#news {
    padding: 150px 0;
    background: var(--grey-3);
}

#news .section-inside-wrapper {
    background: var(--old-red);
    width: 90%;
    margin: 0 auto;
    border-radius: 15px;
    overflow-x: hidden;
}

#news .section-inside-wrapper .news-top {
    padding: 46px 60px 0px 66px;
}

#news .section-inside-wrapper .news-mid {
    padding: 0px 0px 0px 66px;
}

#news .section-inside-wrapper .news-bottom {
    padding: 0px 60px 46px 66px;
}

#news .section-cta {
    display: flex;
    justify-content: end;
    margin-top: 60px;
    margin-bottom: 20px;
}

#news-list {
    /* display: grid;
    grid-template-columns: repeat(4, 1fr); */
}

#news-list .box {
    position: relative; 
    width: 95% !important;
    margin: 0 auto;
}

#news-list .bg-news {
    background-position: center !important;
    background-size: cover !important;
    height: 260px;
    width: 100%;
    border-radius: 15px 15px 0px 0px;
}

#news-list .body {
    background: var(--white);
    border-radius: 0px 0px 15px 15px;
    padding: 15px 31px 20px;
    max-height: 135px;
    min-height: 135px;
}

#news-list .post-date {
    font-size: 14px;
    color: var(--grey-1);
    font-family: 'switzer-r';
}

#news-list .news-hover { 
    position: absolute;
    bottom: -2px; 
    background: var(--main-red);
    border-radius: 0px 0px 15px 15px;
    opacity: 0;
    z-index: -1;
}

#news-list .box:hover .news-hover {
    opacity: 1;
    transition: .3s ease all;
    z-index: 50;
}

#news-list .link-read-more,
.news-list .link-read-more {
    text-decoration: none;
}
#news-list .link-read-more .title,
.news-list .link-read-more .title {
    color: var(--black) !important;
}


#news-list .news-hover .top-bg { 
    width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: -42px;
    z-index: -1;
}

#news-list .news-hover .top-bg img {
    width: 100%;
}

#news-list .title h5 > * ,
#news-list .hov-title h5 > * {
    font-size: 22px;
    line-height: 30px;
    font-family: 'sora-r';
    margin-bottom: 16px;
    font-weight: normal; 
}

#news-list .hov-title {
    color: var(--white);
}

#news-list .hov-desc, 
#news-list .hov-post-date {
    color: var(--white);
    font-size: 14px;
}

#news-list .hov-desc {
    margin-bottom: 15px;
}

#news-list .hov-post-date {
    margin-bottom: 21px;
}

#news-list .news-hover .news-hover-wrapper {
    padding: 6px 31px 30px;
} 

#news-list .news-hover .link {
    text-decoration: none;
}


#news-list .slider-arrow {
    border: 1px solid var(--white);
    padding: 8px;
    border-radius: 50%;
    cursor: pointer;
    position: absolute;
    top: -120px;
}

#news-list .slider-arrow.arrow-l { 
    right: 140px;
}

#news-list .slider-arrow.arrow-r {
    right: 66px;
}

#news-list .slider-arrow:hover {
    background: var(--main-red);
    border: 1px solid var(--main-red);
    transition: .3s ease all;
}

/* --------------- HOME ---------------- */

/* --------------- ABOUT ---------------- */

#banner-about {
    background: url('../../img/static/about/about-pattern.svg') no-repeat;
    background-size: 2900px;
    background-position-y: 352px;
    background-position-x: -240px;
    position: relative;
}

#banner-about img {
    width: 100%;
    margin-top: 350px;
    border-radius: 15px;
}

#banner-about .section-content {
    position: absolute;
    z-index: 50;
    left: 0;
    right: 0;

}

#banner-about .section-content-bottom {
    /* position: relative; */
    /* top: -360px; */
    z-index: 40;
    color: var(--white);
    margin-top: 1120px;
}

#banner-about .bg-bottom {
    background: url('../../img/static/bg-top-news-hover.svg') no-repeat;
    background-position: top;
    background-size: cover;
    height: 400px;
    width: 100%;
}

#banner-about .content-text {
    background: var(--main-red);     
    padding-bottom: 300px;
}


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

#banner-about .section-content-bottom .left {
    font-family: 'switzer-r';
    font-size: 32px;
    line-height: 42px;
    width: 75%;
    letter-spacing: 1px;
}

#banner-about .section-content-bottom .right {
    font-family: 'switzer-r';
    font-size: 48px;
    line-height: 60px;
    width: 71%;
}


#card-list-about {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 21px;
}

#card-list-about .item-bg {
    width: 100%;
    height: 650px;
    background-position: center !important;
    background-size: cover !important;
    border-radius: 15px;
    position: relative;
    overflow: hidden;
}

#card-list-about .item-bg .item-hover {
    position: absolute;
    background: var(--main-red);
    z-index: 50;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    opacity: 0;
    display: grid;
    height: 100%;
    padding: 27px 24px;
    color: var(--white);
}

#card-list-about .item-bg .item-hover .bottom {
    align-items: end;
    display: flex;
}

#card-list-about .item-bg:hover .item-hover {
    opacity: 1;
    transition: .3s ease all;
}

#card-list-about .body {
    color: var(--white);
    font-family: 'sora-r'; 
}

#card-list-about .body .number {
    font-size: 24px; 
    font-family: 'switzer-r';
}

#card-list-about .body .text {
    font-size: 32px;
    min-height: 80px;
    width: 65%;
    display: flex;
    align-items: end;
    line-height: 37px;
    margin-top: 17px;
}

#card-list-about .body {
    display: grid;
    align-items: end;
    height: 100%;
    padding: 27px 24px;
}

#card-list-about .top .short-desc {
    font-size: 20px;
    line-height: 26px;
    width: 65%;
    font-family: 'switzer-r';
}

#card-list-about .bottom .detail {
    width: 100%;
}

#card-list-about .bottom .det-number {
    font-size: 24px;
    line-height: 31px;
    font-family: 'switzer-r';
}

#card-list-about .bottom .det-text {
    font-size: 32px;
    line-height: 37px;  
    min-height: 80px;
    display: flex;
    align-items: end;
    margin-top: 19px;
    width: 65%;
}

#vision-mission {
    padding: 130px 0 150px;
}

#vision-mission .content-wrapper {
    display: flex;
}

#vision-mission .section-title {
    width: 35%;
}

#vision-mission .section-content {
    width: 70%;
}

#company-information {
    background: var(--grey-1);
    color: var(--white);
    padding: 120px 0 150px;
}

#company-info-list ul {
    list-style-type: none;
    padding-left: 0;
    column-count: 2;
    column-gap: 25px;
}

#company-info-list li {
   border-top: 1px solid var(--grey-2);
   padding: 30px 0;
   cursor: pointer;
   position: relative;
}

#company-info-list li::before {
    content: ''; 
    border-top: 4px solid var(--white); 
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    opacity: 0;
}

#company-info-list li:hover::before {
    opacity: 1;
    transition: .3s ease all;
}

#company-info-list .title {
    font-size: 32px;
    line-height: 40px;
    font-family: 'sora-l';
    margin-bottom: 17px;
}

#company-info-list .detail {
    font-size: 20px;
    line-height: 26px;
    font-family: 'switzer-r';
    color: var(--grey-2);
}

#company-info-list .border-bottom {
    border-bottom: 1px solid var(--grey-2); 
}

#legality-wrapper {
    background: var(--grey-3);
}

#legality {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   column-gap: 25px;
   border-bottom: 1px solid var(--grey-2);
   padding: 100px 0 100px;
}

#legality .item {
    border-top: 1px solid var(--black);
}

#legality .question {
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    padding: 28px 0;
}

#legality .answer {
    display: none;
    background: #fff;
    border-radius: 15px;
    padding: 35px 20px; 
    margin-bottom: 24px;
}

#legality .answer.open {
    display: block;
}

#legality .answer img {
    margin: 0 auto;
}

#legality .question .title {
    font-size: 32px;
    line-height: 40px;
    font-family: 'sora-r';
}

#legality .dd-close-legal {
    background: var(--main-red);
    padding: 12px;
    border-radius: 50%;
}

#legality .dd-open-legal {
    border: 1px solid var(--black);
    padding: 12px;
    border-radius: 50%;
    display: none;
}

#legality .answer p {
    font-size: 16px;
    font-family: 'switzer-r';
}

#iso {
    background: var(--grey-3);
}

#iso #iso-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

#iso a{
    text-decoration: none;
    position: relative;
} 

#iso .iso-hover { 
    background: url('../../img/static/bg-top-news-hover.svg') no-repeat;
    background-position: top;
    background-size: cover;
    height: 150px;
    width: 100%;
    display: grid;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: absolute;
    bottom: 0;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    opacity: 0;
}

#iso a:hover .iso-hover {
    opacity: 1;
    transition: .3s ease all;
}

#iso .iso-hover .title { 
    font-size: 32px;
    color: var(--white);
}

#iso .iso-hover .desc { 
    font-size: 20px;
    font-family: 'switzer-r';
    color: var(--white);
}

#oil-specification {
    color: var(--white);
    background: var(--main-red);
}

.custom-table-white {
    border-collapse: collapse;
    width: 100%;
}
.custom-table-white th, td {
    border-left: none;
    border-right: none;
    border-top: 2px solid var(--white);
    border-bottom: 2px solid var(--white);
    padding: 10px;
    text-align: left;
}

.custom-table-white th {
    background: var(--white);
    color: var(--black);
    border-top: none;
    border-bottom: none;
}

.custom-table-white th:first-child {
    border-top-left-radius: 15px;
}
.custom-table-white th:last-child {
    border-top-right-radius: 15px;
}


#oil-spec-wrapper {
    background: var(--grey-3);
}

#oil-spec { 
   /* border-bottom: 1px solid var(--grey-2);  */
}

#oil-spec .item {
    border-top: 1px solid var(--black);
}

#oil-spec .question {
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    padding: 28px 0;
}

#oil-spec .answer {
    display: none; 
    border-radius: 15px;
    padding: 0px 20px 35px 0px;  
    margin-bottom: 24px;
    margin-top: 0;
}

#oil-spec .answer.open {
    display: block;
}

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

#oil-spec .question .title {
    font-size: 32px;
    line-height: 40px;
    font-family: 'sora-r'; 
    width: 50%;
}

#oil-spec .question .position {
    font-size: 32px;
    line-height: 40px;
    font-family: 'sora-r';
    color: var(--grey-1); 
    width: 50%;
    padding-left: 12px;
}


#oil-spec .answer p {
    font-size: 16px;
    font-family: 'switzer-r';
}

#oil-spec .answer .accordion-body__contents {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* gap: 107px; */
}

#profile-of-genco .question:hover .title {
    color: var(--main-red) !important;
    transition: .3s ease all;
}

#profile-of-genco .question:hover .position {
    color: var(--black) !important;
    transition: .3s ease all;
}

/* Optional: If you want no border on the first and last rows */
/* .custom-table-white tr:first-child th, tr:first-child td {
    border-top: none;
}
.custom-table-white tr:last-child th, tr:last-child td {
    border-bottom: none;
} */

/* --------------- ABOUT ---------------- */

/* --------------- THE BUSINESS ---------------- */

#the-business {
    background: url('../../img/static/the-business/pattern-red.svg') no-repeat;
    background-size: 2900px;
    background-position-y: 352px;
    background-position-x: -240px;
    position: relative;
    background-color: var(--main-red);
}

#the-business .content-img img {
    width: 100%;
    margin-top: 350px;
    border-radius: 15px;
}

#the-business .section-content {
    position: absolute;
    z-index: 50;
    left: 0;
    right: 0;

}

#the-business .section-content-bottom { 
    z-index: 40;
    color: var(--white);
    margin-top: 1120px;
}

#the-business .bg-bottom {
    background: url('../../img/static/bg-top-news-hover-old.svg') no-repeat;
    background-position: top;
    background-size: cover;
    height: 400px;
    width: 100%;
}

#the-business .content-text {
    background: var(--old-red);     
    padding-bottom: 150px;
}


#the-business .section-content-bottom .container { 
    padding-top: 30px;
}

#the-business .section-content-bottom .left {
    font-family: 'switzer-r';
    font-size: 32px;
    line-height: 42px;
    width: 75%;
}

#the-business .section-content-bottom .right {
    font-family: 'switzer-r';
    font-size: 48px;
    line-height: 60px;
    width: 71%;
}

#the-business .bottom-content .logo-list {
    display: grid;
    align-items: center;
    grid-template-columns: repeat(4, 1fr);
    gap: 120px;
}

#the-business .bottom-content .logo-list img {
    width: 100%; 
}

#the-business .bottom-content .detail {
    font-size: 32px;
    line-height: 42px;
    font-family: 'switzer-r';
    
    text-align: center;
    margin: 130px auto 0;
    width: 66%;
    letter-spacing: 1px;
}

#suply-scheme {
    text-align: center;
}

#suply-scheme .main-img {
    width: 100%;
}

#suply-scheme a {
    position: relative;
}

#zoom-in {
    width: 28px;
    position: absolute;
    right: 0;
    bottom: 0;
}

#operation-area .top-img {
    background: var(--grey-2);
}

#operation-area .top-img img {
    width: 100%;
}

#operation-area .body-content {
    background: var(--main-red);
    padding: 60px 0 70px;
}
 
#operation-area .body-content .container {
   display: flex;
   justify-content: space-between;
}

#operation-area #list-area .item {
    display: inline-block;
    margin-right: 17px;
}

#operation-area #list-area .item a {
    border: 1px solid var(--white);
    display: block;
    text-decoration: none;
    color: var(--white);
    padding: 10px 26px;
    font-family: 'switzer-r';
    font-size: 18px;
    border-radius: 27px;
}

#operation-area #list-area .item a.active {
    background: var(--white);
    color: var(--black);
}

#operation-area #list-area .right {
    display: grid;
    align-items: end;
}

#operation-area .body-content .right {
    display: grid;
    align-items: end;
}
 
.area-image {
    display: none;
}

.area-image.active {
    display: block;
}
 
.area-icon {
    display: none;
    width: 105px;
    height: 130px;
    background-position: center !important;
    background-size: contain !important;
}

.area-icon.active {
    display: block;
}
  
#company-list .navigation ul {
    display: grid;
    list-style-type: none;
    padding-left: 0;
    border-bottom: 2px solid var(--black); 
    position: relative;
    grid-template-columns: repeat(3, 1fr);
}


#navigation {
    content: '';
    display: block;
    background-color: var(--black);
    width: 34%;
    height: 10px;
    position: absolute;
    bottom: 0;
    left: 33%;
    transition: .3s ease all;
}

#company-list .navigation ul li {
    /* width: 33%; */
    text-align: center;
}

#company-list .navigation a {
    font-size: 32px; 
    text-decoration: none;
    color: var(--black);
    display: block;
    width: 100%;
    padding-bottom: 20px;
    position: relative;
}

#company-list .navigation a::after {
    content: '';
    width: 100%;
    height: 10px;
    background: var(--black);
    position: absolute;
    bottom: 0px;
    left: 0;
    opacity: 0;
} 

#company-list .navigation a:hover::after {
    opacity: 1;
    transition: .3s ease all;
}

#company-list .navigation a.active {
    color: var(--main-red); 
}

.company-list {
    display: none;
}

.company-list.active {
    display: grid;
    align-items: center;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 80px;   
    row-gap: 80px;
}

.company-list img { 
    margin: 0 auto;
}

/* #the-business .bottom-content .logo-list .bg {
    width: 100%;
    height: 66px;
    background-size: contain !important;
    background-position: center !important;
} */

/* --------------- THE BUSINESS ---------------- */

/* --------------- NEWS ---------------- */

#banner-news {
    background: var(--grey-3);
}

.news-list#news {
    background: var(--grey-3);
}

.news-list #news-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.news-list #news-list .box {
    width: 100% !important;
}

.news-list  #news-list .box:hover .news-hover {
    width: 100%;
}

.news-list #news-list .bg-news {
    height: 380px;
}

.news-list #news-list .news-hover .top-bg { 
    top: -68px;
}

.news-list  #news-list .body {
    height: 130px;
    max-height: 130px;
}

#pagination ul {
    list-style-type: none;
    padding-left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 120px;
    gap: 35px;
}

#pagination ul li a {
    color: var(--black);
    display: block;
    text-decoration: none;
    font-size: 24px;
}

#pagination ul li a.btn-page {
    font-size: 18px;
    padding: 9px 25px 8px;
    border: 1px solid var(--black);
    border-radius: 42px;    
}

#pagination ul li a.active {
    background: var(--main-red);
    color: var(--white);
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

section#news.news-list {
    padding: 250px 0 120px;
}

#search-box input {
    border: 1px solid;
    width: 100%;
    background-color: transparent;
    height: 50px;
    font-size: 18px;
    border-radius: 33px;
    padding-left: 64px;
    background: url('../../img/static/search.svg') no-repeat;
    background-position-x: 25px;
    background-position-y: center;
    margin-bottom: 33px;
}

#search-box input::placeholder {
    color: var(--black);
}

/* #news-list .link {
    text-decoration: none;
} */

/* --------------- NEWS ---------------- */


/* --------------- NEWS DETAIL ---------------- */

#banner-news-detail .bg-detail {
    width: 100%;
    position: relative;
    height: 920px;
    background-position: center !important;
    background-size: cover !important;
}

#banner-news-detail .banner-wrapper .inner {
    position: absolute;
    z-index: 50;
    left: 0;
    right: 0;
    top: 250px;
}

#banner-news-detail .banner-wrapper .date {
    font-size: 22px;
    color: var(--white);
    font-family: 'switzer-l';
    margin-bottom: 25px;
    letter-spacing: 1px;
}


#banner-news-detail .banner-wrapper h1 {
    color: var(--white);
    font-size: 64px;
    line-height: 80px;
    font-weight: normal;
}


#news-detail .news-content .text {
    font-size: 20px;
    line-height: 26px;
    font-family: 'switzer-r';
    margin: 0 auto;
    width: 32%;
}

#news-detail .news-content .red-text {
    font-size: 32px;
    line-height: 40px;
    font-family: 'sora-r';
    margin: 0 auto;
    width: 45%;
    color: var(--main-red);
    text-align: center;
}
 
#news-detail .news-content .image { 
    margin: 0 auto;
    width: 100%;
}

#news-detail .news-content .image {  
    width: 100%;
}

#news-detail .news-content .item img {  
    width: 97%;
    height: auto;
    margin: 0 auto;
}

#news-detail .writter h6 {  
    font-size: 20px;
    line-height: 26px;
    font-family: 'switzer-r';
    margin: 0 auto;
    width: 32%;
    font-weight: normal;
    font-style: italic;
    margin-bottom: 150px;
}

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

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

#news-detail .news-padding-end {
    padding-bottom: 80px;
}


#news-detail .slider-image .slider-arrow {
    border: 1px solid var(--black);
    padding: 8px;
    border-radius: 50%;
    cursor: pointer;
    position: absolute;
    bottom: -11px;
    z-index: 50;
}

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

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

#news-detail .slider-image .slider-arrow:hover {
    background: var(--main-red);
    border: 1px solid var(--main-red);
    transition: .3s ease all;
}


#news-detail .slider-image .slider-arrow.white {
   opacity: 0;
}

#news-detail .slider-image .arrow-wrapper:hover .slider-arrow.white  {
   opacity: 1;
   transition: .3s ease all;
}

#news-detail .slider-image .arrow-wrapper:hover .slider-arrow.black  {
   opacity: 0;
}

#news-detail .slider-image .slider-text {
    padding-left: 11px;
    padding-top: 35px;
    font-size: 20px;
    font-family: 'switzer-r';
    color: var(--grey-2);
    opacity: 0;
}

#news-detail .slider-image .slick-center .slider-text {
    transition: .3s ease all;
    opacity: 1;
}

/* --------------- NEWS DETAIL ---------------- */


/* --------------- CONTACT US ---------------- */

#contact-us {
    background: url('../../img/static/the-business/pattern-red.svg') no-repeat;
    background-size: 2900px;
    background-position-y: 352px;
    background-position-x: -240px;
    position: relative;
    background-color: var(--main-red);
}

#contact-us .content-img iframe {
    margin-top: 350px;
    border-radius: 15px;
}

#contact-us .section-content {
    position: absolute;
    z-index: 50;
    left: 0;
    right: 0;

}

#contact-us .section-content-bottom { 
    z-index: 40;
    margin-top: 1120px;
}

#contact-us .bg-bottom {
    background: url('../../img/static/bg-top-news-hover-white.svg') no-repeat;
    background-position: top;
    background-size: cover;
    height: 400px;
    width: 100%;
}

#contact-us .content-text {
    background: var(--white);     
    padding-bottom: 150px;
}


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

#contact-us .section-content-bottom .left {
    font-family: 'switzer-r';
    font-size: 32px;
    line-height: 42px;
    width: 50%;
}

#contact-us .section-content-bottom .container {
    display: flex;
}

#contact-us .section-content-bottom .right *  {
    font-family: 'switzer-r';
    font-size: 32px;
    line-height: 42px; 
    color: var(--grey-1);
}

#contact-us .section-content-bottom .right a {
    text-decoration: none;
}
 

#contact-us .bottom-content .detail {
    font-size: 32px;
    line-height: 42px;
    font-family: 'switzer-r';
    
    text-align: center;
    margin: 130px auto 0;
    width: 61%;
    letter-spacing: 1px;
}


/* --------------- CONTACT US ---------------- */

/* --------------- CUSTOM STYLING ---------------- */

/* --------------- FANCYBOX ---------------- */
.fancybox-container {
    backdrop-filter: blur(10px) !important; 
}

.fancybox-is-open .fancybox-bg {
    background: rgba(0, 0, 0, .5) !important;
}