/* ==========================================
   1. FONT DEFINITIONS & INITIAL RESET
========================================== */
@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-1Thin.woff2') format('woff2');
    font-weight: 100;
    font-display: swap;
}
@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-2ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-display: swap;
}
@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-3Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}
@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-5Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-6SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-8ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}
@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-9Black.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    color: #191938;
    width: 100vw;
    height: auto;
    /* border: 2px solid blue; */
    display: flex;
    justify-content: center;
    align-items: center;
}

a {
    font-family: "Montserrat", sans-serif;
    text-decoration: none;
}

li {
    list-style: none;
}

h2 {
    font-family: 'Paperozi';
}

h4 {
    font-family: "Montserrat", sans-serif;
    color: #7D7D93;
    font-size: 1.04vw;
}

strong{
    font-weight: 700;
}

.title-dot {
    display: inline-block;
    width: 0.5vw;
    height: 0.5vw;
    border-radius: 100%;
    background-color: #7D7D93;
    margin-right: 1vw;
}


/* ========================================================
   🎯 전체 웹사이트 스크롤바 커스텀 스타일
   ======================================================== */

/* 1. 크롬, 사파리, 웨일 등 (대부분의 현대 브라우저용) */
::-webkit-scrollbar {
    width: 0.6vw; /* 스크롤바의 전체 가로 너비 (원하는 두께로 조절 가능!) */
}

/* 스크롤바가 움직이는 바탕 길 (트랙) */
::-webkit-scrollbar-track {
    background: #f1f1f5; /* 바탕은 깔끔하고 밝은 회색조로 매칭 */
}

/* 사용자가 잡고 움직이는 진짜 스크롤바 막대기 (썸) */
::-webkit-scrollbar-thumb {
    background: #191938; /* 🎯 네가 원하는 딥네이비 컬러 쏙! */
    border-radius: 0.3vw; /* 막대기 끝을 살짝 둥글게 깎아서 세련되게 만듦 */
}

/* 마우스 올렸을 때 스크롤바 색상이 살짝 더 짙어지는 호버 효과 (선택사항) */
::-webkit-scrollbar-thumb:hover {
    background: #0f0f26; 
}


/* 2. 파이어폭스 브라우저용 백업 세팅 */
html {
    /* [스크롤바 막대색] [바탕 트랙색] 순서야 */
    scrollbar-color: #191938 #f1f1f5;
    scrollbar-width: thin; /* 스크롤바 두께를 얇게 지정 */
}



#wrap {
    width: 94.8vw;
    height: auto;
    /* border: 10px solid red; */
    position: relative;
}

header {
    width: 100%;
    height: 4.4vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 2vw;
    padding-right: 2vw; /* 우측 정렬 균형을 위해 추가 */
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    
    background-color: transparent;
    transition: transform 0.4s ease, background-color 0.4s ease;
}

.header-logo {
    position: relative;
    left: 1vw;
    width: 2vw;
    height: 2vw;
}
.header-logo img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.4s ease;
}
.header-logo .logo-white {
    opacity: 0;
}

header ul {
    display: flex;
}

header ul li {
    margin: 1.5vw;
}

header ul li a {
    font-size: 1.25vw;
    font-weight: 600;
    color: #7D7D93;
    cursor: pointer;
    transition: color 0.4s ease;
}


header.hide {
    transform: translateY(-100%);
}

header.white-mode {
    background-color: #191938; 
}

header.white-mode ul li a {
    color: #FFFFFF;
}

header.white-mode .logo-default { opacity: 0; }
header.white-mode .logo-white { opacity: 1; }


#main {
    width: 100vw;
    height: 53vw;
    position: relative;
    right: 0vw;
    /* border: 2px solid red; */
}

.bg-section {
    position: relative;
    width: 100%;
    height: 45vw; 
    overflow: hidden; 
    /* border: 3px solid green;  */
}

/* bg 공통 */
.bg-1, .bg-2, .bg-3, .bg-4 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    visibility: hidden;
}

.bg-1.active, .bg-2.active, .bg-3.active, .bg-4.active {
    visibility: visible;
}

/* img-area 공통 */
.img-area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.img-area img {
    height: auto;
    transition: transform 0.9s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.8s ease;
}

/* ==========================================
   bg-1 이미지 위치
========================================== */
.bg-1 .img-area img:nth-child(1) {
    position: absolute;
    top: -32vw;
    left: 42vw;
    width: 10vw;
}

.bg-1 .img-area img:nth-child(2) {
    width: 27.76vw;
    position: absolute;
    left: 33vw;
    bottom: 0;
}

/* bg-1 이미지 등장 애니메이션 */
.bg-1 .img-area img:nth-child(1) { 
    transform: translateY(-50%); 
    opacity: 0; 
}

.bg-1 .img-area img:nth-child(2) { 
    transform: translateY(50%); 
    opacity: 0; 
}

.bg-1.active .img-area img:nth-child(1) { 
    transform: translateY(0); 
    opacity: 1; 
    transition-delay: 0.5s;
}

.bg-1.active .img-area img:nth-child(2) { 
    transform: translateY(0); 
    opacity: 1; 
    transition-delay: 0s;
}

/* ==========================================
   bg-2 이미지 위치
========================================== */
.bg-2 .img-area img:nth-child(1) {
    position: absolute;
    bottom: 5vw;
    left: 25vw;
    width: 105vw;
}

.bg-2 .img-area img:nth-child(2) {
    width: 23.80vw;
    position: absolute;
    left: 33vw;
    bottom: 12.6vw;
}

/* bg-2 이미지 등장 애니메이션 */
.bg-2 .img-area img:nth-child(1) { 
    transform: translateX(50%); 
    opacity: 0; 
    transition-delay: 0s;
}

.bg-2 .img-area img:nth-child(2) { 
    transform: translateY(-40%); 
    opacity: 0;
    transition-delay: 0.8s;
}

.bg-2.active .img-area img:nth-child(1) { 
    transform: translateX(0); 
    opacity: 1; 
}

.bg-2.active .img-area img:nth-child(2) { 
    transform: translateY(0); 
    opacity: 1; 
}

/* ==========================================
   bg-3 이미지 위치 — 필요시 수정
========================================== */
.bg-3 .img-area img:nth-child(1) {
    position: absolute;
    bottom: 5vw;
    left: 37vw;
    width: 20.78vw;
    z-index: 1;
}

.bg-3 .img-area img:nth-child(2) {
    width: 34.95vw;
    position: absolute;
    left: 30vw;
    bottom: 0;
    z-index: 0;
}

.bg-3 .img-area img:nth-child(1) {
    transform: translateY(-50%); 
    opacity: 0; 
}

.bg-3 .img-area img:nth-child(2) { 
    transform: translateY(50%); 
    opacity: 0; 
}

.bg-3.active .img-area img:nth-child(1) { 
    transform: translateY(0); 
    opacity: 1; 
}

.bg-3.active .img-area img:nth-child(2) { 
    transform: translateY(0); 
    opacity: 1; 
}

/* ==========================================
   bg-4 이미지 위치 — 필요시 수정
========================================== */

.bg-4 .img-area img:nth-child(1) {
    position: absolute;
    bottom: 1vw;
    right: 40vw;
    width: 80vw;
    z-index: 2;
}

.bg-4 .img-area img:nth-child(2) {
    width: 34.95vw;
    position: absolute;
    left: 31vw;
    bottom: 0;
    z-index: 1;
}

.bg-4 .img-area img:nth-child(3) {
    width: 80vw;
    position: absolute;
    right: 33vw;
    bottom: 15vw;
    z-index: 0;
}


.bg-4 .img-area img:nth-child(1) {
    transform: translateX(-50%);
    opacity: 0;
}

.bg-4 .img-area img:nth-child(2) {
    transform: translateY(50%);
    opacity: 0;
}

.bg-4 .img-area img:nth-child(3) {
    transform: translateX(-50%);
    opacity: 0;
}

.bg-4.active .img-area img:nth-child(1) {
    transform: translateX(0);
    opacity: 1;
}

.bg-4.active .img-area img:nth-child(2) {
    transform: translateY(0);
    opacity: 1;
}

.bg-4.active .img-area img:nth-child(3) {
    transform: translateX(0);
    opacity: 1;
}

/* ==========================================
   nomoro-icon
========================================== */
/* .nomoro-icon {
    width: 8vw;
    position: relative;
    left: 13.7vw;
    bottom: 17vw;
} */

.nomoro-icon {
    width: 4.43vw;
    height: 4.43vw;
    border-radius: 100%;
    background-color: #191938;
    position: relative;
    left: 5.5vw;
    bottom: 9.2vw;
}

/* ==========================================
   p 태그 공통
========================================== */
.bg-1 p, .bg-2 p, .bg-3 p, .bg-4 p {
    position: absolute;
    z-index: 99;
    font-family: "Montserrat", sans-serif;
    font-size: 1.25vw;
    line-height: 120%;
    font-weight: 300;
    opacity: 0;
    visibility: visible;
}

/* ==========================================
   p 태그 위치
========================================== */
.bg-1 p:nth-of-type(1) {
    left: 32vw;
    top: 11.67vw;
    text-align: right;
}

.bg-1 p:nth-of-type(2) {
    right: 30vw;
    top: 18.80vw;
    text-align: left;
}

.bg-2 p:nth-of-type(1) {
    left: 14vw;
    top: 23vw;
    text-align: right;
}

.bg-2 p:nth-of-type(2) {
    right: 24vw;
    top: 15vw;
    text-align: left;
}

.bg-3 p:nth-of-type(1) {
    left: 25.4vw;
    top: 11vw;
    text-align: right;
}

.bg-3 p:nth-of-type(2) {
    right: 25vw;
    top: 26vw;
    text-align: left;
}


.bg-4 p:nth-of-type(1) {
    left: 20vw;
    top: 27vw;
    text-align: right;
}

.bg-4 p:nth-of-type(2) {
    right: 33vw;
    top: 6vw;
    text-align: left;
}

/* bg-3, bg-4 p 위치는 필요시 추가 */

/* ==========================================
   bg-bottom
========================================== */
.bg-bottom {
    width: 100%;
    height: 16vw;
    position: absolute;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2vw;
    /* border: 3px solid blue; */
}

.bg-bottom ul { display: flex; }

.bg-bottom .nomero-main-txt { 
    height: 9.5vw; 
    position: absolute; 
    top: 3vw;
    left: 12.66vw;
    z-index: 10;
}

.bg-bottom .arrow { 
    width: 4.05vw;
    /* height: 6vw;  */
    position: absolute; 
    top: 4.3vw;
    left:86.15vw;
    cursor: pointer;
}

/* ==========================================
   4. VIDEO SECTION
========================================== */
#video {
    width: 100vw;
    height: 70vw;
    /* border: 10px solid green; */
    /* background-color: green; */
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: -2.6vw;;
    position: relative;
    margin-top: 12.19vw;
}

#video h4 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
}

#video video{
    width: 100vw;
}
/* ==========================================
   5. BACKGROUND & GRAPHS OPTIMIZATION
========================================== */
#BACKGROUND {
    width: 100%;
    height: 70vw;
    /* border: 1px solid red; */
    position: relative;
    /* background-color: rgb(209, 209, 209); */
    /* overflow: hidden; */
    padding-top: 0.1px;
    margin-top: 16.15vw;
}

#BACKGROUND h4 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
}

#BACKGROUND .back-top {
    width: 100%;
    height: 20vw;
    display: flex;
    margin-top: 5vw;
    /* border: 1px solid red; */
}

#BACKGROUND .back-top h2 {
    font-size: 2.5vw;
    font-weight: 600;
    font-family: "Montserrat", sans-serif;
    line-height: 120%;
    letter-spacing: -0.15vw;
}

#BACKGROUND .back-top p {
    font-size: 1.25vw;
    font-weight: 300;
    line-height: 184%;
    font-family: 'Paperozi';
    letter-spacing: -0.01vw;
}

#BACKGROUND ul {
    position: absolute;
    right: 2vw;
}

#BACKGROUND ul li + li {
    margin-top: 2vw;
}

#BACKGROUND .back-graph {
    display: flex;
    margin-top: 5.63vw;
}

/* Graph 1 Component */
#BACKGROUND .graph-1 {
    position: absolute;
    left: -2.72vw;
    width: 50vw;
    height: 38.96vw;
    display: flex;
    flex-flow: column;
    border: 0.052vw solid #191938;
}

#BACKGROUND .graph-1 .circle {
    width: 13vw;
    height: 13vw;
    position: relative;
    left: 5vw;
}

#BACKGROUND .graph-1 .circle-1 {
    position: absolute;
    top: 0;
    width: 13vw;
    height: 13vw;
    border-radius: 100%;
    background-color: #7D7D93;
}

#BACKGROUND .graph-1 .circle-2 {
    position: absolute;
    left: 0.9vw;
    bottom: 0.3vw;
    width: 9vw;
    height: 9vw;
    border-radius: 100%;
    background-color: #191938;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #C8E35F;
}

#BACKGROUND .graph-1 .circle-2 p {
    font-size: 1.15vw;
    font-weight: 600;
    font-family: 'Paperozi';
}

#BACKGROUND .graph-1 .line {
    position: absolute;
    top: 7vw;
    right: -7vw;
    width: 10.21vw;
    height: 0.13vw; 
    background: linear-gradient(to right, black 50%, transparent 60%);
    background-size: 0.41vw 100%; 
    background-repeat: repeat-x; 
}

#BACKGROUND .graph-1 .graph {
    position: relative;
    left: 3vw;
    top: 7vw;
}

#BACKGROUND .graph-1-p {
    text-align: center;
    position: absolute;
    right: -22.4vw;
    top: 5.5vw;
    font-family: 'Paperozi';
    font-size: 1.25vw;
    line-height: 140%;
}

#BACKGROUND .graph-1-des {
    font-family: 'Paperozi';
    font-weight: 300;
    font-size: 1.25vw;
    text-align: center;
    line-height: 140%;
    position: relative;
    top: 8vw;
    left: 1.7vw;
    margin-top: 5vw;
}

/* Graph 2 Component */
#BACKGROUND .graph-2 {
    position: absolute;
    right: -2.7vw;
    width: 50.2vw;
    height: 38.96vw;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    border: 0.052vw solid #191938;
}

#BACKGROUND .graph-2 .graph {
    position: relative;
    right: 1.5vw;
}

