:root, :before, :after{
  --bg-2:#FFFFFF;  
  --bg-3:#EEE;  
  --bg-4:#024D9E;  
  --color-border-dark:0 0 0;
  --color-border-light:255 255 255;
  --color-default-1:#757575; 
  --color-default-2:#000000;
  --color-default-3:#1E1E4C;
  --color-default-4:#00C13E; 
  --color-fb:#1877f2;
  --color-tw:#00acec;
  --color-wa:#2bb240;
  --color-tg:#0088cc;
  --rounded-1:var(--size-1);
  --rounded-2:var(--size-2);
  --rounded-3:var(--size-4);
  --hover-opacity:0.34;
  --transition-default:all 0.34s;
  --shadow-default:0 2px 10px rgb(0 0 0 / 25%);
  --shadow-neumorp:-2px -2px 4px rgba(255,255,255,.2), 2px 2px 12px rgba(0,0,0,.2);
  --shadow-inset:inset -2px -2px 4px rgba(255,255,255,.2), inset 2px 2px 12px rgba(0,0,0,.2);
}



body, html{color:var(--color-default-1);}
html{background-color:#2F2F2F;}
body.freeze-scroll{overflow:hidden;}
a, .btn, button{transition:var(--transition-default); cursor:pointer}
a, button{color:var(--color-default-2); fill:var(--color-default-2);}
a:hover, button:hover{color:var(--color-default-4); fill:var(--color-default-4);}
.btn, a.btn, button.btn{background-color:var(--color-default-3); color:var(--bg-1); fill:var(--bg-1);}
.btn:hover, a.btn:hover, button.btn:hover{background-color:var(--color-default-4);}
#btt{position:fixed; bottom:calc(var(--size-6) + var(--size-4)); right:0; cursor:pointer;
z-index:calc(var(--max-zindex) - 4000); width:40px; height:40px; background-color:var(--color-default-3); fill:var(--bg-2);
border-top-left-radius:var(--rounded-2); border-bottom-left-radius:var(--rounded-2);}
#btt:hover, #btt:focus{background-color:var(--color-default-4);}
.flex_ori > img{opacity:0; transition:all 300ms;}
.flex_ori > img.lazyloaded{opacity:1;}
.thumb-loading:before{animation:skeleton-loading 0.5s linear infinite alternate; background-color:var(--color-default-1);}
@-webkit-keyframes skeleton-loading{0%{opacity:0.05;}100%{opacity:0.15;};}
@keyframes skeleton-loading{0%{opacity:0.05;}100%{opacity:0.15;};}



.button-more-link{border-color:var(--color-default-7); background-color: var(--color-default-7); color:var(--color-default-3); fill:var(--color-default-3); border-radius:var(--rounded-3);}
.button-more-link:hover{background-color:var(--color-default-4); border-color:var(--color-default-4) !important; 
color:var(--bg-1) !important; fill:var(--bg-1) !important;}

header, menu{transition:var(--transition-default);}
header .width-max, .header-left:after, .header-logo{background:0;}
.header-sticky { background-color: var(--bg-2); box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px; }
.header-link, .menu-link{color:var(--color-default-2); fill:var(--color-default-2); font-weight: 400;}
.header-sticky .header-link, .header-sticky .menu-link {color:var(--color-default-2); fill:var(--color-default-2)};
.header-link:hover, .menu-link:hover{color:var(--color-default-3); fill:var(--color-default-3);}
.header-link.active, .menu-link.active{color: var(--color-default-3) !important; fill:var(--color-default-3); font-weight: 600;}

