:root, :before, :after{
  --bg-2:#FFFFFF;  
  --bg-3:#F5F5F5;  
  --color-border-dark:0 0 0;
  --color-border-light:255 255 255;
  --color-default-1:#7D7D7D; 
  --color-default-2:#424242;
  --color-default-3:#848484;
  --color-default-4:#1D9BF0;
  --color-border:#E0E0E0;
  --color-onHold:#fbbc05;
  --color-onProgress:#34a853;
  --color-kom-1:#0285C6;
  --color-kom-2:#2A2559;
  --color-kom-3:#025198;
  --color-default-icon:#949494;
  --color-active-icon:#002F4F;
  --color-onReview:#4285f4;
  --rounded-1:var(--size-1);
  --rounded-2:var(--size-2);
  --rounded-3:var(--size-4);
  --hover-opacity:0.55;
  --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-text-1);}
html{background-color:var(--color-text-2);}
body.freeze-scroll{overflow:hidden;}
a, .btn, button{transition:var(--transition-default); cursor:pointer}
a, button{color:var(--color-text-2); fill:var(--color-text-2);}
a:hover, button:hover{color:var(--color-text-3); fill:var(--color-text-3);}
.btn, a.btn, button.btn{background-color:var(--color-text-3); color:var(--bg-1); fill:var(--bg-1); border-radius:var(--rounded-3);}
.btn:hover, a.btn:hover, button.btn:hover{filter:grayscale(1);}
#btt{position:fixed; bottom:calc(var(--size-6) * 2); right:0; cursor:pointer;
z-index:calc(var(--max-zindex) - 4000); width:40px; height:40px; background-color:var(--color-text-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-text-2);}
.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-text-2);}
@-webkit-keyframes skeleton-loading{0%{opacity:0.05;}100%{opacity:0.15;};}
@keyframes skeleton-loading{0%{opacity:0.05;}100%{opacity:0.15;};}

header, menu{transition:var(--transition-default); display: grid; row-gap: var(--size-5); }
header .width-max, .header-left:after, .header-logo{background:0;}
header{background:var(--bg-3);}
.menu-link .svgicon{fill: var(--color-default-icon);}
.menu-link:hover .svgicon{fill: var(--color-active-icon);} 
.menu-link:hover .kominfoicon .path-kom-1{fill: var(--color-kom-1);} 
.menu-link:hover .kominfoicon .path-kom-2{fill: var(--color-kom-2);} 
.menu-link:hover .kominfoicon .path-kom-3{fill: var(--color-kom-3);} 

.menu-link.active .svgicon{fill: var(--color-active-icon);}
.menu-link.active .kominfoicon .path-kom-1{fill: var(--color-kom-1);} 
.menu-link.active .kominfoicon .path-kom-2{fill: var(--color-kom-2);} 
.menu-link.active .kominfoicon .path-kom-3{fill: var(--color-kom-3);} 

.section-title-main{color:var(--color-default-2);}
.section-title-main span{color: var(--color-default-3);}
.section-summary-main{color:var(--color-default-1);}

.caption-aniv{margin-bottom: var(--size-6);}
.container-frame-aniv{display: flex; justify-content: center; margin-bottom: var(--size-4);}
.caption-aniv p{text-align: center; font-size: 20px; color: var(--color-default-1);}
.thumb-aniv-tvone{width: 100%; max-width: 560px;}
.thumb-aniv-viva{width: 100%; max-width: 360px;}
.thumb-aniv-tvone::before{padding-top: calc(77/385*100%);}
.thumb-aniv-viva::before{padding-top: calc(27/475*100%);}
/* .thumb-aniv-frame::before{padding-top: calc(3/44*100%);} */

.section-video:before{content:''; display:block; position:absolute; bottom: 0; left:0; width:100%; height:100%; opacity:0.69;
  background-image:url(../img/bg-section-video.svg); background-repeat:no-repeat; background-position:bottom center;}
.section-video-content{display: grid; gap: var(--size-3);}
.main-video-container{display: flex; justify-content: center;}
.main-video-frame{overflow: hidden; border-radius: var(--rounded-3); width: 100%; max-width: 740px;}
.main-video-frame::before{padding-top: calc(9/16*100%);}
.main-video-frame iframe{position: absolute; object-fit: cover; top: 0; left: 0; width: 100%; height: 100%;}
.list-video-container{display: grid; gap: var(--size-3); grid-template-columns:repeat(auto-fill, minmax(300px,1fr));}
.btn-more-container{margin-top: var(--size-4); display: flex; justify-content: center; align-items: center;}
button.btn-more{padding: var(--size-2); color: var(--color-default-4); font-size: 16px;}