#BACKGROUND .graph-2 img {
    width: 11.82vw;
    position: relative;
    top: 8vw;
}

#BACKGROUND .graph-2 p {
    font-family: 'Paperozi';
    font-weight: 300;
    font-size: 1.25vw;
    text-align: center;
    line-height: 140%;
    position: relative;
    bottom: 7vw;
    right: 1.3vw;
}

#BACKGROUND .graph-2 .line {
    width: 15vw;
    height: 19vw;
    border: 1px solid red;
    border-color: black transparent transparent transparent; 
    border-radius: 90%;  
    transform: rotate(45deg);
    position: relative;
    bottom: 7vw;
    right: 3vw;

    
    clip-path: inset(0 100% 0 0);
}

#BACKGROUND .graph-2 .dot {
    width: 0.74vw;
    height: 0.74vw;
    border-radius: 100%;
    background-color: #C8E35F;
    position: relative;
    left: 12.6vw;
    bottom: 18vw;
}


#BACKGROUND .graph-1 {
    border: 1px solid #191938;
    /* border-right는 그대로 유지 */
}

#BACKGROUND .graph-2 {
    border: 1px solid #191938;
    border-left: none; /* graph-1의 right border가 중앙선 역할 */
    transform: translateX(-0.01vw);
}



/* ==========================================
   6. RESEARCH SECTION
========================================== */
#research {
    width: 100%;
    height: 70vw;
    /* border: 1px solid red; */
    position: relative;
    /* overflow: hidden; */
    padding-top: 0.1px;
    margin-top: 16.15vw;
}

#research h4 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 1vw;
}

#research .research-top {
    width: 100%;
    height: 10vw;
    /* border: 1px solid red; */
    margin-top: 5vw;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

#research .research-top h2 {
    line-height: 120%;
    font-size: 2.5vw;
    letter-spacing: -0.02em;
    position: absolute;
    left: 0.6vw;
}

#research .research-top .text-block {
    position: absolute;
    right: 6vw;
}

#research .research-top h3 {
    font-family: 'Paperozi';
    font-size: 1.67vw;
    font-weight: 500;
    line-height: 1.35; 
    margin-bottom: 1.04vw;
}

#research .research-top p {
    font-size: 1.04vw;
    line-height: 171%;
    font-family: 'Paperozi';
    font-weight: 300;
}

#research .research-bottom {
    width: 71.93vw;
    height: 38.96vw;
    border: 1px solid #191938;
    position: absolute;
    right: 1vw;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    /* background-color: #7D7D93; */
    margin-top: 12vw;
}

#research .research-bottom .bottom-title {
    display: flex;
    position: relative;
    bottom: 4.9vw;
    /* border: 1px solid red; */
}

#research .research-bottom .bottom-title h5 {
    font-size: 1.04vw; 
    line-height: 1.5; 
    font-family: 'Paperozi';
    font-weight: 500;
    margin-right: 25vw;
}

#research .research-bottom .bottom-title h6 {
    font-size: 0.6vw;
    font-family: 'Paperozi';
    font-weight: 400;
    color: #7D7D93;
    text-align: right;
}

#research .research-bottom .line {
    width: 71.93vw;
    border-top: 1px solid #191938; /* research-bottom의 border와 동일한 값 */
    position: relative;
    bottom: 1.4vw;
}

#research .bottom-graph {
    display: flex;
    /* border: 1px solid red; */
}

#research .bottom-graph h5 {
    font-family: 'Paperozi';
    font-size: 1.04vw;
    line-height: 1.5; 
    position: absolute;
    top: 0;
    left: 0;
}

#research .bottom-graph .graph-left {
    /* border: 1px solid red; */
    display: flex;
    flex-direction: column;   
    align-items: flex-start;  
    text-align: left;
    position: relative;
    right: 6.2vw;
    top: 3vw;
    width: 30vw;
}

#research .graph-left ul {
    margin-top: 4vw;
}

#research .graph-left ul li {
    margin-bottom: 1.3vw;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFFFFF;
    font-family: 'Paperozi';
    position: relative;
    height: 2.81vw;
}

#research .graph-left ul li:first-child { width: 27.14vw; background-color: #7D7D93; }
#research .graph-left ul li:nth-child(2) { width: 22.34vw; background-color: #7D7D93; }
#research .graph-left ul li:nth-child(3) { width: 22.34vw; background-color: #7D7D93; }
#research .graph-left ul li:nth-child(4) { width: 19.84vw; background-color: #7D7D93; }

#research .graph-left h6, 
#research .graph-left p {
    font-size: 0.73vw;
}

#research .graph-left h6 {
    font-weight: 500;
    position: absolute;
    left: 1.25vw;
}

#research .graph-left p {
    font-weight: 300;
    position: absolute;
    right: 1.04vw;
}

/* Right Graph Component */
#research .graph-right {
    width: 22vw;
    /* border: 1px solid blue; */
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    position: relative;
    left: 5vw;
    top: 3vw;
}

#research .graph-right .graph {
    display: flex;
    position: absolute;
    left: 2vw;
    /* border: 1px solid red; */
}

#research .graph-right .circle-1 {
    width: 3.39vw;
    height: 3.39vw;
    border-radius: 100%;
    background-color: #191938;
    color: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.04vw;
    font-weight: 400;
}

#research .graph-right .circle-2 {
    width: 11.61vw;
    height: 11.61vw;
    border-radius: 100%;
    background-color: #C8E35F;
    color: #191938;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    right: 0.5vw;
    font-size: 2.08vw;
    font-weight: 600;
}

#research .graph-right .circle-3 {
    width: 2.08vw;
    height: 2.08vw;
    border-radius: 100%;
    background-color: #7D7D93;
    color: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    top: 3vw;
    right: 0.2vw;
    font-size: 0.78vw;
    font-weight: 400;
}

#research .graph-right .graph-right-bottom {
    display: flex;
    position: absolute;
    left: 4.2vw;
    bottom: 0;
}

#research .graph-right .graph-right-bottom h6 {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Paperozi';
    font-weight: 400;
    margin-right: 2vw;
    font-size: 0.73vw;
}

#research .graph-right .graph-right-bottom span {
    width: 0.90vw;
    height: 0.90vw;
    border-radius: 100%;
    display: inline-block;
    margin-right: 0.3vw;
}

#research .graph-right .graph-right-bottom h6:nth-child(1) span { background-color: #C8E35F; }
#research .graph-right .graph-right-bottom h6:nth-child(2) span { background-color: #191938; }
#research .graph-right .graph-right-bottom h6:nth-child(3) span { background-color: #7D7D93; }

/* ==========================================
   7. SPEECH SECTION
========================================== */
#speech {
    width: 100%;
    height: 60vw;
    /* border: 1px solid blue; */
    position: relative;
    /* background-color: #7D7D93; */
    margin-top: 5.5vw;
}

#speech .speech-img-1, 
#speech .speech-img-2, 
#speech .speech-img-3 {
    width: 42.55vw;
    height: 11.77vw;
    /* border: 1px solid green; */
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
}

#speech .speech-img-1, 
#speech .speech-img-3 {
    background-image: url('img/speech.png');
    background-size: 100%;
}

#speech .speech-img-2 {
    background-image: url('img/speech-2.png');
    background-size: 100%;
}

#speech p {
    font-size: 1.56vw;
    font-weight: 320;
    font-family: 'Paperozi';
    text-align: center;
    letter-spacing: -2%;
    line-height: 153%;
}

#speech p strong{
    font-weight: 600;
}

#speech p strong {
    font-weight: 400;
}

#speech .speech-1, 
#speech .speech-2, 
#speech .speech-3 {
    width: 45vw;
    /* border: 1px solid red; */
    background-size: 100%;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
}

#speech .speech-1 { margin-bottom: 8.85vw; position: relative; left: 8.54vw; }
#speech .speech-2 { margin-bottom: 8.85vw; position: absolute; right: 8.54vw; }
#speech .speech-3 { position: absolute; left: 8.54vw; bottom: 6.5vw; 
}

#speech h6 {
    font-size: 1.04vw; 
    line-height: 1.5; 
    font-family: 'Paperozi';
    font-weight: 400;
    color: #191938;
    /* position: relative;
    left: 10vw; */
    position: absolute;
    right: 4.43vw;
    bottom: -2vw;
    letter-spacing: -2%;
}

#speech h6 span { 
    color: #7D7D93; 
    margin-left: 1.04vw;
}

/* ==========================================
   8. COMPETITOR SECTION
========================================== */
#COMPETITOR {
    width: 100%;
    height: 31vw;
    /* border: 1px solid red; */
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    margin-top: 11vw;
}

#COMPETITOR h4 {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 5.21vw;
}

#COMPETITOR img { width: 100vw; }

#COMPETITOR h6 {
    font-size: 1.25vw;
    font-family: 'Paperozi';
    font-weight: 300;
    margin-bottom: 1.04vw;
    letter-spacing: -5%;
}

#COMPETITOR h2 {
    font-size: 2.5vw;
    margin-bottom: 4.22vw;
    letter-spacing: -5%;
}

/* ==========================================
   9. CONCEPT SECTION
========================================== */
#CONCEPT {
    width: 100%;
    height: 80vw;
    /* border: 1px solid red; */
    position: relative;
    margin-top: 15.99vw;
    /* overflow: hidden; */
    padding-top: 0.1px;
}

#CONCEPT h4 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 1vw;
}

#CONCEPT h6 {
    font-size: 1.25vw;
    font-family: 'Paperozi';
    font-weight: 300;
    margin-top: 5.21vw;
    letter-spacing: -5%;
}

#CONCEPT .concept-title h2 {
    font-size: 2.5vw;
    margin-top: 1.04vw;
    margin-bottom: 13vw;
    letter-spacing: -2%;
}

#CONCEPT ul { 
    position: absolute; 
    top: 1.77vw;
}

#CONCEPT ul li { margin-bottom: 6.30vw; }

#CONCEPT ul li h5 {
    font-family: "Montserrat", sans-serif;
    font-weight: 300;
    color: #7D7D93;
    font-size: 1.25vw;
}

#CONCEPT ul li h5 span {
    font-size: 1.67vw;
    margin-right: 5.68vw;
}

#CONCEPT ul li .title { margin-bottom: 1.88vw; }

#CONCEPT ul li p {
    font-family: "Montserrat", sans-serif;
    font-weight: 300;
    color: #7D7D93;
    font-size: 1.25vw;
    position: relative;
    left: 7.8vw;
    line-height: 171%;
}

#CONCEPT .concept-main {
    display: flex;
    justify-content: space-between; 
    align-items: center;
    position: relative;
    /* border: 1px solid red; */
    width: 100%;
    height: 55vw;
}

/* #CONCEPT .concept-main .phone {
    width: 25vw;
    position: absolute;
    top: -1vw;
    left: 50%; 
    transform: translate(-50%);
} */

#CONCEPT .concept-main .AI{
    position: absolute;
    top: 0;
    left: 50%; 
    transform: translate(-50%);
    /* border: 1px solid red; */
    display: flex;
    flex-flow: column;
}

#CONCEPT .concept-main .AI img{
    width: 25.83vw;
    margin-bottom: 1.04vw;
}

/* #CONCEPT .concept-main img { width: 100%; } */

#CONCEPT .concept-description {
    position: absolute;
    top: 0.3vw;
    right: 2vw;
}

#CONCEPT .concept-description h2 {
    font-size: 1.88vw;
    font-family: "Montserrat", sans-serif;
    margin-bottom: 1.04vw;
    letter-spacing: -2%;
}

#CONCEPT .concept-description p {
    font-size: 1.04vw;
    font-family: 'Paperozi';
    font-weight: 400;
    line-height: 171%;
    letter-spacing: -2%;
}

/* Concept Step 2 & 3 */
#CONCEPT-2 {
    width: 100%;
    height: 45vw;
    /* border: 1px solid red; */
    /* background-color: #7D7D93; */
    position: relative;
    margin-top: 15vw;
}

#CONCEPT-2 .title h2 {
    font-size: 1.88vw;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    margin-bottom: 1.04vw;
    letter-spacing: -2%;
}

#CONCEPT-2 .title p {
    font-family: 'Paperozi';
    font-size: 1.04vw;
    line-height: 171%;
    letter-spacing: -5%;
    margin-bottom: 5.21vw;
}


#CONCEPT-2 .concept-2-gif{
    width: 100vw;
    height: 28.39vw;
    background-color: gray;
    position: absolute;
    left:-2.6vw;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

#CONCEPT-2 .concept-2-gif video{
    width: 101vw;
}

#CONCEPT-3 {
    width: 100%;
    height: 70vw;
    /* border: 1px solid blue; */
    /* background-color: #aaaaaa; */
    position: relative;
    margin-top: 11vw;
}

#CONCEPT-3 .title {
    position: absolute;
    left: 7.97vw;
}

#CONCEPT-3 .title h2 {
    font-size: 1.88vw;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    margin-bottom: 1.04vw;
    letter-spacing: -2%;
}

#CONCEPT-3 .title p {
    font-family: 'Paperozi';
    font-size: 1.04vw;
    line-height: 171%;
    letter-spacing: -2%;
}

#CONCEPT-3 .level {
    display: flex;
    position: relative;
    left: 39.8vw;
    top: 10.78vw;
}

#CONCEPT-3 .level-title {
    display: flex;
    /* border: 1px solid red; */
    justify-content: first baseline;
    align-items: center;
    margin-bottom: 1.04vw;
}

#CONCEPT-3 .level-title h1 {
    font-size: 2.81vw;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    letter-spacing: -0.1vw;
    margin-right: 0.78vw;
}

#CONCEPT-3 .level-title img { width: 2.14vw; }

#CONCEPT-3 .level .level-1, 
#CONCEPT-3 .level .level-2, 
#CONCEPT-3 .level .level-3, 
#CONCEPT-3 .level .level-4 {
    width: 22.92vw;
    height: 27.76vw;
    background-color: #F5F5F5;
    /* border: 1px solid red; */
    margin-right: 1.04vw;
    margin-bottom: 1.04vw;
    padding: 3.13vw;
    position: relative;
}

#CONCEPT-3 .level .level-2 {
    position: relative;
    top: 17.29vw;
}

