@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
body {
    position: relative;
    overflow-x: hidden;
    top: 0!important;
    font-family: 'Inter', sans-serif!important;
    /* max-width: 1440px!important;
    min-width: 1200px!important;
    width: 100%!important;
    margin: 0 auto!important */
}


/* #nav .navbar {
    background: transparent;
    box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.35);
} */


/* a.navbar-brand {
    display: none
} */

.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background-color: #70887B;
}

.preloader .loading {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font: 14px arial;
}

#nav .navbar-brand img {
    /* margin-left: 50px; */
    width: 100%;
    max-width: 165px!important;
    height: auto;
}

#nav .nav a {
    color: #000;
}

#nav .nav-umkm {
    width: 100%;
    margin: 0 auto 0 50px;
    max-width: 1440px;
}

#nav .nav-umkm li {
    padding-left: 10px;
}

#nav .nav-umkm li a {
    color: #fff;
    font-weight: 700;
    font-size: 13px;
}

#nav .nav-umkm-right {
    display: flex;
    justify-content: center;
    align-content: center;
    list-style: none;
}

#nav .nav-umkm-right li {
    padding-left: 5px;
}

#nav .nav-umkm-right li img {
    padding-left: 5px;
    margin-top: -5px;
}

#nav .desktop {
    display: block!important;
}

#nav .mobile {
    display: none!important;
}

#nav .search-container {
    position: relative;
}

#nav .wrap-search-form {
    display: flex;
    position: fixed;
    left: 75.5%;
    z-index: 999999;
    top: 65px;
    background: rgb(231, 231, 231);
    padding: 10px;
    border-radius: 5px;
    align-items: center;
    box-shadow: 0px 5px 37px -18px rgb(0 0 0 / 43%);
    -webkit-box-shadow: 0px 5px 37px -18px rgb(0 0 0 / 43%);
    -moz-box-shadow: 0px 5px 37px -18px rgba(0, 0, 0, 0.43);
}

#nav .input-search {
    border: none;
    padding: 10px;
    border-radius: 50px;
    height: 30px;
}

#nav .input-search:focus-visible {
    outline: none;
}

#nav .button-search {
    background: #70887B;
    border: none;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;
    border-radius: 50%;
    margin-left: 5px;
}

#nav .search-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    /* background: #E47388; */
    color: #fff;
    margin-left: 10px;
    border-radius: 50%;
    cursor: pointer;
}

#nav .search-wrap svg {
    color: #fff;
}


/*google translate Dropdown */

#google_translate_element select {
    background: transparent;
    color: #fff;
    border: none;
    border-radius: 3px;
    padding: 6px 8px;
}


/*google translate link | logo */

.goog-logo-link {
    display: none!important;
}

.goog-te-gadget {
    color: transparent!important;
}


/* google translate banner-frame */

.goog-te-banner-frame {
    display: none !important;
    height: 0!important
}

#goog-gt-tt,
.goog-te-balloon-frame {
    display: none !important;
}

.goog-text-highlight {
    background: none !important;
    box-shadow: none !important;
}

.VIpgJd-ZVi9od-ORHb {
    display: none !important;
    height: 0 !important
}

.VIpgJd-ZVi9od-l4eHX-hSRGPd,
.VIpgJd-ZVi9od-l4eHX-hSRGPd:link,
.VIpgJd-ZVi9od-l4eHX-hSRGPd:visited,
.VIpgJd-ZVi9od-l4eHX-hSRGPd:hover,
.VIpgJd-ZVi9od-l4eHX-hSRGPd:active {
    display: none !important
}

@media (min-width:1300px) {
    #nav .nav-umkm {
        margin-left: 200px;
    }
}

@media (max-width:1200px) {
    #nav .navbar-collapse {
        background: #70887B;
    }
    #nav .navbar-brand img {
        padding-left: 10px;
        max-width: 130px!important;
    }
    #nav .nav-umkm {
        margin-left: 0;
    }
    #nav .nav-umkm li {
        padding-left: 10px;
    }
    #nav .nav-umkm li a {
        font-size: 14px;
    }
    #nav .nav-umkm-right {
        margin-left: -60px;
    }
    #nav .desktop {
        display: none!important;
    }
    #nav .mobile {
        display: block!important;
        background: #70887B;
        margin-top: -16px;
        padding-bottom: 10px;
    }
    /* .nav-umkm-right li:last-child {
        padding-left: 5px;
    } */
    #navbarsExample07XL {
        margin-left: 0!important;
    }
    #nav .wrap-search-form {
        display: flex;
        position: fixed;
        left: 30px;
        z-index: 999999;
        top: 340px;
        background: rgb(231, 231, 231);
        padding: 10px;
        border-radius: 5px;
        align-items: center;
        box-shadow: 0px 5px 37px -18px rgb(0 0 0 / 43%);
        -webkit-box-shadow: 0px 5px 37px -18px rgb(0 0 0 / 43%);
        -moz-box-shadow: 0px 5px 37px -18px rgba(0, 0, 0, 0.43);
    }
}

#nav2 .navbar {
    background: #3F5B5C;
    box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.35);
}

#nav2 .navbar-brand img {
    /* margin-left: 50px; */
    width: 100%;
    max-width: 165px!important;
    height: auto;
}

#nav2 .nav a {
    color: #000;
}

#nav2 .nav-umkm {
    width: 100%;
    margin: 0 auto 0 80px;
    max-width: 1440px;
}

#nav2 .nav-umkm li {
    padding-left: 10px;
}

#nav2 .nav-umkm li a {
    color: #fff;
    font-weight: 700;
    font-size: 14px;
}

#nav2 .nav-umkm-right {
    display: flex;
    justify-content: center;
    align-content: center;
    list-style: none;
}

#nav2 .nav-umkm-right li {
    padding-left: 5px;
}

#nav2 .nav-umkm-right li img {
    padding-left: 5px;
    margin-top: -5px;
}

#nav2 .search-container {
    position: relative;
}

#nav2 .wrap-search-form {
    display: flex;
    position: fixed;
    left: 75.5%;
    z-index: 999999;
    top: 65px;
    background: rgb(231, 231, 231);
    padding: 10px;
    border-radius: 5px;
    align-items: center;
    box-shadow: 0px 5px 37px -18px rgb(0 0 0 / 43%);
    -webkit-box-shadow: 0px 5px 37px -18px rgb(0 0 0 / 43%);
    -moz-box-shadow: 0px 5px 37px -18px rgba(0, 0, 0, 0.43);
}

#nav2 .input-search {
    border: none;
    padding: 10px;
    border-radius: 50px;
}

#nav2 .input-search:focus-visible {
    outline: none;
}

#nav2 .button-search {
    background: #70887B;
    border: none;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;
    border-radius: 50%;
    margin-left: 5px;
}

#nav2 .search-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    /* background: #E47388; */
    color: #fff;
    margin-left: 10px;
    border-radius: 50%;
    cursor: pointer;
}

#nav2 .search-wrap svg {
    color: #fff;
}

@media (min-width:1300px) {
    #nav2 .nav-umkm {
        margin-left: 200px;
    }
}

@media (max-width:1200px) {
    #nav2 .navbar-brand img {
        padding-left: 10px;
        max-width: 130px!important;
    }
    #nav2 .nav-umkm {
        margin-left: 0;
    }
    #nav2 .nav-umkm li {
        padding-left: 10px;
    }
    #nav2 .nav-umkm li a {
        font-size: 14px;
    }
    #nav2 .nav-umkm-right {
        margin-left: -60px;
    }
    #nav2 .desktop {
        display: none!important;
    }
    #nav2 .mobile {
        display: block!important;
        background: #70887B;
        margin-top: -16px;
        padding-bottom: 10px;
    }
    #nav2 .wrap-search-form {
        display: flex;
        position: fixed;
        left: 30px;
        z-index: 999999;
        top: 340px;
        background: rgb(231, 231, 231);
        padding: 10px;
        border-radius: 5px;
        align-items: center;
        box-shadow: 0px 5px 37px -18px rgb(0 0 0 / 43%);
        -webkit-box-shadow: 0px 5px 37px -18px rgb(0 0 0 / 43%);
        -moz-box-shadow: 0px 5px 37px -18px rgba(0, 0, 0, 0.43);
    }
}

#home {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1000px;
    perspective-origin: 50% 50%;
    padding-top: 100px;
    padding-bottom: 20px;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
}

#home #background-video {
    height: 100vh;
    width: 100vw;
    object-fit: cover;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
}

#home .overlay {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 100%, rgba(255, 255, 255, 0) 100%);
    opacity: .8;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 15% 32px;
    line-height: 1.5;
    text-align: center;
}

#home .overlay h1 {
    margin-top: 130px;
    color: #fff;
    letter-spacing: 10px;
    font-size: 16px;
    line-height: 50px;
}

#home .overlay p {
    color: #fff;
    font-size: 36px;
    letter-spacing: 5px;
    font-weight: 900;
    line-height: 50px;
}


/* #home #myBtn {
    width: 60px;
    font-size: 12px;
    padding: 10px;
    border: none;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    cursor: pointer;
    border-radius: 10px;
}

#home #myBtn:hover {
    background: #ddd;
    color: black;
} */

#home .button {
    align-items: center;
    display: flex;
    justify-content: center;
    position: relative;
    bottom: 120px;
    left: -420px
}

#home .background {
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 2.2px rgba(0, 0, 0, 0.051), 0 2.3px 5.3px rgba(0, 0, 0, 0.059), 0 4.4px 10px rgba(0, 0, 0, 0.06), 0 7.8px 17.9px rgba(0, 0, 0, 0.059), 0 14.6px 33.4px rgba(0, 0, 0, 0.059), 0 35px 80px rgba(0, 0, 0, 0.07);
    cursor: pointer;
    height: 50px;
    position: absolute;
    width: 50px;
    opacity: .3;
}

#home .button:active .background {
    background: #e93c15;
}

