@charset "utf-8";
@font-face {
    font-family: "Pretendard";
    src: url("https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff")
        format("woff");
    font-weight: 400;
    font-style: normal;
}
/* 초기화 */
html {
    overflow-y: scroll;
    height: 100%;
    min-width: 320px;
}
body {
    margin: 0;
    padding: 0;
    font-size: 0.75em;
    background: #d9d9d9;
    height: 100%;
    font-family: "Neue Haas Grotesk Display Pro", sans-serif;
}
html,
h1,
h2,
h3,
h4,
h5,
h6,
form,
fieldset,
img {
    margin: 0;
    padding: 0;
    border: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 1em;
    font-family: "Neue Haas Grotesk Display Pro", sans-serif;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}
legend {
    position: absolute;
    font-size: 0;
    line-height: 0;
    text-indent: -9999em;
    overflow: hidden;
}
label,
input,
button,
select,
img {
    vertical-align: middle;
}
input,
button {
    margin: 0;
    padding: 0;
    font-size: 1em;
    font-family: "Malgun Gothic", dotum, sans-serif;
}
button {
    cursor: pointer;
    font-family: "Neue Haas Grotesk Display Pro", sans-serif;
}
input[type="text"],
input[type="password"],
input[type="submit"],
input[type="image"],
button {
    font-size: 1em;
    -webkit-appearance: none;
}
textarea,
select {
    font-size: 1em;
    font-family: "Malgun Gothic", dotum, sans-serif;
}
textarea {
    border-radius: 0;
    -webkit-appearance: none;
    font-family: "Malgun Gothic", dotum, sans-serif;
}
select {
    margin: 0;
    background: none;
    font-family: "Malgun Gothic", dotum, sans-serif;
}
p {
    margin: 0;
    padding: 0;
    word-break: break-all;
    font-family: "Neue Haas Grotesk Display Pro", sans-serif;
    text-decoration: none;
}
hr {
    display: none;
}
pre {
    overflow-x: scroll;
    font-size: 1.1em;
}
a {
    color: #3d3d3d;
    text-decoration: none;
    font-family: "Neue Haas Grotesk Display Pro", sans-serif;
}
ul,
li,
dl,
dt,
dd {
    padding: 0;
    margin: 0;
}
ul {
    list-style: none;
}

*,
:after,
:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #3d3d3d;
}
@media (min-width: 360px) {
    .loading_layer {
        background: white;
        width: 100vw;
        height: 100vh;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 100000;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .loading_layer video {
        width: 36px;
    }
    .logo_dot {
        display: inline-block;
        position: fixed;
        left: 44px;
        top: 27px;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background-color: #e7ff2b;
        z-index: 1000;
    }
    .tab_br {
        display: none;
    }
    .mo_br {
        display: block;
    }
    /* 상단 레이아웃 */
    #hd {
        position: fixed;
        background: transparent;
        top: 15px;
        left: 0;
        right: 0;
        z-index: 1000;
        mix-blend-mode: difference;
    }
    body.fixed {
        position: fixed;
        width: 100%;
    }
    #hd.scrolled {
        background-color: #d9d9d9;
        padding-top: 15px;
        top: 0;
        mix-blend-mode: normal !important;
    }
    #hd.scrolled .hd_wrapper {
        border-color: #3d3d3d;
    }
    #hd.scrolled .hd_wrapper .default_logo {
        display: none;
    }
    #hd.scrolled .hd_wrapper .scrolled_logo {
        display: block;
    }
    #hd.scrolled .hd_wrapper .hd_toggle_btn span {
        background-color: #3d3d3d;
    }
    #hd.scrolled .hd_wrapper .cubespinner li {
        color: #3d3d3d;
    }
    #hd .hd_wrapper {
        position: relative;
        display: flex;
        margin: 0 10px;
        border: 1px solid #fff;
        border-width: 1px 0;
    }
    #hd .hd_wrapper .scrolled_logo {
        display: none;
    }
    #hd .hd_wrapper .hd_toggle_btn {
        z-index: 1001;
        top: 7px;
        right: 0;
        background-color: transparent;
        border: none;
        position: absolute;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 24px;
        height: 24px;
    }
    #hd .hd_wrapper .hd_toggle_btn span {
        display: inline-block;
        width: 24px;
        height: 1px;
        background-color: #fff;
    }
    #hd .hd_wrapper .hd_toggle_btn.open span {
        background-color: #000;
        height: 2px;
    }
    .hd_toggle_btn span {
        background: black;
        position: absolute;
        left: 0;
        transition: all 0.3s ease-in-out;
    }

    .hd_toggle_btn span:first-child {
        top: 8px;
    }

    .hd_toggle_btn span:last-child {
        top: 16px;
    }

    .hd_toggle_btn.open span:first-child {
        transform: rotate(45deg);
        top: 12px;
    }

    .hd_toggle_btn.open span:last-child {
        transform: rotate(-45deg);
        top: 12px;
    }
    .side-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        /* height: 100%; */
        /* min-height: 100vh; */
        min-height: calc(var(--vh, 1vh) * 100);

        background: #e7ff2b;
        /* box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5); */
        transition: right 0.3s ease-in-out;
        z-index: 1000;
    }
    .side-menu .inner {
        padding: 25px 10px 57px;
    }
    .side-menu .inner .title {
        font-size: 40px;
        font-weight: 400;
        line-height: 40px;
    }
    .side-menu .inner .menu_list {
        position: relative;
        margin-top: 50px;
    }
    .side-menu .inner .menu_list li {
        padding: 5px 0 10px;
        position: relative;
        text-align: right;
        background: #e7ff2b;
    }
    .side-menu .inner .menu_list li:last-child {
        display: flex;
        align-items: center;
        justify-content: end;
    }
    .side-menu .inner .menu_list li:last-child .sub_menu {
        display: flex;
        transition: all 0.3s ease;
        position: absolute;
        top: 15px;
        justify-content: flex-end;
        gap: 0 20px;
        align-items: center;
        width: 100%;
        transition: top 0.3s ease-in-out;
        z-index: -1;
    }
    .side-menu .inner .menu_list li:last-child .sub_menu.open {
        top: 55px;
    }
    .side-menu .inner .menu_list li:last-child .sub_menu li {
        padding: 0;
    }
    .side-menu .inner .menu_list li:last-child .sub_menu li a {
        font-size: 20px;
        font-weight: 500;
        line-height: 20px;
        letter-spacing: 0.02em;
        color: #000;
        padding: 8px 0 12px;
    }
    .side-menu .inner .menu_list li p {
        font-size: 40px;
        font-weight: 400;
        line-height: 40px;
        letter-spacing: 0.02em;
        color: #000;
    }
    .side-menu .inner .menu_list li a {
        font-size: 40px;
        font-weight: 400;
        display: inline-block;
        line-height: 40px;
        letter-spacing: 0.02em;
        color: #000;
    }
    .side-menu .inner .menu_list li .side_toggle_btn {
        width: 24px;
        height: 24px;
        position: relative;
        cursor: pointer;
        background: none;
        border: none;
        outline: none;
        padding: 0;
        margin-right: 19px;
    }
    .side-menu .inner .menu_list li .side_toggle_btn span {
        display: block;
        width: 100%;
        height: 2px;
        background: black;
        position: absolute;
        left: 0;
        transition: all 0.3s ease-in-out;
    }
    .side-menu .inner .footer .inner {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        row-gap: 23px;
        padding-top: 75px;
        padding-inline: 0;
    }
    .side-menu .inner .footer .inner p {
        font-size: 13px;
        font-weight: 500;
        line-height: 18px;
        letter-spacing: 0.02em;
        color: #000;
        text-decoration: none;
    }
    .side_toggle_btn span:first-child {
        top: 11px;
        transform: rotate(90deg);
    }

    .side_toggle_btn span:last-child {
        top: 11px;
        transform: rotate(0deg);
    }

    .side_toggle_btn.open span:first-child {
        transform: rotate(0deg);
    }

    .side_toggle_btn.open span:last-child {
        transform: rotate(0deg);
        top: 12px;
        opacity: 0;
    }

    .side-menu.open {
        right: 0;
    }
    .overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
        display: none;
    }

    .overlay.active {
        display: block;
    }
    .cubespinner {
        position: relative;
        height: 28px;
        width: 100%;
        overflow: hidden;
        display: flex;
        align-items: center;
        margin-left: 21px;
        margin-top: 6px;
    }

    .cubespinner li {
        position: absolute;
        width: 100%;
        height: 28px;
        line-height: 28px;
        transition: transform 0.7s ease-in-out;
        opacity: 0;
        color: #fff;
        font-size: 16px;
        font-weight: 500;
        letter-spacing: 0.02em;
    }

    .cubespinner .face1 {
        transform: translateY(0%);
        opacity: 1;
    }
    #hd:after {
        display: block;
        visibility: hidden;
        clear: both;
        content: "";
    }
    #hd_h1 {
        position: absolute;
        font-size: 0;
        text-indent: -9999em;
        line-height: 0;
        overflow: hidden;
    }

    #logo {
        padding-top: 10px;
        height: 40px;
        display: inline-block;
    }
    #logo a {
        display: flex;
    }

    .point {
        display: inline-block;
        width: 5px;
        height: 5px;
        border-radius: 100%;
        background-color: #f5ff00;
        vertical-align: text-top;
    }

    .point2 {
        display: inline-block;
        width: 5px;
        height: 5px;
        border-radius: 100%;
        background-color: #000000;
        vertical-align: text-top;
    }

