@media (max-width: 1650px) {

    .section3_text .text,
    .section3_text .text2 {
        font-size: 70px;
    }
}

@media (max-width: 1350px) {
    .section1_text .text {
        font-size: 70px;
    }

    .section3_text .text,
    .section3_text .text2 {
        font-size: 50px;
    }

    .portpolio_cates .text {
        font-size: 60px;
    }
    .portpolio_list {
        padding: calc(60vh + var(--header-height)) 50px 25vh 350px;
        transition: background-color .5s ease-in-out;
    }

    .portpolio_info .mockup {
        max-width: 500px;
    }
}

@media (max-width: 1200px) {
    .portpolio_info .mockup {
        max-width: 400px;
    }
}

@media (max-width: 1024px) {

    :root {
        --header-height: 84px;
    }

    .header {
        padding: 0 0 0 26px;
    }

    .header>p {
        font-size: 16px;
        font-weight: 300;
    }

    .header_logo_box>.logo {
        display: none;
    }

    .header_logo_box>.logo_m {
        display: flex;
        width: 46px;
        position: absolute;
        left: calc(50% - 23px);
    }

    .header_menu_box {
        display: none;
    }

    .header_menu_box_m {
        display: flex;
        position: fixed;
        top: 0;
        right: 0;
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
        width: 100%;
        height: 110vh;
        padding: 0 26px 10vh 26px;
        z-index: 10001;
        will-change: transform;

        backdrop-filter: blur(15px);

        /* mix-blend-mode: difference */
    }

    .header_menu_box_m > .header_menu_list {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
        gap: 62px;
        /* mix-blend-mode: difference; */
    }

    .header_menu_box_m > .header_menu_list > p {
        color: var(--White, #fff);
        text-align: right;
        font-size: 46px;
        font-weight: 300;
        text-shadow: 2px 2px 5px rgba(0, 0, 50, 0.2);
        
    }
    .header_menu_box_m > .header_menu_top > img {
        filter: drop-shadow(2px 2px 3px rgba(0, 0, 50, 0.2));
    }

    .header_menu_top,
    .header_menu_m {
        display: flex;
    }

    .floting {
        bottom: 25px;
        right: 25px;
    }

    .site_button {
        align-items: center;
        align-self: flex-start;
        background-color: #303030;
        border-radius: 34px;
        height: 50px;
        padding: 0 10px;
        cursor: pointer;
    }
    .site_button > img {
        width: 30px;
    }
    .site_button > p {
        font-size: 24px;
    }
    .site_button:hover > p {
        opacity: 0;
        max-width: 0px;
    }


    .panel {
        height: 100%;
        min-height: 500px;
        padding: 100px 26px;
    }

    .panel:nth-child(1) {
        min-height: 100svh;
        padding: calc(var(--header-height) + 55px) 26px;
        flex-direction: column;
        gap: 36px;
    }

    .content.center {
        gap: 12px;
        flex-direction: column;
        padding: 0 25px 0 0;
    }

    .section1_text {
        gap: 12px;
        flex-wrap: wrap;
    }

    .section1_text.end {
        justify-content: flex-start;
    }

    .section1_text .text {
        font-size: 48px;
        font-weight: 300;
        letter-spacing: -1.92px;
    }

    .section1_text img {
        width: auto;
        height: 100%;
    }

    .section1_text .project {
        cursor: pointer;
        /* width: 55px; */
        height: 65px;
    }

    .section1_text .project::after {
        display: none;
    }

    .section1_bottom {
        position: relative;
        bottom: auto;
        left: auto;
        width: 100%;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .section1_bottom>.text_box>.text {
        font-size: 16px;
    }


    .panel:nth-child(2) {
        height: 100lvh;
        align-items: center !important;
        padding: 0 26px;
    }
    .section2_text {
        padding: 0;
        gap: 66px;
    }
    .section2_text .text {
        font-size: 60px;
    }


    .panel.scene {
        justify-content: flex-start !important;
        align-items: flex-start !important;
        min-height: 150svh;
        padding-top: 100px;
    }

    .section3_text {
        display: none;
    }

    .section3_text_m {
        display: flex;
    }






    input,
    select,
    textarea {
        font-size: 18px;
    }

    textarea {
        height: auto;
        min-height: 200px;
        padding: 12px 0;
    }

    input::placeholder,
    textarea::placeholder {
        font-size: 18px;
    }

    .form {
        flex-direction: column-reverse;
    }

    .form>.title_box {
        gap: 0px;
    }

    .form>.title_box>p {
        font-size: 32px;
        font-weight: 300;
        letter-spacing: -0.64px;
        line-height: 1.4;
    }

    .form_one {
        gap: 22px;
    }

    .form_one>.title_box .label {
        font-size: 16px;
        letter-spacing: -0.36px;
    }

    .input_list {
        flex-direction: column;
        gap: 20px;
    }

    .input_container {
        border-bottom: 1px solid var(--Gray);
        min-width: auto;
        flex: auto;
        width: 100%;
        height: 40px;
    }

    .input_label {
        font-size: 16px;
    }

    .form_one_pc {
        display: none;
    }

    .form_one_m {
        display: flex;
    }

    .form_one>.title_box .label+span {
        font-size: 14px;
        letter-spacing: -0.28px;
    }
    .form>.title_box>p>span>span {
        font-size: 14px;
    }

    .input_tags {
        gap: 8px;
    }

    .input_tags>p {
        font-size: 18px;
        padding: 0 13px;
        height: 40px;
    }

    .textarea_container {
        flex: auto;
        width: 100%;
        min-width: auto;
    }

    .file_container {
        flex: auto;
        width: 100%;
        gap: 10px;
    }

    .input_file {
        height: 40px;
    }

    .input_file>p {
        font-size: 18px;
    }

    .input_file>img {
        width: 18px;
    }

    .file_container>.label_box>p {
        font-size: 14px;
        letter-spacing: -0.28px;
    }

    .input_box_select {
        flex: auto;
        width: 100%;
        gap: 10px;
        max-width: none;
    }

    .input_section {
        height: 40px;
    }

    .checkbox2+label {
        font-size: 18px;
        background-size: 20px;
        padding-left: 26px;
    }

    .checkbox2:checked+label {
        background-size: 20px;
    }

    .term>p {
        font-size: 18px;
    }

    .term_pop {
        width: calc(100% - 40px);
        left: 20px;
    }

    .term_pop>.title_box {
        padding: 20px;
    }

    .term_pop>.title_box>p {
        font-size: 17px;
        letter-spacing: -1.36px;
    }

    .term_pop>.title_box>img {
        width: 24px;
    }

    .term_pop>.data {
        padding: 0 20px 20px 20px;
    }

    .submit {
        height: 40px;
        padding: 0 13px;
    }

    .submit>p {
        font-size: 16px;
    }

    .submit>img {
        width: 18px;
    }


    .panel:nth-last-child(1) {
        height: 100%;
        min-height: 100lvh;
        padding: calc(100px + var(--header-height)) 26px 100px 26px;
    }

    .footer {
        padding: 0;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 30px;
    }

    .footer_left,
    .footer_right {
        gap: 30px;
        align-items: flex-start;
    }

    .footer .sns_box {
        gap: 16px;
    }

    .footer .sns {
        font-size: 34px;
        font-weight: 300;
    }

    .footer .label {
        font-size: 20px;
    }

    .footer .info_box {
        gap: 8px;
        align-items: flex-start;
    }

    .footer .info {
        font-size: 16px;
        line-height: 28px;
    }

    .footer .file_box>p {
        font-size: 20px;
    }
    .footer .file_box>img {
        width: 24px;
    }
    .footer .copy {
        font-size: 18px;
    }

    .about {
        min-height: auto;
        padding: calc(var(--header-height) + 40px) 26px 40px 26px;
        background-color: var(--White);
    }
    .about > .title_box {
        align-items: flex-end;
    }
    .about > .title_box .title {
        font-size: 48px;
        letter-spacing: -1.92px;
    }
    .about > .title_box > img {
        width: 20px;
        margin-bottom: 30px;
    }
    .about > .title_box .title br {
        display: block;
    }
    .message_list {
        margin-top: 14px;
        gap: 50px;
    }
    .message {
        padding: 14px 12px;
        border-radius: 10px;
        max-width: 80%;
    }
    .message > p {
        font-size: 14px;
        font-weight: 200;
        letter-spacing: -0.28px;
    }
    .message > p > img {
        width: 17px;
        vertical-align: sub;
    }


    .portpolio_list {
        padding: calc(80lvh + var(--header-height)) 26px 50lvh 150px;
        gap: 90lvh;
    }
    .portpolio_one .section {
        width: 90% !important;
        /* aspect-ratio: 640 / 480; */
    }
    .portpolio_cates {
        position: fixed;
        top: var(--header-height);
        left: 26px;
        height: auto;
        /* flex-direction: row; */
        /* justify-content: center; */
        align-items: flex-start;
        gap: 40px;
    }
    .portpolio_cates .text {
        font-size: 40px;
        font-weight: 300;
        justify-content: center;
    }
    .portpolio_one .data {
        transform: translateY(calc(50% + 20px));
    }
    .portpolio_one .data .title {
        font-size: 46px;
    }
    .portpolio_one .data .tags {
        font-size: 26px;
        font-weight: 300;
    }

    .portpolio_view .banner {
        height: 100svh;
        min-height: auto;
        padding-bottom: 67px;
    }

    .portpolio_view .banner .title {
        font-size: 54px;
        font-weight: 300;
    }


    .portpolio_info {
        padding: 50px 26px 50px 26px;
        flex-direction: column;
        justify-content: flex-start;
        min-height: auto;
        gap: 30px;
    }
    .portpolio_header {
        flex-direction: column;
        align-items: flex-start;
        gap: 33px;
        padding: 0 26px;
    }
    .portpolio_header > div {
        height: 26px;
        padding: 0 4px;
    }
    .portpolio_header > div > p {
        font-size: 14px;
    }
    .portpolio_info .comment_box {
        gap: 33px;
    }
    .portpolio_info .comment_box .comment {
        font-size: 12px;
        line-height: 2;
    }
    .portpolio_info .mockup {
        max-width: 80%;
        align-self: center;
    }
    .portpolio_view .full {
        width: 100%;
        height: auto;
        min-height: auto;
        overflow: hidden;
    }
    .portpolio_view .full > img {
        width: 100%;
        height: auto;
        aspect-ratio: unset;
        object-fit: contain;
    }
    .portpolio_footer_logo {
        aspect-ratio: auto;
        height: 200px;
    }
    .portpolio_footer_logo > img {
        max-width: 30%;
    }
}

@media (max-width: 769px) {
    .portpolio_list {
        padding: calc(60lvh + var(--header-height)) 0px 50lvh 0px;
    }
    .portpolio_one .section {
        width: 100%;
    }
    .portpolio_one .dim .bg_img {
        top: -35%;
    }
    .popup_container {
        width: calc(100% - 40px);
    }
}

@media (max-width: 400px) {

    input,
    select,
    textarea {
        font-size: 16px;
    }

    input::placeholder,
    textarea::placeholder {
        font-size: 16px;
    }

    .section2_text .text {
        font-size: 46px;
    }

    .form_one>.title_box .label {
        font-size: 15px;
    }
    .form_one>.title_box .label+span {
        font-size: 12px;
        letter-spacinxg: -0.28px;
    }
    .file_container>.label_box>p {
        font-size: 12px;
    }

    .about > .title_box .title {
        font-size: 36px;
    }
    .about > .title_box > img {
        margin-bottom: 20px;
    }

    .portpolio_one .data {
        padding: 0 10px;
        transform: translateY(calc(50% + 20px));
    }
    .portpolio_one .data .title {
        font-size: 34px;
    }
    .portpolio_one .data .tags {
        font-size: 18px;
    }

    input::placeholder,
    textarea::placeholder {
        font-size: 14px;
    }

    .form_one>.title_box .label {
        font-size: 14px;
    }
    .form_one>.title_box .label+span {
        font-size: 11px;
        letter-spacinxg: -0.28px;
    }
    .file_container>.label_box>p {
        font-size: 11px;
    }
}

@media (max-width: 360px) {
    input,
    select,
    textarea {
        font-size: 14px;
    }

    
}

@media (max-height: 450px) and (orientation: landscape) {}
/* 구독 플로팅 버튼 — 모바일: .floting(bottom 25, right 25) 위로 12px 간격
   a.floting_sub — common.css 의 a.floting_sub(0,1,1)와 같은 특이도여야 덮인다 (.floting_sub 만 쓰면 데스크톱 좌표 그대로 남음) */
@media (max-width: 1024px) {
    a.floting_sub {
        right: 25px;
        bottom: 94px; /* 25 + 57 + 12 */
        height: 40px; /* a{all:unset} 탓에 content-box — 렌더 높이는 테두리 포함 42 */
        padding: 0 12px 0 14px;
        border-radius: 21px;
    }
    .floting_sub > p {
        font-size: 14px;
    }
}

/* 협력사 — subscription media.css 이식 (1350 · 900 · 500 블록)
   구독은 폭에 따라 html font-size 를 16→11px 로 줄이며 rem 을 쓴다. front 는 html 16px 고정이라
   같은 단계를 --pr 로 옮겨 calc 한다 (구독 rem 값 × --pr = 같은 px) */
@media (max-width: 1350px) {
    .partners>.title_box>.label {
        font-size: 22px;
        line-height: 1.5;
    }

    .partners>.title_box>.title {
        font-size: 36px;
    }

    .partners>.title_box>.comment {
        font-size: 18px;
        line-height: 1.5;
    }

    .partners .logos {
        width: 100%;
        max-width: 800px;
        margin: 0 auto;
        gap: 40px;
    }

    .partners .logos .logo {
        width: 100px;
        margin-right: 40px;
    }
}

@media (max-width: 900px) {
    .partners {
        --pr: 16px;
        gap: calc(3 * var(--pr));
        padding: calc(6 * var(--pr)) 0;
    }

    .partners>.title_box>.label {
        font-size: calc(1.2 * var(--pr));
        margin-bottom: calc(0.6 * var(--pr));
    }

    .partners>.title_box>.title {
        font-size: calc(2 * var(--pr));
        margin-bottom: calc(0.7 * var(--pr));
    }

    .partners>.title_box>.comment {
        font-size: var(--pr);
        word-break: keep-all;
        padding: 0 calc(4 * var(--pr));
    }

    .partners .logos {
        gap: calc(1.6 * var(--pr));
    }

    .partners .logos .logo {
        width: calc(6 * var(--pr));
        margin-right: calc(1.6 * var(--pr));
    }
}

@media (max-width: 700px) {
    .partners { --pr: 15px; }
}

@media (max-width: 600px) {
    .partners { --pr: 14px; }
}

@media (max-width: 500px) {
    .partners { --pr: 13px; }

    .partners>.title_box>.title {
        font-size: calc(1.8 * var(--pr));
    }
}

@media (max-width: 380px) {
    .partners { --pr: 12px; }
}

@media (max-width: 340px) {
    .partners { --pr: 11px; }
}