@charset "utf-8";
    /* CSS Document */

    *,
    body {
        margin: 0;
        padding: 0;
    }

    html,
    body {
        color: #3D3D3D;
        width: 100%;
        height: 100%;
        font-family: Source Han Sans-Medium, Source Han Sans;
        font-size: 62.5%;
    }

    .main {
        width: 63%;
        margin: 0 auto;
    }

    .header-top {
        position: fixed;
        background: url(images/header_bg.png) no-repeat;
        background-size: 100% 100%;
        width: 100%;
        left: 0;
        right: 0;
        top: 0;
        padding: 1rem 0;
        z-index: 10;
    }

    nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .logo {
        display: flex;
        align-items: center;
        color: #3D3D3D;
        text-decoration: none;
        font-size: 2rem;
    }

    .logo img {
        margin-right: 10px;
    }

    .menu {
        display: flex;
        list-style: none;
    }

    .menu a {
        color: #3D3D3D;
        display: block;
        margin-left: 3rem;
        text-decoration: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 1.6rem;
        text-align: center;
    }

    .menu a span {
        width: 2rem;
        height: 0px;
        opacity: 1;
        border: 1px solid transparent;
        display: inline-block;
        margin-top: 2px;
    }

    .menu a.active span {
        border-color: #000AFF;
    }

    .banner {
        top: 5rem;
        position: relative;
        line-height: 0;
    }

    .img {
        width: 100%;
    }

    .banner-txt {
        position: absolute;
        top: 18%;
        margin-left: 5%;
        text-align: center;
    }

    .banner-txt h1 {
        font-size: 4.8rem;
        line-height: 180%;
        font-weight: 500;
        letter-spacing: 5px;
    }

    .banner-txt p {
        font-size: 2.4rem;
        line-height: 150%;
    }

    .title {
        margin-bottom: 20px;
    }

    .title-line {
        width: 4rem;
        height: 0px;
        opacity: 1;
        border: 2px solid #000AFF;
        display: block;
    }

    .title-menu {
        font-size: 2rem;
        line-height: 150%;
        margin-top: 1.5rem;
    }

    .title-en {
        font-size: 1.4rem;
        line-height: 2rem;
    }

    .company,
    .culture,
    .product,
    .contact {
        padding: 9rem 0;
    }

    .box {
        display: flex;
        align-items: center;
    }

    .box-container {
        flex: 1;
        margin-right: 10%;
        font-size: 1.8rem;
        line-height: 150%;
    }

    .company .info {
        font-size: 1.4rem;
        line-height: 180%;
        margin-top: 2rem;
    }

    .box-img {
        line-height: 0;
        width: 35%;
    }

    .culture {
        background: #F8F8F8;
    }

    .culture .box-container {
        margin-right: 0;
        margin-left: 10%;
    }

    .box-culture {
        display: flex;
        flex-wrap: wrap;
    }

    .white,
    .blue {
        width: 50%;
        font-size: 1.8rem;
        line-height: 150%;
    }

    .white div,
    .blue div {
        padding: 12% 14%;
    }

    .white {
        background: #fff;
    }

    .blue {
        background: #000AFF;
        color: #fff;
    }

    .white h4,
    .blue h4 {
        font-size: 2.4rem;
        line-height: 120%;
        margin-bottom: 1rem;
        font-weight: 500;
    }

    .product .box {
        align-items: start;
        margin-top: 4rem;
    }

    .product .box-img {
        display: flex;
        justify-content: space-between;
        width: 55%;
    }

    .product .box-img img {
        width: 30%;
    }

    .app-icon {
        display: flex;
        align-items: center;
    }

    .app-icon img {
        margin-right: 1.5rem;
    }

    .product .info {
        font-size: 1.4rem;
        line-height: 180%;
        margin-top: 2rem;
    }

    .contact {
        background: #333;
        color: #fff;
        font-size: 1.4rem;
        line-height: 150%;
    }

    .contact h4 {
        font-size: 2rem;
        line-height: 120%;
    }

    .contact .info {
        margin: 5rem 0;
    }

    .contact p {
        margin-top: 1rem;
    }

    footer {
        background: #282828;
        color: #fff;
        font-size: 1.4rem;
        line-height: 150%;
        padding: 2rem 0;
        text-align: center;
    }

    @media screen and (max-width: 1415px) {

        .white,
        .blue {
            font-size: 1.6rem;
        }
    }

    @media screen and (max-width: 1280px) {
        .banner-txt h1 {
            font-size: 3rem;
        }

        .banner-txt p {
            font-size: 1.8rem;
        }
    }

    @media screen and (max-width: 1115px) {
        .main {
            width: 80%;
        }

        .banner-txt h1 {
            font-size: 2.4rem;
        }

        .white,
        .blue {
            font-size: 1.4rem;
        }
    }

    @media screen and (max-width: 1000px) {

        .white,
        .blue {
            font-size: 1.2rem;
        }
    }

    @media screen and (max-width:640px) {
        .main {
            width: 90%;
        }

        .logo {
            font-size: 1.2rem;
        }

        .banner-txt {
            margin-left: 0;
        }

        .banner-txt h1 {
            font-size: 1.6rem;
        }

        .banner-txt p {
            font-size: 1.2rem;
        }

        .menu a {
            font-size: 1.2rem;
            margin-left: 1rem;
        }

        .box-container {
            font-size: 1.4rem;
        }

        .company .info {
            font-size: 1.2rem;
        }

        .product .box-img {
            flex-direction: column;
            width: 35%;
        }

        .product .box .box-img {
            align-items: center;
        }

        .product .box-img img {
            width: 40%;
            margin-top: 1rem;
        }
    }