.section-title-main{color:var(--color-default-2);}
.section-title-main span{color: var(--color-default-7);}
.section-summary-main{color:#7C7C7C;}

.rancak-bg{ z-index: 1; left: 0; width: 100%;}
.btm-section-bg, .top-section-bg { position: relative; }
.btm-section-bg::before{padding-top: calc(11/48*100%);}
.top-section-bg{margin-top: -96px;}
.top-section-bg::before{padding-top: calc(283/720*100%);}

.rancak-section { background-color: var(--bg-3); }


.show-sticky{color:var(--color-default-3) !important; fill:var(--color-default-3) !important;}

.rancak-popup, .rancak-popup-overlay, .rancak-popup-container{bottom:0; left:0; width:100%; height:100%;}
.rancak-popup{position:fixed; z-index:calc(var(--max-zindex) - 2000);}
.rancak-popup-overlay, .rancak-popup-container, .rancak-popup-close{position:absolute;}
.rancak-popup-container, .rancak-popup-box{padding:var(--size-4);}
.rancak-popup-overlay{z-index:1;}
.rancak-popup-box{position:relative; z-index:2000; width:100%; max-width:987px; max-height:calc(100vh - var(--size-7)); background-color:var(--bg-2);
border-radius:var(--rounded-2); box-shadow:var(--shadow-default); overflow-y:auto;}
.rancak-popup-head{display:flex; justify-content:center; margin-bottom: var(--size-4)}
.rancak-popup-head > *{display:flex; align-items:center;}
.rancak-popup-title{font-weight:bold; color:var(--color-default-2); text-align: center; font-size: 16px; text-transform: uppercase; color: #000;}
.rancak-popup-close{z-index:1000; top:0; right:0; padding:var(--size-3); fill:var(--color-default-4);}
.rancak-popup-close:hover{fill:var(--color-default-3);}
.rancak-popup-close .svgicon{width:auto; height:var(--size-4);}
.popup-close-button { position: absolute; z-index: 1000; top: 0; right: 0; padding: var(--size-3); fill: var(--bg-4); }

.popup-company-box { max-width: 576px; }
.logo-company { display: flex; position: relative; justify-content: center; align-items: center; margin-bottom: var(--size-2); width: 100%; max-height: 150px; }
.popup-logo-frame { position: relative; width: 150px; height: 150px; }
.popup-logo-frame::before { padding-top: 100%;}
.popup-logo-frame img { position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: contain;}
.popup-company-desc { display: grid; gap: var(--size-3); }
.popup-company-desc p { font-size: 14px; text-align: justify; }
.btn-visit-company { margin-top: var(--size-4); }
.btn-visit-company a { background-color: var(--bg-1); color: #FFFFFF !important; font-weight: 700 !important; width: 200px !important;}

footer{padding: var(--size-6) var(--size-4);}
footer span{ width: 100%; display: grid; gap: var(--size-4); max-width: var(--site-container);}
.thumb-logo-footer{position: relative; max-width: 156px; margin-bottom: var(--size-2);}
.thumb-logo-footer::before{padding-top: calc(31/153*100%);}
.footer-all-copyright{display: flex; color: var(--bg-2);}
.footer-company, .footer-company > *{color: var(--bg-2);}
.footer-company h5{font-weight: 700;}

.section-cover { background-color: #000; }
.section-cover-frame { opacity: 0.89; }

.thumb-loading:before { animation: skeleton-loading 0.5s linear infinite alternate; background-color: var(--color-text-3); }
.list-company{position: relative;}
.content-company-container{position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 2; padding: var(--size-4); display: grid; align-content: space-between;}
.content-company .title{color: var(--bg-2); font-weight: 700; font-size: 36px;}
.content-company .summary{color: var(--bg-2); font-size: 20px;}
.content-company{display: grid; gap: var(--size-3);}
.btn-company-container{display: flex; justify-content: center;}
.btn-view-company{background: var(--bg-2) !important; color: var(--bg-4) !important; font-weight: 700 !important; font-size: 20px !important; border-radius: 0 !important; min-width: 200px;}
.btn-view-company:hover{background: var(--bg-4) !important; color: var(--bg-2) !important;}

.center-title, .center-summary{text-align: center;}

.client-list-container.slider{height: 250px; margin: auto; position: relative; width: 100%; display: grid; place-items: center; overflow: hidden;}
.slide-track{display: flex; width: calc(250px * 12); animation: scroll 40s linear infinite;}
.slide{height: 200px; width: 250px; display: flex; align-items: center; padding: 15px;}
.slider::before, .slider::after{background: linear-gradient(to right, #EEEEEE 0%, rgba(255,255,255,0) 100%); content: ''; height: 100%; position: absolute; width: 15%; z-index: 2;}
.slider::before{top: 0; left: 0;}
.slider::after{top: 0; right: 0; transform: rotateZ(180deg);}


.bod-content-container{display: grid; gap: var(--size-4); grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); margin-top: var(--size-4);}
.bod-content-list{display: grid; gap: var(--size-3);}
.thumb-bod-frame::before{padding-top: 100%;}
.bod-name{color: #000000; font-size: 20px; font-weight: 700;}
.bod-division{color: #000000; font-size: 14px;}

.publication-content-container{display: grid; gap: var(--size-4); grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); margin-top: var(--size-4);}
.publication-content-list{display: grid; gap: var(--size-3);}
.publication-date{color: #000000; font-size: 16px; font-weight: 700;}

@keyframes scroll {
  0%{transform: translateX(0);}
  100%{transform: translateX(calc(-250px * 6));}
}

.client-list{padding: var(--size-4);}
.thumb-client{width: 150px;}
.thumb-client::before{padding-top: 100%;}
.thumb-client img{position:absolute; z-index:2; top:0; left:0; width:100%; height:100%; object-fit:contain;}



@media screen and (min-width:0px) and (max-width:1023px){
  body.header-white menu{background:#E0E0E0; box-shadow:0 0 0 !important;}


  

  .footer-all{padding-bottom:70px;}

}


@media screen and (min-width:1024px){
  menu{background:0;}
  
  
  
  .profil-link{max-width:180px;}
  
  .header-link, .menu-link{color:var(--bg-2); fill:var(--bg-2);}
  .header-link.active, .menu-link.active{color: var(--color-default-4) !important; fill:var(--color-default-4); font-weight: 600;}
  
  .rancak-popup-box::-webkit-scrollbar{width:7px;}
  .rancak-popup-box::-webkit-scrollbar-track, .rancak-popup-box::-webkit-scrollbar-thumb{background:0;}
  .rancak-popup-box:hover::-webkit-scrollbar-thumb{background:rgb(var(--color-border-dark) / 13%);}
  .rancak-popup-box::-webkit-scrollbar-thumb:hover{background:rgb(var(--color-border-dark) / 34%);}
  .body-popup-content { padding: 0 var(--size-3); max-height: 300px; overflow-y: auto; padding-right: 17px; box-sizing: content-box; -ms-overflow-style: none; scrollbar-width: none; }

  .popup-bod-box .body-popup-content{min-height: 400px;}
  .bod-content-container{grid-template-columns: repeat(4, 1fr);}
  .publication-content-container{grid-template-columns: repeat(6, 1fr);}

  .btn-popup-close{width: 80%;}

  footer span{grid-template-columns: repeat(2, 1fr);}
  .footer-right{display: grid; gap: 0; justify-content: end; padding-left: var(--size-7);}

  .popup-company-box { display: grid; grid-template-columns: 40% 1fr; column-gap: var(--size-4); }
  .popup-bod-box { display: grid; grid-template-columns: 1fr !important; column-gap: var(--size-4); }
  
}
  
  
  
@supports(-webkit-backdrop-filter:none) or (backdrop-filter:none){

  .rancak-popup > .rancak-popup-overlay { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); background-color: rgb(var(--color-border-dark) / 13%); }
}