/* hero */
#hero {
    width: 100%;
    display: flex;
    flex-direction: column;
    background: url(../img/renewal_2608/hero-bg.png);
    background-attachment: fixed;
    position: relative;
    overflow-x: clip;
    overflow-y: visible;
}

#hero .hero-container {
    width: 100%;
    display: flex;
    height: 900px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 42px;
}

#hero .hero-top {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

#hero .arch-txt {
    max-width: 404px;
    width: 80%;
}

#hero .hero-tit {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    color: #FFF;
    text-align: center;
    font-family: 'KMU80';
    font-size: 86px;
    font-weight: 900;
    line-height: 130%; /* 111.8px */
    letter-spacing: -1.72px;
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.16));
}

#hero .hero-tit>span {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

#hero .hero-tit .gold-point {
    text-align: center;
    font-size: 120px;
    font-weight: 900;
    line-height: 100%; /* 120px */
    letter-spacing: -2.4px;
    position: relative;
}

#hero .gold-light {
    max-width: 116px;
    width: 83%;
    position: absolute;
    left: -17%;
    top: -23.5%;
    mix-blend-mode: screen;
}

#hero .hero-bottom {
    max-width: 910px;
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
}

#hero .triple-crown {
    display: flex;   
    width: 100%;
    padding-top: 20px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    position: relative;
}

#hero .triple-crown-tit {
    max-width: 387px;
    aspect-ratio: 387 / 48;
    width: 90%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3;
}

#hero .triple-crown-tit::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url(../img/renewal_2608/triple-crown-tit.png) no-repeat center center;
    background-size: cover;
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.25));
}

#hero .triple-crown-tit span {
    color: #FFF;
    font-size: 28px;
    font-weight: 700;
    line-height: 130%; /* 36.4px */
    letter-spacing: -0.7px;
    background: linear-gradient(91deg, #FFF 11.14%, #FFE696 100.15%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#hero .triple-crown-box {
    width: 100%;
    display: flex;
    height: 120px;
    padding-top: 24px;
    justify-content: center;
    align-items: center;
    gap: 30px;
    flex-shrink: 0;
    border-radius: 12px;
    border: 2px solid transparent;
    background: linear-gradient(180deg, rgba(0, 140, 67, 0.10) -0.42%, rgba(0, 140, 67, 0.03) 52.95%, rgba(0, 140, 67, 0.00) 99.58%), radial-gradient(274.1% 128.55% at 12.28% -0.42%, rgba(0, 140, 67, 0.50) 0%, rgba(0, 140, 67, 0.10) 35.06%, rgba(0, 140, 67, 0.03) 100%);
    position: relative;
    box-shadow: 0 16px 40px 0 rgba(49, 16, 7, 0.16);
    backdrop-filter: blur(12px);
    color: #FFF;
    text-align: center;
    text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    font-size: 20px;
    font-weight: 500;
    line-height: 150%; /* 30px */
    letter-spacing: -0.5px;
}

#hero .triple-crown-box::before {
    content: "";
    position: absolute;
    inset: -2px;
    padding: 2px;
    border-radius: inherit;
    background: linear-gradient(170deg, rgba(84, 239, 175, 0.40) 0%, rgba(84, 239, 175, 0.25) 55%, rgba(84, 239, 175, 0.05) 78%, rgba(84, 239, 175, 0.00) 92%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
}

#hero .triple-crown-box hr {
    width: 1px;
    height: 24px;
    background: rgba(255, 255, 255, 0.50);
    border-right: 1px solid rgba(255, 255, 255, 0.50);
}

#hero .prizes {
    width: 100%;
}

#hero .mo-prizes {
    display: none;
}

#hero .hero-ellipse-div {
    width: 100%;
    aspect-ratio: 1560 / 250;
    background: #005532;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    margin-top: auto;
    position: relative;
}

#hero .hero-gif {
    width: 21.08%;
    position: absolute;
}

#hero .hero-gif.l {
    bottom: 27.4%;
    left: 1%;
    transform: rotate(-20deg);
}

#hero .hero-gif.r {
    bottom: 27.4%;
    right: 1%;
    transform: rotate(20deg);
}

.bg-blur-wrap {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
}

.bg-blur-txt {
    color: #FFF;
    text-align: center;
    font-family: 'KMU80';
    white-space: nowrap;
}

#hero .bg-blur-txt.l {
    color: #FFF;
    text-align: center;
    font-family: 'KMU80';
    font-size: 20px;
    font-weight: 300;
    line-height: 130%; /* 26px */
    letter-spacing: -0.5px;
    opacity: 0.3;
    filter: blur(0.5px);
    bottom: 5%;
    left: 20%;
}

#hero .bg-blur-txt.r {
    color: #FFF;
    text-align: center;
    font-family: 'KMU80';
    font-size: 20px;
    font-weight: 300;
    line-height: 130%; /* 26px */
    letter-spacing: -0.5px;
    opacity: 0.5;
    filter: blur(1px);
    bottom: 10%;
    right: 30%;
}


/* time */
#time {
    display: flex;
    padding-bottom: 100px;
    flex-direction: column;
    align-items: center;
    gap: 100px;
    background: #005532;
    overflow-x: clip;
    overflow-y: visible;
    margin-top: -2px;
    position: relative;
}

#time .time-img.r {
    max-width: 430px;
    width: 27%;
    right: -120px;
    top: 78px;
    box-shadow: 111px 269px 82px 0 rgba(0, 0, 0, 0.00), 71px 172px 75px 0 rgba(0, 0, 0, 0.01), 40px 97px 63px 0 rgba(0, 0, 0, 0.05), 18px 43px 47px 0 rgba(0, 0, 0, 0.09), 4px 11px 26px 0 rgba(0, 0, 0, 0.10);
    border-radius: 100%;
    z-index: 3;
}

#time .time-img.l {
    max-width: 430px;
    width: 27%;
    left: -115px;
    top: 350px;
    box-shadow: 111px 269px 82px 0 rgba(0, 0, 0, 0.00), 71px 172px 75px 0 rgba(0, 0, 0, 0.01), 40px 97px 63px 0 rgba(0, 0, 0, 0.05), 18px 43px 47px 0 rgba(0, 0, 0, 0.09), 4px 11px 26px 0 rgba(0, 0, 0, 0.10);
    border-radius: 100%;
    z-index: 3;
}

/* 원과 장식들을 묶는 상자.
   #history 가 #time 안으로 들어오면서 #time 이 길어졌는데,
   .time-img / .bg-blur-wrap 은 예전 높이(원 + 아래 여백)를 기준으로 잡혀 있어
   그 기준을 이 상자가 그대로 물려받는다 */
#time .time-top {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 100px;
    position: relative;
}

/* ScrollTrigger 의 pin 은 flex 자식에 붙으면 자리(pinSpacing)를 못 잡는다.
   #time 이 flex 라 일반 블록 상자를 하나 두고 그 안의 .time-inner 를 고정시킨다 */
#time .time-hold {
    width: 100%;
}

/* 원과 연혁을 한 덩어리로 묶어 같이 고정한다.
   그래야 연혁이 가로로 흐르는 동안 위의 원이 계속 보인다.
   둘을 합치면 화면보다 높아서 고정되는 동안 원 위쪽이 잘린다 */
#time .time-inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#time .time-circle {
    border-radius: 1000px;
    aspect-ratio: 1 / 1;
    background: rgba(255, 255, 255, 0.10);
    max-width: 700px;
    width: 80%;
    padding: 30px;
    position: relative;
    z-index: 6;
}

#time .time-circle::before {
    content: "";
    width: 3px;
    height: 100%;
    background: #FBCC34;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
}

#time .time-circle::after {
    content: "";
    width: 100%;
    height: 3px;
    background: #FBCC34;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

#time .time-circle-inner {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 1000px;
    border: 20px solid #FBCC34;
    background: #004126;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    z-index: 5;
    position: relative;
}

#time .time-circle-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: conic-gradient(
        #1A6647 var(--time-sweep, 0deg),
        transparent 0deg
    );
    pointer-events: none;
}

#time .time-circle-inner p {
    color: #FFF;
    font-family: 'KMU80';
    font-size: 48px;
    font-style: normal;
    font-weight: 300;
    line-height: 130%; /* 62.4px */
    letter-spacing: -1.2px;
    margin-top: -5%;
}

#time .time-circle-inner big {
    display: flex;
    padding-right: 10px;
    align-items: center;
    gap: 16px;
    color: #FFF;
    font-family: 'KMU80';
    font-size: 100px;
    font-weight: 900;
    line-height: 100%; /* 100px */
    letter-spacing: -2.5px;
}

#time .time-circle-inner big .gold-point {
    font-family: 'KMU80';
    font-size: 120px;
    font-weight: 900;
    line-height: 100%; /* 120px */
    letter-spacing: -3px;
}

#time .time-inner-img {
    max-width: 434px;
    width: 73%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -40%;
}

/* 연혁*/
#history {
    width: 100%;
    height: auto;
    background: #005532;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 6;
}

#history .history-inner {
    width: 90%;
    margin: 0 auto;
}

#history .history-list {
    width: 100%;
    display: flex;
}

#history .history-list ul {
    display: flex;
    flex-shrink: 0;
    position: relative;
    gap: 120px;
}

#history .history-list ul::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 4px;
    margin-left: var(--history-start, 0px);
    margin-right: var(--history-end, 0px);
    background: #FBCC34;
}

#history .history-list li {
    flex-shrink: 0;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

#history .history-list li.motion {
    opacity: 1;
    transform: none;
}

#history .history-list dl {
    padding-top: 38px;
    text-align: center;
    position: relative;
}

#history .history-list dl::before {
    content: "";
    display: block;
    width: 40px;
    height: 40px;
    position: absolute;
    left: 50%;
    top: -18px;
    transform: translateX(-50%);
    background: #FBC926;
    clip-path: polygon(50.0% 0.0%, 62.6% 19.5%, 85.4% 14.6%, 80.5% 37.4%, 100.0% 50.0%, 80.5% 62.6%, 85.4% 85.4%, 62.6% 80.5%, 50.0% 100.0%, 37.4% 80.5%, 14.6% 85.4%, 19.5% 62.6%, 0.0% 50.0%, 19.5% 37.4%, 14.6% 14.6%, 37.4% 19.5%);
    filter: drop-shadow(4px 8px 16px rgba(0, 0, 0, 0.12));
}

#history .history-list dt {
    color: #FFF;
    font-family: 'KMU80';
    font-size: 56px;
    font-weight: 900;
    line-height: 130%; /* 72.8px */
    letter-spacing: -1.4px;
}

#history .history-list dd {
    margin: 0;
    padding-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#history .history-list dd p {
    color: #FFF;
    text-align: center;
    font-size: 20px;
    font-weight: 400;
    line-height: 130%; /* 26px */
    letter-spacing: -0.5px;
    white-space: nowrap;
}


/* number */
#number {
    width: 100%;
    background: url(../img/renewal_2608/number-bg.png);
    background-position: top center !important;
    padding: 120px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
    overflow: hidden;
    margin-top: -2px;
}

#number .number-container {
    display: flex;
    max-width: 1300px;
    width: 93%;
    justify-content: space-between;
    align-items: center;
}

#number .number-wrap {
    flex: 1 0 0;
    display: flex;
    width: 350px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 60px;
}

#number .number-desc {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: #FFF;
    text-align: center;
    font-family: 'KMU80';
    font-size: 28px;
    font-weight: 300;
    line-height: 125%; /* 35px */
    letter-spacing: -0.7px;
    position: relative;
}

