:root {
    --color-white: #FFFFFF;
    --color-gray-100: #F1F1F1;
    --color-gray-150: #EFEFEF;
    --color-gray-200: #DEDEDE;
    --color-gray-250: #D9D9D9;
    --color-gray-300: #C3C3C3;
    --color-gray-400: #B5B5B5; 
    --color-gray-500: #9C9C9C;
    --color-gray-600: #7A7A7A;
    --color-gray-700: #555555;
    --color-gray-800: #333333;
    --color-gray-900: #1A1A1A;
    --color-black: #000000;

	--color-yellow-500: #F9B800;

    --color-orange-300: #E9B799;
    --color-orange-400: #F5A36C;
    --color-orange-500: #E8753C;
    --color-orange-600: #D4501B;

    --color-red-500: #CD3A06;

    --color-green-500: #93EA22;

    --color-white-green-gradient: linear-gradient(to bottom, #FFFFFF, #E3F1B9);
    --color-white-blue-gradient: linear-gradient(to bottom, #FFFFFF 40%, #EDF5FF 70%);

    --fs-5xl: 48px;
    --fs-4xl: 40px;
    --fs-3xl: 36px;
    --fs-2xl: 32px;
    --fs-xl: 28px;
    --fs-lg: 24px;
    --fs-md: 20px;
    --fs-sm: 18px;
    --fs-xs: 16px;
    --fs-2xs: 14px;

    --vh: 1vh;
    --100vh: 100vh;
}

/* fonts family */
.material-symbols-rounded {
    vertical-align: bottom;
    font-size: 1em;
}

/* general */
html, body {
}
body {
	font-family: 'Rubik', 'Noto Sans TC', 'PingFang TC', source-han-sans-traditional, 'Microsoft JhengHei','Arial', sans-serif;
	background-color: var(--color-black);
    color: #FFFFFF;
	font-size: var(--fs-md);
    letter-spacing: 0.1em;
    scroll-behavior: smooth;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}
body.on-embed {
}
body.on-popup-show {
    max-height: calc(var(--vh) * 100);
    overflow-y: hidden;
}
a {
	text-decoration: none;
	color: inherit;
	-webkit-tap-highlight-color: transparent;
}
a, button, input[type="submit"], input[type="button"] {
	cursor: pointer;
}
input, select, textarea, button {
	font-family: 'Rubik', 'Noto Sans TC', 'PingFang TC', source-han-sans-traditional, 'Microsoft JhengHei','Arial', sans-serif;
	font-size: var(--fs-md);
}
img {
	height: auto;
	max-width: 100%;
}
.rounded {
    border-radius: 50%;
    overflow: hidden;
}
p {
    line-height: 1.5;
}
p + p {
    margin-top: 1em;
}
/* fonts */
.fs-5xl { font-size: var(--fs-5xl); }
.fs-4xl { font-size: var(--fs-4xl); }
.fs-3xl { font-size: var(--fs-3xl); }
.fs-2xl { font-size: var(--fs-2xl); }
.fs-xl { font-size: var(--fs-xl); }
.fs-lg { font-size: var(--fs-lg); }
.fs-md { font-size: var(--fs-md); }
.fs-sm { font-size: var(--fs-sm); }
.fs-xs { font-size: var(--fs-xs); }
.fs-2xs { font-size: var(--fs-2xs); }

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

.text-nowrap { white-space: nowrap; }

.text-link { text-decoration: underline; }

.fw-lighter { font-weight: 300; }
.fw-normal { font-weight: 500; }
.fw-bold { font-weight: 700; }
.fw-bolder { font-weight: 900; }

.lh-1 { line-height: 1; }
.lh-2 { line-height: 1.25; }
.lh-3 { line-height: 1.5; }
.lh-4 { line-height: 1.75; }
.lh-5 { line-height: 2; }
.ls-minus-1 { letter-spacing: -3px; }
.ls-0 { letter-spacing: 0; }
.ls-1 { letter-spacing: 0.05em; }
.ls-2 { letter-spacing: 0.1em; }
.ls-3 { letter-spacing: 0.15em; }
.ls-3 { letter-spacing: 0.2em; }

.text-ellipsis-2 {
    text-overflow:ellipsis;
    overflow:hidden;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
}

.text-shadow {
	text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}
.box-shadow {
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

/* color */
.text-white { color: var(--color-white); }
.text-gray-300 { color: var(--color-gray-300); }
.text-gray-500 { color: var(--color-gray-500); }
.text-gray-700 { color: var(--color-gray-700); }
.text-black { color: var(--color-black); }
.text-yellow { color: var(--color-yellow-500); }
.text-orange-300 { color: var(--color-orange-300); }
.text-orange-400 { color: var(--color-orange-400); }
.text-orange-500, .text-orange { color: var(--color-orange-500); }
.text-orange-600 { color: var(--color-orange-600); }
.text-red { color: var(--color-red-500); }

.bg-white { background-color: var(--color-white); }
.bg-gray-100 { background-color: var(--color-gray-100); }
.bg-gray-150 { background-color: var(--color-gray-150); }
.bg-gray-300 { background-color: var(--color-gray-300); }
.bg-gray-500 { background-color: var(--color-gray-500); }
.bg-gray-700 { background-color: var(--color-gray-700); }
.bg-gray-800 { background-color: var(--color-gray-800); }
.bg-black { background-color: var(--color-black); }
.bg-yellow { background-color: var(--color-yellow-500); }
.bg-orange-300 { background-color: var(--color-orange-300); }
.bg-orange-400 { background-color: var(--color-orange-400); }
.bg-orange-500, .bg-orange { background-color: var(--color-orange-500); }
.bg-orange-600 { background-color: var(--color-orange-600); }
.bg-red { background-color: var(--color-red-500); }

.op-70 { opacity: 0.7; }

/* text bg */
.text-bg, .text-bg-drop {
    position: relative;
    background-color: transparent;
    padding: 2px 0; 
}
.text-bg > span, .text-bg-drop > span {
    position: relative;
    z-index: 1;
    display: inline;
    padding: 0.2em 0.4em;
    /* Needs prefixing */
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}
.text-bg-drop > span {
    padding-right: 0.5em;
    padding-bottom: 0.35em;
    background-color: transparent;
    background-image: linear-gradient(to bottom,
        #00000000 0%,
        #00000000 40%,
        var(--color-red-500) 40%,
        var(--color-red-500) 100% );
    background-size: calc(100% - 1em) 100%;
    background-position: 100% 50%;
    background-repeat: no-repeat;
    margin-left: -0.5em;
}
.text-bg-drop > span.bg-black {
    background-image: linear-gradient(to bottom,
        #00000000 0%,
        #00000000 40%,
        var(--color-black) 40%,
        var(--color-black) 100% );
}
.text-bg-drop > span.bg-white {
    background-image: linear-gradient(to bottom,
        #00000000 0%,
        #00000000 40%,
        var(--color-white) 40%,
        var(--color-white) 100% );
}
.text-tape {
    position: absolute;
    z-index: -1;
    width: calc(100% + 3em);
    height: calc(100% + 1.5em);
    max-width: none;
    inset: -0.75em -1.5em;
}
.text-brush {
    padding-bottom: 0.25em;
    background-image: url('../img/dec/brush_short.png');
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center bottom;
}

.text-brush-long {
    position: relative;
    width: fit-content;
    margin: 20px auto;
    padding: 0 1em 0.25em 0.75em;
    left: 0.25em;
    background-image: url('../img/dec/brush_long.png');
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center bottom;
}
span.text-brush-long {
    padding: 0 0 0.25em 0;
    margin: 0;
    left: auto;
}
.title-bg-red {
    background-color: var(--color-red-500);
    color: var(--color-white);
    font-weight: 900;
    padding: 0.5em 1em;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}
/* hr */
hr {
    display: block;
    width: 100%;
    height: 1px;
    margin: 1.5rem auto;
    border: 0;
}
.hr-short {
    width: 120px;
    height: 12px;
}
.hr-text {
    display: flex;
    align-items: center;
    gap: 1.5em;
}
.hr-text::before, .hr-text::after {
    content: '';
    display: inline-block;
    height: 1px;
    width: auto;
    flex-grow: 1;
    background-color: var(--color-white);
}
.hr-gray {
    height: 1px;
    border-radius: 6px;
    background-color: var(--color-gray-500);
}

/* size */
.w-fill { width: 100% !important; }
.w-half { width: 50% !important; }
.w-fit { width: fit-content !important; }
.min-w-100 { min-width: 100px !important; }
.max-w-fill { max-width: 100% !important; }
.max-w-200 { max-width: 200px !important; }
.max-w-300 { max-width: 300px !important; }
.max-w-350 { max-width: 350px !important; }
.max-w-400 { max-width: 400px !important; }
.max-w-450 { max-width: 450px !important; }
.max-w-460 { max-width: 460px !important; }
.max-w-500 { max-width: 500px !important; }
.max-w-550 { max-width: 550px !important; }
.max-w-600 { max-width: 600px !important; }
.max-w-660 { max-width: 660px !important; }
.max-w-700 { max-width: 700px !important; }
.max-w-800 { max-width: 800px !important; }
.max-w-900 { max-width: 900px !important; }
.max-w-960 { max-width: 960px !important; }
.h-auto { height: auto; }

/* display */
.d-none { display: none; }
.d-block { display: block; }
.d-inline-block { display: inline-block; }

.on-embed .d-none-embed { display: none; }
.on-embed .d-block-embed { display: block; }

.d-flex { display: flex; }
.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }
.align-start { align-items: flex-start; }
.align-center { align-items: center; }
.align-end { align-items: flex-end; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-around { justify-content: space-around; }
.justify-between { justify-content: space-between; }
.flex-fill { flex-grow: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-wrap { flex-wrap: wrap; }

.d-grid { display: grid; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }

.d-table { display: table; }
.d-row { display: table-row; }
.d-cell { display: table-cell; }

/* position */
.relative { position: relative; }
.absolute { position: absolute; }
.sticky { 
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 10;
}

/* space */
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1.25rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-7 { margin-top: 1.75rem; }
.mt-8 { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-12 { margin-top: 3rem; }
.mt-14 { margin-top: 3.5rem; }
.mt-16 { margin-top: 4rem; }
.mt-18 { margin-top: 4.5rem; }
.mt-20 { margin-top: 5rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-7 { margin-bottom: 1.75rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mb-12 { margin-bottom: 3rem; }
.mb-14 { margin-bottom: 3.5rem; }
.mb-16 { margin-bottom: 4rem; }
.mb-18 { margin-bottom: 4.5rem; }
.mb-20 { margin-bottom: 5rem; }
.mb-30 { margin-bottom: 7.5rem; }
.ml-1 { margin-left: 0.25rem; }
.ml-2 { margin-left: 0.5rem; }
.ml-3 { margin-left: 0.75rem; }
.ml-4 { margin-left: 1rem; }
.ml-5 { margin-left: 1.25rem; }
.ml-6 { margin-left: 1.5rem; }
.ml-7 { margin-left: 1.75rem; }
.ml-8 { margin-left: 2rem; }
.mr-1 { margin-right: 0.25rem; }
.mr-2 { margin-right: 0.5rem; }
.mr-3 { margin-right: 0.75rem; }
.mr-4 { margin-right: 1rem; }
.mr-5 { margin-right: 1.25rem; }
.mr-6 { margin-right: 1.5rem; }
.mr-7 { margin-right: 1.75rem; }
.mr-8 { margin-right: 2rem; }

.p-2 { padding: 0.5rem; }
.p-4 { padding: 1rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }

.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-5 { gap: 1.25rem; }
.gap-6 { gap: 1.5rem; }
.gap-7 { gap: 1.75rem; }
.gap-8 { gap: 2rem; }
.gap-10 { gap: 2.5rem; }
.gap-12 { gap: 3rem; }
.gap-14 { gap: 3.5rem; }
.gap-16 { gap: 4rem; }
.gap-18 { gap: 4.5rem; }
.gap-20 { gap: 5rem; }

/* layout */
section {
	position: relative;
}
.container {
	position: relative;
	max-width: 1240px;
	padding: 80px 40px;
	margin: 0 auto;
}
.container.container-wide {
	max-width: 1440px;
}
.scene {
    /* min-height: var(--100vh); */
}
/* sec bg */
.sec-bg, .sec-video {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    width: 100%;
    height: 100%;
    inset: 0;
	overflow: hidden;
}
.sec-bg img {
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;
    object-fit: cover;
}

/* sec dec */
.sec-dec {
    position: absolute;
    pointer-events: none;
    width: 100%;
    max-width: 100%;
    height: 100%;
    inset: 0;
}
.sec-dec img {
    position: absolute;
    margin: auto;
}

/* divider */
.divider-top {
    height: 0;
    pointer-events: none;
	margin-top: 0px;
}
.divider-top .divider-img {
    position: relative;
	width: 100%;
	height: auto;
    top: -6vw;
}
.divider-bottom {
    height: 0;
    pointer-events: none;
}
.divider-bottom .divider-img {
    position: relative;
    width: 100%;
	height: auto;
    top: -2px;
}

/* btn */
.btns {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
}

.btn {
    position: relative;
	display: inline-block;
	padding: 16px 60px 14px 60px;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
	text-align: center;
    font-size: var(--fs-2xl);
	font-weight: 900;
	background-color: var(--color-yellow-500);
	color: var(--color-black);
	transition: all 0.2s ease;
	border-radius: 99px;
}
.btn:has(img) {
    padding-left: 72px;
}
.btn.disabled, .btn.active {
    pointer-events: none;
    opacity: .75;
    /* background-color: var(--color-gray-500) !important; */
}
.btn:hover {
	filter: brightness(1.125);
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.75);
}
.btn.btn-circle {
	border-radius: 50%;
    width: 90px;
    height: 90px;
    padding: 20px 8px 18px 14px;
    font-size: 24px;
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: 0.1em;
}
.btn .dec-flag {
    position: absolute;
    left: 24px;
    top: 8px;
}
.btn-circle .dec-flag {
    left: -3px;
    top: 0;
}
.btn-yellow {
	background-color: var(--color-yellow-500);
}
.btn-orange {
	background-color: var(--color-orange-500);
}
.btn-red {
	background-color: var(--color-red-500);
}

.copy-url {
    position: relative;
}
.copy-url::after {
    content: '已複製連結網址';
    display: block;
    position: absolute;
    padding: 4px 10px;
    border-radius: 4px;
    background-color: #19400C80;
    color: var(--color-white);
    font-size: 14px;
    width: fit-content;
    white-space: nowrap;
    right: 130%;
    pointer-events: none;
    opacity: 0;
    transform: translateX(6px);
    transition: all 0.4s ease;
}
.copy-url.copied::after {
    opacity: 1;
    transform: translateX(0px);
}

/* list */
.list-number {
    list-style: decimal-leading-zero;
    padding-left: 2em;
}
.list-number li + li {
    margin-top: 1em;
}
.list-dot {
    list-style: disc;
    padding-left: 1em;
}
.list-dot li + li {
    margin-top: 0.5em;
}
.list-arrow {
    line-height: 1.3;
}
.list-arrow li + li {
    margin-top: 0.75em;
}
.list-arrow li {
    position: relative;
    padding-left: 1.25em;
}
.list-arrow li::before {
    content: '';
    display: inline-block;
    position: absolute;
    left: 0;
    top: 0.275em;
    width: 0.75em;
    height: 0.75em;
    background: url('../img/icons/arrow.svg') no-repeat;
    background-size: contain;
}
.list-text {
    line-height: 1.5;
}
.list-text > li {
    display: flex;
    align-items: flex-start;
}
.list-text > li + li {
    margin-top: 0.5em;
}
.list-text > li > h6 {
    flex-shrink: 0;
    white-space: nowrap;
}
/* header & menu */
header {
    position: fixed;
    z-index: 99;
}
.hbg-btn {
    position: fixed;
	border: 0;
	padding: 0;
	height: 70px;
	width: 80px;
	border-radius: 12px;
	transition: margin 0.2s ease;
	top: 16px;
	right: 16px;
	text-align: center;
    background-color: var(--color-white);
    z-index: 100;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}
.icon-hbg,
.icon-hbg::before,
.icon-hbg::after {
	content: "";
	display: block;
	margin: 0 auto;
	width: 38px;
	height: 4px;
	background-color: var(--color-orange-500);
	border-radius: 4px;
	position: absolute;
	transform-origin: center center;
	left: -13px;
    right: -13px;
}
.icon-hbg::before {
	top: -15px;
}
.icon-hbg::after {
	bottom: -15px;
}
.active .icon-hbg {
	width: 0;
    left: -22px;
}
.active .icon-hbg::before {
	top: 0;
	transform: rotate(45deg);
}
.active .icon-hbg::after {
	bottom: 0;
	transform: rotate(-45deg);
}

/* sec-top */
#sec-top {
}
#sec-top .sec-bg img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center bottom;
    top: auto;
}
#sec-top .sec-bg img:first-of-type {
    height: 176%;
}
#sec-top .container {
    position: relative;
    min-height: auto;
    min-height: 100svh;
    padding-top: 40px;
    padding-bottom: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.on-embed #sec-top .container {
    min-height: auto;
}
#sec-top .container img {
    display: block;
}
.top-logo {
    position: absolute;
    width: 16%;
    max-width: 253px;
    left: 40px;
    top: 24px;
}
.top-title {
    width: 50%;
    max-width: 757px;
    margin: 16px auto;
}
.top-subtitle {
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
    letter-spacing: 0.4em;
    text-align: center;
}
h2.top-subtitle {
    letter-spacing: 0.1em;
}
.top-cta {
    position: absolute;
    width: 30%;
    max-width: 546px;
    margin-left: auto;
    bottom: 60px;
    right: 0px;
    filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.5));
}