#CONCEPT-3 .level .point {
    width: 5vw;
    height: 1.88vw;
    border: 0.07vw solid #191938;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.04vw;
    font-family: 'Paperozi';
}

#CONCEPT-3 .level .count {
    font-size: 2.81vw;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    position: absolute;
    bottom: 3.13vw;
    right: 3.13vw;
}

#CONCEPT-3 .left-level { display: flex; }
#CONCEPT-3 .right-level { position: relative; bottom: 2vw; }

#CONCEPT-3 .level-1 .goods{
    width: 13vw;
    position: absolute;
    left:4.79vw;
    top: 9.5vw;
}

#CONCEPT-3 .level-2 .goods{
    width: 13vw;
    position: absolute;
    left: 5.2vw;
    top: 9vw;
}



#CONCEPT-4{
    width: 100%;
    height: 80vw;
    /* background-color: #7D7D93; */
    position: relative;
    margin-top: 9vw;
}

#CONCEPT-4 h2{
    font-size: 1.88vw;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    margin-bottom: 1.04vw;
    letter-spacing: -2%;
}

#CONCEPT-4 p{
    font-family: 'Paperozi';
    font-size: 1.04vw;
    line-height: 171%;
    letter-spacing: -5%;
}

#CONCEPT-4 .nomero-icon{
    width: 10.42vw;
    position: absolute;
    right: 33.85vw;
    top: 2.55vw;
}

#CONCEPT-4 .concept-4-main{
    position: absolute;
    top: 22.81vw;
    right: 15.99vw;
    display: flex;
    flex-flow: column;
    align-items: flex-end;
}
#CONCEPT-4 .concept-4-img{
    width: 46.15vw;
    height: 46.04vw;
    background-color: #7D7D93;
}

#CONCEPT-4 h1{
    font-family: 'Paperozi';
    font-size: 5vw;
    letter-spacing: -5%;
    position: relative;
    top: 1vw;
}

#CONCEPT-4 .concept-4-img {
    width: 46.15vw;
    height: 46.04vw;
    background-color: #7D7D93;
    position: relative; /* 이미지들을 안에 묶어두기 위해 position 추가 */
    overflow: hidden;   /* 박스 바깥으로 나가는 이미지 숨김 */
}

/* 이미지 3장을 한 자리에 완전히 겹치기 */
#CONCEPT-4 .concept-4-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;   /* 이미지 비율 유지하면서 박스 채우기 */
    opacity: 0;          /* 처음엔 모든 이미지 숨기기 */
    transition: opacity 1s ease-in-out; /* 부드럽게 바뀌는 효과 (1초 동안) */
}

/* active 클래스가 붙은 이미지만 화면에 보이기 */
#CONCEPT-4 .concept-4-img img.active {
    opacity: 1;
}



#BRAND-EXPERIENCE{
    width: 100%;
    height: 30vw;
    /* border: 1px solid red; */
    position: relative;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    margin-top: 15vw;
}

#BRAND-EXPERIENCE h4{
    position: absolute;
    top: 0;
    left: 0;
}

#BRAND-EXPERIENCE .ex-dis{
    display: flex;
}

#BRAND-EXPERIENCE .ex-dis h3{
    font-size: 2.5vw;
    line-height: 120%;
    font-family: 'Paperozi';
    color: #191938;
    position: relative;
    right: 15vw;
}

#BRAND-EXPERIENCE .ex-dis .ex-dis-right{
    position: relative;
    left: 12vw;
}

#BRAND-EXPERIENCE .ex-dis h5{
    font-family: 'Paperozi';
    font-size: 1.67vw;
    font-weight: 500;
    color: #191938;
    margin-bottom: 1vw;
}

#BRAND-EXPERIENCE .ex-dis p{
    font-family: 'Paperozi';
    font-size: 1.04vw;
    line-height: 170%;
}


#BRAND-EXPERIENCE .ex-title-mask {
    overflow: hidden;
    padding: 0;
    margin-bottom: 0.8vw;
}

#BRAND-EXPERIENCE .ex-title-mask h5 {
    display: block;
    margin: 0;
    padding: 0;
    will-change: transform;
}



#DESK-RESEARCH{
    width: 100%;
    height: 50vw;
    /* border: 1px solid red; */
    display: flex;
    flex-flow: column;
    justify-content: baseline;
    align-items: center;
    margin-top: 15vw;
}

#DESK-RESEARCH h3{
    font-size: 1.67vw;
    font-family: 'Paperozi';
    font-weight: 500;
    text-align: center;
    line-height: 150%;
    color: #191938;
    margin-bottom: 5vw;
    margin-top: 5vw;
}

#DESK-RESEARCH .desk-graph{
    display: flex;
}


#DESK-RESEARCH .desk-graph-1{
    width: 22.92vw;
    height: 25.02vw;
    border: 1px solid #191938;
    padding: 2vw;
    margin: 0.5vw;
}


#DESK-RESEARCH .desk-graph h6{
    font-size: 0.83vw;
    font-family: "Montserrat", sans-serif;
    color: #7D7D93;
    margin-bottom: 1.3vw;
    position: relative;
    left: 0.4vw;
}

#DESK-RESEARCH .desk-graph h4{
    font-family: 'Paperozi';
    font-size: 0.79vw;
    font-weight: 500;
    color: #191938;
    margin: 0.4vw;
}

#DESK-RESEARCH .desk-graph h5{
    font-family: 'Paperozi';
    font-size:  0.99vw;
    font-weight: 500;
    margin-bottom: 1vw;
    line-height: 150%;
}


#DESK-RESEARCH .desk-graph p{
    font-family: 'Paperozi';
    font-size: 0.78vw;
    color: #7D7D93;
    line-height: 170%;
}

#DESK-RESEARCH .line{
    border: 0.052vw solid #191938;
    margin-top: 1.7vw;
    margin-bottom: 1.7vw;
}

#DESK-RESEARCH .desk-graph-1 .bar-1{
    height: 0.8vw;
    position: relative;
    margin-bottom: 1vw;
}


#DESK-RESEARCH .desk-graph-1 .bar-1 .bar-gray{
    background-color: #7D7D93;
    width: 100%;
    height: 0.8vw;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 2vw;
}

#DESK-RESEARCH .desk-graph-1 .bar-1 .bar-navy{
    background-color: #191938;
    width: 100%;
    height: 0.8vw;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    border-radius: 2vw;
}

#DESK-RESEARCH .desk-graph-1 .bar-2{
    /* border: 1px solid red; */
    height: 0.8vw;
    position: relative;
}

#DESK-RESEARCH .desk-graph-1 .bar-2 .bar-gray{
    background-color: #E1E6E9;
    width: 100%;
    height: 0.8vw;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 2vw;
}

#DESK-RESEARCH .desk-graph-1 .bar-2 .bar-navy{
    background-color: #7D7D93;
    width: 67%;
    height: 0.8vw;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    border-radius: 2vw;
}

#DESK-RESEARCH .desk-graph-2 .bar-2 .bar-navy{
    background-color: #7D7D93;
    width: 50%;
    height: 0.8vw;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    border-radius: 2vw;
}


#DESK-RESEARCH .desk-graph-3{
    width: 22.92vw;
    height: 25.02vw;
    border: 1px solid #191938;
    padding: 2vw;
    margin: 0.5vw;
}

/* 원형 그래프와 범례 가로 정렬 */
#DESK-RESEARCH .desk-graph-3 .grapg-3-top {
    display: flex;
    align-items: center;
    gap: 1.8vw;
    margin-top: 1vw;
}

/* 원형 그래프 */
#DESK-RESEARCH .desk-graph-3 .circle {
    width: 6.77vw;
    height: 6.77vw;
    border-radius: 50%;

    background: conic-gradient(
        #191938 0% 62%,
        #E1E6E9 62% 100%
    );

    display: flex;
    justify-content: center;
    align-items: center;

    position: relative;
    flex-shrink: 0;
}

/* 그래프 가운데 구멍 */
#DESK-RESEARCH .desk-graph-3 .circle::before {
    content: "";
    position: absolute;

    width: 70%;
    height: 70%;
    border-radius: 50%;
    background-color: #ffff;
}

/* 가운데 퍼센트 */
#DESK-RESEARCH .desk-graph-3 .circle span {
    position: relative;
    z-index: 1;

    font-family: "Montserrat", sans-serif;
    font-size: 1.5vw;
    font-weight: 800;
    color: #191938;
}

/* 범례 */
#DESK-RESEARCH .desk-graph-3 .top-right h4 {
    display: flex;
    align-items: center;
    gap: 0.5vw;
}

/* 범례 색상 사각형 */
#DESK-RESEARCH .desk-graph-3 .top-right h4 span {
    display: inline-block;
    width: 0.65vw;
    height: 0.65vw;
    border-radius: 0.15vw;
    background-color: #191938;
}

/* 두 번째 범례 */
#DESK-RESEARCH .desk-graph-3 .top-right h4:nth-child(2) span {
    background-color: #E1E6E9;
}


/* #DESK-RESEARCH .line{
    position: relative;
    top: 0.7vw;
} */



#DESK-RESEARCH .desk-graph-3 .line{
    position: relative;
    bottom: 0.5vw;
}


#DESK-RESEARCH .desk-graph-1 .line{
    position: relative;
    top: 1vw;
}


#DESK-RESEARCH .desk-graph-3 h5{
    position: relative;
    bottom: 1.3vw;
}

#DESK-RESEARCH .desk-graph-1 h5{
    position: relative;
    top: 0.5vw;
}

#DESK-RESEARCH .desk-graph-3 p{
    position: relative;
    bottom: 0.9vw;
}

#DESK-RESEARCH .desk-graph-1 p{
    position: relative;
    top: 0.65vw;
}



#INSIGHT{
    width: 100vw;
    height: 22vw;
    /* border: 1px solid blue; */
    position: relative;
    right: 2.6vw;
    padding: 3vw;
    background-color: #191938;
    color: #ffff;
    margin-top: 15vw;
}

#INSIGHT h4{
    position: relative;
    top: 1.5vw;
}
#INSIGHT .INSIGHT-dis{
    display: flex;
    margin-top: 4vw;
    /* padding: 3vw; */
}

#INSIGHT h3{
    font-size: 2.5vw;
    font-family: "Montserrat", sans-serif;
    line-height: 120%;
    margin-right: 12vw;
    font-weight: 600;
    /* margin-left: 3vw; */
}

#INSIGHT p{
    font-family: 'Paperozi';
    font-weight: 300;
    line-height: 170%;
    position: relative;
    left: 6vw;
    top: 0.5vw;
    font-size: 1.04vw;
}




#BRAND-NAME{
    width: 100%;
    height: 80vw;
    /* border: 1px solid red; */
    position: relative;
    margin-top: 15vw;
}

#BRAND-NAME .BRAND-NAME-content{
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    margin-top: 5vw;
}

#BRAND-NAME .BRAND-NAME-content .logo{
    width: 14.95vw;
    margin-bottom: 2.5vw;
}

#BRAND-NAME .BRAND-NAME-content h5{
    font-family: 'Paperozi';
    font-size: 1.20vw;
    font-weight: 600;
    margin-bottom: 2vw;
}

#BRAND-NAME .BRAND-NAME-content p{
    font-size: 1.04vw;
    font-family: 'Paperozi';
    text-align: center;
    line-height: 141%;
    margin-bottom: 8vw;
    font-weight: 400;
}

#BRAND-NAME .brand-name-img{
    width: 100%;
}




#BRAND-SLOGAN{
    width: 100%;
    height: 40vw;
    /* border: 1px solid red; */
    position: relative;
    margin-top: 10vw;
}


#BRAND-SLOGAN .BRAND-SLOGAN-content{
    display: flex;
    margin-top: 3vw;
}


#BRAND-SLOGAN .BRAND-SLOGAN-content h5{
    font-size: 2.5vw;
    font-family: "Montserrat", sans-serif;
    line-height: 120%;
}

#BRAND-SLOGAN .BRAND-SLOGAN-content .slogan-right{
    display: flex;
    flex-flow: column;
    justify-content: first baseline;
    position: absolute;
    right: 2vw;
}


#BRAND-SLOGAN .BRAND-SLOGAN-content .slogan-right h6{
    font-size: 1.25vw;
    font-family: 'Paperozi';
    font-weight: 600;
    line-height: 147%;
    margin-bottom: 0.8vw;
}


#BRAND-SLOGAN .BRAND-SLOGAN-content .slogan-right p{
    font-size: 1.25vw;
    font-family: 'Paperozi';
    line-height: 170%;
    font-weight: 300;
}


/* 키워드 전체 영역 */
#BRAND-SLOGAN .slogan-keywords {
    display: grid;
    grid-template-columns: repeat(5, 1fr);

    width: 100%;
    height: 10.4vw;

    border-top: 1px solid #191938;
    border-bottom: 1px solid #191938;

    position: absolute;
    bottom: 9vw;
    left: 0;
}

/* 개별 키워드 박스 */
#BRAND-SLOGAN .keyword-item {
    padding: 3.5vw 1.7vw;

    border-right: 1px solid #191938;
}

/* 마지막 박스 */
#BRAND-SLOGAN .keyword-item:last-child {
    border-right: none;
}

/* 영어 키워드 */
#BRAND-SLOGAN .keyword-item h5 {
    font-family: "Montserrat", sans-serif;
    font-size: 1.4vw;
    font-weight: 700;
    color: #191938;

    margin-bottom: 0.5vw;
}

/* 한국어 설명 */
#BRAND-SLOGAN .keyword-item p {
    font-family: 'Paperozi';
    font-size: 0.83vw;
    font-weight: 500;
    color: #7D7D93;
}

/* 모든 키워드 기본 배경 */
#BRAND-SLOGAN .keyword-item {
    background-color: transparent;
    transition: background-color 0.3s ease;
}

/* 마지막 CURATED도 처음에는 배경 없음 */
#BRAND-SLOGAN .keyword-item.curated {
    background-color: transparent;
}

/* 활성화된 키워드 */
#BRAND-SLOGAN .keyword-item.active {
    background-color: #C8E35F;
}

/* 활성화된 키워드의 설명 색상 */
#BRAND-SLOGAN .keyword-item.active p {
    color: #191938;
}