#number .number-desc span {
    color: #F6DF82;
    text-align: center;
    font-family: 'KMU80';
    font-size: 52px;
    font-weight: 900;
    line-height: 125%; /* 65px */
    letter-spacing: -1.3px;
}

#number .number-desc small {
    position: absolute;
    left: 50%;
    bottom: -20px;
    font-size: 14px;
    letter-spacing: -0.35px;
    color: rgba(255, 255, 255, 0.60);
    text-align: center;
    line-height: 120%;
    transform: translateX(-50%);
}

#number .number-wrap hr {
    max-width: 300px;
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.35);
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}

#number .number-char {
    width: 521px;
    aspect-ratio: 1 / 1;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

#number .number-char .clap-gif {
    width: 80%;
}

#number .number-char .txt-circle {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#number .number-char .txt-circle img {
    width: 100%;
}


/* with */
#with {
    width: 100%;
    min-height: 100vh;
    display: flex;
    padding: 120px 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 100px;
    background: url(../img/renewal_2608/with-bg.png);
    background-position: bottom center !important;
}

#with .with-wrap {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 60px;
}

#with .with-text {
    width: 100%;
    overflow: hidden; 
}

#with .with-text .wrapper {
    display: inline-block;
    white-space: nowrap;
    color: #FFF;
    font-family: 'KMU80';
    text-align: center;
    font-size: 120px;
    font-style: normal;
    font-weight: 900;
    line-height: 115%; 
    letter-spacing: -3px;
    will-change: transform;
}

#with .with-container {
    max-width: 672px;
    width: 90%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 40px;
    position: relative;
}

#with .with-circle-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    z-index: 3;
}

#with .with-circle {
    flex: 1 0 0;
    aspect-ratio: 1 / 1;
    border-radius: 999px;
    background: #00693E;
    padding: 6px;
}

#with .with-circle-inner {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, 0.50);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFF;
    text-align: center;
    font-family: 'KMU80';
    font-size: 28px;
    font-weight: 900;
    line-height: 125%; /* 35px */
    letter-spacing: -0.7px;
}

#with .with-txt-div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: #FFF;
    text-align: center;
    font-family: 'KMU80';
    font-size: 28px;
    font-style: normal;
    font-weight: 900;
    line-height: 125%; /* 35px */
    letter-spacing: -0.7px;
    z-index: 3;
}

#with .with-txt-div .g-point {
    padding: 4px 12px;
    background: #00693E;
}

#with .with-circle-line {
    width: 78%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 68px;
}


/* operation */
#operation {
    width: 100%;
    display: flex;
    padding: 60px;
    align-items: center;
    justify-content: center;
    background: #F5F3ED;
    overflow: hidden;
}

#operation .operation-inner {
    width: 100%;
    display: flex;
    box-sizing: border-box;
    padding: 100px 0;
    flex-direction: column;
    align-items: center;
    gap: 60px;
    border-radius: 20px;
    background: linear-gradient(0deg, rgba(0, 140, 67, 0.10) 0%, rgba(0, 140, 67, 0.10) 100%), url(../img/renewal_2608/stripe-bg.png);
    background-size: cover;
    background-position: center center !important;
    background-attachment: fixed;
}

#operation .operation-wrap {
    max-width: 1300px;
    width: 95%;
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 20px;
}

#operation .operation-box {
    flex: 1 0 0;
    display: flex;
    aspect-ratio: 31 / 36;
    box-sizing: border-box;
    padding: 40px 0;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    border-radius: 12px;
    background: #FFF;
    position: relative;
}

#operation .operation-box .num {
    display: flex;
    width: 60px;
    aspect-ratio: 1 / 1;
    justify-content: center;
    align-items: center;
    color: #FFF;
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    line-height: 100%; /* 32px */
    letter-spacing: -0.8px;
    background: #00693E;
    position: absolute;
    left: 30px;
    top: 0;
}

#operation .operation-box .num::after {
    content: "";
    width: 100%;
    height: 10px;
    position: absolute;
    left: 0;
    bottom: -9.5px;
    background: url(../img/renewal_2608/num-vector.png);
    background-size: cover;
    background-position: center center !important;
}

#operation .operation-box img {
    max-width: 160px;
    width: 60%;
}

#operation .operation-box .box-div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: #505050;
    text-align: center;
    font-size: 20px;
    font-weight: 400;
    line-height: 150%; /* 30px */
    letter-spacing: -0.5px;
}

#operation .operation-box .box-div p {
    color: #111;
    text-align: center;
    font-family: 'KMU80';
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 160%; /* 51.2px */
    letter-spacing: -0.8px;
}

#operation .operation-box .box-div small {
    color: #999;
    font-size: 14px;
    font-weight: 400;
    line-height: 155%;
    letter-spacing: -0.35px;
}


/* story */
#story {
    width: 100%;
    display: flex;
    padding: 120px 0;
    flex-direction: column;
    align-items: center;
    gap: 60px;
    align-self: stretch;
    background: #F5F3ED;
    position: relative;
}

/* 영상이 원으로 잘려 보이다가 스크롤에 따라 화면 전체로 커진다 (진행은 renewal_2608.js) */
#story .story-wrap {
    width: 100%;
    /* 원이 커지는 데 쓸 스크롤 거리.
       모바일은 주소창이 접히면서 vh 가 변해 스크롤 구간이 흔들리므로 svh 를 쓴다 */
    height: 200vh;
    height: 200svh;
}

#story .story-sticky {
    position: sticky;
    top: 0;
    display: flex;
    width: 100%;
    height: 100vh;
    height: 100svh;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

#story .story {
    position: relative;
    display: flex;
    /* 시작 지름. JS 가 이 값을 재서 애니메이션 시작점으로 쓴다.
       좁은 화면에서 화면 밖으로 나가지 않도록 80vw 로 한 번 더 제한 */
    width: min(500px, 80vw);
    height: min(500px, 80vw);
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    overflow: hidden;
}

#story .story iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    /* YouTube 는 플레이어가 일정 크기(약 200px) 아래면 렌더를 포기하고 검게 나온다.
       그래서 크기는 크게 고정하고 renewal_2608.js 가 scale 로 줄여서 맞춘다.
       중앙 정렬을 transform 이 아니라 margin 으로 하는 이유는
       GSAP 이 scale 을 넣을 때 transform 전체를 덮어쓰기 때문 */
    width: 1280px;
    height: 720px;
    margin: -360px 0 0 -640px;
    border: 0;
}


/* growth */
#growth {
    width: 100%;
    background: url(../img/renewal_2608/growth-bg.png);
    padding-top: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
    overflow: hidden;
    margin-bottom: -2px;
    z-index: 2;
}

#growth .tit-div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

#growth .tit-div img {
    max-width: 528px;
    width: 70%;
}

#growth .growth-wrap {
    width: 100%;
    display: flex;
    align-items: flex-end;
    position: relative;
}

.point-tit {
    display: flex;
    box-sizing: border-box;
    padding: 5px 20px;
    justify-content: center;
    align-items: center;
    gap: 12px;
    border-radius: 12px;
    background: #FFF;
    color: #00693E;
    text-align: center;
    font-size: 36px;
    font-weight: 700;
    line-height: 160%; /* 57.6px */
    letter-spacing: -0.9px;
    position: relative;
}

#growth .point-tit {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
}

.point-logo {
    width: 187px;  
}

.point-tit::before {
    content: "";
    position: absolute;
    width: 15px;
    aspect-ratio: 3 / 8;
    left: -14.5px;
    top: 50%;
    transform: translateY(-50%);
    background: url(../img/renewal_2608/growth-ellipse-l.png);
    background-size: cover !important;
}

.point-tit::after {
    content: "";
    position: absolute;
    width: 15px;
    aspect-ratio: 3 / 8;
    right: -14.5px;
    top: 50%;
    transform: translateY(-50%);
    background: url(../img/renewal_2608/growth-ellipse-r.png);
    background-size: cover !important;
}

#growth .growth-item {
    flex: 1 0 0;
    display: flex;
    height: 183px;
    padding: 40px 0;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    color: rgba(0, 105, 62, 0.50);
    text-align: center;
    font-size: 40px;
    font-weight: 700;
    line-height: 120%; /* 48px */
    letter-spacing: -1px;
    border-radius: 40px 40px 0 0;
    background: #F5F3ED;
    position: relative;
}

#growth .growth-item .year {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    color: #00693E;
    text-align: center;
    font-family: 'Roboto';
    font-size: 32px;
    font-weight: 600;
    line-height: 138%; /* 44.16px */
    letter-spacing: -0.8px;
}

#growth .growth-item .year hr {
    flex: 1 0 0;
    height: 1px;
    background: rgba(0, 0, 0, 0.50);
    border-bottom: 1px solid rgba(0, 0, 0, 0.50);
}

#growth .growth-item.two {
    height: 244px;
}

#growth .growth-item.three {
    height: 280px;
}

#growth .growth-item.four {
    height: 358px;
}

#growth .growth-item.five {
    height: 411px;
}

#growth .growth-item.six {
    height: 515px;
    background: linear-gradient(180deg, #FBCC34 0%, #F5F3ED 75%);
    color: #E65303;
    text-align: center;
    font-size: 60px;
    font-weight: 800;
    line-height: 120%; /* 72px */
    letter-spacing: -1.5px;
}

#growth .growth-item small {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 124px;
    color: #7E6159;
    font-size: 14px;
    font-weight: 400;
    line-height: 110%;
    letter-spacing: -0.35px;
    white-space: nowrap;
}



/* sale */
#sale {
    width: 100%;
    display: flex;
    padding: 100px 0;
    flex-direction: column;
    align-items: center;
    gap: 70px;
    background: #F5F3ED;
    overflow: hidden;
}

#sale .green-point {
    font-size: 100px;
    font-weight: 900;
    line-height: 100%; /* 100px */
    letter-spacing: -2.5px;
}

#sale .sale-container {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 70px;
}

#sale .sale-wrap {
    max-width: 1300px;
    width: 90%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

#sale .sale-circle {
    width: 480px;
    aspect-ratio: 1 / 1;
    border-radius: 500px;
    background: rgba(0, 140, 67, 0.60);
    position: relative;
    z-index: 5;
}

#sale .sale-circle-inner {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 500px;
    border: 15px solid #008C43;
    background: linear-gradient(180deg, #FFF 0%, #FFF1C8 49.04%, #FFF1C7 50%, #F7D775 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 75px;
    overflow: hidden;
    position: relative;
    z-index: 3;
}

#sale .sale-circle-inner .g {
    color: #00693E;
    text-align: center;
    font-size: 32px;
    font-weight: 600;
    line-height: 160%; /* 51.2px */
    letter-spacing: -0.8px;
}

#sale .sale-circle-inner .sale {
    color: #111;
    font-size: 40px;
    font-weight: 700;
    line-height: 140%; /* 56px */
    letter-spacing: -1px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
}

#sale .sale-circle-inner .sale-num {
    font-size: 86px;
    font-weight: 800;
    line-height: 100%; /* 86px */
    letter-spacing: -2.15px;
    background: linear-gradient(180deg, #323232 0%, #5F5F5F 48.56%, #000 50%, #000 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#sale .sale-circle-inner small {
    color: rgba(34, 34, 34, 0.70);
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    line-height: 160%; /* 28.8px */
    letter-spacing: -0.45px;
    margin-top: 17px;
}

#sale .sale-char {
    width: 75%;
    position: absolute;
    left: 50%;
    bottom: -15px;
    transform: translateX(-50%);
}

.bg-full {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 500px;
  z-index: 2;
}

.wave01 {
  transform: scale(1.2);
  background: #008C43;
  opacity: 0.2;
}

