@media screen and (max-width: 970px) {
    .header-scroll {
        background-color: #fff;
        box-shadow: #e6e5e5 0px 0px 10px 5px;
        position: fixed;
    }

    .header-container {
        right: 0px;
    }

    .h5-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .logo-container {
        height: 20px;
        width: 225px;
    }

    .logo-container2 {
        width: 40px;
        height: 40px;
        display: none;
    }

    .nav .logo-container {
        display: none;
    }

    .nav .logo-container2 {
        display: none;
    }

    .logo-container a {
        display: block;
    }

    .logo-container a img {
        height: 20px;
        width: 225px;
    }

    .nav-btn {
        display: flex;
        align-items: center;
    }

    .nav-btn .nav-text {
        margin-left: 5px;
    }

    .pc-header {
        max-height: 0px;
        overflow: hidden;
        transition: all 500ms linear;
    }

    .language-container {
        display: inline-block;
        margin-top: 20px;
    }

    .language-box {
        height: 24px;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        cursor: pointer;
    }


    .language-icon {
        width: 15px;
        height: 15px;
    }

    .language-text {
        font-size: 14px;
        margin: 0 10px;
    }

    .language-hidden {
        display: none;
    }

    .hidden-container {
        display: inline-block;
        background: #fff;
        z-index: 3;
        height: 0px;
        overflow: hidden;
        transition: height 500ms linear;
    }

    .hidden-container p {
        width: 100%;
        color: #197e95;
        font-size: 14px;
        text-align: center;
        box-sizing: border-box;
        display: block;
        cursor: pointer;
    }

    .hidden-container p:first-child {
        padding: 10px 0 10px;
    }

    .hidden-container p:last-child {
        padding: 0px 0 10px;
    }

    .hidden-container p a {
        width: 100%;
        position: relative;
    }

    .language-hidden-show .language-box {
        color: #197e95;
    }

    .language-hidden-show .language-show {
        display: none;
    }

    .language-hidden-show .language-hidden {
        display: block;
    }

    .language-hidden-show .hidden-container {
        height: 72px;

    }



    .nav-list {
        color: #0b0c10;
    }

    .nav-item {
        height: 40px;
    }

    .nav-link {
        display: block;
        height: 40px;
        line-height: 40px;
        margin-right: 30px;
        color: #0b0c10;
        position: relative;
    }

    .nav-link::after {
        content: '';
        display: block;
        width: 0;
        height: 2px;
        background-color: #197e95;
        position: absolute;
        bottom: 0px;
        left: 0;
        transition: all .5s ease-in-out;
    }

    .nav-link:hover::after {
        width: 100%;
    }

    .scroll-show .h5-header .logo-container {
        display: none;
    }

    .scroll-show .h5-header .logo-container2 {
        display: block;
    }

    .pc-show {
        max-height: 400px;
    }

    .footer {
        width: 100%;
        background-color: #0b0c10;
        color: #A9A9A9;
    }

    .footer-container {
        margin: 0 auto;
        font-size: 14px;
        padding: 50px 16px 20px;
        border-bottom: 1px solid #fff;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column-reverse;
    }

    .footer-nav {
        width: 100%;
        display: block;

    }

    .footer-nav li {
        width: 100%;
        font-size: 1.125rem;
        line-height: 150%;
        font-weight: 400;
        color: #fff;
        position: relative;
        font-size: 1rem;
        display: inline-block;
        margin-bottom: 20px;
    }

    .footer-link {
        display: inline-block;
        position: relative;
    }

    .footer-link::after {
        content: '';
        display: block;
        width: 0;
        height: 2px;
        background-color: red;
        position: absolute;
        bottom: -1x;
        left: 0;
        transition: all .5s ease-in-out;
    }

    .footer-link:hover::after {
        width: 100%;
    }

    .footer-contact {
        width: 100%;
        position: relative;
        margin-bottom: 20px;
    }

    .footer-contact-text {
        font-weight: 600;
        line-height: 140%;
        color: #334255;
        margin-bottom: 32px;
        color: #fff;
        font-size: 1.55rem;
    }

    .footer-contact-link {
        width: 90%;
        height: 44px;
        border-radius: 25px;
        border: 1px solid #06b6d4;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
    }

    .copyright-container {
        max-width: 1492px;
        margin: 0 auto;
        font-size: 14px;
        line-height: 20px;
        padding: 10px 16px;
    }
}

