/* BASIC css start */
/* BASIC css start */
 
:root {
    --header-height: 150px; 
    --tab-height: 84px;
    --slot-size: 6.66667vw;
    --stack-gap: 262px;
    --stack-gap-wide: 328px;
    --ferment-item-h: 264px; 
    --ferment-stack-gap: 204px; 
}
.purple-text {color: var(--main-color) !important;}
.pc-only { display: block; }
.mo-only { display: none; }
.newContainer-wide {
    word-break: keep-all;
}
.brand-hero-section {
    position: relative;
    height: 250vh; 
    background: #000;
}
.hero-sticky {
    position: sticky;
    top: var(--header-height);
    width: 100%;
    height: calc(100vh - var(--header-height));
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.hero-bg-video {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1;
}
.video-dim {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.3); z-index: 2;
}

.hero-diamond {
    position: absolute;
    width: 280px;
    height: 280px;
    background: var(--main-color); 
    border-radius: 80px;
    transform: rotate(45deg); 
    z-index: 3;
    will-change: transform;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.diamond-logo {
    width: 132px; 
    height: auto;
    object-fit: contain;
    transform: rotate(-45deg);
    opacity: 1; 
    will-change: opacity;
}

.hero-diamond-text {
    position: relative; z-index: 4; text-align: center; color: #fff;
}
.hero-diamond-text .line {
    font-size: 50px;
    font-weight: 400;
    font-family: 'Gilda Display', serif; 
    opacity: 0; 
    transform: translateY(30px);
}
.hero-diamond-text .line:nth-child(2) {padding: 8px 0;}
.hero-diamond-text .line:nth-child(2) span {font-size:38px;}
.hero-diamond-text .line:nth-child(3) span {font-size:46px;}

.brand-tabs-wrap {
    position: sticky;
    top: var(--header-height);
    background-color: #fff;
    z-index: 101;
    box-shadow: 0px 4px 12px 0px #0000000F;
    margin-bottom: 0;
    scroll-behavior: smooth;
}
.tab-navi--links {max-width: var(--layout-total-width);margin: 0 auto;padding: var(--layout-padding-set);}
.tab-navi--links li {
    border-bottom: 1px solid transparent;
}
    .tab-navi--links li.mo {display:none;}

.tab-content-section {
    letter-spacing: -0.05em;
}

.tab-content-section img {
    width: 100%;
}

.brand-content-section {
    padding: 246px 16px 320px;
    background: #fff;
    max-width: var(--layout-total-width);
    margin: 0 auto;
}
.brand-content-section + .brand-content-section {
    padding-top: 0;
}
.brand-content-section:last-child {padding-bottom: 246px;}
.brand-content-section .inner .flex-layout {display: flex;
    justify-content: space-between;  
    align-items: flex-end;
}
.brand-content-section .text-box {
    flex: 2;
}
.brand-content-section h2 {font-size: 190px;font-weight: 400;margin-bottom: 40px;letter-spacing: -0.03em;font-family: 'Gilda Display', serif;}
.brand-content-section p {font-size: 40px;line-height: 1.47;font-weight: 700;letter-spacing: -0.05em; }
.brand-content-section p .point {color: var(--main-color);}
.brand-content-section .huge-num {
  display: block;
  font-size: 182px;
  font-weight: 400;
  color: var(--main-color);
  margin-top: 40px;
  font-family: "Jomolhari", serif;
  flex: 1;
  text-align: right;
  }
.brand-content-section .huge-num span {font-size: 44px;font-weight: 700;letter-spacing: -0.05em;
    font-family: 'Pretendard';}

.logo-transition-section {
    position: relative;
    height: 200vh; 
}
.logo-sticky {
    position: sticky; top: var(--header-height); width: 100%; height: calc(100vh - var(--header-height));
    overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.logo-sticky .dark-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #333; z-index: 1;
}
.zoom-logo {
    position: relative; z-index: 2; color: #fff; font-size: 40px; font-weight: 800; letter-spacing: 0.1em;
}
.our-story-desc {
    margin-top: 114px;
    margin-left: 13vw;
    font-size: 28px;
    font-weight: 400;
    letter-spacing: -0.05em;
    line-height: 1.78;
    word-break: keep-all;
}
    .our-story-desc .pc{display:block;}
    .our-story-desc .mo{display:none;}
.our-philosophy-desc {
    margin-top: 40px;
    font-size: 62px;
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 0.9;
    display: flex;
    align-items: center;
    gap: 10px;
}

.our-philosophy-desc span {
    width: 160px;
    height: 7px;
    display: inline-block;
    background: #000;
}

.philosophy-detail {
    padding: 160px 0 0;
    background: #fff;
    max-width: 1400px;
    margin: 0 auto;
}

.value-circles {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 160px;
}
.circle-item {
    width: 348px;
    height: 348px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 0 -20px;
    position: relative;
    z-index: 1;
    background: url(/design/cbtis/brand/circle-item-default.svg) no-repeat;
    background-size: 100% 100%;
}
.circle-item:nth-child(2) {
    background: url(/design/cbtis/brand/circle-item.svg) no-repeat;
    background-size: 100% 100%;}
.circle-item .eng {
     font-size: 28px;
     color: var(--main-color);
     margin-bottom: 32px;
     letter-spacing: -0.02em;
}
.circle-item p {
    font-size: 26px;
    line-height: 1.38;
    font-weight: 400;
    color: var(--main-color);
    letter-spacing: -0.05em;
}
 
.founder-wrap {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 60px;
}
.message-box { flex: 1;     margin-top: 130px;}
.message-box .desc {
    font-size: 28px;
    line-height: 1.78;
    color: #000;
    word-break: keep-all;
    letter-spacing: -0.05em;
    font-weight: 400;
    margin-bottom: 40px;
}
.message-box .desc span {color: var(--main-color);font-weight: 700;} 

.final-msg {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.55;
    color: #000;
    margin-top: 60px;
}

.founder-info {width: 340px;text-align: right;}
.founder-img {width: 100%;margin-bottom: 20px;height: 700px;overflow: hidden;}
.founder-img img {width: 100%;height: 100%;object-fit: cover;transform: scale(1.1);}
.founder-sign {}
.founder-sign .name {font-size: 18px;font-weight: 400;color: #000;line-height: 1.33;}
.founder-sign .sign-img { width: 150px; }
.br_mo, .br_tablet {display:none;}

.br_pc {display:inline-block;}

.story-tab { 
}

.story-hero {
    position: relative;
    height: 250vh;
    background: #fff;
}
.story-hero .hero-sticky {
    position: sticky;
    top: calc(var(--header-height) + var(--tab-height));
    width: 100%;
    height: calc(100vh - var(--header-height) - var(--tab-height));
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero-bg {
        background-image: url(/design/cbtis/brand/d02cc8ab7effb905f109a51d7f55c67c46cc8db0.jpg);
        position: absolute;
        background-repeat: no-repeat;
        top: 0;
        left: 0;
        width: 100%;
        height: calc(100vh - var(--header-height));
        background-size: cover;
        background-position: 0 21.5%;
        z-index: 1;
        will-change: opacity;
}
.hero-title {
    position: relative;
    z-index: 2;
    font-size: 80.3px;
    font-weight: 700;
    text-align: center;
    color: #fff;
    will-change: opacity, transform;
    letter-spacing: -0.05em;
    line-height: 1.15;
}
.hero-subtexts {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    text-align: center;
    width: 100%;
    padding: 0 16px;
}
.hero-subtexts .sub-text {
    font-size: 28px;
    font-weight: 400;
    letter-spacing: -0.05em;
    margin-bottom: 20px;
    opacity: 0;
    transform: translateY(30px);
    color: #000;
    line-height: 1.78;
}
.hero-subtexts .sub-text span{color:var(--main-color); font-weight: 700; }

.story-ingredients {
    position: relative;
    padding: 246px 20px 18vw;
    text-align: center;
    background: var(--main-color);
    color: #fff;
    }
.wave-divider {
    position: absolute;
    bottom: -15vw; 
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0; 
}
.wave-divider img {width: 100%;height: 100%;}

.wave-divider svg {
    display: block;
    width: calc(100% + 2px); 
    height: 180px; 
}

.story-ingredients-chart {
    background-color: #ffffff;
    color: #000;
    padding: 0 16px 120px; 
    position: relative;
    z-index: 2;
}
.sec-title-top{
    font-size: 40px;
    font-weight: 700;
    letter-spacing: -0.05em;
    margin-bottom: 46px;
}
.sec-title {font-size: 80.3px;font-weight: 700;margin-bottom: 46px;letter-spacing: -0.05em;line-height: 1.15;}
.sec-title-sub {
    font-size: 40px;
    font-weight: 400;
    letter-spacing: -0.03em;
    font-family: 'Gilda Display', serif;
}
.sec-desc {font-size: 28px;line-height: 1.78;color: #fff;margin-bottom: 160px;margin-top: 114px;word-break: keep-all;letter-spacing: -0.05em;padding: 0 16px;}
.sec-desc strong {
    font-weight: 700;
}
.ingredient-img img { max-width: 540px; width: 100%; margin: 0 auto 80px; display: block; }
.chart-area-wrap h4 {font-size: 40px;font-weight: 700;margin-bottom: 64px;text-align: center;letter-spacing: -0.05em;}
.chart-area-wrap h5 {
    font-size: 28px;
    line-height: 1.78;
    text-align: center;
    margin-bottom: 160px;
    letter-spacing: -0.05em;
}
.chart-legend {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 52px;
    margin-bottom: 60px;
    padding: 0;
    list-style: none;
    flex-wrap: wrap;
}
.chart-legend li {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 700;
    color: #000;
    letter-spacing: -0.05em;
}
.chart-legend .dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 8px;
}

.bg-black {background-color: #000;}
.bg-gray-dark { background-color: #888; }
.border-gray-dark {background-color: #EAEAEA;border: 1px solid #888;box-sizing: border-box;}
.bg-gray-light {background-color: #CCCCCC;}
.bg-gray-darkest {background-color: #505050;}
.border-gray-light {background-color: #fff;border: 1px solid #CCCCCC;box-sizing: border-box;}

.chart-box {
    display: flex;
    height: 400px;
    max-width: 1182px;
    margin: 0 auto 96px;
    padding-bottom: 30px;
}

.y-axis-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    margin-right: 25px;
}
.y-axis-title {
    transform: rotate(-90deg);
    white-space: nowrap;
    font-weight: 700;
    font-size: 16px;
    color: #000;
    letter-spacing: -0.05em;
}

.chart-content {
    position: relative;
    flex: 1;
    margin-left: 20px;
}

.grid-lines {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    position: relative;
    z-index: 1;
}
.grid-line {
    width: 3px;
    height: 1px;
    background-color: #bbb;
    position: relative;
}
.grid-line:last-child {
    width:100%;
    background-color: #bbb; 
}
.grid-line span {
    position: absolute;
    left: -40px;
    top: -7px;
    font-size: 14px;
    font-weight: 700;
    color: #000;
    width: 25px;
    text-align: right;
    line-height: 1;
    letter-spacing: -0.05em;
}

.chart-area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    z-index: 2;
}
.chart-area::before {
    content: "";
    background: #bbb;
    height: 100%;
    width: 1px;
    position: absolute;
    bottom: 0;
    left: 3px;
}
.bar-group {
    display: flex;
    align-items: flex-end;
    height: 100%;
    position: relative;
    margin-bottom: 1px;
}
.bar-wrap {
    width: 12px;
    height: 100%;
    display: flex;
    align-items: flex-end;
    margin: 0; 
}

.bar {
    position: relative;
    width: 100%;
    height: 0; 
    border-radius: 2px 2px 0 0;
}
.bar.border-gray-dark, .bar.border-gray-light {
    border-bottom: none;
    border-width: 1px;
}

.bar-label {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    font-weight: bold;
    color: #777;
}
.x-label {
    position: absolute;
    bottom: -35px;
    left: 50%;
    transform: translateX(-50%);
    font-weight: 700;
    font-size: 14px;
    color: #000;
    letter-spacing: -0.05em;
}

.chart-caption {
    text-align: center;
    font-size: 11px;
    color: #888888;
    line-height: 1.63;
    letter-spacing: -0.05em;
}
.chart-caption p {
}

.story-stats {padding: calc(20vw) 0 0;text-align: center;background: var(--main-color);color: #fff;position: relative;}
.story-stats .wave-divider {
    bottom: auto;
    top: -25vw;
}
.stat-list {
    display: flex;
    justify-content: center;
    gap: 1.458335vw;
    margin: 160px auto 0;
    max-width: calc(1476px + 16px);
    width: 100%;
    padding: 0 16px 96px;
}
.stat-list li {
    text-align: center;
    border: 1px solid #fff;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    aspect-ratio: 1;
    align-items: center;
    justify-content: center;
    flex: 1;
    }
.stat-list p {
    font-size: 1.458333vw;
    margin-top: 1.041667vw;
    color: #fff;
    letter-spacing: -0.05em;
    }
.slot-machine {
font-size: var(--slot-size);
    height: var(--slot-size);
    font-weight: 400;
    letter-spacing: 0.02em;
    overflow: hidden; 
    display: flex;
    line-height: 1;
    font-family: "Jomolhari", serif;
    justify-content: center;
}
.slot-digit {
    display: flex; flex-direction: column; 
    
}
.slot-digit span {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%; 
    flex-shrink: 0; 
}
.slot-desc { 
font-weight: 400;
font-size: 18px;
letter-spacing: -0.04em;
text-align: center;
padding-bottom:246px;
}
 .story-why {
    background-color: #fff;
    padding: 246px 16px 245px;
    color: #000;
    overflow: hidden;
}

.why-header {
    margin: 0 auto 160px;
    max-width: var(--layout-total-width);
    padding: var(--layout-padding-set);
}
.why-title-en {
     font-size: 180px;
     line-height: 1;
     font-weight: 400;
     margin-bottom: 40px;
     letter-spacing: -0.03em;
     font-family: 'Gilda Display', serif;
}
.why-title-ko {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.55;
    letter-spacing: -0.05em;
}
.why-title-ko strong {
    color: var(--main-color, #3c306b); 
    font-weight: 800;
}

.why-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    max-width: 1400px;
    margin: 0 auto;
}
.why-row + .why-row {margin-top:246px;}
.why-row.reverse {
    flex-direction: row-reverse;
}
.story-why .why-row:not(.reverse) .text-box {flex: 1;word-break: keep-all;max-width: 793px;}
.story-why .why-row.reverse .text-box {flex: 1;word-break: keep-all;max-width: 722px;}
.story-why .why-row:not(.reverse) .img-box {width: 384px;}
.story-why .why-row.reverse .img-box {aspect-ratio: 360 / 597;max-width: 360px;}
.why-row .img-box-pc {display:block;}
.why-row .img-box-mo {display:none;}
.why-row .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.story-why .why-row.reverse .img-box img {
    object-position: 69%;
}
.text-box.align-left { text-align: left; }
.text-box.align-right { text-align: right; }

.why-row h3 {
    font-size: 40px;
    font-weight: 400;
    line-height: 1.55;
    margin-bottom: 30px;
    letter-spacing: -0.05em;
}
.story-why .why-row:not(.reverse) .text-box h3 {margin-bottom: 246px;}
.story-why .why-row.reverse .text-box h3 {margin-bottom: 194px;}
.why-row h3 strong {
    font-weight: 700;
}
.why-row p {
    font-size: 28px;
    line-height: 1.8;
    color: #000;
    letter-spacing: -0.05em;
}
.why-row .source {
    display: block;
    font-size: 20px;
    color: #888888;
    margin-top: 30px;
    letter-spacing: -0.05em;
    line-height: 2.5;
}

.why-process {
    margin-top: 160px;
}
.why-process ul {
    display: flex;
    justify-content: center;
    align-items: center;
}
.why-process li {
    width: 348px;
    height: 348px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 0 -20px;
    position: relative;
    z-index: 1;
    background: url(/design/cbtis/brand/circle-item-default.svg) no-repeat;
    background-size: 100% 100%;
    justify-content: center;
}
.why-process li:nth-child(2),
.why-process li:nth-child(3) {
    background: url(/design/cbtis/brand/circle-item.svg) no-repeat;
    background-size: 100% 100%;
}
.icon-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 48px;
}
.icon-circle img {
    width: 80px;
    height: auto;
}
.why-process span {
    font-size: 28px;
    font-weight: 700;
    color: var(--main-color);
    letter-spacing: -0.05em;
}

.story-history {padding: 246px 0 246px;text-align: center;background: var(--main-color);color: #fff;
    overflow: hidden;}
.story-history .inner {}
.history-header { text-align: center; margin-bottom: 60px; }


.history-nav-wrap {background-color: #fff;margin: 0 calc(-50vw + 50%);margin-bottom: 114px;}
.history-nav-wrap .swiper {
    margin: 0 auto;
    max-width: 1150px;
    }
    .history-nav-wrap .swiper .swiper-wrapper {
    display: flex;
    justify-content: center;
}
.history-nav-wrap .swiper-slide {text-align: center;cursor: pointer;font-size: 30px;color: #bbb;font-weight: 600;position: relative;letter-spacing: -0.05em;padding: 37px 40px;width: auto;}
.history-nav-wrap .swiper-slide:not(:last-child)::after {content: '\00b7';position: absolute;right: 0;top: 50%;transform: translateY(-50%);color: #bbb;}
.history-nav-wrap .swiper-slide-thumb-active {color: var(--main-color);font-weight: 700;background: url(/design/cbtis/brand/triangle.svg) no-repeat top center;}

.history-content-wrap { position: relative; } 
.era-title {text-align: center;font-size: 40px;font-weight: 700;margin-bottom: 64px;letter-spacing: -0.05em;}
.timeline-line {position: absolute;top: 5px;left: 0;width: 100%;height: 0.5px;background-color: rgba(255, 255, 255, 0.6);z-index: 1;}
.timeline-node {text-align: center;margin-bottom: 28px;position: relative;z-index: 2;}
.timeline-node .dot {width: 12px;height: 12px;background-color: #fff;border-radius: 50%;margin: 0 auto 40px;}
.timeline-node .year-num {font-size: 88px;line-height: 1;font-weight: 400;letter-spacing: -0.06em; font-family: 'Gilda Display', serif;}



.history-mo-area { display: none; }

.history-pc-area .pc-arrow {
    position: absolute;
    top: 105px; 
    width: 40px;
    height: 40px;
    margin-top: -15px;
    color: rgba(255,255,255,0.5);
    z-index: 10;
}
.history-pc-area .pc-arrow::after{display: none;}
.history-pc-area .pc-prev {left: 32px;background: url(/design/cbtis/brand/Arrowbtn_l.svg) no-repeat;}
.history-pc-area .pc-next {right: 32px;background: url(/design/cbtis/brand/Arrowbtn_r.svg) no-repeat;}
.history-pc-area .pc-prev.swiper-button-disabled, 
.history-pc-area .pc-next.swiper-button-disabled {opacity: 0;}
.history-pc-area .pc-year-swiper { padding: 0 40px; } 
.history-pc-area .year-item { width: 25%; } 
.history-pc-area .event-card .events li {display: flex;gap: 20px;margin-bottom: 12px;align-items: flex-start;}
.history-pc-area .event-card .month {font-size: 18px;font-weight: 700;width: 34px;letter-spacing: -0.05em;line-height: 1.77;}
.history-pc-area .event-card .desc {font-size: 18px;line-height: 1.77;color: #fff;word-break: keep-all;letter-spacing: -0.05em;text-align: left;}


.story-summary {
    padding: 246px 16px;
    background-color: #fff;
}

.summary-list {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
}

.summary-list li {
    flex: 1;
    text-align: center;
    position: relative; 
}

.summary-list li:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 136px; 
    background-color: #DBDBDB;
}

.summary-list p {
    font-size: 28px;
    line-height: 1.78;
    color: #000000;
    letter-spacing: -0.05em;
}

.summary-list p strong {
    font-weight: 700;
    color: #000;
    display: inline-block;
     
}

.tech-hero-wrap, .tech-typography {background-color: #fff;}
.tech-hero-content, .tech-typography {margin: 0 auto;padding: 0 16px;text-align: center;}


.tech-hero-wrap {position: relative;height: 250vh;} 
.tech-hero-sticky { position: sticky; top: var(--header-height, 0); height: calc(100vh - var(--header-height, 0)); background-color: #fff; overflow: hidden; }

.tech-hero-video-box { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background: #000; }
.tech-hero-video-box video { width: 100%; height: 100%; object-fit: cover; opacity: 0.7; }

.tech-hero-content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; display: flex; align-items: center; justify-content: center; }
.tech-main-title {
    position: relative;
    z-index: 2;
    font-size: 80.3px;
    font-weight: 700;
    text-align: center;
    color: #fff;
    will-change: opacity, transform;
    letter-spacing: -0.05em;
    line-height: 1.15;
    }

.tech-sub-group { 
    position: absolute; 
    width: 100%;   padding: 0 16px; 
    text-align: center; 
    display: grid; 
    place-items: center; 
}
.tech-sub-group.pc{display:block;}
.tech-sub-group.mo{display:none;}
.tech-sub-group p {
    font-size: 28px;
    font-weight: 400;
    letter-spacing: -0.05em;
    margin-bottom: 20px;
    opacity: 0;
    transform: translateY(30px);
    color: #000;
    line-height: 1.78;
}
.tech-sub-group p:last-child{margin-bottom:0;}
.tech-sub-group p span{color:var(--main-color); font-weight: 700; }


.tech-typography-wrap {position: relative;height: 600vh;background-color: #fff;} 
.tech-typo-sticky { 
    position: sticky; top: var(--header-height, 0); 
    height: calc(100vh - var(--header-height, 0)); 
    display: flex; align-items: center; justify-content: center; 
    overflow: hidden; 
}

.tech-typo-inner { position: relative; width: 100%; height: 100%; }


.tech-step-group {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
}
.tech-step-group .tech-step-txt { 
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); 
    width: 100%; margin: 0; opacity: 0; 
}


.tech-step-txt {font-size: 36px;font-weight: 400;line-height: 1.5;color: #000;word-break: keep-all;letter-spacing: -0.05em;}
.tech-step-txt strong {font-weight: 700;font-size: 54px;}
.tech-step-txt span {font-size: 34px;color: #000;line-height: 1.58;} 


.tech-expand-group { 
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); 
    width: 100%; text-align: center; 
    display: flex; flex-direction: column; align-items: center; 
}
.tech-split-top, .tech-split-bottom {
    font-weight: 700;
    line-height: 1.2;
    opacity: 0;
    margin: 0;
    color: #000;
    font-size: 85px;
    letter-spacing: -0.04em;
    transform-origin: center center;
}
.tech-expand-space { height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.tech-huge-text {font-size: 85px;font-weight: 700;color: #000;line-height: 1;opacity: 0;display: inline-block;letter-spacing: -0.05em;}


.tech-bottom-group { 
    position: absolute; 
    top: calc(50% + 120px); 
    left: 50%; transform: translateX(-50%); 
    width: 100%; text-align: center; 
}
.tech-bottom-group .tech-step-txt { opacity: 0; margin-bottom: 20px; font-size: 30px; }     




.tech-graph-section { }
.tech-graph-title { font-size: 40px; font-weight: 800; margin-bottom: 20px; }
.tech-graph-desc {font-size: 28px;color: #000000;margin-bottom: 160px;word-break: keep-all;line-height: 1.78;letter-spacing: -0.05em;margin-top: 114px;font-weight: 700;}
.tech-graph-desc span {font-size:18px;vertical-align: top;position: relative;top: 2px;}
.tech-graph-group .tech-graph-txt {
    color: #000;
    letter-spacing: -0.05em;
    font-size: 56px;
    font-weight: 400;
    line-height: 1.67;
}
.tech-graph-group .tech-graph-txt span {font-size:30px;vertical-align: top;position: relative;top: 6px;}

.tech-graph-group .tech-graph-txt strong {
    font-size: 68px;
    font-weight: 700;
    line-height: 1.52;
}

.tech-graph-group .tech-graph-txt + .tech-graph-txt {
    margin-top: 114px;
}

.tech-chart-container {max-width: 600px;margin: 0 auto;color: #000;}


.tech-chart-legend {display: flex;justify-content: center;gap: 52px;margin-bottom: 47px;font-weight: 700;font-size: 16px;}
.tech-chart-legend span { display: flex; align-items: center; gap: 8px; }
.tech-dot {display: inline-block;width: 10px;height: 10px;border-radius: 50%;}
.tech-dot.tech-gray {background-color: #CCCCCC;}
.tech-dot.tech-purple { background-color: #322879; }


.tech-chart-box {position: relative;height: 350px;border-left: 1px solid #bbb;border-bottom: 1px solid #bbb;margin-left: 20px;padding-bottom: 0;margin-bottom: 60px;}


.tech-y-axis {position: absolute;left: -25px;top: -6px;height: calc(100% + 12px);display: flex;flex-direction: column;justify-content: space-between;align-items: center;padding: 0;margin: 0;list-style: none;font-weight: 700;font-size: 14px;letter-spacing: -0.05em;}
.tech-y-axis li {position: relative;width: 100%;}

.tech-y-axis li::after {
    content: "";
    background: #bbb;
    width: 3px;
    height: 1px;
    position: absolute;
    top: 8px;
    right: -11px;
}

.tech-y-axis li:first-child::after {
    content: "";
    top: 6px;
}

.tech-chart-bars {display: flex;justify-content: space-around;height: 100%;margin: 0;list-style: none;}
.tech-chart-bars li {position: relative;width: 14%;height: 100%;display: flex;flex-direction: column;justify-content: flex-end;}


.tech-bar-group { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 100%; }


.tech-bar-fill { width: 45%; height: 0;  }
.tech-bg-gray {background-color: #EAEAEA;}
.tech-bg-purple {background-color: var(--main-color);}


.tech-label {position: absolute;bottom: -45px;left: 50%;transform: translateX(-50%);width: 120%;text-align: center;font-size: 13px;font-weight: 700;line-height: 1.2;word-break: keep-all;font-style: italic;}
.tech-label em {font-style: italic;letter-spacing: -0.05em;}


.tech-chart-unit {text-align: right;font-size: 14px;color: #888;margin-bottom: 96px;margin-top: 50px;font-weight: 400;}


.tech-chart-info {border-top: 1px solid #eaeaea;padding-top: 46px;text-align: left;}
.tech-info-row {display: flex;margin-bottom: 16px;}
.tech-info-row dt {font-weight: 700;width: 100px;flex-shrink: 0;line-height: 1.77;letter-spacing: -0.05em;font-size: 18px;}
.tech-info-row dd {margin: 0;font-weight: 400;color: #000;word-break: keep-all;font-size: 18px;letter-spacing: -0.05em;line-height: 1.77;}


.tech-info-notices {margin-top: 46px;color: #888;font-size: 11px;line-height: 1.63;font-weight: 400;letter-spacing: -0.05em;padding-bottom: 246px;}
.tech-info-notices p {word-break: keep-all;}

.tech-coating-area {background-color: var(--main-color);color: #fff;padding: 246px 0;text-align: center;}
.tech-sec-title {font-size: 80.3px;font-weight: 700;margin-bottom: 114px;word-break: keep-all;letter-spacing: -0.05em;padding: 0 16px;}
.tech-sec-desc {font-size: 28px;line-height: 1.78;color: #fff;margin-bottom: 160px;word-break: keep-all;letter-spacing: -0.05em;padding: 0 16px;}
.tech-sec-desc strong {font-weight: 700;}
.tech-coating-intro {margin-bottom: 246px;overflow: hidden;}
.tech-coating-visual-wrap {
    width: 100%;
    max-width: 1276px;
    margin: 0 auto;
    padding-left: 16px;
}

.tech-coating-img-box {
    position: relative;
    width: 100%;
    max-width: 1276px;
    margin: 0 auto;
}


.tech-leader-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: auto !important;
    pointer-events: none; 
    z-index: 2;
}

.tech-line-path {
    fill: none;
    stroke: rgba(255, 255, 255, 0.8); 
    stroke-width: 1.5;
    stroke-linecap: round;
}


.tech-layer-label {
    position: absolute;
    z-index: 3;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
}

.tech-layer-label .label-sub {
    font-size: 20px;
    font-weight: 700;
    color: #B7B3E4; 
    letter-spacing: -0.05em;
}

.tech-layer-label .label-main {
    font-size: 28px;
    font-weight: 700;
    color: #fff; 
    letter-spacing: -0.05em;
}


.tech-ly-1 {top: 12%;left: -0.5%;padding-top: 27px;}
.tech-ly-2 {bottom: 1%;left: 42%;padding-bottom: 29px;}

@media (min-width: 1081px) and (max-width: 1276px) {
    .tech-ly-2 {
        left: 531px;
    }
}
@media (min-width: 1025px) and (max-width: 1080px) {
    .tech-ly-2 {
        left: 49.4%;
    }
}

.tech-coating-img-box > img {
    max-width: 1058px;
    margin-left: 218px;
}

.tech-ly-1::after {
    content: "";
    background: #fff;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    position: absolute;
    bottom: 3px;
    right: -64px;
    display: block;
}
.tech-ly-2::after {
    content: "";
    background: #fff;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    position: absolute;
    top: -2px;
    right: -265px;
    display: block;
}

.tech-coating-desc-box {
    margin-top: 114px;
    color: #B7B3E4;
    font-size: 28px;
    letter-spacing: -0.05em;
    line-height: 1.78;
    font-weight: 400;
    padding-right: 16px;
}

.tech-coating-desc-box strong {
    color: #fff;
    font-weight: 700;
} 
.tech-principle-title {
    font-size: 40px;
    font-weight: 700;
    letter-spacing: -0.05em;
    margin-bottom: 64px;
}

.tech-principle-list {display: flex;gap: 16px;justify-content: center;padding: 0;list-style: none;padding: 0 16px;}
.tech-principle-list li { flex: 1; text-align: center; opacity: 0; transform: translateY(50px); }
.tech-media-box {border-radius: 0;overflow: hidden;margin-bottom: 46px;aspect-ratio: 16/9;background: #000;}
.tech-media-box video, .tech-media-box img { width: 100%; height: 100%; object-fit: cover; }
.tech-step-label {display: block;font-size: 28px;font-weight: 700;margin-bottom: 32px;color: #fff;letter-spacing: -0.05em;}
.tech-step-label.pc{display:block;}
.tech-step-label.mo{display:none;}
.tech-step-desc {font-size: 24px;color: #fff;word-break: keep-all;letter-spacing: -0.05em;line-height: 1.5;}


.tech-patents-area {background: #0A074A url('/design/cbtis/brand/earthbg.png') no-repeat;color: #fff;padding: 246px 0 300px;position: relative;text-align: center;background-size: contain;background-position: bottom;}
.tech-cert-wrap {display: flex;justify-content: center;gap: 0;margin: 0 auto;position: relative;align-items: flex-start;max-width: 1220px;}
.tech-cert-item {width: 18%;text-align: center;}
.tech-cert-item:nth-child(1), .tech-cert-item:nth-child(5) {z-index: 2;flex: 0.8;margin-top: 2%;}

.tech-cert-item:nth-child(2), .tech-cert-item:nth-child(4) {
    z-index: 3;
    flex: 0.9;
    margin-top: 1%;
}

.tech-cert-item.tech-center-kr {
    z-index: 5;
    flex: 1;
}
 
.tech-cert-item img {width: 100%;height: auto;box-shadow: 0px 0px 20px 0px rgba(53, 54, 90, 0.45);background: #fff;border-radius: 0;padding: 0;}
.tech-cert-item .national {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-bottom: 24px;
    justify-content: center;
}

.tech-cert-item .national img {
    width: 40px;
    height: 40px;
    box-shadow: none;
    padding: 0;
    border-radius: 50%;
    object-fit: cover;
    border: 0;
    margin: 0;
}

.tech-cert-item .national p {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: -0.05em;
    line-height: 1.5;
}

.tech-cert-item .national p strong {
    font-size: 28px;
    font-weight: 700;
}
 
.blend-story-wrap .inner {margin: 0 auto;max-width: 1620px;}
.blend-text-center { text-align: center; }

.blend-fade-up { opacity: 0; transform: translateY(40px); }

.blend-sec-title {font-size: 80.3px;font-weight: 700;color: #000;margin-bottom: 114px;line-height: 1.3;word-break: keep-all;letter-spacing: -0.05em;}
.blend-sec-subtitle {font-size: 40px;font-weight: 700;color: #000;margin-bottom: 46px;line-height: 1.55;word-break: keep-all;letter-spacing: -0.05em;}
.blend-sec-desc {font-size: 28px;font-weight: 400;color: #000;line-height: 1.78;word-break: keep-all;letter-spacing: -0.05em;}

    .blend-sec-desc.pc{display:block;}
    .blend-sec-desc.mo{display:none;}
.blend-color-white { color: #fff !important; }
.blend-color-light {color: #fff;}
.blend-highlight-text {font-size: 32px;font-weight: 700;color: #FF6600;line-height: 1.5;margin-top: 160px;letter-spacing: -0.05em;}
.mt-40 { margin-top: 40px; }

.blend-hero-wrap { 
    position: relative; 
    height: 250vh; 
    background: #fff; 
}
.blend-hero-sticky {
    position: sticky; 
    top: calc(var(--header-height, 0px) + var(--tab-height, 0px));
    height: calc(100vh - var(--header-height, 0px) - var(--tab-height, 0px));
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #fff;
}
.blend-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    will-change: opacity; 
    background: #000;
}
.blend-hero-bg img {width: 100%;height: 100%;object-fit: cover;opacity: 0.77;}
.blend-hero-content { position: relative; z-index: 2; text-align: center; will-change: opacity, transform; }
.blend-main-title {font-size: 80.3px;font-weight: 700;color: #fff;letter-spacing: -0.05em;line-height: 1.15;}

.blend-hero-subtexts {
    position: absolute; 
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    z-index: 3; 
    text-align: center; 
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blend-text-group {
    position: absolute; 
    width: 100%;
    opacity: 0; 
    transform: translateY(30px);
    will-change: opacity, transform;
}

.blend-text-group p + p {
}
.blend-predict-sec {padding: 160px 16px 246px;}
.blend-ngs-area { margin-top: 0; }
 
.blend-ngs-title {font-size: 40px;font-weight: 700;margin-bottom: 64px;text-align: center;letter-spacing: -0.05em;}
.blend-ngs-title span {font-weight: 400;color: #000;font-size: 32px;}
.blend-ngs-list {display: grid;grid-template-columns: repeat(5, 1fr);gap: 12px;list-style: none;padding: 0;margin: 0;}
.blend-ngs-list li {background: #F7F7F7;padding: 46px 32px 40px;border-radius: 0;}
.blend-icon {height: 144px;margin-bottom: 40px;display: flex;align-items: center;justify-content: center;}
.blend-icon img {width: auto;transform: scale(0.966);}
.blend-step {display: block;font-size: 20px;color: #000;margin-bottom: 20px;font-weight: 700;letter-spacing: -0.05em;}
.blend-ngs-list strong {display: block;font-size: 34px;margin-bottom: 32px;color: #000;line-height: 1.41;letter-spacing: -0.05em;font-weight: 700;}
.blend-ngs-list p {font-size: 26px;color: #000;line-height: 1.53;word-break: keep-all;letter-spacing: -0.05em;font-weight: 400;}

.blend-age-env-sec {background-color: var(--main-color);padding: 246px 0;}
.blend-line-graph-wrap {max-width: 728px;margin: 160px auto 0;text-align: center;}
.blend-graph-title {font-size: 40px;color: #fff;font-weight: 700;margin-bottom: 64px;letter-spacing: -0.05em;}

.blend-graph-box {
    position: relative;
    width: 100%;
    overflow: hidden; 
}

.blend-graph-bg { 
    width: 100%; 
    height: auto; 
    clip-path: inset(0 100% 0 0); 
}

.blend-graph-info {
    margin-top: 96px;
    font-size: 11px;
    color: #B7B3E4;
    line-height: 1.63;
    text-align: center;
    letter-spacing: -0.05em;
    opacity: 0;
    transform: translateY(20px);
}

.blend-video-sec {}
.blend-video-container {margin: 0 auto;aspect-ratio: 16/9;background: #000;overflow: hidden;}
.blend-video-container video { width: 100%; height: 100%; object-fit: cover; }

.blend-formula-sec {padding: 246px 16px;}
.blend-bar-list {display: grid;grid-template-columns: repeat(4, 1fr);gap: 120px 48px;max-width: 1400px;margin: 160px auto 0;}

.blend-bar-item { display: flex; flex-direction: column; align-items: center; }
.blend-bar-header {text-align: center;font-size: 32px;font-weight: 700;color: #505050;margin-bottom: 46px;line-height: 1.5;letter-spacing: -0.05em;}
.blend-bar-header span { display: block; font-size: 14px; font-weight: 500; color: #666; margin-top: 5px; }

.blend-bar-track {display: flex;width: 100%;height: 52px;background: #eee;border-radius: 52px;overflow: hidden;margin-bottom: 16px;}

.blend-bar-track.pc {display:flex;}
.blend-bar-track.mo {display:none;}
.blend-bar-fill {height: 100%;display: flex;align-items: center;justify-content: flex-start;width: 0; transition: width 1s ease;padding: 0 16px;}
.blend-bar-fill + .blend-bar-fill {
    display: flex;
    justify-content: flex-end;
}
.blend-bar-fill:only-child {
    justify-content: center;
}
.blend-bar-fill span {color: #fff;font-size: 26px;font-weight: 700;white-space: nowrap;opacity: 0;letter-spacing: -0.05em;z-index: 2;} 

.blend-bar-labels {display: flex;font-size: 20px;font-weight: 700;justify-content: space-between;width: 100%;letter-spacing: -0.05em;}
.blend-bar-labels span:only-child {text-align: center;width: 100%;}

.bg-mint {background: #01C1A8;} .c-mint {color: #01C1A8;}
.bg-blue {background: #00B7DF;} .c-blue {color: #00B7DF;}
.bg-purple {background: #B67AC4;} .c-purple {color: #B67AC4;}
.c-darkblue {color: #5267BE;}
.bg-darkblue {background: #5367BE;}
.bg-brown {background: #B08A49;} .c-brown {color: #B08A49;}
.bg-brown-dark {background: #B08A49;} .c-brown-dark {color: #B08A49;}
.bg-gray {background: #CCCCCC;} .c-gray {color: #888888;}
.bg-gray-light { background: #dedede; } .c-gray-light { color: #aaaaaa; }
.bg-magenta {background: #AD057E;} .c-magenta {color: #AD057E;}


.fda-story-wrap {background: #fff;}
.fda-story-wrap .inner {margin: 0 auto;padding: 0 16px;}
.fda-color-purple {color: var(--main-color);} 
.mo-only { display: none; }

.fda-hero-wrap {
    position: relative;
    height: 250vh; 
    background: #fff;
}

.fda-hero-sticky {
    position: sticky;
    top: calc(var(--header-height, 0px) + var(--tab-height, 0px));
    height: calc(100vh - var(--header-height, 0px) - var(--tab-height, 0px));
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #fff;
}

.fda-hero-bg {position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 1;will-change: opacity;background: #000;}
.fda-hero-bg img {width: 100%;height: 100%;object-fit: cover;opacity: 0.77;}

.fda-hero-content { position: relative; z-index: 2; text-align: center; will-change: opacity, transform; }
.fda-main-title {
    font-size: 80.3px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.05em;
    line-height: 1.15;
}

.fda-hero-subtexts {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; 
    height: 100%; 
    display: flex;
    align-items: center;
    justify-content: center;
}

.fda-hero-subtexts .fda-sub-text {
    position: absolute; 
    width: 100%;
    opacity: 0;
    transform: translateY(30px);
    margin-bottom: 0; 
    text-align: center;
}

.fda-sec-title {font-size: 80.3px;font-weight: 700;color: #000;margin-bottom: 114px;line-height: 1.15;letter-spacing: -0.05em;word-break: keep-all;}
.fda-sec-desc {font-size: 28px;font-weight: 400;color: #000;line-height: 1.78;margin-bottom: 30px;word-break: keep-all;letter-spacing: -0.05em;}
.fda-sec-desc strong {font-weight: 700;color: #000;}

.fda-status-sec {padding: 0;background: #fff;color: #000;}
.fda-status-sec .inner {max-width: 1432px;margin: 0 auto;padding: 0 16px 246px;}

.fda-color-main { color: #322879; }

.mo-only { display: none; }

.fda-item-fade { opacity: 0; transform: translateY(40px); will-change: opacity, transform; }

.fda-status-chart-wrap {display: flex;align-items: center;justify-content: space-between;gap: 10px;margin-bottom: 160px;}
.fda-chart-left {flex: 1;max-width: 488px;text-align: center;}
.fda-chart-left img { width: 100%; height: auto; }

.fda-chart-right {flex: 1;max-width: 756px;}
.fda-chart-title {font-size: 40px;font-weight: 700;color: var(--main-color);margin-bottom: 64px;text-align: center;letter-spacing: -0.05em;}

.fda-bar-list { list-style: none; padding: 0; margin: 0; }
.fda-bar-list li {display: flex;align-items: center;gap: 20px;margin-bottom: 20px;position: relative;}
.f-label {width: 94px;font-size: 18px;font-weight: 700;color: var(--main-color);text-align: right;line-height: 1.33;letter-spacing: -0.05em;}
.f-flag {width: 43px;height: 43px;border-radius: 50%;overflow: hidden;position: absolute;left: 123px;top: 50%;transform: translateY(-50%);}
.f-flag img { width: 100%; height: 100%; object-fit: cover; }
.f-track {flex: 1;background: #fff;border-radius: 0;height: 68px;overflow: hidden;}
.f-fill {background: var(--main-color);height: 100%;display: flex;align-items: center;justify-content: flex-end;padding-right: 10px;color: #fff;font-size: 20px;font-weight: 700;letter-spacing: -0.05em;}

.fda-chart-source {text-align: center;font-size: 11px;color: #888;margin-top: 46px;letter-spacing: -0.05em;line-height: 1.63;}

.fda-status-middle {text-align: center;margin-bottom: 246px;}
.fda-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--main-color);
    color: var(--main-color);
    padding: 0 34px;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 0;
    margin-bottom: 64px;
    transition: all 0.3s;
    height: 64px;
    justify-content: center;
    letter-spacing: -0.05em;
}
.fda-link-btn img {width: 10px;transition: all 0.3s;}
.fda-link-btn:hover { background: #322879; color: #fff; }

.fda-link-btn:hover img{
filter: brightness(0) invert(1);
}
.fda-middle-desc {font-size: 28px;line-height: 1.78;color: #000;font-weight: 400;letter-spacing: -0.05em;}

.fda-status-table-wrap { text-align: center; }
.fda-table-header {margin-bottom: 64px;}
.fda-table-title {font-size: 40px;font-weight: 700;color: #000;line-height: 1.55;margin-bottom: 20px;letter-spacing: -0.05em;}
.fda-table-note {font-size: 11px;color: #888;line-height: 1.63;letter-spacing: -0.05em;}

.fda-table-box { width: 100%; overflow-x: auto; }
.fda-table-box table {width: 100%;border-collapse: collapse;text-align: center;font-size: 16px;min-width: 600px;}
.fda-table-box th {background: var(--main-color);color: #fff;font-weight: 700;padding: 18px 10px;font-size: 20px;letter-spacing: -0.05em;}
.fda-table-box td {padding: 12px 10px;color: #000;letter-spacing: -0.05em;}
.fda-table-box td:first-child {
    color: #888888;
    font-weight: 600;
}

.fda-table-box td[rowspan] {
    border-bottom: 1px solid #DBDBDB;
    font-size: 18px;
    font-weight: 700;
    padding-top: 12px;
}
.fda-table-box tr.t-border-bottom td {border-bottom: 1px solid #ddd;padding-bottom: 27px;} 

.t-group { font-weight: 800; color: #111; }
.t-name {font-weight: 500;color: #000;font-size: 18px;}
.t-species {font-style: italic;color: #000;font-weight: 400;font-size: 16px;}
.t-dot {display: inline-block;width: 8px;height: 8px;background: var(--main-color);border-radius: 50%;}
.t-gray {
    background: #FAFAFA;
}

.top-space td {
    padding-top: 27px;
}

.fda-table-box tr:last-child.t-border-bottom td, .fda-table-box tr td[rowspan='2'] {
    border-bottom: 3px solid var(--main-color);
}

.fda-process-sec {
    background-color: var(--main-color);
    padding: 120px 16px 0;
    color: #fff;
}
.fda-process-sec .inner {max-width: 1432px;margin: 0 auto;    overflow: hidden;}
.fda-process-title,
.fda-process-item {
    opacity: 0;
    transform: translateY(40px);
}
.fda-process-title {font-size: 80.3px;font-weight: 700;text-align: center;margin-bottom: 160px;line-height: 1.15;letter-spacing: -0.05em;}

.fda-process-list {position: relative;
    margin: 0; padding: 0;
     
}

.fda-process-item {/*height: 420px;*/overflow: hidden;transition: height 0.4s cubic-bezier(0.25, 1, 0.5, 1);
} 
.fda-process-item.is-shrunk {
    height: var(--stack-gap);
}
/*
.fda-process-item:nth-child(3).is-shrunk,
.fda-process-item:nth-child(5).is-shrunk,
.fda-process-item:nth-child(6).is-shrunk {
    height: var(--stack-gap-wide);
}
*/
.f-card {
    position: sticky;
    top: calc(var(--header-height, 0px) + var(--tab-height, 0px) + 20px);
    border-top: 0.5px solid rgba(255,255,255,0.3);
    display: flex;
    align-items: flex-start;
    padding: 1.7vw 0 9.5vw;
    /*min-height: 420px;*/
    background: var(--main-color);
} 

.fda-process-item .f-num {font-size: 24px;font-weight: 700;width: 4.792vw;flex-shrink: 0;letter-spacing: -0.05em;margin-top: 20px;}
.fda-process-item .f-name {width: 33vw;flex-shrink: 0;padding-right: 45px;}
.fda-process-item .f-name strong {display: block;font-size: 44px;font-weight: 700;line-height: 1.5;letter-spacing: -0.05em;}
.fda-process-item .f-name span {display: block;font-size: 44px;font-weight: 700;line-height: 1.5;letter-spacing: -0.05em;}
.fda-process-item .f-desc {flex: 1;font-size: 28px;line-height: 1.78;color: #fff;word-break: keep-all;letter-spacing: -0.05em;}


@media (min-width: 1090px) and (max-width: 1204px) {
.fda-process-item .f-desc {font-size: 25px;}
.fda-process-item .f-name strong, .fda-process-item .f-name span {font-size: 41px;} 
}

@media (min-width: 1025px) and (max-width: 1089px) {
.fda-process-item .f-desc {font-size: 23px;}
.fda-process-item .f-name strong, .fda-process-item .f-name span {font-size: 38px;} 
.fda-process-item .f-num {font-size: 22px;}
}



.duolac-deposit-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    will-change: opacity, transform;
}

.duolac-deposit-reveal.reveal-active {
    opacity: 1;
    transform: translateY(0);
}

.duolac-deposit-safe-manage {
    padding: 246px 16px 0;
    background-color: #fff; 
    text-align: center;
}

.duolac-deposit-wrap {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}

.duolac-deposit-main-tit {
    font-size: 80.3px;
    font-weight: 700;
    margin-bottom: 114px;
    letter-spacing: -0.05em;
    color: #000;
    line-height: 1.15;
}

.duolac-deposit-main-desc {
    font-size: 28px;
    font-weight: 400;
    margin-bottom: 160px;
    letter-spacing: -0.05em;
    color: #000;
    line-height: 1.78;
}

.duolac-deposit-item {
    text-align: left; 
    overflow: hidden;
}
.duolac-deposit-item + .duolac-deposit-item {
    margin-top: 92px;
    padding-top: 92px;
    border-top: 1px solid #DBDBDB;
}
.duolac-deposit-item-header {
    display: flex;
    align-items: flex-start;
    margin-bottom: 46px;
    flex-direction: column;
}

.duolac-deposit-num {
    font-size: 20px;
    font-weight: 700;
    color: #000;
    margin-bottom: 20px;
    letter-spacing: -0.05em;
}

.duolac-deposit-sub-tit {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.55;
    color: #000;
}

.duolac-deposit-desc {
    font-size: 28px;
    color: #000;
    line-height: 1.78;
    margin-bottom: 120px;
}
.duolac-deposit-desc.desc-second {
    margin-bottom: 24px;
}

.duolac-deposit-info-box {
    background-color: #55278c; 
    color: #fff;
    padding: 40px 60px;
    border-radius: 10px;
    margin-bottom: 60px;
    margin-left: 58px;
    display: none;
}

.duolac-deposit-info-text {
    font-size: 16px;
    line-height: 1.7;
}

.duolac-deposit-info-text strong {
    font-size: 18px;
    font-weight: 700;
    display: inline-block;
    margin-bottom: 10px;
}

.duolac-deposit-graphic-area {
}

.duolac-deposit-graphic-tit {
    font-size: 40px;
    font-weight: 700;
    color: #000;
    margin-bottom: 46px;
    letter-spacing: -0.05em;
    text-align: center;
}

.duolac-deposit-animation-container {
    display: flex;
    align-items: center;
    position: relative;
    padding: 20px 0;
}

.duolac-deposit-strain-view {
    width: 160px;
    height: 160px;
    position: relative;
}
.duolac-deposit-strain-view.small {
    width: 110px;
    height: 110px;
}
.duolac-deposit-strain-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.duolac-deposit-ani-step {
    opacity: 0; 
    transition: opacity 0.6s ease, transform 0.6s ease;
    will-change: opacity, transform;
}

.duolac-deposit-graphic-area.reveal-active .duolac-deposit-ani-step {
    opacity: 1;
}

.duolac-deposit-start {
    text-align: center;
    transform: translateX(-20px); 
}
.duolac-deposit-graphic-area.reveal-active .duolac-deposit-start {
    transform: translateX(0);
    transition-delay: 0s;
}

.duolac-deposit-strain-name {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #55278c;
    margin-top: 15px;
}

.duolac-deposit-connector {
    position: relative;
    width: 250px; 
    height: 160px; 
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 0 30px;
    transform: scale(0.95);
}
.duolac-deposit-graphic-area.reveal-active .duolac-deposit-connector {
    transform: scale(1);
    transition-delay: 0.6s;
}

.duolac-deposit-arrow {
    position: absolute;
    left: 0;
    width: 100%;
    object-fit: contain;
}

.duolac-deposit-lines {
    position: absolute;
    right: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 30px 0; 
    box-sizing: border-box;
    display: none; 
}
.duolac-deposit-lines img {
    height: 1px; 
    width: auto;
}

.duolac-deposit-center-logos {
    position: absolute;
    right: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px 0; 
    box-sizing: border-box;
}
.duolac-deposit-logo-wrap {
    width: 50px;
    height: 50px;
    position: relative;
}
.duolac-deposit-logo-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.duolac-deposit-results {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 320px; 
    transform: translateX(20px); 
}
.duolac-deposit-graphic-area.reveal-active .duolac-deposit-results {
    transform: translateX(0);
    transition-delay: 1.2s;
}

.duolac-deposit-result-item {
    display: flex;
    align-items: center;
}

.duolac-deposit-result-text {
    font-size: 15px;
    color: #333;
    line-height: 1.5;
    margin-left: 20px;
}
.duolac-deposit-result-text strong {
    font-size: 18px;
    font-weight: 700;
}


.duolac-deposit-wipe-container {
    position: relative;
    display: inline-block; 
    width: 100%;
    max-width: 100%; 
    overflow: hidden; 
    
    clip-path: inset(0 100% 0 0); 
    
    transition: clip-path 2.0s ease-out; 
    will-change: clip-path; 
}

.duolac-deposit-graphic-area.reveal-active .duolac-deposit-wipe-container {
    clip-path: inset(0 0 0 0);
    
}

.duolac-deposit-wipe-img {
    width: 100%; 
    height: auto;
    display: block;
}
.duolac-deposit-flex-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
}
.duolac-deposit-flex-row.align-center {
    align-items: center;
}
.duolac-deposit-flex-row .flex-1 {flex: 1;position: relative;width: 100%;}
.duolac-deposit-flex-row .flex-1\.2 { flex: 1.2; } 

.duolac-deposit-logo-col {
    max-width: 300px; 
    flex-shrink: 0;
    margin-top: -77px;
}
.duolac-deposit-img-row {
    text-align: right;
}
.duolac-deposit-img-row img {
    max-width: 620px;
}

.duolac-deposit-cert-list {
    margin-top: 160px;
    text-align: center;
}
.duolac-deposit-cert-list img {
    max-width: 874px;
    height: auto;
    margin: 0 auto;
}

.duolac-deposit-diagram-col {
    text-align: right; 
}
.duolac-deposit-diagram-col img {
    width: 100%;
}

.duolac-deposit-diagram {
    position: relative;
    padding-bottom: 10vw;
    margin-bottom: 5vw;
}


.duolac-deposit-diagram .duolac-deposit-diagram-col {
    position: absolute;
    top: -130px;
    right: -5vw;
    max-width: 43.907vw;
}

@media (min-width: 1450px) and (max-width: 1919px) {
 .duolac-deposit-diagram {min-height: 585px;}
}
@media (min-width: 1920px) {
 .duolac-deposit-diagram {min-height: 665px;}
 .duolac-deposit-diagram .duolac-deposit-diagram-col {max-width: 834px;}
}
.onestop-hero-section {
    position: relative;
    height: 250vh; 
    background-color: #fff; 
}

.onestop-hero-section .hero-sticky {
    position: sticky;
    top: calc(var(--header-height) + var(--tab-height));
    width: 100%;
    height: calc(100vh - var(--header-height) - var(--tab-height));
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.onestop-hero-section .hero-bg {
    background-image: url(/design/cbtis/brand/b2a3b0f00b3f716af9c315398cb8343b23737bc8.jpg);
    position: absolute;
    background-repeat: no-repeat;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100vh - var(--header-height));
    background-size: cover;
    background-position: 0;
    z-index: 1;
    will-change: opacity;
}
 .onestop-hero-section .hero-title span {
    font-size: 40px;
    display: block;
    margin-bottom: 52px;
    letter-spacing: -0.05em;
}

.onestop-hero-section .hero-title-wrap {
    position: relative;
    z-index: 3;
    color: #fff;
    padding: 0 20px;
    text-align: center;
}
.onestop-hero-section .sub-title {
    display: block;
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 52px;
    letter-spacing: -0.05em;
}
.onestop-hero-section .main-title {
    font-size: 80.3px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.05em;
    margin: 0;
}

.onestop-hero-section .hero-subtext-wrap {
    position: absolute;
    inset: 0;
    z-index: 4; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
}

.onestop-hero-section .sub-text {
    font-size: 28px;
    color: #000;
    line-height: 1.78;
    margin-bottom: 0;
    word-break: keep-all;
    
    opacity: 0;
    transform: translateY(30px);
    text-align: center;
    letter-spacing: -0.05em;
    font-weight: 400;
}
.onestop-hero-section .sub-text:last-child { margin-bottom: 0; }
.onestop-hero-section .color-purple { color: var(--main-color); }


.onestop-flow-section {
    padding: 160px 0 183px;
    background-color: #fff;
    border-bottom: 1px solid #DBDBDB;
    margin: 0 16px;
}

.onestop-flow-inner {
    max-width: 1400px; 
    margin: 0 auto;
}

.onestop-flow-list {
    display: flex;
    flex-wrap: nowrap; 
    justify-content: space-between;
    align-items: flex-start;
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
}

.onestop-flow-item {
    position: relative;
    flex: 1; 
    text-align: center;
}

.onestop-flow-item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 30px;
    right: 0;
    transform: translate(50%, -50%); 
    width: 41px;
    height: 31px;
    background: url('/design/cbtis/brand/onestop_Arrow.svg') no-repeat center center;
    background-size: contain;
    z-index: 1;
}

.onestop-flow-item .icon-box img {
    height: 80px; 
    object-fit: contain;
    margin-bottom: 32px;
}

.onestop-flow-item .text-box {
    font-size: 18px;
    color: #000;
    font-weight: 400;
    margin: 0;
    word-break: keep-all;
    line-height: 1.15;
    letter-spacing: -0.05em;
}

.onestop-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    transition-delay: calc(var(--i) * 0.1s);
}

.onestop-reveal.is-active {
    opacity: 1;
    transform: translateY(0);
}
 
.carouselTit h3, 
.carouselTit p {
    opacity: 0;
    transform: translateY(30px); 
}
.carouselTit {
    text-align: center;
    padding: 246px 16px 0;
}

.carouselTit h3 {
    font-size: 80.3px;
    font-weight: 700;
    letter-spacing: -0.05em;
    margin-bottom: 114px;
}

.carouselTit p {
    font-size: 28px;
    letter-spacing: -0.05em;
    line-height: 1.78;
    font-weight: 400;
    margin-bottom: 160px;
}
 



.gmp-factory-section {
    padding: 160px 16px 245px;
    background-color: #fff;
    overflow: hidden;
}

.gmp-factory-inner {
    margin: 0 auto;
    max-width: 1400px;
}

.gmp-factory-info {
    text-align: center;
    margin-bottom: 160px;
}

.gmp-factory-tit {
    font-size: 40px;
    font-weight: 700;
    color: #000;
    line-height: 1.15;
    margin-bottom: 46px;
    letter-spacing: -0.05em;
}

.gmp-factory-desc p {
    font-size: 27px;
    color: #000;
    line-height: 1.37;
    margin-bottom: 30px;
    word-break: keep-all;
    letter-spacing: -0.04em;
}
.gmp-factory-desc p:last-child {margin-bottom: 0;font-weight: 400;}

p {}

.gmp-factory-swiper {
    overflow: visible !important; 
}

.gmp-factory-swiper .swiper-wrapper {
    display: flex;
    justify-content: space-between;
}

.gmp-factory-swiper .swiper-slide {
    width: calc(25% - 15px); 
    height: auto;
}

.gmp-factory-swiper .img-box {
    width: 100%;
    overflow: hidden;
    background-color: #f8f8f8;
    aspect-ratio: 344 / 230;
}

.gmp-factory-swiper .img-box img {
    width: 100%;
    display: block;
    transition: transform 0.5s ease;
    height: 100%;
    object-fit: cover;
}

.gmp-reveal-group > *, 
.gmp-reveal-item {
    opacity: 0;
    transform: translateY(40px);
} 

 

.ferment-proc-section {
    padding: 246px 16px;
    background-color: var(--main-color); 
    color: #fff;
}

.ferment-proc-inner {
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    max-width: 1620px;
}
.ferment-proc-info > *,
.ferment-list-tit,    
.ferment-proc-item {
    opacity: 0;
    transform: translateY(40px);
}
.ferment-proc-info {
    flex: 1;
    position: sticky; 
    top: calc(var(--header-height, 0px) + var(--tab-height, 0px) + 100px);
}

.ferment-info-tit {
    font-size: 80.3px;
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 114px;
    letter-spacing: -0.05em;
}

.ferment-info-desc p {
    font-size: 28px;
    line-height: 1.78;
    color: #fff;
    margin-bottom: 30px;
    word-break: keep-all;
    letter-spacing: -0.05em;
}
.ferment-info-desc p:last-child { margin-bottom: 0; }

.ferment-proc-list-wrap {
    flex: 0.8;
}

.ferment-list-tit {
    font-size: 40px;
    font-weight: 700;
    padding-bottom: 40px;
}

.ferment-proc-list {
    margin: 0; padding: 0; list-style: none;
}

.ferment-proc-item {
    height: var(--ferment-item-h);
    overflow: hidden;
    transition: height 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.ferment-proc-item.is-shrunk {
    height: var(--ferment-stack-gap);
}

.ferment-proc-item .f-card {
    position: sticky;
    top: calc(var(--header-height, 0px) + var(--tab-height, 0px) + 100px);
    display: flex;
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    align-items: stretch;
    padding: 32px 0;
    box-sizing: border-box;
    min-height: 100%;
}
.ferment-proc-item:last-child .f-card {
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);}
.ferment-proc-item.is-shrunk .f-card {}
.ferment-proc-item .f-icon {
    width: 168px;
    flex-shrink: 0;
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, 0.4);
    display: flex;
    align-items: center;
}
.ferment-proc-item .f-icon img {
    width: auto;
    margin: 0 auto;
}

.ferment-proc-item .f-text {
    flex: 1;
    padding-left: 40px;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
}

.ferment-proc-item .f-name {
    font-size: 34px;
    font-weight: 700;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -0.05em;
    line-height: 1.41;
}

.ferment-proc-item .f-num {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.05em;
    margin-top: -3px;
}

.ferment-proc-item .f-desc {
    font-size: 26px;
    color: #fff;
    margin: 0;
    line-height: 1.53;
    letter-spacing: -0.05em;
    padding-left: 34px;
}
@media (min-width: 1025px) and (max-width: 1374px) {

.ferment-info-tit {
    font-size: 5vw;
    margin-bottom: 7vw;
}

.ferment-info-desc p {
    font-size: 1.6vw;
}

.ferment-proc-item .f-name {
    font-size: 2vw;
}

.ferment-proc-item .f-num {
    font-size: 1.2vw;
}

.ferment-proc-item .f-desc {
    font-size: 1.5vw;
}
}

.mainBrand {
    margin: 0 auto 200px;
    width: 100%;
    /* max-width: 1920px; */
    overflow: hidden;
}

.mainBrand .item_wrap {
    display: flex;
    /* gap: 20px; */
    height: 360px;
}

.mainBrand .item {
    position: relative;
    height: 100%;
    transition: 0.5s;
    flex: 1;
    background: #000;
}

.mainBrand .item:hover {
    flex: 1.3;
}
.mainBrand .item video {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    display: block;
}

.mainBrand .item>a>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.mainBrand .txt_wrap {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    color: var(--white);
    width: 100%;
    padding: 24px 36px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0.03%, rgba(0, 0, 0, 0.12) 64.91%, rgba(0, 0, 0, 0) 100%);
    cursor: pointer;
    letter-spacing: -0.04em;
    font-size: 40px;
    font-weight: 600;
    line-height: 1.4;
}

.mainBrand .tit {
    transition: 0.5s;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
}
.mainBrand .item .tit img+img {
    transition: 0.9s;
}

.mainBrand .item:hover .tit img+img {
    transform: rotate(180deg);
}


.mainBrand .sub_tit {
    font-size: 20px;
    line-height: 1.6;
    font-weight: 600;
    transition: 0.5s;
    word-break: keep-all;
}

.mainBrand .-pc .item:nth-child(2) .sub_tit,
.mainBrand .-pc .item:nth-child(3) .sub_tit {
    width: 70%;
}

.mainBrand .-pc .item:hover .sub_tit {
    width: 100%;
}
/* =========================================
   글로벌 K-프로바이오틱스 (Sticky 구조)
========================================= */
.global-hero-section {
    position: relative;
    height: 400vh; /* 교체 연출을 위해 스크롤 길이를 조금 더 늘렸습니다 */
    background-color: #fff;
}

.global-hero-section .hero-sticky {
    position: sticky;
    top: var(--header-height, 0px);
    height: calc(100vh - var(--header-height, 0px));
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 배경 및 초기 타이틀 */
.global-hero-section .hero-bg { position: absolute; inset: 0; background-size: cover;
    background-size: 136%;
    background-position: 45% 61%; z-index: 1; }
.global-hero-section .hero-dim { position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0.4); z-index: 2; }
.global-hero-section .hero-title-wrap { position: relative; z-index: 3; color: #fff; text-align: center; }
.global-hero-section .main-title { font-size: 56px; font-weight: 800; line-height: 1.3; }

/* 서브텍스트 컨테이너 (중앙 정렬) */
.global-hero-section .hero-subtext-wrap {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
}

/* 텍스트 공통 (기본 숨김) */
.global-hero-section .sub-text {
    opacity: 0;
    transform: translateY(30px);
    text-align: center;
    word-break: keep-all;
    color: #333;
}

/* 첫 번째 대제목 (절대 위치로 중앙 고정) */
.global-hero-section .highlight-tit {
    position: absolute;
    font-size: 32px;
    font-weight: 700;
    color: #000;
    width: 100%;
}

/* 나머지 문단 그룹 */
.global-hero-section .sub-text-group {
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.global-hero-section .sub-text-group .sub-text { font-size: 18px; line-height: 1.7; }
.global-hero-section .color-purple { color:var(--main-color); }
/* =========================================
   하단 슬라이드 & 스크롤 애니메이션
========================================= */
.bottom-slider-wrap {
     /* 위쪽 텍스트 영역 및 하단 여백 */
     padding: 0 0 0 40px;
}

.bottom-gallery-swiper {
    width: 100%;
    border-radius: 0;
    overflow: hidden; 
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    padding-bottom: 246px !important;
}

/* 자바스크립트가 화면에 도달했을 때 붙여주는 클래스 */
.bottom-gallery-swiper.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.bottom-gallery-swiper .img-box {
    position: relative;
    width: 100%;
    aspect-ratio: 540/720; /* 이미지 찌그러짐 방지용 비율 고정 (원하시는 비율로 변경 가능) */
    background-color: #f4f4f4; /* 이미지 로딩 전 빈 공간 회색 처리 */
    border-radius: 0;
    overflow: hidden;
}

.bottom-gallery-swiper .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- Swiper 컨트롤러 디자인 (듀오락 브랜드 톤) --- */
.bottom-gallery-swiper .swiper-pagination-bullet-active {
    background-color: #322879; /* 듀오락 보라색 */
}

.bottom-gallery-swiper .swiper-button-next,
.bottom-gallery-swiper .swiper-button-prev {
    color: #fff;
    background-color: rgba(0, 0, 0, 0.4);
    width: 40px; height: 40px;
    border-radius: 50%;
    margin-top: -20px; /* 화살표 살짝 위로 (페이징 공간 보정) */
}

.bottom-gallery-swiper .swiper-button-next:after,
.bottom-gallery-swiper .swiper-button-prev:after {
    font-size: 16px;
    font-weight: bold;
}

.global-achieve-wrap {
    max-width: 1368px; /* 시안 상 살짝 안쪽으로 모인 레이아웃 */
    margin: 0 auto 160px;
    padding: 0 16px;
}

.achieve-grid {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* 개별 아이템 기본 세팅 (PC 2단) */
.achieve-item {
    width: 50%;
    padding: 0;
    box-sizing: border-box;
    border-bottom: 1px solid #DBDBDB; /* 하단 가로줄 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 400px;
}

/* PC: 홀수번째(왼쪽) 항목 오른쪽에만 세로줄 추가 */
.achieve-item:nth-child(odd) {
    /* border-right: 1px solid #eaeaea; */
    position: relative;
    padding-right: 6.25vw;
}
.achieve-item:nth-child(odd)::after {
    content: "";
    background: #DBDBDB;
    width: 1px;
    height: 212px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
.achieve-item:nth-child(even) {
    padding-left: 6.25vw;
}
.achieve-tit {
    font-size: 43px;
    font-weight: 700;
    color: #000;
    line-height: 1.15;
    margin: 0 0 36px;
    letter-spacing: -0.05em;
}

.achieve-item.delay-2 .achieve-tit {
    margin: 0 0 16px;
}

.achieve-desc {
    font-size: 18px;
    color: #B1B1B1;
    margin: 0;
    word-break: keep-all;
    letter-spacing: -0.05em;
}

.achieve-logo {width: 136px;}

.achieve-logo img {
     /* 로고 사이즈 조정 */
}


.bottom-gallery-swiper .swiper-pagination,
.bottom-gallery-swiper .swiper-button-next, 
.bottom-gallery-swiper .swiper-button-prev {display:none;}
 
    


/* =========================================
   글로벌 맵 스타일
========================================= */
.global-map-section {
    max-width: 1432px;
    margin: 0 auto;
    padding: 0 16px;
}

.map-viewport {
    position: relative;
    width: 100%;
    /* aspect-ratio: 16 / 9; */ /* 지도가 들어갈 박스 비율 */
    /* background-color: #f8f9fa; */ /* 지도 밖 빈 공간 배경색 */
    /* border-radius: 20px; */
    overflow: hidden; /* 줌인 했을 때 바깥으로 삐져나가는 것 숨김 */
}

/* ★ GSAP이 움직일 실질적인 맵 박스 */
.map-scale-box {
    position: relative;
    width: 100%;
    height: 100%;
    transform-origin: center center; 
    will-change: transform;
}

.base-map {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 지도 이미지가 잘리지 않고 박스 안에 쏙 들어가게 */
    opacity: 0; /* GSAP이 켜줄 예정 */
}

/* --- 핀 위치 & 스타일 --- */
.map-pin {
    position: absolute;
    width: 32px; /* 핀 크기 설정 */
    height: 32px;
    margin-top: -32px; /* 핀의 끝부분이 좌표에 꽂히도록 보정 */
    margin-left: -16px;
    cursor: pointer;
    z-index: 10;
    /* GSAP 애니메이션을 위해 크기 0으로 시작 */
    transform: scale(0); 
}
.map-pin img { width: 100%; display: block; }
.map-pin:hover { z-index: 11; filter: drop-shadow(0 5px 10px rgba(0,0,0,0.3)); }

.map-pin.korea     {top: 29%;left: 84%;} /* 한국 위치 */
.map-pin.singapore {top: 53%;left: 78%;} /* 싱가포르 위치 */
.map-pin.denmark   {top: 17%;left: 46%;} /* 덴마크 위치 */

.map-tooltip-wrap {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 100;
    pointer-events: none; /* 빈 공간 클릭 방해 금지 */
}

.map-tooltip {
    position: absolute; /* JS가 위치를 잡아주도록 절대 위치 변경 */
    display: none;
    background: #fff;
    padding: 32px;
    border-radius: 10px;
    border: 0;
    box-shadow: 4px 2px 12px 0px rgba(0, 0, 0, 0.08);
    text-align: left;
    min-width: 289px;
    pointer-events: auto;
    
    /* JS에서 잡아준 left 좌표를 기준으로 정중앙에 오도록 설정 */
    transform: translateX(-50%);
    width: max-content;
}

/* ★ 말풍선 위쪽 뾰족한 삼각형 꼬리 추가 */
.map-tooltip::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 24px;
    /* transform: translateX(-50%); */
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid rgba(255, 255, 255, 0.95);
}
.map-tooltip.tail-right::before {
    left: auto;
    right: 16px; /* 꼬리가 오른쪽 핀 중앙에 오게 됨 */
}
.map-tooltip.is-active { 
    display: block; 
    animation: tipFadeUp 0.3s ease forwards; 
}

.tooltip-tit {font-size: 28px;font-weight: 700;color: #000;line-height: 1.42;}
.tooltip-desc {font-size: 28px;color: #000;font-weight: 700;line-height: 1.42;}
.tooltip-sub {font-size: 18px;color: #888;letter-spacing: -0.05em;margin-top: 24px;line-height: 1.55;display: block;font-weight: 400;}

/* 애니메이션 동작 시 X축 중앙 정렬(-50%) 유지 필수! */
@keyframes tipFadeUp {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}





@media (min-width: 468px) and (max-width: 1024px) {
    .br_tablet {display:inline-block;}
}


@media (max-width: 1024px) {
:root { 
    --tab-height: 47px;
    --slot-size: 13.8889vw;
    --stack-gap: 146px;
    --ferment-item-h: 160px; 
    --ferment-stack-gap: 152px; 
}
.pc-only { display: none; }
    .mo-only { display: block; }
.tab-navi--links {
        display: flex;
        overflow-x: auto;
        white-space: nowrap;
        -ms-overflow-style: none;
        scrollbar-width: none;
        padding: 0 15px;
        gap: 16px;
    } 
    .tab-navi--links::-webkit-scrollbar {
        display: none;
    }

    .tab-navi--links li {
        flex: 0 0 auto;
    }
.tab-navi--links li:not(:last-child):not(.mo)::after {display: none;}
    .tab-navi--links li.mo {display:inline-block;}
    .tab-navi--links li.mo::after {
    background: #DBDBDB;
    width: 3px;
    height: 3px;
    border-radius: 50%; 
}
    .tab-navi--links li a {
        display: block;
        font-size: 14px;
        font-weight: 500;
        color: #888;
    }
    
.hero-diamond { width: 160px; height: 160px; border-radius: 40px; }
    .diamond-logo {width: 93px;}
    .hero-diamond-text .line { font-size: 22px; }
.hero-diamond-text .line:nth-child(2) {padding: 4px 0;}
.hero-diamond-text .line:nth-child(2) span {font-size:20px;}
.hero-diamond-text .line:nth-child(3) span {font-size:24px;}
    .brand-tabs { flex-wrap: wrap; }
    .brand-tabs li { flex: 1 1 33.33%; } 
    .brand-content-section {padding: 120px 16px;}
    .brand-content-section:last-child {
    padding-bottom: 98px;
}
    .brand-content-section .inner .flex-layout {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
    .brand-content-section h2 {font-size: 62px;margin-bottom: 16px;}
    .brand-content-section p {
    font-size: 20px;
    line-height: 1.55;
}
    .brand-content-section .huge-num {font-size: 72px;width: 100%;text-align: right;font-weight: 600;}
    .brand-content-section .huge-num span {font-size: 21px;}

    .logo-transition-section img {/*width: 93px;*/}
        .philosophy-detail {
    padding: 92px 0 0;
}
    .value-circles {
    margin-bottom: 64px;
}
    .circle-item {margin: 0;width: 177px;height: 171px;}
    .circle-item:nth-child(1) {}
    .circle-item:nth-child(2){width:176px;height:171px;margin: 0 -20px;}
    .circle-item:nth-child(3) {}
    .circle-item:not(:last-child)::after { display: none; }
.circle-item p{
    font-size: 13px;
    line-height: 1.38;
}
 
.circle-item .eng {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 12px;
}
    .founder-wrap {
    flex-direction: column;
    gap: 64px;
} 
    .founder-info {width: 100%;margin-bottom: 50px;}
    .message-box .desc {font-size: 15px;line-height: 1.86;margin-bottom: 25px;}
    .final-msg {font-size: 20px;margin-top: 45px;}
    .our-story-desc {
    margin-top: 28px;
    margin-left: 0;
    font-size: 15px;
    line-height: 1.86;
}
    .our-story-desc .pc{display:none;}
    .our-story-desc .mo{display:block;}
    .our-philosophy-desc {
    font-size: 20px;
    line-height: 1.55;
    margin-top: 0;
    gap: 5px;
}

.our-philosophy-desc span {
    height: 2.5px;
    width: 52px;
}
.br_mo {display:inline-block;}
.br_pc {display:none;}
.philosophy-detail {
    padding: 92px 0 0;
}
 
.circle-item .eng {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 12px;
} 
.founder-img {
    width: 65%;
    margin-left: 35%;
    height: 412px;
    margin-bottom: 16px;
}

.founder-img img {
    transform: scale(1);
}

.founder-sign .name {
    font-size: 13px;
    line-height: 1.38;
}

.founder-sign .sign-img {
    width: 120px;
}

    .story-hero .hero-sticky {} 
     .hero-bg {
    background-position: top -55px center;
    background-size: 128%;
}
    .hero-title { font-size: 35px; }
    .hero-subtexts .sub-text {font-size: 15px;padding: 0 16px;line-height: 1.86;}
    
    .sec-title {font-size: 40px;}
    .sec-title-top {
    font-size: 20px;
    margin-bottom: 20px;
}

.sec-desc {
    margin-top: 56px;
    font-size: 15px;
    line-height: 1.86;
    margin-bottom: 60px;
}
    .stat-list {flex-wrap: wrap;gap: 3.33333vw;display: flex;margin: 60px auto 0;padding: 0 0 48px;}
    
    .stat-list li {flex: 0 0 calc((100% - 3.33333vw) / 2);border: 1px solid rgba(255, 255, 255, 0.5);} 
    .stat-list li:nth-child(3), .stat-list li:nth-child(4) {
    margin-top: -6.66666vw;
}
    .slot-machine {font-size: var(--slot-size);
    height: var(--slot-size);
}
.slot-desc{
    line-height: 1.38;
    font-size: 13px;
    letter-spacing: -0.05em;
    padding-bottom: 92px;
}

.stat-list p {
    font-size: 3.6111vw;
    margin-top: 3.8889vw;
}

    .why-card, .why-card:nth-child(even) { flex-direction: column; text-align: center; gap: 20px; }
    .feature-circles { flex-wrap: wrap; }
    .history-list { flex-direction: column; gap: 30px; }
    
    .story-summary {
        padding: 96px 16px;
    }
    
    .summary-list {
        flex-direction: column; 
    }
    .summary-list p {
    font-size: 18px;
    line-height: 1.77;
}
    .summary-list li {
        width: 100%;
        padding: 18px 0;
    }
    
    .summary-list li:not(:last-child)::after {
        right: 50%;
        top: auto;
        bottom: 0;
        transform: translateX(50%);
        width: 202px;
        height: 1px;
    }
    .story-ingredients {
        padding: 92px 16px 175px;
    }
    
.ingredient-img {
    padding: 0 30px;
}
    .wave-divider svg {
        height: 80px; 
    }
    
    .story-ingredients-chart {
        padding: 10px 16px 50px;
    }
    .chart-legend {
        gap: 8px 0;
        justify-content: flex-start;
        margin-bottom: 35px;
        padding: 0 14px;
    }
    .chart-legend li {
        font-size: 12px;
        box-sizing: border-box;
        padding-right: 5px;
    }

    .chart-box {
        height: 300px;
        margin: 0 auto 48px;
        padding-bottom: 20px;
    }
    .y-axis-title {font-size: 12px;}
    .y-axis-wrapper {width: 20px;margin-right: 15px;}
    .grid-line span { font-size: 11px; left: -30px; width: 20px; top: -6px; }
    
    .bar-wrap { width: 6px; } 
    .bar-label { font-size: 9px; top: -14px; }
    .x-label { font-size: 12px; bottom: -25px; }
    
    .chart-caption {font-size: 11px;word-break: keep-all;line-height: 1.63;}
    
    .story-why {padding: 92px 16px 94px;}
    
    .why-header {text-align: left;margin-bottom: 60px;padding:0;}
    .why-title-en {font-size: 62px;margin-bottom: 16px;}
    .why-title-ko {font-size: 20px;}
    
    .why-row, .why-row.reverse {
        flex-direction: column;
        gap: 56px;
        margin-bottom: 48px;
    }
    .why-row.reverse {
        gap: 48px;
        }
    .why-row .text-box {
        text-align: center !important;
    }
    .why-row h3 {font-size: 20px;margin-bottom: 20px;}
    .why-row h3 br {} 
    .why-row p {font-size: 15px;word-break: keep-all;line-height: 1.86;}
    
.why-row .img-box-pc {display:none;}
.why-row .img-box-mo {display:block;}
    .why-row .img-box img {max-width: 100%;} 

    .why-process ul {
        flex-wrap: wrap;
        transform: scale(1.1);
    }
    .why-process li {
        width: 25%;
        height: auto;
        aspect-ratio: 1 / 1;
        margin: 0 -10px;
    }
    .icon-circle {
        width: 9vw;
        height: 9vw;
        margin-bottom: 12px;
    }
    .why-process li::after { display: none; }
    .story-history { padding: 80px 0; }
.history-pc-area { display: none !important; }
    .history-mo-area { display: block; }
    
    .story-history {padding: 92px 16px;}
    .history-header .sec-title {font-size: 40px;margin-bottom: 56px;}
    
    .era-title {font-size: 24px;margin-bottom: 28px;}
    
    .history-mo-area .mo-arrow {
        position: absolute;
        top: 80px; 
        width: 24px;
        height: 24px;
        margin-top: -12px;
        background-color: #2b2665;
        border: 1px solid rgba(255,255,255,0.5);
        border-radius: 50%;
        color: #fff;
        z-index: 10;
    }
    .history-mo-area .mo-arrow::after {font-size: 10px;font-weight: bold;display: none;}
    .history-mo-area .mo-prev {left: 50%;margin-left: -150px;top: 57px;width: 20px;height: 20px;background: url(/design/cbtis/brand/Arrowbtn_l_m.svg) no-repeat;background-size: cover;} 
    .history-mo-area .mo-next {right: auto;left: 50%;margin-left: 125px;top: 57px;width: 20px;height: 20px;background: url(/design/cbtis/brand/Arrowbtn_r_m.svg) no-repeat;background-size: cover;} 

    .history-mo-area .mo-year-swiper {}
    .history-mo-area .year-item { width: 160px;  }

    .history-mo-area .event-card {
        background-color: rgba(255, 255, 255, 0.1);
        padding: 16px 6px;
        border-radius: 8px;
        height: 100%;
        text-align: center;
    }
    .history-mo-area .event-card .events li {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
        padding-bottom: 16px;
        margin-bottom: 16px;
        border-bottom: 1px dashed rgba(255, 255, 255, 0.4);
    }
    .history-mo-area .event-card .events li:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
    .history-mo-area .event-card .month {font-size: 13px;margin-bottom: 6px;font-weight: 700;}
    .history-mo-area .event-card .desc {font-size: 13px;line-height: 1.38;color: #fff;word-break: keep-all;font-weight: 400;}
    .timeline-node .year-num {font-size: 36px;letter-spacing: 0;}
   .chart-area-wrap h4 {
    font-size: 20px;
    line-height: 1.55;
    margin-bottom: 20px;
}

.chart-area-wrap h5 {
    line-height: 1.86;
    font-size: 15px;
    margin-bottom: 60px;
}

.chart-legend .dot {
    width: 8px;
    height: 8px;
    margin-right: 6px;
}

.chart-legend li:nth-child(1), .chart-legend li:nth-child(6) {
    width: 50%;
}

.chart-legend li:nth-child(2), .chart-legend li:nth-child(3), .chart-legend li:nth-child(4), .chart-legend li:nth-child(5) {
    width: 25%;
} 
    .story-stats {
    padding: 35vw 16px 0;
}

.story-stats .sec-title {
    font-size: 35px;
    line-height: 1.37;
    margin-bottom: 20px;
}

.sec-title-sub {
    font-size: 20px;
    line-height: 1.3;
}

.story-why .why-row:not(.reverse) .text-box h3 {
    margin-bottom: 20px;
}

.story-why .why-row:not(.reverse) .img-box {
    width: auto;
    padding: 0 30px;
    max-width: 55vw;
}

.why-row + .why-row {
    margin-top: 92px;
}

.story-why .why-row.reverse .text-box h3 {
    margin-bottom: 48px; 
}
.story-why .why-row.reverse .img-box {
    aspect-ratio: 144 / 239;
    max-width: 45vw;
    margin: 0 auto 48px;
}

.why-row .source {
    font-size: 13px;
    margin-top: 18px;
}

.why-process {
    margin-top: 48px;
}

.icon-circle img {
    width: 8vw;
}

.why-process span {
    font-size: 13px;
}
.history-nav-wrap .swiper-slide {
    padding: 16px 8px;
    font-size: 13px;
}

.history-nav-wrap .swiper-slide-thumb-active {
    background: url(/design/cbtis/brand/triangle_m.svg) no-repeat top center;
}

.history-nav-wrap {
    margin-bottom: 48px;
}

.timeline-node .dot {
    width: 7px;
    height: 7px;
    margin: 0 auto 20px;
}

.timeline-node {
    margin-bottom: 16px;
}

.timeline-line {
    top: 3px;
}  
    .hero-subtexts p { font-size: 18px; margin-bottom: 15px; }





.tech-main-title { font-size: 40px; }
    .tech-sub-group p { font-size: 15px; margin-bottom: 15px; }
    
.tech-sub-group.pc{display:none;}
.tech-sub-group.mo{display:block;}
.tech-step-group .tech-step-txt {font-size: 24px;line-height: 1.37;}
    .tech-step-txt span {font-size: 15px;line-height: 1.53;}
    .tech-expand-pre { font-size: 26px; }
    .tech-huge-text {font-size: 36px;}
    
    .tech-bottom-group { top: calc(50% + 80px); }
    .tech-bottom-group .tech-step-txt { font-size: 20px; margin-bottom: 15px; }
    .tech-graph-title { font-size: 28px; }
    .tech-graph-desc {font-size: 15px;margin-top: 56px;margin-bottom: 60px;line-height: 1.86;}

.tech-graph-desc span {font-size:9px;top: 1px;}

.tech-chart-box {height: 280px;margin-bottom: 50px;margin-left: 15px;}
    .tech-chart-bars { padding: 0; }
    .tech-label {font-size: 10px;bottom: -35px;}
    .tech-chart-unit {margin-bottom: 28px;margin-top: 55px;font-size: 11px;}
    .tech-info-row {margin-bottom: 10px;}
    .tech-info-row dt {font-size: 11px;line-height: 1;width: 53px;}
    .tech-info-row dd {font-size: 11px;line-height: 1;}
    .tech-chart-legend {font-size: 12px;flex-wrap: wrap;gap: 24px;margin-bottom: 24px;}
    
    .tech-sec-title {font-size: 40px;margin-bottom: 56px;line-height: 1.2;}
    .tech-sec-desc {font-size: 15px;margin-bottom: 80px;line-height: 1.86;}
    
    .tech-principle-list { flex-direction: column; gap: 40px; }
      

    .tech-layer-label .label-sub {font-size: 13px;padding-bottom: 4px;}
    .tech-layer-label .label-main {font-size: 18px;}

    .tech-ly-1 {top: -21%;left: 22.5%;padding-top: 11px;padding-left: 85px;gap: 0;}
    .tech-ly-2 {bottom: -17px;left: 35%;transform: translateX(-50%);text-align: center;padding-bottom: 0;gap: 0;}
    
    .tech-graph-section {
    border-top: 1px solid #DBDBDB;
    padding-top: 60px;
}
.tech-split-top, .tech-split-bottom {
    font-size: 36px;
    line-height: 1.16;
    letter-spacing: -0.05em;
}

.tech-step-txt strong {
    font-size: 24px;
}

.tech-graph-group .tech-graph-txt {
    font-size: 24px;
    line-height: 1.58;
}

.tech-graph-group .tech-graph-txt span {font-size:15px;top: 3px;}
.tech-graph-group .tech-graph-txt strong {
    font-size: 28px;
    line-height: 1.71;
}

.tech-graph-group .tech-graph-txt + .tech-graph-txt {
    margin-top: 48px;
}

.tech-chart-legend span {
    gap: 6px;
}

.tech-dot {
    width: 8px;
    height: 8px;
}

.tech-y-axis {font-size: 10px;left: -17px;}

.tech-chart-info {
    border-top: 0;
    padding-top: 0;
}

.tech-y-axis li::after {
    top: 4px;
    right: -6px;
}

.tech-info-notices {
    margin-top: 20px;
    font-size: 10px;
    line-height: 1.66;
    padding-bottom: 92px;
}
    .tech-coating-area {
    padding: 92px 0;
}

.tech-coating-img-box > img {
    margin-left: 45px;
}

.tech-ly-1::after {
    bottom: -63px;
    left: -2px;
    width: 4px;
    height: 4px;
}

.tech-ly-2::after {
    top: -3px;
    right: -114px;
    width: 4px;
    height: 4px;
}

.tech-ly-2.tech-layer-label .label-sub {
    margin-top: 12px;
}

.tech-coating-desc-box {
    margin-top: 60px;
    text-align: left;
    font-size: 15px;
    line-height: 1.86;
}

.tech-coating-intro {
    margin-bottom: 120px;
}
.tech-principle-title {
    font-size: 20px;
    line-height: 1.55;
    margin-bottom: 20px;
}

.tech-media-box {
    margin-bottom: 20px;
}
.tech-step-flex {display:flex;align-items: center;justify-content: center;}

.tech-step-label {
    font-size: 20px;
    margin: 0;
    width: 128px;
}
    
.tech-step-desc {
    font-size: 15px;
    line-height: 1.6;
    text-align: left;
}
.tech-step-label.pc{display:none;}
.tech-step-label.mo{display:block;}

 
.tech-step-desc {
    font-size: 15px;
    line-height: 1.6;
    text-align: left;
}

.tech-patents-area {
    padding: 92px 0;
    background-size: 152%;
}

.tech-cert-item .national {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 12px;
    gap: 10px;
}

.tech-cert-item .national img {
    width: 24px;
    height: 24px;
}

.tech-cert-item .national p {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 8px;
}

.tech-cert-item .national p strong {
    font-size: 16px;
    font-weight: 500;
}

.tech-cert-wrap {
    padding: 0 18px;
}
.blend-predict-sec {padding: 80px 16px;}
    .blend-age-env-sec {padding: 92px 0;}
    .blend-formula-sec  {padding: 92px 0;}
    .blend-main-title {font-size: 35px;}
    .blend-sec-title {font-size: 40px;padding: 0 16px;margin-bottom: 56px;line-height: 1.3;}
    .blend-sec-subtitle {font-size: 20px;margin-bottom: 28px;padding: 0 16px;}
    .blend-sec-desc {font-size: 15px;padding: 0 15px;line-height: 1.86;}
    .blend-sec-desc.pc{display:none;}
    .blend-sec-desc.mo{display:block;}
    .blend-highlight-text {margin-top: 80px;font-size: 18px;line-height: 1.55;}
    
.blend-ngs-list {
    display: flex;
    flex-direction: column;
    gap: 6px; 
    list-style: none;
    padding: 0;
    margin: 0;
}

.blend-ngs-list li {
     padding: 24px 0; 
     display: grid;
     grid-template-columns: auto 1fr; 
     grid-template-rows: 22px 38px 24px;
     column-gap: 20px; 
     align-items: center;
     height: 176px;
}

.blend-icon {
    grid-column: 1;
    grid-row: 1 / 5; 
    display: flex;
    align-items: center; 
    justify-content: center;
     border-right: 1px solid #DBDBDB; 
    height: 100%;
    width: 112px;
    margin-bottom: 0;
}

.blend-icon img {
     transform: scale(0.5161);
}

.blend-step {
    grid-column: 2; 
    font-size: 14px;
    margin-bottom: 0;
    align-self: end;
}

.blend-ngs-list strong {
    grid-column: 2;
    font-size: 20px;
    line-height: 1.4;
    margin-bottom: 0;
}

.blend-ngs-list p {
    grid-column: 2;
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
} 
    .blend-graph-title {font-size: 20px;line-height: 1.2;margin-bottom: 20px;}
    
    .blend-bar-list {grid-template-columns: 1fr;gap: 36px;margin-top: 50px;}
    .blend-bar-item {padding: 0 30px;}
.blend-ngs-title {
    font-size: 20px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    line-height: 1.8;
    margin-bottom: 20px;
}

.blend-ngs-title span {
    font-size: 15px;
}
.blend-ngs-list li.strong-2lines {
    grid-template-rows: 27px 61px 24px;
}

.blend-ngs-list li.p-2lines {
    grid-template-rows: 22px 38px 43px;
}

.blend-ngs-list li.strong-2lines.p-2lines {
    grid-template-rows: 22px 61px 43px;
}

.blend-ngs-list li:not(.strong-2lines):not(.p-2lines) {
    grid-template-rows: 41px 38px 24px;
}
 

.blend-age-env-sec .blend-sec-subtitle {
    color: #B7B3E4 !important;
}

.blend-line-graph-wrap {
    margin: 80px auto 0;
}

.blend-graph-box {
    padding: 0 16px;
}

.blend-graph-info {
    margin-top: 48px;
}
.blend-bar-header {
    font-size: 20px;
    margin-bottom: 20px;
}
 

.blend-bar-track {
    height: 34px;
    border-radius: 34px;
    margin-bottom: 8px;
}
.blend-bar-track.pc {display:none;}
.blend-bar-track.mo {display:flex;}
.blend-bar-fill {padding: 0 8px;}
.blend-bar-fill span {
    font-size: 18px;
}

.blend-bar-labels {
    font-size: 13px;
}
    .pc-only { display: none; }
    .mo-only { display: block; }
    
    .fda-main-title { font-size: 36px; }
    .fda-sec-title {font-size: 26px;margin-bottom: 30px;line-height: 1.37;}
    .fda-sec-desc {font-size: 15px;margin-bottom: 25px;line-height: 1.86;}
    
  .fda-status-sec {padding: 0;}
    .pc-only { display: none; }
    .mo-only { display: block; }

    .fda-status-chart-wrap {flex-direction: column;gap: 48px;margin-bottom: 92px;}
    .fda-chart-left {
    padding: 0 19px;
}
    .fda-chart-right { width: 100%; max-width: 100%; }
    
    .fda-chart-title {margin-bottom: 20px;font-size: 20px;}
    .fda-middle-desc {font-size: 15px;line-height: 1.86;}
    .fda-table-header {
    margin-bottom: 20px;
}
    .fda-table-title {font-size: 20px;margin-bottom: 8px;}
    .fda-bar-list li {
    margin-bottom: 10px;
    gap: 8px;
}
    .fda-table-box table {min-width: 100%;font-size: 12px;}
    .fda-table-box th {
    font-size: 12px;
    padding: 10px 6px;
}
    .fda-table-box td {padding: 5px 5px;}
    .f-label {font-size: 12px;width: 40px;line-height: 1;}
    .f-fill {
    font-size: 13px;
}

.f-track {
    height: 44px;
}

.f-flag {
    width: 25px;
    height: 25px;
    left: 59px;
}
.fda-chart-source {
    margin-top: 20px;
}

.fda-link-btn {
    padding: 0 28px;
    font-size: 13px;
    letter-spacing: -0.03em;
    height: 40px;
    margin-bottom: 28px;
}

.fda-link-btn img {
    width: 7px;
}

.fda-status-middle {
    margin-bottom: 92px;
}

.t-species {
    font-size: 12px;
}

.t-name {
    font-size: 12px;
}

.fda-table-box td[rowspan] {
    font-size: 12px;
}

.t-dot {
    width: 6px;
    height: 6px;
}

.fda-table-box tr.t-border-bottom td {
    padding-bottom: 9px;
}

.top-space td {
    padding-top: 9px;
}

.fda-table-box tr:last-child.t-border-bottom td, .fda-table-box tr td[rowspan='2'] {
    border-bottom: 2px solid var(--main-color);
}

.fda-status-sec .inner {
    padding: 0 16px 92px;
}
.fda-process-sec {padding: 92px 0 0;}
    .fda-process-title {font-size: 35px;margin-bottom: 60px;line-height: 1.37;}
    .fda-process-list {
    display: flex;
    flex-direction: column;
}
    .fda-process-item {
    /* height: 216px; */
    }
    .fda-process-item .f-num {font-size: 14px;margin-top: 3px;width: 7.8vw;}
    .fda-process-item .f-name {padding-right: 19px;width: 44vw;}
    .fda-process-item .f-desc {width: 100%;font-size: 13px;line-height: 1.38; }
.f-card {
    padding: 5.6vw 0 16.2vw;
    /* min-height: 216px; */
}

.fda-process-item .f-name strong {
    font-size: 18px;
    line-height: 1.33;
}

.fda-process-item .f-name span {
    font-size: 18px;
    line-height: 1.33;
}
 .duolac-deposit-graphic-area, .duolac-deposit-info-box, .duolac-deposit-desc {
        margin-left: 0;
    }
    .duolac-deposit-sub-tit { font-size: 24px; }
.duolac-deposit-main-tit {font-size: 40px;margin-bottom: 56px;}
    .duolac-deposit-sub-tit {font-size: 20px;}
    
    .duolac-deposit-animation-container {
        flex-direction: column;
        padding: 40px 0;
    }
    .duolac-deposit-connector {
        transform: rotate(90deg) scale(0.8); 
        margin: 50px 0;
    }
    .duolac-deposit-graphic-area.reveal-active .duolac-deposit-results {
        transform: none;
    }
    .duolac-deposit-results {
        height: auto;
        gap: 30px;
    }
    .duolac-deposit-indent {margin-left: 0;margin-top: 0;}
    .duolac-deposit-desc {margin-left: 0;font-size: 15px;line-height: 1.86;margin-bottom: 60px !important;}
    
    .duolac-deposit-flex-row {
        flex-direction: column;
        gap: 0;
    }
    
    .duolac-deposit-logo-col {max-width: 178px;margin: 0 auto 24px;}
    
    .duolac-deposit-diagram-col {
        width: 100%;
        text-align: center;
        margin-top: 30px;
    }
    .duolac-deposit-diagram-col img {
        margin-left: -17%;
        max-width: 132%;
        width: auto;
    }
    .duolac-deposit-graphic-area { margin-left: 0; }
    
    .duolac-deposit-wipe-container {
    /*    transition-duration: 1.2s;*/
    }
    .duolac-deposit-safe-manage {
    padding: 92px 16px 0;
}

.duolac-deposit-main-desc {
    font-size: 15px;
    margin-bottom: 60px;
    line-height: 1.86;
}

.duolac-deposit-num {
    font-size: 14px;
    margin-bottom: 16px;
}

.duolac-deposit-item-header {
    margin-bottom: 20px;
}

.duolac-deposit-graphic-tit {
    font-size: 20px;
    line-height: 1.55;
    margin-bottom: 20px;
}

.duolac-deposit-item + .duolac-deposit-item {
    margin-top: 60px;
    padding-top: 60px;
}

.duolac-deposit-cert-list img {
    max-width: 280px;
}

.duolac-deposit-diagram .duolac-deposit-diagram-col {position: static;max-width: 100%;margin-top: -18%;}

.duolac-deposit-diagram {
    padding-bottom: 0;
    margin-bottom: 0;
}
.onestop-hero-section .sub-title { font-size: 18px; }
    .onestop-hero-section .main-title { font-size: 34px; }
    .onestop-hero-section .sub-text { font-size: 16px; margin-bottom: 40px; }

 
    .onestop-flow-list {
        flex-wrap: wrap; 
        row-gap: 24px; 
    }
    
    .onestop-flow-item {
        flex: 0 0 25%; 
        max-width: 25%;
    }
    
    .onestop-flow-item:nth-child(4n)::after {
        display: none;
    }
    
    .onestop-flow-item .text-box {
        font-size: 12px; 
    } 
 .carouselTit {
    padding: 92px 16px 0;
}

.carouselTit h3 {
    font-size: 40px;
    margin-bottom: 56px;
}

.carouselTit p {
    font-size: 15px;
    margin-bottom: 60px;
    line-height: 1.86;
}

.onestop-flow-section {
    padding: 60px 0 16px;
}

.onestop-flow-item .icon-box img {
    height: 48px;
    margin-bottom: 12px;
}

.onestop-flow-item:not(:last-child)::after {
    background: url(/design/cbtis/brand/007.svg) no-repeat center center;
}
 .onestop-hero-section .hero-title span {
    font-size: 21px;
    margin-bottom: 20px;
}

#onestop-section1 {
    padding: 0 16px;
    overflow: hidden;
}


    .gmp-factory-section {padding: 60px 16px 92px;}
    
    .gmp-factory-tit {font-size: 20px;line-height: 1.55;margin-bottom: 20px;}
    .gmp-factory-desc p {font-size: 15px;line-height: 1.86;letter-spacing: -0.05em;}

    .gmp-factory-swiper .swiper-wrapper {
        display: flex;
        justify-content: flex-start;
    }

    .gmp-factory-swiper .swiper-slide {
        width: 80%; 
        margin-right: 20px;
    }
.gmp-factory-swiper .img-box {aspect-ratio: 328 / 180;}
    .gmp-factory-info {margin-bottom: 60px;}
    
    
    .ferment-proc-section {padding: 92px 16px;}
    .ferment-proc-inner {
        flex-direction: column;
        gap: 60px;
    }
    
    .ferment-proc-info {
        position: static;
        width: 100%;
    }
    .ferment-info-tit {font-size: 35px;text-align: center;margin-bottom: 56px;}
    .ferment-info-desc p {font-size: 15px;text-align: center;line-height: 1.86;}
.ferment-list-tit {
    font-size: 20px;
    text-align: center;
    padding-bottom: 20px;
}

.ferment-proc-item .f-card {
    padding: 24px 0;
}
.ferment-proc-item.is-shrunk {
    height: var(--ferment-item-h);}
.ferment-proc-item .f-icon {
    width: 112px;
}

.ferment-proc-list-wrap {
    flex: 1;
    width: 100%;
}

.ferment-proc-item .f-icon img {transform: scale(0.67);}

.ferment-proc-item .f-text {
    padding-left: 20px;
}

.ferment-proc-item .f-num {
    font-size: 14px;
    margin-top: 0;
    margin-bottom: 8px;
}

.ferment-proc-item .f-name {
    font-size: 20px;
    line-height: 1.4;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    margin: 0 0 10px;
}

.ferment-proc-item .f-desc {
    font-size: 15px;
    padding-left: 0;
    line-height: 1.6;
}

    .mainBrand .-mo {
        display: block;
    }




    
    .mainBrand .item_wrap {
        gap: 0;
        height: 56vw;
        padding-bottom: 32px;
        }
    .mainBrand .item {
        flex: auto;
        flex-shrink: 0;
    }

    .mainBrand .item:hover {
        flex: auto;
        flex-shrink: 0;
    }
    .mainBrand .tit { margin-bottom: 16px; }

    .mainBrand .item:nth-child(1) .tit img:first-child { width: 105px; }
    .mainBrand .item:nth-child(2) .tit img:first-child { width: 107px;}
    .mainBrand .item:nth-child(3) .tit img:first-child { width: 138px; }

    .mainBrand .item:hover .tit,
    .mainBrand .item:hover .sub_tit {
        font-weight: normal;
    }

    .mainBrand .item .sub_tit {line-height: 1.4; font-size: 13px; }
    .mainBrand {
    margin-bottom: 80px;
}
    .mainBrand .swiper-pagination {
        bottom: 0;
    }

    .mainBrand .txt_wrap {
        padding: 16px;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0.03%, rgba(0, 0, 0, 0.15) 64.91%, rgba(0, 0, 0, 0) 100%);
        font-size: 24px;
        letter-spacing: -0.03em;
    }
    .mainBrand .item .tit img+img { width: 32px; }
    .mainBrand .item:hover .tit img+img {
        transform: rotate(0deg);
    }

    .mainBrand .item>a>img {
        object-position: top;
    }


    .mainBrand .swiper-pagination {
        position: absolute;
        bottom: 0 !important;
        top: auto !important;
        max-width: 33%;
        width: 100% !important;
        margin: 0 auto !important;
        right: 0 !important;
        left: 0 !important;
        display: flex;
        justify-content: center;
        align-items: flex-end;
    }

    .mainBrand .swiper-pagination .swiper-pagination-bullet {
        background: #EAEAEA;
        margin: 0;
        border-radius: 0;
         height: 2px; 
        opacity: 1;
        flex: 1;
        width: auto;
        margin: 0 !important;
    }

    .mainBrand .swiper-pagination .swiper-pagination-bullet-active {
        background: #000;
    }
    
.global-hero-section .main-title { font-size: 34px; }
    .global-hero-section .highlight-tit { font-size: 24px; }
    .global-hero-section .sub-text-group .sub-text { font-size: 15px; }
    .global-achieve-wrap {
        margin: 0 auto 60px;
    }
    .achieve-item {
        width: 100%; /* 모바일 1줄(100%)로 꽉 채우기 */
        padding: 48px 0;
         /* 모바일은 세로줄 삭제 */
        height: auto;
    }
    .achieve-item:nth-child(odd),
    .achieve-item:nth-child(even) {
    padding-right: 0;
    padding-left: 0;
}
    .achieve-item:nth-child(odd)::after {display:none;}
    .achieve-tit {
        font-size: 20px;
        margin-bottom: 20px !important;
        line-height: 1.55;
    }
    .achieve-desc {
        font-size: 13px;
    }
    .achieve-logo {width: 76px;}
    .bottom-slider-wrap {
    padding: 0 0 0 16px;
}

.bottom-gallery-swiper .img-box {
    aspect-ratio: 272 / 363;
}

.bottom-gallery-swiper {
    padding-bottom: 92px !important;
}
    
    .map-viewport { aspect-ratio: 4 / 3; }
    .map-pin { width: 24px; height: 24px; margin-top: -24px; margin-left: -12px; }
    .map-tooltip {min-width: 178px;padding: 20px 16px;}
    
    .tooltip-tit, .tooltip-desc {
    font-size: 17px;
}

.tooltip-sub {
    margin-top: 12px;
    font-size: 10px;
}
.global-hero-section .hero-bg {
        background-size: 437%;
        background-position: 36.5% 69%;
        z-index: 1;
        background-image: url(/design/cbtis/brand/c2e00c11.jpg) !important;
    }

    
    
    
} 
@media (max-width: 767px) {

 
.value-circles {
    margin-top: 120px;
}
.circle-item {background: url(/design/cbtis/brand/circle-item.svg) no-repeat;
    background-size: 100% 100%;}
.circle-item:nth-child(2) {
    margin: -245px -100px 0;
}
.chart-legend li {font-size: 10px;}
    .bar-wrap { width: 4px; }
    .bar-label { font-size: 8px; top: -12px; }
    .x-label { font-size: 10px; bottom: -20px; }
.y-axis-title, .grid-line span {font-size:10px;}

    .tech-coating-img-box {max-width:767px;text-align: right;}
    img.architectureCoating {
    min-width: 396px;
    max-width: 455px;
}
} 


@media screen and (max-width: 480px) {
    .onestop-flow-item {
    }
    .onestop-flow-item:not(:last-child)::after { display: block; }
    .onestop-flow-item:nth-child(2n)::after { display: none; }
}





#carousel .cloud9-item {
    cursor: pointer
}

@media (max-width: 1299.98px) {
    .carousel-container {
        border:1px solid transparent;
        height: 410px
    }
}

@media (max-width: 1199.98px) {
    .carousel-container {
        height:429px
    }
}

@media (max-width: 991.98px) {
    .carousel-container {
        height:386px
    }
}

@media (max-width: 575.98px) {
    .carousel-container {
        height:295px;
    }
}

#carousel {
    opacity: 0;
    width: 980px;
    margin: 100px auto 0 auto;
}

@media (max-width: 1299.98px) {
    #carousel {
        -webkit-transform:scale(.7);
        transform: scale(.7);
        -webkit-transform-origin: center top;
        transform-origin: center top
    }
}

@media (max-width: 1199.98px) {
    #carousel {
        -webkit-transform:scale(.8);
        transform: scale(.8);
        width: auto
    }
}

@media (max-width: 991.98px) {
    #carousel {
        -webkit-transform:scale(.7);
        transform: scale(.7)
    }
}

@media (max-width: 575.98px) {
    #carousel {
        -webkit-transform:scale(1);
        transform: scale(1);
        margin: 0 auto;
        padding-top: 50px
    }
}

#carousel .base {
    position: relative;
    top: -30px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    height: 423px;
    max-width: none
}

@media (max-width: 575.98px) {
    #carousel .base {
        top:-21px;
        height: 190px
    }
}

#carousel .cloud9-item {
    display: none;
    text-align: center;
    width: 300px
}

@media (max-width: 575.98px) {
    #carousel .cloud9-item {
        width:100px
    }
}

#carousel .cloud9-item .title {
    font-family: proxima-nova-medium,sans-serif;
    line-height: 1.2;
    font-size: 28px;
    padding-top: 20px;
    display: block; 
}
#carousel .cloud9-item .title + .title {display:none;}

@media (max-width: 575.98px) {
    #carousel .cloud9-item .title {
        font-size: 16px;
        opacity: 1;
        visibility: visible;
    }
}

#carousel .cloud9-item:not(.active) .title {
    display: none
}


#carousel .active-color {
    fill: #ffd478;
    fill-rule: evenodd
}

#carousel .title {
    opacity: 1
}

#carousel .cloud9-item .step {
    font-family: DuolacM,sans-serif;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 40px;
    color: #fff;
    position: absolute;
    top: 0;
    left: 0
}

@media (max-width: 575.98px) {
    #carousel .cloud9-item .step {
        top:-10px;
        width: 40px;
        height: 40px;
        line-height: 32px
    }
}

#carousel .cloud9-item:nth-child(1) .step {
    background-color: #ffd478;
    border: 5px solid #ffe3a8
}

#carousel .cloud9-item:nth-child(1) .active-color {
    fill: #ffd478
}

#carousel .cloud9-item:nth-child(2) .step {
    background-color: #fec899;
    border: 5px solid #ffeee0
}

#carousel .cloud9-item:nth-child(2) .active-color {
    fill: #fec899
}

#carousel .cloud9-item:nth-child(3) .step {
    background-color: #fec899;
    border: 5px solid #ffeee0
}

#carousel .cloud9-item:nth-child(4) .step {
    background-color: #bbbbd4;
    border: 5px solid #ededf4
}

#carousel .cloud9-item:nth-child(5) .step {
    background-color: #bbbbd4;
    border: 5px solid #ededf4
}

#carousel .cloud9-item:nth-child(6) .step {
    background-color: #abdad4;
    border: 5px solid #e6f4f2
}

#carousel .cloud9-item:nth-child(7) .step {
    background-color: #c19dc8;
    border: 5px solid #e8ddec
}

#carousel .active-state {
    position: absolute;
    z-index: 5;
    bottom: 69px;
    left: 50%;
    -webkit-transform: translateX(-56%);
    transform: translateX(-56%)
}

@media (max-width: 1199.98px) {
    
#carousel .active-state {
        bottom:66px
    }
}

@media (max-width: 575.98px) {
    
#carousel .active-state {
        -webkit-transform:scale(.45) translateX(-392px);
        transform: scale(.45) translateX(-392px);
        bottom: 15px
    }
}


#onestop-section1 #buttons button,#carousel .cloud9-item {
    cursor: pointer
}

#onestop-section1 #buttons {
    position: relative;
    width: 1000px;
    margin: 0 auto;
    top: -3.38542vw
}


@media (max-width: 1299.98px) {
    #onestop-section1 #buttons {
        width:700px
    }
}

@media (max-width: 1199.98px) {
    #onestop-section1 #buttons {
        width:750px
    }
}

@media (max-width: 991.98px) {
    #onestop-section1 #buttons {
        width:650px
    }
}

@media (max-width: 575.98px) {
    #onestop-section1 #buttons {
        top:-40px;
        width: 100%
    }
}

#onestop-section1 #buttons button {
    max-width: 250px;
    border-radius: 0;
    border: none;
    background: 0 0;
    color: #c19dc8;
    padding: 20px 10px 10px 10px;
    position: relative
}

@media (max-width: 1299.98px) {
    #onestop-section1 #buttons button {
        font-size:18px
    }
}

@media (max-width: 1199.98px) {
    #onestop-section1 #buttons button {
        width:200px
    }
}

@media (max-width: 575.98px) {
    #onestop-section1 #buttons button {
        width:100px
    }

    #onestop-section1 #buttons button span {
        font-size:14px
    }
}

#onestop-section1 #buttons button .arrow {
    width: 90px;
    height: 2px;
    border-top: 2px solid #9457a0;
    position: absolute;
    top: 0
}

#onestop-section1 #buttons button .arrow:after,#onestop-section1 #buttons button .arrow:before {
    content: "";
    width: 10px;
    height: 2px;
    background-color: #9457a0;
    position: absolute;
    top: -2px
}

#onestop-section1 #buttons button.left {
    float: right;
    text-align: right
}

#onestop-section1 #buttons button.left .arrow {
    right: 0
}

#onestop-section1 #buttons button.left .arrow:after,#onestop-section1 #buttons button.left .arrow:before {
    right: 0
}

#onestop-section1 #buttons button.left .arrow:before {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom
}

#onestop-section1 #buttons button.left .arrow:after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: right top;
    transform-origin: right top
}

#onestop-section1 #buttons button.right {
    float: left;
    text-align: left
}

#onestop-section1 #buttons button.right .arrow {
    left: 0
}

#onestop-section1 #buttons button.right .arrow:after,#onestop-section1 #buttons button.right .arrow:before {
    left: 0
}

#onestop-section1 #buttons button.right .arrow:before {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom
}

#onestop-section1 #buttons button.right .arrow:after {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: left top;
    transform-origin: left top
}


#onestop-section1 #buttons {
    opacity: 1
}

/* BASIC css end */