.wave02 {
  transform: scale(1.08);
  background: #008C43;
  opacity: 0.5;
}

#sale .sale-swiper {
    width: 100%;
    position: absolute;
    left: 0;
    top: 100px;
    display: flex;
    flex-direction: column;
    gap: 47.5px;
}

#sale .sale-swiper .swiper-slide {
    width: 310px;
}

#sale .sale-swiper img {
    width: 100%;
    filter:
        drop-shadow(0 36px 22px rgba(122, 119, 113, 0.05))
        drop-shadow(0 16px 16px rgba(122, 119, 113, 0.09))
        drop-shadow(0 4px 9px rgba(122, 119, 113, 0.10));
    border-radius: 12px;
}

#sale .nav-btn {
    width: 72px;
    background: #00693E;
}


/* proof */
#proof {
    width: 100%;
    padding: 60px;
    background: #F5F3ED;
    position: relative;
    z-index: 2;
    overflow-x: clip;
    overflow-y: visible;
}

#proof .proof-bg-img.r {
    max-width: 400px;
    width: 30%;
    position: absolute;
    right: -110px;
    top: -10px;
} 

#proof .proof-bg-img.l {
    max-width: 550px;
    width: 40%;
    position: absolute;
    left: -189px;
    bottom: -233px;
} 

#proof .proof-inner {
    width: 100%;
    display: flex;
    padding: 100px 0;
    flex-direction: column;
    align-items: center;
    gap: 60px;
    border-radius: 20px;
    background: #00693E;
}

#proof .tit-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.st-sub-txt {
    color: rgba(255, 255, 255, 0.70);
    text-align: center;
    font-size: 24px;
    font-weight: 400;
    line-height: 160%; /* 38.4px */
    letter-spacing: -0.6px;
}

#proof .proof-wrap {
    max-width: 1282px;
    width: 93%;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

#proof .proof-item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

#proof .proof-box {
    width: 640px;
    display: flex;
    align-items: stretch;
    border-radius: 12px;
    background: #FFF;
    box-shadow: 10px 40px 40px 0 rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

#proof .proof-item.first {
    gap: 60px;
}

#proof .proof-item.second {
    gap: 48px;
    justify-content: flex-end;
}

#proof .proof-item.third {
    gap: 50px;
}

#proof .proof-item.fourth {
    gap: 45px;
    justify-content: flex-end;
}

#proof .proof-box-img {
    width: 240px;
    aspect-ratio: 3 / 2;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFF;
    text-align: center;
    text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    font-size: 32px;
    font-weight: 700;
    line-height: 125%; /* 40px */
    letter-spacing: -0.8px;
    position: relative;
}

#proof .proof-box-img span {
    z-index: 3;
}

#proof .proof-box-img img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#proof .proof-box-inner {
    flex: 1 0 0;
    display: flex;
    box-sizing: border-box;
    padding: 0 30px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
}

#proof .proof-div {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #333;
    font-size: 24px;
    font-weight: 600;
    line-height: 130%; /* 31.2px */
    letter-spacing: -0.6px;
}

#proof .proof-div .sale {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    color: #FF6822;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    line-height: 150%; /* 36px */
    letter-spacing: -0.6px;
}

#proof .proof-div .sale-num {
    color: #FF6822;
    text-align: center;
    text-wrap-style: balance;
    font-family: 'Roboto';
    font-size: 34px;
    font-weight: 700;
    line-height: 125%; /* 42.5px */
    letter-spacing: -0.85px;
}

#proof .line-txt {
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: rgba(255, 255, 255, 0.80);
    font-family: 'KMU80';
    font-size: 96px;
    font-weight: 900;
    line-height: 105%; /* 100.8px */
    letter-spacing: -2.4px;
    color: transparent;
    /* 스크롤하면 왼쪽부터 흰색이 차오른다.
       글자에 그라데이션을 클리핑해두고 JS 는 경계 위치만 옮긴다.
       기본값이 0% 라서 효과 전 모습은 지금(테두리만)과 같다 */
    background-image: linear-gradient(90deg, #FFF 0%, rgba(255, 255, 255, 0) 0%);
    -webkit-background-clip: text;
    background-clip: text;
}


/* menu */
#menu {
    display: flex;
    padding: 100px 0;
    flex-direction: column;
    align-items: center;
    gap: 60px;
    background: #F5F3ED;
    overflow: hidden;
}

#menu .tit-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

#menu .st-sub-txt {
    color: #585B59;
}

/* swiper 로 바뀌어 한 줄로 흐른다. 폭은 js 의 slidesPerView 가 정한다 */
#menu .menu-wrap {
    width: 100%;
    overflow: hidden;
}

#menu .menu-wrap .swiper-wrapper {
    align-items: stretch;
}

#menu .menu-box {
    height: auto; /* 슬라이드끼리 높이를 맞춘다 */
    display: flex;
    padding: 40px 10px;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 24px;
    background: #FFF;
}

/* loop 를 쓰면 swiper 가 슬라이드 순서를 바꾸므로 nth-child 로는 색이 흔들린다.
   php 가 찍어준 순번을 쓴다 */
#menu .menu-box[data-odd="1"] {
   background: #E8F0DD; 
}

#menu .menu-box img {
    max-width: 220px;
    width: 75%;
}

#menu .menu-box-div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: #505050;
    text-align: center;
    font-size: 20px;
    font-weight: 400;
    line-height: 150%; /* 30px */
    letter-spacing: -0.5px;
}

#menu .menu-box-div big {
    color: #333;
    font-family: 'KMU80';
    font-size: 28px;
    font-weight: 900;
    line-height: 150%; /* 42px */
}

#menu .menu-popup-open {
    display: flex;
    box-sizing: border-box;
    padding: 20px 40px;
    justify-content: center;
    align-items: center;
    gap: 12px;
    border-radius: 100px;
    background: #00693E;
    box-shadow: 23px 116px 33px 0 rgba(0, 0, 0, 0.00), 15px 74px 30px 0 rgba(0, 0, 0, 0.01), 8px 42px 25px 0 rgba(0, 0, 0, 0.05), 4px 18px 19px 0 rgba(0, 0, 0, 0.09), 1px 5px 10px 0 rgba(0, 0, 0, 0.10);
    color: #FFF;
    font-family: 'KMU80';
    font-size: 28px;
    font-weight: 900;
    line-height: 138%; /* 38.64px */
    letter-spacing: -0.7px;
    transition: 0.15s;
    cursor: pointer;
}

#menu .menu-popup-open:hover {
    background: #003220;
}

/* 전체 메뉴 팝업 */
.modal-open {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    height: 100svh;
    z-index: 9999;
    box-sizing: border-box;
    padding: 80px 40px 40px;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.75);
}

.modal-open.show {
    display: flex;
}

.modal-open .modal-inner {
    max-width: 100%;
    max-height: 100%;
    display: flex;
}

.modal-open .modal-inner img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 12px;
}

.modal-open .modal-close {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    border: 0;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.15);
    transition: 0.15s;
    cursor: pointer;
}

.modal-open .modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
}


/* sticky-section */
#sticky-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}

#sticky-section .sticky-hold {
    position: absolute;
    left: 0;
    top: 35px;;
    bottom: 0;
    z-index: 10;
    pointer-events: none;
}

/* sticky-contact */
#sticky-contact {
    position: sticky;
    top: 115px;
    pointer-events: auto;
    display: flex;
    width: 300px;
    height: 710px;
    padding: 40px 30px;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    border-radius: 0 20px 20px 0;
    background: #00693E;
    box-shadow: 40px 203px 58px 0 rgba(0, 0, 0, 0.00), 25px 130px 53px 0 rgba(0, 0, 0, 0.01), 14px 73px 45px 0 rgba(0, 0, 0, 0.05), 6px 33px 33px 0 rgba(0, 0, 0, 0.09), 2px 8px 18px 0 rgba(0, 0, 0, 0.10);
}

#sticky-contact .sticky-tab-div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
}

#sticky-contact .sticky-tab-div>p {
    color: #FFF;
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    line-height: 150%; /* 24px */
    letter-spacing: -0.4px;
}

#sticky-contact .sticky-tab-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}

#sticky-contact .sticky-tab {
    width: 100%;
    display: flex;
    height: 60px;
    padding: 0 20px;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.50);
    background: rgba(0, 105, 62, 0.10);
    cursor: pointer;
    transition: 0.15s;
    color: #FFF;
    text-align: center;
    font-family: 'KMU80';
    font-size: 20px;
    font-weight: 900;
    line-height: 138%; /* 27.6px */
    letter-spacing: -0.2px;
}

#sticky-contact .sticky-tab:hover, #sticky-contact .sticky-tab.active {
    background: #FFF;
    color: #00693E; 
}

#sticky-contact hr {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.16);
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

#sticky-contact .form {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

#sticky-contact .input-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#sticky-contact .input {
    flex: 1 0 0;
}

#sticky-contact .item {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

#sticky-contact label:not(.checkbox-label, .agree) {
    width: 44px;
    color: #FFF;
}

#sticky-contact input[type="text"] {
    width: 100%;
    display: flex;
    height: 38px;
    padding: 8px 10px;
    align-items: center;
    border-radius: 4px;
    border: 0 solid rgba(255, 255, 255, 0.40);
    background: #00492B;
    color: rgba(255, 255, 255, 0.90);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px; /* 150% */
    letter-spacing: -0.4px;
}

#sticky-contact input[type="text"]::placeholder {
    color: rgba(255, 255, 255, 0.40);
    font-size: 16px;
    font-weight: 300;
    line-height: 24px; /* 150% */
    letter-spacing: -0.4px;
}

#sticky-contact input[type="text"]:focus {
    border: 1px solid #6AFFC2;
}

/* 지역 선택 (시/도 + 시/군/구) */
#sticky-contact .region-select {
    display: flex;
    gap: 8px;
    min-width: 0;
}

#sticky-contact .region-select select {
    flex: 1 1 0;
    min-width: 0;
    height: 38px;
    padding: 8px 20px 8px 8px;
    text-overflow: ellipsis;
    border: 0 solid rgba(255, 255, 255, 0.40);
    border-radius: 4px;
    background-color: #00492B;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M13.3334 5.33342L8.00008 10.6667L2.66675 5.33342' stroke='%23FFFFFF' stroke-opacity='0.5' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 5px center;
    background-size: 12px;
    color: rgba(255, 255, 255, 0.90);
    font-size: 14px;
    font-weight: 400;
    line-height: 24px; /* 150% */
    letter-spacing: -0.4px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}


#sticky-contact .region-select select:invalid {
    color: rgba(255, 255, 255, 0.40);
    font-weight: 300;
}

#sticky-contact .region-select select:disabled {
    color: rgba(255, 255, 255, 0.25);
    cursor: default;
}

#sticky-contact .region-select select:focus {
    border: 1px solid #6AFFC2;
}

#sticky-contact .region-select option {
    color: #111;
    background: #FFF;
}

#sticky-contact .agree-wrap {
    width: 100%;
}

#sticky-contact .round-checkbox {
    width: 24px;
    height: 24px;
    background: #FFF;
    border: 1px solid #FFF;
}

#sticky-contact .round-checkbox:checked::before {
  font-size: 100%;
  color: #111;
  position: relative;
}

#sticky-contact .round-checkbox:checked {
  background-image: url("../img/check-light.png");
  background-size: 15px !important;
  background-position: center center !important;
  background-color: #008C43;
  background-repeat: no-repeat;
  color: #FFF;
  border: none;
}

#sticky-contact .agree-wrap .agree {
    color: #FFF;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px; /* 150% */
    letter-spacing: -0.4px;
}

