/*
Theme Name: WP-Kemitraan based on BlankSlate
Theme URI: https://github.com/tidythemes/blankslate
Author: TidyThemes
Author URI: https://github.com/tidythemes
Description: Donations: https://calmestghost.com/donate. BlankSlate is the definitive WordPress boilerplate starter theme. We've carefully constructed the most clean and minimalist theme possible for designers and developers to use as a base to build websites for clients or to build completely custom themes from scratch. Clean, simple, unstyled, semi-minified, unformatted, and valid code, SEO-friendly, jQuery-enabled, no programmer comments, standardized and as white label as possible, and most importantly, the CSS is reset for cross-browser-compatability and no intrusive visual CSS styles have been added whatsoever. A perfect skeleton theme. For support and suggestions, go to: https://github.com/tidythemes/blankslate/issues. Thank you.
Tags: accessibility-ready, one-column, two-columns, custom-menu, featured-images, microformats, sticky-post, threaded-comments, translation-ready
Version: 9999
Requires at least: 5.2
Tested up to: 6.1
Requires PHP: 7.0
License: GNU General Public License v3 or Later
License URI: https://www.gnu.org/licenses/gpl.html
Text Domain: blankslate

BlankSlate WordPress Theme © 2011-2023 TidyThemes
BlankSlate is distributed under the terms of the GNU GPL
*/@charset "UTF-8";
:root {
    --red: #e22422;
    --red-hover: rgba(226, 36, 34, 0.5);
    --gray: #505050;
    --light-gray: #f6f6f6;
}
*:where(:not(html, iframe, canvas, img, svg, video, audio, sup, input):not(svg *, symbol *)) {
    all: unset;
    display: revert;
}
*,
*:before,
*:after {
    box-sizing: border-box;
}
a,
button {
    cursor: revert;
}
ol,
ul,
menu {
    list-style: none;
}
img {
    max-inline-size: 100%;
    max-block-size: 100%;
}
table {
    border-collapse: collapse;
}
input,
textarea {
    -webkit-user-select: auto;
}
textarea {
    white-space: revert;
}
meter {
    -webkit-appearance: revert;
    appearance: revert;
}
:where(pre) {
    all: revert;
}
::placeholder {
    color: unset;
}
::marker {
    content: initial;
}
:where([hidden]) {
    display: none;
}
:where([contenteditable]:not([contenteditable="false"])) {
    -moz-user-modify: read-write;
    -webkit-user-modify: read-write;
    overflow-wrap: break-word;
    -webkit-line-break: after-white-space;
    -webkit-user-select: auto;
}
:where([draggable="true"]) {
    -webkit-user-drag: element;
}
:where(dialog:modal) {
    all: revert;
}
strong {
    font-weight: 700;
}
* {
    box-sizing: border-box;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Noto Sans, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    font-size: 16px;
    color: var(--gray);
    overflow-x: hidden;
}
body main {
    overflow-x: hidden;
}
.wrapper {
    max-width: 1280px;
    margin: 0 auto;
    position: relative;
}
.button {
    font-weight: 700;
    font-size: 14px;
    line-height: 24px;
    color: #fff;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    background: var(--red);
    padding: 20px 40px;
    border-radius: 8px;
    display: inline-block;
    cursor: pointer;
    text-align: center;
    border: 1px solid var(--red);
}
.button.outline {
    background: white;
    color: var(--red);
}
.button.small {
    font-size: 12px;
    min-width: 168px;
    line-height: 1;
    padding: 16px 40px;
}
@media only screen and (max-width: 720px) {
    .button.small {
        padding: 8px 20px;
        min-width: auto;
    }
}
.button.download {
    background-color: #21a600;
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
    line-height: 24px;
    text-align: center;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #fff;
    line-height: 60px;
    padding: 0 0 0 32px;
    display: flex;
    align-items: center;
    overflow: hidden;
    gap: 24px;
}
@media only screen and (max-width: 720px) {
    .button.download {
        gap: 12px;
        padding-left: 12px;
        line-height: 32px;
        letter-spacing: 0;
    }
}
.button.download > span {
    display: flex;
    background: var(--gray);
    width: 60px;
    height: 60px;
    align-items: center;
    justify-content: center;
}
@media only screen and (max-width: 720px) {
    .button.download > span {
        width: 32px;
        height: 32px;
    }
    .button.download > span > img {
        width: 14px;
        height: 14px;
    }
}
@media only screen and (max-width: 720px) {
    .button {
        font-size: 10px;
        line-height: 12px;
        letter-spacing: 0.04em;
        padding: 8px 12px;
        border-radius: 4px;
    }
}
.breadcumbs {
    padding: 20px;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.02em;
}
.breadcumbs.sticky {
    position: absolute;
    color: #fff;
}
.section-title {
    font-weight: 700;
    font-size: 46px;
    line-height: 42px;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--red);
    text-align: center;
    margin-bottom: 40px;
}
@media only screen and (max-width: 720px) {
    .section-title {
        font-size: 20px;
        line-height: 29px;
        margin-bottom: 36px;
    }
}
.section-title span {
    color: var(--gray);
    margin-right: 8px;
}
.section-title.left {
    text-align: left;
}
main > .hero {
    height: 400px;
}
main > .hero > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media only screen and (max-width: 720px) {
    main > .hero {
        height: 200px;
    }
}
main > .menu {
    background: var(--light-gray);
}
@media only screen and (max-width: 720px) {
    main > .menu {
        background: none;
        padding: 24px;
    }
}
main > .menu > ul {
    display: flex;
    justify-content: center;
}
@media only screen and (max-width: 720px) {
    main > .menu > ul {
        display: none;
    }
}
main > .menu > ul li a {
    display: block;
    padding: 20px 30px;
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    color: var(--gray);
}
main > .menu > ul li a:hover,
main > .menu > ul li a.current {
    color: #fff;
    background-color: var(--red);
}
@media only screen and (max-width: 720px) {
    main > .menu > ul li a {
        border-radius: 4px;
        background: #e1e1e1;
        margin-bottom: 4px;
        font-weight: 400;
        padding: 8px 12px;
        font-size: 14px;
    }
}
main > .menu .menu-current {
    display: none;
}
@media only screen and (max-width: 720px) {
    main > .menu .menu-current {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 12px;
        border-radius: 4px;
        border: 1px solid #7c7c7c;
        font-size: 14px;
        line-height: 20px;
        margin-bottom: 12px;
    }
    main > .menu .menu-current img {
        width: 16px;
    }
}
main > .menu #menu-toggle:checked ~ ul {
    display: block;
}
main > .menu #menu-toggle:checked + label > img {
    transform: rotate(-180deg);
}
.modal {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    display: none;
    z-index: 5;
}
.modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal > .overlay {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background: rgba(151, 151, 151, 0.65);
}
.modal > .content {
    position: relative;
    z-index: 55;
}
.accordion {
    max-width: 960px;
    margin: 0 auto;
}
@media only screen and (max-width: 720px) {
    .accordion > ul {
        padding: 22px;
    }
}
.accordion > ul li {
    border-bottom: 1px solid var(--gray);
    overflow: hidden;
    padding: 16px 0;
}
.accordion > ul li .title {
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 44px;
    cursor: pointer;
}
@media only screen and (max-width: 720px) {
    .accordion > ul li .title {
        font-size: 12px;
        line-height: 1.25;
    }
}
.accordion > ul li .content {
    height: 0;
    line-height: 24px;
    visibility: hidden;
}
@media only screen and (max-width: 720px) {
    .accordion > ul li .content {
        font-size: 12px;
        line-height: 1.25;
    }
}
.accordion > ul li.active .content {
    height: auto;
    margin-top: 8px;
    visibility: visible;
}
.options {
    background-color: var(--light-gray);
    display: flex;
    position: relative;
    border-radius: 6px;
}
@media only screen and (max-width: 720px) {
    .options {
        background: none;
        border: 1px solid #7c7c7c;
        max-width: 260px;
        margin: 0 auto;
    }
}
.options input[type="checkbox"]:checked ~ ul {
    display: block;
}
.options input[type="checkbox"]:checked + label > span:last-of-type img {
    transform: rotate(0);
}
.options label {
    display: flex;
    width: 100%;
}
.options label > span {
    cursor: pointer;
}
.options label > span:first-of-type {
    flex-grow: 1;
    padding: 16px 22px;
}
@media only screen and (max-width: 720px) {
    .options label > span:first-of-type {
        font-size: 12px;
        padding: 8px 12px;
    }
}
.options label > span:last-of-type {
    background-color: var(--red);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 6px 6px 0;
    width: 50px;
}
@media only screen and (max-width: 720px) {
    .options label > span:last-of-type {
        width: 16px;
        background-color: transparent;
        padding-right: 8px;
    }
}
.options label > span:last-of-type > img {
    transform: rotate(180deg);
}
@media only screen and (max-width: 720px) {
    .options label > span:last-of-type > img {
        width: 8px;
        height: 8px;
        filter: invert(100%);
    }
}
.options > input[type="checkbox"] {
    display: none;
}
.options > ul {
    position: absolute;
    display: none;
    top: 50px;
    padding: 8px 0;
    width: 100%;
    z-index: 5;
}
@media only screen and (max-width: 720px) {
    .options > ul {
        top: 32px;
    }
}
.options > ul li > a {
    display: block;
    background: #e1e1e1;
    padding: 16px 22px;
    margin-bottom: 2px;
    border-radius: 6px;
    cursor: pointer;
}
@media only screen and (max-width: 720px) {
    .options > ul li > a {
        font-size: 12px;
        padding: 8px 12px;
    }
}
.options > ul li > a:hover {
    background-color: var(--red);
    color: #fff;
}
ol {
    list-style: decimal;
    padding-left: 1.1em;
}
.see-more {
    margin-top: 100px;
    text-align: center;
    margin-bottom: 90px;
}
.see-more > div {
    margin-top: 20px;
}
@media only screen and (max-width: 720px) {
    .see-more {
        margin: 40px 0;
    }
}
.hidden {
    display: none;
}
.pagination {
    display: flex;
    justify-content: center;
    padding: 80px 0;
}
.pagination .page-numbers {
    display: inline-block;
    padding: 8px 12px;
}
.pagination .page-numbers.current {
    background: var(--red);
    color: #fff;
    border-radius: 2px;
}
.people-detail {
    position: relative;
    margin: 60px 0;
    padding: 60px 0 80px;
}
@media only screen and (max-width: 720px) {
    .people-detail {
        margin: 20px 0;
        padding: 20px 0;
    }
}
.people-detail > img {
    top: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}