#home .active .icon {
    transform: rotate(-120deg);
}

#home .part {
    background: white;
    height: 100px;
    position: absolute;
    width: 100px;
}

#home .active .left {
    clip-path: polygon( 43.77666% 55.85251%, 43.77874% 55.46331%, 43.7795% 55.09177%, 43.77934% 54.74844%, 43.77855% 54.44389%, 43.77741% 54.18863%, 43.77625% 53.99325%, 43.77533% 53.86828%, 43.77495% 53.82429%, 43.77518% 53.55329%, 43.7754% 53.2823%, 43.77563% 53.01131%, 43.77585% 52.74031%, 43.77608% 52.46932%, 43.7763% 52.19832%, 43.77653% 51.92733%, 43.77675% 51.65633%, 43.77653% 51.38533%, 43.7763% 51.11434%, 43.77608% 50.84334%, 43.77585% 50.57235%, 43.77563% 50.30136%, 43.7754% 50.03036%, 43.77518% 49.75936%, 43.77495% 49.48837%, 44.48391% 49.4885%, 45.19287% 49.48865%, 45.90183% 49.48878%, 46.61079% 49.48892%, 47.31975% 49.48906%, 48.0287% 49.4892%, 48.73766% 49.48934%, 49.44662% 49.48948%, 50.72252% 49.48934%, 51.99842% 49.4892%, 53.27432% 49.48906%, 54.55022% 49.48892%, 55.82611% 49.48878%, 57.10201% 49.48865%, 58.3779% 49.4885%, 59.6538% 49.48837%, 59.57598% 49.89151%, 59.31883% 50.28598%, 58.84686% 50.70884%, 58.12456% 51.19714%, 57.11643% 51.78793%, 55.78697% 52.51828%, 54.10066% 53.42522%, 52.02202% 54.54581%, 49.96525% 55.66916%, 48.3319% 56.57212%, 47.06745% 57.27347%, 46.11739% 57.79191%, 45.42719% 58.14619%, 44.94235% 58.35507%, 44.60834% 58.43725%, 44.37066% 58.41149%, 44.15383% 58.27711%, 43.99617% 58.0603%, 43.88847% 57.77578%, 43.82151% 57.43825%, 43.78608% 57.06245%, 43.77304% 56.66309%, 43.773% 56.25486%);
    transition: clip-path 500ms;
}

#home .active .right {
    clip-path: polygon( 43.77666% 43.83035%, 43.77874% 44.21955%, 43.7795% 44.59109%, 43.77934% 44.93442%, 43.77855% 45.23898%, 43.77741% 45.49423%, 43.77625% 45.68961%, 43.77533% 45.81458%, 43.77495% 45.85858%, 43.77518% 46.12957%, 43.7754% 46.40056%, 43.77563% 46.67156%, 43.77585% 46.94255%, 43.77608% 47.21355%, 43.7763% 47.48454%, 43.77653% 47.75554%, 43.77675% 48.02654%, 43.77653% 48.29753%, 43.7763% 48.56852%, 43.77608% 48.83952%, 43.77585% 49.11051%, 43.77563% 49.38151%, 43.7754% 49.65251%, 43.77518% 49.9235%, 43.77495% 50.1945%, 44.48391% 50.19436%, 45.19287% 50.19422%, 45.90183% 50.19408%, 46.61079% 50.19394%, 47.31975% 50.1938%, 48.0287% 50.19366%, 48.73766% 50.19353%, 49.44662% 50.19338%, 50.72252% 50.19353%, 51.99842% 50.19366%, 53.27432% 50.1938%, 54.55022% 50.19394%, 55.82611% 50.19408%, 57.10201% 50.19422%, 58.3779% 50.19436%, 59.6538% 50.1945%, 59.57598% 49.79136%, 59.31883% 49.39688%, 58.84686% 48.97402%, 58.12456% 48.48572%, 57.11643% 47.89493%, 55.78697% 47.16458%, 54.10066% 46.25764%, 52.02202% 45.13705%, 49.96525% 44.01371%, 48.3319% 43.11074%, 47.06745% 42.4094%, 46.11739% 41.89096%, 45.42719% 41.53667%, 44.94235% 41.3278%, 44.60834% 41.24561%, 44.37066% 41.27137%, 44.15383% 41.40575%, 43.99617% 41.62256%, 43.88847% 41.90709%, 43.82151% 42.24461%, 43.78608% 42.62041%, 43.77304% 43.01978%, 43.773% 43.428%);
    transition: clip-path 500ms;
}

#home .pointer {
    border-radius: 50%;
    cursor: pointer;
    height: 100px;
    position: absolute;
    -webkit-tap-highlight-color: transparent;
    width: 100px;
}

#home .icon {
    transform: rotate(-90deg);
    transition: transform 500ms;
    width: 100px;
    height: 100px;
}

#home .left {
    clip-path: polygon( 56.42249% 57.01763%, 54.93283% 57.0175%, 53.00511% 57.01738%, 50.83554% 57.01727%, 48.62036% 57.01718%, 46.55585% 57.01709%, 44.83822% 57.01702%, 43.66373% 57.01698%, 43.22863% 57.01696%, 42.86372% 57.01904%, 42.56988% 57.01621%, 42.3402% 56.99486%, 42.16778% 56.94152%, 42.0457% 56.84267%, 41.96705% 56.68478%, 41.92493% 56.45432%, 41.91246% 56.13777%, 41.91258% 55.76282%, 41.9129% 55.37058%, 41.91335% 54.96757%, 41.91387% 54.56032%, 41.91439% 54.15537%, 41.91485% 53.75926%, 41.91517% 53.3785%, 41.91529% 53.01965%, 41.94275% 52.72355%, 42.02117% 52.51653%, 42.14465% 52.38328%, 42.30727% 52.30854%, 42.50308% 52.27699%, 42.72619% 52.27341%, 42.97065% 52.28248%, 43.23056% 52.2889%, 43.94949% 52.28896%, 45.45083% 52.28912%, 47.47445% 52.28932%, 49.76027% 52.28957%, 52.04818% 52.28981%, 54.07805% 52.29003%, 55.5898% 52.29019%, 56.32332% 52.29024%, 56.58221% 52.28816%, 56.83726% 52.28948%, 57.07897% 52.30593%, 57.29794% 52.34898%, 57.48468% 52.43029%, 57.62978% 52.56146%, 57.72375% 52.7541%, 57.75718% 53.01981%, 57.75713% 53.37763%, 57.75699% 53.81831%, 57.75679% 54.31106%, 57.75657% 54.82507%, 57.75635% 55.32958%, 57.75615% 55.79377%, 57.75601% 56.18684%, 57.75596% 56.47801%, 57.7549% 56.50122%, 57.74034% 56.5624%, 57.6955% 56.64887%, 57.60334% 56.748%, 57.44691% 56.84712%, 57.20925% 56.93358%, 56.87342% 56.99471%);
}

#home .right {
    clip-path: polygon( 56.42249% 42.44625%, 54.93283% 42.44637%, 53.00511% 42.44649%, 50.83554% 42.4466%, 48.62036% 42.4467%, 46.55585% 42.44679%, 44.83822% 42.44685%, 43.66373% 42.4469%, 43.22863% 42.44691%, 42.86372% 42.44483%, 42.56988% 42.44767%, 42.3402% 42.46902%, 42.16778% 42.52235%, 42.0457% 42.6212%, 41.96705% 42.77909%, 41.92493% 43.00956%, 41.91246% 43.32611%, 41.91258% 43.70105%, 41.9129% 44.0933%, 41.91335% 44.49631%, 41.91387% 44.90355%, 41.91439% 45.3085%, 41.91485% 45.70462%, 41.91517% 46.08537%, 41.91529% 46.44422%, 41.94275% 46.74032%, 42.02117% 46.94735%, 42.14465% 47.0806%, 42.30727% 47.15534%, 42.50308% 47.18688%, 42.72619% 47.19047%, 42.97065% 47.1814%, 43.23056% 47.17497%, 43.94949% 47.17491%, 45.45083% 47.17476%, 47.47445% 47.17455%, 49.76027% 47.1743%, 52.04818% 47.17406%, 54.07805% 47.17384%, 55.5898% 47.17369%, 56.32332% 47.17363%, 56.58221% 47.17571%, 56.83726% 47.17439%, 57.07897% 47.15795%, 57.29794% 47.1149%, 57.48468% 47.03359%, 57.62978% 46.90242%, 57.72375% 46.70977%, 57.75718% 46.44406%, 57.75713% 46.08625%, 57.75699% 45.64557%, 57.75679% 45.15282%, 57.75657% 44.6388%, 57.75635% 44.1343%, 57.75615% 43.6701%, 57.75601% 43.27703%, 57.75596% 42.98586%, 57.7549% 42.96265%, 57.74034% 42.90148%, 57.6955% 42.815%, 57.60334% 42.71587%, 57.44691% 42.61675%, 57.20925% 42.53029%, 56.87342% 42.46916%);
}

@media only screen and (min-width: 390px) and (max-width: 1200px) {
    #home .overlay h1 {
        margin-top: 250px;
    }
    #home .button {
        align-items: center;
        display: flex;
        justify-content: center;
        position: relative;
        bottom: 20px;
        left: 0
    }
}

#featured .content {
    background: #fff;
    position: relative;
    top: -150px;
    z-index: 999;
    max-width: 980px;
    margin: 0 auto -180px auto;
    padding: 40px 0 0 0;
    border-radius: 10px;
    text-align: center;
    height: 300px;
}

#featured .centered {
    position: relative;
    bottom: 70px;
    max-width: 260px;
    margin: 0 auto;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#featured p {
    text-align: center;
    color: #fff;
    margin-top: 5px;
    font-size: 16px;
}

#featured img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 282px;
    height: 224px;
}

@media only screen and (max-width: 1200px) {
    #featured .content {
        top: 0;
        max-width: 100%;
        margin: 0 auto;
        padding: 40px 0 0 0;
        border-radius: 0;
        height: auto;
    }
}