#sticky-contact .agree-wrap .agree-open {
    font-weight: 600;
}

#sticky-contact .g-btn {
    width: 100%;
    display: flex;
    padding: 15px 5px 15px 10px;
    justify-content: center;
    align-items: center;
    gap: 6px;
    border-radius: 100px;
    border: 2px solid #37E49D;
    background: radial-gradient(90.91% 100% at 50.22% 0%, #089B5F 0%, #000 33.82%);
    color: #37E49D;
    font-family: 'KMU80';
    font-size: 22px;
    font-weight: 900;
    line-height: 138%; /* 30.36px */
    letter-spacing: -0.55px;
}

/* 1150 이하에서만 쓰는 폼 열기 버튼 */
#sticky-contact .sticky-toggle {
    display: none;
    width: 100%;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: none;
    color: #FFF;
    font-family: 'KMU80';
    font-size: 18px;
    font-weight: 900;
    line-height: 138%;
    letter-spacing: -0.45px;
    cursor: pointer;
}

#sticky-contact .sticky-toggle svg {
    transition: transform 0.2s;
}

#sticky-contact.is--open .sticky-toggle svg {
    transform: rotate(180deg);
}

#sticky-contact .g-btn:hover {
    box-shadow: 0 0 12px 0 #089B5F, 23px 116px 33px 0 rgba(0, 0, 0, 0.00), 15px 74px 30px 0 rgba(0, 0, 0, 0.01), 8px 42px 25px 0 rgba(0, 0, 0, 0.05), 4px 18px 19px 0 rgba(0, 0, 0, 0.09), 1px 5px 10px 0 rgba(0, 0, 0, 0.10);
}


/* recommend */
.recommend {
    width: 100%;
    display: flex;
    padding: 120px 60px 120px 360px;
    flex-direction: column;
    align-items: center;
    gap: 50px;
    align-self: stretch;
    background: url(../img/renewal_2608/recommend-bg.png);
}

.recommend.second {
    background: url(../img/renewal_2608/recommend-bg2.png);
    background-position: bottom center !important;
}

.recommend.third {
    background: url(../img/renewal_2608/recommend-bg3.png);
    background-position: bottom center !important;
    margin-top: -2px;
}

.recommend .recommend-tit-div {
    max-width: 901px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px; 
}

.recommend .st-tit {
    line-height: 120%;
}

.recommend .recommend-sub-tit {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    gap: 24px;
    color: #FFF;
    text-align: center;
    font-family: 'KMU80';
    font-size: 28px;
    font-weight: 900;
    line-height: 125%; /* 35px */
    letter-spacing: -0.7px;
}

.recommend .recommend-sub-tit span {
    padding: 4px 12px;
    white-space: nowrap;
}

.recommend .recommend-sub-tit hr {
    flex: 1 0 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.70);
}

.recommend .recommend-wrap {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.recommend .recommend-item {
    max-width: 260px;
    flex: 1 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.recommend .recommend-item img {
    width: 46.5%;
}

.recommend .recommend-item p {
    color: #FFF;
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    line-height: 150%; /* 36px */
    letter-spacing: -0.6px;
}

.recommend .st-tit.column {
    flex-direction: column;
}


/* posibility */
#posibility {
    width: 100%;
    background: #DCE5DB;
    display: flex;
    padding: 120px 0 120px 300px;
    flex-direction: column;
    align-items: center;
    gap: 60px;
    overflow: hidden;
}

#posibility .st-tit {
    flex-direction: column;
}

#posibility .posibility-swiper {
    width: 100%;
    overflow: hidden;
    position: relative;
}

#posibility .posibility-swiper::before,
#posibility .posibility-swiper::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100px;
    z-index: 2;
    pointer-events: none;
}

#posibility .posibility-swiper::before {
    left: 0;
    background: linear-gradient(90deg, #DCE5DB 15%, rgba(220, 229, 219, 0.00) 100%);
}

#posibility .posibility-swiper::after {
    right: 0;
    background: linear-gradient(90deg, rgba(220, 229, 219, 0.00) 0%, #DCE5DB 85%);
}

#posibility .posibility-swiper .swiper-wrapper {
    transition-timing-function: linear;
}

#posibility .posibility-swiper .swiper-slide {
    width: 280px;
}

#posibility .posibility-swiper img {
    width: 100%;
}


/* location-map */
#location-map {
    width: 100%;
    display: flex;
    padding: 120px 0 120px 300px;
    flex-direction: column;
    align-items: center;
    gap: 60px;
    background: #F5F3ED;
    overflow: hidden;
}

#location-map .tit-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

#location-map .st-tit {
    flex-direction: column;
}

#location-map .st-sub-txt {
    color: #333;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

#location-map .st-sub-txt small {
    color: #585B59;
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    line-height: 160%; /* 25.6px */
    letter-spacing: -0.4px;
}

#location-map .location-container {
    max-width: 900px;
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

#location-map .location-tab-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

#location-map .location-tab {
    display: flex;
    max-width: 200px;
    width: 33.3%;
    height: 68px;
    padding: 0 20px;
    justify-content: center;
    align-items: center;
    border-top: 2px solid #D3D3D3;
    border-bottom: 2px solid #D3D3D3;
    color: #99AB9C;
    text-align: center;
    font-family: 'KMU80';
    font-size: 24px;
    font-style: normal;
    font-weight: 900;
    line-height: 138%; /* 33.12px */
    letter-spacing: -0.24px;
    cursor: pointer;
    transition: 0.15s;
}

#location-map .location-tab:hover, #location-map .location-tab.active {
    border-color: #00693E;
    color: #00693E;
}

#location-map .location-img, #location-map .location-img img {
    width: 100%;
}

#location-map .location-item {
    display: none;
}

#location-map .location-item.active {
    display: block;
}


/* reduce */
#reduce {
    width: 100%;
    display: flex;
    padding: 0 60px 60px 360px;
    flex-direction: column;
    align-items: center;
    gap: 60px;
    margin-top: -2px;
    background: #222;
    overflow: hidden;
}

#reduce .reduce-inner {
    width: 100%;
    border-radius: 20px;
    background: #F5F3ED;
    display: flex;
    padding: 100px 0 50px;
    flex-direction: column;
    align-items: center;
    gap: 60px;
    position: relative;
    overflow: hidden;
}

#reduce .rise-arrow {
    max-width: 260px;
    width: 20%;
    position: absolute;
    left: 20px;
    top: 30px;
}

#reduce .reduce-arrow {
    max-width: 260px;
    width: 20%;
    position: absolute;
    right: 20px;
    top: 137px;
}

#reduce .tit-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    z-index: 5;
}

#reduce .st-tit {
    flex-direction: column;
}

#reduce .st-sub-txt {
    color: #333;
}

#reduce .reduce-wrap {
    width: 95%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    z-index: 5;
}

#reduce .reduce-box {
    flex: 1 0 0;
    aspect-ratio: 25 / 22;
    border-radius: 12px;
    overflow: hidden;
    background-position: center center !important;
    background-size: cover !important;
    display: flex;
    align-items: flex-end;
    /* 아래 ::before 를 얹기 위한 기준 */
    position: relative;
}

/* 배경만 줌하려고 같은 이미지를 한 겹 깐다.
   background: inherit 라 .first ~ .fourth 규칙을 건드릴 필요가 없다.
   z-index: -1 은 부모 배경 위 · 글자 아래에 놓인다 */
#reduce .reduce-box::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: inherit;
    background-position: center center;
    background-size: cover;
    transition: transform 0.4s ease;
}

@media(hover: hover) {
    #reduce .reduce-box:hover::before {
        transform: scale(1.1);
    }
}

#reduce .reduce-box.first {
    background: url(../img/renewal_2608/reduce-box-1.png);
}

#reduce .reduce-box.second {
    background: url(../img/renewal_2608/reduce-box-2.png);
}

#reduce .reduce-box.third {
    background: url(../img/renewal_2608/reduce-box-3.png);
}

#reduce .reduce-box.fourth {
    background: url(../img/renewal_2608/reduce-box-4.png);
}

#reduce .reduce-box p {
    display: flex;
    width: 100%;
    padding: 10px;
    justify-content: center;
    align-items: center;
    background: linear-gradient(180deg, rgba(17, 17, 17, 0.00) 0%, rgba(17, 17, 17, 0.70) 50%);
    color: #FFF;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    line-height: 160%; /* 32px */
    letter-spacing: -0.5px;
}


/* increase */
#increase {
    width: 100%;
    display: flex;
    padding: 100px 0 20px 300px;
    flex-direction: column;
    align-items: center;
    gap: 60px;
    background: #222;
    margin-top: -2px;
    position: relative;
    overflow: hidden;
}

#increase .st-tit {
    flex-direction: column;
    position: relative;
}

#increase .increase-swiper {
    width: 100%;
    overflow: hidden;
    padding: 3.5% 0 10%; 
    position: relative;
}

#increase .increase-swiper::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100px;
    z-index: 2;
    pointer-events: none;
}

#increase .increase-swiper::before {
    left: 0;
    background: linear-gradient(90deg, #232323 15%, rgba(17, 17, 17, 0.00) 100%);
}

#increase .increase-swiper .swiper-slide {
    position: relative;
    z-index: 1;
    transform: scale(1);
    opacity: 0.35;
    transition: transform 0.5s, opacity 0.5s;
}

#increase .increase-swiper .swiper-slide-active {
    z-index: 2;
    transform: scale(1.2);
    opacity: 1;
}

#increase .increase-swiper img {
    width: 100%;
    filter:
        drop-shadow(0 42px 25px rgba(122, 119, 113, 0.05))
        drop-shadow(0 19px 19px rgba(122, 119, 113, 0.09))
        drop-shadow(0 5px 10px rgba(122, 119, 113, 0.10));
}

#increase .increase-arrow {
    max-width: 360px;
    width: 40%;
    position: absolute;
    right: 115.613px;
    bottom: 0;
    z-index: 3;
}


@media(max-width: 1500px) {
    #time .time-circle {
        max-width: 650px;
    }
    #time .time-circle-inner p {
        font-size: 40px;
        letter-spacing: -1px;
    }
    #time .time-circle-inner big {
        font-size: 80px;
        letter-spacing: -2px;
    }
    #time .time-circle-inner big .gold-point {
        font-size: 104px;
        letter-spacing: -0.26px;
    }
    #time .time-img.r {
        top: 20px;
    }
    #time .time-img.l {
        top: 300px;
    }
    #history .history-list ul {
        gap: 100px;
    }
    #history .history-list dt {
        font-size: 48px;
        letter-spacing: -1.2px;
    }
    #history .history-list dd p {
        font-size: 18px;
        letter-spacing: -0.45px;
    }
    #growth .growth-item {
        font-size: 32px;
        letter-spacing: -0.8px;
    }
    #growth .growth-item .year {
        font-size: 28px;
        letter-spacing: -0.7px;
    }
    #growth .growth-item.six {
        font-size: 48px;
        letter-spacing: -1.2px;
    }
    #proof .line-txt {
        font-size: 88px;
        letter-spacing: -2.2px;
    }
    .recommend {
        padding: 120px 20px 120px 320px;
    }
    .recommend .recommend-item p {
        font-size: 20px;
        letter-spacing: -0.5px;
    }
    #reduce {
        padding: 0 20px 60px 320px;
    }
}