/* animate scale */
.animate-scale-slide > img {
    opacity: 0;
    transform-origin: 50% 75%;
    animation: scale-slide 20s infinite linear 0s;
}
.animate-scale-slide > img:nth-of-type(2) {
    animation-delay: 10s;
}
@keyframes scale-slide {
    0% { transform: scale(1); opacity: 0; }
    10% { transform: scale(1.05); opacity: 1; }
    40% { transform: scale(1.2); opacity: 1; }
    50% { transform: scale(1.25); opacity: 0; }
    100% { transform: scale(1); opacity: 0; }
}
/* timer */
.timer {
    font-size: 60px;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.65);
    margin-bottom: 12px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    line-height: 1;
}
.timer i {
    display: inline-block;
    width: fit-content;
    text-align: right;
    font-weight: bold;
}
.timer i:first-child {
    width: fit-content;
}
.timer span {
    position: relative;
    font-size: var(--fs-sm);
    letter-spacing: 0;
    margin-right: 24px;
    margin-left: 6px;
    padding-top: 12px;
    padding-bottom: 12px;
    font-weight: bold;
}
.timer span:last-child {
    margin-right: 0;
}
/* sec-intro */
#sec-intro .container {
}
.progress {
    position: relative;
    text-align: center;
}
#sec-top .progress {
    width: 60%;
    max-width: 640px;
}
.progress-steps {
    list-style: none;
    position: relative;
    height: 70px;
    margin-top: 12px;
    display: flex;
}
.progress-step {
    position: absolute;
    top: 0;
    font-size: var(--fs-sm);
    letter-spacing: 0.05em;
    left: auto;
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, -16px);
    transition: all 0.6s ease;
}
.progress-step.show {
    opacity: 1;
    transform: translate(-50%, 0);
}
.progress-step::before {
    content: '';
    position: absolute;
    display: block;
    width: 1px;
    height: 8px;
    background-color: var(--color-gray-500);
    left: 50%;
    top: -10px;
}
.progress-step span i {
    font-size: var(--fs-xl);
    font-weight: bold;
    line-height: 1.5;
}
.progress-text {
    font-size: var(--fs-sm);
    letter-spacing: 0.2em;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.65);
}
.progress-text span {
    padding: 0 4px;
    font-size: var(--fs-xl);
    font-weight: bold;
    letter-spacing: 0.05em;
    /* color: var(--color-red-500); */
    /* text-shadow: 
                1px 1px 0 #fff,
                -1px 1px 0 #fff,
                -1px -1px 0 #fff,
                1px -1px 0 #fff,
                0 0 4px rgba(0, 0, 0, 0.65); */
}
.progress-bar {
    position: relative;
    width: 100%;
    height: 6px;
    border-radius: 99px;
    background-color: var(--color-gray-800);
    margin: 16px 0 0;
}
.progress-bar span {
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    border-radius: 99px;
    background-color: var(--color-red-500);
    transition: width 1.2s ease-out;
}
.progress-bar span::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: var(--color-red-500);
    inset: -5px -8px -5px auto;
    animation: breathe 2s infinite ease-in-out;
}
/* sec-map */
#sec-map .bg-sea img {
    width: 175%;
    max-width: none;
    object-position: 50% 100%;
}