#news {
    background-color: #fff;
    padding-top: 70px;
    padding-bottom: 50px;
}

#news .left img {
    max-width: 343px;
    height: 205px;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 10px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#news .left p.judul {
    width: 100%;
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 30px;
    line-height: 22px;
    max-width: 343px;
    margin: 15px auto 0 auto;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #0A0D2C;
    padding-left: 15px;
}

#news .left p.isi {
    width: 100%;
    font-weight: 500;
    font-size: 16px;
    margin-bottom: 30px;
    line-height: 22px;
    max-width: 343px;
    margin: 15px auto 0 auto;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #0A0D2C;
    padding-left: 15px;
}

#news .left p.date {
    width: 100%;
    font-weight: 500;
    font-size: 12px;
    margin-bottom: 30px;
    line-height: 22px;
    max-width: 343px;
    margin: 10px auto 25px auto;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #0A0D2C;
    padding-left: 15px;
}

#news .center img {
    width: 100%;
    max-width: 123px;
    height: auto;
    float: left;
    margin-bottom: 20px;
    margin-right: 10px;
}

#news .center p.judul {
    font-size: 14px;
    margin: 0 0 5px 15px;
    color: #000;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 700;
}

#news .center p.isi {
    font-size: 14px;
    margin: 0 0 5px 15px;
    color: #000;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#news .center p.date {
    font-size: 12px;
    margin-left: 5px;
    color: #000;
}

#news .center {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (1fr)[1];
    grid-template-columns: repeat(1, 1fr);
    justify-items: center;
    max-width: 653px;
    width: 100%;
    margin: 0 auto 0 auto
}

#news .right img.img {
    width: 100%;
    max-width: 123px;
    height: auto;
    float: left;
    margin-bottom: 20px;
    margin-right: 10px;
}

#news .right p.judul {
    font-size: 14px;
    margin: 0 0 5px 15px;
    color: #000;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 700;
}

#news .right p.isi {
    font-size: 14px;
    margin: 0 0 5px 15px;
    color: #000;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#news .right p.date {
    font-size: 12px;
    margin-left: 5px;
    color: #000;
}

#news .right {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (1fr)[1];
    grid-template-columns: repeat(1, 1fr);
    justify-items: center;
    max-width: 653px;
    width: 100%;
    margin: 0 auto 0 auto
}

#news .right img.ads {
    width: 350px!important;
    height: 280px;
}

#pelantikan {
    /* padding-top: 70px; */
    padding-bottom: 50px;
}

#pelantikan section {
    margin-bottom: 50px;
}

#pelantikan img {
    min-height: 100%;
    min-width: 1024px;
    width: 100%;
    height: auto;
}

#pelantikan .overlay {
    background: rgba(70, 70, 70, .7);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 15% 32px;
    line-height: 1.5;
    text-align: center;
}

#pelantikan h5 {
    color: #fff;
    font-weight: 700;
    font-size: 30px;
    text-align: center;
    max-width: 700px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    top: -50px;
}

#pelantikan p {
    color: #fff;
    max-width: 700px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    top: -30px;
}

#pelantikan .splide__arrow {
    -ms-flex-align: center;
    align-items: center;
    background: #70887B;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    display: -ms-flexbox;
    display: flex;
    height: 2em;
    -ms-flex-pack: center;
    justify-content: center;
    opacity: .7;
    padding: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2em;
    z-index: 1
}

#pelantikan .splide__arrow svg {
    fill: #fff;
    height: 1.2em;
    width: 1.2em
}

@media screen and (max-width:1000px) {
    #pelantikan img {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        max-width: 1440px;
        height: 600px;
        object-fit: cover;
    }
    #pelantikan h5 {
        top: 120px;
    }
    #pelantikan p {
        top: 140px;
    }
}

#warta h5 {
    text-align: center;
    color: #70887B;
    font-weight: 700;
    font-size: 30px;
}

#warta p {
    text-align: center;
    color: #70887B;
    max-width: 500px;
    width: 100%;
    margin: 0 auto 30px auto
}

#warta img.img-warta {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 373px;
    height: auto;
    object-fit: cover;
}

#warta p.tag1 {
    background-color: #70887B;
    padding: 10px;
    color: #fff;
    text-align: center;
    width: 100%;
    max-width: 145px;
    margin: 0 auto;
    border-radius: 10px;
    position: relative;
    bottom: 25px;
    font-size: 14px;
}

#warta p.tag2 {
    background-color: #676889;
    padding: 10px;
    color: #fff;
    text-align: center;
    width: 100%;
    max-width: 145px;
    margin: 0 auto;
    border-radius: 10px;
    position: relative;
    bottom: 25px;
    font-size: 14px;
}

#warta p.tag3 {
    background-color: #6893A6;
    padding: 10px;
    color: #fff;
    text-align: center;
    width: 100%;
    max-width: 145px;
    margin: 0 auto;
    border-radius: 10px;
    position: relative;
    bottom: 25px;
    font-size: 14px;
}

#warta a p.judul {
    font-size: 14px;
    text-align: center;
    width: 100%;
    max-width: 270px;
    margin: -15px auto 10px auto;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 700;
    color: #626262;
}

#warta p.isi {
    font-size: 14px;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#warta p.date {
    font-size: 12px;
    text-align: center;
    margin-top: -20px;
}

#warta .detail {
    text-align: center;
    border: 1px solid #000;
    max-width: 130px;
    width: 100%;
    margin: 0 auto 20px auto;
    border-radius: 10px;
    font-size: 14px;
    padding: 5px
}

#warta .detail a {
    color: #000;
}

#warta .border {
    background-color: #fff;
    border-radius: 10px;
    position: relative;
    bottom: 50px;
    max-width: 300px;
    width: 100%;
    margin: 0 auto;
    border: 1px solid #fff!important;
}

@media screen and (max-width:700px) {
    #warta p.isi {
        font-size: 12px;
    }
    #warta .detail {
        font-size: 12px;
    }
}

#pers {
    padding-top: 70px;
    /* padding-bottom: 80px; */
}

#pers h3 {
    color: #70887B;
    font-weight: 700;
}

#pers input {
    position: absolute;
    opacity: 0;
    z-index: -1;
}

#pers .accordion-wrapper {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.5);
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
}

#pers .accordion {
    width: 100%;
    color: white;
    overflow: hidden;
    margin-bottom: 16px;
}

#pers .accordion:last-child {
    margin-bottom: 0;
}

#pers .accordion-label {
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    padding: 16px;
    background: #70887B;
    font-weight: bold;
    cursor: pointer;
    font-size: 24px;
}

#pers .accordion-label:hover {
    background: #596b61;
}

#pers .accordion-label::after {
    content: "\276F";
    width: 16px;
    height: 16px;
    text-align: center;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

#pers .accordion-content {
    max-height: 0;
    padding: 0 16px;
    color: rgba(4, 57, 94, 1);
    background: #d9d9d9;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

#pers .accordion-content .isi {
    background-color: #fff;
    padding: 15px;
    border-radius: 10px;
    color: #000;
    font-size: 16px;
    margin: 5px;
}

#pers .accordion-content .isi:hover {
    background-color: #e6e6e6;
}


/* #pers input:checked+.accordion-label {
    background: #596b61;
    padding-right: 12px;
} */

#pers input:checked+.accordion-label::after {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
    margin-right: 10px;
}

#pers input:checked~.accordion-content {
    max-height: 50vh;
    padding: 5px;
    overflow: scroll;
}

#det-artikel {
    margin-top: 100px;
    height: auto;
}

#det-artikel .breadcrumbs {
    border-bottom: 1px solid #333;
    font-weight: 600;
    margin-bottom: 10px;
}

#det-artikel .breadcrumbs .bc-text {
    font-size: 21px;
    font-weight: bold;
    padding-bottom: 10px;
    margin-bottom: 0px;
    display: inline-block;
    color: #000;
}

#det-artikel .breadcrumbs .bc-text::before {
    content: '';
    background: #0A0D2C;
    height: 6px;
    display: block;
    position: relative;
    border-radius: 80px;
    top: 45px;
    left: -1px;
}

#det-artikel img.header {
    width: 100%;
    height: auto;
    max-width: 653px;
}

#det-artikel img.header-2 {
    width: 100%;
    height: auto;
    max-width: 653px;
    margin-bottom: 10px;
}

#det-artikel h1 {
    color: #0A0D2C;
    font-weight: 700;
    font-size: 25px;
}

#det-artikel h2 {
    font-size: 14px;
    max-width: 653px;
    text-align: left;
    margin-top: 10px;
    border-bottom: 1px solid #d9d9d9;
    border-left: 5px solid #0A0D2C;
    padding: 15px;
}

#det-artikel h5 {
    color: #878787;
    font-size: 14px;
}

#det-artikel .figcaption {
    color: #878787;
    font-size: 14px;
    background: #F2F2F2;
    max-width: 653px;
}

#det-artikel p.text {
    font-size: 16px;
    max-width: 653px;
}

#det-artikel .baca-juga-body {
    max-width: 653px;
    background-color: #D9D9D9;
    border-radius: 5px;
    margin-bottom: 20px;
}

#det-artikel .baca-juga-body p {
    font-size: 16px;
    padding: 20px 0 20px 20px;
}

#det-artikel .baca-juga-body a {
    color: #333;
}

#det-artikel .baca-juga-footer img {
    width: 100%;
    max-width: 270px;
    height: auto;
    float: left;
    margin-bottom: 20px;
}

#det-artikel .baca-juga-footer .text {
    font-size: 16px;
    margin-left: 5px;
    color: #000;
}

#det-artikel .baca-juga-footer .tag {
    font-size: 16px;
    color: #878787;
    margin-left: 5px;
}

#det-artikel .baca-juga-footer {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (1fr)[3];
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
    max-width: 653px;
    width: 100%;
    margin: 0 100px 0 auto
}