.people-detail > h3 {
    font-weight: 700;
    font-size: 22px;
    line-height: 24px;
    text-align: center;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 40px;
}
.people-detail > .wrapper {
    display: flex;
    gap: 30px;
    max-width: 1190px;
}
@media only screen and (max-width: 720px) {
    .people-detail > .wrapper {
        flex-direction: column;
        align-items: center;
    }
}
@media only screen and (max-width: 720px) {
    .people-detail > .wrapper > div {
        padding: 20px;
        text-align: center;
    }
}
.people-detail > .wrapper > div:first-of-type {
    flex-basis: 320px;
    flex-shrink: 0;
}
.people-detail > .wrapper > div:first-of-type > img {
    width: 100%;
}
.people-detail > .wrapper > div > p {
    line-height: 24px;
    text-align: left;
}
@media only screen and (max-width: 720px) {
    .people-detail > .wrapper > div > p {
        font-size: 12px;
        line-height: 20px;
    }
}
.people-detail > .wrapper > div > h4 {
    font-weight: 700;
    font-size: 28px;
    color: #202020;
}
@media only screen and (max-width: 720px) {
    .people-detail > .wrapper > div > h4 {
        font-size: 16px;
        line-height: 120%;
    }
}
.people-detail > .wrapper > div > span {
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    color: var(--red);
    margin: 20px 0;
    display: block;
}
@media only screen and (max-width: 720px) {
    .people-detail > .wrapper > div > span {
        font-size: 10px;
        line-height: 120%;
        letter-spacing: -0.2px;
        margin-top: 4px;
    }
}
.glide {
    position: relative;
    width: 100%;
    box-sizing: border-box;
}
.glide * {
    box-sizing: inherit;
}
.glide__track {
    overflow: hidden;
}
.glide__slides {
    position: relative;
    width: 100%;
    list-style: none;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    touch-action: pan-Y;
    overflow: hidden;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    display: flex;
    flex-wrap: nowrap;
    will-change: transform;
}
.glide__slides--dragging {
    user-select: none;
}
.glide__slide {
    width: 100%;
    height: 100%;
    flex-shrink: 0;
    white-space: normal;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}