.section-artikel:before{content:''; display:block; position:absolute; bottom: 0; left:0; width:100%; height:100%; opacity:0.69;
  background-image:url(../img/bg-section-artikel.svg); background-repeat:no-repeat; background-position:bottom center;}
.section-artikel-container{display:grid;}
.content-list-box{position:relative; font-weight:normal;}
.content-list-thumb{position:relative; z-index:1000;}
.content-normal-box .content-list-thumb-frame:before{padding-top:56.25%;}
.content-list-info{position:absolute; z-index:2000; bottom:0; left:0; width:100%; padding:var(--size-4); display:flex; flex-wrap:wrap;
  background: linear-gradient(180deg, rgba(0, 47, 79, 0) 0%, #002F4F 87.5%);}
.content-list-title, .content-list-desc{width:100%; display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; color: var(--bg-2);}
.content-list-kanal, .content-list-date, .content-list-desc{color:var(--bg-2); font-size:var(--size-3); }
.content-list-title{font-weight:900; margin-bottom:var(--size-2); font-size:var(--size-4); line-height:140%; -webkit-line-clamp:2;
text-shadow:2px 2px 10px hsl(var(--bg-4) / 100%);}
.content-list-kanal{margin-right:var(--size-2); padding-right:var(--size-2); border-right:1px solid hsl(var(--color-link-primary) / 100%);}
.content-list-desc{font-weight:normal; margin-top:var(--size-2); line-height:140%; -webkit-line-clamp:3;}

.section-artikel-more-container{display: grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr));}

.section-artikel-container .content-big-box .content-list-thumb-frame:before{padding-top:100%;}


.section-sosmed:before{content:''; display:block; position:absolute; bottom: 0; left:0; width:100%; height:100%; opacity:0.69; background-image:url(../img/bg-section-sosmed.svg); background-repeat:no-repeat; background-position:bottom center;}
.sosmed-content-container{padding-top: var(--size-4); margin-bottom: var(--size-5);}
.toggle-sosmed-container{display: flex; justify-content: center; gap: 80px;}
.toggle-sosmed{display: block !important; padding: var(--size-2) var(--size-4); background: var(--color-default-4); border-radius: var(--rounded-1);}
.toggle-sosmed .svgicon{fill: var(--bg-2);}
.prev-toggle .svgicon{transform: rotate(180deg);}
.sosmed-content-list{margin-top: var(--size-3);}
.frame-instagram-feed { position: relative; height: 880px; }
.frame-instagram-feed::before { content: ''; display: block; position: absolute; padding-top: calc(812 / 326* 100%); }
.frame-instagram-feed iframe { position: absolute; z-index: 2; top: 0; left: 0; width: 100%; max-width: 300px; height: 100%; object-fit: cover; }

.frame-facebook-feed iframe{width: 320px;}

.twitter-sosmed .sosmed-content-list, .tiktok-sosmed .sosmed-content-list{min-height: 700px;}


@media screen and (min-width:0px) and (max-width:1023px){

  header{width: 100%;}
  header, menu {display: flex; gap: var(--size-3); border-radius: var(--rounded-3) var(--rounded-3) 0 0; justify-content: space-between;}
  .header-content{width: 100%;}

  .section-artikel{padding:var(--size-6) 0;}
  .section-artikel .section-title{padding:0 var(--size-4);}
  .footer-all{padding-bottom: 80px;}

  @media screen and (min-width:568px){
    .section-artikel-container{grid-template-columns:repeat(2,1fr);}
	  .section-artikel-container .content-big-box .content-list-thumb-frame:before{padding-top:56.25%;}
    .content-list-desc{display:none;}
  
  }

}





@media screen and (min-width:1024px){
  header, menu{border-radius: var(--rounded-3) 0 0 var(--rounded-3);}
  .list-video-container{grid-template-columns: repeat(3, 1fr);}

  .section-artikel-container{grid-template-columns:620px 1fr;}
  .section-artikel-container .content-big-box{grid-row:1/4;}

  .section-artikel-more-container{grid-template-columns: repeat(3, 1fr); }
  .frame-facebook-feed iframe{width: 450px;}

  .thumb-aniv-tvone{width: 100%; max-width: 560px;}
  .thumb-aniv-tvone::before{padding-top: calc(17/387*100%);}
}