#det-artikel .baca-juga-sidebar img {
    width: 100%;
    max-width: 88px;
    height: auto;
    float: left;
    margin-bottom: 20px;
}

#det-artikel .baca-juga-sidebar .text {
    font-size: 14px;
    margin-left: -70px;
    color: #000;
}

#det-artikel .baca-juga-sidebar .tag {
    font-size: 12px;
    color: #878787;
    margin-left: -70px;
}

#det-artikel .baca-juga-sidebar {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (1fr)[3];
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
    max-width: 653px;
    width: 100%;
    margin: 0 auto;
}

#det-artikel .sticky {
    top: 100px;
}

#det-artikel .author-date {
    display: flex;
    justify-content: space-between;
    max-width: 653px;
}

@media (max-width: 600px) {
    #det-artikel .baca-juga-sidebar .text {
        margin-left: -90px;
    }
    #det-artikel .baca-juga-sidebar .tag {
        margin-left: -90px;
    }
}

@media only screen and (min-width: 600px) and (max-width: 1200px) {
    #det-artikel .baca-juga-sidebar .text {
        margin-left: 0;
    }
    #det-artikel .baca-juga-sidebar .tag {
        margin-left: 0;
    }
}

.splide__pagination__page {
    width: 12px;
    height: 12px;
    margin: 5px;
}

.splide__pagination__page.is-active {
    background: #70887B!important;
    opacity: 1;
}


/*  carousel      */

#video {
    background-color: #000;
}

#video h5 {
    color: #fff!important;
    text-align: center;
    padding-top: 50px;
    font-size: 30px;
    margin-bottom: -600px;
}

#video iframe {
    width: 100%;
    max-width: 1138px;
    height: 525px;
    margin: 0 auto;
}

#video .carousel-item {
    /* height: 90vh;
    min-height: 300px; */
    height: 1280px;
}


/* #video .bg-1 {
    background-image: url(assets/images/home/featured.png);
}

#video .bg-2 {
    background-image: url(assets/images/home/featured.png);
}

#video .bg-3 {
    background-image: url(assets/images/home/featured.png);
}

#video .bg-1,
#video .bg-2,
#video .bg-3 {
    -webkit-background-size: cover;
    background-size: cover;
} */

#video .carousel-caption {
    bottom: 0;
    z-index: 2;
}

#video .carousel-caption h5 {
    font-size: 85px;
    text-transform: capitalize;
    letter-spacing: 2px;
    margin-top: 25px;
}

#video .carousel-caption p {
    width: 60%;
    margin: auto;
    font-size: 18px;
    line-height: 1.9;
}

#video .carousel-caption a {
    text-transform: uppercase;
    text-decoration: none;
    padding: 5px 20px;
    display: inline-block;
    color: #fff;
    margin-top: 15px;
    border-radius: 5px;
}


/* #video .carousel-inner:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1;
} */

#video .carousel-indicators {
    top: 25px;
    padding-bottom: 65px;
    padding-top: 25px;
    background-color: #fff;
    border-radius: 10px;
    position: relative;
}

#video .carousel-indicators button {
    width: 100px !important;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    #video .carousel-caption {
        bottom: 350px;
    }
    #video .carousel-caption h5 {
        font-size: 65px;
    }
    #video .carousel-caption p {
        font-size: 18px;
        width: 100%;
    }
}

@media only screen and (max-width: 767px) {
    #video .carousel-caption {
        bottom: 165px;
    }
    #video .carousel-caption h5 {
        font-size: 25px;
    }
    #video .carousel-caption p {
        font-size: 12px;
        width: 100%;
    }
    #video .carousel-caption a {
        padding: 10px 15px;
        font-size: 15px;
    }
}

#vidio {
    padding: 70px 0;
    background: url("../images/home/vidio.png");
    perspective: 1000px;
    perspective-origin: 50% 50%;
    background-position: center;
    background-size: cover;
}

#vidio .overlay {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.9) 100%, rgba(255, 255, 255, 0) 100%);
    opacity: .8;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 15% 32px;
    line-height: 1.5;
    text-align: center;
    z-index: -99999;
}

#vidio p {
    color: #fff;
    text-align: center;
}

#vidio h5 {
    color: #fff;
    text-align: center;
    font-size: 30px;
    margin-bottom: 30px;
    font-weight: 700;
}

#vidio .nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    color: #fff;
    background-color: rgba(112, 136, 123, 1);
    border-radius: 20px;
}

#vidio .nav-link {
    color: #fff
}

#vidio iframe {
    width: 100%;
    max-width: 1280px;
    height: 500px;
}

#vidio .splide__arrow {
    -ms-flex-align: center;
    align-items: center;
    background: #70887B;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    display: -ms-flexbox;
    display: flex;
    height: 2em;
    -ms-flex-pack: center;
    justify-content: center;
    opacity: .7;
    padding: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2em;
    z-index: 1
}

#vidio .splide__arrow svg {
    fill: #fff;
    height: 1.2em;
    width: 1.2em
}

#vidio .splide__track {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

#vidio .splide__pagination {
    bottom: -1.2em;
    left: 0;
    padding: 0 1em;
    position: absolute;
    right: 0;
    z-index: 1
}

#galeri {
    padding-top: 70px;
    padding-bottom: 80px;
}

#galeri h3 {
    color: #70887B;
    text-align: center;
    font-weight: 700;
}

#galeri img.img-galeri {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
    width: 100%;
    max-width: 343px;
    object-fit: cover;
    border-radius: 20px;
}

#galeri .detail {
    text-align: center;
    border: 1px solid #000;
    max-width: 130px;
    width: 100%;
    margin: 0 auto 20px auto;
    border-radius: 10px;
    padding: 5px;
    font-size: 14px;
}

#galeri .detail a {
    color: #000;
}

@media screen and (max-width:700px) {
    #galeri .detail {
        font-size: 12px;
    }
}

#tentang {
    padding-top: 70px;
    padding-bottom: 50px;
}

#tentang h3 {
    text-align: center;
    font-weight: 700;
    color: #464646
}

#tentang .center img {
    width: 100%;
    max-width: 640px!important;
    height: 358px;
    float: left;
    margin-bottom: 20px;
    margin-right: 10px;
    position: relative;
    top: 50px;
    border-radius: 10px 0 0 10px;
    object-fit: cover;
}

#tentang .bg {
    background-color: #DEE7E2;
    height: 340px;
    border-radius: 0 10px 10px 0;
}

#tentang .center p.judul {
    font-size: 24px;
    margin: 50px 0 5px 15px;
    color: #70887B;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 700;
    padding: 50px 15px 0 15px
}

#tentang .center p.isi {
    font-size: 14px;
    margin: 0 0 5px 15px;
    color: #000;
    display: -webkit-box;
    -webkit-line-clamp: 9;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding: 0 50px 0 15px;
}


/* #tentang .center p.date {
    font-size: 14px;
    margin: 0 0 5px 15px;
    color: #000;
    display: -webkit-box;
    padding: 0 15px 0 15px;
} */


/* #tentang .center {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (1fr)[1];
    grid-template-columns: repeat(1, 1fr);
    justify-items: center;
    max-width: 1280px;
    width: 100%;
    margin: 0 auto 0 auto
} */


/* #tentang .splide__arrow--prev {
    left: -2.5em
}

#tentang .splide__arrow--next {
    right: -2.5em
} */

#tentang .splide__arrow {
    -ms-flex-align: center;
    align-items: center;
    background: #70887B;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    display: -ms-flexbox;
    display: flex;
    height: 2em;
    -ms-flex-pack: center;
    justify-content: center;
    opacity: .7;
    padding: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2em;
    z-index: 1
}

#tentang .splide__arrow svg {
    fill: #fff;
    height: 1.2em;
    width: 1.2em
}

#tentang .splide__track {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

#tentang .splide__pagination {
    bottom: -1.2em;
    left: 0;
    padding: 0 1em;
    position: absolute;
    right: 0;
    z-index: 1
}

@media only screen and (max-width: 1000px) {
    #tentang .center img {
        float: none;
        border-radius: 10px 10px 0 0;
    }
    #tentang .bg {
        background-color: #DEE7E2;
        height: auto;
        border-radius: 0 0 10px 10px;
        padding-top: 10px;
        padding-bottom: 20px;
    }
    #tentang .center p.judul {
        margin-top: 0
    }
}

#footer-home {
    background-color: #70887B;
    padding-bottom: 50px;
    padding-top: 50px;
    overflow: hidden;
}

#footer-home img.ikn-dalam-angka {
    width: 100%;
    max-width: 1920px;
    height: auto;
    /* margin-left: -3%; */
}

#footer-home hr.hr {
    background-color: #fff;
    padding: 2px;
}

#footer-home h4 {
    color: #fff;
    font-size: 18px;
    /* margin-top: 50px; */
}

#footer-home h3 {
    font-weight: 900;
    color: #fff;
    font-size: 38px;
    /* margin-bottom: 50px; */
}

#footer-home h5 {
    font-weight: 500;
    color: #fff;
    font-size: 14px;
}

#footer-home h6 {
    /* margin-top: -50px!important;
    margin-bottom: 50px; */
    color: #fff;
    font-size: 14px;
}

#footer-home .copyright a {
    color: #fff;
}

@media screen and (max-width:1000px) {
    #footer-home h3 {
        font-weight: 900;
        color: #fff;
        font-size: 30px;
        /* margin-bottom: 50px; */
    }
    #footer-home img.ikn-dalam-angka {
        width: 1000px;
        height: auto;
        position: relative;
        left: -50px
        /* margin-left: -3%; */
    }
}

#footer {
    background-color: #70887B;
    border-top: 1px solid #fff;
}

#footer img.ikn-dalam-angka {
    width: 100%;
    max-width: 1920px;
    height: auto;
    /* margin-left: -3%; */
}