/* BRAND VALUE 전체 */
#BRAND-VALUE {
    width: 100vw;
    height: 60vw;
    position: relative;
    /* border: 1px solid red; */
    display: flex;
    flex-flow: column;
    /* justify-content: center; */
    align-items: center;
    margin-top: 14vw;
    position: relative;
    right: 2.6vw;
}

/* 이미지 4개 가로 정렬 */
#BRAND-VALUE .brand-value-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    width: 100%;
    height: 52vw;

    position: absolute;
    bottom: 0;
    left: 0;
}

/* 개별 이미지 카드 */
#BRAND-VALUE .value-item {
    position: relative;
    overflow: hidden;
}

#BRAND-VALUE .value-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    filter: grayscale(100%) brightness(0.75);
    transform: scale(1);

    transition:
        filter 0.7s ease,
        transform 1s ease;
}

#BRAND-VALUE .value-item:hover img {
    filter: grayscale(0%) brightness(1);
    transform: scale(1.05);
}

/* 텍스트 전체 영역 */
#BRAND-VALUE .value-content {
    position: absolute;
    inset: 0;

    display: flex;
    flex-direction: column;

    padding: 7vw 2vw 3vw;
    color: #fff;

    pointer-events: none;
}

/* 위쪽 설명 */
#BRAND-VALUE .value-top span,
#BRAND-VALUE .value-bottom span {
    font-family: "Montserrat", sans-serif;
    font-size: 0.7vw;
    font-weight: 400;
}

#BRAND-VALUE .value-content h5 {
    font-family: "Montserrat", sans-serif;
    font-size: 1.15vw;
    font-weight: 500;
    letter-spacing: -5%;
    margin-top: 1vw;
    margin-bottom: 0.7vw;
}

#BRAND-VALUE .value-content p {
    font-family: 'Paperozi';
    font-size: 1.20vw;
    font-weight: 300;
    line-height: 141%;
}

/* 중간 세로 화살표 */
#BRAND-VALUE .value-arrow {
    flex: none;          /* 자동으로 늘어나는 것 방지 */
    width: 0.052vw;
    height: 23vw;  

    background-color: #fff;

    margin: 2vw 0 1.5vw 0.3vw;
    position: relative;
    transform-origin: top;
}

/* 화살표 끝부분 */
#BRAND-VALUE .value-arrow::after {
    content: "";
    position: absolute;

    bottom: 0;
    left: 0;

    width: 0.7vw;
    height: 0.7vw;

    border-left: 0.052vw solid #fff;
    border-bottom: 0.052vw solid #fff;

    transform: skewY(-45deg);
    transform-origin: bottom left;
    
}
/* ==========================================
   10. GOAL SECTION
========================================== */
#GOAL {
    width: 100%;
    height: 70vw;
    /* border: 1px solid red; */
    position: relative;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    margin-top: 15vw;
}

#GOAL h4 {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 8.33vw;
}


#GOAL ul li{
    display: flex;
    /* border: 1px solid red; */
    margin-bottom: 2.4vw;
    align-items: center;
}

#GOAL ul li:nth-child(1) h1{
    margin-right: 3.85vw;
    /* border: 1px solid red; */
}

#GOAL ul li:nth-child(2) h1{
    margin-left: 3.85vw;
}

#GOAL ul li:nth-child(3) h1{
    margin-right: 3.85vw;
    text-align: right;
    line-height: 170%;
    /* border: 1px solid red; */
}


#GOAL ul li:nth-child(1) img{
    width: 23.18vw;
}

#GOAL ul li:nth-child(2) img{
    width: 16.56vw;
}

#GOAL ul li:nth-child(3) img{
    width: 26.72vw;
    height: 16.46vw;
}


#GOAL h1 {
    font-family: "Montserrat", sans-serif;
    font-size: 6.67vw;
    font-weight: 800;
    color: #191938;
}

#GOAL p {
    text-align: center;
    font-family: 'Paperozi';
    font-size: 1.04vw;
    line-height: 171%;
    font-weight: 400;
    letter-spacing: -5%;
    margin-top: 6vw;
    /* border: 1px solid red; */
}


#GOAL .nomero-icon{
    width: 6.98vw;
    position: absolute;
    left: 7.45vw;
    top: 45.8vw;
}

/* ==========================================
   11. PERSONA SECTION OPTIMIZATION
========================================== */
#PERSONA {
    width: 100%;
    height: 47vw;
    /* border: 1px solid red; */
    position: relative;
    /* overflow: hidden; */
    padding-top: 0.1px;
    margin-top: 15vw;
}

#PERSONA h4 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 1vw;
    top: 0;
}

#PERSONA h2 {
    margin-top: 5.21vw;
    font-family: 'Paperozi';
    font-size: 2.60vw;
    margin-bottom: 3.13vw;
    letter-spacing: -5%;
    line-height: 150%;
}

#PERSONA ul {
    display: flex;
    position: absolute;
    left: 0;
}

#PERSONA ul li {
    width: 21.83vw;
    height: 21.83vw;
    border: 1px solid #191938;
    margin-right: 2.45vw;
    padding: 1.82vw;
    position: relative;
}

#PERSONA ul li h5 {
    font-size: 0.78vw;
    font-family: 'Paperozi';
    font-weight: 300;
    line-height: 153%;
    margin-bottom: 0.99vw;
    letter-spacing: -2%;
}

#PERSONA ul li p {
    font-size: 1.24vw;
    font-family: 'Paperozi';
    font-weight: 500;
    line-height: 153%;
    letter-spacing: -2%;
}

#PERSONA .tag {
    display: flex;
    position: absolute;
    bottom: 1.82vw;
    left: 1.82vw;
}

/* 공통 그룹 선택자 오류 완벽 격리 최적화 */
#PERSONA .tag .tag-1, 
#PERSONA .tag .tag-2 {
    background-color: #191938;
    border-radius: 2vw;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 1.72vw;
    font-size: 0.78vw;
    font-family: 'Paperozi';
    font-weight: 500;
    color: #FFFFFF;
    margin-right: 0.73vw;
    letter-spacing: -2%;
}

/* 각각의 카드별 태그 너비 개별 지정 */
#PERSONA ul li:nth-child(1) .tag-1 { width: 6.77vw; }
#PERSONA ul li:nth-child(1) .tag-2 { width: 5.26vw; }

#PERSONA ul li:nth-child(2) .tag-1 { width: 6.77vw; }
#PERSONA ul li:nth-child(2) .tag-2 { width: 5.26vw; }

#PERSONA ul li:nth-child(3) .tag-1 { width: 4.58vw; }
#PERSONA ul li:nth-child(3) .tag-2 { width: 6.72vw; }

#PERSONA ul li:nth-child(4) .tag-1 { width: 4.58vw; }
#PERSONA ul li:nth-child(4) .tag-2 { width: 8.75vw; }




#USER-JOURNEY {
    width: 100%;
    height: 38vw;
    position: relative;
    /* border: 1px solid red; */
}

/* 상단 설명 */
#USER-JOURNEY h3 {
    font-family: 'Paperozi';
    font-size: 1.67vw;
    font-weight: 500;
    line-height: 150%;
    color: #191938;

    margin-top: 7vw;
}

/* 타임라인 전체 */
#USER-JOURNEY .journey-container {
    width: 100%;
    margin-top: 7vw;
}

/* 가로선과 원형 포인트 */
#USER-JOURNEY .journey-timeline {
    width: 100%;
    height: 0.052vw;
    background-color: #7D7D93;

    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;

    position: relative;
}

/* 애니메이션으로 그려지는 선 */
#USER-JOURNEY .journey-progress {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background-color: #191938;

    transform: scaleX(0);
    transform-origin: left center;
    z-index: 0;
}

/* 원형 포인트 */
#USER-JOURNEY .journey-dot {
    width: 1vw;
    height: 1vw;
    border-radius: 50%;
    background-color: #191938;

    margin-left: 1.7vw;
    position: relative;
    bottom: 0.45vw;
    z-index: 1;
}

/* 4, 5번째 원형 포인트 */
#USER-JOURNEY .journey-dot.active {
    background-color: #C8E35F;
}

/* 아래 5개 설명 영역 */
#USER-JOURNEY .journey-steps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));

    width: 100%;
    margin-top: 2.7vw;

    border-top: 1px solid #191938;
    border-bottom: 1px solid #191938;
}

/* 개별 단계 */
#USER-JOURNEY .journey-item {
    padding: 2.3vw;
    min-width: 0;
    border-right: 1px solid #191938;
    
}

/* 마지막 세로선 제거 */
#USER-JOURNEY .journey-item:last-child {
    border-right: none;
}

/* 단계 번호 */
#USER-JOURNEY .journey-item span {
    display: block;
    font-family: "Montserrat", sans-serif;
    font-size: 0.83vw;
    font-weight: 700;
    color: #7D7D93;

    margin-bottom: 0.7vw;
}

/* 영어 단계명 */
#USER-JOURNEY .journey-item h5 {
    font-family: "Montserrat", sans-serif;
    font-size: 1.5vw;
    font-weight: 700;
    color: #191938;

    margin-bottom: 1.3vw;
}

/* 한국어 설명 */
#USER-JOURNEY .journey-item p {
    font-family: 'Paperozi';
    font-size: 0.83vw;
    font-weight: 400;
    line-height: 170%;
    color: #191938;
}



#value{
    width: 100%;
    height: 73vw;
    /* background-color: #7D7D93; */
    position: relative;
    margin-top: 15vw;
}

#value h2{
    font-size: 2.60vw;
    font-family: 'Paperozi';
    letter-spacing: -5%;
    line-height: 150%;
    margin-bottom:  1.2vw;
    font-weight: 600;
}

#value p{
    font-size: 1.04vw;
    font-family: 'Paperozi';
    letter-spacing: -5%;
    line-height: 171%;
}

#value .value-list{
    width: 100vw;
    /* border: 1px solid red; */
    position: absolute;
    left: -2.6vw;
    top: 17.29vw;
}

#value h3{
    font-size: 1.88vw;
    font-family: 'Paperozi';
    letter-spacing: -5%;
    /* border: 1px solid red; */
    margin-bottom: 1.82vw;
}

#value h3 span{
    display: inline-block;
    width: 1.56vw;
    height: 1.56vw;
    border-radius: 100%;
    margin-right: 1.20vw;
}

#value .value-list li{
    height: 18.39vw;
    padding-top: 5.78vw;
}


#value .value-list li:nth-child(1) span{
    background-color: #191938;
}

#value .value-list li:nth-child(2) span{
    background-color: #C8E35F;
}

#value .value-list li:nth-child(3) span{
    background-color: #EB0102;
}

#value .value-list li:nth-child(1){
    border-top: 1px solid #191938;
}

#value .value-list li:nth-child(2){
    border-top: 1px solid #191938;
}

#value .value-list li:nth-child(3){
    border-top: 1px solid #191938;
    border-bottom: 1px solid #191938;
}

#value .value-list li:nth-child(1) h3{
    position: relative;
    left: 15.99vw;
}

#value .value-list li:nth-child(1) p{
    position: relative;
    left: 18.8vw;
}

#value .value-list li:nth-child(2) h3{
    position: relative;
    left: 31.93vw;
}

#value .value-list li:nth-child(2) p{
    position: relative;
    left: 34.7vw;
}

#value .value-list li:nth-child(3) h3{
    position: relative;
    left: 47.92vw;
}

#value .value-list li:nth-child(3) p{
    position: relative;
    left: 50.8vw;
}

/* #value .value-list li:nth-child(2){
    position: relative;
    left: 31.93vw;
}

#value .value-list li:nth-child(3){
    position: relative;
    left: 47.92vw;
} */


#PRODUCT{
    width: 100%;
    height: 38vw;
    position: relative;
    margin-top: 18vw;
    /* border: 1px solid red; */
}

#PRODUCT .title{
    display: flex;
}

#PRODUCT h2{
    font-size: 2.60vw;
    font-family: 'Paperozi';
    letter-spacing: -5%;
    font-weight: 600;
    margin-bottom: 1.77vw;
    margin-top: 5.73vw;
}

#PRODUCT .title h2:nth-child(1){
    margin-right: 0.5vw;
}

#PRODUCT h3{
    font-family: 'Paperozi';
    font-size: 1.56vw;
    font-weight: 500;
    letter-spacing: -2%;
    margin-bottom: 3.07vw;
}

#PRODUCT p{
    font-size: 1.04vw;
    font-family: 'Paperozi';
    letter-spacing: -2%;
    line-height: 171%;
}

#PRODUCT .img-slide{
    display: flex;
    /* border: 1px solid red; */
    position: absolute;
    left: -2.6vw;
    overflow: hidden;
    margin-top: 4.58vw;
}

#PRODUCT .img-slide img{
    width: 11.25vw;
    margin: 0;
}


#PRODUCT .img-slide .slide-track {
    display: flex;
    /* 10장 너비(11.25vw * 10 = 112.5vw)만큼 왼쪽으로 무한히 밀어줄 예정이야 */
    width: calc(11.25vw * 20); 
    
    /* marquee라는 애니메이션을 20초 동안 일정한 속도(linear)로 무한히(infinite) 재생! */
    animation: marquee 30s linear infinite; 
}

#PRODUCT .img-slide img {
    width: 11.25vw;
    margin: 0;
    vertical-align: bottom; /* 아까 배운 킹받는 미세 틈새 방지용 치트키! */
}

/* ==========================================
   🎬 무한 루프 애니메이션 정의
========================================== */
@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        /* 딱 오리지널 이미지 10장 너비만큼인 -112.5vw가 되는 순간, 
           브라우저가 눈 깜짝할 사이에 다시 0% 상태로 되돌려서 무한 루프를 만들어내! */
        transform: translateX(-112.5vw); 
    }
}

#food{
    width: 100%;
    height: 239vw;
    position: relative;
    /* background-color: #7D7D93; */
    /* display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center; */
    margin-top: 19vw;
}

#food h2{
    font-size: 2.60vw;
    font-family: 'Paperozi';
    text-align: center;
    margin-bottom: 6.09vw;
    line-height: 150%;
    letter-spacing: -5%;
}

#food h2 span {
    display: inline-block; /* ★ 핵심: 이걸 줘야 y축 움직임(transform)이 물리적으로 작동해! */
}

#food .food-main{
    width: 100.05vw;
    /* background-color: #7D7D93; */
    position: absolute;
    left: -2.6vw;
}
#food ul{
    display: flex;
    width: 100vw;
}