@media(max-width: 1400px) {
    #operation .operation-box .num {
        left: 20px;
        width: 55px;
        font-size: 28px;
        letter-spacing: -0.7px;
    }
    #operation .operation-box .box-div {
        font-size: 18px;
        letter-spacing: -0.45px;
    }
    #operation .operation-box .box-div small {
        font-size: 12px;
        letter-spacing: -0.3px;
    }
    #operation .operation-box .box-div p {
        font-size: 28px;
        letter-spacing: -0.7px;
    }
    #proof .line-txt {
        font-size: 80px;
        letter-spacing: -2px;
    }
}

@media(max-width: 1280px) {
    #hero .arch-txt {
        max-width: 350px;
    }
    #hero .hero-tit {
        font-size: 80px;
        letter-spacing: -2px;
    }
    #hero .hero-tit .gold-point {
        font-size: 104px;
        letter-spacing: -2.6px;
    }
    #hero .triple-crown-tit span {
        font-size: 24px;
        letter-spacing: -0.6px;
    }
    #hero .triple-crown-box {
        gap: 24px;
    }
    #hero .hero-gif {
        width: 30.08%;
        bottom: 20.4% !important;
    }
    #time .time-circle {
        max-width: 600px;
        padding: 20px;
    }
    #time .time-img.r {
        right: -40px;
    }
    #time .time-img.l {
        left: -55px;
    }
    #time .time-circle-inner {
        border-width: 15px;
    }
    #time .time-circle-inner p {
        font-size: 32px;
        letter-spacing: -0.8px;
    }
    #time .time-circle-inner big {
        font-size: 72px;
        letter-spacing: -1.8px;
    }
    #time .time-circle-inner big .gold-point {
        font-size: 88px;
        letter-spacing: -0.22px;
    }
    #history .history-list ul {
        gap: 80px;
    }
    #history .history-list dt {
        font-size: 40px;
        letter-spacing: -1px;
    }
    #number {
        padding: 100px 0;
    }
    #number .number-char {
        width: 400px;
    }
    #number .number-wrap {
        gap: 40px;
    }
    #number .number-desc {
        font-size: 24px;
        letter-spacing: -0.6px;
    }
    #number .number-desc span {
        font-size: 48px;
        letter-spacing: -1.2px;
    }
    #with .with-wrap {
        gap: 40px;
    }
    #with .with-text .wrapper {
        font-size: 100px;
        letter-spacing: -2.5px;
    }
    #operation {
        padding: 20px;
    }
    #operation .operation-box {
        padding: 30px 0;
    }
    #operation .operation-box .num {
        width: 50px;
        font-size: 24px;
        letter-spacing: -0.6px;
    }
    #operation .operation-box .box-div {
        font-size: 16px;
        letter-spacing: -0.4px;
    }
    #operation .operation-box .box-div small {
        font-size: 10px;
        letter-spacing: -0.25px;
    }
    #operation .operation-box .box-div p {
        font-size: 24px;
        letter-spacing: -0.6px;
    }
    #story {
        padding: 100px 0;
    }
    #sale .green-point {
        font-size: 88px;
        letter-spacing: -2.2px;
    }
    #growth .st-tit {
        flex-direction: column;
        gap: 12px;
    }
    #growth .growth-item {
        font-size: 28px;
        letter-spacing: -0.7px;
    }
    #growth .growth-item .year {
        font-size: 24px;
        letter-spacing: -0.6px;
    }
    #growth .growth-item.six {
        font-size: 40px;
        letter-spacing: -1px;
    }
    #growth .growth-item small {
        top: 100px;
    }
    .point-tit {
        font-size: 32px;
        letter-spacing: -0.8px;
    }
    .point-logo {
        width: 170px;
    }
    #sale .sale-circle {
        width: 430px;
    }
    #sale .sale-circle-inner .g {
        font-size: 28px;
        letter-spacing: -0.7px;
    }
    #sale .sale-circle-inner .sale {
        font-size: 32px;
        letter-spacing: -0.8px;
    }
    #sale .sale-circle-inner .sale-num {
        font-size: 80px;
        letter-spacing: -2px;
    }
    #sale .sale-circle-inner small {
        font-size: 16px;
        letter-spacing: -0.4px;
    }
    #proof {
        padding: 20px;
    }
    #proof .tit-wrap {
        gap: 32px;
    }
    .st-sub-txt {
        font-size: 20px;
        letter-spacing: -0.5px;
    }
    #proof .proof-box {
        width: 530px;
    }
    #proof .proof-box-img {
        width: 200px;
        font-size: 28px;
        letter-spacing: -0.7px;
    }
    #proof .proof-box-inner {
        padding: 0 20px;
    }
    #proof .proof-div, #proof .proof-div .sale {
        font-size: 20px;
        letter-spacing: -0.5px;
    }
    #proof .proof-div .sale-num  {
        font-size: 28px;
        letter-spacing: -0.7px;
    }
    #proof .line-txt {
        font-size: 72px;
        letter-spacing: -1.8px;
    }
    #proof .proof-item.first {
        gap: 30px;
    }
    #proof .proof-item.second {
        gap: 30px;
    }
    #proof .proof-item.third {
        gap: 35px;
    }
    #proof .proof-item.fourth {
        gap: 25px;
    }
    #menu .menu-box-div {
        font-size: 18px;
        letter-spacing: -0.45px;
    }
    #menu .menu-box-div big {
        font-size: 24px;
        letter-spacing: -0.6px;
    }
    #menu .menu-popup-open {
        font-size: 24px;
        letter-spacing: -0.6px;
    }
    #menu .menu-popup-open svg {
        width: 37px;
        height: auto;
    }
    #posibility .posibility-swiper .swiper-slide {
        width: 240px;
    }
    #posibility .posibility-swiper::before, #posibility .posibility-swiper::after {
        width: 75px;
    }
    #location-map .st-sub-txt small {
        font-size: 14px;
        letter-spacing: -0.35px;
    }
    #reduce .reduce-wrap {
        gap: 8px;
    }
    #reduce .reduce-box p {
        font-size: 18px;
        letter-spacing: -0.45px;
    }
}

@media(max-width: 1150px) {
    #sticky-section .sticky-hold {
        width: calc(100% - 71px);
        right: 12px;
        top: 0;
        left: unset;
        bottom: 0;
    }
    #sticky-contact {
        width: 100%;
        height: auto;
        border-radius: 20px;
        padding: 12px;
        border-radius: 12px;
        gap: 12px;
        top: 12px;
    }
    #sticky-contact .sticky-tab-wrap {
        flex-direction: row;
        justify-content: center;
    }
    #sticky-contact .sticky-tab {
        flex: 1 0 0;
    }
    #sticky-contact .sticky-tab-div > p,
    #sticky-contact hr {
        display: none;
    }
    #sticky-contact .sticky-tab-wrap {
        flex-direction: row;
        gap: 8px;
    }
    #sticky-contact .sticky-tab {
        height: 44px;
        font-size: 18px;
        letter-spacing: -0.45px;
        border-radius: 8px;
        padding: 0 5px;
    }
    #sticky-contact .sticky-toggle {
        display: flex;
    }
    #sticky-contact .form {
        display: none;
        gap: 16px;
    }
    #sticky-contact.is--open .form {
        display: flex;
    }
    .recommend {
        padding: 160px 0 100px;
    }
    .recommend .recommend-sub-tit {
        width: 70%;
    }
    .recommend .recommend-wrap {
        width: 90%;
    }
    #posibility {
        padding: 100px 0;
    }
    #location-map {
        padding: 100px 0;
    }
    #reduce {
        padding: 0 20px 40px;
    }
    #increase {
        padding: 100px 0 40px;
    }
    #increase .increase-swiper::before {
        display: none;
    }
    #increase .increase-arrow {
        right: 60px;
    }
}

@media(max-width: 1100px) {
    #menu .menu-box {
        padding: 30px 10px;
    }
    .recommend .recommend-sub-tit {
        font-size: 24px;
        letter-spacing: -0.6px;
    }
    .recommend .recommend-item p {
        font-size: 18px;
        letter-spacing: -0.45px;
    }
}

@media(max-width: 1024px) {
    #history .history-inner {
        max-width: none;
        width: 90%;
    }
    #hero .hero-tit {
        font-size: 72px;
        letter-spacing: -1.8px;
    }
    #hero .hero-tit .gold-point {
        font-size: 96px;
        letter-spacing: -2.4px;
    }
    #number .number-char {
        width: 350px;
    }
    #number .number-wrap {
        gap: 30px;
    }
    #number .number-desc {
        font-size: 20px;
        letter-spacing: -0.5px;
    }
    #number .number-desc span {
        font-size: 40px;
        letter-spacing: -1px;
    }
    #number .number-desc small {
        font-size: 12px;
        letter-spacing: -0.3px;
        bottom: -15px;
    }
    #operation .operation-wrap {
        max-width: 700px;
        width: 90%;
        gap: 12px;
        flex-wrap: wrap;
    }
    #operation .operation-box {
        aspect-ratio: unset;
        width: calc(50% - 6px);
        flex: unset
    }
    #growth .growth-item {
        font-size: 24px;
        letter-spacing: -0.6px;
        padding: 30px 0;
        border-radius: 30px 30px 0 0;
    }
    #growth .growth-item .year {
        font-size: 20px;
        letter-spacing: -0.5px;
        gap: 12px;
    }
    #growth .growth-item.six {
        font-size: 32px;
        letter-spacing: -0.8px;
    }
    #growth .growth-item small {
        font-size: 12px;
        letter-spacing: -0.3px;
        top: 80px;
    }
    .point-tit {
        font-size: 28px;
        letter-spacing: -0.7px;
    }
    .point-logo {
        width: 160px;
    }
    .point-tit::before {
        width: 12px;
        left: -11px;
    }
    .point-tit::after {
        width: 12px;
        right: -11px;
    }
    #sale .sale-wrap {
        justify-content: center;
    }
    #sale .sale-swiper {
        position: static;
        gap: 30px;
    }
    #proof .line-txt {
        font-size: 64px;
        letter-spacing: -1.6px;
    }
    #with .with-text .wrapper {
        font-size: 88px;
        letter-spacing: -2.2px;
    }
}