#footer img.share {
    width: 100%;
    max-width: 35px;
    height: auto;
    margin: 1px;
}

#footer h2 {
    font-weight: 700;
    color: #fff;
    font-size: 20px;
    /* margin-bottom: 20px; */
}

#footer h5 {
    font-weight: 500;
    color: #fff;
    font-size: 14px;
}

#footer .copyright {
    color: #fff;
    font-size: 14px;
    margin-top: 20px;
}

#footer .copyright a {
    color: #fff;
}

@media screen and (max-width:1000px) {
    #footer h2 {
        font-size: 14px;
    }
    #footer img.share {
        margin: 5px;
    }
    #footer .copyright {
        font-size: 10px;
    }
    #footer .copyright a {
        font-size: 10px;
    }
}

#tentang-ikn-home {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1000px;
    perspective-origin: 50% 50%;
    padding-top: 100px;
    padding-bottom: 20px;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
}

#tentang-ikn-home #background-video {
    height: 100vh;
    width: 100vw;
    object-fit: cover;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
}

#tentang-ikn-home .overlay {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 100%, rgba(255, 255, 255, 0) 100%);
    opacity: .8;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 15% 32px;
    line-height: 1.5;
    text-align: center;
}

#tentang-ikn-home .overlay h1 {
    margin-top: 250px;
    color: #fff;
    letter-spacing: 10px;
    font-size: 18px;
    line-height: 50px;
    position: relative;
    bottom: -50px;
    left: -200px
}

#tentang-ikn-home .overlay p {
    color: #fff;
    font-size: 38px;
    letter-spacing: 5px;
    font-weight: 900;
    line-height: 50px;
    position: relative;
    bottom: -40px;
    left: -330px
}

#tentang-ikn-home .button {
    align-items: center;
    display: flex;
    justify-content: center;
    position: relative;
    bottom: 160px;
    left: -580px
}

#tentang-ikn-home .background {
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 2.2px rgba(0, 0, 0, 0.051), 0 2.3px 5.3px rgba(0, 0, 0, 0.059), 0 4.4px 10px rgba(0, 0, 0, 0.06), 0 7.8px 17.9px rgba(0, 0, 0, 0.059), 0 14.6px 33.4px rgba(0, 0, 0, 0.059), 0 35px 80px rgba(0, 0, 0, 0.07);
    cursor: pointer;
    height: 50px;
    position: absolute;
    width: 50px;
    opacity: .3;
}

#tentang-ikn-home .button:active .background {
    background: #e93c15;
}

#tentang-ikn-home .active .icon {
    transform: rotate(-120deg);
}

#tentang-ikn-home .part {
    background: white;
    height: 100px;
    position: absolute;
    width: 100px;
}

#tentang-ikn-home .active .left {
    clip-path: polygon( 43.77666% 55.85251%, 43.77874% 55.46331%, 43.7795% 55.09177%, 43.77934% 54.74844%, 43.77855% 54.44389%, 43.77741% 54.18863%, 43.77625% 53.99325%, 43.77533% 53.86828%, 43.77495% 53.82429%, 43.77518% 53.55329%, 43.7754% 53.2823%, 43.77563% 53.01131%, 43.77585% 52.74031%, 43.77608% 52.46932%, 43.7763% 52.19832%, 43.77653% 51.92733%, 43.77675% 51.65633%, 43.77653% 51.38533%, 43.7763% 51.11434%, 43.77608% 50.84334%, 43.77585% 50.57235%, 43.77563% 50.30136%, 43.7754% 50.03036%, 43.77518% 49.75936%, 43.77495% 49.48837%, 44.48391% 49.4885%, 45.19287% 49.48865%, 45.90183% 49.48878%, 46.61079% 49.48892%, 47.31975% 49.48906%, 48.0287% 49.4892%, 48.73766% 49.48934%, 49.44662% 49.48948%, 50.72252% 49.48934%, 51.99842% 49.4892%, 53.27432% 49.48906%, 54.55022% 49.48892%, 55.82611% 49.48878%, 57.10201% 49.48865%, 58.3779% 49.4885%, 59.6538% 49.48837%, 59.57598% 49.89151%, 59.31883% 50.28598%, 58.84686% 50.70884%, 58.12456% 51.19714%, 57.11643% 51.78793%, 55.78697% 52.51828%, 54.10066% 53.42522%, 52.02202% 54.54581%, 49.96525% 55.66916%, 48.3319% 56.57212%, 47.06745% 57.27347%, 46.11739% 57.79191%, 45.42719% 58.14619%, 44.94235% 58.35507%, 44.60834% 58.43725%, 44.37066% 58.41149%, 44.15383% 58.27711%, 43.99617% 58.0603%, 43.88847% 57.77578%, 43.82151% 57.43825%, 43.78608% 57.06245%, 43.77304% 56.66309%, 43.773% 56.25486%);
    transition: clip-path 500ms;
}

#tentang-ikn-home .active .right {
    clip-path: polygon( 43.77666% 43.83035%, 43.77874% 44.21955%, 43.7795% 44.59109%, 43.77934% 44.93442%, 43.77855% 45.23898%, 43.77741% 45.49423%, 43.77625% 45.68961%, 43.77533% 45.81458%, 43.77495% 45.85858%, 43.77518% 46.12957%, 43.7754% 46.40056%, 43.77563% 46.67156%, 43.77585% 46.94255%, 43.77608% 47.21355%, 43.7763% 47.48454%, 43.77653% 47.75554%, 43.77675% 48.02654%, 43.77653% 48.29753%, 43.7763% 48.56852%, 43.77608% 48.83952%, 43.77585% 49.11051%, 43.77563% 49.38151%, 43.7754% 49.65251%, 43.77518% 49.9235%, 43.77495% 50.1945%, 44.48391% 50.19436%, 45.19287% 50.19422%, 45.90183% 50.19408%, 46.61079% 50.19394%, 47.31975% 50.1938%, 48.0287% 50.19366%, 48.73766% 50.19353%, 49.44662% 50.19338%, 50.72252% 50.19353%, 51.99842% 50.19366%, 53.27432% 50.1938%, 54.55022% 50.19394%, 55.82611% 50.19408%, 57.10201% 50.19422%, 58.3779% 50.19436%, 59.6538% 50.1945%, 59.57598% 49.79136%, 59.31883% 49.39688%, 58.84686% 48.97402%, 58.12456% 48.48572%, 57.11643% 47.89493%, 55.78697% 47.16458%, 54.10066% 46.25764%, 52.02202% 45.13705%, 49.96525% 44.01371%, 48.3319% 43.11074%, 47.06745% 42.4094%, 46.11739% 41.89096%, 45.42719% 41.53667%, 44.94235% 41.3278%, 44.60834% 41.24561%, 44.37066% 41.27137%, 44.15383% 41.40575%, 43.99617% 41.62256%, 43.88847% 41.90709%, 43.82151% 42.24461%, 43.78608% 42.62041%, 43.77304% 43.01978%, 43.773% 43.428%);
    transition: clip-path 500ms;
}

#tentang-ikn-home .pointer {
    border-radius: 50%;
    cursor: pointer;
    height: 100px;
    position: absolute;
    -webkit-tap-highlight-color: transparent;
    width: 100px;
}

#tentang-ikn-home .icon {
    transform: rotate(-90deg);
    transition: transform 500ms;
    width: 100px;
    height: 100px;
}

#tentang-ikn-home .left {
    clip-path: polygon( 56.42249% 57.01763%, 54.93283% 57.0175%, 53.00511% 57.01738%, 50.83554% 57.01727%, 48.62036% 57.01718%, 46.55585% 57.01709%, 44.83822% 57.01702%, 43.66373% 57.01698%, 43.22863% 57.01696%, 42.86372% 57.01904%, 42.56988% 57.01621%, 42.3402% 56.99486%, 42.16778% 56.94152%, 42.0457% 56.84267%, 41.96705% 56.68478%, 41.92493% 56.45432%, 41.91246% 56.13777%, 41.91258% 55.76282%, 41.9129% 55.37058%, 41.91335% 54.96757%, 41.91387% 54.56032%, 41.91439% 54.15537%, 41.91485% 53.75926%, 41.91517% 53.3785%, 41.91529% 53.01965%, 41.94275% 52.72355%, 42.02117% 52.51653%, 42.14465% 52.38328%, 42.30727% 52.30854%, 42.50308% 52.27699%, 42.72619% 52.27341%, 42.97065% 52.28248%, 43.23056% 52.2889%, 43.94949% 52.28896%, 45.45083% 52.28912%, 47.47445% 52.28932%, 49.76027% 52.28957%, 52.04818% 52.28981%, 54.07805% 52.29003%, 55.5898% 52.29019%, 56.32332% 52.29024%, 56.58221% 52.28816%, 56.83726% 52.28948%, 57.07897% 52.30593%, 57.29794% 52.34898%, 57.48468% 52.43029%, 57.62978% 52.56146%, 57.72375% 52.7541%, 57.75718% 53.01981%, 57.75713% 53.37763%, 57.75699% 53.81831%, 57.75679% 54.31106%, 57.75657% 54.82507%, 57.75635% 55.32958%, 57.75615% 55.79377%, 57.75601% 56.18684%, 57.75596% 56.47801%, 57.7549% 56.50122%, 57.74034% 56.5624%, 57.6955% 56.64887%, 57.60334% 56.748%, 57.44691% 56.84712%, 57.20925% 56.93358%, 56.87342% 56.99471%);
}