#food ul li {
    width: 26.04vw;
    height: 26.04vw;
    border-right: 1px solid #191938;
    border-bottom: 1px solid #191938;
    /* border: 1px solid red; */
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items:first baseline;
    position: relative;
}

/* #food .meal ul:nth-child(1){
    position: absolute;
    left: -2.6vw;
    border: 1px solid red;
} */

#food img{
    width: 23.96vw;
}

#food .meal {
    width: 100.05vw;
    border-top: 1px solid #191938;
    border-left: 1px solid #191938;
    margin-bottom: 5.21vw;
    /* position: absolute;
    left: -2.6vw; */
    /* border: 1px solid red; */
}

#food .meal ul:nth-child(2) li:nth-child(2){
    width: 52.1vw;
}

#food .meal h3{
    position: absolute;
    top: 7.86vw;
    left: 8.75vw;
}

#food .meal p{
    position: absolute;
    left: 8.75vw;
    top: 12.81vw;
    letter-spacing: -2%;
}

#food .digestible {
    width: 100.05vw;
    border-top: 1px solid #191938;
    border-left: 1px solid #191938;
    margin-bottom: 5.21vw;
}

#food .digestible ul:nth-child(1) li:nth-child(1){
    width: 52.1vw;
}


#food .digestible h3{
    position: absolute;
    top: 7.86vw;
    left: 7.34vw;
}

#food .digestible p{
    position: absolute;
    left: 7.34vw;
    top: 12.81vw;
    letter-spacing: -2%;
}



#food .snack {
    width: 100.05vw;
    border-top: 1px solid #191938;
    border-left: 1px solid #191938;
    margin-bottom: 5.21vw;
}

#food .snack ul:nth-child(2) li:nth-child(3){
    width: 52.1vw;
}

#food .snack h3{
    position: absolute;
    top: 7.86vw;
    left: 7.34vw;
}

#food .snack p{
    position: absolute;
    left: 7.34vw;
    top: 12.81vw;
    letter-spacing: -2%;
}


#food .body {
    width: 100.05vw;
    border-top: 1px solid #191938;
    border-left: 1px solid #191938;
}

#food .body ul:nth-child(1) li:nth-child(2){
    width: 52.1vw;
}

#food .body h3{
    position: absolute;
    top: 7.86vw;
    left: 7.34vw;
}

#food .body p{
    position: absolute;
    left: 7.34vw;
    top: 12.81vw;
    letter-spacing: -2%;
}

#food h3{
    font-family: "Montserrat", sans-serif;
    font-size: 2.60vw;
    font-weight: 700;
    letter-spacing: -5%;
    margin-bottom: 1.04vw;
}

#food p{
    font-family: 'Paperozi';
    font-size: 1.04vw;
    letter-spacing: -2%;
    line-height: 171%;
}


#DESIGN{
    width: 100%;
    height: 143vw;
    /* background-color: #d2d2d2; */
    position: relative;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    margin-top: 17vw;
    /* border: 1px solid red; */
}

#DESIGN h4{
    position: absolute;
    top: 0;
    left: 0;
}


#DESIGN .logo-sys{
    display: flex;
    flex-flow: column;
    /* border: 1px solid red; */
    position: absolute;
    top: 8vw;
    right: 6vw;
}


#DESIGN .logo-sys .circle{
    width: 2.34vw;
    height: 2.34vw;
    background-color: #191938;
    border-radius: 100%;
    margin-bottom: 1vw;
    position: relative;
    left: 5.3vw;
}

#DESIGN .logo-sys h1{
    font-size: 5vw;
    font-family: "Montserrat", sans-serif;
    line-height: 90%;
    margin-bottom: 3vw;
    letter-spacing: -5%;
    position: relative;
    left: 5.2vw;
}

#DESIGN .logo-sys p{
    font-size: 1.04vw;
    font-family: 'Paperozi';
    line-height: 165%;
    color: #191938;
    margin-bottom: 3vw;
    position: relative;
    left: 5.5vw;
}

/* #DESIGN .logo-sys img{
    width: 48vw;
} */


/* LOGO SYSTEM SVG */
#DESIGN .logo-grid-svg {
    /* width: 48vw; */
    width: 55vw;
     /* border: 1px solid red; */
}

#DESIGN .logo-grid-svg svg {
    display: block;
    width: 100%;
    height: auto;
    /* position: relative;
    right: 20vw;
    bottom: 3vw; */
    /* border: 1px solid red; */
    position: relative;
    left: 2.3vw;
}

#DESIGN .color{
    /* border: 1px solid red; */
    display: flex;
    flex-flow: column;
    align-items: first baseline;
    width: 20%;
    position: absolute;
    left: 23.96vw;
    top: 45vw;
    z-index: 1;
}

#DESIGN .color h1{
    font-size: 5vw;
    font-family: "Montserrat", sans-serif;
    line-height: 90%;
    letter-spacing: -5%;
    margin-top: 1.04vw;
}

#DESIGN .color img{
    width: 5.63vw;
}

#DESIGN .color-txt{
    font-family: 'Paperozi';
    font-size: 1.04vw;
    line-height: 141%;
    position: relative;
    left: 15vw;
    bottom: 11vw;
}


#DESIGN .color-palette{
    display: flex;
    /* border: 1px solid red; */
    position: absolute;
    left: 0;
    /* top: 24.11vw; */
    top: 61.6vw;
}
#DESIGN ul li{
    position: relative;
    margin-right: 1.09vw;
}

#DESIGN ul li p{
    font-size: 1.25vw;
    font-family: 'Paperozi';
    font-weight: 400;
    position: absolute;
    left: 1.56vw;
    bottom: 1.56vw;
    letter-spacing: 2%;
}

#DESIGN ul:nth-of-type(1){
    display: flex;
}

#DESIGN ul:nth-of-type(1) li {
    width: 14.95vw;
    height: 26.04vw;
    /* border: 1px solid red; */
}

#DESIGN ul:nth-of-type(1) li:nth-child(1){
    background-color: #191938;
    color: #FFFFFF;
}

#DESIGN ul:nth-of-type(1) li:nth-child(2){
    background-color: #7D7D93;
    color: #FFFFFF;
    position: relative;
    top: 8.96vw;
}

#DESIGN ul:nth-of-type(1) li:nth-child(3){
    background-color: #F5F5F5;
    position: relative;
    top: 12.03vw;
}

#DESIGN ul:nth-of-type(1) li:nth-child(4){
    background-color: #FFFFFF;
    border: 0.052vw solid #191938;
    position: relative;
    top: 5.57vw;
}

#DESIGN ul:nth-of-type(2){
    position: relative;
    top: 5.57vw;
}

#DESIGN ul:nth-of-type(2) li:nth-child(1) {
    width: 14.95vw;
    height: 12.08vw;
    /* border: 1px solid red; */
    background-color: #C8E35F;
    margin-bottom: 1.09vw;
}

#DESIGN ul:nth-of-type(2) li:nth-child(2) {
    width: 14.95vw;
    height: 12.86vw;
    /* border: 1px solid red; */
    background-color: #EB0102;
    color: #FFFFFF;
}



#DESIGN .typo{
    position: absolute;
    right: 24vw;
    top: 105vw;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

#DESIGN .typo .dot{
    width: 2.34vw;
    height: 2.34vw;
    border-radius: 100%;
    background-color: #191938;
    margin-bottom: 1.15vw;
}

#DESIGN .typo h1{
    font-family: "Montserrat", sans-serif;
    font-size: 5vw;
    line-height: 90%;
    letter-spacing: -5%;
    text-align: right;
}


#DESIGN .typo-txt{
    font-family: 'Paperozi';
    font-size: 1.04vw;
    line-height: 141%;
    position: relative;
    top: 42.7vw;
    right: 20vw;
}

#DESIGN .typo-list{
    z-index: 1;
    /* border: 1px solid red; */
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: first baseline;
    position: absolute;
    top: 124vw;
    right: 2.14vw;
}

#DESIGN .typo-list .typo-list-1{
    display: flex;
    justify-content: center;
    align-items: center;
    /* border: 1px solid red; */
    margin-bottom: 3vw;
}

#DESIGN .typo-list .typo-list-2{
    display: flex;
    justify-content: center;
    align-items: center;
    /* border: 1px solid red; */
}

#DESIGN .typo-list h3{
    font-size: 1.67vw;
    font-family: 'Paperozi';
    font-weight: 300;
    letter-spacing: 2%;
    color: #7D7D93;
}

#DESIGN .typo-list .typo-list-1 h3{
    margin-right: 9.69vw;
}

#DESIGN .typo-list .typo-list-2 h3{
    margin-right: 9.38vw;
}

#DESIGN .typo-list h2{
    font-size: 3.33vw;
    letter-spacing: 2%;
}

#DESIGN .typo-list .typo-list-1 h2{
    margin-right: 6.5vw;
    font-family: 'Paperozi';
}

#DESIGN .typo-list .typo-list-2 h2{
    margin-right: 4.90vw;
    font-family: "Montserrat", sans-serif;
}

#DESIGN .typo-list p{
    font-size: 1.04vw;
    margin-right: 2.08vw;
    font-family: 'Paperozi';
    letter-spacing: 2%;
    color: #7D7D93;
}







/* PACKAGE DESIGN 전체 */
#PACKAGE-DESIGN {
    width: 100%;
    height: 294vw;
    position: relative;
    padding-bottom: 3vw;
    /* border: 5px solid red; */
    margin-top: 10vw;
}

/* 상단 기획 설명 */
#PACKAGE-DESIGN .package-intro {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    margin-top: 5vw;
    margin-bottom: 4vw;
}

/* 왼쪽 제목 */
#PACKAGE-DESIGN .package-intro h3 {
    font-family: 'Paperozi';
    font-size: 2.5vw;
    font-weight: 600;
    line-height: 150%;
    color: #191938;
}

/* 오른쪽 설명 */
#PACKAGE-DESIGN .package-intro p {
    width: 42%;
    font-family: 'Paperozi';
    font-size: 1.04vw;
    font-weight: 400;
    line-height: 170%;
    color: #191938;
}

/* 첫 번째 이미지 행 */
#PACKAGE-DESIGN .package-row-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7vw;

    width: 100%;
    margin-bottom: 0.7vw;
}

/* 두 번째 이미지 행 */
#PACKAGE-DESIGN .package-row-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.7vw;

    width: 100%;
}

/* 이미지 박스 공통 */
#PACKAGE-DESIGN .package-image {
    position: relative;
    overflow: hidden;
    /* background-color: #F5F5F5; */
    /* border: 1px solid #191938; */
}

/* 첫 번째 행 이미지 높이 */
#PACKAGE-DESIGN .package-row-3 .package-image {
    height: 33.28vw;
}

/* 두 번째 행 이미지 높이 */
#PACKAGE-DESIGN .package-row-4 .package-image {
    height: 22.92vw;
}

/* 이미지 */
#PACKAGE-DESIGN .package-image img {
    display: block;
    width: 100%;
    height: 100%;

    object-fit: cover;

    transform: scale(1.03);
    transition: transform 0.8s ease;
}

/* 두 번째 줄 이미지만 하단을 기준으로 확대 */
/* #PACKAGE-DESIGN .package-row-4 .package-image img {
    transform-origin: center center;
} */

#PACKAGE-DESIGN .package-row-4 img{
    position: relative;
    top: 0.5vw;
}

#PACKAGE-DESIGN .package-image:hover img {
    transform: scale(1.2);
}

#PACKAGE-DESIGN .package-image span {
    transition: transform 0.5s ease;
}

#PACKAGE-DESIGN .package-image:hover span {
    transform: translateY(-0.5vw);
}


/* 이미지 하단 텍스트 */
#PACKAGE-DESIGN .package-image span {
    position: absolute;
    bottom: 1.4vw;
    left: 1.8vw;

    font-family: "Montserrat", sans-serif;
    font-size: 0.97vw;
    font-weight: 700;
    color: #191938;
}


/* PACKAGE DESIGN - 이미지 외곽선 고정 */
#PACKAGE-DESIGN .package-image::after {
    content: "";
    position: absolute;
    inset: 0;

    border: 1px solid #191938;
    box-sizing: border-box;

    pointer-events: none;
    z-index: 2;
}


/* 하단 설명 전체 */
#PACKAGE-DESIGN .package-details {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    width: 100%;
    margin-top: 4.3vw;

    border-top: 1px solid #191938;
    border-bottom: 1px solid #191938;
}

/* 개별 설명 박스 */
#PACKAGE-DESIGN .package-detail-item {
    min-width: 0;
    padding: 1.7vw;

    border-right: 1px solid #191938;
}

/* 마지막 세로선 제거 */
#PACKAGE-DESIGN .package-detail-item:last-child {
    border-right: none;
}

/* 설명 번호 */
#PACKAGE-DESIGN .package-detail-item span {
    display: block;

    font-family: "Montserrat", sans-serif;
    font-size: 0.73vw;
    font-weight: 700;
    color: #7D7D93;

    margin-bottom: 0.8vw;
}

/* 설명 제목 */
#PACKAGE-DESIGN .package-detail-item h5 {
    font-family: 'Paperozi';
    font-size: 1.15vw;
    font-weight: 700;
    color: #191938;

    margin-bottom: 1vw;
}

/* 설명 본문 */
#PACKAGE-DESIGN .package-detail-item p {
    font-family: 'Paperozi';
    font-size: 0.83vw;
    font-weight: 300;
    line-height: 175%;
    color: #191938;
}



/* LIQUID PACKAGE 전체 */
#PACKAGE-DESIGN .liquid {
    width: 100%;
    height: 75vw;
    position: relative;
    left: 5vw;
    margin-top: 5vw;
}

/* 이미지 영역 */
#PACKAGE-DESIGN .liquid-img {
    display: grid;
    grid-template-columns: 38.5% 38.5%;
    justify-content: space-between;

    width: 100%;
    height: 60vw;
    /* border: 1px solid red; */
}

/* 이미지 박스 공통 */
#PACKAGE-DESIGN .liquid-image {
    position: relative;
    overflow: hidden;
    background-color: #F5F5F5;
}

/* 왼쪽 이미지 */
#PACKAGE-DESIGN .liquid-left {
    /* width: 24vw;
    height: 38.5vw; */
    width: 26vw;
    /* height: 45.5vw; */
    margin-top: 0;
}