.glide__slide a {
    user-select: none;
    -webkit-user-drag: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
.glide__arrows,
.glide__bullets {
    -webkit-touch-callout: none;
    user-select: none;
}
.glide--rtl {
    direction: rtl;
}
.glide__arrow {
    position: absolute;
    display: block;
    top: 50%;
    z-index: 2;
    color: #fff;
    text-transform: uppercase;
    background-color: transparent;
    opacity: 0.5;
    cursor: pointer;
    transition: opacity 0.15s ease;
    transform: translateY(-50%);
    line-height: 1;
    box-shadow: 0 0 10px 1px #00000026;
    border-radius: 50%;
}
@media only screen and (max-width: 720px) {
    .glide__arrow {
        max-width: 28px;
        opacity: 1 !important;
    }
}
.glide__arrow:focus {
    outline: none;
}
.glide__arrow:hover {
    opacity: 1;
}
.glide__arrow--left {
    left: 2em;
}
.glide__arrow--right {
    right: 2em;
}
.glide__arrow--disabled {
    opacity: 0.33;
}
.glide__bullets {
    position: absolute;
    z-index: 2;
    bottom: 2em;
    left: 50%;
    display: inline-flex;
    list-style: none;
    transform: translate(-50%);
}
.glide__bullet {
    background-color: #ffffff80;
    width: 9px;
    height: 9px;
    padding: 0;
    border-radius: 50%;
    border: 2px solid transparent;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    line-height: 0;
    box-shadow: 0 0.25em 0.5em #0000001a;
    margin: 0 0.25em;
}
.glide__bullet:focus {
    outline: none;
}
.glide__bullet:hover,
.glide__bullet:focus {
    border: 2px solid white;
    background-color: #ffffff80;
}
.glide__bullet--active {
    background-color: #fff;
}
.glide--swipeable {
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}
.glide--dragging {
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}
body.home > main .videos {
    position: relative;
}
body.home > main .videos:after {
    content: "";
    position: absolute;
    top: 60%;
    bottom: 0;
    width: 100%;
    background: var(--red);
    z-index: -1;
}
body.home > main .videos > .glide > div:first-of-type {
    width: calc(100% + 120px);
    transform: translate(-100px);
    padding-bottom: 60px;
}
@media only screen and (max-width: 720px) {
    body.home > main .videos > .glide > div:first-of-type {
        width: 200%;
        transform: translate(-25%);
        padding-bottom: 0;
        margin-left: -40px;
    }
}
body.home > main .videos > .glide > div:first-of-type > ul {
    padding: 40px 60px;
}
@media only screen and (max-width: 720px) {
    body.home > main .videos > .glide > div:first-of-type > ul {
        padding: 40px;
    }
}
body.home > main .videos > .glide > div:first-of-type > ul > li > a {
    display: block;
}
body.home > main .videos > .glide > div:first-of-type > ul > li.glide__slide img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
}
body.home > main .videos > .glide > div:first-of-type > ul > li.glide__slide p {
    display: block;
    text-align: center;
    color: #fff;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    margin-top: 20px;
}
@media only screen and (max-width: 720px) {
    body.home > main .videos > .glide > div:first-of-type > ul > li.glide__slide p {
        font-size: 12px;
        line-height: 120%;
        margin-top: 10px;
        display: none;
    }
}
body.home > main .videos > .glide > div:first-of-type > ul > li.glide__slide iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
}
li.glide__slide .iframe-wrapper iframe {
    display: none;
}
li.glide__slide--active .iframe-wrapper > img {
    display: block;
    aspect-ratio: 16/9;
    object-fit: cover;
}
@media only screen and (max-width: 720px) {
    body.home > main .videos > .glide > div:first-of-type > ul > li.glide__slide iframe {
        width: 100%;
    }
}
body.home > main .videos > .glide > div:first-of-type > ul > li.glide__slide--active .iframe-wrapper {
    transform: scale(115%);
}
li.glide__slide--active .iframe-wrapper iframe {
    display: block;
}
li.glide__slide--active .iframe-wrapper > img {
    display: none;
}
@media only screen and (max-width: 720px) {
    body.home > main .videos > .glide > div:first-of-type > ul > li.glide__slide--active iframe {
        transform: scale(1.5);
        max-width: 100%;
    }
}
body.home > main .videos > .glide > div:first-of-type > ul > li.glide__slide--active p {
    margin-top: 60px;
}
@media only screen and (max-width: 720px) {
    body.home > main .videos > .glide > div:first-of-type > ul > li.glide__slide--active p {
        display: block;
        margin-top: 40px;
    }
}
body.home > main .videos > .glide .glide__arrows > .glide__arrow {
    left: unset;
    right: unset;
    top: 86%;
    left: 49%;
}
body.home > main .videos > .glide .glide__arrows > .glide__arrow--left {
    transform: translate(-40px);
}
body.home > main .videos > .glide .glide__arrows > .glide__arrow--right {
    transform: translate(40px);
}
@media only screen and (max-width: 720px) {
    body.home > main .videos > .glide .glide__arrows > .glide__arrow {
        top: 87%;
        left: 46%;
    }
    body.home > main .videos > .glide .glide__arrows > .glide__arrow--left {
        transform: translate(-20px);
    }
    body.home > main .videos > .glide .glide__arrows > .glide__arrow--right {
        transform: translate(20px);
    }
}
body.home > main .publications {
    max-width: 1040px;
    padding: 90px 0;
    margin: 0 auto;
}
body.home > main .publications > .info {
    max-width: 900px;
    margin: 0 auto;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
}
@media only screen and (max-width: 720px) {
    body.home > main .publications > .info {
        padding: 0 32px;
    }
}
body.home > main .publications > .glide {
    margin: 80px 0;
}
@media only screen and (max-width: 720px) {
    body.home > main .publications > .glide {
        margin: 40px 0;
    }
}
body.home > main .publications > .glide > div {
    max-width: 720px;
    margin: 0 auto;
}
body.home > main .publications > .glide > div > ul {
    padding: 36px 0;
}
body.home > main .publications > .glide > div > ul > li {
    display: flex;
    justify-content: center;
}
body.home > main .publications > .glide > div > ul > li > a {
    display: block;
}
body.home > main .publications > .glide > div > ul > li.glide__slide--active img {
    transform: scale(125%);
    box-shadow: 0 30px 40px -10px #0003;
}
@media only screen and (max-width: 720px) {
    body.home > main .publications > .glide > div > ul > li.glide__slide--active img {
        transform: none;
    }
}
body.home > main .publications > .about-us {
    text-align: center;
}
@media only screen and (max-width: 720px) {
    body.home > main .publications > .about-us {
        display: none;
    }
}
body.home > main .publications > .about-us h3 {
    max-width: 460px;
    margin: 0 auto;
    font-weight: 700;
    font-size: 18px;
    line-height: 20px;
    text-align: center;
    letter-spacing: -0.02em;
}
body.home > main .publications > .about-us p {
    display: block;
    margin: 20px 0 74px;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
}
body.home > main .publications > .about-us a {
    display: inline-block;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #fff;
    background: var(--red);
    padding: 20px 48px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
    line-height: 24px;
}
body.home > main .publications > .about-us a:hover {
    background: var(--red-hover);
    transition: background 0.2s ease;
}
body.home > main > .facts {
    padding: 80px 0 120px;
}
body.home > main > .facts ul {
    display: flex;
    justify-content: center;
    margin-top: 60px;
    gap: 147px;
}
@media only screen and (max-width: 720px) {
    body.home > main > .facts ul {
        flex-direction: column;
        gap: 40px;
    }
}
body.home > main > .facts ul li {
    flex-basis: 240px;
    text-align: center;
}
@media only screen and (max-width: 720px) {
    body.home > main > .facts ul li {
        max-width: 224px;
        margin: 0 auto;
    }
    body.home > main > .facts ul li img {
        max-width: 80px;
    }
}
body.home > main > .facts ul li h3 {
    font-weight: 700;
    font-size: 28px;
    line-height: 34px;
    text-align: center;
    letter-spacing: -0.02em;
    color: var(--red);
    margin: 24px 0 12px;
}
body.home > main > .facts ul li p {
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
}
@media only screen and (max-width: 720px) {
    body.home > main > .facts ul li p {
        font-weight: 700;
        font-size: 12px;
        line-height: 15px;
    }
}
body.home > main > .programs {
    padding: 0 65px;
    margin-bottom: 152px;
}
@media only screen and (max-width: 720px) {
    body.home > main > .programs {
        padding: 0;
    }
}
body.home > main > .programs > p {
    display: block;
    max-width: 900px;
    text-align: center;
    font-size: 16px;
    line-height: 24px;
    margin: 0 auto 90px;
    padding: 0 40px;
}
body.home > main > .programs > .glide > div {
    padding: 0;
    margin: 0 auto;
}
body.home > main > .programs > .glide ul li {
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    text-align: center;
}
body.home > main > .programs > .glide ul li img {
    width: 100%;
    margin-bottom: 22px;
    aspect-ratio: 4/3;
    object-fit: cover;
}
@media only screen and (max-width: 720px) {
    body.home > main > .programs > .glide ul li a {
        display: block;
        max-width: 188px;
        margin: 0 auto;
        font-size: 12px;
        line-height: 120%;
    }
}
body.home > main > .impact-areas {
    position: relative;
    margin-bottom: 90px;
}
body.home > main > .impact-areas:after {
    content: "";
    position: absolute;
    width: 336px;
    height: 336px;
    border-radius: 50%;
    border: 50px solid var(--red);
    right: 0;
    top: 0;
    transform: translate(25%, -25%);
    z-index: -1;
}
@media only screen and (max-width: 720px) {
    body.home > main > .impact-areas:after {
        width: 100px;
        height: 100px;
        border-width: 12px;
        top: 16vw;
        right: 16vw;
    }
}
body.home > main > .impact-areas > h2 {
    margin-bottom: 70px;
}
@media only screen and (max-width: 720px) {
    body.home > main > .impact-areas > h2 {
        margin-bottom: 36px;
    }
}
@media only screen and (max-width: 720px) {
    body.home > main > .impact-areas > .desktop {
        display: none;
    }
}
body.home > main > .impact-areas > .desktop > ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 100px;
}
body.home > main > .impact-areas > .desktop > ul li {
    position: relative;
    flex-basis: 328px;
    text-align: center;
    height: 398px;
    box-shadow: 0 4px 4px #0000001a;
}
body.home > main > .impact-areas > .desktop > ul li:after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10px;
    height: 26px;
    background: var(--red);
}
body.home > main > .impact-areas > .desktop > ul li img {
    width: 100%;
}
body.home > main > .impact-areas > .desktop > ul li p {
    text-align: left;
    font-weight: 700;
    font-size: 18px;
    line-height: 20px;
    letter-spacing: -0.02em;
    padding: 10px;
    white-space: normal;
}
body.home > main > .impact-areas > .glide {
    display: none;
}
@media only screen and (max-width: 720px) {
    body.home > main > .impact-areas > .glide {
        display: block;
    }
}
body.home > main > .impact-areas > .glide ul li > a {
    display: block;
    position: relative;
    width: 188px;
    margin: 0 auto;
    white-space: normal;
}
body.home > main > .impact-areas > .glide ul li > a p {
    font-weight: 700;
    font-size: 12px;
    line-height: 112%;
    letter-spacing: 0.02em;
    padding: 16px 8px 24px;
}
body.home > main > .impact-areas > .glide ul li > a:after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 8px;
    height: 20px;
    background: var(--red);
}
body.home > main > .headline {
    margin-bottom: 160px;
}
@media only screen and (max-width: 720px) {
    body.home > main > .headline {
        margin-bottom: 72px;
    }
}
body.home > main > .headline > .glide ul li {
    display: flex;
    align-items: center;
}
@media only screen and (max-width: 720px) {
    body.home > main > .headline > .glide ul li {
        display: block;
    }
}
body.home > main > .headline > .glide ul li > div {
    position: relative;
}
body.home > main > .headline > .glide ul li > div > img {
    width: 100%;
}
body.home > main > .headline > .glide ul li > div > h2 {
    font-weight: 700;
    font-size: 40px;
    line-height: 46px;
    letter-spacing: -0.04em;
    max-width: 380px;
    color: var(--red);
    margin-bottom: 12px;
}
@media only screen and (max-width: 720px) {
    body.home > main > .headline > .glide ul li > div > h2 {
        font-weight: 700;
        font-size: 20px;
        line-height: 112%;
        letter-spacing: -0.04em;
    }
}
body.home > main > .headline > .glide ul li > div:first-of-type {
    padding: 0 18px 18px 0;
    flex-basis: 60%;
}
@media only screen and (max-width: 720px) {
    body.home > main > .headline > .glide ul li > div:first-of-type {
        padding: 0;
    }
}
body.home > main > .headline > .glide ul li > div:first-of-type:after {
    content: "";
    display: block;
    position: absolute;
    z-index: -1;
    width: 316px;
    top: 36px;
    bottom: 0;
    right: 0;
    background: var(--red);
}
@media only screen and (max-width: 720px) {
    body.home > main > .headline > .glide ul li > div:first-of-type:after {
        display: none;
    }
}
body.home > main > .headline > .glide ul li > div:last-of-type {
    padding: 40px;
}
@media only screen and (max-width: 720px) {
    body.home > main > .headline > .glide ul li > div:last-of-type {
        padding: 8px 22px;
    }
}
body.home > main > .about-us {
    display: flex;
    align-items: center;
    margin-bottom: 84px;
}
@media only screen and (max-width: 720px) {
    body.home > main > .about-us {
        display: block;
        padding: 0 40px;
    }
}
body.home > main > .about-us iframe {
    height: auto;
    aspect-ratio: 16/9;
}
@media only screen and (max-width: 720px) {
    body.home > main > .about-us iframe {
        max-width: 100%;
    }
}
body.home > main > .about-us > div {
    flex-basis: 50%;
}
body.home > main > .about-us > div > img {
    width: 100%;
}
body.home > main > .about-us > div:last-of-type {
    padding: 60px;
    font-size: 16px;
    line-height: 24px;
}
body.home > main > .about-us > div:last-of-type > p {
    margin-bottom: 18px;
}
@media only screen and (max-width: 720px) {
    body.home > main > .about-us > div:last-of-type {
        padding: 12px;
        text-align: center;
    }
}
body.home > main > .stories {
    display: flex;
    padding: 42px;
    position: relative;
}
@media only screen and (max-width: 720px) {
    body.home > main > .stories {
        padding: 22px;
    }
}
body.home > main > .stories:after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    top: 0;
    right: 0;
    background: var(--red);
    z-index: -1;
}
@media only screen and (max-width: 720px) {
    body.home > main > .stories:after {
        width: 80px;
        height: 80px;
    }
}
body.home > main > .stories > div {
    position: relative;
    flex-basis: 50%;
    align-items: center;
}
body.home > main > .stories > div > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
body.home > main > .stories > div:first-of-type {
    background: #f6f6f6;
    padding: 70px;
}
@media only screen and (max-width: 720px) {
    body.home > main > .stories > div:first-of-type {
        padding: 18px 12px 18px 28px;
    }
}
body.home > main > .stories > div:first-of-type > h2 {
    font-weight: 700;
    font-size: 46px;
    line-height: 60px;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    margin-bottom: 50px;
}
@media only screen and (max-width: 720px) {
    body.home > main > .stories > div:first-of-type > h2 {
        font-weight: 700;
        font-size: 20px;
        line-height: 24px;
        margin-bottom: 20px;
    }
}
body.home > main > .stories > div:first-of-type > h2:before {
    content: "";
    position: absolute;
    width: 54px;
    height: 60px;
    left: 0px;
    background: var(--red);
}
@media only screen and (max-width: 720px) {
    body.home > main > .stories > div:first-of-type > h2:before {
        width: 22px;
        height: 28px;
    }
}
body.home > main > .stories > div:first-of-type > div > a:first-of-type {
    font-size: 28px;
    line-height: 32px;
    letter-spacing: -0.02em;
    color: var(--red);
}
@media only screen and (max-width: 720px) {
    body.home > main > .stories > div:first-of-type > div > a:first-of-type {
        font-size: 12px;
        line-height: 14px;
        margin-bottom: 20px;
        display: block;
    }
}
body.home > main > .stories > div:first-of-type > div > p {
    font-size: 16px;
    line-height: 24px;
    display: block;
    margin: 20px 0 40px;
}
@media only screen and (max-width: 720px) {
    body.home > main > .stories > div:first-of-type > div > p {
        display: none;
    }
}
body.home > main > .news {
    background: var(--light-gray);
    padding: 50px 20px;
    margin-bottom: 90px;
    position: relative;
}
@media only screen and (max-width: 720px) {
    body.home > main > .news {
        padding: 50px 0;
    }
}
body.home > main > .news:before {
    content: "";
    position: absolute;
    width: 336px;
    height: 336px;
    border-radius: 50%;
    border: 50px solid var(--red);
    left: 0;
    bottom: 0;
    transform: translate(-50%, 50%);
}
@media only screen and (max-width: 720px) {
    body.home > main > .news:before {
        width: 100px;
        height: 100px;
        border-width: 14px;
    }
}
body.home > main > .news .glide {
    display: none;
}
@media only screen and (max-width: 720px) {
    body.home > main > .news .glide {
        display: block;
    }
}
body.home > main > .news .glide .post-wrapper {
    max-width: 188px;
    margin: 0 auto;
}
body.home > main > .news .glide .post-wrapper .post {
    padding: 16px 24px;
}
body.home > main > .news .glide .post-wrapper .meta {
    font-size: 10px;
    line-height: 12px;
    margin-bottom: 12px;
}
body.home > main > .news .glide .post-wrapper a {
    font-size: 12px;
    line-height: 112%;
    margin-bottom: 0;
}
body.home > main > .news .glide .post-wrapper p {
    display: none;
}
body.home > main > .news .post {
    position: relative;
    background: white;
    padding: 30px;
}
body.home > main > .news .post .meta {
    font-size: 12px;
    line-height: 26px;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 5px;
}
body.home > main > .news .post .meta:before {
    content: "";
    left: 0;
    position: absolute;
    background: var(--red);
    width: 10px;
    height: 26px;
}
@media only screen and (max-width: 720px) {
    body.home > main > .news .post .meta:before {
        width: 8px;
        height: 20px;
    }
}
body.home > main > .news .post > a {
    font-weight: 700;
    font-size: 20px;
    line-height: 22px;
    letter-spacing: -0.02em;
    display: block;
    margin-bottom: 16px;
}
body.home > main > .news .post > p {
    font-size: 14px;
    line-height: 20px;
    height: 80px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
body.home > main > .news .wrapper {
    display: flex;
}
body.home > main > .news .wrapper > div.title {
    flex-basis: 253px;
    flex-shrink: 0;
}
@media only screen and (max-width: 720px) {
    body.home > main > .news .wrapper > div.title {
        flex-basis: 100%;
    }
}
body.home > main > .news .wrapper > div.title > .section-title {
    text-align: left;
}
@media only screen and (max-width: 720px) {
    body.home > main > .news .wrapper > div.title > .section-title {
        text-align: center;
    }
}
body.home > main > .news .wrapper > div.desktop {
    display: flex;
    gap: 30px;
}
@media only screen and (max-width: 720px) {
    body.home > main > .news .wrapper > div.desktop {
        display: none;
    }
}
body.home > main > .news .wrapper > div.desktop > .featured {
    flex-basis: 380px;
    flex-shrink: 0;
}
body.home > main > .news .wrapper > div.desktop > .featured > .button {
    margin-top: 60px;
}
body.home > main > .news .wrapper > div.desktop > ul li {
    display: flex;
    margin-bottom: 30px;
    max-height: 252px;
}
body.home > main > .news .wrapper > div.desktop > ul li img {
    max-width: 252px;
    aspect-ratio: 1/1;
    object-fit: cover;
}
body.about-us > main {
    padding-bottom: 90px;
}
@media only screen and (max-width: 720px) {
    body.about-us > main {
        padding-bottom: 20px;
    }
}
@media only screen and (max-width: 720px) {
    body.about-us > main .section-title {
        font-size: 12px;
        letter-spacing: 2px;
        margin-bottom: 12px;
    }
}
@media only screen and (max-width: 720px) {
    body.about-us > main .button.small {
        min-width: auto;
        padding: 8px 20px;
        font-size: 12px;
    }
}
body.about-us > main > .history {
    max-width: 914px;
    padding: 60px 0;
    margin: 0 auto;
    text-align: center;
}
@media only screen and (max-width: 720px) {
    body.about-us > main > .history {
        padding: 0;
    }
}
body.about-us > main > .history p {
    font-size: 16px;
    line-height: 24px;
    color: var(--gray);
}
@media only screen and (max-width: 720px) {
    body.about-us > main > .history p {
        padding: 0 22px;
        text-align: left;
        font-size: 12px;
        line-height: 20px;
    }
}
body.about-us > main > .history .timeline {
    margin-top: 80px;
}
body.about-us > main > .history .timeline > h3 {
    font-weight: 700;
    font-size: 22px;
    line-height: 24px;
    text-align: center;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--gray);
    margin-bottom: 24px;
}
@media only screen and (max-width: 720px) {
    body.about-us > main > .history .timeline > h3 {
        font-size: 12px;
        margin-bottom: 12px;
        line-height: 1;
    }
}
body.about-us > main > .history .timeline > h2 {
    margin-bottom: 25px;
}
@media only screen and (max-width: 720px) {
    body.about-us > main > .history .timeline > h2 {
        font-size: 18px;
        line-height: 1;
        margin-bottom: 8px;
    }
}
body.about-us > main > .history .timeline > p {
    max-width: 554px;
    font-size: 16px;
    line-height: 24px;
    color: var(--gray);
    margin: 0 auto;
}
@media only screen and (max-width: 720px) {
    body.about-us > main > .history .timeline > p {
        text-align: center;
        font-size: 12px;
        line-height: 20px;
    }
}
body.about-us > main > .history .timeline > ul {
    margin-top: 147px;
}
@media only screen and (max-width: 720px) {
    body.about-us > main > .history .timeline > ul {
        margin-top: 40px;
    }
}
body.about-us > main > .history .timeline > ul li {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}
@media only screen and (max-width: 720px) {
    body.about-us > main > .history .timeline > ul li {
        flex-direction: column-reverse;
        justify-content: center;
        margin-bottom: 60px;
    }
}
body.about-us > main > .history .timeline > ul li:nth-child(even) {
    flex-direction: row-reverse;
}
@media only screen and (max-width: 720px) {
    body.about-us > main > .history .timeline > ul li:nth-child(even) {
        flex-direction: column-reverse;
    }
}
body.about-us > main > .history .timeline > ul li:nth-child(even) div:nth-child(2):after {
    right: 8px;
}
body.about-us > main > .history .timeline > ul li:nth-child(even) div:nth-child(3) {
    text-align: right;
}
body.about-us > main > .history .timeline > ul li > div {
    text-align: left;
    max-width: 246px;
    color: var(--gray);
}
body.about-us > main > .history .timeline > ul li > div > img {
    width: 100%;
}
body.about-us > main > .history .timeline > ul li > div > h3 {
    font-weight: 700;
    font-size: 24px;
    line-height: 29px;
    letter-spacing: -0.02em;
}
@media only screen and (max-width: 720px) {
    body.about-us > main > .history .timeline > ul li > div > h3 {
        font-size: 12px;
        text-align: center;
        margin-bottom: 12px;
    }
}
body.about-us > main > .history .timeline > ul li > div > p {
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0.02em;
    display: block;
    margin-top: 12px;
    margin-bottom: 30px;
}
@media only screen and (max-width: 720px) {
    body.about-us > main > .history .timeline > ul li > div > p {
        display: none;
    }
}
body.about-us > main > .history .timeline > ul li > div:nth-child(2) {
    position: relative;
    width: 152px;
    padding: 0 16px;
}
body.about-us > main > .history .timeline > ul li > div:nth-child(2):before {
    content: "";
    display: block;
    width: 120px;
    height: 4px;
    background: var(--gray);
}
@media only screen and (max-width: 720px) {
    body.about-us > main > .history .timeline > ul li > div:nth-child(2):before {
        display: none;
    }
}
body.about-us > main > .history .timeline > ul li > div:nth-child(2):after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    background: var(--gray);
    border-radius: 50%;
    transform: translateY(-10px);
}
@media only screen and (max-width: 720px) {
    body.about-us > main > .history .timeline > ul li > div:nth-child(2):after {
        display: none;
    }
}
body.about-us > main > .history .timeline > ul li > div:nth-child(3) {
    width: 320px;
    max-width: 320px;
    font-weight: 700;
    font-size: 40px;
    line-height: 40px;
    text-align: left;
    letter-spacing: -0.02em;
    color: var(--red);
}
@media only screen and (max-width: 720px) {
    body.about-us > main > .history .timeline > ul li > div:nth-child(3) {
        width: auto;
        font-size: 16px;
        line-height: 24px;
        margin-top: 10px;
    }
}
body.about-us > main > .history .timeline-detail {
    background: white;
    max-width: 1345px;
    margin: 0 auto;
    padding: 50px;
    border-radius: 127px;
    display: flex;
    align-items: center;
    gap: 50px;
}
@media only screen and (max-width: 720px) {
    body.about-us > main > .history .timeline-detail {
        flex-direction: column-reverse;
        gap: 0;
        padding: 20px;
        border-radius: 12px;
        max-width: calc(100% - 40px);
    }
    body.about-us > main > .history .timeline-detail .button {
        display: block;
        width: 140px;
        margin: 8px auto;
        padding: 8px 20px;
        min-width: 0;
    }
}
body.about-us > main > .history .timeline-detail > div {
    flex-basis: 50%;
}
@media only screen and (max-width: 720px) {
    body.about-us > main > .history .timeline-detail > div {
        flex-basis: auto;
    }
}
body.about-us > main > .history .timeline-detail > div:first-of-type {
    padding: 16px;
}
@media only screen and (max-width: 720px) {
    body.about-us > main > .history .timeline-detail > div:first-of-type {
        padding: 0;
    }
}
body.about-us > main > .history .timeline-detail > div > h2 {
    font-weight: 700;
    font-size: 66px;
    line-height: 81px;
    letter-spacing: -0.02em;
    color: #e22422;
}
@media only screen and (max-width: 720px) {
    body.about-us > main > .history .timeline-detail > div > h2 {
        font-size: 16px;
        text-align: center;
        line-height: 20px;
        margin: 20px 0;
    }
}
body.about-us > main > .history .timeline-detail > div > p {
    display: block;
    line-height: 24px;
    padding: 0;
    margin: 20px 0;
}
@media only screen and (max-width: 720px) {
    body.about-us > main > .history .timeline-detail > div > p {
        font-size: 12px;
        line-height: 18px;
        font-weight: 700;
    }
}
body.about-us > main > .history .timeline-detail > div > img {
    width: 100%;
    max-width: 568px;
    object-fit: cover;
}
body.about-us > main > .organization {
    padding: 80px 0;
    background: var(--light-gray);
}
body.about-us > main > .organization > p {
    display: block;
    max-width: 565px;
    line-height: 24px;
    text-align: center;
    letter-spacing: 0.02em;
    color: var(--gray);
    margin: 0 auto 60px;
}
@media only screen and (max-width: 720px) {
    body.about-us > main > .organization > p {
        font-size: 12px;
        line-height: 20px;
        padding: 0 20px;
    }
}
@media only screen and (max-width: 720px) {
    body.about-us > main > .organization > ul.desktop {
        display: none;
    }
}
body.about-us > main > .organization > ul.mobile {
    display: none;
}
@media only screen and (max-width: 720px) {
    body.about-us > main > .organization > ul.mobile {
        display: block;
    }
}
body.about-us > main > .organization > ul li {
    display: flex;
    justify-content: center;
}
@media only screen and (max-width: 720px) {
    body.about-us > main > .organization > ul li {
        margin-bottom: 26px;
    }
}
body.about-us > main > .organization > ul li > div {
    max-width: 154px;
    text-align: center;
    padding: 0 8px;
}
body.about-us > main > .organization > ul li > div.bagan {
    padding: 12px 0;
}
body.about-us > main > .organization > ul li > div.spacer {
    width: 250px;
    max-width: revert;
}
body.about-us > main > .organization > ul li > div.spacer-2 {
    width: 350px;
    max-width: revert;
}
body.about-us > main > .organization > ul li > div strong {
    display: block;
    font-weight: 700;
    font-size: 16px;
    line-height: 14px;
    margin-bottom: 8px;
}
@media only screen and (max-width: 720px) {
    body.about-us > main > .organization > ul li > div strong {
        font-size: 12px;
    }
}
body.about-us > main > .organization > ul li > div span {
    font-weight: 700;
    font-size: 12px;
    line-height: 12px;
    letter-spacing: -0.02em;
    color: var(--red);
}
body.about-us > main > .vision-mission {
    padding: 60px 0;
    text-align: center;
}
@media only screen and (max-width: 720px) {
    body.about-us > main > .vision-mission {
        padding: 0;
    }
    body.about-us > main > .vision-mission h2 {
        margin: 16px 0;
    }
}
body.about-us > main > .vision-mission > p {
    line-height: 24px;
    margin: 30px auto;
    max-width: 914px;
}
@media only screen and (max-width: 720px) {
    body.about-us > main > .vision-mission > p {
        font-size: 12px;
        line-height: 20px;
        padding: 0 40px;
        margin: 0;
    }
}
body.about-us > main > .vision-mission > .our-expertise {
    padding: 32px 0 0;
}
body.about-us > main > .vision-mission > .our-expertise > ul {
    margin-top: 60px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
@media only screen and (max-width: 720px) {
    body.about-us > main > .vision-mission > .our-expertise > ul {
        flex-wrap: column;
    }
}
body.about-us > main > .vision-mission > .our-expertise > ul > li {
    flex-basis: 33%;
    padding: 32px 24px;
}
@media only screen and (max-width: 720px) {
    body.about-us > main > .vision-mission > .our-expertise > ul > li {
        flex-basis: 100%;
        padding: 12px 24px;
        margin-bottom: 24px;
    }
}
body.about-us > main > .vision-mission > .our-expertise > ul > li > img {
    margin-bottom: 60px;
}
@media only screen and (max-width: 720px) {
    body.about-us > main > .vision-mission > .our-expertise > ul > li > img {
        width: 80px;
        margin-bottom: 12px;
    }
}
@media only screen and (max-width: 720px) {
    body.about-us > main > .vision-mission > .our-expertise > ul > li p {
        font-size: 12px;
        font-weight: 700;
    }
}
body.about-us > main > .partner,
body.about-us > main > .senior {
    padding: 60px 0;
}
@media only screen and (max-width: 720px) {
    body.about-us > main > .partner,
    body.about-us > main > .senior {
        padding: 0;
    }
}
body.about-us > main > .partner > p,
body.about-us > main > .senior > p {
    display: block;
    line-height: 24px;
    max-width: 914px;
    margin: 0 auto;
    text-align: center;
}
@media only screen and (max-width: 720px) {
    body.about-us > main > .partner > p,
    body.about-us > main > .senior > p {
        font-size: 12px;
        line-height: 20px;
        padding: 0 24px;
    }
}
body.about-us > main > .partner > ul,
body.about-us > main > .senior > ul {
    display: flex;
    justify-content: center;
    margin-top: 32px;
    flex-wrap: wrap;
}
body.about-us > main > .partner > ul li,
body.about-us > main > .senior > ul li {
    flex-basis: 33%;
    max-width: 330px;
    padding: 50px;
    text-align: center;
}
@media only screen and (max-width: 720px) {
    body.about-us > main > .partner > ul li,
    body.about-us > main > .senior > ul li {
        flex-basis: 50%;
        max-width: 50%;
        padding: 20px;
    }
}
body.about-us > main > .partner > ul li img,
body.about-us > main > .senior > ul li img {
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 50%;
    border: 10px solid var(--red);
    width: 100%;
}
body.about-us > main > .partner > ul li strong,
body.about-us > main > .senior > ul li strong {
    display: block;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    text-align: center;
    margin: 20px 0 10px;
}
@media only screen and (max-width: 720px) {
    body.about-us > main > .partner > ul li strong,
    body.about-us > main > .senior > ul li strong {
        font-size: 12px;
        line-height: 14px;
    }
}
body.about-us > main > .partner > ul li span,
body.about-us > main > .senior > ul li span {
    font-weight: 700;
    font-size: 14px;
    line-height: 16px;
    text-align: center;
    letter-spacing: -0.02em;
    color: var(--red);
}
@media only screen and (max-width: 720px) {
    body.about-us > main > .partner > ul li span,
    body.about-us > main > .senior > ul li span {
        font-size: 10px;
        line-height: 10px;
    }
}
body.notable > main > .content {
    padding: 60px 0;
}
@media only screen and (max-width: 720px) {
    body.notable > main > .content {
        padding: 22px;
    }
}
body.notable > main > .content ul li {
    background: var(--light-gray);
    padding: 8px 20px;
    margin-bottom: 6px;
    font-size: 16px;
    line-height: 24px;
}
body.notable > main > .content ul li:nth-child(odd) {
    background: #d9d9d9;
}
body.report > main > .content {
    padding: 50px 0 90px;
}
body.report > main > .content > p {
    display: block;
    max-width: 934px;
    margin: 0 auto;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
}
@media only screen and (max-width: 720px) {
    body.report > main > .content > p {
        font-size: 12px;
        line-height: 20px;
        padding: 0 22px;
        text-align: left;
    }
}
body.report > main > .content > .highlight {
    box-shadow: 0 40px 50px #0003;
    border: 1px solid #9b989a;
    display: flex;
    max-width: 1120px;
    align-items: flex-end;
    padding: 32px;
    margin: 36px auto 60px;
    position: relative;
}
@media only screen and (max-width: 720px) {
    body.report > main > .content > .highlight {
        padding: 14px;
        margin: 36px 22px;
    }
}
body.report > main > .content > .highlight:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 137px;
    background-color: var(--red);
}
@media only screen and (max-width: 720px) {
    body.report > main > .content > .highlight:before {
        width: 12px;
        height: 48px;
    }
}
body.report > main > .content > .highlight > div:first-of-type {
    flex-grow: 1;
    padding: 42px;
}
@media only screen and (max-width: 720px) {
    body.report > main > .content > .highlight > div:first-of-type {
        padding: 12px;
    }
}
body.report > main > .content > .highlight > div:first-of-type > span {
    font-weight: 300;
    font-size: 42px;
    line-height: 48px;
    letter-spacing: -0.02em;
}
@media only screen and (max-width: 720px) {
    body.report > main > .content > .highlight > div:first-of-type > span {
        font-size: 14px;
        line-height: 1;
    }
}
body.report > main > .content > .highlight > div:first-of-type > h2 {
    font-weight: 300;
    font-size: 66px;
    line-height: 80px;
    color: var(--red);
    letter-spacing: -0.02em;
    margin-bottom: 8px;
}
@media only screen and (max-width: 720px) {
    body.report > main > .content > .highlight > div:first-of-type > h2 {
        font-size: 24px;
        line-height: 1;
        margin: 12px 0;
    }
}
body.report > main > .content > .highlight > div:first-of-type > p {
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
}
@media only screen and (max-width: 720px) {
    body.report > main > .content > .highlight > div:first-of-type > p {
        font-size: 10px;
        line-height: 1;
    }
}
body.report > main > .content > .highlight > div > img {
    width: 100%;
    min-width: 416px;
}
@media only screen and (max-width: 720px) {
    body.report > main > .content > .highlight > div > img {
        min-width: 116px;
        max-width: 116px;
    }
}
body.report > main > .content > .download {
    display: flex;
    justify-content: center;
}
body.report > main > .content > .past {
    text-align: center;
    margin-top: 90px;
}
@media only screen and (max-width: 720px) {
    body.report > main > .content > .past {
        margin-top: 32px;
    }
}
body.report > main > .content > .past > h3 {
    font-weight: 700;
    font-size: 22px;
    line-height: 24px;
    color: var(--red);
    text-align: center;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    margin-bottom: 20px;
}
@media only screen and (max-width: 720px) {
    body.report > main > .content > .past > h3 {
        font-size: 12px;
        line-height: 20px;
        margin-bottom: 10px;
    }
}
body.report > main > .content > .past ul {
    display: flex;
    justify-content: center;
    gap: 78px;
}
@media only screen and (max-width: 720px) {
    body.report > main > .content > .past ul {
        flex-direction: column;
        gap: 4px;
    }
}
@media only screen and (max-width: 720px) {
    body.report > main > .content > .past ul li a {
        font-size: 10px;
    }
}
body.safeguarding > main > .content {
    padding: 60px 0 160px;
}
@media only screen and (max-width: 720px) {
    body.safeguarding > main > .content {
        padding-bottom: 60px;
    }
}
body.safeguarding > main > .content > h2 {
    margin-bottom: 36px;
}
body.safeguarding > main > .content > p {
    max-width: 914px;
    margin: 0 auto 36px;
    line-height: 24px;
}
@media only screen and (max-width: 720px) {
    body.safeguarding > main > .content > p {
        font-size: 12px;
        padding: 0 22px;
        margin-bottom: 12px;
    }
}
body.what-we-do > main > .about {
    padding: 40px 0;
    max-width: 1000px;
    margin: 0 auto;
}
@media only screen and (max-width: 720px) {
    body.what-we-do > main > .about {
        padding: 20px 0;
    }
}
body.what-we-do > main > .about > h2 {
    margin-bottom: 70px;
}
@media only screen and (max-width: 720px) {
    body.what-we-do > main > .about > h2 {
        font-size: 12px;
        margin-bottom: 20px;
    }
}
body.what-we-do > main > .about > p {
    display: block;
    line-height: 24px;
    margin-bottom: 32px;
}
@media only screen and (max-width: 720px) {
    body.what-we-do > main > .about > p {
        font-size: 12px;
        line-height: 1.2;
        padding: 0 22px;
    }
}
body.what-we-do > main > .impact-areas {
    padding-bottom: 120px;
}
@media only screen and (max-width: 720px) {
    body.what-we-do > main > .impact-areas {
        padding-bottom: 20px;
    }
}
@media only screen and (max-width: 720px) {
    body.what-we-do > main > .impact-areas h2 {
        font-size: 12px;
    }
}
body.what-we-do > main > .impact-areas ul li {
    display: flex;
    justify-content: center;
}
body.what-we-do > main > .impact-areas ul li > div {
    position: relative;
    width: 328px;
    text-align: center;
    height: 398px;
    box-shadow: 0 4px 4px #0000001a;
}
@media only screen and (max-width: 720px) {
    body.what-we-do > main > .impact-areas ul li > div {
        width: 244px;
        box-shadow: none;
        height: auto;
    }
}
body.what-we-do > main > .impact-areas ul li > div:after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10px;
    height: 26px;
    background: var(--red);
}
@media only screen and (max-width: 720px) {
    body.what-we-do > main > .impact-areas ul li > div:after {
        display: none;
    }
}
body.what-we-do > main > .impact-areas ul li > div img {
    width: 100%;
}
@media only screen and (max-width: 720px) {
    body.what-we-do > main > .impact-areas ul li > div img {
        width: 180px;
    }
}
body.what-we-do > main > .impact-areas ul li > div p {
    text-align: left;
    font-weight: 700;
    font-size: 18px;
    line-height: 20px;
    letter-spacing: -0.02em;
    padding: 10px;
}
@media only screen and (max-width: 720px) {
    body.what-we-do > main > .impact-areas ul li > div p {
        font-size: 12px;
        text-align: center;
    }
}
body.what-we-do > main > .program {
    padding: 34px 0;
}
body.what-we-do > main > .program > h2 {
    text-transform: capitalize;
    margin-bottom: 70px;
}
@media only screen and (max-width: 720px) {
    body.what-we-do > main > .program > h2 {
        font-size: 20px;
        margin-bottom: 20px;
        padding: 0 22px;
    }
}
body.what-we-do > main > .program > .program-list {
    display: flex;
    flex-wrap: wrap;
    gap: 96px;
}
@media only screen and (max-width: 720px) {
    body.what-we-do > main > .program > .program-list {
        flex-direction: column;
        gap: 40px;
    }
}
body.what-we-do > main > .program > .program-list > li {
    flex-basis: calc(35% - 86px);
    background: var(--light-gray);
    box-shadow: 0 4px 4px #00000040;
}
@media only screen and (max-width: 720px) {
    body.what-we-do > main > .program > .program-list > li {
        flex-basis: 188px;
        width: 188px;
        margin: 0 auto;
    }
}
body.what-we-do > main > .program > .program-list > li > img {
    width: 100%;
    display: block;
    aspect-ratio: 1/1;
    object-fit: cover;
}
body.what-we-do > main > .program > .program-list > li > div {
    padding: 20px 26px 40px;
}
@media only screen and (max-width: 720px) {
    body.what-we-do > main > .program > .program-list > li > div {
        padding: 20px;
    }
}
body.what-we-do > main > .program > .program-list > li > div > span {
    color: var(--red);
    font-weight: 500;
    font-size: 12px;
    line-height: 12px;
}
@media only screen and (max-width: 720px) {
    body.what-we-do > main > .program > .program-list > li > div > span {
        font-size: 8px;
    }
}
body.what-we-do > main > .program > .program-list > li > div > a {
    font-weight: 700;
    font-size: 22px;
    line-height: 26px;
    display: block;
    color: #202020;
    margin: 16px 0 24px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
@media only screen and (max-width: 720px) {
    body.what-we-do > main > .program > .program-list > li > div > a {
        font-size: 12px;
        line-height: 20px;
        margin-bottom: 0;
    }
}
body.what-we-do > main > .program > .program-list > li > div p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
@media only screen and (max-width: 720px) {
    body.what-we-do > main > .program > .program-list > li > div p {
        display: none;
    }
}
body.what-we-do > main > .program > .program-category {
    max-width: 500px;
    margin-top: 74px;
    margin-bottom: 100px;
}
@media only screen and (max-width: 720px) {
    body.what-we-do > main > .program > .program-category {
        margin: 20px auto;
        max-width: 250px;
    }
}
@media only screen and (max-width: 720px) {
    body.what-we-do > main .button {
        min-width: auto;
        padding: 8px 20px;
    }
}
.detail {
    padding-bottom: 90px;
}
.detail .breadcumbs-detail {
    margin-top: 20px;
    margin-bottom: 40px;
    font-size: 24px;
}
.detail .post-header {
    margin: 40px auto;
}
.detail .post-header.wrapper {
    max-width: 1000px;
}
@media only screen and (max-width: 720px) {
    .detail .post-header {
        padding: 10px 22px;
        margin-bottom: 0;
    }
}
.detail .post-header h1 {
    font-weight: 700;
    font-size: 28px;
    color: #202020;
    margin-bottom: 10px;
}
@media only screen and (max-width: 720px) {
    .detail .post-header h1 {
        font-size: 20px;
    }
}
.detail .post-header .program-time {
    font-weight: 700;
    font-size: 28px;
    color: var(--red);
    margin-bottom: 10px;
}
@media only screen and (max-width: 720px) {
    .detail .post-header .program-time {
        font-size: 12px;
    }
}
.detail .post-header .post-meta {
    margin: 22px 0;
}
.detail .post-header .post-meta span {
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    color: #202020;
}
.detail .post-header .post-meta span:last-of-type {
    color: #e22422;
}
.detail .post-header .socmed {
    display: flex;
    gap: 20px;
    margin-bottom: 40px;
}
@media only screen and (max-width: 720px) {
    .detail .post-header .socmed {
        gap: 16px;
    }
    .detail .post-header .socmed img {
        width: 16px;
        height: 16px;
    }
}
.detail .post-content {
    margin-bottom: 120px;
}
@media only screen and (max-width: 720px) {
    .detail .post-content {
        padding: 0 22px;
        font-size: 12px;
        margin-bottom: 60px;
    }
}
.detail .post-content em {
    font-style: italic;
}
.detail .post-content .wp-block-image:first-of-type {
    margin-bottom: 32px;
}
.detail .post-content .wp-block-image img {
    width: 100% !important;
}
.detail .post-content .wp-block-image .wp-element-caption {
    text-align: center;
}
.detail .post-content h2 {
    font-weight: 700;
    font-size: 28px;
    color: #202020;
    margin: 24px 0;
}
@media only screen and (max-width: 720px) {
    .detail .post-content h2 {
        font-size: 14px;
    }
}
.detail .post-content strong {
    font-weight: 700;
}
.detail .post-content p,
.detail .post-content ul,
.detail .post-content ol {
    display: block;
    max-width: 1280px;
    line-height: 24px;
    margin: 32px auto;
}
.detail .post-content li {
    line-height: 24px;
    margin: 4px 0;
}
.detail > .other-program > h2 {
    font-weight: 700;
    font-size: 32px;
    line-height: 39px;
    color: var(--red);
    margin-bottom: 120px;
    text-transform: uppercase;
    text-align: center;
}
@media only screen and (max-width: 720px) {
    .detail > .other-program > h2 {
        font-size: 12px;
        letter-spacing: 4px;
        margin-bottom: 50px;
    }
}
.detail > .other-program > ul {
    display: flex;
    flex-wrap: wrap;
    gap: 56px 190px;
}
@media only screen and (max-width: 720px) {
    .detail > .other-program > ul {
        flex-direction: column;
        gap: 30px;
    }
}
.detail > .other-program > ul li {
    flex-basis: calc(50% - 95px);
    text-align: center;
}
@media only screen and (max-width: 720px) {
    .detail > .other-program > ul li {
        flex-basis: 1;
        width: 244px;
        margin: 0 auto;
    }
}
.detail > .other-program > ul li > a > img {
    width: 100%;
}
@media only screen and (max-width: 720px) {
    .detail > .other-program > ul li > a > img {
        max-width: 188px;
        margin: 0 auto;
    }
}
.detail > .other-program > ul li > a > strong {
    display: block;
    font-weight: 700;
    font-size: 24px;
    margin-top: 16px;
    line-height: 28px;
    text-align: center;
    color: #000;
}
@media only screen and (max-width: 720px) {
    .detail > .other-program > ul li > a > strong {
        font-size: 12px;
        line-height: 120%;
    }
}
@media only screen and (max-width: 720px) {
    body.publication > main h2 {
        font-size: 20px;
        padding: 0 22px;
        margin-bottom: 20px;
    }
}
body.publication > main > .news {
    padding: 40px 0;
}
@media only screen and (max-width: 720px) {
    body.publication > main > .news {
        padding: 20px 0;
    }
}
body.publication > main > .news .news-filter {
    display: flex;
    gap: 140px;
    margin-bottom: 100px;
}
@media only screen and (max-width: 720px) {
    body.publication > main > .news .news-filter {
        width: 250px;
        flex-direction: column;
        gap: 20px;
        margin: 0 auto 50px;
    }
}
body.publication > main > .news .news-filter > div {
    flex-basis: calc(50% - 70px);
}
@media only screen and (max-width: 720px) {
    body.publication > main > .news .news-filter > div {
        width: 100%;
    }
}
body.publication > main > .news .news-list {
    display: flex;
    gap: 96px;
    flex-wrap: wrap;
}
@media only screen and (max-width: 720px) {
    body.publication > main > .news .news-list {
        gap: 40px;
        flex-direction: column;
    }
}
body.publication > main > .news .news-list li {
    flex-basis: calc(35% - 86px);
    background-color: var(--light-gray);
    border: 1px solid #d0d0d0;
}
@media only screen and (max-width: 720px) {
    body.publication > main > .news .news-list li {
        flex-basis: 1;
        max-width: 188px;
        margin: 0 auto;
    }
}
body.publication > main > .news .news-list li > img {
    width: 100%;
    object-fit: cover;
    aspect-ratio: 16/9;
}
body.publication > main > .news .news-list li > div {
    padding: 10px 24px 24px;
}
@media only screen and (max-width: 720px) {
    body.publication > main > .news .news-list li > div {
        padding: 12px 24px;
    }
}
body.publication > main > .news .news-list li > div > span {
    color: var(--red);
}
body.publication > main > .news .news-list li > div > span:first-of-type {
    font-weight: 500;
    font-size: 18px;
    line-height: 22px;
    text-transform: uppercase;
}
@media only screen and (max-width: 720px) {
    body.publication > main > .news .news-list li > div > span:first-of-type {
        font-size: 12px;
    }
}
body.publication > main > .news .news-list li > div > span:last-of-type {
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
@media only screen and (max-width: 720px) {
    body.publication > main > .news .news-list li > div > span:last-of-type {
        font-size: 10px;
    }
}
body.publication > main > .news .news-list li > div > a {
    display: block;
    font-weight: 700;
    font-size: 18px;
    line-height: 112%;
    letter-spacing: 0.02em;
    margin: 22px 0;
}
@media only screen and (max-width: 720px) {
    body.publication > main > .news .news-list li > div > a {
        font-size: 12px;
        line-height: 140%;
        letter-spacing: 0.24px;
        margin: 8px 0;
    }
}
body.publication > main > .book {
    padding: 40px 0;
}
body.publication > main > .book .book-list {
    display: flex;
    gap: 96px;
    flex-wrap: wrap;
}
@media only screen and (max-width: 720px) {
    body.publication > main > .book .book-list {
        flex-direction: column;
        gap: 40px;
    }
}
body.publication > main > .book .book-list li {
    flex-basis: calc(35% - 86px);
}
@media only screen and (max-width: 720px) {
    body.publication > main > .book .book-list li {
        flex-basis: 1;
        width: 250px;
        margin: 0 auto;
    }
}
body.publication > main > .book .book-list li > img {
    width: 100%;
    aspect-ratio: 181/255;
    object-fit: cover;
}
@media only screen and (max-width: 720px) {
    body.publication > main > .book .book-list li > img {
        display: block;
        width: 188px;
        margin: 0 auto;
    }
}
body.publication > main > .book .book-list li > div {
    padding: 8px 16px;
}
body.publication > main > .book .book-list li > div > a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
body.publication > main > .book .book-list li > div > a:first-of-type {
    font-weight: 700;
    font-size: 22px;
    line-height: 26px;
    color: #1c1c1c;
}
@media only screen and (max-width: 720px) {
    body.publication > main > .book .book-list li > div > a:first-of-type {
        font-size: 14px;
        line-height: 1.2;
        letter-spacing: -0.28px;
        text-align: center;
        display: block;
    }
}
body.publication > main > .book .book-list li > div > a:last-of-type {
    font-weight: 700;
    font-size: 12px;
    line-height: 12px;
    color: var(--red);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
@media only screen and (max-width: 720px) {
    body.publication > main > .book .book-list li > div > a:last-of-type {
        display: none;
    }
}
body.publication > main > .book .book-list li > div > p {
    display: block;
    margin: 16px 0;
    line-height: 24px;
    letter-spacing: 0.02em;
    color: #000;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
@media only screen and (max-width: 720px) {
    body.publication > main > .book .book-list li > div > p {
        display: none;
    }
}
body.publication > main > .video {
    padding-bottom: 80px;
}
@media only screen and (max-width: 720px) {
    body.publication > main > .video {
        padding-bottom: 0;
    }
}
body.publication > main > .video .video-player {
    text-align: center;
    margin-bottom: 90px;
    position: relative;
}
body.publication > main > .video .video-player img {
    width: 100%;
}
@media only screen and (max-width: 720px) {
    body.publication > main > .video .video-player img {
        width: 260px;
        margin: 0 auto;
    }
}
body.publication > main > .video .video-player h1 {
    font-weight: 700;
    font-size: 32px;
    line-height: 39px;
}
@media only screen and (max-width: 720px) {
    body.publication > main > .video .video-player h1 {
        font-size: 12px;
        line-height: 1.2;
        margin-top: 20px;
        color: #fff;
    }
}
@media only screen and (max-width: 720px) {
    body.publication > main > .video .video-player:before {
        content: "";
        display: block;
        position: absolute;
        width: 100%;
        height: 88px;
        background: var(--red);
        z-index: -1;
        bottom: -20px;
    }
}
body.publication > main > .video > h2 {
    font-weight: 700;
    font-size: 28px;
    line-height: 34px;
    color: var(--red);
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 60px;
}
@media only screen and (max-width: 720px) {
    body.publication > main > .video > h2 {
        font-size: 12px;
        line-height: 1.2;
        text-align: center;
        margin-bottom: 36px;
    }
}
body.publication > main > .video .video-list {
    display: flex;
    flex-wrap: wrap;
    gap: 90px 66px;
}
@media only screen and (max-width: 720px) {
    body.publication > main > .video .video-list {
        gap: 20px;
        padding: 0 22px;
    }
}
body.publication > main > .video .video-list li {
    flex-basis: calc(33% - 40px);
}
@media only screen and (max-width: 720px) {
    body.publication > main > .video .video-list li {
        flex-basis: calc(50% - 10px);
    }
}
body.publication > main > .video .video-list li > a {
    display: block;
}
@media only screen and (max-width: 720px) {
    body.publication > main > .video .video-list li > a {
        font-size: 10px;
    }
    body.publication > main > .video .video-list li > a span {
        padding: 8px;
        display: block;
    }
}
body.publication > main > .video .video-list li img {
    width: 100%;
}
body.work-with-us > main > .jobs {
    padding: 40px 0 80px;
}
@media only screen and (max-width: 720px) {
    body.work-with-us > main > .jobs {
        padding: 22px;
        font-size: 12px;
        line-height: 1.2;
    }
}
body.work-with-us > main > .jobs > div {
    line-height: 24px;
    margin-bottom: 40px;
}
body.work-with-us > main > .jobs > div h2 {
    font-weight: 700;
    font-size: 40px;
    line-height: 112%;
    color: var(--red);
    letter-spacing: -0.04em;
    margin-bottom: 20px;
}
@media only screen and (max-width: 720px) {
    body.work-with-us > main > .jobs > div h2 {
        font-size: 12px;
        text-transform: uppercase;
        text-align: center;
    }
}
body.work-with-us > main > .jobs > div ul {
    list-style: disc;
    padding-left: 1.1em;
}
body.work-with-us > main > .jobs > div:last-of-type {
    display: flex;
    justify-content: center;
    padding-top: 20px;
}
body.work-with-us > main > .proposal {
    padding: 40px 0 80px;
}
@media only screen and (max-width: 720px) {
    body.work-with-us > main > .proposal {
        padding: 20px 20px 40px;
    }
}
body.work-with-us > main > .proposal ul {
    display: flex;
    flex-wrap: wrap;
    padding-top: 60px;
    gap: 80px 115px;
}
@media only screen and (max-width: 720px) {
    body.work-with-us > main > .proposal ul {
        gap: 20px;
        flex-direction: column;
        padding: 0;
    }
}
body.work-with-us > main > .proposal ul li {
    flex-basis: calc(33% - 74px);
    border: 1px solid #e7e7e7;
}
@media only screen and (max-width: 720px) {
    body.work-with-us > main > .proposal ul li {
        flex-basis: auto;
        width: 232px;
        margin: 0 auto;
    }
}
body.work-with-us > main > .proposal ul li > img {
    width: 100%;
    object-fit: cover;
    aspect-ratio: 16/9;
}
body.work-with-us > main > .proposal ul li > div {
    position: relative;
    padding: 28px 28px 20px;
}
@media only screen and (max-width: 720px) {
    body.work-with-us > main > .proposal ul li > div {
        padding: 20px 20px 10px;
    }
}
body.work-with-us > main > .proposal ul li > div:after {
    content: "";
    position: absolute;
    width: 23px;
    height: 44px;
    bottom: 0;
    right: 0;
    background-color: var(--red);
}
@media only screen and (max-width: 720px) {
    body.work-with-us > main > .proposal ul li > div:after {
        width: 8px;
        height: 20px;
    }
}
body.work-with-us > main > .proposal ul li > div a {
    display: block;
    font-weight: 700;
    font-size: 18px;
    line-height: 20px;
    letter-spacing: -0.02em;
    margin-bottom: 100px;
}
@media only screen and (max-width: 720px) {
    body.work-with-us > main > .proposal ul li > div a {
        font-size: 12px;
        line-height: 1.2;
        gap: 20px;
        margin-bottom: 20px;
    }
}
body.work-with-us > main > .proposal ul li > div span {
    line-height: 18px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--red);
}
@media only screen and (max-width: 720px) {
    body.work-with-us > main > .proposal ul li > div span {
        font-size: 10px;
        line-height: 1.2;
    }
}
body.work-with-us > main > .vacancies {
    padding: 40px 0 80px;
}
@media only screen and (max-width: 720px) {
    body.work-with-us > main > .vacancies h2 {
        text-align: center;
        text-transform: capitalize;
    }
}
body.work-with-us > main > .vacancies .vacancies-list {
    margin-top: 80px;
    background-color: var(--light-gray);
    padding: 40px 0;
}
@media only screen and (max-width: 720px) {
    body.work-with-us > main > .vacancies .vacancies-list {
        margin-top: 40px;
    }
}
body.work-with-us > main > .vacancies .vacancies-list .wrapper > ul {
    display: flex;
    gap: 80px;
}
@media only screen and (max-width: 720px) {
    body.work-with-us > main > .vacancies .vacancies-list .wrapper > ul {
        flex-direction: column;
        gap: 40px;
    }
}
body.work-with-us > main > .vacancies .vacancies-list .wrapper > ul li {
    flex-basis: 33%;
    background-color: #fff;
    padding: 20px 12px;
    border: 1px solid #e7e7e7;
    border-radius: 4px;
    text-align: center;
}
@media only screen and (max-width: 720px) {
    body.work-with-us > main > .vacancies .vacancies-list .wrapper > ul li {
        flex-basis: 1;
        width: 188px;
        margin: 0 auto;
        padding: 12px 8px;
    }
}
body.work-with-us > main > .vacancies .vacancies-list .wrapper > ul li > img {
    width: 100%;
}
body.work-with-us > main > .vacancies .vacancies-list .wrapper > ul li > h3 {
    font-weight: 700;
    font-size: 18px;
    line-height: 20px;
    letter-spacing: -0.02em;
    margin: 14px 0 40px;
}
@media only screen and (max-width: 720px) {
    body.work-with-us > main > .vacancies .vacancies-list .wrapper > ul li > h3 {
        font-size: 12px;
        line-height: 1.2;
        margin-bottom: 20px;
    }
}
body.work-with-us > main > .vacancies .vacancies-list .wrapper > ul li > a:first-of-type {
    display: block;
    padding: 12px 0;
    font-weight: 700;
    font-size: 14px;
    line-height: 17px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 10px;
}
@media only screen and (max-width: 720px) {
    body.work-with-us > main > .vacancies .vacancies-list .wrapper > ul li > a:first-of-type {
        font-size: 12px;
        line-height: 1.2;
        letter-spacing: normal;
    }
}
@media only screen and (max-width: 720px) {
    body.work-with-us > main > .vacancies .vacancies-detail {
        padding: 22px;
    }
}
body.work-with-us > main > .vacancies .vacancies-detail h2 {
    font-weight: 700;
    font-size: 40px;
    line-height: 112%;
    letter-spacing: -0.04em;
    margin-bottom: 40px;
}
@media only screen and (max-width: 720px) {
    body.work-with-us > main > .vacancies .vacancies-detail h2 {
        font-size: 20px;
    }
}
body.work-with-us > main > .vacancies .vacancies-detail > p {
    line-height: 24px;
    margin-bottom: 20px;
}
@media only screen and (max-width: 720px) {
    body.work-with-us > main > .vacancies .vacancies-detail > p {
        font-size: 12px;
        line-height: 1.2;
    }
}
body.work-with-us > main > .vacancies .vacancies-detail > p:last-of-type {
    margin-bottom: 40px;
}
body.contact > main > .container {
    padding: 40px 0 80px;
}
@media only screen and (max-width: 720px) {
    body.contact > main > .container {
        padding: 20px 0;
    }
    body.contact > main > .container h2 {
        padding: 0 20px;
    }
}
body.contact > main > .container .form {
    display: flex;
    background-color: var(--light-gray);
    margin-top: 90px;
}
@media only screen and (max-width: 720px) {
    body.contact > main > .container .form {
        padding: 20px;
        margin-top: 0;
    }
}
body.contact > main > .container .form .wrapper {
    display: flex;
    align-items: center;
}
@media only screen and (max-width: 720px) {
    body.contact > main > .container .form .wrapper {
        flex-direction: column;
        width: 100%;
    }
}
body.contact > main > .container .form .wrapper form {
    flex-basis: 60%;
    padding-right: 55px;
}
@media only screen and (max-width: 720px) {
    body.contact > main > .container .form .wrapper form {
        flex-basis: auto;
        width: 100%;
        padding: 0;
    }
}
body.contact > main > .container .form .wrapper form input,
body.contact > main > .container .form .wrapper form textarea {
    display: block;
    border: 1px solid #616161;
    border-radius: 6px;
    padding: 14px 12px;
    margin: 20px 0 24px;
    width: 720px;
}
@media only screen and (max-width: 720px) {
    body.contact > main > .container .form .wrapper form input,
    body.contact > main > .container .form .wrapper form textarea {
        width: 100%;
        margin: 8px 0 16px;
    }
}
body.contact > main > .container .form .wrapper form textarea {
    height: 362px;
}
@media only screen and (max-width: 720px) {
    body.contact > main > .container .form .wrapper form textarea {
        height: 100px;
    }
}
body.contact > main > .container .form .wrapper form > div label {
    padding: 0 12px;
}
@media only screen and (max-width: 720px) {
    body.contact > main > .container .form .wrapper form > div label {
        padding: 0;
        font-weight: 500;
    }
}
body.contact > main > .container .form .wrapper form > div:last-of-type {
    display: flex;
    justify-content: center;
}
@media only screen and (max-width: 720px) {
    body.contact > main > .container .form .wrapper form > div:last-of-type {
        display: block;
    }
}
body.complaint > main > .wrapper {
    padding: 40px 0 80px;
}
@media only screen and (max-width: 720px) {
    body.complaint > main > .wrapper {
        padding: 20px 0;
    }
    body.complaint > main > .wrapper h2 {
        padding: 0 22px;
    }
}
body.complaint > main > .wrapper > .content {
    max-width: 920px;
    margin: 60px auto 0;
}
@media only screen and (max-width: 720px) {
    body.complaint > main > .wrapper > .content {
        font-size: 12px;
        padding: 0 22px;
        margin: 0;
    }
}
body.complaint > main > .wrapper > .content p {
    line-height: 24px;
}
body.complaint > main > .wrapper > .content ul {
    list-style-type: disc;
    padding-left: 1.5em;
}
body.complaint > main > .wrapper > .content li {
    line-height: 24px;
}
body.complaint > main > .wrapper > .content h2 {
    font-weight: 700;
    font-size: 32px;
    line-height: 112%;
    color: var(--red);
    margin: 20px 0;
}
@media only screen and (max-width: 720px) {
    body.complaint > main > .wrapper > .content h2 {
        font-size: 12px;
        letter-spacing: 2.4px;
        text-align: center;
    }
}
body.complaint > main > .wrapper > .content img {
    display: block;
    width: 552px;
    margin: 60px auto;
}
body.static > main {
    padding: 40px 80px;
    max-width: 1280px;
    margin: 24px auto;
}
@media only screen and (max-width: 720px) {
    body.static > main {
        padding: 20px;
    }
}
body.static > main h2 {
    font-weight: 700;
    font-size: 40px;
    line-height: 112%;
    letter-spacing: -0.04em;
}
@media only screen and (max-width: 720px) {
    body.static > main h2 {
        font-size: 20px;
    }
}
body.static > main p {
    line-height: 24px;
    display: block;
    margin: 20px 0;
}
@media only screen and (max-width: 720px) {
    body.static > main p {
        font-size: 12px;
        line-height: 1.2;
    }
}

/*header .action {
    display: flex;
    align-items: center;
    gap: 16px;
}
header .action-search {
    width: 44px;
    height: 44px;
    cursor: pointer;
}
header .action-language {
    display: flex;
    justify-content: center;
}
header .action-language ul {
    position: relative;
    width: 44px;
    height: 44px;
    margin-left: 20px;
}
@media only screen and (max-width: 720px) {
    header .action-language ul {
        width: 28px;
    }
}
header .action-language ul li {
    position: absolute;
    top: 8px;
    width: 28px;
    height: 28px;
}
header .action-language ul:hover > li:first-of-type {
    top: 48px;
}*/
footer {
    position: relative;
    background: var(--gray);
    color: #fff;
    margin-top: 120px;
}
@media only screen and (max-width: 720px) {
    footer {
        margin-top: 60px;
    }
}
footer .form-subscribe {
    position: relative;
    max-width: 1040px;
    margin: 0 auto;
    background: white;
    border: 1px solid #d0d0d0;
    box-shadow: 0 20px 40px #0003;
    border-radius: 20px 20px 0 0;
    padding: 35px 40px;
    color: var(--gray);
    transform: translateY(-50%);
}
@media only screen and (max-width: 720px) {
    footer .form-subscribe {
        width: calc(100% - 44px);
        padding: 12px;
    }
}
footer .form-subscribe > h2 {
    font-weight: 500;
    font-size: 35px;
    line-height: 42px;
    letter-spacing: -0.02em;
    color: var(--red);
}
@media only screen and (max-width: 720px) {
    footer .form-subscribe > h2 {
        font-weight: 400;
        font-size: 14px;
        line-height: 16px;
    }
}
footer .form-subscribe > p {
    font-weight: 700;
    font-size: 18px;
    line-height: 20px;
    letter-spacing: -0.02em;
    margin-top: 6px;
    margin-bottom: 26px;
}
@media only screen and (max-width: 720px) {
    footer .form-subscribe > p {
        font-size: 10px;
        line-height: 12px;
        letter-spacing: -0.02em;
        margin-bottom: 14px;
    }
}
footer .form-subscribe > img {
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    height: 100%;
}
@media only screen and (max-width: 720px) {
    footer .form-subscribe > img {
        max-width: 140px;
    }
}
footer .form-subscribe > form {
    display: flex;
}
footer .form-subscribe > form input {
    border: 1px solid #d0d0d0;
    padding: 17px 25px;
    border-radius: 6px 0 0 6px;
    font-size: 12px;
    line-height: 12px;
    width: 360px;
}
footer .form-subscribe > form button {
    font-weight: 700;
    font-size: 12px;
    line-height: 12px;
    text-align: center;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    background: var(--red);
    padding: 17px 25px;
    border-radius: 0 6px 6px 0;
    color: #fff;
}
@media only screen and (max-width: 720px) {
    footer .form-subscribe > form input {
        padding: 4px 8px;
        width: 120px;
    }
    footer .form-subscribe > form button {
        padding: 4px 8px;
        font-size: 10px;
        line-height: 12px;
        letter-spacing: -0.02em;
    }
}
footer .content {
    max-width: 1040px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 40px;
	padding-top: 40px;
}
@media only screen and (max-width: 720px) {
    footer .content {
        padding: 22px;
        align-items: flex-end;
    }
}
footer .content > div {
    flex-basis: 33%;
}
@media only screen and (max-width: 720px) {
    footer .content > div {
        flex-basis: 50%;
    }
}
@media only screen and (max-width: 720px) {
    footer .content .info > img {
        width: 80px;
    }
}
footer .content .contact {
    max-width: 248px;
    margin-top: 16px;
    margin-bottom: 36px;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
}
footer .content .contact > span {
    display: block;
    margin-bottom: 10px;
}
@media only screen and (max-width: 720px) {
    footer .content .contact {
        font-size: 10px;
        line-height: 11px;
		margin-bottom: 0;
		padding-right: 18px;
    }
}
footer .content > .certificate {
    display: flex;
    justify-content: center;
}
@media only screen and (max-width: 720px) {
    footer .content > .certificate {
        display: none;
    }
}
footer .content > .certificate > div {
    display: inline-block;
    padding: 4px;
}
footer .content .connect > h3 {
    font-weight: 700;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
@media only screen and (max-width: 720px) {
    footer .content .connect > h3 {
        font-size: 10px;
        line-height: 12px;
    }
}
footer .content .connect > .socmed {
    display: flex;
    gap: 14px;
}
footer .content .links {
    display: flex;
    justify-content: center;
}
footer .content .links > div > h3 {
    display: inline-block;
    font-weight: 700;
    font-size: 22px;
    line-height: 24px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-bottom: 3px solid var(--red);
    padding-right: 24px;
    padding-bottom: 16px;
    margin-bottom: 10px;
}
@media only screen and (max-width: 720px) {
    footer .content .links > div > h3 {
        font-size: 12px;
        line-height: 15px;
    }
}
footer .content .links > div > ul li a {
    font-weight: 700;
    font-size: 16px;
    line-height: 34px;
}
@media only screen and (max-width: 720px) {
    footer .content .links > div > ul li a {
        font-size: 10px;
        line-height: 24px;
    }
}
footer .content .links > div > div {
    margin-top: 22px;
	display: none;
}
@media only screen and (max-width: 720px) {
    footer .content .links > div > div {
        display: block;
    }
	footer .content .info > .connect {
        display: none;
    }
}
footer .copy {
    background: var(--red);
    font-size: 14px;
    line-height: 56px;
    text-align: center;
}
@media only screen and (max-width: 720px) {
    footer .copy {
        font-size: 10px;
        line-height: 35px;
    }
}
footer > .to-top {
    background: white;
    border: 1px solid var(--red);
    border-radius: 50%;
    position: absolute;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    right: 0;
    transform: translate(-100%, -50%);
}
@media only screen and (max-width: 720px) {
    footer > .to-top {
        width: 28px;
        height: 28px;
    }
    footer > .to-top > img {
        width: 50%;
    }
}


html {
	scroll-behavior: smooth;
}

.wpml-ls-legacy-dropdown {
	width: auto;
}

.wpml-ls-legacy-dropdown a {
	border: none;
	padding: 0;
}

.wpml-ls-legacy-dropdown .wpml-ls-sub-menu {
	border: none;
	padding-top: 4px;
}

.wpml-ls-legacy-dropdown a:hover, .wpml-ls-legacy-dropdown .wpml-ls-current-language:hover>a {
	background: none;
}

.wpml-ls-legacy-dropdown a.wpml-ls-item-toggle {
	padding: 0;
	padding-right: 24px;
}

.wpml-ls-legacy-dropdown a.wpml-ls-item-toggle:after {
	content: url("https://kemitraan.or.id/wp-content/themes/blankslate/images/icons/ic-arrow-down.svg");
	border: none;
	transform: translate(16px, -10px);
}

.search-modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: rgba(255,255,255,.8);
    backdrop-filter: blur(5px);
    z-index: 999;
}

#search-modal:checked + .search-modal {
  display: block;
}

.search-modal form {
	max-width: 400px;
	margin: 64px auto;
}

.search-modal form input[type="search"] {
	display: block;
	border-bottom: 2px solid #111;
	padding: 8px;
	font-size: 24px;
	width: 100%;
}

.search-modal form input[type="submit"] {
	font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    color: #fff;
    letter-spacing: .1em;
    text-transform: uppercase;
    background: var(--red);
    padding: 8px 16px;
    border-radius: 8px;
    display: block;
    cursor: pointer;
    text-align: center;
    border: 1px solid var(--red);
    margin: 16px auto;
    max-width: 100px;
}

.search-modal .action-search {
	position: fixed;
    top: 32px;
    right: 16px;
    cursor: pointer;
    transform: rotate(45deg);
}

li.glide__slide iframe {
	pointer-events: none;
}

li.glide__slide--active iframe {
	pointer-events: auto;
}

div.wpforms-container-full {
	width: 100% !important;
}

/*====================================== NEW START ====================================*/
body {
	--container-default-padding-left: 0;
	--container-default-padding-right: 0;
}
.header-wrapper {
	padding: 1.5rem 0;
	background: #fff;
}
header {
	width: 100%;
    max-width: 1440px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    padding: 0 20px;
	column-gap: 15px;
	height: auto;
	background-color: #f0f1f1;
	position: relative;
}
@media only screen and (max-width: 1024px) {
	.header-wrapper {
		padding: 1rem;
	}
    header {
		column-gap: 0;
		padding: 0;
    }
    header .logo {
        height: 80px;
    }
}
.logo img {
  height: auto;
}
@media only screen and (min-width: 1025px) and (max-width: 1200px) {
	header .menu li.no-sub {
		margin-left: 15px;
	}
}
header .menu {
    display: flex;
    flex-grow: 1;
    align-items: center;
    justify-content: space-evenly;
}
header .menu:not(#menu-wpml-menu) {
	column-gap: 2rem;
}
@media only screen and (max-width: 1024px) {
	header #navigation-toggle + div {
		width: 24%;
	}
	header #navigation-toggle + div > .menu {
        position: absolute;
        display: none;
        top: 90%;
        right: 0;
        min-width: 60vw;
        z-index: 99;
        background-color: #ffffff;
        padding: 12px 0;
		box-shadow: 0px 10px 25px #00000040;
    }
}
header .menu > li {
    position: relative;
}
header .menu > li.menu-item-has-children > a:after {
    content: "";
	display: block;
	background: url("images/icons/ic-down-red.svg") no-repeat center bottom;
	background-size: contain;
	width: 8px;
	height: 8px;
	margin-left: 3px
}
@media only screen and (max-width: 1024px) {
    header .menu > li {
        display: block;
        padding: 0 1rem;
    }
}
header .menu > li:hover > ul {
    display: block;
    z-index: 55;
}
header .menu > li > a {
    display: flex;
    align-items: center;	
    padding: 18px 0;
	text-align: right;
}
header .menu li a {
	font-size: 14px;
	font-weight: 700;
}
header .menu > li > a + ul {
    display: none;
    position: absolute;
    min-width: 261px;
    box-shadow: 0px 10px 25px #00000040;
    padding: 10px 0;
    background: #ffffff;
}
header .menu > li > a + ul li a {
    display: block;
    padding: 10px 1rem;
}
header .action-menu {
    display: none;
}
@media only screen and (max-width: 1024px) {
    header .action-menu {
        display: block;
		padding-right: 10px;
    }
	header .action-menu img {
        vertical-align: middle;
    }
    header .menu > li > a {
        text-transform: capitalize;
    }
	header .menu > li > a + ul {
		min-width: 45vw;
	}
	header .menu > li > a + ul li a {
		padding: 14px 1rem;
	}
}

