@font-face {
    font-family: 'albert';
    src: url('/font/AlbertSans-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'albert';
    src: url('/font/AlbertSans-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'albert';
    src: url('/font/AlbertSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'albert';
    src: url('/font/AlbertSans-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'albert';
    src: url('/font/AlbertSans-Thin.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

* {
    font-family: 'Pretendard', 'sans-serif';
}

/* iOS 오버스크롤 바운스 효과 방지 */
html, body {
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
}
#footer {
    position: relative;
    z-index: 1;
}
img {
    height: auto;
    vertical-align: middle;
}
.flex {
    display: flex;
}
.flex.jcsb {
    justify-content: space-between;
}
.ta_l {
    text-align: left;
}
.ta_r {
    text-align: right;
}
.max_w {
    max-width: 1920px;
}
.pos_r {
    position: relative;
}
.pos_center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.pc {

}
.mo {
    display: none !important;
}
@media (max-width: 767px) {
    .pc {
        display: none !important;
    }
    .mo {
        display: block !important;
    }
    .mo_flex {
        display: flex !important;
    }
}
.cont_wrap {
    max-width: 192rem;
    padding-left: clamp(2rem, 6.5vw, 12.5rem);
    padding-right: clamp(2rem, 6.5vw, 12.5rem);
    margin: 0 auto;
}

section {
    position: relative;
    background-color: #fff;
}
section .title, 
section .desc {
    line-height: 1;
}
.section1 {
    background: url('/img/portfolio/spc/section01_bg_pc.png') no-repeat center center / cover;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}
.section1 .section_head .shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.section1 .section_head_inner {
    position: relative;
    z-index: 1;
    margin-top: 5.6rem;
    padding: 0 7.4rem;
}
.section1 .section_head_inner > div {
    font-size: 1.4rem;
    color: #fff;
    line-height: 1.45;
}
.section1 .logo {
    width: clamp(20.8rem, 21.667vw, 41.6rem);
}
.section2 {
    margin-top: 100vh;
    margin-top: 100dvh;
    padding: 10rem 0;
}
.section2 .section_inner.pc {
    gap: clamp(5rem, 5.21vw, 10rem);
}
.section2 .right {
    display: flex;
    flex-direction: column;
    height: auto;
    justify-content: space-between;
    position: relative;
    z-index: 1;
}
.section2 .right > .flex {
    gap: clamp(1.85rem, 1.927vw, 3.7rem);
}
.section2 .brand_badge {
    margin-top: clamp(0.75rem, 0.781vw, 1.5rem);
}
.section2 .text_set .title {
    font-size: clamp(1.7rem, 1.77vw, 3.4rem);
    font-weight: bold;
    line-height: 1;
    color: #000;
}
.section2 .text_set .desc {
    margin-top: clamp(2.25rem, 2.344vw, 4.5rem);
}
.section2 .text_set .desc span {
    letter-spacing: -0.075rem;
    line-height: 1;
    font-size: clamp(1.2rem, 0.78vw, 1.5rem);
    color: #0c0c0c;
    opacity: .8;
    display: inline-block;
    margin-top: clamp(0.4835rem, 0.504vw, 0.967rem);
}
.section2 .text_set .desc span:first-child {
    margin-top: 0;
}
.section2 .pc .txt_logo {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: clamp(34.35rem, 35.78vw, 68.7rem);
    text-align: right;
}
.section2 .pc .left img {
    width: 100%;
}
.section2 .pc .left .brand_badge {
    position: absolute;
    top: clamp(1rem, 1.042vw, 2rem);
    left: clamp(1rem, 1.042vw, 2rem);
}

.section3 {
    background: url('/img/portfolio/spc/section03_bg.png') no-repeat center / cover;
}
.section3 .section_inner {
    padding: clamp(9.65rem, 10.052vw, 19.3rem) 0 clamp(3rem, 3.125vw, 6rem);
}
.section3 .top {
    text-align: center;
}
.section3 .top .logo {
    width: clamp(5.15rem, 5.364vw, 10.3rem);
    margin: 0 auto;
}
.section3 .top .title {
    width: clamp(39.65rem, 41.302vw, 79.3rem);
    margin: clamp(1rem, 1.042vw, 2rem) auto 0;
}
.section3 .top .desc {
    margin-top: clamp(1.25rem, 1.302vw, 2.5rem);
}
.section3 .top .desc span {
    display: inline-block;
    font-size: clamp(1.2rem, 0.781vw, 1.5rem);
    line-height: 1;
    opacity: .8;
    color: #fff;
    letter-spacing: -0.075rem;
    margin-top: clamp(0.35rem, 0.365vw, 0.7rem);
}
.section3 .top .desc span:first-child {
    margin-top: 0;
}
.section3 .bottom {
    margin-top: clamp(7.5rem, 7.813vw, 15rem);
}
.section3 .swiper-wrapper {
    transition-timing-function: linear !important;
}
.section3 .swiper-slide {
    width: clamp(19.25rem, 20.052vw, 38.5rem) !important;
}
.section3 .brand_badge {
    margin-top: 1.5rem;
}

.section4 {
    background: url('/img/portfolio/spc/section03_bg.png') no-repeat center/cover;
}
.section4 .section_inner.pc {
    padding-top: clamp(4.25rem, 4.427vw, 8.5rem);
    padding-bottom: clamp(4.25rem, 4.427vw, 8.5rem);
    display: flex;
    justify-content: center;
    gap: clamp(1rem, 1.042vw, 2rem);
}
.section4 .left {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(1rem, 1.042vw, 2rem);
    width: 50%;
}
.section4 .right {
    width: 50%;
}
.section4 .item_wrap .item {
    padding: clamp(1.75rem, 1.823vw, 3.5rem) clamp(1.5rem, 1.563vw, 3rem) clamp(1.5rem, 1.563vw, 3rem);
    background: rgba(255, 255, 255, 0.4);
    border-radius: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.section4 .item_wrap .item_header {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}
.section4 .item_wrap .item_header .step {
    background-color: #22B2e9;
    width: 3rem;
    height: 3rem;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: bold;
    font-size: clamp(1.2rem, 0.729vw, 1.4rem);
}
.section4 .item_wrap .item_header .title {
    font-size: clamp(1.6rem, 1.667vw, 3.2rem);   
    font-weight: bold;
    color: #000;
}
.section4 .item_wrap .item_cont span {
    font-size: clamp(1.2rem, 0.781vw, 1.5rem);
    line-height: 1;
    margin-top: clamp(0.45rem, 0.469vw, 0.9rem);
    color: #0c0c0c;
    opacity: .8;
    display: inline-block;
    letter-spacing: -0.075rem;
}
.section4 .item_wrap .item_cont span:first-child {
    margin-top: 0;
}

.section4 .item_wrap .item2 img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: clamp(8.2rem, 8.542vw, 16.4rem);
}

.section5 .section_inner {
    padding-top: clamp(7rem, 7.292vw, 14rem);
    padding-bottom: clamp(10rem, 10.417vw, 20rem);
}
.section5 .section_inner > .top {
    display: flex;
    gap: clamp(2rem, 2.083vw, 4rem);
}
.section5 .top .left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.section5 .top .left .top .text_set {
    margin-top: clamp(1.5rem, 1.563vw, 3rem);
}
.section5 .top .left .top .text_set .title {
    font-weight: bold;
    font-size: clamp(1.7rem, 1.771vw, 3.4rem);
    color: #000;
}
.section5 .top .left .top .text_set .desc {
    margin-top: clamp(2.25rem, 2.344vw, 4.5rem);
}
.section5 .top .left .top .text_set .desc span {
    display: inline-block;
    font-size: clamp(1.2rem, 0.781vw, 1.5rem);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: -0.075rem;
    margin-top: clamp(0.45rem, 0.469vw, 0.9rem);
    color: #0c0c0c;
    opacity: 0.8;
}
.section5 .top .left .top .text_set .desc span:first-child {
    margin-top: 0;
}
.section5 .left .bottom {
    display: flex;
    gap: clamp(1.5rem, 1.563vw, 3rem);
}
.section5 .left .bottom .item .text_set {
    position: absolute;
    top: clamp(1.25rem, 1.302vw, 2.5rem);
    left: clamp(1.25rem, 1.302vw, 2.5rem);
}
.section5 .left .bottom .item .text_lang {
    font-size: clamp(1.2rem, 0.938vw, 1.8rem);
    font-weight: bold;
    letter-spacing: -0.036rem;
    color: #0c0c0c;
}
.section5 .left .bottom .item .text_font {
    font-size: clamp(1.2rem, 0.938vw, 1.8rem);
    font-weight: 400;
    letter-spacing: -0.036rem;
    margin-top: clamp(0.08rem, 0.083vw, 0.16rem);
}
.section5 .card_wrap1 {
    display: flex;
    gap: clamp(1rem, 1.042vw, 2rem);
    margin-top: clamp(10rem, 10.417vw, 20rem);
    justify-content: center;
    position: relative;
    top: 0;
    left: 0;
}
.section5 .card_wrap2 {
    display: flex;
    gap: clamp(1rem, 1.042vw, 2rem);
    pointer-events: none;
}
.section5 .card_wrap2 .card {
    width: calc((100% - (clamp(1.1rem, 1.146vw, 2.2rem) * 4)) / 5);
    background-color: transparent;
    pointer-events: none;
    
}
.section5 .card_wrap3 {
    display: flex;
    margin-top: 18rem;
    gap: 2rem;
    display: none;
}
.section5 .card {
    background: aqua;
    padding: clamp(1.35rem, 1.406vw, 2.7rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #fff;
    aspect-ratio: 1/1;
    width: calc((100% - (clamp(1.1rem, 1.146vw, 2.2rem) * 4)) / 5);
    border-radius: 2rem;
}
.section5 .card_wrap3 .card {
    background-color: transparent;
    aspect-ratio: 1/1;
}
.section5 .card.primary {
    background-color: #3cb4e5;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(calc(-50% - 18rem),0);
    z-index: 4;
}
.section5 .card.sub {
    background-color: #96bceb;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(calc(-50% - 9rem), 0);
    z-index: 3;
}
.section5 .card.yellow {
    background-color: #FED400;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}
.section5 .card.light_gray {
    background-color:#f5f5f5;
    position: absolute;
    left: 50%;
    transform: translate(calc(-50% + 9rem), 0);
    top: 0;
    z-index: 1;
}
.section5 .card.light_gray .title,
.section5 .card.light_gray .hex,
.section5 .card.light_gray .rgb {
    color: rgba(0, 0, 0, 0.9);
}
.section5 .card.black {
    background-color: #000;
    position: absolute;
    left: 50%;
    transform: translate(calc(-50% + 18rem), 0);
    top: 0;
}
.section5 .card .title {
    color: inherit;
    font-size: clamp(1.6rem, 0.938vw, 1.8rem);
    font-weight: 500;
}
.section5 .hex,
.section5 .rgb {
    font-size: clamp(1.2rem, 0.729vw, 1.4rem);
    line-height: 1.2857;
}
.section5 .detail {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}


.section6 {
    background: url('/img/portfolio/spc/section06_bg.png') no-repeat center/cover;
}
.section6 .section_inner {
    padding: clamp(9rem, 9.375vw, 18rem) 0 clamp(13.25rem, 13.802vw, 26.5rem);
}
.section6 .text_set {
    margin: 0 auto;
    text-align: center;
}
.section6 .text_set .title {
    font-size: clamp(1.7rem, 1.771vw, 3.4rem);
    font-weight: bold;
    color: #fff;
}
.section6 .text_set .desc {
    margin-top: clamp(2.25rem, 2.344vw, 4.5rem);
}
.section6 .text_set .desc span {
    display: inline-block;
    color: #fff;
    font-weight: 500;
    font-size: clamp(1.2rem, 0.781vw, 1.5rem);
    margin-top: clamp(0.45rem, 0.469vw, 0.9rem);
    letter-spacing: -0.075rem;
    opacity: .8;
}
.section6 .text_set .desc span:first-child {
    margin-top: 0;
}
.section6 .img_cont {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: fit-content;
    margin: clamp(4.2rem, 4.375vw, 8.4rem) clamp(18rem, 18.75vw, 36rem) 0;
}
.section6 .img_set.top {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
.section6 .img_set.top img {
    position: relative;
    z-index: 1;
}
.section6 .img_set.top::after {
    content: '';
    position: absolute;
    top: -.9rem;
    left: -.9rem;
    bottom: -.9rem;
    right: -.9rem;
    border-radius: 1.5rem;
    width: 100%;
    height: 100%;
    border: 9px solid #2a2a2a;
}
.section6 .img_set.side {
    position: absolute;
    left: calc(100% - clamp(6.95rem, 7.24vw, 13.9rem));
    bottom: clamp(20.15rem, 20.99vw, 40.3rem);
    width: clamp(20.7rem, 21.563vw, 41.4rem);
}
.section7 .bg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.4;
    background: linear-gradient(
        to bottom right, 
        rgb(238, 241, 243) 0%,
        rgb(201, 210, 218) 100%
    );
}
.section7 .section_inner.pc {
    max-width: 100%;
    padding: clamp(8.25rem, 8.594vw, 16.5rem) clamp(6.1rem, 6.354vw, 12.2rem) clamp(7.3rem, 7.604vw, 14.6rem) clamp(5.7rem, 5.938vw, 11.4rem);
}
.section7 .pc .item1 {
    position: absolute;
    top: clamp(8.25rem, 8.594vw, 16.5rem);
    left: clamp(6.2rem, 6.458vw, 12.4rem);
    z-index: 1;
    width: clamp(27rem, 28.125vw, 54rem);
}
.section7 .pc .item2 {
    position: absolute;
    top: clamp(15.4rem, 16.042vw, 30.8rem);
    left: clamp(29.9rem, 31.146vw, 59.8rem);
    z-index: 1;
    width: clamp(26.45rem, 27.552vw, 52.9rem);
}
.section7 .pc .item_wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    position: relative;
    z-index: 1;
}
.section7 .pc .item3 {
    margin-top: clamp(2.3rem, 2.396vw, 4.6rem);
    margin-right: clamp(8.85rem, 9.219vw, 17.7rem);
}
.section7 .pc .item3 .title {
    font-weight: 700;
    font-size: clamp(1.7rem, 1.771vw, 3.4rem);
    color: #000;
}
.section7 .pc .item3 .desc {
    margin-top: clamp(2.25rem, 2.344vw, 4.5rem);
    line-height: 1;
}
.section7 .pc .item3 .desc span {
    display: inline-block;
    font-size: clamp(1.2rem, 0.781vw, 1.5rem);
    margin-top: clamp(0.45rem, 0.469vw, 0.9rem);
    color: #0c0c0c;
    opacity: .8;
    letter-spacing: -0.075rem;
}
.section7 .pc .item3 .desc span:first-child {
    margin-top:0;
}
.section7 .pc .item4 {
    width: clamp(39.05rem, 40.677vw, 78.1rem);
}
.section7 .pc .item5 {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 0 clamp(6.1rem, 6.354vw, 12.2rem) clamp(9.8rem, 10.208vw, 19.6rem) clamp(5.7rem, 5.938vw, 11.4rem);
    width: 100%;
}
.section7 .pc .item5 {
    font-weight: 600;
    font-size: clamp(10.5rem, 10.938vw, 21rem);
    line-height: 0.96;
    color: rgba(60, 180, 229, .12);
    letter-spacing: -.84rem;
}




.section8 .section_inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding-top: clamp(6rem, 6.25vw, 12rem);
    height: 100%;
}
.section8 .bg img {
    display: block;
    width: 100%;
}
.section8 .text_set1 {
    margin-bottom: clamp(6rem, 6.25vw, 12rem);
}
.section8 .text_set1 .title {
    color: #fff;
    font-weight: 500;
    font-size: clamp(1.2rem, 0.781vw, 1.5rem);
    line-height: 1.8;
    text-align: center;
    text-transform: uppercase;
}

.section8 .img_wrap {
    display: flex;
    gap: 9.2rem;
}
.section8 .img_wrap1 .img_set {
    width: clamp(84.5rem, 88.021vw, 169rem);
    margin-top: clamp(-2rem, -1.042vw, -1rem);
}
.section8 .img_wrap2 {
    justify-content: flex-end;
    margin-top: clamp(-4.5rem, -2.344vw, -2.25rem);
}
.section8 .img_wrap2 .img_set {
    width: clamp(85.95rem, 89.427vw, 171.9rem);
}
.section8 .text_set2 .title {
    font-weight: 600;
    font-size: clamp(5.5rem, 5.729vw, 11rem);
    line-height: 1.14;
    color: rgba(255, 255, 255, .2);
    text-transform: uppercase;
    display: flex;
    justify-content: flex-end;
    margin-right: clamp(5.85rem, 6.094vw, 11.7rem);
}
.section8 .text_set2 .title.pc {
    margin-top: clamp(-1.6rem, -0.833vw, -0.8rem);
}

.section8 .dev_cont {
    position: absolute;
    bottom: 15rem;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
}
.section8 .dev_cont .star {
    width: clamp(1.3rem, 1.354vw, 2.6rem);
    height: clamp(1.3rem, 1.354vw, 2.6rem);
    margin: 0 auto clamp(2.25rem, 2.344vw, 4.5rem);
}
.section8 .svg_wrap .svg_box {
    position: relative;
}
.section8 .svg_wrap {
    display: flex;
    max-width: calc(100% - clamp(17.5rem, 18.229vw, 35rem));
    margin: 0 auto;

}
.section8 .svg_box {
    flex: 1;
}
.section8 .svg_txt {
    position: absolute;
    top: 50%;
    left: 52%;
    transform: translate(-50%, -50%);
    text-align: center;
}
.section8 .svg_txt span {
    font-weight: 500;
    font-size: clamp(1.2rem, 0.781vw, 1.5rem);
    line-height: 1.73;
    color: #fff;
    display: block;
    font-family: 'albert', 'sans-serif';
}

.section8 .svg_wrap svg path {
    font-size: 29.405rem;
    stroke-dasharray: 136rem;
    stroke-linecap: round;
    stroke-linejoin: round;
    animation: draw-stroke 8s linear infinite;
    opacity: 1;
}

@keyframes draw-stroke{
    0%{
        stroke-dashoffset:1360;
    }
    100%{
        stroke-dashoffset:0;
    }
}

.brand_badge {
    display: flex;
}
.brand_badge .logo {
    width: clamp(2.88rem, 1.875vw, 3.6rem);;
    height: clamp(2.88rem, 1.875vw, 3.6rem);;
    transform: translate3d(0px, 0px, 0px);
    will-change: transform;
}
.brand_badge .title {
    padding: 0 clamp(0.9rem, 0.938vw, 1.8rem);
    height: clamp(2.88rem, 1.875vw, 3.6rem);;
    border-radius: 5rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1.2rem, 0.781vw, 1.5rem);
    font-weight: 500;
    transform: translate3d(0px, 0px, 0px);
    will-change: transform;
    color: rgba(0, 0, 0, 0.9);
}
.brand_badge.reverse .title {
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
}

/* 반응형 */
@media (max-width: 767px) {
    .section1 {
        background: url('/img/portfolio/spc/section01_bg_mo.png') no-repeat center center / cover;
    }
    .section1 .section_head_inner {
        margin-top: 2.5rem;
        padding: 0 2.5rem;
    }
    .section1 .section_head_inner > div {
        font-size: 1.0rem;
    }
    .cont_wrap,
    section .mo_cont_wrap {
        width: calc(100% - 5rem);
        margin: 0 auto;
    }
    .brand_badge .logo{
        width: 3.1rem;
        height: 3.1rem;
    }
    .section1 .logo {
        width: 17rem;
    }
    .section2 {
        padding-top: 10rem;
        padding-bottom: 12rem;
    }
    .section2 .text_set .title {
        font-size: 2rem;
        line-height: 1;
    }
    .section2 .text_set .desc {
        margin-top: 2.5rem;
        font-size: 1.3rem;
        letter-spacing: -0.065rem;
        line-height: 1.4;
        font-weight: 600;
        color: #0c0c0c;
        opacity: .8;
    }
    .section2 .item_wrap {
        display: flex;
        flex-direction: column;
        margin-top: 6rem;
        gap: 2rem;
    }
    .section2 .item {
        z-index: 1;
    }
    .section2 .item2 {
        width: 66.7%;
    }
    .section2 .item3 {
        width: fit-content;
        margin: 0 0 0 auto;
        width: 57.1%;
    }
    .section2 .item img {
        width: 100%;
    }
    .section2 .section_inner.mo .txt_logo {
        position: absolute;
        left: -2.5rem;
        bottom: -2rem;
        width: 100.6%;
    }
    .section2 .brand_badge {
        position: absolute;
        top: 1rem;
        left: 1rem;
        margin: 0;
    }
    .section2 .brand_badge .title {
        border: 1px solid rgba(255, 255, 255, 0.4);
        height: 3.1rem;
        font-size: 1.3rem;
        padding: 0 1.5rem;
        color: #fff;
    }
    .section3 {
        background: url('/img/portfolio/spc/section03_bg_mo.png') no-repeat center / cover;
    } 
    .section3 .section_inner {
        padding: 16rem 0 11.5rem;
    }
    .section3 .top .title {
        width: 70.67%;
        margin: 1.3rem auto 0;
        font-size: 0;
    }
    .section3 .top .desc {
        margin-top: 3rem;
    }
    .section3 .top .desc span {
        font-size: 1.3rem;
        letter-spacing: -0.065rem;
        font-weight: 600;
        display: inline;
        line-height: 1.4;
        opacity: 1;
    }
    .section3 .bottom {
        margin-top: 11.5rem;
    }
    .section3 .swiper-slide {
        width: 24rem;
    }
    .section3 .brand_badge {
        margin-top: 1rem;
    }
    .section3 .swiper-slide .brand_badge .logo {
        width: 2.5rem;
        height: 2.5rem;
    }
    .section3 .swiper-slide .brand_badge .title {
        height: 2.5rem;
        font-size: 1.3rem;
        padding: 0 1rem;
        letter-spacing: -0.065rem;
    }



    .section4 {
        background: none;
    }
    .section4 .bg {
        width: 100%;
        height: 100vh;
    }
    .section4 .bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .section4 .section_inner.mo .cont {
        position: absolute;
        top: 0;
        left: 0;
        padding-top: 10rem;
        width: 100%;
        height: 100%;
    }
    .section4 .section_inner.mo .logo {
        width: 5.2rem;
        margin: 0 auto;
    }
    .section4 .section_inner.mo .cont_header .title {
        font-weight: bold;   
        font-size: 3.7rem;
        line-height: 1.05;
        text-align: center;
        margin-top: 1.3rem;
        color: #fff;
    }
    .section4 .section_inner.mo .cont_main {
        margin-top: 6rem;
    }
    .section4 .item_wrap {
        margin: 0 4.5rem;
    }
    .section4 .item_wrap .item {
        aspect-ratio: 1/1;
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        padding: 2.25rem;
        transform-origin: top center;
        border-radius: 1.3rem;
    }
    .section4 .item_wrap .item + .item {
        position: absolute;
        width: 100%;
        left: 0;          
    }
    .section4 .item_wrap .item2 {
        top: 2rem;
    }
    .section4 .item_wrap .item3 {
        top: 4rem;
    }
    .section4 .item_wrap .item_header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    .section4 .item_wrap .item_header .step {
        width: 2.1rem;
        height: 2.1rem;
        font-size: 1rem;
    }
    .section4 .item_wrap .item_header .title {
        font-size: 2.2rem;
        line-height: 1.1;
    }
    .section4 .item_wrap .item_cont {
        letter-spacing: -0.075rem;
        font-weight: 600;
        color: #0c0c0c;
        opacity: .8;
        line-height: 1.4;
        font-size: 1.5rem;
    }

    .section5 .section_inner {
        padding: 10rem 0;
    }
    .section5 .left .bottom {
        flex-direction: column;
        gap: 2.5rem;
        margin-top: 6rem;
    }
    .section5 .section_inner > .top {
        flex-direction: column;
        gap: 2.5rem;
    }
    .section5 .top .left .text_set {
        margin: 0;
    }
    .section5 .top .left .top .text_set .title {
        font-size: 2rem;
    }
    .section5 .top .left .top .text_set .desc {
        margin-top: 2.5rem;
    }
    .section5 .top .left .top .text_set .desc span {
        text-transform: uppercase;
        font-size: 1.3rem;
        letter-spacing: -0.065rem;
        font-weight: 600;
        display: inline;
        line-height: 1.4;
    }
    .section5 .img_set img {
        width: 100%;
    }
    .section5 .left .bottom .item .text_set {
        top: 1.75rem;
        left: 1.75rem;
        z-index: 1;
    }
    .section5 .left .bottom .item .text_lang {
        font-size: 1.2rem;
        letter-spacing: -0.018rem;
    }
    .section5 .card {
        width: 100%;
        aspect-ratio: auto;
        border-radius: .75rem;
        position: static !important;
        padding: 1.1rem 1.3rem;
    }
    .section5 .card.primary {
        z-index: 1;
        transform: none;
    }
    .section5 .card.sub {
        z-index: 2;
    }
    .section5 .card.yellow {
        z-index: 3;
    }
    .section5 .card.light_gray {
        z-index: 4;
    }
    .section5 .card.black {
        z-index: 5;
    }
    .section5 .card_wrap1,
    .section5 .card_wrap3 {
        width: 100%;
        flex-direction: column;
        gap: 0.9rem;
        margin-top: 2.5rem;
    }
    .section5 .title {
        font-size: 1.3rem;
    }
    .section5 .detail {
        margin-top: 0.7rem;
        gap: 0;
        text-align: right;
    }
    .section5 .hex, .section5 .rgb {
        font-size: 1rem;
        line-height: 1.2;
    }
    .section6 {
        background: url('/img/portfolio/spc/section06_bg_mo.png') no-repeat center / cover;
    }
    .section6 .section_inner {
        padding: 10rem 0;
        margin: 0 auto;
    }
    .section6 .text_set .title {
        font-size: 2rem;
    }
    .section6 .text_set .desc {
        margin-top: 2.5rem;
    }
    .section6 .text_set .desc span {
        font-size: 1.3rem;
        font-weight: 600;
        letter-spacing: -0.065rem;
        margin-top: 0;
        line-height: 1.4;
        opacity: 1;
    }
    .section6 .img_cont {
        width: calc(100% - 6.75rem);
        margin: 4.25rem auto 0;
    }
    .section6 .img_set.side {
        position: static;
        width: 33.3%;
        margin: 4rem auto;
        min-width: 12.5rem;
    }
    .section6 .img_set.side img {
        box-shadow: 3.2rem 3.2rem 5rem 0px rgba(0, 0, 0, 0.12);
    }
    .section6 .img_set.main > .main_top {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }
    .section6 .img_set.main .top_image {
        border: .5rem solid #2a2a2a;
        border-radius: 0.717rem;
        box-shadow: .7175rem .9225rem 2.05rem 0px rgba(0, 0, 0, 0.06);
        position: absolute;
        top: -.5rem;
        left: -.5rem;
        width: calc(100% + 1rem);
        max-width: none;
    }

    .section7 .section_inner {
        padding: 10rem 0 12rem;
    }
    .section7 .title {
        font-weight: bold;
        font-size: 2rem;
    }
    .section7 .desc {
        margin-top: 2.5rem;
    }
    .section7 .desc span {
        font-size: 1.3rem;
        line-height: 1.4;
        letter-spacing: -0.065rem;
        color: #010101;
        opacity: .8;
    }
    .section7 .item2 {
        margin-top: 3.75rem;
        margin-left: 3.1rem;
        margin-right: 3.7rem;
    }
    .section7 .item2 img,
    .section7 .item3 img {
        width: 100%;
    }
    .section7 .text_item {
        font-weight: 600;
        font-size: 6.5rem;
        letter-spacing: -0.26rem;
        color: rgba(60, 180, 229, 1);
        opacity: .12;
        line-height: .95;
    }
    .section7 .item3 {
        margin-top: clamp(1.8rem, 1.875vw, 3.6rem);
    }
    .section7 .item3 .img_set {
        /* margin-right: 3.5rem; */
        /* margin-left: auto; */
        /* width: 72.4%; */


        margin-left: 1rem;
        width: auto;
    }
    .section7 .item3 .text_item {
        position: absolute;
        left: 1rem;
        bottom: 2rem;
    }
    .section7 .item4 {
        margin-top: -2rem;
    }
    .section7 .item4 .img_set {
        /* margin-left: 3.5rem;
        width: 77.6%; */

        margin-left: 3.5rem;
        width: auto;
        margin-right: 1.25rem;
    }
    .section7 .item4 .text_item {
        position: absolute;
        right: 1.25rem;
        bottom: 0;
    }

    .section8 {

    }
    .section8 .section_inner {
        padding-top: 10rem;
    }
    .section8 .text_set1 .title {
        font-size: 1.4rem;
        line-height: 1.4;
    }
    .section8 .text_set1 {
        margin-bottom: 5rem;
    }
    .section8 .img_wrap1 {
        gap: 2.25rem;
    }
    .section8 .img_wrap2 {
        gap: 1.75rem;
    }
    .section8 .img_wrap1 .img_set1 {
        /* width: 41.53%;  */
    }
    .section8 .img_wrap1 .img_set2 {
        /* width: 49.69%;    */
    }
    .section8 .img_wrap2 .img_set1 {
        /* width: 55.87%; */
    }
    .section8 .img_wrap2 .img_set {
        width: 90%;
        margin-top: -1.05rem;
    }
    .section8 .img_wrap1 .img_set {
        margin-top: 0;
    }
    .section8 .img_wrap2 {
        margin-top: 0;
    }
    .section8 .text_set2 .title {
        margin: 3.3rem auto 0;
        font-size: 4.5rem;
        text-align: center;
        line-height: 1.14;
    }
    .section8 .dev_cont {
        margin-top: 10rem;
        position: static;
        transform: none;
    }
    .section8 .dev_cont .star {
        width: 1.3rem;
        height: 1.3rem;
        margin: 0 auto 5rem;
    }
    .section8 .dev_cont .star img {
        width: 100%;
        height: 100%;
    }
    .section8 .svg_wrap {
        flex-direction: column;
        gap: 4rem;
        max-width: none;
        position: relative;
        transform: none;
        left: auto;
        bottom: auto;
    }
    .section8 .svg_txt span {
        font-size: 1rem;
        line-height: 1.7;
    }
    .section8 .svg_box  {
        padding: 0 4.25rem;
    }
}