/* ///////////////////////////////////////
   main /////////////////////////////////
/* /////////////////////////////////////*/
.main section {
    height: 100vh;
    display: flex;
    padding: 5em 0;
}
.main section.triangle-section {
    align-items: center;
}
.main .title {margin: 0 0 50px 0;}
.mainSwiper .swiper-slide {margin: 0 !important;}
.mainSwiper .swiper-content {
    width: 100%;
    position: absolute;
    color: #fff;
    text-align: left;
}
.main .data .col-4 {
    padding: 2em;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}
.main .data img {
    width: 100px;
    height: 100px;
}
.main .data .number {color: #0f3d2e;}
.triangle-wrap {
    position: relative;
    width: 100%;
    height: 485px;
    margin: 0 auto;
}
.triangle {
    width: 45%;
    height: 230px;
    background: #fff;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    position: absolute;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 10px;
}
.triangle.top {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}
.triangle.left {
    bottom: 0;
    left: 30px;
}
.triangle.right {
    bottom: 0;
    right: 30px;
}
.triangle.center {
    top: 242px;
    left: 50%;
    transform: translateX(-50%);
    width: 45%;
    height: 230px;
    background: #e3f3ea;
    border-color: #e3f3ea;
    clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
    align-items: flex-start;
    padding-top: 15px;
}
.triangle .inner {
    position: absolute;
    text-align: center;
}
.triangle.center .inner {top: 10%;}
.triangle .inner h2 {
    line-height: 1.2em;
}
.en .triangle .inner h2 {
    font-size: 1.5rem;
    line-height: 1.7rem;
}
/* ── Waste Recycling Full Value Chain ── */
.clover .col-3 {
    width: 21%;
}
.clover-card {
    text-align: center;
    color: #ffffff;
    background: #132b1e;
    border: 1px solid rgba(82,180,120,0.18);
    border-radius: 50%;
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    cursor: default;
    transition: background 0.35s, border-color 0.35s, box-shadow 0.35s;
}
.clover-card {
    background: #183824;
    border-color: rgba(82,180,120,0.55);
    box-shadow: 0 0 45px rgba(30,90,50,0.38);
}
.clover-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -30%;
    width: 1px;
    height: 100%;
    background: linear-gradient(310deg, transparent, rgba(82, 180, 120, 0.45), transparent);
    opacity: 1;
    pointer-events: none;
    animation: scanLeaf 1.8s linear infinite;
}
.clover-card::after {
    opacity: 1;
    animation: scanLeaf 1.8s linear infinite;
}
@keyframes scanLeaf {
    0% { left: -30%; }
    100% { left: 100%; }
}
.en .clover-card h3 {line-height: 1.3;}
.en .leaf-desc {font-size: 14px;}