#sec-map .bg-garbage {
    opacity: 0;
    transition: all 0.6s ease;
}
.on-embed #sec-map .bg-sea {
    height: 40%;
}
.on-embed #sec-map .bg-garbage {
    height: 100%;
    top: 0%;
    opacity: 1;
}
#sec-map .bg-garbage::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
        rgba(0, 0, 0, 0.5) 0%,
        rgba(0, 0, 0, 0.2) 20%,
        rgba(0, 0, 0, 0.45) 78%,
        rgba(0, 0, 0, 1) 100% );
    z-index: 1;
}
#sec-map .bg-garbage.active {
    opacity: 1;
}
.map-wrap {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 64px;
}
.taiwan-map {
    /* position: sticky; */
    top: calc(var(--vh) * 10);
    max-height: calc(var(--vh) * 80);
    width: 50%;
    max-width: 500px;
    z-index: 0;
}
.on-embed .taiwan-map {
    position: relative;
}
.taiwan-map svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
.taiwan-map svg .lines {
    fill: var(--color-white);
    fill-opacity: 0.8;
    transition: all 0.6s ease;
}
.taiwan-map.active svg .lines {
    fill: var(--color-black);
    fill-opacity: 0.6;
}
.taiwan-map svg .dots {
    opacity: 0;
    transition: all 0.6s ease;
}
.taiwan-map.active svg .dots {
    opacity: 1;
}
.map-content {
    position: relative;
    transform: translate3d(0,0,0);
    z-index: 10;
    width: 45%;
    max-width: calc(var(--fs-md) * 23);
}
.map-content .scene {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.map-content .scene .taiwan-map {
    display: none;
}
.on-embed .map-content .scene .taiwan-map {
    display: block;
    margin-bottom: 60px;
}
/* sec-garbage */
#sec-garbage .sec-bg img {
    object-fit: none;
    height: auto;
}
#sec-garbage .card-black {
    padding: 48px 72px 48px;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