header .menu > li > a + ul li a:hover,
header .menu > li:hover > a,
header .menu > li.current-menu-parent > a,
header .menu li ul li.current-menu-item a{
    color: var(--red);
}
header .wpml-ls-menu-item .wpml-ls-flag {
	border-radius: 100%;
    height: 25px;
    border: solid 2px #eff0f0;
    width: 25px;
    object-fit: cover;
    box-shadow: 0px 1px 6px rgba(0, 0, 0, .5);
}
header .wpml-ls-menu-item {
	padding: 0 .5rem;
}
header .menu > li.wpml-ls-menu-item > a {
	padding: 6px 0;
}
header .wpml-ls-menu-item + .wpml-ls-menu-item {
	border-left: solid 3px #e32423;
}
header #navigation-toggle:checked + div > .menu {
    display: block;
}

@media only screen and (min-width: 1024px) {
  footer .content>div:not(.info) {
	  flex-basis: max-content;
  }
	footer .content {
		column-gap: 7%;
	}
}

@media only screen and (max-width: 720px) {
	footer .content {
		flex-wrap: wrap;
	}
	footer .content>.certificate {
		display: block;
		flex-basis: 100%;
		margin-top: 20px;
	}

}

footer .content .certificate img {
	height: auto;
}

@media only screen and (max-width: 1024px) {
  footer .content div>img {
    height: auto;
  }
	.logo img {
    width: auto;
		max-height: 100%;
  }
	footer .content .links .certificate {
		width: 75px;
	}
}