.point3 {
        display: inline-block;
        width: 9px;
        height: 9px;
        border-radius: 100%;
        background-color: #f5ff00;
        vertical-align: text-top;
    }

    .point4 {
        display: inline-block;
        width: 9px;
        height: 9px;
        border-radius: 100%;
        background-color: #000000;
        vertical-align: text-top;
    }

    .row {
        position: relative;
        display: flex;
        gap: 10px;
    }
    .row .left_area,
    .row .right_area {
        position: relative;
        flex: 1;
    }
    .col {
        position: relative;
        display: flex;
        flex-direction: column;
    }
    .top_line::before {
        content: "";
        display: block;
        width: 100%;
        height: 1px;
        background-color: #3d3d3d;
        position: absolute;
        top: 0;
    }
    .bottom_line::after {
        content: "";
        display: block;
        width: 100%;
        height: 1px;
        background-color: #3d3d3d;
        position: absolute;
        bottom: 0;
    }
    .detail-icon {
        display: inline-block;
        margin-left: 8px;
        width: 11px;
        height: 11px;
        background: url("data:image/svg+xml,%3Csvg width='11' height='11' viewBox='0 0 11 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.0006 7.90332L10.0006 1.00009L3.09766 1.00009' stroke='%233D3D3D'/%3E%3Cpath d='M9.97382 1.02588L1 10.0001' stroke='%233D3D3D'/%3E%3C/svg%3E%0A")
            no-repeat;
        transition: transform 0.2s ease;
    }
    .footer {
        padding-bottom: 12px;
    }
    /* 중간 레이아웃 */

    .st-01 {
        position: relative;
        height: 100vh;
        height: calc(var(--vh, 1vh) * 100);
    }
    .main-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        height: calc(var(--vh, 1vh) * 100);
    }
    .main-bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .st-01 .inner {
        position: relative;
        display: flex;
        height: 100%;
        flex-direction: column;
        justify-content: flex-end;
        padding: 0 10px 90px 10px;
    }
    .st-01 .inner .title-wrap {
        margin-bottom: 60px;
        mix-blend-mode: difference;
    }
    .st-01 .inner .title-wrap p {
        font-size: 57px;
        color: #fff;
        font-weight: 300;
        line-height: 52px;
        word-break: keep-all;
    }

    .st-01 .inner .content-wrap {
        display: flex;
        justify-content: space-between;
        mix-blend-mode: difference;
    }
    .st-01 .inner .content-wrap .left-area p {
        font-size: 14px;
        color: #fff;
        line-height: 17px;
        font-weight: 500;
        letter-spacing: 0.02em;
        white-space: pre-wrap;
    }
    .st-01 .inner .content-wrap .right-area .detail_link {
        display: inline-block;
        line-height: 17px;
        font-size: 14px;
        font-weight: 500;
        color: #fff;
        letter-spacing: 0.02em;
    }
    .st-01 .inner .content-wrap .right-area .detail_link .detail-icon {
        display: inline-block;
        margin-left: 10px;
        width: 11px;
        height: 11px;
        background: url("data:image/svg+xml,%3Csvg width='11' height='11' viewBox='0 0 11 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.0006 7.90332L10.0006 1.00009L3.09766 1.00009' stroke='white'/%3E%3Cpath d='M9.97382 1.02588L1 10.0001' stroke='white'/%3E%3C/svg%3E%0A")
            no-repeat;
        transition: transform 0.3s ease;
    }
    .st-02 {
        background-color: #d9d9d9;
        position: relative;
    }
    .st-02 .inner {
        padding: 56px 10px 37px;
    }
    .st-02 .inner .section {
        position: relative;
    }
    .st-02 .inner .section .left_area .num {
        font-size: 30px;
        font-weight: 400;
        line-height: 34px;
        letter-spacing: 0.02em;
        padding-top: 4px;
    }
    .st-02 .inner .section .right_area .title {
        font-size: 30px;
        line-height: 34px;
        font-weight: 400;
        letter-spacing: 0.02em;
        padding-top: 4px;
        padding-bottom: 48px;
    }
    .st-02 .inner .section .row .link_area {
        padding: 6px 0 7px;
    }
    .st-02 .inner .section .row .link_area .detail_link {
        display: inline-block;
        line-height: 17px;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0.02em;
    }
    .st-02 .inner .section .text_wrap {
        padding: 5px 0 30px;
    }
    .st-02 .inner .section .text_wrap .ko_text {
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        letter-spacing: -0.05em;
        font-family: "Pretendard";
        word-break: keep-all;
    }
    .st-02 .inner .section .text_wrap .en_text {
        margin-top: 7px;
        font-size: 16px;
        font-weight: 500;
        line-height: 22px;
        letter-spacing: 0.02em;
        word-break: keep-all;
    }
    .st-02 .inner .section .status_list {
        margin-bottom: 20px;
    }
    .st-02 .inner .section .status_list .list_item {
        position: relative;
        padding: 2px 0 44px;
    }
    .st-02 .inner .section .status_list .list_item .list_title {
        font-size: 16px;
        font-weight: 500;
        line-height: 19px;
        letter-spacing: 0.02em;
    }
    .st-02 .inner .section .status_list .list_item .order {
        font-weight: 500;
    }
    .st-02 .inner .section .status_list .list_item span {
        display: inline-block;
        font-size: 16px;
        font-weight: 400;
        line-height: 19px;
        letter-spacing: 0.02em;
    }
    .st-02 .inner .section .status_list .list_item span + span {
        margin-left: 16px;
    }
    .st-02 .inner .section .status_list .list_item .list_txt {
        font-family: "Pretendard";
        letter-spacing: -0.05em;
    }
    .st-02 .inner .section .status_list .list_item .right_area {
        display: flex;
    }
    .st-02 .inner .section .row .filter_link {
        display: inline-block;
        padding: 5px 0 6px;
        font-size: 16px;
        font-weight: 500;
        line-height: 19px;
        letter-spacing: 0.02em;
    }
    .st-02 .inner .section .row .content_detail {
        position: relative;
        height: 100%;
        justify-content: space-between;
        gap: 10px;
    }
    .st-02 .inner .section .row .content_detail .content_title {
        padding-top: 5px;
    }
    .st-02 .inner .section .row .content_detail .content_title p {
        font-size: 16px;
        font-weight: 500;
        line-height: 24px;
        letter-spacing: 0.02em;
        word-break: keep-all;
    }
    .st-02 .inner .section .row .content_detail .content_media {
        flex: 1;
        display: flex;
        align-items: flex-end;
    }
    .st-02 .inner .section .row .content_detail .content_media .media_box {
        width: 100%;
    }
    .st-02 .inner .section .row .content_detail .content_media .media_box img {
        width: 100%;
        height: 100%;
    }
    .st-02 .inner .section .work_list + .work_list {
        margin-top: 35px;
    }
    .st-02 .inner .section:nth-child(3) {
        margin-top: 50px;
    }
    .st-02 .inner .section .company_list {
        display: flex;
        flex-wrap: wrap;
        height: 380px;
        overflow: hidden;
        gap: 26px 10px;
    }
    .st-02 .inner .section .company_list.open {
        height: auto;
        overflow: visible;
    }
    .st-02 .inner .section .company_list.open + .toggle_btn_area {
        margin-top: 26px;
    }
    .st-02
        .inner
        .section
        .company_list.open
        + .toggle_btn_area
        .toggle_btn::after {
        transform: rotate(180deg);
    }
    .st-02 .inner .section .company_list .company_item {
        position: relative;
        /* width: 173px; */
        flex-basis: calc(50% - 4.5px);
    }
    .st-02 .inner .section .company_list .company_item p {
        font-size: 16px;
        line-height: 19px;
        font-weight: 500;
        letter-spacing: 0.02em;
        word-break: keep-all;
    }
    .st-02 .inner .section .company_list .company_item .title {
        padding: 3px 0 9px;
    }
    .st-02 .inner .section .company_list .company_item:nth-child(even) {
        /* width: 172px; */
        flex-basis: calc(50% - 5.5px);
    }
    .st-02 .inner .section .toggle_btn_area {
        position: relative;
        padding: 3px 0 57px;
    }
    .st-02 .inner .section .toggle_btn_area .toggle_btn {
        width: 100%;
        height: 22px;
        font-size: 16px;
        font-weight: 500;
        line-height: 22px;
        letter-spacing: 0.02em;
        position: relative;
        border: 0;
        outline: none;
        background-color: #d9d9d9;
        text-align: left;
    }
    .st-02 .inner .section .toggle_btn_area .toggle_btn::after {
        content: "";
        display: block;
        position: absolute;
        width: 13px;
        height: 14px;
        top: 4px;
        left: 152px;
        background: url("data:image/svg+xml,%3Csvg width='13' height='14' viewBox='0 0 13 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.48314 7.84694L6.36446 12.7283L11.2456 7.84714' stroke='%233D3D3D'/%3E%3Cpath d='M6.36451 12.6912L6.36425 -1.12884e-05' stroke='%233D3D3D'/%3E%3C/svg%3E%0A")
            no-repeat;
    }
    .st-02 .inner .section .text_box {
        padding: 119px 0;
        text-align: center;
    }
    .st-02 .inner .section .text_box .main_text {
        font-size: 24px;
        font-weight: 400;
        line-height: 24px;
        letter-spacing: 0.02em;
    }
    .st-02 .inner .section .text_box p {
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        letter-spacing: -0.05em;
        margin-top: 10px;
        font-family: "Pretendard";
    }
    .st-03 {
        position: relative;
        width: 100%;
    }
    .st-03 .inner {
        padding: 30px 10px 14px;
    }
    .st-03 .inner .top_area .circle_container {
        /* height: 1704px; */
        position: relative;
        height: calc(100vw - 10px);
    }
    .st-03 .inner .top_area .circle_container .circle {
        position: absolute;
        transform-origin: top;
        width: 100%;
        height: 2px;
        border: 1px solid #000;
        border-radius: 100%;
    }
    .st-03 .inner .top_area .circle_container .circle {
        height: 22.5989%;
    }
    .st-03 .inner .top_area .circle_container .circle2 {
        height: 28.81%;
    }
    .st-03 .inner .top_area .circle_container .circle3 {
        height: 36.72%;
    }
    .st-03 .inner .top_area .circle_container .circle4 {
        height: 45.169%;
    }
    .st-03 .inner .top_area .circle_container .circle5 {
        height: 57.86%;
    }
    .st-03 .inner .top_area .circle_container .circle6 {
        height: 64.124%;
    }
    .st-03 .inner .top_area .circle_container .circle7 {
        height: 75.42%;
    }
    .st-03 .inner .top_area .circle_container .circle8 {
        height: 86.44%;
    }
    .st-03 .inner .top_area .circle_container .circle9 {
        height: 100%;
    }
    .st-03 .inner .bottom_area {
        margin-top: 41px;
    }
    .st-03 .inner .bottom_area .main_title {
        font-size: 11.4vw;
        font-weight: 400;
        line-height: 39.16px;
        text-align: center;
    }

    .st-03 .inner .bottom_area .info_wrap {
        margin-top: 24px;
    }
    .st-03 .inner .bottom_area .info_wrap .top_content {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .st-03 .inner .bottom_area .info_wrap .top_content .location {
        font-size: 13px;
        font-weight: 500;
        line-height: 18px;
        letter-spacing: 0.02em;
    }
    .st-03 .inner .bottom_area .info_wrap .top_content .contact {
        font-size: 13px;
        font-weight: 500;
        line-height: 18px;
        letter-spacing: 0.02em;
    }
    .st-03 .inner .bottom_area .info_wrap .company {
        margin-top: 23px;
        font-size: 13px;
        font-weight: 500;
        line-height: 18px;
        letter-spacing: 0.02em;
    }

    /* about */
    .mo_about_container {
        padding-top: 57px;
    }
    .mo_about_container .st-01 {
        padding: 27px 0 130px;
        height: auto;
    }
    .mo_about_container .st-01 .inner {
        padding: 0 10px;
        justify-content: flex-start;
        height: auto;
    }
    .mo_about_container .st-01 .inner .top_area .title-wrap {
        margin-bottom: 173px;
        mix-blend-mode: initial;
    }
    .mo_about_container .st-01 .inner .title-wrap p {
        font-size: 57px;
        color: #3d3d3d;
        font-weight: 300;
        line-height: 40px;
        word-break: keep-all;
    }
    .mo_about_container .st-01 .inner .bottom_area .title-wrap {
        margin-bottom: 16px;
        mix-blend-mode: initial;
    }
    .mo_about_container .st-01 .inner .bottom_area .title-wrap p {
        line-height: 52px;
    }
    .mo_about_container .st-01 .inner .bottom_area .sub_title p {
        font-size: 16px;
        line-height: 24px;
        letter-spacing: -0.05em;
        color: #3d3d3d;
        font-family: Pretendard;
    }
    .mo_about_container .st-02 .inner {
        padding: 0 10px;
    }
    .mo_about_container .st-02 .inner .section {
        border-top: 1px solid #3d3d3d;
    }
    .mo_about_container .st-02 .inner .section.art02 {
        margin-top: 0;
    }
    .mo_about_container
        .st-02
        .inner
        .section
        .toggle_btn_area
        .toggle_btn::after {
        left: 90px;
    }
    .mo_about_container .st-02 .inner .section .content_wrapper {
        border-top: 1px solid #3d3d3d;
        padding-top: 4px;
        margin-bottom: 40px;
    }
    .mo_about_container .st-02 .inner .section.art04 .content_wrapper {
        margin-bottom: 0;
    }
    .mo_about_container .st-02 .inner .section .content_wrapper:first-child {
        border-top: none;
    }
    .mo_about_container .st-02 .inner .section .content_wrapper .section_title {
        display: flex;
        margin-bottom: 48px;
    }
    .mo_about_container
        .st-02
        .inner
        .section
        .content_wrapper
        .section_title
        .num {
        font-size: 30px;
        line-height: 33.84px;
        letter-spacing: 0.02em;
        font-weight: 400;
        min-width: 122px;
    }
    .mo_about_container .st-02 .inner .section .content_wrapper .circle {
        min-width: 122px;
        position: relative;
    }
    .mo_about_container
        .st-02
        .inner
        .section
        .content_wrapper
        .circle::before {
        content: "";
        display: block;
        width: 24px;
        height: 24px;
        border-radius: 100%;
        background-color: #3d3d3d;
        position: absolute;
        left: 0;
        top: 5px;
    }
    .mo_about_container
        .st-02
        .inner
        .section
        .content_wrapper
        .section_title
        .txt {
        font-size: 30px;
        line-height: 36px;
        letter-spacing: 0.02em;
        font-weight: 400;
        /* margin-right: 29px;
        margin-left: auto; */
    }
    .mo_about_container
        .st-02
        .inner
        .section
        .content_wrapper
        .introduce_area {
        border-top: 1px solid #3d3d3d;
    }
    .mo_about_container
        .st-02
        .inner
        .section
        .content_wrapper
        .introduce_area
        .ko_introduce {
        padding-top: 5px;
        font-size: 16px;
        line-height: 24px;
        font-weight: 400;
        letter-spacing: -0.05em;
        font-family: Pretendard;
        word-break: keep-all;
    }
    .mo_about_container
        .st-02
        .inner
        .section
        .content_wrapper
        .introduce_area
        .ko_introduce
        .en_introduce {
        font-family: "Neue Haas Grotesk Display Pro", sans-serif;
    }
    .mo_about_container
        .st-02
        .inner
        .section
        .content_wrapper
        .introduce_area
        .en_introduce {
        margin-top: 7px;
        font-size: 16px;
        line-height: 22px;
        font-weight: 500;
        letter-spacing: 0.02em;
        word-break: keep-all;
    }
    /* .mo_about_container .st-02 .inner .section .content_wrapper .title{
        position: relative;
        font-size: 30px;
        line-height: 36px;
        letter-spacing: 0.02em;
        font-weight: 300;
        text-align:right;
        margin-right:16px;
        margin-bottom: 48px;
    } */

    .mo_about_container .st-02 {
        padding-bottom: 15px;
    }
    .mo_about_container .st-02 .inner .section .content_wrapper .list_item {
        padding-top: 5px;
        display: flex;
        margin-bottom: 40px;
    }
    .mo_about_container
        .st-02
        .inner
        .section
        .content_wrapper
        .list_item.line {
        border-top: 1px solid #3d3d3d;
    }
    .mo_about_container
        .st-02
        .inner
        .section
        .content_wrapper
        .list_item
        .left_area {
        margin-top: 3px;
        display: flex;
        flex-direction: column;
        gap: 6px 0;
        min-width: 122px;
    }
    .mo_about_container
        .st-02
        .inner
        .section
        .content_wrapper
        .list_item
        .left_area
        .list_title {
        font-weight: 500;
        font-size: 16px;
        line-height: 19.2px;
        letter-spacing: 0.02em;
    }
    .mo_about_container
        .st-02
        .inner
        .section
        .content_wrapper
        .list_item
        .left_area
        .order {
        font-weight: 500;
        font-size: 16px;
        line-height: 19px;
        letter-spacing: 0.02em;
    }
    .mo_about_container
        .st-02
        .inner
        .section
        .content_wrapper
        .list_item
        .right_area
        .text_wrap {
        padding: 0;
    }
    .mo_about_container
        .st-02
        .inner
        .section
        .content_wrapper
        .list_item
        .right_area
        .text_wrap
        .list_txt {
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        letter-spacing: -0.05em;
        font-family: Pretendard;
        word-break: keep-all;
    }
    .mo_about_container
        .st-02
        .inner
        .section
        .content_wrapper
        .list_item
        .right_area
        .text_wrap
        .list_txt
        + .list_txt {
        margin-top: 7px;
        line-height: 22px;
        font-weight: 500;
        letter-spacing: 0.02em;
        font-family: "Neue Haas Grotesk Display Pro", sans-serif;
    }
    .mo_about_container .st-02 .inner .media_section .media_area {
        margin: 7px 0;
        width: 100%;
    }
    .mo_about_container .st-02 .inner .media_section .media_area img {
        width: 100%;
        object-fit: cover;
        height: calc(100vw - 20px);
    }
    .mo_about_container .st-02 .inner .media_section .media_area video {
        width: 100%;
    }
    .mo_about_container
        .st-02
        .inner
        .section
        .content_wrapper
        .work_list_wrapper {
        display: flex;
        flex-direction: column;
        border-top: 1px solid #3d3d3d;
    }
    .mo_about_container
        .st-02
        .inner
        .section
        .content_wrapper
        .work_list_wrapper
        .work_list
        + .work_list {
        margin-top: 0;
    }
    .mo_about_container
        .st-02
        .inner
        .section
        .content_wrapper
        .work_list_wrapper
        .work_list
        .top_area {
        position: relative;
        height: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .mo_about_container
        .st-02
        .inner
        .section
        .content_wrapper
        .work_list_wrapper
        .work_list
        .top_area
        .detail_link {
        margin-bottom: 3px;
        font-size: 18px;
        font-weight: 500;
        line-height: 22px;
        letter-spacing: 0.02em;
    }
    .mo_about_container
        .st-02
        .inner
        .section
        .content_wrapper
        .work_list_wrapper
        .work_list
        .top_area
        .detail-icon {
        margin-left: 10px;
    }
    .mo_about_container
        .st-02
        .inner
        .section
        .content_wrapper
        .work_list_wrapper
        .work_list
        .top_area
        .toggle_btn {
        border: none;
        background: none;
        display: flex;
        align-items: center;
        height: 100%;
        width: 50px;
        padding-right: 10px;
    }
    .mo_about_container
        .st-02
        .inner
        .section
        .content_wrapper
        .work_list_wrapper
        .work_list
        .top_area
        .toggle_btn
        .toggle_icon {
        display: inline-block;
        width: 13px;
        height: 13px;
        background: url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline y1='6.5' x2='13' y2='6.5' stroke='%233D3D3D'/%3E%3Cline x1='6.5' y1='2.18557e-08' x2='6.5' y2='13' stroke='%233D3D3D'/%3E%3C/svg%3E%0A")
            no-repeat;
        margin-left: auto;
    }
    .mo_about_container
        .st-02
        .inner
        .section
        .content_wrapper
        .work_list_wrapper
        .work_list
        .top_area
        .toggle_btn.active
        .toggle_icon {
        height: 1px;
        background: #3d3d3d;
    }
    .mo_about_container
        .st-02
        .inner
        .section
        .content_wrapper
        .work_list_wrapper
        .work_list
        .content_area {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }
    .mo_about_container
        .st-02
        .inner
        .section
        .content_wrapper
        .work_list_wrapper
        .work_list.active
        .content_area {
        max-height: 364px;
    }
    .mo_about_container
        .st-02
        .inner
        .section
        .content_wrapper
        .work_list_wrapper
        .work_list
        .content_area
        li:last-child {
        border-color: #3d3d3d;
    }
    .mo_about_container
        .st-02
        .inner
        .section
        .content_wrapper
        .work_list_wrapper
        .work_list
        .content_area
        li {
        border-bottom: 1px solid #bababa;
        padding: 12px 0 15px;
        display: flex;
        align-items: center;
    }
    .mo_about_container
        .st-02
        .inner
        .section
        .content_wrapper
        .work_list_wrapper
        .work_list
        .content_area
        li
        .num {
        font-size: 16px;
        font-weight: 500;
        line-height: 22px;
        letter-spacing: 0.01em;
        margin-right: 3px;
        width: 20px;
    }
    .mo_about_container
        .st-02
        .inner
        .section
        .content_wrapper
        .work_list_wrapper
        .work_list
        .content_area
        li:first-child
        .num {
        letter-spacing: 2px;
    }

    .mo_about_container
        .st-02
        .inner
        .section
        .content_wrapper
        .work_list_wrapper
        .work_list
        .content_area
        li
        .en_name {
        font-size: 16px;
        font-weight: 500;
        line-height: 22px;
        letter-spacing: 0.01em;
    }
    .mo_about_container
        .st-02
        .inner
        .section
        .content_wrapper
        .work_list_wrapper
        .work_list
        .content_area
        li
        .ko_name {
        font-family: Pretendard;
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        letter-spacing: -0.05em;
        margin-left: auto;
    }

    .mo_about_container .st-02 .inner .section.art03 .content_wrapper {
        margin-bottom: 44px;
    }
    .mo_about_container
        .st-02
        .inner
        .section
        .content_wrapper
        .process_wrapper
        .process_item {
        padding-top: 5px;
        padding-bottom: 30px;
        border-top: 1px solid #3d3d3d;
    }
    .mo_about_container
        .st-02
        .inner
        .section
        .content_wrapper
        .process_wrapper
        .process_item:last-child {
        padding-bottom: 0;
    }
    .mo_about_container
        .st-02
        .inner
        .section
        .content_wrapper
        .process_wrapper
        .process_item
        .en_txt {
        font-family: Neue Haas Grotesk Display Pro;
        font-size: 16px;
        font-weight: 500;
        line-height: 22px;
        letter-spacing: 0.02em;
        display: flex;
    }
    .mo_about_container
        .st-02
        .inner
        .section
        .content_wrapper
        .process_wrapper
        .process_item
        .en_txt
        .order {
        line-height: 18.3px;
        text-align: right;
        margin-left: auto;
    }
    .mo_about_container
        .st-02
        .inner
        .section
        .content_wrapper
        .process_wrapper
        .process_item
        .ko_txt {
        margin-top: 6px;
        font-family: Pretendard;
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        letter-spacing: -0.05em;
    }
    .mo_about_container
        .st-02
        .inner
        .section
        .content_wrapper
        .process_wrapper
        .process_item
        .img_box {
        margin-top: 10px;
        height: 135px;
        display: inline-flex;
    }
    .mo_about_container
        .st-02
        .inner
        .section
        .content_wrapper
        .process_wrapper
        .process_item
        .img_box
        img {
        max-width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .mo_about_container
        .st-02
        .inner
        .section
        .content_wrapper
        .process_wrapper
        .process_item
        .img_box
        img.active {
        display: none;
    }
    .mo_about_container
        .st-02
        .inner
        .section
        .content_wrapper
        .process_wrapper
        .process_item
        .img_box.active
        img.active {
        display: inherit;
    }
    .mo_about_container
        .st-02
        .inner
        .section
        .content_wrapper
        .process_wrapper
        .process_item
        .img_box.active
        img.default {
        display: none;
    }
    .mo_about_container .st-02 .inner .section .content_wrapper .art04_title {
        position: relative;
        flex: 1;
        padding-top: 4px;
        font-size: 12px;
        font-weight: 500;
        line-height: 13.73px;
        letter-spacing: 0.02em;
    }
    .mo_about_container
        .st-02
        .inner
        .section
        .content_wrapper
        .center_text_wrap {
        display: flex;
        flex-direction: column;
        padding: 70px 0;
        text-align: center;
    }
    .mo_about_container
        .st-02
        .inner
        .section
        .content_wrapper
        .center_text_wrap
        .en_text {
        font-size: 28px;
        font-weight: 400;
        line-height: 27.66px;
        letter-spacing: 0.02em;
    }
    .mo_about_container
        .st-02
        .inner
        .section
        .content_wrapper
        .center_text_wrap
        .ko_text {
        margin-top: 18px;
        font-family: Pretendard;
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        letter-spacing: -0.05em;
    }
    .mo_about_container .st-02 .inner .section .content_wrapper .client_list {
        display: flex;
        flex-wrap: wrap;
        gap: 26px 0;
        max-height: 210px;
        overflow: hidden;
        transition: max-height 0.3s;
    }
    .mo_about_container
        .st-02
        .inner
        .section
        .content_wrapper
        .client_list.open {
        max-height: fit-content;
    }
    .mo_about_container
        .st-02
        .inner
        .section
        .content_wrapper
        .client_list
        li {
        position: relative;
        font-size: 16px;
        font-weight: 500;
        line-height: 18px;
        letter-spacing: 0.02em;
        padding: 3px 0 0;
    }
    .mo_about_container
        .st-02
        .inner
        .section
        .content_wrapper
        .client_list
        li
        a {
        cursor: default;
    }
    .mo_about_container
        .st-02
        .inner
        .section
        .content_wrapper
        .client_list
        li:nth-child(2n-1) {
        flex: 0 1 calc(50% - 4.5px);
        margin-right: 10px;
    }
    .mo_about_container
        .st-02
        .inner
        .section
        .content_wrapper
        .client_list
        li:nth-child(2n) {
        flex: 0 1 calc(50% - 5.5px);
    }
    .mo_about_container
        .st-02
        .inner
        .section
        .content_wrapper
        .toggle_btn_area {
        margin-top: 26px;
        padding: 3px 0 48px;
    }
    .mo_about_container
        .st-02
        .inner
        .section
        .client_list.open
        + .toggle_btn_area
        .toggle_btn::after {
        transform: rotate(180deg);
    }

    .mo_about_container
        .st-02
        .inner
        .section.art05
        .content_wrapper
        .section_title
        .txt {
        margin-left: auto;
        margin-right: 40px;
    }
    .mo_about_container
        .st-02
        .inner
        .section.art05
        .content_wrapper
        .introduce_area
        .ko_introduce {
        padding-top: 4px;
    }
    .mo_about_container
        .st-02
        .inner
        .section.art05
        .content_wrapper
        .introduce_area
        .en_introduce {
        margin-bottom: 39px;
    }
    .mo_about_container
        .st-02
        .inner
        .section.art05
        .content_wrapper
        .profile_list_wrapper {
        display: flex;
        flex-wrap: wrap;
        gap: 30px 0;
    }
    .mo_about_container
        .st-02
        .inner
        .section.art05
        .content_wrapper
        .profile_list {
        position: relative;
    }
    .mo_about_container
        .st-02
        .inner
        .section.art05
        .content_wrapper
        .profile_list:nth-child(2n-1) {
        flex: 0 1 calc(50% - 4.5px);
        margin-right: 10px;
    }
    .mo_about_container
        .st-02
        .inner
        .section.art05
        .content_wrapper
        .profile_list:nth-child(2n) {
        flex: 0 1 calc(50% - 5.5px);
    }
    .mo_about_container
        .st-02
        .inner
        .section.art05
        .content_wrapper
        .profile_list
        .name {
        margin-top: 3px;
        font-family: Pretendard;
        font-size: 16px;
        font-weight: 400;
        line-height: 19px;
    }
    .mo_about_container
        .st-02
        .inner
        .section.art05
        .content_wrapper
        .profile_list
        .name
        span {
        font-family: Neue Haas Grotesk Display Pro;
        margin-left: 10px;
        line-height: 18px;
        letter-spacing: 0.02em;
        font-weight: 500;
    }
    .mo_about_container
        .st-02
        .inner
        .section.art05
        .content_wrapper
        .profile_list
        .job {
        margin-top: 10px;
        font-size: 16px;
        font-weight: 500;
        line-height: 18px;
        letter-spacing: 0.02em;
    }
    .mo_about_container
        .st-02
        .inner
        .section.art05
        .content_wrapper
        .profile_list
        .date {
        margin-top: 4px;
        font-size: 16px;
        font-weight: 500;
        line-height: 18px;
        letter-spacing: 0.02em;
    }
    .mo_about_container #footer {
        position: inherit;
        top: auto;
    }
    .mo_about_container #footer::before {
        content: "";
        position: relative;
        display: block;
        width: 100%;
        height: calc(20vh * 4.5);
        background: transparent;
    }
    .mo_about_container .st-03 {
        background: transparent !important;
        height: auto !important;
    }
    .mo_about_container .st-03 .inner {
        padding: 35px 10px 48px;
        background: #e7ff2b;
        position: relative;
        z-index: 1000;
    }
    .mo_about_container .st-03 .inner .top_area > .slogan {
        display: flex;
        justify-content: space-between;
        font-size: 29px;
        font-weight: 400;
        line-height: 32px;
        letter-spacing: 0.02em;
        padding-right: 22px;
    }
    .mo_about_container .st-03 .inner .top_area > .slogan p:last-child {
        letter-spacing: 0;
    }
    .mo_about_container .st-03 .inner .top_area .company {
        margin-top: 31px;
        font-size: 7.73vw;
        font-weight: 400;
        line-height: 32px;
        letter-spacing: 0.02em;
        margin-right: -1px;
    }
    .mo_about_container .st-03 .inner .main_content {
        margin-top: 51px;
    }
    .mo_about_container .st-03 .inner .main_content .text_box {
        margin-bottom: 70px;
    }
    .mo_about_container .st-03 .inner .main_content .text_box .ko_text {
        font-family: Pretendard;
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        letter-spacing: -0.05em;
        word-break: keep-all;
    }
    .mo_about_container .st-03 .inner .main_content .text_box .temp_txt {
        width: 110px;
        display: inline-block;
    }
    .mo_about_container .st-03 .inner .main_content .text_box .en_text {
        margin-top: 7px;
        font-size: 16px;
        font-weight: 450;
        line-height: 22px;
        letter-spacing: 0.02em;
        word-break: keep-all;
    }
    .mo_about_container .st-03 .inner .main_content .tedo_container {
        position: relative;
        padding-top: 4px;
    }
    .mo_about_container .st-03 .inner .main_content .tedo_container > p {
        position: relative;
        font-size: 18px;
        font-weight: 500;
        line-height: 21px;
        letter-spacing: 0.02em;
        padding-bottom: 241px;
        padding-left: 26px;
    }
    .mo_about_container
        .st-03
        .inner
        .main_content
        .tedo_container
        > p::before {
        content: "";
        position: absolute;
        left: 0;
        top: 4px;
        display: block;
        width: 14px;
        height: 14px;
        background-color: #000;
        border-radius: 100%;
    }

    .mo_about_container .st-03 .inner .main_content .tedo_container img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 50%;
        max-height: 262px;
        /* height: 100%; */
        /* max-height: 300px; */
    }
    .mo_about_container .st-03 .inner .bottom_area {
        margin-top: 41px;
    }
    .mo_about_container .st-03 .inner .bottom_area .main_title {
        font-size: 11.4vw;
        font-weight: 400;
        line-height: 39.16px;
        text-align: center;
    }

    .mo_about_container .st-03 .inner .bottom_area .info_wrap {
        margin-top: 24px;
    }
    .mo_about_container .st-03 .inner .bottom_area .info_wrap .top_content {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .mo_about_container
        .st-03
        .inner
        .bottom_area
        .info_wrap
        .top_content
        .location {
        font-size: 13px;
        font-weight: 500;
        line-height: 18px;
        letter-spacing: 0.02em;
    }
    .mo_about_container
        .st-03
        .inner
        .bottom_area
        .info_wrap
        .top_content
        .contact {
        font-size: 13px;
        font-weight: 500;
        line-height: 18px;
        letter-spacing: 0.02em;
    }
    .mo_about_container .st-03 .inner .bottom_area .info_wrap .company {
        margin-top: 23px;
        font-size: 13px;
        font-weight: 500;
        line-height: 18px;
        letter-spacing: 0.02em;
    }
    /* /about */

    /* works */
    .works_section {
        background-color: #d9d9d9;
        display: flex;
        flex-direction: column;
        /* min-height: 100vh; */
        min-height: calc(var(--vh, 1vh) * 100);
    }
    .works_section .st-01 {
        height: auto;
        /* min-height: calc(100vh - 96px); */
        min-height: calc((var(--vh, 1vh) * 100) - 96px);
    }
    .works_section .st-01 .inner {
        padding-top: 57px;
        padding-bottom: 52px;
        justify-content: inherit;
    }
    .works_section .st-01 .inner .top_area .tabs_wrap {
        flex: 1;
    }
    .works_section .st-01 .inner .top_area {
        padding-top: 7px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        position: fixed;
        width: calc(100% - 20px);
        background-color: #d9d9d9;
    }
    .works_section .st-01 .inner .top_area .dropdown {
        position: relative;
        width: 100%;
        border-bottom: 1px solid #3d3d3d;
    }
    .works_section .st-01 .inner .top_area .dropdown .dropdown_btn {
        position: relative;
        background-color: #d9d9d9;
        color: #3d3d3d;
        padding-bottom: 8px;
        line-height: 22px;
        border: none;
        cursor: pointer;
        border-radius: 5px;
        font-size: 16px;
        font-weight: 500;
        width: 100%;
        text-align: left;
        font-family: "Neue Haas Grotesk Display Pro", sans-serif;
    }
    .works_section .st-01 .inner .top_area .dropdown .dropdown_btn::after {
        content: "";
        position: absolute;
        right: 3px;
        top: 8px;
        display: block;
        width: 15px;
        height: 8px;
        background: url("data:image/svg+xml,%3Csvg width='15' height='8' viewBox='0 0 15 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.00023 0.50856L7.50879 7.01712L14.0173 0.508561' stroke='%233D3D3D'/%3E%3C/svg%3E%0A")
            no-repeat;
    }
    .works_section .st-01 .inner .top_area .dropdown .dropdown-content {
        overflow: hidden;
        display: flex;
        flex-direction: column;
        max-height: 0;
        position: absolute;
        top: 31px;
        background-color: #c6c6c6;
        width: 100%;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
        z-index: 1;
        /* transition: max-height 0.3s ease; */
    }
    .works_section .st-01 .inner .top_area .dropdown.show .dropdown-content {
        max-height: 350px;
    }
    .works_section .st-01 .inner .top_area .dropdown .dropdown-content a {
        color: #3d3d3d;
        padding: 0 15px;
        text-decoration: none;
        display: block;
        font-size: 16px;
        line-height: 30px;
        font-weight: 500;
    }
    .works_section
        .st-01
        .inner
        .top_area
        .dropdown
        .dropdown-content
        a:last-child {
        border-bottom: none;
    }
    .works_section
        .st-01
        .inner
        .top_area
        .dropdown
        .dropdown-content
        .head-item
        a {
        padding: 7px 8px 9px;
        border-bottom: 1px solid #3d3d3d;
        line-height: 24px;
    }
    .works_section
        .st-01
        .inner
        .top_area
        .dropdown
        .dropdown-content
        .scrolled_items {
        overflow: auto;
        display: flex;
        flex-direction: column;
        gap: 8px 0;
        padding: 5px 0;
    }

    .scrolled_items::-webkit-scrollbar {
        width: 10px;
    }
    .scrolled_items::-webkit-scrollbar-thumb {
        background-color: rgba(61, 61, 61, 0.7);
        border: 4px solid #c6c6c6;
    }

    .scrolled_items::-webkit-scrollbar-track {
        background-color: rgba(0, 0, 0, 0);
    }
    .works_section .st-01 .inner .tab_content {
        padding-top: 50px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 35px 10px;
    }

    .works_section .st-01 .inner .tab_content li .img_area a img,
    .works_section .st-01 .inner .tab_content li .img_area button img {
        width: 100%;
    }
    .works_section .st-01 .inner .tab_content li .info_area {
        margin-top: 10px;
    }
    .works_section .st-01 .inner .tab_content li .info_area .title {
        font-size: 18px;
        font-weight: 500;
        line-height: 21px;
        letter-spacing: 0.02em;
        word-break: keep-all;
    }
    .works_section .st-01 .inner .tab_content li .info_area .client {
        word-break: keep-all;
    }
    .works_section .st-01 .inner .tab_content li .info_area .tag {
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
        letter-spacing: 0.02em;
        margin-top: 8px;
        word-break: keep-all;
    }
    .works_section .footer {
        position: relative;
        padding: 0 10px 12px;
    }
    .works_section .footer.top_line::before {
        width: calc(100% - 20px);
    }
    .works_section .footer .inner {
        display: flex;
        flex-wrap: wrap;
        row-gap: 23px;
        justify-content: space-between;
        padding-top: 7px;
    }
    .works_section .footer .inner p {
        font-size: 13px;
        font-weight: 500;
        line-height: 18px;
        letter-spacing: 0.02em;
    }
    .works_section .st-01 .inner .title_wrap {
        padding: 23px 0 45px;
    }
    .works_section .st-01 .inner .title_wrap .title {
        font-size: 30px;
        font-weight: 400;
        line-height: 36px;
        letter-spacing: 0.01em;
    }
    .works_section .st-01 .inner .detail_wrap {
        position: relative;
    }
    .works_section .st-01 .inner .detail_wrap .info {
        position: relative;
        display: flex;
        padding: 8px 0;
    }
    .works_section .st-01 .inner .detail_wrap .info p {
        font-size: 16px;
        font-weight: 500;
        line-height: 18px;
        letter-spacing: 0.02em;
        min-width: 61px;
    }
    .works_section .st-01 .inner .detail_wrap .info p + p {
        min-width: auto;
        flex: 1;
        word-break: keep-all;
    }
    .works_section .st-01 .inner .detail_wrap .detail_box {
        display: flex;
        flex-direction: column;
        padding-top: 10px;
    }

    .works_section .st-01 .inner .detail_wrap .detail_box img {
        width: 100%;
        margin-top: 8px;
    }
    .works_section .st-01 .inner .detail_wrap .detail_box video {
        width: 100%;
    }
    .works_section .st-01 .inner .detail_wrap .detail_box .en_text img {
        width: 65%;
    }
    .works_section .st-01 .inner .detail_wrap .detail_box img:first-child {
        margin-top: 0;
    }
    .works_section .st-01 .inner .detail_wrap .detail_box img + img {
        margin-top: 8px;
    }
    .works_section .st-01 .inner .detail_wrap .detail_box video ~ img {
        margin-top: 8px;
    }
    .works_section .st-01 .inner .detail_wrap .detail_box img ~ video {
        margin-top: 8px;
    }
    .works_section .st-01 .inner .detail_wrap .detail_box video ~ video {
        margin-top:8px;
    }
    .works_section .st-01 .inner .detail_wrap .detail_box .ko_text {
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        letter-spacing: -0.05em;
        font-family: "Pretendard";
        margin-top: 15px;
        word-break: keep-all;
    }
    .works_section .st-01 .inner .detail_wrap .detail_box .ko_content {
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        letter-spacing: -0.05em;
        font-family: "Pretendard";
        word-break: keep-all;
    }
    
    .works_section .st-01 .inner .detail_wrap .detail_box .ko_content p{
        margin-top: 15px;
        word-break: keep-all;
    }
    .works_section .st-01 .inner .detail_wrap .detail_box .ko_content img,
    .works_section .st-01 .inner .detail_wrap .detail_box .en_content img {
        width: 65%;
        pointer-events: none;
    }
    .works_section .st-01 .inner .detail_wrap .detail_box .en_text {
        font-size: 16px;
        font-weight: 500;
        line-height: 22px;
        letter-spacing: 0.02em;
        margin-top: 15px;
        word-break: keep-all;
    }
    .works_section .st-01 .inner .detail_wrap .detail_box .en_content {
        font-size: 16px;
        font-weight: 500;
        line-height: 22px;
        letter-spacing: 0.02em;
        word-break: keep-all;
    }
    .works_section .st-01 .inner .detail_wrap .detail_box .en_content p{
        margin-top: 15px;
        word-break: keep-all;
    }
    /* .works_section .st-01 .inner .detail_wrap .detail_box.second_layout .en_text p:nth-child(n+2){
        margin-top: 15px;
    }
    .works_section .st-01 .inner .detail_wrap .detail_box.second_layout .ko_text p:nth-child(n+2){
        margin-top: 15px;
    } */
    /* /works */

    /* recruit */
    .recruit_section {
        background-color: #d9d9d9;
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        min-height: calc(var(--vh, 1vh) * 100);
    }
    .recruit_section .st-01 {
        height: auto;
    }
    .recruit_section .st-01 .inner {
        padding-top: 57px;
        justify-content: inherit;
        padding-bottom: 80px;
    }
    .recruit_section .st-01 .inner .title_wrap {
        padding: 23px 0 51px;
    }
    .recruit_section .st-01 .inner .title_wrap .title {
        font-size: 30px;
        font-weight: 400;
        line-height: 36px;
        letter-spacing: 0.02em;
    }
    .recruit_section .st-01 .inner .content {
        position: relative;
    }
    .recruit_section .st-01 .inner .content .text_wrap {
        position: relative;
        padding: 5px 0 65px;
    }
    .recruit_section .st-01 .inner .content .list_wrap {
        margin-bottom: 82px;
    }
    .recruit_section .st-01 .inner .content .ko_text {
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        letter-spacing: -0.05em;
        font-family: "Pretendard";
        word-break: keep-all;
    }
    .recruit_section .st-01 .inner .content .en_text {
        font-size: 16px;
        font-weight: 500;
        line-height: 22px;
        letter-spacing: 0.02em;
        margin-top: 7px;
        word-break: keep-all;
    }
    .recruit_section .st-01 .inner .content .list_wrap li {
        display: flex;
        position: relative;
        padding: 5px 0 12px;
    }
    .recruit_section .st-01 .inner .content .list_wrap li .title {
        width: 122px;
        flex: none;
    }
    .recruit_section .st-01 .inner .content .list_wrap li .title p {
        font-size: 16px;
        font-weight: 500;
        line-height: 19px;
        letter-spacing: 0.02em;
    }
    .recruit_section .st-01 .inner .content .list_wrap li .title p + p {
        margin-top: 7px;
    }
    .recruit_section .st-01 .inner .content .submit_btn {
        position: fixed;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: calc(100% - 20px);
        height: 70px;
        border: none;
        outline: none;
        background-color: #d9d9d9;
        font-size: 18px;
        font-weight: 400;
        line-height: 24px;
        letter-spacing: -0.05em;
        font-family: "Pretendard";
    }
    .recruit_section .st-01 .inner .content .row {
        gap: 40px;
    }
    .recruit_section .st-01 .inner .content .row + .row {
        margin-top: 30px;
    }
    .recruit_section .st-01 .inner .content .row .left_area {
        padding-top: 5px;
        flex: none;
    }
    .recruit_section .st-01 .inner .content .row .left_area .title_box {
        width: 82px;
    }
    .recruit_section .st-01 .inner .content .row .left_area .title_box .title {
        font-size: 20px;
        font-weight: 500;
        line-height: 24px;
        letter-spacing: 0.02em;
        word-break: keep-all;
    }
    .recruit_section .st-01 .inner .content .row .right_area .text_wrap {
        padding: 5px 0 7px;
    }
    .recruit_section .st-01 .inner .content .row .right_area .link_wrap {
        position: relative;
        padding: 5px 0 7px;
    }
    .recruit_section .st-01 .inner .content .row .right_area .link_wrap a {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 16px;
        line-height: 18px;
        font-weight: 500;
        position: relative;
    }
    .recruit_section
        .st-01
        .inner
        .content
        .row
        .right_area
        .link_wrap
        a::after {
        content: "";
        display: block;
        width: 11px;
        height: 11px;
        background: url("data:image/svg+xml,%3Csvg width='11' height='11' viewBox='0 0 11 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.0006 7.90332L10.0006 1.00009L3.09766 1.00009' stroke='%233D3D3D'/%3E%3Cpath d='M9.97382 1.02588L1 10.0001' stroke='%233D3D3D'/%3E%3C/svg%3E%0A")
            no-repeat;
    }
    .recruit_section .footer {
        position: relative;
        padding: 0 10px 12px;
        margin-top: 0;
    }
    .recruit_section .footer.top_line::before {
        width: calc(100% - 20px);
    }
    .recruit_section .footer .inner {
        display: flex;
        flex-wrap: wrap;
        row-gap: 23px;
        justify-content: space-between;
        padding-top: 7px;
    }
    .recruit_section .footer .inner p {
        font-size: 13px;
        font-weight: 500;
        line-height: 18px;
        letter-spacing: 0.02em;
    }
    /* /recruit */

    .mo_contact > .inner {
        min-height: calc(100vh - 57px - 96px);
        min-height: calc((var(--vh, 1vh) * 100) - 57px - 96px);
    }
}

