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

    :root,
    body {
        --ratio-size: calc(100vw / 768px);
        --type-area: 20px;
        --font-size-88: 40px;
        --font-size-68: 24px;
        --font-size-58: 30px;
        --font-size-48: 24px;
        --font-size-38: 22px;
        --font-size-36: 18px;
        --font-size-32: 18px;
        --font-size-30: 20px;
        --font-size-24: 18px;
        --font-size-20: 16px;
        --font-size-18: 14px;
        --font-size-16: 12px;
        --font-size-14: 12px;
        --font-size-12: 10px;

        --padding-top-120: 30px;
        --padding-top-150: 50px;
        --header-height: 50px;
    }

    header .header-nav {
        display: none;
    }

    header .fun-nav {
        display: none;
    }

    header .mobile-menu-btn {
        display: flex;
    }

    footer .footer-contact-us {
        padding-right: 0;
    }

    footer .footer-contact-us .main {
        padding-right: var(--type-area);
    }

    footer .footer-contact-us .main-content {
        width: 100%;
    }

    footer .footer-contact-us .main .bg img {
        object-position: left;
    }

    footer .footer-contact-us .message-content ul .icon {
        width: 15px;
        height: 15px;
    }

    footer .footer-content .subscribe-content {
        gap: 25px;
        flex-direction: column;
        align-items: flex-start;
        padding-top: 30px;
        padding-bottom: 30px;
    }

    footer .footer-content .subscribe-content .input-content {
        width: 100%;
    }

    footer .footer-content .subscribe-content .input-content input {
        padding: 10px 15px;
    }

    footer .nav-main {
        display: none;
    }

    footer .footer-main .top-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    footer .footer-main .top-content .follow-wall a {
        width: 35px;
        height: 35px;
    }

    footer .footer-main .website-info {
        flex-wrap: wrap;
        gap: 5px 10px;
        justify-content: flex-start;
        margin-top: 10px;
    }

    .common-btn {
        margin-top: 30px;
    }

    .common-switch-nav ul {
        flex-wrap: wrap;
        gap: 5px 10px;
    }

    .inside-banner {
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .index-page .screen-banner-content .cover-banner {
        mask: unset;
    }

    .index-page .screen-banner-content .cover-banner .title {
        width: 100%;
    }

    .index-page .screen-banner-content .cover-banner .btn-box {
        margin-top: 30px;
    }

    .index-page .screen-banner-content .second-banner .swiper-slide .content {
        width: 100%;
        padding-top: 100px;
    }

    .index-page .screen-banner-content .second-banner .swiper-slide .content-main {
        margin-top: 20px;
    }

    .index-page .screen-banner-content .second-banner .banner-swiper-switch .btn-list {
        flex-wrap: wrap;
    }

    .index-page .core-content .desc {
        flex-direction: column;
    }

    .index-page .core-content .desc .title {
        width: 100%;
    }

    .index-page .core-content .desc .text {
        width: 100%;
        margin-top: 5px;
    }

    .index-page .core-content .core-main {
        padding-top: 0;
        margin-top: 30px;
    }

    .index-page .core-content .core-main .video-content {
        position: relative;
        width: 100%;
    }

    .index-page .core-content .core-main .video-content .play-btn {
        left: 50%;
    }

    .index-page .core-content .core-main .video-content .play-btn:hover {
        transform: translate(-50%, -50%);
    }

    .index-page .core-content .core-main .video-content .play-btn:hover .circle-line {
        animation-direction: normal;
    }

    .index-page .core-content .core-main .video-content .bg {
        height: 100%;
    }

    .index-page .core-content .core-main .video-content .bg img {
        height: 100%;
        object-fit: cover;
    }

    .index-page .core-content .core-main .video-message {
        width: 100%;
    }

    .index-page .innovations-content .innovation-list {
        grid-template-columns: repeat(1, 100%);
        gap: 25px;
    }

    .index-page .innovations-content .flex-box {
        margin-top: 0;
    }

    .index-page .innovations-content .item a .bottom .icon {
        width: 40px;
        height: 40px;
    }

    .index-page .service-content .service-main {
        flex-direction: column-reverse;
    }

    .index-page .service-content .list {
        display: none;
    }

    .index-page .service-content .right {
        flex: unset;
        display: flex;
        flex-direction: column;
        gap: 20px;
        width: 100%;
    }

    .index-page .service-content .right .bg-list {
        display: none;
    }

    .index-page .service-content .right .content {
        position: relative;
        bottom: auto;
        top: auto;
        left: auto;
        transform: none;
        width: 100%;
        padding: 15px;
    }

    .index-page .service-content .right .content .mobile-bg {
        display: block;
        width: 100%;
        margin-bottom: 10px;
    }

    .index-page .service-content .right .content .bottom a .icon {
        width: 15px;
    }

    .index-page .achievements-content .achievement-main .swiper-slide {
        padding: 15px;
        padding-bottom: 20px;
    }

    .index-page .achievements-content .achievement-swiper .achievement-swiper-button-prev,
    .index-page .achievements-content .achievement-swiper .achievement-swiper-button-next {
        width: 40px;
        height: 40px;
    }

    .index-page .achievements-content .achievement-swiper .achievement-swiper-button-prev:hover,
    .index-page .achievements-content .achievement-swiper .achievement-swiper-button-next:hover {
        background-color: rgba(15, 17, 37, .1);
    }

    .index-page .achievements-content .achievement-swiper .achievement-swiper-button-prev img,
    .index-page .achievements-content .achievement-swiper .achievement-swiper-button-next img {
        filter: brightness(0) invert(1);
    }

    .index-page .achievements-content .achievement-main .swiper-slide .serial {
        width: 25px;
        height: 25px;
    }

    .index-page .achievements-content .achievement-main .swiper-slide .icon {
        width: 55px;
        height: 55px;
    }

    .index-page .achievements-content .flex-box {
        margin-top: 30px;
    }

    .about-us-page .company-profile {
        padding-top: var(--padding-top-150);
        padding-bottom: var(--padding-top-150);
    }

    .about-us-page .company-profile .overview .text {
        gap: 10px 0;
        margin-top: 20px;
    }

    .about-us-page .company-profile .value-list {
        grid-template-columns: repeat(1, 100%);
        gap: 20px;
        margin-top: 30px;
    }

    .about-us-page .company-profile .value-list .item>div {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
    }

    .about-us-page .company-profile .value-list .item .content {
        flex: 1;
    }

    .about-us-page .company-profile .value-list .item:nth-child(1),
    .about-us-page .company-profile .value-list .item:nth-child(2),
    .about-us-page .company-profile .value-list .item:nth-child(3),
    .about-us-page .company-profile .value-list .item:nth-child(4) {
        grid-column: unset;
        grid-row: unset;
    }

    .about-us-page .company-profile .value-list .item:nth-child(1)>div .content {
        position: relative;
    }

    .about-us-page .company-profile .value-list .item:nth-child(1)>div {
        transform: none;
    }

    .about-us-page .development-history {
        flex-direction: column;
        padding-top: var(--padding-top-150);
        padding-bottom: var(--padding-top-150);
    }

    .about-us-page .development-history .left {
        width: 100%;
    }

    .about-us-page .development-history .right {
        width: 100%;
    }

    .about-us-page .development-history .left .secondary-title {
        margin-top: 20px;
    }

    .about-us-page .development-history .right .text {
        margin-top: 10px;
        gap: 10px;
    }

    .about-us-page .development-history .data-list {
        gap: 30px 20px;
    }

    .about-us-page .development-history .data-list .icon {
        width: 55px;
        height: 55px;
    }

    .about-us-page .development-history .data-list .num-area {
        margin-top: 5px;
    }

    .about-us-page .development-history .data-list .title {
        margin-top: 10px;
    }

    .about-us-page .honors-qualifications {
        padding-top: var(--padding-top-150);
    }

    .about-us-page .honors-qualifications .main {
        flex-direction: column-reverse;
        gap: 20px;
        padding-top: 20px;
        padding-bottom: var(--padding-top-150);
    }

    .about-us-page .honors-qualifications .main .certificate {
        width: 100%;
        aspect-ratio: 125 / 92;
    }

    .about-us-page .honors-qualifications .qualifications-list {
        width: 100%;
        height: 200px;
    }

    .about-us-page .honors-qualifications .main .certificate .pic {
        height: auto;
        aspect-ratio: 125 / 92;
    }

    .about-us-page .honors-qualifications .main .middle-bg {
        display: none;
    }

    .contact-us-page .contact-us-content .map-content {
        margin-top: 20px;
    }

    .contact-us-page .contact-us-content .map-content .top-content {
        padding: 30px;
    }

    .contact-us-page .contact-us-content .map-content .top-content .info-list {
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 20px;
    }

    .contact-us-page .contact-us-content .map-content .top-content .info-list .item {
        width: 100%;
        max-width: 100%;
    }

    .contact-us-page .contact-us-content .map-content .map {
        width: 100%;
        height: auto;
    }

    .contact-us-page .message-board-content {
        flex-direction: column;
    }

    .contact-us-page .message-board-content .message {
        width: 100%;
    }

    .contact-us-page .message-board-content .message .message-content {
        margin-top: 20px;
    }

    .contact-us-page .message-board-content .message .text {
        gap: 10px;
        margin-top: 10px;
    }

    .contact-us-page .message-board-content .form-content {
        width: 100%;
        margin-top: 20px;
    }

    .contact-us-page .message-board-content .user-input-item label {
        font-size: 10px;
    }

    .contact-us-page .message-board-content .policy label .box {
        width: 15px;
        height: 15px;
        margin-top: 2px;
    }

    .contact-us-page .message-board-content .common-btn {
        justify-content: center;
        margin-top: 30px;
    }

    .contact-us-page .message-board-content .common-btn button {
        gap: 10px;
        padding: 15px 25px;
    }

    .contact-us-page .message-board-content .common-btn button .icon {
        width: 12px;
    }

    .cooperation-page .description-content .title {
        width: 100%;
    }

    .cooperation-page .description-content .text {
        margin-top: 20px;
    }

    .cooperation-page .description-content .partnerships-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .r-d-page .description-content {
        flex-direction: column;
        gap: 20px;
        padding-top: var(--padding-top-150);
    }

    .r-d-page .description-content .title {
        width: 100%;
    }

    .r-d-page .description-content .text {
        width: 100%;
    }

    .r-d-page .capability-list {
        margin-top: 30px;
    }

    .r-d-page .capability-list .item {
        flex-direction: column;
    }

    .r-d-page .capability-list .item .pic {
        width: 100%;
    }

    .r-d-page .capability-list .item .content {
        width: 100%;
        padding: 20px;
        padding-bottom: 30px;
    }

    .r-d-page .capability-list .item .content .text {
        margin-top: 10px;
    }

    .r-d-page .capability-list .item:nth-child(even) {
        flex-direction: column;
    }

    .r-d-page .capability-list .item .pic .icon {
        width: 70px;
        height: 70px;
    }

    .service-sales-page .description-content {
        flex-direction: column;
        padding-top: var(--padding-top-150);
    }

    .service-sales-page .description-content .content {
        width: 100%;
    }

    .service-sales-page .description-content .pic {
        width: 100%;
        margin-top: 20px;
    }

    .service-sales-page .description-content .content .text {
        margin-top: 20px;
    }

    .service-training-page .description-content {
        flex-direction: column;
        padding-top: var(--padding-top-150);
    }

    .service-training-page .description-content .content {
        width: 100%;
    }

    .service-training-page .description-content .content .text {
        margin-top: 20px;
    }

    .service-training-page .description-content .pic {
        width: 100%;
        margin-top: 20px;
    }

    .service-training-page .training-content {
        padding-top: var(--padding-top-150);
        margin-top: var(--padding-top-150);
    }

    .service-training-page .training-content .desc {
        margin-top: 20px;
    }

    .service-training-page .training-content .content-list {
        grid-template-columns: repeat(1, 100%);
        grid-area: 20px;
        margin-top: 20px;
    }

    .service-training-page .training-content .content-list .item {
        padding: 15px;
        padding-bottom: 25px;
    }

    .service-training-page .training-content .content-list .text {
        margin-top: 5px;
    }

    .service-training-page .training-content .content-list .icon {
        position: relative;
        bottom: auto;
        right: auto;
        width: 50px;
        height: 50px;
        margin-top: 20px;
        margin-left: auto;
    }

    .service-page .description-content {
        flex-direction: column;
        padding-top: var(--padding-top-150);
        padding-bottom: var(--padding-top-150);
    }

    .service-page .description-content .content {
        width: 100%;
    }

    .service-page .description-content .content .text {
        margin-top: 20px;
    }

    .service-page .description-content .pic {
        width: 70%;
        margin: 0 auto;
        margin-top: 20px;
    }

    .service-page .feature-content {
        padding-top: var(--padding-top-150);
        padding-bottom: var(--padding-top-150);
    }

    .service-page .feature-content .feature-list {
        grid-template-columns: repeat(1, 100%);
        gap: 20px;
        margin-top: 20px;
    }

    .service-page .feature-content .feature-list .item {
        padding: 15px;
        padding-bottom: 25px;
    }

    .service-page .feature-content .feature-list .item .text {
        padding-top: 10px;
        margin-top: 10px;
    }

    .service-page .photos-content {
        padding-top: var(--padding-top-150);
        padding-bottom: var(--padding-top-150);
    }

    .service-page .photos-main {
        padding-right: var(--type-area);
        margin-top: 20px;
    }

    .service-page .photos-main .photos-swiper {
        width: 100%;
        overflow: hidden;
    }

    .service-page .photos-main .photos-swiper .swiper-fun {
        justify-content: center;
        margin-top: 20px;
    }

    .service-page .photos-main .photos-swiper .swiper-button-prev,
    .service-page .photos-main .photos-swiper .swiper-button-next {
        width: 40px;
        height: 40px;
    }

    .service-page .photos-main .photos-swiper .swiper-button-prev:hover,
    .service-page .photos-main .photos-swiper .swiper-button-next:hover {
        background-color: transparent;
    }

    .service-page .photos-main .photos-swiper .swiper-scrollbar {
        width: 50%;
    }

    .service-page .achievements-content {
        margin-top: 0;
    }

    .service-page .achievements-content .text {
        gap: 10px;
        padding-bottom: var(--padding-top-150);
        margin-top: 20px;
    }

    .service-page .certificate-content {
        padding-bottom: var(--padding-top-150);
    }

    .service-page .certificate-content .certificate-list {
        gap: 20px;
    }

    .service-page .certificate-content .certificate-list .item:nth-child(even),
    .service-page .certificate-content .certificate-list .item {
        flex-direction: column-reverse;
        padding-right: 0;
        padding-left: 0;
    }

    .service-page .certificate-content .certificate-list .item .content {
        flex: unset;
        width: 100%;
        padding: var(--padding-top-150) var(--type-area);
    }

    .service-page .certificate-list .item .pic {
        width: 100%;
    }

    .service-page .certificate-list .item .text {
        margin-top: 20px;
    }

    .service-page .certificate-list .item .time {
        gap: 8px;
    }

    .service-page .certificate-list .item .time .icon {
        width: 15px;
    }

    .service-page .certificate-content .flex-box {
        margin-top: 30px;
    }

    .service-page .performance-table-content {
        padding-top: var(--padding-top-150);
        padding-bottom: var(--padding-top-150);
        padding-right: calc(var(--type-area) / 2);
    }

    .service-page .performance-table-content .text {
        margin-top: 10px;
    }

    .service-page .performance-table-content .table-content {
        height: 70vh;
        padding-right: calc(var(--type-area) / 2);
        margin-top: 20px;
    }

    .r-d-equipment-page .description-content {
        margin-top: var(--padding-top-150);
    }

    .r-d-equipment-page .description-content .content {
        flex-direction: column;
        margin-top: 20px;
    }

    .r-d-equipment-page .description-content .left {
        width: 100%;
        padding-right: 0;
    }

    .r-d-equipment-page .description-content .left .text {
        margin-top: 10px;
    }

    .r-d-equipment-page .description-content .pic {
        width: 100%;
        margin-top: 20px;
    }

    .r-d-equipment-page .data-list {
        margin-top: var(--padding-top-150);
    }

    .r-d-equipment-page .data-list .data-item {
        padding-bottom: var(--padding-top-150);
    }

    .r-d-equipment-page .data-list .data-item .top-info .main {
        padding-bottom: 20px;
    }

    .r-d-equipment-page .data-list .data-item .top-info .title {
        width: 100%;
        margin-top: 10px;
    }

    .r-d-equipment-page .data-list .data-item .top-info .bg {
        height: 150%;
    }

    .r-d-equipment-page .data-list .data-item .top-info .bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .r-d-equipment-page .data-list .data-item .table-main {
        overflow: auto;
        padding: 10px;
    }

    .r-d-equipment-page .data-parameter {
        padding-top: var(--padding-top-150);
        padding-bottom: var(--padding-top-150);
    }

    .r-d-equipment-page .data-parameter .table-content {
        margin-top: 20px;
        overflow: auto;
    }

    .r-d-equipment-page .data-parameter thead tr:nth-child(1) th:nth-child(1),
    .r-d-equipment-page .data-parameter tbody tr th:nth-child(1) {
        padding-right: 20px;
    }

    .r-d-equipment-page .monitoring-control {
        margin-top: var(--padding-top-150);
        padding-bottom: 0;
    }

    .r-d-equipment-page .monitoring-control .pic {
        position: relative;
        right: auto;
        top: auto;
        margin-top: 20px;
    }

    .r-d-equipment-page .monitoring-control .title {
        width: 100%;
    }

    .r-d-equipment-page .monitoring-control .content {
        margin-top: 0;
    }

    .r-d-equipment-page .monitoring-control .content .text {
        width: 100%;
        padding-right: var(--type-area);
        gap: 10px;
    }

    .r-d-equipment-page .monitoring-control .content .text ul {
        gap: 10px;
    }

    .r-d-equipment-page .monitoring-control .content .text li::before {
        margin-top: 9px;
    }
}