#sec-garbage .container {
    padding-bottom: 120px;
}

/* gallery */
.gallery-title {
    position: relative;
    z-index: 2;
    padding-bottom: 48px;
}
.gallery-title p + p {
    margin-top: 0.4em;
}
.gallery-line {
    position: relative;
    z-index: 1;
    /* margin-top: -1.25em; */
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    border: 6px solid transparent;
}
.gallery-line > div {
    position: relative;
    width: 25%;
    aspect-ratio: 350 / 300;
}
.gallery-line > div img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
}
.gallery-line > div img:first-child {
    opacity: 1;
}

/* sec-future */
#sec-future .sec-bg::after,
#sec-future-2 .sec-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.5) 50%,
        rgba(0, 0, 0, 1) 100% );
}
#sec-future .container {
    padding-top: 80px;
    padding-bottom: 160px;
}
#sec-future-2 .container {
    padding-top: 0px;
    padding-bottom: 160px;
}
/* sec-about */
#sec-about {
}
.title-about {
    position: relative;
    width: fit-content;
    margin-top: -85px;
    padding-bottom: 80px;
}
.title-about h2 {
    position: relative;
    width: fit-content;
    font-size: var(--fs-5xl);
    font-weight: 900;
    transform: rotate(-5deg);
}
.title-about h2 + h2 {
    margin-top: 0.7em;
    margin-left: 1.75em;
}
.title-about .dec-wow {
    position: absolute;
    right: -155px;
    bottom: 55px;
}
.sec-about .container {
    position: relative;
}

.para-about {
    border-left: 6px solid var(--color-red-500);
    padding-left: 20px;
    flex-shrink: 1;
    margin-top: 40px;
    letter-spacing: 0.05em;
}

.img-about {
    flex-grow: 0;
    flex-shrink: 3;
}
.about-content > div:nth-child(1) .para-about {
    width: 50%;
    max-width: 540px;
}
.about-content > div:nth-child(1) .img-about {
    width: 50%;
    transform: rotate(-1deg);
    box-shadow: 8px 8px 0 var(--color-red-500);
}
.about-content > div:nth-child(2) {
    margin-top: -60px;
}
.about-content > div:nth-child(2) .para-about {
    width: 55%;
    max-width: 640px;
}
/* sec-work */
#sec-work .divider-bottom .dec-img {
    display: block;
    position: relative;
    margin: -32px auto 0;
    z-index: 1;
}
#sec-work .container {
    padding-top: 0px;
}
.work-title {
    display: block;
    width: fit-content;
    margin-left: auto;
    font-size: var(--fs-5xl);
    font-weight: 900;
}
.work-title span {
    padding: 0.3em 0.5em 0.25em 0.6em;
}
.work-subtitle {
    position: relative;
    z-index: 2;
    margin-top: 60px;
    display: block;
    width: fit-content;
    margin-left: auto;
    font-size: var(--fs-4xl);
    font-weight: bold;
    line-height: 1.5;
    text-indent: -1em;
    white-space: nowrap;
}
.swiper.swiper-work {
    margin-top: -16px;
}
.swiper.swiper-work .swiper-pagination {
    width: calc(85% - 15px);
    max-width: 960px;
    text-align: right;
}
.slide-work {
    padding: 12px;
}
.work-card {
    display: flex;
    align-items: stretch;
    background-color: var(--color-white);
    box-shadow: -12px 12px 0 var(--color-black);
    width: 85%;
    max-width: 940px;
}
.work-card .work-img {
    flex-shrink: 0;
    width: 40%;
    max-width: 347px;
}
.work-card .work-img img {
    display: block;
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.work-card .work-content {
    color: var(--color-black);
    padding: 24px 40px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 24px;
    max-width: 600px;
}
.work-card .work-content h4 {
    font-weight: bold;
    line-height: 1.2;
    font-size: var(--fs-3xl);
}
.work-card .work-content h4 span {
    display: block;
    width: fit-content;
    padding: 0 0.125em;
    margin-left: -0.125em;
    font-size: var(--fs-5xl);
    background-image: linear-gradient(to bottom,
        #00000000 0%,
        #00000000 75%,
        var(--color-red-500) 75%,
        var(--color-red-500) 100% );
    background-size: 100% 100%;
    background-position: 50% 0%;
    background-repeat: no-repeat;
}
.work-card .work-content p {
    font-size: var(--fs-lg);
    line-height: 1.5;
    letter-spacing: 0.05em;
}
.work-card .work-content p span {
    line-height: 1;
}
/* sec-award */
#sec-award .container {
    padding-top: 9vw;
}
.list-award {
    display: flex;
    flex-wrap: wrap;
    gap: 36px;
    align-items: center;
    justify-content: space-evenly;
}
.list-award li {
    position: relative;
    text-align: center;
    line-height: 1.3;
    padding: 8px 50px 6px;

    background-image: url('../img/dec/award_left.svg'), url('../img/dec/award_right.svg');
    background-repeat: no-repeat, no-repeat;
    background-position: left center, right center;
    background-size: auto 100%;
}
.list-award li span {
    display: block;
    font-weight: 900;
}
.list-surport {
    display: flex;
    flex-wrap: wrap;
    gap: 36px 0;
    align-items: center;
    justify-content: center;
}
.list-surport li {
    position: relative;
    text-align: center;
    line-height: 1.3;
    padding: 8px 40px 6px 42px;
    display: block;
    font-weight: 900;
    font-size: var(--fs-2xl);
}
.list-surport li::before, .list-surport li::after {
    content: '';
    position: absolute;
    width: 1px;
    height: 0.75em;
    background-color: var(--color-gray-600);
    top: 0;
    bottom: 0;
    margin: auto;
}
.list-surport li::before {
    left: -1px;
}
.list-surport li::after {
    right: 0px;
}