#PACKAGE-DESIGN .liquid-right {
    /* width: 24vw;
    height: 38.5vw; */
    width: 26vw;
    /* height: 38.5vw; */
    margin-top: 19vw;
    position: relative;
    right: 28vw;
}

/* 이미지 */
#PACKAGE-DESIGN .liquid-image img {
    display: block;
    width: 100%;
    height: 100%;

    object-fit: contain;
}

#PACKAGE-DESIGN .liquid-left,
#PACKAGE-DESIGN .liquid-right {
    height: 38vw;
    aspect-ratio: auto;
}

#PACKAGE-DESIGN .liquid-image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: initial;
}


/* 이미지 하단 라벨 */
#PACKAGE-DESIGN .liquid-image span {
    position: absolute;
    bottom: 1.7vw;
    left: 1.5vw;

    font-family: "Montserrat", sans-serif;
    font-size: 0.83vw;
    font-weight: 700;
    color: #191938;
}

/* 오른쪽 상단 설명 */
#PACKAGE-DESIGN .liquid > p {
    position: absolute;
    top: 0;
    right: 8vw;

    /* width: 44%; */

    font-family: 'Paperozi';
    font-size: 1.04vw;
    font-weight: 400;
    line-height: 175%;
    color: #191938;
}


#PACKAGE-DESIGN .liquid-image img {
    transition: transform 0.8s ease;
}

#PACKAGE-DESIGN .liquid-image:hover img {
    transform: scale(1.05);
}

#PACKAGE-DESIGN .liquid-image span {
    transition: transform 0.5s ease;
}

#PACKAGE-DESIGN .liquid-image:hover span {
    transform: translateY(-0.5vw);
}

/* LIQUID PACKAGE - 고정 외곽선 */
#PACKAGE-DESIGN .liquid-image::after {
    content: "";
    position: absolute;
    inset: 0;

    border: 1px solid #191938;
    box-sizing: border-box;

    pointer-events: none;
    z-index: 2;
}

#PACKAGE-DESIGN .package-main{
    width: 100%;
    margin-top: 5vw;
    margin-bottom: 3vw;
}


#PACKAGE-DESIGN .package-main-2{
    width: 100%;
    margin-top: 5vw;
    margin-bottom: 3vw;
    position: relative;
    bottom: 8vw;
}

/* #PACKAGE-DESIGN ,package-main{
    width: 126.39vw;
} */
/* ==========================================
   📐 기존 디자인 스타일 레이아웃 (유지 및 정돈)
========================================== */

#SERVICE {
    width: 100%;
    height: 73vw;
    /* border: 1px solid red; */
    position: relative;
    margin-top: 15vw;
}

#SERVICE .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 101%;
    height: 6.09vw;
    border: 1px solid #191938;
    position: relative;
    right: 0.1vw;
}


#SERVICE h2{
    margin-top: 6.56vw;
    margin-bottom: 3.42vw;
    font-size: 2.60vw;
}

#SERVICE .title h3 {
    font-family: 'Paperozi';
    font-weight: 700;
    font-size: 1.88vw;
    letter-spacing: -5%;
    position: relative;
    left: 2.5vw;
}

#SERVICE .title ul {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    right: 3vw;
}

/* 1. 모든 숫자 li 버튼들의 방 크기를 똑같이 고정시킵니다 */
#SERVICE .title ul li {
    font-size: 1.67vw;
    font-family: 'Paperozi';
    letter-spacing: -5%;
    font-weight: 700;
    
    /* 기존 margin-right: 1vw 때문에 간격이 튀었을 수 있으니 gap으로 대체하기 위해 제거 */
    margin-right: 0; 

    /* 🎯 [초핵심] 동그라미(.page) 크기와 완전히 똑같은 방 크기를 평소에도 강제로 쥐어줍니다 */
    width: 3.54vw;
    height: 3.54vw;
    
    /* 글자가 방 한가운데에 정확히 오도록 플렉스 정렬 */
    display: flex;
    justify-content: center;
    align-items: center;
    
    cursor: pointer;
    transition: all 0.3s ease;
}

/* 2. li들 사이의 간격은 부모인 ul에 gap을 줘서 안전하게 벌려줍니다 */
#SERVICE .title ul {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1vw; /* ★ 숫자 방과 방 사이의 간격을 고정! */
}

/* 3. 활성화되었을 때(.page)는 이미 원래 li 크기가 3.54vw였기 때문에 
      주변 레이아웃을 단 1px도 건드리지 않고 배경색만 싹 입혀지게 됩니다 */
#SERVICE .title ul li.page {
    color: #FFFFFF !important;
    background-color: #191938;
    border-radius: 100%;
}

#SERVICE .service-main {
    width: 100vw;
    height: 100%;
    position: absolute;
    left: -2.6vw;
}

#SERVICE .service-content {
    display: flex;
    width: 100%;
    height: 56.25vw;
}

#SERVICE .service-left {
    width: 63.02vw;
    /* background-color: #cbcbcb; */
    height: 50.16vw;
    /* border: 1px solid red; */
    padding-left: 10.57vw;
    border-right: 1px solid #191938;
    border-bottom: 1px solid #191938;
}

#SERVICE .service-right {
    width: 36.98vw;
    /* background-color: #a1aa7e; */
    height: 50.16vw;
    padding-left: 3.49vw;;
    border-bottom: 1px solid #191938;
}

/* ==========================================
   ⚡ [핵심 수정] 이미지 간격 오토 레이아웃 정렬 (gap 적용)
========================================== */
#SERVICE .service-img {
    display: flex;
    align-items: flex-end; /* 이미지 아랫 라인 맞추기 */
    gap: 1.04vw;           /* ★ 피그마에서 쓰던 이미지 사이 간격 수치 통합! */
}

/* 첫 번째 구조 속 내부 div 박스 정렬 */
#SERVICE .service-img .as-is,
#SERVICE .service-img .to-be {
    display: flex;
    flex-direction: column;
}

#SERVICE img {
    width: 14.95vw;
    margin-top: 1.67vw;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
}

/* ==========================================
   ✍️ 타이포그래피 및 세부 여백 설정 (유지)
========================================== */
#SERVICE .service-left p {
    font-size: 1.04vw;
    letter-spacing: -2%;
    line-height: 150%;
    font-family: 'Paperozi';
}

#SERVICE .service-right h5{
    font-family: 'Paperozi';
    letter-spacing: -2%;
    margin-bottom: 6.98vw;
}

#SERVICE .service-right h6 {
    font-size: 1.25vw;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    margin-bottom: 1.46vw;
}


#SERVICE .service-right p {
    font-size: 1.25vw;
    letter-spacing: -2%;
    line-height: 171%;
    font-family: 'Paperozi';
    margin-bottom: 5.78vw;
}

#SERVICE h5 {
    font-size: 1.04vw;
    font-family: "Montserrat", sans-serif;
    color: #7D7D93;
    font-weight: 600;
    margin-top: 3.5vw;
}


#SERVICE .service-1 .service-left p {
    margin-top: 3.33vw;
}


#SERVICE .service-2 .service-left{
    padding-top: 6.15vw;
}

#SERVICE .service-2 .service-txt{
    display: flex;
    position: relative;
    top: 1.88vw;
}

#SERVICE .service-2 .service-txt p{
    font-size: 0.83vw;
}

#SERVICE .service-2 .service-txt p:nth-child(1){
    width: 19.53vw;
    /* border: 1px solid red; */
    margin-right: 1.35vw;
}

#SERVICE .service-2 .service-txt p:nth-child(2){
    width: 26.56vw;
    /* border: 1px solid red; */
}


#SERVICE .service-3 .service-left{
    padding-top: 6.15vw;
}

#SERVICE .service-3 .service-txt p{
    font-size: 0.83vw;
    width: 46.93vw;
}

#SERVICE .service-3 .service-left p {
    margin-top: 3.33vw;
}
/* --------------- */

/* ==========================================
   ⚙️ SERVICE 탭 체인지 레이아웃 제어
========================================== */

/* .service-1, .service-2, .service-3 {
    display: none;
    width: 100%;
}

.service-1.active, 
.service-2.active, 
.service-3.active {
    display: block;
}


#SERVICE .title ul li {
    cursor: pointer;
    transition: all 0.3s ease;
}

#SERVICE .title ul li.page {
    color: #FFFFFF !important;
    width: 3.54vw;
    height: 3.54vw;
    background-color: #191938;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
} */


#SERVICE .service-main {
    width: 100vw;
    height: 56.25vw; /* ★ 핵심: 탭이 바뀌어도 전체 틀 높이를 딱 고정해서 밑바닥 출렁임을 막음 */
    position: absolute;
    left: -2.6vw;
}

/* 1. 평소 상태: display: none을 버리고, 모든 화면을 3차원으로 한곳에 포개어 둡니다. */
/* SERVICE 탭 화면 */
#SERVICE .service-1,
#SERVICE .service-2,
#SERVICE .service-3 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* 활성화된 화면 */
#SERVICE .service-1.active,
#SERVICE .service-2.active,
#SERVICE .service-3.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* 숫자 버튼 */
#SERVICE .title ul li {
    transition: background-color 0.35s ease,
                color 0.35s ease,
                border-radius 0.35s ease;
}

/* 활성화된 숫자 버튼 동그라미 스타일 */
#SERVICE .title ul li.page {
    color: #FFFFFF !important;
    width: 3.54vw;
    height: 3.54vw;
    background-color: #191938;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
}


#phone-page{
    width: 100%;
    height: 120vw;
    /* border: 10px solid red; */
    position: relative;
    margin-top: 14vw;
}


/* #phone-page .app-mockup{
    width: 28.39vw;
    position: absolute;
    top: 6.15vw;
    left: 16.35vw;
} */


#phone-page .phone-page-content{
    position: relative;
    margin-top: 20vw;
    /* border: 10px solid red; */
}


#phone-page .app-mockup{
    /* width: 28.39vw; */
    width: 28.07vw;
    position: absolute;
    top: 6.15vw;
    left: 16.35vw;
    border-radius: 5vw;
    /* border: 3px solid red; */
    overflow: hidden;
}

#phone-page .app-mockup video{
    width: 28.39vw;
    /* border: 1px solid red; */
}



#phone-page .phone-txt-1{
    /* border: 1px solid red; */
    position: absolute;
    left: 55.89vw;
    top: 1vw;
}

#phone-page .phone-txt-1 h3{
    font-size: 2.60vw;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    letter-spacing: -5%;
    margin-bottom: 1.98vw;
}

#phone-page .phone-txt-1 h5{
    font-size: 1.04vw;
    font-family: 'Paperozi';
    letter-spacing: -5%;
    font-weight: 600;
    margin-bottom: 2.29vw;
}

#phone-page .phone-txt-1 p{
    font-size: 1.04vw;
    font-family: 'Paperozi';
    letter-spacing: -2%;
    font-weight: 400;
    width: 33.54vw;
    line-height: 171%;
}

#phone-page .phone-txt-2{
    /* border: 1px solid red; */
    width: 30.41vw;
    font-family: 'Paperozi';
    position: absolute;
    left: 58.65vw;
    top: 67.24vw;
}

#phone-page .phone-txt-2 h3{
    font-size: 2.08vw;
    margin-bottom: 3vw;
}

#phone-page .phone-txt-2 p{
    font-size: 1.56vw;
    line-height: 140%;
    letter-spacing: -2%;
}





.circle-container {
    width: 39.90vw;
    height: 39.90vw;
    position: relative;
    z-index: -1;
    position: absolute;
    left: 39.95vw;
    top: 36.93vw;
}

.circle-container svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    transform: rotate(-152deg) scaleX(-1);
}

.incomplete-circle {
    fill: none;
    stroke: #191938;
    stroke-width: 0.02vw;
    stroke-dasharray: 565;    
    stroke-dashoffset: 565;     
}




#phone-AI{
    width: 100%;
    height: 50vw;
    /* border: 1px solid blue; */
    position: relative;
}

#phone-AI .AI-txt{
    /* border: 1px solid red; */
    width:29.32vw;
    text-align: center;
    position: absolute;
    left: 7.97vw;
}

#phone-AI .AI-txt h3{
    font-size: 2.60vw;
    font-family: "Montserrat", sans-serif;
    letter-spacing: -5%;
    margin-bottom: 1.98vw;
}

#phone-AI .AI-txt h5{
    font-size: 1.04vw;
    font-family: 'Paperozi';
    letter-spacing: -5%;
    margin-bottom: 2.34vw;
}

#phone-AI .AI-txt p{
    font-size: 1.04vw;
    font-family: 'Paperozi';
    letter-spacing: -2%;
    line-height: 171%;
    width: 29.32vw;
    text-align: center;
}

/* AI 영역 전체 틀 레이아웃에 맞춰 CSS를 추가해 줘 */
.AI-page {
    height: 15vw;
    display: flex;
    align-items: center;
    gap: 2vw; /* 로고와 말풍선 사이 간격 */
    /* border: 3px solid red; */
    /* top: 20vw; */
    display: flex;
    flex-flow: column;
    position: absolute;
    left: 10.68vw;
    top: 23.27vw;
}

.AI-page img{
    width: 2.36vw;
    position: absolute;
    left: 0;
    top: 0;
}

.AI-chage {
    position: relative;
    top: 3.5vw;
    width: 22.92vw; /* 피그마 시안에 맞게 가로 너비 조절해봐! */
    height: 11vw;  /* ★ 중요: 가장 긴 문장이 들어갔을 때 깨지지 않을 넉넉한 높이 지정 */
    border: 0.052vw solid #191938;
    border-radius: 2.62vw;
    display: flex;
    justify-content:center ;
    align-items: center;
}

.AI-chage p {
    position: absolute; /* 겹쳐놓는 성질은 그대로 유지 */
    
    /* 🎯 [초핵심] 기존 top: 0, left: 0 대신 중앙 정렬 치트키 적용 */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* ★ 문장 자체의 크기를 계산해서 정확히 정중앙으로 소환! */
    
    width: 100%;
    margin: 0;
    text-align: center; /* ★ 텍스트가 여러 줄일 때 글자들도 가운데로 정렬되도록 추가 */
    
    font-family: 'Paperozi';
    font-size: 1.15vw;
    line-height: 160%;
    color: #191938;

    /* 평소에는 투명하게 숨기기 */
    opacity: 0;
    visibility: hidden;
    
    /* 문장이 바뀔 때 부드럽게 오버랩되는 트랜지션 (transform도 같이 부드럽게 유지하기 위해 수정) */
    transition: opacity 0.6s ease, visibility 0.6s ease, transform 0.6s ease;
}

