header{margin-bottom:30px;display:grid}header .header-top,header .header-middle,header .header-bottom{display:flex;flex-direction:row;align-items:center}header .search{position:relative;top:-16px;margin-left:auto}header .search .search-field{position:relative;width:350px}header .search .search-field input{position:absolute;right:0;width:70%;height:31px;padding:0 15px;color:#E80F8A;font-size:14px;font-weight:normal;border:1px solid #FFFFFF;border-radius:20px;z-index:99;transition:all .3s ease-in-out}header .search .search-field input:focus{right:25px;width:75%;outline:none}header .search .search-field input::placeholder{color:#E80F8A;opacity:1}header .search .search-field input:-ms-input-placeholder{color:#E80F8A}header .search .search-field input::-ms-input-placeholder{color:#E80F8A}header .search .search-field input:focus ~ button.btn-search{right:28px;color:#FFF;background:#E80F8A}header .search .search-field input:focus ~ button.btn-reset{right:-3px;z-index:9}header .search .search-field button{text-align:center}header .search .search-field button:focus{outline:none}header .search .search-field .btn-search{position:absolute;top:2px;right:2px;width:26px;height:26px;padding:4px;background-color:#FFFFFF;border:none;border-radius:50%;z-index:99;cursor:pointer;transition:all .3s ease-in-out}header .search .search-field .btn-search:before{position:relative;top:0;left:0.9px}header .search .search-field .btn-reset{position:absolute;top:5px;right:5px;border:none;width:20px;height:20px;padding:0;color:#E80F8A;font-size:12px;line-height:20px;background:#FFFFFF;border:1px solid #FFFFFF;border-radius:50%;cursor:pointer;z-index:-1}header .search .search-field .btn-reset:before{position:relative;top:0;left:0.8px;font-size:13px}header .header-top{padding:0 30px;background-color:#E80F8A;border-bottom-left-radius:20px;border-bottom-right-radius:20px}header .header-top #kanal-navigation{align-items:flex-start}header .header-top #kanal-navigation li{display:inline-block;padding-right:16px}header .header-top #kanal-navigation li:last-of-type{padding-right:0}header .header-top #kanal-navigation a{line-height:45px;font-size:14px;font-weight:700;text-shadow:none;transition:all .3s ease-in-out}header .header-top #kanal-navigation a::before{color:#FFFFFF;content:attr(data-hover);position:absolute;transition:transform 0.3s, opacity 0.3s}header .header-top #kanal-navigation a:hover::before,header .header-top #kanal-navigation a:focus::before{transform:scale(0.9);opacity:0}header .header-top #kanal-navigation a.active{color:#FBC02D}header .header-top #kanal-navigation a:hover{color:#FBC02D}header .header-top #kanal-navigation .kanal-lain{position:relative;display:inline-block}header .header-top #kanal-navigation .kanal-lain:hover .kanal-expand{display:flex;flex-direction:row}header .header-top #kanal-navigation .kanal-lain:hover .link-expand{color:#FBC02D}header .header-top #kanal-navigation .kanal-lain .link-expand{width:40px;background-color:#E80F8A;color:#FFFFFF;font-size:14px;font-weight:700;border:none}header .header-top #kanal-navigation .kanal-lain .link-expand i{position:relative;top:1px;left:4px}header .header-top #kanal-navigation .kanal-lain .kanal-expand{display:none;position:absolute;color:#E80F8A;background-color:#FFFFFF;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);z-index:999;white-space:normal}header .header-top #kanal-navigation .kanal-lain .kanal-expand li{width:160px;padding-right:0}header .header-top #kanal-navigation .kanal-lain .kanal-expand li a{padding:0 24px;color:#E80F8A}header .header-top #kanal-navigation .kanal-lain .kanal-expand li a:hover{color:#FFFFFF;background-color:#E80F8A}header .header-top #social-media-header{margin-left:auto}header .header-top #social-media-header li{display:inline-block;padding:0 2px}header .header-top #social-media-header a{width:31px;text-align:center;color:#E80F8A;background-color:#FFFFFF;border-radius:50%;padding:2px 0;transition:all .3s ease-in-out}header .header-top #social-media-header a:hover{background-color:#FFFFFF;color:#FBC02D}header .header-top #social-media-header i{font-size:14px}header .header-middle{height:150px}header .header-middle #logo{width:442px;margin:0 auto;transition:all .3s ease-in-out}header .header-middle #logo:hover{animation:shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;transform:translate3d(0, 0, 0)}@keyframes shake{10%,90%{transform:translate3d(-1px, 0, 0)}20%,80%{transform:translate3d(2px, 0, 0)}30%,50%,70%{transform:translate3d(-4px, 0, 0)}40%,60%{transform:translate3d(4px, 0, 0)}}header .header-bottom{border-bottom:4px solid #575658;background-color:#FFFFFF}header .header-bottom .content-top{display:none}header .header-bottom.sticky{position:fixed;top:0;display:block;z-index:999;width:1260px;border-top-left-radius:0;border-top-right-radius:0;transition:all 0.3s}header .header-bottom.sticky .container{width:100%}header .header-bottom.sticky .content-top{display:flex;flex-direction:row;justify-content:space-between;align-items:center}header .header-bottom.sticky .logo-sticky{padding:12px 0 16px}header .header-bottom.sticky .logo-sticky img{width:270px}header .header-bottom.sticky .search{top:-15px !important}header .header-bottom.sticky .search input{border:1px solid #E80F8A}header .header-bottom.sticky li:first-of-type i{padding:0 20px;line-height:56px;color:#FFF;font-size:20px;cursor:pointer}header .header-bottom.sticky li:first-of-type i.show{display:block}header .header-bottom.sticky .kanal-list{display:none;position:absolute;left:0px;width:260px;background-color:#1A3B63}header .header-bottom.sticky .kanal-list li{display:block !important}header .header-bottom.sticky .kanal-list a{padding:0 30px}header .header-bottom.sticky::before{content:'';width:100%;background:#fff;position:fixed;height:143px;z-index:-9;left:0}header .header-bottom.sticky nav{border-bottom:4px solid #575658}header .header-bottom.sticky.header-bottom{border-bottom:unset}header .header-bottom nav{border-bottom:none;box-shadow:none}header .header-bottom nav .container{position:relative}header .header-bottom nav .swiper-container{width:100%;height:100%}header .header-bottom nav .swiper-container .swiper-slide{width:auto !important;text-align:center;font-size:18px;display:flex;justify-content:center;align-items:center}header .header-bottom nav .swiper-container .swiper-slide a{padding:0 16px;line-height:45px;font-size:20px;color:#0E031F;border-top-left-radius:10px;border-top-right-radius:10px;transition:all .5s ease-in-out}header .header-bottom nav .swiper-container .swiper-slide a.active{color:#FFFFFF;background-color:#E80F8A}header .header-bottom nav .swiper-container .swiper-slide a:hover{color:#FFFFFF;background-color:#E80F8A}header .header-bottom nav .swiper-button-next,header .header-bottom nav .swiper-button-prev{font-weight:700;color:#0e031f;top:58%}header .header-bottom nav .swiper-button-next:focus,header .header-bottom nav .swiper-button-prev:focus{outline:none}header .header-bottom nav .swiper-button-next{right:-45px}header .header-bottom nav .swiper-button-prev{left:-45px}header #subkanal{padding:12px 0;text-align:center;background-color:#F2F2F2;border-bottom-left-radius:20px;border-bottom-right-radius:20px}header #subkanal li{display:inline-block;padding:0 8px}header #subkanal li.active a{color:#FFFFFF;background-color:#F7ACB7}header #subkanal li a{padding:4px 32px;font-size:14px;color:#F2F2F2;background-color:#575658;border-radius:30px;transition:all .3s ease-in-out}header #subkanal li a:hover{color:#FFFFFF;background-color:#F7ACB7}.about-us header.sticky{z-index:999}.about-us header.sticky #logo-about{z-index:99}.about-us header.sticky .logo-about-sticky{top:0;position:fixed;height:188px;background-color:#fceef5;width:100%;border-bottom:36px solid #e80f8a;z-index:999;transition:all 0.3s}.about-us header.sticky .logo-about-sticky a{position:relative;top:50%;transform:translate(0, -50%)}.about-us header.sticky .logo-about-sticky a img{width:335px;height:82.1px}.about-us header .logo-about-sticky{position:absolute;top:-200px;transition:all 0.3s}@media only screen and (max-width: 1289px){header .header-bottom.sticky{width:1060px}}@media only screen and (min-width: 992px) and (max-width: 1081px){header .header-bottom nav .swiper-container{width:95%}header .header-bottom nav .swiper-button-prev{left:-10px}header .header-bottom nav .swiper-button-next{right:-10px}}@media only screen and (min-width: 768px) and (max-width: 857px){header .header-top{padding:0 20px}header .header-top #kanal-navigation{white-space:nowrap}header .header-top .search .search-field{width:250px}header .header-top .search .search-field input{right:10px}header .header-top .search .search-field input:focus{right:25px}header .header-top .search .search-field .btn-search{right:12px}header .header-top .search .search-field .btn-reset{right:15px}header .header-bottom nav .container{padding:0 20px}header .header-bottom nav .swiper-container{width:95%}header .header-bottom nav .swiper-button-next{right:0}header .header-bottom nav .swiper-button-prev{left:0}}@media only screen and (max-width: 767px){header .header-bottom.sticky{width:100%;padding:0px 12px;margin:0}header .header-bottom.sticky .logo-sticky img{width:230px}header .header-bottom nav{width:100%}header .header-bottom nav .container{padding:0 20px}header .header-bottom nav .swiper-container{width:95%}header .header-bottom nav .swiper-button-next{right:0}header .header-bottom nav .swiper-button-prev{left:0}header .header-bottom nav .swiper-container .swiper-slide a{padding:0 12px;font-size:16px;line-height:40px}header .header-middle #logo{width:350px}header .header-bottom,header .header-middle,header .header-top{margin:0 12px}header .search .search-field{width:300px}}