/* sec-but */
#sec-but .sec-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.4) 54%,
        rgba(0, 0, 0, 0.8) 100% );
}
#sec-but .container {
    padding-top: 40px;
    padding-bottom: 160px;
}
#sec-but .card-black {
    padding: 40px 72px 24px;
}
/* sec-plan */
#sec-plan .divider-top .dec-img {
    position: absolute;
    right: 6vw;
    top: -5vw;
}
#sec-plan .divider-bottom {
    position: relative;
    z-index: 2;
}
#sec-plan .container {
    padding-bottom: 40px;
    padding-top: 20px;
}
.plans-wrap {
    position: relative;
    aspect-ratio: 1140 / 520;
    background-image: url('../img/dec/circle_line.svg');
    background-repeat: no-repeat;
    background-size: 80% auto;
    background-position: 50% 20%;
    margin: 60px auto;
}
.plans-title {
    position: absolute;
    inset: 0 0 auto 0;
    margin: auto;
    text-align: center;
    width: fit-content;
    font-weight: 900;
    font-size: var(--fs-3xl);
    color: var(--color-white);
    transform: rotate(-1.5deg);
    line-height: 1.2;
}
.plans-title span {
    display: block;
    font-size: var(--fs-4xl);
}
.plans-wrap .plan {
    position: absolute;
    width: fit-content;
    margin: auto;
    width: 27%;
    max-width: 306px;
}
.plans-wrap .plan > h4 {
    position: relative;
    z-index: 1;
    background-color: var(--color-white);
    color: var(--color-red-500);
    font-weight: 900;
    font-size: 24px;
    padding: 10px 22px 6px 24px;
    width: fit-content;
    border-radius: 4px;
    margin: 0 auto;
}
.plans-wrap .plan > h4 img {
    position: absolute;
    margin: auto;
}
.plans-wrap .plan > img {
    display: block;
    border-radius: 12px;
    margin-top: -20px;
    width: 100%;
}
.plans-wrap .plan p {
    padding-top: 8px;
}
.plans-wrap .plan:nth-of-type(1) {
    left: 0;
    top: 18%;
}
.plans-wrap .plan:nth-of-type(2) {
    right: 0;
    top: 6%;
}
.plans-wrap .plan:nth-of-type(3) {
    right: 0;
    left: 0;
    bottom: 2%;
}
#plan-1 > h4 img { left: 5%; right: 0; bottom: 80%; }
#plan-2 > h4 img { right: 90%; bottom: -2%; }
#plan-3 > h4 img { right: 85%; bottom: -1%; }
#plan-4 > h4 img { left: 95%; bottom: -60%; transform: rotate(12deg); }
#plan-5 > h4 img { right: 110%; bottom: -40%; }
#plan-6 > h4 img { left: 90%; bottom: 35%; }

/* sec-guardian */
#sec-guardian .sec-bg {
    overflow: visible;
}
#sec-guardian .sec-bg .sticky {
    position: sticky;
    top: 0;
    height: var(--100vh);
}
#sec-guardian .sec-bg .sticky img {
}
#sec-guardian .sec-bg .sticky::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        rgba(30, 30, 30, 0.5) 0%,
        rgba(0, 0, 0, 0.5) 100% );
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
#sec-guardian .container {
    padding-top: 80px;
    padding-bottom: 160px;
}
.target-wrap {
}
.title-guardian {
    width: fit-content;
    font-size: var(--fs-lg);
    font-weight: 700;
    background-color: var(--color-white);
    color: var(--color-black);
    padding: 8px 14px 6px 16px;
}
.target-wrap .title-guardian {
    margin-left: calc(20% - 2.6em);
    margin-bottom: 10px;
    margin-top: 60px;
    position: relative;
    z-index: 1;
}
.target-step {
    display: flex;
    position: relative;
    padding: 20px 0 20px 20%;
}
.target-step .target-dot {
    display: block;
    width: var(--fs-sm);
    height: var(--fs-sm);
    border-radius: 50%;
    background-color: var(--color-white);
    flex-shrink: 0;
}
.target-step .target-dot::before {
    content: '';
    position: absolute;
    display: block;
    width: 2px;
    left: calc(20% + (var(--fs-sm) / 2) - 1px);
    top: 20px;
    bottom: -20px;
    background-color: var(--color-white);
}
.target-step:first-of-type .target-dot::before {
    top: -30px;
}
.target-step:last-of-type .target-dot::before {
    content: none;
}
.target-step .target-dot::after {
    content: '';
    position: absolute;
    display: block;
    height: 2px;
    top: calc(20px + (var(--fs-sm) / 2) - 1px);
    left: calc(20% + (var(--fs-sm) / 2) - 1px);
    width: 5%;
    background-color: var(--color-white);
}
.target-title {
    position: absolute;
    text-align: right;
    left: 0;
    width: 20%;
    padding-right: 1em;
}
.target-title > span {
    font-weight: bold;
    color: var(--color-gray-300);
}
.target-title > h5 {
    font-size: var(--fs-3xl);
    font-weight: 800;
    margin-top: 8px;
    white-space: nowrap;
}
.target-step {
    opacity: 0.6;
    filter: blur(1px);
}
.target-finished {
    opacity: 0.8;
    filter: blur(0px);
}
.target-running {
    opacity: 1;
    box-shadow: 0 0 12px var(--color-orange-400);
    border-radius: 12px;
    filter: blur(0px);
}
.target-running .target-title > span {
    color: var(--color-white);
}

.target-finished::after {
    content: '已達標';
    display: block;
    border: 3px solid var(--color-red-500);
    border-radius: 6px;
    padding: 7px 10px 3px 12px;
    position: absolute;
    top: 6px;
    left: 0;
    font-weight: bold;
    font-size: var(--fs-2xl);
    letter-spacing: 3px;
    color: var(--color-red-500);
    transform: rotate(-6deg);
    filter: drop-shadow(0 0px 4px rgba(0, 0, 0, 1));
}
.target-highlight {
    position: absolute;
    left: 0;
    top: -1.2em;
    font-weight: bold;
    font-size: var(--fs-lg);
}

.target-content {
    border-left: 0.75em solid var(--color-white);
    padding: 6px 0 6px 1em;
    margin-left: 5%;
    max-width: 560px;
}
.target-content .list-arrow h6 {
    font-size: var(--fs-lg);
    font-weight: bold;
}
.target-content .list-arrow h6 span {
    font-size: var(--fs-3xl);
    letter-spacing: 0;
    line-height: 0;
}
.target-content .list-arrow h6 + p {
    margin-top: 0.25em;
}
.target-step:nth-of-type(1) .target-content { margin-left: 5%; border-color: var(--color-orange-300); }
.target-step:nth-of-type(2) .target-content { margin-left: 10%; border-color: var(--color-orange-400); }
.target-step:nth-of-type(3) .target-content { margin-left: 15%; border-color: var(--color-orange-500); }
.target-step:nth-of-type(4) .target-content { margin-left: 20%; border-color: var(--color-orange-600); }

.target-step:nth-of-type(1) .target-dot::after { width: 5%; }
.target-step:nth-of-type(2) .target-dot::after { width: 10%; }
.target-step:nth-of-type(3) .target-dot::after { width: 13%; }
.target-step:nth-of-type(4) .target-dot::after { width: 18%; }

.target-step:nth-of-type(1) .target-title > h5 { color: var(--color-orange-300); }
.target-step:nth-of-type(2) .target-title > h5 { color: var(--color-orange-400); }
.target-step:nth-of-type(3) .target-title > h5 { color: var(--color-orange-500); }
.target-step:nth-of-type(4) .target-title > h5 { color: var(--color-orange-600); }

.target-step:nth-of-type(1) .list-arrow h6 span { color: var(--color-orange-300); }
.target-step:nth-of-type(2) .list-arrow h6 span { color: var(--color-orange-400); }
.target-step:nth-of-type(3) .list-arrow h6 span { color: var(--color-orange-500); }
.target-step:nth-of-type(4) .list-arrow h6 span { color: var(--color-orange-600); }

.target-step:nth-of-type(1) .target-dot, .target-step:nth-of-type(1) .target-dot::after { background-color: var(--color-orange-300); }
.target-step:nth-of-type(2) .target-dot, .target-step:nth-of-type(2) .target-dot::after { background-color: var(--color-orange-400); }
.target-step:nth-of-type(3) .target-dot, .target-step:nth-of-type(3) .target-dot::after { background-color: var(--color-orange-500); }
.target-step:nth-of-type(4) .target-dot, .target-step:nth-of-type(4) .target-dot::after { background-color: var(--color-orange-600); }