/* tablet */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .st-03 .inner .bottom_area .main_title {
        font-size: 11.2vw;
        line-height: 11.2vw;
    }

    .tab_br {
        display: block;
    }
    .mo_br {
        display: none;
    }
    .mo_about_container
        .st-02
        .inner
        .section
        .content_wrapper
        .work_list_wrapper
        .work_list.active
        .content_area {
        max-height: 364px;
    }

    .mo_about_container
        .st-02
        .inner
        .section
        .content_wrapper
        .work_list_wrapper
        .work_list
        .content_area
        li:last-child {
        border-color: #3d3d3d;
    }
    .mo_about_container .st-03 .inner .bottom_area .main_title {
        font-size: 11.2vw;
        line-height: 11.2vw;
    }
    .works_section .st-01 .inner .detail_wrap .detail_box p span {
        font-size: 16px;
    }
    .cubespinner li {
        font-size: 16px;
    }
    .side-menu .inner .menu_list {
        margin-top: 70px;
    }
    .side-menu .inner .menu_list li:last-child .sub_menu li a {
        font-size: 23px;
        line-height: 23px;
        padding: 9px 0 13px;
    }

    .side-menu .inner {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
        padding: 25px 10px 30px;
    }
    .side-menu .inner .title {
        font-size: 55px;
        line-height: 55px;
    }
    .side-menu .inner .footer .inner {
        flex-direction: row;
        height: auto;
        padding-bottom: 0;
    }
    .side-menu .inner .menu_list li {
        padding: 10px 0;
    }
    .works_section .st-01 .inner .tab_content li .info_area .tag {
        font-weight: 500;
    }
    .works_section .st-01 .inner .detail_wrap .detail_box img {
        margin-top: 15px;
    }

    .recruit_section .st-01 .inner .content .list_wrap li .title {
        width: 228px;
    }
    .recruit_section .st-01 .inner .content .row .left_area .title_box {
        width: 130px;
    }
    .recruit_section .st-01 .inner {
        min-height: calc(100vh - 55px);
        min-height: calc((var(--vh, 1vh) * 100) - 55px);
    }
}
@media (min-width: 1025px) {
    .mo_br {
        display: none;
    }
    .st-03 .inner .bottom_area .main_title {
        line-height: 1.1;
    }
    .mo_about_container .st-03 .inner .bottom_area .main_title {
        line-height: 1.1;
    }
}