@media only screen and (max-width: 1310px) {
   .detail .post-header {
    padding:10px 22px;
   }
	.detail .post-content {
		padding: 0 22px;
	}
}
.icon-hover-desc .elementor-icon-box-description {
	position: absolute;
  top: 30%;
  width: 150%;
  left: -25%;
  background: #eee;
  padding: 7px;
  border-radius: 4px;
  opacity: 0;
}
.icon-hover-desc:hover .elementor-icon-box-description {
	opacity: 1;
}

.detail .post-content>p, .detail .post-content>ul, .detail .post-content>ol {
	max-width: 1140px;
}

.post-content ul {
	list-style: disc;
  padding-inline-start: 1.1rem;
}

.card-kemitraan .elementor-post__card {
	padding: 1.65rem 1.65rem 2rem;
}
.card-kemitraan .elementor-post__thumbnail__link {
	padding: 4px;
    border: solid 2px red;
    border-radius: 14px;
}
.card-kemitraan .elementor-post__thumbnail {
	border-radius: 11px;
}
.card-kemitraan .elementor-post__text {
	border-bottom: solid 2px red;
}
.card-kemitraan .elementor-post__text {
	padding: 0 !important;
}

.suffix-super .elementor-counter-number-suffix {
	font-size: 2.85rem;
}