.target-step:nth-of-type(1) .target-dot::before { background: linear-gradient(var(--color-white) 20px, var(--color-orange-300) 50px, var(--color-orange-400)); }
.target-step:nth-of-type(2) .target-dot::before { background: linear-gradient(var(--color-orange-400), var(--color-orange-500)); }
.target-step:nth-of-type(3) .target-dot::before { background: linear-gradient(var(--color-orange-500), var(--color-orange-600)); }

/* pie */
.pie-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
.pie {
    width: fit-content;
}
.pie img {
    margin: 24px;
}
.pie svg {
    transform: rotate(180deg);
}
.pie-data {
    width: 30%;
}
.pie-data li {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-right: 60px;
}
.pie-data li + li {
    margin-top: 0.5em;
}
.pie-data li::before {
    content: '';
    display: inline-block;
    width: var(--fs-sm);
    height: var(--fs-sm);
    background-color: var(--color-white);
    border-radius: 50%;
    margin-top: -1px;
    flex-shrink: 0;
}
.pie-data li::after {
    content: attr(data-amount)'%';
    position: absolute;
    right: 0;
    letter-spacing: 0;
}

.pie-data li[data-index="1"]::before { background-color: #CD3A06; }
.pie-data li[data-index="2"]::before { background-color: #D4501B; }
.pie-data li[data-index="3"]::before { background-color: #E8753C; }
.pie-data li[data-index="4"]::before { background-color: #F5A36C; }
.pie-data li[data-index="5"]::before { background-color: #B9764D; }
.pie-data li[data-index="6"]::before { background-color: #5D382B; }
.pie-data li[data-index="7"]::before { background-color: #421C0E; }

.pie svg circle[data-index="1"] { stroke: #CD3A06; }
.pie svg circle[data-index="2"] { stroke: #D4501B; }
.pie svg circle[data-index="3"] { stroke: #E8753C; }
.pie svg circle[data-index="4"] { stroke: #F5A36C; }
.pie svg circle[data-index="5"] { stroke: #B9764D; }
.pie svg circle[data-index="6"] { stroke: #5D382B; }
.pie svg circle[data-index="7"] { stroke: #421C0E; }

.pie svg circle[data-index="1"] { animation: dash-1 2s ease reverse; stroke-dasharray: calc(30 * 31.4 / 100) 31.4; }
.pie svg circle[data-index="2"] { animation: dash-2 2s ease reverse; stroke-dasharray: 0 calc(30 * 31.4 / 100) calc(10 * 31.4 / 100) 31.4; }
.pie svg circle[data-index="3"] { animation: dash-3 2s ease reverse; stroke-dasharray: 0 calc(40 * 31.4 / 100) calc(10 * 31.4 / 100) 31.4; }
.pie svg circle[data-index="4"] { animation: dash-4 2s ease reverse; stroke-dasharray: 0 calc(50 * 31.4 / 100) calc(10 * 31.4 / 100) 31.4; }
.pie svg circle[data-index="5"] { animation: dash-5 2s ease reverse; stroke-dasharray: 0 calc(60 * 31.4 / 100) calc(5.5 * 31.4 / 100) 31.4; }
.pie svg circle[data-index="6"] { animation: dash-6 2s ease reverse; stroke-dasharray: 0 calc(65.5 * 31.4 / 100) calc(14.5 * 31.4 / 100) 31.4; }
.pie svg circle[data-index="7"] { animation: dash-7 2s ease reverse; stroke-dasharray: 0 calc(80 * 31.4 / 100) calc(20 * 31.4 / 100) 31.4; }

#path {
    stroke-dasharray: 500;
    animation: dash-1 2s ease reverse;
}

@keyframes dash-1 { from { stroke-dashoffset: calc(30 * 31.4 / 100) 31.4; } }
@keyframes dash-2 { from { stroke-dashoffset: 0 calc(30 * 31.4 / 100) calc(10 * 31.4 / 100) 31.4; } }
@keyframes dash-3 { from { stroke-dashoffset: 0 calc(40 * 31.4 / 100) calc(10 * 31.4 / 100) 31.4; } }
@keyframes dash-4 { from { stroke-dashoffset: 0 calc(50 * 31.4 / 100) calc(10 * 31.4 / 100) 31.4; } }
@keyframes dash-5 { from { stroke-dashoffset: 0 calc(60 * 31.4 / 100) calc(5.5 * 31.4 / 100) 31.4; } }
@keyframes dash-6 { from { stroke-dashoffset: 0 calc(65.5 * 31.4 / 100) calc(14.5 * 31.4 / 100) 31.4; } }
@keyframes dash-7 { from { stroke-dashoffset: 0 calc(80 * 31.4 / 100) calc(20 * 31.4 / 100) 31.4; } }

/* donate */
.donate-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 100px 80px;
}
.donate-item {
    width: 45%;
    min-height: 300px;
}
.donate-wrap .donate-item:nth-of-type(2n) {
    margin-top: 0px;
}
.donate-card {
    position: relative;
    background-color: var(--color-gray-100);
    color: var(--color-black);
    border-radius: 20px;
    padding: 24px 32px 120px 32px;
}
.donate-hint {
    position: relative;
    padding: 24px 32px 90px 32px;
}
.donate-wide {
    width: 100%;
}
.donate-card > h5, .donate-hint > h5 {
    font-size: var(--fs-3xl);
    font-weight: 900;
    margin-bottom: 16px;
}
.donate-hint > h5 img {
    position: absolute;
    left: 0;
    top: 0;
}
.donate-hint > hr {
    margin: 1em 0;
    height: 2px;
}
.donate-card > p {
    font-weight: bold;
    letter-spacing: 0.05em;
}
.donate-card > ul {
    letter-spacing: 0.05em;
}
.donate-card > ul li + li {
    margin-top: 0.5em;
}
.donate-card > .donate-icon {
    position: absolute;
    right: 32px;
    bottom: 80px;
    max-height: 110px;
}
.donate-hint > .donate-icon {
    position: absolute;
    right: 32px;
    width: 35%;
    max-width: 160px;
}
.donate-btns {
    display: flex;
    align-items: flex-start;
    justify-content: space-around;
    padding: 0 12px;
    gap: 12px;
    position: absolute;
    bottom: auto;
    left: 0;
    right: 0;
    top: calc(100% - 30px);
}
.donate-btns a {
    position: relative;
    min-height: 60px;
    width: 50%;
    border-radius: 99px;
    padding: 12px 24px 8px;
    line-height: 1.5;
    text-align: center;
    font-weight: bold;
    background-color: var(--color-red-500);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 3px 3px 0 rgba(255, 255, 255, 1);
    flex-grow: 1;
}
.donate-btns a span {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    right: 0;
    font-size: var(--fs-md);
    font-weight: 500;
    color: var(--color-red-500);
    letter-spacing: 0;
}
.donate-btns a.donate-single {
    background-color: var(--color-orange-500);
}
.donate-btns a.donate-single span {
    color: var(--color-orange-500);
}
/* sec-feedback */
#sec-feedback {
}
#sec-feedback .title-bg-red {
    position: relative;
    top: -1em;
}
#sec-feedback .container {
    padding-top: 80px;
    padding-bottom: 120px;
    overflow: hidden;
}
.swiper.swiper-feedback .swiper-button-prev,
.swiper.swiper-feedback .swiper-button-next {
    background: transparent;
    color: var(--color-red-500);
}
.swiper.swiper-feedback {
    max-width: 780px;
    overflow: visible;
}
.swiper.swiper-feedback  .swiper-wrapper {
    display: flex;
    align-items: center;
}
.slide-feedback {
    text-align: center;
}
.slide-feedback .feedback-img-wrap {
    margin: 0 auto 24px;
    width: 470px;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 80%;
    /* aspect-ratio: 470 / 290; */
}
.slide-feedback .feedback-img-wrap img {
    max-height: 100%;
    object-fit: contain;
}
.slide-feedback h4 {
    font-size: var(--fs-lg);
    font-weight: 900;
    color: var(--color-red-500);
    margin-bottom: 10px;
}
.slide-feedback h4 + p {
    margin-bottom: 6px;
    letter-spacing: 0.05em;
}
.slide-feedback p {
    max-width: 400px;
    margin: 0 auto;
}
/* sec-review */
#sec-review .sec-bg {
    overflow: visible;
}
#sec-review .sec-bg .sticky {
    position: sticky;
    top: 0;
    height: var(--100vh);
}
#sec-review .sec-bg .sticky img {
}
#sec-review .sec-bg .sticky::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        rgba(30, 30, 30, 0.95) 0%,
        rgba(0, 0, 0, 0.95) 100% );
}
#sec-review .title-bg-red {
    position: relative;
    margin-bottom: 60px;
}
#sec-review > .container {
    padding-top: calc(8vw + 60px);
}
#sec-review-2 .container {
    padding-top: 40px;
}
#sec-review-2 .title-bg-red {
    position: relative;
    margin-bottom: 40px;
}
.kols {
    display: flex;
}
.swiper-kol {
    
}
.slide-kol {
    display: flex;
    align-items: center;
    justify-content: center;
}
.kol {
    position: relative;
    width: 100%;
    max-width: 375px;
    padding-right: 36px;
    padding-left: 12px;
    margin: 0 auto;
}
.kol-name {
    position: absolute;
    right: 0;
    text-align: right;
    line-height: 1.3;
    top: 0;
    margin-top: 75%;
    transform: translateY(-100%);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.slide-kol:nth-of-type(5) img {
    margin-left: -20px;
}
.kol-name h5 {
    font-weight: bold;
    text-shadow: -4px 4px 4px rgba(0, 0, 0, 0.6);
}
.kol-name h4 {
    padding: 0 0.2em 0.1em 0.3em;
    font-weight: bold;
    font-size: var(--fs-3xl);
    background-image: linear-gradient(to bottom,
        #00000000 0%,
        #00000000 40%,
        var(--color-red-500) 40%,
        var(--color-red-500) 100% );
    background-size: calc(100%) 100%;
    background-position: 100% 50%;
    background-repeat: no-repeat;
}
.kol-content {
    position: relative;
    top: -24px;
    background-color: var(--color-gray-800);
    padding: 12px 16px 12px 18px;
    margin-left: -12px;
    font-size: var(--fs-sm);
    letter-spacing: 0.05em;
    text-align: justify;
}
.kol-content::before {
    content: '';
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 0 30px 30px;
    border-color: transparent transparent var(--color-gray-800) transparent;
    position: absolute;
    top: -20px;
}
.swiper-kol .swiper-button-prev, .swiper-kol .swiper-button-next {
    background-color: transparent;
    color: var(--color-red-500);
    top: 95%;
}
.swiper-kol .swiper-pagination-bullet {
    background-color: var(--color-gray-800);
}
.swiper-kol .swiper-pagination-bullet-active {
    background-color: var(--color-white);
}
/* review */
.swiper-review .swiper-wrapper {
    display: flex;
    align-items: center;
}
.swiper-review .swiper-button-prev, .swiper-review .swiper-button-next {
    background-color: var(--color-white);
    color: var(--color-red-500);
}
.swiper-review .swiper-pagination-bullet {
    background-color: var(--color-gray-800);
}
.swiper-review .swiper-pagination-bullet-active {
    background-color: var(--color-white);
}
.review-card {
    display: flex;
    align-items: stretch;
    max-width: 720px;
    margin: 0 auto;
}
.review-left {
    width: 35%;
}
.review-left .review-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.review-right {
    position: relative;
    width: 65%;
    background-color: var(--color-white);
    color: var(--color-black);
    padding: 24px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.review-right::before {
    content: '';
    display: block;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 20px 20px 20px 0;
    border-color: transparent var(--color-white) transparent transparent;
    position: absolute;
    inset: 0 auto 0 -20px;
    margin: auto;
}
.review-title {
    font-weight: bold;
    line-height: 1.3;
}
.review-name {
    font-weight: 900;
    font-size: var(--fs-3xl);
    margin-top: 6px;
}
.review-right hr {
    margin: 0.75em 0;
    height: 2px;
}
.review-content {
}
.review-content p {
    font-size: var(--fs-sm);
    letter-spacing: 0.05em;
    line-height: 1.35;
}
/* sec-final */
#sec-final .sec-bg {
    height: auto;
    aspect-ratio: 1440 / 680;
}
#sec-final .sec-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 8%;
}
#sec-final .final-top {
    margin-bottom: 32vw;
}
/* card */
.card-black {
    background: radial-gradient(#1E1E1E99, #00000099);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 24px 36px;
}
.card-title {
    text-align: center;
    font-weight: bold;
    font-size: var(--fs-lg);
    color: var(--color-gray-300);
    line-height: 1.3;
}

/* data */
.data-list-dots {
    display: flex;
    align-items: center;
    gap: 9px;
    padding-bottom: 1px;
}
.data-list-dots .data-dot {
    position: relative;
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #FFFFFF;
    border-radius: 50%;
    margin-right: 12px;
}
.data-list-dots .data-dot::after {
    content: attr(data-level);
    display: inline-block;
    position: absolute;
    left: 12px;
    top: -0.35em;
    white-space: nowrap;
}
.data-list-dots .data-dot[data-level="0"] { background-color: #FEF3EC99; }
.data-list-dots .data-dot[data-level="1"] { background-color: #FAE1D699; }
.data-list-dots .data-dot[data-level="2"] { background-color: #F4C9B799; }
.data-list-dots .data-dot[data-level="3"] { background-color: #EEAC91A6; }
.data-list-dots .data-dot[data-level="4"] { background-color: #E78B6FB3; }
.data-list-dots .data-dot[data-level="5"] { background-color: #E26B4DBF; }
.data-list-dots .data-dot[data-level="6"] { background-color: #DC4C33CC; }
.data-list-dots .data-dot[data-level="7"] { background-color: #D92E27D9; }
.data-list-dots .data-dot[data-level="8"] { background-color: #B81D22E6; }
.data-list-dots .data-dot[data-level="9"] { background-color: #962124F2; }

/* chart */
.chart {
    position: relative;
}
.chart-horizon {
    padding-left: 40px;
    padding-bottom: 40px;
}
.chart-line {
    position: relative;
    display: flex;
    flex-direction: column-reverse;
}
.chart-verticle .chart-line {
    flex-direction: row;
    position: absolute;
    inset: 0;
}
.chart-line i {
    position: relative;
    display: block;
    width: 100%;
    height: 60px;
    border-bottom: 1px solid var(--color-gray-700);
}
.chart-verticle .chart-line i {
    width: 33%;
    height: 100%;
    border-bottom: 0;
    border-left: 1px solid var(--color-gray-700);
}
.chart-verticle .chart-line i:last-child {
    width: 0;
    display: none;
}
.chart-line i::before {
    content: attr(data-amount);
    position: absolute;
    bottom: -0.5em;
    font-size: var(--fs-2xs);
    color: var(--color-gray-600);
    letter-spacing: 0.05em;
}
.chart-verticle .chart-line i::before {
    position: absolute;
    bottom: -1.25em;
}
#sec-garbage .chart-line i::before {
    content: attr(data-amount)'kg';
    left: -40px;
}
.chart-horizon .chart-data {
    display: flex;
    align-items: flex-start;
    justify-content: space-around;
    font-size: var(--fs-2xs);
    color: var(--color-gray-600);
}
.chart-verticle .chart-data {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 12px 0;
    gap: 12px;
}
.chart-horizon .chart-data > div {
    position: relative;
    width: 5%;
}
.chart-verticle .chart-data > div {
    position: relative;
    width: 100%;
    height: 35px;
}
.chart-data > div .data-label {
    position: absolute;
    white-space: nowrap;
    inset: 5px calc(-40px - 0.1em) auto -40px;
    margin: auto;
    text-align: center;
    letter-spacing: 0.05em;
    line-height: 1.3;
}
.chart-verticle .chart-data > div .data-label {
    position: relative;
    display: block;
    text-align: left;
    inset: initial;
    padding: 7px 20px 5px;
    font-weight: bold;
    color: var(--color-gray-300);
}
.chart-verticle .chart-data > div .data-label::after {
    content: attr(data-amount);
    font-weight: 400;
    margin-left: 12px;
}
.chart-data > div .data-bar {
    position: absolute;
    bottom: 100%;
    left: 0;
    display: block;
    width: 100%;
    height: 60px;
    background-color: #6969694D;
}
.chart-verticle .chart-data > div .data-bar {
    position: absolute;
    width: auto;
    height: auto;
    inset: 0;
}
.chart-verticle .chart-data > div .data-bar.bg-red {
    background-color: var(--color-red-500);
}
.chart-verticle .chart-data > div .data-bar.bg-green {
    background-color: var(--color-green-500);
}
.chart-data > div .data-dot {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    bottom: calc(60px - 4px);
    left: 0;
    right: 0;
    margin: auto;
    background-color: var(--color-red-500);
    z-index: 1;
}
.chart-data > div .data-dot::after {
    content: attr(data-label);
    position: absolute;
    white-space: nowrap;
    font-size: var(--fs-2xs);
    font-weight: bold;
    letter-spacing: 0;
    color: var(--color-gray-300);
    left: -16px;
    right: -24px;
    text-align: center;
    margin: auto;
    bottom: 12px;
}
.chart-data > div .data-dot-line {
    position: absolute;
    width: 185%;
    height: 2px;
    left: 50%;
    background-color: var(--color-red-500);
    transform-origin: left center;
    z-index: 1;
}


/* swiper */
.swiper {
    margin: 0 auto;
}
.swiper:has(.swiper-pagination) {
    padding-bottom: 40px;
}
.swiper-wrapper {
    height: auto;
}
.swiper-button-prev, .swiper-button-next {
    background: var(--color-black);
    color: var(--color-white);
    border: 0;
    z-index: 5;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    z-index: 20;
}
.swiper-button-prev:after, .swiper-button-next:after {
    content: none;
}
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {
    opacity: 0.3;
}
.swiper-button-prev span, .swiper-button-next span {
    font-size: 50px;
}
.swiper-pagination {

}
.swiper-pagination-bullet {
    background-color: var(--color-black);
    opacity: 1;
    width: 10px;
    height: 10px;
}
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 5px;
}
.swiper-pagination-bullet-active {
    background-color: var(--color-white);
    opacity: 1;
}
.swiper-button-next svg, .swiper-button-prev svg {
    width: 13px;
    height: 24px;
}
/* sec-qa */
.list-qa {
    border-bottom: 1px solid var(--color-white);
}
.qa-question {
    position: relative;
    background: transparent;
    width: 100%;
    color: var(--color-white);
    border: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 60px 24px 36px;
    font-weight: bold;
    letter-spacing: 0.1em;
    border-top: 1px solid var(--color-white);
    text-align: left;
}
.qa-question::before {
    content: 'Q';
    position: absolute;
    left: 0;
    font-size: var(--fs-2xl);
    font-weight: 400;
    font-family: 'Rubik';
}
.qa-question::after {
    content: '';
    position: absolute;
    right: 24px;
    display: inline-block;
    width: 14px;
    height: 11px;
    background: url('../img/icons/arrow_expand.svg') no-repeat;
}
.qa-anser {
    font-size: var(--fs-sm);
    letter-spacing: 0.05em;
    padding: 0 36px 0 36px;
}
.qa-anser > *:last-child {
    margin-bottom: 24px;
}
/* actor */
.collapse {
    position: relative;
    min-height: 0px;
    max-height: 0px;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out;
    padding-bottom: 0;
}
.collapse.active {
    max-height: 1200px;
}
.collapse.active::after {
    opacity: 0;
    pointer-events: none;
}
.collapse-toggler.active::after {
    transform: rotate(180deg);
}
.collapse h4 {
    font-weight: bold;
    margin-bottom: 0px;
}
.collapse ul {
    margin-left: 6px;
}

/* video */
.video-wrap {
    position: relative;
    padding-bottom: 56%;
    max-width: 960px;
    margin: 36px auto 64px;
}
.video-wrap iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;
}

/* float right */
.float-right {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
    position: fixed;
    gap: 16px;
    right: 20px;
    bottom: 20px;
    z-index: 50;
    transform-origin: right bottom;
}

/* footer */
footer .container {
    padding-bottom: 0.5em;
}
footer hr {
    margin: 0.5em auto;
}
/* animetion */
.anime-breathe {
    animation: breathe 3s infinite ease-in-out;
}
@keyframes breathe {
    0% { transform: scale(0.9); }
    50% { transform: scale(1); }
    100% { transform: scale(0.9); }
}
.animate__animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@keyframes bounce {
    from,
    20%,
    53%,
    to {
      -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  
    40%,
    43% {
      -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
      animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
      -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
      transform: translate3d(0, -15px, 0) scaleY(1.05);
    }
  
    70% {
      -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
      animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
      -webkit-transform: translate3d(0, -7px, 0) scaleY(1.025);
      transform: translate3d(0, -7px, 0) scaleY(1.025);
    }
  
    80% {
      -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      -webkit-transform: translate3d(0, 0, 0) scaleY(0.975);
      transform: translate3d(0, 0, 0) scaleY(0.975);
    }
  
    90% {
      -webkit-transform: translate3d(0, -2px, 0) scaleY(1.01);
      transform: translate3d(0, -2px, 0) scaleY(1.01);
    }
}
.hover_bounce:hover, .animate__bounce {
    position: relative;
    -webkit-animation-name: bounce;
    animation-name: bounce;
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
}
.hover_bounce::after {
    content: '';
    position: absolute;
    inset: 0 0 -15px 0;
    pointer-events: none;
}
.hover_bounce:hover::after {
    pointer-events: initial;
}

/* fade-in */
.fade-in {
    opacity: 0;
    transform: translateY(16px);
    transition: all 0.6s ease;
}
.fade-in.show {
    opacity: 1;
    transform: translateY(0);
}