/* ── 연결 허브 ── */
.hub-connector {
    flex: 0 0 auto;
    width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.hub-circle {
    width: 36px; height: 36px;
    background: #132b1e;
    border: 1px solid rgba(82,180,120,0.45);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    animation: cwSpin 14s linear infinite;
}
.hub-ring-s {
    position: absolute; inset: -6px;
    border-radius: 50%;
    border: 1px dashed rgba(82,180,120,0.4);
}
@keyframes cwSpin { to { transform: rotate(360deg); } }

.main .sites {
    position: relative;
    background: url('/images/bg/sites.jpg') center center / cover no-repeat;
    min-height: 800px;
}
.main .sites .data {
    position: absolute;
    bottom: 20%;
}
.main .map {
    position: absolute;
    top: 0;
    right: 10%;
    pointer-events: none;
}
.main .map img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.main .map .marker {
    position: absolute;
    transform: translate(-50%, -100%);
}
.privacy-container ol strong {
    line-height: 33px;
}
.privacy-container ol li ul {
    padding-left: 17px;
    margin-bottom: 10px;
}
/* ///////////////////////////////////////
   sub /////////////////////////////////
/* /////////////////////////////////////*/
.content section {padding: 10em 0;}
.save-bottom {padding-bottom: 150px;}
.history .box {
    display: flex;
    gap: 5%;
    margin-bottom: 100px;
}

.history .box .col-5 div {position: relative;}
.history .box .col-5 p {
    position: absolute;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    color: #ffff;
    padding: 5px 25px;
    margin-bottom: 0;
}
.history .year {
    font-size: 51px;
    color: #0F3D2E;
    font-weight: bold;
    position: relative;
}
.history dl {
    display: flex;
    border-bottom: 1px solid #ddd;
    padding: 10px 0;
    width: 100%;
}
.history dt {
    flex: 0 0 auto;
    width: 55px;
    margin: 0;
    color: #0F3D2E;
}
.linear-box {
    margin: 0;
    background-color: white;
    background-image: linear-gradient(0deg, transparent 95%, #e9e9e9 95%), linear-gradient(90deg, transparent 95%, #e9e9e9 95%);
    background-size: 14px 14px;
    border: 1px solid #d9d9d9;
    border-top: none;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.field .col-4 div {
    color: #fff;
    min-height: 400px;
    padding: 30px;
}
.progress-zone .row{
    position: relative;
    align-items: center;
    --duration: 6s;
    --line-h: 6px;
    --line-bg: #d9e3df;
    --line-fill: #0F3D2E;
    --dot: 50px;
}
.progress-zone .row::before{
    content: "";
    position: absolute;
    left: calc(var(--dot) / 2);
    right: calc(var(--dot) / 2);
    top: calc(var(--dot) / 2);
    transform: translateY(-50%);
    height: var(--line-h);
    background: var(--line-bg);
    border-radius: 999px;
    z-index: 0;
}
.progress-zone .row::after{
    content:"";
    position:absolute;
    left: calc(var(--dot) / 2);
    top: calc(var(--dot) / 2);
    transform: translateY(-50%);
    height: var(--line-h);
    width: 0%;
    background: var(--line-fill);
    border-radius: 999px;
    z-index: 0;
    animation: progressLine var(--duration) linear infinite;
}
@keyframes progressLine{
    0%   { width: 0%; }
    100% { width: calc(100% - 0px); }
}
.circle {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    position: relative;
    z-index: 1;
}
.en .circle p {
    height: 48px;
}
.circle .num {
    background:#0F3D2E;
    color: #fff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    animation-duration: var(--duration);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.circle .num:before {
    border: 2px solid #79b5a1;
    width: 65px;
    height: 65px;
    border-radius: 65px;
    content: '';
    position: absolute;
}
@keyframes arriveBlinkOnce{
    0%   { transform: scale(1);   filter: brightness(1);   box-shadow: 0 0 0 rgba(15,61,46,0); }
    40%  { transform: scale(1.12);filter: brightness(1.45);box-shadow: 0 0 18px rgba(15,61,46,.55); }
    100% { transform: scale(1);   filter: brightness(1);   box-shadow: 0 0 0 rgba(15,61,46,0); }
}
/* 1번: 0%~3% */
@keyframes blinkAt1{
    0%, 3%   { }
    3.01%, 100% { }
}
.progress-zone .col:nth-child(1) .circle .num {
    animation-name: blink1;
}
@keyframes blink1{
    0%   { transform: scale(1); filter: brightness(1); box-shadow: 0 0 0 rgba(15,61,46,0); }
    1.2% { transform: scale(1.12); filter: brightness(1.45); box-shadow: 0 0 18px rgba(15,61,46,.55); }
    2.4% { transform: scale(1); filter: brightness(1); box-shadow: 0 0 0 rgba(15,61,46,0); }
    100% { transform: scale(1); filter: brightness(1); box-shadow: 0 0 0 rgba(15,61,46,0); }
}
/* 2번: 20%~23% */
.progress-zone .col:nth-child(2) .circle .num { animation-name: blink2; }
@keyframes blink2{
    0%, 19.9% { transform: scale(1); filter: brightness(1); box-shadow: 0 0 0 rgba(15,61,46,0); }
    21.2%     { transform: scale(1.12); filter: brightness(1.45); box-shadow: 0 0 18px rgba(15,61,46,.55); }
    22.4%     { transform: scale(1); filter: brightness(1); box-shadow: 0 0 0 rgba(15,61,46,0); }
    100%      { transform: scale(1); filter: brightness(1); box-shadow: 0 0 0 rgba(15,61,46,0); }
}
/* 3번: 40%~43% */
.progress-zone .col:nth-child(3) .circle .num { animation-name: blink3; }
@keyframes blink3{
    0%, 39.9% { transform: scale(1); filter: brightness(1); box-shadow: 0 0 0 rgba(15,61,46,0); }
    41.2%     { transform: scale(1.12); filter: brightness(1.45); box-shadow: 0 0 18px rgba(15,61,46,.55); }
    42.4%     { transform: scale(1); filter: brightness(1); box-shadow: 0 0 0 rgba(15,61,46,0); }
    100%      { transform: scale(1); filter: brightness(1); box-shadow: 0 0 0 rgba(15,61,46,0); }
}
/* 4번: 60%~63% */
.progress-zone .col:nth-child(4) .circle .num { animation-name: blink4; }
@keyframes blink4{
    0%, 59.9% { transform: scale(1); filter: brightness(1); box-shadow: 0 0 0 rgba(15,61,46,0); }
    61.2%     { transform: scale(1.12); filter: brightness(1.45); box-shadow: 0 0 18px rgba(15,61,46,.55); }
    62.4%     { transform: scale(1); filter: brightness(1); box-shadow: 0 0 0 rgba(15,61,46,0); }
    100%      { transform: scale(1); filter: brightness(1); box-shadow: 0 0 0 rgba(15,61,46,0); }
}
/* 5번: 80%~83% */
.progress-zone .col:nth-child(5) .circle .num { animation-name: blink5; }
@keyframes blink5{
    0%, 79.9% { transform: scale(1); filter: brightness(1); box-shadow: 0 0 0 rgba(15,61,46,0); }
    81.2%     { transform: scale(1.12); filter: brightness(1.45); box-shadow: 0 0 18px rgba(15,61,46,.55); }
    82.4%     { transform: scale(1); filter: brightness(1); box-shadow: 0 0 0 rgba(15,61,46,0); }
    100%      { transform: scale(1); filter: brightness(1); box-shadow: 0 0 0 rgba(15,61,46,0); }
}
/* 6번: 100% */
.progress-zone .col:nth-child(6) .circle .num { animation-name: blink6; }
@keyframes blink6{
    0%, 96.9% { transform: scale(1); filter: brightness(1); box-shadow: 0 0 0 rgba(15,61,46,0); }
    98.2%     { transform: scale(1.12); filter: brightness(1.45); box-shadow: 0 0 18px rgba(15,61,46,.55); }
    99.4%     { transform: scale(1); filter: brightness(1); box-shadow: 0 0 0 rgba(15,61,46,0); }
    100%      { transform: scale(1); filter: brightness(1); box-shadow: 0 0 0 rgba(15,61,46,0); }
}
@media (prefers-reduced-motion: reduce){
    .progress-zone .row::after,
    .progress-zone .circle h2{
        animation: none !important;
    }
}
.circle p {font-weight: bold;}
.circle img {width: 80px;}
.h-100 section {
    height: 100vh;
    display: flex;
    align-items: center;
    text-align: center;
}
.badge {
    background: #2e5e4e;
    padding: 15px 30px;
    border-radius: 100px;
    font-size: 14px;
    margin-bottom: 20px;
}
.intro .greeting {
    text-align: left;
}
.intro .greeting .display-1 {
    font-weight: bold;
    color: #fff;
}
/* ///////////////////////////////////////
   map /////////////////////////////////
/* /////////////////////////////////////*/
span.now {
    background: #0F3D2E;
    color: #fff;
    border-radius: 100px;
    padding: 0 25px;
    font-size: 16px;
    margin-left: 20px;
}
span.now:before {
    content: '●';
    margin-right: 15px;
    display: inline-block;
    animation: nowDotBlink 1s infinite ease-in-out;
}
@keyframes nowDotBlink {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.2; transform: scale(0.85); }
}
@media (prefers-reduced-motion: reduce) {
    span.now:before { animation: none; }
}
#location-list {
    margin-top: 25px;
    border-top: 1px solid #ddd;
}
#location-list .list-item {
    padding: 20px;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
}
#location-list .list-item-title {
    font-weight: bold;
    margin: 0;
    margin-right: 10px;
}
.location-box {
    margin-top: 30px;
    overflow-y: scroll;
    max-height: 570px;
}
#location-list .list-item-address {
    font-size: 16px;
    color: #666;
    margin: 0;
}
#map {
    flex-grow: 1;
    min-height: 650px;
}