/* active 클래스가 붙은 문장만 화면에 부드럽게 등장 */
.AI-chage p.active {
    opacity: 1;
    visibility: visible;
}

/* 브랜드 톤앤매너용 강조 텍스트 스타일 (필요하면 써봐!) */
.AI-chage p span {
    font-weight: 700;
    color: #C8E35F; /* 노메로 시그니처 연두색 같은 포인트 컬러 */
}


#phone-AI .AI-button{
    display: flex;
    /* border: 1px solid red; */
    gap: 4.69vw;
    position: absolute;
    left: 15.96vw;
    top: 42vw;
}

#phone-AI .AI-button p{
    font-family: 'Paperozi';
    font-size: 0.63vw;
    font-weight: 500;
    margin-top: 0.78vw;
}

#phone-AI .AI-button .button{
    width: 3.75vw;
    height: 3.75vw;
    border-radius: 100%;
    background-color: #191938;
    display: flex;
    justify-content: center;
    align-items: center;
}


#phone-AI .AI-button .button-1, #phone-AI .AI-button .button-2{
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
}

#phone-AI .AI-button .button-1 .button img{
    width: 1.31vw;
}

#phone-AI .AI-button .button-2 .button img{
    width: 1.42vw;
}


#phone-page-2{
    width: 100%;
    height: 149.4vw;
    /* border: 1px solid red; */
    position: relative;
}

#phone-page-2 img{
    width: 28.39vw;
}


#phone-page-2 .app-mockup-1{
    width: 28.39vw;
    z-index: 10;
    position: absolute;
    left: 8.2vw;
    /* border: 1px solid red; */
}

.app-mockup-1 video {
    width: 100%;  /* 부모 박스 너비에 꽉 맞추기 */
    height: auto;
    object-fit: cover; /* 이미지가 박스에 예쁘게 꽉 차게 채우는 치트키 */
    border-radius: 2vw; /* 혹시 폰 화면처럼 둥글게 깎고 싶다면 사용! */
}


#phone-page-2 .app-mockup{
    width: 28.39vw;
    z-index: 10;
    position: absolute;
    left: 58.39vw;
    top: 46.82vw;
    /* border: 1px solid red; */
}


.app-mockup video {
    width: 100%;  /* 부모 박스 너비에 꽉 맞추기 */
    height: auto;
    object-fit: cover; /* 이미지가 박스에 예쁘게 꽉 차게 채우는 치트키 */
    border-radius: 2vw; /* 혹시 폰 화면처럼 둥글게 깎고 싶다면 사용! */
}


#phone-page-2 img:nth-child(3){
    /* border: 1px solid blue; */
    position: absolute;
    left: 58.39vw;
    top: 46.82vw;
}

#phone-page-2 .phone-2-txt{
    text-align: center;
    width: 25vw;
    position: absolute;
    top: 28.39vw;
    left: 60.2vw;
}

#phone-page-2 .phone-2-txt h3{
    font-size: 2.60vw;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    letter-spacing: -5%;
    margin-bottom: 1.98vw;
}

#phone-page-2 .phone-2-txt h5{
    font-size: 1.04vw;
    font-family: 'Paperozi';
    letter-spacing: -5%;
    font-weight: 600;
    margin-bottom: 2.29vw;
}

#phone-page-2 .phone-2-txt p{
    font-size: 1.04vw;
    font-family: 'Paperozi';
    letter-spacing: -2%;
    font-weight: 400;
    /* width: 33.54vw; */
    line-height: 171%;
    text-align: center;
}

/* .circle-container {
    width: 39.90vw;
    height: 39.90vw;
    position: relative;
    z-index: -1;
    position: absolute;
    left: 39.95vw;
    top: 36.93vw;
}

.circle-container svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    transform: rotate(-152deg) scaleX(-1);
}

.incomplete-circle {
    fill: none;
    stroke: #191938;
    stroke-width: 0.02vw;
    stroke-dasharray: 565;    
    stroke-dashoffset: 565;     
} */

#phone-page-2 .circle-container-2{
    width: 39.90vw;
    height: 39.90vw;
    z-index: -1;
    position: absolute;
    top: 82.71vw;
    left: 31.93vw;
}

#phone-page-2 .circle-container-2 svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    /* transform: rotate(-349deg) scaleX(-1); */
    transform: rotate(-151deg) scaleX(-1);
    /* transform: rotate(-173deg); */


}


#phone-page-2 .incomplete-circle-2 {
    fill: none;
    stroke: #191938;
    stroke-width: 0.02vw;
    stroke-dasharray: 401;    
    stroke-dashoffset: 565;     
}

#phone-page-2 .report-txt{
    font-size: 1.04vw;
    font-family: 'Paperozi';
    line-height: 171%;
    letter-spacing: -2%;
    position: absolute;
    bottom: 41.8vw;
    left: 7.97vw;
    z-index: 3;
}

#phone-page-2 .pre-img{
    width: 100vw;
    height: 38.18vw;
    background-color: #7D7D93;
    position: absolute;
    bottom: 0;
    left: -2.6vw;
}

#phone-page-2 .pre-img img{
    width: 100vw;
}


#COMMERCE{
    width: 100%;
    height: 94vw;
    /* border: 1px solid red; */
    position: relative;
    margin-top: 16vw;
}

#COMMERCE .COMMERCE-txt{
    text-align: center;
}

#COMMERCE .COMMERCE-txt h2{
    font-size: 2.60vw;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    letter-spacing: -5%;
    margin-bottom: 1.98vw;
}

#COMMERCE .COMMERCE-txt h5{
    font-size: 1.04vw;
    font-family: 'Paperozi';
    letter-spacing: -5%;
    font-weight: 600;
    margin-bottom: 2.29vw;
}

#COMMERCE .COMMERCE-txt p{
    font-size: 1.04vw;
    font-family: 'Paperozi';
    letter-spacing: -2%;
    font-weight: 400;
    /* width: 33.54vw; */
    line-height: 171%;
    text-align: center;
}

#COMMERCE .COMMERCE-img{
    display: flex;
    flex-flow: column;
    position: absolute;
    right: 0;
    bottom: 0;
}

#COMMERCE .COMMERCE-img ul{
    display: flex;
    margin: 0;
    padding: 0;

}

#COMMERCE .COMMERCE-img img{
    width: 22.92vw;
    display: block;
    margin: 0.52vw;
}

#COMMERCE .app-mockup{
    /* width: 28.39vw; */
    width: 28.07vw;
    position: absolute;
    bottom: 0;
    left: 1vw;
    border-radius: 5vw;
    /* border: 3px solid red; */
    overflow: hidden;
}

#COMMERCE .app-mockup video{
    width: 28.39vw;
    /* border: 1px solid red; */
}


#My-page{
    width: 100%;
    height: 90vw;
    /* border: 1px solid red; */
    /* background-color: #7D7D93; */
    position: relative;
    display: flex;
    flex-flow: column;
    justify-self: center;
    align-items: center;
    margin-top: 15vw;
}

#My-page .page-content{
    display: flex;
}

#My-page .page-txt{
    /* border: 1px solid red; */
}


#My-page h2{
    font-size: 2.60vw;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    letter-spacing: -5%;
    margin-bottom: 1.98vw;
    text-align: center;
}

#My-page h5{
    font-size: 1.04vw;
    font-family: 'Paperozi';
    letter-spacing: -5%;
    font-weight: 600;
    text-align: center;
}

#My-page .page-left{
    width: 24vw;
    /* border: 1px solid red; */
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    gap: 27.86vw;
    position: absolute;
    left: 6.68vw;
    top:19.19vw;
    /* position: absolute;
    top: 19.19vw; */
}

#My-page .page-left .pre-img{
    width: 22.92vw;
    height: 16.30vw;
    background-color: #7D7D93;
}

#My-page .page-left .page-left-interaction {
    width: 22.92vw;
    height: 16.30vw;
    background-color: #E1E6E9;
    position: relative; /* h3들을 이 박스 안에 묶어두기 위해 추가 */
    
    /* 필요하다면 텍스트 정렬이나 여백을 여기에 추가해줘 */
    display: flex;
    align-items: center; 
    padding-left: 2vw; /* 예시 여백 */
}

#My-page .page-left .page-left-interaction h3 {
    font-size: 1.82vw;
    font-family: 'Paperozi';
    font-weight: 400;
    line-height: 162%; /* 줄간격이 너무 붙지 않게 설정 */
    letter-spacing: -2%;
    
    /* 3개의 문장을 한 자리에 완전히 겹치기 */
    position: absolute;
    left: 2.6vw; /* 위에서 준 padding-left 값과 맞춰주면 좋아 */
    
    opacity: 0; /* 기본적으로는 다 숨김 */
    transition: opacity 0.8s ease-in-out;
}

/* active 클래스가 붙은 h3만 화면에 보이기 */
#My-page .page-left .page-left-interaction h3.active {
    opacity: 1;
}

#My-page .page-left p{
    font-family: 'Paperozi';
    font-size: 1.04vw;
    letter-spacing: -2%;
    line-height: 171%;
}

/* #My-page .page-middle img{
    width: 28.39vw;;
    position: absolute;
    top: 12.66vw;
    left:33.07vw;
} */

#My-page .page-middle .app-mockup{
    width: 28.39vw;;
    position: absolute;
    top: 12.66vw;
    left:33.07vw;
}

#My-page .page-right{
    /* border: 1px solid red; */
    display: flex;
    flex-flow: column;
    justify-content:first baseline;
    align-items:first baseline;
    gap: 29.50vw;
    position: absolute;
    right: 0;
    top: 18.75vw;
}

/* #My-page .page-right .pre-img{
    width: 30.89vw;
    height: 14.58vw;
    background-color: #7D7D93;
} */

#My-page .page-right .page-right-interaction {
    width: 30.89vw;
    height: 14.58vw;
    /* background-color: #7D7D93; */
    position: relative; /* h3들을 이 박스 안에 묶어두기 위해 추가 */
    
    /* 텍스트와 아이콘이 박스 가운데 오도록 정렬 (원하는 스타일에 맞게 조절 가능) */
    display: flex;
    align-items: center;
    padding-left: 2vw; 
}

#My-page .page-right .page-right-interaction h3 {
    font-size: 4.15vw;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    letter-spacing: -2%;
    
    /* 3개의 h3를 한 자리에 완전히 겹치기 */
    position: absolute;
    left: 2vw; /* 위에서 준 padding-left 값과 맞춰주면 좋아 */
    
    /* 아이콘과 텍스트를 한 줄에 정렬 */
    display: flex;
    align-items: center;
    gap: 1vw; /* 텍스트와 이미지 사이의 간격 */
    
    opacity: 0; /* 기본적으로는 다 숨김 */
    transition: opacity 0.8s ease-in-out; /* 0.8초 동안 부드럽게 전환 */
}

#My-page .page-right .page-right-interaction img {
    width: 3.15vw;
}

/* active 클래스가 붙은 h3만 화면에 보이기 */
#My-page .page-right .page-right-interaction h3.active {
    opacity: 1;
}



#My-page .page-right p{
    font-family: 'Paperozi';
    font-size: 1.04vw;
    letter-spacing: -2%;
    line-height: 171%;
}



/* BRAND GOODS 전체 */
#BRAND-GOODS {
    width: 100%;
    position: relative;
    /* overflow: hidden; */
    margin-top: 18vw;
    padding-bottom: 5vw;
}

/* 상단 제목 + 설명 */
#BRAND-GOODS .goods-intro {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    margin-top: 5vw;
    margin-bottom: 4vw;
}

#BRAND-GOODS .goods-intro h3 {
    font-family: 'Paperozi';
    font-size: 2.5vw;
    font-weight: 700;
    line-height: 135%;
    color: #191938;
}

#BRAND-GOODS .goods-intro p {
    width: 40%;
    font-family: 'Paperozi';
    font-size: 1.04vw;
    font-weight: 400;
    line-height: 170%;
    color: #191938;
    position: relative;
    top: 5vw;
}

/* 제목 한 줄씩 마스킹 */
#BRAND-GOODS .goods-title-line {
    display: block;
    overflow: hidden;
}

/* 실제 움직이는 텍스트 */
#BRAND-GOODS .goods-title-line span {
    display: block;
    will-change: transform;
}

/* 오른쪽 설명 */
#BRAND-GOODS .goods-intro p {
    will-change: transform, opacity;
}

/* 슬라이더 영역 */
#BRAND-GOODS .goods-slider {
    width: 100vw;
    overflow: hidden;
    /* border: 1px solid red; */
    position: relative;
    right: 2.6vw;
    top: 5vw;
}

/* 움직이는 트랙 */
#BRAND-GOODS .goods-track {
    display: flex;
    gap: 0.7vw;
    width: max-content;
    will-change: transform;
    /* border: 1px solid red; */

}

/* 개별 이미지 카드 */
#BRAND-GOODS .goods-item {
    width: 47vw; /* 기존 32vw → 47vw */
    flex-shrink: 0;
}

/* 이미지 박스 */
#BRAND-GOODS .goods-img {
    width: 100%;
    height: 33vw; /* 기존 22.3vw → 33vw */
    overflow: hidden;
    background-color: #F5F5F5;
}

/* 이미지 */
#BRAND-GOODS .goods-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.8s ease;
}

/* 이미지 호버 */
#BRAND-GOODS .goods-item:hover img {
    transform: scale(1.05);
}

/* 이미지 아래 영어 제목 */
#BRAND-GOODS .goods-item h5 {
    font-family: "Montserrat", sans-serif;
    font-size: 0.83vw;
    font-weight: 700;
    color: #191938;
    margin-top: 1vw;
    margin-bottom: 0.3vw;
}

/* 이미지 아래 한글 설명 */
#BRAND-GOODS .goods-item p {
    font-family: 'Paperozi';
    font-size: 0.73vw;
    font-weight: 400;
    line-height: 160%;
    color: #7D7D93;
}


#BRAND-GOODS .line{
    width: 95vw;
    border: 0.052vw solid #191938;
    margin-top: 9vw;
}