@media screen and (min-width: 970px) {

    .h5-header {
        display: none;
    }

    .header-scroll {
        background-color: #fff;
        box-shadow: #e6e5e5 0px 0px 10px 5px;
        position: fixed;
    }

    .header-container {
        right: 0px;
    }

    .language-container {
        position: absolute;
        top: 15px;
        right: 0;
    }

    .language-box {
        height: 24px;
        display: flex;
        align-items: center;
        padding: 0 10px;
        box-sizing: border-box;
        cursor: pointer;
    }

    .language-container:hover .language-box {
        border: 1px dashed #197e95;
        color: #197e95;
    }

    .language-container:hover .language-show {
        display: none;
    }

    .language-container:hover .language-hidden {
        display: block;
    }

    .language-icon {
        width: 15px;
        height: 15px;
    }

    .language-text {
        font-size: 14px;
        margin: 0 10px;
    }

    .language-hidden {
        display: none;

    }

    .hidden-container {
        display: none;
        margin-top: 5px;
        background: #fff;
        z-index: 3;
        transition: height 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
        box-shadow: -4px 6px 10px rgba(0, 0, 0, 0.15);
        padding: 0 18px;

    }

    .hidden-container p {
        width: 100%;
        color: #197e95;
        font-size: 14px;
        text-align: center;
        box-sizing: border-box;
        display: block;
        cursor: pointer;
    }

    .hidden-container p:first-child {
        padding: 10px 0 10px;
    }

    .hidden-container p:last-child {
        padding: 0px 0 10px;
    }

    .hidden-container p a {
        width: 100%;
        position: relative;
    }

    .hidden-container p a::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 0;
        height: 2px;
        background-color: #197e95;
        transition: width 0.8s ease;
    }

    .hidden-container p a:hover::after {
        width: 100%;
    }

    .language-container:hover .hidden-container {
        display: block;
    }

    .logo-container {
        height: 40px;
        width: 450px;
    }

    .logo-container2 {
        width: 65px;
        height: 65px;
        margin-right: 20px;
        display: none;
    }

    .logo-container a {
        display: block;
    }

    .logo-container a img {
        height: 40px;
        width: 450px;
    }

    .nav-list {
        display: flex;
        color: #0b0c10;
    }

    .nav-item {
        height: 40px;
    }

    .nav-link {
        display: block;
        height: 40px;
        line-height: 40px;
        margin-right: 30px;
        color: #0b0c10;
        position: relative;
    }

    .nav-link::after {
        content: '';
        display: block;
        width: 0;
        height: 2px;
        background-color: #197e95;
        position: absolute;
        bottom: 0px;
        left: 0;
        transition: all .5s ease-in-out;
    }

    .nav-link:hover::after {
        width: 100%;
    }

    .scroll-show {
        height: 65px;
    }

    .scroll-show .logo-container {
        display: none;
    }

    .scroll-show .logo-container2 {
        display: block;
    }

    .scroll-show nav {
        display: flex;
        align-items: center;
    }

    .footer {
        width: 100%;
        background-color: #0b0c10;
        color: #A9A9A9;
    }

    .footer-container {
        /* height: 300px; */
        max-width: 1492px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        line-height: 40px;
        padding: 50px 52px 20px;
        background: url("../images/footer-logo.png") no-repeat center center;
        background-size: contain;
        border-bottom: 1px solid #fff;
    }

    .footer-nav {
        width: 40%;
        display: block;
        columns: 2;
    }

    .footer-nav li {
        width: 100%;
        font-size: 1.125rem;
        line-height: 150%;
        font-weight: 400;
        color: #fff;
        position: relative;
        font-size: 1rem;
        display: inline-block;
        margin-bottom: 32px;
    }

    .footer-link {
        display: inline-block;
        position: relative;
    }

    .footer-link::after {
        content: '';
        display: block;
        width: 0;
        height: 2px;
        background-color: #197e95;
        position: absolute;
        bottom: -1x;
        left: 0;
        transition: all .5s ease-in-out;
    }

    .footer-link:hover::after {
        width: 100%;
    }

    .footer-contact {
        width: 50%;
        position: relative;
    }

    .footer-contact-text {
        font-weight: 600;
        line-height: 140%;
        color: #334255;
        margin-bottom: 32px;
        color: #fff;
        font-size: 1.75rem;
    }

    .footer-contact-link {
        width: 150px;
        height: 44px;
        border-radius: 25px;
        border: 1px solid #06b6d4;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .copyright-container {
        max-width: 1492px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        line-height: 40px;
        padding: 10px 52px;

    }

}