.custom-marker-body {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    transform: rotate(-45deg);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    background: #0f3d2e6e;
    position: relative;
    animation: markerBlink 1.2s infinite ease-in-out;
}
.custom-marker-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 25px;
    height: 25px;
    background: #0F3D2E;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}
@keyframes markerBlink {
    0%, 100% {
        filter: brightness(1);
        box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
    }
    50% {
        filter: brightness(1.2);
        box-shadow: 0 0 10px rgb(18 73 55 / 55%);
    }
}







.map-detail-box {
    font-size: 14px;
    padding: 15px;
    min-width: 300px;
    line-height: 1.5;
    position: relative;
    background: #fff;
    border-radius: 10px;
}
.map-ul {

    padding-left: 20px;
    margin-top: 5px;
}
.map-ul li {
    font-size: 14px;
    list-style: disc;
    margin-bottom: 5px;
}
.menu-item {
    padding: 12px 10px;
    margin-bottom: 5px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    background-color: #ffffff;
    border: 1px solid #eee;
    transition: background-color 0.2s;
}
.menu-item:hover {
    background-color: #e6e6e6;
}
.menu-item.active {
    background-color: #0080cb;
    color: white;
    border-color: #0080cb;
}
.item-count {
    float: right;
    font-weight: bold;
}