@media(max-width: 900px) {
    #hero .hero-container {
        height: auto;
        padding: 120px 0;
    }
    #hero .arch-txt {
        max-width: 280px;
    }
    #hero .hero-tit {
        font-size: 64px;
        letter-spacing: -1.6px;
        flex-direction: column;
        gap: 4px;
    }
    #hero .hero-tit>span {
        gap: 12px;
    }
    #hero .hero-tit .gold-point {
        font-size: 88px;
        letter-spacing: -2.4px;
    }
    #hero .triple-crown-tit span {
        font-size: 20px;
        letter-spacing: -0.5px;
    }
    #hero .hero-bottom {
        max-width: 600px;
    }
    #hero .prizes {
        width: 85%;
    }
    #hero .pc-prizes {
        display: none;
    }
    #hero .mo-prizes {
        display: block;
    }
    #hero .triple-crown {
        padding: 20px 10px 10px;
    }
    #hero .triple-crown-box {
        height: auto;
        padding: 40px 0 30px;
        gap: 12px;
        flex-direction: column;
    }
    #hero .triple-crown-box hr {
        display: none;
    }
    #time .time-circle {
        max-width: 550px;
    }
    #time .time-circle-inner p {
        font-size: 28px;
        letter-spacing: -0.7px;
    }
    #time .time-circle-inner big {
        font-size: 64px;
        letter-spacing: -1.6px;
        gap: 12px;
    }
    #time .time-circle-inner big .gold-point {
        font-size: 80px;
        letter-spacing: -0.2px;
    }
    #number {
        gap: 50px;
    }
    #number .number-char {
        width: 300px;
    }
    #number .number-desc {
        font-size: 18px;
        letter-spacing: -0.45px;
        gap: 5px;
    }
    #number .number-desc span {
        font-size: 32px;
        letter-spacing: -0.8px;
    }
    #number .number-desc small {
        font-size: 10px;
        letter-spacing: -0.25px;
        bottom: -12px;
    }
    #with .with-circle-wrap {
        gap: 16px;
    }
    #with .with-text .wrapper {
        font-size: 72px;
        letter-spacing: -1.8px;
    }
    #operation .operation-inner {
        gap: 50px;
    }
    #story {
        gap: 50px;
    }
    #story .story-wrap {
        width: 90%;
        height: auto;
    }
    #story .story-sticky {
        position: static;
        display: block;
        height: auto;
        overflow: visible;
    }
    #story .story {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        border-radius: 12px;
    }
    #story .story iframe {
        position: static;
        width: 100%;
        height: 100%;
        margin: 0;
    }
    #growth {
        gap: 60px;
    }
    #growth .growth-item small {
        top: 120px;
    }
    #sale {
        gap: 50px;
    }
    #sale .green-point {
        font-size: 80px;
        letter-spacing: -2px;
    }
    #sale .sale-container {
        gap: 50px;
    }
    #sale .sale-circle-inner {
        border-width: 12px;
    }
    #sale .sale-swiper .swiper-slide {
        width: 250px;
    }
    #proof .proof-bg-img.r {
        right: -70px;
    }
    #proof .proof-bg-img.l {
        left: -120px;
        bottom: -183px;
    }
    #proof .proof-inner {
        gap: 50px;
    }
    .st-sub-txt {
        font-size: 18px;
        letter-spacing: -0.45px;
    }
    #proof .proof-box {
        width: 450px;
    }
    #proof .proof-box-img {
        width: 150px;
        font-size: 24px;
        letter-spacing: -0.6px;
    }
    #proof .proof-box-inner {
        padding: 10px 20px;
    }
    #proof .proof-div, #proof .proof-div .sale {
        font-size: 18px;
        letter-spacing: -0.45px;
    }
    #proof .proof-div .sale-num  {
        font-size: 24px;
        letter-spacing: -0.6px;
    }
    #proof .line-txt {
        font-size: 56px;
        letter-spacing: -1.4px;
    }
    .modal-open {
        padding: 70px 16px 16px;
    }
    .modal-open .modal-close {
        top: 14px;
        right: 14px;
        width: 40px;
        height: 40px;
    }
    .modal-open .modal-inner {
        width: 100%;
        height: 100%;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        /* 끝까지 스크롤했을 때 뒤 페이지가 따라 움직이지 않게 */
        overscroll-behavior: contain;
    }
    .modal-open .modal-inner img {
        max-width: none;
        max-height: none;
        width: auto;
        height: 100%;
        border-radius: 0;
    }
    #menu {
        gap: 50px;
    }
    #menu .tit-wrap {
        gap: 32px;
    }
    #menu .menu-popup-open {
        font-size: 20px;
        letter-spacing: -0.5px;
        padding: 15px 30px;
        gap: 8px;
    }
    #menu .menu-popup-open svg {
        width: 30px;
    }
    #sticky-contact .sticky-tab {
        height: 37px;
        font-size: 16px;
        letter-spacing: -0.4px;
    }
    #sticky-contact .sticky-toggle {
        font-size: 16px;
        letter-spacing: -0.4px;
    }
    #sticky-contact .g-btn {
        font-size: 18px;
        letter-spacing: -0.45px;
        padding: 10px 5px 10px 10px;
    }
    #sticky-contact .g-btn svg {
        width: 32px;
        height: 32px;
    }
    .point-tit {
        font-size: 24px;
        letter-spacing: -0.6px;
        border-radius: 6px;
        gap: 10px;
        padding: 5px 10px;
    }
    .point-logo {
        width: 140px;
        margin-right: -4px;
    }
    .point-tit::before {
        width: 10px;
        left: -9px;
    }
    .point-tit::after {
        width: 10px;
        right: -9px;
    }
    .recommend {
        gap: 40px;
    }
    .recommend .recommend-sub-tit {
        font-size: 20px;
        letter-spacing: -0.5px;
        gap: 12px;
    }
    .recommend .recommend-item {
        gap: 15px;
    }
    .recommend .recommend-item p {
        font-size: 16px;
        letter-spacing: -0.4px;
    }
    #posibility {
        gap: 50px;
    }
    #location-map {
        gap: 50px;
    }
    #location-map .tit-wrap {
        gap: 24px;
    }
    #location-map .location-tab {
        max-width: 150px;
    }
    #reduce .reduce-inner {
        gap: 50px;
    }
    #reduce .reduce-wrap {
        width: 90%;
        max-width: 650px;
        flex-wrap: wrap;
    }
    #reduce .reduce-box {
        flex: unset;
        width: calc(50% - 4px);
    }
    #increase {
        padding: 100px 0 20px;
        gap: 50px;
    }
    #increase .increase-swiper {
        padding: 5% 0 15%;
    }
}

@media(max-width: 800px) {
    #proof .line-txt {
        font-size: 48px;
        letter-spacing: -1.2px;
    }
}

@media(max-width: 768px) {
    #history .history-list dt {
        font-size: 32px;
        letter-spacing: -0.8px;
    }
    #history .history-list dd p {
        font-size: 14px;
        letter-spacing: -0.35px;
    }

    #number {
        padding: 80px 16px;
        gap: 40px;
    }
    #number .number-container {
        width: 100%;
    }
    #with {
        background: url(../img/renewal_2608/with-mo-bg.png);
    }
    #with .with-container {
        max-width: 600px;
    }
    #with .with-circle-wrap {
        gap: 12px;
    }
    #with .with-circle-inner, #with .with-txt-div {
        font-size: 24px;
        letter-spacing: -0.6px;
    }
    #with .with-circle-line {
        bottom: 60px;
    }
    #operation {
        padding: 16px;
    }
    #operation .operation-inner {
        padding: 80px 0;
        gap: 40px;
    }
    #story {
        padding: 80px 20px;
        gap: 40px;
    }
    #story .story-wrap {
        width: 100%;
    }
    #sale .green-point {
        font-size: 72px;
        letter-spacing: -1.8px;
    }
    #growth {
        padding-top: 80px;
        gap: 40px;
    }
    #growth .tit-div {
        gap: 32px;
    }
    #growth .growth-item {
        padding: 20px 0;
        border-radius: 20px 20px 0 0;
    }
    #sale {
        padding: 80px 0;
        gap: 50px;
    }
    #sale .sale-container {
        gap: 40px;
    }
    #sale .sale-swiper {
        gap: 16px;
    }
    #proof {
        padding: 16px;
    }
    #proof .tit-wrap {
        gap: 20px;
    }
    #proof .proof-inner {
        padding: 80px 0;
        gap: 40px;
    }
    #proof .line-txt {
        display: none;
    }
    #menu {
        padding: 80px 0;
        gap: 40px;
    }
    #menu .tit-wrap {
        gap: 24px;
    }
    #menu .menu-box {
        padding: 25px 10px;
        gap: 20px;
    }
    #menu .menu-box-div {
        gap: 8px;
    }
    .point-tit {
        font-size: 20px;
        letter-spacing: -0.5px;
    }
    .point-logo {
        width: 120px;
    }
    .recommend {
        padding: 160px 0 80px;
        gap: 32px;
    }
    .recommend .recommend-wrap {
        width: 75%;
        flex-wrap: wrap;
        gap: 20px;
    }
    .recommend .recommend-item {
        width: calc(50% - 10px);
        flex: unset;
    }
    .recommend .recommend-item {
        gap: 10px;
    }
    #posibility {
        padding: 80px 0;
        gap: 40px;
    }
    #posibility .posibility-swiper .swiper-slide {
        width: 220px;
    }
    #location-map {
        padding: 80px 0;
        gap: 40px;
    }
    #reduce {
        padding: 0 16px 16px;
    }
    #reduce .reduce-inner {
        padding: 100px 0;
        gap: 40px;
    }
    #reduce .rise-arrow {
        width: 30%;
        left: 1px;
        top: -5.03px;
    }
    #reduce .reduce-arrow {
        width: 30%;
        right: 10px;
        top: unset;
        bottom: -0.47px;
    }
    #reduce .tit-wrap {
        gap: 20px;
    }
    #increase {
        padding: 80px 0 40px;
        gap: 40px;
    }
}

@media(max-width: 750px) {
    #number .number-container {
        flex-direction: column;
        gap: 32px;
    }
    #number .number-char {
        max-width: 400px;
        width: 77%;
        order: 1;
    }
    #number .number-wrap {
        width: 100%;
        flex-direction: row;
        gap: 10px;
    }
    #number .number-wrap hr {
        width: 1px;
        height: 90%;
        border-right: 1px solid rgba(255, 255, 255, 0.35);
    }
    #number .number-wrap:first-child {
        order: 2;
    }
    #number .number-wrap:last-child {
        order: 3;
    }
}