#tentang-ikn-home .right {
    clip-path: polygon( 56.42249% 42.44625%, 54.93283% 42.44637%, 53.00511% 42.44649%, 50.83554% 42.4466%, 48.62036% 42.4467%, 46.55585% 42.44679%, 44.83822% 42.44685%, 43.66373% 42.4469%, 43.22863% 42.44691%, 42.86372% 42.44483%, 42.56988% 42.44767%, 42.3402% 42.46902%, 42.16778% 42.52235%, 42.0457% 42.6212%, 41.96705% 42.77909%, 41.92493% 43.00956%, 41.91246% 43.32611%, 41.91258% 43.70105%, 41.9129% 44.0933%, 41.91335% 44.49631%, 41.91387% 44.90355%, 41.91439% 45.3085%, 41.91485% 45.70462%, 41.91517% 46.08537%, 41.91529% 46.44422%, 41.94275% 46.74032%, 42.02117% 46.94735%, 42.14465% 47.0806%, 42.30727% 47.15534%, 42.50308% 47.18688%, 42.72619% 47.19047%, 42.97065% 47.1814%, 43.23056% 47.17497%, 43.94949% 47.17491%, 45.45083% 47.17476%, 47.47445% 47.17455%, 49.76027% 47.1743%, 52.04818% 47.17406%, 54.07805% 47.17384%, 55.5898% 47.17369%, 56.32332% 47.17363%, 56.58221% 47.17571%, 56.83726% 47.17439%, 57.07897% 47.15795%, 57.29794% 47.1149%, 57.48468% 47.03359%, 57.62978% 46.90242%, 57.72375% 46.70977%, 57.75718% 46.44406%, 57.75713% 46.08625%, 57.75699% 45.64557%, 57.75679% 45.15282%, 57.75657% 44.6388%, 57.75635% 44.1343%, 57.75615% 43.6701%, 57.75601% 43.27703%, 57.75596% 42.98586%, 57.7549% 42.96265%, 57.74034% 42.90148%, 57.6955% 42.815%, 57.60334% 42.71587%, 57.44691% 42.61675%, 57.20925% 42.53029%, 56.87342% 42.46916%);
}

@media only screen and (min-width: 390px) and (max-width: 1200px) {
    #tentang-ikn-home .overlay h1 {
        margin-top: 250px;
        color: #fff;
        letter-spacing: 10px;
        font-size: 18px;
        line-height: 50px;
        position: relative;
        bottom: 0;
        left: 0
    }
    #tentang-ikn-home .overlay p {
        color: #fff;
        font-size: 38px;
        letter-spacing: 5px;
        font-weight: 900;
        line-height: 50px;
        position: relative;
        bottom: 0;
        left: 0
    }
    #tentang-ikn-home .button {
        align-items: center;
        display: flex;
        justify-content: center;
        position: relative;
        bottom: 20px;
        left: 0
    }
}

#tentang-ikn-slider img {
    min-height: 100%;
    min-width: 1024px;
    width: 100%;
    height: auto;
}

#tentang-ikn-slider .text-block {
    position: absolute;
    top: 25px;
    right: 70px;
    background: rgba(112, 136, 123, 0.85);
    border-radius: 12px;
    color: white;
    padding: 20px 20px 20px 20px;
}

#tentang-ikn-slider h4 {
    /* padding-bottom: 20px;
    margin-bottom: 20px; */
    max-width: 600px;
}

#tentang-ikn-slider h5 {
    font-size: 20px;
    /* margin-bottom: 20px; */
    max-width: 600px;
}

#tentang-ikn-slider p {
    font-size: 14px;
    line-height: 1;
    max-width: 600px;
}

#tentang-ikn-slider .splide__arrow {
    -ms-flex-align: center;
    align-items: center;
    background: #70887B;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    display: -ms-flexbox;
    display: flex;
    height: 2em;
    -ms-flex-pack: center;
    justify-content: center;
    opacity: .7;
    padding: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2em;
    z-index: 1
}

#tentang-ikn-slider .splide__arrow svg {
    fill: #fff;
    height: 1.2em;
    width: 1.2em
}


/* #tentang-ikn-slider p.judul {
    display: flex;
    justify-content: flex-start;
} */

@media only screen and (max-width: 1000px) {
    #tentang-ikn-slider img {
        min-height: 100%;
        min-width: 1024px;
        width: 100%;
        height: 600px;
        object-fit: cover;
    }
    #tentang-ikn-slider .text-block {
        position: absolute;
        top: 50px;
        right: 20px;
        background: rgba(112, 136, 123, 0.85);
        border-radius: 12px;
        color: white;
        padding: 20px;
        margin-left: 25px;
    }
}

#tentang-ikn-kota {
    padding-top: 70px;
    padding-bottom: 70px;
}

#tentang-ikn-kota img {
    display: block;
    margin: 0 auto;
    max-width: 280px;
    height: auto;
    width: 100%;
    object-fit: cover;
    border-radius: 20px 20px 0 0;
}

#tentang-ikn-kota .border {
    background-color: #E4E9E6;
    padding: 15px;
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
    position: relative;
    left: 0;
    bottom: 15px;
    border-radius: 0 0 10px 10px;
    height: 250px;
}

#tentang-ikn-kota h3 {
    color: #70887B;
    font-size: 22px;
    font-weight: 700;
}

#tentang-ikn-kota p {
    font-size: 16px;
}


/* @media screen and (min-width:1000px) and (max-width:1100px) {
    #tentang-ikn-kota .border {
        background-color: #E4E9E6;
        padding: 15px;
        width: 100%;
        max-width: 165px;
        margin: 0 auto;
        position: relative;
        left: 0;
        bottom: 15px;
        border-radius: 0 0 10px 10px;
        height: 250px;
    }
} */


/* @media only screen and (width: 1280px) {
    #tentang-ikn-kota img {
        padding: 15px;
        display: block;
        margin: 0 auto;
        max-width: 280px;
        height: auto;
        width: 100%;
        object-fit: cover;
    }
    #tentang-ikn-kota .border {
        background-color: #E4E9E6;
        padding: 15px;
        width: 100%;
        max-width: 225px;
        margin: 0 auto;
        position: relative;
        left: 0;
        bottom: 15px;
        border-radius: 0 0 10px 10px;
    }
} */

#tentang-ikn-menuju-2045 {
    background-color: #70887B;
}

#tentang-ikn-menuju-2045 img {
    /* Set rules to fill background */
    /* min-height: 100%; */
    min-width: 1088px;
    /* Set up proportionate scaling */
    width: 100%;
    height: 717px;
    object-fit: cover;
}

#tentang-ikn-menuju-2045 .text-block {
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: black;
    color: white;
    padding: 20px;
    max-width: 450px;
}

#tentang-ikn-menuju-2045 h3 {
    color: #fff;
    font-size: 30px;
    text-align: center;
    padding-top: 150px;
    font-weight: 700;
}

#tentang-ikn-menuju-2045 p.menuju-2045 {
    color: #fff;
    font-size: 18px;
    text-align: left;
    padding-left: 45px;
    padding-right: 20px;
}

#tentang-ikn-menuju-2045 .splide__arrow {
    -ms-flex-align: center;
    align-items: center;
    background: #70887B;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    display: -ms-flexbox;
    display: flex;
    height: 2em;
    -ms-flex-pack: center;
    justify-content: center;
    opacity: .7;
    padding: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2em;
    z-index: 1
}

#tentang-ikn-menuju-2045 .splide__arrow svg {
    fill: #fff;
    height: 1.2em;
    width: 1.2em
}

@media screen and (max-width:1000px) {
    #tentang-ikn-menuju-2045 h3 {
        color: #fff;
        font-size: 25px;
        text-align: center;
        padding-top: 50px;
        font-weight: 700;
    }
    #tentang-ikn-menuju-2045 p.menuju-2045 {
        font-size: 14px;
    }
    #tentang-ikn-menuju-2045 .row {
        --bs-gutter-x: .1rem;
        --bs-gutter-y: 0;
        display: flex;
        flex-wrap: wrap;
        margin-top: calc(-1 * var(--bs-gutter-y));
        margin-right: calc(-.5 * var(--bs-gutter-x));
        margin-left: calc(-.5 * var(--bs-gutter-x));
    }
    #tentang-ikn-menuju-2045 .text-block {
        position: absolute;
        bottom: 20px;
        right: 30px;
        background-color: black;
        color: white;
        padding: 20px;
        max-width: 350px;
    }
}

#regulasi {
    padding-top: 70px;
    padding-bottom: 70px;
}

#regulasi h3 {
    color: #70887B;
    font-weight: 700;
    text-align: center;
}

#regulasi .border {
    padding: 50px 20px;
    background-color: #70887B;
    margin-bottom: 10px;
    border-radius: 10px;
}

#regulasi p.isi {
    color: #fff
}

#regulasi img {
    float: right;
    padding: 5px;
}

#regulasi img:hover {
    background-color: #000;
    padding: 5px;
    border-radius: 10px;
}

#publikasi-search {
    min-height: 50vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
}

#publikasi-search h3 {
    text-align: center;
    color: #000;
}

#publikasi-search .input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3),
.input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu) {
    border-radius: 50px 0 0 50px;
}

#publikasi-search .input-group-text {
    border-radius: 0 50px 50px 0;
}


/* #publikasi-infografis {
    padding-top: 70px;
    padding-bottom: 70px;
} */

#publikasi-infografis h5 {
    text-align: center;
    color: #000;
    margin-bottom: 30px;
    font-weight: 700;
}

#publikasi-infografis img.infografis {
    width: 100%;
    max-width: 368px;
    height: auto;
    display: block;
    margin: 0 auto 20px auto;
    border-radius: 15px;
    object-fit: cover;
}

#publikasi-infografis img.share {
    width: 100%;
    max-width: 25px;
    height: auto;
    margin: 0 auto;
    display: block;
    position: relative;
    left: -150px;
}

#publikasi-infografis img.share:hover {
    background-color: #ededed;
    border-radius: 5px;
}

#publikasi-infografis p.judul {
    color: #70887B;
    font-weight: 700;
    max-width: 320px;
    width: 100%;
    margin: 0 auto;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#publikasi-infografis p.date {
    color: #626262;
    max-width: 320px;
    width: 100%;
    margin: 10px auto;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 14px;
}

