.container {
    height: 100%;
    width: 100%;
}

.main_banner {
    position: relative;
    width: 100%;
    height: 100vh;
    z-index: 1;
}

.video_box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
}

.video_box video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.panel {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 900px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    /* 섹션이 배너 위에 오도록 */
}

/* 섹션별 배경색 */
.dark {
    background-color: var(--Black, #282828);
}

.white {
    background-color: var(--White, #FFF);
}

.orange {
    background-color: #f28c38;
}

.purple {
    background-color: #8a2be2;
}

.green {
    background-color: #2ecc71;
}

.content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 0 50px;
}

.content.center {
    align-items: center;
    justify-content: center;
    position: relative;
    gap: 36px;
}

.section1_text {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    gap: 20px;
}

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

.section1_text .text {
    color: var(--White, #FFF);
    font-size: 92px;
    font-weight: 300;
    letter-spacing: -3.68px;
}

.section1_text img {
    cursor: pointer;
}

.section1_text .project {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 20px;
}

.section1_text>.span {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    cursor: pointer;
}

.section1_text>.span .text {
    color: var(--Point, #50E38A);
    font-style: italic;
    font-weight: 500;
}

.section1_text>.span>img {
    margin-top: 20px;
}

.section1_text .project::after {
    content: "";

    opacity: 0;
    height: 45px;
    width: 0px;
    background: url("../images/link.svg") no-repeat center center;
    background-size: cover;

    transition: var(--Simple-trasition);
}

.section1_text .project:hover::after {
    width: 54px;
    opacity: 1;
}

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

.section1_bottom>.text_box {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.section1_bottom>.text_box>.text {
    color: var(--White, #FFF);
    font-size: 18px;
    line-height: 28px;
}

.section1_bottom>.text_box>.text>span {
    color: var(--Point, #50E38A);
    font-size: 18px;
    font-style: italic;
    font-weight: 600;
    line-height: 28px;
    /* 155.556% */
    margin: 0 4px;
}

.section1_bottom>img {
    cursor: pointer;
}

.section2_text {
    padding: 0 50px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 66px;
    mix-blend-mode: difference;
}

.section2_text .text {
    color: var(--White, #FFF);
    font-size: 82px;
    font-weight: 300;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;

    transition: font-weight .2s ease-in-out;
}

.section2_text .text>span {
    color: var(--White, #FFF);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.32px;
}

.section2_text .text:hover {
    font-weight: 900;
}

/* 협력사 — subscription layout.css .partners 이식 */
.partners {
    position: relative;
    width: 100%;
    min-height: 100vh;
    z-index: 1;
    background: #282828;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 64px;
    overflow: hidden;
}

.partners>.title_box {
    display: flex;
    flex-direction: column;
}

.partners>.title_box>.label {
    color: var(--Word, #00CD97);
    text-align: center;
    font-size: 26px;
    font-weight: 500;
    line-height: 32px;
    letter-spacing: -0.52px;
    margin-bottom: 14px;
}

.partners>.title_box>.title {
    color: var(--White, #FFF);
    text-align: center;
    font-size: 42px;
    font-weight: 400;
    letter-spacing: -0.84px;
    margin-bottom: 20px;
}

.partners>.title_box>.title>span {
    color: var(--Word, #00CD97);
}

.partners>.title_box>.comment {
    color: var(--Gray, #A2A2A2);
    text-align: center;
    font-size: 22px;
    font-weight: 300;
    line-height: 32px;
    letter-spacing: -0.44px;
}

.partners .logos {
    width: 1040px;
    display: flex;
    flex-direction: column;
    gap: 64px;
}

.partners .logos .logo {
    width: 130px;
    aspect-ratio: 1/1;
    margin-right: 50px;
}

.section3_text {
    flex: 1;
    padding: 0 50px 10% 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
    user-select: none;
}

.section3_text .text {
    color: var(--White, #FFF);
    font-size: 93px;
    font-weight: 300;
    letter-spacing: -3.72px;
    mix-blend-mode: difference;
}

.section3_text .text2 {
    color: var(--Point, #50E38A);
    font-weight: 500;
    font-size: 93px;
    letter-spacing: -3.72px;
}

.section3_text img {
    background-color: var(--Black);
    border-radius: 100%;
    pointer-events: all;
}

.section3_text_m {
    display: none;
    flex-direction: column;
    pointer-events: none;
    user-select: none;
    gap: 16px;
}
.section3_text_m .text {
    color: var(--Black);
    font-size: 50px;
    font-weight: 300;
    letter-spacing: -2px;
    word-break: keep-all;
    line-height: 2;
}
.section3_text_m .text > span {
    color: var(--Point, #50E38A);
    font-weight: 500;
}
.section3_text_m img {
    border-radius: 100%;
    pointer-events: all;
    width: 60px;
}

.scene_container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}




.form {
    flex-direction: column;
    padding: 150px 50px;
    align-items: flex-start;
    justify-content: flex-start;
    height: auto;
    gap: 40px;
}

.form>.title_box {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form>.title_box>p {
    color: var(--Black, #282828);
    font-size: 46px;
    font-weight: 200;
    letter-spacing: -0.92px;
}

.form>.title_box>p>span {
    color: var(--Gray, #A2A2A2);
    /* transition: var(--Simple-trasition); */
}

.form>.title_box>p>span.active {
    color: var(--Black, #282828);
    font-weight: 400;
}
.form>.title_box>p>span>span {
    color: var(--Word, #00CD97);
    font-size: 18px;
    vertical-align: top;
}

.form_list {
    display: flex;
    flex-direction: column;
    gap: 40px;
    max-width: 1300px;
}

.form_one {
    display: flex;
    flex-direction: column;
    gap: 26px;
}
.form_one_m {
    display: none;
}
.form_one>.title_box {
    display: flex;
    align-items: flex-end;
}

.form_one>.title_box .label {
    color: var(--Black, #282828);
    font-size: 22px;
    letter-spacing: -0.44px;
}

.form_one>.title_box .required::after {
    content: "*";
    color: var(--Word, #00CD97);
    margin: 0 3px;
}

.form_one>.title_box .label+span {
    color: var(--Word, #00CD97);
    font-size: 18px;
    letter-spacing: -0.36px;
    white-space: nowrap;
}

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

.input_list {
    display: flex;
    align-items: center;
    gap: 35px;
}

.input_container {
    display: flex;
    align-items: center;
    flex: 1;
    border-bottom: 1px solid var(--Gray);
    height: 50px;
    padding: 0 10px;
    gap: 12px;
    min-width: 480px;
}

.textarea_container {
    display: flex;
    align-items: center;
    flex: 1;
    border-bottom: 1px solid var(--Gray);
    padding: 0 10px;
    gap: 12px;
    min-width: 480px;
}

.input_box_select {
    display: flex;
    align-items: center;
    flex: 1;
    border-bottom: 1px solid var(--Gray);
    padding: 0 10px;
    max-width: 480px;
}

.file_container {
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.file_container>.label_box {
    display: flex;
    align-items: center;
    gap: 10px;
}

.file_container>.label_box>p {
    color: var(--Word, #00CD97);
    font-size: 18px;
    letter-spacing: -0.36px;
}

.files_list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.files_list_one_doc {
    display: flex;
    align-items: center;
    gap: 5px;
}

.files_list_one_doc>p {
    color: var(--Black, #282828);
    font-size: 22px;
    line-height: 1.5;
    letter-spacing: -0.44px;
    max-width: 500px;

    display: -webkit-box;
    /* flexbox와는 다름, 텍스트 박스 처리용 */
    -webkit-box-orient: vertical;
    /* 세로 방향 박스 */
    -webkit-line-clamp: 1;
    /* 3줄까지만 보여주기 */
    overflow: hidden;
    /* 넘치는 텍스트 숨기기 */
    text-overflow: ellipsis;
    /* 말줄임표 표시 */
    white-space: nowrap;
    /* 줄바꿈 허용 */
}

.input_label {
    display: flex;
    color: var(--Black, #282828);
    font-size: 20px;
    letter-spacing: -0.4px;
}

.input_label::after {
    content: "*";
    color: var(--Word, #00CD97);
}

.input_tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.input_tags>p {
    display: flex;
    align-items: center;
    color: var(--Black, #282828);
    font-size: 22px;
    letter-spacing: -0.44px;
    padding: 0 15px;
    height: 44px;
    border-radius: 60px;
    border: 1px solid var(--Black, #282828);
    background: var(--White, #FFF);
    cursor: pointer;

    transition: var(--Simple-trasition);
}

.input_tags>p.active {
    color: var(--White, #FFF);
    background: var(--Black, #282828);
}

.term {
    display: flex;
    align-items: center;
    gap: 3px;
}

.term>p {
    color: var(--Gray, #A2A2A2);
    font-size: 22px;
    letter-spacing: -0.44px;
    text-decoration: underline;
    cursor: pointer;
}

.term_pop {
    background: var(--White);
    position: relative;
}

.term_pop>.title_box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 40px;

    position: sticky;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    background: var(--White);
}

.term_pop>.title_box>p {
    color: var(--Black, #282828);
    font-size: 34px;
    line-height: 32px;
    /* 94.118% */
    letter-spacing: -1.36px;
}

.term_pop>.title_box>img {
    cursor: pointer;
}

.term_pop>.data {
    width: 100%;
    padding: 0 40px 40px 40px;
    /* common.css 의 keep-all 은 p 에만 걸려 약관 li·h3 가 글자 단위로 끊긴다 */
    word-break: keep-all;
    overflow-wrap: break-word;
}

.term_pop>.data>p {
    white-space: pre-line;
}

.submit {
    display: flex;
    align-items: center;
    align-self: flex-start;
    height: 44px;
    border-radius: 60px;
    background: var(--Black, #282828);
    padding: 0 15px;
    gap: 3px;
    cursor: pointer;
}

.submit>p {
    color: var(--White, #FFF);
    font-size: 22px;
    letter-spacing: -0.44px;
}

.submit>img {
    transition: transform 0.3s ease;
}

.submit:hover>img {
    transform: translateX(7px);
    /* Move the arrow 5px to the right on hover */
}


.footer {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 50px;
}
.footer * {
    user-select: text !important;
    -webkit-user-select: text !important;
}

.footer .label {
    color: var(--Gray, #CCC);
    font-size: 28px;
    font-weight: 600;
    text-transform: uppercase;
}

.footer .info {
    color: var(--White, #0b0909);
    font-size: 24px;
    line-height: 42px;
}

.footer .sns {
    color: var(--Point, #50E38A);
    font-size: 60px;
    font-weight: 300;
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
}

.footer .copy {
    color: var(--Gray, #CCC);
    text-align: right;
    font-size: 24px;
    font-weight: 500;
    line-height: 28px;
    /* 116.667% */
    letter-spacing: -0.48px;
}

.footer_left {
    display: flex;
    flex-direction: column;
    gap: 55px;
}

.footer_right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 55px;
}

.footer .sns_box {
    display: flex;
    flex-direction: column;
    gap: 55px;
}

.footer .info_box {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.footer .file_box {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.footer .file_box>p {
    color: var(--White, #FFF);
    font-size: 28px;
    font-weight: 500;
    text-transform: uppercase;
}

.footer_left .info_box {
    align-items: flex-start;
}


.portpolio_container {
    position: relative;
    width: 100%;
    /* height: 100%; */
    min-height: 900px;
    /* background-color: var(--White); */
}


.portpolio_cates {
    position: fixed !important;
    left: 50px;
    height: 100%;
    justify-content: center;
    z-index: 2;

    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 66px;
    mix-blend-mode: difference;
}

.portpolio_cates .text {
    color: var(--White);
    font-size: 82px;
    font-weight: 300;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;

    filter: blur(3px);

    transition: filter .3s ease-in-out;
}

.portpolio_cates .text>span {
    color: var(--White);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.32px;
}

.portpolio_cates .text:hover,
.portpolio_cates .text.active {
    filter: blur(0px);
}




.portpolio_view {
    position: relative;
}
.portpolio_view > .section {
    z-index: 1;
}
.portpolio_view .banner {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: 100vh;
    min-height: 900px;
    padding-bottom: 100px;
}

.portpolio_view .banner>img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1920/1080;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.portpolio_view .banner .title {
    color: var(--White);
    text-align: center;
    font-size: 110px;
    font-weight: 300;

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

.portpolio_view .banner .sticker {
    position: absolute;
    top: 20%;
    left: 25%;
    padding: 5px;
    background-color: var(--White);
    color: #303030;
    border: 1px solid #303030;


    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    max-width: 22px;
    transition: max-width 0.5s ease;
    cursor: pointer;
    vertical-align: bottom;

}
.portpolio_view .banner .sticker:hover {
    max-width: 100ch;
}


.portpolio_section {
    position: relative;
    width: 100%;
    min-height: 900px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 섹션이 배너 위에 오도록 */
}

.portpolio_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    width: 100%;
    padding: 0 50px;
    /* z-index: 100; */
    /* background: white; */
    /* position: sticky; */
    /* padding-top: var(--header-height) !important; */
}
.portpolio_header > div {
    display: flex;
    align-items: center;
    cursor: pointer;
    height: 29px;
    border: 1px solid var(--Black);
    background-color: var(--White);
    padding: 0 5px;

    transition: var(--Simple-trasition);
}
.portpolio_header > div > p {
    color: var(--Black, #282828);
    font-size: 17px;
}

.portpolio_header > .active {
    background-color: var(--Black);
}
.portpolio_header > .active > p {
    color: var(--White)
}
.portpolio_header > .active > img {
    width: 0;
}

.portpolio_info {
    padding: 240px 50px 50px 50px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 110px;
    background-color: var(--White);
}
.portpolio_info .mockup {
    width: 100%;
    max-width: 737px;
    aspect-ratio: 737/966;
    object-fit: contain;
}
.portpolio_info .comment_box {
    display: flex;
    flex-direction: column;
    gap: 66px;
}
.portpolio_info .comment_box .comment {
    color: var(--Black, #282828);
    font-size: 18px;
    line-height: 32px; /* 177.778% */
    letter-spacing: -0.36px;
    white-space: pre-line;
}
.portpolio_info .comment_box .eng {
    color: var(--Gray, #A2A2A2);
}

.portpolio_info.mode2 {
    flex-direction: column;
    gap: 80px;
}
.portpolio_info.mode2 .mockup {
    width: 100%;
    max-width: 100%;
    aspect-ratio: unset;
    object-fit: contain;
}
.portpolio_view .full {
    position: relative;
    width: 100%;
    /* height: 100vh; */
    min-height: 900px;
    overflow: hidden;
}
.portpolio_view .full > img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1920/1240;
    object-fit: cover;
    will-change: transform;
}

.auto_height {
    width: 100%;
    /* object-fit: contain; */
}


.site_button {
    display: flex;
    align-items: center;
    align-self: flex-start;
    background-color: #303030;
    border-radius: 34px;
    height: 68px;
    padding: 0 16px;
    cursor: pointer;
}
.site_button > p {
    color: var(--White);
    font-size: 36px;
    font-weight: 300;
    opacity: 0;
    width: auto;
    max-width: 0;
    transition: var(--Simple-trasition);
}
.site_button:hover > p {
    opacity: 1;
    max-width: 150px;
}

.portpolio_footer {
    display: flex;
    flex-direction: column;
}
.portpolio_footer_logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1920/280;
}
.portpolio_footer_logo > img {
    max-width: 50%;
}


.about {
    width: 100%;
    min-height: 900px;
    padding: 300px 50px 150px 50px;
    background-color: var(--White);
}

.about > .title_box {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.about > .title_box .title {
    color: var(--Black, #282828);
    font-size: 92px;
    font-weight: 300;
    letter-spacing: -3.68px;
    text-align: right;
}
.about > .title_box .title > span {
    color: var(--Point, #50E38A);
    font-weight: 500;
}
.about > .title_box .title br {
    display: none;
}
.message_list {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 63px;
}

.message {
    display: flex;
    padding: 28px 24px;
    justify-content: center;
    align-items: center;
    align-self: flex-start;
    flex-shrink: 0;
    border-radius: 20px;
    background: var(--Black_gradient);
    position: relative;

    max-width: 50%;
}
.message::after {
    content: "";
    width: 19px;
    height: 20px;
    background: url("../images/chat_tail1.svg") no-repeat center center;
    background-size: cover;
    position: absolute;
    bottom: -7px;
    left: 0;
}
.message > p {
    color: var(--White, #FFF);
    font-size: 32px;
    line-height: 1.5;
    font-weight: 100;
    letter-spacing: -0.64px;
    word-break: keep-all;
}
.message > p > span {
    color: var(--Point, #50E38A);
    font-weight: 600;
}
.message > p > img {
    margin-left: 5px;
}

.message_own {
    align-self: flex-end;
    background: var(--Gray_gradient);
}
.message_own::after {
    background: url("../images/chat_tail2.svg") no-repeat center center;
    bottom: -7px;
    left: unset;
    right: 0;
}
.message_own > p {
    color: var(--Black, #282828);
}
.message_own > p > span {
    color: var(--Black, #282828);
    font-weight: 400;
}
[data-cursor-exclusion]::before {
    z-index: -1 !important;
}