@media(max-width: 650px) {
    #hero, #operation .operation-inner {
        background-attachment: unset;
    }
    #hero .hero-container {
        padding: 100px 0;
    }
    #hero .arch-txt {
        max-width: 220px;
    }
    #hero .hero-tit {
        font-size: 56px;
        letter-spacing: -1.4px;
        gap: 2px;
    }
    #hero .hero-tit>span {
        gap: 8px;
    }
    #hero .hero-tit .gold-point {
        font-size: 80px;
        letter-spacing: -2.2px;
    }
    #hero .hero-bottom {
        gap: 12px;
    }
    #hero .triple-crown {
        padding: 15px 10px 10px;
    }
    #hero .triple-crown-tit  {
        max-width: 295px;
    }
    #hero .triple-crown-tit span {
        font-size: 18px;
        letter-spacing: -0.45px;
    }
    #hero .triple-crown-box {
        padding: 30px 0 20px;
        font-size: 18px;
        letter-spacing: -0.45px;
    }
    #hero .hero-ellipse-div {
        aspect-ratio: 75 / 20;
    }
    #hero .hero-gif {
        width: 42.08%;
        bottom: 36.4% !important;
    }
    #time .time-circle {
        padding: 15px;
        max-width: 450px;
    }
    #time .time-img.r {
        width: 30%;
    }
    #time .time-img.l {
        width: 30%;
        top: 350px;
    }
    #time .time-circle-inner {
        border-width: 10px;
    }
    #time .time-circle-inner p {
        font-size: 24px;
        letter-spacing: -0.6px;
    }
    #time .time-circle-inner big {
        font-size: 56px;
        letter-spacing: -1.4px;
    }
    #time .time-circle-inner big .gold-point {
        font-size: 72px;
        letter-spacing: -1.8px;
    }
    #history .history-list ul {
        gap: 60px;
    }
    #history .history-list dl {
        padding-top: 23px;
    }
    #history .history-list dl::before {
        width: 30px;
        height: 30px;
        top: -13px;
    }
    #history .history-list dt {
        font-size: 32px;
        letter-spacing: -0.8px;
    }
    #history .history-list dd {
        padding-top: 8px;
        gap: 6px;
    }
    #history .history-list dd p {
        font-size: 16px;
        letter-spacing: -0.4px;
    }
    #with .with-text .wrapper {
        font-size: 64px;
        letter-spacing: -1.6px;
    }
    #with .with-container {
        gap: 30px;
    }
    #with .with-circle {
        padding: 4px;
    }
    #with .with-circle-inner, #with .with-txt-div {
        font-size: 20px;
        letter-spacing: -0.5px;
    }
    #with .with-circle-line {
        bottom: 55px;
    }
    #operation .operation-box {
        padding: 20px 0;
        border-radius: 6px;
        gap: 6px;
    }
    #operation .operation-box .num::after {
        bottom: -8px;
    }
    #operation .operation-box .num {
        left: 15px;
        width: 48px;
        font-size: 20px;
        letter-spacing: -0.5px;
    }
    #operation .operation-box .box-div {
        font-size: 14px;
        letter-spacing: -0.35px;
    }
    #operation .operation-box .box-div small {
        font-size: 8px;
        letter-spacing: -0.2px;
    }
    #operation .operation-box .box-div p {
        font-size: 20px;
        letter-spacing: -0.5px;
    }
    #story .tit-div {
        gap: 12px;
    }
    #story .st-tit {
        flex-direction: column;
    }
    #sale .green-point {
        font-size: 64px;
        letter-spacing: -1.6px;
    }
    #growth .growth-item {
        height: 111.5px;
        font-size: 20px;
        letter-spacing: -0.5px;
        padding: 15px 0;
        border-radius: 12px 12px 0 0;
    }
    #growth .growth-item.two {
        height: 142px;
    }
    #growth .growth-item.three {
        height: 160px;
    }
    #growth .growth-item.four {
        height: 199px;
    }
    #growth .growth-item.five {
        height: 225.5px;
    }
    #growth .growth-item .year {
        font-size: 18px;
        letter-spacing: -0.45px;
        gap: 8px;
    }
    #growth .growth-item.six {
        height: 277.5px;
        font-size: 28px;
        letter-spacing: -0.7px;
    }
    #growth .growth-item small {
        font-size: 10px;
        letter-spacing: -0.25px;
        top: 90px;
    }
    #growth .point-tit {
        display: none;
    }
    #sale .sale-circle {
        width: 350px;
    }
    #sale .sale-circle-inner {
        padding-top: 62px;
    }
    #sale .sale-circle-inner .g {
        font-size: 20px;
        letter-spacing: -0.5px;
    }
    #sale .sale-circle-inner .sale {
        font-size: 24px;
        letter-spacing: -0.6px;
    }
    #sale .sale-circle-inner .sale-num {
        font-size: 64px;
        letter-spacing: -1.6px;
    }
    #sale .sale-circle-inner small {
        font-size: 12px;
        letter-spacing: -0.3px;
        margin-top: 8.5px;
    }
    #sale .sale-swiper .swiper-slide {
        width: 225px;
    }
    #proof .proof-bg-img.r {
        right: -40px;
    }
    #proof .proof-bg-img.l {
        left: -80px;
        bottom: -103px;
    }
    .st-sub-txt {
        font-size: 16px;
        letter-spacing: -0.4px;
    }
    #proof .proof-box {
        width: 360px;
    }
    #proof .proof-box-img {
        width: 110px;
        font-size: 20px;
        letter-spacing: -0.5px;
    }
    #proof .proof-box-inner {
        padding: 10px 16px;
    }
    #proof .proof-div, #proof .proof-div .sale {
        font-size: 16px;
        letter-spacing: -0.4px;
    }
    #proof .proof-div .sale-num  {
        font-size: 20px;
        letter-spacing: -0.5px;
    }
    #menu .st-tit .green-point {
        font-size: 64px;
        letter-spacing: -1.6px;
    }
    #menu .menu-box-div {
        font-size: 16px;
        letter-spacing: -0.4px;
    }
    #menu .menu-popup-open {
        font-size: 18px;
        letter-spacing: -0.45px;
        padding: 10px 20px;
        gap: 6px;
        border-radius: 50px;
        box-shadow: 11.5px 58px 16.5px 0 rgba(0, 0, 0, 0.00), 7.5px 37px 15px 0 rgba(0, 0, 0, 0.01), 4px 21px 12.5px 0 rgba(0, 0, 0, 0.05), 2px 9px 9.5px 0 rgba(0, 0, 0, 0.09), 0.5px 2.5px 5px 0 rgba(0, 0, 0, 0.10);
    }
    #menu .menu-popup-open svg {
        width: 25px;
    }
    .point-tit {
        font-size: 18px;
        letter-spacing: -0.45px;
    }
    .point-logo {
        width: 110px;
    }
    #sticky-contact {
        padding: 8px;
        border-radius: 6px;
    }
    #sticky-contact .sticky-tab {
        height: 30px;
        font-size: 14px;
        letter-spacing: -0.35px;
        border-radius: 6px;
    }
    #sticky-contact .sticky-toggle {
        font-size: 14px;
        letter-spacing: -0.35px;
    }
    #sticky-contact .round-checkbox  {
        width: 20px;
        height: 20px;
    }
    #sticky-contact .agree-wrap .agree {
        font-size: 14px !important;
        line-height: 20px !important;
        letter-spacing: -0.35px !important;
    }
    #sticky-contact .g-btn {
        font-size: 16px;
        letter-spacing: -0.4px;
        border-radius: 50px;
        padding: 6px 2px 6px 7px;
    }
    #sticky-contact .g-btn svg {
        width: 25px;
        height: 25px;
    }
    .recommend .recommend-sub-tit span {
        padding: 0;
    }
    #posibility .posibility-swiper .swiper-slide {
        width: 180px;
    }
    #location-map .location-container {
        width: 100%;
        gap: 10px;
    }
    #location-map .st-sub-txt {
        gap: 12px;
    }
    #location-map .st-sub-txt small {
        font-size: 12px;
        letter-spacing: -0.3px;
    }
    #location-map .location-tab {
        font-size: 20px;
        letter-spacing: -0.5px;
        height: 50px;
        max-width: 110px;
    }
    #reduce .reduce-box {
        border-radius: 9px;
    }
    #reduce .reduce-box p {
        padding: 7.5px;
        font-size: 16px;
        letter-spacing: -0.4px;
    }
    #increase .increase-arrow {
        width: 35%;
        bottom: -20px;
    }
}

@media(max-width: 550px) {
    #sticky-section .st-tit {
        font-size: 40px;
        letter-spacing: -1px;
    }
}

@media(max-width: 480px) {
    #hero .arch-txt {
        max-width: 180px;
    }
    #hero .hero-tit {
        font-size: 48px;
        letter-spacing: -1.2px;
    }
    #hero .hero-tit .gold-point {
        font-size: 72px;
        letter-spacing: -2px;
    }
    #hero .triple-crown {
        padding: 13px 10px 10px;
    }
    #hero .triple-crown-tit  {
        max-width: 270px;
    }
    #hero .triple-crown-tit span {
        font-size: 18px;
        letter-spacing: -0.45px;
    }
    #hero .triple-crown-box {
        font-size: 16px;
        letter-spacing: -0.4px;
    }
    #hero .hero-gif {
        width: 45.08%;
    }
    #time .time-circle {
        padding: 10px;
        max-width: 450px;
    }
    #time .time-img.r {
        width: 27%;
        right: -18.875px;
        top: -40px;
    }
    #time .time-img.l {
        width: 27%;
        left: -23.875px;
        top: 240px;
    }
    #time .time-circle-inner {
        border-width: 7.5px;
    }
    #time .time-circle-inner p {
        font-size: 20px;
        letter-spacing: -0.5px;
    }
    #time .time-circle-inner big {
        font-size: 48px;
        letter-spacing: -1.2px;
        gap: 8px;
        padding-right: 5px;
    }
    #time .time-circle-inner big .gold-point {
        font-size: 64px;
        letter-spacing: -1.6px;
    }
    #history .history-inner {
        padding-left: 60px;
        width: 100%;
    }
    #history .history-list ul::before {
        height: 2px;
    }
    #history .history-list dl {
        padding-top: 21.5px;
    }
    #history .history-list dl::before {
        width: 25px;
        height: 25px;
        top: -11.5px;
    }
    #history .history-list dt {
        font-size: 28px;
        letter-spacing: -0.7px;
    }
    #history .history-list dd p {
        font-size: 14px;
        letter-spacing: -0.35px;
    }
    #number .number-desc {
        font-size: 16px;
        letter-spacing: -0.4px;
    }
    #number .number-desc span {
        font-size: 28px;
        letter-spacing: -0.7px;
    }
    #with .with-wrap {
        gap: 20px;
    }
    #with .with-text .wrapper {
        font-size: 56px;
        letter-spacing: -1.4px;
    }
    #with .with-container {
        gap: 20px;
    }
    #with .with-circle-inner, #with .with-txt-div {
        font-size: 18px;
        letter-spacing: -0.45px;
    }
    #with .with-txt-div {
        gap: 6px;
    }
    #with .with-txt-div {
        padding: 2px 6px;
    }
    #with .with-circle-line {
        bottom: 68px;
    }
    #operation .operation-box .num {
        width: 44px;
        font-size: 18px;
        letter-spacing: -0.45px;
    }
    #operation .operation-box .box-div {
        font-size: 12px;
        letter-spacing: -0.3px;
    }
    #operation .operation-box .box-div p {
        font-size: 18px;
        letter-spacing: -0.45px;
    }
    #sale .green-point {
        font-size: 50px;
        letter-spacing: -1.25px;
    }
    #growth .st-tit {
        font-size: 36px;
        letter-spacing: -0.9px;
    }
    #growth .growth-item {
        font-size: 18px;
        letter-spacing: -0.45px;
    }
    #growth .growth-item .year {
        font-size: 16px;
        letter-spacing: -0.4px;
    }
    #growth .growth-item.six {
        height: 267.5px;
        font-size: 24px;
        letter-spacing: -0.6px;
    }
    #growth .growth-item small {
        top: 80px;
    }
    #sale .sale-circle {
        width: 300px;
    }
    #sale .sale-circle-inner {
        padding-top: 52px;
        border-width: 7.5px;
    }
    #sale .sale-circle-inner .g {
        font-size: 18px;
        letter-spacing: -0.45px;
    }
    #sale .sale-circle-inner .sale {
        font-size: 20px;
        letter-spacing: -0.5px;
    }
    #sale .sale-circle-inner .sale-num {
        font-size: 56px;
        letter-spacing: -1.4px;
    }
    #sale .sale-circle-inner small {
        font-size: 10px;
        letter-spacing: -0.25px;
    }
    #proof .proof-bg-img.r {
        right: 0;
        top: -10px;
    }
    #proof .proof-bg-img.l {
        width: 45%;
        left: -15px;
        bottom: -60px;
    }
    .st-sub-txt {
        font-size: 14px;
        letter-spacing: -0.35px;
    }
    #proof .proof-wrap {
        flex-direction: row;
        gap: 40px 15px;
        flex-wrap: wrap;
        align-items: flex-start;
    }
    #proof .proof-item {
        width: calc(50% - 7.5px);
    }
    #proof .proof-item:nth-child(2n) {
        margin-top: 60px;
    }
    #proof .proof-box {
        width: 100%;
        flex-direction: column;
    }
    #proof .proof-box-img {
        width: 100%;
        aspect-ratio: 15 / 12;
    }
    #proof .proof-box-inner {
        width: 100%;
        padding: 16px;
        gap: 8px;
    }
    #proof .proof-div {
        flex-direction: column;
        align-items: flex-start;
    }
    #proof .proof-div, #proof .proof-div .sale {
        font-size: 14px;
        letter-spacing: -0.35px;
    }
    #proof .proof-div .sale {
        gap: 0;
    }
    #proof .proof-div .sale-num  {
        font-size: 18px;
        letter-spacing: -0.45px;
    }
    #menu .st-tit .green-point {
        font-size: 56px;
        letter-spacing: -1.4px;
    }
    /* #menu .menu-box {
        flex-direction: row;
    }
    #menu .menu-box img {
        width: 120px;
    } */
    #menu .menu-box-div {
        /* align-items: flex-start;
        text-align: left; */
        font-size: 14px;
        letter-spacing: -0.35px;
    }
    #menu .menu-popup-open {
        font-size: 16px;
        letter-spacing: -0.4px;
    }
    #menu .menu-popup-open svg {
        width: 22px;
    }
    .point-tit {
        font-size: 16px;
        letter-spacing: -0.4px;
    }
    .point-logo {
        width: 100px;
    }
    .point-tit::before {
        width: 8px;
        left: -7px;
    }
    .point-tit::after {
        width: 8px;
        right: -7px;
    }
    .recommend .recommend-sub-tit {
        font-size: 18px;
        letter-spacing: -0.45px;
    }
    .recommend .recommend-item p {
        font-size: 14px;
        letter-spacing: -0.35px;
    }
    #posibility .posibility-swiper .swiper-slide {
        width: 160px;
    }
    #sticky-section .st-tit {
        font-size: 32px;
        letter-spacing: -0.8px;
    }
    #reduce .rise-arrow {
        width: 35%;
    }
    #reduce .reduce-arrow {
        width: 35%;
    }
}