/* 전체 섹션 */
#ECO-EDITORIAL {
    width: 100%;
    /* height: 90vw; */
    /* border: 1px solid red; */
    position: relative;
    background-color: #fff;
    overflow: hidden;
    margin-top: 3vw;
}

/* 상단 타이틀 */
#ECO-EDITORIAL .eco-heading {
    display: flex;
    align-items: flex-start;
    gap: 5vw;

    padding: 4vw 2vw 0;
}

/* 네이비 점 */
#ECO-EDITORIAL .eco-dot {
    width:2.34vw;
    height: 2.34vw;
    background-color: #191938;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 0.5vw;
    position: absolute;
    left: 0;
    top: 3.5vw;
}

/* 상단 영문 */
#ECO-EDITORIAL .eco-heading h3 {
    font-family: "Montserrat", sans-serif;
    font-size: 4.38vw;
    font-weight: 600;
    line-height: 99%;
    letter-spacing: -5%;
    color: #191938;
    position: relative;
    left: 13.5vw;
}

/* 메인 비주얼 */
#ECO-EDITORIAL .eco-visual {
    position: relative;
    width: 100%;
    height: 77vw;
    /* border: 5px solid red; */
}

/* ECC + 이미지 + OO */
#ECO-EDITORIAL .eco-main {
    position: absolute;
    top: -3vw;
    left: 0;

    width: 100%;
    height: 27vw;

    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 2vw;
    /* border: 1px solid red; */
}

/* ECC / OO 텍스트 */
#ECO-EDITORIAL .eco-main span {
    font-family: "Montserrat", sans-serif;
    font-size: 15vw;
    font-weight: 600;
    line-height: 0.8;
    letter-spacing: -5%;
    color: #191938;
    position: relative;
    /* top: 19.5vw; */
    top: 29vw;
}


#ECO-EDITORIAL .eco-text-left{
    position: relative;
    right: 5.7vw;
}

#ECO-EDITORIAL .eco-text-right{
    position: relative;
    left: 4.2vw;
}
/* 가운데 세로 이미지 */
#ECO-EDITORIAL .eco-main-img {
    width: 28vw;
    /* height: 50vw; */
    /* background-color: #D9D9D9; */
    /* overflow: hidden; */
    position: relative;
    top: 30vw;
}

/* 이미지 */
#ECO-EDITORIAL .eco-main-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 별 그래픽 */
#ECO-EDITORIAL .eco-star {
    position: absolute;
    top: 56vw;
    left: 33%;
    font-size: 7vw;
    font-weight: 300;
    color: #191938;

    transform-origin: center center; /* 추가 */
}

/* 하단 영문 슬로건 */
#ECO-EDITORIAL .eco-bottom-text {
    position: absolute;
    right: 12%;
    bottom: 0;

    font-family: "Montserrat", sans-serif;
    font-size: 4.38vw;
    font-weight: 600;
    line-height: 99%;
    letter-spacing: -5%;
    color: #191938;
}

#ECO-EDITORIAL {
    overflow: hidden;
}

/* 가운데 이미지 */
#ECO-EDITORIAL .eco-main-img {
    overflow: hidden;
}

/* 하단 이미지 3개 */
#eco-bottom-images {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    /* border: 1px solid blue; */
    width: 100vw;
    position: relative;
    right: 2.6vw;
    margin-top: 4vw;
}

/* 이미지 박스 */
#eco-bottom-images .eco-img {
    height: 33.28vw;
    background-color: #D9D9D9;
    overflow: hidden;
}

/* 가운데 이미지 색상 (임시) */
#eco-bottom-images .eco-img:nth-child(2) {
    background-color: #AFAFAF;
}

/* 이미지 공통 */
#eco-bottom-images .eco-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#eco-bottom-images .eco-img {
    overflow: hidden;
}

/* 이미지 호버 확대 */
#eco-bottom-images .eco-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;

    transition: transform 0.8s ease;
}

#eco-bottom-images .eco-img:hover img {
    transform: scale(1.05);
}


#nomero-brand-web{
    width: 100%;
    height: 80vw;
    /* border: 1px solid red; */
    position: relative;
    margin-top: 24vw;
}


#nomero-brand-web .brand-web-txt{
    display: flex;
}


#nomero-brand-web .brand-web-txt h3{
    font-size: 2.60vw;
    font-family: 'Paperozi';
    color: #191938;
    letter-spacing: -5%;
    margin-bottom: 1vw;
}


#nomero-brand-web .brand-web-txt .brand-web-left p{
    font-size: 1.04vw;
    letter-spacing: -5%;
    color: #191938;
    font-weight: 600;
    font-family: 'Paperozi';
}

#nomero-brand-web .brand-web-txt .brand-web-right{
    font-size: 1.04vw;
    letter-spacing: -5%;
    color: #191938;
    font-weight: 400;
    font-family: 'Paperozi';
    line-height: 171%;
    position: relative;
    left: 17vw;
    top: 0.18vw;
}

#nomero-brand-web .brand-web-gif-1 {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    margin-top: 8vw;
}

/* iframe을 담는 영역 */
.web-preview {
    width: 82%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid #191938;
    position: relative;

    container-type: inline-size;
}

/* 실제 웹사이트 */
.web-preview iframe {
    position: absolute;
    top: 0;
    left: 0;

    width: 1440px;
    height: 810px;

    border: none;
    transform-origin: top left;
    transform: scale(calc(100cqw / 1440px));
}


#nomero-brand-web .brand-web-gif-1 p{
    font-size: 1.04vw;
    line-height: 171%;
    letter-spacing: -5%;
    color: #191938;
    font-family: 'Paperozi';
    font-weight: 400;
    margin-top: 7vw;
}

#nomero-brand-web .brand-web-gif-1 p span{
    font-weight: 600;
}


#nomero-brand-web h1{
    font-family: "Montserrat", sans-serif;
    font-size: 6.72vw;
    letter-spacing: -5%;
    font-weight: 600;
}

#nomero-brand-web .gif{
    width: 70vw;
}




#nomero-brand-web .brand-web-gif-1 img{
    position: relative;
    left: 4vw;
    top: 1.7vw;
}

#nomero-brand-web .brand-web-gif-2{
    display: flex;
    margin-top: 13vw;
}  

#nomero-brand-web .brand-web-gif-2 h1{
    position: relative;
    left: 4vw;
    bottom: 1.8vw;
}

#nomero-brand-web .brand-web-gif-3{
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    margin-top: 10vw;
}

#nomero-brand-web .brand-web-gif-3 h1{
    margin-bottom: 5.4vw;
}

/* #nomero-brand-web .brand-web-gif-3 p{
    font-size: 1.04vw;
    line-height: 171%;
    letter-spacing: -5%;
    color: #191938;
    font-family: 'Paperozi';
    font-weight: 400;
    margin-top: 7vw;
} */

/* #nomero-brand-web .brand-web-gif-3 p span{
    font-weight: 600;
} */


#web{
    width: 100%;
    height: 121vw;
    /* border: 1px solid red; */
    position: relative;
    /* display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center; */
}

#web .web-txt{
    display: flex;
    /* border: 1px solid red; */
    align-items: center;
    /* justify-content: space-between; */
}

#web .web-txt .web-txt-left{
    margin-right: 15.625vw;
}

#web .web-txt h2{
    font-size: 2.60vw;
    font-family: "Montserrat", sans-serif;
    letter-spacing: -5%;
    margin-bottom: 1.96vw;
}

#web .web-txt h3{
    font-size: 1.04vw;
    font-family: 'Paperozi';
    letter-spacing: -5%;
    font-weight: 600;
}

#web p{
    font-family: 'Paperozi';
    font-size: 1.04vw;
    letter-spacing: -2%;
    line-height: 171%;
}


#web p:nth-child(3){
    /* border: 1px solid red; */
    text-align: center;
    position: relative;
    top: 67vw;
}


#web .web-page{
    width: 100vw;
    position: absolute;
    left: -2.6vw;
    top: 10.63vw;
    /* margin-top: 4.43vw; */
    z-index: -1;
}

#web .web-two{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.04vw;
    /* border: 1px solid red; */
    margin: 0 auto;
    position: relative;
    top: 71vw;
}

#web .web-two img{
    width: 26.89vw;
}


#mockup{
    width: 100vw;
    height: 56.25vw;
    margin-bottom: 23.4vw;
    /* border: 1px solid red; */
    /* background-color: #7D7D93; */
    margin-top: 15vw;
    position: relative;
    left: -2.6vw;
    /* position: absolute;
    left: -2.6vw;
    bottom: 10vw; */
    background-image: url('img4/nomero-photo.png');
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    flex-flow: column;
    padding: 3vw;
}

/* #mockup img{
    width: 100vw;
} */


#mockup h1{
    font-size: 2.5vw;
    font-family: "Montserrat", sans-serif;
    line-height: 141%;
    letter-spacing: -2%;
    font-weight: 800;
    margin-bottom: 3.7vw;
    margin-top: 3vw;
}

#mockup p{
    font-size: 1.04vw;
    font-family: 'Paperozi';
    line-height: 141%;
    letter-spacing: -2%;
    margin-bottom: 2vw;
    font-weight: 300;
}


footer{
    width: 100vw;
    height: 23.96vw;
    /* height: 42vw; */
    background-color: #191938;
    color: #FFFFFF;
    position: absolute;
    bottom: 0;
    left: -2.6vw;
    display: flex;
}

footer .footer-left{
    /* border: 1px solid red; */
    position: absolute;
    top: 3vw;
    left: 2.66vw;
}

footer .footer-left h2{
    font-size: 1.56vw;
    font-family: "Montserrat", sans-serif;
    line-height: 120%;
    letter-spacing: -2%;
    margin-bottom: 2.24vw;
}

footer .link{
    display: flex;
    gap: 0.99vw;
    margin-bottom: 2.92vw;
}

footer .link div{
    width: 2.97vw;
    height: 2.97vw;
    border-radius: 100%;
    background-color: #FFFFFF;
}

footer .link div img{
    width: 2.97vw;
    height: 2.97vw;
}

footer .source{
    display: flex;
    flex-direction: column;
    gap: 1vw;
}

footer .source p{
    width: 30vw;
    /* border: 1px solid red; */
    font-size: 0.54vw;
    font-family: 'Paperozi';
    font-weight: 200;
    line-height: 130%;
    margin-bottom: 0.02vw;
}

footer .source h5{
    font-size: 0.9vw;
    font-family: 'Paperozi';
    font-weight: 500;
}

footer .source .competitor-link{
    display: flex;
}

footer .link div {
    transition: transform 0.2s ease-in-out;
}

/* 2. 호버했을 때 크기를 살짝(1.05배) 키움 */
footer .link div:hover {
    transform: scale(1.17);
}

footer .source .competitor-link h6{
    font-size: 0.54vw;
    font-family: 'Paperozi';
    line-height: 130%;
    font-weight: 200;
    margin-right: 0.4vw;
}

footer .footer-right ul{
    display: flex;
    /* border: 1px solid red; */
    position: absolute;
    right: 7.47vw;
    top: 9.06vw;
    gap: 4.04vw;
}

footer .footer-right ul .small-circle{
    width: 0.57vw;
    height: 0.57vw;
    border-radius: 100%;
    background-color: #FFFFFF;
    margin-bottom: 1.56vw;
}

footer .footer-right h5{
    font-family: "Montserrat", sans-serif;
    font-size: 1.04vw;
    font-weight: 500;
    letter-spacing: -2%;
    margin-bottom: 1.67vw;
}

footer .footer-right h6{
    font-family: 'Paperozi';
    font-size: 1.04vw;
    letter-spacing: -2%;
    margin-bottom: 2.97vw;
}

footer .footer-right p{
    font-family: "Montserrat", sans-serif;
    font-size: 1.04vw;
    letter-spacing: -2%;
}



.to-top-btn {
    position: fixed;
    bottom: 3vw;       /* 화면 밑에서부터의 거리 */
    right: 3vw;        /* 화면 오른쪽에서부터의 거리 */
    width: 3.5vw;      /* 버튼 가로 크기 */
    height: 3.5vw;     /* 버튼 세로 크기 */
    background-color: #191938; /* 헤더랑 똑같은 딥네이비 컬러 */
    color: #ffffff;
    border: none;
    border-radius: 50%; /* 동그라미 버튼 */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8vw;
    font-weight: 600;
    letter-spacing: 0.05em;
    cursor: pointer;
    z-index: 99;       /* 헤더(100) 바로 아래, 컨텐츠보다는 무조건 위 */
    
    /* 나타나고 사라질 때 0.3초 동안 사르륵 변하는 트랜지션 */
    transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.2s ease;
    transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.6s ease, border-color 0.6s ease;
}

/* 호버했을 때 살짝 떠오르는 센스 있는 디자인 효과 */
.to-top-btn:hover {
    background-color: #7D7D93; /* 호버 시 가벼운 회색조로 변경 */
    transform: scale(1.05);     /* 살짝 커지게 */
}

/* 🎯 [초핵심 상태 클래스] 평소에는 숨겨두는 스타일 */
.to-top-btn.hide {
    opacity: 0;
    pointer-events: none;       /* 투명할 때는 마우스 클릭 안 되게 막기 */
    transform: translateY(1vw); /* 밑으로 살짝 내려가서 숨어있기 */
}

/* ★ !important 없이 명시도(점수) 높여서 덮어쓰기 */
.to-top-btn.invert {
    background-color: #ffffff; /* 클래스 2개가 묶여서 기존 클래스 1개짜리 색상을 이김 */
    color: #191938;            
    border: 1px solid #191938; 
}

/* ★ 반전된 상태에서의 호버 효과도 점수를 똑같이 맞춰줌 */
.to-top-btn.invert:hover {
    background-color: #f4f4f7; 
    transform: scale(1.05);
}












/* ========================================
   NOMERO BORDER RESPONSIVE
======================================== */

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

    #BACKGROUND .graph-1,
    #BACKGROUND .graph-2,
    #research .research-bottom,
    #DESK-RESEARCH .desk-graph-1,
    #DESK-RESEARCH .desk-graph-3 {
        border-width: 0.052vw;
    }

    #research .research-bottom .line {
        border-top-width: 0.052vw;
    }

    #DESK-RESEARCH .line {
        border-width: 0.052vw;
    }

}