@media screen and (max-width:1100px) {
    #publikasi-infografis img.share {
        width: 100%;
        max-width: 25px;
        height: auto;
        margin: 0 auto;
        display: inline;
        position: relative;
        left: 0;
    }
}

#publikasi-perencanaan {
    padding: 70px 0;
}

#publikasi-perencanaan h3 {
    text-align: center;
    color: #70887B;
}

#publikasi-perencanaan h6 {
    text-align: center;
    color: #70887B;
    max-width: 700px;
    width: 100%;
    margin: 0 auto;
    font-size: 16px;
}

#publikasi-perencanaan img {
    width: 100%;
    max-width: 81px;
    height: auto;
    margin: 10px auto;
    display: block;
}

#publikasi-perencanaan p.judul {
    color: #70887B;
    font-weight: 700;
    max-width: 320px;
    width: 100%;
    margin: 0 auto;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#publikasi-perencanaan p.date {
    color: #626262;
    max-width: 320px;
    width: 100%;
    margin: 10px auto;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 14px;
}

@media screen and (max-width:1100px) {
    #publikasi-perencanaan img {
        float: left;
    }
    #publikasi-perencanaan h6 {
        font-size: 12px;
        max-width: 250px;
    }
}

#cari-infografis {
    padding-bottom: 70px;
}

#cari-infografis img {
    float: left;
    width: 100%;
    max-width: 150px;
    height: auto;
    border-radius: 12px;
    margin-right: 15px;
    object-fit: cover;
}

#cari-infografis p.judul {
    max-width: 500px;
    margin-top: 10px;
    color: #70887B;
    font-weight: 700;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#cari-infografis p.selengkapnya {
    max-width: 100px;
    margin-top: 10px;
    color: #70887B;
    display: -webkit-box;
    /* -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden; */
    border: 1px solid #70887B;
    border-radius: 20px;
    padding: 8px;
    font-size: 12px;
}

#cari-infografis p.selengkapnya:hover {
    background-color: rgb(239, 239, 239);
}

@media screen and (max-width:1100px) {
    #cari-infografis img {
        float: left;
        width: 100%;
        max-width: 100px;
        height: auto;
        border-radius: 12px;
        margin-right: 15px;
    }
}

#detail-infografis {
    padding: 150px 0 70px 0;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

#detail-infografis img {
    width: 100%;
    max-width: 811px;
    height: auto;
    display: block;
    margin: 0 auto;
}

#detail-infografis h5 {
    text-align: center;
}

#detail-infografis p.date {
    text-align: center;
}

#detail-infografis p.unduh {
    text-align: center;
    background-color: #70887B;
    padding: 20px;
    color: #fff;
    max-width: 200px;
    margin: 30px auto;
    border-radius: 50px;
    font-weight: 700;
}

#detail-perencanaan {
    padding: 150px 0 70px 0;
}

#detail-perencanaan h4 {
    text-align: center;
    color: #70887B;
    font-weight: 700
}

#detail-perencanaan a p.cari {
    text-align: center;
    color: #fff;
    background-color: #70887B;
    padding: 12px;
    border-radius: 12px;
}

#detail-perencanaan img {
    max-width: 280px;
    width: 100%;
    height: auto;
    float: left;
    object-fit: cover;
    margin-right: 15px;
}

#detail-perencanaan p.judul {
    max-width: 700px;
    margin-top: 10px;
    color: #464646;
    font-weight: 700;
    font-size: 25px;
    display: -webkit-box;
}

#detail-perencanaan p.date {
    max-width: 700px;
    margin-top: 10px;
    color: #9d9d9d;
    font-size: 14px;
    display: -webkit-box;
}

#detail-perencanaan p.unduh {
    max-width: 100px;
    margin-top: 10px;
    color: #70887B;
    display: -webkit-box;
    /* -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden; */
    border: 1px solid #70887B;
    border-radius: 20px;
    padding: 8px 8px 8px 15px;
    font-size: 12px;
}

#detail-perencanaan p.unduh:hover {
    background-color: rgb(239, 239, 239);
}

@media screen and (max-width:1100px) {
    #detail-perencanaan img {
        max-width: 150px;
        width: 100%;
        height: auto;
        float: left;
        object-fit: cover;
        margin-right: 15px;
    }
    #detail-perencanaan p.judul {
        max-width: 700px;
        margin-top: 10px;
        color: #464646;
        font-weight: 700;
        font-size: 14px;
        display: -webkit-box;
    }
}

.pagination {
    display: inline-block;
    width: 100%;
    margin: 0 auto;
    max-width: 250px;
}

.pagination a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
}

.pagination a.active {
    background-color: #70887B;
    color: white;
    border-radius: 5px;
}

.pagination a:hover:not(.active) {
    background-color: #ddd;
    border-radius: 5px;
}

#pertanyaan {
    padding-top: 70px;
    padding-bottom: 70px;
    background-color: #DAE4DF;
}

#pertanyaan h3 {
    color: #3F5B5C;
    text-align: center;
    font-weight: 700;
}

#pertanyaan .btn-primary {
    background-color: #3F5B5C;
    width: 200px;
    padding: 20px 0;
    border-radius: 50px;
}

#pertanyaan .form-label {
    color: #70887B
}

#ppid {
    background: url("../images/ppid/header.png");
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1000px;
    perspective-origin: 50% 50%;
    padding-top: 100px;
    padding-bottom: 20px;
    background-position: center;
    /* background-attachment: fixed; */
    background-size: cover;
}

#ppid .overlay {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 100%, rgba(255, 255, 255, 0) 100%);
    opacity: .8;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 15% 32px;
    line-height: 1.5;
    text-align: center;
    z-index: -99999;
}

#ppid h3 {
    text-align: center;
    color: #fff;
    font-weight: 700;
}

#ppid h4 {
    text-align: center;
    color: #fff;
    font-weight: 300;
    font-size: 16px;
    max-width: 700px;
    width: 100%;
    margin: 0 auto;
}

@media screen and (max-width:700px) {
    #ppid h4 {
        font-size: 12px;
        max-width: 350px;
    }
}

#ppid-tugas {
    padding: 70px 0
}

#ppid-tugas img {
    width: 100%;
    max-width: 598px;
    height: auto;
    margin: 0 auto;
    display: block;
    border-radius: 12px;
    object-fit: cover;
}

#ppid-tugas h5 {
    color: #3F5B5C;
    font-weight: 700;
}

#ppid-tugas p {
    color: #626262
}

#ppid-visimisi {
    padding: 70px 0;
    background-color: #3F5B5C;
}

#ppid-visimisi h3 {
    text-align: center;
    color: #C5E0D1;
    font-weight: 700;
}

#ppid-visimisi h5 {
    color: #C5E0D1;
    font-weight: 700;
}

#ppid-visimisi p {
    color: #C5E0D1
}

#ppid-struktur {
    padding: 70px 0
}

#ppid-struktur h3 {
    text-align: center;
    font-weight: 700;
    color: #3F5B5C;
}

#ppid-struktur img {
    max-width: 900px;
    width: 100%;
    height: auto;
    margin: 0 auto;
    display: block;
}

#ppid-regulasi {
    padding: 70px 0;
    background-color: #3F5B5C;
}

#ppid-regulasi h3 {
    text-align: center;
    color: #C5E0D1;
    font-weight: 700;
}

#ppid-regulasi h5 {
    text-align: center;
    color: #FFFFFF;
}

#ppid-regulasi ol {
    color: #C5E0D1;
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
    line-height: 2;
}

@media screen and (max-width:700px) {
    #ppid-regulasi ol {
        font-size: 12px;
    }
}

#ppid-sop {
    padding: 70px 0
}

#ppid-sop h3 {
    text-align: center;
    color: #3F5B5C;
    font-weight: 700;
}

#ppid-sop h5 {
    color: #fff;
    background-color: #3F5B5C;
    font-weight: 700;
    padding: 20px 40px;
    border-radius: 25px;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto
}

#ppid-sop p {
    color: #626262;
    max-width: 1099px;
    width: 100%;
    margin: 20px auto
}

#ppid-sop .read-more-state {
    display: none;
}

#ppid-sop .read-more-target {
    opacity: 0;
    max-height: 0;
    font-size: 0;
    transition: .25s ease;
}

#ppid-sop .read-more-state:checked~.read-more-wrap .read-more-target {
    opacity: 1;
    font-size: inherit;
    max-height: 999em;
}

#ppid-sop .read-more-state~.read-more-trigger:before {
    content: 'Lebih Detail';
    font-size: 12px;
}

#ppid-sop .read-more-state:checked~.read-more-trigger:before {
    content: 'Lebih Sedikit';
    font-size: 12px;
}

#ppid-sop .read-more-trigger {
    cursor: pointer;
    display: inline-block;
    padding: 0 .5em;
    color: #666;
    font-size: .9em;
    line-height: 2;
    border: 1px solid #ddd;
    border-radius: .25em;
    width: 100%;
    max-width: 150px;
    margin: 0 auto;
    text-align: center;
}

#ppid-sop .bg {
    max-width: 1099px;
    width: 100%;
    margin: 20px auto
}

#ppid-informasi-publik {
    padding: 150px 0 70px 0;
}

#ppid-informasi-publik h4 {
    color: #3F5B5C;
    text-align: center;
    font-weight: 700;
}

#ppid-informasi-publik h5 {
    color: #3F5B5C;
    text-align: center;
    margin: 50px 0;
}

#ppid-informasi-publik p {
    color: #464646
}

#ppid-informasi-publik .show {
    color: #3F5B5C;
    border: 1px solid #3F5B5C;
    padding: 10px;
    border-radius: 20px;
    width: 150px;
    text-align: center;
}

#ppid-informasi-publik .bg {
    display: flex;
    justify-content: space-between;
    border-top: 1px dotted #000;
    padding-top: 40px;
    padding-bottom: 20px;
}

#ppid-informasi-publik .bg:last-child {
    border-bottom: 1px dotted #000;
}

