*,html,:before,:after{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-family:inherit;-moz-box-sizing:border-box;box-sizing:border-box;font-size:100%;text-align:left}img{color:transparent;font-size:0;vertical-align:middle;-ms-interpolation-mode:bicubic}ol,ul{list-style:none}li{display:list-item}a img{border:0}a{text-decoration:none}b,strong{font-weight:900}i,em{font-style:italic}img{max-width:100%}.btn,input[type=button],select,button{-webkit-appearance:none;cursor:pointer;background-color:transparent}.content_center{display:flex;justify-content:center;align-items:center}.hide{display:none}



:root, :before, :after{
  --site-container:1024px;
  --size-1:5px;
  --size-2:8px;
  --size-3:13px;
  --size-4:21px;
  --size-5:34px;
  --size-6:55px;
  --size-7:89px;
  --max-zindex:2147483648;
  --default-fontsize:14px;
  --title-fontsize:16px;
  --menu-width:210px;
  --bg-1:#FAFAFA;
}



body, html{font-family:'Plus Jakarta Sans',sans-serif; font-size:var(--default-fontsize); font-weight:500; letter-spacing:0.4px; font-feature-settings:'lnum' 1; 
-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; -webkit-font-smoothing:antialiased; 
-moz-osx-font-smoothing:grayscale; text-rendering:optimizeSpeed;}
html{scroll-behavior:smooth; min-height:100vh;}
body{background-color:var(--bg-1); overflow-x:hidden;}
a, button{font-weight:bold;}
.btn, a.btn, button.btn{padding:var(--size-3) var(--size-4); -webkit-appearance:none; text-transform:uppercase; font-weight:bold;
display:flex; text-align:center; align-items:center; justify-content:center;}
.rancak-popup{display:none;}
.width-max{position:relative; width:100%; max-width:var(--site-container); margin:0 auto;}



.flex_ori{display:block; overflow:hidden; position:relative; line-height:0;}
.flex_ori:before{content:''; display:block; padding-top:calc(100% / calc(var(--aspect-ratio)));}
.flex_ori img{position:absolute; z-index:2; top:0; left:0; width:100%; height:100%;}
.flex_ori img:not([src]){visibility:hidden;}

header{position:fixed; z-index:calc(var(--max-zindex) - 3000);  padding: var(--size-4) var(--size-4) var(--size-3) var(--size-4);}
header .width-max{justify-content:space-between; max-width:var(--site-container); margin:0 auto;}

.rancak-container{position:relative; min-height:100vh; }
.rancak-container .width-max{max-width: var(--site-container); padding: 0 var(--size-4);}
.rancak-content{padding:var(--size-4); display:grid; grid-gap:var(--size-5);}
.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:space-between;}
.rancak-popup-head > *{display:flex; align-items:center;}
.rancak-popup-title{font-weight:bold; color:var(--color-default-2);}
.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);}
.popup-loading-box{display: grid; justify-content: center; justify-items: center; gap: var(--size-5); max-width: 640px; padding: var(--size-5) var(--size-4);}
.content-title-popup > h2{font-size: var(--size-5); font-weight: 700; text-transform: uppercase;}
.popup-loading{z-index:calc(var(--max-zindex)) !important; }

@supports(-webkit-backdrop-filter:none) or (backdrop-filter:none){
  .rancak-popup{-webkit-backdrop-filter:blur(var(--size-3)); backdrop-filter:blur(var(--size-3)); background-color:rgb(var(--color-border-dark) / 13%);}
}

.rancak-container{position:relative;}
.section-container > .width-max{padding:var(--size-5) var(--size-4); max-width:var(--site-container); margin:0 auto;}
.rancak-section { padding: var(--size-4) 0 0; position: relative; z-index: 10; background: var(--bg-1);}

.section-title{--line-width:89px; --line-height:5px; position:relative; margin-bottom:var(--size-5);}
.section-title *{text-align:center;}
.section-title-main{position:relative; font-weight:bold; text-transform:uppercase; line-height:100%;}
.section-summary-main{line-height:140%; margin-top:var(--size-1);}
.section-summary-main{text-align: center;}
.section-summary-main b{display:inline-block;}

.section-cover-video{background-color:#000; padding:0; position:relative; z-index:1; top:0; margin-top:calc(var(--menu-height) * -1);}
.section-cover-video, .section-cover-video video{top:0; left:0; width:100%; height:100%;}
.section-cover-video{position:relative; z-index:2;}
.section-cover-video::before{padding-top: calc(9/16*100%);}
.section-cover-video video{position:absolute; width: 100%; height: 100%; object-fit: cover; z-index:3; object-fit:cover;}

.section-cover-image{background-color:#000; min-height:100vh; min-height:100svh; padding:0; position:relative; z-index:1; top:0; margin-top:calc(var(--menu-height) * -1);}
.section-cover-image, .section-cover-image img{top:0; left:0; width:100%; height:100%;}
.section-cover-image img{position:absolute; z-index:3; object-fit:cover;}

.overlay-top{position: absolute; top: 0; left: 0; z-index: 4; width: 100%; height: 100%; background: linear-gradient(0deg, rgba(1, 64, 96, 0) 67.85%, #014060 100%); }
.overlay-bottom{position: absolute; bottom: 0; z-index: 4; width: 100%; height: 244px; background: linear-gradient(180deg, rgba(217, 217, 217, 0) 0%, rgba(244, 244, 244, 0.7) 80%, #F4F4F4 100%);}
.frame-kominfo-logo{position: absolute; width: 100%; z-index: 5; top: var(--size-3); margin-left: auto; margin-right: auto; left: 0; right: 0; text-align: center;}
.frame-cover-viva{max-width: 80px;}
.frame-cover-viva::before{padding-top: calc(67/80*100%);}
.frame-cover-viva img{position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover;}
.frame-cover-tvone{max-width: 80px;} 
.frame-cover-tvone::before{padding-top: calc(761/1350*100%);}
.frame-cover-tvone img{position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover;}


@media screen and (min-width:0px) and (max-width:1023px){
  :root, :before, :after{
    --menu-size:55px;
  }
  .desktop-only, .share-box-static{display:none !important; visibility:hidden; content-visibility:hidden;}
  .desktop-only iframe[loading=lazy]{content-visibility:hidden !important;}

  header{ bottom: 0; left:0;}

  .section-title-main{font-size:24px;}


}



@media screen and (min-width:1024px){
  :root, :before, :after{
    --menu-size:270px;
  }
  .mobile-only{display:none !important; visibility:hidden; content-visibility:hidden;}

  .section-title-main{font-size:36px;}

  header{top:33%; right:0;}

  .frame-cover-tvone{max-width:120px;} 
  .section-cover-video{min-height:100vh; min-height:100svh;}
  
  
}