@media(max-width: 400px) {
    #hero .arch-txt {
        max-width: 150px;
    }
    #hero .hero-tit {
        font-size: 43px;
        letter-spacing: -0.86px;
    }
    #hero .hero-tit .gold-point {
        font-size: 60px;
        letter-spacing: -1.2px;
    }
    #hero .triple-crown {
        padding: 11px 10px 10px;
    }
    #hero .triple-crown-tit  {
        max-width: 240px;
    }
    #hero .triple-crown-tit span {
        font-size: 16px;
        letter-spacing: -0.4px;
    }
    #hero .triple-crown-box {
        font-size: 14px;
        letter-spacing: -0.35px;
    }
    #hero .hero-gif {
        width: 48.08%;
    }
    #time .time-circle {
        width: 75%;
    }
    #time .time-img.r {
        width: 30%;
    }
    #time .time-img.l {
        width: 30%;
    }
    #time .time-circle-inner p {
        font-size: 18px;
        letter-spacing: -0.45px;
    }
    #time .time-circle-inner big {
        font-size: 40px;
        letter-spacing: -1px;
    }
    #time .time-circle-inner big .gold-point {
        font-size: 56px;
        letter-spacing: -1.4px;
    }
    #history .history-list dt {
        font-size: 24px;
        letter-spacing: -0.6px;
    }
    #number .number-desc {
        font-size: 14px;
        letter-spacing: -0.35px;
    }
    #number .number-desc span {
        font-size: 26px;
        letter-spacing: -0.65px;
    }
    #number .number-desc small {
        font-size: 8px;
        letter-spacing: -0.2px;
    }
    #with .with-text .wrapper {
        font-size: 48px;
        letter-spacing: -1.2px;
    }
    #with .with-circle-inner, #with .with-txt-div {
        font-size: 16px;
        letter-spacing: -0.4px;
    }
    #operation .operation-box .num {
        width: 40px;
        font-size: 16px;
        letter-spacing: -0.4px;
    }
    #operation .operation-box .box-div p {
        font-size: 16px;
        letter-spacing: -0.4px;
    }
    #sale .green-point {
        font-size: 44px;
        letter-spacing: -1.1px;
    }
    #growth .growth-item {
        height: 91.5px;
        font-size: 15px;
        letter-spacing: -0.375px;
    }
    #growth .growth-item.two {
        height: 122px;
    }
    #growth .growth-item.three {
        height: 140px;
    }
    #growth .growth-item.four {
        height: 179px;
    }
    #growth .growth-item.five {
        height: 205.5px;
    }
    #growth .growth-item .year {
        font-size: 12px;
        letter-spacing: -0.3px;
    }
    #growth .growth-item.six {
        height: 257.5px;
        font-size: 20px;
        letter-spacing: -0.5px;
    }
    #growth .st-tit {
        font-size: 32px;
        letter-spacing: -0.8px;
    }
    #sale .sale-circle {
        width: 240px;
    }
    #sale .sale-circle-inner {
        padding-top: 42px;
    }
    #sale .sale-circle-inner .g {
        font-size: 16px;
        letter-spacing: -0.4px;
    }
    #sale .sale-circle-inner .sale-num {
        font-size: 48px;
        letter-spacing: -1.2px;
    }
    #sale .sale-circle-inner small {
        font-size: 9px;
        letter-spacing: -0.225px;
    }
    #proof .proof-div, #proof .proof-div .sale {
        font-size: 12px;
        letter-spacing: -0.3px;
    }
    #proof .proof-div .sale-num  {
        font-size: 16px;
        letter-spacing: -0.4px;
    }
    #menu .st-tit .green-point {
        font-size: 44px;
        letter-spacing: -1.1px;
    }
    /* #menu .menu-box img {
        width: 100px;
    }
    #menu .menu-box-div {
        font-size: 12px;
        letter-spacing: -0.3px;
    } */
    .recommend .recommend-sub-tit {
        font-size: 16px;
        letter-spacing: -0.4px;
    }
    .recommend .recommend-item p {
        font-size: 12px;
        letter-spacing: -0.3px;
    }
    #posibility .posibility-swiper .swiper-slide {
        width: 140px;
    }
    #posibility .posibility-swiper::before, #posibility .posibility-swiper::after {
        width: 50px;
    }
    #sticky-section .st-tit {
        font-size: 28px;
        letter-spacing: -0.7px;
    }
    #reduce .reduce-arrow {
        width: 40%;
    }
}

@media(max-width: 370px) {
    #time .time-circle-inner p {
        font-size: 18px;
        letter-spacing: -0.45px;
    }
    #time .time-circle-inner big {
        font-size: 32px;
        letter-spacing: -0.8px;
    }
    #time .time-circle-inner big .gold-point {
        font-size: 50px;
        letter-spacing: -1.25px;
    }
    #number .number-desc {
        font-size: 12px;
        letter-spacing: -0.3px;
    }
    #number .number-desc span {
        font-size: 24px;
        letter-spacing: -0.6px;
    }
    #growth .st-tit {
        line-height: 130%;
        font-size: 28px;
        letter-spacing: -0.7px;
    }
    #sale .green-point {
        font-size: 40px;
        letter-spacing: -1px;
    }
    #proof .proof-wrap {
        gap: 20px 15px;
    }
    #proof .proof-box-inner {
        padding: 12px;
    }
    #proof .proof-item:nth-child(2n) {
        margin-top: 40px;
    }
    #menu .st-tit .green-point {
        font-size: 36px;
        letter-spacing: -0.9px;
    }
    .point-tit {
        font-size: 15px;
        letter-spacing: -0.375px;
    }
    .point-logo {
        width: 90px;
    }
    #sticky-contact .sticky-tab {
        height: 26px;
        font-size: 12px;
        letter-spacing: -0.3px;
    }
    #sticky-contact .sticky-toggle {
        font-size: 12px;
        letter-spacing: -0.3px;
    }
    #sticky-contact .agree-wrap .agree {
        font-size: 12px !important;
        line-height: 18px !important;
        letter-spacing: -0.3px !important;
    }
    #sticky-contact .g-btn {
        font-size: 14px;
        letter-spacing: -0.35px;
    }
    #sticky-contact .g-btn svg {
        width: 20px;
        height: 20px;
    }
}

@media(max-width: 350px) {
    #with .with-container {
        width: 95%;
    }
    #with .with-circle-wrap {
        gap: 6px;
    }
    #with .with-circle-inner {
        font-size: 14px;
        letter-spacing: -0.35px;
    }
    #growth .growth-item {
        padding: 10px 0;
        border-radius: 8px 8px 0 0;
        font-size: 13px;
        letter-spacing: -0.325px;
    }
    #growth .growth-item .year {
        font-size: 10px;
        letter-spacing: -0.25px;
    }
    #growth .growth-item.six {
        font-size: 18px;
        letter-spacing: -0.45px;
    }
    #growth .growth-item small {
        top: 65px;
    }
    #menu .menu-box-div big {
        font-size: 18px;
        letter-spacing: -0.45px;
    }
    .recommend .recommend-wrap {
        width: 90%;
        gap: 10px;
    }
    .recommend .recommend-item {
        width: calc(50% - 5px);
    }
    #sticky-section .st-tit {
        font-size: 24px;
        letter-spacing: -0.6px;
    }
    #location-map .location-tab {
        height: 40px;
        max-width: 80px;
        font-size: 18px;
        letter-spacing: -0.45px;
    }
    #reduce .rise-arrow, #reduce .reduce-arrow {
        width: 45%;
    }
}

@media(max-width: 330px) {
    #time .time-circle {
        width: 85%;
    }
    #time .time-circle-inner p {
        font-size: 16px;
        letter-spacing: -0.4px;
    }
    #time .time-circle-inner big {
        font-size: 28px;
        letter-spacing: -0.7px;
    }
    #time .time-circle-inner big .gold-point {
        font-size: 44px;
        letter-spacing: -1.1px;
    }
    #history .history-list ul {
        gap: 40px;
    }
    #history .history-list dt {
        font-size: 20px;
        letter-spacing: -0.5px;
    }
    #history .history-list dd p {
        font-size: 12px;
        letter-spacing: -0.3px;
    }
    #number .number-desc span {
        font-size: 20px;
        letter-spacing: -0.5px;
    }
    #operation .operation-box .num {
        width: 36px;
        font-size: 14px;
        letter-spacing: -0.35px;
    }
    #operation .operation-box .box-div p {
        font-size: 14px;
        letter-spacing: -0.35px;
    }
    #operation .operation-box .box-div {
        font-size: 10px;
        letter-spacing: -0.25px;
    }
    #sale .sale-circle {
        width: 225px;
    }
    #sale .sale-circle-inner {
        padding-top: 37px;
    }
    #sale .sale-circle-inner .g {
        font-size: 14px;
        letter-spacing: -0.35px;
    }
    #sale .sale-circle-inner {
        font-size: 18px;
        letter-spacing: -0.45px;
    }
    #sale .sale-circle-inner .sale-num {
        font-size: 44px;
        letter-spacing: -1.1px;
    }
    #sale .sale-circle-inner small {
        font-size: 9px;
        letter-spacing: -0.225px;
    }
    #sale .sale-swiper .swiper-slide {
        width: 190px;
    }
    #proof .proof-bg-img.r {
        width: 37%;
    }
    #proof .proof-bg-img.l {
        width: 50%;
    }
    #proof .proof-div, #proof .proof-div .sale {
        font-size: 10px;
        letter-spacing: -0.25px;
    }
    #proof .proof-div .sale-num  {
        font-size: 14px;
        letter-spacing: -0.35px;
    }
    #sticky-contact .sticky-tab {
        height: 28px;
        font-size: 10px;
        letter-spacing: -0.25px;
    }
}

@media(max-width: 310px) {
    #growth .growth-item.six {
        font-size: 16px;
        letter-spacing: -0.4px;
    }
    #proof .proof-item {
        width: 100%;
    }
    #proof .proof-box-img {
        aspect-ratio: 15 / 9;
        font-size: 24px;
        letter-spacing: -0.6px;
    }
    #proof .proof-box-inner {
        padding: 16px;
    }
    #proof .proof-div, #proof .proof-div .sale {
        font-size: 14px;
        letter-spacing: -0.35px;
    }
    #proof .proof-div .sale-num  {
        font-size: 18px;
        letter-spacing: -0.45px;
    }
    #proof .proof-item:nth-child(2n) {
        margin-top: 0;
    }
    .recommend .st-tit {
        flex-direction: column;
    }
}