#ppid-informasi-publik2 {
    padding: 150px 0 70px 0;
    background-color: #D6E2DC;
}

#ppid-informasi-publik2 h4 {
    color: #3F5B5C;
    text-align: center;
    font-weight: 700;
}

#ppid-informasi-publik2 h5 {
    color: #3F5B5C;
    text-align: center;
    margin: 50px 0;
}

#ppid-informasi-publik2 p {
    color: #464646
}

#ppid-informasi-publik2 .show {
    color: #3F5B5C;
    border: 1px solid #3F5B5C;
    padding: 10px;
    border-radius: 20px;
    width: 150px;
    text-align: center;
}

#ppid-informasi-publik2 .bg {
    display: flex;
    justify-content: space-between;
    border-top: 1px dotted #000;
    padding-top: 40px;
    padding-bottom: 20px;
}

#ppid-informasi-publik2 .bg:last-child {
    border-bottom: 1px dotted #000;
}

#ppid-tamu {
    padding: 170px 0 50px 0;
}

#ppid-tamu h4 {
    text-align: center;
    color: #3F5B5C;
    font-weight: 700;
}

#ppid-tamu h6 {
    text-align: center;
    color: #3F5B5C;
    margin-top: 50px;
    margin-bottom: 50px;
}

#ppid-tamu ol {
    color: #464646;
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    line-height: 2;
    font-size: 16px;
}

@media screen and (max-width:700px) {
    #ppid-tamu ol {
        font-size: 12px;
    }
}

#ppid-laporan {
    padding: 170px 0 50px 0;
}

#ppid-laporan h4 {
    color: #3F5B5C;
    text-align: center;
    font-weight: 700;
    margin-top: 50px;
}

#ppid-laporan .tahun {
    background-color: #3F5B5C;
    padding: 10px;
    color: #fff;
    border-radius: 20px;
    max-width: 160px;
    text-align: center;
    width: 100%;
    margin: 50px auto;
}

#ppid-laporan img.laporan {
    width: 100%;
    max-width: 1200px;
    height: auto;
    margin: 50px auto 0 auto;
    display: block;
}

#ppid-laporan img.layanan {
    width: 100%;
    max-width: 280px;
    height: auto;
    margin: 50px auto 0 auto;
    display: block;
}

#ppid-laporan p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 230px;
    color: #626262;
    font-weight: 700;
    margin-top: 20px;
    margin-left: 20px;
}

#tokoh img.tokoh-img {
    width: 100%;
}

#tetap-terhubung-home {
    background: url("../images/tetap-terhubung/header.png");
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1000px;
    perspective-origin: 50% 50%;
    padding-top: 100px;
    padding-bottom: 20px;
    background-position: center;
    /* background-attachment: fixed; */
    background-size: cover;
}

#tetap-terhubung-home .overlay {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 100%, rgba(255, 255, 255, 0) 100%);
    opacity: .8;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 15% 32px;
    line-height: 1.5;
    text-align: center;
    z-index: -99999;
}

#tetap-terhubung-home h3 {
    color: #fff;
    text-align: center;
    font-size: 35px;
    font-weight: 700;
}

#tetap-terhubung-home h4 {
    color: #fff;
    text-align: center;
    font-size: 18px;
    font-weight: 300;
}

#regulasi .accordion {
    margin: auto;
    max-width: 400px;
}

#regulasi .accordion input {
    display: none;
}

#regulasi .box {
    position: relative;
    background: #70887B;
    height: 120px;
    transition: all .15s ease-in-out;
    margin-bottom: 20px;
    color: #fff;
    border-radius: 10px;
}

#regulasi .box::before {
    content: '';
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    pointer-events: none;
    /* box-shadow: 0 -1px 0 #e5e5e5, 0 0 2px rgba(0, 0, 0, .12), 0 2px 4px rgba(0, 0, 0, .24); */
}

#regulasi header.box {
    background: #00BCD4;
    z-index: 100;
    cursor: initial;
    box-shadow: 0 -1px 0 #e5e5e5, 0 0 2px -2px rgba(0, 0, 0, .12), 0 2px 4px -4px rgba(0, 0, 0, .24);
}

#regulasi header .box-title {
    margin: 0;
    font-weight: normal;
    font-size: 16pt;
    color: white;
    cursor: initial;
}

#regulasi .box-title {
    width: calc(100% - 40px);
    height: 64px;
    line-height: 64px;
    padding: 0 20px;
    display: inline-block;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#regulasi .box-content {
    width: 100%;
    padding: 30px 20px;
    font-size: 11pt;
    color: #fff;
    display: none;
}

#regulasi .box-close {
    position: absolute;
    height: 64px;
    width: 100%;
    top: 0;
    left: 0;
    cursor: pointer;
    display: none;
}

#regulasi input:checked+.box {
    height: 500px;
    margin: 16px 0;
    /* box-shadow: 0 0 6px rgba(0, 0, 0, .16), 0 6px 12px rgba(0, 0, 0, .32); */
    overflow: auto;
}


/* #regulasi input:checked+.box .box-title {
    border-bottom: 1px solid rgba(0, 0, 0, .18);
} */

#regulasi input:checked+.box .box-content,
#regulasi input:checked+.box .box-close {
    display: inline-block;
}

#regulasi .arrows section .box-title {
    padding-left: 20px;
    padding-top: 20px;
    width: 100%;
    line-height: 1.5;
    font-weight: 700;
    letter-spacing: 1px;
}

#regulasi .arrows section .box-title:before {
    position: absolute;
    display: block;
    content: '\203a';
    font-size: 18pt;
    left: 320px;
    top: 70px;
    transition: transform .15s ease-in-out;
    /* color: rgba(0, 0, 0, .54); */
}

#regulasi input:checked+section.box .box-title:before {
    transform: rotate(90deg);
}

#karir {
    text-align: center;
    padding: 150px 0 70px 0;
}

#karir h5 {
    text-align: center;
    font-weight: 700;
    margin-bottom: 50px;
}

#karir .bg {
    background-color: rgba(112, 136, 123, 1);
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    padding: 20px;
    border-radius: 20px;
}

#karir p {
    color: #fff;
    text-align: left;
}

#karir ul {
    text-align: left;
    color: #fff;
    font-size: 16px;
}

#karir .nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    color: #fff;
    background-color: rgba(112, 136, 123, 1);
    border-radius: 20px;
}

#karir .nav-link {
    color: #000
}

@media screen and (max-width:1100px) {
    #karir ul {
        font-size: 12px;
    }
}

#detail-news {
    padding: 150px 0 70px 0;
}

#detail-news h4 {
    color: #676889;
    font-size: 20px;
}

#detail-news h3 {
    color: #70887B;
    font-size: 24px;
    font-weight: 700;
}

#detail-news img.isi {
    width: 100%;
    max-width: 775px;
    height: auto;
    margin: 0 auto;
    object-fit: cover;
}

#detail-news figcaption {
    color: #878787;
    font-size: 14px;
    margin: 10px 0
}

#detail-news p.headline {
    font-size: 12px;
    background-color: #D9D9D9;
    padding: 10px;
    border-left: 5px solid #3F5B5C;
}

#detail-news p.date {
    color: #878787;
    font-size: 14px;
}

#detail-news a p.link {
    color: #464646;
    background-color: #D9D9D9;
    font-size: 12px;
    padding: 10px;
    border-radius: 10px;
}

#detail-news .tag {
    display: flex;
    flex-wrap: wrap;
}

#detail-news .tag p {
    border: 1px solid #B3B3B3;
    padding: 10px;
    margin-right: 15px;
    border-radius: 10px;
    font-size: 12px;
    color: #000;
}

#detail-news .header {
    color: #fff;
    position: relative;
    bottom: 32px;
    left: 20px;
    font-weight: 700;
    width: 10%;
}

#detail-news img.head {
    width: 100%;
    max-width: 123px;
    height: auto;
    margin: 0 auto;
    object-fit: cover;
}

#detail-news img.side {
    width: 100%;
    max-width: 123px;
    height: auto;
    margin-right: 15px;
    object-fit: cover;
    float: left;
}

#detail-news p.side {
    color: #70887B;
    font-weight: 700;
    margin-bottom: 5px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 200px;
}

#detail-news p.side-date {
    color: #9D9D9D;
    font-size: 11px;
}

#detail-news img.side-video {
    width: 100%;
    max-width: 351px;
    height: auto;
    margin: 0 auto;
    border-radius: 10px;
}

#detail-news img.play {
    width: 100%;
    max-width: 54px;
    height: auto;
    margin-right: 15px;
    border-radius: 10px;
    float: left;
}

#detail-news p.video {
    color: #fff!important;
    text-align: left;
    padding-right: 15px;
    max-width: 200px;
    font-weight: 700;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#detail-news .text-block {
    position: relative;
    bottom: 110px;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 0 0 10px 10px;
    max-width: 350px;
}

#detail-news .foto {
    margin-top: -60px;
    position: relative;
    left: -90px
}

#detail-news .head-foto {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (2fr)[1];
    grid-template-columns: repeat(2, 2fr);
    justify-items: center;
    max-width: 500px;
    width: 100%;
    margin: 0 auto 0 auto
}

#detail-news img.img-foto {
    width: 100%;
    max-width: 169px;
    margin: 10px auto;
    display: block;
    height: auto;
}

@media screen and (max-width:600px) {
    #detail-news p.date {
        font-size: 11px;
    }
    #detail-news img.side {
        width: 100%;
        max-width: 90px;
        height: auto;
        margin-right: 15px;
        object-fit: cover;
        float: left;
        font-size: 12px;
    }
    #detail-news p.side {
        color: #70887B;
        font-weight: 700;
        margin-bottom: 5px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        max-width: 100%;
        font-size: 12px;
    }
}

#detail-news .row {
    display: flex;
}


/* Create three equal columns that sits next to each other */

#detail-news .column {
    flex: 33.33%;
    padding: 5px;
}