.empty-state {
    text-align: center;
    padding: 30px 10px;
    color: #777;
}
.empty-icon i {
    font-size: 30px;
    margin-bottom: 10px;
}
.empty-title {
    font-weight: bold;
    margin-bottom: 5px;
}
.sidebar-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 10px 20px;

}
.black-box {position: relative;}
.black-box::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: black;
    left: 0;
    top: 0;
    opacity: 0.5;
}
.content.esg .border-color .record {
    border: 1px solid #bbb;
}
.content.esg .record {
    background: none;
    box-shadow: none;
    border: 1px solid #fff;
    border-radius: 0;
    height: 100%;
    text-align: center;
}
.content.esg section {position: relative;}
.content.esg .border-color .record {
    border-top: 1px solid #bbb;
    border-right: 1px solid #bbb;
}
.hr-bottom {
    margin-top: 25px;
    margin-bottom: 100px;
    display: flex;
    justify-content: center;
    gap: 10px;
}
.hr-bottom button {
    background: #fff;
    border: 1px solid #0F3D2E;
    padding: 10px 20px;
    border-radius: 50px;
    color: #0F3D2E;
}
.hr-bottom button:hover {
    background: #0F3D2E;
    color: #fff;
    transition: all 0.3s ease;
}
.esg-e:after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.18;
    background-image: url(/images/bg/esg-e.svg);
    background-size: 56px 100px;
    animation: hex-drift 20s linear infinite;
}
.esg-s:after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(0, 85, 204, 0.35) 1px, transparent 1px);
    background-size: 32px 32px;
    opacity: 0.6;
}
.esg-g:after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.07;
    background-image: repeating-linear-gradient(-45deg, rgba(0, 200, 180, 1) 0px, rgba(0, 200, 180, 1) 1px, transparent 1px, transparent 28px);
}
.env-label {
    position: absolute;
    top: 35%;
    right: 10%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 5;
    pointer-events: none;
}
.esg-e .env-num {
    font-size: 13rem;
    font-weight: 900;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(0, 212, 255);
    display: block;
}
.esg-e .env-sub {
    font-size: 12px;
    letter-spacing: 5px;
    color: rgba(0, 212, 255, 0.7);
}
.esg-s .env-num {
    font-size: 13rem;
    font-weight: 900;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(0, 85, 204, 0.18);
    display: block;
}
.esg-s .env-sub {
    font-size: 12px;
    letter-spacing: 5px;
    color: rgba(0, 85, 204, 0.5);
}
.esg-g .env-num {
    font-size: 12rem;
    font-weight: 900;
    color: transparent;
    -webkit-text-stroke: 1px rgba(0, 200, 180, 0.5);
    display: block;
}
.esg-g .env-sub {
    font-size: 12px;
    letter-spacing: 5px;
    color: rgba(0, 200, 180, 0.4);
}
h2.display-3 img {
    width: 150px;
    margin-bottom: 20px;
}
.record {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0.5rem 0.5rem 1rem #0000001A;
    height: 100%;
}
.record h4 {font-weight: bold; margin-bottom: 20px;}
.record ul {margin-bottom: 0;}
.record li {color: #444;}
.record li:nth-child(1):before {content: '소재 : ';}
.record li:nth-child(2):before {content: '규모 : ';}
.en .record li:nth-child(1):before {content: 'Location : ';}
.en .record li:nth-child(2):before {content: 'Capacity : ';}
.record img {
    border-radius: 20px 20px 0 0;
    width: 100%;
}
.safed-zone .box {
    box-shadow: rgba(0, 0, 0, 0.1) 0.5rem 0.5rem 1rem;
    text-align: left;
    background: rgb(255, 255, 255);
    padding: 1.5em 1em;
}
.safed-zone .col {
    max-width: fit-content;
}
.safed-zone .box h4:first-child {
    font-size: 21px;
    font-weight: bold;
    color: #0F3D2E;
}
.safed-zone .box h4 span {
    color: rgb(255, 255, 255);
    width: 27px;
    height: 27px;
    font-size: 17px;
    line-height: 26px;
    display: inline-block;
    text-align: center;
    margin-right: 5px;
    background: #0F3D2E;
    border-radius: 100px;
}
.safed-zone .box ul {
    margin-bottom: 0;
}
.en .safed-zone .row .box {background: none !important;}
.en .safed-zone .row > *:nth-child(2),
.en .safed-zone .row > *:nth-child(3),
.en .safed-zone .row > *:nth-child(6),
.en .safed-zone .row > *:nth-child(7) {
    background: #f1f1f1 !important;
}