/* Global */
    :root {
        --bg: #000;
        --primary: #06F28C;
        --gray10: #F4F4F4;
        --gray30: #C8C8C8;
        --gray50: #969696;
        --gray80: #383838;
        --gray90: #222222;
        --font-light: 300;
        --font-regular: 400;
        --font-medium: 500;
        --font-bold: 700;
        --padding: 32px;

        /* Scroll down properties */
        --scrolldown-width: 186px;
        --scrolldown-height: 1px;
        --scrolldown-colour: #fff;
        --scrolldown-background: #969696;
        --scrolldown-duration: 2.5s;
        --scrolldown-timing-fn: ease-in-out;
    }

    body {
        font-family: "HCo Gotham", sans-serif;
        background-color: var(--bg);
        color: var(--gray10);
        font-size: 16px;
        letter-spacing: -0.3px;
        line-height: 1.5;
    }

    * {
        box-sizing: border-box;
    }

    ul,
    li,
    p {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    a {
        text-decoration: none;
        transition: color .2s;
    }

    h1 {
        margin: 0;
        padding: 0;
        font-size: 24px;
        font-weight: var(--font-light);
        line-height: 1.2;
        margin-bottom: 22px;
    }

    h1 b {
        font-weight: var(--font-medium);
        font-style: italic;
    }

    article {
        word-break: break-word;
        color: var(--gray30);
        font-weight: var(--font-light);
    }

    article b {
        font-weight: var(--font-medium);
    }

    .num {
        display: flex;
        align-items: center;
        font-weight: var(--font-bold);
        margin-bottom: 20px;
    }

    .num::after {
        content: '';
        display: block;
        width: 80px;
        height: 1px;
        background: var(--gray10);
        margin-left: 16px;
    }

    .article-num {
        color: var(--gray10);
        font-weight: var(--font-bold);
        font-style: italic;
        margin-bottom: 12px;
    }

    .hero,
    .section-1,
    .section-2,
    .section-3,
    .section-4,
    .section-5,
    .image-container-01,
    .image-container-02,
    footer {
        overflow: hidden;
    }

    /* Header */


    header {
        /* position: fixed;
        top: 0;
        left: 0;
        width: 100%; */
        padding: 24px var(--padding) 12px;
        /* background-color: var(--bg); */
        transition: all 0.2s;
        opacity: 1;
        z-index: 3;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        position: relative;
    }

    header.hidden {
        opacity: 0;
        pointer-events: none;
    }

    header .logo {
        font-size: 0;
        width: 32px;
        height: 60px;
        opacity: 0;
    }

    header .mobile-logo {
        left: var(--padding);
        font-size: 0;
        width: 32px;
        height: 60px;
        background-image: url(../img/logo.svg?v2);
        background-size: contain;
        background-position: left center;
        background-repeat: no-repeat;
        position: absolute;
        top: 24px;
        left: var(--padding);
        z-index: 99;
    }

    header .mobile-logo a {
        display: block;
        width: 100%;
        height: 100%;
    }

    header nav ul {
        display: flex;
        justify-content: flex-start;
        flex-direction: column;
    }

    #menuToggle {
        display: flex;
        flex-direction: column;
        z-index: 1;
        -webkit-user-select: none;
        user-select: none;
    }

    #menuToggle input {
        display: flex;
        width: 40px;
        height: 40px;
        position: absolute;
        top: 18px;
        right: 24px;
        cursor: pointer;
        opacity: 0;
        z-index: 98;
    }

    #menuToggle>span {
        display: flex;
        width: 24px;
        height: 2px;
        margin-bottom: 6px;
        position: relative;
        background: var(--gray10);
        z-index: 2;
        transform-origin: -3px 2px;
        transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
            background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
            opacity 0.55s ease;
    }

    #menuToggle span:first-of-type {
        transform-origin: 0% 0%;
        margin-top: 5px;
    }

    #menuToggle span:nth-last-of-type(2) {
        transform-origin: 0% 100%;
    }

    #menuToggle input:checked~span {
        opacity: 1;
        transform: rotate(45deg) translate(3.5px, -3px);
        background: var(--gray10);
    }

    #menuToggle input:checked~span:nth-last-child(3) {
        opacity: 0;
        transform: rotate(0deg) scale(0.2, 0.2);
    }

    #menuToggle input:checked~span:nth-last-child(2) {
        transform: rotate(-45deg) translate(2px, 6px);
    }

    #menu {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        overflow: hidden;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0 var(--padding);
        background-color: var(--bg);
        -webkit-font-smoothing: antialiased;
        z-index: 1;
        transform-origin: 0% 0%;
        transform: translate(100%, 0);
        transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
        -webkit-transform-origin: 0% 0%;
        -webkit-transform: translate(100%, 0);
        -webkit-transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
    }

    #menuToggle input:checked~ul {
        transform: none;
    }

    #menu li:first-child {
        margin-top: 19vh;
    }

    header nav a {
        display: flex;
        align-items: center;
        color: var(--bg);
        -webkit-text-stroke: 0.5px var(--gray10);
        text-stroke: 0.5px var(--gray10);
        font-size: 28px;
        font-weight: 700;
        padding: 10px 0;
        white-space: nowrap;
    }

    header nav a span {
        -webkit-text-stroke: 0;
        text-stroke: 0;
        color: var(--gray10);
        font-weight: var(--font-regular);
        font-size: 11px;
        font-style: italic;
        margin-top: 0 !important;
        margin-right: 30px;
    }

    header .mobile-footer {
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        font-size: 14px;
        z-index: 97;
        padding: 0 var(--padding) 40px;
    }

    .social {
        display: flex;
        flex-direction: row;
        margin-bottom: 20px;
        font-size: 0;
    }

    .social li {
        margin: 0 6px 0 0 !important;
    }

    .social li a {
        padding: 0;
    }

    .social img {
        width: 41px;
        height: 46px;
    }

    /* Hero */

    .hero {
        position: relative;
        padding: 12px var(--padding) 0;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

    .hero .inner {
        display: inline-block;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

    .hero .inner .text {
        white-space: nowrap;
        line-height: 1.07;
        text-transform: uppercase;
        letter-spacing: -1.5px;
        font-size: 7.4666vw;
    }

    .hero .inner .text .highlight {
        margin-left: 26px;
        font-weight: var(--font-bold);
        color: var(--primary);
        font-style: italic;
    }

    .hero .video {
        position: relative;
        margin-top: 50px;
        width: 100%;
        padding-bottom: 100%;
        background-image: url(/img/video-bg.jpg);
        background-size: cover;
    }

    .hero video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }

    .scrolldown-container {
        display: flex;
        align-items: center;
        line-height: 1.2;
        position: absolute;
        top: 12px;
        left: var(--padding);
        transform: translateX(-100%) rotate(-90deg);
        transform-origin: 100% 0%;
    }

    .scrolldown {
        width: var(--scrolldown-width);
        height: var(--scrolldown-height);
        background-color: var(--scrolldown-background);
        position: relative;
        overflow: hidden;
    }

    .scrolldown::before {
        content: '';
        position: absolute;
        width: var(--scrolldown-width);
        height: var(--scrolldown-height);
        background-color: var(--scrolldown-colour);
        animation: scrolldown var(--scrolldown-duration) var(--scrolldown-timing-fn) infinite;
    }

    .scrolldown-container .text {
        font-size: 12px;
        padding-right: 18px;
        white-space: nowrap;
        color: var(--gray50);
    }

    @keyframes scrolldown {
        0% {
            right: calc(var(--scrolldown-width) * -1);
        }

        5% {
            right: calc(var(--scrolldown-width) * -1);
        }

        100% {
            right: var(--scrolldown-width);
        }
    }

    /* Section 1 */

    .section-1 {
        padding: 65px var(--padding) 0;
    }

    .section-1 h1 {
        margin-bottom: 60px;
    }

    .section-1 article {
        padding-left: 58px;
        margin-bottom: 40px;
    }

    .section-1 article:last-child {
        margin-bottom: 100px;
    }

    .image-container-01 {
        position: relative;
        height: 243px;
    }

    .image-container-01 .text {
        position: absolute;
        left: var(--padding);
        top: 0;
        color: var(--primary);
        font-size: 48px;
        font-style: italic;
        line-height: 1;
        opacity: 0.2;
        z-index: 2;
    }

    .image-container-01 img {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: auto;
        height: 214px;
        z-index: 1;
    }

    /* Section 2 */

    .section-2 {
        padding: 120px var(--padding) 0;
    }

    .section-2 a {
        color: var(--gray10);
    }

    .image-container-02 {
        margin-top: 120px;
        position: relative;
        height: 35vw;
        max-height: 234px;
    }

    .image-container-02 .image01 {
        position: absolute;
        top: 0;
        left: 0;
        width: auto;
        height: 100%;
    }

    .image-container-02 .image02 {
        position: absolute;
        top: 0;
        left: 55%;
        width: auto;
        height: 100%;
    }

    /* Section 3 */

    .section-3 {
        padding: 140px var(--padding) 0;
    }

    .section-3 h1 {
        margin-bottom: 40px;
    }

    .section-3 .article01 {
        margin-bottom: 40px;
    }

    .section-3 .videos {
        max-width: 640px;
        width: 100%;
        padding-bottom: 100%;
        position: relative;
    }

    .section-3 .video01,
    .section-3 .video02,
    .section-3 .video03 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: opacity 0.5s;
    }

    .section-3 .videos .active {
        opacity: 1;
    }

    .section-3 .videos video {
        width: 100%;
        height: auto;
    }

    .section-3 .article02 ul {
        padding-top: 12px;
    }

    .section-3 .article02 li {
        cursor: pointer;
        transition: all .2s;
        border-radius: 10px;
        border: solid 1px var(--gray50);
        color: var(--gray50);
        margin-top: 14px;
        padding: 20px 32px;
    }

    .section-3 .article02 li.active {
        background: var(--gray10);
        border: solid 1px var(--gray10);
        color: var(--gray90);
    }

    .section-3 .article02 li .title {
        font-weight: var(--font-bold);
    }

    .section-3 .article02 li .description {
        font-weight: var(--font-light);
        font-size: 14px;
        display: none;
    }

    .section-3 .article02 li.active .description {
        display: block;
    }

    /* Section 4 */

    .section-4 {
        padding: 140px var(--padding) 0;
    }

    .section-4 h1 {
        margin-bottom: 40px;
    }

    .section-4 .arrow {
        padding: 60px 0;
    }

    .section-4 .arrow img {
        width: 58px;
        height: 58px;
    }

    .section-4 ul li:first-of-type {
        border-top: solid 1px var(--gray50);
    }

    .section-4 ul li {
        padding: 40px 0;
        border-bottom: solid 1px var(--gray50);
    }

    .section-4 ul li .description {
        color: var(--gray30);
        margin-top: 12px;
    }

    .section-4 ul li .image {
        text-align: center;
        margin-top: 10px;
    }

    .section-4 ul li .image img {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 285px;
    }

    /* Section 5 */

    .section-5 {
        padding: 284px var(--padding) 0;
        background-image: url(/img/05-image.png);
        background-size: auto 403px;
        background-repeat: no-repeat;
        background-position: 40% -30%;
        position: relative;
    }

    .section-5 .anchor {
        position: absolute;
        left: 0;
        top: 144px;
    }

    .section-5 h1 {
        margin-bottom: 40px;
    }

    .section-5 article {
        margin-bottom: 60px;
    }

    .section-5 a {
        display: block;
        padding: 20px 22px;
        background: url(/img/btn-arrow.svg) center right 22px no-repeat;
        background-size: 16px 16px;
        font-size: 14px;
        font-weight: var(--font-bold);
        color: var(--primary);
        border: solid 1px var(--primary);
        border-radius: 10px;
        cursor: pointer;
    }

    /* Footer */

    footer {
        padding: 180px var(--padding) 140px;
        color: var(--gray30);
        font-size: 20px;
        font-weight: var(--font-light);
    }

    footer a {
        color: var(--gray30);
    }

    footer a.email {
        color: var(--gray30);
        text-decoration: underline;
    }

    footer div {
        padding-bottom: 20px;
    }

    footer .kernel {
        padding-top: 60px;
        padding-bottom: 0;
        color: var(--gray10);
        font-weight: var(--font-regular);
    }

    @media screen and (min-width: 360px) {

        /* Hero 360 */

        .hero {
            padding: 0 var(--padding);
        }
    }

    @media screen and (min-width: 640px) {

        /* Global 640 */

        :root {
            --padding: 40px;
        }

        /* Header 640 */

        #menuToggle input {
            top: 18px;
            right: 32px;
        }

        /* Hero 640 */

        .hero .inner .text {
            font-size: 48px;
        }

        .hero .inner .text .highlight {
            margin-left: 86px;
        }

        /* Section 1 640 */

        .section-1 {
            width: 540px;
            margin: 0 auto;
            padding-left: 0;
            padding-right: 0;
        }

        .image-container-01 {
            height: 459px;
        }

        .image-container-01 .text {
            font-size: 90px;
        }

        .image-container-01 img {
            left: auto;
            right: var(--padding);
            transform: none;
            height: 405px;
        }

        /* Section 2 640 */

        .section-2 {
            padding-left: 0;
            padding-right: 0;
        }

        .section-2 .inner {
            width: 540px;
            margin: 0 auto;
            overflow: visible;
        }

        /* Section 3 640 */

        .section-3 {
            width: 540px;
            margin: 0 auto;
            overflow: visible;
            padding-left: 0;
            padding-right: 0;
        }

        /* Section 4 640 */

        .section-4 {
            width: 540px;
            margin: 0 auto;
            overflow: visible;
            padding-left: 0;
            padding-right: 0;
        }

        .section-4 ul li {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .section-4 ul li .image {
            text-align: right;
            margin-top: 0;
        }

        .section-4 ul li .image img {
            width: 160px;
            height: 180px;
            max-width: unset;
            max-height: unset;
        }

        /* Section 5 640 */

        .section-5 {
            padding-left: 0;
            padding-right: 0;
            background-position: 30% -30%;
        }

        .section-5 .inner {
            width: 540px;
            margin: 0 auto;
            overflow: visible;
        }

        /* Footer 640 */

        footer {
            width: 540px;
            margin: 0 auto;
            overflow: visible;
            padding-left: 0;
            padding-right: 0;
        }
    }

    @media screen and (min-width: 768px) {

        /* Global 768 */

        :root {
            /* Scroll down properties */
            --scrolldown-width: 288px;
        }

        body {
            font-size: 26px;
        }

        h1 {
            font-size: 40px;
        }

        .num {
            font-size: 18px;
            margin-bottom: 30px;
        }

        .num::after {
            width: 135px;
        }

        .article-num {
            font-size: 18px;
            margin-bottom: 30px;
        }

        /* Header 768 */

        header {
            padding: 42px var(--padding) 26px;
        }

        header .mobile-logo {
            top: 42px;
        }

        #menuToggle input {
            top: 34px;
            right: 32px;
        }

        header nav a {
            font-size: 38px;
        }


        .scrolldown-container {
            top: 0;
        }

        /* Hero 768 */

        .hero {
            padding-top: 34px;
        }

        .hero .inner {
            align-items: flex-start;
            margin-right: 2.7vw;
        }

        .hero .inner .text {
            font-size: 6.3vw;
        }

        .hero .video {
            margin-top: 50px;
            width: 56vw;
            padding-bottom: 56vw;
        }

        /* Section 1 768 */

        .section-1 {
            padding-top: 95px;
        }

        .section-1 h1 {
            margin-bottom: 100px;
        }

        .section-1 article {
            margin-left: 86px;
            margin-bottom: 80px;
        }

        .section-1 article:last-child {
            margin-bottom: 160px;
        }

        /* Section 2 768 */

        .section-2 {
            padding-top: 180px;
        }

        .section-2 h1 {
            margin-bottom: 60px;
        }

        .image-container-02 {
            margin-top: 160px;
        }

        /* Section 3 768 */

        .section-3 {
            padding-top: 180px;
        }

        .section-3 h1 {
            margin-bottom: 60px;
        }

        .section-3 .article02 ul {
            padding-top: 36px;
        }

        .section-3 .article02 li {
            margin-top: 24px;
            padding: 40px 86px;
        }

        .section-3 .article02 li .title {
            font-size: 26px;
        }

        .section-3 .article02 li .description {
            font-size: 22px;
        }

        /* Section 4 768 */

        .section-4 {
            padding-top: 200px;
        }

        .section-4 h1 {
            margin-bottom: 60px;
        }

        .section-4 .arrow {
            padding: 80px 0;
        }

        .section-4 .arrow img {
            width: 86px;
            height: 86px;
        }

        .section-4 ul li .description {
            margin-top: -10px;
            max-width: 300px;
        }

        /* Section 5 768 */

        .section-5 {
            padding: 487px var(--padding) 0;
            background-size: auto 787px;
            background-position: 37% -105%;
        }

        .section-5 .anchor {
            top: 287px;
        }

        .section-5 h1 {
            margin-bottom: 60px;
        }

        .section-5 a {
            padding: 34px 32px;
            font-size: 28px;
            background: url(/img/btn-arrow.svg) center right 36px no-repeat;
            background-size: 26px 26px;
            border-radius: 20px;
            max-width: 960px;
        }

        /* Footer 768 */

        footer {
            padding-top: 200px;
            padding-bottom: 160px;
            font-size: 32px;
        }

        .social {
            margin-bottom: 46px;
        }

        .social li {
            margin: 0 20px 0 0 !important;
        }

        .social img {
            width: 82px;
            height: 92px;
        }

        footer div {
            padding-bottom: 30px;
        }

        footer .kernel {
            padding-top: 100px;
        }
    }

    @media screen and (min-width: 1024px) {

        /* Global 1024 */

        :root {
            --padding: 64px;
            /* Scroll down properties */
            --scrolldown-width: 391px;
        }

        body {
            font-size: 28px;
        }

        .num {
            margin-bottom: 40px;
        }

        .num::after {
            width: 125px;
        }

        .article-num {
            font-size: 20px;
        }

        h1 {
            font-size: 48px;
        }

        /* Header 1024 */

        header {
            padding: 44px var(--padding) 60px;
            max-width: 1728px;
            margin: 0 auto;
        }

        header .logo {
            font-size: 0;
            width: 64px;
            height: 115px;
            opacity: 0;
        }

        header .mobile-logo {
            width: 64px;
            height: 115px;
            top: 44px;
        }

        header nav ul {
            display: flex;
            justify-content: flex-start;
            flex-direction: row;
        }

        #menuToggle {
            display: flex;
            flex-direction: row;
        }

        #menuToggle input {
            display: none;
        }

        #menuToggle>span {
            display: none;
        }

        #menu {
            position: static;
            overflow: hidden;
            width: 100%;
            height: auto;
            padding: 0;
            transform: none;
            -webkit-transform: none;
            display: flex;
            align-items: center;
        }

        #menu li:first-child {
            margin-top: 0;
        }

        header nav a {
            color: var(--gray30);
            -webkit-text-stroke: 0;
            text-stroke: 0;
            font-size: 18px;
            font-weight: 400;
            padding: 14px 20px;
            height: 48px;
            display: flex;
            align-items: center;
            transition: .2s;
        }

        header nav a:hover {
            color: var(--primary);
        }

        header nav a span {
            display: none;
        }

        header .mobile-footer {
            display: none;
        }

        header nav .contactus {
            padding: 4px 0 4px 20px;
        }

        header nav .contactus a {
            width: 144px;
            height: 48px;
            color: var(--gray10);
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            font-weight: 500;
            background: var(--gray90);
            border-radius: 24px;
        }

        header nav .contactus a:hover {
            background: var(--primary);
            color: var(--gray90);
        }

        /* Hero 1024 */

        .hero {
            padding-top: 0;
            max-width: 1728px;
            margin: 0 auto;
        }

        .scrolldown-container .text {
            font-size: 16px;
        }

        .hero .inner .text .highlight {
            margin-left: 112px;
        }

        .hero .video {
            width: 100%;
            padding-bottom: 100%;
            margin-top: 55px;
        }

        /* Section 1 1024 */

        .section-1 {
            padding: 125px var(--padding) 0;
            width: 90vw;
            margin: 0 0 0 auto;
        }

        .section-1 h1 {
            max-width: 780px;
        }

        .section-1 article {
            margin-left: 110px;
            margin-bottom: 100px;
            padding: 0;
            display: flex;
        }

        .section-1 article .article-num {
            width: 112px;
            padding-top: 6px;
            white-space: nowrap;
            flex: none;
        }

        .section-1 article:last-child {
            margin-bottom: 240px;
        }

        .image-container-01 {
            height: 476px;
            max-width: 2048px;
            margin: 0 auto;
        }

        .image-container-01 .inner {
            max-width: 1728px;
            margin: 0 auto;
            position: relative;
        }

        .image-container-01 .text {
            font-size: 120px;
        }

        .image-container-01 img {
            right: 144px;
        }

        /* Section 2 1024 */

        .section-2 {
            padding: 220px var(--padding) 0;
            width: 90vw;
            margin: 0 0 0 auto;
        }

        .section-2 .inner {
            width: 100%;
            padding-right: 80px;
        }

        .section-2 h1 {
            margin-bottom: 80px;
        }

        .image-container-02 {
            margin-top: 240px;
        }

        .image-container-02 .image02 {
            left: unset;
            right: 0;
        }

        /* Section 3 1024 */

        .section-3 {
            padding: 240px var(--padding) 0;
            width: 90vw;
            margin: 0 0 0 auto;
        }

        .section-3 .inner {
            width: 100%;
            padding-right: 80px;
        }

        .section-3 h1 {
            margin-bottom: 80px;
        }
        .section-3 .articles {
            position: relative;
            font-size: 24px;
            padding-left: 360px;
        }

        .section-3 .videos {
            position: absolute;
            top: 0;
            left: -90px;
            width: 450px;
            padding-bottom: 450px;
        }

        .section-3 .article01 {
            margin-bottom: 100px;
        }

        .section-3 .article02 ul {
            padding-top: 16px;
        }

        .section-3 .article02 li {
            padding: 24px 56px;
        }

        .section-3 .article02 li:hover {
            border: solid 1px var(--primary);
            color: var(--primary);
        }

        .section-3 .article02 li.active:hover {
            background: var(--gray10);
            border: solid 1px var(--gray10);
            color: var(--gray90);
        }

        .section-3 .article02 li .title {
            font-size: 22px;
        }

        .section-3 .article02 li .description {
            font-size: 18px;
            margin-bottom: 3px;
        }

        /* Section 4 1024 */

        .section-4 {
            padding: 200px var(--padding) 0;
            width: 90vw;
            margin: 0 0 0 auto;
        }

        .section-4 .inner {
            width: 100%;
            padding-right: 80px;
        }

        .section-4 h1 {
            margin-bottom: 80px;
        }

        .section-4 .arrow {
            padding: 100px 0 80px;
        }

        .section-4 .arrow img {
            width: 112px;
            height: 112px;
        }

        .section-4 ul {
            margin-left: 112px;
        }

        /* Section 5 1024 */

        .section-5 {
            padding: 526px 0 0;
            background-position: 30% -25%;
        }

        .section-5 .mentle {
            padding-bottom: 4px;
        }

        .section-5 .anchor {
            top: 326px;
        }

        .section-5 .inner {
            padding: 0 var(--padding);
            margin: 0 0 0 auto;
            width: 90vw;
        }

        .section-5 h1 {
            margin-bottom: 60px;
            width: 720px;
        }

        .section-5 article {
            width: 720px;
            margin-bottom: 100px;
        }

        .section-5 a {
            padding: 34px 46px;
            background: url(/img/btn-arrow.svg) center right 46px no-repeat;
            transition: .2s;
        }

        .section-5 a:hover {
            -webkit-box-shadow: 0px 0px 0px 4px var(--primary);
            box-shadow: 0px 0px 0px 4px var(--primary);
        }

        /* Footer 1024 */

        footer {
            padding: 200px var(--padding) 160px;
            width: 90vw;
            margin: 0 0 0 auto;
        }

        footer .inner {
            width: 700px;
        }

        footer a:hover {
            color: var(--primary);
        }

        .social li a {
            transition: .2s;
        }

        .social li a:hover {
            opacity: 0.75;
        }
    }

    @media screen and (min-width: 1280px) {

        /* Global 1280 */

        :root {
            --scrolldown-width: 509px;
        }

        h1 {
            font-size: 64px;
            max-width: 1160px;
        }

        article {
            max-width: 960px;
        }

        /* Header 1280 */

        header nav a {
            font-size: 20px;
            padding: 14px 35px;
        }

        header nav .contactus {
            padding: 5px 0 5px 35px;
        }

        header nav .contactus a {
            width: 164px;
            height: 48px;
            font-size: 16px;
        }

        /* Hero 1280 */

        .hero {
            padding-top: 60px;
        }

        .hero .inner {
            margin-right: 140px;
        }

        .hero .inner .text {
            font-size: 92px;
        }

        .hero .inner .text .highlight {
            margin-left: 160px;
        }

        .hero .video {
            margin-top: 95px;
        }

        /* Section 1 1280 */

        .section-1 {
            padding-top: 150px;
            max-width: 1408px;
            margin: 0 auto;
        }

        .section-1 h1 {
            margin-bottom: 140px;
        }

        .image-container-01 img {
            left: 0;
            right: auto;
        }

        .section-1 article {
            margin-left: 160px;
            margin-bottom: 80px;
        }

        .section-1 article .article-num {
            width: 160px;
        }

        /* Section 2 1280 */

        .section-2 {
            width: 100%;
            max-width: 100%;
            padding: 280px 0 0;
        }

        .section-2 .inner {
            width: 100%;
            max-width: 1408px;
            margin: 0 auto;
            padding: 0 var(--padding);
        }

        .section-2 h1 {
            max-width: 960px;
            margin-bottom: 100px;
        }

        .image-container-02 {
            margin-top: 300px;
            height: 398px;
            max-height: 25vw;
        }

        /* Section 3 1280 */

        .section-3 {
            max-width: 1408px;
            margin: 0 auto;
            padding-top: 280px;
        }

        .section-3 h1 {
            margin-bottom: 100px;
        }

        .section-3 .inner {
            padding: 0;
        }

        .section-3 .articles {
            padding-left: 640px;
        }

        .section-3 .videos {
            position: absolute;
            top: 0;
            left: -120px;
            width: 640px;
            padding-bottom: 640px;
        }

        .section-3 .article02 li .description {
            display: block;
        }

        .section-3 .article02 ul {
            padding-top: 36px;
        }

        /* Section 4 1280 */

        .section-4 {
            max-width: 1408px;
            margin: 0 auto;
            padding-top: 260px;
        }

        .section-4 h1 {
            margin-bottom: 100px;
        }

        .section-4 .inner {
            padding: 0;
        }

        .section-4 .infographic {
            position: relative;
            padding-left: 210px;
            margin-top: 200px;
        }

        .section-4 .arrow {
            position: absolute;
            left: 0;
            top: 0;
            padding: 0;
        }

        .section-4 .arrow img {
            width: 80px;
            height: 80px;
        }

        /* Section 5 1280 */

        .section-5 {
            padding-top: 0;
            background-position: 0;
            background-image: none;
            overflow: hidden;
        }

        .section-5 .anchor {
            top: 393px;
        }

        .mentle {
            padding-top: 653px;
            padding-bottom: 4px;
            width: 100%;
            max-width: 1408px;
            margin: 0 auto;
            overflow: visible;
            position: relative;
        }

        .section-5 .mentle::after {
            content: '';
            display: block;
            width: 2692px;
            height: 789px;
            background-image: url(/img/05-image.png);
            background-size: cover;
            background-repeat: no-repeat;
            position: absolute;
            top: 120px;
            left: 0;
        }

        .section-5 .inner {
            width: 960px;
            margin: 0 auto;
            padding: 0;
        }

        .section-5 h1 {
            width: 960px;
            margin-bottom: 80px;
        }

        .section-5 article {
            width: 960px;
        }

        footer {
            padding: 280px 0 200px;
            width: 960px;
            margin: 0 auto;
            font-size: 36px;
        }

        footer .inner {
            width: 900px;
        }
    }

    @media screen and (min-width: 1440px) {
        
        .hero .inner {
            margin-right: 170px;
        }

        .section-4 ul li {
            padding: 40px 160px;
        }
    }